add first solution to refreshing variables system

Author: Marchlak

src/components/searchBar.tsx

@@ -14,8 +14,8 @@ export const SearchBar: React.FC = () => {
         type="text"
         value={searchTerm}
         onChange={handleChange}
-        placeholder="Search Package..."
-        className='search-bar-input'
+        placeholder="Search Variable..."
+        className='mljar-search-bar-input'
       />
     </div>
   );

src/components/variableInspectorSidebar.tsx

@@ -1,52 +1,72 @@
-import React from 'react';
-import { ReactWidget } from '@jupyterlab/ui-components';
-import { pluginIcon } from '../icons/pluginIcon';
+// src/components/variableInspectorSidebarWidget.tsx
+import React from 'react'
+import { ReactWidget } from '@jupyterlab/ui-components'
+import { Message } from '@lumino/messaging'
+import { pluginIcon } from '../icons/pluginIcon'
 import { NotebookWatcher } from '../watchers/notebookWatcher'
-import { NotebookPanelContextProvider } from '../context/notebookPanelContext';
-import { CommandRegistry } from '@lumino/commands';
-import { VariableListComponent } from './variableListComponent';
-import { NotebookKernelContextProvider } from '../context/notebookKernelContext';
-import { VariableContextProvider } from '../context/notebookVariableContext';
+import { CommandRegistry } from '@lumino/commands'
+import { NotebookPanelContextProvider } from '../context/notebookPanelContext'
+import { NotebookKernelContextProvider } from '../context/notebookKernelContext'
+import { VariableContextProvider } from '../context/notebookVariableContext'
+import { VariableListComponent } from './variableListComponent'
+import { PluginVisibilityContextValue, PluginVisibilityContext } from '../context/pluginVisibilityContext'
+import { KernelIdleWatcherContextProvider } from '../context/kernelStatusContext'
 
+export class VariableInspectorSidebarWidget extends ReactWidget {
+  private notebookWatcher: NotebookWatcher
+  private commands: CommandRegistry
+  private isOpen = false
 
-class VariableInspectorSidebarWidget extends ReactWidget {
-  private notebookWatcher: NotebookWatcher;
-  private commands: CommandRegistry;
-  constructor(notebookWatcher:NotebookWatcher, commands: CommandRegistry) {
-    super();
-    this.notebookWatcher = notebookWatcher;
-    this.commands = commands;
-    this.id = 'my-plugin::empty-sidebar';
-    this.title.icon = pluginIcon;
-    this.title.caption ='My Plugin';
-    this.addClass('my-plugin-sidebar-widget');
+  constructor(notebookWatcher: NotebookWatcher, commands: CommandRegistry) {
+    super()
+    this.notebookWatcher = notebookWatcher
+    this.commands = commands
+    this.id = 'my-plugin::empty-sidebar'
+    this.title.icon = pluginIcon
+    this.title.caption = 'My Plugin'
+    this.addClass('mljar-plugin-sidebar-widget')
+  }
+
+  protected onAfterShow(msg: Message): void {
+    super.onAfterShow(msg)
+    this.isOpen = true
+    this.update()
+  }
+
+  protected onAfterHide(msg: Message): void {
+    super.onAfterHide(msg)
+    this.isOpen = false
+    this.update()
   }
 
   render(): JSX.Element {
+    const contextValue: PluginVisibilityContextValue = {
+      isPluginOpen: this.isOpen,
+      setPluginOpen: open => {
+        this.isOpen = open
+        this.update()
+      }
+    }
     return (
-      <div
-        className='mljar-sidebar-container'
-      >
-
+      <PluginVisibilityContext.Provider value={contextValue}>
         <NotebookPanelContextProvider notebookWatcher={this.notebookWatcher}>
           <NotebookKernelContextProvider notebookWatcher={this.notebookWatcher}>
-              <VariableContextProvider>
-            <VariableListComponent/>
-            <button
-            onClick={() => this.commands.execute('custom:open-variable-inspector')}
-            > 
-              Hello
-            </button> 
+            <VariableContextProvider>
+              <KernelIdleWatcherContextProvider>
+              <VariableListComponent />
+                
+              <button onClick={() => this.commands.execute('custom:open-variable-inspector')}>
+                Hello
+              </button>
+              </KernelIdleWatcherContextProvider>
             </VariableContextProvider>
           </NotebookKernelContextProvider>
         </NotebookPanelContextProvider>
-      </div>
-    );
+      </PluginVisibilityContext.Provider>
+    )
   }
 }
 
 export function createVariableInspectorSidebar(notebookWatcher: NotebookWatcher, commands: CommandRegistry): VariableInspectorSidebarWidget {
-  return new VariableInspectorSidebarWidget(notebookWatcher, commands);
+  return new VariableInspectorSidebarWidget(notebookWatcher, commands)
 }
-
-

src/components/variableItem.tsx

@@ -11,22 +11,21 @@ interface VariableItemProps {
 }
 
 export const VariableItem: React.FC<VariableItemProps> = ({ vrb }) => {
-  const handleButtonClick = () => {
-    console.log(`Variable clicked: ${vrb.name}`);
-  };
 
   return (
     <li className='mljar-variable-item'>
       <span className='mljar-variable-name'>{vrb.name}</span>
-      <span className='mljar-variable-version'>{vrb.type}</span>
+      <span className='mljar-variable-type'>{vrb.type}</span>
       <span className='mljar-variable-shape'>{vrb.shape}</span>
-      <button
+      {
+  /*    <button
         className='mljar-show-variable-button'
         onClick={handleButtonClick}
         aria-label={`Show details for ${vrb.name}`}
       >
         Show
-      </button>
+      </button> */
+      }
     </li>
   );
 };

src/components/variableListComponent.tsx

@@ -10,9 +10,11 @@ export const VariableListComponent: React.FC = () => {
       <div className="mljar-variable-container">
         <div className="mljar-variable-header-container">
           <h3 className="mljar-variable-header">Variable Inspector</h3>
-            <SearchBar />
-          <VariableList/>
         </div>
+          <div>
+            <SearchBar />
+            <VariableList/>
+          </div>
       </div>
   );
 };

