@gen3/frontend 0.10.50 → 0.10.51

package/dist/esm/index.js

@@ -5,18 +5,18 @@ import { twMerge } from 'tailwind-merge';
 import Image from 'next/image';
 import { toString, capitalize as capitalize$1, isArray, get, partial, omit } from 'lodash';
 import Link from 'next/link';
-import { FaExternalLinkAlt, FaQuestion, FaExclamation, FaExclamationTriangle, FaUndo, FaPlus, FaChartPie, FaGraduationCap, FaRegQuestionCircle, FaVideo, FaCircle } from 'react-icons/fa';
+import { FaExternalLinkAlt, FaQuestion, FaExclamation, FaExclamationTriangle, FaUndo, FaPlus, FaRegStopCircle, FaUser, FaExclamationCircle, FaChartPie, FaGraduationCap, FaRegQuestionCircle, FaVideo, FaCircle, FaRedo, FaUpload, FaDownload } from 'react-icons/fa';
 import { Icon, addCollection } from '@iconify/react';
-import { Tooltip, UnstyledButton, Menu, Text, Button, Box, Badge, Alert, Tabs, Accordion, Stack, Group, Drawer, CopyButton, LoadingOverlay, factory, useProps, useMantineTheme, getStyleObject, Paper, Checkbox, SegmentedControl, Loader, Grid, Card, Table, ColorSwatch, Modal, Switch, Divider, Autocomplete, TextInput, Title, Avatar, Select, Textarea, FileButton, Anchor, ThemeIcon, ActionIcon, NumberInput, RangeSlider, MultiSelect, Center, Flex, ScrollArea, rem, MantineProvider, createTheme, Highlight, List } from '@mantine/core';
+import { Tooltip, UnstyledButton, Menu, Text, Button, Box, Badge, Alert, Tabs, Accordion, Stack, Group, Drawer, CopyButton, LoadingOverlay, factory, useProps, useMantineTheme, getStyleObject, Paper, Checkbox, SegmentedControl, Loader, Grid, Card, Table, ColorSwatch, Modal, Switch, Divider, Autocomplete, TextInput, Title, Avatar, ThemeIcon, Select, Textarea, FileButton, Anchor, ActionIcon, NumberInput, RangeSlider, MultiSelect, Center, Transition, rem, Stepper, Image as Image$1, NavLink, Flex, ScrollArea, MantineProvider, createTheme, Highlight, List, FileInput } from '@mantine/core';
 import { useRouter } from 'next/router';
 import { usePathname } from 'next/navigation';
-import { MdLogin, MdKeyboardDoubleArrowLeft, MdUndo, MdSearch, MdClose, MdInfo, MdExpandLess, MdExpandMore, MdFlip, MdAddCircle, MdRemoveCircle, MdOutlineArrowBack, MdOutlineArrowForward, MdOutlineArrowBackIos, MdOutlineArrowForwardIos, MdKeyboardArrowDown, MdKeyboardArrowUp, MdDownload, MdFormatQuote, MdOutlineSearch, MdOutlineBarChart, MdGroup, MdDelete } from 'react-icons/md';
-import { useCoreDispatch, useLazyFetchUserDetailsQuery, useCoreSelector, selectUserAuthStatus, GEN3_REDIRECT_URL, showModal, Modals, GEN3_FENCE_API, isAuthenticated, selectUserDetails, useIsUserLoggedIn, fieldNameToTitle, useGetMDSQuery, selectAuthzMappingData, useGetAggMDSQuery, useAskQuestionMutation, useGetIndexAggMDSQuery, useGetTagsQuery, useUserAuth, useGetAuthzMappingsQuery, useGetLoginProvidersQuery, hideModal, useGetCSRFQuery, selectCurrentModal, updateCohortFilter, selectIndexedFilterByName, isOperationWithField, removeCohortFilter, trimFirstFieldNameToTitle, selectCohortFilters, handleOperation, selectCurrentCohortId, clearCohortFilters, selectCurrentCohortName, useGeneralGQLQuery, selectIndexFilters, useGetRawDataAndTotalCountsQuery, Accessibility, downloadFromGuppyToBlob, downloadJSONDataFromGuppy, useGetAggsQuery, extractEnumFilterValue, useGetCountsQuery, selectHeadersWithCSRFToken, GEN3_GUPPY_API, GEN3_COMMONS_NAME, createAppStore, createGen3AppWithOwnStore, createAppApiForRTKQ, getGen3AppId, CoreProvider, useGetCredentialsQuery, useRemoveCredentialMutation, useAddNewCredentialMutation, useGetExternalLoginsQuery, useGetDictionaryQuery, useGetProjectsDetailsQuery, useGetSubmissionsQuery, useLazyGetCrosswalkDataQuery } from '@gen3/core';
+import { MdLogin, MdKeyboardDoubleArrowLeft, MdUndo, MdSearch, MdClose, MdInfo, MdExpandLess, MdExpandMore, MdFlip, MdAddCircle, MdRemoveCircle, MdOutlineArrowBack, MdOutlineArrowForward, MdKeyboardArrowDown, MdKeyboardArrowUp, MdDownload, MdFormatQuote, MdOutlineSearch, MdOutlineBarChart, MdGroup, MdDelete } from 'react-icons/md';
+import { useGetWorkspaceStatusQuery, useTerminateWorkspaceMutation, useCoreSelector, selectRequestedWorkspaceStatus, useCoreDispatch, WorkspaceStatus, setActiveWorkspaceStatus, setRequestedWorkspaceStatus, useLazyFetchUserDetailsQuery, selectUserAuthStatus, GEN3_REDIRECT_URL, showModal, Modals, GEN3_FENCE_API, isAuthenticated, selectUserDetails, useIsUserLoggedIn, fieldNameToTitle, useGetMDSQuery, selectAuthzMappingData, useGetAggMDSQuery, useAskQuestionMutation, useGetIndexAggMDSQuery, useGetTagsQuery, useUserAuth, useGetAuthzMappingsQuery, useGetLoginProvidersQuery, hideModal, useGetCSRFQuery, selectCurrentModal, updateCohortFilter, selectIndexedFilterByName, isOperationWithField, removeCohortFilter, trimFirstFieldNameToTitle, selectCohortFilters, handleOperation, selectCurrentCohortId, setCohortFilter, clearCohortFilters, selectCurrentCohortName, useGeneralGQLQuery, selectIndexFilters, useGetRawDataAndTotalCountsQuery, Accessibility, downloadFromGuppyToBlob, downloadJSONDataFromGuppy, useGetAggsQuery, extractEnumFilterValue, useGetCountsQuery, selectHeadersWithCSRFToken, GEN3_GUPPY_API, useLaunchWorkspaceMutation, useGetWorkspacePayModelsQuery, selectActiveWorkspaceStatus, isFetchBaseQueryError, setActiveWorkspace, selectWorkspaceStatusFromService, selectActiveWorkspaceId, useGetWorkspaceOptionsQuery, GEN3_WORKSPACE_API, useGetExternalLoginsQuery, isWorkspaceRunningOrStopping, useSetCurrentPayModelMutation, PodStatus, PodConditionType, GEN3_COMMONS_NAME, createAppStore, createGen3AppWithOwnStore, createAppApiForRTKQ, getGen3AppId, CoreProvider, useGetCredentialsQuery, useRemoveCredentialMutation, useAddNewCredentialMutation, useGetDictionaryQuery, useGetProjectsDetailsQuery, useGetSubmissionsQuery, useLazyGetCrosswalkDataQuery } from '@gen3/core';
 import { useDeepCompareEffect, useDeepCompareMemo, useDeepCompareCallback } from 'use-deep-compare';
 import 'swr';
 import { getCookie, deleteCookie, setCookie } from 'cookies-next';
 import { decodeJwt } from 'jose';
-import { showNotification, notifications, cleanNotifications, Notifications } from '@mantine/notifications';
+import { notifications, showNotification, cleanNotifications, Notifications } from '@mantine/notifications';
 import Markdown from 'react-markdown';
 import { AiOutlineLogin } from 'react-icons/ai';
 import { PiDotsThreeCircleThin, PiTrash, PiSparkleFill, PiCaretUpFill, PiCaretDownFill, PiCaretUpDownFill, PiCaretCircleDownFill } from 'react-icons/pi';
@@ -25,7 +25,7 @@ import { useMantineReactTable, MantineReactTable } from 'mantine-react-table';
 import { JSONPath } from 'jsonpath-plus';
 import { LuClock, LuCircleSlash, LuUnlock, LuLock, LuRefreshCw } from 'react-icons/lu';
 import tinycolor from 'tinycolor2';
-import { useDisclosure, useDidUpdate, mergeRefs, useReducedMotion, useResizeObserver, useElementSize, useClipboard, useMediaQuery, useLocalStorage, useScrollIntoView } from '@mantine/hooks';
+import { useDisclosure, useDidUpdate, mergeRefs, useReducedMotion, useResizeObserver, useElementSize, useClipboard, useMediaQuery, useFullscreen, useLocalStorage, useScrollIntoView } from '@mantine/hooks';
 import { FiDownload, FiMoreVertical } from 'react-icons/fi';
 import { TiArrowUnsorted, TiArrowSortedUp, TiArrowSortedDown } from 'react-icons/ti';
 import { flushSync } from 'react-dom';
@@ -36,15 +36,17 @@ import MiniSearch from 'minisearch';
 import uniq from 'lodash/uniq';
 import sum from 'lodash/sum';
 import remarkGfm from 'remark-gfm';
+import { IconAlertTriangle } from '@tabler/icons-react';
 import { useCookies } from 'react-cookie';
 import FileSaver from 'file-saver';
 import { defaultComposer } from 'default-composer';
-import { BsExclamationTriangle } from 'react-icons/bs';
 import tw from 'tailwind-styled-components';
 import 'universal-cookie';
 import { RiCloseCircleLine } from 'react-icons/ri';
 import { IoMdArrowDropdown, IoMdRefresh, IoMdLogIn } from 'react-icons/io';
 import GraphiQL from 'graphiql';
