Merge pull request #725 from PADAS/ERA-7681

[ERA-7681] - Map Drawing Tools
PADAS · Aug 16, 2022 · 7b9d9a2 · 7b9d9a2
2 parents 448b0ee + f5e1ff1
commit 7b9d9a2
Show file tree

Hide file tree

Showing 47 changed files with 4,153 additions and 3,543 deletions.
diff --git a/.env.development b/.env.development
@@ -1,3 +1,3 @@
 REACT_APP_DAS_HOST=https://develop.pamdas.org
 REACT_APP_GA_TRACKING_ID=UA-12413928-16
-REACT_APP_MOCK_EVENTS_API=true
+REACT_APP_MOCK_EVENTS_API=false
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
     "humanize-duration": "^3.27.1",
     "localforage": "^1.7.3",
     "lodash-es": "^4.17.11",
-    "mapbox-gl": "^2.4.1",
+    "mapbox-gl": "^2.9.2",
     "mb-isochrone": "^0.1.0",
     "pluralize": "^8.0.0",
     "prop-types": "^15.7.2",
@@ -72,6 +72,7 @@
     "@testing-library/dom": "^8.1.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.0.16",
     "eslint": "^8.10.0",
     "eslint-config-airbnb": "^18.0.1",
@@ -92,10 +93,10 @@
   "jest": {
     "coverageThreshold": {
       "global": {
-        "branches": 33.03,
-        "functions": 33.59,
-        "lines": 45.82,
-        "statements": 44.2
+        "branches": 40.11,
+        "functions": 41.13,
+        "lines": 52.88,
+        "statements": 51.31
       }
     },
     "coverageReporters": [
@@ -110,7 +111,7 @@
   ],
   "resolutions": {
     "eslint-loader": "3.0.2",
-    "mapbox-gl": "2.4.1",
+    "mapbox-gl": "2.9.2",
     "node-fetch": "2.6.7",
     "immer": "9.0.6"
   }

diff --git a/src/AnalyzersLayer/index.js b/src/AnalyzersLayer/index.js
@@ -1,9 +1,8 @@
-import React, { memo } from 'react';
-import { Source, Layer } from 'react-mapbox-gl';
-
+import React, { memo, useMemo } from 'react';
 import withMapViewConfig from '../WithMapViewConfig';
 
 import { LAYER_IDS, SOURCE_IDS } from '../constants';
+import { useMapEventBinding, useMapLayer, useMapSource } from '../hooks';
 
 const { ANALYZER_POLYS_WARNING, ANALYZER_POLYS_CRITICAL, ANALYZER_LINES_WARNING,
   ANALYZER_LINES_CRITICAL, SUBJECT_SYMBOLS } = LAYER_IDS;
@@ -63,68 +62,68 @@ const AnalyzerLayer = (
     onAnalyzerGroupExit(e, hoverStateIds);
   };
 
-  const warningLinesData = {
-    type: 'geojson',
-    data: warningLines,
-  };
-
-  const criticalLinesData = {
-    type: 'geojson',
-    data: criticalLines,
-  };
-
-  const warningPolysData = {
-    type: 'geojson',
-    data: warningPolys,
-  };
-
-  const criticalPolysData = {
-    type: 'geojson',
-    data: criticalPolys,
-  };
-
-  return <>
-    <Source id={ANALYZER_POLYS_WARNING_SOURCE} geoJsonSource={warningPolysData} />
-    <Source id={ANALYZER_POLYS_CRITICAL_SOURCE} geoJsonSource={criticalPolysData} />
-    <Source id={ANALYZER_LINES_CRITICAL_SOURCE} geoJsonSource={warningLinesData} />
-    <Source id={ANALYZER_LINES_WARNING_SOURCE} geoJsonSource={criticalLinesData} />
-
-    {/* due to a bug in mapboxgl, we need to treat polys as lines, to 
-     get a dotted border line to appear*/}
-
-    <Layer minZoom={minZoom} sourceId={ANALYZER_POLYS_WARNING_SOURCE} type='line'
-      id={ANALYZER_POLYS_WARNING}
-      paint={linePaint}
-      onMouseEnter={onAnalyzerFeatureEnter}
-      onMouseLeave={onAnalyzerFeatureExit}
-      onClick={onAnalyzerFeatureClick} />
-
-    {isSubjectSymbolsLayerReady && <>
-      <Layer minZoom={minZoom} sourceId={ANALYZER_POLYS_CRITICAL_SOURCE} type='line'
-        before={SUBJECT_SYMBOLS}
-        id={ANALYZER_POLYS_CRITICAL}
-        paint={criticalLinePaint} layout={lineLayout}
-        onMouseEnter={onAnalyzerFeatureEnter}
-        onMouseLeave={onAnalyzerFeatureExit}
-        onClick={onAnalyzerFeatureClick} />
-
-      <Layer minZoom={minZoom} sourceId={ANALYZER_LINES_CRITICAL_SOURCE} type='line'
-        before={SUBJECT_SYMBOLS}
-        id={ANALYZER_LINES_WARNING}
-        paint={linePaint} layout={lineLayout}
-        onMouseEnter={onAnalyzerFeatureEnter}
-        onMouseLeave={onAnalyzerFeatureExit}
-        onClick={onAnalyzerFeatureClick} />
-
-      <Layer minZoom={minZoom} sourceId={ANALYZER_LINES_WARNING_SOURCE} type='line'
-        before={SUBJECT_SYMBOLS}
-        id={ANALYZER_LINES_CRITICAL}
-        paint={criticalLinePaint} layout={lineLayout}
-        onMouseEnter={onAnalyzerFeatureEnter}
-        onMouseLeave={onAnalyzerFeatureExit}
-        onClick={onAnalyzerFeatureClick} />
-    </>}
-  </>;
+  const layerConfig = useMemo(() => ({
+    before: SUBJECT_SYMBOLS,
+    minZoom,
+    condition: !!isSubjectSymbolsLayerReady,
+  }), [isSubjectSymbolsLayerReady, minZoom]);
+
+  useMapSource(ANALYZER_POLYS_WARNING_SOURCE, warningPolys);
+  useMapLayer(
+    ANALYZER_POLYS_WARNING,
+    'line',
+    ANALYZER_POLYS_WARNING_SOURCE,
+    linePaint,
+    undefined,
+    layerConfig,
+  );
+
+  useMapSource(ANALYZER_POLYS_CRITICAL_SOURCE, criticalPolys);
+  useMapLayer(
+    ANALYZER_POLYS_CRITICAL,
+    'line',
+    ANALYZER_POLYS_CRITICAL_SOURCE,
+    criticalLinePaint, lineLayout,
+    layerConfig,
+  );
+
+  useMapSource(ANALYZER_LINES_WARNING_SOURCE, warningLines);
+  useMapLayer(
+    ANALYZER_LINES_WARNING,
+    'line',
+    ANALYZER_LINES_WARNING_SOURCE,
+    linePaint,
+    lineLayout,
+    layerConfig,
+  );
+
+  useMapSource(ANALYZER_LINES_CRITICAL_SOURCE, criticalLines);
+  useMapLayer(
+    ANALYZER_LINES_CRITICAL,
+    'line',
+    ANALYZER_LINES_CRITICAL_SOURCE,
+    criticalLinePaint,
+    lineLayout,
+    layerConfig,
+  );
+
+  // (eventType = 'click', handlerFn = noop, layerId = null, condition = true)
+  useMapEventBinding('mouseenter', onAnalyzerFeatureEnter, ANALYZER_POLYS_WARNING);
+  useMapEventBinding('mouseenter', onAnalyzerFeatureEnter, ANALYZER_POLYS_CRITICAL);
+  useMapEventBinding('mouseenter', onAnalyzerFeatureEnter, ANALYZER_LINES_WARNING);
+  useMapEventBinding('mouseenter', onAnalyzerFeatureEnter, ANALYZER_LINES_CRITICAL);
+
+  useMapEventBinding('mouseleave', onAnalyzerFeatureExit, ANALYZER_POLYS_WARNING);
+  useMapEventBinding('mouseleave', onAnalyzerFeatureExit, ANALYZER_POLYS_CRITICAL);
+  useMapEventBinding('mouseleave', onAnalyzerFeatureExit, ANALYZER_LINES_WARNING);
+  useMapEventBinding('mouseleave', onAnalyzerFeatureExit, ANALYZER_LINES_CRITICAL);
+
+  useMapEventBinding('click', onAnalyzerFeatureClick, ANALYZER_POLYS_WARNING);
+  useMapEventBinding('click', onAnalyzerFeatureClick, ANALYZER_POLYS_CRITICAL);
+  useMapEventBinding('click', onAnalyzerFeatureClick, ANALYZER_LINES_WARNING);
+  useMapEventBinding('click', onAnalyzerFeatureClick, ANALYZER_LINES_CRITICAL);
+
+  return null;
 };
 
 export default memo(withMapViewConfig(AnalyzerLayer));
