@gen3/frontend 0.11.11 → 0.11.12

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, 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';
@@ -3397,6 +3397,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,217 +3770,63 @@ flex items-start justify-between items-center flex-nowrap bg-secondary px-1.5 ro
     });
 };
 
-const sortTypeToAriaDescription = (sortTypeAndDirection, valueLabel, field)=>{
-    if (sortTypeAndDirection.type === 'alpha') {
-        return sortTypeAndDirection.direction === 'asc' ? `The ${field} names are now sorted alphabetically ascending` : `The ${field} names are now sorted alphabetically descending`;
-    } else {
-        return sortTypeAndDirection.direction === 'asc' ? `The ${field} ${valueLabel} are now sorted numerically ascending` : `The ${field} ${valueLabel} are now sorted numerically descending`;
-    }
+const OverflowTooltippedLabel = ({ children, label, className = 'flex-grow font-heading text-md pt-0.5' })=>{
+    const [showTooltip, setShowTooltip] = useState(false);
+    return /*#__PURE__*/ jsx(Tooltip, {
+        label: label,
+        disabled: !showTooltip,
+        position: "top-start",
+        offset: 5,
+        multiline: true,
+        withArrow: true,
+        arrowOffset: 20,
+        classNames: {
+            tooltip: 'bg-base-min bg-opacity-90 text-base-contrast-min shadow-lg font-content font-medium text-xs',
+            arrow: 'bg-base-min bg-opacity-90'
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            className: `${className} truncate ... `,
+            ref: (el)=>{
+                if (el) {
+                    if (el.clientWidth < el.scrollWidth) {
+                        setShowTooltip(true);
+                    } else {
+                        setShowTooltip(false);
+                    }
+                }
+            },
+            children: children
+        })
+    });
 };
