@gen3/frontend 0.11.11 → 0.11.13

package/dist/cjs/index.js

@@ -26,10 +26,12 @@ var defaultComposer = require('default-composer');
 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');
@@ -1480,7 +1480,7 @@ function hashCode(str) {
                     dangerouslySetInnerHTML: {
                         __html: textString
                     },
-                    "aria-label": "HTML content" // Provide context for HTML rendered content
+                    "aria-label": "HTML content"
                 });
             }
         case "textArray":
@@ -1620,7 +1620,7 @@ function hashCode(str) {
  * @param {string} paramValue - The parameter value
  * @returns {string} - The URL with the added parameter
  */ const appendParameterToUrl = (url, paramName, paramValue)=>{
-    if (!url || false) {
+    if (!url || !paramName) {
         return url;
     }
     // Extract hash fragment if present
@@ -1956,8 +1956,7 @@ const saveToFile = (savingStr, filename = 'credentials.json')=>{
             children: [
                 credentials.api_key === '' && /*#__PURE__*/ jsxRuntime.jsx(core$1.LoadingOverlay, {
                     visible: true
-                }) // pragma: allowlist-secret;
-                ,
+                }),
                 /*#__PURE__*/ jsxRuntime.jsx("p", {
                     children: "This key is only shown once. Please copy or save it and store it in a safe place."
                 }),
@@ -2514,7 +2513,7 @@ const processChartData$2 = (facetData, valueType = 'count', total, maxBins = 100
 };
 const HorizontalBarChart = ({ data, valueType, total, showLegendInChart = true })=>{
     const chartData = processChartData$2(data, valueType, total);
-    const chartDefinition = React.useMemo(()=>{
+    const chartDefinition = useDeepCompare.useDeepCompareMemo(()=>{
         return {
             tooltip: {
                 trigger: 'item',
@@ -2556,12 +2555,17 @@ const HorizontalBarChart = ({ data, valueType, total, showLegendInChart = true }
             series: chartData
         };
     }, [
-        chartData
+        chartData,
+        showLegendInChart
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         className: "w-full h-64",
         children: /*#__PURE__*/ jsxRuntime.jsx(ReactECharts, {
-            option: chartDefinition
+            option: chartDefinition,
+            settings: {
+                notMerge: true,
+                lazyUpdate: false
+            }
         })
     });
 };
@@ -2589,7 +2593,11 @@ const ChartRendererFactory = ()=>{
     // TODO: add default chart chart for missing chart type
     const element = ChartRendererFactory().getRenderer('chart', type);
     return element({
-        ...chartProps
+        total: chartProps.total,
+        valueType: chartProps.valueType,
+        label: chartProps.label,
+        data: chartProps.data,
+        showLegendInChart: chartProps.showLegendInChart
     }, parameters);
 };
 
@@ -2607,6 +2615,106 @@ const chartColors = [
     '#9a60b4',
     '#ea7ccc'
 ];
+const LegendRows = ({ data })=>{
+    const moreThanMaxRows = data.length > MAX_LEGEND_ROWS;
+    const limitedRows = moreThanMaxRows ? data.slice(0, MAX_LEGEND_ROWS) : data;
+    return limitedRows.map((element, elIndex)=>/*#__PURE__*/ jsxRuntime.jsxs(core$1.Table.Tr, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsxs(core$1.Table.Td, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.ColorSwatch, {
+                            className: "inline-block mr-2 align-middle",
+                            size: "1em",
+                            radius: "xs",
+                            color: chartColors?.[elIndex % chartColors.length] || ''
+                        }),
+                        element.key
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Td, {
+                    className: "text-right",
+                    children: element.count
+                })
+            ]
+        }, elIndex));
+};
+const LegendOverflow = ({ chart, data, chartTitle, counts })=>{
+    const [openedMoreRows, { open: openMoreRows, close: closeMoreRows }] = hooks.useDisclosure(false);
+    const theme = core$1.useMantineTheme();
+    return /*#__PURE__*/ jsxRuntime.jsxs(React.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Modal, {
+                opened: openedMoreRows,
+                onClose: closeMoreRows,
+                title: chartTitle,
+                size: "xl",
+                children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Grid, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Grid.Col, {
+                            span: 6,
+                            children: createChart(chart.chartType, {
+                                data: data === undefined ? [] : data,
+                                total: counts ?? 1,
+                                valueType: chart.valueType ?? 'count',
+                                label: chart.label,
+                                showLegendInChart: chart.showLegendInChart
+                            })
+                        }, "modal-col-1"),
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Grid.Col, {
+                            span: 6,
+                            children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                className: "border-solid border-[1px] border-[var(--mantine-color-gray-3)] h-full p-1",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Table, {
+                                    withRowBorders: false,
+                                    classNames: {
+                                        table: '',
+                                        td: 'p-1 leading-3'
+                                    },
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Tbody, {
+                                        children: data.map((element, elIndex)=>/*#__PURE__*/ jsxRuntime.jsxs(core$1.Table.Tr, {
+                                                children: [
+                                                    /*#__PURE__*/ jsxRuntime.jsxs(core$1.Table.Td, {
+                                                        children: [
+                                                            /*#__PURE__*/ jsxRuntime.jsx(core$1.ColorSwatch, {
+                                                                className: "inline-block mr-2 align-middle",
+                                                                size: "1em",
+                                                                radius: "xs",
+                                                                color: chartColors?.[elIndex % chartColors.length] || ''
+                                                            }),
+                                                            element.key
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Td, {
+                                                        className: "text-right",
+                                                        children: element.count
+                                                    })
+                                                ]
+                                            }, elIndex))
+                                    })
+                                })
+                            })
+                        }, "modal-col-2")
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Button, {
+                variant: "subtle",
+                onClick: openMoreRows,
+                leftSection: /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                    icon: "gen3:open-in-modal",
+                    height: 24,
+                    width: 24,
+                    color: theme.colors.accent[5]
+                }),
+                className: "text-black hover:text-black",
+                children: [
+                    data.length - MAX_LEGEND_ROWS,
+                    " more"
+                ]
+            })
+        ]
+    });
+};
 //The Charts component maps the data from ChartsProps into a grid of createChart() ReactNodes
 const Charts = ({ charts, data, counts, isSuccess, numCols = DEFAULT_COLS, style = 'tile', showLegends = false })=>{
     const spans = computeRowSpan(Object.keys(charts).length, numCols);
@@ -2617,109 +2725,10 @@ const Charts = ({ charts, data, counts, isSuccess, numCols = DEFAULT_COLS, style
                 message: `${field} not found in data`
             });
         }
