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

update overview layout #3046

Merged
merged 7 commits into from
Nov 16, 2020
Merged

update overview layout #3046

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
073ea4b
update overview layout
Oct 29, 2020
f16046f
align
Oct 30, 2020
cb808fa
fix style issue
Nov 2, 2020
70788a6
fix table column
Nov 6, 2020
5823cf6
fix scroll style bug
Nov 9, 2020
ddaf253
pull master
Nov 12, 2020
9a7d49b
remove inline style to css file
Nov 13, 2020
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
2 changes: 2 additions & 0 deletions ts/webui/src/App.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@
width: 87%;
margin: 0 auto;
min-width: 1200px;

/* nav bar: 56 + marginTop: 18 */
margin-top: 74px;
margin-bottom: 30px;
}
Expand Down
94 changes: 39 additions & 55 deletions ts/webui/src/components/Overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,9 @@ import { TrialCount } from './overview/count/TrialCount';
import { Command1 } from './overview/command/Command1';
import { Command2 } from './overview/command/Command2';
import { TitleContext } from './overview/TitleContext';
import { itemStyle1, itemStyleSucceed, itemStyle2, entriesOption } from './overview/overviewConst';
import { itemStyleSucceed, entriesOption } from './overview/overviewConst';
import '../static/style/overview/overview.scss';
import '../static/style/overview/topTrial.scss';
import '../static/style/logPath.scss';

