Proposal for Deployed Dashboards Enhancement Using Drag & Drop Functionality

assets/css/js_interop.css

@@ -286,8 +286,60 @@ solely client-side operations.
   @apply hidden;
 }
 
+[data-el-session][data-js-view^="canvas"]
+  ~ #app-settings-modal
+  [data-el-app-settings-enable-canvas-button] {
+  @apply hidden;
+}
+
+[data-el-session]:not([data-js-view="canvas-popped-out"])
+  ~ #app-settings-modal
+  [data-el-app-settings-popin-canvas-button] {
+  @apply hidden;
+}
+
 /* === 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 +381,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/app_canvas.js

@@ -0,0 +1,36 @@
+import "gridstack/dist/gridstack.min.css";
+import { GridStack } from "gridstack";
+
+/**
+ * A hook for creating app dashboard.
+ */
+const AppCanvas = {
+  mounted() {
+    const self = this;
+
+    const options = {
+      staticGrid: true,
+      float: true,
+      margin: 0,
+      cellHeight: "4rem",
+    };
+
+    this.grid = GridStack.init(options, this.el);
+
+    this.handleEvent("init", ({ payload }) => {
+      const grid_items = Object.entries(payload).map(([id, value]) => ({
+        id,
+        ...value,
+      }));
+      this.grid.load(grid_items);
+      console.log(this.grid.el.children);
+      Array.from(this.grid.el.children).forEach((item) => {
+        const output_id = `[id^=outputs-${item.id}]`;
+        const output_el = document.querySelector(output_id);
+        item.firstChild.appendChild(output_el);
+      });
+    });
+  },
+};
+
+export default AppCanvas;

assets/js/hooks/canvas.js

@@ -0,0 +1,77 @@
+import { getAttributeOrThrow, parseInteger } from "../lib/attribute";
+import { globalPubSub } from "../lib/pub_sub";
+import "gridstack/dist/gridstack.min.css";
+import { GridStack } from "gridstack";
+
+/**
+ * A hook for creating a canvas with gridstackjs.
+ */
+const Canvas = {
+  mounted() {
+    this.props = this.getProps();
+    console.log("Gridstack mounted");
+    const self = this;
+
+    const options = {
+      styleInHead: true,
+      float: true,
+      resizable: { handles: "all" },
+      margin: 0,
+      cellHeight: "4rem",
+    };
+
+    this.grid = GridStack.init(options, this.el);
+
+    this.handleEvent("reload", ({ payload }) => {
+      const grid_items = Object.entries(payload).map(([id, value]) => ({
+        id,
+        ...value,
+      }));
+      this.grid.load(grid_items);
+      Array.from(this.grid.el.children).forEach((item) => {
+        console.log(item.attributes);
+        const output_id = `[id^=outputs-${item.attributes["gs-id"].value}]`;
+        const output_el = document.querySelector(output_id);
+        item.firstChild.appendChild(output_el);
+      });
+    });
+
+    this.grid.on("change", function (event, items) {
+      console.log("ITEMS changed: ", 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.pushEventTo(self.props.phxTarget, "items_changed", new_items);
+      self.repositionIframe();
+    });
+
+    this.grid.on("removed", (event, items) => {
+      console.log("REMOVED", event);
+    });
+
+    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 {
+      phxTarget: getAttributeOrThrow(this.el, "data-phx-target", parseInteger),
+    };
+  },
+  repositionIframe() {
+    globalPubSub.broadcast("js_views", { type: "reposition" });
+  },
+};
+
+export default Canvas;

assets/js/hooks/index.js

@@ -1,5 +1,7 @@
 import AppAuth from "./app_auth";
+import AppCanvas from "./app_canvas";
 import AudioInput from "./audio_input";
+import Canvas from "./canvas";
 import Cell from "./cell";
 import CellEditor from "./cell_editor";
 import Dropzone from "./dropzone";
@@ -13,6 +15,7 @@ import ImageOutput from "./image_output";
 import JSView from "./js_view";
 import KeyboardControl from "./keyboard_control";
 import MarkdownRenderer from "./markdown_renderer";
+import PopoutWindow from "./popout_window";
 import ScrollOnUpdate from "./scroll_on_update";
 import Session from "./session";
 import TextareaAutosize from "./textarea_autosize";
@@ -24,7 +27,9 @@ import VirtualizedLines from "./virtualized_lines";
 
 export default {
   AppAuth,
+  AppCanvas,
   AudioInput,
+  Canvas,
   Cell,
   CellEditor,
   Dropzone,
@@ -38,6 +43,7 @@ export default {
   JSView,
   KeyboardControl,
   MarkdownRenderer,
+  PopoutWindow,
   ScrollOnUpdate,
   Session,
   TextareaAutosize,

assets/js/hooks/popout_window.js

@@ -0,0 +1,45 @@
+/**
+ * A hook for popped out windows.
+ */
+const PopoutWindow = {
+  mounted() {
+    this.props = this.getProps();
+    console.log("PopoutWindow mounted");
+    const self = this;
+
+    this.handleBeforeUnloadEvent = this.handleBeforeUnloadEvent.bind(this);
+    window.addEventListener("beforeunload", this.handleBeforeUnloadEvent);
+    this.getElement("canvas-close-button").addEventListener("click", (event) =>
+      this.handleCanvasCloseClick()
+    );
+    this.getElement("canvas-popin-button").addEventListener("click", (event) =>
+      this.handleCanvasPopinClick()
+    );
+  },
+  updated() {
+    this.props = this.getProps();
+    console.log("PopoutWindow updated");
+  },
+  getProps() {
+    return {};
+  },
+  handleBeforeUnloadEvent(event) {
+    this.sendToParent("canvas_popin_clicked");
+  },
+  handleCanvasCloseClick() {
+    window.removeEventListener("beforeunload", this.handleBeforeUnloadEvent);
+    this.sendToParent("canvas_close_clicked");
+  },
+  handleCanvasPopinClick() {
+    window.removeEventListener("beforeunload", this.handleBeforeUnloadEvent);
+    this.sendToParent("canvas_popin_clicked");
+  },
+  getElement(name) {
+    return document.querySelector(`[data-el-${name}]`);
+  },
+  sendToParent(message) {
+    window.opener.postMessage(message, window.location.origin);
+  },
+};
+
+export default PopoutWindow;