analysis: grouped categories selector

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',
       {

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",

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>

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>
 ));

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(
     {

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}

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>
   );