Improve trial intermediate result graph: trials have not intermediate default key (#4171)

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

@@ -55,6 +55,7 @@ interface CompareProps {
     trials: TableObj[];
     title: string;
     showDetails: boolean;
+    intermediateKeyList?: string[];
     onHideDialog: () => void;
     changeSelectTrialIds?: () => void;
 }
@@ -68,7 +69,9 @@ class Compare extends React.Component<CompareProps, CompareState> {
         super(props);
 
         this.state = {
-            intermediateKey: 'default'
+            // intermediate result maybe don't have the 'default' key...
+            intermediateKey:
+                this.props.intermediateKeyList !== undefined ? this.props.intermediateKeyList[0] : 'default'
         };
     }
 
@@ -226,10 +229,9 @@ class Compare extends React.Component<CompareProps, CompareState> {
     };
 
     render(): React.ReactNode {
-        const { trials, title, showDetails } = this.props;
+        const { trials, title, showDetails, intermediateKeyList } = this.props;
         const { intermediateKey } = this.state;
-        let intermediateAllKeysList: string[] = [];
-
+        const intermediateAllKeysList: string[] = intermediateKeyList !== undefined ? intermediateKeyList : [];
         const flatten = (m: Map<SingleAxis, any>): Map<string, any> => {
             return new Map(Array.from(m).map(([key, value]) => [key.baseName, value]));
         };
@@ -243,20 +245,6 @@ class Compare extends React.Component<CompareProps, CompareState> {
             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}
@@ -276,7 +264,8 @@ class Compare extends React.Component<CompareProps, CompareState> {
                             onClick={this.closeCompareModal}
                         />
                     </div>
-                    {intermediateAllKeysList.length > 1 ? (
+                    {intermediateAllKeysList.length > 1 ||
+                    (intermediateAllKeysList.length === 1 && intermediateAllKeysList !== ['default']) ? (
                         <Stack horizontalAlign='end' className='selectKeys'>
                             <Dropdown
                                 className='select'

ts/webui/src/components/trial-detail/TableList.tsx

@@ -12,7 +12,7 @@ import {
 } from '@fluentui/react';
 import { EXPERIMENT, TRIALS } from '../../static/datamodel';
 import { TOOLTIP_BACKGROUND_COLOR } from '../../static/const';
-import { convertDuration, formatTimestamp, copyAndSort, parametersType } from '../../static/function';
+import { convertDuration, formatTimestamp, copyAndSort, parametersType, parseMetrics } from '../../static/function';
 import { TableObj, SortInfo, SearchItems } from '../../static/interface';
 import { getTrialsBySearchFilters } from './search/searchFunction';
 import { blocked, copy, LineChart, tableListIcon } from '../buttons/Icon';
@@ -87,6 +87,7 @@ interface TableListState {
     sortInfo: SortInfo;
     searchItems: Array<SearchItems>;
     relation: Map<string, string>;
+    intermediateKeyList: string[];
 }
 
 class TableList extends React.Component<TableListProps, TableListState> {
@@ -112,7 +113,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
             copiedTrialId: undefined,
             sortInfo: { field: '', isDescend: true },
             searchItems: [],
-            relation: parametersType()
+            relation: parametersType(),
+            intermediateKeyList: []
         };
 
         this._expandedTrialIds = new Set<string>();
@@ -437,7 +439,11 @@ class TableList extends React.Component<TableListProps, TableListState> {
                     onClick={(): void => {
                         const { tableSource } = this.props;
                         const trial = tableSource.find(trial => trial.id === record.id) as TableObj;
-                        this.setState({ intermediateDialogTrial: trial });
+                        const intermediateKeyListResult = this.getIntermediateAllKeys(trial);
+                        this.setState({
+                            intermediateDialogTrial: trial,
+                            intermediateKeyList: intermediateKeyListResult
+                        });
                     }}
                 >
                     {LineChart}
@@ -469,6 +475,33 @@ class TableList extends React.Component<TableListProps, TableListState> {
         }));
     };
 
+    private getIntermediateAllKeys = (intermediateDialogTrial: any): string[] => {
+        let intermediateAllKeysList: string[] = [];
+        if (
+            intermediateDialogTrial!.intermediateMetrics !== undefined &&
+            intermediateDialogTrial!.intermediateMetrics[0]
+        ) {
+            const parsedMetric = parseMetrics(intermediateDialogTrial!.intermediateMetrics[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;
+            }
+        }
+
+        if (intermediateAllKeysList.includes('default') && intermediateAllKeysList[0] !== 'default') {
+            intermediateAllKeysList = intermediateAllKeysList.filter(item => item !== 'default');
+            intermediateAllKeysList.unshift('default');
+        }
+
+        return intermediateAllKeysList;
+    };
+
     componentDidUpdate(prevProps: TableListProps): void {
         if (this.props.tableSource !== prevProps.tableSource) {
             this._updateTableSource();
@@ -489,7 +522,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
             selectedRowIds,
             intermediateDialogTrial,
             copiedTrialId,
-            searchItems
+            searchItems,
+            intermediateKeyList
         } = this.state;
 
         return (
@@ -564,6 +598,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         title='Intermediate results'
                         showDetails={false}
                         trials={[intermediateDialogTrial]}
+                        intermediateKeyList={intermediateKeyList}
                         onHideDialog={(): void => {
                             this.setState({ intermediateDialogTrial: undefined });
                         }}