src/context/kernelStatusContext.tsx

@@ -0,0 +1,81 @@
+import React, { createContext, useContext, useEffect, useRef, useState } from 'react'
+import { Kernel } from '@jupyterlab/services'
+import { useNotebookPanelContext } from './notebookPanelContext'
+import { useVariableContext } from './notebookVariableContext'
+
+const KernelIdleWatcherContext = createContext({})
+
+export const KernelIdleWatcherContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const notebookPanel = useNotebookPanelContext()
+  const [kernelStatus, setKernelStatus] = useState<Kernel.Status>('unknown')
+  const timerRef = useRef<number | null>(null)
+  const [hasRefreshed, setHasRefreshed] = useState(false)
+  const { refreshVariables, isRefreshing } = useVariableContext()
+
+
+
+
+  useEffect(() => {
+    if (!notebookPanel || !notebookPanel.sessionContext) return
+    const kernel = notebookPanel.sessionContext?.session?.kernel
+    if (!kernel) return
+    const onKernelStatusChange = () => {
+      setKernelStatus(kernel.status)
+    }
+    kernel.statusChanged.connect(onKernelStatusChange)
+    return () => {
+      kernel.statusChanged.disconnect(onKernelStatusChange)
+    }
+  }, [notebookPanel?.sessionContext?.session?.kernel])
+
+
+
+  // first idea to solve the problem, code might be unstable
+  useEffect(() => {
+    //clearing timeout
+    if (isRefreshing) {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current)
+        timerRef.current = null
+      }
+      return
+    }
+    if (kernelStatus === 'idle') {
+      if (!hasRefreshed) {
+        timerRef.current = window.setTimeout(() => {
+          if (
+            notebookPanel &&
+            notebookPanel.sessionContext?.session?.kernel?.status === 'idle' &&
+            !isRefreshing
+          ) {
+            refreshVariables()
+            setHasRefreshed(true)
+          }
+        }, 2000)
+      }
+    } else {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current)
+        timerRef.current = null
+      }
+      if(!isRefreshing && notebookPanel){
+      setHasRefreshed(false)
+      }
+    }
+    //clearing timeout
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current)
+        timerRef.current = null
+      }
+    }
+  }, [kernelStatus,notebookPanel,refreshVariables, hasRefreshed])
+
+  return (
+    <KernelIdleWatcherContext.Provider value={{ kernelStatus }}>
+      {children}
+    </KernelIdleWatcherContext.Provider>
+  )
+}
+
+export const useKernelIdleWatcherContext = () => useContext(KernelIdleWatcherContext)