@gen3/frontend 0.10.53 → 0.10.55

package/dist/cjs/index.js

@@ -645,10 +645,10 @@ const LoginButton = ({ icon = /*#__PURE__*/ jsxRuntime.jsx(md.MdLogin, {
     });
 };
 
-const CardContainer = ({ children })=>/*#__PURE__*/ jsxRuntime.jsx("div", {
-        className: "flex justify-center pt-2 items-center",
+const CardContainer = ({ children, width = 'w-1/2' })=>/*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: `flex justify-center pt-2 items-center m-2 ${width ?? ''}`,
         children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Card, {
-            shadow: "sm",
+            shadow: "xs",
             p: "md",
             className: "bg-base-lightest border-2 border-base-lighter",
             children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Group, {
@@ -665,7 +665,8 @@ const MessageText = ({ message, color })=>/*#__PURE__*/ jsxRuntime.jsx(core$1.Te
         fw: 500,
         children: message
     });
-const MessageCard = ({ message, icon, size = 'lg', color = 'utility.5' })=>/*#__PURE__*/ jsxRuntime.jsxs(CardContainer, {
+const MessageCard = ({ message, icon, size = 'lg', color = 'utility.5', width = 'w-1/2' })=>/*#__PURE__*/ jsxRuntime.jsxs(CardContainer, {
+        width: width,
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(core$1.ThemeIcon, {
                 color: color,
@@ -2752,7 +2753,7 @@ const NavigationLogo = ({ src, title, description, width, height, divider = fals
                     width: width ?? undefined,
                     height: height ?? undefined,
                     fill: !width && !height,
-                    src: `${basePath}${src}`,
+                    src: `${src}`,
                     alt: description ?? title ?? 'link back to homepage'
                 })
             }),
@@ -3379,14 +3380,14 @@ var AccessLevel;
 const DataAccessCellRenderer = ({ value })=>{
     if (value === AccessLevel.PENDING) {
         return /*#__PURE__*/ jsxRuntime.jsx(lu.LuClock, {
-            color: "green",
-            children: "You have access to this study."
+            color: "yellow",
+            children: "Your access to this study is pending."
         });
     }
     if (value === AccessLevel.NOT_AVAILABLE) {
         return /*#__PURE__*/ jsxRuntime.jsx(lu.LuCircleSlash, {
-            color: "green",
-            children: "You have access to this study."
+            color: "red",
+            children: "Cannot determine access to this study. Please contact the study owner."
         });
     }
     if (value === AccessLevel.ACCESSIBLE) {
@@ -3397,8 +3398,8 @@ const DataAccessCellRenderer = ({ value })=>{
     }
     if (value === AccessLevel.UNACCESSIBLE) {
         return /*#__PURE__*/ jsxRuntime.jsx(lu.LuLock, {
-            color: "green",
-            children: "You have access to this study."
+            color: "red",
+            children: "You do not have access to this study."
         });
     }
     return /*#__PURE__*/ jsxRuntime.jsx(React.Fragment, {});
@@ -5084,7 +5085,7 @@ const BuildSummaryStatisticPanel = (summaries = [])=>{
         }
     });
 };
-const columns = [
+const columns$3 = [
     'grid-cols-0',
     'grid-cols-1',
     'grid-cols-2',
@@ -5099,7 +5100,7 @@ const columns = [
 ];
 const SummaryStatisticPanel = ({ summaries })=>{
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        className: `grid ${columns[summaries.length]} grow shrink-0 divide-x-2 divide-accent`,
+        className: `grid ${columns$3[summaries.length]} grow shrink-0 divide-x-2 divide-accent`,
         children: BuildSummaryStatisticPanel(summaries)
     });
 };
@@ -8048,7 +8049,7 @@ const isRangeOperation = (x)=>{
 const isNestedFilter = (x)=>{
     return 'path' in x;
 };
-const IncludeExcludeQueryElement = ({ index, field, path, operator, operands })=>{
+const IncludeExcludeQueryElement = ({ index, field, path, operator, operands, displayOnly = false })=>{
     const dispatch = core.useCoreDispatch();
     const [queryExpressionsExpanded, setQueryExpressionsExpanded] = React.useContext(QueryExpressionsExpandedContext);
     const currentCohortId = core.useCoreSelector((state)=>core.selectCurrentCohortId(state));
@@ -8111,12 +8112,12 @@ const IncludeExcludeQueryElement = ({ index, field, path, operator, operands })=
                             variant: "filled",
                             color: "accent.5",
                             size: "md",
-                            pr: 0,
-                            className: "normal-case items-center max-w-[162px] cursor-pointer pl-2 pr-0 hover:bg-accent-darker",
-                            rightSection: /*#__PURE__*/ jsxRuntime.jsx(RemoveButton, {
+                            className: `normal-case items-center max-w-[162px] cursor-pointer hover:bg-accent-darker pl-2 ${displayOnly ? 'pr-3' : 'pr-0'}`,
+                            rightSection: !displayOnly && /*#__PURE__*/ jsxRuntime.jsx(RemoveButton, {
                                 value: value
                             }),
                             onClick: ()=>{
+                                if (displayOnly) return;
                                 const newOperands = operandsArray.filter((o)=>o !== x);
                                 const fieldToUpdate = path && path != '.' ? [
                                     path,
@@ -8158,7 +8159,7 @@ const IncludeExcludeQueryElement = ({ index, field, path, operator, operands })=
         ]
     });
 };
-const ComparisonElement = ({ index, filter, showLabel = true })=>{
+const ComparisonElement = ({ index, filter, showLabel = true, displayOnly = false })=>{
     const coreDispatch = core.useCoreDispatch();
     // fix the code below
     const handleKeepMember = (keep)=>{
@@ -8178,7 +8179,10 @@ const ComparisonElement = ({ index, filter, showLabel = true })=>{
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx("button", {
                         className: "h-[25px] w-[25px] mx-2 rounded-[50%] bg-accent-cool-lightest text-accent-cool-lightest-contrast pb-1",
-                        onClick: ()=>handleKeepMember(filter),
+                        onClick: ()=>{
+                            if (displayOnly) return;
+                            handleKeepMember(filter);
+                        },
                         children: filter.operator
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx(QueryRepresentationText, {
@@ -8231,7 +8235,7 @@ const ClosedRangeQueryElement = ({ index, lower, upper, op = 'and' })=>{
         })
     });
 };
-const QueryElement = ({ index, field, path, children })=>{
+const QueryElement = ({ index, field, path, children, displayOnly = false })=>{
     const coreDispatch = core.useCoreDispatch();
     const [, setQueryExpressionsExpanded] = React.useContext(QueryExpressionsExpandedContext);
     const currentCohortId = core.useCoreSelector((state)=>core.selectCurrentCohortId(state));
@@ -8253,7 +8257,7 @@ const QueryElement = ({ index, field, path, children })=>{
     return /*#__PURE__*/ jsxRuntime.jsxs(QueryItemContainer, {
         children: [
             children,
-            /*#__PURE__*/ jsxRuntime.jsx("button", {
+            !displayOnly && /*#__PURE__*/ jsxRuntime.jsx("button", {
                 className: "bg-accent-vivid p-0 m-0 h-full rounded-r-sm text-white hover:bg-accent-darker",
                 onClick: handleRemoveFilter,
                 "aria-label": `remove ${core.fieldNameToTitle(field)}`,
@@ -8268,85 +8272,102 @@ const QueryElement = ({ index, field, path, children })=>{
 /**
  *  Processes a Filter into a component representation
  */ class CohortFilterToComponent {
-    constructor(index, path = '.'){
+    constructor(index, path = '.', displayOnly = false){
         this.handleIncludes = (f)=>/*#__PURE__*/ jsxRuntime.jsx(QueryElement, {
                 ...f,
                 index: this.index,
                 path: this.path,
+                displayOnly: this.displayOnly,
                 children: /*#__PURE__*/ jsxRuntime.jsx(IncludeExcludeQueryElement, {
                     ...f,
                     index: this.index,
-                    path: this.path
+                    path: this.path,
+                    displayOnly: this.displayOnly
                 })
             }, f.field);
         this.handleExcludes = (f)=>/*#__PURE__*/ jsxRuntime.jsx(QueryElement, {
                 ...f,
                 index: this.index,
                 path: this.path,
+                displayOnly: this.displayOnly,
                 children: /*#__PURE__*/ jsxRuntime.jsx(IncludeExcludeQueryElement, {
                     ...f,
                     index: this.index,
-                    path: this.path
+                    path: this.path,
+                    displayOnly: this.displayOnly
                 })
             }, f.field);
         this.handleEquals = (f)=>/*#__PURE__*/ jsxRuntime.jsx(QueryElement, {
                 ...f,
                 index: this.index,
                 path: this.path,
+                displayOnly: this.displayOnly,
                 children: /*#__PURE__*/ jsxRuntime.jsx(ComparisonElement, {
                     filter: f,
-                    index: this.index
+                    index: this.index,
+                    displayOnly: this.displayOnly
                 })
             }, f.field);
         this.handleNotEquals = (f)=>/*#__PURE__*/ jsxRuntime.jsx(QueryElement, {
                 ...f,
                 index: this.index,
                 path: this.path,
+                displayOnly: this.displayOnly,
                 children: /*#__PURE__*/ jsxRuntime.jsx(ComparisonElement, {
                     filter: f,
-                    index: this.index
+                    index: this.index,
+                    displayOnly: this.displayOnly
                 })
             }, f.field);
         this.handleLessThan = (f)=>/*#__PURE__*/ jsxRuntime.jsx(QueryElement, {
                 ...f,
                 index: this.index,
                 path: this.path,
+                displayOnly: this.displayOnly,
                 children: /*#__PURE__*/ jsxRuntime.jsx(ComparisonElement, {
                     filter: f,
-                    index: this.index
+                    index: this.index,
+                    displayOnly: this.displayOnly
                 })
             }, f.field);
         this.handleLessThanOrEquals = (f)=>/*#__PURE__*/ jsxRuntime.jsx(QueryElement, {
                 ...f,
                 index: this.index,
                 path: this.path,
+                displayOnly: this.displayOnly,
                 children: /*#__PURE__*/ jsxRuntime.jsx(ComparisonElement, {
                     filter: f,
-                    index: this.index
+                    index: this.index,
+                    displayOnly: this.displayOnly
                 })
             }, f.field);
         this.handleGreaterThan = (f)=>/*#__PURE__*/ jsxRuntime.jsx(QueryElement, {
                 ...f,
                 index: this.index,
                 path: this.path,
+                displayOnly: this.displayOnly,
                 children: /*#__PURE__*/ jsxRuntime.jsx(ComparisonElement, {
                     filter: f,
-                    index: this.index
+                    index: this.index,
+                    displayOnly: this.displayOnly
                 })
             }, f.field);
         this.handleGreaterThanOrEquals = (f)=>/*#__PURE__*/ jsxRuntime.jsx(QueryElement, {
                 ...f,
                 index: this.index,
                 path: this.path,
+                displayOnly: this.displayOnly,
                 children: /*#__PURE__*/ jsxRuntime.jsx(ComparisonElement, {
                     filter: f,
-                    index: this.index
+                    index: this.index,
+                    displayOnly: this.displayOnly
                 })
             }, f.field);
         this.handleExists = (f)=>/*#__PURE__*/ jsxRuntime.jsx(QueryElement, {
                 ...f,
                 index: this.index,
                 path: this.path,
+                displayOnly: this.displayOnly,
                 children: /*#__PURE__*/ jsxRuntime.jsx(ExistsElement, {
                     ...f
                 })
@@ -8355,6 +8376,7 @@ const QueryElement = ({ index, field, path, children })=>{
                 ...f,
                 index: this.index,
                 path: this.path,
+                displayOnly: this.displayOnly,
                 children: /*#__PURE__*/ jsxRuntime.jsx(ExistsElement, {
                     ...f
                 })
@@ -8363,9 +8385,11 @@ const QueryElement = ({ index, field, path, children })=>{
                 ...f,
                 index: this.index,
                 path: this.path,
+                displayOnly: this.displayOnly,
                 children: /*#__PURE__*/ jsxRuntime.jsx(IncludeExcludeQueryElement, {
                     ...f,
-                    index: this.index
+                    index: this.index,
+                    displayOnly: this.displayOnly
                 })
             }, f.field);
         this.handleIntersection = (f)=>{
@@ -8399,17 +8423,18 @@ const QueryElement = ({ index, field, path, children })=>{
                 return convertFilterToComponent(newOp, this.index, [
                     op.path,
                     op.operand.path
-                ].join('.'));
+                ].join('.'), this.displayOnly);
             } else {
-                return convertFilterToComponent(op.operand, this.index, op.path);
+                return convertFilterToComponent(op.operand, this.index, op.path, this.displayOnly);
             }
         };
         this.index = index;
         this.path = path;
+        this.displayOnly = displayOnly;
     }
 }
-const convertFilterToComponent = (filter, index, path = '.')=>{
-    const handler = new CohortFilterToComponent(index, path);
+const convertFilterToComponent = (filter, index, path = '.', displayOnly = false)=>{
+    const handler = new CohortFilterToComponent(index, path, displayOnly);
     return core.handleOperation(handler, filter);
 };
 
@@ -8619,7 +8644,7 @@ const reducer = (state, action)=>{
             }
     }
 };
-const QueryExpressionSection = ({ index, filters, currentCohortName, currentCohortId })=>{
+const QueryExpressionSection = ({ index, filters, currentCohortName, currentCohortId, displayOnly = false, showTitle = true })=>{
     const [expandedState, setExpandedState] = React.useReducer(reducer, {});
     const [filtersSectionCollapsed, setFiltersSectionCollapsed] = React.useState(true);
     const filtersRef = React.useRef(null);
@@ -8676,14 +8701,14 @@ const QueryExpressionSection = ({ index, filters, currentCohortName, currentCoho
                         "data-testid": "text-cohort-filters-top-row",
                         className: "flex flex-row py-2 items-center border-secondary-darkest border-b-1",
                         children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(OverflowTooltippedLabel, {
+                            showTitle && /*#__PURE__*/ jsxRuntime.jsx(OverflowTooltippedLabel, {
                                 label: currentCohortName,
                                 className: "font-bold text-secondary-contrast-darkest ml-3 max-w-[260px]",
                                 children: currentCohortName
                             }),
                             /*#__PURE__*/ jsxRuntime.jsxs(React.Fragment, {
                                 children: [
-                                    /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                    !displayOnly && /*#__PURE__*/ jsxRuntime.jsx("button", {
                                         "data-testid": "button-clear-all-cohort-filters",
                                         className: `text-sm font-montserrat ml-2 px-1 hover:bg-primary-darkest hover:text-primary-content-lightest hover:rounded-md ${noFilters ? 'hidden' : 'cursor-pointer text-secondary-contrast-darkest'}`,
                                         onClick: clearAllFilters,
@@ -8768,7 +8793,7 @@ const QueryExpressionSection = ({ index, filters, currentCohortName, currentCoho
                             className: "font-content",
                             children: "No filters currently applied."
                         }) : Object.keys(filters.root).map((k)=>{
-                            return convertFilterToComponent(filters.root[k], index);
+                            return convertFilterToComponent(filters.root[k], index, '.', displayOnly);
                         })
                     })
                 ]
@@ -10395,7 +10420,6 @@ const NotebookCard = ({ info })=>{
     const { status } = core.useCoreSelector(core.selectWorkspaceStatusFromService);
     const requestedStatus = core.useCoreSelector(core.selectRequestedWorkspaceStatus);
     const workspaceId = core.useCoreSelector(core.selectActiveWorkspaceId);
-    console.log('NotebookCard: ', requestedStatus, workspaceId, status);
     return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Card, {
         withBorder: true,
         radius: "xs",
@@ -11130,7 +11154,7 @@ const AnalysisCenter = ({ tools, showFilterAndSort = false })=>{
                                         className: "p-0 rounded-sm",
                                         children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Image, {
                                             component: Image,
-                                            src: `/images/apps/${image}`,
+                                            src: `${image}`,
                                             alt: `${title} image`,
                                             height: 1000,
                                             width: 1000,
@@ -11144,7 +11168,7 @@ const AnalysisCenter = ({ tools, showFilterAndSort = false })=>{
                                                 className: "p-0.5 rounded-sm bg-base-lightest ml-5 border-2 border-base",
                                                 children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Image, {
                                                     component: Image,
-                                                    src: `/icons/apps/${icon}`,
+                                                    src: `${icon}`,
                                                     alt: `${title} logo`,
                                                     width: 40,
                                                     height: 40,
@@ -11225,7 +11249,7 @@ class FilesystemContent {
     }
     async get(filepath) {
         try {
-            return await JSON.parse(fs.readFileSync(path.join(this.rootPath, filepath)).toString('utf-8'));
+            return await JSON.parse(fs.readFileSync(path.join(this.rootPath, filepath)).toString('utf8'));
         } catch (err) {
             throw new Error(`Cannot process ${filepath}`);
         }
@@ -16648,7 +16672,6 @@ const AnalysisCardEditor = ()=>{
                 });
                 if (Array.isArray(withImages)) {
                     updateHistory(withImages);
-                    console.log('Imported cards:', withImages);
                 }
             } catch (error) {
                 alert('Invalid file format');
@@ -17183,6 +17206,7 @@ const AISearchPageGetServerSideProps = async ()=>{
 };
 
 const NotebookLitePage = ({ headerProps, footerProps })=>{
+    const router$1 = router.useRouter();
     return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
         footerProps,
         headerProps,
@@ -17195,7 +17219,7 @@ const NotebookLitePage = ({ headerProps, footerProps })=>{
             className: "flex justify-items-center w-full",
             children: /*#__PURE__*/ jsxRuntime.jsx("iframe", {
                 allow: "cross-origin",
-                src: "/jupyter/index.html",
+                src: `${router$1.basePath}/jupyter/index.html`,
                 width: "100%",
                 height: "100%",
                 title: "client notebook"
@@ -17214,6 +17238,1834 @@ const NotebookLitePageGetStaticProps = async ()=>{
     };
 };
 
+const getDataLibraryItem = (dataLibrary, listId, dataId, fileId)=>{
+    if (!(listId in dataLibrary)) return undefined;
+    if (!(dataId in dataLibrary[listId].items)) return undefined;
+    const datasetOrCohort = dataLibrary[listId].items[dataId];
+    const { name } = datasetOrCohort;
+    if (core.isCohortItem(datasetOrCohort)) {
+        return {
+            ...datasetOrCohort,
+            datasetId: dataId,
+            datasetName: name
+        };
+    } else {
+        if (!fileId) return undefined;
+        if (!(fileId in datasetOrCohort.items)) return undefined;
+        if (core.isFileItem(datasetOrCohort.items[fileId])) {
+            return {
+                datasetName: name,
+                datasetId: dataId,
+                ...datasetOrCohort.items[fileId]
+            };
+        }
+        return undefined;
+    }
+};
+const getSelectionPaths = (selections)=>{
+    const paths = [];
+    for (const [listId, listMembers] of Object.entries(selections)){
+        for (const [memberId, member] of Object.entries(listMembers)){
+            if (Object.keys(member.objectIds).length === 0) {
+                // If there are no objectIds, add a path with undefined objectId
+                paths.push({
+                    listId,
+                    memberId
+                });
+            } else {
+                for (const [objectId, isSelected] of Object.entries(member.objectIds)){
+                    if (isSelected) {
+                        paths.push({
+                            listId,
+                            memberId,
+                            objectId
+                        });
+                    }
+                }
+            }
+        }
+    }
+    return paths;
+};
+const getSelectedItemsFromDataLibrary = (selections, dataLibrary)=>{
+    const selectedPaths = getSelectionPaths(selections);
+    const uniqueItems = new Map();
+    selectedPaths.forEach((path)=>{
+        const item = getDataLibraryItem(dataLibrary, path.listId, path.memberId, path.objectId);
+        if (item) {
+            const key = getUniqueItemKey(item);
+            uniqueItems.set(key, item);
+        }
+    });
+    return Array.from(uniqueItems.values());
+};
+const getUniqueItemKey = (item)=>{
+    if (core.isCohortItem(item)) {
+        // For CohortItems
+        return `cohort_${item.datasetId}`;
+    } else {
+        // For FileItems
+        return `file_${item.datasetId}_${item.id}`;
+    }
+};
+
+// Create the context
+const DataLibrarySelectionContext = /*#__PURE__*/ React.createContext(undefined);
+// Reducer function
+const dataLibrarySelectionReducer = (selections, action)=>{
+    switch(action.type){
+        case 'UPDATE_DATA_LIBRARY_SELECTION':
+            return {
+                ...selections,
+                [action.payload.listId]: action.payload.members
+            };
+        case 'UPDATE_DATALIST_MEMBER_SELECTION':
+            if (Object.keys(action.payload.selection).length === 0) {
+                // need to remove the dataset
+                const { [action.payload.listId]: { [action.payload.memberId]: _unused, ...restState } } = selections;
+                if (Object.keys(restState).length === 0) {
+                    const { [action.payload.listId]: _unused2, ...restList } = selections;
+                    return restList;
+                }
+                return {
+                    ...selections,
+                    [action.payload.listId]: {
+                        ...restState
+                    }
+                };
+            }
+            return {
+                ...selections,
+                [action.payload.listId]: {
+                    ...selections[action.payload.listId],
+                    [action.payload.memberId]: {
+                        id: action.payload.memberId,
+                        objectIds: action.payload.selection
+                    }
+                }
+            };
+        case 'DELETE_DATA_LIBRARY_LIST':
+            {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const { [action.payload.listId]: _unused, ...restState } = selections;
+                return restState;
+            }
+        case 'DELETE_DATA_LIBRARY_LIST_MEMBER':
+            {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                if (!(action.payload.listId in selections)) return selections;
+                const { [action.payload.listId]: { [action.payload.memberId]: _unused, ...restState } } = selections;
+                return {
+                    ...selections,
+                    [action.payload.listId]: {
+                        ...restState
+                    }
+                };
+            }
+        case 'CLEAR_DATA_LIBRARY_SELECTION':
+            return {};
+        default:
+            return selections;
+    }
+};
+// Provider component
+const DataLibrarySelectionProvider = ({ children })=>{
+    const [selections, dispatch] = React.useReducer(dataLibrarySelectionReducer, {});
+    const [gatheredItems, setGatheredItems] = React.useState([]);
+    const updateSelections = (listId, members)=>{
+        dispatch(updateDataLibrarySelection(listId, members));
+    };
+    const updateListMemberSelections = (listId, memberId, selection)=>{
+        dispatch(updateDataLibraryListMemberSelection(listId, memberId, selection));
+    };
+    const clearSelections = ()=>{
+        dispatch(clearDataLibrarySelection());
+    };
+    const removeList = (listId)=>{
+        dispatch(removeDataLibrarySelection(listId));
+    };
+    const removeListMember = (listId, memberId)=>{
+        dispatch(removeDataLibraryMemberSelection(listId, memberId));
+    };
+    const gatherSelectedItems = (dataLibrary)=>{
+        if (dataLibrary) {
+            const gatheredItems = getSelectedItemsFromDataLibrary(selections, dataLibrary);
+            setGatheredItems(gatheredItems);
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(DataLibrarySelectionContext.Provider, {
+        value: {
+            selections,
+            gatheredItems,
+            dispatch,
+            updateSelections,
+            updateListMemberSelections,
+            clearSelections,
+            removeList,
+            removeListMember,
+            gatherSelectedItems
+        },
+        children: children
+    });
+};
+// Custom hook for using the data library
+const useDataLibrarySelection = ()=>{
+    const context = React.useContext(DataLibrarySelectionContext);
+    if (!context) {
+        throw new Error('useDataLibrary must be used within a DataLibraryProvider');
+    }
+    return context;
+};
+const updateDataLibrarySelection = (listId, members)=>({
+        type: 'UPDATE_DATA_LIBRARY_SELECTION',
+        payload: {
+            listId,
+            members
+        }
+    });
+const updateDataLibraryListMemberSelection = (listId, memberId, selection)=>({
+        type: 'UPDATE_DATALIST_MEMBER_SELECTION',
+        payload: {
+            listId,
+            memberId,
+            selection
+        }
+    });
+const clearDataLibrarySelection = ()=>({
+        type: 'CLEAR_DATA_LIBRARY_SELECTION'
+    });
+const removeDataLibrarySelection = (listId)=>({
+        type: 'DELETE_DATA_LIBRARY_LIST',
+        payload: {
+            listId
+        }
+    });
+const removeDataLibraryMemberSelection = (listId, memberId)=>({
+        type: 'DELETE_DATA_LIBRARY_LIST_MEMBER',
+        payload: {
+            listId,
+            memberId
+        }
+    });
+const getNumberOfDataSetItemsSelected = (selections, listId, itemId)=>{
+    return Object.keys(selections?.[listId]?.[itemId]?.objectIds ?? {}).length;
+};
+const getNumberOfSelectedItemsInList = (selections, listId)=>{
+    if (!(listId in selections)) return -1; // return -1 indicating there is no listId in selection
+    return Object.keys(selections[listId]).reduce((count, datasetId)=>{
+        try {
+            return count + getNumberOfDataSetItemsSelected(selections, listId, datasetId);
+        } catch (error) {
+            console.error(`Failed to get number of selected items for dataset ${datasetId} in list ${listId}:`, error);
+            return count;
+        }
+    }, 0);
+};
+const isListInSelection = (listId, selections)=>listId in selections;
+
+const IconSize = {
+    xs: 14,
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 32,
+    'xl-2': 36
+};
+
+const SearchAndActions = ({ createList, gatherData, size = 'sm' })=>{
+    const { selections, clearSelections } = useDataLibrarySelection();
+    const retrieveDisabled = Object.keys(selections).length === 0;
+    const iconSize = IconSize[size] || IconSize['sm'];
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: "flex justify-between p-2 bg-primary-dark text-primary-contrast-dark",
+        children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                    label: "Retrieve selections",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                        disabled: retrieveDisabled,
+                        // disabled={Object.keys(selections).length === 0}
+                        size: `compact-${size}`,
+                        variant: "outline",
+                        onClick: ()=>gatherData(),
+                        "aria-label": "Retrieve Selected Data",
+                        classNames: {
+                            root: 'bg-base-max hover:bg-base-light'
+                        },
+                        children: "Retrieve Selected"
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                    label: "Clear selections",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(core$1.ActionIcon, {
+                        disabled: retrieveDisabled,
+                        variant: "outline",
+                        size: size,
+                        onClick: ()=>{
+                            clearSelections();
+                        },
+                        color: "accent-contrast.4",
+                        "aria-label": "clear selections",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                            icon: "gen3:clear-list",
+                            width: iconSize,
+                            height: iconSize
+                        })
+                    })
+                })
+            ]
+        })
+    });
+};
+
+const HTTPUserFriendlyErrorMessages = {
+    // 4xx Client Errors
+    400: 'Sorry, there was a problem with your request. Please check the information you provided and try again.',
+    401: 'Please sign in to access this content. If you need to create an account, please contact support.',
+    402: 'This feature requires payment to continue. Please update your subscription.',
+    403: "You don't have permission to access this. If you think this is a mistake, please contact support.",
+    404: "We couldn't find what you're looking for. The link might be broken or the content may have been moved.",
+    405: 'This action is not supported. Please try a different approach.',
+    406: "Your browser sent a request that this server couldn't understand. Try updating your browser.",
+    407: 'Please authenticate with the network proxy first.',
+    408: 'The request took too long to complete. Please check your internet connection and try again.',
+    409: 'There was a conflict with your request. Someone might have modified the same content.',
+    410: 'This content has been permanently removed and is no longer available.',
+    411: 'There was a technical problem with your request. Please try again.',
+    412: "Some conditions for this request weren't met. Please try again.",
+    413: "The file you're trying to upload is too large. Please choose a smaller file.",
+    414: 'The web address is too long. Please try a shorter URL.',
+    415: 'This type of file is not supported. Please try a different format.',
+    416: 'The requested content range is not available.',
+    417: "Your request couldn't be completed as expected. Please try again.",
+    418: 'Unusual error occurred. Please try again or contact support if the problem persists.',
+    421: 'Your request was sent to the wrong server. Please try again.',
+    422: "We couldn't process your request. Please check the information and try again.",
+    423: 'This resource is temporarily locked. Please try again in a few moments.',
+    424: 'The request failed because it depends on another request that failed.',
+    425: 'Your request was processed too early. Please try again in a moment.',
+    426: 'You need to upgrade your browser or app to continue.',
+    428: "Some required conditions weren't met. Please check all requirements and try again.",
+    429: "You've made too many requests. Please wait a while before trying again.",
+    431: 'Request failed because the headers are too large. Please simplify your request.',
+    451: 'This content is not available for legal reasons.',
+    // 5xx Server Errors
+    500: "Something went wrong on our end. We're working to fix it. Please try again later.",
+    501: "This feature isn't available yet. Check back later.",
+    502: "We're having trouble connecting to our servers. Please try again in a few minutes.",
+    503: "Our service is temporarily unavailable. We're working to restore it as quickly as possible.",
+    504: 'The server took too long to respond. Please try again later.',
+    505: "Your browser's HTTP version isn't supported. Please try updating your browser.",
+    506: 'We encountered a configuration error.',
+    507: "We're out of storage space.",
+    508: 'We detected an infinite loop in our servers.',
+    510: 'This server requires additional extensions to process your request.',
+    511: 'Please sign in to the network before continuing.'
+};
+
+const SelectedItemsTableHeader = ({ numberOfItems, numberOfWarnings, size = 'sm' })=>{
+    const iconSize = IconSize[size] || IconSize['sm'];
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "flex items-center bg-primary-darker  px-4 py-2 mt-2 min-h-10 text-heading",
+        children: [
+            numberOfItems > 0 && /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "flex items-center flex-nowrap overflow-ellipsis text-primary-contrast-darker",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                        fw: 600,
+                        size: size,
+                        className: "mr-1 ",
+                        children: numberOfItems
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                        fw: 400,
+                        size: size,
+                        className: "mr-1 text-primary-contrast-lighter",
+                        children: "selected"
+                    })
+                ]
+            }),
+            numberOfItems > 0 && numberOfWarnings > 0 && /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                icon: "gen3:dot",
+                className: "text-primary-contrast-lighter",
+                width: iconSize,
+                height: iconSize
+            }),
+            numberOfWarnings > 0 && /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "flex items-center flex-nowrap overflow-ellipsis",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                        icon: "gen3:warning",
+                        width: iconSize,
+                        height: iconSize,
+                        className: "text-utility-warning m-1"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                        fw: 600,
+                        size: size,
+                        className: "mr-1 text-primary-contrast-lighter",
+                        children: numberOfWarnings
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                        fw: 400,
+                        size: size,
+                        className: "text-primary-contrast-lighter",
+                        children: `${numberOfWarnings == 1 ? 'warning' : 'warnings'}`
+                    })
+                ]
+            })
+        ]
+    });
+};
+const SelectedItemsTable = ({ validatedItems, rowSelection, setRowSelection, size = 'sm' })=>{
+    const handleRowSelectionChange = (updater)=>{
+        let value = {};
+        setRowSelection((prevSelection)=>{
+            value = updater instanceof Function ? updater(prevSelection) : updater;
+            return value;
+        });
+    };
+    const iconSize = IconSize[size] || IconSize['sm'];
+    const columns = React.useMemo(()=>[
+            {
+                accessorKey: 'valid',
+                enableHiding: true,
+                size: 40,
+                maxSize: 50,
+                header: 'Valid',
+                Cell: ({ row })=>{
+                    if (row.original.valid === undefined) return /*#__PURE__*/ jsxRuntime.jsx("span", {});
+                    if (!row.original.valid) {
+                        return /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                            label: row.original?.messages?.join('\n') ?? 'Unknown Error',
+                            children: /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                                icon: "gen3:warning",
+                                width: iconSize,
+                                height: iconSize,
+                                className: "text-utility-warning text-xl",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                                    fw: 400,
+                                    size: size,
+                                    children: row.original?.messages?.length
+                                })
+                            })
+                        });
+                    } else {
+                        return /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                            icon: "gen3:check-fill",
+                            width: iconSize,
+                            height: iconSize,
+                            className: "text-utility-success"
+                        });
+                    }
+                }
+            },
+            {
+                accessorKey: 'id',
+                header: 'Id'
+            },
+            {
+                accessorKey: 'description',
+                header: 'Description',
+                size: 150,
+                maxSize: 250,
+                Cell: ({ cell })=>{
+                    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                        fw: 400,
+                        size: size,
+                        lineClamp: 2,
+                        children: cell.getValue() ?? 'N/A'
+                    });
+                }
+            },
+            {
+                accessorKey: 'type',
+                header: 'Type'
+            },
+            {
+                accessorKey: 'size',
+                header: 'Size'
+            },
+            {
+                accessorKey: 'datasetId',
+                header: 'Dataset ID'
+            }
+        ], [
+        iconSize,
+        size
+    ]);
+    const tableRows = useDeepCompare.useDeepCompareMemo(()=>{
+        let hasInvalidRows = false;
+        const rows = validatedItems.map((item)=>{
+            if (!item.valid) hasInvalidRows = true;
+            if (core.isCohortItem(item)) {
+                return {
+                    id: item.id,
+                    name: item.name,
+                    description: item.description,
+                    type: item.itemType,
+                    size: undefined,
+                    datasetName: item.name,
+                    datasetId: item.datasetId,
+                    valid: item.valid,
+                    messages: item?.errorMessages
+                };
+            }
+            return {
+                id: item.id,
+                name: item.name,
+                description: item.description,
+                type: item.type,
+                size: item.size,
+                datasetId: item.datasetId,
+                datasetName: item.datasetName,
+                valid: item.valid,
+                messages: item?.errorMessages
+            };
+        });
+        return {
+            rows,
+            hasInvalidRows
+        };
+    }, [
+        validatedItems
+    ]);
+    const table = mantineReactTable.useMantineReactTable({
+        columns,
+        data: tableRows.rows,
+        enableColumnResizing: false,
+        icons: TableIcons,
+        enableTopToolbar: false,
+        enableRowSelection: true,
+        enableBottomToolbar: tableRows.rows.length > 10,
+        enablePagination: tableRows.rows.length > 10,
+        enableRowActions: false,
+        enableStickyFooter: true,
+        enableStickyHeader: true,
+        enableHiding: true,
+        onRowSelectionChange: handleRowSelectionChange,
+        state: {
+            rowSelection
+        },
+        initialState: {
+            density: 'xs',
+            columnPinning: {
+                left: [
+                    'mrt-row-select',
+                    'mrt-row-expand'
+                ],
+                right: [
+                    'mrt-row-actions'
+                ]
+            }
+        },
+        layoutMode: 'semantic',
+        mantineDetailPanelProps: {
+            style: {
+                boxShadow: '0 -2px 0px 0px var(--table-border-color) inset'
+            }
+        },
+        mantineTableProps: {
+            style: {
+                backgroundColor: 'var(--mantine-color-base-1)',
+                '--mrt-striped-row-background-color': 'var(--mantine-color-base-3)'
+            }
+        },
+        mantineTableHeadCellProps: {
+            style: {
+                backgroundColor: 'var(--mantine-color-table-1)',
+                color: 'var(--mantine-color-table-contrast-1)',
+                textAlign: 'center',
+                padding: '0.25rem 0.5rem 0.25rem 0.5rem',
+                fontWeight: 600,
+                fontSize: `var(--mantine-font-size-${size})`
+            }
+        }
+    });
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "flex flex-col ml-8",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(SelectedItemsTableHeader, {
+                numberOfItems: Object.keys(rowSelection).length,
+                numberOfWarnings: tableRows.rows.filter((x)=>x.valid === false).length,
+                size: size
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "mt-2",
+                children: /*#__PURE__*/ jsxRuntime.jsx(mantineReactTable.MantineReactTable, {
+                    table: table
+                })
+            })
+        ]
+    });
+};
+
+const isArrayField = (value)=>Array.isArray(value);
+const isNumeric = (value)=>typeof value === 'number' && !isNaN(value);
+const evaluateItemRule = (rule, item)=>{
+    switch(rule.operator){
+        case 'equals':
+        case 'not':
+            {
+                const fieldValue = item[rule.field];
+                return rule.operator === 'equals' ? fieldValue === rule.value : fieldValue !== rule.value;
+            }
+        case 'includes':
+        case 'excludes':
+            {
+                const fieldValue = item[rule.field];
+                if (!isArrayField(fieldValue)) return false;
+                return rule.operator === 'includes' ? fieldValue.includes(rule.value) : !fieldValue.includes(rule.value);
+            }
+        case 'greater':
+        case 'less':
+            {
+                const fieldValue = item[rule.field];
+                if (isNumeric(fieldValue) && isNumeric(rule.value)) return rule.operator === 'greater' ? fieldValue > rule.value : fieldValue < rule.value;
+                return false;
+            }
+        default:
+            return false;
+    }
+};
+const evaluateGroupRule = (rule, items)=>{
+    switch(rule.operator){
+        case 'count':
+            {
+                const fieldValue = items.map((item)=>item[rule.field]);
+                return fieldValue.length === rule.total;
+            }
+    }
+};
+/**
+ * Retrieves an action configuration from a set of actions by its unique identifier.
+ *
+ * @param {ActionsConfig} actions - An array of action configurations.
+ * @param {string} id - The unique identifier of the desired action configuration.
+ * @returns {DataLibraryActionConfig | undefined} The action configuration with the matching identifier, or undefined if not found.
+ */ const getActionById = (actions, id)=>{
+    if (!id) return undefined;
+    return actions.find((action)=>action.id === id);
+};
+const doesItemFailRule = (item, action)=>{
+    return action?.itemRules?.reduce((acc, rule)=>{
+        if (!evaluateItemRule(rule, item)) {
+            acc.push(rule.errorMessage);
+        }
+        return acc;
+    }, []) ?? [];
+};
+const doesGroupFailRule = (items, action)=>{
+    return action?.groupRules?.reduce((acc, rule)=>{
+        if (!evaluateGroupRule(rule, items)) {
+            acc.push(rule.errorMessage);
+        }
+        return acc;
+    }, []) ?? [];
+};
+
+const PRESIGNED_URL_TEMPLATE_VARIABLE = '{{PRESIGNED_URL}}';
+const isSendExistingPFBToURLParameters = (value)=>{
+    if (!value || typeof value !== 'object') {
+        return false;
+    }
+    const candidate = value;
+    return 'targetURLTemplate' in candidate && typeof candidate.targetURLTemplate === 'string';
+};
+const sendExistingPFBToURL = async (validatedSelections, params, done = ()=>null, error = ()=>null, onAbort = ()=>null, signal = undefined)=>{
+    if (!isSendExistingPFBToURLParameters(params)) {
+        console.error('Invalid parameters for sendPFBToURL action:', params);
+        return;
+    }
+    const { targetURLTemplate } = params;
+    // get the selection
+    if (validatedSelections.length !== 1 || !core.isFileItem(validatedSelections[0])) {
+        notifications.notifications.show({
+            id: 'data-library-send-existing-pfb-to-url-validate-length',
+            position: 'bottom-center',
+            withCloseButton: true,
+            autoClose: 5000,
+            title: 'Action Error',
+            message: 'Invalid data passed to send PFB to URL',
+            color: 'red',
+            loading: false
+        });
+        return;
+    }
+    const { guid } = validatedSelections[0];
+    // get the pre-signed URL for the selected PFB
+    try {
+        const presignedURL = await core.fetchFencePresignedURL({
+            guid: guid,
+            onAbort: onAbort,
+            signal: signal
+        });
+        // the PFB export target URL is a template URL that should have a {{PRESIGNED_URL}} template
+        // variable in it.
+        const signedURL = encodeURIComponent(presignedURL);
+        const targetURL = targetURLTemplate.replace(PRESIGNED_URL_TEMPLATE_VARIABLE, signedURL);
+        return new Promise(()=>{
+            if (window) window.open(targetURL, '_blank', 'noopener,noreferrer');
+            if (done) done(targetURL);
+        });
+    } catch (e) {
+        return new Promise(()=>{
+            error(e);
+        });
+    }
+};
+
+const registeredDataLibraryActions = {};
+const NullAction = ()=>{
+    return new Promise((done)=>{
+        if (done) done();
+    });
+};
+const registerAction = (actionName, action)=>{
+    registeredDataLibraryActions[actionName] = action;
+};
+const findAction = (actionName)=>{
+    if (actionName === undefined) {
+        console.error('DataLibrary: findAction: no name provided');
+        return undefined;
+    }
+    if (!(actionName in registeredDataLibraryActions)) {
+        console.error('getButtonAction: no action found for', actionName);
+        return undefined;
+    }
+    return registeredDataLibraryActions[actionName];
+};
+const registerDefaultDataLibraryActions = ()=>{
+    registerAction('export-pfb-to-url', {
+        action: sendExistingPFBToURL
+    });
+};
+registerDefaultDataLibraryActions();
+
+const ModalHeader = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: "flex justify-between items-center",
+        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+            fw: 600,
+            className: "text-heading",
+            children: "Retrieve Data"
+        })
+    });
+};
+const bindAction = (action)=>{
+    const actionFunction = findAction(action.actionFunction);
+    if (!actionFunction) {
+        return NullAction;
+    }
+    return actionFunction.action;
+};
+const SelectedItemsModal = (props)=>{
+    const [value, setValue] = React.useState(null);
+    const { actions } = props;
+    const { gatheredItems } = useDataLibrarySelection();
+    const [rowSelection, setRowSelection] = React.useState({});
+    const [actionFunction, setActionFunction] = React.useState({
+        action: NullAction
+    });
+    const [actionConfig, setActionConfig] = React.useState(null);
+    const [isRunning, setIsRunning] = React.useState(false);
+    const destinations = React.useMemo(()=>{
+        return actions.map((action)=>{
+            return {
+                label: action.label,
+                value: action.id
+            };
+        });
+    }, [
+        actions
+    ]);
+    const onError = (error)=>{
+        setIsRunning(false);
+        if (error instanceof core.HTTPError) {
+            notifications.notifications.show({
+                id: 'data-library-selection-action-error',
+                position: 'bottom-center',
+                withCloseButton: true,
+                autoClose: 5000,
+                title: 'Action Error',
+                message: HTTPUserFriendlyErrorMessages[error.status],
+                color: 'red',
+                icon: /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                    icon: "gen3:outline-error"
+                }),
+                loading: false
+            });
+        }
+    };
+    const onDone = (arg)=>{
+        setIsRunning(false);
+        notifications.notifications.show({
+            id: 'data-library-selection-action-done',
+            position: 'bottom-center',
+            withCloseButton: true,
+            autoClose: 5000,
+            title: 'Submission Complete',
+            message: actionConfig ? `${actionConfig.label} completed successfully` : 'Completed successfully',
+            loading: false
+        });
+    };
+    const setSelectionAction = React.useCallback((actionId)=>{
+        const actionConfig = getActionById(actions, actionId);
+        if (actionConfig) {
+            setActionConfig(actionConfig);
+            const action = bindAction(actionConfig);
+            if (action) setActionFunction({
+                action: action,
+                parameters: actionConfig.parameters
+            });
+            return;
+        }
+        setActionFunction({
+            action: NullAction
+        });
+    }, [
+        actions
+    ]);
+    const validatedLibrarySelections = useDeepCompare.useDeepCompareMemo(()=>{
+        // get the action
+        const action = getActionById(actions, value?.value);
+        // if there are no actions then everything is valid
+        if (!action) return gatheredItems.map((item)=>{
+            return {
+                ...item,
+                valid: undefined
+            };
+        });
+        // get all selected items
+        const selectedActionItems = gatheredItems.filter((_, index)=>Object.hasOwn(rowSelection, index));
+        // apply group rules of action if any fail then add error message and set flag
+        const groupFailsRule = doesGroupFailRule(selectedActionItems, action);
+        const validItems = gatheredItems.map((item, index)=>{
+            if (rowSelection[index]) {
+                // if selected then validate item rules
+                const itemFailsRule = doesItemFailRule(item, action);
+                const itemAndGroupTestMessages = [
+                    ...itemFailsRule,
+                    ...groupFailsRule
+                ];
+                if (itemAndGroupTestMessages.length > 0) return {
+                    ...item,
+                    valid: false,
+                    errorMessages: itemAndGroupTestMessages
+                };
+                // defaults return true
+                return {
+                    ...item,
+                    valid: true
+                };
+            } else return {
+                ...item,
+                valid: undefined
+            };
+        });
+        return validItems;
+    }, [
+        gatheredItems,
+        rowSelection,
+        actions,
+        value
+    ]);
+    const actionButtonDisabled = actionFunction.action === NullAction || validatedLibrarySelections.length === 0 || validatedLibrarySelections.some((x)=>x.valid === false);
+    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Modal, {
+        ...props,
+        closeOnEscape: true,
+        centered: true,
+        withinPortal: false,
+        title: /*#__PURE__*/ jsxRuntime.jsx(ModalHeader, {}),
+        classNames: {
+            header: 'm-0 p-2 min-h-10 bg-primary-lightest',
+            content: 'scroll-smooth'
+        },
+        overlayProps: {
+            opacity: 0.5
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(SelectedItemsTable, {
+                    validatedItems: validatedLibrarySelections,
+                    rowSelection: rowSelection,
+                    setRowSelection: setRowSelection
+                }),
+                /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                    justify: "space-between",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                                    fw: 600,
+                                    children: "Destination:"
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(core$1.Select, {
+                                    data: destinations,
+                                    value: value ? value.value : null,
+                                    onChange: (value, option)=>{
+                                        setValue(option);
+                                        if (value) setSelectionAction(value);
+                                        else setActionFunction({
+                                            action: NullAction
+                                        });
+                                    }
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                            loading: isRunning,
+                            rightSection: actionConfig?.rightIcon ? /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                                icon: actionConfig?.rightIcon
+                            }) : undefined,
+                            disabled: actionButtonDisabled,
+                            onClick: async ()=>{
+                                setIsRunning(true);
+                                await actionFunction.action(validatedLibrarySelections, actionFunction.parameters, onDone, onError);
+                            },
+                            children: actionConfig ? actionConfig.buttonLabel : 'Submit'
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+/**
+ * Extracts and consolidates GUIDs and IDs from dataset contents into a single object.
+ *
+ * @param {DatasetContents} dataset - The dataset containing files and queries to extract IDs from.
+ * @returns {SelectedMembers} An object where each key is a unique identifier from the dataset,
+ *                           with a boolean value set to true.
+ */ const getObjectIds = (dataset)=>{
+    return [
+        ...dataset.files.map((file)=>file.id),
+        ...dataset.queries.map((query)=>query.id)
+    ].reduce((acc, key)=>{
+        acc[key] = true;
+        return acc;
+    }, {});
+};
+/**
+ * Function that generates a mapping of dataset IDs to their respective member objects.
+ *
+ * @param {Array<string>} datasetIds - Array of dataset IDs to be processed.
+ * @param {DatalistMembers} datasetContents - Object containing details about dataset members.
+ * @returns {ListMembers} - An object mapping each dataset ID to its respective member objects.
+ */ const selectAllDatasetMembers = (datasetIds, datasetContents)=>{
+    return datasetIds.reduce((acc, datasetId)=>{
+        acc[datasetId] = {
+            id: datasetId,
+            objectIds: getObjectIds(datasetContents[datasetId])
+        };
+        return acc;
+    }, {});
+};
+/**
+ * Retrieves the members of a given dataset or cohort.
+ *
+ * This function takes either a dataset or a cohort item and returns an
+ * object representing the selected members. In the case of a cohort item,
+ * it returns an object with the cohort's ID set to true. For a dataset,
+ * it iterates through the dataset items and sets the keys of file items
+ * to true in the returned object.
+ *
+ * @param {RegisteredDataListEntry | CohortItem} dataSetOrCohort - The dataset or cohort item to process.
+ * @returns {SelectedMembers} An object representing the selected members.
+ */ const getDatasetMembers = (dataSetOrCohort)=>{
+    if (core.isCohortItem(dataSetOrCohort)) {
+        return {
+            [dataSetOrCohort.id]: true
+        };
+    }
+    return Object.entries(dataSetOrCohort.items).reduce((acc, [key, item])=>{
+        if (core.isFileItem(item)) acc[key] = true;
+        return acc;
+    }, {});
+};
+/**
+ * Selects all list items from the provided data list and transforms them into a ListMembers structure.
+ *
+ * @param {Datalist} members - The data list containing items to be transformed.
+ * @return {ListMembers} - Transformed structure containing the selected list items with dataset IDs and their corresponding object IDs.
+ */ const selectAllListItems = (members)=>{
+    return Object.entries(members.items).reduce((acc, [datasetId, datasetContents])=>{
+        if (core.isCohortItem(datasetContents)) {
+            acc[datasetId] = {
+                id: datasetId,
+                objectIds: {
+                    [datasetId]: true
+                }
+            };
+        } else acc[datasetId] = {
+            id: datasetId,
+            objectIds: getDatasetMembers(datasetContents)
+        };
+        return acc;
+    }, {});
+};
+
+const EmptyList = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+        gap: "xs",
+        classNames: {
+            root: 'w-100'
+        },
+        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: "list is empty"
+            })
+        ]
+    });
+};
+
+/**
+ * Formats a given date string into a specific format.
+ *
+ * @param {string} datestr - The date string to be formatted.
+ * @returns {string} The formatted date string.
+ * @throws {Error} Throws an error if the provided date string is invalid or the format is incorrect.
+ *
+ * The function parses the provided date string into a timestamp.
+ */ const formatDate = (datestr)=>{
+    const timestamp = Date.parse(datestr);
+    if (isNaN(timestamp)) {
+        throw new Error('Invalid date string');
+    }
+    const date = new Date(timestamp);
+    const parts = new Intl.DateTimeFormat('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false,
+        timeZone: 'UTC'
+    }).formatToParts(date).filter((p)=>p.type !== 'literal') // Filter out literal types like spaces and commas
+    .map((p)=>p.value);
+    if (parts.length !== 6) throw new Error('format date wrong length');
+    const day = parts.slice(0, 3).join('-');
+    const time = parts.slice(3).join(':');
+    return `${day} ${time}`;
+};
+
+const DatasetAccordionControl = ({ listName, numberOfItems, updatedTime, createdTime, updateHandler, deleteListHandler, selectListHandler, selectedState, size = 'sm', ...props })=>{
+    const [value, setValue] = React.useState(undefined);
+    const handleUpdateName = ()=>{
+        updateHandler({
+            name: value
+        });
+        setValue(undefined);
+    };
+    const theme = core$1.useMantineTheme();
+    const iconSize = IconSize[size] || IconSize['sm'];
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "flex justify-start w-full items-center px-4 group-data-[active]:bg-secondary-lightest",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "flex items-center w-1/4",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Checkbox, {
+                        size: size,
+                        onChange: (event)=>{
+                            selectListHandler(event.currentTarget.checked);
+                            event.stopPropagation();
+                        },
+                        checked: selectedState == 'checked',
+                        indeterminate: selectedState == 'indeterminate'
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Accordion.Control, {
+                        ...props,
+                        className: "w-4 mr-3"
+                    }),
+                    value ? /*#__PURE__*/ jsxRuntime.jsx(core$1.TextInput, {
+                        size: size,
+                        classNames: {
+                            root: 'ml-2',
+                            input: 'font-bold'
+                        },
+                        value: value,
+                        onChange: (e)=>setValue(e.target.value),
+                        onKeyDown: hooks.getHotkeyHandler([
+                            [
+                                'Enter',
+                                handleUpdateName
+                            ]
+                        ]),
+                        rightSection: /*#__PURE__*/ jsxRuntime.jsx(core$1.CloseButton, {
+                            "aria-label": "Clear input",
+                            onClick: ()=>setValue(undefined),
+                            style: {
+                                display: value ? undefined : 'none'
+                            }
+                        })
+                    }) : /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        className: "flex items-center justify-end",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                                fw: 600,
+                                className: "ml-2 w-100 py-2 mr-2",
+                                "aria-label": listName,
+                                size: size,
+                                children: listName
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                                label: "Change name of list",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.ActionIcon, {
+                                    color: "accent.4",
+                                    variant: "transparent",
+                                    "aria-label": "Change datalist name",
+                                    onClick: ()=>setValue(listName),
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                                        icon: "gen3:edit",
+                                        height: iconSize,
+                                        width: iconSize,
+                                        color: theme.colors.accent[4]
+                                    })
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "flex items-center ml-auto space-x-2",
+                children: [
+                    numberOfItems === 0 && /*#__PURE__*/ jsxRuntime.jsx(EmptyList, {}),
+                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        className: "flex items-center space-x-2",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                                fw: 600,
+                                c: "base-contrast.2",
+                                tt: "uppercase",
+                                size: size,
+                                children: "Created:"
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                                fw: 500,
+                                c: "base-contrast.2",
+                                size: size,
+                                children: formatDate(createdTime)
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                                icon: "gen3:dot",
+                                height: iconSize,
+                                width: iconSize,
+                                color: theme.colors.accent[4]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                                fw: 600,
+                                c: "base-contrast.2",
+                                tt: "uppercase",
+                                size: size,
+                                children: "Updated:"
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                                fw: 500,
+                                c: "base-contrast.2",
+                                size: size,
+                                children: formatDate(updatedTime)
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                        label: `Delete ${listName}. Will not delete dataset`,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.ActionIcon, {
+                            color: "accent.4",
+                            variant: "transparent",
+                            "aria-label": "delete list",
+                            onClick: ()=>deleteListHandler(),
+                            children: /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                                icon: "gen3:delete",
+                                height: iconSize,
+                                width: iconSize,
+                                color: theme.colors.primary[5]
+                            })
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+const commonTableSettings = (size = 'sm')=>{
+    return {
+        enableColumnResizing: false,
+        icons: TableIcons,
+        enableTopToolbar: false,
+        enableColumnFilters: false,
+        enableColumnActions: false,
+        enableRowActions: true,
+        enableColumnOrdering: false,
+        enableFacetedValues: true,
+        enableGrouping: false,
+        enableColumnPinning: false,
+        enableRowSelection: true,
+        enablePagination: false,
+        enableSelectAll: false,
+        enableExpandAll: false,
+        displayColumnDefOptions: {
+            'mrt-row-select': {
+                size: 5,
+                header: ''
+            },
+            'mrt-row-expand': {
+                size: 5,
+                header: ''
+            },
+            'mrt-row-actions': {
+                header: ''
+            }
+        },
+        initialState: {
+            density: 'xs',
+            columnPinning: {
+                left: [
+                    'mrt-row-select',
+                    'mrt-row-expand'
+                ],
+                right: [
+                    'mrt-row-actions'
+                ]
+            }
+        },
+        layoutMode: 'semantic',
+        mantineDetailPanelProps: {
+            style: {
+                boxShadow: '0 -2px 0px 0px var(--table-border-color) inset'
+            }
+        },
+        mantineTableProps: {
+            style: {
+                backgroundColor: 'var(--mantine-color-base-1)',
+                '--mrt-striped-row-background-color': 'var(--mantine-color-base-3)',
+                fontSize: `var(--mantine-font-size-${size})`
+            }
+        },
+        mantineTableHeadCellProps: {
+            style: {
+                backgroundColor: 'var(--mantine-color-table-1)',
+                color: 'var(--mantine-color-table-contrast-1)',
+                textAlign: 'center',
+                fontWeight: 600,
+                fontSize: `var(--mantine-font-size-${size})`,
+                textTransform: 'uppercase'
+            }
+        }
+    };
+};
+
+const columns$2 = [
+    {
+        accessorKey: 'name',
+        header: 'Name'
+    },
+    {
+        accessorKey: 'description',
+        header: 'Description'
+    },
+    {
+        accessorKey: 'documentation',
+        header: 'Documentation'
+    }
+];
+const AdditionalDataTableTable = ({ data, header, size = 'sm' })=>{
+    const table = mantineReactTable.useMantineReactTable({
+        columns: columns$2,
+        data: data,
+        ...commonTableSettings(size),
+        enableRowActions: false,
+        enableRowSelection: false,
+        enableBottomToolbar: data.length > 10,
+        enablePagination: data.length > 10
+    });
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "flex flex-col w-inherit gap-y-1",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                fw: 600,
+                fs: "md",
+                c: "secondary.5",
+                tt: "uppercase",
+                children: header
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(mantineReactTable.MantineReactTable, {
+                table: table
+            })
+        ]
+    });
+};
+
+const columns$1 = [
+    {
+        accessorKey: 'name',
+        header: 'Name'
+    },
+    {
+        accessorKey: 'description',
+        header: 'Description'
+    },
+    {
+        accessorKey: 'type',
+        header: 'Type'
+    },
+    {
+        accessorKey: 'size',
+        header: 'Size'
+    }
+];
+const FilesTable = ({ listId, datasetId, data, header, size = 'sm' })=>{
+    const [rowSelection, setRowSelection] = React.useState({});
+    const { selections, updateListMemberSelections } = useDataLibrarySelection();
+    React.useEffect(()=>{
+        const sel = selections?.[listId]?.[datasetId]?.objectIds ?? {};
+        setRowSelection(sel);
+    }, [
+        listId,
+        datasetId,
+        selections
+    ]);
+    const handleRowSelectionChange = (updater)=>{
+        let value = {};
+        setRowSelection((prevSelection)=>{
+            value = updater instanceof Function ? updater(prevSelection) : updater;
+            return value;
+        });
+        updateListMemberSelections(listId, datasetId, value);
+    };
+    const table = mantineReactTable.useMantineReactTable({
+        columns: columns$1,
+        data: data,
+        ...commonTableSettings(size),
+        enableBottomToolbar: data.length > 10,
+        enablePagination: data.length > 10,
+        enableRowActions: true,
+        enableHiding: true,
+        getRowId: (originalRow)=>originalRow.id,
+        onRowSelectionChange: handleRowSelectionChange,
+        state: {
+            rowSelection
+        }
+    });
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "flex flex-col gap-y-1",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                fw: 600,
+                fs: size,
+                c: "secondary.5",
+                tt: "uppercase",
+                children: header
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(mantineReactTable.MantineReactTable, {
+                table: table
+            })
+        ]
+    });
+};
+
+const LabeledText = ({ label, text })=>{
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "flex p-1 space-x-2",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Text, {
+                fw: 600,
+                children: [
+                    label,
+                    ":"
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Text, {
+                fw: 400,
+                children: [
+                    " ",
+                    text
+                ]
+            })
+        ]
+    });
+};
+const QueryDetails = ({ name, schemaVersion, index, data, id })=>{
+    if (!data) {
+        return /*#__PURE__*/ jsxRuntime.jsx(ErrorCard, {
+            message: "No cohort query"
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "flex flex-col",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                classNames: {
+                    root: 'p-2 bg-base-lighter rounded-t-lg border-2 border-b-0 border-base-light'
+                },
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                        fw: 700,
+                        children: name
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(LabeledText, {
+                        label: "Index:",
+                        text: index
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(LabeledText, {
+                        label: "Schema Version:",
+                        text: schemaVersion
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(LabeledText, {
+                        label: "ID:",
+                        text: id
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "p-2 overflow-scroll w-full bg-base-lighter rounded-b-lg border-2 border-t-0 border-base-light",
+                children: core.isFilterSet(data) ? /*#__PURE__*/ jsxRuntime.jsx(QueryExpressionSection, {
+                    currentCohortId: id,
+                    index: index,
+                    currentCohortName: name,
+                    filters: data,
+                    displayOnly: true,
+                    showTitle: false
+                }) : /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                    fw: 400,
+                    children: JSON.stringify(data, null, 2)
+                })
+            })
+        ]
+    });
+};
+
+/**
+ *  Component that manages a List items, which are composed of Dataset and/or Cohorts
+ */ const columns = [
+    {
+        accessorKey: 'name',
+        header: 'Name'
+    },
+    {
+        accessorKey: 'id',
+        header: 'Id'
+    },
+    {
+        accessorKey: 'numFiles',
+        header: '# Files'
+    },
+    {
+        accessorKey: 'isAddDataSource',
+        header: 'Additional Data Sources'
+    }
+];
+const DataSetContentsTable = ({ listId, data, removeList, size = 'sm' })=>{
+    const [rowSelection, setRowSelection] = React.useState({});
+    const { selections, updateSelections } = useDataLibrarySelection();
+    // build the rows
+    const rows = useDeepCompare.useDeepCompareMemo(()=>Object.keys(data).map((key)=>{
+            return {
+                name: data[key].name,
+                id: data[key].id,
+                numFiles: data[key]?.files.length || 0,
+                numItems: (data[key]?.files.length || 0) + (data[key]?.queries.length || 0),
+                isAddDataSource: data[key]?.additionalData.length !== 0 ? 'True' : 'False',
+                isCohort: data[key]?.queries.length !== 0 ? 'True' : 'False'
+            };
+        }), [
+        data
+    ]);
+    /**
+   * Handles the change in row selection.
+   *
+   * @param {MRT_Updater<MRT_RowSelectionState>} updater - A function or value
+   * that provides the new state of row selection. If a function is provided,
+   * it will be called with the previous selection state.
+   *
+   * This function updates the state of selected rows by transforming the
+   * updater's value. It generates a mapping of selected members for each
+   * dataset, containing the dataset ID and an object representing the selected
+   * object IDs. It then updates the selections for a given list and filters
+   * the values to indicate whether each dataset has any selected objects.
+   */ const handleRowSelectionChange = (updater)=>{
+        setRowSelection((prevSelection)=>{
+            const value = updater instanceof Function ? updater(prevSelection) : updater;
+            const members = selectAllDatasetMembers(Object.keys(value), data);
+            updateSelections(listId, members);
+            return Object.keys(members).reduce((acc, key)=>{
+                acc[key] = Object.keys(members[key].objectIds).length > 0;
+                return acc;
+            }, {});
+        });
+    };
+    useDeepCompare.useDeepCompareEffect(()=>{
+        if (!selections[listId]) {
+            // not found in selections, unselect all
+            setRowSelection({});
+            return;
+        }
+        const filteredValues = Object.keys(selections[listId]).reduce((acc, key)=>{
+            const objectIds = selections[listId][key]?.objectIds;
+            if (!objectIds) {
+                console.warn(`Object IDs for key ${key} in list ${listId} are not available`);
+                return acc;
+            }
+            acc[key] = Object.keys(objectIds).length > 0;
+            return acc;
+        }, {});
+        setRowSelection(filteredValues);
+    }, [
+        setRowSelection,
+        selections,
+        listId
+    ]);
+    const table = mantineReactTable.useMantineReactTable({
+        columns: columns,
+        data: rows,
+        ...commonTableSettings(size),
+        getRowId: (originalRow)=>originalRow.id,
+        onRowSelectionChange: handleRowSelectionChange,
+        enableSelectAll: false,
+        enableBottomToolbar: rows.length > 10,
+        enablePagination: rows.length > 10,
+        enableRowSelection: true,
+        state: {
+            rowSelection
+        },
+        renderEmptyRowsFallback: ()=>/*#__PURE__*/ jsxRuntime.jsx(EmptyList, {}),
+        defaultColumn: {
+            minSize: 2
+        },
+        displayColumnDefOptions: {
+            'mrt-row-select': {
+                size: 5,
+                maxSize: 5,
+                header: ''
+            },
+            'mrt-row-expand': {
+                size: 5,
+                maxSize: 5,
+                header: ''
+            },
+            'mrt-row-actions': {
+                size: 10,
+                header: ''
+            }
+        },
+        mantineSelectCheckboxProps: ({ row })=>{
+            const selectedCount = getNumberOfDataSetItemsSelected(selections, listId, row.id);
+            const isIndeterminate = selectedCount > 0 && selectedCount != row.original.numItems;
+            return {
+                indeterminate: isIndeterminate,
+                ...isIndeterminate ? {
+                    checked: false
+                } : {}
+            };
+        },
+        renderRowActions: ({ row })=>/*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                label: row.original.isCohort ? 'Remove cohort from list' : 'Remove dataset from list',
+                children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Button, {
+                    variant: "transparent",
+                    "aria-label": `remove ${row.original.isCohort ? 'cohort' : 'dataset'}  ${row.original.name} from list`,
+                    onClick: ()=>{
+                        removeList(row.id);
+                    },
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(md.MdOutlineRemoveCircle, {
+                            size: "1.5rem"
+                        }),
+                        row.original.itemType
+                    ]
+                })
+            }),
+        mantineDetailPanelProps: {
+            style: {
+                padding: '0px',
+                margin: '0px'
+            }
+        },
+        renderDetailPanel: ({ row })=>{
+            const rowData = data[row.id];
+            return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "flex flex-col w-full gap-y-4 pr-4",
+                children: [
+                    rowData?.files.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(FilesTable, {
+                        header: 'Files',
+                        datasetId: rowData.id,
+                        listId: listId,
+                        data: rowData?.files
+                    }),
+                    rowData.additionalData.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(AdditionalDataTableTable, {
+                        header: 'Additional Data',
+                        data: rowData?.additionalData
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Stack, {
+                        children: rowData?.queries.map((query)=>/*#__PURE__*/ React.createElement(QueryDetails, {
+                                header: "Queries",
+                                ...query,
+                                key: query.id
+                            }))
+                    })
+                ]
+            });
+        }
+    });
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: "flex flex-col w-full mr-8",
+        children: /*#__PURE__*/ jsxRuntime.jsx(mantineReactTable.MantineReactTable, {
+            table: table
+        })
+    });
+};
+
+/**
+ * Renders an accordion item with data list details.
+ *
+ * @param {Object} dataListAccordionItemParams - Parameters for the DataListAccordionItem.
+ * @param {Object} dataListAccordionItemParams.dataList - The data list to be displayed in the accordion item.
+ * @param {Function} dataListAccordionItemParams.updateListInDataLibrary - Function to update the list in the data library.
+ * @param {Function} dataListAccordionItemParams.deleteListFromDataLibrary - Function to delete the list from the data library.
+ *
+ * @return {JSX.Element} A rendered accordion item component with controls for data list updates and deletions.
+ */ const DatalistAccordionItem = ({ dataList, updateListInDataLibrary, deleteListFromDataLibrary, size = 'sm' })=>{
+    const [selectedState, setSelectedState] = React.useState('unchecked');
+    const { id: listId, name: listName } = dataList;
+    const numberOfItemsInList = React.useMemo(()=>{
+        return core.getNumberOfItemsInDatalist(dataList);
+    }, [
+        dataList
+    ]);
+    const { selections, updateSelections, removeListMember, removeList } = useDataLibrarySelection();
+    const updateList = async (update)=>{
+        await updateListInDataLibrary(listId, {
+            ...dataList,
+            ...update,
+            updatedTime: core.getTimestamp()
+        });
+    };
+    const tableRowData = React.useMemo(()=>Object.entries(dataList.items).reduce((acc, [datasetId, dataItem])=>{
+            const [queries, files, additionalData] = [
+                [],
+                [],
+                []
+            ];
+            if (core.isCohortItem(dataItem)) {
+                queries.push({
+                    ...dataItem,
+                    description: '',
+                    index: dataItem.index,
+                    id: datasetId
+                });
+            } else {
+                // handle RegisteredDataListEntry
+                Object.entries(dataItem.items).forEach(([itemId, item])=>{
+                    if (core.isFileItem(item)) {
+                        files.push({
+                            ...item,
+                            id: itemId
+                        });
+                    } else if (core.isAdditionalDataItem(item)) {
+                        additionalData.push(item);
+                    } else {
+                        console.warn('DataLibrary: unknown item', item);
+                    }
+                });
+            }
+            // return the
+            acc[datasetId] = {
+                id: datasetId,
+                name: dataItem.name,
+                queries: queries,
+                files: files,
+                additionalData: additionalData
+            };
+            return acc;
+        }, {}), [
+        dataList
+    ]);
+    React.useEffect(()=>{
+        // list is not in selection
+        if (!isListInSelection(listId, selections)) {
+            setSelectedState('unchecked');
+            return;
+        }
+        const numberOfSelectedItemsInList = getNumberOfSelectedItemsInList(selections, listId);
+        // everything in the list is selected
+        if (numberOfSelectedItemsInList == numberOfItemsInList) {
+            setSelectedState('checked');
+            return;
+        }
+        // list is not in selections
+        if (numberOfSelectedItemsInList === 0) {
+            setSelectedState('unchecked');
+            return;
+        }
+        // some checked items
+        if (numberOfSelectedItemsInList < numberOfItemsInList) setSelectedState('indeterminate');
+    }, [
+        listId,
+        numberOfItemsInList,
+        selections
+    ]);
+    const removeItemFromList = async (itemId)=>{
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { [itemId]: _removedKey, ...newObject } = dataList.items;
+        await updateListInDataLibrary(listId, {
+            ...dataList,
+            items: newObject,
+            updatedTime: core.getTimestamp()
+        });
+        // update selections
+        removeListMember(listId, itemId);
+    };
+    const handleSelectList = (checked)=>{
+        if (!checked) {
+            removeList(listId);
+            return;
+        }
+        const selectAllDatasets = selectAllListItems(dataList);
+        updateSelections(listId, selectAllDatasets); // select all the datasets in the list
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Accordion.Item, {
+        value: listName,
+        className: "group",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(DatasetAccordionControl, {
+                listName: listName,
+                numberOfItems: numberOfItemsInList,
+                updatedTime: dataList.updatedTime,
+                createdTime: dataList.createdTime,
+                updateHandler: updateList,
+                deleteListHandler: ()=>deleteListFromDataLibrary(listId),
+                selectListHandler: handleSelectList,
+                selectedState: selectedState,
+                size: size
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Accordion.Panel, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(DataSetContentsTable, {
+                    listId: listId,
+                    data: tableRowData,
+                    removeList: removeItemFromList,
+                    size: size
+                })
+            })
+        ]
+    }, listName);
+};
+
+const DataLibraryLists = ({ useAPI, actions, size })=>{
+    const { dataLibrary, isError, isLoading, error: dataLibraryError, addListToDataLibrary, updateListInDataLibrary, deleteListFromDataLibrary } = core.useDataLibrary(useAPI);
+    const [selectedItemsOpen, { open, close }] = hooks.useDisclosure(false);
+    const { gatherSelectedItems } = useDataLibrarySelection();
+    const gatherData = ()=>{
+        gatherSelectedItems(dataLibrary);
+        open();
+    };
+    if (isError) {
+        let message = 'There was a error getting the library';
+        if (dataLibraryError && 'data' in dataLibraryError && dataLibraryError?.status in HTTPUserFriendlyErrorMessages) {
+            message = HTTPUserFriendlyErrorMessages[dataLibraryError?.status];
+        }
+        return /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "flex flex-col w-full ml-2",
+            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Center, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(ErrorCard, {
+                    message: message
+                })
+            })
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "flex flex-col w-full ml-2",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.LoadingOverlay, {
+                visible: isLoading
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(SelectedItemsModal, {
+                opened: selectedItemsOpen,
+                onClose: close,
+                size: "auto",
+                actions: actions
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(SearchAndActions, {
+                createList: addListToDataLibrary,
+                gatherData: gatherData
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "flex items-center",
+                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Accordion, {
+                    chevronPosition: "left",
+                    classNames: {
+                        root: 'w-full',
+                        control: 'data-active:bg-secondary-lightest'
+                    },
+                    children: dataLibrary && Object.values(dataLibrary).map((datalist)=>{
+                        return /*#__PURE__*/ jsxRuntime.jsx(DatalistAccordionItem, {
+                            dataList: datalist,
+                            size: size,
+                            updateListInDataLibrary: updateListInDataLibrary,
+                            deleteListFromDataLibrary: deleteListFromDataLibrary
+                        }, datalist.id);
+                    })
+                })
+            })
+        ]
+    });
+};
+
+const DataLibrary = (config)=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(DataLibrarySelectionProvider, {
+        children: /*#__PURE__*/ jsxRuntime.jsx(DataLibraryLists, {
+            ...config
+        })
+    });
+};
+
+const DataLibraryPage = ({ headerProps, footerProps, config })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
+        headerProps,
+        footerProps,
+        headerData: {
+            title: 'Gen3 DataLibrary Page',
+            content: 'DataLibrary Data',
+            key: 'gen3-data-library-page'
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx(DataLibrary, {
+            ...config
+        })
+    });
+};
+
+const DataLibraryPageGetServerSideProps = async ()=>{
+    try {
+        const datalibraryConfig = await ContentSource.get(`config/${core.GEN3_COMMONS_NAME}/dataLibrary.json`);
+        return {
+            props: {
+                ...await getNavPageLayoutPropsFromConfig(),
+                config: datalibraryConfig
+            }
+        };
+    } catch (err) {
+        console.error(err);
+        return {
+            props: {
+                ...await getNavPageLayoutPropsFromConfig(),
+                config: {
+                    useAPI: false,
+                    actions: []
+                }
+            }
+        };
+    }
+};
+
 const CrosswalkTable = ({ mapping, data, isFetching, isError, tableMessage, showSubmittedIdInTable })=>{
     const cols = React.useMemo(()=>{
         return [
@@ -17806,6 +19658,8 @@ exports.CreateCredentialsAPIKeyModal = CreateCredentialsAPIKeyModal;
 exports.CrosswalkPage = CrosswalkPage;
 exports.CrosswalkPageGetServerSideProps = CrosswalkPageGetServerSideProps;
 exports.Custom404Page = Custom404Page;
+exports.DataLibraryPage = DataLibraryPage;
+exports.DataLibraryPageGetServerSideProps = DataLibraryPageGetServerSideProps;
 exports.DictionaryPage = DictionaryPage;
 exports.DictionaryPageGetServerSideProps = DictionaryPageGetServerSideProps;
 exports.DiscoveryCellRendererFactory = DiscoveryCellRendererFactory;