Merge pull request #183 from Vizzuality/SKY30-221-info-buttons-for-da…

…ta-layers-legend [SKY30-221][SKY30-250] Info buttons for data layers legend
Vizzuality · Feb 21, 2024 · b4539ca · b4539ca
2 parents 2632f1f + 7dbdc82
commit b4539ca
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 17 deletions.
diff --git a/frontend/src/containers/map/content/map/layers-toolbox/layers-list/index.tsx b/frontend/src/containers/map/content/map/layers-toolbox/layers-list/index.tsx
@@ -2,6 +2,7 @@ import { ComponentProps, useCallback } from 'react';
 
 import { LuChevronDown, LuChevronUp } from 'react-icons/lu';
 
+import TooltipButton from '@/components/tooltip-button';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
@@ -25,6 +26,7 @@ const LayersDropdown = (): JSX.Element => {
   const layersQuery = useGetLayers(
     {
       sort: 'title:asc',
+      populate: 'metadata',
     },
     {
       query: {
@@ -79,17 +81,23 @@ const LayersDropdown = (): JSX.Element => {
               const onCheckedChange = onToggleLayer.bind(null, layer.id) as (
                 isActive: boolean
               ) => void;
+              const metadata = layer?.attributes?.metadata;
 
               return (
-                <li key={layer.id} className="flex items-start gap-2">
-                  <Switch
-                    id={`${layer.id}-switch`}
-                    checked={isActive}
-                    onCheckedChange={onCheckedChange}
-                  />
-                  <Label htmlFor={`${layer.id}-switch`} className="cursor-pointer">
-                    {layer.attributes.title}
-                  </Label>
+                <li key={layer.id} className="flex items-center">
+                  <span className="flex gap-2">
+                    <Switch
+                      id={`${layer.id}-switch`}
+                      checked={isActive}
+                      onCheckedChange={onCheckedChange}
+                    />
+                    <Label htmlFor={`${layer.id}-switch`} className="cursor-pointer">
+                      {layer.attributes.title}
+                    </Label>
+                  </span>
+                  {metadata?.description && (
+                    <TooltipButton className="-my-1" text={metadata?.description} />
+                  )}
                 </li>
               );
             })}

diff --git a/frontend/src/containers/map/content/map/layers-toolbox/legend/establishment/index.tsx b/frontend/src/containers/map/content/map/layers-toolbox/legend/establishment/index.tsx
@@ -1,3 +1,4 @@
+import TooltipButton from '@/components/tooltip-button';
 import Icon from '@/components/ui/icon';
 import DesignatedIcon from '@/styles/icons/designated.svg?sprite';
 import ImplementedIcon from '@/styles/icons/implemented.svg?sprite';
@@ -14,19 +15,24 @@ const PATTERNS = {
   implemented: ImplementedIcon,
 };
 
-const EEZLayerLegend = (config: { items: { label: string; pattern: string }[] }) => {
+const EstablishmentLayerLegend = (config: {
+  items: { label: string; pattern: string; description?: string }[];
+}) => {
   const { items } = config;
 
   return (
     <ul className="space-y-3 font-mono text-xs">
-      {items.map(({ label, pattern }) => (
+      {items.map(({ label, pattern, description }) => (
         <li key={pattern} className={ITEM_LIST_CLASSES}>
           <Icon icon={PATTERNS[pattern]} className={ICON_CLASSES} />
-          <span>{label}</span>
+          <span className="flex">
+            <span className="font-mono">{label}</span>
+            {description && <TooltipButton className="-my-1" text={description} />}
+          </span>
         </li>
       ))}
     </ul>
   );
 };
 
-export default EEZLayerLegend;
+export default EstablishmentLayerLegend;
diff --git a/frontend/src/containers/map/content/map/layers-toolbox/legend/item.tsx b/frontend/src/containers/map/content/map/layers-toolbox/legend/item.tsx
@@ -1,12 +1,26 @@
 import { FC, ReactElement, isValidElement, useMemo } from 'react';
 
+import TooltipButton from '@/components/tooltip-button';
+import Icon from '@/components/ui/icon';
 import { parseConfig } from '@/lib/json-converter';
+import EEZIcon from '@/styles/icons/eez.svg?sprite';
+import MPAIcon from '@/styles/icons/mpa.svg?sprite';
+import OECMIcon from '@/styles/icons/oecm.svg?sprite';
+import EEZSelectedIcon from '@/styles/icons/selected-eez.svg?sprite';
+import EEZMultipleIcon from '@/styles/icons/several-eez.svg?sprite';
 import { LayerTyped, LegendConfig } from '@/types/layers';
-
 export interface LegendItemsProps {
   config: LayerTyped['legend_config'];
 }
 
+const ICONS_MAPPING = {
+  eez: EEZIcon,
+  'eez-selected': EEZSelectedIcon,
+  'eez-multiple': EEZMultipleIcon,
+  oecm: OECMIcon,
+  mpa: MPAIcon,
+};
+
 const LegendItem: FC<LegendItemsProps> = ({ config }) => {
   const { type, items } = config;
 
@@ -30,15 +44,35 @@ const LegendItem: FC<LegendItemsProps> = ({ config }) => {
     case 'basic':
       return (
         <ul className="flex w-full flex-col space-y-1">
-          {items.map(({ value, color }) => (
+          {items.map(({ value, color, description }) => (
             <li key={`${value}`} className="flex items-center space-x-2 p-1 text-xs">
               <div
                 className={'h-6 w-6 flex-shrink-0 rounded-full'}
                 style={{
                   backgroundColor: color,
                 }}
               />
-              <span className="font-mono">{value}</span>
+              <span className="flex">
+                <span className="font-mono">{value}</span>
+                {description && <TooltipButton className="-my-1" text={description} />}
+              </span>
+            </li>
+          ))}
+        </ul>
+      );
+
+    case 'icon':
+      return (
+        <ul className="flex w-full flex-col space-y-1">
+          {items.map(({ value, icon, description }) => (
+            <li key={`${value}`} className="flex space-x-2 p-1">
+              <span className="h-7 w-7">
+                <Icon icon={ICONS_MAPPING[icon]} className="h-7 w-7" />
+              </span>
+              <span className="flex items-center text-xs">
+                <span className="font-mono">{value}</span>
+                {description && <TooltipButton className="-my-1" text={description} />}
+              </span>
             </li>
           ))}
         </ul>

diff --git a/frontend/src/styles/icons/mpa.svg b/frontend/src/styles/icons/mpa.svg
diff --git a/frontend/src/styles/icons/oecm.svg b/frontend/src/styles/icons/oecm.svg
diff --git a/frontend/src/types/layers.ts b/frontend/src/types/layers.ts
@@ -16,10 +16,12 @@ export type ParamsConfigValue = {
 export type ParamsConfig = Record<string, ParamsConfigValue>[];
 
 export type LegendConfig = {
-  type: 'basic' | 'gradient' | 'choropleth';
+  type: 'basic' | 'icon' | 'gradient' | 'choropleth';
   items: {
     value: string;
+    icon: string;
     color: string;
+    description?: string;
   }[];
 };