added ability to embed multiple metadata dashboards

Author: cameron-toy

src/dashboard.tsx

@@ -98,8 +98,8 @@ export class Dashboard extends Widget {
       outputTracker,
       model,
       mode,
-      width: options.dashboardWidth || Dashboard.DEFAULT_WIDTH,
-      height: options.dashboardHeight || Dashboard.DEFAULT_HEIGHT
+      width: options.dashboardWidth || window.innerWidth,
+      height: options.dashboardHeight || window.innerHeight
     });
 
     widgetstore.connectDashboard(this);
@@ -261,19 +261,21 @@ export class Dashboard extends Widget {
       return;
     }
 
+    // Changed to only "infinitely" scroll on the vertical
+
     const elem = this.node;
-    const rightEdge = elem.offsetWidth + elem.scrollLeft;
+    // const rightEdge = elem.offsetWidth + elem.scrollLeft;
     const bottomEdge = elem.offsetHeight + elem.scrollTop;
 
-    if (rightEdge >= model.width && rightEdge > this._oldRightEdge) {
-      model.width += 200;
-    }
+    // if (rightEdge >= model.width && rightEdge > this._oldRightEdge) {
+    //   model.width += 200;
+    // }
     if (bottomEdge >= model.height && bottomEdge > this._oldBottomEdge) {
-      model.height += 200;
+      model.height += (this.layout as DashboardLayout).tileSize;
     }
 
     this._oldBottomEdge = bottomEdge;
