update images frontend

frontend/mock/data/plugin/images/images.js

@@ -20,8 +20,7 @@ module.exports = function (path, queryParam, postParam) {
                 {
                     "wall_time": 1512549785.061623,
                     "step": 60,
-                    "query":
-                    "sample=0&index=0&tag=input_reshape%2Finput%2Fimage%2F0&run=test",
+                    "query": "sample=0&index=0&tag=input_reshape%2Finput%2Fimage%2F0&run=test",
                     "width": 28,
                     "height": 28
                 },

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

@@ -15,13 +15,16 @@
             max="{{steps}}"
             step="{{1}}"
         />
-        <img src="{{imgData.imgSrc}}" width="{{imgData.width}}" height="{{imgData.height}}"/>
+        <img style="{{computedImgStyle}}" src="{{imgData.imgSrc}}" />
     </div>
 </template>
 <script>
 import Slider from 'san-mui/Slider';
 import {getPluginImagesImages} from '../../../service';
 
+const defaultImgWidth = 400;
+const defaultImgHight = 300;
+
 export default {
     components: {
         'san-slider': Slider
@@ -30,6 +33,22 @@ export default {
         steps() {
             let data = this.data.get('data') || [];
             return data.length - 1;
+        },
+        computedImgStyle() {
+            let isActualImageSize = this.data.get('isActualImageSize');
+            let width;
+            let height;
+            if (isActualImageSize) {
+                width = this.data.get('imgData.width');
+                height = this.data.get('imgData.height');
+                console.log('1111', width, height);
+            }
+            else {
+                width = defaultImgWidth;
+                height = defaultImgHight;
+            }
+            // console.log('width:' + width + 'px;height:' + height + 'px');
+            return 'width:' + width + 'px;height:' + height + 'px';
         }
     },
     filters: {
@@ -44,13 +63,13 @@ export default {
     },
     initData() {
         return {
+            currentIndex: 0,
             slider: {
                 value: '0',
                 label: '',
                 min: 0,
                 step: 1
-            },
-            currentIndex: 0
+            }
         };
     },
     inited() {
@@ -58,7 +77,7 @@ export default {
         let {displayName, samples} = tag;
         let params = {
             run,
-            displayName,
+            tag: displayName,
             samples
         };
         getPluginImagesImages(params).then(({data}) => {
@@ -82,6 +101,17 @@ export default {
             });
             /* eslint-enable fecs-camelcase */
         });
+
+        // isActualImageSize change event
+        this.watch('isActualImageSize', isActualImageSize => {
+            console.log(isActualImageSize);
+        });
+
+        // isActualImageSize change event
+        this.watch('runs', runs => {
+            console.log(runs);
+        });
+
     },
     handleSlideChange(val) {
         this.data.set('currentIndex', val);
@@ -90,9 +120,11 @@ export default {
 </script>
 <style lang="stylus">
     .visual-dl-image
-        float left
         padding 10px
         font-size 12px
+        width 400px
+        float left
+
         .visual-dl-chart-actions
             .sm-form-item
                 width 300px

frontend/src/images/Images.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 {getPluginImagesTags, 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,22 @@ export default {
                     tags: groupData[group]
                 };
             });
+        },
+        filteredConfig() {
+            let tansformArr = ['isActualImageSize'];
+            let config = this.data.get('config') || {};
+            console.log(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 +115,8 @@ export default {
             tags: [],
             config: {
                 groupNameReg: '.*',
-                smoothing: '0.5',
-                horizontal: '1',
-                sortingMethod: '2',
-                link: [],
-                chart: []
+                isActualImageSize: [],
+                runs: []
             }
         };
     },
@@ -117,6 +130,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/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-expand-panel info="{{itemsLength}}" title="{{title}}">
+            <div san-for="tag in filteredPageList" class="visual-dl-chart-box">
                 <ui-image
                     san-for="tag in tag.tagList"
                     tagInfo="{{tag}}"
-                    config="{{config}}"
+                    isActualImageSize="{{config.isActualImageSize}}"
+                    runs="{{config.runs}}"
                     runsItems="{{runsItems}}"
                 ></ui-image>
             </div>
@@ -25,6 +26,8 @@ import ExpandPanel from '../../common/component/ExpandPanel';
 import image from '../../common/component/Charts/image';
 import Pagination from 'san-mui/Pagination';
 
+import {cloneDeep} from 'lodash';
+
 export default {
     components: {
         'ui-image': image,
@@ -32,15 +35,37 @@ 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;
+            });
+        },
+
+        filteredPageList() {
+            let list = this.data.get('filteredRunsList');
+            let runs = this.data.get('config.runs') || [];
             let currentPage = this.data.get('currentPage');
             let pageSize = this.data.get('pageSize');
-            return tagList.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+            return list.slice((currentPage - 1) * pageSize, currentPage * pageSize);
         },
         total() {
-            let tagList = this.data.get('tagList') || [];
-            return tagList.length;
+            let list = this.data.get('filteredRunsList') || [];
+            console.log(list);
+            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);
         }
     },
     initData() {
@@ -48,7 +73,7 @@ export default {
             // current page
             currentPage: 1,
             // item per page
-            pageSize: 8
+            pageSize: 4
         };
     },
 
@@ -62,6 +87,8 @@ export default {
 
 +prefix-classes('visual-dl-')
     .chart-page
+        .chart-box
+            float left
         .chart-box:after
             content: "";
             clear: both;

frontend/src/images/ui/config.san

@@ -6,15 +6,14 @@
             inputValue="{=config.groupNameReg=}"
         />
         <ui-checkbox-group
-            value="{=config.imageSize=}"
+            value="{=config.isActualImageSize=}"
             items="{{imageSizeItems}}"
         />
         <ui-checkbox-group
-            value="{=config.run=}"
+            value="{=config.runs=}"
             label="Runs"
             items="{{runsItems}}"
         />
-        <san-button class="visual-dl-scalar-run-toggle" variants="raised secondery">Toggle All Runs</san-button>
     </div>
 </template>
 <script>
@@ -29,13 +28,13 @@ export default {
         return {
             config: {
                 groupName: 'aa',
-                imageSize: '0.5',
-                run: ''
+                isActualImageSize: [],
+                runs: []
             },
             runsItems: [],
             imageSizeItems: [
                 {
-                    value: '1',
+                    value: 'yes',
                     name: 'Show actual image size'
                 }
             ]