@gen3/workspaces 0.12.47 → 0.12.48

package/dist/index/esm/index.js

@@ -6,10 +6,11 @@ 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 } 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,
@@ -2362,41 +2363,6 @@ 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: []
-        }
-    }
-};
-
 // Streaming LLM client — OpenAI, Anthropic, Gemini, Ollama
 // All requests go directly from the browser to provider APIs (no backend proxy).
 const DEFAULT_OLLAMA_URL = 'http://localhost:11434';
@@ -3551,6 +3517,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 +3552,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 h-full flex-col gap-2 overflow-hidden bg-base-lightest p-2",
         children: [
             /*#__PURE__*/ jsx(LoadingOverlay, {
                 visible: isFetching
@@ -3603,7 +3573,7 @@ const CompactDictionaryPanel = ({ schemaUrl = '_dictionary/_all' })=>{
                 ]
             }),
             /*#__PURE__*/ jsx("div", {
-                className: "flex flex-col gap-0.5",
+                className: "flex min-h-0 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 +3584,45 @@ 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__*/ jsxs("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
+                                            }),
+                                            /*#__PURE__*/ jsx(FieldLinkCountBadge, {
+                                                fieldsCount: propCount,
+                                                linksCount: linkCount
+                                            })
+                                        ]
                                     })
                                 ]
                             }),
@@ -3656,7 +3644,7 @@ const CompactDictionaryPanel = ({ schemaUrl = '_dictionary/_all' })=>{
                                                         /*#__PURE__*/ jsx(Table.Th, {
                                                             children: "Type"
                                                         }),
-                                                        /*#__PURE__*/ jsx(Table.Th, {})
+                                                        !isCompact && /*#__PURE__*/ jsx(Table.Th, {})
                                                     ]
                                                 })
                                             }),
@@ -3677,8 +3665,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 +3679,7 @@ const CompactDictionaryPanel = ({ schemaUrl = '_dictionary/_all' })=>{
                                                                                     label: value,
                                                                                     className: "font-bold text-secondary-contrast",
                                                                                     color: "accent-light",
+                                                                                    noTruncate: true,
                                                                                     children: value
                                                                                 })
                                                                             }, value))
@@ -3805,17 +3795,17 @@ 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);
@@ -3825,20 +3815,22 @@ const WorkspaceLayout = ({ children })=>{
         className: "flex flex-col w-full grow",
         children: [
             /*#__PURE__*/ jsx(WorkspaceToolbar, {
-                toolbarConfiguration: WORKSPACE_TIER_INFORMATION[workspaceTier].toolbar
+                toolbarConfiguration: tierConfiguration.toolbar
             }),
             /*#__PURE__*/ jsxs("div", {
                 className: "flex w-full grow",
                 children: [
-                    WORKSPACE_TIER_INFORMATION[workspaceTier].dataAndTools.enabled && /*#__PURE__*/ jsx(ToolsPanel, {
+                    tierConfiguration.dataAndTools.enabled && /*#__PURE__*/ jsx(ToolsPanel, {
                         expanded: toolsExpanded && !isFullScreen,
-                        setExpanded: setToolsExpanded
+                        setExpanded: setToolsExpanded,
+                        width: tierConfiguration.dataAndTools.width
                     }),
                     children,
                     /*#__PURE__*/ jsx(SettingsPanel, {
-                        showKernels: WORKSPACE_TIER_INFORMATION[workspaceTier].settings.showKernels,
+                        showKernels: tierConfiguration.settings.showKernels,
                         expanded: settingsExpanded && !isFullScreen,
-                        setExpanded: setSettingsExpanded
+                        setExpanded: setSettingsExpanded,
+                        width: tierConfiguration.settings.width
                     })
                 ]
             })
@@ -3892,6 +3884,7 @@ const WorkspaceCenter = ({ workspaces, landingPage, tierConfiguration })=>{
     }
     if (workspaceTier === 'free') {
         return /*#__PURE__*/ jsx(WorkspaceLayout, {
+            tierConfiguration: tierConfiguration.free,
             children: /*#__PURE__*/ jsx(FreeWorkspace, {})
         });
     }
@@ -3900,6 +3893,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 +3937,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) {