@gen3/frontend 0.10.54 → 0.10.56

package/dist/esm/index.js

@@ -1,24 +1,24 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { createContext, useState, useMemo, useContext, useCallback, useEffect, useRef, createElement, forwardRef, useReducer } from 'react';
-import { useUserAuth, useCoreSelector, selectUserDetails, useGetAuthzMappingsQuery, useGetWorkspaceStatusQuery, useTerminateWorkspaceMutation, selectRequestedWorkspaceStatus, useCoreDispatch, WorkspaceStatus, setActiveWorkspaceStatus, setRequestedWorkspaceStatus, useLazyFetchUserDetailsQuery, selectUserAuthStatus, GEN3_REDIRECT_URL, showModal, Modals, GEN3_FENCE_API, isAuthenticated, useGetLoginProvidersQuery, hideModal, useGetCSRFQuery, selectCurrentModal, fieldNameToTitle, useIsUserLoggedIn, useGetMDSQuery, selectAuthzMappingData, useGetAggMDSQuery, useAskQuestionMutation, useGetIndexAggMDSQuery, useGetTagsQuery, updateCohortFilter, selectIndexedFilterByName, isOperationWithField, removeCohortFilter, trimFirstFieldNameToTitle, selectCohortFilters, handleOperation, selectCurrentCohortId, setCohortFilter, clearCohortFilters, selectCurrentCohortName, useGeneralGQLQuery, selectIndexFilters, useGetRawDataAndTotalCountsQuery, Accessibility, downloadFromGuppyToBlob, downloadJSONDataFromGuppy, useGetAggsQuery, extractEnumFilterValue, useGetCountsQuery, selectHeadersWithCSRFToken, GEN3_GUPPY_API, useLaunchWorkspaceMutation, useGetWorkspacePayModelsQuery, selectActiveWorkspaceStatus, isFetchBaseQueryError, setActiveWorkspace, selectWorkspaceStatusFromService, selectActiveWorkspaceId, useGetWorkspaceOptionsQuery, GEN3_WORKSPACE_API, useGetExternalLoginsQuery, isWorkspaceRunningOrStopping, useSetCurrentPayModelMutation, PodStatus, PodConditionType, GEN3_COMMONS_NAME, createAppStore, createGen3AppWithOwnStore, createAppApiForRTKQ, getGen3AppId, CoreProvider, useGetCredentialsQuery, useRemoveCredentialMutation, useAddNewCredentialMutation, useGetDictionaryQuery, useGetProjectsDetailsQuery, useGetSubmissionsQuery, useLazyGetCrosswalkDataQuery } from '@gen3/core';
-import { LoadingOverlay, Card, Group, Avatar, Text, Checkbox, Stack, Tooltip, UnstyledButton, ThemeIcon, Box, Select, Button, Divider, Textarea, FileButton, Anchor, Modal, Grid, Table, ColorSwatch, useMantineTheme, Loader, Center, Paper, Menu, Badge, Alert, Tabs, Accordion, Drawer, CopyButton, factory, useProps, getStyleObject, SegmentedControl, Switch, Autocomplete, TextInput, Title, ActionIcon, NumberInput, RangeSlider, MultiSelect, Transition, rem, Stepper, Image as Image$1, NavLink, Flex, ScrollArea, MantineProvider, createTheme, Highlight, List, FileInput } from '@mantine/core';
+import { useUserAuth, useCoreSelector, selectUserDetails, useGetAuthzMappingsQuery, useGetWorkspaceStatusQuery, useTerminateWorkspaceMutation, selectRequestedWorkspaceStatus, useCoreDispatch, WorkspaceStatus, setActiveWorkspaceStatus, setRequestedWorkspaceStatus, useLazyFetchUserDetailsQuery, selectUserAuthStatus, GEN3_REDIRECT_URL, showModal, Modals, GEN3_FENCE_API, isAuthenticated, useGetLoginProvidersQuery, hideModal, useGetCSRFQuery, selectCurrentModal, fieldNameToTitle, useIsUserLoggedIn, useGetMDSQuery, selectAuthzMappingData, useGetAggMDSQuery, useAskQuestionMutation, useGetIndexAggMDSQuery, useGetTagsQuery, updateCohortFilter, selectIndexedFilterByName, isOperationWithField, removeCohortFilter, trimFirstFieldNameToTitle, selectCohortFilters, handleOperation, selectCurrentCohortId, setCohortFilter, clearCohortFilters, selectCurrentCohortName, useGeneralGQLQuery, selectIndexFilters, useGetRawDataAndTotalCountsQuery, Accessibility, downloadFromGuppyToBlob, downloadJSONDataFromGuppy, useGetAggsQuery, extractEnumFilterValue, useGetCountsQuery, selectHeadersWithCSRFToken, GEN3_GUPPY_API, useLaunchWorkspaceMutation, useGetWorkspacePayModelsQuery, selectActiveWorkspaceStatus, isFetchBaseQueryError, setActiveWorkspace, selectWorkspaceStatusFromService, selectActiveWorkspaceId, useGetWorkspaceOptionsQuery, GEN3_WORKSPACE_API, useGetExternalLoginsQuery, isWorkspaceRunningOrStopping, useSetCurrentPayModelMutation, PodStatus, PodConditionType, GEN3_COMMONS_NAME, createAppStore, createGen3AppWithOwnStore, createAppApiForRTKQ, getGen3AppId, CoreProvider, useGetCredentialsQuery, useRemoveCredentialMutation, useAddNewCredentialMutation, useGetDictionaryQuery, useGetProjectsDetailsQuery, useGetSubmissionsQuery, isCohortItem, isFileItem, fetchFencePresignedURL, HTTPError, isFilterSet, getNumberOfItemsInDatalist, isAdditionalDataItem, getTimestamp, useDataLibrary, useLazyGetCrosswalkDataQuery } from '@gen3/core';
+import { LoadingOverlay, Card, Group, Avatar, Text, Checkbox, Stack, Tooltip, UnstyledButton, ThemeIcon, Box, Select, Button, Divider, Textarea, FileButton, Anchor, Modal, Grid, Table, ColorSwatch, useMantineTheme, Loader, Center, Paper, Menu, Badge, Alert, Tabs, Accordion, Drawer, CopyButton, factory, useProps, getStyleObject, SegmentedControl, Switch, Autocomplete, TextInput, Title, ActionIcon, NumberInput, RangeSlider, MultiSelect, Transition, rem, Stepper, Image as Image$1, NavLink, Flex, ScrollArea, MantineProvider, createTheme, Highlight, List, FileInput, CloseButton } from '@mantine/core';
 import { useDeepCompareEffect, useDeepCompareMemo, useDeepCompareCallback } from 'use-deep-compare';
 import { useRouter } from 'next/router';
 import { usePathname } from 'next/navigation';
-import { MdLogin, MdClose, MdKeyboardDoubleArrowLeft, MdUndo, MdSearch, MdInfo, MdExpandLess, MdExpandMore, MdFlip, MdAddCircle, MdRemoveCircle, MdOutlineArrowBack, MdOutlineArrowForward, MdKeyboardArrowDown, MdKeyboardArrowUp, MdDownload, MdFormatQuote, MdOutlineSearch, MdOutlineBarChart, MdGroup, MdDelete } from 'react-icons/md';
+import { MdLogin, MdClose, MdKeyboardDoubleArrowLeft, MdUndo, MdSearch, MdInfo, MdExpandLess, MdExpandMore, MdFlip, MdAddCircle, MdRemoveCircle, MdOutlineArrowBack, MdOutlineArrowForward, MdKeyboardArrowDown, MdKeyboardArrowUp, MdDownload, MdFormatQuote, MdOutlineSearch, MdOutlineBarChart, MdGroup, MdDelete, MdOutlineRemoveCircle } from 'react-icons/md';
 import 'swr';
 import { getCookie, deleteCookie, setCookie } from 'cookies-next';
 import { decodeJwt } from 'jose';
 import { notifications, showNotification, cleanNotifications, Notifications } from '@mantine/notifications';
