@gen3/frontend 0.11.1 → 0.11.12

package/dist/cjs/index.js

@@ -23,13 +23,15 @@ var reactCookie = require('react-cookie');
 var FileSaver = require('file-saver');
 var hooks = require('@mantine/hooks');
 var defaultComposer = require('default-composer');
-var react = require('@iconify/react');
+var react = require('@iconify-icon/react');
 var echarts = require('echarts');
 var victory = require('victory');
-var fa = require('react-icons/fa');
 var tw = require('tailwind-styled-components');
+var form = require('@mantine/form');
 var ri = require('react-icons/ri');
+var fa = require('react-icons/fa');
 var pi = require('react-icons/pi');
+var modals = require('@mantine/modals');
 var Image = require('next/image');
 var Link = require('next/link');
 var ai = require('react-icons/ai');
@@ -45,7 +47,6 @@ var uniq = require('lodash/uniq');
 var sum = require('lodash/sum');
 var lu = require('react-icons/lu');
 require('universal-cookie');
-var modals = require('@mantine/modals');
 var GraphiQL = require('graphiql');
 var router$1 = require('next/dist/client/router');
 var fs = require('fs');
@@ -56,7 +57,6 @@ var redux = require('redux');
 var toolkit = require('@reduxjs/toolkit');
 var idb = require('idb');
 var createWebStorage = require('redux-persist/lib/storage/createWebStorage');
-var form = require('@mantine/form');
 var dynamic = require('next/dynamic');
 var YAML = require('yaml');
 var filesize = require('filesize');
@@ -629,6 +629,27 @@ const toDisplayName = (field)=>{
     if (!fieldName) return 'NotSet';
     return fieldName.split('_').map((w)=>lodash.capitalize(w)).join(' ');
 };
