Polish for release (#378)

0d77dd69 · daminglu · GitHub · 747329e0 · 0d77dd69 · 0d77dd69
5 changed file
--- a/frontend/src/graph/Graph.vue
+++ b/frontend/src/graph/Graph.vue
@@ -3,7 +3,6 @@
    <div class="visual-dl-page-left">
      <ui-chart
        :do-download="doDownload"
-        :cur-node="curNode"
        @curNodeUpdated="curNode = $event"
        @triggerDownload="doDownload = $event"
      />

--- a/frontend/src/graph/ui/Chart.vue
+++ b/frontend/src/graph/ui/Chart.vue
@@ -20,10 +20,7 @@ export default {
      type: Boolean,
      required: true,
    },
-    'curNode': {
-      type: Object,
-      default: {},
-  }},
+  },
  computed: {},
  data() {
    return {
@@ -95,9 +92,9 @@ export default {
          nodeKey,
          {
            label: buildInputNodeLabel(curInputNode),
+            style: 'opacity: 0.1; ' +
+              'stroke-width: 3px; ',
            class: 'input',
-            style: 'stroke: #A3D39C; stroke-width: 3px; ' +
-              'stroke-dasharray: 5, 5;',
            labelStyle: 'font-size: 0.8em;',

          }
@@ -116,8 +113,11 @@ export default {
          nodeKey,
          {
            label: curOpLabel + ' '.repeat(Math.floor(curOpLabel.length/5)),
+            shape: 'rect',
            class: 'operator',
-            style: 'opacity: 0.5;',
+            style: 'stroke-width: 3px; ' +
+              'opacity: 0.1; ' +
+              'rx: 10; ry: 10; ',

          }
        );
@@ -131,8 +131,8 @@ export default {
          {
            label: outputNodeKey + outputPadding,
            class: 'output',
-            style: 'opacity: 0.5;' +
-              'stroke-width: 2px; ' +
+            style: 'opacity: 0.1;' +
+              'stroke-width: 3px; ' +
              'stroke-dasharray: 5, 5;',
            shape: 'diamond',

@@ -158,8 +158,8 @@ export default {
      svg.attr('viewBox', '0 0 ' + g.graph().width + ' ' + g.graph().height);

      svg.selectAll('.node').on('click', function(d, i) {
-        chartScope.curNode = g.node(d);
-        let nodeType = chartScope.curNode.class;
+        let curNode = g.node(d);
+        let nodeType = curNode.class;
        let nodeInfo = null;
        if (nodeType === 'operator') {
          let opIndex = d.slice(7); // remove prefix "opNode_"
@@ -188,16 +188,15 @@ export default {
    .node ellipse
    .node polygon
        stroke: #333
-        fill: #fff
+        stroke-color: #41b3a3
        stroke-width: 1.5px

    .edgePath path.path
        stroke: #333
-        fill: none
        stroke-width: 1.5px

    .operator
-        fill: #41b3a3
+        fill: #008c99

    .operator > rect
        rx: 10;
@@ -207,10 +206,10 @@ export default {
        cursor: pointer

    .output
-        fill: #c38d9e
+        fill: #015249

    .input
-        fill: #e8a87c
+        fill: #6c648b

    .visual-dl-graph-charts
        width inherit

--- a/frontend/src/graph/ui/Config.vue
+++ b/frontend/src/graph/ui/Config.vue
@@ -66,6 +66,10 @@ export default {
        height 26px

 .graph-config-upper
-    height 400px
+    height 150px
+
+.node-info
+  font-family 'Courier New', sans-serif
+  font-weight bold

 </style>
--- a/frontend/template/index.html
+++ b/frontend/template/index.html
@@ -6,7 +6,7 @@
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
-        <script src="https://dagrejs.github.io/project/dagre-d3/latest/dagre-d3.min.js"></script>
+        <script type="text/javascript" src="https://dagrejs.github.io/project/dagre-d3/latest/dagre-d3.min.js"></script>
    </head>
    <body>
        <div id="root"></div>

--- a/frontend/tool/webpack.config.js
+++ b/frontend/tool/webpack.config.js
@@ -125,7 +125,7 @@ const config = {
        new ExtractTextPlugin({filename: '[name].css'})
    ],
    externals: {
-        dagreD3: 'dagre-d3'
+        dagreD3: 'dagre-d3',
    }
 };