+import { twMerge } from 'tailwind-merge';
 import { IconAlertTriangle } from '@tabler/icons-react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { twMerge } from 'tailwind-merge';
 import { isArray, toString, capitalize as capitalize$1, get, partial, omit } from 'lodash';
 import { useCookies } from 'react-cookie';
 import FileSaver from 'file-saver';
-import { useClipboard, useResizeObserver, useDisclosure, useElementSize, useDidUpdate, mergeRefs, useReducedMotion, useMediaQuery, useFullscreen, useLocalStorage, useScrollIntoView } from '@mantine/hooks';
+import { useClipboard, useResizeObserver, useDisclosure, useElementSize, useDidUpdate, mergeRefs, useReducedMotion, useMediaQuery, useFullscreen, useLocalStorage, useScrollIntoView, getHotkeyHandler } from '@mantine/hooks';
 import { defaultComposer } from 'default-composer';
 import { Icon, addCollection } from '@iconify/react';
 import { init, getInstanceByDom } from 'echarts';
@@ -43,7 +43,7 @@ import sum from 'lodash/sum';
 import tw from 'tailwind-styled-components';
 import 'universal-cookie';
 import { RiCloseCircleLine } from 'react-icons/ri';
-import { IoMdArrowDropdown, IoMdRefresh, IoMdLogIn } from 'react-icons/io';
+import { IoMdArrowDropdown, IoMdRefresh, IoMdLogIn, IoMdInformationCircleOutline } from 'react-icons/io';
 import GraphiQL from 'graphiql';
 import { modals, ModalsProvider } from '@mantine/modals';
 import { BsArrowsFullscreen } from 'react-icons/bs';
@@ -586,6 +586,36 @@ var LoginButtonVisibility;
     LoginButtonVisibility["LogoutOnly"] = "logoutOnly";
 })(LoginButtonVisibility || (LoginButtonVisibility = {}));
 