+/*
+  Function to convert counts to a string with units
+  For example: count = 100 units = 'cases' => '100 Cases'
+  Function should handle pluralization
+ */ const toCountsString = (counts, units)=>{
+    if (!counts) return `No ${lodash.capitalize(pluralize(units))}`;
+    // return a string with counts and units handling pluralization
+    const unitDisplay = counts === 1 ? units : pluralize(units);
+    return `${counts.toLocaleString()} ${lodash.capitalize(unitDisplay)}`;
+};
+// Helper function to handle basic pluralization
+const pluralize = (word)=>{
+    // Handle special cases
+    if (word.endsWith('y')) {
+        return word.slice(0, -1) + 'ies';
+    } else if (word.endsWith('s') || word.endsWith('x') || word.endsWith('z') || word.endsWith('ch') || word.endsWith('sh')) {
+        return word + 'es';
+    } else {
+        return word + 's';
+    }
+};
 
 const isArrayOfString = (value)=>{
     return Array.isArray(value) && value.every((element)=>typeof element === 'string');
@@ -2496,10 +2517,11 @@ const HorizontalBarChart = ({ data, valueType, total, showLegendInChart = true }
     const chartDefinition = React.useMemo(()=>{
         return {
             tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                    // Use axis to trigger tooltip
-                    type: 'shadow'
+                trigger: 'item',
+                formatter: function(param) {
+                    const p = lodash.isArray(param) && param.length > 0 ? param[0] : param;
+                    const colorSquare = `<span style="display:inline-block; width:10px; height:10px; background-color:${p.color}; margin-right:5px;"></span>`;
+                    return `${colorSquare}${p.seriesName}: <b>${p.value}</b>`;
                 }
             },
             legend: {
@@ -3395,6 +3417,173 @@ const DEFAULT_MAXIMUM = 100;
 const BAD_DATA_MESSAGE = 'No data for this field';
 const DAYS_IN_YEAR = 365.25;
 
+const SegmentedControl = (props)=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(core$1.SegmentedControl, {
+        classNames: {
+            root: 'bg-base-max h-fit p-0',
+            indicator: 'opacity-0',
+            control: 'z-0 rounded-none border-0 [&:nth-child(2)>label]:rounded-l-md [&:last-child>label]:rounded-r-md [&:last-child>label]:border-r-1',
+            label: `${props?.padding ? `p-${props.padding}` : 'p-0'} text-primary font-semibold data-active:text-base-max data-active:bg-primary data-disabled:bg-base-lightest data-disabled:text-base-lighter
+           border-1 border-r-0 !border-primary rounded-none data-disabled:!border-base-lighter`
+        },
+        ...props
+    });
+};
+
+const ExpanderLabel = tw.div`
+text-accent-content-darker
+p-1
+font-bold
+cursor-pointer
+text-xs
+font-content
+`;
+/**
+ * Component which manages the compact/expanded state of a FacetCard
+ * @param remainingValues - number of remaining values when compact "show 4"
+ * @param isGroupExpanded - true if expanded, false if compact
+ * @param onShowChanged - callback to call when the expand/compact button is clicked
+ */ const FacetExpander = ({ remainingValues, isGroupExpanded, onShowChanged })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: `mt-3 flex flex-row justify-end ${remainingValues > 0 && 'border-t-2'} p-1.5`,
+        children: remainingValues > 0 && !isGroupExpanded ? /*#__PURE__*/ jsxRuntime.jsx("button", {
+            onClick: ()=>onShowChanged(!isGroupExpanded),
+            "data-testid": "plus-icon",
+            children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "flex flex-row flex-nowrap items-center ",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(md.MdAddCircle, {
+                        className: "text-accent",
+                        size: "1rem",
+                        "aria-hidden": "true"
+                    }, "show-more"),
+                    /*#__PURE__*/ jsxRuntime.jsxs(ExpanderLabel, {
+                        children: [
+                            remainingValues,
+                            " more"
+                        ]
+                    })
+                ]
+            })
+        }) : isGroupExpanded ? /*#__PURE__*/ jsxRuntime.jsx("button", {
+            onClick: ()=>onShowChanged(!isGroupExpanded),
+            "data-testid": "minus-icon",
+            children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "flex flex-row flex-nowrap items-center",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(md.MdRemoveCircle, {
+                        className: "text-accent",
+                        size: "1rem",
+                        onClick: ()=>onShowChanged(!isGroupExpanded),
+                        "aria-hidden": "true"
+                    }, "show-less"),
+                    /*#__PURE__*/ jsxRuntime.jsx(ExpanderLabel, {
+                        children: "show less"
+                    })
+                ]
+            })
+        }) : null
+    });
+};
+
+const sortTypeToAriaDescription = (sortTypeAndDirection, valueLabel, field)=>{
+    if (sortTypeAndDirection.type === 'alpha') {
+        return sortTypeAndDirection.direction === 'asc' ? `The ${field} names are now sorted alphabetically ascending` : `The ${field} names are now sorted alphabetically descending`;
+    } else {
+        return sortTypeAndDirection.direction === 'asc' ? `The ${field} ${valueLabel} are now sorted numerically ascending` : `The ${field} ${valueLabel} are now sorted numerically descending`;
+    }
+};
+/**
+ * FacetCards "sort" header supporting sort by A-Z or by Value both ascending and descending
+ * @param sortType - current sort type
+ * @param valueLabel - Value labels, typically "case" "file"
+ * @param setSort - sets the sort type and direction
+ * @param field - specifies the facet table name
+ */ const FacetSortPanel = ({ sortType, valueLabel, setSort, field })=>{
+    const liveRegionRef = React.useRef(null);
+    const [sortingStatus, setSortingStatus] = React.useState('');
+    React.useEffect(()=>{
+        if (sortingStatus && liveRegionRef?.current) {
+            liveRegionRef.current.textContent = sortingStatus;
+        }
+    }, [
+        sortingStatus
+    ]);
+    const [NameSortIcon, nameIconSize] = sortType.type === 'alpha' ? sortType.direction === 'asc' ? [
+        pi.PiCaretUpFill,
+        '0.75rem'
+    ] : [
+        pi.PiCaretDownFill,
+        '0.75rem'
+    ] : [
+        pi.PiCaretUpDownFill,
+        '1rem'
+    ];
+    const [ValueSortIcon, valueIconSize] = sortType.type === 'value' ? sortType.direction === 'asc' ? [
+        pi.PiCaretUpFill,
+        '0.75rem'
+    ] : [
+        pi.PiCaretDownFill,
+        '0.75rem'
+    ] : [
+        pi.PiCaretUpDownFill,
+        '1rem'
+    ];
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "flex flex-row items-center justify-between flex-wrap py-1 px-2 mb-1 border-b-2",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                className: "pl-0 ml-0 api-hovered:accent",
+                variant: "transparent",
+                size: "compact-xs",
+                color: "base-contrast.5",
+                onClick: ()=>{
+                    const direction = sortType.type === 'alpha' && sortType.direction === 'asc' ? 'dsc' : 'asc';
+                    const sortObj = {
+                        type: 'alpha',
+                        direction
+                    };
+                    setSort(sortObj);
+                    setSortingStatus(sortTypeToAriaDescription(sortObj, 'Name', field));
+                },
+                rightSection: /*#__PURE__*/ jsxRuntime.jsx(NameSortIcon, {
+                    size: nameIconSize,
+                    "aria-hidden": "true"
+                }),
+                "aria-label": "Sort name alphabetically",
+                children: "Name"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                className: "pr-0 mr-0",
+                variant: "transparent",
+                size: "compact-xs",
+                color: "base-contrast.5",
+                onClick: ()=>{
+                    const direction = sortType.type === 'value' && sortType.direction === 'asc' ? 'dsc' : 'asc';
+                    const sortObj = {
+                        type: 'value',
+                        direction
+                    };
+                    setSort(sortObj);
+                    setSortingStatus(sortTypeToAriaDescription(sortObj, valueLabel, field));
+                },
+                rightSection: /*#__PURE__*/ jsxRuntime.jsx(ValueSortIcon, {
+                    size: valueIconSize,
+                    "aria-hidden": "true"
+                }),
+                "aria-label": `Sort ${valueLabel} numerically`,
+                children: valueLabel
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("span", {
+                id: `${field}-liveRegion`,
+                "aria-live": "polite",
+                ref: liveRegionRef,
+                className: "sr-only"
+            })
+        ]
+    });
+};
+
 const FacetIconButton = tw.button`
 text-base-max
 font-bold
@@ -3601,217 +3790,63 @@ flex items-start justify-between items-center flex-nowrap bg-secondary px-1.5 ro
     });
 };
 
-const sortTypeToAriaDescription = (sortTypeAndDirection, valueLabel, field)=>{
-    if (sortTypeAndDirection.type === 'alpha') {
-        return sortTypeAndDirection.direction === 'asc' ? `The ${field} names are now sorted alphabetically ascending` : `The ${field} names are now sorted alphabetically descending`;
-    } else {
-        return sortTypeAndDirection.direction === 'asc' ? `The ${field} ${valueLabel} are now sorted numerically ascending` : `The ${field} ${valueLabel} are now sorted numerically descending`;
-    }
+const OverflowTooltippedLabel = ({ children, label, className = 'flex-grow font-heading text-md pt-0.5' })=>{
+    const [showTooltip, setShowTooltip] = React.useState(false);
+    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+        label: label,
+        disabled: !showTooltip,
+        position: "top-start",
+        offset: 5,
+        multiline: true,
+        withArrow: true,
+        arrowOffset: 20,
+        classNames: {
+            tooltip: 'bg-base-min bg-opacity-90 text-base-contrast-min shadow-lg font-content font-medium text-xs',
+            arrow: 'bg-base-min bg-opacity-90'
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: `${className} truncate ... `,
+            ref: (el)=>{
+                if (el) {
+                    if (el.clientWidth < el.scrollWidth) {
+                        setShowTooltip(true);
+                    } else {
+                        setShowTooltip(false);
+                    }
+                }
+            },
+            children: children
+        })
+    });
 };
-/**
- * FacetCards "sort" header supporting sort by A-Z or by Value both ascending and descending
- * @param sortType - current sort type
- * @param valueLabel - Value labels, typically "case" "file"
- * @param setSort - sets the sort type and direction
- * @param field - specifies the facet table name
- */ const FacetSortPanel = ({ sortType, valueLabel, setSort, field })=>{
-    const liveRegionRef = React.useRef(null);
-    const [sortingStatus, setSortingStatus] = React.useState('');
+
+const FacetEnumList = ({ field, facetName, hooks, valueLabel, isSettings = false, isFacetView = true, isSearching = false, showPercent = false, hideIfEmpty = false, showSorting = true, sort = 'value-dsc' })=>{
+    const [isGroupExpanded, setIsGroupExpanded] = React.useState(false);
+    const cardRef = React.useRef(null);
+    const searchInputRef = React.useRef(null);
+    const settingRef = React.useRef(null);
+    const [searchTerm, setSearchTerm] = React.useState('');
+    // const [combineMode, setCombineMode] = useState<'or' | 'and'>('or');
+    const { data, enumFilters, combineMode, isSuccess, error } = hooks.useGetFacetData(field);
+    const [selectedEnums, setSelectedEnums] = React.useState(enumFilters ?? []);
+    const totalCount = hooks?.useTotalCounts ? hooks.useTotalCounts() : 1;
+    const clearFilters = hooks.useClearFilter();
+    const updateFacetFilters = hooks.useUpdateFacetFilters();
+    const isFilterExpanded = hooks?.useFilterExpanded && hooks.useFilterExpanded(field);
+    const showFilters = isFilterExpanded === undefined || isFilterExpanded;
+    const [sortedData, setSortedData] = React.useState([]);
+    const [sortType, setSortType] = React.useState(mapFacetSortToSortType(sort));
+    const theme = core$1.useMantineTheme();
+    const updateVisibleValues = hooks?.updateVisibleValues;
     React.useEffect(()=>{
-        if (sortingStatus && liveRegionRef?.current) {
-            liveRegionRef.current.textContent = sortingStatus;
+        if (isSearching) {
+            searchInputRef?.current?.focus();
+        } else if (searchTerm.length > 0) {
+            setSearchTerm('');
         }
     }, [
-        sortingStatus
-    ]);
-    const [NameSortIcon, nameIconSize] = sortType.type === 'alpha' ? sortType.direction === 'asc' ? [
-        pi.PiCaretUpFill,
-        '0.75rem'
-    ] : [
-        pi.PiCaretDownFill,
-        '0.75rem'
-    ] : [
-        pi.PiCaretUpDownFill,
-        '1rem'
-    ];
-    const [ValueSortIcon, valueIconSize] = sortType.type === 'value' ? sortType.direction === 'asc' ? [
-        pi.PiCaretUpFill,
-        '0.75rem'
-    ] : [
-        pi.PiCaretDownFill,
-        '0.75rem'
-    ] : [
-        pi.PiCaretUpDownFill,
-        '1rem'
-    ];
-    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-        className: "flex flex-row items-center justify-between flex-wrap py-1 px-2 mb-1 border-b-2",
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
-                className: "pl-0 ml-0 api-hovered:accent",
-                variant: "transparent",
-                size: "compact-xs",
-                color: "base-contrast.5",
-                onClick: ()=>{
-                    const direction = sortType.type === 'alpha' && sortType.direction === 'asc' ? 'dsc' : 'asc';
-                    const sortObj = {
-                        type: 'alpha',
-                        direction
-                    };
-                    setSort(sortObj);
-                    setSortingStatus(sortTypeToAriaDescription(sortObj, 'Name', field));
-                },
-                rightSection: /*#__PURE__*/ jsxRuntime.jsx(NameSortIcon, {
-                    size: nameIconSize,
-                    "aria-hidden": "true"
-                }),
-                "aria-label": "Sort name alphabetically",
-                children: "Name"
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
-                className: "pr-0 mr-0",
-                variant: "transparent",
-                size: "compact-xs",
-                color: "base-contrast.5",
-                onClick: ()=>{
-                    const direction = sortType.type === 'value' && sortType.direction === 'asc' ? 'dsc' : 'asc';
-                    const sortObj = {
-                        type: 'value',
-                        direction
-                    };
-                    setSort(sortObj);
-                    setSortingStatus(sortTypeToAriaDescription(sortObj, valueLabel, field));
-                },
-                rightSection: /*#__PURE__*/ jsxRuntime.jsx(ValueSortIcon, {
-                    size: valueIconSize,
-                    "aria-hidden": "true"
-                }),
-                "aria-label": `Sort ${valueLabel} numerically`,
-                children: valueLabel
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx("span", {
-                id: `${field}-liveRegion`,
-                "aria-live": "polite",
-                ref: liveRegionRef,
-                className: "sr-only"
-            })
-        ]
-    });
-};
-
-const OverflowTooltippedLabel = ({ children, label, className = 'flex-grow font-heading text-md pt-0.5' })=>{
-    const [showTooltip, setShowTooltip] = React.useState(false);
-    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
-        label: label,
-        disabled: !showTooltip,
-        position: "top-start",
-        offset: 5,
-        multiline: true,
-        withArrow: true,
-        arrowOffset: 20,
-        classNames: {
-            tooltip: 'bg-base-min bg-opacity-90 text-base-contrast-min shadow-lg font-content font-medium text-xs',
-            arrow: 'bg-base-min bg-opacity-90'
-        },
-        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-            className: `${className} truncate ... `,
-            ref: (el)=>{
-                if (el) {
-                    if (el.clientWidth < el.scrollWidth) {
-                        setShowTooltip(true);
-                    } else {
-                        setShowTooltip(false);
-                    }
-                }
-            },
-            children: children
-        })
-    });
-};
-
-const ExpanderLabel = tw.div`
-text-accent-content-darker
-p-1
-font-bold
-cursor-pointer
-text-xs
-font-content
-`;
-/**
- * Component which manages the compact/expanded state of a FacetCard
- * @param remainingValues - number of remaining values when compact "show 4"
- * @param isGroupExpanded - true if expanded, false if compact
- * @param onShowChanged - callback to call when the expand/compact button is clicked
- */ const FacetExpander = ({ remainingValues, isGroupExpanded, onShowChanged })=>{
-    return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        className: `mt-3 flex flex-row justify-end ${remainingValues > 0 && 'border-t-2'} p-1.5`,
-        children: remainingValues > 0 && !isGroupExpanded ? /*#__PURE__*/ jsxRuntime.jsx("button", {
-            onClick: ()=>onShowChanged(!isGroupExpanded),
-            "data-testid": "plus-icon",
-            children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                className: "flex flex-row flex-nowrap items-center ",
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(md.MdAddCircle, {
-                        className: "text-accent",
-                        size: "1rem",
-                        "aria-hidden": "true"
-                    }, "show-more"),
-                    /*#__PURE__*/ jsxRuntime.jsxs(ExpanderLabel, {
-                        children: [
-                            remainingValues,
-                            " more"
-                        ]
-                    })
-                ]
-            })
-        }) : isGroupExpanded ? /*#__PURE__*/ jsxRuntime.jsx("button", {
-            onClick: ()=>onShowChanged(!isGroupExpanded),
-            "data-testid": "minus-icon",
-            children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                className: "flex flex-row flex-nowrap items-center",
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(md.MdRemoveCircle, {
-                        className: "text-accent",
-                        size: "1rem",
-                        onClick: ()=>onShowChanged(!isGroupExpanded),
-                        "aria-hidden": "true"
-                    }, "show-less"),
-                    /*#__PURE__*/ jsxRuntime.jsx(ExpanderLabel, {
-                        children: "show less"
-                    })
-                ]
-            })
-        }) : null
-    });
-};
-
-const FacetEnumList = ({ field, facetName, hooks, valueLabel, isSettings = false, isFacetView = true, isSearching = false, showPercent = false, hideIfEmpty = false, showSorting = true, sort = 'value-dsc' })=>{
-    const [isGroupExpanded, setIsGroupExpanded] = React.useState(false);
-    const cardRef = React.useRef(null);
-    const searchInputRef = React.useRef(null);
-    const settingRef = React.useRef(null);
-    const [searchTerm, setSearchTerm] = React.useState('');
-    // const [combineMode, setCombineMode] = useState<'or' | 'and'>('or');
-    const { data, enumFilters, combineMode, isSuccess, error } = hooks.useGetFacetData(field);
-    const [selectedEnums, setSelectedEnums] = React.useState(enumFilters ?? []);
-    const totalCount = hooks?.useTotalCounts ? hooks.useTotalCounts() : 1;
-    const clearFilters = hooks.useClearFilter();
-    const updateFacetFilters = hooks.useUpdateFacetFilters();
-    const isFilterExpanded = hooks?.useFilterExpanded && hooks.useFilterExpanded(field);
-    const showFilters = isFilterExpanded === undefined || isFilterExpanded;
-    const [sortedData, setSortedData] = React.useState([]);
-    const [sortType, setSortType] = React.useState(mapFacetSortToSortType(sort));
-    const theme = core$1.useMantineTheme();
-    const updateVisibleValues = hooks?.updateVisibleValues;
-    React.useEffect(()=>{
-        if (isSearching) {
-            searchInputRef?.current?.focus();
-        } else if (searchTerm.length > 0) {
-            setSearchTerm('');
-        }
-    }, [
-        isSearching,
-        searchTerm
+        isSearching,
+        searchTerm
     ]);
     React.useEffect(()=>{
         if (isSettings) {
@@ -4201,194 +4236,54 @@ const EnumFacet = ({ field, hooks, valueLabel, description, facetName, showPerce
     });
 };
 
-const instanceOfIncludesExcludes$1 = (op)=>[
-        'in'
-    ].includes(op.operator); // TODO: Guppy does not support excludes
-/**
- * Extracts the operands if the operation isIncludes or Excludes. Returns an empty Array
- * if filter is not the correct type.
- * @param operation - filters to extract values from
- */ const extractValues = (operation)=>{
-    if (operation && instanceOfIncludesExcludes$1(operation)) {
-        return operation.operands;
-    }
-    return [];
-};
-/**
- * Exact value facet component
- * @param field - field to facet on
- * @param description - description of the facet
- * @param facetName - name of the facet
- * @param dismissCallback - callback function to dismiss the facet
- * @param width - width of the facet
- * @param hooks - hooks to use for the facet
- * @param header - header components
- * @category Facets
- */ const ExactValueFacet = ({ field, description, facetName = undefined, dismissCallback = undefined, width = undefined, hooks, header = {
+const createBucket = (field, lower, upper)=>({
+        operator: 'and',
+        operands: [
+            {
+                field,
+                operator: '>=',
+                operand: lower
+            },
+            {
+                field,
+                operator: '<=',
+                operand: upper
+            }
+        ]
+    });
+const RangeFacet = ({ field, hooks, valueLabel, description, facetName, minimum = DEFAULT_MINIMUM, maximum = DEFAULT_MAXIMUM, showSearch = false, showFlip = false, showSettings = false, dismissCallback = undefined, width = undefined, header = {
     Panel: FacetHeader,
     Label: FacetText,
     iconStyle: controlsIconStyle
 } })=>{
-    const [textValue, setTextValue] = React.useState(''); // Handle the state of the TextInput
-    const clearFilters = hooks.useClearFilter();
-    const updateFacetFilters = hooks.useUpdateFacetFilters();
-    const facetTitle = facetName ? facetName : core.trimFirstFieldNameToTitle(field, true);
-    const facetValue = hooks.useGetFacetFilters(field);
-    const textValues = React.useMemo(()=>extractValues(facetValue), [
-        facetValue
-    ]);
-    const isFilterExpanded = hooks.useFilterExpanded && hooks.useFilterExpanded(field);
-    const showFilters = isFilterExpanded === undefined || isFilterExpanded;
-    const setValues = (values)=>{
-        if (values.length > 0) {
-            if (facetValue && instanceOfIncludesExcludes$1(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
-                });
-            }
-        } else {
-            clearFilters(field);
-        }
-    };
-    const addValue = (s)=>{
-        if (s === '') return;
-        if (textValues.includes(s)) return;
-        setTextValue('');
-        setValues([
-            ...textValues,
-            s
-        ]);
-    };
-    const removeButton = (x)=>{
-        return /*#__PURE__*/ jsxRuntime.jsx(core$1.ActionIcon, {
-            size: "xs",
-            color: "white",
-            radius: "xl",
-            variant: "transparent",
-            onClick: ()=>setValues(textValues.filter((i)=>i !== x)),
-            children: /*#__PURE__*/ jsxRuntime.jsx(md.MdClose, {
-                size: 10,
-                "aria-label": "remove value from filter"
-            })
-        });
-    };
-    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-        className: `flex flex-col ${width ? width : 'mx-0'} bg-base-max relative border-base-lighter border-1 rounded-md text-xs transition`,
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx(FacetControlsHeader, {
-                field: field,
-                description: description,
-                hooks: hooks,
-                facetName: facetName,
-                dismissCallback: dismissCallback,
-                header: header
-            }),
-            /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                className: showFilters ? 'h-full' : 'h-0 invisible',
-                "aria-hidden": !showFilters,
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                        className: "flex flex-nowrap items-center p-2",
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(core$1.TextInput, {
-                                "data-testid": "textbox-add-filter-value",
-                                size: "sm",
-                                placeholder: `Enter ${facetTitle}`,
-                                classNames: {
-                                    root: 'grow',
-                                    input: 'border-r-0 rounded-r-none py-1'
-                                },
-                                "aria-label": "enter value to add filter",
-                                value: textValue,
-                                onChange: (event)=>setTextValue(event.currentTarget.value)
-                            }),
-                            /*#__PURE__*/ jsxRuntime.jsx(core$1.ActionIcon, {
-                                size: "lg",
-                                "aria-label": "add string value",
-                                className: "bg-accent text-accent-contrast border-base-min border-1 rounded-l-none h-[30px]",
-                                onClick: ()=>{
-                                    if (textValue.length > 0) addValue(textValue.trim());
-                                },
-                                children: /*#__PURE__*/ jsxRuntime.jsx(fa.FaPlus, {})
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Group, {
-                        gap: "xs",
-                        className: "px-2 py-2 max-h-96 overflow-y-auto",
-                        "data-testid": "values group",
-                        children: textValues.map((x)=>/*#__PURE__*/ jsxRuntime.jsx(core$1.Badge, {
-                                size: "sm",
-                                variant: "filled",
-                                color: "accent",
-                                rightSection: removeButton(x),
-                                children: x
-                            }, x))
-                    })
-                ]
-            })
-        ]
-    });
-};
-
-const createBucket = (field, lower, upper)=>({
-        operator: 'and',
-        operands: [
-            {
-                field,
-                operator: '>=',
-                operand: lower
-            },
-            {
-                field,
-                operator: '<=',
-                operand: upper
-            }
-        ]
-    });
-const RangeFacet = ({ field, hooks, valueLabel, description, facetName, minimum = DEFAULT_MINIMUM, maximum = DEFAULT_MAXIMUM, showSearch = false, showFlip = false, showSettings = false, dismissCallback = undefined, width = undefined, header = {
-    Panel: FacetHeader,
-    Label: FacetText,
-    iconStyle: controlsIconStyle
-} })=>{
-    const { data, rangeFilters, isSuccess } = hooks.useGetFacetData(field);
-    const [minMaxValue, setMinMaxValue] = React.useState({
-        from: minimum,
-        to: maximum
-    });
-    const clearRangeFilterFromCohort = hooks.useClearFilter();
-    React.useCallback(()=>{
-        setMinMaxValue({
-            from: minimum,
-            to: maximum
-        });
-        clearRangeFilterFromCohort(field);
-    }, [
-        clearRangeFilterFromCohort,
-        field,
-        maximum,
-        minimum
-    ]);
-    const updateRangeFilter = hooks.useUpdateFacetFilters();
-    const updateFilters = React.useCallback((from, to)=>{
-        updateRangeFilter(field, createBucket(field, from, to));
-        setMinMaxValue({
-            from: from,
-            to: to
-        });
-    }, [
-        field,
-        updateRangeFilter
+    const { data, rangeFilters, isSuccess } = hooks.useGetFacetData(field);
+    const [minMaxValue, setMinMaxValue] = React.useState({
+        from: minimum,
+        to: maximum
+    });
+    const clearRangeFilterFromCohort = hooks.useClearFilter();
+    React.useCallback(()=>{
+        setMinMaxValue({
+            from: minimum,
+            to: maximum
+        });
+        clearRangeFilterFromCohort(field);
+    }, [
+        clearRangeFilterFromCohort,
+        field,
+        maximum,
+        minimum
+    ]);
+    const updateRangeFilter = hooks.useUpdateFacetFilters();
+    const updateFilters = React.useCallback((from, to)=>{
+        updateRangeFilter(field, createBucket(field, from, to));
+        setMinMaxValue({
+            from: from,
+            to: to
+        });
+    }, [
+        field,
+        updateRangeFilter
     ]);
     const isFilterExpanded = hooks.useFilterExpanded && hooks.useFilterExpanded(field);
     const showFilters = isFilterExpanded === undefined || isFilterExpanded;
@@ -4469,7 +4364,7 @@ const RangeFacet = ({ field, hooks, valueLabel, description, facetName, minimum
     });
 };
 
-const instanceOfIncludesExcludes = (op)=>[
+const instanceOfIncludesExcludes$1 = (op)=>[
         'in'
     ].includes(op.operator); // TODO: Guppy does not support excludes
 const isOperandsObject = (obj)=>{
@@ -4518,7 +4413,7 @@ const isFacetEmpty = (op)=>{
     useDeepCompare.useDeepCompareEffect(()=>{
         if (!facetValue || isFacetEmpty(facetValue)) {
             setSelectedValues([]);
-        } else if (instanceOfIncludesExcludes(facetValue)) {
+        } else if (instanceOfIncludesExcludes$1(facetValue)) {
             const filters = facetValue.operands.map((x)=>x.toString());
             setSelectedValues(filters);
         }
@@ -4578,6 +4473,554 @@ const isFacetEmpty = (op)=>{
     });
 };
 
+const instanceOfIncludesExcludes = (op)=>[
+        'in'
+    ].includes(op.operator); // TODO: Guppy does not support excludes
+/**
+ * Extracts the operands if the operation isIncludes or Excludes. Returns an empty Array
+ * if filter is not the correct type.
+ * @param operation - filters to extract values from
+ */ const extractValues = (operation)=>{
+    if (operation && instanceOfIncludesExcludes(operation)) {
+        return operation.operands;
+    }
+    return [];
+};
+/**
+ * Exact value facet component
+ * @param field - field to facet on
+ * @param description - description of the facet
+ * @param facetName - name of the facet
+ * @param dismissCallback - callback function to dismiss the facet
+ * @param width - width of the facet
+ * @param hooks - hooks to use for the facet
+ * @param header - header components
+ * @category Facets
+ */ const ExactValueFacet = ({ field, description, facetName = undefined, dismissCallback = undefined, width = undefined, hooks, header = {
+    Panel: FacetHeader,
+    Label: FacetText,
+    iconStyle: controlsIconStyle
+} })=>{
+    const [textValue, setTextValue] = React.useState(''); // Handle the state of the TextInput
+    const clearFilters = hooks.useClearFilter();
+    const updateFacetFilters = hooks.useUpdateFacetFilters();
+    const facetTitle = facetName ? facetName : core.trimFirstFieldNameToTitle(field, true);
+    const facetValue = hooks.useGetFacetFilters(field);
+    const textValues = React.useMemo(()=>extractValues(facetValue), [
+        facetValue
+    ]);
+    const isFilterExpanded = hooks.useFilterExpanded && hooks.useFilterExpanded(field);
+    const showFilters = isFilterExpanded === undefined || isFilterExpanded;
+    const setValues = (values)=>{
+        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
+                });
+            }
+        } else {
+            clearFilters(field);
+        }
+    };
+    const addValue = (s)=>{
+        if (s === '') return;
+        if (textValues.includes(s)) return;
+        setTextValue('');
+        setValues([
+            ...textValues,
+            s
+        ]);
+    };
+    const removeButton = (x)=>{
+        return /*#__PURE__*/ jsxRuntime.jsx(core$1.ActionIcon, {
+            size: "xs",
+            color: "white",
+            radius: "xl",
+            variant: "transparent",
+            onClick: ()=>setValues(textValues.filter((i)=>i !== x)),
+            children: /*#__PURE__*/ jsxRuntime.jsx(md.MdClose, {
+                size: 10,
+                "aria-label": "remove value from filter"
+            })
+        });
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: `flex flex-col ${width ? width : 'mx-0'} bg-base-max relative border-base-lighter border-1 rounded-md text-xs transition`,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(FacetControlsHeader, {
+                field: field,
+                description: description,
+                hooks: hooks,
+                facetName: facetName,
+                dismissCallback: dismissCallback,
+                header: header
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: showFilters ? 'h-full' : 'h-0 invisible',
+                "aria-hidden": !showFilters,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        className: "flex flex-nowrap items-center p-2",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.TextInput, {
+                                "data-testid": "textbox-add-filter-value",
+                                size: "sm",
+                                placeholder: `Enter ${facetTitle}`,
+                                classNames: {
+                                    root: 'grow',
+                                    input: 'border-r-0 rounded-r-none py-1'
+                                },
+                                "aria-label": "enter value to add filter",
+                                value: textValue,
+                                onChange: (event)=>setTextValue(event.currentTarget.value)
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.ActionIcon, {
+                                size: "lg",
+                                "aria-label": "add string value",
+                                className: "bg-accent text-accent-contrast border-base-min border-1 rounded-l-none h-[30px]",
+                                onClick: ()=>{
+                                    if (textValue.length > 0) addValue(textValue.trim());
+                                },
+                                children: /*#__PURE__*/ jsxRuntime.jsx(fa.FaPlus, {})
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Group, {
+                        gap: "xs",
+                        className: "px-2 py-2 max-h-96 overflow-y-auto",
+                        "data-testid": "values group",
+                        children: textValues.map((x)=>/*#__PURE__*/ jsxRuntime.jsx(core$1.Badge, {
+                                size: "sm",
+                                variant: "filled",
+                                color: "accent",
+                                rightSection: removeButton(x),
+                                children: x
+                            }, x))
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+const createFacetCard = ({ facetDefinition, valueLabel, hooks: dataFunctions, facetNameFormatter, idPrefix, hideIfEmpty = false, width, showPercent = false, queryOptions })=>{
+    const { field, type, description, label } = facetDefinition;
+    const facetLabel = label ?? facetNameFormatter(facetDefinition.field);
+    const valueTypeLabel = valueLabel === undefined || typeof valueLabel === 'string' ? valueLabel : valueLabel(queryOptions);
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        children: {
+            enum: /*#__PURE__*/ jsxRuntime.jsx(EnumFacet, {
+                valueLabel: valueTypeLabel,
+                field: field,
+                facetName: facetLabel,
+                description: description,
+                hideIfEmpty: hideIfEmpty,
+                width: width,
+                hooks: dataFunctions,
+                showPercent: showPercent,
+                sharedWithIndices: facetDefinition?.sharedWithIndices
+            }, `${idPrefix}-enum-${field}`),
+            range: /*#__PURE__*/ jsxRuntime.jsx(RangeFacet, {
+                valueLabel: valueTypeLabel,
+                field: field,
+                facetName: facetLabel,
+                description: description,
+                hideIfEmpty: hideIfEmpty,
+                width: width,
+                hooks: dataFunctions,
+                minimum: facetDefinition.range?.minimum,
+                maximum: facetDefinition.range?.maximum,
+                showSettings: showPercent,
+                sharedWithIndices: facetDefinition?.sharedWithIndices
+            }, `${idPrefix}-range-${field}`),
+            exact: /*#__PURE__*/ jsxRuntime.jsx(ExactValueFacet, {
+                field: field,
+                facetName: facetLabel,
+                description: description,
+                hideIfEmpty: hideIfEmpty,
+                width: width,
+                hooks: dataFunctions,
+                sharedWithIndices: facetDefinition?.sharedWithIndices
+            }, `${idPrefix}-exact-${field}`),
+            multiselect: /*#__PURE__*/ jsxRuntime.jsx(MultiSelectValueFacet, {
+                field: field,
+                facetName: facetLabel,
+                description: description,
+                hideIfEmpty: hideIfEmpty,
+                width: width,
+                hooks: dataFunctions,
+                sharedWithIndices: facetDefinition?.sharedWithIndices
+            }, `${idPrefix}-exact-${field}`)
+        }[type]
+    }, `${idPrefix}-facet-${field}`);
+};
+
+const FiltersPanel = ({ fields, dataFunctions, valueLabel })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        "data-testid": "filters-facets",
+        className: "flex flex-col gap-y-4 w-full",
+        children: fields.map((facetDefinition)=>{
+            if (facetDefinition?.type === undefined) {
+                console.warn('Facet definition missing type', facetDefinition);
+                return null;
+            }
+            if (!(facetDefinition.type in dataFunctions)) return null;
+            return createFacetCard({
+                facetDefinition,
+                valueLabel,
+                hooks: dataFunctions[facetDefinition.type],
+                facetNameFormatter: core.fieldNameToTitle,
+                idPrefix: 'filters-panel',
+                showPercent: false
+            });
+        })
+    });
+};
+
+const AccordionPanel = ({ index, filters, tabTitle, facetDefinitions, facetDataHooks, onAccessChange = (value)=>null, accessLevel = core.Accessibility.ALL, showAccessLevel = false })=>{
+    const coreDispatch = core.useCoreDispatch();
+    const sharedFilters = core.useCoreSelector((state)=>core.selectSharedFilters(state));
+    const theme = core$1.useMantineTheme();
+    const shareFilters = core.useCoreSelector((state)=>core.selectShouldShareFilters(state));
+    const allFiltersCollapsed = core.useCoreSelector((state)=>core.selectAllCohortFiltersCollapsed(state, index));
+    const toggleAllFiltersExpanded = (expand)=>{
+        coreDispatch(core.toggleCohortBuilderAllFilters({
+            expand,
+            index
+        }));
+    };
+    const handleSharedFiltersChange = (value)=>{
+        modals.modals.openConfirmModal({
+            title: 'Confirm change of shared filters mode',
+            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                size: "sm",
+                children: value ? 'Switching to Shared Filters mode will apply all selected filters across all indices.' : 'Switching to Unshared Filters mode will stop syncing filters but will not remove them.'
+            }),
+            labels: {
+                confirm: 'Confirm',
+                cancel: 'Cancel'
+            },
+            onConfirm: ()=>coreDispatch(core.setShouldShareFilters(value))
+        });
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
+        align: "flex-start",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                justify: "space-between",
+                className: "w-full",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                        size: "xl",
+                        fw: 800,
+                        children: "Filters"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("button", {
+                        className: "text-primary text-sm font-normal",
+                        onClick: ()=>toggleAllFiltersExpanded(allFiltersCollapsed),
+                        children: allFiltersCollapsed ? 'Expand All' : 'Collapse All'
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
+                className: "bg-base-max py-4 px-2 h-full w-full",
+                children: [
+                    Object.keys(sharedFilters).length > 0 && /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                        gap: "xs",
+                        justify: "space-between",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                className: "flex items-center space-x-1",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                                        icon: "gen3:share",
+                                        height: 16,
+                                        width: 16,
+                                        color: theme.colors.accent[4]
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                                        size: "sm",
+                                        children: "Set the shared filters for all"
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                                        icon: "gen3:info",
+                                        height: 12,
+                                        width: 12,
+                                        color: theme.colors.accent[4]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Switch, {
+                                checked: shareFilters,
+                                onChange: (event)=>handleSharedFiltersChange(event.currentTarget.checked)
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Accordion, {
+                        chevronPosition: "left",
+                        multiple: true,
+                        defaultValue: [
+                            filters?.tabs[0].title ?? 'Filters'
+                        ],
+                        children: filters.tabs.map((tab)=>{
+                            return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Accordion.Item, {
+                                value: tab.title,
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Accordion.Control, {
+                                        children: tab.title
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Accordion.Panel, {
+                                        classNames: {
+                                            panel: 'p-0 m-0'
+                                        },
+                                        children: Object.keys(facetDefinitions).length > 0 ? /*#__PURE__*/ jsxRuntime.jsx(FiltersPanel, {
+                                            fields: tab.fields.reduce((acc, field)=>{
+                                                return [
+                                                    ...acc,
+                                                    facetDefinitions[field]
+                                                ];
+                                            }, []),
+                                            dataFunctions: facetDataHooks,
+                                            valueLabel: tabTitle
+                                        }) : null
+                                    })
+                                ]
+                            }, `${tab.title}`);
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+const AccessData = [
+    {
+        value: core.Accessibility.ALL,
+        label: 'All'
+    },
+    {
+        value: core.Accessibility.ACCESSIBLE,
+        label: 'Accessible'
+    },
+    {
+        value: core.Accessibility.UNACCESSIBLE,
+        label: 'Not Accessible'
+    }
+];
+const AccessLevelControl = ({ onChange, accessLevel })=>{
+    const theme = core$1.useMantineTheme();
+    return /*#__PURE__*/ jsxRuntime.jsx(core$1.SegmentedControl, {
+        color: theme.colors.accent[5],
+        data: AccessData,
+        value: accessLevel,
+        onChange: (val)=>{
+            const accessibilityValue = AccessData.find((item)=>item.value === val)?.value || core.Accessibility.ALL;
+            onChange(accessibilityValue);
+        }
+    });
+};
+
+const DropdownPanel = ({ index, filters, tabTitle, facetDefinitions, facetDataHooks, onAccessChange = (value)=>null, accessLevel = core.Accessibility.ALL, showAccessLevel = false })=>{
+    const [value, setValue] = React.useState('0');
+    const allFiltersCollapsed = core.useCoreSelector((state)=>core.selectAllCohortFiltersCollapsed(state, index));
+    const sharedFilters = core.useCoreSelector((state)=>core.selectSharedFilters(state));
+    const shareFilters = core.useCoreSelector((state)=>core.selectShouldShareFilters(state));
+    const theme = core$1.useMantineTheme();
+    const coreDispatch = core.useCoreDispatch();
+    const toggleAllFiltersExpanded = (expand)=>{
+        coreDispatch(core.toggleCohortBuilderAllFilters({
+            expand,
+            index
+        }));
+    };
+    const items = useDeepCompare.useDeepCompareMemo(()=>filters.tabs.map((tab, idx)=>{
+            return {
+                label: tab.title,
+                value: idx.toString()
+            };
+        }), [
+        filters.tabs
+    ]);
+    const fields = filters.tabs[Number(value)].fields.reduce((acc, field)=>{
+        return [
+            ...acc,
+            facetDefinitions[field]
+        ];
+    }, []);
+    const handleSharedFiltersChange = (value)=>{
+        modals.modals.openConfirmModal({
+            title: 'Confirm change of shared filters mode',
+            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                size: "sm",
+                children: value ? 'Switching to Shared Filters mode will apply all selected filters across all indices.' : 'Switching to Unshared Filters mode will stop syncing filters but will not remove them.'
+            }),
+            labels: {
+                confirm: 'Confirm',
+                cancel: 'Cancel'
+            },
+            onConfirm: ()=>coreDispatch(core.setShouldShareFilters(value))
+        });
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
+        align: "flex-start",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                justify: "space-between",
+                className: "w-full",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                        size: "xl",
+                        fw: 800,
+                        children: "Filters"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("button", {
+                        className: "text-primary text-sm font-normal",
+                        onClick: ()=>toggleAllFiltersExpanded(allFiltersCollapsed),
+                        children: allFiltersCollapsed ? 'Expand All' : 'Collapse All'
+                    })
+                ]
+            }),
+            showAccessLevel ? /*#__PURE__*/ jsxRuntime.jsx(AccessLevelControl, {
+                onChange: onAccessChange,
+                accessLevel: accessLevel
+            }) : null,
+            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
+                className: "bg-base-max py-4 px-2 h-full w-full",
+                children: [
+                    Object.keys(sharedFilters).length > 0 && /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                        gap: "xs",
+                        justify: "space-between",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                className: "flex items-center space-x-1",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                                        icon: "gen3:share",
+                                        height: 16,
+                                        width: 16,
+                                        color: theme.colors.accent[4]
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                                        size: "sm",
+                                        children: "Set the shared filters for all"
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                                        label: "If enabled any filter set on this tab will be applied to every tab where occurs.",
+                                        position: "top",
+                                        withArrow: true,
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                                            icon: "gen3:info",
+                                            height: 12,
+                                            width: 12,
+                                            color: theme.colors.accent[4]
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Switch, {
+                                checked: shareFilters,
+                                onChange: (event)=>handleSharedFiltersChange(event.currentTarget.checked)
+                            })
+                        ]
+                    }),
+                    filters.tabs.length > 1 && /*#__PURE__*/ jsxRuntime.jsx(core$1.Select, {
+                        classNames: {
+                            options: 'border-1 border-base-dark',
+                            option: 'hover:bg-primary-lightest'
+                        },
+                        withCheckIcon: false,
+                        data: items,
+                        value: value === null ? '0' : value,
+                        onChange: setValue
+                    }),
+                    Object.keys(facetDefinitions).length > 0 ? /*#__PURE__*/ jsxRuntime.jsx(FiltersPanel, {
+                        fields: fields,
+                        dataFunctions: facetDataHooks,
+                        valueLabel: tabTitle
+                    }) : null
+                ]
+            })
+        ]
+    });
+};
+
+const VerticalTabbedPanel = ({ index, filters, tabTitle, facetDefinitions, facetDataHooks, onAccessChange = (value)=>null, accessLevel = core.Accessibility.ALL, showAccessLevel = false })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Tabs, {
+            variant: "pills",
+            orientation: "vertical",
+            keepMounted: false,
+            defaultValue: filters?.tabs[0].title ?? 'Filters',
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.List, {
+                    children: filters.tabs.map((tab)=>{
+                        return /*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.Tab, {
+                            value: tab.title,
+                            children: tab.title
+                        }, `${tab.title}-tab`);
+                    })
+                }),
+                filters.tabs.map((tab)=>{
+                    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.Panel, {
+                        value: tab.title,
+                        className: "w-1/4",
+                        children: Object.keys(facetDefinitions).length > 0 ? /*#__PURE__*/ jsxRuntime.jsx(FiltersPanel, {
+                            fields: tab.fields.reduce((acc, field)=>{
+                                return [
+                                    ...acc,
+                                    facetDefinitions[field]
+                                ];
+                            }, []),
+                            dataFunctions: facetDataHooks,
+                            valueLabel: tabTitle
+                        }) : null
+                    }, `filter-${tab.title}-tabPanel`);
+                })
+            ]
+        })
+    });
+};
+const SinglePanel = ({ filters, tabTitle, facetDefinitions, facetDataHooks })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        children: Object.keys(facetDefinitions).length > 0 ? /*#__PURE__*/ jsxRuntime.jsx(FiltersPanel, {
+            fields: filters.tabs[0].fields.reduce((acc, field)=>{
+                return [
+                    ...acc,
+                    facetDefinitions[field]
+                ];
+            }, []),
+            dataFunctions: facetDataHooks,
+            valueLabel: tabTitle
+        }) : null
+    });
+};
+const TabbedPanel = ({ index, filters, tabTitle, facetDefinitions, facetDataHooks })=>{
+    return filters.tabs.length > 1 ? /*#__PURE__*/ jsxRuntime.jsx(VerticalTabbedPanel, {
+        index: index,
+        filters: filters,
+        tabTitle: tabTitle,
+        facetDefinitions: facetDefinitions,
+        facetDataHooks: facetDataHooks
+    }) : /*#__PURE__*/ jsxRuntime.jsx(SinglePanel, {
+        index: index,
+        filters: filters,
+        tabTitle: tabTitle,
+        facetDefinitions: facetDefinitions,
+        facetDataHooks: facetDataHooks
+    });
+};
+
 /**
  * Scrolls to hash in url when component mounts and removes hash from url when component unmounts
  * @param valid_hashes - what hashes in url should trigger scroll
@@ -4599,58 +5042,6 @@ const isFacetEmpty = (op)=>{
     }, []);
 };
 
-const createFacetCard = ({ facetDefinition, valueLabel, hooks: dataFunctions, facetNameFormatter, idPrefix, hideIfEmpty = false, width, showPercent = false, queryOptions })=>{
-    const { field, type, description, label } = facetDefinition;
-    const facetLabel = label ?? facetNameFormatter(facetDefinition.field);
-    const valueTypeLabel = valueLabel === undefined || typeof valueLabel === 'string' ? valueLabel : valueLabel(queryOptions);
-    return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        children: {
-            enum: /*#__PURE__*/ jsxRuntime.jsx(EnumFacet, {
-                valueLabel: valueTypeLabel,
-                field: field,
-                facetName: facetLabel,
-                description: description,
-                hideIfEmpty: hideIfEmpty,
-                width: width,
-                hooks: dataFunctions,
-                showPercent: showPercent,
-                sharedWithIndices: facetDefinition?.sharedWithIndices
-            }, `${idPrefix}-enum-${field}`),
-            range: /*#__PURE__*/ jsxRuntime.jsx(RangeFacet, {
-                valueLabel: valueTypeLabel,
-                field: field,
-                facetName: facetLabel,
-                description: description,
-                hideIfEmpty: hideIfEmpty,
-                width: width,
-                hooks: dataFunctions,
-                minimum: facetDefinition.range?.minimum,
-                maximum: facetDefinition.range?.maximum,
-                showSettings: showPercent,
-                sharedWithIndices: facetDefinition?.sharedWithIndices
-            }, `${idPrefix}-range-${field}`),
-            exact: /*#__PURE__*/ jsxRuntime.jsx(ExactValueFacet, {
-                field: field,
-                facetName: facetLabel,
-                description: description,
-                hideIfEmpty: hideIfEmpty,
-                width: width,
-                hooks: dataFunctions,
-                sharedWithIndices: facetDefinition?.sharedWithIndices
-            }, `${idPrefix}-exact-${field}`),
-            multiselect: /*#__PURE__*/ jsxRuntime.jsx(MultiSelectValueFacet, {
-                field: field,
-                facetName: facetLabel,
-                description: description,
-                hideIfEmpty: hideIfEmpty,
-                width: width,
-                hooks: dataFunctions,
-                sharedWithIndices: facetDefinition?.sharedWithIndices
-            }, `${idPrefix}-exact-${field}`)
-        }[type]
-    }, `${idPrefix}-facet-${field}`);
-};
-
 const createFacetCards = ({ facets, hooks, facetNameFormatter, idPrefix, valueLabel, dismissCallback, hideIfEmpty, Chart, showPercent })=>{
     return facets.map((facetDefinition)=>{
         return createFacetCard({
@@ -4842,7 +5233,7 @@ const FacetGroup = ({ facets, children })=>{
     const availableFields = facets.map((f)=>f.field);
     useScrollToHash(availableFields, false);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5 w-content gap-4 my-4 ml-2 w-full",
+        className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5 w-content gap-4 ml-2 w-full",
         "data-testid": "title-cohort-builder-facet-groups",
         children: children
     });
@@ -5708,11 +6099,10 @@ const NavigationLogo = ({ src, title, description, width, height, divider = fals
  * @param iconHeight - the height of the icon
  * @param classNames - the class names to use for root, label, icon/tooltip and arrow'
  * @param noBasePath - set to true to avoid prepending a basePath to the link
- */ const NavigationBarButton = ({ tooltip, icon, href, name, iconHeight = '27px', classNames = {}, noBasePath = false })=>{
+ */ const NavigationBarButton = ({ tooltip, icon, href, name, iconHeight = '32px', classNames = {}, noBasePath = false })=>{
     const classNamesDefaults = {
-        root: 'flex flex-col flex-nowrap px-3 py-2 pt-4 items-center align-center text-primary hover:text-accent opacity-80 hover:opacity-100',
+        root: 'flex flex-col flex-nowrap px-3 py-2 pt-4 justify-between items-center align-center text-primary hover:text-accent opacity-80 hover:opacity-100',
         label: 'pt-1.5 body-typo font-heading text-sm text-nowrap',
-        icon: 'mt-0.5 ml-1',
         ...TooltipStyle
     };
     const mergedClassnames = mergeDefaultTailwindClassnames(classNamesDefaults, classNames);
@@ -11614,7 +12004,7 @@ const CountsValue = ({ label, isSuccess, counts })=>{
                 p: "xs",
                 withBorder: true,
                 className: "bg-primary text-primary-contrast font-heading text-md font-semibold",
-                children: `${counts?.toLocaleString() ?? '...'} ${label}`
+                children: toCountsString(counts, label)
             })
         ]
     });
@@ -12133,247 +12523,74 @@ const DownloadsPanel = ({ dropdowns, buttons, loginForDownload, index, totalCoun
         let dropdownsToRender = dropdowns;
         if (loginRequired && !isUserLoggedIn) {
             dropdownsToRender = Object.entries(dropdowns ?? {}).reduce((acc, [key, dropdown])=>{
-                return {
-                    ...acc,
-                    [key]: {
-                        ...dropdown,
-                        title: `${dropdown.title} (Login Required)`,
-                        buttons: dropdown.dropdownItems?.map((button)=>({
-                                ...button,
-                                title: `${button.title} (Login Required)`,
-                                enabled: false
-                            }))
-                    }
-                };
-            }, {});
-        }
-        return dropdownsToRender;
-    }, [
-        dropdowns,
-        loginRequired,
-        isUserLoggedIn
-    ]);
-    return dropdowns || buttons ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
-        className: "flex space-x-1",
-        children: [
-            Object.values(dropdownsToRender).map((dropdown)=>{
-                return createDownloadMenuButton(dropdown, {
-                    type: index,
-                    totalCount,
-                    fields,
-                    filter,
-                    accessibility: accessibility ?? core.Accessibility.ALL
-                });
-            }),
-            buttons.map((button)=>{
-                let disabled = false;
-                let actionFunction = NullButtonAction;
-                let actionArgs = {};
-                const buttonAction = button.action ?? button.type;
-                if (buttonAction) {
-                    const actionItem = findButtonAction(buttonAction);
-                    if (actionItem) {
-                        const funcArgs = actionItem.args ?? {};
-                        const func = actionItem.action;
-                        actionFunction = func;
-                        actionArgs = funcArgs ?? {};
-                    }
-                }
-                if (loginRequired && !isUserLoggedIn) {
-                    disabled = true;
-                }
-                return /*#__PURE__*/ jsxRuntime.jsx(CohortActionButton, {
-                    activeText: 'Downloading...',
-                    inactiveText: button.title,
-                    tooltipText: button.tooltipText,
-                    disabled: disabled || !button.enabled,
-                    actionFunction: actionFunction,
-                    actionArgs: {
-                        ...actionArgs,
-                        ...button.actionArgs ?? {},
-                        type: index,
-                        totalCount,
-                        fields,
-                        filter,
-                        accessibility: accessibility ?? core.Accessibility.ALL
-                    }
-                }, button.title);
-            })
-        ]
-    }) : /*#__PURE__*/ jsxRuntime.jsx(React.Fragment, {});
-};
-
-const FiltersPanel = ({ fields, dataFunctions, valueLabel })=>{
-    return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        "data-testid": "filters-facets",
-        className: "flex flex-col gap-y-4 w-full",
-        children: fields.map((facetDefinition)=>{
-            if (facetDefinition?.type === undefined) {
-                console.warn('Facet definition missing type', facetDefinition);
-                return null;
-            }
-            if (!(facetDefinition.type in dataFunctions)) return null;
-            return createFacetCard({
-                facetDefinition,
-                valueLabel,
-                hooks: dataFunctions[facetDefinition.type],
-                facetNameFormatter: core.fieldNameToTitle,
-                idPrefix: 'filters-panel',
-                showPercent: false
-            });
-        })
-    });
-};
-
-const AccessData = [
-    {
-        value: core.Accessibility.ALL,
-        label: 'All'
-    },
-    {
-        value: core.Accessibility.ACCESSIBLE,
-        label: 'Accessible'
-    },
-    {
-        value: core.Accessibility.UNACCESSIBLE,
-        label: 'Not Accessible'
-    }
-];
-const AccessLevelControl = ({ onChange, accessLevel })=>{
-    const theme = core$1.useMantineTheme();
-    return /*#__PURE__*/ jsxRuntime.jsx(core$1.SegmentedControl, {
-        color: theme.colors.accent[5],
-        data: AccessData,
-        value: accessLevel,
-        onChange: (val)=>{
-            const accessibilityValue = AccessData.find((item)=>item.value === val)?.value || core.Accessibility.ALL;
-            onChange(accessibilityValue);
-        }
-    });
-};
-
-const DropdownPanel = ({ index, filters, tabTitle, facetDefinitions, facetDataHooks, onAccessChange = (value)=>null, accessLevel = core.Accessibility.ALL, showAccessLevel = false })=>{
-    const [value, setValue] = React.useState('0');
-    const allFiltersCollapsed = core.useCoreSelector((state)=>core.selectAllCohortFiltersCollapsed(state, index));
-    const sharedFilters = core.useCoreSelector((state)=>core.selectSharedFilters(state));
-    const shareFilters = core.useCoreSelector((state)=>core.selectShouldShareFilters(state));
-    const theme = core$1.useMantineTheme();
-    const coreDispatch = core.useCoreDispatch();
-    const toggleAllFiltersExpanded = (expand)=>{
-        coreDispatch(core.toggleCohortBuilderAllFilters({
-            expand,
-            index
-        }));
-    };
-    const items = useDeepCompare.useDeepCompareMemo(()=>filters.tabs.map((tab, idx)=>{
-            return {
-                label: tab.title,
-                value: idx.toString()
-            };
-        }), [
-        filters.tabs
-    ]);
-    const fields = filters.tabs[Number(value)].fields.reduce((acc, field)=>{
-        return [
-            ...acc,
-            facetDefinitions[field]
-        ];
-    }, []);
-    const handleSharedFiltersChange = (value)=>{
-        modals.modals.openConfirmModal({
-            title: 'Confirm change of shared filters mode',
-            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
-                size: "sm",
-                children: value ? 'Switching to Shared Filters mode will apply all selected filters across all indices.' : 'Switching to Unshared Filters mode will stop syncing filters but will not remove them.'
-            }),
-            labels: {
-                confirm: 'Confirm',
-                cancel: 'Cancel'
-            },
-            onConfirm: ()=>coreDispatch(core.setShouldShareFilters(value))
-        });
-    };
-    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
-        align: "flex-start",
+                return {
+                    ...acc,
+                    [key]: {
+                        ...dropdown,
+                        title: `${dropdown.title} (Login Required)`,
+                        buttons: dropdown.dropdownItems?.map((button)=>({
+                                ...button,
+                                title: `${button.title} (Login Required)`,
+                                enabled: false
+                            }))
+                    }
+                };
+            }, {});
+        }
+        return dropdownsToRender;
+    }, [
+        dropdowns,
+        loginRequired,
+        isUserLoggedIn
+    ]);
+    return dropdowns || buttons ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "flex space-x-1",
         children: [
-            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
-                justify: "space-between",
-                className: "w-full",
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
-                        size: "xl",
-                        fw: 800,
-                        children: "Filters"
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx("button", {
-                        className: "text-primary text-sm font-normal",
-                        onClick: ()=>toggleAllFiltersExpanded(allFiltersCollapsed),
-                        children: allFiltersCollapsed ? 'Expand All' : 'Collapse All'
-                    })
-                ]
+            Object.values(dropdownsToRender).map((dropdown)=>{
+                return createDownloadMenuButton(dropdown, {
+                    type: index,
+                    totalCount,
+                    fields,
+                    filter,
+                    accessibility: accessibility ?? core.Accessibility.ALL
+                });
             }),
-            showAccessLevel ? /*#__PURE__*/ jsxRuntime.jsx(AccessLevelControl, {
-                onChange: onAccessChange,
-                accessLevel: accessLevel
-            }) : null,
-            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
-                className: "bg-base-max py-4 px-2 h-full w-full",
-                children: [
-                    Object.keys(sharedFilters).length > 0 && /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
-                        gap: "xs",
-                        justify: "space-between",
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                                className: "flex items-center space-x-1",
-                                children: [
-                                    /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
-                                        icon: "gen3:share",
-                                        height: 16,
-                                        width: 16,
-                                        color: theme.colors.accent[4]
-                                    }),
-                                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
-                                        size: "sm",
-                                        children: "Set the shared filters for all"
-                                    }),
-                                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
-                                        label: "If enabled any filter set on this tab will be applied to every tab where occurs.",
-                                        position: "top",
-                                        withArrow: true,
-                                        children: /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
-                                            icon: "gen3:info",
-                                            height: 12,
-                                            width: 12,
-                                            color: theme.colors.accent[4]
-                                        })
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Switch, {
-                                checked: shareFilters,
-                                onChange: (event)=>handleSharedFiltersChange(event.currentTarget.checked)
-                            })
-                        ]
-                    }),
-                    filters.tabs.length > 1 && /*#__PURE__*/ jsxRuntime.jsx(core$1.Select, {
-                        classNames: {
-                            options: 'border-1 border-base-dark',
-                            option: 'hover:bg-primary-lightest'
-                        },
-                        withCheckIcon: false,
-                        data: items,
-                        value: value === null ? '0' : value,
-                        onChange: setValue
-                    }),
-                    Object.keys(facetDefinitions).length > 0 ? /*#__PURE__*/ jsxRuntime.jsx(FiltersPanel, {
-                        fields: fields,
-                        dataFunctions: facetDataHooks,
-                        valueLabel: tabTitle
-                    }) : null
-                ]
+            buttons.map((button)=>{
+                let disabled = false;
+                let actionFunction = NullButtonAction;
+                let actionArgs = {};
+                const buttonAction = button.action ?? button.type;
+                if (buttonAction) {
+                    const actionItem = findButtonAction(buttonAction);
+                    if (actionItem) {
+                        const funcArgs = actionItem.args ?? {};
+                        const func = actionItem.action;
+                        actionFunction = func;
+                        actionArgs = funcArgs ?? {};
+                    }
+                }
+                if (loginRequired && !isUserLoggedIn) {
+                    disabled = true;
+                }
+                return /*#__PURE__*/ jsxRuntime.jsx(CohortActionButton, {
+                    activeText: 'Downloading...',
+                    inactiveText: button.title,
+                    tooltipText: button.tooltipText,
+                    disabled: disabled || !button.enabled,
+                    actionFunction: actionFunction,
+                    actionArgs: {
+                        ...actionArgs,
+                        ...button.actionArgs ?? {},
+                        type: index,
+                        totalCount,
+                        fields,
+                        filter,
+                        accessibility: accessibility ?? core.Accessibility.ALL
+                    }
+                }, button.title);
             })
         ]
-    });
+    }) : /*#__PURE__*/ jsxRuntime.jsx(React.Fragment, {});
 };
 
 const EmptyData = {};
@@ -12729,6 +12946,11 @@ const TabbedCohortBuilder = ({ index, tabsConfiguration })=>{
         filters: cohortFilters,
         accessibility: accessLevel
     });
+    const { data: counts, isSuccess: isCountSuccess, isError } = core.useGetCountsQuery({
+        type: index,
+        filters: cohortFilters,
+        accessibility: accessLevel
+    });
     const [facetDefinitions, setFacetDefinitions] = React.useState({});
     React.useEffect(()=>{
         // Check if the router initiated the change
@@ -12806,6 +13028,18 @@ const TabbedCohortBuilder = ({ index, tabsConfiguration })=>{
         cohortFilters.root,
         isSuccess
     ]);
+    const EnumHookInstances = {
+        useGetFacetData: getEnumFacetData,
+        useUpdateFacetFilters: lodash.partial(useUpdateFilters$1, index),
+        useGetFacetFilters: lodash.partial(useGetFacetFilters$1, index),
+        useClearFilter: lodash.partial(useClearFilters$1, index),
+        useFilterExpanded: lodash.partial(useFilterExpandedState$1, index),
+        useToggleExpandFilter: lodash.partial(useToggleExpandFilter$1, index),
+        useGetCombineMode: lodash.partial(useCohortFilterCombineState, index),
+        useSetCombineMode: lodash.partial(useSetCohortFilterCombineState, index),
+        useFieldNameToTitle: useFieldNameToTitle,
+        useTotalCounts: undefined
+    };
     const RangeHookInstances = {
         useGetFacetData: getRangeFacetData,
         useUpdateFacetFilters: lodash.partial(useUpdateFilters$1, index),
@@ -12820,38 +13054,9 @@ const TabbedCohortBuilder = ({ index, tabsConfiguration })=>{
     const facetDataHooks = useDeepCompare.useDeepCompareMemo(()=>{
         return {
             // TODO: see if there a better way to do this
-            enum: {
-                useGetFacetData: getEnumFacetData,
-                useUpdateFacetFilters: lodash.partial(useUpdateFilters$1, index),
-                useGetFacetFilters: lodash.partial(useGetFacetFilters$1, index),
-                useClearFilter: lodash.partial(useClearFilters$1, index),
-                useFilterExpanded: lodash.partial(useFilterExpandedState$1, index),
-                useToggleExpandFilter: lodash.partial(useToggleExpandFilter$1, index),
-                useGetCombineMode: lodash.partial(useCohortFilterCombineState, index),
-                useSetCombineMode: lodash.partial(useSetCohortFilterCombineState, index),
-                useFieldNameToTitle: useFieldNameToTitle,
-                useTotalCounts: undefined
-            },
-            exact: {
-                useGetFacetData: getEnumFacetData,
-                useUpdateFacetFilters: lodash.partial(useUpdateFilters$1, index),
-                useGetFacetFilters: lodash.partial(useGetFacetFilters$1, index),
-                useClearFilter: lodash.partial(useClearFilters$1, index),
-                useFilterExpanded: lodash.partial(useFilterExpandedState$1, index),
-                useToggleExpandFilter: lodash.partial(useToggleExpandFilter$1, index),
-                useFieldNameToTitle: useFieldNameToTitle,
-                useTotalCounts: undefined
-            },
-            multiselect: {
-                useGetFacetData: getEnumFacetData,
-                useUpdateFacetFilters: lodash.partial(useUpdateFilters$1, index),
-                useGetFacetFilters: lodash.partial(useGetFacetFilters$1, index),
-                useClearFilter: lodash.partial(useClearFilters$1, index),
-                useFilterExpanded: lodash.partial(useFilterExpandedState$1, index),
-                useToggleExpandFilter: lodash.partial(useToggleExpandFilter$1, index),
-                useFieldNameToTitle: useFieldNameToTitle,
-                useTotalCounts: undefined
-            },
+            enum: EnumHookInstances,
+            exact: EnumHookInstances,
+            multiselect: EnumHookInstances,
             range: RangeHookInstances,
             age: RangeHookInstances,
             year: RangeHookInstances,
@@ -12859,32 +13064,50 @@ const TabbedCohortBuilder = ({ index, tabsConfiguration })=>{
             days: RangeHookInstances,
             percent: RangeHookInstances,
             datetime: RangeHookInstances,
-            toggle: RangeHookInstances
+            toggle: RangeHookInstances,
+            upload: EnumHookInstances
         };
     }, [
         getEnumFacetData,
         getRangeFacetData,
         index
     ]);
-    return /*#__PURE__*/ jsxRuntime.jsx(FacetTabs, {
-        activeTab: activeTab,
-        setActiveTab: setActiveTab,
-        facetDefinitions: facetDefinitions,
-        tabsConfig: tabsConfig,
-        usedFacets: cohortBuilderFilters,
-        hooks: facetDataHooks,
-        customFacetHooks: {
-            useCustomFacets,
-            useAvailableCustomFacets: (usedFacets, onlyFiltersWithValues, queryOptions)=>({
-                    data: {},
-                    isSuccess: true
-                }),
-            useAddCustomFilter: ()=>(filter)=>{},
-            useRemoveCustomFilter: ()=>(filter)=>{}
+    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
+        gap: "xs",
+        align: "stretch",
+        classNames: {
+            root: 'w-full'
         },
-        getFacetLabel: ()=>'Cases',
-        cardScrollMargin: calculateStickyHeaderHeight(),
-        useFieldNameToTitle: useFieldNameToTitle
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Group, {
+                justify: "flex-end",
+                children: /*#__PURE__*/ jsxRuntime.jsx(CountsValue, {
+                    label: index,
+                    counts: counts,
+                    isSuccess: isCountSuccess
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(FacetTabs, {
+                activeTab: activeTab,
+                setActiveTab: setActiveTab,
+                facetDefinitions: facetDefinitions,
+                tabsConfig: tabsConfig,
+                usedFacets: cohortBuilderFilters,
+                hooks: facetDataHooks,
+                customFacetHooks: {
+                    useCustomFacets,
+                    useAvailableCustomFacets: (usedFacets, onlyFiltersWithValues, queryOptions)=>({
+                            data: {},
+                            isSuccess: true
+                        }),
+                    useAddCustomFilter: ()=>(filter)=>{},
+                    useRemoveCustomFilter: ()=>(filter)=>{}
+                },
+                getFacetLabel: ()=>'Cases',
+                cardScrollMargin: calculateStickyHeaderHeight(),
+                useFieldNameToTitle: useFieldNameToTitle
+            })
+        ]
     });
 };
 
@@ -13854,7 +14077,7 @@ const AnalysisCard = ({ title, description, type, icon, image, hasDemo, loginReq
                 className: "h-full",
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        className: "p-0 rounded-sm h-1/2 h-max-1/2",
+                        className: "p-0 rounded-sm h-1/2 h-max-1/2 flex justify-center items-center overflow-hidden",
                         children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Image, {
                             component: Image,
                             src: `${image}`,
@@ -19108,6 +19331,77 @@ const registerMetadataSchemaApp = ()=>core.createGen3App({
         requiredEntityTypes: []
     });
 
+const DropdownWithIcon = ({ disableTargetWidth, LeftIcon, RightIcon = /*#__PURE__*/ jsxRuntime.jsx(io.IoMdArrowDropdown, {
+    size: "1.25em",
+    "aria-hidden": "true",
+    "data-testid": "dropdown-icon"
+}), TargetButtonChildren, targetButtonDisabled, dropdownElements, menuLabelText, menuLabelCustomClass, customPosition, fullHeight, zIndex = undefined, customDataTestId = undefined, tooltip = undefined, buttonAriaLabel = undefined })=>{
+    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Menu, {
+        width: disableTargetWidth ?? 'target',
+        ...customPosition && {
+            position: customPosition
+        },
+        "data-testid": customDataTestId ?? 'menu-elem',
+        zIndex: zIndex,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Menu.Target, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                    variant: "outline",
+                    color: "primary",
+                    className: `bg-base-max border-primary data-disabled:opacity-50 data-disabled:bg-base-max data-disabled:text-primary ${focusStyles}`,
+                    ...LeftIcon && {
+                        leftIcon: LeftIcon
+                    },
+                    rightSection: RightIcon,
+                    disabled: targetButtonDisabled,
+                    classNames: {
+                        // rightIcon: 'border-l pl-1 -mr-2',
+                        root: fullHeight ? 'h-full' : undefined
+                    },
+                    "aria-label": buttonAriaLabel,
+                    children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        children: tooltip?.length && !targetButtonDisabled ? /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                                label: tooltip,
+                                children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                    children: TargetButtonChildren
+                                })
+                            })
+                        }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            children: TargetButtonChildren
+                        })
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Menu.Dropdown, {
+                "data-testid": "dropdown-menu-options",
+                className: "border-1 border-secondary",
+                children: [
+                    menuLabelText && /*#__PURE__*/ jsxRuntime.jsxs(React.Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Menu.Label, {
+                                className: menuLabelCustomClass ?? 'font-bold',
+                                "data-testid": "menu-label",
+                                children: menuLabelText
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Menu.Divider, {})
+                        ]
+                    }),
+                    dropdownElements?.map(({ title, onClick, icon, disabled }, idx)=>/*#__PURE__*/ jsxRuntime.jsx(core$1.Menu.Item, {
+                            onClick: ()=>{
+                                if (onClick) onClick();
+                            },
+                            "data-testid": `${title}-${idx}`,
+                            leftSection: icon && icon,
+                            disabled: disabled,
+                            children: title
+                        }, `${title}-${idx}`))
+                ]
+            })
+        ]
+    });
+};
+
 const ActionButton = ({ title, enabled, type, leftIcon, rightIcon, tooltipText })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
         label: tooltipText,
@@ -25081,8 +25375,26 @@ const TabbedCohortBuilderPage = ({ headerProps, footerProps, configuration })=>{
             content: 'Tabbed Cohort Builder Page',
             key: 'gen3-tabbed-cohort-builder-page'
         },
-        children: /*#__PURE__*/ jsxRuntime.jsx(TabbedCohortBuilder, {
-            ...configuration
+        children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
+            align: "stretch",
+            classNames: {
+                root: 'w-full'
+            },
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    className: "w-full flex-col flex gap-4 fixed bg-white z-10",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(CohortManager$1, {
+                        index: configuration.index
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    className: "w-full mt-40 mr-4",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(TabbedCohortBuilder, {
+                        ...configuration,
+                        index: configuration.index
+                    })
+                })
+            ]
         })
     });
 };
@@ -25551,6 +25863,7 @@ const staticNotebookAPI = async (req, res)=>{
 
 exports.AISearchPageGetServerSideProps = AISearchPageGetServerSideProps;
 exports.AccessLevel = AccessLevel;
+exports.AccordionPanel = AccordionPanel;
 exports.ActionBar = ActionBar;
 exports.ActionButton = ActionButton;
 exports.AdminAuthZPageGetServerSideProps = AdminAuthZPageGetServerSideProps;
@@ -25593,6 +25906,8 @@ exports.DiscoveryPage = DiscoveryPage;
 exports.DiscoveryPageGetServerSideProps = DiscoveryPageGetServerSideProps;
 exports.DiscoveryRowRendererFactory = DiscoveryRowRendererFactory;
 exports.DropdownButton = DropdownButton;
+exports.DropdownPanel = DropdownPanel;
+exports.DropdownWithIcon = DropdownWithIcon;
 exports.EnumFacet = EnumFacet;
 exports.EnumFacetChart = EnumFacetChart;
 exports.ErrorCard = ErrorCard;
@@ -25607,6 +25922,7 @@ exports.FacetExpander = FacetExpander;
 exports.FacetSelector = FacetSelector;
 exports.FacetSortPanel = FacetSortPanel;
 exports.FacetTabs = FacetTabs;
+exports.FiltersPanel = FiltersPanel;
 exports.FirstTimeModal = FirstTimeModal;
 exports.Footer = Footer;
 exports.Gen3Button = Gen3Button;
@@ -25645,6 +25961,7 @@ exports.RangeFacet = RangeFacet;
 exports.ReactECharts = ReactECharts;
 exports.ResourcesFilters = ResourcesFilters;
 exports.SPECIAL_CASE_FIELDS = SPECIAL_CASE_FIELDS;
+exports.SegmentedControl = SegmentedControl;
 exports.SessionExpiredModal = SessionExpiredModal;
 exports.SinglePageStudyDetailsPanel = SinglePageStudyDetailsPanel;
 exports.StaticNotebookIFrame = StaticNotebookIFrame;
@@ -25658,6 +25975,7 @@ exports.SubmissionPageGetServerSideProps = SubmissionPageGetServerSideProps;
 exports.TabbedCohortBuilder = TabbedCohortBuilder;
 exports.TabbedCohortBuilderPage = TabbedCohortBuilderPage;
 exports.TabbedCohortBuilderPageGetServerSideProps = TabbedCohortBuilderPageGetServerSideProps;
+exports.TabbedPanel = TabbedPanel;
 exports.TagCloud = TagCloud;
 exports.TailwindConfig = TailwindConfig;
 exports.TopBar = TopBar;
@@ -25722,6 +26040,7 @@ exports.sessionLogout = sessionLogout;
 exports.sessionToken = sessionToken;
 exports.staticNotebookAPI = staticNotebookAPI;
 exports.stripTrailingSlash = stripTrailingSlash;
+exports.toCountsString = toCountsString;
 exports.toDisplayName = toDisplayName;
 exports.truncateString = truncateString;
 exports.unixTimeToString = unixTimeToString;