maintain selected status (#1710)

src/webui/src/App.tsx

@@ -10,6 +10,7 @@ interface AppState {
     columnList: Array<string>;
     experimentUpdateBroadcast: number;
     trialsUpdateBroadcast: number;
+    metricGraphMode: 'max' | 'min'; // tuner's optimize_mode filed
 }
 
 class App extends React.Component<{}, AppState> {
@@ -22,6 +23,7 @@ class App extends React.Component<{}, AppState> {
             columnList: COLUMN,
             experimentUpdateBroadcast: 0,
             trialsUpdateBroadcast: 0,
+            metricGraphMode: 'max'
         };
     }
 
@@ -30,6 +32,7 @@ class App extends React.Component<{}, AppState> {
         this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1 }));
         this.setState(state => ({ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
         this.timerId = window.setTimeout(this.refresh, this.state.interval * 1000);
+        this.setState({ metricGraphMode: (EXPERIMENT.optimizeMode === 'minimize' ? 'min' : 'max') });
     }
 
     changeInterval = (interval: number) => {
@@ -46,8 +49,12 @@ class App extends React.Component<{}, AppState> {
         this.setState({ columnList: columnList });
     }
 
+    changeMetricGraphMode = (val: 'max' | 'min') => {
+        this.setState({ metricGraphMode: val });
+    }
+
     render() {
-        const { interval, columnList, experimentUpdateBroadcast, trialsUpdateBroadcast } = this.state;
+        const { interval, columnList, experimentUpdateBroadcast, trialsUpdateBroadcast, metricGraphMode } = this.state;
         if (experimentUpdateBroadcast === 0 || trialsUpdateBroadcast === 0) {
             return null;  // TODO: render a loading page
         }
@@ -59,6 +66,7 @@ class App extends React.Component<{}, AppState> {
                     columnList, changeColumn: this.changeColumn,
                     experimentUpdateBroadcast,
                     trialsUpdateBroadcast,
+                    metricGraphMode, changeMetricGraphMode: this.changeMetricGraphMode
                 })
         );
         return (

src/webui/src/components/Overview.tsx

@@ -19,31 +19,33 @@ require('../static/style/overviewTitle.scss');
 interface OverviewProps {
     experimentUpdateBroadcast: number;
     trialsUpdateBroadcast: number;
+    metricGraphMode: 'max' | 'min';
+    changeMetricGraphMode: (val: 'max' | 'min') => void;
 }
 
 interface OverviewState {
     trialConcurrency: number;
-    metricGraphMode: 'max' | 'min';
 }
 
 class Overview extends React.Component<OverviewProps, OverviewState> {
     constructor(props: OverviewProps) {
         super(props);
         this.state = {
-            trialConcurrency: EXPERIMENT.trialConcurrency,
-            metricGraphMode: (EXPERIMENT.optimizeMode === 'minimize' ? 'min' : 'max'),
+            trialConcurrency: EXPERIMENT.trialConcurrency
         };
     }
 
     clickMaxTop = (event: React.SyntheticEvent<EventTarget>) => {
         event.stopPropagation();
         // #999 panel active bgcolor; #b3b3b3 as usual
-        this.setState({ metricGraphMode: 'max' });
+        const { changeMetricGraphMode } = this.props;
+        changeMetricGraphMode('max');
     }
 
     clickMinTop = (event: React.SyntheticEvent<EventTarget>) => {
         event.stopPropagation();
-        this.setState({ metricGraphMode: 'min' });
+        const { changeMetricGraphMode } = this.props;
+        changeMetricGraphMode('min');
     }
 
     changeConcurrency = (val: number) => {
@@ -51,8 +53,8 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
     }
 
     render() {
-        const { trialConcurrency, metricGraphMode } = this.state;
-        const { experimentUpdateBroadcast } = this.props;
+        const { trialConcurrency } = this.state;
+        const { experimentUpdateBroadcast, metricGraphMode } = this.props;
 
         const searchSpace = this.convertSearchSpace();
 
@@ -160,7 +162,7 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
 
     private findBestTrials(): Trial[] {
         let bestTrials = TRIALS.sort();
-        if (this.state.metricGraphMode === 'max') {
+        if (this.props.metricGraphMode === 'max') {
             bestTrials.reverse().splice(10);
         } else {
             bestTrials.splice(10);