From a6b80b997f40a34559ee21bc761d3598a736e94e Mon Sep 17 00:00:00 2001
From: Jeff Wang <wangjeff@baidu.com>
Date: Thu, 8 Mar 2018 11:46:32 -0800
Subject: [PATCH] Migrate from san to vue (#281)

* Initial checking to setup Vue basic requirements. (#264)

Add App.vue
Add AppMenu.vue

* Vue with app menu (#265)

* Add vuetify framework
Update AppMenu.vue to include the basic menu item.

* use name as key.

* Add major components (#266)

* Add vuetify framework
Update AppMenu.vue to include the basic menu item.

* use name as key.

* Add Scalars, Images, Histograms, Graph.

* Switch to use the stylus language for CSS

* Port functions from Scalars.san to Scalars.vue

* Add config vue (#267)

* Add vuetify framework
Update AppMenu.vue to include the basic menu item.

* use name as key.

* Add Config Vue

* Integrate chart to scalar with Vue (#268)

* Fix warnings from Vue compiler
* use default prop instead of duplicate data and prop
* use function instead of shorthand declaration with data

* refract naming style, fix scalar options

* Fix config UI

* Add chart and chart page and integrate to scalar

* update with varun and jeff's comments

* Add images config (#270)

* Add vuetify framework
Update AppMenu.vue to include the basic menu item.

* use name as key.

* Add the Config.vue for Images

* Add the CharPage.vue and Image.vue

* Hook up the config to the image.vue so that the image height and width can update

* Show Scalar Data and add ExpandPanel (#272)

* Watch tagInfo changes to update chart and fix tooltip issue

* Add expand panel and maintain isShow state in the panel

* Add Expand Panel in Image

* Add watch group name reg (#273)

* Add vuetify framework
Update AppMenu.vue to include the basic menu item.

* use name as key.

* Add Watch on the groupNameReg

* Allow the nav bar to persist the selected item style. (#274)

* Fix the incorrect pagination issue. (#276)

* Add the Graph.vue and the Config.vue for Graph tab (#277)

* Add the Histogram related vue files. (#278)

* Fix error message on charts (#279)

* Make sure to clear the chart before each use.

* Add key for v-for loop.

* Add theme and fix UI (#280)

-Apply theme color in Vuetify
-Add main.styl to override Vuetify default stylus variables
-Add relative path in web pack config to find variables.styl

* Fix multiple scalar issues: (#283)

* Fix multiple scalar issues:
-download link / outliers should take boolean value instead of array
-download link now show proper selector of runsItem and download button
-Use tag as key to prevent chart re-rendering
-Add missing label in scalar config and fix UI

* simply use index for key because scalar has different tag info structure from image and histogram

* Fix font size and reorganize css and stylus (#287)

* Fix comments

* placeholder index.js

* Fix issue where download data link points to empty run (#294)

-Dropdown should only display non empty runs
-Select first run by default
-Remove drop down if all are empty runs
-Refract download type to runItemForDownload
-Add train run and multiple tags in mock data

* Fix error when scalar data empty (#298)

-Error comes in when trying to access elements inside empty data
-When one of the runs has empty data, the chart will display nothing even other run has non empty data
-Fix by checking length of data before accessing
---
 frontend/mock/data/plugin/histograms/tags.js  |  28 +-
 frontend/mock/data/plugin/scalars/tags.js     |  14 +
 frontend/package.json                         |   9 +-
 frontend/src/App.vue                          |  75 +++
 frontend/src/common/component/AppMenu.vue     |  85 +++
 frontend/src/common/component/ExpandPanel.vue |  65 ++
 .../common/component/Notification/index.js    |  10 +-
 frontend/src/graph/Graph.vue                  |  60 ++
 frontend/src/graph/ui/Chart.vue               | 189 ++++++
 frontend/src/graph/ui/Config.vue              |  57 ++
 frontend/src/histogram/Histogram.vue          | 158 +++++
 frontend/src/histogram/ui/Chart.vue           | 525 ++++++++++++++++
 frontend/src/histogram/ui/ChartPage.vue       |  88 +++
 frontend/src/histogram/ui/Config.vue          |  71 +++
 frontend/src/images/Images.vue                | 168 +++++
 frontend/src/images/ui/ChartPage.vue          |  89 +++
 frontend/src/images/ui/Config.vue             |  62 ++
 frontend/src/images/ui/Image.vue              | 158 +++++
 frontend/src/index.js                         |  56 +-
 frontend/src/router/index.js                  |  34 +
 frontend/src/scalars/Scalars.vue              | 161 +++++
 frontend/src/scalars/ui/Chart.vue             | 591 ++++++++++++++++++
 frontend/src/scalars/ui/ChartPage.vue         |  85 +++
 frontend/src/scalars/ui/Config.vue            | 130 ++++
 frontend/src/style/main.styl                  |  11 +
 frontend/src/style/variables.styl             |   4 +-
 frontend/template/index.html                  |   1 +
 frontend/tool/webpack.config.js               |  17 +-
 28 files changed, 2960 insertions(+), 41 deletions(-)
 create mode 100644 frontend/src/App.vue
 create mode 100644 frontend/src/common/component/AppMenu.vue
 create mode 100644 frontend/src/common/component/ExpandPanel.vue
 create mode 100644 frontend/src/graph/Graph.vue
 create mode 100644 frontend/src/graph/ui/Chart.vue
 create mode 100644 frontend/src/graph/ui/Config.vue
 create mode 100644 frontend/src/histogram/Histogram.vue
 create mode 100644 frontend/src/histogram/ui/Chart.vue
 create mode 100644 frontend/src/histogram/ui/ChartPage.vue
 create mode 100644 frontend/src/histogram/ui/Config.vue
 create mode 100644 frontend/src/images/Images.vue
 create mode 100644 frontend/src/images/ui/ChartPage.vue
 create mode 100644 frontend/src/images/ui/Config.vue
 create mode 100644 frontend/src/images/ui/Image.vue
 create mode 100644 frontend/src/router/index.js
 create mode 100644 frontend/src/scalars/Scalars.vue
 create mode 100644 frontend/src/scalars/ui/Chart.vue
 create mode 100644 frontend/src/scalars/ui/ChartPage.vue
 create mode 100644 frontend/src/scalars/ui/Config.vue
 create mode 100644 frontend/src/style/main.styl

diff --git a/frontend/mock/data/plugin/histograms/tags.js b/frontend/mock/data/plugin/histograms/tags.js
index 71c747f7..9359f879 100644
--- a/frontend/mock/data/plugin/histograms/tags.js
+++ b/frontend/mock/data/plugin/histograms/tags.js
@@ -19,15 +19,27 @@ module.exports = function (path, queryParam, postParam) {
             data: {
                 "test": {
                     "layer1/Wx_plus_b/pre_activations":
-                    {
-                        "displayName": "layer1/Wx_plus_b/pre_activations",
-                        "description": ""
-                    },
+                        {
+                            "displayName": "layer1/Wx_plus_b/pre_activations",
+                            "description": ""
+                        },
                     "layer1/Wx_plus_b/pre_activations_1":
-                    {
-                        "displayName": "layer1/Wx_plus_b/pre_activations_1",
-                        "description": ""
-                    }
+                        {
+                            "displayName": "layer1/Wx_plus_b/pre_activations_1",
+                            "description": ""
+                        }
+                },
+                "train": {
+                    "layer1/Wx_plus_b/pre_activations":
+                        {
+                            "displayName": "layer1/Wx_plus_b/pre_activations",
+                            "description": ""
+                        },
+                    "layer1/Wx_plus_b/pre_activations_1":
+                        {
+                            "displayName": "layer1/Wx_plus_b/pre_activations_1",
+                            "description": ""
+                        }
                 }
             }
         }
diff --git a/frontend/mock/data/plugin/scalars/tags.js b/frontend/mock/data/plugin/scalars/tags.js
index 6cf9b62f..ec8acdeb 100644
--- a/frontend/mock/data/plugin/scalars/tags.js
+++ b/frontend/mock/data/plugin/scalars/tags.js
@@ -22,6 +22,20 @@ module.exports = function (path, queryParam, postParam) {
                         "displayName": "layer2/biases/summaries/mean",
                         "description": ""
                     }
+                },
+                "train": {
+                    "layer2/biases/summaries/mean": {
+                        "displayName": "layer2/biases/summaries/mean",
+                        "description": ""
+                    },
+                    "layer2/biases/summaries/accuracy": {
+                        "displayName": "layer2/biases/summaries/accuracy",
+                        "description": ""
+                    },
+                    "layer2/biases/summaries/cost": {
+                        "displayName": "layer2/biases/summaries/cost",
+                        "description": ""
+                    }
                 }
             }
         }
diff --git a/frontend/package.json b/frontend/package.json
index 92250d37..41cf3259 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -27,6 +27,9 @@
     "san-router": "^1.1.1",
     "san-store": "^1.0.1",
     "san-update": "^2.1.0",
+    "vue": "^2.5.2",
+    "vue-router": "^3.0.1",
+    "vuetify": "^0.17.7",
     "xlsx": "^0.11.3"
   },
   "devDependencies": {
@@ -72,6 +75,10 @@
     "webpack-dev-server": "^2.4.2",
     "webpack-hot-middleware": "^2.19.1",
     "webpack-merge": "^4.1.0",
-    "yargs": "^8.0.2"
+    "yargs": "^8.0.2",
+    "vue-jest": "^1.0.2",
+    "vue-loader": "^13.3.0",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.5.2"
   }
 }
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
new file mode 100644
index 00000000..1a0d8600
--- /dev/null
+++ b/frontend/src/App.vue
@@ -0,0 +1,75 @@
+<template>
+    <div id="app">
+        <v-app>
+            <AppMenu :initialRoute="initialRoute">
+            </AppMenu>
+            <router-view></router-view>
+        </v-app>
+    </div>
+</template>
+
+<script>
+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';
+        }
+    }
+}
+</script>
+
+<style lang="stylus">
+@import '~style/variables';
+@import '../style/main';
+@import url('https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700');
+
+#app {
+  font-family: 'Merriweather Sans', Helvetica, Arial, sans-serif;
+  font-weight: bold;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: $-content-text-color;
+}
+
++prefix-classes('visual-dl-page-')
+    .container
+        padding-right 300px
+        position relative
+        background $-left-background-color
+        .left
+            width 100%
+            overflow scroll
+            border solid 1px $-left-border-color
+            background $-left-border-color
+            min-height 300px
+            padding 2%
+            box-sizing border-box
+        .right
+            overflow scroll
+            width 300px
+            min-height 300px
+            position absolute
+            right 0
+            top 0
+            box-sizing border-box
+            font-size 14px
+            font-weight normal
+            .config-com
+                color $-right-font-color
+
+</style>
+
diff --git a/frontend/src/common/component/AppMenu.vue b/frontend/src/common/component/AppMenu.vue
new file mode 100644
index 00000000..9cd847be
--- /dev/null
+++ b/frontend/src/common/component/AppMenu.vue
@@ -0,0 +1,85 @@
+<template>
+    <div>
+        <div class="visual-dl-app-menu">
+            <v-toolbar color="primary" dark>
+                <v-toolbar-title class="appbar-menu-title"></v-toolbar-title>
+                <v-toolbar-items>
+                    <v-btn v-for="item in items" :key="item.name"
+                    flat dark :class="selected === item.name ? 'menu-item-selected': 'menu-item'"
+                    @click="handleItemClick(item)"
+                    >{{ item.title}}</v-btn>
+                </v-toolbar-items>
+            </v-toolbar>
+        </div>
+    </div>
+</template>
+
+<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: '/histograms',
+                title: 'HISTOGRAMS',
+                name: 'histograms'
+            },
+            {
+                url: '/graphs',
+                title: 'GRAPHS',
+                name: 'graphs'
+            }
+            ]
+        }
+    },
+    methods: {
+            handleItemClick: function (item) {
+            this.selected = item.name
+            this.$router.push(item.url)
+        }
+    }
+}
+</script>
+
+<style scoped lang="stylus">
+@import '~style/variables';
+
+.visual-dl-app-menu
+    .appbar-menu-title
+        flex none
+        margin-right 50px
+        background url('./visualdl-logo.png') no-repeat
+        background-size cover
+        width 120px
+        height 50px
+
+    .menu-item
+        font-size 16px
+        background none
+        padding 0 10px
+        color #fff
+        opacity 0.6
+        display flex
+        flex-direction row
+        font-weight bold
+
+    .menu-item:hover
+        opacity 1
+
+    .menu-item-selected
+        @extends .visual-dl-app-menu .menu-item
+        opacity 1
+</style>
diff --git a/frontend/src/common/component/ExpandPanel.vue b/frontend/src/common/component/ExpandPanel.vue
new file mode 100644
index 00000000..322ef3ea
--- /dev/null
+++ b/frontend/src/common/component/ExpandPanel.vue
@@ -0,0 +1,65 @@
+<template>
+    <div class="visual-dl-expand-panel">
+        <h3
+            class="visual-dl-expand-head"
+            @click="isShow = !isShow"
+        >
+            <span>{{title}}</span>
+            <span class="visual-dl-expand-head-info">
+                <v-icon class="visual-dl-expand-head-arrow" size="20">{{iconName}}</v-icon>
+                <span class="visual-dl-expand-head-num">({{info}})</span>
+            </span>
+        </h3>
+        <div
+            v-if="isShow"
+            class="visual-dl-expand-panel-content"
+        >
+            <slot></slot>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        title: String,
+        info: Number
+    },
+    computed: {
+        iconName() {
+            return this.isShow ? 'expand_less' : 'expand_more';
+        }
+    },
+    data() {
+        return {
+            isShow: true
+        };
+    }
+};
+</script>
+<style lang="stylus">
+    .visual-dl-expand-panel
+        .visual-dl-expand-head
+            border solid 1px #ccc
+            line-height 50px
+            height 50px
+            padding 0 20px
+            cursor pointer
+            position relative
+            .visual-dl-expand-head-info
+                position absolute
+                left 90%
+                .visual-dl-expand-head-arrow
+                    vertical-align middle
+                .visual-dl-expand-head-num
+                    line-height 20px
+                    font-size 12px
+                    font-weight normal
+        .visual-dl-expand-panel-content
+            padding 0 20px
+        .visual-dl-expand-panel-content:after
+            content: "";
+            clear: both;
+            display: block;
+</style>
+
+
diff --git a/frontend/src/common/component/Notification/index.js b/frontend/src/common/component/Notification/index.js
index 460b76af..71f89fa5 100644
--- a/frontend/src/common/component/Notification/index.js
+++ b/frontend/src/common/component/Notification/index.js
@@ -1,7 +1,3 @@
-import Notification from './Notification';
-import NotificationItem from './NotificationItem';
-
-export {
-    NotificationItem,
-    Notification as default
-};
+/**
+ * Created by ludaming on 3/4/18.
+ */
diff --git a/frontend/src/graph/Graph.vue b/frontend/src/graph/Graph.vue
new file mode 100644
index 00000000..0b1a3e12
--- /dev/null
+++ b/frontend/src/graph/Graph.vue
@@ -0,0 +1,60 @@
+<template>
+    <div class="visual-dl-page-container">
+        <div class="visual-dl-page-left">
+            <ui-chart
+                :fitScreen="fitScreen"
+                :download="download"
+                :scale="config.scale"
+            ></ui-chart>
+        </div>
+        <div class="visual-dl-page-right">
+            <div class="visual-dl-page-config-container">
+                <ui-config
+                    :config="config"
+                    @fitScreen="handleFitScreen"
+                    @download="handleDownload"
+                ></ui-config>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import autoAdjustHeight from '../common/util/autoAdjustHeight';
+import Config from './ui/Config'
+import Chart from './ui/Chart';
+
+export default {
+    components: {
+        'ui-config': Config,
+        'ui-chart': Chart
+    },
+    name: 'Graph',
+    data () {
+        return {
+            config: {
+                scale: 0.5
+            },
+            fitScreen: {fitScreen: false},
+            download: {download: false}
+        }
+    },
+    mounted() {
+        autoAdjustHeight();
+    },
+    methods: {
+        handleFitScreen() {
+            this.fitScreen = {fitScreen: true}
+            this.config.scale = 0.5;
+        },
+        handleDownload() {
+            this.download = {fitScreen: true}
+        }
+    }
+};
+
+</script>
+
+<style lang="stylus">
+
+</style>
diff --git a/frontend/src/graph/ui/Chart.vue b/frontend/src/graph/ui/Chart.vue
new file mode 100644
index 00000000..b9c911e6
--- /dev/null
+++ b/frontend/src/graph/ui/Chart.vue
@@ -0,0 +1,189 @@
+<template>
+    <div class="visual-dl-graph-charts">
+        <div v-if="graphUrl" class="visual-dl-img-box">
+            <div class="small-img-box">
+                <img class="small-img" ref="small_img" width="30" :src="graphUrl" />
+                <div class="screen-handler" ref="screen_handler"></div>
+            </div>
+            <img class="draggable"
+                 ref="draggable"
+                 :width="computedWidth"
+                 :src="graphUrl" />
+        </div>
+    </div>
+</template>
+<script>
+// libs
+import echarts from 'echarts';
+import {
+    dragMovelHandler,
+    tansformElement,
+    relativeMove
+} from './dragHelper';
+// service
+import {getPluginGraphsGraph} from '../../service';
+
+// https://github.com/taye/interact.js
+import interact from 'interactjs';
+
+export default {
+    props: ['fitScreen', 'download', 'scale'],
+    computed: {
+        computedWidth() {
+            let scale = this.scale;
+            return Math.floor(scale * 2 * 700);
+        }
+    },
+    data() {
+        return {
+            width: 800,
+            height: 600,
+            graphUrl: '',
+        };
+    },
+    watch: {
+        fitScreen: function(val) {
+            this.clearDragedTransform(this.getBigImgEl());
+            this.clearDragedTransform(this.getSmallImgDragHandler());
+        },
+        download: function(val) {
+            let aEl = document.createElement('a');
+            aEl.href = this.graphUrl;
+            aEl.download = 'graph.png';
+            aEl.click();
+        }
+    },
+    mounted() {
+        this.getOriginChartsData();
+    },
+
+    methods: {
+        createChart() {
+            let el = this.el.getElementsByClassName('visual-dl-chart-box')[0];
+            this.myChart = echarts.init(el);
+        },
+
+        initChartOption(data) {
+            this.setChartOptions(data);
+        },
+        setChartOptions(data) {
+            this.myChart.setOption(data);
+        },
+
+        getOriginChartsData() {
+            getPluginGraphsGraph().then(({status, data}) => {
+                if (status === 0 && data.url) {
+                    this.graphUrl = data.url
+                    this.addDragEventForImg();
+                }
+            });
+        },
+
+        clearDragedTransform(dragImgEl) {
+            dragImgEl.style.transform = 'none';
+            dragImgEl.setAttribute('data-x', 0);
+            dragImgEl.setAttribute('data-y', 0);
+        },
+
+        getBigImgEl() {
+            return this.$refs.draggable
+        },
+
+        getSmallImgEl() {
+            return this.$refs.small_img
+        },
+
+        getSmallImgDragHandler() {
+            return this.$refs.screen_handler
+        },
+
+        addDragEventForImg() {
+            let that = this;
+            // target elements with the "draggable" class
+            interact('.draggable').draggable({
+                // enable inertial throwing
+                inertia: true,
+                autoScroll: true,
+                // call this function on every dragmove event
+                onmove(event) {
+                    dragMovelHandler(event, (target, x, y) => {
+                        tansformElement(target, x, y);
+                        // compute the proportional value
+                        let triggerEl = that.getBigImgEl();
+                        let relativeEl = that.getSmallImgDragHandler();
+
+                        relativeMove({triggerEl, x, y}, relativeEl);
+                    });
+                }
+            });
+
+            interact('.screen-handler').draggable({
+                // enable inertial throwing
+                inertia: true,
+                autoScroll: true,
+                restrict: {
+                    restriction: 'parent',
+                    endOnly: false,
+                    elementRect: {
+                        top: 0,
+                        left: 0,
+                        bottom: 1,
+                        right: 1
+                    }
+                },
+                // call this function on every dragmove event
+                onmove(event) {
+                    dragMovelHandler(event, (target, x, y) => {
+                        tansformElement(target, x, y);
+                        // compute the proportional value
+                        let triggerEl = that.getSmallImgEl();
+                        let relativeEl = that.getBigImgEl();
+
+                        relativeMove({triggerEl, x, y}, relativeEl);
+                    });
+                }
+            });
+        }
+    }
+};
+</script>
+<style lang="stylus">
+    .visual-dl-graph-charts
+        width 90%
+        margin 0 auto
+        margin-bottom 20px
+
+        .visual-dl-chart-box
+            height 600px
+
+        .visual-dl-img-box
+            border solid 1px #e4e4e4
+            position relative
+            background #f0f0f0
+            overflow hidden
+
+            img
+                box-sizing border-box
+                margin 0 auto
+                display block
+
+            .small-img-box
+                width 30px
+                box-sizing border-box
+                position absolute
+                right 0
+                top 0
+                border-left solid 1px #e4e4e4
+                border-bottom solid 1px #e4e4e4
+                background #f0f0f0
+                z-index 1
+
+                .screen-handler
+                    box-sizing border-box
+                    position absolute
+                    width 30px
+                    height 20px
+                    border solid 1px #666
+                    top 0
+                    left -1px
+</style>
diff --git a/frontend/src/graph/ui/Config.vue b/frontend/src/graph/ui/Config.vue
new file mode 100644
index 00000000..f5ea3ee4
--- /dev/null
+++ b/frontend/src/graph/ui/Config.vue
@@ -0,0 +1,57 @@
+<template>
+    <div class="visual-dl-graph-config-com">
+        <v-btn
+            class="visual-dl-graph-config-button"
+            color="primary"
+            @click="handleFitScreen"
+            dark>
+            <v-icon style="margin-right: 6px" size="20">fullscreen</v-icon>
+            Fit &nbsp; to &nbsp; screen
+        </v-btn>
+
+        <v-btn
+            class="visual-dl-graph-config-button"
+            color="primary"
+            @click="handleDownload"
+            dark>
+            <v-icon style="margin-right: 6px">file_download</v-icon>
+            Download image
+        </v-btn>
+
+        <v-slider label="Scale"
+          max="1"
+          min="0.1"
+          step="0.1"
+          v-model="config.scale"
+          dark></v-slider>
+    </div>
+</template>
+<script>
+
+export default {
+    props:['config'],
+    methods: {
+        handleFitScreen() {
+            this.$emit('fitScreen')
+        },
+        handleDownload() {
+            this.$emit('download')
+        }
+    }
+};
+</script>
+<style lang="stylus">
+@import '../../style/variables';
++prefix-classes('visual-dl-graph-')
+    .config-com
+        width 90%
+        margin 20px auto
+        color $-right-font-color
+        .config-button
+            width 200px
+            margin-top 20px
+.visual-dl-graph-config-com
+    .sm-icon
+        width 36px
+        height 26px
+</style>
diff --git a/frontend/src/histogram/Histogram.vue b/frontend/src/histogram/Histogram.vue
new file mode 100644
index 00000000..6cd5e4fa
--- /dev/null
+++ b/frontend/src/histogram/Histogram.vue
@@ -0,0 +1,158 @@
+<template>
+    <div class="visual-dl-page-container">
+        <div class="visual-dl-page-left">
+            <ui-chart-page
+                :config="config"
+                :runsItems="runsItems"
+                :tagList="filteredTagsList"
+                :title="'Tags matching ' + config.groupNameReg"
+            ></ui-chart-page>
+            <ui-chart-page
+                v-for="item in groupedTags"
+                :key="item.group"
+                :config="config"
+                :runsItems="runsItems"
+                :tagList="item.tags"
+                :title="item.group"
+            ></ui-chart-page>
+        </div>
+        <div class="visual-dl-page-right">
+            <div class="visual-dl-page-config-container">
+                Config
+                <ui-config
+                    :runsItems="runsItems"
+                    :config="config"
+                ></ui-config>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getPluginHistogramsTags, getRuns} from '../service';
+import Config from './ui/Config';
+import ChartPage from './ui/ChartPage';
+import {debounce, flatten, uniq} from 'lodash';
+import autoAdjustHeight from '../common/util/autoAdjustHeight';
+
+export default {
+    components: {
+        'ui-config': Config,
+        'ui-chart-page': ChartPage
+    },
+    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));
+
+            // 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() {
+        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
+        ),
+    }
+};
+
+</script>
+
+<style lang="stylus">
+
+</style>
diff --git a/frontend/src/histogram/ui/Chart.vue b/frontend/src/histogram/ui/Chart.vue
new file mode 100644
index 00000000..1cfb9282
--- /dev/null
+++ b/frontend/src/histogram/ui/Chart.vue
@@ -0,0 +1,525 @@
+<template>
+    <div class="visual-dl-histogram-charts">
+        <div class="visual-dl-chart-box" ref="visual_dl_chart_box">
+        </div>
+        <div class="visual-dl-chart-actions">
+            <v-btn flat class="sm-button" @click="expandArea">
+                <v-icon size="20">settings_overscan</v-icon>
+            </v-btn>
+        </div>
+    </div>
+</template>
+<script>
+// libs
+import echarts from 'echarts';
+import {originDataToChartData} from '../histogramHelper';
+import {format, precisionRound} from 'd3-format';
+
+// service
+import {getPluginHistogramsHistograms} from '../../service';
+
+let zrDrawElement = {};
+zrDrawElement.hoverDots = [];
+// the time to refresh chart data
+const intervalTime = 15;
+
+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
+        };
+    },
+    watch: {
+        originData: function(val) {
+            this.initChartOption();
+        },
+        chartType: function(val) {
+            this.initChartOption();
+        },
+        running: function(val) {
+            val ? this.startInterval() : this.stopInterval();
+        }
+    },
+    mounted() {
+        let tagInfo = this.tagInfo;
+        this.initChart(tagInfo);
+        if (this.running) {
+            this.startInterval();
+        }
+    },
+
+    beforeDestroy() {
+        this.stopInterval();
+    },
+
+    methods: {
+        initChart(tagInfo) {
+            this.createChart();
+            this.getOriginChartData(tagInfo);
+        },
+
+        createChart() {
+            let el = this.$refs.visual_dl_chart_box
+            this.myChart = echarts.init(el);
+        },
+
+        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);
+        },
+
+        setChartOptions(visData, tag, chartType) {
+            let grid = {
+                left: '15%',
+                top: '15%',
+                right: '10%',
+                bottom: '8%'
+            };
+            let title = {
+                text: tag,
+                textStyle: {
+                    fontSize: '12',
+                    fontFamily: 'Merriweather Sans'
+                }
+            };
+            if (chartType === 'overlay') {
+                this.setOverlayChartOption(visData, title, grid);
+            }
+            else if (chartType === 'offset') {
+                this.setOffsetChartOption(visData, title, grid);
+            }
+        },
+
+        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});
+        },
+
+        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 = '42%';
+            grid.left = '4%';
+            grid.right = '15%';
+            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 = {
+                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: {
+                        formatter: function (value) {
+                            return Math.round(value * 100) / 100;
+                        }
+                    },
+                    splitLine: {
+                        show: false
+                    }
+                },
+                yAxis: {
+                    position: 'right',
+                    axisLine: {
+                        onZero: false
+                    },
+                    inverse: true,
+                    splitLine: {
+                        show: false
+                    }
+                },
+                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
+                }]
+            };
+
+            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: {
+                            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: {
+                            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: {
+                            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;
+                        }
+                    });
+                    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);
+        },
+
+        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;
+                }
+            });
+        },
+
+        expandArea() {
+            let isExpand = this.isExpand;
+            let pageBoxWidth = document.getElementsByClassName('visual-dl-chart-page')[0].offsetWidth;
+            if (!isExpand) {
+                let el = this.$refs.visual_dl_chart_box;
+                el.style.width = pageBoxWidth + 'px';
+                el.style.height = '600px';
+                this.isExpand = true;
+                this.myChart.resize({
+                    width: pageBoxWidth,
+                    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">
+    .visual-dl-histogram-charts
+        float left
+        margin-bottom 20px
+        margin 20px 30px 10px 0
+        background #fff
+        padding 10px
+        .visual-dl-chart-box
+            float left
+            width 400px
+            height 300px
+        .visual-dl-chart-actions
+            height 50px
+            margin-left 10%
+            .sm-form-item
+                float left
+                width 100px
+                margin-top 0px
+                display block
+            .sm-button
+                float left
+                display block
+                height 20px
+                line-height 20px
+                margin-top 10px
+                padding 0 10px
+</style>
+
diff --git a/frontend/src/histogram/ui/ChartPage.vue b/frontend/src/histogram/ui/ChartPage.vue
new file mode 100644
index 00000000..d5a5e521
--- /dev/null
+++ b/frontend/src/histogram/ui/ChartPage.vue
@@ -0,0 +1,88 @@
+<template>
+    <!-- ClassName visual-dl-chart-page used in chart.san, change they all if you need!-->
+    <div class="visual-dl-chart-page">
+        <ui-expand-panel :info="total" :title="title">
+            <div class="visual-dl-chart-page-box">
+                <ui-chart
+                    v-for="(tagInfo, index) in filteredPageList"
+                    :key="index"
+                    :tagInfo="tagInfo"
+                    :runs="config.runs"
+                    :chartType="config.chartType"
+                    :running="config.running"
+                    :runsItems="runsItems"
+                ></ui-chart>
+            </div>
+            <v-pagination class="visual-dl-sm-pagination"
+                          v-if="total > pageSize"
+                          v-model="currentPage"
+                          :length="pageLength"
+            ></v-pagination>
+        </ui-expand-panel>
+    </div>
+</template>
+<script>
+import ExpandPanel from '../../common/component/ExpandPanel';
+import Chart from './Chart';
+
+import {cloneDeep, flatten} from 'lodash';
+
+export default {
+    props: ['config', 'runsItems', 'tagList', 'title'],
+
+    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));
+            }));
+        },
+
+        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)
+        }
+    },
+    data() {
+        return {
+            // current page
+            currentPage: 1,
+            // item per page
+            pageSize: 4
+        };
+    },
+
+    methods: {
+        handlePageChange({pageNum}) {
+            this.currentPage = pageNum;
+        }
+    }
+};
+</script>
+<style lang="stylus">
+@import '../../style/variables';
+
++prefix-classes('visual-dl-')
+    .chart-page
+        .chart-box
+            float left
+        .chart-page-box:after
+            content: "";
+            clear: both;
+            display: block;
+</style>
diff --git a/frontend/src/histogram/ui/Config.vue b/frontend/src/histogram/ui/Config.vue
new file mode 100644
index 00000000..9607984a
--- /dev/null
+++ b/frontend/src/histogram/ui/Config.vue
@@ -0,0 +1,71 @@
+<template>
+    <div class="visual-dl-page-config-com">
+        <v-text-field
+            label="Group name RegExp"
+            hint="input a tag group name to search"
+            v-model="config.groupNameReg"
+            dark
+        ></v-text-field>
+
+        <v-radio-group label="Histogram mode" v-model="config.chartType" dark>
+            <v-radio v-for="mode in chartTypeItems" :key="mode.name"
+                     :label="mode.name" :value="mode.value"></v-radio>
+        </v-radio-group>
+
+        <label class="visual-dl-page-checkbox-group-label">Runs</label>
+        <v-checkbox v-for="item in runsItems"
+                    :key="item.name"
+                    :label="item.name"
+                    :value="item.value"
+                    v-model="config.runs"
+                    dark
+        ></v-checkbox>
+
+        <v-btn class="visual-dl-page-run-toggle"
+               :color="config.running ? 'primary' : 'error'"
+                  v-model="config.running"
+                  @click="toggleAllRuns"
+                  dark block
+        >
+            {{config.running ? 'Running' : 'Stopped'}}
+        </v-btn>
+    </div>
+</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;
+        }
+    }
+};
+</script>
+<style lang="stylus">
++prefix-classes('visual-dl-page-')
+    .config-com
+        padding 20px
+        .run-toggle
+            margin-top 20px
+        .checkbox-group-label
+            display flex
+            margin-top 20px
+            margin-bottom 10px
+</style>
+
+
diff --git a/frontend/src/images/Images.vue b/frontend/src/images/Images.vue
new file mode 100644
index 00000000..8f484db5
--- /dev/null
+++ b/frontend/src/images/Images.vue
@@ -0,0 +1,168 @@
+<template>
+    <div class="visual-dl-page-container">
+        <div class="visual-dl-page-left">
+            <ui-chart-page
+                :expand="true"
+                :config="filteredConfig"
+                :runsItems="runsItems"
+                :tagList="filteredTagsList"
+                :title="'Tags matching ' + config.groupNameReg"
+            ></ui-chart-page>
+            <ui-chart-page
+                v-for="item in groupedTags"
+                :key="item.group"
+                :config="filteredConfig"
+                :runsItems="runsItems"
+                :tagList="item.tags"
+                :title="item.group"
+            ></ui-chart-page>
+        </div>
+        <div class="visual-dl-page-right">
+            <div class="visual-dl-page-config-container">
+                <ui-config :runsItems="runsItems" :config="config"
+                ></ui-config>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+import {getPluginImagesTags, getRuns} from '../service';
+import {debounce, flatten, uniq, isArray} from 'lodash';
+import autoAdjustHeight from '../common/util/autoAdjustHeight';
+
+import Config from './ui/Config'
+import ChartPage from './ui/ChartPage';
+
+export default {
+    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 {
+                    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));
+
+            // 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]
+                };
+            });
+        },
+        filteredConfig() {
+            let tansformArr = ['isActualImageSize'];
+            let config = this.config || {};
+            let filteredConfig = {};
+            Object.keys(config).forEach(key => {
+                let val = config[key];
+                filteredConfig[key] = val;
+            });
+            return filteredConfig;
+        }
+    },
+    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
+        ),
+    }
+};
+
+</script>
+
+<style lang="stylus">
+
+</style>
diff --git a/frontend/src/images/ui/ChartPage.vue b/frontend/src/images/ui/ChartPage.vue
new file mode 100644
index 00000000..3116b82f
--- /dev/null
+++ b/frontend/src/images/ui/ChartPage.vue
@@ -0,0 +1,89 @@
+<template>
+    <div class="visual-dl-chart-page">
+        <ui-expand-panel :info="total" :title="title">
+            <ui-image
+                class="visual-dl-chart-image"
+                v-for="(tagInfo, index) in filteredPageList"
+                :key="index"
+                :tagInfo="tagInfo"
+                :isActualImageSize="config.isActualImageSize"
+                :runs="config.runs"
+                :running="config.running"
+                :runsItems="runsItems"
+            ></ui-image>
+
+            <v-pagination class="visual-dl-sm-pagination"
+                          v-if="total > pageSize"
+                          v-model="currentPage"
+                          :length="pageLength"
+            ></v-pagination>
+        </ui-expand-panel>
+    </div>
+</template>
+<script>
+import ExpandPanel from '../../common/component/ExpandPanel';
+import Image from './Image';
+//import Pagination from 'san-mui/Pagination';
+
+import {cloneDeep, flatten} from 'lodash';
+
+export default {
+    props: ['config', 'runsItems', 'tagList', 'title'],
+    components: {
+        'ui-image': Image,
+        'ui-expand-panel': ExpandPanel,
+        //'ui-pagination': Pagination
+    },
+    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)
+        }
+    },
+    data() {
+        return {
+            // current page
+            currentPage: 1,
+            // item per page
+            pageSize: 8
+        };
+    },
+};
+</script>
+<style lang="stylus">
+@import '~style/variables';
+
++prefix-classes('visual-dl-')
+    .chart-page
+        .image-chart-box
+            overflow hidden
+            float left
+            .visual-dl-chart-image
+                float left
+        .image-chart-box:after
+            content ""
+            clear both
+            display block
+        .sm-pagination
+            height 50px
+            float left
+            width 100%
+</style>
+
+
diff --git a/frontend/src/images/ui/Config.vue b/frontend/src/images/ui/Config.vue
new file mode 100644
index 00000000..71137c31
--- /dev/null
+++ b/frontend/src/images/ui/Config.vue
@@ -0,0 +1,62 @@
+<template>
+    <div class="visual-dl-page-config-com">
+        <v-text-field
+            label="Group name RegExp"
+            hint="input a tag group name to search"
+            v-model="config.groupNameReg"
+            dark
+        ></v-text-field>
+
+        <v-checkbox label="Show actual image size" v-model="config.isActualImageSize" dark></v-checkbox>
+        
+        <label class="visual-dl-page-checkbox-group-label">Runs</label>
+        <v-checkbox v-for="item in runsItems"
+                    :key="item.name"
+                    :label="item.name"
+                    :value="item.value"
+                    v-model="config.runs"
+                    dark
+        ></v-checkbox>
+
+        <v-btn :color="config.running ? 'primary' : 'error'"
+                  v-model="config.running"
+                  @click="toggleAllRuns"
+                  class="visual-dl-page-run-toggle"
+                  dark block
+        >
+            {{config.running ? 'Running' : 'Stopped'}}
+        </v-btn>
+    </div>
+</template>
+<script>
+// TODO: Maybe migrate the CheckBoxGroup from San to Vue
+//import CheckBoxGroup from '../../common/component/CheckBoxGroup';
+
+export default {
+    props: {
+        runsItems: Array,
+        config: Object
+    },
+    data() {
+        return {
+        };
+    },
+    methods: {
+        toggleAllRuns() {
+            this.config.running = !this.config.running;
+        }
+    }
+};
+
+</script>
+<style lang="stylus">
++prefix-classes('visual-dl-page-')
+    .config-com
+        padding 20px
+        .run-toggle
+            margin-top 20px
+        .checkbox-group-label
+            display flex
+            margin-top 20px
+            margin-bottom 10px
+</style>
diff --git a/frontend/src/images/ui/Image.vue b/frontend/src/images/ui/Image.vue
new file mode 100644
index 00000000..04a8e72d
--- /dev/null
+++ b/frontend/src/images/ui/Image.vue
@@ -0,0 +1,158 @@
+<template>
+    <div class="visual-dl-image">
+        <h3 class="visual-dl-image-title">{{tagInfo.tag.displayName}}
+            <span class="visual-dl-image-run-icon">{{tagInfo.run}}</span>
+        </h3>
+        <p>
+            <span>Step:</span>
+            <span>{{imgData.step}};</span>
+            <span>{{imgData.wall_time | formatTime}}</span>
+        </p>
+        <v-slider label="step"
+                  :max="steps"
+                  :min="slider.min"
+                  :step="1"
+                  v-model="currentIndex"
+                  dark></v-slider>
+
+        <img :width="imageWidth" :height="imageHeight" :src="imgData.imgSrc" />
+    </div>
+</template>
+<script>
+import {getPluginImagesImages} from '../../service';
+
+const defaultImgWidth = 400;
+const defaultImgHeight = 300;
+// the time to refresh chart data
+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
+        }
+    },
+    filters: {
+        formatTime: function (value) {
+            if (!value) {
+                return;
+            }
+            let time = new Date();
+            time.setTime(value.toString().split('.')[0]);
+            return time;
+        }
+    },
+    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();
+    },
+
+    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 */
+        }
+    },
+    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">
+    .visual-dl-image
+        font-size 12px
+        width 420px
+        float left
+        margin 20px 30px 10px 0
+        background #fff
+        padding 10px
+        .visual-dl-image-title
+            font-size 14px
+            line-height 30px
+            .visual-dl-image-run-icon
+                background #e4e4e4
+                float right
+                margin-right 10px
+                padding 0 10px
+                border solid 1px #e4e4e4
+                border-radius 6px
+                line-height 20px
+                margin-top 4px
+        .visual-dl-chart-actions
+            .sm-form-item
+                width 300px
+                display inline-block
+</style>
+
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 8506d669..af9fa301 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,16 +1,46 @@
-import 'normalize.css/normalize.css';
-import 'san-mui/index.css';
-import './common/component/ui-common.styl';
+//import 'normalize.css/normalize.css';
+//import 'san-mui/index.css';
+//import './common/component/ui-common.styl';
+//
+//import './home/index';
+//import './scalars/index';
+//import './images/index';
+//import './histogram/index';
+//import './graph/index';
+//
+//import App from './App';
+//new App({
+//    data: {
+//        titleName: 'VisualDL'
+//    }
+//}).attach(document.getElementById('root'));
+//
+//var vm = new Vue({
+//    el: "#root",
+//
+//})
 
