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

Upgrade echarts version to v5 #3457

Merged
merged 7 commits into from
Mar 29, 2021
Merged

Upgrade echarts version to v5 #3457

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
0d2d7c4
update
Mar 17, 2021
98a1179
update
Mar 17, 2021
16479a4
update
Mar 17, 2021
f8bf6e1
update
Mar 18, 2021
1900c06
fix lint
Mar 18, 2021
c69531a
Merge branch 'master' of https://github.com/Microsoft/nni into dev-up…
Mar 24, 2021
f9de225
update yarn.lock changes
Mar 24, 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
4 changes: 2 additions & 2 deletions ts/webui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
"d3": "^5.16.0",
"dotenv": "6.2.0",
"dotenv-expand": "4.2.0",
"echarts": "^4.5.0",
"echarts-for-react": "^2.0.15-beta.1",
"echarts": "^5.0",
"echarts-for-react": "3.0.0",
"file-loader": "3.0.1",
"fs-extra": "7.0.1",
"html-webpack-plugin": "4.0.0-beta.5",
Expand Down
25 changes: 11 additions & 14 deletions ts/webui/src/components/modals/Compare.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,13 +83,7 @@ class Compare extends React.Component<CompareProps, {}> {
tooltip: {
trigger: 'item',
enterable: true,
position: (point: number[], data: TooltipForIntermediate): [number, number] => {
if (data.dataIndex < xAxisMax / 2) {
return [point[0], 80];
} else {
return [point[0] - 300, 80];
}
},
confine: true,
formatter: (data: TooltipForIntermediate): string => {
const item = items.find(k => k.id === data.seriesName) as Item;
return this._generateTooltipSummary(item, data.data);
Expand All @@ -103,7 +97,7 @@ class Compare extends React.Component<CompareProps, {}> {
legend: {
type: 'scroll',
right: 40,
left: legend.length > 6 ? 80 : null,
left: legend.length > 6 ? '15%' : null,
data: legend
},
xAxis: {
Expand All @@ -119,11 +113,13 @@ class Compare extends React.Component<CompareProps, {}> {
series: dataForEchart
};
return (
<ReactEcharts
option={option}
style={{ width: '100%', height: 418, margin: '0 auto' }}
notMerge={true} // update now
/>
<div className='graph'>
<ReactEcharts
option={option}
style={{ width: '100%', height: 418, margin: '0 auto' }}
notMerge={true} // update now
/>
</div>
);
}

Expand All @@ -139,7 +135,7 @@ class Compare extends React.Component<CompareProps, {}> {
<td className='column'>{rowName}</td>
{items.map(item => (
<td className={className} key={item.id}>
{formatter(item)}
{formatter(item) || '--'}
</td>
))}
</tr>
Expand Down Expand Up @@ -178,6 +174,7 @@ class Compare extends React.Component<CompareProps, {}> {
}
const parameterKeys = this._overlapKeys(items.map(item => item.parameters));
const metricKeys = this._overlapKeys(items.map(item => item.metrics));

return (
<table className={`compare-modal-table ${scrollClass}`}>
<tbody>
Expand Down
28 changes: 9 additions & 19 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 @@ -77,24 +77,14 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
trigger: 'item',
enterable: hasBestCurve,
confine: true, // confirm always show tooltip box rather than hidden by background
formatter: (data: TooltipForAccuracy): React.ReactNode => {
return (
'<div class="tooldetailAccuracy">' +
'<div>Trial No.: ' +
data.data[0] +
'</div>' +
'<div>Trial ID: ' +
data.data[2] +
'</div>' +
'<div>Default metric: ' +
data.data[1] +
'</div>' +
'<div>Parameters: <pre>' +
JSON.stringify(data.data[3], null, 4) +
'</pre></div>' +
'</div>'
);
}
formatter: (data: TooltipForAccuracy): React.ReactNode => `
<div class="tooldetailAccuracy">
<div>Trial No.: ${data.data[0]}</div>
<div>Trial ID: ${data.data[2]}</div>
<div>Default metric: ${data.data[1]}</div>
<div>Parameters: <pre>${JSON.stringify(data.data[3], null, 4)}</pre></div>
</div>
`
},
dataZoom: [
{
Expand Down Expand Up @@ -165,7 +155,7 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
<Toggle label='Optimization curve' inlineLabel onChange={this.loadDefault} />
</Stack>
)}
<div className='default-metric-graph'>
<div className='default-metric-graph graph'>
<ReactEcharts
option={graph}
style={{
Expand Down
16 changes: 7 additions & 9 deletions ts/webui/src/components/trial-detail/Duration.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,15 +101,13 @@ class Duration extends React.Component<DurationProps, DurationState> {
axisPointer: {
type: 'shadow'
},
enterable: true,
formatter: (data: any): React.ReactNode =>
'<div>' +
'<div>Trial No.: ' +
data[0].dataIndex +
'</div>' +
'<div>Duration: ' +
convertDuration(data[0].data) +
'</div>' +
'</div>'
`<div class="tooldetailAccuracy">
<div>Trial No.: ${data[0].dataIndex}</div>
<div>Duration: ${convertDuration(data[0].data)}</div>
</div>
`
},
grid: {
bottom: '3%',
Expand Down Expand Up @@ -185,7 +183,7 @@ class Duration extends React.Component<DurationProps, DurationState> {
const onEvents = { dataZoom: this.durationDataZoom };

return (
<div>
<div className='graph'>
<ReactEcharts
option={durationSource}
style={{ width: '94%', height: 412, margin: '0 auto', marginTop: 15 }}
Expand Down
37 changes: 11 additions & 26 deletions ts/webui/src/components/trial-detail/Intermediate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,13 +85,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
tooltip: {
trigger: 'item',
enterable: true,
position: function(point: number[], data: TooltipForIntermediate): number[] {
if (data.dataIndex < length / 2) {
return [point[0], 80];
} else {
return [point[0] - 300, 80];
}
},
confine: true,
formatter: function(data: TooltipForIntermediate): React.ReactNode {
const trialId = data.seriesName;
let parameters = {};
Expand All @@ -101,24 +95,15 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
parameters = temp.hyperPara;
trialNum = temp.trialNum;
}
return (
'<div class="tooldetailAccuracy">' +
'<div>Trial No.: ' +
trialNum +
'</div>' +
'<div>Trial ID: ' +
trialId +
'</div>' +
'<div>Intermediate: ' +
data.data +
'</div>' +
'<div>Parameters: ' +
'<pre>' +
JSON.stringify(parameters, null, 4) +
'</pre>' +
'</div>' +
'</div>'
);
return `
<div class="tooldetailAccuracy">
<div>Trial No.: ${trialNum}</div>
<div>Trial ID: ${trialId}</div>
<div>Intermediate: ${data.data}</div>
<div>Parameters: <pre>${JSON.stringify(parameters, null, 4)}</pre>
</div>
</div>
`;
}
},
grid: {
Expand Down Expand Up @@ -280,7 +265,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
<Toggle onChange={this.switchTurn} />
</Stack>
</Stack>
<div className='intermediate-graph'>
<div className='intermediate-graph graph'>
<ReactEcharts
option={interSource}
style={{ width: '100%', height: 400, margin: '0 auto' }}
Expand Down
2 changes: 1 addition & 1 deletion ts/webui/src/static/model/trial.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ class Trial implements TableObj {
}

get sortable(): boolean {
return this.metricsInitialized && this.finalAcc !== undefined && !isNaN(this.finalAcc);
return this.metricsInitialized && this.finalAcc !== undefined && isFinite(this.finalAcc);
}

get latestAccuracy(): number | undefined {
Expand Down
18 changes: 12 additions & 6 deletions ts/webui/src/static/style/common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,23 @@
}

.idCopy {
.ms-Button--icon {
width: 18px;
height: 18px;
margin-left: 4px;
}
.ms-Button--icon {
width: 18px;
height: 18px;
margin-left: 4px;
}

i {
color: #33333C;
color: #33333c;
}
}

.ms-DetailsRow {
height: 32px;
}

/* for graph tooltip style */
.graph > div > div {
padding: 0 !important;
border: none !important;
}
4 changes: 3 additions & 1 deletion ts/webui/src/static/style/trialsDetail.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,11 @@
min-width: 245px;
max-width: 350px;
max-height: 350px;
padding: 10px 10px;
white-space: normal;
padding: 10px;
overflow: auto;
background: #6f6f6f;
color: #fff;

pre {
overflow: inherit;
Expand Down
47 changes: 25 additions & 22 deletions ts/webui/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4915,20 +4915,21 @@ ecc-jsbn@~0.1.1:
jsbn "~0.1.0"
safer-buffer "^2.1.0"

echarts-for-react@^2.0.15-beta.1:
version "2.0.16"
resolved "https://registry.yarnpkg.com/echarts-for-react/-/echarts-for-react-2.0.16.tgz#8134a53dff90882c1e6a95c45ceab21e00f6c9f5"
integrity sha512-VmHCktay2qKt/+wpL/C7thbvIa7dYBEey0/U4Zaqo+qeA4wx+uiCd5NeCsPIhD/0Pv+2qqNswqiNiUCtcgccOw==
echarts-for-react@3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/echarts-for-react/-/echarts-for-react-3.0.0.tgz#af6a24e8386aa22c545a9b4ab44c8ecdd2ee491c"
integrity sha512-dYsED80zcMYO3f8LiswdodRybQ1p1Upu5paPB5q9faM8n67Jx7Qkiqubv854GwwCyo1HhA7M8fFCFwJ8ygGqdQ==
dependencies:
fast-deep-equal "^2.0.1"
size-sensor "^1.0.0"
fast-deep-equal "^3.1.3"
size-sensor "^1.0.1"

echarts@^4.5.0:
version "4.9.0"
resolved "https://registry.yarnpkg.com/echarts/-/echarts-4.9.0.tgz#a9b9baa03f03a2a731e6340c55befb57a9e1347d"
integrity sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==
echarts@^5.0:
version "5.0.2"
resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.0.2.tgz#1726d17a57cf05d62cd0567b4325e1201a56baf6"
integrity sha512-En0VYpc96nw2/2AZoBWPHsGi471zMublttj50kfFpYAeR4geup0Tj9iVgEXh7QYZFPnRiruDJEjcB5PXZ+BYzQ==
dependencies:
zrender "4.3.2"
tslib "2.0.3"
zrender "5.0.4"

editor@~1.0.0:
version "1.0.0"
Expand Down Expand Up @@ -5546,12 +5547,7 @@ extsprintf@^1.2.0:
resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=

fast-deep-equal@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=

fast-deep-equal@^3.1.1:
fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
version "3.1.3"
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
Expand Down Expand Up @@ -12040,7 +12036,7 @@ sisteransi@^1.0.5:
resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==

size-sensor@^1.0.0:
size-sensor@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/size-sensor/-/size-sensor-1.0.1.tgz#f84e46206d3e259faff1d548e4b3beca93219dbb"
integrity sha512-QTy7MnuugCFXIedXRpUSk9gUnyNiaxIdxGfUjr8xxXOqIB3QvBUYP9+b51oCg2C4dnhaeNk/h57TxjbvoJrJUA==
Expand Down Expand Up @@ -12994,6 +12990,11 @@ ts-pnp@^1.0.0:
resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==

tslib@2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==

tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
version "1.14.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
Expand Down Expand Up @@ -13936,10 +13937,12 @@ yargs@12.0.2, yargs@>=16.0.3, yargs@^11.0.0, yargs@^13.3.0, yargs@^13.3.2, yargs
y18n "^5.0.5"
yargs-parser "^20.2.2"

zrender@4.3.2:
version "4.3.2"
resolved "https://registry.yarnpkg.com/zrender/-/zrender-4.3.2.tgz#ec7432f9415c82c73584b6b7b8c47e1b016209c6"
integrity sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g==
zrender@5.0.4:
version "5.0.4"
resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.0.4.tgz#89c355af908b9f64a301b38f751b7951f2c8a95a"
integrity sha512-DJpy0yrHYY5CuH6vhb9IINWbjvBUe/56J8aH86Jb7O8rRPAYZ3M2E469Qf5B3EOIfM3o3aUrO5edRQfLJ+l1Qw==
dependencies:
tslib "2.0.3"

zwitch@^1.0.0:
version "1.0.5"
Expand Down