From 437f67407aece6f7aed8e989638b0d64075f0c0a Mon Sep 17 00:00:00 2001 From: Aijana Schumann Date: Wed, 4 Aug 2021 11:59:18 +0200 Subject: Update ODLUX Add various updates and bugfixes to NetworkMap, Configuration, LinkCalculation and ConnectApp Issue-ID: CCSDK-3414 Signed-off-by: Aijana Schumann Change-Id: I6ea5c3a9d6ccbe9c450da43220654a53fd2f262b Signed-off-by: Aijana Schumann --- .../src/components/map/connectionInfo.tsx | 2 +- .../src/components/map/iconSwitch.tsx | 4 +- .../apps/networkMapApp/src/components/map/map.tsx | 204 +++++++++++---------- .../networkMapApp/src/components/map/searchBar.tsx | 1 + .../src/components/map/statistics.tsx | 2 +- 5 files changed, 117 insertions(+), 96 deletions(-) (limited to 'sdnr/wt/odlux/apps/networkMapApp/src/components/map') diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/map/connectionInfo.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/map/connectionInfo.tsx index c1fdccfb8..3b5a15ce5 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/map/connectionInfo.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/map/connectionInfo.tsx @@ -29,7 +29,7 @@ type props = Connect; const ConnectionInfo: React.FunctionComponent = (props) => { - return ((props.isTopoServerReachable === false || props.isTileServerReachable === false )? + return ((props.isTopoServerReachable === false || props.isTileServerReachable === false )?
Connection Error
{props.isTileServerReachable === false && Tile data can't be loaded.} diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/map/iconSwitch.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/map/iconSwitch.tsx index bb98cb467..221e7dab8 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/map/iconSwitch.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/map/iconSwitch.tsx @@ -32,9 +32,9 @@ const IconSwitch: React.FunctionComponent = (props) =>{ return ( props.visible ? - } + control={} label="Show icons" labelPlacement="end" />: null) diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/map/map.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/map/map.tsx index 9637d745e..1314edbba 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/map/map.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/map/map.tsx @@ -54,6 +54,7 @@ let notLoadedBoundingBoxes: mapboxgl.LngLatBounds[] = []; let lastBoundingBox: mapboxgl.LngLatBounds | null = null; let myRef = React.createRef(); +import 'mapbox-gl/dist/mapbox-gl.css'; class Map extends React.Component { @@ -158,7 +159,7 @@ class Map extends React.Component { mapLayerService.addBaseSources(map, this.props.selectedSite, this.props.selectedLink); addImages(map, (result: boolean)=>{ - if(map.getZoom()>11) + if(map.getZoom()>11 && this.props.showIcons) { mapLayerService.addIconLayers(map, this.props.selectedSite?.properties.id) }else{ @@ -190,134 +191,142 @@ class Map extends React.Component { } }) .catch(error => this.props.handleConnectionError(error)); + + map.on('click', this.mapClick); + map.on('moveend', this.mapMoveEnd); + map.on('move', this.mapMove); + }); + } - map.on('click', (e: any) => { + mapMove = () => { + + const mapZoom = map.getZoom(); - if (map.getLayer('points')) { // data is shown as points + const boundingBox = map.getBounds(); + + this.loadNetworkData(boundingBox); + if (mapZoom > 9) { - var clickedLines = getUniqueFeatures(map.queryRenderedFeatures([[e.point.x - 5, e.point.y - 5], - [e.point.x + 5, e.point.y + 5]], { - layers: ['microwave-lines', 'fibre-lines'] - }), "id"); + if (map.getLayer('points')) { + map.setLayoutProperty('selectedPoints', 'visibility', 'visible'); + map.setPaintProperty('points', 'circle-radius', 7); + } + } else { - const clickedPoints = getUniqueFeatures(map.queryRenderedFeatures(e.point, { layers: ['points'] }), "id"); - const alarmedSites = getUniqueFeatures(map.queryRenderedFeatures(e.point, { layers: ['alarmedPoints'] }), "id"); + // reduce size of points / lines if zoomed out + map.setPaintProperty('points', 'circle-radius', 2); + map.setLayoutProperty('selectedPoints', 'visibility', 'none'); - if (clickedPoints.length != 0) { + if (mapZoom <= 4) { + map.setPaintProperty('fibre-lines', 'line-width', 1); + map.setPaintProperty('microwave-lines', 'line-width', 1); + + } else { + map.setPaintProperty('fibre-lines', 'line-width', 2); + map.setPaintProperty('microwave-lines', 'line-width', 2); + } + } + }; + mapClick = (e: any) => { - if (alarmedSites.length > 0) { - alarmedSites.forEach(alarm => { - const index = clickedPoints.findIndex(item => item.properties!.id === alarm.properties!.id); + + if (map.getLayer('points')) { // data is shown as points - if (index !== -1) { - clickedPoints[index].properties!.alarmed = true; - clickedPoints[index].properties!.type = "alarmed"; - } - }); - } + var clickedLines = getUniqueFeatures(map.queryRenderedFeatures([[e.point.x - 5, e.point.y - 5], + [e.point.x + 5, e.point.y + 5]], { + layers: ['microwave-lines', 'fibre-lines'] + }), "id"); - this.showSitePopup(clickedPoints, e.point.x, e.point.y); - } else if (clickedLines.length != 0) { - this.showLinkPopup(clickedLines, e.point.x, e.point.y); - } + const clickedPoints = getUniqueFeatures(map.queryRenderedFeatures(e.point, { layers: ['points'] }), "id"); + const alarmedSites = getUniqueFeatures(map.queryRenderedFeatures(e.point, { layers: ['alarmedPoints'] }), "id"); + if (clickedPoints.length != 0) { - } else { // data is shown as icons - const clickedSites = getUniqueFeatures(map.queryRenderedFeatures(e.point, { layers: ['point-lamps', 'point-building', 'point-data-center', 'point-factory', 'point-remaining'] }), "id"); - const clickedLines = getUniqueFeatures(map.queryRenderedFeatures([[e.point.x - 5, e.point.y - 5], - [e.point.x + 5, e.point.y + 5]], { - layers: ['microwave-lines', 'fibre-lines'] - }), "id"); + if (alarmedSites.length > 0) { + alarmedSites.forEach(alarm => { + const index = clickedPoints.findIndex(item => item.properties!.id === alarm.properties!.id); - if (clickedSites.length > 0) - this.showSitePopup(clickedSites, e.point.x, e.point.y); - else if (clickedLines.length != 0) { - this.showLinkPopup(clickedLines, e.point.x, e.point.y); + if (index !== -1) { + clickedPoints[index].properties!.alarmed = true; + clickedPoints[index].properties!.type = "alarmed"; + } + }); } - } - }); + this.showSitePopup(clickedPoints, e.point.x, e.point.y); + } else if (clickedLines.length != 0) { + this.showLinkPopup(clickedLines, e.point.x, e.point.y); + } - map.on('moveend', () => { - const mapZoom = Number(map.getZoom().toFixed(2)); - const lat = Number(map.getCenter().lat.toFixed(4)); - const lon = Number(map.getCenter().lng.toFixed(4)); + } else { // data is shown as icons + const clickedSites = getUniqueFeatures(map.queryRenderedFeatures(e.point, { layers: ['point-lamps', 'point-building', 'point-data-center', 'point-factory', 'point-remaining'] }), "id"); + const clickedLines = getUniqueFeatures(map.queryRenderedFeatures([[e.point.x - 5, e.point.y - 5], + [e.point.x + 5, e.point.y + 5]], { + layers: ['microwave-lines', 'fibre-lines'] + }), "id"); - if (this.props.lat !== lat || this.props.lon !== lon || this.props.zoom !== mapZoom) { - this.props.updateMapPosition(lat, lon, mapZoom) + if (clickedSites.length > 0) + this.showSitePopup(clickedSites, e.point.x, e.point.y); + else if (clickedLines.length != 0) { + this.showLinkPopup(clickedLines, e.point.x, e.point.y); } + } + }; - // update the url to current lat,lon,zoom values + mapMoveEnd = () => { - const currentUrl = window.location.href; - const parts = currentUrl.split(URL_BASEPATH); - if(parts.length>0){ + const mapZoom = Number(map.getZoom().toFixed(2)); + const lat = Number(map.getCenter().lat.toFixed(4)); + const lon = Number(map.getCenter().lng.toFixed(4)); - const detailsPath = parts[1].split("/details/"); - if (detailsPath[1] !== undefined && detailsPath[1].length > 0) { - this.props.history.replace(`/${URL_BASEPATH}/${map.getCenter().lat.toFixed(4)},${map.getCenter().lng.toFixed(4)},${mapZoom.toFixed(2)}/details/${detailsPath[1]}`) - } - 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 - mapLayerService.showIconLayers(map, this.props.showIcons, this.props.selectedSite?.properties.id); + if (this.props.lat !== lat || this.props.lon !== lon || this.props.zoom !== mapZoom) { + this.props.updateMapPosition(lat, lon, mapZoom) + } - //update statistics - const boundingBox = map.getBounds(); + // update the url to current lat,lon,zoom values - fetch(`${URL_API}/info/count/${boundingBox.getWest()},${boundingBox.getSouth()},${boundingBox.getEast()},${boundingBox.getNorth()}`) - .then(result => verifyResponse(result)) - .then(res => res.json()) - .then(result => { - if (result.links !== this.props.linkCount || result.sites !== this.props.siteCount) { - this.props.setStatistics(result.links, result.sites); - } - }) - .catch(error => this.props.handleConnectionError(error));; - }) + const currentUrl = window.location.href; + const parts = currentUrl.split(URL_BASEPATH); + if (parts.length > 0) { - map.on('move', () => { - const mapZoom = map.getZoom(); + const detailsPath = parts[1].split("/details/"); - const boundingBox = map.getBounds(); + if (detailsPath[1] !== undefined && detailsPath[1].length > 0) { + this.props.history.replace(`/${URL_BASEPATH}/${map.getCenter().lat.toFixed(4)},${map.getCenter().lng.toFixed(4)},${mapZoom.toFixed(2)}/details/${detailsPath[1]}`) + } + else { + this.props.history.replace(`/${URL_BASEPATH}/${map.getCenter().lat.toFixed(4)},${map.getCenter().lng.toFixed(4)},${mapZoom.toFixed(2)}`) + } + } - this.loadNetworkData(boundingBox); - if (mapZoom > 9) { - if (map.getLayer('points')) { - map.setLayoutProperty('selectedPoints', 'visibility', 'visible'); - map.setPaintProperty('points', 'circle-radius', 7); - } - } else { + //switch icon layers if applicable - // reduce size of points / lines if zoomed out - map.setPaintProperty('points', 'circle-radius', 2); - map.setLayoutProperty('selectedPoints', 'visibility', 'none'); + mapLayerService.showIconLayers(map, this.props.showIcons, this.props.selectedSite?.properties.id); - if (mapZoom <= 4) { - map.setPaintProperty('fibre-lines', 'line-width', 1); - map.setPaintProperty('microwave-lines', 'line-width', 1); + //update statistics + const boundingBox = map.getBounds(); - } else { - map.setPaintProperty('fibre-lines', 'line-width', 2); - map.setPaintProperty('microwave-lines', 'line-width', 2); + fetch(`${URL_API}/info/count/${boundingBox.getWest()},${boundingBox.getSouth()},${boundingBox.getEast()},${boundingBox.getNorth()}`) + .then(result => verifyResponse(result)) + .then(res => res.json()) + .then(result => { + if (result.links !== this.props.linkCount || result.sites !== this.props.siteCount) { + this.props.setStatistics(result.links, result.sites); } - } - }); + }) + .catch(error => this.props.handleConnectionError(error));; } componentDidUpdate(prevProps: mapProps, prevState: {}) { + if(prevProps !== this.props){ //(load map) //triggered if either settings were done loading or tile/topology server connectivity checked if(prevProps.settings !== this.props.settings || this.props.isConnectivityCheckBusy !== prevProps.isConnectivityCheckBusy){ @@ -329,6 +338,7 @@ class Map extends React.Component { //if everything done loading/reachable, load map if(!this.props.isConnectivityCheckBusy && this.props.isTileServerReachable && !this.props.settings.isLoadingData && (prevProps.settings.isLoadingData !==this.props.settings.isLoadingData || prevProps.isConnectivityCheckBusy !== this.props.isConnectivityCheckBusy)){ + if(map == undefined){ this.setupMap(); } @@ -443,12 +453,22 @@ class Map extends React.Component { } } } + } } componentWillUnmount(){ + + //unregister events window.removeEventListener("menu-resized", this.handleResize); - lastBoundingBox=null; + + if(map){ + map.off('click', this.mapClick); + map.off('moveend', this.mapMoveEnd); + map.off('move', this.mapMove); + } + lastBoundingBox=null; + // will be checked again on next load this.props.setConnectivityCheck(true); } @@ -624,7 +644,7 @@ class Map extends React.Component { diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/map/searchBar.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/map/searchBar.tsx index 45bc6092d..307c5d203 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/map/searchBar.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/map/searchBar.tsx @@ -46,6 +46,7 @@ const styles = makeStyles({ top: 15, marginLeft: 5, width: 400, + zIndex:1 }, input: { flex: 1, diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/map/statistics.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/map/statistics.tsx index 116b789d7..562689198 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/map/statistics.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/map/statistics.tsx @@ -41,7 +41,7 @@ const Statistics: React.FunctionComponent = (props: props) =>{ const reachabe = props.isTopoServerReachable && props.isTileServerReachable; - return ( + return (
Statistics -- cgit 1.2.3-korg