-import './home/index';
-import './scalars/index';
-import './images/index';
-import './histogram/index';
-import './graph/index';
 
-import App from './App';
-new App({
-    data: {
-        titleName: 'VisualDL'
+
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './App'
+import Vuetify from 'vuetify'
+import router from '@/router'
+Vue.config.productionTip = false
+
+Vue.use(Vuetify, {
+    theme: {
+        primary: '#008c99',
+        accent: '#008c99'
     }
-}).attach(document.getElementById('root'));
+})
+
+/* eslint-disable no-new */
+new Vue({
+    el: '#root',
+    router,
+    components: {App},
+    template: '<App/>',
+})
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
new file mode 100644
index 00000000..6832582f
--- /dev/null
+++ b/frontend/src/router/index.js
@@ -0,0 +1,34 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+
+import Scalars from '@/scalars/Scalars'
+import Histogram from '@/histogram/Histogram'
+import Images from '@/images/Images'
+import Graph from '@/graph/Graph'
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [
+    {
+      path: '/scalars',
+      name: 'Scalars',
+      component: Scalars
+    },
+    {
+      path: '/histograms',
+      name: 'Histograms',
+      component: Histogram
+    },
+    {
+      path: '/images',
+      name: 'Images',
+      component: Images
+    },
+    {
+      path: '/graphs',
+      name: 'Graph',
+      component: Graph
+    },
+  ]
+})
diff --git a/frontend/src/scalars/Scalars.vue b/frontend/src/scalars/Scalars.vue
new file mode 100644
index 00000000..bfa18c68
--- /dev/null
+++ b/frontend/src/scalars/Scalars.vue
@@ -0,0 +1,161 @@
+<template>
+    <div class="visual-dl-page-container">
+        <div class="visual-dl-page-left">
+            <ui-chart-page
+                    :config="config"
+                    :runsItems="runsItems"
+                    :tagList="filteredTagsList"
+                    :title="'Tags matching' + config.groupNameReg"
+            ></ui-chart-page>
+            <ui-chart-page
+                    v-for="item in groupedTags"
+                    :key="item.group"
+                    :config="config"
+                    :runsItems="runsItems"
+                    :tagList="item.tags"
+                    :title="item.group"
+            ></ui-chart-page>
+        </div>
+
+        <div class="visual-dl-page-right">
+            <div class="visual-dl-page-config-container">
+                <ui-config :runsItems="runsItems"
+                        :config="config"
+                ></ui-config>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getPluginScalarsTags, getRuns} from '../service';
+import {debounce, flatten, uniq, isArray} from 'lodash';
+import autoAdjustHeight from '../common/util/autoAdjustHeight';
+
+import Config from './ui/Config'
+import ChartPage from './ui/ChartPage';
+
+export default {
+    components: {
+        'ui-config': Config,
+        'ui-chart-page': ChartPage
+    },
+    data() {
+        return {
+            runsArray: [],
+            tags: [],
+            config: {
+                groupNameReg: '.*',
+                smoothing: 0.6,
+                horizontal: 'step',
+                sortingMethod: 'default',
+                downloadLink: false,
+                outlier: false,
+                runs: [],
+                running: true
+            },
+            filteredTagsList: []
+        }
+    },
+    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));
+
+            // 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]
+                };
+            });
+        },
+    },
+    created() {
+	    getPluginScalarsTags().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
+        ),
+    }
+};
+
+</script>
+
+<style lang="stylus">
+
+</style>
diff --git a/frontend/src/scalars/ui/Chart.vue b/frontend/src/scalars/ui/Chart.vue
new file mode 100644
index 00000000..66a4c508
--- /dev/null
+++ b/frontend/src/scalars/ui/Chart.vue
@@ -0,0 +1,591 @@
+<template>
+    <div class="visual-dl-page-charts">
+        <div ref="chartBox" class="visual-dl-chart-box" :style="computedStyle">
+        </div>
+        <div class="visual-dl-chart-actions">
+            <v-btn flat @click="expandArea" class="chart-expand">
+                <v-icon size="20">settings_overscan</v-icon>
+            </v-btn>
+            <v-select
+                v-if="downloadLink && tagInfo.tagList.length > 0"
+                class="download-selector"
+                :items="tagInfo.tagList"
+                v-model="runItemForDownload"
+                item-text="run"
+                item-value="run"
+            />
+            <v-btn flat
+                v-if="downloadLink && tagInfo.tagList.length > 0"
+                class="download-button"
+                @click="handleDownLoad">
+                <v-icon size="20">file_download</v-icon>
+            </v-btn>
+        </div>
+    </div>
+</template>
+<script>
+
+// TODO: Consider create Vue Components for these
+
+// // components
+// import Button from 'san-mui/Button';
+// import Icon from 'san-mui/Icon';
+// import DropDownMenu from '../../common/component/DropDownMenu';
+
+// libs
+import echarts from 'echarts';
+import axios from 'axios';
+import {isFinite, flatten, maxBy, minBy, sortBy, max, min} from 'lodash';
+import {generateJsonAndDownload} from '../../common/util/downLoadFile';
+import {quantile} from '../../common/util/index';
+import moment from 'moment';
+
+// service
+import {getPluginScalarsScalars} from '../../service';
+
+const originLinesOpacity = 0.3;
+const defaultSmoothWeight = 0.6;
+const lineWidth = 1.5;
+const minQuantile = 0.05;
+const maxQuantile = 0.95;
+// the time to refresh chart data
+const intervalTime = 15;
+
+export default {
+    props: ['tagInfo', 'groupNameReg', 'smoothing', 'horizontal', 'sortingMethod', 'downloadLink', 'outlier', 'runs',
+            'running', 'runsItems'],
+    computed: {
+        computedStyle() {
+            return 'height:' + this.height + 'px;'
+                + 'width:' + this.width + 'px;';
+        }
+    },
+    data() {
+        return {
+            width: 400,
+            height: 300,
+            // choose run type for download file
+            runItemForDownload: {},
+            isExpand: false,
+            originData: []
+        };
+    },
+    watch: {
+        runsItems: function(val) {
+            this.initRunItemForDownload();
+        },
+        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);
+        }
+        // runs: function(val) {
+        //     this.setChartsRuns();
+        // }
+    },
+    mounted() {
+        this.initChart(this.tagInfo);
+
+        if (this.running) {
+            this.startInterval();
+        }
+
+        this.$watch('running', function(running) {
+            running ? this.startInterval() : this.stopInterval();
+        });
+    },
+
+    beforeDestroy() {
+        this.stopInterval();
+    },
+    methods: {
+        initRunItemForDownload() {
+            if (this.tagInfo.tagList.length === 0) {
+                return;
+            }
+            this.runItemForDownload = this.tagInfo.tagList[0].run;
+        },
+
+        // 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 = {
+                color: [
+                    '#c23531',
+                    '#61a0a8',
+                    '#d48265',
+                    '#91c7ae',
+                    '#749f83',
+                    '#ca8622',
+                    '#bda29a',
+                    '#6e7074',
+                    '#546570',
+                    '#c4ccd3'
+                ],
+                title: {
+                    text: tag,
+                    textStyle: {
+                        fontSize: '12',
+                        fontFamily: 'Merriweather Sans'
+                    }
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        animation: true
+                    },
+                    position: ['10%', '90%'],
+                    formatter(params, ticket, callback) {
+                        let data = instance.getFormatterPoints(params[0].data);
+                        return instance.transformFormatterData(data);
+                    }
+                },
+                toolbox: {
+                    show: true,
+                    showTitle: true,
+                    feature: {
+                        dataZoom: {},
+                        restore: {},
+                        saveAsImage: {}
+                    },
+                    left: '10%',
+                    top: '90%'
+                },
+                legend: {
+                    data: legendOptions,
+                    top: '10%'
+                },
+                grid: {
+                    left: '10%',
+                    top: '20%',
+                    right: '10%',
+                    bottom: '20%'
+                },
+                xAxis: {
+                    type: 'value'
+                },
+                yAxis: {
+                    type: 'value',
+                    axisLabel: {
+                        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);
+        },
+
+        stopInterval() {
+            clearInterval(this.getOriginDataInterval);
+        },
+
+        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);
+                }
+            });
+        },
+
+        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)
+            });
+        },
+
+        getChartOptions() {
+            return this.myChart.getOption() || {};
+        },
+        handleDownLoad() {
+            let options = this.getChartOptions();
+            let series = options.series || [];
+            let seriesItem = series.find(item => item.name === this.runItemForDownload) || {};
+            let fileName = this.tagInfo.tag.replace(/\//g, '-');
+            generateJsonAndDownload(seriesItem.data, fileName);
+        },
+
+        transformDataset(seriesData) {
+            // smooth
+            this.transformData(seriesData, this.smoothing || defaultSmoothWeight);
+        },
+
+        /**
+         * @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;
+                }
+            });
+        },
+
+        // Chart outlier options methods and functions ---- start.
+        // Compute Y domain from originData.
+        setChartsOutlier() {
+            let domainRangeArray = this.originData.map(seriesData => this.computeDataRange(seriesData, this.outlier));
+
+            // Compare, get the best Y domain.
+            let flattenNumbers = flatten(domainRangeArray);
+            let finalMax = max(flattenNumbers);
+            let finalMin = min(flattenNumbers);
+
+            // Add padding.
+            let PaddedYDomain = this.paddedYDomain(finalMin, finalMax);
+
+            this.setChartOutlierOptions(PaddedYDomain);
+
+            // Store Y domain, if originData is not change, Y domain keep same.
+
+        },
+
+        // 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];
+        },
+
+        paddedYDomain(min, max) {
+            return {
+                max: max > 0 ? max * 1.1 : max * 0.9,
+                min: min > 0 ? min * 0.9 : min * 1.1
+            };
+        },
+
+        setChartOutlierOptions({min, max}) {
+            this.myChart.setOption({
+                yAxis: {
+                    min,
+                    max
+                }
+            });
+        },
+
+        // 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'
+                    },
+                    series: stepSeries
+                },
+                relative: {
+                    xAxis: {
+                        type: 'value'
+                    },
+                    series: relativeSeries
+                },
+                wall: {
+                    xAxis: {
+                        type: 'time'
+                    },
+                    series: wallSeries
+                }
+            };
+            this.myChart.setOption(horizontalToxAxisOptions[this.horizontal]);
+        },
+
+        expandArea() {
+            let pageBoxWidth = document.getElementsByClassName('visual-dl-chart-page-box')[0].offsetWidth;
+            if (!this.isExpand) {
+                let el = this.$refs.chartBox;
+                el.style.width = pageBoxWidth + 'px';
+                el.style.height = '600px';
+                this.isExpand = true;
+                this.myChart.resize({
+                    width: pageBoxWidth,
+                    height: 600
+                });
+            }
+            else {
+                let el = this.$refs.chartBox;
+                el.style.width = '400px';
+                el.style.height = '300px';
+                this.isExpand = false;
+                this.myChart.resize({
+                    width: 400,
+                    height: 300
+                });
+            }
+        },
+
+        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;
+            }
+            let sortedPoints;
+            switch (sortingMethod) {
+                case 'desc':
+                    sortedPoints = sortBy(points, one => one.item[3]);
+                    sortedPoints.reverse();
+                    break;
+                case 'asc':
+                    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: 90,
+                Step: 40,
+                Value: 50,
+                Smoothed: 50,
+                Relative: 40
+            };
+            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">
+    .visual-dl-page-charts
+        float left
+        margin 20px 30px 10px 0
+        background: #fff;
+        padding: 10px;
+        .visual-dl-chart-actions
+            vertical-align: middle
+            .chart-expand
+                float left
+            .download-selector
+                float left
+                width 100px
+                margin-top -10px
+            .download-button
+                float left
+</style>
+
diff --git a/frontend/src/scalars/ui/ChartPage.vue b/frontend/src/scalars/ui/ChartPage.vue
new file mode 100644
index 00000000..af30bb6f
--- /dev/null
+++ b/frontend/src/scalars/ui/ChartPage.vue
@@ -0,0 +1,85 @@
+<template>
+    <div class="visual-dl-chart-page">
+        <ui-expand-panel :info="tagList.length" :title="title">
+            <div ref="chartPageBox" class="visual-dl-chart-page-box">
+                <ui-chart
+                    v-for="(tagInfo, index) in filteredTagList"
+                    :key="index"
+                    :tagInfo="tagInfo"
+                    :groupNameReg="config.groupNameReg"
+                    :smoothing="config.smoothing"
+                    :horizontal="config.horizontal"
+                    :sortingMethod="config.sortingMethod"
+                    :downloadLink="config.downloadLink"
+                    :outlier="config.outlier"
+                    :runs="config.runs"
+                    :running="config.running"
+                    :runsItems="runsItems"
+                ></ui-chart>
+            </div>
+            <v-pagination
+                v-if="total > pageSize"
+                v-model="currentPage"
+                :length="pageLength"
+            />
+        </ui-expand-panel>
+    </div>
+</template>
+<script>
+import ExpandPanel from '../../common/component/ExpandPanel';
+import Chart from './Chart';
+// import Pagination from 'san-mui/Pagination';
+
+import {cloneDeep} from 'lodash';
+
+export default {
+    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;
+            });
+        },
+        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)
+        }
+    },
+    data() {
+        return {
+            // current page
+            currentPage: 1,
+            // item per page
+            pageSize: 8
+        };
+    }
+};
+</script>
+<style lang="stylus">
+@import '~style/variables';
+
++prefix-classes('visual-dl-')
+    .chart-page
+        .chart-page-box:after
+            content: "";
+            clear: both;
+            display: block;
+</style>
+
+
diff --git a/frontend/src/scalars/ui/Config.vue b/frontend/src/scalars/ui/Config.vue
new file mode 100644
index 00000000..d77143c1
--- /dev/null
+++ b/frontend/src/scalars/ui/Config.vue
@@ -0,0 +1,130 @@
+<template>
+    <div class="visual-dl-page-config-com">
+        <v-text-field
+                label="Group name RegExp"
+                hint="input a tag group name"
+                v-model="config.groupNameReg"
+                dark
+        ></v-text-field>
+
+        <div class="visual-dl-page-slider-block">
+            <v-slider label="Smoothing"
+                      :max="0.99"
+                      :min="0"
+                      :step="0.01"
+                      v-model="config.smoothing"
+                      class="visual-dl-page-smoothing-slider"
+                      dark></v-slider>
+            <span class="visual-dl-page-slider-span">{{config.smoothing}}</span>
+        </div>
+
+        <v-radio-group label="Horizontal" v-model="config.horizontal" dark>
+            <v-radio label="Step" value="step"></v-radio>
+            <v-radio label="Relative" value="relative"></v-radio>
+            <v-radio label="Wall" value="wall"></v-radio>
+        </v-radio-group>
+
+        <v-select
+                :items="sortingMethodItems"
+                v-model="config.sortingMethod"
+                label="Tooltip sorting method"
+                class="visual-dl-page-config-selector"
+                dark
+        ></v-select>
+
+        <v-checkbox class="visual-dl-page-config-checkbox" label="Show data download links" v-model="config.downloadLink" dark></v-checkbox>
+        <v-checkbox class="visual-dl-page-config-checkbox" label="Ignore outliers in chart scaling" v-model="config.outlier" dark></v-checkbox>
+
+        <label class="visual-dl-page-checkbox-group-label">Runs</label>
+
+        <v-checkbox v-for="item in runsItems"
+                    :key="item.name"
+                    :label="item.name"
+                    :value="item.value"
+                    v-model="config.runs"
+                    dark
+                    class="visual-dl-page-runs-checkbox"
+        ></v-checkbox>
+
+        <v-btn :color="config.running ? 'primary' : 'error'"
+                  v-model="config.running"
+                  @click="toggleAllRuns"
+                  class="visual-dl-page-run-toggle"
+                  dark block
+        >
+            {{config.running ? 'Running' : 'Stopped'}}
+        </v-btn>
+    </div>
+</template>
+<script>
+
+//import TextField from 'san-mui/TextField';
+
+// TODO: Consider create Vue Components for these
+
+//import Slider from '../../common/component/Slider';
+//import RadioGroup from '../../common/component/RadioGroup';
+//import DropDownMenu from '../../common/component/DropDownMenu';
+//import CheckBoxGroup from '../../common/component/CheckBoxGroup';
+//import Button from 'san-mui/Button';
+
+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'
+            ]
+        };
+    },
+    methods: {
+        toggleAllRuns() {
+            this.config.running = !this.config.running;
+        }
+    }
+};
+
+</script>
+<style lang="stylus">
++prefix-classes('visual-dl-page-')
+    .config-com
+        padding 20px
+        .slider-block
+            display flex
+            align-items center
+        .smoothing-slider
+            display inline
+        .slider-span
+            width 40px
+        .run-toggle
+            margin-top 20px
+        .config-checkbox label
+            font-size 13px
+        .config-selector
+            margin-top 12px
+            margin-bottom 20px
+        .checkbox-group-label
+            display flex
+            margin-top 20px
+            margin-bottom 10px
+
+</style>
+
+
diff --git a/frontend/src/style/main.styl b/frontend/src/style/main.styl
new file mode 100644
index 00000000..f8b5da7d
--- /dev/null
+++ b/frontend/src/style/main.styl
@@ -0,0 +1,11 @@
+//stylus variables define before import statement
+$input-font-size = 14px
+
+@import '../../node_modules/vuetify/src/stylus/main'
+
+//css define after import statement
+.input-group.input-group--slider label
+  font-size $input-font-size
+
+.input-group__details
+  min-height 14px
\ No newline at end of file
diff --git a/frontend/src/style/variables.styl b/frontend/src/style/variables.styl
index 91fd99c0..0110766d 100644
--- a/frontend/src/style/variables.styl
+++ b/frontend/src/style/variables.styl
@@ -8,6 +8,6 @@ $-left-background-color = #303a3a
 
 $-content-text-color = #303a3a
 
-$-left-border-clor = #e9e9e9
+$-left-border-color = #e9e9e9
 
-$-right-font-color = #ccc
+$-right-font-color = rgba(#fff, 0.7)
diff --git a/frontend/template/index.html b/frontend/template/index.html
index e984f5e2..198a8895 100755
--- a/frontend/template/index.html
+++ b/frontend/template/index.html
@@ -5,6 +5,7 @@
         <title>Visual DL</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+        <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
     </head>
     <body>
         <div id="root"></div>
diff --git a/frontend/tool/webpack.config.js b/frontend/tool/webpack.config.js
index a0f7e8b6..1cece3cb 100644
--- a/frontend/tool/webpack.config.js
+++ b/frontend/tool/webpack.config.js
@@ -46,11 +46,13 @@ const config = {
     resolve: {
 
         alias: {
-            'san-mui': 'san-mui/lib',
-            axios: 'axios/dist/axios.min.js'
+            axios: 'axios/dist/axios.min.js',
+            'vue$': 'vue/dist/vue.esm.js',
+            '@': path.resolve(projectPath, 'src'),
+            style: path.resolve(__dirname, '../src/style')
         },
 
-        extensions: ['.js', '.json', '.styl', '.css', '.html', '.san']
+        extensions: ['.js', '.json', '.styl', '.css', '.html', '.vue']
     },
 
     module: {
@@ -59,13 +61,8 @@ const config = {
         ],
         rules: [
             {
-                test: /\.san$/,
-                loader: 'san-loader',
-                options: {
-                    loaders: {
-                        stylus: getLoaders(isDev, 'stylus')
-                    }
-                }
+                test: /\.vue$/,
+                loader: 'vue-loader',
             },
             {
                 test: /\.js$/,
-- 
GitLab