feat: Add mutations page to review mutations of municipality

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}

website/package.json

@@ -10,6 +10,7 @@
     "@deck.gl/layers": "^8.9.4",
     "@deck.gl/react": "^8.9.4",
     "@material-ui/core": "^4.12.4",
+    "@turf/turf": "^7.1.0",
     "@types/cors": "^2.8.17",
     "@types/d3": "^7.4.0",
     "@types/node": "^20.11.30",
@@ -32,7 +33,8 @@
     "swiss-maps": "^4.5.0",
     "topojson": "^3.0.2",
     "typescript": "^5.4.3",
-    "use-immer": "^0.10.0"
+    "use-immer": "^0.10.0",
+    "zod": "^3.23.8"
   },
   "devDependencies": {}
 }

website/src/components/Mutations/Map.tsx

@@ -0,0 +1,49 @@
+import { GeoJsonLayer } from "@deck.gl/layers";
+import DeckGL from "@deck.gl/react";
+import React, { ComponentProps } from "react";
+import { useGeoData } from "src/domain/geodata";
+import { MapController } from "@deck.gl/core";
+
+export const LINE_COLOR = [100, 100, 100, 127] as const;
+
+const MutationsMap = ({
+  highlightedMunicipalities,
+  geoData,
+  ...props
+}: {
+  highlightedMunicipalities: {
+    added: number[];
+    removed: number[];
+  };
+  geoData: ReturnType<typeof useGeoData>["data"];
+} & ComponentProps<typeof DeckGL>) => {
+  return (
+    <DeckGL controller={MapController} {...props}>
+      {geoData.municipalities && (
+        <GeoJsonLayer
+          id="municipalities"
+          data={geoData.municipalities}
+          pickable={false}
+          stroked={true}
+          filled={true}
+          extruded={false}
+          lineWidthMinPixels={0.5}
+          lineWidthMaxPixels={1}
+          getLineWidth={200}
+          lineMiterLimit={1}
+          updateTriggers={{ getFillColor: highlightedMunicipalities }}
+          getLineColor={[30, 30, 30]}
+          getFillColor={(d: { properties: { id: number } }) => {
+            return highlightedMunicipalities.added.includes(d.properties.id)
+              ? [0, 255, 0, 100]
+              : highlightedMunicipalities.removed.includes(d.properties.id)
+              ? [255, 0, 0, 100]
+              : [255, 255, 255];
+          }}
+        />
+      )}
+    </DeckGL>
+  );
+};
+
+export default MutationsMap;

website/src/domain/geodata.ts

@@ -4,26 +4,38 @@ import { previewSourceUrl } from "src/shared";
 import * as topojson from "topojson";
 import { Value } from "../components/Generator/context";
 import { MultiPolygon } from "geojson";
+import { Feature, Geometry, GeoJsonProperties } from "geojson";
+
+export type GeoDataFeature = Feature<Geometry, GeoJsonProperties>;
+
+const castFeatures = (d: any) => {
+  return d as { features: GeoDataFeature[] };
+};
 
 const getGeoData = (json: any) => {
   const geoData = {
     country: json.objects?.country
-      ? topojson.feature(json, json.objects.country)
+      ? castFeatures(topojson.feature(json, json.objects.country))
       : undefined,
     cantons: json.objects?.cantons
-      ? topojson.feature(json, json.objects.cantons)
+      ? castFeatures(topojson.feature(json, json.objects.cantons))
       : undefined,
     neighbors: json.objects?.cantons
       ? topojson.neighbors(json.objects.cantons.geometries)
       : undefined,
     municipalities: json.objects?.municipalities
-      ? topojson.feature(json, json.objects.municipalities as MultiPolygon)
+      ? castFeatures(topojson.feature(json, json.objects.municipalities))
       : undefined,
     lakes: json.objects?.lakes
-      ? topojson.feature(json, json.objects.lakes)
+      ? castFeatures(topojson.feature(json, json.objects.lakes))
       : undefined,
     city: cityData
-      ? topojson.feature(cityData as any, cityData.objects["swiss-city"] as any)
+      ? castFeatures(
+          topojson.feature(
+            cityData as any,
+            cityData.objects["swiss-city"] as any
+          )
+        )
       : undefined,
   };
   return geoData;
@@ -33,6 +45,7 @@ const fetchGeoData = (options: Value["state"]["options"]) => {
   return fetch(previewSourceUrl(options, "v0"))
     .then((res) => res.json())
     .then((json) => {
+      console.log({ json });
       return getGeoData(json);
     });
 };