fix collapse for RangeFacet

Author: craigrbarnes

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

@@ -111,7 +111,7 @@ const RangeFacet = ({
     <div
       className={`flex flex-col ${
         width ? width : 'mx-1'
-      } bg-base-max relative shadow-lg border-base-lighter border-1 rounded-b-md text-xs transition`}
+      } bg-base-max relative border-base-lighter border-1 rounded-b-md text-xs transition`}
       id={field}
     >
       <FacetControlsHeader
@@ -127,7 +127,9 @@ const RangeFacet = ({
       <div className="card-face bg-base-max">
         <div className="overflow-hidden px-3.5 h-auto">
           <LoadingOverlay visible={!isSuccess} />
-          <div className="flex flex-col gap-y-2 pb-2">
+          <div
+            className={`flex flex-col gap-y-2 pb-2 ${showFilters ? 'h-full' : 'h-0 invisible'}`}
+          >
             <div className="flex gap-x-4 items-center">
               <NumberInput
                 label="Min"
@@ -167,22 +169,17 @@ const RangeFacet = ({
                */
               }
             </div>
-            <div
-              className={showFilters ? 'h-full' : 'h-0 invisible'}
-              aria-hidden={!showFilters}
-            >
-              <RangeSlider
-                mt="md"
-                color="accent.5"
-                thumbSize={20}
-                value={[minMaxValue.from ?? minimum, minMaxValue.to ?? maximum]}
-                min={minimum}
-                max={maximum}
-                onChange={(value) => {
-                  updateFilters(value[0], value[1]);
-                }}
-              />
-            </div>
+            <RangeSlider
+              mt="md"
+              color="accent.5"
+              thumbSize={20}
+              value={[minMaxValue.from ?? minimum, minMaxValue.to ?? maximum]}
+              min={minimum}
+              max={maximum}
+              onChange={(value) => {
+                updateFilters(value[0], value[1]);
+              }}
+            />
           </div>
         </div>
       </div>

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

@@ -40,6 +40,8 @@ export const CohortBuilder = ({
     );
   }
 
+  console.log(TabsLayoutToComponentProp(tabsLayout));
+
   return (
     <div className="w-full">
       <Tabs

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

@@ -239,7 +239,7 @@ export const CohortPanel = ({
       {/* Flex container to ensure proper 25/75 split */}
       <div className="flex w-full">
         {/* Left panel - 25% */}
-        <div id="cohort-filters-content" className="flex-shrink-0 w-1/4 ">
+        <div id="cohort-builder-filters" className="flex-shrink-0 w-1/4 ">
           {filters?.tabs && (
             <DropdownPanel
               index={index}

packages/frontend/src/features/CohortBuilder/types.ts

@@ -36,6 +36,11 @@ export interface ManifestFieldsConfig {
   referenceIdFieldInDataIndex: string;
 }
 
+export interface SharedFilter {
+  filter: string;
+  sharedWith: Record<string, string>;
+}
+
 export interface DataTypeConfig {
   dataType: string;
   nodeCountTitle?: string;
@@ -75,6 +80,7 @@ export interface CohortPanelConfig {
 
 export interface CohortBuilderConfiguration extends ConfigVersionAndName {
   tabsLayout?: 'left' | 'right' | 'center'; // top level tabs layout
+  sharedFilters?: Record<string, SharedFilter>; // enabled for sharing filters across indexes for denormalized data.
   explorerConfig: Array<CohortPanelConfig>;
 }
 

packages/frontend/src/pages/Explorer/Explorer.tsx

@@ -8,6 +8,7 @@ const ExplorerPage = ({
   headerProps,
   footerProps,
   explorerConfig,
+  tabsLayout,
 }: ExplorerPageProps): JSX.Element => {
   if (explorerConfig === undefined) {
     return (
@@ -26,7 +27,7 @@ const ExplorerPage = ({
         key: 'gen3-explorer-page',
       }}
     >
-      <CohortBuilder explorerConfig={explorerConfig} />
+      <CohortBuilder tabsLayout={tabsLayout} explorerConfig={explorerConfig} />
     </NavPageLayout>
   );
 };