Migrate odlux

Migrate odlux to Aluminium

Issue-ID: CCSDK-3136
Signed-off-by: Ravi Pendurty <ravi.pendurty@highstreet-technologies.com>
Change-Id: I3200a809a31e87021c95fe103a9c95e03011f503
Signed-off-by: Ravi Pendurty <ravi.pendurty@highstreet-technologies.com>

10 files changed, 162 insertions, 129 deletions

diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/actions/connectivityAction.ts b/sdnr/wt/odlux/apps/networkMapApp/src/actions/connectivityAction.ts
index 889480dff..8fcdc4c3b 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/actions/connectivityAction.ts
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/actions/connectivityAction.ts
@@ -42,7 +42,7 @@ export const verifyResponse = (response: Response) =>{
     }
 }
 
-export const setTopologyReachableAction = (error: Error) => (dispatcher: Dispatch, getState: () => IApplicationStoreState)=>{
+export const handleConnectionError = (error: Error) => (dispatcher: Dispatch, getState: () => IApplicationStoreState)=>{
     const {network:{connectivity: {isToplogyServerAvailable}}} = getState();
     if(isToplogyServerAvailable){
        dispatcher(new IsTopologyServerReachableAction(false))
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx
index 72fe79ee3..7e378b81e 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx
@@ -26,85 +26,101 @@ 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, ariaLabel: string, 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, ariaLabelRow: string, ariaLabelColumn: string[], verticalTable?: boolean, onClick?(id: string): void, actions?: boolean };
 
 
 const styles = makeStyles({
     container: {
-        overflow:"auto"
+        overflow: "auto"
     },
     button: {
         margin: 0,
         padding: "6px 6px",
         minWidth: 'unset'
-      }
-    
-  });
-  
+    }
+
+});
+
 
 const DenseTable: React.FunctionComponent<props> = (props) => {
 
     const classes = styles();
 
-    const handleClick = (event: any, id: string) =>{
+    const handleClick = (event: any, id: string) => {
         event.preventDefault();
         props.onClick !== undefined && props.onClick(id);
 
     }
 
-    const handleHover = (event: any, id: string) =>{
+    const handleHover = (event: any, id: string) => {
         event.preventDefault();
 
     }
 
     return (
-        <Paper style={{borderRadius:"0px"}}>
-       <div style={{ height:props.height, overflow:"auto"}}>
-            <Table stickyHeader size="small" aria-label="a dense table" >
-                <TableHead>
-                    <TableRow>
-                        {
-                            props.headers.map((data) => {
-                                return <TableCell>{data}</TableCell>
-                            })
+        <Paper style={{ borderRadius: "0px" }}>
+            <div style={{ height: props.height, overflow: "auto" }}>
+                <Table stickyHeader size="small" aria-label="a dense table" >
+                    <TableHead>
+                        <TableRow>
+                            {
+                                props.headers.map((data) => {
+                                    return <TableCell>{data}</TableCell>
+                                })
+                            }
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {props.data.map((row, index) => {
+                            var values = Object.keys(row).map(function (e) { return row[e]; });
+                            return (
+                                <TableRow aria-label={props.ariaLabelRow} key={index} hover={props.hover} onMouseOver={e => handleHover(e, row.name)} onClick={e => handleClick(e, row.name)}>
+
+                                    {
+                                        values.map((data: any, i) => {
+                                            if (data !== undefined) {
+
+                                                if (!props.verticalTable) {
+                                                    const ariaLabel = props.ariaLabelColumn[i];
+                                                    if (ariaLabel.length > 0) {
+                                                        return <TableCell aria-label={ariaLabel}>{data}</TableCell>
+                                                    } else {
+                                                        return <TableCell>{data}</TableCell>
+                                                    }
+                                                }
+                                                else {
+                                                    // skip adding aria label to 'header' column
+                                                    if (i === 0) {
+                                                        return <TableCell>{data}</TableCell>
+                                                    } else {
+                                                        const ariaLabel = props.ariaLabelColumn[index];
+                                                        return <TableCell aria-label={ariaLabel}>{data}</TableCell>
+                                                    }
+                                                }
+                                            }
+                                            else
+                                                return null;
+                                        })
+                                    }
+                                    {
+
+                                        props.actions && <TableCell >
+                                            <div style={{ display: "flex" }}>
+                                                <Tooltip title="Configure">
+                                                    <Button className={classes.button} disabled={row.status !== "connected"} onClick={(e: any) => { e.preventDefault(); e.stopPropagation(); props.navigate && props.navigate("configuration", row.simulatorId ? row.simulatorId : row.name) }}>C</Button>
+                                                </Tooltip>
+                                                <Tooltip title="Fault">
+                                                    <Button className={classes.button} disabled={row.status !== "connected"} onClick={(e: any) => { e.preventDefault(); e.stopPropagation(); props.navigate && props.navigate("fault", row.simulatorId ? row.simulatorId : row.name) }}>F</Button>
+                                                </Tooltip>
+                                            </div>
+                                        </TableCell>
+                                    }
+                                </TableRow>)
+                        })
                         }
-                    </TableRow>
-                </TableHead>
-                <TableBody>
-                    {props.data.map((row, index) => {  
-                        var values = Object.keys(row).map(function(e) { return row[e] });
-                        return (
-                            <TableRow aria-label={props.ariaLabel} key={index} hover={props.hover} onMouseOver={e => handleHover(e,row.name)} onClick={ e =>  handleClick(e, row.name)}>
-
-                                {
-                                    values.map((data:any) => {
-                                       
-                                        if(data!== undefined)
-                                        return <TableCell>  {data} </TableCell>
-                                        else
-                                        return null;
-                                    })
-                                }
-                                {
-
-                                    props.actions && <TableCell >  
-<div style={{display:"flex"}}>
-    <Tooltip title="Configure">
-    <Button className={classes.button} disabled={row.status!=="connected"} onClick={(e: any) =>{ e.preventDefault(); e.stopPropagation(); props.navigate && props.navigate("configuration", row.name)}}>C</Button>
-    </Tooltip>
-    <Tooltip title="Fault">
-    <Button className={classes.button} disabled={row.status!=="connected"} onClick={(e: any) =>{ e.preventDefault(); e.stopPropagation(); props.navigate && props.navigate("fault", row.name)}}>F</Button>
-    </Tooltip>
-    </div> 
-    </TableCell>
-    
-                                }
-                            </TableRow>)
-                    })
-                    }
-
-                </TableBody>
-            </Table>
+
+                    </TableBody>
+                </Table>
             </div>
         </Paper>
     );
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 a8f73f35c..81f9bba90 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx
@@ -90,7 +90,7 @@ const LinkDetails: React.FunctionComponent<props> = (props) => {
         <AppBar position="static" id="site-tabs" style={{ marginTop: "20px", background: '#2E3B55' }}>
             <Typography aria-label="details-of-link-sites" style={{ margin:"5px"}}>SITE DETAILS</Typography>
         </AppBar>
-        <DenseTable ariaLabel="site-information-table-entry" height={height} hover={false} headers={["", "Site A", "Site B"]} data={data} />
+        <DenseTable ariaLabelRow="site-information-table-entry" ariaLabelColumn={["site-name", "latitude", "longitude", "azimuth"]} verticalTable height={height} hover={false} headers={["", "Site A", "Site B"]} data={data} />
         {
             props.link.type==="microwave" && <Button style={{marginTop:20}} fullWidth variant="contained" color="primary" onClick={onCalculateLinkClick}>Calculate link</Button>
         }
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 613166116..5e617be2d 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx
@@ -119,7 +119,7 @@ const SiteDetails: React.FunctionComponent<props> = (props) => {
                
                 {
                     props.site.links.length > 0 &&
-                    <DenseTable ariaLabel="available-links-table-entry" height={height} hover={true} headers={["Link Name", "Azimuth in °"]}  data={linkRows} onClick={props.onLinkClick}  ></DenseTable>
+                    <DenseTable ariaLabelRow="available-links-table" ariaLabelColumn={["link-name", "azimuth"]} height={height} hover={true} headers={["Link Name", "Azimuth in °"]}  data={linkRows} onClick={props.onLinkClick}  ></DenseTable>
                /**
                 * 
                 * */
@@ -140,7 +140,7 @@ const SiteDetails: React.FunctionComponent<props> = (props) => {
 
                 {
                     props.site.devices.length>0 && props.updatedDevices !== null &&
-                    <DenseTable ariaLabel="available-nodes-table-entry" navigate={props.navigate} height={height} hover={false} headers={["ID","Name","Type", "Manufacturer","Owner","Status", "Ports", "Actions"]} actions={true} data={props.updatedDevices!} />
+                    <DenseTable ariaLabelRow="available-nodes-table" ariaLabelColumn={["id","name","type", "manufacturer","owner","status", "ports", "actions"]} navigate={props.navigate} height={height} hover={false} headers={["ID","Name","Type", "Manufacturer","Owner","Status", "Ports", "Actions"]} actions={true} data={props.updatedDevices!} />
                 }
             </>
         }
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx
index b6e1d9cd6..e2935f6b7 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx
@@ -33,9 +33,13 @@ import { addDistance, getUniqueFeatures, increaseBoundingBox } from '../utils/ma
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
 import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect';
 import SearchBar from './searchBar';
-import { verifyResponse, setTopologyReachableAction, setTileServerReachableAction } from '../actions/connectivityAction';
+import { verifyResponse, IsTileServerReachableAction, handleConnectionError, setTileServerReachableAction } from '../actions/connectivityAction';
 import ConnectionInfo from './connectionInfo'
 import { showIconLayers, addBaseLayers, addBaseSources, addIconLayers } 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';
 import { addImages } from '../services/mapImagesService';
@@ -112,6 +116,9 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> {
         map.on('load', (ev) => {
 
             map.setMaxZoom(18);
+            const bbox = map.getBounds();
+            this.props.updateMapPosition(bbox.getCenter().lat, bbox.getCenter().lng, map.getZoom())
+
             addBaseSources(map, this.props.selectedSite, this.props.selectedLink);
                 
             addImages(map, (result: boolean)=>{
@@ -123,10 +130,9 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> {
                 }
             });
 
-            const boundingBox = map.getBounds();
-
+            const boundingBox = increaseBoundingBox(map);
 
-            fetch(`${URL_API}/links/geoJson/${boundingBox.getWest()},${boundingBox.getSouth()},${boundingBox.getEast()},${boundingBox.getNorth()}`)
+            fetch(`${URL_API}/links/geoJson/${boundingBox.west},${boundingBox.south},${boundingBox.east},${boundingBox.north}`)
                 .then(result => verifyResponse(result))
                 .then(result => result.json())
                 .then(features => {
@@ -137,7 +143,7 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> {
                 .catch(error => this.props.handleConnectionError(error));
 
 
-                fetch(`${URL_API}/sites/geoJson/${boundingBox.getWest()},${boundingBox.getSouth()},${boundingBox.getEast()},${boundingBox.getNorth()}`)
+            fetch(`${URL_API}/sites/geoJson/${boundingBox.west},${boundingBox.south},${boundingBox.east},${boundingBox.north}`)
                 .then(result => verifyResponse(result))
                 .then(result => result.json())
                 .then(features => {
@@ -380,6 +386,7 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> {
 
     componentWillUnmount(){
         window.removeEventListener("menu-resized", this.handleResize);
+        lastBoundingBox=null;
     }
 
     handleResize = () => {
@@ -582,7 +589,7 @@ const mapDispatchToProps = (dispatcher: IDispatcher) => ({
     updateMapPosition: (lat: number, lon: number, zoom: number) => dispatcher.dispatch(new SetCoordinatesAction(lat, lon, zoom)),
     setStatistics: (linkCount: string, siteCount: string) => dispatcher.dispatch(new SetStatistics(siteCount, linkCount)),
     setTileServerLoaded: (reachable: boolean) => dispatcher.dispatch(setTileServerReachableAction(reachable)),
-    handleConnectionError: (error: Error) => dispatcher.dispatch(setTopologyReachableAction(error))
+    handleConnectionError: (error: Error) => dispatcher.dispatch(handleConnectionError(error))
 })
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Map));
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/mapPopup.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/mapPopup.tsx
index cdc77b217..040024760 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/components/mapPopup.tsx
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/mapPopup.tsx
@@ -25,7 +25,7 @@ import { URL_API } from '../config';
 import { HighlightLinkAction, HighlightSiteAction } from '../actions/mapActions';
 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
 import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect';
-import { verifyResponse, setTopologyReachableAction } from '../actions/connectivityAction';
+import { verifyResponse, handleConnectionError } from '../actions/connectivityAction';
 
 
 
@@ -86,7 +86,7 @@ const mapDispatchToProps = (dispatcher: IDispatcher) => ({
     clearDetailsHistory:()=> dispatcher.dispatch(new ClearHistoryAction()),
     highlightLink: (link: link) => dispatcher.dispatch(new HighlightLinkAction(link)),
     highlightSite: (site: site) => dispatcher.dispatch(new HighlightSiteAction(site)),
-    handleConnectionError: (error:Error) => dispatcher.dispatch(setTopologyReachableAction(error)),
+    handleConnectionError: (error:Error) => dispatcher.dispatch(handleConnectionError(error)),
     clearDetails: () => dispatcher.dispatch(new ClearDetailsAction()),
 
 });
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/handlers/mapReducer.ts b/sdnr/wt/odlux/apps/networkMapApp/src/handlers/mapReducer.ts
index 6f6277347..5c1c6d285 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/handlers/mapReducer.ts
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/handlers/mapReducer.ts
@@ -39,8 +39,8 @@ const initialState: mapState ={
     selectedSite: null,
     zoomToElement: null,
     alarmlement: null,
-    lat: 52,
-    lon: 13,
+    lat: 52.5095,
+    lon: 13.3290,
     zoom: 10,
     statistics:{links:"Not counted yet.", sites: "Not counted yet."},
     allowIconSwitch: true
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/pluginTransport.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/pluginTransport.tsx
index 67c75cecf..3ce435f9b 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/pluginTransport.tsx
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/pluginTransport.tsx
@@ -71,15 +71,14 @@ subscribe<ObjectNotification & IFormatedMessage>(["ObjectCreationNotification",
  //store && store.dispatch(UpdateDetailsView(msg.nodeName))
 
 }));
-
+*/
 
 subscribe<FaultAlarmNotification & IFormatedMessage>("ProblemNotification", (fault => {
   const store = applicationApi && applicationApi.applicationStore;
   if (fault && store) {
-    // store.dispatch(findSiteToAlarm(fault.nodeName));
+     store.dispatch(findSiteToAlarm(fault.nodeName));
 
   
   }
 }));
 
-*/
\ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/services/mapImagesService.ts b/sdnr/wt/odlux/apps/networkMapApp/src/services/mapImagesService.ts
index c414b15c9..30714b82a 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/services/mapImagesService.ts
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/services/mapImagesService.ts
@@ -21,11 +21,23 @@ import apartment from '../../icons/apartment.png';
 import datacenter from '../../icons/datacenter.png';
 import factory from '../../icons/factory.png';
 import lamp from '../../icons/lamp.png';
+import datacenterred from '../../icons/datacenterred.png';
+import factoryred from '../../icons/factoryred.png';
+import lampred from '../../icons/lampred.png';
+
 
 type ImagesLoaded = (allImagesLoaded: boolean) => void;
 type MapImages = {name: string, url: string}
 
-export const Images : MapImages[]  = [{name: 'data-center', url: datacenter}, {name: 'house', url: apartment}, {name: 'factory', url: factory},{name: 'lamp', url: lamp}] ;
+export const Images : MapImages[]  = [
+    {name: 'data-center', url: datacenter}, 
+    {name: 'house', url: apartment}, 
+    {name: 'factory', url: factory},
+    {name: 'lamp', url: lamp},
+    {name: 'data-center-red', url: datacenterred}, 
+    {name: 'factory-red', url: factoryred},
+    {name: 'lamp-red', url: lampred},
+] ;
 
 export const addImages = (map: mapboxgl.Map, callback?: ImagesLoaded) =>{
 
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts b/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts
index b54212e5c..1d4aa89ad 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts
@@ -168,6 +168,57 @@ const createIconLayers =(map: mapboxgl.Map, selectedSiteId?: string) =>{
             }
         });
 
+        //select layers
+
+        map.addLayer({
+            'id': 'select-point-lamps',
+            'type': 'symbol',
+            'source': 'selectedPoints',
+            'layout': {
+                'icon-allow-overlap': true,
+                'icon-image': 'lamp',
+                'icon-size': 0.15
+    
+            },
+            'filter': ['==', 'type', 'street lamp'],
+        });
+    
+        map.addLayer({
+            'id': 'select-point-buildings',
+            'type': 'symbol',
+            'source': 'selectedPoints',
+            'filter': ['==', 'type', 'high rise building'],
+            'layout': {
+                'icon-allow-overlap': true,
+                'icon-image': 'house',
+                'icon-size': 0.15
+            }
+        });
+    
+        map.addLayer({
+            'id': 'select-point-data-center',
+            'type': 'symbol',
+            'source': 'selectedPoints',
+            'filter': ['==', 'type', 'data center'],
+            'layout': {
+                'icon-allow-overlap': true,
+                'icon-image': 'data-center',
+                'icon-size': 0.15
+            }
+        });
+    
+        map.addLayer({
+            'id': 'select-point-factory',
+            'type': 'symbol',
+            'source': 'selectedPoints',
+            'filter': ['==', 'type', 'factory'],
+            'layout': {
+                'icon-allow-overlap': true,
+                'icon-image': 'factory',
+                'icon-size': 0.3
+            }
+        });
+
         //alarm layers
 
         map.addLayer({
@@ -177,7 +228,7 @@ const createIconLayers =(map: mapboxgl.Map, selectedSiteId?: string) =>{
             'layout': {
                 'icon-allow-overlap': true,
                 'icon-image': 'lamp-red',
-                'icon-size': 0.1
+                'icon-size': 0.15
 
             },
             'filter': createFilter("street lamp"),
@@ -191,7 +242,7 @@ const createIconLayers =(map: mapboxgl.Map, selectedSiteId?: string) =>{
             'layout': {
                 'icon-allow-overlap': true,
                 'icon-image': 'house-red',
-                'icon-size': 0.1
+                'icon-size': 0.15
             }
         });
 
@@ -202,8 +253,8 @@ const createIconLayers =(map: mapboxgl.Map, selectedSiteId?: string) =>{
             'filter': createFilter("data center"),
             'layout': {
                 'icon-allow-overlap': true,
-                'icon-image': 'data-center_red',
-                'icon-size': 0.1
+                'icon-image': 'data-center-red',
+                'icon-size': 0.15
             } });
 
             map.addLayer({
@@ -214,12 +265,10 @@ const createIconLayers =(map: mapboxgl.Map, selectedSiteId?: string) =>{
                 'layout': {
                     'icon-allow-overlap': true,
                     'icon-image': 'factory-red',
-                    'icon-size': 0.2
+                    'icon-size': 0.3
                 }
             });
 
-
-
     map.addLayer({
         id: 'point-remaining',
         source: 'points',
@@ -232,56 +281,6 @@ const createIconLayers =(map: mapboxgl.Map, selectedSiteId?: string) =>{
             'circle-stroke-color': '#fff'
         }
     });
-
-    map.addLayer({
-        'id': 'select-point-lamps',
-        'type': 'symbol',
-        'source': 'selectedPoints',
-        'layout': {
-            'icon-allow-overlap': true,
-            'icon-image': 'lamp',
-            'icon-size': 0.15
-
-        },
-        'filter': ['==', 'type', 'street lamp'],
-    });
-
-    map.addLayer({
-        'id': 'select-point-buildings',
-        'type': 'symbol',
-        'source': 'selectedPoints',
-        'filter': ['==', 'type', 'high rise building'],
-        'layout': {
-            'icon-allow-overlap': true,
-            'icon-image': 'house',
-            'icon-size': 0.15
-        }
-    });
-
-    map.addLayer({
-        'id': 'select-point-data-center',
-        'type': 'symbol',
-        'source': 'selectedPoints',
-        'filter': ['==', 'type', 'data center'],
-        'layout': {
-            'icon-allow-overlap': true,
-            'icon-image': 'data-center',
-            'icon-size': 0.15
-        }
-    });
-
-
-    map.addLayer({
-        'id': 'select-point-factory',
-        'type': 'symbol',
-        'source': 'selectedPoints',
-        'filter': ['==', 'type', 'factory'],
-        'layout': {
-            'icon-allow-overlap': true,
-            'icon-image': 'factory',
-            'icon-size': 0.3
-        }
-    });
 }
 
  const addCommonLayers = (map: mapboxgl.Map) =>{