@gen3/workspaces 0.12.45 → 0.12.46

package/dist/index/esm/index.js

@@ -1,9 +1,8 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { useCallback, useMemo, useState, useRef, useEffect, createContext, useImperativeHandle } from 'react';
-import { mergeDefaultTailwindClassnames, convertSecondsToMilliseconds, InfoRolloverButton, OverflowTooltippedLabel, PanelErrorBoundary, ProtectedContent, NavPageLayout, ContentSource, getNavPageLayoutPropsFromConfig } from '@gen3/frontend';
+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 { getCookie } from 'cookies-next';
 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';
@@ -175,13 +174,74 @@ const FreeWorkspace = ({ assetBaseUrl = '/api/workspace-assets/free', onReady, o
     const [loading, setLoading] = useState(true);
     const [loadError, setLoadError] = useState(false);
     const [retryCount, setRetryCount] = useState(0);
+    const [jupyterReady, setJupyterReady] = useState(false);
     const iframeRef = useRef(null);
+    const broadcastChannelRef = useRef(null);
     const url = `${assetBaseUrl}/lab/index.html`;
     const handleRetry = useCallback(()=>{
         setLoadError(false);
         setLoading(true);
         setRetryCount((n)=>n + 1);
     }, []);
+    // set up BroadcastChannel
+    useEffect(()=>{
+        if (!broadcastChannelRef?.current) {
+            broadcastChannelRef.current = new BroadcastChannel(ACTIVITY_CHANNEL);
+        }
+        return ()=>{
+            if (broadcastChannelRef.current) {
+                broadcastChannelRef.current.close();
+                broadcastChannelRef.current = null;
+            }
+        };
+    }, []);
+    // Handle setting up iframe event listeners
+    useEffect(()=>{
+        if (!jupyterReady) return;
+        const updateUserActivity = ()=>{
+            const timestamp = Date.now();
+            if (broadcastChannelRef.current) {
+                broadcastChannelRef.current.postMessage({
+                    type: 'activity-update',
+                    timestamp
+                });
+            }
+        };
+        const iframe = iframeRef.current;
+        if (!iframe?.contentWindow) {
+            return;
+        }
+        try {
+            const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+            if (iframeDoc) {
+                iframeDoc.addEventListener('mousedown', updateUserActivity);
+                iframeDoc.addEventListener('keypress', updateUserActivity);
+                iframeDoc.addEventListener('scroll', updateUserActivity);
+                iframeDoc.addEventListener('click', updateUserActivity);
+                iframeDoc.addEventListener('touchstart', updateUserActivity);
+            }
+        } catch (error) {
+            console.warn('Cannot access iframe content - cross-origin restriction', error);
+        }
+        return ()=>{
+            if (iframe?.contentWindow) {
+                try {
+                    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+                    if (iframeDoc) {
+                        iframeDoc.removeEventListener('mousedown', updateUserActivity);
+                        iframeDoc.removeEventListener('keypress', updateUserActivity);
+                        iframeDoc.removeEventListener('scroll', updateUserActivity);
+                        iframeDoc.removeEventListener('click', updateUserActivity);
+                        iframeDoc.removeEventListener('touchstart', updateUserActivity);
+                    }
+                } catch  {
+                // Ignore cleanup errors
+                }
+            }
+        };
+    }, [
+        jupyterReady
+    ]);
     if (loadError) {
         return /*#__PURE__*/ jsx("div", {
             children: /*#__PURE__*/ jsxs(Card, {
@@ -233,6 +293,7 @@ const FreeWorkspace = ({ assetBaseUrl = '/api/workspace-assets/free', onReady, o
                 className: "min-h-0 flex-1 border-0",
                 onLoad: ()=>{
                     setLoading(false);
+                    setJupyterReady(true);
                     onReady?.();
                 },
                 onError: ()=>{
@@ -632,7 +693,9 @@ const workspaceShutdownAlertLimit = 30000; // 5 minutes: 5 * 60 * 1000 TODO Figu
     ]);
     useDeepCompareEffect(()=>{
         // TODO: add better error logging
-        console.log('useJEGWorkspaceResourceMonitor', error);
+        if (error) {
+            console.log('useJEGWorkspaceResourceMonitor', error);
+        }
     }, [
         error
     ]);
@@ -994,6 +1057,7 @@ const MicroContainerReduxPanel = ({ compact = false })=>{
     const [retryCount, setRetryCount] = useState(0);
     const [jupyterReady, setJupyterReady] = useState(false);
     const iframeRef = useRef(null);
+    const broadcastChannelRef = useRef(null);
     const { status } = useMicroContainerReduxContext();
     const normalizedBase = assetBaseUrl.replace(/\/$/, '');
     // Scoped notebook path for session isolation
@@ -1013,11 +1077,71 @@ const MicroContainerReduxPanel = ({ compact = false })=>{
         const userHash = btoa(userId || 'anonymous').substring(0, 8);
         scopedNotebookPath = `/workspace/${userHash}/${notebookName}.ipynb`;
     }
-    if (process.env.NODE_ENV === 'development') {
-        // NOTE: This cookie can only be accessed from the client side
-        // in development mode. Otherwise, the cookie is set as httpOnly
-        getCookie('credentials_token');
-    }
+    // let accessToken = undefined;
+    // if (process.env.NODE_ENV === 'development') {
+    //   // NOTE: This cookie can only be accessed from the client side
+    //   // in development mode. Otherwise, the cookie is set as httpOnly
+    //   accessToken = getCookie('credentials_token');
+    // }
+    // set up BroadcastChannel
+    useEffect(()=>{
+        if (!broadcastChannelRef?.current) {
+            broadcastChannelRef.current = new BroadcastChannel(ACTIVITY_CHANNEL);
+        }
+        return ()=>{
+            if (broadcastChannelRef.current) {
+                broadcastChannelRef.current.close();
+                broadcastChannelRef.current = null;
+            }
+        };
+    }, []);
+    // Handle setting up iframe event listeners
+    useEffect(()=>{
+        if (!jupyterReady) return;
+        const updateUserActivity = ()=>{
+            const timestamp = Date.now();
+            if (broadcastChannelRef.current) {
+                broadcastChannelRef.current.postMessage({
+                    type: 'activity-update',
+                    timestamp
+                });
+            }
+        };
+        const iframe = iframeRef.current;
+        if (!iframe?.contentWindow) {
+            return;
+        }
+        try {
+            const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+            if (iframeDoc) {
+                iframeDoc.addEventListener('mousedown', updateUserActivity);
+                iframeDoc.addEventListener('keypress', updateUserActivity);
+                iframeDoc.addEventListener('scroll', updateUserActivity);
+                iframeDoc.addEventListener('click', updateUserActivity);
+                iframeDoc.addEventListener('touchstart', updateUserActivity);
+            }
+        } catch (error) {
+            console.warn('Cannot access iframe content - cross-origin restriction', error);
+        }
+        return ()=>{
+            if (iframe?.contentWindow) {
+                try {
+                    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+                    if (iframeDoc) {
+                        iframeDoc.removeEventListener('mousedown', updateUserActivity);
+                        iframeDoc.removeEventListener('keypress', updateUserActivity);
+                        iframeDoc.removeEventListener('scroll', updateUserActivity);
+                        iframeDoc.removeEventListener('click', updateUserActivity);
+                        iframeDoc.removeEventListener('touchstart', updateUserActivity);
+                    }
+                } catch  {
+                // Ignore cleanup errors
+                }
+            }
+        };
+    }, [
+        jupyterReady
+    ]);
     /* ---- Wait for JupyterLite app inside the iframe --------------- */ useEffect(()=>{
         if (!iframeRef.current || loadError) return;
         if (jupyterReady) return;
@@ -1209,6 +1333,7 @@ const MicroContainerReduxPanel = ({ compact = false })=>{
                     className: "min-h-0 flex-1 border-0",
                     onLoad: ()=>{
                         setLoading(false);
+                        setJupyterReady(true);
                     },
                     onError: ()=>{
                         setLoadError(true);