-    this._oldRightEdge = rightEdge;
+    // this._oldRightEdge = rightEdge;
   }
 
   /**
@@ -388,12 +390,10 @@ export class Dashboard extends Widget {
 
     if ((oldDashboardMetadata as Object).hasOwnProperty('views')) {
       const dashboardIds = Object.keys(oldDashboardMetadata.views);
-      if (dashboardIds.length != 1) {
-        throw new Error(
-          'Multiple dashboards are embedded--currently only a single embedded dashboard is supported.'
-        );
-      }
-      dashboardId = dashboardIds[0];
+      const names = new Map<string, string>(
+        dashboardIds.map(id => [oldDashboardMetadata.views[id].name, id])
+      );
+      dashboardId = names.get(name) || UUID.uuid4();
     } else {
       dashboardId = UUID.uuid4();
     }
@@ -456,7 +456,7 @@ export class Dashboard extends Widget {
 
   private _model: IDashboardModel;
   private _context: DocumentRegistry.IContext<DocumentRegistry.IModel>;
-  private _oldRightEdge = 0;
+  // private _oldRightEdge = 0;
   private _oldBottomEdge = 0;
 }
 
@@ -468,10 +468,6 @@ export namespace Dashboard {
 
   export type ScrollMode = 'infinite' | 'constrained';
 
-  export const DEFAULT_WIDTH = 1920;
-
-  export const DEFAULT_HEIGHT = 1080;
-
   export interface IOptions extends Widget.IOptions {
     /**
      * Tracker for child widgets.

src/index.ts

@@ -131,8 +131,8 @@ const extension: JupyterFrontEndPlugin<IDashboardTracker> = {
       const model = widget.content.model;
       // TODO: Make scrollMode changable in JL. Default 'infinite' for now.
       model.scrollMode = 'infinite';
-      model.width = Dashboard.DEFAULT_WIDTH;
-      model.height = Dashboard.DEFAULT_HEIGHT;
+      model.width = (widget.content.layout as DashboardLayout).width;
+      model.height = (widget.content.layout as DashboardLayout).height;
     });
 
     // Add commands to context menus.
@@ -442,8 +442,8 @@ function addCommands(
     label: 'Set Dashboard Dimensions',
     execute: async args => {
       const model = dashboardTracker.currentWidget.model;
-      const width = model.width ? model.width : Dashboard.DEFAULT_WIDTH;
-      const height = model.height ? model.height : Dashboard.DEFAULT_HEIGHT;
+      const width = model.width ? model.width : window.innerWidth;
+      const height = model.height ? model.height : window.innerHeight;
       await showDialog({
         title: 'Enter Dimensions',
         body: new Private.ResizeHandler(width, height),
@@ -458,14 +458,14 @@ function addCommands(
         }
         if (!newWidth) {
           if (!model.width) {
-            newWidth = Dashboard.DEFAULT_WIDTH;
+            newWidth = window.innerWidth;
           } else {
             newWidth = model.width;
           }
         }
         if (!newHeight) {
           if (!model.height) {
-            newHeight = Dashboard.DEFAULT_HEIGHT;
+            newHeight = window.innerHeight;
           } else {
             newHeight = model.height;
           }
@@ -543,9 +543,17 @@ function addCommands(
 
   commands.addCommand(CommandIDs.saveToMetadata, {
     label: 'Save Dashboard To Notebook Metadata',
-    execute: args => {
-      const dashboard = dashboardTracker.currentWidget;
-      dashboard.saveToNotebookMetadata();
+    execute: async args => {
+      
+      const name = await InputDialog.getText({
+        title: 'Dashboard name',
+        text: 'default'
+      });
+      if (name.value) {
+        const dashboard = dashboardTracker.currentWidget;
+        dashboard.saveToNotebookMetadata(name.value);
+      }
+
     }
   });
 
@@ -588,7 +596,7 @@ function addCommands(
 
   commands.addCommand(CommandIDs.openFromMetadata, {
     label: 'Open Metadata Dashboard',
-    execute: args => {
+    execute: async args => {
       const notebook = notebookTracker.currentWidget;
       const notebookMetadata = getMetadata(notebook);
       if (!('views' in notebookMetadata)) {
@@ -602,7 +610,20 @@ function addCommands(
           throw new Error(`Dashboard id ${dashboardId} doesn't exist in notebook ${notebookId}`);
         }
       } else {
-        dashboardId = Object.keys(notebookMetadata.views)[0]
+        const dashboardIds = Object.keys(notebookMetadata.views);
+        const nameMap = new Map<string, string>(
+          dashboardIds.map(id => [notebookMetadata.views[id].name, id])
+        );
+        const dashboardName = await InputDialog.getItem({
+          title: 'Select a Dashboard',
+          current: 0,
+          items: Array.from(nameMap.keys()),
+        });
+        if (dashboardName.value) {
+          dashboardId = nameMap.get(dashboardName.value);
+        } else {
+          return;
+        }
       }
 
       const dashboardView = notebookMetadata.views[dashboardId];

src/widget.ts

@@ -245,7 +245,12 @@ export class DashboardWidget extends Widget {
     const pos = this.pos;
     const oldPos = { ...pos };
 
-    const bumpDistance = event.altKey ? 1 : DashboardWidget.BUMP_DISTANCE;
+    let bumpDistance: number;
+    if (this._mode === 'grid-edit') {
+      bumpDistance = (this.parent.layout as DashboardLayout).tileSize
+    } else {
+      bumpDistance = event.altKey ? 1 : DashboardWidget.BUMP_DISTANCE;
+    }
 
     switch (event.keyCode) {
       // Left arrow key

style/base.css

@@ -4,6 +4,8 @@
 
 .pr-DashboardWidget {
   display: inline-flex;
+  align-items: flex-start;
+  justify-content: left;
 }
 
 .pr-DashboardWidget .pr-MarkdownOutput {
@@ -75,12 +77,11 @@
 }
 
 .pr-DashboardWidgetChild {
-  /* width: 100%;
-  height: 100%; */
+  max-width: 100%;
+  max-height: 100%;
   overflow: hidden;
   display: inline-flex;
-  align-items: center;
-  justify-content: center;
+  justify-content: left;
 }
 
 .pr-EditableWidget:focus .pr-Resizer {