filter geometries by category

client/package.json

@@ -100,6 +100,7 @@
     "@types/chroma-js": "2.1.3",
     "@types/d3-format": "3.0.1",
     "@types/d3-scale": "4.0.2",
+    "@types/geojson": "7946.0.14",
     "@types/lodash-es": "4.17.6",
     "@types/node": "16.11.6",
     "@types/react": "18.2.28",

client/src/containers/analysis-eudr/map/component.tsx

@@ -43,6 +43,7 @@ const EUDRMap = () => {
     supplierLayer,
     contextualLayers,
     filters: { suppliers, materials, origins, plots, dates },
+    table: { filters: tableFilters },
   } = useAppSelector((state) => state.eudr);
 
   const [hoverInfo, setHoverInfo] = useState<PickingInfo>(null);
@@ -74,9 +75,17 @@ const EUDRMap = () => {
           };
         }
 
+        const filteredData = data?.table.filter((dataRow) => {
+          if (Object.values(tableFilters).every((filter) => !filter)) return true;
+
+          if (tableFilters.dfs && dataRow.dfs > 0) return true;
+          if (tableFilters.sda && dataRow.sda > 0) return true;
+          if (tableFilters.tpl && dataRow.tpl > 0) return true;
+        });
+
         return {
-          dfs: data.table.map((row) => row.plots.dfs.flat()).flat(),
-          sda: data.table.map((row) => row.plots.sda.flat()).flat(),
+          dfs: filteredData.map((row) => row.plots.dfs.flat()).flat(),
+          sda: filteredData.map((row) => row.plots.sda.flat()).flat(),
         };
       },
     },
@@ -91,12 +100,30 @@ const EUDRMap = () => {
     geoRegionIds: plots?.map(({ value }) => value),
   });
 
-  const eudrSupplierLayer = useMemo(() => {
+  const filteredGeometries: typeof plotGeometries.data = useMemo(() => {
     if (!plotGeometries.data || !data) return null;
 
-    return new GeoJsonLayer({
+    const features = plotGeometries.data.features.filter((feature) => {
+      if (Object.values(tableFilters).every((filter) => !filter)) return true;
+
+      if (tableFilters.dfs && data.dfs.indexOf(feature.properties.id) > -1) return true;
+      if (tableFilters.sda && data.sda.indexOf(feature.properties.id) > -1) return true;
+      return false;
+    });
+
+    return {
+      type: 'FeatureCollection',
+      features,
+    };
+  }, [data, plotGeometries.data, tableFilters]);
+
+  const eudrSupplierLayer = useMemo(() => {
+    if (!filteredGeometries?.features || !data) return null;
+
+    return new GeoJsonLayer<(typeof filteredGeometries)['features'][number]>({
       id: 'full-plots-layer',
-      data: plotGeometries.data,
+      // @ts-expect-error will fix this later...
+      data: filteredGeometries,
       // Styles
       filled: true,
       getFillColor: ({ properties }) => {
@@ -132,7 +159,7 @@ const EUDRMap = () => {
       onHover: setHoverInfo,
       opacity: supplierLayer.opacity,
     });
-  }, [plotGeometries.data, data, supplierLayer.active, supplierLayer.opacity]);
+  }, [filteredGeometries, data, supplierLayer.active, supplierLayer.opacity]);
 
   const basemapPlanetLayer = new TileLayer({
     id: 'top-planet-monthly-layer',

client/src/hooks/eudr/index.ts

@@ -2,6 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 
 import { apiService } from 'services/api';
 
+import type { FeatureCollection, Geometry } from 'geojson';
 import type { Supplier as SupplierRow } from '@/containers/analysis-eudr/supplier-list-table/table';
 import type { MaterialTreeItem, OriginRegion, Supplier } from '@/types';
 import type { UseQueryOptions } from '@tanstack/react-query';
@@ -33,15 +34,15 @@ export const useEUDRSuppliers = <T = Supplier[]>(
   );
 };
 
-export const usePlotGeometries = <T = Supplier[]>(
+export const usePlotGeometries = (
   params?: EUDRParams,
-  options: UseQueryOptions<Supplier[], unknown, T> = {},
+  options?: UseQueryOptions<FeatureCollection<Geometry, { id: string }>>,
 ) => {
   return useQuery(
     ['eudr-geo-features-collection', params],
     () =>
       apiService
-        .request<{ geojson }>({
+        .request<{ geojson: FeatureCollection<Geometry, { id: string }> }>({
           method: 'GET',
           url: '/eudr/geo-features/collection',
           params,

client/yarn.lock

@@ -2791,7 +2791,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/geojson@npm:^7946.0.13":
+"@types/geojson@npm:7946.0.14, @types/geojson@npm:^7946.0.13":
   version: 7946.0.14
   resolution: "@types/geojson@npm:7946.0.14"
   checksum: ae511bee6488ae3bd5a3a3347aedb0371e997b14225b8983679284e22fa4ebd88627c6e3ff8b08bf4cc35068cb29310c89427311ffc9322c255615821a922e71
@@ -7892,6 +7892,7 @@ __metadata:
     "@types/chroma-js": 2.1.3
     "@types/d3-format": 3.0.1
     "@types/d3-scale": 4.0.2
+    "@types/geojson": 7946.0.14
     "@types/lodash-es": 4.17.6
     "@types/node": 16.11.6
     "@types/react": 18.2.28