Nat dash layers

src/components/contextual/card.tsx

@@ -14,7 +14,6 @@ import type { BasemapId } from 'containers/datasets/contextual-layers/basemaps';
 
 import { Checkbox, CheckboxIndicator } from 'components/checkbox';
 import Icon from 'components/icon';
-import DateSelect from 'components/planet-date-select';
 import Info from 'components/widget-controls/info';
 import { WIDGET_CARD_WRAPPER_STYLE } from 'styles/widgets';
 import type { ContextualBasemapsId, MosaicId, WidgetSlugType } from 'types/widget';
@@ -48,14 +47,7 @@ type CardBasemapContextualProps = {
   hasDropdown?: boolean;
 };
 
-const CardBasemapContextual = ({
-  id,
-  mosaic_id,
-  type,
-  name,
-  description,
-  hasDropdown,
-}: CardBasemapContextualProps) => {
+const CardBasemapContextual = ({ id, type, name, description }: CardBasemapContextualProps) => {
   const [basemapStored, setBasemap] = useRecoilState(basemapAtom);
   const [basemapContextualSelected, setBasemapContextual] = useRecoilState(basemapContextualAtom);
 
@@ -120,11 +112,6 @@ const CardBasemapContextual = ({
           {description && <p>{description}</p>}
         </div>
       </div>
-      {/* {isActive && hasDropdown && (
-        <div className="pb-4">
-          <DateSelect mosaic_id={mosaic_id} id={id} />
-        </div>
-      )} */}
     </div>
   );
 };

src/components/contextual/contextual-basemaps.tsx

@@ -1,76 +1,77 @@
 import { useCallback, useState } from 'react';
+import type { SetStateAction } from 'react';
 
 import cn from 'lib/classnames';
 
 import { activeLayersAtom } from 'store/layers';
 
-import { PiCircleFill } from 'react-icons/pi';
 import { useRecoilState } from 'recoil';
 
 import { CONTEXTUAL_LAYERS_PLANET_SERIES_ATTRIBUTES } from 'containers/datasets/contextual-layers/constants';
 
-import { Checkbox, CheckboxIndicator } from 'components/checkbox';
 import DateSelect from 'components/planet-date-select';
+import RadioGroup from 'components/radio-group';
+import RadioGroupItem from 'components/radio-group/radio-group-item';
 import type { ActiveLayers } from 'types/layers';
 import type { ContextualBasemapsId } from 'types/widget';
 
 const BasemapsMapSettings = () => {
   const [activeLayers, setActiveLayers] = useRecoilState(activeLayersAtom);
-  const defaultActive = activeLayers.find((layer) => layer.id.includes('planet'))?.id || null;
+  const defaultActive = activeLayers.find((layer) => layer.id.includes('planet'))?.id || 'no-layer';
   const [isActive, setIsActive] = useState(defaultActive);
 
   const handleClick = useCallback(
     (id) => {
-      if (isActive === id) {
-        setIsActive(null);
-      } else setIsActive(id);
-
+      setIsActive(id);
+      const noPlanetLayers = activeLayers.filter((w) => !w.id.includes('planet_medres'));
       const layersUpdate =
-        !!activeLayers.find((layer) => layer.id === id) && isActive === null
-          ? activeLayers.filter((w) => w.id !== id)
+        id === 'no-layer'
+          ? noPlanetLayers
           : ([
               {
                 id: id as ContextualBasemapsId,
                 opacity: '1',
                 visibility: 'visible',
               },
-              ...activeLayers,
+              ...noPlanetLayers,
             ] as ActiveLayers[]);
-
       setActiveLayers(layersUpdate);
     },
-    [activeLayers, setActiveLayers, isActive]
+    [activeLayers, setActiveLayers]
   );
 
   return (
-    <div className="relative flex flex-col pb-4 font-light text-black/85">
-      <>
+    <div className="relative flex flex-col text-sm text-black/85">
+      <RadioGroup onValueChange={handleClick}>
+        <div className="flex space-x-4">
+          <RadioGroupItem
+            option={{ value: 'no-layer', label: 'No layer' }}
+            data-testid='"no-layer"'
+          />
+          <label
+            className={cn({
+              'font-semibold text-brand-800': isActive === 'no-layer',
+            })}
+            htmlFor="No layer"
+          >
+            No layer
+          </label>
+        </div>
+
         {CONTEXTUAL_LAYERS_PLANET_SERIES_ATTRIBUTES.map(({ id, name, mosaic_id }) => {
           return (
-            <div key={id} className="ml-0.5 flex flex-col">
-              <div className="flex items-center space-x-4 py-1 font-light text-black/85">
-                <Checkbox
-                  id={id}
+            <div key={id} className="space-y-2">
+              <div className="flex space-x-4">
+                <RadioGroupItem option={{ value: id, label: name }} data-testid={id} />
+                <label
                   className={cn({
-                    'flex h-3 w-3 shrink-0 items-center justify-center rounded-full border border-black/85':
-                      true,
-                    'border-4 border-brand-800': id === isActive,
+                    'font-semibold text-brand-800': isActive === id,
                   })}
-                  onCheckedChange={() => {
-                    handleClick(id);
-                  }}
-                  data-testid={id}
-                  checked={!!activeLayers.find((layer) => layer.id === id) && isActive === id}
+                  htmlFor={id}
                 >
-                  <CheckboxIndicator>
-                    <PiCircleFill className="h-1.5 w-1.5 rounded-full fill-white" />
-                  </CheckboxIndicator>
-                </Checkbox>
-                <label className="font-sm m-0 text-sm font-semibold text-brand-800" htmlFor={id}>
                   {name}
                 </label>
               </div>
-
               {isActive === id && (
                 <div className="ml-6">
                   <DateSelect
@@ -84,7 +85,7 @@ const BasemapsMapSettings = () => {
             </div>
           );
         })}
-      </>
+      </RadioGroup>
     </div>
   );
 };

src/components/highlighted-places/index.tsx

@@ -22,7 +22,7 @@ const HighlightedPlaces = ({ onSelectLocation }: { onSelectLocation: () => void
 
   const {
     data: { location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   const isHighlightedPlace = Object.values(HIGHLIGHTED_PLACES).includes(location_id);
 

src/components/radio-group/radio-group-item/index.tsx

@@ -17,12 +17,9 @@ const RadioGroupItem = ({ option, className }: { option: RadioOption; className?
       id={option.value}
     >
       <RadioGroup.Indicator className="flex items-center justify-center">
-        <CgRadioCheck className="h-2.5 w-2.5 border-red-500 fill-current text-current" />
+        <CgRadioCheck className="h-2.5 w-2.5 text-brand-800" />
       </RadioGroup.Indicator>
     </RadioGroup.Item>
-    <label className="font-sm m-0 text-sm font-semibold text-brand-800" htmlFor={option.value}>
-      {option.label}
-    </label>
   </div>
 );
 

src/containers/datasets/alerts/hooks.tsx

@@ -139,7 +139,7 @@ export function useAlerts<T>(
   const id = queryParams?.[1];
   const {
     data: { location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
   const { enabled: isAnalysisRunning } = useRecoilValue(analysisAtom);
 
   const fetchAlerts = () =>
@@ -438,7 +438,7 @@ export function useSources(): SourceProps[] {
   const id = queryParams?.[1];
   const {
     data: { location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   return [
     {

src/containers/datasets/biomass/hooks.tsx

@@ -56,7 +56,7 @@ export function useMangroveBiomass(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   const geojson = customGeojson || uploadedGeojson;
 

src/containers/datasets/blue-carbon/hooks.tsx

@@ -53,7 +53,7 @@ export function useMangroveBlueCarbon(
 
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
   const { customGeojson } = useRecoilValue(drawingToolAtom);
   const { uploadedGeojson } = useRecoilValue(drawingUploadToolAtom);
   const { enabled: isAnalysisEnabled } = useRecoilValue(analysisAtom);

src/containers/datasets/carbon-market-potential/hooks.tsx

@@ -59,7 +59,7 @@ export function useCarbonMarketPotential(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   const { units: unit, label, ...rest } = params;
   const unitLabel = units.find((u) => u.value === unit)?.label;

src/containers/datasets/drivers-change/hooks.tsx

@@ -39,7 +39,7 @@ export function useMangroveDriversChange(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   const fetchMangroveDriversChange = () =>
     API.request({

src/containers/datasets/emissions-mitigation/hooks.tsx

@@ -121,7 +121,7 @@ export function useMangroveEmissionsMitigation(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
   const { filteredIndicators, ...rest } = params;
 
   const fetchMangroveEmissionsMitigation = () =>

src/containers/datasets/fisheries/hooks.tsx

@@ -61,7 +61,7 @@ export function useMangroveFisheries(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   const fetchMangroveFisheries = () =>
     API.request({

src/containers/datasets/flood-protection/coastal-protection/index.tsx

@@ -15,7 +15,7 @@ const CoastalProtection = () => {
   const id = queryParams?.[1];
   const {
     data: { name: location },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
   return (
     <div
       className={cn({

src/containers/datasets/flood-protection/hooks.tsx

@@ -63,7 +63,7 @@ export function useMangrovesFloodProtection(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   const selectedPeriod = useMemo(() => period || 'annual', [period]);
   const getBars = useCallback(

src/containers/datasets/habitat-extent/hooks.tsx

@@ -43,7 +43,7 @@ export function useMangroveHabitatExtent(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
   const { enabled: isAnalysisEnabled } = useRecoilValue(analysisAtom);
   const { customGeojson } = useRecoilValue(drawingToolAtom);
   const { uploadedGeojson } = useRecoilValue(drawingUploadToolAtom);

src/containers/datasets/height/hooks.tsx

@@ -86,7 +86,7 @@ export function useMangroveHeight(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
   const { customGeojson } = useRecoilValue(drawingToolAtom);
   const { uploadedGeojson } = useRecoilValue(drawingUploadToolAtom);
   const { enabled: isAnalysisEnabled } = useRecoilValue(analysisAtom);

src/containers/datasets/international-status/climate-watch/hooks.tsx

@@ -25,7 +25,7 @@ export function useClimateWatchNDCS(
   const id = queryParams?.[1];
   const {
     data: { iso },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   const fetchClimateWatchNDCS = () =>
     ClimateWatchAPI.request({
@@ -71,7 +71,7 @@ export function useClimateWatchNDCSCountriesDocs(
   const id = queryParams?.[1];
   const {
     data: { iso },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   const fetchClimateWatchNDCS = () =>
     ClimateWatchAPI.request({

src/containers/datasets/international-status/frel-ipcc/hooks.tsx

@@ -27,7 +27,7 @@ export function useMangroveInternationalStatus(
   const id = queryParams?.[1];
   const {
     data: { name: location, id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+  } = useLocation(id, locationType);
 
   const fetchMangroveInternationalStatus = () =>
     API.request({

src/containers/datasets/iucn-ecoregion/hooks.tsx

@@ -139,7 +139,7 @@ export function useMangroveEcoregions(
 
 export function useSource(): SourceProps {
   return {
-    id: 'mangrove-iucn-ecoregion-layer',
+    id: 'mangrove-iucn-ecoregion',
     type: 'vector',
     url: 'mapbox://globalmangrovewatch.20gft2fx',
   };

src/containers/datasets/locations/hooks.tsx

@@ -40,8 +40,8 @@ export function useLocations<T = DataResponse>(
 }
 
 export function useLocation(
-  locationType: LocationTypes,
   id: Location['location_id'],
+  locationType?: LocationTypes,
   queryOptions: UseQueryOptions<{ data: DataResponse['data'][0] }, Error, Location> = {}
 ) {
   const _id = ['wdpa', 'country'].includes(locationType) ? id : 'worldwide';

src/containers/datasets/national-dashboard/hooks.tsx

@@ -28,8 +28,8 @@ export function useNationalDashboard(
   const locationType = queryParams?.[0] as LocationTypes;
   const id = queryParams?.[1];
   const {
-    data: { id: currentLocation, location_id },
-  } = useLocation(locationType, id);
+    data: { id: currentLocation, location_id, iso },
+  } = useLocation(id, locationType);
 
   const fetchMangroveNationalDashboard = () =>
     API.request({
@@ -44,7 +44,7 @@ export function useNationalDashboard(
   return useQuery(['national_dashboard', params, location_id], fetchMangroveNationalDashboard, {
     select: (data) => ({
       ...data,
-      location: currentLocation,
+      locationIso: iso,
     }),
     ...queryOptions,
   });
@@ -74,12 +74,13 @@ export function useLayers({
     query: { params: queryParams },
   } = useRouter();
   const locationType = queryParams?.[0] as LocationTypes;
-  const locationId = queryParams?.[1];
+  const location = queryParams?.[1];
+
   const {
-    data: { id: currentLocationId },
-  } = useLocation(locationType, locationId);
+    data: { iso },
+  } = useLocation(location, locationType);
 
-  if (!settings || settings.locationId !== currentLocationId) return null;
+  if (!settings || settings.location !== iso) return null;
 
   return {
     id,