improvement(dashboard): better Stack Graph layout

This replaces the previous dagre-based layout with Reaflow, which uses ELK for the algorithm. This makes the layout stable for every run, and uses a layered horizontal layout which scales much better with a large number of nodes in the graph. Reaflow also makes the code better fitted to React, so this should be easier to work with as we do further iterations and improvements.
garden-io · Feb 21, 2021 · 665d82e · 665d82e
1 parent d6b94aa
commit 665d82e
Show file tree

Hide file tree

Showing 7 changed files with 441 additions and 463 deletions.
diff --git a/dashboard/README.md b/dashboard/README.md
@@ -9,14 +9,14 @@ All commands below assume that the current directory is root.
 To use with the Garden CLI, simply run a Garden command in watch mode inside some Garden project. E.g:
 
 ```sh
-cd examples/simple-project
-garden serve
+cd examples/demo-project
+garden dashboard
 ```
 
 or alternatively
 
 ```sh
-cd examples/simple-project
+cd examples/demo-project
 garden dev
 ```
 
@@ -27,7 +27,7 @@ and follow the dashboard link printed by the command.
 To develop the dashboard, first run:
 
 ```sh
-cd examples/simple-project # (or some other Garden project)
+cd examples/demo-project # (or some other Garden project)
 garden dashboard
 ```
 

diff --git a/dashboard/package.json b/dashboard/package.json
@@ -5,7 +5,6 @@
   "devDependencies": {
     "@garden-io/cli": "*",
     "@types/d3": "^5.7.2",
-    "@types/dagre-d3": "^0.4.39",
     "@types/eslint": "^6",
     "@types/lodash": "^4.14.153",
     "@types/node": "^12.12.16",
@@ -34,7 +33,6 @@
     "axios": "^0.21.1",
     "classnames": "^2.2.6",
     "d3": "^5.16.0",
-    "dagre-d3": "^0.6.4",
     "emotion": "^10.0.27",
     "flexboxgrid": "^6.3.1",
     "flexboxgrid-helpers": "^1.1.3",
@@ -48,7 +46,8 @@
     "react-content-loader": "^4.3.3",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
-    "react-select": "^3.1.0"
+    "react-select": "^3.1.0",
+    "reaflow": "^2.4.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -66,4 +65,4 @@
     "not ie <= 11",
     "not op_mini all"
   ]
-}
+}
diff --git a/dashboard/src/components/graph/graph.scss b/dashboard/src/components/graph/graph.scss
@@ -7,83 +7,113 @@
  */
 
 #chart {
-  g.taskPending > rect {
-    stroke: #f17fcd;
-  }
-
-  g.taskProcessing > rect {
-    stroke: #f17fcd;
-    stroke-dasharray: 8;
-    animation: dash 15s linear infinite;
-  }
-
-  @keyframes dash {
-    to {
-      stroke-dashoffset: 1000;
-    }
-  }
-
-  g.taskComplete > rect {
-    stroke: #02f2b4;
-  }
-
-  g.taskCancelled > rect {
-    stroke: #BBB;
-  }
+  height: calc(100vh - 2rem);
+  width: 98%;
+  margin: auto;
 
-  g.taskError > rect {
-    stroke: red;
+  /* Hide scrollbar (but keep scrolling functionality) */
+  &::-webkit-scrollbar {
+    display: none;
   }
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 
-  g.disabled > rect {
-    stroke: #C2CFE0;
+  g > path {
+    cursor: default !important;
   }
 
-  .node rect {
-    fill: #fff;
-    stroke: #02f2b4;
-    stroke-width: 2.5px;
+  foreignObject {
+    pointer-events: auto;
   }
 
-  .node {
-    cursor: pointer;
-  }
-
-  .node:hover:not(.disabled) rect, .node.selected rect {
-    stroke-width: 4.5px;
-  }
-
-  .node.disabled {
-    cursor: default;
-  }
-
-  .edgePath path {
-    stroke: rgba(0, 0, 0, 0.32);
-    stroke-width: 1.5px;
-  }
+  div.node-container {
+    $base-padding: 10px;
 
-  .label-container {
     cursor: pointer;
-  }
-
-  div.node-container {
     text-align: center;
-    padding: 1rem;
+    font-size: 15px;
+    padding: $base-padding+1 $base-padding+1 $base-padding $base-padding+1;
     background-repeat: no-repeat;
     background-position: left;
     background-position-x: -0.5rem;
     background-size: 4rem;
     border-radius: 4px;
-    border:none;
+    border-width: 2px;
+    border-color: #02f2b4;
+    border-style: solid;
+    box-sizing: content-box;
+    text-overflow: clip;
+    white-space: nowrap;
+    line-height: 15px;
 
     .type {
       color: gray;
-      padding-bottom: 0.2rem;
+      padding-bottom: 6px;
+
+      i {
+        font-size: 0.9em;
+        margin-left: 0.4em;
+        color: #C2CFE0;
+      }
     }
 
     .module-name {
       color: #343434;
       font-weight: bold;
     }
+
+    &.taskProcessing {
+      $width: 2px;
+      $dashColor: #f17fcd;
+      $dashLength: 70%;
+      $dash: $dashColor $dashLength, transparent 100% - $dashLength;
+
+      border: none;
+      // Need to correct for the removed border
+      padding: $base-padding+3 $base-padding+2 $base-padding+1 $base-padding+2;
+      background-image:
+        linear-gradient(90deg, $dash),
+        linear-gradient(90deg, $dash),
+        linear-gradient(0deg, $dash),
+        linear-gradient(0deg, $dash);
+      background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+      background-size: 15px $width, 15px $width, $width 15px, $width 15px;
+      background-position: left top, right bottom, left bottom, right top;
+      animation: border-dance 0.25s infinite linear;
+    }
+    @keyframes border-dance {
+      0% {
+        background-position: left top, right bottom, left bottom, right top;
+      }
+      100% {
+        background-position: left 15px top, right 15px bottom, left bottom 15px, right top 15px;
+      }
+    }
+
+    &.disabled {
+      cursor: default;
+      border-color: #C2CFE0 !important;
+    }
+
+    &.taskPending {
+      border-color: #f17fcd;
+    }
+
+    &.taskComplete {
+      border-color: #02f2b4;
+    }
+
+    &.taskCancelled {
+      border-color: #bbb;
+    }
+
+    &.taskError {
+      border-color: red;
+    }
+
+    &:hover:not(.disabled), &.selected {
+      padding: $base-padding - 1;
+      border-width: 4px;
+    }
   }
 }