@gen3/frontend 0.10.73 → 0.10.75

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { createContext, useState, useMemo, useEffect, useContext, useCallback, useRef, createElement, forwardRef, useReducer } from 'react';
-import { useUserAuth, useCoreSelector, selectUserDetails, useGetAuthzMappingsQuery, WorkspaceStatus, useGetWorkspaceStatusQuery, useGetWorkspacePayModelsQuery, useTerminateWorkspaceMutation, selectRequestedWorkspaceStatus, selectRequestedWorkspaceStatusTimestamp, useCoreDispatch, setActiveWorkspaceStatus, RequestedWorkspaceStatus, setRequestedWorkspaceStatus, isTimeGreaterThan, useLazyFetchUserDetailsQuery, selectUserAuthStatus, GEN3_REDIRECT_URL, showModal, Modals, GEN3_FENCE_API, isAuthenticated, useGetLoginProvidersQuery, hideModal, useGetCSRFQuery, selectCurrentModal, fieldNameToTitle, useIsUserLoggedIn, useGetMDSQuery, selectAuthzMappingData, useGetAggMDSQuery, useAskQuestionMutation, useGetIndexAggMDSQuery, useGetTagsQuery, updateCohortFilter, selectIndexedFilterByName, isOperationWithField, removeCohortFilter, trimFirstFieldNameToTitle, selectCohortFilters, handleOperation, selectCurrentCohortId, setCohortFilter, clearCohortFilters, selectCurrentCohortName, useGeneralGQLQuery, selectIndexFilters, useGetRawDataAndTotalCountsQuery, Accessibility, downloadFromGuppyToBlob, downloadJSONDataFromGuppy, useGetAggsQuery, extractEnumFilterValue, useGetCountsQuery, selectHeadersWithCSRFToken, GEN3_GUPPY_API, useLaunchWorkspaceMutation, selectActiveWorkspaceStatus, isFetchBaseQueryError, setActiveWorkspace, getCurrentTimestamp, selectWorkspaceStatusFromService, selectActiveWorkspaceId, useGetWorkspaceOptionsQuery, GEN3_WORKSPACE_API, useGetExternalLoginsQuery, isWorkspaceRunningOrStopping, useSetCurrentPayModelMutation, PodStatus, PodConditionType, GEN3_COMMONS_NAME, createAppStore, createGen3AppWithOwnStore, createAppApiForRTKQ, getGen3AppId, useGetDictionaryQuery, useGetMetadataByIdQuery, createGen3App, CoreProvider, useGetCredentialsQuery, useRemoveCredentialMutation, useAddNewCredentialMutation, useGetProjectsDetailsQuery, useGetSubmissionsQuery, isCohortItem, isFileItem, fetchFencePresignedURL, HTTPError, isFilterSet, getNumberOfItemsInDatalist, isAdditionalDataItem, getTimestamp, useDataLibrary, useLazyGetCrosswalkDataQuery } from '@gen3/core';
+import { useUserAuth, useCoreSelector, selectUserDetails, useGetAuthzMappingsQuery, WorkspaceStatus, useGetWorkspaceStatusQuery, useGetWorkspacePayModelsQuery, useTerminateWorkspaceMutation, selectRequestedWorkspaceStatus, selectRequestedWorkspaceStatusTimestamp, useCoreDispatch, setActiveWorkspaceStatus, RequestedWorkspaceStatus, setRequestedWorkspaceStatus, isTimeGreaterThan, useLazyFetchUserDetailsQuery, selectUserAuthStatus, GEN3_REDIRECT_URL, showModal, Modals, GEN3_FENCE_API, isAuthenticated, useGetLoginProvidersQuery, hideModal, useGetCSRFQuery, selectCurrentModal, fieldNameToTitle, useIsUserLoggedIn, useGetMDSQuery, selectAuthzMappingData, useGetAggMDSQuery, useAskQuestionMutation, useGetIndexAggMDSQuery, useGetTagsQuery, updateCohortFilter, selectIndexedFilterByName, isOperationWithField, removeCohortFilter, trimFirstFieldNameToTitle, selectCohortFilters, handleOperation, selectCurrentCohortId, setCohortIndexFilters, clearCohortFilters, selectCurrentCohortName, useGeneralGQLQuery, selectIndexFilters, useGetRawDataAndTotalCountsQuery, Accessibility, downloadFromGuppyToBlob, downloadJSONDataFromGuppy, useGetAggsQuery, extractEnumFilterValue, useGetCountsQuery, selectHeadersWithCSRFToken, GEN3_GUPPY_API, useLaunchWorkspaceMutation, selectActiveWorkspaceStatus, isFetchBaseQueryError, setActiveWorkspace, getCurrentTimestamp, selectWorkspaceStatusFromService, selectActiveWorkspaceId, useGetWorkspaceOptionsQuery, GEN3_WORKSPACE_API, useGetExternalLoginsQuery, useSetCurrentPayModelMutation, PodStatus, PodConditionType, isWorkspaceRunningOrStopping, GEN3_COMMONS_NAME, createAppStore, createGen3AppWithOwnStore, createAppApiForRTKQ, getGen3AppId, useGetDictionaryQuery, useGetMetadataByIdQuery, createGen3App, CoreProvider, useGetCredentialsQuery, useRemoveCredentialMutation, useAddNewCredentialMutation, useGetProjectsDetailsQuery, useGetSubmissionsQuery, isCohortItem, isFileItem, fetchFencePresignedURL, HTTPError, isFilterSet, getNumberOfItemsInDatalist, isAdditionalDataItem, getTimestamp, useDataLibrary, useLazyGetCrosswalkDataQuery } from '@gen3/core';
 import { LoadingOverlay, Card, Group, Avatar, Text, Checkbox, Stack, Tooltip, UnstyledButton, ThemeIcon, Center, Box, Select, Button, Divider, Textarea, FileButton, Anchor, Modal, Grid, Table, ColorSwatch, useMantineTheme, Loader, Paper, Menu, Badge, Alert, Tabs, Accordion, Drawer, CopyButton, factory, useProps, getStyleObject, SegmentedControl, Switch, Autocomplete, TextInput, Title, ActionIcon, NumberInput, RangeSlider, MultiSelect, Transition, rem, Stepper, Image as Image$1, NavLink, Flex, ScrollArea, Highlight, List, createTheme, FileInput, CloseButton } from '@mantine/core';
 import { useDeepCompareEffect, useDeepCompareMemo, useDeepCompareCallback } from 'use-deep-compare';
 import { useRouter } from 'next/router';
