2nd PR on Interactive Graph 0.0.3 (#348)

frontend/package.json

@@ -16,10 +16,13 @@
     "csshint": "^0.3.3",
     "cytoscape": "^3.2.11",
     "cytoscape-dagre": "^2.2.0",
+    "d3": "^4.7.4",
     "d3-format": "^1.2.1",
     "dagre": "^0.8.2",
+    "dagre-d3": "^0.6.1",
     "echarts": "^3.8.5",
     "file-saver": "^1.3.3",
+    "graphlib": "^1.0.5",
     "htmlcs": "^0.4.1",
     "lesslint": "^1.0.2",
     "lodash": "^4.17.4",
@@ -67,15 +70,15 @@
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
     "url-loader": "^0.5.8",
-    "webpack": "^2.4.1",
+    "vue-jest": "^1.0.2",
+    "vue-loader": "^13.3.0",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.5.2",
+    "webpack": "^2.7.0",
     "webpack-dev-middleware": "^1.12.1",
     "webpack-dev-server": "^2.4.2",
     "webpack-hot-middleware": "^2.19.1",
     "webpack-merge": "^4.1.0",
-    "yargs": "^8.0.2",
-    "vue-jest": "^1.0.2",
-    "vue-loader": "^13.3.0",
-    "vue-style-loader": "^3.0.1",
-    "vue-template-compiler": "^2.5.2"
+    "yargs": "^8.0.2"
   }
 }

frontend/src/graph/Graph.vue

@@ -2,9 +2,9 @@
     <div class="visual-dl-page-container">
         <div class="visual-dl-page-left">
             <ui-chart
-                :fitScreen="fitScreen"
-                :download="download"
-                :scale="config.scale"
+                    :fitScreen="fitScreen"
+                    :download="download"
+                    :scale="config.scale"
             ></ui-chart>
         </div>
         <div class="visual-dl-page-right">
@@ -24,6 +24,7 @@ import autoAdjustHeight from '../common/util/autoAdjustHeight';
 import Config from './ui/Config'
 import Chart from './ui/Chart';
 
