Upgrade echarts version to v5 (#3457)

ts/webui/package.json

@@ -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",

ts/webui/src/components/modals/Compare.tsx

@@ -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);
@@ -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: {
@@ -119,11 +113,13 @@ class Compare extends React.Component<CompareProps, {}> {
             series: dataForEchart
         };
         return (
+            <div className='graph'>
                 <ReactEcharts
                     option={option}
                     style={{ width: '100%', height: 418, margin: '0 auto' }}
                     notMerge={true} // update now
                 />
+            </div>
         );
     }
 
@@ -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>
@@ -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>

ts/webui/src/components/trial-detail/DefaultMetricPoint.tsx

@@ -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: [
                 {
@@ -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={{

ts/webui/src/components/trial-detail/Duration.tsx

@@ -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%',
@@ -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 }}

ts/webui/src/components/trial-detail/Intermediate.tsx

@@ -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 = {};
@@ -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: {
@@ -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' }}

ts/webui/src/static/model/trial.ts

@@ -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 {

ts/webui/src/static/style/common.scss

@@ -35,10 +35,16 @@
     }
 
     i {
-        color: #33333C;
+        color: #33333c;
     }
 }
 
 .ms-DetailsRow {
     height: 32px;
 }
+
+/* for graph tooltip style */
+.graph > div > div {
+    padding: 0 !important;
+    border: none !important;
+}

ts/webui/src/static/style/trialsDetail.scss

@@ -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;

ts/webui/yarn.lock

@@ -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"
-echarts@^4.5.0:
-  version "4.9.0"
-  resolved "https://registry.yarnpkg.com/echarts/-/echarts-4.9.0.tgz#a9b9baa03f03a2a731e6340c55befb57a9e1347d"
-  integrity sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==
+    fast-deep-equal "^3.1.3"
+    size-sensor "^1.0.1"
+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"
@@ -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==
@@ -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==
@@ -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"
@@ -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"