webui some changes as the description (#5496)

ts/webui/src/App.tsx

@@ -13,7 +13,12 @@ const echarts = require('echarts/lib/echarts');
 echarts.registerTheme('nni_theme', {
     color: '#3c8dbc'
 });
-
+export const NavContext = React.createContext({
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    changeInterval: (_val: number) => {},
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    refreshPage: (): void => {}
+});
 export const AppContext = React.createContext({
     interval: 10, // sendons
     columnList: COLUMN,
@@ -135,7 +140,14 @@ class App extends React.Component<{}, AppState> {
                     <Stack className='nni' style={{ minHeight: window.innerHeight }}>
                         <div className='header'>
                             <div className='headerCon'>
-                                <NavCon changeInterval={this.changeInterval} />
+                                <NavContext.Provider
+                                    value={{
+                                        changeInterval: this.changeInterval,
+                                        refreshPage: this.lastRefresh
+                                    }}
+                                >
+                                    <NavCon />
+                                </NavContext.Provider>
                             </div>
                         </div>
                         <Stack className='contentBox'>

ts/webui/src/components/experiment/trialdetail/TrialsDetail.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react';
+import React, { useContext } from 'react';
 import { Stack, Pivot, PivotItem } from '@fluentui/react';
 import { EXPERIMENT, TRIALS } from '@static/datamodel';
 import { AppContext } from '@/App';
@@ -23,24 +23,14 @@ import '@style/common/trialStatus.css';
 
 const TrialsDetail = (): any => {
     const { changeExpandRowIDs } = useContext(AppContext);
-    const [whichChart, setChart] = useState('Default metric' as string);
-    const handleWhichTabs = (item: any): void => {
-        setChart(item.props.headerText);
-    };
     const source = TRIALS.toArray();
     const paraSource = TRIALS.succeededTrials();
     const succeededTrialIds = TRIALS.succeededTrials().map(trial => trial.id);
     return (
         <React.Fragment>
             <div className='trial' id='tabsty'>
-                <Pivot
+                <Pivot className='detail-title'>
-                    defaultSelectedKey={'0'}
+                    <PivotItem headerText='Default metric' itemIcon='HomeGroup'>
-                    className='detail-title'
-                    onLinkClick={handleWhichTabs}
-                    selectedKey={whichChart}
-                >
-                    {/* <PivotItem tab={this.titleOfacc} key="1"> doesn't work*/}
-                    <PivotItem headerText='Default metric' itemIcon='HomeGroup' key='Default metric'>
                         <Stack className='graph'>
                             <DefaultPoint
                                 trialIds={succeededTrialIds}
@@ -50,19 +40,16 @@ const TrialsDetail = (): any => {
                             />
                         </Stack>
                     </PivotItem>
-                    {/* <PivotItem tab={this.titleOfhyper} key="2"> */}
+                    <PivotItem headerText='Hyper-parameter' itemIcon='Equalizer'>
-                    <PivotItem headerText='Hyper-parameter' itemIcon='Equalizer' key='Hyper-parameter'>
                         <Stack className='graph'>
                             <Para trials={paraSource} searchSpace={EXPERIMENT.searchSpaceNew} />
                         </Stack>
                     </PivotItem>
-                    {/* <PivotItem tab={this.titleOfDuration} key="3"> */}
+                    <PivotItem headerText='Duration' itemIcon='BarChartHorizontal'>
-                    <PivotItem headerText='Duration' itemIcon='BarChartHorizontal' key='Duration'>
                         <Duration source={TRIALS.notWaittingTrials()} />
                     </PivotItem>
-                    {/* <PivotItem tab={this.titleOfIntermediate} key="4"> */}
+                    <PivotItem headerText='Intermediate result' itemIcon='StackedLineChart'>
-                    <PivotItem headerText='Intermediate result' itemIcon='StackedLineChart' key='Intermediate result'>
+                        {/* why this graph has small footprint? */}
-                        {/* *why this graph has small footprint? */}
                         <Intermediate source={TRIALS.allTrialsIntermediateChart()} />
                     </PivotItem>
                 </Pivot>

ts/webui/src/components/nav/Nav.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext } from 'react';
 import axios from 'axios';
-import { Stack, StackItem, CommandBarButton, IContextualMenuProps, IStackTokens } from '@fluentui/react';
+import { Stack, StackItem, CommandBarButton, DefaultButton, IContextualMenuProps, IStackTokens } from '@fluentui/react';
 import WebRouters from './WebsiteRouter';
 import TooltipHostForIcon from './TooltipHostForIcon';
 import LinksIcon from '@components/nav/LinksIcon';
@@ -10,9 +10,10 @@ import { EXPERIMENT } from '@static/datamodel';
 import { getPrefix } from '@static/function';
 import { SlideNavBtns } from './slideNav/SlideNavBtns';
 import { timeIcon, disableUpdates, requency, closeTimer } from '@components/fluent/Icon';
+import { ErrorMessage } from '@components/nav/ErrorMessage';
+import { NavContext } from '@/App';
 import '@style/nav/nav.scss';
 import '@style/icon.scss';
-import { ErrorMessage } from '@components/nav/ErrorMessage';
 
 const pageURLtoken: IStackTokens = {
     padding: '20px 10px',
@@ -23,19 +24,16 @@ const navMaintoken: IStackTokens = {
     childrenGap: 16
 };
 
-interface NavProps {
+const NavCon = (): any => {
-    changeInterval: (value: number) => void;
-}
-
-const NavCon = (props: NavProps): any => {
-    const { changeInterval } = props;
     const [version, setVersion] = useState('999' as string);
+    const { changeInterval, refreshPage } = useContext(NavContext);
     const [currentPage, setcurrentPage] = useState(
         window.location.pathname === '/oview' || window.location.pathname === '/'
             ? 'Overview'
             : ('Trials detail' as 'Overview' | 'Trials detail')
     );
     const [visibleExperimentPanel, setVisibleExperimentPanel] = useState(false);
+    const [refreshBtnDisabled, setRefreshBtnDisabled] = useState(false);
     const [refreshText, setRefreshText] = useState('Auto refresh' as string);
     const [refreshFrequency, setRefreshFrequency] = useState(10 as number | string);
 
@@ -157,6 +155,20 @@ const NavCon = (props: NavProps): any => {
                         <div className='bar'>|</div>
                         <SlideNavBtns />
                         <div className='bar'>|</div>
+                        {/* click to refresh page  */}
+                        <DefaultButton
+                            text='Refresh'
+                            onClick={(): void => {
+                                setRefreshBtnDisabled(true);
+                                refreshPage();
+                                setTimeout(() => {
+                                    setRefreshBtnDisabled(false);
+                                }, 2000);
+                            }}
+                            allowDisabledFocus
+                            disabled={refreshBtnDisabled}
+                        />
+                        <div className='bar'>|</div>
                         <div className='nav-refresh'>
                             <CommandBarButton
                                 iconProps={refreshFrequency === '' ? disableUpdates : timeIcon}