+
 export default {
     components: {
         'ui-config': Config,

frontend/src/graph/ui/Chart.vue

 <template>
     <div class="visual-dl-graph-charts">
-        <div id="container" class="cy draggable" ref="draggable"></div>
+        <svg class="visual-dl-page-left">
+            <g/>
+        </svg>
     </div>
 </template>
 <script>
@@ -16,8 +18,11 @@
 
     // https://github.com/taye/interact.js
     import interact from 'interactjs';
-    import cytoscape from 'cytoscape';
-    import dagre from 'cytoscape-dagre';
+
+    // for d3 drawing
+    import * as d3 from "d3";
+    import * as dagre from "dagre";
+    import * as dagreD3 from 'dagre-d3';
 
     export default {
         props: ['fitScreen', 'download', 'scale'],
@@ -30,8 +35,6 @@
         data() {
             return {
                 myCY: null,
-                width: 800,
-                height: 600,
                 graphUrl: '',
             };
         },
@@ -50,121 +53,73 @@
             }
         },
         mounted() {
-            var that = this;
             this.getOriginChartsData();
-            cytoscape.use( dagre );
-            getPluginGraphsGraph().then(({errno, data}) => {
 
+            getPluginGraphsGraph().then(({errno, data}) => {
                 var raw_data = data.data;
                 var data = raw_data;
 
-                var graph_data = {
-                    nodes: [],
-                    edges: []
-                };
-
-                var node_names = [];
-                for (var i = 0; i < data.input.length; ++i) {
-                    graph_data.nodes.push({
-                        data: {id: data.input[i].name, node_data: data.input[i].name}
-                    });
-                    node_names.push(data.input[i].name);
-                }
-
-                for (var i = 0; i < data.edges.length; ++i) {
-                    var source = data.edges[i].source;
-                    var target = data.edges[i].target;
+                // d3 svg drawing
+                var g = new dagreD3.graphlib.Graph()
+                    .setGraph({})
+                    .setDefaultEdgeLabel(function() { return {}; });
+                var render = new dagreD3.render();
+                var nodeKeys = [];
 
-                    if (node_names.includes(source) === false) {
-                        graph_data.nodes.push({
-                            data: {id: source, node_data:source}
-                        });
-                        node_names.push(source);
-                    }
+                var buildInputNodeLabel = function(inputNode) {
+                    var nodeLabel = inputNode['data_type'] + ': ' + inputNode['shape'].join('x');
+                    return nodeLabel + ' '.repeat(Math.floor(nodeLabel.length/5));
+                };
 
-                    if (node_names.includes(target) === false) {
-                        var node_data = target;
-                        if (target.includes('node_')) {
-                            // it is an operator node
-                            var node_id = target.substring(5);
-                            node_data = data.node[node_id].opType;
+                // add input nodes
+                for (var i=0; i<data['input'].length; ++i) {
+                    var curInputNode = data['input'][i];
+                    var nodeKey = curInputNode['name'];
+                    g.setNode(
+                        nodeKey,
+                        {
+                            label: buildInputNodeLabel(curInputNode),
+                            class: "input"
                         }
-                        graph_data.nodes.push({
-                            data: {id: target, node_data:node_data}
-                        });
-                        node_names.push(target);
-                    }
-
-                    graph_data.edges.push({
-                        data: {source: source, target: target}
-                    });
+                    );
+                    nodeKeys.push(nodeKey);
                 }
 
-                // >> cy
-                var cy = cytoscape({
-                    container: document.getElementById('container'),
-
-                    boxSelectionEnabled: false,
-                    autounselectify: true,
-
-                    layout: {
-                        name: 'dagre'
-                    },
+                // add operator nodes then add edges from inputs to operator and from operator to output
+                for (var i=0; i<data['node'].length; ++i) {
+                    var curOperatorNode = data['node'][i];
+                    var nodeKey = 'opNode_' + i;
 
-                    style: [
+                    // add operator node
+                    var curOpLabel = curOperatorNode['opType'];
+                    g.setNode(
+                        nodeKey,
                         {
-                            selector: 'node',
-                            style: {
-                                'width': 40,
-                                'height': 40,
-                                'content': 'data(node_data)',
-                                'text-opacity': 0.5,
-                                'text-valign': 'center',
-                                'text-halign': 'right',
-                                'background-color': '#11479e'
-                            }
-                        },
-                        {
-                            selector: 'edge',
-                            style: {
-                                'curve-style': 'bezier',
-                                'width': 6,
-                                'target-arrow-shape': 'triangle',
-                                'line-color': '#9dbaea',
-                                'target-arrow-color': '#9dbaea'
-                            }
+                            label: curOpLabel + ' '.repeat(Math.floor(curOpLabel.length/5)),
+                            class: "operator"
                         }
-                    ],
-                    elements: graph_data,
-                });
-
-                this.myCY = cy;
+                    );
+                    nodeKeys.push(nodeKey);
 
-                cy.nodes().forEach(function(node){
-                    if (node.id().includes('node_')) {
-                        node.style('width', '80px');
-                        node.style('height', '36px');
-                        node.style('shape', 'roundrectangle');
-                        node.style('background-color', '#158c96');
-                        node.style('text-valign', 'center');
-                        node.style('text-halign', 'center');
+                    // add output node
+                    var outputNodeKey = curOperatorNode['output'][0];
+                    g.setNode(
+                        outputNodeKey,
+                        {
+                            label: outputNodeKey + ' '.repeat(Math.floor(outputNodeKey.length/5)),
+                            class: "output"
+                        }
+                    );
+                    nodeKeys.push(outputNodeKey);
 
+                    // add edges from inputs to node and from node to output
+                    for (var e=0; e<curOperatorNode['input'].length; ++e) {
+                        g.setEdge(curOperatorNode['input'][e], nodeKey);
                     }
+                    g.setEdge(nodeKey, curOperatorNode['output'][0]);
+                }
 
-                    let collapsed = true;
-                    node.on('tap', function(evt){
-                        if (node.id().includes('node_')) {
-                            collapsed = !collapsed;
-                            if (!collapsed) {
-                                node.style('width', '120px');
-                                node.style('height', '54px');
-                            } else {
-                                node.style('width', '80px');
-                                node.style('height', '36px');
-                            }
-                        }
-                    });
-                });
+                render(d3.select("svg g"), g);
             });
         },
 
@@ -259,13 +214,27 @@
     };
 </script>
 <style lang="stylus">
-    .cy
-        height: 100%
-        width: 70%
-        position: absolute
-        top: 0px
-        left: 0px
-
+    .node rect
+    .node circle
+    .node ellipse
+    .node polygon
+        stroke: #333
+        fill: #fff
+        stroke-width: 1.5px
+
+    .edgePath path.path
+        stroke: #333
+        fill: none
+        stroke-width: 1.5px
+
+    .operator
+        fill: red
+
+    .output
+        fill: green
+
+    .input
+        fill: purple
 
     .visual-dl-graph-charts
         width inherit