[webui] Support dict intermediate metrics(only for number type) (#3895)

ts/webui/src/components/modals/Compare.tsx

 import * as React from 'react';
 import { renderToString } from 'react-dom/server';
-import { Stack, Modal, IconButton, IDragOptions, ContextualMenu } from '@fluentui/react';
+import { Stack, Modal, IconButton, IDragOptions, ContextualMenu, Dropdown, IDropdownOption } from '@fluentui/react';
 import ReactEcharts from 'echarts-for-react';
 import { TooltipForIntermediate, TableObj, SingleAxis } from '../../static/interface';
 import { contentStyles, iconButtonStyles } from '../buttons/ModalTheme';
@@ -8,6 +8,11 @@ import { convertDuration, parseMetrics } from '../../static/function';
 import { EXPERIMENT, TRIALS } from '../../static/datamodel';
 import '../../static/style/compare.scss';
 
+/***
+ * Compare file is design for [each trial intermediate result and trials compare function]
+ * if trial has dict intermediate result, graph support shows all keys that type is number
+ */
+
 function _getWebUIWidth(): number {
     return window.innerWidth;
 }
@@ -20,7 +25,7 @@ const dragOptions: IDragOptions = {
 
 // TODO: this should be refactored to the common modules
 // copied from trial.ts
-function _parseIntermediates(trial: TableObj): number[] {
+function _parseIntermediates(trial: TableObj, key: string): number[] {
     const intermediates: number[] = [];
     for (const metric of trial.intermediates) {
         if (metric === undefined) {
@@ -29,7 +34,7 @@ function _parseIntermediates(trial: TableObj): number[] {
         const parsedMetric = parseMetrics(metric.data);
         if (typeof parsedMetric === 'object') {
             // TODO: should handle more types of metric keys
-            intermediates.push(parsedMetric.default);
+            intermediates.push(parsedMetric[key]);
         } else {
             intermediates.push(parsedMetric);
         }
@@ -54,9 +59,17 @@ interface CompareProps {
     changeSelectTrialIds?: () => void;
 }
 
-class Compare extends React.Component<CompareProps, {}> {
+interface CompareState {
+    intermediateKey: string; // default, dict other keys
+}
+
+class Compare extends React.Component<CompareProps, CompareState> {
     constructor(props: CompareProps) {
         super(props);
+
+        this.state = {
+            intermediateKey: 'default'
+        };
     }
 
     private _generateTooltipSummary = (row: Item, value: string): string =>
@@ -206,8 +219,17 @@ class Compare extends React.Component<CompareProps, {}> {
         onHideDialog();
     };
 
+    private selectOtherKeys = (_event: React.FormEvent<HTMLDivElement>, item?: IDropdownOption): void => {
+        if (item !== undefined) {
+            this.setState(() => ({ intermediateKey: item.text }));
+        }
+    };
+
     render(): React.ReactNode {
         const { trials, title, showDetails } = this.props;
+        const { intermediateKey } = this.state;
+        let intermediateAllKeysList: string[] = [];
+
         const flatten = (m: Map<SingleAxis, any>): Map<string, any> => {
             return new Map(Array.from(m).map(([key, value]) => [key.baseName, value]));
         };
@@ -218,9 +240,23 @@ class Compare extends React.Component<CompareProps, {}> {
             duration: convertDuration(trial.duration),
             parameters: flatten(trial.parameters(inferredSearchSpace)),
             metrics: flatten(trial.metrics(TRIALS.inferredMetricSpace())),
-            intermediates: _parseIntermediates(trial)
+            intermediates: _parseIntermediates(trial, intermediateKey)
         }));
 
+        if (trials[0].intermediates !== undefined && trials[0].intermediates[0]) {
+            const parsedMetric = parseMetrics(trials[0].intermediates[0].data);
+            if (parsedMetric !== undefined && typeof parsedMetric === 'object') {
+                const allIntermediateKeys: string[] = [];
+                // just add type=number keys
+                for (const key in parsedMetric) {
+                    if (typeof parsedMetric[key] === 'number') {
+                        allIntermediateKeys.push(key);
+                    }
+                }
+                intermediateAllKeysList = allIntermediateKeys;
+            }
+        }
+
         return (
             <Modal
                 isOpen={true}
@@ -240,6 +276,19 @@ class Compare extends React.Component<CompareProps, {}> {
                             onClick={this.closeCompareModal}
                         />
                     </div>
+                    {intermediateAllKeysList.length > 1 ? (
+                        <Stack horizontalAlign='end' className='selectKeys'>
+                            <Dropdown
+                                className='select'
+                                selectedKey={intermediateKey}
+                                options={intermediateAllKeysList.map((key, item) => ({
+                                    key: key,
+                                    text: intermediateAllKeysList[item]
+                                }))}
+                                onChange={this.selectOtherKeys}
+                            />
+                        </Stack>
+                    ) : null}
                     <Stack className='compare-modal-intermediate'>
                         {this._intermediates(items)}
                         <Stack className='compare-yAxis'># Intermediate result</Stack>

ts/webui/src/static/style/search.scss

@@ -20,7 +20,8 @@
 .selectKeys {
     /* intermediate result is dict, select box for keys */
     .select {
-        margin-right: 12%;
+        margin-right: 6%;
+        margin-bottom: 15px;
     }
 
     .ms-Dropdown {