diff --git a/src/BaseLayerRenderer/TileLayerRenderer.js b/src/BaseLayerRenderer/TileLayerRenderer.js
@@ -1,8 +1,8 @@
-import React, { memo, Fragment, useContext, useMemo, useEffect } from 'react';
-import { MapContext, Layer, Source } from 'react-mapbox-gl';
-
+import React, { memo, useContext, useMemo, useEffect } from 'react';
+import { MapContext } from '../App';
 
 import { TILE_LAYER_SOURCE_TYPES, LAYER_IDS, MAX_ZOOM, MIN_ZOOM } from '../constants';
+import { useMapLayer, useMapSource } from '../hooks';
 
 import { calcConfigForMapAndSourceFromLayer } from '../utils/layers';
 
@@ -14,13 +14,31 @@ const RASTER_SOURCE_OPTIONS = {
   'tileSize': 256,
 };
 
+const RenderFunction = ({ children }) => <>{children}</>;
+
+const SourceComponent = ({ id, tileUrl, sourceConfig }) => {
+  const config = useMemo(() => ({
+    ...RASTER_SOURCE_OPTIONS,
+    tiles: [
+      tileUrl,
+    ],
+    ...sourceConfig,
+  }), [sourceConfig, tileUrl]);
+
+  useMapSource(id, null, config);
+
+  return null;
+};
+
 const TileLayerRenderer = (props) => {
   const { layers, currentBaseLayer } = props;
 
-  const activeLayer = layers.find(({ id }) => id === currentBaseLayer.id);
-
   const map = useContext(MapContext);
 
+  const activeLayer = useMemo(() =>
+    layers.find(({ id }) => id === currentBaseLayer?.id)
+  , [currentBaseLayer?.id, layers]);
+
   const { mapConfig, sourceConfig } = useMemo(() =>
     calcConfigForMapAndSourceFromLayer(currentBaseLayer)
   , [currentBaseLayer]);
@@ -32,20 +50,22 @@ const TileLayerRenderer = (props) => {
     }
   }, [map, mapConfig]);
 