-        const LegendRows = ({ data })=>{
-            const moreThanMaxRows = data.length > MAX_LEGEND_ROWS;
-            const limitedRows = moreThanMaxRows ? data.slice(0, MAX_LEGEND_ROWS) : data;
-            return limitedRows.map((element, elIndex)=>/*#__PURE__*/ jsxRuntime.jsxs(core$1.Table.Tr, {
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsxs(core$1.Table.Td, {
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(core$1.ColorSwatch, {
-                                    className: "inline-block mr-2 align-middle",
-                                    size: "1em",
-                                    radius: "xs",
-                                    color: chartColors?.[elIndex % chartColors.length] || ''
-                                }),
-                                element.key
-                            ]
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Td, {
-                            className: "text-right",
-                            children: element.count
-                        })
-                    ]
-                }, elIndex));
-        };
-        const LegendOverflow = ({ chart, data, chartTitle })=>{
-            const [openedMoreRows, { open: openMoreRows, close: closeMoreRows }] = hooks.useDisclosure(false);
-            const theme = core$1.useMantineTheme();
-            return /*#__PURE__*/ jsxRuntime.jsxs(React.Fragment, {
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Modal, {
-                        opened: openedMoreRows,
-                        onClose: closeMoreRows,
-                        title: chartTitle,
-                        size: "xl",
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Grid, {
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(core$1.Grid.Col, {
-                                    span: 6,
-                                    children: createChart(chart.chartType, {
-                                        data: data === undefined ? [] : data,
-                                        total: counts ?? 1,
-                                        valueType: chart.valueType ?? 'count',
-                                        label: chart.label,
-                                        showLegendInChart: chart.showLegendInChart
-                                    })
-                                }, "modal-col-1"),
-                                /*#__PURE__*/ jsxRuntime.jsx(core$1.Grid.Col, {
-                                    span: 6,
-                                    children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                        className: "border-solid border-[1px] border-[var(--mantine-color-gray-3)] h-full p-1",
-                                        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Table, {
-                                            withRowBorders: false,
-                                            classNames: {
-                                                table: '',
-                                                td: 'p-1 leading-3'
-                                            },
-                                            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Tbody, {
-                                                children: data.map((element, elIndex)=>/*#__PURE__*/ jsxRuntime.jsxs(core$1.Table.Tr, {
-                                                        children: [
-                                                            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Table.Td, {
-                                                                children: [
-                                                                    /*#__PURE__*/ jsxRuntime.jsx(core$1.ColorSwatch, {
-                                                                        className: "inline-block mr-2 align-middle",
-                                                                        size: "1em",
-                                                                        radius: "xs",
-                                                                        color: chartColors?.[elIndex % chartColors.length] || ''
-                                                                    }),
-                                                                    element.key
-                                                                ]
-                                                            }),
-                                                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Td, {
-                                                                className: "text-right",
-                                                                children: element.count
-                                                            })
-                                                        ]
-                                                    }, elIndex))
-                                            })
-                                        })
-                                    })
-                                }, "modal-col-2")
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsxs(core$1.Button, {
-                        variant: "subtle",
-                        onClick: openMoreRows,
-                        leftSection: /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
-                            icon: "gen3:open-in-modal",
-                            height: 24,
-                            width: 24,
-                            color: theme.colors.accent[5]
-                        }),
-                        className: "text-black hover:text-black",
-                        children: [
-                            data.length - MAX_LEGEND_ROWS,
-                            " more"
-                        ]
-                    })
-                ]
-            });
-        };
         const dataKeys = field in data && data?.[field].length > 0 ? Object.keys(data[field][0]) : [];
         const chartTitle = charts[field].title ?? core.fieldNameToTitle(field);