interface OverviewState {
Expand Down Expand Up @@ -89,42 +90,40 @@ class Overview extends React.Component<{}, OverviewState> {
</BestMetricContext.Provider>
</div>
{/* duration & trial numbers */}
<div className='overviewProgress'>
<div className='duration'>
<TitleContext.Provider value={{ text: 'Duration', icon: 'Timer' }}>
<Title />
</TitleContext.Provider>
<ExpDurationContext.Provider
value={{
maxExecDuration,
execDuration,
updateOverviewPage,
maxDurationUnit,
changeMaxDurationUnit
}}
>
<ExpDuration />
</ExpDurationContext.Provider>
</div>
<div className='trialCount'>
<TitleContext.Provider value={{ text: 'Trial numbers', icon: 'NumberSymbol' }}>
<Title />
</TitleContext.Provider>
<ExpDurationContext.Provider
value={{
maxExecDuration,
execDuration,
updateOverviewPage,
maxDurationUnit,
changeMaxDurationUnit
}}
>
<TrialCount />
</ExpDurationContext.Provider>
</div>
<div className='duration'>
<TitleContext.Provider value={{ text: 'Duration', icon: 'Timer' }}>
<Title />
</TitleContext.Provider>
<ExpDurationContext.Provider
value={{
maxExecDuration,
execDuration,
updateOverviewPage,
maxDurationUnit,
changeMaxDurationUnit
}}
>
<ExpDuration />
</ExpDurationContext.Provider>
</div>
<div className='trialCount'>
<TitleContext.Provider value={{ text: 'Trial numbers', icon: 'NumberSymbol' }}>
<Title />
</TitleContext.Provider>
<ExpDurationContext.Provider
value={{
maxExecDuration,
execDuration,
updateOverviewPage,
maxDurationUnit,
changeMaxDurationUnit
}}
>
<TrialCount />
</ExpDurationContext.Provider>
</div>
{/* table */}
<div className='overviewTable'>
<div className='overviewBestMetric'>
<Stack horizontal>
<div style={itemStyleSucceed}>
<TitleContext.Provider value={{ text: 'Top trials', icon: 'BulletedList' }}>
Expand Down Expand Up @@ -167,6 +166,9 @@ class Overview extends React.Component<{}, OverviewState> {
</Stack>
</div>
</Stack>
<div className='overviewChart'>
<Accuracy accuracyData={accuracyGraphData} accNodata={noDataMessage} />
</div>
<SuccessTable trialIds={bestTrials.map(trial => trial.info.trialJobId)} />
</div>
<div className='overviewCommand1'>
Expand All @@ -175,24 +177,6 @@ class Overview extends React.Component<{}, OverviewState> {
<div className='overviewCommand2'>
<Command2 />
</div>
<div className='overviewChart'>
<Stack horizontal>
<div style={itemStyle1}>
<TitleContext.Provider
value={{ text: 'Trial metric chart', icon: 'HomeGroup' }}
>
<Title />
</TitleContext.Provider>
</div>
<div style={itemStyle2}>
<Stack className='maxmin' horizontal>
<div className='circle' />
<div>{`Top ${this.context.metricGraphMode}imal trials`}</div>
</Stack>
</div>
</Stack>
<Accuracy accuracyData={accuracyGraphData} accNodata={noDataMessage} height={380} />
</div>
</div>
</div>
);
Expand All @@ -219,8 +203,8 @@ class Overview extends React.Component<{}, OverviewState> {
return {
// support max show 0.0000000
grid: {
left: 67,
right: 40
x: 60,
y: 40
},
tooltip: {
trigger: 'item'
Expand Down
14 changes: 3 additions & 11 deletions ts/webui/src/components/overview/Accuracy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import 'echarts/lib/component/title';
interface AccuracyProps {
accuracyData: object;
accNodata: string;
height: number;
}

class Accuracy extends React.Component<AccuracyProps, {}> {
Expand All @@ -20,17 +19,10 @@ class Accuracy extends React.Component<AccuracyProps, {}> {
}

render(): React.ReactNode {
const { accNodata, accuracyData, height } = this.props;
const { accNodata, accuracyData } = this.props;
return (
<div style={{ position: 'relative' }}>
<ReactEcharts
option={accuracyData}
style={{
height: height,
margin: '0 auto'
}}
theme='my_theme'
/>
<div className='defaultMetricContainer'>
<ReactEcharts option={accuracyData} theme='my_theme' />
<div className='showMess'>{accNodata}</div>
</div>
);
Expand Down
10 changes: 7 additions & 3 deletions ts/webui/src/components/overview/count/ExpDuration.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { convertDuration, convertTimeAsUnit } from '../../../static/function';
import { EditExperimentParam } from './EditExperimentParam';
import { ExpDurationContext } from './ExpDurationContext';
import { EditExpeParamContext } from './context';
import { durationItem1, durationItem2 } from './commonStyle';
import { leftProgress, durationItem2, progressHeight } from './commonStyle';
import '../../../static/style/overview/count.scss';

export const ExpDuration = (): any => (
Expand All @@ -19,7 +19,7 @@ export const ExpDuration = (): any => (
const maxExecDurationStr = convertTimeAsUnit(maxDurationUnit, maxExecDuration).toString();
return (
<Stack horizontal className='ExpDuration'>
<div style={durationItem1}>
<div style={leftProgress}>
<TooltipHost
content={`${convertDuration(tooltip)} remaining`}
directionalHint={DirectionalHint.bottomCenter}
Expand All @@ -33,7 +33,11 @@ export const ExpDuration = (): any => (
}
}}
>
<ProgressIndicator className={EXPERIMENT.status} percentComplete={percent} barHeight={15} />
<ProgressIndicator
className={EXPERIMENT.status}
percentComplete={percent}
barHeight={progressHeight}
/>
</TooltipHost>
{/* execDuration / maxDuration: 20min / 1h */}
<div className='exp-progress'>
Expand Down
10 changes: 5 additions & 5 deletions ts/webui/src/components/overview/count/TrialCount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { CONTROLTYPE, TOOLTIP_BACKGROUND_COLOR, MAX_TRIAL_NUMBERS } from '../../
import { EditExperimentParam } from './EditExperimentParam';
import { EditExpeParamContext } from './context';
import { ExpDurationContext } from './ExpDurationContext';
import { trialCountItem1, trialCountItem2 } from './commonStyle';
import { leftProgress, trialCountItem2, progressHeight } from './commonStyle';

export const TrialCount = (): any => {
const count = TRIALS.countStatus();
Expand All @@ -23,9 +23,9 @@ export const TrialCount = (): any => {
return (
<React.Fragment>
<Stack horizontal horizontalAlign='space-between' className='ExpDuration'>
<div style={trialCountItem1}>
<div style={leftProgress}>
<TooltipHost
content={bar2.toString()}
content={`${bar2.toString()} trials`}
directionalHint={DirectionalHint.bottomCenter}
tooltipProps={{
calloutProps: {
Expand All @@ -40,7 +40,7 @@ export const TrialCount = (): any => {
<ProgressIndicator
className={EXPERIMENT.status}
percentComplete={bar2Percent}
barHeight={15}
barHeight={progressHeight}
/>
</TooltipHost>
<div className='exp-progress'>
Expand Down Expand Up @@ -81,7 +81,7 @@ export const TrialCount = (): any => {
</EditExpeParamContext.Provider>
</div>
</Stack>
<Stack horizontal horizontalAlign='space-between' className='mess'>
<Stack horizontal horizontalAlign='space-between' className='trialStatus'>
<div className='basic'>
<p>Running</p>
<div>{count.get('RUNNING')}</div>
Expand Down
17 changes: 8 additions & 9 deletions ts/webui/src/components/overview/count/commonStyle.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
const durationItem1: React.CSSProperties = {
width: '33%'
const leftProgress: React.CSSProperties = {
width: '33%',
position: 'relative',
top: 6
};
const durationItem2: React.CSSProperties = {
width: '52%',
width: '51.5%',
paddingLeft: '15%'
};

const trialCountItem1: React.CSSProperties = {
width: '33%'
};
const trialCountItem2: React.CSSProperties = {
width: '52%'
width: '51.5%'
};

export { durationItem1, durationItem2, trialCountItem1, trialCountItem2 };
const progressHeight = 8;
export { leftProgress, durationItem2, trialCountItem2, progressHeight };
Loading