From 160bed0927ceaa2193f7bfd51a85ad239173d202 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez?=
 <andres.gonzalez@vizzuality.com>
Date: Tue, 7 May 2024 18:56:37 +0200
Subject: [PATCH] analysis: grouped categories selector

---
 client/.eslintrc.cjs                          |   2 +-
 client/package.json                           |   1 +
 .../src/components/tree-select/component.tsx  |   7 +-
 client/src/components/ui/select.tsx           |  33 ++---
 .../analysis-chart/impact-chart/component.tsx |   6 +-
 .../analysis-dynamic-metadata/component.tsx   |  13 +-
 .../analysis-filters/component.tsx            |  18 ++-
 .../analysis-filters/indicators/component.tsx |  88 -------------
 .../analysis-filters/indicators/index.tsx     | 123 +++++++++++++++++-
 .../analysis-filters/indicators/map/index.tsx | 116 +++++++++++++++++
 .../impact-legend-item/component.tsx          |  10 +-
 .../material-legend-item/component.tsx        |   7 +-
 .../analysis-table/component.tsx              |  92 +++++++------
 .../analysis-table/types.d.ts                 |   1 +
 .../src/containers/mode-control/component.tsx |  23 +++-
 client/src/hooks/h3-data/utils.ts             |   4 +-
 client/src/hooks/layers/impact.ts             |  17 ++-
 client/src/pages/analysis/chart.tsx           |  45 ++++---
 client/src/store/features/analysis/filters.ts |   4 +-
 client/src/store/hooks.ts                     |   9 ++
 client/src/types.d.ts                         |   1 +
 client/src/utils/indicator-param.ts           |  10 --
 client/yarn.lock                              |  19 +++
 23 files changed, 431 insertions(+), 218 deletions(-)
 delete mode 100644 client/src/containers/analysis-visualization/analysis-filters/indicators/component.tsx
 create mode 100644 client/src/containers/analysis-visualization/analysis-filters/indicators/map/index.tsx
 delete mode 100644 client/src/utils/indicator-param.ts

diff --git a/client/.eslintrc.cjs b/client/.eslintrc.cjs
index 8f39e003b..155b018fd 100644
--- a/client/.eslintrc.cjs
+++ b/client/.eslintrc.cjs
@@ -7,7 +7,7 @@ module.exports = {
   ],
   plugins: ['prettier'],
   rules: {
-    '@typescript-eslint/no-unused-vars': ['warn'],
+    '@typescript-eslint/no-unused-vars': ['warn', { ignoreRestSiblings: true }],
     'import/order': [
       'warn',
       {
diff --git a/client/package.json b/client/package.json
index 4c0482036..f98244838 100644
--- a/client/package.json
+++ b/client/package.json
@@ -76,6 +76,7 @@
     "maplibre-gl": "3.6.2",
     "next": "14.2.2",
     "next-auth": "4.24.7",
+    "nuqs": "1.17.2",
     "postcss": "8.4.31",
     "query-string": "8.1.0",
     "rc-tree": "5.7.0",
diff --git a/client/src/components/tree-select/component.tsx b/client/src/components/tree-select/component.tsx
index 1aea66c27..98ba01415 100644
--- a/client/src/components/tree-select/component.tsx
+++ b/client/src/components/tree-select/component.tsx
@@ -429,7 +429,12 @@ const InnerTreeSelect = <IsMulti extends boolean>(
                     {theme === 'inline-primary' && index < currentOptions.length - 1 && ','}
                   </Badge>
                 ))}
-              {currentOptions?.length > badgesToShow && (
+              {!badgesToShow && currentOptions?.length > 0 && (
+                <Badge className="whitespace-nowrap text-xs" theme="big">
+                  {currentOptions.length - badgesToShow} selected
+                </Badge>
+              )}
+              {currentOptions?.length > badgesToShow && Boolean(badgesToShow) && (
                 <Badge className="whitespace-nowrap text-xs" theme="big">
                   {currentOptions.length - badgesToShow} more selected
                 </Badge>
diff --git a/client/src/components/ui/select.tsx b/client/src/components/ui/select.tsx
index 989cba607..887be33e7 100644
--- a/client/src/components/ui/select.tsx
+++ b/client/src/components/ui/select.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/solid';
 
 import { cn } from '@/lib/utils';
 
@@ -17,14 +17,23 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-navy-600 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'group flex h-10 w-full items-center justify-between rounded-md border border-gray-200 bg-background px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:border-navy-400 focus:outline-none focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className,
     )}
     {...props}
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      <>
+        <ChevronDownIcon
+          className="hidden h-4 w-4 text-gray-900 group-data-[state=closed]:block"
+          aria-hidden="true"
+        />
+        <ChevronUpIcon
+          className="hidden h-4 w-4 text-gray-900 group-data-[state=open]:block"
+          aria-hidden="true"
+        />
+      </>
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -39,7 +48,7 @@ const SelectScrollUpButton = React.forwardRef<
     className={cn('flex cursor-default items-center justify-center py-1', className)}
     {...props}
   >
-    <ChevronUp className="h-4 w-4" />
+    <ChevronUpIcon className="h-4 w-4 text-gray-900" aria-hidden="true" />
   </SelectPrimitive.ScrollUpButton>
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -53,7 +62,7 @@ const SelectScrollDownButton = React.forwardRef<
     className={cn('flex cursor-default items-center justify-center py-1', className)}
     {...props}
   >
-    <ChevronDown className="h-4 w-4" />
+    <ChevronDownIcon className="h-4 w-4 text-gray-900" aria-hidden="true" />
   </SelectPrimitive.ScrollDownButton>
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
@@ -66,7 +75,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-gray-200 bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className,
@@ -77,7 +86,7 @@ const SelectContent = React.forwardRef<
       <SelectScrollUpButton />
       <SelectPrimitive.Viewport
         className={cn(
-          'p-1',
+          'py-1',
           position === 'popper' &&
             'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
         )}
@@ -96,7 +105,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
+    className={cn('py-1.5 pl-3 pr-2 text-sm font-semibold', className)}
     {...props}
   />
 ));
@@ -109,17 +118,11 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex w-full cursor-pointer select-none items-center py-1.5 pl-3 pr-2 text-sm outline-none focus:bg-navy-50 data-[disabled]:pointer-events-none data-[state=checked]:text-navy-400 data-[disabled]:opacity-50',
       className,
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
 ));