+import { modals, ModalsProvider } from '@mantine/modals';
+import { BsArrowsFullscreen } from 'react-icons/bs';
 import fs from 'fs';
 import path from 'path';
 import { PersistGate } from 'redux-persist/integration/react';
@@ -52,11 +54,11 @@ import { persistReducer, persistStore } from 'redux-persist';
 import { combineReducers } from 'redux';
 import storage from 'redux-persist/lib/storage';
 import { createSlice } from '@reduxjs/toolkit';
-import { ModalsProvider } from '@mantine/modals';
 import dynamic from 'next/dynamic';
 import { useForm } from '@mantine/form';
 import YAML from 'yaml';
 import { filesize } from 'filesize';
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import plugin from 'tailwindcss/plugin';
 import cookie from 'cookie';
 
@@ -358,6 +360,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] = useState(0);
+    const { data: workspaceStatusData, isError: isWorkspaceStatusError, isSuccess: isWorkspaceStatusSuccess, refetch } = useGetWorkspaceStatusQuery(undefined, {
+        pollingInterval: pollingInterval,
+        refetchOnMountOrArgChange: 1800,
+        refetchOnFocus: true
+    });
+    const [terminateWorkspace] = useTerminateWorkspaceMutation();
+    const requestedStatus = useCoreSelector(selectRequestedWorkspaceStatus);
+    const dispatch = useCoreDispatch();
+    useDeepCompareEffect(()=>{
+        if (requestedStatus === 'Launching') {
+            setPollingInterval(WorkspacePollingInterval[WorkspaceStatus.Launching]);
+            refetch();
+        }
+        if (requestedStatus === 'Terminating') {
+            setPollingInterval(WorkspacePollingInterval[WorkspaceStatus.Terminating]);
+        }
+    }, [
+        requestedStatus
+    ]);
+    useDeepCompareEffect(()=>{
+        if (!workspaceStatusData) return;
+        if (isWorkspaceStatusError) {
+            dispatch(setActiveWorkspaceStatus(WorkspaceStatus.StatusError));
+            setPollingInterval(0); // stop polling
+        }
+        if (workspaceStatusData.status === WorkspaceStatus.Running) {
+            // in some state other than idle
+            if (!workspaceStatusData.idleTimeLimit || workspaceStatusData.idleTimeLimit < 0) {
+                // Do not need to poll
+                dispatch(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[WorkspaceStatus.Terminating]);
+                    dispatch(setActiveWorkspaceStatus(WorkspaceStatus.Terminating));
+                    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.show({
+                        title: 'Workspace Warning',
+                        message: 'Workspace has been idle for too long. Will shutdown soon',
+                        position: 'top-center'
+                    });
+                }
+            }
+            if (requestedStatus === 'Launching') {
+                dispatch(setRequestedWorkspaceStatus('NotSet'));
+            }
+            if (requestedStatus === 'Terminating') {
+                refetch();
+                return;
+            }
+            dispatch(setActiveWorkspaceStatus(workspaceStatusData.status));
+            setPollingInterval(WorkspacePollingInterval[workspaceStatusData.status]);
+            return;
+        }
+        if (workspaceStatusData.status === WorkspaceStatus.NotFound) {
+            if (requestedStatus !== 'Launching') {
+                // need to consider that if in launchState might get a number of NotFound status before Launching
+                setPollingInterval(WorkspacePollingInterval[WorkspaceStatus.NotFound]);
+                dispatch(setActiveWorkspaceStatus(WorkspaceStatus.NotFound));
+            }
+            if (requestedStatus === 'Terminating') dispatch(setRequestedWorkspaceStatus('NotSet'));
+            return;
+        }
+        dispatch(setActiveWorkspaceStatus(workspaceStatusData.status));
+        setPollingInterval(WorkspacePollingInterval[workspaceStatusData.status]);
+    }, [
+        dispatch,
+        workspaceStatusData,
+        isWorkspaceStatusError,
+        requestedStatus
+    ]);
+};
+
 const MinutesToMilliseconds = (minutes)=>minutes * 60 * 1000;
 const logoutSession = async ()=>{
     await fetch(`${GEN3_FENCE_API}/user/logout?next=${GEN3_REDIRECT_URL}/`, {
@@ -432,6 +535,7 @@ const UPDATE_SESSION_LIMIT = MinutesToMilliseconds(5);
  */ const SessionProvider = ({ children, session, updateSessionTime = 5, inactiveTimeLimit = 20, workspaceInactivityTimeLimit = 0, logoutInactiveUsers = true })=>{
     const router = useRouter();
     const coreDispatch = useCoreDispatch();
+    useResourceMonitor();
     const [getUserDetails] = useLazyFetchUserDetailsQuery(); // Fetch user details
     const userStatus = useCoreSelector((state)=>selectUserAuthStatus(state));
     const [mostRecentActivityTimestamp, setMostRecentActivityTimestamp] = useState(Date.now());
@@ -480,14 +584,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(showModal({
                     modal: Modals.SessionExpireModal
                 }));
                 endSession();
                 return;
             }
-            if (workspaceInactivityTimeLimitMilliseconds > 0 && timeSinceLastActivity >= workspaceInactivityTimeLimitMilliseconds && isUserOnPage('workspace')) {
+            if (workspaceInactivityTimeLimitMilliseconds > 0 && timeSinceLastActivity >= workspaceInactivityTimeLimitMilliseconds && isUserOnPage('Workspace')) {
                 coreDispatch(showModal({
                     modal: Modals.SessionExpireModal
                 }));
@@ -658,7 +762,7 @@ const TopBar = ({ items, loginButtonVisibility = LoginButtonVisibility.Hidden, c
                 className: "flex items-center align-middle",
                 children: [
                     processTopBarItems(items, loginButtonVisibility === LoginButtonVisibility.Visible),
-                    loginButtonVisibility != LoginButtonVisibility.Visible ? /*#__PURE__*/ jsx(LoginAccountButton, {}) : null,
+                    loginButtonVisibility != LoginButtonVisibility.Hidden ? /*#__PURE__*/ jsx(LoginAccountButton, {}) : null,
                     loginButtonVisibility != LoginButtonVisibility.Hidden ? /*#__PURE__*/ jsx(LoginButton, {
                         visibility: loginButtonVisibility
                     }) : null
@@ -1196,8 +1300,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);
             });
         });
@@ -1269,8 +1373,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);
             });
         });
@@ -1635,11 +1739,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 (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;
@@ -3015,6 +3119,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];
@@ -5608,6 +5713,51 @@ const useResourcesContext = ()=>{
     });
 };
 
