@gen3/frontend 0.10.72 → 0.10.74

package/dist/cjs/index.js

@@ -2911,7 +2911,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',
@@ -2960,7 +2960,15 @@ const processTopBarItems = (items, showLogin)=>{
                     classNames: item.classNames,
                     drawBorder: needsBorder
                 }),
-                ' '
+                ' ',
+                /*#__PURE__*/ jsxRuntime.jsx(core$1.Divider, {
+                    size: "md",
+                    color: "accent.4",
+                    orientation: "vertical",
+                    classNames: {
+                        root: 'my-2'
+                    }
+                })
             ]
         }, `${item.href}_${item.name}`));
         return acc;
@@ -2981,12 +2989,25 @@ const TopBar = ({ items, loginButtonVisibility = LoginButtonVisibility.Hidden, c
                 className: "flex items-center align-middle",
                 children: [
                     processTopBarItems(items, loginButtonVisibility === LoginButtonVisibility.Visible),
-                    loginButtonVisibility != LoginButtonVisibility.Hidden ? /*#__PURE__*/ jsxRuntime.jsx(LoginAccountButton, {
-                        className: extractClassName('login', mergedClassnames)
+                    loginButtonVisibility != LoginButtonVisibility.Hidden ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        className: "flex items-center",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(LoginAccountButton, {
+                                className: extractClassName('login', mergedClassnames)
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Divider, {
+                                size: "md",
+                                color: "accent.4",
+                                orientation: "vertical"
+                            })
+                        ]
                     }) : null,
-                    loginButtonVisibility != LoginButtonVisibility.Hidden ? /*#__PURE__*/ jsxRuntime.jsx(LoginButton, {
-                        visibility: loginButtonVisibility,
-                        className: extractClassName('login', mergedClassnames)
+                    loginButtonVisibility != LoginButtonVisibility.Hidden ? /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        className: "flex items-center",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(LoginButton, {
+                            visibility: loginButtonVisibility,
+                            className: extractClassName('login', mergedClassnames)
+                        })
                     }) : null
                 ]
             })
@@ -8597,10 +8618,11 @@ const UploadJSONButton = ({ handleFileChange, tooltip, icon = 'gen3:upload' })=>
             }
         },
         accept: "application/json",