@@ -26,7 +26,7 @@ import { init, getInstanceByDom } from 'echarts';
 import { VictoryChart, VictoryTheme, VictoryContainer, VictoryAxis, VictoryStack, VictoryBar, VictoryTooltip, Bar } from 'victory';
 import Image from 'next/image';
 import Link from 'next/link';
-import { FaExternalLinkAlt, FaQuestion, FaExclamation, FaExclamationTriangle, FaUndo, FaPlus, FaRegStopCircle, FaUser, FaExclamationCircle, FaChartPie, FaCircle, FaCheck, FaGraduationCap, FaRegQuestionCircle, FaVideo, FaRedo, FaUpload, FaDownload } from 'react-icons/fa';
+import { FaExternalLinkAlt, FaQuestion, FaExclamation, FaExclamationTriangle, FaUndo, FaPlus, FaUser, FaExclamationCircle, FaRegStopCircle, FaChartPie, FaCircle, FaCheck, FaGraduationCap, FaRegQuestionCircle, FaVideo, FaRedo, FaUpload, FaDownload } from 'react-icons/fa';
 import { AiOutlineLogin } from 'react-icons/ai';
 import { PiDotsThreeCircleThin, PiTrash, PiSparkleFill, PiCaretUpFill, PiCaretDownFill, PiCaretUpDownFill, PiCaretCircleDownFill } from 'react-icons/pi';
 import Head from 'next/head';
