Merge pull request #282 from Vizzuality/feature/layer-preview-wrap-up

[SKY30-384] layer preview in national table
Vizzuality · Jul 18, 2024 · ce2d9a9 · ce2d9a9
2 parents f7ba806 + 4342941
commit ce2d9a9
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 20 deletions.
diff --git a/frontend/src/components/layer-preview/index.tsx b/frontend/src/components/layer-preview/index.tsx
@@ -1,32 +1,80 @@
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 
-const MAPBOX_STYLES_ID = 'skytruth/clxk42ahk00as01qq1h4295jj';
+const configs = {
+  mpatlas: {
+    layerId: 'mpa-intermediate-simp',
+    filter: (wdpaId) => `['==', ['get', 'wdpa_id'], ${wdpaId}]`,
+    styles: 'skytruth/clxk6ci5q00c401qr5jtsgvue',
+  },
+  'protected-planet': {
+    layerId: 'mpaatlas-intermediate',
+    filter: (wdpaId) => `['==', ['get', 'WDPAID'], ${wdpaId}]`,
+    styles: 'skytruth/clxk42ahk00as01qq1h4295jj',
+  },
+};
+
+const PREVIEW_DIMENSIONS = '125x125';
 
 const LayerPreview: React.FC<{
   wdpaId: string;
   bounds: [number, number, number, number];
-}> = ({ wdpaId, bounds }) => {
-  const { data } = useQuery(['layer-preview', wdpaId], {
+  dataSource: 'mpatlas' | 'protected-planet';
+}> = ({ wdpaId, bounds, dataSource }) => {
+  const sourceConfig = configs[dataSource];
+
+  if (!sourceConfig) {
+    throw new Error(`Invalid dataSource: ${dataSource}`);
+  }
+
+  const point = [bounds[0] + (bounds[2] - bounds[0]), bounds[1] + (bounds[3] - bounds[1])];
+
+  const { data: dataBounds, isError } = useQuery(['layer-preview-bounds', wdpaId], {
     queryFn: async () => {
       return axios
-        .get(`https://api.mapbox.com/styles/v1/${MAPBOX_STYLES_ID}/static/${bounds}/75x75`, {
-          responseType: 'blob',
-          params: {
-            setfilter: `['==', ['get', 'WDPAID'], ${wdpaId}]`,
-            layer_id: 'mpa-intermediate-simp', // ! update this
-            access_token: process.env.NEXT_PUBLIC_MAPBOX_API_TOKEN,
-            attribution: false,
-            logo: false,
-            // padding: 'auto',
-          },
-        })
+        .get(
+          `https://api.mapbox.com/styles/v1/${sourceConfig.styles}/static/${bounds}/${PREVIEW_DIMENSIONS}`,
+          {
+            responseType: 'blob',
+            params: {
+              setfilter: sourceConfig.filter(wdpaId),
+              layer_id: sourceConfig.layerId,
+              access_token: process.env.NEXT_PUBLIC_MAPBOX_API_TOKEN,
+              attribution: false,
+              logo: false,
+            },
+          }
+        )
         .then((response) => response.data);
     },
     enabled: !!wdpaId,
+    retry: false,
+    refetchOnWindowFocus: false,
+  });
+
+  const { data: dataPoint } = useQuery(['layer-preview-point', wdpaId], {
+    queryFn: async () => {
+      return axios
+        .get(
+          `https://api.mapbox.com/styles/v1/${sourceConfig.styles}/static/${point[0]},${point[1]},10/${PREVIEW_DIMENSIONS}`,
+          {
+            responseType: 'blob',
+            params: {
+              setfilter: sourceConfig.filter(wdpaId),
+              layer_id: sourceConfig.layerId,
+              access_token: process.env.NEXT_PUBLIC_MAPBOX_API_TOKEN,
+              attribution: false,
+              logo: false,
+            },
+          }
+        )
+        .then((response) => response.data);
+    },
+    enabled: isError,
+    refetchOnWindowFocus: false,
   });
 
-  const srcImage = data ? URL.createObjectURL(data) : null;
+  const srcImage = dataBounds || dataPoint ? URL.createObjectURL(dataPoint || dataBounds) : null;
 
   return (
     <div

diff --git a/frontend/src/containers/map/content/details/tables/national-highseas/index.tsx b/frontend/src/containers/map/content/details/tables/national-highseas/index.tsx
@@ -84,6 +84,9 @@ const NationalHighseasTable: FCWithMessages = () => {
         protection_status: {
           fields: ['slug', 'name'],
         },
+        data_source: {
+          fields: ['slug'],
+        },
         children: '*',
       },
       'pagination[limit]': -1,
@@ -101,7 +104,7 @@ const NationalHighseasTable: FCWithMessages = () => {
       const protectionStatus = mpa?.protection_status?.data?.attributes;
       const establishmentStage = mpa?.mpaa_establishment_stage?.data?.attributes;
       const mpaaProtectionLevel = mpa?.mpaa_protection_level?.data?.attributes;
-      const locationCoverage = mpa?.location?.data?.attributes;
+      const dataSource = mpa?.data_source?.data?.attributes?.slug;
 
       const coveragePercentage = (mpa.area / locationsQuery.data?.totalMarineArea) * 100;
 
@@ -114,7 +117,8 @@ const NationalHighseasTable: FCWithMessages = () => {
         area: mpa?.area,
         map: {
           wdpaId: mpa?.wdpaid,
-          bounds: locationCoverage?.bounds,
+          bounds: mpa?.bbox,
+          dataSource,
         },
       };
     };

diff --git a/frontend/src/containers/map/content/details/tables/national-highseas/useColumns.tsx b/frontend/src/containers/map/content/details/tables/national-highseas/useColumns.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { ComponentProps, useMemo } from 'react';
 
 import { ColumnDef } from '@tanstack/react-table';
 import { useLocale, useTranslations } from 'next-intl';
@@ -24,6 +24,7 @@ export type NationalHighseasTableColumns = {
   map: {
     wdpaId: string;
     bounds: [number, number, number, number];
+    dataSource: ComponentProps<typeof LayerPreview>['dataSource'];
   };
 };
 
@@ -72,11 +73,17 @@ const useColumns = ({ filters, onFiltersChange }: UseColumnsProps) => {
         accessorKey: 'map',
         header: null,
         cell: ({ row }) => {
-          const { bounds, wdpaId } = row.original?.map || {};
+          const { bounds, wdpaId, dataSource } = row.original?.map || {};
 
           return (
             <div className="relative -mr-0.5 h-[calc(100%+4px)] w-12 border-l border-r border-t border-b border-black">
-              <LayerPreview bounds={bounds} wdpaId={wdpaId} />
+              <LayerPreview
+                {...{
+                  wdpaId,
+                  bounds,
+                  dataSource,
+                }}
+              />
             </div>
           );
         },