diff --git a/client/package.json b/client/package.json index 2d8cdffcf..54e340648 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/containers/analysis-eudr/map/component.tsx b/client/src/containers/analysis-eudr/map/component.tsx index 68543fd11..31252b076 100644 --- a/client/src/containers/analysis-eudr/map/component.tsx +++ b/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(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', diff --git a/client/src/hooks/eudr/index.ts b/client/src/hooks/eudr/index.ts index 99b0ec8ab..5b5c11746 100644 --- a/client/src/hooks/eudr/index.ts +++ b/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 = ( ); }; -export const usePlotGeometries = ( +export const usePlotGeometries = ( params?: EUDRParams, - options: UseQueryOptions = {}, + options?: UseQueryOptions>, ) => { return useQuery( ['eudr-geo-features-collection', params], () => apiService - .request<{ geojson }>({ + .request<{ geojson: FeatureCollection }>({ method: 'GET', url: '/eudr/geo-features/collection', params, diff --git a/client/yarn.lock b/client/yarn.lock index ed158db3e..5c54aaf6c 100644 --- a/client/yarn.lock +++ b/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