Skip to content
This repository has been archived by the owner on Sep 18, 2024. It is now read-only.

[webui] Update default metric tooltip #3316

Merged
merged 5 commits into from
Jan 29, 2021
Merged

[webui] Update default metric tooltip #3316

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e8a89da
use same default metric component
Jan 18, 2021
bae59d6
review self
Jan 18, 2021
b19b5b4
rename boolean type variable
Jan 20, 2021
dfdfc7e
del whichGraph field
Jan 25, 2021
8ec0cbc
rename my_theme to nni_theme
Jan 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions ts/webui/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,13 @@ import { isManagerExperimentPage } from './static/function';
import NavCon from './components/NavCon';
import MessageInfo from './components/modals/MessageInfo';
import { SlideNavBtns } from './components/slideNav/SlideNavBtns';
const echarts = require('echarts/lib/echarts');
echarts.registerTheme('my_theme', {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe "nni_theme" or "nniTheme" is a better name?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, will change it to nni_theme

color: '#3c8dbc'
});
import './App.scss';
import './static/style/common.scss';
import './static/style/trialsDetail.scss';

interface AppState {
interval: number;
Expand Down
13 changes: 8 additions & 5 deletions ts/webui/src/components/Overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Trial } from '../static/model/trial';
import { AppContext } from '../App';
import { Title } from './overview/Title';
import SuccessTable from './overview/table/SuccessTable';
import Accuracy from './overview/Accuracy';
import DefaultPoint from './trial-detail/DefaultMetricPoint';
import { BasicInfo } from './overview/params/BasicInfo';
import { ExpDuration } from './overview/count/ExpDuration';
import { ExpDurationContext } from './overview/count/ExpDurationContext';
Expand Down Expand Up @@ -60,11 +60,9 @@ class Overview extends React.Component<{}, OverviewState> {
const bestTrials = this.findBestTrials();
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const bestAccuracy = bestTrials.length > 0 ? bestTrials[0].accuracy! : NaN;
const accuracyGraphData = this.generateAccuracyGraph(bestTrials);
const noDataMessage = bestTrials.length > 0 ? '' : 'No data';

const maxExecDuration = EXPERIMENT.profile.params.maxExecDuration;
const execDuration = EXPERIMENT.profile.execDuration;

return (
<AppContext.Consumer>
{(value): React.ReactNode => {
Expand Down Expand Up @@ -167,7 +165,12 @@ class Overview extends React.Component<{}, OverviewState> {
</div>
</Stack>
<div className='overviewChart'>
<Accuracy accuracyData={accuracyGraphData} accNodata={noDataMessage} />
<DefaultPoint
trialIds={bestTrials.map(trial => trial.info.trialJobId)}
visible={true}
Copy link
Contributor

@liuzhe-lz liuzhe-lz Jan 22, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think "visible" can be handled in this level. No need to pass a property into DefaultPoint.
Correct me if it's not the case.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, here no need this visible. And also no need whichGraph. whichGraph is appeared in v0.8 for ant design. It should be deleted when using fabric/fluent because current tab will be uninstall when you choose other tab. So webui doesn't need to consider current tab when page refresh. Thanks for your comment.

chartHeight={300}
isHasbestCurve={false}
/>
<SuccessTable
trialIds={bestTrials.map(trial => trial.info.trialJobId)}
updateOverviewPage={updateOverviewPage}
Expand Down
8 changes: 6 additions & 2 deletions ts/webui/src/components/TrialsDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import Duration from './trial-detail/Duration';
import Para from './trial-detail/Para';
import Intermediate from './trial-detail/Intermediate';
import TableList from './trial-detail/TableList';
import '../static/style/trialsDetail.scss';
import '../static/style/search.scss';

interface TrialDetailState {
Expand Down Expand Up @@ -53,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} visible={whichChart === 'Default metric'} />
<DefaultPoint
trialIds={trialIds}
visible={whichChart === 'Default metric'}
isHasbestCurve={true}
chartHeight={402}
/>
</Stack>
</PivotItem>
{/* <PivotItem tab={this.titleOfhyper} key="2"> */}
Expand Down
32 changes: 0 additions & 32 deletions ts/webui/src/components/overview/Accuracy.tsx
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions ts/webui/src/components/public-child/DefaultMetric.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as React from 'react';
import { TRIALS } from '../../static/datamodel';
import { formatAccuracy } from '../../static/function';

// oview page table: default metric column render
interface DefaultMetricProps {
trialId: string;
}
Expand Down
14 changes: 10 additions & 4 deletions ts/webui/src/components/trial-detail/DefaultMetricPoint.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ const EmptyGraph = {
interface DefaultPointProps {
trialIds: string[];
visible: boolean;
chartHeight: number;
isHasbestCurve: boolean;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggest hasBestCurve

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok

}

interface DefaultPointState {
Expand Down Expand Up @@ -69,6 +71,7 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
tooltip: {
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
Expand Down Expand Up @@ -149,21 +152,24 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
}

render(): React.ReactNode {
const { isHasbestCurve, chartHeight } = this.props;
const graph = this.generateGraph();
const accNodata = graph === EmptyGraph ? 'No data' : '';
const onEvents = { dataZoom: this.metricDataZoom };

return (
<div>
<Stack horizontalAlign='end' className='default-metric'>
<Toggle label='Optimization curve' inlineLabel onChange={this.loadDefault} />
</Stack>
{isHasbestCurve && (
<Stack horizontalAlign='end' className='default-metric'>
<Toggle label='Optimization curve' inlineLabel onChange={this.loadDefault} />
</Stack>
)}
<div className='default-metric-graph'>
<ReactEcharts
option={graph}
style={{
width: '100%',
height: 402,
height: chartHeight,
margin: '0 auto'
}}
theme='my_theme'
Expand Down
4 changes: 0 additions & 4 deletions ts/webui/src/components/trial-detail/TableList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,9 @@ import ExpandableDetails from '../public-child/ExpandableDetails';
import PaginationTable from '../public-child/PaginationTable';
import { Trial } from '../../static/model/trial';

const echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/line');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
echarts.registerTheme('my_theme', {
color: '#3c8dbc'
});

type SearchOptionType = 'id' | 'trialnum' | 'status' | 'parameters';
const searchOptionLiterals = {
Expand Down
10 changes: 0 additions & 10 deletions ts/webui/src/static/style/overview/overview.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,13 +121,3 @@ $boxGapPadding: 10px;
.overviewChart {
margin-top: 20px;
}

.defaultMetricContainer {
position: relative;

.showMess {
position: absolute;
top: 42%;
left: 48%;
}
}