Merge pull request #192 from Vizzuality/SKY30-258-layers-in-the-legen…

…d-should-be-open-by-default

[SKY30-258] Legend items open by default

frontend/src/components/ui/collapsible.tsx

@@ -1,9 +1,28 @@
+import * as React from 'react';
+
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 
+import { cn } from '@/lib/classnames';
+
 const Collapsible = CollapsiblePrimitive.Root;
 
 const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+const CollapsibleContent = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,
+  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>
+>(({ className, children, ...props }, ref) => (
+  <CollapsiblePrimitive.CollapsibleContent
+    ref={ref}
+    className={cn(
+      'overflow-y-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down',
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </CollapsiblePrimitive.CollapsibleContent>
+));
+CollapsibleContent.displayName = CollapsiblePrimitive.Content.displayName;
 
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };

frontend/src/containers/map/content/map/layers-toolbox/layers-list/index.tsx

@@ -20,7 +20,7 @@ const TABS_ICONS_CLASSES = 'w-5 h-5 -translate-y-[2px]';
 
 const LayersDropdown = (): JSX.Element => {
   const [activeLayers, setMapLayers] = useSyncMapLayers();
-  const [, setLayerSettings] = useSyncMapLayerSettings();
+  const [layerSettings, setLayerSettings] = useSyncMapLayerSettings();
   const [{ labels }, setMapSettings] = useSyncMapSettings();
 
   const layersQuery = useGetLayers(
@@ -45,15 +45,27 @@ const LayersDropdown = (): JSX.Element => {
           : activeLayers.filter((_layerId) => _layerId !== Number(layerId))
       );
 
+      // If we don't have layerSettings entries, the view is in its default state; we wish to
+      // show all legend accordion items expanded by default.
+      const initialSettings = (() => {
+        const layerSettingsKeys = Object.keys(layerSettings);
+        if (layerSettingsKeys.length) return {};
+        return Object.assign(
+          {},
+          ...activeLayers.map((layerId) => ({ [layerId]: { expanded: true } }))
+        );
+      })();
+
       setLayerSettings((prev) => ({
+        ...initialSettings,
         ...prev,
         [layerId]: {
           ...prev[layerId],
           expanded: true,
         },
       }));
     },
-    [activeLayers, setLayerSettings, setMapLayers]
+    [activeLayers, layerSettings, setLayerSettings, setMapLayers]
   );
 
   const handleLabelsChange = useCallback(
@@ -71,8 +83,10 @@ const LayersDropdown = (): JSX.Element => {
       <Collapsible defaultOpen={Boolean(activeLayers.length)}>
         <CollapsibleTrigger className={COLLAPSIBLE_TRIGGER_CLASSES}>
           <span>Data Layers</span>
-          <LuChevronDown className={`hidden group-data-[state=open]:block ${TABS_ICONS_CLASSES}`} />
-          <LuChevronUp className={`hidden group-data-[state=closed]:block ${TABS_ICONS_CLASSES}`} />
+          <LuChevronDown
+            className={`hidden group-data-[state=closed]:block ${TABS_ICONS_CLASSES}`}
+          />
+          <LuChevronUp className={`hidden group-data-[state=open]:block ${TABS_ICONS_CLASSES}`} />
         </CollapsibleTrigger>
         <CollapsibleContent className="border-b border-dashed border-black/20">
           <ul className="my-3 flex flex-col space-y-5">
@@ -109,11 +123,13 @@ const LayersDropdown = (): JSX.Element => {
           className={`${COLLAPSIBLE_TRIGGER_CLASSES} pb-0 data-[state=open]:pb-2`}
         >
           <span>basemap Layers</span>
-          <LuChevronDown className={`hidden group-data-[state=open]:block ${TABS_ICONS_CLASSES}`} />
-          <LuChevronUp className={`hidden group-data-[state=closed]:block ${TABS_ICONS_CLASSES}`} />
+          <LuChevronDown
+            className={`hidden group-data-[state=closed]:block ${TABS_ICONS_CLASSES}`}
+          />
+          <LuChevronUp className={`hidden group-data-[state=open]:block ${TABS_ICONS_CLASSES}`} />
         </CollapsibleTrigger>
         <CollapsibleContent>
-          <ul className="my-3 flex flex-col space-y-5">
+          <ul className="my-3 flex flex-col space-y-5 overflow-y-hidden">
             <li className="flex items-start gap-2">
               <Switch id="labels-switch" checked={labels} onCheckedChange={handleLabelsChange} />
               <Label htmlFor="labels-switch" className="cursor-pointer">

frontend/src/containers/map/content/map/layers-toolbox/legend/index.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback } from 'react';
+import { FC, useCallback, useMemo } from 'react';
 
 import { ChevronDown } from 'lucide-react';
 import { HiEye, HiEyeOff } from 'react-icons/hi';
@@ -136,6 +136,20 @@ const Legend: FC = () => {
     [activeLayers, setLayerSettings]
   );
 
+  const accordionValue = useMemo(() => {
+    // If we don't have layerSettings entries, the view is in its default state; we wish to
+    // show all legend accordion items expanded by default.
+    const layerSettingsKeys = Object.keys(layerSettings);
+    if (!layerSettingsKeys.length) {
+      return activeLayers.map((layerId) => layerId.toString());
+    }
+
+    // We have layerSettings entries; let's use those to define which accordion items are expanded.
+    return layerSettingsKeys.filter((layerId) =>
+      layerSettings[layerId].expanded ? layerId.toString() : null
+    );
+  }, [activeLayers, layerSettings]);
+
   return (
     <>
       {!layersQuery.data?.length && (
@@ -144,13 +158,7 @@ const Legend: FC = () => {
         </p>
       )}
       {layersQuery.data?.length > 0 && (
-        <Accordion
-          type="multiple"
-          value={Object.keys(layerSettings).filter((layerId) => {
-            return layerSettings[layerId].expanded ? layerId.toString() : null;
-          })}
-          onValueChange={onToggleAccordion}
-        >
+        <Accordion type="multiple" value={accordionValue} onValueChange={onToggleAccordion}>
           {layersQuery.data?.map(({ id, attributes: { title, legend_config } }, index) => {
             const isFirst = index === 0;
             const isLast = index + 1 === layersQuery.data.length;

frontend/tailwind.config.js

@@ -45,10 +45,20 @@ module.exports = {
           from: { height: 'var(--radix-accordion-content-height)' },
           to: { height: 0 },
         },
+        'collapsible-down': {
+          from: { height: 0 },
+          to: { height: 'var(--radix-collapsible-content-height)' },
+        },
+        'collapsible-up': {
+          from: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: 0 },
+        },
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
+        'collapsible-down': 'collapsible-down 0.2s ease-out',
+        'collapsible-up': 'collapsible-up 0.2s ease-out',
       },
     },
   },