Eslint precommit (#368)

* Create pre-commit with ESLint

* add vue-eslint-parser

* Add prop-name-casing and script-indent to the eslint rule.

* Update Javascript and Vue files with the proper style

* Comment out ESlint pre-commit first to udpate styles

.eslint_format.hook

+#!/bin/bash
+
+# if there are no staged changes, we can exit immediately
+# this is fast and prevents issues when popping a stash we didn't create
+STAGED_CHANGES=`git diff-index --cached HEAD --name-only --diff-filter ACMR`
+
+if [ -z "$STAGED_CHANGES" ]; then
+    exit 0
+fi
+
+# Capture the path to the eslint
+cd frontend
+ESLINT_EXECUTABLE=$(npm bin)/eslint
+cd ..
+
+# Test against with both .js and .vue files
+git diff --cached --name-only --diff-filter ACMR | egrep '.(js|vue)$' | xargs $ESLINT_EXECUTABLE --fix
+RESULT=$?
+
+[ $RESULT -ne 0 ] && exit 1
+exit 0

.pre-commit-config.yaml

@@ -33,3 +33,11 @@
         entry: flake8
         language: system
         files: \.(py)$
+
+#-   repo: local
+#    hooks:
+#    -   id: eslint-format-checker
+#        name: eslint-format-checker
+#        description: Format files with ESLint.
+#        entry: bash ./.eslint_format.hook
+#        language: system

frontend/.eslintrc.js

@@ -9,5 +9,7 @@ module.exports = {
     // override/add rules settings here, such as:
     'vue/no-unused-vars': 'warn',
     'max-len': ["warn", 120],
+    "vue/prop-name-casing": ["error"],
+    'vue/script-indent': 'error',
   }
 }

frontend/package.json

@@ -73,6 +73,7 @@
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
     "url-loader": "^0.5.8",
+    "vue-eslint-parser": "^2.0.3",
     "vue-jest": "^1.0.2",
     "vue-loader": "^13.3.0",
     "vue-style-loader": "^3.0.1",

frontend/src/App.vue