-  return <Fragment>
-    {layers
-      .filter(layer => TILE_LAYER_SOURCE_TYPES.includes(layer.attributes.type))
-      .map(layer => <Source key={layer.id} id={`layer-source-${layer.id}`} tileJsonSource={{
-        ...RASTER_SOURCE_OPTIONS,
-        tiles: [
-          layer.attributes.url,
-        ],
-        ...sourceConfig,
-      }} >
-      </Source>)}
-
-    {!!activeLayer && <Layer before={FEATURE_FILLS} id={`tile-layer-${activeLayer.id}`} key={activeLayer.id} sourceId={`layer-source-${activeLayer.id}`} type="raster" />}
-  </Fragment>;
+  useMapLayer(
+    `tile-layer-${activeLayer?.id}`,
+    'raster',
+    `layer-source-${activeLayer?.id}`,
+    undefined,
+    undefined,
+    { before: FEATURE_FILLS, condition: !!activeLayer }
+  );
+
+  return layers
+    .filter(layer => TILE_LAYER_SOURCE_TYPES.includes(layer.attributes.type))
+    .map(layer =>
+      <RenderFunction key={layer.id}>
+        <SourceComponent id={`layer-source-${layer.id}`} sourceConfig={sourceConfig} tileUrl={layer.attributes.url} />
+      </RenderFunction>
+    );
 };
 
 export default memo(TileLayerRenderer);