add image char tag hightlight

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

@@ -18,8 +18,19 @@
             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}}}
+                    "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/src/common/component/Charts/chart.san

@@ -177,7 +177,18 @@ export default {
         let legendOptions = tagList.map(item => item.run);
         let that = this;
         let option = {
-            color: ['#c23531', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
+            color: [
+                '#c23531',
+                '#61a0a8',
+                '#d48265',
+                '#91c7ae',
+                '#749f83',
+                '#ca8622',
+                '#bda29a',
+                '#6e7074',
+                '#546570',
+                '#c4ccd3'
+            ],
             title: {
                 text: tag,
                 textStyle: {

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

 <template>
     <div class="visual-dl-image">
-        <h3>{{tagInfo.tag.displayName}}
-            <span>{{tagInfo.run}}</span>
+        <h3 class="visual-dl-image-title">{{tagInfo.tag.displayName}}
+            <span class="visual-dl-image-run-icon">{{tagInfo.run}}</span>
         </h3>
         <p>
             <span>Step:</span>
@@ -111,7 +111,18 @@ export default {
         font-size 12px
         width 400px
         float left
-
+        .visual-dl-image-title
+            font-size 14px
+            line-height 30px
+            .visual-dl-image-run-icon
+                background #e4e4e4
+                float right
+                margin-right 10px
+                padding 0 10px
+                border solid 1px #e4e4e4
+                border-radius 6px
+                line-height 20px
+                margin-top 4px
         .visual-dl-chart-actions
             .sm-form-item
                 width 300px

frontend/src/images/Images.san

@@ -10,6 +10,7 @@
         </div>
         <div class="visual-dl-scalar-right">
             <ui-chart-page
+                expand="{{true}}"
                 config="{{filteredConfig}}"
                 runsItems="{{runsItems}}"
                 tagList="{{filteredTagsList}}"
@@ -60,7 +61,7 @@ export default {
                         run,
                         tag: tags[run][tag]
                     };
-                });
+                }).filter(item => item.tag !== undefined);
                 return {
                     tagList,
                     tag,

frontend/src/images/ui/chartPage.san

 <template>
     <div class="visual-dl-chart-page">
-        <ui-expand-panel info="{{itemsLength}}" title="{{title}}">
-            <div san-for="tag in filteredPageList" class="visual-dl-chart-box">
+        <ui-expand-panel isShow="{{expand}}" info="{{itemsLength}}" title="{{title}}">
+            <div san-for="tag in filteredPageList" class="visual-dl-image-chart-box">
                 <ui-image
+                    class="visual-dl-chart-image"
                     san-for="tag in tag.tagList"
                     tagInfo="{{tag}}"
                     isActualImageSize="{{config.isActualImageSize}}"
@@ -11,6 +12,7 @@
                 ></ui-image>
             </div>
             <ui-pagination
+                class="visual-dl-sm-pagination"
                 san-if="total > pageSize"
                 on-pageChange="handlePageChange($event)"
                 current="{{currentPage}}"
@@ -85,12 +87,19 @@ export default {
 
 +prefix-classes('visual-dl-')
     .chart-page
-        .chart-box
+        .image-chart-box
+            overflow hidden
             float left
-        .chart-box:after
-            content: "";
-            clear: both;
-            display: block;
+            .visual-dl-chart-image
+                float left
+        .image-chart-box:after
+            content ""
+            clear both
+            display block
+        .sm-pagination
+            height 50px
+            float left
+            width 100%
 </style>