@@ -489,6 +489,12 @@ const extractObjectKey = (obj)=>{
     return keys.length > 0 ? keys[0] : undefined;
 };
 
+var NotificationStatus;
+(function(NotificationStatus) {
+    NotificationStatus[NotificationStatus["Info"] = 0] = "Info";
+    NotificationStatus[NotificationStatus["Warn"] = 1] = "Warn";
+    NotificationStatus[NotificationStatus["Error"] = 2] = "Error";
+})(NotificationStatus || (NotificationStatus = {}));
 const notifyUser = (title, message, status = 0)=>{
     const NotificationMap = {
         [0]: 'utility.1',
@@ -833,12 +839,12 @@ const TooltipStyle = {
     arrow: 'bg-base-darker '
 };
 
-var LoginButtonVisibility = /*#__PURE__*/ function(LoginButtonVisibility) {
+var LoginButtonVisibility;
+(function(LoginButtonVisibility) {
     LoginButtonVisibility["Hidden"] = "hide";
     LoginButtonVisibility["Visible"] = "visible";
     LoginButtonVisibility["LogoutOnly"] = "logoutOnly";
-    return LoginButtonVisibility;
-}({});
+})(LoginButtonVisibility || (LoginButtonVisibility = {}));
 
 /**
  * Merges default and user values for Tailwind classnames.
@@ -1168,7 +1174,8 @@ function hashCode(str) {
     return hashString(str);
 }
 
-var ContentType = /*#__PURE__*/ function(ContentType) {
+var ContentType;
+(function(ContentType) {
     ContentType["Text"] = "text";
     ContentType["TextArray"] = "textArray";
     ContentType["Html"] = "html";
@@ -1176,8 +1183,7 @@ var ContentType = /*#__PURE__*/ function(ContentType) {
     ContentType["TextWithEmail"] = "textWithEmail";
     ContentType["TextWithLink"] = "textWithLink";
     ContentType["Link"] = "link";
-    return ContentType;
-}({});
+})(ContentType || (ContentType = {}));
 const TextContent = ({ text, className = 'inline text-base-contrast-min font-medium margin-block-start-1 margin-block-end-1', type = "text", email = undefined, link = undefined, linkText = undefined })=>{
     switch(type){
         case "html":
@@ -2891,7 +2897,7 @@ const LoginAccountButton = ({ className = undefined })=>{
 
 const TopIconButton = ({ name, leftIcon = undefined, rightIcon = undefined, classNames = {}, drawBorder = true })=>{
     const classNamesDefaults = {
-        root: `flex items-center align-middle px-2 ${drawBorder && 'border-r-2 border-accent'} my-2`,
+        root: `flex items-center align-middle px-2 my-2`,
         button: 'flex flex-nowrap items-center align-middle border-b-2 hover:border-accent border-transparent',
         leftIcon: 'text-secondary-contrast-lighter pr-1',
         label: 'font-content text-secondary-contrast-lighter block',
@@ -2940,7 +2946,15 @@ const processTopBarItems = (items, showLogin)=>{
                     classNames: item.classNames,
                     drawBorder: needsBorder
                 }),
-                ' '
+                ' ',
+                /*#__PURE__*/ jsx(Divider, {
+                    size: "md",
+                    color: "accent.4",
+                    orientation: "vertical",
+                    classNames: {
+                        root: 'my-2'
+                    }
+                })
             ]
         }, `${item.href}_${item.name}`));
         return acc;
@@ -2961,12 +2975,25 @@ const TopBar = ({ items, loginButtonVisibility = LoginButtonVisibility.Hidden, c
                 className: "flex items-center align-middle",
                 children: [
                     processTopBarItems(items, loginButtonVisibility === LoginButtonVisibility.Visible),
-                    loginButtonVisibility != LoginButtonVisibility.Hidden ? /*#__PURE__*/ jsx(LoginAccountButton, {
-                        className: extractClassName('login', mergedClassnames)
+                    loginButtonVisibility != LoginButtonVisibility.Hidden ? /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center",
+                        children: [
+                            /*#__PURE__*/ jsx(LoginAccountButton, {
+                                className: extractClassName('login', mergedClassnames)
+                            }),
+                            /*#__PURE__*/ jsx(Divider, {
+                                size: "md",
+                                color: "accent.4",
+                                orientation: "vertical"
+                            })
+                        ]
                     }) : null,
-                    loginButtonVisibility != LoginButtonVisibility.Hidden ? /*#__PURE__*/ jsx(LoginButton, {
-                        visibility: loginButtonVisibility,
-                        className: extractClassName('login', mergedClassnames)
+                    loginButtonVisibility != LoginButtonVisibility.Hidden ? /*#__PURE__*/ jsx("div", {
+                        className: "flex items-center",
+                        children: /*#__PURE__*/ jsx(LoginButton, {
+                            visibility: loginButtonVisibility,
+                            className: extractClassName('login', mergedClassnames)
+                        })
                     }) : null
                 ]
             })
@@ -3658,14 +3685,14 @@ const isSearchKVArray = (obj)=>{
     return obj && Array.isArray(obj) && obj.every(isSearchKV);
 };
 const accessibleFieldName = '__accessible';
-var AccessLevel = /*#__PURE__*/ function(AccessLevel) {
+var AccessLevel;
+(function(AccessLevel) {
     AccessLevel[AccessLevel["ACCESSIBLE"] = 1] = "ACCESSIBLE";
     AccessLevel[AccessLevel["UNACCESSIBLE"] = 2] = "UNACCESSIBLE";
     AccessLevel[AccessLevel["PENDING"] = 3] = "PENDING";
     AccessLevel[AccessLevel["NOT_AVAILABLE"] = 4] = "NOT_AVAILABLE";
     AccessLevel[AccessLevel["OTHER"] = 5] = "OTHER";
-    return AccessLevel;
-}({});
+})(AccessLevel || (AccessLevel = {}));
 
 const DataAccessCellRenderer = ({ value })=>{
     if (value === AccessLevel.PENDING) {
@@ -5031,11 +5058,17 @@ const SearchFilters = ({ values, filter, filterState, setFilterState })=>{
     });
 };
 
-var SearchCombination = /*#__PURE__*/ function(SearchCombination) {
+var SearchCombination;
+(function(SearchCombination) {
     SearchCombination["and"] = "AND";
     SearchCombination["or"] = "OR";
-    return SearchCombination;
-}({});
+})(SearchCombination || (SearchCombination = {}));
+var AccessSortDirection;
+(function(AccessSortDirection) {
+    AccessSortDirection["ASCENDING"] = "sort ascending";
+    AccessSortDirection["DESCENDING"] = "sort descending";
+    AccessSortDirection["NONE"] = "cancel sorting";
+})(AccessSortDirection || (AccessSortDirection = {}));
 
 const AdvancedSearch = ({ advSearchFilters, setAdvancedSearchFilters })=>{
     const [searchCombination, setSearchCombination] = useState(SearchCombination.and);
@@ -8577,10 +8610,11 @@ const UploadJSONButton = ({ handleFileChange, tooltip, icon = 'gen3:upload' })=>
             }
         },
         accept: "application/json",
-        children: ()=>/*#__PURE__*/ jsx(Tooltip, {
+        children: (props)=>/*#__PURE__*/ jsx(Tooltip, {
                 label: tooltip,
                 disabled: !tooltip,
                 children: /*#__PURE__*/ jsx(Button, {
+                    ...props,
                     loading: processingFile,
                     variant: "outline",
                     classNames: {
@@ -8595,21 +8629,16 @@ const UploadJSONButton = ({ handleFileChange, tooltip, icon = 'gen3:upload' })=>
     });
 };
 
-const CohortSelector = ({ index, filters })=>{
+const CohortSelector = ()=>{
     const dispatch = useCoreDispatch();
-    const getData = useDeepCompareCallback(()=>{
-        return filters;
-    }, [
-        filters
-    ]);
+    const cohortFilters = useCoreSelector(selectCohortFilters);
+    const getData = ()=>cohortFilters;
     const setCohort = useDeepCompareCallback((data)=>{
         const jsonForm = JSON.parse(data);
-        dispatch(setCohortFilter({
-            index,
+        dispatch(setCohortIndexFilters({
             filters: jsonForm
         }));
     }, [
-        index,
         dispatch
     ]);
     return /*#__PURE__*/ jsxs(Group, {
@@ -8779,10 +8808,7 @@ 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(CohortSelector, {}),
                                             /*#__PURE__*/ jsx(Tooltip, {
                                                 label: noFilters ? 'No values to expand/collapse' : allQueryExpressionsCollapsed ? 'Expand all values' : 'Collapse all values',
                                                 children: /*#__PURE__*/ jsx(Button, {
@@ -10377,7 +10403,8 @@ const WorkspaceProvider = ({ children, config })=>{
     });
 };
 
-var PayModelStatus = /*#__PURE__*/ function(PayModelStatus) {
+var PayModelStatus;
+(function(PayModelStatus) {
     PayModelStatus["GETTING"] = "GETTING";
     PayModelStatus["INVALID"] = "INVALID";
     PayModelStatus["ERROR"] = "ERROR";
@@ -10385,8 +10412,7 @@ var PayModelStatus = /*#__PURE__*/ function(PayModelStatus) {
     PayModelStatus["OVER_LIMIT"] = "OVER_LIMIT";
     PayModelStatus["NOT_REQUIRED"] = "NOT_REQUIRED";
     PayModelStatus["VALID"] = "VALID";
-    return PayModelStatus;
-}({});
+})(PayModelStatus || (PayModelStatus = {}));
 
 const getWorkspaceErrorMessage = (error, defaultMessage)=>{
     if (isFetchBaseQueryError(error)) {
@@ -10744,94 +10770,21 @@ const PaymentNumberToString = (x, undefinedValue = 'N/A', precision = 2)=>{
     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 === 'Terminate',
-                                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, {
+    return /*#__PURE__*/ jsx(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 text-utility-warning'
-                },
-                children: "No pay model defined"
-            }),
-            /*#__PURE__*/ jsx(StatusAndControls, {})
-        ]
+        children: /*#__PURE__*/ jsx(Text, {
+            className: "pl-4",
+            size: "md",
+            classNames: {
+                root: 'font-heading text-utility-warning'
+            },
+            children: "No pay model defined"
+        })
     });
 };
 const PaymentPanel = ()=>{
@@ -11159,6 +11112,72 @@ const WorkspaceLaunchProgress = ()=>{
     });
 };
 
+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(Tooltip, {
+                            label: "Stop Workspace",
+                            children: /*#__PURE__*/ jsx(Button, {
+                                loading: requestedStatus === RequestedWorkspaceStatus.Terminate,
+                                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 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();
@@ -11167,7 +11186,13 @@ const WorkspaceNotebookPanelWithControls = ()=>{
         className: isFullscreen ? FULLSCREEN_STYLE : 'flex flex-col grow w-full h-full relative',
         children: [
             /*#__PURE__*/ jsx(ExternalLoginsStatus, {}),
-            requirePayModel && /*#__PURE__*/ jsx(PaymentPanel, {}),
+            /*#__PURE__*/ jsxs("div", {
+                className: `flex w-full p-2 ${requirePayModel ? 'justify-between' : 'justify-end'}`,
+                children: [
+                    requirePayModel && /*#__PURE__*/ jsx(PaymentPanel, {}),
+                    /*#__PURE__*/ jsx(StatusAndControls, {})
+                ]
+            }),
             /*#__PURE__*/ jsx(WorkspaceLaunchProgress, {}),
             /*#__PURE__*/ jsx(WorkspacePanel, {}),
             /*#__PURE__*/ jsx(WorkspaceNotebook, {})
@@ -16036,6 +16061,12 @@ const UserDetailsPanel = ({ user, closePanel })=>{
     });
 };
 
+var UserPanelMode;
+(function(UserPanelMode) {
+    UserPanelMode[UserPanelMode["UserTable"] = 0] = "UserTable";
+    UserPanelMode[UserPanelMode["NewUserPanel"] = 1] = "NewUserPanel";
+    UserPanelMode[UserPanelMode["UserDetailPanel"] = 2] = "UserDetailPanel";
+})(UserPanelMode || (UserPanelMode = {}));
 const NullUser = {
     id: '',
     tags: {
@@ -16912,6 +16943,7 @@ const ALLOWED_IMAGE_TYPES = [
     'image/png',
     'image/svg+xml'
 ];
+const MAX_HISTORY = 50;
 const AnalysisCardEditor = ()=>{
     // Enhanced state management with history
     const [history, setHistory] = useState({
@@ -16942,7 +16974,7 @@ const AnalysisCardEditor = ()=>{
                 past: [
                     ...prev.past,
                     prev.present
-                ].slice(-50),
+                ].slice(-MAX_HISTORY),
                 present: newPresent,
                 future: []
             }));
@@ -19542,7 +19574,7 @@ const CrosswalkTable = ({ mapping, data, isFetching, isError, tableMessage, show
     });
 };
 
-const MIN_ROWS = 18;
+const MIN_ROWS = 22;
 /**
  *
  */ const buildCSVData = (data, mapping, includeSourceId)=>{
@@ -19566,7 +19598,7 @@ const downloadData = (data)=>{
     link.click();
     document.body.removeChild(link);
 };
-const CrosswalkPanel = ({ mapping, showSubmittedIdInTable })=>{
+const CrosswalkPanel = ({ mapping, showSubmittedIdInTable, idEntryPlaceholderText })=>{
     const [query, setQuery] = useState('');
     const [sourceIds, setSourceIds] = useState('');
     const clipboard = useClipboard({
@@ -19623,29 +19655,35 @@ const CrosswalkPanel = ({ mapping, showSubmittedIdInTable })=>{
             /*#__PURE__*/ jsxs(Stack, {
                 align: "stretch",
                 justify: "flex-start",
-                className: "p-2 w-1/4",
+                className: "p-2 w-1/4 h-full",
                 children: [
                     /*#__PURE__*/ jsxs(Group, {
                         wrap: "nowrap",
                         children: [
-                            /*#__PURE__*/ jsx(Button, {
-                                size: "md",
-                                color: "secondary.4",
-                                disabled: sourceIds.length == 0,
-                                onClick: ()=>onSubmit(),
-                                children: "Submit"
+                            /*#__PURE__*/ jsx(Tooltip, {
+                                label: "Submit IDs to crosswalk service",
+                                children: /*#__PURE__*/ jsx(Button, {
+                                    size: "md",
+                                    color: "secondary.4",
+                                    disabled: sourceIds.length == 0,
+                                    onClick: ()=>onSubmit(),
+                                    children: "Submit"
+                                })
                             }),
-                            /*#__PURE__*/ jsx(Button, {
-                                size: "md",
-                                color: "secondary.4",
-                                disabled: sourceIds.length == 0,
-                                onClick: ()=>clear(),
-                                children: "Clear"
+                            /*#__PURE__*/ jsx(Tooltip, {
+                                label: "Clear all Ids",
+                                children: /*#__PURE__*/ jsx(Button, {
+                                    size: "md",
+                                    color: "secondary.4",
+                                    disabled: sourceIds.length == 0,
+                                    onClick: ()=>clear(),
+                                    children: "Clear"
+                                })
                             })
                         ]
                     }),
                     /*#__PURE__*/ jsx(Textarea, {
-                        placeholder: "IDs...",
+                        placeholder: idEntryPlaceholderText,
                         radius: "md",
                         size: "md",
                         required: true,
@@ -19672,24 +19710,30 @@ const CrosswalkPanel = ({ mapping, showSubmittedIdInTable })=>{
                     /*#__PURE__*/ jsxs(Group, {
                         justify: "flex-end",
                         children: [
-                            /*#__PURE__*/ jsx(Button, {
-                                variant: "outline",
-                                size: "md",
-                                color: clipboard.copied ? 'accent.4' : 'accent-warm.4',
-                                onClick: ()=>{
-                                    if (data) clipboard.copy(buildCSVData(data, mapping, showSubmittedIdInTable));
-                                },
-                                disabled: !data || data.length == 0,
-                                children: "Copy"
+                            /*#__PURE__*/ jsx(Tooltip, {
+                                label: "Copy mapping to clipboard",
+                                children: /*#__PURE__*/ jsx(Button, {
+                                    variant: "outline",
+                                    size: "md",
+                                    color: clipboard.copied ? 'accent.4' : 'accent-warm.4',
+                                    onClick: ()=>{
+                                        if (data) clipboard.copy(buildCSVData(data, mapping, showSubmittedIdInTable));
+                                    },
+                                    disabled: !data || data.length == 0,
+                                    children: "Copy"
+                                })
                             }),
-                            /*#__PURE__*/ jsx(Button, {
-                                variant: "outline",
-                                size: "md",
-                                onClick: ()=>{
-                                    if (data) downloadData(buildCSVData(data, mapping, showSubmittedIdInTable));
-                                },
-                                disabled: !data || data.length == 0,
-                                children: "Download"
+                            /*#__PURE__*/ jsx(Tooltip, {
+                                label: "Download mapping",
+                                children: /*#__PURE__*/ jsx(Button, {
+                                    variant: "outline",
+                                    size: "md",
+                                    onClick: ()=>{
+                                        if (data) downloadData(buildCSVData(data, mapping, showSubmittedIdInTable));
+                                    },
+                                    disabled: !data || data.length == 0,
+                                    children: "Download"
+                                })
                             })
                         ]
                     }),
@@ -19724,26 +19768,38 @@ const CrosswalkPage = ({ headerProps, footerProps, config })=>{
 };
 
 const CrosswalkPageGetServerSideProps = async ()=>{
-    const initialConfig = await ContentSource.get(`config/${GEN3_COMMONS_NAME}/crosswalk.json`);
-    const regex = /->/g;
-    const processedConfig = {
-        showSubmittedIdInTable: initialConfig.showSubmittedIdInTable,
-        mapping: {
-            source: initialConfig.mapping.source,
-            external: initialConfig.mapping.external.map((entry)=>({
-                    ...entry,
-                    dataPath: entry.dataPath.split(regex).map((x)=>JSON.stringify([
-                            x
-                        ])).join('.')
-                }))
-        }
-    };
-    return {
-        props: {
-            ...await getNavPageLayoutPropsFromConfig(),
-            config: processedConfig
-        }
-    };
+    try {
+        const initialConfig = await ContentSource.get(`config/${GEN3_COMMONS_NAME}/crosswalk.json`);
+        const regex = /->/g;
+        const processedConfig = {
+            showSubmittedIdInTable: initialConfig.showSubmittedIdInTable,
+            idEntryPlaceholderText: initialConfig?.idEntryPlaceholderText || 'Enter IDs, one per line.\nExample:\nD334343\nC343433',
+            mapping: {
+                source: initialConfig.mapping.source,
+                external: initialConfig.mapping.external.map((entry)=>({
+                        ...entry,
+                        dataPath: entry.dataPath.split(regex).map((x)=>JSON.stringify([
+                                x
+                            ])).join('.')
+                    }))
+            }
+        };
+        return {
+            props: {
+                ...await getNavPageLayoutPropsFromConfig(),
+                config: processedConfig
+            }
+        };
+    } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : 'Unknown error in crosswalk config';
+        console.error(errorMessage);
+        return {
+            props: {
+                ...await getNavPageLayoutPropsFromConfig(),
+                config: undefined
+            }
+        };
+    }
 };
 
 const TailwindConfig = (themer)=>{