applies feedback

Vizzuality · May 14, 2024 · 3b495a8 · 3b495a8
1 parent 5e06609
commit 3b495a8
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 31 deletions.
diff --git a/client/package.json b/client/package.json
@@ -79,7 +79,7 @@
     "nuqs": "1.17.2",
     "postcss": "8.4.31",
     "query-string": "8.1.0",
-    "rc-tree": "5.7.0",
+    "rc-tree": "5.8.7",
     "react": "18.2.0",
     "react-day-picker": "8.10.0",
     "react-dom": "18.2.0",

diff --git a/client/src/components/tree-select/component.tsx b/client/src/components/tree-select/component.tsx
@@ -61,6 +61,7 @@ const InnerTreeSelect = <IsMulti extends boolean>(
     current: currentRaw,
     loading,
     maxBadges = 5,
+    selectedBadgeLabel = 'more selected',
     multiple,
     options = [],
     placeholder = '',
@@ -275,6 +276,11 @@ const InnerTreeSelect = <IsMulti extends boolean>(
     [checkedKeys, multiple, onChange, options],
   );
 
+  const handleRemoveAll = useCallback(() => {
+    setCheckedKeys([]);
+    onChange?.([] as TreeSelectProps<IsMulti>['current']);
+  }, [onChange]);
+
   // Current selection
   useEffect(() => {
     // Clear selection when current is empty
@@ -430,13 +436,18 @@ const InnerTreeSelect = <IsMulti extends boolean>(
                   </Badge>
                 ))}
               {!badgesToShow && currentOptions?.length > 0 && (
-                <Badge className="whitespace-nowrap text-xs" theme="big">
-                  {currentOptions.length - badgesToShow} selected
+                <Badge
+                  className="whitespace-nowrap text-xs"
+                  theme="big"
+                  removable
+                  onClick={handleRemoveAll}
+                >
+                  {currentOptions.length - badgesToShow} {selectedBadgeLabel}
                 </Badge>
               )}
               {currentOptions?.length > badgesToShow && Boolean(badgesToShow) && (
                 <Badge className="whitespace-nowrap text-xs" theme="big">
-                  {currentOptions.length - badgesToShow} more selected
+                  {currentOptions.length - badgesToShow} {selectedBadgeLabel}
                 </Badge>
               )}
             </>

diff --git a/client/src/components/tree-select/types.d.ts b/client/src/components/tree-select/types.d.ts
@@ -10,6 +10,7 @@ export type TreeSelectOption<T = string> = {
 interface CommonTreeProps<T = string> {
   id?: string; // for testing purposes
   maxBadges?: number;
+  selectedBadgeLabel?: string;
   placeholder?: string;
   showSearch?: boolean;
   loading?: boolean;

diff --git a/client/src/components/ui/select.tsx b/client/src/components/ui/select.tsx
@@ -26,11 +26,11 @@ const SelectTrigger = React.forwardRef<
     <SelectPrimitive.Icon asChild>
       <>
         <ChevronDownIcon
-          className="hidden h-4 w-4 text-gray-900 group-data-[state=closed]:block"
+          className="hidden h-4 min-h-4 w-4 min-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"
+          className="hidden h-4 min-h-4 w-4 min-w-4 text-gray-900 group-data-[state=open]:block"
           aria-hidden="true"
         />
       </>

diff --git a/client/src/containers/analysis-visualization/analysis-filters/indicators/index.tsx b/client/src/containers/analysis-visualization/analysis-filters/indicators/index.tsx
@@ -33,9 +33,8 @@ const IndicatorsFilter = () => {
       const categoryOptions = indicators.map(
         (indicator) =>
           ({
-            label: indicator.name,
+            label: indicator.metadata?.short_name,
             value: indicator.id,
-            // disabled: indicator.status === 'inactive',
           }) satisfies TreeSelectOption<(typeof indicator)['id']>,
       );
       return {
@@ -104,7 +103,7 @@ const IndicatorsFilter = () => {
   }, [initialSelectedOptions]);
 
   return (
-    <div className="h-full w-[235px]">
+    <div className="h-full w-[325px]">
       <TreeSelect
         id="indicators"
         multiple
@@ -115,6 +114,7 @@ const IndicatorsFilter = () => {
         current={selectedOptions}
         placeholder="All indicators"
         maxBadges={0}
+        selectedBadgeLabel={`indicator${selectedOptions?.length > 1 ? 's' : ''} selected`}
       />
     </div>
   );

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
@@ -34,7 +34,7 @@ const IndicatorsMapFilter = () => {
     const categoryGroups = categories.map((category) => {
       const indicators = data?.filter((indicator) => indicator.category === category);
       const categoryOptions = indicators.map((indicator) => ({
-        label: indicator.name,
+        label: indicator.metadata?.short_name,
         value: indicator.id,
         disabled: indicator.status === 'inactive',
       }));
@@ -46,7 +46,7 @@ const IndicatorsMapFilter = () => {
 
   const indicatorName = useMemo(() => {
     const indicator = data?.find((indicator) => indicator.id === value);
-    return indicator?.name;
+    return indicator?.metadata?.short_name;
   }, [data, value]);
 
   const handleChange = useCallback(
@@ -61,9 +61,11 @@ const IndicatorsMapFilter = () => {
       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);
+    const firstOption = options?.at(0)?.options?.at(0)?.value;
+
+    if (firstOption) {
+      setSyncedIndicators([firstOption]);
+      setValue(firstOption);
     }
   }, [options, syncedIndicators, indicatorName, setSyncedIndicators]);
 

diff --git a/client/src/layouts/analysis/component.tsx b/client/src/layouts/analysis/component.tsx
@@ -42,7 +42,7 @@ const AnalysisLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
         <div
           className={classNames(
             {
-              'absolute left-6 right-6 top-6 z-10 xl:left-12': visualizationMode === 'map',
+              'absolute left-6 right-6 top-6 z-10 xl:left-6': visualizationMode === 'map',
               'p-6': visualizationMode !== 'map',
             },
             'flex flex-wrap justify-between gap-2',

diff --git a/client/src/styles/globals.css b/client/src/styles/globals.css
@@ -135,11 +135,11 @@
 }
 
 .rc-tree .rc-tree-node-content-wrapper {
-  @apply flex flex-row w-full gap-1 overflow-hidden truncate text-ellipsis place-items-center;
+  @apply flex flex-1 gap-1 min-w-0 items-center;
 }
 
 .rc-tree .rc-tree-title {
-  @apply w-full text-gray-900;
+  @apply text-gray-900 overflow-hidden overflow-ellipsis;
 }
 
 .rc-tree .rc-tree-indent-unit {

diff --git a/client/src/types.d.ts b/client/src/types.d.ts
@@ -101,7 +101,7 @@ export interface IndicatorMetadata {
   citation: string[];
   'name code': string;
   resolution: string;
-  'short name': string;
+  short_name: string;
   description: string;
   'indicator type': Autocomplete<`${'landscape' | 'farm'}-level`>;
   'date of content': `${number}-${number}`;

diff --git a/client/yarn.lock b/client/yarn.lock
@@ -7428,7 +7428,7 @@ __metadata:
     prettier: "npm:^3.1.1"
     prettier-plugin-tailwindcss: "npm:^0.5.10"
     query-string: "npm:8.1.0"
-    rc-tree: "npm:5.7.0"
+    rc-tree: "npm:5.8.7"
     react: "npm:18.2.0"
     react-day-picker: "npm:8.10.0"
     react-dom: "npm:18.2.0"
@@ -9183,19 +9183,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-tree@npm:5.7.0":
-  version: 5.7.0
-  resolution: "rc-tree@npm:5.7.0"
+"rc-tree@npm:5.8.7":
+  version: 5.8.7
+  resolution: "rc-tree@npm:5.8.7"
   dependencies:
     "@babel/runtime": "npm:^7.10.1"
     classnames: "npm:2.x"
     rc-motion: "npm:^2.0.1"
     rc-util: "npm:^5.16.1"
-    rc-virtual-list: "npm:^3.4.8"
+    rc-virtual-list: "npm:^3.5.1"
   peerDependencies:
     react: "*"
     react-dom: "*"
-  checksum: 10/9ac1382db60fb634695b0f08adeeea865c3d4f29e9a0b302733f933932d3b09f622f2a7eec3bb63d756a2f23a57f30b90379d68a6e62600875e9a80be5dd27f7
+  checksum: 10/d51b1bdc13408e9f6bed0af5ed312d50923a011139ad8b7166dd4f749afda819d80fad9a063347e2cbfbb9555e09f52976cd9117a1af54f9b5933a0bc49df9b1
   languageName: node
   linkType: hard
 
@@ -9227,18 +9227,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rc-virtual-list@npm:^3.4.8":
-  version: 3.4.11
-  resolution: "rc-virtual-list@npm:3.4.11"
+"rc-util@npm:^5.36.0":
+  version: 5.39.3
+  resolution: "rc-util@npm:5.39.3"
+  dependencies:
+    "@babel/runtime": "npm:^7.18.3"
+    react-is: "npm:^18.2.0"
+  peerDependencies:
+    react: ">=16.9.0"
+    react-dom: ">=16.9.0"
+  checksum: 10/55d7fe0664fbc025473f678ac8db874bcb6e1788f7b2dc785d90713ee3cd25d2a6706a98d456c5fd60e742220a3f52f45cca888d9c322787fc3952a0239737b1
+  languageName: node
+  linkType: hard
+
+"rc-virtual-list@npm:^3.5.1":
+  version: 3.12.0
+  resolution: "rc-virtual-list@npm:3.12.0"
   dependencies:
     "@babel/runtime": "npm:^7.20.0"
     classnames: "npm:^2.2.6"
     rc-resize-observer: "npm:^1.0.0"
-    rc-util: "npm:^5.15.0"
+    rc-util: "npm:^5.36.0"
   peerDependencies:
-    react: "*"
-    react-dom: "*"
-  checksum: 10/e88e19f74c8759637e690544504da626ae610b6be7df9f4e2871b5b6cdb566d42c0295547bfbd2bbb450737794c20a04330f2bc5ac4d2fa68512d7038bbb057c
+    react: ">=16.9.0"
+    react-dom: ">=16.9.0"
+  checksum: 10/55b46da1e94b5da220e4de1b160efc5df4be4fd4c365b508de45a3df6aa9ac62e7d2671f0385c9c712a5019348e43923124877e0923b609837caef1c9a44e197
   languageName: node
   linkType: hard
 
@@ -9326,6 +9339,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-is@npm:^18.2.0":
+  version: 18.3.1
+  resolution: "react-is@npm:18.3.1"
+  checksum: 10/d5f60c87d285af24b1e1e7eaeb123ec256c3c8bdea7061ab3932e3e14685708221bf234ec50b21e10dd07f008f1b966a2730a0ce4ff67905b3872ff2042aec22
+  languageName: node
+  linkType: hard
+
 "react-lifecycles-compat@npm:^3.0.4":
   version: 3.0.4
   resolution: "react-lifecycles-compat@npm:3.0.4"