Fix graph bugs (#391)

frontend/src/graph/ui/Chart.vue

@@ -19,6 +19,7 @@ import * as svgToPngDownloadHelper from './svgToPngDownloadHelper.js';
 import * as d3 from 'd3';
 
 import has from 'lodash/has';
+import isArrayLike from 'lodash/isArrayLike';
 
 export default {
   props: {
@@ -74,9 +75,11 @@ export default {
       if (has(graphData, 'input') === false) {
         return;
       }
+      let inputIdToIndex = {};
       for (let i=0; i<graphData['input'].length; ++i) {
         let curInputNode = graphData['input'][i];
         let nodeKey = curInputNode['name'];
+        inputIdToIndex[nodeKey] = i;
         g.setNode(
           nodeKey,
           {
@@ -144,14 +147,16 @@ export default {
         nodeKeys.push(outputNodeKey);
 
         // add edges from inputs to node and from node to output
-        for (let e=0; e<curOperatorNode['input'].length; ++e) {
-          // TODO(daming-lu): hard-coding style here to this polyline shows shadows.
-          g.setEdge(curOperatorNode['input'][e], nodeKey);
+        if (has(curOperatorNode, 'input') && isArrayLike(curOperatorNode['input'])) {
+            for (let e = 0; e < curOperatorNode['input'].length; ++e) {
+                g.setEdge(curOperatorNode['input'][e], nodeKey);
+            }
+        }
+        if (has(curOperatorNode, 'output') && isArrayLike(curOperatorNode['output'])) {
+            g.setEdge(nodeKey, curOperatorNode['output'][0], {
+                style: 'stroke: #333;stroke-width: 1.5px',
+            });
         }
-
-        g.setEdge(nodeKey, curOperatorNode['output'][0], {
-          style: 'stroke: #333;stroke-width: 1.5px',
-        });
       }
 
       // TODO(daming-lu): add prettier styles to diff nodes
@@ -172,7 +177,7 @@ export default {
           let opIndex = d.slice(7); // remove prefix "opNode_"
           nodeInfo = graphData.node[opIndex];
         } else if (nodeType === 'input') {
-          nodeInfo = graphData.input[d-1];
+          nodeInfo = graphData.input[inputIdToIndex[d]];
         } else {
           nodeInfo = 'output';
         }

visualdl/server/graph.py

@@ -18,7 +18,6 @@ import json
 import os
 
 from google.protobuf.json_format import MessageToJson
-from PIL import Image
 
 from . import graphviz_graph as gg
 from . import onnx
@@ -328,21 +327,27 @@ def add_edges(json_obj):
         cur_node = json_obj['node'][node_index]
 
         # input edges
-        for source in cur_node['input']:
+        if 'input' in cur_node and len(cur_node['input']) > 0:
+            for source in cur_node['input']:
+                json_obj['edges'].append({
+                    'source':
+                    source,
+                    'target':
+                    'node_' + str(node_index),
+                    'label':
+                    'label_' + str(label_incrementer)
+                })
+                label_incrementer += 1
+
+        # output edge
+        if 'output' in cur_node and len(cur_node['output']) > 0:
             json_obj['edges'].append({
-                'source': source,
-                'target': 'node_' + str(node_index),
+                'source': 'node_' + str(node_index),
+                'target': cur_node['output'][0],
                 'label': 'label_' + str(label_incrementer)
             })
             label_incrementer += 1
 
-        # output edge
-        json_obj['edges'].append({
-            'source': 'node_' + str(node_index),
-            'target': cur_node['output'][0],
-            'label': 'label_' + str(label_incrementer)
-        })
-        label_incrementer += 1
     return json_obj
 
 
@@ -483,23 +488,7 @@ class GraphPreviewGenerator(object):
 
 def draw_graph(model_pb_path, image_dir):
     json_str = load_model(model_pb_path)
-    best_image = None
-    min_width = None
-    for i in range(10):
-        # randomly generate dot images and select the one with minimum width.
-        g = GraphPreviewGenerator(json_str)
-        dot_path = os.path.join(image_dir, "temp-%d.dot" % i)
-        image_path = os.path.join(image_dir, "temp-%d.jpg" % i)
-        g(dot_path)
-
-        try:
-            im = Image.open(image_path)
-            if min_width is None or im.size[0] < min_width:
-                min_width = im.size
-                best_image = image_path
-        except Exception:
-            pass
-    return best_image
+    return json_str
 
 
 if __name__ == '__main__':

visualdl/server/visualDL

@@ -298,11 +298,18 @@ def individual_audio():
 
 @app.route('/data/plugin/graphs/graph')
 def graph():
-    # TODO(ChunweiYan) need to add a config for whether have graph.
-    if graph_image_path is None or not os.path.isfile(graph_image_path):
-        data = {'url': ''}
+    # TODO(daming-lu): rename variables because we switched from static graph generated by graphviz
+    # to d3/dagre drawn svg
+    if graph_image_path is not None:
+        data = {
+            'data': graph_image_path,
+        }
     else:
-        data = {'url': '/graphs/image'}
+        image_dir = os.path.join(args.logdir, "graphs")
+        if not os.path.isdir(image_dir):
+            os.mkdir(image_dir)
+        json_str = vdl_graph.draw_graph(args.model_pb, image_dir)
+        data = {'data': json_str}
     result = gen_result(0, "", data)
     return Response(json.dumps(result), mimetype='application/json')