frontend theme and color modify (#86)

* fix the tooltip index error

* frontend add graph

* frontend add image for graph, images, histogram update

* add graph get url; fix scalar

* modify theme color

* modify right config theme color

* modify right config theme color

* delete the large graph.png

* delete console

frontend/mock/data/plugin/graphs/graph.js

+/**
+ * get mock data
+ *
+ * @param {string} path request path
+ * @param {Object} queryParam query params
+ * @param {Object} postParam post params
+ * @return {Object}
+ */
+module.exports = function (path, queryParam, postParam) {
+    return {
+        // moock delay
+        _timeout: 0,
+        // mock http status
+        _status: 200,
+        // mock response data
+        _data: {
+            status: 0,
+            msg: 'SUCCESS',
+            data: {
+                url: 'someurl'
+            }
+        }
+    };
+};

frontend/mock/data/plugin/graphs/graphs.js

-/**
- * get mock data
- *
- * @param {string} path request path
- * @param {Object} queryParam query params
- * @param {Object} postParam post params
- * @return {Object}
- */
-module.exports = function (path, queryParam, postParam) {
-    return {
-        // moock delay
-        _timeout: 0,
-        // mock http status
-        _status: 200,
-        // mock response data
-        _data: {
-            status: 0,
-            msg: 'SUCCESS',
-            data: {
-                title: {
-                    text: 'Graph 简单示例'
-                },
-                tooltip: {},
-                animationDurationUpdate: 1500,
-                animationEasingUpdate: 'quinticInOut',
-                series : [
-                    {
-                        type: 'graph',
-                        layout: 'none',
-                        symbolSize: 50,
-                        roam: true,
-                        label: {
-                            normal: {
-                                show: true
-                            }
-                        },
-                        edgeSymbol: ['circle', 'arrow'],
-                        edgeSymbolSize: [4, 10],
-                        edgeLabel: {
-                            normal: {
-                                textStyle: {
-                                    fontSize: 20
-                                }
-                            }
-                        },
-                        data: [{
-                            name: '节点1',
-                            x: 300,
-                            y: 300
-                        }, {
-                            name: '节点2',
-                            x: 800,
-                            y: 300
-                        }, {
-                            name: '节点3',
-                            x: 550,
-                            y: 100
-                        }, {
-                            name: '节点4',
-                            x: 550,
-                            y: 500
-                        }],
-                        // links: [],
-                        links: [{
-                            source: 0,
-                            target: 1,
-                            symbolSize: [5, 20],
-                            label: {
-                                normal: {
-                                    show: true
-                                }
-                            },
-                            lineStyle: {
-                                normal: {
-                                    width: 5,
-                                    curveness: 0.2
-                                }
-                            }
-                        }, {
-                            source: '节点2',
-                            target: '节点1',
-                            label: {
-                                normal: {
-                                    show: true
-                                }
-                            },
-                            lineStyle: {
-                                normal: { curveness: 0.2 }
-                            }
-                        }, {
-                            source: '节点1',
-                            target: '节点3'
-                        }, {
-                            source: '节点2',
-                            target: '节点3'
-                        }, {
-                            source: '节点2',
-                            target: '节点4'
-                        }, {
-                            source: '节点1',
-                            target: '节点4'
-                        }],
-                        lineStyle: {
-                            normal: {
-                                opacity: 0.9,
-                                width: 2,
-                                curveness: 0
-                            }
-                        }
-                    }
-                ]
-            }
-        }
-    };
-};

frontend/package.json

@@ -54,6 +54,7 @@
     "html-loader": "^0.4.4",
     "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.4",
+    "interactjs": "^1.3.2",
     "json-loader": "^0.5.4",
     "opn": "^5.1.0",
     "optimize-css-assets-webpack-plugin": "^1.3.2",

frontend/src/App.san

@@ -46,8 +46,80 @@ export default {
 
 <style lang="stylus">
 
-// @import './style/variables';
+@import './style/variables';
 
-// +prefix-classes(prefix)
+// modify component style for custom theme
+.sm-appbar
+    background $-theme-color
 
+.sm-pagination .page-selector span.current
+    background $-theme-color
+
+.sm-text-field.has-label .sm-text-field-label
+    color $-right-font-color
+
+.sm-text-field-input
+    color $-right-font-color
+
+.sm-text-field-hint.state-show
+    color $-right-font-color
+
+.sm-text-field
+        .sm-text-field-line
+            background $-right-font-color
+        .sm-text-field-focus-line
+            background $-theme-color
+
+.sm-form-item .label
+    color $-right-font-color
+
+.sm-slider-bg
+    background $-right-font-color
+
+.sm-slider-fill,
+.sm-slider-thumb
+    background $-theme-color
+
+.sm-radio-icon-checked,
+.sm-checkbox-icon-checked
+    color $-theme-color
+
+.sm-radio .sm-radio-wrapper .sm-radio-label,
+.sm-checkbox .sm-radio-wrapper .sm-radio-label,
+.sm-radio .sm-checkbox-wrapper .sm-radio-label,
+.sm-checkbox .sm-checkbox-wrapper .sm-radio-label,
+.sm-radio .sm-radio-wrapper .sm-checkbox-label,
+.sm-checkbox .sm-radio-wrapper .sm-checkbox-label,
+.sm-radio .sm-checkbox-wrapper .sm-checkbox-label,
+.sm-checkbox .sm-checkbox-wrapper .sm-checkbox-label
+    color $-right-font-color
+
+.sm-button.variant-secondery.variant-raised,
+.sm-button.variant-secondery.variant-floating
+    background $-theme-color
+
+
++prefix-classes('visual-dl-page-')
+    .container
+        padding-right 250px
+        position relative
+        background $-left-background-color
+        .left
+            width 100%
+            overflow scroll
+            border solid 1px $-left-border-clor
+            background $-left-border-clor
+            min-height 300px
+            padding 2%
+            box-sizing border-box
+        .right
+            overflow scroll
+            width 250px
+            min-height 300px
+            position absolute
+            right 0
+            top 0
+            box-sizing border-box
+            .config-com
+                color $-right-font-color
 </style>

frontend/src/common/component/AppMenu.san

@@ -63,7 +63,9 @@ export default {
 
 .visual-dl-app-menu
     .sm-appbar-title
+        font-size 24px
         flex none
+        margin-right 50px
     .sm-appbar-right
         width 100%
         .sm-menu
@@ -72,6 +74,7 @@ export default {
             display flex
             flex-direction row
             .sm-menu-item
+                padding 0 30px
                 .sm-menu-item-content
                     color #fff
                     opacity 0.6

frontend/src/common/component/ExpandPanel.san

@@ -47,7 +47,7 @@ export default {
 <style lang="stylus">
     .visaul-dl-expand-panel
         .visaul-dl-expand-head
-            border solid 1px #e4e4e4
+            border solid 1px #ccc
             line-height 50px
             height 50px
             padding 0 20px

frontend/src/common/util/autoAdjustHeight.js

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

frontend/src/common/util/http.js

@@ -10,17 +10,19 @@ const instance = axios.create({
     timeout: 30000
 });
 
+// for better ux, don't send the error msg because there will be too mutch error
 const responseErrorStatus = response => {
     const data = response.data;
-    if (data[STATUS] !== 0) {
-        Notification.error(data[STATUSINFO]);
-        return Promise.reject(data);
-    }
+    // if (data[STATUS] !== 0) {
+    //     Notification.error(data[STATUSINFO]);
+    //     return Promise.reject(data);
+    // }
     return data;
 };
 
+// for better ux, don't send the error msg because there will be too mutch error
 const responseNetError = error => {
-    Notification.error('net error');
+    // Notification.error('net error');
     return Promise.reject(error);
 };
 
@@ -35,6 +37,7 @@ const formInstance = axios.create({
     }
 });
 
+
 formInstance.interceptors.response.use(responseErrorStatus, responseNetError);
 
 instance.interceptors.response.use(responseErrorStatus, responseNetError);

frontend/src/graph/Graph.san

 <template>
-    <div class="visual-dl-scalar-container">
-        <div class="visual-dl-scalar-left">
-            <div class="visual-dl-scalar-config-container">
+    <div class="visual-dl-page-container">
+        <div class="visual-dl-page-left">
+            <ui-chart
+                filtScreen="{{filtScreen}}"
+                download="{{download}}"
+                scale="{{config.scale}}"
+            ></ui-chart>
+        </div>
+        <div class="visual-dl-page-right">
+            <div class="visual-dl-page-config-container">
                 <ui-config
                     runsItems="{{runsItems}}"
                     config="{=config=}"
                     on-fitScreen="handleFitScreen"
+                    on-download="handleDownload"
                 ></ui-config>
             </div>
         </div>
-        <div class="visual-dl-scalar-right">
-            <ui-chart
-                filtScreen="{{filtScreen}}"
-            ></ui-chart>
-        </div>
     </div>
 </template>
 
 <script>
 import {getPluginHistogramsTags, getRuns} from '../service';
+import autoAdjustHeight from '../common/util/autoAdjustHeight';
 import config from './ui/config';
 import chart from './ui/chart';
 export default {
@@ -35,7 +39,8 @@ export default {
                 horizontal: 'step',
                 chartType: 'offset',
                 runs: [],
-                running: true
+                running: true,
+                scale: 0.5
             }
         };
     },
@@ -53,6 +58,10 @@ export default {
         });
     },
 
+    attached() {
+        autoAdjustHeight();
+    },
+
     filterTagsList(groupNameReg) {
         let tagsList = this.data.get('tagsList') || [];
         let regExp = new RegExp(groupNameReg);
@@ -64,6 +73,12 @@ export default {
         this.data.set('filtScreen', {
             filtScreen: true
         });
+        this.data.set('config.scale', 0.5);
+    },
+    handleDownload() {
+        this.data.set('download', {
+            filtScreen: true
+        });
     }
 };
 
@@ -71,22 +86,4 @@ export default {
 
 <style lang="stylus">
 
-@import '../style/variables';
-
-+prefix-classes('visual-dl-scalar-')
-    .container
-        padding-left 300px
-        position relative
-        .left
-            width 280px
-            min-height 300px
-            border solid 1px #e4e4e4
-            position absolute
-            left 0
-        .right
-            width 100%
-            overflow hidden
-            border solid 1px #e4e4e4
-            min-height 300px
-            padding 20px
 </style>

frontend/src/graph/ui/chart.san

 <template>
-    <div class="visual-dl-charts">
+    <div class="visual-dl-graph-charts">
+        <!--
         <div class="visual-dl-chart-box">
         </div>
+        -->
+        <div class="visual-dl-img-box">
+            <div class="small-img-box">
+                <img class="small-img" width="30" src="{{graphUrl}}" />
+                <div class="screen-handler"></div>
+            </div>
+            <img class="draggable" width="{{computedWidth}}" src="{{graphUrl}}" />
+        </div>
     </div>
 </template>
 <script>
 // libs
 import echarts from 'echarts';
+import {
+    dragMovelHandler,
+    tansformElement,
+    relativeMove
+} from './dragHelper';
 // service
-import {getPluginGraphsGraphs} from '../../service';
+import {getPluginGraphsGraph} from '../../service';
+
+// https://github.com/taye/interact.js
+import interact from 'interactjs';
 
 export default {
+    computed: {
+        computedWidth() {
+            let scale = this.data.get('scale');
+            return Math.floor(scale * 2 * 700);
+        }
+    },
     initData() {
         return {
             width: 800,
@@ -24,25 +47,30 @@ export default {
         };
     },
     inited() {
-        this.watch('originData', data => {
-            this.initChartOption(data);
+        this.watch('filtScreen', filtScreen => {
+            // this.myChart.clear();
+            // let data = this.data.get('originData');
+            // this.initChartChartOption(data);
+            this.clearDragedTransform(this.getBigImgEl());
+            this.clearDragedTransform(this.getSmallImgDragHandler());
         });
 
-        this.watch('filtScreen', filtScreen => {
-            this.myChart.clear();
-            let data = this.data.get('originData');
-            this.initChartOption(data);
+        this.watch('download', download => {
+            let aEl = document.createElement('a');
+            aEl.href = this.data.get('graphUrl');
+            aEl.download = 'graph.png';
+            aEl.click();
         });
     },
 
     attached() {
-        this.initChart();
+        this.getOriginChartsData();
     },
 
-    initChart(tagInfo) {
-        this.createChart();
-        this.getOriginChartData();
-    },
+    // initCharts(tagInfo) {
+    //     this.createChart();
+    //     this.getOriginChartsData();
+    // },
 
     createChart() {
         let el = this.el.getElementsByClassName('visual-dl-chart-box')[0];
@@ -56,18 +84,131 @@ export default {
         this.myChart.setOption(data);
     },
 
-    getOriginChartData() {
-        getPluginGraphsGraphs().then(({data}) => {
-            this.data.set('originData', data);
+    getOriginChartsData() {
+        getPluginGraphsGraph().then(({data}) => {
+            if (data.url) {
+                this.data.set('graphUrl', data.url);
+                this.addDragEventForImg();
+            }
+        });
+    },
+
+    clearDragedTransform(dragImgEl) {
+        dragImgEl.style.transform = 'none';
+        dragImgEl.setAttribute('data-x', 0);
+        dragImgEl.setAttribute('data-y', 0);
+    },
+
+    getBigImgEl() {
+        return this.el.getElementsByClassName('draggable')[0];
+    },
+
+    getSmallImgEl() {
+        return this.el.getElementsByClassName('small-img')[0];
+    },
+
+    getSmallImgDragHandler() {
+        return this.el.getElementsByClassName('screen-handler')[0];
+    },
+
+    addDragEventForImg() {
+        let that = this;
+        // this.initCharts();
+
+        // target elements with the "draggable" class
+        interact('.draggable').draggable({
+            // enable inertial throwing
+            inertia: true,
+            autoScroll: true,
+            restrict: {
+                restriction: 'parent',
+                endOnly: true,
+                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.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-charts
-        float left
+    .visual-dl-graph-charts
+        width 90%
+        margin 0 auto
         margin-bottom 20px
+
         .visual-dl-chart-box
-            width 800px
             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>

frontend/src/graph/ui/config.san

 <template>
     <div class="visual-dl-graph-config-com">
         <ui-button
+            class="visual-dl-graph-config-button"
             on-click="handleFitScreen"
-            variants="raised info">
+            variants="raised secondery">
             <ui-icon style="margin-right: 6px">fullscreen</ui-icon>
-            Fit to screen
+            Fit &nbsp; to &nbsp; screen
+        </ui-button>
+        <ui-button
+            class="visual-dl-graph-config-button"
+            on-click="handleDownload"
+            variants="raised secondery">
+            <ui-icon style="margin-right: 6px">file_download</ui-icon>
+            Download image
         </ui-button>
         <!--
         <ui-dropdown-menu
@@ -13,24 +21,34 @@
             value="{=config.session=}"
         />
         -->
+        <ui-slider
+            label="Scale"
+            value="{=config.scale=}"
+            min="{{0.1}}"
+            max="{{1}}"
+            step="{{0.1}}"
+        />
     </div>
 </template>
 <script>
 import Button from 'san-mui/Button';
 import Icon from 'san-mui/Icon';
+import Slider from '../../common/component/Slider';
 import DropDownMenu from '../../common/component/DropDownMenu';
 export default {
     components: {
         'ui-dropdown-menu': DropDownMenu,
         'ui-button': Button,
-        'ui-icon': Icon
+        'ui-icon': Icon,
+        'ui-slider': Slider
     },
     initData() {
         return {
             config: {
                 groupName: 'aa',
                 isActualImageSize: [],
-                runs: []
+                runs: [],
+                scale: 0.5
             },
             sessionItems: [
                 {
@@ -50,6 +68,9 @@ export default {
     },
     handleFitScreen() {
         this.fire('fitScreen');
+    },
+    handleDownload() {
+        this.fire('download');
     }
 };
 </script>
@@ -59,9 +80,10 @@ export default {
     .config-com
         width 90%
         margin 20px auto
+        .config-button
+            width 200px
+            margin-top 20px
 .visual-dl-graph-config-com
-    .sm-button
-        width 100%
     .sm-icon
         width 36px
         height 26px

frontend/src/graph/ui/dragHelper.js

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

frontend/src/histogram/Histogram.san

 <template>
-    <div class="visual-dl-scalar-container">
-        <div class="visual-dl-scalar-left">
-            <div class="visual-dl-scalar-config-container">
-                <ui-config
-                    runsItems="{{runsItems}}"
-                    config="{=config=}"
-                ></ui-config>
-            </div>
-        </div>
-        <div class="visual-dl-scalar-right">
+    <div class="visual-dl-page-container">
+        <div class="visual-dl-page-left">
             <ui-chart-page
+                expand="{{true}}"
                 config="{{config}}"
                 runsItems="{{runsItems}}"
                 tagList="{{filteredTagsList}}"
@@ -23,6 +16,14 @@
                 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>
 
@@ -31,6 +32,7 @@ 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,
@@ -133,6 +135,10 @@ export default {
         this.watch('config.groupNameReg', debounce(this.filterTagsList, 300));
     },
 
+    attached() {
+        autoAdjustHeight();
+    },
+
     filterTagsList(groupNameReg) {
         let tagsList = this.data.get('tagsList') || [];
         let regExp = new RegExp(groupNameReg);
@@ -145,21 +151,4 @@ export default {
 
 <style lang="stylus">
 
-@import '../style/variables';
-
-+prefix-classes('visual-dl-scalar-')
-    .container
-        padding-left 300px
-        position relative
-        .left
-            width 280px
-            min-height 300px
-            border solid 1px #e4e4e4
-            position absolute
-            left 0
-        .right
-            width 100%
-            border solid 1px #e4e4e4
-            min-height 300px
-            padding 20px
 </style>

frontend/src/histogram/ui/chart.san

 <template>
-    <div class="visual-dl-charts">
+    <div class="visual-dl-histogram-charts">
         <div class="visual-dl-chart-box">
         </div>
         <div class="visual-dl-chart-actions">
@@ -28,7 +28,7 @@ const highlightLineColor = '#2f4554';
 const defaultLineColor = '#d14a61';
 const lineWidth = 1;
 // the time to refresh chart data
-const intervalTime = 30;
+const intervalTime = 5;
 
 const p = Math.max(0, precisionRound(0.01, 1.01) - 1);
 const yValueFormat = format('.' + p + 'e');
@@ -38,15 +38,8 @@ export default {
         'san-button': Button,
         'san-icon': Icon
     },
-
-    computed: {
-
-    },
-
     initData() {
         return {
-            width: 400,
-            height: 300,
             data: [
                 {
                     name: 'train',
@@ -189,7 +182,7 @@ export default {
         let maxStep = -Infinity;
         let minStep = Infinity;
         grid.top = '50%';
-        chartData.forEach((dataItem) => {
+        chartData.forEach(dataItem => {
             let lineData = [];
             maxStep = Math.max(dataItem.step, maxStep);
             minStep = Math.min(dataItem.step, minStep);
@@ -246,15 +239,15 @@ export default {
                         api.coord
                     );
                     return {
-                            type: 'polygon',
-                            silent: true,
-                            shape: {
-                                points
-                            },
-                            style: api.style({
-                                stroke: '#bbb',
-                                lineWidth: 1
-                            })
+                        type: 'polygon',
+                        silent: true,
+                        shape: {
+                            points
+                        },
+                        style: api.style({
+                            stroke: '#bbb',
+                            lineWidth: 1
+                        })
                     };
                 },
                 data: rawData
@@ -266,7 +259,7 @@ export default {
             for (let i = 0; i < rawData[dataIndex].length;) {
                 let x = getValue(i++);
                 let y = getValue(i++);
-                let z = getValue(i++); 
+                let z = getValue(i++);
                 points.push(getPoint(x, y, z, getCoord));
             }
             return points;
@@ -287,7 +280,7 @@ export default {
 
         let zr = ecChart.getZr();
 
-        function removeTooltip(){
+        function removeTooltip() {
             if (hoverLine) {
                 zr.remove(hoverLine);
                 zr.remove(tooltip);
@@ -300,13 +293,13 @@ export default {
 
         zr.on('mouseout', e => {
             removeTooltip();
-        }); 
+        });
 
         zr.on('mousemove', e => {
             removeTooltip();
             let nearestIndex = findNearestValue(e.offsetX, e.offsetY);
             if (nearestIndex) {
-                let getCoord = function(pt) {
+                let getCoord = function (pt) {
                     return ecChart.convertToPixel('grid', pt);
                 };
                 let linePoints = makePolyPoints(
@@ -395,7 +388,7 @@ export default {
 
                 tooltipY = new echarts.graphic.Text({
                     position: [
-                        gridRect.x + gridRect.width, 
+                        gridRect.x + gridRect.width,
                         linePoints[linePoints.length - 1][1]
                     ],
                     style: {
@@ -466,8 +459,10 @@ export default {
             run,
             tag: tag.displayName
         };
-        getPluginHistogramsHistograms(params).then(({data}) => {
-            this.data.set('originData', data);
+        getPluginHistogramsHistograms(params).then(({status, data}) => {
+            if (status === 0) {
+                this.data.set('originData', data);
+            }
         });
     },
 
@@ -500,13 +495,14 @@ export default {
 
     expandArea() {
         let isExpand = this.data.get('isExpand');
+        let pageBoxWidth = document.getElementsByClassName('visual-dl-chart-page-box')[0].offsetWidth;
         if (!isExpand) {
             let el = this.el.getElementsByClassName('visual-dl-chart-box')[0];
-            el.style.width = '800px';
+            el.style.width = pageBoxWidth + 'px';
             el.style.height = '600px';
             this.data.set('isExpand', true);
             this.myChart.resize({
-                width: 800,
+                width: pageBoxWidth,
                 height: 600
             });
         }
@@ -524,12 +520,15 @@ export default {
 };
 </script>
 <style lang="stylus">
-    .visual-dl-charts
+    .visual-dl-histogram-charts
         float left
         margin-bottom 20px
+        margin 20px 30px 10px 0
+        background #fff
+        padding 10px
         .visual-dl-chart-box
-            width 400px;
-            height 300px;
+            width 400px
+            height 300px
         .visual-dl-chart-actions
             height 50px
             margin-left 10%

frontend/src/histogram/ui/chartPage.san

 <template>
     <div class="visual-dl-chart-page">
-        <ui-expand-panel info="{{itemsLength}}" title="{{title}}">
-            <div san-for="tag in filteredPageList" class="visual-dl-chart-box">
-                <ui-chart
-                    san-for="tag in tag.tagList"
-                    tagInfo="{{tag}}"
-                    runs="{{config.runs}}"
-                    chartType="{{config.chartType}}"
-                    runsItems="{{runsItems}}"
-                ></ui-chart>
-            </div>
+        <ui-expand-panel isShow="{{expand}}" info="{{total}}" title="{{title}}">
+            <ui-chart
+                san-for="tag in filteredPageList"
+                tagInfo="{{tag}}"
+                runs="{{config.runs}}"
+                chartType="{{config.chartType}}"
+                running="{{config.running}}"
+                runsItems="{{runsItems}}"
+            ></ui-chart>
             <ui-pagination
                 san-if="total > pageSize"
                 on-pageChange="handlePageChange($event)"
@@ -26,7 +25,7 @@ import ExpandPanel from '../../common/component/ExpandPanel';
 import Chart from './chart';
 import Pagination from 'san-mui/Pagination';
 
-import {cloneDeep} from 'lodash';
+import {cloneDeep, flatten} from 'lodash';
 
 export default {
     components: {
@@ -39,10 +38,9 @@ export default {
             let tagList = this.data.get('tagList') || [];
             let runs = this.data.get('config.runs') || [];
             let list = cloneDeep(tagList);
-            return list.slice().map(item => {
-                item.tagList = item.tagList.filter(one => runs.includes(one.run));
-                return item;
-            });
+            return flatten(list.slice().map(item => {
+                return item.tagList.filter(one => runs.includes(one.run));
+            }));
         },
 
         filteredPageList() {
@@ -53,17 +51,7 @@ export default {
         },
         total() {
             let list = this.data.get('filteredRunsList') || [];
-            return list.reduce((num, item) => {
-                let length = item.tagList.length;
-                return length ? num + 1 : num;
-            }, 0);
-        },
-        itemsLength() {
-            let list = this.data.get('filteredRunsList') || [];
-            return list.reduce((num, item) => {
-                let length = item.tagList.length;
-                return length + num;
-            }, 0);
+            return list.length;
         }
     },
     initData() {
@@ -87,7 +75,7 @@ export default {
     .chart-page
         .chart-box
             float left
-        .chart-box:after
+        .chart-page-box:after
             content: "";
             clear: both;
             display: block;

frontend/src/histogram/ui/config.san

@@ -10,18 +10,20 @@
             value="{=config.chartType=}"
             items="{{charTypeItems}}"
         />
+        <!--
         <ui-radio-group
             label="Horizontal"
             value="{=config.horizontal=}"
             items="{{horizontalItems}}"
         />
+        -->
         <ui-checkbox-group
             value="{=config.runs=}"
             label="Runs"
             items="{{runsItems}}"
         />
         <san-button
-            class="visual-dl-scalar-run-toggle"
+            class="visual-dl-histogram-run-toggle"
             variants="raised {{config.running ? 'secondery' : 'primary'}}"
             on-click="toggleAllRuns"
         >

frontend/src/images/Images.san

 <template>
-    <div class="visual-dl-scalar-container">
-        <div class="visual-dl-scalar-left">
-            <div class="visual-dl-scalar-config-container">
-                <ui-config
-                    runsItems="{{runsItems}}"
-                    config="{=config=}"
-                ></ui-config>
-            </div>
-        </div>
-        <div class="visual-dl-scalar-right">
+    <div class="visual-dl-page-container">
+        <div class="visual-dl-page-left">
             <ui-chart-page
                 expand="{{true}}"
                 config="{{filteredConfig}}"
@@ -24,6 +16,14 @@
                 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>
 
@@ -32,6 +32,7 @@ import {getPluginImagesTags, getRuns} from '../service';
 import config from './ui/config';
 import chartPage from './ui/chartPage';
 import {debounce, flatten, uniq, isArray} from 'lodash';
+import autoAdjustHeight from '../common/util/autoAdjustHeight';
 export default {
     components: {
         'ui-config': config,
@@ -116,7 +117,8 @@ export default {
             config: {
                 groupNameReg: '.*',
                 isActualImageSize: [],
-                runs: []
+                runs: [],
+                running: true
             }
         };
     },
@@ -136,7 +138,9 @@ export default {
         // need debounce， can't use computed
         this.watch('config.groupNameReg', debounce(this.filterTagsList, 300));
     },
-
+    attached() {
+        autoAdjustHeight();
+    },
     filterTagsList(groupNameReg) {
         let tagsList = this.data.get('tagsList') || [];
         let regExp = new RegExp(groupNameReg);
@@ -149,21 +153,4 @@ export default {
 
 <style lang="stylus">
 
-@import '../style/variables';
-
-+prefix-classes('visual-dl-scalar-')
-    .container
-        padding-left 300px
-        position relative
-        .left
-            width 280px
-            min-height 300px
-            border solid 1px #e4e4e4
-            position absolute
-            left 0
-        .right
-            width 100%
-            border solid 1px #e4e4e4
-            min-height 300px
-            padding 20px
 </style>

frontend/src/images/ui/chartPage.san

 <template>
     <div class="visual-dl-chart-page">
-        <ui-expand-panel isShow="{{expand}}" info="{{itemsLength}}" title="{{title}}">
-            <div san-for="tag in filteredPageList" class="visual-dl-image-chart-box">
-                <ui-image
-                    class="visual-dl-chart-image"
-                    san-for="tag in tag.tagList"
-                    tagInfo="{{tag}}"
-                    isActualImageSize="{{config.isActualImageSize}}"
-                    runs="{{config.runs}}"
-                    runsItems="{{runsItems}}"
-                ></ui-image>
-            </div>
+        <ui-expand-panel isShow="{{expand}}" info="{{total}}" title="{{title}}">
+            <ui-image
+                class="visual-dl-chart-image"
+                san-for="tag in filteredPageList"
+                tagInfo="{{tag}}"
+                isActualImageSize="{{config.isActualImageSize}}"
+                runs="{{config.runs}}"
+                running="{{config.running}}"
+                runsItems="{{runsItems}}"
+            ></ui-image>
             <ui-pagination
                 class="visual-dl-sm-pagination"
                 san-if="total > pageSize"
@@ -25,10 +24,10 @@
 </template>
 <script>
 import ExpandPanel from '../../common/component/ExpandPanel';
-import image from '../../common/component/Charts/image';
+import image from './image';
 import Pagination from 'san-mui/Pagination';
 
-import {cloneDeep} from 'lodash';
+import {cloneDeep, flatten} from 'lodash';
 
 export default {
     components: {
@@ -41,10 +40,9 @@ export default {
             let tagList = this.data.get('tagList') || [];
             let runs = this.data.get('config.runs') || [];
             let list = cloneDeep(tagList);
-            return list.slice().map(item => {
-                item.tagList = item.tagList.filter(one => runs.includes(one.run));
-                return item;
-            });
+            return flatten(list.slice().map(item => {
+                return item.tagList.filter(one => runs.includes(one.run));
+            }));
         },
 
         filteredPageList() {
@@ -55,17 +53,7 @@ export default {
         },
         total() {
             let list = this.data.get('filteredRunsList') || [];
-            return list.reduce((num, item) => {
-                let length = item.tagList.length;
-                return length ? num + 1 : num;
-            }, 0);
-        },
-        itemsLength() {
-            let list = this.data.get('filteredRunsList') || [];
-            return list.reduce((num, item) => {
-                let length = item.tagList.length;
-                return length + num;
-            }, 0);
+            return list.length;
         }
     },
     initData() {
@@ -73,7 +61,7 @@ export default {
             // current page
             currentPage: 1,
             // item per page
-            pageSize: 4
+            pageSize: 8
         };
     },
 

frontend/src/images/ui/config.san

@@ -14,15 +14,24 @@
             label="Runs"
             items="{{runsItems}}"
         />
+        <san-button
+            class="visual-dl-image-run-toggle"
+            variants="raised {{config.running ? 'secondery' : 'primary'}}"
+            on-click="toggleAllRuns"
+        >
+            {{config.running ? 'Running' : 'Stopped'}}
+        </san-button>
     </div>
 </template>
 <script>
 import TextField from 'san-mui/TextField';
 import CheckBoxGroup from '../../common/component/CheckBoxGroup';
+import Button from 'san-mui/Button';
 export default {
     components: {
         'san-text-field': TextField,
-        'ui-checkbox-group': CheckBoxGroup
+        'ui-checkbox-group': CheckBoxGroup,
+        'san-button': Button
     },
     initData() {
         return {
@@ -39,6 +48,11 @@ export default {
                 }
             ]
         };
+    },
+    toggleAllRuns() {
+        let running = this.data.get('config.running');
+        this.data.set('config.running', !running);
+        this.fire('runningChange', running);
     }
 };
 </script>

frontend/src/common/component/Charts/image.san → frontend/src/images/ui/image.san

@@ -20,10 +20,12 @@
 </template>
 <script>
 import Slider from 'san-mui/Slider';
-import {getPluginImagesImages} from '../../../service';
+import {getPluginImagesImages} from '../../service';
 
 const defaultImgWidth = 400;
 const defaultImgHight = 300;
+// the time to refresh chart data
+const intervalTime = 30;
 
 export default {
     components: {
@@ -71,17 +73,7 @@ export default {
         };
     },
     inited() {
-        let {run, tag} = this.data.get('tagInfo');
-        let {displayName, samples} = tag;
-        let params = {
-            run,
-            tag: displayName,
-            samples
-        };
-        getPluginImagesImages(params).then(({data}) => {
-            this.data.set('data', data);
-            this.data.set('currentIndex', data.length - 1);
-        });
+        this.getOriginChartsData();
 
         // currentIndex change event
         this.watch('currentIndex', index => {
@@ -100,17 +92,59 @@ export default {
             /* eslint-enable fecs-camelcase */
         });
     },
+    attached() {
+        if (this.data.get('running')) {
+            this.startInterval();
+        }
+        this.watch('running', running => {
+            running ? this.startInterval() : this.stopInterval();
+        });
+    },
+
+    detached() {
+        this.stopInterval();
+    },
+
+    stopInterval() {
+        clearInterval(this.getOringDataInterval);
+    },
+
+        // get origin data per {{intervalTime}} seconds
+    startInterval() {
+        this.getOringDataInterval = setInterval(() => {
+            this.getOriginChartsData();
+        }, intervalTime * 1000);
+    },
+
     handleSlideChange(val) {
         this.data.set('currentIndex', val);
+    },
+
+    getOriginChartsData() {
+        let {run, tag} = this.data.get('tagInfo');
+        let {displayName, samples} = tag;
+        let params = {
+            run,
+            tag: displayName,
+            samples
+        };
+        getPluginImagesImages(params).then(({status, data}) => {
+            if (status === 0) {
+                this.data.set('data', data);
+                this.data.set('currentIndex', data.length - 1);
+            }
+        });
     }
 };
 </script>
 <style lang="stylus">
     .visual-dl-image
-        padding 10px
         font-size 12px
         width 400px
         float left
+        margin 20px 30px 10px 0
+        background #fff
+        padding 10px
         .visual-dl-image-title
             font-size 14px
             line-height 30px

frontend/src/scalars/Scalars.san

 <template>
-    <div class="visual-dl-scalar-container">
-        <div class="visual-dl-scalar-left">
-            <div class="visual-dl-scalar-config-container">
-                <ui-config
-                    runsItems="{{runsItems}}"
-                    config="{=config=}"
-                ></ui-config>
-            </div>
-        </div>
-        <div class="visual-dl-scalar-right">
+    <div class="visual-dl-page-container">
+        <div class="visual-dl-page-left">
             <ui-chart-page
                 expand="{{true}}"
                 config="{{filteredConfig}}"
@@ -24,6 +16,14 @@
                 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>
 
@@ -32,6 +32,7 @@ import {getPluginScalarsTags, getRuns} from '../service';
 import config from './ui/config';
 import chartPage from './ui/chartPage';
 import {debounce, flatten, uniq, isArray} from 'lodash';
+import autoAdjustHeight from '../common/util/autoAdjustHeight';
 export default {
     components: {
         'ui-config': config,
@@ -119,7 +120,7 @@ export default {
                 horizontal: 'step',
                 sortingMethod: 'default',
                 downloadLink: [],
-                outlier: ['yes'],
+                outlier: [],
                 runs: [],
                 running: true
             }
@@ -141,6 +142,9 @@ export default {
         // need debounce， can't use computed
         this.watch('config.groupNameReg', debounce(this.filterTagsList, 300));
     },
+    attached() {
+        autoAdjustHeight();
+    },
 
     filterTagsList(groupNameReg) {
         let tagsList = this.data.get('tagsList') || [];
@@ -154,21 +158,4 @@ export default {
 
 <style lang="stylus">
 
-@import '../style/variables';
-
-+prefix-classes('visual-dl-scalar-')
-    .container
-        padding-left 300px
-        position relative
-        .left
-            width 280px
-            min-height 300px
-            border solid 1px #e4e4e4
-            position absolute
-            left 0
-        .right
-            width 100%
-            border solid 1px #e4e4e4
-            min-height 300px
-            padding 20px
 </style>

frontend/src/common/component/Charts/chart.san → frontend/src/scalars/ui/chart.san

 <template>
-    <div class="visual-dl-charts">
+    <div class="visual-dl-page-charts">
         <div class="visual-dl-chart-box" style="{{computedStyle}}">
         </div>
         <div class="visual-dl-chart-actions">
@@ -26,18 +26,18 @@
 // components
 import Button from 'san-mui/Button';
 import Icon from 'san-mui/Icon';
-import DropDownMenu from '../../../common/component/DropDownMenu';
+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 {generateJsonAndDownload} from '../../common/util/downLoadFile';
+import {quantile} from '../../common/util/index';
 import moment from 'moment';
 
 // service
-import {getPluginScalarsScalars} from '../../../service';
+import {getPluginScalarsScalars} from '../../service';
 
 const originLinesOpacity = 0.3;
 const defaultSmoothWeight = 0.6;
@@ -265,7 +265,9 @@ export default {
             return getPluginScalarsScalars(params);
         });
         axios.all(requestList).then(resArray => {
-            this.data.set('originData', resArray.map(res => res.data));
+            if (resArray.every(res => res.status === 0)) {
+                this.data.set('originData', resArray.map(res => res.data));
+            }
         });
     },
 
@@ -449,13 +451,14 @@ export default {
 
     expandArea() {
         let isExpand = this.data.get('isExpand');
+        let pageBoxWidth = document.getElementsByClassName('visual-dl-chart-page-box')[0].offsetWidth;
         if (!isExpand) {
             let el = this.el.getElementsByClassName('visual-dl-chart-box')[0];
-            el.style.width = '800px';
+            el.style.width = pageBoxWidth + 'px';
             el.style.height = '600px';
             this.data.set('isExpand', true);
             this.myChart.resize({
-                width: 800,
+                width: pageBoxWidth,
                 height: 600
             });
         }
@@ -595,9 +598,11 @@ export default {
 };
 </script>
 <style lang="stylus">
-    .visual-dl-charts
+    .visual-dl-page-charts
         float left
-        margin-bottom 20px
+        margin 20px 30px 10px 0
+        background: #fff;
+        padding: 10px;
         .visual-dl-chart-actions
             height 50px
             margin-left 10%

frontend/src/scalars/ui/chartPage.san

 <template>
     <div class="visual-dl-chart-page">
         <ui-expand-panel isShow="{{expand}}" info="{{tagList.length}}" title="{{title}}">
-            <div class="visual-dl-chart-box">
+            <div class="visual-dl-chart-page-box">
                 <ui-chart
                     san-for="tag in filteredTagList"
                     tagInfo="{{tag}}"
@@ -29,9 +29,11 @@
 </template>
 <script>
 import ExpandPanel from '../../common/component/ExpandPanel';
-import chart from '../../common/component/Charts/chart';
+import chart from './chart';
 import Pagination from 'san-mui/Pagination';
 
+import {cloneDeep} from 'lodash';
+
 export default {
     components: {
         'ui-chart': chart,
@@ -39,8 +41,17 @@ export default {
         'ui-pagination': Pagination
     },
     computed: {
-        filteredTagList() {
+        filteredRunsList() {
             let tagList = this.data.get('tagList') || [];
+            let runs = this.data.get('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.data.get('filteredRunsList') || [];
             let currentPage = this.data.get('currentPage');
             let pageSize = this.data.get('pageSize');
             return tagList.slice((currentPage - 1) * pageSize, currentPage * pageSize);
@@ -69,7 +80,7 @@ export default {
 
 +prefix-classes('visual-dl-')
     .chart-page
-        .chart-box:after
+        .chart-page-box:after
             content: "";
             clear: both;
             display: block;

frontend/src/scalars/ui/config.san

 <template>
-    <div class="visual-dl-scalar-config-com">
+    <div class="visual-dl-page-config-com">
         <san-text-field
-            hintText="input a tag group name to search"
+            hintText="input a tag group name"
             label="Group name RegExp"
             inputValue="{=config.groupNameReg=}"
         />
@@ -36,7 +36,7 @@
             items="{{runsItems}}"
         />
         <san-button
-            class="visual-dl-scalar-run-toggle"
+            class="visual-dl-page-run-toggle"
             variants="raised {{config.running ? 'secondery' : 'primary'}}"
             on-click="toggleAllRuns"
         >
@@ -127,7 +127,7 @@ export default {
 </script>
 <style lang="stylus">
 @import '../../style/variables';
-+prefix-classes('visual-dl-scalar-')
++prefix-classes('visual-dl-page-')
     .config-com
         width 90%
         margin 20px auto

frontend/src/service.js

@@ -14,5 +14,5 @@ export const getPluginHistogramsTags = makeService('/data/plugin/histograms/tags
 
 export const getPluginHistogramsHistograms = makeService('/data/plugin/histograms/histograms');
 
-export const getPluginGraphsGraphs = makeService('/data/plugin/graphs/graphs');
+export const getPluginGraphsGraph = makeService('/data/plugin/graphs/graph');
 

frontend/src/style/variables.styl

 prefix = 'visual-dl-'
+
+$-theme-color = #008c99
+
+$-top-menu-font-color = #fff
+
+$-left-background-color = #303a3a
+
+$-content-text-color = #303a3a
+
+$-left-border-clor = #e9e9e9
+
+$-right-font-color = #ccc

frontend/template/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="utf-8">
-        <title>VisualDL</title>
+        <title>Visual DL</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta http-equiv="X-UA-Compatible" content="IE=Edge">
     </head>