Merge branch 'develop' of github.com:PaddlePaddle/VisualDL into feature/add_image_component

README.md

@@ -20,7 +20,7 @@ cp -r frontend/dist server/visualdl/frontend/dist
 #### Step 3: build and install Python package
 ```shell
 cd server/
-python setup.py bdist_wheel
+sh build.sh
 cd dist
 sudo pip install --upgrade visualdl-0.0.1-py2-none-any.whl
 ```

frontend/mock/data/plugin/images/images.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: [
+                {
+                    "wall_time": 1512549785.061623,
+                    "step": 60,
+                    "query":
+                    "sample=0&index=0&tag=input_reshape%2Finput%2Fimage%2F0&run=test",
+                    "width": 28,
+                    "height": 28
+                },
+                {"wall_time": 1512886109.672786, "step": 60, "query": "sample=0&index=1&tag=input_reshape%2Finput%2Fimage%2F0&run=test", "width": 28, "height": 28},
+                {"wall_time": 1512886124.266915, "step": 210, "query": "sample=0&index=2&tag=input_reshape%2Finput%2Fimage%2F0&run=test", "width": 28, "height": 28},
+                {"wall_time": 1512886138.898628, "step": 330, "query": "sample=0&index=3&tag=input_reshape%2Finput%2Fimage%2F0&run=test", "width": 28, "height": 28},
+                {"wall_time": 1512886139.883663, "step": 340, "query": "sample=0&index=4&tag=input_reshape%2Finput%2Fimage%2F0&run=test", "width": 28, "height": 28},
+                {"wall_time": 1512886147.195567, "step": 410, "query": "sample=0&index=5&tag=input_reshape%2Finput%2Fimage%2F0&run=test", "width": 28, "height": 28},
+                {"wall_time": 1512886156.47856, "step": 500, "query": "sample=0&index=6&tag=input_reshape%2Finput%2Fimage%2F0&run=test", "width": 28, "height": 28},
+                {"wall_time": 1512886187.82793, "step": 810, "query": "sample=0&index=7&tag=input_reshape%2Finput%2Fimage%2F0&run=test", "width": 28, "height": 28},
+                {"wall_time": 1512886200.386198, "step": 950, "query": "sample=0&index=8&tag=input_reshape%2Finput%2Fimage%2F0&run=test", "width": 28, "height": 28},
+                {"wall_time": 1512886204.224405, "step": 990, "query": "sample=0&index=9&tag=input_reshape%2Finput%2Fimage%2F0&run=test", "width": 28, "height": 28}
+            ]
+        }
+    };
+};
+
+

frontend/mock/data/plugin/images/individualImage.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: ''
+        }
+    };
+};

frontend/mock/data/plugin/images/tags.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: {
+                "test": {
+                    "input_reshape/input/image/6": {
+                        "displayName": "input_reshape/input/image/6", "description": "", "samples": 1}, "input_reshape/input/image/7": {"displayName": "input_reshape/input/image/7", "description": "", "samples": 1}, "input_reshape/input/image/4": {"displayName": "input_reshape/input/image/4", "description": "", "samples": 1}, "input_reshape/input/image/5": {"displayName": "input_reshape/input/image/5", "description": "", "samples": 1}, "input_reshape/input/image/2": {"displayName": "input_reshape/input/image/2", "description": "", "samples": 1}, "input_reshape/input/image/3": {"displayName": "input_reshape/input/image/3", "description": "", "samples": 1}, "input_reshape/input/image/0": {"displayName": "input_reshape/input/image/0", "description": "", "samples": 1}, "input_reshape/input/image/1": {"displayName": "input_reshape/input/image/1", "description": "", "samples": 1}, "input_reshape/input/image/8": {"displayName": "input_reshape/input/image/8", "description": "", "samples": 1}, "input_reshape/input/image/9": {"displayName": "input_reshape/input/image/9", "description": "", "samples": 1}}, "train": {"input_reshape/input/image/6": {"displayName": "input_reshape/input/image/6", "description": "", "samples": 1}, "input_reshape/input/image/7": {"displayName": "input_reshape/input/image/7", "description": "", "samples": 1}, "input_reshape/input/image/4": {"displayName": "input_reshape/input/image/4", "description": "", "samples": 1}, "input_reshape/input/image/5": {"displayName": "input_reshape/input/image/5", "description": "", "samples": 1}, "input_reshape/input/image/2": {"displayName": "input_reshape/input/image/2", "description": "", "samples": 1}, "input_reshape/input/image/3": {"displayName": "input_reshape/input/image/3", "description": "", "samples": 1}, "input_reshape/input/image/0": {"displayName": "input_reshape/input/image/0", "description": "", "samples": 1}, "input_reshape/input/image/1": {"displayName": "input_reshape/input/image/1", "description": "", "samples": 1}, "input_reshape/input/image/8": {"displayName": "input_reshape/input/image/8", "description": "", "samples": 1}, "input_reshape/input/image/9": {"displayName": "input_reshape/input/image/9", "description": "", "samples": 1}}}
+        }
+    };
+};

frontend/mock/data/runs.js

@@ -16,7 +16,7 @@ module.exports = function (path, queryParam, postParam) {
         _data: {
             status: 0,
             msg: 'SUCCESS',
-            data: ["train", "test", "model"]
+            data: ["train", "test"]
         }
     };
 };

frontend/package.json

@@ -6,9 +6,7 @@
     "release": "cross-env NODE_ENV=production node ./tool/build.js",
     "build": "cross-env NODE_ENV=dev node ./tool/build.js",
     "dev": "cross-env NODE_ENV=dev node tool/dev-server.js",
-    "lint": "./node_modules/fecs/bin/fecs --rule",
-    "precommit": "npm run lint",
-    "prepush": "npm run lint"
+    "lint": "./node_modules/fecs/bin/fecs --rule"
   },
   "engines": {
     "node": ">= 6.4.0"
@@ -52,7 +50,6 @@
     "html-loader": "^0.4.4",
     "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.4",
-    "husky": "^0.14.3",
     "json-loader": "^0.5.4",
     "opn": "^5.1.0",
     "optimize-css-assets-webpack-plugin": "^1.3.2",

frontend/src/common/component/AppMenu.san

@@ -32,7 +32,7 @@ export default {
                 },
                 {
                     value: '2',
-                    url: '/image',
+                    url: '/images',
                     title: 'IMAGES'
                 }
             ]

frontend/src/common/component/Charts/chart.san

@@ -3,26 +3,52 @@
         <div class="visual-dl-chart-box" style="{{computedStyle}}">
         </div>
         <div class="visual-dl-chart-actions">
+            <san-button on-click="expandArea">
+                <san-icon size="20">settings_overscan</san-icon>
+            </san-button>
             <ui-dropdown-menu
+                san-if="downloadLink"
+                stlye="width:100px;"
                 hintText="download type"
                 items="{{runsItems}}"
                 value="{=downloadType=}"
             />
-            <san-button on-click="handleDownLoad">
-                <san-icon>file_download</san-icon>
+            <san-button
+                san-if="downloadLink"
+                on-click="handleDownLoad">
+                <san-icon size="20">file_download</san-icon>
             </san-button>
         </div>
     </div>
 </template>
 <script>
