fix bug in MultiSelectValueFacet

Author: craigrbarnes

packages/frontend/src/components/facets/MultiSelectValueFacet.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useCallback } from 'react';
 import { EnumFacetResponse, FacetCardProps, FacetDataHooks } from './types';
 import { MultiSelect, Tooltip } from '@mantine/core';
 import {
@@ -108,6 +108,7 @@ const MultiSelectValueFacet: React.FC<ExactValueProps> = ({
 
   useDeepCompareEffect(() => {
     if (!facetValue || isFacetEmpty(facetValue)) {
+      console.log('filters', '[]');
       setSelectedValues([]);
     } else if (instanceOfIncludesExcludes(facetValue)) {
       const filters = facetValue.operands.map((x: number | string) =>
@@ -117,42 +118,13 @@ const MultiSelectValueFacet: React.FC<ExactValueProps> = ({
     }
   }, [facetValue]);
 
-  // useDeepCompareEffect(() => {
-  //   const setValues = (values: string[]) => {
-  //     if (values.length > 0) {
-  //       if (facetValue && instanceOfIncludesExcludes(facetValue)) {
-  //         // updating facet value
-  //         updateFacetFilters(field, {
-  //           ...facetValue,
-  //           operands: values,
-  //         });
-  //       }
-  //       if (facetValue === undefined) {
-  //         // TODO: Assuming Includes by default but this might change to Include|Excludes
-  //         updateFacetFilters(field, {
-  //           operator: 'in',
-  //           field: field,
-  //           operands: values,
-  //         });
-  //       }
-  //     }
-  //     // no values remove the filter
-  //     else {
-  //       clearFilters(field);
-  //     }
-  //   };
-  //
-  //   setValues(selectedValues);
-  // }, [selectedValues]);
-
-  useDeepCompareEffect(() => {
-    const setValues = (values: string[]) => {
+  // update the filter which will also update selected values
+  const updateFilters = useCallback(
+    (values: string[]) => {
       updateFacetEnum(field, values, updateFacetFilters, clearFilters);
-    };
-
-    console.log('selectedValues: ', selectedValues);
-    setValues(selectedValues);
-  }, [selectedValues]);
+    },
+    [clearFilters, field, updateFacetFilters],
+  );
 
   return (
     <div
@@ -184,7 +156,7 @@ const MultiSelectValueFacet: React.FC<ExactValueProps> = ({
             comboboxProps={{ shadow: 'md' }}
             aria-label="enter value to add filter"
             value={selectedValues}
-            onChange={setSelectedValues}
+            onChange={updateFilters}
             searchable
             data={dataValues}
             limit={10}

packages/frontend/src/features/CohortBuilder/CohortPanel.tsx

@@ -235,17 +235,12 @@ export const CohortPanel = ({
     <div className="flex flex-col mt-3 relative px-4 bg-base-light w-full">
       <LoadingOverlay visible={isAggsQueryFetching} />
       <CohortManager index={index} />
+
+      {/* Flex container to ensure proper 25/75 split */}
       <div className="flex w-full">
-        <div className="flex w-1/4">
-          {filters?.tabs === undefined ? null : filters?.tabs.length > 1 ? (
-            <DropdownPanel
-              index={index}
-              filters={filters}
-              tabTitle={tabTitle}
-              facetDefinitions={facetDefinitions}
-              facetDataHooks={facetDataHooks}
-            />
-          ) : (
+        {/* Left panel - 25% */}
+        <div id="cohort-filters-content" className="flex-shrink-0 w-1/4 ">
+          {filters?.tabs && (
             <DropdownPanel
               index={index}
               filters={filters}
@@ -255,7 +250,10 @@ export const CohortPanel = ({
             />
           )}
         </div>
-        <div className="flex flex-col w-full ml-4 ">
+
+        {/* Right content - 75% */}
+        <div id="cohort-builder-content" className="flex flex-col w-3/4 pl-4">
+          {/* Top row with DownloadsPanel and CountsValue */}
           <div className="flex justify-between mb-2 ml-2">
             <DownloadsPanel
               dropdowns={dropdowns ?? {}}
@@ -266,28 +264,29 @@ export const CohortPanel = ({
               fields={table?.fields ?? []}
               filter={cohortFilters}
             />
-
             <CountsValue
               label={guppyConfig?.nodeCountTitle || toDisplayName(index)}
               counts={counts}
               isSuccess={isCountSuccess}
             />
           </div>
+
+          {/* Charts Section */}
           <Charts
             charts={summaryCharts}
             data={data ?? EmptyData}
             counts={counts}
             isSuccess={isSuccess}
             numCols={numCols}
           />
-          {table?.enabled ? (
+
+          {/* Table Section */}
+          {table?.enabled && (
             <div className="mt-2 flex flex-col">
               <div className="grid">
                 <ExplorerTable index={index} tableConfig={table} />
               </div>
             </div>
-          ) : (
-            false
           )}
         </div>
       </div>

packages/frontend/src/features/CohortBuilder/FiltersPanel.tsx

@@ -25,7 +25,7 @@ export const FiltersPanel = ({
           undefined,
           false,
           facetDefinition.label,
-          'w-full',
+          undefined,
         );
       })}
     </div>

packages/frontend/src/features/CohortBuilder/Panels/DropdownPanel.tsx

@@ -46,7 +46,7 @@ export const DropdownPanel = ({
   }, [] as FacetDefinition[]);
 
   return (
-    <Stack align="flex-start" className="mx-3 w-full">
+    <Stack align="flex-start">
       <Group justify="space-between" className="w-full">
         <Text size="xl" fw={800}>
           Filters
@@ -58,7 +58,7 @@ export const DropdownPanel = ({
           {allFiltersCollapsed ? 'Expand All' : 'Collapse All'}
         </button>
       </Group>
-      <Stack className="w-full bg-base-max py-4 px-2 h-full">
+      <Stack className="bg-base-max py-4 px-2 h-full w-full">
         <Group gap="xs" justify="space-between">
           <div className="flex items-center space-x-1">
             <Icon

packages/sampleCommons/src/pages/_app.tsx

@@ -12,8 +12,7 @@ import {
   Fonts,
   createMantineTheme,
   SessionConfiguration,
-  // registerCohortDiscoveryApp,
-  registerCohortDistanceApp,
+  registerExplorerDefaultCellRenderers,
   registerCohortBuilderDefaultPreviewRenderers,
   registerMetadataSchemaApp,
 } from '@gen3/frontend';
@@ -65,13 +64,13 @@ const Gen3App = ({
     // one time init
     // if (
     //   process.env.NEXT_PUBLIC_FARO_COLLECTOR_URL &&
-    //   process.env.NEXT_PUBLIC_FARO_APP_ENVIRONMENT != "local" &&
+    //   process.env.NEXT_PBLIC_FARO_APP_ENVIRONMENT != "local" &&
     //   !faroRef.current
     // ) {
     if (!faroRef.current) faroRef.current = initGrafanaFaro();
     //  registerCohortDiscoveryApp();
-    registerCohortDistanceApp();
     registerMetadataSchemaApp();
+    registerExplorerDefaultCellRenderers();
     registerCohortBuilderDefaultPreviewRenderers();
     registerCohortTableCustomCellRenderers();
     registerCustomExplorerDetailsPanels();