Merge pull request #1394 from PADAS/ERA-12142

[ERA-12142] Vector tile caching

Author: JoshuaVulcan

.github/workflows/develop-workflow.yml

@@ -49,7 +49,7 @@ jobs:
         run: ci-helpers/makeversion.py
 
       - name: Install dependencies
-        run: yarn --ignore-scripts
+        run: yarn install
 
       - name: Run tests
         run: yarn test-ci

react-app-config/webpack.config.js

@@ -670,7 +670,7 @@ module.exports = function (webpackEnv) {
           // Bump up the default maximum size (2mb) that's precached,
           // to make lazy-loading failure scenarios less likely.
           // See https://github.com/cra-template/pwa/issues/13#issuecomment-722667270
-          maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
+          maximumFileSizeToCacheInBytes: 10 * 1024 * 1024,
         }),
       // TypeScript type checking
       useTypeScript &&

src/App.js

@@ -109,6 +109,26 @@ export const App = () => {
     finishDrag(e);
   }, [disallowDragAndDrop, finishDrag]);
 
+
+  // set user scope for service worker caching
+  useEffect(() => {
+    if (navigator?.serviceWorker?.controller) {
+      if (user?.id) {
+        const scopeHash = selectedUserProfile?.id ?? user.id;
+        navigator.serviceWorker.controller.postMessage({
+          type: 'SET_SCOPE',
+          scope: { hash: scopeHash }
+        });
+      } else {
+        // Clear scope when user logs out
+        navigator.serviceWorker.controller.postMessage({
+          type: 'SET_SCOPE',
+          scope: { hash: null }
+        });
+      }
+    }
+  }, [user, selectedUserProfile]);
+
   useEffect(() => {
     /* use these catch blocks to provide error toasts if/as desired */
     dispatch(fetchEventTypes());

src/Map/index.js

@@ -589,9 +589,27 @@ const Map = ({ children, onMapLoad, socket }) => {
       // querying from the root /static/ dir of the host means this is one of our static assets, let's get it
       // if the map says it's missing.
       if (id.includes('/static/')) {
-        const src = id.replace(/(\.svg|\.png|\.jpg).*$/, '$1');
+        const dimensions = {};
+        const match = id.match(/^(.*?)(?:-([^-.]+)-([^-.]+))?$/);
+
+        let src = id;
+        if (match) {
+          const [, path, width, height] = match;
+          src = path;
+
+          if (width && width !== 'x') {
+            dimensions.width = Number(width);
+          }
+          if (height && height !== 'x') {
+            dimensions.height = Number(height);
+          }
+        }
+
+        // Sanitize the src path to remove internal icon ID suffixes
+        src = src.replace(/(\.svg|\.png|\.jpg).*$/, '$1');
+
         try {
-          const img = await addMapImage({ src, id });
+          await addMapImage({ src, id, ...dimensions });
         } catch (error) {
           console.warn('Error adding map image:', { event, error });
         }

src/SpatialFeaturesLayer/index.js

@@ -1,8 +1,12 @@
 import React, { memo, useContext, useMemo, useCallback, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { MapContext } from '../App';
+import { addMapImage } from '../utils/map';
 import { API_URL, DEFAULT_SYMBOL_LAYOUT, DEFAULT_SYMBOL_PAINT } from '../constants';
 
+import MarkerImage from '../common/images/icons/mapbox-blue-marker-icon.png';
+import RangerStationsImage from '../common/images/icons/ranger-stations.png';
+
 const SPATIAL_FEATURES_SOURCE = 'spatial-features-source';
 
 const VECTOR_TILE_URL = `${API_URL}spatialfeatures/tiles/{z}/{x}/{y}.pbf`;
@@ -14,6 +18,8 @@ export const LINES_LAYER_ID = 'spatial-features-lines';
 export const POLYGONS_LAYER_ID = 'spatial-features-polygons';
 // const POLYGONS_LABELS_LAYER_ID = 'spatial-features-polygon-labels';
 
+const BEFORE_LAYER_ID = 'feature-separation-layer';
+
 const DEFAULT_LINE_PAINT_COLOR = [
   'case',
   ['has', 'stroke'], ['get', 'stroke'],
@@ -26,10 +32,11 @@ const DEFAULT_LINE_PAINT_COLOR = [
 const DEFAULT_POLYGON_FILL_COLOR = [
   'case',
   ['has', 'fill'], ['get', 'fill'],
-  ['has', 'color'], ['get', 'color'],
+  ['has', 'fill-color'], ['get', 'fill-color'],
   ['has', 'fill_color'], ['get', 'fill_color'],
+  ['has', 'color'], ['get', 'color'],
   ['has', 'stroke'], ['get', 'stroke'],
-  '#ff6600'
+  'rgba(255, 102, 0, 0)'
 ];
 
 
@@ -114,7 +121,7 @@ const SpatialFeaturesLayer = ({ onFeatureClick }) => {
           ...DEFAULT_SYMBOL_PAINT
         },
         filter: symbolLayerFilter
-      });
+      }, BEFORE_LAYER_ID);
     }
 
     if (!map.getLayer(LINES_LAYER_ID)) {
@@ -131,7 +138,7 @@ const SpatialFeaturesLayer = ({ onFeatureClick }) => {
             ['has', 'width'], ['get', 'width'],
             ['has', 'line_width'], ['get', 'line_width'],
             ['has', 'stroke_width'], ['get', 'stroke_width'],
-            3
+            1,
           ],
           'line-opacity': [
             'case',
@@ -143,7 +150,7 @@ const SpatialFeaturesLayer = ({ onFeatureClick }) => {
           ]
         },
         filter: lineLayerFilter
-      });
+      }, BEFORE_LAYER_ID);
     }
 
     if (!map.getLayer(POLYGONS_LAYER_ID)) {
@@ -166,11 +173,11 @@ const SpatialFeaturesLayer = ({ onFeatureClick }) => {
             ['has', 'stroke'], ['get', 'stroke'],
             ['has', 'outline_color'], ['get', 'outline_color'],
             ['has', 'border_color'], ['get', 'border_color'],
-            '#ff6600'
+            'rgba(255, 102, 0, 0.25)'
           ]
         },
         filter: polygonLayerFilter
