improve frontend layout responsiveness

Geosyntec · Feb 1, 2024 · bbd41c9 · bbd41c9
1 parent b524a7f
commit bbd41c9
Show file tree

Hide file tree

Showing 15 changed files with 130 additions and 83 deletions.
diff --git a/nereid/nereid/static/frontend/src/css/styles.css b/nereid/nereid/static/frontend/src/css/styles.css
@@ -1,3 +1,9 @@
+/* Style overrides particularly for the graph editor */
+
+/* div {
+    box-shadow:inset 0px 0px 0px 1px black;
+} */
+
 .graph-editor path.link {
   fill: none;
   stroke: #222;

diff --git a/nereid/nereid/static/frontend/src/index.html b/nereid/nereid/static/frontend/src/index.html
@@ -3,7 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, minimum-scale=1"
+    />
     <link rel="shortcut icon" href="/static/logo/trident_neptune_logo.ico" />
     <link
       href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css"
@@ -14,9 +17,11 @@
       type="text/javascript"
       src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"
     ></script>
-    <script type="module" src="./js/index.js"></script>
 
     <title>Nereid UI</title>
   </head>
-  <body></body>
+  <body>
+    <div id="app"></div>
+  </body>
+  <script type="module" src="./js/index.js"></script>
 </html>
diff --git a/nereid/nereid/static/frontend/src/js/components/base/component.js b/nereid/nereid/static/frontend/src/js/components/base/component.js
@@ -11,7 +11,19 @@ export default class Component {
     // We're setting a render function as the one set by whatever inherits this base
     // class or setting it to an empty by default. This is so nothing breaks if someone
     // forgets to set it.
-    this._render = this._render || props._render || function () {};
+    this._render =
+      this._render ||
+      props._render ||
+      function () {
+        if (self?.class != null) {
+          d3.select(self.element_string).classed(self.class, true);
+        }
+        console.debug(
+          `component ${
+            this.element_string || "unknown"
+          } called without a render method`
+        );
+      };
 
     // If there's a store passed in, subscribe to the state change
     if (props.store instanceof Store) {
@@ -44,6 +56,10 @@ export default class Component {
     if (props.hasOwnProperty("children")) {
       self.children = props.children;
     }
+
+    if (props.hasOwnProperty("class")) {
+      self.class = props.class;
+    }
   }
 
   render() {

diff --git a/nereid/nereid/static/frontend/src/js/components/base/toggle.js b/nereid/nereid/static/frontend/src/js/components/base/toggle.js
@@ -23,14 +23,14 @@ export class ToggleBase extends Component {
     self.toggle = d3.select(`#${self.parent_id}`).append("div");
     self.toggle.html(`
     <!-- Toggle ${self.id} -->
-    <div class="m-2 transform ${self.scale}">
-      <label for="${self.id}-toggle" class="flex items-center cursor-pointer">
+    <div class="transform ${self.scale} m-0 sm:m-2 py-2">
+      <label for="${self.id}-toggle" class="flex flex-col sm:flex-row items-center align-center cursor-pointer min-w-0">
         <!-- toggle -->
         <div class="relative">
           <!-- input -->
           <input type="checkbox" id="${self.id}-toggle" class="sr-only" />
           <!-- line -->
-          <div class="block bg-gray-600 w-14 h-8 rounded-full"></div>
+          <div class="block bg-gray-600 w-10 h-6 rounded-full"></div>
           <!-- dot -->
           <div
             class="
@@ -39,15 +39,15 @@ export class ToggleBase extends Component {
               left-1
               top-1
               bg-white
-              w-6
-              h-6
+              w-4
+              h-4
               rounded-full
               transition
             "
           ></div>
         </div>
         <!-- label -->
-        <div class="ml-3 text-gray-700 font-medium">${self.text}</div>
+        <div class="text-center sm:ml-3 text-gray-700 font-medium text-xs sm:text-sm">${self.text}</div>
       </label>
     </div>
     `);

diff --git a/nereid/nereid/static/frontend/src/js/components/graph-interface/editor.js b/nereid/nereid/static/frontend/src/js/components/graph-interface/editor.js
@@ -13,17 +13,21 @@ export default class Editor extends Component {
     super({ store });
   }
 
+  resize() {
+    this.svg.attr("viewBox", [
+      0,
+      0,
+      d3.select(`#map`).node().getBoundingClientRect().width,
+      d3.select(`#map`).node().getBoundingClientRect().height,
+    ]);
+
+    this?.map?.resize();
+  }
+
   _render() {
     let self = this;
-    self.svg = d3
-      .select(`#map`)
-      .append("svg")
-      .attr("viewBox", [
-        0,
-        0,
-        d3.select(`#map`).node().getBoundingClientRect().width,
-        d3.select(`#map`).node().getBoundingClientRect().height,
-      ]);
+    self.svg = d3.select(`#map`).append("svg");
+    self.resize();
 
     self.map = new Map({ id: "map", svg: self.svg });
     const vector = self.map.vector;

diff --git a/nereid/nereid/static/frontend/src/js/components/graph-interface/map.js b/nereid/nereid/static/frontend/src/js/components/graph-interface/map.js
@@ -123,13 +123,17 @@ export default class Map extends Component {
     console.debug("map mode toggled!");
   }
 
-  zoomed({ transform }) {
+  resize() {
     let self = this;
+    self.tile = d3
+      .tile()
+      .extent([
+        [0, 0],
+        [self.width(), self.height()],
+      ])
+      .tileSize(self.tilesize);
 
-    self.transform = transform;
-    self._k = transform.k;
-    // console.log(_k);
-    const tiles = self.tile(transform);
+    const tiles = self.tile(self.transform);
     // image_group.classed("hidden", !showMap());
     // if (showMap()) {
 
@@ -150,6 +154,16 @@ export default class Map extends Component {
       .attr("y", ([, y]) => (y + tiles.translate[1]) * tiles.scale)
       .attr("width", tiles.scale)
       .attr("height", tiles.scale);
+  }
+
+  zoomed({ transform }) {
+    let self = this;
+
+    self.transform = transform;
+    self._k = transform.k;
+    // console.log(_k);
+
+    self.resize();
 
     self.vector.attr("transform", transform);
   }

diff --git a/nereid/nereid/static/frontend/src/js/components/index.js b/nereid/nereid/static/frontend/src/js/components/index.js
@@ -1,16 +1,20 @@
 import "./session";
+import Component from "./base/component.js";
 import { spinner } from "./loading_spinner";
 import { modal } from "./modal";
 import { tabs } from "./tabs";
 import { editor } from "./graph-interface";
 import * as util from "../lib/util";
 import * as nereidUtil from "../lib/nereid-api";
 
-async function init() {
+window.onload = async (event) => {
   await util.getConfigFromUrlQueryParams();
-  spinner.render();
-  tabs.render();
-  modal.render();
+  const app = new Component({
+    id: "app",
+    children: [tabs, spinner, modal],
+    class: "leading-normal tracking-normal container mx-auto",
+  });
+  app.render();
 
   // to window
   window.nereid = {
@@ -21,23 +25,8 @@ async function init() {
     state: editor.store.state,
   };
   editor.store.dispatch("updateConfig", {});
-}
 
-init();
-// util.getConfigFromUrlQueryParams().then(() => {
-//   spinner.render();
-//   tabs.render();
-//   modal.render();
-
-//   // to window
-//   import("./graph-interface").then(({ editor }) => {
-//     window.nereid = {
-//       tabs,
-//       editor,
-//       util,
-//       nereidUtil,
-//       state: editor.store.state,
-//     };
-//     editor.store.dispatch("updateConfig", {});
-//   });
-// });
+  window.onresize = () => {
+    editor.resize();
+  };
+};
diff --git a/nereid/nereid/static/frontend/src/js/components/loading_spinner.js b/nereid/nereid/static/frontend/src/js/components/loading_spinner.js
@@ -76,7 +76,10 @@ class LoadingSpinner extends Component {
   }
   _render() {
     let self = this;
-    self.element = d3.select("body").append("div").attr("id", self.id);
+    self.element = d3
+      .select(`#${this.parent_id}`)
+      .append("div")
+      .attr("id", self.id);
     self.element.html(self._base_template());
 
     self.store.events.subscribe("Waiting", ({ waiting }) => {
@@ -86,7 +89,7 @@ class LoadingSpinner extends Component {
       if (waiting === 0) self.exit();
     });
 
-    d3.select("body");
+    // d3.select(self.parent);
   }
 }
 

diff --git a/...c/frontend/src/js/components/tabs/editor-tab/editor-menu/drawer-controller/editor-menu.js b/...c/frontend/src/js/components/tabs/editor-tab/editor-menu/drawer-controller/editor-menu.js
@@ -9,19 +9,25 @@ export default class EditorMenu extends Component {
 
   _template() {
     return `
-  <div class="absolute pr-12 top-0 right-0">
-    <div class="">
+  <div
+    class="absolute top-0 right-0 pointer-events-none
+      mr-1 sm:mr-3
+      mt-1 sm:mt-3
+      "
+    >
+    <div class="pointer-events-auto">
       <div id="${this.id}-button-container"
         class="
           menu
-          flex flex-col
+          flex
+          flex-row sm:flex-col
           items-center
-          w-16
-          py-3
-          gap-y-2
-          shadow-xl
-          bg-gray-50
+          p-1 sm:p-3
+          gap-2
           rounded-lg
+          shadow-xl
+          bg-white
+          bg-opacity-25 sm:bg-opacity-75
         "
       >
       </div>

diff --git a/...frontend/src/js/components/tabs/editor-tab/editor-menu/drawer-controller/editor-option.js b/...frontend/src/js/components/tabs/editor-tab/editor-menu/drawer-controller/editor-option.js
@@ -35,7 +35,7 @@ export default class EditorMenuOption extends Component {
     let parent_container = d3
       .select(`#${this.parent_id}-button-container`)
       .append("div")
-      .classed("flex", true);
+      .classed("flex ", true);
     // this.button = parent_container.append("div");
     // this.button.html(this._template());
     let html = parent_container.html();

diff --git a/...tatic/frontend/src/js/components/tabs/editor-tab/editor-menu/drawer-controller/options.js b/...tatic/frontend/src/js/components/tabs/editor-tab/editor-menu/drawer-controller/options.js
@@ -71,7 +71,7 @@ export const clearScenarioOption = new EditorMenuOption({
   id: "clear_scenario",
   title: "Clear Scenario",
   icon: `
-<div class="pt-10 text-red-600 hover:text-gray-300">
+<div class="sm:pt-10 text-red-600 hover:text-gray-300">
 
   <!-- Heroicon name: x-circle -->
   <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -90,10 +90,10 @@ export const checkScenarioOption = new EditorMenuOption({
   id: "check_scenario",
   title: "Verify Inputs",
   icon: `
-<div class="pt-10 text-blue-600 hover:text-gray-300">
+<div class="sm:pt-10 text-blue-600 hover:text-gray-300">
 
   <!-- Heroicon name: check -->
-  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
   </svg>
 </div>
@@ -143,10 +143,10 @@ export const runScenarioOption = new EditorMenuOption({
   id: "run_scenario",
   title: "Run Scenario",
   icon: `
-<div class="pt-10 text-green-600 hover:text-gray-300">
+<div class="sm:pt-10 text-green-600 hover:text-gray-300">
 
   <!-- Heroicon name: play -->
-  <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
   </svg>

diff --git a/...d/nereid/static/frontend/src/js/components/tabs/editor-tab/editor-menu/drawers/drawers.js b/...d/nereid/static/frontend/src/js/components/tabs/editor-tab/editor-menu/drawers/drawers.js
@@ -60,6 +60,6 @@ export class Drawers extends Component {
     `;
   }
   _render() {
-    d3.select("body").append("div").html(this._template());
+    d3.select(`#${this.parent_id}`).append("div").html(this._template());
   }
 }
diff --git a/nereid/nereid/static/frontend/src/js/components/tabs/editor-tab/editor-tab.js b/nereid/nereid/static/frontend/src/js/components/tabs/editor-tab/editor-tab.js
@@ -24,30 +24,33 @@ export class EditorTab extends Component {
 
   _template() {
     return `
-    <div class="flex justify-center text-lg font-bold p-4">
+    <div class="flex flex-row justify-center text-lg font-bold p-4">
       Scenario:&nbsp
-      <span id="scenario-name" contenteditable="true" class="border-b-2 border-black">
+      <span id="scenario-name" contenteditable="true" class="border-b-2 border-black bg-gray-100 px-2">
         ${this.scenario_name}
       </span>
     </div>
-    <div class="relative flex flex-row w-screen">
-      <div class="p-2 w-[200px]">
-        <div id="toggle-container" class="flex flex-col"></div>
-      </div>
-      <div class="flex flex-col">
-        <div id="map" class="has-tooltip w-[800px] h-[500px]"></div>
 
+    <div class="flex flex-row h-screen max-h-[650px]">
+      <div class="flex flex-col sm:w-full min-w-0 max-w-[175px] ">
+        <div id="toggle-container"></div>
+      </div>
+      <div class="relative w-full ">
+        <div id="map" class="has-tooltip h-full max-w-screen"></div>
+        <div id="editor-menu"></div>
       </div>
-      <div id="editor-menu"></div>
+
     </div>
+
     <div id="editor-info" class="grid grid-cols-2 gap-2 pl-12 py-2"></div>
+
     `;
   }
   _render() {
     let self = this;
     let element = d3
       .select(`#${self.id}`)
-      .classed("flex flex-col justify-center max-w-[1000px]", true)
+      .classed("flex flex-col ", true)
       .html(self._template());
 
     element.select("#scenario-name").on("input", () => {