preliminary single metadata dashboard work (EXPERIMENTAL)

Author: cameron-toy

src/commands.ts

@@ -19,4 +19,6 @@ export namespace CommandIDs {
   export const startFullscreen = 'dashboard:start-fullscreen';
   export const createNew = 'dashboard:create-new';
   export const setTileSize = 'dashboard:set-tile-size';
+  export const saveToMetadata = 'dashboard:save-to-metadata';
+  export const openFromMetadata = 'dashboard:open-from-metadata';
 }

src/dashboard.tsx

@@ -2,6 +2,8 @@ import { NotebookPanel } from '@jupyterlab/notebook';
 
 import { CodeCell, MarkdownCell, Cell } from '@jupyterlab/cells';
 
+import { filter, map, toArray, ArrayExt } from '@lumino/algorithm';
+
 import * as React from 'react';
 
 import {
@@ -10,6 +12,7 @@ import {
   IWidgetTracker,
   Toolbar,
   ReactWidget,
+  // MainAreaWidget,
 } from '@jupyterlab/apputils';
 
 import { CommandRegistry } from '@lumino/commands';
@@ -28,7 +31,7 @@ import { DashboardWidget } from './widget';
 
 import { Widgetstore } from './widgetstore';
 
-import { addCellId, addNotebookId } from './utils';
+import { addCellId, addNotebookId, getNotebookById, getCellId, updateMetadata } from './utils';
 
 import {
   DocumentWidget,
@@ -70,9 +73,11 @@ export class Dashboard extends Widget {
   constructor(options: Dashboard.IOptions) {
     super(options);
 
-    const { outputTracker, model, context } = options;
+    const { outputTracker, model } = options;
     this._model = model;
-    this._context = context;
+    if (options.context !== undefined) {
+      this._context = options.context;
+    }
     const { widgetstore, mode } = model;
 
     this.layout = new DashboardLayout({
@@ -349,6 +354,55 @@ export class Dashboard extends Widget {
     return (this.layout as DashboardLayout).createWidget(info, fit);
   }
 
+  saveToNotebookMetadata() {
+    // Get a list of all notebookIds used in the dashboard.
+    const widgets = toArray(
+      filter(
+        this.model.widgetstore.getWidgets(),
+        (widget) => widget.widgetId && !widget.removed
+      )
+    );
+
+    const notebookIds = toArray(
+      map(
+        widgets,
+        (record) => record.notebookId
+      )
+    );
+
+    if (!notebookIds.every((v) => v === notebookIds[0])) {
+      console.log(notebookIds);
+      throw new Error('Only single notebook dashboards can be saved to metadata.');
+    }
+
+    const notebookId = notebookIds[0];
+    const notebookTracker = this.model.notebookTracker;
+    const notebook = getNotebookById(notebookId, notebookTracker);
+    updateMetadata(notebook, { hasDashboard: true });
+
+    const cells = notebook.content.widgets;
+
+    for (let widget of widgets) {
+      let { pos, cellId } = widget;
+
+      let cell = ArrayExt.findFirstValue(
+        cells,
+        (cell) => getCellId(cell) === cellId
+      );
+
+      // let output = find(
+      //   this.layout,
+      //   (widget) => widget.id === widgetId
+      // );
+
+      if (cell !== undefined) {
+        updateMetadata(cell, { pos });
+      }
+    }
+
+    notebook.context.save();
+  }
+
   get model(): IDashboardModel {
     return this._model;
   }
@@ -394,15 +448,28 @@ export namespace Dashboard {
 
     model: IDashboardModel;
 
-    context: DocumentRegistry.IContext<DocumentRegistry.IModel>;
+    context?: DocumentRegistry.IContext<DocumentRegistry.IModel>;
   }
 }
 
+// export class SingleNotebookDashboard extends MainAreaWidget {
+//   constructor(options: SingleNotebookDashboard.IOptions) {
+
+//   }
+// }
+
+// export namespace SingleNotebookDashboard {
+//   export interface IOptions {
+
+//   }
+// }
+
 export class DashboardDocument extends DocumentWidget<Dashboard> {
   constructor(options: DashboardDocument.IOptions) {
     let { content, reveal } = options;
     const { context, commandRegistry } = options;
     const model = context.model as DashboardModel;
+    model.path = context.path;
     content = content || new Dashboard({ ...options, model, context });
     reveal = Promise.all([reveal, context.ready]);
     super({
@@ -473,7 +540,7 @@ export namespace DashboardDocument {
     name?: string;
 
     /**
-     * Dashboard canvas width (default is 1280).
+     * Optional widgetstore to restore from.
      */
     store?: Widgetstore;
 

src/drag.ts

@@ -137,8 +137,8 @@ export class Drag implements IDisposable {
     this.proposedAction = options.proposedAction || 'copy';
     this.supportedActions = options.supportedActions || 'all';
     this.source = options.source || null;
-    this._widgetX = options.widgetX || 0;
-    this._widgetY = options.widgetY || 0;
+    this._dragAdjustX = options.dragAdjustX || 0;
+    this._dragAdjustY = options.dragAdjustY || 0;
   }
 
   /**
@@ -228,8 +228,8 @@ export class Drag implements IDisposable {
       return this._promise;
     }
 
-    this._deltaX = this._widgetX - clientX;
-    this._deltaY = this._widgetY - clientY;
+    this._dragOffsetX = this._dragAdjustX - clientX;
+    this._dragOffsetY = this._dragAdjustY - clientY;
 
     // Install the document listeners for the drag object.
     this._addListeners();
@@ -295,7 +295,7 @@ export class Drag implements IDisposable {
 
     // Move the drag image to the specified client position. This is
     // performed *after* dispatching to prevent unnecessary reflows.
-    this._moveDragImage(event.clientX, event.clientY);
+    this.moveDragImage(event.clientX, event.clientY);
   }
 
   /**
@@ -416,8 +416,8 @@ export class Drag implements IDisposable {
 
     // Find the current indicated element at the given position.
     const currElems = document.elementsFromPoint(
-      event.clientX + this._deltaX,
-      event.clientY + this._deltaY
+      event.clientX + this._dragOffsetX,
+      event.clientY + this._dragOffsetY
     );
 
     let currElem = currElems.find((elem) =>
@@ -470,8 +470,8 @@ export class Drag implements IDisposable {
     const style = this.dragImage.style;
     style.pointerEvents = 'none';
     style.position = 'fixed';
-    style.top = `${clientY + this._deltaY}px`;
-    style.left = `${clientX + this._deltaX}px`;
+    style.top = `${clientY + this._dragOffsetY}px`;
+    style.left = `${clientX + this._dragOffsetX}px`;
     document.body.appendChild(this.dragImage);
   }
 
@@ -480,13 +480,13 @@ export class Drag implements IDisposable {
    *
    * This is a no-op if there is no drag image element.
    */
-  private _moveDragImage(clientX: number, clientY: number): void {
+  protected moveDragImage(clientX: number, clientY: number): void {
     if (!this.dragImage) {
       return;
     }
     const style = this.dragImage.style;
-    style.top = `${clientY + this._deltaY}px`;
-    style.left = `${clientX + this._deltaX}px`;
+    style.top = `${clientY + this.dragOffsetY}px`;
+    style.left = `${clientX + this.dragOffsetX}px`;
   }
 
   /**
@@ -607,12 +607,12 @@ export class Drag implements IDisposable {
     requestAnimationFrame(this._onScrollFrame);
   };
 
-  get deltaX(): number {
-    return this._deltaX;
+  get dragOffsetX(): number {
+    return this._dragOffsetX;
   }
 
-  get deltaY(): number {
-    return this._deltaY;
+  get dragOffsetY(): number {
+    return this._dragOffsetY;
   }
 
   private _disposed = false;
@@ -623,10 +623,10 @@ export class Drag implements IDisposable {
   private _promise: Promise<DropAction> | null = null;
   private _scrollTarget: Private.IScrollTarget | null = null;
   private _resolve: ((value: DropAction) => void) | null = null;
-  private _widgetX: number;
-  private _widgetY: number;
-  private _deltaX: number;
-  private _deltaY: number;
+  private _dragAdjustX: number;
+  private _dragAdjustY: number;
+  private _dragOffsetX: number;
+  private _dragOffsetY: number;
 }
 
 /**
@@ -702,14 +702,14 @@ export namespace Drag {
      *
      * The default value is 0.
      */
-    widgetX?: number;
+    dragAdjustX?: number;
 
     /**
      * How many pixels to offset the drag/image in the y direction.
      *
      * The default value is 0.
      */
-    widgetY?: number;
+    dragAdjustY?: number;
   }
 
   /**
@@ -842,8 +842,8 @@ namespace Private {
     drag: Drag
   ): IScrollTarget | null {
     // Look up the client mouse position.
-    const x = event.clientX + drag.deltaX;
-    const y = event.clientY + drag.deltaY;
+    const x = event.clientX + drag.dragOffsetX;
+    const y = event.clientY + drag.dragOffsetY;
 
     // Get the element under the mouse.
     let element: Element | null = document.elementFromPoint(x, y);
@@ -1199,10 +1199,10 @@ namespace Private {
       true,
       window,
       0,
-      event.screenX + drag.deltaX,
-      event.screenY + drag.deltaY,
-      event.clientX + drag.deltaX,
-      event.clientY + drag.deltaY,
+      event.screenX + drag.dragOffsetX,
+      event.screenY + drag.dragOffsetY,
+      event.clientX + drag.dragOffsetX,
+      event.clientY + drag.dragOffsetY,
       event.ctrlKey,
       event.altKey,
       event.shiftKey,