WIP for feature state styling

Author: gislawill

api/app/zonal_stats.py

@@ -95,7 +95,7 @@ def _read_zones(
     dict
         A GeoJSON-style dictionary: {"type": "FeatureCollection", "features": [...]}
     """
-
+    print(f"Reading zones file: {zones_filepath}")
     # Check if filepath contains .json or .geojson (case insensitive)
     filepath_lower = zones_filepath.lower()
     if ".json" in filepath_lower or ".geojson" in filepath_lower:
@@ -147,7 +147,7 @@ def _group_zones(
     zones_filepath: FilePath, group_by: GroupBy, admin_level: Optional[int] = None, simplify_tolerance: Optional[float] = None
 ) -> FilePath:
     """Group zones by a key id and merge polygons."""
-    safe_filename = zones_filepath.replace("/", "_").replace("s3://", "")
+    safe_filename = zones_filepath.replace("/", "_").replace("s3://", "").replace("parquet", "json")
     output_filename: FilePath = "{zones}.{simplify_tolerance}.{group_by}".format(
         zones=safe_filename, group_by=group_by, simplify_tolerance=simplify_tolerance
     )
@@ -507,6 +507,7 @@ def intersect_area(masked) -> AreaInSqKm:
     stats_results = clean_results
 
     if not geojson_out:
+        print(f"Extracting feature properties for {zones_filepath}")
         feature_properties = _extract_features_properties(
             zones_filepath, admin_level, simplify_tolerance
         )

frontend/src/components/MapView/Layers/AnalysisLayer/index.tsx

@@ -1,5 +1,6 @@
+import { RefObject, useEffect } from 'react';
 import { get } from 'lodash';
-import { Layer, Source } from 'react-map-gl/maplibre';
+import { Layer, MapRef, Source } from 'react-map-gl/maplibre';
 import { useSelector } from 'react-redux';
 import { addPopupData } from 'context/tooltipStateSlice';
 import {
@@ -33,6 +34,7 @@ import {
 import { opacitySelector } from 'context/opacityStateSlice';
 import { getFormattedDate } from 'utils/date-utils';
 import { invertLegendColors } from 'components/MapView/Legends/utils';
+import { layersSelector } from 'context/mapStateSlice/selectors';
 
 const layerId = getLayerMapId('analysis');
 
@@ -166,14 +168,99 @@ function fillPaintData(
   };
 }
 
-function AnalysisLayer({ before }: { before?: string }) {
+function AnalysisLayer({
+  before,
+  mapRef,
+}: {
+  before?: string;
+  mapRef: RefObject<MapRef>;
+}) {
   // TODO maybe in the future we can try add this to LayerType so we don't need exclusive code in Legends and MapView to make this display correctly
   // Currently it is quite difficult due to how JSON focused the typing is. We would have to refactor it to also accept layers generated on-the-spot
   const analysisData = useSelector(analysisResultSelector);
   const isAnalysisLayerActive = useSelector(isAnalysisLayerActiveSelector);
   const opacityState = useSelector(opacitySelector('analysis'));
   const invertedColorsForAnalysis = useSelector(invertedColorsSelector);
   useMapCallback('click', layerId, undefined, onClick(analysisData));
+  const layers = useSelector(layersSelector);
+  const boundaryLayer = layers.find(
+    layer => layer.id === analysisData?.baselineLayerId,
+  )?.id;
+  const boundary =
+    analysisData && 'boundaryId' in analysisData && analysisData.boundaryId
+      ? getLayerMapId(analysisData.boundaryId)
+      : before;
+
+  const legend =
+    analysisData && invertedColorsForAnalysis
+      ? invertLegendColors(analysisData.legend)
+      : analysisData?.legend;
+
+  useEffect(() => {
+    if (
+      analysisData instanceof BaselineLayerResult &&
+      analysisData.adminBoundariesFormat === 'pmtiles'
+    ) {
+      // Step 1: Get a reference to your map
+      const map = mapRef.current?.getMap();
+
+      if (!map) {
+        return;
+      }
+
+      // Step 2: Define the source and layer IDs for your admin boundary layer
+      const boundarySourceId = `source-${boundaryLayer}`;
+
+      // Step 3: Get all features from the admin boundary layer
+      // Option 1: Query rendered features (visible in current view)
+      const features = map.queryRenderedFeatures({ layers: [boundary] });
+      const { statistic } = analysisData;
+      // Step 4: Match features with analysisData and set feature state
+      // Assuming analysisData.featureCollection.features contains your feature data
+      features.forEach(feature => {
+        try {
+          const adminId = feature.properties.dv_adm0_id;
+
+          // Find matching data in analysisData feature collection
+          const matchingFeature = analysisData.featureCollection.features.find(
+            f => f.dv_adm0_id === adminId,
+          );
+
+          if (matchingFeature) {
+            // Set feature state based on properties in matchingFeature
+            map.setFeatureState(
+              {
+                source: boundarySourceId,
+                sourceLayer: boundary,
+                id: matchingFeature.dv_adm0_id,
+              },
+              {
+                data: matchingFeature[statistic],
+                selected: true,
+              },
+            );
+          }
+        } catch (error) {
+          console.error('Error setting feature state', error);
+        }
+      });
+
+      // Step 5: Apply styling based on fillPaintData
+      // Create a legend from your analysisData
+
+      const property = statistic; // The property name you set in feature state
+
+      // Apply the fill paint style to your layer
+      map.setPaintProperty(boundary, 'fill-color', {
+        property,
+        stops: legendToStops(legend),
+        type: 'interval',
+      });
+
+      // Set the opacity
+      map.setPaintProperty(boundary, 'fill-opacity', 0.7);
+    }
+  }, [analysisData, mapRef]);
 
   if (!analysisData || !isAnalysisLayerActive) {
     return null;
@@ -196,15 +283,6 @@ function AnalysisLayer({ before }: { before?: string }) {
     }
   })();
 
-  const boundary =
-    'boundaryId' in analysisData && analysisData.boundaryId
-      ? getLayerMapId(analysisData.boundaryId)
-      : before;
-
-  const legend = invertedColorsForAnalysis
-    ? invertLegendColors(analysisData.legend)
-    : analysisData.legend;
-
   return (
     <Source data={analysisData.featureCollection} type="geojson">
       <Layer

frontend/src/components/MapView/Map/index.tsx

@@ -244,7 +244,7 @@ const MapComponent = memo(() => {
           ),
         });
       })}
-      <AnalysisLayer before={firstBoundaryId} />
+      <AnalysisLayer before={firstBoundaryId} mapRef={mapRef} />
       <SelectionLayer before={firstSymbolId} />
       <MapTooltip />
     </MapGL>

frontend/src/context/analysisResultStateSlice.ts

@@ -440,7 +440,7 @@ async function createAPIRequestParams(
     ...maskParams,
     // TODO - remove the need for the geojson_out parameters. See TODO in zonal_stats.py.
     // TODO - Add back logic
-    geojson_out: true, // Boolean(geojsonOut),
+    geojson_out: Boolean(geojsonOut),
     intersect_comparison:
       exposureValue?.operator && exposureValue.value
         ? `${exposureValue?.operator}${exposureValue?.value}`
@@ -767,6 +767,7 @@ export const requestAndStoreAnalysis = createAsyncThunk<
     // we never use the raw api data besides for debugging. So lets not bother saving it in Redux for production
     process.env.NODE_ENV === 'production' ? undefined : aggregateData,
     date,
+    adminBoundaries.format,
   );
 });
 

frontend/src/utils/analysis-utils.ts

@@ -466,6 +466,7 @@ export class ExposedPopulationResult {
 export class BaselineLayerResult {
   key: number = Date.now();
   featureCollection: FeatureCollection;
+  adminBoundariesFormat: string;
   tableData: TableRow[];
   // for debugging purposes only, as its easy to view the raw API response via Redux Devtools. Should be left empty in production
   // @ts-ignore: TS6133
@@ -491,9 +492,11 @@ export class BaselineLayerResult {
     legend?: LegendDefinition,
     rawApiData?: object[],
     analysisDate?: ReturnType<Date['getTime']>,
+    adminBoundariesFormat?: string,
   ) {
     this.featureCollection = featureCollection;
     this.tableData = tableData;
+    this.adminBoundariesFormat = adminBoundariesFormat ?? 'geojson';
     this.statistic = statistic;
     this.threshold = threshold;
     this.legend = baselineLayer.legend ?? legend;