@gen3/workspaces 0.12.47 → 0.12.49

package/dist/index/cjs/index.js

@@ -12,6 +12,7 @@ var hooks = require('@mantine/hooks');
 var io5 = require('react-icons/io5');
 var bs = require('react-icons/bs');
 var md = require('react-icons/md');
+var lodash = require('lodash');
 
 const WorkspaceTierCard = ({ label, description, tier, features = [], tooltip = 'Launch workspace', buttonLabel = 'Launch', onSelectTier, baseColor })=>{
     const handleClick = React.useCallback(()=>onSelectTier(tier), [
@@ -1850,7 +1851,7 @@ const KernelSelector = ({ handleLaunchKernel, isLaunchingLoading, onKernelSelect
                                 id: "klp-kernel-spec",
                                 value: selectedKernelName,
                                 onChange: (value)=>setSelectedKernelName(value),
-                                disabled: disabled,
+                                disabled: disabled || isError,
                                 data: kernelSpecs?.length === 0 ? [
                                     {
                                         value: 'python3',
@@ -1891,7 +1892,7 @@ const KernelSelector = ({ handleLaunchKernel, isLaunchingLoading, onKernelSelect
                         onClick: ()=>handleLaunchKernel(selectedKernelName || 'python3'),
                         loading: isLaunchingLoading,
                         fullWidth: true,
-                        disabled: disabled,
+                        disabled: disabled || isError,
                         children: isLaunchingLoading ? 'Working...' : 'Launch Kernel'
                     })
                 ]
@@ -2202,7 +2203,7 @@ function HorizontalAccordion({ label, expanded, setExpanded, children, expandedW
     });
 }
 
-const SettingsPanel = ({ showKernels, expanded, setExpanded })=>{
+const SettingsPanel = ({ showKernels, expanded, setExpanded, width = 380 })=>{
     const currentTier = core$1.useCoreSelector(core$1.selectWorkspaceTier);
     const coreDispatch = core$1.useCoreDispatch();
     const onUpgradeToRemote = React.useCallback(()=>{
@@ -2215,7 +2216,7 @@ const SettingsPanel = ({ showKernels, expanded, setExpanded })=>{
         expanded: expanded,
         setExpanded: setExpanded,
         rightSide: true,
-        expandedWidth: 380,
+        expandedWidth: width,
         children: /*#__PURE__*/ jsxRuntime.jsxs(core.Stack, {
             gap: "sm",
             className: PanelStyle,
@@ -2230,7 +2231,7 @@ const SettingsPanel = ({ showKernels, expanded, setExpanded })=>{
     });
 };
 
-const WorkspaceToolbar = ({ toolbarConfiguration })=>{
+const WorkspaceToolbar = /*#__PURE__*/ React.forwardRef(({ toolbarConfiguration }, ref)=>{
     const workspaceTier = core$1.useCoreSelector((state)=>core$1.selectWorkspaceTier(state));
     const workspaceStatus = core$1.useCoreSelector((state)=>core$1.selectJEGActiveWorkspaceStatus(state));
     const isFullscreen = core$1.useCoreSelector((state)=>core$1.selectWorkspaceFullscreen(state));
@@ -2249,6 +2250,7 @@ const WorkspaceToolbar = ({ toolbarConfiguration })=>{
     const fullscreenLabel = isFullscreen ? 'Exit Fullscreen' : 'Fullscreen View';
     const statusLabel = workspaceStatus === core$1.WorkspaceStatus.NotFound ? 'Not Running' : workspaceStatus;
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        ref: ref,
         role: "toolbar",
         "aria-label": "Workspace toolbar",
         className: "flex items-center justify-between px-4 border-b-2 border-base-lighter pb-4",
@@ -2362,42 +2364,8 @@ const WorkspaceToolbar = ({ toolbarConfiguration })=>{
             })
         ]
     });
-};
-
-const WORKSPACE_TIER_INFORMATION = {
-    free: {
-        tier: 'free',
-        toolbar: {
-            label: 'JupyterLite',
-            description: 'Running via JupyterLite',
-            showStop: false,
-            showStatus: false
-        },
-        settings: {
-            showKernels: false
-        },
-        dataAndTools: {
-            enabled: true,
-            tabs: []
-        }
-    },
-    remote: {
-        tier: 'remote',
-        toolbar: {
-            label: 'Remote Compute Environment',
-            description: 'Running with Remote Kernels',
-            showStop: true,
-            showStatus: true
-        },
-        settings: {
-            showKernels: true
-        },
-        dataAndTools: {
-            enabled: true,
-            tabs: []
-        }
-    }
-};
+});
+WorkspaceToolbar.displayName = 'WorkspaceToolbar';
 
 // Streaming LLM client — OpenAI, Anthropic, Gemini, Ollama
 // All requests go directly from the browser to provider APIs (no backend proxy).
@@ -3553,6 +3521,9 @@ const FieldLinkCountBadge = ({ fieldsCount, linksCount })=>{
 };
 
 const CompactDictionaryPanel = ({ schemaUrl = '_dictionary/_all' })=>{
+    const { ref, width } = hooks.useElementSize();
+    const isNarrow = width > 0 && width < 280;
+    const isCompact = width > 0 && width < 360;
     const [nodes, setNodes] = React.useState([]);
     const [search, setSearch] = React.useState('');
     const [expandedId, setExpandedId] = React.useState(null);
@@ -3585,7 +3556,8 @@ const CompactDictionaryPanel = ({ schemaUrl = '_dictionary/_all' })=>{
         });
     }
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-        className: "relative flex flex-col gap-2 bg-base-lightest p-2 ",
+        ref: ref,
+        className: "relative flex flex-col gap-2 bg-base-lightest p-2 h-full",
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(core.LoadingOverlay, {
                 visible: isFetching
@@ -3605,7 +3577,7 @@ const CompactDictionaryPanel = ({ schemaUrl = '_dictionary/_all' })=>{
                 ]
             }),
             /*#__PURE__*/ jsxRuntime.jsx("div", {
-                className: "flex flex-col gap-0.5",
+                className: "flex h-full flex-1 flex-col gap-0.5 overflow-y-auto",
                 children: filtered.map((node)=>{
                     const isExpanded = expandedId === node.id;
                     const propCount = Object.keys(node.properties).length;
@@ -3616,27 +3588,39 @@ const CompactDictionaryPanel = ({ schemaUrl = '_dictionary/_all' })=>{
                             /*#__PURE__*/ jsxRuntime.jsxs("button", {
                                 type: "button",
                                 onClick: ()=>setExpandedId(isExpanded ? null : node.id),
-                                className: "flex w-full items-center gap-2 px-2.5 py-2 text-left hover:bg-base-lightest hover:bg-opacity-50",
+                                className: "flex w-full flex-col px-2.5 py-2 text-left hover:bg-base-lightest hover:bg-opacity-50",
                                 "aria-label": `Expand description for ${node.title}`,
                                 "aria-expanded": isExpanded,
                                 children: [
-                                    isExpanded ? /*#__PURE__*/ jsxRuntime.jsx(md.MdKeyboardArrowDown, {}) : /*#__PURE__*/ jsxRuntime.jsx(md.MdKeyboardArrowRight, {}),
                                     /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                                        className: "min-w-0 flex-1",
+                                        className: "flex w-full items-center gap-2",
                                         children: [
-                                            /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                                className: "truncate text-xs font-semibold text-base-darkest",
-                                                children: node.title
+                                            isExpanded ? /*#__PURE__*/ jsxRuntime.jsx(md.MdKeyboardArrowDown, {}) : /*#__PURE__*/ jsxRuntime.jsx(md.MdKeyboardArrowRight, {}),
+                                            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                                className: "min-w-0 flex-1",
+                                                children: [
+                                                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                                        className: "truncate text-xs font-semibold text-base-darkest",
+                                                        children: node.title
+                                                    }),
+                                                    !isNarrow && node.category && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                                        className: "truncate text-sm text-base-darker",
+                                                        children: node.category
+                                                    })
+                                                ]
                                             }),
-                                            node.category && /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                                className: "truncate text-sm text-base-darker",
-                                                children: node.category
+                                            !isNarrow && /*#__PURE__*/ jsxRuntime.jsx(FieldLinkCountBadge, {
+                                                fieldsCount: propCount,
+                                                linksCount: linkCount
                                             })
                                         ]
                                     }),
-                                    /*#__PURE__*/ jsxRuntime.jsx(FieldLinkCountBadge, {
-                                        fieldsCount: propCount,
-                                        linksCount: linkCount
+                                    isNarrow && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                        className: "flex w-full items-center justify-between pl-5 pt-0.5",
+                                        children: node.category && /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                            className: "truncate text-xs text-base-darker",
+                                            children: node.category
+                                        })
                                     })
                                 ]
                             }),
@@ -3658,7 +3642,7 @@ const CompactDictionaryPanel = ({ schemaUrl = '_dictionary/_all' })=>{
                                                         /*#__PURE__*/ jsxRuntime.jsx(core.Table.Th, {
                                                             children: "Type"
                                                         }),
-                                                        /*#__PURE__*/ jsxRuntime.jsx(core.Table.Th, {})
+                                                        !isCompact && /*#__PURE__*/ jsxRuntime.jsx(core.Table.Th, {})
                                                     ]
                                                 })
                                             }),
