Proposal for Deployed Dashboards Enhancement Using Drag & Drop Functionality

assets/css/js_interop.css

@@ -288,6 +288,46 @@ solely client-side operations.
 
 /* === Views === */
 
+[data-el-session]:not([data-js-view]) [data-el-view-deactivate-button] {
+  @apply hidden;
+}
+
+[data-el-session][data-js-view] [data-el-view-toggle="canvas"],
+[data-el-session][data-js-view] [data-el-view-toggle="code-zen"],
+[data-el-session][data-js-view] [data-el-view-toggle="presentation"] {
+  @apply pointer-events-none;
+}
+
+[data-el-session]:not([data-js-view="canvas"]) [data-el-canvas],
+[data-el-cell][data-el-js-cell-output-location-canvas]
+  [data-el-move-output-to-canvas-button],
+[data-el-cell]:not([data-el-js-cell-output-location-canvas])
+  [data-el-move-output-to-notebook-button],
+[data-el-session]:not([data-js-view^="canvas"]) [data-el-canvas-menu],
+[data-el-session]:not([data-js-view="canvas-popped-out"])
+  [data-el-canvas-popin-button],
+[data-el-session]:not([data-js-view="canvas"]) [data-el-canvas-popout-button],
+[data-el-session]:not([data-js-view="canvas"]) [data-el-canvas-close-button] {
+  @apply hidden;
+}
+
+[data-el-session][data-js-view="canvas"] [data-el-notebook-indicators] {
+  @apply fixed bottom-[0.4rem] right-1/2;
+}
+
+[data-el-session][data-js-view^="canvas"] [data-el-view-toggle="canvas"],
+[data-el-session][data-js-view^="canvas"]
+  [data-el-view-canvas-poppedout-button] {
+  @apply text-green-bright-400;
+}
+
+[data-el-session]:not([data-js-view="canvas-popped-out"])
+  [data-el-view-canvas-poppedout-button],
+[data-el-session][data-js-view="canvas-popped-out"]
+  [data-el-view-toggle="canvas"] {
+  @apply hidden;
+}
+
 [data-el-session][data-js-view="code-zen"] [data-el-section-headline],
 [data-el-session][data-js-view="code-zen"] [data-el-section-subheadline],
 [data-el-session][data-js-view="code-zen"]
@@ -329,12 +369,20 @@ solely client-side operations.
   @apply text-green-bright-400;
 }
 
-[data-el-session]:is([data-js-view="code-zen"], [data-js-view="presentation"])
+[data-el-session]:is(
+    [data-js-view^="canvas"],
+    [data-js-view="code-zen"],
+    [data-js-view="presentation"]
+  )
   [data-el-views-disabled] {
   @apply hidden;
 }
 
-[data-el-session]:not([data-js-view="code-zen"], [data-js-view="presentation"])
+[data-el-session]:not(
+    [data-js-view=^="canvas"],
+    [data-js-view="code-zen"],
+    [data-js-view="presentation"]
+  )
   [data-el-views-enabled] {
   @apply hidden;
 }

assets/js/hooks/cell.js

@@ -1,7 +1,11 @@
 import { getAttributeOrDefault, getAttributeOrThrow } from "../lib/attribute";
 import Markdown from "../lib/markdown";
 import { globalPubSub } from "../lib/pub_sub";
-import { md5Base64, smoothlyScrollToElement } from "../lib/utils";
+import {
+  md5Base64,
+  pushQueueEvaluationEvent,
+  smoothlyScrollToElement,
+} from "../lib/utils";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { isEvaluable } from "../lib/notebook";
 
@@ -165,7 +169,7 @@ const Cell = {
 
   handleCellEvent(event) {
     if (event.type === "dispatch_queue_evaluation") {
-      this.handleDispatchQueueEvaluation(event.dispatch);
+      this.handleDispatchQueueEvaluation(event.event);
     }
   },
 
@@ -376,15 +380,15 @@ const Cell = {
     }
   },
 