-        children: ()=>/*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+        children: (props)=>/*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
                 label: tooltip,
                 disabled: !tooltip,
                 children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                    ...props,
                     loading: processingFile,
                     variant: "outline",
                     classNames: {
@@ -8615,21 +8637,16 @@ const UploadJSONButton = ({ handleFileChange, tooltip, icon = 'gen3:upload' })=>
     });
 };
 
-const CohortSelector = ({ index, filters })=>{
+const CohortSelector = ()=>{
     const dispatch = core.useCoreDispatch();
-    const getData = useDeepCompare.useDeepCompareCallback(()=>{
-        return filters;
-    }, [
-        filters
-    ]);
+    const cohortFilters = core.useCoreSelector(core.selectCohortFilters);
+    const getData = ()=>cohortFilters;
     const setCohort = useDeepCompare.useDeepCompareCallback((data)=>{
         const jsonForm = JSON.parse(data);
-        dispatch(core.setCohortFilter({
-            index,
+        dispatch(core.setCohortIndexFilters({
             filters: jsonForm
         }));
     }, [
-        index,
         dispatch
     ]);
     return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
@@ -8799,10 +8816,7 @@ const QueryExpressionSection = ({ index, filters, currentCohortName, currentCoho
                                     /*#__PURE__*/ jsxRuntime.jsxs("div", {
                                         className: "display flex gap-2 ml-auto mr-3",
                                         children: [
-                                            /*#__PURE__*/ jsxRuntime.jsx(CohortSelector, {
-                                                index: index,
-                                                filters: filters
-                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx(CohortSelector, {}),
                                             /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
                                                 label: noFilters ? 'No values to expand/collapse' : allQueryExpressionsCollapsed ? 'Expand all values' : 'Collapse all values',
                                                 children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
@@ -10764,94 +10778,21 @@ const PaymentNumberToString = (x, undefinedValue = 'N/A', precision = 2)=>{
     return x.toFixed(precision);
 };
 
-const StatusAndControls = ()=>{
-    const { stopWorkspace, toggleFullscreen, isFullscreen } = useWorkspaceStatusContext();
-    const openModal = ()=>modals.modals.openConfirmModal({
-            title: 'Workspace',
-            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
-                size: "sm",
-                children: "Please confirm workspace shutdown"
-            }),
-            labels: {
-                confirm: 'Confirm',
-                cancel: 'Cancel'
-            },
-            onConfirm: ()=>stopWorkspace()
-        });
-    const workspaceStatus = core.useCoreSelector(core.selectActiveWorkspaceStatus);
-    const requestedStatus = core.useCoreSelector(core.selectRequestedWorkspaceStatus);
-    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Transition, {
-        mounted: core.isWorkspaceRunningOrStopping(workspaceStatus),
-        transition: "fade",
-        duration: 1200,
-        timingFunction: "ease",
-        children: (styles)=>/*#__PURE__*/ jsxRuntime.jsx("div", {
-                style: styles,
-                children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
-                            height: '2.0rem',
-                            icon: 'workspace:jupyter'
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
-                            label: "Stop Workspace",
-                            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
-                                loading: requestedStatus === 'Terminate',
-                                size: "md",
-                                color: "accent.5",
-                                variant: "default",
-                                onClick: ()=>{
-                                    openModal();
-                                },
-                                "aria-label": "Stop Workspace",
-                                leftSection: /*#__PURE__*/ jsxRuntime.jsx(fa.FaRegStopCircle, {
-                                    color: "utility.2",
-                                    size: "1rem",
-                                    className: "text-accent-warm"
-                                }),
-                                children: "Stop Workspace"
-                            })
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
-                            label: "Toggle fullscreen mode",
-                            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
-                                color: "utility.2",
-                                size: "md",
-                                variant: "default",
-                                onClick: ()=>{
-                                    toggleFullscreen();
-                                },
-                                "aria-label": isFullscreen ? 'Exit Fullscreen' : 'Make Fullscreen',
-                                leftSection: /*#__PURE__*/ jsxRuntime.jsx(bs.BsArrowsFullscreen, {
-                                    className: "text-accent-warm"
-                                }),
-                                children: isFullscreen ? 'Exit Fullscreen' : 'Make Fullscreen'
-                            })
-                        })
-                    ]
-                })
-            })
-    });
-};
-
 const isNoPayModelError = (error)=>{
     return 'status' in error && error.status === 'PARSING_ERROR' && error.originalStatus === 404;
 };
 const NoPayModel = ()=>{
-    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Group, {
         className: "p-2 border-1 border-l-0 border-r-0 border-base-lighter w-full h-16",
         justify: "space-between",
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
-                className: "pl-4",
-                size: "md",
-                classNames: {
-                    root: 'font-heading text-utility-warning'
-                },
-                children: "No pay model defined"
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(StatusAndControls, {})
-        ]
+        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+            className: "pl-4",
+            size: "md",
+            classNames: {
+                root: 'font-heading text-utility-warning'
+            },
+            children: "No pay model defined"
+        })
     });
 };
 const PaymentPanel = ()=>{
@@ -11179,6 +11120,72 @@ const WorkspaceLaunchProgress = ()=>{
     });
 };
 
+const StatusAndControls = ()=>{
+    const { stopWorkspace, toggleFullscreen, isFullscreen } = useWorkspaceStatusContext();
+    const openModal = ()=>modals.modals.openConfirmModal({
+            title: 'Workspace',
+            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                size: "sm",
+                children: "Please confirm workspace shutdown"
+            }),
+            labels: {
+                confirm: 'Confirm',
+                cancel: 'Cancel'
+            },
+            onConfirm: ()=>stopWorkspace()
+        });
+    const workspaceStatus = core.useCoreSelector(core.selectActiveWorkspaceStatus);
+    const requestedStatus = core.useCoreSelector(core.selectRequestedWorkspaceStatus);
+    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Transition, {
+        mounted: core.isWorkspaceRunningOrStopping(workspaceStatus),
+        transition: "fade",
+        duration: 1200,
+        timingFunction: "ease",
+        children: (styles)=>/*#__PURE__*/ jsxRuntime.jsx("div", {
+                style: styles,
+                children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                            label: "Stop Workspace",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                                loading: requestedStatus === core.RequestedWorkspaceStatus.Terminate,
+                                size: "md",
+                                color: "accent.5",
+                                variant: "default",
+                                onClick: ()=>{
+                                    openModal();
+                                },
+                                "aria-label": "Stop Workspace",
+                                leftSection: /*#__PURE__*/ jsxRuntime.jsx(fa.FaRegStopCircle, {
+                                    color: "utility.2",
+                                    size: "1rem",
+                                    className: "text-accent-warm"
+                                }),
+                                children: "Stop Workspace"
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                            label: "Toggle fullscreen mode",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                                color: "utility.2",
+                                size: "md",
+                                variant: "default",
+                                onClick: ()=>{
+                                    toggleFullscreen();
+                                },
+                                "aria-label": isFullscreen ? 'Exit Fullscreen' : 'Make Fullscreen',
+                                leftSection: /*#__PURE__*/ jsxRuntime.jsx(bs.BsArrowsFullscreen, {
+                                    className: "text-accent-warm"
+                                }),
+                                children: isFullscreen ? 'Exit Fullscreen' : 'Make Fullscreen'
+                            })
+                        })
+                    ]
+                })
+            })
+    });
+};
+
 const 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();
