fix(vis-type: bar): focus facet selector + sort facets alphabetically (…

…#665) * fix: focus facet selector * fix: lint errors * fix: focusFacetIndex check * chore: add sorting to the facets * chore: add sorting to the facets --------- Co-authored-by: Holger Stitz <holger.stitz@datavisyn.io>
datavisyn · Dec 19, 2024 · 13be442 · 13be442
1 parent 4a46537
commit 13be442
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git a/src/vis/bar/BarChart.tsx b/src/vis/bar/BarChart.tsx
@@ -108,15 +108,16 @@ export function BarChart({
   const allUniqueFacetVals = React.useMemo(() => {
     const set = new Set();
     barData?.facetsColVals?.resolvedValues.forEach((v) => set.add(getLabelOrUnknown(v.val)));
-    return [...set] as string[];
+    const uniqueFacetValues = [...set] as string[];
+    return uniqueFacetValues.sort((a, b) => (a === NAN_REPLACEMENT ? 1 : b === NAN_REPLACEMENT ? -1 : a && b ? a.localeCompare(b) : 0));
   }, [barData?.facetsColVals?.resolvedValues]);
 
   const filteredUniqueFacetVals = React.useMemo(() => {
     const unsorted =
       typeof config?.focusFacetIndex === 'number' && config?.focusFacetIndex < allUniqueFacetVals.length
         ? ([allUniqueFacetVals[config?.focusFacetIndex]] as string[])
         : allUniqueFacetVals;
-    return unsorted.sort((a, b) => (a === NAN_REPLACEMENT || b === NAN_REPLACEMENT ? 1 : a && b ? a.localeCompare(b) : 0));
+    return unsorted.sort((a, b) => (a === NAN_REPLACEMENT ? 1 : b === NAN_REPLACEMENT ? -1 : a && b ? a.localeCompare(b) : 0));
   }, [allUniqueFacetVals, config?.focusFacetIndex]);
 
   const groupColorScale = React.useMemo(() => {
@@ -187,8 +188,8 @@ export function BarChart({
   }, [aggregatedDataMap?.facets, config]);
 
   const shouldRenderFacets = React.useMemo(
-    () => Boolean(config?.facets && barData?.facetsColVals && filteredUniqueFacetVals.length === Object.keys(chartHeightMap).length),
-    [config?.facets, barData?.facetsColVals, filteredUniqueFacetVals.length, chartHeightMap],
+    () => Boolean(config?.facets && barData?.facetsColVals && (config?.focusFacetIndex !== undefined || config?.focusFacetIndex !== null)),
+    [config?.facets, barData?.facetsColVals, config?.focusFacetIndex],
   );
 
   const isGroupedByNumerical = React.useMemo(() => barData?.groupColVals?.type === EColumnTypes.NUMERICAL, [barData?.groupColVals?.type]);

diff --git a/src/vis/bar/components/FocusFacetSelector.tsx b/src/vis/bar/components/FocusFacetSelector.tsx
@@ -6,6 +6,8 @@ import type { ICommonVisProps } from '../../interfaces';
 import { IBarConfig } from '../interfaces';
 
 export function FocusFacetSelector({ config, setConfig, facets }: Pick<ICommonVisProps<IBarConfig>, 'config' | 'setConfig'> & { facets: string[] }) {
+  const isFacetFocused: boolean = React.useMemo(() => config?.focusFacetIndex !== null && config?.focusFacetIndex !== undefined, [config?.focusFacetIndex]);
+
   if (!config?.facets && facets.length === 0) {
     return null;
   }
@@ -17,29 +19,29 @@ export function FocusFacetSelector({ config, setConfig, facets }: Pick<ICommonVi
           key={`focusFacetSelect_${config.focusFacetIndex ?? 0}`}
           placeholder="Select a focus facet"
           data={facets}
-          value={facets[config.focusFacetIndex ?? 0] || ''}
+          value={isFacetFocused ? facets[config.focusFacetIndex ?? 0] : ''}
           onChange={(value) => {
             setConfig?.({ ...config, focusFacetIndex: typeof value === 'string' ? facets.indexOf(value) : value });
           }}
           clearable
         />
-        <Tooltip label="Previous facet" position="top" withArrow>
+        <Tooltip label="Previous facet" position="top" hidden={!isFacetFocused} withArrow withinPortal>
           <ActionIcon
             color="dvGray"
             variant="subtle"
-            disabled={(config.focusFacetIndex ?? 0) === null}
+            disabled={!isFacetFocused}
             onClick={() => {
               setConfig?.({ ...config, focusFacetIndex: ((config.focusFacetIndex ?? 0) - 1 + facets.length) % facets.length });
             }}
           >
             <FontAwesomeIcon icon={faChevronLeft} />
           </ActionIcon>
         </Tooltip>
-        <Tooltip label="Next facet" position="top" withArrow>
+        <Tooltip label="Next facet" position="top" hidden={!isFacetFocused} withArrow withinPortal>
           <ActionIcon
             color="dvGray"
             variant="subtle"
-            disabled={(config.focusFacetIndex ?? 0) === null}
+            disabled={!isFacetFocused}
             onClick={() => {
               setConfig?.({ ...config, focusFacetIndex: ((config.focusFacetIndex ?? 0) + 1) % facets.length });
             }}