first version in progress

Author: Marchlak

src/components/variableInspectorPanel.ts

@@ -0,0 +1,29 @@
+import { Widget } from '@lumino/widgets';
+import { ILabShell } from '@jupyterlab/application';
+
+
+class VariableInspectorPanel extends Widget {
+  constructor() {
+    super();
+    this.addClass('jp-VarInspector');
+
+    const hello = document.createElement('div');
+    hello.textContent = 'Hello World';
+    hello.style.padding = '10px';
+    hello.style.fontSize = '16px';
+    this.node.appendChild(hello);
+  }
+}
+
+export function createEmptyVariableInspectorPanel(labShell: ILabShell): void {
+  const panel = new VariableInspectorPanel();
+
+  panel.id = 'custom-variableinspector';
+  panel.title.label = 'Custom Variable Inspector';
+  panel.title.closable = true;
+
+
+  labShell.add(panel, 'main');
+  labShell.activateById(panel.id);
+}
+

src/components/variableInspectorSidebar.tsx

@@ -3,13 +3,17 @@ import { ReactWidget } from '@jupyterlab/ui-components';
 import { pluginIcon } from '../icons/pluginIcon';
 import { NotebookWatcher } from '../watchers/notebookWatcher'
 import { NotebookPanelContextProvider } from '../context/notebookPanelContext';
+import { CommandRegistry } from '@lumino/commands';
+import { VariableListComponent } from './variableListComponent';
 
 
 class VariableInspectorSidebarWidget extends ReactWidget {
   private notebookWatcher: NotebookWatcher;
-  constructor(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';
@@ -19,18 +23,24 @@ class VariableInspectorSidebarWidget extends ReactWidget {
   render(): JSX.Element {
     return (
       <div
-        className='sidebar-container'
+        className='mljar-sidebar-container'
       >
-        Siema
+        <VariableListComponent/>
+        <button
+                  onClick={() => this.commands.execute('custom:open-variable-inspector')}
+        > 
+          Hello
+        </button>
+        
         <NotebookPanelContextProvider notebookWatcher={this.notebookWatcher}>
         </NotebookPanelContextProvider>
       </div>
     );
   }
 }
 
-export function createVariableInspectorSidebar(notebookWatcher:NotebookWatcher): VariableInspectorSidebarWidget {
-  return new VariableInspectorSidebarWidget(notebookWatcher);
+export function createVariableInspectorSidebar(notebookWatcher: NotebookWatcher, commands: CommandRegistry): VariableInspectorSidebarWidget {
+  return new VariableInspectorSidebarWidget(notebookWatcher, commands);
 }
 
 

src/components/variableItem.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+interface VariableInfo {
+  name: string
+  type: string
+  shape: string
+}
+
+interface VariableItemProps {
+  vrb: VariableInfo
+}
+
+export const PackageItem: React.FC<VariableItemProps> = ({ vrb }) => {
+  
+
+
+  return (
+    <li className='package-item'>
+      <span className='package-name'> {vrb.name}</span>
+      <span className='package-version'>{vrb.type}</span>
+      <span className='package-version'>{vrb.shape}</span>
+      <button
+        className='mljar-show-variable-button'
+      >
+      </button>
+    </li>
+  )
+}
+

src/components/variableList.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export const VariableList: React.FC = () => {
+
+
+  return (
+    <ul className='mljar-variable-list'>
+        <li className='mljar-variable-header-list'>
+          <span className='mljar-variable-header-name'>Name</span>
+          <span className='mljar-variable-header-version'>Type</span>
+          <span className='mljar-variable-header-version'>Shape</span>
+          <span className='mljar-variable-header-blank'>&nbsp;</span>
+        </li>
+    </ul>
+  );
+};

src/components/variableListComponent.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { VariableList } from './variableList';
+
+
+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>
+          <VariableList/>
+        </div>
+      </div>
+  );
+};

src/context/notebookKernelContext.tsx

@@ -0,0 +1,49 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { NotebookWatcher, KernelInfo } from '../watchers/notebookWatcher';
+
+type NotebookKernelContextType = KernelInfo | null;
+
+const NotebookKernelContext = createContext<NotebookKernelContextType>(null);
+
+export function useNotebookKernelContext(): NotebookKernelContextType {
+  return useContext(NotebookKernelContext);
+}
+
+type NotebookKernelContextProviderProps = {
+  children: React.ReactNode;
+  notebookWatcher: NotebookWatcher;
+};
+
+export function NotebookKernelContextProvider({
+  children,
+  notebookWatcher
+}: NotebookKernelContextProviderProps) {
+  const [kernelInfo, setKernelInfo] = useState<KernelInfo | null>(
+    notebookWatcher.kernelInfo
+  );
+
+  useEffect(() => {
+    const onKernelChanged = (
+      sender: NotebookWatcher,
+      newKernelInfo: KernelInfo | null
+    ) => {
+      setKernelInfo(newKernelInfo);
+    };
+
+    notebookWatcher.kernelChanged.connect(onKernelChanged);
+
+    setKernelInfo(notebookWatcher.kernelInfo);
+
+    return () => {
+      notebookWatcher.kernelChanged.disconnect(onKernelChanged);
+    };
+  }, [notebookWatcher]);
+
+  return (
+    <NotebookKernelContext.Provider value={kernelInfo}>
+      {children}
+    </NotebookKernelContext.Provider>
+  );
+}
+
+

src/context/notebookVariableContext.tsx

@@ -1,11 +1,15 @@
 import {
   JupyterFrontEnd,
-  JupyterFrontEndPlugin
+  JupyterFrontEndPlugin,
+  ILabShell,
 } from '@jupyterlab/application';
 
+import { ICommandPalette } from '@jupyterlab/apputils';
+import { createEmptyVariableInspectorPanel } from './components/variableInspectorPanel';
 import { createVariableInspectorSidebar } from './components/variableInspectorSidebar';
 import { NotebookWatcher } from './watchers/notebookWatcher';
 
+
 const leftTab: JupyterFrontEndPlugin<void> = {
   id: 'package-manager:plugin',
   description: 'A JupyterLab extension to list, remove and install python packages from pip.',
@@ -16,11 +20,29 @@ const leftTab: JupyterFrontEndPlugin<void> = {
 
     notebookWatcher.selectionChanged.connect((sender, selections) => {});
 
-    let widget = createVariableInspectorSidebar(notebookWatcher);
+    let widget = createVariableInspectorSidebar(notebookWatcher, app.commands);
 
     app.shell.add(widget, 'left',{rank: 1999});
   }
 };
 
-export default leftTab;
+
+const customVariableInspectorPlugin: JupyterFrontEndPlugin<void> = {
+  id: 'custom-variableinspector',
+  autoStart: true,
+  requires: [ICommandPalette, ILabShell],
+  activate: (app: JupyterFrontEnd, palette: ICommandPalette, labShell: ILabShell) => {
+    const command = 'custom:open-variable-inspector';
+    app.commands.addCommand(command, {
+      label: 'Open Custom Variable Inspector',
+      execute: () => {
+        createEmptyVariableInspectorPanel(labShell);
+      }
+    });
+
+    palette.addItem({ command, category: 'Custom Extensions' });
+  }
+};
+
+export default [customVariableInspectorPlugin, leftTab];