Fix multiple scalar issues: (#283)

* Fix multiple scalar issues: -download link / outliers should take boolean value instead of array -download link now show proper selector of runsItem and download button -Use tag as key to prevent chart re-rendering -Add missing label in scalar config and fix UI * simply use index for key because scalar has different tag info structure from image and histogram
PaddlePaddle · Feb 27, 2018 · df60253 · df60253
1 parent ddeba58
commit df60253
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 61 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -47,7 +47,7 @@ export default {
 
 +prefix-classes('visual-dl-page-')
     .container
-        padding-right 250px
+        padding-right 300px
         position relative
         background $-left-background-color
         .left
@@ -60,7 +60,7 @@ export default {
             box-sizing border-box
         .right
             overflow scroll
-            width 250px
+            width 300px
             min-height 300px
             position absolute
             right 0

diff --git a/frontend/src/histogram/ui/ChartPage.vue b/frontend/src/histogram/ui/ChartPage.vue
@@ -4,8 +4,8 @@
         <ui-expand-panel :info="total" :title="title">
             <div class="visual-dl-chart-page-box">
                 <ui-chart
-                    v-for="tagInfo in filteredPageList"
-                    :key="tagInfo.run + tagInfo.tag.displayName"
+                    v-for="(tagInfo, index) in filteredPageList"
+                    :key="index"
                     :tagInfo="tagInfo"
                     :runs="config.runs"
                     :chartType="config.chartType"

diff --git a/frontend/src/histogram/ui/Config.vue b/frontend/src/histogram/ui/Config.vue
@@ -25,7 +25,7 @@
                :color="config.running ? 'primary' : 'error'"
                   v-model="config.running"
                   @click="toggleAllRuns"
-                  dark
+                  dark block
         >
             {{config.running ? 'Running' : 'Stopped'}}
         </v-btn>
@@ -60,10 +60,8 @@ export default {
 @import '../../style/variables';
 +prefix-classes('visual-dl-histogram-')
     .config-com
-        width 90%
-        margin 20px auto
+        padding 20px
         .run-toggle
-            width 100%
             margin-top 20px
 
 .label

diff --git a/frontend/src/images/ui/ChartPage.vue b/frontend/src/images/ui/ChartPage.vue
@@ -3,8 +3,8 @@
         <ui-expand-panel :info="total" :title="title">
             <ui-image
                 class="visual-dl-chart-image"
-                v-for="tagInfo in filteredPageList"
-                :key="tagInfo.run + tagInfo.tag.displayName"
+                v-for="(tagInfo, index) in filteredPageList"
+                :key="index"
                 :tagInfo="tagInfo"
                 :isActualImageSize="config.isActualImageSize"
                 :runs="config.runs"

diff --git a/frontend/src/images/ui/Config.vue b/frontend/src/images/ui/Config.vue
@@ -21,7 +21,8 @@
         <v-btn :color="config.running ? 'primary' : 'error'"
                   v-model="config.running"
                   @click="toggleAllRuns"
-                  dark
+                  class="visual-dl-image-run-toggle"
+                  dark block
         >
             {{config.running ? 'Running' : 'Stopped'}}
         </v-btn>
@@ -52,10 +53,8 @@ export default {
 @import '../../style/variables';
 +prefix-classes('visual-dl-image-')
     .config-com
-        width 90%
-        margin 20px auto
+        padding 20px
         .run-toggle
-            width 100%
             margin-top 20px
 
 .label

diff --git a/frontend/src/scalars/Scalars.vue b/frontend/src/scalars/Scalars.vue
@@ -2,15 +2,15 @@
     <div class="visual-dl-page-container">
         <div class="visual-dl-page-left">
             <ui-chart-page
-                    :config="filteredConfig"
+                    :config="config"
                     :runsItems="runsItems"
                     :tagList="filteredTagsList"
                     :title="'Tags matching' + config.groupNameReg"
             ></ui-chart-page>
             <ui-chart-page
                     v-for="item in groupedTags"
                     :key="item.group"
-                    :config="filteredConfig"
+                    :config="config"
                     :runsItems="runsItems"
                     :tagList="item.tags"
                     :title="item.group"
@@ -49,8 +49,8 @@ export default {
                 smoothing: 0.6,
                 horizontal: 'step',
                 sortingMethod: 'default',
-                downloadLink: [],
-                outlier: [],
+                downloadLink: false,
+                outlier: false,
                 runs: [],
                 running: true
             },
@@ -113,21 +113,6 @@ export default {
                 };
             });
         },
-        filteredConfig() {
-            let transformArr = ['downloadLink', 'outlier'];
-            let config = this.config || {};
-            let filteredConfig = {};
-            Object.keys(config).forEach(key => {
-                let val = config[key];
-                if (transformArr.indexOf(key) > -1) {
-                    filteredConfig[key] = isArray(val) && val[0] === 'yes';
-                }
-                else {
-                    filteredConfig[key] = val;
-                }
-            });
-            return filteredConfig;
-        },
     },
     created() {
 	    getPluginScalarsTags().then(({errno, data}) => {

diff --git a/frontend/src/scalars/ui/Chart.vue b/frontend/src/scalars/ui/Chart.vue
@@ -3,18 +3,20 @@
         <div ref="chartBox" class="visual-dl-chart-box" :style="computedStyle">
         </div>
         <div class="visual-dl-chart-actions">
-            <v-btn flat @click="expandArea">
+            <v-btn flat @click="expandArea" class="chart-expand">
                 <v-icon size="20">settings_overscan</v-icon>
             </v-btn>
             <v-select
                 v-if="downloadLink"
-                style="width:100px;"
-                hint="download type"
+                class="download-selector"
                 :items="runsItems"
                 v-model="downloadType"
+                item-text="name"
+                item-value="value"
             />
-            <v-btn
+            <v-btn flat
                 v-if="downloadLink"
+                class="download-button"
                 @click="handleDownLoad">
                 <v-icon size="20">file_download</v-icon>
             </v-btn>
@@ -70,7 +72,7 @@ export default {
                 }
             ],
             // choose run type for download file
-            downloadType: '',
+            downloadType: {},
             isExpand: false,
             originData: []
         };
@@ -123,7 +125,7 @@ export default {
             if (this.runsItems.length === 0) {
                 return;
             }
-            this.downloadType = this.runsItems[0].value;
+            this.downloadType = this.runsItems[0];
         },
 
         // Create a Scalar Chart, initialize it with default settings, then load datas
@@ -581,19 +583,14 @@ export default {
         background: #fff;
         padding: 10px;
         .visual-dl-chart-actions
-            height 50px
-            margin-left 10%
-            .sm-form-item
+            vertical-align: middle
+            .chart-expand
+                float left
+            .download-selector
                 float left
                 width 100px
-                margin-top 0px
-                display block
-            .sm-button
+                margin-top -10px
+            .download-button
                 float left
-                display block
-                height 20px
-                line-height 20px
-                margin-top 10px
-                padding 0 10px
 </style>
 
diff --git a/frontend/src/scalars/ui/ChartPage.vue b/frontend/src/scalars/ui/ChartPage.vue
@@ -3,9 +3,9 @@
         <ui-expand-panel :info="tagList.length" :title="title">
             <div ref="chartPageBox" class="visual-dl-chart-page-box">
                 <ui-chart
-                    v-for="tagInfo in filteredTagList"
+                    v-for="(tagInfo, index) in filteredTagList"
+                    :key="index"
                     :tagInfo="tagInfo"
-                    :key="tagInfo.run + tagInfo.tag.displayName"
                     :groupNameReg="config.groupNameReg"
                     :smoothing="config.smoothing"
                     :horizontal="config.horizontal"

diff --git a/frontend/src/scalars/ui/Config.vue b/frontend/src/scalars/ui/Config.vue
@@ -7,8 +7,14 @@
                 dark
         ></v-text-field>
 
-        <div>
-            <v-slider label="Smoothing" :max="0.999" :min="0" :step="0.001" v-model="config.smoothing" dark></v-slider>
+        <div class="visual-dl-page-slider-block">
+            <v-slider label="Smoothing"
+                      :max="0.999"
+                      :min="0"
+                      :step="0.001"
+                      v-model="config.smoothing"
+                      class="visual-dl-page-smoothing-slider"
+                      dark></v-slider>
             <span>{{config.smoothing}}</span>
         </div>
 
@@ -18,31 +24,32 @@
             <v-radio label="Wall" value="wall"></v-radio>
         </v-radio-group>
 
-        <label class="label">Tooltip sorting method</label>
         <v-select
                 :items="sortingMethodItems"
                 v-model="config.sortingMethod"
                 label="Tooltip sorting method"
-                single-line
-                bottom
                 dark
         ></v-select>
 
         <v-checkbox label="Show data download links" v-model="config.downloadLink" dark></v-checkbox>
         <v-checkbox label="Ignore outliers in chart scaling" v-model="config.outlier" dark></v-checkbox>
 
+        <label>Runs</label>
+
         <v-checkbox v-for="item in runsItems"
                     :key="item.name"
                     :label="item.name"
                     :value="item.value"
                     v-model="config.runs"
                     dark
+                    class="visual-dl-page-config-checkbox"
         ></v-checkbox>
 
         <v-btn :color="config.running ? 'primary' : 'error'"
                   v-model="config.running"
                   @click="toggleAllRuns"
-                  dark
+                  class="visual-dl-page-run-toggle"
+                  dark block
         >
             {{config.running ? 'Running' : 'Stopped'}}
         </v-btn>
@@ -100,10 +107,13 @@ export default {
 
 +prefix-classes('visual-dl-page-')
     .config-com
-        width 90%
-        margin 20px auto
+        padding 20px
+        .slider-block
+            display flex
+            align-items center
+        .smoothing-slider
+            display inline
         .run-toggle
-            width 100%
             margin-top 20px
 
 </style>