+
+// components
 import Button from 'san-mui/Button';
 import Icon from 'san-mui/Icon';
 import DropDownMenu from '../../../common/component/DropDownMenu';
-import {generateJsonAndDownload} from '../../../common/util/downLoadFile';
+
+// 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 = 30;
+
 export default {
+
     components: {
         'ui-dropdown-menu': DropDownMenu,
         'san-button': Button,
@@ -40,8 +66,6 @@ export default {
         return {
             width: 400,
             height: 300,
-            // line config
-            options: {},
             data: [
                 {
                     name: 'train',
@@ -56,11 +80,45 @@ export default {
         this.watch('runsItems', val => {
             this.initDownloadType();
         });
+
+        this.watch('originData', originData => {
+            this.setChartData();
+            this.setChartsOutlier();
+            this.setChartHorizon();
+        });
+
+        this.watch('smoothing', smoothing => {
+            this.setChartData();
+        });
+
+        this.watch('outlier', outlier => {
+            // outlier
+            this.setChartsOutlier();
+        });
+
+        this.watch('horizontal', horizontal => {
+            this.setChartHorizon();
+        });
+
+        this.watch('runs', runs => {
+            this.setChartsRuns();
+        });
     },
 
     attached() {
         let tagInfo = this.data.get('tagInfo');
         this.initCharts(tagInfo);
+
+        if (this.data.get('running')) {
+            this.startInterval();
+        }
+        this.watch('running', running => {
+            running ? this.startInterval() : this.stopInterval();
+        });
+    },
+
+    detached() {
+        this.stopInterval();
     },
 
     initDownloadType() {
@@ -74,25 +132,50 @@ export default {
     initCharts(tagInfo) {
         this.createChart();
         this.setChartsOptions(tagInfo);
-        this.setChartsData(tagInfo);
+        this.getOriginChartsData(tagInfo);
     },
 
     createChart() {
         let el = this.el.getElementsByClassName('visual-dl-chart-box')[0];
         this.myChart = echarts.init(el);
     },
+
     setChartsOptions({tagList, tag}) {
-        let seriesOption = tagList.map(item => {
-            return {
-                name: item.run,
-                type: 'line',
-                showSymbol: false,
-                hoverAnimation: false,
-                data: [],
-                smooth: true
-            };
-        });
+        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 that = this;
         let option = {
             title: {
                 text: tag,
@@ -103,9 +186,14 @@ export default {
             tooltip: {
                 trigger: 'axis',
                 axisPointer: {
-                    animation: false
+                    animation: true
                 },
-                position: [10, 300]
+                position: ['10%', '90%'],
+                formatter(params, ticket, callback) {
+                    let data = that.getFormatterPoints(params[0].data);
+                    return that.tansformFormatterData(data);
+
+                }
             },
             toolbox: {
                 show: true,
@@ -115,39 +203,26 @@ export default {
                     restore: {},
                     saveAsImage: {}
                 },
-                left: 40,
-                top: 270
+                left: '10%',
+                top: '90%'
             },
             legend: {
                 data: legendOptions,
-                top: 30
+                top: '10%'
             },
             grid: {
-                top: 70,
-                bottom: 50
+                left: '10%',
+                top: '20%',
+                right: '10%',
+                bottom: '20%'
+            },
+            xAxis: {
+                type: 'value'
             },
-            xAxis: [
-                {
-                    type: 'value',
-                    boundaryGap: false
-                },
-                {
-                    type: 'value',
-                    boundaryGap: false
-                }
-            ],
             yAxis: {
                 type: 'value',
-                boundaryGap: [0, '100%'],
-                min(value) {
-                    return value.min;
-                },
-                max(value) {
-                    return value.max;
-                },
                 axisLabel: {
                     formatter(value, index) {
-                        // keep 0.11111 to 0.111
                         return value.toString().slice(0, 5);
                     }
                 }
@@ -156,7 +231,20 @@ export default {
         };
         this.myChart.setOption(option);
     },
-    setChartsData({tagList, tag}) {
+
+    // get origin data per 60 seconds
+    startInterval() {
+        this.getOringDataInterval = setInterval(() => {
+            let tagInfo = this.data.get('tagInfo');
+            this.getOriginChartsData(tagInfo);
+        }, intervalTime * 1000);
+    },
+
+    stopInterval() {
+        clearInterval(this.getOringDataInterval);
+    },
+
+    getOriginChartsData({tagList, tag}) {
         let requestList = tagList.map(item => {
             let params = {
                 run: item.run,
@@ -165,22 +253,41 @@ export default {
             return getPluginScalarsScalars(params);
         });
         axios.all(requestList).then(resArray => {
-            let seriesData = resArray.map(res => {
-                return {
-                    data: res.data,
+            this.data.set('originData', resArray.map(res => res.data));
+        });
+    },
+
+    setChartData() {
+        let originData = this.data.get('originData');
+        let seriesData = originData.map(lineData => {
+            // add the smoothed data
+            this.tansformDataset(lineData);
+            return [
+                {
+                    data: lineData,
                     encode: {
-                        // map 1 to xAixs。
+                        // map 1 to xAixs
                         x: [1],
-                        // map 2 to yAixs。
+                        // map 2 to yAixs
                         y: [2]
                     }
-                };
-            });
-            this.myChart.setOption({
-                series: seriesData
-            });
+                },
+                {
+                    data: lineData,
+                    encode: {
+                        // map 1 to xAixs
+                        x: [1],
+                        // map 3 to yAixs, the third number is smoothed value
+                        y: [3]
+                    }
+                }
+            ];
+        });
+        this.myChart.setOption({
+            series: flatten(seriesData)
         });
     },
+
     getChartOptions() {
         return this.myChart.getOption() || {};
     },
@@ -192,15 +299,307 @@ export default {
         let tagInfo = this.data.get('tagInfo');
         let fileName = tagInfo.tag.replace(/\//g, '-');
         generateJsonAndDownload(sery.data, fileName);
+    },
+
+    tansformDataset(seriesData) {
+        let smoothing = this.data.get('smoothing');
+        // smooth
+        this.tansformData(seriesData, 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
+    */
+    tansformData(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(seriesData) {
+        let outlier = this.data.get('outlier');
+        let originData = this.data.get('originData');
+        let domainRangeArray = originData.map(seriesData => this.computeDataRange(seriesData, 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
+        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 horizontal = this.data.get('horizontal');
+        let seriesOption = this.myChart.getOption().series;
+        let encodeSeries = val => {
+            return {
+                encode: {
+                    x: [val]
+                }
+            };
+        };
+        let stepSeies = seriesOption.map(item => encodeSeries(1));
+        let relativeSeies = seriesOption.map(item => encodeSeries(4));
+        let wallSeries = seriesOption.map(item => encodeSeries(0));
+        let horizontalToxAxisOptions = {
+            step: {
+                xAxis: {
+                    type: 'value'
+                },
+                series: stepSeies
+            },
+            relative: {
+                xAxis: {
+                    type: 'value'
+                },
+                series: relativeSeies
+            },
+            wall: {
+                xAxis: {
+                    type: 'time'
+                },
+                series: wallSeries
+            }
+        };
+        this.myChart.setOption(horizontalToxAxisOptions[horizontal]);
+    },
+
+    expandArea() {
+        let isExpand = this.data.get('isExpand');
+        if (!isExpand) {
+            let el = this.el.getElementsByClassName('visual-dl-chart-box')[0];
+            el.style.width = '800px';
+            el.style.height = '600px';
+            this.data.set('isExpand', true);
+            this.myChart.resize({
+                width: 800,
+                height: 600
+            });
+        }
+        else {
+            let el = this.el.getElementsByClassName('visual-dl-chart-box')[0];
+            el.style.width = '400px';
+            el.style.height = '300px';
+            this.data.set('isExpand', false);
+            this.myChart.resize({
+                width: 400,
+                height: 300
+            });
+        }
+
+    },
+
+    getFormatterPoints(data) {
+        let originData = this.data.get('originData');
+        let tagList = this.data.get('tagInfo.tagList');
+        let sortingMethod = this.data.get('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) {
+                        nearestItem = series[i - 1];
+                        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;
+    },
+
+    tansformFormatterData(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 tranformedData = 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(tranformedData[0]).map(key => {
+            return '<td style="padding: 0 4px; font-weight: bold; width:' + widthPropMap[key] + 'px;">' + key + '</td>';
+        }).join('');
+        headerHtml += '</tr>';
+
+        let content = tranformedData.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>';
+    },
+
+    setChartsRuns() {
+        // let tagInfo = this.data.get('tagInfo');
+        // let runs = this.data.get('config.runs');
+        // let seriesOption = [
+        //     {
+        //         lineStyle: {
+        //             normal: {
+        //                 opacity: originLinesOpacity
+        //             }
+        //         }
+        //     }
+        // ];
     }
 };
 </script>
 <style lang="stylus">
     .visual-dl-charts
         float left
+        margin-bottom 20px
         .visual-dl-chart-actions
+            height 50px
+            margin-left 10%
             .sm-form-item
-                width 300px
-                display inline-block
+                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>
 

frontend/src/common/component/Charts/image.san

+<template>
+    <div class="visual-dl-image">
+        <h3>{{tagInfo.tag.displayName}}
+            <span>{{tagInfo.run}}</span>
+        </h3>
+        <p>
+            <span>Step:</span>
+            <span>{{imgData.step}};</span>
+            <span>{{imgData.wall_time | formatTime}}</span>
+        </p>
+        <san-slider
+            on-change="handleSlideChange($event)"
+            value="{{currentIndex}}"
+            min="{{slider.min}}"
+            max="{{steps}}"
+            step="{{1}}"
+        />
+        <img src="{{imgData.imgSrc}}" width="{{imgData.width}}" height="{{imgData.height}}"/>
+    </div>
+</template>
+<script>
+import Slider from 'san-mui/Slider';
+import {getPluginImagesImages} from '../../../service';
+
+export default {
+    components: {
+        'san-slider': Slider
+    },
+    computed: {
+        steps() {
+            let data = this.data.get('data') || [];
+            return data.length - 1;
+        }
+    },
+    filters: {
+        formatTime(value) {
+            if (!value) {
+                return;
+            }
+            let time = new Date();
+            time.setTime(value.toString().split('.')[0]);
+            return time;
+        }
+    },
+    initData() {
+        return {
+            slider: {
+                value: '0',
+                label: '',
+                min: 0,
+                step: 1
+            },
+            currentIndex: 0
+        };
+    },
+    inited() {
+        let {run, tag} = this.data.get('tagInfo');
+        let {displayName, samples} = tag;
+        let params = {
+            run,
+            displayName,
+            samples
+        };
+        getPluginImagesImages(params).then(({data}) => {
+            this.data.set('data', data);
+            this.data.set('currentIndex', data.length - 1);
+        });
+
+        // currentIndex change event
+        this.watch('currentIndex', index => {
+            /* eslint-disable fecs-camelcase */
+            let currentImgInfo = this.data.get('data') ? this.data.get('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.data.set('imgData', {
+                imgSrc,
+                height,
+                width,
+                step,
+                wall_time
+            });
+            /* eslint-enable fecs-camelcase */
+        });
+    },
+    handleSlideChange(val) {
+        this.data.set('currentIndex', val);
+    }
+};
+</script>
+<style lang="stylus">
+    .visual-dl-image
+        float left
+        padding 10px
+        font-size 12px
+        .visual-dl-chart-actions
+            .sm-form-item
+                width 300px
+                display inline-block
+</style>
+

frontend/src/common/component/ExpandPanel.san

@@ -5,9 +5,13 @@
             on-click="handleHeadClick()"
         >
             <span>{{title}}</span>
+            <span class="visaul-dl-expand-head-info">
+                <ui-icon class="visaul-dl-expand-head-arrow" size="20">{{iconName}}</ui-icon>
+                <span class="visaul-dl-expand-head-num">({{info}})</span>
+            </span>
         </h3>
         <div
-            style="display:{{displayStyle}}"
+            san-if="{{isShow}}"
             class="visaul-dl-expand-panel-content"
         >
             <slot></slot>
@@ -15,11 +19,15 @@
     </div>
 </template>
 <script>
+import Icon from 'san-mui/Icon';
 export default {
+    components: {
+        'ui-icon': Icon
+    },
     computed: {
-        displayStyle() {
+        iconName() {
             let isShow = this.data.get('isShow');
-            return isShow ? 'block' : 'none';
+            return isShow ? 'expand_less' : 'expand_more';
         }
     },
     initData() {
@@ -44,6 +52,16 @@ export default {
             height 50px
             padding 0 20px
             cursor pointer
+            position relative
+            .visaul-dl-expand-head-info
+                position absolute
+                left 90%
+                .visaul-dl-expand-head-arrow
+                    vertical-align middle
+                .visaul-dl-expand-head-num
+                    line-height 20px
+                    font-size 12px
+                    font-weight normal
         .visaul-dl-expand-panel-content
             padding 0 20px
         .visaul-dl-expand-panel-content:after

frontend/src/common/component/Slider.san

@@ -9,6 +9,8 @@
                 max="{{max}}"
                 step="{{step}}"
             />
+            <span>{{value}}</span>
+            <!--
             <san-input-number
                 min="{{min}}"
                 max="{{max}}"
@@ -17,6 +19,7 @@
                 on-change="handlerChange($event)"
                 size="small">
             </san-input-number>
+            -->
         </div>
     </div>
 </template>
@@ -24,6 +27,7 @@
 <script>
 import Slider from 'san-mui/Slider';
 import InputNumber from 'san-mui/InputNumber';
+import {debounce} from 'lodash';
 export default {
     components: {
         'san-slider': Slider,
@@ -35,11 +39,18 @@ export default {
             label: '',
             max: 0,
             min: 0,
-            step: 0
+            step: 0,
+            debounce: 400
         };
     },
-    handleSlideChange(val) {
-        this.data.set('value', val.toString());
+    inited() {
+        let debounceTime = this.data.get('debounce');
+        this.handleSlideChange = debounce(val => {
+            this.data.set('value', val.toString());
+        }, debounceTime);
+        this.handlerChange = debounce(e => {
+            this.data.set('value', e.target.value);
+        }, debounceTime);
     }
 };
 </script>
@@ -53,7 +64,7 @@ export default {
                 margin-right 20px
                 margin-top 4px
                 float left
-                width 100px
+                width 160px
                 .sm-slider-thumb
                     transform translate(0, -50%)
             .sm-inputNumber

frontend/src/common/component/ui-common.styl

+html {
+    font-family: "RobotoDraft", "Roboto", sans-serif;
+}
+
 // initual style
 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }
 
@@ -5,8 +9,8 @@ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, fo
 
 // modify some styles of san-mui
 .sm-icon
-    width 100%
-    height 100%
+    width 20px
+    height 20px
     overflow hidden
 
 .sm-radio,
@@ -52,7 +56,22 @@ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, fo
             color #58666e
 
 .sm-dropdown-menu
+    .sm-text-field
+        margin-bottom 0px
+        min-height 30px
+        border-bottom solid 1px #e4e4e4
+
+        .sm-text-field-content
+            padding 0
+            padding-left 4px
+
+            input
+                cursor pointer
+
     .sm-dropdown-menu-icon
+        top 6px
+        right 0
+        bottom 0
         .sm-icon
             color #58666e
 
@@ -64,12 +83,14 @@ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, fo
 
     .sm-menu-item.state-selected
         color #ff4081
-
+.sm-text-field
+    width 100%
 .sm-text-field-input
     color #58666e
 
 .sm-form-item
     margin-top 10px
+    overflow hidden
 
     .label
         color rgba(0,0,0,0.54)

frontend/src/common/util/http.js

 import axios from 'axios';
 import qs from 'qs';
-import Notification from '../ui/Notification';
+import Notification from '../component/Notification';
 
 const STATUS = 'status';
 const STATUSINFO = 'msg';

frontend/src/common/util/index.js

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

frontend/src/common/util/number.js

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

frontend/src/common/util/quantile.js

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

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">
+            <ui-chart-page
+                config="{{config}}"
+                runsItems="{{runsItems}}"
+                tagList="{{filteredTagsList}}"
+                title="Tags matching {{config.groupNameReg}}"
+            ></ui-chart-page>
+            <ui-chart-page
+                san-for="item in groupedTags"
+                config="{{config}}"
+                runsItems="{{runsItems}}"
+                tagList="{{item.tags}}"
+                title="{{item.group}}"
+            ></ui-chart-page>
+        </div>
+    </div>
+</template>
+
+<script>
+import {getPluginImagesTags, getRuns} from '../service';
+import config from './ui/config';
+import chartPage from './ui/chartPage';
+import {debounce, flatten, uniq} from 'lodash';
+export default {
+    components: {
+        'ui-config': config,
+        'ui-chart-page': chartPage
+    },
+    computed: {
+        runsItems() {
+            let runsArray = this.data.get('runsArray') || [];
+            return runsArray.map(item => {
+                return {
+                    name: item,
+                    value: item
+                };
+            });
+        },
+        tagsList() {
+            let tags = this.data.get('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]
+                    };
+                });
+                return {
+                    tagList,
+                    tag,
+                    group: tag.split('/')[0]
+                };
+            });
+        },
+        groupedTags() {
+            let tagsList = this.data.get('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]
+                };
+            });
+        }
+    },
+    initData() {
+        return {
+            runsArray: [],
+            tags: [],
+            config: {
+                groupNameReg: '.*',
+                smoothing: '0.5',
+                horizontal: '1',
+                sortingMethod: '2',
+                link: [],
+                chart: []
+            }
+        };
+    },
+    inited() {
+        getPluginImagesTags().then(({errno, data}) => {
+            this.data.set('tags', data);
+
+            // filter when inited
+            let groupNameReg = this.data.get('config.groupNameReg');
+            this.filterTagsList(groupNameReg);
+        });
+        getRuns().then(({errno, data}) => {
+            this.data.set('runsArray', data);
+        });
+
+        // need debounce， can't use computed
+        this.watch('config.groupNameReg', debounce(this.filterTagsList, 300));
+    },
+
+    filterTagsList(groupNameReg) {
+        let tagsList = this.data.get('tagsList') || [];
+        let regExp = new RegExp(groupNameReg);
+        let filtedTagsList = tagsList.filter(item => regExp.test(item.tag));
+        this.data.set('filteredTagsList', filtedTagsList);
+    }
+};
+
+</script>
+
+<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/index.js

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

frontend/src/images/ui/chartPage.san

+<template>
+    <div class="visual-dl-chart-page">
+        <ui-expand-panel title="{{title}}">
+            <div san-for="tag in filteredTagList" class="visual-dl-chart-box">
+                <ui-image
+                    san-for="tag in tag.tagList"
+                    tagInfo="{{tag}}"
+                    config="{{config}}"
+                    runsItems="{{runsItems}}"
+                ></ui-image>
+            </div>
+            <ui-pagination
+                san-if="total > pageSize"
+                on-pageChange="handlePageChange($event)"
+                current="{{currentPage}}"
+                pageSize="{{pageSize}}"
+                total="{{total}}"
+                showSizeChanger="{{false}}"
+            />
+        </ui-expand-panel>
+    </div>
+</template>
+<script>
+import ExpandPanel from '../../common/component/ExpandPanel';
+import image from '../../common/component/Charts/image';
+import Pagination from 'san-mui/Pagination';
+
+export default {
+    components: {
+        'ui-image': image,
+        'ui-expand-panel': ExpandPanel,
+        'ui-pagination': Pagination
+    },
+    computed: {
+        filteredTagList() {
+            let tagList = this.data.get('tagList') || [];
+            let currentPage = this.data.get('currentPage');
+            let pageSize = this.data.get('pageSize');
+            return tagList.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+        },
+        total() {
+            let tagList = this.data.get('tagList') || [];
+            return tagList.length;
+        }
+    },
+    initData() {
+        return {
+            // current page
+            currentPage: 1,
+            // item per page
+            pageSize: 8
+        };
+    },
+
+    handlePageChange({pageNum}) {
+        this.data.set('currentPage', pageNum);
+    }
+};
+</script>
+<style lang="stylus">
+@import '../../style/variables';
+
++prefix-classes('visual-dl-')
+    .chart-page
+        .chart-box:after
+            content: "";
+            clear: both;
+            display: block;
+</style>
+
+

frontend/src/images/ui/config.san

+<template>
+    <div class="visual-dl-scalar-config-com">
+        <san-text-field
+            hintText="input a tag group name to search"
+            label="Group name RegExp"
+            inputValue="{=config.groupNameReg=}"
+        />
+        <ui-checkbox-group
+            value="{=config.imageSize=}"
+            items="{{imageSizeItems}}"
+        />
+        <ui-checkbox-group
+            value="{=config.run=}"
+            label="Runs"
+            items="{{runsItems}}"
+        />
+        <san-button class="visual-dl-scalar-run-toggle" variants="raised secondery">Toggle All Runs</san-button>
+    </div>
+</template>
+<script>
+import TextField from 'san-mui/TextField';
+import CheckBoxGroup from '../../common/component/CheckBoxGroup';
+export default {
+    components: {
+        'san-text-field': TextField,
+        'ui-checkbox-group': CheckBoxGroup
+    },
+    initData() {
+        return {
+            config: {
+                groupName: 'aa',
+                imageSize: '0.5',
+                run: ''
+            },
+            runsItems: [],
+            imageSizeItems: [
+                {
+                    value: '1',
+                    name: 'Show actual image size'
+                }
+            ]
+        };
+    }
+};
+</script>
+<style lang="stylus">
+@import '../../style/variables';
++prefix-classes('visual-dl-scalar-')
+    .config-com
+        width 90%
+        margin 0 auto
+        .run-toggle
+            width 100%
+            margin-top 20px
+</style>

frontend/src/index.js

@@ -4,6 +4,7 @@ import './common/component/ui-common.styl';
 
 import './home/index';
 import './scalars/index';
+import './images/index';
 
 import App from './App';
 new App({

frontend/src/scalars/Scalars.san

@@ -10,14 +10,14 @@
         </div>
         <div class="visual-dl-scalar-right">
             <ui-chart-page
-                config="{{config}}"
+                config="{{filteredConfig}}"
                 runsItems="{{runsItems}}"
                 tagList="{{filteredTagsList}}"
                 title="Tags matching {{config.groupNameReg}}"
             ></ui-chart-page>
             <ui-chart-page
                 san-for="item in groupedTags"
-                config="{{config}}"
+                config="{{filteredConfig}}"
                 runsItems="{{runsItems}}"
                 tagList="{{item.tags}}"
                 title="{{item.group}}"
@@ -30,7 +30,7 @@
 import {getPluginScalarsTags, getRuns} from '../service';
 import config from './ui/config';
 import chartPage from './ui/chartPage';
-import {debounce, flatten, uniq} from 'lodash';
+import {debounce, flatten, uniq, isArray} from 'lodash';
 export default {
     components: {
         'ui-config': config,
@@ -91,6 +91,21 @@ export default {
                     tags: groupData[group]
                 };
             });
+        },
+        filteredConfig() {
+            let tansformArr = ['downloadLink', 'outlier'];
+            let config = this.data.get('config') || {};
+            let filteredConfig = {};
+            Object.keys(config).forEach(key => {
+                let val = config[key];
+                if (tansformArr.indexOf(key) > -1) {
+                    filteredConfig[key] = isArray(val) && val[0] === 'yes';
+                }
+                else {
+                    filteredConfig[key] = val;
+                }
+            });
+            return filteredConfig;
         }
     },
     initData() {
@@ -99,11 +114,13 @@ export default {
             tags: [],
             config: {
                 groupNameReg: '.*',
-                smoothing: '0.5',
-                horizontal: '1',
-                sortingMethod: '2',
-                link: [],
-                chart: []
+                smoothing: 0.6,
+                horizontal: 'step',
+                sortingMethod: 'default',
+                downloadLink: [],
+                outlier: [],
+                runs: [],
+                running: true
             }
         };
     },
@@ -117,6 +134,7 @@ export default {
         });
         getRuns().then(({errno, data}) => {
             this.data.set('runsArray', data);
+            this.data.set('config.runs', data);
         });
 
         // need debounce， can't use computed

frontend/src/scalars/ui/chartPage.san

 <template>
-    <div class="visaul-dl-chart-page">
-        <ui-expand-panel title="{{title}}">
-            <div class="visaul-dl-chart-box">
+    <div class="visual-dl-chart-page">
+        <ui-expand-panel info="{{tagList.length}}" title="{{title}}">
+            <div class="visual-dl-chart-box">
                 <ui-chart
                     san-for="tag in filteredTagList"
                     tagInfo="{{tag}}"
-                    config="{{config}}"
+                    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>
@@ -61,11 +68,11 @@ export default {
 @import '../../style/variables';
 
 +prefix-classes('visual-dl-')
-    .visaul-dl-chart-page
-        .visaul-dl-chart-box:after
-                content: "";
-                clear: both;
-                display: block;
+    .chart-page
+        .chart-box:after
+            content: "";
+            clear: both;
+            display: block;
 </style>
 
 

frontend/src/scalars/ui/config.san

@@ -9,12 +9,12 @@
             label="Smoothing"
             value="{=config.smoothing=}"
             min="{{0}}"
-            max="{{1}}"
+            max="{{0.999}}"
             step="{{0.001}}"
         />
         <ui-radio-group
             label="Horizontal"
-            value="{{config.horizontal}}"
+            value="{=config.horizontal=}"
             items="{{horizontalItems}}"
         />
         <ui-dropdown-menu
@@ -23,18 +23,25 @@
             value="{=config.sortingMethod=}"
         />
         <ui-checkbox-group
-            value="{=config.link=}"
+            value="{=config.downloadLink=}"
             items="{{lnksItems}}"
         />
         <ui-checkbox-group
-            value="{=config.chart=}"
+            value="{=config.outlier=}"
             items="{{chartItems}}"
         />
         <ui-checkbox-group
+            value="{=config.runs=}"
             label="Runs"
             items="{{runsItems}}"
         />
-        <san-button class="visual-dl-scalar-run-toggle" variants="raised secondery">Toggle All Runs</san-button>
+        <san-button
+            class="visual-dl-scalar-run-toggle"
+            variants="raised {{config.running ? 'secondery' : 'primary'}}"
+            on-click="toggleAllRuns"
+        >
+            {{config.running ? 'Running' : 'Stopped'}}
+        </san-button>
     </div>
 </template>
 <script>
@@ -56,59 +63,65 @@ export default {
     initData() {
         return {
             config: {
-                groupName: 'aa',
-                smoothing: '0.5',
-                horizontal: '1',
-                sortingMethod: '2',
-                link: [],
-                chart: []
+                groupNameReg: '.*',
+                smoothing: '0.6',
+                horizontal: 'step',
+                sortingMethod: 'default',
+                downloadLink: [],
+                outlier: [],
+                running: true
             },
             horizontalItems: [
                 {
                     name: 'Step',
-                    value: '1'
+                    value: 'step'
                 },
                 {
                     name: 'Relative',
-                    value: '2'
+                    value: 'relative'
                 },
                 {
                     name: 'Wall',
-                    value: '3'
+                    value: 'wall'
                 }
             ],
             sortingMethodItems: [
                 {
                     name: 'default',
-                    value: '1'
+                    value: 'default'
                 },
                 {
                     name: 'descending',
-                    value: '2'
+                    value: 'desc'
                 },
                 {
                     name: 'ascending',
-                    value: '3'
+                    value: 'asc'
                 },
                 {
                     name: 'nearest',
-                    value: '4'
+                    value: 'nearest'
                 }
             ],
             runsItems: [],
             lnksItems: [
                 {
-                    value: '1',
+                    value: 'yes',
                     name: 'Show data download links'
                 }
             ],
             chartItems: [
                 {
-                    value: '1',
+                    value: 'yes',
                     name: 'Ignore outliers in chart scaling'
                 }
             ]
         };
+    },
+    toggleAllRuns() {
+        let running = this.data.get('config.running');
+        this.data.set('config.running', !running);
+        this.fire('runningChange', running);
     }
 };
 </script>

frontend/src/service.js

@@ -5,3 +5,7 @@ export const getPluginScalarsTags = makeService('/data/plugin/scalars/tags');
 export const getRuns = makeService('/data/runs');
 
 export const getPluginScalarsScalars = makeService('/data/plugin/scalars/scalars');
+
+export const getPluginImagesTags = makeService('/data/plugin/images/tags');
+
+export const getPluginImagesImages = makeService('/data/plugin/images/images');

frontend/tool/HtmlReplacePlugin.js

+'use strict';
 function noopReplace (val) { return val; }
 
 function HtmlReplacePlugin(options) {

frontend/tool/build.js

+'use strict';
 const webpack = require('webpack');
 const rm = require('rimraf');
 const ora = require('ora');

frontend/tool/dev-client.js

+'use strict';
 var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
 
 hotClient.subscribe(function (event) {

frontend/tool/dev-server.js

+'use strict';
 process.env.NODE_ENV = 'dev';
 let devPort = 8999;
 let opn = require('opn');

frontend/tool/entry.js

+'use strict';
 const path = require('path');
 const projectPath = path.resolve(__dirname, '..');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

frontend/tool/webpack.config.js

+'use strict';
 const webpack = require('webpack');
 const path = require('path');
 const projectPath = path.resolve(__dirname, '..');

frontend/tool/webpack.dev.config.js

+'use strict';
 const webpack = require('webpack');
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');
 let merge = require('webpack-merge');

frontend/tool/webpack.prod.config.js

+'use strict';
 const webpack = require('webpack');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const path = require('path');

server/build.sh

+script=$(readlink -f "$0")
+script_path=$(dirname "$script")
+
+pushd $script_path
+  protoc visualdl/onnx/onnx.proto --python_out .
+  python setup.py bdist_wheel
+popd

server/setup.py

 from setuptools import setup
 
-packages = ['visualdl', 'visualdl.frontend.dist', 'visualdl.mock']
+packages = ['visualdl',
+            'visualdl.onnx',
+            'visualdl.mock',
+            'visualdl.frontend.dist']
 
 setup(
     name="visualdl",

server/visualdl/graph.py

+import onnx
+import json
+from google.protobuf.json_format import MessageToJson
+
+
+def reorganize_inout(json_obj, key):
+    """
+    :param json_obj: the model's json obj
+    :param key: "input or output"
+    :return:
+    """
+    for index in range(len(json_obj[key])):
+        var = json_obj[key][index]
+        var_new = dict()
+
+        # set name
+        var_new['name'] = var['name']
+
+        tensor_type = var['type']['tensorType']
+
+        # set data_type
+        var_new['data_type'] = tensor_type['elemType']
+
+        # set shape
+        shape = [dim['dimValue'] for dim in tensor_type['shape']['dim']]
+        var_new['shape'] = shape
+
+        json_obj[key][index] = var_new
+
+
+def load_model(model_pb_path):
+    model = onnx.load(model_pb_path)
+    graph = model.graph
+    del graph.initializer[:]
+
+    # to json string
+    json_str = MessageToJson(model.graph)
+    json_obj = json.loads(json_str)
+    reorganize_inout(json_obj, 'input')
+    reorganize_inout(json_obj, 'output')
+    return json.dumps(json_obj, sort_keys=True, indent=4, separators=(',', ': '))
+
+
+if __name__ == '__main__':
+    import os
+    import sys
+    current_path = os.path.abspath(os.path.dirname(sys.argv[0]))
+    json_str = load_model(current_path + "/mock/inception_v1.pb")
+    print(json_str)

server/visualdl/onnx/READEME.md

+## Note
+the onnx.proto is port from onnx commit c3137751923f576d14b4212ea444d1562b127a66

server/visualdl/onnx/__init__.py

+from __future__ import absolute_import
+from __future__ import division
+from __future__ import print_function
+from __future__ import unicode_literals
+
+import google.protobuf.message
+
+from .onnx_pb2 import ModelProto
+
+
+def load(obj):
+    '''
+    Loads a binary protobuf that stores onnx model
+
+    @params
+    Takes a file-like object (has "read" function)
+    or a string containing a file name
+    @return ONNX ModelProto object
+    '''
+    if hasattr(obj, 'read') and callable(obj.read):
+        s = obj.read()
+    else:
+        with open(obj, 'rb') as f:
+            s = f.read()
+    return load_from_string(s)
+
+
+def load_from_string(s):
+    '''
+    Loads a binary string that stores onnx model
+
+    @params
+    Takes a string object containing protobuf
+    @return ONNX ModelProto object
+    '''
+    model = ModelProto()
+    decoded = model.ParseFromString(s)
+    # in python implementation ParseFromString returns None
+    if decoded is not None and decoded != len(s):
+        raise google.protobuf.message.DecodeError(
+            "Protobuf decoding consumed too few bytes: {} out of {}".format(
+                decoded, len(s)))
+    return model

server/visualdl/onnx/onnx.proto

+//
+// WARNING: This file is automatically generated!  Please edit onnx.in.proto.
+//
+
+
+// Copyright (c) Facebook Inc. and Microsoft Corporation.
+// Licensed under the MIT license.
+
+syntax = "proto2";
+
+package onnx;
+
+// Note [Release]
+// We are still in the very early stage of defining ONNX. The current
+// version of ONNX is a starting point. While we are actively working
+// towards a complete spec, we would like to get the community involved
+// by sharing our working version of ONNX.
+
+// Note [Protobuf compatibility]
+// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+// Based on experience working with downstream vendors, we generally can't
+// assume recent versions of protobufs. This means that we do not use any
+// protobuf features that are only available in proto3.
+//
+// Here are the most notable contortions we have to carry out to work around
+// these limitations:
+//
+//   - No 'map' (added protobuf 3.0). We instead represent mappings as lists
+//     of key-value pairs, where order does not matter and duplicates
+//     are not allowed.
+
+// Note [Namespaces]
+// ~~~~~~~~~~~~~~~~~
+// ONNX gives explicit names to graphs, intermediate values and
+// serialized tensors.  To make it easier to generate names, we organize
+// these into separate namespaces (so, e.g., a graph can have the same
+// name as a serialized tensor.)  The namespaces are as follows:
+//
+// - Node: These names identify specific nodes in the graph (but not, necessarily
+//   any particular input or output of the node.
+// - Graph: These names identify graphs in the protobuf.
+// - Attribute: These names identify attribute names for extra attributes that
+//   are passed to operators.
+// - Operator: These names identify particular operators.
+// - Value: These names identify intermediate values (typically tensors) flowing through
+//   the computation of a graph.
+// - Shape: These names represent parameters for unknown shape dimensions.
+//
+// We specify the namespace of a name in ONNX as comments in the form
+// of "namespace {Node,Graph,Operator,Attribute,Value,Shape}". Framework is responsible
+// for supporting the namespaces.
+//
+// Naming things is hard. Every element with a name has an optional doc_string associated
+// with it, providing a human-readable description in text markdown.
+
+// To be compatible with both proto2 and proto3, we will use a version number
+// that is not defined by the default value but an explicit enum number.
+enum Version {
+  // proto3 requires the first enum value to be zero.
+  // We add this just to appease the compiler.
+  _START_VERSION = 0;
+  // The version field is always serialized and we will use it to store the
+  // version that the  graph is generated from. This helps us set up version
+  // control. We should use version as
+  //     xx(major) - xx(minor) - xxxx(bugfix)
+  // and we are starting with 0x00000001 (0.0.1), which was the
+  //  version we published on Oct 10, 2017.
+  IR_VERSION_2017_10_10 = 0x00000001;
+
+  // IR_VERSION 0.0.2 published on Oct 30, 2017
+  // - Added type discriminator to AttributeProto to support proto3 users
+  IR_VERSION_2017_10_30 = 0x00000002;
+
+  // IR VERSION 0.0.3 published on Nov 3, 2017
+  // - For operator versioning:
+  //    - Added new message OperatorSetIdProto
+  //    - Added opset_import in ModelProto
+  // - For vendor extensions, added domain in NodeProto
+  IR_VERSION = 0x00000003;
+}
+
+// A named attribute containing either singular float, integer, string
+// and tensor values, or repeated float, integer, string and tensor values.
+// An AttributeProto MUST contain the name field, and *only one* of the
+// following content fields, effectively enforcing a C/C++ union equivalent.
+message AttributeProto {
+
+  // Note: this enum is structurally identical to the OpSchema::AttrType
+  // enum defined in schema.h.  If you rev one, you likely need to rev the other.
+  enum AttributeType {
+    UNDEFINED = 0;
+    FLOAT = 1;
+    INT = 2;
+    STRING = 3;
+    TENSOR = 4;
+    GRAPH = 5;
+
+    FLOATS = 6;
+    INTS = 7;
+    STRINGS = 8;
+    TENSORS = 9;
+    GRAPHS = 10;
+  }
+
+  // The name field MUST be present for this version of the IR.
+  optional string name = 1;           // namespace Attribute
+
+  // A human-readable documentation for this attribute. Markdown is allowed.
+  optional string doc_string = 13;
+
+  // The type field MUST be present for this version of the IR.
+  // For 0.0.1 versions of the IR, this field was not defined, and
+  // implementations needed to use has_field hueristics to determine
+  // which value field was in use.  For IR_VERSION 0.0.2 or later, this
+  // field MUST be set and match the f|i|s|t|... field in use.  This
+  // change was made to accomodate proto3 implementations.
+  optional AttributeType type = 20;   // discriminator that indicates which field below is in use
+
+  // Exactly ONE of the following fields must be present for this version of the IR
+  optional float f = 2;               // float
+  optional int64 i = 3;               // int
+  optional bytes s = 4;               // UTF-8 string
+  optional TensorProto t = 5;         // tensor value
+  optional GraphProto g = 6;          // graph
+  // Do not use field below, it's deprecated.
+  // optional ValueProto v = 12;         // value - subsumes everything but graph
+
+  repeated float floats = 7;          // list of floats
+  repeated int64 ints = 8;            // list of ints
+  repeated bytes strings = 9;         // list of UTF-8 strings
+  repeated TensorProto tensors = 10;  // list of tensors
+  repeated GraphProto graphs = 11;    // list of graph
+}
+
+// Defines information on value, including the name, the type, and
+// the shape of the value.
+message ValueInfoProto {
+  // This field MUST be present in this version of the IR.
+  optional string name = 1;     // namespace Value
+  // This field MUST be present in this version of the IR.
+  optional TypeProto type = 2;
+  // A human-readable documentation for this value. Markdown is allowed.
+  optional string doc_string = 3;
+}
+
+// NodeProto stores a node that is similar to the notion of "layer"
+// or "operator" in many deep learning frameworks. For example, it can be a
+// node of type "Conv" that takes in an image, a filter tensor and a bias
+// tensor, and produces the convolved output.
+message NodeProto {
+  repeated string input = 1;    // namespace Value
+  repeated string output = 2;   // namespace Value
+
+  // An optional identifier for this node in a graph.
+  // This field MAY be absent in ths version of the IR.
+  optional string name = 3;     // namespace Node
+
+  // The symbolic identifier of the Operator to execute.
+  optional string op_type = 4;  // namespace Operator
+  // The domain of the OperatorSet that specifies the operator named by op_type.
+  optional string domain = 7;   // namespace Domain
+
+  // Additional named attributes.
+  // NOTE: Simply using ValueProto.NameValuePairProto is the most general
+  //       solution.  I kept AttributeProto to minimize churn on CI results.
+  repeated AttributeProto attribute = 5;
+
+  // A human-readable documentation for this node. Markdown is allowed.
+  optional string doc_string = 6;
+}
+
+// ModelProto is a top-level file/container format for bundling a ML model.
+// The semantics of the model are described by the GraphProto that represents
+// a parameterized computation graph against a set of named operators that are
+// defined independently from the graph.
+message ModelProto {
+  // The version of the IR this model targets. See Version enum above.
+  // This field MUST be present.
+  optional int64 ir_version = 1;
+
+  // The OperatorSets this model relies on.
+  // All ModelProtos MUST have at least one entry that
+  // specifies which version of the ONNX OperatorSet is
+  // being imported.
+  //
+  // All nodes in the ModelProto's graph will bind against the operator
+  // with the same-domain/same-op_type operator with the HIGHEST version
+  // in the referenced operator sets.
+  repeated OperatorSetIdProto opset_import = 8;
+
+  // The name of the framework or tool used to generate this model.
+  // This field SHOULD be present to indicate which implementation/tool/framework
+  // emitted the model.
+  optional string producer_name = 2;
+
+  // The version of the framework or tool used to generate this model.
+  // This field SHOULD be present to indicate which implementation/tool/framework
+  // emitted the model.
+  optional string producer_version = 3;
+
+  // Domain name of the model.
+  // We use reverse domain names as name space indicators. For example:
+  // `com.facebook.fair` or `com.microsoft.cognitiveservices`
+  //
+  // Together with `model_version` and GraphProto.name, this forms the unique identity of
+  // the graph.
+  optional string domain = 4;
+
+  // The version of the graph encoded. See Version enum below.
+  optional int64 model_version = 5;
+
+  // A human-readable documentation for this model. Markdown is allowed.
+  optional string doc_string = 6;
+
+  // The parameterized graph that is evaluated to execute the model.
+  optional GraphProto graph = 7;
+
+  // Named metadata values; keys should be distinct.
+  repeated StringStringEntryProto metadata_props = 14;
+};
+
+// StringStringEntryProto follows the pattern for cross-proto-version maps.
+// See https://developers.google.com/protocol-buffers/docs/proto3#maps
+message StringStringEntryProto {
+  optional string key = 1;
+  optional string value= 2;
+};
+
+// GraphProto defines a parameterized series of nodes to form a directed acyclic graph.
+// This is the equivalent of the "network" and "graph" in many deep learning
+// frameworks.
+message GraphProto {
+  // The nodes in the graph.
+  repeated NodeProto node = 1;
+
+  // The name of the graph.
+  optional string name = 2;   // namespace Graph
+
+  // A list of named tensor values (constants), used to specify default
+  // values for some of the inputs of the graph.
+  // Each TensorProto entry must have a distinct name (within the list) that
+  // also appears in the input list.
+  // In an evaluation, the default value specified here is used if and only if
+  // user specifies no value for the corresponding input parameter.
+  // May be used to pass serialized parameters for networks.
+  repeated TensorProto initializer = 5;
+
+  // A human-readable documentation for this graph. Markdown is allowed.
+  optional string doc_string = 10;
+
+  // The inputs and outputs of the graph.
+  repeated ValueInfoProto input = 11;
+  repeated ValueInfoProto output = 12;
+
+  // Information for the values in the graph. The ValueInfoProto.name's
+  // must be distinct. It is optional for a value to appear in value_info list.
+  repeated ValueInfoProto value_info = 13;
+
+  // DO NOT USE the following fields, they were deprecated before
+  // repeated string input = 3;
+  // repeated string output = 4;
+  // optional int64 ir_version = 6;
+  // optional int64 producer_version = 7;
+  // optional string producer_tag = 8;
+  // optional string domain = 9;
+}
+
+// A message defined to store a tensor in its serialized format.
+message TensorProto {
+  enum DataType {
+    UNDEFINED = 0;
+    // Basic types.
+    FLOAT = 1;   // float
+    UINT8 = 2;   // uint8_t
+    INT8 = 3;    // int8_t
+    UINT16 = 4;  // uint16_t
+    INT16 = 5;   // int16_t
+    INT32 = 6;   // int32_t
+    INT64 = 7;   // int64_t
+    STRING = 8;  // string
+    BOOL = 9;    // bool
+
+    // Advanced types
+    FLOAT16 = 10;
+    DOUBLE = 11;
+    UINT32 = 12;
+    UINT64 = 13;
+    COMPLEX64 = 14;     // complex with float32 real and imaginary components
+    COMPLEX128 = 15;    // complex with float64 real and imaginary components
+    // Future extensions go here.
+  }
+
+  // The shape of the tensor.
+  repeated int64 dims = 1;
+
+  // The data type of the tensor.
+  optional DataType data_type = 2;
+
+  // For very large tensors, we may want to store them in chunks, in which
+  // case the following fields will specify the segment that is stored in
+  // the current TensorProto.
+  message Segment {
+    optional int64 begin = 1;
+    optional int64 end = 2;
+  }
+  optional Segment segment = 3;
+
+  // Tensor content must be in the row major order.
+  //
+  // Depending on the data_type field, exactly one of the fields below with
+  // name ending in _data is used to store the elements of the tensor.
+
+  // For float and complex64 values
+  // Complex64 tensors are encoded as a single array of floats,
+  // with the real components appearing in odd numbered positions,
+  // and the corresponding imaginary component apparing in the
+  // subsequent even numbered position. (e.g., [1.0 + 2.0i, 3.0 + 4.0i]
+  // is encoded as [1.0, 2.0 ,3.0 ,4.0]
+  // When this field is present, the data_type field MUST be FLOAT or COMPLEX64.
+  repeated float float_data = 4 [packed = true];
+
+  // For int32, uint8, int8, uint16, int16, bool, and float16 values
+  // float16 values must be bit-wise converted to an uint16_t prior
+  // to writing to the buffer.
+  // When this field is present, the data_type field MUST be
+  // INT32, INT16, INT8, UINT16, INT8, BOOL, or FLOAT32
+  repeated int32 int32_data = 5 [packed = true];
+
+  // For strings.
+  // Each element of string_data is a UTF-8 encoded Unicode
+  // string. No trailing null, no leading BOM. The protobuf "string"
+  // scalar type is not used to match ML community conventions.
+  // When this field is present, the data_type field MUST be STRING
+  repeated bytes string_data = 6;
+
+  // For int64.
+  // When this field is present, the data_type field MUST be INT64
+  repeated int64 int64_data = 7 [packed = true];
+
+  // Optionally, a name for the tensor.
+  optional string name = 8; // namespace Value
+
+  // A human-readable documentation for this tensor. Markdown is allowed.
+  optional string doc_string = 12;
+
+  // Serializations can either use one of the fields above, or use this
+  // raw bytes field. The only exception is the string case, where one is
+  // required to store the content in the repeated bytes string_data field.
+  //
+  // When this raw_data field is used to store tensor value, elements MUST
+  // be stored in as fixed-width, little-endian order.
+  // Floating-point data types MUST be stored in IEEE 754 format.
+  // Complex64 elements must be written as two consecutive FLOAT values, real component first.
+  // Complex128 elements must be written as two consecutive DOUBLE values, real component first.
+  // Boolean type MUST be written one byte per tensor element (00000001 for true, 00000000 for false).
+  //
+  // Note: the advantage of specific field rather than the raw_data field is
+  // that in some cases (e.g. int data), protobuf does a better packing via
+  // variable length storage, and may lead to smaller binary footprint.
+  // When this field is present, the data_type field MUST NOT be STRING or UNDEFINED
+  optional bytes raw_data = 9;
+
+  // For double
+  // Complex64 tensors are encoded as a single array of doubles,
+  // with the real components appearing in odd numbered positions,
+  // and the corresponding imaginary component apparing in the
+  // subsequent even numbered position. (e.g., [1.0 + 2.0i, 3.0 + 4.0i]
+  // is encoded as [1.0, 2.0 ,3.0 ,4.0]
+  // When this field is present, the data_type field MUST be DOUBLE or COMPLEX128
+  repeated double double_data = 10 [packed = true];
+
+  // For uint64 and uint32 values
+  // When this field is present, the data_type field MUST be
+  // UINT32 or UINT64
+  repeated uint64 uint64_data = 11 [packed = true];
+}
+
+// Defines a tensor shape. A dimension can be either an integer value
+// or a symbolic variable. A symbolic variable represents an unknown
+// dimension.
+message TensorShapeProto {
+  message Dimension {
+    oneof value {
+      int64 dim_value = 1;
+      string dim_param = 2;   // namespace Shape
+    };
+  };
+  repeated Dimension dim = 1;
+}
+
+// Define the types.
+message TypeProto {
+
+  message Tensor {
+    // This field MUST NOT have the value of UNDEFINED
+    // This field MUST be present for this version of the IR.
+    optional TensorProto.DataType elem_type = 1;
+    optional TensorShapeProto shape = 2;
+  }
+
+
+  oneof value {
+    // The type of a tensor.
+    Tensor tensor_type = 1;
+
+  }
+}
+
+// OperatorSets are uniquely identified by a (domain, opset_version) pair.
+message OperatorSetIdProto {
+  // The domain of the operator set being identified.
+  // The empty string ("") or absence of this field implies the operator
+  // set that is defined as part of the ONNX specification.
+  // This field MUST be present in this version of the IR when referring to any other operator set.
+  optional string domain = 1;
+
+  // The version of the operator set being identified.
+  // This field MUST be present in this version of the IR.
+  optional int64 version = 2;
+}
\ No newline at end of file

server/visualdl/visual_dl.py

@@ -12,6 +12,8 @@ import storage
 import visualdl.mock.data as mock_data
 import visualdl.mock.tags as mock_tags
 from visualdl.log import logger
+import storage
+import graph
 
 app = Flask(__name__, static_url_path="")
 
@@ -149,6 +151,11 @@ def individual_image():
         imagefile, as_attachment=True, attachment_filename='img.png')
     return response
 
+@app.route('/data/plugin/graphs/graph')
+def graph():
+    model_json = graph.load_model("")
+    return Response(model_json, mimetype='application/json')
+
 
 if __name__ == '__main__':
     logger.info(" port=" + str(options.port))