@gen3/frontend 0.10.50 → 0.10.51

package/dist/cjs/index.js

@@ -37,15 +37,17 @@ var MiniSearch = require('minisearch');
 var uniq = require('lodash/uniq');
 var sum = require('lodash/sum');
 var remarkGfm = require('remark-gfm');
+var iconsReact = require('@tabler/icons-react');
 var reactCookie = require('react-cookie');
 var FileSaver = require('file-saver');
 var defaultComposer = require('default-composer');
-var bs = require('react-icons/bs');
 var tw = require('tailwind-styled-components');
 require('universal-cookie');
 var ri = require('react-icons/ri');
 var io = require('react-icons/io');
 var GraphiQL = require('graphiql');
+var modals = require('@mantine/modals');
+var bs = require('react-icons/bs');
 var fs = require('fs');
 var path = require('path');
 var react$1 = require('redux-persist/integration/react');
@@ -53,11 +55,11 @@ var reduxPersist = require('redux-persist');
 var redux = require('redux');
 var storage = require('redux-persist/lib/storage');
 var toolkit = require('@reduxjs/toolkit');
-var modals = require('@mantine/modals');
 var dynamic = require('next/dynamic');
 var form = require('@mantine/form');
 var YAML = require('yaml');
 var filesize = require('filesize');
+var dnd = require('@hello-pangea/dnd');
 var plugin = require('tailwindcss/plugin');
 var cookie = require('cookie');
 
@@ -378,6 +380,107 @@ const useManageSession = (userStatus)=>{
     return session;
 };
 
