Add 'Node Info' part to config panel once a node is clicked. (#358)

frontend/src/graph/Graph.vue

@@ -5,12 +5,15 @@
                     :fitScreen="fitScreen"
                     :download="download"
                     :scale="config.scale"
+                    :curNode="curNode"
+                    @curNodeUpdated="curNode = $event"
             ></ui-chart>
         </div>
         <div class="visual-dl-page-right">
             <div class="visual-dl-page-config-container">
                 <ui-config
                     :config="config"
+                    :curNode="curNode"
                     @fitScreen="handleFitScreen"
                     @download="handleDownload"
                 ></ui-config>
@@ -37,7 +40,8 @@ export default {
                 scale: 0.5
             },
             fitScreen: {fitScreen: false},
-            download: {download: false}
+            download: {download: false},
+            curNode: {}
         }
     },
     mounted() {
@@ -45,11 +49,11 @@ export default {
     },
     methods: {
         handleFitScreen() {
-            this.fitScreen = {fitScreen: true}
+            this.fitScreen = {fitScreen: true};
             this.config.scale = 0.5;
         },
         handleDownload() {
-            this.download = {fitScreen: true}
+            this.download = {fitScreen: true};
         }
     }
 };

frontend/src/graph/ui/Chart.vue

@@ -25,7 +25,7 @@
     import * as dagreD3 from 'dagre-d3';
 
     export default {
-        props: ['fitScreen', 'download', 'scale'],
+        props: ['fitScreen', 'download', 'scale', 'curNode'],
         computed: {
             computedWidth() {
                 let scale = this.scale;
@@ -54,7 +54,7 @@
         },
         mounted() {
             this.getOriginChartsData();
-
+            let chartScope = this;
             getPluginGraphsGraph().then(({errno, data}) => {
                 var raw_data = data.data;
                 var data = raw_data;
@@ -131,6 +131,26 @@
 
                 // adjust viewBox so that the whole graph can be shown, with scroll bar
                 svg.attr('viewBox', '0 0 ' +  g.graph().width + ' ' + g.graph().height);
+
+                svg.selectAll(".node").on("click", function(d, i){
+                    this.curNode = g.node(d);
+                    var nodeType = this.curNode.class;
+                    var nodeInfo = null;
+                    if (nodeType === "operator") {
+                        var opIndex = d.slice(7); // remove prefix "opNode_"
+                        nodeInfo = data.node[opIndex];
+                    } else if (nodeType === "input") {
+                        nodeInfo = data.input[d-1];
+                    } else {
+                        nodeInfo = "output";
+                    }
+
+                    chartScope.$emit('curNodeUpdated',
+                        {
+                            'nodeType': nodeType,
+                            'nodeInfo': nodeInfo
+                        });
+                });
             });
         },
 
@@ -175,7 +195,7 @@
             },
 
             addDragEventForImg() {
-                let that = this;
+                let chartScope = this;
                 // target elements with the "draggable" class
                 interact('.draggable').draggable({
                     // enable inertial throwing
@@ -186,8 +206,8 @@
                         dragMovelHandler(event, (target, x, y) => {
                             tansformElement(target, x, y);
                             // compute the proportional value
-                            let triggerEl = that.getBigImgEl();
-                            let relativeEl = that.getSmallImgDragHandler();
+                            let triggerEl = chartScope.getBigImgEl();
+                            let relativeEl = chartScope.getSmallImgDragHandler();
 
                             relativeMove({triggerEl, x, y}, relativeEl);
                         });
@@ -213,8 +233,8 @@
                         dragMovelHandler(event, (target, x, y) => {
                             tansformElement(target, x, y);
                             // compute the proportional value
-                            let triggerEl = that.getSmallImgEl();
-                            let relativeEl = that.getBigImgEl();
+                            let triggerEl = chartScope.getSmallImgEl();
+                            let relativeEl = chartScope.getBigImgEl();
 
                             relativeMove({triggerEl, x, y}, relativeEl);
                         });
@@ -245,6 +265,9 @@
         rx: 10;
         ry: 10;
 
+    .node
+        cursor: pointer
+
     .output
         fill: #c38d9e
 

frontend/src/graph/ui/Config.vue

 <template>
     <div class="visual-dl-graph-config-com">
-        <v-btn
-            class="visual-dl-graph-config-button"
-            color="primary"
-            @click="handleFitScreen"
-            dark>
-            <v-icon style="margin-right: 6px" size="20">fullscreen</v-icon>
-            Fit &nbsp; to &nbsp; screen
-        </v-btn>
+        <div class="graph-config-upper">
+            <v-btn
+                class="visual-dl-graph-config-button"
+                color="primary"
+                @click="handleFitScreen"
+                dark>
+                <v-icon style="margin-right: 6px" size="20">fullscreen</v-icon>
+                Fit &nbsp; to &nbsp; screen
+            </v-btn>
 
-        <v-btn
-            class="visual-dl-graph-config-button"
-            color="primary"
-            @click="handleDownload"
-            dark>
-            <v-icon style="margin-right: 6px">file_download</v-icon>
-            Download image
-        </v-btn>
+            <v-btn
+                class="visual-dl-graph-config-button"
+                color="primary"
+                @click="handleDownload"
+                dark>
+                <v-icon style="margin-right: 6px">file_download</v-icon>
+                Download image
+            </v-btn>
 
-        <v-slider
-            label="Scale"
-            max="1"
-            min="0.1"
-            step="0.1"
-            v-model="config.scale"
-            dark></v-slider>
+            <v-slider
+                label="Scale"
+                max="1"
+                min="0.1"
+                step="0.1"
+                v-model="config.scale"
+                dark></v-slider>
+        </div>
+        <div class="node-info">
+            <h3>Node Info: </h3>
+
+            <div v-if="curNode.nodeType === 'input'">
+                <div>Node Type: {{ curNode.nodeType }}</div>
+                <div>Name: {{curNode.nodeInfo.name}}</div>
+                <div>Shape: {{curNode.nodeInfo.shape}}</div>
+                <div>Data Type: {{curNode.nodeInfo.data_type}}</div>
+            </div>
+            <div v-else-if="curNode.nodeType === 'output'">
+                <div>Node Type: {{ curNode.nodeType }}</div>
+            </div>
+            <div v-else-if="curNode.nodeType === 'operator'">
+                <div>Node Type: {{ curNode.nodeType }}</div>
+                <div>Input: {{curNode.nodeInfo.input}}</div>
+                <div>Operator Type: {{curNode.nodeInfo.opType}}</div>
+                <div>Output: {{curNode.nodeInfo.output}}</div>
+            </div>
+            <div v-else>
+
+            </div>
+        </div>
     </div>
 </template>
 <script>
 
 export default {
-    props:['config'],
+    props:['config', 'curNode'],
     methods: {
         handleFitScreen() {
             this.$emit('fitScreen')
@@ -55,4 +79,8 @@ export default {
     .sm-icon
         width 36px
         height 26px
+
+.graph-config-upper
+    height 400px
+
 </style>