From: Aijana Schumann Date: Thu, 3 Sep 2020 16:16:13 +0000 (+0200) Subject: Update NetworkMap X-Git-Tag: 1.0.1~5 X-Git-Url: https://gerrit.onap.org/r/gitweb?a=commitdiff_plain;h=65ffa99d96e7b443e3d74ec20bbd321fd66aa76d;p=ccsdk%2Ffeatures.git Update NetworkMap update networkmap Issue-ID: CCSDK-2713 Signed-off-by: Aijana Schumann Change-Id: I97b0950a4d7f98fdb9044c1e05dfa8dfca34efaf --- diff --git a/sdnr/wt/odlux/apps/networkMapApp/icons/README.md b/sdnr/wt/odlux/apps/networkMapApp/icons/README.md index b26fbc29b..acfbcf823 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/icons/README.md +++ b/sdnr/wt/odlux/apps/networkMapApp/icons/README.md @@ -19,7 +19,7 @@ Copyright of icons is as followes: */ --> -datacenter.png and lamp.png +datacenter.png, lamp.png, factory.png, datacenterred.png, lampred.png, factoryred.png, Taken from MS Word diff --git a/sdnr/wt/odlux/apps/networkMapApp/icons/datacenterred.png b/sdnr/wt/odlux/apps/networkMapApp/icons/datacenterred.png new file mode 100644 index 000000000..5d5a6c523 Binary files /dev/null and b/sdnr/wt/odlux/apps/networkMapApp/icons/datacenterred.png differ diff --git a/sdnr/wt/odlux/apps/networkMapApp/icons/datacenterred.png.d.ts b/sdnr/wt/odlux/apps/networkMapApp/icons/datacenterred.png.d.ts new file mode 100644 index 000000000..33f3061e2 --- /dev/null +++ b/sdnr/wt/odlux/apps/networkMapApp/icons/datacenterred.png.d.ts @@ -0,0 +1,2 @@ +declare const datacenterred: string; +export default datacenterred; \ No newline at end of file diff --git a/sdnr/wt/odlux/apps/networkMapApp/icons/factory.png b/sdnr/wt/odlux/apps/networkMapApp/icons/factory.png new file mode 100644 index 000000000..a38781baa Binary files /dev/null and b/sdnr/wt/odlux/apps/networkMapApp/icons/factory.png differ diff --git a/sdnr/wt/odlux/apps/networkMapApp/icons/factory.png.d.ts b/sdnr/wt/odlux/apps/networkMapApp/icons/factory.png.d.ts new file mode 100644 index 000000000..b5c4f19d9 --- /dev/null +++ b/sdnr/wt/odlux/apps/networkMapApp/icons/factory.png.d.ts @@ -0,0 +1,2 @@ +declare const factory: string; +export default factory; \ No newline at end of file diff --git a/sdnr/wt/odlux/apps/networkMapApp/icons/factoryred.png b/sdnr/wt/odlux/apps/networkMapApp/icons/factoryred.png new file mode 100644 index 000000000..959603ab1 Binary files /dev/null and b/sdnr/wt/odlux/apps/networkMapApp/icons/factoryred.png differ diff --git a/sdnr/wt/odlux/apps/networkMapApp/icons/factoryred.png.d.ts b/sdnr/wt/odlux/apps/networkMapApp/icons/factoryred.png.d.ts new file mode 100644 index 000000000..1fac0a943 --- /dev/null +++ b/sdnr/wt/odlux/apps/networkMapApp/icons/factoryred.png.d.ts @@ -0,0 +1,2 @@ +declare const factoryRed: string; +export default factoryRed; \ No newline at end of file diff --git a/sdnr/wt/odlux/apps/networkMapApp/icons/lampred.png b/sdnr/wt/odlux/apps/networkMapApp/icons/lampred.png new file mode 100644 index 000000000..4678ce91c Binary files /dev/null and b/sdnr/wt/odlux/apps/networkMapApp/icons/lampred.png differ diff --git a/sdnr/wt/odlux/apps/networkMapApp/icons/lampred.png.d.ts b/sdnr/wt/odlux/apps/networkMapApp/icons/lampred.png.d.ts new file mode 100644 index 000000000..12a8f91cb --- /dev/null +++ b/sdnr/wt/odlux/apps/networkMapApp/icons/lampred.png.d.ts @@ -0,0 +1,2 @@ +declare const lampred: string; +export default lampred; \ No newline at end of file diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/actions/detailsAction.ts b/sdnr/wt/odlux/apps/networkMapApp/src/actions/detailsAction.ts index 8a005bcaf..5288f61d9 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/actions/detailsAction.ts +++ b/sdnr/wt/odlux/apps/networkMapApp/src/actions/detailsAction.ts @@ -117,8 +117,6 @@ running=true; result.forEach((res: any, index)=>{ - console.log("value") - console.log(res); if(res !==null && res.node!==null){ list[index].status = res.node[0]["netconf-node-topology:connection-status"]; @@ -137,28 +135,4 @@ running=true; dispatcher(new IsBusyCheckingDeviceListAction(false)); }); - - /* result.forEach((res: Promise, index)=>{ - console.log("value") - console.log(res); - console.log(res.value); - if(res.value!==null){ - list[index].status = res.value.node[0]["netconf-node-topology:connection-status"]; - }else{ - list[index].status = "Not connected"; - }*/ - - - - - - - //get devices - //wait on all to finish - //update array - - - - - } \ No newline at end of file diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx index 9846a22c0..1506df5ab 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx @@ -26,7 +26,7 @@ import TableRow from '@material-ui/core/TableRow'; import Paper from '@material-ui/core/Paper'; import { makeStyles, Button, Tooltip } from '@material-ui/core'; -type props = { headers: string[], height:number, navigate?(applicationName: string, path?: string):void, onLinkClick?(id: string): void, data: any[], hover: boolean, onClick?(id: string): void, actions?:boolean }; +type props = { headers: string[], height:number, navigate?(applicationName: string, path?: string):void, onLinkClick?(id: string): void, data: any[], hover: boolean, ariaLabel: string, onClick?(id: string): void, actions?:boolean }; const styles = makeStyles({ @@ -81,13 +81,13 @@ const DenseTable: React.FunctionComponent = (props) => { return ( - handleHover(e,row.name)} onClick={ e => handleClick(e, row.name)}> + handleHover(e,row.name)} onClick={ e => handleClick(e, row.name)}> { values.map((data:any) => { if(data!== undefined) - return {data} + return {data} else return null; }) @@ -95,12 +95,15 @@ const DenseTable: React.FunctionComponent = (props) => { { props.actions && -
+
+ + + - + - +
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/details.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/details.tsx index a2e51d30f..081276b5c 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/details.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/details.tsx @@ -50,10 +50,9 @@ const Details: React.FunctionComponent = (props) => { }, []); - // if url changed + // if url changed, load details data React.useEffect(() => { const detailsId = getDetailsIdFromUrl(); - console.log(detailsId) if (detailsId !== null && props.data?.name !== detailsId) { loadDetailsData(detailsId) } @@ -154,16 +153,17 @@ const Details: React.FunctionComponent = (props) => { }) } + const panelId = props.data!== null ? (isSite(props.data) ? 'site-details-panel' : 'link-details-panel' ): 'details-panel'; return (
- + { props.breadcrumbs.length > 0 && - - + + {props.breadcrumbs[0].id} - + {props.data?.name} @@ -171,7 +171,7 @@ const Details: React.FunctionComponent = (props) => { { props.data !== null ? createDetailPanel(props.data) - : {message} + : {message} } diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx index de1bf6b16..0c9f6034f 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx @@ -32,8 +32,7 @@ const LinkDetails: React.FunctionComponent = (props) => { const [height, setHeight] = React.useState(330); const handleResize = () =>{ - console.log("resize") - const el = document.getElementById('site-details-panel')?.getBoundingClientRect(); + const el = document.getElementById('link-details-panel')?.getBoundingClientRect(); const el2 = document.getElementById('site-tabs')?.getBoundingClientRect(); if(el && el2){ @@ -69,7 +68,7 @@ const LinkDetails: React.FunctionComponent = (props) => { const distance = props.link.length > 0 ? props.link.length : props.link.calculatedLength; const azimuthA = props.link.azimuthA; const azimuthB = props.link.azimuthB; - window.open(`/#/linkCalculation?lat1=${siteA.lat}&lon1=${siteA.lon}&lat2=${siteB.lat}&lon2=${siteB.lon}&siteA=${nameA}&siteB=${nameB}&azimuthA=${azimuthA}&azimuthB=${azimuthB}&distance=${distance}`) + window.open(`/#/linkCalculation?lat1=${siteA.lat}&lon1=${siteA.lon}&lat2=${siteB.lat}&lon2=${siteB.lon}&siteA=${nameA}&siteB=${nameB}&azimuthA=${azimuthA}&azimuthB=${azimuthB}&distance=${distance}&amslSiteA=${siteA.amsl}&AGLsiteA=${siteA.antennaHeight}&amslSiteB=${siteB.amsl}&AGLsiteB=${siteB.antennaHeight}`) } @@ -83,15 +82,15 @@ const LinkDetails: React.FunctionComponent = (props) => { return (

{props.link.name}

- - - - + + + + - SITE DETAILS + SITE DETAILS - + { props.link.type==="microwave" && } diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx index a95666e38..92643d0c4 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx @@ -81,28 +81,28 @@ const SiteDetails: React.FunctionComponent = (props) => {

{props.site.name}

{ props.site.operator !== '' && props.site.operator !== null ? - : - + : + } { props.site.type !== undefined && props.site.type.length > 0 && - + } { props.site.address !== undefined && props.site.address.length > 0 && - + } { props.site.heighAGLInMeters !== undefined && props.site.heighAGLInMeters > 0 && - + } { props.site.antennaHeightAGLInMeters !== undefined && props.site.antennaHeightAGLInMeters > 0 && - + } - - + + @@ -115,12 +115,12 @@ const SiteDetails: React.FunctionComponent = (props) => { <> { props.site.links.length === 0 && - No links available. + No links available. } { props.site.links.length > 0 && - + /** * * */ @@ -136,12 +136,12 @@ const SiteDetails: React.FunctionComponent = (props) => { <> { props.site.devices.length === 0 && - No nodes available. + No nodes available. } { props.site.devices.length>0 && props.updatedDevices !== null && - + } } diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/iconSwitch.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/iconSwitch.tsx new file mode 100644 index 000000000..8df1385d0 --- /dev/null +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/iconSwitch.tsx @@ -0,0 +1,53 @@ +/** + * ============LICENSE_START======================================================================== + * ONAP : ccsdk feature sdnr wt odlux + * ================================================================================================= + * Copyright (C) 2020 highstreet technologies GmbH Intellectual Property. All rights reserved. + * ================================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under the License + * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing permissions and limitations under + * the License. + * ============LICENSE_END========================================================================== + */ + +import * as React from 'react'; +import { FormControlLabel, Switch, Paper } from "@material-ui/core"; +import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect'; +import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; +import { SetIconSwitchAction } from '../actions/mapActions'; + +type props = Connect & {visible: boolean} + +const IconSwitch: React.FunctionComponent = (props) =>{ + + const toggleChecked = () => { + props.toogle(!props.areIconsEnabled) + }; + + return ( + props.visible ? + } + label="Show icons" + labelPlacement="end" + />: null) +} + +const mapStateToProps = (state: IApplicationStoreState) => ({ + areIconsEnabled: state.network.map.allowIconSwitch +}); + + +const mapDispatchToProps = (dispatcher: IDispatcher) => ({ + toogle : (enable:boolean) => dispatcher.dispatch(new SetIconSwitchAction(enable)) + +});; + +export default (connect(mapStateToProps,mapDispatchToProps)(IconSwitch)) diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx index 363178e9b..ceb51d41a 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx @@ -30,24 +30,18 @@ import { SetPopupPositionAction, SelectMultipleLinksAction, SelectMultipleSitesA import { Feature } from '../model/Feature'; import { HighlightLinkAction, HighlightSiteAction, SetCoordinatesAction, SetStatistics } from '../actions/mapActions'; import { addDistance, getUniqueFeatures } from '../utils/mapUtils'; -import { location } from '../handlers/mapReducer' -import { Typography, Paper, Tooltip } from '@material-ui/core'; -import { elementCount } from '../model/count'; -import lamp from '../../icons/lamp.png'; -import apartment from '../../icons/apartment.png'; -import datacenter from '../../icons/datacenter.png'; import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect'; import SearchBar from './searchBar'; import { verifyResponse, IsTileServerReachableAction, handleConnectionError } from '../actions/connectivityAction'; import ConnectionInfo from './connectionInfo' -import { ApplicationStore } from '../../../../framework/src/store/applicationStore'; -import { showIconLayers, addBaseLayers, swapLayersBack } from '../utils/mapLayers'; -import Statistics from './statistics' - - - - +import { showIconLayers, addBaseLayers } from '../utils/mapLayers'; +import lamp from '../../icons/lamp.png'; +import apartment from '../../icons/apartment.png'; +import datacenter from '../../icons/datacenter.png'; +import factory from '../../icons/factory.png'; +import Statistics from './statistics'; +import IconSwitch from './iconSwitch'; type coordinates = { lat: number, lon: number, zoom: number } @@ -71,8 +65,11 @@ class Map extends React.Component { componentDidMount() { + // resize the map, if menu gets collapsed window.addEventListener("menu-resized", this.handleResize); + // try if connection to tile + topologyserver is available + fetch(URL_TILE_API + '/10/0/0.png') .then(res => { if (res.ok) { @@ -138,6 +135,13 @@ class Map extends React.Component { map.addImage('house', image); }); + map.loadImage( + factory, + function (error: any, image: any) { + if (error) throw error; + map.addImage('factory', image); + }); + const boundingBox = map.getBounds(); @@ -145,7 +149,7 @@ class Map extends React.Component { .then(result => verifyResponse(result)) .then(result => result.json()) .then(features => { - if (map.getLayer('lines')) { + if (map.getLayer('fibre-lines')) { (map.getSource('lines') as mapboxgl.GeoJSONSource).setData(features); } }) @@ -160,8 +164,7 @@ class Map extends React.Component { (map.getSource('points') as mapboxgl.GeoJSONSource).setData(features); } }) - .catch(error => this.props.handleConnectionError(error));; - + .catch(error => this.props.handleConnectionError(error)); }); map.on('click', (e: any) => { @@ -170,7 +173,7 @@ class Map extends React.Component { var clickedLines = getUniqueFeatures(map.queryRenderedFeatures([[e.point.x - 5, e.point.y - 5], [e.point.x + 5, e.point.y + 5]], { - layers: ['lines'] + layers: ['microwave-lines', 'fibre-lines'] }), "id"); const clickedPoints = getUniqueFeatures(map.queryRenderedFeatures(e.point, { layers: ['points'] }), "id"); @@ -182,14 +185,12 @@ class Map extends React.Component { if (alarmedSites.length > 0) { alarmedSites.forEach(alarm => { const index = clickedPoints.findIndex(item => item.properties!.id === alarm.properties!.id); - console.log(index); if (index !== -1) { clickedPoints[index].properties!.alarmed = true; clickedPoints[index].properties!.type = "alarmed"; } }); - console.log(clickedPoints); } this.showSitePopup(clickedPoints, e.point.x, e.point.y); @@ -203,12 +204,13 @@ class Map extends React.Component { const clickedLamps = getUniqueFeatures(map.queryRenderedFeatures(e.point, { layers: ['point-lamps'] }), "id"); const buildings = getUniqueFeatures(map.queryRenderedFeatures(e.point, { layers: ['point-building'] }), "id"); const houses = getUniqueFeatures(map.queryRenderedFeatures(e.point, { layers: ['point-data-center'] }), "id"); + const factories = getUniqueFeatures(map.queryRenderedFeatures(e.point, { layers: ['point-factory'] }), "id"); - const combinedFeatures = [...clickedLamps, ...buildings, ...houses]; + const combinedFeatures = [...clickedLamps, ...buildings, ...houses, ...factories]; const clickedLines = getUniqueFeatures(map.queryRenderedFeatures([[e.point.x - 5, e.point.y - 5], [e.point.x + 5, e.point.y + 5]], { - layers: ['lines'] + layers: ['microwave-lines', 'fibre-lines'] }), "id"); if (combinedFeatures.length > 0) @@ -231,6 +233,8 @@ class Map extends React.Component { this.props.updateMapPosition(lat, lon, mapZoom) } + // update the url to current lat,lon,zoom values + const currentUrl = window.location.href; const parts = currentUrl.split(URL_BASEPATH); const detailsPath = parts[1].split("/details/"); @@ -241,16 +245,17 @@ class Map extends React.Component { else { this.props.history.replace(`/${URL_BASEPATH}/${map.getCenter().lat.toFixed(4)},${map.getCenter().lng.toFixed(4)},${mapZoom.toFixed(2)}`) } + + //switch icon layers if applicable + showIconLayers(map, this.props.showIcons, this.props.selectedSite?.properties.id); + //update statistics const boundingBox = map.getBounds(); - showIconLayers(map, this.props.showIcons, this.props.selectedSite?.properties.id); - fetch(`${URL_API}/info/count/${boundingBox.getWest()},${boundingBox.getSouth()},${boundingBox.getEast()},${boundingBox.getNorth()}`) .then(result => verifyResponse(result)) .then(res => res.json()) .then(result => { - console.log(result); if (result.links !== this.props.linkCount || result.sites !== this.props.siteCount) { this.props.setStatistics(result.links, result.sites); } @@ -277,9 +282,12 @@ class Map extends React.Component { map.setLayoutProperty('selectedPoints', 'visibility', 'none'); if (mapZoom <= 4) { - map.setPaintProperty('lines', 'line-width', 1); + map.setPaintProperty('fibre-lines', 'line-width', 1); + map.setPaintProperty('microwave-lines', 'line-width', 1); + } else { - map.setPaintProperty('lines', 'line-width', 2); + map.setPaintProperty('fibre-lines', 'line-width', 2); + map.setPaintProperty('microwave-lines', 'line-width', 2); } } }); @@ -301,7 +309,8 @@ class Map extends React.Component { map.setFilter('point-lamps', ['==', 'type', 'street lamp']); map.setFilter('point-data-center', ['==', 'type', 'data center']); - map.setFilter('point-building', ['==', 'type', 'high rise building']) + map.setFilter('point-building', ['==', 'type', 'high rise building']); + map.setFilter('point-factory', ['==', 'type', 'factory']) if (this.props.selectedSite?.properties.type !== undefined) { switch (this.props.selectedSite?.properties.type) { @@ -313,7 +322,9 @@ class Map extends React.Component { break; case 'high rise building': map.setFilter('point-building', ["all", ['==', 'type', 'high rise building'], ['!=', 'id', this.props.selectedSite.properties.id]]) - + break; + case 'factory': + map.setFilter('point-factory', ["all", ['==', 'type', 'factory'], ['!=', 'id', this.props.selectedSite.properties.id]]); break; } } @@ -336,6 +347,7 @@ class Map extends React.Component { map.setFilter('point-lamps', ['==', 'type', 'street lamp']); map.setFilter('point-data-center', ['==', 'type', 'data center']); map.setFilter('point-building', ['==', 'type', 'high rise building']); + map.setFilter('point-factory', ['==', 'type', 'factory']); } if (map.getSource("selectedLine") !== undefined) { @@ -367,7 +379,6 @@ class Map extends React.Component { if (prevProps.showIcons !== this.props.showIcons) { if (map && map.getZoom() > 11) { - console.log(this.props.showIcons); showIconLayers(map, this.props.showIcons, this.props.selectedSite?.properties.id); } } @@ -388,6 +399,10 @@ class Map extends React.Component { } } + componentWillUnmount(){ + window.removeEventListener("menu-resized", this.handleResize); + } + handleResize = () => { if (map) { // wait a moment until resizing actually happened @@ -432,10 +447,6 @@ class Map extends React.Component { } } - - //TODO: how to handle if too much data gets loaded? (1 mio points...?) - // data might have gotten collected, reload if necessary! - //always save count, if count and current view count differ -> reload last boundingbox loadNetworkData = async (bbox: mapboxgl.LngLatBounds) => { if (!isLoadingInProgress) { // only load data if loading not in progress isLoadingInProgress = true; @@ -458,7 +469,6 @@ class Map extends React.Component { await this.draw('lines', `${URL_API}/links/geoJson/${increasedBoundingBox.west},${increasedBoundingBox.south},${increasedBoundingBox.east},${increasedBoundingBox.north}`); await this.draw('points', `${URL_API}/sites/geoJson/${increasedBoundingBox.west},${increasedBoundingBox.south},${increasedBoundingBox.east},${increasedBoundingBox.north}`); - console.log("bbox is bigger"); } else if (lastBoundingBox.contains(bbox.getNorthEast()) && lastBoundingBox.contains(bbox.getSouthWest())) { // last one contains new one // bbox is contained in last one, do nothing @@ -506,17 +516,13 @@ class Map extends React.Component { }) .catch(error => this.props.handleConnectionError(error));; } - } - - showLinkPopup = (links: mapboxgl.MapboxGeoJSONFeature[], top: number, left: number) => { if (links.length > 1) { const ids = links.map(feature => feature.properties!.id as string); - this.props.setPopupPosition(top, left); this.props.selectMultipleLinks(ids); this.setState({ isPopupOpen: true }); @@ -562,6 +568,7 @@ class Map extends React.Component { } + 11} />
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/searchBar.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/searchBar.tsx index 0c7607bb7..c825e5ae0 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/searchBar.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/searchBar.tsx @@ -79,11 +79,13 @@ const SearchBar: React.FunctionComponent = (props) =>{ const linkResult = fetch(`${URL_API}/link/${props.searchterm}`); Promise.all([ siteResult, linkResult]).then((result)=>{ - const suceededResults = result.filter(el=> el!==undefined); + const suceededResults = result.filter(el=> el.ok); if(suceededResults.length==0){ setAnchorEl(divRef.current); setErrorMessage("No element found.") + // hide message after 3 sec + window.setTimeout(()=>{setAnchorEl(null)}, 3000); }else{ suceededResults[0].json().then(result =>{ @@ -115,7 +117,7 @@ const SearchBar: React.FunctionComponent = (props) =>{ disabled={!reachabe} className={classes.input} placeholder="Find sites or links by name" - inputProps={{ 'aria-label': 'search sites or links' }} + inputProps={{ 'aria-label': 'networkmap-searchbar' }} value={props.searchterm} onChange={e=> props.setSearchTerm(e.currentTarget.value)} /> diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/config.ts b/sdnr/wt/odlux/apps/networkMapApp/src/config.ts index bdfcd2407..e2e5718d5 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/config.ts +++ b/sdnr/wt/odlux/apps/networkMapApp/src/config.ts @@ -27,11 +27,10 @@ export const OSM_STYLE = { 'type': 'raster', 'tiles': [ URL_TILE_API+'/{z}/{x}/{y}.png' - ], 'tileSize': 256, 'attribution': - 'Data by OpenStreetMap, under CC BY SA' + '© OpenStreetMap contributors' } }, 'layers': [ @@ -40,7 +39,7 @@ export const OSM_STYLE = { 'type': 'raster', 'source': 'raster-tiles', 'minzoom': 0, - 'maxzoom': 22 + 'maxzoom': 18 } ] }; diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/handlers/mapReducer.ts b/sdnr/wt/odlux/apps/networkMapApp/src/handlers/mapReducer.ts index a140e9b77..6f6277347 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/handlers/mapReducer.ts +++ b/sdnr/wt/odlux/apps/networkMapApp/src/handlers/mapReducer.ts @@ -50,7 +50,7 @@ export const MapReducer: IActionHandler = (state=initialState, action: if(action instanceof HighlightLinkAction){ - state = Object.assign({}, state, {selectedSite: null, selectedLink:{type: "Feature", geometry:{type:"LineString", coordinates:[[action.link.locationA.lon,action.link.locationA.lat ],[action.link.locationB.lon,action.link.locationB.lat ]]}}}) + state = Object.assign({}, state, {selectedSite: null, selectedLink:{type: "Feature", properties:{id:action.link.id, type: action.link.type}, geometry:{type:"LineString", coordinates:[[action.link.locationA.lon,action.link.locationA.lat ],[action.link.locationB.lon,action.link.locationB.lat ]]}}}) } diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/index.html b/sdnr/wt/odlux/apps/networkMapApp/src/index.html index f68e8c13b..9a7f77a29 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/index.html +++ b/sdnr/wt/odlux/apps/networkMapApp/src/index.html @@ -17,10 +17,11 @@