+const WorkspacePollingInterval = {
+    'Not Found': 0,
+    Launching: 5000,
+    Terminating: 5000,
+    Running: 300000,
+    Stopped: 5000,
+    Errored: 10000,
+    'Status Error': 0
+};
+const workspaceShutdownAlertLimit = 30000; // 5 minutes: 5 * 60 * 1000 TODO Figure how to configure this
+/**
+ *  Monitors resource usage.
+ *  Currently, handles workspace, payment and idle status
+ */ const useResourceMonitor = ()=>{
+    const [pollingInterval, setPollingInterval] = React.useState(0);
+    const { data: workspaceStatusData, isError: isWorkspaceStatusError, isSuccess: isWorkspaceStatusSuccess, refetch } = core.useGetWorkspaceStatusQuery(undefined, {
+        pollingInterval: pollingInterval,
+        refetchOnMountOrArgChange: 1800,
+        refetchOnFocus: true
+    });
+    const [terminateWorkspace] = core.useTerminateWorkspaceMutation();
+    const requestedStatus = core.useCoreSelector(core.selectRequestedWorkspaceStatus);
+    const dispatch = core.useCoreDispatch();
+    useDeepCompare.useDeepCompareEffect(()=>{
+        if (requestedStatus === 'Launching') {
+            setPollingInterval(WorkspacePollingInterval[core.WorkspaceStatus.Launching]);
+            refetch();
+        }
+        if (requestedStatus === 'Terminating') {
+            setPollingInterval(WorkspacePollingInterval[core.WorkspaceStatus.Terminating]);
+        }
+    }, [
+        requestedStatus
+    ]);
+    useDeepCompare.useDeepCompareEffect(()=>{
+        if (!workspaceStatusData) return;
+        if (isWorkspaceStatusError) {
+            dispatch(core.setActiveWorkspaceStatus(core.WorkspaceStatus.StatusError));
+            setPollingInterval(0); // stop polling
+        }
+        if (workspaceStatusData.status === core.WorkspaceStatus.Running) {
+            // in some state other than idle
+            if (!workspaceStatusData.idleTimeLimit || workspaceStatusData.idleTimeLimit < 0) {
+                // Do not need to poll
+                dispatch(core.setActiveWorkspaceStatus(workspaceStatusData.status));
+                setPollingInterval(0);
+                return;
+            }
+            if (workspaceStatusData?.idleTimeLimit && workspaceStatusData.idleTimeLimit > 0 && workspaceStatusData.lastActivityTime > 0) {
+                const remainingWorkspaceKernelLife = workspaceStatusData.idleTimeLimit - (Date.now() - workspaceStatusData.lastActivityTime);
+                if (remainingWorkspaceKernelLife <= 0) {
+                    // kernel has died due to inactivity
+                    terminateWorkspace();
+                    setPollingInterval(WorkspacePollingInterval[core.WorkspaceStatus.Terminating]);
+                    dispatch(core.setActiveWorkspaceStatus(core.WorkspaceStatus.Terminating));
+                    notifications.notifications.show({
+                        title: 'Workspace Shutdown',
+                        message: 'Workspace has been idle for too long. Shutting workspace down',
+                        position: 'top-center'
+                    });
+                    return;
+                }
+                if (remainingWorkspaceKernelLife <= workspaceShutdownAlertLimit) {
+                    // TODO change running refresh to handle this
+                    notifications.notifications.show({
+                        title: 'Workspace Warning',
+                        message: 'Workspace has been idle for too long. Will shutdown soon',
+                        position: 'top-center'
+                    });
+                }
+            }
+            if (requestedStatus === 'Launching') {
+                dispatch(core.setRequestedWorkspaceStatus('NotSet'));
+            }
+            if (requestedStatus === 'Terminating') {
+                refetch();
+                return;
+            }
+            dispatch(core.setActiveWorkspaceStatus(workspaceStatusData.status));
+            setPollingInterval(WorkspacePollingInterval[workspaceStatusData.status]);
+            return;
+        }
+        if (workspaceStatusData.status === core.WorkspaceStatus.NotFound) {
+            if (requestedStatus !== 'Launching') {
+                // need to consider that if in launchState might get a number of NotFound status before Launching
+                setPollingInterval(WorkspacePollingInterval[core.WorkspaceStatus.NotFound]);
+                dispatch(core.setActiveWorkspaceStatus(core.WorkspaceStatus.NotFound));
+            }
+            if (requestedStatus === 'Terminating') dispatch(core.setRequestedWorkspaceStatus('NotSet'));
+            return;
+        }
+        dispatch(core.setActiveWorkspaceStatus(workspaceStatusData.status));
+        setPollingInterval(WorkspacePollingInterval[workspaceStatusData.status]);
+    }, [
+        dispatch,
+        workspaceStatusData,
+        isWorkspaceStatusError,
+        requestedStatus
+    ]);
+};
+
 const MinutesToMilliseconds = (minutes)=>minutes * 60 * 1000;
 const logoutSession = async ()=>{
     await fetch(`${core.GEN3_FENCE_API}/user/logout?next=${core.GEN3_REDIRECT_URL}/`, {
@@ -452,6 +555,7 @@ const UPDATE_SESSION_LIMIT = MinutesToMilliseconds(5);
  */ const SessionProvider = ({ children, session, updateSessionTime = 5, inactiveTimeLimit = 20, workspaceInactivityTimeLimit = 0, logoutInactiveUsers = true })=>{
     const router$1 = router.useRouter();
     const coreDispatch = core.useCoreDispatch();
+    useResourceMonitor();
     const [getUserDetails] = core.useLazyFetchUserDetailsQuery(); // Fetch user details
     const userStatus = core.useCoreSelector((state)=>core.selectUserAuthStatus(state));
     const [mostRecentActivityTimestamp, setMostRecentActivityTimestamp] = React.useState(Date.now());
@@ -500,14 +604,14 @@ const UPDATE_SESSION_LIMIT = MinutesToMilliseconds(5);
         if (isUserOnPage('Login')) return;
         const timeSinceLastActivity = Date.now() - mostRecentActivityTimestamp;
         if (logoutInactiveUsers) {
-            if (timeSinceLastActivity >= inactiveTimeLimitMilliseconds && !isUserOnPage('workspace')) {
+            if (timeSinceLastActivity >= inactiveTimeLimitMilliseconds && !isUserOnPage('Workspace')) {
                 coreDispatch(core.showModal({
                     modal: core.Modals.SessionExpireModal
                 }));
                 endSession();
                 return;
             }
-            if (workspaceInactivityTimeLimitMilliseconds > 0 && timeSinceLastActivity >= workspaceInactivityTimeLimitMilliseconds && isUserOnPage('workspace')) {
+            if (workspaceInactivityTimeLimitMilliseconds > 0 && timeSinceLastActivity >= workspaceInactivityTimeLimitMilliseconds && isUserOnPage('Workspace')) {
                 coreDispatch(core.showModal({
                     modal: core.Modals.SessionExpireModal
                 }));
@@ -678,7 +782,7 @@ const TopBar = ({ items, loginButtonVisibility = LoginButtonVisibility.Hidden, c
                 className: "flex items-center align-middle",
                 children: [
                     processTopBarItems(items, loginButtonVisibility === LoginButtonVisibility.Visible),
-                    loginButtonVisibility != LoginButtonVisibility.Visible ? /*#__PURE__*/ jsxRuntime.jsx(LoginAccountButton, {}) : null,
+                    loginButtonVisibility != LoginButtonVisibility.Hidden ? /*#__PURE__*/ jsxRuntime.jsx(LoginAccountButton, {}) : null,
                     loginButtonVisibility != LoginButtonVisibility.Hidden ? /*#__PURE__*/ jsxRuntime.jsx(LoginButton, {
                         visibility: loginButtonVisibility
                     }) : null
@@ -1216,8 +1320,8 @@ class DiscoveryCellRendererFactory {
         DiscoveryCellRendererFactory.getInstance().cellRendererCatalog[type][functionName] = func;
     }
     static registerCellRendererCatalog(catalog) {
-        Object.keys(catalog).map((type)=>{
-            Object.entries(catalog[type]).map(([name, func])=>{
+        Object.keys(catalog).forEach((type)=>{
+            Object.entries(catalog[type]).forEach(([name, func])=>{
                 DiscoveryCellRendererFactory.registerCellRenderer(type, name, func);
             });
         });
@@ -1289,8 +1393,8 @@ class DiscoveryRowRendererFactory {
         DiscoveryRowRendererFactory.getInstance().RowRendererCatalog[type][functionName] = func;
     }
     static registerRowRendererCatalog(catalog) {
-        Object.keys(catalog).map((type)=>{
-            Object.entries(catalog[type]).map(([name, func])=>{
+        Object.keys(catalog).forEach((type)=>{
+            Object.entries(catalog[type]).forEach(([name, func])=>{
                 DiscoveryRowRendererFactory.registerRowRenderer(type, name, func);
             });
         });
@@ -1655,11 +1759,11 @@ const RenderYearOfBirthRestricted = ({ value }, params)=>{
     }
     // Check if the content is a string and represents a year less than 1935
     let displayContent;
-    if (typeof content === 'string' && !isNaN(Number(content)) && Number(content) < 1935) {
+    if (typeof content === 'string' && !Number.isNaN(Number(content)) && Number(content) < 1935) {
         displayContent = '1935';
     } else if (lodash.isArray(content)) {
         displayContent = content.map((item)=>{
-            if (typeof item === 'string' && !isNaN(Number(item)) && Number(item) < 1935) {
+            if (typeof item === 'string' && !Number.isNaN(Number(item)) && Number(item) < 1935) {
                 return '1935';
             }
             return item;
@@ -3035,6 +3139,7 @@ class RenderFactoryTypedInstance {
     }
     getRenderer(type, functionName) {
         if (!this.rendererExists(type, functionName)) {
+            console.warn('[RenderFactory] Renderer function not found for type: ', type, ' and function name: ', functionName, '. Using default renderer instead.');
             return DefaultItemRenderer;
         }
         return this.catalog[type][functionName];
@@ -5628,6 +5733,51 @@ const useResourcesContext = ()=>{
     });
 };
 
+const CardContainer = ({ children })=>/*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: "flex justify-center pt-2 items-center",
+        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Card, {
+            shadow: "sm",
+            p: "md",
+            className: "bg-base-lightest border-2 border-base-lighter",
+            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Group, {
+                align: "center",
+                wrap: "nowrap",
+                children: children
+            })
+        })
+    });
+
+const MessageText = ({ message, color })=>/*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+        c: color,
+        size: "md",
+        fw: 500,
+        children: message
+    });
+const MessageCard = ({ message, icon, size = 'lg', color = 'utility.5' })=>/*#__PURE__*/ jsxRuntime.jsxs(CardContainer, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.ThemeIcon, {
+                color: color,
+                variant: "outline",
+                radius: "xl",
+                size: size,
+                children: icon
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(MessageText, {
+                message: message,
+                color: color
+            }),
+            ' '
+        ]
+    });
+
+const ErrorCard = ({ message })=>/*#__PURE__*/ jsxRuntime.jsx(MessageCard, {
+        message: message,
+        icon: /*#__PURE__*/ jsxRuntime.jsx(iconsReact.IconAlertTriangle, {
+            size: 24
+        }),
+        color: "utility.3"
+    });
+
 const LoginProviderMultipleItems = ({ provider, handleLoginSelected })=>{
     const [value, setValue] = React.useState(null);
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
@@ -5670,7 +5820,12 @@ const LoginProviderSingleItem = ({ provider, handleLoginSelected })=>{
     }, provider.name);
 };
 const LoginProvidersPanel = ({ handleLoginSelected })=>{
-    const { data, isSuccess } = core.useGetLoginProvidersQuery();
+    const { data, isSuccess, isError } = core.useGetLoginProvidersQuery();
+    if (isError) {
+        return /*#__PURE__*/ jsxRuntime.jsx(ErrorCard, {
+            message: 'request to authentication service failed'
+        });
+    }
     if (!isSuccess) {
         return /*#__PURE__*/ jsxRuntime.jsx(core$1.LoadingOverlay, {
             visible: !isSuccess
@@ -5715,6 +5870,7 @@ const CredentialsLogin = ({ handleLogin })=>{
     const sessionContext = React.useContext(SessionContext);
     const [credentials, setCredentials] = React.useState(null);
     const [file, setFile] = React.useState(null);
+    const [isCredentialsPending, setIsCredentialsPending] = React.useState(false);
     React.useEffect(()=>{
         if (file) {
             const reader = new FileReader();
@@ -5727,8 +5883,10 @@ const CredentialsLogin = ({ handleLogin })=>{
         file
     ]);
     const handleCredentialsLogin = React.useCallback(async (credentials)=>{
+        setIsCredentialsPending(true);
         const updateSession = sessionContext?.updateSession ?? (()=>null);
         try {
+            //     setIsCredentialsPending(true);
             const json = await JSON.parse(credentials);
             await fetch('/api/auth/credentialsLogin', {
                 method: 'POST',
@@ -5744,6 +5902,8 @@ const CredentialsLogin = ({ handleLogin })=>{
                 title: 'Format Error',
                 message: 'JSON is not valid'
             });
+        } finally{
+            setIsCredentialsPending(false); // Set loading to false once fetch is done (success or fail)
         }
     }, [
         handleLogin,
@@ -5791,6 +5951,7 @@ const CredentialsLogin = ({ handleLogin })=>{
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
                         color: "blue",
+                        loading: isCredentialsPending,
                         onClick: async ()=>{
                             await handleCredentialsLogin(credentials ?? '');
                         },
@@ -5946,7 +6107,13 @@ const LoginPanel = (loginConfig)=>{
         router$1
     ]);
     const handleCredentialsLogin = React.useCallback(async ()=>{
-        await router$1.push(filterRedirect(referer));
+        const redirect = !referer ? '/' : lodash.isArray(referer) ? referer[0] : referer;
+        router$1.push(redirect).catch((e)=>{
+            notifications.showNotification({
+                title: 'Login Error',
+                message: `error logging in ${e.message}`
+            });
+        });
     }, [
         referer,
         router$1
@@ -6374,44 +6541,6 @@ const Gen3ModalsProvider = ({ config, children })=>{
     });
 };
 
-const ErrorMessage = ({ message })=>/*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
-        color: "utility.4",
-        size: "md",
-        fw: "md",
-        children: message
-    });
-const CardContainer = ({ children })=>/*#__PURE__*/ jsxRuntime.jsx("div", {
-        className: "flex justify-center pt-10 items-center",
-        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Card, {
-            shadow: "sm",
-            p: "lg",
-            className: "bg-base-lightest border-2 border-base-lighter",
-            children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
-                align: "center",
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(core$1.ThemeIcon, {
-                        color: "utility.4",
-                        variant: "outline",
-                        radius: "xl",
-                        size: "lg",
-                        children: /*#__PURE__*/ jsxRuntime.jsx(bs.BsExclamationTriangle, {
-                            size: 24
-                        })
-                    }),
-                    children
-                ]
-            })
-        })
-    });
-const ErrorCard = ({ message })=>/*#__PURE__*/ jsxRuntime.jsxs(CardContainer, {
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx(ErrorMessage, {
-                message: message
-            }),
-            ' '
-        ]
-    });
-
 const getAllFieldsFromFilterConfigs = (filterTabConfigs)=>filterTabConfigs.reduce((acc, cur)=>acc.concat(cur.fields), []);
 const processBucketData = (data)=>{
     if (!data) return {};
@@ -8231,20 +8360,133 @@ const convertFilterToComponent = (filter, index, path = '.')=>{
 };
 
 const getCombinedClassesExpandCollapseQuery = (allQueryExpressionsCollapsed)=>{
-    const baseClasses = 'flex gap-0 items-center border-1 border-base-max rounded-md w-7 h-7';
+    const baseClasses = 'flex gap-0 items-center border-1 border-base-max rounded-md';
     const dynamicClasses = allQueryExpressionsCollapsed ? 'text-primary bg-base-max' : 'text-base-max bg-transparent';
     const disabledClasses = 'disabled:opacity-50';
     const enabledHoverClasses = 'enabled:hover:bg-primary-darkest enabled:hover:text-primary-content-lightest enabled:hover:border-primary-darkest';
     return `${dynamicClasses} ${disabledClasses} ${enabledHoverClasses} ${baseClasses}`;
 };
 const getCombinedClassesForRowCollapse = (filtersSectionCollapsed)=>{
-    const baseClasses = 'border-1 border-white rounded-md w-7 h-7 flex items-center';
+    const baseClasses = 'border-1 border-white rounded-md flex items-center';
     const dynamicClasses = !filtersSectionCollapsed ? 'text-primary bg-base-max' : 'text-base-max bg-transparent';
     const disabledClasses = 'disabled:opacity-50 disabled:bg-base-max disabled:text-primary';
     const enabledHoverClasses = 'enabled:hover:bg-primary-darkest enabled:hover:text-primary-content-lightest enabled:hover:border-primary-darkest';
     return `${disabledClasses} ${enabledHoverClasses} ${baseClasses} ${dynamicClasses}`;
 };
 
+const JSONObjectDownloadButton = ({ getData, filename = 'data.json', icon = 'gen3:download', tooltip })=>{
+    const [isDownloading, setIsDownloading] = React.useState(false);
+    const saveToJSONFile = async ()=>{
+        setIsDownloading(true);
+        try {
+            const data = getData();
+            // Create blob from JSON data
+            const blob = new Blob([
+                JSON.stringify(data, null, 2)
+            ], {
+                type: 'application/json'
+            });
+            // Create URL for the blob
+            const url = URL.createObjectURL(blob);
+            // Create temporary link element
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = filename;
+            // Append to document, click, and cleanup
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            URL.revokeObjectURL(url);
+        } catch (error) {
+            console.error('Error saving file:', error);
+        } finally{
+            setIsDownloading(false);
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+        label: tooltip,
+        disabled: !tooltip,
+        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+            variant: "outline",
+            onClick: saveToJSONFile,
+            disabled: isDownloading,
+            loading: isDownloading,
+            classNames: {
+                root: 'bg-base-max'
+            },
+            className: "flex items-center gap-2",
+            children: /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                icon: icon,
+                height: "1.5rem"
+            })
+        })
+    });
+};
+
+const UploadJSONButton = ({ handleFileChange, tooltip, icon = 'gen3:upload' })=>{
+    const [file, setFile] = React.useState(null);
+    const [processingFile, setProcessingFile] = React.useState(false);
+    return /*#__PURE__*/ jsxRuntime.jsx(core$1.FileButton, {
+        onChange: async (file)=>{
+            if (file !== null) {
+                setProcessingFile(true);
+                setFile(file);
+                const contents = await file.text();
+                handleFileChange(contents);
+                setProcessingFile(false);
+            }
+        },
+        accept: "application/json",
+        children: ()=>/*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                label: tooltip,
+                disabled: !tooltip,
+                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                    loading: processingFile,
+                    variant: "outline",
+                    classNames: {
+                        root: 'bg-base-max'
+                    },
+                    children: /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                        icon: icon,
+                        height: "1.5rem"
+                    })
+                })
+            })
+    });
+};
+
+const CohortSelector = ({ index, filters })=>{
+    const dispatch = core.useCoreDispatch();
+    const getData = useDeepCompare.useDeepCompareCallback(()=>{
+        return filters;
+    }, [
+        filters
+    ]);
+    const setCohort = useDeepCompare.useDeepCompareCallback((data)=>{
+        const jsonForm = JSON.parse(data);
+        dispatch(core.setCohortFilter({
+            index,
+            filters: jsonForm
+        }));
+    }, [
+        index,
+        dispatch
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(JSONObjectDownloadButton, {
+                getData: getData,
+                filename: "cohort.json",
+                tooltip: "Export Cohort"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(UploadJSONButton, {
+                handleFileChange: setCohort,
+                tooltip: "Import Cohort"
+            })
+        ]
+    });
+};
+
 const QueryExpressionContainer = tw.div`
   flex
   items-center
@@ -8397,9 +8639,13 @@ const QueryExpressionSection = ({ index, filters, currentCohortName, currentCoho
                                     /*#__PURE__*/ jsxRuntime.jsxs("div", {
                                         className: "display flex gap-2 ml-auto mr-3",
                                         children: [
+                                            /*#__PURE__*/ jsxRuntime.jsx(CohortSelector, {
+                                                index: index,
+                                                filters: filters
+                                            }),
                                             /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
                                                 label: noFilters ? 'No values to expand/collapse' : allQueryExpressionsCollapsed ? 'Expand all values' : 'Collapse all values',
-                                                children: /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
                                                     "data-testid": "button-expand-collapse-cohort-queries",
                                                     color: "white",
                                                     onClick: ()=>allQueryExpressionsCollapsed ? setExpandedState({
@@ -8413,34 +8659,22 @@ const QueryExpressionSection = ({ index, filters, currentCohortName, currentCoho
                                                     "aria-expanded": !allQueryExpressionsCollapsed,
                                                     className: getCombinedClassesExpandCollapseQuery(allQueryExpressionsCollapsed),
                                                     disabled: noFilters,
-                                                    children: allQueryExpressionsCollapsed ? /*#__PURE__*/ jsxRuntime.jsxs(React.Fragment, {
-                                                        children: [
-                                                            /*#__PURE__*/ jsxRuntime.jsx(md.MdOutlineArrowBackIos, {
-                                                                size: 16,
-                                                                "aria-hidden": "true"
-                                                            }),
-                                                            /*#__PURE__*/ jsxRuntime.jsx(md.MdOutlineArrowForwardIos, {
-                                                                size: 16,
-                                                                "aria-hidden": "true"
-                                                            })
-                                                        ]
-                                                    }) : /*#__PURE__*/ jsxRuntime.jsxs(React.Fragment, {
-                                                        children: [
-                                                            /*#__PURE__*/ jsxRuntime.jsx(md.MdOutlineArrowForwardIos, {
-                                                                size: 16,
-                                                                "aria-hidden": "true"
-                                                            }),
-                                                            /*#__PURE__*/ jsxRuntime.jsx(md.MdOutlineArrowBackIos, {
-                                                                size: 16,
-                                                                "aria-hidden": "true"
-                                                            })
-                                                        ]
+                                                    children: allQueryExpressionsCollapsed ? /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                                                        icon: "gen3:chevron-expand",
+                                                        "aria-hidden": "true",
+                                                        height: "1.5rem",
+                                                        children: ' '
+                                                    }) : /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                                                        icon: "gen3:chevron-contract",
+                                                        "aria-hidden": "true",
+                                                        height: "1.5rem",
+                                                        children: ' '
                                                     })
                                                 })
                                             }),
                                             /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
                                                 label: noFilters || filtersRef.current != null && filtersRef?.current?.scrollHeight <= MAX_HEIGHT_QE_SECTION ? 'All rows are already displayed' : filtersSectionCollapsed ? 'Display all rows' : 'Display fewer rows',
-                                                children: /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
                                                     "data-testid": "button-expand-collapse-cohort-filters-section",
                                                     color: "white",
                                                     onClick: ()=>setFiltersSectionCollapsed(!filtersSectionCollapsed),
@@ -9952,74 +10186,1098 @@ var GqlQueryEditor$2 = /*#__PURE__*/Object.freeze({
   default: GqlQueryEditor$1
 });
 
-const WorkspacesPanel = ()=>{
-    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Center, {
-        className: "m-20 w-full",
-        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
-            size: "2rem",
-            children: "Coming soon."
-        })
-    });
-};
-
-class FilesystemContent {
-    constructor({ rootPath }){
-        this.rootPath = rootPath || '';
+const ProtectedContent = ({ children, referer })=>{
+    const router$1 = router.useRouter();
+    let redirect = referer;
+    if (!referer && typeof window !== 'undefined') {
+        // route not available on SSR
+        redirect = router$1.asPath;
     }
-    async get(filepath) {
-        try {
-            return await JSON.parse(fs.readFileSync(path.join(this.rootPath, filepath)).toString('utf-8'));
-        } catch (err) {
-            throw new Error(`Cannot process ${filepath}`);
-        }
+    const onUnauthenticated = ()=>{
+        if (typeof window !== 'undefined') // route not available on SSR
+        router$1.push({
+            pathname: '/Login',
+            query: {
+                referer: redirect
+            }
+        });
+    };
+    const { status, pending } = useSession(true, onUnauthenticated);
+    if (status !== 'issued') {
+        // not logged in
+        if (pending) return /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "flex justify-center w-full mt-10",
+            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Loader, {})
+        });
+        else return /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "w-full h-full relative",
+            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Center, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Paper, {
+                    shadow: "md",
+                    p: "md",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                        children: "You are not signed in and cannot access this protected content. Please login in."
+                    })
+                })
+            })
+        });
     }
-}
+    return /*#__PURE__*/ jsxRuntime.jsx(React.Fragment, {
+        children: children
+    });
+};
 
-class ContentDatabase {
-    constructor(config){
-        this.config = config;
-        this.store = config.store;
+const WorkspaceConfigDefaults = {
+    launchStepIndicatorConfig: {
+        steps: [
+            {
+                label: 'Requesting',
+                description: 'requesting workspace resources'
+            },
+            {
+                label: 'Initializing',
+                description: 'starting workspace resources'
+            },
+            {
+                label: 'Configuring',
+                description: 'starting services'
+            },
+            {
+                label: 'Starting',
+                description: 'waiting for services'
+            },
+            {
+                label: 'Connecting',
+                description: 'waiting for connecting to workspace'
+            },
+            {
+                label: 'Ready',
+                description: 'workspace is ready'
+            }
+        ]
     }
-    async get(filepath) {
-        return this.store.get(filepath);
+};
+const WorkspaceContext = /*#__PURE__*/ React.createContext(WorkspaceConfigDefaults);
+const useWorkspaceContext = ()=>{
+    const context = React.useContext(WorkspaceContext);
+    if (context === undefined) {
+        throw Error('Workspace must be used inside of a useWorkspaceContext');
     }
-}
-
-const GEN3_FRONTEND_CONFIGURATION_ROOT = process.env.GEN3_FRONTEND_CONFIGURATION_ROOT || './';
-
-const ContentRoot = GEN3_FRONTEND_CONFIGURATION_ROOT;
-const setup = ()=>{
-    const config = {
-        store: new FilesystemContent({
-            rootPath: ContentRoot
-        })
+    return context;
+};
+const WorkspaceProvider = ({ children, config })=>{
+    const mergedConfig = {
+        ...WorkspaceConfigDefaults,
+        ...config
     };
-    return new ContentDatabase(config);
+    return /*#__PURE__*/ jsxRuntime.jsx(WorkspaceContext.Provider, {
+        value: mergedConfig,
+        children: children
+    });
 };
-const ContentSource = setup();
 
-/**
- * Retrieves navigation page layout properties from configuration.
- * Note: GEN3_COMMONS_NAME depends on siteConfig.json value in the data commons package
- * @returns A Promise resolving to an object containing header and footer props.
- */ const getNavPageLayoutPropsFromConfig = async ()=>{
-    const navigationConfigJSON = await ContentSource.get(`config/${core.GEN3_COMMONS_NAME}/navigation.json`);
-    let bannerConfigJSON = [];
-    try {
-        bannerConfigJSON = await ContentSource.get(`config/${core.GEN3_COMMONS_NAME}/banner.json`);
-    } catch (e) {
-        console.warn('No banner config found at: ', `config/${core.GEN3_COMMONS_NAME}/banner.json`);
+const getWorkspaceErrorMessage = (error, defaultMessage)=>{
+    if (core.isFetchBaseQueryError(error)) {
+        return error.data;
     }
-    const { topBar, navigation, type = 'original' } = navigationConfigJSON;
-    const headerProps = {
-        top: topBar,
-        navigation: navigation,
-        banners: bannerConfigJSON,
-        type
-    };
-    const footerProps = await ContentSource.get(`config/${core.GEN3_COMMONS_NAME}/footer.json`);
-    return {
-        headerProps,
+    return defaultMessage;
+};
+const WorkspaceStatusContext = /*#__PURE__*/ React.createContext({
+    isFullscreen: false,
+    startWorkspace: ()=>null,
+    stopWorkspace: ()=>null,
+    toggleFullscreen: ()=>null,
+    workspaceLaunchIsLoading: false,
+    terminateIsLoading: false,
+    isPayModelNeededToLaunch: undefined
+});
+const useWorkspaceStatusContext = ()=>{
+    const context = React.useContext(WorkspaceStatusContext);
+    if (context === undefined) {
+        throw Error('Any workspace status component must be used inside of a useWorkspaceStatusContext');
+    }
+    return context;
+};
+const WorkspaceStatusProvider = ({ children })=>{
+    const { toggle: switchScreenMode, fullscreen: isFullscreen } = hooks.useFullscreen();
+    const [isPayModelNeededToLaunch, setIsPayModelNeededToLaunch] = React.useState(undefined);
+    const [launchTrigger, { isError: isWorkspaceLaunchError, error: workspaceLaunchError }] = core.useLaunchWorkspaceMutation();
+    const [terminateWorkspace, { isLoading: terminateIsLoading, isError: isTerminateError, error: workspaceTerminateError }] = core.useTerminateWorkspaceMutation();
+    const { data: payModels, isLoading: isPayModelLoading, isError: isPayModelError } = core.useGetWorkspacePayModelsQuery();
+    useDeepCompare.useDeepCompareEffect(()=>{
+        if (isPayModelError) {
+            notifications.notifications.show({
+                title: 'Pay Model Error',
+                message: 'Unable to get Pay Model.'
+            });
+        }
+        if (isPayModelLoading) {
+            setIsPayModelNeededToLaunch(true);
+        }
+        if (payModels) {
+            setIsPayModelNeededToLaunch(Object.keys(payModels).length > 0 && payModels.currentPayModel != null);
+        }
+    }, [
+        payModels
+    ]);
+    const dispatch = core.useCoreDispatch();
+    const currentWorkspaceStatus = core.useCoreSelector(core.selectActiveWorkspaceStatus);
+    // handle errors in launching, getting status, or terminating
+    useDeepCompare.useDeepCompareEffect(()=>{
+        if (isWorkspaceLaunchError || isTerminateError) {
+            notifications.notifications.show({
+                title: 'Workspace Error',
+                message: getWorkspaceErrorMessage(isWorkspaceLaunchError ? workspaceLaunchError : workspaceTerminateError, isWorkspaceLaunchError ? 'Error launching workspace' : 'Error stopping workspace'),
+                position: 'top-center',
+                containerWidth: '50%'
+            });
+            dispatch(core.setRequestedWorkspaceStatus('NotSet'));
+            dispatch(core.setActiveWorkspaceStatus(core.WorkspaceStatus.NotFound));
+        }
+    }, [
+        isWorkspaceLaunchError,
+        isTerminateError
+    ]);
+    const status = React.useMemo(()=>{
+        const startWorkspace = (id)=>{
+            launchTrigger(id);
+            dispatch(core.setActiveWorkspace({
+                id: id,
+                status: core.WorkspaceStatus.Launching,
+                requestedStatus: 'Launching'
+            }));
+        };
+        const toggleFullscreen = ()=>switchScreenMode();
+        const stopWorkspace = ()=>{
+            terminateWorkspace();
+            dispatch(core.setRequestedWorkspaceStatus('Terminating'));
+            dispatch(core.setActiveWorkspaceStatus(core.WorkspaceStatus.Terminating));
+        };
+        return {
+            isFullscreen,
+            startWorkspace,
+            stopWorkspace,
+            toggleFullscreen,
+            workspaceLaunchIsLoading: currentWorkspaceStatus === core.WorkspaceStatus.Launching,
+            terminateIsLoading,
+            isPayModelNeededToLaunch
+        };
+    }, [
+        dispatch,
+        isFullscreen,
+        launchTrigger,
+        terminateIsLoading,
+        terminateWorkspace
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(WorkspaceStatusContext.Provider, {
+        value: status,
+        children: children
+    });
+};
+
+const COMPUTE_PROPS_LABEL_STYLE = 'text-base-lighter font-medium text-sm opacity-90';
+const NotebookCard = ({ info })=>{
+    const { startWorkspace, stopWorkspace, isPayModelNeededToLaunch } = useWorkspaceStatusContext();
+    const { status } = core.useCoreSelector(core.selectWorkspaceStatusFromService);
+    const requestedStatus = core.useCoreSelector(core.selectRequestedWorkspaceStatus);
+    const workspaceId = core.useCoreSelector(core.selectActiveWorkspaceId);
+    console.log('NotebookCard: ', requestedStatus, workspaceId, status);
+    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Card, {
+        withBorder: true,
+        radius: "xs",
+        className: "w-64",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Card.Section, {
+                inheritPadding: true,
+                py: "xs",
+                children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
+                    align: "center",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                            height: '48px',
+                            icon: 'workspace:jupyter'
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                            ta: "center",
+                            className: "font-header",
+                            size: "md",
+                            fw: 500,
+                            children: info.name
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Card.Section, {
+                inheritPadding: true,
+                py: "xs",
+                children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                    justify: "center",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsxs(core$1.Text, {
+                            c: "base-contrast.4",
+                            className: COMPUTE_PROPS_LABEL_STYLE,
+                            children: [
+                                "CPU Limit: ",
+                                info.cpuLimit
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsxs(core$1.Text, {
+                            c: "base-contrast.4",
+                            className: COMPUTE_PROPS_LABEL_STYLE,
+                            size: "xs",
+                            children: [
+                                "Memory: ",
+                                info.memoryLimit
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "flex mx-8 justify-center border-1 border-base"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                className: "mt-2 p-2",
+                justify: "center",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                        loading: info.id === workspaceId && requestedStatus === 'Launching',
+                        disabled: status !== core.WorkspaceStatus.NotFound || isPayModelNeededToLaunch,
+                        onClick: ()=>{
+                            startWorkspace(info.id);
+                        },
+                        children: "Launch"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Transition, {
+                        mounted: info.id === workspaceId && requestedStatus === 'Launching' || status === 'Launching',
+                        transition: "fade",
+                        duration: 400,
+                        timingFunction: "ease",
+                        children: ()=>/*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                                onClick: ()=>{
+                                    stopWorkspace();
+                                },
+                                children: "Shutdown"
+                            })
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+const WorkspacePanel = ()=>{
+    const { data, isLoading, isError, isSuccess } = core.useGetWorkspaceOptionsQuery();
+    const workspaceStatus = core.useCoreSelector(core.selectActiveWorkspaceStatus);
+    if (isError) {
+        return /*#__PURE__*/ jsxRuntime.jsx(ErrorCard, {
+            message: "Error loading workspace definitions"
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Transition, {
+            mounted: workspaceStatus === core.WorkspaceStatus.NotFound || workspaceStatus === core.WorkspaceStatus.Launching,
+            transition: "scale-y",
+            duration: 600,
+            exitDuration: 600,
+            timingFunction: "ease",
+            children: (styles)=>/*#__PURE__*/ jsxRuntime.jsx("div", {
+                    className: "px-2 mt-4",
+                    style: styles,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Grid, {
+                        justify: "center",
+                        align: "stretch",
+                        gutter: "md",
+                        children: data?.map((card)=>{
+                            return /*#__PURE__*/ jsxRuntime.jsx(core$1.Grid.Col, {
+                                span: "content",
+                                style: {
+                                    minHeight: core$1.rem(120)
+                                },
+                                children: /*#__PURE__*/ jsxRuntime.jsx(NotebookCard, {
+                                    info: card
+                                })
+                            }, card.id);
+                        })
+                    })
+                })
+        })
+    });
+};
+
+const WorkspaceNotebook = ()=>{
+    const currentWorkspaceStatus = core.useCoreSelector(core.selectActiveWorkspaceStatus);
+    if (currentWorkspaceStatus !== core.WorkspaceStatus.Running) return null;
+    return /*#__PURE__*/ jsxRuntime.jsx(React.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "flex flex-col w-full  flex-grow content-center items-center",
+            children: /*#__PURE__*/ jsxRuntime.jsx("iframe", {
+                className: "w-full h-full border-8",
+                title: "Workspace",
+                src: `${core.GEN3_WORKSPACE_API}/proxy/`
+            })
+        })
+    });
+};
+
+const ExternalLoginsStatus = ()=>{
+    const { data: externalProviders, isLoading, isError, isSuccess } = core.useGetExternalLoginsQuery();
+    if (isLoading) {
+        return /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "bg-primary h-24 flex justify-center",
+            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Loader, {})
+        });
+    }
+    if (isError) {
+        return /*#__PURE__*/ jsxRuntime.jsx("div", {
+            children: "Error occurred while fetching external logins"
+        });
+    }
+    if (isSuccess) {
+        const providersNeedToken = externalProviders.providers.filter((option)=>!option.refresh_token_expiration);
+        if (providersNeedToken.length > 0) {
+            return /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "p-2 border border-base-lighter pb-4",
+                children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsxs(core$1.Text, {
+                            children: [
+                                "To analyze all data to which you have access, please authorize these external data resources in the Profile page:",
+                                ' '
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Group, {
+                            gap: "xs",
+                            children: providersNeedToken.map((provider)=>/*#__PURE__*/ jsxRuntime.jsx(core$1.Badge, {
+                                    size: "lg",
+                                    variant: "outline",
+                                    radius: "sm",
+                                    children: provider.name
+                                }, provider.name))
+                        })
+                    ]
+                })
+            });
+        }
+        return null;
+    }
+};
+
+const PaymentNumberToString = (x, undefinedValue = 'N/A', precision = 2)=>{
+    if (!x || Number.isNaN(x)) return undefinedValue;
+    return x.toFixed(precision);
+};
+
+const StatusAndControls = ()=>{
+    const { stopWorkspace, toggleFullscreen, isFullscreen } = useWorkspaceStatusContext();
+    const openModal = ()=>modals.modals.openConfirmModal({
+            title: 'Workspace',
+            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                size: "sm",
+                children: "Please confirm workspace shutdown"
+            }),
+            labels: {
+                confirm: 'Confirm',
+                cancel: 'Cancel'
+            },
+            onConfirm: ()=>stopWorkspace()
+        });
+    const workspaceStatus = core.useCoreSelector(core.selectActiveWorkspaceStatus);
+    const requestedStatus = core.useCoreSelector(core.selectRequestedWorkspaceStatus);
+    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Transition, {
+        mounted: core.isWorkspaceRunningOrStopping(workspaceStatus),
+        transition: "fade",
+        duration: 1200,
+        timingFunction: "ease",
+        children: (styles)=>/*#__PURE__*/ jsxRuntime.jsx("div", {
+                style: styles,
+                children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                            height: '2.0rem',
+                            icon: 'workspace:jupyter'
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                            label: "Stop Workspace",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                                loading: requestedStatus === 'Terminating',
+                                size: "md",
+                                color: "accent.5",
+                                variant: "default",
+                                onClick: ()=>{
+                                    openModal();
+                                },
+                                "aria-label": "Stop Workspace",
+                                leftSection: /*#__PURE__*/ jsxRuntime.jsx(fa.FaRegStopCircle, {
+                                    color: "utility.2",
+                                    size: "1rem",
+                                    className: "text-accent-warm"
+                                }),
+                                children: "Stop Workspace"
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                            label: "Toggle fullscreen mode",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                                color: "utility.2",
+                                size: "md",
+                                variant: "default",
+                                onClick: ()=>{
+                                    toggleFullscreen();
+                                },
+                                "aria-label": isFullscreen ? 'Exit Fullscreen' : 'Make Fullscreen',
+                                leftSection: /*#__PURE__*/ jsxRuntime.jsx(bs.BsArrowsFullscreen, {
+                                    className: "text-accent-warm"
+                                }),
+                                children: isFullscreen ? 'Exit Fullscreen' : 'Make Fullscreen'
+                            })
+                        })
+                    ]
+                })
+            })
+    });
+};
+
+const isNoPayModelError = (error)=>{
+    return 'status' in error && error.status === 'PARSING_ERROR' && error.originalStatus === 404;
+};
+const NoPayModel = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+        className: "p-2 border-1 border-l-0 border-r-0 border-base-lighter w-full h-16",
+        justify: "space-between",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                className: "pl-4",
+                size: "md",
+                classNames: {
+                    root: 'font-heading'
+                },
+                children: "No pay model defined"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(StatusAndControls, {})
+        ]
+    });
+};
+const PaymentPanel = ()=>{
+    const { data, isLoading, isFetching, isError, error } = core.useGetWorkspacePayModelsQuery();
+    const [setWorkspacePayModel] = core.useSetCurrentPayModelMutation();
+    const [selectedPayModel, setSelectedPayModel] = React.useState(null);
+    const setPayModel = useDeepCompare.useDeepCompareCallback((id)=>{
+        setWorkspacePayModel(id); // triggers the call to the service to select the pay model
+        setSelectedPayModel(id); // set the paymodel value for the select component
+    }, [
+        setWorkspacePayModel,
+        selectedPayModel
+    ]);
+    const { usersPayModels, workspaceName, hardLimit, totalUsage } = useDeepCompare.useDeepCompareMemo(()=>{
+        if (!data) return {
+            usersPayModels: [],
+            selectedPayModel: [],
+            workspaceName: 'Not Set',
+            totalUsage: undefined,
+            hardLimit: undefined
+        };
+        const usersPayModels = data.allPayModels.map((payModel)=>{
+            return {
+                value: payModel.bmh_workspace_id ?? payModel.workspace_type,
+                label: payModel.workspace_type,
+                totalUsage: payModel['total-usage'].toFixed(2),
+                icon: payModel.request_status === 'active' ? /*#__PURE__*/ jsxRuntime.jsx(fa.FaUser, {}) : /*#__PURE__*/ jsxRuntime.jsx(fa.FaExclamationCircle, {})
+            };
+        });
+        setSelectedPayModel(data.currentPayModel.bmh_workspace_id ?? data.currentPayModel.workspace_type);
+        return {
+            usersPayModels,
+            workspaceName: data.currentPayModel.bmh_workspace_id.length > 0 ? data.currentPayModel.bmh_workspace_id.length : data.currentPayModel.workspace_type,
+            totalUsage: data.currentPayModel['total-usage'],
+            hardLimit: data.currentPayModel['hard-limit']
+        };
+    }, [
+        data
+    ]);
+    const PayModelSelectItem = ({ option })=>{
+        const menuItem = usersPayModels[Number(option.value)];
+        return /*#__PURE__*/ jsxRuntime.jsx("div", {
+            children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                wrap: "nowrap",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                        size: "sm",
+                        children: menuItem.label
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                        size: "sm",
+                        children: menuItem.totalUsage
+                    }),
+                    menuItem.icon
+                ]
+            })
+        });
+    };
+    if (isLoading && isFetching) return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: "flex justify-center p-2 border-1 border-l-0 border-r-0 border-base-lighter w-full h-14",
+        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Loader, {})
+    });
+    if (isError) {
+        if (isNoPayModelError(error)) {
+            return /*#__PURE__*/ jsxRuntime.jsx(NoPayModel, {});
+        } else return /*#__PURE__*/ jsxRuntime.jsx(ErrorCard, {
+            message: "Unable to get Payment information"
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Accordion, {
+            chevronPosition: "left",
+            children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Accordion.Item, {
+                value: "accountInformation",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Accordion.Control, {
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                            justify: "space-between",
+                            children: [
+                                "Account Information",
+                                /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                                    className: "font-heading text-base-contrast",
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                                            fw: 600,
+                                            children: workspaceName
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                            className: "flex items-center",
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                                                    fw: 500,
+                                                    size: "sm",
+                                                    className: "mr-1",
+                                                    children: "Total Usage:"
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                                                    fw: 500,
+                                                    size: "sm",
+                                                    children: PaymentNumberToString(totalUsage)
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                            className: "flex items-center pr-1",
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                                                    fw: 500,
+                                                    size: "sm",
+                                                    className: "mr-1",
+                                                    children: "Hard Limit:"
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                                                    fw: 500,
+                                                    size: "sm",
+                                                    children: PaymentNumberToString(hardLimit)
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Accordion.Panel, {
+                        children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                            className: "grid grid-cols-3 p-4",
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                    className: "flex flex-col border-1 border-gray p-2 mr-4",
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                            className: "flex justify-between border-b-1 border-gray mb-2 w-full py-2",
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                                    className: "ml-2 text-xs",
+                                                    children: "Account"
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                                    className: "mr-2 text-xs",
+                                                    children: "Workspace Account Manager"
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                            className: "text-center",
+                                            children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Select, {
+                                                    placeholder: "Select Workspace",
+                                                    renderOption: PayModelSelectItem,
+                                                    data: usersPayModels,
+                                                    onChange: (id)=>{
+                                                        if (id) setPayModel(id);
+                                                    },
+                                                    value: selectedPayModel
+                                                })
+                                            })
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                    className: "flex flex-col text-center border-1 border-gray p-2 mr-4",
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                            className: "text-md border-b-1 border-gray mb-2 w-full py-2 text-xs",
+                                            children: "Total Charges (USD)"
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                                            children: PaymentNumberToString(totalUsage)
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                    className: "flex flex-col text-center border-1 border-gray p-2",
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                            className: "text-md border-b-1 border-gray mb-2 w-full py-2 text-xs",
+                                            children: "Spending Limit (USD)"
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                                            children: PaymentNumberToString(hardLimit)
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        })
+    });
+};
+
+const isTerminated = (state)=>{
+    return state !== undefined && 'terminated' in state.state;
+};
+const PodConditionIndex = {
+    PodScheduled: 0,
+    Initialized: 1,
+    PodReadyToStartContainers: 2,
+    ContainersReady: 3,
+    ProxyConnected: 4,
+    Ready: 5
+};
+const retrievePodConditionStatus = (conditionType, conditions)=>{
+    const matchingCondition = conditions.find((condition)=>condition.type === conditionType);
+    if (!matchingCondition) return core.PodStatus.Unknown;
+    return matchingCondition.status;
+};
+const calculateCurrentStep = (conditions)=>{
+    let currentStep = 0;
+    conditions.forEach((condition)=>{
+        const idx = PodConditionIndex[condition.type];
+        if (condition.status === core.PodStatus.True) currentStep = Math.max(idx + 1, currentStep); // Add +1 since if True this
+    });
+    return currentStep;
+};
+const calculateLaunchSteps = ({ status, conditions, containerStates, workspaceType })=>{
+    // if status is not 'Launching', or 'Stopped',
+    // or we don't have conditions array, don't display steps bar
+    if (!conditions || conditions.length === 0 || status !== 'Launching' && status !== 'Stopped') {
+        return undefined;
+    }
+    // the return steps state
+    const workspaceLaunchStatus = {
+        step: 0,
+        status: 'not ready'
+    };
+    const currentStep = calculateCurrentStep(conditions);
+    workspaceLaunchStatus.step = currentStep;
+    workspaceLaunchStatus.status = status === 'Stopped' ? 'error' : 'processing';
+    if (currentStep == 2) {
+        //  PodReadyToStartContainers == False
+        const cs = containerStates ?? [];
+        // handle container stats
+        if (cs.some((element)=>isTerminated(element))) {
+            workspaceLaunchStatus.status = 'error';
+            workspaceLaunchStatus.message = 'Service is terminated';
+        }
+        workspaceLaunchStatus.message = 'Starting notebook services';
+    }
+    if (currentStep == 3) {
+        //  ContainersReady == False
+        // get container status
+        if (workspaceType === 'ECS') {
+            if (status === 'Launching') {
+                workspaceLaunchStatus.status = 'processing';
+            } else if (status !== 'Stopped') {
+                workspaceLaunchStatus.status = 'error';
+            }
+        } else {
+            const cs = containerStates ?? [];
+            // handle container stats
+            if (cs.some((element)=>isTerminated(element))) {
+                workspaceLaunchStatus.status = 'error';
+                workspaceLaunchStatus.message = 'Service is terminated';
+            } else {
+                // If container states are available, display detailed pod statuses
+                workspaceLaunchStatus.subSteps = cs.map((c)=>({
+                        title: c.name,
+                        description: `${c.ready ? 'ready' : 'pending'}`
+                    }));
+            }
+        }
+        const podStatus = retrievePodConditionStatus(core.PodConditionType.ProxyConnected, conditions);
+        if (podStatus === core.PodStatus.False) workspaceLaunchStatus.message = 'In progress. If you are stuck here for more than a few minutes, cancel launch and try again or contact user support.';
+    }
+    // wait for proxy
+    if (currentStep == 4) {
+        // ProxyConnect == False
+        const podStatus = retrievePodConditionStatus(core.PodConditionType.ProxyConnected, conditions);
+        if (podStatus === core.PodStatus.True) workspaceLaunchStatus.message = 'Proxy is ready';
+        else workspaceLaunchStatus.status = 'error';
+    }
+    if (currentStep == 5) {
+        workspaceLaunchStatus.message = 'Proxy is ready';
+        workspaceLaunchStatus.status = 'complete';
+    }
+    return workspaceLaunchStatus;
+};
+
+const WorkspaceStepper = ({ stepsConfig, step })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Transition, {
+        mounted: step !== undefined,
+        transition: "fade",
+        duration: 1200,
+        exitDuration: 1200,
+        timingFunction: "ease",
+        children: (styles)=>/*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "p-2 mt-2 w-3/4 mx-4",
+                style: styles,
+                children: !step ? null : /*#__PURE__*/ jsxRuntime.jsx(core$1.Stepper, {
+                    size: "xs",
+                    active: step?.step,
+                    allowNextStepsSelect: false,
+                    wrap: false,
+                    children: stepsConfig.steps.map((x)=>{
+                        return /*#__PURE__*/ jsxRuntime.jsx(core$1.Stepper.Step, {
+                            label: x.label,
+                            description: x.description,
+                            color: step.status === 'error' ? 'red' : 'accent.4',
+                            children: step.message ? /*#__PURE__*/ jsxRuntime.jsx(core$1.Center, {
+                                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                                    children: step.message
+                                })
+                            }) : null
+                        }, x.label);
+                    })
+                })
+            })
+    });
+};
+const WorkspaceLaunchProgress = ()=>{
+    const config = useWorkspaceContext();
+    const workspaceStatus = core.useCoreSelector(core.selectWorkspaceStatusFromService);
+    const step = calculateLaunchSteps(workspaceStatus);
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: "px-2 py-1 mx-8",
+        children: /*#__PURE__*/ jsxRuntime.jsx(WorkspaceStepper, {
+            stepsConfig: config.launchStepIndicatorConfig,
+            step: step
+        })
+    });
+};
+
+const FULLSCREEN_STYLE = 'fixed top-0 left-0 w-full h-full flex flex-col flex-grow content-center items-center bg-base-lightest';
+const WorkspaceNotebookPanelWithControls = ()=>{
+    const { isFullscreen } = useWorkspaceStatusContext();
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: isFullscreen ? FULLSCREEN_STYLE : 'flex flex-col grow w-full h-full relative',
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(ExternalLoginsStatus, {}),
+            /*#__PURE__*/ jsxRuntime.jsx(PaymentPanel, {}),
+            /*#__PURE__*/ jsxRuntime.jsx(WorkspaceLaunchProgress, {}),
+            /*#__PURE__*/ jsxRuntime.jsx(WorkspacePanel, {}),
+            /*#__PURE__*/ jsxRuntime.jsx(WorkspaceNotebook, {})
+        ]
+    });
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Workspace = ({ config })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(ProtectedContent, {
+        children: /*#__PURE__*/ jsxRuntime.jsx(WorkspaceProvider, {
+            config: config,
+            children: /*#__PURE__*/ jsxRuntime.jsx(WorkspaceStatusProvider, {
+                children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    className: "flex flex-col grow w-full relative",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(WorkspaceNotebookPanelWithControls, {})
+                })
+            })
+        })
+    });
+};
+
+const TextDescription = ({ description })=>{
+    const [extend, setExtend] = React.useState(false);
+    return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+            !extend ? /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                lineClamp: 4,
+                children: description
+            }) : /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                children: description
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("button", {
+                onClick: ()=>setExtend((extend)=>!extend),
+                children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                    className: "flex text-xs font-semibold text-gray-400",
+                    children: [
+                        !extend ? 'Extend Text' : 'Collapse Text',
+                        ' ',
+                        /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            className: "my-auto",
+                            children: !extend ? /*#__PURE__*/ jsxRuntime.jsx(md.MdKeyboardArrowDown, {}) : /*#__PURE__*/ jsxRuntime.jsx(md.MdKeyboardArrowUp, {})
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+
+const AnalysisCenter = ({ tools, showFilterAndSort = false })=>{
+    const [cards, setCards] = React.useState({
+        type: '',
+        access: '',
+        search: ''
+    });
+    const handleCardsFilter = (filterType, selected)=>{
+        if (!selected?.length) return;
+        setCards((c)=>({
+                ...c,
+                [filterType]: selected
+            }));
+    };
+    const handleCardsSearch = (keyword)=>{
+        if (!keyword.length) return;
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "w-full bg-base-lighter",
+        children: [
+            showFilterAndSort ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "flex justify-between items-center w-7/8 mt-2 mx-2",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        className: "flex space-x-4",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Select, {
+                                // todo: data opts
+                                data: [],
+                                value: cards.type,
+                                comboboxProps: {
+                                    transitionProps: {
+                                        transition: 'pop-top-left',
+                                        duration: 50,
+                                        timingFunction: 'ease'
+                                    }
+                                },
+                                placeholder: "Filter by type",
+                                onChange: (value)=>handleCardsFilter('type', value)
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Select, {
+                                // todo: data opts
+                                data: [],
+                                value: cards.access,
+                                comboboxProps: {
+                                    transitionProps: {
+                                        transition: 'pop-top-left',
+                                        duration: 50,
+                                        timingFunction: 'ease'
+                                    }
+                                },
+                                placeholder: "Filter by access",
+                                onChange: (value)=>handleCardsFilter('access', value)
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.TextInput, {
+                            placeholder: "Search in Analysis Center",
+                            value: cards.search,
+                            size: "md",
+                            onChange: (event)=>handleCardsSearch(event.currentTarget.value)
+                        })
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 p-1 mx-4 overflow-y-scroll",
+                    children: tools.map(({ title, description, type, icon, image, hasDemo, loginRequired, href }, key)=>{
+                        return /*#__PURE__*/ jsxRuntime.jsx(core$1.Stack, {
+                            children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                className: "rounded-sm bg-base-max",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                        className: "p-0 rounded-sm",
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Image, {
+                                            component: Image,
+                                            src: `/images/apps/${image}`,
+                                            alt: `${title} image`,
+                                            height: 1000,
+                                            width: 1000,
+                                            radius: "md"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                        className: "flex -mt-5 relative z-10",
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                                className: "p-0.5 rounded-sm bg-base-lightest ml-5 border-2 border-base",
+                                                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Image, {
+                                                    component: Image,
+                                                    src: `/icons/apps/${icon}`,
+                                                    alt: `${title} logo`,
+                                                    width: 40,
+                                                    height: 40,
+                                                    radius: "lg"
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                                className: "relative mb-0 ml-2",
+                                                children: /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                                    className: "absolute bottom-0 left-0 text-xs text-gray-700 w-max",
+                                                    children: type === 'application' ? 'Application' : 'Jupyter Notebook'
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                        className: "flex flex-col mt-2 ml-2",
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                                className: "text-sm font-black h-6",
+                                                children: title
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                                className: "text-xs text-gray-400 h-6",
+                                                children: loginRequired ? 'Login Required' : ' '
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                                className: "text-sm p-2 h-fit",
+                                                children: /*#__PURE__*/ jsxRuntime.jsx(TextDescription, {
+                                                    description: description
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                                className: "flex mb-4 rounded-b-md",
+                                                children: type === 'application' ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                                    className: "m-auto",
+                                                    children: [
+                                                        /*#__PURE__*/ jsxRuntime.jsx(core$1.NavLink, {
+                                                            component: Link,
+                                                            href: href ?? '_blank',
+                                                            classNames: {
+                                                                root: 'bg-accent text-accent-contrast hover:bg-accent-darker p-2 rounded-sm',
+                                                                label: 'text-sm font-semibold'
+                                                            },
+                                                            label: "Run App"
+                                                        }),
+                                                        hasDemo && /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                                            className: "ml-2 p-1.5 rounded-sm text-sm font-semibold",
+                                                            children: "Demo"
+                                                        })
+                                                    ]
+                                                }) : /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                                    className: "m-auto bg-accent text-accent-contrast p-1.5 rounded-sm text-sm font-semibold",
+                                                    children: "View Notebook"
+                                                })
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        }, key);
+                    })
+                })
+            })
+        ]
+    });
+};
+
+const myGlob = (dir, filter)=>{
+    try {
+        const files = fs.readdirSync(dir);
+        return files.filter((file)=>file.search(filter) !== -1);
+    } catch (error) {
+        console.log('myGlow error', error, dir);
+    }
+    return [];
+};
+class FilesystemContent {
+    constructor({ rootPath }){
+        this.rootPath = rootPath || '';
+    }
+    async get(filepath) {
+        try {
+            return await JSON.parse(fs.readFileSync(path.join(this.rootPath, filepath)).toString('utf-8'));
+        } catch (err) {
+            throw new Error(`Cannot process ${filepath}`);
+        }
+    }
+    async getAll(filepath, filter) {
+        try {
+            const files = myGlob(path.join(this.rootPath, filepath), filter);
+            return Promise.all(files.map((file)=>this.get(path.join(this.rootPath, filepath, file))));
+        } catch (err) {
+            throw new Error(`getAllCannot process ${filepath}/${filter}`);
+        }
+    }
+}
+
+class ContentDatabase {
+    constructor(config){
+        this.config = config;
+        this.store = config.store;
+    }
+    async get(filepath) {
+        return this.store.get(filepath);
+    }
+    async getAll(filepath, filter) {
+        //   Array<Promise<T>>
+        return this.store.getAll(filepath, filter);
+    }
+}
+
+const GEN3_FRONTEND_CONFIGURATION_ROOT = process.env.GEN3_FRONTEND_CONFIGURATION_ROOT || './';
+
+const ContentRoot = GEN3_FRONTEND_CONFIGURATION_ROOT;
+const setup = ()=>{
+    const config = {
+        store: new FilesystemContent({
+            rootPath: ContentRoot
+        })
+    };
+    return new ContentDatabase(config);
+};
+const ContentSource = setup();
+
+/**
+ * Retrieves navigation page layout properties from configuration.
+ * Note: GEN3_COMMONS_NAME depends on siteConfig.json value in the data commons package
+ * @returns A Promise resolving to an object containing header and footer props.
+ */ const getNavPageLayoutPropsFromConfig = async ()=>{
+    const navigationConfigJSON = await ContentSource.get(`config/${core.GEN3_COMMONS_NAME}/navigation.json`);
+    let bannerConfigJSON = [];
+    try {
+        bannerConfigJSON = await ContentSource.get(`config/${core.GEN3_COMMONS_NAME}/banner.json`);
+    } catch (e) {
+        console.warn('No banner config found at: ', `config/${core.GEN3_COMMONS_NAME}/banner.json`);
+    }
+    const { topBar, navigation, type = 'original' } = navigationConfigJSON;
+    const headerProps = {
+        top: topBar,
+        navigation: navigation,
+        banners: bannerConfigJSON,
+        type
+    };
+    const footerProps = await ContentSource.get(`config/${core.GEN3_COMMONS_NAME}/footer.json`);
+    return {
+        headerProps,
         footerProps,
         headerData: {
             title: 'Gen3 Frontend Framework Page',
@@ -11701,7 +12959,7 @@ const createMantineTheme = (fonts, colors)=>{
  * inactivity limits for session timeouts.
  */ const Gen3Provider = ({ colors, icons, fonts, sessionConfig, modalsConfig, children })=>{
     React.useEffect(()=>{
-        react.addCollection(icons);
+        icons.forEach((i)=>react.addCollection(i));
     }, [
         icons
     ]);
@@ -12506,51 +13764,6 @@ const ColorThemePageGetServerSideProps = async ()=>{
     };
 };
 
-const ProtectedContent = ({ children, referer })=>{
-    const router$1 = router.useRouter();
-    let redirect = referer;
-    if (!referer && typeof window !== 'undefined') {
-        // route not available on SSR
-        redirect = router$1.asPath;
-    }
-    const onUnauthenticated = ()=>{
-        if (typeof window !== 'undefined') // route not available on SSR
-        router$1.push({
-            pathname: '/Login',
-            query: {
-                referer: redirect
-            }
-        });
-    };
-    const { status, pending } = useSession(true, onUnauthenticated);
-    if (status !== 'issued') {
-        // not logged in
-        if (pending) return /*#__PURE__*/ jsxRuntime.jsx(core$1.LoadingOverlay, {
-            visible: pending
-        });
-        else return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-            className: "w-full h-full relative",
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsx(core$1.LoadingOverlay, {
-                    visible: pending
-                }),
-                /*#__PURE__*/ jsxRuntime.jsx(core$1.Center, {
-                    children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Paper, {
-                        shadow: "md",
-                        p: "md",
-                        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
-                            children: "You are not signed in and cannot access this protected content. Please login in."
-                        })
-                    })
-                })
-            ]
-        });
-    }
-    return /*#__PURE__*/ jsxRuntime.jsx(React.Fragment, {
-        children: children
-    });
-};
-
 const SOON_IN_DAYS = 86400 * 5;
 const getStatus = (expiration, now)=>{
     if (expiration < now) return 'Expired';
@@ -15086,67 +16299,182 @@ const SubmissionsTable = ()=>{
                 }),
                 ' '
             ]
