Improve drag & drop from notebook

packages/jupyterlab-gridstack/package.json

@@ -43,8 +43,8 @@
     "watch:src": "tsc -w"
   },
   "dependencies": {
-    "@jupyter-widgets/base": "^4.0.0-alpha.2",
-    "@jupyter-widgets/jupyterlab-manager": "^3.0.0-alpha.2",
+    "@jupyter-widgets/base": "^4.0.0",
+    "@jupyter-widgets/jupyterlab-manager": "^3.0.0",
     "@jupyterlab/application": "^3.0.0",
     "@jupyterlab/apputils": "^3.0.0",
     "@jupyterlab/cells": "^3.0.0",

packages/jupyterlab-gridstack/src/editor/gridstack/layout.ts

@@ -6,12 +6,7 @@ import { Signal, ISignal } from '@lumino/signaling';
 
 import { Message, MessageLoop } from '@lumino/messaging';
 
-import {
-  GridStack,
-  GridHTMLElement,
-  GridStackNode,
-  GridItemHTMLElement
-} from 'gridstack';
+import { GridStack, GridStackNode, GridItemHTMLElement } from 'gridstack';
 
 import 'gridstack/dist/gridstack.css';
 
@@ -36,6 +31,11 @@ export class GridStackLayout extends Layout {
     this._cellHeight = info.defaultCellHeight;
     this._columns = info.maxColumns;
 
+    this._helperMessage = document.createElement('div');
+    this._helperMessage.appendChild(document.createElement('p')).textContent =
+      'Drag and drop cells here to start building the dashboard.';
+    this._helperMessage.className = 'jp-grid-helper';
+
     this._gridHost = document.createElement('div');
     this._gridHost.className = 'grid-stack';
 
@@ -60,14 +60,20 @@ export class GridStackLayout extends Layout {
 
     this._grid.on(
       'change',
-      (event: Event, items: GridHTMLElement | GridStackNode[] | undefined) => {
+      (
+        event: Event,
+        items?: GridItemHTMLElement | GridStackNode | GridStackNode[]
+      ) => {
         this._onChange(event, items as GridStackNode[]);
       }
     );
 
     this._grid.on(
       'removed',
-      (event: Event, items: GridHTMLElement | GridStackNode[] | undefined) => {
+      (
+        event: Event,
+        items?: GridItemHTMLElement | GridStackNode | GridStackNode[]
+      ) => {
         if ((items as GridStackNode[]).length <= 1) {
           this._onRemoved(event, items as GridStackNode[]);
         }
@@ -97,6 +103,9 @@ export class GridStackLayout extends Layout {
   init(): void {
     super.init();
     this.parent!.node.appendChild(this._gridHost);
+    if (this._gridItems.length === 0) {
+      this._gridHost.insertAdjacentElement('beforebegin', this._helperMessage);
+    }
     // fake window resize event to resize bqplot
     window.dispatchEvent(new Event('resize'));
   }
@@ -206,6 +215,13 @@ export class GridStackLayout extends Layout {
     }
   }
 
+  /**
+   * Helper to get access to underlying GridStack object
+   */
+  get grid(): GridStack {
+    return this._grid;
+  }
+
   /**
    * Get the list of `GridStackItem` (Lumino widgets).
    */
@@ -243,9 +259,14 @@ export class GridStackLayout extends Layout {
 
     this._gridItems.push(item);
 
+    if (this._gridItems.length === 1) {
+      this.parent!.node.removeChild(this._helperMessage);
+    }
+
     MessageLoop.sendMessage(item, Widget.Msg.BeforeAttach);
     this._grid.addWidget(item.node, options);
     MessageLoop.sendMessage(item, Widget.Msg.AfterAttach);
+    this.updateGridItem(id, info);
   }
 
   /**
@@ -278,6 +299,10 @@ export class GridStackLayout extends Layout {
       this._gridItems = this._gridItems.filter(obj => obj.cellId !== id);
       this._grid.removeWidget(item, true, false);
     }
+
+    if (this._gridItems.length === 0) {
+      this._gridHost.insertAdjacentElement('beforebegin', this._helperMessage);
+    }
   }
 
   /**
@@ -310,4 +335,5 @@ export class GridStackLayout extends Layout {
   private _grid: GridStack;
   private _gridItems: GridStackItem[] = [];
   private _gridItemChanged = new Signal<this, GridStackNode[]>(this);
+  private _helperMessage: HTMLElement;
 }

packages/jupyterlab-gridstack/src/editor/gridstack/widget.ts

@@ -46,6 +46,13 @@ export class GridStackWidget extends Widget {
     });
   }
 
+  /**
+   * Update the layout to reclaim any empty space
+   */
+  compact(): void {
+    this.layout.grid.compact();
+  }
+
   /**
    * Dispose of the resources held by the widget.
    */
@@ -272,8 +279,10 @@ export class GridStackWidget extends Widget {
    * Handle the `'lm-dragenter'` event for the widget.
    */
   private _evtDragEnter(event: IDragEvent): void {
-    event.preventDefault();
-    event.stopPropagation();
+    if (this._isDroppable(event)) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
   }
 
   /**
@@ -316,6 +325,17 @@ export class GridStackWidget extends Widget {
       if (!widget) {
         return;
       }
+      const width = this.layout.columns;
+      let height = 1;
+      if (widget!.model.type === 'code') {
+        height = Math.ceil(
+          (widget!.node.scrollHeight - widget!.inputArea.node.scrollHeight) /
+            this.layout.cellHeight
+        );
+      } else {
+        height = Math.ceil(widget!.node.scrollHeight / this.layout.cellHeight);
+      }
+
       const items = this.layout.gridItems;
       const item = items?.find(
         value => value.gridstackNode?.id === widget?.model.id
@@ -342,6 +362,8 @@ export class GridStackWidget extends Widget {
           info.hidden = false;
           info.col = col;
           info.row = row;
+          info.width = width;
+          info.height = height;
           this._model.setCellInfo(widget.model.id, info);
           const item = this._model.createCell(widget.model);
           this.layout.addGridItem(widget.model.id, item, info);
@@ -352,6 +374,8 @@ export class GridStackWidget extends Widget {
           info.hidden = false;
           info.col = col;
           info.row = row;
+          info.width = width;
+          info.height = height;
           this._model.setCellInfo(widget.model.id, info);
           const item = this._model.createCell(widget.model);
           this.layout.addGridItem(widget.model.id, item, info);
@@ -375,6 +399,53 @@ export class GridStackWidget extends Widget {
     this.removeClass('pr-DropTarget');
   }
 
+  private _isDroppable(event: IDragEvent): boolean {
+    if (event.proposedAction !== 'copy') {
+      return false;
+    }
+
+    if (event.source.activeCell instanceof Cell) {
+      const widget = (event.source.parent as NotebookPanel).content.activeCell;
+      if (!widget) {
+        return false;
+      }
+      const items = this.layout.gridItems;
+      const item = items?.find(
+        value => value.gridstackNode?.id === widget?.model.id
+      );
+      const info = this._model.getCellInfo(widget.model.id);
+
+      if (!item && info?.hidden) {
+        if (
+          widget.model.type === 'code' &&
+          (widget.model as CodeCellModel).executionCount &&
+          (widget.model as CodeCellModel).outputs.length !== 0
+        ) {
+          const outputs = (widget.model as CodeCellModel).outputs;
+          for (let i = 0; i < outputs.length; i++) {
+            if (outputs.get(i).type === 'error') {
+              return false;
+            }
+          }
+          return true;
+        } else if (
+          widget.model.type !== 'code' &&
+          widget.model.value.text.length !== 0
+        ) {
+          return true;
+        } else {
+          return false;
+        }
+      } else if (item && info) {
+        return true;
+      } else if (!info) {
+        return false;
+      }
+    }
+
+    return false;
+  }
+
   private _model: GridStackModel;
   public layout: GridStackLayout;
 }

packages/jupyterlab-gridstack/src/editor/toolbar/compact.tsx

@@ -0,0 +1,35 @@
+import { ReactWidget, ToolbarButtonComponent } from '@jupyterlab/apputils';
+
+import * as React from 'react';
+
+import { compactIcon } from '../../icons';
+
+import { GridStackWidget } from '../gridstack/widget';
+
+import { VoilaGridStackPanel } from '../panel';
+
+/**
+ * A toolbar widget to compact the dashboard on the top left corner.
+ */
+export default class Compact extends ReactWidget {
+  constructor(panel: VoilaGridStackPanel) {
+    super();
+    this._panel = panel;
+  }
+
+  render(): JSX.Element {
+    const onClick = (): void => {
+      (this._panel?.widgets[0] as GridStackWidget)?.compact();
+    };
+
+    return (
+      <ToolbarButtonComponent
+        icon={compactIcon}
+        onClick={onClick}
+        tooltip={'Compact the grid towards the top left corner'}
+      />
+    );
+  }
+
+  private _panel: VoilaGridStackPanel;
+}

packages/jupyterlab-gridstack/src/editor/widget.ts

@@ -8,6 +8,8 @@ import { Token } from '@lumino/coreutils';
 
 import { VoilaGridStackPanel } from './panel';
 
+import Compact from './toolbar/compact';
+
 import Save from './toolbar/save';
 
 import Edit from './toolbar/edit';
@@ -39,6 +41,7 @@ export class VoilaGridStackWidget extends DocumentWidget<
     // Adding the buttons to the widget toolbar
     this.toolbar.addItem('save', new Save(this.content));
     this.toolbar.addItem('edit', new Edit(this.content));
+    this.toolbar.addItem('compact', new Compact(this.content));
     this.toolbar.addItem('voila', new Voila(this.context.path));
   }
 }

packages/jupyterlab-gridstack/src/icons.ts

@@ -1,9 +1,15 @@
 import { LabIcon } from '@jupyterlab/ui-components';
 
 // icon svg import statements
-import pullRequest from '../style/icons/dashboard.svg';
+import compact from '../style/icons/compact.svg';
+import dashboard from '../style/icons/dashboard.svg';
+
+export const compactIcon = new LabIcon({
+  name: '@voila-dashboards/jupyterlab-gridstack:icon-compact',
+  svgstr: compact
+});
 
 export const dashboardIcon = new LabIcon({
   name: '@voila-dashboards/jupyterlab-gridstack:icon-dashboard',
-  svgstr: pullRequest
+  svgstr: dashboard
 });

packages/jupyterlab-gridstack/style/index.css

@@ -3,10 +3,19 @@
 .grid-editor {
   width: 100%;
   height: 100%;
-  overflow: scroll;
+  overflow: auto;
   background-color: var(--jp-layout-color2);
 }
 
+.grid-editor .jp-grid-helper {
+  width: 100%;
+  margin-top: 10px;
+  text-align: center;
+  color: var(--jp-ui-font-color2);
+  position: absolute;
+  top: 0px;
+}
+
 .grid-stack {
   background-image: linear-gradient(
       var(--jp-layout-color3) 1px,