[WebUI] fix issue#2530: duration and intermediate results pictures don't update (#2531)

src/webui/src/components/Modals/CustomizedTrial.tsx

@@ -151,13 +151,15 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
         }
     }
 
-    componentWillReceiveProps(nextProps: CustomizeProps): void {
-        const { copyTrialId } = nextProps;
+    componentDidUpdate(prevProps: CustomizeProps): void {
+        if (this.props.copyTrialId !== prevProps.copyTrialId) {
+            const { copyTrialId } = this.props;
             if (copyTrialId !== undefined && TRIALS.getTrial(copyTrialId) !== undefined) {
                 const originCopyTrialPara = TRIALS.getTrial(copyTrialId).description.parameters;
                 this.setState(() => ({ copyTrialParameter: originCopyTrialPara }));
             }
         }
+    }
 
     render(): React.ReactNode {
         const { closeCustomizeModal, visible } = this.props;

src/webui/src/components/TrialsDetail.tsx

@@ -39,7 +39,7 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
         super(props);
         this.state = {
             tablePageSize: 20,
-            whichGraph: '1',
+            whichGraph: 'Default metric',
             searchType: 'Id',
             // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-function-return-type
             searchFilter: trial => true
@@ -81,8 +81,8 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
         }
     }
 
-    handleWhichTabs = (activeKey: string): void => {
-        this.setState({ whichGraph: activeKey });
+    handleWhichTabs = (item: any): void => {
+        this.setState({whichGraph: item.props.headerText});
     }
 
     updateSearchFilterType = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
@@ -109,19 +109,19 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
         return (
             <div>
                 <div className="trial" id="tabsty">
-                    <Pivot defaultSelectedKey={"0"} className="detial-title">
+                    <Pivot defaultSelectedKey={"0"} className="detial-title" onLinkClick={this.handleWhichTabs} selectedKey={whichGraph}>
                         {/* <PivotItem tab={this.titleOfacc} key="1"> doesn't work*/}
-                        <PivotItem headerText="Default metric" itemIcon="HomeGroup" key="1">
+                        <PivotItem headerText="Default metric" itemIcon="HomeGroup" key="Default metric">
                             <Stack className="graph">
                                 <DefaultPoint
                                     trialIds={trialIds}
-                                    visible={whichGraph === '1'}
+                                    visible={whichGraph === 'Default metric'}
                                     trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
                                 />
                             </Stack>
                         </PivotItem>
                         {/* <PivotItem tab={this.titleOfhyper} key="2"> */}
-                        <PivotItem headerText="Hyper-parameter" itemIcon="Equalizer" key="2">
+                        <PivotItem headerText="Hyper-parameter" itemIcon="Equalizer" key="Hyper-parameter">
                             <Stack className="graph">
                                 <Para
                                     dataSource={source}
@@ -131,11 +131,11 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
                             </Stack>
                         </PivotItem>
                         {/* <PivotItem tab={this.titleOfDuration} key="3"> */}
-                        <PivotItem headerText="Duration" itemIcon="BarChartHorizontal" key="3">
+                        <PivotItem headerText="Duration" itemIcon="BarChartHorizontal" key="Duration">
                             <Duration source={source} whichGraph={whichGraph} />
                         </PivotItem>
                         {/* <PivotItem tab={this.titleOfIntermediate} key="4"> */}
-                        <PivotItem headerText="Intermediate result" itemIcon="StackedLineChart" key="4">
+                        <PivotItem headerText="Intermediate result" itemIcon="StackedLineChart" key="Intermediate result">
                             {/* *why this graph has small footprint? */}
                             <Intermediate source={source} whichGraph={whichGraph} />
                         </PivotItem>

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

@@ -126,10 +126,12 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
         }
     ];
 
-    componentWillReceiveProps(nextProps: SuccessTableProps): void {
-        const { trialIds } = nextProps;
+    componentDidUpdate(prevProps: SuccessTableProps): void {
+        if(this.props.trialIds !== prevProps.trialIds){
+            const { trialIds } = this.props;
             this.setState(() => ({ source: TRIALS.table(trialIds) }));
         }
+    }
 
     render(): React.ReactNode {
         const { columns, source } = this.state;

src/webui/src/components/trial-detail/Duration.tsx

@@ -167,36 +167,13 @@ class Duration extends React.Component<DurationProps, DurationState> {
         this.drawDurationGraph(source);
     }
 
-    componentWillReceiveProps(nextProps: DurationProps): void {
-        const { whichGraph, source } = nextProps;
-        if (whichGraph === '3') {
-            this.drawDurationGraph(source);
-        }
-    }
-
-    shouldComponentUpdate(nextProps: DurationProps): boolean {
-
-        const { whichGraph, source } = nextProps;
-        if (whichGraph === '3') {
-            const beforeSource = this.props.source;
-            if (whichGraph !== this.props.whichGraph) {
-                return true;
-            }
-
-            if (source.length !== beforeSource.length) {
-                return true;
-            }
-
-            if (beforeSource[beforeSource.length - 1] !== undefined) {
-                if (source[source.length - 1].duration !== beforeSource[beforeSource.length - 1].duration) {
-                    return true;
-                }
-                if (source[source.length - 1].status !== beforeSource[beforeSource.length - 1].status) {
-                    return true;
-                }
+    componentDidUpdate(prevProps: DurationProps): void {
+        // add this if to prevent endless loop
+        if (this.props.source !== prevProps.source) {
+            if (this.props.whichGraph === 'Duration') {
+                this.drawDurationGraph(this.props.source);
             }
         }
-        return false;
     }
 
     render(): React.ReactNode {

src/webui/src/components/trial-detail/Intermediate.tsx

@@ -212,11 +212,12 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
         this.drawIntermediate(source);
     }
 
-    componentWillReceiveProps(nextProps: IntermediateProps, nextState: IntermediateState): void {
-        const { isFilter, filterSource } = nextState;
-        const { whichGraph, source } = nextProps;
+    componentDidUpdate(prevProps: IntermediateProps, prevState: any): void {
+        if (this.props.source !== prevProps.source || this.state.isFilter !== prevState.isFilter) {
+            const { isFilter, filterSource } = this.state;
+            const { whichGraph, source } = this.props;
 
-        if (whichGraph === '4') {
+            if (whichGraph === 'Intermediate result') {
                 if (isFilter === true) {
                     const pointVal = this.pointInput !== null ? this.pointInput.value : '';
                     const minVal = this.minValInput !== null ? this.minValInput.value : '';
@@ -230,6 +231,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                 }
             }
         }
+    }
 
     render(): React.ReactNode {
         const { interSource, isLoadconfirmBtn, isFilter } = this.state;

src/webui/src/components/trial-detail/Para.tsx

@@ -591,12 +591,14 @@ class Para extends React.Component<ParaProps, ParaState> {
         this.reInit();
     }
 
-    componentWillReceiveProps(nextProps: ParaProps): void {
-        const { dataSource, expSearchSpace, whichGraph } = nextProps;
-        if (whichGraph === '2') {
+    componentDidUpdate(prevProps: ParaProps): void {
+        if(this.props.dataSource !== prevProps.dataSource) {
+            const { dataSource, expSearchSpace, whichGraph } = this.props;
+            if (whichGraph === 'Hyper-parameter') {
                 this.hyperParaPic(dataSource, expSearchSpace);
             }
         }
+    }
 
     render(): React.ReactNode {
         const { option, paraNodata, dimName, isLoadConfirm, selectedItem, swapyAxis } = this.state;

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

@@ -569,15 +569,17 @@ class TableList extends React.Component<TableListProps, TableListState> {
         window.addEventListener('resize', this.onWindowResize);
     }
 
-    UNSAFE_componentWillReceiveProps(nextProps: TableListProps): void {
-        const { columnList, tableSource } = nextProps;
+    componentDidUpdate(prevProps: TableListProps): void {
+        if (this.props.columnList !== prevProps.columnList || this.props.tableSource !== prevProps.tableSource) {
+            const { columnList, tableSource } = this.props;
             this.setState({
                 tableSourceForSort: tableSource,
                 tableColumns: this.initTableColumnList(columnList),
                 allColumnList: this.getAllColumnKeys()
             });
-
         }
+    }
+
     render(): React.ReactNode {
         const { intermediateKey, modalIntermediateWidth, modalIntermediateHeight,
             tableColumns, allColumnList, isShowColumn, modalVisible,