Rename x-axis label of Intermediate result "#Intermediate result" (#2146

) * rename intermediate graph xAxis name * rename intermediate name * code format * rename class name Co-authored-by: Lijiao <15910218274@163.com>
microsoft · Mar 17, 2020 · e9f5464 · e9f5464
1 parent ae0d36f
commit e9f5464
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 14 deletions.
diff --git a/src/webui/src/components/trial-detail/Intermediate.tsx b/src/webui/src/components/trial-detail/Intermediate.tsx
@@ -282,7 +282,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                         notMerge={true} // update now
                         onEvents={IntermediateEvents}
                     />
-                    <div className="yAxis"># Intermediate result</div>
+                    <div className="xAxis"># Intermediate result</div>
                 </div>
             </div>
         );

diff --git a/src/webui/src/components/trial-detail/TableList.tsx b/src/webui/src/components/trial-detail/TableList.tsx
@@ -245,8 +245,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
             if (res.data.length !== 0) {
                 // just add type=number keys
                 const intermediateMetrics = parseMetrics(res.data[0].data);
-                for(const key in intermediateMetrics){
-                    if(typeof intermediateMetrics[key] === 'number') {
+                for (const key in intermediateMetrics) {
+                    if (typeof intermediateMetrics[key] === 'number') {
                         otherkeys.push(key);
                     }
                 }
@@ -622,15 +622,18 @@ class TableList extends React.Component<TableListProps, TableListState> {
                             :
                             null
                     }
-                    <ReactEcharts
-                        option={intermediateOption}
-                        style={{
-                            width: 0.5 * modalIntermediateWidth,
-                            height: 0.7 * modalIntermediateHeight,
-                            padding: 20
-                        }}
-                        theme="my_theme"
-                    />
+                    <div className="intermediate-graph">
+                        <ReactEcharts
+                            option={intermediateOption}
+                            style={{
+                                width: 0.5 * modalIntermediateWidth,
+                                height: 0.7 * modalIntermediateHeight,
+                                padding: 20
+                            }}
+                            theme="my_theme"
+                        />
+                        <div className="xAxis">#Intermediate result</div>
+                    </div>
                 </Modal>
                 {/* Add Column Modal */}
                 {

diff --git a/src/webui/src/static/function.ts b/src/webui/src/static/function.ts
@@ -110,7 +110,7 @@ const intermediateGraphOption = (intermediateArr: number[], id: string): any =>
             trigger: 'item'
         },
         xAxis: {
-            name: 'Trial',
+            // name: '#Intermediate result',
             data: sequence
         },
         yAxis: {

diff --git a/src/webui/src/static/style/trialsDetail.scss b/src/webui/src/static/style/trialsDetail.scss
@@ -108,7 +108,7 @@ $bg: #b3b3b3;
 /* for yAxis # intermediate position in intermediate graph*/
 .intermediate-graph{
     position: relative;
-    .yAxis{
+    .xAxis{
         color: #333;
         position: absolute;
         left: 50%;