From 94ddb3496b4d3ad508400d0c01cfbefd75208a02 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/src/components/ui/select.tsx           |  33 ++--
 .../analysis-filters/indicators/component.tsx |  88 ----------
 .../analysis-filters/indicators/index.tsx     | 153 +++++++++++++++++-
 client/src/types.d.ts                         |   1 +
 4 files changed, 171 insertions(+), 104 deletions(-)
 delete mode 100644 client/src/containers/analysis-visualization/analysis-filters/indicators/component.tsx

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-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..e7dbb4b08 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,152 @@
-export { default } from './component';
+import { useCallback, useMemo, useEffect, ComponentProps, Fragment, useState } from 'react';
+import { useRouter } from 'next/router';
+
+import { useAppDispatch, useAppSelector } from 'store/hooks';
+import { analysisUI } from 'store/features/analysis/ui';
+import { setFilter } from 'store/features/analysis/filters';
+import { useIndicators } from 'hooks/indicators';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  SelectLabel,
+  SelectSeparator,
+} from '@/components/ui/select';
+
+const IndicatorsFilter = () => {
+  const { query = {}, replace } = useRouter();
+  const { indicator } = query;
+  const { visualizationMode } = useAppSelector(analysisUI);
+  const dispatch = useAppDispatch();
+  const [value, setValue] = useState<string | undefined>(undefined);
+
+  const { data, isFetching, isFetched } = useIndicators(
+    { sort: 'name' },
+    {
+      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 [
+      ...(visualizationMode !== 'map'
+        ? [
+            {
+              label: 'All indicators',
+              value: 'all',
+              options: [],
+            },
+          ]
+        : []),
+      ...categoryGroups,
+    ];
+  }, [data, visualizationMode]);
+
+  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]) => {
+      replace({ query: { ...query, indicator: value } }, undefined, {
+        shallow: true,
+      });
+
+      dispatch(
+        setFilter({
+          id: 'indicator',
+          value: {
+            label: indicatorName,
+            value,
+          },
+        }),
+      );
+    },
+    [query, replace, indicatorName, dispatch],
+  );
+
+  useEffect(() => {
+    if (indicator) {
+      return setValue(indicator as string);
+    }
+
+    if (visualizationMode === 'map') {
+      if (options?.at(0)?.options?.length) {
+        return setValue(options.at(0).options.at(0).value);
+      }
+    }
+
+    if (options?.length && !options?.at(0)?.options?.length) {
+      return setValue(options.at(0).value);
+    }
+  }, [visualizationMode, options, indicator, indicatorName, dispatch]);
+
+  useEffect(() => {
+    if (indicator && indicatorName) {
+      dispatch(
+        setFilter({
+          id: 'indicator',
+          value: {
+            label: indicatorName,
+            value: indicator,
+          },
+        }),
+      );
+    }
+  }, [dispatch, indicator, indicatorName]);
+
+  return (
+    <Select value={value} onValueChange={handleChange} disabled={!isFetched && isFetching}>
+      <SelectTrigger
+        className="h-full w-[325px] overflow-ellipsis text-left"
+        data-testid="indicators-filter"
+      >
+        <SelectValue placeholder="Select an indicator" />
+      </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 && (
+              <SelectGroup>
+                <SelectLabel>{option.label}</SelectLabel>
+                {option.options.map((indicator) => (
+                  <SelectItem key={indicator.value} value={indicator.value}>
+                    {indicator.label}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            )}
+          </Fragment>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};
+
+export default IndicatorsFilter;
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 = {