@gen3/frontend 0.11.11 → 0.11.13

package/dist/esm/index.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { createContext, useState, useMemo, useEffect, useCallback, useContext, useRef, createElement, forwardRef, useReducer } from 'react';
-import { useUserAuth, useCoreSelector, selectUserDetails, useGetAuthzMappingsQuery, fetchFence, isFetchError, WorkspaceStatus, useGetWorkspaceStatusQuery, useGetWorkspacePayModelsQuery, useTerminateWorkspaceMutation, selectRequestedWorkspaceStatus, selectRequestedWorkspaceStatusTimestamp, useCoreDispatch, setActiveWorkspaceStatus, RequestedWorkspaceStatus, setRequestedWorkspaceStatus, isTimeGreaterThan, useGetCSRFQuery, useLazyFetchUserDetailsQuery, selectUserAuthStatus, GEN3_REDIRECT_URL, GEN3_FENCE_API, showModal, Modals, isAuthenticated, useGetLoginProvidersQuery, hideModal, selectCurrentModal, fieldNameToTitle, isOperationWithField, selectShouldShareFilters, selectSharedFilters, updateCohortFilter as updateCohortFilter$1, selectIndexedFilterByName, isUnion, isOperatorWithFieldAndArrayOfOperands, extractEnumFilterValue, removeCohortFilter as removeCohortFilter$1, trimFirstFieldNameToTitle, useIsUserLoggedIn, GEN3_DOMAIN, useDataLibrary, DataLibraryStoreMode, buildListItemsGroupedByDataset, extractFileDatasetsInRecords, useGetMDSQuery, selectAuthzMappingData, useGetAggMDSQuery, useAskQuestionMutation, useGetIndexAggMDSQuery, useGetTagsQuery, setCohortFilter as setCohortFilter$1, clearCohortFilters as clearCohortFilters$1, handleOperation, selectAvailableCohorts, selectCurrentCohortId as selectCurrentCohortId$1, selectCohortFilters, selectCurrentCohortModified, selectCurrentCohortSaved, setCohortIndexFilters, setActiveCohort, toggleCohortBuilderCategoryFilter, selectCohortFilterExpanded, setCohortFilterCombineMode, selectCohortFilterCombineMode, selectCurrentCohortName as selectCurrentCohortName$1, useGeneralGQLQuery, selectIndexFilters, useGetRawDataAndTotalCountsQuery, isJSONValue, downloadFromGuppyToBlob, downloadJSONDataFromGuppy, Accessibility, selectAllCohortFiltersCollapsed, toggleCohortBuilderAllFilters, setShouldShareFilters, useGetAggsQuery, useGetAggsNoFilterSelfQuery, isIntersection, useGetCountsQuery, setSharedFilters, usePrevious, selectHeadersWithCSRFToken, GEN3_GUPPY_API, useLaunchWorkspaceMutation, selectActiveWorkspaceStatus, isFetchBaseQueryError, setActiveWorkspace, getCurrentTimestamp, selectWorkspaceStatusFromService, selectActiveWorkspaceId, useGetWorkspaceOptionsQuery, GEN3_WORKSPACE_API, useGetExternalLoginsQuery, useSetCurrentPayModelMutation, PodStatus, PodConditionType, isWorkspaceRunningOrStopping, GEN3_API, GEN3_COMMONS_NAME, getTimestamp, createAppStore, getRemoteSupportServiceRegistry, isHttpStatusError, MissingServiceConfigurationError, useLazyGetAggsNoFilterSelfQuery, useCreateRequestMutation, buildGetAggregationQuery, processHistogramResponse, roundHistogramResponse, selectCSRFToken, useUserRequestQuery, getGen3AppId, createGen3AppWithOwnStore, createAppApiForRTKQ, useGetDictionaryQuery, useGetMetadataByIdQuery, createGen3App, CoreProvider, fetchJSONDataFromURL, HttpMethod, groupSharedFields, useGetCredentialsQuery, useRemoveCredentialMutation, useAddNewCredentialMutation, useGetProjectsDetailsQuery, useGetSubmissionsQuery, isCohortItem, isFileItem, fetchFencePresignedURL, HTTPError, getFederatedLoginStatus, queryMultipleMDSRecords, GEN3_MANIFEST_API, extractIndexFromDataLibraryCohort, isFilterSet, getNumberOfItemsInDatalist, isAdditionalDataItem, useLazyGetCrosswalkDataQuery } from '@gen3/core';
-import { LoadingOverlay, Card, Group, Avatar, Text, Checkbox, Stack, Center, Loader, Tooltip, UnstyledButton, ThemeIcon, Box, Select, Button, Divider, Textarea, FileButton, Anchor, Modal, Grid, Table, ColorSwatch, useMantineTheme, Accordion, Switch, ActionIcon, Badge, TextInput, SegmentedControl, NumberInput, RangeSlider, MultiSelect, SimpleGrid, Highlight, MantineProvider, Tabs, Flex, Menu, Alert, Drawer, CopyButton, factory, useProps, getStyleObject, Paper, useCombobox, Combobox, ScrollArea, Autocomplete, Title, Transition, rem, Stepper, Image as Image$1, NavLink, List, createTheme, Pagination, FileInput, CloseButton } from '@mantine/core';
+import { useUserAuth, useCoreSelector, selectUserDetails, useGetAuthzMappingsQuery, fetchFence, isFetchError, WorkspaceStatus, useGetWorkspaceStatusQuery, useGetWorkspacePayModelsQuery, useTerminateWorkspaceMutation, selectRequestedWorkspaceStatus, selectRequestedWorkspaceStatusTimestamp, useCoreDispatch, setActiveWorkspaceStatus, RequestedWorkspaceStatus, setRequestedWorkspaceStatus, isTimeGreaterThan, useGetCSRFQuery, useLazyFetchUserDetailsQuery, selectUserAuthStatus, GEN3_REDIRECT_URL, GEN3_FENCE_API, showModal, Modals, isAuthenticated, useGetLoginProvidersQuery, hideModal, selectCurrentModal, fieldNameToTitle, isOperationWithField, selectShouldShareFilters, selectSharedFilters, updateCohortFilter as updateCohortFilter$1, selectIndexedFilterByName, isUnion, isOperatorWithFieldAndArrayOfOperands, extractEnumFilterValue, removeCohortFilter as removeCohortFilter$1, trimFirstFieldNameToTitle, selectAllCohortFiltersCollapsed, Accessibility, toggleCohortBuilderAllFilters, setShouldShareFilters, useIsUserLoggedIn, GEN3_DOMAIN, useDataLibrary, DataLibraryStoreMode, buildListItemsGroupedByDataset, extractFileDatasetsInRecords, useGetMDSQuery, selectAuthzMappingData, useGetAggMDSQuery, useAskQuestionMutation, useGetIndexAggMDSQuery, useGetTagsQuery, setCohortFilter as setCohortFilter$1, clearCohortFilters as clearCohortFilters$1, handleOperation, selectAvailableCohorts, selectCurrentCohortId as selectCurrentCohortId$1, selectCohortFilters, selectCurrentCohortModified, selectCurrentCohortSaved, setCohortIndexFilters, setActiveCohort, setCohortFilterCombineMode, selectCohortFilterCombineMode, toggleCohortBuilderCategoryFilter, selectCohortFilterExpanded, selectCurrentCohortName as selectCurrentCohortName$1, useGeneralGQLQuery, selectIndexFilters, useGetRawDataAndTotalCountsQuery, isJSONValue, downloadFromGuppyToBlob, downloadJSONDataFromGuppy, useGetAggsQuery, useGetAggsNoFilterSelfQuery, isIntersection, useGetCountsQuery, setSharedFilters, usePrevious, selectHeadersWithCSRFToken, GEN3_GUPPY_API, useLaunchWorkspaceMutation, selectActiveWorkspaceStatus, isFetchBaseQueryError, setActiveWorkspace, getCurrentTimestamp, selectWorkspaceStatusFromService, selectActiveWorkspaceId, useGetWorkspaceOptionsQuery, GEN3_WORKSPACE_API, useGetExternalLoginsQuery, useSetCurrentPayModelMutation, PodStatus, PodConditionType, isWorkspaceRunningOrStopping, GEN3_API, GEN3_COMMONS_NAME, getTimestamp, createAppStore, getRemoteSupportServiceRegistry, isHttpStatusError, MissingServiceConfigurationError, useLazyGetAggsNoFilterSelfQuery, useCreateRequestMutation, buildGetAggregationQuery, processHistogramResponse, roundHistogramResponse, selectCSRFToken, useUserRequestQuery, getGen3AppId, createGen3AppWithOwnStore, createAppApiForRTKQ, useGetDictionaryQuery, useGetMetadataByIdQuery, createGen3App, CoreProvider, fetchJSONDataFromURL, HttpMethod, groupSharedFields, useGetCredentialsQuery, useRemoveCredentialMutation, useAddNewCredentialMutation, useGetProjectsDetailsQuery, useGetSubmissionsQuery, isCohortItem, isFileItem, fetchFencePresignedURL, HTTPError, getFederatedLoginStatus, queryMultipleMDSRecords, GEN3_MANIFEST_API, extractIndexFromDataLibraryCohort, isFilterSet, getNumberOfItemsInDatalist, isAdditionalDataItem, useLazyGetCrosswalkDataQuery } from '@gen3/core';
+import { LoadingOverlay, Card, Group, Avatar, Text, Checkbox, Stack, Center, Loader, Tooltip, UnstyledButton, ThemeIcon, Box, Select, Button, Divider, Textarea, FileButton, Anchor, Modal, Grid, Table, ColorSwatch, useMantineTheme, Accordion, Switch, SegmentedControl as SegmentedControl$1, ActionIcon, Badge, TextInput, NumberInput, RangeSlider, MultiSelect, Tabs, SimpleGrid, Highlight, MantineProvider, Flex, Menu, Alert, Drawer, CopyButton, factory, useProps, getStyleObject, Paper, useCombobox, Combobox, ScrollArea, Autocomplete, Title, Transition, rem, Stepper, Spoiler, Image as Image$1, NavLink, List, createTheme, Pagination, FileInput, CloseButton } from '@mantine/core';
 import { useDeepCompareEffect, useDeepCompareMemo, useDeepCompareCallback } from 'use-deep-compare';
 import { useRouter } from 'next/router';
 import { usePathname } from 'next/navigation';
