@gen3/frontend 0.10.95 → 0.10.97

package/dist/cjs/index.js

@@ -16,6 +16,7 @@ var tinycolor = require('tinycolor2');
 var lodash = require('lodash');
 var tailwindMerge = require('tailwind-merge');
 var bs = require('react-icons/bs');
+var io = require('react-icons/io');
 var Markdown = require('react-markdown');
 var remarkGfm = require('remark-gfm');
 var reactCookie = require('react-cookie');
@@ -44,7 +45,6 @@ var lu = require('react-icons/lu');
 var tw = require('tailwind-styled-components');
 require('universal-cookie');
 var ri = require('react-icons/ri');
-var io = require('react-icons/io');
 var modals = require('@mantine/modals');
 var GraphiQL = require('graphiql');
 var fs = require('fs');
@@ -53,6 +53,7 @@ var react$1 = require('redux-persist/integration/react');
 var reduxPersist = require('redux-persist');
 var redux = require('redux');
 var toolkit = require('@reduxjs/toolkit');
+var idb = require('idb');
 var createWebStorage = require('redux-persist/lib/storage/createWebStorage');
 var form = require('@mantine/form');
 var dynamic = require('next/dynamic');
@@ -551,6 +552,47 @@ const create10ColorAccessibleContrast = (pallet)=>{
  */ const convertSecondsToMilliseconds = (seconds)=>seconds * 1000;
 const MinutesToMilliseconds = (minutes)=>minutes * 60 * 1000;
 
+const convertPathsToTree = (paths)=>{
+    const tree = {};
+    paths.forEach((path)=>{
+        const parts = path.split('/').filter((part)=>part !== '');
+        let current = tree;
+        // Build the path through the tree
+        for(let i = 0; i < parts.length; i++){
+            const part = parts[i];
+            const fullPath = parts.slice(0, i + 1).join('/');
+            if (!current[part]) {
+                current[part] = {
+                    value: fullPath,
+                    label: part,
+                    children: {},
+                    _hasChildren: false
+                };
+            }
+            // Mark parent as having children
+            if (i < parts.length - 1) {
+                current[part]._hasChildren = true;
+            }
+            current = current[part].children;
+        }
+    });
+    // Convert to final format
+    const convertToFinalFormat = (node)=>{
+        const result = {
+            value: node.value,
+            label: node.label
+        };
+        const childKeys = Object.keys(node.children);
+        if (childKeys.length > 0) {
+            result.children = childKeys.map((key)=>convertToFinalFormat(node.children[key]));
+        }
+        return result;
+    };
+    // Get the root nodes and convert them
+    const rootKeys = Object.keys(tree);
+    return rootKeys.map((key)=>convertToFinalFormat(tree[key]));
+};
+
 const resourcePathFromProjectID = (projectID)=>{
     const split = projectID.split('-');
     const program = split[0];
@@ -895,7 +937,7 @@ const UPDATE_SESSION_LIMIT = MinutesToMilliseconds(5);
  */ const SessionProvider = ({ children, updateSessionTime = 5, inactiveTimeLimit = 20, workspaceInactivityTimeLimit = 0, logoutInactiveUsers = true, monitorWorkspace = true })=>{
     const router$1 = router.useRouter();
     const coreDispatch = core.useCoreDispatch();
-    core.useGetCSRFQuery();
+    const { isSuccess: isGetCSRFSuccess } = core.useGetCSRFQuery();
     useWorkspaceResourceMonitor(monitorWorkspace); // monitor workspaces if any are running or configured
     const [getUserDetails] = core.useLazyFetchUserDetailsQuery(); // Fetch user details
     const userStatus = core.useCoreSelector((state)=>core.selectUserAuthStatus(state));
@@ -982,10 +1024,14 @@ const UPDATE_SESSION_LIMIT = MinutesToMilliseconds(5);
         updateSession,
         endSession
     ]);
-    return /*#__PURE__*/ jsxRuntime.jsx(SessionContext.Provider, {
+    if (isGetCSRFSuccess) return /*#__PURE__*/ jsxRuntime.jsx(SessionContext.Provider, {
         value: value,
         children: children
     });
+    else return /*#__PURE__*/ jsxRuntime.jsx(core$1.Center, {
+        h: "100vh",
+        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Loader, {})
+    });
 };
 
 const TooltipStyle = {
@@ -1116,6 +1162,28 @@ const ErrorCard = ({ message })=>/*#__PURE__*/ jsxRuntime.jsx(MessageCard, {
         color: "utility.3"
     });
 
+const EmptyTableMessage = ({ message })=>{
+    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+        gap: "xs",
+        justify: "center",
+        classNames: {
+            root: 'w-100 my-4'
+        },
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("span", {
+                className: "text-utility-warning",
+                children: /*#__PURE__*/ jsxRuntime.jsx(io.IoMdInformationCircleOutline, {
+                    size: "1.5rem"
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                fw: 600,
+                children: message
+            })
+        ]
+    });
+};
+
 const LoginProviderMultipleItems = ({ provider, handleLoginSelected })=>{
     const [value, setValue] = React.useState(null);
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
@@ -1550,6 +1618,7 @@ const filterRedirect = (redirect)=>{
     } else {
         redirectPath = redirect ?? '/';
     }
+    console.log('redirectPath', redirectPath);
     return core.GEN3_REDIRECT_URL ? `${core.GEN3_REDIRECT_URL}/${redirectPath}` : redirectPath;
 };
 const LoginPanel = (loginConfig)=>{
@@ -2421,7 +2490,7 @@ const processChartData$2 = (facetData, valueType = 'count', total, maxBins = 100
         }));
     return results;
 };