-  handleDispatchQueueEvaluation(dispatch) {
+  handleDispatchQueueEvaluation(event) {
     if (this.props.type === "smart" && this.props.smartCellJSViewRef) {
       // Ensure the smart cell UI is reflected on the server, before the evaluation
       globalPubSub.broadcast(`js_views:${this.props.smartCellJSViewRef}`, {
         type: "sync",
-        callback: dispatch,
+        callback: event,
       });
     } else {
-      dispatch();
+      pushQueueEvaluationEvent(this, event);
     }
   },
 

assets/js/hooks/gridstack.js

@@ -0,0 +1,97 @@
+import { globalPubSub } from "../lib/pub_sub";
+import "gridstack/dist/gridstack.min.css";
+import { GridStack } from "gridstack";
+
+/**
+ * A hook for creating app dashboard.
+ */
+const Gridstack = {
+  mounted() {
+    this.props = this.getProps();
+    console.log("Gridstack mounted");
+    const self = this;
+    this.visible = false;
+
+    if (this.props.externWindow) {
+      this.handleBeforeUnloadEvent = this.handleBeforeUnloadEvent.bind(this);
+      window.addEventListener("beforeunload", this.handleBeforeUnloadEvent);
+      this.getElement("canvas-popin-button").addEventListener(
+        "click",
+        (event) => this.handleCanvasPopinClick()
+      );
+    } else {
+      this.getElement("canvas-popout-button").addEventListener(
+        "click",
+        (event) => this.handleCanvasPopoutClick()
+      );
+    }
+
+    this.getElement("canvas-close-button").addEventListener("click", (event) =>
+      this.handleCanvasCloseClick()
+    );
+
+    const options = {
+      //acceptWidgets: true,
+      //removeable: true,
+      styleInHead: true,
+      float: true,
+      resizable: { handles: "all" },
+      margin: 0,
+      cellHeight: "4rem",
+    };
+
+    this.grid = GridStack.init(options, this.el);
+
+    this.grid.on("change", function (event, items) {
+      console.log(items);
+      let new_items = items.reduce((acc, item) => {
+        acc[item.id] = {
+          x: item.x,
+          y: item.y,
+          w: item.w,
+          h: item.h,
+        };
+        return acc;
+      }, {});
+      self.pushEvent("items_changed", new_items);
+      self.repositionIframe();
+    });
+
+    this.grid.on("drag", function (event, item) {
+      // TODO update iframe position when dragging
+      //self.repositionIframe();
+    });
+  },
+  updated() {
+    this.props = this.getProps();
+    console.log("Gridstack updated", this.grid);
+  },
+  getProps() {
+    return {
+      externWindow: this.el.hasAttribute("data-el-js-extern-window"),
+    };
+  },
+  repositionIframe() {
+    globalPubSub.broadcast("js_views", { type: "reposition" });
+  },
+  handleBeforeUnloadEvent(event) {
+    globalPubSub.broadcast("session", { type: "canvas_popin_clicked" });
+  },
+  handleCanvasCloseClick() {
+    window.removeEventListener("beforeunload", this.handleBeforeUnloadEvent);
+    globalPubSub.broadcast("session", { type: "canvas_close_clicked" });
+  },
+  handleCanvasPopinClick() {
+    window.removeEventListener("beforeunload", this.handleBeforeUnloadEvent);
+    globalPubSub.broadcast("session", { type: "canvas_popin_clicked" });
+    window.close();
+  },
+  handleCanvasPopoutClick() {
+    globalPubSub.broadcast("session", { type: "canvas_popout_clicked" });
+  },
+  getElement(name) {
+    return document.querySelector(`[data-el-${name}]`);
+  },
+};
+
+export default Gridstack;

assets/js/hooks/gridstack_static.js

@@ -0,0 +1,40 @@
+import "gridstack/dist/gridstack.min.css";
+import { GridStack } from "gridstack";
+
+/**
+ * A hook for creating app dashboard.
+ */
+const GridstackStatic = {
+  mounted() {
+    const self = this;
+
+    const options = {
+      staticGrid: true,
+      float: true,
+      margin: 0,
+      cellHeight: "4rem",
+    };
+
+    this.grid = GridStack.init(options, this.el);
+
+    this.handleEvent("load_layout", function ({ layout }) {
+      if (layout) {
+        self.grid.load(layout);
+        self.mountOutputs();
+      }
+    });
+  },
+  mountOutputs() {
+    const outputs = document.querySelectorAll("[data-el-output]");
+    for (let output of outputs) {
+      const item_content = this.el.querySelector(
+        `[gs-id="${output.parentNode.id}"] .grid-stack-item-content`
+      );
+      if (item_content) {
+        item_content.prepend(output);
+      }
+    }
+  },
+};
+
+export default GridstackStatic;

assets/js/hooks/index.js

@@ -6,6 +6,8 @@ import Dropzone from "./dropzone";
 import EditorSettings from "./editor_settings";
 import EmojiPicker from "./emoji_picker";
 import FocusOnUpdate from "./focus_on_update";
+import Gridstack from "./gridstack";
+import GridstackStatic from "./gridstack_static";
 import Headline from "./headline";
 import Highlight from "./highlight";
 import ImageInput from "./image_input";
@@ -31,6 +33,8 @@ export default {
   EditorSettings,
   EmojiPicker,
   FocusOnUpdate,
+  Gridstack,
+  GridstackStatic,
   Headline,
   Highlight,
   ImageInput,

assets/js/hooks/js_view.js

@@ -8,6 +8,7 @@ import {
   isElementVisibleInViewport,
   randomId,
   randomToken,
+  pushQueueEvaluationEvent,
 } from "../lib/utils";
 import { globalPubSub } from "../lib/pub_sub";
 import {
@@ -194,6 +195,7 @@ const JSView = {
       ),
       iframeUrl: getAttributeOrDefault(this.el, "data-iframe-url", null),
       timeoutMessage: getAttributeOrThrow(this.el, "data-timeout-message"),
+      outputLocation: getAttributeOrThrow(this.el, "data-output-location"),
     };
   },
 
@@ -327,7 +329,9 @@ const JSView = {
   },
 
   loadIframe() {
-    const iframesEl = document.querySelector(`[data-el-js-view-iframes]`);
+    const iframesEl = document.querySelector(
+      `[data-el-js-view-iframes]#js-view-iframes-${this.props.outputLocation}`
+    );
     initializeIframeSource(
       this.iframe,
       this.props.iframePort,
@@ -470,7 +474,7 @@ const JSView = {
 
   handleServerPong() {
     const callback = this.pongCallbackQueue.shift();
-    callback();
+    pushQueueEvaluationEvent(this, callback);
   },
 
   handleJSViewEvent(event) {