disclaimer no layers

Vizzuality · Apr 23, 2024 · 94fcfbc · 94fcfbc
1 parent a801599
commit 94fcfbc
Show file tree

Hide file tree

Showing 21 changed files with 135 additions and 85 deletions.
diff --git a/src/components/widget-controls/info/index.tsx b/src/components/widget-controls/info/index.tsx
@@ -8,8 +8,6 @@ import INFO_SVG from 'svgs/ui/info.svg?sprite';
 const Info = ({ id, content }) => {
   const Info = INFO[id];
 
-  console.log(Info);
-
   if (!Info && !content) return null;
   return (
     <div className="flex h-[30px] w-[30px] flex-col items-center justify-center rounded-full bg-white text-brand-800">

diff --git a/src/containers/datasets/alerts/hooks.tsx b/src/containers/datasets/alerts/hooks.tsx
@@ -208,7 +208,7 @@ export function useAlerts<T>(
 
   return useMemo(() => {
     const alertsTotal = getTotal(dataFiltered);
-    const dataLimitOverflow = dataFiltered.length > 16;
+    const dataLimitOverflow = dataFiltered.length > 12;
 
     const config = {
       data: chartData,
@@ -234,7 +234,7 @@ export function useAlerts<T>(
       xAxis: {
         tick: TickSmall,
         ...(dataLimitOverflow && { ticks: Array.from(new Set(chartData.map((d) => d.year))) }),
-        interval: dataLimitOverflow ? 'preserveStartEnd' : 0,
+        interval: dataLimitOverflow ? 0 : 'preserveStart',
         type: 'category',
       },
       yAxis: {

diff --git a/src/containers/datasets/contextual-layers/protected-areas/layer.tsx b/src/containers/datasets/contextual-layers/protected-areas/layer.tsx
@@ -24,7 +24,7 @@ const MangrovesProtectedAreasLayer = ({ beforeId, id, onAdd, onRemove }: LayerPr
     const ids = LAYERS.map((layer) => layer.id);
     onAdd(ids);
     return () => onRemove(ids);
-  }, [onAdd, onRemove]);
+  }, [onAdd, onRemove, LAYERS]);
 
   if (!SOURCE || !LAYERS) return null;
   return (

diff --git a/src/containers/datasets/customize-widgets-deck/widget.tsx b/src/containers/datasets/customize-widgets-deck/widget.tsx
@@ -63,9 +63,7 @@ const CustomizeWidgetsDeck = () => {
                   <h2 className="font-black/85 text-3xl font-light leading-10">
                     Widgets deck settings
                   </h2>
-
                   <Category />
-
                   <WidgetsMenu />
                 </div>
                 <DialogClose />

diff --git a/src/containers/datasets/index.tsx b/src/containers/datasets/index.tsx
@@ -131,7 +131,7 @@ export const WIDGETS: WidgetsCollection = {
   mangrove_international_status: InternationalStatusWidget,
   mangrove_carbon_market_potential: CarbonMarketPotentialWidget,
   mangrove_emissions_mitigation: EmissionsMitigationWidget,
-  mangrove_restoration_sites: RestorationSitesWidget,
+  mangrove_rest_sites: RestorationSitesWidget,
   mangrove_restoration: RestorationWidget,
   mangrove_national_dashboard: NationalDashboardWidget,
   mangrove_flood_protection: FloodProtectionWidget,
@@ -164,7 +164,7 @@ export const LAYERS = {
   // contextual layers
   'country-boundaries': CountryBoundariesLayer,
   mangrove_protected_areas: ProtectedAreasLayer,
-  mangrove_restoration_sites: RestorationSitesLayer,
+  mangrove_rest_sites: RestorationSitesLayer,
   mangrove_coastal_protection_area: FloodProtectionAreaLayer,
   mangrove_coastal_protection_population: FloodProtectionPopulationLayer,
   mangrove_coastal_protection_stock: FloodProtectionStockLayer,
@@ -200,7 +200,7 @@ export const MAP_LEGENDS = {
   mangrove_coastal_protection_area: FloodProtectionAreaMapLegend,
   mangrove_coastal_protection_population: FloodProtectionPopulationMapLegend,
   mangrove_coastal_protection_stock: FloodProtectionStockMapLegend,
-  mangrove_restoration_sites: RestorationSitesMapLegend,
+  mangrove_rest_sites: RestorationSitesMapLegend,
   mangrove_iucn_ecoregion: IUCNEcoregionsMapLegend,
   mangrove_national_dashboard_layer: NationalDashboardMapLegend,
 };
@@ -225,7 +225,7 @@ export const INFO = {
   mangrove_emissions_mitigation: EmissionsMitigationInfo,
   mangrove_carbon_market_potential: CarbonMarketPotentialInfo,
   mangrove_international_status: InternationalStatusInfo,
-  mangrove_restoration_sites: RestorationSitesInfo,
+  mangrove_rest_sites: RestorationSitesInfo,
   mangrove_national_dashboard: NationalDashboardInfo,
   mangrove_flood_protection: FloodProtectionInfo,
   mangrove_iucn_ecoregion: IUCNEcoregionInfo,

diff --git a/src/containers/datasets/restoration-sites/hooks.tsx b/src/containers/datasets/restoration-sites/hooks.tsx
@@ -101,6 +101,7 @@ export function useSource(): SourceProps {
     .map(({ site_centroid, landscape_name, organizations, site_name }) => {
       if (site_centroid) {
         return {
+          type: 'Feature',
           geometry: JSON.parse(site_centroid),
           properties: {
             landscape_name,
@@ -111,8 +112,9 @@ export function useSource(): SourceProps {
       }
     });
 
+  if (!restorationSiteFeatures) return null;
   return {
-    id: 'restoration-sites',
+    id: 'mangrove_rest_sites',
     type: 'geojson',
     data: {
       type: 'FeatureCollection',
@@ -133,8 +135,10 @@ export function useLayer({
   return [
     {
       id: `${id}-clusters`,
+      metadata: {
+        position: 'top',
+      },
       type: 'circle',
-      source: 'restoration-sites',
       filter: ['has', 'point_count'],
       paint: {
         'circle-color': '#CC61B0',
@@ -150,8 +154,10 @@ export function useLayer({
     },
     {
       id: `${id}-clusters-points`,
+      metadata: {
+        position: 'top',
+      },
       type: 'circle',
-      source: 'restoration-sites',
       filter: ['!', ['has', 'point_count']],
       paint: {
         'circle-color': '#CC61B0',
@@ -165,10 +171,30 @@ export function useLayer({
         visibility,
       },
     },
+    {
+      id: `${id}-cluster-text`,
+      metadata: {
+        position: 'top',
+      },
+      type: 'symbol',
+      filter: ['!', ['has', 'point_count']],
+      layout: {
+        'text-field': ['get', 'site_name'],
+        'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
+        'text-size': 12,
+        visibility,
+      },
+      paint: {
+        'text-color': '#ffffff',
+        'text-opacity': opacity,
+      },
+    },
     {
       id: `${id}-cluster-count`,
+      metadata: {
+        position: 'top',
+      },
       type: 'symbol',
-      source: 'restoration-sites',
       filter: ['has', 'point_count'],
       layout: {
         'text-field': ['get', 'point_count_abbreviated'],

diff --git a/src/containers/datasets/restoration-sites/layer.tsx b/src/containers/datasets/restoration-sites/layer.tsx
@@ -8,9 +8,9 @@ import type { LayerProps } from 'types/layers';
 
 import { useLayer, useSource } from './hooks';
 
-const MangrovesLayer = ({ beforeId, id }: LayerProps) => {
+const MangrovesRestorationSitesLayer = ({ beforeId, id }: LayerProps) => {
   const activeLayers = useRecoilValue(activeLayersAtom);
-  const activeLayer = activeLayers.find((l) => l.id === 'mangrove_restoration_sites');
+  const activeLayer = activeLayers.find((l) => l.id === 'mangrove_rest_sites');
 
   const SOURCE = useSource();
   const LAYERS = useLayer({
@@ -29,4 +29,4 @@ const MangrovesLayer = ({ beforeId, id }: LayerProps) => {
   );
 };
 
-export default MangrovesLayer;
+export default MangrovesRestorationSitesLayer;
diff --git a/src/containers/datasets/restoration-sites/map-legend.tsx b/src/containers/datasets/restoration-sites/map-legend.tsx
@@ -1,10 +1,8 @@
-const RestorationSitesMapLegend = () => {
-  return (
-    <div className="flex items-center space-x-2">
-      <div className="my-0.5 h-4 w-2 rounded-md bg-[#CC61B0] text-sm" />
-      <span className="text-sm text-black/60">Restoration sites</span>
-    </div>
-  );
-};
+const RestorationSitesMapLegend = () => (
+  <div className="flex items-center space-x-2">
+    <div className="my-0.5 h-4 w-2 rounded-md bg-[#CC61B0] text-sm" />
+    <span className="text-sm text-black/60">Restoration sites</span>
+  </div>
+);
 
 export default RestorationSitesMapLegend;
diff --git a/src/containers/datasets/restoration-sites/widget.tsx b/src/containers/datasets/restoration-sites/widget.tsx
@@ -68,18 +68,24 @@ const RestorationSitesWidget = () => {
 
   if (!filtersData) return null;
 
-  if (isFetched && data?.data.length === 0) return <NoData />;
-
   return (
     <div className={WIDGET_CARD_WRAPPER_STYLE}>
       <Loading visible={isFetching} iconClassName="flex w-10 h-10 m-auto my-20" />
       {isFetched && data && (
         <div className="relative space-y-8">
-          <p className={WIDGET_SENTENCE_STYLE}>
-            There are <span className="font-bold">{data.data?.length}</span> restoration sites in{' '}
-            {data.location}
-            {!areFiltersEmpty && ' that match your criteria'}.
-          </p>
+          {data.data?.length > 0 && (
+            <p className={WIDGET_SENTENCE_STYLE}>
+              There are <span className="font-bold">{data.data?.length}</span> restoration sites in{' '}
+              {data.location}
+              {!areFiltersEmpty && ' that match your criteria'}.
+            </p>
+          )}
+          {data.data?.length === 0 && (
+            <p>
+              Sorry there are no results for this selection of filters for this area. Try another
+              one
+            </p>
+          )}
           <Dialog open={open} onOpenChange={setOpen}>
             <div
               className={cn({

diff --git a/src/containers/datasets/restoration/map-legend.tsx b/src/containers/datasets/restoration/map-legend.tsx
@@ -1,20 +1,18 @@
-const RestorationMapLegend = () => {
-  return (
-    <div className="w-[280px]">
-      <div className="flex justify-between text-xs text-black/60">
-        <p>0%</p>
-        <p>100%</p>
-      </div>
-
-      <div
-        className="h-3 w-full border"
-        style={{
-          background:
-            'linear-gradient(90deg, #F9DDDA 0%, #FFADAD 25.52%, #CE78B3 50.52%, #8478CE 78.13%, #224294 100%)',
-        }}
-      />
+const RestorationMapLegend = () => (
+  <div className="w-[280px]">
+    <div className="flex justify-between text-xs text-black/60">
+      <p>0%</p>
+      <p>100%</p>
     </div>
-  );
-};
+
+    <div
+      className="h-3 w-full border"
+      style={{
+        background:
+          'linear-gradient(90deg, #F9DDDA 0%, #FFADAD 25.52%, #CE78B3 50.52%, #8478CE 78.13%, #224294 100%)',
+      }}
+    />
+  </div>
+);
 
 export default RestorationMapLegend;
diff --git a/src/containers/layers/constants.tsx b/src/containers/layers/constants.tsx
@@ -34,8 +34,8 @@ export const LAYERS = [
     id: 'mangrove_biomass',
   },
   {
-    name: 'Mangrove Restoration Sites',
-    id: 'mangrove_restoration_sites',
+    name: 'Restoration Sites',
+    id: 'mangrove_rest_sites',
   },
   {
     name: 'Mangrove restoration',
@@ -120,7 +120,7 @@ export const LAYERS_ORDER = [
   'mangrove_height',
   'mangrove_biomass',
   'mangrove_protection',
-  'mangrove_restoration_sites',
+  'mangrove_rest_sites',
   'mangrove_species_distribution',
   'mangrove_species_location',
   'mangrove_alerts',

diff --git a/src/containers/location-widget/index.tsx b/src/containers/location-widget/index.tsx
@@ -85,7 +85,7 @@ const LocationWidget = () => {
 
   return (
     <>
-      <div className="relative flex h-52 flex-col rounded-4xl bg-brand-600 bg-[url('/images/location-bg.svg')] bg-cover bg-center text-center shadow-widget print:hidden">
+      <div className="relative flex h-52 flex-col rounded-4xl bg-brand-600 bg-[url('/images/location-bg.svg')] bg-cover bg-center text-center shadow-control print:hidden">
         <Dialog open={isOpen}>
           <DialogTrigger asChild>
             <button onClick={handleOnClickTitle} disabled={isGuideActive || !locationName}>

diff --git a/src/containers/map/layer-manager/index.tsx b/src/containers/map/layer-manager/index.tsx
@@ -54,6 +54,14 @@ const LayerManagerContainer = () => {
 
   return (
     <>
+      {
+        <CountryBoundariesLayer
+          id="country-boundaries-layer"
+          beforeId="water"
+          onAdd={handleAdd}
+          onRemove={handleRemove}
+        />
+      }
       {LAYERS_FILTERED.map((layer, i) => {
         const beforeId = i === 0 ? 'custom-layers' : `${LAYERS_FILTERED[i - 1]}-bg`;
 
@@ -67,6 +75,7 @@ const LayerManagerContainer = () => {
           />
         );
       })}
+
       {LAYERS_FILTERED.map((layer, i) => {
         const beforeId = i === 0 ? 'custom-layers' : `${LAYERS_FILTERED[i - 1]}-bg`;
 
@@ -96,15 +105,6 @@ const LayerManagerContainer = () => {
           />
         );
       })}
-
-      {
-        <CountryBoundariesLayer
-          id="country-boundaries-layer"
-          beforeId="Country"
-          onAdd={handleAdd}
-          onRemove={handleRemove}
-        />
-      }
     </>
   );
 };