Maps integration

app/charts/map/chart-map-prototype.tsx

@@ -40,6 +40,7 @@ export interface GeoShapeFeature {
   properties: {
     iri: string;
     label: string;
+    observation: Observation;
   };
   geometry: GeoJSON.Geometry;
 }
@@ -61,37 +62,64 @@ export const ChartMapVisualization = ({
       iri: dataSetIri,
       measures: [
         chartConfig.fields.areaLayer.componentIri,
-        chartConfig.fields.symbolLayer?.componentIri,
+        chartConfig.fields.symbolLayer.componentIri,
       ],
       filters: queryFilters,
     },
   });
 
   const geoDimension = data?.dataCubeByIri?.dimensions.find(
-    (d) => d.__typename === "GeoDimension"
-  ) as GeoDimension | undefined;
+    (d) => d.iri === chartConfig.fields.areaLayer.componentIri
+  ) as GeoDimension;
 
   const areaLayer = useMemo(() => {
     if (geoDimension) {
       const geoShapes = geoDimension.geoShapes as GeoShapes;
+      const shapes = topojsonFeature(
+        geoShapes,
+        geoShapes.objects.shapes
+      ) as GeoJSON.FeatureCollection<
+        GeoJSON.GeometryObject,
+        GeoShapeFeature["properties"]
+      >;
+
+      shapes.features.forEach((d) => {
+        // Should we match by labels?
+        d.properties.observation = data?.dataCubeByIri?.observations.data.find(
+          (o) =>
+            o[chartConfig.fields.areaLayer.componentIri] === d.properties!.label
+        );
+      });
 
       return {
-        shapes: topojsonFeature(
-          geoShapes,
-          geoShapes.objects.shapes
-        ) as GeoJSON.FeatureCollection,
+        shapes,
         mesh: topojsonMesh(geoShapes, geoShapes.objects.shapes as any),
       };
     }
-  }, [geoDimension]);
+  }, [
+    geoDimension,
+    chartConfig.fields.areaLayer.componentIri,
+    data?.dataCubeByIri?.observations.data,
+  ]);
 
   const symbolLayer = useMemo(() => {
     return areaLayer?.shapes.features.map((d) => ({
       coordinates: geoCentroid(d),
-      iri: d.properties!.iri,
-      label: d.properties!.label,
+      properties: {
+        iri: d.properties!.iri,
+        label: d.properties!.label,
+        // Should we match by labels?
+        observation: data?.dataCubeByIri?.observations.data.find(
+          (o) =>
+            o[chartConfig.fields.areaLayer.componentIri] === d.properties!.label
+        ),
+      },
     }));
-  }, [areaLayer]);
+  }, [
+    areaLayer,
+    chartConfig.fields.areaLayer.componentIri,
+    data?.dataCubeByIri?.observations.data,
+  ]);
 
   useEffect(() => {
     const loadGeoData = async () => {

app/charts/map/map-state.tsx

@@ -14,7 +14,7 @@ import {
   ScaleThreshold,
   scaleThreshold,
 } from "d3";
-import { ReactNode } from "react";
+import { ReactNode, useMemo } from "react";
 import { ckmeans } from "simple-statistics";
 import {
   getColorInterpolator,
@@ -145,11 +145,18 @@ const useMapState = ({
   const getValue = useOptionalNumericVariable(fields.areaLayer.measureIri);
   const getRadius = useOptionalNumericVariable(fields.symbolLayer.componentIri);
 
-  const areaMeasureLabel =
-    measures.find((m) => m.iri === fields["areaLayer"].measureIri)?.label || "";
-  const symbolMeasureLabel =
-    measures.find((m) => m.iri === fields["symbolLayer"].componentIri)?.label ||
-    "";
+  const areaMeasureLabel = useMemo(
+    () =>
+      measures.find((m) => m.iri === fields["areaLayer"].measureIri)?.label ||
+      "",
+    [fields, measures]
+  );
+  const symbolMeasureLabel = useMemo(
+    () =>
+      measures.find((m) => m.iri === fields["symbolLayer"].componentIri)
+        ?.label || "",
+    [fields, measures]
+  );
   const dataDomain = (extent(data, (d) => getValue(d)) || [0, 100]) as [
     number,
     number

app/charts/map/map.tsx

@@ -213,9 +213,7 @@ export const MapComponent = () => {
                       interaction: {
                         visible: true,
                         mouse: { x, y },
-                        d: data.find(
-                          (d) => getLabel(d) === object.properties.label
-                        ),
+                        d: object.properties.observation,
                       },
                     },
                   });
@@ -227,17 +225,9 @@ export const MapComponent = () => {
               }}
               getLineWidth={100}
               updateTriggers={{ getFillColor: getColor }}
-              getFillColor={(d: GeoShapeFeature) => {
-                const entry = data.find(
-                  (o) => getLabel(o) === d.properties.label // FIXME?
-                );
-
-                if (entry) {
-                  return getColor(getValue(entry));
-                }
-
-                return [200, 200, 200];
-              }}
+              getFillColor={(d: GeoShapeFeature) =>
+                getColor(getValue(d.properties.observation))
+              }
               getLineColor={[255, 255, 255]}
             />
             <GeoJsonLayer
@@ -286,11 +276,9 @@ export const MapComponent = () => {
             radiusMaxPixels={radiusScale.range()[1]}
             lineWidthMinPixels={1}
             getPosition={(d: GeoPoint) => d.coordinates}
-            getRadius={(d: GeoPoint) => {
-              const obs = data.find((x) => getLabel(x) === d.label); // FIXME?
-
-              return obs ? radiusScale(getRadius(obs) ?? 0) : 0;
-            }}
+            getRadius={(d: GeoPoint) =>
+              radiusScale(getRadius(d.properties.observation) ?? 0)
+            }
             getFillColor={[0, 102, 153]}
             getLineColor={[255, 255, 255]}
             onHover={({
@@ -309,7 +297,7 @@ export const MapComponent = () => {
                     interaction: {
                       visible: true,
                       mouse: { x, y },
-                      d: data.find((d) => getLabel(d) === object.label), // FIXME?
+                      d: object.properties.observation,
                     },
                   },
                 });

app/domain/data.ts

@@ -15,9 +15,12 @@ export type Observation = Record<string, ObservationValue>;
 export type GeoShapes = TopoJSON.Topology;
 
 export type GeoPoint = {
-  iri: string;
-  label: string;
   coordinates: [number, number];
+  properties: {
+    iri: string;
+    label: string;
+    observation: Observation;
+  };
 };
 
 const xmlSchema = "http://www.w3.org/2001/XMLSchema#";