-        });
-    }
-    if (isError) {
-        return /*#__PURE__*/ jsxRuntime.jsx("div", {
-            className: "flex w-full py-24 h-100 relative justify-center",
-            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
-                size: 'xl',
-                children: "Error loading project data"
-            })
-        });
-    }
-    return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        className: "flex w-full bg-base-max p-4 rounded-lg",
-        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-            className: "grow w-auto inline-block overflow-x-scroll",
-            children: /*#__PURE__*/ jsxRuntime.jsx(mantineReactTable.MantineReactTable, {
-                table: table
-            })
+        });
+    }
+    if (isError) {
+        return /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "flex w-full py-24 h-100 relative justify-center",
+            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                size: 'xl',
+                children: "Error loading project data"
+            })
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: "flex w-full bg-base-max p-4 rounded-lg",
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "grow w-auto inline-block overflow-x-scroll",
+            children: /*#__PURE__*/ jsxRuntime.jsx(mantineReactTable.MantineReactTable, {
+                table: table
+            })
+        })
+    });
+};
+
+const SubmissionPanel = ({ config })=>{
+    if (!config) {
+        return /*#__PURE__*/ jsxRuntime.jsx(MessagePanel, {
+            message: "Submission config is not defined. Page disabled"
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "flex flex-col items-center p-4 w-full bg-base-lightest",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(ProjectTable, {
+                columns: config.projectTable.columns
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(SubmissionsTable, {})
+        ]
+    });
+};
+
+const SubmissionPage = ({ submissionConfig, headerProps, footerProps })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
+        footerProps: footerProps,
+        headerProps: headerProps,
+        headerData: {
+            title: 'Gen3 Submission Page',
+            content: 'Submission page',
+            key: 'gen3-submission-page'
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx(SubmissionPanel, {
+            config: submissionConfig
+        })
+    });
+};
+
+const SubmissionPageGetServerSideProps = async ()=>{
+    try {
+        const submissionConfig = await ContentSource.get(`config/${core.GEN3_COMMONS_NAME}/submission.json`);
+        return {
+            props: {
+                ...await getNavPageLayoutPropsFromConfig(),
+                submissionConfig: submissionConfig
+            }
+        };
+    } catch (err) {
+        console.error(err);
+        return {
+            props: {
+                ...await getNavPageLayoutPropsFromConfig(),
+                submissionConfig: undefined
+            }
+        };
+    }
+};
+
+const WorkspacePage = ({ headerProps, footerProps, workspaceProps })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
+        headerProps,
+        footerProps,
+        headerData: {
+            title: 'Gen3 Workspace Page',
+            content: 'Workspace page',
+            key: 'gen3-workspace-page'
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx(Workspace, {
+            config: workspaceProps
+        })
+    });
+};
+
+const WorkspaceNoAccessPage = ({ headerProps, footerProps })=>{
+    const supportEmail = headerProps?.siteProps?.contactEmail || 'support@datacommons.io';
+    return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
+        headerProps,
+        footerProps,
+        headerData: {
+            title: 'Gen3 Workspace No Access Page',
+            content: 'Workspace no access page',
+            key: 'gen3-workspace-no-access-page'
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsxs(CardContainer, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx("h1", {
+                    children: "Error opening workspace..."
+                }),
+                /*#__PURE__*/ jsxRuntime.jsxs("p", {
+                    children: [
+                        "Workspace access requires authorization. Please contact",
+                        ' ',
+                        /*#__PURE__*/ jsxRuntime.jsx("a", {
+                            href: `mailto:${supportEmail}`,
+                            children: supportEmail
+                        }),
+                        " for more information."
+                    ]
+                })
+            ]
         })
     });
 };
 