-import { MdLogin, MdClose, MdExpandLess, MdExpandMore, MdSearch, MdFlip, MdAddCircle, MdRemoveCircle, MdLockOutline, MdLibraryAdd, MdAdd, MdKeyboardDoubleArrowLeft, MdUndo, MdInfo, MdOutlineArrowBack, MdOutlineArrowForward, MdKeyboardArrowDown, MdKeyboardArrowUp, MdDownload, MdGroup, MdOutlineBarChart, MdOutlineSearch, MdFormatQuote, MdDelete, MdOutlineRemoveCircle } from 'react-icons/md';
+import { MdLogin, MdClose, MdAddCircle, MdRemoveCircle, MdExpandLess, MdExpandMore, MdSearch, MdFlip, MdLockOutline, MdLibraryAdd, MdAdd, MdKeyboardDoubleArrowLeft, MdUndo, MdInfo, MdOutlineArrowBack, MdOutlineArrowForward, MdKeyboardArrowDown, MdKeyboardArrowUp, MdDownload, MdGroup, MdOutlineBarChart, MdOutlineSearch, MdFormatQuote, MdDelete, MdOutlineRemoveCircle } from 'react-icons/md';
 import { getCookie, deleteCookie, setCookie } from 'cookies-next';
 import useSWR from 'swr';
 import { errors, importSPKI, jwtVerify, decodeJwt } from 'jose';
@@ -25,10 +25,12 @@ import { defaultComposer } from 'default-composer';
 import { Icon, addCollection } from '@iconify-icon/react';
 import { init, getInstanceByDom, graphic } from 'echarts';
 import { VictoryChart, VictoryTheme, VictoryAxis, VictoryStack, VictoryBar, Bar, VictoryTooltip, VictoryContainer } from 'victory';
-import { FaUndo, FaPlus, FaExternalLinkAlt, FaExclamationTriangle, FaExclamation, FaQuestion, FaUser, FaExclamationCircle, FaRegStopCircle, FaChartPie, FaCircle, FaCheck, FaVideo, FaRegQuestionCircle, FaGraduationCap, FaRedo, FaUpload, FaDownload } from 'react-icons/fa';
 import tw from 'tailwind-styled-components';
+import { useForm, isEmail, isNotEmpty } from '@mantine/form';
 import { RiCloseCircleLine } from 'react-icons/ri';
+import { FaUndo, FaPlus, FaExternalLinkAlt, FaExclamationTriangle, FaExclamation, FaQuestion, FaUser, FaExclamationCircle, FaRegStopCircle, FaChartPie, FaCircle, FaCheck, FaVideo, FaRegQuestionCircle, FaGraduationCap, FaRedo, FaUpload, FaDownload } from 'react-icons/fa';
 import { PiCaretUpFill, PiCaretDownFill, PiCaretUpDownFill, PiDotsThreeCircleThin, PiTrash, PiSparkleFill, PiCaretCircleDownFill } from 'react-icons/pi';
+import { modals, ModalsProvider } from '@mantine/modals';
 import Image from 'next/image';
 import Link from 'next/link';
 import { AiOutlineLogin } from 'react-icons/ai';
@@ -44,7 +46,6 @@ import uniq from 'lodash/uniq';
 import sum from 'lodash/sum';
 import { LuCircleSlash, LuClock, LuLock, LuUnlock } from 'react-icons/lu';
 import 'universal-cookie';
-import { modals, ModalsProvider } from '@mantine/modals';
 import GraphiQL from 'graphiql';
 import { useRouter as useRouter$1 } from 'next/dist/client/router';
 import fs from 'fs';
@@ -55,7 +56,6 @@ import { combineReducers } from 'redux';
 import { createSlice, nanoid, createEntityAdapter, createAsyncThunk, createSelector } from '@reduxjs/toolkit';
 import { openDB } from 'idb';
 import createWebStorage from 'redux-persist/lib/storage/createWebStorage';
-import { useForm, isEmail, isNotEmpty } from '@mantine/form';
 import dynamic from 'next/dynamic';
 import YAML from 'yaml';
 import { filesize } from 'filesize';
@@ -1460,7 +1460,7 @@ function hashCode(str) {
                     dangerouslySetInnerHTML: {
                         __html: textString
                     },
-                    "aria-label": "HTML content" // Provide context for HTML rendered content
+                    "aria-label": "HTML content"
                 });
             }
         case "textArray":
@@ -1600,7 +1600,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
@@ -1936,8 +1936,7 @@ const saveToFile = (savingStr, filename = 'credentials.json')=>{
             children: [
                 credentials.api_key === '' && /*#__PURE__*/ jsx(LoadingOverlay, {
                     visible: true
-                }) // pragma: allowlist-secret;
-                ,
+                }),
                 /*#__PURE__*/ jsx("p", {
                     children: "This key is only shown once. Please copy or save it and store it in a safe place."
                 }),
