From a6ec53ce44035fd6379f055f7204e0a2dcad5c74 Mon Sep 17 00:00:00 2001
From: daminglu <daming-lu@users.noreply.github.com>
Date: Fri, 23 Mar 2018 15:38:01 -0700
Subject: [PATCH] 1st PR on Interactive Graph 0.0.3 (#338)

---
 frontend/mock/data/plugin/graphs/graph.js | 682 +++++++++++++++++++++-
 frontend/package.json                     |   3 +
 frontend/src/graph/ui/Chart.vue           | 373 ++++++++----
 3 files changed, 930 insertions(+), 128 deletions(-)

diff --git a/frontend/mock/data/plugin/graphs/graph.js b/frontend/mock/data/plugin/graphs/graph.js
index 55fb8437..be2bf6a8 100644
--- a/frontend/mock/data/plugin/graphs/graph.js
+++ b/frontend/mock/data/plugin/graphs/graph.js
@@ -17,7 +17,687 @@ module.exports = function (path, queryParam, postParam) {
             status: 0,
             msg: 'SUCCESS',
             data: {
-                url: ''
+                status: 0,
+                msg: 'SUCCESS',
+                // cifar10
+                data: {
+                    "node":[
+                        {
+                            "attribute":[
+                                {
+                                    "type":"INTS",
+                                    "name":"kernel_shape",
+                                    "ints":[
+                                        "5",
+                                        "5"
+                                    ]
+                                },
+                                {
+                                    "type":"INTS",
+                                    "name":"strides",
+                                    "ints":[
+                                        "1",
+                                        "1"
+                                    ]
+                                },
+                                {
+                                    "type":"INTS",
+                                    "name":"pads",
+                                    "ints":[
+                                        "0",
+                                        "0",
+                                        "0",
+                                        "0"
+                                    ]
+                                },
+                                {
+                                    "type":"INTS",
+                                    "name":"dilations",
+                                    "ints":[
+                                        "1",
+                                        "1"
+                                    ]
+                                },
+                                {
+                                    "i":"1",
+                                    "type":"INT",
+                                    "name":"group"
+                                }
+                            ],
+                            "opType":"Conv",
+                            "output":[
+                                "13"
+                            ],
+                            "input":[
+                                "1",
+                                "2"
+                            ]
+                        },
+                        {
+                            "attribute":[
+                                {
+                                    "i":"1",
+                                    "type":"INT",
+                                    "name":"broadcast"
+                                },
+                                {
+                                    "i":"1",
+                                    "type":"INT",
+                                    "name":"axis"
+                                }
+                            ],
+                            "opType":"Add",
+                            "output":[
+                                "14"
+                            ],
+                            "input":[
+                                "13",
+                                "3"
+                            ]
+                        },
+                        {
+                            "input":[
+                                "14"
+                            ],
+                            "opType":"Relu",
+                            "docString":"/usr/local/lib/python2.7/dist-packages/torch/nn/functional.py(583): relu\\ncifar10.py(82): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(236): traced_inner\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(259): wrapper\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(241): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(217): trace\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(116): _export\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(75): export\\ncifar10.py(130): <module>\\n",
+                            "output":[
+                                "15"
+                            ]
+                        },
+                        {
+                            "attribute":[
+                                {
+                                    "type":"INTS",
+                                    "name":"kernel_shape",
+                                    "ints":[
+                                        "2",
+                                        "2"
+                                    ]
+                                },
+                                {
+                                    "type":"INTS",
+                                    "name":"pads",
+                                    "ints":[
+                                        "0",
+                                        "0"
+                                    ]
+                                },
+                                {
+                                    "type":"INTS",
+                                    "name":"strides",
+                                    "ints":[
+                                        "2",
+                                        "2"
+                                    ]
+                                }
+                            ],
+                            "output":[
+                                "16"
+                            ],
+                            "opType":"MaxPool",
+                            "docString":"/usr/local/lib/python2.7/dist-packages/torch/nn/functional.py(334): max_pool2d\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/pooling.py(143): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\ncifar10.py(82): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(236): traced_inner\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(259): wrapper\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(241): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(217): trace\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(116): _export\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(75): export\\ncifar10.py(130): <module>\\n",
+                            "input":[
+                                "15"
+                            ]
+                        },
+                        {
+                            "attribute":[
+                                {
+                                    "type":"INTS",
+                                    "name":"kernel_shape",
+                                    "ints":[
+                                        "5",
+                                        "5"
+                                    ]
+                                },
+                                {
+                                    "type":"INTS",
+                                    "name":"strides",
+                                    "ints":[
+                                        "1",
+                                        "1"
+                                    ]
+                                },
+                                {
+                                    "type":"INTS",
+                                    "name":"pads",
+                                    "ints":[
+                                        "0",
+                                        "0",
+                                        "0",
+                                        "0"
+                                    ]
+                                },
+                                {
+                                    "type":"INTS",
+                                    "name":"dilations",
+                                    "ints":[
+                                        "1",
+                                        "1"
+                                    ]
+                                },
+                                {
+                                    "i":"1",
+                                    "type":"INT",
+                                    "name":"group"
+                                }
+                            ],
+                            "opType":"Conv",
+                            "output":[
+                                "18"
+                            ],
+                            "input":[
+                                "16",
+                                "4"
+                            ]
+                        },
+                        {
+                            "attribute":[
+                                {
+                                    "i":"1",
+                                    "type":"INT",
+                                    "name":"broadcast"
+                                },
+                                {
+                                    "i":"1",
+                                    "type":"INT",
+                                    "name":"axis"
+                                }
+                            ],
+                            "opType":"Add",
+                            "output":[
+                                "19"
+                            ],
+                            "input":[
+                                "18",
+                                "5"
+                            ]
+                        },
+                        {
+                            "input":[
+                                "19"
+                            ],
+                            "opType":"Relu",
+                            "docString":"/usr/local/lib/python2.7/dist-packages/torch/nn/functional.py(583): relu\\ncifar10.py(83): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(236): traced_inner\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(259): wrapper\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(241): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(217): trace\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(116): _export\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(75): export\\ncifar10.py(130): <module>\\n",
+                            "output":[
+                                "20"
+                            ]
+                        },
+                        {
+                            "attribute":[
+                                {
+                                    "type":"INTS",
+                                    "name":"kernel_shape",
+                                    "ints":[
+                                        "2",
+                                        "2"
+                                    ]
+                                },
+                                {
+                                    "type":"INTS",
+                                    "name":"pads",
+                                    "ints":[
+                                        "0",
+                                        "0"
+                                    ]
+                                },
+                                {
+                                    "type":"INTS",
+                                    "name":"strides",
+                                    "ints":[
+                                        "2",
+                                        "2"
+                                    ]
+                                }
+                            ],
+                            "output":[
+                                "21"
+                            ],
+                            "opType":"MaxPool",
+                            "docString":"/usr/local/lib/python2.7/dist-packages/torch/nn/functional.py(334): max_pool2d\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/pooling.py(143): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\ncifar10.py(83): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(236): traced_inner\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(259): wrapper\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(241): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(217): trace\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(116): _export\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(75): export\\ncifar10.py(130): <module>\\n",
+                            "input":[
+                                "20"
+                            ]
+                        },
+                        {
+                            "attribute":[
+                                {
+                                    "type":"INTS",
+                                    "name":"shape",
+                                    "ints":[
+                                        "-1",
+                                        "400"
+                                    ]
+                                }
+                            ],
+                            "output":[
+                                "22"
+                            ],
+                            "opType":"Reshape",
+                            "docString":"cifar10.py(84): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(236): traced_inner\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(259): wrapper\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(241): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(217): trace\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(116): _export\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(75): export\\ncifar10.py(130): <module>\\n",
+                            "input":[
+                                "21"
+                            ]
+                        },
+                        {
+                            "attribute":[
+                                {
+                                    "type":"FLOAT",
+                                    "name":"alpha",
+                                    "f":1.0
+                                },
+                                {
+                                    "type":"FLOAT",
+                                    "name":"beta",
+                                    "f":1.0
+                                },
+                                {
+                                    "i":"1",
+                                    "type":"INT",
+                                    "name":"broadcast"
+                                },
+                                {
+                                    "i":"1",
+                                    "type":"INT",
+                                    "name":"transB"
+                                }
+                            ],
+                            "output":[
+                                "25"
+                            ],
+                            "opType":"Gemm",
+                            "docString":"/usr/local/lib/python2.7/dist-packages/torch/nn/functional.py(835): linear\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/linear.py(55): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\ncifar10.py(85): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(236): traced_inner\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(259): wrapper\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(241): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(217): trace\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(116): _export\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(75): export\\ncifar10.py(130): <module>\\n",
+                            "input":[
+                                "22",
+                                "6",
+                                "7"
+                            ]
+                        },
+                        {
+                            "input":[
+                                "25"
+                            ],
+                            "opType":"Relu",
+                            "docString":"/usr/local/lib/python2.7/dist-packages/torch/nn/functional.py(583): relu\\ncifar10.py(85): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(236): traced_inner\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(259): wrapper\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(241): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(217): trace\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(116): _export\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(75): export\\ncifar10.py(130): <module>\\n",
+                            "output":[
+                                "26"
+                            ]
+                        },
+                        {
+                            "attribute":[
+                                {
+                                    "type":"FLOAT",
+                                    "name":"alpha",
+                                    "f":1.0
+                                },
+                                {
+                                    "type":"FLOAT",
+                                    "name":"beta",
+                                    "f":1.0
+                                },
+                                {
+                                    "i":"1",
+                                    "type":"INT",
+                                    "name":"broadcast"
+                                },
+                                {
+                                    "i":"1",
+                                    "type":"INT",
+                                    "name":"transB"
+                                }
+                            ],
+                            "output":[
+                                "29"
+                            ],
+                            "opType":"Gemm",
+                            "docString":"/usr/local/lib/python2.7/dist-packages/torch/nn/functional.py(835): linear\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/linear.py(55): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\ncifar10.py(86): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(236): traced_inner\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(259): wrapper\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(241): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(217): trace\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(116): _export\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(75): export\\ncifar10.py(130): <module>\\n",
+                            "input":[
+                                "26",
+                                "8",
+                                "9"
+                            ]
+                        },
+                        {
+                            "input":[
+                                "29"
+                            ],
+                            "opType":"Relu",
+                            "docString":"/usr/local/lib/python2.7/dist-packages/torch/nn/functional.py(583): relu\\ncifar10.py(86): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(236): traced_inner\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(259): wrapper\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(241): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(217): trace\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(116): _export\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(75): export\\ncifar10.py(130): <module>\\n",
+                            "output":[
+                                "30"
+                            ]
+                        },
+                        {
+                            "attribute":[
+                                {
+                                    "type":"FLOAT",
+                                    "name":"alpha",
+                                    "f":1.0
+                                },
+                                {
+                                    "type":"FLOAT",
+                                    "name":"beta",
+                                    "f":1.0
+                                },
+                                {
+                                    "i":"1",
+                                    "type":"INT",
+                                    "name":"broadcast"
+                                },
+                                {
+                                    "i":"1",
+                                    "type":"INT",
+                                    "name":"transB"
+                                }
+                            ],
+                            "output":[
+                                "33"
+                            ],
+                            "opType":"Gemm",
+                            "docString":"/usr/local/lib/python2.7/dist-packages/torch/nn/functional.py(835): linear\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/linear.py(55): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\ncifar10.py(87): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(236): traced_inner\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(259): wrapper\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(241): forward\\n/usr/local/lib/python2.7/dist-packages/torch/nn/modules/module.py(325): __call__\\n/usr/local/lib/python2.7/dist-packages/torch/jit/__init__.py(217): trace\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(116): _export\\n/usr/local/lib/python2.7/dist-packages/torch/onnx/__init__.py(75): export\\ncifar10.py(130): <module>\\n",
+                            "input":[
+                                "30",
+                                "10",
+                                "11"
+                            ]
+                        }
+                    ],
+                    "input":[
+                        {
+                            "shape":[
+                                "4",
+                                "3",
+                                "32",
+                                "32"
+                            ],
+                            "name":"1",
+                            "data_type":"FLOAT"
+                        },
+                        {
+                            "shape":[
+                                "6",
+                                "3",
+                                "5",
+                                "5"
+                            ],
+                            "name":"2",
+                            "data_type":"FLOAT"
+                        },
+                        {
+                            "shape":[
+                                "6"
+                            ],
+                            "name":"3",
+                            "data_type":"FLOAT"
+                        },
+                        {
+                            "shape":[
+                                "16",
+                                "6",
+                                "5",
+                                "5"
+                            ],
+                            "name":"4",
+                            "data_type":"FLOAT"
+                        },
+                        {
+                            "shape":[
+                                "16"
+                            ],
+                            "name":"5",
+                            "data_type":"FLOAT"
+                        },
+                        {
+                            "shape":[
+                                "120",
+                                "400"
+                            ],
+                            "name":"6",
+                            "data_type":"FLOAT"
+                        },
+                        {
+                            "shape":[
+                                "120"
+                            ],
+                            "name":"7",
+                            "data_type":"FLOAT"
+                        },
+                        {
+                            "shape":[
+                                "84",
+                                "120"
+                            ],
+                            "name":"8",
+                            "data_type":"FLOAT"
+                        },
+                        {
+                            "shape":[
+                                "84"
+                            ],
+                            "name":"9",
+                            "data_type":"FLOAT"
+                        },
+                        {
+                            "shape":[
+                                "10",
+                                "84"
+                            ],
+                            "name":"10",
+                            "data_type":"FLOAT"
+                        },
+                        {
+                            "shape":[
+                                "10"
+                            ],
+                            "name":"11",
+                            "data_type":"FLOAT"
+                        }
+                    ],
+                    "edges":[
+                        {
+                            "source":"1",
+                            "target":"node_0",
+                            "label":"label_0"
+                        },
+                        {
+                            "source":"2",
+                            "target":"node_0",
+                            "label":"label_1"
+                        },
+                        {
+                            "source":"node_0",
+                            "target":"13",
+                            "label":"label_2"
+                        },
+                        {
+                            "source":"13",
+                            "target":"node_1",
+                            "label":"label_3"
+                        },
+                        {
+                            "source":"3",
+                            "target":"node_1",
+                            "label":"label_4"
+                        },
+                        {
+                            "source":"node_1",
+                            "target":"14",
+                            "label":"label_5"
+                        },
+                        {
+                            "source":"14",
+                            "target":"node_2",
+                            "label":"label_6"
+                        },
+                        {
+                            "source":"node_2",
+                            "target":"15",
+                            "label":"label_7"
+                        },
+                        {
+                            "source":"15",
+                            "target":"node_3",
+                            "label":"label_8"
+                        },
+                        {
+                            "source":"node_3",
+                            "target":"16",
+                            "label":"label_9"
+                        },
+                        {
+                            "source":"16",
+                            "target":"node_4",
+                            "label":"label_10"
+                        },
+                        {
+                            "source":"4",
+                            "target":"node_4",
+                            "label":"label_11"
+                        },
+                        {
+                            "source":"node_4",
+                            "target":"18",
+                            "label":"label_12"
+                        },
+                        {
+                            "source":"18",
+                            "target":"node_5",
+                            "label":"label_13"
+                        },
+                        {
+                            "source":"5",
+                            "target":"node_5",
+                            "label":"label_14"
+                        },
+                        {
+                            "source":"node_5",
+                            "target":"19",
+                            "label":"label_15"
+                        },
+                        {
+                            "source":"19",
+                            "target":"node_6",
+                            "label":"label_16"
+                        },
+                        {
+                            "source":"node_6",
+                            "target":"20",
+                            "label":"label_17"
+                        },
+                        {
+                            "source":"20",
+                            "target":"node_7",
+                            "label":"label_18"
+                        },
+                        {
+                            "source":"node_7",
+                            "target":"21",
+                            "label":"label_19"
+                        },
+                        {
+                            "source":"21",
+                            "target":"node_8",
+                            "label":"label_20"
+                        },
+                        {
+                            "source":"node_8",
+                            "target":"22",
+                            "label":"label_21"
+                        },
+                        {
+                            "source":"22",
+                            "target":"node_9",
+                            "label":"label_22"
+                        },
+                        {
+                            "source":"6",
+                            "target":"node_9",
+                            "label":"label_23"
+                        },
+                        {
+                            "source":"7",
+                            "target":"node_9",
+                            "label":"label_24"
+                        },
+                        {
+                            "source":"node_9",
+                            "target":"25",
+                            "label":"label_25"
+                        },
+                        {
+                            "source":"25",
+                            "target":"node_10",
+                            "label":"label_26"
+                        },
+                        {
+                            "source":"node_10",
+                            "target":"26",
+                            "label":"label_27"
+                        },
+                        {
+                            "source":"26",
+                            "target":"node_11",
+                            "label":"label_28"
+                        },
+                        {
+                            "source":"8",
+                            "target":"node_11",
+                            "label":"label_29"
+                        },
+                        {
+                            "source":"9",
+                            "target":"node_11",
+                            "label":"label_30"
+                        },
+                        {
+                            "source":"node_11",
+                            "target":"29",
+                            "label":"label_31"
+                        },
+                        {
+                            "source":"29",
+                            "target":"node_12",
+                            "label":"label_32"
+                        },
+                        {
+                            "source":"node_12",
+                            "target":"30",
+                            "label":"label_33"
+                        },
+                        {
+                            "source":"30",
+                            "target":"node_13",
+                            "label":"label_34"
+                        },
+                        {
+                            "source":"10",
+                            "target":"node_13",
+                            "label":"label_35"
+                        },
+                        {
+                            "source":"11",
+                            "target":"node_13",
+                            "label":"label_36"
+                        },
+                        {
+                            "source":"node_13",
+                            "target":"33",
+                            "label":"label_37"
+                        }
+                    ],
+                    "name":"torch-jit-export",
+                    "output":[
+                        {
+                            "shape":[
+                                "4",
+                                "10"
+                            ],
+                            "name":"33",
+                            "data_type":"FLOAT"
+                        }
+                    ]
+                }
             }
         }
     };
