metadata dashboard improvements

Author: cameron-toy

.eslintrc.js

@@ -29,7 +29,7 @@ module.exports = {
       { avoidEscape: true, allowTemplateLiterals: false }
     ],
     curly: ['error', 'all'],
-    eqeqeq: 'error',
+    eqeqeq: ['error', 'smart'],
     'prefer-arrow-callback': 'error'
   }
 };

src/dashboard.tsx

@@ -2,7 +2,7 @@ import { NotebookPanel } from '@jupyterlab/notebook';
 
 import { CodeCell, MarkdownCell, Cell } from '@jupyterlab/cells';
 
-import { filter, map, toArray, ArrayExt } from '@lumino/algorithm';
+import { map, toArray, each } from '@lumino/algorithm';
 
 import * as React from 'react';
 
@@ -29,9 +29,15 @@ import { DashboardLayout } from './layout';
 
 import { DashboardWidget } from './widget';
 
-import { Widgetstore } from './widgetstore';
+import { WidgetPosition, Widgetstore } from './widgetstore';
 
-import { addCellId, addNotebookId, getNotebookById, getCellId, updateMetadata } from './utils';
+import {
+  addCellId,
+  addNotebookId,
+  getNotebookById,
+  getCellId,
+  updateMetadata,
+} from './utils';
 
 import {
   DocumentWidget,
@@ -46,17 +52,19 @@ import { CommandIDs } from './commands';
 
 import { HTMLSelect } from '@jupyterlab/ui-components';
 
+import { UUID } from '@lumino/coreutils';
+
 // HTML element classes
 
-const DASHBOARD_CLASS = 'pr-JupyterDashboard';
+export const DASHBOARD_CLASS = 'pr-JupyterDashboard';
 
-const DROP_TARGET_CLASS = 'pr-DropTarget';
+export const DROP_TARGET_CLASS = 'pr-DropTarget';
 
-const TOOLBAR_MODE_SWITCHER_CLASS = 'pr-ToolbarModeSwitcher';
+export const TOOLBAR_MODE_SWITCHER_CLASS = 'pr-ToolbarModeSwitcher';
 
-const TOOLBAR_SELECT_CLASS = 'pr-ToolbarSelector';
+export const TOOLBAR_SELECT_CLASS = 'pr-ToolbarSelector';
 
-const TOOLBAR_CLASS = 'pr-DashboardToolbar';
+export const TOOLBAR_CLASS = 'pr-DashboardToolbar';
 
 export const IDashboardTracker = new Token<IDashboardTracker>(
   'jupyterlab-interactive-dashboard-editor'
@@ -73,6 +81,8 @@ export class Dashboard extends Widget {
   constructor(options: Dashboard.IOptions) {
     super(options);
 
+    this.id = UUID.uuid4();
+
     const { outputTracker, model } = options;
     this._model = model;
     if (options.context !== undefined) {
@@ -243,7 +253,7 @@ export class Dashboard extends Widget {
 
   private _evtScroll(_event: Event): void {
     const model = this.model;
-    
+
     if (model.scrollMode !== 'infinite') {
       return;
     }
@@ -354,51 +364,39 @@ export class Dashboard extends Widget {
     return (this.layout as DashboardLayout).createWidget(info, fit);
   }
 
-  saveToNotebookMetadata() {
+  saveToNotebookMetadata(): void {
     // Get a list of all notebookIds used in the dashboard.
-    const widgets = toArray(
-      filter(
-        this.model.widgetstore.getWidgets(),
-        (widget) => widget.widgetId && !widget.removed
-      )
-    );
+    const widgets = toArray(this.model.widgetstore.getWidgets());
 
-    const notebookIds = toArray(
-      map(
-        widgets,
-        (record) => record.notebookId
-      )
-    );
+    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.');
+      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
-      // );
+    const widgetMap = new Map<string, WidgetPosition>(
+      widgets.map((widget) => [widget.cellId, widget.pos])
+    );
 
-      if (cell !== undefined) {
-        updateMetadata(cell, { pos });
+    each(cells, (cell) => {
+      const cellId = getCellId(cell);
+      const pos = widgetMap.get(cellId);
+      if (pos != null) {
+        updateMetadata(cell, { pos, hidden: false });
+      } else {
+        updateMetadata(cell, { hidden: true });
       }
-    }
+    });
 
     notebook.context.save();
   }
@@ -452,18 +450,6 @@ export namespace Dashboard {
   }
 }
 
-// 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;
@@ -483,7 +469,7 @@ export class DashboardDocument extends DocumentWidget<Dashboard> {
     this.toolbar.addClass(TOOLBAR_CLASS);
 
     const commands = commandRegistry;
-    const { save, undo, redo, cut, copy, paste, runOutput } = CommandIDs;
+    const { save, undo, redo, cut, copy, paste } = CommandIDs;
 
     const args = { toolbar: true, dashboardId: content.id };
 
@@ -505,15 +491,13 @@ export class DashboardDocument extends DocumentWidget<Dashboard> {
       paste,
       'Paste outputs from the clipboard'
     );
-    const runButton = makeToolbarButton(runOutput, 'Run the selected outputs');
 
     this.toolbar.addItem(save, saveButton);
     this.toolbar.addItem(undo, undoButton);
     this.toolbar.addItem(redo, redoButton);
     this.toolbar.addItem(cut, cutButton);
     this.toolbar.addItem(copy, copyButton);
     this.toolbar.addItem(paste, pasteButton);
-    this.toolbar.addItem(runOutput, runButton);
     this.toolbar.addItem('spacer', Toolbar.createSpacerItem());
     this.toolbar.addItem(
       'switchMode',
@@ -589,9 +573,9 @@ export namespace DashboardDocument {
           value={value}
           aria-label={'Mode'}
         >
-          <option value='present'>Present</option>
+          <option value="present">Present</option>
           {/* <option value="free-edit">Free Layout</option> */}
-          <option value='grid-edit'>Edit</option>
+          <option value="grid-edit">Edit</option>
         </HTMLSelect>
       );
     }

src/index.ts

@@ -27,7 +27,7 @@ import { IDocumentManager } from '@jupyterlab/docmanager';
 
 import { IMainMenu } from '@jupyterlab/mainmenu';
 
-import { Widget } from '@lumino/widgets';
+import { Widget, Menu } from '@lumino/widgets';
 
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 
@@ -49,7 +49,7 @@ import {
 
 import { CommandIDs } from './commands';
 
-import { ReadonlyJSONObject, UUID } from '@lumino/coreutils';
+import { ReadonlyJSONObject } from '@lumino/coreutils';
 
 import { DashboardLayout } from './layout';
 
@@ -69,7 +69,6 @@ const extension: JupyterFrontEndPlugin<IDashboardTracker> = {
     docManager: IDocumentManager,
     launcher: ILauncher
   ): IDashboardTracker => {
-
     // Tracker for Dashboard
     const dashboardTracker = new DashboardTracker({ namespace: 'dashboards' });
 
@@ -172,22 +171,26 @@ const extension: JupyterFrontEndPlugin<IDashboardTracker> = {
       rank: 5,
     });
 
-    app.contextMenu.addItem({
+    const experimentalMenu = new Menu({ commands: app.commands });
+    experimentalMenu.title.label = 'Experimental';
+
+    experimentalMenu.addItem({
       command: CommandIDs.saveToMetadata,
-      selector: '.pr-JupyterDashboard',
-      rank: 6,
     });
 
-    app.contextMenu.addItem({
+    experimentalMenu.addItem({
       command: CommandIDs.toggleInfiniteScroll,
-      selector: '.pr-JupyterDashboard',
-      rank: 7,
     });
 
-    app.contextMenu.addItem({
+    experimentalMenu.addItem({
       command: CommandIDs.trimDashboard,
+    });
+
+    app.contextMenu.addItem({
+      type: 'submenu',
+      submenu: experimentalMenu,
       selector: '.pr-JupyterDashboard',
-      rank: 8,
+      rank: 6,
     });
 
     app.contextMenu.addItem({
@@ -217,7 +220,7 @@ const extension: JupyterFrontEndPlugin<IDashboardTracker> = {
     app.contextMenu.addItem({
       command: CommandIDs.openFromMetadata,
       selector: '.jp-Notebook',
-      rank: 16
+      rank: 16,
     });
 
     // Add commands to key bindings
@@ -543,7 +546,7 @@ function addCommands(
     execute: (args) => {
       const dashboard = dashboardTracker.currentWidget;
       dashboard.saveToNotebookMetadata();
-    }
+    },
   });
 
   commands.addCommand(CommandIDs.createNew, {
@@ -591,18 +594,18 @@ function addCommands(
       const notebookId = notebookMetadata.id;
       const cells = notebook.content.widgets;
 
-      let widgetstore = new Widgetstore({ id: 0, notebookTracker });
+      const widgetstore = new Widgetstore({ id: 0, notebookTracker });
 
       widgetstore.startBatch();
 
-      for (let cell of cells) {
-        let metadata = getMetadata(cell);
-        if (metadata !== undefined && metadata.pos !== undefined) {
-          let widgetInfo: WidgetInfo = {
+      for (const cell of cells) {
+        const metadata = getMetadata(cell);
+        if (metadata !== undefined && !metadata.hidden) {
+          const widgetInfo: WidgetInfo = {
             widgetId: DashboardWidget.createDashboardWidgetId(),
             notebookId,
             cellId: metadata.id,
-            pos: metadata.pos
+            pos: metadata.pos,
           };
           widgetstore.addWidget(widgetInfo);
         }
@@ -617,10 +620,9 @@ function addCommands(
 
       const dashboard = new Dashboard({
         outputTracker,
-        model
+        model,
       });
 
-      dashboard.id = UUID.uuid4();
       dashboard.updateLayoutFromWidgetstore();
       dashboard.model.mode = 'present';
 
@@ -633,7 +635,7 @@ function addCommands(
         return metadata.hasDashboard;
       }
       return false;
-    }
+    },
   });
 
   commands.addCommand(CommandIDs.toggleWidgetMode, {
@@ -649,28 +651,29 @@ function addCommands(
       } else if (widget.mode === 'free-edit') {
         widget.mode = 'grid-edit';
       }
-    }
+    },
   });
 
   commands.addCommand(CommandIDs.toggleInfiniteScroll, {
     label: 'Infinite Scroll',
-    isToggled: (args) => dashboardTracker.currentWidget?.model.scrollMode === 'infinite',
+    isToggled: (args) =>
+      dashboardTracker.currentWidget?.model.scrollMode === 'infinite',
     execute: (args) => {
       const dashboard = dashboardTracker.currentWidget;
       if (dashboard.model.scrollMode === 'infinite') {
         dashboard.model.scrollMode = 'constrained';
       } else {
         dashboard.model.scrollMode = 'infinite';
       }
-    }
+    },
   });
 
   commands.addCommand(CommandIDs.trimDashboard, {
     label: 'Trim Dashboard',
     execute: (args) => {
       const dashboard = dashboardTracker.currentWidget;
       (dashboard.layout as DashboardLayout).trimDashboard();
-    }
+    },
   });
 }