diff --git a/client/src/containers/analysis-chart/impact-chart/component.tsx b/client/src/containers/analysis-chart/impact-chart/component.tsx
index d1759bab7..aae1c2c80 100644
--- a/client/src/containers/analysis-chart/impact-chart/component.tsx
+++ b/client/src/containers/analysis-chart/impact-chart/component.tsx
@@ -48,11 +48,7 @@ const StackedAreaChart: React.FC<StackedAreaChartProps> = ({ indicator }) => {
     scenarioId,
   };
 
-  const enabled =
-    !!filters?.indicatorId &&
-    !!filters.startYear &&
-    !!filters.endYear &&
-    filters.endYear !== filters.startYear;
+  const enabled = !!filters.startYear && !!filters.endYear && filters.endYear !== filters.startYear;
 
   const { data, isFetched, isFetching } = useImpactRanking(
     {
diff --git a/client/src/containers/analysis-visualization/analysis-dynamic-metadata/component.tsx b/client/src/containers/analysis-visualization/analysis-dynamic-metadata/component.tsx
index a726b1f19..842d523f5 100644
--- a/client/src/containers/analysis-visualization/analysis-dynamic-metadata/component.tsx
+++ b/client/src/containers/analysis-visualization/analysis-dynamic-metadata/component.tsx
@@ -4,7 +4,6 @@ import { InformationCircleIcon } from '@heroicons/react/outline';
 
 import { useAppSelector, useAppDispatch } from 'store/hooks';
 import { useScenario } from 'hooks/scenarios';
-import { useIndicator } from 'hooks/indicators';
 import { scenarios } from 'store/features/analysis/scenarios';
 import { analysisFilters, setFilters } from 'store/features/analysis/filters';
 import Badge from 'components/badge/component';
@@ -42,7 +41,7 @@ const AnalysisDynamicMetadata: FC<AnalysisDynamicMetadataTypes> = ({
     [scenarioToCompare, scenarioB?.title],
   );
 
-  const { materials, origins, t1Suppliers, producers, locationTypes, indicator } =
+  const { materials, origins, t1Suppliers, producers, locationTypes } =
     useAppSelector(analysisFilters);
 
   const handleRemoveBadge = useCallback(
@@ -53,13 +52,6 @@ const AnalysisDynamicMetadata: FC<AnalysisDynamicMetadataTypes> = ({
     [dispatch],
   );
 
-  const { data: unit } = useIndicator(indicator?.value, { select: (data) => data?.unit });
-
-  const indicatorsTemplate = useMemo(
-    () => indicator?.value !== 'all' && <span className="font-bold">({unit?.symbol})</span>,
-    [indicator?.value, unit?.symbol],
-  );
-
   const comparisonTemplate = useMemo(
     () =>
       !!isComparisonEnabled && (
@@ -194,11 +186,10 @@ const AnalysisDynamicMetadata: FC<AnalysisDynamicMetadataTypes> = ({
       <InformationCircleIcon className="h-4 w-4 shrink-0 text-gray-900" />
       Viewing {isComparisonEnabled ? <ComparisonToggle /> : values}
       <span>
-        <span className="whitespace-nowrap">Impact values for</span>
+        <span className="whitespace-nowrap">impact values for</span>
         <span className="whitespace-nowrap font-bold"> {scenario1} </span>
       </span>
       {comparisonTemplate}
-      {indicatorsTemplate}
       {materialTemplate}
       {originTemplate}
       {supplierTemplate}
diff --git a/client/src/containers/analysis-visualization/analysis-filters/component.tsx b/client/src/containers/analysis-visualization/analysis-filters/component.tsx
index 57ca300c2..c6aca4034 100644
--- a/client/src/containers/analysis-visualization/analysis-filters/component.tsx
+++ b/client/src/containers/analysis-visualization/analysis-filters/component.tsx
@@ -1,4 +1,5 @@
 import IndicatorsFilter from './indicators';
+import IndicatorsMapFilter from './indicators/map';
 import GroupByFilter from './group-by';
 import YearsRangeFilter from './years-range';
 import MoreFilters from './more-filters';
@@ -12,10 +13,19 @@ const AnalysisFilters: React.FC = () => {
 
   return (
     <div className="inline-flex flex-wrap gap-2">
-      <IndicatorsFilter />
-      {visualizationMode !== 'map' && <GroupByFilter />}
-      {visualizationMode === 'map' && <YearsFilter />}
-      {visualizationMode !== 'map' && <YearsRangeFilter />}
+      {visualizationMode === 'map' && (
+        <>
+          <IndicatorsMapFilter />
+          <YearsFilter />
+        </>
+      )}
+      {visualizationMode !== 'map' && (
+        <>
+          <IndicatorsFilter />
+          <GroupByFilter />
+          <YearsRangeFilter />
+        </>
+      )}
       <MoreFilters />
     </div>
   );
diff --git a/client/src/containers/analysis-visualization/analysis-filters/indicators/component.tsx b/client/src/containers/analysis-visualization/analysis-filters/indicators/component.tsx
deleted file mode 100644
index d5daef80c..000000000
--- a/client/src/containers/analysis-visualization/analysis-filters/indicators/component.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { useCallback, useMemo, useEffect } from 'react';
-import { useRouter } from 'next/router';
-
-import { useAppDispatch, useAppSelector } from 'store/hooks';
-import { analysisUI } from 'store/features/analysis/ui';
-import { analysisFilters, setFilter } from 'store/features/analysis/filters';
-import { useIndicators } from 'hooks/indicators';
-import Select from 'components/forms/select';
-
-import type { Indicator } from 'types';
-import type { SelectProps, Option } from 'components/forms/select/types';
-
-const ALL = {
-  id: 'all',
-  name: 'All indicators',
-  nameCode: 'all',
-};
-
-const IndicatorsFilter = () => {
-  const { query = {}, replace } = useRouter();
-  const { indicator } = query;
-  const { visualizationMode } = useAppSelector(analysisUI);
-  const filters = useAppSelector(analysisFilters);
-  const dispatch = useAppDispatch();
-
-  const {
-    data = [],
-    isFetching,
-    error,
-  } = useIndicators(
-    { sort: 'name' },
-    {
-      select: (data) => data.data,
-    },
-  );
-
-  const options: SelectProps['options'] = useMemo(() => {
-    let d: Partial<Indicator>[] = data || [];
-    if (visualizationMode !== 'map') d = [...[ALL], ...data];
-    return d.map((indicator) => ({
-      label: indicator.name,
-      value: indicator.id,
-      disabled: indicator.status === 'inactive',
-    }));
-  }, [data, visualizationMode]);
-
-  // Those lines allow to keep the selected indicator when the user changes the visualization mode
-  const current = useMemo<Option>(() => {
-    const selected = options?.find((option) => option.value === indicator);
-    return selected || options?.[0];
-  }, [indicator, options]);
-
-  // Update the filter when the indicator changes
-  useEffect(() => {
-    if (current && filters.indicator?.value !== current.value) {
-      dispatch(
-        setFilter({
-          id: 'indicator',
-          value: current,
-        }),
-      );
-    }
-  }, [current, dispatch, filters.indicator?.value]);
-
-  const handleChange: SelectProps['onChange'] = useCallback(
-    (selected: Option<string>) => {
-      replace({ query: { ...query, indicator: selected?.value } }, undefined, {
-        shallow: true,
-      });
-    },
-    [query, replace],
-  );
-
-  return (
-    <div className="rounded-md bg-white">
-      <Select
-        data-testid="indicators-filter"
-        value={current}
-        onChange={handleChange}
-        options={options}
-        loading={isFetching}
-        disabled={!!error}
-      />
-    </div>
-  );
-};
-
-export default IndicatorsFilter;
diff --git a/client/src/containers/analysis-visualization/analysis-filters/indicators/index.tsx b/client/src/containers/analysis-visualization/analysis-filters/indicators/index.tsx
index b404d7fd4..3e495b627 100644
--- a/client/src/containers/analysis-visualization/analysis-filters/indicators/index.tsx
+++ b/client/src/containers/analysis-visualization/analysis-filters/indicators/index.tsx
@@ -1 +1,122 @@
-export { default } from './component';
+import { useCallback, useMemo, useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import queryString from 'query-string';
+import { usePathname } from 'next/navigation';
+import { xor } from 'lodash-es';
+
+import { useIndicators } from 'hooks/indicators';
+import TreeSelect from '@/components/tree-select';
+import { TreeSelectOption } from '@/components/tree-select/types';
+import { flattenTree } from '@/components/tree-select/utils';
+import { useSyncIndicators } from '@/store/hooks';
+
+type HasParentProperty<T> = T & { isParent?: boolean };
+
+const IndicatorsFilter = () => {
+  const { query = {}, replace } = useRouter();
+  const isTableView = usePathname().includes('/table');
+  const [selectedOptions, setSelectedOptions] = useState<TreeSelectOption[] | undefined>(undefined);
+  const [syncedIndicators, syncIndicators] = useSyncIndicators();
+
+  const { data, isFetching } = useIndicators(
+    { sort: 'category' },
+    {
+      select: (data) => data?.data,
+    },
+  );
+
+  const options = useMemo<TreeSelectOption[]>(() => {
+    const categories = Array.from(new Set(data?.map(({ category }) => category).filter(Boolean)));
+
+    const categoryGroups = categories.map((category) => {
+      const indicators = data?.filter((indicator) => indicator.category === category);
+      const categoryOptions = indicators.map(
+        (indicator) =>
+          ({
+            label: indicator.name,
+            value: indicator.id,
+            // disabled: indicator.status === 'inactive',
+          }) satisfies TreeSelectOption<(typeof indicator)['id']>,
+      );
+      return {
+        label: category,
+        value: category,
+        isParent: true,
+        children: categoryOptions,
+      } satisfies HasParentProperty<TreeSelectOption<typeof category>>;
+    });
+
+    return categoryGroups;
+  }, [data]);
+
+  const allNodes = useMemo(() => options?.flatMap((opt) => flattenTree(opt)), [options]);
+
+  const handleChange = useCallback(
+    (options: HasParentProperty<TreeSelectOption>[]) => {
+      const _v = options
+        .map(({ value, isParent }) => {
+          if (isParent) {
+            return allNodes
+              .filter(({ value: v }) => v === value)
+              .map(({ children }) => children.map(({ value }) => value))
+              .flat(1);
+          }
+          return value;
+        })
+        .flat(1);
+
+      const { indicators, detail, ...restQuery } = query;
+
+      setSelectedOptions(options);
+
+      const optionDetailRemoved = xor(selectedOptions, options).some(
+        ({ value }) => value === detail,
+      );
+
+      syncIndicators(_v.length ? _v : null);
+
+      replace(
+        {
+          query: queryString.stringify({
+            ...restQuery,
+            ...(isTableView && optionDetailRemoved && { detail: undefined }),
+          }),
+        },
+        undefined,
+        {
+          shallow: true,
+        },
+      );
+    },
+    [query, replace, allNodes, selectedOptions, isTableView, syncIndicators],
+  );
+
+  const initialSelectedOptions = useMemo(() => {
+    if (syncedIndicators && options?.length) {
+      const selectedOptions = allNodes.filter(({ value }) => syncedIndicators.includes(value));
+      return selectedOptions;
+    }
+    return undefined;
+  }, [syncedIndicators, options, allNodes]);
+
+  useEffect(() => {
+    setSelectedOptions(initialSelectedOptions);
+  }, [initialSelectedOptions]);
+
+  return (
+    <div className="h-full w-[235px]">
+      <TreeSelect
+        multiple
+        showSearch
+        loading={isFetching}
+        options={options}
+        onChange={handleChange}
+        current={selectedOptions}
+        placeholder="All indicators"
+        maxBadges={0}
+      />
+    </div>
+  );
+};
+
+export default IndicatorsFilter;
diff --git a/client/src/containers/analysis-visualization/analysis-filters/indicators/map/index.tsx b/client/src/containers/analysis-visualization/analysis-filters/indicators/map/index.tsx
new file mode 100644
index 000000000..f12b59fc5
--- /dev/null
+++ b/client/src/containers/analysis-visualization/analysis-filters/indicators/map/index.tsx
@@ -0,0 +1,116 @@
+import { useCallback, useMemo, useEffect, ComponentProps, Fragment, useState } from 'react';
+import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/solid';
+
+import { useSyncIndicators } from 'store/hooks';
+import { useIndicators } from 'hooks/indicators';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  SelectLabel,
+  SelectSeparator,
+} from '@/components/ui/select';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
+
+const IndicatorsMapFilter = () => {
+  const [value, setValue] = useState<string | undefined>(undefined);
+  const [syncedIndicators, setSyncedIndicators] = useSyncIndicators();
+
+  const { data, isFetching, isFetched } = useIndicators(
+    { sort: 'name', 'filter[status]': 'active' },
+    {
+      select: (data) => data?.data,
+    },
+  );
+
+  const options = useMemo(() => {
+    const categories = Array.from(
+      new Set(data?.map(({ category }) => category).filter(Boolean)),
+    ).sort((a, b) => a.localeCompare(b));
+
+    const categoryGroups = categories.map((category) => {
+      const indicators = data?.filter((indicator) => indicator.category === category);
+      const categoryOptions = indicators.map((indicator) => ({
+        label: indicator.name,
+        value: indicator.id,
+        disabled: indicator.status === 'inactive',
+      }));
+      return { label: category, value: category, options: categoryOptions };
+    });
+
+    return categoryGroups;
+  }, [data]);
+
+  const indicatorName = useMemo(() => {
+    const indicator = data?.find((indicator) => indicator.id === value);
+    return indicator?.name;
+  }, [data, value]);
+
+  const handleChange = useCallback(
+    (value: Parameters<ComponentProps<typeof Select>['onValueChange']>[0]) => {
+      setSyncedIndicators([value]);
+    },
+    [setSyncedIndicators],
+  );
+
+  useEffect(() => {
+    if (syncedIndicators?.length) {
+      return setValue(syncedIndicators?.[0]);
+    }
+
+    if (options?.at(0)?.options?.at(0)?.value) {
+      setSyncedIndicators([options?.at(0)?.options?.at(0)?.value]);
+      setValue(options?.at(0)?.options?.at(0)?.value);
+    }
+  }, [options, syncedIndicators, indicatorName, setSyncedIndicators]);
+
+  return (
+    <Select value={value} onValueChange={handleChange} disabled={!isFetched && isFetching}>
+      <SelectTrigger
+        className="h-full w-[325px] overflow-ellipsis text-left"
+        data-testid="indicators-filter"
+      >
+        <SelectValue>{indicatorName}</SelectValue>
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((option) => (
+          <Fragment key={option.value}>
+            {!option?.options?.length && (
+              <>
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+                <SelectSeparator />
+              </>
+            )}
+            {option?.options?.length > 0 && (
+              <Collapsible defaultOpen>
+                <SelectGroup>
+                  <CollapsibleTrigger className="group">
+                    <SelectLabel className="flex items-center">
+                      <ChevronRightIcon className="hidden h-4 w-4 text-gray-900 group-data-[state=closed]:block" />
+                      <ChevronDownIcon className="hidden h-4 w-4 text-gray-900 group-data-[state=open]:block" />
+                      <span className="ml-1">{option.label}</span>
+                    </SelectLabel>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    {option.options.map((indicator) => (
+                      <SelectItem key={indicator.value} value={indicator.value} className="pl-8">
+                        {indicator.label}
+                      </SelectItem>
+                    ))}
+                  </CollapsibleContent>
+                </SelectGroup>
+              </Collapsible>
+            )}
+          </Fragment>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};
+
+export default IndicatorsMapFilter;
diff --git a/client/src/containers/analysis-visualization/analysis-legend/impact-legend-item/component.tsx b/client/src/containers/analysis-visualization/analysis-legend/impact-legend-item/component.tsx
index 376847347..e2bf6b888 100644
--- a/client/src/containers/analysis-visualization/analysis-legend/impact-legend-item/component.tsx
+++ b/client/src/containers/analysis-visualization/analysis-legend/impact-legend-item/component.tsx
@@ -1,8 +1,8 @@
 import { useCallback, useMemo } from 'react';
 
-import { useAppSelector, useAppDispatch } from 'store/hooks';
+import { useAppSelector, useAppDispatch, useSyncIndicators } from 'store/hooks';
 import { analysisMap, setLayer } from 'store/features/analysis/map';
-import { analysisFilters, scenarios } from 'store/features/analysis';
+import { scenarios } from 'store/features/analysis';
 import LegendTypeChoropleth from 'components/legend/types/choropleth';
 import LegendTypeComparative from 'components/legend/types/comparative';
 import LegendItem from 'components/legend/item';
@@ -14,9 +14,11 @@ const LAYER_ID = 'impact';
 
 const ImpactLayer = () => {
   const dispatch = useAppDispatch();
-  const { indicator: indicatorOption } = useAppSelector(analysisFilters);
+  const [syncedIndicators] = useSyncIndicators();
 
-  const { data: indicator } = useIndicator(indicatorOption?.value);
+  const { data: indicator } = useIndicator(syncedIndicators?.[0], {
+    enabled: Boolean(syncedIndicators?.[0]),
+  });
 
   const {
     layers: { [LAYER_ID]: layer },
diff --git a/client/src/containers/analysis-visualization/analysis-legend/material-legend-item/component.tsx b/client/src/containers/analysis-visualization/analysis-legend/material-legend-item/component.tsx
index c1ef5cf8c..177570386 100644
--- a/client/src/containers/analysis-visualization/analysis-legend/material-legend-item/component.tsx
+++ b/client/src/containers/analysis-visualization/analysis-legend/material-legend-item/component.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
 
-import { useAppSelector, useAppDispatch } from 'store/hooks';
+import { useAppSelector, useAppDispatch, useSyncIndicators } from 'store/hooks';
 import { analysisMap, setLayer } from 'store/features/analysis/map';
 import { analysisFilters } from 'store/features/analysis';
 import LegendTypeChoropleth from 'components/legend/types/choropleth';
@@ -19,7 +19,8 @@ const LAYER_ID = 'material';
 
 const MaterialLayer = () => {
   const dispatch = useAppDispatch();
-  const { indicator, materialId } = useAppSelector(analysisFilters);
+  const { materialId } = useAppSelector(analysisFilters);
+  const [syncedIndicators] = useSyncIndicators();
 
   const {
     layers: { [LAYER_ID]: layer },
@@ -39,7 +40,7 @@ const MaterialLayer = () => {
           layer: {
             metadata: {
               legend: {
-                id: `${LAYER_ID}-${indicator.value}`,
+                id: `${LAYER_ID}-${syncedIndicators?.[0]}`,
                 type: 'basic',
                 name: `${material.metadata.name}`,
                 unit: data.metadata.unit,
diff --git a/client/src/containers/analysis-visualization/analysis-table/component.tsx b/client/src/containers/analysis-visualization/analysis-table/component.tsx
index e097ab612..f8d3894b3 100644
--- a/client/src/containers/analysis-visualization/analysis-table/component.tsx
+++ b/client/src/containers/analysis-visualization/analysis-table/component.tsx
@@ -7,7 +7,7 @@ import { ArrowLeftIcon } from '@heroicons/react/solid';
 import ComparisonCell from './comparison-cell/component';
 import ChartCell from './chart-cell';
 
-import { useAppSelector } from 'store/hooks';
+import { useAppSelector, useSyncIndicators, useSyncTableDetailView } from 'store/hooks';
 import { filtersForTabularAPI } from 'store/features/analysis/selector';
 import { scenarios } from 'store/features/analysis/scenarios';
 import { useIndicators } from 'hooks/indicators';
@@ -23,7 +23,6 @@ import { Button } from 'components/button';
 import Table from 'components/table/component';
 import { formatNumber } from 'utils/number-format';
 import { DEFAULT_PAGE_SIZES } from 'components/table/pagination/constants';
-import { useIndicatorParam } from 'utils/indicator-param';
 import { handleResponseError } from 'services/api';
 
 import type {
@@ -62,10 +61,15 @@ const AnalysisTable = () => {
     };
   }, [expandedState, paginationState, rowSelectionState, sortingState]);
 
+  const [syncedIndicators, setSyncedIndicators] = useSyncIndicators();
+  const [syncedDetailView, setSyncedDetailView] = useSyncTableDetailView();
+
+  const selectedIndicators = syncedIndicators;
+
   const { scenarioToCompare, isComparisonEnabled, currentScenario } = useAppSelector(scenarios);
   const { data: indicators } = useIndicators(
     { 'filter[status]': 'active' },
-    { select: (data) => data.data },
+    { select: (data) => data?.data },
   );
   const downloadImpactData = useDownloadImpactData({
     onSuccess: () => {
@@ -88,7 +92,7 @@ const AnalysisTable = () => {
     onError: handleResponseError,
   });
 
-  const filters = useAppSelector(filtersForTabularAPI);
+  const { indicatorId, ...restFilters } = useAppSelector(filtersForTabularAPI);
 
   const useIsComparison = useCallback(
     (table: ImpactRowType<ComparisonMode>[]): table is ImpactRowType<true | 'scenario'>[] => {
@@ -104,22 +108,23 @@ const AnalysisTable = () => {
     [isComparisonEnabled, currentScenario],
   );
 
-  const { indicatorId, ...restFilters } = filters;
-
   const isEnable =
-    !!indicatorId &&
     !!indicators?.length &&
-    !!filters.startYear &&
-    !!filters.endYear &&
-    filters.endYear !== filters.startYear;
+    !!restFilters.startYear &&
+    !!restFilters.endYear &&
+    restFilters.endYear !== restFilters.startYear;
 
   const indicatorIds = useMemo(() => {
-    if (indicatorId === 'all') {
-      return indicators.map((indicator) => indicator.id);
+    if (Array.isArray(selectedIndicators)) {
+      return selectedIndicators.map((id) => id);
+    }
+
+    if (selectedIndicators && !Array.isArray(selectedIndicators)) {
+      return [selectedIndicators];
     }
-    if (indicatorId) return [indicatorId];
-    return [];
-  }, [indicators, indicatorId]);
+
+    return indicators.map((indicator) => indicator.id);
+  }, [indicators, selectedIndicators]);
 
   const sortingParams = useMemo(() => {
     if (!!sortingState.length) {
@@ -134,9 +139,9 @@ const AnalysisTable = () => {
   const params = useMemo(
     () => ({
       indicatorIds,
-      startYear: filters.startYear,
-      endYear: filters.endYear,
-      groupBy: filters.groupBy,
+      startYear: restFilters.startYear,
+      endYear: restFilters.endYear,
+      groupBy: restFilters.groupBy,
       ...restFilters,
       ...sortingParams,
       scenarioId: currentScenario,
@@ -145,9 +150,6 @@ const AnalysisTable = () => {
     }),
     [
       currentScenario,
-      filters.endYear,
-      filters.groupBy,
-      filters.startYear,
       indicatorIds,
       paginationState.pageIndex,
       paginationState.pageSize,
@@ -293,30 +295,40 @@ const AnalysisTable = () => {
   const [tableData, setTableData] = useState<ImpactRowType<ComparisonMode>[]>([]);
 
   useEffect(() => {
-    if (indicatorId !== 'all') {
-      // A single indicator is selected so we force its expansion
-      setTableData(initialTableData[0]?.children);
-    } else {
-      // All indicators are selected and no indicator is expanded
+    // ? a single indicator is expanded
+    if (syncedDetailView) {
+      setTableData(initialTableData.find((row) => row.indicatorId === syncedDetailView)?.children);
+    }
+
+    //  ? several indicators are selected
+    if (selectedIndicators && !syncedDetailView) {
+      setTableData(initialTableData.filter((row) => selectedIndicators.includes(row.indicatorId)));
+    }
+
+    // ? all indicators are selected
+    if (!selectedIndicators?.length && !syncedDetailView) {
       setTableData(initialTableData);
     }
+
     setExpandedState(null);
     setRowSelectionState({});
-  }, [indicatorId, initialTableData]);
-
-  const setIndicatorParam = useIndicatorParam();
+  }, [selectedIndicators, initialTableData, syncedDetailView]);
 
   const handleExitExpanded = useCallback(() => {
     setExpandedState({});
-    setIndicatorParam('all');
-  }, [setIndicatorParam]);
+    setSyncedDetailView(null);
+
+    if (syncedIndicators?.length === 1) {
+      setSyncedIndicators(null);
+    }
+  }, [setSyncedDetailView, syncedIndicators, setSyncedIndicators]);
 
   const handleExpandRow = useCallback(
     (indicatorId: string) => {
       setExpandedState({});
-      setIndicatorParam(indicatorId);
+      setSyncedDetailView(indicatorId);
     },
-    [setIndicatorParam],
+    [setSyncedDetailView],
   );
 
   const isComparison = useIsComparison(tableData);
@@ -329,10 +341,9 @@ const AnalysisTable = () => {
     [isComparison, isScenarioComparison],
   );
 
-  const expanded = useMemo(
-    () => (indicatorId === 'all' ? null : indicators.find((i) => i.id === indicatorId)),
-    [indicatorId, indicators],
-  );
+  const expanded = useMemo(() => {
+    return indicators.find((i) => i.id === syncedDetailView);
+  }, [syncedDetailView, indicators]);
 
   const comparisonColumn = useCallback(
     <Mode extends ComparisonMode>(year: number): ColumnDefinition<ImpactRowType<Mode>> => {
@@ -490,7 +501,7 @@ const AnalysisTable = () => {
     <Mode extends ComparisonMode>(): TableProps<ImpactRowType<Mode>> & {
       firstProjectedYear: number;
     } => ({
-      showPagination: indicatorId !== 'all',
+      showPagination: Boolean(selectedIndicators),
       paginationProps: {
         totalItems: metadata.totalItems,
         totalPages: metadata.totalPages,
@@ -503,7 +514,7 @@ const AnalysisTable = () => {
       onPaginationChange: setPaginationState,
       onExpandedChange: setExpandedState,
       isLoading: isFetching,
-      enableExpanding: indicatorId !== 'all',
+      enableExpanding: Boolean(syncedDetailView),
       data: (tableData as ImpactRowType<Mode>[]) || [],
       columns: baseColumns as ColumnDefinition<ImpactRowType<Mode>>[],
       handleExpandedChange,
@@ -513,11 +524,12 @@ const AnalysisTable = () => {
       metadata,
       tableState,
       isFetching,
-      indicatorId,
       tableData,
       baseColumns,
       handleExpandedChange,
       firstProjectedYear,
+      selectedIndicators,
+      syncedDetailView,
     ],
   );
 
diff --git a/client/src/containers/analysis-visualization/analysis-table/types.d.ts b/client/src/containers/analysis-visualization/analysis-table/types.d.ts
index 5c3fcb06c..d81761694 100644
--- a/client/src/containers/analysis-visualization/analysis-table/types.d.ts
+++ b/client/src/containers/analysis-visualization/analysis-table/types.d.ts
@@ -40,6 +40,7 @@ export type ImpactRowType<
       children?: this[];
       name: string;
       values: ImpactTableValueItem<Comparison>[];
+      indicatorId?: string;
     };
 
 export type ImpactTableValueItem<Comparison extends ComparisonMode> = Comparison extends false
diff --git a/client/src/containers/mode-control/component.tsx b/client/src/containers/mode-control/component.tsx
index eecbddafe..a5e870a64 100644
--- a/client/src/containers/mode-control/component.tsx
+++ b/client/src/containers/mode-control/component.tsx
@@ -1,15 +1,17 @@
 import { ChartPieIcon, MapIcon, TableIcon } from '@heroicons/react/outline';
 import { useRouter } from 'next/router';
 
-import { useAppSelector } from 'store/hooks';
+import { useAppSelector, useSyncIndicators } from 'store/hooks';
 import { analysisUI } from 'store/features/analysis/ui';
 import ButtonGroup, { LinkGroupItem } from 'components/button-group';
 
-const MODES: string[] = ['map', 'table', 'chart'];
+const MODES = ['map', 'table', 'chart'] as const;
 
 const ModeControl: React.FC = () => {
   const { visualizationMode } = useAppSelector(analysisUI);
   const { query } = useRouter();
+  const [syncedIndicators] = useSyncIndicators();
+  const { detail, ...restQuery } = query;
 
   return (
     <ButtonGroup>
@@ -17,7 +19,22 @@ const ModeControl: React.FC = () => {
         <LinkGroupItem
           key={mode}
           active={visualizationMode === mode}
-          href={{ pathname: `/analysis/${mode}`, query }}
+          href={{
+            pathname: `/analysis/${mode}`,
+            query: {
+              ...restQuery,
+              ...(mode === 'map' && {
+                ...(syncedIndicators?.length >= 1 && {
+                  indicators: syncedIndicators?.[0],
+                }),
+              }),
+              ...(mode === 'table' && {
+                ...(syncedIndicators?.length === 1 && {
+                  detail: syncedIndicators?.[0],
+                }),
+              }),
+            },
+          }}
           data-testid={`mode-control-${mode}`}
         >
           {mode === 'map' && <MapIcon className="h-6 w-6" aria-hidden="true" />}
diff --git a/client/src/hooks/h3-data/utils.ts b/client/src/hooks/h3-data/utils.ts
index 8e3785e7e..65c499696 100644
--- a/client/src/hooks/h3-data/utils.ts
+++ b/client/src/hooks/h3-data/utils.ts
@@ -18,7 +18,7 @@ type ScalesType = ScaleOrdinal<H3Item['v'], H3Item['c']> | ScaleThreshold<H3Item
 
 export const storeToQueryParams = ({
   startYear,
-  indicator,
+  indicators,
   materials,
   businessUnits,
   t1Suppliers,
@@ -29,7 +29,7 @@ export const storeToQueryParams = ({
 }: Partial<AnalysisFiltersState & ScenariosState>) => {
   return {
     year: startYear,
-    indicatorId: indicator?.value === 'all' ? null : indicator?.value,
+    indicatorId: indicators?.[0] || null,
     ...(materials?.length ? { materialIds: materials?.map(({ value }) => value) } : {}),
     ...(t1Suppliers?.length ? { t1SupplierIds: t1Suppliers?.map(({ value }) => value) } : {}),
     ...(producers?.length ? { producerIds: producers?.map(({ value }) => value) } : {}),
diff --git a/client/src/hooks/layers/impact.ts b/client/src/hooks/layers/impact.ts
index cc0b134de..14b4db77a 100644
--- a/client/src/hooks/layers/impact.ts
+++ b/client/src/hooks/layers/impact.ts
@@ -2,7 +2,9 @@ import { useEffect, useMemo } from 'react';
 import { useRouter } from 'next/router';
 import { omit } from 'lodash-es';
 
-import { useAppDispatch, useAppSelector } from 'store/hooks';
+import { useIndicator } from '../indicators';
+
+import { useAppDispatch, useAppSelector, useSyncIndicators } from 'store/hooks';
 import { analysisFilters } from 'store/features/analysis/filters';
 import { analysisMap, setLayer, setLayerDeckGLProps } from 'store/features/analysis/map';
 import { formatNumber } from 'utils/number-format';
@@ -23,6 +25,7 @@ export const useImpactLayer = () => {
   const isComparisonEnabled = !!compareScenarioId;
   const { comparisonMode } = useAppSelector(scenarios);
   const colorKey = !!compareScenarioId ? 'compare' : 'impact';
+  const [syncedIndicators] = useSyncIndicators();
 
   const {
     layers: { impact: impactLayer },
@@ -32,14 +35,14 @@ export const useImpactLayer = () => {
     () =>
       storeToQueryParams({
         ...filters,
+        indicators: syncedIndicators?.[0] ? [syncedIndicators?.[0]] : undefined,
         currentScenario: scenarioId as string,
         scenarioToCompare: compareScenarioId as string,
         isComparisonEnabled,
       }),
-    [compareScenarioId, filters, isComparisonEnabled, scenarioId],
+    [compareScenarioId, filters, isComparisonEnabled, scenarioId, syncedIndicators],
   );
 
-  const { indicator } = filters;
   const { year } = params;
 
   const normalQuery = useH3ImpactData(params, { enabled: !isComparisonEnabled });
@@ -57,6 +60,10 @@ export const useImpactLayer = () => {
 
   const { data, isSuccess, isFetched } = query;
 
+  const { data: indicator } = useIndicator(syncedIndicators?.[0], {
+    enabled: Boolean(syncedIndicators?.[0]),
+  });
+
   // Populating legend
   useEffect(() => {
     if (data && isSuccess && indicator) {
@@ -67,9 +74,9 @@ export const useImpactLayer = () => {
             loading: query.isFetching,
             metadata: {
               legend: {
-                id: `impact-${indicator.value}-${isComparisonEnabled || 'compare'}`,
+                id: `impact-${indicator.id}-${isComparisonEnabled || 'compare'}`,
                 type: 'basic',
-                name: `${indicator.label} in ${year}`,
+                name: `${indicator.name} in ${year}`,
                 unit: data.metadata.unit,
                 min: !!data.metadata.quantiles.length && formatNumber(data.metadata.quantiles[0]),
                 items: data.metadata.quantiles
diff --git a/client/src/pages/analysis/chart.tsx b/client/src/pages/analysis/chart.tsx
index ab5cccb84..9170659ec 100644
--- a/client/src/pages/analysis/chart.tsx
+++ b/client/src/pages/analysis/chart.tsx
@@ -3,39 +3,38 @@ import classNames from 'classnames';
 import { dehydrate } from '@tanstack/react-query';
 
 import { auth } from '@/pages/api/auth/[...nextauth]';
-import { useAppSelector, useAppDispatch } from 'store/hooks';
-import { setVisualizationMode } from 'store/features/analysis';
-import { analysisFilters } from 'store/features/analysis/filters';
-import { useIndicators } from 'hooks/indicators';
-import useEffectOnce from 'hooks/once';
-import ApplicationLayout from 'layouts/application';
-import AnalysisLayout from 'layouts/analysis';
-import AnalysisChart from 'containers/analysis-chart';
-import AnalysisDynamicMetadata from 'containers/analysis-visualization/analysis-dynamic-metadata';
-import Loading from 'components/loading';
-import TitleTemplate from 'utils/titleTemplate';
-import { tasksSSR } from 'services/ssr';
+import { useAppDispatch, useSyncIndicators } from '@/store/hooks';
+import { setVisualizationMode } from '@/store/features/analysis';
+import { useIndicators } from '@/hooks/indicators';
+import useEffectOnce from '@/hooks/once';
+import ApplicationLayout from '@/layouts/application';
+import AnalysisLayout from '@/layouts/analysis';
+import AnalysisChart from '@/containers/analysis-chart';
+import AnalysisDynamicMetadata from '@/containers/analysis-visualization/analysis-dynamic-metadata';
+import Loading from '@/components/loading';
+import TitleTemplate from '@/utils/titleTemplate';
+import { tasksSSR } from '@/services/ssr';
 import getQueryClient from '@/lib/react-query';
 
 import type { ReactElement } from 'react';
 import type { NextPageWithLayout } from 'pages/_app';
-import type { Indicator } from 'types';
 import type { GetServerSideProps } from 'next';
 
 const ChartPage: NextPageWithLayout = () => {
   const dispatch = useAppDispatch();
-  const { indicator } = useAppSelector(analysisFilters);
+  const [syncedIndicators] = useSyncIndicators();
 
-  // Show as many charts as there are indicators selected
-  const { data, isLoading } = useIndicators({ 'filter[status]': 'active' });
+  const { data, isLoading } = useIndicators(
+    { 'filter[status]': 'active' },
+    {
+      select: (data) => data?.data,
+    },
+  );
 
-  const activeIndicators: Indicator[] = useMemo(() => {
-    if (indicator?.value === 'all') return data?.data;
-    if (data?.data.length) {
-      return data.data.filter((indicatorData) => indicatorData.id === indicator?.value);
-    }
-    return [];
-  }, [data, indicator]);
+  const activeIndicators = useMemo(() => {
+    if (!syncedIndicators) return data;
+    return data.filter(({ id }) => syncedIndicators.includes(id));
+  }, [data, syncedIndicators]);
 
   useEffectOnce(() => {
     dispatch(setVisualizationMode('chart'));
diff --git a/client/src/store/features/analysis/filters.ts b/client/src/store/features/analysis/filters.ts
index 01a93968b..894edfcfb 100644
--- a/client/src/store/features/analysis/filters.ts
+++ b/client/src/store/features/analysis/filters.ts
@@ -3,13 +3,13 @@ import { createSlice } from '@reduxjs/toolkit';
 import type { Option } from 'components/forms/select';
 import type { PayloadAction } from '@reduxjs/toolkit';
 import type { RootState } from 'store';
-import type { Indicator, Material } from 'types';
+import type { Material } from 'types';
 import type { LocationTypes } from 'containers/interventions/enums';
 
 export type AnalysisFiltersState = {
   layer: 'impact' | 'risk' | 'material' | 'water';
   indicator: Option;
-  indicators: Indicator[];
+  indicators: string[];
   by: string;
   startYear: number;
   endYear: number;
diff --git a/client/src/store/hooks.ts b/client/src/store/hooks.ts
index 81a42aaf0..4e29a116a 100644
--- a/client/src/store/hooks.ts
+++ b/client/src/store/hooks.ts
@@ -1,4 +1,5 @@
 import { useDispatch, useSelector } from 'react-redux';
+import { parseAsArrayOf, parseAsString, useQueryState } from 'nuqs';
 
 import type { TypedUseSelectorHook } from 'react-redux';
 import type { RootState, AppDispatch } from '.';
@@ -7,3 +8,11 @@ import type { RootState, AppDispatch } from '.';
 // https://redux.js.org/recipes/usage-with-typescript#define-typed-hooks
 export const useAppDispatch: () => AppDispatch = useDispatch;
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
+
+export const useSyncIndicators = () => {
+  return useQueryState('indicators', parseAsArrayOf(parseAsString));
+};
+
+export const useSyncTableDetailView = () => {
+  return useQueryState('detail', parseAsString);
+};
diff --git a/client/src/types.d.ts b/client/src/types.d.ts
index 3c1180a3d..f50461fe9 100644
--- a/client/src/types.d.ts
+++ b/client/src/types.d.ts
@@ -117,6 +117,7 @@ export interface Indicator {
   type: 'indicators';
   unit?: Unit;
   metadata: IndicatorMetadata;
+  category: string;
 }
 
 export type Group = {
diff --git a/client/src/utils/indicator-param.ts b/client/src/utils/indicator-param.ts
deleted file mode 100644
index d78084d8d..000000000
--- a/client/src/utils/indicator-param.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useRouter } from 'next/router';
-
-export const useIndicatorParam = () => {
-  const { query = {}, replace } = useRouter();
-  return (indicator: string) => {
-    replace({ query: { ...query, indicator } }, undefined, {
-      shallow: true,
-    });
-  };
-};
diff --git a/client/yarn.lock b/client/yarn.lock
index 3f7f9f1ab..0afadd6ba 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -7421,6 +7421,7 @@ __metadata:
     maplibre-gl: "npm:3.6.2"
     next: "npm:14.2.2"
     next-auth: "npm:4.24.7"
+    nuqs: "npm:1.17.2"
     nyc: "npm:15.1.0"
     nyc-report-lcov-absolute: "npm:1.0.0"
     postcss: "npm:8.4.31"
@@ -7993,6 +7994,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mitt@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "mitt@npm:3.0.1"
+  checksum: 10/287c70d8e73ffc25624261a4989c783768aed95ecb60900f051d180cf83e311e3e59865bfd6e9d029cdb149dc20ba2f128a805e9429c5c4ce33b1416c65bbd14
+  languageName: node
+  linkType: hard
+
 "mjolnir.js@npm:^2.7.0":
   version: 2.7.1
   resolution: "mjolnir.js@npm:2.7.1"
@@ -8305,6 +8313,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nuqs@npm:1.17.2":
+  version: 1.17.2
+  resolution: "nuqs@npm:1.17.2"
+  dependencies:
+    mitt: "npm:^3.0.1"
+  peerDependencies:
+    next: ">=13.4 <14.0.2 || ^14.0.3"
+  checksum: 10/26390678234ff08e6a8bb5a9a31c25d8b7496630a0d018147503c412c206aee22eae6d4daf485b7ba9cb32dbd4ef6973f4a558c97663222ee1c6cd734a4b887e
+  languageName: node
+  linkType: hard
+
 "nyc-report-lcov-absolute@npm:1.0.0":
   version: 1.0.0
   resolution: "nyc-report-lcov-absolute@npm:1.0.0"