From ef9433189970c8397b5c6f56e8b290ce4c9f90cb Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Wed, 14 Feb 2024 11:43:51 +0000 Subject: [PATCH 1/6] Add layers' tooltips from the metadata (description) --- .../map/layers-toolbox/layers-list/index.tsx | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 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 index df97a68c..e84b9643 100644 --- 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 ( -
  • - - +
  • + + + + + {metadata?.description && ( + + )}
    • ); })} From 2bdf95c8887a7dfb7ce1e9468be8d3d462a78d0c Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Wed, 14 Feb 2024 12:34:34 +0000 Subject: [PATCH 2/6] Add legends' tooltips from the configuration (basic type) --- .../map/content/map/layers-toolbox/legend/item.tsx | 8 ++++++-- frontend/src/types/layers.ts | 1 + 2 files changed, 7 insertions(+), 2 deletions(-) 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 index fa865111..7c66ecf0 100644 --- 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,5 +1,6 @@ import { FC, ReactElement, isValidElement, useMemo } from 'react'; +import TooltipButton from '@/components/tooltip-button'; import { parseConfig } from '@/lib/json-converter'; import { LayerTyped, LegendConfig } from '@/types/layers'; @@ -30,7 +31,7 @@ const LegendItem: FC = ({ config }) => { case 'basic': return (
      - {items.map(({ value, color }) => ( + {items.map(({ value, color, description }) => (
    • = ({ config }) => { backgroundColor: color, }} /> - {value} + + {value} + {description && } +
      • ))}
    diff --git a/frontend/src/types/layers.ts b/frontend/src/types/layers.ts index 6ee8680c..6f4a23a6 100644 --- a/frontend/src/types/layers.ts +++ b/frontend/src/types/layers.ts @@ -20,6 +20,7 @@ export type LegendConfig = { items: { value: string; color: string; + description?: string; }[]; }; From 9021267e8c7c9b67c7db33caf1087d67066f8b99 Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Wed, 14 Feb 2024 13:10:36 +0000 Subject: [PATCH 3/6] Add legends' tooltips from the configuration (establishment legend) --- .../layers-toolbox/legend/establishment/index.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) 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 index ea9d1819..d0f730fb 100644 --- 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,15 +15,20 @@ const PATTERNS = { implemented: ImplementedIcon, }; -const EEZLayerLegend = (config: { items: { label: string; pattern: string }[] }) => { +const EEZLayerLegend = (config: { + items: { label: string; pattern: string; description?: string }[]; +}) => { const { items } = config; return (
      - {items.map(({ label, pattern }) => ( + {items.map(({ label, pattern, description }) => (
    • - {label} + + {label} + {description && } +
      • ))}
    From d46422ac07365333c62e01b85e918e9562669086 Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Wed, 14 Feb 2024 13:20:06 +0000 Subject: [PATCH 4/6] Rename Establishment layer legend component - doesn't match what it does --- .../content/map/layers-toolbox/legend/establishment/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 index d0f730fb..16a3442d 100644 --- 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 @@ -15,7 +15,7 @@ const PATTERNS = { implemented: ImplementedIcon, }; -const EEZLayerLegend = (config: { +const EstablishmentLayerLegend = (config: { items: { label: string; pattern: string; description?: string }[]; }) => { const { items } = config; @@ -35,4 +35,4 @@ const EEZLayerLegend = (config: { ); }; -export default EEZLayerLegend; +export default EstablishmentLayerLegend; From 6b4e60702cbcc5d1ffac8112c2bf4371d132327e Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Fri, 16 Feb 2024 13:51:00 +0000 Subject: [PATCH 5/6] Legend item to support items with custom SVGs --- .../map/layers-toolbox/legend/item.tsx | 27 +++++++++++++++++++ frontend/src/types/layers.ts | 3 ++- 2 files changed, 29 insertions(+), 1 deletion(-) 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 index 7c66ecf0..d50084ba 100644 --- 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,13 +1,23 @@ 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 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, +}; + const LegendItem: FC = ({ config }) => { const { type, items } = config; @@ -48,6 +58,23 @@ const LegendItem: FC = ({ config }) => { ); + case 'icon': + return ( +
      + {items.map(({ value, icon, description }) => ( +
    • + + + + + {value} + {description && } + +
      • + ))} +
    + ); + case 'choropleth': return ( <> diff --git a/frontend/src/types/layers.ts b/frontend/src/types/layers.ts index 6f4a23a6..1d9117bd 100644 --- a/frontend/src/types/layers.ts +++ b/frontend/src/types/layers.ts @@ -16,9 +16,10 @@ export type ParamsConfigValue = { export type ParamsConfig = Record[]; export type LegendConfig = { - type: 'basic' | 'gradient' | 'choropleth'; + type: 'basic' | 'icon' | 'gradient' | 'choropleth'; items: { value: string; + icon: string; color: string; description?: string; }[]; From 7dbdc8254bf207c1af397d3c2ba9f35362f2ef6c Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Fri, 16 Feb 2024 14:23:34 +0000 Subject: [PATCH 6/6] Add protection types widget svgs --- .../map/content/map/layers-toolbox/legend/item.tsx | 5 ++++- frontend/src/styles/icons/mpa.svg | 3 +++ frontend/src/styles/icons/oecm.svg | 3 +++ 3 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 frontend/src/styles/icons/mpa.svg create mode 100644 frontend/src/styles/icons/oecm.svg 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 index d50084ba..a99f1374 100644 --- a/frontend/src/containers/map/content/map/layers-toolbox/legend/item.tsx +++ b/frontend/src/containers/map/content/map/layers-toolbox/legend/item.tsx @@ -4,10 +4,11 @@ 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']; } @@ -16,6 +17,8 @@ const ICONS_MAPPING = { eez: EEZIcon, 'eez-selected': EEZSelectedIcon, 'eez-multiple': EEZMultipleIcon, + oecm: OECMIcon, + mpa: MPAIcon, }; const LegendItem: FC = ({ config }) => { diff --git a/frontend/src/styles/icons/mpa.svg b/frontend/src/styles/icons/mpa.svg new file mode 100644 index 00000000..b2095983 --- /dev/null +++ b/frontend/src/styles/icons/mpa.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/styles/icons/oecm.svg b/frontend/src/styles/icons/oecm.svg new file mode 100644 index 00000000..ed92e609 --- /dev/null +++ b/frontend/src/styles/icons/oecm.svg @@ -0,0 +1,3 @@ + + +