D3 Renderer

client/package.json

@@ -156,10 +156,13 @@
     "codemirror": "^5.32.0",
     "codemirror-graphql": "^0.6.12",
     "crypto-js": "^3.1.9-1",
+    "d3": "^5.7.0",
+    "d3-transform": "^1.0.5",
     "graphql": "0.13.0",
     "highlight.js": "^9.12.0",
     "jquery": "^3.3.1",
     "lodash": "^4.17.4",
+    "lodash-es": "^4.17.11",
     "pluralize": "^7.0.0",
     "randomcolor": "^0.5.3",
     "raven-js": "^3.21.0",

client/src/actions/frames.js

@@ -73,7 +73,7 @@ export function updateFramesTab(tab) {
  */
 export function toggleCollapseFrame(frame, nextState) {
     let shouldCollapse;
-    if (nextState) {
+    if (nextState !== null && nextState !== undefined) {
         shouldCollapse = nextState;
     } else {
         shouldCollapse = !frame.meta.collapsed;

client/src/assets/css/Frames.scss

@@ -345,7 +345,6 @@
 
         .content-container {
             flex: 1;
-            display: flex;
         }
 
         .code-container {

client/src/assets/css/Graph.scss

@@ -1,13 +1,3 @@
-.vis-network {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-}
-
-.vis-network > canvas {
-    flex: 1;
-}
-
 .progress .progress-bar {
     -webkit-transition: none;
     -o-transition: none;
@@ -21,20 +11,6 @@
     width: 80%;
 }
 
-.vis-zoomExtends,
-.vis-right,
-.vis-left,
-.vis-up,
-.vis-down {
-    display: none !important;
-}
-
-.vis-navigation {
-    position: absolute;
-    top: 60px;
-    right: 5px;
-}
-
 .graph-container {
     display: flex;
     flex: 1;
@@ -60,31 +36,11 @@
     padding: 7px 11px;
 }
 
-// Override zoom button CSS.
-.graph .vis-network .vis-navigation .vis-button {
-    width: 32px;
-    height: 32px;
-    background-position: 0;
-}
-.graph .vis-network .vis-navigation .vis-button:hover {
-    box-shadow: 0 0 3px 3px rgba(74, 74, 74, 0.3);
-}
-.graph .vis-network .vis-navigation .vis-button.vis-zoomIn {
-    // bottom: -27px;
-    // right: 15px;
-    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDMxLjA1OSAzMS4wNTkiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMxLjA1OSAzMS4wNTk7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4Ij4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNMTUuNTI5LDMxLjA1OUM2Ljk2NiwzMS4wNTksMCwyNC4wOTIsMCwxNS41MjlDMCw2Ljk2Niw2Ljk2NiwwLDE1LjUyOSwwICAgIGM4LjU2MywwLDE1LjUyOSw2Ljk2NiwxNS41MjksMTUuNTI5QzMxLjA1OSwyNC4wOTIsMjQuMDkyLDMxLjA1OSwxNS41MjksMzEuMDU5eiBNMTUuNTI5LDEuNzc0ICAgIGMtNy41ODUsMC0xMy43NTUsNi4xNzEtMTMuNzU1LDEzLjc1NXM2LjE3LDEzLjc1NCwxMy43NTUsMTMuNzU0YzcuNTg0LDAsMTMuNzU0LTYuMTcsMTMuNzU0LTEzLjc1NFMyMy4xMTMsMS43NzQsMTUuNTI5LDEuNzc0eiIgZmlsbD0iIzAwMDAwMCIvPgoJPC9nPgoJPGc+CgkJPHBhdGggZD0iTTIxLjY1MiwxNi40MTZIOS40MDZjLTAuNDksMC0wLjg4OC0wLjM5Ni0wLjg4OC0wLjg4N2MwLTAuNDksMC4zOTctMC44ODgsMC44ODgtMC44ODhoMTIuMjQ2ICAgIGMwLjQ5LDAsMC44ODcsMC4zOTgsMC44ODcsMC44ODhDMjIuNTM5LDE2LjAyLDIyLjE0MywxNi40MTYsMjEuNjUyLDE2LjQxNnoiIGZpbGw9IiMwMDAwMDAiLz4KCTwvZz4KCTxnPgoJCTxwYXRoIGQ9Ik0xNS41MjksMjIuNTM5Yy0wLjQ5LDAtMC44ODgtMC4zOTctMC44ODgtMC44ODdWOS40MDZjMC0wLjQ5LDAuMzk4LTAuODg4LDAuODg4LTAuODg4ICAgIGMwLjQ5LDAsMC44ODcsMC4zOTgsMC44ODcsMC44ODh2MTIuMjQ2QzE2LjQxNiwyMi4xNDMsMTYuMDIsMjIuNTM5LDE1LjUyOSwyMi41Mzl6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
-}
-
-.graph .vis-network .vis-navigation .vis-button.vis-zoomOut {
-    bottom: -29px;
-    right: 15px;
-    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDMxLjA1OSAzMS4wNTkiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMxLjA1OSAzMS4wNTk7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMzJweCIgaGVpZ2h0PSIzMnB4Ij4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNMTUuNTI5LDMxLjA1OUM2Ljk2NiwzMS4wNTksMCwyNC4wOTIsMCwxNS41MjlDMCw2Ljk2Niw2Ljk2NiwwLDE1LjUyOSwwICAgIHMxNS41MjksNi45NjYsMTUuNTI5LDE1LjUyOUMzMS4wNTksMjQuMDkyLDI0LjA5MiwzMS4wNTksMTUuNTI5LDMxLjA1OXogTTE1LjUyOSwxLjc3NGMtNy41ODQsMC0xMy43NTQsNi4xNzEtMTMuNzU0LDEzLjc1NSAgICBzNi4xNywxMy43NTQsMTMuNzU0LDEzLjc1NGM3LjU4NCwwLDEzLjc1NC02LjE3LDEzLjc1NC0xMy43NTRTMjMuMTE0LDEuNzc0LDE1LjUyOSwxLjc3NHoiIGZpbGw9IiMwMDAwMDAiLz4KCTwvZz4KCTxnPgoJCTxwYXRoIGQ9Ik0yMS42NTIsMTYuNDE2SDkuNDA2Yy0wLjQ5LDAtMC44ODctMC4zOTYtMC44ODctMC44ODdjMC0wLjQ5LDAuMzk4LTAuODg4LDAuODg3LTAuODg4aDEyLjI0NiAgICBjMC40OSwwLDAuODg3LDAuMzk4LDAuODg3LDAuODg4QzIyLjUzOSwxNi4wMiwyMi4xNDMsMTYuNDE2LDIxLjY1MiwxNi40MTZ6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
-}
-
 .partial-render-info {
     position: absolute;
-    padding: 7px 9px;
-    background: rgba(229, 254, 255, 0.18);
+    padding: 4px 6px;
+    background: transparentize(#fff, 0.7);
+    box-shadow: #fff 0 0 18px 0;
     top: 8px;
     left: 10px;
     z-index: 1;

client/src/components/D3Graph/D3Graph.scss

@@ -0,0 +1,9 @@
+.graph-outer {
+    width: 100%;
+    height: 500px;
+
+    canvas {
+        width: 100%;
+        height: 100%;
+    }
+}