-      });
+      }, BEFORE_LAYER_ID);
     }
 
     /* // Add separate label layers for each geometry type
@@ -361,6 +368,15 @@ const SpatialFeaturesLayer = ({ onFeatureClick }) => {
     }
   }, [map, polygonLayerFilter]);
 
+  useEffect(() => {
+    if (!map?.hasImage?.('marker-icon')) {
+      addMapImage({ src: MarkerImage, id: 'marker-icon' });
+    }
+    if (!map?.hasImage?.('ranger-stations')) {
+      addMapImage({ src: RangerStationsImage, id: 'ranger-stations' });
+    }
+  }, [map]);
+
   return null;
 };
 

src/SpatialFeaturesLayer/index.test.js

@@ -15,6 +15,9 @@ jest.mock('../App', () => {
 // Mock these to prevent dependency chain issues
 jest.mock('../utils/analyzers', () => ({}));
 jest.mock('../ducks/analyzers', () => ({}));
+jest.mock('../utils/map', () => ({
+  addMapImage: jest.fn()
+}));
 
 jest.mock('../constants', () => ({
   API_URL: 'http://test-api.com/',
@@ -39,7 +42,7 @@ jest.mock('../constants', () => ({
     ANALYZER_POLYS_CRITICAL_SOURCE: 'analyzer-polygon-critical-source',
     ANALYZER_POLYS_WARNING_SOURCE: 'analyzer-polygon-warning-source',
     CLUSTERS_SOURCE_ID: 'clusters-source'
-  }
+  },
 }));
 
 jest.mock('react-redux', () => ({
@@ -102,7 +105,7 @@ describe('SpatialFeaturesLayer', () => {
         ['==', ['geometry-type'], 'Point'],
         ['!', ['in', ['get', 'id'], ['literal', ['hidden-feature-1', 'hidden-feature-2']]]]
       ])
-    }));
+    }), 'feature-separation-layer');
 
     // Verify line layer was added
     expect(mockMap.addLayer).toHaveBeenCalledWith(expect.objectContaining({
@@ -115,7 +118,7 @@ describe('SpatialFeaturesLayer', () => {
         ['==', ['geometry-type'], 'LineString'],
         ['!', ['in', ['get', 'id'], ['literal', ['hidden-feature-1', 'hidden-feature-2']]]]
       ])
-    }));
+    }), 'feature-separation-layer');
 
     // Verify polygon layer was added
     expect(mockMap.addLayer).toHaveBeenCalledWith(expect.objectContaining({
@@ -128,7 +131,7 @@ describe('SpatialFeaturesLayer', () => {
         ['==', ['geometry-type'], 'Polygon'],
         ['!', ['in', ['get', 'id'], ['literal', ['hidden-feature-1', 'hidden-feature-2']]]]
       ])
-    }));
+    }), 'feature-separation-layer');
 
     // Verify click handlers were added
     expect(mockMap.on).toHaveBeenCalledWith('click', SYMBOLS_LAYER_ID, expect.any(Function));

src/ducks/subjects.js

@@ -81,23 +81,21 @@ export const clearSubjectData = () => ({
 });
 
 export const fetchSubjectGroups = () => dispatch => axios.get(SUBJECT_GROUPS_API_URL)
-  .then(response => dispatch(fetchSubjectGroupsSuccess(response)));
+  .then(response => dispatch(fetchSubjectGroupsSuccess(response)))
+  .catch(_error => dispatch(fetchSubjectGroupsError())); // Fallback to empty array on error
 
 const fetchMapSubjectsSuccess = response => ({
   type: FETCH_MAP_SUBJECTS_SUCCESS,
   payload: response.data,
 });
-/* 
-const fetchMapSubjectsError = error => ({
-  type: FETCH_MAP_SUBJECTS_ERROR,
-  payload: error,
-});
- */
+
 const fetchSubjectGroupsSuccess = response => ({
   type: FETCH_SUBJECT_GROUPS_SUCCESS,
-  payload: response.data.data,
+  payload: response?.data?.data ?? [],
 });
 
+const fetchSubjectGroupsError = _error => fetchSubjectGroupsSuccess([]);
+
 const INITIAL_MAP_SUBJECT_STATE = {
   bbox: null,
   subjects: [],

src/sw-build.js

@@ -12,7 +12,7 @@ const buildSW = () => {
       globDirectory: path.join(process.cwd(), 'build'),
       globPatterns: ['**/*.{js,html,css,png,svg}'],
       globIgnores: ['**/*service-worker*.js', '**/*precache-manifest*.js'],
-      maximumFileSizeToCacheInBytes: 50 * 1024 * 102,
+      maximumFileSizeToCacheInBytes: 10 * 1024 * 1024, // 10 MB
     })
     .then(({ count, size, warnings }) => {
       warnings.forEach(console.warn);