-        const moreThanMaxRows = data?.[field] && data[field].length > MAX_LEGEND_ROWS;
+        const numberOfDataItems = data?.[field] && data[field].length;
+        const moreThanMaxRows = numberOfDataItems > MAX_LEGEND_ROWS;
         return /*#__PURE__*/ jsxRuntime.jsx(core$1.Grid.Col, {
             span: spans[indexNum],
             children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Card, {
@@ -2750,7 +2759,7 @@ const Charts = ({ charts, data, counts, isSuccess, numCols = DEFAULT_COLS, style
                         label: charts[field].label,
                         showLegendInChart: charts[field].showLegendInChart
                     }),
-                    showLegends && /*#__PURE__*/ jsxRuntime.jsx(core$1.Card.Section, {
+                    numberOfDataItems > 0 && showLegends && /*#__PURE__*/ jsxRuntime.jsx(core$1.Card.Section, {
                         inheritPadding: true,
                         py: "xs",
                         withBorder: style === 'box',
@@ -2788,7 +2797,8 @@ const Charts = ({ charts, data, counts, isSuccess, numCols = DEFAULT_COLS, style
                         children: /*#__PURE__*/ jsxRuntime.jsx(LegendOverflow, {
                             chart: charts[field],
                             data: data[field],
-                            chartTitle: chartTitle
+                            chartTitle: chartTitle,
+                            counts: counts ?? 0
                         })
                     })
                 ]
@@ -2801,7 +2811,7 @@ const Charts = ({ charts, data, counts, isSuccess, numCols = DEFAULT_COLS, style
     });
 };
 
-const CollapsableCharts = ({ config, data })=>{
+const CollapsableCharts = ({ config, data, isError, isFetching, isSuccess })=>{
     const [showLegends, setShowLegends] = React.useState(config.showLegends?.enabled);
     if (!(config?.charts && Object.keys(config.charts).length > 0)) {
         return /*#__PURE__*/ jsxRuntime.jsx(core$1.Center, {
@@ -2853,7 +2863,7 @@ const CollapsableCharts = ({ config, data })=>{
                                 charts: config.charts,
                                 data: data,
                                 counts: 2,
-                                isSuccess: true,
+                                isSuccess: isSuccess,
                                 numCols: 4
                             })
                         })
@@ -3165,6 +3175,8 @@ const classifyFacets = (data, index, fieldMapping = [], facetDefinitionsFromConf
                 label: facetDef.label ?? facetName,
                 // assumption is that the initial data has the min and max values
                 sharedWithIndices: (sharedFieldMapping && fieldKey in sharedFieldMapping && sharedFieldMapping[fieldKey].filter((x)=>x.index !== index)) ?? undefined,
+                moveValuesToBottom: facetDef?.moveValuesToBottom,
+                excludeValues: facetDef?.excludeValues,
                 range: facetDef.range ?? type === 'range' ? {
                     minimum: Math.floor(Number(value[0].key[0])),
                     maximum: Math.ceil(Number(value[0].key[1]))
@@ -3343,6 +3355,22 @@ const convertToStringArray = (inputArray)=>inputArray.map(String);
  * @param {FacetSortType} facetSort - The facet sort type represented as a string in the format "type-direction".
  * @returns {SortType} - The mapped sort type object containing type and direction.
  */ const mapFacetSortToSortType = (facetSort)=>{
+    // Default fallback values
+    const defaultSort = {
+        type: 'value',
+        direction: 'dsc'
+    };
+    // Validate input
+    if (!facetSort) {
+        console.warn(`Invalid facetSort: expected string, got ${typeof facetSort}. Using default.`);
+        return defaultSort;
+    }
+    const parts = facetSort.split('-');
+    // Check if we have exactly 2 parts
+    if (parts.length !== 2) {
+        console.warn(`Invalid facetSort format: expected 'type-direction', got '${facetSort}'. Using default.`);
+        return defaultSort;
+    }
     const [type, direction] = facetSort.split('-');
     return {
         type: type === 'label' ? 'alpha' : 'value',
@@ -3417,6 +3445,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
@@ -3623,104 +3818,6 @@ 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`;
-    }
-};
-/**
- * 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 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, {
@@ -3751,63 +3848,7 @@ const OverflowTooltippedLabel = ({ children, label, className = 'flex-grow font-
     });
 };
 
-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 FacetEnumList = ({ field, facetName, hooks, valueLabel, isSettings = false, isFacetView = true, isSearching = false, showPercent = false, hideIfEmpty = false, showSorting = true, sort = 'value-dsc', moveValuesToBottom = [], excludeValues = [] })=>{
     const [isGroupExpanded, setIsGroupExpanded] = React.useState(false);
     const cardRef = React.useRef(null);
     const searchInputRef = React.useRef(null);
@@ -3864,7 +3905,7 @@ const FacetEnumList = ({ field, facetName, hooks, valueLabel, isSettings = false
             ];
             updateFacetEnum(field, updated, updateFacetFilters, clearFilters, combineMode);
         } else {
-            const updated = selectedEnums?.filter((x)=>x != value);
+            const updated = selectedEnums?.filter((x)=>x !== value);
             updateFacetEnum(field, updated ?? [], updateFacetFilters, clearFilters, combineMode);
         }
     };
@@ -3901,7 +3942,7 @@ const FacetEnumList = ({ field, facetName, hooks, valueLabel, isSettings = false
     useDeepCompare.useDeepCompareEffect(()=>{
         if (isSuccess && data) {
             // get all the data except the missing and empty values
-            const tempFilteredData = Object.entries(data).filter((entry)=>entry[0] != '_missing' && entry[0] != '').filter((entry)=>searchTerm === '' ? entry : entry[0].toLowerCase().includes(searchTerm.toLowerCase().trim()));
+            const tempFilteredData = Object.entries(data).filter((entry)=>entry[0] !== '_missing' && entry[0] !== '').filter((entry)=>searchTerm === '' ? entry : entry[0].toLowerCase().includes(searchTerm.toLowerCase().trim()));
             // it is possible that the selected enums are not in the data as their counts are 0
             // therefore we need to add them to the data
             const selectedEnumNotInData = selectedEnums ? selectedEnums.reduce((acc, curr)=>{
@@ -3916,16 +3957,16 @@ const FacetEnumList = ({ field, facetName, hooks, valueLabel, isSettings = false
             const remainingValues = tempFilteredData.length + selectedEnumNotInData.length - maxValuesToDisplay;
             const cardStyle = calcCardStyle(remainingValues);
             const numberOfBarsToDisplay = calcNumberOfBarsToDisplay(tempFilteredData.length + selectedEnumNotInData.length);
+            const allData = [
+                ...tempFilteredData,
+                ...selectedEnumNotInData
+            ];
+            // remove any enum in excludeValues
+            const filteredData = allData.filter((x)=>!excludeValues?.includes(x[0].toString()));
             setFacetChartData((prevFacetChartData)=>({
                     ...prevFacetChartData,
-                    filteredData: [
-                        ...tempFilteredData,
-                        ...selectedEnumNotInData
-                    ],
-                    filteredDataObj: Object.fromEntries([
-                        ...tempFilteredData,
-                        ...selectedEnumNotInData
-                    ]),
+                    filteredData: filteredData,
+                    filteredDataObj: Object.fromEntries(filteredData),
                     remainingValues,
                     numberOfBarsToDisplay,
                     isSuccess: true,
@@ -3951,8 +3992,9 @@ const FacetEnumList = ({ field, facetName, hooks, valueLabel, isSettings = false
     useDeepCompare.useDeepCompareEffect(()=>{
         if (facetChartData.filteredData && facetChartData.filteredData.length > 0) {
             const obj = [
-                ...facetChartData.filteredData
-            ].sort(sortType.type === 'value' ? ([, a], [, b])=>sortType.direction === 'dsc' ? b - a : a - b : ([a], [b])=>sortType.direction === 'dsc' ? compareKeysDescending(a, b) : compareKeysAscending(a, b)).slice(0, !isGroupExpanded ? maxValuesToDisplay : undefined);
+                ...facetChartData.filteredData.filter((x)=>!moveValuesToBottom.includes(x[0].toString())).sort(sortType.type === 'value' ? ([, a], [, b])=>sortType.direction === 'dsc' ? b - a : a - b : ([a], [b])=>sortType.direction === 'dsc' ? compareKeysDescending(a, b) : compareKeysAscending(a, b)),
+                ...facetChartData.filteredData.filter((x)=>moveValuesToBottom.includes(x[0].toString()))
+            ].slice(0, !isGroupExpanded ? maxValuesToDisplay : undefined);
             setSortedData(obj);
             if (updateVisibleValues) updateVisibleValues(obj);
         }
@@ -4165,7 +4207,7 @@ const FacetEnumList = ({ field, facetName, hooks, valueLabel, isSettings = false
     });
 };
 
-const EnumFacet = ({ field, hooks, valueLabel, description, facetName, showPercent = true, hideIfEmpty = true, showSearch = true, showFlip = false, showSettings = false, startShowingData = true, dismissCallback = undefined, width = undefined, sharedWithIndices = undefined, header = {
+const EnumFacet = ({ field, hooks, valueLabel, description, facetName, showPercent = true, hideIfEmpty = true, showSearch = true, showFlip = false, showSettings = false, startShowingData = true, dismissCallback = undefined, width = undefined, sharedWithIndices = undefined, moveValuesToBottom = [], excludeValues = [], header = {
     Panel: FacetHeader,
     Label: FacetText,
     iconStyle: controlsIconStyle
@@ -4216,201 +4258,63 @@ const EnumFacet = ({ field, hooks, valueLabel, description, facetName, showPerce
                     isFacetView: isFacetView,
                     isSearching: isSearching,
                     hideIfEmpty: hideIfEmpty,
-                    showPercent: showPercent
+                    showPercent: showPercent,
+                    moveValuesToBottom: moveValuesToBottom,
+                    excludeValues: excludeValues
                 })
             })
         ]
     });
 };
 
-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;
@@ -4491,7 +4395,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)=>{
@@ -4540,7 +4444,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);
         }
@@ -4600,6 +4504,556 @@ 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,
+                moveValuesToBottom: facetDefinition?.moveValuesToBottom ?? [],
+                excludeValues: facetDefinition?.excludeValues ?? []
+            }, `${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
@@ -4621,58 +5075,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({
@@ -7167,6 +7569,20 @@ const TableIcons = {
         })
 };
 
+const CompareFn = (fieldValue, cmpOp, value)=>{
+    switch(cmpOp){
+        case 'alwaysTrue':
+            return true;
+        case 'arrayNotEmpty':
+            return Array.isArray(fieldValue) && fieldValue.length > 0;
+    }
+};
+const isSelectable = (row, config)=>{
+    if (!config) return false;
+    if (!Object.hasOwn(row.original, config.field)) return false;
+    const fieldValue = row.original[config.field];
+    return CompareFn(fieldValue, config.comparer, config.value);
+};
 const extractCellValue = (func)=>({ cell, row })=>func({
             value: cell.getValue(),
             cell,
@@ -7199,6 +7615,13 @@ const DiscoveryTable = ({ data, hits, dataRequestStatus, setSorting, setPaginati
     }, [
         config.studyColumns
     ]);
+    const checkIfRowIsSelectable = (row)=>{
+        if (config.tableConfig?.selectableRows) return true;
+        if (config.tableConfig?.selectableRowConfiguration) {
+            return isSelectable(row, config.tableConfig.selectableRowConfiguration);
+        }
+        return false;
+    };
     const table = mantineReactTable.useMantineReactTable({
         columns: cols,
         data: data ?? [],
@@ -7209,7 +7632,7 @@ const DiscoveryTable = ({ data, hits, dataRequestStatus, setSorting, setPaginati
             onPaginationChange: setPagination,
             onSortingChange: setSorting
         } : {},
-        enableRowSelection: config.tableConfig?.selectableRows ?? false,
+        enableRowSelection: checkIfRowIsSelectable,
         rowCount: hits,
         icons: TableIcons,
         enableTopToolbar: false,
@@ -8437,6 +8860,7 @@ const useSearchMetadata = ({ discoveryConfig, searchTerms, mdsData, isSuccess })
             uidField
         ],
         idField: uidField,
+        tokenize: (string, _fieldName)=>string.split(' '),
         extractField: extractValue,
         //  processTerm: (term) => suffixes(term, 3),
         searchOptions: {
@@ -9340,7 +9764,8 @@ registerDefaultDiscoveryDataLoaders();
                         }) : null,
                         discoveryConfig.features?.chartsSection?.enabled && /*#__PURE__*/ jsxRuntime.jsx(CollapsableCharts, {
                             config: discoveryConfig.features?.chartsSection,
-                            data: chartData
+                            data: chartData,
+                            isSuccess: dataRequestStatus.isSuccess
                         }),
                         /*#__PURE__*/ jsxRuntime.jsxs("div", {
                             className: "flex items-center p-2 mb-4 bg-base-max rounded-lg",
@@ -9770,6 +10195,23 @@ const RenderParagraphsCell = ({ value })=>{
             }, i))
     });
 };
+const RenderIfArrayHasData = ({ value })=>{
+    const content = value;
+    if (lodash.isArray(content) && content.length > 0) {
+        return /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+            icon: "gen3:checked-filled",
+            height: 22,
+            width: 22,
+            className: "text-utility-success"
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+        icon: "gen3:cancel-filled",
+        height: 22,
+        width: 22,
+        className: "text-utility-error"
+    });
+};
 // TODO Fix below
 // eslint-disable-next-line react/prop-types
 const DiscoveryRenderTagsCell = ({ value })=>{
@@ -9800,6 +10242,7 @@ const DiscoveryRenderTagsCell = ({ value })=>{
 const Gen3DiscoveryStandardCellRenderers = {
     array: {
         NegativePositive: RenderArrayCellNegativePositive$1,
+        HasData: RenderIfArrayHasData,
         default: RenderArrayCell$1
     },
     string: {
@@ -12164,237 +12607,64 @@ const DownloadsPanel = ({ dropdowns, buttons, loginForDownload, index, totalCoun
                                 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 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 = {};
@@ -12422,10 +12692,22 @@ const EmptyData = {};
     const isXl = hooks.useMediaQuery('(min-width: 1600px)');
     const [accessLevel, setAccessLevel] = React.useState(core.Accessibility.ALL);
     const sharedFiltersMap = core.useCoreSelector((state)=>core.selectSharedFilters(state));
-    let numCols = 3;
-    if (isSm) numCols = 1;
-    if (isMd) numCols = 2;
-    if (isXl) numCols = 4;
+    const defaultDropdowns = React.useMemo(()=>dropdowns ?? {}, [
+        dropdowns
+    ]);
+    const defaultButtons = React.useMemo(()=>buttons ?? [], [
+        buttons
+    ]);
+    const numCols = React.useMemo(()=>{
+        if (isSm) return 1;
+        if (isMd) return 2;
+        if (isXl) return 4;
+        return 3;
+    }, [
+        isSm,
+        isMd,
+        isXl
+    ]);
     const index = guppyConfig.dataType;
     const fields = React.useMemo(()=>getAllFieldsFromFilterConfigs(filters?.tabs ?? []), [
         filters?.tabs
@@ -12439,14 +12721,20 @@ const EmptyData = {};
         filters: cohortFilters,
         accessibility: accessLevel
     });
-    const { data: chartData, isSuccess: isChartSuccess, isFetching: isChartFetching, isError: isChartError } = core.useGetAggsNoFilterSelfQuery({
-        type: index,
-        fields: [
+    const chartKeys = useDeepCompare.useDeepCompareMemo(()=>[
             ...Object.keys(chartsSection?.charts ?? {}),
             ...Object.keys(charts)
-        ],
+        ], [
+        chartsSection?.charts,
+        charts
+    ]);
+    const { data: chartData, isSuccess: isChartSuccess, isFetching: isChartFetching, isError: isChartError } = core.useGetAggsNoFilterSelfQuery({
+        type: index,
+        fields: chartKeys,
         filters: cohortFilters,
         accessibility: accessLevel
+    }, {
+        skip: chartKeys.length === 0
     });
     const getEnumFacetData = useDeepCompare.useDeepCompareCallback((field)=>{
         let filters = undefined;
@@ -12469,7 +12757,7 @@ const EmptyData = {};
             isSuccess: isSuccess
         };
     }, [
-        cohortFilters,
+        cohortFilters.root,
         data,
         isSuccess
     ]);
@@ -12618,8 +12906,8 @@ const EmptyData = {};
                                 className: "flex justify-between mb-2 ml-2",
                                 children: [
                                     /*#__PURE__*/ jsxRuntime.jsx(DownloadsPanel, {
-                                        dropdowns: dropdowns ?? {},
-                                        buttons: buttons ?? [],
+                                        dropdowns: defaultDropdowns,
+                                        buttons: defaultButtons,
                                         loginForDownload: loginForDownload,
                                         index: index,
                                         totalCount: counts ?? 0,
@@ -12638,7 +12926,8 @@ const EmptyData = {};
                                     ...chartsSection,
                                     charts: summaryCharts
                                 },
-                                data: chartData ?? EmptyData
+                                data: chartData ?? EmptyData,
+                                isSuccess: isChartSuccess
                             }) : /*#__PURE__*/ jsxRuntime.jsx(Charts, {
                                 charts: summaryCharts,
                                 data: chartData ?? EmptyData,
@@ -12692,6 +12981,9 @@ const TabsLayoutToComponentProp = (tabsLayout)=>{
 const CohortBuilder = ({ explorerConfig, sharedFiltersMap = null, tabsLayout = 'left' })=>{
     const dispatch = core.useCoreDispatch();
     dispatch(core.setSharedFilters(sharedFiltersMap ?? {}));
+    const configuration = useDeepCompare.useDeepCompareMemo(()=>explorerConfig, [
+        explorerConfig
+    ]);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         className: "w-full",
         children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Tabs, {
@@ -12702,17 +12994,24 @@ const CohortBuilder = ({ explorerConfig, sharedFiltersMap = null, tabsLayout = '
                 /*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.List, {
                     className: "w-full",
                     justify: TabsLayoutToComponentProp(tabsLayout),
-                    children: explorerConfig.map((panelConfig)=>/*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.Tab, {
+                    children: configuration.map((panelConfig)=>/*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.Tab, {
                             value: panelConfig.tabTitle,
                             children: panelConfig.tabTitle
                         }, `${panelConfig.tabTitle}-tabList`))
                 }),
-                explorerConfig.map((panelConfig)=>/*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.Panel, {
+                configuration.map((panelConfig)=>/*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.Panel, {
                         value: panelConfig.tabTitle,
-                        children: /*#__PURE__*/ React.createElement(CohortPanel, {
-                            ...panelConfig,
-                            key: `${panelConfig.tabTitle}-CohortPanel`
-                        })
+                        children: /*#__PURE__*/ jsxRuntime.jsx(CohortPanel, {
+                            guppyConfig: panelConfig.guppyConfig,
+                            chartsSection: panelConfig?.chartsSection,
+                            filters: panelConfig.filters,
+                            tabTitle: panelConfig.tabTitle,
+                            table: panelConfig.table,
+                            dropdowns: panelConfig.dropdowns,
+                            buttons: panelConfig.buttons,
+                            loginForDownload: panelConfig.loginForDownload,
+                            sharedFiltersMap: panelConfig.sharedFiltersMap
+                        }, `${panelConfig.tabTitle}-CohortPanel`)
                     }, `${panelConfig.tabTitle}-tabPanel`))
             ]
         })
@@ -12832,6 +13131,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),
@@ -12846,38 +13157,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,
@@ -12885,7 +13167,8 @@ const TabbedCohortBuilder = ({ index, tabsConfiguration })=>{
             days: RangeHookInstances,
             percent: RangeHookInstances,
             datetime: RangeHookInstances,
-            toggle: RangeHookInstances
+            toggle: RangeHookInstances,
+            upload: EnumHookInstances
         };
     }, [
         getEnumFacetData,
@@ -13843,47 +14126,25 @@ const Workspace = ({ config })=>{
 };
 
 const TextDescription = ({ description })=>{
-    const [extend, setExtend] = React.useState(false);
-    const textRef = React.useRef(null);
-    const [isClamped, setClamped] = React.useState(false);
-    React.useEffect(()=>{
-        // Function that should be called on window resize
-        function handleResize() {
-            if (textRef && textRef.current) {
-                setClamped(textRef.current.scrollHeight > textRef.current.clientHeight);
-            }
-        }
-        // Add event listener to window resize
-        window.addEventListener('resize', handleResize);
-        // Remove event listener on cleanup
-        return ()=>window.removeEventListener('resize', handleResize);
-    }, []); // Empty array ensures that it would only run on mount
-    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [
-            !extend ? /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
-                ref: textRef,
-                size: "sm",
-                lineClamp: 4,
-                children: description
-            }) : /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
-                size: "sm",
-                children: description
-            }),
-            isClamped && /*#__PURE__*/ jsxRuntime.jsx("button", {
-                onClick: ()=>setExtend((extend)=>!extend),
-                children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                    className: "flex text-xs font-semibold text-base-contrast-light",
-                    children: [
-                        !extend ? 'Extend Text' : 'Collapse Text',
-                        ' ',
-                        /*#__PURE__*/ jsxRuntime.jsx("div", {
-                            className: "my-auto",
-                            children: !extend ? /*#__PURE__*/ jsxRuntime.jsx(md.MdKeyboardArrowDown, {}) : /*#__PURE__*/ jsxRuntime.jsx(md.MdKeyboardArrowUp, {})
-                        })
-                    ]
+    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Spoiler, {
+        maxHeight: 80,
+        showLabel: /*#__PURE__*/ jsxRuntime.jsxs("span", {
+            children: [
+                "Extend Text ",
+                /*#__PURE__*/ jsxRuntime.jsx(md.MdKeyboardArrowDown, {
+                    className: "inline"
                 })
-            })
-        ]
+            ]
+        }),
+        hideLabel: /*#__PURE__*/ jsxRuntime.jsxs("span", {
+            children: [
+                "Collapse Text ",
+                /*#__PURE__*/ jsxRuntime.jsx(md.MdKeyboardArrowUp, {
+                    className: "inline"
+                })
+            ]
+        }),
+        children: description
     });
 };
 
@@ -13891,20 +14152,22 @@ const AnalysisCard = ({ title, description, type, icon, image, hasDemo, loginReq
     return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
         align: "stretch",
         justify: "space-between",
-        className: "rounded-sm rounded-t-md bg-base-max p-0",
+        className: "rounded-sm rounded-t-md bg-base-max p-0 h-full",
         children: [
             /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                className: "h-full",
+                className: "relative",
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        className: "p-0 rounded-sm h-1/2 h-max-1/2",
-                        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Image, {
-                            component: Image,
-                            src: `${image}`,
-                            alt: `${title} image`,
-                            height: 1000,
-                            width: 1000,
-                            radius: "md"
+                        className: "p-0 rounded-sm h-[200px] h-max-1/2 flex justify-center items-center relative overflow-hidden",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Image, {
+                                component: Image,
+                                src: `${image}`,
+                                alt: "",
+                                radius: "md",
+                                width: 500,
+                                height: 500
+                            })
                         })
                     }),
                     /*#__PURE__*/ jsxRuntime.jsxs("div", {
@@ -13915,7 +14178,7 @@ const AnalysisCard = ({ title, description, type, icon, image, hasDemo, loginReq
                                 children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Image, {
                                     component: Image,
                                     src: `${icon}`,
-                                    alt: `${title} logo`,
+                                    alt: "",
                                     width: 40,
                                     height: 40,
                                     radius: "lg"
@@ -16959,7 +17222,7 @@ const registerCohortDiscoveryApp = ()=>core.createGen3AppWithOwnStore({
         App: CohortDiscovery,
         id: AppId$1,
         name: _APP_NAME$2,
-        version: 'v1.0.0',
+        version: _APP_VERSION$1,
         requiredEntityTypes: [],
         store: AppStore,
         context: AppContext
@@ -19151,6 +19414,98 @@ const registerMetadataSchemaApp = ()=>core.createGen3App({
         requiredEntityTypes: []
     });
 
+const ADDITIONAL_DOWNLOAD_MESSAGE = 'A previous download is being processed. Additional downloads may be started.';
+const DropdownWithIcon = ({ disableTargetWidth, LeftSection, RightSection = /*#__PURE__*/ jsxRuntime.jsx("div", {
+    className: "border-l pl-1 -mr-2",
+    children: /*#__PURE__*/ jsxRuntime.jsx(io.IoMdArrowDropdown, {
+        size: "1.25em",
+        "aria-hidden": "true",
+        "data-testid": "dropdown-icon"
+    })
+}), TargetButtonChildren, targetButtonDisabled, dropdownElements, menuLabelText, menuLabelCustomClass, customPosition, fullHeight, zIndex = 900, customTargetButtonDataTestId = undefined, targetButtonTooltip = undefined, buttonAriaLabel = undefined, closeOnItemClick = true })=>{
+    const targetRef = React.useRef(null);
+    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Menu, {
+        width: !disableTargetWidth ? 'target' : null,
+        ...customPosition && {
+            position: customPosition
+        },
+        zIndex: zIndex,
+        closeOnItemClick: closeOnItemClick,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Menu.Target, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                    label: targetButtonTooltip,
+                    disabled: !targetButtonTooltip,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                        variant: "outline",
+                        color: "primary",
+                        className: `flex items-center bg-base-max border-primary data-disabled:opacity-50 data-disabled:bg-base-max data-disabled:text-primary ${focusStyles}`,
+                        ...LeftSection && {
+                            leftSection: LeftSection
+                        },
+                        rightSection: RightSection,
+                        disabled: targetButtonDisabled,
+                        classNames: {
+                            root: `${fullHeight ? 'h-full' : undefined}`
+                        },
+                        ref: targetRef,
+                        "aria-label": buttonAriaLabel,
+                        "data-testid": customTargetButtonDataTestId ?? 'menu-elem',
+                        children: TargetButtonChildren
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Menu.Dropdown, {
+                "data-testid": "dropdown-menu-options",
+                className: "border-1 border-secondary",
+                children: [
+                    menuLabelText && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.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, isLoading, loadingTooltip }, idx)=>{
+                        const menuItem = /*#__PURE__*/ jsxRuntime.jsx(core$1.Menu.Item, {
+                            onClick: ()=>{
+                                if (onClick) {
+                                    onClick();
+                                }
+                                // This is done inorder to set the last focused element as the menu target element
+                                // This is done to return focus to the target element if the modal is closed with ESC
+                                if (targetRef?.current) {
+                                    targetRef?.current?.focus();
+                                }
+                            },
+                            "data-testid": `${title}-${idx}`,
+                            leftSection: icon && icon,
+                            disabled: disabled,
+                            children: title
+                        }, `${title}-${idx}`);
+                        if (isLoading) {
+                            return /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                                label: loadingTooltip || ADDITIONAL_DOWNLOAD_MESSAGE,
+                                position: "right",
+                                withArrow: true,
+                                multiline: true,
+                                w: 400,
+                                children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                    children: menuItem
+                                })
+                            }, `${title}-${idx}`);
+                        }
+                        return menuItem;
+                    })
+                ]
+            })
+        ]
+    });
+};
+
 const ActionButton = ({ title, enabled, type, leftIcon, rightIcon, tooltipText })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
         label: tooltipText,
@@ -25612,6 +25967,7 @@ const staticNotebookAPI = async (req, res)=>{
 
 exports.AISearchPageGetServerSideProps = AISearchPageGetServerSideProps;
 exports.AccessLevel = AccessLevel;
+exports.AccordionPanel = AccordionPanel;
 exports.ActionBar = ActionBar;
 exports.ActionButton = ActionButton;
 exports.AdminAuthZPageGetServerSideProps = AdminAuthZPageGetServerSideProps;
@@ -25654,6 +26010,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;
@@ -25668,6 +26026,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;
@@ -25706,6 +26065,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;
@@ -25719,6 +26079,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;