+/**
+ * Merges default and user values for Tailwind classnames.
+ *
+ * @param {RecordType} defaultValues - The default values for the classnames.
+ * @param {RecordType} userValues - The user-defined values for the classnames.
+ * @param {StylingMergeMode} mode - Whether to merge or replace the default and user values. Default is merge.
+ * @returns {RecordType} - The merged default and user values for the classnames.
+ */ const mergeDefaultTailwindClassnames = (defaultValues, { mode = 'merge', ...userValues })=>{
+    const defaultKeys = Object.keys(defaultValues);
+    const mergedValues = {
+        ...defaultValues
+    };
+    if (mode === 'merge') {
+        defaultKeys.forEach((key)=>{
+            if (userValues[key]) {
+                mergedValues[key] = twMerge(defaultValues[key], userValues[key]);
+            }
+        });
+    }
+    if (mode === 'replace') {
+        defaultKeys.forEach((key)=>{
+            if (userValues[key]) {
+                mergedValues[key] = userValues[key];
+            }
+        });
+    }
+    return mergedValues;
+};
+const mergeTailwindClassnameWithDefault = (userValues, defaultValues)=>userValues ? twMerge(defaultValues, userValues) : defaultValues;
+
 const handleSelected = async (isAuthenticated, router, referrer, endSession)=>{
     if (!isAuthenticated) await router.push(`Login?redirect=${referrer}`);
     else {
@@ -595,7 +625,7 @@ const handleSelected = async (isAuthenticated, router, referrer, endSession)=>{
 const LoginButton = ({ icon = /*#__PURE__*/ jsx(MdLogin, {
     className: "pl-1",
     size: '1.55rem'
-}), hideText = false, className = 'flex flex-nowrap items-center font-content text-secondary-contrast-lighter align-middle border-b-2 hover:border-accent border-transparent mx-2', tooltip, visibility })=>{
+}), hideText = false, className = undefined, tooltip, visibility })=>{
     const router = useRouter();
     const pathname = usePathname();
     const { endSession } = useContext(SessionContext) ?? {
@@ -604,6 +634,7 @@ const LoginButton = ({ icon = /*#__PURE__*/ jsx(MdLogin, {
     const userStatus = useCoreSelector((state)=>selectUserAuthStatus(state));
     const authenticated = isAuthenticated(userStatus);
     if (visibility === LoginButtonVisibility.LogoutOnly && !authenticated) return null;
+    const mergedClassname = mergeTailwindClassnameWithDefault(className, 'flex flex-nowrap items-center font-content text-secondary-contrast-lighter align-middle border-b-2 hover:border-accent border-transparent mx-2');
     return /*#__PURE__*/ jsx(Tooltip, {
         label: tooltip,
         position: "bottom",
@@ -615,7 +646,7 @@ const LoginButton = ({ icon = /*#__PURE__*/ jsx(MdLogin, {
         children: /*#__PURE__*/ jsx(UnstyledButton, {
             onClick: ()=>handleSelected(authenticated, router, pathname, endSession),
             children: /*#__PURE__*/ jsxs("div", {
-                className: `flex items-center font-medium font-heading ${className}`,
+                className: mergedClassname,
                 children: [
                     !hideText ? authenticated ? 'Logout' : 'Login' : null,
                     icon
@@ -625,10 +656,10 @@ const LoginButton = ({ icon = /*#__PURE__*/ jsx(MdLogin, {
     });
 };
 
-const CardContainer = ({ children })=>/*#__PURE__*/ jsx("div", {
-        className: "flex justify-center pt-2 items-center",
+const CardContainer = ({ children, width = 'w-1/2' })=>/*#__PURE__*/ jsx("div", {
+        className: `flex justify-center pt-2 items-center m-2 ${width ?? ''}`,
         children: /*#__PURE__*/ jsx(Card, {
-            shadow: "sm",
+            shadow: "xs",
             p: "md",
             className: "bg-base-lightest border-2 border-base-lighter",
             children: /*#__PURE__*/ jsx(Group, {
@@ -645,7 +676,8 @@ const MessageText = ({ message, color })=>/*#__PURE__*/ jsx(Text, {
         fw: 500,
         children: message
     });
-const MessageCard = ({ message, icon, size = 'lg', color = 'utility.5' })=>/*#__PURE__*/ jsxs(CardContainer, {
+const MessageCard = ({ message, icon, size = 'lg', color = 'utility.5', width = 'w-1/2' })=>/*#__PURE__*/ jsxs(CardContainer, {
+        width: width,
         children: [
             /*#__PURE__*/ jsx(ThemeIcon, {
                 color: color,
@@ -878,8 +910,11 @@ var ContentType;
     ContentType["TextArray"] = "textArray";
     ContentType["Html"] = "html";
     ContentType["Markdown"] = "markdown";
+    ContentType["TextWithEmail"] = "textWithEmail";
+    ContentType["TextWithLink"] = "textWithLink";
+    ContentType["Link"] = "link";
 })(ContentType || (ContentType = {}));
-const TextContent = ({ text, className = 'inline text-base-contrast color-red-500 font-medium margin-block-start-1 margin-block-end-1', type = "text" })=>{
+const TextContent = ({ text, className = 'inline text-base-contrast color-red-500 font-medium margin-block-start-1 margin-block-end-1', type = "text", email = undefined, link = undefined })=>{
     switch(type){
         case "html":
             {
@@ -947,6 +982,48 @@ const TextContent = ({ text, className = 'inline text-base-contrast color-red-50
                     })
                 });
             }
+        case "textWithEmail":
+            {
+                const DEFAULT_STYLE = 'inline color-ink font-medium margin-block-start-1 margin-block-end-1';
+                const mergedClassname = className ? twMerge(DEFAULT_STYLE, className) : DEFAULT_STYLE;
+                const textString = Array.isArray(text) ? text.join('') : text;
+                return /*#__PURE__*/ jsx("div", {
+                    className: mergedClassname,
+                    children: /*#__PURE__*/ jsxs("span", {
+                        children: [
+                            textString,
+                            email && /*#__PURE__*/ jsx(Anchor, {
+                                classNames: {
+                                    root: mergedClassname
+                                },
+                                href: `mailto:${email}`,
+                                children: ` ${email}.`
+                            })
+                        ]
+                    })
+                });
+            }
+        case "textWithLink":
+            {
+                const DEFAULT_STYLE = 'inline color-ink font-medium margin-block-start-1 margin-block-end-1';
+                const mergedClassname = className ? twMerge(DEFAULT_STYLE, className) : DEFAULT_STYLE;
+                const textString = Array.isArray(text) ? text.join('') : text;
+                return /*#__PURE__*/ jsx("div", {
+                    className: mergedClassname,
+                    children: /*#__PURE__*/ jsxs("span", {
+                        children: [
+                            textString,
+                            link && /*#__PURE__*/ jsx(Anchor, {
+                                classNames: {
+                                    root: mergedClassname
+                                },
+                                href: link,
+                                children: ` ${email}.`
+                            })
+                        ]
+                    })
+                });
+            }
         case "text":
         default:
             return /*#__PURE__*/ jsx("div", {
@@ -958,28 +1035,6 @@ const TextContent = ({ text, className = 'inline text-base-contrast color-red-50
     }
 };
 
-const DEFAULT_STYLE = 'inline color-ink font-medium margin-block-start-1 margin-block-end-1';
-const ContactWithEmailContent = ({ text, email, className })=>{
-    const mergedClassname = className ? twMerge(DEFAULT_STYLE, className) : DEFAULT_STYLE;
-    const textString = Array.isArray(text) ? text.join(' ') : text;
-    // TODO: add better support for classnames
-    return /*#__PURE__*/ jsx("div", {
-        className: mergedClassname,
-        children: /*#__PURE__*/ jsxs("span", {
-            children: [
-                textString,
-                email && /*#__PURE__*/ jsx(Anchor, {
-                    classNames: {
-                        root: mergedClassname
-                    },
-                    href: `mailto:${email}`,
-                    children: ` ${email}.`
-                })
-            ]
-        })
-    });
-};
-
 const filterRedirect = (redirect)=>{
     let redirectPath = '';
     if (Array.isArray(redirect)) {
@@ -1035,10 +1090,7 @@ const LoginPanel = (loginConfig)=>{
                     loginConfig?.showCredentialsLogin && process.env.NODE_ENV === 'development' && /*#__PURE__*/ jsx(CredentialsLogin, {
                         handleLogin: handleCredentialsLogin
                     }),
-                    bottomContent?.map((content, index)=>content?.email ? /*#__PURE__*/ createElement(ContactWithEmailContent, {
-                            ...content,
-                            key: `bottomContent-${index}`
-                        }) : /*#__PURE__*/ createElement(TextContent, {
+                    bottomContent?.map((content, index)=>/*#__PURE__*/ createElement(TextContent, {
                             ...content,
                             key: `bottomContent-${index}`
                         }))
@@ -2375,35 +2427,6 @@ const extractClassName = (key, classNames)=>{
     return '';
 };
 
-/**
- * Merges default and user values for Tailwind classnames.
- *
- * @param {RecordType} defaultValues - The default values for the classnames.
- * @param {RecordType} userValues - The user-defined values for the classnames.
- * @param {StylingMergeMode} mode - Whether to merge or replace the default and user values. Default is merge.
- * @returns {RecordType} - The merged default and user values for the classnames.
- */ const mergeDefaultTailwindClassnames = (defaultValues, { mode = 'merge', ...userValues })=>{
-    const defaultKeys = Object.keys(defaultValues);
-    const mergedValues = {
-        ...defaultValues
-    };
-    if (mode === 'merge') {
-        defaultKeys.forEach((key)=>{
-            if (userValues[key]) {
-                mergedValues[key] = twMerge(defaultValues[key], userValues[key]);
-            }
-        });
-    }
-    if (mode === 'replace') {
-        defaultKeys.forEach((key)=>{
-            if (userValues[key]) {
-                mergedValues[key] = userValues[key];
-            }
-        });
-    }
-    return mergedValues;
-};
-
 const isPropertyKey = (value)=>{
     return typeof value === 'string' || typeof value === 'number' || typeof value === 'symbol';
 };
@@ -2454,8 +2477,9 @@ const FooterRowComponent = ({ item, rowClassname })=>{
         case 'Links':
             {
                 const links = item[itemType];
+                const mergedClassname = mergeTailwindClassnameWithDefault(className, 'flex space-x-1');
                 return /*#__PURE__*/ jsx("div", {
-                    className: `flex flex-no-wrap space-x-4 ${className ?? ''}`,
+                    className: mergedClassname,
                     children: links?.links.map((link, i)=>{
                         return /*#__PURE__*/ jsxs(React__default.Fragment, {
                             children: [
@@ -2590,19 +2614,20 @@ const Gen3Link = ({ className, href, linkType, text, showExternalIcon = false })
     });
 };
 
-const LoginAccountButton = ()=>{
+const LoginAccountButton = ({ className = undefined })=>{
     const router = useRouter();
     const handleSelected = async ()=>{
         await router.push('Profile');
     };
     const userStatus = useCoreSelector((state)=>selectUserAuthStatus(state));
     const userInfo = useCoreSelector((state)=>selectUserDetails(state));
+    const mergedClassname = mergeTailwindClassnameWithDefault(className, 'flex flex-nowrap items-center align-middle border-b-2 hover:border-accent border-transparent');
     if (userStatus && isAuthenticated(userStatus)) {
         return /*#__PURE__*/ jsx(UnstyledButton, {
             className: "mx-2",
             onClick: ()=>handleSelected(),
             children: /*#__PURE__*/ jsx("div", {
-                className: "flex flex-nowrap items-center align-middle border-b-2 hover:border-accent border-transparent",
+                className: mergedClassname,
                 children: userInfo?.username
             })
         });
@@ -2669,7 +2694,8 @@ const processTopBarItems = (items, showLogin)=>{
 };
 const TopBar = ({ items, loginButtonVisibility = LoginButtonVisibility.Hidden, classNames = {} })=>{
     const classNamesDefaults = {
-        root: 'flex justify-end items-center align-middle w-100 bg-secondary-lighter'
+        root: 'flex justify-end items-center align-middle w-100 bg-secondary-lighter',
+        login: 'font-content hover:border-accent'
     };
     const mergedClassnames = mergeDefaultTailwindClassnames(classNamesDefaults, classNames);
     return /*#__PURE__*/ jsx("div", {
@@ -2681,9 +2707,12 @@ const TopBar = ({ items, loginButtonVisibility = LoginButtonVisibility.Hidden, c
                 className: "flex items-center align-middle",
                 children: [
                     processTopBarItems(items, loginButtonVisibility === LoginButtonVisibility.Visible),
-                    loginButtonVisibility != LoginButtonVisibility.Hidden ? /*#__PURE__*/ jsx(LoginAccountButton, {}) : null,
+                    loginButtonVisibility != LoginButtonVisibility.Hidden ? /*#__PURE__*/ jsx(LoginAccountButton, {
+                        className: extractClassName('login', mergedClassnames)
+                    }) : null,
                     loginButtonVisibility != LoginButtonVisibility.Hidden ? /*#__PURE__*/ jsx(LoginButton, {
-                        visibility: loginButtonVisibility
+                        visibility: loginButtonVisibility,
+                        className: extractClassName('login', mergedClassnames)
                     }) : null
                 ]
             })
@@ -2712,7 +2741,7 @@ const TopBar = ({ items, loginButtonVisibility = LoginButtonVisibility.Hidden, c
 
 const NavigationLogo = ({ src, title, description, width, height, divider = false, basePath = '', classNames = {} })=>{
     const classNamesDefaults = {
-        root: 'relative flex py-2 justify-start items-center align-middle font-heading font-bold tracking-wide text-xl ml-[5px] mr-[20px]',
+        root: 'relative flex py-0 justify-start items-center align-middle font-heading font-bold tracking-wide text-xl ml-[5px] mr-[20px]',
         link: 'relative object-contain',
         logo: 'px-3',
         title: 'border-solid border-base-darker ml-1 mr-3',
@@ -2760,9 +2789,10 @@ const NavigationLogo = ({ src, title, description, width, height, divider = fals
  * @param name - the name of the button
  * @param iconHeight - the height of the icon
  * @param classNames - the class names to use for root, label, icon/tooltip and arrow'
- */ const NavigationBarButton = ({ tooltip, icon, href, name, iconHeight = '27px', classNames = {} })=>{
+ * @param noBasePath - set to true to avoid prepending a basePath to the link
+ */ const NavigationBarButton = ({ tooltip, icon, href, name, iconHeight = '27px', classNames = {}, noBasePath = false })=>{
     const classNamesDefaults = {
-        root: `flex flex-col flex-nowrap px-3 py-2 pt-4 items-center align-center text-primary hover:text-accent opacity-80 hover:opacity-100`,
+        root: 'flex flex-col flex-nowrap px-3 py-2 pt-4 items-center align-center text-primary hover:text-accent opacity-80 hover:opacity-100',
         label: 'pt-1.5 body-typo font-heading text-sm text-nowrap',
         icon: 'mt-0.5 ml-1',
         ...TooltipStyle
@@ -2771,13 +2801,31 @@ const NavigationLogo = ({ src, title, description, width, height, divider = fals
     return /*#__PURE__*/ jsx(React__default.Fragment, {
         children: /*#__PURE__*/ jsx(Tooltip, {
             label: tooltip,
+            disabled: !tooltip,
             multiline: true,
             position: "bottom",
             arrowSize: 8,
             withArrow: true,
             zIndex: 1000,
             w: 220,
-            children: /*#__PURE__*/ jsx(Link, {
+            children: noBasePath ? /*#__PURE__*/ jsx("a", {
+                href: `${href}`,
+                children: /*#__PURE__*/ jsxs("div", {
+                    className: extractClassName('root', mergedClassnames),
+                    role: "navigation",
+                    children: [
+                        /*#__PURE__*/ jsx(Icon, {
+                            height: iconHeight,
+                            icon: icon,
+                            className: extractClassName('icon', mergedClassnames)
+                        }),
+                        /*#__PURE__*/ jsx("p", {
+                            className: extractClassName('label', mergedClassnames),
+                            children: name
+                        })
+                    ]
+                })
+            }) : /*#__PURE__*/ jsx(Link, {
                 href: `${// need this to preserve running in hybrid mode
                 process.env.NEXT_PUBLIC_PORTAL_BASENAME && process.env.NEXT_PUBLIC_PORTAL_BASENAME !== '/' ? process.env.NEXT_PUBLIC_PORTAL_BASENAME : ''}${href}`,
                 children: /*#__PURE__*/ jsxs("div", {
@@ -2847,7 +2895,8 @@ const NavigationLogo = ({ src, title, description, width, height, divider = fals
                             icon: x.icon,
                             href: x.href,
                             name: x.name,
-                            classNames: x.classNames
+                            classNames: x.classNames,
+                            noBasePath: x?.noBasePath
                         })
                     }, `${x.name}-${index}`);
                 })
@@ -3014,6 +3063,7 @@ const HorizontalNavigationBar = ({ actions, items, logo = undefined, loginIcon =
  * @param {string} props.type - The type of header to render. Default value is 'original'.
  * @returns {JSX.Element} - The rendered Header component.
  */ const Header = ({ top, navigation, banners, type = 'original' })=>{
+    console.log('top', top);
     return type === 'horizontal' ? /*#__PURE__*/ jsxs("div", {
         className: "w-full",
         children: [
@@ -3359,14 +3409,14 @@ var AccessLevel;
 const DataAccessCellRenderer = ({ value })=>{
     if (value === AccessLevel.PENDING) {
         return /*#__PURE__*/ jsx(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__*/ jsx(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) {
@@ -3377,8 +3427,8 @@ const DataAccessCellRenderer = ({ value })=>{
     }
     if (value === AccessLevel.UNACCESSIBLE) {
         return /*#__PURE__*/ jsx(LuLock, {
-            color: "green",
-            children: "You have access to this study."
+            color: "red",
+            children: "You do not have access to this study."
         });
     }
     return /*#__PURE__*/ jsx(React__default.Fragment, {});
@@ -5064,7 +5114,7 @@ const BuildSummaryStatisticPanel = (summaries = [])=>{
         }
     });
 };
-const columns = [
+const columns$3 = [
     'grid-cols-0',
     'grid-cols-1',
     'grid-cols-2',
@@ -5079,7 +5129,7 @@ const columns = [
 ];
 const SummaryStatisticPanel = ({ summaries })=>{
     return /*#__PURE__*/ 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)
     });
 };
@@ -8028,7 +8078,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 = useCoreDispatch();
     const [queryExpressionsExpanded, setQueryExpressionsExpanded] = useContext(QueryExpressionsExpandedContext);
     const currentCohortId = useCoreSelector((state)=>selectCurrentCohortId(state));
@@ -8091,12 +8141,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__*/ 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__*/ jsx(RemoveButton, {
                                 value: value
                             }),
                             onClick: ()=>{
+                                if (displayOnly) return;
                                 const newOperands = operandsArray.filter((o)=>o !== x);
                                 const fieldToUpdate = path && path != '.' ? [
                                     path,
@@ -8138,7 +8188,7 @@ const IncludeExcludeQueryElement = ({ index, field, path, operator, operands })=
         ]
     });
 };
-const ComparisonElement = ({ index, filter, showLabel = true })=>{
+const ComparisonElement = ({ index, filter, showLabel = true, displayOnly = false })=>{
     const coreDispatch = useCoreDispatch();
     // fix the code below
     const handleKeepMember = (keep)=>{
@@ -8158,7 +8208,10 @@ const ComparisonElement = ({ index, filter, showLabel = true })=>{
                 children: [
                     /*#__PURE__*/ 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__*/ jsx(QueryRepresentationText, {
@@ -8211,7 +8264,7 @@ const ClosedRangeQueryElement = ({ index, lower, upper, op = 'and' })=>{
         })
     });
 };
-const QueryElement = ({ index, field, path, children })=>{
+const QueryElement = ({ index, field, path, children, displayOnly = false })=>{
     const coreDispatch = useCoreDispatch();
     const [, setQueryExpressionsExpanded] = useContext(QueryExpressionsExpandedContext);
     const currentCohortId = useCoreSelector((state)=>selectCurrentCohortId(state));
@@ -8233,7 +8286,7 @@ const QueryElement = ({ index, field, path, children })=>{
     return /*#__PURE__*/ jsxs(QueryItemContainer, {
         children: [
             children,
-            /*#__PURE__*/ jsx("button", {
+            !displayOnly && /*#__PURE__*/ 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 ${fieldNameToTitle(field)}`,
@@ -8248,85 +8301,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__*/ jsx(QueryElement, {
                 ...f,
                 index: this.index,
                 path: this.path,
+                displayOnly: this.displayOnly,
                 children: /*#__PURE__*/ jsx(IncludeExcludeQueryElement, {
                     ...f,
                     index: this.index,
-                    path: this.path
+                    path: this.path,
+                    displayOnly: this.displayOnly
                 })
             }, f.field);
         this.handleExcludes = (f)=>/*#__PURE__*/ jsx(QueryElement, {
                 ...f,
                 index: this.index,
                 path: this.path,
+                displayOnly: this.displayOnly,
                 children: /*#__PURE__*/ jsx(IncludeExcludeQueryElement, {
                     ...f,
                     index: this.index,
-                    path: this.path
+                    path: this.path,
+                    displayOnly: this.displayOnly
                 })
             }, f.field);
         this.handleEquals = (f)=>/*#__PURE__*/ jsx(QueryElement, {
                 ...f,
                 index: this.index,
                 path: this.path,
+                displayOnly: this.displayOnly,
                 children: /*#__PURE__*/ jsx(ComparisonElement, {
                     filter: f,
-                    index: this.index
+                    index: this.index,
+                    displayOnly: this.displayOnly
                 })
             }, f.field);
         this.handleNotEquals = (f)=>/*#__PURE__*/ jsx(QueryElement, {
                 ...f,
                 index: this.index,
                 path: this.path,
+                displayOnly: this.displayOnly,
                 children: /*#__PURE__*/ jsx(ComparisonElement, {
                     filter: f,
-                    index: this.index
+                    index: this.index,
+                    displayOnly: this.displayOnly
                 })
             }, f.field);
         this.handleLessThan = (f)=>/*#__PURE__*/ jsx(QueryElement, {
                 ...f,
                 index: this.index,
                 path: this.path,
+                displayOnly: this.displayOnly,
                 children: /*#__PURE__*/ jsx(ComparisonElement, {
                     filter: f,
-                    index: this.index
+                    index: this.index,
+                    displayOnly: this.displayOnly
                 })
             }, f.field);
         this.handleLessThanOrEquals = (f)=>/*#__PURE__*/ jsx(QueryElement, {
                 ...f,
                 index: this.index,
                 path: this.path,
+                displayOnly: this.displayOnly,
                 children: /*#__PURE__*/ jsx(ComparisonElement, {
                     filter: f,
-                    index: this.index
+                    index: this.index,
+                    displayOnly: this.displayOnly
                 })
             }, f.field);
         this.handleGreaterThan = (f)=>/*#__PURE__*/ jsx(QueryElement, {
                 ...f,
                 index: this.index,
                 path: this.path,
+                displayOnly: this.displayOnly,
                 children: /*#__PURE__*/ jsx(ComparisonElement, {
                     filter: f,
-                    index: this.index
+                    index: this.index,
+                    displayOnly: this.displayOnly
                 })
             }, f.field);
         this.handleGreaterThanOrEquals = (f)=>/*#__PURE__*/ jsx(QueryElement, {
                 ...f,
                 index: this.index,
                 path: this.path,
+                displayOnly: this.displayOnly,
                 children: /*#__PURE__*/ jsx(ComparisonElement, {
                     filter: f,
-                    index: this.index
+                    index: this.index,
+                    displayOnly: this.displayOnly
                 })
             }, f.field);
         this.handleExists = (f)=>/*#__PURE__*/ jsx(QueryElement, {
                 ...f,
                 index: this.index,
                 path: this.path,
+                displayOnly: this.displayOnly,
                 children: /*#__PURE__*/ jsx(ExistsElement, {
                     ...f
                 })
@@ -8335,6 +8405,7 @@ const QueryElement = ({ index, field, path, children })=>{
                 ...f,
                 index: this.index,
                 path: this.path,
+                displayOnly: this.displayOnly,
                 children: /*#__PURE__*/ jsx(ExistsElement, {
                     ...f
                 })
@@ -8343,9 +8414,11 @@ const QueryElement = ({ index, field, path, children })=>{
                 ...f,
                 index: this.index,
                 path: this.path,
+                displayOnly: this.displayOnly,
                 children: /*#__PURE__*/ jsx(IncludeExcludeQueryElement, {
                     ...f,
-                    index: this.index
+                    index: this.index,
+                    displayOnly: this.displayOnly
                 })
             }, f.field);
         this.handleIntersection = (f)=>{
@@ -8379,17 +8452,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 handleOperation(handler, filter);
 };
 
@@ -8599,7 +8673,7 @@ const reducer = (state, action)=>{
             }
     }
 };
-const QueryExpressionSection = ({ index, filters, currentCohortName, currentCohortId })=>{
+const QueryExpressionSection = ({ index, filters, currentCohortName, currentCohortId, displayOnly = false, showTitle = true })=>{
     const [expandedState, setExpandedState] = useReducer(reducer, {});
     const [filtersSectionCollapsed, setFiltersSectionCollapsed] = useState(true);
     const filtersRef = useRef(null);
@@ -8656,14 +8730,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__*/ jsx(OverflowTooltippedLabel, {
+                            showTitle && /*#__PURE__*/ jsx(OverflowTooltippedLabel, {
                                 label: currentCohortName,
                                 className: "font-bold text-secondary-contrast-darkest ml-3 max-w-[260px]",
                                 children: currentCohortName
                             }),
                             /*#__PURE__*/ jsxs(React__default.Fragment, {
                                 children: [
-                                    /*#__PURE__*/ jsx("button", {
+                                    !displayOnly && /*#__PURE__*/ 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,
@@ -8748,7 +8822,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);
                         })
                     })
                 ]
@@ -10375,7 +10449,6 @@ const NotebookCard = ({ info })=>{
     const { status } = useCoreSelector(selectWorkspaceStatusFromService);
     const requestedStatus = useCoreSelector(selectRequestedWorkspaceStatus);
     const workspaceId = useCoreSelector(selectActiveWorkspaceId);
-    console.log('NotebookCard: ', requestedStatus, workspaceId, status);
     return /*#__PURE__*/ jsxs(Card, {
         withBorder: true,
         radius: "xs",
@@ -11205,7 +11278,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}`);
         }
@@ -16628,7 +16701,6 @@ const AnalysisCardEditor = ()=>{
                 });
                 if (Array.isArray(withImages)) {
                     updateHistory(withImages);
-                    console.log('Imported cards:', withImages);
                 }
             } catch (error) {
                 alert('Invalid file format');
@@ -17195,6 +17267,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 (isCohortItem(datasetOrCohort)) {
+        return {
+            ...datasetOrCohort,
+            datasetId: dataId,
+            datasetName: name
+        };
+    } else {
+        if (!fileId) return undefined;
+        if (!(fileId in datasetOrCohort.items)) return undefined;
+        if (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 (isCohortItem(item)) {
+        // For CohortItems
+        return `cohort_${item.datasetId}`;
+    } else {
+        // For FileItems
+        return `file_${item.datasetId}_${item.id}`;
+    }
+};
+
+// Create the context
+const DataLibrarySelectionContext = /*#__PURE__*/ 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] = useReducer(dataLibrarySelectionReducer, {});
+    const [gatheredItems, setGatheredItems] = 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__*/ 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 = 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__*/ jsx("div", {
+        className: "flex justify-between p-2 bg-primary-dark text-primary-contrast-dark",
+        children: /*#__PURE__*/ jsxs(Group, {
+            children: [
+                /*#__PURE__*/ jsx(Tooltip, {
+                    label: "Retrieve selections",
+                    children: /*#__PURE__*/ jsx(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__*/ jsx(Tooltip, {
+                    label: "Clear selections",
+                    children: /*#__PURE__*/ jsx(ActionIcon, {
+                        disabled: retrieveDisabled,
+                        variant: "outline",
+                        size: size,
+                        onClick: ()=>{
+                            clearSelections();
+                        },
+                        color: "accent-contrast.4",
+                        "aria-label": "clear selections",
+                        children: /*#__PURE__*/ jsx(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__*/ jsxs("div", {
+        className: "flex items-center bg-primary-darker  px-4 py-2 mt-2 min-h-10 text-heading",
+        children: [
+            numberOfItems > 0 && /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center flex-nowrap overflow-ellipsis text-primary-contrast-darker",
+                children: [
+                    /*#__PURE__*/ jsx(Text, {
+                        fw: 600,
+                        size: size,
+                        className: "mr-1 ",
+                        children: numberOfItems
+                    }),
+                    /*#__PURE__*/ jsx(Text, {
+                        fw: 400,
+                        size: size,
+                        className: "mr-1 text-primary-contrast-lighter",
+                        children: "selected"
+                    })
+                ]
+            }),
+            numberOfItems > 0 && numberOfWarnings > 0 && /*#__PURE__*/ jsx(Icon, {
+                icon: "gen3:dot",
+                className: "text-primary-contrast-lighter",
+                width: iconSize,
+                height: iconSize
+            }),
+            numberOfWarnings > 0 && /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center flex-nowrap overflow-ellipsis",
+                children: [
+                    /*#__PURE__*/ jsx(Icon, {
+                        icon: "gen3:warning",
+                        width: iconSize,
+                        height: iconSize,
+                        className: "text-utility-warning m-1"
+                    }),
+                    /*#__PURE__*/ jsx(Text, {
+                        fw: 600,
+                        size: size,
+                        className: "mr-1 text-primary-contrast-lighter",
+                        children: numberOfWarnings
+                    }),
+                    /*#__PURE__*/ jsx(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 = useMemo(()=>[
+            {
+                accessorKey: 'valid',
+                enableHiding: true,
+                size: 40,
+                maxSize: 50,
+                header: 'Valid',
+                Cell: ({ row })=>{
+                    if (row.original.valid === undefined) return /*#__PURE__*/ jsx("span", {});
+                    if (!row.original.valid) {
+                        return /*#__PURE__*/ jsx(Tooltip, {
+                            label: row.original?.messages?.join('\n') ?? 'Unknown Error',
+                            children: /*#__PURE__*/ jsx(Icon, {
+                                icon: "gen3:warning",
+                                width: iconSize,
+                                height: iconSize,
+                                className: "text-utility-warning text-xl",
+                                children: /*#__PURE__*/ jsx(Text, {
+                                    fw: 400,
+                                    size: size,
+                                    children: row.original?.messages?.length
+                                })
+                            })
+                        });
+                    } else {
+                        return /*#__PURE__*/ jsx(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__*/ jsx(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 = useDeepCompareMemo(()=>{
+        let hasInvalidRows = false;
+        const rows = validatedItems.map((item)=>{
+            if (!item.valid) hasInvalidRows = true;
+            if (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 = 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__*/ jsxs("div", {
+        className: "flex flex-col ml-8",
+        children: [
+            /*#__PURE__*/ jsx(SelectedItemsTableHeader, {
+                numberOfItems: Object.keys(rowSelection).length,
+                numberOfWarnings: tableRows.rows.filter((x)=>x.valid === false).length,
+                size: size
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "mt-2",
+                children: /*#__PURE__*/ jsx(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 || !isFileItem(validatedSelections[0])) {
+        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 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__*/ jsx("div", {
+        className: "flex justify-between items-center",
+        children: /*#__PURE__*/ jsx(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] = useState(null);
+    const { actions } = props;
+    const { gatheredItems } = useDataLibrarySelection();
+    const [rowSelection, setRowSelection] = useState({});
+    const [actionFunction, setActionFunction] = useState({
+        action: NullAction
+    });
+    const [actionConfig, setActionConfig] = useState(null);
+    const [isRunning, setIsRunning] = useState(false);
+    const destinations = useMemo(()=>{
+        return actions.map((action)=>{
+            return {
+                label: action.label,
+                value: action.id
+            };
+        });
+    }, [
+        actions
+    ]);
+    const onError = (error)=>{
+        setIsRunning(false);
+        if (error instanceof HTTPError) {
+            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__*/ jsx(Icon, {
+                    icon: "gen3:outline-error"
+                }),
+                loading: false
+            });
+        }
+    };
+    const onDone = (arg)=>{
+        setIsRunning(false);
+        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 = 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 = 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__*/ jsx(Modal, {
+        ...props,
+        closeOnEscape: true,
+        centered: true,
+        withinPortal: false,
+        title: /*#__PURE__*/ jsx(ModalHeader, {}),
+        classNames: {
+            header: 'm-0 p-2 min-h-10 bg-primary-lightest',
+            content: 'scroll-smooth'
+        },
+        overlayProps: {
+            opacity: 0.5
+        },
+        children: /*#__PURE__*/ jsxs(Stack, {
+            children: [
+                /*#__PURE__*/ jsx(SelectedItemsTable, {
+                    validatedItems: validatedLibrarySelections,
+                    rowSelection: rowSelection,
+                    setRowSelection: setRowSelection
+                }),
+                /*#__PURE__*/ jsxs(Group, {
+                    justify: "space-between",
+                    children: [
+                        /*#__PURE__*/ jsxs(Group, {
+                            children: [
+                                /*#__PURE__*/ jsx(Text, {
+                                    fw: 600,
+                                    children: "Destination:"
+                                }),
+                                /*#__PURE__*/ jsx(Select, {
+                                    data: destinations,
+                                    value: value ? value.value : null,
+                                    onChange: (value, option)=>{
+                                        setValue(option);
+                                        if (value) setSelectionAction(value);
+                                        else setActionFunction({
+                                            action: NullAction
+                                        });
+                                    }
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Button, {
+                            loading: isRunning,
+                            rightSection: actionConfig?.rightIcon ? /*#__PURE__*/ jsx(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 (isCohortItem(dataSetOrCohort)) {
+        return {
+            [dataSetOrCohort.id]: true
+        };
+    }
+    return Object.entries(dataSetOrCohort.items).reduce((acc, [key, item])=>{
+        if (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 (isCohortItem(datasetContents)) {
+            acc[datasetId] = {
+                id: datasetId,
+                objectIds: {
+                    [datasetId]: true
+                }
+            };
+        } else acc[datasetId] = {
+            id: datasetId,
+            objectIds: getDatasetMembers(datasetContents)
+        };
+        return acc;
+    }, {});
+};
+
+const EmptyList = ()=>{
+    return /*#__PURE__*/ jsxs(Group, {
+        gap: "xs",
+        classNames: {
+            root: 'w-100'
+        },
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: "text-utility-warning",
+                children: /*#__PURE__*/ jsx(IoMdInformationCircleOutline, {
+                    size: "1.5rem"
+                })
+            }),
+            /*#__PURE__*/ jsx(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] = useState(undefined);
+    const handleUpdateName = ()=>{
+        updateHandler({
+            name: value
+        });
+        setValue(undefined);
+    };
+    const theme = useMantineTheme();
+    const iconSize = IconSize[size] || IconSize['sm'];
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex justify-start w-full items-center px-4 group-data-[active]:bg-secondary-lightest",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center w-1/4",
+                children: [
+                    /*#__PURE__*/ jsx(Checkbox, {
+                        size: size,
+                        onChange: (event)=>{
+                            selectListHandler(event.currentTarget.checked);
+                            event.stopPropagation();
+                        },
+                        checked: selectedState == 'checked',
+                        indeterminate: selectedState == 'indeterminate'
+                    }),
+                    /*#__PURE__*/ jsx(Accordion.Control, {
+                        ...props,
+                        className: "w-4 mr-3"
+                    }),
+                    value ? /*#__PURE__*/ jsx(TextInput, {
+                        size: size,
+                        classNames: {
+                            root: 'ml-2',
+                            input: 'font-bold'
+                        },
+                        value: value,
+                        onChange: (e)=>setValue(e.target.value),
+                        onKeyDown: getHotkeyHandler([
+                            [
+                                'Enter',
+                                handleUpdateName
+                            ]
+                        ]),
+                        rightSection: /*#__PURE__*/ jsx(CloseButton, {
+                            "aria-label": "Clear input",
+                            onClick: ()=>setValue(undefined),
+                            style: {
+                                display: value ? undefined : 'none'
+                            }
+                        })
+                    }) : /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center justify-end",
+                        children: [
+                            /*#__PURE__*/ jsx(Text, {
+                                fw: 600,
+                                className: "ml-2 w-100 py-2 mr-2",
+                                "aria-label": listName,
+                                size: size,
+                                children: listName
+                            }),
+                            /*#__PURE__*/ jsx(Tooltip, {
+                                label: "Change name of list",
+                                children: /*#__PURE__*/ jsx(ActionIcon, {
+                                    color: "accent.4",
+                                    variant: "transparent",
+                                    "aria-label": "Change datalist name",
+                                    onClick: ()=>setValue(listName),
+                                    children: /*#__PURE__*/ jsx(Icon, {
+                                        icon: "gen3:edit",
+                                        height: iconSize,
+                                        width: iconSize,
+                                        color: theme.colors.accent[4]
+                                    })
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center ml-auto space-x-2",
+                children: [
+                    numberOfItems === 0 && /*#__PURE__*/ jsx(EmptyList, {}),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center space-x-2",
+                        children: [
+                            /*#__PURE__*/ jsx(Text, {
+                                fw: 600,
+                                c: "base-contrast.2",
+                                tt: "uppercase",
+                                size: size,
+                                children: "Created:"
+                            }),
+                            /*#__PURE__*/ jsx(Text, {
+                                fw: 500,
+                                c: "base-contrast.2",
+                                size: size,
+                                children: formatDate(createdTime)
+                            }),
+                            /*#__PURE__*/ jsx(Icon, {
+                                icon: "gen3:dot",
+                                height: iconSize,
+                                width: iconSize,
+                                color: theme.colors.accent[4]
+                            }),
+                            /*#__PURE__*/ jsx(Text, {
+                                fw: 600,
+                                c: "base-contrast.2",
+                                tt: "uppercase",
+                                size: size,
+                                children: "Updated:"
+                            }),
+                            /*#__PURE__*/ jsx(Text, {
+                                fw: 500,
+                                c: "base-contrast.2",
+                                size: size,
+                                children: formatDate(updatedTime)
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(Tooltip, {
+                        label: `Delete ${listName}. Will not delete dataset`,
+                        children: /*#__PURE__*/ jsx(ActionIcon, {
+                            color: "accent.4",
+                            variant: "transparent",
+                            "aria-label": "delete list",
+                            onClick: ()=>deleteListHandler(),
+                            children: /*#__PURE__*/ jsx(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 = useMantineReactTable({
+        columns: columns$2,
+        data: data,
+        ...commonTableSettings(size),
+        enableRowActions: false,
+        enableRowSelection: false,
+        enableBottomToolbar: data.length > 10,
+        enablePagination: data.length > 10
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col w-inherit gap-y-1",
+        children: [
+            /*#__PURE__*/ jsx(Text, {
+                fw: 600,
+                fs: "md",
+                c: "secondary.5",
+                tt: "uppercase",
+                children: header
+            }),
+            /*#__PURE__*/ jsx(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] = useState({});
+    const { selections, updateListMemberSelections } = useDataLibrarySelection();
+    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 = 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__*/ jsxs("div", {
+        className: "flex flex-col gap-y-1",
+        children: [
+            /*#__PURE__*/ jsx(Text, {
+                fw: 600,
+                fs: size,
+                c: "secondary.5",
+                tt: "uppercase",
+                children: header
+            }),
+            /*#__PURE__*/ jsx(MantineReactTable, {
+                table: table
+            })
+        ]
+    });
+};
+
+const LabeledText = ({ label, text })=>{
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex p-1 space-x-2",
+        children: [
+            /*#__PURE__*/ jsxs(Text, {
+                fw: 600,
+                children: [
+                    label,
+                    ":"
+                ]
+            }),
+            /*#__PURE__*/ jsxs(Text, {
+                fw: 400,
+                children: [
+                    " ",
+                    text
+                ]
+            })
+        ]
+    });
+};
+const QueryDetails = ({ name, schemaVersion, index, data, id })=>{
+    if (!data) {
+        return /*#__PURE__*/ jsx(ErrorCard, {
+            message: "No cohort query"
+        });
+    }
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col",
+        children: [
+            /*#__PURE__*/ jsxs(Group, {
+                classNames: {
+                    root: 'p-2 bg-base-lighter rounded-t-lg border-2 border-b-0 border-base-light'
+                },
+                children: [
+                    /*#__PURE__*/ jsx(Text, {
+                        fw: 700,
+                        children: name
+                    }),
+                    /*#__PURE__*/ jsx(LabeledText, {
+                        label: "Index:",
+                        text: index
+                    }),
+                    /*#__PURE__*/ jsx(LabeledText, {
+                        label: "Schema Version:",
+                        text: schemaVersion
+                    }),
+                    /*#__PURE__*/ jsx(LabeledText, {
+                        label: "ID:",
+                        text: id
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "p-2 overflow-scroll w-full bg-base-lighter rounded-b-lg border-2 border-t-0 border-base-light",
+                children: isFilterSet(data) ? /*#__PURE__*/ jsx(QueryExpressionSection, {
+                    currentCohortId: id,
+                    index: index,
+                    currentCohortName: name,
+                    filters: data,
+                    displayOnly: true,
+                    showTitle: false
+                }) : /*#__PURE__*/ jsx(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] = useState({});
+    const { selections, updateSelections } = useDataLibrarySelection();
+    // build the rows
+    const rows = 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;
+            }, {});
+        });
+    };
+    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 = 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__*/ 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__*/ jsx(Tooltip, {
+                label: row.original.isCohort ? 'Remove cohort from list' : 'Remove dataset from list',
+                children: /*#__PURE__*/ jsxs(Button, {
+                    variant: "transparent",
+                    "aria-label": `remove ${row.original.isCohort ? 'cohort' : 'dataset'}  ${row.original.name} from list`,
+                    onClick: ()=>{
+                        removeList(row.id);
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx(MdOutlineRemoveCircle, {
+                            size: "1.5rem"
+                        }),
+                        row.original.itemType
+                    ]
+                })
+            }),
+        mantineDetailPanelProps: {
+            style: {
+                padding: '0px',
+                margin: '0px'
+            }
+        },
+        renderDetailPanel: ({ row })=>{
+            const rowData = data[row.id];
+            return /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-col w-full gap-y-4 pr-4",
+                children: [
+                    rowData?.files.length > 0 && /*#__PURE__*/ jsx(FilesTable, {
+                        header: 'Files',
+                        datasetId: rowData.id,
+                        listId: listId,
+                        data: rowData?.files
+                    }),
+                    rowData.additionalData.length > 0 && /*#__PURE__*/ jsx(AdditionalDataTableTable, {
+                        header: 'Additional Data',
+                        data: rowData?.additionalData
+                    }),
+                    /*#__PURE__*/ jsx(Stack, {
+                        children: rowData?.queries.map((query)=>/*#__PURE__*/ createElement(QueryDetails, {
+                                header: "Queries",
+                                ...query,
+                                key: query.id
+                            }))
+                    })
+                ]
+            });
+        }
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: "flex flex-col w-full mr-8",
+        children: /*#__PURE__*/ jsx(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] = useState('unchecked');
+    const { id: listId, name: listName } = dataList;
+    const numberOfItemsInList = useMemo(()=>{
+        return getNumberOfItemsInDatalist(dataList);
+    }, [
+        dataList
+    ]);
+    const { selections, updateSelections, removeListMember, removeList } = useDataLibrarySelection();
+    const updateList = async (update)=>{
+        await updateListInDataLibrary(listId, {
+            ...dataList,
+            ...update,
+            updatedTime: getTimestamp()
+        });
+    };
+    const tableRowData = useMemo(()=>Object.entries(dataList.items).reduce((acc, [datasetId, dataItem])=>{
+            const [queries, files, additionalData] = [
+                [],
+                [],
+                []
+            ];
+            if (isCohortItem(dataItem)) {
+                queries.push({
+                    ...dataItem,
+                    description: '',
+                    index: dataItem.index,
+                    id: datasetId
+                });
+            } else {
+                // handle RegisteredDataListEntry
+                Object.entries(dataItem.items).forEach(([itemId, item])=>{
+                    if (isFileItem(item)) {
+                        files.push({
+                            ...item,
+                            id: itemId
+                        });
+                    } else if (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
+    ]);
+    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: 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__*/ jsxs(Accordion.Item, {
+        value: listName,
+        className: "group",
+        children: [
+            /*#__PURE__*/ jsx(DatasetAccordionControl, {
+                listName: listName,
+                numberOfItems: numberOfItemsInList,
+                updatedTime: dataList.updatedTime,
+                createdTime: dataList.createdTime,
+                updateHandler: updateList,
+                deleteListHandler: ()=>deleteListFromDataLibrary(listId),
+                selectListHandler: handleSelectList,
+                selectedState: selectedState,
+                size: size
+            }),
+            /*#__PURE__*/ jsx(Accordion.Panel, {
+                children: /*#__PURE__*/ 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 } = useDataLibrary(useAPI);
+    const [selectedItemsOpen, { open, close }] = 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__*/ jsx("div", {
+            className: "flex flex-col w-full ml-2",
+            children: /*#__PURE__*/ jsx(Center, {
+                children: /*#__PURE__*/ jsx(ErrorCard, {
+                    message: message
+                })
+            })
+        });
+    }
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col w-full ml-2",
+        children: [
+            /*#__PURE__*/ jsx(LoadingOverlay, {
+                visible: isLoading
+            }),
+            /*#__PURE__*/ jsx(SelectedItemsModal, {
+                opened: selectedItemsOpen,
+                onClose: close,
+                size: "auto",
+                actions: actions
+            }),
+            /*#__PURE__*/ jsx(SearchAndActions, {
+                createList: addListToDataLibrary,
+                gatherData: gatherData
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "flex items-center",
+                children: /*#__PURE__*/ jsx(Accordion, {
+                    chevronPosition: "left",
+                    classNames: {
+                        root: 'w-full',
+                        control: 'data-active:bg-secondary-lightest'
+                    },
+                    children: dataLibrary && Object.values(dataLibrary).map((datalist)=>{
+                        return /*#__PURE__*/ jsx(DatalistAccordionItem, {
+                            dataList: datalist,
+                            size: size,
+                            updateListInDataLibrary: updateListInDataLibrary,
+                            deleteListFromDataLibrary: deleteListFromDataLibrary
+                        }, datalist.id);
+                    })
+                })
+            })
+        ]
+    });
+};
+
+const DataLibrary = (config)=>{
+    return /*#__PURE__*/ jsx(DataLibrarySelectionProvider, {
+        children: /*#__PURE__*/ jsx(DataLibraryLists, {
+            ...config
+        })
+    });
+};
+
+const DataLibraryPage = ({ headerProps, footerProps, config })=>{
+    return /*#__PURE__*/ jsx(NavPageLayout, {
+        headerProps,
+        footerProps,
+        headerData: {
+            title: 'Gen3 DataLibrary Page',
+            content: 'DataLibrary Data',
+            key: 'gen3-data-library-page'
+        },
+        children: /*#__PURE__*/ jsx(DataLibrary, {
+            ...config
+        })
+    });
+};
+
+const DataLibraryPageGetServerSideProps = async ()=>{
+    try {
+        const datalibraryConfig = await ContentSource.get(`config/${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 = useMemo(()=>{
         return [
@@ -17767,5 +19667,5 @@ async function credentialsLogout(req, res) {
     res.redirect(307, '/');
 }
 
-export { AISearchPageGetServerSideProps, AdminAuthZPageGetServerSideProps, AiSearch, AISearchPage as AiSearchPage, AnalysisCenter, AnalysisEditorPage, AnalysisEditorPageGetServerSideProps, AnalysisPage, AnalysisPageGetServerSideProps, AuthzPage, BaseModal, Charts, CohortBuilder, ColorThemePage, ColorThemePageGetServerSideProps, ContentSource, CreateCredentialsAPIKeyModal, CrosswalkPage, CrosswalkPageGetServerSideProps, Custom404Page, DictionaryPage, DictionaryPageGetServerSideProps, DiscoveryCellRendererFactory, DiscoveryProvider as DiscoveryConfigProvider, DiscoveryIndexPanel, DiscoveryPage, DiscoveryPageGetServerSideProps, DiscoveryRowRendererFactory, EnumFacetChart, ErrorCard, ExplorerPage, ExplorerPageGetServerSideProps, ExplorerTableCellRendererFactory, ExplorerTableDetailsPanelFactory, FirstTimeModal, Footer, Gen3Link, Gen3ModalsProvider, Gen3Provider, GqlQueryEditor$1 as GqlQueryEditor, Header, HoverLink, LandingPage, LandingPageGetStaticProps, LoginButton, LoginPage, LoginPageGetServerSideProps, LoginPanel, LoginProvidersPanel, NavPageLayout, NavigationBar, NavigationButton, NoAccessModal, NotebookLitePage, NotebookLitePageGetStaticProps, ProfilePage, ProfilePageGetServerSideProps, ProfileProvider, ProtectedContent, QueryPage, QueryPageGetServerSideProps, ReactECharts, ResourcesFilters, SPECIAL_CASE_FIELDS, SessionExpiredModal, StudyGroup, SubmissionPage, SubmissionPageGetServerSideProps, TagCloud, TailwindConfig, User, Workspace, WorkspaceNoAccessPage, WorkspaceNoAccessPageServerSideProps, WorkspacePage, WorkspacePageGetServerSideProps, capitalize, computeRowSpan, create10ColorAccessibleContrast, create10ColorPallet, credentialsLogin, credentialsLogout, extractObjectKey, focusStyles, getCurrentUnixTimestamp, getNavPageLayoutPropsFromConfig, getParamsValueAsString, getTagInfo, hasOwnProperty, isArrayOfString, isPropertyKey, isTextTransform$1 as isTextTransform, processLabel$1 as processLabel, processRangeKeyLabel, registerCohortBuilderDefaultPreviewRenderers, registerCohortDiscoveryApp, registerCohortDiversityApp, registerDefaultDiscoveryDataLoaders, registerDiscoveryDefaultCellRenderers, registerDiscoveryDefaultStudyPreviewRenderers, registerExplorerDefaultCellRenderers, removeKey$1 as removeKey, resourcePathFromProjectID, sessionLogout, sessionToken, stripTrailingSlash, toDisplayName, truncateString, unixTimeToString, useDiscoveryContext, userHasMethodForServiceOnResource$1 as userHasMethodForServiceOnResource };
+export { AISearchPageGetServerSideProps, AdminAuthZPageGetServerSideProps, AiSearch, AISearchPage as AiSearchPage, AnalysisCenter, AnalysisEditorPage, AnalysisEditorPageGetServerSideProps, AnalysisPage, AnalysisPageGetServerSideProps, AuthzPage, BaseModal, Charts, CohortBuilder, ColorThemePage, ColorThemePageGetServerSideProps, ContentSource, CreateCredentialsAPIKeyModal, CrosswalkPage, CrosswalkPageGetServerSideProps, Custom404Page, DataLibraryPage, DataLibraryPageGetServerSideProps, DictionaryPage, DictionaryPageGetServerSideProps, DiscoveryCellRendererFactory, DiscoveryProvider as DiscoveryConfigProvider, DiscoveryIndexPanel, DiscoveryPage, DiscoveryPageGetServerSideProps, DiscoveryRowRendererFactory, EnumFacetChart, ErrorCard, ExplorerPage, ExplorerPageGetServerSideProps, ExplorerTableCellRendererFactory, ExplorerTableDetailsPanelFactory, FirstTimeModal, Footer, Gen3Link, Gen3ModalsProvider, Gen3Provider, GqlQueryEditor$1 as GqlQueryEditor, Header, HoverLink, LandingPage, LandingPageGetStaticProps, LoginButton, LoginPage, LoginPageGetServerSideProps, LoginPanel, LoginProvidersPanel, NavPageLayout, NavigationBar, NavigationButton, NoAccessModal, NotebookLitePage, NotebookLitePageGetStaticProps, ProfilePage, ProfilePageGetServerSideProps, ProfileProvider, ProtectedContent, QueryPage, QueryPageGetServerSideProps, ReactECharts, ResourcesFilters, SPECIAL_CASE_FIELDS, SessionExpiredModal, StudyGroup, SubmissionPage, SubmissionPageGetServerSideProps, TagCloud, TailwindConfig, User, Workspace, WorkspaceNoAccessPage, WorkspaceNoAccessPageServerSideProps, WorkspacePage, WorkspacePageGetServerSideProps, capitalize, computeRowSpan, create10ColorAccessibleContrast, create10ColorPallet, credentialsLogin, credentialsLogout, extractObjectKey, focusStyles, getCurrentUnixTimestamp, getNavPageLayoutPropsFromConfig, getParamsValueAsString, getTagInfo, hasOwnProperty, isArrayOfString, isPropertyKey, isTextTransform$1 as isTextTransform, processLabel$1 as processLabel, processRangeKeyLabel, registerCohortBuilderDefaultPreviewRenderers, registerCohortDiscoveryApp, registerCohortDiversityApp, registerDefaultDiscoveryDataLoaders, registerDiscoveryDefaultCellRenderers, registerDiscoveryDefaultStudyPreviewRenderers, registerExplorerDefaultCellRenderers, removeKey$1 as removeKey, resourcePathFromProjectID, sessionLogout, sessionToken, stripTrailingSlash, toDisplayName, truncateString, unixTimeToString, useDiscoveryContext, userHasMethodForServiceOnResource$1 as userHasMethodForServiceOnResource };
 //# sourceMappingURL=index.js.map