diff --git a/frontend/package.json b/frontend/package.json
index b5dc34a3..2cf50045 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,7 +14,10 @@
   "dependencies": {
     "axios": "^0.16.1",
     "csshint": "^0.3.3",
+    "cytoscape": "^3.2.11",
+    "cytoscape-dagre": "^2.2.0",
     "d3-format": "^1.2.1",
+    "dagre": "^0.8.2",
     "echarts": "^3.8.5",
     "file-saver": "^1.3.3",
     "htmlcs": "^0.4.1",
diff --git a/frontend/src/graph/ui/Chart.vue b/frontend/src/graph/ui/Chart.vue
index b9c911e6..c7a6a55c 100644
--- a/frontend/src/graph/ui/Chart.vue
+++ b/frontend/src/graph/ui/Chart.vue
@@ -1,155 +1,274 @@
 <template>
     <div class="visual-dl-graph-charts">
-        <div v-if="graphUrl" class="visual-dl-img-box">
-            <div class="small-img-box">
-                <img class="small-img" ref="small_img" width="30" :src="graphUrl" />
-                <div class="screen-handler" ref="screen_handler"></div>
-            </div>
-            <img class="draggable"
-                 ref="draggable"
-                 :width="computedWidth"
-                 :src="graphUrl" />
-        </div>
+        <div id="container" class="cy draggable" ref="draggable"></div>
     </div>
 </template>
 <script>
-// libs
-import echarts from 'echarts';
-import {
-    dragMovelHandler,
-    tansformElement,
-    relativeMove
-} from './dragHelper';
-// service
-import {getPluginGraphsGraph} from '../../service';
-
-// https://github.com/taye/interact.js
-import interact from 'interactjs';
-
-export default {
-    props: ['fitScreen', 'download', 'scale'],
-    computed: {
-        computedWidth() {
-            let scale = this.scale;
-            return Math.floor(scale * 2 * 700);
-        }
-    },
-    data() {
-        return {
-            width: 800,
-            height: 600,
-            graphUrl: '',
-        };
-    },
-    watch: {
-        fitScreen: function(val) {
-            this.clearDragedTransform(this.getBigImgEl());
-            this.clearDragedTransform(this.getSmallImgDragHandler());
-        },
-        download: function(val) {
-            let aEl = document.createElement('a');
-            aEl.href = this.graphUrl;
-            aEl.download = 'graph.png';
-            aEl.click();
-        }
-    },
-    mounted() {
-        this.getOriginChartsData();
-    },
-
-    methods: {
-        createChart() {
-            let el = this.el.getElementsByClassName('visual-dl-chart-box')[0];
-            this.myChart = echarts.init(el);
-        },
+    // libs
+    import echarts from 'echarts';
+    import {
+        dragMovelHandler,
+        tansformElement,
+        relativeMove
+    } from './dragHelper';
+    // service
+    import {getPluginGraphsGraph} from '../../service';
+
+    // https://github.com/taye/interact.js
+    import interact from 'interactjs';
+    import cytoscape from 'cytoscape';
+    import dagre from 'cytoscape-dagre';
 
-        initChartOption(data) {
-            this.setChartOptions(data);
+    export default {
+        props: ['fitScreen', 'download', 'scale'],
+        computed: {
+            computedWidth() {
+                let scale = this.scale;
+                return Math.floor(scale * 2 * 700);
+            }
         },
-        setChartOptions(data) {
-            this.myChart.setOption(data);
+        data() {
+            return {
+                myCY: null,
+                width: 800,
+                height: 600,
+                graphUrl: '',
+            };
         },
-
-        getOriginChartsData() {
-            getPluginGraphsGraph().then(({status, data}) => {
-                if (status === 0 && data.url) {
-                    this.graphUrl = data.url
-                    this.addDragEventForImg();
+        watch: {
+            fitScreen: function(val) {
+                this.clearDragedTransform(this.getBigImgEl());
+                this.clearDragedTransform(this.getSmallImgDragHandler());
+            },
+            download: function(val) {
+                if (this.myCY) {
+                    let aEl = document.createElement('a');
+                    aEl.href = this.myCY.png();
+                    aEl.download = 'graph.png';
+                    aEl.click();
                 }
-            });
+            }
         },
+        mounted() {
+            var that = this;
+            this.getOriginChartsData();
+            cytoscape.use( dagre );
+            getPluginGraphsGraph().then(({errno, data}) => {
 
-        clearDragedTransform(dragImgEl) {
-            dragImgEl.style.transform = 'none';
-            dragImgEl.setAttribute('data-x', 0);
-            dragImgEl.setAttribute('data-y', 0);
-        },
+                var raw_data = data.data;
+                var data = raw_data;
 
-        getBigImgEl() {
-            return this.$refs.draggable
-        },
+                var graph_data = {
+                    nodes: [],
+                    edges: []
+                };
 
-        getSmallImgEl() {
-            return this.$refs.small_img
-        },
+                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);
+                }
 
-        getSmallImgDragHandler() {
-            return this.$refs.screen_handler
-        },
+                for (var i = 0; i < data.edges.length; ++i) {
+                    var source = data.edges[i].source;
+                    var target = data.edges[i].target;
+
+                    if (node_names.includes(source) === false) {
+                        graph_data.nodes.push({
+                            data: {id: source, node_data:source}
+                        });
+                        node_names.push(source);
+                    }
+
+                    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;
+                        }
+                        graph_data.nodes.push({
+                            data: {id: target, node_data:node_data}
+                        });
+                        node_names.push(target);
+                    }
 
-        addDragEventForImg() {
-            let that = this;
-            // target elements with the "draggable" class
-            interact('.draggable').draggable({
-                // enable inertial throwing
-                inertia: true,
-                autoScroll: true,
-                // call this function on every dragmove event
-                onmove(event) {
-                    dragMovelHandler(event, (target, x, y) => {
-                        tansformElement(target, x, y);
-                        // compute the proportional value
-                        let triggerEl = that.getBigImgEl();
-                        let relativeEl = that.getSmallImgDragHandler();
-
-                        relativeMove({triggerEl, x, y}, relativeEl);
+                    graph_data.edges.push({
+                        data: {source: source, target: target}
                     });
                 }
-            });
 
-            interact('.screen-handler').draggable({
-                // enable inertial throwing
-                inertia: true,
-                autoScroll: true,
-                restrict: {
-                    restriction: 'parent',
-                    endOnly: false,
-                    elementRect: {
-                        top: 0,
-                        left: 0,
-                        bottom: 1,
-                        right: 1
+                // >> cy
+                var cy = cytoscape({
+                    container: document.getElementById('container'),
+
+                    boxSelectionEnabled: false,
+                    autounselectify: true,
+
+                    layout: {
+                        name: 'dagre'
+                    },
+
+                    style: [
+                        {
+                            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'
+                            }
+                        }
+                    ],
+                    elements: graph_data,
+                });
+
+                this.myCY = cy;
+
+                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');
+
                     }
-                },
-                // call this function on every dragmove event
-                onmove(event) {
-                    dragMovelHandler(event, (target, x, y) => {
-                        tansformElement(target, x, y);
-                        // compute the proportional value
-                        let triggerEl = that.getSmallImgEl();
-                        let relativeEl = that.getBigImgEl();
-
-                        relativeMove({triggerEl, x, y}, relativeEl);
+
+                    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');
+                            }
+                        }
                     });
-                }
+                });
             });
+        },
+
+        methods: {
+            createChart() {
+                let el = this.el.getElementsByClassName('visual-dl-chart-box')[0];
+                this.myChart = echarts.init(el);
+            },
+
+            initChartOption(data) {
+                this.setChartOptions(data);
+            },
+            setChartOptions(data) {
+                this.myChart.setOption(data);
+            },
+
+            getOriginChartsData() {
+                getPluginGraphsGraph().then(({status, data}) => {
+                    if (status === 0 && data.url) {
+                        this.graphUrl = data.url;
+                        this.addDragEventForImg();
+                    }
+                });
+            },
+
+            clearDragedTransform(dragImgEl) {
+                dragImgEl.style.transform = 'none';
+                dragImgEl.setAttribute('data-x', 0);
+                dragImgEl.setAttribute('data-y', 0);
+            },
+
+            getBigImgEl() {
+                return this.$refs.draggable
+            },
+
+            getSmallImgEl() {
+                return this.$refs.small_img
+            },
+
+            getSmallImgDragHandler() {
+                return this.$refs.screen_handler
+            },
+
+            addDragEventForImg() {
+                let that = this;
+                // target elements with the "draggable" class
+                interact('.draggable').draggable({
+                    // enable inertial throwing
+                    inertia: true,
+                    autoScroll: true,
+                    // call this function on every dragmove event
+                    onmove(event) {
+                        dragMovelHandler(event, (target, x, y) => {
+                            tansformElement(target, x, y);
+                            // compute the proportional value
+                            let triggerEl = that.getBigImgEl();
+                            let relativeEl = that.getSmallImgDragHandler();
+
+                            relativeMove({triggerEl, x, y}, relativeEl);
+                        });
+                    }
+                });
+
+                interact('.screen-handler').draggable({
+                    // enable inertial throwing
+                    inertia: true,
+                    autoScroll: true,
+                    restrict: {
+                        restriction: 'parent',
+                        endOnly: false,
+                        elementRect: {
+                            top: 0,
+                            left: 0,
+                            bottom: 1,
+                            right: 1
+                        }
+                    },
+                    // call this function on every dragmove event
+                    onmove(event) {
+                        dragMovelHandler(event, (target, x, y) => {
+                            tansformElement(target, x, y);
+                            // compute the proportional value
+                            let triggerEl = that.getSmallImgEl();
+                            let relativeEl = that.getBigImgEl();
+
+                            relativeMove({triggerEl, x, y}, relativeEl);
+                        });
+                    }
+                });
+            }
         }
-    }
-};
+    };
 </script>
 <style lang="stylus">
+    .cy
+        height: 100%
+        width: 70%
+        position: absolute
+        top: 0px
+        left: 0px
+
+
     .visual-dl-graph-charts
-        width 90%
+        width inherit
         margin 0 auto
         margin-bottom 20px
 
-- 
GitLab