@@ -2494,7 +2493,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 = useMemo(()=>{
+    const chartDefinition = useDeepCompareMemo(()=>{
         return {
             tooltip: {
                 trigger: 'item',
@@ -2536,12 +2535,17 @@ const HorizontalBarChart = ({ data, valueType, total, showLegendInChart = true }
             series: chartData
         };
     }, [
-        chartData
+        chartData,
+        showLegendInChart
     ]);
     return /*#__PURE__*/ jsx("div", {
         className: "w-full h-64",
         children: /*#__PURE__*/ jsx(ReactECharts, {
-            option: chartDefinition
+            option: chartDefinition,
+            settings: {
+                notMerge: true,
+                lazyUpdate: false
+            }
         })
     });
 };
@@ -2569,7 +2573,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);
 };
 
@@ -2587,6 +2595,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__*/ jsxs(Table.Tr, {
+            children: [
+                /*#__PURE__*/ jsxs(Table.Td, {
+                    children: [
+                        /*#__PURE__*/ jsx(ColorSwatch, {
+                            className: "inline-block mr-2 align-middle",
+                            size: "1em",
+                            radius: "xs",
+                            color: chartColors?.[elIndex % chartColors.length] || ''
+                        }),
+                        element.key
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Table.Td, {
+                    className: "text-right",
+                    children: element.count
+                })
+            ]
+        }, elIndex));
+};
+const LegendOverflow = ({ chart, data, chartTitle, counts })=>{
+    const [openedMoreRows, { open: openMoreRows, close: closeMoreRows }] = useDisclosure(false);
+    const theme = useMantineTheme();
+    return /*#__PURE__*/ jsxs(React__default.Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Modal, {
+                opened: openedMoreRows,
+                onClose: closeMoreRows,
+                title: chartTitle,
+                size: "xl",
+                children: /*#__PURE__*/ jsxs(Grid, {
+                    children: [
+                        /*#__PURE__*/ jsx(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__*/ jsx(Grid.Col, {
+                            span: 6,
+                            children: /*#__PURE__*/ jsx("div", {
+                                className: "border-solid border-[1px] border-[var(--mantine-color-gray-3)] h-full p-1",
+                                children: /*#__PURE__*/ jsx(Table, {
+                                    withRowBorders: false,
+                                    classNames: {
+                                        table: '',
+                                        td: 'p-1 leading-3'
+                                    },
+                                    children: /*#__PURE__*/ jsx(Table.Tbody, {
+                                        children: data.map((element, elIndex)=>/*#__PURE__*/ jsxs(Table.Tr, {
+                                                children: [
+                                                    /*#__PURE__*/ jsxs(Table.Td, {
+                                                        children: [
+                                                            /*#__PURE__*/ jsx(ColorSwatch, {
+                                                                className: "inline-block mr-2 align-middle",
+                                                                size: "1em",
+                                                                radius: "xs",
+                                                                color: chartColors?.[elIndex % chartColors.length] || ''
+                                                            }),
+                                                            element.key
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ jsx(Table.Td, {
+                                                        className: "text-right",
+                                                        children: element.count
+                                                    })
+                                                ]
+                                            }, elIndex))
+                                    })
+                                })
+                            })
+                        }, "modal-col-2")
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxs(Button, {
+                variant: "subtle",
+                onClick: openMoreRows,
+                leftSection: /*#__PURE__*/ jsx(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);
@@ -2597,109 +2705,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__*/ jsxs(Table.Tr, {
-                    children: [
-                        /*#__PURE__*/ jsxs(Table.Td, {
-                            children: [
-                                /*#__PURE__*/ jsx(ColorSwatch, {
-                                    className: "inline-block mr-2 align-middle",
-                                    size: "1em",
-                                    radius: "xs",
-                                    color: chartColors?.[elIndex % chartColors.length] || ''
-                                }),
-                                element.key
-                            ]
-                        }),
-                        /*#__PURE__*/ jsx(Table.Td, {
-                            className: "text-right",
-                            children: element.count
-                        })
-                    ]
-                }, elIndex));
-        };
-        const LegendOverflow = ({ chart, data, chartTitle })=>{
-            const [openedMoreRows, { open: openMoreRows, close: closeMoreRows }] = useDisclosure(false);
-            const theme = useMantineTheme();
-            return /*#__PURE__*/ jsxs(React__default.Fragment, {
-                children: [
-                    /*#__PURE__*/ jsx(Modal, {
-                        opened: openedMoreRows,
-                        onClose: closeMoreRows,
-                        title: chartTitle,
-                        size: "xl",
-                        children: /*#__PURE__*/ jsxs(Grid, {
-                            children: [
-                                /*#__PURE__*/ jsx(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__*/ jsx(Grid.Col, {
-                                    span: 6,
-                                    children: /*#__PURE__*/ jsx("div", {
-                                        className: "border-solid border-[1px] border-[var(--mantine-color-gray-3)] h-full p-1",
-                                        children: /*#__PURE__*/ jsx(Table, {
-                                            withRowBorders: false,
-                                            classNames: {
-                                                table: '',
-                                                td: 'p-1 leading-3'
-                                            },
-                                            children: /*#__PURE__*/ jsx(Table.Tbody, {
-                                                children: data.map((element, elIndex)=>/*#__PURE__*/ jsxs(Table.Tr, {
-                                                        children: [
-                                                            /*#__PURE__*/ jsxs(Table.Td, {
-                                                                children: [
-                                                                    /*#__PURE__*/ jsx(ColorSwatch, {
-                                                                        className: "inline-block mr-2 align-middle",
-                                                                        size: "1em",
-                                                                        radius: "xs",
-                                                                        color: chartColors?.[elIndex % chartColors.length] || ''
-                                                                    }),
-                                                                    element.key
-                                                                ]
-                                                            }),
-                                                            /*#__PURE__*/ jsx(Table.Td, {
-                                                                className: "text-right",
-                                                                children: element.count
-                                                            })
-                                                        ]
-                                                    }, elIndex))
-                                            })
-                                        })
-                                    })
-                                }, "modal-col-2")
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ jsxs(Button, {
-                        variant: "subtle",
-                        onClick: openMoreRows,
-                        leftSection: /*#__PURE__*/ jsx(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 ?? 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__*/ jsx(Grid.Col, {
             span: spans[indexNum],
             children: /*#__PURE__*/ jsxs(Card, {
@@ -2730,7 +2739,7 @@ const Charts = ({ charts, data, counts, isSuccess, numCols = DEFAULT_COLS, style
                         label: charts[field].label,
                         showLegendInChart: charts[field].showLegendInChart
                     }),
-                    showLegends && /*#__PURE__*/ jsx(Card.Section, {
+                    numberOfDataItems > 0 && showLegends && /*#__PURE__*/ jsx(Card.Section, {
                         inheritPadding: true,
                         py: "xs",
                         withBorder: style === 'box',
@@ -2768,7 +2777,8 @@ const Charts = ({ charts, data, counts, isSuccess, numCols = DEFAULT_COLS, style
                         children: /*#__PURE__*/ jsx(LegendOverflow, {
                             chart: charts[field],
                             data: data[field],
-                            chartTitle: chartTitle
+                            chartTitle: chartTitle,
+                            counts: counts ?? 0
                         })
                     })
                 ]
@@ -2781,7 +2791,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] = useState(config.showLegends?.enabled);
     if (!(config?.charts && Object.keys(config.charts).length > 0)) {
         return /*#__PURE__*/ jsx(Center, {
@@ -2833,7 +2843,7 @@ const CollapsableCharts = ({ config, data })=>{
                                 charts: config.charts,
                                 data: data,
                                 counts: 2,
-                                isSuccess: true,
+                                isSuccess: isSuccess,
                                 numCols: 4
                             })
                         })
@@ -3145,6 +3155,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]))
@@ -3323,6 +3335,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',
@@ -3397,6 +3425,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__*/ jsx(SegmentedControl$1, {
+        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__*/ jsx("div", {
+        className: `mt-3 flex flex-row justify-end ${remainingValues > 0 && 'border-t-2'} p-1.5`,
+        children: remainingValues > 0 && !isGroupExpanded ? /*#__PURE__*/ jsx("button", {
+            onClick: ()=>onShowChanged(!isGroupExpanded),
+            "data-testid": "plus-icon",
+            children: /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-row flex-nowrap items-center ",
+                children: [
+                    /*#__PURE__*/ jsx(MdAddCircle, {
+                        className: "text-accent",
+                        size: "1rem",
+                        "aria-hidden": "true"
+                    }, "show-more"),
+                    /*#__PURE__*/ jsxs(ExpanderLabel, {
+                        children: [
+                            remainingValues,
+                            " more"
+                        ]
+                    })
+                ]
+            })
+        }) : isGroupExpanded ? /*#__PURE__*/ jsx("button", {
+            onClick: ()=>onShowChanged(!isGroupExpanded),
+            "data-testid": "minus-icon",
+            children: /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-row flex-nowrap items-center",
+                children: [
+                    /*#__PURE__*/ jsx(MdRemoveCircle, {
+                        className: "text-accent",
+                        size: "1rem",
+                        onClick: ()=>onShowChanged(!isGroupExpanded),
+                        "aria-hidden": "true"
+                    }, "show-less"),
+                    /*#__PURE__*/ 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 = useRef(null);
+    const [sortingStatus, setSortingStatus] = useState('');
+    useEffect(()=>{
+        if (sortingStatus && liveRegionRef?.current) {
+            liveRegionRef.current.textContent = sortingStatus;
+        }
+    }, [
+        sortingStatus
+    ]);
+    const [NameSortIcon, nameIconSize] = sortType.type === 'alpha' ? sortType.direction === 'asc' ? [
+        PiCaretUpFill,
+        '0.75rem'
+    ] : [
+        PiCaretDownFill,
+        '0.75rem'
+    ] : [
+        PiCaretUpDownFill,
+        '1rem'
+    ];
+    const [ValueSortIcon, valueIconSize] = sortType.type === 'value' ? sortType.direction === 'asc' ? [
+        PiCaretUpFill,
+        '0.75rem'
+    ] : [
+        PiCaretDownFill,
+        '0.75rem'
+    ] : [
+        PiCaretUpDownFill,
+        '1rem'
+    ];
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-row items-center justify-between flex-wrap py-1 px-2 mb-1 border-b-2",
+        children: [
+            /*#__PURE__*/ jsx(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__*/ jsx(NameSortIcon, {
+                    size: nameIconSize,
+                    "aria-hidden": "true"
+                }),
+                "aria-label": "Sort name alphabetically",
+                children: "Name"
+            }),
+            /*#__PURE__*/ jsx(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__*/ jsx(ValueSortIcon, {
+                    size: valueIconSize,
+                    "aria-hidden": "true"
+                }),
+                "aria-label": `Sort ${valueLabel} numerically`,
+                children: valueLabel
+            }),
+            /*#__PURE__*/ jsx("span", {
+                id: `${field}-liveRegion`,
+                "aria-live": "polite",
+                ref: liveRegionRef,
+                className: "sr-only"
+            })
+        ]
+    });
+};
+
 const FacetIconButton = tw.button`
 text-base-max
 font-bold
@@ -3603,104 +3798,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 = useRef(null);
-    const [sortingStatus, setSortingStatus] = useState('');
-    useEffect(()=>{
-        if (sortingStatus && liveRegionRef?.current) {
-            liveRegionRef.current.textContent = sortingStatus;
-        }
-    }, [
-        sortingStatus
-    ]);
-    const [NameSortIcon, nameIconSize] = sortType.type === 'alpha' ? sortType.direction === 'asc' ? [
-        PiCaretUpFill,
-        '0.75rem'
-    ] : [
-        PiCaretDownFill,
-        '0.75rem'
-    ] : [
-        PiCaretUpDownFill,
-        '1rem'
-    ];
-    const [ValueSortIcon, valueIconSize] = sortType.type === 'value' ? sortType.direction === 'asc' ? [
-        PiCaretUpFill,
-        '0.75rem'
-    ] : [
-        PiCaretDownFill,
-        '0.75rem'
-    ] : [
-        PiCaretUpDownFill,
-        '1rem'
-    ];
-    return /*#__PURE__*/ jsxs("div", {
-        className: "flex flex-row items-center justify-between flex-wrap py-1 px-2 mb-1 border-b-2",
-        children: [
-            /*#__PURE__*/ jsx(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__*/ jsx(NameSortIcon, {
-                    size: nameIconSize,
-                    "aria-hidden": "true"
-                }),
-                "aria-label": "Sort name alphabetically",
-                children: "Name"
-            }),
-            /*#__PURE__*/ jsx(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__*/ jsx(ValueSortIcon, {
-                    size: valueIconSize,
-                    "aria-hidden": "true"
-                }),
-                "aria-label": `Sort ${valueLabel} numerically`,
-                children: valueLabel
-            }),
-            /*#__PURE__*/ 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] = useState(false);
     return /*#__PURE__*/ jsx(Tooltip, {
@@ -3731,63 +3828,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__*/ jsx("div", {
-        className: `mt-3 flex flex-row justify-end ${remainingValues > 0 && 'border-t-2'} p-1.5`,
-        children: remainingValues > 0 && !isGroupExpanded ? /*#__PURE__*/ jsx("button", {
-            onClick: ()=>onShowChanged(!isGroupExpanded),
-            "data-testid": "plus-icon",
-            children: /*#__PURE__*/ jsxs("div", {
-                className: "flex flex-row flex-nowrap items-center ",
-                children: [
-                    /*#__PURE__*/ jsx(MdAddCircle, {
-                        className: "text-accent",
-                        size: "1rem",
-                        "aria-hidden": "true"
-                    }, "show-more"),
-                    /*#__PURE__*/ jsxs(ExpanderLabel, {
-                        children: [
-                            remainingValues,
-                            " more"
-                        ]
-                    })
-                ]
-            })
-        }) : isGroupExpanded ? /*#__PURE__*/ jsx("button", {
-            onClick: ()=>onShowChanged(!isGroupExpanded),
-            "data-testid": "minus-icon",
-            children: /*#__PURE__*/ jsxs("div", {
-                className: "flex flex-row flex-nowrap items-center",
-                children: [
-                    /*#__PURE__*/ jsx(MdRemoveCircle, {
-                        className: "text-accent",
-                        size: "1rem",
-                        onClick: ()=>onShowChanged(!isGroupExpanded),
-                        "aria-hidden": "true"
-                    }, "show-less"),
-                    /*#__PURE__*/ 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] = useState(false);
     const cardRef = useRef(null);
     const searchInputRef = useRef(null);
@@ -3844,7 +3885,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);
         }
     };
@@ -3881,7 +3922,7 @@ const FacetEnumList = ({ field, facetName, hooks, valueLabel, isSettings = false
     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)=>{
@@ -3896,16 +3937,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,
@@ -3931,8 +3972,9 @@ const FacetEnumList = ({ field, facetName, hooks, valueLabel, isSettings = false
     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);
         }
@@ -3975,7 +4017,7 @@ const FacetEnumList = ({ field, facetName, hooks, valueLabel, isSettings = false
                         children: /*#__PURE__*/ jsxs("div", {
                             className: "flex items-center space-x-1 mt-1",
                             children: [
-                                /*#__PURE__*/ jsx(SegmentedControl, {
+                                /*#__PURE__*/ jsx(SegmentedControl$1, {
                                     classNames: {
                                         root: 'border-1 border-accent rounded-l-md rounded-r-md',
                                         control: 'p-0 m-0',
@@ -4145,7 +4187,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
@@ -4196,201 +4238,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] = useState(''); // Handle the state of the TextInput
-    const clearFilters = hooks.useClearFilter();
-    const updateFacetFilters = hooks.useUpdateFacetFilters();
-    const facetTitle = facetName ? facetName : trimFirstFieldNameToTitle(field, true);
-    const facetValue = hooks.useGetFacetFilters(field);
-    const textValues = 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__*/ jsx(ActionIcon, {
-            size: "xs",
-            color: "white",
-            radius: "xl",
-            variant: "transparent",
-            onClick: ()=>setValues(textValues.filter((i)=>i !== x)),
-            children: /*#__PURE__*/ jsx(MdClose, {
-                size: 10,
-                "aria-label": "remove value from filter"
-            })
-        });
-    };
-    return /*#__PURE__*/ 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__*/ jsx(FacetControlsHeader, {
-                field: field,
-                description: description,
-                hooks: hooks,
-                facetName: facetName,
-                dismissCallback: dismissCallback,
-                header: header
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                className: showFilters ? 'h-full' : 'h-0 invisible',
-                "aria-hidden": !showFilters,
-                children: [
-                    /*#__PURE__*/ jsxs("div", {
-                        className: "flex flex-nowrap items-center p-2",
-                        children: [
-                            /*#__PURE__*/ jsx(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__*/ jsx(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__*/ jsx(FaPlus, {})
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsx(Group, {
-                        gap: "xs",
-                        className: "px-2 py-2 max-h-96 overflow-y-auto",
-                        "data-testid": "values group",
-                        children: textValues.map((x)=>/*#__PURE__*/ jsx(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__default.useState({
-        from: minimum,
-        to: maximum
-    });
-    const clearRangeFilterFromCohort = hooks.useClearFilter();
-    useCallback(()=>{
-        setMinMaxValue({
-            from: minimum,
-            to: maximum
-        });
-        clearRangeFilterFromCohort(field);
-    }, [
-        clearRangeFilterFromCohort,
-        field,
-        maximum,
-        minimum
-    ]);
-    const updateRangeFilter = hooks.useUpdateFacetFilters();
-    const updateFilters = 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__default.useState({
+        from: minimum,
+        to: maximum
+    });
+    const clearRangeFilterFromCohort = hooks.useClearFilter();
+    useCallback(()=>{
+        setMinMaxValue({
+            from: minimum,
+            to: maximum
+        });
+        clearRangeFilterFromCohort(field);
+    }, [
+        clearRangeFilterFromCohort,
+        field,
+        maximum,
+        minimum
+    ]);
+    const updateRangeFilter = hooks.useUpdateFacetFilters();
+    const updateFilters = 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;
@@ -4471,7 +4375,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)=>{
@@ -4520,7 +4424,7 @@ const isFacetEmpty = (op)=>{
     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);
         }
@@ -4580,6 +4484,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] = useState(''); // Handle the state of the TextInput
+    const clearFilters = hooks.useClearFilter();
+    const updateFacetFilters = hooks.useUpdateFacetFilters();
+    const facetTitle = facetName ? facetName : trimFirstFieldNameToTitle(field, true);
+    const facetValue = hooks.useGetFacetFilters(field);
+    const textValues = 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__*/ jsx(ActionIcon, {
+            size: "xs",
+            color: "white",
+            radius: "xl",
+            variant: "transparent",
+            onClick: ()=>setValues(textValues.filter((i)=>i !== x)),
+            children: /*#__PURE__*/ jsx(MdClose, {
+                size: 10,
+                "aria-label": "remove value from filter"
+            })
+        });
+    };
+    return /*#__PURE__*/ 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__*/ jsx(FacetControlsHeader, {
+                field: field,
+                description: description,
+                hooks: hooks,
+                facetName: facetName,
+                dismissCallback: dismissCallback,
+                header: header
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: showFilters ? 'h-full' : 'h-0 invisible',
+                "aria-hidden": !showFilters,
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex flex-nowrap items-center p-2",
+                        children: [
+                            /*#__PURE__*/ jsx(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__*/ jsx(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__*/ jsx(FaPlus, {})
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(Group, {
+                        gap: "xs",
+                        className: "px-2 py-2 max-h-96 overflow-y-auto",
+                        "data-testid": "values group",
+                        children: textValues.map((x)=>/*#__PURE__*/ jsx(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__*/ jsx("div", {
+        children: {
+            enum: /*#__PURE__*/ 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__*/ 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__*/ jsx(ExactValueFacet, {
+                field: field,
+                facetName: facetLabel,
+                description: description,
+                hideIfEmpty: hideIfEmpty,
+                width: width,
+                hooks: dataFunctions,
+                sharedWithIndices: facetDefinition?.sharedWithIndices
+            }, `${idPrefix}-exact-${field}`),
+            multiselect: /*#__PURE__*/ 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__*/ 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: fieldNameToTitle,
+                idPrefix: 'filters-panel',
+                showPercent: false
+            });
+        })
+    });
+};
+
+const AccordionPanel = ({ index, filters, tabTitle, facetDefinitions, facetDataHooks, onAccessChange = (value)=>null, accessLevel = Accessibility.ALL, showAccessLevel = false })=>{
+    const coreDispatch = useCoreDispatch();
+    const sharedFilters = useCoreSelector((state)=>selectSharedFilters(state));
+    const theme = useMantineTheme();
+    const shareFilters = useCoreSelector((state)=>selectShouldShareFilters(state));
+    const allFiltersCollapsed = useCoreSelector((state)=>selectAllCohortFiltersCollapsed(state, index));
+    const toggleAllFiltersExpanded = (expand)=>{
+        coreDispatch(toggleCohortBuilderAllFilters({
+            expand,
+            index
+        }));
+    };
+    const handleSharedFiltersChange = (value)=>{
+        modals.openConfirmModal({
+            title: 'Confirm change of shared filters mode',
+            children: /*#__PURE__*/ jsx(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(setShouldShareFilters(value))
+        });
+    };
+    return /*#__PURE__*/ jsxs(Stack, {
+        align: "flex-start",
+        children: [
+            /*#__PURE__*/ jsxs(Group, {
+                justify: "space-between",
+                className: "w-full",
+                children: [
+                    /*#__PURE__*/ jsx(Text, {
+                        size: "xl",
+                        fw: 800,
+                        children: "Filters"
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        className: "text-primary text-sm font-normal",
+                        onClick: ()=>toggleAllFiltersExpanded(allFiltersCollapsed),
+                        children: allFiltersCollapsed ? 'Expand All' : 'Collapse All'
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(Stack, {
+                className: "bg-base-max py-4 px-2 h-full w-full",
+                children: [
+                    Object.keys(sharedFilters).length > 0 && /*#__PURE__*/ jsxs(Group, {
+                        gap: "xs",
+                        justify: "space-between",
+                        children: [
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "flex items-center space-x-1",
+                                children: [
+                                    /*#__PURE__*/ jsx(Icon, {
+                                        icon: "gen3:share",
+                                        height: 16,
+                                        width: 16,
+                                        color: theme.colors.accent[4]
+                                    }),
+                                    /*#__PURE__*/ jsx(Text, {
+                                        size: "sm",
+                                        children: "Set the shared filters for all"
+                                    }),
+                                    /*#__PURE__*/ jsx(Icon, {
+                                        icon: "gen3:info",
+                                        height: 12,
+                                        width: 12,
+                                        color: theme.colors.accent[4]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(Switch, {
+                                checked: shareFilters,
+                                onChange: (event)=>handleSharedFiltersChange(event.currentTarget.checked)
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(Accordion, {
+                        chevronPosition: "left",
+                        multiple: true,
+                        defaultValue: [
+                            filters?.tabs[0].title ?? 'Filters'
+                        ],
+                        children: filters.tabs.map((tab)=>{
+                            return /*#__PURE__*/ jsxs(Accordion.Item, {
+                                value: tab.title,
+                                children: [
+                                    /*#__PURE__*/ jsx(Accordion.Control, {
+                                        children: tab.title
+                                    }),
+                                    /*#__PURE__*/ jsx(Accordion.Panel, {
+                                        classNames: {
+                                            panel: 'p-0 m-0'
+                                        },
+                                        children: Object.keys(facetDefinitions).length > 0 ? /*#__PURE__*/ jsx(FiltersPanel, {
+                                            fields: tab.fields.reduce((acc, field)=>{
+                                                return [
+                                                    ...acc,
+                                                    facetDefinitions[field]
+                                                ];
+                                            }, []),
+                                            dataFunctions: facetDataHooks,
+                                            valueLabel: tabTitle
+                                        }) : null
+                                    })
+                                ]
+                            }, `${tab.title}`);
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+const AccessData = [
+    {
+        value: Accessibility.ALL,
+        label: 'All'
+    },
+    {
+        value: Accessibility.ACCESSIBLE,
+        label: 'Accessible'
+    },
+    {
+        value: Accessibility.UNACCESSIBLE,
+        label: 'Not Accessible'
+    }
+];
+const AccessLevelControl = ({ onChange, accessLevel })=>{
+    const theme = useMantineTheme();
+    return /*#__PURE__*/ jsx(SegmentedControl$1, {
+        color: theme.colors.accent[5],
+        data: AccessData,
+        value: accessLevel,
+        onChange: (val)=>{
+            const accessibilityValue = AccessData.find((item)=>item.value === val)?.value || Accessibility.ALL;
+            onChange(accessibilityValue);
+        }
+    });
+};
+
+const DropdownPanel = ({ index, filters, tabTitle, facetDefinitions, facetDataHooks, onAccessChange = (value)=>null, accessLevel = Accessibility.ALL, showAccessLevel = false })=>{
+    const [value, setValue] = useState('0');
+    const allFiltersCollapsed = useCoreSelector((state)=>selectAllCohortFiltersCollapsed(state, index));
+    const sharedFilters = useCoreSelector((state)=>selectSharedFilters(state));
+    const shareFilters = useCoreSelector((state)=>selectShouldShareFilters(state));
+    const theme = useMantineTheme();
+    const coreDispatch = useCoreDispatch();
+    const toggleAllFiltersExpanded = (expand)=>{
+        coreDispatch(toggleCohortBuilderAllFilters({
+            expand,
+            index
+        }));
+    };
+    const items = 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.openConfirmModal({
+            title: 'Confirm change of shared filters mode',
+            children: /*#__PURE__*/ jsx(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(setShouldShareFilters(value))
+        });
+    };
+    return /*#__PURE__*/ jsxs(Stack, {
+        align: "flex-start",
+        children: [
+            /*#__PURE__*/ jsxs(Group, {
+                justify: "space-between",
+                className: "w-full",
+                children: [
+                    /*#__PURE__*/ jsx(Text, {
+                        size: "xl",
+                        fw: 800,
+                        children: "Filters"
+                    }),
+                    /*#__PURE__*/ jsx("button", {
+                        className: "text-primary text-sm font-normal",
+                        onClick: ()=>toggleAllFiltersExpanded(allFiltersCollapsed),
+                        children: allFiltersCollapsed ? 'Expand All' : 'Collapse All'
+                    })
+                ]
+            }),
+            showAccessLevel ? /*#__PURE__*/ jsx(AccessLevelControl, {
+                onChange: onAccessChange,
+                accessLevel: accessLevel
+            }) : null,
+            /*#__PURE__*/ jsxs(Stack, {
+                className: "bg-base-max py-4 px-2 h-full w-full",
+                children: [
+                    Object.keys(sharedFilters).length > 0 && /*#__PURE__*/ jsxs(Group, {
+                        gap: "xs",
+                        justify: "space-between",
+                        children: [
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "flex items-center space-x-1",
+                                children: [
+                                    /*#__PURE__*/ jsx(Icon, {
+                                        icon: "gen3:share",
+                                        height: 16,
+                                        width: 16,
+                                        color: theme.colors.accent[4]
+                                    }),
+                                    /*#__PURE__*/ jsx(Text, {
+                                        size: "sm",
+                                        children: "Set the shared filters for all"
+                                    }),
+                                    /*#__PURE__*/ jsx(Tooltip, {
+                                        label: "If enabled any filter set on this tab will be applied to every tab where occurs.",
+                                        position: "top",
+                                        withArrow: true,
+                                        children: /*#__PURE__*/ jsx(Icon, {
+                                            icon: "gen3:info",
+                                            height: 12,
+                                            width: 12,
+                                            color: theme.colors.accent[4]
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(Switch, {
+                                checked: shareFilters,
+                                onChange: (event)=>handleSharedFiltersChange(event.currentTarget.checked)
+                            })
+                        ]
+                    }),
+                    filters.tabs.length > 1 && /*#__PURE__*/ jsx(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__*/ jsx(FiltersPanel, {
+                        fields: fields,
+                        dataFunctions: facetDataHooks,
+                        valueLabel: tabTitle
+                    }) : null
+                ]
+            })
+        ]
+    });
+};
+
+const VerticalTabbedPanel = ({ index, filters, tabTitle, facetDefinitions, facetDataHooks, onAccessChange = (value)=>null, accessLevel = Accessibility.ALL, showAccessLevel = false })=>{
+    return /*#__PURE__*/ jsx("div", {
+        children: /*#__PURE__*/ jsxs(Tabs, {
+            variant: "pills",
+            orientation: "vertical",
+            keepMounted: false,
+            defaultValue: filters?.tabs[0].title ?? 'Filters',
+            children: [
+                /*#__PURE__*/ jsx(Tabs.List, {
+                    children: filters.tabs.map((tab)=>{
+                        return /*#__PURE__*/ jsx(Tabs.Tab, {
+                            value: tab.title,
+                            children: tab.title
+                        }, `${tab.title}-tab`);
+                    })
+                }),
+                filters.tabs.map((tab)=>{
+                    return /*#__PURE__*/ jsx(Tabs.Panel, {
+                        value: tab.title,
+                        className: "w-1/4",
+                        children: Object.keys(facetDefinitions).length > 0 ? /*#__PURE__*/ 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__*/ jsx("div", {
+        children: Object.keys(facetDefinitions).length > 0 ? /*#__PURE__*/ 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__*/ jsx(VerticalTabbedPanel, {
+        index: index,
+        filters: filters,
+        tabTitle: tabTitle,
+        facetDefinitions: facetDefinitions,
+        facetDataHooks: facetDataHooks
+    }) : /*#__PURE__*/ 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
@@ -4601,58 +5055,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__*/ jsx("div", {
-        children: {
-            enum: /*#__PURE__*/ 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__*/ 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__*/ jsx(ExactValueFacet, {
-                field: field,
-                facetName: facetLabel,
-                description: description,
-                hideIfEmpty: hideIfEmpty,
-                width: width,
-                hooks: dataFunctions,
-                sharedWithIndices: facetDefinition?.sharedWithIndices
-            }, `${idPrefix}-exact-${field}`),
-            multiselect: /*#__PURE__*/ 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({
@@ -7147,6 +7549,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,
@@ -7179,6 +7595,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 = useMantineReactTable({
         columns: cols,
         data: data ?? [],
@@ -7189,7 +7612,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,
@@ -7489,7 +7912,7 @@ const AdvancedSearch = ({ advSearchFilters, setAdvancedSearchFilters })=>{
                 /*#__PURE__*/ jsxs("div", {
                     className: "flex flex-row justify-between items-center",
                     children: [
-                        /*#__PURE__*/ jsx(SegmentedControl, {
+                        /*#__PURE__*/ jsx(SegmentedControl$1, {
                             data: [
                                 {
                                     label: 'AND',
@@ -8417,6 +8840,7 @@ const useSearchMetadata = ({ discoveryConfig, searchTerms, mdsData, isSuccess })
             uidField
         ],
         idField: uidField,
+        tokenize: (string, _fieldName)=>string.split(' '),
         extractField: extractValue,
         //  processTerm: (term) => suffixes(term, 3),
         searchOptions: {
@@ -9320,7 +9744,8 @@ registerDefaultDiscoveryDataLoaders();
                         }) : null,
                         discoveryConfig.features?.chartsSection?.enabled && /*#__PURE__*/ jsx(CollapsableCharts, {
                             config: discoveryConfig.features?.chartsSection,
-                            data: chartData
+                            data: chartData,
+                            isSuccess: dataRequestStatus.isSuccess
                         }),
                         /*#__PURE__*/ jsxs("div", {
                             className: "flex items-center p-2 mb-4 bg-base-max rounded-lg",
@@ -9750,6 +10175,23 @@ const RenderParagraphsCell = ({ value })=>{
             }, i))
     });
 };
+const RenderIfArrayHasData = ({ value })=>{
+    const content = value;
+    if (isArray(content) && content.length > 0) {
+        return /*#__PURE__*/ jsx(Icon, {
+            icon: "gen3:checked-filled",
+            height: 22,
+            width: 22,
+            className: "text-utility-success"
+        });
+    }
+    return /*#__PURE__*/ jsx(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 })=>{
@@ -9780,6 +10222,7 @@ const DiscoveryRenderTagsCell = ({ value })=>{
 const Gen3DiscoveryStandardCellRenderers = {
     array: {
         NegativePositive: RenderArrayCellNegativePositive$1,
+        HasData: RenderIfArrayHasData,
         default: RenderArrayCell$1
     },
     string: {
@@ -12144,237 +12587,64 @@ const DownloadsPanel = ({ dropdowns, buttons, loginForDownload, index, totalCoun
                                 title: `${button.title} (Login Required)`,
                                 enabled: false
                             }))
-                    }
-                };
-            }, {});
-        }
-        return dropdownsToRender;
-    }, [
-        dropdowns,
-        loginRequired,
-        isUserLoggedIn
-    ]);
-    return dropdowns || buttons ? /*#__PURE__*/ jsxs("div", {
-        className: "flex space-x-1",
-        children: [
-            Object.values(dropdownsToRender).map((dropdown)=>{
-                return createDownloadMenuButton(dropdown, {
-                    type: index,
-                    totalCount,
-                    fields,
-                    filter,
-                    accessibility: accessibility ?? 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__*/ 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 ?? Accessibility.ALL
-                    }
-                }, button.title);
-            })
-        ]
-    }) : /*#__PURE__*/ jsx(React__default.Fragment, {});
-};
-
-const FiltersPanel = ({ fields, dataFunctions, valueLabel })=>{
-    return /*#__PURE__*/ 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: fieldNameToTitle,
-                idPrefix: 'filters-panel',
-                showPercent: false
-            });
-        })
-    });
-};
-
-const AccessData = [
-    {
-        value: Accessibility.ALL,
-        label: 'All'
-    },
-    {
-        value: Accessibility.ACCESSIBLE,
-        label: 'Accessible'
-    },
-    {
-        value: Accessibility.UNACCESSIBLE,
-        label: 'Not Accessible'
-    }
-];
-const AccessLevelControl = ({ onChange, accessLevel })=>{
-    const theme = useMantineTheme();
-    return /*#__PURE__*/ jsx(SegmentedControl, {
-        color: theme.colors.accent[5],
-        data: AccessData,
-        value: accessLevel,
-        onChange: (val)=>{
-            const accessibilityValue = AccessData.find((item)=>item.value === val)?.value || Accessibility.ALL;
-            onChange(accessibilityValue);
-        }
-    });
-};
-
-const DropdownPanel = ({ index, filters, tabTitle, facetDefinitions, facetDataHooks, onAccessChange = (value)=>null, accessLevel = Accessibility.ALL, showAccessLevel = false })=>{
-    const [value, setValue] = useState('0');
-    const allFiltersCollapsed = useCoreSelector((state)=>selectAllCohortFiltersCollapsed(state, index));
-    const sharedFilters = useCoreSelector((state)=>selectSharedFilters(state));
-    const shareFilters = useCoreSelector((state)=>selectShouldShareFilters(state));
-    const theme = useMantineTheme();
-    const coreDispatch = useCoreDispatch();
-    const toggleAllFiltersExpanded = (expand)=>{
-        coreDispatch(toggleCohortBuilderAllFilters({
-            expand,
-            index
-        }));
-    };
-    const items = 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.openConfirmModal({
-            title: 'Confirm change of shared filters mode',
-            children: /*#__PURE__*/ jsx(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(setShouldShareFilters(value))
-        });
-    };
-    return /*#__PURE__*/ jsxs(Stack, {
-        align: "flex-start",
+                    }
+                };
+            }, {});
+        }
+        return dropdownsToRender;
+    }, [
+        dropdowns,
+        loginRequired,
+        isUserLoggedIn
+    ]);
+    return dropdowns || buttons ? /*#__PURE__*/ jsxs("div", {
+        className: "flex space-x-1",
         children: [
-            /*#__PURE__*/ jsxs(Group, {
-                justify: "space-between",
-                className: "w-full",
-                children: [
-                    /*#__PURE__*/ jsx(Text, {
-                        size: "xl",
-                        fw: 800,
-                        children: "Filters"
-                    }),
-                    /*#__PURE__*/ 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 ?? Accessibility.ALL
+                });
             }),
-            showAccessLevel ? /*#__PURE__*/ jsx(AccessLevelControl, {
-                onChange: onAccessChange,
-                accessLevel: accessLevel
-            }) : null,
-            /*#__PURE__*/ jsxs(Stack, {
-                className: "bg-base-max py-4 px-2 h-full w-full",
-                children: [
-                    Object.keys(sharedFilters).length > 0 && /*#__PURE__*/ jsxs(Group, {
-                        gap: "xs",
-                        justify: "space-between",
-                        children: [
-                            /*#__PURE__*/ jsxs("div", {
-                                className: "flex items-center space-x-1",
-                                children: [
-                                    /*#__PURE__*/ jsx(Icon, {
-                                        icon: "gen3:share",
-                                        height: 16,
-                                        width: 16,
-                                        color: theme.colors.accent[4]
-                                    }),
-                                    /*#__PURE__*/ jsx(Text, {
-                                        size: "sm",
-                                        children: "Set the shared filters for all"
-                                    }),
-                                    /*#__PURE__*/ jsx(Tooltip, {
-                                        label: "If enabled any filter set on this tab will be applied to every tab where occurs.",
-                                        position: "top",
-                                        withArrow: true,
-                                        children: /*#__PURE__*/ jsx(Icon, {
-                                            icon: "gen3:info",
-                                            height: 12,
-                                            width: 12,
-                                            color: theme.colors.accent[4]
-                                        })
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ jsx(Switch, {
-                                checked: shareFilters,
-                                onChange: (event)=>handleSharedFiltersChange(event.currentTarget.checked)
-                            })
-                        ]
-                    }),
-                    filters.tabs.length > 1 && /*#__PURE__*/ jsx(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__*/ 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__*/ 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 ?? Accessibility.ALL
+                    }
+                }, button.title);
             })
         ]
-    });
+    }) : /*#__PURE__*/ jsx(React__default.Fragment, {});
 };
 
 const EmptyData = {};
@@ -12402,10 +12672,22 @@ const EmptyData = {};
     const isXl = useMediaQuery('(min-width: 1600px)');
     const [accessLevel, setAccessLevel] = useState(Accessibility.ALL);
     const sharedFiltersMap = useCoreSelector((state)=>selectSharedFilters(state));
-    let numCols = 3;
-    if (isSm) numCols = 1;
-    if (isMd) numCols = 2;
-    if (isXl) numCols = 4;
+    const defaultDropdowns = useMemo(()=>dropdowns ?? {}, [
+        dropdowns
+    ]);
+    const defaultButtons = useMemo(()=>buttons ?? [], [
+        buttons
+    ]);
+    const numCols = useMemo(()=>{
+        if (isSm) return 1;
+        if (isMd) return 2;
+        if (isXl) return 4;
+        return 3;
+    }, [
+        isSm,
+        isMd,
+        isXl
+    ]);
     const index = guppyConfig.dataType;
     const fields = useMemo(()=>getAllFieldsFromFilterConfigs(filters?.tabs ?? []), [
         filters?.tabs
@@ -12419,14 +12701,20 @@ const EmptyData = {};
         filters: cohortFilters,
         accessibility: accessLevel
     });
-    const { data: chartData, isSuccess: isChartSuccess, isFetching: isChartFetching, isError: isChartError } = useGetAggsNoFilterSelfQuery({
-        type: index,
-        fields: [
+    const chartKeys = useDeepCompareMemo(()=>[
             ...Object.keys(chartsSection?.charts ?? {}),
             ...Object.keys(charts)
-        ],
+        ], [
+        chartsSection?.charts,
+        charts
+    ]);
+    const { data: chartData, isSuccess: isChartSuccess, isFetching: isChartFetching, isError: isChartError } = useGetAggsNoFilterSelfQuery({
+        type: index,
+        fields: chartKeys,
         filters: cohortFilters,
         accessibility: accessLevel
+    }, {
+        skip: chartKeys.length === 0
     });
     const getEnumFacetData = useDeepCompareCallback((field)=>{
         let filters = undefined;
@@ -12449,7 +12737,7 @@ const EmptyData = {};
             isSuccess: isSuccess
         };
     }, [
-        cohortFilters,
+        cohortFilters.root,
         data,
         isSuccess
     ]);
@@ -12598,8 +12886,8 @@ const EmptyData = {};
                                 className: "flex justify-between mb-2 ml-2",
                                 children: [
                                     /*#__PURE__*/ jsx(DownloadsPanel, {
-                                        dropdowns: dropdowns ?? {},
-                                        buttons: buttons ?? [],
+                                        dropdowns: defaultDropdowns,
+                                        buttons: defaultButtons,
                                         loginForDownload: loginForDownload,
                                         index: index,
                                         totalCount: counts ?? 0,
@@ -12618,7 +12906,8 @@ const EmptyData = {};
                                     ...chartsSection,
                                     charts: summaryCharts
                                 },
-                                data: chartData ?? EmptyData
+                                data: chartData ?? EmptyData,
+                                isSuccess: isChartSuccess
                             }) : /*#__PURE__*/ jsx(Charts, {
                                 charts: summaryCharts,
                                 data: chartData ?? EmptyData,
@@ -12672,6 +12961,9 @@ const TabsLayoutToComponentProp = (tabsLayout)=>{
 const CohortBuilder = ({ explorerConfig, sharedFiltersMap = null, tabsLayout = 'left' })=>{
     const dispatch = useCoreDispatch();
     dispatch(setSharedFilters(sharedFiltersMap ?? {}));
+    const configuration = useDeepCompareMemo(()=>explorerConfig, [
+        explorerConfig
+    ]);
     return /*#__PURE__*/ jsx("div", {
         className: "w-full",
         children: /*#__PURE__*/ jsxs(Tabs, {
@@ -12682,17 +12974,24 @@ const CohortBuilder = ({ explorerConfig, sharedFiltersMap = null, tabsLayout = '
                 /*#__PURE__*/ jsx(Tabs.List, {
                     className: "w-full",
                     justify: TabsLayoutToComponentProp(tabsLayout),
-                    children: explorerConfig.map((panelConfig)=>/*#__PURE__*/ jsx(Tabs.Tab, {
+                    children: configuration.map((panelConfig)=>/*#__PURE__*/ jsx(Tabs.Tab, {
                             value: panelConfig.tabTitle,
                             children: panelConfig.tabTitle
                         }, `${panelConfig.tabTitle}-tabList`))
                 }),
-                explorerConfig.map((panelConfig)=>/*#__PURE__*/ jsx(Tabs.Panel, {
+                configuration.map((panelConfig)=>/*#__PURE__*/ jsx(Tabs.Panel, {
                         value: panelConfig.tabTitle,
-                        children: /*#__PURE__*/ createElement(CohortPanel, {
-                            ...panelConfig,
-                            key: `${panelConfig.tabTitle}-CohortPanel`
-                        })
+                        children: /*#__PURE__*/ 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`))
             ]
         })
@@ -12812,6 +13111,18 @@ const TabbedCohortBuilder = ({ index, tabsConfiguration })=>{
         cohortFilters.root,
         isSuccess
     ]);
+    const EnumHookInstances = {
+        useGetFacetData: getEnumFacetData,
+        useUpdateFacetFilters: partial(useUpdateFilters$1, index),
+        useGetFacetFilters: partial(useGetFacetFilters$1, index),
+        useClearFilter: partial(useClearFilters$1, index),
+        useFilterExpanded: partial(useFilterExpandedState$1, index),
+        useToggleExpandFilter: partial(useToggleExpandFilter$1, index),
+        useGetCombineMode: partial(useCohortFilterCombineState, index),
+        useSetCombineMode: partial(useSetCohortFilterCombineState, index),
+        useFieldNameToTitle: useFieldNameToTitle,
+        useTotalCounts: undefined
+    };
     const RangeHookInstances = {
         useGetFacetData: getRangeFacetData,
         useUpdateFacetFilters: partial(useUpdateFilters$1, index),
@@ -12826,38 +13137,9 @@ const TabbedCohortBuilder = ({ index, tabsConfiguration })=>{
     const facetDataHooks = useDeepCompareMemo(()=>{
         return {
             // TODO: see if there a better way to do this
-            enum: {
-                useGetFacetData: getEnumFacetData,
-                useUpdateFacetFilters: partial(useUpdateFilters$1, index),
-                useGetFacetFilters: partial(useGetFacetFilters$1, index),
-                useClearFilter: partial(useClearFilters$1, index),
-                useFilterExpanded: partial(useFilterExpandedState$1, index),
-                useToggleExpandFilter: partial(useToggleExpandFilter$1, index),
-                useGetCombineMode: partial(useCohortFilterCombineState, index),
-                useSetCombineMode: partial(useSetCohortFilterCombineState, index),
-                useFieldNameToTitle: useFieldNameToTitle,
-                useTotalCounts: undefined
-            },
-            exact: {
-                useGetFacetData: getEnumFacetData,
-                useUpdateFacetFilters: partial(useUpdateFilters$1, index),
-                useGetFacetFilters: partial(useGetFacetFilters$1, index),
-                useClearFilter: partial(useClearFilters$1, index),
-                useFilterExpanded: partial(useFilterExpandedState$1, index),
-                useToggleExpandFilter: partial(useToggleExpandFilter$1, index),
-                useFieldNameToTitle: useFieldNameToTitle,
-                useTotalCounts: undefined
-            },
-            multiselect: {
-                useGetFacetData: getEnumFacetData,
-                useUpdateFacetFilters: partial(useUpdateFilters$1, index),
-                useGetFacetFilters: partial(useGetFacetFilters$1, index),
-                useClearFilter: partial(useClearFilters$1, index),
-                useFilterExpanded: partial(useFilterExpandedState$1, index),
-                useToggleExpandFilter: partial(useToggleExpandFilter$1, index),
-                useFieldNameToTitle: useFieldNameToTitle,
-                useTotalCounts: undefined
-            },
+            enum: EnumHookInstances,
+            exact: EnumHookInstances,
+            multiselect: EnumHookInstances,
             range: RangeHookInstances,
             age: RangeHookInstances,
             year: RangeHookInstances,
@@ -12865,7 +13147,8 @@ const TabbedCohortBuilder = ({ index, tabsConfiguration })=>{
             days: RangeHookInstances,
             percent: RangeHookInstances,
             datetime: RangeHookInstances,
-            toggle: RangeHookInstances
+            toggle: RangeHookInstances,
+            upload: EnumHookInstances
         };
     }, [
         getEnumFacetData,
@@ -13823,47 +14106,25 @@ const Workspace = ({ config })=>{
 };
 
 const TextDescription = ({ description })=>{
-    const [extend, setExtend] = useState(false);
-    const textRef = useRef(null);
-    const [isClamped, setClamped] = useState(false);
-    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__*/ jsxs(Fragment, {
-        children: [
-            !extend ? /*#__PURE__*/ jsx(Text, {
-                ref: textRef,
-                size: "sm",
-                lineClamp: 4,
-                children: description
-            }) : /*#__PURE__*/ jsx(Text, {
-                size: "sm",
-                children: description
-            }),
-            isClamped && /*#__PURE__*/ jsx("button", {
-                onClick: ()=>setExtend((extend)=>!extend),
-                children: /*#__PURE__*/ jsxs("div", {
-                    className: "flex text-xs font-semibold text-base-contrast-light",
-                    children: [
-                        !extend ? 'Extend Text' : 'Collapse Text',
-                        ' ',
-                        /*#__PURE__*/ jsx("div", {
-                            className: "my-auto",
-                            children: !extend ? /*#__PURE__*/ jsx(MdKeyboardArrowDown, {}) : /*#__PURE__*/ jsx(MdKeyboardArrowUp, {})
-                        })
-                    ]
+    return /*#__PURE__*/ jsx(Spoiler, {
+        maxHeight: 80,
+        showLabel: /*#__PURE__*/ jsxs("span", {
+            children: [
+                "Extend Text ",
+                /*#__PURE__*/ jsx(MdKeyboardArrowDown, {
+                    className: "inline"
                 })
-            })
-        ]
+            ]
+        }),
+        hideLabel: /*#__PURE__*/ jsxs("span", {
+            children: [
+                "Collapse Text ",
+                /*#__PURE__*/ jsx(MdKeyboardArrowUp, {
+                    className: "inline"
+                })
+            ]
+        }),
+        children: description
     });
 };
 
@@ -13871,20 +14132,22 @@ const AnalysisCard = ({ title, description, type, icon, image, hasDemo, loginReq
     return /*#__PURE__*/ jsxs(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__*/ jsxs("div", {
-                className: "h-full",
+                className: "relative",
                 children: [
                     /*#__PURE__*/ jsx("div", {
-                        className: "p-0 rounded-sm h-1/2 h-max-1/2",
-                        children: /*#__PURE__*/ jsx(Image$1, {
-                            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__*/ jsx("div", {
+                            children: /*#__PURE__*/ jsx(Image$1, {
+                                component: Image,
+                                src: `${image}`,
+                                alt: "",
+                                radius: "md",
+                                width: 500,
+                                height: 500
+                            })
                         })
                     }),
                     /*#__PURE__*/ jsxs("div", {
@@ -13895,7 +14158,7 @@ const AnalysisCard = ({ title, description, type, icon, image, hasDemo, loginReq
                                 children: /*#__PURE__*/ jsx(Image$1, {
                                     component: Image,
                                     src: `${icon}`,
-                                    alt: `${title} logo`,
+                                    alt: "",
                                     width: 40,
                                     height: 40,
                                     radius: "lg"
@@ -16939,7 +17202,7 @@ const registerCohortDiscoveryApp = ()=>createGen3AppWithOwnStore({
         App: CohortDiscovery,
         id: AppId$1,
         name: _APP_NAME$2,
-        version: 'v1.0.0',
+        version: _APP_VERSION$1,
         requiredEntityTypes: [],
         store: AppStore,
         context: AppContext
@@ -17350,7 +17613,7 @@ const ComparisonCard = ({ config, groundData, groundLabel, comparisonData, compa
                             fw: 600,
                             children: fieldNameToTitle(field)
                         }),
-                        /*#__PURE__*/ jsx(SegmentedControl, {
+                        /*#__PURE__*/ jsx(SegmentedControl$1, {
                             value: viewType,
                             onChange: setViewType,
                             data: [
@@ -19131,6 +19394,98 @@ const registerMetadataSchemaApp = ()=>createGen3App({
         requiredEntityTypes: []
     });
 
+const ADDITIONAL_DOWNLOAD_MESSAGE = 'A previous download is being processed. Additional downloads may be started.';
+const DropdownWithIcon = ({ disableTargetWidth, LeftSection, RightSection = /*#__PURE__*/ jsx("div", {
+    className: "border-l pl-1 -mr-2",
+    children: /*#__PURE__*/ jsx(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 = useRef(null);
+    return /*#__PURE__*/ jsxs(Menu, {
+        width: !disableTargetWidth ? 'target' : null,
+        ...customPosition && {
+            position: customPosition
+        },
+        zIndex: zIndex,
+        closeOnItemClick: closeOnItemClick,
+        children: [
+            /*#__PURE__*/ jsx(Menu.Target, {
+                children: /*#__PURE__*/ jsx(Tooltip, {
+                    label: targetButtonTooltip,
+                    disabled: !targetButtonTooltip,
+                    children: /*#__PURE__*/ jsx(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__*/ jsxs(Menu.Dropdown, {
+                "data-testid": "dropdown-menu-options",
+                className: "border-1 border-secondary",
+                children: [
+                    menuLabelText && /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(Menu.Label, {
+                                className: menuLabelCustomClass ?? 'font-bold',
+                                "data-testid": "menu-label",
+                                children: menuLabelText
+                            }),
+                            /*#__PURE__*/ jsx(Menu.Divider, {})
+                        ]
+                    }),
+                    dropdownElements.map(({ title, onClick, icon, disabled, isLoading, loadingTooltip }, idx)=>{
+                        const menuItem = /*#__PURE__*/ jsx(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__*/ jsx(Tooltip, {
+                                label: loadingTooltip || ADDITIONAL_DOWNLOAD_MESSAGE,
+                                position: "right",
+                                withArrow: true,
+                                multiline: true,
+                                w: 400,
+                                children: /*#__PURE__*/ jsx("div", {
+                                    children: menuItem
+                                })
+                            }, `${title}-${idx}`);
+                        }
+                        return menuItem;
+                    })
+                ]
+            })
+        ]
+    });
+};
+
 const ActionButton = ({ title, enabled, type, leftIcon, rightIcon, tooltipText })=>{
     return /*#__PURE__*/ jsx(Tooltip, {
         label: tooltipText,
@@ -25590,5 +25945,5 @@ const staticNotebookAPI = async (req, res)=>{
     });
 };
 
-export { AISearchPageGetServerSideProps, AccessLevel, ActionBar, ActionButton, AdminAuthZPageGetServerSideProps, AiSearch, AISearchPage as AiSearchPage, AnalysisCenter, AnalysisCenterWithSections, AnalysisEditorPage, AnalysisEditorPageGetServerSideProps, AnalysisPage, AnalysisPageGetServerSideProps, AuthzPage, BAD_DATA_MESSAGE, Banner, BaseModal, Charts, CohortBuilder, CohortManager$1 as CohortManager, CollapsableCharts, CollapsableSidebar, ColorThemePage, ColorThemePageGetServerSideProps, ContentSource$1 as ContentSource, CreateCredentialsAPIKeyModal, CrosswalkPage, CrosswalkPageGetServerSideProps, Custom404Page, DAYS_IN_YEAR, DEFAULT_MAXIMUM, DEFAULT_MINIMUM, DEFAULT_VISIBLE_ITEMS$1 as DEFAULT_VISIBLE_ITEMS, DataLibraryPage, DataLibraryPageGetServerSideProps, DictionaryPage, DictionaryPageGetServerSideProps, DiscoveryCellRendererFactory, DiscoveryProvider as DiscoveryConfigProvider, DiscoveryIndexPanel, DiscoveryPage, DiscoveryPageGetServerSideProps, DiscoveryRowRendererFactory, DropdownButton, EnumFacet, EnumFacetChart, ErrorCard, ExactValueFacet, ExplorerPage, ExplorerPageGetServerSideProps, ExplorerPageGetServerSidePropsForConfigId, ExplorerTableCellRendererFactory, ExplorerTableDetailsPanelFactory, FacetControlsHeader, FacetExpander, FacetSelector, FacetSortPanel, FacetTabs, FirstTimeModal, Footer, Gen3Button, Gen3ButtonReverse, Gen3Link, Gen3ModalsProvider, Gen3Provider, GqlQueryEditor$1 as GqlQueryEditor, Header$1 as Header, HoverLink, LandingPage, LandingPageGetServerSideProps, LoginButton$1 as LoginButton, LoginPage, LoginPageGetServerSideProps, LoginPanel, LoginProvidersPanel, MinutesToMilliseconds, MultiSelectValueFacet, NavPageLayout, NavigationBar, NavigationButton, NoAccessModal, NotebookLitePage, NotebookLitePageGetStaticProps, ProfilePage, ProfilePageGetServerSideProps, ProfileProvider, ProtectedContent, QueryExpression, QueryExpressionContext, QueryExpressionSection, QueryPage, QueryPageGetServerSideProps, RangeFacet, ReactECharts, ResourcesFilters, SPECIAL_CASE_FIELDS, SessionExpiredModal, SinglePageStudyDetailsPanel, StaticNotebookIFrame, StaticNotebookViewer, StudyDetailsPanel, StudyGroup, StudyGroupPanel, StudyProvider, SubmissionPage, SubmissionPageGetServerSideProps, TabbedCohortBuilder, TabbedCohortBuilderPage, TabbedCohortBuilderPageGetServerSideProps, TagCloud, TailwindConfig, TopBar, UploadJSONButton, User, Workspace, WorkspaceNoAccessPage, WorkspaceNoAccessPageServerSideProps, WorkspacePage, WorkspacePageGetServerSideProps, accessibleFieldName, addIntersectionToIncludes, addUnion, analysisApiCohortDiscovery, buildNested, capitalize, classifyFacets, compareKeysAscending, compareKeysDescending, computeRowSpan, convertMinutesToMilliseconds, convertPathsToTree, convertSecondsToMilliseconds, convertToStringArray, create10ColorAccessibleContrast, create10ColorPallet, createMantineTheme, credentialsLogin, credentialsLogout, extractObjectKey, extractRangeValues, focusStyles, getAllFieldsFromFilterConfigs, getCurrentUnixTimestamp, getNavPageLayoutPropsFromConfig, getParamsValueAsString, getTagInfo, hasOwnProperty, isArrayOfString, isEnumFacetResponse, isHeaderMetadata, isPropertyKey, isTextTransform$1 as isTextTransform, mapFacetSortToSortType, processBucketData, processLabel$1 as processLabel, processRangeData, processRangeKeyLabel, registerCohortBuilderDefaultPreviewRenderers, registerCohortDiscoveryApp, registerCohortSimilarityApp, registerDefaultDiscoveryDataLoaders, registerDiscoveryDefaultCellRenderers, registerDiscoveryDefaultStudyPreviewRenderers, registerExplorerDefaultCellRenderers, registerMetadataSchemaApp, removeIntersectionFromEnum, removeKey$1 as removeKey, removeUnion, resourcePathFromProjectID, sessionLogout, sessionToken, staticNotebookAPI, stripTrailingSlash, toCountsString, toDisplayName, truncateString, unixTimeToString, updateFacetEnum, useClearFilters$1 as useClearFilters, useDiscoveryContext, useExtractEnumFilterValues, useExtractRangeFilterValues, useFieldNameToTitle, useGetFacetFilters$1 as useGetFacetFilters, useUpdateFilters$1 as useUpdateFilters, userHasMethodForServiceOnResource$1 as userHasMethodForServiceOnResource };
+export { AISearchPageGetServerSideProps, AccessLevel, AccordionPanel, ActionBar, ActionButton, AdminAuthZPageGetServerSideProps, AiSearch, AISearchPage as AiSearchPage, AnalysisCenter, AnalysisCenterWithSections, AnalysisEditorPage, AnalysisEditorPageGetServerSideProps, AnalysisPage, AnalysisPageGetServerSideProps, AuthzPage, BAD_DATA_MESSAGE, Banner, BaseModal, Charts, CohortBuilder, CohortManager$1 as CohortManager, CollapsableCharts, CollapsableSidebar, ColorThemePage, ColorThemePageGetServerSideProps, ContentSource$1 as ContentSource, CreateCredentialsAPIKeyModal, CrosswalkPage, CrosswalkPageGetServerSideProps, Custom404Page, DAYS_IN_YEAR, DEFAULT_MAXIMUM, DEFAULT_MINIMUM, DEFAULT_VISIBLE_ITEMS$1 as DEFAULT_VISIBLE_ITEMS, DataLibraryPage, DataLibraryPageGetServerSideProps, DictionaryPage, DictionaryPageGetServerSideProps, DiscoveryCellRendererFactory, DiscoveryProvider as DiscoveryConfigProvider, DiscoveryIndexPanel, DiscoveryPage, DiscoveryPageGetServerSideProps, DiscoveryRowRendererFactory, DropdownButton, DropdownPanel, DropdownWithIcon, EnumFacet, EnumFacetChart, ErrorCard, ExactValueFacet, ExplorerPage, ExplorerPageGetServerSideProps, ExplorerPageGetServerSidePropsForConfigId, ExplorerTableCellRendererFactory, ExplorerTableDetailsPanelFactory, FacetControlsHeader, FacetExpander, FacetSelector, FacetSortPanel, FacetTabs, FiltersPanel, FirstTimeModal, Footer, Gen3Button, Gen3ButtonReverse, Gen3Link, Gen3ModalsProvider, Gen3Provider, GqlQueryEditor$1 as GqlQueryEditor, Header$1 as Header, HoverLink, LandingPage, LandingPageGetServerSideProps, LoginButton$1 as LoginButton, LoginPage, LoginPageGetServerSideProps, LoginPanel, LoginProvidersPanel, MinutesToMilliseconds, MultiSelectValueFacet, NavPageLayout, NavigationBar, NavigationButton, NoAccessModal, NotebookLitePage, NotebookLitePageGetStaticProps, ProfilePage, ProfilePageGetServerSideProps, ProfileProvider, ProtectedContent, QueryExpression, QueryExpressionContext, QueryExpressionSection, QueryPage, QueryPageGetServerSideProps, RangeFacet, ReactECharts, ResourcesFilters, SPECIAL_CASE_FIELDS, SegmentedControl, SessionExpiredModal, SinglePageStudyDetailsPanel, StaticNotebookIFrame, StaticNotebookViewer, StudyDetailsPanel, StudyGroup, StudyGroupPanel, StudyProvider, SubmissionPage, SubmissionPageGetServerSideProps, TabbedCohortBuilder, TabbedCohortBuilderPage, TabbedCohortBuilderPageGetServerSideProps, TabbedPanel, TagCloud, TailwindConfig, TopBar, UploadJSONButton, User, Workspace, WorkspaceNoAccessPage, WorkspaceNoAccessPageServerSideProps, WorkspacePage, WorkspacePageGetServerSideProps, accessibleFieldName, addIntersectionToIncludes, addUnion, analysisApiCohortDiscovery, buildNested, capitalize, classifyFacets, compareKeysAscending, compareKeysDescending, computeRowSpan, convertMinutesToMilliseconds, convertPathsToTree, convertSecondsToMilliseconds, convertToStringArray, create10ColorAccessibleContrast, create10ColorPallet, createMantineTheme, credentialsLogin, credentialsLogout, extractObjectKey, extractRangeValues, focusStyles, getAllFieldsFromFilterConfigs, getCurrentUnixTimestamp, getNavPageLayoutPropsFromConfig, getParamsValueAsString, getTagInfo, hasOwnProperty, isArrayOfString, isEnumFacetResponse, isHeaderMetadata, isPropertyKey, isTextTransform$1 as isTextTransform, mapFacetSortToSortType, processBucketData, processLabel$1 as processLabel, processRangeData, processRangeKeyLabel, registerCohortBuilderDefaultPreviewRenderers, registerCohortDiscoveryApp, registerCohortSimilarityApp, registerDefaultDiscoveryDataLoaders, registerDiscoveryDefaultCellRenderers, registerDiscoveryDefaultStudyPreviewRenderers, registerExplorerDefaultCellRenderers, registerMetadataSchemaApp, removeIntersectionFromEnum, removeKey$1 as removeKey, removeUnion, resourcePathFromProjectID, sessionLogout, sessionToken, staticNotebookAPI, stripTrailingSlash, toCountsString, toDisplayName, truncateString, unixTimeToString, updateFacetEnum, useClearFilters$1 as useClearFilters, useDiscoveryContext, useExtractEnumFilterValues, useExtractRangeFilterValues, useFieldNameToTitle, useGetFacetFilters$1 as useGetFacetFilters, useUpdateFilters$1 as useUpdateFilters, userHasMethodForServiceOnResource$1 as userHasMethodForServiceOnResource };
 //# sourceMappingURL=index.js.map