+const CardContainer = ({ children })=>/*#__PURE__*/ jsx("div", {
+        className: "flex justify-center pt-2 items-center",
+        children: /*#__PURE__*/ jsx(Card, {
+            shadow: "sm",
+            p: "md",
+            className: "bg-base-lightest border-2 border-base-lighter",
+            children: /*#__PURE__*/ jsx(Group, {
+                align: "center",
+                wrap: "nowrap",
+                children: children
+            })
+        })
+    });
+
+const MessageText = ({ message, color })=>/*#__PURE__*/ jsx(Text, {
+        c: color,
+        size: "md",
+        fw: 500,
+        children: message
+    });
+const MessageCard = ({ message, icon, size = 'lg', color = 'utility.5' })=>/*#__PURE__*/ jsxs(CardContainer, {
+        children: [
+            /*#__PURE__*/ jsx(ThemeIcon, {
+                color: color,
+                variant: "outline",
+                radius: "xl",
+                size: size,
+                children: icon
+            }),
+            /*#__PURE__*/ jsx(MessageText, {
+                message: message,
+                color: color
+            }),
+            ' '
+        ]
+    });
+
+const ErrorCard = ({ message })=>/*#__PURE__*/ jsx(MessageCard, {
+        message: message,
+        icon: /*#__PURE__*/ jsx(IconAlertTriangle, {
+            size: 24
+        }),
+        color: "utility.3"
+    });
+
 const LoginProviderMultipleItems = ({ provider, handleLoginSelected })=>{
     const [value, setValue] = useState(null);
     return /*#__PURE__*/ jsxs("div", {
@@ -5650,7 +5800,12 @@ const LoginProviderSingleItem = ({ provider, handleLoginSelected })=>{
     }, provider.name);
 };
 const LoginProvidersPanel = ({ handleLoginSelected })=>{
-    const { data, isSuccess } = useGetLoginProvidersQuery();
+    const { data, isSuccess, isError } = useGetLoginProvidersQuery();
+    if (isError) {
+        return /*#__PURE__*/ jsx(ErrorCard, {
+            message: 'request to authentication service failed'
+        });
+    }
     if (!isSuccess) {
         return /*#__PURE__*/ jsx(LoadingOverlay, {
             visible: !isSuccess
@@ -5695,6 +5850,7 @@ const CredentialsLogin = ({ handleLogin })=>{
     const sessionContext = useContext(SessionContext);
     const [credentials, setCredentials] = useState(null);
     const [file, setFile] = useState(null);
+    const [isCredentialsPending, setIsCredentialsPending] = useState(false);
     useEffect(()=>{
         if (file) {
             const reader = new FileReader();
@@ -5707,8 +5863,10 @@ const CredentialsLogin = ({ handleLogin })=>{
         file
     ]);
     const handleCredentialsLogin = 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',
@@ -5724,6 +5882,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,
@@ -5771,6 +5931,7 @@ const CredentialsLogin = ({ handleLogin })=>{
                     }),
                     /*#__PURE__*/ jsx(Button, {
                         color: "blue",
+                        loading: isCredentialsPending,
                         onClick: async ()=>{
                             await handleCredentialsLogin(credentials ?? '');
                         },
@@ -5926,7 +6087,13 @@ const LoginPanel = (loginConfig)=>{
         router
     ]);
     const handleCredentialsLogin = useCallback(async ()=>{
-        await router.push(filterRedirect(referer));
+        const redirect = !referer ? '/' : isArray(referer) ? referer[0] : referer;
+        router.push(redirect).catch((e)=>{
+            showNotification({
+                title: 'Login Error',
+                message: `error logging in ${e.message}`
+            });
+        });
     }, [
         referer,
         router
@@ -6354,44 +6521,6 @@ const Gen3ModalsProvider = ({ config, children })=>{
     });
 };
 
-const ErrorMessage = ({ message })=>/*#__PURE__*/ jsx(Text, {
-        color: "utility.4",
-        size: "md",
-        fw: "md",
-        children: message
-    });
-const CardContainer = ({ children })=>/*#__PURE__*/ jsx("div", {
-        className: "flex justify-center pt-10 items-center",
-        children: /*#__PURE__*/ jsx(Card, {
-            shadow: "sm",
-            p: "lg",
-            className: "bg-base-lightest border-2 border-base-lighter",
-            children: /*#__PURE__*/ jsxs(Group, {
-                align: "center",
-                children: [
-                    /*#__PURE__*/ jsx(ThemeIcon, {
-                        color: "utility.4",
-                        variant: "outline",
-                        radius: "xl",
-                        size: "lg",
-                        children: /*#__PURE__*/ jsx(BsExclamationTriangle, {
-                            size: 24
-                        })
-                    }),
-                    children
-                ]
-            })
-        })
-    });
-const ErrorCard = ({ message })=>/*#__PURE__*/ jsxs(CardContainer, {
-        children: [
-            /*#__PURE__*/ jsx(ErrorMessage, {
-                message: message
-            }),
-            ' '
-        ]
-    });
-
 const getAllFieldsFromFilterConfigs = (filterTabConfigs)=>filterTabConfigs.reduce((acc, cur)=>acc.concat(cur.fields), []);
 const processBucketData = (data)=>{
     if (!data) return {};
@@ -8211,20 +8340,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] = 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__*/ jsx(Tooltip, {
+        label: tooltip,
+        disabled: !tooltip,
+        children: /*#__PURE__*/ jsx(Button, {
+            variant: "outline",
+            onClick: saveToJSONFile,
+            disabled: isDownloading,
+            loading: isDownloading,
+            classNames: {
+                root: 'bg-base-max'
+            },
+            className: "flex items-center gap-2",
+            children: /*#__PURE__*/ jsx(Icon, {
+                icon: icon,
+                height: "1.5rem"
+            })
+        })
+    });
+};
+
+const UploadJSONButton = ({ handleFileChange, tooltip, icon = 'gen3:upload' })=>{
+    const [file, setFile] = useState(null);
+    const [processingFile, setProcessingFile] = useState(false);
+    return /*#__PURE__*/ jsx(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__*/ jsx(Tooltip, {
+                label: tooltip,
+                disabled: !tooltip,
+                children: /*#__PURE__*/ jsx(Button, {
+                    loading: processingFile,
+                    variant: "outline",
+                    classNames: {
+                        root: 'bg-base-max'
+                    },
+                    children: /*#__PURE__*/ jsx(Icon, {
+                        icon: icon,
+                        height: "1.5rem"
+                    })
+                })
+            })
+    });
+};
+
+const CohortSelector = ({ index, filters })=>{
+    const dispatch = useCoreDispatch();
+    const getData = useDeepCompareCallback(()=>{
+        return filters;
+    }, [
+        filters
+    ]);
+    const setCohort = useDeepCompareCallback((data)=>{
+        const jsonForm = JSON.parse(data);
+        dispatch(setCohortFilter({
+            index,
+            filters: jsonForm
+        }));
+    }, [
+        index,
+        dispatch
+    ]);
+    return /*#__PURE__*/ jsxs(Group, {
+        children: [
+            /*#__PURE__*/ jsx(JSONObjectDownloadButton, {
+                getData: getData,
+                filename: "cohort.json",
+                tooltip: "Export Cohort"
+            }),
+            /*#__PURE__*/ jsx(UploadJSONButton, {
+                handleFileChange: setCohort,
+                tooltip: "Import Cohort"
+            })
+        ]
+    });
+};
+
 const QueryExpressionContainer = tw.div`
   flex
   items-center
@@ -8377,9 +8619,13 @@ const QueryExpressionSection = ({ index, filters, currentCohortName, currentCoho
                                     /*#__PURE__*/ jsxs("div", {
                                         className: "display flex gap-2 ml-auto mr-3",
                                         children: [
+                                            /*#__PURE__*/ jsx(CohortSelector, {
+                                                index: index,
+                                                filters: filters
+                                            }),
                                             /*#__PURE__*/ jsx(Tooltip, {
                                                 label: noFilters ? 'No values to expand/collapse' : allQueryExpressionsCollapsed ? 'Expand all values' : 'Collapse all values',
-                                                children: /*#__PURE__*/ jsx("button", {
+                                                children: /*#__PURE__*/ jsx(Button, {
                                                     "data-testid": "button-expand-collapse-cohort-queries",
                                                     color: "white",
                                                     onClick: ()=>allQueryExpressionsCollapsed ? setExpandedState({
@@ -8393,34 +8639,22 @@ const QueryExpressionSection = ({ index, filters, currentCohortName, currentCoho
                                                     "aria-expanded": !allQueryExpressionsCollapsed,
                                                     className: getCombinedClassesExpandCollapseQuery(allQueryExpressionsCollapsed),
                                                     disabled: noFilters,
-                                                    children: allQueryExpressionsCollapsed ? /*#__PURE__*/ jsxs(React__default.Fragment, {
-                                                        children: [
-                                                            /*#__PURE__*/ jsx(MdOutlineArrowBackIos, {
-                                                                size: 16,
-                                                                "aria-hidden": "true"
-                                                            }),
-                                                            /*#__PURE__*/ jsx(MdOutlineArrowForwardIos, {
-                                                                size: 16,
-                                                                "aria-hidden": "true"
-                                                            })
-                                                        ]
-                                                    }) : /*#__PURE__*/ jsxs(React__default.Fragment, {
-                                                        children: [
-                                                            /*#__PURE__*/ jsx(MdOutlineArrowForwardIos, {
-                                                                size: 16,
-                                                                "aria-hidden": "true"
-                                                            }),
-                                                            /*#__PURE__*/ jsx(MdOutlineArrowBackIos, {
-                                                                size: 16,
-                                                                "aria-hidden": "true"
-                                                            })
-                                                        ]
+                                                    children: allQueryExpressionsCollapsed ? /*#__PURE__*/ jsx(Icon, {
+                                                        icon: "gen3:chevron-expand",
+                                                        "aria-hidden": "true",
+                                                        height: "1.5rem",
+                                                        children: ' '
+                                                    }) : /*#__PURE__*/ jsx(Icon, {
+                                                        icon: "gen3:chevron-contract",
+                                                        "aria-hidden": "true",
+                                                        height: "1.5rem",
+                                                        children: ' '
                                                     })
                                                 })
                                             }),
                                             /*#__PURE__*/ jsx(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__*/ jsx("button", {
+                                                children: /*#__PURE__*/ jsx(Button, {
                                                     "data-testid": "button-expand-collapse-cohort-filters-section",
                                                     color: "white",
                                                     onClick: ()=>setFiltersSectionCollapsed(!filtersSectionCollapsed),
@@ -9932,78 +10166,1102 @@ var GqlQueryEditor$2 = /*#__PURE__*/Object.freeze({
   default: GqlQueryEditor$1
 });
 
-const WorkspacesPanel = ()=>{
-    return /*#__PURE__*/ jsx(Center, {
-        className: "m-20 w-full",
-        children: /*#__PURE__*/ jsx(Text, {
-            size: "2rem",
-            children: "Coming soon."
-        })
-    });
-};
-
-class FilesystemContent {
-    constructor({ rootPath }){
-        this.rootPath = rootPath || '';
+const ProtectedContent = ({ children, referer })=>{
+    const router = useRouter();
+    let redirect = referer;
+    if (!referer && typeof window !== 'undefined') {
+        // route not available on SSR
+        redirect = router.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.push({
+            pathname: '/Login',
+            query: {
+                referer: redirect
+            }
+        });
+    };
+    const { status, pending } = useSession(true, onUnauthenticated);
+    if (status !== 'issued') {
+        // not logged in
+        if (pending) return /*#__PURE__*/ jsx("div", {
+            className: "flex justify-center w-full mt-10",
+            children: /*#__PURE__*/ jsx(Loader, {})
+        });
+        else return /*#__PURE__*/ jsx("div", {
+            className: "w-full h-full relative",
+            children: /*#__PURE__*/ jsx(Center, {
+                children: /*#__PURE__*/ jsx(Paper, {
+                    shadow: "md",
+                    p: "md",
+                    children: /*#__PURE__*/ jsx(Text, {
+                        children: "You are not signed in and cannot access this protected content. Please login in."
+                    })
+                })
+            })
+        });
     }
-}
+    return /*#__PURE__*/ jsx(React__default.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__*/ createContext(WorkspaceConfigDefaults);
+const useWorkspaceContext = ()=>{
+    const context = React__default.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__*/ 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/${GEN3_COMMONS_NAME}/navigation.json`);
-    let bannerConfigJSON = [];
-    try {
-        bannerConfigJSON = await ContentSource.get(`config/${GEN3_COMMONS_NAME}/banner.json`);
-    } catch (e) {
-        console.warn('No banner config found at: ', `config/${GEN3_COMMONS_NAME}/banner.json`);
+const getWorkspaceErrorMessage = (error, defaultMessage)=>{
+    if (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/${GEN3_COMMONS_NAME}/footer.json`);
-    return {
-        headerProps,
-        footerProps,
-        headerData: {
-            title: 'Gen3 Frontend Framework Page',
-            content: 'Gen3 Frontend Framework Page',
+    return defaultMessage;
+};
+const WorkspaceStatusContext = /*#__PURE__*/ createContext({
+    isFullscreen: false,
+    startWorkspace: ()=>null,
+    stopWorkspace: ()=>null,
+    toggleFullscreen: ()=>null,
+    workspaceLaunchIsLoading: false,
+    terminateIsLoading: false,
+    isPayModelNeededToLaunch: undefined
+});
+const useWorkspaceStatusContext = ()=>{
+    const context = React__default.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 } = useFullscreen();
+    const [isPayModelNeededToLaunch, setIsPayModelNeededToLaunch] = useState(undefined);
+    const [launchTrigger, { isError: isWorkspaceLaunchError, error: workspaceLaunchError }] = useLaunchWorkspaceMutation();
+    const [terminateWorkspace, { isLoading: terminateIsLoading, isError: isTerminateError, error: workspaceTerminateError }] = useTerminateWorkspaceMutation();
+    const { data: payModels, isLoading: isPayModelLoading, isError: isPayModelError } = useGetWorkspacePayModelsQuery();
+    useDeepCompareEffect(()=>{
+        if (isPayModelError) {
+            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 = useCoreDispatch();
+    const currentWorkspaceStatus = useCoreSelector(selectActiveWorkspaceStatus);
+    // handle errors in launching, getting status, or terminating
+    useDeepCompareEffect(()=>{
+        if (isWorkspaceLaunchError || isTerminateError) {
+            notifications.show({
+                title: 'Workspace Error',
+                message: getWorkspaceErrorMessage(isWorkspaceLaunchError ? workspaceLaunchError : workspaceTerminateError, isWorkspaceLaunchError ? 'Error launching workspace' : 'Error stopping workspace'),
+                position: 'top-center',
+                containerWidth: '50%'
+            });
+            dispatch(setRequestedWorkspaceStatus('NotSet'));
+            dispatch(setActiveWorkspaceStatus(WorkspaceStatus.NotFound));
+        }
+    }, [
+        isWorkspaceLaunchError,
+        isTerminateError
+    ]);
+    const status = useMemo(()=>{
+        const startWorkspace = (id)=>{
+            launchTrigger(id);
+            dispatch(setActiveWorkspace({
+                id: id,
+                status: WorkspaceStatus.Launching,
+                requestedStatus: 'Launching'
+            }));
+        };
+        const toggleFullscreen = ()=>switchScreenMode();
+        const stopWorkspace = ()=>{
+            terminateWorkspace();
+            dispatch(setRequestedWorkspaceStatus('Terminating'));
+            dispatch(setActiveWorkspaceStatus(WorkspaceStatus.Terminating));
+        };
+        return {
+            isFullscreen,
+            startWorkspace,
+            stopWorkspace,
+            toggleFullscreen,
+            workspaceLaunchIsLoading: currentWorkspaceStatus === WorkspaceStatus.Launching,
+            terminateIsLoading,
+            isPayModelNeededToLaunch
+        };
+    }, [
+        dispatch,
+        isFullscreen,
+        launchTrigger,
+        terminateIsLoading,
+        terminateWorkspace
+    ]);
+    return /*#__PURE__*/ 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 } = useCoreSelector(selectWorkspaceStatusFromService);
+    const requestedStatus = useCoreSelector(selectRequestedWorkspaceStatus);
+    const workspaceId = useCoreSelector(selectActiveWorkspaceId);
+    console.log('NotebookCard: ', requestedStatus, workspaceId, status);
+    return /*#__PURE__*/ jsxs(Card, {
+        withBorder: true,
+        radius: "xs",
+        className: "w-64",
+        children: [
+            /*#__PURE__*/ jsx(Card.Section, {
+                inheritPadding: true,
+                py: "xs",
+                children: /*#__PURE__*/ jsxs(Stack, {
+                    align: "center",
+                    children: [
+                        /*#__PURE__*/ jsx(Icon, {
+                            height: '48px',
+                            icon: 'workspace:jupyter'
+                        }),
+                        /*#__PURE__*/ jsx(Text, {
+                            ta: "center",
+                            className: "font-header",
+                            size: "md",
+                            fw: 500,
+                            children: info.name
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(Card.Section, {
+                inheritPadding: true,
+                py: "xs",
+                children: /*#__PURE__*/ jsxs(Group, {
+                    justify: "center",
+                    children: [
+                        /*#__PURE__*/ jsxs(Text, {
+                            c: "base-contrast.4",
+                            className: COMPUTE_PROPS_LABEL_STYLE,
+                            children: [
+                                "CPU Limit: ",
+                                info.cpuLimit
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxs(Text, {
+                            c: "base-contrast.4",
+                            className: COMPUTE_PROPS_LABEL_STYLE,
+                            size: "xs",
+                            children: [
+                                "Memory: ",
+                                info.memoryLimit
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "flex mx-8 justify-center border-1 border-base"
+            }),
+            /*#__PURE__*/ jsxs(Group, {
+                className: "mt-2 p-2",
+                justify: "center",
+                children: [
+                    /*#__PURE__*/ jsx(Button, {
+                        loading: info.id === workspaceId && requestedStatus === 'Launching',
+                        disabled: status !== WorkspaceStatus.NotFound || isPayModelNeededToLaunch,
+                        onClick: ()=>{
+                            startWorkspace(info.id);
+                        },
+                        children: "Launch"
+                    }),
+                    /*#__PURE__*/ jsx(Transition, {
+                        mounted: info.id === workspaceId && requestedStatus === 'Launching' || status === 'Launching',
+                        transition: "fade",
+                        duration: 400,
+                        timingFunction: "ease",
+                        children: ()=>/*#__PURE__*/ jsx(Button, {
+                                onClick: ()=>{
+                                    stopWorkspace();
+                                },
+                                children: "Shutdown"
+                            })
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+const WorkspacePanel = ()=>{
+    const { data, isLoading, isError, isSuccess } = useGetWorkspaceOptionsQuery();
+    const workspaceStatus = useCoreSelector(selectActiveWorkspaceStatus);
+    if (isError) {
+        return /*#__PURE__*/ jsx(ErrorCard, {
+            message: "Error loading workspace definitions"
+        });
+    }
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx(Transition, {
+            mounted: workspaceStatus === WorkspaceStatus.NotFound || workspaceStatus === WorkspaceStatus.Launching,
+            transition: "scale-y",
+            duration: 600,
+            exitDuration: 600,
+            timingFunction: "ease",
+            children: (styles)=>/*#__PURE__*/ jsx("div", {
+                    className: "px-2 mt-4",
+                    style: styles,
+                    children: /*#__PURE__*/ jsx(Grid, {
+                        justify: "center",
+                        align: "stretch",
+                        gutter: "md",
+                        children: data?.map((card)=>{
+                            return /*#__PURE__*/ jsx(Grid.Col, {
+                                span: "content",
+                                style: {
+                                    minHeight: rem(120)
+                                },
+                                children: /*#__PURE__*/ jsx(NotebookCard, {
+                                    info: card
+                                })
+                            }, card.id);
+                        })
+                    })
+                })
+        })
+    });
+};
+
+const WorkspaceNotebook = ()=>{
+    const currentWorkspaceStatus = useCoreSelector(selectActiveWorkspaceStatus);
+    if (currentWorkspaceStatus !== WorkspaceStatus.Running) return null;
+    return /*#__PURE__*/ jsx(React__default.Fragment, {
+        children: /*#__PURE__*/ jsx("div", {
+            className: "flex flex-col w-full  flex-grow content-center items-center",
+            children: /*#__PURE__*/ jsx("iframe", {
+                className: "w-full h-full border-8",
+                title: "Workspace",
+                src: `${GEN3_WORKSPACE_API}/proxy/`
+            })
+        })
+    });
+};
+
+const ExternalLoginsStatus = ()=>{
+    const { data: externalProviders, isLoading, isError, isSuccess } = useGetExternalLoginsQuery();
+    if (isLoading) {
+        return /*#__PURE__*/ jsx("div", {
+            className: "bg-primary h-24 flex justify-center",
+            children: /*#__PURE__*/ jsx(Loader, {})
+        });
+    }
+    if (isError) {
+        return /*#__PURE__*/ 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__*/ jsx("div", {
+                className: "p-2 border border-base-lighter pb-4",
+                children: /*#__PURE__*/ jsxs(Stack, {
+                    children: [
+                        /*#__PURE__*/ jsxs(Text, {
+                            children: [
+                                "To analyze all data to which you have access, please authorize these external data resources in the Profile page:",
+                                ' '
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Group, {
+                            gap: "xs",
+                            children: providersNeedToken.map((provider)=>/*#__PURE__*/ jsx(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.openConfirmModal({
+            title: 'Workspace',
+            children: /*#__PURE__*/ jsx(Text, {
+                size: "sm",
+                children: "Please confirm workspace shutdown"
+            }),
+            labels: {
+                confirm: 'Confirm',
+                cancel: 'Cancel'
+            },
+            onConfirm: ()=>stopWorkspace()
+        });
+    const workspaceStatus = useCoreSelector(selectActiveWorkspaceStatus);
+    const requestedStatus = useCoreSelector(selectRequestedWorkspaceStatus);
+    return /*#__PURE__*/ jsx(Transition, {
+        mounted: isWorkspaceRunningOrStopping(workspaceStatus),
+        transition: "fade",
+        duration: 1200,
+        timingFunction: "ease",
+        children: (styles)=>/*#__PURE__*/ jsx("div", {
+                style: styles,
+                children: /*#__PURE__*/ jsxs(Group, {
+                    children: [
+                        /*#__PURE__*/ jsx(Icon, {
+                            height: '2.0rem',
+                            icon: 'workspace:jupyter'
+                        }),
+                        /*#__PURE__*/ jsx(Tooltip, {
+                            label: "Stop Workspace",
+                            children: /*#__PURE__*/ jsx(Button, {
+                                loading: requestedStatus === 'Terminating',
+                                size: "md",
+                                color: "accent.5",
+                                variant: "default",
+                                onClick: ()=>{
+                                    openModal();
+                                },
+                                "aria-label": "Stop Workspace",
+                                leftSection: /*#__PURE__*/ jsx(FaRegStopCircle, {
+                                    color: "utility.2",
+                                    size: "1rem",
+                                    className: "text-accent-warm"
+                                }),
+                                children: "Stop Workspace"
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Tooltip, {
+                            label: "Toggle fullscreen mode",
+                            children: /*#__PURE__*/ jsx(Button, {
+                                color: "utility.2",
+                                size: "md",
+                                variant: "default",
+                                onClick: ()=>{
+                                    toggleFullscreen();
+                                },
+                                "aria-label": isFullscreen ? 'Exit Fullscreen' : 'Make Fullscreen',
+                                leftSection: /*#__PURE__*/ jsx(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__*/ jsxs(Group, {
+        className: "p-2 border-1 border-l-0 border-r-0 border-base-lighter w-full h-16",
+        justify: "space-between",
+        children: [
+            /*#__PURE__*/ jsx(Text, {
+                className: "pl-4",
+                size: "md",
+                classNames: {
+                    root: 'font-heading'
+                },
+                children: "No pay model defined"
+            }),
+            /*#__PURE__*/ jsx(StatusAndControls, {})
+        ]
+    });
+};
+const PaymentPanel = ()=>{
+    const { data, isLoading, isFetching, isError, error } = useGetWorkspacePayModelsQuery();
+    const [setWorkspacePayModel] = useSetCurrentPayModelMutation();
+    const [selectedPayModel, setSelectedPayModel] = useState(null);
+    const setPayModel = 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 } = 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__*/ jsx(FaUser, {}) : /*#__PURE__*/ jsx(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__*/ jsx("div", {
+            children: /*#__PURE__*/ jsxs(Group, {
+                wrap: "nowrap",
+                children: [
+                    /*#__PURE__*/ jsx(Text, {
+                        size: "sm",
+                        children: menuItem.label
+                    }),
+                    /*#__PURE__*/ jsx(Text, {
+                        size: "sm",
+                        children: menuItem.totalUsage
+                    }),
+                    menuItem.icon
+                ]
+            })
+        });
+    };
+    if (isLoading && isFetching) return /*#__PURE__*/ 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__*/ jsx(Loader, {})
+    });
+    if (isError) {
+        if (isNoPayModelError(error)) {
+            return /*#__PURE__*/ jsx(NoPayModel, {});
+        } else return /*#__PURE__*/ jsx(ErrorCard, {
+            message: "Unable to get Payment information"
+        });
+    }
+    return /*#__PURE__*/ jsx("div", {
+        children: /*#__PURE__*/ jsx(Accordion, {
+            chevronPosition: "left",
+            children: /*#__PURE__*/ jsxs(Accordion.Item, {
+                value: "accountInformation",
+                children: [
+                    /*#__PURE__*/ jsx(Accordion.Control, {
+                        children: /*#__PURE__*/ jsxs(Group, {
+                            justify: "space-between",
+                            children: [
+                                "Account Information",
+                                /*#__PURE__*/ jsxs(Group, {
+                                    className: "font-heading text-base-contrast",
+                                    children: [
+                                        /*#__PURE__*/ jsx(Text, {
+                                            fw: 600,
+                                            children: workspaceName
+                                        }),
+                                        /*#__PURE__*/ jsxs("div", {
+                                            className: "flex items-center",
+                                            children: [
+                                                /*#__PURE__*/ jsx(Text, {
+                                                    fw: 500,
+                                                    size: "sm",
+                                                    className: "mr-1",
+                                                    children: "Total Usage:"
+                                                }),
+                                                /*#__PURE__*/ jsx(Text, {
+                                                    fw: 500,
+                                                    size: "sm",
+                                                    children: PaymentNumberToString(totalUsage)
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsxs("div", {
+                                            className: "flex items-center pr-1",
+                                            children: [
+                                                /*#__PURE__*/ jsx(Text, {
+                                                    fw: 500,
+                                                    size: "sm",
+                                                    className: "mr-1",
+                                                    children: "Hard Limit:"
+                                                }),
+                                                /*#__PURE__*/ jsx(Text, {
+                                                    fw: 500,
+                                                    size: "sm",
+                                                    children: PaymentNumberToString(hardLimit)
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Accordion.Panel, {
+                        children: /*#__PURE__*/ jsxs("div", {
+                            className: "grid grid-cols-3 p-4",
+                            children: [
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "flex flex-col border-1 border-gray p-2 mr-4",
+                                    children: [
+                                        /*#__PURE__*/ jsxs("div", {
+                                            className: "flex justify-between border-b-1 border-gray mb-2 w-full py-2",
+                                            children: [
+                                                /*#__PURE__*/ jsx("div", {
+                                                    className: "ml-2 text-xs",
+                                                    children: "Account"
+                                                }),
+                                                /*#__PURE__*/ jsx("div", {
+                                                    className: "mr-2 text-xs",
+                                                    children: "Workspace Account Manager"
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsx("div", {
+                                            className: "text-center",
+                                            children: /*#__PURE__*/ jsx("div", {
+                                                children: /*#__PURE__*/ jsx(Select, {
+                                                    placeholder: "Select Workspace",
+                                                    renderOption: PayModelSelectItem,
+                                                    data: usersPayModels,
+                                                    onChange: (id)=>{
+                                                        if (id) setPayModel(id);
+                                                    },
+                                                    value: selectedPayModel
+                                                })
+                                            })
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "flex flex-col text-center border-1 border-gray p-2 mr-4",
+                                    children: [
+                                        /*#__PURE__*/ jsx("div", {
+                                            className: "text-md border-b-1 border-gray mb-2 w-full py-2 text-xs",
+                                            children: "Total Charges (USD)"
+                                        }),
+                                        /*#__PURE__*/ jsx(Text, {
+                                            children: PaymentNumberToString(totalUsage)
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "flex flex-col text-center border-1 border-gray p-2",
+                                    children: [
+                                        /*#__PURE__*/ jsx("div", {
+                                            className: "text-md border-b-1 border-gray mb-2 w-full py-2 text-xs",
+                                            children: "Spending Limit (USD)"
+                                        }),
+                                        /*#__PURE__*/ jsx(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 PodStatus.Unknown;
+    return matchingCondition.status;
+};
+const calculateCurrentStep = (conditions)=>{
+    let currentStep = 0;
+    conditions.forEach((condition)=>{
+        const idx = PodConditionIndex[condition.type];
+        if (condition.status === 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(PodConditionType.ProxyConnected, conditions);
+        if (podStatus === 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(PodConditionType.ProxyConnected, conditions);
+        if (podStatus === 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__*/ jsx(Transition, {
+        mounted: step !== undefined,
+        transition: "fade",
+        duration: 1200,
+        exitDuration: 1200,
+        timingFunction: "ease",
+        children: (styles)=>/*#__PURE__*/ jsx("div", {
+                className: "p-2 mt-2 w-3/4 mx-4",
+                style: styles,
+                children: !step ? null : /*#__PURE__*/ jsx(Stepper, {
+                    size: "xs",
+                    active: step?.step,
+                    allowNextStepsSelect: false,
+                    wrap: false,
+                    children: stepsConfig.steps.map((x)=>{
+                        return /*#__PURE__*/ jsx(Stepper.Step, {
+                            label: x.label,
+                            description: x.description,
+                            color: step.status === 'error' ? 'red' : 'accent.4',
+                            children: step.message ? /*#__PURE__*/ jsx(Center, {
+                                children: /*#__PURE__*/ jsx(Text, {
+                                    children: step.message
+                                })
+                            }) : null
+                        }, x.label);
+                    })
+                })
+            })
+    });
+};
+const WorkspaceLaunchProgress = ()=>{
+    const config = useWorkspaceContext();
+    const workspaceStatus = useCoreSelector(selectWorkspaceStatusFromService);
+    const step = calculateLaunchSteps(workspaceStatus);
+    return /*#__PURE__*/ jsx("div", {
+        className: "px-2 py-1 mx-8",
+        children: /*#__PURE__*/ 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__*/ jsxs("div", {
+        className: isFullscreen ? FULLSCREEN_STYLE : 'flex flex-col grow w-full h-full relative',
+        children: [
+            /*#__PURE__*/ jsx(ExternalLoginsStatus, {}),
+            /*#__PURE__*/ jsx(PaymentPanel, {}),
+            /*#__PURE__*/ jsx(WorkspaceLaunchProgress, {}),
+            /*#__PURE__*/ jsx(WorkspacePanel, {}),
+            /*#__PURE__*/ jsx(WorkspaceNotebook, {})
+        ]
+    });
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const Workspace = ({ config })=>{
+    return /*#__PURE__*/ jsx(ProtectedContent, {
+        children: /*#__PURE__*/ jsx(WorkspaceProvider, {
+            config: config,
+            children: /*#__PURE__*/ jsx(WorkspaceStatusProvider, {
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "flex flex-col grow w-full relative",
+                    children: /*#__PURE__*/ jsx(WorkspaceNotebookPanelWithControls, {})
+                })
+            })
+        })
+    });
+};
+
+const TextDescription = ({ description })=>{
+    const [extend, setExtend] = useState(false);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            !extend ? /*#__PURE__*/ jsx(Text, {
+                lineClamp: 4,
+                children: description
+            }) : /*#__PURE__*/ jsx(Text, {
+                children: description
+            }),
+            /*#__PURE__*/ jsx("button", {
+                onClick: ()=>setExtend((extend)=>!extend),
+                children: /*#__PURE__*/ jsxs("div", {
+                    className: "flex text-xs font-semibold text-gray-400",
+                    children: [
+                        !extend ? 'Extend Text' : 'Collapse Text',
+                        ' ',
+                        /*#__PURE__*/ jsx("div", {
+                            className: "my-auto",
+                            children: !extend ? /*#__PURE__*/ jsx(MdKeyboardArrowDown, {}) : /*#__PURE__*/ jsx(MdKeyboardArrowUp, {})
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+
+const AnalysisCenter = ({ tools, showFilterAndSort = false })=>{
+    const [cards, setCards] = 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__*/ jsxs("div", {
+        className: "w-full bg-base-lighter",
+        children: [
+            showFilterAndSort ? /*#__PURE__*/ jsxs("div", {
+                className: "flex justify-between items-center w-7/8 mt-2 mx-2",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex space-x-4",
+                        children: [
+                            /*#__PURE__*/ jsx(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__*/ jsx(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__*/ jsx("div", {
+                        children: /*#__PURE__*/ jsx(TextInput, {
+                            placeholder: "Search in Analysis Center",
+                            value: cards.search,
+                            size: "md",
+                            onChange: (event)=>handleCardsSearch(event.currentTarget.value)
+                        })
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ jsx("div", {
+                children: /*#__PURE__*/ 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__*/ jsx(Stack, {
+                            children: /*#__PURE__*/ jsxs("div", {
+                                className: "rounded-sm bg-base-max",
+                                children: [
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: "p-0 rounded-sm",
+                                        children: /*#__PURE__*/ jsx(Image$1, {
+                                            component: Image,
+                                            src: `/images/apps/${image}`,
+                                            alt: `${title} image`,
+                                            height: 1000,
+                                            width: 1000,
+                                            radius: "md"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: "flex -mt-5 relative z-10",
+                                        children: [
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: "p-0.5 rounded-sm bg-base-lightest ml-5 border-2 border-base",
+                                                children: /*#__PURE__*/ jsx(Image$1, {
+                                                    component: Image,
+                                                    src: `/icons/apps/${icon}`,
+                                                    alt: `${title} logo`,
+                                                    width: 40,
+                                                    height: 40,
+                                                    radius: "lg"
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: "relative mb-0 ml-2",
+                                                children: /*#__PURE__*/ jsx("span", {
+                                                    className: "absolute bottom-0 left-0 text-xs text-gray-700 w-max",
+                                                    children: type === 'application' ? 'Application' : 'Jupyter Notebook'
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: "flex flex-col mt-2 ml-2",
+                                        children: [
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: "text-sm font-black h-6",
+                                                children: title
+                                            }),
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: "text-xs text-gray-400 h-6",
+                                                children: loginRequired ? 'Login Required' : ' '
+                                            }),
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: "text-sm p-2 h-fit",
+                                                children: /*#__PURE__*/ jsx(TextDescription, {
+                                                    description: description
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsx("div", {
+                                                className: "flex mb-4 rounded-b-md",
+                                                children: type === 'application' ? /*#__PURE__*/ jsxs("div", {
+                                                    className: "m-auto",
+                                                    children: [
+                                                        /*#__PURE__*/ jsx(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__*/ jsx("button", {
+                                                            className: "ml-2 p-1.5 rounded-sm text-sm font-semibold",
+                                                            children: "Demo"
+                                                        })
+                                                    ]
+                                                }) : /*#__PURE__*/ 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/${GEN3_COMMONS_NAME}/navigation.json`);
+    let bannerConfigJSON = [];
+    try {
+        bannerConfigJSON = await ContentSource.get(`config/${GEN3_COMMONS_NAME}/banner.json`);
+    } catch (e) {
+        console.warn('No banner config found at: ', `config/${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/${GEN3_COMMONS_NAME}/footer.json`);
+    return {
+        headerProps,
+        footerProps,
+        headerData: {
+            title: 'Gen3 Frontend Framework Page',
+            content: 'Gen3 Frontend Framework Page',
             key: 'gen3-common-page'
         }
     };
@@ -11681,7 +12939,7 @@ const createMantineTheme = (fonts, colors)=>{
  * inactivity limits for session timeouts.
  */ const Gen3Provider = ({ colors, icons, fonts, sessionConfig, modalsConfig, children })=>{
     useEffect(()=>{
-        addCollection(icons);
+        icons.forEach((i)=>addCollection(i));
     }, [
         icons
     ]);
@@ -12486,51 +13744,6 @@ const ColorThemePageGetServerSideProps = async ()=>{
     };
 };
 
-const ProtectedContent = ({ children, referer })=>{
-    const router = useRouter();
-    let redirect = referer;
-    if (!referer && typeof window !== 'undefined') {
-        // route not available on SSR
-        redirect = router.asPath;
-    }
-    const onUnauthenticated = ()=>{
-        if (typeof window !== 'undefined') // route not available on SSR
-        router.push({
-            pathname: '/Login',
-            query: {
-                referer: redirect
-            }
-        });
-    };
-    const { status, pending } = useSession(true, onUnauthenticated);
-    if (status !== 'issued') {
-        // not logged in
-        if (pending) return /*#__PURE__*/ jsx(LoadingOverlay, {
-            visible: pending
-        });
-        else return /*#__PURE__*/ jsxs("div", {
-            className: "w-full h-full relative",
-            children: [
-                /*#__PURE__*/ jsx(LoadingOverlay, {
-                    visible: pending
-                }),
-                /*#__PURE__*/ jsx(Center, {
-                    children: /*#__PURE__*/ jsx(Paper, {
-                        shadow: "md",
-                        p: "md",
-                        children: /*#__PURE__*/ jsx(Text, {
-                            children: "You are not signed in and cannot access this protected content. Please login in."
-                        })
-                    })
-                })
-            ]
-        });
-    }
-    return /*#__PURE__*/ jsx(React__default.Fragment, {
-        children: children
-    });
-};
-
 const SOON_IN_DAYS = 86400 * 5;
 const getStatus = (expiration, now)=>{
     if (expiration < now) return 'Expired';
@@ -15066,67 +16279,182 @@ const SubmissionsTable = ()=>{
                 }),
                 ' '
             ]
-        });
-    }
-    if (isError) {
-        return /*#__PURE__*/ jsx("div", {
-            className: "flex w-full py-24 h-100 relative justify-center",
-            children: /*#__PURE__*/ jsx(Text, {
-                size: 'xl',
-                children: "Error loading project data"
-            })
-        });
-    }
-    return /*#__PURE__*/ jsx("div", {
-        className: "flex w-full bg-base-max p-4 rounded-lg",
-        children: /*#__PURE__*/ jsx("div", {
-            className: "grow w-auto inline-block overflow-x-scroll",
-            children: /*#__PURE__*/ jsx(MantineReactTable, {
-                table: table
-            })
+        });
+    }
+    if (isError) {
+        return /*#__PURE__*/ jsx("div", {
+            className: "flex w-full py-24 h-100 relative justify-center",
+            children: /*#__PURE__*/ jsx(Text, {
+                size: 'xl',
+                children: "Error loading project data"
+            })
+        });
+    }
+    return /*#__PURE__*/ jsx("div", {
+        className: "flex w-full bg-base-max p-4 rounded-lg",
+        children: /*#__PURE__*/ jsx("div", {
+            className: "grow w-auto inline-block overflow-x-scroll",
+            children: /*#__PURE__*/ jsx(MantineReactTable, {
+                table: table
+            })
+        })
+    });
+};
+
+const SubmissionPanel = ({ config })=>{
+    if (!config) {
+        return /*#__PURE__*/ jsx(MessagePanel, {
+            message: "Submission config is not defined. Page disabled"
+        });
+    }
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col items-center p-4 w-full bg-base-lightest",
+        children: [
+            /*#__PURE__*/ jsx(ProjectTable, {
+                columns: config.projectTable.columns
+            }),
+            /*#__PURE__*/ jsx(SubmissionsTable, {})
+        ]
+    });
+};
+
+const SubmissionPage = ({ submissionConfig, headerProps, footerProps })=>{
+    return /*#__PURE__*/ jsx(NavPageLayout, {
+        footerProps: footerProps,
+        headerProps: headerProps,
+        headerData: {
+            title: 'Gen3 Submission Page',
+            content: 'Submission page',
+            key: 'gen3-submission-page'
+        },
+        children: /*#__PURE__*/ jsx(SubmissionPanel, {
+            config: submissionConfig
+        })
+    });
+};
+
+const SubmissionPageGetServerSideProps = async ()=>{
+    try {
+        const submissionConfig = await ContentSource.get(`config/${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__*/ jsx(NavPageLayout, {
+        headerProps,
+        footerProps,
+        headerData: {
+            title: 'Gen3 Workspace Page',
+            content: 'Workspace page',
+            key: 'gen3-workspace-page'
+        },
+        children: /*#__PURE__*/ jsx(Workspace, {
+            config: workspaceProps
+        })
+    });
+};
+
+const WorkspaceNoAccessPage = ({ headerProps, footerProps })=>{
+    const supportEmail = headerProps?.siteProps?.contactEmail || 'support@datacommons.io';
+    return /*#__PURE__*/ jsx(NavPageLayout, {
+        headerProps,
+        footerProps,
+        headerData: {
+            title: 'Gen3 Workspace No Access Page',
+            content: 'Workspace no access page',
+            key: 'gen3-workspace-no-access-page'
+        },
+        children: /*#__PURE__*/ jsxs(CardContainer, {
+            children: [
+                /*#__PURE__*/ jsx("h1", {
+                    children: "Error opening workspace..."
+                }),
+                /*#__PURE__*/ jsxs("p", {
+                    children: [
+                        "Workspace access requires authorization. Please contact",
+                        ' ',
+                        /*#__PURE__*/ jsx("a", {
+                            href: `mailto:${supportEmail}`,
+                            children: supportEmail
+                        }),
+                        " for more information."
+                    ]
+                })
+            ]
         })
     });
 };
 
-const SubmissionPanel = ({ config })=>{
-    if (!config) {
-        return /*#__PURE__*/ jsx(MessagePanel, {
-            message: "Submission config is not defined. Page disabled"
-        });
+const WorkspacePageGetServerSideProps = async (_context)=>{
+    const workspaceProps = await ContentSource.get(`config/${GEN3_COMMONS_NAME}/workspace.json`);
+    try {
+        return {
+            props: {
+                ...await getNavPageLayoutPropsFromConfig(),
+                workspaceProps
+            }
+        };
+    } catch (err) {
+        return {
+            props: {
+                ...await getNavPageLayoutPropsFromConfig(),
+                workspaceProps: {
+                    launchStepIndicatorConfig: {}
+                }
+            }
+        };
     }
-    return /*#__PURE__*/ jsxs("div", {
-        className: "flex flex-col items-center p-4 w-full bg-base-lightest",
-        children: [
-            /*#__PURE__*/ jsx(ProjectTable, {
-                columns: config.projectTable.columns
-            }),
-            /*#__PURE__*/ jsx(SubmissionsTable, {})
-        ]
+};
+const WorkspaceNoAccessPageServerSideProps = async ()=>{
+    return {
+        props: {
+            ...await getNavPageLayoutPropsFromConfig()
+        }
+    };
+};
+
+const AnalysisPanel = ({ tools })=>{
+    return /*#__PURE__*/ jsx(AnalysisCenter, {
+        tools: tools
     });
 };
 
-const SubmissionPage = ({ submissionConfig, headerProps, footerProps })=>{
+const AnalysisPage = ({ headerProps, footerProps, tools })=>{
     return /*#__PURE__*/ 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__*/ jsx(SubmissionPanel, {
-            config: submissionConfig
+        children: /*#__PURE__*/ jsx(AnalysisPanel, {
+            tools: tools
         })
     });
 };
 
-const SubmissionPageGetServerSideProps = async ()=>{
+const AnalysisPageGetServerSideProps = async ()=>{
     try {
-        const submissionConfig = await ContentSource.get(`config/${GEN3_COMMONS_NAME}/submission.json`);
+        const analysisConfig = await ContentSource.get(`config/${GEN3_COMMONS_NAME}/analysisTools.json`);
         return {
             props: {
                 ...await getNavPageLayoutPropsFromConfig(),
-                submissionConfig: submissionConfig
+                ...analysisConfig
             }
         };
     } catch (err) {
@@ -15134,31 +16462,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] = useState({
+        past: [],
+        present: [],
+        future: []
+    });
+    const [editingIndex, setEditingIndex] = useState(null);
+    const [selectedCards, setSelectedCards] = useState([]);
+    const [errors, setErrors] = useState({});
+    const [searchTerm, setSearchTerm] = useState('');
+    const [filters, setFilters] = useState({
+        type: [],
+        loginRequired: null
+    });
+    const [currentCard, setCurrentCard] = useState({
+        title: '',
+        type: '',
+        icon: '',
+        image: '',
+        description: '',
+        loginRequired: false,
+        href: '/'
+    });
+    // Helper function to update history
+    const updateHistory = useCallback((newPresent)=>{
+        setHistory((prev)=>({
+                past: [
+                    ...prev.past,
+                    prev.present
+                ].slice(-MAX_HISTORY),
+                present: newPresent,
+                future: []
+            }));
+    }, []);
+    // Undo/Redo functions
+    const undo = 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 = 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__*/ jsx("div", {
+            className: "flex flex-col items-center w-full max-w-sm",
+            children: /*#__PURE__*/ jsxs("div", {
+                className: "rounded-sm bg-white w-full",
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "p-0 rounded-sm relative h-48 bg-gray-200",
+                        children: card.imageFile?.preview ? /*#__PURE__*/ jsx(Image, {
+                            src: `/images/apps/${card.imageFile.preview}`,
+                            alt: "Preview",
+                            className: "w-full h-full object-cover"
+                        }) : /*#__PURE__*/ jsx("div", {
+                            className: "w-full h-full flex items-center justify-center text-gray-400",
+                            children: "Preview Image"
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex -mt-5 relative z-10",
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                className: "p-0.5 rounded-sm bg-gray-100 ml-5 w-10 h-10",
+                                children: card.iconFile?.preview ? /*#__PURE__*/ jsx(Image, {
+                                    src: `/icons/apps/${card.iconFile.preview}`,
+                                    alt: "Icon",
+                                    className: "w-full h-full object-contain"
+                                }) : /*#__PURE__*/ jsx("div", {
+                                    className: "w-full h-full flex items-center justify-center bg-gray-200"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                className: "relative mb-0 ml-2",
+                                children: /*#__PURE__*/ jsx("span", {
+                                    className: "absolute bottom-0 left-0 text-xs text-gray-400 w-max",
+                                    children: card.type === 'application' ? 'Application' : 'Jupyter Notebook'
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex flex-col mt-2 ml-2",
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                className: "text-sm font-black h-6",
+                                children: card.title
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                className: "text-xs text-gray-400 h-6",
+                                children: card.loginRequired ? 'Login Required' : ' '
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                className: "text-sm p-2 h-fit",
+                                children: /*#__PURE__*/ jsx(TextDescription, {
+                                    description: card.description
+                                })
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                className: "flex mb-4 rounded-b-md h-6",
+                                children: card.type === 'application' ? /*#__PURE__*/ jsxs("div", {
+                                    className: "m-auto",
+                                    children: [
+                                        /*#__PURE__*/ jsx("button", {
+                                            className: "bg-blue-500 mr-2 text-white p-1.5 rounded-sm text-sm font-semibold",
+                                            children: "Run App"
+                                        }),
+                                        /*#__PURE__*/ jsx("button", {
+                                            className: "bg-blue-500 ml-2 text-white p-1.5 rounded-sm text-sm font-semibold",
+                                            children: "Demo"
+                                        })
+                                    ]
+                                }) : /*#__PURE__*/ jsx("button", {
+                                    className: "m-auto bg-blue-500 text-white p-1.5 rounded-sm text-sm font-semibold",
+                                    children: "View Notebook"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    return /*#__PURE__*/ jsx("div", {
+        className: "p-8 max-w-6xl mx-auto",
+        children: /*#__PURE__*/ jsxs(Stack, {
+            gap: "xl",
+            children: [
+                /*#__PURE__*/ jsx(Title, {
+                    order: 2,
+                    children: "Analysis Card Editor"
+                }),
+                /*#__PURE__*/ jsxs(Group, {
+                    children: [
+                        /*#__PURE__*/ jsxs(Tabs, {
+                            defaultValue: "edit",
+                            children: [
+                                /*#__PURE__*/ jsxs(Tabs.List, {
+                                    children: [
+                                        /*#__PURE__*/ jsx(Tabs.Tab, {
+                                            value: "edit",
+                                            children: "Edit"
+                                        }),
+                                        /*#__PURE__*/ jsx(Tabs.Tab, {
+                                            value: "preview",
+                                            children: "Preview"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx(Tabs.Panel, {
+                                    value: "edit",
+                                    pt: "xs",
+                                    children: /*#__PURE__*/ jsx(Card, {
+                                        shadow: "sm",
+                                        p: "lg",
+                                        radius: "md",
+                                        withBorder: true,
+                                        children: /*#__PURE__*/ jsxs(Stack, {
+                                            gap: "md",
+                                            children: [
+                                                /*#__PURE__*/ jsx(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__*/ jsx(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__*/ jsxs(Group, {
+                                                    grow: true,
+                                                    children: [
+                                                        /*#__PURE__*/ jsx(FileInput, {
+                                                            label: "Icon",
+                                                            placeholder: "Upload icon",
+                                                            accept: ALLOWED_IMAGE_TYPES.join(','),
+                                                            onChange: (file)=>handleFileChange(file, 'icon'),
+                                                            error: errors.icon
+                                                        }),
+                                                        /*#__PURE__*/ jsx(FileInput, {
+                                                            label: "Preview Image",
+                                                            placeholder: "Upload preview image",
+                                                            accept: ALLOWED_IMAGE_TYPES.join(','),
+                                                            onChange: (file)=>handleFileChange(file, 'image'),
+                                                            error: errors.image
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ jsx(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__*/ jsx(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__*/ jsx(Switch, {
+                                                    label: "Login Required",
+                                                    checked: currentCard.loginRequired,
+                                                    onChange: (e)=>setCurrentCard((prev)=>({
+                                                                ...prev,
+                                                                loginRequired: e.currentTarget.checked
+                                                            }))
+                                                }),
+                                                /*#__PURE__*/ jsxs(Group, {
+                                                    children: [
+                                                        /*#__PURE__*/ jsx(Button, {
+                                                            onClick: handleSave,
+                                                            color: "blue",
+                                                            children: editingIndex !== null ? 'Update Card' : 'Add Card'
+                                                        }),
+                                                        editingIndex !== null && /*#__PURE__*/ jsx(Button, {
+                                                            onClick: resetForm,
+                                                            color: "gray",
+                                                            children: "Cancel Edit"
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        })
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(Tabs.Panel, {
+                                    value: "preview",
+                                    pt: "xs",
+                                    children: /*#__PURE__*/ jsx(CardPreview, {
+                                        card: currentCard
+                                    })
+                                })
+                            ]
+                        }),
+                        history.present.length > 0 && /*#__PURE__*/ jsx(Card, {
+                            shadow: "sm",
+                            p: "lg",
+                            radius: "md",
+                            withBorder: true,
+                            children: /*#__PURE__*/ jsxs(Stack, {
+                                gap: "md",
+                                children: [
+                                    /*#__PURE__*/ jsxs(Title, {
+                                        order: 3,
+                                        children: [
+                                            "Added Cards (",
+                                            history.present.length,
+                                            ")"
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx(DragDropContext, {
+                                        onDragEnd: handleDragEnd,
+                                        children: /*#__PURE__*/ jsx(Droppable, {
+                                            droppableId: "cards",
+                                            children: (provided)=>/*#__PURE__*/ jsxs("div", {
+                                                    ...provided.droppableProps,
+                                                    ref: provided.innerRef,
+                                                    children: [
+                                                        history.present.map((card, index)=>/*#__PURE__*/ jsx(Draggable, {
+                                                                draggableId: `card-${index}`,
+                                                                index: index,
+                                                                children: (provided)=>/*#__PURE__*/ jsx("div", {
+                                                                        ref: provided.innerRef,
+                                                                        ...provided.draggableProps,
+                                                                        ...provided.dragHandleProps,
+                                                                        className: "mb-2",
+                                                                        children: /*#__PURE__*/ jsx(Card, {
+                                                                            withBorder: true,
+                                                                            children: /*#__PURE__*/ jsxs(Group, {
+                                                                                justify: "space-between",
+                                                                                children: [
+                                                                                    /*#__PURE__*/ jsxs("div", {
+                                                                                        children: [
+                                                                                            /*#__PURE__*/ jsx(Text, {
+                                                                                                fw: 500,
+                                                                                                children: card.title
+                                                                                            }),
+                                                                                            /*#__PURE__*/ jsxs(Text, {
+                                                                                                size: "sm",
+                                                                                                color: "dimmed",
+                                                                                                children: [
+                                                                                                    "Type: ",
+                                                                                                    card.type
+                                                                                                ]
+                                                                                            }),
+                                                                                            /*#__PURE__*/ jsxs(Text, {
+                                                                                                size: "sm",
+                                                                                                color: "dimmed",
+                                                                                                children: [
+                                                                                                    "Login Required:",
+                                                                                                    ' ',
+                                                                                                    card.loginRequired ? 'Yes' : 'No'
+                                                                                                ]
+                                                                                            })
+                                                                                        ]
+                                                                                    }),
+                                                                                    /*#__PURE__*/ jsxs(Group, {
+                                                                                        children: [
+                                                                                            /*#__PURE__*/ jsx(Button, {
+                                                                                                variant: "light",
+                                                                                                size: "xs",
+                                                                                                onClick: ()=>handleEdit(index),
+                                                                                                children: "Edit"
+                                                                                            }),
+                                                                                            /*#__PURE__*/ jsx(Button, {
+                                                                                                variant: "light",
+                                                                                                color: "red",
+                                                                                                size: "xs",
+                                                                                                onClick: ()=>handleDelete([
+                                                                                                        index
+                                                                                                    ]),
+                                                                                                children: "Delete"
+                                                                                            })
+                                                                                        ]
+                                                                                    })
+                                                                                ]
+                                                                            })
+                                                                        })
+                                                                    })
+                                                            }, index)),
+                                                        provided.placeholder
+                                                    ]
+                                                })
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(Group, {
+                    gap: "xs",
+                    children: [
+                        /*#__PURE__*/ jsx(ActionIcon, {
+                            onClick: undo,
+                            disabled: history.past.length === 0,
+                            title: "Undo",
+                            children: /*#__PURE__*/ jsx(FaUndo, {
+                                size: 20
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(ActionIcon, {
+                            onClick: redo,
+                            disabled: history.future.length === 0,
+                            title: "Redo",
+                            children: /*#__PURE__*/ jsx(FaRedo, {
+                                size: 20
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(FileInput, {
+                            accept: ".json",
+                            onChange: handleImport,
+                            style: {
+                                display: 'none'
+                            },
+                            id: "import-file"
+                        }),
+                        /*#__PURE__*/ jsx(Button, {
+                            variant: "light",
+                            leftSection: /*#__PURE__*/ jsx(FaUpload, {
+                                size: 16
+                            }),
+                            onClick: ()=>document.getElementById('import-file')?.click(),
+                            children: "Import"
+                        }),
+                        /*#__PURE__*/ jsx(Button, {
+                            variant: "light",
+                            leftSection: /*#__PURE__*/ jsx(FaDownload, {
+                                size: 16
+                            }),
+                            onClick: handleExport,
+                            children: "Export"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+const AnalysisEditorPage = ({ headerProps, footerProps, analysisFile })=>{
     return /*#__PURE__*/ 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__*/ jsx(WorkspacesPanel, {})
-    });
-};
-
-const WorkspacesPageGetServerSideProps = async (_context)=>{
-    const workspaceProps = await ContentSource.get(`config/${GEN3_COMMONS_NAME}/workspaces.json`);
+        children: /*#__PURE__*/ 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()
         }
     };
 };
@@ -15207,6 +17151,38 @@ const AISearchPageGetServerSideProps = async ()=>{
     }
 };
 
+const NotebookLitePage = ({ headerProps, footerProps })=>{
+    return /*#__PURE__*/ jsx(NavPageLayout, {
+        footerProps,
+        headerProps,
+        headerData: {
+            title: 'Gen3 Notebooks Lite Page',
+            content: 'Notebooks Lite',
+            key: 'gen3-notebooks-lite-page'
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            className: "flex justify-items-center w-full",
+            children: /*#__PURE__*/ 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 = useMemo(()=>{
         return [
@@ -15779,5 +17755,5 @@ async function credentialsLogout(req, res) {
     res.redirect(307, '/');
 }
 
-export { AISearchPageGetServerSideProps, AdminAuthZPageGetServerSideProps, AiSearch, AISearchPage as AiSearchPage, AuthzPage, BaseModal, Charts, CohortBuilder, ColorThemePage, ColorThemePageGetServerSideProps, ContentSource, CreateCredentialsAPIKeyModal, CrosswalkPage, CrosswalkPageGetServerSideProps, Custom404Page, DictionaryPage, DictionaryPageGetServerSideProps, DiscoveryCellRendererFactory, DiscoveryProvider as DiscoveryConfigProvider, DiscoveryIndexPanel, DiscoveryPage, DiscoveryPageGetServerSideProps, DiscoveryRowRendererFactory, EnumFacetChart, ErrorCard, ExplorerPage, ExplorerPageGetServerSideProps, ExplorerTableCellRendererFactory, ExplorerTableDetailsPanelFactory, FirstTimeModal, Footer, Gen3Link, Gen3ModalsProvider, Gen3Provider, GqlQueryEditor$1 as GqlQueryEditor, Header, HoverLink, LandingPage, LandingPageGetStaticProps, LoginButton, LoginPage, LoginPageGetServerSideProps, LoginPanel, LoginProvidersPanel, NavPageLayout, NavigationBar, NavigationButton, NoAccessModal, ProfilePage, ProfilePageGetServerSideProps, ProfileProvider, QueryPage, QueryPageGetServerSideProps, ReactECharts, ResourcesFilters, SPECIAL_CASE_FIELDS, SessionExpiredModal, StudyGroup, SubmissionPage, SubmissionPageGetServerSideProps, TagCloud, TailwindConfig, User, WorkspacesPage, WorkspacesPageGetServerSideProps, WorkspacesPanel, capitalize, computeRowSpan, create10ColorAccessibleContrast, create10ColorPallet, credentialsLogin, credentialsLogout, extractObjectKey, focusStyles, getCurrentUnixTimestamp, getNavPageLayoutPropsFromConfig, getParamsValueAsString, getTagInfo, hasOwnProperty, isArrayOfString, isPropertyKey, isTextTransform$1 as isTextTransform, processLabel$1 as processLabel, processRangeKeyLabel, registerCohortBuilderDefaultPreviewRenderers, registerCohortDiscoveryApp, registerCohortDiversityApp, registerDefaultDiscoveryDataLoaders, registerDiscoveryDefaultCellRenderers, registerDiscoveryDefaultStudyPreviewRenderers, registerExplorerDefaultCellRenderers, removeKey$1 as removeKey, resourcePathFromProjectID, sessionLogout, sessionToken, stripTrailingSlash, toDisplayName, truncateString, unixTimeToString, useDiscoveryContext, userHasMethodForServiceOnResource$1 as userHasMethodForServiceOnResource };
+export { AISearchPageGetServerSideProps, AdminAuthZPageGetServerSideProps, AiSearch, AISearchPage as AiSearchPage, AnalysisCenter, AnalysisEditorPage, AnalysisEditorPageGetServerSideProps, AnalysisPage, AnalysisPageGetServerSideProps, AuthzPage, BaseModal, Charts, CohortBuilder, ColorThemePage, ColorThemePageGetServerSideProps, ContentSource, CreateCredentialsAPIKeyModal, CrosswalkPage, CrosswalkPageGetServerSideProps, Custom404Page, DictionaryPage, DictionaryPageGetServerSideProps, DiscoveryCellRendererFactory, DiscoveryProvider as DiscoveryConfigProvider, DiscoveryIndexPanel, DiscoveryPage, DiscoveryPageGetServerSideProps, DiscoveryRowRendererFactory, EnumFacetChart, ErrorCard, ExplorerPage, ExplorerPageGetServerSideProps, ExplorerTableCellRendererFactory, ExplorerTableDetailsPanelFactory, FirstTimeModal, Footer, Gen3Link, Gen3ModalsProvider, Gen3Provider, GqlQueryEditor$1 as GqlQueryEditor, Header, HoverLink, LandingPage, LandingPageGetStaticProps, LoginButton, LoginPage, LoginPageGetServerSideProps, LoginPanel, LoginProvidersPanel, NavPageLayout, NavigationBar, NavigationButton, NoAccessModal, NotebookLitePage, NotebookLitePageGetStaticProps, ProfilePage, ProfilePageGetServerSideProps, ProfileProvider, QueryPage, QueryPageGetServerSideProps, ReactECharts, ResourcesFilters, SPECIAL_CASE_FIELDS, SessionExpiredModal, StudyGroup, SubmissionPage, SubmissionPageGetServerSideProps, TagCloud, TailwindConfig, User, Workspace, WorkspaceNoAccessPage, WorkspaceNoAccessPageServerSideProps, WorkspacePage, WorkspacePageGetServerSideProps, capitalize, computeRowSpan, create10ColorAccessibleContrast, create10ColorPallet, credentialsLogin, credentialsLogout, extractObjectKey, focusStyles, getCurrentUnixTimestamp, getNavPageLayoutPropsFromConfig, getParamsValueAsString, getTagInfo, hasOwnProperty, isArrayOfString, isPropertyKey, isTextTransform$1 as isTextTransform, processLabel$1 as processLabel, processRangeKeyLabel, registerCohortBuilderDefaultPreviewRenderers, registerCohortDiscoveryApp, registerCohortDiversityApp, registerDefaultDiscoveryDataLoaders, registerDiscoveryDefaultCellRenderers, registerDiscoveryDefaultStudyPreviewRenderers, registerExplorerDefaultCellRenderers, removeKey$1 as removeKey, resourcePathFromProjectID, sessionLogout, sessionToken, stripTrailingSlash, toDisplayName, truncateString, unixTimeToString, useDiscoveryContext, userHasMethodForServiceOnResource$1 as userHasMethodForServiceOnResource };
 //# sourceMappingURL=index.js.map