@gen3/frontend 0.10.73 → 0.10.74

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';
@@ -2891,7 +2891,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 +2940,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 +2969,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
                 ]
             })
@@ -8577,10 +8598,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 +8617,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 +8796,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, {
@@ -10744,94 +10758,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 +11100,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 +11174,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, {})
@@ -19542,7 +19555,7 @@ const CrosswalkTable = ({ mapping, data, isFetching, isError, tableMessage, show
     });
 };
 
-const MIN_ROWS = 18;
+const MIN_ROWS = 22;
 /**
  *
  */ const buildCSVData = (data, mapping, includeSourceId)=>{
@@ -19566,7 +19579,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 +19636,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 +19691,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 +19749,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?.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)=>{