Support show trial details by clicking the point in trial results graph (#3352)

Co-authored-by: Lijiao <Lijiaoa@outlook.com>

ts/webui/src/App.tsx

@@ -25,6 +25,7 @@ interface AppState {
     expWarningMessage: string;
     bestTrialEntries: string; // for overview page: best trial entreis
     isUpdate: boolean;
+    expandRowIDs: Set<string>;
 }
 
 export const AppContext = React.createContext({
@@ -35,6 +36,7 @@ export const AppContext = React.createContext({
     metricGraphMode: 'max',
     bestTrialEntries: '10',
     maxDurationUnit: 'm',
+    expandRowIDs: new Set(['']),
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     changeColumn: (_val: string[]): void => {},
     // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -44,7 +46,9 @@ export const AppContext = React.createContext({
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     changeEntries: (_val: string): void => {},
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    updateOverviewPage: () => {}
+    updateOverviewPage: () => {},
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    changeExpandRowIDs: (_val: string, _type?: string): void => {}
 });
 
 class App extends React.Component<{}, AppState> {
@@ -62,7 +66,8 @@ class App extends React.Component<{}, AppState> {
             isillegalFinal: false,
             expWarningMessage: '',
             bestTrialEntries: '10',
-            isUpdate: true
+            isUpdate: true,
+            expandRowIDs: new Set()
         };
     }
 
@@ -94,6 +99,20 @@ class App extends React.Component<{}, AppState> {
         this.setState({ columnList: columnList });
     };
 
+    changeExpandRowIDs = (id: string, type?: string): void => {
+        const currentExpandRowIDs = this.state.expandRowIDs;
+
+        if (!currentExpandRowIDs.has(id)) {
+            currentExpandRowIDs.add(id);
+        } else {
+            if (!(type !== undefined && type === 'chart')) {
+                currentExpandRowIDs.delete(id);
+            }
+        }
+
+        this.setState({ expandRowIDs: currentExpandRowIDs });
+    };
+
     changeMetricGraphMode = (val: 'max' | 'min'): void => {
         this.setState({ metricGraphMode: val });
     };
@@ -132,7 +151,8 @@ class App extends React.Component<{}, AppState> {
             isillegalFinal,
             expWarningMessage,
             bestTrialEntries,
-            maxDurationUnit
+            maxDurationUnit,
+            expandRowIDs
         } = this.state;
         if (experimentUpdateBroadcast === 0 || trialsUpdateBroadcast === 0) {
             return null; // TODO: render a loading page
@@ -186,7 +206,9 @@ class App extends React.Component<{}, AppState> {
                                         changeMetricGraphMode: this.changeMetricGraphMode,
                                         bestTrialEntries,
                                         changeEntries: this.changeEntries,
-                                        updateOverviewPage: this.updateOverviewPage
+                                        updateOverviewPage: this.updateOverviewPage,
+                                        expandRowIDs,
+                                        changeExpandRowIDs: this.changeExpandRowIDs
                                     }}
                                 >
                                     {this.props.children}

ts/webui/src/components/Overview.tsx

@@ -70,8 +70,10 @@ class Overview extends React.Component<{}, OverviewState> {
                         metricGraphMode,
                         bestTrialEntries,
                         maxDurationUnit,
+                        expandRowIDs,
                         updateOverviewPage,
-                        changeMaxDurationUnit
+                        changeMaxDurationUnit,
+                        changeExpandRowIDs
                     } = value;
                     const maxActive = metricGraphMode === 'max' ? 'active' : '';
                     const minActive = metricGraphMode === 'min' ? 'active' : '';
@@ -169,10 +171,13 @@ class Overview extends React.Component<{}, OverviewState> {
                                             trialIds={bestTrials.map(trial => trial.info.trialJobId)}
                                             chartHeight={300}
                                             hasBestCurve={false}
+                                            changeExpandRowIDs={changeExpandRowIDs}
                                         />
                                         <SuccessTable
                                             trialIds={bestTrials.map(trial => trial.info.trialJobId)}
                                             updateOverviewPage={updateOverviewPage}
+                                            expandRowIDs={expandRowIDs}
+                                            changeExpandRowIDs={changeExpandRowIDs}
                                         />
                                     </div>
                                 </div>
@@ -198,40 +203,6 @@ class Overview extends React.Component<{}, OverviewState> {
         }
         return bestTrials;
     }
-
-    private generateAccuracyGraph(bestTrials: Trial[]): object {
-        const xSequence = bestTrials.map(trial => trial.sequenceId);
-        const ySequence = bestTrials.map(trial => trial.accuracy);
-
-        return {
-            // support max show 0.0000000
-            grid: {
-                x: 60,
-                y: 40
-            },
-            tooltip: {
-                trigger: 'item'
-            },
-            xAxis: {
-                name: 'Trial',
-                type: 'category',
-                data: xSequence
-            },
-            yAxis: {
-                name: 'Default metric',
-                type: 'value',
-                scale: true,
-                data: ySequence
-            },
-            series: [
-                {
-                    symbolSize: 6,
-                    type: 'scatter',
-                    data: ySequence
-                }
-            ]
-        };
-    }
 }
 
 export default Overview;

ts/webui/src/components/TrialsDetail.tsx

@@ -52,7 +52,12 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                                 {/* <PivotItem tab={this.titleOfacc} key="1"> doesn't work*/}
                                 <PivotItem headerText='Default metric' itemIcon='HomeGroup' key='Default metric'>
                                     <Stack className='graph'>
-                                        <DefaultPoint trialIds={trialIds} hasBestCurve={true} chartHeight={402} />
+                                        <DefaultPoint
+                                            trialIds={trialIds}
+                                            hasBestCurve={true}
+                                            chartHeight={402}
+                                            changeExpandRowIDs={_value.changeExpandRowIDs}
+                                        />
                                     </Stack>
                                 </PivotItem>
                                 {/* <PivotItem tab={this.titleOfhyper} key="2"> */}

ts/webui/src/components/overview/table/SuccessTable.tsx

@@ -24,14 +24,14 @@ import '../../../static/style/openRow.scss';
 
 interface SuccessTableProps {
     trialIds: string[];
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     updateOverviewPage: () => void;
+    expandRowIDs: Set<string>;
+    changeExpandRowIDs: Function;
 }
 
 interface SuccessTableState {
     columns: IColumn[];
     source: Array<any>;
-    expandRowIdList: Set<string>;
     sortInfo: SortInfo;
 }
 
@@ -41,8 +41,7 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
         this.state = {
             columns: this.columns,
             source: TRIALS.table(this.props.trialIds),
-            sortInfo: { field: '', isDescend: false },
-            expandRowIdList: new Set() // store expanded row's trial id
+            sortInfo: { field: '', isDescend: false }
         };
     }
 
@@ -57,6 +56,7 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
         const { columns, source, sortInfo } = this.state;
         const keepSortedSource = copyAndSort(source, sortInfo.field, sortInfo.isDescend);
         const isNoneData = source.length === 0 ? true : false;
+
         return (
             <div id='succTable'>
                 <ScrollablePane className='scrollPanel' scrollbarVisibility={ScrollbarVisibility.auto}>
@@ -117,7 +117,7 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
                     styles={{
                         root: {
                             transition: 'all 0.2s',
-                            transform: `rotate(${this.state.expandRowIdList.has(item.id) ? 90 : 0}deg)`
+                            transform: `rotate(${this.props.expandRowIDs.has(item.id) ? 90 : 0}deg)`
                         }
                     }}
                     className='cursor'
@@ -206,14 +206,14 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
     };
 
     private onRenderRow: IDetailsListProps['onRenderRow'] = props => {
-        const { expandRowIdList } = this.state;
+        const { expandRowIDs } = this.props;
         if (props) {
             return (
                 <div>
                     <div>
                         <DetailsRow {...props} />
                     </div>
-                    {Array.from(expandRowIdList).map(
+                    {Array.from(expandRowIDs).map(
                         item => item === props.item.id && <OpenRow key={item} trialId={item} />
                     )}
                 </div>
@@ -223,15 +223,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
     };
 
     private expandTrialId = (_event: any, id: string): void => {
-        const { expandRowIdList } = this.state;
-        const { updateOverviewPage } = this.props;
-        const copyExpandList = expandRowIdList;
-        if (copyExpandList.has(id)) {
-            copyExpandList.delete(id);
-        } else {
-            copyExpandList.add(id);
-        }
-        this.setState(() => ({ expandRowIdList: copyExpandList }));
+        const { updateOverviewPage, changeExpandRowIDs } = this.props;
+        changeExpandRowIDs(id);
         updateOverviewPage();
     };
 }

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

@@ -26,6 +26,7 @@ interface DefaultPointProps {
     trialIds: string[];
     chartHeight: number;
     hasBestCurve: boolean;
+    changeExpandRowIDs: Function;
 }
 
 interface DefaultPointState {
@@ -57,7 +58,13 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
         }
     };
 
-    generateGraphConfig(maxSequenceId: number): any {
+    pointClick = (params: any): void => {
+        if (window.location.pathname === '/oview') {
+            this.props.changeExpandRowIDs(params.data[2], 'chart');
+        }
+    };
+
+    generateGraphConfig(_maxSequenceId: number): any {
         const { startY, endY } = this.state;
         return {
             grid: {
@@ -67,10 +74,6 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
                 trigger: 'item',
                 enterable: true,
                 confine: true, // confirm always show tooltip box rather than hidden by background
-                position: (point: number[], data: TooltipForAccuracy): number[] => [
-                    data.data[0] < maxSequenceId ? point[0] : point[0] - 300,
-                    80
-                ],
                 formatter: (data: TooltipForAccuracy): React.ReactNode => {
                     return (
                         '<div class="tooldetailAccuracy">' +
@@ -150,7 +153,7 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
         const { hasBestCurve, chartHeight } = this.props;
         const graph = this.generateGraph();
         const accNodata = graph === EmptyGraph ? 'No data' : '';
-        const onEvents = { dataZoom: this.metricDataZoom };
+        const onEvents = { dataZoom: this.metricDataZoom, click: this.pointClick };
 
         return (
             <div>