fix extent layer

Vizzuality · Oct 23, 2023 · 176eb3c · 176eb3c
1 parent ef68951
commit 176eb3c
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 12 deletions.
diff --git a/src/containers/datasets/habitat-extent/hooks.tsx b/src/containers/datasets/habitat-extent/hooks.tsx
@@ -23,6 +23,7 @@ import type { UseParamsOptions } from 'types/widget';
 
 import API, { AnalysisAPI } from 'services/api';
 
+import { years } from './constants';
 import type { ExtentData, Indicator, DataResponse } from './types';
 
 const unitOptions = ['km²', 'ha'];
@@ -219,9 +220,10 @@ export function useSource(): SourceProps {
 }
 
 export function useLayers({ year, id }: { year: number; id: LayerProps['id'] }): LayerProps[] {
+  console.log(year);
   return [
     {
-      id,
+      id: `${id}_${year}`,
       type: 'fill',
       source: 'habitat_extent',
       'source-layer': `mng_mjr_${year}`,
@@ -234,7 +236,7 @@ export function useLayers({ year, id }: { year: number; id: LayerProps['id'] }):
       },
     },
     {
-      id: `${id}_line`,
+      id: `${id}_${year}`,
       type: 'line',
       source: 'habitat_extent',
       'source-layer': `mng_mjr_${year}`,

diff --git a/src/containers/datasets/habitat-extent/layer.tsx b/src/containers/datasets/habitat-extent/layer.tsx
@@ -1,15 +1,24 @@
 import { Source, Layer } from 'react-map-gl';
 
+import { habitatExtentSettings } from 'store/widgets/habitat-extent';
+
+import { useRecoilValue } from 'recoil';
+
 import type { LayerProps } from 'types/layers';
 
-import { useLayers, useSource } from './hooks';
+import {} from './hooks';
+import { useLayers, useSource, useMangroveHabitatExtent } from './hooks';
 
 const MangrovesHabitatExtentLayer = ({ beforeId, id }: LayerProps) => {
-  const year = 2020;
+  const year = useRecoilValue(habitatExtentSettings);
+  const { data } = useMangroveHabitatExtent({ year });
+  const years = data?.years?.sort() || [];
+
+  const currentYear = year || years[years.length - 1];
+
   const SOURCE = useSource();
-  const LAYERS = useLayers({ year, id });
+  const LAYERS = useLayers({ year: currentYear, id });
   if (!SOURCE || !LAYERS) return null;
-
   return (
     <Source key={SOURCE.id} {...SOURCE}>
       {LAYERS.map((LAYER) => (

diff --git a/src/containers/widgets/constants.ts b/src/containers/widgets/constants.ts
@@ -40,12 +40,10 @@ const widgets_prod = [
     layersIds: ['allen_coral_reef'],
   },
   {
-    ...(process.env.NEXT_PUBLIC_VERCEL_ENV === 'development' && {
-      name: 'Salt Marsh',
-      slug: 'mangrove_salt_marsh',
-      locationType: ['custom-area', 'wdpa', 'country', 'worldwide'],
-      categoryIds: ['contextual_layers'],
-    }),
+    name: 'Salt Marsh',
+    slug: 'mangrove_salt_marsh',
+    locationType: ['custom-area', 'wdpa', 'country', 'worldwide'],
+    categoryIds: ['contextual_layers'],
   },
   {
     name: 'Tidal flats',

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -17,6 +17,7 @@ body {
 /* width */
 ::-webkit-scrollbar {
   width: 3px !important;
+  scrollbar-width: 3px !important;
 }
 
 
@@ -63,11 +64,16 @@ body {
     display: none;
   }
 
+
   .no-scrollbar {
     -ms-overflow-style: none;
     scrollbar-width: none;
   }
 
+  ::-webkit-scrollbar {
+    width: 0.5rem !important;
+  }
+
   .scroll-thin::-webkit-scrollbar {
     width: 0.5rem;
   }
@@ -170,3 +176,9 @@ body {
     margin: 0 auto;
   }
 }
+
+  /* Firefox */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--secondary) var(--primary);
+  }