Add a new widget to be include in Notebook cell output

Author: brichet

packages/base/src/commands.ts

@@ -10,7 +10,7 @@ import {
   SourceType
 } from '@jupytergis/schema';
 import { JupyterFrontEnd } from '@jupyterlab/application';
-import { WidgetTracker, showErrorMessage } from '@jupyterlab/apputils';
+import { showErrorMessage } from '@jupyterlab/apputils';
 import { ICompletionProviderManager } from '@jupyterlab/completer';
 import { IStateDB } from '@jupyterlab/statedb';
 import { ITranslator } from '@jupyterlab/translation';
@@ -21,10 +21,10 @@ import { CreationFormDialog } from './dialogs/formdialog';
 import { LayerBrowserWidget } from './dialogs/layerBrowserDialog';
 import { SymbologyWidget } from './dialogs/symbology/symbologyDialog';
 import keybindings from './keybindings.json';
-import { JupyterGISWidget } from './widget';
+import { JupyterGISTracker } from './types';
 
 interface ICreateEntry {
-  tracker: WidgetTracker<JupyterGISWidget>;
+  tracker: JupyterGISTracker;
   formSchemaRegistry: IJGISFormSchemaRegistry;
   title: string;
   createLayer: boolean;
@@ -50,7 +50,7 @@ function loadKeybindings(commands: CommandRegistry, keybindings: any[]) {
  */
 export function addCommands(
   app: JupyterFrontEnd,
-  tracker: WidgetTracker<JupyterGISWidget>,
+  tracker: JupyterGISTracker,
   translator: ITranslator,
   formSchemaRegistry: IJGISFormSchemaRegistry,
   layerBrowserRegistry: IJGISLayerBrowserRegistry,
@@ -932,7 +932,7 @@ export function addCommands(
 
 namespace Private {
   export function createLayerBrowser(
-    tracker: WidgetTracker<JupyterGISWidget>,
+    tracker: JupyterGISTracker,
     layerBrowserRegistry: IJGISLayerBrowserRegistry,
     formSchemaRegistry: IJGISFormSchemaRegistry
   ) {
@@ -953,7 +953,7 @@ namespace Private {
   }
 
   export function createSymbologyDialog(
-    tracker: WidgetTracker<JupyterGISWidget>,
+    tracker: JupyterGISTracker,
     state: IStateDB
   ) {
     return async () => {
@@ -1112,9 +1112,7 @@ namespace Private {
     }
   }
 
-  export function executeConsole(
-    tracker: WidgetTracker<JupyterGISWidget>
-  ): void {
+  export function executeConsole(tracker: JupyterGISTracker): void {
     const current = tracker.currentWidget;
 
     if (!current) {
@@ -1123,9 +1121,7 @@ namespace Private {
     current.content.executeConsole();
   }
 
-  export function removeConsole(
-    tracker: WidgetTracker<JupyterGISWidget>
-  ): void {
+  export function removeConsole(tracker: JupyterGISTracker): void {
     const current = tracker.currentWidget;
 
     if (!current) {
@@ -1135,7 +1131,7 @@ namespace Private {
   }
 
   export async function toggleConsole(
-    tracker: WidgetTracker<JupyterGISWidget>
+    tracker: JupyterGISTracker
   ): Promise<void> {
     const current = tracker.currentWidget;
 

packages/base/src/panelview/model.ts

@@ -1,6 +1,7 @@
 import {
   IJupyterGISDoc,
   IJupyterGISModel,
+  IJupyterGISOutputWidget,
   IJupyterGISTracker,
   IJupyterGISWidget
 } from '@jupytergis/schema';
@@ -14,7 +15,10 @@ export class ControlPanelModel implements IControlPanelModel {
     this._documentChanged = this._tracker.currentChanged;
   }
 
-  get documentChanged(): ISignal<IJupyterGISTracker, IJupyterGISWidget | null> {
+  get documentChanged(): ISignal<
+    IJupyterGISTracker,
+    IJupyterGISWidget | IJupyterGISOutputWidget | null
+  > {
     return this._documentChanged;
   }
 
@@ -45,7 +49,7 @@ export class ControlPanelModel implements IControlPanelModel {
   private readonly _tracker: IJupyterGISTracker;
   private _documentChanged: ISignal<
     IJupyterGISTracker,
-    IJupyterGISWidget | null
+    IJupyterGISWidget | IJupyterGISOutputWidget | null
   >;
 }
 

packages/base/src/types.ts

@@ -2,18 +2,29 @@ import {
   IDict,
   IJupyterGISDoc,
   IJupyterGISModel,
+  IJupyterGISOutputWidget,
   IJupyterGISTracker,
   IJupyterGISWidget
 } from '@jupytergis/schema';
+import { WidgetTracker } from '@jupyterlab/apputils';
 import { ISignal } from '@lumino/signaling';
 import { Map } from 'ol';
 
+import { JupyterGISOutputWidget, JupyterGISWidget } from './widget';
+
 export { IDict };
 export type ValueOf<T> = T[keyof T];
 
+export type JupyterGISTracker = WidgetTracker<
+  JupyterGISWidget | JupyterGISOutputWidget
+>;
+
 export interface IControlPanelModel {
   disconnect(f: any): void;
-  documentChanged: ISignal<IJupyterGISTracker, IJupyterGISWidget | null>;
+  documentChanged: ISignal<
+    IJupyterGISTracker,
+    IJupyterGISWidget | IJupyterGISOutputWidget | null
+  >;
   filePath: string | undefined;
   jGISModel: IJupyterGISModel | undefined;
   sharedModel: IJupyterGISDoc | undefined;

packages/base/src/widget.ts

@@ -1,12 +1,16 @@
-import { JSONValue } from '@lumino/coreutils';
-import { ISignal, Signal } from '@lumino/signaling';
-import { SplitPanel } from '@lumino/widgets';
-
+import { MainAreaWidget } from '@jupyterlab/apputils';
 import { ConsolePanel, IConsoleTracker } from '@jupyterlab/console';
 import { DocumentWidget } from '@jupyterlab/docregistry';
 import { IObservableMap, ObservableMap } from '@jupyterlab/observables';
-
-import { IJupyterGISModel, IJupyterGISWidget } from '@jupytergis/schema';
+import { JSONValue } from '@lumino/coreutils';
+import { ISignal, Signal } from '@lumino/signaling';
+import { SplitPanel } from '@lumino/widgets';
+import {
+  IJupyterGISModel,
+  IJupyterGISWidgetContext,
+  IJupyterGISOutputWidget,
+  IJupyterGISWidget
+} from '@jupytergis/schema';
 
 import { JupyterGISMainViewPanel } from './mainview';
 import { MainViewModel } from './mainview/mainviewmodel';
@@ -35,6 +39,28 @@ export class JupyterGISWidget
   };
 }
 
+/**
+ * A main area widget designed to be used as Notebook cell output widget, to ease the
+ * integration of toolbar and tracking.
+ */
+export class JupyterGISOutputWidget
+  extends MainAreaWidget<JupyterGISPanel>
+  implements IJupyterGISOutputWidget
+{
+  constructor(options: JupyterGISOutputWidget.IOptions) {
+    super(options);
+    this.context = options.context;
+  }
+
+  readonly context: IJupyterGISWidgetContext;
+}
+
+export namespace JupyterGISOutputWidget {
+  export interface IOptions extends MainAreaWidget.IOptions<JupyterGISPanel> {
+    context: IJupyterGISWidgetContext;
+  }
+}
+
 export class JupyterGISPanel extends SplitPanel {
   constructor(options: JupyterGISPanel.IOptions) {
     super({ orientation: 'vertical', spacing: 0 });

packages/schema/src/interfaces.ts

@@ -12,7 +12,7 @@ import { DocumentRegistry, IDocumentWidget } from '@jupyterlab/docregistry';
 import { Contents, User } from '@jupyterlab/services';
 import { JSONObject } from '@lumino/coreutils';
 import { ISignal, Signal } from '@lumino/signaling';
-import { SplitPanel } from '@lumino/widgets';
+import { SplitPanel, Widget } from '@lumino/widgets';
 
 import {
   IJGISContent,
@@ -228,7 +228,13 @@ export interface IJupyterGISWidgetContext {
   path: string;
 }
 
-export type IJupyterGISTracker = IWidgetTracker<IJupyterGISWidget>;
+export interface IJupyterGISOutputWidget extends Widget {
+  context: IJupyterGISWidgetContext;
+}
+
+export type IJupyterGISTracker = IWidgetTracker<
+  IJupyterGISWidget | IJupyterGISOutputWidget
+>;
 
 export interface IJGISFormSchemaRegistry {
   /**

python/jupytergis_core/src/plugin.ts

@@ -1,4 +1,8 @@
-import { AnnotationModel, JupyterGISWidget } from '@jupytergis/base';
+import {
+  AnnotationModel,
+  JupyterGISOutputWidget,
+  JupyterGISWidget
+} from '@jupytergis/base';
 import {
   IAnnotationModel,
   IAnnotationToken,
@@ -37,7 +41,9 @@ export const trackerPlugin: JupyterFrontEndPlugin<IJupyterGISTracker> = {
     translator: ITranslator,
     mainMenu?: IMainMenu
   ): IJupyterGISTracker => {
-    const tracker = new WidgetTracker<JupyterGISWidget>({
+    const tracker = new WidgetTracker<
+      JupyterGISWidget | JupyterGISOutputWidget
+    >({
       namespace: NAME_SPACE
     });
     console.log('jupytergis:core:tracker is activated!');

python/jupytergis_lab/src/notebookrenderer.ts

@@ -1,12 +1,24 @@
 import { ICollaborativeDrive } from '@jupyter/collaborative-drive';
-import { JupyterGISPanel } from '@jupytergis/base';
-import { JupyterGISModel, IJupyterGISDoc } from '@jupytergis/schema';
-
+import {
+  JupyterGISOutputWidget,
+  JupyterGISPanel,
+  JupyterGISTracker,
+  ToolbarWidget
+} from '@jupytergis/base';
+import {
+  IJGISExternalCommandRegistry,
+  IJGISExternalCommandRegistryToken,
+  IJupyterGISDoc,
+  IJupyterGISDocTracker,
+  IJupyterGISWidgetContext,
+  JupyterGISModel
+} from '@jupytergis/schema';
 import {
   JupyterFrontEnd,
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
 import { Contents } from '@jupyterlab/services';
+import { CommandRegistry } from '@lumino/commands';
 import { MessageLoop } from '@lumino/messaging';
 import { Panel, Widget } from '@lumino/widgets';
 import * as Y from 'yjs';
@@ -31,14 +43,37 @@ export class YJupyterGISModel extends JupyterYModel {
 }
 
 export class YJupyterGISLuminoWidget extends Panel {
-  constructor(options: { model: JupyterGISModel }) {
+  constructor(options: {
+    commands: CommandRegistry;
+    model: JupyterGISModel;
+    externalCommands: IJGISExternalCommandRegistry;
+  }) {
     super();
-
+    const { commands, model, externalCommands } = options;
     this.addClass(CLASS_NAME);
-    this._jgisWidget = new JupyterGISPanel(options);
+    const content = new JupyterGISPanel({ model });
+    const toolbar = new ToolbarWidget({
+      commands,
+      model,
+      externalCommands: externalCommands.getCommands()
+    });
+    const context: IJupyterGISWidgetContext = {
+      model,
+      path: model.filePath
+    };
+    this._jgisWidget = new JupyterGISOutputWidget({
+      context,
+      content,
+      toolbar
+    });
+
     this.addWidget(this._jgisWidget);
   }
 
+  get jgisWidget(): JupyterGISOutputWidget {
+    return this._jgisWidget;
+  }
+
   onResize = (): void => {
     if (this._jgisWidget) {
       MessageLoop.sendMessage(
@@ -48,15 +83,22 @@ export class YJupyterGISLuminoWidget extends Panel {
     }
   };
 
-  private _jgisWidget: JupyterGISPanel;
+  private _jgisWidget: JupyterGISOutputWidget;
 }
 
 export const notebookRendererPlugin: JupyterFrontEndPlugin<void> = {
   id: 'jupytergis:yjswidget-plugin',
   autoStart: true,
-  optional: [IJupyterYWidgetManager, ICollaborativeDrive],
+  optional: [
+    IJGISExternalCommandRegistryToken,
+    IJupyterGISDocTracker,
+    IJupyterYWidgetManager,
+    ICollaborativeDrive
+  ],
   activate: (
     app: JupyterFrontEnd,
+    externalCommandRegistry: IJGISExternalCommandRegistry,
+    jgisTracker: JupyterGISTracker,
     yWidgetManager?: IJupyterYWidgetManager,
     drive?: ICollaborativeDrive
   ): void => {
@@ -75,7 +117,6 @@ export const notebookRendererPlugin: JupyterFrontEndPlugin<void> = {
         const { path, format, contentType } = commMetadata;
 
         const fileFormat = format as Contents.FileFormat;
-
         const sharedModel = drive!.sharedModelFactory.createNew({
           path,
           format: fileFormat,
@@ -85,7 +126,24 @@ export const notebookRendererPlugin: JupyterFrontEndPlugin<void> = {
         this.jupyterGISModel = new JupyterGISModel({
           sharedModel: sharedModel as IJupyterGISDoc
         });
-
+        const onchange = (_: any, args: any) => {
+          if (args.stateChange) {
+            args.stateChange.forEach((change: any) => {
+              if (change.name === 'path') {
+                this.jupyterGISModel.filePath = change.newValue;
+              }
+            });
+          }
+        };
+
+        this.jupyterGISModel.contentsManager = app.serviceManager.contents;
+        sharedModel.changed.connect(onchange);
+
+        if (sharedModel.getState('path')) {
+          this.jupyterGISModel.filePath = sharedModel.getState(
+            'path'
+          ) as string;
+        }
         return this.jupyterGISModel.sharedModel.ydoc;
       }
     }
@@ -96,10 +154,12 @@ export const notebookRendererPlugin: JupyterFrontEndPlugin<void> = {
         this.node = node;
 
         const widget = new YJupyterGISLuminoWidget({
-          model: yModel.jupyterGISModel
+          commands: app.commands,
+          model: yModel.jupyterGISModel,
+          externalCommands: externalCommandRegistry
         });
         // Widget.attach(widget, node);
-
+        jgisTracker.add(widget.jgisWidget);
         MessageLoop.sendMessage(widget, Widget.Msg.BeforeAttach);
         node.appendChild(widget.node);
         MessageLoop.sendMessage(widget, Widget.Msg.AfterAttach);