@gen3/workspaces 0.12.47 → 0.12.49

package/dist/index/esm/index.js

@@ -1,15 +1,16 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useCallback, useMemo, useState, useRef, useEffect, createContext, useImperativeHandle } from 'react';
+import React, { useCallback, useMemo, useState, useRef, useEffect, createContext, useImperativeHandle, forwardRef } from 'react';
 import { mergeDefaultTailwindClassnames, ACTIVITY_CHANNEL, convertSecondsToMilliseconds, InfoRolloverButton, OverflowTooltippedLabel, PanelErrorBoundary, ProtectedContent, NavPageLayout, ContentSource, getNavPageLayoutPropsFromConfig } from '@gen3/frontend';
 import { Card, Stack, Badge, Text, List, Group, Tooltip, Button, LoadingOverlay, Alert, Loader, Divider, Select, ActionIcon, TextInput, Textarea, Table, Scroller, Tabs, Center } from '@mantine/core';
 import { Icon } from '@iconify-icon/react';
 import { GEN3_API, GEN3_WORKSPACE_API, gen3Api, useCoreSelector, selectJEGActiveWorkspaceStatus, useCoreDispatch, setJEGActiveWorkspaceStatus, WorkspaceStatus, setJEGRequestedWorkspaceStatus, RequestedWorkspaceStatus, setJEGActiveWorkspaceId, isFetchBaseQueryError, selectJEGRequestedWorkspaceStatus, selectJEGRequestedWorkspaceStatusTimestamp, isTimeGreaterThan, formatUptimeInMinutes, selectJEGKernelIds, removeManyJEGActiveKernels, upsertManyJEGActiveKernels, normalizeRtkError, selectAllJEGKernels, addJEGActiveKernel, selectWorkspaceTier, setWorkspaceTier, selectWorkspaceFullscreen, setWorkspaceFullscreen, useGetDictionaryFromUrlQuery, useUserAuth, GEN3_COMMONS_NAME } from '@gen3/core';
 import { useDeepCompareEffect } from 'use-deep-compare';
 import { notifications } from '@mantine/notifications';
-import { useDisclosure } from '@mantine/hooks';
+import { useElementSize, useDisclosure, useResizeObserver } from '@mantine/hooks';
 import { IoSettingsSharp } from 'react-icons/io5';
 import { BsFillInfoCircleFill } from 'react-icons/bs';
 import { MdKeyboardArrowDown, MdKeyboardArrowRight } from 'react-icons/md';