@@ -11187,7 +11194,13 @@ const WorkspaceNotebookPanelWithControls = ()=>{
         className: isFullscreen ? FULLSCREEN_STYLE : 'flex flex-col grow w-full h-full relative',
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(ExternalLoginsStatus, {}),
-            requirePayModel && /*#__PURE__*/ jsxRuntime.jsx(PaymentPanel, {}),
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: `flex w-full p-2 ${requirePayModel ? 'justify-between' : 'justify-end'}`,
+                children: [
+                    requirePayModel && /*#__PURE__*/ jsxRuntime.jsx(PaymentPanel, {}),
+                    /*#__PURE__*/ jsxRuntime.jsx(StatusAndControls, {})
+                ]
+            }),
             /*#__PURE__*/ jsxRuntime.jsx(WorkspaceLaunchProgress, {}),
             /*#__PURE__*/ jsxRuntime.jsx(WorkspacePanel, {}),
             /*#__PURE__*/ jsxRuntime.jsx(WorkspaceNotebook, {})
@@ -14309,28 +14322,24 @@ const createMantineTheme = (fonts, colors)=>{
  * Gen3Provider wraps around the entire app and provides general configurations
  * for the whole website like color scheme, icons, fonts, and sessionConfigs like
  * inactivity limits for session timeouts.
- */ const Gen3Provider = ({ colors, icons, fonts, sessionConfig, modalsConfig, children })=>{
+ */ const Gen3Provider = ({ icons, sessionConfig, modalsConfig, children })=>{
     React.useEffect(()=>{
         icons.forEach((i)=>react.addCollection(i));
     }, [
         icons
     ]);
-    const theme = createMantineTheme(fonts, colors);
     return /*#__PURE__*/ jsxRuntime.jsx(core.CoreProvider, {
-        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.MantineProvider, {
-            theme: theme,
-            children: /*#__PURE__*/ jsxRuntime.jsxs(modals.ModalsProvider, {
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx(notifications.Notifications, {}),
-                    /*#__PURE__*/ jsxRuntime.jsx(SessionProvider, {
-                        ...sessionConfig,
-                        children: /*#__PURE__*/ jsxRuntime.jsx(Gen3ModalsProvider, {
-                            config: modalsConfig,
-                            children: children
-                        })
+        children: /*#__PURE__*/ jsxRuntime.jsxs(modals.ModalsProvider, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(notifications.Notifications, {}),
+                /*#__PURE__*/ jsxRuntime.jsx(SessionProvider, {
+                    ...sessionConfig,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(Gen3ModalsProvider, {
+                        config: modalsConfig,
+                        children: children
                     })
-                ]
-            })
+                })
+            ]
         })
     });
 };
@@ -16936,7 +16945,6 @@ const ALLOWED_IMAGE_TYPES = [
     'image/png',
     'image/svg+xml'
 ];
-const MAX_HISTORY = 50;
 const AnalysisCardEditor = ()=>{
     // Enhanced state management with history
     const [history, setHistory] = React.useState({
@@ -16967,7 +16975,7 @@ const AnalysisCardEditor = ()=>{
                 past: [
                     ...prev.past,
                     prev.present
-                ].slice(-MAX_HISTORY),
+                ].slice(-50),
                 present: newPresent,
                 future: []
             }));
@@ -19567,7 +19575,7 @@ const CrosswalkTable = ({ mapping, data, isFetching, isError, tableMessage, show
     });
 };
 
-const MIN_ROWS = 18;
+const MIN_ROWS = 22;
 /**
  *
  */ const buildCSVData = (data, mapping, includeSourceId)=>{
@@ -19591,7 +19599,7 @@ const downloadData = (data)=>{
     link.click();
     document.body.removeChild(link);
 };
-const CrosswalkPanel = ({ mapping, showSubmittedIdInTable })=>{
+const CrosswalkPanel = ({ mapping, showSubmittedIdInTable, idEntryPlaceholderText })=>{
     const [query, setQuery] = React.useState('');
     const [sourceIds, setSourceIds] = React.useState('');
     const clipboard = hooks.useClipboard({
@@ -19648,29 +19656,35 @@ const CrosswalkPanel = ({ mapping, showSubmittedIdInTable })=>{
             /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
                 align: "stretch",
                 justify: "flex-start",
-                className: "p-2 w-1/4",
+                className: "p-2 w-1/4 h-full",
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
                         wrap: "nowrap",
                         children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
-                                size: "md",
-                                color: "secondary.4",
-                                disabled: sourceIds.length == 0,
-                                onClick: ()=>onSubmit(),
-                                children: "Submit"
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                                label: "Submit IDs to crosswalk service",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                                    size: "md",
+                                    color: "secondary.4",
+                                    disabled: sourceIds.length == 0,
+                                    onClick: ()=>onSubmit(),
+                                    children: "Submit"
+                                })
                             }),
-                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
-                                size: "md",
-                                color: "secondary.4",
-                                disabled: sourceIds.length == 0,
-                                onClick: ()=>clear(),
-                                children: "Clear"
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                                label: "Clear all Ids",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                                    size: "md",
+                                    color: "secondary.4",
+                                    disabled: sourceIds.length == 0,
+                                    onClick: ()=>clear(),
+                                    children: "Clear"
+                                })
                             })
                         ]
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx(core$1.Textarea, {
-                        placeholder: "IDs...",
+                        placeholder: idEntryPlaceholderText,
                         radius: "md",
                         size: "md",
                         required: true,
@@ -19697,24 +19711,30 @@ const CrosswalkPanel = ({ mapping, showSubmittedIdInTable })=>{
                     /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
                         justify: "flex-end",
                         children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(core$1.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__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                                label: "Copy mapping to clipboard",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.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__*/ jsxRuntime.jsx(core$1.Button, {
-                                variant: "outline",
-                                size: "md",
-                                onClick: ()=>{
-                                    if (data) downloadData(buildCSVData(data, mapping, showSubmittedIdInTable));
-                                },
-                                disabled: !data || data.length == 0,
-                                children: "Download"
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                                label: "Download mapping",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                                    variant: "outline",
+                                    size: "md",
+                                    onClick: ()=>{
+                                        if (data) downloadData(buildCSVData(data, mapping, showSubmittedIdInTable));
+                                    },
+                                    disabled: !data || data.length == 0,
+                                    children: "Download"
+                                })
                             })
                         ]
                     }),
@@ -19749,26 +19769,38 @@ const CrosswalkPage = ({ headerProps, footerProps, config })=>{
 };
 
 const CrosswalkPageGetServerSideProps = async ()=>{
-    const initialConfig = await ContentSource.get(`config/${core.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/${core.GEN3_COMMONS_NAME}/crosswalk.json`);
+        const regex = /->/g;
+        const processedConfig = {
+            showSubmittedIdInTable: initialConfig.showSubmittedIdInTable,
+            idEntryPlaceholderText: initialConfig?.showSubmittedIdInTable || '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)=>{
@@ -20148,6 +20180,7 @@ exports.convertMinutesToMilliseconds = convertMinutesToMilliseconds;
 exports.convertSecondsToMilliseconds = convertSecondsToMilliseconds;
 exports.create10ColorAccessibleContrast = create10ColorAccessibleContrast;
 exports.create10ColorPallet = create10ColorPallet;
+exports.createMantineTheme = createMantineTheme;
 exports.credentialsLogin = credentialsLogin;
 exports.credentialsLogout = credentialsLogout;
 exports.extractObjectKey = extractObjectKey;