update styles

Author: Marchlak

src/components/variableInspectorSidebar.tsx

@@ -23,7 +23,7 @@ export class VariableInspectorSidebarWidget extends ReactWidget {
     this.commands = commands
     this.id = 'my-plugin::empty-sidebar'
     this.title.icon = pluginIcon
-    this.title.caption = 'My Plugin'
+    this.title.caption = 'Variable Inspector'
     this.addClass('mljar-plugin-sidebar-widget')
   }
 
@@ -47,17 +47,15 @@ export class VariableInspectorSidebarWidget extends ReactWidget {
         this.update()
       }
     }
+
+  console.log(this.commands)
     return (
       <PluginVisibilityContext.Provider value={contextValue}>
         <NotebookPanelContextProvider notebookWatcher={this.notebookWatcher}>
           <NotebookKernelContextProvider notebookWatcher={this.notebookWatcher}>
             <VariableContextProvider>
               <KernelIdleWatcherContextProvider>
               <VariableListComponent />
-                
-              <button onClick={() => this.commands.execute('custom:open-variable-inspector')}>
-                Hello
-              </button>
               </KernelIdleWatcherContextProvider>
             </VariableContextProvider>
           </NotebookKernelContextProvider>

src/components/variableItem.tsx

@@ -1,31 +1,33 @@
-import React from 'react';
+import React from 'react'
+import { detailIcon } from '../icons/detailIcon'
 
 interface VariableInfo {
-  name: string;
-  type: string;
-  shape: string;
+  name: string
+  type: string
+  shape: string
 }
 
 interface VariableItemProps {
-  vrb: VariableInfo;
+  vrb: VariableInfo
 }
 
-export const VariableItem: React.FC<VariableItemProps> = ({ vrb }) => {
+const handleButtonClick = () => {
+  console.log("Click")
+}
 
+export const VariableItem: React.FC<VariableItemProps> = ({ vrb }) => {
   return (
     <li className='mljar-variable-item'>
       <span className='mljar-variable-name'>{vrb.name}</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> */
-      }
+        <detailIcon.react className='mljar-variable-detail-button-icon' />
+      </button>
     </li>
-  );
-};
+  )
+}

src/components/variableListComponent.tsx

@@ -1,20 +1,21 @@
 import React from 'react';
 import { VariableList } from './variableList';
 import { SearchBar } from './searchBar';
-
+import { RefreshButton } from './variableRefreshButton';
 
 export const VariableListComponent: React.FC = () => {
-
-
   return (
-      <div className="mljar-variable-container">
-        <div className="mljar-variable-header-container">
-          <h3 className="mljar-variable-header">Variable Inspector</h3>
+    <div className="mljar-variable-container">
+      <div className="mljar-variable-header-container">
+        <h3 className="mljar-variable-header">Variable Inspector</h3>
+      </div>
+      <div>
+        <div className="mljar-actions-container">
+          <RefreshButton />
         </div>
-          <div>
-            <SearchBar />
-            <VariableList/>
-          </div>
+        <SearchBar />
+        <VariableList />
       </div>
+    </div>
   );
 };

src/components/variableRefreshButton.tsx

@@ -0,0 +1,21 @@
+import { refreshIcon } from "../icons/refreshIcon" 
+import React from 'react';
+import { useVariableContext } from '../context/notebookVariableContext'
+
+
+
+export const RefreshButton: React.FC = () => {
+  const { refreshVariables } = useVariableContext();
+
+  return (
+    <button
+      className="mljar-refresh-button"
+      onClick={refreshVariables}
+      title="Refresh Packages"
+    >
+      <refreshIcon.react className="mljar-refresh-icon" />
+      {'Refresh'}
+    </button>
+  );
+};
+

src/context/kernelStatusContext.tsx

@@ -12,9 +12,6 @@ export const KernelIdleWatcherContextProvider: React.FC<{ children: React.ReactN
   const [hasRefreshed, setHasRefreshed] = useState(false)
   const { refreshVariables, isRefreshing } = useVariableContext()
 
-
-
-
   useEffect(() => {
     if (!notebookPanel || !notebookPanel.sessionContext) return
     const kernel = notebookPanel.sessionContext?.session?.kernel
@@ -28,8 +25,6 @@ export const KernelIdleWatcherContextProvider: React.FC<{ children: React.ReactN
     }
   }, [notebookPanel?.sessionContext?.session?.kernel])
 
-
-
   // first idea to solve the problem, code might be unstable
   useEffect(() => {
     //clearing timeout
@@ -69,7 +64,7 @@ export const KernelIdleWatcherContextProvider: React.FC<{ children: React.ReactN
         timerRef.current = null
       }
     }
-  }, [kernelStatus,notebookPanel,refreshVariables, hasRefreshed])
+  }, [kernelStatus,notebookPanel, refreshVariables, hasRefreshed])
 
   return (
     <KernelIdleWatcherContext.Provider value={{ kernelStatus }}>

src/icons/detailIcon.ts

@@ -0,0 +1,11 @@
+import { LabIcon } from '@jupyterlab/ui-components';
+
+const svgStr = `
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-matrix"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 16h.013" /><path d="M12.01 16h.005" /><path d="M16.015 16h.005" /><path d="M16.015 12h.005" /><path d="M8.01 12h.005" /><path d="M12.01 12h.005" /><path d="M16.02 8h.005" /><path d="M8.015 8h.005" /><path d="M12.015 8h.005" /><path d="M7 4h-1a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h1" /><path d="M17 4h1a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-1" /></svg>
+`;
+
+export const detailIcon = new LabIcon({
+  name: 'detail-plugin-icon',
+  svgstr: svgStr,
+});
+

src/icons/refreshIcon.ts

@@ -0,0 +1,10 @@
+import { LabIcon } from '@jupyterlab/ui-components';
+
+const svgStr = `
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-refresh"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4" /><path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4" /></svg>
+`;
+
+export const refreshIcon = new LabIcon({
+  name: 'my-variable-refresh-icon',
+  svgstr: svgStr
+});

src/index.ts

@@ -11,7 +11,7 @@ import { NotebookWatcher } from './watchers/notebookWatcher';
 
 
 const leftTab: JupyterFrontEndPlugin<void> = {
-  id: 'package-manager:plugin',
+  id: 'variable-manager:plugin',
   description: 'A JupyterLab extension to list, remove and install python packages from pip.',
   autoStart: true,
   activate: async (app: JupyterFrontEnd) => {