+import { merge } from 'lodash';
 
 const WorkspaceTierCard = ({ label, description, tier, features = [], tooltip = 'Launch workspace', buttonLabel = 'Launch', onSelectTier, baseColor })=>{
     const handleClick = useCallback(()=>onSelectTier(tier), [
@@ -1848,7 +1849,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',
@@ -1889,7 +1890,7 @@ const KernelSelector = ({ handleLaunchKernel, isLaunchingLoading, onKernelSelect
                         onClick: ()=>handleLaunchKernel(selectedKernelName || 'python3'),
                         loading: isLaunchingLoading,
                         fullWidth: true,
-                        disabled: disabled,
+                        disabled: disabled || isError,
                         children: isLaunchingLoading ? 'Working...' : 'Launch Kernel'
                     })
                 ]
@@ -2200,7 +2201,7 @@ function HorizontalAccordion({ label, expanded, setExpanded, children, expandedW
     });
 }
 
-const SettingsPanel = ({ showKernels, expanded, setExpanded })=>{
+const SettingsPanel = ({ showKernels, expanded, setExpanded, width = 380 })=>{
     const currentTier = useCoreSelector(selectWorkspaceTier);
     const coreDispatch = useCoreDispatch();
     const onUpgradeToRemote = useCallback(()=>{
@@ -2213,7 +2214,7 @@ const SettingsPanel = ({ showKernels, expanded, setExpanded })=>{
         expanded: expanded,
         setExpanded: setExpanded,
         rightSide: true,
-        expandedWidth: 380,
+        expandedWidth: width,
         children: /*#__PURE__*/ jsxs(Stack, {
             gap: "sm",
             className: PanelStyle,
@@ -2228,7 +2229,7 @@ const SettingsPanel = ({ showKernels, expanded, setExpanded })=>{
     });
 };
 
-const WorkspaceToolbar = ({ toolbarConfiguration })=>{
+const WorkspaceToolbar = /*#__PURE__*/ forwardRef(({ toolbarConfiguration }, ref)=>{
     const workspaceTier = useCoreSelector((state)=>selectWorkspaceTier(state));
     const workspaceStatus = useCoreSelector((state)=>selectJEGActiveWorkspaceStatus(state));
     const isFullscreen = useCoreSelector((state)=>selectWorkspaceFullscreen(state));
@@ -2247,6 +2248,7 @@ const WorkspaceToolbar = ({ toolbarConfiguration })=>{
     const fullscreenLabel = isFullscreen ? 'Exit Fullscreen' : 'Fullscreen View';
     const statusLabel = workspaceStatus === WorkspaceStatus.NotFound ? 'Not Running' : workspaceStatus;
     return /*#__PURE__*/ 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",
@@ -2360,42 +2362,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).
@@ -3551,6 +3519,9 @@ const FieldLinkCountBadge = ({ fieldsCount, linksCount })=>{
 };
 
 const CompactDictionaryPanel = ({ schemaUrl = '_dictionary/_all' })=>{
+    const { ref, width } = useElementSize();
+    const isNarrow = width > 0 && width < 280;
+    const isCompact = width > 0 && width < 360;
     const [nodes, setNodes] = useState([]);
     const [search, setSearch] = useState('');
     const [expandedId, setExpandedId] = useState(null);
@@ -3583,7 +3554,8 @@ const CompactDictionaryPanel = ({ schemaUrl = '_dictionary/_all' })=>{
         });
     }
     return /*#__PURE__*/ 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__*/ jsx(LoadingOverlay, {
                 visible: isFetching
@@ -3603,7 +3575,7 @@ const CompactDictionaryPanel = ({ schemaUrl = '_dictionary/_all' })=>{
                 ]
             }),
             /*#__PURE__*/ 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;
@@ -3614,27 +3586,39 @@ const CompactDictionaryPanel = ({ schemaUrl = '_dictionary/_all' })=>{
                             /*#__PURE__*/ 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__*/ jsx(MdKeyboardArrowDown, {}) : /*#__PURE__*/ jsx(MdKeyboardArrowRight, {}),
                                     /*#__PURE__*/ jsxs("div", {
-                                        className: "min-w-0 flex-1",
+                                        className: "flex w-full items-center gap-2",
                                         children: [
-                                            /*#__PURE__*/ jsx("div", {
-                                                className: "truncate text-xs font-semibold text-base-darkest",
-                                                children: node.title
+                                            isExpanded ? /*#__PURE__*/ jsx(MdKeyboardArrowDown, {}) : /*#__PURE__*/ jsx(MdKeyboardArrowRight, {}),
+                                            /*#__PURE__*/ jsxs("div", {
+                                                className: "min-w-0 flex-1",
+                                                children: [
+                                                    /*#__PURE__*/ jsx("div", {
+                                                        className: "truncate text-xs font-semibold text-base-darkest",
+                                                        children: node.title
+                                                    }),
+                                                    !isNarrow && node.category && /*#__PURE__*/ jsx("div", {
+                                                        className: "truncate text-sm text-base-darker",
+                                                        children: node.category
+                                                    })
+                                                ]
                                             }),
-                                            node.category && /*#__PURE__*/ jsx("div", {
-                                                className: "truncate text-sm text-base-darker",
-                                                children: node.category
+                                            !isNarrow && /*#__PURE__*/ jsx(FieldLinkCountBadge, {
+                                                fieldsCount: propCount,
+                                                linksCount: linkCount
                                             })
                                         ]
                                     }),
-                                    /*#__PURE__*/ jsx(FieldLinkCountBadge, {
-                                        fieldsCount: propCount,
-                                        linksCount: linkCount
+                                    isNarrow && /*#__PURE__*/ jsx("div", {
+                                        className: "flex w-full items-center justify-between pl-5 pt-0.5",
+                                        children: node.category && /*#__PURE__*/ jsx("span", {
+                                            className: "truncate text-xs text-base-darker",
+                                            children: node.category
+                                        })
                                     })
                                 ]
                             }),
@@ -3656,7 +3640,7 @@ const CompactDictionaryPanel = ({ schemaUrl = '_dictionary/_all' })=>{
                                                         /*#__PURE__*/ jsx(Table.Th, {
                                                             children: "Type"
                                                         }),
-                                                        /*#__PURE__*/ jsx(Table.Th, {})
+                                                        !isCompact && /*#__PURE__*/ jsx(Table.Th, {})
                                                     ]
                                                 })
                                             }),
@@ -3677,8 +3661,9 @@ const CompactDictionaryPanel = ({ schemaUrl = '_dictionary/_all' })=>{
                                                                     children: info.type
                                                                 })
                                                             }),
-                                                            /*#__PURE__*/ jsx(Table.Td, {
+                                                            !isCompact && /*#__PURE__*/ jsx(Table.Td, {
                                                                 children: info.enum && /*#__PURE__*/ jsx(Scroller, {
+                                                                    draggable: true,
                                                                     children: /*#__PURE__*/ jsx(Group, {
                                                                         gap: "xs",
                                                                         wrap: "nowrap",
@@ -3690,6 +3675,7 @@ const CompactDictionaryPanel = ({ schemaUrl = '_dictionary/_all' })=>{
                                                                                     label: value,
                                                                                     className: "font-bold text-secondary-contrast",
                                                                                     color: "accent-light",
+                                                                                    noTruncate: true,
                                                                                     children: value
                                                                                 })
                                                                             }, value))
@@ -3763,12 +3749,12 @@ const TABS = [
 ];
 const DataToolsPanel = ({ schemaUrl = DEFAULT_DICTIONARY_SCHEMA_URL, kbUrl })=>{
     return /*#__PURE__*/ jsx("div", {
-        className: "flex shrink-0",
+        className: "flex flex-col h-full",
         children: /*#__PURE__*/ jsxs(Tabs, {
             defaultValue: "dictionary",
             variant: "outline",
             classNames: {
-                root: 'p-2'
+                root: 'flex flex-col p-2'
             },
             keepMounted: true,
             children: [
@@ -3781,7 +3767,7 @@ const DataToolsPanel = ({ schemaUrl = DEFAULT_DICTIONARY_SCHEMA_URL, kbUrl })=>{
                         }, tab.id))
                 }),
                 /*#__PURE__*/ jsx("div", {
-                    className: "min-h-0 flex-1 overflow-hidden pt-4",
+                    className: "flex-1 min-h-0 h-full pt-4",
                     children: /*#__PURE__*/ jsxs(PanelErrorBoundary, {
                         children: [
                             /*#__PURE__*/ jsx(Tabs.Panel, {
@@ -3805,40 +3791,60 @@ const DataToolsPanel = ({ schemaUrl = DEFAULT_DICTIONARY_SCHEMA_URL, kbUrl })=>{
     });
 };
 
-const ToolsPanel = ({ expanded = true, setExpanded = ()=>{} })=>{
+const ToolsPanel = ({ expanded = true, setExpanded = ()=>{}, width = 310 })=>{
     return /*#__PURE__*/ jsx(HorizontalAccordion, {
         label: "Data & Tools",
         expanded: expanded,
         setExpanded: setExpanded,
-        expandedWidth: 310,
+        expandedWidth: width,
         children: /*#__PURE__*/ jsx(DataToolsPanel, {})
     });
 };
 
-const WorkspaceLayout = ({ children })=>{
+const WorkspaceLayout = ({ children, tierConfiguration })=>{
     const workspaceTier = useCoreSelector((state)=>selectWorkspaceTier(state));
     const [toolsExpanded, { set: setToolsExpanded }] = useDisclosure(true);
     const [settingsExpanded, { set: setSettingsExpanded }] = useDisclosure(true);
+    const [toolbarRef, toolbarRect] = useResizeObserver();
     const isFullScreen = useCoreSelector((state)=>selectWorkspaceFullscreen(state));
+    useEffect(()=>{
+        if (isFullScreen) {
+            setToolsExpanded(false);
+            setSettingsExpanded(false);
+        } else {
+            setToolsExpanded(true);
+            setSettingsExpanded(true);
+        }
+    }, [
+        isFullScreen,
+        setSettingsExpanded,
+        setToolsExpanded
+    ]);
     if (!workspaceTier) return null;
     return /*#__PURE__*/ jsxs("div", {
         className: "flex flex-col w-full grow",
         children: [
             /*#__PURE__*/ jsx(WorkspaceToolbar, {
-                toolbarConfiguration: WORKSPACE_TIER_INFORMATION[workspaceTier].toolbar
+                toolbarConfiguration: tierConfiguration.toolbar,
+                ref: toolbarRef
             }),
             /*#__PURE__*/ 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__*/ jsx(ToolsPanel, {
-                        expanded: toolsExpanded && !isFullScreen,
-                        setExpanded: setToolsExpanded
+                    tierConfiguration.dataAndTools.enabled && /*#__PURE__*/ jsx(ToolsPanel, {
+                        expanded: toolsExpanded,
+                        setExpanded: setToolsExpanded,
+                        width: tierConfiguration.dataAndTools.width
                     }),
                     children,
                     /*#__PURE__*/ 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
                     })
                 ]
             })
@@ -3892,6 +3898,7 @@ const WorkspaceCenter = ({ workspaces, landingPage, tierConfiguration })=>{
     }
     if (workspaceTier === 'free') {
         return /*#__PURE__*/ jsx(WorkspaceLayout, {
+            tierConfiguration: tierConfiguration.free,
             children: /*#__PURE__*/ jsx(FreeWorkspace, {})
         });
     }
@@ -3900,6 +3907,7 @@ const WorkspaceCenter = ({ workspaces, landingPage, tierConfiguration })=>{
             children: /*#__PURE__*/ jsx(MicroContainerReduxProvider, {
                 enabled: true,
                 children: /*#__PURE__*/ jsx(WorkspaceLayout, {
+                    tierConfiguration: tierConfiguration.remote,
                     children: /*#__PURE__*/ jsx(RemoteComputeWorkspace, {
                         tenantId: authContext?.tenantId || 'default',
                         workspaceId: authContext?.workspaceId || 'workspace-default',
@@ -3943,22 +3951,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 ContentSource.getContentDatabase().get(`${GEN3_COMMONS_NAME}/workspaces.json`);
+        const mergedConfiguration = merge({}, DEFAULT_WORKSPACES_CONFIGURATION, workspacesCenterConfiguration);
         return {
             props: {
                 ...await getNavPageLayoutPropsFromConfig(),
-                configuration: {
-                    ...workspacesCenterConfiguration
-                }
+                configuration: mergedConfiguration
             }
         };
     } catch (error) {