Skip to content

GitLab

"src/git@developer.sourcefind.cn:gaoqiong/migraphx.git" did not exist on "7eaffe8f417c5e2b92564fab455ceef6c742f94f"
Unverified Commit cbc6273a authored by Lijiaoa's avatar Lijiaoa Committed by GitHub
Browse files

fix bug and refactor tooltip component (#5062)

parent 588f299b
Show whitespace changes
Inline Side-by-side
Showing with 187 additions and 212 deletions
ts/webui/src/components/common/CopyButton.tsx
View file @ cbc6273a
import React, { useRef } from 'react';
import copy from 'copy-to-clipboard';
import { IconButton, FontSizes, TooltipHost } from '@fluentui/react';
import { TOOLTIP_BACKGROUND_COLOR } from '@static/const';
import { TOOLTIPSTYLE } from '@static/const';
interface CopyButtonProps {
value: string;
......@@ -38,15 +38,7 @@ const CopyButton = (props: CopyButtonProps): any => {
content='Copied'
componentRef={ref}
delay={0}
tooltipProps={{
calloutProps: {
styles: {
beak: { background: TOOLTIP_BACKGROUND_COLOR },
beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
}
}
}}
tooltipProps={TOOLTIPSTYLE}
/>
</div>
);
......
ts/webui/src/components/common/TooltipHostIndex.tsx 0 → 100644
View file @ cbc6273a
import * as React from 'react';
import { TOOLTIPSTYLE } from '@static/const';
import { DirectionalHint, TooltipHost } from '@fluentui/react';
interface TooltipHostIndexProps {
value: string;
}
const TooltipHostIndex = (props: TooltipHostIndexProps): any => {
const { value } = props;
const length = String(value).length;
return (
<>
{length >= 15 ? (
<div>
<TooltipHost
content={value}
directionalHint={DirectionalHint.bottomLeftEdge}
tooltipProps={TOOLTIPSTYLE}
>
<div className='ellipsis'>{value}</div>
</TooltipHost>
</div>
) : (
<div>{value}</div>
)}
</>
);
};
export default TooltipHostIndex;
ts/webui/src/components/experiment/overview/command/Command1.tsx → ts/webui/src/components/experiment/overview/Config.tsx
View file @ cbc6273a
import React from 'react';
import * as React from 'react';
import { Stack } from '@fluentui/react';
import { EXPERIMENT } from '@static/datamodel';
import { rightEidtParam } from '../count/commonStyle';
import { leftProgress, rightEditParam } from './count/commonStyle';
import TooltipHostIndex from '@components/common/TooltipHostIndex';
import '@style/experiment/overview/command.scss';
export const Command1 = (): any => {
// This file is for showing the experiment some important params,
// Log directory, trial command, training platform and tuner/advisor message
const Config = (): any => {
const tuner = EXPERIMENT.profile.params.tuner;
const advisor = EXPERIMENT.profile.params.advisor;
const assessor = EXPERIMENT.profile.params.assessor;
......@@ -25,7 +30,14 @@ export const Command1 = (): any => {
}
return (
<div className='basic' style={rightEidtParam}>
<Stack horizontal>
<div className='basic' style={leftProgress}>
<p className='command'>Log directory</p>
<TooltipHostIndex value={EXPERIMENT.profile.logDir || 'unknown'} />
<p className='lineMargin'>Trial command</p>
<TooltipHostIndex value={EXPERIMENT.config.trialCommand || 'unknown'} />
</div>
<div className='basic' style={rightEditParam}>
<div>
<p className='command'>Training platform</p>
<div className='ellipsis'>{EXPERIMENT.trainingServicePlatform}</div>
......@@ -33,5 +45,8 @@ export const Command1 = (): any => {
<div className='ellipsis'>{builtinName.join('/')}</div>
</div>
</div>
</Stack>
);
};
export default Config;
ts/webui/src/components/experiment/overview/Overview.tsx
View file @ cbc6273a
......@@ -10,8 +10,7 @@ import { BasicInfo } from './params/BasicInfo';
import { ExpDuration } from './count/ExpDuration';
import { ExpDurationContext } from './count/ExpDurationContext';
import { TrialCount } from './count/TrialCount';
import { Command1 } from './command/Command1';
import { Command2 } from './command/Command2';
import Config from './Config';
import { TitleContext } from './TitleContext';
import { itemStyleSucceed, entriesOption } from './overviewConst';
import '@style/experiment/overview/overview.scss';
......@@ -185,9 +184,8 @@ class Overview extends React.Component<{}, OverviewState> {
/>
</div>
</div>
<Stack className='overviewCommand' horizontal>
<Command2 />
<Command1 />
<Stack className='overviewCommand'>
<Config />
</Stack>
</div>
</div>
......
ts/webui/src/components/experiment/overview/command/Command2.tsx deleted 100644 → 0
View file @ 588f299b
import React from 'react';
import { TooltipHost, DirectionalHint } from '@fluentui/react';
import { EXPERIMENT } from '@static/datamodel';
import { leftProgress } from '../count/commonStyle';
import { TOOLTIP_BACKGROUND_COLOR } from '@static/const';
import '@style/experiment/overview/command.scss';
export const Command2 = (): any => {
return (
<div className='basic' style={leftProgress}>
<p className='command'>Log directory</p>
<div className='ellipsis'>
<TooltipHost
content={EXPERIMENT.profile.logDir || 'unknown'}
className='ellipsis'
directionalHint={DirectionalHint.bottomCenter}
tooltipProps={{
calloutProps: {
styles: {
beak: { background: TOOLTIP_BACKGROUND_COLOR },
beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
}
}
}}
>
{EXPERIMENT.profile.logDir || 'unknown'}
</TooltipHost>
</div>
<p className='lineMargin'>Trial command</p>
<div className='ellipsis'>
<TooltipHost
content={EXPERIMENT.config.trialCommand || 'unknown'}
className='ellipsis'
directionalHint={DirectionalHint.bottomCenter}
tooltipProps={{
calloutProps: {
styles: {
beak: { background: TOOLTIP_BACKGROUND_COLOR },
beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
}
}
}}
>
{EXPERIMENT.config.trialCommand || 'unknown'}
</TooltipHost>
</div>
</div>
);
};
ts/webui/src/components/experiment/overview/count/ExpDuration.tsx
View file @ cbc6273a
import React from 'react';
import { Stack, ProgressIndicator, TooltipHost, DirectionalHint } from '@fluentui/react';
import { EXPERIMENT } from '@static/datamodel';
import { CONTROLTYPE, TOOLTIP_BACKGROUND_COLOR } from '@static/const';
import { CONTROLTYPE } from '@static/const';
import { convertDuration, convertTimeAsUnit } from '@static/function';
import { EditExperimentParam } from './EditExperimentParam';
import { ExpDurationContext } from './ExpDurationContext';
import ProgressBar from './ProgressBar';
import { EditExpeParamContext } from './context';
import { leftProgress, rightEidtParam, progressHeight } from './commonStyle';
import '@style/experiment/overview/count.scss';
export const ExpDuration = (): any => (
......@@ -18,35 +17,14 @@ export const ExpDuration = (): any => (
const execDurationStr = convertDuration(execDuration);
const maxExecDurationStr = convertTimeAsUnit(maxDurationUnit, maxExecDuration).toString();
return (
<Stack horizontal className='ExpDuration'>
<div style={leftProgress}>
<TooltipHost
content={`${convertDuration(tooltip)} remaining`}
directionalHint={DirectionalHint.bottomCenter}
tooltipProps={{
calloutProps: {
styles: {
beak: { background: TOOLTIP_BACKGROUND_COLOR },
beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
}
}
}}
>
<ProgressIndicator
className={EXPERIMENT.status}
percentComplete={percent}
barHeight={progressHeight}
<React.Fragment>
<ProgressBar
tooltip={`${convertDuration(tooltip)} remaining`}
percent={percent}
latestVal={execDurationStr}
presetVal={`${maxExecDurationStr} ${maxDurationUnit}`}
/>
</TooltipHost>
{/* execDuration / maxDuration: 20min / 1h */}
<div className='exp-progress'>
<span className={`${EXPERIMENT.status} bold`}>{execDurationStr}</span>
<span className='joiner'>/</span>
<span>{`${maxExecDurationStr} ${maxDurationUnit}`}</span>
</div>
</div>
<div style={rightEidtParam}>
<div className='editExpDuration'>
<EditExpeParamContext.Provider
value={{
editType: CONTROLTYPE[0],
......@@ -61,7 +39,7 @@ export const ExpDuration = (): any => (
<EditExperimentParam />
</EditExpeParamContext.Provider>
</div>
</Stack>
</React.Fragment>
);
}}
</ExpDurationContext.Consumer>
......
ts/webui/src/components/experiment/overview/count/ProgressBar.tsx 0 → 100644
View file @ cbc6273a
import React from 'react';
import { Stack, ProgressIndicator, TooltipHost, DirectionalHint } from '@fluentui/react';
import { EXPERIMENT } from '@static/datamodel';
import { TOOLTIPSTYLE } from '@static/const';
import { leftProgress, progressHeight } from './commonStyle';
import '@style/experiment/overview/count.scss';
interface ProgressBarProps {
tooltip: string;
percent: number;
latestVal: string;
presetVal: string;
}
const ProgressBar = (props: ProgressBarProps): any => {
const { tooltip, percent, latestVal, presetVal } = props;
return (
<Stack horizontal className='marginTop'>
<div style={leftProgress}>
<TooltipHost
content={tooltip}
directionalHint={DirectionalHint.bottomCenter}
tooltipProps={TOOLTIPSTYLE}
>
<ProgressIndicator
className={EXPERIMENT.status}
percentComplete={percent}
barHeight={progressHeight}
/>
</TooltipHost>
<div className='exp-progress'>
<span className={`${EXPERIMENT.status} bold`}>{latestVal}</span>
<span className='joiner'>/</span>
<span>{presetVal}</span>
</div>
</div>
</Stack>
);
};
export default ProgressBar;
ts/webui/src/components/experiment/overview/count/TrialCount.tsx
View file @ cbc6273a
import * as React from 'react';
import { Stack, TooltipHost, ProgressIndicator, DirectionalHint, IStackTokens } from '@fluentui/react';
import { Stack, IStackTokens } from '@fluentui/react';
import { EXPERIMENT, TRIALS } from '@static/datamodel';
import { CONTROLTYPE, TOOLTIP_BACKGROUND_COLOR, MAX_TRIAL_NUMBERS } from '@static/const';
import { CONTROLTYPE, MAX_TRIAL_NUMBERS } from '@static/const';
import { EditExperimentParam } from './EditExperimentParam';
import ProgressBar from './ProgressBar';
import { EditExpeParamContext } from './context';
import { ExpDurationContext } from './ExpDurationContext';
import { leftProgress, rightEidtParam, progressHeight } from './commonStyle';
import { leftProgress, rightEditParam } from './commonStyle';
const line1Tokens: IStackTokens = {
childrenGap: 60
......@@ -29,34 +30,12 @@ export const TrialCount = (): any => {
const { updateOverviewPage } = value;
return (
<React.Fragment>
<Stack horizontal className='ExpDuration'>
<div style={leftProgress}>
<TooltipHost
content={`${bar2.toString()} trials`}
directionalHint={DirectionalHint.bottomCenter}
tooltipProps={{
calloutProps: {
styles: {
beak: { background: TOOLTIP_BACKGROUND_COLOR },
beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
}
}
}}
>
<ProgressIndicator
className={EXPERIMENT.status}
percentComplete={bar2Percent}
barHeight={progressHeight}
<ProgressBar
tooltip={`${bar2.toString()} trials`}
percent={bar2Percent}
latestVal={String(bar2)}
presetVal={String(maxTrialNum)}
/>
</TooltipHost>
<div className='exp-progress'>
<span className={`${EXPERIMENT.status} bold`}>{bar2}</span>
<span className='joiner'>/</span>
<span>{maxTrialNum}</span>
</div>
</div>
</Stack>
<Stack horizontal className='marginTop'>
<div style={leftProgress}>
<Stack horizontal className='status-count' tokens={line1Tokens}>
......@@ -85,7 +64,7 @@ export const TrialCount = (): any => {
</Stack>
</div>
<div style={rightEidtParam}>
<div style={rightEditParam}>
<EditExpeParamContext.Provider
value={{
title: MAX_TRIAL_NUMBERS,
......
ts/webui/src/components/experiment/overview/count/commonStyle.ts
View file @ cbc6273a
......@@ -2,11 +2,11 @@ const leftProgress: React.CSSProperties = {
width: '60%',
position: 'relative'
};
const rightEidtParam: React.CSSProperties = {
const rightEditParam: React.CSSProperties = {
paddingLeft: '9%',
boxSizing: 'border-box'
};
const progressHeight = 8;
export { leftProgress, rightEidtParam, progressHeight };
export { leftProgress, rightEditParam, progressHeight };
ts/webui/src/components/experiment/trialdetail/table/TableList.tsx
View file @ cbc6273a
import React from 'react';
import {
DefaultButton,
IColumn,
Icon,
PrimaryButton,
Stack,
StackItem,
TooltipHost,
DirectionalHint,
Checkbox
} from '@fluentui/react';
import { DefaultButton, IColumn, Icon, PrimaryButton, Stack, StackItem, Checkbox } from '@fluentui/react';
import { Trial } from '@model/trial';
import { TOOLTIP_BACKGROUND_COLOR } from '@static/const';
import { EXPERIMENT, TRIALS } from '@static/datamodel';
import { convertDuration, formatTimestamp, copyAndSort, parametersType, _inferColumnTitle } from '@static/function';
import { SortInfo, SearchItems } from '@static/interface';
......@@ -26,6 +15,7 @@ import KillJobIndex from './tableFunction/killJob/KillJobIndex';
import { getTrialsBySearchFilters } from './tableFunction/search/searchFunction';
import PaginationTable from '@components/common/PaginationTable';
import CopyButton from '@components/common/CopyButton';
import TooltipHostIndex from '@components/common/TooltipHostIndex';
require('echarts/lib/chart/line');
require('echarts/lib/component/tooltip');
......@@ -380,66 +370,15 @@ class TableList extends React.Component<TableListProps, TableListState> {
)
}),
...(k === 'message' && {
onRender: (record): React.ReactNode =>
record.message.length > 15 ? (
<TooltipHost
content={record.message}
directionalHint={DirectionalHint.bottomCenter}
tooltipProps={{
calloutProps: {
styles: {
beak: { background: TOOLTIP_BACKGROUND_COLOR },
beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
}
}
}}
>
<div>{record.message}</div>
</TooltipHost>
) : (
<div>{record.message}</div>
)
onRender: (record): React.ReactNode => <TooltipHostIndex value={record.message} />
}),
...((k.startsWith('metric/') || k.startsWith('space/')) && {
// show tooltip
onRender: (record): React.ReactNode => (
<TooltipHost
content={record[k]}
directionalHint={DirectionalHint.bottomCenter}
tooltipProps={{
calloutProps: {
styles: {
beak: { background: TOOLTIP_BACKGROUND_COLOR },
beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
}
}
}}
>
<div className='ellipsis'>{record[k]}</div>
</TooltipHost>
)
onRender: (record): React.ReactNode => <TooltipHostIndex value={record[k]} />
}),
...(k === 'latestAccuracy' && {
// FIXME: this is ad-hoc
onRender: (record): React.ReactNode => (
<TooltipHost
content={record._formattedLatestAccuracy}
directionalHint={DirectionalHint.bottomCenter}
tooltipProps={{
calloutProps: {
styles: {
beak: { background: TOOLTIP_BACKGROUND_COLOR },
beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
}
}
}}
>
<div className='ellipsis'>{record.formattedLatestAccuracy}</div>
</TooltipHost>
)
onRender: (record): React.ReactNode => <TooltipHostIndex value={record._formattedLatestAccuracy} />
}),
...(['startTime', 'endTime'].includes(k) && {
onRender: (record): React.ReactNode => <span>{formatTimestamp(record[k], '--')}</span>
......
ts/webui/src/components/experimentManagement/FilterBtns.tsx
View file @ cbc6273a
......@@ -60,6 +60,7 @@ class FilterBtns extends React.Component<FilterBtnsProps, {}> {
ariaLabel='Select a date'
value={selectedStartDate}
onSelectDate={getSelectedData.bind(this, 'start')}
className='filter-condition-date'
/>
<DatePicker
label='End time'
......@@ -69,6 +70,7 @@ class FilterBtns extends React.Component<FilterBtnsProps, {}> {
ariaLabel='Select a date'
value={selectedEndDate}
onSelectDate={getSelectedData.bind(this, 'end')}
className='filter-condition-date'
/>
<DefaultButton onClick={setSearchSource.bind(this)} className='reset'>
<Icon iconName='Refresh' />
......
ts/webui/src/static/const.ts
View file @ cbc6273a
......@@ -70,6 +70,15 @@ const SUPPORTED_SEARCH_SPACE_TYPE = [
];
const TOOLTIP_BACKGROUND_COLOR = '#484848';
const TOOLTIPSTYLE = {
calloutProps: {
styles: {
beak: { background: TOOLTIP_BACKGROUND_COLOR },
beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
}
}
};
const MAX_TRIAL_NUMBERS = 'Max trial No.';
const RETIARIIPARAMETERS = 'mutation_summary';
......@@ -88,7 +97,7 @@ export {
METRIC_GROUP_UPDATE_SIZE,
CONCURRENCYTOOLTIP,
SUPPORTED_SEARCH_SPACE_TYPE,
TOOLTIP_BACKGROUND_COLOR,
TOOLTIPSTYLE,
MAX_TRIAL_NUMBERS,
RETIARIIPARAMETERS
};
ts/webui/src/static/interface.ts
View file @ cbc6273a
......@@ -27,7 +27,7 @@ interface MultipleAxes {
}
interface TableRecord {
key: string;
_key: string;
sequenceId: number;
startTime: number;
endTime?: number;
......@@ -37,7 +37,7 @@ interface TableRecord {
message: string;
intermediateCount: number;
latestAccuracy: number | undefined;
formattedLatestAccuracy: string; // format (LATEST/FINAL),
_formattedLatestAccuracy: string; // format (LATEST/FINAL),
}
interface SearchSpace {
......
ts/webui/src/static/model/trial.ts
View file @ cbc6273a
......@@ -184,7 +184,7 @@ class Trial {
const duration = (endTime - this.info.startTime!) / 1000;
return {
key: this.info.trialJobId,
_key: this.info.trialJobId,
sequenceId: this.info.sequenceId,
id: this.info.trialJobId,
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
......@@ -195,7 +195,7 @@ class Trial {
message: this.info.message ?? '--',
intermediateCount: this.intermediates.length,
latestAccuracy: this.latestAccuracy,
formattedLatestAccuracy: this.formatLatestAccuracy()
_formattedLatestAccuracy: this.formatLatestAccuracy()
};
}
......
ts/webui/src/static/style/experiment/overview/count.scss
View file @ cbc6273a
......@@ -5,14 +5,6 @@ $margin: 24px;
margin-top: $margin;
}
.ExpDuration {
margin-top: $margin;
.maxTrialNum {
margin-bottom: 10px;
}
}
.exp-progress {
margin-top: 9px;
......@@ -39,6 +31,7 @@ $margin: 24px;
}
.maxTrialNum {
margin-bottom: 10px;
.editparam {
position: relative;
top: -7px;
......@@ -55,6 +48,14 @@ $margin: 24px;
top: -4px;
}
.editExpDuration{
box-sizing: border-box;
width: 31%;
position: relative;
left: 69%;
bottom: 33%;
}
.concurrency {
.editparam {
margin-top: 5px;
......
ts/webui/src/static/style/experimentManagement/experiment.scss
View file @ cbc6273a
......@@ -59,6 +59,10 @@ $pageMargin: 24px;
&-platform {
width: 150px;
}
&-date {
width: 162px;
}
}
.hidden {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment