From e84e5be2065641c6a2f8071bafcdccc424814767 Mon Sep 17 00:00:00 2001
From: daminglu <daming-lu@users.noreply.github.com>
Date: Mon, 16 Apr 2018 14:59:43 -0700
Subject: [PATCH] Polish graph (#395)

---
 .travis.yml                                  |   2 +-
 frontend/src/graph/Graph.vue                 |   9 ++
 frontend/src/graph/ui/Chart.vue              | 110 ++++++++++++++++---
 frontend/src/graph/ui/Config.vue             |  31 +++++-
 requirements.txt                             |   2 +-
 scripts/tests.sh                             |   1 +
 visualdl/server/mock/download_mock_models.sh |   4 +-
 7 files changed, 136 insertions(+), 23 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 5653f643..bb778f7b 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -52,7 +52,7 @@ before_install:
 
 script:
   - if [[ "$JOB" == "check_style" ]]; then ./scripts/check_style.sh; fi
-  - if [[ "$JOB" == "test" ]]; then ./scripts/tests.sh all; WITH_PYTHON3=ON ./scripts/tests.sh all; fi
+  - if [[ "$JOB" == "test" ]]; then ./scripts/tests.sh all; fi
   - if [[ "$JOB" == "build_doc" ]]; then ./scripts/deploy_docs_on_travis.sh; fi;
 
 notifications:
diff --git a/frontend/src/graph/Graph.vue b/frontend/src/graph/Graph.vue
index ed037726..e8097b1c 100644
--- a/frontend/src/graph/Graph.vue
+++ b/frontend/src/graph/Graph.vue
@@ -3,8 +3,11 @@
     <div class="visual-dl-page-left">
       <ui-chart
         :do-download="doDownload"
+        :do-restore="doRestore"
+        :scale="config.scale"
         @curNodeUpdated="curNode = $event"
         @triggerDownload="doDownload = $event"
+        @triggerRestore="doRestore = $event"
       />
     </div>
     <div class="visual-dl-page-right">
@@ -12,7 +15,9 @@
         <ui-config
           :cur-node="curNode"
           :do-download="doDownload"
+          :config="config"
           @triggerDownload="doDownload = $event"
+          @triggerRestore="doRestore = $event"
         />
       </div>
     </div>
@@ -34,7 +39,11 @@ export default {
   data() {
     return {
       doDownload: false,
+      doRestore: false,
       curNode: {},
+      config: {
+        scale: 0.5,
+      },
     };
   },
   mounted() {
diff --git a/frontend/src/graph/ui/Chart.vue b/frontend/src/graph/ui/Chart.vue
index 008f9201..019ed2d7 100644
--- a/frontend/src/graph/ui/Chart.vue
+++ b/frontend/src/graph/ui/Chart.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="visual-dl-graph-charts">
     <svg
+      :style="{ width: imageWidth + 'px', height: imageHeight + 'px' }"
       class="visual-dl-page-left"
       ref="graphSvg">
       <g/>
@@ -11,9 +12,9 @@
 // service
 import {getPluginGraphsGraph} from '../../service';
 
-// The name 'svgToPngDownloadHelper' is just a placeholder.
-// Loading the JS lib file will bind saveSvgAsPng to window.
-import * as svgToPngDownloadHelper from './svgToPngDownloadHelper.js';
+// Loading the JS lib file will bind saveSvgAsPng to window,
+// which does an SVG -> PNG -> download process.
+import './svgToPngDownloadHelper.js';
 
 // for d3 drawing
 import * as d3 from 'd3';
@@ -27,22 +28,76 @@ export default {
       type: Boolean,
       required: true,
     },
+    'doRestore': {
+      type: Boolean,
+      required: true,
+    },
+    'scale': {
+      type: Number,
+      required: true,
+    },
   },
   computed: {},
   data() {
     return {
+      imageHeight: 0,
+      imageWidth: 0,
+      originImageWidth: 0,
+      originImageHeight: 0,
+      graphZoom: null,
+      svgSelection: null,
+      zoomScale: null,
     };
   },
   watch: {
     doDownload: function(val) {
+      let chartScope = this;
       if (this.doDownload) {
-        let svg = this.$refs.graphSvg;
-        saveSvgAsPng(svg, "graph.png", {scale: 1.0});
-        this.$emit('triggerDownload', false);
+        // in order to download the full graph image, we need to first restore it
+        // to its original size
+        this.restoreImage(true);
+        chartScope.$emit('triggerDownload', false);
       }
     },
+    doRestore: function(val) {
+      this.restoreImage(false);
+    },
+    scale: function(val) {
+      let k = this.zoomScale(val);
+      let svg = d3.select('svg');
+      svg.call(this.graphZoom.transform, d3.zoomIdentity.scale(k));
+    },
   },
+  methods: {
+    restoreImage(thenDownload) {
+      let chartScope = this;
+      let svg = d3.select('svg');
+      this.imageWidth = this.originImageWidth;
+      this.imageHeight = this.originImageHeight;
 
+      if (thenDownload) {
+        svg.transition()
+          .duration(750)
+          .call(this.graphZoom.transform, d3.zoomIdentity.translate(0, 0))
+          .on('end', function() {
+            let svg = chartScope.$refs.graphSvg;
+            saveSvgAsPng(svg, 'graph.png', {scale: 1.0});
+        });
+      } else {
+        svg.transition()
+          .duration(750)
+          .call(this.graphZoom.transform, d3.zoomIdentity.translate(0, 0));
+      }
+      this.$emit('triggerRestore', false);
+    },
+  },
+  created() {
+    // scale
+    let linearScale = d3.scaleLinear();
+    linearScale.domain([0.1, 1]);
+    linearScale.range([0.75, 1.25]);
+    this.zoomScale = linearScale;
+  },
   mounted() {
     let chartScope = this;
     getPluginGraphsGraph().then(({errno, data}) => {
@@ -148,26 +203,49 @@ export default {
 
         // add edges from inputs to node and from node to output
         if (has(curOperatorNode, 'input') && isArrayLike(curOperatorNode['input'])) {
-            for (let e = 0; e < curOperatorNode['input'].length; ++e) {
-                g.setEdge(curOperatorNode['input'][e], nodeKey);
-            }
+          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
       let svg = d3.select('svg')
         .attr('font-family', 'sans-serif')
         .attr('font-size', '28px');
 
       render(d3.select('svg g'), g);
 
-      // adjust viewBox so that the whole graph can be shown, with scroll bar
-      svg.attr('viewBox', '0 0 ' + g.graph().width + ' ' + g.graph().height);
+      let graphSelection = d3.select('svg g');
+      let graphWidth = g.graph().width;
+      let graphHeight = g.graph().height;
+
+      svg.attr('viewBox', '0 0 ' + graphWidth + ' ' + graphHeight);
+
+      this.imageWidth = graphWidth;
+      this.imageHeight = graphHeight;
+      this.originImageWidth = graphWidth;
+      this.originImageHeight = graphHeight;
+
+      // zooming
+      let zooming = function(d) {
+        graphSelection.attr('transform', d3.event.transform);
+        let newViewBoxWidth = d3.event.transform.k * graphWidth;
+        let newViewBoxHeight = d3.event.transform.k * graphHeight;
+        chartScope.imageWidth = newViewBoxWidth;
+        chartScope.imageHeight = newViewBoxHeight;
+      };
+
+      let zoom = d3.zoom().on('zoom', zooming);
+      chartScope.graphZoom = zoom;
+
+      // TODO(daming-lu): enable zoom would have conflict with scale slider
+      // need to find a coordinated way to handle panning and zooming.
+      // svg.call(zoom);
 
       svg.selectAll('.node').on('click', function(d, i) {
         let curNode = g.node(d);
@@ -190,8 +268,6 @@ export default {
       });
     });
   },
-
-  methods: {},
 };
 </script>
 <style lang="stylus">
diff --git a/frontend/src/graph/ui/Config.vue b/frontend/src/graph/ui/Config.vue
index bd61ee08..5b67a90b 100644
--- a/frontend/src/graph/ui/Config.vue
+++ b/frontend/src/graph/ui/Config.vue
@@ -9,7 +9,26 @@
         <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="resetImage"
+        dark>
+        <v-icon style="margin-right: 6px">restore</v-icon>
+        Restore image
+      </v-btn>
+
+      <v-slider
+        label="Scale"
+        max="1"
+        min="0.1"
+        step="0.1"
+        v-model="config.scale"
+        dark/>
     </div>
+
+
     <div class="node-info">
       <h3>Node Info: </h3>
 
@@ -43,10 +62,18 @@ export default {
     'curNode': {
       type: Object,
       default: {},
-  }}, methods: {
+    },
+    'config': {
+      type: Object,
+      required: true,
+    },
+  }, methods: {
     handleDownload() {
       this.$emit('triggerDownload', true);
     },
+    resetImage() {
+      this.$emit('triggerRestore', true);
+    },
   },
 };
 </script>
@@ -66,7 +93,7 @@ export default {
         height 26px
 
 .graph-config-upper
-    height 150px
+    height 300px
 
 .node-info
   font-family 'Courier New', sans-serif
diff --git a/requirements.txt b/requirements.txt
index 2352a24f..c6860c74 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -7,5 +7,5 @@ flake8==3.5.0
 Pillow==5.0.0
 pre-commit==1.5.1
 flask==0.12.2
-protobuf==3.5.1
 six==1.11.0
+protobuf==3.5.1
diff --git a/scripts/tests.sh b/scripts/tests.sh
index c594f99d..21b31958 100755
--- a/scripts/tests.sh
+++ b/scripts/tests.sh
@@ -35,6 +35,7 @@ fi
 $sudo $pip install numpy
 $sudo $pip install Flask
 $sudo $pip install Pillow
+$sudo $pip install six
 $sudo $pip install protobuf
 
 export PYTHONPATH="${core_path}:${python_path}"
diff --git a/visualdl/server/mock/download_mock_models.sh b/visualdl/server/mock/download_mock_models.sh
index d65d3581..441d4e09 100644
--- a/visualdl/server/mock/download_mock_models.sh
+++ b/visualdl/server/mock/download_mock_models.sh
@@ -1,6 +1,6 @@
 # Download squeezenet model
-curl -LOk http://visualdl.bj.bcebos.com/squeezenet.tar.gz
-#curl -LOk https://www.dropbox.com/s/fip3jzxsjf2g6zc/squeezenet.tar.gz?dl=0
+#curl -LOk http://visualdl.bj.bcebos.com/squeezenet.tar.gz
+curl -LOk https://www.dropbox.com/s/fip3jzxsjf2g6zc/squeezenet.tar.gz
 tar -xvzf squeezenet.tar.gz
 cp squeezenet/model.pb squeezenet_model.pb
 
-- 
GitLab