@@ -11,22 +11,22 @@
 import AppMenu from './common/component/AppMenu';
 
 export default {
-    name: 'App',
-    components: {
-		AppMenu,
-    },
-    data() {
-        return {
-            initialRoute: 'scalars',
-        };
-    },
-    created() {
-        if (location.hash && location.hash != '#/') {
-            this.initialRoute = /(\#\/)(\w*)([?|&]{0,1})/.exec(location.hash)[2];
-        } else {
-            location.hash = '#/scalars';
-        }
-    },
+  name: 'App',
+  components: {
+    AppMenu,
+  },
+  data() {
+    return {
+      initialRoute: 'scalars',
+    };
+  },
+  created() {
+    if (location.hash && location.hash != '#/') {
+      this.initialRoute = /(\#\/)(\w*)([?|&]{0,1})/.exec(location.hash)[2];
+    } else {
+      location.hash = '#/scalars';
+    }
+  },
 };
 </script>
 

frontend/src/audio/Audio.vue

@@ -38,127 +38,127 @@ import Config from './ui/Config';
 import AudioPanelContainer from './ui/AudioPanelContainer';
 
 export default {
-    name: 'Images',
-    components: {
-        'ui-config': Config,
-        'ui-audio-container': AudioPanelContainer,
-    },
-    data() {
+  name: 'Images',
+  components: {
+    'ui-config': Config,
+    'ui-audio-container': AudioPanelContainer,
+  },
+  data() {
+    return {
+      runsArray: [],
+      tags: [],
+      config: {
+        groupNameReg: '.*',
+        isActualImageSize: false,
+        runs: [],
+        running: true,
+      },
+      filteredTagsList: [],
+    };
+  },
+  computed: {
+    runsItems() {
+      let runsArray = this.runsArray || [];
+      return runsArray.map((item) => {
         return {
-            runsArray: [],
-            tags: [],
-            config: {
-                groupNameReg: '.*',
-                isActualImageSize: false,
-                runs: [],
-                running: true,
-            },
-            filteredTagsList: [],
+          name: item,
+          value: item,
         };
+      });
     },
-    computed: {
-        runsItems() {
-            let runsArray = this.runsArray || [];
-            return runsArray.map((item) => {
-                return {
-                    name: item,
-                    value: item,
-                };
-            });
-        },
-        tagsList() {
-            let tags = this.tags;
-
-            let runs = Object.keys(tags);
-            let tagsArray = runs.map((run) => Object.keys(tags[run]));
-            let allUniqTags = uniq(flatten(tagsArray));
+    tagsList() {
+      let tags = this.tags;
 
-            // get the data for every chart
-            return allUniqTags.map((tag) => {
-                let tagList = runs.map((run) => {
-                    return {
-                        run,
-                        tag: tags[run][tag],
-                    };
-                }).filter((item) => item.tag !== undefined);
-                return {
-                    tagList,
-                    tag,
-                    group: tag.split('/')[0],
-                };
-            });
-        },
-        groupedTags() {
-            let tagsList = this.tagsList || [];
-            // put data in group
-            let groupData = {};
-            tagsList.forEach((item) => {
-                let group = item.group;
-                if (groupData[group] === undefined) {
-                    groupData[group] = [];
-                    groupData[group].push(item);
-                } else {
-                    groupData[group].push(item);
-                }
-            });
+      let runs = Object.keys(tags);
+      let tagsArray = runs.map((run) => Object.keys(tags[run]));
+      let allUniqTags = uniq(flatten(tagsArray));
 
-            // to array
-            let groups = Object.keys(groupData);
-            return groups.map((group) => {
-                return {
-                    group,
-                    tags: groupData[group],
-                };
-            });
-        },
-        filteredConfig() {
-            let config = this.config || {};
-            let filteredConfig = {};
-            Object.keys(config).forEach((key) => {
-                let val = config[key];
-                filteredConfig[key] = val;
-            });
-            return filteredConfig;
-        },
+      // get the data for every chart
+      return allUniqTags.map((tag) => {
+        let tagList = runs.map((run) => {
+          return {
+            run,
+            tag: tags[run][tag],
+          };
+        }).filter((item) => item.tag !== undefined);
+        return {
+          tagList,
+          tag,
+          group: tag.split('/')[0],
+        };
+      });
     },
-    created() {
-        getPluginAudioTags().then(({errno, data}) => {
-            this.tags = data;
-
-            // filter when inited
-            let groupNameReg = this.config.groupNameReg;
-            this.filterTagsList(groupNameReg);
-        });
+    groupedTags() {
+      let tagsList = this.tagsList || [];
+      // put data in group
+      let groupData = {};
+      tagsList.forEach((item) => {
+        let group = item.group;
+        if (groupData[group] === undefined) {
+          groupData[group] = [];
+          groupData[group].push(item);
+        } else {
+          groupData[group].push(item);
+        }
+      });
 
-        getRuns().then(({errno, data}) => {
-            this.runsArray = data;
-            this.config.runs = data;
-        });
+      // to array
+      let groups = Object.keys(groupData);
+      return groups.map((group) => {
+        return {
+          group,
+          tags: groupData[group],
+        };
+      });
     },
-    mounted() {
-	    autoAdjustHeight();
+    filteredConfig() {
+      let config = this.config || {};
+      let filteredConfig = {};
+      Object.keys(config).forEach((key) => {
+        let val = config[key];
+        filteredConfig[key] = val;
+      });
+      return filteredConfig;
     },
-    watch: {
-        'config.groupNameReg': function(val) {
-            this.throttledFilterTagsList();
-        },
+  },
+  created() {
+    getPluginAudioTags().then(({errno, data}) => {
+      this.tags = data;
+
+      // filter when inited
+      let groupNameReg = this.config.groupNameReg;
+      this.filterTagsList(groupNameReg);
+    });
+
+    getRuns().then(({errno, data}) => {
+      this.runsArray = data;
+      this.config.runs = data;
+    });
+  },
+  mounted() {
+    autoAdjustHeight();
+  },
+  watch: {
+    'config.groupNameReg': function(val) {
+      this.throttledFilterTagsList();
     },
-    methods: {
-        filterTagsList(groupNameReg) {
-            if (!groupNameReg) {
-                this.filteredTagsList = [];
-                return;
-            }
-            let tagsList = this.tagsList || [];
-            let regExp = new RegExp(groupNameReg);
-            this.filteredTagsList = tagsList.filter((item) => regExp.test(item.tag));
-        },
-        throttledFilterTagsList: _.debounce(
-            function() {
-                this.filterTagsList(this.config.groupNameReg);
-            }, 300
-        ),
+  },
+  methods: {
+    filterTagsList(groupNameReg) {
+      if (!groupNameReg) {
+        this.filteredTagsList = [];
+        return;
+      }
+      let tagsList = this.tagsList || [];
+      let regExp = new RegExp(groupNameReg);
+      this.filteredTagsList = tagsList.filter((item) => regExp.test(item.tag));
     },
+    throttledFilterTagsList: _.debounce(
+      function() {
+        this.filterTagsList(this.config.groupNameReg);
+      }, 300
+    ),
+  },
 };
 
 </script>

frontend/src/audio/index.js

@@ -3,7 +3,7 @@ import {router} from 'san-router';
 import Audio from './Audio';
 
 router.add({
-    target: '#content',
-    rule: '/audio',
-    Component: Audio,
+  target: '#content',
+  rule: '/audio',
+  Component: Audio,
 });

frontend/src/audio/ui/AudioPanel.vue

@@ -31,99 +31,99 @@ import {getPluginAudioAudio} from '../../service';
 const intervalTime = 30;
 
 export default {
-    props: ['tagInfo', 'runs', 'running', 'runsItems'],
-    computed: {
-        steps() {
-            let data = this.data || [];
-            return data.length - 1;
-        },
+  props: ['tagInfo', 'runs', 'running', 'runsItems'],
+  computed: {
+    steps() {
+      let data = this.data || [];
+      return data.length - 1;
     },
-    filters: {
-        formatTime: function(value) {
-            if (!value) {
-                return;
-            }
-            // The value was made in seconds, must convert it to milliseconds
-            let time = new Date(value * 1000);
-            let options = {
-                weekday: 'short', year: 'numeric', month: 'short',
-                day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit',
-            };
-            return time.toLocaleDateString('en-US', options);
-        },
+  },
+  filters: {
+    formatTime: function(value) {
+      if (!value) {
+        return;
+      }
+      // The value was made in seconds, must convert it to milliseconds
+      let time = new Date(value * 1000);
+      let options = {
+        weekday: 'short', year: 'numeric', month: 'short',
+        day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit',
+      };
+      return time.toLocaleDateString('en-US', options);
     },
-    data() {
-        return {
-            currentIndex: 0,
-            slider: {
-                value: '0',
-                label: '',
-                min: 0,
-                step: 1,
-            },
-            audioData: {},
-            data: [],
+  },
+  data() {
+    return {
+      currentIndex: 0,
+      slider: {
+        value: '0',
+        label: '',
+        min: 0,
+        step: 1,
+      },
+      audioData: {},
+      data: [],
+    };
+  },
+  created() {
+    this.getOriginAudioData();
+  },
+  mounted() {
+    if (this.running) {
+      this.startInterval();
+    }
+  },
+
+  beforeDestroy() {
+    this.stopInterval();
+  },
+
+  watch: {
+    running: function(val) {
+      val ? this.startInterval() : this.stopInterval();
+    },
+    currentIndex: function(index) {
+      if (this.data && this.data[index]) {
+        let currentAudioInfo = this.data ? this.data[index] : {};
+        let {query, step, wall_time} = currentAudioInfo;
+        let url = '/data/plugin/audio/individualAudio?ts=' + wall_time;
+        let audioSrc = [url, query].join('&');
+        this.audioData = {
+          audioSrc,
+          step,
+          wall_time,
         };
+      }
     },
-    created() {
+  },
+  methods: {
+    stopInterval() {
+      clearInterval(this.getOringDataInterval);
+    },
+    // get origin data per {{intervalTime}} seconds
+    startInterval() {
+      this.getOringDataInterval = setInterval(() => {
         this.getOriginAudioData();
+      }, intervalTime * 1000);
     },
-    mounted() {
-        if (this.running) {
-            this.startInterval();
+    getOriginAudioData() {
+      // let {run, tag} = this.tagInfo;
+      let run = this.tagInfo.run;
+      let tag = this.tagInfo.tag;
+      let {displayName, samples} = tag;
+      let params = {
+        run,
+        tag: displayName,
+        samples,
+      };
+      getPluginAudioAudio(params).then(({status, data}) => {
+        if (status === 0) {
+          this.data = data;
+          this.currentIndex = data.length - 1;
         }
+      });
     },
-
-    beforeDestroy() {
-        this.stopInterval();
-    },
-
-    watch: {
-        running: function(val) {
-            val ? this.startInterval() : this.stopInterval();
-        },
-        currentIndex: function(index) {
-            if (this.data && this.data[index]) {
-                let currentAudioInfo = this.data ? this.data[index] : {};
-                let {query, step, wall_time} = currentAudioInfo;
-                let url = '/data/plugin/audio/individualAudio?ts=' + wall_time;
-                let audioSrc = [url, query].join('&');
-                this.audioData = {
-                    audioSrc,
-                    step,
-                    wall_time,
-                };
-            }
-        },
-    },
-    methods: {
-        stopInterval() {
-            clearInterval(this.getOringDataInterval);
-        },
-        // get origin data per {{intervalTime}} seconds
-        startInterval() {
-            this.getOringDataInterval = setInterval(() => {
-                this.getOriginAudioData();
-            }, intervalTime * 1000);
-        },
-        getOriginAudioData() {
-            // let {run, tag} = this.tagInfo;
-            let run = this.tagInfo.run;
-            let tag = this.tagInfo.tag;
-            let {displayName, samples} = tag;
-            let params = {
-                run,
-                tag: displayName,
-                samples,
-            };
-            getPluginAudioAudio(params).then(({status, data}) => {
-                if (status === 0) {
-                    this.data = data;
-                    this.currentIndex = data.length - 1;
-                }
-            });
-        },
-    },
+  },
 };
 </script>
 <style lang="stylus">

frontend/src/audio/ui/AudioPanelContainer.vue

@@ -29,41 +29,41 @@ import AudioPanel from './AudioPanel';
 import {cloneDeep, flatten} from 'lodash';
 
 export default {
-    props: ['config', 'runsItems', 'tagList', 'title'],
-    components: {
-        'ui-audio': AudioPanel,
-        'ui-expand-panel': ExpandPanel,
+  props: ['config', 'runsItems', 'tagList', 'title'],
+  components: {
+    'ui-audio': AudioPanel,
+    'ui-expand-panel': ExpandPanel,
+  },
+  computed: {
+    filteredRunsList() {
+      let tagList = this.tagList || [];
+      let runs = this.config.runs || [];
+      let list = cloneDeep(tagList);
+      return flatten(list.slice().map((item) => {
+        return item.tagList.filter((one) => runs.includes(one.run));
+      }));
     },
-    computed: {
-        filteredRunsList() {
-            let tagList = this.tagList || [];
-            let runs = this.config.runs || [];
-            let list = cloneDeep(tagList);
-            return flatten(list.slice().map((item) => {
-                return item.tagList.filter((one) => runs.includes(one.run));
-            }));
-        },
 
-        filteredPageList() {
-            let list = this.filteredRunsList || [];
-            return list.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
-        },
-        total() {
-            let list = this.filteredRunsList || [];
-            return list.length;
-        },
-        pageLength() {
-            return Math.ceil(this.total / this.pageSize);
-        },
+    filteredPageList() {
+      let list = this.filteredRunsList || [];
+      return list.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
     },
-    data() {
-        return {
-            // current page
-            currentPage: 1,
-            // item per page
-            pageSize: 8,
-        };
+    total() {
+      let list = this.filteredRunsList || [];
+      return list.length;
     },
+    pageLength() {
+      return Math.ceil(this.total / this.pageSize);
+    },
+  },
+  data() {
+    return {
+      // current page
+      currentPage: 1,
+      // item per page
+      pageSize: 8,
+    };
+  },
 };
 </script>
 <style lang="stylus">

frontend/src/audio/ui/Config.vue

@@ -32,19 +32,19 @@
 <script>
 
 export default {
-    props: {
-        runsItems: Array,
-        config: Object,
-    },
-    data() {
-        return {
-        };
-    },
-    methods: {
-        toggleAllRuns() {
-            this.config.running = !this.config.running;
-        },
+  props: {
+    runsItems: Array,
+    config: Object,
+  },
+  data() {
+    return {
+    };
+  },
+  methods: {
+    toggleAllRuns() {
+      this.config.running = !this.config.running;
     },
+  },
 };
 
 </script>

frontend/src/common/component/AppMenu.vue

@@ -22,58 +22,58 @@
 
 <script>
 export default {
-    props: ['initialRoute'],
-    name: 'AppMenu',
-    data() {
-        return {
-        selected: this.initialRoute,
-        items: [
-            {
-                url: '/scalars',
-                title: 'SCALARS',
-                name: 'scalars',
-            },
-            {
-                url: '/images',
-                title: 'IMAGES',
-                name: 'images',
-            },
-            {
-                url: '/audio',
-                title: 'AUDIO',
-                name: 'audio',
-            },
-            {
-                url: '/histograms',
-                title: 'HISTOGRAMS',
-                name: 'histograms',
-            },
-            {
-                url: '/graphs',
-                title: 'GRAPHS',
-                name: 'graphs',
-            },
-            {
-                url: '/texts',
-                title: 'TEXTS',
-                name: 'texts',
-            },
-            /* // Hide the top menu
+  props: ['initialRoute'],
+  name: 'AppMenu',
+  data() {
+    return {
+      selected: this.initialRoute,
+      items: [
+        {
+          url: '/scalars',
+          title: 'SCALARS',
+          name: 'scalars',
+        },
+        {
+          url: '/images',
+          title: 'IMAGES',
+          name: 'images',
+        },
+        {
+          url: '/audio',
+          title: 'AUDIO',
+          name: 'audio',
+        },
+        {
+          url: '/histograms',
+          title: 'HISTOGRAMS',
+          name: 'histograms',
+        },
+        {
+          url: '/graphs',
+          title: 'GRAPHS',
+          name: 'graphs',
+        },
+        {
+          url: '/texts',
+          title: 'TEXTS',
+          name: 'texts',
+        },
+        /* // Hide the top menu
             {
                 url: '/HighDimensional',
                 title: 'HighDimensional',
                 name: 'HighDimensional'
             }
             */
-            ],
-        };
-    },
-    methods: {
-        handleItemClick: function(item) {
-            this.selected = item.name;
-            this.$router.push(item.url);
-        },
+      ],
+    };
+  },
+  methods: {
+    handleItemClick: function(item) {
+      this.selected = item.name;
+      this.$router.push(item.url);
     },
+  },
 };
 </script>
 

frontend/src/common/component/ExpandPanel.vue

@@ -22,20 +22,20 @@
 </template>
 <script>
 export default {
-    props: {
-        title: String,
-        info: Number,
-    },
-    computed: {
-        iconName() {
-            return this.isShow ? 'expand_less' : 'expand_more';
-        },
-    },
-    data() {
-        return {
-            isShow: true,
-        };
+  props: {
+    title: String,
+    info: Number,
+  },
+  computed: {
+    iconName() {
+      return this.isShow ? 'expand_less' : 'expand_more';
     },
+  },
+  data() {
+    return {
+      isShow: true,
+    };
+  },
 };
 </script>
 <style lang="stylus">

frontend/src/common/component/Notification/Notification.js

@@ -11,10 +11,10 @@ const instances = [];
  * @return {number} final top dist
  */
 function calcTopDist(topDist = 16) {
-    for (let i = 0, len = instances.length; i < len; i++) {
-        topDist += (instances[i].vm.el.offsetHeight + 16);
-    }
-    return topDist;
+  for (let i = 0, len = instances.length; i < len; i++) {
+    topDist += (instances[i].vm.el.offsetHeight + 16);
+  }
+  return topDist;
 }
 
 /**
@@ -24,28 +24,28 @@ function calcTopDist(topDist = 16) {
  * @return {NotificationItem} instance
  */
 const notification = function(options = {}) {
-    options.top = calcTopDist(options.offset);
-    const {onClose, onClick} = options;
-    delete options.onClick;
-    delete options.onClose;
-    delete options.offset;
-    const instance = {
-        vm: new NotificationItem({
-            data: options,
-        }),
-        id: `notification_${seed++}`,
-    };
+  options.top = calcTopDist(options.offset);
+  const {onClose, onClick} = options;
+  delete options.onClick;
+  delete options.onClose;
+  delete options.offset;
+  const instance = {
+    vm: new NotificationItem({
+      data: options,
+    }),
+    id: `notification_${seed++}`,
+  };
 
-    if (typeof onClick === 'function') {
-        instance.vm.on('itemClick', onClick);
-    }
-    instance.vm.on('close', () => {
-        notification.close(instance.id, onClose);
-    });
-    instance.vm.attach(document.body);
+  if (typeof onClick === 'function') {
+    instance.vm.on('itemClick', onClick);
+  }
+  instance.vm.on('close', () => {
+    notification.close(instance.id, onClose);
+  });
+  instance.vm.attach(document.body);
 
-    instances.push(instance);
-    return instance.vm;
+  instances.push(instance);
+  return instance.vm;
 };
 
 /**
@@ -55,44 +55,44 @@ const notification = function(options = {}) {
  * @param {Function} onClose cusmtom func
  */
 notification.close = function(id, onClose) {
-    let index;
-    let removedHeight;
-    let len = instances.length;
-    for (let i = 0; i < len; i++) {
-        if (id === instances[i].id) {
-            if (typeof onClose === 'function') {
-                onClose(instances[i]);
-            }
-            index = i;
-            removedHeight = instances[i].vm.el.offsetHeight;
-            // distroy instance
-            instances[i].vm.dispose();
-            instances[i] = null;
-            // reomve instance fron instances
-            instances.splice(i, 1);
-            break;
-        }
+  let index;
+  let removedHeight;
+  let len = instances.length;
+  for (let i = 0; i < len; i++) {
+    if (id === instances[i].id) {
+      if (typeof onClose === 'function') {
+        onClose(instances[i]);
+      }
+      index = i;
+      removedHeight = instances[i].vm.el.offsetHeight;
+      // distroy instance
+      instances[i].vm.dispose();
+      instances[i] = null;
+      // reomve instance fron instances
+      instances.splice(i, 1);
+      break;
     }
-    // change the left notification's height
-    if (len > 1) {
-        for (let i = index; i < len - 1; i++) {
-            instances[i].vm.el.style.top = `${parseInt(instances[i].vm.el.style.top, 10) - removedHeight - 16}px`;
-        }
+  }
+  // change the left notification's height
+  if (len > 1) {
+    for (let i = index; i < len - 1; i++) {
+      instances[i].vm.el.style.top = `${parseInt(instances[i].vm.el.style.top, 10) - removedHeight - 16}px`;
     }
+  }
 };
 
 // fout type func
 ['success', 'warning', 'info', 'error'].forEach((type) => {
-    notification[type] = (options) => {
-        if (typeof options === 'string') {
-            options = {
-                message: options,
-            };
-        }
-        options = options || {};
-        options.type = type;
-        return notification(options);
-    };
+  notification[type] = (options) => {
+    if (typeof options === 'string') {
+      options = {
+        message: options,
+      };
+    }
+    options = options || {};
+    options.type = type;
+    return notification(options);
+  };
 });
 
 export default notification;

frontend/src/common/util/autoAdjustHeight.js

 export default function autoAdjustHeight() {
-    // compute the container height
+  // compute the container height
+  let containerHeight = window.innerHeight - 64;
+  let containerLeftEl = document.getElementsByClassName('visual-dl-page-left')[0];
+  let containerRightEl = document.getElementsByClassName('visual-dl-page-right')[0];
+  containerLeftEl.style.height = containerHeight + 'px';
+  containerRightEl.style.height = containerHeight + 'px';
+  window.addEventListener('resize', () => {
     let containerHeight = window.innerHeight - 64;
-    let containerLeftEl = document.getElementsByClassName('visual-dl-page-left')[0];
-    let containerRightEl = document.getElementsByClassName('visual-dl-page-right')[0];
     containerLeftEl.style.height = containerHeight + 'px';
     containerRightEl.style.height = containerHeight + 'px';
-    window.addEventListener('resize', () => {
-        let containerHeight = window.innerHeight - 64;
-        containerLeftEl.style.height = containerHeight + 'px';
-        containerRightEl.style.height = containerHeight + 'px';
-    });
+  });
 }

frontend/src/common/util/downLoadFile.js

@@ -3,19 +3,19 @@ import FileSaver from 'file-saver';
 const aoaToSheet = XLSX.utils.aoa_to_sheet;
 const saveAs = FileSaver.saveAs;
 function s2ab(s) {
-    if (typeof ArrayBuffer !== 'undefined') {
-        let buf = new ArrayBuffer(s.length);
-        let view = new Uint8Array(buf);
-        for (let i = 0; i !== s.length; ++i) {
-            view[i] = s.charCodeAt(i) & 0xFF;
-        }
-        return buf;
-    }
-    let buf = new Array(s.length);
+  if (typeof ArrayBuffer !== 'undefined') {
+    let buf = new ArrayBuffer(s.length);
+    let view = new Uint8Array(buf);
     for (let i = 0; i !== s.length; ++i) {
-        buf[i] = s.charCodeAt(i) & 0xFF;
+      view[i] = s.charCodeAt(i) & 0xFF;
     }
     return buf;
+  }
+  let buf = new Array(s.length);
+  for (let i = 0; i !== s.length; ++i) {
+    buf[i] = s.charCodeAt(i) & 0xFF;
+  }
+  return buf;
 }
 
 /**
@@ -26,28 +26,28 @@ function s2ab(s) {
  * @param {string} name filename
  */
 export const generateXLSXandAutoDownload = function(data, name) {
-    let wopts = {
-        bookType: 'xlsx',
-        bookSST: false,
-        type: 'binary',
-    };
-    let ws = aoaToSheet(data);
-    let wb = {
-        SheetNames: ['Export'],
-        Sheets: {},
-        Props: {},
-    };
-    wb.Sheets.Export = ws;
-    let wbout = XLSX.write(wb, wopts);
-    saveAs(
-        new Blob(
-            [s2ab(wbout)],
-            {
-                type: 'application/octet-stream',
-            }
-        ),
-        name + '.xlsx' || 'sheetjs.xlsx'
-    );
+  let wopts = {
+    bookType: 'xlsx',
+    bookSST: false,
+    type: 'binary',
+  };
+  let ws = aoaToSheet(data);
+  let wb = {
+    SheetNames: ['Export'],
+    Sheets: {},
+    Props: {},
+  };
+  wb.Sheets.Export = ws;
+  let wbout = XLSX.write(wb, wopts);
+  saveAs(
+    new Blob(
+      [s2ab(wbout)],
+      {
+        type: 'application/octet-stream',
+      }
+    ),
+    name + '.xlsx' || 'sheetjs.xlsx'
+  );
 };
 
 /**
@@ -58,13 +58,13 @@ export const generateXLSXandAutoDownload = function(data, name) {
  * @param {string} name filename
  */
 export const generateJsonAndDownload = function(data, name) {
-    saveAs(
-        new Blob(
-            [s2ab(JSON.stringify(data, null, '    '))],
-            {
-                type: 'application/octet-stream',
-            }
-        ),
-        name + '.json' || 'json.json'
-    );
+  saveAs(
+    new Blob(
+      [s2ab(JSON.stringify(data, null, '    '))],
+      {
+        type: 'application/octet-stream',
+      }
+    ),
+    name + '.json' || 'json.json'
+  );
 };

frontend/src/common/util/http.js

@@ -6,35 +6,35 @@ const STATUS = 'status';
 const STATUSINFO = 'msg';
 
 const instance = axios.create({
-    baseURL: '/',
-    timeout: 30000,
+  baseURL: '/',
+  timeout: 30000,
 });
 
 // for better ux, don't send the error msg because there will be too mutch error
 const responseErrorStatus = (response) => {
-    const data = response.data;
-    // if (data[STATUS] !== 0) {
-    //     Notification.error(data[STATUSINFO]);
-    //     return Promise.reject(data);
-    // }
-    return data;
+  const data = response.data;
+  // if (data[STATUS] !== 0) {
+  //     Notification.error(data[STATUSINFO]);
+  //     return Promise.reject(data);
+  // }
+  return data;
 };
 
 // for better ux, don't send the error msg because there will be too mutch error
 const responseNetError = (error) => {
-    // Notification.error('net error');
-    return Promise.reject(error);
+  // Notification.error('net error');
+  return Promise.reject(error);
 };
 
 // post from
 const formInstance = axios.create({
-    baseURL: '/',
-    timeout: 3000,
-    transformRequest: [(data) => qs.stringify(data)],
-    headers: {
-        'Content-Type': 'application/x-www-form-urlencoded',
-        'Accept': 'application/json,application/vnd.ms-excel',
-    },
+  baseURL: '/',
+  timeout: 3000,
+  transformRequest: [(data) => qs.stringify(data)],
+  headers: {
+    'Content-Type': 'application/x-www-form-urlencoded',
+    'Accept': 'application/json,application/vnd.ms-excel',
+  },
 });
 
 
@@ -43,10 +43,10 @@ formInstance.interceptors.response.use(responseErrorStatus, responseNetError);
 instance.interceptors.response.use(responseErrorStatus, responseNetError);
 
 export const makeService = (url, opt = {method: 'get'}) => (params = {}) => {
-    if (opt.method === 'delete' || opt.method === 'get') {
-        params = {params};
-    }
-    return instance[opt.method](url, params);
+  if (opt.method === 'delete' || opt.method === 'get') {
+    params = {params};
+  }
+  return instance[opt.method](url, params);
 };
 
 export const makeFormService = (url, method = 'post') => (params = {}) => formInstance[method](url, params);

frontend/src/common/util/index.js

 import quantile from './quantile';
 
 export {
-    quantile,
+  quantile,
 };

frontend/src/common/util/number.js

 export default function(x) {
-    return x === null ? NaN : +x;
+  return x === null ? NaN : +x;
 }

frontend/src/common/util/quantile.js

 import number from './number';
 export default function(values, p, valueof) {
-    if (valueof == null) {
-        return valueof = number;
-    }
-    let n = values.length;
-    if (!(n)) {
-        return;
-    }
-    if ((p = +p) <= 0 || n < 2) {
-        return +valueof(values[0], 0, values);
-    }
-    if (p >= 1) {
-        return +valueof(values[n - 1], n - 1, values);
-    }
-    let i = (n - 1) * p;
-    let i0 = Math.floor(i);
-    let value0 = +valueof(values[i0], i0, values);
-    let value1 = +valueof(values[i0 + 1], i0 + 1, values);
-    return value0 + (value1 - value0) * (i - i0);
+  if (valueof == null) {
+    return valueof = number;
+  }
+  let n = values.length;
+  if (!(n)) {
+    return;
+  }
+  if ((p = +p) <= 0 || n < 2) {
+    return +valueof(values[0], 0, values);
+  }
+  if (p >= 1) {
+    return +valueof(values[n - 1], n - 1, values);
+  }
+  let i = (n - 1) * p;
+  let i0 = Math.floor(i);
+  let value0 = +valueof(values[i0], i0, values);
+  let value1 = +valueof(values[i0 + 1], i0 + 1, values);
+  return value0 + (value1 - value0) * (i - i0);
 }

frontend/src/common/util/routeTo.js

 import {router} from 'san-router';
 
 export function routeTo(url, params = {}) {
-    let paramsArr = Object.keys(params).map((key) => `${key}=${params[key]}`);
-    let urlParams = (url.indexOf('?') > -1 ? '&' : '?') + paramsArr.join('&');
+  let paramsArr = Object.keys(params).map((key) => `${key}=${params[key]}`);
+  let urlParams = (url.indexOf('?') > -1 ? '&' : '?') + paramsArr.join('&');
 
-    router.locator.redirect(urlParams.length > 1 ? `${url}${urlParams}` : url);
+  router.locator.redirect(urlParams.length > 1 ? `${url}${urlParams}` : url);
 }

frontend/src/graph/Graph.vue

@@ -29,33 +29,33 @@ import Chart from './ui/Chart';
 
 
 export default {
-    components: {
-        'ui-config': Config,
-        'ui-chart': Chart,
+  components: {
+    'ui-config': Config,
+    'ui-chart': Chart,
+  },
+  name: 'Graph',
+  data() {
+    return {
+      config: {
+        scale: 0.5,
+      },
+      fitScreen: {fitScreen: false},
+      download: {download: false},
+      curNode: {},
+    };
+  },
+  mounted() {
+    autoAdjustHeight();
+  },
+  methods: {
+    handleFitScreen() {
+      this.fitScreen = {fitScreen: true};
+      this.config.scale = 0.5;
     },
-    name: 'Graph',
-    data() {
-        return {
-            config: {
-                scale: 0.5,
-            },
-            fitScreen: {fitScreen: false},
-            download: {download: false},
-            curNode: {},
-        };
-    },
-    mounted() {
-        autoAdjustHeight();
-    },
-    methods: {
-        handleFitScreen() {
-            this.fitScreen = {fitScreen: true};
-            this.config.scale = 0.5;
-        },
-        handleDownload() {
-            this.download = {fitScreen: true};
-        },
+    handleDownload() {
+      this.download = {fitScreen: true};
     },
+  },
 };
 
 </script>

frontend/src/graph/index.js

@@ -3,7 +3,7 @@ import {router} from 'san-router';
 import Graph from './Graph';
 
 router.add({
-    target: '#content',
-    rule: '/graphs',
-    Component: Graph,
+  target: '#content',
+  rule: '/graphs',
+  Component: Graph,
 });

frontend/src/graph/ui/Chart.vue

@@ -7,271 +7,271 @@
 </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';
-
-    // for d3 drawing
-    import * as d3 from 'd3';
-
-    export default {
-        props: {
-            'fitScreen': {
-                type: Function,
-                required: true,
-            },
-            'download': {
-                type: Function,
-                required: true,
-            },
-            'scale': {
-                type: Number,
-                default: 1,
-            },
-            'curNode': {
-                type: Object,
-                default: {},
-            }},
-        computed: {
-            computedWidth() {
-                let scale = this.scale;
-                return Math.floor(scale * 2 * 700);
-            },
-        },
-        data() {
-            return {
-                myCY: null,
-                graphUrl: '',
-            };
-        },
-        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() {
-            this.getOriginChartsData();
-            let chartScope = this;
-            getPluginGraphsGraph().then(({errno, data}) => {
-                let graphData = data.data;
-
-                // d3 svg drawing
-                let g = new dagreD3.graphlib.Graph()
-                    .setGraph({})
-                    .setDefaultEdgeLabel(function() {
-                      return {};
-                    });
-
-                // eslint-disable-next-line
+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';
+
+// for d3 drawing
+import * as d3 from 'd3';
+
+export default {
+  props: {
+    'fitScreen': {
+      type: Function,
+      required: true,
+    },
+    'download': {
+      type: Function,
+      required: true,
+    },
+    'scale': {
+      type: Number,
+      default: 1,
+    },
+    'curNode': {
+      type: Object,
+      default: {},
+  }},
+  computed: {
+    computedWidth() {
+      let scale = this.scale;
+      return Math.floor(scale * 2 * 700);
+    },
+  },
+  data() {
+    return {
+      myCY: null,
+      graphUrl: '',
+    };
+  },
+  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() {
+    this.getOriginChartsData();
+    let chartScope = this;
+    getPluginGraphsGraph().then(({errno, data}) => {
+      let graphData = data.data;
+
+      // d3 svg drawing
+      let g = new dagreD3.graphlib.Graph()
+        .setGraph({})
+        .setDefaultEdgeLabel(function() {
+          return {};
+      });
+
+      // eslint-disable-next-line
                 let render = new dagreD3.render();
-                let nodeKeys = [];
-
-                let buildInputNodeLabel = function(inputNode) {
-                    // TODO(daming-lu): need more complex compound node
-                    let nodeLabel = 'id: ' + inputNode['name'] + '\n'
-                        + 'type: ' + inputNode['data_type'] + '\n'
-                        + 'dims: ' + inputNode['shape'].join(' x ');
-                    return nodeLabel;
-                };
-
-                // add input nodes
-                for (let i=0; i<graphData['input'].length; ++i) {
-                    let curInputNode = graphData['input'][i];
-                    let nodeKey = curInputNode['name'];
-                    g.setNode(
-                        nodeKey,
-                        {
-                            label: buildInputNodeLabel(curInputNode),
-                            class: 'input',
-                            style: 'stroke: #A3D39C; stroke-width: 3px; ' +
-                                   'stroke-dasharray: 5, 5;',
-                            labelStyle: 'font-size: 0.8em;',
-
-                        }
-                    );
-                    nodeKeys.push(nodeKey);
-                }
-
-                // add operator nodes then add edges from inputs to operator and from operator to output
-                for (let i=0; i<graphData['node'].length; ++i) {
-                    let curOperatorNode = graphData['node'][i];
-                    let nodeKey = 'opNode_' + i;
-
-                    // add operator node
-                    let curOpLabel = curOperatorNode['opType'];
-                    g.setNode(
-                        nodeKey,
-                        {
-                            label: curOpLabel + ' '.repeat(Math.floor(curOpLabel.length/5)),
-                            class: 'operator',
-                            style: 'opacity: 0.5;',
-
-                        }
-                    );
-                    nodeKeys.push(nodeKey);
-
-                    // add output node
-                    let outputNodeKey = curOperatorNode['output'][0];
-                    let outputPadding = ' '.repeat(Math.floor(outputNodeKey.length/2));
-                    g.setNode(
-                        outputNodeKey,
-                        {
-                            label: outputNodeKey + outputPadding,
-                            class: 'output',
-                            style: 'opacity: 0.5;' +
-                                    'stroke-width: 2px; ' +
-                                    'stroke-dasharray: 5, 5;',
-                            shape: 'diamond',
-
-                        }
-                    );
-                    nodeKeys.push(outputNodeKey);
-
-                    // add edges from inputs to node and from node to output
-                    for (let e=0; e<curOperatorNode['input'].length; ++e) {
-                        g.setEdge(curOperatorNode['input'][e], nodeKey);
-                    }
-                    g.setEdge(nodeKey, curOperatorNode['output'][0]);
-                }
-
-                // 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);
-
-                svg.selectAll('.node').on('click', function(d, i) {
-                    chartScope.curNode = g.node(d);
-                    let nodeType = chartScope.curNode.class;
-                    let nodeInfo = null;
-                    if (nodeType === 'operator') {
-                        let opIndex = d.slice(7); // remove prefix "opNode_"
-                        nodeInfo = graphData.node[opIndex];
-                    } else if (nodeType === 'input') {
-                        nodeInfo = graphData.input[d-1];
-                    } else {
-                        nodeInfo = 'output';
-                    }
-
-                    chartScope.$emit('curNodeUpdated',
-                        {
-                            'nodeType': nodeType,
-                            'nodeInfo': nodeInfo,
-                        });
-                });
-            });
+      let nodeKeys = [];
+
+      let buildInputNodeLabel = function(inputNode) {
+        // TODO(daming-lu): need more complex compound node
+        let nodeLabel = 'id: ' + inputNode['name'] + '\n'
+          + 'type: ' + inputNode['data_type'] + '\n'
+          + 'dims: ' + inputNode['shape'].join(' x ');
+        return nodeLabel;
+      };
+
+      // add input nodes
+      for (let i=0; i<graphData['input'].length; ++i) {
+        let curInputNode = graphData['input'][i];
+        let nodeKey = curInputNode['name'];
+        g.setNode(
+          nodeKey,
+          {
+            label: buildInputNodeLabel(curInputNode),
+            class: 'input',
+            style: 'stroke: #A3D39C; stroke-width: 3px; ' +
+              'stroke-dasharray: 5, 5;',
+            labelStyle: 'font-size: 0.8em;',
+
+          }
+        );
+        nodeKeys.push(nodeKey);
+      }
+
+      // add operator nodes then add edges from inputs to operator and from operator to output
+      for (let i=0; i<graphData['node'].length; ++i) {
+        let curOperatorNode = graphData['node'][i];
+        let nodeKey = 'opNode_' + i;
+
+        // add operator node
+        let curOpLabel = curOperatorNode['opType'];
+        g.setNode(
+          nodeKey,
+          {
+            label: curOpLabel + ' '.repeat(Math.floor(curOpLabel.length/5)),
+            class: 'operator',
+            style: 'opacity: 0.5;',
+
+          }
+        );
+        nodeKeys.push(nodeKey);
+
+        // add output node
+        let outputNodeKey = curOperatorNode['output'][0];
+        let outputPadding = ' '.repeat(Math.floor(outputNodeKey.length/2));
+        g.setNode(
+          outputNodeKey,
+          {
+            label: outputNodeKey + outputPadding,
+            class: 'output',
+            style: 'opacity: 0.5;' +
+              'stroke-width: 2px; ' +
+              'stroke-dasharray: 5, 5;',
+            shape: 'diamond',
+
+          }
+        );
+        nodeKeys.push(outputNodeKey);
+
+        // add edges from inputs to node and from node to output
+        for (let e=0; e<curOperatorNode['input'].length; ++e) {
+          g.setEdge(curOperatorNode['input'][e], nodeKey);
+        }
+        g.setEdge(nodeKey, curOperatorNode['output'][0]);
+      }
+
+      // 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);
+
+      svg.selectAll('.node').on('click', function(d, i) {
+        chartScope.curNode = g.node(d);
+        let nodeType = chartScope.curNode.class;
+        let nodeInfo = null;
+        if (nodeType === 'operator') {
+          let opIndex = d.slice(7); // remove prefix "opNode_"
+          nodeInfo = graphData.node[opIndex];
+        } else if (nodeType === 'input') {
+          nodeInfo = graphData.input[d-1];
+        } else {
+          nodeInfo = 'output';
+        }
+
+        chartScope.$emit('curNodeUpdated',
+                         {
+                           'nodeType': nodeType,
+                           'nodeInfo': nodeInfo,
+        });
+      });
+    });
+  },
+
+  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 chartScope = 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 = chartScope.getBigImgEl();
+            let relativeEl = chartScope.getSmallImgDragHandler();
+
+            relativeMove({triggerEl, x, y}, relativeEl);
+          });
         },
-
-        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 chartScope = 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 = chartScope.getBigImgEl();
-                            let relativeEl = chartScope.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 = chartScope.getSmallImgEl();
-                            let relativeEl = chartScope.getBigImgEl();
-
-                            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 = chartScope.getSmallImgEl();
+            let relativeEl = chartScope.getBigImgEl();
+
+            relativeMove({triggerEl, x, y}, relativeEl);
+          });
+        },
+      });
+    },
+  },
+};
 </script>
 <style lang="stylus">
     .node rect

frontend/src/graph/ui/Config.vue

@@ -54,15 +54,15 @@
 <script>
 
 export default {
-    props: ['config', 'curNode'],
-    methods: {
-        handleFitScreen() {
-            this.$emit('fitScreen');
-        },
-        handleDownload() {
-            this.$emit('download');
-        },
+  props: ['config', 'curNode'],
+  methods: {
+    handleFitScreen() {
+      this.$emit('fitScreen');
     },
+    handleDownload() {
+      this.$emit('download');
+    },
+  },
 };
 </script>
 <style lang="stylus">

frontend/src/graph/ui/dragHelper.js

 
 export const dragMovelHandler = (event, callback) => {
-    let target = event.target;
-    // keep the dragged position in the data-x/data-y attributes
-    let x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
-    let y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
-    callback(target, x, y);
+  let target = event.target;
+  // keep the dragged position in the data-x/data-y attributes
+  let x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
+  let y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
+  callback(target, x, y);
 };
 
 export const tansformElement = (target, x, y) => {
-    // translate the element
-    target.style.webkitTransform = target.style.transform
+  // translate the element
+  target.style.webkitTransform = target.style.transform
     = 'translate(' + x + 'px, ' + y + 'px)';
-    // update the posiion attributes
-    target.setAttribute('data-x', x);
-    target.setAttribute('data-y', y);
+  // update the posiion attributes
+  target.setAttribute('data-x', x);
+  target.setAttribute('data-y', y);
 };
 
 export const relativeMove = ({triggerEl, x, y}, relativeEl) => {
-    let {offsetWidth: tWidth, offsetHeight: tHeight} = triggerEl;
-    let {offsetWidth: rWidth, offsetHeight: rHeight} = relativeEl;
+  let {offsetWidth: tWidth, offsetHeight: tHeight} = triggerEl;
+  let {offsetWidth: rWidth, offsetHeight: rHeight} = relativeEl;
 
-    let rX = (x / tWidth) * rWidth;
-    let rY = (y / tHeight) * rHeight;
+  let rX = (x / tWidth) * rWidth;
+  let rY = (y / tHeight) * rHeight;
 
-    tansformElement(relativeEl, -rX, -rY);
+  tansformElement(relativeEl, -rX, -rY);
 };

frontend/src/high-dimensional/HighDimensional.vue

@@ -26,56 +26,56 @@ import Config from './ui/Config';
 import Chart from './ui/Chart';
 
 export default {
-    components: {
-        'ui-config': Config,
-        'ui-chart': Chart,
+  components: {
+    'ui-config': Config,
+    'ui-chart': Chart,
+  },
+  name: 'HighDimensional',
+  data() {
+    return {
+      config: {
+        searchText: '',
+        displayWordLabel: true,
+        dimension: '2',
+        reduction: 'tsne',
+        running: true,
+      },
+      embedding_data: [],
+    };
+  },
+  created() {
+    this.fetchDatasets();
+  },
+  watch: {
+    'config.dimension': function(val) {
+      this.fetchDatasets();
     },
-    name: 'HighDimensional',
-    data() {
-        return {
-            config: {
-                searchText: '',
-                displayWordLabel: true,
-                dimension: '2',
-                reduction: 'tsne',
-                running: true,
-            },
-            embedding_data: [],
-        };
+    'config.reduction': function(val) {
+      this.fetchDatasets();
     },
-    created() {
-        this.fetchDatasets();
-    },
-    watch: {
-        'config.dimension': function(val) {
-            this.fetchDatasets();
-        },
-        'config.reduction': function(val) {
-            this.fetchDatasets();
-        },
-    },
-    mounted() {
-        autoAdjustHeight();
-    },
-    methods: {
-        fetchDatasets() {
-            // Fetch the data from the server. Passing dimension and reduction method
-            let params = {
-                dimension: this.config.dimension,
-                reduction: this.config.reduction,
-            };
-            getHighDimensionalDatasets(params).then(({errno, data}) => {
-                let vector_data = data.embedding;
-                let labels = data.labels;
+  },
+  mounted() {
+    autoAdjustHeight();
+  },
+  methods: {
+    fetchDatasets() {
+      // Fetch the data from the server. Passing dimension and reduction method
+      let params = {
+        dimension: this.config.dimension,
+        reduction: this.config.reduction,
+      };
+      getHighDimensionalDatasets(params).then(({errno, data}) => {
+        let vector_data = data.embedding;
+        let labels = data.labels;
 
-                for ( let i = 0; i < vector_data.length; i ++) {
-                  vector_data[i].push(labels[i]);
-                }
+        for ( let i = 0; i < vector_data.length; i ++) {
+          vector_data[i].push(labels[i]);
+        }
 
-                this.embedding_data = vector_data;
-            });
-        },
+        this.embedding_data = vector_data;
+      });
     },
+  },
 };
 
 </script>

frontend/src/high-dimensional/ui/Chart.vue

@@ -14,179 +14,179 @@ import echarts from 'echarts';
 import 'echarts-gl';
 
 export default {
-    props: ['config', 'displayWordLabel', 'searchText', 'embedding_data', 'dimension'],
-    data() {
-        return {
-            width: 900,
-            height: 600,
-        };
+  props: ['config', 'displayWordLabel', 'searchText', 'embedding_data', 'dimension'],
+  data() {
+    return {
+      width: 900,
+      height: 600,
+    };
+  },
+  computed: {
+    computedStyle() {
+      return 'height:' + this.height + 'px;' +
+        'width:' + this.width + 'px;';
     },
-    computed: {
-        computedStyle() {
-            return 'height:' + this.height + 'px;' +
-                'width:' + this.width + 'px;';
-        },
-    },
-    created() {},
-    mounted() {
-        this.createChart();
-        this.myChart.showLoading();
+  },
+  created() {},
+  mounted() {
+    this.createChart();
+    this.myChart.showLoading();
 
+    this.set2DChartOptions();
+    this.setDisplayWordLabel();
+  },
+  watch: {
+    embedding_data: function(val) {
+      this.myChart.hideLoading();
+      this.myChart.setOption({
+        series: [{
+          // Grab the 'matched' series data
+          name: 'all',
+          data: val,
+        }],
+      });
+    },
+    displayWordLabel: function(val) {
+      this.setDisplayWordLabel();
+    },
+    dimension: function(val) {
+      this.myChart.clear();
+      this.myChart.showLoading();
+      if (val === '2') {
         this.set2DChartOptions();
         this.setDisplayWordLabel();
+      } else {
+        this.set3DChartOptions();
+        this.setDisplayWordLabel();
+      }
     },
-    watch: {
-        embedding_data: function(val) {
-            this.myChart.hideLoading();
-            this.myChart.setOption({
-                series: [{
-                    // Grab the 'matched' series data
-                    name: 'all',
-                    data: val,
-                }],
-            });
-        },
-        displayWordLabel: function(val) {
-            this.setDisplayWordLabel();
-        },
-        dimension: function(val) {
-            this.myChart.clear();
-            this.myChart.showLoading();
-            if (val === '2') {
-                this.set2DChartOptions();
-                this.setDisplayWordLabel();
-            } else {
-                this.set3DChartOptions();
-                this.setDisplayWordLabel();
-            }
-        },
-        searchText: function(val) {
-            // Filter the data that has the hasPrefix
-            let matched_words = [];
-            if (val != '') {
-                val = val.toLowerCase();
+    searchText: function(val) {
+      // Filter the data that has the hasPrefix
+      let matched_words = [];
+      if (val != '') {
+        val = val.toLowerCase();
 
-                function hasPrefix(value) {
-                    let word = value[value.length - 1];
-                    return (typeof word == 'string' && word.toLowerCase().startsWith(val));
-                }
+        function hasPrefix(value) {
+          let word = value[value.length - 1];
+          return (typeof word == 'string' && word.toLowerCase().startsWith(val));
+        }
 
-                matched_words = this.embedding_data.filter(hasPrefix);
-            }
+        matched_words = this.embedding_data.filter(hasPrefix);
+      }
 
-            // Update the matched series data
-            this.myChart.setOption({
-                series: [{
-                    // Grab the 'matched' series data
-                    name: 'matched',
-                    data: matched_words,
-                }],
-            });
-        },
+      // Update the matched series data
+      this.myChart.setOption({
+        series: [{
+          // Grab the 'matched' series data
+          name: 'matched',
+          data: matched_words,
+        }],
+      });
     },
-    methods: {
-        createChart() {
-            // Initialize the eChartBox
-            let el = this.$refs.chartBox;
-            this.myChart = echarts.init(el);
-        },
-        set2DChartOptions() {
-            let typeD = 'normal';
-            let option = {
-                xAxis: {},
-                yAxis: {},
-                series: [{
-                        name: 'all',
-                        symbolSize: 10,
-                        data: this.embedding_data,
-                        type: 'scatter',
-                    },
-                    {
-                        name: 'matched',
-                        animation: false,
-                        symbolSize: 10,
-                        data: [],
-                        itemStyle: {
-                            normal: {
-                                opacity: 1,
-                            },
-                        },
-                        label: {
-                            normal: {
-                                show: true,
-                                formatter: function(param) {
-                                    return param.data[param.data.length - 1];
-                                },
-                                position: 'top',
-                            },
-                        },
-                        type: 'scatter',
-                    },
-                ],
-            };
-            this.myChart.setOption(option);
-        },
-        set3DChartOptions() {
-          let symbolSize = 2.5;
-          let option3d = {
-            grid3D: {},
-                    xAxis3D: {
-                        type: 'category',
-                    },
-                    yAxis3D: {},
-                    xAxis3D: {},
-                    zAxis3D: {},
-                    dataset: {
-                        source: this.embedding_data,
-                    },
-                    series: [
-                        {
-                            name: 'all',
-                            type: 'scatter3D',
-                            symbolSize: symbolSize,
-                            data: [],
-                        },
-                        {
-                            name: 'matched',
-                            animation: false,
-                            symbolSize: symbolSize,
-                            data: [],
-                            label: {
-                                normal: {
-                                    show: true,
-                                    formatter: function(param) {
-                                        return param.data[param.data.length - 1];
-                                    },
-                                    position: 'top',
-                                },
-                            },
-                            type: 'scatter3D',
-                        },
-                    ],
-          };
-          this.myChart.setOption(option3d);
+  },
+  methods: {
+    createChart() {
+      // Initialize the eChartBox
+      let el = this.$refs.chartBox;
+      this.myChart = echarts.init(el);
+    },
+    set2DChartOptions() {
+      let typeD = 'normal';
+      let option = {
+        xAxis: {},
+        yAxis: {},
+        series: [{
+                   name: 'all',
+                   symbolSize: 10,
+                   data: this.embedding_data,
+                   type: 'scatter',
+                 },
+                 {
+                   name: 'matched',
+                   animation: false,
+                   symbolSize: 10,
+                   data: [],
+                   itemStyle: {
+                     normal: {
+                       opacity: 1,
+                     },
+                   },
+                   label: {
+                     normal: {
+                       show: true,
+                       formatter: function(param) {
+                         return param.data[param.data.length - 1];
+                       },
+                       position: 'top',
+                     },
+                   },
+                   type: 'scatter',
+                 },
+        ],
+      };
+      this.myChart.setOption(option);
+    },
+    set3DChartOptions() {
+      let symbolSize = 2.5;
+      let option3d = {
+        grid3D: {},
+        xAxis3D: {
+          type: 'category',
         },
-        setDisplayWordLabel() {
-            this.myChart.setOption({
-                series: [{
-                    // Grab the 'all' series data
-                    name: 'all',
-                    label: {
-                        normal: {
-                            show: this.displayWordLabel,
-                            formatter: function(param) {
-                                return param.data[param.data.length - 1];
-                            },
-                            position: 'top',
-                        },
-                        emphasis: {
-                            show: true,
-                        },
-                    },
-                }],
-            });
+        yAxis3D: {},
+        xAxis3D: {},
+        zAxis3D: {},
+        dataset: {
+          source: this.embedding_data,
         },
+        series: [
+          {
+            name: 'all',
+            type: 'scatter3D',
+            symbolSize: symbolSize,
+            data: [],
+          },
+          {
+            name: 'matched',
+            animation: false,
+            symbolSize: symbolSize,
+            data: [],
+            label: {
+              normal: {
+                show: true,
+                formatter: function(param) {
+                  return param.data[param.data.length - 1];
+                },
+                position: 'top',
+              },
+            },
+            type: 'scatter3D',
+          },
+        ],
+      };
+      this.myChart.setOption(option3d);
+    },
+    setDisplayWordLabel() {
+      this.myChart.setOption({
+        series: [{
+          // Grab the 'all' series data
+          name: 'all',
+          label: {
+            normal: {
+              show: this.displayWordLabel,
+              formatter: function(param) {
+                return param.data[param.data.length - 1];
+              },
+              position: 'top',
+            },
+            emphasis: {
+              show: true,
+            },
+          },
+        }],
+      });
     },
+  },
 };
 
 </script>

frontend/src/high-dimensional/ui/Config.vue

@@ -54,19 +54,19 @@
 <script>
 
 export default {
-    props: {
-        runsItems: Array,
-        config: Object,
-    },
-    data() {
-        return {
-        };
-    },
-    methods: {
-        toggleAllRuns() {
-            this.config.running = !this.config.running;
-        },
+  props: {
+    runsItems: Array,
+    config: Object,
+  },
+  data() {
+    return {
+    };
+  },
+  methods: {
+    toggleAllRuns() {
+      this.config.running = !this.config.running;
     },
+  },
 };
 
 </script>

frontend/src/histogram/Histogram.vue

@@ -35,118 +35,118 @@ import {debounce, flatten, uniq} from 'lodash';
 import autoAdjustHeight from '../common/util/autoAdjustHeight';
 
 export default {
-    components: {
-        'ui-config': Config,
-        'ui-chart-page': ChartPage,
+  components: {
+    'ui-config': Config,
+    'ui-chart-page': ChartPage,
+  },
+  computed: {
+    runsItems() {
+      let runsArray = this.runsArray || [];
+      return runsArray.map((item) => {
+        return {
+          name: item,
+          value: item,
+        };
+      });
     },
-    computed: {
-        runsItems() {
-            let runsArray = this.runsArray || [];
-            return runsArray.map((item) => {
-                return {
-                    name: item,
-                    value: item,
-                };
-            });
-        },
-        tagsList() {
-            let tags = this.tags;
+    tagsList() {
+      let tags = this.tags;
 
-            let runs = Object.keys(tags);
-            let tagsArray = runs.map((run) => Object.keys(tags[run]));
-            let allUniqTags = uniq(flatten(tagsArray));
+      let runs = Object.keys(tags);
+      let tagsArray = runs.map((run) => Object.keys(tags[run]));
+      let allUniqTags = uniq(flatten(tagsArray));
 
-            // get the data for every chart
-            return allUniqTags.map((tag) => {
-                let tagList = runs.map((run) => {
-                    return {
-                        run,
-                        tag: tags[run][tag],
-                    };
-                }).filter((item) => item.tag !== undefined);
-                return {
-                    tagList,
-                    tag,
-                    group: tag.split('/')[0],
-                };
-            });
-        },
-        groupedTags() {
-            let tagsList = this.tagsList || [];
-            // put data in group
-            let groupData = {};
-            tagsList.forEach((item) => {
-                let group = item.group;
-                if (groupData[group] === undefined) {
-                    groupData[group] = [];
-                    groupData[group].push(item);
-                } else {
-                    groupData[group].push(item);
-                }
-            });
-
-            // to array
-            let groups = Object.keys(groupData);
-            return groups.map((group) => {
-                return {
-                    group,
-                    tags: groupData[group],
-                };
-            });
-        },
-    },
-    data() {
+      // get the data for every chart
+      return allUniqTags.map((tag) => {
+        let tagList = runs.map((run) => {
+          return {
+            run,
+            tag: tags[run][tag],
+          };
+        }).filter((item) => item.tag !== undefined);
         return {
-            runsArray: [],
-            tags: [],
-            config: {
-                groupNameReg: '.*',
-                horizontal: 'step',
-                chartType: 'offset',
-                runs: [],
-                running: true,
-            },
-            filteredTagsList: [],
+          tagList,
+          tag,
+          group: tag.split('/')[0],
         };
+      });
     },
-    created() {
-        getPluginHistogramsTags().then(({errno, data}) => {
-            this.tags = data;
-            // filter when inited
-            let groupNameReg = this.config.groupNameReg;
-            this.filterTagsList(groupNameReg);
-        });
-        getRuns().then(({errno, data}) => {
-            this.runsArray = data;
-            this.config.runs = data;
-        });
-    },
+    groupedTags() {
+      let tagsList = this.tagsList || [];
+      // put data in group
+      let groupData = {};
+      tagsList.forEach((item) => {
+        let group = item.group;
+        if (groupData[group] === undefined) {
+          groupData[group] = [];
+          groupData[group].push(item);
+        } else {
+          groupData[group].push(item);
+        }
+      });
 
-    mounted() {
-        autoAdjustHeight();
+      // to array
+      let groups = Object.keys(groupData);
+      return groups.map((group) => {
+        return {
+          group,
+          tags: groupData[group],
+        };
+      });
     },
-    watch: {
-        'config.groupNameReg': function(val) {
-            this.throttledFilterTagsList();
-        },
+  },
+  data() {
+    return {
+      runsArray: [],
+      tags: [],
+      config: {
+        groupNameReg: '.*',
+        horizontal: 'step',
+        chartType: 'offset',
+        runs: [],
+        running: true,
+      },
+      filteredTagsList: [],
+    };
+  },
+  created() {
+    getPluginHistogramsTags().then(({errno, data}) => {
+      this.tags = data;
+      // filter when inited
+      let groupNameReg = this.config.groupNameReg;
+      this.filterTagsList(groupNameReg);
+    });
+    getRuns().then(({errno, data}) => {
+      this.runsArray = data;
+      this.config.runs = data;
+    });
+  },
+
+  mounted() {
+    autoAdjustHeight();
+  },
+  watch: {
+    'config.groupNameReg': function(val) {
+      this.throttledFilterTagsList();
     },
-    methods: {
-        filterTagsList(groupNameReg) {
-            if (!groupNameReg) {
-                this.filteredTagsList = [];
-                return;
-            }
-            let tagsList = this.tagsList || [];
-            let regExp = new RegExp(groupNameReg);
-            let filtedTagsList = tagsList.filter((item) => regExp.test(item.tag));
-            this.filteredTagsList = filtedTagsList;
-        },
-        throttledFilterTagsList: _.debounce(
-            function() {
-                this.filterTagsList(this.config.groupNameReg);
-            }, 300
-        ),
+  },
+  methods: {
+    filterTagsList(groupNameReg) {
+      if (!groupNameReg) {
+        this.filteredTagsList = [];
+        return;
+      }
+      let tagsList = this.tagsList || [];
+      let regExp = new RegExp(groupNameReg);
+      let filtedTagsList = tagsList.filter((item) => regExp.test(item.tag));
+      this.filteredTagsList = filtedTagsList;
     },
+    throttledFilterTagsList: _.debounce(
+      function() {
+        this.filterTagsList(this.config.groupNameReg);
+      }, 300
+    ),
+  },
 };
 
 </script>

frontend/src/histogram/histogramHelper.js

 import {min, max, range} from 'lodash';
 
 export function tansformBackendData(histogramData) {
-    let [time, step, items] = histogramData;
-    return {
-        time,
-        step,
-        min: min(items.map(([left, right, count]) => left)),
-        max: max(items.map(([left, right, count]) => right)),
-        items: items.map(([left, right, count]) => ({left, right, count})),
-    };
+  let [time, step, items] = histogramData;
+  return {
+    time,
+    step,
+    min: min(items.map(([left, right, count]) => left)),
+    max: max(items.map(([left, right, count]) => right)),
+    items: items.map(([left, right, count]) => ({left, right, count})),
+  };
 }
 
 export function computeNewHistogram(histogram, min, max, binsNum = 30) {
-    if (max === min) {
-        // Create bins even if all the data has a single value.
-        max = min * 1.1 + 1;
-        min = min / 1.1 - 1;
+  if (max === min) {
+    // Create bins even if all the data has a single value.
+    max = min * 1.1 + 1;
+    min = min / 1.1 - 1;
+  }
+  let stepWidth = (max - min) / binsNum;
+  let itemIndex = 0;
+  return range(min, max, stepWidth).map((binLeft) => {
+    let binRight = binLeft + stepWidth;
+    let yValue = 0;
+    while (itemIndex < histogram.items.length) {
+      let itemRight = Math.min(max, histogram.items[itemIndex].right);
+      let itemLeft = Math.max(min, histogram.items[itemIndex].left);
+      let overlap = Math.min(itemRight, binRight) - Math.max(itemLeft, binLeft);
+      let count = (overlap / (itemRight - itemLeft)) * histogram.items[itemIndex].count;
+      yValue += overlap > 0 ? count : 0;
+      // If `itemRight` is bigger than `binRight`, then this bin is
+      // finished and there also has data for the next bin, so don't increment
+      // `itemIndex`.
+      if (itemRight > binRight) {
+        break;
+      }
+      itemIndex++;
     }
-    let stepWidth = (max - min) / binsNum;
-    let itemIndex = 0;
-    return range(min, max, stepWidth).map((binLeft) => {
-        let binRight = binLeft + stepWidth;
-        let yValue = 0;
-        while (itemIndex < histogram.items.length) {
-            let itemRight = Math.min(max, histogram.items[itemIndex].right);
-            let itemLeft = Math.max(min, histogram.items[itemIndex].left);
-            let overlap = Math.min(itemRight, binRight) - Math.max(itemLeft, binLeft);
-            let count = (overlap / (itemRight - itemLeft)) * histogram.items[itemIndex].count;
-            yValue += overlap > 0 ? count : 0;
-            // If `itemRight` is bigger than `binRight`, then this bin is
-            // finished and there also has data for the next bin, so don't increment
-            // `itemIndex`.
-            if (itemRight > binRight) {
-                break;
-            }
-            itemIndex++;
-        }
-        return {x: binLeft, dx: stepWidth, y: yValue};
-    });
+    return {x: binLeft, dx: stepWidth, y: yValue};
+  });
 }
 
 export function tansformToVisData(tempData, time, step) {
-    return tempData.map(function(dataItem) {
-        return [time, step, dataItem.x + dataItem.dx / 2, Math.floor(dataItem.y)];
-    });
+  return tempData.map(function(dataItem) {
+    return [time, step, dataItem.x + dataItem.dx / 2, Math.floor(dataItem.y)];
+  });
 }
 
 export function originDataToChartData(originData) {
-    let tempData = originData.map(tansformBackendData);
-    let globalMin = min(tempData.map(({min}) => min));
-    let globalMax = max(tempData.map(({max}) => max));
-    let chartData = tempData.map(function(item) {
-        let histoBins = computeNewHistogram(item, globalMin, globalMax);
-        let {time, step} = item;
-        return {
-            time,
-            step,
-            items: tansformToVisData(histoBins, time, step),
-        };
-    });
+  let tempData = originData.map(tansformBackendData);
+  let globalMin = min(tempData.map(({min}) => min));
+  let globalMax = max(tempData.map(({max}) => max));
+  let chartData = tempData.map(function(item) {
+    let histoBins = computeNewHistogram(item, globalMin, globalMax);
+    let {time, step} = item;
     return {
-        min: globalMin,
-        max: globalMax,
-        chartData,
+      time,
+      step,
+      items: tansformToVisData(histoBins, time, step),
     };
+  });
+  return {
+    min: globalMin,
+    max: globalMax,
+    chartData,
+  };
 }

frontend/src/histogram/index.js

@@ -3,7 +3,7 @@ import {router} from 'san-router';
 import Histogram from './Histogram';
 
 router.add({
-    target: '#content',
-    rule: '/histograms',
-    Component: Histogram,
+  target: '#content',
+  rule: '/histograms',
+  Component: Histogram,
 });

frontend/src/histogram/ui/Chart.vue

@@ -40,483 +40,483 @@ const p = Math.max(0, precisionRound(0.01, 1.01) - 1);
 const yValueFormat = format('.' + p + 'e');
 
 export default {
-    props: ['tagInfo', 'runs', 'chartType', 'running', 'runsItems'],
-    data() {
-        return {
-            originData: [],
-            isExpand: false,
-        };
+  props: ['tagInfo', 'runs', 'chartType', 'running', 'runsItems'],
+  data() {
+    return {
+      originData: [],
+      isExpand: false,
+    };
+  },
+  watch: {
+    originData: function(val) {
+      this.initChartOption();
     },
-    watch: {
-        originData: function(val) {
-            this.initChartOption();
-        },
-        chartType: function(val) {
-            this.initChartOption();
-        },
-        running: function(val) {
-            val ? this.startInterval() : this.stopInterval();
-        },
-        isExpand: function(val) {
-            this.expandArea(val);
-        },
+    chartType: function(val) {
+      this.initChartOption();
     },
-    mounted() {
-        let tagInfo = this.tagInfo;
-        this.initChart(tagInfo);
-        if (this.running) {
-            this.startInterval();
-        }
+    running: function(val) {
+      val ? this.startInterval() : this.stopInterval();
+    },
+    isExpand: function(val) {
+      this.expandArea(val);
+    },
+  },
+  mounted() {
+    let tagInfo = this.tagInfo;
+    this.initChart(tagInfo);
+    if (this.running) {
+      this.startInterval();
+    }
+  },
+
+  beforeDestroy() {
+    this.stopInterval();
+  },
+
+  methods: {
+    initChart(tagInfo) {
+      this.createChart();
+      this.getOriginChartData(tagInfo);
     },
 
-    beforeDestroy() {
-        this.stopInterval();
+    createChart() {
+      let el = this.$refs.visual_dl_chart_box;
+      this.myChart = echarts.init(el);
     },
 
-    methods: {
-        initChart(tagInfo) {
-            this.createChart();
-            this.getOriginChartData(tagInfo);
-        },
+    initChartOption() {
+      this.myChart.clear();
+      let zr = this.myChart.getZr();
+      let hoverDots = zrDrawElement.hoverDots;
+      if (hoverDots != null && hoverDots.length !== 0) {
+        hoverDots.forEach((dot) => zr.remove(dot));
+      }
+      let chartType = this.chartType;
+      let data = this.originData;
+      let visData = originDataToChartData(data);
+      let tagInfo = this.tagInfo;
+      let title = tagInfo.tag.displayName + '(' + tagInfo.run + ')';
+      this.setChartOptions(visData, title, chartType);
+    },
 
-        createChart() {
-            let el = this.$refs.visual_dl_chart_box;
-            this.myChart = echarts.init(el);
+    setChartOptions(visData, tag, chartType) {
+      let grid = {
+        left: 45,
+        top: 60,
+        right: 40,
+        bottom: 36,
+      };
+      let title = {
+        text: tag,
+        textStyle: {
+          fontSize: '12',
+          fontWeight: 'normal',
         },
+      };
+      if (chartType === 'overlay') {
+        this.setOverlayChartOption(visData, title, grid);
+      } else if (chartType === 'offset') {
+        this.setOffsetChartOption(visData, title, grid);
+      }
+    },
 
-        initChartOption() {
-            this.myChart.clear();
-            let zr = this.myChart.getZr();
-            let hoverDots = zrDrawElement.hoverDots;
-            if (hoverDots != null && hoverDots.length !== 0) {
-                hoverDots.forEach((dot) => zr.remove(dot));
-            }
-            let chartType = this.chartType;
-            let data = this.originData;
-            let visData = originDataToChartData(data);
-            let tagInfo = this.tagInfo;
-            let title = tagInfo.tag.displayName + '(' + tagInfo.run + ')';
-            this.setChartOptions(visData, title, chartType);
+    setOverlayChartOption({chartData, min, max}, title, grid) {
+      let seriesOption = chartData.map(({time, step, items}) => ({
+        name: 'step' + step,
+        type: 'line',
+        showSymbol: false,
+        hoverAnimation: false,
+        z: 0,
+        data: items,
+        animationDuration: 100,
+        lineStyle: {
+          normal: {
+            width: 1,
+            color: '#008c99',
+          },
         },
-
-        setChartOptions(visData, tag, chartType) {
-            let grid = {
-                left: 45,
-                top: 60,
-                right: 40,
-                bottom: 36,
-            };
-            let title = {
-                text: tag,
-                textStyle: {
-                    fontSize: '12',
-                    fontWeight: 'normal',
-                },
-            };
-            if (chartType === 'overlay') {
-                this.setOverlayChartOption(visData, title, grid);
-            } else if (chartType === 'offset') {
-                this.setOffsetChartOption(visData, title, grid);
-            }
+        encode: {
+          x: [2],
+          y: [3],
         },
-
-        setOverlayChartOption({chartData, min, max}, title, grid) {
-            let seriesOption = chartData.map(({time, step, items}) => ({
-                    name: 'step' + step,
-                    type: 'line',
-                    showSymbol: false,
-                    hoverAnimation: false,
-                    z: 0,
-                    data: items,
-                    animationDuration: 100,
-                    lineStyle: {
-                        normal: {
-                            width: 1,
-                            color: '#008c99',
-                        },
-                    },
-                    encode: {
-                        x: [2],
-                        y: [3],
-                    },
-                })
-            );
-            let option = {
-                title: title,
-                axisPointer: {
-                    link: {xAxisIndex: 'all'},
-                    show: true,
-                    snap: true,
-                    triggerTooltip: true,
-                },
-                grid: grid,
-                xAxis: {
-                    type: 'value',
-                },
-                yAxis: {
-                    type: 'value',
-                    axisLine: {
-                        onZero: false,
-                    },
-                    axisLabel: {
-                        formatter(value, index) {
-                            return yValueFormat(value);
-                        },
-                    },
-                    axisPointer: {
-                        label: {
-                            formatter({value}) {
-                                return yValueFormat(value);
-                            },
-                        },
-                    },
-                },
-                series: seriesOption,
-            };
-
-            let zr1 = this.myChart.getZr();
-            zr1.on('mousemove', function(e) {
-                zr1.remove(zrDrawElement.hoverLine);
-                zr1.remove(zrDrawElement.tooltip);
-                zr1.remove(zrDrawElement.tooltipX);
-                zr1.remove(zrDrawElement.tooltipY);
-                zrDrawElement.hoverDots.forEach((dot) => zr1.remove(dot));
-                zrDrawElement.hoverDots.length = 0;
-            });
-
-            this.myChart.setOption(option, {notMerge: true});
+      })
+      );
+      let option = {
+        title: title,
+        axisPointer: {
+          link: {xAxisIndex: 'all'},
+          show: true,
+          snap: true,
+          triggerTooltip: true,
         },
+        grid: grid,
+        xAxis: {
+          type: 'value',
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            onZero: false,
+          },
+          axisLabel: {
+            formatter(value, index) {
+              return yValueFormat(value);
+            },
+          },
+          axisPointer: {
+            label: {
+              formatter({value}) {
+                return yValueFormat(value);
+              },
+            },
+          },
+        },
+        series: seriesOption,
+      };
+
+      let zr1 = this.myChart.getZr();
+      zr1.on('mousemove', function(e) {
+        zr1.remove(zrDrawElement.hoverLine);
+        zr1.remove(zrDrawElement.tooltip);
+        zr1.remove(zrDrawElement.tooltipX);
+        zr1.remove(zrDrawElement.tooltipY);
+        zrDrawElement.hoverDots.forEach((dot) => zr1.remove(dot));
+        zrDrawElement.hoverDots.length = 0;
+      });
+
+      this.myChart.setOption(option, {notMerge: true});
+    },
 
-        setOffsetChartOption({chartData, min, max}, title, grid) {
-            let rawData = [];
-            let minX = min;
-            let maxX = max;
-            let minZ = Infinity;
-            let maxZ = -Infinity;
-            let ecChart = this.myChart;
-            let maxStep = -Infinity;
-            let minStep = Infinity;
-            grid.top = 126;
-            grid.left = 16;
-            grid.right = 40;
-            chartData.forEach(function(dataItem) {
-                let lineData = [];
-                maxStep = Math.max(dataItem.step, maxStep);
-                minStep = Math.min(dataItem.step, minStep);
-                dataItem.items.forEach(([time, step, x, y]) => {
-                    minZ = Math.min(minZ, y);
-                    maxZ = Math.max(maxZ, y);
-                    lineData.push(x, step, y);
-                });
-                rawData.push(lineData);
-            });
-
-            let option = {
-                textStyle: {
-                    fontFamily: 'Merriweather Sans',
-                },
-                title,
-                color: ['#006069'],
-                visualMap: {
-                    type: 'continuous',
-                    show: false,
-                    min: minStep,
-                    max: maxStep,
-                    dimension: 1,
-                    inRange: {
-                        colorLightness: [0.2, 0.4],
-                    },
-                },
-                xAxis: {
-                    min: minX,
-                    max: maxX,
-                    axisLine: {
-                        onZero: false,
-                    },
-                    axisLabel: {
-                        fontSize: '11',
-                        formatter: function(value) {
-                            return Math.round(value * 100) / 100;
-                        },
-                    },
-                    splitLine: {
-                        show: false,
-                    },
-                },
-                yAxis: {
-                    position: 'right',
-                    axisLine: {
-                        onZero: false,
-                    },
-                    inverse: true,
-                    splitLine: {
-                        show: false,
-                    },
-                    axisLabel: {
-                        fontSize: '11',
-                    },
-                },
-                grid,
-                series: [{
-                    type: 'custom',
-                    dimensions: ['x', 'y'],
-                    renderItem: function(params, api) {
-                        let points = makePolyPoints(
-                            params.dataIndex,
-                            api.value,
-                            api.coord,
-                            params.coordSys.y - 10
-                        );
-                        return {
-                            type: 'polygon',
-                            silent: true,
-                            shape: {
-                                points,
-                            },
-                            style: api.style({
-                                stroke: '#bbb',
-                                lineWidth: 1,
-                            }),
-                        };
-                    },
-                    data: rawData,
-                }],
+    setOffsetChartOption({chartData, min, max}, title, grid) {
+      let rawData = [];
+      let minX = min;
+      let maxX = max;
+      let minZ = Infinity;
+      let maxZ = -Infinity;
+      let ecChart = this.myChart;
+      let maxStep = -Infinity;
+      let minStep = Infinity;
+      grid.top = 126;
+      grid.left = 16;
+      grid.right = 40;
+      chartData.forEach(function(dataItem) {
+        let lineData = [];
+        maxStep = Math.max(dataItem.step, maxStep);
+        minStep = Math.min(dataItem.step, minStep);
+        dataItem.items.forEach(([time, step, x, y]) => {
+          minZ = Math.min(minZ, y);
+          maxZ = Math.max(maxZ, y);
+          lineData.push(x, step, y);
+        });
+        rawData.push(lineData);
+      });
+
+      let option = {
+        textStyle: {
+          fontFamily: 'Merriweather Sans',
+        },
+        title,
+        color: ['#006069'],
+        visualMap: {
+          type: 'continuous',
+          show: false,
+          min: minStep,
+          max: maxStep,
+          dimension: 1,
+          inRange: {
+            colorLightness: [0.2, 0.4],
+          },
+        },
+        xAxis: {
+          min: minX,
+          max: maxX,
+          axisLine: {
+            onZero: false,
+          },
+          axisLabel: {
+            fontSize: '11',
+            formatter: function(value) {
+              return Math.round(value * 100) / 100;
+            },
+          },
+          splitLine: {
+            show: false,
+          },
+        },
+        yAxis: {
+          position: 'right',
+          axisLine: {
+            onZero: false,
+          },
+          inverse: true,
+          splitLine: {
+            show: false,
+          },
+          axisLabel: {
+            fontSize: '11',
+          },
+        },
+        grid,
+        series: [{
+          type: 'custom',
+          dimensions: ['x', 'y'],
+          renderItem: function(params, api) {
+            let points = makePolyPoints(
+              params.dataIndex,
+              api.value,
+              api.coord,
+              params.coordSys.y - 10
+            );
+            return {
+              type: 'polygon',
+              silent: true,
+              shape: {
+                points,
+              },
+              style: api.style({
+                stroke: '#bbb',
+                lineWidth: 1,
+              }),
             };
-
-            function makePolyPoints(dataIndex, getValue, getCoord, yValueMapHeight) {
-                let points = [];
-                for (let i = 0; i < rawData[dataIndex].length;) {
-                    let x = getValue(i++);
-                    let y = getValue(i++);
-                    let z = getValue(i++);
-                    points.push(getPoint(x, y, z, getCoord, yValueMapHeight));
-                }
-                return points;
-            }
-
-            function getPoint(x, y, z, getCoord, yValueMapHeight) {
-                let pt = getCoord([x, y]);
-                // linear map in z axis
-                pt[1] -= (z - minZ) / (maxZ - minZ) * yValueMapHeight;
-                return pt;
-            }
-
-            let zr = ecChart.getZr();
-
-            function removeTooltip() {
-                if (zrDrawElement.hoverLine) {
-                    zr.remove(zrDrawElement.hoverLine);
-                    zr.remove(zrDrawElement.tooltip);
-                    zrDrawElement.hoverDots.forEach((dot) => zr.remove(dot));
-                    zrDrawElement.hoverDots.length = 0;
-                    zr.remove(zrDrawElement.tooltipX);
-                    zr.remove(zrDrawElement.tooltipY);
-                }
-            }
-
-            zr.on('mouseout', (e) => {
-                removeTooltip();
-            });
-
-            zr.on('mousemove', (e) => {
-                removeTooltip();
-                let nearestIndex = findNearestValue(e.offsetX, e.offsetY);
-                if (nearestIndex) {
-                    let getCoord = function(pt) {
-                        return ecChart.convertToPixel('grid', pt);
-                    };
-                    let gridRect = ecChart.getModel().getComponent('grid', 0).coordinateSystem.getRect();
-
-                    let linePoints = makePolyPoints(
-                        nearestIndex.itemIndex,
-                        function(i) {
-                            return rawData[nearestIndex.itemIndex][i];
-                        },
-                        getCoord,
-                        gridRect.y - 10
-                    );
-
-                    zr.add(zrDrawElement.hoverLine = new echarts.graphic.Polyline({
-                        silent: true,
-                        shape: {
-                            points: linePoints,
-                        },
-                        style: {
-                            stroke: '#5c5c5c',
-                            lineWidth: 2,
-                        },
-                        z: 999,
-                    }));
-
-                    let itemX;
-                    rawData.forEach((dataItem) => {
-                        let binIndex = nearestIndex.binIndex;
-                        let x = dataItem[binIndex * 3];
-                        let y = dataItem[binIndex * 3 + 1];
-                        let z = dataItem[binIndex * 3 + 2];
-                        let pt = getPoint(x, y, z, getCoord, gridRect.y - 10);
-                        itemX = pt[0];
-                        let dot = new echarts.graphic.Circle({
-                            shape: {
-                                cx: pt[0],
-                                cy: pt[1],
-                                r: 3,
-                            },
-                            style: {
-                                fill: '#000',
-                                stroke: '#ccc',
-                                lineWidth: 1,
-                            },
-                            z: 1000,
-                        });
-                        zr.add(dot);
-                        zrDrawElement.hoverDots.push(dot);
-                    });
-
-                    let hoveredItem = chartData[nearestIndex.itemIndex];
-                    zrDrawElement.tooltip = new echarts.graphic.Text({
-                        position: [e.offsetX + 30, e.offsetY - 50],
-                        style: {
-                            fontFamily: 'Merriweather Sans',
-                            text: yValueFormat(hoveredItem.items[nearestIndex.binIndex][3]),
-                            textFill: '#000',
-                            fontSize: 14,
-                            textBackgroundColor: '#eee',
-                            textBorderColor: '#008c99',
-                            textBorderWidth: 2,
-                            textBorderRadius: 5,
-                            textPadding: 10,
-                            rich: {},
-                        },
-                        z: 2000,
-                    });
-                    zr.add(zrDrawElement.tooltip);
-
-                    zrDrawElement.tooltipX = new echarts.graphic.Text({
-                        position: [
-                            itemX,
-                            gridRect.y + gridRect.height,
-                        ],
-                        style: {
-                            fontFamily: 'Merriweather Sans',
-                            text: Math.round(hoveredItem.items[nearestIndex.binIndex][2] * 1000) / 1000,
-                            textFill: '#fff',
-                            textAlign: 'center',
-                            fontSize: 12,
-                            textBackgroundColor: '#333',
-                            textBorderWidth: 2,
-                            textPadding: [5, 7],
-                            rich: {},
-                        },
-                        z: 2000,
-                    });
-                    zr.add(zrDrawElement.tooltipX);
-
-                    zrDrawElement.tooltipY = new echarts.graphic.Text({
-                        position: [
-                            gridRect.x + gridRect.width,
-                            linePoints[linePoints.length - 1][1],
-                        ],
-                        style: {
-                            fontFamily: 'Merriweather Sans',
-                            text: hoveredItem.step,
-                            textFill: '#fff',
-                            textVerticalAlign: 'middle',
-                            fontSize: 12,
-                            textBackgroundColor: '#333',
-                            textBorderWidth: 2,
-                            textPadding: [5, 7],
-                            rich: {},
-                        },
-                        z: 2000,
-                    });
-                    zr.add(zrDrawElement.tooltipY);
-                }
+          },
+          data: rawData,
+        }],
+      };
+
+      function makePolyPoints(dataIndex, getValue, getCoord, yValueMapHeight) {
+        let points = [];
+        for (let i = 0; i < rawData[dataIndex].length;) {
+          let x = getValue(i++);
+          let y = getValue(i++);
+          let z = getValue(i++);
+          points.push(getPoint(x, y, z, getCoord, yValueMapHeight));
+        }
+        return points;
+      }
+
+      function getPoint(x, y, z, getCoord, yValueMapHeight) {
+        let pt = getCoord([x, y]);
+        // linear map in z axis
+        pt[1] -= (z - minZ) / (maxZ - minZ) * yValueMapHeight;
+        return pt;
+      }
+
+      let zr = ecChart.getZr();
+
+      function removeTooltip() {
+        if (zrDrawElement.hoverLine) {
+          zr.remove(zrDrawElement.hoverLine);
+          zr.remove(zrDrawElement.tooltip);
+          zrDrawElement.hoverDots.forEach((dot) => zr.remove(dot));
+          zrDrawElement.hoverDots.length = 0;
+          zr.remove(zrDrawElement.tooltipX);
+          zr.remove(zrDrawElement.tooltipY);
+        }
+      }
+
+      zr.on('mouseout', (e) => {
+        removeTooltip();
+      });
+
+      zr.on('mousemove', (e) => {
+        removeTooltip();
+        let nearestIndex = findNearestValue(e.offsetX, e.offsetY);
+        if (nearestIndex) {
+          let getCoord = function(pt) {
+            return ecChart.convertToPixel('grid', pt);
+          };
+          let gridRect = ecChart.getModel().getComponent('grid', 0).coordinateSystem.getRect();
+
+          let linePoints = makePolyPoints(
+            nearestIndex.itemIndex,
+            function(i) {
+              return rawData[nearestIndex.itemIndex][i];
+            },
+            getCoord,
+            gridRect.y - 10
+          );
+
+          zr.add(zrDrawElement.hoverLine = new echarts.graphic.Polyline({
+            silent: true,
+            shape: {
+              points: linePoints,
+            },
+            style: {
+              stroke: '#5c5c5c',
+              lineWidth: 2,
+            },
+            z: 999,
+          }));
+
+          let itemX;
+          rawData.forEach((dataItem) => {
+            let binIndex = nearestIndex.binIndex;
+            let x = dataItem[binIndex * 3];
+            let y = dataItem[binIndex * 3 + 1];
+            let z = dataItem[binIndex * 3 + 2];
+            let pt = getPoint(x, y, z, getCoord, gridRect.y - 10);
+            itemX = pt[0];
+            let dot = new echarts.graphic.Circle({
+              shape: {
+                cx: pt[0],
+                cy: pt[1],
+                r: 3,
+              },
+              style: {
+                fill: '#000',
+                stroke: '#ccc',
+                lineWidth: 1,
+              },
+              z: 1000,
             });
-
-            function findNearestValue(px, py) {
-                let value = ecChart.convertFromPixel('grid', [px, py]);
-                let itemIndex;
-                let nearestY = Infinity;
-                let binIndex;
-                chartData.forEach((item, index) => {
-                    let dist = Math.abs(value[1] - item.step);
-                    if (dist < nearestY) {
-                        nearestY = dist;
-                        itemIndex = index;
-                    }
-                });
-                if (itemIndex != null) {
-                    let dataItem = chartData[itemIndex];
-                    let nearestX = Infinity;
-                    dataItem.items.forEach((item, index) => {
-                        let dist = Math.abs(item[2] - value[0]);
-                        if (dist < nearestX) {
-                            nearestX = dist;
-                            binIndex = index;
-                        }
-                    });
-                    if (binIndex != null) {
-                        return {
-                            itemIndex: itemIndex,
-                            binIndex: binIndex,
-                        };
-                    }
-                }
+            zr.add(dot);
+            zrDrawElement.hoverDots.push(dot);
+          });
+
+          let hoveredItem = chartData[nearestIndex.itemIndex];
+          zrDrawElement.tooltip = new echarts.graphic.Text({
+            position: [e.offsetX + 30, e.offsetY - 50],
+            style: {
+              fontFamily: 'Merriweather Sans',
+              text: yValueFormat(hoveredItem.items[nearestIndex.binIndex][3]),
+              textFill: '#000',
+              fontSize: 14,
+              textBackgroundColor: '#eee',
+              textBorderColor: '#008c99',
+              textBorderWidth: 2,
+              textBorderRadius: 5,
+              textPadding: 10,
+              rich: {},
+            },
+            z: 2000,
+          });
+          zr.add(zrDrawElement.tooltip);
+
+          zrDrawElement.tooltipX = new echarts.graphic.Text({
+            position: [
+              itemX,
+              gridRect.y + gridRect.height,
+            ],
+            style: {
+              fontFamily: 'Merriweather Sans',
+              text: Math.round(hoveredItem.items[nearestIndex.binIndex][2] * 1000) / 1000,
+              textFill: '#fff',
+              textAlign: 'center',
+              fontSize: 12,
+              textBackgroundColor: '#333',
+              textBorderWidth: 2,
+              textPadding: [5, 7],
+              rich: {},
+            },
+            z: 2000,
+          });
+          zr.add(zrDrawElement.tooltipX);
+
+          zrDrawElement.tooltipY = new echarts.graphic.Text({
+            position: [
+              gridRect.x + gridRect.width,
+              linePoints[linePoints.length - 1][1],
+            ],
+            style: {
+              fontFamily: 'Merriweather Sans',
+              text: hoveredItem.step,
+              textFill: '#fff',
+              textVerticalAlign: 'middle',
+              fontSize: 12,
+              textBackgroundColor: '#333',
+              textBorderWidth: 2,
+              textPadding: [5, 7],
+              rich: {},
+            },
+            z: 2000,
+          });
+          zr.add(zrDrawElement.tooltipY);
+        }
+      });
+
+      function findNearestValue(px, py) {
+        let value = ecChart.convertFromPixel('grid', [px, py]);
+        let itemIndex;
+        let nearestY = Infinity;
+        let binIndex;
+        chartData.forEach((item, index) => {
+          let dist = Math.abs(value[1] - item.step);
+          if (dist < nearestY) {
+            nearestY = dist;
+            itemIndex = index;
+          }
+        });
+        if (itemIndex != null) {
+          let dataItem = chartData[itemIndex];
+          let nearestX = Infinity;
+          dataItem.items.forEach((item, index) => {
+            let dist = Math.abs(item[2] - value[0]);
+            if (dist < nearestX) {
+              nearestX = dist;
+              binIndex = index;
             }
-            ecChart.setOption(option, {notMerge: true});
-        },
+          });
+          if (binIndex != null) {
+            return {
+              itemIndex: itemIndex,
+              binIndex: binIndex,
+            };
+          }
+        }
+      }
+      ecChart.setOption(option, {notMerge: true});
+    },
 
-        // get origin data per 60 seconds
-        startInterval() {
-            this.getOringDataInterval = setInterval(() => {
-                let tagInfo = this.tagInfo;
-                this.getOriginChartData(tagInfo);
-            }, intervalTime * 1000);
-        },
+    // get origin data per 60 seconds
+    startInterval() {
+      this.getOringDataInterval = setInterval(() => {
+        let tagInfo = this.tagInfo;
+        this.getOriginChartData(tagInfo);
+      }, intervalTime * 1000);
+    },
 
-        stopInterval() {
-            clearInterval(this.getOringDataInterval);
-        },
+    stopInterval() {
+      clearInterval(this.getOringDataInterval);
+    },
 
-        getOriginChartData(tagInfo) {
-            let run = tagInfo.run;
-            let tag = tagInfo.tag;
-            let params = {
-                run,
-                tag: tag.displayName,
-            };
-            getPluginHistogramsHistograms(params).then(({status, data}) => {
-                if (status === 0) {
-                    this.originData = data;
-                }
-            });
-        },
+    getOriginChartData(tagInfo) {
+      let run = tagInfo.run;
+      let tag = tagInfo.tag;
+      let params = {
+        run,
+        tag: tag.displayName,
+      };
+      getPluginHistogramsHistograms(params).then(({status, data}) => {
+        if (status === 0) {
+          this.originData = data;
+        }
+      });
+    },
 
-        expandArea(expand) {
-            let pageBoxWidth = document.getElementsByClassName('visual-dl-chart-page')[0].offsetWidth;
-            let width = pageBoxWidth * 0.96; // 4% margin
-            if (expand) {
-                let el = this.$refs.visual_dl_chart_box;
-                el.style.width = width + 'px';
-                el.style.height = '600px';
-                this.isExpand = true;
-                this.myChart.resize({
-                    width: width,
-                    height: 600,
-                });
-            } else {
-                let el = this.$refs.visual_dl_chart_box;
-                el.style.width = '400px';
-                el.style.height = '300px';
-                this.isExpand = false;
-                this.myChart.resize({
-                    width: 400,
-                    height: 300,
-                });
-            }
-        },
+    expandArea(expand) {
+      let pageBoxWidth = document.getElementsByClassName('visual-dl-chart-page')[0].offsetWidth;
+      let width = pageBoxWidth * 0.96; // 4% margin
+      if (expand) {
+        let el = this.$refs.visual_dl_chart_box;
+        el.style.width = width + 'px';
+        el.style.height = '600px';
+        this.isExpand = true;
+        this.myChart.resize({
+          width: width,
+          height: 600,
+        });
+      } else {
+        let el = this.$refs.visual_dl_chart_box;
+        el.style.width = '400px';
+        el.style.height = '300px';
+        this.isExpand = false;
+        this.myChart.resize({
+          width: 400,
+          height: 300,
+        });
+      }
     },
+  },
 };
 </script>
 <style lang="stylus">

frontend/src/histogram/ui/ChartPage.vue

@@ -31,50 +31,50 @@ import Chart from './Chart';
 import {cloneDeep, flatten} from 'lodash';
 
 export default {
-    props: ['config', 'runsItems', 'tagList', 'title'],
+  props: ['config', 'runsItems', 'tagList', 'title'],
 
-    components: {
-        'ui-chart': Chart,
-        'ui-expand-panel': ExpandPanel,
+  components: {
+    'ui-chart': Chart,
+    'ui-expand-panel': ExpandPanel,
+  },
+  computed: {
+    filteredRunsList() {
+      let tagList = this.tagList || [];
+      let runs = this.config.runs || [];
+      let list = cloneDeep(tagList);
+      return flatten(list.slice().map((item) => {
+        return item.tagList.filter((one) => runs.includes(one.run));
+      }));
     },
-    computed: {
-        filteredRunsList() {
-            let tagList = this.tagList || [];
-            let runs = this.config.runs || [];
-            let list = cloneDeep(tagList);
-            return flatten(list.slice().map((item) => {
-                return item.tagList.filter((one) => runs.includes(one.run));
-            }));
-        },
 
-        filteredPageList() {
-            let list = this.filteredRunsList;
-            let currentPage = this.currentPage;
-            let pageSize = this.pageSize;
-            return list.slice((currentPage - 1) * pageSize, currentPage * pageSize);
-        },
-        total() {
-            let list = this.filteredRunsList || [];
-            return list.length;
-        },
-        pageLength() {
-            return Math.ceil(this.total / this.pageSize);
-        },
+    filteredPageList() {
+      let list = this.filteredRunsList;
+      let currentPage = this.currentPage;
+      let pageSize = this.pageSize;
+      return list.slice((currentPage - 1) * pageSize, currentPage * pageSize);
     },
-    data() {
-        return {
-            // current page
-            currentPage: 1,
-            // item per page
-            pageSize: 4,
-        };
+    total() {
+      let list = this.filteredRunsList || [];
+      return list.length;
     },
+    pageLength() {
+      return Math.ceil(this.total / this.pageSize);
+    },
+  },
+  data() {
+    return {
+      // current page
+      currentPage: 1,
+      // item per page
+      pageSize: 4,
+    };
+  },
 
-    methods: {
-        handlePageChange({pageNum}) {
-            this.currentPage = pageNum;
-        },
+  methods: {
+    handlePageChange({pageNum}) {
+      this.currentPage = pageNum;
     },
+  },
 };
 </script>
 <style lang="stylus">

frontend/src/histogram/ui/Config.vue

@@ -42,27 +42,27 @@
 </template>
 <script>
 export default {
-    props: ['config', 'runsItems'],
-    data() {
-        return {
-            chartTypeItems: [
-                {
-                    name: 'Overlay',
-                    value: 'overlay',
-                },
-                {
-                    name: 'Offset',
-                    value: 'offset',
-                },
-            ],
-        };
-    },
-    methods: {
-        toggleAllRuns() {
-            let running = this.config.running;
-            this.config.running = !running;
+  props: ['config', 'runsItems'],
+  data() {
+    return {
+      chartTypeItems: [
+        {
+          name: 'Overlay',
+          value: 'overlay',
+        },
+        {
+          name: 'Offset',
+          value: 'offset',
         },
+      ],
+    };
+  },
+  methods: {
+    toggleAllRuns() {
+      let running = this.config.running;
+      this.config.running = !running;
     },
+  },
 };
 </script>
 <style lang="stylus">

frontend/src/images/Images.vue

@@ -38,128 +38,128 @@ import Config from './ui/Config';
 import ChartPage from './ui/ChartPage';
 
 export default {
-    name: 'Images',
-    components: {
-        'ui-config': Config,
-        'ui-chart-page': ChartPage,
-    },
-    data() {
+  name: 'Images',
+  components: {
+    'ui-config': Config,
+    'ui-chart-page': ChartPage,
+  },
+  data() {
+    return {
+      runsArray: [],
+      tags: [],
+      config: {
+        groupNameReg: '.*',
+        isActualImageSize: false,
+        runs: [],
+        running: true,
+      },
+      filteredTagsList: [],
+    };
+  },
+  computed: {
+    runsItems() {
+      let runsArray = this.runsArray || [];
+      return runsArray.map((item) => {
         return {
-            runsArray: [],
-            tags: [],
-            config: {
-                groupNameReg: '.*',
-                isActualImageSize: false,
-                runs: [],
-                running: true,
-            },
-            filteredTagsList: [],
+          name: item,
+          value: item,
         };
+      });
     },
-    computed: {
-        runsItems() {
-            let runsArray = this.runsArray || [];
-            return runsArray.map((item) => {
-                return {
-                    name: item,
-                    value: item,
-                };
-            });
-        },
-        tagsList() {
-            let tags = this.tags;
-
-            let runs = Object.keys(tags);
-            let tagsArray = runs.map((run) => Object.keys(tags[run]));
-            let allUniqTags = uniq(flatten(tagsArray));
+    tagsList() {
+      let tags = this.tags;
 
-            // get the data for every chart
-            return allUniqTags.map((tag) => {
-                let tagList = runs.map((run) => {
-                    return {
-                        run,
-                        tag: tags[run][tag],
-                    };
-                }).filter((item) => item.tag !== undefined);
-                return {
-                    tagList,
-                    tag,
-                    group: tag.split('/')[0],
-                };
-            });
-        },
-        groupedTags() {
-            let tagsList = this.tagsList || [];
-            // put data in group
-            let groupData = {};
-            tagsList.forEach((item) => {
-                let group = item.group;
-                if (groupData[group] === undefined) {
-                    groupData[group] = [];
-                    groupData[group].push(item);
-                } else {
-                    groupData[group].push(item);
-                }
-            });
+      let runs = Object.keys(tags);
+      let tagsArray = runs.map((run) => Object.keys(tags[run]));
+      let allUniqTags = uniq(flatten(tagsArray));
 
-            // to array
-            let groups = Object.keys(groupData);
-            return groups.map((group) => {
-                return {
-                    group,
-                    tags: groupData[group],
-                };
-            });
-        },
-        filteredConfig() {
-            let tansformArr = ['isActualImageSize'];
-            let config = this.config || {};
-            let filteredConfig = {};
-            Object.keys(config).forEach((key) => {
-                let val = config[key];
-                filteredConfig[key] = val;
-            });
-            return filteredConfig;
-        },
+      // get the data for every chart
+      return allUniqTags.map((tag) => {
+        let tagList = runs.map((run) => {
+          return {
+            run,
+            tag: tags[run][tag],
+          };
+        }).filter((item) => item.tag !== undefined);
+        return {
+          tagList,
+          tag,
+          group: tag.split('/')[0],
+        };
+      });
     },
-    created() {
-        getPluginImagesTags().then(({errno, data}) => {
-            this.tags = data;
-
-            // filter when inited
-            let groupNameReg = this.config.groupNameReg;
-            this.filterTagsList(groupNameReg);
-        });
+    groupedTags() {
+      let tagsList = this.tagsList || [];
+      // put data in group
+      let groupData = {};
+      tagsList.forEach((item) => {
+        let group = item.group;
+        if (groupData[group] === undefined) {
+          groupData[group] = [];
+          groupData[group].push(item);
+        } else {
+          groupData[group].push(item);
+        }
+      });
 
-        getRuns().then(({errno, data}) => {
-            this.runsArray = data;
-            this.config.runs = data;
-        });
+      // to array
+      let groups = Object.keys(groupData);
+      return groups.map((group) => {
+        return {
+          group,
+          tags: groupData[group],
+        };
+      });
     },
-    mounted() {
-	    autoAdjustHeight();
+    filteredConfig() {
+      let tansformArr = ['isActualImageSize'];
+      let config = this.config || {};
+      let filteredConfig = {};
+      Object.keys(config).forEach((key) => {
+        let val = config[key];
+        filteredConfig[key] = val;
+      });
+      return filteredConfig;
     },
-    watch: {
-        'config.groupNameReg': function(val) {
-            this.throttledFilterTagsList();
-        },
+  },
+  created() {
+    getPluginImagesTags().then(({errno, data}) => {
+      this.tags = data;
+
+      // filter when inited
+      let groupNameReg = this.config.groupNameReg;
+      this.filterTagsList(groupNameReg);
+    });
+
+    getRuns().then(({errno, data}) => {
+      this.runsArray = data;
+      this.config.runs = data;
+    });
+  },
+  mounted() {
+    autoAdjustHeight();
+  },
+  watch: {
+    'config.groupNameReg': function(val) {
+      this.throttledFilterTagsList();
     },
-    methods: {
-        filterTagsList(groupNameReg) {
-            if (!groupNameReg) {
-                this.filteredTagsList = [];
-                return;
-            }
-            let tagsList = this.tagsList || [];
-            let regExp = new RegExp(groupNameReg);
-            this.filteredTagsList = tagsList.filter((item) => regExp.test(item.tag));
-        },
-        throttledFilterTagsList: _.debounce(
-            function() {
-                this.filterTagsList(this.config.groupNameReg);
-            }, 300
-        ),
+  },
+  methods: {
+    filterTagsList(groupNameReg) {
+      if (!groupNameReg) {
+        this.filteredTagsList = [];
+        return;
+      }
+      let tagsList = this.tagsList || [];
+      let regExp = new RegExp(groupNameReg);
+      this.filteredTagsList = tagsList.filter((item) => regExp.test(item.tag));
     },
+    throttledFilterTagsList: _.debounce(
+      function() {
+        this.filterTagsList(this.config.groupNameReg);
+      }, 300
+    ),
+  },
 };
 
 </script>

frontend/src/images/index.js

@@ -3,7 +3,7 @@ import {router} from 'san-router';
 import Images from './Images';
 
 router.add({
-    target: '#content',
-    rule: '/images',
-    Component: Images,
+  target: '#content',
+  rule: '/images',
+  Component: Images,
 });

frontend/src/images/ui/ChartPage.vue

@@ -30,41 +30,41 @@ import Image from './Image';
 import {cloneDeep, flatten} from 'lodash';
 
 export default {
-    props: ['config', 'runsItems', 'tagList', 'title'],
-    components: {
-        'ui-image': Image,
-        'ui-expand-panel': ExpandPanel,
+  props: ['config', 'runsItems', 'tagList', 'title'],
+  components: {
+    'ui-image': Image,
+    'ui-expand-panel': ExpandPanel,
+  },
+  computed: {
+    filteredRunsList() {
+      let tagList = this.tagList || [];
+      let runs = this.config.runs || [];
+      let list = cloneDeep(tagList);
+      return flatten(list.slice().map((item) => {
+        return item.tagList.filter((one) => runs.includes(one.run));
+      }));
     },
-    computed: {
-        filteredRunsList() {
-            let tagList = this.tagList || [];
-            let runs = this.config.runs || [];
-            let list = cloneDeep(tagList);
-            return flatten(list.slice().map((item) => {
-                return item.tagList.filter((one) => runs.includes(one.run));
-            }));
-        },
 
-        filteredPageList() {
-            let list = this.filteredRunsList || [];
-            return list.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
-        },
-        total() {
-            let list = this.filteredRunsList || [];
-            return list.length;
-        },
-        pageLength() {
-            return Math.ceil(this.total / this.pageSize);
-        },
+    filteredPageList() {
+      let list = this.filteredRunsList || [];
+      return list.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
     },
-    data() {
-        return {
-            // current page
-            currentPage: 1,
-            // item per page
-            pageSize: 8,
-        };
+    total() {
+      let list = this.filteredRunsList || [];
+      return list.length;
     },
+    pageLength() {
+      return Math.ceil(this.total / this.pageSize);
+    },
+  },
+  data() {
+    return {
+      // current page
+      currentPage: 1,
+      // item per page
+      pageSize: 8,
+    };
+  },
 };
 </script>
 <style lang="stylus">

frontend/src/images/ui/Config.vue

@@ -37,19 +37,19 @@
 <script>
 
 export default {
-    props: {
-        runsItems: Array,
-        config: Object,
-    },
-    data() {
-        return {
-        };
-    },
-    methods: {
-        toggleAllRuns() {
-            this.config.running = !this.config.running;
-        },
+  props: {
+    runsItems: Array,
+    config: Object,
+  },
+  data() {
+    return {
+    };
+  },
+  methods: {
+    toggleAllRuns() {
+      this.config.running = !this.config.running;
     },
+  },
 };
 
 </script>

frontend/src/images/ui/Image.vue

@@ -32,111 +32,111 @@ const defaultImgHeight = 300;
 const intervalTime = 30;
 
 export default {
-    props: ['tagInfo', 'isActualImageSize', 'runs', 'running', 'runsItems'],
-    computed: {
-        steps() {
-            let data = this.data || [];
-            return data.length - 1;
-        },
-        imageWidth() {
-            return this.isActualImageSize ? this.imgData.width : defaultImgWidth;
-        },
-        imageHeight() {
-            return this.isActualImageSize ? this.imgData.height : defaultImgHeight;
-        },
+  props: ['tagInfo', 'isActualImageSize', 'runs', 'running', 'runsItems'],
+  computed: {
+    steps() {
+      let data = this.data || [];
+      return data.length - 1;
     },
-    filters: {
-        formatTime: function(value) {
-            if (!value) {
-                return;
-            }
-            // The value was made in seconds, must convert it to milliseconds
-            let time = new Date(value * 1000);
-            let options = {
-                weekday: 'short', year: 'numeric', month: 'short',
-                day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit',
-            };
-            return time.toLocaleDateString('en-US', options);
-        },
+    imageWidth() {
+      return this.isActualImageSize ? this.imgData.width : defaultImgWidth;
     },
-    data() {
-        return {
-            currentIndex: 0,
-            slider: {
-                value: '0',
-                label: '',
-                min: 0,
-                step: 1,
-            },
-            imgData: {},
-            data: [],
-            height: defaultImgHeight,
-            weight: defaultImgWidth,
-        };
-    },
-    created() {
-        this.getOriginChartsData();
+    imageHeight() {
+      return this.isActualImageSize ? this.imgData.height : defaultImgHeight;
     },
-    mounted() {
-        if (this.running) {
-            this.startInterval();
-        }
+  },
+  filters: {
+    formatTime: function(value) {
+      if (!value) {
+        return;
+      }
+      // The value was made in seconds, must convert it to milliseconds
+      let time = new Date(value * 1000);
+      let options = {
+        weekday: 'short', year: 'numeric', month: 'short',
+        day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit',
+      };
+      return time.toLocaleDateString('en-US', options);
     },
+  },
+  data() {
+    return {
+      currentIndex: 0,
+      slider: {
+        value: '0',
+        label: '',
+        min: 0,
+        step: 1,
+      },
+      imgData: {},
+      data: [],
+      height: defaultImgHeight,
+      weight: defaultImgWidth,
+    };
+  },
+  created() {
+    this.getOriginChartsData();
+  },
+  mounted() {
+    if (this.running) {
+      this.startInterval();
+    }
+  },
 
-    beforeDestroy() {
-        this.stopInterval();
-    },
+  beforeDestroy() {
+    this.stopInterval();
+  },
 
-    watch: {
-        running: function(val) {
-            val ? this.startInterval() : this.stopInterval();
-        },
-        currentIndex: function(index) {
-            /* eslint-disable fecs-camelcase */
-            if (this.data && this.data[index]) {
-                let currentImgInfo = this.data ? this.data[index] : {};
-                let {height, width, query, step, wall_time} = currentImgInfo;
-                let url = '/data/plugin/images/individualImage?ts=' + wall_time;
-                let imgSrc = [url, query].join('&');
-                this.imgData = {
-                    imgSrc,
-                    height,
-                    width,
-                    step,
-                    wall_time,
-                };
-            }
-            /* eslint-enable fecs-camelcase */
-        },
+  watch: {
+    running: function(val) {
+      val ? this.startInterval() : this.stopInterval();
     },
-    methods: {
-        stopInterval() {
-            clearInterval(this.getOringDataInterval);
-        },
-        // get origin data per {{intervalTime}} seconds
-        startInterval() {
-            this.getOringDataInterval = setInterval(() => {
-                this.getOriginChartsData();
-            }, intervalTime * 1000);
-        },
-        getOriginChartsData() {
-            // let {run, tag} = this.tagInfo;
-            let run = this.tagInfo.run;
-            let tag = this.tagInfo.tag;
-            let {displayName, samples} = tag;
-            let params = {
-                run,
-                tag: displayName,
-                samples,
-            };
-            getPluginImagesImages(params).then(({status, data}) => {
-                if (status === 0) {
-                    this.data = data;
-                    this.currentIndex = data.length - 1;
-                }
-            });
-        },
+    currentIndex: function(index) {
+      /* eslint-disable fecs-camelcase */
+      if (this.data && this.data[index]) {
+        let currentImgInfo = this.data ? this.data[index] : {};
+        let {height, width, query, step, wall_time} = currentImgInfo;
+        let url = '/data/plugin/images/individualImage?ts=' + wall_time;
+        let imgSrc = [url, query].join('&');
+        this.imgData = {
+          imgSrc,
+          height,
+          width,
+          step,
+          wall_time,
+        };
+      }
+      /* eslint-enable fecs-camelcase */
+    },
+  },
+  methods: {
+    stopInterval() {
+      clearInterval(this.getOringDataInterval);
+    },
+    // get origin data per {{intervalTime}} seconds
+    startInterval() {
+      this.getOringDataInterval = setInterval(() => {
+        this.getOriginChartsData();
+      }, intervalTime * 1000);
+    },
+    getOriginChartsData() {
+      // let {run, tag} = this.tagInfo;
+      let run = this.tagInfo.run;
+      let tag = this.tagInfo.tag;
+      let {displayName, samples} = tag;
+      let params = {
+        run,
+        tag: displayName,
+        samples,
+      };
+      getPluginImagesImages(params).then(({status, data}) => {
+        if (status === 0) {
+          this.data = data;
+          this.currentIndex = data.length - 1;
+        }
+      });
     },
+  },
 };
 </script>
 <style lang="stylus">

frontend/src/index.js

@@ -7,17 +7,17 @@ import router from '@/router';
 Vue.config.productionTip = false;
 
 Vue.use(Vuetify, {
-    theme: {
-        primary: '#008c99',
-        accent: '#008c99',
-        toolbox_icon: '#999999',
-    },
+  theme: {
+    primary: '#008c99',
+    accent: '#008c99',
+    toolbox_icon: '#999999',
+  },
 });
 
 /* eslint-disable no-new */
 new Vue({
-    el: '#root',
-    router,
-    components: {App},
-    template: '<App/>',
+  el: '#root',
+  router,
+  components: {App},
+  template: '<App/>',
 });

frontend/src/scalars/Scalars.vue

@@ -37,120 +37,120 @@ import Config from './ui/Config';
 import ChartPage from './ui/ChartPage';
 
 export default {
-    components: {
-        'ui-config': Config,
-        'ui-chart-page': ChartPage,
-    },
-    data() {
+  components: {
+    'ui-config': Config,
+    'ui-chart-page': ChartPage,
+  },
+  data() {
+    return {
+      runsArray: [],
+      tags: [],
+      config: {
+        groupNameReg: '.*',
+        smoothing: 0.6,
+        horizontal: 'step',
+        sortingMethod: 'default',
+        outlier: false,
+        runs: [],
+        running: true,
+      },
+      filteredTagsList: [],
+    };
+  },
+  computed: {
+    runsItems() {
+      let runsArray = this.runsArray || [];
+      return runsArray.map((item) => {
         return {
-            runsArray: [],
-            tags: [],
-            config: {
-                groupNameReg: '.*',
-                smoothing: 0.6,
-                horizontal: 'step',
-                sortingMethod: 'default',
-                outlier: false,
-                runs: [],
-                running: true,
-            },
-            filteredTagsList: [],
+          name: item,
+          value: item,
         };
+      });
     },
-    computed: {
-        runsItems() {
-            let runsArray = this.runsArray || [];
-            return runsArray.map((item) => {
-                return {
-                    name: item,
-                    value: item,
-                };
-            });
-        },
-        tagsList() {
-            let tags = this.tags;
+    tagsList() {
+      let tags = this.tags;
 
-            let runs = Object.keys(tags);
-            let tagsArray = runs.map((run) => Object.keys(tags[run]));
-            let allUniqTags = uniq(flatten(tagsArray));
+      let runs = Object.keys(tags);
+      let tagsArray = runs.map((run) => Object.keys(tags[run]));
+      let allUniqTags = uniq(flatten(tagsArray));
 
-            // get the data for every chart
-            return allUniqTags.map((tag) => {
-                let tagList = runs.map((run) => {
-                    return {
-                        run,
-                        tag: tags[run][tag],
-                    };
-                }).filter((item) => item.tag !== undefined);
-                return {
-                    tagList,
-                    tag,
-                    group: tag.split('/')[0],
-                };
-            });
-        },
-        groupedTags() {
-            let tagsList = this.tagsList || [];
-            // put data in group
-            let groupData = {};
-            tagsList.forEach((item) => {
-                let group = item.group;
-                if (groupData[group] === undefined) {
-                    groupData[group] = [];
-                    groupData[group].push(item);
-                } else {
-                    groupData[group].push(item);
-                }
-            });
+      // get the data for every chart
+      return allUniqTags.map((tag) => {
+        let tagList = runs.map((run) => {
+          return {
+            run,
+            tag: tags[run][tag],
+          };
+        }).filter((item) => item.tag !== undefined);
+        return {
+          tagList,
+          tag,
+          group: tag.split('/')[0],
+        };
+      });
+    },
+    groupedTags() {
+      let tagsList = this.tagsList || [];
+      // put data in group
+      let groupData = {};
+      tagsList.forEach((item) => {
+        let group = item.group;
+        if (groupData[group] === undefined) {
+          groupData[group] = [];
+          groupData[group].push(item);
+        } else {
+          groupData[group].push(item);
+        }
+      });
 
-            // to array
-            let groups = Object.keys(groupData);
-            return groups.map((group) => {
-                return {
-                    group,
-                    tags: groupData[group],
-                };
-            });
-        },
+      // to array
+      let groups = Object.keys(groupData);
+      return groups.map((group) => {
+        return {
+          group,
+          tags: groupData[group],
+        };
+      });
     },
-    created() {
-	    getPluginScalarsTags().then(({errno, data}) => {
-            this.tags = data;
+  },
+  created() {
+    getPluginScalarsTags().then(({errno, data}) => {
+      this.tags = data;
 
-            // filter when inited
-            let groupNameReg = this.config.groupNameReg;
-            this.filterTagsList(groupNameReg);
-        });
+      // filter when inited
+      let groupNameReg = this.config.groupNameReg;
+      this.filterTagsList(groupNameReg);
+    });
 
-	    getRuns().then(({errno, data}) => {
-            this.runsArray = data;
-            this.config.runs = data;
-        });
-	},
-	mounted() {
-	    autoAdjustHeight();
-	},
-	watch: {
-        'config.groupNameReg': function(val) {
-            this.throttledFilterTagsList();
-        },
+    getRuns().then(({errno, data}) => {
+      this.runsArray = data;
+      this.config.runs = data;
+    });
+  },
+  mounted() {
+    autoAdjustHeight();
+  },
+  watch: {
+    'config.groupNameReg': function(val) {
+      this.throttledFilterTagsList();
     },
-    methods: {
-        filterTagsList(groupNameReg) {
-            if (!groupNameReg) {
-                this.filteredTagsList = [];
-                return;
-            }
-            let tagsList = this.tagsList || [];
-            let regExp = new RegExp(groupNameReg);
-            this.filteredTagsList = tagsList.filter((item) => regExp.test(item.tag));
-        },
-        throttledFilterTagsList: _.debounce(
-            function() {
-                this.filterTagsList(this.config.groupNameReg);
-            }, 300
-        ),
+  },
+  methods: {
+    filterTagsList(groupNameReg) {
+      if (!groupNameReg) {
+        this.filteredTagsList = [];
+        return;
+      }
+      let tagsList = this.tagsList || [];
+      let regExp = new RegExp(groupNameReg);
+      this.filteredTagsList = tagsList.filter((item) => regExp.test(item.tag));
     },
+    throttledFilterTagsList: _.debounce(
+      function() {
+        this.filterTagsList(this.config.groupNameReg);
+      }, 300
+    ),
+  },
 };
 
 </script>

frontend/src/scalars/index.js

@@ -3,13 +3,13 @@ import {router} from 'san-router';
 import Scalar from './Scalars';
 
 router.add({
-    target: '#content',
-    rule: '/',
-    Component: Scalar,
+  target: '#content',
+  rule: '/',
+  Component: Scalar,
 });
 
 router.add({
-    target: '#content',
-    rule: '/scalars',
-    Component: Scalar,
+  target: '#content',
+  rule: '/scalars',
+  Component: Scalar,
 });

frontend/src/scalars/ui/Chart.vue

@@ -102,566 +102,566 @@ const maxQuantile = 0.95;
 const intervalTime = 15;
 
 export default {
-    props: ['tagInfo', 'groupNameReg', 'smoothing', 'horizontal', 'sortingMethod', 'outlier', 'runs',
-            'running', 'runsItems'],
-    computed: {
-        computedStyle() {
-            return 'height:' + this.height + 'px;'
-                + 'width:' + this.width + 'px;';
-        },
+  props: ['tagInfo', 'groupNameReg', 'smoothing', 'horizontal', 'sortingMethod', 'outlier', 'runs',
+          'running', 'runsItems'],
+  computed: {
+    computedStyle() {
+      return 'height:' + this.height + 'px;'
+        + 'width:' + this.width + 'px;';
     },
-    data() {
-        return {
-            width: 400,
-            height: 300,
-            isExpand: false,
-            isSelectZoomEnable: true,
-            originData: [],
-        };
+  },
+  data() {
+    return {
+      width: 400,
+      height: 300,
+      isExpand: false,
+      isSelectZoomEnable: true,
+      originData: [],
+    };
+  },
+  watch: {
+    originData: function(val) {
+      this.setChartData();
+      this.setChartsOutlier();
+      this.setChartHorizon();
+    },
+    smoothing: function(val) {
+      this.setChartData();
+    },
+    outlier: function(val) {
+      this.setChartsOutlier();
+    },
+    horizontal: function(val) {
+      this.setChartHorizon();
+    },
+    tagInfo: function(val) {
+      // Should Clean up the chart before each use.
+      this.myChart.clear();
+      this.setChartsOptions(val);
+      this.getOriginChartData(val);
+    },
+    isExpand: function(val) {
+      this.expandArea(val);
+    },
+    isSelectZoomEnable: function(val) {
+      this.toggleSelectZoom(val);
+    },
+  },
+  mounted() {
+    this.initChart(this.tagInfo);
+    this.toggleSelectZoom(true);
+
+    if (this.running) {
+      this.startInterval();
+    }
+
+    this.$watch('running', function(running) {
+      running ? this.startInterval() : this.stopInterval();
+    });
+  },
+
+  beforeDestroy() {
+    this.stopInterval();
+  },
+  methods: {
+    // Create a Scalar Chart, initialize it with default settings, then load datas
+    initChart(tagInfo) {
+      this.createChart();
+      this.setChartsOptions(tagInfo);
+      this.getOriginChartData(tagInfo);
     },
-    watch: {
-        originData: function(val) {
-            this.setChartData();
-            this.setChartsOutlier();
-            this.setChartHorizon();
+
+    createChart() {
+      let el = this.$refs.chartBox;
+      this.myChart = echarts.init(el);
+    },
+
+    setChartsOptions({tagList, tag}) {
+      // Create two lines, one line is original, the other line is for smoothing
+      let seriesOption = tagList.map((item) => [
+        {
+          name: item.run,
+          type: 'line',
+          showSymbol: false,
+          hoverAnimation: false,
+          z: 0,
+          data: [],
+          animationDuration: 100,
+          lineStyle: {
+            normal: {
+              opacity: originLinesOpacity,
+              width: lineWidth,
+            },
+          },
+        },
+        {
+          name: item.run,
+          type: 'line',
+          showSymbol: false,
+          hoverAnimation: false,
+          z: 1,
+          data: [],
+          animationDuration: 100,
+          lineStyle: {
+            normal: {
+              width: lineWidth,
+            },
+          },
+        },
+      ]
+      );
+      seriesOption = flatten(seriesOption);
+      let legendOptions = tagList.map((item) => item.run);
+      let instance = this;
+      let option = {
+        textStyle: {
+          fontFamily: 'Merriweather Sans',
         },
-        smoothing: function(val) {
-            this.setChartData();
+        color: [
+          '#008c99',
+          '#c23531',
+          '#FF9900',
+          '#109618',
+          '#990099',
+          '#3B3EAC',
+          '#DD4477',
+          '#AAAA11',
+          '#5574A6',
+          '#8B0707',
+        ],
+        title: {
+          text: tag,
+          textStyle: {
+            fontSize: 13,
+            fontWeight: 'normal',
+          },
         },
-        outlier: function(val) {
-            this.setChartsOutlier();
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            animation: true,
+          },
+          textStyle: {
+            fontSize: '13',
+          },
+          position: ['10%', '90%'],
+          formatter(params, ticket, callback) {
+            let data = instance.getFormatterPoints(params[0].data);
+            return instance.transformFormatterData(data);
+          },
         },
-        horizontal: function(val) {
-            this.setChartHorizon();
+        toolbox: {
+          show: true,
+          showTitle: false,
+          itemSize: 0,
+          feature: {
+            dataZoom: {},
+          },
         },
-        tagInfo: function(val) {
-            // Should Clean up the chart before each use.
-            this.myChart.clear();
-            this.setChartsOptions(val);
-            this.getOriginChartData(val);
+        legend: {
+          data: legendOptions,
+          top: 39,
         },
-        isExpand: function(val) {
-            this.expandArea(val);
+        grid: {
+          left: 48,
+          top: 75,
+          right: 40,
+          bottom: 36,
         },
-        isSelectZoomEnable: function(val) {
-            this.toggleSelectZoom(val);
+        xAxis: {
+          type: 'value',
+          axisLabel: {
+            fontSize: '11',
+          },
+          splitNumber: this.isExpand ? 10 : 5,
         },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            fontSize: '11',
+            formatter(value) {
+              return value.toString().slice(0, 5);
+            },
+          },
+        },
+        series: seriesOption,
+      };
+      this.myChart.setOption(option);
     },
-    mounted() {
-        this.initChart(this.tagInfo);
-        this.toggleSelectZoom(true);
-
-        if (this.running) {
-            this.startInterval();
-        }
 
-        this.$watch('running', function(running) {
-            running ? this.startInterval() : this.stopInterval();
-        });
+    // Get origin data per 60 seconds
+    startInterval() {
+      this.getOriginDataInterval = setInterval(() => {
+        this.getOriginChartData(this.tagInfo);
+      }, intervalTime * 1000);
     },
 
-    beforeDestroy() {
-        this.stopInterval();
+    stopInterval() {
+      clearInterval(this.getOriginDataInterval);
     },
-    methods: {
-        // Create a Scalar Chart, initialize it with default settings, then load datas
-        initChart(tagInfo) {
-            this.createChart();
-            this.setChartsOptions(tagInfo);
-            this.getOriginChartData(tagInfo);
-        },
-
-        createChart() {
-            let el = this.$refs.chartBox;
-            this.myChart = echarts.init(el);
-        },
-
-        setChartsOptions({tagList, tag}) {
-            // Create two lines, one line is original, the other line is for smoothing
-            let seriesOption = tagList.map((item) => [
-                    {
-                        name: item.run,
-                        type: 'line',
-                        showSymbol: false,
-                        hoverAnimation: false,
-                        z: 0,
-                        data: [],
-                        animationDuration: 100,
-                        lineStyle: {
-                            normal: {
-                                opacity: originLinesOpacity,
-                                width: lineWidth,
-                            },
-                        },
-                    },
-                    {
-                        name: item.run,
-                        type: 'line',
-                        showSymbol: false,
-                        hoverAnimation: false,
-                        z: 1,
-                        data: [],
-                        animationDuration: 100,
-                        lineStyle: {
-                            normal: {
-                                width: lineWidth,
-                            },
-                        },
-                    },
-                ]
-            );
-            seriesOption = flatten(seriesOption);
-            let legendOptions = tagList.map((item) => item.run);
-            let instance = this;
-            let option = {
-                textStyle: {
-                    fontFamily: 'Merriweather Sans',
-                },
-                color: [
-                    '#008c99',
-                    '#c23531',
-                    '#FF9900',
-                    '#109618',
-                    '#990099',
-                    '#3B3EAC',
-                    '#DD4477',
-                    '#AAAA11',
-                    '#5574A6',
-                    '#8B0707',
-                ],
-                title: {
-                    text: tag,
-                    textStyle: {
-                        fontSize: 13,
-                        fontWeight: 'normal',
-                    },
-                },
-                tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                        animation: true,
-                    },
-                    textStyle: {
-                        fontSize: '13',
-                    },
-                    position: ['10%', '90%'],
-                    formatter(params, ticket, callback) {
-                        let data = instance.getFormatterPoints(params[0].data);
-                        return instance.transformFormatterData(data);
-                    },
-                },
-                toolbox: {
-                    show: true,
-                    showTitle: false,
-                    itemSize: 0,
-                    feature: {
-                        dataZoom: {},
-                    },
-                },
-                legend: {
-                    data: legendOptions,
-                    top: 39,
-                },
-                grid: {
-                    left: 48,
-                    top: 75,
-                    right: 40,
-                    bottom: 36,
-                },
-                xAxis: {
-                    type: 'value',
-                    axisLabel: {
-                        fontSize: '11',
-                    },
-                    splitNumber: this.isExpand ? 10 : 5,
-                },
-                yAxis: {
-                    type: 'value',
-                    axisLabel: {
-                        fontSize: '11',
-                        formatter(value) {
-                            return value.toString().slice(0, 5);
-                        },
-                    },
-                },
-                series: seriesOption,
-            };
-            this.myChart.setOption(option);
-        },
 
-        // Get origin data per 60 seconds
-        startInterval() {
-            this.getOriginDataInterval = setInterval(() => {
-                this.getOriginChartData(this.tagInfo);
-            }, intervalTime * 1000);
-        },
+    getOriginChartData({tagList, tag}) {
+      let requestList = tagList.map((item) => {
+        let params = {
+          run: item.run,
+          tag: tag,
+        };
+        return getPluginScalarsScalars(params);
+      });
+      axios.all(requestList).then((resArray) => {
+        if (resArray.every((res) => res.status === 0)) {
+          this.originData = resArray.map((res) => res.data);
+        }
+      });
+    },
 
-        stopInterval() {
-            clearInterval(this.getOriginDataInterval);
-        },
+    setChartData() {
+      let seriesData = this.originData.map((lineData) => {
+        if (lineData.length == 0) return [];
+        // add the smoothed data
+        this.transformDataset(lineData);
+        return [
+          {
+            data: lineData,
+            encode: {
+              // map 1 dimension to xAixs.
+              x: [1],
+              // map 2 dimension to yAixs.
+              y: [2],
+            },
+          },
+          {
+            data: lineData,
+            encode: {
+              // Map 1 dimension to xAixs.
+              x: [1],
+              // Map 3 dimension to yAixs,
+              // the third number is smoothed value.
+              y: [3],
+            },
+          },
+        ];
+      });
+      this.myChart.setOption({
+        series: flatten(seriesData),
+      });
+    },
 
-        getOriginChartData({tagList, tag}) {
-            let requestList = tagList.map((item) => {
-                let params = {
-                    run: item.run,
-                    tag: tag,
-                };
-                return getPluginScalarsScalars(params);
-            });
-            axios.all(requestList).then((resArray) => {
-                if (resArray.every((res) => res.status === 0)) {
-                    this.originData = resArray.map((res) => res.data);
-                }
-            });
-        },
+    getChartOptions() {
+      return this.myChart.getOption() || {};
+    },
+    handleDownLoad(runItemForDownload) {
+      let options = this.getChartOptions();
+      let series = options.series || [];
+      let seriesItem = series.find((item) => item.name === runItemForDownload) || {};
+      let fileName = this.tagInfo.tag.replace(/\//g, '-');
+      generateJsonAndDownload(seriesItem.data, fileName);
+    },
 
-        setChartData() {
-            let seriesData = this.originData.map((lineData) => {
-                if (lineData.length == 0) return [];
-                // add the smoothed data
-                this.transformDataset(lineData);
-                return [
-                    {
-                        data: lineData,
-                        encode: {
-                            // map 1 dimension to xAixs.
-                            x: [1],
-                            // map 2 dimension to yAixs.
-                            y: [2],
-                        },
-                    },
-                    {
-                        data: lineData,
-                        encode: {
-                            // Map 1 dimension to xAixs.
-                            x: [1],
-                            // Map 3 dimension to yAixs,
-                            // the third number is smoothed value.
-                            y: [3],
-                        },
-                    },
-                ];
-            });
-            this.myChart.setOption({
-                series: flatten(seriesData),
-            });
-        },
+    transformDataset(seriesData) {
+      // smooth
+      this.transformData(seriesData, this.smoothing);
+    },
 
-        getChartOptions() {
-            return this.myChart.getOption() || {};
-        },
-        handleDownLoad(runItemForDownload) {
-            let options = this.getChartOptions();
-            let series = options.series || [];
-            let seriesItem = series.find((item) => item.name === runItemForDownload) || {};
-            let fileName = this.tagInfo.tag.replace(/\//g, '-');
-            generateJsonAndDownload(seriesItem.data, fileName);
-        },
+    /**
+     * @desc 1、add smooth data depend on smoothingWeight. see https://en.wikipedia.org/wiki/Moving_average for detail
+     *       2、add relative data
+     * @param {Object} echarts series Object
+     * @param {number} smoothingWeight smooth weight, between 0 ~ 1
+     */
+    transformData(seriesData, smoothingWeight) {
+      let data = seriesData;
+      let last = data.length > 0 ? 0 : NaN;
+      let numAccum = 0;
+      let startValue;
+      data.forEach((d, i) => {
+        let nextVal = d[2];
+        // second to millisecond.
+        let millisecond = Math.floor(d[0] * 1000);
+        if (i === 0) {
+          startValue = millisecond;
+        }
+        // Relative time, millisecond to hours.
+        d[4] = Math.floor(millisecond - startValue) / (60 * 60 * 1000);
+        if (!isFinite(nextVal)) {
+          d[3] = nextVal;
+        } else {
+          last = last * smoothingWeight + (1 - smoothingWeight) * nextVal;
+          numAccum++;
+          let debiasWeight = 1;
+          if (smoothingWeight !== 1.0) {
+            debiasWeight = 1.0 - Math.pow(smoothingWeight, numAccum);
+          }
+          d[3] = last / debiasWeight;
+        }
+      });
+    },
 
-        transformDataset(seriesData) {
-            // smooth
-            this.transformData(seriesData, this.smoothing);
-        },
+    // Chart outlier options methods and functions ---- start.
+    // Compute Y domain from originData.
+    setChartsOutlier() {
+      let domainRangeArray = this.originData.map((seriesData) => this.computeDataRange(seriesData, this.outlier));
 
-        /**
-         * @desc 1、add smooth data depend on smoothingWeight. see https://en.wikipedia.org/wiki/Moving_average for detail
-         *       2、add relative data
-         * @param {Object} echarts series Object
-         * @param {number} smoothingWeight smooth weight, between 0 ~ 1
-         */
-        transformData(seriesData, smoothingWeight) {
-            let data = seriesData;
-            let last = data.length > 0 ? 0 : NaN;
-            let numAccum = 0;
-            let startValue;
-            data.forEach((d, i) => {
-                let nextVal = d[2];
-                // second to millisecond.
-                let millisecond = Math.floor(d[0] * 1000);
-                if (i === 0) {
-                    startValue = millisecond;
-                }
-                // Relative time, millisecond to hours.
-                d[4] = Math.floor(millisecond - startValue) / (60 * 60 * 1000);
-                if (!isFinite(nextVal)) {
-                    d[3] = nextVal;
-                } else {
-                    last = last * smoothingWeight + (1 - smoothingWeight) * nextVal;
-                    numAccum++;
-                    let debiasWeight = 1;
-                    if (smoothingWeight !== 1.0) {
-                        debiasWeight = 1.0 - Math.pow(smoothingWeight, numAccum);
-                    }
-                    d[3] = last / debiasWeight;
-                }
-            });
-        },
+      // Compare, get the best Y domain.
+      let flattenNumbers = flatten(domainRangeArray);
+      let finalMax = max(flattenNumbers);
+      let finalMin = min(flattenNumbers);
 
-        // Chart outlier options methods and functions ---- start.
-        // Compute Y domain from originData.
-        setChartsOutlier() {
-            let domainRangeArray = this.originData.map((seriesData) => this.computeDataRange(seriesData, this.outlier));
+      // Add padding.
+      let PaddedYDomain = this.paddedYDomain(finalMin, finalMax);
 
-            // Compare, get the best Y domain.
-            let flattenNumbers = flatten(domainRangeArray);
-            let finalMax = max(flattenNumbers);
-            let finalMin = min(flattenNumbers);
+      this.setChartOutlierOptions(PaddedYDomain);
 
-            // Add padding.
-            let PaddedYDomain = this.paddedYDomain(finalMin, finalMax);
+      // Store Y domain, if originData is not change, Y domain keep same.
+    },
 
-            this.setChartOutlierOptions(PaddedYDomain);
+    // Compute  max and min from array, if outlier is true, return quantile range.
+    computeDataRange(arr, isQuantile) {
+      // Get data range.
+      if (arr.length == 0) return [];
+      let max;
+      let min;
+      if (!isQuantile) {
+        // Get the orgin data range.
+        max = maxBy(arr, (item) => item[2])[2];
+        min = minBy(arr, (item) => item[2])[2];
+      } else {
+        // Get the quantile range.
+        let sorted = sortBy(arr, [(item) => item[2]]);
+        min = quantile(sorted, minQuantile, (item) => item[2]);
+        max = quantile(arr, maxQuantile, (item) => item[2]);
+      }
+      return [min, max];
+    },
 
-            // Store Y domain, if originData is not change, Y domain keep same.
-        },
+    paddedYDomain(min, max) {
+      return {
+        max: max > 0 ? max * 1.1 : max * 0.9,
+        min: min > 0 ? min * 0.9 : min * 1.1,
+      };
+    },
 
-        // Compute  max and min from array, if outlier is true, return quantile range.
-        computeDataRange(arr, isQuantile) {
-            // Get data range.
-            if (arr.length == 0) return [];
-            let max;
-            let min;
-            if (!isQuantile) {
-                // Get the orgin data range.
-                max = maxBy(arr, (item) => item[2])[2];
-                min = minBy(arr, (item) => item[2])[2];
-            } else {
-                // Get the quantile range.
-                let sorted = sortBy(arr, [(item) => item[2]]);
-                min = quantile(sorted, minQuantile, (item) => item[2]);
-                max = quantile(arr, maxQuantile, (item) => item[2]);
-            }
-            return [min, max];
+    setChartOutlierOptions({min, max}) {
+      this.myChart.setOption({
+        yAxis: {
+          min,
+          max,
         },
+      });
+    },
 
-        paddedYDomain(min, max) {
-            return {
-                max: max > 0 ? max * 1.1 : max * 0.9,
-                min: min > 0 ? min * 0.9 : min * 1.1,
-            };
+    // Chart horizontal options methods and functions ---- start.
+    setChartHorizon() {
+      let seriesOption = this.myChart.getOption().series;
+      let encodeSeries = (val) => {
+        return {
+          encode: {
+            x: [val],
+          },
+        };
+      };
+      let stepSeries = seriesOption.map((item) => encodeSeries(1));
+      let relativeSeries = seriesOption.map((item) => encodeSeries(4));
+      let wallSeries = seriesOption.map((item) => encodeSeries(0));
+      let horizontalToxAxisOptions = {
+        step: {
+          xAxis: {
+            type: 'value',
+            axisLabel: {
+              fontSize: '11',
+            },
+            splitNumber: this.isExpand ? 10 : 5,
+          },
+          series: stepSeries,
         },
-
-        setChartOutlierOptions({min, max}) {
-            this.myChart.setOption({
-                yAxis: {
-                    min,
-                    max,
-                },
-            });
+        relative: {
+          xAxis: {
+            type: 'value',
+            axisLabel: {
+              fontSize: '11',
+            },
+            splitNumber: this.isExpand ? 10 : 5,
+          },
+          series: relativeSeries,
         },
-
-        // Chart horizontal options methods and functions ---- start.
-        setChartHorizon() {
-            let seriesOption = this.myChart.getOption().series;
-            let encodeSeries = (val) => {
-                return {
-                    encode: {
-                        x: [val],
-                    },
-                };
-            };
-            let stepSeries = seriesOption.map((item) => encodeSeries(1));
-            let relativeSeries = seriesOption.map((item) => encodeSeries(4));
-            let wallSeries = seriesOption.map((item) => encodeSeries(0));
-            let horizontalToxAxisOptions = {
-                step: {
-                    xAxis: {
-                        type: 'value',
-                        axisLabel: {
-                            fontSize: '11',
-                        },
-                        splitNumber: this.isExpand ? 10 : 5,
-                    },
-                    series: stepSeries,
-                },
-                relative: {
-                    xAxis: {
-                        type: 'value',
-                        axisLabel: {
-                            fontSize: '11',
-                        },
-                        splitNumber: this.isExpand ? 10 : 5,
-                    },
-                    series: relativeSeries,
-                },
-                wall: {
-                    xAxis: {
-                        type: 'time',
-                        axisLabel: {
-                            fontSize: '11',
-                        },
-                    },
-                    series: wallSeries,
-                },
-            };
-            this.myChart.setOption(horizontalToxAxisOptions[this.horizontal]);
+        wall: {
+          xAxis: {
+            type: 'time',
+            axisLabel: {
+              fontSize: '11',
+            },
+          },
+          series: wallSeries,
         },
+      };
+      this.myChart.setOption(horizontalToxAxisOptions[this.horizontal]);
+    },
 
-        expandArea(expand) {
-            let pageBoxWidth = document.getElementsByClassName('visual-dl-chart-page-box')[0].offsetWidth;
-            let width = pageBoxWidth * 0.96; // 4% margin
-            if (expand) {
-                let el = this.$refs.chartBox;
-                el.style.width = width + 'px';
-                el.style.height = '600px';
-                this.myChart.resize({
-                    width: width,
-                    height: 600,
-                });
-            } else {
-                let el = this.$refs.chartBox;
-                el.style.width = '400px';
-                el.style.height = '300px';
-                this.myChart.resize({
-                    width: 400,
-                    height: 300,
-                });
-            }
+    expandArea(expand) {
+      let pageBoxWidth = document.getElementsByClassName('visual-dl-chart-page-box')[0].offsetWidth;
+      let width = pageBoxWidth * 0.96; // 4% margin
+      if (expand) {
+        let el = this.$refs.chartBox;
+        el.style.width = width + 'px';
+        el.style.height = '600px';
+        this.myChart.resize({
+          width: width,
+          height: 600,
+        });
+      } else {
+        let el = this.$refs.chartBox;
+        el.style.width = '400px';
+        el.style.height = '300px';
+        this.myChart.resize({
+          width: 400,
+          height: 300,
+        });
+      }
 
-            this.myChart.setOption({
-                xAxis: {
-                    splitNumber: this.isExpand ? 10 : 5,
-                },
-            });
+      this.myChart.setOption({
+        xAxis: {
+          splitNumber: this.isExpand ? 10 : 5,
         },
+      });
+    },
 
-        toggleSelectZoom(enable) {
-            let instance = this;
-            setTimeout(function() {
-                instance.myChart.dispatchAction({
-                    type: 'takeGlobalCursor',
-                    key: 'dataZoomSelect',
-                    dataZoomSelectActive: enable,
-                });
-            }, 0);
-        },
+    toggleSelectZoom(enable) {
+      let instance = this;
+      setTimeout(function() {
+        instance.myChart.dispatchAction({
+          type: 'takeGlobalCursor',
+          key: 'dataZoomSelect',
+          dataZoomSelectActive: enable,
+        });
+      }, 0);
+    },
 
-        restoreChart() {
-            this.myChart.dispatchAction({
-                type: 'restore',
-            });
-        },
+    restoreChart() {
+      this.myChart.dispatchAction({
+        type: 'restore',
+      });
+    },
 
-        saveChartAsImage() {
-            let dataUrl = this.myChart.getDataURL({
-                pixelRatio: 1,
-                backgroundColor: '#fff',
-            });
-            let fileName = this.tagInfo.tag.replace(/\//g, '-');
-            let link = document.createElement('a');
-            link.download = fileName;
-            link.href = dataUrl;
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-        },
+    saveChartAsImage() {
+      let dataUrl = this.myChart.getDataURL({
+        pixelRatio: 1,
+        backgroundColor: '#fff',
+      });
+      let fileName = this.tagInfo.tag.replace(/\//g, '-');
+      let link = document.createElement('a');
+      link.download = fileName;
+      link.href = dataUrl;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    },
 
-        getFormatterPoints(data) {
-            let originData = this.originData;
-            let tagList = this.tagInfo.tagList;
-            let sortingMethod = this.sortingMethod;
-            // Can't know exactly the tigger runs.
-            // If the step is same, regard the point as the trigger point.
-            let [, step, triggerValue] = data;
-            let points = originData.map((series, index) => {
-                let nearestItem;
-                if (step === 0) {
-                    nearestItem = series[0];
-                } else {
-                    for (let i = 0; i < series.length; i++) {
-                        let item = series[i];
-                        if (item[1] === step) {
-                            nearestItem = item;
-                            break;
-                        }
-                        if (item[1] > step) {
-                            let index = i - 1;
-                            nearestItem = series[index >= 0 ? index : 0];
-                            break;
-                        }
-                        if (!nearestItem) {
-                            nearestItem = series[series.length - 1];
-                        }
-                    }
-                }
-                return {
-                    run: tagList[index].run,
-                    item: nearestItem,
-                };
-            });
-
-            if (sortingMethod === 'default' || !sortingMethod) {
-                return points;
+    getFormatterPoints(data) {
+      let originData = this.originData;
+      let tagList = this.tagInfo.tagList;
+      let sortingMethod = this.sortingMethod;
+      // Can't know exactly the tigger runs.
+      // If the step is same, regard the point as the trigger point.
+      let [, step, triggerValue] = data;
+      let points = originData.map((series, index) => {
+        let nearestItem;
+        if (step === 0) {
+          nearestItem = series[0];
+        } else {
+          for (let i = 0; i < series.length; i++) {
+            let item = series[i];
+            if (item[1] === step) {
+              nearestItem = item;
+              break;
             }
-            let sortedPoints;
-            switch (sortingMethod) {
-                case 'descending':
-                    sortedPoints = sortBy(points, (one) => one.item[3]);
-                    sortedPoints.reverse();
-                    break;
-                case 'ascending':
-                    sortedPoints = sortBy(points, (one) => one.item[3]);
-                    break;
-                case 'nearest':
-                    // Compare other ponts width the trigger point, caculate the nearest sort.
-                    sortedPoints = sortBy(points, (one) => one.item[3] - triggerValue);
-                    break;
-                default:
-                    sortedPoints = points;
+            if (item[1] > step) {
+              let index = i - 1;
+              nearestItem = series[index >= 0 ? index : 0];
+              break;
             }
-            return sortedPoints;
-        },
+            if (!nearestItem) {
+              nearestItem = series[series.length - 1];
+            }
+          }
+        }
+        return {
+          run: tagList[index].run,
+          item: nearestItem,
+        };
+      });
+
+      if (sortingMethod === 'default' || !sortingMethod) {
+        return points;
+      }
+      let sortedPoints;
+      switch (sortingMethod) {
+      case 'descending':
+        sortedPoints = sortBy(points, (one) => one.item[3]);
+        sortedPoints.reverse();
+        break;
+      case 'ascending':
+        sortedPoints = sortBy(points, (one) => one.item[3]);
+        break;
+      case 'nearest':
+        // Compare other ponts width the trigger point, caculate the nearest sort.
+        sortedPoints = sortBy(points, (one) => one.item[3] - triggerValue);
+        break;
+      default:
+        sortedPoints = points;
+      }
+      return sortedPoints;
+    },
 
-        transformFormatterData(data) {
-            let indexPropMap = {
-                Time: 0,
-                Step: 1,
-                Value: 2,
-                Smoothed: 3,
-                Relative: 4,
-            };
-            let widthPropMap = {
-                Run: 40,
-                Time: 120,
-                Step: 40,
-                Value: 50,
-                Smoothed: 60,
-                Relative: 60,
-            };
-            let transformedData = data.map((item) => {
-                let data = item.item;
-                return {
-                    Run: item.run,
-                    // Keep six number for easy-read.
-                    Smoothed: data[indexPropMap.Smoothed].toString().slice(0, 6),
-                    Value: data[indexPropMap.Value].toString().slice(0, 6),
-                    Step: data[indexPropMap.Step],
-                    Time: moment(Math.floor(data[indexPropMap.Time] * 1000), 'x').format('YYYY-MM-DD HH:mm:ss'),
-                    // Relative display value should take easy-read into consideration.
-                    // Better to tranform data to 'day:hour', 'hour:minutes', 'minute: seconds' and second only.
-                    Relative: Math.floor(data[indexPropMap.Relative] * 60 * 60) + 's',
-                };
-            });
-
-            let headerHtml = '<tr style="font-size:14px;">';
-            headerHtml += Object.keys(transformedData[0]).map((key) => {
-                return '<td style="padding: 0 4px; font-family: \'Merriweather Sans\'; font-weight: bold; width:' + widthPropMap[key] + 'px;">' + key + '</td>';
-            }).join('');
-            headerHtml += '</tr>';
-
-            let content = transformedData.map((item) => {
-                let str = '<tr style="font-size:12px;">';
-                str += Object.keys(item).map((val) => {
-                    return '<td style="padding: 0 4px">' + item[val] + '</td>';
-                }).join('');
-                str += '</tr>';
-                return str;
-            }).join('');
-
-            return '<table style="text-align: left;table-layout: fixed;width: 480px;"><thead>' + headerHtml + '</thead>'
-                + '<tbody>' + content + '</tbody><table>';
-        },
+    transformFormatterData(data) {
+      let indexPropMap = {
+        Time: 0,
+        Step: 1,
+        Value: 2,
+        Smoothed: 3,
+        Relative: 4,
+      };
+      let widthPropMap = {
+        Run: 40,
+        Time: 120,
+        Step: 40,
+        Value: 50,
+        Smoothed: 60,
+        Relative: 60,
+      };
+      let transformedData = data.map((item) => {
+        let data = item.item;
+        return {
+          Run: item.run,
+          // Keep six number for easy-read.
+          Smoothed: data[indexPropMap.Smoothed].toString().slice(0, 6),
+          Value: data[indexPropMap.Value].toString().slice(0, 6),
+          Step: data[indexPropMap.Step],
+          Time: moment(Math.floor(data[indexPropMap.Time] * 1000), 'x').format('YYYY-MM-DD HH:mm:ss'),
+          // Relative display value should take easy-read into consideration.
+          // Better to tranform data to 'day:hour', 'hour:minutes', 'minute: seconds' and second only.
+          Relative: Math.floor(data[indexPropMap.Relative] * 60 * 60) + 's',
+        };
+      });
+
+      let headerHtml = '<tr style="font-size:14px;">';
+      headerHtml += Object.keys(transformedData[0]).map((key) => {
+        return '<td style="padding: 0 4px; font-family: \'Merriweather Sans\'; font-weight: bold; width:' + widthPropMap[key] + 'px;">' + key + '</td>';
+      }).join('');
+      headerHtml += '</tr>';
+
+      let content = transformedData.map((item) => {
+        let str = '<tr style="font-size:12px;">';
+        str += Object.keys(item).map((val) => {
+          return '<td style="padding: 0 4px">' + item[val] + '</td>';
+        }).join('');
+        str += '</tr>';
+        return str;
+      }).join('');
+
+      return '<table style="text-align: left;table-layout: fixed;width: 480px;"><thead>' + headerHtml + '</thead>'
+        + '<tbody>' + content + '</tbody><table>';
     },
+  },
 };
 </script>
 <style lang="stylus">

frontend/src/scalars/ui/ChartPage.vue

@@ -34,42 +34,42 @@ import Chart from './Chart';
 import {cloneDeep} from 'lodash';
 
 export default {
-    components: {
-        'ui-chart': Chart,
-        'ui-expand-panel': ExpandPanel,
-        // 'ui-pagination': Pagination
+  components: {
+    'ui-chart': Chart,
+    'ui-expand-panel': ExpandPanel,
+    // 'ui-pagination': Pagination
+  },
+  props: ['config', 'runsItems', 'tagList', 'title'],
+  computed: {
+    filteredRunsList() {
+      let tagList = this.tagList || [];
+      let runs = this.config.runs || [];
+      let list = cloneDeep(tagList);
+      return list.slice().map((item) => {
+        item.tagList = item.tagList.filter((one) => runs.includes(one.run));
+        return item;
+      });
     },
-    props: ['config', 'runsItems', 'tagList', 'title'],
-    computed: {
-        filteredRunsList() {
-            let tagList = this.tagList || [];
-            let runs = this.config.runs || [];
-            let list = cloneDeep(tagList);
-            return list.slice().map((item) => {
-                item.tagList = item.tagList.filter((one) => runs.includes(one.run));
-                return item;
-            });
-        },
-        filteredTagList() {
-            let tagList = this.filteredRunsList || [];
-            return tagList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
-        },
-        total() {
-            let tagList = this.tagList || [];
-            return tagList.length;
-        },
-        pageLength() {
-            return Math.ceil(this.total / this.pageSize);
-        },
+    filteredTagList() {
+      let tagList = this.filteredRunsList || [];
+      return tagList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
     },
-    data() {
-        return {
-            // current page
-            currentPage: 1,
-            // item per page
-            pageSize: 8,
-        };
+    total() {
+      let tagList = this.tagList || [];
+      return tagList.length;
     },
+    pageLength() {
+      return Math.ceil(this.total / this.pageSize);
+    },
+  },
+  data() {
+    return {
+      // current page
+      currentPage: 1,
+      // item per page
+      pageSize: 8,
+    };
+  },
 };
 </script>
 <style lang="stylus">

frontend/src/scalars/ui/Config.vue

@@ -76,44 +76,44 @@
 <script>
 
 export default {
-    props: {
-        runsItems: Array,
-        config: Object,
-    },
-    data() {
-        return {
-            horizontalItems: [
-                {
-                    name: 'Step',
-                    value: 'step',
-                },
-                {
-                    name: 'Relative',
-                    value: 'relative',
-                },
-                {
-                    name: 'Wall',
-                    value: 'wall',
-                },
-            ],
-            sortingMethodItems: [
-                'default', 'descending', 'ascending', 'nearest',
-            ],
-            smoothingValue: this.config.smoothing,
-        };
-    },
-    watch: {
-        smoothingValue: _.debounce(
-            function() {
-                this.config.smoothing = this.smoothingValue;
-            }, 50
-        ),
-    },
-    methods: {
-        toggleAllRuns() {
-            this.config.running = !this.config.running;
+  props: {
+    runsItems: Array,
+    config: Object,
+  },
+  data() {
+    return {
+      horizontalItems: [
+        {
+          name: 'Step',
+          value: 'step',
+        },
+        {
+          name: 'Relative',
+          value: 'relative',
+        },
+        {
+          name: 'Wall',
+          value: 'wall',
         },
+      ],
+      sortingMethodItems: [
+        'default', 'descending', 'ascending', 'nearest',
+      ],
+      smoothingValue: this.config.smoothing,
+    };
+  },
+  watch: {
+    smoothingValue: _.debounce(
+      function() {
+        this.config.smoothing = this.smoothingValue;
+      }, 50
+    ),
+  },
+  methods: {
+    toggleAllRuns() {
+      this.config.running = !this.config.running;
     },
+  },
 };
 
 </script>

frontend/src/texts/Texts.vue

@@ -38,126 +38,126 @@ import Config from './ui/Config';
 import ChartPage from './ui/ChartPage';
 
 export default {
-    name: 'Texts',
-    components: {
-        'ui-config': Config,
-        'ui-chart-page': ChartPage,
-    },
-    data() {
+  name: 'Texts',
+  components: {
+    'ui-config': Config,
+    'ui-chart-page': ChartPage,
+  },
+  data() {
+    return {
+      runsArray: [],
+      tags: [],
+      config: {
+        groupNameReg: '.*',
+        runs: [],
+        running: true,
+      },
+      filteredTagsList: [],
+    };
+  },
+  computed: {
+    runsItems() {
+      let runsArray = this.runsArray || [];
+      return runsArray.map((item) => {
         return {
-            runsArray: [],
-            tags: [],
-            config: {
-                groupNameReg: '.*',
-                runs: [],
-                running: true,
-            },
-            filteredTagsList: [],
+          name: item,
+          value: item,
         };
+      });
     },
-    computed: {
-        runsItems() {
-            let runsArray = this.runsArray || [];
-            return runsArray.map((item) => {
-                return {
-                    name: item,
-                    value: item,
-                };
-            });
-        },
-        tagsList() {
-            let tags = this.tags;
-
-            let runs = Object.keys(tags);
-            let tagsArray = runs.map((run) => Object.keys(tags[run]));
-            let allUniqTags = uniq(flatten(tagsArray));
+    tagsList() {
+      let tags = this.tags;
 
-            // get the data for every chart
-            return allUniqTags.map((tag) => {
-                let tagList = runs.map((run) => {
-                    return {
-                        run,
-                        tag: tags[run][tag],
-                    };
-                }).filter((item) => item.tag !== undefined);
-                return {
-                    tagList,
-                    tag,
-                    group: tag.split('/')[0],
-                };
-            });
-        },
-        groupedTags() {
-            let tagsList = this.tagsList || [];
-            // put data in group
-            let groupData = {};
-            tagsList.forEach((item) => {
-                let group = item.group;
-                if (groupData[group] === undefined) {
-                    groupData[group] = [];
-                    groupData[group].push(item);
-                } else {
-                    groupData[group].push(item);
-                }
-            });
+      let runs = Object.keys(tags);
+      let tagsArray = runs.map((run) => Object.keys(tags[run]));
+      let allUniqTags = uniq(flatten(tagsArray));
 
-            // to array
-            let groups = Object.keys(groupData);
-            return groups.map((group) => {
-                return {
-                    group,
-                    tags: groupData[group],
-                };
-            });
-        },
-        filteredConfig() {
-            let config = this.config || {};
-            let filteredConfig = {};
-            Object.keys(config).forEach((key) => {
-                let val = config[key];
-                filteredConfig[key] = val;
-            });
-            return filteredConfig;
-        },
+      // get the data for every chart
+      return allUniqTags.map((tag) => {
+        let tagList = runs.map((run) => {
+          return {
+            run,
+            tag: tags[run][tag],
+          };
+        }).filter((item) => item.tag !== undefined);
+        return {
+          tagList,
+          tag,
+          group: tag.split('/')[0],
+        };
+      });
     },
-    created() {
-        getPluginTextsTags().then(({errno, data}) => {
-            this.tags = data;
-
-            // filter when inited
-            let groupNameReg = this.config.groupNameReg;
-            this.filterTagsList(groupNameReg);
-        });
+    groupedTags() {
+      let tagsList = this.tagsList || [];
+      // put data in group
+      let groupData = {};
+      tagsList.forEach((item) => {
+        let group = item.group;
+        if (groupData[group] === undefined) {
+          groupData[group] = [];
+          groupData[group].push(item);
+        } else {
+          groupData[group].push(item);
+        }
+      });
 
-        getRuns().then(({errno, data}) => {
-            this.runsArray = data;
-            this.config.runs = data;
-        });
+      // to array
+      let groups = Object.keys(groupData);
+      return groups.map((group) => {
+        return {
+          group,
+          tags: groupData[group],
+        };
+      });
     },
-    mounted() {
-	    autoAdjustHeight();
+    filteredConfig() {
+      let config = this.config || {};
+      let filteredConfig = {};
+      Object.keys(config).forEach((key) => {
+        let val = config[key];
+        filteredConfig[key] = val;
+      });
+      return filteredConfig;
     },
-    watch: {
-        'config.groupNameReg': function(val) {
-            this.throttledFilterTagsList();
-        },
+  },
+  created() {
+    getPluginTextsTags().then(({errno, data}) => {
+      this.tags = data;
+
+      // filter when inited
+      let groupNameReg = this.config.groupNameReg;
+      this.filterTagsList(groupNameReg);
+    });
+
+    getRuns().then(({errno, data}) => {
+      this.runsArray = data;
+      this.config.runs = data;
+    });
+  },
+  mounted() {
+    autoAdjustHeight();
+  },
+  watch: {
+    'config.groupNameReg': function(val) {
+      this.throttledFilterTagsList();
     },
-    methods: {
-        filterTagsList(groupNameReg) {
-            if (!groupNameReg) {
-                this.filteredTagsList = [];
-                return;
-            }
-            let tagsList = this.tagsList || [];
-            let regExp = new RegExp(groupNameReg);
-            this.filteredTagsList = tagsList.filter((item) => regExp.test(item.tag));
-        },
-        throttledFilterTagsList: _.debounce(
-            function() {
-                this.filterTagsList(this.config.groupNameReg);
-            }, 300
-        ),
+  },
+  methods: {
+    filterTagsList(groupNameReg) {
+      if (!groupNameReg) {
+        this.filteredTagsList = [];
+        return;
+      }
+      let tagsList = this.tagsList || [];
+      let regExp = new RegExp(groupNameReg);
+      this.filteredTagsList = tagsList.filter((item) => regExp.test(item.tag));
     },
+    throttledFilterTagsList: _.debounce(
+      function() {
+        this.filterTagsList(this.config.groupNameReg);
+      }, 300
+    ),
+  },
 };
 
 </script>

frontend/src/texts/index.js

@@ -3,7 +3,7 @@ import {router} from 'san-router';
 import Texts from './Texts';
 
 router.add({
-    target: '#content',
-    rule: '/texts',
-    Component: Texts,
+  target: '#content',
+  rule: '/texts',
+  Component: Texts,
 });

frontend/src/texts/ui/Chart.vue

@@ -28,100 +28,100 @@ import {getPluginTextsTexts} from '../../service';
 const intervalTime = 30;
 
 export default {
-    props: ['tagInfo', 'runs', 'running', 'runsItems'],
-    computed: {
-        steps() {
-            let data = this.data || [];
-            return data.length - 1;
-        },
+  props: ['tagInfo', 'runs', 'running', 'runsItems'],
+  computed: {
+    steps() {
+      let data = this.data || [];
+      return data.length - 1;
     },
-    filters: {
-        formatTime: function(value) {
-            if (!value) {
-                return;
-            }
-            // The value was made in seconds, must convert it to milliseconds
-            let time = new Date(value * 1000);
-            let options = {
-                weekday: 'short', year: 'numeric', month: 'short',
-                day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit',
-            };
-            return time.toLocaleDateString('en-US', options);
-        },
+  },
+  filters: {
+    formatTime: function(value) {
+      if (!value) {
+        return;
+      }
+      // The value was made in seconds, must convert it to milliseconds
+      let time = new Date(value * 1000);
+      let options = {
+        weekday: 'short', year: 'numeric', month: 'short',
+        day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit',
+      };
+      return time.toLocaleDateString('en-US', options);
     },
-    data() {
-        return {
-            currentIndex: 0,
-            slider: {
-                value: '0',
-                label: '',
-                min: 0,
-                step: 1,
-            },
-            textData: {},
-            data: [],
+  },
+  data() {
+    return {
+      currentIndex: 0,
+      slider: {
+        value: '0',
+        label: '',
+        min: 0,
+        step: 1,
+      },
+      textData: {},
+      data: [],
+    };
+  },
+  created() {
+    this.getOriginChartsData();
+  },
+  mounted() {
+    if (this.running) {
+      this.startInterval();
+    }
+  },
+
+  beforeDestroy() {
+    this.stopInterval();
+  },
+
+  watch: {
+    running: function(val) {
+      val ? this.startInterval() : this.stopInterval();
+    },
+    currentIndex: function(index) {
+      if (this.data && this.data[index]) {
+        let currentTextInfo = this.data ? this.data[index] : {};
+        let wall_time = currentTextInfo[0];
+        let step = currentTextInfo[1];
+        let message = currentTextInfo[2];
+
+        this.textData = {
+          step,
+          wall_time,
+          message,
         };
+      }
+    },
+  },
+  methods: {
+    stopInterval() {
+      clearInterval(this.getOringDataInterval);
     },
-    created() {
+    // get origin data per {{intervalTime}} seconds
+    startInterval() {
+      this.getOringDataInterval = setInterval(() => {
         this.getOriginChartsData();
+      }, intervalTime * 1000);
     },
-    mounted() {
-        if (this.running) {
-            this.startInterval();
+    getOriginChartsData() {
+      // let {run, tag} = this.tagInfo;
+      let run = this.tagInfo.run;
+      let tag = this.tagInfo.tag;
+      let {displayName, samples} = tag;
+      let params = {
+        run,
+        tag: displayName,
+        samples,
+      };
+      getPluginTextsTexts(params).then(({status, data}) => {
+        if (status === 0) {
+          this.data = data;
+          this.currentIndex = data.length - 1;
         }
+      });
     },
-
-    beforeDestroy() {
-        this.stopInterval();
-    },
-
-    watch: {
-        running: function(val) {
-            val ? this.startInterval() : this.stopInterval();
-        },
-        currentIndex: function(index) {
-            if (this.data && this.data[index]) {
-                let currentTextInfo = this.data ? this.data[index] : {};
-                let wall_time = currentTextInfo[0];
-                let step = currentTextInfo[1];
-                let message = currentTextInfo[2];
-
-                this.textData = {
-                    step,
-                    wall_time,
-                    message,
-                };
-            }
-        },
-    },
-    methods: {
-        stopInterval() {
-            clearInterval(this.getOringDataInterval);
-        },
-        // get origin data per {{intervalTime}} seconds
-        startInterval() {
-            this.getOringDataInterval = setInterval(() => {
-                this.getOriginChartsData();
-            }, intervalTime * 1000);
-        },
-        getOriginChartsData() {
-            // let {run, tag} = this.tagInfo;
-            let run = this.tagInfo.run;
-            let tag = this.tagInfo.tag;
-            let {displayName, samples} = tag;
-            let params = {
-                run,
-                tag: displayName,
-                samples,
-            };
-            getPluginTextsTexts(params).then(({status, data}) => {
-                if (status === 0) {
-                    this.data = data;
-                    this.currentIndex = data.length - 1;
-                }
-            });
-        },
-    },
+  },
 };
 </script>
 <style lang="stylus">

frontend/src/texts/ui/ChartPage.vue

@@ -31,40 +31,40 @@ import Chart from './Chart';
 import {cloneDeep, flatten} from 'lodash';
 
 export default {
-    components: {
-        'ui-chart': Chart,
-        'ui-expand-panel': ExpandPanel,
+  components: {
+    'ui-chart': Chart,
+    'ui-expand-panel': ExpandPanel,
+  },
+  props: ['config', 'runsItems', 'tagList', 'title'],
+  computed: {
+    filteredRunsList() {
+      let tagList = this.tagList || [];
+      let runs = this.config.runs || [];
+      let list = cloneDeep(tagList);
+      return flatten(list.slice().map((item) => {
+        return item.tagList.filter((one) => runs.includes(one.run));
+      }));
     },
-    props: ['config', 'runsItems', 'tagList', 'title'],
-    computed: {
-        filteredRunsList() {
-            let tagList = this.tagList || [];
-            let runs = this.config.runs || [];
-            let list = cloneDeep(tagList);
-            return flatten(list.slice().map((item) => {
-                return item.tagList.filter((one) => runs.includes(one.run));
-            }));
-        },
-        filteredPageList() {
-            let list = this.filteredRunsList || [];
-            return list.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
-        },
-        total() {
-            let tagList = this.tagList || [];
-            return tagList.length;
-        },
-        pageLength() {
-            return Math.ceil(this.total / this.pageSize);
-        },
+    filteredPageList() {
+      let list = this.filteredRunsList || [];
+      return list.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
     },
-    data() {
-        return {
-            // current page
-            currentPage: 1,
-            // item per page
-            pageSize: 8,
-        };
+    total() {
+      let tagList = this.tagList || [];
+      return tagList.length;
     },
+    pageLength() {
+      return Math.ceil(this.total / this.pageSize);
+    },
+  },
+  data() {
+    return {
+      // current page
+      currentPage: 1,
+      // item per page
+      pageSize: 8,
+    };
+  },
 };
 </script>
 <style lang="stylus">

frontend/src/texts/ui/Config.vue

@@ -34,19 +34,19 @@
 <script>
 
 export default {
-    props: {
-        runsItems: Array,
-        config: Object,
-    },
-    data() {
-        return {
-        };
-    },
-    methods: {
-        toggleAllRuns() {
-            this.config.running = !this.config.running;
-        },
+  props: {
+    runsItems: Array,
+    config: Object,
+  },
+  data() {
+    return {
+    };
+  },
+  methods: {
+    toggleAllRuns() {
+      this.config.running = !this.config.running;
     },
+  },
 };
 
 </script>