Update ODLUX

Add various updates and bugfixes to NetworkMap, Configuration, LinkCalculation and ConnectApp

Issue-ID: CCSDK-3414
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: I6ea5c3a9d6ccbe9c450da43220654a53fd2f262b
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>

5 files changed, 117 insertions, 96 deletions

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<typeof mapStateToProps, typeof mapDispatchToProps>;
 
 const ConnectionInfo: React.FunctionComponent<props> = (props) => {
 
-    return ((props.isTopoServerReachable === false || props.isTileServerReachable === false )?  <Paper style={{padding:5, position: 'absolute', top: 160, width: 230, left:"40%"}}>
+    return ((props.isTopoServerReachable === false || props.isTileServerReachable === false )?  <Paper style={{padding:5, position: 'absolute', top: 160, width: 230, left:"40%", zIndex:1}}>
         <div style={{display: 'flex', flexDirection: 'column'}}>
         <div style={{'alignSelf': 'center', marginBottom:5}}> <Typography> <FontAwesomeIcon icon={faExclamationTriangle} /> Connection Error</Typography></div>
         {props.isTileServerReachable === false && <Typography> Tile data can't be loaded.</Typography>}
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> = (props) =>{
 
     return (
       props.visible ?
-             <FormControlLabel style={{ padding:5, position: 'absolute',top: 190}}
+             <FormControlLabel style={{ padding:5, position: 'absolute',top: 190, zIndex:1}}
         value="end"
-        control={<Switch color="secondary" checked={props.areIconsEnabled} onChange={toggleChecked} />}
+        control={<Switch color="secondary" style={{zIndex:1}} checked={props.areIconsEnabled} onChange={toggleChecked} />}
         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<HTMLDivElement>();
 
+import 'mapbox-gl/dist/mapbox-gl.css';
 
 class Map extends React.Component<mapProps, { isPopupOpen: boolean }> {
 
@@ -158,7 +159,7 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> {
             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<mapProps, { isPopupOpen: boolean }> {
                     }
                 })
                 .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<mapProps, { isPopupOpen: boolean }> {
 
             //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<mapProps, { isPopupOpen: boolean }> {
                 }
             }
         }
+        }
     }
 
     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<mapProps, { isPopupOpen: boolean }> {
                 <ConnectionInfo />
                 <Button 
                 disabled={!this.props.isTopoServerReachable}
-                style={{'position': 'absolute', 'right':5, top:5, backgroundColor:'white'}}
+                style={{'position': 'absolute', 'right':5, top:5, backgroundColor:'white', zIndex:1}}
                 onClick={e => this.props.navigateToApplication("network", "customize")} >
                     <img src={customize} />
                 </Button>
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: props) =>{
     const reachabe = props.isTopoServerReachable && props.isTileServerReachable;
 
 
-    return (<Paper style={{ padding: 5, position: 'absolute', display: 'flex', flexDirection: "column", top: 70, width: 200, marginLeft: 5 }}>
+    return (<Paper style={{ padding: 5, position: 'absolute', display: 'flex', flexDirection: "column", top: 70, width: 200, marginLeft: 5, zIndex:1 }}>
     <div style={{ display: 'flex', flexDirection: "row" }}>
         <Typography style={{ fontWeight: "bold", flex: "1", color: reachabe ? "black" : "lightgrey" }} >Statistics</Typography>
         <Tooltip style={{ alignSelf: "flex-end" }} title="Gets updated when the map stops moving.">