feat(map): first non-perfect version of map synchronization

f-eld-ch · Feb 19, 2024 · a7b4412 · a7b4412
1 parent fa752e4
commit a7b4412
Show file tree

Hide file tree

Showing 11 changed files with 919 additions and 384 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -4,12 +4,12 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@apollo/client": "^3.8.10",
+    "@apollo/client": "^3.9.5",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mapbox/mapbox-gl-draw": "^1.3.0",
+    "@mapbox/mapbox-gl-draw": "^1.4.3",
     "@turf/bearing": "^6.5.0",
     "@turf/center": "^6.5.0",
     "@turf/helpers": "^6.5.0",
@@ -19,7 +19,7 @@
     "dayjs": "^1.11.10",
     "graphql": "^16.8.1",
     "hat": "^0.0.3",
-    "i18next": "^23.7.19",
+    "i18next": "^23.9.0",
     "i18next-browser-languagedetector": "^7.2.0",
     "lodash": "^4.17.21",
     "mapbox-gl-style-switcher": "^1.0.11",
@@ -28,12 +28,12 @@
     "react-autocomplete-hint": "^2.0.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0",
-    "react-i18next": "^14.0.1",
+    "react-i18next": "^14.0.5",
     "react-map-gl": "~7.1.7",
     "react-markdown": "^8.0.7",
-    "react-router-dom": "^6.21.3",
-    "usehooks-ts": "^2.10.0",
-    "web-vitals": "^3.5.1"
+    "react-router-dom": "^6.22.1",
+    "usehooks-ts": "^2.14.0",
+    "web-vitals": "^3.5.2"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
@@ -72,38 +72,38 @@
     "@types/hat": "^0.0.4",
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.14.202",
-    "@types/mapbox-gl": "^2.7.19",
-    "@types/mapbox__mapbox-gl-draw": "~1.3.3",
-    "@types/node": "^20.11.6",
-    "@types/react": "^18.2.48",
+    "@types/mapbox-gl": "^2.7.21",
+    "@types/mapbox__mapbox-gl-draw": "~1.4.6",
+    "@types/node": "^20.11.19",
+    "@types/react": "^18.2.56",
     "@types/react-color": "^3.0.11",
-    "@types/react-dom": "^18.2.18",
+    "@types/react-dom": "^18.2.19",
     "@types/react-router-dom": "^5.3.3",
-    "@types/semver": "^7",
+    "@types/semver": "^7.5.7",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
-    "@vite-pwa/assets-generator": "^0.2.3",
+    "@vite-pwa/assets-generator": "^0.2.4",
     "@vitejs/plugin-react-swc": "^3.6.0",
-    "@vitest/coverage-v8": "^1.2.2",
+    "@vitest/coverage-v8": "^1.3.0",
     "eslint": "^8.56.0",
     "eslint-config-react-app": "^7.0.1",
     "husky": "^8.0.3",
     "jest": "^29.7.0",
     "jsdom": "^24.0.0",
-    "lint-staged": "^15.2.0",
-    "prettier": "^3.2.4",
-    "sass": "^1.70.0",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
+    "sass": "^1.71.0",
     "semver": "^7.6.0",
     "source-map-explorer": "^2.5.3",
     "ts-jest": "^29.1.2",
     "typescript": "^4.9.5",
-    "vite": "^5.0.12",
+    "vite": "^5.1.3",
     "vite-plugin-checker": "^0.6.4",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-pwa": "^0.17.5",
