From 792ba904656a945712bd6bafc4c8262c37933f10 Mon Sep 17 00:00:00 2001 From: Lijiao Date: Tue, 8 Jun 2021 09:26:18 +0000 Subject: [PATCH 1/6] update --- ts/webui/.eslintrc | 1 + ts/webui/src/components/modals/Compare.tsx | 44 ++++++++++++++++--- .../src/components/trial-detail/TableList.tsx | 1 + ts/webui/src/static/const.ts | 3 +- 4 files changed, 43 insertions(+), 6 deletions(-) diff --git a/ts/webui/.eslintrc b/ts/webui/.eslintrc index e220b1f541..285bf34790 100644 --- a/ts/webui/.eslintrc +++ b/ts/webui/.eslintrc @@ -32,6 +32,7 @@ "arrow-parens": [2, "as-needed"], "no-inner-declarations": 0, "no-empty": 2, + "no-console": 0, "no-multiple-empty-lines": [2, { "max": 1 }], "react/display-name": 0 }, diff --git a/ts/webui/src/components/modals/Compare.tsx b/ts/webui/src/components/modals/Compare.tsx index 4c49a85de8..a0eed8c067 100644 --- a/ts/webui/src/components/modals/Compare.tsx +++ b/ts/webui/src/components/modals/Compare.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { renderToString } from 'react-dom/server'; -import { Stack, Modal, IconButton, IDragOptions, ContextualMenu } from '@fluentui/react'; +import { Stack, Modal, IconButton, IDragOptions, ContextualMenu, Dropdown, IDropdownOption } from '@fluentui/react'; import ReactEcharts from 'echarts-for-react'; import { TooltipForIntermediate, TableObj, SingleAxis } from '../../static/interface'; import { contentStyles, iconButtonStyles } from '../buttons/ModalTheme'; @@ -20,7 +20,8 @@ const dragOptions: IDragOptions = { // TODO: this should be refactored to the common modules // copied from trial.ts -function _parseIntermediates(trial: TableObj): number[] { +// key: intermdediate dict key +function _parseIntermediates(trial: TableObj, key: string): number[] { const intermediates: number[] = []; for (const metric of trial.intermediates) { if (metric === undefined) { @@ -29,7 +30,8 @@ function _parseIntermediates(trial: TableObj): number[] { const parsedMetric = parseMetrics(metric.data); if (typeof parsedMetric === 'object') { // TODO: should handle more types of metric keys - intermediates.push(parsedMetric.default); + intermediates.push(parsedMetric[key]); + // intermediates.push(parsedMetric.default); } else { intermediates.push(parsedMetric); } @@ -54,9 +56,19 @@ interface CompareProps { changeSelectTrialIds?: () => void; } -class Compare extends React.Component { +interface CompareState { + intermediateKey: string; // default, dict other keys + intermediateAllKeysList: string[]; +} + +class Compare extends React.Component { constructor(props: CompareProps) { super(props); + + this.state = { + intermediateKey: 'default', + intermediateAllKeysList: [] + }; } private _generateTooltipSummary = (row: Item, value: string): string => @@ -206,8 +218,15 @@ class Compare extends React.Component { onHideDialog(); }; + private selectOtherKeys = (_event: React.FormEvent, item?: IDropdownOption): void => { + if (item !== undefined) { + const value = item.text; + console.info(value); + } + }; render(): React.ReactNode { const { trials, title, showDetails } = this.props; + const { intermediateKey, intermediateAllKeysList } = this.state; const flatten = (m: Map): Map => { return new Map(Array.from(m).map(([key, value]) => [key.baseName, value])); }; @@ -218,7 +237,7 @@ class Compare extends React.Component { duration: convertDuration(trial.duration), parameters: flatten(trial.parameters(inferredSearchSpace)), metrics: flatten(trial.metrics(TRIALS.inferredMetricSpace())), - intermediates: _parseIntermediates(trial) + intermediates: _parseIntermediates(trial, intermediateKey) })); return ( @@ -240,6 +259,21 @@ class Compare extends React.Component { onClick={this.closeCompareModal} /> + {intermediateAllKeysList.length > 1 ? ( + + { + return { + key: key, + text: intermediateAllKeysList[item] + }; + })} + onChange={this.selectOtherKeys} + /> + + ) : null} {this._intermediates(items)} # Intermediate result diff --git a/ts/webui/src/components/trial-detail/TableList.tsx b/ts/webui/src/components/trial-detail/TableList.tsx index e25da074fb..259550b1a5 100644 --- a/ts/webui/src/components/trial-detail/TableList.tsx +++ b/ts/webui/src/components/trial-detail/TableList.tsx @@ -492,6 +492,7 @@ class TableList extends React.Component { searchItems } = this.state; + console.info([intermediateDialogTrial]); return (
diff --git a/ts/webui/src/static/const.ts b/ts/webui/src/static/const.ts index 127b60f229..9dbbb7b167 100644 --- a/ts/webui/src/static/const.ts +++ b/ts/webui/src/static/const.ts @@ -6,7 +6,8 @@ const METRIC_GROUP_UPDATE_SIZE = 20; const prefix = getPrefix(); const RESTAPI = '/api/v1/nni'; -const MANAGER_IP = prefix === undefined ? RESTAPI : `${prefix}${RESTAPI}`; +const MANAGER_IP = + prefix === undefined ? `http://13.77.78.63:9880${RESTAPI}` : `http://13.77.78.63:9880${prefix}${RESTAPI}`; const DOWNLOAD_IP = `/logs`; const WEBUIDOC = 'https://nni.readthedocs.io/en/latest/Tutorial/WebUI.html'; From ac3890ba7a3a8ff475c78b93ffe52b078ae03b15 Mon Sep 17 00:00:00 2001 From: Lijiao Date: Wed, 16 Jun 2021 02:44:49 +0000 Subject: [PATCH 2/6] update --- ts/webui/src/components/modals/Compare.tsx | 35 +++++++++++++------ .../src/components/trial-detail/TableList.tsx | 2 ++ ts/webui/src/static/style/search.scss | 3 +- 3 files changed, 29 insertions(+), 11 deletions(-) diff --git a/ts/webui/src/components/modals/Compare.tsx b/ts/webui/src/components/modals/Compare.tsx index a0eed8c067..cfc3736ec4 100644 --- a/ts/webui/src/components/modals/Compare.tsx +++ b/ts/webui/src/components/modals/Compare.tsx @@ -12,15 +12,8 @@ function _getWebUIWidth(): number { return window.innerWidth; } -const dragOptions: IDragOptions = { - moveMenuItemText: 'Move', - closeMenuItemText: 'Close', - menu: ContextualMenu -}; - // TODO: this should be refactored to the common modules // copied from trial.ts -// key: intermdediate dict key function _parseIntermediates(trial: TableObj, key: string): number[] { const intermediates: number[] = []; for (const metric of trial.intermediates) { @@ -31,7 +24,6 @@ function _parseIntermediates(trial: TableObj, key: string): number[] { if (typeof parsedMetric === 'object') { // TODO: should handle more types of metric keys intermediates.push(parsedMetric[key]); - // intermediates.push(parsedMetric.default); } else { intermediates.push(parsedMetric); } @@ -39,6 +31,12 @@ function _parseIntermediates(trial: TableObj, key: string): number[] { return intermediates; } +const dragOptions: IDragOptions = { + moveMenuItemText: 'Move', + closeMenuItemText: 'Close', + menu: ContextualMenu +}; + interface Item { id: string; sequenceId: number; @@ -220,10 +218,27 @@ class Compare extends React.Component { private selectOtherKeys = (_event: React.FormEvent, item?: IDropdownOption): void => { if (item !== undefined) { - const value = item.text; - console.info(value); + this.setState(() => ({ intermediateKey: item.text })); } }; + + componentDidMount(): void { + const { trials } = this.props; + const a = trials[0].intermediates as any; + const parsedMetric = parseMetrics(a.data); + if (typeof parsedMetric === 'object') { + const allIntermediateKeys: string[] = []; + // just add type=number keys + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + for (const key in parsedMetric) { + if (typeof parsedMetric[key] === 'number') { + allIntermediateKeys.push(key); + } + } + this.setState(() => ({ intermediateAllKeysList: allIntermediateKeys })); + } + } + render(): React.ReactNode { const { trials, title, showDetails } = this.props; const { intermediateKey, intermediateAllKeysList } = this.state; diff --git a/ts/webui/src/components/trial-detail/TableList.tsx b/ts/webui/src/components/trial-detail/TableList.tsx index 259550b1a5..ad024fdfb5 100644 --- a/ts/webui/src/components/trial-detail/TableList.tsx +++ b/ts/webui/src/components/trial-detail/TableList.tsx @@ -429,11 +429,13 @@ class TableList extends React.Component { private _renderOperationColumn(record: any): React.ReactNode { const runningTrial: boolean = ['RUNNING', 'UNKNOWN'].includes(record.status) ? false : true; const disabledAddCustomizedTrial = ['DONE', 'ERROR', 'STOPPED', 'VIEWED'].includes(EXPERIMENT.status); + const disableIntermediateBtn = ['WAITING'].includes(EXPERIMENT.status); return ( { const { tableSource } = this.props; const trial = tableSource.find(trial => trial.id === record.id) as TableObj; diff --git a/ts/webui/src/static/style/search.scss b/ts/webui/src/static/style/search.scss index 9ad10b3473..b4dfc0dd56 100644 --- a/ts/webui/src/static/style/search.scss +++ b/ts/webui/src/static/style/search.scss @@ -20,7 +20,8 @@ .selectKeys { /* intermediate result is dict, select box for keys */ .select { - margin-right: 12%; + margin-right: 6%; + margin-bottom: 15px; } .ms-Dropdown { From 2a7a437afb2cf757ffa395aacd9994b7e1c73dc7 Mon Sep 17 00:00:00 2001 From: Lijiao Date: Thu, 1 Jul 2021 06:29:57 +0000 Subject: [PATCH 3/6] update --- ts/webui/src/components/modals/Compare.tsx | 56 ++++++++++++++-------- 1 file changed, 36 insertions(+), 20 deletions(-) diff --git a/ts/webui/src/components/modals/Compare.tsx b/ts/webui/src/components/modals/Compare.tsx index cfc3736ec4..00623347aa 100644 --- a/ts/webui/src/components/modals/Compare.tsx +++ b/ts/webui/src/components/modals/Compare.tsx @@ -56,7 +56,7 @@ interface CompareProps { interface CompareState { intermediateKey: string; // default, dict other keys - intermediateAllKeysList: string[]; + // intermediateAllKeysList: string[]; } class Compare extends React.Component { @@ -64,8 +64,8 @@ class Compare extends React.Component { super(props); this.state = { - intermediateKey: 'default', - intermediateAllKeysList: [] + intermediateKey: 'default' + // intermediateAllKeysList: [] }; } @@ -222,26 +222,27 @@ class Compare extends React.Component { } }; - componentDidMount(): void { - const { trials } = this.props; - const a = trials[0].intermediates as any; - const parsedMetric = parseMetrics(a.data); - if (typeof parsedMetric === 'object') { - const allIntermediateKeys: string[] = []; - // just add type=number keys - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - for (const key in parsedMetric) { - if (typeof parsedMetric[key] === 'number') { - allIntermediateKeys.push(key); - } - } - this.setState(() => ({ intermediateAllKeysList: allIntermediateKeys })); - } - } + // componentDidMount(): void { + // const { trials } = this.props; + // const a = trials[0].intermediates as any; + // const parsedMetric = parseMetrics(a[0].data); + // if (parsedMetric !== undefined && typeof parsedMetric === 'object') { + // const allIntermediateKeys: string[] = []; + // // just add type=number keys + // // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + // for (const key in parsedMetric) { + // if (typeof parsedMetric[key] === 'number') { + // allIntermediateKeys.push(key); + // } + // } + // this.setState(() => ({ intermediateAllKeysList: allIntermediateKeys })); + // } + // } render(): React.ReactNode { const { trials, title, showDetails } = this.props; - const { intermediateKey, intermediateAllKeysList } = this.state; + const { intermediateKey } = this.state; + // const { intermediateKey, intermediateAllKeysList } = this.state; const flatten = (m: Map): Map => { return new Map(Array.from(m).map(([key, value]) => [key.baseName, value])); }; @@ -255,6 +256,21 @@ class Compare extends React.Component { intermediates: _parseIntermediates(trial, intermediateKey) })); + let intermediateAllKeysList: string[] = []; + if (trials[0].intermediates !== undefined && trials[0].intermediates[0]) { + const parsedMetric = parseMetrics(trials[0].intermediates[0].data); + if (parsedMetric !== undefined && typeof parsedMetric === 'object') { + const allIntermediateKeys: string[] = []; + // just add type=number keys + for (const key in parsedMetric) { + if (typeof parsedMetric[key] === 'number') { + allIntermediateKeys.push(key); + } + } + intermediateAllKeysList = allIntermediateKeys; + } + } + return ( Date: Thu, 1 Jul 2021 06:49:26 +0000 Subject: [PATCH 4/6] fix lint --- ts/webui/.eslintrc | 1 - ts/webui/scripts/start.js | 2 +- ts/webui/src/components/modals/Compare.tsx | 39 ++++++------------- .../src/components/trial-detail/TableList.tsx | 3 -- ts/webui/src/static/const.ts | 3 +- 5 files changed, 15 insertions(+), 33 deletions(-) diff --git a/ts/webui/.eslintrc b/ts/webui/.eslintrc index 285bf34790..e220b1f541 100644 --- a/ts/webui/.eslintrc +++ b/ts/webui/.eslintrc @@ -32,7 +32,6 @@ "arrow-parens": [2, "as-needed"], "no-inner-declarations": 0, "no-empty": 2, - "no-console": 0, "no-multiple-empty-lines": [2, { "max": 1 }], "react/display-name": 0 }, diff --git a/ts/webui/scripts/start.js b/ts/webui/scripts/start.js index 5daa8c24e7..8c2257b9b0 100644 --- a/ts/webui/scripts/start.js +++ b/ts/webui/scripts/start.js @@ -41,7 +41,7 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { } // Tools like Cloud9 rely on this. -const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 8000; +const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 8900; const HOST = process.env.HOST || '0.0.0.0'; if (process.env.HOST) { diff --git a/ts/webui/src/components/modals/Compare.tsx b/ts/webui/src/components/modals/Compare.tsx index 00623347aa..bdaf70a959 100644 --- a/ts/webui/src/components/modals/Compare.tsx +++ b/ts/webui/src/components/modals/Compare.tsx @@ -56,7 +56,6 @@ interface CompareProps { interface CompareState { intermediateKey: string; // default, dict other keys - // intermediateAllKeysList: string[]; } class Compare extends React.Component { @@ -65,7 +64,6 @@ class Compare extends React.Component { this.state = { intermediateKey: 'default' - // intermediateAllKeysList: [] }; } @@ -222,27 +220,11 @@ class Compare extends React.Component { } }; - // componentDidMount(): void { - // const { trials } = this.props; - // const a = trials[0].intermediates as any; - // const parsedMetric = parseMetrics(a[0].data); - // if (parsedMetric !== undefined && typeof parsedMetric === 'object') { - // const allIntermediateKeys: string[] = []; - // // just add type=number keys - // // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - // for (const key in parsedMetric) { - // if (typeof parsedMetric[key] === 'number') { - // allIntermediateKeys.push(key); - // } - // } - // this.setState(() => ({ intermediateAllKeysList: allIntermediateKeys })); - // } - // } - render(): React.ReactNode { const { trials, title, showDetails } = this.props; const { intermediateKey } = this.state; - // const { intermediateKey, intermediateAllKeysList } = this.state; + let intermediateAllKeysList: string[] = []; + const flatten = (m: Map): Map => { return new Map(Array.from(m).map(([key, value]) => [key.baseName, value])); }; @@ -256,7 +238,6 @@ class Compare extends React.Component { intermediates: _parseIntermediates(trial, intermediateKey) })); - let intermediateAllKeysList: string[] = []; if (trials[0].intermediates !== undefined && trials[0].intermediates[0]) { const parsedMetric = parseMetrics(trials[0].intermediates[0].data); if (parsedMetric !== undefined && typeof parsedMetric === 'object') { @@ -295,12 +276,16 @@ class Compare extends React.Component { { - return { - key: key, - text: intermediateAllKeysList[item] - }; - })} + options={intermediateAllKeysList.map((key, item) => ({ + key: key, + text: intermediateAllKeysList[item] + }))} + // options={intermediateAllKeysList.map((key, item) => { + // return { + // key: key, + // text: intermediateAllKeysList[item] + // }; + // })} onChange={this.selectOtherKeys} /> diff --git a/ts/webui/src/components/trial-detail/TableList.tsx b/ts/webui/src/components/trial-detail/TableList.tsx index ad024fdfb5..e25da074fb 100644 --- a/ts/webui/src/components/trial-detail/TableList.tsx +++ b/ts/webui/src/components/trial-detail/TableList.tsx @@ -429,13 +429,11 @@ class TableList extends React.Component { private _renderOperationColumn(record: any): React.ReactNode { const runningTrial: boolean = ['RUNNING', 'UNKNOWN'].includes(record.status) ? false : true; const disabledAddCustomizedTrial = ['DONE', 'ERROR', 'STOPPED', 'VIEWED'].includes(EXPERIMENT.status); - const disableIntermediateBtn = ['WAITING'].includes(EXPERIMENT.status); return ( { const { tableSource } = this.props; const trial = tableSource.find(trial => trial.id === record.id) as TableObj; @@ -494,7 +492,6 @@ class TableList extends React.Component { searchItems } = this.state; - console.info([intermediateDialogTrial]); return (
diff --git a/ts/webui/src/static/const.ts b/ts/webui/src/static/const.ts index 9dbbb7b167..1a0fedae8b 100644 --- a/ts/webui/src/static/const.ts +++ b/ts/webui/src/static/const.ts @@ -6,8 +6,9 @@ const METRIC_GROUP_UPDATE_SIZE = 20; const prefix = getPrefix(); const RESTAPI = '/api/v1/nni'; + const MANAGER_IP = - prefix === undefined ? `http://13.77.78.63:9880${RESTAPI}` : `http://13.77.78.63:9880${prefix}${RESTAPI}`; + prefix === undefined ? `http://13.77.78.63:8088${RESTAPI}` : `http://13.77.78.63:8088${prefix}${RESTAPI}`; const DOWNLOAD_IP = `/logs`; const WEBUIDOC = 'https://nni.readthedocs.io/en/latest/Tutorial/WebUI.html'; From a09dca886f8fa201aabf1d4458a95ef2dce191d7 Mon Sep 17 00:00:00 2001 From: Lijiao Date: Thu, 1 Jul 2021 07:06:57 +0000 Subject: [PATCH 5/6] update --- ts/webui/scripts/start.js | 2 +- ts/webui/src/components/modals/Compare.tsx | 23 +++++++++++----------- 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/ts/webui/scripts/start.js b/ts/webui/scripts/start.js index 8c2257b9b0..5daa8c24e7 100644 --- a/ts/webui/scripts/start.js +++ b/ts/webui/scripts/start.js @@ -41,7 +41,7 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { } // Tools like Cloud9 rely on this. -const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 8900; +const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 8000; const HOST = process.env.HOST || '0.0.0.0'; if (process.env.HOST) { diff --git a/ts/webui/src/components/modals/Compare.tsx b/ts/webui/src/components/modals/Compare.tsx index bdaf70a959..ab059fe1b2 100644 --- a/ts/webui/src/components/modals/Compare.tsx +++ b/ts/webui/src/components/modals/Compare.tsx @@ -8,10 +8,21 @@ import { convertDuration, parseMetrics } from '../../static/function'; import { EXPERIMENT, TRIALS } from '../../static/datamodel'; import '../../static/style/compare.scss'; +/*** + * Compare file is design for [each trial intermediate result and trials compare function] + * if trial has dict intermediate result, graph support shows all keys that type is number + */ + function _getWebUIWidth(): number { return window.innerWidth; } +const dragOptions: IDragOptions = { + moveMenuItemText: 'Move', + closeMenuItemText: 'Close', + menu: ContextualMenu +}; + // TODO: this should be refactored to the common modules // copied from trial.ts function _parseIntermediates(trial: TableObj, key: string): number[] { @@ -31,12 +42,6 @@ function _parseIntermediates(trial: TableObj, key: string): number[] { return intermediates; } -const dragOptions: IDragOptions = { - moveMenuItemText: 'Move', - closeMenuItemText: 'Close', - menu: ContextualMenu -}; - interface Item { id: string; sequenceId: number; @@ -280,12 +285,6 @@ class Compare extends React.Component { key: key, text: intermediateAllKeysList[item] }))} - // options={intermediateAllKeysList.map((key, item) => { - // return { - // key: key, - // text: intermediateAllKeysList[item] - // }; - // })} onChange={this.selectOtherKeys} /> From 973e6b94f6ba98e2203fd947f76af0a4ffdfe282 Mon Sep 17 00:00:00 2001 From: Lijiao Date: Thu, 1 Jul 2021 07:31:51 +0000 Subject: [PATCH 6/6] update --- ts/webui/src/static/const.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/ts/webui/src/static/const.ts b/ts/webui/src/static/const.ts index 1a0fedae8b..127b60f229 100644 --- a/ts/webui/src/static/const.ts +++ b/ts/webui/src/static/const.ts @@ -6,9 +6,7 @@ const METRIC_GROUP_UPDATE_SIZE = 20; const prefix = getPrefix(); const RESTAPI = '/api/v1/nni'; - -const MANAGER_IP = - prefix === undefined ? `http://13.77.78.63:8088${RESTAPI}` : `http://13.77.78.63:8088${prefix}${RESTAPI}`; +const MANAGER_IP = prefix === undefined ? RESTAPI : `${prefix}${RESTAPI}`; const DOWNLOAD_IP = `/logs`; const WEBUIDOC = 'https://nni.readthedocs.io/en/latest/Tutorial/WebUI.html';