@@ -3679,8 +3663,9 @@ const CompactDictionaryPanel = ({ schemaUrl = '_dictionary/_all' })=>{
                                                                     children: info.type
                                                                 })
                                                             }),
-                                                            /*#__PURE__*/ jsxRuntime.jsx(core.Table.Td, {
+                                                            !isCompact && /*#__PURE__*/ jsxRuntime.jsx(core.Table.Td, {
                                                                 children: info.enum && /*#__PURE__*/ jsxRuntime.jsx(core.Scroller, {
+                                                                    draggable: true,
                                                                     children: /*#__PURE__*/ jsxRuntime.jsx(core.Group, {
                                                                         gap: "xs",
                                                                         wrap: "nowrap",
@@ -3692,6 +3677,7 @@ const CompactDictionaryPanel = ({ schemaUrl = '_dictionary/_all' })=>{
                                                                                     label: value,
                                                                                     className: "font-bold text-secondary-contrast",
                                                                                     color: "accent-light",
+                                                                                    noTruncate: true,
                                                                                     children: value
                                                                                 })
                                                                             }, value))
@@ -3765,12 +3751,12 @@ const TABS = [
 ];
 const DataToolsPanel = ({ schemaUrl = DEFAULT_DICTIONARY_SCHEMA_URL, kbUrl })=>{
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        className: "flex shrink-0",
+        className: "flex flex-col h-full",
         children: /*#__PURE__*/ jsxRuntime.jsxs(core.Tabs, {
             defaultValue: "dictionary",
             variant: "outline",
             classNames: {
-                root: 'p-2'
+                root: 'flex flex-col p-2'
             },
             keepMounted: true,
             children: [
@@ -3783,7 +3769,7 @@ const DataToolsPanel = ({ schemaUrl = DEFAULT_DICTIONARY_SCHEMA_URL, kbUrl })=>{
                         }, tab.id))
                 }),
                 /*#__PURE__*/ jsxRuntime.jsx("div", {
-                    className: "min-h-0 flex-1 overflow-hidden pt-4",
+                    className: "flex-1 min-h-0 h-full pt-4",
                     children: /*#__PURE__*/ jsxRuntime.jsxs(frontend.PanelErrorBoundary, {
                         children: [
                             /*#__PURE__*/ jsxRuntime.jsx(core.Tabs.Panel, {
@@ -3807,40 +3793,60 @@ const DataToolsPanel = ({ schemaUrl = DEFAULT_DICTIONARY_SCHEMA_URL, kbUrl })=>{
     });
 };
 
-const ToolsPanel = ({ expanded = true, setExpanded = ()=>{} })=>{
+const ToolsPanel = ({ expanded = true, setExpanded = ()=>{}, width = 310 })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(HorizontalAccordion, {
         label: "Data & Tools",
         expanded: expanded,
         setExpanded: setExpanded,
-        expandedWidth: 310,
+        expandedWidth: width,
         children: /*#__PURE__*/ jsxRuntime.jsx(DataToolsPanel, {})
     });
 };
 
-const WorkspaceLayout = ({ children })=>{
+const WorkspaceLayout = ({ children, tierConfiguration })=>{
     const workspaceTier = core$1.useCoreSelector((state)=>core$1.selectWorkspaceTier(state));
     const [toolsExpanded, { set: setToolsExpanded }] = hooks.useDisclosure(true);
     const [settingsExpanded, { set: setSettingsExpanded }] = hooks.useDisclosure(true);
+    const [toolbarRef, toolbarRect] = hooks.useResizeObserver();
     const isFullScreen = core$1.useCoreSelector((state)=>core$1.selectWorkspaceFullscreen(state));
+    React.useEffect(()=>{
+        if (isFullScreen) {
+            setToolsExpanded(false);
+            setSettingsExpanded(false);
+        } else {
+            setToolsExpanded(true);
+            setSettingsExpanded(true);
+        }
+    }, [
+        isFullScreen,
+        setSettingsExpanded,
+        setToolsExpanded
+    ]);
     if (!workspaceTier) return null;
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
         className: "flex flex-col w-full grow",
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(WorkspaceToolbar, {
-                toolbarConfiguration: WORKSPACE_TIER_INFORMATION[workspaceTier].toolbar
+                toolbarConfiguration: tierConfiguration.toolbar,
+                ref: toolbarRef
             }),
             /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                className: "flex w-full grow",
+                className: "flex w-full nowrap",
+                style: {
+                    height: `calc(100% - ${toolbarRect?.height ?? 0}px`
+                },
                 children: [
-                    WORKSPACE_TIER_INFORMATION[workspaceTier].dataAndTools.enabled && /*#__PURE__*/ jsxRuntime.jsx(ToolsPanel, {
-                        expanded: toolsExpanded && !isFullScreen,
-                        setExpanded: setToolsExpanded
+                    tierConfiguration.dataAndTools.enabled && /*#__PURE__*/ jsxRuntime.jsx(ToolsPanel, {
+                        expanded: toolsExpanded,
+                        setExpanded: setToolsExpanded,
+                        width: tierConfiguration.dataAndTools.width
                     }),
                     children,
                     /*#__PURE__*/ jsxRuntime.jsx(SettingsPanel, {
-                        showKernels: WORKSPACE_TIER_INFORMATION[workspaceTier].settings.showKernels,
-                        expanded: settingsExpanded && !isFullScreen,
-                        setExpanded: setSettingsExpanded
+                        showKernels: tierConfiguration.settings.showKernels,
+                        expanded: settingsExpanded,
+                        setExpanded: setSettingsExpanded,
+                        width: tierConfiguration.settings.width
                     })
                 ]
             })
@@ -3894,6 +3900,7 @@ const WorkspaceCenter = ({ workspaces, landingPage, tierConfiguration })=>{
     }
     if (workspaceTier === 'free') {
         return /*#__PURE__*/ jsxRuntime.jsx(WorkspaceLayout, {
+            tierConfiguration: tierConfiguration.free,
             children: /*#__PURE__*/ jsxRuntime.jsx(FreeWorkspace, {})
         });
     }
@@ -3902,6 +3909,7 @@ const WorkspaceCenter = ({ workspaces, landingPage, tierConfiguration })=>{
             children: /*#__PURE__*/ jsxRuntime.jsx(MicroContainerReduxProvider, {
                 enabled: true,
                 children: /*#__PURE__*/ jsxRuntime.jsx(WorkspaceLayout, {
+                    tierConfiguration: tierConfiguration.remote,
                     children: /*#__PURE__*/ jsxRuntime.jsx(RemoteComputeWorkspace, {
                         tenantId: authContext?.tenantId || 'default',
                         workspaceId: authContext?.workspaceId || 'workspace-default',
@@ -3945,22 +3953,60 @@ const DEFAULT_WORKSPACES_CONFIGURATION = {
     workspaces: {},
     tierConfiguration: {
         free: {
-            baseUrl: process.env.FREE_WORKSPACE_ASSETS_BASE_URL ?? '/api/workspace-assets/free'
+            baseUrl: process.env.FREE_WORKSPACE_ASSETS_BASE_URL ?? '/api/workspace-assets/free',
+            toolbar: {
+                label: 'JupyterLite',
+                description: 'Running via JupyterLite',
+                showStop: false,
+                showStatus: false
+            },
+            settings: {
+                showKernels: false
+            },
+            dataAndTools: {
+                enabled: true,
+                tabs: [
+                    {
+                        label: 'Dictionary',
+                        description: 'Data Dictionary',
+                        app: 'dictionary'
+                    }
+                ],
+                width: 300
+            }
         },
         remote: {
-            baseUrl: process.env.REMOTE_COMPUTE_WORKSPACE_ASSETS_BASE_URL ?? '/api/workspace-assets/remote'
+            baseUrl: process.env.REMOTE_COMPUTE_WORKSPACE_ASSETS_BASE_URL ?? '/api/workspace-assets/remote',
+            toolbar: {
+                label: 'Remote Compute Environment',
+                description: 'Running with Remote Kernels',
+                showStop: true,
+                showStatus: true
+            },
+            settings: {
+                showKernels: true
+            },
+            dataAndTools: {
+                enabled: true,
+                tabs: [
+                    {
+                        label: 'Dictionary',
+                        description: 'Data Dictionary',
+                        app: 'dictionary'
+                    }
+                ]
+            }
         }
     }
 };
 const WorkspacesCenterPageGetServerSideProps = async ()=>{
     try {
         const workspacesCenterConfiguration = await frontend.ContentSource.getContentDatabase().get(`${core$1.GEN3_COMMONS_NAME}/workspaces.json`);
+        const mergedConfiguration = lodash.merge({}, DEFAULT_WORKSPACES_CONFIGURATION, workspacesCenterConfiguration);
         return {
             props: {
                 ...await frontend.getNavPageLayoutPropsFromConfig(),
-                configuration: {
-                    ...workspacesCenterConfiguration
-                }
+                configuration: mergedConfiguration
             }
         };
     } catch (error) {