-const HorizontalBarChart = ({ data, valueType, total })=>{
+const HorizontalBarChart = ({ data, valueType, total, showLegendInChart = true })=>{
     const chartData = processChartData$2(data, valueType, total);
     const chartDefinition = React.useMemo(()=>{
         return {
@@ -2436,11 +2505,12 @@ const HorizontalBarChart = ({ data, valueType, total })=>{
                 orient: 'vertical',
                 left: '73%',
                 type: 'scroll',
-                right: 15
+                right: 15,
+                show: showLegendInChart
             },
             grid: {
                 left: '0%',
-                right: '30%',
+                right: showLegendInChart ? '30%' : '3%',
                 bottom: '25%',
                 containLabel: true,
                 height: '50%'
@@ -2565,7 +2635,8 @@ const Charts = ({ charts, data, counts, isSuccess, numCols = DEFAULT_COLS, style
                                         data: data === undefined ? [] : data,
                                         total: counts ?? 1,
                                         valueType: chart.valueType ?? 'count',
-                                        label: chart.label
+                                        label: chart.label,
+                                        showLegendInChart: chart.showLegendInChart
                                     })
                                 }, "modal-col-1"),
                                 /*#__PURE__*/ jsxRuntime.jsx(core$1.Grid.Col, {
@@ -2653,7 +2724,8 @@ const Charts = ({ charts, data, counts, isSuccess, numCols = DEFAULT_COLS, style
                         data: data === undefined ? [] : data[field],
                         total: counts ?? 1,
                         valueType: charts[field].valueType ?? 'count',
-                        label: charts[field].label
+                        label: charts[field].label,
+                        showLegendInChart: charts[field].showLegendInChart
                     }),
                     showLegends && /*#__PURE__*/ jsxRuntime.jsx(core$1.Card.Section, {
                         inheritPadding: true,
@@ -3244,7 +3316,7 @@ const AccountButton = ({ leftIcon = undefined, rightIcon = undefined, iconSize =
     const mergedClassnames = mergeDefaultTailwindClassnames(classNamesDefaults, classNames);
     const router$1 = router.useRouter();
     const handleSelected = async ()=>{
-        await router$1.push('Profile');
+        await router$1.push('/Profile');
     };
     const userInfo = core.useCoreSelector((state)=>core.selectUserDetails(state));
     const userStatus = core.useCoreSelector((state)=>core.selectUserAuthStatus(state));
@@ -3262,7 +3334,7 @@ const AccountButton = ({ leftIcon = undefined, rightIcon = undefined, iconSize =
 };
 
 const handleSelected = async (isAuthenticated, router, referrer, endSession, externalLoginUrl)=>{
-    if (!isAuthenticated) await router.push(externalLoginUrl || `Login?redirect=${referrer}`);
+    if (!isAuthenticated) await router.push(externalLoginUrl || `/Login?redirect=${referrer}`);
     else {
         if (endSession) endSession();
     }
@@ -8030,6 +8102,7 @@ flex items-start justify-between items-center flex-nowrap bg-secondary px-1.5 ro
                                 if (toggleSettings) toggleSettings();
                             },
                             "aria-label": "Search",
+                            className: header.iconStyle,
                             children: /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
                                 width: 12,
                                 height: 12,
@@ -8162,7 +8235,7 @@ const DEFAULT_MINIMUM = 0;
 const DEFAULT_MAXIMUM = 100;
 const BAD_DATA_MESSAGE = 'No data for this field';
 
-const FacetSelector = ({ category, facetName, hooks, width = 'w-full', description, fields, selectedFields, updateSelectedField, showSearch = true, header = {
+const FacetSelector = ({ category, facetName, hooks, width = 'w-full', description, fields, selectedFields, updateSelectedField, showSearch = true, showSettings = false, header = {
     Panel: FacetHeader,
     Label: FacetText,
     iconStyle: controlsIconStyle
@@ -8204,6 +8277,7 @@ const FacetSelector = ({ category, facetName, hooks, width = 'w-full', descripti
                     hooks: hooks,
                     facetName: facetName,
                     showSearch: showSearch,
+                    showSettings: showSettings,
                     toggleSearch: toggleSearch,
                     header: header
                 })
@@ -9031,7 +9105,7 @@ const reducer = (state, action)=>{
             }
     }
 };
-const QueryExpressionSection = ({ index, showImportExport = false, displayOnly = false, showTitle = false })=>{
+const QueryExpressionSection = ({ index, showImportExport = false, displayOnly = false, showTitle = true })=>{
     const [expandedState, setExpandedState] = React.useReducer(reducer, {});
     const [filtersSectionCollapsed, setFiltersSectionCollapsed] = React.useState(true);
     const filtersRef = React.useRef(null);
@@ -12035,7 +12109,6 @@ const TabsLayoutToComponentProp = (tabsLayout)=>{
 };
 
 const CohortBuilder = ({ explorerConfig, sharedFiltersMap = null, tabsLayout = 'left' })=>{
-    core.useGetCSRFQuery();
     const dispatch = core.useCoreDispatch();
     dispatch(core.setSharedFilters(sharedFiltersMap ?? {}));
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -13455,15 +13528,15 @@ const FacetSelectionPanel = ({ categories, hooks, selectedFields, updateSelected
         hooks
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        className: "w-1/3 flex flex-col grow-0 p-4 gap-y-6",
+        className: "sm:w-40 md:w-80 lg:w-96 xl:w-1/4 flex flex-col flex-shrink-0 p-4 gap-y-6",
         children: panels
     });
 };
 
-const initialState$2 = {};
+const initialState$3 = {};
 const expandSlice = toolkit.createSlice({
     name: 'CohortDiscovery/expandedCategory',
-    initialState: initialState$2,
+    initialState: initialState$3,
     reducers: {
         toggleCategoryFilter: (state, action)=>{
             return {
@@ -13483,10 +13556,10 @@ const filtersExpandedReducer = expandSlice.reducer;
 const { toggleCategoryFilter, toggleAllFilters } = expandSlice.actions;
 const selectFilterExpanded = (state, field)=>state.filtersExpandedState?.[field];
 
-const initialState$1 = {};
+const initialState$2 = {};
 const selectIndexFacets = toolkit.createSlice({
     name: 'CohortDiscovery/selectedFacets',
-    initialState: initialState$1,
+    initialState: initialState$2,
     reducers: {
         addFacetSelection: (state, action)=>{
             if (!(action.payload.index in state)) {
@@ -13521,12 +13594,12 @@ const selectedFacetsReducer = selectIndexFacets.reducer;
 const { addFacetSelection, removeFacetSelection } = selectIndexFacets.actions;
 const selectSelectedFacetsFromIndex = (state, index)=>state.selectedIndexFacets[index];
 
-const initialState = {};
+const initialState$1 = {};
 /**
  * Redux slice for managing facet definitions in CohortDiscovery
  */ const facetDefinitionsSlice = toolkit.createSlice({
     name: 'CohortDiscovery/facetDefinitions',
-    initialState,
+    initialState: initialState$1,
     reducers: {
         addFacetDefinition: (state, action)=>{
             const { index, definition } = action.payload;
@@ -13556,311 +13629,955 @@ const initialState = {};
 const facetDefinitionsReducer = facetDefinitionsSlice.reducer;
 const { addFacetDefinition, addFacetDefinitions } = facetDefinitionsSlice.actions;
 
-const initialCohortState = {
-    cohort: {
-        id: 'default',
-        name: 'Discovery',
-        filters: {},
-        modified_datetime: new Date().toISOString()
-    }
-};
-/**
- * Redux slice for cohort filters
- */ const cohortSlice = toolkit.createSlice({
-    name: 'CohortDiscovery/cohorts',
-    initialState: initialCohortState,
-    reducers: {
-        // adds a filter to the cohort filter set at the given index
-        updateCohortFilter: (state, action)=>{
-            const { index, field, filter } = action.payload;
-            return {
-                cohort: {
-                    ...state.cohort,
-                    filters: {
-                        ...state.cohort.filters,
-                        [index]: {
-                            mode: state.cohort.filters?.[index]?.mode ?? 'and',
-                            root: {
-                                ...state.cohort.filters?.[index]?.root ?? {},
-                                [field]: filter
-                            }
-                        }
-                    }
-                }
-            };
-        },
-        setCohortFilter: (state, action)=>{
-            const { index, filters } = action.payload;
-            return {
-                cohort: {
-                    ...state.cohort,
-                    filters: {
-                        ...state.cohort.filters,
-                        [index]: filters
-                    }
-                }
-            };
-        },
-        // removes a filter to the cohort filter set at the given index
-        removeCohortFilter: (state, action)=>{
-            const { index, field } = action.payload;
-            const filters = state.cohort?.filters?.[index]?.root;
-            if (!filters) {
-                return;
-            }
-            const { [field]: _a, ...updated } = filters;
-            return {
-                cohort: {
-                    ...state.cohort,
-                    filters: {
-                        ...state.cohort.filters,
-                        [index]: {
-                            mode: state.cohort.filters[index].mode,
-                            root: updated
-                        }
-                    }
-                }
-            };
-        },
-        // removes all filters from the cohort filter set at the given index
-        clearCohortFilters: (state, action)=>{
-            const { index } = action.payload;
-            return {
-                cohort: {
-                    ...state.cohort,
-                    filters: {
-                        ...state.cohort.filters,
-                        [index]: {
-                            // empty filter set
-                            mode: 'and',
-                            root: {}
-                        }
-                    }
-                }
-            };
-        }
-    }
-});
-// Filter actions: addFilter, removeFilter, updateFilter
-const { updateCohortFilter, setCohortFilter, removeCohortFilter, clearCohortFilters } = cohortSlice.actions;
-const cohortReducer = cohortSlice.reducer;
-
-/* eslint @typescript-eslint/no-unused-vars: 0 */ // Credit to: https://github.com/vercel/next.js/discussions/15687
-const createNoopStorage = ()=>{
-    return {
-        getItem (_key) {
-            return Promise.resolve(null);
-        },
-        setItem (_key, value) {
-            return Promise.resolve(value);
-        },
-        removeItem (_key) {
-            return Promise.resolve();
-        }
-    };
-};
-const storage = typeof window !== 'undefined' ? createWebStorage('local') : createNoopStorage();
-typeof window !== 'undefined' ? createWebStorage('session') : createNoopStorage();
-
 const createCohortId = ()=>toolkit.nanoid();
-const createRequestId = ()=>toolkit.nanoid();
-const newCohort = (name, filters)=>{
+const newCohort = (name, filters, id, saved)=>{
     const ts = new Date().toISOString();
     return {
-        id: createCohortId(),
+        id: id ?? createCohortId(),
         name: name,
         filters: filters,
-        modified_datetime: ts,
-        created_datetime: ts,
+        modifiedDatetime: ts,
+        createdDatetime: ts,
         requestedAccess: false,
-        requestId: 'no_request_id'
+        requestId: 'no_request_id',
+        saved: saved ?? false,
+        modified: false
     };
 };
-const newDataAccessRequest = (userInformation, cohortId)=>{
+const newDataAccessRequest = (requestId, status, userInformation, cohortId, createdTime, updatedTime)=>{
+    const now = new Date().toISOString();
     return {
-        id: createRequestId(),
-        request_datetime: new Date().toISOString(),
-        status: 'pending',
+        id: requestId,
+        createdDatetime: createdTime ?? now,
+        updatedDatetime: updatedTime ?? now,
+        status: status,
         cohortId,
         ...userInformation
     };
 };
+const isIndexedFilterSetEmpty = (filters)=>Object.values(filters).every((filterSet)=>Object.keys(filterSet).length === 0);
 
-// Create the entity adapter
-const cohortsAdapter = toolkit.createEntityAdapter({
-    // Select the id as the primary key
-    selectId: (cohort)=>cohort.id,
-    // Optional: Sort by name if needed
-    sortComparer: (a, b)=>a.name.localeCompare(b.name)
-});
-// Create a slice with reducers
-const cohortPersistenceSlice = toolkit.createSlice({
-    name: 'CohortDiscovery/CohortManager',
-    initialState: cohortsAdapter.getInitialState(),
-    reducers: {
-        // Add a single cohort
-        saveCohort: (state, action)=>{
-            const cohort = newCohort(action.payload.name, action.payload.filters);
-            cohortsAdapter.setOne(state, cohort);
-        },
-        // Remove a cohort
-        removeCohort: cohortsAdapter.removeOne,
-        // Remove multiple cohorts
-        removeCohorts: cohortsAdapter.removeMany
+const DATABASE_NAME = 'Gen3CohortDiscovery';
+const STORE_NAME = 'cohorts';
+const DB_SCHEMA_VERSION = 1;
+class CohortStorage {
+    getDb() {
+        try {
+            return idb.openDB(DATABASE_NAME, 1, {
+                upgrade (db) {
+                    if (!db.objectStoreNames.contains(STORE_NAME)) {
+                        db.createObjectStore(STORE_NAME, {
+                            keyPath: 'id'
+                        });
+                    }
+                }
+            });
+        } catch (error) {
+            let errorMessage = 'Unknown error';
+            if (error instanceof Error) {
+                errorMessage = error.message;
+            }
+            throw new Error(`Database initialization failed: ${errorMessage}`);
+        }
     }
-});
-// Export actions
-const { saveCohort, removeCohort, removeCohorts } = cohortPersistenceSlice.actions;
-// Export selectors
-const { selectAll: selectAllCohorts, selectTotal: selectTotalCohorts, selectById: selectCohortById } = cohortsAdapter.getSelectors((state)=>state.savedCohorts);
-const selectCohortIdToNameMap = toolkit.createSelector([
-    selectAllCohorts
-], (cohorts)=>{
-    return cohorts.reduce((acc, cohort)=>{
-        acc[cohort.id] = cohort.name;
-        return acc;
-    }, {});
-});
-// Export reducer
-const cohortPersistenceReducer = cohortPersistenceSlice.reducer;
-
-// Create the entity adapter
-const dataAccessRequestsAdapter = toolkit.createEntityAdapter({
-    // Select the id as the primary key
-    selectId: (request)=>request.id,
-    // Optional: Sort by request_datetime descending (newest first)
-    sortComparer: (a, b)=>new Date(b.request_datetime).getTime() - new Date(a.request_datetime).getTime()
-});
-// Create a slice with reducers
-const dataAccessRequestsSlice = toolkit.createSlice({
-    name: 'dataAccessRequests',
-    initialState: dataAccessRequestsAdapter.getInitialState(),
-    reducers: {
-        addDataAccessRequest: (state, action)=>{
-            const { cohortId, userAccessInformation } = action.payload;
-            const dataAccessRequests = newDataAccessRequest(userAccessInformation, cohortId);
-            dataAccessRequestsAdapter.addOne(state, dataAccessRequests);
-        },
-        // Set a request's status
-        setRequestStatus: (state, action)=>{
-            const { id, status } = action.payload;
-            dataAccessRequestsAdapter.updateOne(state, {
-                id,
-                changes: {
-                    status
+    /**
+   * Initialize the IndexedDB database with proper schema
+   */ async initializeDB() {
+        try {
+            return await idb.openDB(DATABASE_NAME, DB_SCHEMA_VERSION, {
+                upgrade: (db)=>{
+                    if (!db.objectStoreNames.contains(STORE_NAME)) {
+                        db.createObjectStore(STORE_NAME, {
+                            keyPath: 'id'
+                        });
+                    }
+                },
+                blocked: ()=>{
+                    console.warn('CohortDB: Database upgrade blocked by another connection');
+                },
+                blocking: ()=>{
+                    console.warn('CohortDB: This connection is blocking a database upgrade');
+                },
+                terminated: ()=>{
+                    console.error('CohortDB: Database connection terminated unexpectedly');
                 }
             });
+        } catch (error) {
+            let errorMessage = 'Unknown error';
+            if (error instanceof Error) {
+                errorMessage = error.message;
+            }
+            throw new Error(`Database initialization failed: ${errorMessage}`);
         }
     }
-});
-// Export actions
-const { addDataAccessRequest, setRequestStatus } = dataAccessRequestsSlice.actions;
-// Export selectors
-const { selectAll: selectAllDataAccessRequests, selectById: selectDataAccessRequestById, selectIds: selectDataAccessRequestIds, selectEntities: selectDataAccessRequestEntities, selectTotal: selectTotalDataAccessRequests } = dataAccessRequestsAdapter.getSelectors((state)=>state.dataAccessRequests);
-const selectCohortToRequestId = toolkit.createSelector([
-    selectAllDataAccessRequests
-], (requests)=>{
-    return requests.reduce((acc, request)=>{
-        acc[request.cohortId] = request.id;
-        return acc;
-    }, {});
-});
-// Export reducer
-const dataAccessRequestsReducer = dataAccessRequestsSlice.reducer;
-
-const _APP_NAME$3 = 'CohortDiscovery';
-const persistConfig = {
-    key: _APP_NAME$3,
-    version: 1,
-    storage
-};
-// create the store, context and selector for the ProjectsCenter
-// Note the project app has a local store and context which isolates
-// the filters and other store/cache values
-const reducers = redux.combineReducers({
-    selectedIndexFacets: selectedFacetsReducer,
-    filtersExpandedState: filtersExpandedReducer,
-    facetDefinitionState: facetDefinitionsReducer,
-    cohorts: cohortReducer,
-    savedCohorts: cohortPersistenceReducer,
-    dataAccessRequests: dataAccessRequestsReducer
-});
-const persistedReducers = reduxPersist.persistReducer(persistConfig, reducers);
-const { id, AppStore, AppContext, useAppSelector, useAppDispatch } = core.createAppStore({
-    reducers: persistedReducers,
-    name: _APP_NAME$3,
-    version: '0.0.1'
-});
-
-const selectCohortFilters = (state)=>state.cohorts.cohort.filters;
-const selectCurrentCohortId = (state)=>state.cohorts.cohort.id;
-const selectCurrentCohortName = (state)=>state.cohorts.cohort.name;
-/**
- * Select a filter by its name from the current cohort. If the filter is not found
- * returns undefined.
- * @param state - Core
- * @param index which cohort index to select from
- * @param name name of the filter to select
- */ const selectIndexedFilterByName = (state, index, name)=>{
-    return state.cohorts.cohort.filters[index]?.root[name];
-};
-const EmptyFilterSet = {
-    mode: 'and',
-    root: {}
-};
-/**
- * Select a filter from the index.
- * returns undefined.
- * @param state - Core
- * @param index which cohort index to select from
- */ const selectIndexFilters = (state, index)=>{
-    return state.cohorts.cohort.filters?.[index] ?? EmptyFilterSet; // TODO: check if this is undefined
-};
-
-const useToggleExpandFilter = ()=>{
-    const dispatch = useAppDispatch();
-    return (field, expanded)=>{
-        dispatch(toggleCategoryFilter({
-            field,
-            expanded
-        }));
-    };
-};
-const useFilterExpandedState = (field)=>{
-    return useAppSelector((state)=>selectFilterExpanded(state, field));
-};
-const useCohortFacetFilters = (index)=>{
-    return useAppSelector((state)=>selectCohortFilters(state)[index]);
-};
-const useClearFilters = (index)=>{
-    const dispatch = useAppDispatch();
-    return (field)=>{
-        dispatch(removeCohortFilter({
-            index,
-            field
-        }));
-    };
-};
-/**
- * Update Guppy filters: process nested fields and have the final
- * leaf be filtered
- * @param index
- */ const useUpdateFilters = (index)=>{
-    const dispatch = useAppDispatch();
-    // update the filter for this facet
-    return (field, filter)=>{
-        dispatch(updateCohortFilter({
-            index: index,
-            field: field,
-            filter: buildNested(field, filter)
+    // ===== CREATE OPERATIONS =====
+    /**
+   * Save a single cohort to the database
+   */ async saveCohort(cohort) {
+        try {
+            const db = await this.getDb();
+            const tx = db.transaction(STORE_NAME, 'readwrite');
+            tx.objectStore(STORE_NAME).put(cohort);
+            await tx.done;
+            return {
+                status: 200,
+                message: 'cohort added'
+            };
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        } catch (_error) {
+            return {
+                isError: true,
+                status: 500,
+                message: 'unable to save cohort'
+            };
+        }
+    }
+    /**
+   * Save multiple cohorts in a single transaction (bulk operation)
+   */ async saveCohorts(cohorts) {
+        if (cohorts.length === 0) return {
+            isError: true,
+            status: 400,
+            message: 'cannot add an empty array'
+        };
+        try {
+            const db = await this.getDb();
+            const tx = db.transaction(STORE_NAME, 'readwrite');
+            // Batch all operations in single transaction for better performance
+            await Promise.all([
+                ...cohorts.map((cohort)=>tx.store.put({
+                        ...cohort,
+                        saved: true
+                    })),
+                tx.done
+            ]);
+            return {
+                status: 200,
+                message: 'cohorts added'
+            };
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        } catch (_error) {
+            return {
+                isError: true,
+                status: 500,
+                message: 'unable to save cohort'
+            };
+        }
+    }
+    // ===== READ OPERATIONS =====
+    /**
+   * Get a specific cohort by ID
+   */ async getCohort(id) {
+        try {
+            const db = await this.getDb();
+            const tx = db.transaction(STORE_NAME, 'readonly');
+            const store = tx.objectStore(STORE_NAME);
+            const cohort = await store.get(id);
+            return {
+                status: 200,
+                message: 'success',
+                data: cohort
+            };
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        } catch (_error) {
+            return {
+                isError: true,
+                status: 401,
+                message: `cannot find cohort ${id}`
+            };
+        }
+    }
+    /**
+   * Get all cohorts from the database
+   */ async getAllCohorts() {
+        try {
+            const db = await this.getDb();
+            const tx = db.transaction(STORE_NAME, 'readonly');
+            const store = tx.objectStore(STORE_NAME);
+            const savedCohorts = await store.getAll();
+            if (!savedCohorts) {
+                return {
+                    isError: true,
+                    status: 500,
+                    message: 'no cohorts returned'
+                };
+            }
+            const cohorts = savedCohorts.reduce((acc, cohort)=>{
+                const { id } = cohort;
+                acc[id] = cohort;
+                return acc;
+            }, {});
+            return {
+                status: 200,
+                message: 'success',
+                data: cohorts
+            };
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        } catch (_error) {
+            return {
+                isError: true,
+                status: 401,
+                message: 'cannot return cohorts'
+            };
+        }
+    }
+    /**
+   * Search cohorts by name (case-insensitive partial match)
+   */ async searchCohortsByName(searchTerm) {
+        try {
+            const db = await this.getDb();
+            const tx = db.transaction(STORE_NAME, 'readonly');
+            const store = tx.objectStore(STORE_NAME);
+            const allCohorts = await store.getAll(STORE_NAME);
+            // Filter in memory for partial name matching
+            const searchLower = searchTerm.toLowerCase();
+            return {
+                status: 200,
+                message: 'success',
+                data: allCohorts.filter((cohort)=>cohort.name.toLowerCase().includes(searchLower)).reduce((acc, cohort)=>{
+                    const { id } = cohort;
+                    acc[id] = cohort;
+                    return acc;
+                }, {})
+            };
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        } catch (_error) {
+            return {
+                isError: true,
+                status: 401,
+                message: 'cannot find cohorts'
+            };
+        }
+    }
+    /**
+   * Count total number of cohorts
+   */ async getCohortCount() {
+        try {
+            const db = await this.getDb();
+            const total = await db.count(STORE_NAME);
+            return {
+                status: 200,
+                message: 'success',
+                data: total
+            };
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        } catch (_error) {
+            return {
+                isError: true,
+                status: 401,
+                message: 'cannot find cohort count'
+            };
+        }
+    }
+    // ===== UPDATE OPERATIONS =====
+    /**
+   * Update an existing cohort (full replacement)
+   */ async updateCohort(cohort) {
+        try {
+            const db = await this.getDb();
+            // Verify cohort exists before updating
+            const tx = db.transaction(STORE_NAME, 'readwrite');
+            const store = tx.objectStore(STORE_NAME);
+            const existing = await store.get(cohort.id);
+            if (!existing) {
+                return {
+                    isError: true,
+                    status: 401,
+                    message: 'cohort not found'
+                };
+            }
+            const timestamp = core.getTimestamp();
+            const updated = {
+                ...existing,
+                modifiedDatetime: timestamp
+            };
+            store.put(updated);
+            await tx.done;
+            return {
+                status: 200,
+                message: 'success'
+            };
+        } catch (error) {
+            let errorMessage = 'An unknown error occurred';
+            if (error instanceof Error) {
+                errorMessage = error.message;
+            }
+            return {
+                isError: true,
+                status: 500,
+                message: `Unable to update cohort: ${cohort.id}. Error: ${errorMessage}`
+            };
+        }
+    }
+    // ===== DELETE OPERATIONS =====
+    /**
+   * Delete a specific cohort by ID
+   */ async deleteCohort(id) {
+        try {
+            const db = await this.getDb();
+            const tx = db.transaction(STORE_NAME, 'readwrite');
+            const store = tx.objectStore(STORE_NAME);
+            // Verify cohort exists before deleting
+            const existing = await db.get(STORE_NAME, id);
+            if (!existing) {
+                return {
+                    isError: true,
+                    status: 401,
+                    message: 'cohort not found'
+                };
+            }
+            store.delete(id);
+            await tx.done;
+            return {
+                status: 200,
+                message: `${id} deleted`
+            };
+        } catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred';
+            return {
+                isError: true,
+                status: 500,
+                message: `Unable to delete cohort: ${id}. Error: ${errorMessage}`
+            };
+        }
+    }
+    /**
+   * Delete all cohorts from the database
+   */ async deleteAllCohorts() {
+        try {
+            const db = await this.getDb();
+            const tx = db.transaction(STORE_NAME, 'readwrite');
+            const store = tx.objectStore(STORE_NAME);
+            store.clear();
+            await tx.done;
+            return {
+                status: 200,
+                message: `all cohorts deleted`
+            };
+        } catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred';
+            return {
+                isError: true,
+                status: 500,
+                message: `Unable to delete all cohorts. Error: ${errorMessage}`
+            };
+        }
+    }
+    // ===== UTILITY OPERATIONS =====
+    /**
+   * Check if a cohort exists
+   */ async cohortExists(id) {
+        try {
+            const db = await this.getDb();
+            const tx = db.transaction(STORE_NAME, 'readwrite');
+            const store = tx.objectStore(STORE_NAME);
+            // Verify cohort exists before deleting
+            const existing = await db.get(STORE_NAME, id);
+            return {
+                status: 200,
+                message: `${id}: ${existing ? 'true' : 'false'}`
+            };
+        } catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred';
+            return {
+                isError: true,
+                status: 500,
+                message: `Unable search for cohort. Error: ${errorMessage}`
+            };
+        }
+    }
+    /**
+   * Export all cohorts as JSON
+   */ async exportCohorts() {
+        return await this.getAllCohorts();
+    }
+    /**
+   * Import cohorts from JSON data
+   */ async importCohorts(cohorts, overwrite = false) {
+        try {
+            if (overwrite) {
+                await this.deleteAllCohorts();
+            }
+            await this.saveCohorts(cohorts);
+        } catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'An unknown error occurred';
+            return {
+                isError: true,
+                status: 500,
+                message: `Failed to import cohorts: ${errorMessage}`
+            };
+        }
+    }
+    /**
+   * Close the database connection
+   */ async close() {
+        try {
+            const db = await this.getDb();
+            db.close();
+        } catch (error) {
+            console.error('Failed to close database:', error);
+        }
+    }
+}
+// Export a singleton instance
+const cohortStorage = new CohortStorage();
+
+const EmptyFilterSet = {
+    mode: 'and',
+    root: {}
+};
+
+const isNameUnique = (state, name, excludeId)=>{
+    const trimmedName = name.trim();
+    if (!trimmedName) return false;
+    return !Object.values(state.entities).some((cohort)=>cohort && cohort.id !== excludeId && cohort.name.trim().toLowerCase() === trimmedName.toLowerCase());
+};
+const generateUniqueName = (state, baseName)=>{
+    const trimmedBaseName = baseName.trim();
+    // If base name is unique, use it
+    if (isNameUnique(state, trimmedBaseName)) {
+        return trimmedBaseName;
+    }
+    // Find a unique name by appending numbers
+    let counter = 1;
+    let uniqueName;
+    do {
+        uniqueName = `${trimmedBaseName} (${counter})`;
+        counter++;
+    }while (!isNameUnique(state, uniqueName))
+    return uniqueName;
+};
+const createDefaultCohort = ()=>newCohort(DEFAULT_COHORT_NAME, {}, undefined, false);
+// Entity adapter
+const cohortsAdapter = toolkit.createEntityAdapter({
+    selectId: (cohort)=>cohort.id,
+    sortComparer: (a, b)=>{
+        if (a.modifiedDatetime > b.modifiedDatetime) return -1;
+        if (a.modifiedDatetime < b.modifiedDatetime) return 1;
+        return 0;
+    }
+});
+//const DEFAULT_COHORT_ID = 'default';
+const DEFAULT_COHORT_NAME = 'Default';
+const loadCohortsFromStorage = toolkit.createAsyncThunk('cohorts/loadFromStorage', async ()=>{
+    try {
+        const cohortsMap = await cohortStorage.getAllCohorts();
+        return Object(cohortsMap).values();
+    } catch (error) {
+        console.error('Failed to load cohorts:', error);
+        return [];
+    }
+});
+const saveCohortToStorage = toolkit.createAsyncThunk('cohorts/saveToStorage', async (params, { getState })=>{
+    const { cohortId, cohortName } = params;
+    const state = getState();
+    const cohort = state.cohorts.entities[cohortId];
+    if (!cohort) {
+        throw new Error(`Cohort with id ${cohortId} not found`);
+    }
+    const cohortToSave = {
+        ...cohort,
+        name: cohortName || cohort.name,
+        saved: true,
+        modified: false,
+        modifiedDatetime: new Date().toISOString()
+    };
+    await cohortStorage.saveCohort(cohortToSave);
+    return cohortToSave;
+});
+const autoSaveCohort = toolkit.createAsyncThunk('cohorts/autoSave', async (cohortId, { getState })=>{
+    const state = getState();
+    const cohort = state.cohorts.entities[cohortId];
+    if (!cohort || !cohort.saved) {
+        throw new Error(`Cannot auto-save unsaved cohort ${cohortId}`);
+    }
+    const cohortToSave = {
+        ...cohort,
+        modified: false,
+        modifiedDatetime: new Date().toISOString()
+    };
+    await cohortStorage.saveCohort(cohortToSave);
+    return cohortToSave;
+});
+const deleteCohortFromStorage = toolkit.createAsyncThunk('cohorts/deleteFromStorage', async (cohortId)=>{
+    await cohortStorage.deleteCohort(cohortId);
+    return cohortId;
+});
+const emptyInitialState = cohortsAdapter.getInitialState({
+    currentCohortId: 'empty',
+    loading: false,
+    error: null,
+    autoSaveInProgress: []
+});
+const initialState = cohortsAdapter.addOne(emptyInitialState, createDefaultCohort());
+const updateAutoSave = (cohortId, state)=>{
+    // Add to auto-save queue if not already present
+    if (!state.autoSaveInProgress.includes(cohortId)) {
+        state.autoSaveInProgress.push(cohortId);
+    }
+};
+const cohortManagerSlice = toolkit.createSlice({
+    name: 'CohortDiscovery/CohortManager',
+    initialState,
+    reducers: {
+        setCurrentCohortId: (state, action)=>{
+            if (state.entities[action.payload]) {
+                state.currentCohortId = action.payload;
+            }
+        },
+        createNewCohort: (state, action)=>{
+            const baseName = action.payload.name || `New Cohort`;
+            const uniqueName = generateUniqueName(state, baseName);
+            const cohort = newCohort(uniqueName, action.payload.filters || {}, undefined, false);
+            cohortsAdapter.addOne(state, cohort);
+            state.currentCohortId = cohort.id;
+        },
+        removeCohort: (state, action)=>{
+            const cohortId = action.payload;
+            const totalCohorts = Object.keys(state.entities).length;
+            if (totalCohorts <= 1) {
+                cohortsAdapter.removeAll(state);
+                const defaultCohort = createDefaultCohort();
+                cohortsAdapter.addOne(state, defaultCohort);
+                state.currentCohortId = defaultCohort.id;
+                return;
+            }
+            cohortsAdapter.removeOne(state, cohortId);
+            if (state.currentCohortId === cohortId) {
+                const remainingIds = Object.keys(state.entities);
+                state.currentCohortId = remainingIds[0];
+            }
+            state.autoSaveInProgress = state.autoSaveInProgress.filter((id)=>id !== cohortId);
+        },
+        updateCohortName: (state, action)=>{
+            const { id, name } = action.payload;
+            const cohort = state.entities[id];
+            if (!cohort) return;
+            const trimmedName = name.trim();
+            // Don't update if name is empty
+            if (!trimmedName) return;
+            // Don't update if name hasn't changed
+            if (cohort.name === trimmedName) return;
+            // Check if name is unique (excluding current cohort)
+            if (!isNameUnique(state, trimmedName, id)) {
+                // Set error for duplicate name
+                state.error = `A cohort named "${trimmedName}" already exists. Please choose a different name.`;
+                return;
+            }
+            const wasSaved = cohort.saved;
+            cohortsAdapter.updateOne(state, {
+                id,
+                changes: {
+                    name: trimmedName,
+                    modified: !wasSaved,
+                    modifiedDatetime: new Date().toISOString()
+                }
+            });
+            if (wasSaved) {
+                // Add to auto-save queue if not already present
+                updateAutoSave(id, state);
+            }
+        },
+        updateCohortFilter: (state, action)=>{
+            const { index, field, filter } = action.payload;
+            const currentCohort = getCurrentCohort$1(state);
+            const wasSaved = currentCohort.saved;
+            cohortsAdapter.updateOne(state, {
+                id: currentCohort.id,
+                changes: {
+                    filters: {
+                        ...currentCohort.filters,
+                        [index]: {
+                            mode: currentCohort.filters?.[index]?.mode ?? 'and',
+                            root: {
+                                ...currentCohort.filters?.[index]?.root ?? {},
+                                [field]: filter
+                            }
+                        }
+                    },
+                    modified: !wasSaved,
+                    modifiedDatetime: new Date().toISOString()
+                }
+            });
+            if (wasSaved) {
+                // Add to auto-save queue if not already present
+                updateAutoSave(currentCohort.id, state);
+            }
+        },
+        setCohortFilter: (state, action)=>{
+            const { index, filters } = action.payload;
+            const currentCohort = getCurrentCohort$1(state);
+            const wasSaved = currentCohort.saved;
+            cohortsAdapter.updateOne(state, {
+                id: currentCohort.id,
+                changes: {
+                    filters: {
+                        ...currentCohort.filters,
+                        [index]: filters
+                    },
+                    modified: !wasSaved,
+                    modifiedDatetime: new Date().toISOString()
+                }
+            });
+            if (wasSaved) {
+                updateAutoSave(currentCohort.id, state);
+            }
+        },
+        setAllIndexFilters: (state, action)=>{
+            const currentCohort = getCurrentCohort$1(state);
+            const wasSaved = currentCohort.saved;
+            cohortsAdapter.updateOne(state, {
+                id: currentCohort.id,
+                changes: {
+                    filters: action.payload,
+                    modified: !wasSaved,
+                    modifiedDatetime: new Date().toISOString()
+                }
+            });
+            if (wasSaved) {
+                updateAutoSave(currentCohort.id, state);
+            }
+        },
+        removeCohortFilter: (state, action)=>{
+            const { index, field } = action.payload;
+            const currentCohort = getCurrentCohort$1(state);
+            const filters = currentCohort.filters?.[index]?.root;
+            const wasSaved = currentCohort.saved;
+            if (!filters) return;
+            const { [field]: _removed, ...updated } = filters;
+            cohortsAdapter.updateOne(state, {
+                id: currentCohort.id,
+                changes: {
+                    filters: {
+                        ...currentCohort.filters,
+                        [index]: {
+                            mode: currentCohort.filters[index].mode,
+                            root: updated
+                        }
+                    },
+                    modified: !wasSaved,
+                    modifiedDatetime: new Date().toISOString()
+                }
+            });
+            if (wasSaved) {
+                updateAutoSave(currentCohort.id, state);
+            }
+        },
+        clearCohortFilters: (state, action)=>{
+            const { index } = action.payload;
+            const currentCohort = getCurrentCohort$1(state);
+            const wasSaved = currentCohort.saved;
+            cohortsAdapter.updateOne(state, {
+                id: currentCohort.id,
+                changes: {
+                    filters: {
+                        ...currentCohort.filters,
+                        [index]: EmptyFilterSet
+                    },
+                    modified: !wasSaved,
+                    modifiedDatetime: new Date().toISOString()
+                }
+            });
+            if (wasSaved) {
+                updateAutoSave(currentCohort.id, state);
+            }
+        },
+        clearError: (state)=>{
+            state.error = null;
+        }
+    },
+    extraReducers: (builder)=>{
+        builder.addCase(loadCohortsFromStorage.pending, (state)=>{
+            state.loading = true;
+            state.error = null;
+        }).addCase(loadCohortsFromStorage.fulfilled, (state, action)=>{
+            state.loading = false;
+            if (action.payload.length > 0) {
+                if (Object.keys(state.entities).length === 1) {
+                    cohortsAdapter.removeOne(state, state.entities[0].id);
+                }
+                cohortsAdapter.addMany(state, action.payload);
+                const sortedCohorts = action.payload.sort((a, b)=>b.modifiedDatetime.localeCompare(a.modifiedDatetime));
+                state.currentCohortId = sortedCohorts[0].id;
+            }
+        }).addCase(loadCohortsFromStorage.rejected, (state, action)=>{
+            state.loading = false;
+            state.error = action.error.message || 'Failed to load cohorts';
+        }).addCase(saveCohortToStorage.fulfilled, (state, action)=>{
+            cohortsAdapter.updateOne(state, {
+                id: action.payload.id,
+                changes: action.payload
+            });
+        }).addCase(saveCohortToStorage.rejected, (state, action)=>{
+            state.error = action.error.message || 'Failed to save cohort';
+        }).addCase(autoSaveCohort.pending, (state, action)=>{
+            updateAutoSave(action.meta.arg, state);
+        }).addCase(autoSaveCohort.fulfilled, (state, action)=>{
+            state.autoSaveInProgress = state.autoSaveInProgress.filter((id)=>id !== action.payload.id);
+            cohortsAdapter.updateOne(state, {
+                id: action.payload.id,
+                changes: action.payload
+            });
+        }).addCase(autoSaveCohort.rejected, (state, action)=>{
+            state.autoSaveInProgress = state.autoSaveInProgress.filter((id)=>id !== action.meta.arg);
+            console.warn(`Auto-save failed for cohort ${action.meta.arg}:`, action.error.message);
+        }).addCase(deleteCohortFromStorage.fulfilled, (state, action)=>{
+            const cohortId = action.payload;
+            const totalCohorts = Object.keys(state.entities).length;
+            if (totalCohorts <= 1) {
+                cohortsAdapter.removeAll(state);
+                const defaultCohort = createDefaultCohort();
+                cohortsAdapter.addOne(state, defaultCohort);
+                state.currentCohortId = defaultCohort.id;
+            } else {
+                cohortsAdapter.removeOne(state, cohortId);
+                if (state.currentCohortId === cohortId) {
+                    const remainingIds = Object.keys(state.entities);
+                    state.currentCohortId = remainingIds[0];
+                }
+            }
+            state.autoSaveInProgress = state.autoSaveInProgress.filter((id)=>id !== cohortId);
+        });
+    }
+});
+// Helper function
+const getCurrentCohort$1 = (state)=>{
+    const cohort = state.entities[state.currentCohortId];
+    if (!cohort) {
+        return createDefaultCohort();
+    }
+    return cohort;
+};
+// Actions export
+const { setCurrentCohortId, createNewCohort, removeCohort, updateCohortName, updateCohortFilter, setCohortFilter, setAllIndexFilters, removeCohortFilter, clearCohortFilters } = cohortManagerSlice.actions;
+const cohortManagerReducer = cohortManagerSlice.reducer;
+
+const getCurrentCohort = (state)=>{
+    const cohort = state.entities[state.currentCohortId];
+    if (!cohort) {
+        return createDefaultCohort();
+    }
+    return cohort;
+};
+const autoSaveMiddleware = (store)=>(next)=>(action)=>{
+            const result = next(action);
+            const autoSaveActions = [
+                'updateCohortName',
+                'updateCohortFilter',
+                'setCohortFilter',
+                'setAllIndexFilters',
+                'removeCohortFilter',
+                'clearCohortFilters'
+            ];
+            if (autoSaveActions.some((actionType)=>action.type.includes(actionType))) {
+                const state = store.getState();
+                const currentCohort = getCurrentCohort(state.cohorts);
+                if (currentCohort.saved && !state.cohorts.autoSaveInProgress.has(currentCohort.id)) {
+                    setTimeout(()=>{
+                        const updatedState = store.getState();
+                        const updatedCohort = getCurrentCohort(updatedState.cohorts);
+                        if (updatedCohort.saved && !updatedState.cohorts.autoSaveInProgress.has(updatedCohort.id)) {
+                            store.dispatch(autoSaveCohort(updatedCohort.id));
+                        }
+                    }, 1000);
+                }
+            }
+            return result;
+        };
+
+/* eslint @typescript-eslint/no-unused-vars: 0 */ // Credit to: https://github.com/vercel/next.js/discussions/15687
+const createNoopStorage = ()=>{
+    return {
+        getItem (_key) {
+            return Promise.resolve(null);
+        },
+        setItem (_key, value) {
+            return Promise.resolve(value);
+        },
+        removeItem (_key) {
+            return Promise.resolve();
+        }
+    };
+};
+const storage = typeof window !== 'undefined' ? createWebStorage('local') : createNoopStorage();
+typeof window !== 'undefined' ? createWebStorage('session') : createNoopStorage();
+
+// Create the entity adapter
+const dataAccessRequestsAdapter = toolkit.createEntityAdapter({
+    // Select the id as the primary key
+    selectId: (request)=>request.id,
+    // Optional: Sort by request_datetime descending (newest first)
+    sortComparer: (a, b)=>new Date(b.createdDatetime).getTime() - new Date(a.createdDatetime).getTime()
+});
+// Create a slice with reducers
+const dataAccessRequestsSlice = toolkit.createSlice({
+    name: 'dataAccessRequests',
+    initialState: dataAccessRequestsAdapter.getInitialState(),
+    reducers: {
+        addDataAccessRequest: (state, action)=>{
+            const { cohortId, status, id, name, email, organization, createdDatetime, updatedDatetime } = action.payload;
+            const dataAccessRequests = newDataAccessRequest(id, status, {
+                name,
+                email,
+                organization
+            }, cohortId, createdDatetime, updatedDatetime);
+            dataAccessRequestsAdapter.addOne(state, dataAccessRequests);
+        },
+        // Set a request's status
+        setRequestStatus: (state, action)=>{
+            const { id, status } = action.payload;
+            dataAccessRequestsAdapter.updateOne(state, {
+                id,
+                changes: {
+                    status
+                }
+            });
+        }
+    }
+});
+// Export actions
+const { addDataAccessRequest, setRequestStatus } = dataAccessRequestsSlice.actions;
+// Export selectors
+const { selectAll: selectAllDataAccessRequests, selectById: selectDataAccessRequestById, selectIds: selectDataAccessRequestIds, selectEntities: selectDataAccessRequestEntities, selectTotal: selectTotalDataAccessRequests } = dataAccessRequestsAdapter.getSelectors((state)=>state.dataAccessRequests);
+const selectCohortToRequestId = toolkit.createSelector([
+    selectAllDataAccessRequests
+], (requests)=>{
+    return requests.reduce((acc, request)=>{
+        acc[request.cohortId] = request.id;
+        return acc;
+    }, {});
+});
+// Export reducer
+const dataAccessRequestsReducer = dataAccessRequestsSlice.reducer;
+
+const _APP_NAME$3 = 'CohortDiscovery';
+const persistConfig = {
+    key: _APP_NAME$3,
+    version: 1,
+    storage
+};
+// create the store, context and selector for the ProjectsCenter
+// Note the project app has a local store and context which isolates
+// the filters and other store/cache values
+const reducers = redux.combineReducers({
+    selectedIndexFacets: selectedFacetsReducer,
+    filtersExpandedState: filtersExpandedReducer,
+    facetDefinitionState: facetDefinitionsReducer,
+    cohorts: cohortManagerReducer,
+    // savedCohorts: saveCohortPersistenceReducer,
+    dataAccessRequests: dataAccessRequestsReducer
+});
+const persistedReducers = reduxPersist.persistReducer(persistConfig, reducers);
+const { id, AppStore, AppContext, useAppSelector, useAppDispatch } = core.createAppStore({
+    reducers: persistedReducers,
+    middleware: autoSaveMiddleware,
+    name: _APP_NAME$3,
+    version: '0.0.1'
+});
+
+// Selectors
+const { selectAll: selectAllCohorts, selectTotal: selectTotalCohorts, selectById: selectCohortById, selectIds: selectCohortIds } = cohortsAdapter.getSelectors((state)=>state.cohorts);
+const selectCurrentCohortId = (state)=>state.cohorts.currentCohortId;
+const selectCurrentCohort = (state)=>{
+    const { currentCohortId, entities } = state.cohorts;
+    const cohort = entities[currentCohortId];
+    if (!cohort) {
+        return createDefaultCohort();
+    }
+    return cohort;
+};
+toolkit.createSelector([
+    selectAllCohorts
+], (cohorts)=>cohorts.filter((cohort)=>cohort.saved));
+toolkit.createSelector([
+    selectAllCohorts
+], (cohorts)=>cohorts.filter((cohort)=>!cohort.saved));
+toolkit.createSelector([
+    selectAllCohorts
+], (cohorts)=>cohorts.filter((cohort)=>cohort.modified && !cohort.saved));
+toolkit.createSelector([
+    (state)=>Array.from(state.cohorts.autoSaveInProgress)
+], (autoSaveArray)=>autoSaveArray);
+toolkit.createSelector([
+    (state)=>state.cohorts.autoSaveInProgress,
+    (state, cohortId)=>cohortId
+], (autoSaveArray, cohortId)=>autoSaveArray.includes(cohortId));
+const selectCurrentCohortName = toolkit.createSelector([
+    selectCurrentCohort
+], (cohort)=>cohort.name);
+const selectCurrentCohortFilters = toolkit.createSelector([
+    selectCurrentCohort
+], (cohort)=>cohort.filters);
+const selectCurrentCohortIndexFilters = toolkit.createSelector([
+    selectCurrentCohort,
+    (state, index)=>index
+], (cohort, index)=>{
+    return cohort.filters?.[index] ?? EmptyFilterSet;
+});
+toolkit.createSelector([
+    selectAllCohorts,
+    (state, name, excludeId)=>({
+            name,
+            excludeId
+        })
+], (cohorts, params)=>{
+    const trimmedName = params.name.trim().toLowerCase();
+    return cohorts.some((cohort)=>cohort.id !== params.excludeId && cohort.name.trim().toLowerCase() === trimmedName);
+});
+const selectCohortManagerLoading = (state)=>state.cohorts.loading;
+const selectCohortIdToNameMap = toolkit.createSelector([
+    selectAllCohorts
+], (cohorts)=>{
+    return cohorts.reduce((acc, cohort)=>{
+        acc[cohort.id] = cohort.name;
+        return acc;
+    }, {});
+});
+
+const useToggleExpandFilter = ()=>{
+    const dispatch = useAppDispatch();
+    return (field, expanded)=>{
+        dispatch(toggleCategoryFilter({
+            field,
+            expanded
+        }));
+    };
+};
+const useFilterExpandedState = (field)=>{
+    return useAppSelector((state)=>selectFilterExpanded(state, field));
+};
+const useCohortFacetFilters = (index)=>{
+    return useAppSelector((state)=>selectCurrentCohortFilters(state)[index]);
+};
+const useClearFilters = (index)=>{
+    const dispatch = useAppDispatch();
+    return (field)=>{
+        dispatch(removeCohortFilter({
+            index,
+            field
+        }));
+    };
+};
+/**
+ * Update Guppy filters: process nested fields and have the final
+ * leaf be filtered
+ * @param index
+ */ const useUpdateFilters = (index)=>{
+    const dispatch = useAppDispatch();
+    // update the filter for this facet
+    return (field, filter)=>{
+        dispatch(updateCohortFilter({
+            index: index,
+            field: field,
+            filter: buildNested(field, filter)
         }));
     };
 };
 const useGetFacetFilters = (index, field)=>{
-    return useAppSelector((state)=>selectIndexedFilterByName(state, index, field) ?? {
-            operator: 'and',
-            operands: []
-        });
+    return useAppSelector(selectCurrentCohortIndexFilters(index, field) ?? {
+        operator: 'and',
+        operands: []
+    });
 };
 
 const EnumFacetPanel = ({ facet, hooks, valueLabel, showTotals = false, chartType = 'bar' })=>{
@@ -13879,12 +14596,12 @@ const EnumFacetPanel = ({ facet, hooks, valueLabel, showTotals = false, chartTyp
         label,
         field
     ]);
-    //const { data } = hooks.useGetFacetData(field);
     const chart = createChart(chartType, {
         data: visibleData,
         total: 1,
         valueType: 'count'
     });
+    const clearFilters = hooks.useClearFilter();
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
         className: "flex flex-col bg-base-max relative border-base border-1 rounded-b-md transition",
         children: [
@@ -13896,9 +14613,26 @@ const EnumFacetPanel = ({ facet, hooks, valueLabel, showTotals = false, chartTyp
                         fw: 600,
                         children: facetName
                     }),
-                    showTotals ? /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
-                        children: "Todo"
-                    }) : null
+                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        className: "flex nowrap",
+                        children: [
+                            showTotals ? /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                                children: "Todo"
+                            }) : null,
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                                label: "Clear selection",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(FacetIconButton, {
+                                    onClick: ()=>clearFilters(field),
+                                    "aria-label": "clear selection",
+                                    color: "accent.4",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(fa.FaUndo, {
+                                        size: "1.0em",
+                                        "aria-hidden": "true"
+                                    })
+                                })
+                            })
+                        ]
+                    })
                 ]
             }),
             /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -14377,7 +15111,7 @@ const NUM_COLS = 2; // TODO: add to config
  * @param {Array} facets - The list of facets to be rendered.
  * @returns {JSX.Element} The rendered component showing facets.
  */ const ChartsAndFacetsPanel = ({ index, facets })=>{
-    const cohortFilters = useAppSelector((state)=>selectIndexFilters(state, index));
+    const cohortFilters = useAppSelector((state)=>selectCurrentCohortIndexFilters(state, index));
     const { data, isSuccess} = useRoundedAggsQuery({
         type: index,
         fields: facets.map((x)=>x.field),
@@ -14449,105 +15183,483 @@ const NUM_COLS = 2; // TODO: add to config
     });
 };
 
-const SaveActionButton = ({ index })=>{
-    const [opened, { close, open }] = hooks.useDisclosure(false);
-    const filters = useAppSelector((state)=>selectCohortFilters(state));
-    const [cohortName, setCohortName] = React.useState('New Cohort');
-    const appDispatch = useAppDispatch();
-    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+const IconSize = {
+    xs: 14,
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 32,
+    'xl-2': 36
+};
+
+const DataAccessRequestForm = ({ cohortId, submitFunction, close })=>{
+    const [submitted, setSubmitted] = React.useState(false);
+    const form$1 = form.useForm({
+        initialValues: {
+            name: '',
+            organization: '',
+            email: ''
+        },
+        validate: {
+            name: form.isNotEmpty('Name is required'),
+            email: form.isEmail('Please provide a valid email')
+        }
+    });
+    const handleSubmit = async (values)=>{
+        submitFunction(cohortId, values);
+        setSubmitted(true);
+    };
+    if (submitted) {
+        return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Paper, {
+            shadow: "md",
+            p: "xl",
+            radius: "md",
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(core$1.Title, {
+                    order: 2,
+                    mb: "md",
+                    ta: "center",
+                    children: "Request Submitted"
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                    ta: "center",
+                    children: "Thank you for your data access request. We will review your submission and contact you shortly."
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(core$1.Group, {
+                    justify: "center",
+                    mt: "xl",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                        onClick: ()=>close(),
+                        children: "Dismiss"
+                    })
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Paper, {
+        radius: "md",
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(core$1.Modal, {
-                opened: opened,
-                onClose: close,
-                radius: "md",
-                title: "Save Cohort",
-                classNames: {
-                    header: 'p-1 px-4 border-base-lighter border-b-1 uppercase font-bold'
-                },
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                c: "dimmed",
+                mb: "lg",
+                children: "Please complete all fields to request access to our research data."
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Divider, {
+                mb: "lg"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Box, {
+                component: "form",
+                onSubmit: form$1.onSubmit(handleSubmit),
                 children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
-                    className: "mt-2",
+                    gap: "md",
                     children: [
                         /*#__PURE__*/ jsxRuntime.jsx(core$1.TextInput, {
-                            description: "Enter name to save cohort",
-                            label: "Cohort Name",
-                            placeholder: "New Cohort",
-                            "data-autofocus": true,
-                            onChange: (event)=>{
-                                setCohortName(event.currentTarget.value);
-                            },
-                            value: cohortName,
-                            required: true
+                            label: "Full Name",
+                            placeholder: "John Doe",
+                            withAsterisk: true,
+                            ...form$1.getInputProps('name')
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.TextInput, {
+                            label: "Organization",
+                            placeholder: "University, Organization, or Company",
+                            withAsterisk: true,
+                            ...form$1.getInputProps('organization')
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.TextInput, {
+                            label: "Email",
+                            placeholder: "your.email@institution.edu",
+                            withAsterisk: true,
+                            ...form$1.getInputProps('email')
                         }),
                         /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
                             justify: "flex-end",
-                            className: "bg-base-lighter -m-4 p-3 mt-3",
                             children: [
                                 /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                                    type: "reset",
                                     variant: "outline",
-                                    onClick: close,
-                                    children: "Cancel"
+                                    onClick: ()=>form$1.reset(),
+                                    children: "Reset"
                                 }),
                                 /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
-                                    onClick: ()=>{
-                                        appDispatch(saveCohort({
-                                            name: cohortName,
-                                            filters: filters
-                                        }));
-                                        close();
-                                    },
-                                    children: "Save"
+                                    variant: "outline",
+                                    onClick: ()=>close(),
+                                    children: submitted ? 'Close' : 'Cancel'
+                                }),
+                                !submitted && /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                                    type: "submit",
+                                    children: "Submit Request"
                                 })
                             ]
                         })
                     ]
                 })
+            })
+        ]
+    });
+};
+
+class QueryAllIndexedError extends Error {
+    constructor(message){
+        super(message);
+        this.name = 'QueryAllIndexedError';
+    }
+}
+/**
+ * Queries all resources based on the provided filters and resource fields, executing an aggregation query for each resource type.
+ *
+ * @async
+ * @function
+ * @param {IndexedFilterSet} filters - A set of filters indexed by resource types, used to refine the query results for each resource type.
+ * @param {IndexResourceField} resourceFields - A mapping of resource types to their respective field configurations, including resource paths and field details.
+ * @param {TriggerFunctionType} triggerAggsQuery - A function that triggers the aggregation query for a specific resource type and its associated fields.
+ * @param {string[]} [excludeList=['', 'no data']] - An optional list of strings to exclude from the results, with default values set to an empty string and "no data".
+ * @returns {Promise<string[]>} A promise that resolves to an array of resource paths for all queried and processed resources.
+ * @throws {QueryAllIndexedError} Throws an error if the query operation fails or an unknown error occurs during execution.
+ */ const queryAllResources = async (filters, resourceFields, triggerAggsQuery, excludeList = [
+    '',
+    'no data'
+])=>{
+    try {
+        const promises = Object.entries(resourceFields).map(([index, fieldConfig])=>triggerAggsQuery({
+                filters: filters[index],
+                type: index,
+                fields: [
+                    fieldConfig.resourceField
+                ],
+                accessibility: core.Accessibility.ALL
+            }).unwrap().then((result)=>({
+                    index,
+                    result
+                })));
+        const resources = await Promise.all(promises);
+        const resultsByIndex = resources.reduce((acc, resource)=>{
+            const filteredResults = Object.values(resource.result).map((hist)=>hist.map((h)=>h.key)).flat().filter((x)=>typeof x === 'string' && !excludeList.includes(x));
+            const uniqueResults = new Set(filteredResults);
+            const stringResults = Array.from(uniqueResults);
+            acc[resource.index] = stringResults;
+            return acc;
+        }, {});
+        return Object.entries(resultsByIndex).reduce((acc, [index, results])=>{
+            const resourcePath = resourceFields[index].resourcePath;
+            if (resourcePath) {
+                acc.push(...results.map((x)=>`${resourcePath}/${x}`));
+            } else {
+                acc.push(...results.map((x)=>`/${x}`));
+            }
+            return acc;
+        }, []);
+    } catch (error) {
+        if (error instanceof Error) {
+            throw new QueryAllIndexedError(error.message);
+        } else {
+            throw new QueryAllIndexedError('Unknown error');
+        }
+    }
+};
+
+const REQUESTOR_HTTP_ERROR_MESSAGES = {
+    401: 'You are not authorized to request access to this data. Please contact the site administrator.',
+    403: 'You do not have the correct permissions to request this resource. Please contact the site administrator.'
+};
+const submitCohortRequestAction = async (cohort, values, user, indexResources, remoteSupportService, appDispatch, getAggs, createRequestQuery)=>{
+    if (cohort && values) {
+        // need to get the resources requires by the cohort
+        try {
+            // query for resources from
+            const resources = await queryAllResources(cohort.filters, indexResources, getAggs);
+            // now we have the resources, submit a requestor request
+            const request = await createRequestQuery({
+                resource_paths: resources
+            }).unwrap();
+            // followed by a zendesk request
+            const zendeskRequestAction = core.getRemoteSupportServiceRegistry().getSupportService(remoteSupportService.service);
+            await zendeskRequestAction({
+                subject: `Request for access to ${cohort.name}`,
+                fullName: `${values.name}`,
+                email: `${values.email}`,
+                contents: `Requestor: ${values.name} (${values.email})` + `\n\nCohort: ${cohort.name}` + `\n\nResources: ${resources.join(', ')}` + `\n\nRequestor ID: ${user?.username || 'unknown'}` + `\n\nRequest ID: ${request.request_id}` + `\n\nRequest URL: ${window.location.href}` + `\n\nRequestor Email: ${values.email}` + `\n\nRequestor Name: ${values.name}` + `\n\nRequestor Organization: ${values.organization}`
+            }, remoteSupportService.configuration);
+            // update the request store
+            appDispatch(addDataAccessRequest({
+                cohortId: cohort.id,
+                id: request.request_id ?? 'unknown',
+                name: values.name,
+                email: values.email,
+                status: request.status ?? 'unknown',
+                organization: values.organization,
+                createdDatetime: request.created_time ?? 'unknown',
+                updatedDatetime: request.updated_time ?? 'unknown'
+            }));
+            // Close the modal after a successful dispatch
+            close();
+        } catch (error) {
+            if (error instanceof QueryAllIndexedError) {
+                notifications.notifications.show({
+                    title: 'Request Cohort',
+                    message: `Error while getting resources for cohort: ${error.message}`
+                });
+            } else if (core.isHttpStatusError(error)) {
+                const httpError = error;
+                notifications.notifications.show({
+                    title: 'Request Cohort',
+                    message: REQUESTOR_HTTP_ERROR_MESSAGES[httpError.status] || `Error while submitting resource request for cohorts`
+                });
+            } else if (error instanceof core.MissingServiceConfigurationError) {
+                notifications.notifications.show({
+                    title: 'Request Cohort',
+                    message: `Error while submitting resource request for cohorts: ${error.message}`
+                });
+            } else if (error instanceof Error) {
+                notifications.notifications.show({
+                    title: 'Request Cohort',
+                    message: `Error while submitting resource request for cohorts: ${error.message}`
+                });
+            } else {
+                notifications.notifications.show({
+                    title: 'Request Cohort',
+                    message: 'Unknown error while submitting resource request for cohorts'
+                });
+            }
+        }
+    }
+};
+
+const CohortManager = ({ indexResources, remoteSupportService, size = 'md' })=>{
+    const dispatch = useAppDispatch();
+    const [isEditing, setIsEditing] = React.useState(false);
+    const [editingLabel, setEditingLabel] = React.useState('');
+    const allCohorts = useAppSelector(selectAllCohorts);
+    const currentCohort = useAppSelector(selectCurrentCohort);
+    const loading = useAppSelector(selectCohortManagerLoading);
+    const appDispatch = useAppDispatch();
+    const [getGetAggs] = core.useLazyGetAggsNoFilterSelfQuery();
+    const [requestQuery] = core.useCreateRequestMutation();
+    const user = core.useCoreSelector(core.selectUserDetails);
+    const theme = core$1.useMantineTheme();
+    const iconSize = IconSize[size] || IconSize['sm'];
+    const startEditing = ()=>{
+        setIsEditing(true);
+        setEditingLabel(currentCohort.name);
+    };
+    const hasNoFilters = currentCohort ? isIndexedFilterSetEmpty(currentCohort?.filters) : true;
+    const cancelEditing = ()=>{
+        setIsEditing(false);
+        setEditingLabel('');
+    };
+    const saveEdit = ()=>{
+        if (editingLabel.trim() === '' || !currentCohort.name) return;
+        dispatch(updateCohortName({
+            id: currentCohort.id,
+            name: editingLabel
+        }));
+        setIsEditing(false);
+        setEditingLabel('');
+    };
+    const handleCreateNew = ()=>{
+        dispatch(createNewCohort({
+            name: 'New Cohort'
+        }));
+    };
+    const selectData = React.useMemo(()=>{
+        return allCohorts.map((cohort)=>({
+                label: cohort.name,
+                value: cohort.id
+            }));
+    }, [
+        allCohorts
+    ]);
+    const onSelectCohort = React.useCallback((_value, option)=>{
+        if (option) {
+            dispatch(setCurrentCohortId(option.value));
+        }
+    }, [
+        dispatch
+    ]);
+    const handleCohortAccessRequest = async (cohortId, values)=>{
+        const cohort = allCohorts.find((obj)=>obj.id === cohortId);
+        if (cohort) await submitCohortRequestAction(cohort, values, user, indexResources, remoteSupportService, appDispatch, getGetAggs, requestQuery);
+    };
+    if (loading) {
+        return /*#__PURE__*/ jsxRuntime.jsx("div", {
+            children: "Loading cohorts..."
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+        gap: "xs",
+        className: "flex pt-4 pl-2",
+        children: [
+            !isEditing ? /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Select, {
+                        data: selectData,
+                        value: currentCohort?.id ?? null,
+                        onChange: onSelectCohort
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                        label: "Rename selected cohort",
+                        position: "bottom",
+                        withArrow: true,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                            variant: "action",
+                            color: "secondary.4",
+                            onClick: startEditing,
+                            title: `Rename ${currentCohort?.name}`,
+                            "data-testid": "renameCohort",
+                            "aria-label": "Rename cohort",
+                            size: `compact-${size}`,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                                icon: "gen3:edit",
+                                height: iconSize,
+                                width: iconSize
+                            })
+                        })
+                    })
+                ]
+            }) : /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                gap: "xs",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.TextInput, {
+                        value: editingLabel,
+                        onChange: (e)=>setEditingLabel(e.target.value),
+                        placeholder: "Enter new name",
+                        onKeyDown: (e)=>{
+                            if (e.key === 'Enter' && editingLabel.trim()) saveEdit();
+                            if (e.key === 'Escape') cancelEditing();
+                        },
+                        autoFocus: true,
+                        style: {
+                            flex: 1
+                        }
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                        label: "Apply rename",
+                        position: "bottom",
+                        withArrow: true,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                            variant: "action",
+                            color: "secondary.4",
+                            onClick: saveEdit,
+                            "data-testid": "completeCohortRenameButton",
+                            "aria-label": "Complete rename cohort",
+                            disabled: editingLabel.trim() === '' || editingLabel.trim() === currentCohort.name,
+                            size: `compact-${size}`,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                                icon: "gen3:check",
+                                height: iconSize,
+                                width: iconSize
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                        label: "Cancel rename",
+                        position: "bottom",
+                        withArrow: true,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                            variant: "action",
+                            "data-testid": "cancelRenameButton",
+                            "aria-label": "Cancel rename cohort",
+                            color: theme.colors.accent[4],
+                            onClick: cancelEditing,
+                            size: `compact-${size}`,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(md.MdClose, {
+                                size: "1.5em",
+                                "aria-hidden": "true"
+                            })
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                label: "Create a new cohort",
+                position: "bottom",
+                withArrow: true,
+                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                    size: `compact-${size}`,
+                    "data-testid": "addButton",
+                    "aria-label": "Add cohort",
+                    variant: "action",
+                    color: "secondary.4",
+                    onClick: handleCreateNew,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(md.MdAdd, {
+                        size: "1.5em",
+                        "aria-hidden": "true"
+                    })
+                })
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
-                size: "sm",
-                variant: "outline",
-                color: "secondary.4",
-                disabled: !(index in filters) || Object.keys(filters[index].root).length == 0,
-                classNames: {
-                    root: 'bg-base-max'
-                },
-                onClick: open,
-                children: "Save Cohort"
-            })
-        ]
-    });
-};
-
-const ActionButtonGroup = ({ index })=>{
-    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
-        gap: "xs",
-        className: "flex pt-4 pl-2",
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx(SaveActionButton, {
-                index: index
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                label: "Delete selected cohort",
+                position: "bottom",
+                withArrow: true,
+                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                    size: `compact-${size}`,
+                    "data-testid": "uploadButton",
+                    "aria-label": "Upload cohort",
+                    variant: "action",
+                    onClick: ()=>{
+                        modals.modals.openConfirmModal({
+                            title: `Delete Cohort: ${currentCohort?.name}`,
+                            centered: true,
+                            children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Text, {
+                                size: "sm",
+                                children: [
+                                    "Are you sure you want to delete your cohort? Deleted cohorts cannot be restored.",
+                                    ' ',
+                                    currentCohort?.requests?.length > 0 ? `This cohort has ${currentCohort?.requests?.length} requests. Deleting this cohort will results in not being able to correlate nay pending requests.
+                    Are you sure you want to delete this cohort?.` : ''
+                                ]
+                            }),
+                            labels: {
+                                confirm: 'Delete Cohort',
+                                cancel: 'Cancel'
+                            },
+                            confirmProps: {
+                                color: theme.colors.accent[4]
+                            },
+                            onConfirm: ()=>{
+                                dispatch(removeCohort(currentCohort.id));
+                            }
+                        });
+                    },
+                    children: /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                        icon: "gen3:delete",
+                        height: iconSize,
+                        width: iconSize
+                    })
+                })
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
-                size: "sm",
-                variant: "outline",
-                color: "secondary.4",
-                classNames: {
-                    root: 'bg-base-max'
-                },
-                children: "Export Cohort"
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                label: hasNoFilters ? 'No Filters defined. Cannot submit request.' : 'Submit Data Access Request',
+                position: "bottom",
+                withArrow: true,
+                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                    size: `compact-${size}`,
+                    "data-testid": "cohortManager-requestCohortAccessButton",
+                    "aria-label": "Request cohort access",
+                    variant: "action",
+                    disabled: hasNoFilters,
+                    onClick: ()=>{
+                        const modelId = modals.modals.open({
+                            title: 'DATA ACCESS REQUEST',
+                            children: /*#__PURE__*/ jsxRuntime.jsx(DataAccessRequestForm, {
+                                cohortId: currentCohort.id,
+                                submitFunction: handleCohortAccessRequest,
+                                close: ()=>modals.modals.close(modelId)
+                            })
+                        });
+                    },
+                    children: /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                        icon: "gen3:request",
+                        height: iconSize,
+                        width: iconSize
+                    })
+                })
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
-                size: "sm",
-                variant: "outline",
-                color: "secondary.4",
-                classNames: {
-                    root: 'bg-base-max'
-                },
-                children: "Import Cohort"
-            })
+            null
         ]
     });
 };
 
-const CohortManager = ({ index })=>{
+const CohortQueryExpression = ({ index })=>{
     const currentCohortId = useAppSelector((state)=>selectCurrentCohortId(state));
     const currentCohortName = useAppSelector((state)=>selectCurrentCohortName(state));
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -14594,7 +15706,7 @@ const CohortManager = ({ index })=>{
     });
 };
 
-const IndexPanel = ({ dataConfig, tabs, tabTitle, emptySelection })=>{
+const IndexPanel = ({ dataConfig, tabs, tabTitle, emptySelection, indexResources, remoteSupportService })=>{
     const [activeFieldDefinitions, setActiveFieldDefinitions] = React.useState([]);
     const appDispatch = useAppDispatch();
     const index = dataConfig.dataType;
@@ -14619,7 +15731,7 @@ const IndexPanel = ({ dataConfig, tabs, tabTitle, emptySelection })=>{
         selectedFacets,
         facetDefinitions
     ]);
-    const cohortFilters = useAppSelector((state)=>selectIndexFilters(state, index));
+    const cohortFilters = useAppSelector((state)=>selectCurrentCohortIndexFilters(state, index));
     const queryFields = categories.length === 0 ? fields : activeFieldDefinitions.map((x)=>x.field);
     const { data, isSuccess, isError: isAggsQueryError } = useRoundedAggsQuery({
         type: index,
@@ -14686,10 +15798,11 @@ const IndexPanel = ({ dataConfig, tabs, tabTitle, emptySelection })=>{
     }
     return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
         children: [
-            /*#__PURE__*/ jsxRuntime.jsx(CohortManager, {
+            /*#__PURE__*/ jsxRuntime.jsx(CohortQueryExpression, {
                 index: index
             }),
             /*#__PURE__*/ jsxRuntime.jsxs(core$1.Flex, {
+                wrap: "nowrap",
                 className: "flex h-full bg-base-light pb-4 ml-4",
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx(FacetSelectionPanel, {
@@ -14703,10 +15816,11 @@ const IndexPanel = ({ dataConfig, tabs, tabTitle, emptySelection })=>{
                         }
                     }),
                     /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
-                        className: "w-2/3 mr-2 min-h-[500px]",
+                        className: "w-full md:w-[40rem] lg:w-[50rem] xl:w-[60rem] mr-2 min-h-[500px]",
                         children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(ActionButtonGroup, {
-                                index: index
+                            /*#__PURE__*/ jsxRuntime.jsx(CohortManager, {
+                                indexResources: indexResources,
+                                remoteSupportService: remoteSupportService
                             }),
                             selectedFacets.length > 0 ? /*#__PURE__*/ jsxRuntime.jsx(ChartsAndFacetsPanel, {
                                 index: index,
@@ -14741,147 +15855,6 @@ const IndexPanel = ({ dataConfig, tabs, tabTitle, emptySelection })=>{
     });
 };
 
-const IconSize = {
-    xs: 14,
-    sm: 16,
-    md: 20,
-    lg: 24,
-    xl: 32,
-    'xl-2': 36
-};
-
-const DataAccessRequestForm = ({ cohortId, submitFunction, close })=>{
-    const [submitted, setSubmitted] = React.useState(false);
-    const form$1 = form.useForm({
-        initialValues: {
-            name: '',
-            institution: '',
-            department: '',
-            address: '',
-            email: '',
-            phone: ''
-        },
-        validate: {
-            name: form.isNotEmpty('Name is required'),
-            institution: form.isNotEmpty('Institution is required'),
-            address: form.isNotEmpty('Address is required'),
-            email: form.isEmail('Please provide a valid email'),
-            phone: form.matches(/^[+]?[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4,6}$/, 'Please provide a valid phone number')
-        }
-    });
-    const handleSubmit = async (values)=>{
-        submitFunction(cohortId, values);
-        setSubmitted(true);
-    };
-    if (submitted) {
-        return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Paper, {
-            shadow: "md",
-            p: "xl",
-            radius: "md",
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsx(core$1.Title, {
-                    order: 2,
-                    mb: "md",
-                    ta: "center",
-                    children: "Request Submitted"
-                }),
-                /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
-                    ta: "center",
-                    children: "Thank you for your data access request. We will review your submission and contact you shortly."
-                }),
-                /*#__PURE__*/ jsxRuntime.jsx(core$1.Group, {
-                    justify: "center",
-                    mt: "xl",
-                    children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
-                        onClick: ()=>close(),
-                        children: "Dismiss"
-                    })
-                })
-            ]
-        });
-    }
-    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Paper, {
-        radius: "md",
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
-                c: "dimmed",
-                mb: "lg",
-                children: "Please complete all fields to request access to our research data."
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(core$1.Divider, {
-                mb: "lg"
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(core$1.Box, {
-                component: "form",
-                onSubmit: form$1.onSubmit(handleSubmit),
-                children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
-                    gap: "md",
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsx(core$1.TextInput, {
-                            label: "Full Name",
-                            placeholder: "John Doe",
-                            withAsterisk: true,
-                            ...form$1.getInputProps('name')
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(core$1.TextInput, {
-                            label: "Institution",
-                            placeholder: "University, Organization, or Company",
-                            withAsterisk: true,
-                            ...form$1.getInputProps('institution')
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(core$1.TextInput, {
-                            label: "Department",
-                            placeholder: "Research Department",
-                            ...form$1.getInputProps('department')
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Textarea, {
-                            label: "Address",
-                            placeholder: "Full institutional address",
-                            withAsterisk: true,
-                            autosize: true,
-                            minRows: 2,
-                            maxRows: 4,
-                            ...form$1.getInputProps('address')
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(core$1.TextInput, {
-                            label: "Email",
-                            placeholder: "your.email@institution.edu",
-                            withAsterisk: true,
-                            ...form$1.getInputProps('email')
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(core$1.TextInput, {
-                            label: "Phone",
-                            placeholder: "+1 (123) 456-7890",
-                            withAsterisk: true,
-                            ...form$1.getInputProps('phone')
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
-                            justify: "flex-end",
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
-                                    type: "reset",
-                                    variant: "outline",
-                                    onClick: ()=>form$1.reset(),
-                                    children: "Reset"
-                                }),
-                                /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
-                                    variant: "outline",
-                                    onClick: ()=>close(),
-                                    children: submitted ? 'Close' : 'Cancel'
-                                }),
-                                !submitted && /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
-                                    type: "submit",
-                                    children: "Submit Request"
-                                })
-                            ]
-                        })
-                    ]
-                })
-            })
-        ]
-    });
-};
-
 /**
  * Formats a given date string into a specific format.
  *
@@ -14990,8 +15963,11 @@ const commonTableSettings$1 = (size = 'sm')=>{
     };
 };
 
-const SavedCohortsTable = ({ size = 'md' })=>{
+const SavedCohortsTable = ({ indexResources, remoteSupportService, size = 'md' })=>{
     const appDispatch = useAppDispatch();
+    const [getGetAggs] = core.useLazyGetAggsNoFilterSelfQuery();
+    const [requestQuery] = core.useCreateRequestMutation();
+    const user = core.useCoreSelector(core.selectUserDetails);
     const columns = React.useMemo(()=>[
             {
                 accessorKey: 'name',
@@ -15004,7 +15980,7 @@ const SavedCohortsTable = ({ size = 'md' })=>{
                     })
             },
             {
-                accessorKey: 'created_datetime',
+                accessorKey: 'createdDatetime',
                 header: 'Modified Date',
                 Cell: ({ cell })=>/*#__PURE__*/ jsxRuntime.jsxs(core$1.Text, {
                         children: [
@@ -15014,7 +15990,7 @@ const SavedCohortsTable = ({ size = 'md' })=>{
                     })
             },
             {
-                accessorKey: 'modified_datetime',
+                accessorKey: 'modifiedDatetime',
                 header: 'Created Date',
                 Cell: ({ cell })=>/*#__PURE__*/ jsxRuntime.jsxs(core$1.Text, {
                         children: [
@@ -15045,15 +16021,9 @@ const SavedCohortsTable = ({ size = 'md' })=>{
         data,
         requestByCohortId
     ]);
-    const handleSubmission = (cohortId, values)=>{
-        if (cohortId && values) {
-            appDispatch(addDataAccessRequest({
-                cohortId,
-                userAccessInformation: values
-            }));
-            // Close the modal after successful dispatch
-            close();
-        }
+    const handleCohortAccessRequest = async (cohortId, values)=>{
+        const cohort = data.find((obj)=>obj.id === cohortId);
+        if (cohort) await submitCohortRequestAction(cohort, values, user, indexResources, remoteSupportService, appDispatch, getGetAggs, requestQuery);
     };
     const table = mantineReactTable.useMantineReactTable({
         columns,
@@ -15061,23 +16031,26 @@ const SavedCohortsTable = ({ size = 'md' })=>{
         getRowId: (originalRow)=>originalRow.id,
         ...commonTableSettings$1(),
         positionActionsColumn: 'last',
-        renderRowActions: ({ row })=>/*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+        renderRowActions: ({ row })=>{
+            const hasNoFilters = isIndexedFilterSetEmpty(row.original.filters);
+            return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
                 wrap: "nowrap",
                 gap: "xs",
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
-                        label: "Submit Data Access Request",
+                        label: hasNoFilters ? 'No Filters defined. Cannot submit request.' : 'Submit Data Access Request',
                         withArrow: true,
                         children: /*#__PURE__*/ jsxRuntime.jsx(core$1.ActionIcon, {
                             color: "accent.4",
                             variant: "transparent",
+                            disabled: hasNoFilters,
                             "aria-label": "Submit Data Access Request",
                             onClick: ()=>{
                                 const modelId = modals.modals.open({
                                     title: 'DATA ACCESS REQUEST',
                                     children: /*#__PURE__*/ jsxRuntime.jsx(DataAccessRequestForm, {
                                         cohortId: row.id,
-                                        submitFunction: handleSubmission,
+                                        submitFunction: handleCohortAccessRequest,
                                         close: ()=>modals.modals.close(modelId)
                                     })
                                 });
@@ -15117,16 +16090,21 @@ const SavedCohortsTable = ({ size = 'md' })=>{
                                 modals.modals.openConfirmModal({
                                     title: 'Delete Cohort',
                                     centered: true,
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                                    children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Text, {
                                         size: "sm",
-                                        children: "Are you sure you want to delete your cohort? Deleted cohorts cannot be restored."
+                                        children: [
+                                            "Are you sure you want to delete your cohort? Deleted cohorts cannot be restored.",
+                                            ' ',
+                                            row.original?.requested ? `This cohort has an access request. Deleting this cohort will results in not being able to correlate nay pending requests.
+                    Are you sure you want to delete this cohort?.` : ''
+                                        ]
                                     }),
                                     labels: {
                                         confirm: 'Delete Cohort',
                                         cancel: 'Cancel'
                                     },
                                     confirmProps: {
-                                        color: theme.colors.utility[2]
+                                        color: theme.colors.accent[4]
                                     },
                                     onConfirm: ()=>{
                                         appDispatch(removeCohort(row.id));
@@ -15142,7 +16120,8 @@ const SavedCohortsTable = ({ size = 'md' })=>{
                         })
                     })
                 ]
-            })
+            });
+        }
     });
     return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
         children: /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -15154,20 +16133,95 @@ const SavedCohortsTable = ({ size = 'md' })=>{
     });
 };
 
-const SavedCohortsPanel = ()=>{
+const SavedCohortsPanel = ({ indexResources, remoteSupportService })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
         children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Stack, {
             className: "w-100 m-2",
             children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Group, {
                 className: "w-100 bg-base-light p-4",
-                children: /*#__PURE__*/ jsxRuntime.jsx(SavedCohortsTable, {})
+                children: /*#__PURE__*/ jsxRuntime.jsx(SavedCohortsTable, {
+                    indexResources: indexResources,
+                    remoteSupportService: remoteSupportService
+                })
             })
         })
     });
 };
 
+const useGetCohortRequests = (resources = [])=>{
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [cohortRequests, setCohortRequests] = React.useState([]);
+    const localRequests = useAppSelector(selectAllDataAccessRequests);
+    const { data: submittedRequests, isFetching, isError, error } = core.useUserRequestQuery({
+        resource_ids: resources
+    });
+    const cohortIdToNameMap = useAppSelector(selectCohortIdToNameMap);
+    React.useEffect(()=>{
+        // Return early if we're still fetching data
+        if (isFetching) {
+            setIsLoading(true);
+            return;
+        }
+        // Once data is available, merge local and remote requests
+        if (submittedRequests) {
+            // Create a map of local requests by ID
+            const localRequestsMap = localRequests.reduce((acc, localRequest)=>{
+                acc[localRequest.id] = localRequest;
+                return acc;
+            }, {});
+            // Add cohort names to the requests
+            const requestsWithCohorts = submittedRequests.reduce((acc, request)=>{
+                if (request.request_id && Object.hasOwn(localRequestsMap, request.request_id)) {
+                    const localRequest = localRequestsMap[request.request_id];
+                    acc.push({
+                        ...localRequest,
+                        cohortName: cohortIdToNameMap[localRequest.cohortId] ?? 'Not Found',
+                        status: request?.status ?? 'unknown',
+                        updatedDatetime: request.created_time ?? localRequest.updatedDatetime,
+                        createdDatetime: request.updated_time ?? localRequest.createdDatetime
+                    });
+                } else {
+                    acc.push({
+                        ...request,
+                        cohortId: 'Not Set',
+                        email: request.username ?? 'Not Set',
+                        name: 'Not Set',
+                        organization: 'Not Set',
+                        id: request.request_id ?? 'Not Set',
+                        cohortName: 'Not Found',
+                        status: request?.status ?? 'unknown',
+                        updatedDatetime: request.created_time ?? 'Not Set',
+                        createdDatetime: request.updated_time ?? ' Not Set'
+                    });
+                }
+                return acc;
+            }, []);
+            setCohortRequests(requestsWithCohorts);
+        } else if (isError) {
+            // If there's an error fetching remote data, use local requests
+            const localRequestsWithCohorts = localRequests.map((request)=>({
+                    ...request,
+                    cohortName: request.id ? cohortIdToNameMap[request.id] : 'Unknown'
+                }));
+            setCohortRequests(localRequestsWithCohorts);
+        }
+        setIsLoading(false);
+    }, [
+        submittedRequests,
+        localRequests,
+        isFetching,
+        isError,
+        cohortIdToNameMap
+    ]);
+    return {
+        cohortRequests,
+        isLoading: isLoading || isFetching,
+        isError,
+        error
+    };
+};
 const RequestsTable = ()=>{
-    const requests = useAppSelector(selectAllDataAccessRequests);
+    const { cohortRequests, isLoading, isError } = useGetCohortRequests(undefined);
     const columns = React.useMemo(()=>[
             {
                 accessorKey: 'cohortName',
@@ -15180,7 +16234,7 @@ const RequestsTable = ()=>{
                     })
             },
             {
-                accessorKey: 'request_datetime',
+                accessorKey: 'createdDatetime',
                 header: 'Request Date',
                 Cell: ({ cell })=>/*#__PURE__*/ jsxRuntime.jsxs(core$1.Text, {
                         children: [
@@ -15189,6 +16243,16 @@ const RequestsTable = ()=>{
                         ]
                     })
             },
+            {
+                accessorKey: 'updatedDatetime',
+                header: 'Last Update',
+                Cell: ({ cell })=>/*#__PURE__*/ jsxRuntime.jsxs(core$1.Text, {
+                        children: [
+                            formatDate(cell.getValue()),
+                            " "
+                        ]
+                    })
+            },
             {
                 accessorKey: 'status',
                 header: 'Status',
@@ -15205,21 +16269,26 @@ const RequestsTable = ()=>{
                 }
             }
         ], []);
-    const cohortIdToNameMap = useAppSelector(selectCohortIdToNameMap);
-    const requestsWithCohorts = useDeepCompare.useDeepCompareMemo(()=>requests.map((request)=>{
-            return {
-                ...request,
-                cohortName: cohortIdToNameMap[request.cohortId] || 'Unknown'
-            };
-        }), [
-        requests,
-        cohortIdToNameMap
-    ]);
+    const size = 'sm';
     const table = mantineReactTable.useMantineReactTable({
         columns,
-        data: requestsWithCohorts,
-        ...commonTableSettings$1()
+        data: cohortRequests ?? [],
+        renderEmptyRowsFallback: ()=>/*#__PURE__*/ jsxRuntime.jsx(EmptyTableMessage, {
+                message: 'No requests submitted.'
+            }),
+        ...commonTableSettings$1(size),
+        state: {
+            isLoading: isLoading
+        }
     });
+    if (isError) {
+        return /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "w-full mt-24 flex flex-col items-center justify-center",
+            children: /*#__PURE__*/ jsxRuntime.jsx(ErrorCard, {
+                message: `Error retrieving user request`
+            })
+        });
+    }
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         className: "inline-block overflow-x-scroll w-full",
         children: /*#__PURE__*/ jsxRuntime.jsx(mantineReactTable.MantineReactTable, {
@@ -15229,16 +16298,18 @@ const RequestsTable = ()=>{
 };
 
 const RequestsPanel = ()=>{
-    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Stack, {
-        className: "w-100 m-2",
-        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Group, {
-            className: "w-100 bg-base-light p-4",
-            children: /*#__PURE__*/ jsxRuntime.jsx(RequestsTable, {})
+    return /*#__PURE__*/ jsxRuntime.jsx(ProtectedContent, {
+        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Stack, {
+            className: "w-100 m-2",
+            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Group, {
+                className: "w-100 bg-base-light p-4",
+                children: /*#__PURE__*/ jsxRuntime.jsx(RequestsTable, {})
+            })
         })
     });
 };
 
-const TabbedIndex = ({ config, tabsLayout = 'left' })=>{
+const TabbedIndex = ({ config, indexResources, tabsLayout = 'left' })=>{
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         className: "w-full",
         children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Tabs, {
@@ -15261,9 +16332,12 @@ const TabbedIndex = ({ config, tabsLayout = 'left' })=>{
                         children: /*#__PURE__*/ jsxRuntime.jsx(IndexPanel, {
                             dataConfig: panelConfig.dataConfig,
                             tabTitle: panelConfig.tabTitle,
+                            resourceField: panelConfig.resourceField,
                             tabs: panelConfig.tabs,
                             emptySelection: config.emptySelection,
-                            numColumns: panelConfig.numColumns ?? 2
+                            numColumns: panelConfig.numColumns ?? 2,
+                            indexResources: indexResources,
+                            remoteSupportService: config.remoteSupportService
                         })
                     }, `${panelConfig.tabTitle}-tabPanel`))
             ]
@@ -15271,8 +16345,20 @@ const TabbedIndex = ({ config, tabsLayout = 'left' })=>{
     });
 };
 
+const extractIndexResourceFromConfiguration = (config)=>{
+    return config.dataIndexes.reduce((acc, panelConfig)=>{
+        acc[panelConfig.dataConfig.dataType] = {
+            resourceField: panelConfig.resourceField,
+            resourcePath: panelConfig.resourcePath
+        };
+        return acc;
+    }, {});
+};
+
 const persistor = reduxPersist.persistStore(AppStore);
 const CohortDiscovery = (config)=>{
+    const indexResources = extractIndexResourceFromConfiguration(config);
+    useAppDispatch(loadCohortsFromStorage());
     return /*#__PURE__*/ jsxRuntime.jsx(React.Fragment, {
         children: /*#__PURE__*/ jsxRuntime.jsxs(react$1.PersistGate, {
             persistor: persistor,
@@ -15286,7 +16372,7 @@ const CohortDiscovery = (config)=>{
                     children: "Cohort Discovery"
                 }),
                 /*#__PURE__*/ jsxRuntime.jsxs(core$1.Tabs, {
-                    keepMounted: true,
+                    keepMounted: false,
                     defaultValue: "build",
                     orientation: "vertical",
                     classNames: {
@@ -15324,14 +16410,21 @@ const CohortDiscovery = (config)=>{
                                 tabTitle: config.dataIndexes[0].tabTitle,
                                 tabs: config.dataIndexes[0].tabs,
                                 emptySelection: config.emptySelection,
-                                numColumns: config.dataIndexes[0].numColumns ?? 2
+                                resourceField: config.dataIndexes[0].resourceField,
+                                numColumns: config.dataIndexes[0].numColumns ?? 2,
+                                indexResources: indexResources,
+                                remoteSupportService: config.remoteSupportService
                             }) : /*#__PURE__*/ jsxRuntime.jsx(TabbedIndex, {
-                                config: config
+                                config: config,
+                                indexResources: indexResources
                             })
                         }),
                         /*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.Panel, {
                             value: "saved",
-                            children: /*#__PURE__*/ jsxRuntime.jsx(SavedCohortsPanel, {})
+                            children: /*#__PURE__*/ jsxRuntime.jsx(SavedCohortsPanel, {
+                                indexResources: indexResources,
+                                remoteSupportService: config.remoteSupportService
+                            })
                         }),
                         /*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.Panel, {
                             value: "request",
@@ -17808,7 +18901,8 @@ const DiscoveryPage = ({ headerProps, footerProps, discoveryConfig })=>{
         headerData: {
             title: 'Gen3 Discovery Page',
             content: 'Discovery Data',
-            key: 'gen3-discovery-page'
+            key: 'gen3-discovery-page',
+            ...discoveryConfig?.headerMetadata ? discoveryConfig.headerMetadata : {}
         },
         children: /*#__PURE__*/ jsxRuntime.jsx(Discovery, {
             discoveryConfig: discoveryConfig
@@ -17863,7 +18957,8 @@ const QueryPage = ({ headerProps, footerProps, queryProps })=>{
         headerData: {
             title: 'Gen3 Query Page',
             content: 'Query page',
-            key: 'gen3-query-page'
+            key: 'gen3-query-page',
+            ...queryProps?.headerMetadata ? queryProps.headerMetadata : {}
         },
         children: /*#__PURE__*/ jsxRuntime.jsx(QueryPanel, {
             graphQLEndpoint: queryProps.graphQLEndpoint
@@ -18035,7 +19130,8 @@ const LandingPage = ({ headerProps, footerProps, landingPage })=>{
         headerData: {
             title: 'Gen3 Home Page',
             content: 'Home page',
-            key: 'gen3-home-page'
+            key: 'gen3-home-page',
+            ...landingPage?.headerMetadata ? landingPage.headerMetadata : {}
         },
         children: /*#__PURE__*/ jsxRuntime.jsx("div", {
             className: "flex justify-items-center w-full",
@@ -18058,7 +19154,7 @@ const LandingPageGetServerSideProps = async ()=>{
     };
 };
 
-const ExplorerPage = ({ headerProps, footerProps, explorerConfig, tabsLayout, sharedFiltersMap })=>{
+const ExplorerPage = ({ headerProps, footerProps, explorerConfig, headerMetadata, tabsLayout, sharedFiltersMap })=>{
     if (explorerConfig === undefined) {
         return /*#__PURE__*/ jsxRuntime.jsx(core$1.Center, {
             maw: 400,
@@ -18075,7 +19171,8 @@ const ExplorerPage = ({ headerProps, footerProps, explorerConfig, tabsLayout, sh
         headerData: {
             title: 'Gen3 Explorer Page',
             content: 'Explorer Page',
-            key: 'gen3-explorer-page'
+            key: 'gen3-explorer-page',
+            ...headerMetadata ? headerMetadata : {}
         },
         children: /*#__PURE__*/ jsxRuntime.jsx(CohortBuilder, {
             tabsLayout: tabsLayout,
@@ -18148,7 +19245,10 @@ const ExplorerPageGetServerSideProps = async ()=>{
             return {
                 props: {
                     ...await getNavPageLayoutPropsFromConfig(),
-                    explorerConfig: cohortBuilderConfiguration
+                    explorerConfig: cohortBuilderConfiguration,
+                    headerMetadata: {
+                        ...cohortBuilderConfiguration?.headerMetadata
+                    }
                 }
             };
         }
@@ -18159,6 +19259,7 @@ const ExplorerPageGetServerSideProps = async ()=>{
                 sharedFiltersMap: sharedFiltersMap,
                 tabsLayout: cohortBuilderConfiguration?.tabsLayout ?? 'left',
                 explorerConfig: cohortBuilderConfiguration.explorerConfig,
+                headerMetadata: cohortBuilderConfiguration.headerMetadata,
                 accessControl: {
                     ...DefaultAccessControlConfiguration,
                     ...cohortBuilderConfiguration.accessControl ?? {}
@@ -18187,7 +19288,10 @@ const ExplorerPageGetServerSidePropsForConfigId = async (context)=>{
             return {
                 props: {
                     ...await getNavPageLayoutPropsFromConfig(),
-                    explorerConfig: cohortBuilderConfiguration
+                    explorerConfig: cohortBuilderConfiguration,
+                    headerMetadata: {
+                        ...cohortBuilderConfiguration?.headerMetadata
+                    }
                 }
             };
         }
@@ -18198,6 +19302,7 @@ const ExplorerPageGetServerSidePropsForConfigId = async (context)=>{
                 sharedFiltersMap: sharedFiltersMap,
                 tabsLayout: cohortBuilderConfiguration?.tabsLayout ?? 'left',
                 explorerConfig: cohortBuilderConfiguration.explorerConfig,
+                headerMetadata: cohortBuilderConfiguration.headerMetadata,
                 accessControl: {
                     ...DefaultAccessControlConfiguration,
                     ...cohortBuilderConfiguration.accessControl ?? {}
@@ -19138,7 +20243,8 @@ const ProfilePage = ({ headerProps, footerProps, profileConfig })=>{
         headerData: {
             title: 'Gen3 Profile Page',
             content: 'Profile page',
-            key: 'gen3-profile-page'
+            key: 'gen3-profile-page',
+            ...profileConfig?.headerMetadata ? profileConfig.headerMetadata : {}
         },
         children: /*#__PURE__*/ jsxRuntime.jsx(Profile, {
             profileConfig: profileConfig
@@ -19165,7 +20271,8 @@ const LoginPage = ({ headerProps, footerProps, loginConfig })=>{
         headerData: {
             title: 'Gen3 Login Page',
             content: 'Login page',
-            key: 'gen3-login-page'
+            key: 'gen3-login-page',
+            ...loginConfig?.headerMetadata ? loginConfig.headerMetadata : {}
         },
         children: /*#__PURE__*/ jsxRuntime.jsx(LoginPanel, {
             ...loginConfig
@@ -19195,7 +20302,8 @@ const DictionaryPage = ({ headerProps, footerProps, config })=>{
         headerData: {
             title: 'Gen3 DataDictionary Page',
             content: 'Data Dictionary',
-            key: 'gen3-data-dictionary-page'
+            key: 'gen3-data-dictionary-page',
+            ...config?.headerMetadata ? config.headerMetadata : {}
         },
         children: /*#__PURE__*/ jsxRuntime.jsx(DictionaryWithContext, {
             config: config
@@ -20281,7 +21389,8 @@ const WorkspacePage = ({ headerProps, footerProps, workspaceProps })=>{
         headerData: {
             title: 'Gen3 Workspace Page',
             content: 'Workspace page',
-            key: 'gen3-workspace-page'
+            key: 'gen3-workspace-page',
+            ...workspaceProps?.headerMetadata ? workspaceProps.headerMetadata : {}
         },
         children: /*#__PURE__*/ jsxRuntime.jsx(Workspace, {
             config: workspaceProps
@@ -23446,7 +24555,8 @@ const CrosswalkPage = ({ headerProps, footerProps, config })=>{
         headerData: {
             title: 'Gen3 Crosswalk Page',
             content: 'Crosswalk Data',
-            key: 'gen3-crosswalk-page'
+            key: 'gen3-crosswalk-page',
+            ...config?.headerMetadata ? config.headerMetadata : {}
         },
         children: /*#__PURE__*/ jsxRuntime.jsx(CrosswalkPanel, {
             ...config
@@ -23936,6 +25046,7 @@ exports.analysisApiCohortDiscovery = analysisApiCohortDiscovery;
 exports.capitalize = capitalize;
 exports.computeRowSpan = computeRowSpan;
 exports.convertMinutesToMilliseconds = convertMinutesToMilliseconds;
+exports.convertPathsToTree = convertPathsToTree;
 exports.convertSecondsToMilliseconds = convertSecondsToMilliseconds;
 exports.create10ColorAccessibleContrast = create10ColorAccessibleContrast;
 exports.create10ColorPallet = create10ColorPallet;