Skip to content

GitLab

Unverified Commit d5a7b5b2 authored by Lijiaoa's avatar Lijiaoa Committed by GitHub
Browse files

Upgrade echarts version to v5 (#3457)

parent 192e29d5
Show whitespace changes
Inline Side-by-side
Showing with 81 additions and 100 deletions
ts/webui/package.json
View file @ d5a7b5b2
...@@ -15,8 +15,8 @@ ...@@ -15,8 +15,8 @@
"d3": "^5.16.0", "d3": "^5.16.0",
"dotenv": "6.2.0", "dotenv": "6.2.0",
"dotenv-expand": "4.2.0", "dotenv-expand": "4.2.0",
"echarts": "^4.5.0", "echarts": "^5.0",
"echarts-for-react": "^2.0.15-beta.1", "echarts-for-react": "3.0.0",
"file-loader": "3.0.1", "file-loader": "3.0.1",
"fs-extra": "7.0.1", "fs-extra": "7.0.1",
"html-webpack-plugin": "4.0.0-beta.5", "html-webpack-plugin": "4.0.0-beta.5",
......
ts/webui/src/components/modals/Compare.tsx
View file @ d5a7b5b2
...@@ -83,13 +83,7 @@ class Compare extends React.Component<CompareProps, {}> { ...@@ -83,13 +83,7 @@ class Compare extends React.Component<CompareProps, {}> {
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
enterable: true, enterable: true,
position: (point: number[], data: TooltipForIntermediate): [number, number] => { confine: true,
if (data.dataIndex < xAxisMax / 2) {
return [point[0], 80];
} else {
return [point[0] - 300, 80];
}
},
formatter: (data: TooltipForIntermediate): string => { formatter: (data: TooltipForIntermediate): string => {
const item = items.find(k => k.id === data.seriesName) as Item; const item = items.find(k => k.id === data.seriesName) as Item;
return this._generateTooltipSummary(item, data.data); return this._generateTooltipSummary(item, data.data);
...@@ -103,7 +97,7 @@ class Compare extends React.Component<CompareProps, {}> { ...@@ -103,7 +97,7 @@ class Compare extends React.Component<CompareProps, {}> {
legend: { legend: {
type: 'scroll', type: 'scroll',
right: 40, right: 40,
left: legend.length > 6 ? 80 : null, left: legend.length > 6 ? '15%' : null,
data: legend data: legend
}, },
xAxis: { xAxis: {
...@@ -119,11 +113,13 @@ class Compare extends React.Component<CompareProps, {}> { ...@@ -119,11 +113,13 @@ class Compare extends React.Component<CompareProps, {}> {
series: dataForEchart series: dataForEchart
}; };
return ( return (
<div className='graph'>
<ReactEcharts <ReactEcharts
option={option} option={option}
style={{ width: '100%', height: 418, margin: '0 auto' }} style={{ width: '100%', height: 418, margin: '0 auto' }}
notMerge={true} // update now notMerge={true} // update now
/> />
</div>
); );
} }
...@@ -139,7 +135,7 @@ class Compare extends React.Component<CompareProps, {}> { ...@@ -139,7 +135,7 @@ class Compare extends React.Component<CompareProps, {}> {
<td className='column'>{rowName}</td> <td className='column'>{rowName}</td>
{items.map(item => ( {items.map(item => (
<td className={className} key={item.id}> <td className={className} key={item.id}>
{formatter(item)} {formatter(item) || '--'}
</td> </td>
))} ))}
</tr> </tr>
...@@ -178,6 +174,7 @@ class Compare extends React.Component<CompareProps, {}> { ...@@ -178,6 +174,7 @@ class Compare extends React.Component<CompareProps, {}> {
} }
const parameterKeys = this._overlapKeys(items.map(item => item.parameters)); const parameterKeys = this._overlapKeys(items.map(item => item.parameters));
const metricKeys = this._overlapKeys(items.map(item => item.metrics)); const metricKeys = this._overlapKeys(items.map(item => item.metrics));
return ( return (
<table className={`compare-modal-table ${scrollClass}`}> <table className={`compare-modal-table ${scrollClass}`}>
<tbody> <tbody>
......
ts/webui/src/components/trial-detail/DefaultMetricPoint.tsx
View file @ d5a7b5b2
...@@ -77,24 +77,14 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState> ...@@ -77,24 +77,14 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
trigger: 'item', trigger: 'item',
enterable: hasBestCurve, enterable: hasBestCurve,
confine: true, // confirm always show tooltip box rather than hidden by background confine: true, // confirm always show tooltip box rather than hidden by background
formatter: (data: TooltipForAccuracy): React.ReactNode => { formatter: (data: TooltipForAccuracy): React.ReactNode => `
return ( <div class="tooldetailAccuracy">
'<div class="tooldetailAccuracy">' + <div>Trial No.: ${data.data[0]}</div>
'<div>Trial No.: ' + <div>Trial ID: ${data.data[2]}</div>
data.data[0] + <div>Default metric: ${data.data[1]}</div>
'</div>' + <div>Parameters: <pre>${JSON.stringify(data.data[3], null, 4)}</pre></div>
'<div>Trial ID: ' + </div>
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: [ dataZoom: [
{ {
...@@ -165,7 +155,7 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState> ...@@ -165,7 +155,7 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
<Toggle label='Optimization curve' inlineLabel onChange={this.loadDefault} /> <Toggle label='Optimization curve' inlineLabel onChange={this.loadDefault} />
</Stack> </Stack>
)} )}
<div className='default-metric-graph'> <div className='default-metric-graph graph'>
<ReactEcharts <ReactEcharts
option={graph} option={graph}
style={{ style={{
......
ts/webui/src/components/trial-detail/Duration.tsx
View file @ d5a7b5b2
...@@ -101,15 +101,13 @@ class Duration extends React.Component<DurationProps, DurationState> { ...@@ -101,15 +101,13 @@ class Duration extends React.Component<DurationProps, DurationState> {
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
}, },
enterable: true,
formatter: (data: any): React.ReactNode => formatter: (data: any): React.ReactNode =>
'<div>' + `<div class="tooldetailAccuracy">
'<div>Trial No.: ' + <div>Trial No.: ${data[0].dataIndex}</div>
data[0].dataIndex + <div>Duration: ${convertDuration(data[0].data)}</div>
'</div>' + </div>
'<div>Duration: ' + `
convertDuration(data[0].data) +
'</div>' +
'</div>'
}, },
grid: { grid: {
bottom: '3%', bottom: '3%',
...@@ -185,7 +183,7 @@ class Duration extends React.Component<DurationProps, DurationState> { ...@@ -185,7 +183,7 @@ class Duration extends React.Component<DurationProps, DurationState> {
const onEvents = { dataZoom: this.durationDataZoom }; const onEvents = { dataZoom: this.durationDataZoom };
return ( return (
<div> <div className='graph'>
<ReactEcharts <ReactEcharts
option={durationSource} option={durationSource}
style={{ width: '94%', height: 412, margin: '0 auto', marginTop: 15 }} style={{ width: '94%', height: 412, margin: '0 auto', marginTop: 15 }}
......
ts/webui/src/components/trial-detail/Intermediate.tsx
View file @ d5a7b5b2
...@@ -85,13 +85,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState> ...@@ -85,13 +85,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
enterable: true, enterable: true,
position: function(point: number[], data: TooltipForIntermediate): number[] { confine: true,
if (data.dataIndex < length / 2) {
return [point[0], 80];
} else {
return [point[0] - 300, 80];
}
},
formatter: function(data: TooltipForIntermediate): React.ReactNode { formatter: function(data: TooltipForIntermediate): React.ReactNode {
const trialId = data.seriesName; const trialId = data.seriesName;
let parameters = {}; let parameters = {};
...@@ -101,24 +95,15 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState> ...@@ -101,24 +95,15 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
parameters = temp.hyperPara; parameters = temp.hyperPara;
trialNum = temp.trialNum; trialNum = temp.trialNum;
} }
return ( return `
'<div class="tooldetailAccuracy">' + <div class="tooldetailAccuracy">
'<div>Trial No.: ' + <div>Trial No.: ${trialNum}</div>
trialNum + <div>Trial ID: ${trialId}</div>
'</div>' + <div>Intermediate: ${data.data}</div>
'<div>Trial ID: ' + <div>Parameters: <pre>${JSON.stringify(parameters, null, 4)}</pre>
trialId + </div>
'</div>' + </div>
'<div>Intermediate: ' + `;
data.data +
'</div>' +
'<div>Parameters: ' +
'<pre>' +
JSON.stringify(parameters, null, 4) +
'</pre>' +
'</div>' +
'</div>'
);
} }
}, },
grid: { grid: {
...@@ -280,7 +265,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState> ...@@ -280,7 +265,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
<Toggle onChange={this.switchTurn} /> <Toggle onChange={this.switchTurn} />
</Stack> </Stack>
</Stack> </Stack>
<div className='intermediate-graph'> <div className='intermediate-graph graph'>
<ReactEcharts <ReactEcharts
option={interSource} option={interSource}
style={{ width: '100%', height: 400, margin: '0 auto' }} style={{ width: '100%', height: 400, margin: '0 auto' }}
......
ts/webui/src/static/model/trial.ts
View file @ d5a7b5b2
...@@ -102,7 +102,7 @@ class Trial implements TableObj { ...@@ -102,7 +102,7 @@ class Trial implements TableObj {
} }
get sortable(): boolean { 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 { get latestAccuracy(): number | undefined {
......
ts/webui/src/static/style/common.scss
View file @ d5a7b5b2
...@@ -35,10 +35,16 @@ ...@@ -35,10 +35,16 @@
} }
i { i {
color: #33333C; color: #33333c;
} }
} }
.ms-DetailsRow { .ms-DetailsRow {
height: 32px; height: 32px;
} }
/* for graph tooltip style */
.graph > div > div {
padding: 0 !important;
border: none !important;
}
ts/webui/src/static/style/trialsDetail.scss
View file @ d5a7b5b2
...@@ -85,9 +85,11 @@ ...@@ -85,9 +85,11 @@
min-width: 245px; min-width: 245px;
max-width: 350px; max-width: 350px;
max-height: 350px; max-height: 350px;
padding: 10px 10px;
white-space: normal; white-space: normal;
padding: 10px;
overflow: auto; overflow: auto;
background: #6f6f6f;
color: #fff;
pre { pre {
overflow: inherit; overflow: inherit;
......
ts/webui/yarn.lock
View file @ d5a7b5b2
...@@ -4915,20 +4915,21 @@ ecc-jsbn@~0.1.1: ...@@ -4915,20 +4915,21 @@ ecc-jsbn@~0.1.1:
jsbn "~0.1.0" jsbn "~0.1.0"
safer-buffer "^2.1.0" safer-buffer "^2.1.0"
   
echarts-for-react@^2.0.15-beta.1: echarts-for-react@3.0.0:
version "2.0.16" version "3.0.0"
resolved "https://registry.yarnpkg.com/echarts-for-react/-/echarts-for-react-2.0.16.tgz#8134a53dff90882c1e6a95c45ceab21e00f6c9f5" resolved "https://registry.yarnpkg.com/echarts-for-react/-/echarts-for-react-3.0.0.tgz#af6a24e8386aa22c545a9b4ab44c8ecdd2ee491c"
integrity sha512-VmHCktay2qKt/+wpL/C7thbvIa7dYBEey0/U4Zaqo+qeA4wx+uiCd5NeCsPIhD/0Pv+2qqNswqiNiUCtcgccOw== integrity sha512-dYsED80zcMYO3f8LiswdodRybQ1p1Upu5paPB5q9faM8n67Jx7Qkiqubv854GwwCyo1HhA7M8fFCFwJ8ygGqdQ==
dependencies: dependencies:
fast-deep-equal "^2.0.1" fast-deep-equal "^3.1.3"
size-sensor "^1.0.0" size-sensor "^1.0.1"
   
echarts@^4.5.0: echarts@^5.0:
version "4.9.0" version "5.0.2"
resolved "https://registry.yarnpkg.com/echarts/-/echarts-4.9.0.tgz#a9b9baa03f03a2a731e6340c55befb57a9e1347d" resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.0.2.tgz#1726d17a57cf05d62cd0567b4325e1201a56baf6"
integrity sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA== integrity sha512-En0VYpc96nw2/2AZoBWPHsGi471zMublttj50kfFpYAeR4geup0Tj9iVgEXh7QYZFPnRiruDJEjcB5PXZ+BYzQ==
dependencies: dependencies:
zrender "4.3.2" tslib "2.0.3"
zrender "5.0.4"
   
editor@~1.0.0: editor@~1.0.0:
version "1.0.0" version "1.0.0"
...@@ -5546,12 +5547,7 @@ extsprintf@^1.2.0: ...@@ -5546,12 +5547,7 @@ extsprintf@^1.2.0:
resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f" resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8= integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
   
fast-deep-equal@^2.0.1: fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
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:
version "3.1.3" version "3.1.3"
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
...@@ -12040,7 +12036,7 @@ sisteransi@^1.0.5: ...@@ -12040,7 +12036,7 @@ sisteransi@^1.0.5:
resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed" resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg== integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
   
size-sensor@^1.0.0: size-sensor@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/size-sensor/-/size-sensor-1.0.1.tgz#f84e46206d3e259faff1d548e4b3beca93219dbb" resolved "https://registry.yarnpkg.com/size-sensor/-/size-sensor-1.0.1.tgz#f84e46206d3e259faff1d548e4b3beca93219dbb"
integrity sha512-QTy7MnuugCFXIedXRpUSk9gUnyNiaxIdxGfUjr8xxXOqIB3QvBUYP9+b51oCg2C4dnhaeNk/h57TxjbvoJrJUA== integrity sha512-QTy7MnuugCFXIedXRpUSk9gUnyNiaxIdxGfUjr8xxXOqIB3QvBUYP9+b51oCg2C4dnhaeNk/h57TxjbvoJrJUA==
...@@ -12994,6 +12990,11 @@ ts-pnp@^1.0.0: ...@@ -12994,6 +12990,11 @@ ts-pnp@^1.0.0:
resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92" resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw== 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: tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
version "1.14.1" version "1.14.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
...@@ -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 ...@@ -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" y18n "^5.0.5"
yargs-parser "^20.2.2" yargs-parser "^20.2.2"
   
zrender@4.3.2: zrender@5.0.4:
version "4.3.2" version "5.0.4"
resolved "https://registry.yarnpkg.com/zrender/-/zrender-4.3.2.tgz#ec7432f9415c82c73584b6b7b8c47e1b016209c6" resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.0.4.tgz#89c355af908b9f64a301b38f751b7951f2c8a95a"
integrity sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g== integrity sha512-DJpy0yrHYY5CuH6vhb9IINWbjvBUe/56J8aH86Jb7O8rRPAYZ3M2E469Qf5B3EOIfM3o3aUrO5edRQfLJ+l1Qw==
dependencies:
tslib "2.0.3"
   
zwitch@^1.0.0: zwitch@^1.0.0:
version "1.0.5" version "1.0.5"
......
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