-/**
- * FacetCards "sort" header supporting sort by A-Z or by Value both ascending and descending
- * @param sortType - current sort type
- * @param valueLabel - Value labels, typically "case" "file"
- * @param setSort - sets the sort type and direction
- * @param field - specifies the facet table name
- */ const FacetSortPanel = ({ sortType, valueLabel, setSort, field })=>{
-    const liveRegionRef = useRef(null);
-    const [sortingStatus, setSortingStatus] = useState('');
+
+const FacetEnumList = ({ field, facetName, hooks, valueLabel, isSettings = false, isFacetView = true, isSearching = false, showPercent = false, hideIfEmpty = false, showSorting = true, sort = 'value-dsc' })=>{
+    const [isGroupExpanded, setIsGroupExpanded] = useState(false);
+    const cardRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const settingRef = useRef(null);
+    const [searchTerm, setSearchTerm] = useState('');
+    // const [combineMode, setCombineMode] = useState<'or' | 'and'>('or');
+    const { data, enumFilters, combineMode, isSuccess, error } = hooks.useGetFacetData(field);
+    const [selectedEnums, setSelectedEnums] = useState(enumFilters ?? []);
+    const totalCount = hooks?.useTotalCounts ? hooks.useTotalCounts() : 1;
+    const clearFilters = hooks.useClearFilter();
+    const updateFacetFilters = hooks.useUpdateFacetFilters();
+    const isFilterExpanded = hooks?.useFilterExpanded && hooks.useFilterExpanded(field);
+    const showFilters = isFilterExpanded === undefined || isFilterExpanded;
+    const [sortedData, setSortedData] = useState([]);
+    const [sortType, setSortType] = useState(mapFacetSortToSortType(sort));
+    const theme = useMantineTheme();
+    const updateVisibleValues = hooks?.updateVisibleValues;
     useEffect(()=>{
-        if (sortingStatus && liveRegionRef?.current) {
-            liveRegionRef.current.textContent = sortingStatus;
+        if (isSearching) {
+            searchInputRef?.current?.focus();
+        } else if (searchTerm.length > 0) {
+            setSearchTerm('');
         }
     }, [
-        sortingStatus
-    ]);
-    const [NameSortIcon, nameIconSize] = sortType.type === 'alpha' ? sortType.direction === 'asc' ? [
-        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, {
-        label: label,
-        disabled: !showTooltip,
-        position: "top-start",
-        offset: 5,
-        multiline: true,
-        withArrow: true,
-        arrowOffset: 20,
-        classNames: {
-            tooltip: 'bg-base-min bg-opacity-90 text-base-contrast-min shadow-lg font-content font-medium text-xs',
-            arrow: 'bg-base-min bg-opacity-90'
-        },
-        children: /*#__PURE__*/ jsx("div", {
-            className: `${className} truncate ... `,
-            ref: (el)=>{
-                if (el) {
-                    if (el.clientWidth < el.scrollWidth) {
-                        setShowTooltip(true);
-                    } else {
-                        setShowTooltip(false);
-                    }
-                }
-            },
-            children: children
-        })
-    });
-};
-
-const ExpanderLabel = tw.div`
-text-accent-content-darker
-p-1
-font-bold
-cursor-pointer
-text-xs
-font-content
-`;
-/**
- * Component which manages the compact/expanded state of a FacetCard
- * @param remainingValues - number of remaining values when compact "show 4"
- * @param isGroupExpanded - true if expanded, false if compact
- * @param onShowChanged - callback to call when the expand/compact button is clicked
- */ const FacetExpander = ({ remainingValues, isGroupExpanded, onShowChanged })=>{
-    return /*#__PURE__*/ 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 [isGroupExpanded, setIsGroupExpanded] = useState(false);
-    const cardRef = useRef(null);
-    const searchInputRef = useRef(null);
-    const settingRef = useRef(null);
-    const [searchTerm, setSearchTerm] = useState('');
-    // const [combineMode, setCombineMode] = useState<'or' | 'and'>('or');
-    const { data, enumFilters, combineMode, isSuccess, error } = hooks.useGetFacetData(field);
-    const [selectedEnums, setSelectedEnums] = useState(enumFilters ?? []);
-    const totalCount = hooks?.useTotalCounts ? hooks.useTotalCounts() : 1;
-    const clearFilters = hooks.useClearFilter();
-    const updateFacetFilters = hooks.useUpdateFacetFilters();
-    const isFilterExpanded = hooks?.useFilterExpanded && hooks.useFilterExpanded(field);
-    const showFilters = isFilterExpanded === undefined || isFilterExpanded;
-    const [sortedData, setSortedData] = useState([]);
-    const [sortType, setSortType] = useState(mapFacetSortToSortType(sort));
-    const theme = useMantineTheme();
-    const updateVisibleValues = hooks?.updateVisibleValues;
-    useEffect(()=>{
-        if (isSearching) {
-            searchInputRef?.current?.focus();
-        } else if (searchTerm.length > 0) {
-            setSearchTerm('');
-        }
-    }, [
-        isSearching,
-        searchTerm
+        isSearching,
+        searchTerm
     ]);
     useEffect(()=>{
         if (isSettings) {
@@ -3975,7 +3988,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',
@@ -4203,194 +4216,54 @@ const EnumFacet = ({ field, hooks, valueLabel, description, facetName, showPerce
     });
 };
 
-const instanceOfIncludesExcludes$1 = (op)=>[
-        'in'
-    ].includes(op.operator); // TODO: Guppy does not support excludes
-/**
- * Extracts the operands if the operation isIncludes or Excludes. Returns an empty Array
- * if filter is not the correct type.
- * @param operation - filters to extract values from
- */ const extractValues = (operation)=>{
-    if (operation && instanceOfIncludesExcludes$1(operation)) {
-        return operation.operands;
-    }
-    return [];
-};
-/**
- * Exact value facet component
- * @param field - field to facet on
- * @param description - description of the facet
- * @param facetName - name of the facet
- * @param dismissCallback - callback function to dismiss the facet
- * @param width - width of the facet
- * @param hooks - hooks to use for the facet
- * @param header - header components
- * @category Facets
- */ const ExactValueFacet = ({ field, description, facetName = undefined, dismissCallback = undefined, width = undefined, hooks, header = {
+const createBucket = (field, lower, upper)=>({
+        operator: 'and',
+        operands: [
+            {
+                field,
+                operator: '>=',
+                operand: lower
+            },
+            {
+                field,
+                operator: '<=',
+                operand: upper
+            }
+        ]
+    });
+const RangeFacet = ({ field, hooks, valueLabel, description, facetName, minimum = DEFAULT_MINIMUM, maximum = DEFAULT_MAXIMUM, showSearch = false, showFlip = false, showSettings = false, dismissCallback = undefined, width = undefined, header = {
     Panel: FacetHeader,
     Label: FacetText,
     iconStyle: controlsIconStyle
 } })=>{
-    const [textValue, setTextValue] = 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 +4344,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 +4393,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);
         }
@@ -4557,29 +4430,577 @@ const isFacetEmpty = (op)=>{
                         size: "sm",
                         placeholder: `Enter ${facetTitle}`,
                         classNames: {
-                            root: 'grow',
-                            input: 'border-r-0 rounded-r-none py-1'
-                        },
-                        comboboxProps: {
-                            shadow: 'md'
+                            root: 'grow',
+                            input: 'border-r-0 rounded-r-none py-1'
+                        },
+                        comboboxProps: {
+                            shadow: 'md'
+                        },
+                        "aria-label": "enter value to add filter",
+                        value: selectedValues,
+                        onChange: setSelectedValues,
+                        searchable: true,
+                        data: dataValues,
+                        limit: 10,
+                        maxDropdownHeight: 200,
+                        hidePickedOptions: true,
+                        withScrollArea: false,
+                        mt: "md"
+                    })
+                })
+            })
+        ]
+    });
+};
+
+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
+            }, `${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'
                         },
-                        "aria-label": "enter value to add filter",
-                        value: selectedValues,
-                        onChange: setSelectedValues,
-                        searchable: true,
-                        data: dataValues,
-                        limit: 10,
-                        maxDropdownHeight: 200,
-                        hidePickedOptions: true,
-                        withScrollArea: false,
-                        mt: "md"
-                    })
-                })
+                        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 +5022,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({
@@ -7489,7 +7858,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',
@@ -12146,235 +12515,62 @@ const DownloadsPanel = ({ dropdowns, buttons, loginForDownload, index, totalCoun
                             }))
                     }
                 };
-            }, {});
-        }
-        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
+        return dropdownsToRender;
+    }, [
+        dropdowns,
+        loginRequired,
+        isUserLoggedIn
     ]);
-    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 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 = {};
@@ -12812,6 +13008,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 +13034,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 +13044,8 @@ const TabbedCohortBuilder = ({ index, tabsConfiguration })=>{
             days: RangeHookInstances,
             percent: RangeHookInstances,
             datetime: RangeHookInstances,
-            toggle: RangeHookInstances
+            toggle: RangeHookInstances,
+            upload: EnumHookInstances
         };
     }, [
         getEnumFacetData,
@@ -13877,7 +14057,7 @@ const AnalysisCard = ({ title, description, type, icon, image, hasDemo, loginReq
                 className: "h-full",
                 children: [
                     /*#__PURE__*/ jsx("div", {
-                        className: "p-0 rounded-sm h-1/2 h-max-1/2",
+                        className: "p-0 rounded-sm h-1/2 h-max-1/2 flex justify-center items-center overflow-hidden",
                         children: /*#__PURE__*/ jsx(Image$1, {
                             component: Image,
                             src: `${image}`,
@@ -17350,7 +17530,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 +19311,77 @@ const registerMetadataSchemaApp = ()=>createGen3App({
         requiredEntityTypes: []
     });
 
+const DropdownWithIcon = ({ disableTargetWidth, LeftIcon, RightIcon = /*#__PURE__*/ jsx(IoMdArrowDropdown, {
+    size: "1.25em",
+    "aria-hidden": "true",
+    "data-testid": "dropdown-icon"
+}), TargetButtonChildren, targetButtonDisabled, dropdownElements, menuLabelText, menuLabelCustomClass, customPosition, fullHeight, zIndex = undefined, customDataTestId = undefined, tooltip = undefined, buttonAriaLabel = undefined })=>{
+    return /*#__PURE__*/ jsxs(Menu, {
+        width: disableTargetWidth ?? 'target',
+        ...customPosition && {
+            position: customPosition
+        },
+        "data-testid": customDataTestId ?? 'menu-elem',
+        zIndex: zIndex,
+        children: [
+            /*#__PURE__*/ jsx(Menu.Target, {
+                children: /*#__PURE__*/ jsx(Button, {
+                    variant: "outline",
+                    color: "primary",
+                    className: `bg-base-max border-primary data-disabled:opacity-50 data-disabled:bg-base-max data-disabled:text-primary ${focusStyles}`,
+                    ...LeftIcon && {
+                        leftIcon: LeftIcon
+                    },
+                    rightSection: RightIcon,
+                    disabled: targetButtonDisabled,
+                    classNames: {
+                        // rightIcon: 'border-l pl-1 -mr-2',
+                        root: fullHeight ? 'h-full' : undefined
+                    },
+                    "aria-label": buttonAriaLabel,
+                    children: /*#__PURE__*/ jsx("div", {
+                        children: tooltip?.length && !targetButtonDisabled ? /*#__PURE__*/ jsx("div", {
+                            children: /*#__PURE__*/ jsx(Tooltip, {
+                                label: tooltip,
+                                children: /*#__PURE__*/ jsx("div", {
+                                    children: TargetButtonChildren
+                                })
+                            })
+                        }) : /*#__PURE__*/ jsx("div", {
+                            children: TargetButtonChildren
+                        })
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxs(Menu.Dropdown, {
+                "data-testid": "dropdown-menu-options",
+                className: "border-1 border-secondary",
+                children: [
+                    menuLabelText && /*#__PURE__*/ jsxs(React__default.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 }, idx)=>/*#__PURE__*/ jsx(Menu.Item, {
+                            onClick: ()=>{
+                                if (onClick) onClick();
+                            },
+                            "data-testid": `${title}-${idx}`,
+                            leftSection: icon && icon,
+                            disabled: disabled,
+                            children: title
+                        }, `${title}-${idx}`))
+                ]
+            })
+        ]
+    });
+};
+
 const ActionButton = ({ title, enabled, type, leftIcon, rightIcon, tooltipText })=>{
     return /*#__PURE__*/ jsx(Tooltip, {
         label: tooltipText,
@@ -25590,5 +25841,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