+    "vite-plugin-pwa": "^0.19.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.1",
-    "vitest": "^1.2.2"
+    "vitest": "^1.3.0"
   },
   "resolutions": {
     "json5": "^2.2.3",

diff --git a/ui/src/cache.tsx b/ui/src/cache.tsx
@@ -0,0 +1,23 @@
+import { InMemoryCache, makeVar } from "@apollo/client";
+
+// active drawing Layer
+export const activeLayerVar = makeVar<string>("");
+
+// active Incident
+export const activeIncidentVar = makeVar<string>("");
+
+
+export const cache: InMemoryCache = new InMemoryCache({
+    typePolicies: {
+        Layers: {
+            fields: {
+                isActive: {
+                    read(_, { readField }) {
+                        const layerId = readField('id');
+                        return layerId === activeLayerVar()
+                    }
+                }
+            }
+        }
+    }
+});
diff --git a/ui/src/client.tsx b/ui/src/client.tsx
@@ -1,6 +1,6 @@
-import { ApolloClient, InMemoryCache } from "@apollo/client";
-
+import { ApolloClient } from "@apollo/client";
 import { HttpLink } from "@apollo/client";
+import { cache } from 'cache';
 
 const httpLink = new HttpLink({
   uri: import.meta.env.VITE_API_URL,
@@ -9,12 +9,14 @@ const httpLink = new HttpLink({
 
 const client = new ApolloClient({
   link: httpLink,
-  cache: new InMemoryCache(),
+  cache: cache,
   // defaultOptions: {
   //   watchQuery: {
   //     nextFetchPolicy: "cache-and-network",
   //   },
   // },
 });
 
+
+
 export default client;
diff --git a/ui/src/components/map/EnrichedLayerFeatures.tsx b/ui/src/components/map/EnrichedLayerFeatures.tsx
@@ -2,6 +2,7 @@ import bearing from '@turf/bearing';
 import { point } from '@turf/helpers';
 import { BabsIcon, Schaeden, Others } from 'components/BabsIcons';
 import { Feature, FeatureCollection, GeoJsonProperties, Geometry } from 'geojson';
+import { memo } from 'react';
 import { Layer, Source } from "react-map-gl";
 
 const enrichFeature = (f: Feature<Geometry, GeoJsonProperties>): Feature<Geometry, GeoJsonProperties>[] => {
@@ -105,7 +106,7 @@ const EnrichLineStringMap: { [key: string]: EnrichLineConfig } = {
 
 const EnrichedSymbolSource = (props: EnrichedFeaturesProps) => {
     let enrichedFC: FeatureCollection = { "type": "FeatureCollection", "features": [] };
-    enrichedFC.features = Object.assign([], props.featureCollection.features.filter(f => f.properties?.deletedAt === undefined).filter(f => f.id !== props.selectedFeature).flatMap(f => enrichFeature(f)))
+    enrichedFC.features = Object.assign([], props.featureCollection.features.filter(f => f.properties?.deletedAt === null).filter(f => f.id !== props.selectedFeature).flatMap(f => enrichFeature(f)))
 
     return <Source id="enriched" type="geojson" data={enrichedFC} >
         <Layer type="symbol" layout={{
@@ -119,7 +120,7 @@ const EnrichedSymbolSource = (props: EnrichedFeaturesProps) => {
     </Source>
 }
 
-export const EnrichedFeaturesSource = (props: EnrichedFeaturesProps) => {
+const EnrichedFeaturesSource = (props: EnrichedFeaturesProps) => {
 
     return <>
         <EnrichedSymbolSource {...props} />
@@ -128,7 +129,12 @@ export const EnrichedFeaturesSource = (props: EnrichedFeaturesProps) => {
 
 interface EnrichedFeaturesProps {
     featureCollection: FeatureCollection;
-    selectedFeature: string | number | undefined
+    selectedFeature?: string | number | undefined
 }
 
-export default EnrichedFeaturesSource;
+const MemoEnrichedFeaturesSource = memo(EnrichedFeaturesSource);
+export {
+    MemoEnrichedFeaturesSource as EnrichedFeaturesSource
+}
+
+export default memo(EnrichedFeaturesSource);
diff --git a/ui/src/types/layer.ts b/ui/src/types/layer.ts
@@ -3,15 +3,16 @@ import { Incident } from "./incident";
 
 export type Layer = {
   id: string;
+  isActive: boolean;
   name: string;
   incident: Incident;
-  features: Features[];
+  features: Feature[];
   createdAt: Date;
   updatedAt: Date;
   deletedAt: Date;
 };
 
-export type Features = {
+export type Feature = {
   id: string;
   name: string;
   layer: Layer;
@@ -21,3 +22,31 @@ export type Features = {
   updatedAt: Date;
   deletedAt: Date;
 };
+
+
+export interface GetLayersData {
+  layers: Layer[];
+}
+
+export interface GetLayersVars {
+  incidentId: string;
+}
+
+
+export interface AddFeatureVars {
+  layerId: string;
+  geometry: Geometry;
+  properties: GeoJsonProperties;
+  id: string | number | undefined;
+}
+
+export interface ModifyFeatureVars {
+  id: string | number | undefined;
+  geometry: Geometry;
+  properties: GeoJsonProperties;
+}
+
+export interface DeleteFeatureVars {
+  id: string | number | undefined;
+  deletedAt: Date;
+}