-const SubmissionPanel = ({ config })=>{
-    if (!config) {
-        return /*#__PURE__*/ jsxRuntime.jsx(MessagePanel, {
-            message: "Submission config is not defined. Page disabled"
-        });
+const WorkspacePageGetServerSideProps = async (_context)=>{
+    const workspaceProps = await ContentSource.get(`config/${core.GEN3_COMMONS_NAME}/workspace.json`);
+    try {
+        return {
+            props: {
+                ...await getNavPageLayoutPropsFromConfig(),
+                workspaceProps
+            }
+        };
+    } catch (err) {
+        return {
+            props: {
+                ...await getNavPageLayoutPropsFromConfig(),
+                workspaceProps: {
+                    launchStepIndicatorConfig: {}
+                }
+            }
+        };
     }
-    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-        className: "flex flex-col items-center p-4 w-full bg-base-lightest",
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx(ProjectTable, {
-                columns: config.projectTable.columns
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(SubmissionsTable, {})
-        ]
+};
+const WorkspaceNoAccessPageServerSideProps = async ()=>{
+    return {
+        props: {
+            ...await getNavPageLayoutPropsFromConfig()
+        }
+    };
+};
+
+const AnalysisPanel = ({ tools })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(AnalysisCenter, {
+        tools: tools
     });
 };
 
-const SubmissionPage = ({ submissionConfig, headerProps, footerProps })=>{
+const AnalysisPage = ({ headerProps, footerProps, tools })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
-        footerProps: footerProps,
-        headerProps: headerProps,
+        headerProps,
+        footerProps,
         headerData: {
-            title: 'Gen3 Submission Page',
-            content: 'Submission page',
-            key: 'gen3-submission-page'
+            title: 'Gen3 Analysis Center',
+            content: 'Analysis Center',
+            key: 'gen3-analysis-center'
         },
-        children: /*#__PURE__*/ jsxRuntime.jsx(SubmissionPanel, {
-            config: submissionConfig
+        children: /*#__PURE__*/ jsxRuntime.jsx(AnalysisPanel, {
+            tools: tools
         })
     });
 };
 
-const SubmissionPageGetServerSideProps = async ()=>{
+const AnalysisPageGetServerSideProps = async ()=>{
     try {
-        const submissionConfig = await ContentSource.get(`config/${core.GEN3_COMMONS_NAME}/submission.json`);
+        const analysisConfig = await ContentSource.get(`config/${core.GEN3_COMMONS_NAME}/analysisTools.json`);
         return {
             props: {
                 ...await getNavPageLayoutPropsFromConfig(),
-                submissionConfig: submissionConfig
+                ...analysisConfig
             }
         };
     } catch (err) {
@@ -15154,31 +16482,647 @@ const SubmissionPageGetServerSideProps = async ()=>{
         return {
             props: {
                 ...await getNavPageLayoutPropsFromConfig(),
-                submissionConfig: undefined
+                tools: []
             }
         };
     }
 };
 
-const WorkspacesPage = ({ headerProps, footerProps, workspaceProps })=>{
+// File validation
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
+const ALLOWED_IMAGE_TYPES = [
+    'image/jpeg',
+    'image/png',
+    'image/svg+xml'
+];
+const MAX_HISTORY = 50;
+const AnalysisCardEditor = ()=>{
+    // Enhanced state management with history
+    const [history, setHistory] = React.useState({
+        past: [],
+        present: [],
+        future: []
+    });
+    const [editingIndex, setEditingIndex] = React.useState(null);
+    const [selectedCards, setSelectedCards] = React.useState([]);
+    const [errors, setErrors] = React.useState({});
+    const [searchTerm, setSearchTerm] = React.useState('');
+    const [filters, setFilters] = React.useState({
+        type: [],
+        loginRequired: null
+    });
+    const [currentCard, setCurrentCard] = React.useState({
+        title: '',
+        type: '',
+        icon: '',
+        image: '',
+        description: '',
+        loginRequired: false,
+        href: '/'
+    });
+    // Helper function to update history
+    const updateHistory = React.useCallback((newPresent)=>{
+        setHistory((prev)=>({
+                past: [
+                    ...prev.past,
+                    prev.present
+                ].slice(-MAX_HISTORY),
+                present: newPresent,
+                future: []
+            }));
+    }, []);
+    // Undo/Redo functions
+    const undo = React.useCallback(()=>{
+        setHistory((prev)=>{
+            if (prev.past.length === 0) return prev;
+            const newPast = prev.past.slice(0, -1);
+            const newPresent = prev.past[prev.past.length - 1];
+            return {
+                past: newPast,
+                present: newPresent,
+                future: [
+                    prev.present,
+                    ...prev.future
+                ]
+            };
+        });
+    }, []);
+    const redo = React.useCallback(()=>{
+        setHistory((prev)=>{
+            if (prev.future.length === 0) return prev;
+            const [newPresent, ...newFuture] = prev.future;
+            return {
+                past: [
+                    ...prev.past,
+                    prev.present
+                ],
+                present: newPresent,
+                future: newFuture
+            };
+        });
+    }, []);
+    const validateFile = (file, type)=>{
+        if (!file) return null;
+        if (!ALLOWED_IMAGE_TYPES.includes(file.type)) {
+            return 'Invalid file type. Please upload a JPEG, PNG, or SVG file.';
+        }
+        if (file.size > MAX_FILE_SIZE) {
+            return 'File size exceeds 5MB limit.';
+        }
+        return null;
+    };
+    const handleFileChange = (file, field)=>{
+        const error = validateFile(file);
+        if (error) {
+            setErrors({
+                ...errors,
+                [field]: error
+            });
+            return;
+        }
+        setErrors({
+            ...errors,
+            [field]: ''
+        });
+        if (file) {
+            const fileWithPreview = file;
+            fileWithPreview.preview = URL.createObjectURL(file);
+            setCurrentCard((prev)=>({
+                    ...prev,
+                    [`${field}File`]: fileWithPreview,
+                    [field]: file.name
+                }));
+        }
+    };
+    const validateForm = ()=>{
+        const newErrors = {};
+        if (!currentCard.title.trim()) {
+            newErrors.title = 'Title is required';
+        }
+        if (!currentCard.type) {
+            newErrors.type = 'Type is required';
+        }
+        if (!currentCard.description.trim()) {
+            newErrors.description = 'Description is required';
+        }
+        if (!currentCard.href.trim()) {
+            newErrors.description = 'href is required';
+        }
+        setErrors(newErrors);
+        return Object.keys(newErrors).length === 0;
+    };
+    const handleDelete = (indices)=>{
+        const newCards = history.present.filter((_, index)=>!indices.includes(index));
+        updateHistory(newCards);
+        setSelectedCards([]);
+    };
+    // Import/Export
+    const handleImport = (file)=>{
+        if (!file) return;
+        const reader = new FileReader();
+        reader.onload = (e)=>{
+            try {
+                const content = e.target?.result;
+                const imported = JSON.parse(content);
+                const withImages = imported.map((card)=>{
+                    return {
+                        ...card,
+                        iconFile: {
+                            preview: card.icon
+                        },
+                        imageFile: {
+                            preview: card.image
+                        }
+                    };
+                });
+                if (Array.isArray(withImages)) {
+                    updateHistory(withImages);
+                    console.log('Imported cards:', withImages);
+                }
+            } catch (error) {
+                alert('Invalid file format');
+            }
+        };
+        reader.readAsText(file);
+    };
+    const handleExport = ()=>{
+        const dataStr = JSON.stringify(history.present, null, 2);
+        const blob = new Blob([
+            dataStr
+        ], {
+            type: 'application/json'
+        });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.download = 'analysis-cards.json';
+        link.href = url;
+        link.click();
+    };
+    // Filter cards
+    history.present.filter((card)=>{
+        const matchesSearch = card.title.toLowerCase().includes(searchTerm.toLowerCase()) || card.description.toLowerCase().includes(searchTerm.toLowerCase());
+        const matchesType = filters.type.length === 0 || filters.type.includes(card.type);
+        const matchesLogin = filters.loginRequired === null || card.loginRequired === filters.loginRequired;
+        return matchesSearch && matchesType && matchesLogin;
+    });
+    // Enhanced drag and drop handling with history
+    const handleDragEnd = (result)=>{
+        if (!result.destination) return;
+        const items = Array.from(history.present);
+        const [reorderedItem] = items.splice(result.source.index, 1);
+        items.splice(result.destination.index, 0, reorderedItem);
+        updateHistory(items);
+    };
+    // Enhanced edit handling with history
+    const handleEdit = (index)=>{
+        setEditingIndex(index);
+        setCurrentCard({
+            ...history.present[index],
+            // Reset file previews when editing
+            iconFile: undefined,
+            imageFile: undefined
+        });
+    };
+    // Enhanced save handling
+    const handleSave = ()=>{
+        if (!validateForm()) return;
+        let newCards;
+        if (editingIndex !== null) {
+            newCards = history.present.map((card, index)=>index === editingIndex ? {
+                    ...currentCard,
+                    // Remove the file preview properties before saving
+                    iconFile: undefined,
+                    imageFile: undefined
+                } : card);
+        } else {
+            newCards = [
+                ...history.present,
+                {
+                    ...currentCard,
+                    // Remove the file preview properties before saving
+                    iconFile: undefined,
+                    imageFile: undefined
+                }
+            ];
+        }
+        updateHistory(newCards);
+        resetForm();
+    };
+    // Enhanced reset form
+    const resetForm = ()=>{
+        setCurrentCard({
+            title: '',
+            type: '',
+            icon: '',
+            image: '',
+            description: '',
+            loginRequired: false,
+            href: '/'
+        });
+        setEditingIndex(null);
+        setErrors({});
+    };
+    const CardPreview = ({ card })=>/*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "flex flex-col items-center w-full max-w-sm",
+            children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "rounded-sm bg-white w-full",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        className: "p-0 rounded-sm relative h-48 bg-gray-200",
+                        children: card.imageFile?.preview ? /*#__PURE__*/ jsxRuntime.jsx(Image, {
+                            src: `/images/apps/${card.imageFile.preview}`,
+                            alt: "Preview",
+                            className: "w-full h-full object-cover"
+                        }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            className: "w-full h-full flex items-center justify-center text-gray-400",
+                            children: "Preview Image"
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        className: "flex -mt-5 relative z-10",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                className: "p-0.5 rounded-sm bg-gray-100 ml-5 w-10 h-10",
+                                children: card.iconFile?.preview ? /*#__PURE__*/ jsxRuntime.jsx(Image, {
+                                    src: `/icons/apps/${card.iconFile.preview}`,
+                                    alt: "Icon",
+                                    className: "w-full h-full object-contain"
+                                }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                    className: "w-full h-full flex items-center justify-center bg-gray-200"
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                className: "relative mb-0 ml-2",
+                                children: /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                    className: "absolute bottom-0 left-0 text-xs text-gray-400 w-max",
+                                    children: card.type === 'application' ? 'Application' : 'Jupyter Notebook'
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        className: "flex flex-col mt-2 ml-2",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                className: "text-sm font-black h-6",
+                                children: card.title
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                className: "text-xs text-gray-400 h-6",
+                                children: card.loginRequired ? 'Login Required' : ' '
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                className: "text-sm p-2 h-fit",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(TextDescription, {
+                                    description: card.description
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                className: "flex mb-4 rounded-b-md h-6",
+                                children: card.type === 'application' ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                    className: "m-auto",
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                            className: "bg-blue-500 mr-2 text-white p-1.5 rounded-sm text-sm font-semibold",
+                                            children: "Run App"
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                            className: "bg-blue-500 ml-2 text-white p-1.5 rounded-sm text-sm font-semibold",
+                                            children: "Demo"
+                                        })
+                                    ]
+                                }) : /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                    className: "m-auto bg-blue-500 text-white p-1.5 rounded-sm text-sm font-semibold",
+                                    children: "View Notebook"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: "p-8 max-w-6xl mx-auto",
+        children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
+            gap: "xl",
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(core$1.Title, {
+                    order: 2,
+                    children: "Analysis Card Editor"
+                }),
+                /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsxs(core$1.Tabs, {
+                            defaultValue: "edit",
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsxs(core$1.Tabs.List, {
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.Tab, {
+                                            value: "edit",
+                                            children: "Edit"
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.Tab, {
+                                            value: "preview",
+                                            children: "Preview"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.Panel, {
+                                    value: "edit",
+                                    pt: "xs",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Card, {
+                                        shadow: "sm",
+                                        p: "lg",
+                                        radius: "md",
+                                        withBorder: true,
+                                        children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
+                                            gap: "md",
+                                            children: [
+                                                /*#__PURE__*/ jsxRuntime.jsx(core$1.TextInput, {
+                                                    required: true,
+                                                    label: "Title",
+                                                    placeholder: "Enter tool title",
+                                                    value: currentCard.title,
+                                                    onChange: (e)=>setCurrentCard((prev)=>({
+                                                                ...prev,
+                                                                title: e.target.value
+                                                            })),
+                                                    error: errors.title
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(core$1.Select, {
+                                                    required: true,
+                                                    label: "Type",
+                                                    placeholder: "Select tool type",
+                                                    value: currentCard.type,
+                                                    onChange: (value)=>setCurrentCard((prev)=>({
+                                                                ...prev,
+                                                                type: value || ''
+                                                            })),
+                                                    data: [
+                                                        {
+                                                            value: 'application',
+                                                            label: 'Application'
+                                                        },
+                                                        {
+                                                            value: 'notebook',
+                                                            label: 'Jupyter Notebook'
+                                                        }
+                                                    ],
+                                                    error: errors.type
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                                                    grow: true,
+                                                    children: [
+                                                        /*#__PURE__*/ jsxRuntime.jsx(core$1.FileInput, {
+                                                            label: "Icon",
+                                                            placeholder: "Upload icon",
+                                                            accept: ALLOWED_IMAGE_TYPES.join(','),
+                                                            onChange: (file)=>handleFileChange(file, 'icon'),
+                                                            error: errors.icon
+                                                        }),
+                                                        /*#__PURE__*/ jsxRuntime.jsx(core$1.FileInput, {
+                                                            label: "Preview Image",
+                                                            placeholder: "Upload preview image",
+                                                            accept: ALLOWED_IMAGE_TYPES.join(','),
+                                                            onChange: (file)=>handleFileChange(file, 'image'),
+                                                            error: errors.image
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(core$1.Textarea, {
+                                                    required: true,
+                                                    label: "Description",
+                                                    placeholder: "Enter tool description",
+                                                    minRows: 4,
+                                                    value: currentCard.description,
+                                                    onChange: (e)=>setCurrentCard((prev)=>({
+                                                                ...prev,
+                                                                description: e.target.value
+                                                            })),
+                                                    error: errors.description
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(core$1.TextInput, {
+                                                    required: true,
+                                                    label: "href",
+                                                    placeholder: "Enter application path",
+                                                    value: currentCard.href,
+                                                    onChange: (e)=>setCurrentCard((prev)=>({
+                                                                ...prev,
+                                                                href: e.target.value
+                                                            })),
+                                                    error: errors.href
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsx(core$1.Switch, {
+                                                    label: "Login Required",
+                                                    checked: currentCard.loginRequired,
+                                                    onChange: (e)=>setCurrentCard((prev)=>({
+                                                                ...prev,
+                                                                loginRequired: e.currentTarget.checked
+                                                            }))
+                                                }),
+                                                /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                                                    children: [
+                                                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                                                            onClick: handleSave,
+                                                            color: "blue",
+                                                            children: editingIndex !== null ? 'Update Card' : 'Add Card'
+                                                        }),
+                                                        editingIndex !== null && /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                                                            onClick: resetForm,
+                                                            color: "gray",
+                                                            children: "Cancel Edit"
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        })
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.Panel, {
+                                    value: "preview",
+                                    pt: "xs",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(CardPreview, {
+                                        card: currentCard
+                                    })
+                                })
+                            ]
+                        }),
+                        history.present.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(core$1.Card, {
+                            shadow: "sm",
+                            p: "lg",
+                            radius: "md",
+                            withBorder: true,
+                            children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsxs(core$1.Title, {
+                                        order: 3,
+                                        children: [
+                                            "Added Cards (",
+                                            history.present.length,
+                                            ")"
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(dnd.DragDropContext, {
+                                        onDragEnd: handleDragEnd,
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(dnd.Droppable, {
+                                            droppableId: "cards",
+                                            children: (provided)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                                    ...provided.droppableProps,
+                                                    ref: provided.innerRef,
+                                                    children: [
+                                                        history.present.map((card, index)=>/*#__PURE__*/ jsxRuntime.jsx(dnd.Draggable, {
+                                                                draggableId: `card-${index}`,
+                                                                index: index,
+                                                                children: (provided)=>/*#__PURE__*/ jsxRuntime.jsx("div", {
+                                                                        ref: provided.innerRef,
+                                                                        ...provided.draggableProps,
+                                                                        ...provided.dragHandleProps,
+                                                                        className: "mb-2",
+                                                                        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Card, {
+                                                                            withBorder: true,
+                                                                            children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                                                                                justify: "space-between",
+                                                                                children: [
+                                                                                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                                                                        children: [
+                                                                                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                                                                                                fw: 500,
+                                                                                                children: card.title
+                                                                                            }),
+                                                                                            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Text, {
+                                                                                                size: "sm",
+                                                                                                color: "dimmed",
+                                                                                                children: [
+                                                                                                    "Type: ",
+                                                                                                    card.type
+                                                                                                ]
+                                                                                            }),
+                                                                                            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Text, {
+                                                                                                size: "sm",
+                                                                                                color: "dimmed",
+                                                                                                children: [
+                                                                                                    "Login Required:",
+                                                                                                    ' ',
+                                                                                                    card.loginRequired ? 'Yes' : 'No'
+                                                                                                ]
+                                                                                            })
+                                                                                        ]
+                                                                                    }),
+                                                                                    /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                                                                                        children: [
+                                                                                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                                                                                                variant: "light",
+                                                                                                size: "xs",
+                                                                                                onClick: ()=>handleEdit(index),
+                                                                                                children: "Edit"
+                                                                                            }),
+                                                                                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                                                                                                variant: "light",
+                                                                                                color: "red",
+                                                                                                size: "xs",
+                                                                                                onClick: ()=>handleDelete([
+                                                                                                        index
+                                                                                                    ]),
+                                                                                                children: "Delete"
+                                                                                            })
+                                                                                        ]
+                                                                                    })
+                                                                                ]
+                                                                            })
+                                                                        })
+                                                                    })
+                                                            }, index)),
+                                                        provided.placeholder
+                                                    ]
+                                                })
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                    gap: "xs",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.ActionIcon, {
+                            onClick: undo,
+                            disabled: history.past.length === 0,
+                            title: "Undo",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(fa.FaUndo, {
+                                size: 20
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.ActionIcon, {
+                            onClick: redo,
+                            disabled: history.future.length === 0,
+                            title: "Redo",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(fa.FaRedo, {
+                                size: 20
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.FileInput, {
+                            accept: ".json",
+                            onChange: handleImport,
+                            style: {
+                                display: 'none'
+                            },
+                            id: "import-file"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                            variant: "light",
+                            leftSection: /*#__PURE__*/ jsxRuntime.jsx(fa.FaUpload, {
+                                size: 16
+                            }),
+                            onClick: ()=>document.getElementById('import-file')?.click(),
+                            children: "Import"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                            variant: "light",
+                            leftSection: /*#__PURE__*/ jsxRuntime.jsx(fa.FaDownload, {
+                                size: 16
+                            }),
+                            onClick: handleExport,
+                            children: "Export"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+const AnalysisEditorPage = ({ headerProps, footerProps, analysisFile })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
         headerProps,
         footerProps,
+        headerProps: headerProps,
         headerData: {
-            title: 'Gen3 Workspace Page',
-            content: 'Workspace page',
-            key: 'gen3-workspace-page'
+            title: 'Gen3 Analysis Editor Page',
+            content: 'Analysis Editor page',
+            key: 'gen3-analysis-editor-page'
         },
-        children: /*#__PURE__*/ jsxRuntime.jsx(WorkspacesPanel, {})
-    });
-};
-
-const WorkspacesPageGetServerSideProps = async (_context)=>{
-    const workspaceProps = await ContentSource.get(`config/${core.GEN3_COMMONS_NAME}/workspaces.json`);
+        children: /*#__PURE__*/ jsxRuntime.jsx(AnalysisCardEditor, {})
+    });
+};
+
+const AnalysisEditorPageGetServerSideProps = async ()=>{
+    // const rootPath = `config/${GEN3_COMMONS_NAME}/`;
+    // const filepath = 'user.yaml';
+    // let data: Record<string, any> = {};
+    // try {
+    //   // const contents = fs.readFileSync(path.join(rootPath, filepath), 'utf8');
+    //  //  data = await YAML.parse(contents);
+    // } catch (error: unknown) {
+    //   if (error instanceof Error) {
+    //     console.error(error.message);
+    //   }
+    //   throw new Error(`Cannot process ${rootPath}${filepath}`);
+    // }
     return {
         props: {
-            ...await getNavPageLayoutPropsFromConfig(),
-            workspaceProps
+            ...await getNavPageLayoutPropsFromConfig()
         }
     };
 };
@@ -15227,6 +17171,38 @@ const AISearchPageGetServerSideProps = async ()=>{
     }
 };
 
+const NotebookLitePage = ({ headerProps, footerProps })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
+        footerProps,
+        headerProps,
+        headerData: {
+            title: 'Gen3 Notebooks Lite Page',
+            content: 'Notebooks Lite',
+            key: 'gen3-notebooks-lite-page'
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "flex justify-items-center w-full",
+            children: /*#__PURE__*/ jsxRuntime.jsx("iframe", {
+                allow: "cross-origin",
+                src: "https://localhost:3010/jupyter/index.html",
+                width: "100%",
+                height: "100%",
+                title: "client notebook"
+            })
+        })
+    });
+};
+
+// should move this thing into _app.tsx and make a dedicated layout component after https://github.com/vercel/next.js/discussions/10949 is addressed
+const NotebookLitePageGetStaticProps = async ()=>{
+    const navPageLayoutProps = await getNavPageLayoutPropsFromConfig();
+    return {
+        props: {
+            ...navPageLayoutProps
+        }
+    };
+};
+
 const CrosswalkTable = ({ mapping, data, isFetching, isError, tableMessage, showSubmittedIdInTable })=>{
     const cols = React.useMemo(()=>{
         return [
@@ -15803,6 +17779,11 @@ exports.AISearchPageGetServerSideProps = AISearchPageGetServerSideProps;
 exports.AdminAuthZPageGetServerSideProps = AdminAuthZPageGetServerSideProps;
 exports.AiSearch = AiSearch;
 exports.AiSearchPage = AISearchPage;
+exports.AnalysisCenter = AnalysisCenter;
+exports.AnalysisEditorPage = AnalysisEditorPage;
+exports.AnalysisEditorPageGetServerSideProps = AnalysisEditorPageGetServerSideProps;
+exports.AnalysisPage = AnalysisPage;
+exports.AnalysisPageGetServerSideProps = AnalysisPageGetServerSideProps;
 exports.AuthzPage = AuthzPage;
 exports.BaseModal = BaseModal;
 exports.Charts = Charts;
@@ -15847,6 +17828,8 @@ exports.NavPageLayout = NavPageLayout;
 exports.NavigationBar = NavigationBar;
 exports.NavigationButton = NavigationButton;
 exports.NoAccessModal = NoAccessModal;
+exports.NotebookLitePage = NotebookLitePage;
+exports.NotebookLitePageGetStaticProps = NotebookLitePageGetStaticProps;
 exports.ProfilePage = ProfilePage;
 exports.ProfilePageGetServerSideProps = ProfilePageGetServerSideProps;
 exports.ProfileProvider = ProfileProvider;
@@ -15862,9 +17845,11 @@ exports.SubmissionPageGetServerSideProps = SubmissionPageGetServerSideProps;
 exports.TagCloud = TagCloud;
 exports.TailwindConfig = TailwindConfig;
 exports.User = User;
-exports.WorkspacesPage = WorkspacesPage;
-exports.WorkspacesPageGetServerSideProps = WorkspacesPageGetServerSideProps;
-exports.WorkspacesPanel = WorkspacesPanel;
+exports.Workspace = Workspace;
+exports.WorkspaceNoAccessPage = WorkspaceNoAccessPage;
+exports.WorkspaceNoAccessPageServerSideProps = WorkspaceNoAccessPageServerSideProps;
+exports.WorkspacePage = WorkspacePage;
+exports.WorkspacePageGetServerSideProps = WorkspacePageGetServerSideProps;
 exports.capitalize = capitalize;
 exports.computeRowSpan = computeRowSpan;
 exports.create10ColorAccessibleContrast = create10ColorAccessibleContrast;