From 2de9dfca41a60a41c0eb39e08df0baa93cd560dd Mon Sep 17 00:00:00 2001
From: Lijiao <15910218274@163.com>
Date: Tue, 28 Jul 2020 14:17:20 +0000
Subject: [PATCH 1/8] update

---
 src/webui/.editorconfig      | 12 ++++++++++++
 src/webui/.eslintignore      |  3 +++
 src/webui/.eslintrc          | 12 +++++++++---
 src/webui/package.json       |  5 ++++-
 src/webui/prettier.config.js |  9 +++++++++
 5 files changed, 37 insertions(+), 4 deletions(-)
 create mode 100644 src/webui/.editorconfig
 create mode 100644 src/webui/.eslintignore
 create mode 100644 src/webui/prettier.config.js

diff --git a/src/webui/.editorconfig b/src/webui/.editorconfig
new file mode 100644
index 0000000000..60a2751d33
--- /dev/null
+++ b/src/webui/.editorconfig
@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
\ No newline at end of file
diff --git a/src/webui/.eslintignore b/src/webui/.eslintignore
new file mode 100644
index 0000000000..c487812d87
--- /dev/null
+++ b/src/webui/.eslintignore
@@ -0,0 +1,3 @@
+/build/**
+/scripts/**
+/src/serviceWorker.ts
\ No newline at end of file
diff --git a/src/webui/.eslintrc b/src/webui/.eslintrc
index 5208c1ad4b..801c353c1a 100644
--- a/src/webui/.eslintrc
+++ b/src/webui/.eslintrc
@@ -9,22 +9,28 @@
         "sourceType": "module"
     },
     "plugins": [
-        "@typescript-eslint"
+        "@typescript-eslint",
+        "eslint-plugin-prettier"
     ],
     "extends": [
         "eslint:recommended",
         "plugin:react/recommended",
         "plugin:@typescript-eslint/eslint-recommended",
-        "plugin:@typescript-eslint/recommended"
+        "plugin:@typescript-eslint/recommended",
+        "prettier/react",
+        "prettier"
     ],
     "rules": {
+        "prettier/prettier": 2,
         "@typescript-eslint/no-explicit-any": 0,
         "@typescript-eslint/no-namespace": 0,
         "@typescript-eslint/consistent-type-assertions": 0,
         "@typescript-eslint/no-inferrable-types": 0,
         "no-inner-declarations": 0,
         "@typescript-eslint/no-var-requires": 0,
-        "react/display-name": 0
+        "react/display-name": 0,
+        "no-empty": 2,
+        "no-multiple-empty-lines": [2, { "max": 1 }]
     },
     "settings": {
         "react": {
diff --git a/src/webui/package.json b/src/webui/package.json
index f9796d9af3..b36b0db7af 100644
--- a/src/webui/package.json
+++ b/src/webui/package.json
@@ -77,6 +77,9 @@
     "eslint-plugin-jsx-a11y": "6.2.1",
     "eslint-plugin-react": "7.12.4",
     "eslint-plugin-react-hooks": "^1.5.0",
+    "eslint-config-prettier": "^6.1.0",
+    "eslint-plugin-prettier": "^3.1.0",
+    "prettier": "^1.18.2",
     "express": "^4.17.1",
     "npx": "^10.2.0",
     "typescript": "3.4.5"
@@ -104,4 +107,4 @@
   "resolutions": {
     "npm": ">=6.14.4"
   }
-}
+}
\ No newline at end of file
diff --git a/src/webui/prettier.config.js b/src/webui/prettier.config.js
new file mode 100644
index 0000000000..7d0e4a18c8
--- /dev/null
+++ b/src/webui/prettier.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+    printWidth: 120,
+    semi: true,
+    trailingComma: 'none',
+    bracketSpacing: true,
+    eslintIntegration: true,
+    singleQuote: true,
+    jsxSingleQuote: true
+};
\ No newline at end of file

From 089c84923070386349fd77cbd55a3a677ba337a8 Mon Sep 17 00:00:00 2001
From: Lijiao <15910218274@163.com>
Date: Fri, 7 Aug 2020 03:26:25 +0000
Subject: [PATCH 2/8] format as prettier

---
 src/webui/src/App.tsx                         |  87 ++---
 src/webui/src/components/Buttons/Icon.tsx     |  20 +-
 .../src/components/Buttons/ModalTheme.tsx     |   2 +-
 .../Modals/ChangeColumnComponent.tsx          |  30 +-
 src/webui/src/components/Modals/Compare.tsx   | 111 +++---
 .../src/components/Modals/CustomizedTrial.tsx | 101 +++---
 .../src/components/Modals/ExperimentPanel.tsx |  46 +--
 src/webui/src/components/Modals/Killjob.tsx   |  22 +-
 src/webui/src/components/Modals/LogPanel.tsx  |  58 ++--
 .../src/components/Modals/MessageInfo.tsx     |   9 +-
 src/webui/src/components/NavCon.tsx           |  85 +++--
 src/webui/src/components/Overview.tsx         |  83 ++---
 src/webui/src/components/TrialsDetail.tsx     |  82 +++--
 .../src/components/overview/Accuracy.tsx      |  10 +-
 .../src/components/overview/BasicInfo.tsx     |  25 +-
 src/webui/src/components/overview/Details.tsx |  11 +-
 .../src/components/overview/NumInput.tsx      |  33 +-
 .../src/components/overview/Progress.tsx      | 160 ++++-----
 .../src/components/overview/ProgressItem.tsx  |  23 +-
 .../src/components/overview/SearchSpace.tsx   |  12 +-
 .../src/components/overview/SuccessTable.tsx  |  44 +--
 src/webui/src/components/overview/Title1.tsx  |   9 +-
 .../src/components/overview/TrialProfile.tsx  |  20 +-
 .../components/public-child/DefaultMetric.tsx |   4 +-
 .../public-child/IntermediateVal.tsx          |   4 +-
 .../components/public-child/LogPathChild.tsx  |  21 +-
 .../components/public-child/MonacoEditor.tsx  |  38 +-
 .../src/components/public-child/OpenRow.tsx   |  93 +++--
 .../components/public-child/PaiTrialChild.tsx |  42 +--
 .../components/public-child/PaiTrialLog.tsx   |  72 ++--
 .../src/components/public-child/TrialLog.tsx  |   7 +-
 .../stateless-component/NNItabs.tsx           |  12 +-
 .../trial-detail/DefaultMetricPoint.tsx       |  75 ++--
 .../src/components/trial-detail/Duration.tsx  |  71 ++--
 .../components/trial-detail/Intermediate.tsx  | 104 +++---
 .../src/components/trial-detail/Para.tsx      |  77 +++--
 .../src/components/trial-detail/TableList.tsx | 325 ++++++++++--------
 src/webui/src/index.tsx                       |  18 +-
 src/webui/src/react-app-env.d.ts              |  48 +--
 src/webui/src/static/const.ts                 |  37 +-
 src/webui/src/static/function.ts              |  56 +--
 src/webui/src/static/interface.ts             |  27 +-
 src/webui/src/static/model/experiment.ts      |  38 +-
 src/webui/src/static/model/searchspace.ts     |  22 +-
 src/webui/src/static/model/trial.ts           |  34 +-
 src/webui/src/static/model/trialmanager.ts    |  29 +-
 src/webui/yarn.lock                           |  72 ++--
 47 files changed, 1253 insertions(+), 1156 deletions(-)

diff --git a/src/webui/src/App.tsx b/src/webui/src/App.tsx
index 2405b02de0..e2f28053bc 100644
--- a/src/webui/src/App.tsx
+++ b/src/webui/src/App.tsx
@@ -21,7 +21,7 @@ class App extends React.Component<{}, AppState> {
     private timerId!: number | undefined;
     private dataFormatimer!: number;
     private firstLoad: boolean = false; // when click refresh selector options
-    
+
     constructor(props: {}) {
         super(props);
         this.state = {
@@ -41,7 +41,7 @@ class App extends React.Component<{}, AppState> {
         this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1 }));
         this.setState(state => ({ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
         this.timerId = window.setTimeout(this.refresh, this.state.interval * 1000);
-        this.setState({ metricGraphMode: (EXPERIMENT.optimizeMode === 'minimize' ? 'min' : 'max') });
+        this.setState({ metricGraphMode: EXPERIMENT.optimizeMode === 'minimize' ? 'min' : 'max' });
         // final result is legal
         // get a succeed trial，see final result data's format
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -60,7 +60,8 @@ class App extends React.Component<{}, AppState> {
                     // illegal final data
                     this.setState(() => ({
                         isillegalFinal: true,
-                        expWarningMessage: 'WebUI support final result as number and dictornary includes default keys, your experiment final result is illegal, please check your data.'
+                        expWarningMessage:
+                            'WebUI support final result as number and dictornary includes default keys, your experiment final result is illegal, please check your data.'
                     }));
                     window.clearInterval(this.dataFormatimer);
                 }
@@ -68,10 +69,9 @@ class App extends React.Component<{}, AppState> {
                 break;
             }
         }
-    }
+    };
 
     changeInterval = (interval: number): void => {
-
         window.clearTimeout(this.timerId);
         if (interval === 0) {
             return;
@@ -82,31 +82,37 @@ class App extends React.Component<{}, AppState> {
             this.firstLoad = true;
             this.refresh();
         });
-
-    }
+    };
 
     // TODO: use local storage
     changeColumn = (columnList: string[]): void => {
         this.setState({ columnList: columnList });
-    }
+    };
 
     changeMetricGraphMode = (val: 'max' | 'min'): void => {
         this.setState({ metricGraphMode: val });
-    }
+    };
 
     // overview best trial module
     changeEntries = (entries: string): void => {
         this.setState({ bestTrialEntries: entries });
-    }
+    };
 
     render(): React.ReactNode {
-        const { interval, columnList, experimentUpdateBroadcast, trialsUpdateBroadcast,
-            metricGraphMode, isillegalFinal, expWarningMessage, bestTrialEntries
+        const {
+            interval,
+            columnList,
+            experimentUpdateBroadcast,
+            trialsUpdateBroadcast,
+            metricGraphMode,
+            isillegalFinal,
+            expWarningMessage,
+            bestTrialEntries
         } = this.state;
         if (experimentUpdateBroadcast === 0 || trialsUpdateBroadcast === 0) {
-            return null;  // TODO: render a loading page
+            return null; // TODO: render a loading page
         }
-        
+
         const errorList = [
             { errorWhere: TRIALS.jobListError(), errorMessage: TRIALS.getJobErrorMessage() },
             { errorWhere: EXPERIMENT.experimentError(), errorMessage: EXPERIMENT.getExperimentMessage() },
@@ -117,39 +123,43 @@ class App extends React.Component<{}, AppState> {
         ];
 
         const reactPropsChildren = React.Children.map(this.props.children, child =>
-            React.cloneElement(
-                child as React.ReactElement<any>, {
+            React.cloneElement(child as React.ReactElement<any>, {
                 interval,
-                columnList, changeColumn: this.changeColumn,
+                columnList,
+                changeColumn: this.changeColumn,
                 experimentUpdateBroadcast,
                 trialsUpdateBroadcast,
-                metricGraphMode, changeMetricGraphMode: this.changeMetricGraphMode,
-                bestTrialEntries, changeEntries: this.changeEntries
+                metricGraphMode,
+                changeMetricGraphMode: this.changeMetricGraphMode,
+                bestTrialEntries,
+                changeEntries: this.changeEntries
             })
         );
 
         return (
-            <Stack className="nni" style={{ minHeight: window.innerHeight }}>
-                <div className="header">
-                    <div className="headerCon">
+            <Stack className='nni' style={{ minHeight: window.innerHeight }}>
+                <div className='header'>
+                    <div className='headerCon'>
                         <NavCon changeInterval={this.changeInterval} refreshFunction={this.lastRefresh} />
                     </div>
                 </div>
-                <Stack className="contentBox">
-                    <Stack className="content">
+                <Stack className='contentBox'>
+                    <Stack className='content'>
                         {/* if api has error field, show error message */}
-                        {
-                            errorList.map((item, key) => {
-                                return (
-                                    item.errorWhere && <div key={key} className="warning">
-                                        <MessageInfo info={item.errorMessage} typeInfo="error" />
+                        {errorList.map((item, key) => {
+                            return (
+                                item.errorWhere && (
+                                    <div key={key} className='warning'>
+                                        <MessageInfo info={item.errorMessage} typeInfo='error' />
                                     </div>
-                                );
-                            })
-                        }
-                        {isillegalFinal && <div className="warning">
-                            <MessageInfo info={expWarningMessage} typeInfo="warning" />
-                        </div>}
+                                )
+                            );
+                        })}
+                        {isillegalFinal && (
+                            <div className='warning'>
+                                <MessageInfo info={expWarningMessage} typeInfo='warning' />
+                            </div>
+                        )}
                         {reactPropsChildren}
                     </Stack>
                 </Stack>
@@ -158,7 +168,6 @@ class App extends React.Component<{}, AppState> {
     }
 
     private refresh = async (): Promise<void> => {
-
         // resolve this question: 10s -> 20s, page refresh twice.
         // only refresh this page after clicking the refresh options
         if (this.firstLoad !== true) {
@@ -169,7 +178,6 @@ class App extends React.Component<{}, AppState> {
             if (trialsUpdated) {
                 this.setState(state => ({ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
             }
-
         } else {
             this.firstLoad = false;
         }
@@ -183,8 +191,7 @@ class App extends React.Component<{}, AppState> {
         }
 
         this.timerId = window.setTimeout(this.refresh, this.state.interval * 1000);
-
-    }
+    };
 
     public async lastRefresh(): Promise<void> {
         await EXPERIMENT.update();
@@ -195,5 +202,3 @@ class App extends React.Component<{}, AppState> {
 }
 
 export default App;
-
-
diff --git a/src/webui/src/components/Buttons/Icon.tsx b/src/webui/src/components/Buttons/Icon.tsx
index 621620c908..e67f71a6dc 100644
--- a/src/webui/src/components/Buttons/Icon.tsx
+++ b/src/webui/src/components/Buttons/Icon.tsx
@@ -13,11 +13,23 @@ const downLoadIcon = { iconName: 'Download' };
 const infoIconAbout = { iconName: 'info' };
 const timeIcon = { iconName: 'ReminderTime' };
 const disableUpdates = { iconName: 'DisableUpdates' };
-const requency = { iconName: 'Timer' }; 
+const requency = { iconName: 'Timer' };
 const closeTimer = { iconName: 'Blocked2' };
 const LineChart = <Icon iconName='LineChart' />;
 
-export { infoIcon, warining, errorBadge, completed, blocked,
-    infoIconAbout, copy, tableListIcon, downLoadIcon, timeIcon,
-    disableUpdates, requency, closeTimer, LineChart
+export {
+    infoIcon,
+    warining,
+    errorBadge,
+    completed,
+    blocked,
+    infoIconAbout,
+    copy,
+    tableListIcon,
+    downLoadIcon,
+    timeIcon,
+    disableUpdates,
+    requency,
+    closeTimer,
+    LineChart
 };
diff --git a/src/webui/src/components/Buttons/ModalTheme.tsx b/src/webui/src/components/Buttons/ModalTheme.tsx
index a52f105c58..90871597aa 100644
--- a/src/webui/src/components/Buttons/ModalTheme.tsx
+++ b/src/webui/src/components/Buttons/ModalTheme.tsx
@@ -50,4 +50,4 @@ const iconButtonStyles = mergeStyleSets({
     }
 });
 
-export { contentStyles, iconButtonStyles };
\ No newline at end of file
+export { contentStyles, iconButtonStyles };
diff --git a/src/webui/src/components/Modals/ChangeColumnComponent.tsx b/src/webui/src/components/Modals/ChangeColumnComponent.tsx
index e1a6c84ad7..673246aad0 100644
--- a/src/webui/src/components/Modals/ChangeColumnComponent.tsx
+++ b/src/webui/src/components/Modals/ChangeColumnComponent.tsx
@@ -21,17 +21,23 @@ interface CheckBoxItems {
     onChange: () => void;
 }
 class ChangeColumnComponent extends React.Component<ChangeColumnProps, ChangeColumnState> {
-
     constructor(props: ChangeColumnProps) {
         super(props);
-        this.state = { userSelectColumnList: this.props.selectedColumn, originSelectColumnList: this.props.selectedColumn };
+        this.state = {
+            userSelectColumnList: this.props.selectedColumn,
+            originSelectColumnList: this.props.selectedColumn
+        };
     }
 
     makeChangeHandler = (label: string): any => {
         return (ev: any, checked: boolean): void => this.onCheckboxChange(ev, label, checked);
-    }
+    };
 
-    onCheckboxChange = (ev: React.FormEvent<HTMLElement | HTMLInputElement> | undefined, label: string, val?: boolean, ): void => {
+    onCheckboxChange = (
+        ev: React.FormEvent<HTMLElement | HTMLInputElement> | undefined,
+        label: string,
+        val?: boolean
+    ): void => {
         const source: string[] = JSON.parse(JSON.stringify(this.state.userSelectColumnList));
         if (val === true) {
             if (!source.includes(label)) {
@@ -41,7 +47,7 @@ class ChangeColumnComponent extends React.Component<ChangeColumnProps, ChangeCol
         } else {
             if (source.includes(label)) {
                 // remove from source
-                const result = source.filter((item) => item !== label);
+                const result = source.filter(item => item !== label);
                 this.setState(() => ({ userSelectColumnList: result }));
             }
         }
@@ -88,11 +94,11 @@ class ChangeColumnComponent extends React.Component<ChangeColumnProps, ChangeCol
         }
         this.props.changeColumn(sortColumn);
         this.hideDialog(); // hide dialog
-    }
+    };
 
     hideDialog = (): void => {
         this.props.hideShowColumnDialog();
-    }
+    };
 
     // user exit dialog
     cancelOption = (): void => {
@@ -101,7 +107,7 @@ class ChangeColumnComponent extends React.Component<ChangeColumnProps, ChangeCol
         this.setState({ userSelectColumnList: originSelectColumnList }, () => {
             this.hideDialog();
         });
-    }
+    };
 
     render(): React.ReactNode {
         const { showColumn, isHideDialog } = this.props;
@@ -129,14 +135,14 @@ class ChangeColumnComponent extends React.Component<ChangeColumnProps, ChangeCol
                         styles: { main: { maxWidth: 450 } }
                     }}
                 >
-                    <div className="columns-height">
+                    <div className='columns-height'>
                         {renderOptions.map(item => {
-                            return <Checkbox key={item.label} {...item} styles={{ root: { marginBottom: 8 } }} />
+                            return <Checkbox key={item.label} {...item} styles={{ root: { marginBottom: 8 } }} />;
                         })}
                     </div>
                     <DialogFooter>
-                        <PrimaryButton text="Save" onClick={this.saveUserSelectColumn} />
-                        <DefaultButton text="Cancel" onClick={this.cancelOption} />
+                        <PrimaryButton text='Save' onClick={this.saveUserSelectColumn} />
+                        <DefaultButton text='Cancel' onClick={this.cancelOption} />
                     </DialogFooter>
                 </Dialog>
             </div>
diff --git a/src/webui/src/components/Modals/Compare.tsx b/src/webui/src/components/Modals/Compare.tsx
index ac73f860bc..73024b77a6 100644
--- a/src/webui/src/components/Modals/Compare.tsx
+++ b/src/webui/src/components/Modals/Compare.tsx
@@ -14,7 +14,6 @@ interface CompareProps {
 }
 
 class Compare extends React.Component<CompareProps, {}> {
-
     public _isCompareMount!: boolean;
     constructor(props: CompareProps) {
         super(props);
@@ -35,7 +34,9 @@ class Compare extends React.Component<CompareProps, {}> {
             idsList.push(element.id);
         });
         // find max intermediate number
-        trialIntermediate.sort((a, b) => { return (b.data.length - a.data.length); });
+        trialIntermediate.sort((a, b) => {
+            return b.data.length - a.data.length;
+        });
         const legend: string[] = [];
         // max length
         const length = trialIntermediate[0] !== undefined ? trialIntermediate[0].data.length : 0;
@@ -50,27 +51,35 @@ class Compare extends React.Component<CompareProps, {}> {
             tooltip: {
                 trigger: 'item',
                 enterable: true,
-                position: function (point: number[], data: TooltipForIntermediate): number[] {
+                position: function(point: number[], data: TooltipForIntermediate): number[] {
                     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;
                     let obj = {};
                     const temp = trialIntermediate.find(key => key.name === trialId);
                     if (temp !== undefined) {
                         obj = temp.hyperPara;
                     }
-                    return '<div class="tooldetailAccuracy">' +
-                        '<div>Trial ID: ' + trialId + '</div>' +
-                        '<div>Intermediate: ' + data.data + '</div>' +
+                    return (
+                        '<div class="tooldetailAccuracy">' +
+                        '<div>Trial ID: ' +
+                        trialId +
+                        '</div>' +
+                        '<div>Intermediate: ' +
+                        data.data +
+                        '</div>' +
                         '<div>Parameters: ' +
-                        '<pre>' + JSON.stringify(obj, null, 4) + '</pre>' +
+                        '<pre>' +
+                        JSON.stringify(obj, null, 4) +
+                        '</pre>' +
                         '</div>' +
-                        '</div>';
+                        '</div>'
+                    );
                 }
             },
             grid: {
@@ -101,8 +110,7 @@ class Compare extends React.Component<CompareProps, {}> {
                 notMerge={true} // update now
             />
         );
-
-    }
+    };
 
     // render table column ---
     initColumn = (): React.ReactNode => {
@@ -125,73 +133,74 @@ class Compare extends React.Component<CompareProps, {}> {
         });
         let isComplexSearchSpace;
         if (parameterList.length > 0) {
-            isComplexSearchSpace = (typeof parameterList[0][parameterKeys[0]] === 'object')
-                ? true : false;
+            isComplexSearchSpace = typeof parameterList[0][parameterKeys[0]] === 'object' ? true : false;
         }
         return (
-            <table className="compare-modal-table">
+            <table className='compare-modal-table'>
                 <tbody>
                     <tr>
-                        <td className="column">Id</td>
+                        <td className='column'>Id</td>
                         {Object.keys(idList).map(key => {
                             return (
-                                <td className="value idList" key={key}>{idList[key]}</td>
+                                <td className='value idList' key={key}>
+                                    {idList[key]}
+                                </td>
                             );
                         })}
                     </tr>
                     <tr>
-                        <td className="column">Trial No.</td>
+                        <td className='column'>Trial No.</td>
                         {Object.keys(sequenceIdList).map(key => {
                             return (
-                                <td className="value idList" key={key}>{sequenceIdList[key]}</td>
+                                <td className='value idList' key={key}>
+                                    {sequenceIdList[key]}
+                                </td>
                             );
                         })}
                     </tr>
                     <tr>
-                        <td className="column">Default metric</td>
+                        <td className='column'>Default metric</td>
                         {Object.keys(compareStacks).map(index => {
                             const temp = compareStacks[index];
                             return (
-                                <td className="value" key={index}>
+                                <td className='value' key={index}>
                                     <IntermediateVal trialId={temp.id} />
                                 </td>
                             );
                         })}
                     </tr>
                     <tr>
-                        <td className="column">duration</td>
+                        <td className='column'>duration</td>
                         {Object.keys(durationList).map(index => {
                             return (
-                                <td className="value" key={index}>{durationList[index]}</td>
+                                <td className='value' key={index}>
+                                    {durationList[index]}
+                                </td>
                             );
                         })}
                     </tr>
-                    {
-                        isComplexSearchSpace
-                            ?
-                            null
-                            :
-                            Object.keys(parameterKeys).map(index => {
-                                return (
-                                    <tr key={index}>
-                                        <td className="column" key={index}>{parameterKeys[index]}</td>
-                                        {
-                                            Object.keys(parameterList).map(key => {
-                                                return (
-                                                    <td key={key} className="value">
-                                                        {parameterList[key][parameterKeys[index]]}
-                                                    </td>
-                                                );
-                                            })
-                                        }
-                                    </tr>
-                                );
-                            })
-                    }
+                    {isComplexSearchSpace
+                        ? null
+                        : Object.keys(parameterKeys).map(index => {
+                              return (
+                                  <tr key={index}>
+                                      <td className='column' key={index}>
+                                          {parameterKeys[index]}
+                                      </td>
+                                      {Object.keys(parameterList).map(key => {
+                                          return (
+                                              <td key={key} className='value'>
+                                                  {parameterList[key][parameterKeys[index]]}
+                                              </td>
+                                          );
+                                      })}
+                                  </tr>
+                              );
+                          })}
                 </tbody>
             </table>
         );
-    }
+    };
 
     componentDidMount(): void {
         this._isCompareMount = true;
@@ -205,24 +214,20 @@ class Compare extends React.Component<CompareProps, {}> {
         const { cancelFunc } = this.props;
 
         return (
-            <Modal
-                isOpen={true}
-                containerClassName={contentStyles.container}
-                className="compare-modal"
-            >
+            <Modal isOpen={true} containerClassName={contentStyles.container} className='compare-modal'>
                 <div>
                     <div className={contentStyles.header}>
                         <span>Compare trials</span>
                         <IconButton
                             styles={iconButtonStyles}
                             iconProps={{ iconName: 'Cancel' }}
-                            ariaLabel="Close popup modal"
+                            ariaLabel='Close popup modal'
                             onClick={cancelFunc}
                         />
                     </div>
-                    <Stack className="compare-modal-intermediate">
+                    <Stack className='compare-modal-intermediate'>
                         {this.intermediate()}
-                        <Stack className="compare-yAxis"># Intermediate result</Stack>
+                        <Stack className='compare-yAxis'># Intermediate result</Stack>
                     </Stack>
                     <Stack>{this.initColumn()}</Stack>
                 </div>
diff --git a/src/webui/src/components/Modals/CustomizedTrial.tsx b/src/webui/src/components/Modals/CustomizedTrial.tsx
index 102f486b5c..784ab2ce42 100644
--- a/src/webui/src/components/Modals/CustomizedTrial.tsx
+++ b/src/webui/src/components/Modals/CustomizedTrial.tsx
@@ -25,7 +25,6 @@ interface CustomizeState {
 }
 
 class Customize extends React.Component<CustomizeProps, CustomizeState> {
-
     constructor(props: CustomizeProps) {
         super(props);
         this.state = {
@@ -36,17 +35,15 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
             copyTrialParameter: {},
             customParameters: {},
             customID: NaN,
-            changeMap: new Map
+            changeMap: new Map()
         };
     }
 
     getFinalVal = (event: React.ChangeEvent<HTMLInputElement>): void => {
-
         const { name, value } = event.target;
         const { changeMap } = this.state;
         this.setState({ changeMap: changeMap.set(name, value) });
-
-    }
+    };
 
     // [submit click] user add a new trial [submit a trial]
     addNewTrial = (): void => {
@@ -54,7 +51,7 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
         // get user edited hyperParameter, ps: will change data type if you modify the input val
         const customized = JSON.parse(JSON.stringify(copyTrialParameter));
         // changeMap: user changed keys: values
-        changeMap.forEach(function (value, key) {
+        changeMap.forEach(function(value, key) {
             customized[key] = value;
         });
 
@@ -72,14 +69,17 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
                     return;
                 }
                 if (searchSpace[item]._type === 'choice') {
-                    if (searchSpace[item]._value.find((val: string | number) =>
-                        val === customized[item]) === undefined) {
+                    if (
+                        searchSpace[item]._value.find((val: string | number) => val === customized[item]) === undefined
+                    ) {
                         parametersIllegal = true;
                         return;
                     }
                 } else {
-                    if (customized[item] < searchSpace[item]._value[0]
-                        || customized[item] > searchSpace[item]._value[1]) {
+                    if (
+                        customized[item] < searchSpace[item]._value[0] ||
+                        customized[item] > searchSpace[item]._value[1]
+                    ) {
                         parametersIllegal = true;
                         return;
                     }
@@ -93,18 +93,17 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
             // submit a customized job
             this.submitCustomize(customized);
         }
-
-    }
+    };
 
     warningConfirm = (): void => {
         this.setState(() => ({ isShowWarning: false }));
         const { customParameters } = this.state;
         this.submitCustomize(customParameters);
-    }
+    };
 
     warningCancel = (): void => {
         this.setState(() => ({ isShowWarning: false }));
-    }
+    };
 
     submitCustomize = (customized: Record<string, any>): void => {
         // delete `tag` key
@@ -129,19 +128,19 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
             .catch(() => {
                 this.setState(() => ({ isShowSubmitFailed: true }));
             });
-    }
+    };
 
     closeSucceedHint = (): void => {
         // also close customized trial modal
         this.setState(() => ({ isShowSubmitSucceed: false, changeMap: new Map() }));
         this.props.closeCustomizeModal();
-    }
+    };
 
     closeFailedHint = (): void => {
         // also close customized trial modal
         this.setState(() => ({ isShowSubmitFailed: false, changeMap: new Map() }));
         this.props.closeCustomizeModal();
-    }
+    };
 
     componentDidMount(): void {
         const { copyTrialId } = this.props;
@@ -164,8 +163,9 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
     render(): React.ReactNode {
         const { closeCustomizeModal, visible } = this.props;
         const { isShowSubmitSucceed, isShowSubmitFailed, isShowWarning, customID, copyTrialParameter } = this.state;
-        const warning = 'The parameters you set are not in our search space, this may cause the tuner to crash, Are'
-            + ' you sure you want to continue submitting?';
+        const warning =
+            'The parameters you set are not in our search space, this may cause the tuner to crash, Are' +
+            ' you sure you want to continue submitting?';
         return (
             <Stack>
                 <Dialog
@@ -180,23 +180,22 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
                         styles: { main: { maxWidth: 450 } }
                     }}
                 >
-                    <form className="hyper-box">
-                        {
-                            Object.keys(copyTrialParameter).map(item => (
-                                <Stack horizontal key={item} className="hyper-form">
-                                    <StackItem styles={{ root: { minWidth: 100 } }} className="title">{item}</StackItem>
-                                    <StackItem className="inputs">
-                                        <input
-                                            type="text"
-                                            name={item}
-                                            defaultValue={copyTrialParameter[item]}
-                                            onChange={this.getFinalVal}
-                                        />
-                                    </StackItem>
-                                </Stack>
-                            )
-                            )
-                        }
+                    <form className='hyper-box'>
+                        {Object.keys(copyTrialParameter).map(item => (
+                            <Stack horizontal key={item} className='hyper-form'>
+                                <StackItem styles={{ root: { minWidth: 100 } }} className='title'>
+                                    {item}
+                                </StackItem>
+                                <StackItem className='inputs'>
+                                    <input
+                                        type='text'
+                                        name={item}
+                                        defaultValue={copyTrialParameter[item]}
+                                        onChange={this.getFinalVal}
+                                    />
+                                </StackItem>
+                            </Stack>
+                        ))}
                         {/* disable [tag] because we havn't support */}
                         {/* <Stack key="tag" horizontal className="hyper-form tag-input">
                             <StackItem grow={9} className="title">Tag</StackItem>
@@ -206,8 +205,8 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
                         </Stack> */}
                     </form>
                     <DialogFooter>
-                        <PrimaryButton text="Submit" onClick={this.addNewTrial} />
-                        <DefaultButton text="Cancel" onClick={closeCustomizeModal} />
+                        <PrimaryButton text='Submit' onClick={this.addNewTrial} />
+                        <DefaultButton text='Cancel' onClick={closeCustomizeModal} />
                     </DialogFooter>
                 </Dialog>
 
@@ -217,17 +216,22 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
                     onDismiss={this.closeSucceedHint}
                     dialogContentProps={{
                         type: DialogType.normal,
-                        title: <div className="icon-color">{completed}<b>Submit successfully</b></div>,
+                        title: (
+                            <div className='icon-color'>
+                                {completed}
+                                <b>Submit successfully</b>
+                            </div>
+                        ),
                         closeButtonAriaLabel: 'Close',
                         subText: `You can find your customized trial by Trial No.${customID}`
                     }}
                     modalProps={{
                         isBlocking: false,
-                        styles: { main: { minWidth: 500 } },
+                        styles: { main: { minWidth: 500 } }
                     }}
                 >
                     <DialogFooter>
-                        <PrimaryButton onClick={this.closeSucceedHint} text="OK" />
+                        <PrimaryButton onClick={this.closeSucceedHint} text='OK' />
                     </DialogFooter>
                 </Dialog>
 
@@ -236,17 +240,17 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
                     onDismiss={this.closeSucceedHint}
                     dialogContentProps={{
                         type: DialogType.normal,
-                        title: <div className="icon-error">{errorBadge}Submit Failed</div>,
+                        title: <div className='icon-error'>{errorBadge}Submit Failed</div>,
                         closeButtonAriaLabel: 'Close',
                         subText: 'Unknown error.'
                     }}
                     modalProps={{
                         isBlocking: false,
-                        styles: { main: { minWidth: 500 } },
+                        styles: { main: { minWidth: 500 } }
                     }}
                 >
                     <DialogFooter>
-                        <PrimaryButton onClick={this.closeFailedHint} text="OK" />
+                        <PrimaryButton onClick={this.closeFailedHint} text='OK' />
                     </DialogFooter>
                 </Dialog>
 
@@ -256,22 +260,21 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
                     onDismiss={this.closeSucceedHint}
                     dialogContentProps={{
                         type: DialogType.normal,
-                        title: <div className="icon-error">{warining}Warning</div>,
+                        title: <div className='icon-error'>{warining}Warning</div>,
                         closeButtonAriaLabel: 'Close',
                         subText: `${warning}`
                     }}
                     modalProps={{
                         isBlocking: false,
-                        styles: { main: { minWidth: 500 } },
+                        styles: { main: { minWidth: 500 } }
                     }}
                 >
                     <DialogFooter>
-                        <PrimaryButton onClick={this.warningConfirm} text="Confirm" />
-                        <DefaultButton onClick={this.warningCancel} text="Cancel" />
+                        <PrimaryButton onClick={this.warningConfirm} text='Confirm' />
+                        <DefaultButton onClick={this.warningCancel} text='Cancel' />
                     </DialogFooter>
                 </Dialog>
             </Stack>
-
         );
     }
 }
diff --git a/src/webui/src/components/Modals/ExperimentPanel.tsx b/src/webui/src/components/Modals/ExperimentPanel.tsx
index cbc674ec9a..9367097c06 100644
--- a/src/webui/src/components/Modals/ExperimentPanel.tsx
+++ b/src/webui/src/components/Modals/ExperimentPanel.tsx
@@ -1,8 +1,6 @@
 import * as React from 'react';
 import { downFile } from '../../static/function';
-import {
-    Stack, PrimaryButton, DefaultButton, Panel, StackItem, Pivot, PivotItem
-} from 'office-ui-fabric-react';
+import { Stack, PrimaryButton, DefaultButton, Panel, StackItem, Pivot, PivotItem } from 'office-ui-fabric-react';
 import { DRAWEROPTION } from '../../static/const';
 import { EXPERIMENT, TRIALS } from '../../static/datamodel';
 import MonacoEditor from 'react-monaco-editor';
@@ -19,7 +17,6 @@ interface ExpDrawerState {
 }
 
 class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
-
     public _isExperimentMount!: boolean;
     private refreshId!: number | undefined;
 
@@ -60,21 +57,20 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
         }
 
         if (['DONE', 'ERROR', 'STOPPED'].includes(EXPERIMENT.status)) {
-            if(this.refreshId !== null || this.refreshId !== undefined){
+            if (this.refreshId !== null || this.refreshId !== undefined) {
                 window.clearInterval(this.refreshId);
             }
-        } 
-        
-    }
-    
+        }
+    };
+
     downExperimentParameters = (): void => {
         const { experiment } = this.state;
         downFile(experiment, 'experiment.json');
-    }
+    };
 
     onWindowResize = (): void => {
         this.setState(() => ({ expDrawerHeight: window.innerHeight }));
-    }
+    };
 
     componentDidMount(): void {
         this._isExperimentMount = true;
@@ -93,7 +89,7 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
         const { closeExpDrawer } = this.props;
         const { experiment, expDrawerHeight } = this.state;
         return (
-            <Stack className="logDrawer">
+            <Stack className='logDrawer'>
                 <Panel
                     isOpen={true}
                     hasCloseButton={false}
@@ -101,30 +97,24 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
                     onLightDismissClick={closeExpDrawer}
                     styles={{ root: { height: expDrawerHeight, paddingTop: 15 } }}
                 >
-                    <Pivot style={{ minHeight: 190 }} className="log-tab-body">
-                        <PivotItem headerText="Experiment parameters">
-                            <div className="just-for-log">
+                    <Pivot style={{ minHeight: 190 }} className='log-tab-body'>
+                        <PivotItem headerText='Experiment parameters'>
+                            <div className='just-for-log'>
                                 <MonacoEditor
-                                    width="100%"
+                                    width='100%'
                                     // 92 + marginTop[16]
                                     height={expDrawerHeight - 108}
-                                    language="json"
+                                    language='json'
                                     value={experiment}
                                     options={DRAWEROPTION}
                                 />
                             </div>
-                            <Stack horizontal className="buttons">
-                                <StackItem grow={50} className="download">
-                                    <PrimaryButton
-                                        text="Download"
-                                        onClick={this.downExperimentParameters}
-                                    />
+                            <Stack horizontal className='buttons'>
+                                <StackItem grow={50} className='download'>
+                                    <PrimaryButton text='Download' onClick={this.downExperimentParameters} />
                                 </StackItem>
-                                <StackItem grow={50} className="close">
-                                    <DefaultButton
-                                        text="Close"
-                                        onClick={closeExpDrawer}
-                                    />
+                                <StackItem grow={50} className='close'>
+                                    <DefaultButton text='Close' onClick={closeExpDrawer} />
                                 </StackItem>
                             </Stack>
                         </PivotItem>
diff --git a/src/webui/src/components/Modals/Killjob.tsx b/src/webui/src/components/Modals/Killjob.tsx
index 580ff5ff24..ab9c7f750b 100644
--- a/src/webui/src/components/Modals/Killjob.tsx
+++ b/src/webui/src/components/Modals/Killjob.tsx
@@ -1,8 +1,13 @@
 import * as React from 'react';
 import {
-    Stack, FocusTrapCallout, DefaultButton,
+    Stack,
+    FocusTrapCallout,
+    DefaultButton,
     FocusZone,
-    PrimaryButton, getTheme, mergeStyleSets, FontWeights
+    PrimaryButton,
+    getTheme,
+    mergeStyleSets,
+    FontWeights
 } from 'office-ui-fabric-react';
 import { killJob } from '../../static/function';
 import { blocked } from '../Buttons/Icon';
@@ -63,7 +68,6 @@ interface KillJobProps {
 }
 
 class KillJob extends React.Component<KillJobProps, KillJobState> {
-
     private menuButtonElement!: HTMLElement | null;
     constructor(props: KillJobProps) {
         super(props);
@@ -72,20 +76,20 @@ class KillJob extends React.Component<KillJobProps, KillJobState> {
 
     onDismiss = (): void => {
         this.setState(() => ({ isCalloutVisible: false }));
-    }
+    };
 
     onKill = (): void => {
         this.setState({ isCalloutVisible: false }, () => {
             const { trial } = this.props;
             killJob(trial.key, trial.jobId, trial.status);
         });
-    }
+    };
 
     openPromot = (event: React.SyntheticEvent<EventTarget>): void => {
         event.preventDefault();
         event.stopPropagation();
         this.setState({ isCalloutVisible: true });
-    }
+    };
 
     render(): React.ReactNode {
         const { isCalloutVisible } = this.state;
@@ -93,12 +97,14 @@ class KillJob extends React.Component<KillJobProps, KillJobState> {
         return (
             <div>
                 <div className={styles.buttonArea} ref={(menuButton): any => (this.menuButtonElement = menuButton)}>
-                    <PrimaryButton className="detail-button-operation" onClick={this.openPromot} title="kill">{blocked}</PrimaryButton>
+                    <PrimaryButton className='detail-button-operation' onClick={this.openPromot} title='kill'>
+                        {blocked}
+                    </PrimaryButton>
                 </div>
                 {isCalloutVisible ? (
                     <div>
                         <FocusTrapCallout
-                            role="alertdialog"
+                            role='alertdialog'
                             className={styles.callout}
                             gapSpace={0}
                             target={this.menuButtonElement}
diff --git a/src/webui/src/components/Modals/LogPanel.tsx b/src/webui/src/components/Modals/LogPanel.tsx
index 97a408fe9d..ef7a717fe5 100644
--- a/src/webui/src/components/Modals/LogPanel.tsx
+++ b/src/webui/src/components/Modals/LogPanel.tsx
@@ -1,9 +1,6 @@
 import * as React from 'react';
 import axios from 'axios';
-import {
-    Stack, StackItem, Panel, PrimaryButton, DefaultButton,
-    Pivot, PivotItem
-} from 'office-ui-fabric-react';
+import { Stack, StackItem, Panel, PrimaryButton, DefaultButton, Pivot, PivotItem } from 'office-ui-fabric-react';
 import { infoIcon } from '../Buttons/Icon';
 import { DOWNLOAD_IP } from '../../static/const';
 import { downFile } from '../../static/function';
@@ -40,44 +37,46 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
         if (this.state.nniManagerLogStr !== null) {
             downFile(this.state.nniManagerLogStr, 'nnimanager.log');
         }
-    }
+    };
 
     downloadDispatcher = (): void => {
         if (this.state.dispatcherLogStr !== null) {
             downFile(this.state.dispatcherLogStr, 'dispatcher.log');
         }
-    }
+    };
 
     dispatcherHTML = (): React.ReactNode => {
         return (
             <div>
                 <span>Dispatcher log</span>
-                <span className="refresh" onClick={this.manualRefresh}>
+                <span className='refresh' onClick={this.manualRefresh}>
                     {infoIcon}
                 </span>
             </div>
         );
-    }
+    };
 
     nnimanagerHTML = (): React.ReactNode => {
         return (
             <div>
                 <span>NNImanager log</span>
-                <span className="refresh" onClick={this.manualRefresh}>{infoIcon}</span>
+                <span className='refresh' onClick={this.manualRefresh}>
+                    {infoIcon}
+                </span>
             </div>
         );
-    }
+    };
 
     setLogDrawerHeight = (): void => {
         this.setState(() => ({ logDrawerHeight: window.innerHeight - 48 }));
-    }
+    };
 
     async componentDidMount(): Promise<void> {
         this.refresh();
         window.addEventListener('resize', this.setLogDrawerHeight);
     }
 
-    componentWillUnmount(): void{
+    componentWillUnmount(): void {
         window.clearTimeout(this.timerId);
         window.removeEventListener('resize', this.setLogDrawerHeight);
     }
@@ -95,41 +94,38 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
                     isLightDismiss={true}
                     onLightDismissClick={closeDrawer}
                 >
-                    <div className="log-tab-body">
-                        <Pivot
-                            selectedKey={activeTab}
-                            style={{ minHeight: 190, paddingTop: '16px' }}
-                        >
+                    <div className='log-tab-body'>
+                        <Pivot selectedKey={activeTab} style={{ minHeight: 190, paddingTop: '16px' }}>
                             {/* <PivotItem headerText={this.dispatcherHTML()} key="dispatcher" onLinkClick> */}
-                            <PivotItem headerText="Dispatcher log" key="dispatcher">
+                            <PivotItem headerText='Dispatcher log' key='dispatcher'>
                                 <MonacoHTML
                                     content={dispatcherLogStr || 'Loading...'}
                                     loading={isLoading}
                                     // paddingTop[16] + tab[44] + button[32]
                                     height={logDrawerHeight - 92}
                                 />
-                                <Stack horizontal className="buttons">
-                                    <StackItem grow={12} className="download">
-                                        <PrimaryButton text="Download" onClick={this.downloadDispatcher} />
+                                <Stack horizontal className='buttons'>
+                                    <StackItem grow={12} className='download'>
+                                        <PrimaryButton text='Download' onClick={this.downloadDispatcher} />
                                     </StackItem>
-                                    <StackItem grow={12} className="close">
-                                        <DefaultButton text="Close" onClick={closeDrawer} />
+                                    <StackItem grow={12} className='close'>
+                                        <DefaultButton text='Close' onClick={closeDrawer} />
                                     </StackItem>
                                 </Stack>
                             </PivotItem>
-                            <PivotItem headerText="NNIManager log" key="nnimanager">
+                            <PivotItem headerText='NNIManager log' key='nnimanager'>
                                 {/* <TabPane tab="NNImanager Log" key="nnimanager"> */}
                                 <MonacoHTML
                                     content={nniManagerLogStr || 'Loading...'}
                                     loading={isLoading}
                                     height={logDrawerHeight - 92}
                                 />
-                                <Stack horizontal className="buttons">
-                                    <StackItem grow={12} className="download">
-                                        <PrimaryButton text="Download" onClick={this.downloadNNImanager} />
+                                <Stack horizontal className='buttons'>
+                                    <StackItem grow={12} className='download'>
+                                        <PrimaryButton text='Download' onClick={this.downloadNNImanager} />
                                     </StackItem>
-                                    <StackItem grow={12} className="close">
-                                        <DefaultButton text="Close" onClick={closeDrawer} />
+                                    <StackItem grow={12} className='close'>
+                                        <DefaultButton text='Close' onClick={closeDrawer} />
                                     </StackItem>
                                 </Stack>
                             </PivotItem>
@@ -158,12 +154,12 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
             this.setState({ isLoading: false });
             this.timerId = window.setTimeout(this.refresh, 10000);
         });
-    }
+    };
 
     private manualRefresh = (): void => {
         this.setState({ isLoading: true });
         this.refresh();
-    }
+    };
 }
 
 export default LogDrawer;
diff --git a/src/webui/src/components/Modals/MessageInfo.tsx b/src/webui/src/components/Modals/MessageInfo.tsx
index 995c535013..8477cda63e 100644
--- a/src/webui/src/components/Modals/MessageInfo.tsx
+++ b/src/webui/src/components/Modals/MessageInfo.tsx
@@ -8,7 +8,6 @@ interface MessageInfoProps {
 }
 
 class MessageInfo extends React.Component<MessageInfoProps, {}> {
-
     constructor(props: MessageInfoProps) {
         super(props);
     }
@@ -16,15 +15,11 @@ class MessageInfo extends React.Component<MessageInfoProps, {}> {
     render(): React.ReactNode {
         const { info, typeInfo, className } = this.props;
         return (
-            <MessageBar
-                messageBarType={MessageBarType[typeInfo]}
-                isMultiline={true}
-                className={className}
-            >
+            <MessageBar messageBarType={MessageBarType[typeInfo]} isMultiline={true} className={className}>
                 {info}
             </MessageBar>
         );
     }
 }
 
-export default MessageInfo;
\ No newline at end of file
+export default MessageInfo;
diff --git a/src/webui/src/components/NavCon.tsx b/src/webui/src/components/NavCon.tsx
index 5fed93dfe1..62ec9a209e 100644
--- a/src/webui/src/components/NavCon.tsx
+++ b/src/webui/src/components/NavCon.tsx
@@ -2,15 +2,17 @@ import * as React from 'react';
 import axios from 'axios';
 import { WEBUIDOC, MANAGER_IP } from '../static/const';
 import {
-    Stack, initializeIcons, StackItem, CommandBarButton,
-    IContextualMenuProps, IStackTokens, IStackStyles
+    Stack,
+    initializeIcons,
+    StackItem,
+    CommandBarButton,
+    IContextualMenuProps,
+    IStackTokens,
+    IStackStyles
 } from 'office-ui-fabric-react';
 import LogPanel from './Modals/LogPanel';
 import ExperimentPanel from './Modals/ExperimentPanel';
-import {
-    downLoadIcon, infoIconAbout,
-    timeIcon, disableUpdates, requency, closeTimer
-} from './Buttons/Icon';
+import { downLoadIcon, infoIconAbout, timeIcon, disableUpdates, requency, closeTimer } from './Buttons/Icon';
 import { OVERVIEWTABS, DETAILTABS, NNILOGO } from './stateless-component/NNItabs';
 import { EXPERIMENT } from '../static/datamodel';
 import '../static/style/nav/nav.scss';
@@ -22,7 +24,10 @@ const stackTokens: IStackTokens = {
 };
 const stackStyle: IStackStyles = {
     root: {
-        minWidth: 400, height: 56, display: 'flex', verticalAlign: 'center'
+        minWidth: 400,
+        height: 56,
+        display: 'flex',
+        verticalAlign: 'center'
     }
 };
 
@@ -43,7 +48,6 @@ interface NavProps {
 }
 
 class NavCon extends React.Component<NavProps, NavState> {
-
     constructor(props: NavProps) {
         super(props);
         this.state = {
@@ -61,49 +65,48 @@ class NavCon extends React.Component<NavProps, NavState> {
     // to see & download experiment parameters
     showExpcontent = (): void => {
         this.setState({ isvisibleExperimentDrawer: true });
-    }
+    };
 
     // to see & download dispatcher | nnimanager log
     showDispatcherLog = (): void => {
         this.setState({ isvisibleLogDrawer: true });
-    }
+    };
 
     // close log drawer (nnimanager.dispatcher)
     closeLogDrawer = (): void => {
         this.setState({ isvisibleLogDrawer: false });
-    }
+    };
 
     // close download experiment parameters drawer
     closeExpDrawer = (): void => {
         this.setState({ isvisibleExperimentDrawer: false });
-    }
+    };
 
     getNNIversion = (): void => {
         axios(`${MANAGER_IP}/version`, {
             method: 'GET'
-        })
-            .then(res => {
-                if (res.status === 200) {
-                    this.setState({ version: res.data });
-                }
-            });
-    }
+        }).then(res => {
+            if (res.status === 200) {
+                this.setState({ version: res.data });
+            }
+        });
+    };
 
     openGithub = (): void => {
         const { version } = this.state;
         const feed = `https://github.com/Microsoft/nni/issues/new?labels=${version}`;
         window.open(feed);
-    }
+    };
 
     openDocs = (): void => {
         window.open(WEBUIDOC);
-    }
+    };
 
     openGithubNNI = (): void => {
         const { version } = this.state;
         const nniLink = `https://github.com/Microsoft/nni/tree/${version}`;
         window.open(nniLink);
-    }
+    };
 
     getInterval = (num: number): void => {
         this.props.changeInterval(num); // notice parent component
@@ -111,15 +114,14 @@ class NavCon extends React.Component<NavProps, NavState> {
             refreshFrequency: num === 0 ? '' : num,
             refreshText: num === 0 ? 'Disable auto' : 'Auto refresh'
         }));
-    }
+    };
 
     componentDidMount(): void {
         this.getNNIversion();
     }
 
     render(): React.ReactNode {
-        const { isvisibleLogDrawer, isvisibleExperimentDrawer, version,
-            refreshText, refreshFrequency } = this.state;
+        const { isvisibleLogDrawer, isvisibleExperimentDrawer, version, refreshText, refreshFrequency } = this.state;
         const aboutProps: IContextualMenuProps = {
             items: [
                 {
@@ -143,14 +145,14 @@ class NavCon extends React.Component<NavProps, NavState> {
             ]
         };
         return (
-            <Stack horizontal className="nav">
+            <Stack horizontal className='nav'>
                 <StackItem grow={30} styles={{ root: { minWidth: 300, display: 'flex', verticalAlign: 'center' } }}>
-                    <span className="desktop-logo">{NNILOGO}</span>
-                    <span className="left-right-margin">{OVERVIEWTABS}</span>
+                    <span className='desktop-logo'>{NNILOGO}</span>
+                    <span className='left-right-margin'>{OVERVIEWTABS}</span>
                     <span>{DETAILTABS}</span>
                 </StackItem>
-                <StackItem grow={70} className="navOptions">
-                    <Stack horizontal horizontalAlign="end" tokens={stackTokens} styles={stackStyle}>
+                <StackItem grow={70} className='navOptions'>
+                    <Stack horizontal horizontalAlign='end' tokens={stackTokens} styles={stackStyle}>
                         {/* refresh button danyi*/}
                         {/* TODO: fix bug */}
                         {/* <CommandBarButton
@@ -158,29 +160,23 @@ class NavCon extends React.Component<NavProps, NavState> {
                             text="Refresh"
                             onClick={this.props.refreshFunction}
                         /> */}
-                        <div className="nav-refresh">
+                        <div className='nav-refresh'>
                             <CommandBarButton
                                 iconProps={refreshFrequency === '' ? disableUpdates : timeIcon}
                                 text={refreshText}
                                 menuProps={this.refreshProps}
                             />
-                            <div className="nav-refresh-num">{refreshFrequency}</div>
+                            <div className='nav-refresh-num'>{refreshFrequency}</div>
                         </div>
-                        <CommandBarButton
-                            iconProps={downLoadIcon}
-                            text="Download"
-                            menuProps={this.menuProps}
-                        />
-                        <CommandBarButton
-                            iconProps={infoIconAbout}
-                            text="About"
-                            menuProps={aboutProps}
-                        />
+                        <CommandBarButton iconProps={downLoadIcon} text='Download' menuProps={this.menuProps} />
+                        <CommandBarButton iconProps={infoIconAbout} text='About' menuProps={aboutProps} />
                     </Stack>
                 </StackItem>
                 {/* the drawer for dispatcher & nnimanager log message */}
                 {isvisibleLogDrawer && <LogPanel closeDrawer={this.closeLogDrawer} />}
-                {isvisibleExperimentDrawer && <ExperimentPanel closeExpDrawer={this.closeExpDrawer} experimentProfile={EXPERIMENT.profile} />}
+                {isvisibleExperimentDrawer && (
+                    <ExperimentPanel closeExpDrawer={this.closeExpDrawer} experimentProfile={EXPERIMENT.profile} />
+                )}
             </Stack>
         );
     }
@@ -236,8 +232,7 @@ class NavCon extends React.Component<NavProps, NavState> {
                 text: 'Refresh every 1min',
                 iconProps: requency,
                 onClick: this.getInterval.bind(this, 60)
-            },
-
+            }
         ]
     };
 }
diff --git a/src/webui/src/components/Overview.tsx b/src/webui/src/components/Overview.tsx
index 54e5f5ba5c..a5e349da8b 100644
--- a/src/webui/src/components/Overview.tsx
+++ b/src/webui/src/components/Overview.tsx
@@ -38,25 +38,24 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
         // #999 panel active bgcolor; #b3b3b3 as usual
         const { changeMetricGraphMode } = this.props;
         changeMetricGraphMode('max');
-    }
-
+    };
 
     clickMinTop = (event: React.SyntheticEvent<EventTarget>): void => {
         event.stopPropagation();
         const { changeMetricGraphMode } = this.props;
         changeMetricGraphMode('min');
-    }
+    };
 
     changeConcurrency = (val: number): void => {
         this.setState({ trialConcurrency: val });
-    }
+    };
 
     // updateEntries = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
     updateEntries = (event: React.FormEvent<HTMLDivElement>, item: any): void => {
         if (item !== undefined) {
             this.props.changeEntries(item.key);
         }
-    }
+    };
 
     render(): React.ReactNode {
         const { trialConcurrency } = this.state;
@@ -67,11 +66,11 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
         const accuracyGraphData = this.generateAccuracyGraph(bestTrials);
         const noDataMessage = bestTrials.length > 0 ? '' : 'No data';
 
-        const titleMaxbgcolor = (metricGraphMode === 'max' ? '#333' : '#b3b3b3');
-        const titleMinbgcolor = (metricGraphMode === 'min' ? '#333' : '#b3b3b3');
+        const titleMaxbgcolor = metricGraphMode === 'max' ? '#333' : '#b3b3b3';
+        const titleMinbgcolor = metricGraphMode === 'min' ? '#333' : '#b3b3b3';
 
         const stackTokens: IStackTokens = {
-            childrenGap: 30,
+            childrenGap: 30
         };
 
         const entriesOption = [
@@ -82,17 +81,17 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
             { key: '100', text: 'Display top 100 trials' }
         ];
         return (
-            <div className="overview">
+            <div className='overview'>
                 {/* status and experiment block */}
-                <Stack className="bottomDiv bgNNI">
-                    <Title1 text="Experiment" icon="11.png" />
+                <Stack className='bottomDiv bgNNI'>
+                    <Title1 text='Experiment' icon='11.png' />
                     <BasicInfo experimentUpdateBroadcast={experimentUpdateBroadcast} />
                 </Stack>
 
-                <Stack horizontal className="overMessage bottomDiv">
+                <Stack horizontal className='overMessage bottomDiv'>
                     {/* status block */}
-                    <Stack.Item grow className="prograph bgNNI borderRight">
-                        <Title1 text="Status" icon="5.png" />
+                    <Stack.Item grow className='prograph bgNNI borderRight'>
+                        <Title1 text='Status' icon='5.png' />
                         <Progressed
                             bestAccuracy={bestAccuracy}
                             concurrency={trialConcurrency}
@@ -101,18 +100,18 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
                         />
                     </Stack.Item>
                     {/* experiment parameters search space tuner assessor... */}
-                    <Stack.Item grow styles={{root: {width: 450}}} className="overviewBoder borderRight bgNNI">
-                        <Title1 text="Search space" icon="10.png" />
-                        <Stack className="experiment">
+                    <Stack.Item grow styles={{ root: { width: 450 } }} className='overviewBoder borderRight bgNNI'>
+                        <Title1 text='Search space' icon='10.png' />
+                        <Stack className='experiment'>
                             <SearchSpace searchSpace={EXPERIMENT.searchSpace} />
                         </Stack>
                     </Stack.Item>
                     {/* <Stack.Item grow styles={{root: {width: 450}}} className="bgNNI"> */}
-                    <Stack.Item grow styles={{root: {width: 450}}} className="bgNNI">
-                        <Title1 text="Config" icon="4.png" />
-                        <Stack className="experiment">
+                    <Stack.Item grow styles={{ root: { width: 450 } }} className='bgNNI'>
+                        <Title1 text='Config' icon='4.png' />
+                        <Stack className='experiment'>
                             {/* the scroll bar all the trial profile in the searchSpace div*/}
-                            <div className="experiment searchSpace">
+                            <div className='experiment searchSpace'>
                                 <TrialInfo
                                     experimentUpdateBroadcast={experimentUpdateBroadcast}
                                     concurrency={trialConcurrency}
@@ -122,21 +121,15 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
                     </Stack.Item>
                 </Stack>
 
-                <Stack style={{backgroundColor: '#fff'}}>
-                    <Stack horizontal className="top10bg" style={{position: 'relative'}}>
-                        <div
-                            className="title"
-                            onClick={this.clickMaxTop}
-                        >
-                            <Title1 text="Top maximal trials" icon="max.png" fontColor={titleMaxbgcolor} />
+                <Stack style={{ backgroundColor: '#fff' }}>
+                    <Stack horizontal className='top10bg' style={{ position: 'relative' }}>
+                        <div className='title' onClick={this.clickMaxTop}>
+                            <Title1 text='Top maximal trials' icon='max.png' fontColor={titleMaxbgcolor} />
                         </div>
-                        <div
-                            className="title minTitle"
-                            onClick={this.clickMinTop}
-                        >
-                            <Title1 text="Top minimal trials" icon="min.png" fontColor={titleMinbgcolor} />
+                        <div className='title minTitle' onClick={this.clickMinTop}>
+                            <Title1 text='Top minimal trials' icon='min.png' fontColor={titleMinbgcolor} />
                         </div>
-                        <div style={{position: 'absolute', right: 52, top: 6}}>
+                        <div style={{ position: 'absolute', right: 52, top: 6 }}>
                             <Dropdown
                                 selectedKey={bestTrialEntries}
                                 options={entriesOption}
@@ -146,14 +139,10 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
                         </div>
                     </Stack>
                     <Stack horizontal tokens={stackTokens}>
-                        <div style={{ width: '40%', position: 'relative'}}>
-                            <Accuracy
-                                accuracyData={accuracyGraphData}
-                                accNodata={noDataMessage}
-                                height={404}
-                            />
+                        <div style={{ width: '40%', position: 'relative' }}>
+                            <Accuracy accuracyData={accuracyGraphData} accNodata={noDataMessage} height={404} />
                         </div>
-                        <div style={{ width: '60%'}}>
+                        <div style={{ width: '60%' }}>
                             <SuccessTable trialIds={bestTrials.map(trial => trial.info.id)} />
                         </div>
                     </Stack>
@@ -197,11 +186,13 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
                 scale: true,
                 data: ySequence
             },
-            series: [{
-                symbolSize: 6,
-                type: 'scatter',
-                data: ySequence
-            }]
+            series: [
+                {
+                    symbolSize: 6,
+                    type: 'scatter',
+                    data: ySequence
+                }
+            ]
         };
     }
 }
diff --git a/src/webui/src/components/TrialsDetail.tsx b/src/webui/src/components/TrialsDetail.tsx
index 7f8317ee58..d2e9d3ae40 100644
--- a/src/webui/src/components/TrialsDetail.tsx
+++ b/src/webui/src/components/TrialsDetail.tsx
@@ -1,7 +1,5 @@
 import * as React from 'react';
-import {
-    Stack, StackItem, Pivot, PivotItem, Dropdown, IDropdownOption, DefaultButton
-} from 'office-ui-fabric-react';
+import { Stack, StackItem, Pivot, PivotItem, Dropdown, IDropdownOption, DefaultButton } from 'office-ui-fabric-react';
 import { EXPERIMENT, TRIALS } from '../static/datamodel';
 import { Trial } from '../static/model/trial';
 import { tableListIcon } from './Buttons/Icon';
@@ -28,7 +26,6 @@ interface TrialsDetailProps {
 }
 
 class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState> {
-
     public interAccuracy = 0;
     public interAllTableList = 2;
 
@@ -73,17 +70,17 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
                 alert(`Unexpected search filter ${this.state.searchType}`);
         }
         this.setState({ searchFilter: filter });
-    }
+    };
 
     handleTablePageSizeSelect = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
         if (item !== undefined) {
             this.setState({ tablePageSize: item.text === 'all' ? -1 : parseInt(item.text, 10) });
         }
-    }
+    };
 
     handleWhichTabs = (item: any): void => {
-        this.setState({whichChart: item.props.headerText});
-    }
+        this.setState({ whichChart: item.props.headerText });
+    };
 
     updateSearchFilterType = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
         // clear input value and re-render table
@@ -93,7 +90,7 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
             }
             this.setState(() => ({ searchType: item.key.toString() }));
         }
-    }
+    };
 
     render(): React.ReactNode {
         const { tablePageSize, whichChart, searchType } = this.state;
@@ -104,15 +101,20 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
             { key: 'id', text: 'Id' },
             { key: 'Trial No.', text: 'Trial No.' },
             { key: 'status', text: 'Status' },
-            { key: 'parameters', text: 'Parameters' },
+            { key: 'parameters', text: 'Parameters' }
         ];
         return (
             <div>
-                <div className="trial" id="tabsty">
-                    <Pivot defaultSelectedKey={"0"} className="detial-title" onLinkClick={this.handleWhichTabs} selectedKey={whichChart}>
+                <div className='trial' id='tabsty'>
+                    <Pivot
+                        defaultSelectedKey={'0'}
+                        className='detial-title'
+                        onLinkClick={this.handleWhichTabs}
+                        selectedKey={whichChart}
+                    >
                         {/* <PivotItem tab={this.titleOfacc} key="1"> doesn't work*/}
-                        <PivotItem headerText="Default metric" itemIcon="HomeGroup" key="Default metric">
-                            <Stack className="graph">
+                        <PivotItem headerText='Default metric' itemIcon='HomeGroup' key='Default metric'>
+                            <Stack className='graph'>
                                 <DefaultPoint
                                     trialIds={trialIds}
                                     visible={whichChart === 'Default metric'}
@@ -121,21 +123,21 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
                             </Stack>
                         </PivotItem>
                         {/* <PivotItem tab={this.titleOfhyper} key="2"> */}
-                        <PivotItem headerText="Hyper-parameter" itemIcon="Equalizer" key="Hyper-parameter">
-                            <Stack className="graph">
-                                <Para
-                                    trials={source}
-                                    searchSpace={EXPERIMENT.searchSpaceNew}
-                                    whichChart={whichChart}
-                                />
+                        <PivotItem headerText='Hyper-parameter' itemIcon='Equalizer' key='Hyper-parameter'>
+                            <Stack className='graph'>
+                                <Para trials={source} searchSpace={EXPERIMENT.searchSpaceNew} whichChart={whichChart} />
                             </Stack>
                         </PivotItem>
                         {/* <PivotItem tab={this.titleOfDuration} key="3"> */}
-                        <PivotItem headerText="Duration" itemIcon="BarChartHorizontal" key="Duration">
+                        <PivotItem headerText='Duration' itemIcon='BarChartHorizontal' key='Duration'>
                             <Duration source={source} whichChart={whichChart} />
                         </PivotItem>
                         {/* <PivotItem tab={this.titleOfIntermediate} key="4"> */}
-                        <PivotItem headerText="Intermediate result" itemIcon="StackedLineChart" key="Intermediate result">
+                        <PivotItem
+                            headerText='Intermediate result'
+                            itemIcon='StackedLineChart'
+                            key='Intermediate result'
+                        >
                             {/* *why this graph has small footprint? */}
                             <Intermediate source={source} whichChart={whichChart} />
                         </PivotItem>
@@ -143,25 +145,33 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
                 </div>
                 {/* trial table list */}
                 <div style={{ backgroundColor: '#fff' }}>
-                    <Stack horizontal className="panelTitle" style={{ marginTop: 10 }}>
+                    <Stack horizontal className='panelTitle' style={{ marginTop: 10 }}>
                         <span style={{ marginRight: 12 }}>{tableListIcon}</span>
                         <span>Trial jobs</span>
                     </Stack>
-                    <Stack horizontal className="allList">
+                    <Stack horizontal className='allList'>
                         <StackItem grow={50}>
                             <DefaultButton
-                                text="Compare"
-                                className="allList-compare"
+                                text='Compare'
+                                className='allList-compare'
                                 // use child-component tableList's function, the function is in child-component.
-                                onClick={(): void => { if (this.tableList) { this.tableList.compareBtn(); } }}
+                                onClick={(): void => {
+                                    if (this.tableList) {
+                                        this.tableList.compareBtn();
+                                    }
+                                }}
                             />
                         </StackItem>
                         <StackItem grow={50}>
-                            <Stack horizontal horizontalAlign="end" className="allList">
+                            <Stack horizontal horizontalAlign='end' className='allList'>
                                 <DefaultButton
-                                    className="allList-button-gap"
-                                    text="Add column"
-                                    onClick={(): void => { if (this.tableList) { this.tableList.addColumn(); } }}
+                                    className='allList-button-gap'
+                                    text='Add column'
+                                    onClick={(): void => {
+                                        if (this.tableList) {
+                                            this.tableList.addColumn();
+                                        }
+                                    }}
                                 />
                                 <Dropdown
                                     selectedKey={searchType}
@@ -170,12 +180,12 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
                                     styles={{ root: { width: 150 } }}
                                 />
                                 <input
-                                    type="text"
-                                    className="allList-search-input"
+                                    type='text'
+                                    className='allList-search-input'
                                     placeholder={`Search by ${this.state.searchType}`}
                                     onChange={this.searchTrial}
                                     style={{ width: 230 }}
-                                    ref={(text): any => (this.searchInput) = text}
+                                    ref={(text): any => (this.searchInput = text)}
                                 />
                             </Stack>
                         </StackItem>
@@ -187,7 +197,7 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
                         changeColumn={changeColumn}
                         trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
                         // TODO: change any to specific type
-                        ref={(tabList): any => this.tableList = tabList}
+                        ref={(tabList): any => (this.tableList = tabList)}
                     />
                 </div>
             </div>
diff --git a/src/webui/src/components/overview/Accuracy.tsx b/src/webui/src/components/overview/Accuracy.tsx
index 0a4f305887..2f2fd9253b 100644
--- a/src/webui/src/components/overview/Accuracy.tsx
+++ b/src/webui/src/components/overview/Accuracy.tsx
@@ -15,10 +15,8 @@ interface AccuracyProps {
 }
 
 class Accuracy extends React.Component<AccuracyProps, {}> {
-
     constructor(props: AccuracyProps) {
         super(props);
-
     }
 
     render(): React.ReactNode {
@@ -29,14 +27,14 @@ class Accuracy extends React.Component<AccuracyProps, {}> {
                     option={accuracyData}
                     style={{
                         height: height,
-                        margin: '0 auto',
+                        margin: '0 auto'
                     }}
-                    theme="my_theme"
+                    theme='my_theme'
                 />
-                <div className="showMess">{accNodata}</div>
+                <div className='showMess'>{accNodata}</div>
             </div>
         );
     }
 }
 
-export default Accuracy;
\ No newline at end of file
+export default Accuracy;
diff --git a/src/webui/src/components/overview/BasicInfo.tsx b/src/webui/src/components/overview/BasicInfo.tsx
index 63977386a9..c49ed1f1c7 100644
--- a/src/webui/src/components/overview/BasicInfo.tsx
+++ b/src/webui/src/components/overview/BasicInfo.tsx
@@ -18,28 +18,28 @@ class BasicInfo extends React.Component<BasicInfoProps, {}> {
 
     render(): React.ReactNode {
         return (
-            <Stack horizontal horizontalAlign="space-between" className="main">
-                <Stack.Item grow={3} className="padItem basic">
+            <Stack horizontal horizontalAlign='space-between' className='main'>
+                <Stack.Item grow={3} className='padItem basic'>
                     <p>Name</p>
                     <div>{EXPERIMENT.profile.params.experimentName}</div>
                 </Stack.Item>
-                <Stack.Item grow={3} className="padItem basic">
+                <Stack.Item grow={3} className='padItem basic'>
                     <p>ID</p>
                     <div>{EXPERIMENT.profile.id}</div>
                 </Stack.Item>
-                <Stack.Item grow={3} className="padItem basic">
+                <Stack.Item grow={3} className='padItem basic'>
                     <p>Start time</p>
-                    <div className="nowrap">{formatTimestamp(EXPERIMENT.profile.startTime)}</div>
+                    <div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.startTime)}</div>
                 </Stack.Item>
-                <Stack.Item grow={3} className="padItem basic">
+                <Stack.Item grow={3} className='padItem basic'>
                     <p>End time</p>
-                    <div className="nowrap">{formatTimestamp(EXPERIMENT.profile.endTime)}</div>
+                    <div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.endTime)}</div>
                 </Stack.Item>
-                <Stack.Item  className="padItem basic">
+                <Stack.Item className='padItem basic'>
                     <p>Log directory</p>
-                    <div className="nowrap">
+                    <div className='nowrap'>
                         <TooltipHost
-                            // Tooltip message content 
+                            // Tooltip message content
                             content={EXPERIMENT.profile.logDir || 'unknown'}
                             id={this._hostId}
                             calloutProps={{ gapSpace: 0 }}
@@ -50,11 +50,10 @@ class BasicInfo extends React.Component<BasicInfoProps, {}> {
                         </TooltipHost>
                     </div>
                 </Stack.Item>
-                <Stack.Item  className="padItem basic">
+                <Stack.Item className='padItem basic'>
                     <p>Training platform</p>
-                    <div className="nowrap">{EXPERIMENT.profile.params.trainingServicePlatform}</div>
+                    <div className='nowrap'>{EXPERIMENT.profile.params.trainingServicePlatform}</div>
                 </Stack.Item>
-
             </Stack>
         );
     }
diff --git a/src/webui/src/components/overview/Details.tsx b/src/webui/src/components/overview/Details.tsx
index 9af40159ce..f3c3430c9e 100644
--- a/src/webui/src/components/overview/Details.tsx
+++ b/src/webui/src/components/overview/Details.tsx
@@ -11,7 +11,6 @@ interface DetailsState {
 }
 
 class Details extends React.Component<DetailsProps, DetailsState> {
-
     constructor(props: DetailsProps) {
         super(props);
         this.state = { isExpand: false };
@@ -22,9 +21,11 @@ class Details extends React.Component<DetailsProps, DetailsState> {
         const { isExpand } = this.state;
         return (
             <div>
-                <div onClick={(): void => {
-                    this.setState(() => ({ isExpand: !isExpand }));
-                }}>
+                <div
+                    onClick={(): void => {
+                        this.setState(() => ({ isExpand: !isExpand }));
+                    }}
+                >
                     <DetailsRow {...detailsProps} />
                 </div>
                 {isExpand && <OpenRow trialId={detailsProps.item.id} />}
@@ -33,4 +34,4 @@ class Details extends React.Component<DetailsProps, DetailsState> {
     }
 }
 
-export default Details;
\ No newline at end of file
+export default Details;
diff --git a/src/webui/src/components/overview/NumInput.tsx b/src/webui/src/components/overview/NumInput.tsx
index 1420c952da..9313f713f2 100644
--- a/src/webui/src/components/overview/NumInput.tsx
+++ b/src/webui/src/components/overview/NumInput.tsx
@@ -23,32 +23,29 @@ class ConcurrencyInput extends React.Component<ConcurrencyInputProps, Concurrenc
             this.props.updateValue(this.input.current.value);
             this.setState({ editting: false });
         }
-    }
+    };
 
     cancel = (): void => {
         this.setState({ editting: false });
-    }
+    };
 
     edit = (): void => {
         this.setState({ editting: true });
-    }
+    };
 
     render(): React.ReactNode {
         if (this.state.editting) {
             return (
-                <Stack horizontal className="inputBox">
+                <Stack horizontal className='inputBox'>
                     <input
-                        type="number"
-                        className="concurrencyInput"
+                        type='number'
+                        className='concurrencyInput'
                         defaultValue={this.props.value.toString()}
                         ref={this.input}
                     />
+                    <PrimaryButton text='Save' onClick={this.save} />
                     <PrimaryButton
-                        text="Save"
-                        onClick={this.save}
-                    />
-                    <PrimaryButton
-                        text="Cancel"
+                        text='Cancel'
                         style={{ display: 'inline-block', marginLeft: 1 }}
                         onClick={this.cancel}
                     />
@@ -56,17 +53,9 @@ class ConcurrencyInput extends React.Component<ConcurrencyInputProps, Concurrenc
             );
         } else {
             return (
-                <Stack horizontal className="inputBox">
-                    <input
-                        type="number"
-                        className="concurrencyInput"
-                        disabled={true}
-                        value={this.props.value}
-                    />
-                    <PrimaryButton
-                        text="Edit"
-                        onClick={this.edit}
-                    />
+                <Stack horizontal className='inputBox'>
+                    <input type='number' className='concurrencyInput' disabled={true} value={this.props.value} />
+                    <PrimaryButton text='Edit' onClick={this.edit} />
                 </Stack>
             );
         }
diff --git a/src/webui/src/components/overview/Progress.tsx b/src/webui/src/components/overview/Progress.tsx
index c21e9e8921..9b3d1cd184 100644
--- a/src/webui/src/components/overview/Progress.tsx
+++ b/src/webui/src/components/overview/Progress.tsx
@@ -1,7 +1,15 @@
 import * as React from 'react';
 import {
-    Stack, Callout, Link, IconButton, FontWeights, mergeStyleSets,
-    getId, getTheme, StackItem, TooltipHost
+    Stack,
+    Callout,
+    Link,
+    IconButton,
+    FontWeights,
+    mergeStyleSets,
+    getId,
+    getTheme,
+    StackItem,
+    TooltipHost
 } from 'office-ui-fabric-react';
 import axios from 'axios';
 import { MANAGER_IP, CONCURRENCYTOOLTIP } from '../../static/const';
@@ -11,7 +19,7 @@ import ConcurrencyInput from './NumInput';
 import ProgressBar from './ProgressItem';
 import LogDrawer from '../Modals/LogPanel';
 import MessageInfo from '../Modals/MessageInfo';
-import { infoIcon } from "../Buttons/Icon";
+import { infoIcon } from '../Buttons/Icon';
 import '../../static/style/progress.scss';
 import '../../static/style/probar.scss';
 interface ProgressProps {
@@ -100,20 +108,21 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
 
     hideSucceedInfo = (): void => {
         this.setState(() => ({ isShowSucceedInfo: false }));
-    }
+    };
 
     /**
      * info: message content
      * typeInfo: message type: success | error...
-     * continuousTime: show time, 2000ms 
+     * continuousTime: show time, 2000ms
      */
     showMessageInfo = (info: string, typeInfo: string): void => {
         this.setState(() => ({
-            info, typeInfo,
+            info,
+            typeInfo,
             isShowSucceedInfo: true
         }));
         setTimeout(this.hideSucceedInfo, 2000);
-    }
+    };
 
     editTrialConcurrency = async (userInput: string): Promise<void> => {
         if (!userInput.match(/^[1-9]\d*$/)) {
@@ -144,30 +153,33 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
             if (error.response && error.response.data.error) {
                 this.showMessageInfo(`Failed to update trial concurrency\n${error.response.data.error}`, 'error');
             } else if (error.response) {
-                this.showMessageInfo(`Failed to update trial concurrency\nServer responsed ${error.response.status}`, 'error');
+                this.showMessageInfo(
+                    `Failed to update trial concurrency\nServer responsed ${error.response.status}`,
+                    'error'
+                );
             } else if (error.message) {
                 this.showMessageInfo(`Failed to update trial concurrency\n${error.message}`, 'error');
             } else {
                 this.showMessageInfo(`Failed to update trial concurrency\nUnknown error`, 'error');
             }
         }
-    }
+    };
 
     isShowDrawer = (): void => {
         this.setState({ isShowLogDrawer: true });
-    }
+    };
 
     closeDrawer = (): void => {
         this.setState({ isShowLogDrawer: false });
-    }
+    };
 
     onDismiss = (): void => {
         this.setState({ isCalloutVisible: false });
-    }
+    };
 
     onShow = (): void => {
         this.setState({ isCalloutVisible: true });
-    }
+    };
 
     render(): React.ReactNode {
         const { bestAccuracy } = this.props;
@@ -187,123 +199,117 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
         const execDuration = convertTime(EXPERIMENT.profile.execDuration);
 
         return (
-            <Stack className="progress" id="barBack">
-                <Stack className="basic lineBasic">
+            <Stack className='progress' id='barBack'>
+                <Stack className='basic lineBasic'>
                     <p>Status</p>
-                    <Stack horizontal className="status">
+                    <Stack horizontal className='status'>
                         <span className={`${EXPERIMENT.status} status-text`}>{EXPERIMENT.status}</span>
-                        {
-                            EXPERIMENT.status === 'ERROR'
-                                ?
-                                <div>
-                                    <div className={styles.buttonArea} ref={(val): any => this.menuButtonElement = val}>
-                                        <IconButton
-                                            iconProps={{ iconName: 'info' }}
-                                            onClick={isCalloutVisible ? this.onDismiss : this.onShow}
-                                        />
-                                    </div>
-                                    {isCalloutVisible && (
-                                        <Callout
-                                            className={styles.callout}
-                                            ariaLabelledBy={this.labelId}
-                                            ariaDescribedBy={this.descriptionId}
-                                            role="alertdialog"
-                                            gapSpace={0}
-                                            target={this.menuButtonElement}
-                                            onDismiss={this.onDismiss}
-                                            setInitialFocus={true}
-                                        >
-                                            <div className={styles.header}>
-                                                <p className={styles.title} id={this.labelId}>Error</p>
-                                            </div>
-                                            <div className={styles.inner}>
-                                                <p className={styles.subtext} id={this.descriptionId}>
-                                                    {EXPERIMENT.error}
-                                                </p>
-                                                <div className={styles.actions}>
-                                                    <Link className={styles.link} onClick={this.isShowDrawer}>
-                                                        Learn about
-                                                    </Link>
-                                                </div>
-                                            </div>
-                                        </Callout>
-                                    )}
+                        {EXPERIMENT.status === 'ERROR' ? (
+                            <div>
+                                <div className={styles.buttonArea} ref={(val): any => (this.menuButtonElement = val)}>
+                                    <IconButton
+                                        iconProps={{ iconName: 'info' }}
+                                        onClick={isCalloutVisible ? this.onDismiss : this.onShow}
+                                    />
                                 </div>
-                                :
-                                null
-                        }
+                                {isCalloutVisible && (
+                                    <Callout
+                                        className={styles.callout}
+                                        ariaLabelledBy={this.labelId}
+                                        ariaDescribedBy={this.descriptionId}
+                                        role='alertdialog'
+                                        gapSpace={0}
+                                        target={this.menuButtonElement}
+                                        onDismiss={this.onDismiss}
+                                        setInitialFocus={true}
+                                    >
+                                        <div className={styles.header}>
+                                            <p className={styles.title} id={this.labelId}>
+                                                Error
+                                            </p>
+                                        </div>
+                                        <div className={styles.inner}>
+                                            <p className={styles.subtext} id={this.descriptionId}>
+                                                {EXPERIMENT.error}
+                                            </p>
+                                            <div className={styles.actions}>
+                                                <Link className={styles.link} onClick={this.isShowDrawer}>
+                                                    Learn about
+                                                </Link>
+                                            </div>
+                                        </div>
+                                    </Callout>
+                                )}
+                            </div>
+                        ) : null}
                     </Stack>
                 </Stack>
                 <ProgressBar
-                    who="Duration"
+                    who='Duration'
                     percent={percent}
                     description={execDuration}
                     bgclass={EXPERIMENT.status}
                     maxString={`Max duration: ${maxDuration}`}
                 />
                 <ProgressBar
-                    who="Trial numbers"
+                    who='Trial numbers'
                     percent={bar2Percent}
                     description={bar2.toString()}
                     bgclass={EXPERIMENT.status}
                     maxString={`Max trial number: ${maxTrialNum}`}
                 />
-                <Stack className="basic colorOfbasic mess" horizontal>
+                <Stack className='basic colorOfbasic mess' horizontal>
                     <StackItem grow={50}>
                         <p>Best metric</p>
                         <div>{isNaN(bestAccuracy) ? 'N/A' : bestAccuracy.toFixed(6)}</div>
                     </StackItem>
                     <StackItem>
-                        {isShowSucceedInfo && <MessageInfo className="info" typeInfo={typeInfo} info={info} />}
+                        {isShowSucceedInfo && <MessageInfo className='info' typeInfo={typeInfo} info={info} />}
                     </StackItem>
                 </Stack>
-                <Stack horizontal horizontalAlign="space-between" className="mess">
-                    <span style={itemStyles} className="basic colorOfbasic">
+                <Stack horizontal horizontalAlign='space-between' className='mess'>
+                    <span style={itemStyles} className='basic colorOfbasic'>
                         <p>Spent</p>
                         <div>{execDuration}</div>
                     </span>
-                    <span style={itemStyles} className="basic colorOfbasic">
+                    <span style={itemStyles} className='basic colorOfbasic'>
                         <p>Remaining</p>
-                        <div className="time">{remaining}</div>
+                        <div className='time'>{remaining}</div>
                     </span>
                     <span style={itemStyles}>
                         {/* modify concurrency */}
                         <TooltipHost content={CONCURRENCYTOOLTIP}>
-                        <p className="cursor">Concurrency<span className="progress-info">{infoIcon}</span></p>
+                            <p className='cursor'>
+                                Concurrency<span className='progress-info'>{infoIcon}</span>
+                            </p>
                         </TooltipHost>
                         <ConcurrencyInput value={this.props.concurrency} updateValue={this.editTrialConcurrency} />
                     </span>
-                    <span style={itemStyles} className="basic colorOfbasic"></span>
+                    <span style={itemStyles} className='basic colorOfbasic'></span>
                 </Stack>
-                <Stack horizontal horizontalAlign="space-between" className="mess">
-                    <div style={itemStyles} className="basic colorOfbasic">
+                <Stack horizontal horizontalAlign='space-between' className='mess'>
+                    <div style={itemStyles} className='basic colorOfbasic'>
                         <p>Running</p>
                         <div>{count.get('RUNNING')}</div>
                     </div>
-                    <div style={itemStyles} className="basic colorOfbasic">
+                    <div style={itemStyles} className='basic colorOfbasic'>
                         <p>Succeeded</p>
                         <div>{count.get('SUCCEEDED')}</div>
                     </div>
-                    <div style={itemStyles} className="basic">
+                    <div style={itemStyles} className='basic'>
                         <p>Stopped</p>
                         <div>{stoppedCount}</div>
                     </div>
-                    <div style={itemStyles} className="basic">
+                    <div style={itemStyles} className='basic'>
                         <p>Failed</p>
                         <div>{count.get('FAILED')}</div>
                     </div>
                 </Stack>
                 {/* learn about click -> default active key is dispatcher. */}
-                {isShowLogDrawer ? (
-                    <LogDrawer
-                        closeDrawer={this.closeDrawer}
-                        activeTab="dispatcher"
-                    />
-                ) : null}
+                {isShowLogDrawer ? <LogDrawer closeDrawer={this.closeDrawer} activeTab='dispatcher' /> : null}
             </Stack>
         );
     }
-
 }
 
 export default Progressed;
diff --git a/src/webui/src/components/overview/ProgressItem.tsx b/src/webui/src/components/overview/ProgressItem.tsx
index 3c531f7e95..b75361f126 100644
--- a/src/webui/src/components/overview/ProgressItem.tsx
+++ b/src/webui/src/components/overview/ProgressItem.tsx
@@ -10,10 +10,8 @@ interface ProItemProps {
 }
 
 class ProgressBar extends React.Component<ProItemProps, {}> {
-
     constructor(props: ProItemProps) {
         super(props);
-
     }
 
     render(): React.ReactNode {
@@ -21,18 +19,19 @@ class ProgressBar extends React.Component<ProItemProps, {}> {
         return (
             <div>
                 <Stack horizontal className={`probar ${bgclass}`}>
-                    <div className="name">{who}</div>
-                    <div className="showProgress" style={{ width: '78%' }}>
-                        <ProgressIndicator
-                            barHeight={30}
-                            percentComplete={percent}
-                        />
-                        <Stack horizontal className="boundary">
+                    <div className='name'>{who}</div>
+                    <div className='showProgress' style={{ width: '78%' }}>
+                        <ProgressIndicator barHeight={30} percentComplete={percent} />
+                        <Stack horizontal className='boundary'>
                             <StackItem grow={30}>0</StackItem>
-                            <StackItem className="right" grow={70}>{maxString}</StackItem>
+                            <StackItem className='right' grow={70}>
+                                {maxString}
+                            </StackItem>
                         </Stack>
                     </div>
-                    <div className="description" style={{ width: '22%' }}>{description}</div>
+                    <div className='description' style={{ width: '22%' }}>
+                        {description}
+                    </div>
                 </Stack>
                 <br />
             </div>
@@ -40,4 +39,4 @@ class ProgressBar extends React.Component<ProItemProps, {}> {
     }
 }
 
-export default ProgressBar;
\ No newline at end of file
+export default ProgressBar;
diff --git a/src/webui/src/components/overview/SearchSpace.tsx b/src/webui/src/components/overview/SearchSpace.tsx
index c5379c0ba9..9532f8b812 100644
--- a/src/webui/src/components/overview/SearchSpace.tsx
+++ b/src/webui/src/components/overview/SearchSpace.tsx
@@ -7,20 +7,18 @@ interface SearchspaceProps {
 }
 
 class SearchSpace extends React.Component<SearchspaceProps, {}> {
-
     constructor(props: SearchspaceProps) {
         super(props);
-
     }
 
     render(): React.ReactNode {
         const { searchSpace } = this.props;
         return (
-            <div className="searchSpace">
+            <div className='searchSpace'>
                 <MonacoEditor
-                    height="361"
-                    language="json"
-                    theme="vs-light"
+                    height='361'
+                    language='json'
+                    theme='vs-light'
                     value={JSON.stringify(searchSpace, null, 2)}
                     options={MONACO}
                 />
@@ -29,4 +27,4 @@ class SearchSpace extends React.Component<SearchspaceProps, {}> {
     }
 }
 
-export default SearchSpace;
\ No newline at end of file
+export default SearchSpace;
diff --git a/src/webui/src/components/overview/SuccessTable.tsx b/src/webui/src/components/overview/SuccessTable.tsx
index 67d1aebfbc..e9534a87e6 100644
--- a/src/webui/src/components/overview/SuccessTable.tsx
+++ b/src/webui/src/components/overview/SuccessTable.tsx
@@ -59,7 +59,9 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
     tooltipStr = (
         <div>
             <p>The experiment is running, please wait for the final metric patiently.</p>
-            <div className="link">You could also find status of trial job with <span>{DETAILTABS}</span> button.</div>
+            <div className='link'>
+                You could also find status of trial job with <span>{DETAILTABS}</span> button.
+            </div>
         </div>
     );
 
@@ -73,7 +75,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
             isResizable: true,
             data: 'number',
             onColumnClick: this.onColumnClick
-        }, {
+        },
+        {
             name: 'ID',
             key: 'id',
             fieldName: 'id',
@@ -83,7 +86,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
             className: 'tableHead leftTitle',
             data: 'string',
             onColumnClick: this.onColumnClick
-        }, {
+        },
+        {
             name: 'Duration',
             key: 'duration',
             minWidth: 100,
@@ -94,10 +98,13 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
             onColumnClick: this.onColumnClick,
             onRender: (item: any): React.ReactNode => {
                 return (
-                    <div className="durationsty"><div>{convertDuration(item.duration)}</div></div>
+                    <div className='durationsty'>
+                        <div>{convertDuration(item.duration)}</div>
+                    </div>
                 );
-            },
-        }, {
+            }
+        },
+        {
             name: 'Status',
             key: 'status',
             minWidth: 140,
@@ -105,11 +112,10 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
             isResizable: true,
             fieldName: 'status',
             onRender: (item: any): React.ReactNode => {
-                return (
-                    <div className={`${item.status} commonStyle`}>{item.status}</div>
-                );
+                return <div className={`${item.status} commonStyle`}>{item.status}</div>;
             }
-        }, {
+        },
+        {
             name: 'Default metric',
             key: 'accuracy',
             fieldName: 'accuracy',
@@ -119,15 +125,13 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
             data: 'number',
             onColumnClick: this.onColumnClick,
             onRender: (item: any): React.ReactNode => {
-                return (
-                    <DefaultMetric trialId={item.id} />
-                );
+                return <DefaultMetric trialId={item.id} />;
             }
         }
     ];
 
     componentDidUpdate(prevProps: SuccessTableProps): void {
-        if(this.props.trialIds !== prevProps.trialIds){
+        if (this.props.trialIds !== prevProps.trialIds) {
             const { trialIds } = this.props;
             this.setState(() => ({ source: TRIALS.table(trialIds) }));
         }
@@ -135,20 +139,20 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
 
     render(): React.ReactNode {
         const { columns, source } = this.state;
-        const isNoneData = (source.length === 0) ? true : false;
-        
+        const isNoneData = source.length === 0 ? true : false;
+
         return (
-            <div id="succTable">
+            <div id='succTable'>
                 <DetailsList
                     columns={columns}
                     items={source}
-                    setKey="set"
+                    setKey='set'
                     compact={true}
                     onRenderRow={this.onRenderRow}
                     selectionMode={0} // close selector function
-                    className="succTable"
+                    className='succTable'
                 />
-                {isNoneData && <div className="succTable-tooltip">{this.tooltipStr}</div>}
+                {isNoneData && <div className='succTable-tooltip'>{this.tooltipStr}</div>}
             </div>
         );
     }
diff --git a/src/webui/src/components/overview/Title1.tsx b/src/webui/src/components/overview/Title1.tsx
index 7cf309b2fe..d86390e493 100644
--- a/src/webui/src/components/overview/Title1.tsx
+++ b/src/webui/src/components/overview/Title1.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Stack} from 'office-ui-fabric-react';
+import { Stack } from 'office-ui-fabric-react';
 import '../../static/style/overviewTitle.scss';
 interface Title1Props {
     text: string;
@@ -8,7 +8,6 @@ interface Title1Props {
 }
 
 class Title1 extends React.Component<Title1Props, {}> {
-
     constructor(props: Title1Props) {
         super(props);
     }
@@ -16,12 +15,12 @@ class Title1 extends React.Component<Title1Props, {}> {
     render(): React.ReactNode {
         const { text, icon, fontColor } = this.props;
         return (
-            <Stack horizontal className="panelTitle">
-                <img src={require(`../../static/img/icon/${icon}`)} alt="icon" />
+            <Stack horizontal className='panelTitle'>
+                <img src={require(`../../static/img/icon/${icon}`)} alt='icon' />
                 <span style={{ color: fontColor }}>{text}</span>
             </Stack>
         );
     }
 }
 
-export default Title1;
\ No newline at end of file
+export default Title1;
diff --git a/src/webui/src/components/overview/TrialProfile.tsx b/src/webui/src/components/overview/TrialProfile.tsx
index 77ae929698..6c49ad4907 100644
--- a/src/webui/src/components/overview/TrialProfile.tsx
+++ b/src/webui/src/components/overview/TrialProfile.tsx
@@ -9,15 +9,19 @@ interface TrialInfoProps {
 }
 
 class TrialInfo extends React.Component<TrialInfoProps, {}> {
-
     constructor(props: TrialInfoProps) {
         super(props);
     }
 
     render(): React.ReactNode {
         const blacklist = [
-            'id', 'logDir', 'startTime', 'endTime',
-            'experimentName', 'searchSpace', 'trainingServicePlatform'
+            'id',
+            'logDir',
+            'startTime',
+            'endTime',
+            'experimentName',
+            'searchSpace',
+            'trainingServicePlatform'
         ];
         const filter = (key: string, val: any): any => {
             if (key === 'trialConcurrency') {
@@ -28,12 +32,12 @@ class TrialInfo extends React.Component<TrialInfoProps, {}> {
         const profile = JSON.stringify(EXPERIMENT.profile, filter, 2);
 
         return (
-            <div className="profile">
+            <div className='profile'>
                 <MonacoEditor
-                    width="100%"
-                    height="361"
-                    language="json"
-                    theme="vs-light"
+                    width='100%'
+                    height='361'
+                    language='json'
+                    theme='vs-light'
                     value={profile}
                     options={MONACO}
                 />
diff --git a/src/webui/src/components/public-child/DefaultMetric.tsx b/src/webui/src/components/public-child/DefaultMetric.tsx
index 252628d729..388a7f1d18 100644
--- a/src/webui/src/components/public-child/DefaultMetric.tsx
+++ b/src/webui/src/components/public-child/DefaultMetric.tsx
@@ -13,9 +13,7 @@ class DefaultMetric extends React.Component<DefaultMetricProps, {}> {
 
     render(): React.ReactNode {
         const accuracy = TRIALS.getTrial(this.props.trialId).accuracy;
-        return (
-            <div>{accuracy !== undefined ? formatAccuracy(accuracy) : '--'}</div>
-        );
+        return <div>{accuracy !== undefined ? formatAccuracy(accuracy) : '--'}</div>;
     }
 }
 
diff --git a/src/webui/src/components/public-child/IntermediateVal.tsx b/src/webui/src/components/public-child/IntermediateVal.tsx
index 45c677f051..1d41b1b41d 100644
--- a/src/webui/src/components/public-child/IntermediateVal.tsx
+++ b/src/webui/src/components/public-child/IntermediateVal.tsx
@@ -11,9 +11,7 @@ class IntermediateVal extends React.Component<IntermediateValProps, {}> {
     }
 
     render(): React.ReactNode {
-        return (
-            <div>{TRIALS.getTrial(this.props.trialId).formatLatestAccuracy()}</div>
-        );
+        return <div>{TRIALS.getTrial(this.props.trialId).formatLatestAccuracy()}</div>;
     }
 }
 
diff --git a/src/webui/src/components/public-child/LogPathChild.tsx b/src/webui/src/components/public-child/LogPathChild.tsx
index 8d2419efac..a73fabc6de 100644
--- a/src/webui/src/components/public-child/LogPathChild.tsx
+++ b/src/webui/src/components/public-child/LogPathChild.tsx
@@ -6,10 +6,8 @@ interface LogpathChildProps {
 }
 
 class LogPathChild extends React.Component<LogpathChildProps, {}> {
-
     constructor(props: LogpathChildProps) {
         super(props);
-
     }
 
     render(): React.ReactNode {
@@ -17,16 +15,15 @@ class LogPathChild extends React.Component<LogpathChildProps, {}> {
         const isLink = /^http/gi.test(eachLogpath);
 
         return (
-            <div className="logpath">
-                <span className="logName">{logName}</span>
-                {
-                    isLink
-                        ?
-                        <a className="logContent logHref" rel="noopener noreferrer" href={eachLogpath} target="_blank">{eachLogpath}</a>
-                        :
-                        <span className="logContent">{eachLogpath}</span>
-
-                }
+            <div className='logpath'>
+                <span className='logName'>{logName}</span>
+                {isLink ? (
+                    <a className='logContent logHref' rel='noopener noreferrer' href={eachLogpath} target='_blank'>
+                        {eachLogpath}
+                    </a>
+                ) : (
+                    <span className='logContent'>{eachLogpath}</span>
+                )}
             </div>
         );
     }
diff --git a/src/webui/src/components/public-child/MonacoEditor.tsx b/src/webui/src/components/public-child/MonacoEditor.tsx
index 4e28c5457b..8f0f82bcfc 100644
--- a/src/webui/src/components/public-child/MonacoEditor.tsx
+++ b/src/webui/src/components/public-child/MonacoEditor.tsx
@@ -10,7 +10,6 @@ interface MonacoEditorProps {
 }
 
 class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
-
     public _isMonacoMount!: boolean;
 
     constructor(props: MonacoEditorProps) {
@@ -28,34 +27,25 @@ class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
     render(): React.ReactNode {
         const { content, loading, height } = this.props;
         return (
-            <div className="just-for-log">
-                {
-                    loading
-                        ?
-                        <Spinner
-                            label="Wait, wait..."
-                            ariaLive="assertive"
-                            labelPosition="right"
-                            styles={{ root: { width: '100%', height: height } }}
-                        >
-                            <MonacoEditor
-                                width="100%"
-                                height={height}
-                                language="json"
-                                value={content}
-                                options={DRAWEROPTION}
-                            />
-                        </Spinner>
-                        :
+            <div className='just-for-log'>
+                {loading ? (
+                    <Spinner
+                        label='Wait, wait...'
+                        ariaLive='assertive'
+                        labelPosition='right'
+                        styles={{ root: { width: '100%', height: height } }}
+                    >
                         <MonacoEditor
-                            width="100%"
+                            width='100%'
                             height={height}
-                            language="json"
+                            language='json'
                             value={content}
                             options={DRAWEROPTION}
                         />
-                }
-
+                    </Spinner>
+                ) : (
+                    <MonacoEditor width='100%' height={height} language='json' value={content} options={DRAWEROPTION} />
+                )}
             </div>
         );
     }
diff --git a/src/webui/src/components/public-child/OpenRow.tsx b/src/webui/src/components/public-child/OpenRow.tsx
index a0c6c274c1..d1e6d11667 100644
--- a/src/webui/src/components/public-child/OpenRow.tsx
+++ b/src/webui/src/components/public-child/OpenRow.tsx
@@ -21,7 +21,6 @@ interface OpenRowState {
 }
 
 class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
-
     constructor(props: OpenRowProps) {
         super(props);
         this.state = {
@@ -33,17 +32,17 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
 
     hideMessageInfo = (): void => {
         this.setState(() => ({ isHidenInfo: true }));
-    }
+    };
 
     /**
      * info: message content
      * typeInfo: message type: success | error...
-     * continuousTime: show time, 2000ms 
+     * continuousTime: show time, 2000ms
      */
     getCopyStatus = (info: string, typeInfo: string): void => {
         this.setState(() => ({ info, typeInfo, isHidenInfo: false }));
         setTimeout(this.hideMessageInfo, 2000);
-    }
+    };
 
     copyParams = (trial: Trial): void => {
         // get copy parameters
@@ -53,63 +52,59 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
         } else {
             this.getCopyStatus('Failed !', 'error');
         }
-    }
+    };
 
     render(): React.ReactNode {
         const { isHidenInfo, typeInfo, info } = this.state;
         const trialId = this.props.trialId;
         const trial = TRIALS.getTrial(trialId);
-        const logPathRow = trial.info.logPath || 'This trial\'s log path is not available.';
+        const logPathRow = trial.info.logPath || "This trial's log path is not available.";
         return (
-            <Stack className="openRow">
-                <Stack className="openRowContent">
+            <Stack className='openRow'>
+                <Stack className='openRowContent'>
                     <Pivot>
-                        <PivotItem headerText="Parameters" key="1" itemIcon="TestParameter">
-                            {
-                                trial.info.hyperParameters !== undefined
-                                    ?
-                                    <Stack id="description">
-                                        <Stack className="bgHyper">
-                                            <JSONTree
-                                                hideRoot={true}
-                                                shouldExpandNode={(): boolean => true}  // default expandNode
-                                                getItemString={(): null => null}  // remove the {} items
-                                                data={trial.description.parameters}
-                                            />
-                                        </Stack>
-                                        <Stack horizontal className="copy">
-                                            <PrimaryButton
-                                                onClick={this.copyParams.bind(this, trial)}
-                                                text="Copy as json"
-                                                styles={{ root: { width: 128, marginRight: 10 } }}
-                                            />
-                                            {/* copy success | failed message info */}
-                                            {!isHidenInfo && <MessageInfo typeInfo={typeInfo} info={info} />}
-                                        </Stack>
+                        <PivotItem headerText='Parameters' key='1' itemIcon='TestParameter'>
+                            {trial.info.hyperParameters !== undefined ? (
+                                <Stack id='description'>
+                                    <Stack className='bgHyper'>
+                                        <JSONTree
+                                            hideRoot={true}
+                                            shouldExpandNode={(): boolean => true} // default expandNode
+                                            getItemString={(): null => null} // remove the {} items
+                                            data={trial.description.parameters}
+                                        />
                                     </Stack>
-                                    :
-                                    <Stack className="logpath">
-                                        <span className="logName">Error: </span>
-                                        <span className="error">{`This trial's parameters are not available.'`}</span>
+                                    <Stack horizontal className='copy'>
+                                        <PrimaryButton
+                                            onClick={this.copyParams.bind(this, trial)}
+                                            text='Copy as json'
+                                            styles={{ root: { width: 128, marginRight: 10 } }}
+                                        />
+                                        {/* copy success | failed message info */}
+                                        {!isHidenInfo && <MessageInfo typeInfo={typeInfo} info={info} />}
                                     </Stack>
-                            }
+                                </Stack>
+                            ) : (
+                                <Stack className='logpath'>
+                                    <span className='logName'>Error: </span>
+                                    <span className='error'>{`This trial's parameters are not available.'`}</span>
+                                </Stack>
+                            )}
                         </PivotItem>
-                        <PivotItem headerText="Log" key="2" itemIcon="M365InvoicingLogo">
-                            {
-                                // FIXME: this should not be handled in web UI side
-                                EXPERIMENT.trainingServicePlatform !== 'local'
-                                    ?
-                                    <PaiTrialLog
-                                        logStr={logPathRow}
-                                        id={trialId}
-                                        logCollection={EXPERIMENT.logCollectionEnabled}
-                                    />
-                                    :
-                                    <TrialLog logStr={logPathRow} id={trialId} />
-                            }
+                        <PivotItem headerText='Log' key='2' itemIcon='M365InvoicingLogo'>
+                            {// FIXME: this should not be handled in web UI side
+                            EXPERIMENT.trainingServicePlatform !== 'local' ? (
+                                <PaiTrialLog
+                                    logStr={logPathRow}
+                                    id={trialId}
+                                    logCollection={EXPERIMENT.logCollectionEnabled}
+                                />
+                            ) : (
+                                <TrialLog logStr={logPathRow} id={trialId} />
+                            )}
                         </PivotItem>
                     </Pivot>
-                </Stack >
+                </Stack>
             </Stack>
         );
     }
diff --git a/src/webui/src/components/public-child/PaiTrialChild.tsx b/src/webui/src/components/public-child/PaiTrialChild.tsx
index 20cecc214e..e907952738 100644
--- a/src/webui/src/components/public-child/PaiTrialChild.tsx
+++ b/src/webui/src/components/public-child/PaiTrialChild.tsx
@@ -8,38 +8,32 @@ interface PaiTrialChildProps {
 }
 
 class PaiTrialChild extends React.Component<PaiTrialChildProps, {}> {
-
     constructor(props: PaiTrialChildProps) {
         super(props);
-
     }
 
     render(): React.ReactNode {
         const { logString, id, logCollect } = this.props;
         return (
             <div>
-                {
-                    logString === ''
-                        ?
-                        <div />
-                        :
-                        <div>
-                            {
-                                logCollect
-                                    ?
-                                    <a
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        href={`${DOWNLOAD_IP}/trial_${id}.log`}
-                                        style={{ marginRight: 10 }}
-                                    >
-                                        trial stdout
-                                    </a>
-                                    :
-                                    <span>trial stdout: {logString}</span>
-                            }
-                        </div>
-                }
+                {logString === '' ? (
+                    <div />
+                ) : (
+                    <div>
+                        {logCollect ? (
+                            <a
+                                target='_blank'
+                                rel='noopener noreferrer'
+                                href={`${DOWNLOAD_IP}/trial_${id}.log`}
+                                style={{ marginRight: 10 }}
+                            >
+                                trial stdout
+                            </a>
+                        ) : (
+                            <span>trial stdout: {logString}</span>
+                        )}
+                    </div>
+                )}
             </div>
         );
     }
diff --git a/src/webui/src/components/public-child/PaiTrialLog.tsx b/src/webui/src/components/public-child/PaiTrialLog.tsx
index 9b5da29b0c..e67853433e 100644
--- a/src/webui/src/components/public-child/PaiTrialLog.tsx
+++ b/src/webui/src/components/public-child/PaiTrialLog.tsx
@@ -10,60 +10,42 @@ interface PaitrialLogProps {
 }
 
 class PaitrialLog extends React.Component<PaitrialLogProps, {}> {
-
     constructor(props: PaitrialLogProps) {
         super(props);
-
     }
 
     render(): React.ReactNode {
         const { logStr, id, logCollection } = this.props;
-        const isTwopath = logStr.indexOf(',') !== -1
-            ?
-            true
-            :
-            false;
+        const isTwopath = logStr.indexOf(',') !== -1 ? true : false;
         return (
             <div>
                 <div>
-                    {
-                        isTwopath
-                            ?
-                            <div>
-                                {
-                                    logCollection
-                                        ?
-                                        <div>
-                                            <a
-                                                target="_blank"
-                                                rel="noopener noreferrer"
-                                                href={`${DOWNLOAD_IP}/trial_${id}.log`}
-                                                style={{ marginRight: 10 }}
-                                            >
-                                                Trial stdout
-                                            </a>
-                                            <a target="_blank" rel="noopener noreferrer" href={logStr.split(',')[1]}>hdfsLog</a>
-                                        </div>
-                                        :
-                                        <div>
-                                            <LogPathChild
-                                                eachLogpath={logStr.split(',')[0]}
-                                                logName="Trial stdout:"
-                                            />
-                                            <LogPathChild
-                                                eachLogpath={logStr.split(',')[1]}
-                                                logName="Log on HDFS:"
-                                            />
-                                        </div>
-                                }
-                            </div>
-                            :
-                            <PaiTrialChild
-                                logString={logStr}
-                                id={id}
-                                logCollect={logCollection}
-                            />
-                    }
+                    {isTwopath ? (
+                        <div>
+                            {logCollection ? (
+                                <div>
+                                    <a
+                                        target='_blank'
+                                        rel='noopener noreferrer'
+                                        href={`${DOWNLOAD_IP}/trial_${id}.log`}
+                                        style={{ marginRight: 10 }}
+                                    >
+                                        Trial stdout
+                                    </a>
+                                    <a target='_blank' rel='noopener noreferrer' href={logStr.split(',')[1]}>
+                                        hdfsLog
+                                    </a>
+                                </div>
+                            ) : (
+                                <div>
+                                    <LogPathChild eachLogpath={logStr.split(',')[0]} logName='Trial stdout:' />
+                                    <LogPathChild eachLogpath={logStr.split(',')[1]} logName='Log on HDFS:' />
+                                </div>
+                            )}
+                        </div>
+                    ) : (
+                        <PaiTrialChild logString={logStr} id={id} logCollect={logCollection} />
+                    )}
                 </div>
             </div>
         );
diff --git a/src/webui/src/components/public-child/TrialLog.tsx b/src/webui/src/components/public-child/TrialLog.tsx
index 9891bed150..126ab8711b 100644
--- a/src/webui/src/components/public-child/TrialLog.tsx
+++ b/src/webui/src/components/public-child/TrialLog.tsx
@@ -7,10 +7,8 @@ interface TrialLogProps {
 }
 
 class TrialLog extends React.Component<TrialLogProps, {}> {
-
     constructor(props: TrialLogProps) {
         super(props);
-
     }
 
     render(): React.ReactNode {
@@ -18,10 +16,7 @@ class TrialLog extends React.Component<TrialLogProps, {}> {
 
         return (
             <div>
-                <LogPathChild
-                    eachLogpath={logStr}
-                    logName="Log path:"
-                />
+                <LogPathChild eachLogpath={logStr} logName='Log path:' />
             </div>
         );
     }
diff --git a/src/webui/src/components/stateless-component/NNItabs.tsx b/src/webui/src/components/stateless-component/NNItabs.tsx
index 6f75213cf4..809729bf21 100644
--- a/src/webui/src/components/stateless-component/NNItabs.tsx
+++ b/src/webui/src/components/stateless-component/NNItabs.tsx
@@ -2,25 +2,21 @@ import * as React from 'react';
 import { Link } from 'react-router';
 
 const OVERVIEWTABS = (
-    <Link to={'/oview'} activeClassName="high-light" className="common-tabs">
+    <Link to={'/oview'} activeClassName='high-light' className='common-tabs'>
         Overview
     </Link>
 );
 
 const DETAILTABS = (
-    <Link to={'/detail'} activeClassName="high-light" className="common-tabs">
+    <Link to={'/detail'} activeClassName='high-light' className='common-tabs'>
         Trials detail
     </Link>
 );
 
 const NNILOGO = (
     <Link to={'/oview'}>
-        <img
-            src={require('../../static/img/logo2.png')}
-            alt="NNI logo"
-            style={{height: 40}}
-        />
+        <img src={require('../../static/img/logo2.png')} alt='NNI logo' style={{ height: 40 }} />
     </Link>
 );
 
-export { OVERVIEWTABS, DETAILTABS, NNILOGO };
\ No newline at end of file
+export { OVERVIEWTABS, DETAILTABS, NNILOGO };
diff --git a/src/webui/src/components/trial-detail/DefaultMetricPoint.tsx b/src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
index f97e3a11f7..02a28d616f 100644
--- a/src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
+++ b/src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
@@ -14,11 +14,11 @@ const EmptyGraph = {
     },
     xAxis: {
         name: 'Trial',
-        type: 'category',
+        type: 'category'
     },
     yAxis: {
         name: 'Default metric',
-        type: 'value',
+        type: 'value'
     }
 };
 
@@ -30,7 +30,7 @@ interface DefaultPointProps {
 
 interface DefaultPointState {
     bestCurveEnabled?: boolean | undefined;
-    startY: number;  // dataZoomY
+    startY: number; // dataZoomY
     endY: number;
 }
 
@@ -46,7 +46,7 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
 
     loadDefault = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
         this.setState({ bestCurveEnabled: checked });
-    }
+    };
 
     shouldComponentUpdate(nextProps: DefaultPointProps): boolean {
         return nextProps.visible;
@@ -55,31 +55,37 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
     metricDataZoom = (e: EventMap): void => {
         if (e.batch !== undefined) {
             this.setState(() => ({
-                startY: (e.batch[0].start !== null ? e.batch[0].start : 0),
-                endY: (e.batch[0].end !== null ? e.batch[0].end : 100)
+                startY: e.batch[0].start !== null ? e.batch[0].start : 0,
+                endY: e.batch[0].end !== null ? e.batch[0].end : 100
             }));
         }
-    }
+    };
 
     generateGraphConfig(maxSequenceId: number): any {
         const { startY, endY } = this.state;
         return {
             grid: {
-                left: '8%',
+                left: '8%'
             },
             tooltip: {
                 trigger: 'item',
                 enterable: true,
-                position: (point: number[], data: TooltipForAccuracy): number[] => (
-                    [(data.data[0] < maxSequenceId ? point[0] : (point[0] - 300)), 80]
-                ),
-                formatter: (data: TooltipForAccuracy): React.ReactNode => (
+                position: (point: number[], data: TooltipForAccuracy): number[] => [
+                    data.data[0] < maxSequenceId ? point[0] : point[0] - 300,
+                    80
+                ],
+                formatter: (data: TooltipForAccuracy): React.ReactNode =>
                     '<div class="tooldetailAccuracy">' +
-                    '<div>Trial No.: ' + data.data[0] + '</div>' +
-                    '<div>Default metric: ' + data.data[1] + '</div>' +
-                    '<div>Parameters: <pre>' + JSON.stringify(data.data[2], null, 4) + '</pre></div>' +
+                    '<div>Trial No.: ' +
+                    data.data[0] +
+                    '</div>' +
+                    '<div>Default metric: ' +
+                    data.data[1] +
+                    '</div>' +
+                    '<div>Parameters: <pre>' +
+                    JSON.stringify(data.data[2], null, 4) +
+                    '</pre></div>' +
                     '</div>'
-                ),
             },
             dataZoom: [
                 {
@@ -93,27 +99,23 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
             ],
             xAxis: {
                 name: 'Trial',
-                type: 'category',
+                type: 'category'
             },
             yAxis: {
                 name: 'Default metric',
                 type: 'value',
-                scale: true,
+                scale: true
             },
-            series: undefined,
+            series: undefined
         };
     }
 
     generateScatterSeries(trials: Trial[]): any {
-        const data = trials.map(trial => [
-            trial.sequenceId,
-            trial.accuracy,
-            trial.description.parameters,
-        ]);
+        const data = trials.map(trial => [trial.sequenceId, trial.accuracy, trial.description.parameters]);
         return {
             symbolSize: 6,
             type: 'scatter',
-            data,
+            data
         };
     }
 
@@ -125,7 +127,7 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
             const trial = trials[i];
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             const delta = trial.accuracy! - best.accuracy!;
-            const better = (EXPERIMENT.optimizeMode === 'minimize') ? (delta < 0) : (delta > 0);
+            const better = EXPERIMENT.optimizeMode === 'minimize' ? delta < 0 : delta > 0;
             if (better) {
                 data.push([trial.sequenceId, trial.accuracy, trial.description.parameters]);
                 best = trial;
@@ -137,36 +139,33 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
         return {
             type: 'line',
             lineStyle: { color: '#FF6600' },
-            data,
+            data
         };
     }
 
     render(): React.ReactNode {
         const graph = this.generateGraph();
-        const accNodata = (graph === EmptyGraph ? 'No data' : '');
-        const onEvents = { 'dataZoom': this.metricDataZoom };
+        const accNodata = graph === EmptyGraph ? 'No data' : '';
+        const onEvents = { dataZoom: this.metricDataZoom };
 
         return (
             <div>
-                <Stack horizontalAlign="end" className="default-metric">
-                    <Toggle label="Optimization curve"
-                        inlineLabel
-                        onChange={this.loadDefault}
-                    />
+                <Stack horizontalAlign='end' className='default-metric'>
+                    <Toggle label='Optimization curve' inlineLabel onChange={this.loadDefault} />
                 </Stack>
-                <div className="default-metric-graph">
+                <div className='default-metric-graph'>
                     <ReactEcharts
                         option={graph}
                         style={{
                             width: '100%',
                             height: 402,
-                            margin: '0 auto',
+                            margin: '0 auto'
                         }}
-                        theme="my_theme"
+                        theme='my_theme'
                         notMerge={true} // update now
                         onEvents={onEvents}
                     />
-                    <div className="default-metric-noData">{accNodata}</div>
+                    <div className='default-metric-noData'>{accNodata}</div>
                 </div>
             </div>
         );
diff --git a/src/webui/src/components/trial-detail/Duration.tsx b/src/webui/src/components/trial-detail/Duration.tsx
index e07ef26b5e..d4e16f665a 100644
--- a/src/webui/src/components/trial-detail/Duration.tsx
+++ b/src/webui/src/components/trial-detail/Duration.tsx
@@ -23,16 +23,13 @@ interface DurationState {
 }
 
 class Duration extends React.Component<DurationProps, DurationState> {
-
     constructor(props: DurationProps) {
-
         super(props);
         this.state = {
             startDuration: 0, // for record data zoom
             endDuration: 100,
-            durationSource: this.initDuration(this.props.source),
+            durationSource: this.initDuration(this.props.source)
         };
-
     }
 
     initDuration = (source: Array<TableObj>): any => {
@@ -50,12 +47,15 @@ class Duration extends React.Component<DurationProps, DurationState> {
                 axisPointer: {
                     type: 'shadow'
                 },
-                formatter: (data: any): React.ReactNode => (
+                formatter: (data: any): React.ReactNode =>
                     '<div>' +
-                    '<div>Trial No.: ' + data[0].dataIndex + '</div>' +
-                    '<div>Duration: ' + convertDuration(data[0].data) + '</div>' +
+                    '<div>Trial No.: ' +
+                    data[0].dataIndex +
+                    '</div>' +
+                    '<div>Duration: ' +
+                    convertDuration(data[0].data) +
+                    '</div>' +
                     '</div>'
-                ),
             },
             grid: {
                 bottom: '3%',
@@ -71,11 +71,11 @@ class Duration extends React.Component<DurationProps, DurationState> {
                     filterMode: 'empty',
                     start: 0,
                     end: 100
-                },
+                }
             ],
             xAxis: {
                 name: 'Time/s',
-                type: 'value',
+                type: 'value'
             },
             yAxis: {
                 name: 'Trial No.',
@@ -85,12 +85,14 @@ class Duration extends React.Component<DurationProps, DurationState> {
                     padding: [0, 0, 0, 30]
                 }
             },
-            series: [{
-                type: 'bar',
-                data: trialTime
-            }]
+            series: [
+                {
+                    type: 'bar',
+                    data: trialTime
+                }
+            ]
         };
-    }
+    };
 
     getOption = (dataObj: Runtrial): any => {
         const { startDuration, endDuration } = this.state;
@@ -100,12 +102,15 @@ class Duration extends React.Component<DurationProps, DurationState> {
                 axisPointer: {
                     type: 'shadow'
                 },
-                formatter: (data: any): React.ReactNode => (
+                formatter: (data: any): React.ReactNode =>
                     '<div>' +
-                    '<div>Trial No.: ' + data[0].dataIndex + '</div>' +
-                    '<div>Duration: ' + convertDuration(data[0].data) + '</div>' +
+                    '<div>Trial No.: ' +
+                    data[0].dataIndex +
+                    '</div>' +
+                    '<div>Duration: ' +
+                    convertDuration(data[0].data) +
+                    '</div>' +
                     '</div>'
-                ),
             },
             grid: {
                 bottom: '3%',
@@ -121,11 +126,11 @@ class Duration extends React.Component<DurationProps, DurationState> {
                     filterMode: 'empty',
                     start: startDuration,
                     end: endDuration
-                },
+                }
             ],
             xAxis: {
                 name: 'Time',
-                type: 'value',
+                type: 'value'
             },
             yAxis: {
                 name: 'Trial',
@@ -135,12 +140,14 @@ class Duration extends React.Component<DurationProps, DurationState> {
                     padding: [0, 0, 0, 30]
                 }
             },
-            series: [{
-                type: 'bar',
-                data: dataObj.trialTime
-            }]
+            series: [
+                {
+                    type: 'bar',
+                    data: dataObj.trialTime
+                }
+            ]
         };
-    }
+    };
 
     drawDurationGraph = (source: Array<TableObj>): void => {
         // why this function run two times when props changed?
@@ -160,7 +167,7 @@ class Duration extends React.Component<DurationProps, DurationState> {
         this.setState({
             durationSource: this.getOption(trialRun[0])
         });
-    }
+    };
 
     componentDidMount(): void {
         const { source } = this.props;
@@ -178,13 +185,13 @@ class Duration extends React.Component<DurationProps, DurationState> {
 
     render(): React.ReactNode {
         const { durationSource } = this.state;
-        const onEvents = { 'dataZoom': this.durationDataZoom };
+        const onEvents = { dataZoom: this.durationDataZoom };
         return (
             <div>
                 <ReactEcharts
                     option={durationSource}
                     style={{ width: '94%', height: 412, margin: '0 auto', marginTop: 15 }}
-                    theme="my_theme"
+                    theme='my_theme'
                     notMerge={true} // update now
                     onEvents={onEvents}
                 />
@@ -195,11 +202,11 @@ class Duration extends React.Component<DurationProps, DurationState> {
     private durationDataZoom = (e: EventMap): void => {
         if (e.batch !== undefined) {
             this.setState(() => ({
-                startDuration: (e.batch[0].start !== null ? e.batch[0].start : 0),
-                endDuration: (e.batch[0].end !== null ? e.batch[0].end : 100)
+                startDuration: e.batch[0].start !== null ? e.batch[0].start : 0,
+                endDuration: e.batch[0].end !== null ? e.batch[0].end : 100
             }));
         }
-    }
+    };
 }
 
 export default Duration;
diff --git a/src/webui/src/components/trial-detail/Intermediate.tsx b/src/webui/src/components/trial-detail/Intermediate.tsx
index 308b4b6acf..06c45de97e 100644
--- a/src/webui/src/components/trial-detail/Intermediate.tsx
+++ b/src/webui/src/components/trial-detail/Intermediate.tsx
@@ -28,7 +28,6 @@ interface IntermediateProps {
 }
 
 class Intermediate extends React.Component<IntermediateProps, IntermediateState> {
-
     static intervalMediate = 1;
     public pointInput!: HTMLInputElement | null;
     public minValInput!: HTMLInputElement | null;
@@ -68,7 +67,9 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                 });
             });
             // find max intermediate number
-            trialIntermediate.sort((a, b) => { return (b.data.length - a.data.length); });
+            trialIntermediate.sort((a, b) => {
+                return b.data.length - a.data.length;
+            });
             const legend: string[] = [];
             // max length
             const length = trialIntermediate[0].data.length;
@@ -84,27 +85,35 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                 tooltip: {
                     trigger: 'item',
                     enterable: true,
-                    position: function (point: number[], data: TooltipForIntermediate): number[] {
+                    position: function(point: number[], data: TooltipForIntermediate): number[] {
                         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;
                         let obj = {};
                         const temp = trialIntermediate.find(key => key.name === trialId);
                         if (temp !== undefined) {
                             obj = temp.hyperPara;
                         }
-                        return '<div class="tooldetailAccuracy">' +
-                            '<div>Trial ID: ' + trialId + '</div>' +
-                            '<div>Intermediate: ' + data.data + '</div>' +
+                        return (
+                            '<div class="tooldetailAccuracy">' +
+                            '<div>Trial ID: ' +
+                            trialId +
+                            '</div>' +
+                            '<div>Intermediate: ' +
+                            data.data +
+                            '</div>' +
                             '<div>Parameters: ' +
-                            '<pre>' + JSON.stringify(obj, null, 4) + '</pre>' +
+                            '<pre>' +
+                            JSON.stringify(obj, null, 4) +
+                            '</pre>' +
                             '</div>' +
-                            '</div>';
+                            '</div>'
+                        );
                     }
                 },
                 grid: {
@@ -121,7 +130,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                 yAxis: {
                     type: 'value',
                     name: 'Metric',
-                    scale: true,
+                    scale: true
                 },
                 dataZoom: [
                     {
@@ -147,7 +156,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                 },
                 xAxis: {
                     type: 'category',
-                    boundaryGap: false,
+                    boundaryGap: false
                 },
                 yAxis: {
                     type: 'value',
@@ -156,7 +165,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
             };
             this.setState({ interSource: nullData });
         }
-    }
+    };
 
     // confirm btn function [filter data]
     filterLines = (): void => {
@@ -198,14 +207,14 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
             const counts = this.state.clickCounts + 1;
             this.setState({ isLoadconfirmBtn: false, clickCounts: counts });
         });
-    }
+    };
 
     switchTurn = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
         this.setState({ isFilter: checked });
         if (checked === false) {
             this.drawIntermediate(this.props.source);
         }
-    }
+    };
 
     componentDidMount(): void {
         const { source } = this.props;
@@ -235,56 +244,47 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
 
     render(): React.ReactNode {
         const { interSource, isLoadconfirmBtn, isFilter } = this.state;
-        const IntermediateEvents = { 'dataZoom': this.intermediateDataZoom };
+        const IntermediateEvents = { dataZoom: this.intermediateDataZoom };
 
         return (
             <div>
                 {/* style in para.scss */}
-                <Stack horizontal horizontalAlign="end" tokens={stackTokens} className="meline intermediate">
-                    {
-                        isFilter
-                            ?
-                            <div>
-                                <span className="filter-x"># Intermediate result</span>
-                                <input
-                                    // placeholder="point"
-                                    ref={(input): any => this.pointInput = input}
-                                    className="strange"
-                                />
-                                <span>Metric range</span>
-                                <input
-                                    // placeholder="range"
-                                    ref={(input): any => this.minValInput = input}
-                                />
-                                <span className="hyphen">-</span>
-                                <input
-                                    // placeholder="range"
-                                    ref={(input): any => this.maxValInput = input}
-                                />
-                                <PrimaryButton
-                                    text="Confirm"
-                                    onClick={this.filterLines}
-                                    disabled={isLoadconfirmBtn}
-                                />
-                            </div>
-                            :
-                            null
-                    }
+                <Stack horizontal horizontalAlign='end' tokens={stackTokens} className='meline intermediate'>
+                    {isFilter ? (
+                        <div>
+                            <span className='filter-x'># Intermediate result</span>
+                            <input
+                                // placeholder="point"
+                                ref={(input): any => (this.pointInput = input)}
+                                className='strange'
+                            />
+                            <span>Metric range</span>
+                            <input
+                                // placeholder="range"
+                                ref={(input): any => (this.minValInput = input)}
+                            />
+                            <span className='hyphen'>-</span>
+                            <input
+                                // placeholder="range"
+                                ref={(input): any => (this.maxValInput = input)}
+                            />
+                            <PrimaryButton text='Confirm' onClick={this.filterLines} disabled={isLoadconfirmBtn} />
+                        </div>
+                    ) : null}
                     {/* filter message */}
-                    <Stack horizontal className="filter-toggle">
+                    <Stack horizontal className='filter-toggle'>
                         <span>Filter</span>
                         <Toggle onChange={this.switchTurn} />
                     </Stack>
-
                 </Stack>
-                <div className="intermediate-graph">
+                <div className='intermediate-graph'>
                     <ReactEcharts
                         option={interSource}
                         style={{ width: '100%', height: 400, margin: '0 auto' }}
                         notMerge={true} // update now
                         onEvents={IntermediateEvents}
                     />
-                    <div className="xAxis"># Intermediate result</div>
+                    <div className='xAxis'># Intermediate result</div>
                 </div>
             </div>
         );
@@ -293,11 +293,11 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
     private intermediateDataZoom = (e: EventMap): void => {
         if (e.batch !== undefined) {
             this.setState(() => ({
-                startMediaY: (e.batch[0].start !== null ? e.batch[0].start : 0),
-                endMediaY: (e.batch[0].end !== null ? e.batch[0].end : 100)
+                startMediaY: e.batch[0].start !== null ? e.batch[0].start : 0,
+                endMediaY: e.batch[0].end !== null ? e.batch[0].end : 100
             }));
         }
-    }
+    };
 }
 
 export default Intermediate;
diff --git a/src/webui/src/components/trial-detail/Para.tsx b/src/webui/src/components/trial-detail/Para.tsx
index f2f130949a..acf21b9071 100644
--- a/src/webui/src/components/trial-detail/Para.tsx
+++ b/src/webui/src/components/trial-detail/Para.tsx
@@ -24,7 +24,6 @@ interface ParaProps {
 }
 
 class Para extends React.Component<ParaProps, ParaState> {
-
     private paraRef = React.createRef<HTMLDivElement>();
     private pcs: any;
 
@@ -57,7 +56,7 @@ class Para extends React.Component<ParaProps, ParaState> {
                 this.renderParallelCoordinates();
             });
         }
-    }
+    };
 
     // select all final keys
     updateEntries = (event: React.FormEvent<HTMLDivElement>, item: any): void => {
@@ -66,7 +65,7 @@ class Para extends React.Component<ParaProps, ParaState> {
                 this.renderParallelCoordinates();
             });
         }
-    }
+    };
 
     componentDidMount(): void {
         this.renderParallelCoordinates();
@@ -86,8 +85,8 @@ class Para extends React.Component<ParaProps, ParaState> {
         const { selectedPercent, noChart } = this.state;
 
         return (
-            <div className="parameter">
-                <Stack horizontal className="para-filter" horizontalAlign="end">
+            <div className='parameter'>
+                <Stack horizontal className='para-filter' horizontalAlign='end'>
                     <Dropdown
                         selectedKey={selectedPercent}
                         onChange={this.percentNum}
@@ -95,15 +94,15 @@ class Para extends React.Component<ParaProps, ParaState> {
                             { key: '0.01', text: 'Top 1%' },
                             { key: '0.05', text: 'Top 5%' },
                             { key: '0.2', text: 'Top 20%' },
-                            { key: '1', text: 'Top 100%' },
+                            { key: '1', text: 'Top 100%' }
                         ]}
                         styles={{ dropdown: { width: 120 } }}
-                        className="para-filter-percent"
+                        className='para-filter-percent'
                     />
                     {this.finalKeysDropdown()}
                 </Stack>
-                <div className="parcoords" style={this.chartMulineStyle} ref={this.paraRef}/>
-                {noChart && <div className="nodata">No data</div>}
+                <div className='parcoords' style={this.chartMulineStyle} ref={this.paraRef} />
+                {noChart && <div className='nodata'>No data</div>}
             </div>
         );
     }
@@ -116,18 +115,19 @@ class Para extends React.Component<ParaProps, ParaState> {
             const finalKeysDropdown: any = [];
             TRIALS.finalKeys().forEach(item => {
                 finalKeysDropdown.push({
-                    key: item, text: item
+                    key: item,
+                    text: item
                 });
             });
             return (
                 <div>
-                    <span className="para-filter-text para-filter-middle">Metrics</span>
+                    <span className='para-filter-text para-filter-middle'>Metrics</span>
                     <Dropdown
                         selectedKey={primaryMetricKey}
                         options={finalKeysDropdown}
                         onChange={this.updateEntries}
                         styles={{ root: { width: 150, display: 'inline-block' } }}
-                        className="para-filter-percent"
+                        className='para-filter-percent'
                     />
                 </div>
             );
@@ -150,13 +150,17 @@ class Para extends React.Component<ParaProps, ParaState> {
         let convertedTrials = this.getTrialsAsObjectList(inferredSearchSpace, inferredMetricSpace);
 
         const dimensions: [any, any][] = [];
-        let colorDim: string | undefined = undefined, colorScale: any = undefined;
+        let colorDim: string | undefined = undefined,
+            colorScale: any = undefined;
         // treat every axis as numeric to fit for brush
         for (const [k, v] of inferredSearchSpace.axes) {
-            dimensions.push([k, {
-                type: 'number',
-                yscale: this.convertToD3Scale(v)
-            }]);
+            dimensions.push([
+                k,
+                {
+                    type: 'number',
+                    yscale: this.convertToD3Scale(v)
+                }
+            ]);
         }
         for (const [k, v] of inferredMetricSpace.axes) {
             const scale = this.convertToD3Scale(v);
@@ -169,7 +173,9 @@ class Para extends React.Component<ParaProps, ParaState> {
                 // filter top trials
                 if (percent != 1) {
                     const keptTrialNum = Math.max(Math.ceil(convertedTrials.length * percent), 1);
-                    convertedTrials.sort((a, b) => EXPERIMENT.optimizeMode === 'minimize' ? a[k] - b[k] : b[k] - a[k]);
+                    convertedTrials.sort((a, b) =>
+                        EXPERIMENT.optimizeMode === 'minimize' ? a[k] - b[k] : b[k] - a[k]
+                    );
                     convertedTrials = convertedTrials.slice(0, keptTrialNum);
                     const domain = d3.extent(convertedTrials, item => item[k]);
                     scale.domain([domain[0], domain[1]]);
@@ -178,10 +184,13 @@ class Para extends React.Component<ParaProps, ParaState> {
                     }
                 }
             }
-            dimensions.push([k, {
-                type: 'number',
-                yscale: scale
-            }]);
+            dimensions.push([
+                k,
+                {
+                    type: 'number',
+                    yscale: scale
+                }
+            ]);
         }
 
         if (convertedTrials.length === 0) {
@@ -192,13 +201,15 @@ class Para extends React.Component<ParaProps, ParaState> {
         if (firstRun) {
             this.pcs = ParCoords()(this.paraRef.current);
         }
-        this.pcs.data(convertedTrials)
+        this.pcs
+            .data(convertedTrials)
             .dimensions(dimensions.reduce((obj, entry) => ({ ...obj, [entry[0]]: entry[1] }), {}));
         if (firstRun) {
-            this.pcs.margin(this.innerChartMargins)
+            this.pcs
+                .margin(this.innerChartMargins)
                 .alphaOnBrushed(0.2)
                 .smoothness(0.1)
-                .brushMode("1D-axes")
+                .brushMode('1D-axes')
                 .reorderable()
                 .interactive();
         }
@@ -217,7 +228,7 @@ class Para extends React.Component<ParaProps, ParaState> {
 
         return succeededTrials.map(s => {
             const entries = Array.from(s.parameters(inferredSearchSpace).entries());
-            entries.push(...(Array.from(s.metrics(inferredMetricSpace).entries())));
+            entries.push(...Array.from(s.metrics(inferredMetricSpace).entries()));
             const ret = {};
             for (const [k, v] of entries) {
                 ret[k.fullName] = v;
@@ -236,20 +247,26 @@ class Para extends React.Component<ParaProps, ParaState> {
 
     private convertToD3Scale(axis: SingleAxis, initRange: boolean = true): any {
         const padLinear = ([x0, x1], k = 0.1): [number, number] => {
-            const dx = (x1 - x0) * k / 2;
+            const dx = ((x1 - x0) * k) / 2;
             return [x0 - dx, x1 + dx];
         };
         const padLog = ([x0, x1], k = 0.1): [number, number] => {
             const [y0, y1] = padLinear([Math.log(x0), Math.log(x1)], k);
             return [Math.exp(y0), Math.exp(y1)];
-        }
+        };
         let scaleInst: any = undefined;
         if (axis.scale === 'ordinal') {
             if (axis.nested) {
                 // TODO: handle nested entries
-                scaleInst = d3.scalePoint().domain(Array.from(axis.domain.keys())).padding(0.2);
+                scaleInst = d3
+                    .scalePoint()
+                    .domain(Array.from(axis.domain.keys()))
+                    .padding(0.2);
             } else {
-                scaleInst = d3.scalePoint().domain(axis.domain).padding(0.2);
+                scaleInst = d3
+                    .scalePoint()
+                    .domain(axis.domain)
+                    .padding(0.2);
             }
         } else if (axis.scale === 'log') {
             scaleInst = d3.scaleLog().domain(padLog(axis.domain));
diff --git a/src/webui/src/components/trial-detail/TableList.tsx b/src/webui/src/components/trial-detail/TableList.tsx
index 94af7e8fb9..8c438acd0c 100644
--- a/src/webui/src/components/trial-detail/TableList.tsx
+++ b/src/webui/src/components/trial-detail/TableList.tsx
@@ -2,8 +2,20 @@ import * as React from 'react';
 import axios from 'axios';
 import ReactEcharts from 'echarts-for-react';
 import {
-    Stack, Dropdown, DetailsList, IDetailsListProps, DetailsListLayoutMode,
-    PrimaryButton, Modal, IDropdownOption, IColumn, Selection, SelectionMode, IconButton, TooltipHost, IStackTokens
+    Stack,
+    Dropdown,
+    DetailsList,
+    IDetailsListProps,
+    DetailsListLayoutMode,
+    PrimaryButton,
+    Modal,
+    IDropdownOption,
+    IColumn,
+    Selection,
+    SelectionMode,
+    IconButton,
+    TooltipHost,
+    IStackTokens
 } from 'office-ui-fabric-react';
 import ReactPaginate from 'react-paginate';
 import { LineChart, blocked, copy } from '../Buttons/Icon';
@@ -25,7 +37,6 @@ import '../../static/style/button.scss';
 import '../../static/style/openRow.scss';
 import '../../static/style/pagination.scss';
 
-
 const echarts = require('echarts/lib/echarts');
 require('echarts/lib/chart/line');
 require('echarts/lib/component/tooltip');
@@ -36,7 +47,7 @@ echarts.registerTheme('my_theme', {
 
 const horizontalGapStackTokens: IStackTokens = {
     childrenGap: 20,
-    padding: 10,
+    padding: 10
 };
 
 interface TableListProps {
@@ -82,7 +93,6 @@ interface TableListState {
 }
 
 class TableList extends React.Component<TableListProps, TableListState> {
-
     public intervalTrialLog = 10;
     public trialId!: string;
 
@@ -130,7 +140,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 currColumn.isSorted = true;
             } else {
                 newCol.isSorted = false;
-                newCol.isSortedDescending =  true;
+                newCol.isSortedDescending = true;
             }
         });
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -140,12 +150,11 @@ class TableList extends React.Component<TableListProps, TableListState> {
             tableSourceForSort: newItems,
             sortMessage: { field: getColumn.key, isDescend: currColumn.isSortedDescending }
         });
-
     };
 
     private copyAndSort<T>(items: T[], columnKey: string, isSortedDescending?: boolean): any {
         const key = columnKey as keyof T;
-        return items.slice(0).sort(function (a: T, b: T): any {
+        return items.slice(0).sort(function(a: T, b: T): any {
             if (a[key] === undefined) {
                 return 1;
             }
@@ -166,9 +175,11 @@ class TableList extends React.Component<TableListProps, TableListState> {
         isResizable: true,
         data: 'number',
         onColumnClick: this.onColumnClick,
-        onRender: (item): React.ReactNode => <TooltipHost content={item.formattedLatestAccuracy}>
-            <div className="ellipsis">{item.formattedLatestAccuracy}</div>
-        </TooltipHost>
+        onRender: (item): React.ReactNode => (
+            <TooltipHost content={item.formattedLatestAccuracy}>
+                <div className='ellipsis'>{item.formattedLatestAccuracy}</div>
+            </TooltipHost>
+        )
     };
 
     SequenceIdColumnConfig: any = {
@@ -179,7 +190,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
         maxWidth: 240,
         className: 'tableHead',
         data: 'number',
-        onColumnClick: this.onColumnClick,
+        onColumnClick: this.onColumnClick
     };
 
     IdColumnConfig: any = {
@@ -194,7 +205,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
         className: 'tableHead leftTitle'
     };
 
-
     StartTimeColumnConfig: any = {
         name: 'Start time',
         key: 'startTime',
@@ -204,9 +214,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
         isResizable: true,
         data: 'number',
         onColumnClick: this.onColumnClick,
-        onRender: (record): React.ReactNode => (
-            <span>{formatTimestamp(record.startTime)}</span>
-        )
+        onRender: (record): React.ReactNode => <span>{formatTimestamp(record.startTime)}</span>
     };
 
     EndTimeColumnConfig: any = {
@@ -218,9 +226,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
         isResizable: true,
         data: 'number',
         onColumnClick: this.onColumnClick,
-        onRender: (record): React.ReactNode => (
-            <span>{formatTimestamp(record.endTime, '--')}</span>
-        )
+        onRender: (record): React.ReactNode => <span>{formatTimestamp(record.endTime, '--')}</span>
     };
 
     DurationColumnConfig: any = {
@@ -232,9 +238,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
         isResizable: true,
         data: 'number',
         onColumnClick: this.onColumnClick,
-        onRender: (record): React.ReactNode => (
-            <span className="durationsty">{convertDuration(record.duration)}</span>
-        )
+        onRender: (record): React.ReactNode => <span className='durationsty'>{convertDuration(record.duration)}</span>
     };
 
     StatusColumnConfig: any = {
@@ -247,9 +251,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
         isResizable: true,
         data: 'string',
         onColumnClick: this.onColumnClick,
-        onRender: (record): React.ReactNode => (
-            <span className={`${record.status} commonStyle`}>{record.status}</span>
-        ),
+        onRender: (record): React.ReactNode => <span className={`${record.status} commonStyle`}>{record.status}</span>
     };
 
     IntermediateCountColumnConfig: any = {
@@ -261,9 +263,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
         isResizable: true,
         data: 'number',
         onColumnClick: this.onColumnClick,
-        onRender: (record): React.ReactNode => (
-            <span>{`#${record.intermediateCount}`}</span>
-        )
+        onRender: (record): React.ReactNode => <span>{`#${record.intermediateCount}`}</span>
     };
 
     showIntermediateModal = async (record: TrialJobInfo, event: React.SyntheticEvent<EventTarget>): Promise<void> => {
@@ -293,7 +293,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
             }
             // intermediateArr just store default val
             metricDatas.map(item => {
-
                 if (item.type === 'PERIODICAL') {
                     const temp = parseMetrics(item.data);
                     if (typeof temp === 'object') {
@@ -312,7 +311,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
             });
         }
         this.setState({ modalVisible: true });
-    }
+    };
 
     // intermediate button click -> intermediate graph for each trial
     // support intermediate is dict
@@ -349,45 +348,43 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 intermediateOption: intermediate
             });
         }
-    }
+    };
 
     hideIntermediateModal = (): void => {
         this.setState({
             modalVisible: false
         });
-    }
+    };
 
     hideShowColumnModal = (): void => {
-
         this.setState(() => ({ isShowColumn: false }));
-    }
+    };
 
     // click add column btn, just show the modal of addcolumn
     addColumn = (): void => {
         // show user select check button
         this.setState(() => ({ isShowColumn: true }));
-    }
+    };
 
     fillSelectedRowsTostate = (selected: number[] | string[], selectedRows: Array<TableRecord>): void => {
         this.setState({ selectRows: selectedRows, selectedRowKeys: selected });
-    }
+    };
 
     // open Compare-modal
     compareBtn = (): void => {
-
         const { selectRows } = this.state;
         if (selectRows.length === 0) {
             alert('Please select datas you want to compare!');
         } else {
             this.setState({ isShowCompareModal: true });
         }
-    }
+    };
 
     // close Compare-modal
     hideCompareModal = (): void => {
         // close modal. clear select rows data, clear selected track
         this.setState({ isShowCompareModal: false, selectedRowKeys: [], selectRows: [] });
-    }
+    };
 
     // open customized trial modal
     private setCustomizedTrial = (trialId: string, event: React.SyntheticEvent<EventTarget>): void => {
@@ -397,21 +394,21 @@ class TableList extends React.Component<TableListProps, TableListState> {
             isShowCustomizedModal: true,
             copyTrialId: trialId
         });
-    }
+    };
 
     private closeCustomizedTrial = (): void => {
         this.setState({
             isShowCustomizedModal: false,
             copyTrialId: ''
         });
-    }
+    };
 
     private onWindowResize = (): void => {
         this.setState(() => ({
             modalIntermediateHeight: window.innerHeight,
             modalIntermediateWidth: window.innerWidth
         }));
-    }
+    };
 
     private onRenderRow: IDetailsListProps['onRenderRow'] = props => {
         if (props) {
@@ -443,8 +440,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
         }
         // concat trial all final keys and remove dup "default" val, return list
         const finalKeysList = TRIALS.finalKeys().filter(item => item !== 'default');
-        return (COLUMNPro.concat(parameterStr)).concat(finalKeysList);
-    }
+        return COLUMNPro.concat(parameterStr).concat(finalKeysList);
+    };
 
     // get IColumn[]
     // when user click [Add Column] need to use the function
@@ -494,31 +491,29 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         className: 'detail-table',
                         onRender: (record: any) => {
                             const trialStatus = record.status;
-                            const flag: boolean = (trialStatus === 'RUNNING' || trialStatus === 'UNKNOWN') ? false : true;
+                            const flag: boolean = trialStatus === 'RUNNING' || trialStatus === 'UNKNOWN' ? false : true;
                             return (
-                                <Stack className="detail-button" horizontal>
+                                <Stack className='detail-button' horizontal>
                                     {/* see intermediate result graph */}
                                     <PrimaryButton
-                                        className="detail-button-operation"
-                                        title="Intermediate"
+                                        className='detail-button-operation'
+                                        title='Intermediate'
                                         onClick={this.showIntermediateModal.bind(this, record)}
                                     >
                                         {LineChart}
                                     </PrimaryButton>
                                     {/* kill job */}
-                                    {
-                                        flag
-                                            ?
-                                            <PrimaryButton className="detail-button-operation" disabled={true} title="kill">
-                                                {blocked}
-                                            </PrimaryButton>
-                                            :
-                                            <KillJob trial={record} />
-                                    }
+                                    {flag ? (
+                                        <PrimaryButton className='detail-button-operation' disabled={true} title='kill'>
+                                            {blocked}
+                                        </PrimaryButton>
+                                    ) : (
+                                        <KillJob trial={record} />
+                                    )}
                                     {/* Add a new trial-customized trial */}
                                     <PrimaryButton
-                                        className="detail-button-operation"
-                                        title="Customized trial"
+                                        className='detail-button-operation'
+                                        title='Customized trial'
                                         onClick={this.setCustomizedTrial.bind(this, record.id)}
                                         disabled={disabledAddCustomizedTrial}
                                     >
@@ -526,10 +521,10 @@ class TableList extends React.Component<TableListProps, TableListState> {
                                     </PrimaryButton>
                                 </Stack>
                             );
-                        },
+                        }
                     });
                     break;
-                case (result):
+                case result:
                     // remove SEARCH_SPACE title
                     // const realItem = item.replace(' (search space)', '');
                     showColumn.push({
@@ -539,10 +534,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         minWidth: 150,
                         onRender: (record: TableRecord) => {
                             const eachTrial = TRIALS.getTrial(record.id);
-                            return (
-                                <span>{eachTrial.description.parameters[item.replace(' (search space)', '')]}</span>
-                            );
-                        },
+                            return <span>{eachTrial.description.parameters[item.replace(' (search space)', '')]}</span>;
+                        }
                     });
                     break;
                 default:
@@ -559,7 +552,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                             }
                             return (
                                 <TooltipHost content={other}>
-                                    <div className="ellipsis">{other}</div>
+                                    <div className='ellipsis'>{other}</div>
                                 </TooltipHost>
                             );
                         }
@@ -567,124 +560,160 @@ class TableList extends React.Component<TableListProps, TableListState> {
             }
         }
         return showColumn;
-    }
+    };
 
     componentDidMount(): void {
         window.addEventListener('resize', this.onWindowResize);
-        this.updateData()
+        this.updateData();
     }
 
     componentDidUpdate(prevProps: TableListProps): void {
         if (this.props.columnList !== prevProps.columnList || this.props.tableSource !== prevProps.tableSource) {
             const { columnList } = this.props;
-            this.setState({
-                tableColumns: this.initTableColumnList(columnList),
-                allColumnList: this.getAllColumnKeys()
-                }, () => {this.updateData();
-            });
+            this.setState(
+                {
+                    tableColumns: this.initTableColumnList(columnList),
+                    allColumnList: this.getAllColumnKeys()
+                },
+                () => {
+                    this.updateData();
+                }
+            );
         }
     }
 
     updateData(): void {
         const tableSource: Array<TableRecord> = JSON.parse(JSON.stringify(this.props.tableSource));
 
-        const tableSlice = tableSource.slice(this.state.offset, this.state.offset + this.state.perPage)
-        
+        const tableSlice = tableSource.slice(this.state.offset, this.state.offset + this.state.perPage);
+
         this.setState({
             tableSourceForSort: tableSlice,
-            pageCount: Math.ceil(tableSource.length / this.state.perPage),
+            pageCount: Math.ceil(tableSource.length / this.state.perPage)
         });
     }
-    
+
     handlePageClick = (evt: any): void => {
         const selectedPage = evt.selected;
         const offset = selectedPage * this.state.perPage;
-        
-        this.setState({ 
-            currentPage: selectedPage, 
-            offset: offset }, 
-            () => { this.updateData();
-        });
-    }
+
+        this.setState(
+            {
+                currentPage: selectedPage,
+                offset: offset
+            },
+            () => {
+                this.updateData();
+            }
+        );
+    };
 
     updateperPage = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
         // clear input value and re-render table
         if (item !== undefined) {
-            this.setState({ 
-                perPage: item.key === 'all' ? this.props.tableSource.length: Number(item.key) },
-                () => {this.updateData();
-            });
+            this.setState(
+                {
+                    perPage: item.key === 'all' ? this.props.tableSource.length : Number(item.key)
+                },
+                () => {
+                    this.updateData();
+                }
+            );
         }
-    }
-
+    };
 
     render(): React.ReactNode {
-        const { intermediateKey, modalIntermediateWidth, modalIntermediateHeight,
-            tableColumns, allColumnList, isShowColumn, modalVisible,
-            selectRows, isShowCompareModal, intermediateOtherKeys,
-            isShowCustomizedModal, copyTrialId, intermediateOption, sortMessage
+        const {
+            intermediateKey,
+            modalIntermediateWidth,
+            modalIntermediateHeight,
+            tableColumns,
+            allColumnList,
+            isShowColumn,
+            modalVisible,
+            selectRows,
+            isShowCompareModal,
+            intermediateOtherKeys,
+            isShowCustomizedModal,
+            copyTrialId,
+            intermediateOption,
+            sortMessage
         } = this.state;
         const { columnList } = this.props;
-        const tableSource = this.state.tableSourceForSort
+        const tableSource = this.state.tableSourceForSort;
         const perPageOptions = [
-            { key: '10', text: '10 items per page'},
-            { key: '20', text: '20 items per page'},
-            { key: '50', text: '50 items per page'},
-            { key: 'all', text: 'All items'},
+            { key: '10', text: '10 items per page' },
+            { key: '20', text: '20 items per page' },
+            { key: '50', text: '50 items per page' },
+            { key: 'all', text: 'All items' }
         ];
-        
 
         if (sortMessage.field !== '') {
-            tableSource.sort(function (a, b): any {
+            tableSource.sort(function(a, b): any {
                 if (a[sortMessage.field] === undefined) {
                     return 1;
                 }
                 if (b[sortMessage.field] === undefined) {
                     return -1;
                 }
-                return (sortMessage.isDescend ? a[sortMessage.field] < b[sortMessage.field] : a[sortMessage.field] > b[sortMessage.field]) ? 1 : -1;
+                return (sortMessage.isDescend
+                  ? a[sortMessage.field] < b[sortMessage.field]
+                  : a[sortMessage.field] > b[sortMessage.field])
+                    ? 1
+                    : -1;
             });
         }
 
         return (
             <Stack>
-                <div id="tableList">
+                <div id='tableList'>
                     <DetailsList
                         columns={tableColumns}
                         items={tableSource}
-                        setKey="set"
+                        setKey='set'
                         compact={true}
                         onRenderRow={this.onRenderRow}
                         layoutMode={DetailsListLayoutMode.justified}
                         selectionMode={SelectionMode.multiple}
                         selection={this.getSelectedRows}
                     />
-                      
-                    <Stack horizontal horizontalAlign="end" verticalAlign="baseline" styles={{root:{padding:10}}} tokens={horizontalGapStackTokens}>
+
+                    <Stack
+                        horizontal
+                        horizontalAlign='end'
+                        verticalAlign='baseline'
+                        styles={{ root: { padding: 10 } }}
+                        tokens={horizontalGapStackTokens}
+                    >
                         <Dropdown
-                        selectedKey={this.state.perPage === this.props.tableSource.length ? 'all':String(this.state.perPage)}
-                        options={perPageOptions}
-                        onChange={this.updateperPage}
-                        styles={{dropdown: { width: 150}}}/>
+                            selectedKey={
+                                this.state.perPage === this.props.tableSource.length
+                                    ? 'all'
+                                    : String(this.state.perPage)
+                            }
+                            options={perPageOptions}
+                            onChange={this.updateperPage}
+                            styles={{ dropdown: { width: 150 } }}
+                        />
 
                         {/* this.props.tableSource.length > this.state.perPage &&  */}
                         <ReactPaginate
-                        previousLabel={"<"}
-                        nextLabel={">"}
-                        breakLabel={"..."}
-                        breakClassName={"break"}
-                        pageCount={this.state.pageCount}
-                        marginPagesDisplayed={2}
-                        pageRangeDisplayed={2}
-                        onPageChange={this.handlePageClick}
-                        containerClassName={(this.props.tableSource.length == 0 ? "pagination hidden" : "pagination" )}
-                        subContainerClassName={"pages pagination"}
-                        disableInitialCallback={false}
-                        activeClassName={"active"}/>
-
+                            previousLabel={'<'}
+                            nextLabel={'>'}
+                            breakLabel={'...'}
+                            breakClassName={'break'}
+                            pageCount={this.state.pageCount}
+                            marginPagesDisplayed={2}
+                            pageRangeDisplayed={2}
+                            onPageChange={this.handlePageClick}
+                            containerClassName={this.props.tableSource.length == 0 ? 'pagination hidden' : 'pagination'}
+                            subContainerClassName={'pages pagination'}
+                            disableInitialCallback={false}
+                            activeClassName={'active'}
+                        />
                     </Stack>
 
-                {/* /> */}
+                    {/* /> */}
                 </div>
                 {/* Intermediate Result Modal */}
                 <Modal
@@ -697,31 +726,26 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         <IconButton
                             styles={iconButtonStyles}
                             iconProps={{ iconName: 'Cancel' }}
-                            ariaLabel="Close popup modal"
+                            ariaLabel='Close popup modal'
                             onClick={this.hideIntermediateModal as any}
                         />
                     </div>
-                    {
-                        intermediateOtherKeys.length > 1
-                            ?
-                            <Stack horizontalAlign="end" className="selectKeys">
-                                <Dropdown
-                                    className="select"
-                                    selectedKey={intermediateKey}
-                                    options={
-                                        intermediateOtherKeys.map((key, item) => {
-                                            return {
-                                                key: key, text: intermediateOtherKeys[item]
-                                            };
-                                        })
-                                    }
-                                    onChange={this.selectOtherKeys}
-                                />
-                            </Stack>
-                            :
-                            null
-                    }
-                    <div className="intermediate-graph">
+                    {intermediateOtherKeys.length > 1 ? (
+                        <Stack horizontalAlign='end' className='selectKeys'>
+                            <Dropdown
+                                className='select'
+                                selectedKey={intermediateKey}
+                                options={intermediateOtherKeys.map((key, item) => {
+                                    return {
+                                        key: key,
+                                        text: intermediateOtherKeys[item]
+                                    };
+                                })}
+                                onChange={this.selectOtherKeys}
+                            />
+                        </Stack>
+                    ) : null}
+                    <div className='intermediate-graph'>
                         <ReactEcharts
                             option={intermediateOption}
                             style={{
@@ -729,14 +753,13 @@ class TableList extends React.Component<TableListProps, TableListState> {
                                 height: 0.7 * modalIntermediateHeight,
                                 padding: 20
                             }}
-                            theme="my_theme"
+                            theme='my_theme'
                         />
-                        <div className="xAxis">#Intermediate result</div>
+                        <div className='xAxis'>#Intermediate result</div>
                     </div>
                 </Modal>
                 {/* Add Column Modal */}
-                {
-                    isShowColumn &&
+                {isShowColumn && (
                     <ChangeColumnComponent
                         hideShowColumnDialog={this.hideShowColumnModal}
                         isHideDialog={!isShowColumn}
@@ -744,7 +767,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         selectedColumn={columnList}
                         changeColumn={this.props.changeColumn}
                     />
-                }
+                )}
                 {/* compare trials based message */}
                 {isShowCompareModal && <Compare compareStacks={selectRows} cancelFunc={this.hideCompareModal} />}
                 {/* clone trial parameters and could submit a customized trial */}
diff --git a/src/webui/src/index.tsx b/src/webui/src/index.tsx
index fb8e33fed7..22e7d9132f 100644
--- a/src/webui/src/index.tsx
+++ b/src/webui/src/index.tsx
@@ -8,18 +8,16 @@ import './index.css';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
-  (
     <Router history={browserHistory}>
-      <Route path="/" component={App}>
-        <IndexRedirect to="/oview" />
-        <Route path="/oview" component={Overview} />
-        <Route path="/detail" component={TrialsDetail} />
-        {/* test branch */}
-      </Route>
-    </Router>
+        <Route path='/' component={App}>
+            <IndexRedirect to='/oview' />
+            <Route path='/oview' component={Overview} />
+            <Route path='/detail' component={TrialsDetail} />
+            {/* test branch */}
+        </Route>
+    </Router>,
 
-  ),
-  document.getElementById('root')
+    document.getElementById('root')
 );
 
 // If you want your app to work offline and load faster, you can change
diff --git a/src/webui/src/react-app-env.d.ts b/src/webui/src/react-app-env.d.ts
index 2871d31759..0af75e6f50 100644
--- a/src/webui/src/react-app-env.d.ts
+++ b/src/webui/src/react-app-env.d.ts
@@ -1,33 +1,33 @@
 declare namespace NodeJS {
-  interface ProcessEnv {
-    readonly NODE_ENV: 'development' | 'production' | 'test';
-    readonly PUBLIC_URL: string;
-  }
+    interface ProcessEnv {
+        readonly NODE_ENV: 'development' | 'production' | 'test';
+        readonly PUBLIC_URL: string;
+    }
 }
 
 declare module '*.bmp' {
-  const src: string;
-  export default src;
+    const src: string;
+    export default src;
 }
 
 declare module '*.gif' {
-  const src: string;
-  export default src;
+    const src: string;
+    export default src;
 }
 
 declare module '*.jpg' {
-  const src: string;
-  export default src;
+    const src: string;
+    export default src;
 }
 
 declare module '*.jpeg' {
-  const src: string;
-  export default src;
+    const src: string;
+    export default src;
 }
 
 declare module '*.png' {
-  const src: string;
-  export default src;
+    const src: string;
+    export default src;
 }
 
 declare module '*.webp' {
@@ -36,25 +36,25 @@ declare module '*.webp' {
 }
 
 declare module '*.svg' {
-  import * as React from 'react';
+    import * as React from 'react';
 
-  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+    export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
 
-  const src: string;
-  export default src;
+    const src: string;
+    export default src;
 }
 
 declare module '*.module.css' {
-  const classes: { [key: string]: string };
-  export default classes;
+    const classes: { [key: string]: string };
+    export default classes;
 }
 
 declare module '*.module.scss' {
-  const classes: { [key: string]: string };
-  export default classes;
+    const classes: { [key: string]: string };
+    export default classes;
 }
 
 declare module '*.module.sass' {
-  const classes: { [key: string]: string };
-  export default classes;
+    const classes: { [key: string]: string };
+    export default classes;
 }
diff --git a/src/webui/src/static/const.ts b/src/webui/src/static/const.ts
index d8cd58dc97..f35826b5e0 100644
--- a/src/webui/src/static/const.ts
+++ b/src/webui/src/static/const.ts
@@ -15,15 +15,11 @@ const trialJobStatus = [
     'SYS_CANCELED',
     'EARLY_STOPPED'
 ];
-const CONTROLTYPE = [
-    'SEARCH_SPACE',
-    'TRIAL_CONCURRENCY',
-    'MAX_EXEC_DURATION'
-];
+const CONTROLTYPE = ['SEARCH_SPACE', 'TRIAL_CONCURRENCY', 'MAX_EXEC_DURATION'];
 const MONACO = {
     readOnly: true,
     automaticLayout: true,
-    scrollBeyondLastLine: false,
+    scrollBeyondLastLine: false
 };
 const DRAWEROPTION = {
     minimap: { enabled: false },
@@ -34,8 +30,17 @@ const OPERATION = 'Operation';
 // defatult selected column
 const COLUMN = ['Trial No.', 'ID', 'Duration', 'Status', 'Default', OPERATION];
 // all choice column !dictory final
-const COLUMNPro = ['Trial No.', 'ID', 'Start time', 'End time', 'Duration', 'Status',
-    'Intermediate result', 'Default', OPERATION];
+const COLUMNPro = [
+    'Trial No.',
+    'ID',
+    'Start time',
+    'End time',
+    'Duration',
+    'Status',
+    'Intermediate result',
+    'Default',
+    OPERATION
+];
 const CONCURRENCYTOOLTIP = 'Trial concurrency is the number of trials running concurrently.';
 const SUPPORTED_SEARCH_SPACE_TYPE = [
     'choice',
@@ -53,8 +58,18 @@ const SUPPORTED_SEARCH_SPACE_TYPE = [
 ];
 
 export {
-    MANAGER_IP, DOWNLOAD_IP, trialJobStatus, COLUMNPro, WEBUIDOC,
-    CONTROLTYPE, MONACO, COLUMN, DRAWEROPTION, OPERATION,
-    METRIC_GROUP_UPDATE_THRESHOLD, METRIC_GROUP_UPDATE_SIZE, CONCURRENCYTOOLTIP,
+    MANAGER_IP,
+    DOWNLOAD_IP,
+    trialJobStatus,
+    COLUMNPro,
+    WEBUIDOC,
+    CONTROLTYPE,
+    MONACO,
+    COLUMN,
+    DRAWEROPTION,
+    OPERATION,
+    METRIC_GROUP_UPDATE_THRESHOLD,
+    METRIC_GROUP_UPDATE_SIZE,
+    CONCURRENCYTOOLTIP,
     SUPPORTED_SEARCH_SPACE_TYPE
 };
diff --git a/src/webui/src/static/function.ts b/src/webui/src/static/function.ts
index 485585e224..52a6175713 100644
--- a/src/webui/src/static/function.ts
+++ b/src/webui/src/static/function.ts
@@ -24,7 +24,7 @@ const convertTime = (num: number): string => {
         return num / 3600 + 'h';
     } else {
         const hour = Math.floor(num / 3600);
-        const min = Math.floor(num / 60 % 60);
+        const min = Math.floor((num / 60) % 60);
         return hour > 0 ? `${hour}h ${min}min` : `${min}min`;
     }
 };
@@ -35,7 +35,7 @@ const convertDuration = (num: number): string => {
         return '0s';
     }
     const hour = Math.floor(num / 3600);
-    const minute = Math.floor(num / 60 % 60);
+    const minute = Math.floor((num / 60) % 60);
     const second = Math.floor(num % 60);
     const result: string[] = [];
     if (hour > 0) {
@@ -60,7 +60,7 @@ function parseMetrics(metricData: string): any {
 
 const isArrayType = (list: any): boolean | undefined => {
     return Array.isArray(list);
-}
+};
 
 // get final result value
 // draw Accuracy point graph
@@ -69,11 +69,11 @@ const getFinalResult = (final?: MetricDataRecord[]): number => {
     let showDefault = 0;
     if (final) {
         acc = parseMetrics(final[final.length - 1].data);
-        if (typeof (acc) === 'object' && !isArrayType(acc)) {
+        if (typeof acc === 'object' && !isArrayType(acc)) {
             if (acc.default) {
                 showDefault = acc.default;
             }
-        } else if (typeof (acc) === 'number') {
+        } else if (typeof acc === 'number') {
             showDefault = acc;
         } else {
             showDefault = NaN;
@@ -90,7 +90,7 @@ const getFinal = (final?: MetricDataRecord[]): FinalType | undefined => {
     if (final) {
         showDefault = parseMetrics(final[final.length - 1].data);
         if (typeof showDefault === 'number') {
-            if(!isNaN(showDefault)){
+            if (!isNaN(showDefault)) {
                 showDefault = { default: showDefault };
                 return showDefault;
             }
@@ -118,7 +118,7 @@ const intermediateGraphOption = (intermediateArr: number[], id: string): any =>
             left: 'center',
             textStyle: {
                 fontSize: 16,
-                color: '#333',
+                color: '#333'
             }
         },
         tooltip: {
@@ -133,11 +133,13 @@ const intermediateGraphOption = (intermediateArr: number[], id: string): any =>
             type: 'value',
             data: intermediateArr
         },
-        series: [{
-            symbolSize: 6,
-            type: 'scatter',
-            data: intermediateArr
-        }]
+        series: [
+            {
+                symbolSize: 6,
+                type: 'scatter',
+                data: intermediateArr
+            }
+        ]
     };
 };
 
@@ -155,7 +157,7 @@ const killJob = (key: number, id: string, status: string, updateList?: Function)
                 alert('Cancel the job successfully');
                 // render the table
                 if (updateList) {
-                    updateList();  // FIXME
+                    updateList(); // FIXME
                 }
             } else {
                 alert('fail to cancel the job');
@@ -178,7 +180,7 @@ const filterByStatus = (item: TableObj): boolean => {
     return item.status === 'SUCCEEDED';
 };
 
-// a waittiong trial may havn't start time 
+// a waittiong trial may havn't start time
 const filterDuration = (item: TableObj): boolean => {
     return item.status !== 'WAITING';
 };
@@ -195,7 +197,7 @@ const downFile = (content: string, fileName: string): void => {
     }
     if (navigator.userAgent.indexOf('Firefox') > -1) {
         const downTag = document.createElement('a');
-        downTag.addEventListener('click', function () {
+        downTag.addEventListener('click', function() {
             downTag.download = fileName;
             downTag.href = URL.createObjectURL(file);
         });
@@ -225,12 +227,26 @@ function metricAccuracy(metric: MetricDataRecord): number {
 
 function formatAccuracy(accuracy: number): string {
     // TODO: how to format NaN?
-    return accuracy.toFixed(6).replace(/0+$/, '').replace(/\.$/, '');
+    return accuracy
+        .toFixed(6)
+        .replace(/0+$/, '')
+        .replace(/\.$/, '');
 }
 
 export {
-    convertTime, convertDuration, getFinalResult, getFinal, downFile,
-    intermediateGraphOption, killJob, filterByStatus, filterDuration,
-    formatAccuracy, formatTimestamp, metricAccuracy, parseMetrics,
-    isArrayType, requestAxios
+    convertTime,
+    convertDuration,
+    getFinalResult,
+    getFinal,
+    downFile,
+    intermediateGraphOption,
+    killJob,
+    filterByStatus,
+    filterDuration,
+    formatAccuracy,
+    formatTimestamp,
+    metricAccuracy,
+    parseMetrics,
+    isArrayType,
+    requestAxios
 };
diff --git a/src/webui/src/static/interface.ts b/src/webui/src/static/interface.ts
index c033c225f4..eec007fd5c 100644
--- a/src/webui/src/static/interface.ts
+++ b/src/webui/src/static/interface.ts
@@ -33,7 +33,7 @@ interface TableObj {
     color?: string;
     startTime?: number;
     endTime?: number;
-    parameters(axes: MultipleAxes): Map<SingleAxis, any>; 
+    parameters(axes: MultipleAxes): Map<SingleAxis, any>;
     metrics(axes: MultipleAxes): Map<SingleAxis, any>;
 }
 
@@ -214,8 +214,25 @@ interface EventMap {
 }
 
 export {
-    TableObj, TableRecord, SearchSpace, FinalType, ErrorParameter, Parameters,
-    AccurPoint, DetailAccurPoint, TooltipForIntermediate, TooltipForAccuracy,
-    Dimobj, ParaObj, Intermedia, MetricDataRecord, TrialJobInfo, ExperimentParams,
-    ExperimentProfile, NNIManagerStatus, EventMap, SingleAxis, MultipleAxes
+    TableObj,
+    TableRecord,
+    SearchSpace,
+    FinalType,
+    ErrorParameter,
+    Parameters,
+    AccurPoint,
+    DetailAccurPoint,
+    TooltipForIntermediate,
+    TooltipForAccuracy,
+    Dimobj,
+    ParaObj,
+    Intermedia,
+    MetricDataRecord,
+    TrialJobInfo,
+    ExperimentParams,
+    ExperimentProfile,
+    NNIManagerStatus,
+    EventMap,
+    SingleAxis,
+    MultipleAxes
 };
diff --git a/src/webui/src/static/model/experiment.ts b/src/webui/src/static/model/experiment.ts
index 2f899eccdf..2cc29202c9 100644
--- a/src/webui/src/static/model/experiment.ts
+++ b/src/webui/src/static/model/experiment.ts
@@ -87,17 +87,33 @@ class Experiment {
             // set initProfile to prevent page broken
             const initProfile = {
                 data: {
-                    "id": "", "revision": 0, "execDuration": 0,
-                    "logDir": "", "nextSequenceId": 0,
-                    "params": {
-                        "authorName": "", "experimentName": "", "trialConcurrency": 0, "maxExecDuration": 0, "maxTrialNum": 0, "searchSpace": "null",
-                        "trainingServicePlatform": "", "tuner": {
-                            "builtinTunerName": "TPE",
-                            "classArgs": { "optimize_mode": "" }, "checkpointDir": ""
+                    id: '',
+                    revision: 0,
+                    execDuration: 0,
+                    logDir: '',
+                    nextSequenceId: 0,
+                    params: {
+                        authorName: '',
+                        experimentName: '',
+                        trialConcurrency: 0,
+                        maxExecDuration: 0,
+                        maxTrialNum: 0,
+                        searchSpace: 'null',
+                        trainingServicePlatform: '',
+                        tuner: {
+                            builtinTunerName: 'TPE',
+                            // eslint-disable-next-line @typescript-eslint/camelcase
+                            classArgs: { optimize_mode: '' },
+                            checkpointDir: ''
                         },
-                        "versionCheck": true, "clusterMetaData": [{ "key": "", "value": "" },
-                        { "key": "", "value": "" }]
-                    }, "startTime": 0, "endTime": 0
+                        versionCheck: true,
+                        clusterMetaData: [
+                            { key: '', value: '' },
+                            { key: '', value: '' }
+                        ]
+                    },
+                    startTime: 0,
+                    endTime: 0
                 }
             };
             this.profileField = initProfile.data as any;
@@ -112,7 +128,7 @@ class Experiment {
 
     get optimizeMode(): string {
         const tuner = this.profile.params.tuner;
-        return (tuner && tuner.classArgs && tuner.classArgs.optimize_mode) ? tuner.classArgs.optimize_mode : 'unknown';
+        return tuner && tuner.classArgs && tuner.classArgs.optimize_mode ? tuner.classArgs.optimize_mode : 'unknown';
     }
 
     get trainingServicePlatform(): string {
diff --git a/src/webui/src/static/model/searchspace.ts b/src/webui/src/static/model/searchspace.ts
index 75006bc1cd..24c12472e2 100644
--- a/src/webui/src/static/model/searchspace.ts
+++ b/src/webui/src/static/model/searchspace.ts
@@ -2,7 +2,7 @@ import { SingleAxis, MultipleAxes, TableObj } from '../interface';
 import { SUPPORTED_SEARCH_SPACE_TYPE } from '../const';
 
 function fullNameJoin(prefix: string, name: string): string {
-    return prefix ? (prefix + '/' + name) : name;
+    return prefix ? prefix + '/' + name : name;
 }
 
 class NumericAxis implements SingleAxis {
@@ -85,17 +85,24 @@ export class SearchSpace implements MultipleAxes {
         if (searchSpaceSpec === undefined) {
             return;
         }
-        Object.entries(searchSpaceSpec).forEach((item) => {
-            const key = item[0], spec = item[1] as any;
+        Object.entries(searchSpaceSpec).forEach(item => {
+            const key = item[0],
+                spec = item[1] as any;
             if (key === '_name') {
                 return;
             } else if (['choice', 'layer_choice', 'input_choice'].includes(spec._type)) {
                 // ordinal types
                 if (spec._value && typeof spec._value[0] === 'object') {
                     // nested dimension
-                    this.axes.set(key, new NestedOrdinalAxis(key, fullNameJoin(fullName, key), spec._type, spec._value));
+                    this.axes.set(
+                        key,
+                        new NestedOrdinalAxis(key, fullNameJoin(fullName, key), spec._type, spec._value)
+                    );
                 } else {
-                    this.axes.set(key, new SimpleOrdinalAxis(key, fullNameJoin(fullName, key), spec._type, spec._value));
+                    this.axes.set(
+                        key,
+                        new SimpleOrdinalAxis(key, fullNameJoin(fullName, key), spec._type, spec._value)
+                    );
                 }
             } else if (SUPPORTED_SEARCH_SPACE_TYPE.includes(spec._type)) {
                 this.axes.set(key, new NumericAxis(key, fullName + key, spec._type, spec._value));
@@ -128,7 +135,10 @@ export class SearchSpace implements MultipleAxes {
         }
         addingColumns.forEach((value, key) => {
             if (value.every(v => typeof v === 'number')) {
-                newSearchSpace.axes.set(key, new NumericAxis(key, key, 'uniform', [Math.min(...value), Math.max(...value)]));
+                newSearchSpace.axes.set(
+                    key,
+                    new NumericAxis(key, key, 'uniform', [Math.min(...value), Math.max(...value)])
+                );
             } else {
                 newSearchSpace.axes.set(key, new SimpleOrdinalAxis(key, key, 'choice', new Set(value).values()));
             }
diff --git a/src/webui/src/static/model/trial.ts b/src/webui/src/static/model/trial.ts
index ebdd35bc77..261e4b1cf9 100644
--- a/src/webui/src/static/model/trial.ts
+++ b/src/webui/src/static/model/trial.ts
@@ -1,4 +1,13 @@
-import { MetricDataRecord, TrialJobInfo, TableObj, TableRecord, Parameters, FinalType, MultipleAxes, SingleAxis } from '../interface';
+import {
+    MetricDataRecord,
+    TrialJobInfo,
+    TableObj,
+    TableRecord,
+    Parameters,
+    FinalType,
+    MultipleAxes,
+    SingleAxis
+} from '../interface';
 import { getFinal, formatAccuracy, metricAccuracy, parseMetrics, isArrayType } from '../function';
 
 /**
@@ -8,14 +17,17 @@ import { getFinal, formatAccuracy, metricAccuracy, parseMetrics, isArrayType } f
  * @param prefix Current namespace (to make full name for unexpected entries)
  * @returns Parsed structured parameters and unexpected entries
  */
-function inferTrialParameters(paramObj: object, space: MultipleAxes, prefix: string = ''): [Map<SingleAxis, any>, Map<string, any>] {
+function inferTrialParameters(
+    paramObj: object,
+    space: MultipleAxes,
+    prefix: string = ''
+): [Map<SingleAxis, any>, Map<string, any>] {
     const parameters = new Map<SingleAxis, any>();
     const unexpectedEntries = new Map<string, any>();
     for (const [k, v] of Object.entries(paramObj)) {
         // prefix can be a good fallback when corresponding item is not found in namespace
         const axisKey = space.axes.get(k);
-        if (prefix && k === '_name')
-            continue;
+        if (prefix && k === '_name') continue;
         if (axisKey !== undefined) {
             if (typeof v === 'object' && v._name !== undefined && axisKey.nested) {
                 // nested entry
@@ -92,7 +104,10 @@ class Trial implements TableObj {
             if (temp !== undefined) {
                 if (isArrayType(parseMetrics(temp.data))) {
                     return undefined;
-                } else if (typeof parseMetrics(temp.data) === 'object' && parseMetrics(temp.data).hasOwnProperty('default')) {
+                } else if (
+                    typeof parseMetrics(temp.data) === 'object' &&
+                    parseMetrics(temp.data).hasOwnProperty('default')
+                ) {
                     return parseMetrics(temp.data).default;
                 } else if (typeof parseMetrics(temp.data) === 'number') {
                     return parseMetrics(temp.data);
@@ -173,7 +188,7 @@ class Trial implements TableObj {
                 ret.parameters = getPara;
             }
         } else {
-            ret.parameters = { error: 'This trial\'s parameters are not available.' };
+            ret.parameters = { error: "This trial's parameters are not available." };
         }
         if (this.info.logPath !== undefined) {
             ret.logPath = this.info.logPath;
@@ -194,7 +209,7 @@ class Trial implements TableObj {
     public parameters(axes: MultipleAxes): Map<SingleAxis, any> {
         const tempHyper = this.info.hyperParameters;
         if (tempHyper === undefined) {
-            throw new Map([['error', 'This trial\'s parameters are not available.']]);
+            throw new Map([['error', "This trial's parameters are not available."]]);
         } else {
             let params = JSON.parse(tempHyper[tempHyper.length - 1]).parameters;
             if (typeof params === 'string') {
@@ -281,7 +296,7 @@ class Trial implements TableObj {
     }
 
     public updateTrialJobInfo(trialJobInfo: TrialJobInfo): boolean {
-        const same = (this.infoField && this.infoField.status === trialJobInfo.status);
+        const same = this.infoField && this.infoField.status === trialJobInfo.status;
         this.infoField = trialJobInfo;
         if (trialJobInfo.finalMetricData) {
             this.final = trialJobInfo.finalMetricData[trialJobInfo.finalMetricData.length - 1];
@@ -290,7 +305,8 @@ class Trial implements TableObj {
         return !same;
     }
 
-    public formatLatestAccuracy(): string {  // TODO: this should be private
+    public formatLatestAccuracy(): string {
+        // TODO: this should be private
         if (this.accuracy !== undefined) {
             if (isNaN(this.accuracy)) {
                 return this.accuracy.toString();
diff --git a/src/webui/src/static/model/trialmanager.ts b/src/webui/src/static/model/trialmanager.ts
index b860cfa042..a4d8172a2b 100644
--- a/src/webui/src/static/model/trialmanager.ts
+++ b/src/webui/src/static/model/trialmanager.ts
@@ -17,15 +17,15 @@ function groupMetricsByTrial(metrics: MetricDataRecord[]): Map<string, MetricDat
         }
     }
     // to compatiable with multi-trial in same job, fix offset of sequence
-    ret.forEach((trialMetrics) => {
+    ret.forEach(trialMetrics => {
         let minSequenceNumber = Number.POSITIVE_INFINITY;
-        trialMetrics.map((item) => {
-            if (item.sequence < minSequenceNumber && item.type !== "FINAL") {
+        trialMetrics.map(item => {
+            if (item.sequence < minSequenceNumber && item.type !== 'FINAL') {
                 minSequenceNumber = item.sequence;
             }
         });
-        trialMetrics.map((item) => {
-            if (item.type !== "FINAL") {
+        trialMetrics.map(item => {
+            if (item.type !== 'FINAL') {
                 item.sequence -= minSequenceNumber;
             }
         });
@@ -107,7 +107,7 @@ class TrialManager {
         if (succeedTrialsList !== undefined && succeedTrialsList[0] !== undefined) {
             return succeedTrialsList[0].finalKeys();
         } else {
-            return ["default"];
+            return ['default'];
         }
     }
 
@@ -125,7 +125,7 @@ class TrialManager {
             ['FAILED', 0],
             ['USER_CANCELED', 0],
             ['SYS_CANCELED', 0],
-            ['EARLY_STOPPED', 0],
+            ['EARLY_STOPPED', 0]
         ]);
         for (const trial of this.trials.values()) {
             if (trial.initialized()) {
@@ -153,20 +153,20 @@ class TrialManager {
                 let trial: TrialJobInfo | undefined;
                 let lastTrial: TrialJobInfo | undefined;
                 for (let i = 0; i < jobInfo.hyperParameters.length; i++) {
-                    const hyperParameters = jobInfo.hyperParameters[i]
+                    const hyperParameters = jobInfo.hyperParameters[i];
                     const hpObject = JSON.parse(hyperParameters);
-                    const parameterId = hpObject["parameter_id"];
+                    const parameterId = hpObject['parameter_id'];
                     trial = {
                         id: `${jobInfo.id}-${parameterId}`,
                         jobId: jobInfo.id,
                         parameterId: parameterId,
                         sequenceId: parameterId,
-                        status: "SUCCEEDED",
+                        status: 'SUCCEEDED',
                         startTime: jobInfo.startTime,
                         endTime: jobInfo.startTime,
                         hyperParameters: [hyperParameters],
                         logPath: jobInfo.logPath,
-                        stderrPath: jobInfo.stderrPath,
+                        stderrPath: jobInfo.stderrPath
                     };
                     if (jobInfo.finalMetricData) {
                         for (const metricData of jobInfo.finalMetricData) {
@@ -235,7 +235,6 @@ class TrialManager {
     }
 
     private async updateInfo(): Promise<boolean> {
-
         let updated = false;
         requestAxios(`${MANAGER_IP}/trial-jobs`)
             .then(data => {
@@ -304,7 +303,11 @@ class TrialManager {
             return;
         }
         this.doingBatchUpdate = true;
-        for (let i = 0; i < this.maxSequenceId && this.isMetricdataRangeError === false; i += METRIC_GROUP_UPDATE_SIZE) {
+        for (
+            let i = 0;
+            i < this.maxSequenceId && this.isMetricdataRangeError === false;
+            i += METRIC_GROUP_UPDATE_SIZE
+        ) {
             requestAxios(`${MANAGER_IP}/metric-data-range/${i}/${i + METRIC_GROUP_UPDATE_SIZE}`)
                 .then(data => {
                     const updated = this.doUpdateMetrics(data as any, false);
diff --git a/src/webui/yarn.lock b/src/webui/yarn.lock
index 60fff99974..71c2700c31 100644
--- a/src/webui/yarn.lock
+++ b/src/webui/yarn.lock
@@ -3671,7 +3671,7 @@ debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   dependencies:
     ms "^2.1.1"
 
-debuglog@*, debuglog@^1.0.1:
+debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
   integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=
@@ -4153,6 +4153,13 @@ escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
+eslint-config-prettier@^6.1.0:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.11.0.tgz#f6d2238c1290d01c859a8b5c1f7d352a0b0da8b1"
+  integrity sha512-oB8cpLWSAjOVFEJhhyMZh6NOEOtBVziaqdDQ86+qhDHFbZXoRTM7pNSvFRfW/W/L/LrQ38C99J5CGuRBBzBsdA==
+  dependencies:
+    get-stdin "^6.0.0"
+
 eslint-config-react-app@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-4.0.1.tgz#23fd0fd7ea89442ef1e733f66a7207674b23c8db"
@@ -4217,6 +4224,13 @@ eslint-plugin-jsx-a11y@6.2.1:
     has "^1.0.3"
     jsx-ast-utils "^2.0.1"
 
+eslint-plugin-prettier@^3.1.0:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.1.4.tgz#168ab43154e2ea57db992a2cd097c828171f75c2"
+  integrity sha512-jZDa8z76klRqo+TdGDTFJSavwbnWK2ZpqGKNZ+VvweMW516pDUMmQ2koXvxEE4JhzNvTv+radye/bWGBmA6jmg==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+
 eslint-plugin-react-hooks@^1.5.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz#6210b6d5a37205f0b92858f895a4e827020a7d04"
@@ -4506,6 +4520,11 @@ fast-deep-equal@^3.1.1:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-diff@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
+  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
+
 fast-glob@^2.0.2:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
@@ -4896,6 +4915,11 @@ get-stdin@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
 
+get-stdin@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
+  integrity sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==
+
 get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
@@ -5415,7 +5439,7 @@ import-local@^2.0.0:
     pkg-dir "^3.0.0"
     resolve-cwd "^2.0.0"
 
-imurmurhash@*, imurmurhash@^0.1.4:
+imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
@@ -6406,11 +6430,6 @@ lockfile@^1.0.4:
   dependencies:
     signal-exit "^3.0.2"
 
-lodash._baseindexof@*:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c"
-  integrity sha1-/lK1OhxnYeQmGNZU5KJXie1hgiw=
-
 lodash._baseuniq@~4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8"
@@ -6419,33 +6438,11 @@ lodash._baseuniq@~4.6.0:
     lodash._createset "~4.0.0"
     lodash._root "~3.0.0"
 
-lodash._bindcallback@*:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
-  integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4=
-
-lodash._cacheindexof@*:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92"
-  integrity sha1-PcaayCSY0u5ePOVgkbr9Ktx73pI=
-
-lodash._createcache@*:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093"
-  integrity sha1-VtagZAF2JeeevKa4AY4XRAvc8JM=
-  dependencies:
-    lodash._getnative "^3.0.0"
-
 lodash._createset@~4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26"
   integrity sha1-D0ZZ+7CddRlPqeK4imZE02PJ/iY=
 
-lodash._getnative@*, lodash._getnative@^3.0.0:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
-  integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=
-
 lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -6472,11 +6469,6 @@ lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
 
-lodash.restparam@*:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
-  integrity sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=
-
 lodash.tail@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
@@ -8526,6 +8518,18 @@ prepend-http@^1.0.1:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
   integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
+prettier@^1.18.2:
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
+  integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
+
 pretty-bytes@^5.1.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.3.0.tgz#f2849e27db79fb4d6cfe24764fc4134f165989f2"

From 7d772a40567d63f501f93cdaa910795de141adf2 Mon Sep 17 00:00:00 2001
From: Lijiao <Lijiaoa@outlook.com>
Date: Wed, 12 Aug 2020 03:33:38 +0000
Subject: [PATCH 3/8] fix error

---
 src/webui/src/components/Modals/Compare.tsx    |  2 +-
 src/webui/src/components/Overview.tsx          | 15 ++++++---------
 src/webui/src/components/trial-detail/Para.tsx |  7 ++++---
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/webui/src/components/Modals/Compare.tsx b/src/webui/src/components/Modals/Compare.tsx
index 00c0326077..2acdaa1e2f 100644
--- a/src/webui/src/components/Modals/Compare.tsx
+++ b/src/webui/src/components/Modals/Compare.tsx
@@ -224,7 +224,7 @@ class Compare extends React.Component<CompareProps, {}> {
             <Modal
                 isOpen={true}
                 containerClassName={contentStyles.container}
-                className="compare-modal"
+                className='compare-modal'
                 allowTouchBodyScroll={true}
                 dragOptions={dragOptions}
             >
diff --git a/src/webui/src/components/Overview.tsx b/src/webui/src/components/Overview.tsx
index 32d7959c13..b5fde3433a 100644
--- a/src/webui/src/components/Overview.tsx
+++ b/src/webui/src/components/Overview.tsx
@@ -13,7 +13,7 @@ import '../static/style/overview.scss';
 import '../static/style/logPath.scss';
 
 const stackTokens: IStackTokens = {
-    childrenGap: 30,
+    childrenGap: 30
 };
 
 const entriesOption = [
@@ -122,18 +122,15 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
                     </Stack.Item>
                 </Stack>
 
-                <Stack style={{backgroundColor: '#fff'}}>
-                    <Stack horizontal className="top10bg" style={{position: 'relative', height: 42}}>
-                        <div
-                            className="title"
-                            onClick={this.clickMaxTop}
-                        >
-                            <Title1 text="Top maximal trials" icon="max.png" fontColor={titleMaxbgcolor} />
+                <Stack style={{ backgroundColor: '#fff' }}>
+                    <Stack horizontal className='top10bg' style={{ position: 'relative', height: 42 }}>
+                        <div className='title' onClick={this.clickMaxTop}>
+                            <Title1 text='Top maximal trials' icon='max.png' fontColor={titleMaxbgcolor} />
                         </div>
                         <div className='title minTitle' onClick={this.clickMinTop}>
                             <Title1 text='Top minimal trials' icon='min.png' fontColor={titleMinbgcolor} />
                         </div>
-                        <div style={{position: 'absolute', right: '2%', top: 8}}>
+                        <div style={{ position: 'absolute', right: '2%', top: 8 }}>
                             <Dropdown
                                 selectedKey={bestTrialEntries}
                                 options={entriesOption}
diff --git a/src/webui/src/components/trial-detail/Para.tsx b/src/webui/src/components/trial-detail/Para.tsx
index 08e4f8e106..cd9aa90195 100644
--- a/src/webui/src/components/trial-detail/Para.tsx
+++ b/src/webui/src/components/trial-detail/Para.tsx
@@ -168,7 +168,7 @@ class Para extends React.Component<ParaProps, ParaState> {
                 // set color for primary metrics
                 // `colorScale` is used to produce a color range, while `scale` is to produce a pixel range
                 colorScale = this.convertToD3Scale(v, false);
-                convertedTrials.sort((a, b) => EXPERIMENT.optimizeMode === 'minimize' ? a[k] - b[k] : b[k] - a[k]);
+                convertedTrials.sort((a, b) => (EXPERIMENT.optimizeMode === 'minimize' ? a[k] - b[k] : b[k] - a[k]));
                 // filter top trials
                 if (percent != 1) {
                     const keptTrialNum = Math.max(Math.ceil(convertedTrials.length * percent), 1);
@@ -183,10 +183,11 @@ class Para extends React.Component<ParaProps, ParaState> {
                 // reverse the converted trials to show the top ones upfront
                 convertedTrials.reverse();
                 const assignColors = (scale: any): void => {
-                    scale.range([0, 1]);  // fake a range to perform invert
+                    scale.range([0, 1]); // fake a range to perform invert
                     const [scaleMin, scaleMax] = scale.domain();
                     const pivot = scale.invert(0.5);
-                    scale.domain([scaleMin, pivot, scaleMax])
+                    scale
+                        .domain([scaleMin, pivot, scaleMax])
                         .range(['#90EE90', '#FFC400', '#CA0000'])
                         .interpolate(d3.interpolateHsl);
                 };

From 865b22c25290fc84c14719449cf8bb18833a76b0 Mon Sep 17 00:00:00 2001
From: Lijiao <Lijiaoa@outlook.com>
Date: Thu, 10 Sep 2020 07:48:23 +0000
Subject: [PATCH 4/8] add stylelint for scss css file

---
 src/webui/.editorconfig                       |   12 -
 src/webui/.stylelintrc.json                   |   11 +
 src/webui/package.json                        |    9 +-
 src/webui/prettier.config.js                  |    5 +-
 src/webui/src/App.scss                        |   82 +-
 src/webui/src/App.test.tsx                    |    6 +-
 src/webui/src/App.tsx                         |  378 +-
 src/webui/src/components/Buttons/Icon.tsx     |   28 +-
 .../src/components/Buttons/ModalTheme.tsx     |   86 +-
 .../Modals/ChangeColumnComponent.tsx          |  236 +-
 src/webui/src/components/Modals/Compare.tsx   |  448 +-
 .../src/components/Modals/CustomizedTrial.tsx |  490 +-
 .../src/components/Modals/ExperimentPanel.tsx |  202 +-
 src/webui/src/components/Modals/Killjob.tsx   |  224 +-
 src/webui/src/components/Modals/LogPanel.tsx  |  292 +-
 .../src/components/Modals/MessageInfo.tsx     |   28 +-
 src/webui/src/components/NavCon.tsx           |  414 +-
 src/webui/src/components/Overview.tsx         |  342 +-
 src/webui/src/components/TrialsDetail.tsx     |  356 +-
 .../src/components/overview/Accuracy.tsx      |   46 +-
 .../src/components/overview/BasicInfo.tsx     |   98 +-
 src/webui/src/components/overview/Details.tsx |   44 +-
 .../src/components/overview/NumInput.tsx      |   94 +-
 .../src/components/overview/Progress.tsx      |  546 +-
 .../src/components/overview/ProgressItem.tsx  |   62 +-
 .../src/components/overview/SearchSpace.tsx   |   36 +-
 .../src/components/overview/SuccessTable.tsx  |  266 +-
 src/webui/src/components/overview/Title1.tsx  |   30 +-
 .../src/components/overview/TrialProfile.tsx  |   70 +-
 .../components/public-child/DefaultMetric.tsx |   16 +-
 .../public-child/IntermediateVal.tsx          |   14 +-
 .../components/public-child/LogPathChild.tsx  |   42 +-
 .../components/public-child/MonacoEditor.tsx  |   76 +-
 .../src/components/public-child/OpenRow.tsx   |  174 +-
 .../components/public-child/PaiTrialChild.tsx |   62 +-
 .../components/public-child/PaiTrialLog.tsx   |   84 +-
 .../src/components/public-child/TrialLog.tsx  |   26 +-
 .../stateless-component/NNItabs.tsx           |   18 +-
 .../trial-detail/DefaultMetricPoint.tsx       |  332 +-
 .../src/components/trial-detail/Duration.tsx  |  366 +-
 .../components/trial-detail/Intermediate.tsx  |  546 +-
 .../src/components/trial-detail/Para.tsx      |  506 +-
 .../src/components/trial-detail/TableList.tsx | 1466 ++---
 src/webui/src/index.css                       |  189 +-
 src/webui/src/index.tsx                       |   18 +-
 src/webui/src/react-app-env.d.ts              |   52 +-
 src/webui/src/static/const.ts                 |   98 +-
 src/webui/src/static/function.ts              |  386 +-
 src/webui/src/static/interface.ts             |  314 +-
 src/webui/src/static/model/experiment.ts      |  334 +-
 src/webui/src/static/model/searchspace.ts     |  312 +-
 src/webui/src/static/model/trial.ts           |  564 +-
 src/webui/src/static/model/trialmanager.ts    |  516 +-
 src/webui/src/static/style/button.scss        |   14 +-
 src/webui/src/static/style/compare.scss       |   29 +-
 src/webui/src/static/style/copyParameter.scss |   13 +-
 .../Modals => static/style}/customized.scss   |   74 +-
 src/webui/src/static/style/icon.scss          |   12 +-
 src/webui/src/static/style/logDrawer.scss     |   33 +-
 src/webui/src/static/style/logPath.scss       |   16 +-
 src/webui/src/static/style/nav/nav.scss       |   55 +-
 src/webui/src/static/style/openRow.scss       |   26 +-
 src/webui/src/static/style/overview.scss      |   33 +-
 src/webui/src/static/style/overviewTitle.scss |   27 +-
 src/webui/src/static/style/pagination.scss    |   30 +-
 src/webui/src/static/style/para.scss          |   42 +-
 src/webui/src/static/style/probar.scss        |   26 +-
 src/webui/src/static/style/progress.scss      |  176 +-
 src/webui/src/static/style/search.scss        |   20 +-
 src/webui/src/static/style/succTable.scss     |   13 +-
 src/webui/src/static/style/table.scss         |   44 +-
 src/webui/src/static/style/tableStatus.css    |   33 +-
 src/webui/src/static/style/trialsDetail.scss  |   78 +-
 src/webui/yarn.lock                           | 4849 ++++++++++++-----
 74 files changed, 9852 insertions(+), 7243 deletions(-)
 delete mode 100644 src/webui/.editorconfig
 create mode 100644 src/webui/.stylelintrc.json
 rename src/webui/src/{components/Modals => static/style}/customized.scss (66%)

diff --git a/src/webui/.editorconfig b/src/webui/.editorconfig
deleted file mode 100644
index 60a2751d33..0000000000
--- a/src/webui/.editorconfig
+++ /dev/null
@@ -1,12 +0,0 @@
-root = true
-
-[*]
-indent_style = space
-indent_size = 4
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
\ No newline at end of file
diff --git a/src/webui/.stylelintrc.json b/src/webui/.stylelintrc.json
new file mode 100644
index 0000000000..0c4b9e48e5
--- /dev/null
+++ b/src/webui/.stylelintrc.json
@@ -0,0 +1,11 @@
+{
+  "extends": "stylelint-config-standard",
+  "ignoreFiles": [
+    "build/**"
+  ],
+  "rules": {
+    "at-rule-empty-line-before": null,
+    "indentation": 4,
+    "no-descending-specificity": null
+  }
+}
\ No newline at end of file
diff --git a/src/webui/package.json b/src/webui/package.json
index 7a9bf49e82..0de4b39de6 100644
--- a/src/webui/package.json
+++ b/src/webui/package.json
@@ -50,6 +50,8 @@
     "sass-loader": "7.1.0",
     "semver": "6.0.0",
     "style-loader": "0.23.1",
+    "stylelint": "^13.7.0",
+    "stylelint-config-standard": "^20.0.0",
     "terser-webpack-plugin": "1.2.3",
     "url-loader": "1.1.2",
     "webpack": "4.29.6",
@@ -72,18 +74,18 @@
     "@uifabric/fluent-theme": "^0.16.7",
     "concurrently": "^5.2.0",
     "eslint": "^5.16.0",
+    "eslint-config-prettier": "^6.1.0",
     "eslint-config-react-app": "^4.0.0",
     "eslint-loader": "2.1.2",
     "eslint-plugin-flowtype": "2.50.1",
     "eslint-plugin-import": "2.16.0",
     "eslint-plugin-jsx-a11y": "6.2.1",
+    "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "7.12.4",
     "eslint-plugin-react-hooks": "^1.5.0",
-    "eslint-config-prettier": "^6.1.0",
-    "eslint-plugin-prettier": "^3.1.0",
-    "prettier": "^1.18.2",
     "express": "^4.17.1",
     "npx": "^10.2.0",
+    "prettier": "^1.18.2",
     "typescript": "^3.8.0"
   },
   "proxy": "http://localhost:12138",
@@ -92,6 +94,7 @@
     "build": "node --max-old-space-size=3072 scripts/build.js",
     "test": "node --max-old-space-size=3072 scripts/test.js",
     "eslint": "npx eslint ./ --ext .tsx,.ts",
+    "stylelint": "npx stylelint **/*{.css,.scss}",
     "mock": "node scripts/server.js",
     "dev": "concurrently \"yarn mock\" \"yarn start\""
   },
diff --git a/src/webui/prettier.config.js b/src/webui/prettier.config.js
index 7d0e4a18c8..a40c3a1d75 100644
--- a/src/webui/prettier.config.js
+++ b/src/webui/prettier.config.js
@@ -1,9 +1,12 @@
 module.exports = {
     printWidth: 120,
     semi: true,
+    useTabs: true,
+    tabWidth: 4,
     trailingComma: 'none',
     bracketSpacing: true,
     eslintIntegration: true,
     singleQuote: true,
-    jsxSingleQuote: true
+    jsxSingleQuote: true,
+    endOfline: 'lf'
 };
\ No newline at end of file
diff --git a/src/webui/src/App.scss b/src/webui/src/App.scss
index a5e45a11ad..7121c4e6fe 100644
--- a/src/webui/src/App.scss
+++ b/src/webui/src/App.scss
@@ -1,63 +1,63 @@
-.nni{
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  color: #212121;
-  font-size: 14px;
-  background: #f2f2f2;
+.nni {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    color: #212121;
+    font-size: 14px;
+    background: #f2f2f2;
 }
 
-.header{
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 56px;
-  background: #0071BC;
-  border-right: 1px solid #ccc;
-  z-index: 1000;
+.header {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 56px;
+    background: #0071bc;
+    border-right: 1px solid #ccc;
+    z-index: 1000;
 }
 
-.headerCon{
-  width: 90%;
-  margin: 0 auto;
+.headerCon {
+    width: 90%;
+    margin: 0 auto;
 }
 
-.contentBox{
-  width: 100%;
+.contentBox {
+    width: 100%;
 }
 
-.content{
-  width: 89%;
-  min-width: 1024px;
-  margin: 0 auto;
-  margin-top: 74px;
-  margin-bottom: 30px;
+.content {
+    width: 89%;
+    min-width: 1024px;
+    margin: 0 auto;
+    margin-top: 74px;
+    margin-bottom: 30px;
 }
 
-.bottomDiv{
-  margin-bottom: 10px;
+.bottomDiv {
+    margin-bottom: 10px;
 }
 
-.bgNNI{
-  background-color: #fff;
+.bgNNI {
+    background-color: #fff;
 }
 
-.borderRight{
-  margin-right: 10px;
+.borderRight {
+    margin-right: 10px;
 }
 
 /* office-fabric-ui */
-.ms-Pivot-linkContent{
-  height: 44px;
+.ms-Pivot-linkContent {
+    height: 44px;
 }
 
-.ms-Callout-main{
-  p{
-    font-weight: 500;
-    color: #333;
-  }
+.ms-Callout-main {
+    p {
+        font-weight: 500;
+        color: #333;
+    }
 }
 
-.warning{
-  padding-bottom: 15px;
-  background-color: #f2f2f2;
+.warning {
+    padding-bottom: 15px;
+    background-color: #f2f2f2;
 }
diff --git a/src/webui/src/App.test.tsx b/src/webui/src/App.test.tsx
index d1c2db9810..52d874c0f2 100644
--- a/src/webui/src/App.test.tsx
+++ b/src/webui/src/App.test.tsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import App from './App';
 
 it('renders without crashing', () => {
-    const div = document.createElement('div');
-    ReactDOM.render(<App />, div);
-    ReactDOM.unmountComponentAtNode(div);
+	const div = document.createElement('div');
+	ReactDOM.render(<App />, div);
+	ReactDOM.unmountComponentAtNode(div);
 });
diff --git a/src/webui/src/App.tsx b/src/webui/src/App.tsx
index e2f28053bc..5370590d40 100644
--- a/src/webui/src/App.tsx
+++ b/src/webui/src/App.tsx
@@ -7,198 +7,198 @@ import MessageInfo from './components/Modals/MessageInfo';
 import './App.scss';
 
 interface AppState {
-    interval: number;
-    columnList: string[];
-    experimentUpdateBroadcast: number;
-    trialsUpdateBroadcast: number;
-    metricGraphMode: 'max' | 'min'; // tuner's optimize_mode filed
-    isillegalFinal: boolean;
-    expWarningMessage: string;
-    bestTrialEntries: string; // for overview page: best trial entreis
+	interval: number;
+	columnList: string[];
+	experimentUpdateBroadcast: number;
+	trialsUpdateBroadcast: number;
+	metricGraphMode: 'max' | 'min'; // tuner's optimize_mode filed
+	isillegalFinal: boolean;
+	expWarningMessage: string;
+	bestTrialEntries: string; // for overview page: best trial entreis
 }
 
 class App extends React.Component<{}, AppState> {
-    private timerId!: number | undefined;
-    private dataFormatimer!: number;
-    private firstLoad: boolean = false; // when click refresh selector options
-
-    constructor(props: {}) {
-        super(props);
-        this.state = {
-            interval: 10, // sendons
-            columnList: COLUMN,
-            experimentUpdateBroadcast: 0,
-            trialsUpdateBroadcast: 0,
-            metricGraphMode: 'max',
-            isillegalFinal: false,
-            expWarningMessage: '',
-            bestTrialEntries: '10'
-        };
-    }
-
-    async componentDidMount(): Promise<void> {
-        await Promise.all([EXPERIMENT.init(), TRIALS.init()]);
-        this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1 }));
-        this.setState(state => ({ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
-        this.timerId = window.setTimeout(this.refresh, this.state.interval * 1000);
-        this.setState({ metricGraphMode: EXPERIMENT.optimizeMode === 'minimize' ? 'min' : 'max' });
-        // final result is legal
-        // get a succeed trial，see final result data's format
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        this.dataFormatimer = window.setInterval(this.getFinalDataFormat, this.state.interval * 1000);
-    }
-
-    getFinalDataFormat = (): void => {
-        for (let i = 0; this.state.isillegalFinal === false; i++) {
-            if (TRIALS.succeededTrials()[0] !== undefined && TRIALS.succeededTrials()[0].final !== undefined) {
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                const oneSucceedTrial = JSON.parse(JSON.parse(TRIALS.succeededTrials()[0].final!.data));
-                if (typeof oneSucceedTrial === 'number' || oneSucceedTrial.hasOwnProperty('default')) {
-                    window.clearInterval(this.dataFormatimer);
-                    break;
-                } else {
-                    // illegal final data
-                    this.setState(() => ({
-                        isillegalFinal: true,
-                        expWarningMessage:
-                            'WebUI support final result as number and dictornary includes default keys, your experiment final result is illegal, please check your data.'
-                    }));
-                    window.clearInterval(this.dataFormatimer);
-                }
-            } else {
-                break;
-            }
-        }
-    };
-
-    changeInterval = (interval: number): void => {
-        window.clearTimeout(this.timerId);
-        if (interval === 0) {
-            return;
-        }
-        // setState will trigger page refresh at once.
-        // setState is asyc, interval not update to (this.state.interval) at once.
-        this.setState({ interval }, () => {
-            this.firstLoad = true;
-            this.refresh();
-        });
-    };
-
-    // TODO: use local storage
-    changeColumn = (columnList: string[]): void => {
-        this.setState({ columnList: columnList });
-    };
-
-    changeMetricGraphMode = (val: 'max' | 'min'): void => {
-        this.setState({ metricGraphMode: val });
-    };
-
-    // overview best trial module
-    changeEntries = (entries: string): void => {
-        this.setState({ bestTrialEntries: entries });
-    };
-
-    render(): React.ReactNode {
-        const {
-            interval,
-            columnList,
-            experimentUpdateBroadcast,
-            trialsUpdateBroadcast,
-            metricGraphMode,
-            isillegalFinal,
-            expWarningMessage,
-            bestTrialEntries
-        } = this.state;
-        if (experimentUpdateBroadcast === 0 || trialsUpdateBroadcast === 0) {
-            return null; // TODO: render a loading page
-        }
-
-        const errorList = [
-            { errorWhere: TRIALS.jobListError(), errorMessage: TRIALS.getJobErrorMessage() },
-            { errorWhere: EXPERIMENT.experimentError(), errorMessage: EXPERIMENT.getExperimentMessage() },
-            { errorWhere: EXPERIMENT.statusError(), errorMessage: EXPERIMENT.getStatusMessage() },
-            { errorWhere: TRIALS.MetricDataError(), errorMessage: TRIALS.getMetricDataErrorMessage() },
-            { errorWhere: TRIALS.latestMetricDataError(), errorMessage: TRIALS.getLatestMetricDataErrorMessage() },
-            { errorWhere: TRIALS.metricDataRangeError(), errorMessage: TRIALS.metricDataRangeErrorMessage() }
-        ];
-
-        const reactPropsChildren = React.Children.map(this.props.children, child =>
-            React.cloneElement(child as React.ReactElement<any>, {
-                interval,
-                columnList,
-                changeColumn: this.changeColumn,
-                experimentUpdateBroadcast,
-                trialsUpdateBroadcast,
-                metricGraphMode,
-                changeMetricGraphMode: this.changeMetricGraphMode,
-                bestTrialEntries,
-                changeEntries: this.changeEntries
-            })
-        );
-
-        return (
-            <Stack className='nni' style={{ minHeight: window.innerHeight }}>
-                <div className='header'>
-                    <div className='headerCon'>
-                        <NavCon changeInterval={this.changeInterval} refreshFunction={this.lastRefresh} />
-                    </div>
-                </div>
-                <Stack className='contentBox'>
-                    <Stack className='content'>
-                        {/* if api has error field, show error message */}
-                        {errorList.map((item, key) => {
-                            return (
-                                item.errorWhere && (
-                                    <div key={key} className='warning'>
-                                        <MessageInfo info={item.errorMessage} typeInfo='error' />
-                                    </div>
-                                )
-                            );
-                        })}
-                        {isillegalFinal && (
-                            <div className='warning'>
-                                <MessageInfo info={expWarningMessage} typeInfo='warning' />
-                            </div>
-                        )}
-                        {reactPropsChildren}
-                    </Stack>
-                </Stack>
-            </Stack>
-        );
-    }
-
-    private refresh = async (): Promise<void> => {
-        // resolve this question: 10s -> 20s, page refresh twice.
-        // only refresh this page after clicking the refresh options
-        if (this.firstLoad !== true) {
-            const [experimentUpdated, trialsUpdated] = await Promise.all([EXPERIMENT.update(), TRIALS.update()]);
-            if (experimentUpdated) {
-                this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1 }));
-            }
-            if (trialsUpdated) {
-                this.setState(state => ({ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
-            }
-        } else {
-            this.firstLoad = false;
-        }
-
-        // experiment status and /trial-jobs api's status could decide website update
-        if (['DONE', 'ERROR', 'STOPPED'].includes(EXPERIMENT.status) || TRIALS.jobListError()) {
-            // experiment finished, refresh once more to ensure consistency
-            this.setState({ interval: 0 });
-            this.lastRefresh();
-            return;
-        }
-
-        this.timerId = window.setTimeout(this.refresh, this.state.interval * 1000);
-    };
-
-    public async lastRefresh(): Promise<void> {
-        await EXPERIMENT.update();
-        await TRIALS.update(true);
-        this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1 }));
-        this.setState(state => ({ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
-    }
+	private timerId!: number | undefined;
+	private dataFormatimer!: number;
+	private firstLoad: boolean = false; // when click refresh selector options
+
+	constructor(props: {}) {
+		super(props);
+		this.state = {
+			interval: 10, // sendons
+			columnList: COLUMN,
+			experimentUpdateBroadcast: 0,
+			trialsUpdateBroadcast: 0,
+			metricGraphMode: 'max',
+			isillegalFinal: false,
+			expWarningMessage: '',
+			bestTrialEntries: '10'
+		};
+	}
+
+	async componentDidMount(): Promise<void> {
+		await Promise.all([EXPERIMENT.init(), TRIALS.init()]);
+		this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1 }));
+		this.setState(state => ({ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
+		this.timerId = window.setTimeout(this.refresh, this.state.interval * 1000);
+		this.setState({ metricGraphMode: EXPERIMENT.optimizeMode === 'minimize' ? 'min' : 'max' });
+		// final result is legal
+		// get a succeed trial，see final result data's format
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		this.dataFormatimer = window.setInterval(this.getFinalDataFormat, this.state.interval * 1000);
+	}
+
+	getFinalDataFormat = (): void => {
+		for (let i = 0; this.state.isillegalFinal === false; i++) {
+			if (TRIALS.succeededTrials()[0] !== undefined && TRIALS.succeededTrials()[0].final !== undefined) {
+				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+				const oneSucceedTrial = JSON.parse(JSON.parse(TRIALS.succeededTrials()[0].final!.data));
+				if (typeof oneSucceedTrial === 'number' || oneSucceedTrial.hasOwnProperty('default')) {
+					window.clearInterval(this.dataFormatimer);
+					break;
+				} else {
+					// illegal final data
+					this.setState(() => ({
+						isillegalFinal: true,
+						expWarningMessage:
+							'WebUI support final result as number and dictornary includes default keys, your experiment final result is illegal, please check your data.'
+					}));
+					window.clearInterval(this.dataFormatimer);
+				}
+			} else {
+				break;
+			}
+		}
+	};
+
+	changeInterval = (interval: number): void => {
+		window.clearTimeout(this.timerId);
+		if (interval === 0) {
+			return;
+		}
+		// setState will trigger page refresh at once.
+		// setState is asyc, interval not update to (this.state.interval) at once.
+		this.setState({ interval }, () => {
+			this.firstLoad = true;
+			this.refresh();
+		});
+	};
+
+	// TODO: use local storage
+	changeColumn = (columnList: string[]): void => {
+		this.setState({ columnList: columnList });
+	};
+
+	changeMetricGraphMode = (val: 'max' | 'min'): void => {
+		this.setState({ metricGraphMode: val });
+	};
+
+	// overview best trial module
+	changeEntries = (entries: string): void => {
+		this.setState({ bestTrialEntries: entries });
+	};
+
+	render(): React.ReactNode {
+		const {
+			interval,
+			columnList,
+			experimentUpdateBroadcast,
+			trialsUpdateBroadcast,
+			metricGraphMode,
+			isillegalFinal,
+			expWarningMessage,
+			bestTrialEntries
+		} = this.state;
+		if (experimentUpdateBroadcast === 0 || trialsUpdateBroadcast === 0) {
+			return null; // TODO: render a loading page
+		}
+
+		const errorList = [
+			{ errorWhere: TRIALS.jobListError(), errorMessage: TRIALS.getJobErrorMessage() },
+			{ errorWhere: EXPERIMENT.experimentError(), errorMessage: EXPERIMENT.getExperimentMessage() },
+			{ errorWhere: EXPERIMENT.statusError(), errorMessage: EXPERIMENT.getStatusMessage() },
+			{ errorWhere: TRIALS.MetricDataError(), errorMessage: TRIALS.getMetricDataErrorMessage() },
+			{ errorWhere: TRIALS.latestMetricDataError(), errorMessage: TRIALS.getLatestMetricDataErrorMessage() },
+			{ errorWhere: TRIALS.metricDataRangeError(), errorMessage: TRIALS.metricDataRangeErrorMessage() }
+		];
+
+		const reactPropsChildren = React.Children.map(this.props.children, child =>
+			React.cloneElement(child as React.ReactElement<any>, {
+				interval,
+				columnList,
+				changeColumn: this.changeColumn,
+				experimentUpdateBroadcast,
+				trialsUpdateBroadcast,
+				metricGraphMode,
+				changeMetricGraphMode: this.changeMetricGraphMode,
+				bestTrialEntries,
+				changeEntries: this.changeEntries
+			})
+		);
+
+		return (
+			<Stack className='nni' style={{ minHeight: window.innerHeight }}>
+				<div className='header'>
+					<div className='headerCon'>
+						<NavCon changeInterval={this.changeInterval} refreshFunction={this.lastRefresh} />
+					</div>
+				</div>
+				<Stack className='contentBox'>
+					<Stack className='content'>
+						{/* if api has error field, show error message */}
+						{errorList.map((item, key) => {
+							return (
+								item.errorWhere && (
+									<div key={key} className='warning'>
+										<MessageInfo info={item.errorMessage} typeInfo='error' />
+									</div>
+								)
+							);
+						})}
+						{isillegalFinal && (
+							<div className='warning'>
+								<MessageInfo info={expWarningMessage} typeInfo='warning' />
+							</div>
+						)}
+						{reactPropsChildren}
+					</Stack>
+				</Stack>
+			</Stack>
+		);
+	}
+
+	private refresh = async (): Promise<void> => {
+		// resolve this question: 10s -> 20s, page refresh twice.
+		// only refresh this page after clicking the refresh options
+		if (this.firstLoad !== true) {
+			const [experimentUpdated, trialsUpdated] = await Promise.all([EXPERIMENT.update(), TRIALS.update()]);
+			if (experimentUpdated) {
+				this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1 }));
+			}
+			if (trialsUpdated) {
+				this.setState(state => ({ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
+			}
+		} else {
+			this.firstLoad = false;
+		}
+
+		// experiment status and /trial-jobs api's status could decide website update
+		if (['DONE', 'ERROR', 'STOPPED'].includes(EXPERIMENT.status) || TRIALS.jobListError()) {
+			// experiment finished, refresh once more to ensure consistency
+			this.setState({ interval: 0 });
+			this.lastRefresh();
+			return;
+		}
+
+		this.timerId = window.setTimeout(this.refresh, this.state.interval * 1000);
+	};
+
+	public async lastRefresh(): Promise<void> {
+		await EXPERIMENT.update();
+		await TRIALS.update(true);
+		this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1 }));
+		this.setState(state => ({ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
+	}
 }
 
 export default App;
diff --git a/src/webui/src/components/Buttons/Icon.tsx b/src/webui/src/components/Buttons/Icon.tsx
index e67f71a6dc..7e1c0d4577 100644
--- a/src/webui/src/components/Buttons/Icon.tsx
+++ b/src/webui/src/components/Buttons/Icon.tsx
@@ -18,18 +18,18 @@ const closeTimer = { iconName: 'Blocked2' };
 const LineChart = <Icon iconName='LineChart' />;
 
 export {
-    infoIcon,
-    warining,
-    errorBadge,
-    completed,
-    blocked,
-    infoIconAbout,
-    copy,
-    tableListIcon,
-    downLoadIcon,
-    timeIcon,
-    disableUpdates,
-    requency,
-    closeTimer,
-    LineChart
+	infoIcon,
+	warining,
+	errorBadge,
+	completed,
+	blocked,
+	infoIconAbout,
+	copy,
+	tableListIcon,
+	downLoadIcon,
+	timeIcon,
+	disableUpdates,
+	requency,
+	closeTimer,
+	LineChart
 };
diff --git a/src/webui/src/components/Buttons/ModalTheme.tsx b/src/webui/src/components/Buttons/ModalTheme.tsx
index 90871597aa..2afece9696 100644
--- a/src/webui/src/components/Buttons/ModalTheme.tsx
+++ b/src/webui/src/components/Buttons/ModalTheme.tsx
@@ -2,52 +2,52 @@ import { getTheme, mergeStyleSets, FontWeights, FontSizes } from 'office-ui-fabr
 // Themed styles for the example.
 const theme = getTheme();
 const contentStyles = mergeStyleSets({
-    container: {
-        display: 'flex',
-        flexFlow: 'column nowrap',
-        alignItems: 'stretch'
-    },
-    header: [
-        theme.fonts.xLargePlus,
-        {
-            flex: '1 1 auto',
-            borderTop: `4px solid ${theme.palette.themePrimary}`,
-            color: theme.palette.neutralPrimary,
-            display: 'flex',
-            fontSize: FontSizes.xLarge,
-            alignItems: 'center',
-            fontWeight: FontWeights.semibold,
-            padding: '12px 12px 14px 24px'
-        }
-    ],
-    body: {
-        flex: '4 4 auto',
-        padding: '0 24px 24px 24px',
-        overflowY: 'hidden',
-        selectors: {
-            p: {
-                margin: '14px 0'
-            },
-            'p:first-child': {
-                marginTop: 0
-            },
-            'p:last-child': {
-                marginBottom: 0
-            }
-        }
-    }
+	container: {
+		display: 'flex',
+		flexFlow: 'column nowrap',
+		alignItems: 'stretch'
+	},
+	header: [
+		theme.fonts.xLargePlus,
+		{
+			flex: '1 1 auto',
+			borderTop: `4px solid ${theme.palette.themePrimary}`,
+			color: theme.palette.neutralPrimary,
+			display: 'flex',
+			fontSize: FontSizes.xLarge,
+			alignItems: 'center',
+			fontWeight: FontWeights.semibold,
+			padding: '12px 12px 14px 24px'
+		}
+	],
+	body: {
+		flex: '4 4 auto',
+		padding: '0 24px 24px 24px',
+		overflowY: 'hidden',
+		selectors: {
+			p: {
+				margin: '14px 0'
+			},
+			'p:first-child': {
+				marginTop: 0
+			},
+			'p:last-child': {
+				marginBottom: 0
+			}
+		}
+	}
 });
 
 const iconButtonStyles = mergeStyleSets({
-    root: {
-        color: theme.palette.neutralPrimary,
-        marginLeft: 'auto',
-        marginTop: '4px',
-        marginRight: '2px'
-    },
-    rootHovered: {
-        color: theme.palette.neutralDark
-    }
+	root: {
+		color: theme.palette.neutralPrimary,
+		marginLeft: 'auto',
+		marginTop: '4px',
+		marginRight: '2px'
+	},
+	rootHovered: {
+		color: theme.palette.neutralDark
+	}
 });
 
 export { contentStyles, iconButtonStyles };
diff --git a/src/webui/src/components/Modals/ChangeColumnComponent.tsx b/src/webui/src/components/Modals/ChangeColumnComponent.tsx
index 673246aad0..c291e9ce95 100644
--- a/src/webui/src/components/Modals/ChangeColumnComponent.tsx
+++ b/src/webui/src/components/Modals/ChangeColumnComponent.tsx
@@ -3,62 +3,62 @@ import { Dialog, DialogType, DialogFooter, Checkbox, PrimaryButton, DefaultButto
 import { OPERATION } from '../../static/const';
 
 interface ChangeColumnState {
-    userSelectColumnList: string[];
-    originSelectColumnList: string[];
+	userSelectColumnList: string[];
+	originSelectColumnList: string[];
 }
 
 interface ChangeColumnProps {
-    isHideDialog: boolean;
-    showColumn: string[]; // all column List
-    selectedColumn: string[]; // user selected column list
-    changeColumn: (val: string[]) => void;
-    hideShowColumnDialog: () => void;
+	isHideDialog: boolean;
+	showColumn: string[]; // all column List
+	selectedColumn: string[]; // user selected column list
+	changeColumn: (val: string[]) => void;
+	hideShowColumnDialog: () => void;
 }
 
 interface CheckBoxItems {
-    label: string;
-    checked: boolean;
-    onChange: () => void;
+	label: string;
+	checked: boolean;
+	onChange: () => void;
 }
 class ChangeColumnComponent extends React.Component<ChangeColumnProps, ChangeColumnState> {
-    constructor(props: ChangeColumnProps) {
-        super(props);
-        this.state = {
-            userSelectColumnList: this.props.selectedColumn,
-            originSelectColumnList: this.props.selectedColumn
-        };
-    }
+	constructor(props: ChangeColumnProps) {
+		super(props);
+		this.state = {
+			userSelectColumnList: this.props.selectedColumn,
+			originSelectColumnList: this.props.selectedColumn
+		};
+	}
 
-    makeChangeHandler = (label: string): any => {
-        return (ev: any, checked: boolean): void => this.onCheckboxChange(ev, label, checked);
-    };
+	makeChangeHandler = (label: string): any => {
+		return (ev: any, checked: boolean): void => this.onCheckboxChange(ev, label, checked);
+	};
 
-    onCheckboxChange = (
-        ev: React.FormEvent<HTMLElement | HTMLInputElement> | undefined,
-        label: string,
-        val?: boolean
-    ): void => {
-        const source: string[] = JSON.parse(JSON.stringify(this.state.userSelectColumnList));
-        if (val === true) {
-            if (!source.includes(label)) {
-                source.push(label);
-                this.setState(() => ({ userSelectColumnList: source }));
-            }
-        } else {
-            if (source.includes(label)) {
-                // remove from source
-                const result = source.filter(item => item !== label);
-                this.setState(() => ({ userSelectColumnList: result }));
-            }
-        }
-    };
+	onCheckboxChange = (
+		ev: React.FormEvent<HTMLElement | HTMLInputElement> | undefined,
+		label: string,
+		val?: boolean
+	): void => {
+		const source: string[] = JSON.parse(JSON.stringify(this.state.userSelectColumnList));
+		if (val === true) {
+			if (!source.includes(label)) {
+				source.push(label);
+				this.setState(() => ({ userSelectColumnList: source }));
+			}
+		} else {
+			if (source.includes(label)) {
+				// remove from source
+				const result = source.filter(item => item !== label);
+				this.setState(() => ({ userSelectColumnList: result }));
+			}
+		}
+	};
 
-    saveUserSelectColumn = (): void => {
-        const { userSelectColumnList } = this.state;
-        const { showColumn } = this.props;
-        // sort by Trial No. | ID | Duration | Start Time | End Time | ...
-        const sortColumn: string[] = [];
-        /**
+	saveUserSelectColumn = (): void => {
+		const { userSelectColumnList } = this.state;
+		const { showColumn } = this.props;
+		// sort by Trial No. | ID | Duration | Start Time | End Time | ...
+		const sortColumn: string[] = [];
+		/**
          * 
          * TODO: use this function to refactor sort column
          * search space might orderless
@@ -72,82 +72,82 @@ class ChangeColumnComponent extends React.Component<ChangeColumnProps, ChangeCol
                 });
             });
          */
-        // push ![Operation] ![search space] column
-        showColumn.map(item => {
-            userSelectColumnList.map(key => {
-                if (item === key && item !== OPERATION) {
-                    sortColumn.push(key);
-                }
-            });
-        });
-        // push search space key
-        userSelectColumnList.map(index => {
-            if (index.includes('search space')) {
-                if (!sortColumn.includes(index)) {
-                    sortColumn.push(index);
-                }
-            }
-        });
-        // push Operation
-        if (userSelectColumnList.includes(OPERATION)) {
-            sortColumn.push(OPERATION);
-        }
-        this.props.changeColumn(sortColumn);
-        this.hideDialog(); // hide dialog
-    };
+		// push ![Operation] ![search space] column
+		showColumn.map(item => {
+			userSelectColumnList.map(key => {
+				if (item === key && item !== OPERATION) {
+					sortColumn.push(key);
+				}
+			});
+		});
+		// push search space key
+		userSelectColumnList.map(index => {
+			if (index.includes('search space')) {
+				if (!sortColumn.includes(index)) {
+					sortColumn.push(index);
+				}
+			}
+		});
+		// push Operation
+		if (userSelectColumnList.includes(OPERATION)) {
+			sortColumn.push(OPERATION);
+		}
+		this.props.changeColumn(sortColumn);
+		this.hideDialog(); // hide dialog
+	};
 
-    hideDialog = (): void => {
-        this.props.hideShowColumnDialog();
-    };
+	hideDialog = (): void => {
+		this.props.hideShowColumnDialog();
+	};
 
-    // user exit dialog
-    cancelOption = (): void => {
-        // reset select column
-        const { originSelectColumnList } = this.state;
-        this.setState({ userSelectColumnList: originSelectColumnList }, () => {
-            this.hideDialog();
-        });
-    };
+	// user exit dialog
+	cancelOption = (): void => {
+		// reset select column
+		const { originSelectColumnList } = this.state;
+		this.setState({ userSelectColumnList: originSelectColumnList }, () => {
+			this.hideDialog();
+		});
+	};
 
-    render(): React.ReactNode {
-        const { showColumn, isHideDialog } = this.props;
-        const { userSelectColumnList } = this.state;
-        const renderOptions: Array<CheckBoxItems> = [];
-        showColumn.map(item => {
-            if (userSelectColumnList.includes(item)) {
-                // selected column name
-                renderOptions.push({ label: item, checked: true, onChange: this.makeChangeHandler(item) });
-            } else {
-                renderOptions.push({ label: item, checked: false, onChange: this.makeChangeHandler(item) });
-            }
-        });
-        return (
-            <div>
-                <Dialog
-                    hidden={isHideDialog} // required field!
-                    dialogContentProps={{
-                        type: DialogType.largeHeader,
-                        title: 'Change table column',
-                        subText: 'You can chose which columns you want to see in the table.'
-                    }}
-                    modalProps={{
-                        isBlocking: false,
-                        styles: { main: { maxWidth: 450 } }
-                    }}
-                >
-                    <div className='columns-height'>
-                        {renderOptions.map(item => {
-                            return <Checkbox key={item.label} {...item} styles={{ root: { marginBottom: 8 } }} />;
-                        })}
-                    </div>
-                    <DialogFooter>
-                        <PrimaryButton text='Save' onClick={this.saveUserSelectColumn} />
-                        <DefaultButton text='Cancel' onClick={this.cancelOption} />
-                    </DialogFooter>
-                </Dialog>
-            </div>
-        );
-    }
+	render(): React.ReactNode {
+		const { showColumn, isHideDialog } = this.props;
+		const { userSelectColumnList } = this.state;
+		const renderOptions: Array<CheckBoxItems> = [];
+		showColumn.map(item => {
+			if (userSelectColumnList.includes(item)) {
+				// selected column name
+				renderOptions.push({ label: item, checked: true, onChange: this.makeChangeHandler(item) });
+			} else {
+				renderOptions.push({ label: item, checked: false, onChange: this.makeChangeHandler(item) });
+			}
+		});
+		return (
+			<div>
+				<Dialog
+					hidden={isHideDialog} // required field!
+					dialogContentProps={{
+						type: DialogType.largeHeader,
+						title: 'Change table column',
+						subText: 'You can chose which columns you want to see in the table.'
+					}}
+					modalProps={{
+						isBlocking: false,
+						styles: { main: { maxWidth: 450 } }
+					}}
+				>
+					<div className='columns-height'>
+						{renderOptions.map(item => {
+							return <Checkbox key={item.label} {...item} styles={{ root: { marginBottom: 8 } }} />;
+						})}
+					</div>
+					<DialogFooter>
+						<PrimaryButton text='Save' onClick={this.saveUserSelectColumn} />
+						<DefaultButton text='Cancel' onClick={this.cancelOption} />
+					</DialogFooter>
+				</Dialog>
+			</div>
+		);
+	}
 }
 
 export default ChangeColumnComponent;
diff --git a/src/webui/src/components/Modals/Compare.tsx b/src/webui/src/components/Modals/Compare.tsx
index 2acdaa1e2f..104e0134ee 100644
--- a/src/webui/src/components/Modals/Compare.tsx
+++ b/src/webui/src/components/Modals/Compare.tsx
@@ -8,245 +8,245 @@ import { contentStyles, iconButtonStyles } from '../Buttons/ModalTheme';
 import '../../static/style/compare.scss';
 
 const dragOptions: IDragOptions = {
-    moveMenuItemText: 'Move',
-    closeMenuItemText: 'Close',
-    menu: ContextualMenu
+	moveMenuItemText: 'Move',
+	closeMenuItemText: 'Close',
+	menu: ContextualMenu
 };
 
 // the modal of trial compare
 interface CompareProps {
-    compareStacks: Array<TableRecord>;
-    cancelFunc: () => void;
+	compareStacks: Array<TableRecord>;
+	cancelFunc: () => void;
 }
 
 class Compare extends React.Component<CompareProps, {}> {
-    public _isCompareMount!: boolean;
-    constructor(props: CompareProps) {
-        super(props);
-    }
+	public _isCompareMount!: boolean;
+	constructor(props: CompareProps) {
+		super(props);
+	}
 
-    intermediate = (): React.ReactNode => {
-        const { compareStacks } = this.props;
-        const trialIntermediate: Array<Intermedia> = [];
-        const idsList: string[] = [];
-        compareStacks.forEach(element => {
-            const trial = TRIALS.getTrial(element.id);
-            trialIntermediate.push({
-                name: element.id,
-                data: trial.description.intermediate,
-                type: 'line',
-                hyperPara: trial.description.parameters
-            });
-            idsList.push(element.id);
-        });
-        // find max intermediate number
-        trialIntermediate.sort((a, b) => {
-            return b.data.length - a.data.length;
-        });
-        const legend: string[] = [];
-        // max length
-        const length = trialIntermediate[0] !== undefined ? trialIntermediate[0].data.length : 0;
-        const xAxis: number[] = [];
-        trialIntermediate.forEach(element => {
-            legend.push(element.name);
-        });
-        for (let i = 1; i <= length; i++) {
-            xAxis.push(i);
-        }
-        const option = {
-            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];
-                    }
-                },
-                formatter: function(data: TooltipForIntermediate): React.ReactNode {
-                    const trialId = data.seriesName;
-                    let obj = {};
-                    const temp = trialIntermediate.find(key => key.name === trialId);
-                    if (temp !== undefined) {
-                        obj = temp.hyperPara;
-                    }
-                    return (
-                        '<div class="tooldetailAccuracy">' +
-                        '<div>Trial ID: ' +
-                        trialId +
-                        '</div>' +
-                        '<div>Intermediate: ' +
-                        data.data +
-                        '</div>' +
-                        '<div>Parameters: ' +
-                        '<pre>' +
-                        JSON.stringify(obj, null, 4) +
-                        '</pre>' +
-                        '</div>' +
-                        '</div>'
-                    );
-                }
-            },
-            grid: {
-                left: '5%',
-                top: 40,
-                containLabel: true
-            },
-            legend: {
-                // more than 10 trials will hide legend
-                data: idsList.length > 10 ? null : idsList
-            },
-            xAxis: {
-                type: 'category',
-                // name: '# Intermediate',
-                boundaryGap: false,
-                data: xAxis
-            },
-            yAxis: {
-                type: 'value',
-                name: 'Metric',
-                scale: true
-            },
-            series: trialIntermediate
-        };
-        return (
-            <ReactEcharts
-                option={option}
-                style={{ width: '100%', height: 418, margin: '0 auto' }}
-                notMerge={true} // update now
-            />
-        );
-    };
+	intermediate = (): React.ReactNode => {
+		const { compareStacks } = this.props;
+		const trialIntermediate: Array<Intermedia> = [];
+		const idsList: string[] = [];
+		compareStacks.forEach(element => {
+			const trial = TRIALS.getTrial(element.id);
+			trialIntermediate.push({
+				name: element.id,
+				data: trial.description.intermediate,
+				type: 'line',
+				hyperPara: trial.description.parameters
+			});
+			idsList.push(element.id);
+		});
+		// find max intermediate number
+		trialIntermediate.sort((a, b) => {
+			return b.data.length - a.data.length;
+		});
+		const legend: string[] = [];
+		// max length
+		const length = trialIntermediate[0] !== undefined ? trialIntermediate[0].data.length : 0;
+		const xAxis: number[] = [];
+		trialIntermediate.forEach(element => {
+			legend.push(element.name);
+		});
+		for (let i = 1; i <= length; i++) {
+			xAxis.push(i);
+		}
+		const option = {
+			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];
+					}
+				},
+				formatter: function(data: TooltipForIntermediate): React.ReactNode {
+					const trialId = data.seriesName;
+					let obj = {};
+					const temp = trialIntermediate.find(key => key.name === trialId);
+					if (temp !== undefined) {
+						obj = temp.hyperPara;
+					}
+					return (
+						'<div class="tooldetailAccuracy">' +
+						'<div>Trial ID: ' +
+						trialId +
+						'</div>' +
+						'<div>Intermediate: ' +
+						data.data +
+						'</div>' +
+						'<div>Parameters: ' +
+						'<pre>' +
+						JSON.stringify(obj, null, 4) +
+						'</pre>' +
+						'</div>' +
+						'</div>'
+					);
+				}
+			},
+			grid: {
+				left: '5%',
+				top: 40,
+				containLabel: true
+			},
+			legend: {
+				// more than 10 trials will hide legend
+				data: idsList.length > 10 ? null : idsList
+			},
+			xAxis: {
+				type: 'category',
+				// name: '# Intermediate',
+				boundaryGap: false,
+				data: xAxis
+			},
+			yAxis: {
+				type: 'value',
+				name: 'Metric',
+				scale: true
+			},
+			series: trialIntermediate
+		};
+		return (
+			<ReactEcharts
+				option={option}
+				style={{ width: '100%', height: 418, margin: '0 auto' }}
+				notMerge={true} // update now
+			/>
+		);
+	};
 
-    // render table column ---
-    initColumn = (): React.ReactNode => {
-        const idList: string[] = [];
-        const sequenceIdList: number[] = [];
-        const durationList: number[] = [];
+	// render table column ---
+	initColumn = (): React.ReactNode => {
+		const idList: string[] = [];
+		const sequenceIdList: number[] = [];
+		const durationList: number[] = [];
 
-        const compareStacks = this.props.compareStacks.map(tableRecord => TRIALS.getTrial(tableRecord.id));
+		const compareStacks = this.props.compareStacks.map(tableRecord => TRIALS.getTrial(tableRecord.id));
 
-        const parameterList: Array<object> = [];
-        let parameterKeys: string[] = [];
-        if (compareStacks.length !== 0) {
-            parameterKeys = Object.keys(compareStacks[0].description.parameters);
-        }
-        compareStacks.forEach(temp => {
-            idList.push(temp.id);
-            sequenceIdList.push(temp.sequenceId);
-            durationList.push(temp.duration);
-            parameterList.push(temp.description.parameters);
-        });
-        let isComplexSearchSpace;
-        if (parameterList.length > 0) {
-            isComplexSearchSpace = typeof parameterList[0][parameterKeys[0]] === 'object' ? true : false;
-        }
-        return (
-            <table className='compare-modal-table'>
-                <tbody>
-                    <tr>
-                        <td className='column'>Id</td>
-                        {Object.keys(idList).map(key => {
-                            return (
-                                <td className='value idList' key={key}>
-                                    {idList[key]}
-                                </td>
-                            );
-                        })}
-                    </tr>
-                    <tr>
-                        <td className='column'>Trial No.</td>
-                        {Object.keys(sequenceIdList).map(key => {
-                            return (
-                                <td className='value idList' key={key}>
-                                    {sequenceIdList[key]}
-                                </td>
-                            );
-                        })}
-                    </tr>
-                    <tr>
-                        <td className='column'>Default metric</td>
-                        {Object.keys(compareStacks).map(index => {
-                            const temp = compareStacks[index];
-                            return (
-                                <td className='value' key={index}>
-                                    <IntermediateVal trialId={temp.id} />
-                                </td>
-                            );
-                        })}
-                    </tr>
-                    <tr>
-                        <td className='column'>duration</td>
-                        {Object.keys(durationList).map(index => {
-                            return (
-                                <td className='value' key={index}>
-                                    {durationList[index]}
-                                </td>
-                            );
-                        })}
-                    </tr>
-                    {isComplexSearchSpace
-                        ? null
-                        : Object.keys(parameterKeys).map(index => {
-                              return (
-                                  <tr key={index}>
-                                      <td className='column' key={index}>
-                                          {parameterKeys[index]}
-                                      </td>
-                                      {Object.keys(parameterList).map(key => {
-                                          return (
-                                              <td key={key} className='value'>
-                                                  {parameterList[key][parameterKeys[index]]}
-                                              </td>
-                                          );
-                                      })}
-                                  </tr>
-                              );
-                          })}
-                </tbody>
-            </table>
-        );
-    };
+		const parameterList: Array<object> = [];
+		let parameterKeys: string[] = [];
+		if (compareStacks.length !== 0) {
+			parameterKeys = Object.keys(compareStacks[0].description.parameters);
+		}
+		compareStacks.forEach(temp => {
+			idList.push(temp.id);
+			sequenceIdList.push(temp.sequenceId);
+			durationList.push(temp.duration);
+			parameterList.push(temp.description.parameters);
+		});
+		let isComplexSearchSpace;
+		if (parameterList.length > 0) {
+			isComplexSearchSpace = typeof parameterList[0][parameterKeys[0]] === 'object' ? true : false;
+		}
+		return (
+			<table className='compare-modal-table'>
+				<tbody>
+					<tr>
+						<td className='column'>Id</td>
+						{Object.keys(idList).map(key => {
+							return (
+								<td className='value idList' key={key}>
+									{idList[key]}
+								</td>
+							);
+						})}
+					</tr>
+					<tr>
+						<td className='column'>Trial No.</td>
+						{Object.keys(sequenceIdList).map(key => {
+							return (
+								<td className='value idList' key={key}>
+									{sequenceIdList[key]}
+								</td>
+							);
+						})}
+					</tr>
+					<tr>
+						<td className='column'>Default metric</td>
+						{Object.keys(compareStacks).map(index => {
+							const temp = compareStacks[index];
+							return (
+								<td className='value' key={index}>
+									<IntermediateVal trialId={temp.id} />
+								</td>
+							);
+						})}
+					</tr>
+					<tr>
+						<td className='column'>duration</td>
+						{Object.keys(durationList).map(index => {
+							return (
+								<td className='value' key={index}>
+									{durationList[index]}
+								</td>
+							);
+						})}
+					</tr>
+					{isComplexSearchSpace
+						? null
+						: Object.keys(parameterKeys).map(index => {
+								return (
+									<tr key={index}>
+										<td className='column' key={index}>
+											{parameterKeys[index]}
+										</td>
+										{Object.keys(parameterList).map(key => {
+											return (
+												<td key={key} className='value'>
+													{parameterList[key][parameterKeys[index]]}
+												</td>
+											);
+										})}
+									</tr>
+								);
+						  })}
+				</tbody>
+			</table>
+		);
+	};
 
-    componentDidMount(): void {
-        this._isCompareMount = true;
-    }
+	componentDidMount(): void {
+		this._isCompareMount = true;
+	}
 
-    componentWillUnmount(): void {
-        this._isCompareMount = false;
-    }
+	componentWillUnmount(): void {
+		this._isCompareMount = false;
+	}
 
-    render(): React.ReactNode {
-        const { cancelFunc } = this.props;
+	render(): React.ReactNode {
+		const { cancelFunc } = this.props;
 
-        return (
-            <Modal
-                isOpen={true}
-                containerClassName={contentStyles.container}
-                className='compare-modal'
-                allowTouchBodyScroll={true}
-                dragOptions={dragOptions}
-            >
-                <div>
-                    <div className={contentStyles.header}>
-                        <span>Compare trials</span>
-                        <IconButton
-                            styles={iconButtonStyles}
-                            iconProps={{ iconName: 'Cancel' }}
-                            ariaLabel='Close popup modal'
-                            onClick={cancelFunc}
-                        />
-                    </div>
-                    <Stack className='compare-modal-intermediate'>
-                        {this.intermediate()}
-                        <Stack className='compare-yAxis'># Intermediate result</Stack>
-                    </Stack>
-                    <Stack>{this.initColumn()}</Stack>
-                </div>
-            </Modal>
-        );
-    }
+		return (
+			<Modal
+				isOpen={true}
+				containerClassName={contentStyles.container}
+				className='compare-modal'
+				allowTouchBodyScroll={true}
+				dragOptions={dragOptions}
+			>
+				<div>
+					<div className={contentStyles.header}>
+						<span>Compare trials</span>
+						<IconButton
+							styles={iconButtonStyles}
+							iconProps={{ iconName: 'Cancel' }}
+							ariaLabel='Close popup modal'
+							onClick={cancelFunc}
+						/>
+					</div>
+					<Stack className='compare-modal-intermediate'>
+						{this.intermediate()}
+						<Stack className='compare-yAxis'># Intermediate result</Stack>
+					</Stack>
+					<Stack>{this.initColumn()}</Stack>
+				</div>
+			</Modal>
+		);
+	}
 }
 
 export default Compare;
diff --git a/src/webui/src/components/Modals/CustomizedTrial.tsx b/src/webui/src/components/Modals/CustomizedTrial.tsx
index 784ab2ce42..642d93c752 100644
--- a/src/webui/src/components/Modals/CustomizedTrial.tsx
+++ b/src/webui/src/components/Modals/CustomizedTrial.tsx
@@ -5,278 +5,278 @@ import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dia
 import { MANAGER_IP } from '../../static/const';
 import { EXPERIMENT, TRIALS } from '../../static/datamodel';
 import { warining, errorBadge, completed } from '../Buttons/Icon';
-import './customized.scss';
+import '../../static/style/customized.scss';
 
 interface CustomizeProps {
-    visible: boolean;
-    copyTrialId: string;
-    closeCustomizeModal: () => void;
+	visible: boolean;
+	copyTrialId: string;
+	closeCustomizeModal: () => void;
 }
 
 interface CustomizeState {
-    isShowSubmitSucceed: boolean;
-    isShowSubmitFailed: boolean;
-    isShowWarning: boolean;
-    searchSpace: object;
-    copyTrialParameter: object; // user click the trial's parameters
-    customParameters: object; // customized trial, maybe user change trial's parameters
-    customID: number; // submit customized trial succeed, return the new customized trial id
-    changeMap: Map<string, string | number>; // store change key: value
+	isShowSubmitSucceed: boolean;
+	isShowSubmitFailed: boolean;
+	isShowWarning: boolean;
+	searchSpace: object;
+	copyTrialParameter: object; // user click the trial's parameters
+	customParameters: object; // customized trial, maybe user change trial's parameters
+	customID: number; // submit customized trial succeed, return the new customized trial id
+	changeMap: Map<string, string | number>; // store change key: value
 }
 
 class Customize extends React.Component<CustomizeProps, CustomizeState> {
-    constructor(props: CustomizeProps) {
-        super(props);
-        this.state = {
-            isShowSubmitSucceed: false,
-            isShowSubmitFailed: false,
-            isShowWarning: false,
-            searchSpace: EXPERIMENT.searchSpace,
-            copyTrialParameter: {},
-            customParameters: {},
-            customID: NaN,
-            changeMap: new Map()
-        };
-    }
+	constructor(props: CustomizeProps) {
+		super(props);
+		this.state = {
+			isShowSubmitSucceed: false,
+			isShowSubmitFailed: false,
+			isShowWarning: false,
+			searchSpace: EXPERIMENT.searchSpace,
+			copyTrialParameter: {},
+			customParameters: {},
+			customID: NaN,
+			changeMap: new Map()
+		};
+	}
 
-    getFinalVal = (event: React.ChangeEvent<HTMLInputElement>): void => {
-        const { name, value } = event.target;
-        const { changeMap } = this.state;
-        this.setState({ changeMap: changeMap.set(name, value) });
-    };
+	getFinalVal = (event: React.ChangeEvent<HTMLInputElement>): void => {
+		const { name, value } = event.target;
+		const { changeMap } = this.state;
+		this.setState({ changeMap: changeMap.set(name, value) });
+	};
 
-    // [submit click] user add a new trial [submit a trial]
-    addNewTrial = (): void => {
-        const { searchSpace, copyTrialParameter, changeMap } = this.state;
-        // get user edited hyperParameter, ps: will change data type if you modify the input val
-        const customized = JSON.parse(JSON.stringify(copyTrialParameter));
-        // changeMap: user changed keys: values
-        changeMap.forEach(function(value, key) {
-            customized[key] = value;
-        });
+	// [submit click] user add a new trial [submit a trial]
+	addNewTrial = (): void => {
+		const { searchSpace, copyTrialParameter, changeMap } = this.state;
+		// get user edited hyperParameter, ps: will change data type if you modify the input val
+		const customized = JSON.parse(JSON.stringify(copyTrialParameter));
+		// changeMap: user changed keys: values
+		changeMap.forEach(function(value, key) {
+			customized[key] = value;
+		});
 
-        // true: parameters are wrong
-        let parametersIllegal = false;
-        Object.keys(customized).map(item => {
-            if (item !== 'tag') {
-                // unified data type
-                if (typeof copyTrialParameter[item] === 'number' && typeof customized[item] === 'string') {
-                    customized[item] = JSON.parse(customized[item]);
-                }
-                if (searchSpace[item] === undefined) {
-                    // sometimes the schema of trial parameters is different from search space
-                    // e.g. Batch Tuner
-                    return;
-                }
-                if (searchSpace[item]._type === 'choice') {
-                    if (
-                        searchSpace[item]._value.find((val: string | number) => val === customized[item]) === undefined
-                    ) {
-                        parametersIllegal = true;
-                        return;
-                    }
-                } else {
-                    if (
-                        customized[item] < searchSpace[item]._value[0] ||
-                        customized[item] > searchSpace[item]._value[1]
-                    ) {
-                        parametersIllegal = true;
-                        return;
-                    }
-                }
-            }
-        });
-        if (parametersIllegal !== false) {
-            // open the warning modal
-            this.setState(() => ({ isShowWarning: true, customParameters: customized }));
-        } else {
-            // submit a customized job
-            this.submitCustomize(customized);
-        }
-    };
+		// true: parameters are wrong
+		let parametersIllegal = false;
+		Object.keys(customized).map(item => {
+			if (item !== 'tag') {
+				// unified data type
+				if (typeof copyTrialParameter[item] === 'number' && typeof customized[item] === 'string') {
+					customized[item] = JSON.parse(customized[item]);
+				}
+				if (searchSpace[item] === undefined) {
+					// sometimes the schema of trial parameters is different from search space
+					// e.g. Batch Tuner
+					return;
+				}
+				if (searchSpace[item]._type === 'choice') {
+					if (
+						searchSpace[item]._value.find((val: string | number) => val === customized[item]) === undefined
+					) {
+						parametersIllegal = true;
+						return;
+					}
+				} else {
+					if (
+						customized[item] < searchSpace[item]._value[0] ||
+						customized[item] > searchSpace[item]._value[1]
+					) {
+						parametersIllegal = true;
+						return;
+					}
+				}
+			}
+		});
+		if (parametersIllegal !== false) {
+			// open the warning modal
+			this.setState(() => ({ isShowWarning: true, customParameters: customized }));
+		} else {
+			// submit a customized job
+			this.submitCustomize(customized);
+		}
+	};
 
-    warningConfirm = (): void => {
-        this.setState(() => ({ isShowWarning: false }));
-        const { customParameters } = this.state;
-        this.submitCustomize(customParameters);
-    };
+	warningConfirm = (): void => {
+		this.setState(() => ({ isShowWarning: false }));
+		const { customParameters } = this.state;
+		this.submitCustomize(customParameters);
+	};
 
-    warningCancel = (): void => {
-        this.setState(() => ({ isShowWarning: false }));
-    };
+	warningCancel = (): void => {
+		this.setState(() => ({ isShowWarning: false }));
+	};
 
-    submitCustomize = (customized: Record<string, any>): void => {
-        // delete `tag` key
-        for (const i in customized) {
-            if (i === 'tag') {
-                delete customized[i];
-            }
-        }
-        axios(`${MANAGER_IP}/trial-jobs`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            data: customized
-        })
-            .then(res => {
-                if (res.status === 200) {
-                    this.setState(() => ({ isShowSubmitSucceed: true, customID: res.data.sequenceId }));
-                    this.props.closeCustomizeModal();
-                } else {
-                    this.setState(() => ({ isShowSubmitFailed: true }));
-                }
-            })
-            .catch(() => {
-                this.setState(() => ({ isShowSubmitFailed: true }));
-            });
-    };
+	submitCustomize = (customized: Record<string, any>): void => {
+		// delete `tag` key
+		for (const i in customized) {
+			if (i === 'tag') {
+				delete customized[i];
+			}
+		}
+		axios(`${MANAGER_IP}/trial-jobs`, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			data: customized
+		})
+			.then(res => {
+				if (res.status === 200) {
+					this.setState(() => ({ isShowSubmitSucceed: true, customID: res.data.sequenceId }));
+					this.props.closeCustomizeModal();
+				} else {
+					this.setState(() => ({ isShowSubmitFailed: true }));
+				}
+			})
+			.catch(() => {
+				this.setState(() => ({ isShowSubmitFailed: true }));
+			});
+	};
 
-    closeSucceedHint = (): void => {
-        // also close customized trial modal
-        this.setState(() => ({ isShowSubmitSucceed: false, changeMap: new Map() }));
-        this.props.closeCustomizeModal();
-    };
+	closeSucceedHint = (): void => {
+		// also close customized trial modal
+		this.setState(() => ({ isShowSubmitSucceed: false, changeMap: new Map() }));
+		this.props.closeCustomizeModal();
+	};
 
-    closeFailedHint = (): void => {
-        // also close customized trial modal
-        this.setState(() => ({ isShowSubmitFailed: false, changeMap: new Map() }));
-        this.props.closeCustomizeModal();
-    };
+	closeFailedHint = (): void => {
+		// also close customized trial modal
+		this.setState(() => ({ isShowSubmitFailed: false, changeMap: new Map() }));
+		this.props.closeCustomizeModal();
+	};
 
-    componentDidMount(): void {
-        const { copyTrialId } = this.props;
-        if (copyTrialId !== undefined && TRIALS.getTrial(copyTrialId) !== undefined) {
-            const originCopyTrialPara = TRIALS.getTrial(copyTrialId).description.parameters;
-            this.setState(() => ({ copyTrialParameter: originCopyTrialPara }));
-        }
-    }
+	componentDidMount(): void {
+		const { copyTrialId } = this.props;
+		if (copyTrialId !== undefined && TRIALS.getTrial(copyTrialId) !== undefined) {
+			const originCopyTrialPara = TRIALS.getTrial(copyTrialId).description.parameters;
+			this.setState(() => ({ copyTrialParameter: originCopyTrialPara }));
+		}
+	}
 
-    componentDidUpdate(prevProps: CustomizeProps): void {
-        if (this.props.copyTrialId !== prevProps.copyTrialId) {
-            const { copyTrialId } = this.props;
-            if (copyTrialId !== undefined && TRIALS.getTrial(copyTrialId) !== undefined) {
-                const originCopyTrialPara = TRIALS.getTrial(copyTrialId).description.parameters;
-                this.setState(() => ({ copyTrialParameter: originCopyTrialPara }));
-            }
-        }
-    }
+	componentDidUpdate(prevProps: CustomizeProps): void {
+		if (this.props.copyTrialId !== prevProps.copyTrialId) {
+			const { copyTrialId } = this.props;
+			if (copyTrialId !== undefined && TRIALS.getTrial(copyTrialId) !== undefined) {
+				const originCopyTrialPara = TRIALS.getTrial(copyTrialId).description.parameters;
+				this.setState(() => ({ copyTrialParameter: originCopyTrialPara }));
+			}
+		}
+	}
 
-    render(): React.ReactNode {
-        const { closeCustomizeModal, visible } = this.props;
-        const { isShowSubmitSucceed, isShowSubmitFailed, isShowWarning, customID, copyTrialParameter } = this.state;
-        const warning =
-            'The parameters you set are not in our search space, this may cause the tuner to crash, Are' +
-            ' you sure you want to continue submitting?';
-        return (
-            <Stack>
-                <Dialog
-                    hidden={!visible} // required field!
-                    dialogContentProps={{
-                        type: DialogType.largeHeader,
-                        title: 'Customized trial setting',
-                        subText: 'You can submit a customized trial.'
-                    }}
-                    modalProps={{
-                        isBlocking: false,
-                        styles: { main: { maxWidth: 450 } }
-                    }}
-                >
-                    <form className='hyper-box'>
-                        {Object.keys(copyTrialParameter).map(item => (
-                            <Stack horizontal key={item} className='hyper-form'>
-                                <StackItem styles={{ root: { minWidth: 100 } }} className='title'>
-                                    {item}
-                                </StackItem>
-                                <StackItem className='inputs'>
-                                    <input
-                                        type='text'
-                                        name={item}
-                                        defaultValue={copyTrialParameter[item]}
-                                        onChange={this.getFinalVal}
-                                    />
-                                </StackItem>
-                            </Stack>
-                        ))}
-                        {/* disable [tag] because we havn't support */}
-                        {/* <Stack key="tag" horizontal className="hyper-form tag-input">
+	render(): React.ReactNode {
+		const { closeCustomizeModal, visible } = this.props;
+		const { isShowSubmitSucceed, isShowSubmitFailed, isShowWarning, customID, copyTrialParameter } = this.state;
+		const warning =
+			'The parameters you set are not in our search space, this may cause the tuner to crash, Are' +
+			' you sure you want to continue submitting?';
+		return (
+			<Stack>
+				<Dialog
+					hidden={!visible} // required field!
+					dialogContentProps={{
+						type: DialogType.largeHeader,
+						title: 'Customized trial setting',
+						subText: 'You can submit a customized trial.'
+					}}
+					modalProps={{
+						isBlocking: false,
+						styles: { main: { maxWidth: 450 } }
+					}}
+				>
+					<form className='hyper-box'>
+						{Object.keys(copyTrialParameter).map(item => (
+							<Stack horizontal key={item} className='hyper-form'>
+								<StackItem styles={{ root: { minWidth: 100 } }} className='title'>
+									{item}
+								</StackItem>
+								<StackItem className='inputs'>
+									<input
+										type='text'
+										name={item}
+										defaultValue={copyTrialParameter[item]}
+										onChange={this.getFinalVal}
+									/>
+								</StackItem>
+							</Stack>
+						))}
+						{/* disable [tag] because we havn't support */}
+						{/* <Stack key="tag" horizontal className="hyper-form tag-input">
                             <StackItem grow={9} className="title">Tag</StackItem>
                             <StackItem grow={15} className="inputs">
                                 <input type="text" value='Customized' />
                             </StackItem>
                         </Stack> */}
-                    </form>
-                    <DialogFooter>
-                        <PrimaryButton text='Submit' onClick={this.addNewTrial} />
-                        <DefaultButton text='Cancel' onClick={closeCustomizeModal} />
-                    </DialogFooter>
-                </Dialog>
+					</form>
+					<DialogFooter>
+						<PrimaryButton text='Submit' onClick={this.addNewTrial} />
+						<DefaultButton text='Cancel' onClick={closeCustomizeModal} />
+					</DialogFooter>
+				</Dialog>
 
-                {/* clone: prompt succeed or failed */}
-                <Dialog
-                    hidden={!isShowSubmitSucceed}
-                    onDismiss={this.closeSucceedHint}
-                    dialogContentProps={{
-                        type: DialogType.normal,
-                        title: (
-                            <div className='icon-color'>
-                                {completed}
-                                <b>Submit successfully</b>
-                            </div>
-                        ),
-                        closeButtonAriaLabel: 'Close',
-                        subText: `You can find your customized trial by Trial No.${customID}`
-                    }}
-                    modalProps={{
-                        isBlocking: false,
-                        styles: { main: { minWidth: 500 } }
-                    }}
-                >
-                    <DialogFooter>
-                        <PrimaryButton onClick={this.closeSucceedHint} text='OK' />
-                    </DialogFooter>
-                </Dialog>
+				{/* clone: prompt succeed or failed */}
+				<Dialog
+					hidden={!isShowSubmitSucceed}
+					onDismiss={this.closeSucceedHint}
+					dialogContentProps={{
+						type: DialogType.normal,
+						title: (
+							<div className='icon-color'>
+								{completed}
+								<b>Submit successfully</b>
+							</div>
+						),
+						closeButtonAriaLabel: 'Close',
+						subText: `You can find your customized trial by Trial No.${customID}`
+					}}
+					modalProps={{
+						isBlocking: false,
+						styles: { main: { minWidth: 500 } }
+					}}
+				>
+					<DialogFooter>
+						<PrimaryButton onClick={this.closeSucceedHint} text='OK' />
+					</DialogFooter>
+				</Dialog>
 
-                <Dialog
-                    hidden={!isShowSubmitFailed}
-                    onDismiss={this.closeSucceedHint}
-                    dialogContentProps={{
-                        type: DialogType.normal,
-                        title: <div className='icon-error'>{errorBadge}Submit Failed</div>,
-                        closeButtonAriaLabel: 'Close',
-                        subText: 'Unknown error.'
-                    }}
-                    modalProps={{
-                        isBlocking: false,
-                        styles: { main: { minWidth: 500 } }
-                    }}
-                >
-                    <DialogFooter>
-                        <PrimaryButton onClick={this.closeFailedHint} text='OK' />
-                    </DialogFooter>
-                </Dialog>
+				<Dialog
+					hidden={!isShowSubmitFailed}
+					onDismiss={this.closeSucceedHint}
+					dialogContentProps={{
+						type: DialogType.normal,
+						title: <div className='icon-error'>{errorBadge}Submit Failed</div>,
+						closeButtonAriaLabel: 'Close',
+						subText: 'Unknown error.'
+					}}
+					modalProps={{
+						isBlocking: false,
+						styles: { main: { minWidth: 500 } }
+					}}
+				>
+					<DialogFooter>
+						<PrimaryButton onClick={this.closeFailedHint} text='OK' />
+					</DialogFooter>
+				</Dialog>
 
-                {/* hyperParameter not match search space, warning modal */}
-                <Dialog
-                    hidden={!isShowWarning}
-                    onDismiss={this.closeSucceedHint}
-                    dialogContentProps={{
-                        type: DialogType.normal,
-                        title: <div className='icon-error'>{warining}Warning</div>,
-                        closeButtonAriaLabel: 'Close',
-                        subText: `${warning}`
-                    }}
-                    modalProps={{
-                        isBlocking: false,
-                        styles: { main: { minWidth: 500 } }
-                    }}
-                >
-                    <DialogFooter>
-                        <PrimaryButton onClick={this.warningConfirm} text='Confirm' />
-                        <DefaultButton onClick={this.warningCancel} text='Cancel' />
-                    </DialogFooter>
-                </Dialog>
-            </Stack>
-        );
-    }
+				{/* hyperParameter not match search space, warning modal */}
+				<Dialog
+					hidden={!isShowWarning}
+					onDismiss={this.closeSucceedHint}
+					dialogContentProps={{
+						type: DialogType.normal,
+						title: <div className='icon-error'>{warining}Warning</div>,
+						closeButtonAriaLabel: 'Close',
+						subText: `${warning}`
+					}}
+					modalProps={{
+						isBlocking: false,
+						styles: { main: { minWidth: 500 } }
+					}}
+				>
+					<DialogFooter>
+						<PrimaryButton onClick={this.warningConfirm} text='Confirm' />
+						<DefaultButton onClick={this.warningCancel} text='Cancel' />
+					</DialogFooter>
+				</Dialog>
+			</Stack>
+		);
+	}
 }
 
 export default Customize;
diff --git a/src/webui/src/components/Modals/ExperimentPanel.tsx b/src/webui/src/components/Modals/ExperimentPanel.tsx
index 9367097c06..865b14242a 100644
--- a/src/webui/src/components/Modals/ExperimentPanel.tsx
+++ b/src/webui/src/components/Modals/ExperimentPanel.tsx
@@ -7,122 +7,122 @@ import MonacoEditor from 'react-monaco-editor';
 import '../../static/style/logDrawer.scss';
 
 interface ExpDrawerProps {
-    closeExpDrawer: () => void;
-    experimentProfile: object;
+	closeExpDrawer: () => void;
+	experimentProfile: object;
 }
 
 interface ExpDrawerState {
-    experiment: string;
-    expDrawerHeight: number;
+	experiment: string;
+	expDrawerHeight: number;
 }
 
 class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
-    public _isExperimentMount!: boolean;
-    private refreshId!: number | undefined;
+	public _isExperimentMount!: boolean;
+	private refreshId!: number | undefined;
 
-    constructor(props: ExpDrawerProps) {
-        super(props);
+	constructor(props: ExpDrawerProps) {
+		super(props);
 
-        this.state = {
-            experiment: '',
-            expDrawerHeight: window.innerHeight
-        };
-    }
+		this.state = {
+			experiment: '',
+			expDrawerHeight: window.innerHeight
+		};
+	}
 
-    getExperimentContent = (): void => {
-        const experimentData = JSON.parse(JSON.stringify(this.props.experimentProfile));
-        if (experimentData.params.searchSpace) {
-            experimentData.params.searchSpace = JSON.parse(experimentData.params.searchSpace);
-        }
-        const trialMessagesArr = TRIALS.getTrialJobList();
-        const interResultList = TRIALS.getMetricsList();
-        Object.keys(trialMessagesArr).map(item => {
-            // not deal with trial's hyperParameters
-            const trialId = trialMessagesArr[item].jobId;
-            // add intermediate result message
-            trialMessagesArr[item].intermediate = [];
-            Object.keys(interResultList).map(key => {
-                const interId = interResultList[key].trialJobId;
-                if (trialId === interId) {
-                    trialMessagesArr[item].intermediate.push(interResultList[key]);
-                }
-            });
-        });
-        const result = {
-            experimentParameters: experimentData,
-            trialMessage: trialMessagesArr
-        };
-        if (this._isExperimentMount === true) {
-            this.setState({ experiment: JSON.stringify(result, null, 4) });
-        }
+	getExperimentContent = (): void => {
+		const experimentData = JSON.parse(JSON.stringify(this.props.experimentProfile));
+		if (experimentData.params.searchSpace) {
+			experimentData.params.searchSpace = JSON.parse(experimentData.params.searchSpace);
+		}
+		const trialMessagesArr = TRIALS.getTrialJobList();
+		const interResultList = TRIALS.getMetricsList();
+		Object.keys(trialMessagesArr).map(item => {
+			// not deal with trial's hyperParameters
+			const trialId = trialMessagesArr[item].jobId;
+			// add intermediate result message
+			trialMessagesArr[item].intermediate = [];
+			Object.keys(interResultList).map(key => {
+				const interId = interResultList[key].trialJobId;
+				if (trialId === interId) {
+					trialMessagesArr[item].intermediate.push(interResultList[key]);
+				}
+			});
+		});
+		const result = {
+			experimentParameters: experimentData,
+			trialMessage: trialMessagesArr
+		};
+		if (this._isExperimentMount === true) {
+			this.setState({ experiment: JSON.stringify(result, null, 4) });
+		}
 
-        if (['DONE', 'ERROR', 'STOPPED'].includes(EXPERIMENT.status)) {
-            if (this.refreshId !== null || this.refreshId !== undefined) {
-                window.clearInterval(this.refreshId);
-            }
-        }
-    };
+		if (['DONE', 'ERROR', 'STOPPED'].includes(EXPERIMENT.status)) {
+			if (this.refreshId !== null || this.refreshId !== undefined) {
+				window.clearInterval(this.refreshId);
+			}
+		}
+	};
 
-    downExperimentParameters = (): void => {
-        const { experiment } = this.state;
-        downFile(experiment, 'experiment.json');
-    };
+	downExperimentParameters = (): void => {
+		const { experiment } = this.state;
+		downFile(experiment, 'experiment.json');
+	};
 
-    onWindowResize = (): void => {
-        this.setState(() => ({ expDrawerHeight: window.innerHeight }));
-    };
+	onWindowResize = (): void => {
+		this.setState(() => ({ expDrawerHeight: window.innerHeight }));
+	};
 
-    componentDidMount(): void {
-        this._isExperimentMount = true;
-        this.getExperimentContent();
-        this.refreshId = window.setInterval(this.getExperimentContent, 10000);
-        window.addEventListener('resize', this.onWindowResize);
-    }
+	componentDidMount(): void {
+		this._isExperimentMount = true;
+		this.getExperimentContent();
+		this.refreshId = window.setInterval(this.getExperimentContent, 10000);
+		window.addEventListener('resize', this.onWindowResize);
+	}
 
-    componentWillUnmount(): void {
-        this._isExperimentMount = false;
-        window.clearTimeout(this.refreshId);
-        window.removeEventListener('resize', this.onWindowResize);
-    }
+	componentWillUnmount(): void {
+		this._isExperimentMount = false;
+		window.clearTimeout(this.refreshId);
+		window.removeEventListener('resize', this.onWindowResize);
+	}
 
-    render(): React.ReactNode {
-        const { closeExpDrawer } = this.props;
-        const { experiment, expDrawerHeight } = this.state;
-        return (
-            <Stack className='logDrawer'>
-                <Panel
-                    isOpen={true}
-                    hasCloseButton={false}
-                    isLightDismiss={true}
-                    onLightDismissClick={closeExpDrawer}
-                    styles={{ root: { height: expDrawerHeight, paddingTop: 15 } }}
-                >
-                    <Pivot style={{ minHeight: 190 }} className='log-tab-body'>
-                        <PivotItem headerText='Experiment parameters'>
-                            <div className='just-for-log'>
-                                <MonacoEditor
-                                    width='100%'
-                                    // 92 + marginTop[16]
-                                    height={expDrawerHeight - 108}
-                                    language='json'
-                                    value={experiment}
-                                    options={DRAWEROPTION}
-                                />
-                            </div>
-                            <Stack horizontal className='buttons'>
-                                <StackItem grow={50} className='download'>
-                                    <PrimaryButton text='Download' onClick={this.downExperimentParameters} />
-                                </StackItem>
-                                <StackItem grow={50} className='close'>
-                                    <DefaultButton text='Close' onClick={closeExpDrawer} />
-                                </StackItem>
-                            </Stack>
-                        </PivotItem>
-                    </Pivot>
-                </Panel>
-            </Stack>
-        );
-    }
+	render(): React.ReactNode {
+		const { closeExpDrawer } = this.props;
+		const { experiment, expDrawerHeight } = this.state;
+		return (
+			<Stack className='logDrawer'>
+				<Panel
+					isOpen={true}
+					hasCloseButton={false}
+					isLightDismiss={true}
+					onLightDismissClick={closeExpDrawer}
+					styles={{ root: { height: expDrawerHeight, paddingTop: 15 } }}
+				>
+					<Pivot style={{ minHeight: 190 }} className='log-tab-body'>
+						<PivotItem headerText='Experiment parameters'>
+							<div className='just-for-log'>
+								<MonacoEditor
+									width='100%'
+									// 92 + marginTop[16]
+									height={expDrawerHeight - 108}
+									language='json'
+									value={experiment}
+									options={DRAWEROPTION}
+								/>
+							</div>
+							<Stack horizontal className='buttons'>
+								<StackItem grow={50} className='download'>
+									<PrimaryButton text='Download' onClick={this.downExperimentParameters} />
+								</StackItem>
+								<StackItem grow={50} className='close'>
+									<DefaultButton text='Close' onClick={closeExpDrawer} />
+								</StackItem>
+							</Stack>
+						</PivotItem>
+					</Pivot>
+				</Panel>
+			</Stack>
+		);
+	}
 }
 
 export default ExperimentDrawer;
diff --git a/src/webui/src/components/Modals/Killjob.tsx b/src/webui/src/components/Modals/Killjob.tsx
index aeae4391bc..24c55a3a02 100644
--- a/src/webui/src/components/Modals/Killjob.tsx
+++ b/src/webui/src/components/Modals/Killjob.tsx
@@ -1,136 +1,136 @@
 import * as React from 'react';
 import {
-    Stack,
-    FocusTrapCallout,
-    DefaultButton,
-    FocusZone,
-    PrimaryButton,
-    getTheme,
-    mergeStyleSets,
-    FontWeights
+	Stack,
+	FocusTrapCallout,
+	DefaultButton,
+	FocusZone,
+	PrimaryButton,
+	getTheme,
+	mergeStyleSets,
+	FontWeights
 } from 'office-ui-fabric-react';
 import { killJob } from '../../static/function';
 import { blocked } from '../Buttons/Icon';
 
 const theme = getTheme();
 const styles = mergeStyleSets({
-    buttonArea: {
-        verticalAlign: 'top',
-        display: 'inline-block',
-        textAlign: 'center',
-        height: 32
-    },
-    callout: {
-        maxWidth: 300
-    },
-    header: {
-        padding: '18px 24px 12px'
-    },
-    title: [
-        theme.fonts.xLarge,
-        {
-            margin: 0,
-            color: theme.palette.neutralPrimary,
-            fontWeight: FontWeights.semilight
-        }
-    ],
-    inner: {
-        height: '100%',
-        padding: '0 24px 20px'
-    },
-    actions: {
-        position: 'relative',
-        marginTop: 20,
-        width: '100%',
-        whiteSpace: 'nowrap'
-    },
-    buttons: {
-        display: 'flex',
-        justifyContent: 'flex-end',
-        padding: '0 24px 24px'
-    },
-    subtext: [
-        theme.fonts.small,
-        {
-            margin: 0,
-            color: theme.palette.neutralPrimary,
-            fontWeight: FontWeights.semilight
-        }
-    ]
+	buttonArea: {
+		verticalAlign: 'top',
+		display: 'inline-block',
+		textAlign: 'center',
+		height: 32
+	},
+	callout: {
+		maxWidth: 300
+	},
+	header: {
+		padding: '18px 24px 12px'
+	},
+	title: [
+		theme.fonts.xLarge,
+		{
+			margin: 0,
+			color: theme.palette.neutralPrimary,
+			fontWeight: FontWeights.semilight
+		}
+	],
+	inner: {
+		height: '100%',
+		padding: '0 24px 20px'
+	},
+	actions: {
+		position: 'relative',
+		marginTop: 20,
+		width: '100%',
+		whiteSpace: 'nowrap'
+	},
+	buttons: {
+		display: 'flex',
+		justifyContent: 'flex-end',
+		padding: '0 24px 24px'
+	},
+	subtext: [
+		theme.fonts.small,
+		{
+			margin: 0,
+			color: theme.palette.neutralPrimary,
+			fontWeight: FontWeights.semilight
+		}
+	]
 });
 
 interface KillJobState {
-    isCalloutVisible: boolean;
+	isCalloutVisible: boolean;
 }
 
 interface KillJobProps {
-    trial: any;
+	trial: any;
 }
 
 class KillJob extends React.Component<KillJobProps, KillJobState> {
-    private menuButtonElement!: HTMLElement | null;
-    constructor(props: KillJobProps) {
-        super(props);
-        this.state = { isCalloutVisible: false };
-    }
+	private menuButtonElement!: HTMLElement | null;
+	constructor(props: KillJobProps) {
+		super(props);
+		this.state = { isCalloutVisible: false };
+	}
 
-    onDismiss = (): void => {
-        this.setState(() => ({ isCalloutVisible: false }));
-    };
+	onDismiss = (): void => {
+		this.setState(() => ({ isCalloutVisible: false }));
+	};
 
-    onKill = (): void => {
-        this.setState({ isCalloutVisible: false }, () => {
-            const { trial } = this.props;
-            killJob(trial.key, trial.id, trial.status);
-        });
-    };
+	onKill = (): void => {
+		this.setState({ isCalloutVisible: false }, () => {
+			const { trial } = this.props;
+			killJob(trial.key, trial.id, trial.status);
+		});
+	};
 
-    openPromot = (event: React.SyntheticEvent<EventTarget>): void => {
-        event.preventDefault();
-        event.stopPropagation();
-        this.setState({ isCalloutVisible: true });
-    };
+	openPromot = (event: React.SyntheticEvent<EventTarget>): void => {
+		event.preventDefault();
+		event.stopPropagation();
+		this.setState({ isCalloutVisible: true });
+	};
 
-    render(): React.ReactNode {
-        const { isCalloutVisible } = this.state;
-        const prompString = 'Are you sure to cancel this trial?';
-        return (
-            <div>
-                <div className={styles.buttonArea} ref={(menuButton): any => (this.menuButtonElement = menuButton)}>
-                    <PrimaryButton className='detail-button-operation' onClick={this.openPromot} title='kill'>
-                        {blocked}
-                    </PrimaryButton>
-                </div>
-                {isCalloutVisible ? (
-                    <div>
-                        <FocusTrapCallout
-                            role='alertdialog'
-                            className={styles.callout}
-                            gapSpace={0}
-                            target={this.menuButtonElement}
-                            onDismiss={this.onDismiss}
-                            setInitialFocus={true}
-                        >
-                            <div className={styles.header}>
-                                <p className={styles.title}>Kill trial</p>
-                            </div>
-                            <div className={styles.inner}>
-                                <div>
-                                    <p className={styles.subtext}>{prompString}</p>
-                                </div>
-                            </div>
-                            <FocusZone>
-                                <Stack className={styles.buttons} gap={8} horizontal>
-                                    <DefaultButton onClick={this.onDismiss}>No</DefaultButton>
-                                    <PrimaryButton onClick={this.onKill}>Yes</PrimaryButton>
-                                </Stack>
-                            </FocusZone>
-                        </FocusTrapCallout>
-                    </div>
-                ) : null}
-            </div>
-        );
-    }
+	render(): React.ReactNode {
+		const { isCalloutVisible } = this.state;
+		const prompString = 'Are you sure to cancel this trial?';
+		return (
+			<div>
+				<div className={styles.buttonArea} ref={(menuButton): any => (this.menuButtonElement = menuButton)}>
+					<PrimaryButton className='detail-button-operation' onClick={this.openPromot} title='kill'>
+						{blocked}
+					</PrimaryButton>
+				</div>
+				{isCalloutVisible ? (
+					<div>
+						<FocusTrapCallout
+							role='alertdialog'
+							className={styles.callout}
+							gapSpace={0}
+							target={this.menuButtonElement}
+							onDismiss={this.onDismiss}
+							setInitialFocus={true}
+						>
+							<div className={styles.header}>
+								<p className={styles.title}>Kill trial</p>
+							</div>
+							<div className={styles.inner}>
+								<div>
+									<p className={styles.subtext}>{prompString}</p>
+								</div>
+							</div>
+							<FocusZone>
+								<Stack className={styles.buttons} gap={8} horizontal>
+									<DefaultButton onClick={this.onDismiss}>No</DefaultButton>
+									<PrimaryButton onClick={this.onKill}>Yes</PrimaryButton>
+								</Stack>
+							</FocusZone>
+						</FocusTrapCallout>
+					</div>
+				) : null}
+			</div>
+		);
+	}
 }
 
 export default KillJob;
diff --git a/src/webui/src/components/Modals/LogPanel.tsx b/src/webui/src/components/Modals/LogPanel.tsx
index ef7a717fe5..2e0ebd2cfb 100644
--- a/src/webui/src/components/Modals/LogPanel.tsx
+++ b/src/webui/src/components/Modals/LogPanel.tsx
@@ -8,158 +8,158 @@ import MonacoHTML from '../public-child/MonacoEditor';
 import '../../static/style/logDrawer.scss';
 
 interface LogDrawerProps {
-    closeDrawer: () => void;
-    activeTab?: string;
+	closeDrawer: () => void;
+	activeTab?: string;
 }
 
 interface LogDrawerState {
-    nniManagerLogStr: string | null;
-    dispatcherLogStr: string | null;
-    isLoading: boolean;
-    logDrawerHeight: number;
+	nniManagerLogStr: string | null;
+	dispatcherLogStr: string | null;
+	isLoading: boolean;
+	logDrawerHeight: number;
 }
 
 class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
-    private timerId: number | undefined;
-
-    constructor(props: LogDrawerProps) {
-        super(props);
-
-        this.state = {
-            nniManagerLogStr: null,
-            dispatcherLogStr: null,
-            isLoading: true,
-            logDrawerHeight: window.innerHeight - 48
-        };
-    }
-
-    downloadNNImanager = (): void => {
-        if (this.state.nniManagerLogStr !== null) {
-            downFile(this.state.nniManagerLogStr, 'nnimanager.log');
-        }
-    };
-
-    downloadDispatcher = (): void => {
-        if (this.state.dispatcherLogStr !== null) {
-            downFile(this.state.dispatcherLogStr, 'dispatcher.log');
-        }
-    };
-
-    dispatcherHTML = (): React.ReactNode => {
-        return (
-            <div>
-                <span>Dispatcher log</span>
-                <span className='refresh' onClick={this.manualRefresh}>
-                    {infoIcon}
-                </span>
-            </div>
-        );
-    };
-
-    nnimanagerHTML = (): React.ReactNode => {
-        return (
-            <div>
-                <span>NNImanager log</span>
-                <span className='refresh' onClick={this.manualRefresh}>
-                    {infoIcon}
-                </span>
-            </div>
-        );
-    };
-
-    setLogDrawerHeight = (): void => {
-        this.setState(() => ({ logDrawerHeight: window.innerHeight - 48 }));
-    };
-
-    async componentDidMount(): Promise<void> {
-        this.refresh();
-        window.addEventListener('resize', this.setLogDrawerHeight);
-    }
-
-    componentWillUnmount(): void {
-        window.clearTimeout(this.timerId);
-        window.removeEventListener('resize', this.setLogDrawerHeight);
-    }
-
-    render(): React.ReactNode {
-        const { closeDrawer, activeTab } = this.props;
-        const { nniManagerLogStr, dispatcherLogStr, isLoading, logDrawerHeight } = this.state;
-
-        return (
-            <Stack>
-                <Panel
-                    isOpen={true}
-                    hasCloseButton={false}
-                    isFooterAtBottom={true}
-                    isLightDismiss={true}
-                    onLightDismissClick={closeDrawer}
-                >
-                    <div className='log-tab-body'>
-                        <Pivot selectedKey={activeTab} style={{ minHeight: 190, paddingTop: '16px' }}>
-                            {/* <PivotItem headerText={this.dispatcherHTML()} key="dispatcher" onLinkClick> */}
-                            <PivotItem headerText='Dispatcher log' key='dispatcher'>
-                                <MonacoHTML
-                                    content={dispatcherLogStr || 'Loading...'}
-                                    loading={isLoading}
-                                    // paddingTop[16] + tab[44] + button[32]
-                                    height={logDrawerHeight - 92}
-                                />
-                                <Stack horizontal className='buttons'>
-                                    <StackItem grow={12} className='download'>
-                                        <PrimaryButton text='Download' onClick={this.downloadDispatcher} />
-                                    </StackItem>
-                                    <StackItem grow={12} className='close'>
-                                        <DefaultButton text='Close' onClick={closeDrawer} />
-                                    </StackItem>
-                                </Stack>
-                            </PivotItem>
-                            <PivotItem headerText='NNIManager log' key='nnimanager'>
-                                {/* <TabPane tab="NNImanager Log" key="nnimanager"> */}
-                                <MonacoHTML
-                                    content={nniManagerLogStr || 'Loading...'}
-                                    loading={isLoading}
-                                    height={logDrawerHeight - 92}
-                                />
-                                <Stack horizontal className='buttons'>
-                                    <StackItem grow={12} className='download'>
-                                        <PrimaryButton text='Download' onClick={this.downloadNNImanager} />
-                                    </StackItem>
-                                    <StackItem grow={12} className='close'>
-                                        <DefaultButton text='Close' onClick={closeDrawer} />
-                                    </StackItem>
-                                </Stack>
-                            </PivotItem>
-                        </Pivot>
-                    </div>
-                </Panel>
-            </Stack>
-        );
-    }
-
-    private refresh = (): void => {
-        window.clearTimeout(this.timerId);
-        const dispatcherPromise = axios.get(`${DOWNLOAD_IP}/dispatcher.log`);
-        const nniManagerPromise = axios.get(`${DOWNLOAD_IP}/nnimanager.log`);
-        dispatcherPromise.then(res => {
-            if (res.status === 200) {
-                this.setState({ dispatcherLogStr: res.data });
-            }
-        });
-        nniManagerPromise.then(res => {
-            if (res.status === 200) {
-                this.setState({ nniManagerLogStr: res.data });
-            }
-        });
-        Promise.all([dispatcherPromise, nniManagerPromise]).then(() => {
-            this.setState({ isLoading: false });
-            this.timerId = window.setTimeout(this.refresh, 10000);
-        });
-    };
-
-    private manualRefresh = (): void => {
-        this.setState({ isLoading: true });
-        this.refresh();
-    };
+	private timerId: number | undefined;
+
+	constructor(props: LogDrawerProps) {
+		super(props);
+
+		this.state = {
+			nniManagerLogStr: null,
+			dispatcherLogStr: null,
+			isLoading: true,
+			logDrawerHeight: window.innerHeight - 48
+		};
+	}
+
+	downloadNNImanager = (): void => {
+		if (this.state.nniManagerLogStr !== null) {
+			downFile(this.state.nniManagerLogStr, 'nnimanager.log');
+		}
+	};
+
+	downloadDispatcher = (): void => {
+		if (this.state.dispatcherLogStr !== null) {
+			downFile(this.state.dispatcherLogStr, 'dispatcher.log');
+		}
+	};
+
+	dispatcherHTML = (): React.ReactNode => {
+		return (
+			<div>
+				<span>Dispatcher log</span>
+				<span className='refresh' onClick={this.manualRefresh}>
+					{infoIcon}
+				</span>
+			</div>
+		);
+	};
+
+	nnimanagerHTML = (): React.ReactNode => {
+		return (
+			<div>
+				<span>NNImanager log</span>
+				<span className='refresh' onClick={this.manualRefresh}>
+					{infoIcon}
+				</span>
+			</div>
+		);
+	};
+
+	setLogDrawerHeight = (): void => {
+		this.setState(() => ({ logDrawerHeight: window.innerHeight - 48 }));
+	};
+
+	async componentDidMount(): Promise<void> {
+		this.refresh();
+		window.addEventListener('resize', this.setLogDrawerHeight);
+	}
+
+	componentWillUnmount(): void {
+		window.clearTimeout(this.timerId);
+		window.removeEventListener('resize', this.setLogDrawerHeight);
+	}
+
+	render(): React.ReactNode {
+		const { closeDrawer, activeTab } = this.props;
+		const { nniManagerLogStr, dispatcherLogStr, isLoading, logDrawerHeight } = this.state;
+
+		return (
+			<Stack>
+				<Panel
+					isOpen={true}
+					hasCloseButton={false}
+					isFooterAtBottom={true}
+					isLightDismiss={true}
+					onLightDismissClick={closeDrawer}
+				>
+					<div className='log-tab-body'>
+						<Pivot selectedKey={activeTab} style={{ minHeight: 190, paddingTop: '16px' }}>
+							{/* <PivotItem headerText={this.dispatcherHTML()} key="dispatcher" onLinkClick> */}
+							<PivotItem headerText='Dispatcher log' key='dispatcher'>
+								<MonacoHTML
+									content={dispatcherLogStr || 'Loading...'}
+									loading={isLoading}
+									// paddingTop[16] + tab[44] + button[32]
+									height={logDrawerHeight - 92}
+								/>
+								<Stack horizontal className='buttons'>
+									<StackItem grow={12} className='download'>
+										<PrimaryButton text='Download' onClick={this.downloadDispatcher} />
+									</StackItem>
+									<StackItem grow={12} className='close'>
+										<DefaultButton text='Close' onClick={closeDrawer} />
+									</StackItem>
+								</Stack>
+							</PivotItem>
+							<PivotItem headerText='NNIManager log' key='nnimanager'>
+								{/* <TabPane tab="NNImanager Log" key="nnimanager"> */}
+								<MonacoHTML
+									content={nniManagerLogStr || 'Loading...'}
+									loading={isLoading}
+									height={logDrawerHeight - 92}
+								/>
+								<Stack horizontal className='buttons'>
+									<StackItem grow={12} className='download'>
+										<PrimaryButton text='Download' onClick={this.downloadNNImanager} />
+									</StackItem>
+									<StackItem grow={12} className='close'>
+										<DefaultButton text='Close' onClick={closeDrawer} />
+									</StackItem>
+								</Stack>
+							</PivotItem>
+						</Pivot>
+					</div>
+				</Panel>
+			</Stack>
+		);
+	}
+
+	private refresh = (): void => {
+		window.clearTimeout(this.timerId);
+		const dispatcherPromise = axios.get(`${DOWNLOAD_IP}/dispatcher.log`);
+		const nniManagerPromise = axios.get(`${DOWNLOAD_IP}/nnimanager.log`);
+		dispatcherPromise.then(res => {
+			if (res.status === 200) {
+				this.setState({ dispatcherLogStr: res.data });
+			}
+		});
+		nniManagerPromise.then(res => {
+			if (res.status === 200) {
+				this.setState({ nniManagerLogStr: res.data });
+			}
+		});
+		Promise.all([dispatcherPromise, nniManagerPromise]).then(() => {
+			this.setState({ isLoading: false });
+			this.timerId = window.setTimeout(this.refresh, 10000);
+		});
+	};
+
+	private manualRefresh = (): void => {
+		this.setState({ isLoading: true });
+		this.refresh();
+	};
 }
 
 export default LogDrawer;
diff --git a/src/webui/src/components/Modals/MessageInfo.tsx b/src/webui/src/components/Modals/MessageInfo.tsx
index 8477cda63e..0568aa9fe2 100644
--- a/src/webui/src/components/Modals/MessageInfo.tsx
+++ b/src/webui/src/components/Modals/MessageInfo.tsx
@@ -2,24 +2,24 @@ import * as React from 'react';
 import { MessageBar, MessageBarType } from 'office-ui-fabric-react';
 
 interface MessageInfoProps {
-    info: string;
-    typeInfo: string;
-    className?: string;
+	info: string;
+	typeInfo: string;
+	className?: string;
 }
 
 class MessageInfo extends React.Component<MessageInfoProps, {}> {
-    constructor(props: MessageInfoProps) {
-        super(props);
-    }
+	constructor(props: MessageInfoProps) {
+		super(props);
+	}
 
-    render(): React.ReactNode {
-        const { info, typeInfo, className } = this.props;
-        return (
-            <MessageBar messageBarType={MessageBarType[typeInfo]} isMultiline={true} className={className}>
-                {info}
-            </MessageBar>
-        );
-    }
+	render(): React.ReactNode {
+		const { info, typeInfo, className } = this.props;
+		return (
+			<MessageBar messageBarType={MessageBarType[typeInfo]} isMultiline={true} className={className}>
+				{info}
+			</MessageBar>
+		);
+	}
 }
 
 export default MessageInfo;
diff --git a/src/webui/src/components/NavCon.tsx b/src/webui/src/components/NavCon.tsx
index 62ec9a209e..abad7884b9 100644
--- a/src/webui/src/components/NavCon.tsx
+++ b/src/webui/src/components/NavCon.tsx
@@ -2,13 +2,13 @@ import * as React from 'react';
 import axios from 'axios';
 import { WEBUIDOC, MANAGER_IP } from '../static/const';
 import {
-    Stack,
-    initializeIcons,
-    StackItem,
-    CommandBarButton,
-    IContextualMenuProps,
-    IStackTokens,
-    IStackStyles
+	Stack,
+	initializeIcons,
+	StackItem,
+	CommandBarButton,
+	IContextualMenuProps,
+	IStackTokens,
+	IStackStyles
 } from 'office-ui-fabric-react';
 import LogPanel from './Modals/LogPanel';
 import ExperimentPanel from './Modals/ExperimentPanel';
@@ -20,221 +20,221 @@ import '../static/style/icon.scss';
 
 initializeIcons();
 const stackTokens: IStackTokens = {
-    childrenGap: 15
+	childrenGap: 15
 };
 const stackStyle: IStackStyles = {
-    root: {
-        minWidth: 400,
-        height: 56,
-        display: 'flex',
-        verticalAlign: 'center'
-    }
+	root: {
+		minWidth: 400,
+		height: 56,
+		display: 'flex',
+		verticalAlign: 'center'
+	}
 };
 
 interface NavState {
-    version: string;
-    menuVisible: boolean;
-    navBarVisible: boolean;
-    isdisabledFresh: boolean;
-    isvisibleLogDrawer: boolean;
-    isvisibleExperimentDrawer: boolean;
-    refreshText: string;
-    refreshFrequency: number | string;
+	version: string;
+	menuVisible: boolean;
+	navBarVisible: boolean;
+	isdisabledFresh: boolean;
+	isvisibleLogDrawer: boolean;
+	isvisibleExperimentDrawer: boolean;
+	refreshText: string;
+	refreshFrequency: number | string;
 }
 
 interface NavProps {
-    changeInterval: (value: number) => void;
-    refreshFunction: () => void;
+	changeInterval: (value: number) => void;
+	refreshFunction: () => void;
 }
 
 class NavCon extends React.Component<NavProps, NavState> {
-    constructor(props: NavProps) {
-        super(props);
-        this.state = {
-            version: '',
-            menuVisible: false,
-            navBarVisible: false,
-            isdisabledFresh: false,
-            isvisibleLogDrawer: false, // download button (nnimanager·dispatcher) click -> drawer
-            isvisibleExperimentDrawer: false,
-            refreshText: 'Auto refresh',
-            refreshFrequency: 10
-        };
-    }
-
-    // to see & download experiment parameters
-    showExpcontent = (): void => {
-        this.setState({ isvisibleExperimentDrawer: true });
-    };
-
-    // to see & download dispatcher | nnimanager log
-    showDispatcherLog = (): void => {
-        this.setState({ isvisibleLogDrawer: true });
-    };
-
-    // close log drawer (nnimanager.dispatcher)
-    closeLogDrawer = (): void => {
-        this.setState({ isvisibleLogDrawer: false });
-    };
-
-    // close download experiment parameters drawer
-    closeExpDrawer = (): void => {
-        this.setState({ isvisibleExperimentDrawer: false });
-    };
-
-    getNNIversion = (): void => {
-        axios(`${MANAGER_IP}/version`, {
-            method: 'GET'
-        }).then(res => {
-            if (res.status === 200) {
-                this.setState({ version: res.data });
-            }
-        });
-    };
-
-    openGithub = (): void => {
-        const { version } = this.state;
-        const feed = `https://github.com/Microsoft/nni/issues/new?labels=${version}`;
-        window.open(feed);
-    };
-
-    openDocs = (): void => {
-        window.open(WEBUIDOC);
-    };
-
-    openGithubNNI = (): void => {
-        const { version } = this.state;
-        const nniLink = `https://github.com/Microsoft/nni/tree/${version}`;
-        window.open(nniLink);
-    };
-
-    getInterval = (num: number): void => {
-        this.props.changeInterval(num); // notice parent component
-        this.setState(() => ({
-            refreshFrequency: num === 0 ? '' : num,
-            refreshText: num === 0 ? 'Disable auto' : 'Auto refresh'
-        }));
-    };
-
-    componentDidMount(): void {
-        this.getNNIversion();
-    }
-
-    render(): React.ReactNode {
-        const { isvisibleLogDrawer, isvisibleExperimentDrawer, version, refreshText, refreshFrequency } = this.state;
-        const aboutProps: IContextualMenuProps = {
-            items: [
-                {
-                    key: 'feedback',
-                    text: 'Feedback',
-                    iconProps: { iconName: 'OfficeChat' },
-                    onClick: this.openGithub
-                },
-                {
-                    key: 'help',
-                    text: 'Document',
-                    iconProps: { iconName: 'TextDocument' },
-                    onClick: this.openDocs
-                },
-                {
-                    key: 'version',
-                    text: `Version ${version}`,
-                    iconProps: { iconName: 'VerifiedBrand' },
-                    onClick: this.openGithubNNI
-                }
-            ]
-        };
-        return (
-            <Stack horizontal className='nav'>
-                <StackItem grow={30} styles={{ root: { minWidth: 300, display: 'flex', verticalAlign: 'center' } }}>
-                    <span className='desktop-logo'>{NNILOGO}</span>
-                    <span className='left-right-margin'>{OVERVIEWTABS}</span>
-                    <span>{DETAILTABS}</span>
-                </StackItem>
-                <StackItem grow={70} className='navOptions'>
-                    <Stack horizontal horizontalAlign='end' tokens={stackTokens} styles={stackStyle}>
-                        {/* refresh button danyi*/}
-                        {/* TODO: fix bug */}
-                        {/* <CommandBarButton
+	constructor(props: NavProps) {
+		super(props);
+		this.state = {
+			version: '',
+			menuVisible: false,
+			navBarVisible: false,
+			isdisabledFresh: false,
+			isvisibleLogDrawer: false, // download button (nnimanager·dispatcher) click -> drawer
+			isvisibleExperimentDrawer: false,
+			refreshText: 'Auto refresh',
+			refreshFrequency: 10
+		};
+	}
+
+	// to see & download experiment parameters
+	showExpcontent = (): void => {
+		this.setState({ isvisibleExperimentDrawer: true });
+	};
+
+	// to see & download dispatcher | nnimanager log
+	showDispatcherLog = (): void => {
+		this.setState({ isvisibleLogDrawer: true });
+	};
+
+	// close log drawer (nnimanager.dispatcher)
+	closeLogDrawer = (): void => {
+		this.setState({ isvisibleLogDrawer: false });
+	};
+
+	// close download experiment parameters drawer
+	closeExpDrawer = (): void => {
+		this.setState({ isvisibleExperimentDrawer: false });
+	};
+
+	getNNIversion = (): void => {
+		axios(`${MANAGER_IP}/version`, {
+			method: 'GET'
+		}).then(res => {
+			if (res.status === 200) {
+				this.setState({ version: res.data });
+			}
+		});
+	};
+
+	openGithub = (): void => {
+		const { version } = this.state;
+		const feed = `https://github.com/Microsoft/nni/issues/new?labels=${version}`;
+		window.open(feed);
+	};
+
+	openDocs = (): void => {
+		window.open(WEBUIDOC);
+	};
+
+	openGithubNNI = (): void => {
+		const { version } = this.state;
+		const nniLink = `https://github.com/Microsoft/nni/tree/${version}`;
+		window.open(nniLink);
+	};
+
+	getInterval = (num: number): void => {
+		this.props.changeInterval(num); // notice parent component
+		this.setState(() => ({
+			refreshFrequency: num === 0 ? '' : num,
+			refreshText: num === 0 ? 'Disable auto' : 'Auto refresh'
+		}));
+	};
+
+	componentDidMount(): void {
+		this.getNNIversion();
+	}
+
+	render(): React.ReactNode {
+		const { isvisibleLogDrawer, isvisibleExperimentDrawer, version, refreshText, refreshFrequency } = this.state;
+		const aboutProps: IContextualMenuProps = {
+			items: [
+				{
+					key: 'feedback',
+					text: 'Feedback',
+					iconProps: { iconName: 'OfficeChat' },
+					onClick: this.openGithub
+				},
+				{
+					key: 'help',
+					text: 'Document',
+					iconProps: { iconName: 'TextDocument' },
+					onClick: this.openDocs
+				},
+				{
+					key: 'version',
+					text: `Version ${version}`,
+					iconProps: { iconName: 'VerifiedBrand' },
+					onClick: this.openGithubNNI
+				}
+			]
+		};
+		return (
+			<Stack horizontal className='nav'>
+				<StackItem grow={30} styles={{ root: { minWidth: 300, display: 'flex', verticalAlign: 'center' } }}>
+					<span className='desktop-logo'>{NNILOGO}</span>
+					<span className='left-right-margin'>{OVERVIEWTABS}</span>
+					<span>{DETAILTABS}</span>
+				</StackItem>
+				<StackItem grow={70} className='navOptions'>
+					<Stack horizontal horizontalAlign='end' tokens={stackTokens} styles={stackStyle}>
+						{/* refresh button danyi*/}
+						{/* TODO: fix bug */}
+						{/* <CommandBarButton
                             iconProps={{ iconName: 'sync' }}
                             text="Refresh"
                             onClick={this.props.refreshFunction}
                         /> */}
-                        <div className='nav-refresh'>
-                            <CommandBarButton
-                                iconProps={refreshFrequency === '' ? disableUpdates : timeIcon}
-                                text={refreshText}
-                                menuProps={this.refreshProps}
-                            />
-                            <div className='nav-refresh-num'>{refreshFrequency}</div>
-                        </div>
-                        <CommandBarButton iconProps={downLoadIcon} text='Download' menuProps={this.menuProps} />
-                        <CommandBarButton iconProps={infoIconAbout} text='About' menuProps={aboutProps} />
-                    </Stack>
-                </StackItem>
-                {/* the drawer for dispatcher & nnimanager log message */}
-                {isvisibleLogDrawer && <LogPanel closeDrawer={this.closeLogDrawer} />}
-                {isvisibleExperimentDrawer && (
-                    <ExperimentPanel closeExpDrawer={this.closeExpDrawer} experimentProfile={EXPERIMENT.profile} />
-                )}
-            </Stack>
-        );
-    }
-
-    // view and download experiment [log & experiment result]
-    private menuProps: IContextualMenuProps = {
-        items: [
-            {
-                key: 'experiment',
-                text: 'Experiment summary',
-                iconProps: { iconName: 'ShowResults' },
-                onClick: this.showExpcontent
-            },
-            {
-                key: 'logfiles',
-                text: 'Log files',
-                iconProps: { iconName: 'FilePDB' },
-                onClick: this.showDispatcherLog
-            }
-        ],
-        directionalHintFixed: true
-    };
-
-    private refreshProps: IContextualMenuProps = {
-        items: [
-            {
-                key: 'disableRefresh',
-                text: 'Disable auto refresh',
-                iconProps: closeTimer,
-                onClick: this.getInterval.bind(this, 0)
-            },
-            {
-                key: 'refresh10',
-                text: 'Refresh every 10s',
-                iconProps: requency,
-                onClick: this.getInterval.bind(this, 10)
-            },
-            {
-                key: 'refresh20',
-                text: 'Refresh every 20s',
-                iconProps: requency,
-                onClick: this.getInterval.bind(this, 20)
-            },
-            {
-                key: 'refresh30',
-                text: 'Refresh every 30s',
-                iconProps: requency,
-                onClick: this.getInterval.bind(this, 30)
-            },
-
-            {
-                key: 'refresh60',
-                text: 'Refresh every 1min',
-                iconProps: requency,
-                onClick: this.getInterval.bind(this, 60)
-            }
-        ]
-    };
+						<div className='nav-refresh'>
+							<CommandBarButton
+								iconProps={refreshFrequency === '' ? disableUpdates : timeIcon}
+								text={refreshText}
+								menuProps={this.refreshProps}
+							/>
+							<div className='nav-refresh-num'>{refreshFrequency}</div>
+						</div>
+						<CommandBarButton iconProps={downLoadIcon} text='Download' menuProps={this.menuProps} />
+						<CommandBarButton iconProps={infoIconAbout} text='About' menuProps={aboutProps} />
+					</Stack>
+				</StackItem>
+				{/* the drawer for dispatcher & nnimanager log message */}
+				{isvisibleLogDrawer && <LogPanel closeDrawer={this.closeLogDrawer} />}
+				{isvisibleExperimentDrawer && (
+					<ExperimentPanel closeExpDrawer={this.closeExpDrawer} experimentProfile={EXPERIMENT.profile} />
+				)}
+			</Stack>
+		);
+	}
+
+	// view and download experiment [log & experiment result]
+	private menuProps: IContextualMenuProps = {
+		items: [
+			{
+				key: 'experiment',
+				text: 'Experiment summary',
+				iconProps: { iconName: 'ShowResults' },
+				onClick: this.showExpcontent
+			},
+			{
+				key: 'logfiles',
+				text: 'Log files',
+				iconProps: { iconName: 'FilePDB' },
+				onClick: this.showDispatcherLog
+			}
+		],
+		directionalHintFixed: true
+	};
+
+	private refreshProps: IContextualMenuProps = {
+		items: [
+			{
+				key: 'disableRefresh',
+				text: 'Disable auto refresh',
+				iconProps: closeTimer,
+				onClick: this.getInterval.bind(this, 0)
+			},
+			{
+				key: 'refresh10',
+				text: 'Refresh every 10s',
+				iconProps: requency,
+				onClick: this.getInterval.bind(this, 10)
+			},
+			{
+				key: 'refresh20',
+				text: 'Refresh every 20s',
+				iconProps: requency,
+				onClick: this.getInterval.bind(this, 20)
+			},
+			{
+				key: 'refresh30',
+				text: 'Refresh every 30s',
+				iconProps: requency,
+				onClick: this.getInterval.bind(this, 30)
+			},
+
+			{
+				key: 'refresh60',
+				text: 'Refresh every 1min',
+				iconProps: requency,
+				onClick: this.getInterval.bind(this, 60)
+			}
+		]
+	};
 }
 
 export default NavCon;
diff --git a/src/webui/src/components/Overview.tsx b/src/webui/src/components/Overview.tsx
index b5fde3433a..12a77edb79 100644
--- a/src/webui/src/components/Overview.tsx
+++ b/src/webui/src/components/Overview.tsx
@@ -13,189 +13,189 @@ import '../static/style/overview.scss';
 import '../static/style/logPath.scss';
 
 const stackTokens: IStackTokens = {
-    childrenGap: 30
+	childrenGap: 30
 };
 
 const entriesOption = [
-    { key: '10', text: 'Display top 10 trials' },
-    { key: '20', text: 'Display top 20 trials' },
-    { key: '30', text: 'Display top 30 trials' },
-    { key: '50', text: 'Display top 50 trials' },
-    { key: '100', text: 'Display top 100 trials' }
+	{ key: '10', text: 'Display top 10 trials' },
+	{ key: '20', text: 'Display top 20 trials' },
+	{ key: '30', text: 'Display top 30 trials' },
+	{ key: '50', text: 'Display top 50 trials' },
+	{ key: '100', text: 'Display top 100 trials' }
 ];
 
 interface OverviewProps {
-    experimentUpdateBroadcast: number;
-    trialsUpdateBroadcast: number;
-    metricGraphMode: 'max' | 'min';
-    bestTrialEntries: string;
-    changeMetricGraphMode: (val: 'max' | 'min') => void;
-    changeEntries: (entries: string) => void;
+	experimentUpdateBroadcast: number;
+	trialsUpdateBroadcast: number;
+	metricGraphMode: 'max' | 'min';
+	bestTrialEntries: string;
+	changeMetricGraphMode: (val: 'max' | 'min') => void;
+	changeEntries: (entries: string) => void;
 }
 
 interface OverviewState {
-    trialConcurrency: number;
+	trialConcurrency: number;
 }
 
 class Overview extends React.Component<OverviewProps, OverviewState> {
-    constructor(props: OverviewProps) {
-        super(props);
-        this.state = {
-            trialConcurrency: EXPERIMENT.trialConcurrency
-        };
-    }
-
-    clickMaxTop = (event: React.SyntheticEvent<EventTarget>): void => {
-        event.stopPropagation();
-        // #999 panel active bgcolor; #b3b3b3 as usual
-        const { changeMetricGraphMode } = this.props;
-        changeMetricGraphMode('max');
-    };
-
-    clickMinTop = (event: React.SyntheticEvent<EventTarget>): void => {
-        event.stopPropagation();
-        const { changeMetricGraphMode } = this.props;
-        changeMetricGraphMode('min');
-    };
-
-    changeConcurrency = (val: number): void => {
-        this.setState({ trialConcurrency: val });
-    };
-
-    // updateEntries = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
-    updateEntries = (event: React.FormEvent<HTMLDivElement>, item: any): void => {
-        if (item !== undefined) {
-            this.props.changeEntries(item.key);
-        }
-    };
-
-    render(): React.ReactNode {
-        const { trialConcurrency } = this.state;
-        const { experimentUpdateBroadcast, metricGraphMode, bestTrialEntries } = this.props;
-        const bestTrials = this.findBestTrials();
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const bestAccuracy = bestTrials.length > 0 ? bestTrials[0].accuracy! : NaN;
-        const accuracyGraphData = this.generateAccuracyGraph(bestTrials);
-        const noDataMessage = bestTrials.length > 0 ? '' : 'No data';
-
-        const titleMaxbgcolor = metricGraphMode === 'max' ? '#333' : '#b3b3b3';
-        const titleMinbgcolor = metricGraphMode === 'min' ? '#333' : '#b3b3b3';
-
-        return (
-            <div className='overview'>
-                {/* status and experiment block */}
-                <Stack className='bottomDiv bgNNI'>
-                    <Title1 text='Experiment' icon='11.png' />
-                    <BasicInfo experimentUpdateBroadcast={experimentUpdateBroadcast} />
-                </Stack>
-
-                <Stack horizontal className='overMessage bottomDiv'>
-                    {/* status block */}
-                    <Stack.Item grow className='prograph bgNNI borderRight'>
-                        <Title1 text='Status' icon='5.png' />
-                        <Progressed
-                            bestAccuracy={bestAccuracy}
-                            concurrency={trialConcurrency}
-                            changeConcurrency={this.changeConcurrency}
-                            experimentUpdateBroadcast={experimentUpdateBroadcast}
-                        />
-                    </Stack.Item>
-                    {/* experiment parameters search space tuner assessor... */}
-                    <Stack.Item grow styles={{ root: { width: 450 } }} className='overviewBoder borderRight bgNNI'>
-                        <Title1 text='Search space' icon='10.png' />
-                        <Stack className='experiment'>
-                            <SearchSpace searchSpace={EXPERIMENT.searchSpace} />
-                        </Stack>
-                    </Stack.Item>
-                    {/* <Stack.Item grow styles={{root: {width: 450}}} className="bgNNI"> */}
-                    <Stack.Item grow styles={{ root: { width: 450 } }} className='bgNNI'>
-                        <Title1 text='Config' icon='4.png' />
-                        <Stack className='experiment'>
-                            {/* the scroll bar all the trial profile in the searchSpace div*/}
-                            <div className='experiment searchSpace'>
-                                <TrialInfo
-                                    experimentUpdateBroadcast={experimentUpdateBroadcast}
-                                    concurrency={trialConcurrency}
-                                />
-                            </div>
-                        </Stack>
-                    </Stack.Item>
-                </Stack>
-
-                <Stack style={{ backgroundColor: '#fff' }}>
-                    <Stack horizontal className='top10bg' style={{ position: 'relative', height: 42 }}>
-                        <div className='title' onClick={this.clickMaxTop}>
-                            <Title1 text='Top maximal trials' icon='max.png' fontColor={titleMaxbgcolor} />
-                        </div>
-                        <div className='title minTitle' onClick={this.clickMinTop}>
-                            <Title1 text='Top minimal trials' icon='min.png' fontColor={titleMinbgcolor} />
-                        </div>
-                        <div style={{ position: 'absolute', right: '2%', top: 8 }}>
-                            <Dropdown
-                                selectedKey={bestTrialEntries}
-                                options={entriesOption}
-                                onChange={this.updateEntries}
-                                styles={{ root: { width: 170 } }}
-                            />
-                        </div>
-                    </Stack>
-                    <Stack horizontal tokens={stackTokens}>
-                        <div style={{ width: '40%', position: 'relative' }}>
-                            <Accuracy accuracyData={accuracyGraphData} accNodata={noDataMessage} height={404} />
-                        </div>
-                        <div style={{ width: '60%' }}>
-                            <SuccessTable trialIds={bestTrials.map(trial => trial.info.id)} />
-                        </div>
-                    </Stack>
-                </Stack>
-            </div>
-        );
-    }
-
-    private findBestTrials(): Trial[] {
-        const bestTrials = TRIALS.sort();
-        const { bestTrialEntries } = this.props;
-        if (this.props.metricGraphMode === 'max') {
-            bestTrials.reverse().splice(JSON.parse(bestTrialEntries));
-        } else {
-            bestTrials.splice(JSON.parse(bestTrialEntries));
-        }
-        return bestTrials;
-    }
-
-    private generateAccuracyGraph(bestTrials: Trial[]): object {
-        const xSequence = bestTrials.map(trial => trial.sequenceId);
-        const ySequence = bestTrials.map(trial => trial.accuracy);
-
-        return {
-            // support max show 0.0000000
-            grid: {
-                left: 67,
-                right: 40
-            },
-            tooltip: {
-                trigger: 'item'
-            },
-            xAxis: {
-                name: 'Trial',
-                type: 'category',
-                data: xSequence
-            },
-            yAxis: {
-                name: 'Default metric',
-                type: 'value',
-                scale: true,
-                data: ySequence
-            },
-            series: [
-                {
-                    symbolSize: 6,
-                    type: 'scatter',
-                    data: ySequence
-                }
-            ]
-        };
-    }
+	constructor(props: OverviewProps) {
+		super(props);
+		this.state = {
+			trialConcurrency: EXPERIMENT.trialConcurrency
+		};
+	}
+
+	clickMaxTop = (event: React.SyntheticEvent<EventTarget>): void => {
+		event.stopPropagation();
+		// #999 panel active bgcolor; #b3b3b3 as usual
+		const { changeMetricGraphMode } = this.props;
+		changeMetricGraphMode('max');
+	};
+
+	clickMinTop = (event: React.SyntheticEvent<EventTarget>): void => {
+		event.stopPropagation();
+		const { changeMetricGraphMode } = this.props;
+		changeMetricGraphMode('min');
+	};
+
+	changeConcurrency = (val: number): void => {
+		this.setState({ trialConcurrency: val });
+	};
+
+	// updateEntries = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
+	updateEntries = (event: React.FormEvent<HTMLDivElement>, item: any): void => {
+		if (item !== undefined) {
+			this.props.changeEntries(item.key);
+		}
+	};
+
+	render(): React.ReactNode {
+		const { trialConcurrency } = this.state;
+		const { experimentUpdateBroadcast, metricGraphMode, bestTrialEntries } = this.props;
+		const bestTrials = this.findBestTrials();
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		const bestAccuracy = bestTrials.length > 0 ? bestTrials[0].accuracy! : NaN;
+		const accuracyGraphData = this.generateAccuracyGraph(bestTrials);
+		const noDataMessage = bestTrials.length > 0 ? '' : 'No data';
+
+		const titleMaxbgcolor = metricGraphMode === 'max' ? '#333' : '#b3b3b3';
+		const titleMinbgcolor = metricGraphMode === 'min' ? '#333' : '#b3b3b3';
+
+		return (
+			<div className='overview'>
+				{/* status and experiment block */}
+				<Stack className='bottomDiv bgNNI'>
+					<Title1 text='Experiment' icon='11.png' />
+					<BasicInfo experimentUpdateBroadcast={experimentUpdateBroadcast} />
+				</Stack>
+
+				<Stack horizontal className='overMessage bottomDiv'>
+					{/* status block */}
+					<Stack.Item grow className='prograph bgNNI borderRight'>
+						<Title1 text='Status' icon='5.png' />
+						<Progressed
+							bestAccuracy={bestAccuracy}
+							concurrency={trialConcurrency}
+							changeConcurrency={this.changeConcurrency}
+							experimentUpdateBroadcast={experimentUpdateBroadcast}
+						/>
+					</Stack.Item>
+					{/* experiment parameters search space tuner assessor... */}
+					<Stack.Item grow styles={{ root: { width: 450 } }} className='overviewBoder borderRight bgNNI'>
+						<Title1 text='Search space' icon='10.png' />
+						<Stack className='experiment'>
+							<SearchSpace searchSpace={EXPERIMENT.searchSpace} />
+						</Stack>
+					</Stack.Item>
+					{/* <Stack.Item grow styles={{root: {width: 450}}} className="bgNNI"> */}
+					<Stack.Item grow styles={{ root: { width: 450 } }} className='bgNNI'>
+						<Title1 text='Config' icon='4.png' />
+						<Stack className='experiment'>
+							{/* the scroll bar all the trial profile in the searchSpace div*/}
+							<div className='experiment searchSpace'>
+								<TrialInfo
+									experimentUpdateBroadcast={experimentUpdateBroadcast}
+									concurrency={trialConcurrency}
+								/>
+							</div>
+						</Stack>
+					</Stack.Item>
+				</Stack>
+
+				<Stack style={{ backgroundColor: '#fff' }}>
+					<Stack horizontal className='top10bg' style={{ position: 'relative', height: 42 }}>
+						<div className='title' onClick={this.clickMaxTop}>
+							<Title1 text='Top maximal trials' icon='max.png' fontColor={titleMaxbgcolor} />
+						</div>
+						<div className='title minTitle' onClick={this.clickMinTop}>
+							<Title1 text='Top minimal trials' icon='min.png' fontColor={titleMinbgcolor} />
+						</div>
+						<div style={{ position: 'absolute', right: '2%', top: 8 }}>
+							<Dropdown
+								selectedKey={bestTrialEntries}
+								options={entriesOption}
+								onChange={this.updateEntries}
+								styles={{ root: { width: 170 } }}
+							/>
+						</div>
+					</Stack>
+					<Stack horizontal tokens={stackTokens}>
+						<div style={{ width: '40%', position: 'relative' }}>
+							<Accuracy accuracyData={accuracyGraphData} accNodata={noDataMessage} height={404} />
+						</div>
+						<div style={{ width: '60%' }}>
+							<SuccessTable trialIds={bestTrials.map(trial => trial.info.id)} />
+						</div>
+					</Stack>
+				</Stack>
+			</div>
+		);
+	}
+
+	private findBestTrials(): Trial[] {
+		const bestTrials = TRIALS.sort();
+		const { bestTrialEntries } = this.props;
+		if (this.props.metricGraphMode === 'max') {
+			bestTrials.reverse().splice(JSON.parse(bestTrialEntries));
+		} else {
+			bestTrials.splice(JSON.parse(bestTrialEntries));
+		}
+		return bestTrials;
+	}
+
+	private generateAccuracyGraph(bestTrials: Trial[]): object {
+		const xSequence = bestTrials.map(trial => trial.sequenceId);
+		const ySequence = bestTrials.map(trial => trial.accuracy);
+
+		return {
+			// support max show 0.0000000
+			grid: {
+				left: 67,
+				right: 40
+			},
+			tooltip: {
+				trigger: 'item'
+			},
+			xAxis: {
+				name: 'Trial',
+				type: 'category',
+				data: xSequence
+			},
+			yAxis: {
+				name: 'Default metric',
+				type: 'value',
+				scale: true,
+				data: ySequence
+			},
+			series: [
+				{
+					symbolSize: 6,
+					type: 'scatter',
+					data: ySequence
+				}
+			]
+		};
+	}
 }
 
 export default Overview;
diff --git a/src/webui/src/components/TrialsDetail.tsx b/src/webui/src/components/TrialsDetail.tsx
index d2e9d3ae40..d3b884d692 100644
--- a/src/webui/src/components/TrialsDetail.tsx
+++ b/src/webui/src/components/TrialsDetail.tsx
@@ -12,197 +12,197 @@ import '../static/style/trialsDetail.scss';
 import '../static/style/search.scss';
 
 interface TrialDetailState {
-    tablePageSize: number; // table components val
-    whichChart: string;
-    searchType: string;
-    searchFilter: (trial: Trial) => boolean;
+	tablePageSize: number; // table components val
+	whichChart: string;
+	searchType: string;
+	searchFilter: (trial: Trial) => boolean;
 }
 
 interface TrialsDetailProps {
-    columnList: string[];
-    changeColumn: (val: string[]) => void;
-    experimentUpdateBroacast: number;
-    trialsUpdateBroadcast: number;
+	columnList: string[];
+	changeColumn: (val: string[]) => void;
+	experimentUpdateBroacast: number;
+	trialsUpdateBroadcast: number;
 }
 
 class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState> {
-    public interAccuracy = 0;
-    public interAllTableList = 2;
+	public interAccuracy = 0;
+	public interAllTableList = 2;
 
-    public tableList!: TableList | null;
-    public searchInput!: HTMLInputElement | null;
+	public tableList!: TableList | null;
+	public searchInput!: HTMLInputElement | null;
 
-    constructor(props: TrialsDetailProps) {
-        super(props);
-        this.state = {
-            tablePageSize: 20,
-            whichChart: 'Default metric',
-            searchType: 'id',
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-function-return-type
-            searchFilter: trial => true
-        };
-    }
+	constructor(props: TrialsDetailProps) {
+		super(props);
+		this.state = {
+			tablePageSize: 20,
+			whichChart: 'Default metric',
+			searchType: 'id',
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-function-return-type
+			searchFilter: trial => true
+		};
+	}
 
-    // search a trial by trial No. | trial id | Parameters | Status
-    searchTrial = (event: React.ChangeEvent<HTMLInputElement>): void => {
-        const targetValue = event.target.value;
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        let filter = (trial: Trial): boolean => true;
-        if (!targetValue.trim()) {
-            this.setState({ searchFilter: filter });
-            return;
-        }
-        switch (this.state.searchType) {
-            case 'id':
-                filter = (trial): boolean => trial.info.id.toUpperCase().includes(targetValue.toUpperCase());
-                break;
-            case 'Trial No.':
-                filter = (trial): boolean => trial.info.sequenceId.toString() === targetValue;
-                break;
-            case 'status':
-                filter = (trial): boolean => trial.info.status.toUpperCase().includes(targetValue.toUpperCase());
-                break;
-            case 'parameters':
-                // TODO: support filters like `x: 2` (instead of `"x": 2`)
-                filter = (trial): boolean => JSON.stringify(trial.info.hyperParameters, null, 4).includes(targetValue);
-                break;
-            default:
-                alert(`Unexpected search filter ${this.state.searchType}`);
-        }
-        this.setState({ searchFilter: filter });
-    };
+	// search a trial by trial No. | trial id | Parameters | Status
+	searchTrial = (event: React.ChangeEvent<HTMLInputElement>): void => {
+		const targetValue = event.target.value;
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		let filter = (trial: Trial): boolean => true;
+		if (!targetValue.trim()) {
+			this.setState({ searchFilter: filter });
+			return;
+		}
+		switch (this.state.searchType) {
+			case 'id':
+				filter = (trial): boolean => trial.info.id.toUpperCase().includes(targetValue.toUpperCase());
+				break;
+			case 'Trial No.':
+				filter = (trial): boolean => trial.info.sequenceId.toString() === targetValue;
+				break;
+			case 'status':
+				filter = (trial): boolean => trial.info.status.toUpperCase().includes(targetValue.toUpperCase());
+				break;
+			case 'parameters':
+				// TODO: support filters like `x: 2` (instead of `"x": 2`)
+				filter = (trial): boolean => JSON.stringify(trial.info.hyperParameters, null, 4).includes(targetValue);
+				break;
+			default:
+				alert(`Unexpected search filter ${this.state.searchType}`);
+		}
+		this.setState({ searchFilter: filter });
+	};
 
-    handleTablePageSizeSelect = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
-        if (item !== undefined) {
-            this.setState({ tablePageSize: item.text === 'all' ? -1 : parseInt(item.text, 10) });
-        }
-    };
+	handleTablePageSizeSelect = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
+		if (item !== undefined) {
+			this.setState({ tablePageSize: item.text === 'all' ? -1 : parseInt(item.text, 10) });
+		}
+	};
 
-    handleWhichTabs = (item: any): void => {
-        this.setState({ whichChart: item.props.headerText });
-    };
+	handleWhichTabs = (item: any): void => {
+		this.setState({ whichChart: item.props.headerText });
+	};
 
-    updateSearchFilterType = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
-        // clear input value and re-render table
-        if (item !== undefined) {
-            if (this.searchInput !== null) {
-                this.searchInput.value = '';
-            }
-            this.setState(() => ({ searchType: item.key.toString() }));
-        }
-    };
+	updateSearchFilterType = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
+		// clear input value and re-render table
+		if (item !== undefined) {
+			if (this.searchInput !== null) {
+				this.searchInput.value = '';
+			}
+			this.setState(() => ({ searchType: item.key.toString() }));
+		}
+	};
 
-    render(): React.ReactNode {
-        const { tablePageSize, whichChart, searchType } = this.state;
-        const { columnList, changeColumn } = this.props;
-        const source = TRIALS.filter(this.state.searchFilter);
-        const trialIds = TRIALS.filter(this.state.searchFilter).map(trial => trial.id);
-        const searchOptions = [
-            { key: 'id', text: 'Id' },
-            { key: 'Trial No.', text: 'Trial No.' },
-            { key: 'status', text: 'Status' },
-            { key: 'parameters', text: 'Parameters' }
-        ];
-        return (
-            <div>
-                <div className='trial' id='tabsty'>
-                    <Pivot
-                        defaultSelectedKey={'0'}
-                        className='detial-title'
-                        onLinkClick={this.handleWhichTabs}
-                        selectedKey={whichChart}
-                    >
-                        {/* <PivotItem tab={this.titleOfacc} key="1"> doesn't work*/}
-                        <PivotItem headerText='Default metric' itemIcon='HomeGroup' key='Default metric'>
-                            <Stack className='graph'>
-                                <DefaultPoint
-                                    trialIds={trialIds}
-                                    visible={whichChart === 'Default metric'}
-                                    trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
-                                />
-                            </Stack>
-                        </PivotItem>
-                        {/* <PivotItem tab={this.titleOfhyper} key="2"> */}
-                        <PivotItem headerText='Hyper-parameter' itemIcon='Equalizer' key='Hyper-parameter'>
-                            <Stack className='graph'>
-                                <Para trials={source} searchSpace={EXPERIMENT.searchSpaceNew} whichChart={whichChart} />
-                            </Stack>
-                        </PivotItem>
-                        {/* <PivotItem tab={this.titleOfDuration} key="3"> */}
-                        <PivotItem headerText='Duration' itemIcon='BarChartHorizontal' key='Duration'>
-                            <Duration source={source} whichChart={whichChart} />
-                        </PivotItem>
-                        {/* <PivotItem tab={this.titleOfIntermediate} key="4"> */}
-                        <PivotItem
-                            headerText='Intermediate result'
-                            itemIcon='StackedLineChart'
-                            key='Intermediate result'
-                        >
-                            {/* *why this graph has small footprint? */}
-                            <Intermediate source={source} whichChart={whichChart} />
-                        </PivotItem>
-                    </Pivot>
-                </div>
-                {/* trial table list */}
-                <div style={{ backgroundColor: '#fff' }}>
-                    <Stack horizontal className='panelTitle' style={{ marginTop: 10 }}>
-                        <span style={{ marginRight: 12 }}>{tableListIcon}</span>
-                        <span>Trial jobs</span>
-                    </Stack>
-                    <Stack horizontal className='allList'>
-                        <StackItem grow={50}>
-                            <DefaultButton
-                                text='Compare'
-                                className='allList-compare'
-                                // use child-component tableList's function, the function is in child-component.
-                                onClick={(): void => {
-                                    if (this.tableList) {
-                                        this.tableList.compareBtn();
-                                    }
-                                }}
-                            />
-                        </StackItem>
-                        <StackItem grow={50}>
-                            <Stack horizontal horizontalAlign='end' className='allList'>
-                                <DefaultButton
-                                    className='allList-button-gap'
-                                    text='Add column'
-                                    onClick={(): void => {
-                                        if (this.tableList) {
-                                            this.tableList.addColumn();
-                                        }
-                                    }}
-                                />
-                                <Dropdown
-                                    selectedKey={searchType}
-                                    options={searchOptions}
-                                    onChange={this.updateSearchFilterType}
-                                    styles={{ root: { width: 150 } }}
-                                />
-                                <input
-                                    type='text'
-                                    className='allList-search-input'
-                                    placeholder={`Search by ${this.state.searchType}`}
-                                    onChange={this.searchTrial}
-                                    style={{ width: 230 }}
-                                    ref={(text): any => (this.searchInput = text)}
-                                />
-                            </Stack>
-                        </StackItem>
-                    </Stack>
-                    <TableList
-                        pageSize={tablePageSize}
-                        tableSource={source.map(trial => trial.tableRecord)}
-                        columnList={columnList}
-                        changeColumn={changeColumn}
-                        trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
-                        // TODO: change any to specific type
-                        ref={(tabList): any => (this.tableList = tabList)}
-                    />
-                </div>
-            </div>
-        );
-    }
+	render(): React.ReactNode {
+		const { tablePageSize, whichChart, searchType } = this.state;
+		const { columnList, changeColumn } = this.props;
+		const source = TRIALS.filter(this.state.searchFilter);
+		const trialIds = TRIALS.filter(this.state.searchFilter).map(trial => trial.id);
+		const searchOptions = [
+			{ key: 'id', text: 'Id' },
+			{ key: 'Trial No.', text: 'Trial No.' },
+			{ key: 'status', text: 'Status' },
+			{ key: 'parameters', text: 'Parameters' }
+		];
+		return (
+			<div>
+				<div className='trial' id='tabsty'>
+					<Pivot
+						defaultSelectedKey={'0'}
+						className='detial-title'
+						onLinkClick={this.handleWhichTabs}
+						selectedKey={whichChart}
+					>
+						{/* <PivotItem tab={this.titleOfacc} key="1"> doesn't work*/}
+						<PivotItem headerText='Default metric' itemIcon='HomeGroup' key='Default metric'>
+							<Stack className='graph'>
+								<DefaultPoint
+									trialIds={trialIds}
+									visible={whichChart === 'Default metric'}
+									trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
+								/>
+							</Stack>
+						</PivotItem>
+						{/* <PivotItem tab={this.titleOfhyper} key="2"> */}
+						<PivotItem headerText='Hyper-parameter' itemIcon='Equalizer' key='Hyper-parameter'>
+							<Stack className='graph'>
+								<Para trials={source} searchSpace={EXPERIMENT.searchSpaceNew} whichChart={whichChart} />
+							</Stack>
+						</PivotItem>
+						{/* <PivotItem tab={this.titleOfDuration} key="3"> */}
+						<PivotItem headerText='Duration' itemIcon='BarChartHorizontal' key='Duration'>
+							<Duration source={source} whichChart={whichChart} />
+						</PivotItem>
+						{/* <PivotItem tab={this.titleOfIntermediate} key="4"> */}
+						<PivotItem
+							headerText='Intermediate result'
+							itemIcon='StackedLineChart'
+							key='Intermediate result'
+						>
+							{/* *why this graph has small footprint? */}
+							<Intermediate source={source} whichChart={whichChart} />
+						</PivotItem>
+					</Pivot>
+				</div>
+				{/* trial table list */}
+				<div style={{ backgroundColor: '#fff' }}>
+					<Stack horizontal className='panelTitle' style={{ marginTop: 10 }}>
+						<span style={{ marginRight: 12 }}>{tableListIcon}</span>
+						<span>Trial jobs</span>
+					</Stack>
+					<Stack horizontal className='allList'>
+						<StackItem grow={50}>
+							<DefaultButton
+								text='Compare'
+								className='allList-compare'
+								// use child-component tableList's function, the function is in child-component.
+								onClick={(): void => {
+									if (this.tableList) {
+										this.tableList.compareBtn();
+									}
+								}}
+							/>
+						</StackItem>
+						<StackItem grow={50}>
+							<Stack horizontal horizontalAlign='end' className='allList'>
+								<DefaultButton
+									className='allList-button-gap'
+									text='Add column'
+									onClick={(): void => {
+										if (this.tableList) {
+											this.tableList.addColumn();
+										}
+									}}
+								/>
+								<Dropdown
+									selectedKey={searchType}
+									options={searchOptions}
+									onChange={this.updateSearchFilterType}
+									styles={{ root: { width: 150 } }}
+								/>
+								<input
+									type='text'
+									className='allList-search-input'
+									placeholder={`Search by ${this.state.searchType}`}
+									onChange={this.searchTrial}
+									style={{ width: 230 }}
+									ref={(text): any => (this.searchInput = text)}
+								/>
+							</Stack>
+						</StackItem>
+					</Stack>
+					<TableList
+						pageSize={tablePageSize}
+						tableSource={source.map(trial => trial.tableRecord)}
+						columnList={columnList}
+						changeColumn={changeColumn}
+						trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
+						// TODO: change any to specific type
+						ref={(tabList): any => (this.tableList = tabList)}
+					/>
+				</div>
+			</div>
+		);
+	}
 }
 
 export default TrialsDetail;
diff --git a/src/webui/src/components/overview/Accuracy.tsx b/src/webui/src/components/overview/Accuracy.tsx
index 2f2fd9253b..9d4d310e0b 100644
--- a/src/webui/src/components/overview/Accuracy.tsx
+++ b/src/webui/src/components/overview/Accuracy.tsx
@@ -2,39 +2,39 @@ import * as React from 'react';
 import ReactEcharts from 'echarts-for-react';
 import echarts from 'echarts/lib/echarts';
 echarts.registerTheme('my_theme', {
-    color: '#3c8dbc'
+	color: '#3c8dbc'
 });
 import 'echarts/lib/chart/scatter';
 import 'echarts/lib/component/tooltip';
 import 'echarts/lib/component/title';
 
 interface AccuracyProps {
-    accuracyData: object;
-    accNodata: string;
-    height: number;
+	accuracyData: object;
+	accNodata: string;
+	height: number;
 }
 
 class Accuracy extends React.Component<AccuracyProps, {}> {
-    constructor(props: AccuracyProps) {
-        super(props);
-    }
+	constructor(props: AccuracyProps) {
+		super(props);
+	}
 
-    render(): React.ReactNode {
-        const { accNodata, accuracyData, height } = this.props;
-        return (
-            <div>
-                <ReactEcharts
-                    option={accuracyData}
-                    style={{
-                        height: height,
-                        margin: '0 auto'
-                    }}
-                    theme='my_theme'
-                />
-                <div className='showMess'>{accNodata}</div>
-            </div>
-        );
-    }
+	render(): React.ReactNode {
+		const { accNodata, accuracyData, height } = this.props;
+		return (
+			<div>
+				<ReactEcharts
+					option={accuracyData}
+					style={{
+						height: height,
+						margin: '0 auto'
+					}}
+					theme='my_theme'
+				/>
+				<div className='showMess'>{accNodata}</div>
+			</div>
+		);
+	}
 }
 
 export default Accuracy;
diff --git a/src/webui/src/components/overview/BasicInfo.tsx b/src/webui/src/components/overview/BasicInfo.tsx
index c49ed1f1c7..151d76fac0 100644
--- a/src/webui/src/components/overview/BasicInfo.tsx
+++ b/src/webui/src/components/overview/BasicInfo.tsx
@@ -4,59 +4,59 @@ import { EXPERIMENT } from '../../static/datamodel';
 import { formatTimestamp } from '../../static/function';
 
 interface BasicInfoProps {
-    experimentUpdateBroadcast: number;
+	experimentUpdateBroadcast: number;
 }
 
 class BasicInfo extends React.Component<BasicInfoProps, {}> {
-    // Use getId() to ensure that the ID is unique on the page.
-    // (It's also okay to use a plain string without getId() and manually ensure uniqueness.)
-    // for tooltip user the log directory
-    private _hostId: string = getId('tooltipHost');
-    constructor(props: BasicInfoProps) {
-        super(props);
-    }
+	// Use getId() to ensure that the ID is unique on the page.
+	// (It's also okay to use a plain string without getId() and manually ensure uniqueness.)
+	// for tooltip user the log directory
+	private _hostId: string = getId('tooltipHost');
+	constructor(props: BasicInfoProps) {
+		super(props);
+	}
 
-    render(): React.ReactNode {
-        return (
-            <Stack horizontal horizontalAlign='space-between' className='main'>
-                <Stack.Item grow={3} className='padItem basic'>
-                    <p>Name</p>
-                    <div>{EXPERIMENT.profile.params.experimentName}</div>
-                </Stack.Item>
-                <Stack.Item grow={3} className='padItem basic'>
-                    <p>ID</p>
-                    <div>{EXPERIMENT.profile.id}</div>
-                </Stack.Item>
-                <Stack.Item grow={3} className='padItem basic'>
-                    <p>Start time</p>
-                    <div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.startTime)}</div>
-                </Stack.Item>
-                <Stack.Item grow={3} className='padItem basic'>
-                    <p>End time</p>
-                    <div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.endTime)}</div>
-                </Stack.Item>
-                <Stack.Item className='padItem basic'>
-                    <p>Log directory</p>
-                    <div className='nowrap'>
-                        <TooltipHost
-                            // Tooltip message content
-                            content={EXPERIMENT.profile.logDir || 'unknown'}
-                            id={this._hostId}
-                            calloutProps={{ gapSpace: 0 }}
-                            styles={{ root: { display: 'inline-block' } }}
-                        >
-                            {/* show logDir */}
-                            {EXPERIMENT.profile.logDir || 'unknown'}
-                        </TooltipHost>
-                    </div>
-                </Stack.Item>
-                <Stack.Item className='padItem basic'>
-                    <p>Training platform</p>
-                    <div className='nowrap'>{EXPERIMENT.profile.params.trainingServicePlatform}</div>
-                </Stack.Item>
-            </Stack>
-        );
-    }
+	render(): React.ReactNode {
+		return (
+			<Stack horizontal horizontalAlign='space-between' className='main'>
+				<Stack.Item grow={3} className='padItem basic'>
+					<p>Name</p>
+					<div>{EXPERIMENT.profile.params.experimentName}</div>
+				</Stack.Item>
+				<Stack.Item grow={3} className='padItem basic'>
+					<p>ID</p>
+					<div>{EXPERIMENT.profile.id}</div>
+				</Stack.Item>
+				<Stack.Item grow={3} className='padItem basic'>
+					<p>Start time</p>
+					<div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.startTime)}</div>
+				</Stack.Item>
+				<Stack.Item grow={3} className='padItem basic'>
+					<p>End time</p>
+					<div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.endTime)}</div>
+				</Stack.Item>
+				<Stack.Item className='padItem basic'>
+					<p>Log directory</p>
+					<div className='nowrap'>
+						<TooltipHost
+							// Tooltip message content
+							content={EXPERIMENT.profile.logDir || 'unknown'}
+							id={this._hostId}
+							calloutProps={{ gapSpace: 0 }}
+							styles={{ root: { display: 'inline-block' } }}
+						>
+							{/* show logDir */}
+							{EXPERIMENT.profile.logDir || 'unknown'}
+						</TooltipHost>
+					</div>
+				</Stack.Item>
+				<Stack.Item className='padItem basic'>
+					<p>Training platform</p>
+					<div className='nowrap'>{EXPERIMENT.profile.params.trainingServicePlatform}</div>
+				</Stack.Item>
+			</Stack>
+		);
+	}
 }
 
 export default BasicInfo;
diff --git a/src/webui/src/components/overview/Details.tsx b/src/webui/src/components/overview/Details.tsx
index f3c3430c9e..1fb63acebc 100644
--- a/src/webui/src/components/overview/Details.tsx
+++ b/src/webui/src/components/overview/Details.tsx
@@ -3,35 +3,35 @@ import { DetailsRow, IDetailsRowBaseProps } from 'office-ui-fabric-react';
 import OpenRow from '../public-child/OpenRow';
 
 interface DetailsProps {
-    detailsProps: IDetailsRowBaseProps;
+	detailsProps: IDetailsRowBaseProps;
 }
 
 interface DetailsState {
-    isExpand: boolean;
+	isExpand: boolean;
 }
 
 class Details extends React.Component<DetailsProps, DetailsState> {
-    constructor(props: DetailsProps) {
-        super(props);
-        this.state = { isExpand: false };
-    }
+	constructor(props: DetailsProps) {
+		super(props);
+		this.state = { isExpand: false };
+	}
 
-    render(): React.ReactNode {
-        const { detailsProps } = this.props;
-        const { isExpand } = this.state;
-        return (
-            <div>
-                <div
-                    onClick={(): void => {
-                        this.setState(() => ({ isExpand: !isExpand }));
-                    }}
-                >
-                    <DetailsRow {...detailsProps} />
-                </div>
-                {isExpand && <OpenRow trialId={detailsProps.item.id} />}
-            </div>
-        );
-    }
+	render(): React.ReactNode {
+		const { detailsProps } = this.props;
+		const { isExpand } = this.state;
+		return (
+			<div>
+				<div
+					onClick={(): void => {
+						this.setState(() => ({ isExpand: !isExpand }));
+					}}
+				>
+					<DetailsRow {...detailsProps} />
+				</div>
+				{isExpand && <OpenRow trialId={detailsProps.item.id} />}
+			</div>
+		);
+	}
 }
 
 export default Details;
diff --git a/src/webui/src/components/overview/NumInput.tsx b/src/webui/src/components/overview/NumInput.tsx
index 9313f713f2..ce33830ba0 100644
--- a/src/webui/src/components/overview/NumInput.tsx
+++ b/src/webui/src/components/overview/NumInput.tsx
@@ -2,64 +2,64 @@ import * as React from 'react';
 import { Stack, PrimaryButton } from 'office-ui-fabric-react';
 
 interface ConcurrencyInputProps {
-    value: number;
-    updateValue: (val: string) => void;
+	value: number;
+	updateValue: (val: string) => void;
 }
 
 interface ConcurrencyInputStates {
-    editting: boolean;
+	editting: boolean;
 }
 
 class ConcurrencyInput extends React.Component<ConcurrencyInputProps, ConcurrencyInputStates> {
-    private input = React.createRef<HTMLInputElement>();
+	private input = React.createRef<HTMLInputElement>();
 
-    constructor(props: ConcurrencyInputProps) {
-        super(props);
-        this.state = { editting: false };
-    }
+	constructor(props: ConcurrencyInputProps) {
+		super(props);
+		this.state = { editting: false };
+	}
 
-    save = (): void => {
-        if (this.input.current !== null) {
-            this.props.updateValue(this.input.current.value);
-            this.setState({ editting: false });
-        }
-    };
+	save = (): void => {
+		if (this.input.current !== null) {
+			this.props.updateValue(this.input.current.value);
+			this.setState({ editting: false });
+		}
+	};
 
-    cancel = (): void => {
-        this.setState({ editting: false });
-    };
+	cancel = (): void => {
+		this.setState({ editting: false });
+	};
 
-    edit = (): void => {
-        this.setState({ editting: true });
-    };
+	edit = (): void => {
+		this.setState({ editting: true });
+	};
 
-    render(): React.ReactNode {
-        if (this.state.editting) {
-            return (
-                <Stack horizontal className='inputBox'>
-                    <input
-                        type='number'
-                        className='concurrencyInput'
-                        defaultValue={this.props.value.toString()}
-                        ref={this.input}
-                    />
-                    <PrimaryButton text='Save' onClick={this.save} />
-                    <PrimaryButton
-                        text='Cancel'
-                        style={{ display: 'inline-block', marginLeft: 1 }}
-                        onClick={this.cancel}
-                    />
-                </Stack>
-            );
-        } else {
-            return (
-                <Stack horizontal className='inputBox'>
-                    <input type='number' className='concurrencyInput' disabled={true} value={this.props.value} />
-                    <PrimaryButton text='Edit' onClick={this.edit} />
-                </Stack>
-            );
-        }
-    }
+	render(): React.ReactNode {
+		if (this.state.editting) {
+			return (
+				<Stack horizontal className='inputBox'>
+					<input
+						type='number'
+						className='concurrencyInput'
+						defaultValue={this.props.value.toString()}
+						ref={this.input}
+					/>
+					<PrimaryButton text='Save' onClick={this.save} />
+					<PrimaryButton
+						text='Cancel'
+						style={{ display: 'inline-block', marginLeft: 1 }}
+						onClick={this.cancel}
+					/>
+				</Stack>
+			);
+		} else {
+			return (
+				<Stack horizontal className='inputBox'>
+					<input type='number' className='concurrencyInput' disabled={true} value={this.props.value} />
+					<PrimaryButton text='Edit' onClick={this.edit} />
+				</Stack>
+			);
+		}
+	}
 }
 
 export default ConcurrencyInput;
diff --git a/src/webui/src/components/overview/Progress.tsx b/src/webui/src/components/overview/Progress.tsx
index 9b3d1cd184..b3509f2094 100644
--- a/src/webui/src/components/overview/Progress.tsx
+++ b/src/webui/src/components/overview/Progress.tsx
@@ -1,15 +1,15 @@
 import * as React from 'react';
 import {
-    Stack,
-    Callout,
-    Link,
-    IconButton,
-    FontWeights,
-    mergeStyleSets,
-    getId,
-    getTheme,
-    StackItem,
-    TooltipHost
+	Stack,
+	Callout,
+	Link,
+	IconButton,
+	FontWeights,
+	mergeStyleSets,
+	getId,
+	getTheme,
+	StackItem,
+	TooltipHost
 } from 'office-ui-fabric-react';
 import axios from 'axios';
 import { MANAGER_IP, CONCURRENCYTOOLTIP } from '../../static/const';
@@ -23,293 +23,293 @@ import { infoIcon } from '../Buttons/Icon';
 import '../../static/style/progress.scss';
 import '../../static/style/probar.scss';
 interface ProgressProps {
-    concurrency: number;
-    bestAccuracy: number;
-    changeConcurrency: (val: number) => void;
-    experimentUpdateBroadcast: number;
+	concurrency: number;
+	bestAccuracy: number;
+	changeConcurrency: (val: number) => void;
+	experimentUpdateBroadcast: number;
 }
 
 interface ProgressState {
-    isShowLogDrawer: boolean;
-    isCalloutVisible?: boolean;
-    isShowSucceedInfo: boolean;
-    info: string;
-    typeInfo: string;
+	isShowLogDrawer: boolean;
+	isCalloutVisible?: boolean;
+	isShowSucceedInfo: boolean;
+	info: string;
+	typeInfo: string;
 }
 
 const itemStyles: React.CSSProperties = {
-    height: 50,
-    width: 100
+	height: 50,
+	width: 100
 };
 const theme = getTheme();
 const styles = mergeStyleSets({
-    buttonArea: {
-        verticalAlign: 'top',
-        display: 'inline-block',
-        textAlign: 'center',
-        // margin: '0 100px',
-        minWidth: 30,
-        height: 30
-    },
-    callout: {
-        maxWidth: 300
-    },
-    header: {
-        padding: '18px 24px 12px'
-    },
-    title: [
-        theme.fonts.xLarge,
-        {
-            margin: 0,
-            color: theme.palette.neutralPrimary,
-            fontWeight: FontWeights.semilight
-        }
-    ],
-    inner: {
-        height: '100%',
-        padding: '0 24px 20px'
-    },
-    actions: {
-        position: 'relative',
-        marginTop: 20,
-        width: '100%',
-        whiteSpace: 'nowrap'
-    },
-    subtext: [
-        theme.fonts.small,
-        {
-            margin: 0,
-            color: theme.palette.neutralPrimary,
-            fontWeight: FontWeights.semilight
-        }
-    ],
-    link: [
-        theme.fonts.medium,
-        {
-            color: theme.palette.neutralPrimary
-        }
-    ]
+	buttonArea: {
+		verticalAlign: 'top',
+		display: 'inline-block',
+		textAlign: 'center',
+		// margin: '0 100px',
+		minWidth: 30,
+		height: 30
+	},
+	callout: {
+		maxWidth: 300
+	},
+	header: {
+		padding: '18px 24px 12px'
+	},
+	title: [
+		theme.fonts.xLarge,
+		{
+			margin: 0,
+			color: theme.palette.neutralPrimary,
+			fontWeight: FontWeights.semilight
+		}
+	],
+	inner: {
+		height: '100%',
+		padding: '0 24px 20px'
+	},
+	actions: {
+		position: 'relative',
+		marginTop: 20,
+		width: '100%',
+		whiteSpace: 'nowrap'
+	},
+	subtext: [
+		theme.fonts.small,
+		{
+			margin: 0,
+			color: theme.palette.neutralPrimary,
+			fontWeight: FontWeights.semilight
+		}
+	],
+	link: [
+		theme.fonts.medium,
+		{
+			color: theme.palette.neutralPrimary
+		}
+	]
 });
 
 class Progressed extends React.Component<ProgressProps, ProgressState> {
-    private menuButtonElement!: HTMLDivElement | null;
-    private labelId: string = getId('callout-label');
-    private descriptionId: string = getId('callout-description');
-    constructor(props: ProgressProps) {
-        super(props);
-        this.state = {
-            isShowLogDrawer: false,
-            isCalloutVisible: false,
-            isShowSucceedInfo: false,
-            info: '',
-            typeInfo: 'success'
-        };
-    }
+	private menuButtonElement!: HTMLDivElement | null;
+	private labelId: string = getId('callout-label');
+	private descriptionId: string = getId('callout-description');
+	constructor(props: ProgressProps) {
+		super(props);
+		this.state = {
+			isShowLogDrawer: false,
+			isCalloutVisible: false,
+			isShowSucceedInfo: false,
+			info: '',
+			typeInfo: 'success'
+		};
+	}
 
-    hideSucceedInfo = (): void => {
-        this.setState(() => ({ isShowSucceedInfo: false }));
-    };
+	hideSucceedInfo = (): void => {
+		this.setState(() => ({ isShowSucceedInfo: false }));
+	};
 
-    /**
-     * info: message content
-     * typeInfo: message type: success | error...
-     * continuousTime: show time, 2000ms
-     */
-    showMessageInfo = (info: string, typeInfo: string): void => {
-        this.setState(() => ({
-            info,
-            typeInfo,
-            isShowSucceedInfo: true
-        }));
-        setTimeout(this.hideSucceedInfo, 2000);
-    };
+	/**
+	 * info: message content
+	 * typeInfo: message type: success | error...
+	 * continuousTime: show time, 2000ms
+	 */
+	showMessageInfo = (info: string, typeInfo: string): void => {
+		this.setState(() => ({
+			info,
+			typeInfo,
+			isShowSucceedInfo: true
+		}));
+		setTimeout(this.hideSucceedInfo, 2000);
+	};
 
-    editTrialConcurrency = async (userInput: string): Promise<void> => {
-        if (!userInput.match(/^[1-9]\d*$/)) {
-            this.showMessageInfo('Please enter a positive integer!', 'error');
-            return;
-        }
-        const newConcurrency = parseInt(userInput, 10);
-        if (newConcurrency === this.props.concurrency) {
-            this.showMessageInfo('Trial concurrency has not changed', 'error');
-            return;
-        }
+	editTrialConcurrency = async (userInput: string): Promise<void> => {
+		if (!userInput.match(/^[1-9]\d*$/)) {
+			this.showMessageInfo('Please enter a positive integer!', 'error');
+			return;
+		}
+		const newConcurrency = parseInt(userInput, 10);
+		if (newConcurrency === this.props.concurrency) {
+			this.showMessageInfo('Trial concurrency has not changed', 'error');
+			return;
+		}
 
-        const newProfile = Object.assign({}, EXPERIMENT.profile);
-        newProfile.params.trialConcurrency = newConcurrency;
+		const newProfile = Object.assign({}, EXPERIMENT.profile);
+		newProfile.params.trialConcurrency = newConcurrency;
 
-        // rest api, modify trial concurrency value
-        try {
-            const res = await axios.put(`${MANAGER_IP}/experiment`, newProfile, {
-                // eslint-disable-next-line @typescript-eslint/camelcase
-                params: { update_type: 'TRIAL_CONCURRENCY' }
-            });
-            if (res.status === 200) {
-                this.showMessageInfo('Successfully updated trial concurrency', 'success');
-                // NOTE: should we do this earlier in favor of poor networks?
-                this.props.changeConcurrency(newConcurrency);
-            }
-        } catch (error) {
-            if (error.response && error.response.data.error) {
-                this.showMessageInfo(`Failed to update trial concurrency\n${error.response.data.error}`, 'error');
-            } else if (error.response) {
-                this.showMessageInfo(
-                    `Failed to update trial concurrency\nServer responsed ${error.response.status}`,
-                    'error'
-                );
-            } else if (error.message) {
-                this.showMessageInfo(`Failed to update trial concurrency\n${error.message}`, 'error');
-            } else {
-                this.showMessageInfo(`Failed to update trial concurrency\nUnknown error`, 'error');
-            }
-        }
-    };
+		// rest api, modify trial concurrency value
+		try {
+			const res = await axios.put(`${MANAGER_IP}/experiment`, newProfile, {
+				// eslint-disable-next-line @typescript-eslint/camelcase
+				params: { update_type: 'TRIAL_CONCURRENCY' }
+			});
+			if (res.status === 200) {
+				this.showMessageInfo('Successfully updated trial concurrency', 'success');
+				// NOTE: should we do this earlier in favor of poor networks?
+				this.props.changeConcurrency(newConcurrency);
+			}
+		} catch (error) {
+			if (error.response && error.response.data.error) {
+				this.showMessageInfo(`Failed to update trial concurrency\n${error.response.data.error}`, 'error');
+			} else if (error.response) {
+				this.showMessageInfo(
+					`Failed to update trial concurrency\nServer responsed ${error.response.status}`,
+					'error'
+				);
+			} else if (error.message) {
+				this.showMessageInfo(`Failed to update trial concurrency\n${error.message}`, 'error');
+			} else {
+				this.showMessageInfo(`Failed to update trial concurrency\nUnknown error`, 'error');
+			}
+		}
+	};
 
-    isShowDrawer = (): void => {
-        this.setState({ isShowLogDrawer: true });
-    };
+	isShowDrawer = (): void => {
+		this.setState({ isShowLogDrawer: true });
+	};
 
-    closeDrawer = (): void => {
-        this.setState({ isShowLogDrawer: false });
-    };
+	closeDrawer = (): void => {
+		this.setState({ isShowLogDrawer: false });
+	};
 
-    onDismiss = (): void => {
-        this.setState({ isCalloutVisible: false });
-    };
+	onDismiss = (): void => {
+		this.setState({ isCalloutVisible: false });
+	};
 
-    onShow = (): void => {
-        this.setState({ isCalloutVisible: true });
-    };
+	onShow = (): void => {
+		this.setState({ isCalloutVisible: true });
+	};
 
-    render(): React.ReactNode {
-        const { bestAccuracy } = this.props;
-        const { isShowLogDrawer, isCalloutVisible, isShowSucceedInfo, info, typeInfo } = this.state;
+	render(): React.ReactNode {
+		const { bestAccuracy } = this.props;
+		const { isShowLogDrawer, isCalloutVisible, isShowSucceedInfo, info, typeInfo } = this.state;
 
-        const count = TRIALS.countStatus();
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const stoppedCount = count.get('USER_CANCELED')! + count.get('SYS_CANCELED')! + count.get('EARLY_STOPPED')!;
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const bar2 = count.get('RUNNING')! + count.get('SUCCEEDED')! + count.get('FAILED')! + stoppedCount;
-        // support type [0, 1], not 98%
-        const bar2Percent = bar2 / EXPERIMENT.profile.params.maxTrialNum;
-        const percent = EXPERIMENT.profile.execDuration / EXPERIMENT.profile.params.maxExecDuration;
-        const remaining = convertTime(EXPERIMENT.profile.params.maxExecDuration - EXPERIMENT.profile.execDuration);
-        const maxDuration = convertTime(EXPERIMENT.profile.params.maxExecDuration);
-        const maxTrialNum = EXPERIMENT.profile.params.maxTrialNum;
-        const execDuration = convertTime(EXPERIMENT.profile.execDuration);
+		const count = TRIALS.countStatus();
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		const stoppedCount = count.get('USER_CANCELED')! + count.get('SYS_CANCELED')! + count.get('EARLY_STOPPED')!;
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		const bar2 = count.get('RUNNING')! + count.get('SUCCEEDED')! + count.get('FAILED')! + stoppedCount;
+		// support type [0, 1], not 98%
+		const bar2Percent = bar2 / EXPERIMENT.profile.params.maxTrialNum;
+		const percent = EXPERIMENT.profile.execDuration / EXPERIMENT.profile.params.maxExecDuration;
+		const remaining = convertTime(EXPERIMENT.profile.params.maxExecDuration - EXPERIMENT.profile.execDuration);
+		const maxDuration = convertTime(EXPERIMENT.profile.params.maxExecDuration);
+		const maxTrialNum = EXPERIMENT.profile.params.maxTrialNum;
+		const execDuration = convertTime(EXPERIMENT.profile.execDuration);
 
-        return (
-            <Stack className='progress' id='barBack'>
-                <Stack className='basic lineBasic'>
-                    <p>Status</p>
-                    <Stack horizontal className='status'>
-                        <span className={`${EXPERIMENT.status} status-text`}>{EXPERIMENT.status}</span>
-                        {EXPERIMENT.status === 'ERROR' ? (
-                            <div>
-                                <div className={styles.buttonArea} ref={(val): any => (this.menuButtonElement = val)}>
-                                    <IconButton
-                                        iconProps={{ iconName: 'info' }}
-                                        onClick={isCalloutVisible ? this.onDismiss : this.onShow}
-                                    />
-                                </div>
-                                {isCalloutVisible && (
-                                    <Callout
-                                        className={styles.callout}
-                                        ariaLabelledBy={this.labelId}
-                                        ariaDescribedBy={this.descriptionId}
-                                        role='alertdialog'
-                                        gapSpace={0}
-                                        target={this.menuButtonElement}
-                                        onDismiss={this.onDismiss}
-                                        setInitialFocus={true}
-                                    >
-                                        <div className={styles.header}>
-                                            <p className={styles.title} id={this.labelId}>
-                                                Error
-                                            </p>
-                                        </div>
-                                        <div className={styles.inner}>
-                                            <p className={styles.subtext} id={this.descriptionId}>
-                                                {EXPERIMENT.error}
-                                            </p>
-                                            <div className={styles.actions}>
-                                                <Link className={styles.link} onClick={this.isShowDrawer}>
-                                                    Learn about
-                                                </Link>
-                                            </div>
-                                        </div>
-                                    </Callout>
-                                )}
-                            </div>
-                        ) : null}
-                    </Stack>
-                </Stack>
-                <ProgressBar
-                    who='Duration'
-                    percent={percent}
-                    description={execDuration}
-                    bgclass={EXPERIMENT.status}
-                    maxString={`Max duration: ${maxDuration}`}
-                />
-                <ProgressBar
-                    who='Trial numbers'
-                    percent={bar2Percent}
-                    description={bar2.toString()}
-                    bgclass={EXPERIMENT.status}
-                    maxString={`Max trial number: ${maxTrialNum}`}
-                />
-                <Stack className='basic colorOfbasic mess' horizontal>
-                    <StackItem grow={50}>
-                        <p>Best metric</p>
-                        <div>{isNaN(bestAccuracy) ? 'N/A' : bestAccuracy.toFixed(6)}</div>
-                    </StackItem>
-                    <StackItem>
-                        {isShowSucceedInfo && <MessageInfo className='info' typeInfo={typeInfo} info={info} />}
-                    </StackItem>
-                </Stack>
-                <Stack horizontal horizontalAlign='space-between' className='mess'>
-                    <span style={itemStyles} className='basic colorOfbasic'>
-                        <p>Spent</p>
-                        <div>{execDuration}</div>
-                    </span>
-                    <span style={itemStyles} className='basic colorOfbasic'>
-                        <p>Remaining</p>
-                        <div className='time'>{remaining}</div>
-                    </span>
-                    <span style={itemStyles}>
-                        {/* modify concurrency */}
-                        <TooltipHost content={CONCURRENCYTOOLTIP}>
-                            <p className='cursor'>
-                                Concurrency<span className='progress-info'>{infoIcon}</span>
-                            </p>
-                        </TooltipHost>
-                        <ConcurrencyInput value={this.props.concurrency} updateValue={this.editTrialConcurrency} />
-                    </span>
-                    <span style={itemStyles} className='basic colorOfbasic'></span>
-                </Stack>
-                <Stack horizontal horizontalAlign='space-between' className='mess'>
-                    <div style={itemStyles} className='basic colorOfbasic'>
-                        <p>Running</p>
-                        <div>{count.get('RUNNING')}</div>
-                    </div>
-                    <div style={itemStyles} className='basic colorOfbasic'>
-                        <p>Succeeded</p>
-                        <div>{count.get('SUCCEEDED')}</div>
-                    </div>
-                    <div style={itemStyles} className='basic'>
-                        <p>Stopped</p>
-                        <div>{stoppedCount}</div>
-                    </div>
-                    <div style={itemStyles} className='basic'>
-                        <p>Failed</p>
-                        <div>{count.get('FAILED')}</div>
-                    </div>
-                </Stack>
-                {/* learn about click -> default active key is dispatcher. */}
-                {isShowLogDrawer ? <LogDrawer closeDrawer={this.closeDrawer} activeTab='dispatcher' /> : null}
-            </Stack>
-        );
-    }
+		return (
+			<Stack className='progress' id='barBack'>
+				<Stack className='basic lineBasic'>
+					<p>Status</p>
+					<Stack horizontal className='status'>
+						<span className={`${EXPERIMENT.status} status-text`}>{EXPERIMENT.status}</span>
+						{EXPERIMENT.status === 'ERROR' ? (
+							<div>
+								<div className={styles.buttonArea} ref={(val): any => (this.menuButtonElement = val)}>
+									<IconButton
+										iconProps={{ iconName: 'info' }}
+										onClick={isCalloutVisible ? this.onDismiss : this.onShow}
+									/>
+								</div>
+								{isCalloutVisible && (
+									<Callout
+										className={styles.callout}
+										ariaLabelledBy={this.labelId}
+										ariaDescribedBy={this.descriptionId}
+										role='alertdialog'
+										gapSpace={0}
+										target={this.menuButtonElement}
+										onDismiss={this.onDismiss}
+										setInitialFocus={true}
+									>
+										<div className={styles.header}>
+											<p className={styles.title} id={this.labelId}>
+												Error
+											</p>
+										</div>
+										<div className={styles.inner}>
+											<p className={styles.subtext} id={this.descriptionId}>
+												{EXPERIMENT.error}
+											</p>
+											<div className={styles.actions}>
+												<Link className={styles.link} onClick={this.isShowDrawer}>
+													Learn about
+												</Link>
+											</div>
+										</div>
+									</Callout>
+								)}
+							</div>
+						) : null}
+					</Stack>
+				</Stack>
+				<ProgressBar
+					who='Duration'
+					percent={percent}
+					description={execDuration}
+					bgclass={EXPERIMENT.status}
+					maxString={`Max duration: ${maxDuration}`}
+				/>
+				<ProgressBar
+					who='Trial numbers'
+					percent={bar2Percent}
+					description={bar2.toString()}
+					bgclass={EXPERIMENT.status}
+					maxString={`Max trial number: ${maxTrialNum}`}
+				/>
+				<Stack className='basic colorOfbasic mess' horizontal>
+					<StackItem grow={50}>
+						<p>Best metric</p>
+						<div>{isNaN(bestAccuracy) ? 'N/A' : bestAccuracy.toFixed(6)}</div>
+					</StackItem>
+					<StackItem>
+						{isShowSucceedInfo && <MessageInfo className='info' typeInfo={typeInfo} info={info} />}
+					</StackItem>
+				</Stack>
+				<Stack horizontal horizontalAlign='space-between' className='mess'>
+					<span style={itemStyles} className='basic colorOfbasic'>
+						<p>Spent</p>
+						<div>{execDuration}</div>
+					</span>
+					<span style={itemStyles} className='basic colorOfbasic'>
+						<p>Remaining</p>
+						<div className='time'>{remaining}</div>
+					</span>
+					<span style={itemStyles}>
+						{/* modify concurrency */}
+						<TooltipHost content={CONCURRENCYTOOLTIP}>
+							<p className='cursor'>
+								Concurrency<span className='progress-info'>{infoIcon}</span>
+							</p>
+						</TooltipHost>
+						<ConcurrencyInput value={this.props.concurrency} updateValue={this.editTrialConcurrency} />
+					</span>
+					<span style={itemStyles} className='basic colorOfbasic'></span>
+				</Stack>
+				<Stack horizontal horizontalAlign='space-between' className='mess'>
+					<div style={itemStyles} className='basic colorOfbasic'>
+						<p>Running</p>
+						<div>{count.get('RUNNING')}</div>
+					</div>
+					<div style={itemStyles} className='basic colorOfbasic'>
+						<p>Succeeded</p>
+						<div>{count.get('SUCCEEDED')}</div>
+					</div>
+					<div style={itemStyles} className='basic'>
+						<p>Stopped</p>
+						<div>{stoppedCount}</div>
+					</div>
+					<div style={itemStyles} className='basic'>
+						<p>Failed</p>
+						<div>{count.get('FAILED')}</div>
+					</div>
+				</Stack>
+				{/* learn about click -> default active key is dispatcher. */}
+				{isShowLogDrawer ? <LogDrawer closeDrawer={this.closeDrawer} activeTab='dispatcher' /> : null}
+			</Stack>
+		);
+	}
 }
 
 export default Progressed;
diff --git a/src/webui/src/components/overview/ProgressItem.tsx b/src/webui/src/components/overview/ProgressItem.tsx
index b75361f126..2decbbd659 100644
--- a/src/webui/src/components/overview/ProgressItem.tsx
+++ b/src/webui/src/components/overview/ProgressItem.tsx
@@ -2,41 +2,41 @@ import * as React from 'react';
 import { Stack, StackItem, ProgressIndicator } from 'office-ui-fabric-react';
 
 interface ProItemProps {
-    who: string;
-    percent: number;
-    description: string;
-    maxString: string;
-    bgclass: string;
+	who: string;
+	percent: number;
+	description: string;
+	maxString: string;
+	bgclass: string;
 }
 
 class ProgressBar extends React.Component<ProItemProps, {}> {
-    constructor(props: ProItemProps) {
-        super(props);
-    }
+	constructor(props: ProItemProps) {
+		super(props);
+	}
 
-    render(): React.ReactNode {
-        const { who, percent, description, maxString, bgclass } = this.props;
-        return (
-            <div>
-                <Stack horizontal className={`probar ${bgclass}`}>
-                    <div className='name'>{who}</div>
-                    <div className='showProgress' style={{ width: '78%' }}>
-                        <ProgressIndicator barHeight={30} percentComplete={percent} />
-                        <Stack horizontal className='boundary'>
-                            <StackItem grow={30}>0</StackItem>
-                            <StackItem className='right' grow={70}>
-                                {maxString}
-                            </StackItem>
-                        </Stack>
-                    </div>
-                    <div className='description' style={{ width: '22%' }}>
-                        {description}
-                    </div>
-                </Stack>
-                <br />
-            </div>
-        );
-    }
+	render(): React.ReactNode {
+		const { who, percent, description, maxString, bgclass } = this.props;
+		return (
+			<div>
+				<Stack horizontal className={`probar ${bgclass}`}>
+					<div className='name'>{who}</div>
+					<div className='showProgress' style={{ width: '78%' }}>
+						<ProgressIndicator barHeight={30} percentComplete={percent} />
+						<Stack horizontal className='boundary'>
+							<StackItem grow={30}>0</StackItem>
+							<StackItem className='right' grow={70}>
+								{maxString}
+							</StackItem>
+						</Stack>
+					</div>
+					<div className='description' style={{ width: '22%' }}>
+						{description}
+					</div>
+				</Stack>
+				<br />
+			</div>
+		);
+	}
 }
 
 export default ProgressBar;
diff --git a/src/webui/src/components/overview/SearchSpace.tsx b/src/webui/src/components/overview/SearchSpace.tsx
index 9532f8b812..9e853b7cee 100644
--- a/src/webui/src/components/overview/SearchSpace.tsx
+++ b/src/webui/src/components/overview/SearchSpace.tsx
@@ -3,28 +3,28 @@ import MonacoEditor from 'react-monaco-editor';
 import { MONACO } from '../../static/const';
 
 interface SearchspaceProps {
-    searchSpace: object;
+	searchSpace: object;
 }
 
 class SearchSpace extends React.Component<SearchspaceProps, {}> {
-    constructor(props: SearchspaceProps) {
-        super(props);
-    }
+	constructor(props: SearchspaceProps) {
+		super(props);
+	}
 
-    render(): React.ReactNode {
-        const { searchSpace } = this.props;
-        return (
-            <div className='searchSpace'>
-                <MonacoEditor
-                    height='361'
-                    language='json'
-                    theme='vs-light'
-                    value={JSON.stringify(searchSpace, null, 2)}
-                    options={MONACO}
-                />
-            </div>
-        );
-    }
+	render(): React.ReactNode {
+		const { searchSpace } = this.props;
+		return (
+			<div className='searchSpace'>
+				<MonacoEditor
+					height='361'
+					language='json'
+					theme='vs-light'
+					value={JSON.stringify(searchSpace, null, 2)}
+					options={MONACO}
+				/>
+			</div>
+		);
+	}
 }
 
 export default SearchSpace;
diff --git a/src/webui/src/components/overview/SuccessTable.tsx b/src/webui/src/components/overview/SuccessTable.tsx
index e9534a87e6..ea8a83540a 100644
--- a/src/webui/src/components/overview/SuccessTable.tsx
+++ b/src/webui/src/components/overview/SuccessTable.tsx
@@ -9,153 +9,153 @@ import '../../static/style/succTable.scss';
 import '../../static/style/openRow.scss';
 
 interface SuccessTableProps {
-    trialIds: string[];
+	trialIds: string[];
 }
 
 interface SuccessTableState {
-    columns: IColumn[];
-    source: Array<any>;
+	columns: IColumn[];
+	source: Array<any>;
 }
 
 class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> {
-    constructor(props: SuccessTableProps) {
-        super(props);
-        this.state = { columns: this.columns, source: TRIALS.table(this.props.trialIds) };
-    }
+	constructor(props: SuccessTableProps) {
+		super(props);
+		this.state = { columns: this.columns, source: TRIALS.table(this.props.trialIds) };
+	}
 
-    private onRenderRow: IDetailsListProps['onRenderRow'] = props => {
-        if (props) {
-            return <Details detailsProps={props} />;
-        }
-        return null;
-    };
+	private onRenderRow: IDetailsListProps['onRenderRow'] = props => {
+		if (props) {
+			return <Details detailsProps={props} />;
+		}
+		return null;
+	};
 
-    onColumnClick = (ev: React.MouseEvent<HTMLElement>, getColumn: IColumn): void => {
-        const { columns, source } = this.state;
-        const newColumns: IColumn[] = columns.slice();
-        const currColumn: IColumn = newColumns.filter(item => getColumn.key === item.key)[0];
-        newColumns.forEach((newCol: IColumn) => {
-            if (newCol === currColumn) {
-                currColumn.isSortedDescending = !currColumn.isSortedDescending;
-                currColumn.isSorted = true;
-            } else {
-                newCol.isSorted = false;
-                newCol.isSortedDescending = true;
-            }
-        });
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const newItems = this.copyAndSort(source, currColumn.fieldName!, currColumn.isSortedDescending);
-        this.setState({
-            columns: newColumns,
-            source: newItems
-        });
-    };
+	onColumnClick = (ev: React.MouseEvent<HTMLElement>, getColumn: IColumn): void => {
+		const { columns, source } = this.state;
+		const newColumns: IColumn[] = columns.slice();
+		const currColumn: IColumn = newColumns.filter(item => getColumn.key === item.key)[0];
+		newColumns.forEach((newCol: IColumn) => {
+			if (newCol === currColumn) {
+				currColumn.isSortedDescending = !currColumn.isSortedDescending;
+				currColumn.isSorted = true;
+			} else {
+				newCol.isSorted = false;
+				newCol.isSortedDescending = true;
+			}
+		});
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		const newItems = this.copyAndSort(source, currColumn.fieldName!, currColumn.isSortedDescending);
+		this.setState({
+			columns: newColumns,
+			source: newItems
+		});
+	};
 
-    private copyAndSort<T>(items: T[], columnKey: string, isSortedDescending?: boolean): T[] {
-        const key = columnKey as keyof T;
-        return items.slice(0).sort((a: T, b: T) => ((isSortedDescending ? a[key] < b[key] : a[key] > b[key]) ? 1 : -1));
-    }
+	private copyAndSort<T>(items: T[], columnKey: string, isSortedDescending?: boolean): T[] {
+		const key = columnKey as keyof T;
+		return items.slice(0).sort((a: T, b: T) => ((isSortedDescending ? a[key] < b[key] : a[key] > b[key]) ? 1 : -1));
+	}
 
-    tooltipStr = (
-        <div>
-            <p>The experiment is running, please wait for the final metric patiently.</p>
-            <div className='link'>
-                You could also find status of trial job with <span>{DETAILTABS}</span> button.
-            </div>
-        </div>
-    );
+	tooltipStr = (
+		<div>
+			<p>The experiment is running, please wait for the final metric patiently.</p>
+			<div className='link'>
+				You could also find status of trial job with <span>{DETAILTABS}</span> button.
+			</div>
+		</div>
+	);
 
-    columns = [
-        {
-            name: 'Trial No.',
-            key: 'sequenceId',
-            fieldName: 'sequenceId', // required!
-            minWidth: 60,
-            maxWidth: 120,
-            isResizable: true,
-            data: 'number',
-            onColumnClick: this.onColumnClick
-        },
-        {
-            name: 'ID',
-            key: 'id',
-            fieldName: 'id',
-            minWidth: 80,
-            maxWidth: 100,
-            isResizable: true,
-            className: 'tableHead leftTitle',
-            data: 'string',
-            onColumnClick: this.onColumnClick
-        },
-        {
-            name: 'Duration',
-            key: 'duration',
-            minWidth: 100,
-            maxWidth: 210,
-            isResizable: true,
-            fieldName: 'duration',
-            data: 'number',
-            onColumnClick: this.onColumnClick,
-            onRender: (item: any): React.ReactNode => {
-                return (
-                    <div className='durationsty'>
-                        <div>{convertDuration(item.duration)}</div>
-                    </div>
-                );
-            }
-        },
-        {
-            name: 'Status',
-            key: 'status',
-            minWidth: 140,
-            maxWidth: 210,
-            isResizable: true,
-            fieldName: 'status',
-            onRender: (item: any): React.ReactNode => {
-                return <div className={`${item.status} commonStyle`}>{item.status}</div>;
-            }
-        },
-        {
-            name: 'Default metric',
-            key: 'accuracy',
-            fieldName: 'accuracy',
-            minWidth: 120,
-            maxWidth: 360,
-            isResizable: true,
-            data: 'number',
-            onColumnClick: this.onColumnClick,
-            onRender: (item: any): React.ReactNode => {
-                return <DefaultMetric trialId={item.id} />;
-            }
-        }
-    ];
+	columns = [
+		{
+			name: 'Trial No.',
+			key: 'sequenceId',
+			fieldName: 'sequenceId', // required!
+			minWidth: 60,
+			maxWidth: 120,
+			isResizable: true,
+			data: 'number',
+			onColumnClick: this.onColumnClick
+		},
+		{
+			name: 'ID',
+			key: 'id',
+			fieldName: 'id',
+			minWidth: 80,
+			maxWidth: 100,
+			isResizable: true,
+			className: 'tableHead leftTitle',
+			data: 'string',
+			onColumnClick: this.onColumnClick
+		},
+		{
+			name: 'Duration',
+			key: 'duration',
+			minWidth: 100,
+			maxWidth: 210,
+			isResizable: true,
+			fieldName: 'duration',
+			data: 'number',
+			onColumnClick: this.onColumnClick,
+			onRender: (item: any): React.ReactNode => {
+				return (
+					<div className='durationsty'>
+						<div>{convertDuration(item.duration)}</div>
+					</div>
+				);
+			}
+		},
+		{
+			name: 'Status',
+			key: 'status',
+			minWidth: 140,
+			maxWidth: 210,
+			isResizable: true,
+			fieldName: 'status',
+			onRender: (item: any): React.ReactNode => {
+				return <div className={`${item.status} commonStyle`}>{item.status}</div>;
+			}
+		},
+		{
+			name: 'Default metric',
+			key: 'accuracy',
+			fieldName: 'accuracy',
+			minWidth: 120,
+			maxWidth: 360,
+			isResizable: true,
+			data: 'number',
+			onColumnClick: this.onColumnClick,
+			onRender: (item: any): React.ReactNode => {
+				return <DefaultMetric trialId={item.id} />;
+			}
+		}
+	];
 
-    componentDidUpdate(prevProps: SuccessTableProps): void {
-        if (this.props.trialIds !== prevProps.trialIds) {
-            const { trialIds } = this.props;
-            this.setState(() => ({ source: TRIALS.table(trialIds) }));
-        }
-    }
+	componentDidUpdate(prevProps: SuccessTableProps): void {
+		if (this.props.trialIds !== prevProps.trialIds) {
+			const { trialIds } = this.props;
+			this.setState(() => ({ source: TRIALS.table(trialIds) }));
+		}
+	}
 
-    render(): React.ReactNode {
-        const { columns, source } = this.state;
-        const isNoneData = source.length === 0 ? true : false;
+	render(): React.ReactNode {
+		const { columns, source } = this.state;
+		const isNoneData = source.length === 0 ? true : false;
 
-        return (
-            <div id='succTable'>
-                <DetailsList
-                    columns={columns}
-                    items={source}
-                    setKey='set'
-                    compact={true}
-                    onRenderRow={this.onRenderRow}
-                    selectionMode={0} // close selector function
-                    className='succTable'
-                />
-                {isNoneData && <div className='succTable-tooltip'>{this.tooltipStr}</div>}
-            </div>
-        );
-    }
+		return (
+			<div id='succTable'>
+				<DetailsList
+					columns={columns}
+					items={source}
+					setKey='set'
+					compact={true}
+					onRenderRow={this.onRenderRow}
+					selectionMode={0} // close selector function
+					className='succTable'
+				/>
+				{isNoneData && <div className='succTable-tooltip'>{this.tooltipStr}</div>}
+			</div>
+		);
+	}
 }
 
 export default SuccessTable;
diff --git a/src/webui/src/components/overview/Title1.tsx b/src/webui/src/components/overview/Title1.tsx
index d86390e493..f762a0b4c2 100644
--- a/src/webui/src/components/overview/Title1.tsx
+++ b/src/webui/src/components/overview/Title1.tsx
@@ -2,25 +2,25 @@ import * as React from 'react';
 import { Stack } from 'office-ui-fabric-react';
 import '../../static/style/overviewTitle.scss';
 interface Title1Props {
-    text: string;
-    icon?: string;
-    fontColor?: string;
+	text: string;
+	icon?: string;
+	fontColor?: string;
 }
 
 class Title1 extends React.Component<Title1Props, {}> {
-    constructor(props: Title1Props) {
-        super(props);
-    }
+	constructor(props: Title1Props) {
+		super(props);
+	}
 
-    render(): React.ReactNode {
-        const { text, icon, fontColor } = this.props;
-        return (
-            <Stack horizontal className='panelTitle'>
-                <img src={require(`../../static/img/icon/${icon}`)} alt='icon' />
-                <span style={{ color: fontColor }}>{text}</span>
-            </Stack>
-        );
-    }
+	render(): React.ReactNode {
+		const { text, icon, fontColor } = this.props;
+		return (
+			<Stack horizontal className='panelTitle'>
+				<img src={require(`../../static/img/icon/${icon}`)} alt='icon' />
+				<span style={{ color: fontColor }}>{text}</span>
+			</Stack>
+		);
+	}
 }
 
 export default Title1;
diff --git a/src/webui/src/components/overview/TrialProfile.tsx b/src/webui/src/components/overview/TrialProfile.tsx
index 6c49ad4907..bc1eb05a01 100644
--- a/src/webui/src/components/overview/TrialProfile.tsx
+++ b/src/webui/src/components/overview/TrialProfile.tsx
@@ -4,46 +4,46 @@ import { MONACO } from '../../static/const';
 import { EXPERIMENT } from '../../static/datamodel';
 
 interface TrialInfoProps {
-    experimentUpdateBroadcast: number;
-    concurrency: number;
+	experimentUpdateBroadcast: number;
+	concurrency: number;
 }
 
 class TrialInfo extends React.Component<TrialInfoProps, {}> {
-    constructor(props: TrialInfoProps) {
-        super(props);
-    }
+	constructor(props: TrialInfoProps) {
+		super(props);
+	}
 
-    render(): React.ReactNode {
-        const blacklist = [
-            'id',
-            'logDir',
-            'startTime',
-            'endTime',
-            'experimentName',
-            'searchSpace',
-            'trainingServicePlatform'
-        ];
-        const filter = (key: string, val: any): any => {
-            if (key === 'trialConcurrency') {
-                return this.props.concurrency;
-            }
-            return blacklist.includes(key) ? undefined : val;
-        };
-        const profile = JSON.stringify(EXPERIMENT.profile, filter, 2);
+	render(): React.ReactNode {
+		const blacklist = [
+			'id',
+			'logDir',
+			'startTime',
+			'endTime',
+			'experimentName',
+			'searchSpace',
+			'trainingServicePlatform'
+		];
+		const filter = (key: string, val: any): any => {
+			if (key === 'trialConcurrency') {
+				return this.props.concurrency;
+			}
+			return blacklist.includes(key) ? undefined : val;
+		};
+		const profile = JSON.stringify(EXPERIMENT.profile, filter, 2);
 
-        return (
-            <div className='profile'>
-                <MonacoEditor
-                    width='100%'
-                    height='361'
-                    language='json'
-                    theme='vs-light'
-                    value={profile}
-                    options={MONACO}
-                />
-            </div>
-        );
-    }
+		return (
+			<div className='profile'>
+				<MonacoEditor
+					width='100%'
+					height='361'
+					language='json'
+					theme='vs-light'
+					value={profile}
+					options={MONACO}
+				/>
+			</div>
+		);
+	}
 }
 
 export default TrialInfo;
diff --git a/src/webui/src/components/public-child/DefaultMetric.tsx b/src/webui/src/components/public-child/DefaultMetric.tsx
index 388a7f1d18..2012b86c2b 100644
--- a/src/webui/src/components/public-child/DefaultMetric.tsx
+++ b/src/webui/src/components/public-child/DefaultMetric.tsx
@@ -3,18 +3,18 @@ import { TRIALS } from '../../static/datamodel';
 import { formatAccuracy } from '../../static/function';
 
 interface DefaultMetricProps {
-    trialId: string;
+	trialId: string;
 }
 
 class DefaultMetric extends React.Component<DefaultMetricProps, {}> {
-    constructor(props: DefaultMetricProps) {
-        super(props);
-    }
+	constructor(props: DefaultMetricProps) {
+		super(props);
+	}
 
-    render(): React.ReactNode {
-        const accuracy = TRIALS.getTrial(this.props.trialId).accuracy;
-        return <div>{accuracy !== undefined ? formatAccuracy(accuracy) : '--'}</div>;
-    }
+	render(): React.ReactNode {
+		const accuracy = TRIALS.getTrial(this.props.trialId).accuracy;
+		return <div>{accuracy !== undefined ? formatAccuracy(accuracy) : '--'}</div>;
+	}
 }
 
 export default DefaultMetric;
diff --git a/src/webui/src/components/public-child/IntermediateVal.tsx b/src/webui/src/components/public-child/IntermediateVal.tsx
index 1d41b1b41d..cbbb2d5422 100644
--- a/src/webui/src/components/public-child/IntermediateVal.tsx
+++ b/src/webui/src/components/public-child/IntermediateVal.tsx
@@ -2,17 +2,17 @@ import * as React from 'react';
 import { TRIALS } from '../../static/datamodel';
 
 interface IntermediateValProps {
-    trialId: string;
+	trialId: string;
 }
 
 class IntermediateVal extends React.Component<IntermediateValProps, {}> {
-    constructor(props: IntermediateValProps) {
-        super(props);
-    }
+	constructor(props: IntermediateValProps) {
+		super(props);
+	}
 
-    render(): React.ReactNode {
-        return <div>{TRIALS.getTrial(this.props.trialId).formatLatestAccuracy()}</div>;
-    }
+	render(): React.ReactNode {
+		return <div>{TRIALS.getTrial(this.props.trialId).formatLatestAccuracy()}</div>;
+	}
 }
 
 export default IntermediateVal;
diff --git a/src/webui/src/components/public-child/LogPathChild.tsx b/src/webui/src/components/public-child/LogPathChild.tsx
index a73fabc6de..62b0cbda0e 100644
--- a/src/webui/src/components/public-child/LogPathChild.tsx
+++ b/src/webui/src/components/public-child/LogPathChild.tsx
@@ -1,32 +1,32 @@
 import * as React from 'react';
 
 interface LogpathChildProps {
-    eachLogpath: string;
-    logName: string;
+	eachLogpath: string;
+	logName: string;
 }
 
 class LogPathChild extends React.Component<LogpathChildProps, {}> {
-    constructor(props: LogpathChildProps) {
-        super(props);
-    }
+	constructor(props: LogpathChildProps) {
+		super(props);
+	}
 
-    render(): React.ReactNode {
-        const { eachLogpath, logName } = this.props;
-        const isLink = /^http/gi.test(eachLogpath);
+	render(): React.ReactNode {
+		const { eachLogpath, logName } = this.props;
+		const isLink = /^http/gi.test(eachLogpath);
 
-        return (
-            <div className='logpath'>
-                <span className='logName'>{logName}</span>
-                {isLink ? (
-                    <a className='logContent logHref' rel='noopener noreferrer' href={eachLogpath} target='_blank'>
-                        {eachLogpath}
-                    </a>
-                ) : (
-                    <span className='logContent'>{eachLogpath}</span>
-                )}
-            </div>
-        );
-    }
+		return (
+			<div className='logpath'>
+				<span className='logName'>{logName}</span>
+				{isLink ? (
+					<a className='logContent logHref' rel='noopener noreferrer' href={eachLogpath} target='_blank'>
+						{eachLogpath}
+					</a>
+				) : (
+					<span className='logContent'>{eachLogpath}</span>
+				)}
+			</div>
+		);
+	}
 }
 
 export default LogPathChild;
diff --git a/src/webui/src/components/public-child/MonacoEditor.tsx b/src/webui/src/components/public-child/MonacoEditor.tsx
index 8f0f82bcfc..31d2311193 100644
--- a/src/webui/src/components/public-child/MonacoEditor.tsx
+++ b/src/webui/src/components/public-child/MonacoEditor.tsx
@@ -4,51 +4,51 @@ import { DRAWEROPTION } from '../../static/const';
 import MonacoEditor from 'react-monaco-editor';
 
 interface MonacoEditorProps {
-    content: string;
-    loading: boolean;
-    height: number;
+	content: string;
+	loading: boolean;
+	height: number;
 }
 
 class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
-    public _isMonacoMount!: boolean;
+	public _isMonacoMount!: boolean;
 
-    constructor(props: MonacoEditorProps) {
-        super(props);
-    }
+	constructor(props: MonacoEditorProps) {
+		super(props);
+	}
 
-    componentDidMount(): void {
-        this._isMonacoMount = true;
-    }
+	componentDidMount(): void {
+		this._isMonacoMount = true;
+	}
 
-    componentWillUnmount(): void {
-        this._isMonacoMount = false;
-    }
+	componentWillUnmount(): void {
+		this._isMonacoMount = false;
+	}
 
-    render(): React.ReactNode {
-        const { content, loading, height } = this.props;
-        return (
-            <div className='just-for-log'>
-                {loading ? (
-                    <Spinner
-                        label='Wait, wait...'
-                        ariaLive='assertive'
-                        labelPosition='right'
-                        styles={{ root: { width: '100%', height: height } }}
-                    >
-                        <MonacoEditor
-                            width='100%'
-                            height={height}
-                            language='json'
-                            value={content}
-                            options={DRAWEROPTION}
-                        />
-                    </Spinner>
-                ) : (
-                    <MonacoEditor width='100%' height={height} language='json' value={content} options={DRAWEROPTION} />
-                )}
-            </div>
-        );
-    }
+	render(): React.ReactNode {
+		const { content, loading, height } = this.props;
+		return (
+			<div className='just-for-log'>
+				{loading ? (
+					<Spinner
+						label='Wait, wait...'
+						ariaLive='assertive'
+						labelPosition='right'
+						styles={{ root: { width: '100%', height: height } }}
+					>
+						<MonacoEditor
+							width='100%'
+							height={height}
+							language='json'
+							value={content}
+							options={DRAWEROPTION}
+						/>
+					</Spinner>
+				) : (
+					<MonacoEditor width='100%' height={height} language='json' value={content} options={DRAWEROPTION} />
+				)}
+			</div>
+		);
+	}
 }
 
 export default MonacoHTML;
diff --git a/src/webui/src/components/public-child/OpenRow.tsx b/src/webui/src/components/public-child/OpenRow.tsx
index d1e6d11667..86cd90dd5d 100644
--- a/src/webui/src/components/public-child/OpenRow.tsx
+++ b/src/webui/src/components/public-child/OpenRow.tsx
@@ -11,103 +11,103 @@ import '../../static/style/overview.scss';
 import '../../static/style/copyParameter.scss';
 
 interface OpenRowProps {
-    trialId: string;
+	trialId: string;
 }
 
 interface OpenRowState {
-    typeInfo: string;
-    info: string;
-    isHidenInfo: boolean;
+	typeInfo: string;
+	info: string;
+	isHidenInfo: boolean;
 }
 
 class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
-    constructor(props: OpenRowProps) {
-        super(props);
-        this.state = {
-            typeInfo: '',
-            info: '',
-            isHidenInfo: true
-        };
-    }
+	constructor(props: OpenRowProps) {
+		super(props);
+		this.state = {
+			typeInfo: '',
+			info: '',
+			isHidenInfo: true
+		};
+	}
 
-    hideMessageInfo = (): void => {
-        this.setState(() => ({ isHidenInfo: true }));
-    };
+	hideMessageInfo = (): void => {
+		this.setState(() => ({ isHidenInfo: true }));
+	};
 
-    /**
-     * info: message content
-     * typeInfo: message type: success | error...
-     * continuousTime: show time, 2000ms
-     */
-    getCopyStatus = (info: string, typeInfo: string): void => {
-        this.setState(() => ({ info, typeInfo, isHidenInfo: false }));
-        setTimeout(this.hideMessageInfo, 2000);
-    };
+	/**
+	 * info: message content
+	 * typeInfo: message type: success | error...
+	 * continuousTime: show time, 2000ms
+	 */
+	getCopyStatus = (info: string, typeInfo: string): void => {
+		this.setState(() => ({ info, typeInfo, isHidenInfo: false }));
+		setTimeout(this.hideMessageInfo, 2000);
+	};
 
-    copyParams = (trial: Trial): void => {
-        // get copy parameters
-        const params = JSON.stringify(trial.description.parameters, null, 4);
-        if (copy.default(params)) {
-            this.getCopyStatus('Success copy parameters to clipboard in form of python dict !', 'success');
-        } else {
-            this.getCopyStatus('Failed !', 'error');
-        }
-    };
+	copyParams = (trial: Trial): void => {
+		// get copy parameters
+		const params = JSON.stringify(trial.description.parameters, null, 4);
+		if (copy.default(params)) {
+			this.getCopyStatus('Success copy parameters to clipboard in form of python dict !', 'success');
+		} else {
+			this.getCopyStatus('Failed !', 'error');
+		}
+	};
 
-    render(): React.ReactNode {
-        const { isHidenInfo, typeInfo, info } = this.state;
-        const trialId = this.props.trialId;
-        const trial = TRIALS.getTrial(trialId);
-        const logPathRow = trial.info.logPath || "This trial's log path is not available.";
-        return (
-            <Stack className='openRow'>
-                <Stack className='openRowContent'>
-                    <Pivot>
-                        <PivotItem headerText='Parameters' key='1' itemIcon='TestParameter'>
-                            {trial.info.hyperParameters !== undefined ? (
-                                <Stack id='description'>
-                                    <Stack className='bgHyper'>
-                                        <JSONTree
-                                            hideRoot={true}
-                                            shouldExpandNode={(): boolean => true} // default expandNode
-                                            getItemString={(): null => null} // remove the {} items
-                                            data={trial.description.parameters}
-                                        />
-                                    </Stack>
-                                    <Stack horizontal className='copy'>
-                                        <PrimaryButton
-                                            onClick={this.copyParams.bind(this, trial)}
-                                            text='Copy as json'
-                                            styles={{ root: { width: 128, marginRight: 10 } }}
-                                        />
-                                        {/* copy success | failed message info */}
-                                        {!isHidenInfo && <MessageInfo typeInfo={typeInfo} info={info} />}
-                                    </Stack>
-                                </Stack>
-                            ) : (
-                                <Stack className='logpath'>
-                                    <span className='logName'>Error: </span>
-                                    <span className='error'>{`This trial's parameters are not available.'`}</span>
-                                </Stack>
-                            )}
-                        </PivotItem>
-                        <PivotItem headerText='Log' key='2' itemIcon='M365InvoicingLogo'>
-                            {// FIXME: this should not be handled in web UI side
-                            EXPERIMENT.trainingServicePlatform !== 'local' ? (
-                                <PaiTrialLog
-                                    logStr={logPathRow}
-                                    id={trialId}
-                                    logCollection={EXPERIMENT.logCollectionEnabled}
-                                />
-                            ) : (
-                                <TrialLog logStr={logPathRow} id={trialId} />
-                            )}
-                        </PivotItem>
-                    </Pivot>
-                </Stack>
-            </Stack>
-        );
-    }
+	render(): React.ReactNode {
+		const { isHidenInfo, typeInfo, info } = this.state;
+		const trialId = this.props.trialId;
+		const trial = TRIALS.getTrial(trialId);
+		const logPathRow = trial.info.logPath || "This trial's log path is not available.";
+		return (
+			<Stack className='openRow'>
+				<Stack className='openRowContent'>
+					<Pivot>
+						<PivotItem headerText='Parameters' key='1' itemIcon='TestParameter'>
+							{trial.info.hyperParameters !== undefined ? (
+								<Stack id='description'>
+									<Stack className='bgHyper'>
+										<JSONTree
+											hideRoot={true}
+											shouldExpandNode={(): boolean => true} // default expandNode
+											getItemString={(): null => null} // remove the {} items
+											data={trial.description.parameters}
+										/>
+									</Stack>
+									<Stack horizontal className='copy'>
+										<PrimaryButton
+											onClick={this.copyParams.bind(this, trial)}
+											text='Copy as json'
+											styles={{ root: { width: 128, marginRight: 10 } }}
+										/>
+										{/* copy success | failed message info */}
+										{!isHidenInfo && <MessageInfo typeInfo={typeInfo} info={info} />}
+									</Stack>
+								</Stack>
+							) : (
+								<Stack className='logpath'>
+									<span className='logName'>Error: </span>
+									<span className='error'>{`This trial's parameters are not available.'`}</span>
+								</Stack>
+							)}
+						</PivotItem>
+						<PivotItem headerText='Log' key='2' itemIcon='M365InvoicingLogo'>
+							{// FIXME: this should not be handled in web UI side
+							EXPERIMENT.trainingServicePlatform !== 'local' ? (
+								<PaiTrialLog
+									logStr={logPathRow}
+									id={trialId}
+									logCollection={EXPERIMENT.logCollectionEnabled}
+								/>
+							) : (
+								<TrialLog logStr={logPathRow} id={trialId} />
+							)}
+						</PivotItem>
+					</Pivot>
+				</Stack>
+			</Stack>
+		);
+	}
 }
 
 export default OpenRow;
diff --git a/src/webui/src/components/public-child/PaiTrialChild.tsx b/src/webui/src/components/public-child/PaiTrialChild.tsx
index e907952738..c582691b9b 100644
--- a/src/webui/src/components/public-child/PaiTrialChild.tsx
+++ b/src/webui/src/components/public-child/PaiTrialChild.tsx
@@ -2,41 +2,41 @@ import * as React from 'react';
 import { DOWNLOAD_IP } from '../../static/const';
 
 interface PaiTrialChildProps {
-    logString: string;
-    id: string;
-    logCollect: boolean;
+	logString: string;
+	id: string;
+	logCollect: boolean;
 }
 
 class PaiTrialChild extends React.Component<PaiTrialChildProps, {}> {
-    constructor(props: PaiTrialChildProps) {
-        super(props);
-    }
+	constructor(props: PaiTrialChildProps) {
+		super(props);
+	}
 
-    render(): React.ReactNode {
-        const { logString, id, logCollect } = this.props;
-        return (
-            <div>
-                {logString === '' ? (
-                    <div />
-                ) : (
-                    <div>
-                        {logCollect ? (
-                            <a
-                                target='_blank'
-                                rel='noopener noreferrer'
-                                href={`${DOWNLOAD_IP}/trial_${id}.log`}
-                                style={{ marginRight: 10 }}
-                            >
-                                trial stdout
-                            </a>
-                        ) : (
-                            <span>trial stdout: {logString}</span>
-                        )}
-                    </div>
-                )}
-            </div>
-        );
-    }
+	render(): React.ReactNode {
+		const { logString, id, logCollect } = this.props;
+		return (
+			<div>
+				{logString === '' ? (
+					<div />
+				) : (
+					<div>
+						{logCollect ? (
+							<a
+								target='_blank'
+								rel='noopener noreferrer'
+								href={`${DOWNLOAD_IP}/trial_${id}.log`}
+								style={{ marginRight: 10 }}
+							>
+								trial stdout
+							</a>
+						) : (
+							<span>trial stdout: {logString}</span>
+						)}
+					</div>
+				)}
+			</div>
+		);
+	}
 }
 
 export default PaiTrialChild;
diff --git a/src/webui/src/components/public-child/PaiTrialLog.tsx b/src/webui/src/components/public-child/PaiTrialLog.tsx
index e67853433e..a4f13a2f6d 100644
--- a/src/webui/src/components/public-child/PaiTrialLog.tsx
+++ b/src/webui/src/components/public-child/PaiTrialLog.tsx
@@ -4,52 +4,52 @@ import PaiTrialChild from './PaiTrialChild';
 import LogPathChild from './LogPathChild';
 
 interface PaitrialLogProps {
-    logStr: string;
-    id: string;
-    logCollection: boolean;
+	logStr: string;
+	id: string;
+	logCollection: boolean;
 }
 
 class PaitrialLog extends React.Component<PaitrialLogProps, {}> {
-    constructor(props: PaitrialLogProps) {
-        super(props);
-    }
+	constructor(props: PaitrialLogProps) {
+		super(props);
+	}
 
-    render(): React.ReactNode {
-        const { logStr, id, logCollection } = this.props;
-        const isTwopath = logStr.indexOf(',') !== -1 ? true : false;
-        return (
-            <div>
-                <div>
-                    {isTwopath ? (
-                        <div>
-                            {logCollection ? (
-                                <div>
-                                    <a
-                                        target='_blank'
-                                        rel='noopener noreferrer'
-                                        href={`${DOWNLOAD_IP}/trial_${id}.log`}
-                                        style={{ marginRight: 10 }}
-                                    >
-                                        Trial stdout
-                                    </a>
-                                    <a target='_blank' rel='noopener noreferrer' href={logStr.split(',')[1]}>
-                                        hdfsLog
-                                    </a>
-                                </div>
-                            ) : (
-                                <div>
-                                    <LogPathChild eachLogpath={logStr.split(',')[0]} logName='Trial stdout:' />
-                                    <LogPathChild eachLogpath={logStr.split(',')[1]} logName='Log on HDFS:' />
-                                </div>
-                            )}
-                        </div>
-                    ) : (
-                        <PaiTrialChild logString={logStr} id={id} logCollect={logCollection} />
-                    )}
-                </div>
-            </div>
-        );
-    }
+	render(): React.ReactNode {
+		const { logStr, id, logCollection } = this.props;
+		const isTwopath = logStr.indexOf(',') !== -1 ? true : false;
+		return (
+			<div>
+				<div>
+					{isTwopath ? (
+						<div>
+							{logCollection ? (
+								<div>
+									<a
+										target='_blank'
+										rel='noopener noreferrer'
+										href={`${DOWNLOAD_IP}/trial_${id}.log`}
+										style={{ marginRight: 10 }}
+									>
+										Trial stdout
+									</a>
+									<a target='_blank' rel='noopener noreferrer' href={logStr.split(',')[1]}>
+										hdfsLog
+									</a>
+								</div>
+							) : (
+								<div>
+									<LogPathChild eachLogpath={logStr.split(',')[0]} logName='Trial stdout:' />
+									<LogPathChild eachLogpath={logStr.split(',')[1]} logName='Log on HDFS:' />
+								</div>
+							)}
+						</div>
+					) : (
+						<PaiTrialChild logString={logStr} id={id} logCollect={logCollection} />
+					)}
+				</div>
+			</div>
+		);
+	}
 }
 
 export default PaitrialLog;
diff --git a/src/webui/src/components/public-child/TrialLog.tsx b/src/webui/src/components/public-child/TrialLog.tsx
index 126ab8711b..e6179b3e50 100644
--- a/src/webui/src/components/public-child/TrialLog.tsx
+++ b/src/webui/src/components/public-child/TrialLog.tsx
@@ -2,24 +2,24 @@ import * as React from 'react';
 import LogPathChild from './LogPathChild';
 
 interface TrialLogProps {
-    logStr: string;
-    id: string;
+	logStr: string;
+	id: string;
 }
 
 class TrialLog extends React.Component<TrialLogProps, {}> {
-    constructor(props: TrialLogProps) {
-        super(props);
-    }
+	constructor(props: TrialLogProps) {
+		super(props);
+	}
 
-    render(): React.ReactNode {
-        const { logStr } = this.props;
+	render(): React.ReactNode {
+		const { logStr } = this.props;
 
-        return (
-            <div>
-                <LogPathChild eachLogpath={logStr} logName='Log path:' />
-            </div>
-        );
-    }
+		return (
+			<div>
+				<LogPathChild eachLogpath={logStr} logName='Log path:' />
+			</div>
+		);
+	}
 }
 
 export default TrialLog;
diff --git a/src/webui/src/components/stateless-component/NNItabs.tsx b/src/webui/src/components/stateless-component/NNItabs.tsx
index 809729bf21..eb1d15c381 100644
--- a/src/webui/src/components/stateless-component/NNItabs.tsx
+++ b/src/webui/src/components/stateless-component/NNItabs.tsx
@@ -2,21 +2,21 @@ import * as React from 'react';
 import { Link } from 'react-router';
 
 const OVERVIEWTABS = (
-    <Link to={'/oview'} activeClassName='high-light' className='common-tabs'>
-        Overview
-    </Link>
+	<Link to={'/oview'} activeClassName='high-light' className='common-tabs'>
+		Overview
+	</Link>
 );
 
 const DETAILTABS = (
-    <Link to={'/detail'} activeClassName='high-light' className='common-tabs'>
-        Trials detail
-    </Link>
+	<Link to={'/detail'} activeClassName='high-light' className='common-tabs'>
+		Trials detail
+	</Link>
 );
 
 const NNILOGO = (
-    <Link to={'/oview'}>
-        <img src={require('../../static/img/logo2.png')} alt='NNI logo' style={{ height: 40 }} />
-    </Link>
+	<Link to={'/oview'}>
+		<img src={require('../../static/img/logo2.png')} alt='NNI logo' style={{ height: 40 }} />
+	</Link>
 );
 
 export { OVERVIEWTABS, DETAILTABS, NNILOGO };
diff --git a/src/webui/src/components/trial-detail/DefaultMetricPoint.tsx b/src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
index 02a28d616f..16b48836a4 100644
--- a/src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
+++ b/src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
@@ -9,181 +9,181 @@ import 'echarts/lib/component/tooltip';
 import 'echarts/lib/component/title';
 
 const EmptyGraph = {
-    grid: {
-        left: '8%'
-    },
-    xAxis: {
-        name: 'Trial',
-        type: 'category'
-    },
-    yAxis: {
-        name: 'Default metric',
-        type: 'value'
-    }
+	grid: {
+		left: '8%'
+	},
+	xAxis: {
+		name: 'Trial',
+		type: 'category'
+	},
+	yAxis: {
+		name: 'Default metric',
+		type: 'value'
+	}
 };
 
 interface DefaultPointProps {
-    trialIds: string[];
-    visible: boolean;
-    trialsUpdateBroadcast: number;
+	trialIds: string[];
+	visible: boolean;
+	trialsUpdateBroadcast: number;
 }
 
 interface DefaultPointState {
-    bestCurveEnabled?: boolean | undefined;
-    startY: number; // dataZoomY
-    endY: number;
+	bestCurveEnabled?: boolean | undefined;
+	startY: number; // dataZoomY
+	endY: number;
 }
 
 class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState> {
-    constructor(props: DefaultPointProps) {
-        super(props);
-        this.state = {
-            bestCurveEnabled: false,
-            startY: 0, // dataZoomY
-            endY: 100
-        };
-    }
-
-    loadDefault = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
-        this.setState({ bestCurveEnabled: checked });
-    };
-
-    shouldComponentUpdate(nextProps: DefaultPointProps): boolean {
-        return nextProps.visible;
-    }
-
-    metricDataZoom = (e: EventMap): void => {
-        if (e.batch !== undefined) {
-            this.setState(() => ({
-                startY: e.batch[0].start !== null ? e.batch[0].start : 0,
-                endY: e.batch[0].end !== null ? e.batch[0].end : 100
-            }));
-        }
-    };
-
-    generateGraphConfig(maxSequenceId: number): any {
-        const { startY, endY } = this.state;
-        return {
-            grid: {
-                left: '8%'
-            },
-            tooltip: {
-                trigger: 'item',
-                enterable: true,
-                position: (point: number[], data: TooltipForAccuracy): number[] => [
-                    data.data[0] < maxSequenceId ? point[0] : point[0] - 300,
-                    80
-                ],
-                formatter: (data: TooltipForAccuracy): React.ReactNode =>
-                    '<div class="tooldetailAccuracy">' +
-                    '<div>Trial No.: ' +
-                    data.data[0] +
-                    '</div>' +
-                    '<div>Default metric: ' +
-                    data.data[1] +
-                    '</div>' +
-                    '<div>Parameters: <pre>' +
-                    JSON.stringify(data.data[2], null, 4) +
-                    '</pre></div>' +
-                    '</div>'
-            },
-            dataZoom: [
-                {
-                    id: 'dataZoomY',
-                    type: 'inside',
-                    yAxisIndex: [0],
-                    filterMode: 'empty',
-                    start: startY,
-                    end: endY
-                }
-            ],
-            xAxis: {
-                name: 'Trial',
-                type: 'category'
-            },
-            yAxis: {
-                name: 'Default metric',
-                type: 'value',
-                scale: true
-            },
-            series: undefined
-        };
-    }
-
-    generateScatterSeries(trials: Trial[]): any {
-        const data = trials.map(trial => [trial.sequenceId, trial.accuracy, trial.description.parameters]);
-        return {
-            symbolSize: 6,
-            type: 'scatter',
-            data
-        };
-    }
-
-    generateBestCurveSeries(trials: Trial[]): any {
-        let best = trials[0];
-        const data = [[best.sequenceId, best.accuracy, best.description.parameters]];
-
-        for (let i = 1; i < trials.length; i++) {
-            const trial = trials[i];
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            const delta = trial.accuracy! - best.accuracy!;
-            const better = EXPERIMENT.optimizeMode === 'minimize' ? delta < 0 : delta > 0;
-            if (better) {
-                data.push([trial.sequenceId, trial.accuracy, trial.description.parameters]);
-                best = trial;
-            } else {
-                data.push([trial.sequenceId, best.accuracy, trial.description.parameters]);
-            }
-        }
-
-        return {
-            type: 'line',
-            lineStyle: { color: '#FF6600' },
-            data
-        };
-    }
-
-    render(): React.ReactNode {
-        const graph = this.generateGraph();
-        const accNodata = graph === EmptyGraph ? 'No data' : '';
-        const onEvents = { dataZoom: this.metricDataZoom };
-
-        return (
-            <div>
-                <Stack horizontalAlign='end' className='default-metric'>
-                    <Toggle label='Optimization curve' inlineLabel onChange={this.loadDefault} />
-                </Stack>
-                <div className='default-metric-graph'>
-                    <ReactEcharts
-                        option={graph}
-                        style={{
-                            width: '100%',
-                            height: 402,
-                            margin: '0 auto'
-                        }}
-                        theme='my_theme'
-                        notMerge={true} // update now
-                        onEvents={onEvents}
-                    />
-                    <div className='default-metric-noData'>{accNodata}</div>
-                </div>
-            </div>
-        );
-    }
-
-    private generateGraph(): any {
-        const trials = TRIALS.getTrials(this.props.trialIds).filter(trial => trial.sortable);
-        if (trials.length === 0) {
-            return EmptyGraph;
-        }
-        const graph = this.generateGraphConfig(trials[trials.length - 1].sequenceId);
-        if (this.state.bestCurveEnabled) {
-            (graph as any).series = [this.generateBestCurveSeries(trials), this.generateScatterSeries(trials)];
-        } else {
-            (graph as any).series = [this.generateScatterSeries(trials)];
-        }
-        return graph;
-    }
+	constructor(props: DefaultPointProps) {
+		super(props);
+		this.state = {
+			bestCurveEnabled: false,
+			startY: 0, // dataZoomY
+			endY: 100
+		};
+	}
+
+	loadDefault = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
+		this.setState({ bestCurveEnabled: checked });
+	};
+
+	shouldComponentUpdate(nextProps: DefaultPointProps): boolean {
+		return nextProps.visible;
+	}
+
+	metricDataZoom = (e: EventMap): void => {
+		if (e.batch !== undefined) {
+			this.setState(() => ({
+				startY: e.batch[0].start !== null ? e.batch[0].start : 0,
+				endY: e.batch[0].end !== null ? e.batch[0].end : 100
+			}));
+		}
+	};
+
+	generateGraphConfig(maxSequenceId: number): any {
+		const { startY, endY } = this.state;
+		return {
+			grid: {
+				left: '8%'
+			},
+			tooltip: {
+				trigger: 'item',
+				enterable: true,
+				position: (point: number[], data: TooltipForAccuracy): number[] => [
+					data.data[0] < maxSequenceId ? point[0] : point[0] - 300,
+					80
+				],
+				formatter: (data: TooltipForAccuracy): React.ReactNode =>
+					'<div class="tooldetailAccuracy">' +
+					'<div>Trial No.: ' +
+					data.data[0] +
+					'</div>' +
+					'<div>Default metric: ' +
+					data.data[1] +
+					'</div>' +
+					'<div>Parameters: <pre>' +
+					JSON.stringify(data.data[2], null, 4) +
+					'</pre></div>' +
+					'</div>'
+			},
+			dataZoom: [
+				{
+					id: 'dataZoomY',
+					type: 'inside',
+					yAxisIndex: [0],
+					filterMode: 'empty',
+					start: startY,
+					end: endY
+				}
+			],
+			xAxis: {
+				name: 'Trial',
+				type: 'category'
+			},
+			yAxis: {
+				name: 'Default metric',
+				type: 'value',
+				scale: true
+			},
+			series: undefined
+		};
+	}
+
+	generateScatterSeries(trials: Trial[]): any {
+		const data = trials.map(trial => [trial.sequenceId, trial.accuracy, trial.description.parameters]);
+		return {
+			symbolSize: 6,
+			type: 'scatter',
+			data
+		};
+	}
+
+	generateBestCurveSeries(trials: Trial[]): any {
+		let best = trials[0];
+		const data = [[best.sequenceId, best.accuracy, best.description.parameters]];
+
+		for (let i = 1; i < trials.length; i++) {
+			const trial = trials[i];
+			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+			const delta = trial.accuracy! - best.accuracy!;
+			const better = EXPERIMENT.optimizeMode === 'minimize' ? delta < 0 : delta > 0;
+			if (better) {
+				data.push([trial.sequenceId, trial.accuracy, trial.description.parameters]);
+				best = trial;
+			} else {
+				data.push([trial.sequenceId, best.accuracy, trial.description.parameters]);
+			}
+		}
+
+		return {
+			type: 'line',
+			lineStyle: { color: '#FF6600' },
+			data
+		};
+	}
+
+	render(): React.ReactNode {
+		const graph = this.generateGraph();
+		const accNodata = graph === EmptyGraph ? 'No data' : '';
+		const onEvents = { dataZoom: this.metricDataZoom };
+
+		return (
+			<div>
+				<Stack horizontalAlign='end' className='default-metric'>
+					<Toggle label='Optimization curve' inlineLabel onChange={this.loadDefault} />
+				</Stack>
+				<div className='default-metric-graph'>
+					<ReactEcharts
+						option={graph}
+						style={{
+							width: '100%',
+							height: 402,
+							margin: '0 auto'
+						}}
+						theme='my_theme'
+						notMerge={true} // update now
+						onEvents={onEvents}
+					/>
+					<div className='default-metric-noData'>{accNodata}</div>
+				</div>
+			</div>
+		);
+	}
+
+	private generateGraph(): any {
+		const trials = TRIALS.getTrials(this.props.trialIds).filter(trial => trial.sortable);
+		if (trials.length === 0) {
+			return EmptyGraph;
+		}
+		const graph = this.generateGraphConfig(trials[trials.length - 1].sequenceId);
+		if (this.state.bestCurveEnabled) {
+			(graph as any).series = [this.generateBestCurveSeries(trials), this.generateScatterSeries(trials)];
+		} else {
+			(graph as any).series = [this.generateScatterSeries(trials)];
+		}
+		return graph;
+	}
 }
 
 export default DefaultPoint;
diff --git a/src/webui/src/components/trial-detail/Duration.tsx b/src/webui/src/components/trial-detail/Duration.tsx
index d4e16f665a..3b838bd5f3 100644
--- a/src/webui/src/components/trial-detail/Duration.tsx
+++ b/src/webui/src/components/trial-detail/Duration.tsx
@@ -7,206 +7,206 @@ import 'echarts/lib/component/tooltip';
 import 'echarts/lib/component/title';
 
 interface Runtrial {
-    trialId: string[];
-    trialTime: number[];
+	trialId: string[];
+	trialTime: number[];
 }
 
 interface DurationProps {
-    source: Array<TableObj>;
-    whichChart: string;
+	source: Array<TableObj>;
+	whichChart: string;
 }
 
 interface DurationState {
-    startDuration: number; // for record data zoom
-    endDuration: number;
-    durationSource: {};
+	startDuration: number; // for record data zoom
+	endDuration: number;
+	durationSource: {};
 }
 
 class Duration extends React.Component<DurationProps, DurationState> {
-    constructor(props: DurationProps) {
-        super(props);
-        this.state = {
-            startDuration: 0, // for record data zoom
-            endDuration: 100,
-            durationSource: this.initDuration(this.props.source)
-        };
-    }
+	constructor(props: DurationProps) {
+		super(props);
+		this.state = {
+			startDuration: 0, // for record data zoom
+			endDuration: 100,
+			durationSource: this.initDuration(this.props.source)
+		};
+	}
 
-    initDuration = (source: Array<TableObj>): any => {
-        const trialId: number[] = [];
-        const trialTime: number[] = [];
-        const trialJobs = source.filter(filterDuration);
+	initDuration = (source: Array<TableObj>): any => {
+		const trialId: number[] = [];
+		const trialTime: number[] = [];
+		const trialJobs = source.filter(filterDuration);
 
-        trialJobs.forEach(item => {
-            trialId.push(item.sequenceId);
-            trialTime.push(item.duration);
-        });
-        return {
-            tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                    type: 'shadow'
-                },
-                formatter: (data: any): React.ReactNode =>
-                    '<div>' +
-                    '<div>Trial No.: ' +
-                    data[0].dataIndex +
-                    '</div>' +
-                    '<div>Duration: ' +
-                    convertDuration(data[0].data) +
-                    '</div>' +
-                    '</div>'
-            },
-            grid: {
-                bottom: '3%',
-                containLabel: true,
-                left: '1%',
-                right: '5%'
-            },
-            dataZoom: [
-                {
-                    id: 'dataZoomY',
-                    type: 'inside',
-                    yAxisIndex: [0],
-                    filterMode: 'empty',
-                    start: 0,
-                    end: 100
-                }
-            ],
-            xAxis: {
-                name: 'Time/s',
-                type: 'value'
-            },
-            yAxis: {
-                name: 'Trial No.',
-                type: 'category',
-                data: trialId,
-                nameTextStyle: {
-                    padding: [0, 0, 0, 30]
-                }
-            },
-            series: [
-                {
-                    type: 'bar',
-                    data: trialTime
-                }
-            ]
-        };
-    };
+		trialJobs.forEach(item => {
+			trialId.push(item.sequenceId);
+			trialTime.push(item.duration);
+		});
+		return {
+			tooltip: {
+				trigger: 'axis',
+				axisPointer: {
+					type: 'shadow'
+				},
+				formatter: (data: any): React.ReactNode =>
+					'<div>' +
+					'<div>Trial No.: ' +
+					data[0].dataIndex +
+					'</div>' +
+					'<div>Duration: ' +
+					convertDuration(data[0].data) +
+					'</div>' +
+					'</div>'
+			},
+			grid: {
+				bottom: '3%',
+				containLabel: true,
+				left: '1%',
+				right: '5%'
+			},
+			dataZoom: [
+				{
+					id: 'dataZoomY',
+					type: 'inside',
+					yAxisIndex: [0],
+					filterMode: 'empty',
+					start: 0,
+					end: 100
+				}
+			],
+			xAxis: {
+				name: 'Time/s',
+				type: 'value'
+			},
+			yAxis: {
+				name: 'Trial No.',
+				type: 'category',
+				data: trialId,
+				nameTextStyle: {
+					padding: [0, 0, 0, 30]
+				}
+			},
+			series: [
+				{
+					type: 'bar',
+					data: trialTime
+				}
+			]
+		};
+	};
 
-    getOption = (dataObj: Runtrial): any => {
-        const { startDuration, endDuration } = this.state;
-        return {
-            tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                    type: 'shadow'
-                },
-                formatter: (data: any): React.ReactNode =>
-                    '<div>' +
-                    '<div>Trial No.: ' +
-                    data[0].dataIndex +
-                    '</div>' +
-                    '<div>Duration: ' +
-                    convertDuration(data[0].data) +
-                    '</div>' +
-                    '</div>'
-            },
-            grid: {
-                bottom: '3%',
-                containLabel: true,
-                left: '1%',
-                right: '5%'
-            },
-            dataZoom: [
-                {
-                    id: 'dataZoomY',
-                    type: 'inside',
-                    yAxisIndex: [0],
-                    filterMode: 'empty',
-                    start: startDuration,
-                    end: endDuration
-                }
-            ],
-            xAxis: {
-                name: 'Time',
-                type: 'value'
-            },
-            yAxis: {
-                name: 'Trial',
-                type: 'category',
-                data: dataObj.trialId,
-                nameTextStyle: {
-                    padding: [0, 0, 0, 30]
-                }
-            },
-            series: [
-                {
-                    type: 'bar',
-                    data: dataObj.trialTime
-                }
-            ]
-        };
-    };
+	getOption = (dataObj: Runtrial): any => {
+		const { startDuration, endDuration } = this.state;
+		return {
+			tooltip: {
+				trigger: 'axis',
+				axisPointer: {
+					type: 'shadow'
+				},
+				formatter: (data: any): React.ReactNode =>
+					'<div>' +
+					'<div>Trial No.: ' +
+					data[0].dataIndex +
+					'</div>' +
+					'<div>Duration: ' +
+					convertDuration(data[0].data) +
+					'</div>' +
+					'</div>'
+			},
+			grid: {
+				bottom: '3%',
+				containLabel: true,
+				left: '1%',
+				right: '5%'
+			},
+			dataZoom: [
+				{
+					id: 'dataZoomY',
+					type: 'inside',
+					yAxisIndex: [0],
+					filterMode: 'empty',
+					start: startDuration,
+					end: endDuration
+				}
+			],
+			xAxis: {
+				name: 'Time',
+				type: 'value'
+			},
+			yAxis: {
+				name: 'Trial',
+				type: 'category',
+				data: dataObj.trialId,
+				nameTextStyle: {
+					padding: [0, 0, 0, 30]
+				}
+			},
+			series: [
+				{
+					type: 'bar',
+					data: dataObj.trialTime
+				}
+			]
+		};
+	};
 
-    drawDurationGraph = (source: Array<TableObj>): void => {
-        // why this function run two times when props changed?
-        const trialId: string[] = [];
-        const trialTime: number[] = [];
-        const trialRun: Runtrial[] = [];
-        const trialJobs = source.filter(filterDuration);
-        Object.keys(trialJobs).map(item => {
-            const temp = trialJobs[item];
-            trialId.push(temp.sequenceId);
-            trialTime.push(temp.duration);
-        });
-        trialRun.push({
-            trialId: trialId,
-            trialTime: trialTime
-        });
-        this.setState({
-            durationSource: this.getOption(trialRun[0])
-        });
-    };
+	drawDurationGraph = (source: Array<TableObj>): void => {
+		// why this function run two times when props changed?
+		const trialId: string[] = [];
+		const trialTime: number[] = [];
+		const trialRun: Runtrial[] = [];
+		const trialJobs = source.filter(filterDuration);
+		Object.keys(trialJobs).map(item => {
+			const temp = trialJobs[item];
+			trialId.push(temp.sequenceId);
+			trialTime.push(temp.duration);
+		});
+		trialRun.push({
+			trialId: trialId,
+			trialTime: trialTime
+		});
+		this.setState({
+			durationSource: this.getOption(trialRun[0])
+		});
+	};
 
-    componentDidMount(): void {
-        const { source } = this.props;
-        this.drawDurationGraph(source);
-    }
+	componentDidMount(): void {
+		const { source } = this.props;
+		this.drawDurationGraph(source);
+	}
 
-    componentDidUpdate(prevProps: DurationProps): void {
-        // add this if to prevent endless loop
-        if (this.props.source !== prevProps.source) {
-            if (this.props.whichChart === 'Duration') {
-                this.drawDurationGraph(this.props.source);
-            }
-        }
-    }
+	componentDidUpdate(prevProps: DurationProps): void {
+		// add this if to prevent endless loop
+		if (this.props.source !== prevProps.source) {
+			if (this.props.whichChart === 'Duration') {
+				this.drawDurationGraph(this.props.source);
+			}
+		}
+	}
 
-    render(): React.ReactNode {
-        const { durationSource } = this.state;
-        const onEvents = { dataZoom: this.durationDataZoom };
-        return (
-            <div>
-                <ReactEcharts
-                    option={durationSource}
-                    style={{ width: '94%', height: 412, margin: '0 auto', marginTop: 15 }}
-                    theme='my_theme'
-                    notMerge={true} // update now
-                    onEvents={onEvents}
-                />
-            </div>
-        );
-    }
+	render(): React.ReactNode {
+		const { durationSource } = this.state;
+		const onEvents = { dataZoom: this.durationDataZoom };
+		return (
+			<div>
+				<ReactEcharts
+					option={durationSource}
+					style={{ width: '94%', height: 412, margin: '0 auto', marginTop: 15 }}
+					theme='my_theme'
+					notMerge={true} // update now
+					onEvents={onEvents}
+				/>
+			</div>
+		);
+	}
 
-    private durationDataZoom = (e: EventMap): void => {
-        if (e.batch !== undefined) {
-            this.setState(() => ({
-                startDuration: e.batch[0].start !== null ? e.batch[0].start : 0,
-                endDuration: e.batch[0].end !== null ? e.batch[0].end : 100
-            }));
-        }
-    };
+	private durationDataZoom = (e: EventMap): void => {
+		if (e.batch !== undefined) {
+			this.setState(() => ({
+				startDuration: e.batch[0].start !== null ? e.batch[0].start : 0,
+				endDuration: e.batch[0].end !== null ? e.batch[0].end : 100
+			}));
+		}
+	};
 }
 
 export default Duration;
diff --git a/src/webui/src/components/trial-detail/Intermediate.tsx b/src/webui/src/components/trial-detail/Intermediate.tsx
index 06c45de97e..3b080de539 100644
--- a/src/webui/src/components/trial-detail/Intermediate.tsx
+++ b/src/webui/src/components/trial-detail/Intermediate.tsx
@@ -6,298 +6,298 @@ import 'echarts/lib/component/tooltip';
 import 'echarts/lib/component/title';
 
 const stackTokens: IStackTokens = {
-    childrenGap: 20
+	childrenGap: 20
 };
 
 interface IntermediateState {
-    detailSource: Array<TableObj>;
-    interSource: object;
-    filterSource: Array<TableObj>;
-    eachIntermediateNum: number; // trial's intermediate number count
-    isLoadconfirmBtn: boolean;
-    isFilter?: boolean | undefined;
-    length: number;
-    clickCounts: number; // user filter intermediate click confirm btn's counts
-    startMediaY: number;
-    endMediaY: number;
+	detailSource: Array<TableObj>;
+	interSource: object;
+	filterSource: Array<TableObj>;
+	eachIntermediateNum: number; // trial's intermediate number count
+	isLoadconfirmBtn: boolean;
+	isFilter?: boolean | undefined;
+	length: number;
+	clickCounts: number; // user filter intermediate click confirm btn's counts
+	startMediaY: number;
+	endMediaY: number;
 }
 
 interface IntermediateProps {
-    source: Array<TableObj>;
-    whichChart: string;
+	source: Array<TableObj>;
+	whichChart: string;
 }
 
 class Intermediate extends React.Component<IntermediateProps, IntermediateState> {
-    static intervalMediate = 1;
-    public pointInput!: HTMLInputElement | null;
-    public minValInput!: HTMLInputElement | null;
-    public maxValInput!: HTMLInputElement | null;
+	static intervalMediate = 1;
+	public pointInput!: HTMLInputElement | null;
+	public minValInput!: HTMLInputElement | null;
+	public maxValInput!: HTMLInputElement | null;
 
-    constructor(props: IntermediateProps) {
-        super(props);
-        this.state = {
-            detailSource: [],
-            interSource: {},
-            filterSource: [],
-            eachIntermediateNum: 1,
-            isLoadconfirmBtn: false,
-            isFilter: false,
-            length: 100000,
-            clickCounts: 0,
-            startMediaY: 0,
-            endMediaY: 100
-        };
-    }
+	constructor(props: IntermediateProps) {
+		super(props);
+		this.state = {
+			detailSource: [],
+			interSource: {},
+			filterSource: [],
+			eachIntermediateNum: 1,
+			isLoadconfirmBtn: false,
+			isFilter: false,
+			length: 100000,
+			clickCounts: 0,
+			startMediaY: 0,
+			endMediaY: 100
+		};
+	}
 
-    drawIntermediate = (source: Array<TableObj>): void => {
-        if (source.length > 0) {
-            this.setState({
-                length: source.length,
-                detailSource: source
-            });
-            const { startMediaY, endMediaY } = this.state;
-            const trialIntermediate: Array<Intermedia> = [];
-            Object.keys(source).map(item => {
-                const temp = source[item];
-                trialIntermediate.push({
-                    name: temp.id,
-                    data: temp.description.intermediate,
-                    type: 'line',
-                    hyperPara: temp.description.parameters
-                });
-            });
-            // find max intermediate number
-            trialIntermediate.sort((a, b) => {
-                return b.data.length - a.data.length;
-            });
-            const legend: string[] = [];
-            // max length
-            const length = trialIntermediate[0].data.length;
-            const xAxis: number[] = [];
-            Object.keys(trialIntermediate).map(item => {
-                const temp = trialIntermediate[item];
-                legend.push(temp.name);
-            });
-            for (let i = 1; i <= length; i++) {
-                xAxis.push(i);
-            }
-            const option = {
-                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];
-                        }
-                    },
-                    formatter: function(data: TooltipForIntermediate): React.ReactNode {
-                        const trialId = data.seriesName;
-                        let obj = {};
-                        const temp = trialIntermediate.find(key => key.name === trialId);
-                        if (temp !== undefined) {
-                            obj = temp.hyperPara;
-                        }
-                        return (
-                            '<div class="tooldetailAccuracy">' +
-                            '<div>Trial ID: ' +
-                            trialId +
-                            '</div>' +
-                            '<div>Intermediate: ' +
-                            data.data +
-                            '</div>' +
-                            '<div>Parameters: ' +
-                            '<pre>' +
-                            JSON.stringify(obj, null, 4) +
-                            '</pre>' +
-                            '</div>' +
-                            '</div>'
-                        );
-                    }
-                },
-                grid: {
-                    left: '5%',
-                    top: 40,
-                    containLabel: true
-                },
-                xAxis: {
-                    type: 'category',
-                    // name: '# Intermediate',
-                    boundaryGap: false,
-                    data: xAxis
-                },
-                yAxis: {
-                    type: 'value',
-                    name: 'Metric',
-                    scale: true
-                },
-                dataZoom: [
-                    {
-                        id: 'dataZoomY',
-                        type: 'inside',
-                        yAxisIndex: [0],
-                        filterMode: 'none',
-                        start: startMediaY,
-                        end: endMediaY
-                    }
-                ],
-                series: trialIntermediate
-            };
-            this.setState({
-                interSource: option
-            });
-        } else {
-            const nullData = {
-                grid: {
-                    left: '5%',
-                    top: 40,
-                    containLabel: true
-                },
-                xAxis: {
-                    type: 'category',
-                    boundaryGap: false
-                },
-                yAxis: {
-                    type: 'value',
-                    name: 'Metric'
-                }
-            };
-            this.setState({ interSource: nullData });
-        }
-    };
+	drawIntermediate = (source: Array<TableObj>): void => {
+		if (source.length > 0) {
+			this.setState({
+				length: source.length,
+				detailSource: source
+			});
+			const { startMediaY, endMediaY } = this.state;
+			const trialIntermediate: Array<Intermedia> = [];
+			Object.keys(source).map(item => {
+				const temp = source[item];
+				trialIntermediate.push({
+					name: temp.id,
+					data: temp.description.intermediate,
+					type: 'line',
+					hyperPara: temp.description.parameters
+				});
+			});
+			// find max intermediate number
+			trialIntermediate.sort((a, b) => {
+				return b.data.length - a.data.length;
+			});
+			const legend: string[] = [];
+			// max length
+			const length = trialIntermediate[0].data.length;
+			const xAxis: number[] = [];
+			Object.keys(trialIntermediate).map(item => {
+				const temp = trialIntermediate[item];
+				legend.push(temp.name);
+			});
+			for (let i = 1; i <= length; i++) {
+				xAxis.push(i);
+			}
+			const option = {
+				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];
+						}
+					},
+					formatter: function(data: TooltipForIntermediate): React.ReactNode {
+						const trialId = data.seriesName;
+						let obj = {};
+						const temp = trialIntermediate.find(key => key.name === trialId);
+						if (temp !== undefined) {
+							obj = temp.hyperPara;
+						}
+						return (
+							'<div class="tooldetailAccuracy">' +
+							'<div>Trial ID: ' +
+							trialId +
+							'</div>' +
+							'<div>Intermediate: ' +
+							data.data +
+							'</div>' +
+							'<div>Parameters: ' +
+							'<pre>' +
+							JSON.stringify(obj, null, 4) +
+							'</pre>' +
+							'</div>' +
+							'</div>'
+						);
+					}
+				},
+				grid: {
+					left: '5%',
+					top: 40,
+					containLabel: true
+				},
+				xAxis: {
+					type: 'category',
+					// name: '# Intermediate',
+					boundaryGap: false,
+					data: xAxis
+				},
+				yAxis: {
+					type: 'value',
+					name: 'Metric',
+					scale: true
+				},
+				dataZoom: [
+					{
+						id: 'dataZoomY',
+						type: 'inside',
+						yAxisIndex: [0],
+						filterMode: 'none',
+						start: startMediaY,
+						end: endMediaY
+					}
+				],
+				series: trialIntermediate
+			};
+			this.setState({
+				interSource: option
+			});
+		} else {
+			const nullData = {
+				grid: {
+					left: '5%',
+					top: 40,
+					containLabel: true
+				},
+				xAxis: {
+					type: 'category',
+					boundaryGap: false
+				},
+				yAxis: {
+					type: 'value',
+					name: 'Metric'
+				}
+			};
+			this.setState({ interSource: nullData });
+		}
+	};
 
-    // confirm btn function [filter data]
-    filterLines = (): void => {
-        const filterSource: Array<TableObj> = [];
-        this.setState({ isLoadconfirmBtn: true }, () => {
-            const { source } = this.props;
-            // get input value
-            const pointVal = this.pointInput !== null ? this.pointInput.value : '';
-            const minVal = this.minValInput !== null ? this.minValInput.value : '';
-            const maxVal = this.maxValInput !== null ? this.maxValInput.value : '';
-            // user not input message
-            if (pointVal === '' || minVal === '') {
-                alert('Please input filter message');
-            } else {
-                // user not input max value
-                const position = JSON.parse(pointVal);
-                const min = JSON.parse(minVal);
-                if (maxVal === '') {
-                    Object.keys(source).map(item => {
-                        const temp = source[item];
-                        const val = temp.description.intermediate[position - 1];
-                        if (val >= min) {
-                            filterSource.push(temp);
-                        }
-                    });
-                } else {
-                    const max = JSON.parse(maxVal);
-                    Object.keys(source).map(item => {
-                        const temp = source[item];
-                        const val = temp.description.intermediate[position - 1];
-                        if (val >= min && val <= max) {
-                            filterSource.push(temp);
-                        }
-                    });
-                }
-                this.setState({ filterSource: filterSource });
-                this.drawIntermediate(filterSource);
-            }
-            const counts = this.state.clickCounts + 1;
-            this.setState({ isLoadconfirmBtn: false, clickCounts: counts });
-        });
-    };
+	// confirm btn function [filter data]
+	filterLines = (): void => {
+		const filterSource: Array<TableObj> = [];
+		this.setState({ isLoadconfirmBtn: true }, () => {
+			const { source } = this.props;
+			// get input value
+			const pointVal = this.pointInput !== null ? this.pointInput.value : '';
+			const minVal = this.minValInput !== null ? this.minValInput.value : '';
+			const maxVal = this.maxValInput !== null ? this.maxValInput.value : '';
+			// user not input message
+			if (pointVal === '' || minVal === '') {
+				alert('Please input filter message');
+			} else {
+				// user not input max value
+				const position = JSON.parse(pointVal);
+				const min = JSON.parse(minVal);
+				if (maxVal === '') {
+					Object.keys(source).map(item => {
+						const temp = source[item];
+						const val = temp.description.intermediate[position - 1];
+						if (val >= min) {
+							filterSource.push(temp);
+						}
+					});
+				} else {
+					const max = JSON.parse(maxVal);
+					Object.keys(source).map(item => {
+						const temp = source[item];
+						const val = temp.description.intermediate[position - 1];
+						if (val >= min && val <= max) {
+							filterSource.push(temp);
+						}
+					});
+				}
+				this.setState({ filterSource: filterSource });
+				this.drawIntermediate(filterSource);
+			}
+			const counts = this.state.clickCounts + 1;
+			this.setState({ isLoadconfirmBtn: false, clickCounts: counts });
+		});
+	};
 
-    switchTurn = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
-        this.setState({ isFilter: checked });
-        if (checked === false) {
-            this.drawIntermediate(this.props.source);
-        }
-    };
+	switchTurn = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
+		this.setState({ isFilter: checked });
+		if (checked === false) {
+			this.drawIntermediate(this.props.source);
+		}
+	};
 
-    componentDidMount(): void {
-        const { source } = this.props;
-        this.drawIntermediate(source);
-    }
+	componentDidMount(): void {
+		const { source } = this.props;
+		this.drawIntermediate(source);
+	}
 
-    componentDidUpdate(prevProps: IntermediateProps, prevState: any): void {
-        if (this.props.source !== prevProps.source || this.state.isFilter !== prevState.isFilter) {
-            const { isFilter, filterSource } = this.state;
-            const { whichChart, source } = this.props;
+	componentDidUpdate(prevProps: IntermediateProps, prevState: any): void {
+		if (this.props.source !== prevProps.source || this.state.isFilter !== prevState.isFilter) {
+			const { isFilter, filterSource } = this.state;
+			const { whichChart, source } = this.props;
 
-            if (whichChart === 'Intermediate result') {
-                if (isFilter === true) {
-                    const pointVal = this.pointInput !== null ? this.pointInput.value : '';
-                    const minVal = this.minValInput !== null ? this.minValInput.value : '';
-                    if (pointVal === '' && minVal === '') {
-                        this.drawIntermediate(source);
-                    } else {
-                        this.drawIntermediate(filterSource);
-                    }
-                } else {
-                    this.drawIntermediate(source);
-                }
-            }
-        }
-    }
+			if (whichChart === 'Intermediate result') {
+				if (isFilter === true) {
+					const pointVal = this.pointInput !== null ? this.pointInput.value : '';
+					const minVal = this.minValInput !== null ? this.minValInput.value : '';
+					if (pointVal === '' && minVal === '') {
+						this.drawIntermediate(source);
+					} else {
+						this.drawIntermediate(filterSource);
+					}
+				} else {
+					this.drawIntermediate(source);
+				}
+			}
+		}
+	}
 
-    render(): React.ReactNode {
-        const { interSource, isLoadconfirmBtn, isFilter } = this.state;
-        const IntermediateEvents = { dataZoom: this.intermediateDataZoom };
+	render(): React.ReactNode {
+		const { interSource, isLoadconfirmBtn, isFilter } = this.state;
+		const IntermediateEvents = { dataZoom: this.intermediateDataZoom };
 
-        return (
-            <div>
-                {/* style in para.scss */}
-                <Stack horizontal horizontalAlign='end' tokens={stackTokens} className='meline intermediate'>
-                    {isFilter ? (
-                        <div>
-                            <span className='filter-x'># Intermediate result</span>
-                            <input
-                                // placeholder="point"
-                                ref={(input): any => (this.pointInput = input)}
-                                className='strange'
-                            />
-                            <span>Metric range</span>
-                            <input
-                                // placeholder="range"
-                                ref={(input): any => (this.minValInput = input)}
-                            />
-                            <span className='hyphen'>-</span>
-                            <input
-                                // placeholder="range"
-                                ref={(input): any => (this.maxValInput = input)}
-                            />
-                            <PrimaryButton text='Confirm' onClick={this.filterLines} disabled={isLoadconfirmBtn} />
-                        </div>
-                    ) : null}
-                    {/* filter message */}
-                    <Stack horizontal className='filter-toggle'>
-                        <span>Filter</span>
-                        <Toggle onChange={this.switchTurn} />
-                    </Stack>
-                </Stack>
-                <div className='intermediate-graph'>
-                    <ReactEcharts
-                        option={interSource}
-                        style={{ width: '100%', height: 400, margin: '0 auto' }}
-                        notMerge={true} // update now
-                        onEvents={IntermediateEvents}
-                    />
-                    <div className='xAxis'># Intermediate result</div>
-                </div>
-            </div>
-        );
-    }
+		return (
+			<div>
+				{/* style in para.scss */}
+				<Stack horizontal horizontalAlign='end' tokens={stackTokens} className='meline intermediate'>
+					{isFilter ? (
+						<div>
+							<span className='filter-x'># Intermediate result</span>
+							<input
+								// placeholder="point"
+								ref={(input): any => (this.pointInput = input)}
+								className='strange'
+							/>
+							<span>Metric range</span>
+							<input
+								// placeholder="range"
+								ref={(input): any => (this.minValInput = input)}
+							/>
+							<span className='hyphen'>-</span>
+							<input
+								// placeholder="range"
+								ref={(input): any => (this.maxValInput = input)}
+							/>
+							<PrimaryButton text='Confirm' onClick={this.filterLines} disabled={isLoadconfirmBtn} />
+						</div>
+					) : null}
+					{/* filter message */}
+					<Stack horizontal className='filter-toggle'>
+						<span>Filter</span>
+						<Toggle onChange={this.switchTurn} />
+					</Stack>
+				</Stack>
+				<div className='intermediate-graph'>
+					<ReactEcharts
+						option={interSource}
+						style={{ width: '100%', height: 400, margin: '0 auto' }}
+						notMerge={true} // update now
+						onEvents={IntermediateEvents}
+					/>
+					<div className='xAxis'># Intermediate result</div>
+				</div>
+			</div>
+		);
+	}
 
-    private intermediateDataZoom = (e: EventMap): void => {
-        if (e.batch !== undefined) {
-            this.setState(() => ({
-                startMediaY: e.batch[0].start !== null ? e.batch[0].start : 0,
-                endMediaY: e.batch[0].end !== null ? e.batch[0].end : 100
-            }));
-        }
-    };
+	private intermediateDataZoom = (e: EventMap): void => {
+		if (e.batch !== undefined) {
+			this.setState(() => ({
+				startMediaY: e.batch[0].start !== null ? e.batch[0].start : 0,
+				endMediaY: e.batch[0].end !== null ? e.batch[0].end : 100
+			}));
+		}
+	};
 }
 
 export default Intermediate;
diff --git a/src/webui/src/components/trial-detail/Para.tsx b/src/webui/src/components/trial-detail/Para.tsx
index cd9aa90195..039d83e9c0 100644
--- a/src/webui/src/components/trial-detail/Para.tsx
+++ b/src/webui/src/components/trial-detail/Para.tsx
@@ -11,283 +11,283 @@ import '../../static/style/button.scss';
 import '../../static/style/para.scss';
 
 interface ParaState {
-    dimName: string[];
-    selectedPercent: string;
-    primaryMetricKey: string;
-    noChart: boolean;
+	dimName: string[];
+	selectedPercent: string;
+	primaryMetricKey: string;
+	noChart: boolean;
 }
 
 interface ParaProps {
-    trials: Array<TableObj>;
-    searchSpace: SearchSpace;
-    whichChart: string;
+	trials: Array<TableObj>;
+	searchSpace: SearchSpace;
+	whichChart: string;
 }
 
 class Para extends React.Component<ParaProps, ParaState> {
-    private paraRef = React.createRef<HTMLDivElement>();
-    private pcs: any;
+	private paraRef = React.createRef<HTMLDivElement>();
+	private pcs: any;
 
-    private chartMulineStyle = {
-        width: '100%',
-        height: 392,
-        margin: '0 auto'
-    };
-    private innerChartMargins = {
-        top: 32,
-        right: 20,
-        bottom: 20,
-        left: 28
-    };
+	private chartMulineStyle = {
+		width: '100%',
+		height: 392,
+		margin: '0 auto'
+	};
+	private innerChartMargins = {
+		top: 32,
+		right: 20,
+		bottom: 20,
+		left: 28
+	};
 
-    constructor(props: ParaProps) {
-        super(props);
-        this.state = {
-            dimName: [],
-            primaryMetricKey: 'default',
-            selectedPercent: '1',
-            noChart: true
-        };
-    }
+	constructor(props: ParaProps) {
+		super(props);
+		this.state = {
+			dimName: [],
+			primaryMetricKey: 'default',
+			selectedPercent: '1',
+			noChart: true
+		};
+	}
 
-    // get percent value number
-    percentNum = (event: React.FormEvent<HTMLDivElement>, item?: IDropdownOption): void => {
-        if (item !== undefined) {
-            this.setState({ selectedPercent: item.key.toString() }, () => {
-                this.renderParallelCoordinates();
-            });
-        }
-    };
+	// get percent value number
+	percentNum = (event: React.FormEvent<HTMLDivElement>, item?: IDropdownOption): void => {
+		if (item !== undefined) {
+			this.setState({ selectedPercent: item.key.toString() }, () => {
+				this.renderParallelCoordinates();
+			});
+		}
+	};
 
-    // select all final keys
-    updateEntries = (event: React.FormEvent<HTMLDivElement>, item: any): void => {
-        if (item !== undefined) {
-            this.setState({ primaryMetricKey: item.key }, () => {
-                this.renderParallelCoordinates();
-            });
-        }
-    };
+	// select all final keys
+	updateEntries = (event: React.FormEvent<HTMLDivElement>, item: any): void => {
+		if (item !== undefined) {
+			this.setState({ primaryMetricKey: item.key }, () => {
+				this.renderParallelCoordinates();
+			});
+		}
+	};
 
-    componentDidMount(): void {
-        this.renderParallelCoordinates();
-    }
+	componentDidMount(): void {
+		this.renderParallelCoordinates();
+	}
 
-    componentDidUpdate(prevProps: ParaProps): void {
-        // FIXME: redundant update
-        if (this.props.trials !== prevProps.trials || this.props.searchSpace !== prevProps.searchSpace) {
-            const { whichChart } = this.props;
-            if (whichChart === 'Hyper-parameter') {
-                this.renderParallelCoordinates();
-            }
-        }
-    }
+	componentDidUpdate(prevProps: ParaProps): void {
+		// FIXME: redundant update
+		if (this.props.trials !== prevProps.trials || this.props.searchSpace !== prevProps.searchSpace) {
+			const { whichChart } = this.props;
+			if (whichChart === 'Hyper-parameter') {
+				this.renderParallelCoordinates();
+			}
+		}
+	}
 
-    render(): React.ReactNode {
-        const { selectedPercent, noChart } = this.state;
+	render(): React.ReactNode {
+		const { selectedPercent, noChart } = this.state;
 
-        return (
-            <div className='parameter'>
-                <Stack horizontal className='para-filter' horizontalAlign='end'>
-                    <Dropdown
-                        selectedKey={selectedPercent}
-                        onChange={this.percentNum}
-                        options={[
-                            { key: '0.01', text: 'Top 1%' },
-                            { key: '0.05', text: 'Top 5%' },
-                            { key: '0.2', text: 'Top 20%' },
-                            { key: '1', text: 'Top 100%' }
-                        ]}
-                        styles={{ dropdown: { width: 120 } }}
-                        className='para-filter-percent'
-                    />
-                    {this.finalKeysDropdown()}
-                </Stack>
-                <div className='parcoords' style={this.chartMulineStyle} ref={this.paraRef} />
-                {noChart && <div className='nodata'>No data</div>}
-            </div>
-        );
-    }
+		return (
+			<div className='parameter'>
+				<Stack horizontal className='para-filter' horizontalAlign='end'>
+					<Dropdown
+						selectedKey={selectedPercent}
+						onChange={this.percentNum}
+						options={[
+							{ key: '0.01', text: 'Top 1%' },
+							{ key: '0.05', text: 'Top 5%' },
+							{ key: '0.2', text: 'Top 20%' },
+							{ key: '1', text: 'Top 100%' }
+						]}
+						styles={{ dropdown: { width: 120 } }}
+						className='para-filter-percent'
+					/>
+					{this.finalKeysDropdown()}
+				</Stack>
+				<div className='parcoords' style={this.chartMulineStyle} ref={this.paraRef} />
+				{noChart && <div className='nodata'>No data</div>}
+			</div>
+		);
+	}
 
-    private finalKeysDropdown(): any {
-        const { primaryMetricKey } = this.state;
-        if (TRIALS.finalKeys().length === 1) {
-            return null;
-        } else {
-            const finalKeysDropdown: any = [];
-            TRIALS.finalKeys().forEach(item => {
-                finalKeysDropdown.push({
-                    key: item,
-                    text: item
-                });
-            });
-            return (
-                <div>
-                    <span className='para-filter-text para-filter-middle'>Metrics</span>
-                    <Dropdown
-                        selectedKey={primaryMetricKey}
-                        options={finalKeysDropdown}
-                        onChange={this.updateEntries}
-                        styles={{ root: { width: 150, display: 'inline-block' } }}
-                        className='para-filter-percent'
-                    />
-                </div>
-            );
-        }
-    }
+	private finalKeysDropdown(): any {
+		const { primaryMetricKey } = this.state;
+		if (TRIALS.finalKeys().length === 1) {
+			return null;
+		} else {
+			const finalKeysDropdown: any = [];
+			TRIALS.finalKeys().forEach(item => {
+				finalKeysDropdown.push({
+					key: item,
+					text: item
+				});
+			});
+			return (
+				<div>
+					<span className='para-filter-text para-filter-middle'>Metrics</span>
+					<Dropdown
+						selectedKey={primaryMetricKey}
+						options={finalKeysDropdown}
+						onChange={this.updateEntries}
+						styles={{ root: { width: 150, display: 'inline-block' } }}
+						className='para-filter-percent'
+					/>
+				</div>
+			);
+		}
+	}
 
-    /**
-     * Render the parallel coordinates. Using trial data as base and leverage
-     * information from search space at a best effort basis.
-     * @param source Array of trial data
-     * @param searchSpace Search space
-     */
-    private renderParallelCoordinates(): void {
-        const { searchSpace } = this.props;
-        const percent = parseFloat(this.state.selectedPercent);
-        const { primaryMetricKey } = this.state;
+	/**
+	 * Render the parallel coordinates. Using trial data as base and leverage
+	 * information from search space at a best effort basis.
+	 * @param source Array of trial data
+	 * @param searchSpace Search space
+	 */
+	private renderParallelCoordinates(): void {
+		const { searchSpace } = this.props;
+		const percent = parseFloat(this.state.selectedPercent);
+		const { primaryMetricKey } = this.state;
 
-        const inferredSearchSpace = TRIALS.inferredSearchSpace(searchSpace);
-        const inferredMetricSpace = TRIALS.inferredMetricSpace();
-        let convertedTrials = this.getTrialsAsObjectList(inferredSearchSpace, inferredMetricSpace);
+		const inferredSearchSpace = TRIALS.inferredSearchSpace(searchSpace);
+		const inferredMetricSpace = TRIALS.inferredMetricSpace();
+		let convertedTrials = this.getTrialsAsObjectList(inferredSearchSpace, inferredMetricSpace);
 
-        const dimensions: [any, any][] = [];
-        let colorDim: string | undefined = undefined,
-            colorScale: any = undefined;
-        // treat every axis as numeric to fit for brush
-        for (const [k, v] of inferredSearchSpace.axes) {
-            dimensions.push([
-                k,
-                {
-                    type: 'number',
-                    yscale: this.convertToD3Scale(v)
-                }
-            ]);
-        }
-        for (const [k, v] of inferredMetricSpace.axes) {
-            const scale = this.convertToD3Scale(v);
-            if (k === primaryMetricKey && scale !== undefined && scale.interpolate) {
-                // set color for primary metrics
-                // `colorScale` is used to produce a color range, while `scale` is to produce a pixel range
-                colorScale = this.convertToD3Scale(v, false);
-                convertedTrials.sort((a, b) => (EXPERIMENT.optimizeMode === 'minimize' ? a[k] - b[k] : b[k] - a[k]));
-                // filter top trials
-                if (percent != 1) {
-                    const keptTrialNum = Math.max(Math.ceil(convertedTrials.length * percent), 1);
-                    convertedTrials = convertedTrials.slice(0, keptTrialNum);
-                    const domain = d3.extent(convertedTrials, item => item[k]);
-                    scale.domain([domain[0], domain[1]]);
-                    colorScale.domain([domain[0], domain[1]]);
-                    if (colorScale !== undefined) {
-                        colorScale.domain(domain);
-                    }
-                }
-                // reverse the converted trials to show the top ones upfront
-                convertedTrials.reverse();
-                const assignColors = (scale: any): void => {
-                    scale.range([0, 1]); // fake a range to perform invert
-                    const [scaleMin, scaleMax] = scale.domain();
-                    const pivot = scale.invert(0.5);
-                    scale
-                        .domain([scaleMin, pivot, scaleMax])
-                        .range(['#90EE90', '#FFC400', '#CA0000'])
-                        .interpolate(d3.interpolateHsl);
-                };
-                assignColors(colorScale);
-                colorDim = k;
-            }
-            dimensions.push([
-                k,
-                {
-                    type: 'number',
-                    yscale: scale
-                }
-            ]);
-        }
+		const dimensions: [any, any][] = [];
+		let colorDim: string | undefined = undefined,
+			colorScale: any = undefined;
+		// treat every axis as numeric to fit for brush
+		for (const [k, v] of inferredSearchSpace.axes) {
+			dimensions.push([
+				k,
+				{
+					type: 'number',
+					yscale: this.convertToD3Scale(v)
+				}
+			]);
+		}
+		for (const [k, v] of inferredMetricSpace.axes) {
+			const scale = this.convertToD3Scale(v);
+			if (k === primaryMetricKey && scale !== undefined && scale.interpolate) {
+				// set color for primary metrics
+				// `colorScale` is used to produce a color range, while `scale` is to produce a pixel range
+				colorScale = this.convertToD3Scale(v, false);
+				convertedTrials.sort((a, b) => (EXPERIMENT.optimizeMode === 'minimize' ? a[k] - b[k] : b[k] - a[k]));
+				// filter top trials
+				if (percent != 1) {
+					const keptTrialNum = Math.max(Math.ceil(convertedTrials.length * percent), 1);
+					convertedTrials = convertedTrials.slice(0, keptTrialNum);
+					const domain = d3.extent(convertedTrials, item => item[k]);
+					scale.domain([domain[0], domain[1]]);
+					colorScale.domain([domain[0], domain[1]]);
+					if (colorScale !== undefined) {
+						colorScale.domain(domain);
+					}
+				}
+				// reverse the converted trials to show the top ones upfront
+				convertedTrials.reverse();
+				const assignColors = (scale: any): void => {
+					scale.range([0, 1]); // fake a range to perform invert
+					const [scaleMin, scaleMax] = scale.domain();
+					const pivot = scale.invert(0.5);
+					scale
+						.domain([scaleMin, pivot, scaleMax])
+						.range(['#90EE90', '#FFC400', '#CA0000'])
+						.interpolate(d3.interpolateHsl);
+				};
+				assignColors(colorScale);
+				colorDim = k;
+			}
+			dimensions.push([
+				k,
+				{
+					type: 'number',
+					yscale: scale
+				}
+			]);
+		}
 
-        if (convertedTrials.length === 0) {
-            return;
-        }
+		if (convertedTrials.length === 0) {
+			return;
+		}
 
-        const firstRun = this.pcs === undefined;
-        if (firstRun) {
-            this.pcs = ParCoords()(this.paraRef.current);
-        }
-        this.pcs
-            .data(convertedTrials)
-            .dimensions(dimensions.reduce((obj, entry) => ({ ...obj, [entry[0]]: entry[1] }), {}));
-        if (firstRun) {
-            this.pcs
-                .margin(this.innerChartMargins)
-                .alphaOnBrushed(0.2)
-                .smoothness(0.1)
-                .brushMode('1D-axes')
-                .reorderable()
-                .interactive();
-        }
-        if (colorScale !== undefined) {
-            this.pcs.color(d => (colorScale as any)(d[colorDim as any]));
-        }
-        this.pcs.render();
-        if (firstRun) {
-            this.setState({ noChart: false });
-        }
-    }
+		const firstRun = this.pcs === undefined;
+		if (firstRun) {
+			this.pcs = ParCoords()(this.paraRef.current);
+		}
+		this.pcs
+			.data(convertedTrials)
+			.dimensions(dimensions.reduce((obj, entry) => ({ ...obj, [entry[0]]: entry[1] }), {}));
+		if (firstRun) {
+			this.pcs
+				.margin(this.innerChartMargins)
+				.alphaOnBrushed(0.2)
+				.smoothness(0.1)
+				.brushMode('1D-axes')
+				.reorderable()
+				.interactive();
+		}
+		if (colorScale !== undefined) {
+			this.pcs.color(d => (colorScale as any)(d[colorDim as any]));
+		}
+		this.pcs.render();
+		if (firstRun) {
+			this.setState({ noChart: false });
+		}
+	}
 
-    private getTrialsAsObjectList(inferredSearchSpace: MultipleAxes, inferredMetricSpace: MultipleAxes): {}[] {
-        const { trials } = this.props;
-        const succeededTrials = trials.filter(filterByStatus);
+	private getTrialsAsObjectList(inferredSearchSpace: MultipleAxes, inferredMetricSpace: MultipleAxes): {}[] {
+		const { trials } = this.props;
+		const succeededTrials = trials.filter(filterByStatus);
 
-        return succeededTrials.map(s => {
-            const entries = Array.from(s.parameters(inferredSearchSpace).entries());
-            entries.push(...Array.from(s.metrics(inferredMetricSpace).entries()));
-            const ret = {};
-            for (const [k, v] of entries) {
-                ret[k.fullName] = v;
-            }
-            return ret;
-        });
-    }
+		return succeededTrials.map(s => {
+			const entries = Array.from(s.parameters(inferredSearchSpace).entries());
+			entries.push(...Array.from(s.metrics(inferredMetricSpace).entries()));
+			const ret = {};
+			for (const [k, v] of entries) {
+				ret[k.fullName] = v;
+			}
+			return ret;
+		});
+	}
 
-    private getRange(): [number, number] {
-        // Documentation is lacking.
-        // Reference: https://github.com/syntagmatic/parallel-coordinates/issues/308
-        // const range = this.pcs.height() - this.pcs.margin().top - this.pcs.margin().bottom;
-        const range = this.chartMulineStyle.height - this.innerChartMargins.top - this.innerChartMargins.bottom;
-        return [range, 1];
-    }
+	private getRange(): [number, number] {
+		// Documentation is lacking.
+		// Reference: https://github.com/syntagmatic/parallel-coordinates/issues/308
+		// const range = this.pcs.height() - this.pcs.margin().top - this.pcs.margin().bottom;
+		const range = this.chartMulineStyle.height - this.innerChartMargins.top - this.innerChartMargins.bottom;
+		return [range, 1];
+	}
 
-    private convertToD3Scale(axis: SingleAxis, initRange: boolean = true): any {
-        const padLinear = ([x0, x1], k = 0.1): [number, number] => {
-            const dx = ((x1 - x0) * k) / 2;
-            return [x0 - dx, x1 + dx];
-        };
-        const padLog = ([x0, x1], k = 0.1): [number, number] => {
-            const [y0, y1] = padLinear([Math.log(x0), Math.log(x1)], k);
-            return [Math.exp(y0), Math.exp(y1)];
-        };
-        let scaleInst: any = undefined;
-        if (axis.scale === 'ordinal') {
-            if (axis.nested) {
-                // TODO: handle nested entries
-                scaleInst = d3
-                    .scalePoint()
-                    .domain(Array.from(axis.domain.keys()))
-                    .padding(0.2);
-            } else {
-                scaleInst = d3
-                    .scalePoint()
-                    .domain(axis.domain)
-                    .padding(0.2);
-            }
-        } else if (axis.scale === 'log') {
-            scaleInst = d3.scaleLog().domain(padLog(axis.domain));
-        } else if (axis.scale === 'linear') {
-            scaleInst = d3.scaleLinear().domain(padLinear(axis.domain));
-        }
-        if (initRange) {
-            scaleInst = scaleInst.range(this.getRange());
-        }
-        return scaleInst;
-    }
+	private convertToD3Scale(axis: SingleAxis, initRange: boolean = true): any {
+		const padLinear = ([x0, x1], k = 0.1): [number, number] => {
+			const dx = ((x1 - x0) * k) / 2;
+			return [x0 - dx, x1 + dx];
+		};
+		const padLog = ([x0, x1], k = 0.1): [number, number] => {
+			const [y0, y1] = padLinear([Math.log(x0), Math.log(x1)], k);
+			return [Math.exp(y0), Math.exp(y1)];
+		};
+		let scaleInst: any = undefined;
+		if (axis.scale === 'ordinal') {
+			if (axis.nested) {
+				// TODO: handle nested entries
+				scaleInst = d3
+					.scalePoint()
+					.domain(Array.from(axis.domain.keys()))
+					.padding(0.2);
+			} else {
+				scaleInst = d3
+					.scalePoint()
+					.domain(axis.domain)
+					.padding(0.2);
+			}
+		} else if (axis.scale === 'log') {
+			scaleInst = d3.scaleLog().domain(padLog(axis.domain));
+		} else if (axis.scale === 'linear') {
+			scaleInst = d3.scaleLinear().domain(padLinear(axis.domain));
+		}
+		if (initRange) {
+			scaleInst = scaleInst.range(this.getRange());
+		}
+		return scaleInst;
+	}
 }
 
 export default Para;
diff --git a/src/webui/src/components/trial-detail/TableList.tsx b/src/webui/src/components/trial-detail/TableList.tsx
index de5d839f99..3c3d6af97f 100644
--- a/src/webui/src/components/trial-detail/TableList.tsx
+++ b/src/webui/src/components/trial-detail/TableList.tsx
@@ -2,20 +2,20 @@ import * as React from 'react';
 import axios from 'axios';
 import ReactEcharts from 'echarts-for-react';
 import {
-    Stack,
-    Dropdown,
-    DetailsList,
-    IDetailsListProps,
-    DetailsListLayoutMode,
-    PrimaryButton,
-    Modal,
-    IDropdownOption,
-    IColumn,
-    Selection,
-    SelectionMode,
-    IconButton,
-    TooltipHost,
-    IStackTokens
+	Stack,
+	Dropdown,
+	DetailsList,
+	IDetailsListProps,
+	DetailsListLayoutMode,
+	PrimaryButton,
+	Modal,
+	IDropdownOption,
+	IColumn,
+	Selection,
+	SelectionMode,
+	IconButton,
+	TooltipHost,
+	IStackTokens
 } from 'office-ui-fabric-react';
 import ReactPaginate from 'react-paginate';
 import { LineChart, blocked, copy } from '../Buttons/Icon';
@@ -42,740 +42,740 @@ require('echarts/lib/chart/line');
 require('echarts/lib/component/tooltip');
 require('echarts/lib/component/title');
 echarts.registerTheme('my_theme', {
-    color: '#3c8dbc'
+	color: '#3c8dbc'
 });
 
 const horizontalGapStackTokens: IStackTokens = {
-    childrenGap: 20,
-    padding: 10
+	childrenGap: 20,
+	padding: 10
 };
 
 interface TableListProps {
-    pageSize: number;
-    tableSource: Array<TableRecord>;
-    columnList: string[]; // user select columnKeys
-    changeColumn: (val: string[]) => void;
-    trialsUpdateBroadcast: number;
+	pageSize: number;
+	tableSource: Array<TableRecord>;
+	columnList: string[]; // user select columnKeys
+	changeColumn: (val: string[]) => void;
+	trialsUpdateBroadcast: number;
 }
 
 interface SortInfo {
-    field: string;
-    isDescend?: boolean;
+	field: string;
+	isDescend?: boolean;
 }
 
 interface TableListState {
-    intermediateOption: object;
-    modalVisible: boolean;
-    isObjFinal: boolean;
-    isShowColumn: boolean;
-    selectRows: Array<any>;
-    isShowCompareModal: boolean;
-    selectedRowKeys: string[] | number[];
-    intermediateData: Array<object>; // a trial's intermediate results (include dict)
-    intermediateId: string;
-    intermediateOtherKeys: string[];
-    isShowCustomizedModal: boolean;
-    copyTrialId: string; // user copy trial to submit a new customized trial
-    isCalloutVisible: boolean; // kill job button callout [kill or not kill job window]
-    intermediateKey: string; // intermeidate modal: which key is choosed.
-    isExpand: boolean;
-    modalIntermediateWidth: number;
-    modalIntermediateHeight: number;
-    tableColumns: IColumn[];
-    allColumnList: string[];
-    tableSourceForSort: Array<TableRecord>;
-    sortMessage: SortInfo;
-    offset: number;
-    data: Array<TableRecord>;
-    perPage: number;
-    currentPage: number;
-    pageCount: number;
+	intermediateOption: object;
+	modalVisible: boolean;
+	isObjFinal: boolean;
+	isShowColumn: boolean;
+	selectRows: Array<any>;
+	isShowCompareModal: boolean;
+	selectedRowKeys: string[] | number[];
+	intermediateData: Array<object>; // a trial's intermediate results (include dict)
+	intermediateId: string;
+	intermediateOtherKeys: string[];
+	isShowCustomizedModal: boolean;
+	copyTrialId: string; // user copy trial to submit a new customized trial
+	isCalloutVisible: boolean; // kill job button callout [kill or not kill job window]
+	intermediateKey: string; // intermeidate modal: which key is choosed.
+	isExpand: boolean;
+	modalIntermediateWidth: number;
+	modalIntermediateHeight: number;
+	tableColumns: IColumn[];
+	allColumnList: string[];
+	tableSourceForSort: Array<TableRecord>;
+	sortMessage: SortInfo;
+	offset: number;
+	data: Array<TableRecord>;
+	perPage: number;
+	currentPage: number;
+	pageCount: number;
 }
 
 class TableList extends React.Component<TableListProps, TableListState> {
-    public intervalTrialLog = 10;
-    public trialId!: string;
-
-    constructor(props: TableListProps) {
-        super(props);
-
-        this.state = {
-            intermediateOption: {},
-            modalVisible: false,
-            isObjFinal: false,
-            isShowColumn: false,
-            isShowCompareModal: false,
-            selectRows: [],
-            selectedRowKeys: [], // close selected trial message after modal closed
-            intermediateData: [],
-            intermediateId: '',
-            intermediateOtherKeys: [],
-            isShowCustomizedModal: false,
-            isCalloutVisible: false,
-            copyTrialId: '',
-            intermediateKey: 'default',
-            isExpand: false,
-            modalIntermediateWidth: window.innerWidth,
-            modalIntermediateHeight: window.innerHeight,
-            tableColumns: this.initTableColumnList(this.props.columnList),
-            allColumnList: this.getAllColumnKeys(),
-            sortMessage: { field: '', isDescend: false },
-            offset: 0,
-            data: [],
-            perPage: 20,
-            currentPage: 0,
-            pageCount: 0,
-            tableSourceForSort: this.props.tableSource
-        };
-    }
-
-    // sort for table column
-    onColumnClick = (ev: React.MouseEvent<HTMLElement>, getColumn: IColumn): void => {
-        const { tableColumns, tableSourceForSort } = this.state;
-        const newColumns: IColumn[] = tableColumns.slice();
-        const currColumn: IColumn = newColumns.filter(item => getColumn.key === item.key)[0];
-        newColumns.forEach((newCol: IColumn) => {
-            if (newCol === currColumn) {
-                currColumn.isSortedDescending = !currColumn.isSortedDescending;
-                currColumn.isSorted = true;
-            } else {
-                newCol.isSorted = false;
-                newCol.isSortedDescending = true;
-            }
-        });
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const newItems = this.copyAndSort(tableSourceForSort, currColumn.fieldName!, currColumn.isSortedDescending);
-        this.setState({
-            tableColumns: newColumns,
-            tableSourceForSort: newItems,
-            sortMessage: { field: getColumn.key, isDescend: currColumn.isSortedDescending }
-        });
-    };
-
-    private copyAndSort<T>(items: T[], columnKey: string, isSortedDescending?: boolean): any {
-        const key = columnKey as keyof T;
-        return items.slice(0).sort(function(a: T, b: T): any {
-            if (a[key] === undefined) {
-                return 1;
-            }
-            if (b[key] === undefined) {
-                return -1;
-            }
-            return (isSortedDescending ? a[key] < b[key] : a[key] > b[key]) ? 1 : -1;
-        });
-    }
-
-    AccuracyColumnConfig: any = {
-        name: 'Default metric',
-        className: 'leftTitle',
-        key: 'latestAccuracy',
-        fieldName: 'latestAccuracy',
-        minWidth: 200,
-        maxWidth: 300,
-        isResizable: true,
-        data: 'number',
-        onColumnClick: this.onColumnClick,
-        onRender: (item): React.ReactNode => (
-            <TooltipHost content={item.formattedLatestAccuracy}>
-                <div className='ellipsis'>{item.formattedLatestAccuracy}</div>
-            </TooltipHost>
-        )
-    };
-
-    SequenceIdColumnConfig: any = {
-        name: 'Trial No.',
-        key: 'sequenceId',
-        fieldName: 'sequenceId',
-        minWidth: 80,
-        maxWidth: 240,
-        className: 'tableHead',
-        data: 'number',
-        onColumnClick: this.onColumnClick
-    };
-
-    IdColumnConfig: any = {
-        name: 'ID',
-        key: 'id',
-        fieldName: 'id',
-        minWidth: 150,
-        maxWidth: 200,
-        isResizable: true,
-        data: 'string',
-        onColumnClick: this.onColumnClick,
-        className: 'tableHead leftTitle'
-    };
-
-    StartTimeColumnConfig: any = {
-        name: 'Start time',
-        key: 'startTime',
-        fieldName: 'startTime',
-        minWidth: 150,
-        maxWidth: 400,
-        isResizable: true,
-        data: 'number',
-        onColumnClick: this.onColumnClick,
-        onRender: (record): React.ReactNode => <span>{formatTimestamp(record.startTime)}</span>
-    };
-
-    EndTimeColumnConfig: any = {
-        name: 'End time',
-        key: 'endTime',
-        fieldName: 'endTime',
-        minWidth: 200,
-        maxWidth: 400,
-        isResizable: true,
-        data: 'number',
-        onColumnClick: this.onColumnClick,
-        onRender: (record): React.ReactNode => <span>{formatTimestamp(record.endTime, '--')}</span>
-    };
-
-    DurationColumnConfig: any = {
-        name: 'Duration',
-        key: 'duration',
-        fieldName: 'duration',
-        minWidth: 150,
-        maxWidth: 300,
-        isResizable: true,
-        data: 'number',
-        onColumnClick: this.onColumnClick,
-        onRender: (record): React.ReactNode => <span className='durationsty'>{convertDuration(record.duration)}</span>
-    };
-
-    StatusColumnConfig: any = {
-        name: 'Status',
-        key: 'status',
-        fieldName: 'status',
-        className: 'tableStatus',
-        minWidth: 150,
-        maxWidth: 250,
-        isResizable: true,
-        data: 'string',
-        onColumnClick: this.onColumnClick,
-        onRender: (record): React.ReactNode => <span className={`${record.status} commonStyle`}>{record.status}</span>
-    };
-
-    IntermediateCountColumnConfig: any = {
-        name: 'Intermediate result',
-        dataIndex: 'intermediateCount',
-        fieldName: 'intermediateCount',
-        minWidth: 150,
-        maxWidth: 200,
-        isResizable: true,
-        data: 'number',
-        onColumnClick: this.onColumnClick,
-        onRender: (record): React.ReactNode => <span>{`#${record.intermediateCount}`}</span>
-    };
-
-    showIntermediateModal = async (record: TrialJobInfo, event: React.SyntheticEvent<EventTarget>): Promise<void> => {
-        event.preventDefault();
-        event.stopPropagation();
-        const res = await axios.get(`${MANAGER_IP}/metric-data/${record.id}`);
-        if (res.status === 200) {
-            const intermediateArr: number[] = [];
-            // support intermediate result is dict because the last intermediate result is
-            // final result in a succeed trial, it may be a dict.
-            // get intermediate result dict keys array
-            const { intermediateKey } = this.state;
-            const otherkeys: string[] = [];
-            const metricDatas = res.data;
-            if (metricDatas.length !== 0) {
-                // just add type=number keys
-                const intermediateMetrics = parseMetrics(metricDatas[0].data);
-                for (const key in intermediateMetrics) {
-                    if (typeof intermediateMetrics[key] === 'number') {
-                        otherkeys.push(key);
-                    }
-                }
-            }
-            // intermediateArr just store default val
-            metricDatas.map(item => {
-                if (item.type === 'PERIODICAL') {
-                    const temp = parseMetrics(item.data);
-                    if (typeof temp === 'object') {
-                        intermediateArr.push(temp[intermediateKey]);
-                    } else {
-                        intermediateArr.push(temp);
-                    }
-                }
-            });
-            const intermediate = intermediateGraphOption(intermediateArr, record.id);
-            this.setState({
-                intermediateData: res.data, // store origin intermediate data for a trial
-                intermediateOption: intermediate,
-                intermediateOtherKeys: otherkeys,
-                intermediateId: record.id
-            });
-        }
-        this.setState({ modalVisible: true });
-    };
-
-    // intermediate button click -> intermediate graph for each trial
-    // support intermediate is dict
-    selectOtherKeys = (event: React.FormEvent<HTMLDivElement>, item?: IDropdownOption): void => {
-        if (item !== undefined) {
-            const value = item.text;
-            const isShowDefault: boolean = value === 'default' ? true : false;
-            const { intermediateData, intermediateId } = this.state;
-            const intermediateArr: number[] = [];
-            // just watch default key-val
-            if (isShowDefault === true) {
-                Object.keys(intermediateData).map(item => {
-                    if (intermediateData[item].type === 'PERIODICAL') {
-                        const temp = parseMetrics(intermediateData[item].data);
-                        if (typeof temp === 'object') {
-                            intermediateArr.push(temp[value]);
-                        } else {
-                            intermediateArr.push(temp);
-                        }
-                    }
-                });
-            } else {
-                Object.keys(intermediateData).map(item => {
-                    const temp = parseMetrics(intermediateData[item].data);
-                    if (typeof temp === 'object') {
-                        intermediateArr.push(temp[value]);
-                    }
-                });
-            }
-            const intermediate = intermediateGraphOption(intermediateArr, intermediateId);
-            // re-render
-            this.setState({
-                intermediateKey: value,
-                intermediateOption: intermediate
-            });
-        }
-    };
-
-    hideIntermediateModal = (): void => {
-        this.setState({
-            modalVisible: false
-        });
-    };
-
-    hideShowColumnModal = (): void => {
-        this.setState(() => ({ isShowColumn: false }));
-    };
-
-    // click add column btn, just show the modal of addcolumn
-    addColumn = (): void => {
-        // show user select check button
-        this.setState(() => ({ isShowColumn: true }));
-    };
-
-    fillSelectedRowsTostate = (selected: number[] | string[], selectedRows: Array<TableRecord>): void => {
-        this.setState({ selectRows: selectedRows, selectedRowKeys: selected });
-    };
-
-    // open Compare-modal
-    compareBtn = (): void => {
-        const { selectRows } = this.state;
-        if (selectRows.length === 0) {
-            alert('Please select datas you want to compare!');
-        } else {
-            this.setState({ isShowCompareModal: true });
-        }
-    };
-
-    // close Compare-modal
-    hideCompareModal = (): void => {
-        // close modal. clear select rows data, clear selected track
-        this.setState({ isShowCompareModal: false, selectedRowKeys: [], selectRows: [] });
-    };
-
-    // open customized trial modal
-    private setCustomizedTrial = (trialId: string, event: React.SyntheticEvent<EventTarget>): void => {
-        event.preventDefault();
-        event.stopPropagation();
-        this.setState({
-            isShowCustomizedModal: true,
-            copyTrialId: trialId
-        });
-    };
-
-    private closeCustomizedTrial = (): void => {
-        this.setState({
-            isShowCustomizedModal: false,
-            copyTrialId: ''
-        });
-    };
-
-    private onWindowResize = (): void => {
-        this.setState(() => ({
-            modalIntermediateHeight: window.innerHeight,
-            modalIntermediateWidth: window.innerWidth
-        }));
-    };
-
-    private onRenderRow: IDetailsListProps['onRenderRow'] = props => {
-        if (props) {
-            return <Details detailsProps={props} />;
-        }
-        return null;
-    };
-
-    private getSelectedRows = new Selection({
-        onSelectionChanged: (): void => {
-            this.setState(() => ({ selectRows: this.getSelectedRows.getSelection() }));
-        }
-    });
-
-    // trial parameters & dict final keys & Trial No. Id ...
-    private getAllColumnKeys = (): string[] => {
-        const tableSource: Array<TableRecord> = JSON.parse(JSON.stringify(this.props.tableSource));
-        // parameter as table column
-        const parameterStr: string[] = [];
-        if (!EXPERIMENT.isNestedExp()) {
-            if (tableSource.length > 0) {
-                const trialMess = TRIALS.getTrial(tableSource[0].id);
-                const trial = trialMess.description.parameters;
-                const parameterColumn: string[] = Object.keys(trial);
-                parameterColumn.forEach(value => {
-                    parameterStr.push(`${value} (search space)`);
-                });
-            }
-        }
-        // concat trial all final keys and remove dup "default" val, return list
-        const finalKeysList = TRIALS.finalKeys().filter(item => item !== 'default');
-        return COLUMNPro.concat(parameterStr).concat(finalKeysList);
-    };
-
-    // get IColumn[]
-    // when user click [Add Column] need to use the function
-    private initTableColumnList = (columnList: string[]): IColumn[] => {
-        // const { columnList } = this.props;
-        const disabledAddCustomizedTrial = ['DONE', 'ERROR', 'STOPPED'].includes(EXPERIMENT.status);
-        const showColumn: IColumn[] = [];
-        for (const item of columnList) {
-            const paraColumn = item.match(/ \(search space\)$/);
-            let result;
-            if (paraColumn !== null) {
-                result = paraColumn.input;
-            }
-            switch (item) {
-                case 'Trial No.':
-                    showColumn.push(this.SequenceIdColumnConfig);
-                    break;
-                case 'ID':
-                    showColumn.push(this.IdColumnConfig);
-                    break;
-                case 'Start time':
-                    showColumn.push(this.StartTimeColumnConfig);
-                    break;
-                case 'End time':
-                    showColumn.push(this.EndTimeColumnConfig);
-                    break;
-                case 'Duration':
-                    showColumn.push(this.DurationColumnConfig);
-                    break;
-                case 'Status':
-                    showColumn.push(this.StatusColumnConfig);
-                    break;
-                case 'Intermediate result':
-                    showColumn.push(this.IntermediateCountColumnConfig);
-                    break;
-                case 'Default':
-                    showColumn.push(this.AccuracyColumnConfig);
-                    break;
-                case 'Operation':
-                    showColumn.push({
-                        name: 'Operation',
-                        key: 'operation',
-                        fieldName: 'operation',
-                        minWidth: 160,
-                        maxWidth: 200,
-                        isResizable: true,
-                        className: 'detail-table',
-                        onRender: (record: any) => {
-                            const trialStatus = record.status;
-                            const flag: boolean = trialStatus === 'RUNNING' || trialStatus === 'UNKNOWN' ? false : true;
-                            return (
-                                <Stack className='detail-button' horizontal>
-                                    {/* see intermediate result graph */}
-                                    <PrimaryButton
-                                        className='detail-button-operation'
-                                        title='Intermediate'
-                                        onClick={this.showIntermediateModal.bind(this, record)}
-                                    >
-                                        {LineChart}
-                                    </PrimaryButton>
-                                    {/* kill job */}
-                                    {flag ? (
-                                        <PrimaryButton className='detail-button-operation' disabled={true} title='kill'>
-                                            {blocked}
-                                        </PrimaryButton>
-                                    ) : (
-                                        <KillJob trial={record} />
-                                    )}
-                                    {/* Add a new trial-customized trial */}
-                                    <PrimaryButton
-                                        className='detail-button-operation'
-                                        title='Customized trial'
-                                        onClick={this.setCustomizedTrial.bind(this, record.id)}
-                                        disabled={disabledAddCustomizedTrial}
-                                    >
-                                        {copy}
-                                    </PrimaryButton>
-                                </Stack>
-                            );
-                        }
-                    });
-                    break;
-                case result:
-                    // remove SEARCH_SPACE title
-                    // const realItem = item.replace(' (search space)', '');
-                    showColumn.push({
-                        name: item.replace(' (search space)', ''),
-                        key: item,
-                        fieldName: item,
-                        minWidth: 150,
-                        onRender: (record: TableRecord) => {
-                            const eachTrial = TRIALS.getTrial(record.id);
-                            return <span>{eachTrial.description.parameters[item.replace(' (search space)', '')]}</span>;
-                        }
-                    });
-                    break;
-                default:
-                    showColumn.push({
-                        name: item,
-                        key: item,
-                        fieldName: item,
-                        minWidth: 100,
-                        onRender: (record: TableRecord) => {
-                            const accDictionary = record.accDictionary;
-                            let other = '';
-                            if (accDictionary !== undefined) {
-                                other = accDictionary[item].toString();
-                            }
-                            return (
-                                <TooltipHost content={other}>
-                                    <div className='ellipsis'>{other}</div>
-                                </TooltipHost>
-                            );
-                        }
-                    });
-            }
-        }
-        return showColumn;
-    };
-
-    componentDidMount(): void {
-        window.addEventListener('resize', this.onWindowResize);
-        this.updateData();
-    }
-
-    componentDidUpdate(prevProps: TableListProps): void {
-        if (this.props.columnList !== prevProps.columnList || this.props.tableSource !== prevProps.tableSource) {
-            const { columnList } = this.props;
-            this.setState(
-                {
-                    tableColumns: this.initTableColumnList(columnList),
-                    allColumnList: this.getAllColumnKeys()
-                },
-                () => {
-                    this.updateData();
-                }
-            );
-        }
-    }
-
-    updateData(): void {
-        const tableSource: Array<TableRecord> = JSON.parse(JSON.stringify(this.props.tableSource));
-
-        const tableSlice = tableSource.slice(this.state.offset, this.state.offset + this.state.perPage);
-
-        this.setState({
-            tableSourceForSort: tableSlice,
-            pageCount: Math.ceil(tableSource.length / this.state.perPage)
-        });
-    }
-
-    handlePageClick = (evt: any): void => {
-        const selectedPage = evt.selected;
-        const offset = selectedPage * this.state.perPage;
-
-        this.setState(
-            {
-                currentPage: selectedPage,
-                offset: offset
-            },
-            () => {
-                this.updateData();
-            }
-        );
-    };
-
-    updateperPage = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
-        // clear input value and re-render table
-        if (item !== undefined) {
-            this.setState(
-                {
-                    perPage: item.key === 'all' ? this.props.tableSource.length : Number(item.key)
-                },
-                () => {
-                    this.updateData();
-                }
-            );
-        }
-    };
-
-    render(): React.ReactNode {
-        const {
-            intermediateKey,
-            modalIntermediateWidth,
-            modalIntermediateHeight,
-            tableColumns,
-            allColumnList,
-            isShowColumn,
-            modalVisible,
-            selectRows,
-            isShowCompareModal,
-            intermediateOtherKeys,
-            isShowCustomizedModal,
-            copyTrialId,
-            intermediateOption,
-            sortMessage
-        } = this.state;
-        const { columnList } = this.props;
-        const tableSource = this.state.tableSourceForSort;
-        const perPageOptions = [
-            { key: '10', text: '10 items per page' },
-            { key: '20', text: '20 items per page' },
-            { key: '50', text: '50 items per page' },
-            { key: 'all', text: 'All items' }
-        ];
-
-        if (sortMessage.field !== '') {
-            tableSource.sort(function(a, b): any {
-                if (a[sortMessage.field] === undefined) {
-                    return 1;
-                }
-                if (b[sortMessage.field] === undefined) {
-                    return -1;
-                }
-                return (sortMessage.isDescend
-                  ? a[sortMessage.field] < b[sortMessage.field]
-                  : a[sortMessage.field] > b[sortMessage.field])
-                    ? 1
-                    : -1;
-            });
-        }
-
-        return (
-            <Stack>
-                <div id='tableList'>
-                    <DetailsList
-                        columns={tableColumns}
-                        items={tableSource}
-                        setKey='set'
-                        compact={true}
-                        onRenderRow={this.onRenderRow}
-                        layoutMode={DetailsListLayoutMode.justified}
-                        selectionMode={SelectionMode.multiple}
-                        selection={this.getSelectedRows}
-                    />
-
-                    <Stack
-                        horizontal
-                        horizontalAlign='end'
-                        verticalAlign='baseline'
-                        styles={{ root: { padding: 10 } }}
-                        tokens={horizontalGapStackTokens}
-                    >
-                        <Dropdown
-                            selectedKey={
-                                this.state.perPage === this.props.tableSource.length
-                                    ? 'all'
-                                    : String(this.state.perPage)
-                            }
-                            options={perPageOptions}
-                            onChange={this.updateperPage}
-                            styles={{ dropdown: { width: 150 } }}
-                        />
-
-                        {/* this.props.tableSource.length > this.state.perPage &&  */}
-                        <ReactPaginate
-                            previousLabel={'<'}
-                            nextLabel={'>'}
-                            breakLabel={'...'}
-                            breakClassName={'break'}
-                            pageCount={this.state.pageCount}
-                            marginPagesDisplayed={2}
-                            pageRangeDisplayed={2}
-                            onPageChange={this.handlePageClick}
-                            containerClassName={this.props.tableSource.length == 0 ? 'pagination hidden' : 'pagination'}
-                            subContainerClassName={'pages pagination'}
-                            disableInitialCallback={false}
-                            activeClassName={'active'}
-                        />
-                    </Stack>
-
-                    {/* /> */}
-                </div>
-                {/* Intermediate Result Modal */}
-                <Modal
-                    isOpen={modalVisible}
-                    onDismiss={this.hideIntermediateModal}
-                    containerClassName={contentStyles.container}
-                >
-                    <div className={contentStyles.header}>
-                        <span>Intermediate result</span>
-                        <IconButton
-                            styles={iconButtonStyles}
-                            iconProps={{ iconName: 'Cancel' }}
-                            ariaLabel='Close popup modal'
-                            onClick={this.hideIntermediateModal as any}
-                        />
-                    </div>
-                    {intermediateOtherKeys.length > 1 ? (
-                        <Stack horizontalAlign='end' className='selectKeys'>
-                            <Dropdown
-                                className='select'
-                                selectedKey={intermediateKey}
-                                options={intermediateOtherKeys.map((key, item) => {
-                                    return {
-                                        key: key,
-                                        text: intermediateOtherKeys[item]
-                                    };
-                                })}
-                                onChange={this.selectOtherKeys}
-                            />
-                        </Stack>
-                    ) : null}
-                    <div className='intermediate-graph'>
-                        <ReactEcharts
-                            option={intermediateOption}
-                            style={{
-                                width: 0.5 * modalIntermediateWidth,
-                                height: 0.7 * modalIntermediateHeight,
-                                maxHeight: 534,
-                                padding: 20
-                            }}
-                            theme='my_theme'
-                        />
-                        <div className='xAxis'>#Intermediate result</div>
-                    </div>
-                </Modal>
-                {/* Add Column Modal */}
-                {isShowColumn && (
-                    <ChangeColumnComponent
-                        hideShowColumnDialog={this.hideShowColumnModal}
-                        isHideDialog={!isShowColumn}
-                        showColumn={allColumnList}
-                        selectedColumn={columnList}
-                        changeColumn={this.props.changeColumn}
-                    />
-                )}
-                {/* compare trials based message */}
-                {isShowCompareModal && <Compare compareStacks={selectRows} cancelFunc={this.hideCompareModal} />}
-                {/* clone trial parameters and could submit a customized trial */}
-                <Customize
-                    visible={isShowCustomizedModal}
-                    copyTrialId={copyTrialId}
-                    closeCustomizeModal={this.closeCustomizedTrial}
-                />
-            </Stack>
-        );
-    }
+	public intervalTrialLog = 10;
+	public trialId!: string;
+
+	constructor(props: TableListProps) {
+		super(props);
+
+		this.state = {
+			intermediateOption: {},
+			modalVisible: false,
+			isObjFinal: false,
+			isShowColumn: false,
+			isShowCompareModal: false,
+			selectRows: [],
+			selectedRowKeys: [], // close selected trial message after modal closed
+			intermediateData: [],
+			intermediateId: '',
+			intermediateOtherKeys: [],
+			isShowCustomizedModal: false,
+			isCalloutVisible: false,
+			copyTrialId: '',
+			intermediateKey: 'default',
+			isExpand: false,
+			modalIntermediateWidth: window.innerWidth,
+			modalIntermediateHeight: window.innerHeight,
+			tableColumns: this.initTableColumnList(this.props.columnList),
+			allColumnList: this.getAllColumnKeys(),
+			sortMessage: { field: '', isDescend: false },
+			offset: 0,
+			data: [],
+			perPage: 20,
+			currentPage: 0,
+			pageCount: 0,
+			tableSourceForSort: this.props.tableSource
+		};
+	}
+
+	// sort for table column
+	onColumnClick = (ev: React.MouseEvent<HTMLElement>, getColumn: IColumn): void => {
+		const { tableColumns, tableSourceForSort } = this.state;
+		const newColumns: IColumn[] = tableColumns.slice();
+		const currColumn: IColumn = newColumns.filter(item => getColumn.key === item.key)[0];
+		newColumns.forEach((newCol: IColumn) => {
+			if (newCol === currColumn) {
+				currColumn.isSortedDescending = !currColumn.isSortedDescending;
+				currColumn.isSorted = true;
+			} else {
+				newCol.isSorted = false;
+				newCol.isSortedDescending = true;
+			}
+		});
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		const newItems = this.copyAndSort(tableSourceForSort, currColumn.fieldName!, currColumn.isSortedDescending);
+		this.setState({
+			tableColumns: newColumns,
+			tableSourceForSort: newItems,
+			sortMessage: { field: getColumn.key, isDescend: currColumn.isSortedDescending }
+		});
+	};
+
+	private copyAndSort<T>(items: T[], columnKey: string, isSortedDescending?: boolean): any {
+		const key = columnKey as keyof T;
+		return items.slice(0).sort(function(a: T, b: T): any {
+			if (a[key] === undefined) {
+				return 1;
+			}
+			if (b[key] === undefined) {
+				return -1;
+			}
+			return (isSortedDescending ? a[key] < b[key] : a[key] > b[key]) ? 1 : -1;
+		});
+	}
+
+	AccuracyColumnConfig: any = {
+		name: 'Default metric',
+		className: 'leftTitle',
+		key: 'latestAccuracy',
+		fieldName: 'latestAccuracy',
+		minWidth: 200,
+		maxWidth: 300,
+		isResizable: true,
+		data: 'number',
+		onColumnClick: this.onColumnClick,
+		onRender: (item): React.ReactNode => (
+			<TooltipHost content={item.formattedLatestAccuracy}>
+				<div className='ellipsis'>{item.formattedLatestAccuracy}</div>
+			</TooltipHost>
+		)
+	};
+
+	SequenceIdColumnConfig: any = {
+		name: 'Trial No.',
+		key: 'sequenceId',
+		fieldName: 'sequenceId',
+		minWidth: 80,
+		maxWidth: 240,
+		className: 'tableHead',
+		data: 'number',
+		onColumnClick: this.onColumnClick
+	};
+
+	IdColumnConfig: any = {
+		name: 'ID',
+		key: 'id',
+		fieldName: 'id',
+		minWidth: 150,
+		maxWidth: 200,
+		isResizable: true,
+		data: 'string',
+		onColumnClick: this.onColumnClick,
+		className: 'tableHead leftTitle'
+	};
+
+	StartTimeColumnConfig: any = {
+		name: 'Start time',
+		key: 'startTime',
+		fieldName: 'startTime',
+		minWidth: 150,
+		maxWidth: 400,
+		isResizable: true,
+		data: 'number',
+		onColumnClick: this.onColumnClick,
+		onRender: (record): React.ReactNode => <span>{formatTimestamp(record.startTime)}</span>
+	};
+
+	EndTimeColumnConfig: any = {
+		name: 'End time',
+		key: 'endTime',
+		fieldName: 'endTime',
+		minWidth: 200,
+		maxWidth: 400,
+		isResizable: true,
+		data: 'number',
+		onColumnClick: this.onColumnClick,
+		onRender: (record): React.ReactNode => <span>{formatTimestamp(record.endTime, '--')}</span>
+	};
+
+	DurationColumnConfig: any = {
+		name: 'Duration',
+		key: 'duration',
+		fieldName: 'duration',
+		minWidth: 150,
+		maxWidth: 300,
+		isResizable: true,
+		data: 'number',
+		onColumnClick: this.onColumnClick,
+		onRender: (record): React.ReactNode => <span className='durationsty'>{convertDuration(record.duration)}</span>
+	};
+
+	StatusColumnConfig: any = {
+		name: 'Status',
+		key: 'status',
+		fieldName: 'status',
+		className: 'tableStatus',
+		minWidth: 150,
+		maxWidth: 250,
+		isResizable: true,
+		data: 'string',
+		onColumnClick: this.onColumnClick,
+		onRender: (record): React.ReactNode => <span className={`${record.status} commonStyle`}>{record.status}</span>
+	};
+
+	IntermediateCountColumnConfig: any = {
+		name: 'Intermediate result',
+		dataIndex: 'intermediateCount',
+		fieldName: 'intermediateCount',
+		minWidth: 150,
+		maxWidth: 200,
+		isResizable: true,
+		data: 'number',
+		onColumnClick: this.onColumnClick,
+		onRender: (record): React.ReactNode => <span>{`#${record.intermediateCount}`}</span>
+	};
+
+	showIntermediateModal = async (record: TrialJobInfo, event: React.SyntheticEvent<EventTarget>): Promise<void> => {
+		event.preventDefault();
+		event.stopPropagation();
+		const res = await axios.get(`${MANAGER_IP}/metric-data/${record.id}`);
+		if (res.status === 200) {
+			const intermediateArr: number[] = [];
+			// support intermediate result is dict because the last intermediate result is
+			// final result in a succeed trial, it may be a dict.
+			// get intermediate result dict keys array
+			const { intermediateKey } = this.state;
+			const otherkeys: string[] = [];
+			const metricDatas = res.data;
+			if (metricDatas.length !== 0) {
+				// just add type=number keys
+				const intermediateMetrics = parseMetrics(metricDatas[0].data);
+				for (const key in intermediateMetrics) {
+					if (typeof intermediateMetrics[key] === 'number') {
+						otherkeys.push(key);
+					}
+				}
+			}
+			// intermediateArr just store default val
+			metricDatas.map(item => {
+				if (item.type === 'PERIODICAL') {
+					const temp = parseMetrics(item.data);
+					if (typeof temp === 'object') {
+						intermediateArr.push(temp[intermediateKey]);
+					} else {
+						intermediateArr.push(temp);
+					}
+				}
+			});
+			const intermediate = intermediateGraphOption(intermediateArr, record.id);
+			this.setState({
+				intermediateData: res.data, // store origin intermediate data for a trial
+				intermediateOption: intermediate,
+				intermediateOtherKeys: otherkeys,
+				intermediateId: record.id
+			});
+		}
+		this.setState({ modalVisible: true });
+	};
+
+	// intermediate button click -> intermediate graph for each trial
+	// support intermediate is dict
+	selectOtherKeys = (event: React.FormEvent<HTMLDivElement>, item?: IDropdownOption): void => {
+		if (item !== undefined) {
+			const value = item.text;
+			const isShowDefault: boolean = value === 'default' ? true : false;
+			const { intermediateData, intermediateId } = this.state;
+			const intermediateArr: number[] = [];
+			// just watch default key-val
+			if (isShowDefault === true) {
+				Object.keys(intermediateData).map(item => {
+					if (intermediateData[item].type === 'PERIODICAL') {
+						const temp = parseMetrics(intermediateData[item].data);
+						if (typeof temp === 'object') {
+							intermediateArr.push(temp[value]);
+						} else {
+							intermediateArr.push(temp);
+						}
+					}
+				});
+			} else {
+				Object.keys(intermediateData).map(item => {
+					const temp = parseMetrics(intermediateData[item].data);
+					if (typeof temp === 'object') {
+						intermediateArr.push(temp[value]);
+					}
+				});
+			}
+			const intermediate = intermediateGraphOption(intermediateArr, intermediateId);
+			// re-render
+			this.setState({
+				intermediateKey: value,
+				intermediateOption: intermediate
+			});
+		}
+	};
+
+	hideIntermediateModal = (): void => {
+		this.setState({
+			modalVisible: false
+		});
+	};
+
+	hideShowColumnModal = (): void => {
+		this.setState(() => ({ isShowColumn: false }));
+	};
+
+	// click add column btn, just show the modal of addcolumn
+	addColumn = (): void => {
+		// show user select check button
+		this.setState(() => ({ isShowColumn: true }));
+	};
+
+	fillSelectedRowsTostate = (selected: number[] | string[], selectedRows: Array<TableRecord>): void => {
+		this.setState({ selectRows: selectedRows, selectedRowKeys: selected });
+	};
+
+	// open Compare-modal
+	compareBtn = (): void => {
+		const { selectRows } = this.state;
+		if (selectRows.length === 0) {
+			alert('Please select datas you want to compare!');
+		} else {
+			this.setState({ isShowCompareModal: true });
+		}
+	};
+
+	// close Compare-modal
+	hideCompareModal = (): void => {
+		// close modal. clear select rows data, clear selected track
+		this.setState({ isShowCompareModal: false, selectedRowKeys: [], selectRows: [] });
+	};
+
+	// open customized trial modal
+	private setCustomizedTrial = (trialId: string, event: React.SyntheticEvent<EventTarget>): void => {
+		event.preventDefault();
+		event.stopPropagation();
+		this.setState({
+			isShowCustomizedModal: true,
+			copyTrialId: trialId
+		});
+	};
+
+	private closeCustomizedTrial = (): void => {
+		this.setState({
+			isShowCustomizedModal: false,
+			copyTrialId: ''
+		});
+	};
+
+	private onWindowResize = (): void => {
+		this.setState(() => ({
+			modalIntermediateHeight: window.innerHeight,
+			modalIntermediateWidth: window.innerWidth
+		}));
+	};
+
+	private onRenderRow: IDetailsListProps['onRenderRow'] = props => {
+		if (props) {
+			return <Details detailsProps={props} />;
+		}
+		return null;
+	};
+
+	private getSelectedRows = new Selection({
+		onSelectionChanged: (): void => {
+			this.setState(() => ({ selectRows: this.getSelectedRows.getSelection() }));
+		}
+	});
+
+	// trial parameters & dict final keys & Trial No. Id ...
+	private getAllColumnKeys = (): string[] => {
+		const tableSource: Array<TableRecord> = JSON.parse(JSON.stringify(this.props.tableSource));
+		// parameter as table column
+		const parameterStr: string[] = [];
+		if (!EXPERIMENT.isNestedExp()) {
+			if (tableSource.length > 0) {
+				const trialMess = TRIALS.getTrial(tableSource[0].id);
+				const trial = trialMess.description.parameters;
+				const parameterColumn: string[] = Object.keys(trial);
+				parameterColumn.forEach(value => {
+					parameterStr.push(`${value} (search space)`);
+				});
+			}
+		}
+		// concat trial all final keys and remove dup "default" val, return list
+		const finalKeysList = TRIALS.finalKeys().filter(item => item !== 'default');
+		return COLUMNPro.concat(parameterStr).concat(finalKeysList);
+	};
+
+	// get IColumn[]
+	// when user click [Add Column] need to use the function
+	private initTableColumnList = (columnList: string[]): IColumn[] => {
+		// const { columnList } = this.props;
+		const disabledAddCustomizedTrial = ['DONE', 'ERROR', 'STOPPED'].includes(EXPERIMENT.status);
+		const showColumn: IColumn[] = [];
+		for (const item of columnList) {
+			const paraColumn = item.match(/ \(search space\)$/);
+			let result;
+			if (paraColumn !== null) {
+				result = paraColumn.input;
+			}
+			switch (item) {
+				case 'Trial No.':
+					showColumn.push(this.SequenceIdColumnConfig);
+					break;
+				case 'ID':
+					showColumn.push(this.IdColumnConfig);
+					break;
+				case 'Start time':
+					showColumn.push(this.StartTimeColumnConfig);
+					break;
+				case 'End time':
+					showColumn.push(this.EndTimeColumnConfig);
+					break;
+				case 'Duration':
+					showColumn.push(this.DurationColumnConfig);
+					break;
+				case 'Status':
+					showColumn.push(this.StatusColumnConfig);
+					break;
+				case 'Intermediate result':
+					showColumn.push(this.IntermediateCountColumnConfig);
+					break;
+				case 'Default':
+					showColumn.push(this.AccuracyColumnConfig);
+					break;
+				case 'Operation':
+					showColumn.push({
+						name: 'Operation',
+						key: 'operation',
+						fieldName: 'operation',
+						minWidth: 160,
+						maxWidth: 200,
+						isResizable: true,
+						className: 'detail-table',
+						onRender: (record: any) => {
+							const trialStatus = record.status;
+							const flag: boolean = trialStatus === 'RUNNING' || trialStatus === 'UNKNOWN' ? false : true;
+							return (
+								<Stack className='detail-button' horizontal>
+									{/* see intermediate result graph */}
+									<PrimaryButton
+										className='detail-button-operation'
+										title='Intermediate'
+										onClick={this.showIntermediateModal.bind(this, record)}
+									>
+										{LineChart}
+									</PrimaryButton>
+									{/* kill job */}
+									{flag ? (
+										<PrimaryButton className='detail-button-operation' disabled={true} title='kill'>
+											{blocked}
+										</PrimaryButton>
+									) : (
+										<KillJob trial={record} />
+									)}
+									{/* Add a new trial-customized trial */}
+									<PrimaryButton
+										className='detail-button-operation'
+										title='Customized trial'
+										onClick={this.setCustomizedTrial.bind(this, record.id)}
+										disabled={disabledAddCustomizedTrial}
+									>
+										{copy}
+									</PrimaryButton>
+								</Stack>
+							);
+						}
+					});
+					break;
+				case result:
+					// remove SEARCH_SPACE title
+					// const realItem = item.replace(' (search space)', '');
+					showColumn.push({
+						name: item.replace(' (search space)', ''),
+						key: item,
+						fieldName: item,
+						minWidth: 150,
+						onRender: (record: TableRecord) => {
+							const eachTrial = TRIALS.getTrial(record.id);
+							return <span>{eachTrial.description.parameters[item.replace(' (search space)', '')]}</span>;
+						}
+					});
+					break;
+				default:
+					showColumn.push({
+						name: item,
+						key: item,
+						fieldName: item,
+						minWidth: 100,
+						onRender: (record: TableRecord) => {
+							const accDictionary = record.accDictionary;
+							let other = '';
+							if (accDictionary !== undefined) {
+								other = accDictionary[item].toString();
+							}
+							return (
+								<TooltipHost content={other}>
+									<div className='ellipsis'>{other}</div>
+								</TooltipHost>
+							);
+						}
+					});
+			}
+		}
+		return showColumn;
+	};
+
+	componentDidMount(): void {
+		window.addEventListener('resize', this.onWindowResize);
+		this.updateData();
+	}
+
+	componentDidUpdate(prevProps: TableListProps): void {
+		if (this.props.columnList !== prevProps.columnList || this.props.tableSource !== prevProps.tableSource) {
+			const { columnList } = this.props;
+			this.setState(
+				{
+					tableColumns: this.initTableColumnList(columnList),
+					allColumnList: this.getAllColumnKeys()
+				},
+				() => {
+					this.updateData();
+				}
+			);
+		}
+	}
+
+	updateData(): void {
+		const tableSource: Array<TableRecord> = JSON.parse(JSON.stringify(this.props.tableSource));
+
+		const tableSlice = tableSource.slice(this.state.offset, this.state.offset + this.state.perPage);
+
+		this.setState({
+			tableSourceForSort: tableSlice,
+			pageCount: Math.ceil(tableSource.length / this.state.perPage)
+		});
+	}
+
+	handlePageClick = (evt: any): void => {
+		const selectedPage = evt.selected;
+		const offset = selectedPage * this.state.perPage;
+
+		this.setState(
+			{
+				currentPage: selectedPage,
+				offset: offset
+			},
+			() => {
+				this.updateData();
+			}
+		);
+	};
+
+	updateperPage = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
+		// clear input value and re-render table
+		if (item !== undefined) {
+			this.setState(
+				{
+					perPage: item.key === 'all' ? this.props.tableSource.length : Number(item.key)
+				},
+				() => {
+					this.updateData();
+				}
+			);
+		}
+	};
+
+	render(): React.ReactNode {
+		const {
+			intermediateKey,
+			modalIntermediateWidth,
+			modalIntermediateHeight,
+			tableColumns,
+			allColumnList,
+			isShowColumn,
+			modalVisible,
+			selectRows,
+			isShowCompareModal,
+			intermediateOtherKeys,
+			isShowCustomizedModal,
+			copyTrialId,
+			intermediateOption,
+			sortMessage
+		} = this.state;
+		const { columnList } = this.props;
+		const tableSource = this.state.tableSourceForSort;
+		const perPageOptions = [
+			{ key: '10', text: '10 items per page' },
+			{ key: '20', text: '20 items per page' },
+			{ key: '50', text: '50 items per page' },
+			{ key: 'all', text: 'All items' }
+		];
+
+		if (sortMessage.field !== '') {
+			tableSource.sort(function(a, b): any {
+				if (a[sortMessage.field] === undefined) {
+					return 1;
+				}
+				if (b[sortMessage.field] === undefined) {
+					return -1;
+				}
+				return (sortMessage.isDescend
+				? a[sortMessage.field] < b[sortMessage.field]
+				: a[sortMessage.field] > b[sortMessage.field])
+					? 1
+					: -1;
+			});
+		}
+
+		return (
+			<Stack>
+				<div id='tableList'>
+					<DetailsList
+						columns={tableColumns}
+						items={tableSource}
+						setKey='set'
+						compact={true}
+						onRenderRow={this.onRenderRow}
+						layoutMode={DetailsListLayoutMode.justified}
+						selectionMode={SelectionMode.multiple}
+						selection={this.getSelectedRows}
+					/>
+
+					<Stack
+						horizontal
+						horizontalAlign='end'
+						verticalAlign='baseline'
+						styles={{ root: { padding: 10 } }}
+						tokens={horizontalGapStackTokens}
+					>
+						<Dropdown
+							selectedKey={
+								this.state.perPage === this.props.tableSource.length
+									? 'all'
+									: String(this.state.perPage)
+							}
+							options={perPageOptions}
+							onChange={this.updateperPage}
+							styles={{ dropdown: { width: 150 } }}
+						/>
+
+						{/* this.props.tableSource.length > this.state.perPage &&  */}
+						<ReactPaginate
+							previousLabel={'<'}
+							nextLabel={'>'}
+							breakLabel={'...'}
+							breakClassName={'break'}
+							pageCount={this.state.pageCount}
+							marginPagesDisplayed={2}
+							pageRangeDisplayed={2}
+							onPageChange={this.handlePageClick}
+							containerClassName={this.props.tableSource.length == 0 ? 'pagination hidden' : 'pagination'}
+							subContainerClassName={'pages pagination'}
+							disableInitialCallback={false}
+							activeClassName={'active'}
+						/>
+					</Stack>
+
+					{/* /> */}
+				</div>
+				{/* Intermediate Result Modal */}
+				<Modal
+					isOpen={modalVisible}
+					onDismiss={this.hideIntermediateModal}
+					containerClassName={contentStyles.container}
+				>
+					<div className={contentStyles.header}>
+						<span>Intermediate result</span>
+						<IconButton
+							styles={iconButtonStyles}
+							iconProps={{ iconName: 'Cancel' }}
+							ariaLabel='Close popup modal'
+							onClick={this.hideIntermediateModal as any}
+						/>
+					</div>
+					{intermediateOtherKeys.length > 1 ? (
+						<Stack horizontalAlign='end' className='selectKeys'>
+							<Dropdown
+								className='select'
+								selectedKey={intermediateKey}
+								options={intermediateOtherKeys.map((key, item) => {
+									return {
+										key: key,
+										text: intermediateOtherKeys[item]
+									};
+								})}
+								onChange={this.selectOtherKeys}
+							/>
+						</Stack>
+					) : null}
+					<div className='intermediate-graph'>
+						<ReactEcharts
+							option={intermediateOption}
+							style={{
+								width: 0.5 * modalIntermediateWidth,
+								height: 0.7 * modalIntermediateHeight,
+								maxHeight: 534,
+								padding: 20
+							}}
+							theme='my_theme'
+						/>
+						<div className='xAxis'>#Intermediate result</div>
+					</div>
+				</Modal>
+				{/* Add Column Modal */}
+				{isShowColumn && (
+					<ChangeColumnComponent
+						hideShowColumnDialog={this.hideShowColumnModal}
+						isHideDialog={!isShowColumn}
+						showColumn={allColumnList}
+						selectedColumn={columnList}
+						changeColumn={this.props.changeColumn}
+					/>
+				)}
+				{/* compare trials based message */}
+				{isShowCompareModal && <Compare compareStacks={selectRows} cancelFunc={this.hideCompareModal} />}
+				{/* clone trial parameters and could submit a customized trial */}
+				<Customize
+					visible={isShowCustomizedModal}
+					copyTrialId={copyTrialId}
+					closeCustomizeModal={this.closeCustomizedTrial}
+				/>
+			</Stack>
+		);
+	}
 }
 
 export default TableList;
diff --git a/src/webui/src/index.css b/src/webui/src/index.css
index 3f79985706..810df14238 100644
--- a/src/webui/src/index.css
+++ b/src/webui/src/index.css
@@ -1,19 +1,33 @@
 body {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100%;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  line-height: 1;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    font-family:
+        -apple-system,
+        BlinkMacSystemFont,
+        'Segoe UI',
+        'Roboto',
+        'Oxygen',
+        'Ubuntu',
+        'Cantarell',
+        'Fira Sans',
+        'Droid Sans',
+        'Helvetica Neue',
+        sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: 1;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+    font-family:
+        source-code-pro,
+        Menlo,
+        Monaco,
+        Consolas,
+        'Courier New',
+        monospace;
 }
 
 /* http://meyerweb.com/eric/tools/css/reset/
@@ -21,46 +35,135 @@ code {
    License: none (public domain)
 */
 
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-main, menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font: inherit;	
-	font-size: 100%;
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    font-size: 100%;
 }
+
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, main, menu, nav, section {
-	display: block;
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section {
+    display: block;
 }
+
 /* HTML5 hidden-attribute fix for newer browsers */
 *[hidden] {
     display: none;
 }
-ol, ul {
-	list-style: none;
+
+ol,
+ul {
+    list-style: none;
 }
-blockquote, q {
-	quotes: none;
+
+blockquote,
+q {
+    quotes: none;
 }
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+    content: '';
+    content: none;
 }
+
 table {
-	border-collapse: collapse;
-	border-spacing: 0;
+    border-collapse: collapse;
+    border-spacing: 0;
 }
diff --git a/src/webui/src/index.tsx b/src/webui/src/index.tsx
index 22e7d9132f..968d11693a 100644
--- a/src/webui/src/index.tsx
+++ b/src/webui/src/index.tsx
@@ -8,16 +8,16 @@ import './index.css';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
-    <Router history={browserHistory}>
-        <Route path='/' component={App}>
-            <IndexRedirect to='/oview' />
-            <Route path='/oview' component={Overview} />
-            <Route path='/detail' component={TrialsDetail} />
-            {/* test branch */}
-        </Route>
-    </Router>,
+	<Router history={browserHistory}>
+		<Route path='/' component={App}>
+			<IndexRedirect to='/oview' />
+			<Route path='/oview' component={Overview} />
+			<Route path='/detail' component={TrialsDetail} />
+			{/* test branch */}
+		</Route>
+	</Router>,
 
-    document.getElementById('root')
+	document.getElementById('root')
 );
 
 // If you want your app to work offline and load faster, you can change
diff --git a/src/webui/src/react-app-env.d.ts b/src/webui/src/react-app-env.d.ts
index 0af75e6f50..cd9072a81e 100644
--- a/src/webui/src/react-app-env.d.ts
+++ b/src/webui/src/react-app-env.d.ts
@@ -1,60 +1,60 @@
 declare namespace NodeJS {
-    interface ProcessEnv {
-        readonly NODE_ENV: 'development' | 'production' | 'test';
-        readonly PUBLIC_URL: string;
-    }
+	interface ProcessEnv {
+		readonly NODE_ENV: 'development' | 'production' | 'test';
+		readonly PUBLIC_URL: string;
+	}
 }
 
 declare module '*.bmp' {
-    const src: string;
-    export default src;
+	const src: string;
+	export default src;
 }
 
 declare module '*.gif' {
-    const src: string;
-    export default src;
+	const src: string;
+	export default src;
 }
 
 declare module '*.jpg' {
-    const src: string;
-    export default src;
+	const src: string;
+	export default src;
 }
 
 declare module '*.jpeg' {
-    const src: string;
-    export default src;
+	const src: string;
+	export default src;
 }
 
 declare module '*.png' {
-    const src: string;
-    export default src;
+	const src: string;
+	export default src;
 }
 
 declare module '*.webp' {
-    const src: string;
-    export default src;
+	const src: string;
+	export default src;
 }
 
 declare module '*.svg' {
-    import * as React from 'react';
+	import * as React from 'react';
 
-    export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+	export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
 
-    const src: string;
-    export default src;
+	const src: string;
+	export default src;
 }
 
 declare module '*.module.css' {
-    const classes: { [key: string]: string };
-    export default classes;
+	const classes: { [key: string]: string };
+	export default classes;
 }
 
 declare module '*.module.scss' {
-    const classes: { [key: string]: string };
-    export default classes;
+	const classes: { [key: string]: string };
+	export default classes;
 }
 
 declare module '*.module.sass' {
-    const classes: { [key: string]: string };
-    export default classes;
+	const classes: { [key: string]: string };
+	export default classes;
 }
diff --git a/src/webui/src/static/const.ts b/src/webui/src/static/const.ts
index f35826b5e0..16ee11acb7 100644
--- a/src/webui/src/static/const.ts
+++ b/src/webui/src/static/const.ts
@@ -6,70 +6,70 @@ const MANAGER_IP = `/api/v1/nni`;
 const DOWNLOAD_IP = `/logs`;
 const WEBUIDOC = 'https://nni.readthedocs.io/en/latest/Tutorial/WebUI.html';
 const trialJobStatus = [
-    'UNKNOWN',
-    'WAITING',
-    'RUNNING',
-    'SUCCEEDED',
-    'FAILED',
-    'USER_CANCELED',
-    'SYS_CANCELED',
-    'EARLY_STOPPED'
+	'UNKNOWN',
+	'WAITING',
+	'RUNNING',
+	'SUCCEEDED',
+	'FAILED',
+	'USER_CANCELED',
+	'SYS_CANCELED',
+	'EARLY_STOPPED'
 ];
 const CONTROLTYPE = ['SEARCH_SPACE', 'TRIAL_CONCURRENCY', 'MAX_EXEC_DURATION'];
 const MONACO = {
-    readOnly: true,
-    automaticLayout: true,
-    scrollBeyondLastLine: false
+	readOnly: true,
+	automaticLayout: true,
+	scrollBeyondLastLine: false
 };
 const DRAWEROPTION = {
-    minimap: { enabled: false },
-    readOnly: true,
-    automaticLayout: true
+	minimap: { enabled: false },
+	readOnly: true,
+	automaticLayout: true
 };
 const OPERATION = 'Operation';
 // defatult selected column
 const COLUMN = ['Trial No.', 'ID', 'Duration', 'Status', 'Default', OPERATION];
 // all choice column !dictory final
 const COLUMNPro = [
-    'Trial No.',
-    'ID',
-    'Start time',
-    'End time',
-    'Duration',
-    'Status',
-    'Intermediate result',
-    'Default',
-    OPERATION
+	'Trial No.',
+	'ID',
+	'Start time',
+	'End time',
+	'Duration',
+	'Status',
+	'Intermediate result',
+	'Default',
+	OPERATION
 ];
 const CONCURRENCYTOOLTIP = 'Trial concurrency is the number of trials running concurrently.';
 const SUPPORTED_SEARCH_SPACE_TYPE = [
-    'choice',
-    'layer_choice',
-    'input_choice',
-    'randint',
-    'uniform',
-    'quniform',
-    'loguniform',
-    'qloguniform',
-    'normal',
-    'qnormal',
-    'lognormal',
-    'qlognormal'
+	'choice',
+	'layer_choice',
+	'input_choice',
+	'randint',
+	'uniform',
+	'quniform',
+	'loguniform',
+	'qloguniform',
+	'normal',
+	'qnormal',
+	'lognormal',
+	'qlognormal'
 ];
 
 export {
-    MANAGER_IP,
-    DOWNLOAD_IP,
-    trialJobStatus,
-    COLUMNPro,
-    WEBUIDOC,
-    CONTROLTYPE,
-    MONACO,
-    COLUMN,
-    DRAWEROPTION,
-    OPERATION,
-    METRIC_GROUP_UPDATE_THRESHOLD,
-    METRIC_GROUP_UPDATE_SIZE,
-    CONCURRENCYTOOLTIP,
-    SUPPORTED_SEARCH_SPACE_TYPE
+	MANAGER_IP,
+	DOWNLOAD_IP,
+	trialJobStatus,
+	COLUMNPro,
+	WEBUIDOC,
+	CONTROLTYPE,
+	MONACO,
+	COLUMN,
+	DRAWEROPTION,
+	OPERATION,
+	METRIC_GROUP_UPDATE_THRESHOLD,
+	METRIC_GROUP_UPDATE_SIZE,
+	CONCURRENCYTOOLTIP,
+	SUPPORTED_SEARCH_SPACE_TYPE
 };
diff --git a/src/webui/src/static/function.ts b/src/webui/src/static/function.ts
index bd27b7e884..ce5bf07d89 100644
--- a/src/webui/src/static/function.ts
+++ b/src/webui/src/static/function.ts
@@ -4,250 +4,250 @@ import { MANAGER_IP } from './const';
 import { MetricDataRecord, FinalType, TableObj } from './interface';
 
 async function requestAxios(url: string): Promise<any> {
-    const response = await axios.get(url);
-    if (response.status === 200) {
-        if (response.data.error !== undefined) {
-            throw new Error(`API ${url} ${response.data.error}`);
-        } else {
-            return response.data as any;
-        }
-    } else {
-        throw new Error(`API ${url} ${response.status} error`);
-    }
+	const response = await axios.get(url);
+	if (response.status === 200) {
+		if (response.data.error !== undefined) {
+			throw new Error(`API ${url} ${response.data.error}`);
+		} else {
+			return response.data as any;
+		}
+	} else {
+		throw new Error(`API ${url} ${response.status} error`);
+	}
 }
 
 const convertTime = (num: number): string => {
-    if (num <= 0) {
-        return '0';
-    }
-    if (num % 3600 === 0) {
-        return num / 3600 + 'h';
-    } else {
-        const hour = Math.floor(num / 3600);
-        const min = Math.floor((num / 60) % 60);
-        return hour > 0 ? `${hour}h ${min}min` : `${min}min`;
-    }
+	if (num <= 0) {
+		return '0';
+	}
+	if (num % 3600 === 0) {
+		return num / 3600 + 'h';
+	} else {
+		const hour = Math.floor(num / 3600);
+		const min = Math.floor((num / 60) % 60);
+		return hour > 0 ? `${hour}h ${min}min` : `${min}min`;
+	}
 };
 
 // trial's duration, accurate to seconds for example 10min 30s
 const convertDuration = (num: number): string => {
-    if (num < 1) {
-        return '0s';
-    }
-    const hour = Math.floor(num / 3600);
-    const minute = Math.floor((num / 60) % 60);
-    const second = Math.floor(num % 60);
-    const result: string[] = [];
-    if (hour > 0) {
-        result.push(`${hour}h`);
-    }
-    if (minute > 0) {
-        result.push(`${minute}min`);
-    }
-    if (second > 0) {
-        result.push(`${second}s`);
-    }
-    return result.join(' ');
+	if (num < 1) {
+		return '0s';
+	}
+	const hour = Math.floor(num / 3600);
+	const minute = Math.floor((num / 60) % 60);
+	const second = Math.floor(num % 60);
+	const result: string[] = [];
+	if (hour > 0) {
+		result.push(`${hour}h`);
+	}
+	if (minute > 0) {
+		result.push(`${minute}min`);
+	}
+	if (second > 0) {
+		result.push(`${second}s`);
+	}
+	return result.join(' ');
 };
 
 function parseMetrics(metricData: string): any {
-    if (metricData.includes('NaN')) {
-        return JSON5.parse(JSON5.parse(metricData));
-    } else {
-        return JSON.parse(JSON.parse(metricData));
-    }
+	if (metricData.includes('NaN')) {
+		return JSON5.parse(JSON5.parse(metricData));
+	} else {
+		return JSON.parse(JSON.parse(metricData));
+	}
 }
 
 const isArrayType = (list: any): boolean | undefined => {
-    return Array.isArray(list);
+	return Array.isArray(list);
 };
 
 // get final result value
 // draw Accuracy point graph
 const getFinalResult = (final?: MetricDataRecord[]): number => {
-    let acc;
-    let showDefault = 0;
-    if (final) {
-        acc = parseMetrics(final[final.length - 1].data);
-        if (typeof acc === 'object' && !isArrayType(acc)) {
-            if (acc.default) {
-                showDefault = acc.default;
-            }
-        } else if (typeof acc === 'number') {
-            showDefault = acc;
-        } else {
-            showDefault = NaN;
-        }
-        return showDefault;
-    } else {
-        return 0;
-    }
+	let acc;
+	let showDefault = 0;
+	if (final) {
+		acc = parseMetrics(final[final.length - 1].data);
+		if (typeof acc === 'object' && !isArrayType(acc)) {
+			if (acc.default) {
+				showDefault = acc.default;
+			}
+		} else if (typeof acc === 'number') {
+			showDefault = acc;
+		} else {
+			showDefault = NaN;
+		}
+		return showDefault;
+	} else {
+		return 0;
+	}
 };
 
 // get final result value // acc obj
 const getFinal = (final?: MetricDataRecord[]): FinalType | undefined => {
-    let showDefault: FinalType;
-    if (final) {
-        showDefault = parseMetrics(final[final.length - 1].data);
-        if (typeof showDefault === 'number') {
-            if (!isNaN(showDefault)) {
-                showDefault = { default: showDefault };
-                return showDefault;
-            }
-        } else if (isArrayType(showDefault)) {
-            // not support final type
-            return undefined;
-        } else if (typeof showDefault === 'object' && showDefault.hasOwnProperty('default')) {
-            return showDefault;
-        }
-    } else {
-        return undefined;
-    }
+	let showDefault: FinalType;
+	if (final) {
+		showDefault = parseMetrics(final[final.length - 1].data);
+		if (typeof showDefault === 'number') {
+			if (!isNaN(showDefault)) {
+				showDefault = { default: showDefault };
+				return showDefault;
+			}
+		} else if (isArrayType(showDefault)) {
+			// not support final type
+			return undefined;
+		} else if (typeof showDefault === 'object' && showDefault.hasOwnProperty('default')) {
+			return showDefault;
+		}
+	} else {
+		return undefined;
+	}
 };
 
 // detail page table intermediate button
 const intermediateGraphOption = (intermediateArr: number[], id: string): any => {
-    const sequence: number[] = [];
-    const lengthInter = intermediateArr.length;
-    for (let i = 1; i <= lengthInter; i++) {
-        sequence.push(i);
-    }
-    return {
-        title: {
-            text: id,
-            left: 'center',
-            textStyle: {
-                fontSize: 16,
-                color: '#333'
-            }
-        },
-        tooltip: {
-            trigger: 'item'
-        },
-        xAxis: {
-            // name: '#Intermediate result',
-            data: sequence
-        },
-        yAxis: {
-            name: 'Default metric',
-            type: 'value',
-            data: intermediateArr,
-            scale: true
-        },
-        series: [
-            {
-                symbolSize: 6,
-                type: 'scatter',
-                data: intermediateArr
-            }
-        ]
-    };
+	const sequence: number[] = [];
+	const lengthInter = intermediateArr.length;
+	for (let i = 1; i <= lengthInter; i++) {
+		sequence.push(i);
+	}
+	return {
+		title: {
+			text: id,
+			left: 'center',
+			textStyle: {
+				fontSize: 16,
+				color: '#333'
+			}
+		},
+		tooltip: {
+			trigger: 'item'
+		},
+		xAxis: {
+			// name: '#Intermediate result',
+			data: sequence
+		},
+		yAxis: {
+			name: 'Default metric',
+			type: 'value',
+			data: intermediateArr,
+			scale: true
+		},
+		series: [
+			{
+				symbolSize: 6,
+				type: 'scatter',
+				data: intermediateArr
+			}
+		]
+	};
 };
 
 // kill job
 const killJob = (key: number, id: string, status: string, updateList?: Function): void => {
-    axios(`${MANAGER_IP}/trial-jobs/${id}`, {
-        method: 'DELETE',
-        headers: {
-            'Content-Type': 'application/json;charset=utf-8'
-        }
-    })
-        .then(res => {
-            if (res.status === 200) {
-                // TODO: use Message.txt to tooltip
-                alert('Cancel the job successfully');
-                // render the table
-                if (updateList) {
-                    updateList(); // FIXME
-                }
-            } else {
-                alert('fail to cancel the job');
-            }
-        })
-        .catch(error => {
-            if (error.response.status === 500) {
-                if (error.response.data.error) {
-                    alert(123);
-                    // message.error(error.response.data.error);
-                } else {
-                    alert(234);
-                    // message.error('500 error, fail to cancel the job');
-                }
-            }
-        });
+	axios(`${MANAGER_IP}/trial-jobs/${id}`, {
+		method: 'DELETE',
+		headers: {
+			'Content-Type': 'application/json;charset=utf-8'
+		}
+	})
+		.then(res => {
+			if (res.status === 200) {
+				// TODO: use Message.txt to tooltip
+				alert('Cancel the job successfully');
+				// render the table
+				if (updateList) {
+					updateList(); // FIXME
+				}
+			} else {
+				alert('fail to cancel the job');
+			}
+		})
+		.catch(error => {
+			if (error.response.status === 500) {
+				if (error.response.data.error) {
+					alert(123);
+					// message.error(error.response.data.error);
+				} else {
+					alert(234);
+					// message.error('500 error, fail to cancel the job');
+				}
+			}
+		});
 };
 
 const filterByStatus = (item: TableObj): boolean => {
-    return item.status === 'SUCCEEDED';
+	return item.status === 'SUCCEEDED';
 };
 
 // a waittiong trial may havn't start time
 const filterDuration = (item: TableObj): boolean => {
-    return item.status !== 'WAITING';
+	return item.status !== 'WAITING';
 };
 
 const downFile = (content: string, fileName: string): void => {
-    const aTag = document.createElement('a');
-    const isEdge = navigator.userAgent.indexOf('Edge') !== -1 ? true : false;
-    const file = new Blob([content], { type: 'application/json' });
-    aTag.download = fileName;
-    aTag.href = URL.createObjectURL(file);
-    aTag.click();
-    if (!isEdge) {
-        URL.revokeObjectURL(aTag.href);
-    }
-    if (navigator.userAgent.indexOf('Firefox') > -1) {
-        const downTag = document.createElement('a');
-        downTag.addEventListener('click', function() {
-            downTag.download = fileName;
-            downTag.href = URL.createObjectURL(file);
-        });
-        const eventMouse = document.createEvent('MouseEvents');
-        eventMouse.initEvent('click', false, false);
-        downTag.dispatchEvent(eventMouse);
-    }
+	const aTag = document.createElement('a');
+	const isEdge = navigator.userAgent.indexOf('Edge') !== -1 ? true : false;
+	const file = new Blob([content], { type: 'application/json' });
+	aTag.download = fileName;
+	aTag.href = URL.createObjectURL(file);
+	aTag.click();
+	if (!isEdge) {
+		URL.revokeObjectURL(aTag.href);
+	}
+	if (navigator.userAgent.indexOf('Firefox') > -1) {
+		const downTag = document.createElement('a');
+		downTag.addEventListener('click', function() {
+			downTag.download = fileName;
+			downTag.href = URL.createObjectURL(file);
+		});
+		const eventMouse = document.createEvent('MouseEvents');
+		eventMouse.initEvent('click', false, false);
+		downTag.dispatchEvent(eventMouse);
+	}
 };
 
 // function formatTimestamp(timestamp?: number, placeholder?: string = 'N/A'): string {
 function formatTimestamp(timestamp?: number, placeholder?: string): string {
-    if (placeholder === undefined) {
-        placeholder = 'N/A';
-    }
-    return timestamp ? new Date(timestamp).toLocaleString('en-US') : placeholder;
+	if (placeholder === undefined) {
+		placeholder = 'N/A';
+	}
+	return timestamp ? new Date(timestamp).toLocaleString('en-US') : placeholder;
 }
 
 function metricAccuracy(metric: MetricDataRecord): number {
-    const data = parseMetrics(metric.data);
-    // return typeof data === 'number' ? data : NaN;
-    if (typeof data === 'number') {
-        return data;
-    } else {
-        return data.default;
-    }
+	const data = parseMetrics(metric.data);
+	// return typeof data === 'number' ? data : NaN;
+	if (typeof data === 'number') {
+		return data;
+	} else {
+		return data.default;
+	}
 }
 
 function formatAccuracy(accuracy: number): string {
-    // TODO: how to format NaN?
-    return accuracy
-        .toFixed(6)
-        .replace(/0+$/, '')
-        .replace(/\.$/, '');
+	// TODO: how to format NaN?
+	return accuracy
+		.toFixed(6)
+		.replace(/0+$/, '')
+		.replace(/\.$/, '');
 }
 
 export {
-    convertTime,
-    convertDuration,
-    getFinalResult,
-    getFinal,
-    downFile,
-    intermediateGraphOption,
-    killJob,
-    filterByStatus,
-    filterDuration,
-    formatAccuracy,
-    formatTimestamp,
-    metricAccuracy,
-    parseMetrics,
-    isArrayType,
-    requestAxios
+	convertTime,
+	convertDuration,
+	getFinalResult,
+	getFinal,
+	downFile,
+	intermediateGraphOption,
+	killJob,
+	filterByStatus,
+	filterDuration,
+	formatAccuracy,
+	formatTimestamp,
+	metricAccuracy,
+	parseMetrics,
+	isArrayType,
+	requestAxios
 };
diff --git a/src/webui/src/static/interface.ts b/src/webui/src/static/interface.ts
index 3ec81d294c..76958858df 100644
--- a/src/webui/src/static/interface.ts
+++ b/src/webui/src/static/interface.ts
@@ -2,12 +2,12 @@
  * Definition of single dimension in search space.
  */
 interface SingleAxis {
-    baseName: string;
-    fullName: string;
-    type: string;
-    scale: 'log' | 'linear' | 'ordinal';
-    domain: any;
-    nested: boolean;
+	baseName: string;
+	fullName: string;
+	type: string;
+	scale: 'log' | 'linear' | 'ordinal';
+	domain: any;
+	nested: boolean;
 }
 
 /**
@@ -16,217 +16,217 @@ interface SingleAxis {
  * Typically, it is a search space or a sub search space.
  */
 interface MultipleAxes {
-    baseName: string;
-    fullName: string;
-    axes: Map<string, SingleAxis>;
+	baseName: string;
+	fullName: string;
+	axes: Map<string, SingleAxis>;
 }
 
 // draw accuracy graph data export interface
 interface TableObj {
-    key: number;
-    sequenceId: number;
-    id: string;
-    duration: number;
-    status: string;
-    acc?: FinalType; // draw accuracy graph
-    description: Parameters;
-    color?: string;
-    startTime?: number;
-    endTime?: number;
-    parameters(axes: MultipleAxes): Map<SingleAxis, any>;
-    metrics(axes: MultipleAxes): Map<SingleAxis, any>;
+	key: number;
+	sequenceId: number;
+	id: string;
+	duration: number;
+	status: string;
+	acc?: FinalType; // draw accuracy graph
+	description: Parameters;
+	color?: string;
+	startTime?: number;
+	endTime?: number;
+	parameters(axes: MultipleAxes): Map<SingleAxis, any>;
+	metrics(axes: MultipleAxes): Map<SingleAxis, any>;
 }
 
 interface TableRecord {
-    key: string;
-    sequenceId: number;
-    startTime: number;
-    endTime?: number;
-    id: string;
-    duration: number;
-    status: string;
-    intermediateCount: number;
-    accuracy?: number;
-    latestAccuracy: number | undefined;
-    formattedLatestAccuracy: string; // format (LATEST/FINAL),
-    accDictionary: FinalType | undefined;
+	key: string;
+	sequenceId: number;
+	startTime: number;
+	endTime?: number;
+	id: string;
+	duration: number;
+	status: string;
+	intermediateCount: number;
+	accuracy?: number;
+	latestAccuracy: number | undefined;
+	formattedLatestAccuracy: string; // format (LATEST/FINAL),
+	accDictionary: FinalType | undefined;
 }
 
 interface SearchSpace {
-    _value: Array<number | string>;
-    _type: string;
+	_value: Array<number | string>;
+	_type: string;
 }
 
 interface FinalType {
-    default: string;
+	default: string;
 }
 
 interface ErrorParameter {
-    error?: string;
+	error?: string;
 }
 
 interface Parameters {
-    parameters: ErrorParameter;
-    logPath?: string;
-    intermediate: number[];
-    multiProgress?: number;
+	parameters: ErrorParameter;
+	logPath?: string;
+	intermediate: number[];
+	multiProgress?: number;
 }
 
 // trial accuracy
 interface AccurPoint {
-    acc: number;
-    index: number;
+	acc: number;
+	index: number;
 }
 
 interface DetailAccurPoint {
-    acc: number;
-    index: number;
-    searchSpace: object;
+	acc: number;
+	index: number;
+	searchSpace: object;
 }
 
 interface TooltipForIntermediate {
-    data: string;
-    seriesName: string;
-    dataIndex: number;
+	data: string;
+	seriesName: string;
+	dataIndex: number;
 }
 
 interface TooltipForAccuracy {
-    data: Array<number | object>;
+	data: Array<number | object>;
 }
 
 interface Dimobj {
-    dim: number;
-    name: string;
-    max?: number;
-    min?: number;
-    type?: string;
-    data?: string[];
-    boundaryGap?: boolean;
-    axisTick?: object;
-    axisLabel?: object;
-    axisLine?: object;
-    nameTextStyle?: object;
-    scale?: boolean;
+	dim: number;
+	name: string;
+	max?: number;
+	min?: number;
+	type?: string;
+	data?: string[];
+	boundaryGap?: boolean;
+	axisTick?: object;
+	axisLabel?: object;
+	axisLine?: object;
+	nameTextStyle?: object;
+	scale?: boolean;
 }
 
 interface ParaObj {
-    data: number[][];
-    parallelAxis: Array<Dimobj>;
+	data: number[][];
+	parallelAxis: Array<Dimobj>;
 }
 
 interface Intermedia {
-    name: string; // id
-    type: string;
-    data: Array<number | object>; // intermediate data
-    hyperPara: object; // each trial hyperpara value
+	name: string; // id
+	type: string;
+	data: Array<number | object>; // intermediate data
+	hyperPara: object; // each trial hyperpara value
 }
 
 interface MetricDataRecord {
-    timestamp: number;
-    trialJobId: string;
-    type: string;
-    sequence: number;
-    data: string;
+	timestamp: number;
+	trialJobId: string;
+	type: string;
+	sequence: number;
+	data: string;
 }
 
 interface TrialJobInfo {
-    id: string;
-    sequenceId: number;
-    status: string;
-    startTime?: number;
-    endTime?: number;
-    hyperParameters?: string[];
-    logPath?: string;
-    finalMetricData?: MetricDataRecord[];
-    stderrPath?: string;
+	id: string;
+	sequenceId: number;
+	status: string;
+	startTime?: number;
+	endTime?: number;
+	hyperParameters?: string[];
+	logPath?: string;
+	finalMetricData?: MetricDataRecord[];
+	stderrPath?: string;
 }
 
 interface ExperimentParams {
-    authorName: string;
-    experimentName: string;
-    description?: string;
-    trialConcurrency: number;
-    maxExecDuration: number; // seconds
-    maxTrialNum: number;
-    searchSpace: string;
-    trainingServicePlatform: string;
-    multiThread?: boolean;
-    versionCheck?: boolean;
-    logCollection?: string;
-    tuner?: {
-        className: string;
-        builtinTunerName?: string;
-        codeDir?: string;
-        classArgs?: any;
-        classFileName?: string;
-        checkpointDir: string;
-        gpuNum?: number;
-        includeIntermediateResults?: boolean;
-    };
-    assessor?: {
-        className: string;
-        builtinAssessorName?: string;
-        codeDir?: string;
-        classArgs?: any;
-        classFileName?: string;
-        checkpointDir: string;
-        gpuNum?: number;
-    };
-    advisor?: {
-        className: string;
-        builtinAdvisorName?: string;
-        codeDir?: string;
-        classArgs?: any;
-        classFileName?: string;
-        checkpointDir: string;
-        gpuNum?: number;
-    };
-    clusterMetaData?: {
-        key: string;
-        value: string;
-    }[];
+	authorName: string;
+	experimentName: string;
+	description?: string;
+	trialConcurrency: number;
+	maxExecDuration: number; // seconds
+	maxTrialNum: number;
+	searchSpace: string;
+	trainingServicePlatform: string;
+	multiThread?: boolean;
+	versionCheck?: boolean;
+	logCollection?: string;
+	tuner?: {
+		className: string;
+		builtinTunerName?: string;
+		codeDir?: string;
+		classArgs?: any;
+		classFileName?: string;
+		checkpointDir: string;
+		gpuNum?: number;
+		includeIntermediateResults?: boolean;
+	};
+	assessor?: {
+		className: string;
+		builtinAssessorName?: string;
+		codeDir?: string;
+		classArgs?: any;
+		classFileName?: string;
+		checkpointDir: string;
+		gpuNum?: number;
+	};
+	advisor?: {
+		className: string;
+		builtinAdvisorName?: string;
+		codeDir?: string;
+		classArgs?: any;
+		classFileName?: string;
+		checkpointDir: string;
+		gpuNum?: number;
+	};
+	clusterMetaData?: {
+		key: string;
+		value: string;
+	}[];
 }
 
 interface ExperimentProfile {
-    params: ExperimentParams;
-    id: string;
-    execDuration: number;
-    logDir?: string;
-    startTime?: number;
-    endTime?: number;
-    maxSequenceId: number;
-    revision: number;
+	params: ExperimentParams;
+	id: string;
+	execDuration: number;
+	logDir?: string;
+	startTime?: number;
+	endTime?: number;
+	maxSequenceId: number;
+	revision: number;
 }
 
 interface NNIManagerStatus {
-    status: string;
-    errors: string[];
+	status: string;
+	errors: string[];
 }
 
 interface EventMap {
-    [key: string]: () => void;
+	[key: string]: () => void;
 }
 
 export {
-    TableObj,
-    TableRecord,
-    SearchSpace,
-    FinalType,
-    ErrorParameter,
-    Parameters,
-    AccurPoint,
-    DetailAccurPoint,
-    TooltipForIntermediate,
-    TooltipForAccuracy,
-    Dimobj,
-    ParaObj,
-    Intermedia,
-    MetricDataRecord,
-    TrialJobInfo,
-    ExperimentParams,
-    ExperimentProfile,
-    NNIManagerStatus,
-    EventMap,
-    SingleAxis,
-    MultipleAxes
+	TableObj,
+	TableRecord,
+	SearchSpace,
+	FinalType,
+	ErrorParameter,
+	Parameters,
+	AccurPoint,
+	DetailAccurPoint,
+	TooltipForIntermediate,
+	TooltipForAccuracy,
+	Dimobj,
+	ParaObj,
+	Intermedia,
+	MetricDataRecord,
+	TrialJobInfo,
+	ExperimentParams,
+	ExperimentProfile,
+	NNIManagerStatus,
+	EventMap,
+	SingleAxis,
+	MultipleAxes
 };
diff --git a/src/webui/src/static/model/experiment.ts b/src/webui/src/static/model/experiment.ts
index 2cc29202c9..016ad83837 100644
--- a/src/webui/src/static/model/experiment.ts
+++ b/src/webui/src/static/model/experiment.ts
@@ -4,176 +4,176 @@ import { requestAxios } from '../function';
 import { SearchSpace } from './searchspace';
 
 function compareProfiles(profile1?: ExperimentProfile, profile2?: ExperimentProfile): boolean {
-    if (!profile1 || !profile2) {
-        return false;
-    }
-    const copy1 = Object.assign({}, profile1, { execDuration: undefined });
-    const copy2 = Object.assign({}, profile2, { execDuration: undefined });
-    return JSON.stringify(copy1) === JSON.stringify(copy2);
+	if (!profile1 || !profile2) {
+		return false;
+	}
+	const copy1 = Object.assign({}, profile1, { execDuration: undefined });
+	const copy2 = Object.assign({}, profile2, { execDuration: undefined });
+	return JSON.stringify(copy1) === JSON.stringify(copy2);
 }
 
 class Experiment {
-    private profileField?: ExperimentProfile = undefined;
-    private statusField?: NNIManagerStatus = undefined;
-    private isNestedExperiment: boolean = false;
-    private isexperimentError: boolean = false;
-    private experimentErrorMessage: string = '';
-    private isStatusError: boolean = false;
-    private statusErrorMessage: string = '';
-
-    public async init(): Promise<void> {
-        while (!this.profileField || !this.statusField) {
-            if (this.isexperimentError) {
-                return;
-            }
-            if (this.isStatusError) {
-                return;
-            }
-            await this.update();
-        }
-    }
-
-    public isNestedExp(): boolean {
-        return this.isNestedExperiment;
-    }
-
-    public experimentError(): boolean {
-        return this.isexperimentError;
-    }
-
-    public statusError(): boolean {
-        return this.isStatusError;
-    }
-
-    public getExperimentMessage(): string {
-        return this.experimentErrorMessage;
-    }
-
-    public getStatusMessage(): string {
-        return this.statusErrorMessage;
-    }
-
-    public async update(): Promise<boolean> {
-        let updated = false;
-
-        await requestAxios(`${MANAGER_IP}/experiment`)
-            .then(data => {
-                updated = updated || compareProfiles(this.profileField, data);
-                this.profileField = data;
-            })
-            .catch(error => {
-                this.isexperimentError = true;
-                this.experimentErrorMessage = `${error.message}`;
-                updated = true;
-            });
-
-        await requestAxios(`${MANAGER_IP}/check-status`)
-            .then(data => {
-                updated = JSON.stringify(this.statusField) === JSON.stringify(data);
-                this.statusField = data;
-            })
-            .catch(error => {
-                this.isStatusError = true;
-                this.statusErrorMessage = `${error.message}`;
-                updated = true;
-            });
-
-        return updated;
-    }
-
-    get profile(): ExperimentProfile {
-        if (!this.profileField) {
-            // throw Error('Experiment profile not initialized');
-            // set initProfile to prevent page broken
-            const initProfile = {
-                data: {
-                    id: '',
-                    revision: 0,
-                    execDuration: 0,
-                    logDir: '',
-                    nextSequenceId: 0,
-                    params: {
-                        authorName: '',
-                        experimentName: '',
-                        trialConcurrency: 0,
-                        maxExecDuration: 0,
-                        maxTrialNum: 0,
-                        searchSpace: 'null',
-                        trainingServicePlatform: '',
-                        tuner: {
-                            builtinTunerName: 'TPE',
-                            // eslint-disable-next-line @typescript-eslint/camelcase
-                            classArgs: { optimize_mode: '' },
-                            checkpointDir: ''
-                        },
-                        versionCheck: true,
-                        clusterMetaData: [
-                            { key: '', value: '' },
-                            { key: '', value: '' }
-                        ]
-                    },
-                    startTime: 0,
-                    endTime: 0
-                }
-            };
-            this.profileField = initProfile.data as any;
-        }
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        return this.profileField!;
-    }
-
-    get trialConcurrency(): number {
-        return this.profile.params.trialConcurrency;
-    }
-
-    get optimizeMode(): string {
-        const tuner = this.profile.params.tuner;
-        return tuner && tuner.classArgs && tuner.classArgs.optimize_mode ? tuner.classArgs.optimize_mode : 'unknown';
-    }
-
-    get trainingServicePlatform(): string {
-        return this.profile.params.trainingServicePlatform;
-    }
-
-    get searchSpace(): object {
-        const result = JSON.parse(this.profile.params.searchSpace);
-        for (const item in result) {
-            if (result[item]._value && typeof result[item]._value[0] === 'object') {
-                this.isNestedExperiment = true;
-                break;
-            }
-        }
-        return result;
-    }
-
-    get searchSpaceNew(): SearchSpace {
-        // The search space derived directly from profile
-        // eventually this will replace searchSpace
-        return new SearchSpace('', '', this.searchSpace);
-    }
-
-    get logCollectionEnabled(): boolean {
-        return !!(this.profile.params.logCollection && this.profile.params.logCollection !== 'none');
-    }
-
-    get status(): string {
-        if (!this.statusField) {
-            // throw Error('Experiment status not initialized');
-            // this.statusField.status = '';
-            return '';
-        }
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        return this.statusField!.status;
-    }
-
-    get error(): string {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        if (!this.statusField) {
-            throw Error('Experiment status not initialized');
-        }
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        return this.statusField!.errors[0] || '';
-    }
+	private profileField?: ExperimentProfile = undefined;
+	private statusField?: NNIManagerStatus = undefined;
+	private isNestedExperiment: boolean = false;
+	private isexperimentError: boolean = false;
+	private experimentErrorMessage: string = '';
+	private isStatusError: boolean = false;
+	private statusErrorMessage: string = '';
+
+	public async init(): Promise<void> {
+		while (!this.profileField || !this.statusField) {
+			if (this.isexperimentError) {
+				return;
+			}
+			if (this.isStatusError) {
+				return;
+			}
+			await this.update();
+		}
+	}
+
+	public isNestedExp(): boolean {
+		return this.isNestedExperiment;
+	}
+
+	public experimentError(): boolean {
+		return this.isexperimentError;
+	}
+
+	public statusError(): boolean {
+		return this.isStatusError;
+	}
+
+	public getExperimentMessage(): string {
+		return this.experimentErrorMessage;
+	}
+
+	public getStatusMessage(): string {
+		return this.statusErrorMessage;
+	}
+
+	public async update(): Promise<boolean> {
+		let updated = false;
+
+		await requestAxios(`${MANAGER_IP}/experiment`)
+			.then(data => {
+				updated = updated || compareProfiles(this.profileField, data);
+				this.profileField = data;
+			})
+			.catch(error => {
+				this.isexperimentError = true;
+				this.experimentErrorMessage = `${error.message}`;
+				updated = true;
+			});
+
+		await requestAxios(`${MANAGER_IP}/check-status`)
+			.then(data => {
+				updated = JSON.stringify(this.statusField) === JSON.stringify(data);
+				this.statusField = data;
+			})
+			.catch(error => {
+				this.isStatusError = true;
+				this.statusErrorMessage = `${error.message}`;
+				updated = true;
+			});
+
+		return updated;
+	}
+
+	get profile(): ExperimentProfile {
+		if (!this.profileField) {
+			// throw Error('Experiment profile not initialized');
+			// set initProfile to prevent page broken
+			const initProfile = {
+				data: {
+					id: '',
+					revision: 0,
+					execDuration: 0,
+					logDir: '',
+					nextSequenceId: 0,
+					params: {
+						authorName: '',
+						experimentName: '',
+						trialConcurrency: 0,
+						maxExecDuration: 0,
+						maxTrialNum: 0,
+						searchSpace: 'null',
+						trainingServicePlatform: '',
+						tuner: {
+							builtinTunerName: 'TPE',
+							// eslint-disable-next-line @typescript-eslint/camelcase
+							classArgs: { optimize_mode: '' },
+							checkpointDir: ''
+						},
+						versionCheck: true,
+						clusterMetaData: [
+							{ key: '', value: '' },
+							{ key: '', value: '' }
+						]
+					},
+					startTime: 0,
+					endTime: 0
+				}
+			};
+			this.profileField = initProfile.data as any;
+		}
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		return this.profileField!;
+	}
+
+	get trialConcurrency(): number {
+		return this.profile.params.trialConcurrency;
+	}
+
+	get optimizeMode(): string {
+		const tuner = this.profile.params.tuner;
+		return tuner && tuner.classArgs && tuner.classArgs.optimize_mode ? tuner.classArgs.optimize_mode : 'unknown';
+	}
+
+	get trainingServicePlatform(): string {
+		return this.profile.params.trainingServicePlatform;
+	}
+
+	get searchSpace(): object {
+		const result = JSON.parse(this.profile.params.searchSpace);
+		for (const item in result) {
+			if (result[item]._value && typeof result[item]._value[0] === 'object') {
+				this.isNestedExperiment = true;
+				break;
+			}
+		}
+		return result;
+	}
+
+	get searchSpaceNew(): SearchSpace {
+		// The search space derived directly from profile
+		// eventually this will replace searchSpace
+		return new SearchSpace('', '', this.searchSpace);
+	}
+
+	get logCollectionEnabled(): boolean {
+		return !!(this.profile.params.logCollection && this.profile.params.logCollection !== 'none');
+	}
+
+	get status(): string {
+		if (!this.statusField) {
+			// throw Error('Experiment status not initialized');
+			// this.statusField.status = '';
+			return '';
+		}
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		return this.statusField!.status;
+	}
+
+	get error(): string {
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		if (!this.statusField) {
+			throw Error('Experiment status not initialized');
+		}
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		return this.statusField!.errors[0] || '';
+	}
 }
 
 export { Experiment };
diff --git a/src/webui/src/static/model/searchspace.ts b/src/webui/src/static/model/searchspace.ts
index 24c12472e2..63297e471d 100644
--- a/src/webui/src/static/model/searchspace.ts
+++ b/src/webui/src/static/model/searchspace.ts
@@ -2,180 +2,180 @@ import { SingleAxis, MultipleAxes, TableObj } from '../interface';
 import { SUPPORTED_SEARCH_SPACE_TYPE } from '../const';
 
 function fullNameJoin(prefix: string, name: string): string {
-    return prefix ? prefix + '/' + name : name;
+	return prefix ? prefix + '/' + name : name;
 }
 
 class NumericAxis implements SingleAxis {
-    min: number = 0;
-    max: number = 0;
-    type: string;
-    baseName: string;
-    fullName: string;
-    scale: 'log' | 'linear';
-    nested = false;
+	min: number = 0;
+	max: number = 0;
+	type: string;
+	baseName: string;
+	fullName: string;
+	scale: 'log' | 'linear';
+	nested = false;
 
-    constructor(baseName: string, fullName: string, type: string, value: any) {
-        this.baseName = baseName;
-        this.fullName = fullName;
-        this.type = type;
-        this.scale = type.includes('log') ? 'log' : 'linear';
-        if (type === 'randint') {
-            this.min = value[0];
-            this.max = value[1] - 1;
-        } else if (type.includes('uniform')) {
-            this.min = value[0];
-            this.max = value[1];
-        } else if (type.includes('normal')) {
-            const [mu, sigma] = [value[0], value[1]];
-            this.min = mu - 4 * sigma;
-            this.max = mu + 4 * sigma;
-            if (this.scale === 'log') {
-                this.min = Math.exp(this.min);
-                this.max = Math.exp(this.max);
-            }
-        }
-    }
+	constructor(baseName: string, fullName: string, type: string, value: any) {
+		this.baseName = baseName;
+		this.fullName = fullName;
+		this.type = type;
+		this.scale = type.includes('log') ? 'log' : 'linear';
+		if (type === 'randint') {
+			this.min = value[0];
+			this.max = value[1] - 1;
+		} else if (type.includes('uniform')) {
+			this.min = value[0];
+			this.max = value[1];
+		} else if (type.includes('normal')) {
+			const [mu, sigma] = [value[0], value[1]];
+			this.min = mu - 4 * sigma;
+			this.max = mu + 4 * sigma;
+			if (this.scale === 'log') {
+				this.min = Math.exp(this.min);
+				this.max = Math.exp(this.max);
+			}
+		}
+	}
 
-    get domain(): [number, number] {
-        return [this.min, this.max];
-    }
+	get domain(): [number, number] {
+		return [this.min, this.max];
+	}
 }
 
 class SimpleOrdinalAxis implements SingleAxis {
-    type: string;
-    baseName: string;
-    fullName: string;
-    scale: 'ordinal' = 'ordinal';
-    domain: any[];
-    nested = false;
-    constructor(baseName: string, fullName: string, type: string, value: any) {
-        this.baseName = baseName;
-        this.fullName = fullName;
-        this.type = type;
-        this.domain = value;
-    }
+	type: string;
+	baseName: string;
+	fullName: string;
+	scale: 'ordinal' = 'ordinal';
+	domain: any[];
+	nested = false;
+	constructor(baseName: string, fullName: string, type: string, value: any) {
+		this.baseName = baseName;
+		this.fullName = fullName;
+		this.type = type;
+		this.domain = value;
+	}
 }
 
 class NestedOrdinalAxis implements SingleAxis {
-    type: string;
-    baseName: string;
-    fullName: string;
-    scale: 'ordinal' = 'ordinal';
-    domain = new Map<string, MultipleAxes>();
-    nested = true;
-    constructor(baseName: any, fullName: string, type: any, value: any) {
-        this.baseName = baseName;
-        this.fullName = fullName;
-        this.type = type;
-        for (const v of value) {
-            // eslint-disable-next-line @typescript-eslint/no-use-before-define
-            this.domain.set(v._name, new SearchSpace(v._name, fullNameJoin(fullName, v._name), v));
-        }
-    }
+	type: string;
+	baseName: string;
+	fullName: string;
+	scale: 'ordinal' = 'ordinal';
+	domain = new Map<string, MultipleAxes>();
+	nested = true;
+	constructor(baseName: any, fullName: string, type: any, value: any) {
+		this.baseName = baseName;
+		this.fullName = fullName;
+		this.type = type;
+		for (const v of value) {
+			// eslint-disable-next-line @typescript-eslint/no-use-before-define
+			this.domain.set(v._name, new SearchSpace(v._name, fullNameJoin(fullName, v._name), v));
+		}
+	}
 }
 
 export class SearchSpace implements MultipleAxes {
-    axes = new Map<string, SingleAxis>();
-    baseName: string;
-    fullName: string;
+	axes = new Map<string, SingleAxis>();
+	baseName: string;
+	fullName: string;
 
-    constructor(baseName: string, fullName: string, searchSpaceSpec: any) {
-        this.baseName = baseName;
-        this.fullName = fullName;
-        if (searchSpaceSpec === undefined) {
-            return;
-        }
-        Object.entries(searchSpaceSpec).forEach(item => {
-            const key = item[0],
-                spec = item[1] as any;
-            if (key === '_name') {
-                return;
-            } else if (['choice', 'layer_choice', 'input_choice'].includes(spec._type)) {
-                // ordinal types
-                if (spec._value && typeof spec._value[0] === 'object') {
-                    // nested dimension
-                    this.axes.set(
-                        key,
-                        new NestedOrdinalAxis(key, fullNameJoin(fullName, key), spec._type, spec._value)
-                    );
-                } else {
-                    this.axes.set(
-                        key,
-                        new SimpleOrdinalAxis(key, fullNameJoin(fullName, key), spec._type, spec._value)
-                    );
-                }
-            } else if (SUPPORTED_SEARCH_SPACE_TYPE.includes(spec._type)) {
-                this.axes.set(key, new NumericAxis(key, fullName + key, spec._type, spec._value));
-            }
-        });
-    }
+	constructor(baseName: string, fullName: string, searchSpaceSpec: any) {
+		this.baseName = baseName;
+		this.fullName = fullName;
+		if (searchSpaceSpec === undefined) {
+			return;
+		}
+		Object.entries(searchSpaceSpec).forEach(item => {
+			const key = item[0],
+				spec = item[1] as any;
+			if (key === '_name') {
+				return;
+			} else if (['choice', 'layer_choice', 'input_choice'].includes(spec._type)) {
+				// ordinal types
+				if (spec._value && typeof spec._value[0] === 'object') {
+					// nested dimension
+					this.axes.set(
+						key,
+						new NestedOrdinalAxis(key, fullNameJoin(fullName, key), spec._type, spec._value)
+					);
+				} else {
+					this.axes.set(
+						key,
+						new SimpleOrdinalAxis(key, fullNameJoin(fullName, key), spec._type, spec._value)
+					);
+				}
+			} else if (SUPPORTED_SEARCH_SPACE_TYPE.includes(spec._type)) {
+				this.axes.set(key, new NumericAxis(key, fullName + key, spec._type, spec._value));
+			}
+		});
+	}
 
-    static inferFromTrials(searchSpace: SearchSpace, trials: TableObj[]): SearchSpace {
-        const newSearchSpace = new SearchSpace(searchSpace.baseName, searchSpace.fullName, undefined);
-        for (const [k, v] of searchSpace.axes) {
-            newSearchSpace.axes.set(k, v);
-        }
-        // Add axis inferred from trials columns
-        const addingColumns = new Map<string, any[]>();
-        for (const trial of trials) {
-            try {
-                trial.parameters(searchSpace);
-            } catch (unexpectedEntries) {
-                // eslint-disable-next-line no-console
-                console.log(unexpectedEntries);
-                for (const [k, v] of unexpectedEntries as Map<string, any>) {
-                    const column = addingColumns.get(k);
-                    if (column === undefined) {
-                        addingColumns.set(k, [v]);
-                    } else {
-                        column.push(v);
-                    }
-                }
-            }
-        }
-        addingColumns.forEach((value, key) => {
-            if (value.every(v => typeof v === 'number')) {
-                newSearchSpace.axes.set(
-                    key,
-                    new NumericAxis(key, key, 'uniform', [Math.min(...value), Math.max(...value)])
-                );
-            } else {
-                newSearchSpace.axes.set(key, new SimpleOrdinalAxis(key, key, 'choice', new Set(value).values()));
-            }
-        });
-        return newSearchSpace;
-    }
+	static inferFromTrials(searchSpace: SearchSpace, trials: TableObj[]): SearchSpace {
+		const newSearchSpace = new SearchSpace(searchSpace.baseName, searchSpace.fullName, undefined);
+		for (const [k, v] of searchSpace.axes) {
+			newSearchSpace.axes.set(k, v);
+		}
+		// Add axis inferred from trials columns
+		const addingColumns = new Map<string, any[]>();
+		for (const trial of trials) {
+			try {
+				trial.parameters(searchSpace);
+			} catch (unexpectedEntries) {
+				// eslint-disable-next-line no-console
+				console.log(unexpectedEntries);
+				for (const [k, v] of unexpectedEntries as Map<string, any>) {
+					const column = addingColumns.get(k);
+					if (column === undefined) {
+						addingColumns.set(k, [v]);
+					} else {
+						column.push(v);
+					}
+				}
+			}
+		}
+		addingColumns.forEach((value, key) => {
+			if (value.every(v => typeof v === 'number')) {
+				newSearchSpace.axes.set(
+					key,
+					new NumericAxis(key, key, 'uniform', [Math.min(...value), Math.max(...value)])
+				);
+			} else {
+				newSearchSpace.axes.set(key, new SimpleOrdinalAxis(key, key, 'choice', new Set(value).values()));
+			}
+		});
+		return newSearchSpace;
+	}
 }
 
 export class MetricSpace implements MultipleAxes {
-    axes = new Map<string, SingleAxis>();
-    baseName = '';
-    fullName = '';
+	axes = new Map<string, SingleAxis>();
+	baseName = '';
+	fullName = '';
 
-    constructor(trials: TableObj[]) {
-        const columns = new Map<string, any[]>();
-        for (const trial of trials) {
-            if (trial.acc === undefined) {
-                continue;
-            }
-            // TODO: handle more than number and object
-            const acc = typeof trial.acc === 'number' ? { default: trial.acc } : trial.acc;
-            Object.entries(acc).forEach(item => {
-                const [k, v] = item;
-                const column = columns.get(k);
-                if (column === undefined) {
-                    columns.set(k, [v]);
-                } else {
-                    column.push(v);
-                }
-            });
-        }
-        columns.forEach((value, key) => {
-            if (value.every(v => typeof v === 'number')) {
-                this.axes.set(key, new NumericAxis(key, key, 'uniform', [Math.min(...value), Math.max(...value)]));
-            } else {
-                // TODO: skip for now
-            }
-        });
-    }
+	constructor(trials: TableObj[]) {
+		const columns = new Map<string, any[]>();
+		for (const trial of trials) {
+			if (trial.acc === undefined) {
+				continue;
+			}
+			// TODO: handle more than number and object
+			const acc = typeof trial.acc === 'number' ? { default: trial.acc } : trial.acc;
+			Object.entries(acc).forEach(item => {
+				const [k, v] = item;
+				const column = columns.get(k);
+				if (column === undefined) {
+					columns.set(k, [v]);
+				} else {
+					column.push(v);
+				}
+			});
+		}
+		columns.forEach((value, key) => {
+			if (value.every(v => typeof v === 'number')) {
+				this.axes.set(key, new NumericAxis(key, key, 'uniform', [Math.min(...value), Math.max(...value)]));
+			} else {
+				// TODO: skip for now
+			}
+		});
+	}
 }
diff --git a/src/webui/src/static/model/trial.ts b/src/webui/src/static/model/trial.ts
index 55c2b86fd6..7954cbc848 100644
--- a/src/webui/src/static/model/trial.ts
+++ b/src/webui/src/static/model/trial.ts
@@ -1,12 +1,12 @@
 import {
-    MetricDataRecord,
-    TrialJobInfo,
-    TableObj,
-    TableRecord,
-    Parameters,
-    FinalType,
-    MultipleAxes,
-    SingleAxis
+	MetricDataRecord,
+	TrialJobInfo,
+	TableObj,
+	TableRecord,
+	Parameters,
+	FinalType,
+	MultipleAxes,
+	SingleAxis
 } from '../interface';
 import { getFinal, formatAccuracy, metricAccuracy, parseMetrics, isArrayType } from '../function';
 
@@ -18,311 +18,311 @@ import { getFinal, formatAccuracy, metricAccuracy, parseMetrics, isArrayType } f
  * @returns Parsed structured parameters and unexpected entries
  */
 function inferTrialParameters(
-    paramObj: object,
-    space: MultipleAxes,
-    prefix: string = ''
+	paramObj: object,
+	space: MultipleAxes,
+	prefix: string = ''
 ): [Map<SingleAxis, any>, Map<string, any>] {
-    const parameters = new Map<SingleAxis, any>();
-    const unexpectedEntries = new Map<string, any>();
-    for (const [k, v] of Object.entries(paramObj)) {
-        // prefix can be a good fallback when corresponding item is not found in namespace
-        const axisKey = space.axes.get(k);
-        if (prefix && k === '_name') continue;
-        if (axisKey !== undefined) {
-            if (typeof v === 'object' && v._name !== undefined && axisKey.nested) {
-                // nested entry
-                parameters.set(axisKey, v._name);
-                const subSpace = axisKey.domain.get(v._name);
-                if (subSpace !== undefined) {
-                    const [subParams, subUnexpected] = inferTrialParameters(v, subSpace, prefix + k + '/');
-                    subParams.forEach((v, k) => parameters.set(k, v));
-                    subUnexpected.forEach((v, k) => unexpectedEntries.set(k, v));
-                }
-            } else {
-                parameters.set(axisKey, v);
-            }
-        } else {
-            unexpectedEntries.set(prefix + k, v);
-        }
-    }
-    return [parameters, unexpectedEntries];
+	const parameters = new Map<SingleAxis, any>();
+	const unexpectedEntries = new Map<string, any>();
+	for (const [k, v] of Object.entries(paramObj)) {
+		// prefix can be a good fallback when corresponding item is not found in namespace
+		const axisKey = space.axes.get(k);
+		if (prefix && k === '_name') continue;
+		if (axisKey !== undefined) {
+			if (typeof v === 'object' && v._name !== undefined && axisKey.nested) {
+				// nested entry
+				parameters.set(axisKey, v._name);
+				const subSpace = axisKey.domain.get(v._name);
+				if (subSpace !== undefined) {
+					const [subParams, subUnexpected] = inferTrialParameters(v, subSpace, prefix + k + '/');
+					subParams.forEach((v, k) => parameters.set(k, v));
+					subUnexpected.forEach((v, k) => unexpectedEntries.set(k, v));
+				}
+			} else {
+				parameters.set(axisKey, v);
+			}
+		} else {
+			unexpectedEntries.set(prefix + k, v);
+		}
+	}
+	return [parameters, unexpectedEntries];
 }
 
 class Trial implements TableObj {
-    private metricsInitialized: boolean = false;
-    private infoField: TrialJobInfo | undefined;
-    private intermediates: (MetricDataRecord | undefined)[] = [];
-    public final: MetricDataRecord | undefined;
-    private finalAcc: number | undefined;
+	private metricsInitialized: boolean = false;
+	private infoField: TrialJobInfo | undefined;
+	private intermediates: (MetricDataRecord | undefined)[] = [];
+	public final: MetricDataRecord | undefined;
+	private finalAcc: number | undefined;
 
-    constructor(info?: TrialJobInfo, metrics?: MetricDataRecord[]) {
-        this.infoField = info;
-        if (metrics) {
-            this.updateMetrics(metrics);
-        }
-    }
+	constructor(info?: TrialJobInfo, metrics?: MetricDataRecord[]) {
+		this.infoField = info;
+		if (metrics) {
+			this.updateMetrics(metrics);
+		}
+	}
 
-    public compareAccuracy(otherTrial: Trial): number | undefined {
-        if (!this.sortable || !otherTrial.sortable) {
-            return undefined;
-        }
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        return this.finalAcc! - otherTrial.finalAcc!;
-    }
+	public compareAccuracy(otherTrial: Trial): number | undefined {
+		if (!this.sortable || !otherTrial.sortable) {
+			return undefined;
+		}
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		return this.finalAcc! - otherTrial.finalAcc!;
+	}
 
-    get info(): TrialJobInfo {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        return this.infoField!;
-    }
+	get info(): TrialJobInfo {
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		return this.infoField!;
+	}
 
-    get intermediateMetrics(): MetricDataRecord[] {
-        const ret: MetricDataRecord[] = [];
-        for (let i = 0; i < this.intermediates.length; i++) {
-            if (this.intermediates[i]) {
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                ret.push(this.intermediates[i]!);
-            } else {
-                break;
-            }
-        }
-        return ret;
-    }
+	get intermediateMetrics(): MetricDataRecord[] {
+		const ret: MetricDataRecord[] = [];
+		for (let i = 0; i < this.intermediates.length; i++) {
+			if (this.intermediates[i]) {
+				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+				ret.push(this.intermediates[i]!);
+			} else {
+				break;
+			}
+		}
+		return ret;
+	}
 
-    get accuracy(): number | undefined {
-        return this.finalAcc;
-    }
+	get accuracy(): number | undefined {
+		return this.finalAcc;
+	}
 
-    get sortable(): boolean {
-        return this.metricsInitialized && this.finalAcc !== undefined && !isNaN(this.finalAcc);
-    }
+	get sortable(): boolean {
+		return this.metricsInitialized && this.finalAcc !== undefined && !isNaN(this.finalAcc);
+	}
 
-    get latestAccuracy(): number | undefined {
-        if (this.accuracy !== undefined) {
-            return this.accuracy;
-        } else if (this.intermediates.length > 0) {
-            const temp = this.intermediates[this.intermediates.length - 1];
-            if (temp !== undefined) {
-                if (isArrayType(parseMetrics(temp.data))) {
-                    return undefined;
-                } else if (
-                    typeof parseMetrics(temp.data) === 'object' &&
-                    parseMetrics(temp.data).hasOwnProperty('default')
-                ) {
-                    return parseMetrics(temp.data).default;
-                } else if (typeof parseMetrics(temp.data) === 'number') {
-                    return parseMetrics(temp.data);
-                }
-            } else {
-                return undefined;
-            }
-        } else {
-            return undefined;
-        }
-    }
-    /* table obj start */
+	get latestAccuracy(): number | undefined {
+		if (this.accuracy !== undefined) {
+			return this.accuracy;
+		} else if (this.intermediates.length > 0) {
+			const temp = this.intermediates[this.intermediates.length - 1];
+			if (temp !== undefined) {
+				if (isArrayType(parseMetrics(temp.data))) {
+					return undefined;
+				} else if (
+					typeof parseMetrics(temp.data) === 'object' &&
+					parseMetrics(temp.data).hasOwnProperty('default')
+				) {
+					return parseMetrics(temp.data).default;
+				} else if (typeof parseMetrics(temp.data) === 'number') {
+					return parseMetrics(temp.data);
+				}
+			} else {
+				return undefined;
+			}
+		} else {
+			return undefined;
+		}
+	}
+	/* table obj start */
 
-    get tableRecord(): TableRecord {
-        const endTime = this.info.endTime || new Date().getTime();
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const duration = (endTime - this.info.startTime!) / 1000;
+	get tableRecord(): TableRecord {
+		const endTime = this.info.endTime || new Date().getTime();
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		const duration = (endTime - this.info.startTime!) / 1000;
 
-        return {
-            key: this.info.id,
-            sequenceId: this.info.sequenceId,
-            id: this.info.id,
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            startTime: this.info.startTime!,
-            endTime: this.info.endTime,
-            duration,
-            status: this.info.status,
-            intermediateCount: this.intermediates.length,
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            accuracy: this.acc !== undefined ? JSON.parse(this.acc!.default) : undefined,
-            latestAccuracy: this.latestAccuracy,
-            formattedLatestAccuracy: this.formatLatestAccuracy(),
-            accDictionary: this.acc
-        };
-    }
+		return {
+			key: this.info.id,
+			sequenceId: this.info.sequenceId,
+			id: this.info.id,
+			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+			startTime: this.info.startTime!,
+			endTime: this.info.endTime,
+			duration,
+			status: this.info.status,
+			intermediateCount: this.intermediates.length,
+			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+			accuracy: this.acc !== undefined ? JSON.parse(this.acc!.default) : undefined,
+			latestAccuracy: this.latestAccuracy,
+			formattedLatestAccuracy: this.formatLatestAccuracy(),
+			accDictionary: this.acc
+		};
+	}
 
-    get key(): number {
-        return this.info.sequenceId;
-    }
+	get key(): number {
+		return this.info.sequenceId;
+	}
 
-    get sequenceId(): number {
-        return this.info.sequenceId;
-    }
+	get sequenceId(): number {
+		return this.info.sequenceId;
+	}
 
-    get id(): string {
-        return this.info.id;
-    }
+	get id(): string {
+		return this.info.id;
+	}
 
-    get duration(): number {
-        const endTime = this.info.endTime || new Date().getTime();
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        return (endTime - this.info.startTime!) / 1000;
-    }
+	get duration(): number {
+		const endTime = this.info.endTime || new Date().getTime();
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		return (endTime - this.info.startTime!) / 1000;
+	}
 
-    get status(): string {
-        return this.info.status;
-    }
+	get status(): string {
+		return this.info.status;
+	}
 
-    get acc(): FinalType | undefined {
-        return getFinal(this.info.finalMetricData);
-    }
+	get acc(): FinalType | undefined {
+		return getFinal(this.info.finalMetricData);
+	}
 
-    get description(): Parameters {
-        const ret: Parameters = {
-            parameters: {},
-            intermediate: [],
-            multiProgress: 1
-        };
-        const tempHyper = this.info.hyperParameters;
-        if (tempHyper !== undefined) {
-            const getPara = JSON.parse(tempHyper[tempHyper.length - 1]).parameters;
-            ret.multiProgress = tempHyper.length;
-            if (typeof getPara === 'string') {
-                ret.parameters = JSON.parse(getPara);
-            } else {
-                ret.parameters = getPara;
-            }
-        } else {
-            ret.parameters = { error: "This trial's parameters are not available." };
-        }
-        if (this.info.logPath !== undefined) {
-            ret.logPath = this.info.logPath;
-        }
+	get description(): Parameters {
+		const ret: Parameters = {
+			parameters: {},
+			intermediate: [],
+			multiProgress: 1
+		};
+		const tempHyper = this.info.hyperParameters;
+		if (tempHyper !== undefined) {
+			const getPara = JSON.parse(tempHyper[tempHyper.length - 1]).parameters;
+			ret.multiProgress = tempHyper.length;
+			if (typeof getPara === 'string') {
+				ret.parameters = JSON.parse(getPara);
+			} else {
+				ret.parameters = getPara;
+			}
+		} else {
+			ret.parameters = { error: "This trial's parameters are not available." };
+		}
+		if (this.info.logPath !== undefined) {
+			ret.logPath = this.info.logPath;
+		}
 
-        const mediate: number[] = [];
-        for (const items of this.intermediateMetrics) {
-            if (typeof parseMetrics(items.data) === 'object') {
-                mediate.push(parseMetrics(items.data).default);
-            } else {
-                mediate.push(parseMetrics(items.data));
-            }
-        }
-        ret.intermediate = mediate;
-        return ret;
-    }
+		const mediate: number[] = [];
+		for (const items of this.intermediateMetrics) {
+			if (typeof parseMetrics(items.data) === 'object') {
+				mediate.push(parseMetrics(items.data).default);
+			} else {
+				mediate.push(parseMetrics(items.data));
+			}
+		}
+		ret.intermediate = mediate;
+		return ret;
+	}
 
-    public parameters(axes: MultipleAxes): Map<SingleAxis, any> {
-        const tempHyper = this.info.hyperParameters;
-        if (tempHyper === undefined) {
-            throw new Map([['error', "This trial's parameters are not available."]]);
-        } else {
-            let params = JSON.parse(tempHyper[tempHyper.length - 1]).parameters;
-            if (typeof params === 'string') {
-                params = JSON.parse(params);
-            }
-            const [result, unexpectedEntries] = inferTrialParameters(params, axes);
-            if (unexpectedEntries.size) {
-                throw unexpectedEntries;
-            }
-            return result;
-        }
-    }
+	public parameters(axes: MultipleAxes): Map<SingleAxis, any> {
+		const tempHyper = this.info.hyperParameters;
+		if (tempHyper === undefined) {
+			throw new Map([['error', "This trial's parameters are not available."]]);
+		} else {
+			let params = JSON.parse(tempHyper[tempHyper.length - 1]).parameters;
+			if (typeof params === 'string') {
+				params = JSON.parse(params);
+			}
+			const [result, unexpectedEntries] = inferTrialParameters(params, axes);
+			if (unexpectedEntries.size) {
+				throw unexpectedEntries;
+			}
+			return result;
+		}
+	}
 
-    public metrics(space: MultipleAxes): Map<SingleAxis, any> {
-        const ret = new Map<SingleAxis, any>();
-        const unexpectedEntries = new Map<string, any>();
-        if (this.acc === undefined) {
-            return ret;
-        }
-        const acc = typeof this.acc === 'number' ? { default: this.acc } : this.acc;
-        Object.entries(acc).forEach(item => {
-            const [k, v] = item;
-            const column = space.axes.get(k);
-            if (column !== undefined) {
-                ret.set(column, v);
-            } else {
-                unexpectedEntries.set(k, v);
-            }
-        });
-        if (unexpectedEntries.size) {
-            throw unexpectedEntries;
-        }
-        return ret;
-    }
+	public metrics(space: MultipleAxes): Map<SingleAxis, any> {
+		const ret = new Map<SingleAxis, any>();
+		const unexpectedEntries = new Map<string, any>();
+		if (this.acc === undefined) {
+			return ret;
+		}
+		const acc = typeof this.acc === 'number' ? { default: this.acc } : this.acc;
+		Object.entries(acc).forEach(item => {
+			const [k, v] = item;
+			const column = space.axes.get(k);
+			if (column !== undefined) {
+				ret.set(column, v);
+			} else {
+				unexpectedEntries.set(k, v);
+			}
+		});
+		if (unexpectedEntries.size) {
+			throw unexpectedEntries;
+		}
+		return ret;
+	}
 
-    get color(): string | undefined {
-        return undefined;
-    }
+	get color(): string | undefined {
+		return undefined;
+	}
 
-    public finalKeys(): string[] {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        return Object.keys(this.acc!);
-    }
+	public finalKeys(): string[] {
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		return Object.keys(this.acc!);
+	}
 
-    /* table obj end */
+	/* table obj end */
 
-    public initialized(): boolean {
-        return Boolean(this.infoField);
-    }
+	public initialized(): boolean {
+		return Boolean(this.infoField);
+	}
 
-    public updateMetrics(metrics: MetricDataRecord[]): boolean {
-        // parameter `metrics` must contain all known metrics of this trial
-        this.metricsInitialized = true;
-        const prevMetricCnt = this.intermediates.length + (this.final ? 1 : 0);
-        if (metrics.length <= prevMetricCnt) {
-            return false;
-        }
-        for (const metric of metrics) {
-            if (metric.type === 'PERIODICAL') {
-                this.intermediates[metric.sequence] = metric;
-            } else {
-                this.final = metric;
-                this.finalAcc = metricAccuracy(metric);
-            }
-        }
-        return true;
-    }
+	public updateMetrics(metrics: MetricDataRecord[]): boolean {
+		// parameter `metrics` must contain all known metrics of this trial
+		this.metricsInitialized = true;
+		const prevMetricCnt = this.intermediates.length + (this.final ? 1 : 0);
+		if (metrics.length <= prevMetricCnt) {
+			return false;
+		}
+		for (const metric of metrics) {
+			if (metric.type === 'PERIODICAL') {
+				this.intermediates[metric.sequence] = metric;
+			} else {
+				this.final = metric;
+				this.finalAcc = metricAccuracy(metric);
+			}
+		}
+		return true;
+	}
 
-    public updateLatestMetrics(metrics: MetricDataRecord[]): boolean {
-        // this method is effectively identical to `updateMetrics`, but has worse performance
-        this.metricsInitialized = true;
-        let updated = false;
-        for (const metric of metrics) {
-            if (metric.type === 'PERIODICAL') {
-                updated = updated || !this.intermediates[metric.sequence];
-                this.intermediates[metric.sequence] = metric;
-            } else {
-                updated = updated || !this.final;
-                this.final = metric;
-                this.finalAcc = metricAccuracy(metric);
-            }
-        }
-        return updated;
-    }
+	public updateLatestMetrics(metrics: MetricDataRecord[]): boolean {
+		// this method is effectively identical to `updateMetrics`, but has worse performance
+		this.metricsInitialized = true;
+		let updated = false;
+		for (const metric of metrics) {
+			if (metric.type === 'PERIODICAL') {
+				updated = updated || !this.intermediates[metric.sequence];
+				this.intermediates[metric.sequence] = metric;
+			} else {
+				updated = updated || !this.final;
+				this.final = metric;
+				this.finalAcc = metricAccuracy(metric);
+			}
+		}
+		return updated;
+	}
 
-    public updateTrialJobInfo(trialJobInfo: TrialJobInfo): boolean {
-        const same = this.infoField && this.infoField.status === trialJobInfo.status;
-        this.infoField = trialJobInfo;
-        if (trialJobInfo.finalMetricData) {
-            this.final = trialJobInfo.finalMetricData[trialJobInfo.finalMetricData.length - 1];
-            this.finalAcc = metricAccuracy(this.final);
-        }
-        return !same;
-    }
+	public updateTrialJobInfo(trialJobInfo: TrialJobInfo): boolean {
+		const same = this.infoField && this.infoField.status === trialJobInfo.status;
+		this.infoField = trialJobInfo;
+		if (trialJobInfo.finalMetricData) {
+			this.final = trialJobInfo.finalMetricData[trialJobInfo.finalMetricData.length - 1];
+			this.finalAcc = metricAccuracy(this.final);
+		}
+		return !same;
+	}
 
-    public formatLatestAccuracy(): string {
-        // TODO: this should be private
-        if (this.accuracy !== undefined) {
-            if (isNaN(this.accuracy)) {
-                return this.accuracy.toString();
-            } else {
-                return `${formatAccuracy(this.accuracy)} (FINAL)`;
-            }
-        } else if (this.intermediates.length === 0) {
-            return '--';
-        } else {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            const latest = this.intermediates[this.intermediates.length - 1]!;
-            if (isNaN(metricAccuracy(latest))) {
-                return 'NaN';
-            } else {
-                return `${formatAccuracy(metricAccuracy(latest))} (LATEST)`;
-            }
-        }
-    }
+	public formatLatestAccuracy(): string {
+		// TODO: this should be private
+		if (this.accuracy !== undefined) {
+			if (isNaN(this.accuracy)) {
+				return this.accuracy.toString();
+			} else {
+				return `${formatAccuracy(this.accuracy)} (FINAL)`;
+			}
+		} else if (this.intermediates.length === 0) {
+			return '--';
+		} else {
+			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+			const latest = this.intermediates[this.intermediates.length - 1]!;
+			if (isNaN(metricAccuracy(latest))) {
+				return 'NaN';
+			} else {
+				return `${formatAccuracy(metricAccuracy(latest))} (LATEST)`;
+			}
+		}
+	}
 }
 
 export { Trial };
diff --git a/src/webui/src/static/model/trialmanager.ts b/src/webui/src/static/model/trialmanager.ts
index 4bea34368a..d631d31b99 100644
--- a/src/webui/src/static/model/trialmanager.ts
+++ b/src/webui/src/static/model/trialmanager.ts
@@ -5,267 +5,267 @@ import { SearchSpace, MetricSpace } from './searchspace';
 import { requestAxios } from '../function';
 
 function groupMetricsByTrial(metrics: MetricDataRecord[]): Map<string, MetricDataRecord[]> {
-    const ret = new Map<string, MetricDataRecord[]>();
-    for (const metric of metrics) {
-        if (ret.has(metric.trialJobId)) {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            ret.get(metric.trialJobId)!.push(metric);
-        } else {
-            ret.set(metric.trialJobId, [metric]);
-        }
-    }
-    return ret;
+	const ret = new Map<string, MetricDataRecord[]>();
+	for (const metric of metrics) {
+		if (ret.has(metric.trialJobId)) {
+			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+			ret.get(metric.trialJobId)!.push(metric);
+		} else {
+			ret.set(metric.trialJobId, [metric]);
+		}
+	}
+	return ret;
 }
 
 class TrialManager {
-    private trials: Map<string, Trial> = new Map<string, Trial>();
-    private infoInitialized: boolean = false;
-    private metricInitialized: boolean = false;
-    private maxSequenceId: number = 0;
-    private doingBatchUpdate: boolean = false;
-    private batchUpdatedAfterReading: boolean = false;
-    private isJobListError: boolean = false; // trial-jobs api error filed
-    private jobErrorMessage: string = ''; // trial-jobs error message
-    private isMetricdataError: boolean = false; // metric-data api error filed
-    private MetricdataErrorMessage: string = ''; // metric-data error message
-    private isLatestMetricdataError: boolean = false; // metric-data-latest api error filed
-    private latestMetricdataErrorMessage: string = ''; // metric-data-latest error message
-    private isMetricdataRangeError: boolean = false; // metric-data-range api error filed
-    private metricdataRangeErrorMessage: string = ''; // metric-data-latest error message
-    private metricsList: Array<MetricDataRecord> = [];
-    private trialJobList: Array<TrialJobInfo> = [];
-
-    public getMetricsList(): Array<MetricDataRecord> {
-        return this.metricsList;
-    }
-
-    public getTrialJobList(): Array<TrialJobInfo> {
-        return this.trialJobList;
-    }
-
-    public async init(): Promise<void> {
-        while (!this.infoInitialized || !this.metricInitialized) {
-            if (this.isMetricdataError) {
-                return;
-            }
-            await this.update();
-        }
-    }
-
-    public async update(lastTime?: boolean): Promise<boolean> {
-        const [infoUpdated, metricUpdated] = await Promise.all([this.updateInfo(), this.updateMetrics(lastTime)]);
-        return infoUpdated || metricUpdated;
-    }
-
-    public getTrial(trialId: string): Trial {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        return this.trials.get(trialId)!;
-    }
-
-    public getTrials(trialIds: string[]): Trial[] {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        return trialIds.map(trialId => this.trials.get(trialId)!);
-    }
-
-    public table(trialIds: string[]): TableRecord[] {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        return trialIds.map(trialId => this.trials.get(trialId)!.tableRecord);
-    }
-
-    public toArray(): Trial[] {
-        const trials = Array.from(this.trials.values()).filter(trial => trial.initialized());
-        return trials.sort((trial1, trial2) => trial1.sequenceId - trial2.sequenceId);
-    }
-
-    public filter(callback: (trial: Trial) => boolean): Trial[] {
-        const trials = Array.from(this.trials.values()).filter(trial => trial.initialized() && callback(trial));
-        return trials.sort((trial1, trial2) => trial1.sequenceId - trial2.sequenceId);
-    }
-
-    public succeededTrials(): Trial[] {
-        return this.filter(trial => trial.status === 'SUCCEEDED');
-    }
-
-    public finalKeys(): string[] {
-        const succeedTrialsList = this.filter(trial => trial.status === 'SUCCEEDED');
-        if (succeedTrialsList !== undefined && succeedTrialsList[0] !== undefined) {
-            return succeedTrialsList[0].finalKeys();
-        } else {
-            return ['default'];
-        }
-    }
-
-    public sort(): Trial[] {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        return this.filter(trial => trial.sortable).sort((trial1, trial2) => trial1.compareAccuracy(trial2)!);
-    }
-
-    public countStatus(): Map<string, number> {
-        const cnt = new Map<string, number>([
-            ['UNKNOWN', 0],
-            ['WAITING', 0],
-            ['RUNNING', 0],
-            ['SUCCEEDED', 0],
-            ['FAILED', 0],
-            ['USER_CANCELED', 0],
-            ['SYS_CANCELED', 0],
-            ['EARLY_STOPPED', 0]
-        ]);
-        for (const trial of this.trials.values()) {
-            if (trial.initialized()) {
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                cnt.set(trial.info.status, cnt.get(trial.info.status)! + 1);
-            }
-        }
-        return cnt;
-    }
-
-    public inferredSearchSpace(expSearchSpace: SearchSpace): MultipleAxes {
-        // The search space inferred from trial parameters
-        return SearchSpace.inferFromTrials(expSearchSpace, [...this.trials.values()]);
-    }
-
-    public inferredMetricSpace(): MultipleAxes {
-        return new MetricSpace([...this.trials.values()]);
-    }
-
-    // if this.jobListError = true, show trial error message [/trial-jobs]
-    public jobListError(): boolean {
-        return this.isJobListError;
-    }
-
-    // trial error message's content [/trial-jobs]
-    public getJobErrorMessage(): string {
-        return this.jobErrorMessage;
-    }
-
-    // [/metric-data]
-    public MetricDataError(): boolean {
-        return this.isMetricdataError;
-    }
-
-    // [/metric-data]
-    public getMetricDataErrorMessage(): string {
-        return this.MetricdataErrorMessage;
-    }
-
-    // [/metric-data-latest]
-    public latestMetricDataError(): boolean {
-        return this.isLatestMetricdataError;
-    }
-
-    // [/metric-data-latest]
-    public getLatestMetricDataErrorMessage(): string {
-        return this.latestMetricdataErrorMessage;
-    }
-
-    public metricDataRangeError(): boolean {
-        return this.isMetricdataRangeError;
-    }
-
-    public metricDataRangeErrorMessage(): string {
-        return this.metricdataRangeErrorMessage;
-    }
-
-    private async updateInfo(): Promise<boolean> {
-        let updated = false;
-        requestAxios(`${MANAGER_IP}/trial-jobs`)
-            .then(data => {
-                for (const trialInfo of data as TrialJobInfo[]) {
-                    if (this.trials.has(trialInfo.id)) {
-                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                        updated = this.trials.get(trialInfo.id)!.updateTrialJobInfo(trialInfo) || updated;
-                    } else {
-                        this.trials.set(trialInfo.id, new Trial(trialInfo, undefined));
-                        updated = true;
-                    }
-                    this.maxSequenceId = Math.max(this.maxSequenceId, trialInfo.sequenceId);
-                }
-                this.infoInitialized = true;
-            })
-            .catch(error => {
-                this.isJobListError = true;
-                this.jobErrorMessage = error.message;
-                this.infoInitialized = true;
-                updated = true;
-            });
-
-        return updated;
-    }
-
-    private async updateMetrics(lastTime?: boolean): Promise<boolean> {
-        if (this.trials.size < METRIC_GROUP_UPDATE_THRESHOLD || lastTime) {
-            return await this.updateAllMetrics();
-        } else {
-            this.updateManyMetrics();
-            const ret = (await this.updateLatestMetrics()) || this.batchUpdatedAfterReading;
-            this.batchUpdatedAfterReading = false;
-            return ret;
-        }
-    }
-
-    private async updateAllMetrics(): Promise<boolean> {
-        return requestAxios(`${MANAGER_IP}/metric-data`)
-            .then(data => {
-                this.metricsList = data;
-                return this.doUpdateMetrics(data as any, false);
-            })
-            .catch(error => {
-                this.isMetricdataError = true;
-                this.MetricdataErrorMessage = `${error.message}`;
-                this.doUpdateMetrics([], false);
-                return true;
-            });
-    }
-
-    private async updateLatestMetrics(): Promise<boolean> {
-        return requestAxios(`${MANAGER_IP}/metric-data-latest`)
-            .then(data => this.doUpdateMetrics(data as any, true))
-            .catch(error => {
-                this.isLatestMetricdataError = true;
-                this.latestMetricdataErrorMessage = `${error.message}`;
-                this.doUpdateMetrics([], true);
-                return true;
-            });
-    }
-
-    private async updateManyMetrics(): Promise<void> {
-        if (this.doingBatchUpdate) {
-            return;
-        }
-        this.doingBatchUpdate = true;
-        for (
-            let i = 0;
-            i < this.maxSequenceId && this.isMetricdataRangeError === false;
-            i += METRIC_GROUP_UPDATE_SIZE
-        ) {
-            requestAxios(`${MANAGER_IP}/metric-data-range/${i}/${i + METRIC_GROUP_UPDATE_SIZE}`)
-                .then(data => {
-                    const updated = this.doUpdateMetrics(data as any, false);
-                    this.batchUpdatedAfterReading = this.batchUpdatedAfterReading || updated;
-                })
-                .catch(error => {
-                    this.isMetricdataRangeError = true;
-                    this.metricdataRangeErrorMessage = `${error.message}`;
-                });
-        }
-        this.doingBatchUpdate = false;
-    }
-
-    private doUpdateMetrics(allMetrics: MetricDataRecord[], latestOnly: boolean): boolean {
-        let updated = false;
-        for (const [trialId, metrics] of groupMetricsByTrial(allMetrics).entries()) {
-            const trial = this.trials.get(trialId);
-            if (trial !== undefined) {
-                updated = (latestOnly ? trial.updateLatestMetrics(metrics) : trial.updateMetrics(metrics)) || updated;
-            } else {
-                this.trials.set(trialId, new Trial(undefined, metrics));
-                updated = true;
-            }
-        }
-        this.metricInitialized = true;
-        return updated;
-    }
+	private trials: Map<string, Trial> = new Map<string, Trial>();
+	private infoInitialized: boolean = false;
+	private metricInitialized: boolean = false;
+	private maxSequenceId: number = 0;
+	private doingBatchUpdate: boolean = false;
+	private batchUpdatedAfterReading: boolean = false;
+	private isJobListError: boolean = false; // trial-jobs api error filed
+	private jobErrorMessage: string = ''; // trial-jobs error message
+	private isMetricdataError: boolean = false; // metric-data api error filed
+	private MetricdataErrorMessage: string = ''; // metric-data error message
+	private isLatestMetricdataError: boolean = false; // metric-data-latest api error filed
+	private latestMetricdataErrorMessage: string = ''; // metric-data-latest error message
+	private isMetricdataRangeError: boolean = false; // metric-data-range api error filed
+	private metricdataRangeErrorMessage: string = ''; // metric-data-latest error message
+	private metricsList: Array<MetricDataRecord> = [];
+	private trialJobList: Array<TrialJobInfo> = [];
+
+	public getMetricsList(): Array<MetricDataRecord> {
+		return this.metricsList;
+	}
+
+	public getTrialJobList(): Array<TrialJobInfo> {
+		return this.trialJobList;
+	}
+
+	public async init(): Promise<void> {
+		while (!this.infoInitialized || !this.metricInitialized) {
+			if (this.isMetricdataError) {
+				return;
+			}
+			await this.update();
+		}
+	}
+
+	public async update(lastTime?: boolean): Promise<boolean> {
+		const [infoUpdated, metricUpdated] = await Promise.all([this.updateInfo(), this.updateMetrics(lastTime)]);
+		return infoUpdated || metricUpdated;
+	}
+
+	public getTrial(trialId: string): Trial {
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		return this.trials.get(trialId)!;
+	}
+
+	public getTrials(trialIds: string[]): Trial[] {
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		return trialIds.map(trialId => this.trials.get(trialId)!);
+	}
+
+	public table(trialIds: string[]): TableRecord[] {
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		return trialIds.map(trialId => this.trials.get(trialId)!.tableRecord);
+	}
+
+	public toArray(): Trial[] {
+		const trials = Array.from(this.trials.values()).filter(trial => trial.initialized());
+		return trials.sort((trial1, trial2) => trial1.sequenceId - trial2.sequenceId);
+	}
+
+	public filter(callback: (trial: Trial) => boolean): Trial[] {
+		const trials = Array.from(this.trials.values()).filter(trial => trial.initialized() && callback(trial));
+		return trials.sort((trial1, trial2) => trial1.sequenceId - trial2.sequenceId);
+	}
+
+	public succeededTrials(): Trial[] {
+		return this.filter(trial => trial.status === 'SUCCEEDED');
+	}
+
+	public finalKeys(): string[] {
+		const succeedTrialsList = this.filter(trial => trial.status === 'SUCCEEDED');
+		if (succeedTrialsList !== undefined && succeedTrialsList[0] !== undefined) {
+			return succeedTrialsList[0].finalKeys();
+		} else {
+			return ['default'];
+		}
+	}
+
+	public sort(): Trial[] {
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		return this.filter(trial => trial.sortable).sort((trial1, trial2) => trial1.compareAccuracy(trial2)!);
+	}
+
+	public countStatus(): Map<string, number> {
+		const cnt = new Map<string, number>([
+			['UNKNOWN', 0],
+			['WAITING', 0],
+			['RUNNING', 0],
+			['SUCCEEDED', 0],
+			['FAILED', 0],
+			['USER_CANCELED', 0],
+			['SYS_CANCELED', 0],
+			['EARLY_STOPPED', 0]
+		]);
+		for (const trial of this.trials.values()) {
+			if (trial.initialized()) {
+				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+				cnt.set(trial.info.status, cnt.get(trial.info.status)! + 1);
+			}
+		}
+		return cnt;
+	}
+
+	public inferredSearchSpace(expSearchSpace: SearchSpace): MultipleAxes {
+		// The search space inferred from trial parameters
+		return SearchSpace.inferFromTrials(expSearchSpace, [...this.trials.values()]);
+	}
+
+	public inferredMetricSpace(): MultipleAxes {
+		return new MetricSpace([...this.trials.values()]);
+	}
+
+	// if this.jobListError = true, show trial error message [/trial-jobs]
+	public jobListError(): boolean {
+		return this.isJobListError;
+	}
+
+	// trial error message's content [/trial-jobs]
+	public getJobErrorMessage(): string {
+		return this.jobErrorMessage;
+	}
+
+	// [/metric-data]
+	public MetricDataError(): boolean {
+		return this.isMetricdataError;
+	}
+
+	// [/metric-data]
+	public getMetricDataErrorMessage(): string {
+		return this.MetricdataErrorMessage;
+	}
+
+	// [/metric-data-latest]
+	public latestMetricDataError(): boolean {
+		return this.isLatestMetricdataError;
+	}
+
+	// [/metric-data-latest]
+	public getLatestMetricDataErrorMessage(): string {
+		return this.latestMetricdataErrorMessage;
+	}
+
+	public metricDataRangeError(): boolean {
+		return this.isMetricdataRangeError;
+	}
+
+	public metricDataRangeErrorMessage(): string {
+		return this.metricdataRangeErrorMessage;
+	}
+
+	private async updateInfo(): Promise<boolean> {
+		let updated = false;
+		requestAxios(`${MANAGER_IP}/trial-jobs`)
+			.then(data => {
+				for (const trialInfo of data as TrialJobInfo[]) {
+					if (this.trials.has(trialInfo.id)) {
+						// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+						updated = this.trials.get(trialInfo.id)!.updateTrialJobInfo(trialInfo) || updated;
+					} else {
+						this.trials.set(trialInfo.id, new Trial(trialInfo, undefined));
+						updated = true;
+					}
+					this.maxSequenceId = Math.max(this.maxSequenceId, trialInfo.sequenceId);
+				}
+				this.infoInitialized = true;
+			})
+			.catch(error => {
+				this.isJobListError = true;
+				this.jobErrorMessage = error.message;
+				this.infoInitialized = true;
+				updated = true;
+			});
+
+		return updated;
+	}
+
+	private async updateMetrics(lastTime?: boolean): Promise<boolean> {
+		if (this.trials.size < METRIC_GROUP_UPDATE_THRESHOLD || lastTime) {
+			return await this.updateAllMetrics();
+		} else {
+			this.updateManyMetrics();
+			const ret = (await this.updateLatestMetrics()) || this.batchUpdatedAfterReading;
+			this.batchUpdatedAfterReading = false;
+			return ret;
+		}
+	}
+
+	private async updateAllMetrics(): Promise<boolean> {
+		return requestAxios(`${MANAGER_IP}/metric-data`)
+			.then(data => {
+				this.metricsList = data;
+				return this.doUpdateMetrics(data as any, false);
+			})
+			.catch(error => {
+				this.isMetricdataError = true;
+				this.MetricdataErrorMessage = `${error.message}`;
+				this.doUpdateMetrics([], false);
+				return true;
+			});
+	}
+
+	private async updateLatestMetrics(): Promise<boolean> {
+		return requestAxios(`${MANAGER_IP}/metric-data-latest`)
+			.then(data => this.doUpdateMetrics(data as any, true))
+			.catch(error => {
+				this.isLatestMetricdataError = true;
+				this.latestMetricdataErrorMessage = `${error.message}`;
+				this.doUpdateMetrics([], true);
+				return true;
+			});
+	}
+
+	private async updateManyMetrics(): Promise<void> {
+		if (this.doingBatchUpdate) {
+			return;
+		}
+		this.doingBatchUpdate = true;
+		for (
+			let i = 0;
+			i < this.maxSequenceId && this.isMetricdataRangeError === false;
+			i += METRIC_GROUP_UPDATE_SIZE
+		) {
+			requestAxios(`${MANAGER_IP}/metric-data-range/${i}/${i + METRIC_GROUP_UPDATE_SIZE}`)
+				.then(data => {
+					const updated = this.doUpdateMetrics(data as any, false);
+					this.batchUpdatedAfterReading = this.batchUpdatedAfterReading || updated;
+				})
+				.catch(error => {
+					this.isMetricdataRangeError = true;
+					this.metricdataRangeErrorMessage = `${error.message}`;
+				});
+		}
+		this.doingBatchUpdate = false;
+	}
+
+	private doUpdateMetrics(allMetrics: MetricDataRecord[], latestOnly: boolean): boolean {
+		let updated = false;
+		for (const [trialId, metrics] of groupMetricsByTrial(allMetrics).entries()) {
+			const trial = this.trials.get(trialId);
+			if (trial !== undefined) {
+				updated = (latestOnly ? trial.updateLatestMetrics(metrics) : trial.updateMetrics(metrics)) || updated;
+			} else {
+				this.trials.set(trialId, new Trial(undefined, metrics));
+				updated = true;
+			}
+		}
+		this.metricInitialized = true;
+		return updated;
+	}
 }
 
 export { TrialManager };
diff --git a/src/webui/src/static/style/button.scss b/src/webui/src/static/style/button.scss
index 1db2a1feec..55cf44efa3 100644
--- a/src/webui/src/static/style/button.scss
+++ b/src/webui/src/static/style/button.scss
@@ -1,8 +1,8 @@
 $btnBgcolor: #0071bc;
 
-Button.tableButton{
+button.tableButton {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background:	$btnBgcolor;
+    background: $btnBgcolor;
     border-color: $btnBgcolor;
     height: 26px;
     font-size: 14px;
@@ -11,17 +11,19 @@ Button.tableButton{
 }
 
 /* kill btn style: delete its own hover style */
+
 /* after button click the color not change */
-Button.tableButton:hover, Button.tableButton:focus{
+button.tableButton:hover,
+button.tableButton:focus {
     background-color: $btnBgcolor;
     border-color: $btnBgcolor;
 }
 
-Button.changeBtu{
+button.changeBtu {
     height: 32px;
 }
 
-.ant-input, .ant-select-selection{
+.ant-input,
+.ant-select-selection {
     border-radius: 0 !important;
 }
-
diff --git a/src/webui/src/static/style/compare.scss b/src/webui/src/static/style/compare.scss
index 37f70a49c4..283dc10a5c 100644
--- a/src/webui/src/static/style/compare.scss
+++ b/src/webui/src/static/style/compare.scss
@@ -1,46 +1,53 @@
-.compare-modal{
+.compare-modal {
     /* decide modal size */
-    .ms-Dialog-main{
+    .ms-Dialog-main {
         width: 50%;
         overflow: hidden;
     }
 
     /* compare-md: table style */
-    &-table{
+    &-table {
         width: 92%;
         margin: 0 auto;
         margin-bottom: 20px;
         border: 1px solid transparent;
         overflow: auto;
         color: #333;
-        tr{
+
+        tr {
             line-height: 30px;
         }
-        tr:nth-of-type(even){
+
+        tr:nth-of-type(even) {
             background-color: gainsboro;
         }
-        .column{
+
+        .column {
             max-width: 124px;
             padding-left: 18px;
             font-weight: 600;
         }
-        .value{
+
+        .value {
             max-width: 152px;
             padding-right: 18px;
             text-align: left;
         }
-        .idList{
+
+        .idList {
             font-weight: 600;
         }
     }
+
     /* compare-md: intermediate graph style */
-    &-intermediate{
+    &-intermediate {
         position: relative;
-        .compare-yAxis{
+
+        .compare-yAxis {
             color: #333;
             position: absolute;
             top: 87%;
             left: 45%;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/webui/src/static/style/copyParameter.scss b/src/webui/src/static/style/copyParameter.scss
index a906e56afb..125f574b37 100644
--- a/src/webui/src/static/style/copyParameter.scss
+++ b/src/webui/src/static/style/copyParameter.scss
@@ -1,21 +1,24 @@
 $color: #f2f2f2;
-.formatStr{
+
+.formatStr {
     border: 1px solid #8f8f8f;
     color: #333;
     padding: 5px 10px;
-    background-color: #fff; 
+    background-color: #fff;
 }
 
 .format {
-    .ant-modal-header{
+    .ant-modal-header {
         background-color: $color;
         border-bottom: none;
     }
-    .ant-modal-footer{
+
+    .ant-modal-footer {
         background-color: $color;
         border-top: none;
     }
-    .ant-modal-body{
+
+    .ant-modal-body {
         background-color: $color;
         padding: 10px 24px !important;
     }
diff --git a/src/webui/src/components/Modals/customized.scss b/src/webui/src/static/style/customized.scss
similarity index 66%
rename from src/webui/src/components/Modals/customized.scss
rename to src/webui/src/static/style/customized.scss
index ef2cce35b8..a6bfe1fc3d 100644
--- a/src/webui/src/components/Modals/customized.scss
+++ b/src/webui/src/static/style/customized.scss
@@ -1,86 +1,106 @@
 /* resubmit confirm modal style */
-.resubmit{
-    .title{
+.resubmit {
+    .title {
         font-size: 16px;
         color: #000;
-        .color-warn, .color-error{
+
+        .color-warn,
+        .color-error {
             color: red;
         }
-        i{
+
+        i {
             margin-right: 10px;
         }
     }
-    .hint{
+
+    .hint {
         padding: 15px 0;
         color: #333;
         margin-left: 30px;
     }
-    .color-succ{
+
+    .color-succ {
         color: green;
     }
 }
-.hyper-box{
+
+.hyper-box {
     padding: 16px 18px 16px 16px;
 }
-.hyper-form{
+
+.hyper-form {
     margin-bottom: 10px;
-    .title{
+
+    .title {
         font-size: 14px;
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         line-height: 40px;
     }
-    .inputs{
+
+    .inputs {
         height: 32px;
     }
-    input{
+
+    input {
         padding-left: 5px;
         height: 32px;
     }
 }
-.tag-input{
+
+.tag-input {
     margin-top: 25px;
 }
 
-/* submit & cancel buttons style*/
-.modal-button{
+/* submit & cancel buttons style */
+.modal-button {
     text-align: right;
     height: 28px;
-    /* cancel button style*/
-    .cancelSty{
+
+    /* cancel button style */
+    .cancelSty {
         width: 80px;
         background-color: #dadada;
         border: none;
         color: #333;
     }
-    .cancelSty:hover, .cancelSty:active, .cancelSty:focus{
+
+    .cancelSty:hover,
+    .cancelSty:active,
+    .cancelSty:focus {
         background-color: #dadada;
     }
-    .distance{
+
+    .distance {
         margin-right: 8px;
     }
 }
 
-.center{
+.center {
     text-align: center;
 }
 
-.icon-color{
-    i{
+.icon-color {
+    i {
         color: green;
     }
 }
-.icon-error{
-    i{
+
+.icon-error {
+    i {
         color: red;
     }
 }
-.icon-color, .icon-error{
-    i{
+
+.icon-color,
+.icon-error {
+    i {
         margin-right: 10px;
         position: relative;
         top: 5px;
     }
 }
-.ms-Dialog-subText{
+
+.ms-Dialog-subText {
     color: #333;
-}
\ No newline at end of file
+}
diff --git a/src/webui/src/static/style/icon.scss b/src/webui/src/static/style/icon.scss
index 0ee838ed9e..b70d457610 100644
--- a/src/webui/src/static/style/icon.scss
+++ b/src/webui/src/static/style/icon.scss
@@ -1,14 +1,14 @@
-.iconButtons{
+.iconButtons {
     margin-top: 12px;
-    i{
+
+    i {
         font-size: 16px;
         color: #fff;
     }
-    
 }
 
-.docIcon{
-    i{
+.docIcon {
+    i {
         font-size: 28px;
     }
-}
\ No newline at end of file
+}
diff --git a/src/webui/src/static/style/logDrawer.scss b/src/webui/src/static/style/logDrawer.scss
index 8990a781e0..d4dcca201d 100644
--- a/src/webui/src/static/style/logDrawer.scss
+++ b/src/webui/src/static/style/logDrawer.scss
@@ -1,29 +1,30 @@
 .download {
-  button,
-  button:active,
-  button:hover {
-    color: #fff;
-    border: none;
-  }
+    button,
+    button:active,
+    button:hover {
+        color: #fff;
+        border: none;
+    }
 }
 
 .log-tab-body {
-  .refresh {
-    margin-left: 10px;
-    display: none;
-  }
+    .refresh {
+        margin-left: 10px;
+        display: none;
+    }
 }
 
 /* office-fabric-ui */
 .ms-Panel-main {
-  width: 55%;
-  background: #fff;
+    width: 55%;
+    background: #fff;
 }
 
 /* log drawer download & close button's row */
 .buttons {
-  margin-top: 16px;
-  .close {
-    text-align: right;
-  }
+    margin-top: 16px;
+
+    .close {
+        text-align: right;
+    }
 }
diff --git a/src/webui/src/static/style/logPath.scss b/src/webui/src/static/style/logPath.scss
index e6c876d3b1..b5c5d5c34f 100644
--- a/src/webui/src/static/style/logPath.scss
+++ b/src/webui/src/static/style/logPath.scss
@@ -1,22 +1,22 @@
-.logpath{
+.logpath {
     margin-left: 10px;
     font-size: 14px;
-    .logName{
-        color: #268BD2;
+
+    .logName {
+        color: #268bd2;
         margin-right: 5px;
     }
 
-    .logContent{
+    .logContent {
         color: #333;
     }
 
-    .error{
-        color: #CB4B16;
+    .error {
+        color: #cb4b16;
     }
 }
 
-.logHref:hover{
+.logHref:hover {
     color: blue;
     text-decoration: underline;
 }
-
diff --git a/src/webui/src/static/style/nav/nav.scss b/src/webui/src/static/style/nav/nav.scss
index b26031fdfd..0227199940 100644
--- a/src/webui/src/static/style/nav/nav.scss
+++ b/src/webui/src/static/style/nav/nav.scss
@@ -1,46 +1,54 @@
 $barHeight: 56px;
 
-.navOptions{
-    .ms-Button-icon{
+.navOptions {
+    .ms-Button-icon {
         color: #fff;
-        &:hover{
+
+        &:hover {
             color: #fff;
         }
     }
-    .ms-Button--commandBar{
+
+    .ms-Button--commandBar {
         background-color: #0071bc;
         user-select: none;
-        &:hover, &:active{
+
+        &:hover,
+        &:active {
             color: #fff;
-            .ms-Button-icon{
+
+            .ms-Button-icon {
                 color: #fff;
             }
         }
-        .ms-Button-textContainer{
+
+        .ms-Button-textContainer {
             color: #fff;
         }
-        .ms-Button-menuIcon{
+
+        .ms-Button-menuIcon {
             color: #fff;
             background-color: transparent;
         }
     }
 }
 
-.nav{
+.nav {
     height: $barHeight;
     line-height: $barHeight;
-    
-    /* desktop mode useful*/
-    .desktop-logo{
+
+    /* desktop mode useful */
+    .desktop-logo {
         position: relative;
         top: 6px;
     }
 
-    &-refresh{
+    &-refresh {
         position: relative;
         display: flex;
     }
-    &-refresh-num{
+
+    &-refresh-num {
         position: absolute;
         top: -10px;
         left: 18px;
@@ -50,21 +58,26 @@ $barHeight: 56px;
 }
 
 /* overview and detail tabs common style */
-a.common-tabs{
+a.common-tabs {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-size: 16px;
     color: #b8c7ce;
     text-decoration: none;
 }
-.common-tabs:visited, .high-light:hover{
+
+.common-tabs:hover,
+.high-light {
     color: #fff;
-    text-decoration: none;
+    border-bottom: 1px solid #fff;
 }
-.common-tabs:hover, .high-light{
+
+.common-tabs:visited,
+.high-light:hover {
     color: #fff;
-    border-bottom: 1px solid #fff;
+    text-decoration: none;
 }
-.left-right-margin{
+
+.left-right-margin {
     margin-left: 20px;
     margin-right: 20px;
-}
\ No newline at end of file
+}
diff --git a/src/webui/src/static/style/openRow.scss b/src/webui/src/static/style/openRow.scss
index cdd9a721e7..ba49acba06 100644
--- a/src/webui/src/static/style/openRow.scss
+++ b/src/webui/src/static/style/openRow.scss
@@ -1,13 +1,15 @@
 /* website theme color */
 $color: #0071bc;
+
 /* bg light grey */
 $bgColor: #f2f2f2;
-.openRow{
+
+.openRow {
     width: 100%;
     background-color: $bgColor;
     margin-bottom: 10px;
 
-    &Content{
+    &Content {
         width: 91%;
         margin: 0 auto;
         min-height: 150px;
@@ -15,33 +17,37 @@ $bgColor: #f2f2f2;
     }
 }
 
-.trialLog{
+.trialLog {
     white-space: normal;
     color: #212121;
 }
-#trialLogContent{
 
-    .logcontent{
+#trialLogContent {
+    .logcontent {
         height: 100%;
     }
 }
 
-#description{
+#description {
     padding: 0 10px;
-    .bgHyper ul{
+
+    .bgHyper ul {
         background-color: #fff !important;
         padding: 3px 0 5px 0 !important;
         font-size: 14px;
     }
-    .copy{
+
+    .copy {
         margin-top: 3px;
-        Button{
+
+        button {
             background-color: #ccc;
             color: #191919;
             border: none;
             outline: none;
         }
-        Button:hover{
+
+        button:hover {
             background-color: #ccc;
             color: #191919;
             border: none;
diff --git a/src/webui/src/static/style/overview.scss b/src/webui/src/static/style/overview.scss
index 162c878e5c..7a42427b9d 100644
--- a/src/webui/src/static/style/overview.scss
+++ b/src/webui/src/static/style/overview.scss
@@ -1,25 +1,25 @@
 
 /* new style */
-.overMessage{
+.overMessage {
     height: 446px;
 }
 
-.blockPadding{
+.blockPadding {
     padding: 10px 20px;
 }
 
-.commonTableStyle{
+.commonTableStyle {
     padding: 15px 20px;
     height: 100%;
     min-width: 500px;
     overflow-y: auto;
 }
 
-.padItem{
+.padItem {
     padding: 10px 20px 0 20px;
 }
 
-.searchSpace{
+.searchSpace {
     line-height: 22px;
     font-size: 14px;
     padding: 15px 0;
@@ -27,40 +27,41 @@
     width: 95%;
 }
 
-.nowrap{
+.nowrap {
     overflow: hidden;
-    white-space:nowrap;
-    text-overflow:ellipsis;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
-.main{
+.main {
     margin: 9px 0;
 }
 
-.profile{
-    pre{
+.profile {
+    pre {
         overflow: inherit;
     }
 }
 
-.link{
+.link {
     margin-bottom: 10px;
 }
 
-.info{
+.info {
     position: relative;
     top: 15px;
     left: 10px;
-    span{
+
+    span {
         color: #333;
         font-size: 14px;
     }
 }
 
 /* overview-succeed-graph */
-.showMess{
+.showMess {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-}
\ No newline at end of file
+}
diff --git a/src/webui/src/static/style/overviewTitle.scss b/src/webui/src/static/style/overviewTitle.scss
index ecb435225e..c080c8e271 100644
--- a/src/webui/src/static/style/overviewTitle.scss
+++ b/src/webui/src/static/style/overviewTitle.scss
@@ -1,54 +1,55 @@
 $iconPaddingVal: 14px;
 
-.panelTitle{
+.panelTitle {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     width: 100%;
     height: 38px;
     padding: 4px $iconPaddingVal;
     box-sizing: border-box;
-    
-    img{
+
+    img {
         height: 22px;
+
         /* (38 - 22 ) / 2 */
         margin-top: 8px;
+
         /* icon right */
         padding: 0 $iconPaddingVal 0 0;
     }
 
-    span{
+    span {
         font-size: 18px;
         font-weight: 600;
         color: #333;
         line-height: 38px;
     }
 
-    i{
+    i {
         font-size: 24px;
         color: #545454;
     }
 }
 
-/* antd icon margin intermediate result style*/
-#tabsty .anticon{
+/* antd icon margin intermediate result style */
+#tabsty .anticon {
     margin-right: 0;
 }
 
-.top10bg{
-
-    .top10Title{
+.top10bg {
+    .top10Title {
         width: 160px;
     }
 
-    .title{
+    .title {
         border-left: 2px solid #fff;
     }
 
-    .minTitle{
+    .minTitle {
         margin-right: $iconPaddingVal;
         border-right: 2px solid #fff;
     }
 
-    .title:hover{
+    .title:hover {
         cursor: pointer;
     }
 }
diff --git a/src/webui/src/static/style/pagination.scss b/src/webui/src/static/style/pagination.scss
index 9c54b93e60..c17624d329 100644
--- a/src/webui/src/static/style/pagination.scss
+++ b/src/webui/src/static/style/pagination.scss
@@ -3,34 +3,46 @@
     display: flex;
     list-style: none;
     outline: none;
+
     .hidden {
         display: none;
     }
+
     .disabled {
-        display: none
+        display: none;
     }
+
     .active {
-        a, .span, a:hover,  a:focus, span:hover, span:focus {
-            background-color: #0071bc ;
-            border-color: #0071bc ;
+        a,
+        .span,
+        a:hover,
+        a:focus,
+        span:hover,
+        span:focus {
+            background-color: #0071bc;
+            border-color: #0071bc;
             color: #fff;
             outline: none;
         }
     }
+
     li:first-child {
-        a, span {
-            border-radius: unset
+        a,
+        span {
+            border-radius: unset;
         }
     }
+
     li {
-        a{
+        a {
             padding: 5px 10px;
             outline: none;
             cursor: pointer;
-            color: #0071bc
+            color: #0071bc;
         }
+
         span {
-            color: #0071bc
+            color: #0071bc;
         }
     }
 }
diff --git a/src/webui/src/static/style/para.scss b/src/webui/src/static/style/para.scss
index 0fc68ac4fc..b9b7e032de 100644
--- a/src/webui/src/static/style/para.scss
+++ b/src/webui/src/static/style/para.scss
@@ -1,39 +1,39 @@
-.parameter{
+.parameter {
     height: 100%;
 }
 
-.para-filter{
+.para-filter {
     width: 97%;
     margin-top: 15px;
 
-    &-text{
+    &-text {
         line-height: 32px;
         margin-right: 10px;
     }
 
-    &-percent{
+    &-percent {
         margin-right: 10px;
     }
 
-    &-middle{
+    &-middle {
         vertical-align: top;
     }
 }
 
-.meline{
+.meline {
     margin-top: 15px;
 
-    span{
+    span {
         font-size: 14px;
         margin-right: 6px;
     }
 }
 
-.searcHyper{
+.searcHyper {
     position: relative;
     margin: 0 19px;
 
-    .noneData{
+    .noneData {
         position: absolute;
         left: 49%;
         top: 2.5%;
@@ -43,31 +43,37 @@
 }
 
 /* Intermediate Result Style */
-.intermediate{
+.intermediate {
     width: 95%;
-   /* border: 1px solid blue; */
-    input{
+
+    /* border: 1px solid blue; */
+    input {
         width: 64px;
         height: 26px;
         padding-left: 8px;
     }
-    .strange{
+
+    .strange {
         margin-right: 15px;
     }
-    .hyphen{
+
+    .hyphen {
         margin-left: 6px;
         margin-right: 6px;
     }
-    .filter-x{
+
+    .filter-x {
         margin-left: 15px;
     }
-    .filter-toggle{
+
+    .filter-toggle {
         line-height: 32px;
     }
 }
 
 .parcoords {
-    text.label, text {
+    text.label,
+    text {
         font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
         font-size: 12px;
     }
@@ -76,7 +82,7 @@
 .nodata {
     font-size: 18px;
     font-weight: 600;
-    color: #666666;
+    color: #666;
     position: absolute;
     margin-left: auto;
     margin-right: auto;
diff --git a/src/webui/src/static/style/probar.scss b/src/webui/src/static/style/probar.scss
index 4abc83fc39..fcf1ca2a14 100644
--- a/src/webui/src/static/style/probar.scss
+++ b/src/webui/src/static/style/probar.scss
@@ -1,29 +1,40 @@
-#barBack{
+#barBack {
     /* status: 'INITIALIZED' | 'RUNNING' | 'ERROR' | 'STOPPING' | 'STOPPED' | 'DONE' */
+
     /* status: 'TUNER_NO_MORE_TRIAL' | 'NO_MORE_TRIAL' */
-    .RUNNING, .STOPPING, .INITIALIZED, .NO_MORE_TRIAL, .TUNER_NO_MORE_TRIAL{
+    .RUNNING,
+    .STOPPING,
+    .INITIALIZED,
+    .NO_MORE_TRIAL,
+    .TUNER_NO_MORE_TRIAL {
         /* specific status color */
         color: #0071bc;
+
         /* progress- duration & trial numbers span */
         .ms-ProgressIndicator-progressBar {
             background-color: #0071bc;
         }
     }
-    .DONE, .STOPPED{
+
+    .DONE,
+    .STOPPED {
         color: #009245;
+
         .ms-ProgressIndicator-progressBar {
             background-color: #009245;
         }
     }
-    .ERROR{
+
+    .ERROR {
         color: #eb0716;
+
         .ms-ProgressIndicator-progressBar {
             background-color: #eb0716;
         }
     }
 }
 
-.errorBtn{
+.errorBtn {
     margin-left: 15px;
     display: inline-block;
     width: 18px;
@@ -36,11 +47,12 @@
     background-color: #4d4d4d;
     color: #fff;
 }
-.errorBtn:hover{
+
+.errorBtn:hover {
     cursor: pointer;
 }
 
-.errors{
+.errors {
     width: 240px;
     font-size: 14px;
     color: #212121;
diff --git a/src/webui/src/static/style/progress.scss b/src/webui/src/static/style/progress.scss
index 832449b329..f6c5b25010 100644
--- a/src/webui/src/static/style/progress.scss
+++ b/src/webui/src/static/style/progress.scss
@@ -1,116 +1,124 @@
 .progress {
-  margin: 15px 17px;
-  .status {
-    color: #0573bc;
-    font-size: 20px;
-    font-weight: 600;
-    margin-top: 5px;
-    .status-text{
-      display: inline-block;
-      line-height: 30px;
-    }
-  }
+    margin: 15px 17px;
 
-  .probar {
-    width: 100%;
-    height: 34px;
-    margin-top: 15px;
+    .status {
+        color: #0573bc;
+        font-size: 20px;
+        font-weight: 600;
+        margin-top: 5px;
 
-    .showProgress{
-        width: 300px;
-        height: 30px;
-    }
-    
-    .name {
-      width: 178px;
-      box-sizing: border-box;
-      line-height: 30px;
-      text-align: center;
-      color: #fff;
-      background-color: #999;
-      border: 2px solid #e6e6e6;
-      border-top-left-radius: 12px;
-      border-bottom-left-radius: 12px;
+        .status-text {
+            display: inline-block;
+            line-height: 30px;
+        }
     }
 
-    .boundary {
-      width: 100%;
-      line-height: 24px;
-      font-size: 12px;
-      color: #212121;
-      .right {
-        text-align: right;
-      }
-    }
+    .probar {
+        width: 100%;
+        height: 34px;
+        margin-top: 15px;
+
+        .showProgress {
+            width: 300px;
+            height: 30px;
+        }
 
-    .description{
-      line-height: 34px;
-      margin-left: 6px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+        .name {
+            width: 178px;
+            box-sizing: border-box;
+            line-height: 30px;
+            text-align: center;
+            color: #fff;
+            background-color: #999;
+            border: 2px solid #e6e6e6;
+            border-top-left-radius: 12px;
+            border-bottom-left-radius: 12px;
+        }
+
+        .boundary {
+            width: 100%;
+            line-height: 24px;
+            font-size: 12px;
+            color: #212121;
+
+            .right {
+                text-align: right;
+            }
+        }
+
+        .description {
+            line-height: 34px;
+            margin-left: 6px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
     }
-  }
 
-  &-info{
-    margin-left: 4px;
-    position: relative;
-    top: 2px;
-  }
+    &-info {
+        margin-left: 4px;
+        position: relative;
+        top: 2px;
+    }
 }
 
 /* basic experiment message style */
 .basic {
-  line-height: 24px;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  p {
-    font-size: 14px;
-    color: #212121;
-  }
-  div {
-    font-size: 16px;
-    color: #0573bc;
-  }
+    line-height: 24px;
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+
+    p {
+        font-size: 14px;
+        color: #212121;
+    }
+
+    div {
+        font-size: 16px;
+        color: #0573bc;
+    }
 }
 
 .colorOfbasic {
-  div {
-    color: #0573bc;
-  }
-  .time {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
+    div {
+        color: #0573bc;
+    }
+
+    .time {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
 }
 
 .mess {
-  margin: 10px 0;
+    margin: 10px 0;
 }
 
 .inputBox {
-  height: 32px;
-  margin-top: 5px;
-  .concurrencyInput {
-    width: 40px;
-    padding-left: 8px;
-    outline: none;
-    border: 1px solid #ccc;
-  }
+    height: 32px;
+    margin-top: 5px;
+
+    .concurrencyInput {
+        width: 40px;
+        padding-left: 8px;
+        outline: none;
+        border: 1px solid #ccc;
+    }
 }
 
 .lineBasic {
-  padding-bottom: 14px;
-  border-bottom: 1px solid #ccc;
+    padding-bottom: 14px;
+    border-bottom: 1px solid #ccc;
 }
 
-/* office-fabric-ui progressIndicator*/
+/* office-fabric-ui progressIndicator */
 .ms-ProgressIndicator-itemProgress {
     padding: 0;
     border: 2px solid #e6e6e6;
     border-radius: 0 12px 12px 0 !important;
 }
 
-.cursor, .cursor:hover{
-  cursor: pointer;
-}
\ No newline at end of file
+.cursor,
+.cursor:hover {
+    cursor: pointer;
+}
diff --git a/src/webui/src/static/style/search.scss b/src/webui/src/static/style/search.scss
index 22c507e107..5ef82aed4f 100644
--- a/src/webui/src/static/style/search.scss
+++ b/src/webui/src/static/style/search.scss
@@ -1,36 +1,36 @@
 /* some buttons in trial-detail table */
-.allList{
+.allList {
     width: 96%;
     margin: 0 auto;
     margin-top: 15px;
 
-    &-compare{
+    &-compare {
         margin-top: 15px;
     }
 
-    &-entry{
+    &-entry {
         line-height: 32px;
     }
 
     /* compare button style */
-    &-button-gap{
+    &-button-gap {
         margin-right: 10px;
     }
 
-    &-search-input{
+    &-search-input {
         padding-left: 10px;
     }
 }
 
 
-/* each row's Intermediate btn -> Modal*/
-.selectKeys{
+/* each row's Intermediate btn -> Modal */
+.selectKeys {
     /* intermediate result is dict, select box for keys */
-    .select{
+    .select {
         margin-right: 12%;
     }
-    .ms-Dropdown{
+
+    .ms-Dropdown {
         width: 120px;
     }
 }
-
diff --git a/src/webui/src/static/style/succTable.scss b/src/webui/src/static/style/succTable.scss
index 05b37035bd..86b89e3ff9 100644
--- a/src/webui/src/static/style/succTable.scss
+++ b/src/webui/src/static/style/succTable.scss
@@ -1,17 +1,20 @@
-#succTable{
+#succTable {
     height: 404px;
     overflow: auto;
     position: relative;
-    .succTable-tooltip{
+
+    .succTable-tooltip {
         position: absolute;
         top: 40%;
         left: 17%;
-        .link{
+
+        .link {
             margin-left: 15px;
-            a{
+
+            a {
                 font-weight: 500;
                 color: blue;
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/webui/src/static/style/table.scss b/src/webui/src/static/style/table.scss
index 25ca54e3e0..79821d37c5 100644
--- a/src/webui/src/static/style/table.scss
+++ b/src/webui/src/static/style/table.scss
@@ -1,59 +1,67 @@
 /* react-json-tree background */
-#description ul, #allList ul{
+#description ul,
+#allList ul {
     background: none !important;
 }
 
-.tabScroll{
+.tabScroll {
     height: 324px;
     overflow: hidden;
-    #succeTable .commonTableStyle{
+
+    #succeTable .commonTableStyle {
         overflow-y: auto;
     }
 }
 
-.ellipsis{
+.ellipsis {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
-#succeTable, #tableList{
-    .commonTableStyle .leftTitle div{
-        text-align: left;
-    }
-    .durationsty{
+#succeTable,
+#tableList {
+    .durationsty {
         width: 80%;
         margin: 0 auto;
-        div{
+
+        div {
             text-align: right;
             margin-right: 9px;
         }
     }
+
+    .commonTableStyle .leftTitle div {
+        text-align: left;
+    }
 }
 
-.margin-mediate{
+.margin-mediate {
     margin: 0 10px;
 }
 
-.detail-button{
-    &-operation{
+.detail-button {
+    &-operation {
         min-width: 44px;
         border: none;
         margin-right: 10px;
     }
-    i{
+
+    i {
         color: #fff;
     }
-} 
+}
 
 /* office-fabric-ui */
-.ms-DetailsRow{
+.ms-DetailsRow {
     height: 30px;
 }
-.detail-table{
+
+.detail-table {
     padding: 5px 0 0 0;
 }
-.columns-height{
+
+.columns-height {
     max-height: 335px;
     overflow-y: auto;
 }
diff --git a/src/webui/src/static/style/tableStatus.css b/src/webui/src/static/style/tableStatus.css
index 2697487543..9cf6bc57cf 100644
--- a/src/webui/src/static/style/tableStatus.css
+++ b/src/webui/src/static/style/tableStatus.css
@@ -1,22 +1,29 @@
 /* all table status font-color */
-.RUNNING,.USER_CANCELED{
-    color: #0071BC;
+.RUNNING,
+.USER_CANCELED {
+    color: #0071bc;
 }
-.FAILED{
+
+.FAILED {
     color: #dd4b39;
 }
-.SUCCEEDED{
-    color: #00A445;
+
+.SUCCEEDED {
+    color: #00a445;
 }
-.UNKNOWN{
-    color:	#FF8C00;
+
+.UNKNOWN {
+    color: #ff8c00;
 }
-.SYS_CANCELED{
-    color:	#EB0716;
+
+.SYS_CANCELED {
+    color: #eb0716;
 }
-.WAITING{
-    color: #FDC401;
+
+.WAITING {
+    color: #fdc401;
 }
-.EARLY_STOPPED{
-    color: 	#FFA500;
+
+.EARLY_STOPPED {
+    color: #ffa500;
 }
diff --git a/src/webui/src/static/style/trialsDetail.scss b/src/webui/src/static/style/trialsDetail.scss
index ab74fa017f..07e8a06091 100644
--- a/src/webui/src/static/style/trialsDetail.scss
+++ b/src/webui/src/static/style/trialsDetail.scss
@@ -1,63 +1,68 @@
-#tabsty{
+#tabsty {
     background-color: #fff;
-    .ms-Pivot{
-        .ms-Button{
+
+    .ms-Pivot {
+        .ms-Button {
             padding: 0;
+
             /* reset fabric style */
             margin-right: 0;
             border-right: 2px solid #fff;
             transition: 0.3s;
         }
 
-        .ms-Pivot-link::before{
+        .ms-Pivot-link::before {
             height: 0;
         }
-        
-        .is-selected{
+
+        .is-selected {
             background: #999;
-            &:hover{
+
+            &:hover {
                 background: #999;
             }
         }
     }
-    
-    .ms-Pivot-icon{
+
+    .ms-Pivot-icon {
         margin-left: 12px;
     }
-    
-    .ms-Pivot-text{
-        /* Default metric | Hyper-parameter | Duration | Intermediate result*/
+
+    .ms-Pivot-text {
+        /* Default metric | Hyper-parameter | Duration | Intermediate result */
         margin: 0 12px;
         font-size: 16px;
         font-weight: 600;
     }
-
 }
 
-.trial{
+.trial {
     /* graph, title total height */
     width: 100%;
     height: 500px;
 
-    .graph{
+    .graph {
         height: 432px;
         margin: 0 auto;
     }
 }
 
-.detailTabs{
+.detailTabs {
     padding-left: 6px;
     padding-right: 18px;
 }
+
 /* table list all */
 
-#tableList{
-    .commonTableStyle{
+#tableList {
+    width: 96%;
+    margin: 0 auto;
+    .commonTableStyle {
         overflow: hidden;
     }
 }
 
-.tooldetailAccuracy{
+.tooldetailAccuracy {
     user-select: text;
     min-width: 245px;
     max-width: 350px;
@@ -65,22 +70,23 @@
     padding: 10px 10px;
     white-space: normal;
     overflow: auto;
-    pre{
+
+    pre {
         overflow: inherit;
         margin-bottom: 10px;
     }
 }
 
-.default-metric{
+.default-metric {
     width: 90%;
     text-align: right;
     margin-top: 15px;
 
-    &-graph{
+    &-graph {
         position: relative;
     }
 
-    &-noData{
+    &-noData {
         position: absolute;
         left: 48%;
         top: 30%;
@@ -88,17 +94,19 @@
     }
 }
 
-.detial-title{
-    .ms-Button{
-        i{
+.detial-title {
+    .ms-Button {
+        i {
             font-size: 22px;
         }
     }
 }
-/* for yAxis # intermediate position in intermediate graph*/
-.intermediate-graph{
+
+/* for yAxis # intermediate position in intermediate graph */
+.intermediate-graph {
     position: relative;
-    .xAxis{
+
+    .xAxis {
         color: #333;
         position: absolute;
         left: 50%;
@@ -107,17 +115,13 @@
     }
 }
 
-#tableList{
-    width: 96%;
-    margin: 0 auto;
-}
-
-.detail-table{
-    .ms-Button{
+.detail-table {
+    .ms-Button {
         padding: 0;
         height: 26px;
         margin-top: -2px;
-        span{
+
+        span {
             padding: 0;
         }
     }
diff --git a/src/webui/yarn.lock b/src/webui/yarn.lock
index 71c2700c31..765c7d92d6 100644
--- a/src/webui/yarn.lock
+++ b/src/webui/yarn.lock
@@ -2,15 +2,33 @@
 # yarn lockfile v1
 
 
-"@babel/code-frame@7.5.5", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.5.5":
+"@babel/code-frame@7.5.5":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d"
+  integrity sha512-27d4lZoomVyo51VegxI20xZPuSHusqbQag/ztrBC7wegWoQ1nLREPVSKSW8byhTlzTKyNE4ifaTA6lCp7JjpFw==
   dependencies:
     "@babel/highlight" "^7.0.0"
 
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
+  integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==
+  dependencies:
+    "@babel/highlight" "^7.10.4"
+
+"@babel/compat-data@^7.10.4", "@babel/compat-data@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.11.0.tgz#e9f73efe09af1355b723a7f39b11bad637d7c99c"
+  integrity sha512-TPSvJfv73ng0pfnEOh17bYMPQbI95+nGWc71Ss4vZdRBHTDqmM9Z8ZV4rYz8Ks7sfzc95n30k6ODIq5UGnXcYQ==
+  dependencies:
+    browserslist "^4.12.0"
+    invariant "^2.2.4"
+    semver "^5.5.0"
+
 "@babel/core@7.4.3":
   version "7.4.3"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.4.3.tgz#198d6d3af4567be3989550d97e068de94503074f"
+  integrity sha512-oDpASqKFlbspQfzAE7yaeTmdljSH2ADIvBlb0RwbStltTuWa0+7CCI1fYVINNv9saHPa1W7oaKeuNuKj+RQCvA==
   dependencies:
     "@babel/code-frame" "^7.0.0"
     "@babel/generator" "^7.4.0"
@@ -27,376 +45,551 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/core@^7.1.0", "@babel/core@^7.1.6", "@babel/core@^7.4.5":
-  version "7.7.7"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.7.tgz#ee155d2e12300bcc0cff6a8ad46f2af5063803e9"
-  dependencies:
-    "@babel/code-frame" "^7.5.5"
-    "@babel/generator" "^7.7.7"
-    "@babel/helpers" "^7.7.4"
-    "@babel/parser" "^7.7.7"
-    "@babel/template" "^7.7.4"
-    "@babel/traverse" "^7.7.4"
-    "@babel/types" "^7.7.4"
+"@babel/core@>=7.9.0", "@babel/core@^7.1.0", "@babel/core@^7.1.6", "@babel/core@^7.4.5":
+  version "7.11.6"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.11.6.tgz#3a9455dc7387ff1bac45770650bc13ba04a15651"
+  integrity sha512-Wpcv03AGnmkgm6uS6k8iwhIwTrcP0m17TL1n1sy7qD0qelDu4XNeW0dN0mHfa+Gei211yDaLoEe/VlbXQzM4Bg==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.11.6"
+    "@babel/helper-module-transforms" "^7.11.0"
+    "@babel/helpers" "^7.10.4"
+    "@babel/parser" "^7.11.5"
+    "@babel/template" "^7.10.4"
+    "@babel/traverse" "^7.11.5"
+    "@babel/types" "^7.11.5"
     convert-source-map "^1.7.0"
     debug "^4.1.0"
-    json5 "^2.1.0"
-    lodash "^4.17.13"
+    gensync "^1.0.0-beta.1"
+    json5 "^2.1.2"
+    lodash "^4.17.19"
     resolve "^1.3.2"
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/generator@^7.4.0", "@babel/generator@^7.7.4", "@babel/generator@^7.7.7":
-  version "7.7.7"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.7.tgz#859ac733c44c74148e1a72980a64ec84b85f4f45"
+"@babel/generator@^7.11.5", "@babel/generator@^7.11.6", "@babel/generator@^7.4.0":
+  version "7.11.6"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.11.6.tgz#b868900f81b163b4d464ea24545c61cbac4dc620"
+  integrity sha512-DWtQ1PV3r+cLbySoHrwn9RWEgKMBLLma4OBQloPRyDYvc5msJM9kvTLo1YnlJd1P/ZuKbdli3ijr5q3FvAF3uA==
   dependencies:
-    "@babel/types" "^7.7.4"
+    "@babel/types" "^7.11.5"
     jsesc "^2.5.1"
-    lodash "^4.17.13"
     source-map "^0.5.0"
 
-"@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.7.4.tgz#bb3faf1e74b74bd547e867e48f551fa6b098b6ce"
+"@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz#5bf0d495a3f757ac3bda48b5bf3b3ba309c72ba3"
+  integrity sha512-XQlqKQP4vXFB7BN8fEEerrmYvHp3fK/rBkRFz9jaJbzK0B1DSfej9Kc7ZzE8Z/OnId1jpJdNAZ3BFQjWG68rcA==
   dependencies:
-    "@babel/types" "^7.7.4"
+    "@babel/types" "^7.10.4"
 
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.7.4.tgz#5f73f2b28580e224b5b9bd03146a4015d6217f5f"
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.10.4.tgz#bb0b75f31bf98cbf9ff143c1ae578b87274ae1a3"
+  integrity sha512-L0zGlFrGWZK4PbT8AszSfLTM5sDU1+Az/En9VrdT8/LmEiJt4zXt+Jve9DCAnQcbqDhCI+29y/L93mrDzddCcg==
   dependencies:
-    "@babel/helper-explode-assignable-expression" "^7.7.4"
-    "@babel/types" "^7.7.4"
+    "@babel/helper-explode-assignable-expression" "^7.10.4"
+    "@babel/types" "^7.10.4"
 
-"@babel/helper-builder-react-jsx@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.7.4.tgz#da188d247508b65375b2c30cf59de187be6b0c66"
+"@babel/helper-builder-react-jsx-experimental@^7.10.4", "@babel/helper-builder-react-jsx-experimental@^7.11.5":
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.11.5.tgz#4ea43dd63857b0a35cd1f1b161dc29b43414e79f"
+  integrity sha512-Vc4aPJnRZKWfzeCBsqTBnzulVNjABVdahSPhtdMD3Vs80ykx4a87jTHtF/VR+alSrDmNvat7l13yrRHauGcHVw==
   dependencies:
-    "@babel/types" "^7.7.4"
-    esutils "^2.0.0"
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/types" "^7.11.5"
 
-"@babel/helper-call-delegate@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-call-delegate/-/helper-call-delegate-7.7.4.tgz#621b83e596722b50c0066f9dc37d3232e461b801"
+"@babel/helper-builder-react-jsx@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.10.4.tgz#8095cddbff858e6fa9c326daee54a2f2732c1d5d"
+  integrity sha512-5nPcIZ7+KKDxT1427oBivl9V9YTal7qk0diccnh7RrcgrT/pGFOjgGw1dgryyx1GvHEpXVfoDF6Ak3rTiWh8Rg==
   dependencies:
-    "@babel/helper-hoist-variables" "^7.7.4"
-    "@babel/traverse" "^7.7.4"
-    "@babel/types" "^7.7.4"
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/types" "^7.10.4"
 
-"@babel/helper-create-class-features-plugin@^7.4.0", "@babel/helper-create-class-features-plugin@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.7.4.tgz#fce60939fd50618610942320a8d951b3b639da2d"
+"@babel/helper-compilation-targets@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.10.4.tgz#804ae8e3f04376607cc791b9d47d540276332bd2"
+  integrity sha512-a3rYhlsGV0UHNDvrtOXBg8/OpfV0OKTkxKPzIplS1zpx7CygDcWWxckxZeDd3gzPzC4kUT0A4nVFDK0wGMh4MQ==
   dependencies:
-    "@babel/helper-function-name" "^7.7.4"
-    "@babel/helper-member-expression-to-functions" "^7.7.4"
-    "@babel/helper-optimise-call-expression" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-replace-supers" "^7.7.4"
-    "@babel/helper-split-export-declaration" "^7.7.4"
+    "@babel/compat-data" "^7.10.4"
+    browserslist "^4.12.0"
+    invariant "^2.2.4"
+    levenary "^1.1.1"
+    semver "^5.5.0"
 
-"@babel/helper-create-regexp-features-plugin@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.7.4.tgz#6d5762359fd34f4da1500e4cff9955b5299aaf59"
-  dependencies:
-    "@babel/helper-regex" "^7.4.4"
-    regexpu-core "^4.6.0"
+"@babel/helper-create-class-features-plugin@^7.10.4", "@babel/helper-create-class-features-plugin@^7.10.5", "@babel/helper-create-class-features-plugin@^7.4.0":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.10.5.tgz#9f61446ba80e8240b0a5c85c6fdac8459d6f259d"
+  integrity sha512-0nkdeijB7VlZoLT3r/mY3bUkw3T8WG/hNw+FATs/6+pG2039IJWjTYL0VTISqsNHMUTEnwbVnc89WIJX9Qed0A==
+  dependencies:
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-member-expression-to-functions" "^7.10.5"
+    "@babel/helper-optimise-call-expression" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-replace-supers" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.10.4"
+
+"@babel/helper-create-regexp-features-plugin@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.10.4.tgz#fdd60d88524659a0b6959c0579925e425714f3b8"
+  integrity sha512-2/hu58IEPKeoLF45DBwx3XFqsbCXmkdAay4spVr2x0jYgRxrSNp+ePwvSsy9g6YSaNDcKIQVPXk1Ov8S2edk2g==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-regex" "^7.10.4"
+    regexpu-core "^4.7.0"
+
+"@babel/helper-define-map@^7.10.4", "@babel/helper-define-map@^7.4.0":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.10.5.tgz#b53c10db78a640800152692b13393147acb9bb30"
+  integrity sha512-fMw4kgFB720aQFXSVaXr79pjjcW5puTCM16+rECJ/plGS+zByelE8l9nCpV1GibxTnFVmUuYG9U8wYfQHdzOEQ==
+  dependencies:
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/types" "^7.10.5"
+    lodash "^4.17.19"
+
+"@babel/helper-explode-assignable-expression@^7.10.4":
+  version "7.11.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.11.4.tgz#2d8e3470252cc17aba917ede7803d4a7a276a41b"
+  integrity sha512-ux9hm3zR4WV1Y3xXxXkdG/0gxF9nvI0YVmKVhvK9AfMoaQkemL3sJpXw+Xbz65azo8qJiEz2XVDUpK3KYhH3ZQ==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-function-name@^7.1.0", "@babel/helper-function-name@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz#d2d3b20c59ad8c47112fa7d2a94bc09d5ef82f1a"
+  integrity sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.10.4"
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-get-function-arity@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz#98c1cbea0e2332f33f9a4661b8ce1505b2c19ba2"
+  integrity sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-hoist-variables@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.10.4.tgz#d49b001d1d5a68ca5e6604dda01a6297f7c9381e"
+  integrity sha512-wljroF5PgCk2juF69kanHVs6vrLwIPNp6DLD+Lrl3hoQ3PpPPikaDRNFA+0t81NOoMt2DL6WW/mdU8k4k6ZzuA==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-member-expression-to-functions@^7.10.4", "@babel/helper-member-expression-to-functions@^7.10.5":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.11.0.tgz#ae69c83d84ee82f4b42f96e2a09410935a8f26df"
+  integrity sha512-JbFlKHFntRV5qKw3YC0CvQnDZ4XMwgzzBbld7Ly4Mj4cbFy3KywcR8NtNctRToMWJOVvLINJv525Gd6wwVEx/Q==
+  dependencies:
+    "@babel/types" "^7.11.0"
+
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz#4c5c54be04bd31670a7382797d75b9fa2e5b5620"
+  integrity sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-module-transforms@^7.10.4", "@babel/helper-module-transforms@^7.10.5", "@babel/helper-module-transforms@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.11.0.tgz#b16f250229e47211abdd84b34b64737c2ab2d359"
+  integrity sha512-02EVu8COMuTRO1TAzdMtpBPbe6aQ1w/8fePD2YgQmxZU4gpNWaL9gK3Jp7dxlkUlUCJOTaSeA+Hrm1BRQwqIhg==
+  dependencies:
+    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/helper-replace-supers" "^7.10.4"
+    "@babel/helper-simple-access" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.11.0"
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.11.0"
+    lodash "^4.17.19"
+
+"@babel/helper-optimise-call-expression@^7.0.0", "@babel/helper-optimise-call-expression@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz#50dc96413d594f995a77905905b05893cd779673"
+  integrity sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg==
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.8.0", "@babel/helper-plugin-utils@^7.8.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375"
+  integrity sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==
+
+"@babel/helper-regex@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.10.5.tgz#32dfbb79899073c415557053a19bd055aae50ae0"
+  integrity sha512-68kdUAzDrljqBrio7DYAEgCoJHxppJOERHOgOrDN7WjOzP0ZQ1LsSDRXcemzVZaLvjaJsJEESb6qt+znNuENDg==
+  dependencies:
+    lodash "^4.17.19"
+
+"@babel/helper-remap-async-to-generator@^7.10.4":
+  version "7.11.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.11.4.tgz#4474ea9f7438f18575e30b0cac784045b402a12d"
+  integrity sha512-tR5vJ/vBa9wFy3m5LLv2faapJLnDFxNWff2SAYkSE4rLUdbp7CdObYFgI7wK4T/Mj4UzpjPwzR8Pzmr5m7MHGA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-wrap-function" "^7.10.4"
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-replace-supers@^7.10.4", "@babel/helper-replace-supers@^7.4.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.10.4.tgz#d585cd9388ea06e6031e4cd44b6713cbead9e6cf"
+  integrity sha512-sPxZfFXocEymYTdVK1UNmFPBN+Hv5mJkLPsYWwGBxZAxaWfFu+xqp7b6qWD0yjNuNL2VKc6L5M18tOXUP7NU0A==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.10.4"
+    "@babel/helper-optimise-call-expression" "^7.10.4"
+    "@babel/traverse" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-simple-access@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.10.4.tgz#0f5ccda2945277a2a7a2d3a821e15395edcf3461"
+  integrity sha512-0fMy72ej/VEvF8ULmX6yb5MtHG4uH4Dbd6I/aHDb/JVg0bbivwt9Wg+h3uMvX+QSFtwr5MeItvazbrc4jtRAXw==
+  dependencies:
+    "@babel/template" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.11.0.tgz#eec162f112c2f58d3af0af125e3bb57665146729"
+  integrity sha512-0XIdiQln4Elglgjbwo9wuJpL/K7AGCY26kmEt0+pRP0TAj4jjyNq1MjoRvikrTVqKcx4Gysxt4cXvVFXP/JO2Q==
+  dependencies:
+    "@babel/types" "^7.11.0"
+
+"@babel/helper-split-export-declaration@^7.10.4", "@babel/helper-split-export-declaration@^7.11.0", "@babel/helper-split-export-declaration@^7.4.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.11.0.tgz#f8a491244acf6a676158ac42072911ba83ad099f"
+  integrity sha512-74Vejvp6mHkGE+m+k5vHY93FX2cAtrw1zXrZXRlG4l410Nm9PxfEiVTn1PjDPV5SnmieiueY4AFg2xqhNFuuZg==
+  dependencies:
+    "@babel/types" "^7.11.0"
+
+"@babel/helper-validator-identifier@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2"
+  integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==
+
+"@babel/helper-wrap-function@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.10.4.tgz#8a6f701eab0ff39f765b5a1cfef409990e624b87"
+  integrity sha512-6py45WvEF0MhiLrdxtRjKjufwLL1/ob2qDJgg5JgNdojBAZSAKnAjkyOCNug6n+OBl4VW76XjvgSFTdaMcW0Ug==
+  dependencies:
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/template" "^7.10.4"
+    "@babel/traverse" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/helpers@^7.10.4", "@babel/helpers@^7.4.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.10.4.tgz#2abeb0d721aff7c0a97376b9e1f6f65d7a475044"
+  integrity sha512-L2gX/XeUONeEbI78dXSrJzGdz4GQ+ZTA/aazfUsFaWjSe95kiCuOZ5HsXvkiw3iwF+mFHSRUfJU8t6YavocdXA==
+  dependencies:
+    "@babel/template" "^7.10.4"
+    "@babel/traverse" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/highlight@^7.0.0", "@babel/highlight@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143"
+  integrity sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    chalk "^2.0.0"
+    js-tokens "^4.0.0"
 
-"@babel/helper-define-map@^7.4.0", "@babel/helper-define-map@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.7.4.tgz#2841bf92eb8bd9c906851546fe6b9d45e162f176"
-  dependencies:
-    "@babel/helper-function-name" "^7.7.4"
-    "@babel/types" "^7.7.4"
-    lodash "^4.17.13"
+"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.10.4", "@babel/parser@^7.11.5", "@babel/parser@^7.4.3":
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.11.5.tgz#c7ff6303df71080ec7a4f5b8c003c58f1cf51037"
+  integrity sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==
 
-"@babel/helper-explode-assignable-expression@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.7.4.tgz#fa700878e008d85dc51ba43e9fb835cddfe05c84"
+"@babel/plugin-proposal-async-generator-functions@^7.10.4", "@babel/plugin-proposal-async-generator-functions@^7.2.0":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.10.5.tgz#3491cabf2f7c179ab820606cec27fed15e0e8558"
+  integrity sha512-cNMCVezQbrRGvXJwm9fu/1sJj9bHdGAgKodZdLqOQIpfoH3raqmRPBM17+lh7CzhiKRRBrGtZL9WcjxSoGYUSg==
   dependencies:
-    "@babel/traverse" "^7.7.4"
-    "@babel/types" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-remap-async-to-generator" "^7.10.4"
+    "@babel/plugin-syntax-async-generators" "^7.8.0"
 
-"@babel/helper-function-name@^7.1.0", "@babel/helper-function-name@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.7.4.tgz#ab6e041e7135d436d8f0a3eca15de5b67a341a2e"
+"@babel/plugin-proposal-class-properties@7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.4.0.tgz#d70db61a2f1fd79de927eea91f6411c964e084b8"
+  integrity sha512-t2ECPNOXsIeK1JxJNKmgbzQtoG27KIlVE61vTqX0DKR9E9sZlVVxWUtEW9D5FlZ8b8j7SBNCHY47GgPKCKlpPg==
   dependencies:
-    "@babel/helper-get-function-arity" "^7.7.4"
-    "@babel/template" "^7.7.4"
-    "@babel/types" "^7.7.4"
+    "@babel/helper-create-class-features-plugin" "^7.4.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/helper-get-function-arity@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.4.tgz#cb46348d2f8808e632f0ab048172130e636005f0"
+"@babel/plugin-proposal-class-properties@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.10.4.tgz#a33bf632da390a59c7a8c570045d1115cd778807"
+  integrity sha512-vhwkEROxzcHGNu2mzUC0OFFNXdZ4M23ib8aRRcJSsW8BZK9pQMD7QB7csl97NBbgGZO7ZyHUyKDnxzOaP4IrCg==
   dependencies:
-    "@babel/types" "^7.7.4"
+    "@babel/helper-create-class-features-plugin" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/helper-hoist-variables@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.7.4.tgz#612384e3d823fdfaaf9fce31550fe5d4db0f3d12"
+"@babel/plugin-proposal-decorators@7.4.0":
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.4.0.tgz#8e1bfd83efa54a5f662033afcc2b8e701f4bb3a9"
+  integrity sha512-d08TLmXeK/XbgCo7ZeZ+JaeZDtDai/2ctapTRsWWkkmy7G/cqz8DQN/HlWG7RR4YmfXxmExsbU3SuCjlM7AtUg==
   dependencies:
-    "@babel/types" "^7.7.4"
+    "@babel/helper-create-class-features-plugin" "^7.4.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-decorators" "^7.2.0"
 
-"@babel/helper-member-expression-to-functions@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.7.4.tgz#356438e2569df7321a8326644d4b790d2122cb74"
+"@babel/plugin-proposal-dynamic-import@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.10.4.tgz#ba57a26cb98b37741e9d5bca1b8b0ddf8291f17e"
+  integrity sha512-up6oID1LeidOOASNXgv/CFbgBqTuKJ0cJjz6An5tWD+NVBNlp3VNSBxv2ZdU7SYl3NxJC7agAQDApZusV6uFwQ==
   dependencies:
-    "@babel/types" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.7.4.tgz#e5a92529f8888bf319a6376abfbd1cebc491ad91"
+"@babel/plugin-proposal-export-namespace-from@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.10.4.tgz#570d883b91031637b3e2958eea3c438e62c05f54"
+  integrity sha512-aNdf0LY6/3WXkhh0Fdb6Zk9j1NMD8ovj3F6r0+3j837Pn1S1PdNtcwJ5EG9WkVPNHPxyJDaxMaAOVq4eki0qbg==
   dependencies:
-    "@babel/types" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
-"@babel/helper-module-transforms@^7.7.4", "@babel/helper-module-transforms@^7.7.5":
-  version "7.7.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.7.5.tgz#d044da7ffd91ec967db25cd6748f704b6b244835"
+"@babel/plugin-proposal-json-strings@^7.10.4", "@babel/plugin-proposal-json-strings@^7.2.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.10.4.tgz#593e59c63528160233bd321b1aebe0820c2341db"
+  integrity sha512-fCL7QF0Jo83uy1K0P2YXrfX11tj3lkpN7l4dMv9Y9VkowkhkQDwFHFd8IiwyK5MZjE8UpbgokkgtcReH88Abaw==
   dependencies:
-    "@babel/helper-module-imports" "^7.7.4"
-    "@babel/helper-simple-access" "^7.7.4"
-    "@babel/helper-split-export-declaration" "^7.7.4"
-    "@babel/template" "^7.7.4"
-    "@babel/types" "^7.7.4"
-    lodash "^4.17.13"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-json-strings" "^7.8.0"
 
-"@babel/helper-optimise-call-expression@^7.0.0", "@babel/helper-optimise-call-expression@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.7.4.tgz#034af31370d2995242aa4df402c3b7794b2dcdf2"
+"@babel/plugin-proposal-logical-assignment-operators@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.11.0.tgz#9f80e482c03083c87125dee10026b58527ea20c8"
+  integrity sha512-/f8p4z+Auz0Uaf+i8Ekf1iM7wUNLcViFUGiPxKeXvxTSl63B875YPiVdUDdem7hREcI0E0kSpEhS8tF5RphK7Q==
   dependencies:
-    "@babel/types" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
 
-"@babel/helper-plugin-utils@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.0.0.tgz#bbb3fbee98661c569034237cc03967ba99b4f250"
-
-"@babel/helper-regex@^7.0.0", "@babel/helper-regex@^7.4.4":
-  version "7.5.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.5.5.tgz#0aa6824f7100a2e0e89c1527c23936c152cab351"
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.4.tgz#02a7e961fc32e6d5b2db0649e01bf80ddee7e04a"
+  integrity sha512-wq5n1M3ZUlHl9sqT2ok1T2/MTt6AXE0e1Lz4WzWBr95LsAZ5qDXe4KnFuauYyEyLiohvXFMdbsOTMyLZs91Zlw==
   dependencies:
-    lodash "^4.17.13"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
 
-"@babel/helper-remap-async-to-generator@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.7.4.tgz#c68c2407350d9af0e061ed6726afb4fff16d0234"
+"@babel/plugin-proposal-numeric-separator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.10.4.tgz#ce1590ff0a65ad12970a609d78855e9a4c1aef06"
+  integrity sha512-73/G7QoRoeNkLZFxsoCCvlg4ezE4eM+57PnOqgaPOozd5myfj7p0muD1mRVJvbUWbOzD+q3No2bWbaKy+DJ8DA==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.7.4"
-    "@babel/helper-wrap-function" "^7.7.4"
-    "@babel/template" "^7.7.4"
-    "@babel/traverse" "^7.7.4"
-    "@babel/types" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
-"@babel/helper-replace-supers@^7.4.0", "@babel/helper-replace-supers@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.7.4.tgz#3c881a6a6a7571275a72d82e6107126ec9e2cdd2"
+"@babel/plugin-proposal-object-rest-spread@7.4.3":
+  version "7.4.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.4.3.tgz#be27cd416eceeba84141305b93c282f5de23bbb4"
+  integrity sha512-xC//6DNSSHVjq8O2ge0dyYlhshsH4T7XdCVoxbi5HzLYWfsC5ooFlJjrXk8RcAT+hjHAK9UjBXdylzSoDK3t4g==
   dependencies:
-    "@babel/helper-member-expression-to-functions" "^7.7.4"
-    "@babel/helper-optimise-call-expression" "^7.7.4"
-    "@babel/traverse" "^7.7.4"
-    "@babel/types" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
 
-"@babel/helper-simple-access@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.7.4.tgz#a169a0adb1b5f418cfc19f22586b2ebf58a9a294"
+"@babel/plugin-proposal-object-rest-spread@^7.11.0", "@babel/plugin-proposal-object-rest-spread@^7.4.3":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.11.0.tgz#bd81f95a1f746760ea43b6c2d3d62b11790ad0af"
+  integrity sha512-wzch41N4yztwoRw0ak+37wxwJM2oiIiy6huGCoqkvSTA9acYWcPfn9Y4aJqmFFJ70KTJUu29f3DQ43uJ9HXzEA==
   dependencies:
-    "@babel/template" "^7.7.4"
-    "@babel/types" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+    "@babel/plugin-transform-parameters" "^7.10.4"
 
-"@babel/helper-split-export-declaration@^7.4.0", "@babel/helper-split-export-declaration@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.4.tgz#57292af60443c4a3622cf74040ddc28e68336fd8"
+"@babel/plugin-proposal-optional-catch-binding@^7.10.4", "@babel/plugin-proposal-optional-catch-binding@^7.2.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.10.4.tgz#31c938309d24a78a49d68fdabffaa863758554dd"
+  integrity sha512-LflT6nPh+GK2MnFiKDyLiqSqVHkQnVf7hdoAvyTnnKj9xB3docGRsdPuxp6qqqW19ifK3xgc9U5/FwrSaCNX5g==
   dependencies:
-    "@babel/types" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
 
-"@babel/helper-wrap-function@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.7.4.tgz#37ab7fed5150e22d9d7266e830072c0cdd8baace"
+"@babel/plugin-proposal-optional-chaining@^7.11.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.11.0.tgz#de5866d0646f6afdaab8a566382fe3a221755076"
+  integrity sha512-v9fZIu3Y8562RRwhm1BbMRxtqZNFmFA2EG+pT2diuU8PT3H6T/KXoZ54KgYisfOFZHV6PfvAiBIZ9Rcz+/JCxA==
   dependencies:
-    "@babel/helper-function-name" "^7.7.4"
-    "@babel/template" "^7.7.4"
-    "@babel/traverse" "^7.7.4"
-    "@babel/types" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.11.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
 
-"@babel/helpers@^7.4.3", "@babel/helpers@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.7.4.tgz#62c215b9e6c712dadc15a9a0dcab76c92a940302"
+"@babel/plugin-proposal-private-methods@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.10.4.tgz#b160d972b8fdba5c7d111a145fc8c421fc2a6909"
+  integrity sha512-wh5GJleuI8k3emgTg5KkJK6kHNsGEr0uBTDBuQUBJwckk9xs1ez79ioheEVVxMLyPscB0LfkbVHslQqIzWV6Bw==
   dependencies:
-    "@babel/template" "^7.7.4"
-    "@babel/traverse" "^7.7.4"
-    "@babel/types" "^7.7.4"
+    "@babel/helper-create-class-features-plugin" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/highlight@^7.0.0":
-  version "7.5.0"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.5.0.tgz#56d11312bd9248fa619591d02472be6e8cb32540"
+"@babel/plugin-proposal-unicode-property-regex@^7.10.4", "@babel/plugin-proposal-unicode-property-regex@^7.4.0", "@babel/plugin-proposal-unicode-property-regex@^7.4.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.10.4.tgz#4483cda53041ce3413b7fe2f00022665ddfaa75d"
+  integrity sha512-H+3fOgPnEXFL9zGYtKQe4IDOPKYlZdF1kqFDQRRb8PK4B8af1vAGK04tF5iQAAsui+mHNBQSAtd2/ndEDe9wuA==
   dependencies:
-    chalk "^2.0.0"
-    esutils "^2.0.2"
-    js-tokens "^4.0.0"
-
-"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.4.3", "@babel/parser@^7.7.4", "@babel/parser@^7.7.7":
-  version "7.7.7"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.7.tgz#1b886595419cf92d811316d5b715a53ff38b4937"
+    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-proposal-async-generator-functions@^7.2.0", "@babel/plugin-proposal-async-generator-functions@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.7.4.tgz#0351c5ac0a9e927845fffd5b82af476947b7ce6d"
+"@babel/plugin-syntax-async-generators@^7.2.0", "@babel/plugin-syntax-async-generators@^7.8.0":
+  version "7.8.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz#a983fb1aeb2ec3f6ed042a210f640e90e786fe0d"
+  integrity sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-remap-async-to-generator" "^7.7.4"
-    "@babel/plugin-syntax-async-generators" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-proposal-class-properties@7.4.0":
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.4.0.tgz#d70db61a2f1fd79de927eea91f6411c964e084b8"
+"@babel/plugin-syntax-class-properties@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.10.4.tgz#6644e6a0baa55a61f9e3231f6c9eeb6ee46c124c"
+  integrity sha512-GCSBF7iUle6rNugfURwNmCGG3Z/2+opxAMLs1nND4bhEG5PuxTIggDBoeYYSujAlLtsupzOHYJQgPS3pivwXIA==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.4.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-proposal-decorators@7.4.0":
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.4.0.tgz#8e1bfd83efa54a5f662033afcc2b8e701f4bb3a9"
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.4.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-decorators" "^7.2.0"
-
-"@babel/plugin-proposal-dynamic-import@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.7.4.tgz#dde64a7f127691758cbfed6cf70de0fa5879d52d"
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-dynamic-import" "^7.7.4"
-
-"@babel/plugin-proposal-json-strings@^7.2.0", "@babel/plugin-proposal-json-strings@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.7.4.tgz#7700a6bfda771d8dc81973249eac416c6b4c697d"
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-json-strings" "^7.7.4"
-
-"@babel/plugin-proposal-object-rest-spread@7.4.3":
-  version "7.4.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.4.3.tgz#be27cd416eceeba84141305b93c282f5de23bbb4"
+"@babel/plugin-syntax-decorators@^7.2.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.10.4.tgz#6853085b2c429f9d322d02f5a635018cdeb2360c"
+  integrity sha512-2NaoC6fAk2VMdhY1eerkfHV+lVYC1u8b+jmRJISqANCJlTxYy19HGdIkkQtix2UtkcPuPu+IlDgrVseZnU03bw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-proposal-object-rest-spread@^7.4.3", "@babel/plugin-proposal-object-rest-spread@^7.7.7":
-  version "7.7.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.7.7.tgz#9f27075004ab99be08c5c1bd653a2985813cb370"
+"@babel/plugin-syntax-dynamic-import@7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.2.0.tgz#69c159ffaf4998122161ad8ebc5e6d1f55df8612"
+  integrity sha512-mVxuJ0YroI/h/tbFTPGZR8cv6ai+STMKNBq0f8hFxsxWjl94qqhsb+wXbpNMDPU3cfR1TIsVFzU3nXyZMqyK4w==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-object-rest-spread" "^7.7.4"
 
-"@babel/plugin-proposal-optional-catch-binding@^7.2.0", "@babel/plugin-proposal-optional-catch-binding@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.7.4.tgz#ec21e8aeb09ec6711bc0a39ca49520abee1de379"
+"@babel/plugin-syntax-dynamic-import@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
+  integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-proposal-unicode-property-regex@^7.4.0", "@babel/plugin-proposal-unicode-property-regex@^7.7.7":
-  version "7.7.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.7.7.tgz#433fa9dac64f953c12578b29633f456b68831c4e"
+"@babel/plugin-syntax-export-namespace-from@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz#028964a9ba80dbc094c915c487ad7c4e7a66465a"
+  integrity sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-async-generators@^7.2.0", "@babel/plugin-syntax-async-generators@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.7.4.tgz#331aaf310a10c80c44a66b238b6e49132bd3c889"
+"@babel/plugin-syntax-flow@^7.2.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.10.4.tgz#53351dd7ae01995e567d04ce42af1a6e0ba846a6"
+  integrity sha512-yxQsX1dJixF4qEEdzVbst3SZQ58Nrooz8NV9Z9GL4byTE25BvJgl5lf0RECUf0fh28rZBb/RYTWn/eeKwCMrZQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-syntax-decorators@^7.2.0":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.7.4.tgz#3c91cfee2a111663ff3ac21b851140f5a52a4e0b"
+"@babel/plugin-syntax-json-strings@^7.2.0", "@babel/plugin-syntax-json-strings@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"
+  integrity sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-dynamic-import@7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.2.0.tgz#69c159ffaf4998122161ad8ebc5e6d1f55df8612"
+"@babel/plugin-syntax-jsx@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.10.4.tgz#39abaae3cbf710c4373d8429484e6ba21340166c"
+  integrity sha512-KCg9mio9jwiARCB7WAcQ7Y1q+qicILjoK8LP/VkPkEKaf5dkaZZK1EcTe91a3JJlZ3qy6L5s9X52boEYi8DM9g==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-syntax-dynamic-import@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.7.4.tgz#29ca3b4415abfe4a5ec381e903862ad1a54c3aec"
+"@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
+  integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-syntax-flow@^7.2.0":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.7.4.tgz#6d91b59e1a0e4c17f36af2e10dd64ef220919d7b"
+"@babel/plugin-syntax-nullish-coalescing-operator@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz#167ed70368886081f74b5c36c65a88c03b66d1a9"
+  integrity sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-json-strings@^7.2.0", "@babel/plugin-syntax-json-strings@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.7.4.tgz#86e63f7d2e22f9e27129ac4e83ea989a382e86cc"
+"@babel/plugin-syntax-numeric-separator@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
+  integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-syntax-jsx@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.7.4.tgz#dab2b56a36fb6c3c222a1fbc71f7bf97f327a9ec"
+"@babel/plugin-syntax-object-rest-spread@^7.0.0", "@babel/plugin-syntax-object-rest-spread@^7.2.0", "@babel/plugin-syntax-object-rest-spread@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz#60e225edcbd98a640332a2e72dd3e66f1af55871"
+  integrity sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-object-rest-spread@^7.0.0", "@babel/plugin-syntax-object-rest-spread@^7.2.0", "@babel/plugin-syntax-object-rest-spread@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.7.4.tgz#47cf220d19d6d0d7b154304701f468fc1cc6ff46"
+"@babel/plugin-syntax-optional-catch-binding@^7.2.0", "@babel/plugin-syntax-optional-catch-binding@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz#6111a265bcfb020eb9efd0fdfd7d26402b9ed6c1"
+  integrity sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-optional-catch-binding@^7.2.0", "@babel/plugin-syntax-optional-catch-binding@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.7.4.tgz#a3e38f59f4b6233867b4a92dcb0ee05b2c334aa6"
+"@babel/plugin-syntax-optional-chaining@^7.8.0":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz#4f69c2ab95167e0180cd5336613f8c5788f7d48a"
+  integrity sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-top-level-await@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.7.4.tgz#bd7d8fa7b9fee793a36e4027fd6dd1aa32f946da"
+"@babel/plugin-syntax-top-level-await@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.10.4.tgz#4bbeb8917b54fcf768364e0a81f560e33a3ef57d"
+  integrity sha512-ni1brg4lXEmWyafKr0ccFWkJG0CeMt4WV1oyeBW6EFObF4oOHclbkj5cARxAPQyAQ2UTuplJyK4nfkXIMMFvsQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-syntax-typescript@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.7.4.tgz#5d037ffa10f3b25a16f32570ebbe7a8c2efa304b"
+"@babel/plugin-syntax-typescript@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.10.4.tgz#2f55e770d3501e83af217d782cb7517d7bb34d25"
+  integrity sha512-oSAEz1YkBCAKr5Yiq8/BNtvSAPwkp/IyUnwZogd8p+F0RuYQQrLeRUzIQhueQTTBy/F+a40uS7OFKxnkRvmvFQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-arrow-functions@^7.2.0", "@babel/plugin-transform-arrow-functions@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.7.4.tgz#76309bd578addd8aee3b379d809c802305a98a12"
+"@babel/plugin-transform-arrow-functions@^7.10.4", "@babel/plugin-transform-arrow-functions@^7.2.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.10.4.tgz#e22960d77e697c74f41c501d44d73dbf8a6a64cd"
+  integrity sha512-9J/oD1jV0ZCBcgnoFWFq1vJd4msoKb/TCpGNFyyLt0zABdcvgK3aYikZ8HjzB14c26bc7E3Q1yugpwGy2aTPNA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-async-to-generator@^7.4.0", "@babel/plugin-transform-async-to-generator@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.7.4.tgz#694cbeae6d613a34ef0292713fa42fb45c4470ba"
+"@babel/plugin-transform-async-to-generator@^7.10.4", "@babel/plugin-transform-async-to-generator@^7.4.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.10.4.tgz#41a5017e49eb6f3cda9392a51eef29405b245a37"
+  integrity sha512-F6nREOan7J5UXTLsDsZG3DXmZSVofr2tGNwfdrVwkDWHfQckbQXnXSPfD7iO+c/2HGqycwyLST3DnZ16n+cBJQ==
   dependencies:
-    "@babel/helper-module-imports" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-remap-async-to-generator" "^7.7.4"
+    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-remap-async-to-generator" "^7.10.4"
 
-"@babel/plugin-transform-block-scoped-functions@^7.2.0", "@babel/plugin-transform-block-scoped-functions@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.7.4.tgz#d0d9d5c269c78eaea76227ace214b8d01e4d837b"
+"@babel/plugin-transform-block-scoped-functions@^7.10.4", "@babel/plugin-transform-block-scoped-functions@^7.2.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.10.4.tgz#1afa595744f75e43a91af73b0d998ecfe4ebc2e8"
+  integrity sha512-WzXDarQXYYfjaV1szJvN3AD7rZgZzC1JtjJZ8dMHUyiK8mxPRahynp14zzNjU3VkPqPsO38CzxiWO1c9ARZ8JA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-block-scoping@^7.4.0", "@babel/plugin-transform-block-scoping@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.7.4.tgz#200aad0dcd6bb80372f94d9e628ea062c58bf224"
+"@babel/plugin-transform-block-scoping@^7.10.4", "@babel/plugin-transform-block-scoping@^7.4.0":
+  version "7.11.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.11.1.tgz#5b7efe98852bef8d652c0b28144cd93a9e4b5215"
+  integrity sha512-00dYeDE0EVEHuuM+26+0w/SCL0BH2Qy7LwHuI4Hi4MH5gkC8/AqMN5uWFJIsoXZrAphiMm1iXzBw6L2T+eA0ew==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    lodash "^4.17.13"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
 "@babel/plugin-transform-classes@7.4.3":
   version "7.4.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.4.3.tgz#adc7a1137ab4287a555d429cc56ecde8f40c062c"
+  integrity sha512-PUaIKyFUDtG6jF5DUJOfkBdwAS/kFFV3XFk7Nn0a6vR7ZT8jYw5cGtIlat77wcnd0C6ViGqo/wyNf4ZHytF/nQ==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.0.0"
     "@babel/helper-define-map" "^7.4.0"
@@ -407,273 +600,337 @@
     "@babel/helper-split-export-declaration" "^7.4.0"
     globals "^11.1.0"
 
-"@babel/plugin-transform-classes@^7.4.3", "@babel/plugin-transform-classes@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.7.4.tgz#c92c14be0a1399e15df72667067a8f510c9400ec"
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.7.4"
-    "@babel/helper-define-map" "^7.7.4"
-    "@babel/helper-function-name" "^7.7.4"
-    "@babel/helper-optimise-call-expression" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-replace-supers" "^7.7.4"
-    "@babel/helper-split-export-declaration" "^7.7.4"
+"@babel/plugin-transform-classes@^7.10.4", "@babel/plugin-transform-classes@^7.4.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.10.4.tgz#405136af2b3e218bc4a1926228bc917ab1a0adc7"
+  integrity sha512-2oZ9qLjt161dn1ZE0Ms66xBncQH4In8Sqw1YWgBUZuGVJJS5c0OFZXL6dP2MRHrkU/eKhWg8CzFJhRQl50rQxA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-define-map" "^7.10.4"
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-optimise-call-expression" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-replace-supers" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.10.4"
     globals "^11.1.0"
 
-"@babel/plugin-transform-computed-properties@^7.2.0", "@babel/plugin-transform-computed-properties@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.7.4.tgz#e856c1628d3238ffe12d668eb42559f79a81910d"
+"@babel/plugin-transform-computed-properties@^7.10.4", "@babel/plugin-transform-computed-properties@^7.2.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.10.4.tgz#9ded83a816e82ded28d52d4b4ecbdd810cdfc0eb"
+  integrity sha512-JFwVDXcP/hM/TbyzGq3l/XWGut7p46Z3QvqFMXTfk6/09m7xZHJUN9xHfsv7vqqD4YnfI5ueYdSJtXqqBLyjBw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
 "@babel/plugin-transform-destructuring@7.4.3":
   version "7.4.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.4.3.tgz#1a95f5ca2bf2f91ef0648d5de38a8d472da4350f"
+  integrity sha512-rVTLLZpydDFDyN4qnXdzwoVpk1oaXHIvPEOkOLyr88o7oHxVc/LyrnDx+amuBWGOwUb7D1s/uLsKBNTx08htZg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-destructuring@^7.4.3", "@babel/plugin-transform-destructuring@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.7.4.tgz#2b713729e5054a1135097b6a67da1b6fe8789267"
+"@babel/plugin-transform-destructuring@^7.10.4", "@babel/plugin-transform-destructuring@^7.4.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.10.4.tgz#70ddd2b3d1bea83d01509e9bb25ddb3a74fc85e5"
+  integrity sha512-+WmfvyfsyF603iPa6825mq6Qrb7uLjTOsa3XOFzlYcYDHSS4QmpOWOL0NNBY5qMbvrcf3tq0Cw+v4lxswOBpgA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-dotall-regex@^7.4.3", "@babel/plugin-transform-dotall-regex@^7.7.7":
-  version "7.7.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.7.7.tgz#3e9713f1b69f339e87fa796b097d73ded16b937b"
+"@babel/plugin-transform-dotall-regex@^7.10.4", "@babel/plugin-transform-dotall-regex@^7.4.3", "@babel/plugin-transform-dotall-regex@^7.4.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.10.4.tgz#469c2062105c1eb6a040eaf4fac4b488078395ee"
+  integrity sha512-ZEAVvUTCMlMFAbASYSVQoxIbHm2OkG2MseW6bV2JjIygOjdVv8tuxrCTzj1+Rynh7ODb8GivUy7dzEXzEhuPaA==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-duplicate-keys@^7.2.0", "@babel/plugin-transform-duplicate-keys@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.7.4.tgz#3d21731a42e3f598a73835299dd0169c3b90ac91"
+"@babel/plugin-transform-duplicate-keys@^7.10.4", "@babel/plugin-transform-duplicate-keys@^7.2.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.10.4.tgz#697e50c9fee14380fe843d1f306b295617431e47"
+  integrity sha512-GL0/fJnmgMclHiBTTWXNlYjYsA7rDrtsazHG6mglaGSTh0KsrW04qml+Bbz9FL0LcJIRwBWL5ZqlNHKTkU3xAA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-exponentiation-operator@^7.2.0", "@babel/plugin-transform-exponentiation-operator@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.7.4.tgz#dd30c0191e3a1ba19bcc7e389bdfddc0729d5db9"
+"@babel/plugin-transform-exponentiation-operator@^7.10.4", "@babel/plugin-transform-exponentiation-operator@^7.2.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.10.4.tgz#5ae338c57f8cf4001bdb35607ae66b92d665af2e"
+  integrity sha512-S5HgLVgkBcRdyQAHbKj+7KyuWx8C6t5oETmUuwz1pt3WTWJhsUV0WIIXuVvfXMxl/QQyHKlSCNNtaIamG8fysw==
   dependencies:
-    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
 "@babel/plugin-transform-flow-strip-types@7.4.0":
   version "7.4.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.4.0.tgz#f3c59eecff68c99b9c96eaafe4fe9d1fa8947138"
+  integrity sha512-C4ZVNejHnfB22vI2TYN4RUp2oCmq6cSEAg4RygSvYZUECRqUu9O4PMEMNJ4wsemaRGg27BbgYctG4BZh+AgIHw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-flow" "^7.2.0"
 
-"@babel/plugin-transform-for-of@^7.4.3", "@babel/plugin-transform-for-of@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.7.4.tgz#248800e3a5e507b1f103d8b4ca998e77c63932bc"
+"@babel/plugin-transform-for-of@^7.10.4", "@babel/plugin-transform-for-of@^7.4.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.10.4.tgz#c08892e8819d3a5db29031b115af511dbbfebae9"
+  integrity sha512-ItdQfAzu9AlEqmusA/65TqJ79eRcgGmpPPFvBnGILXZH975G0LNjP1yjHvGgfuCxqrPPueXOPe+FsvxmxKiHHQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-function-name@^7.4.3", "@babel/plugin-transform-function-name@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.7.4.tgz#75a6d3303d50db638ff8b5385d12451c865025b1"
+"@babel/plugin-transform-function-name@^7.10.4", "@babel/plugin-transform-function-name@^7.4.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.10.4.tgz#6a467880e0fc9638514ba369111811ddbe2644b7"
+  integrity sha512-OcDCq2y5+E0dVD5MagT5X+yTRbcvFjDI2ZVAottGH6tzqjx/LKpgkUepu3hp/u4tZBzxxpNGwLsAvGBvQ2mJzg==
   dependencies:
-    "@babel/helper-function-name" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-literals@^7.2.0", "@babel/plugin-transform-literals@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.7.4.tgz#27fe87d2b5017a2a5a34d1c41a6b9f6a6262643e"
+"@babel/plugin-transform-literals@^7.10.4", "@babel/plugin-transform-literals@^7.2.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.10.4.tgz#9f42ba0841100a135f22712d0e391c462f571f3c"
+  integrity sha512-Xd/dFSTEVuUWnyZiMu76/InZxLTYilOSr1UlHV+p115Z/Le2Fi1KXkJUYz0b42DfndostYlPub3m8ZTQlMaiqQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-member-expression-literals@^7.2.0", "@babel/plugin-transform-member-expression-literals@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.7.4.tgz#aee127f2f3339fc34ce5e3055d7ffbf7aa26f19a"
+"@babel/plugin-transform-member-expression-literals@^7.10.4", "@babel/plugin-transform-member-expression-literals@^7.2.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.10.4.tgz#b1ec44fcf195afcb8db2c62cd8e551c881baf8b7"
+  integrity sha512-0bFOvPyAoTBhtcJLr9VcwZqKmSjFml1iVxvPL0ReomGU53CX53HsM4h2SzckNdkQcHox1bpAqzxBI1Y09LlBSw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-modules-amd@^7.2.0", "@babel/plugin-transform-modules-amd@^7.7.5":
-  version "7.7.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.7.5.tgz#39e0fb717224b59475b306402bb8eedab01e729c"
+"@babel/plugin-transform-modules-amd@^7.10.4", "@babel/plugin-transform-modules-amd@^7.2.0":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.10.5.tgz#1b9cddaf05d9e88b3aad339cb3e445c4f020a9b1"
+  integrity sha512-elm5uruNio7CTLFItVC/rIzKLfQ17+fX7EVz5W0TMgIHFo1zY0Ozzx+lgwhL4plzl8OzVn6Qasx5DeEFyoNiRw==
   dependencies:
-    "@babel/helper-module-transforms" "^7.7.5"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    babel-plugin-dynamic-import-node "^2.3.0"
+    "@babel/helper-module-transforms" "^7.10.5"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-commonjs@^7.4.3", "@babel/plugin-transform-modules-commonjs@^7.7.5":
-  version "7.7.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.7.5.tgz#1d27f5eb0bcf7543e774950e5b2fa782e637b345"
+"@babel/plugin-transform-modules-commonjs@^7.10.4", "@babel/plugin-transform-modules-commonjs@^7.4.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.10.4.tgz#66667c3eeda1ebf7896d41f1f16b17105a2fbca0"
+  integrity sha512-Xj7Uq5o80HDLlW64rVfDBhao6OX89HKUmb+9vWYaLXBZOma4gA6tw4Ni1O5qVDoZWUV0fxMYA0aYzOawz0l+1w==
   dependencies:
-    "@babel/helper-module-transforms" "^7.7.5"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-simple-access" "^7.7.4"
-    babel-plugin-dynamic-import-node "^2.3.0"
+    "@babel/helper-module-transforms" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-simple-access" "^7.10.4"
+    babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-systemjs@^7.4.0", "@babel/plugin-transform-modules-systemjs@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.7.4.tgz#cd98152339d3e763dfe838b7d4273edaf520bb30"
+"@babel/plugin-transform-modules-systemjs@^7.10.4", "@babel/plugin-transform-modules-systemjs@^7.4.0":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.10.5.tgz#6270099c854066681bae9e05f87e1b9cadbe8c85"
+  integrity sha512-f4RLO/OL14/FP1AEbcsWMzpbUz6tssRaeQg11RH1BP/XnPpRoVwgeYViMFacnkaw4k4wjRSjn3ip1Uw9TaXuMw==
   dependencies:
-    "@babel/helper-hoist-variables" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    babel-plugin-dynamic-import-node "^2.3.0"
+    "@babel/helper-hoist-variables" "^7.10.4"
+    "@babel/helper-module-transforms" "^7.10.5"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-umd@^7.2.0", "@babel/plugin-transform-modules-umd@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.7.4.tgz#1027c355a118de0aae9fee00ad7813c584d9061f"
+"@babel/plugin-transform-modules-umd@^7.10.4", "@babel/plugin-transform-modules-umd@^7.2.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.10.4.tgz#9a8481fe81b824654b3a0b65da3df89f3d21839e"
+  integrity sha512-mohW5q3uAEt8T45YT7Qc5ws6mWgJAaL/8BfWD9Dodo1A3RKWli8wTS+WiQ/knF+tXlPirW/1/MqzzGfCExKECA==
   dependencies:
-    "@babel/helper-module-transforms" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-module-transforms" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-named-capturing-groups-regex@^7.4.2", "@babel/plugin-transform-named-capturing-groups-regex@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.7.4.tgz#fb3bcc4ee4198e7385805007373d6b6f42c98220"
+"@babel/plugin-transform-named-capturing-groups-regex@^7.10.4", "@babel/plugin-transform-named-capturing-groups-regex@^7.4.2":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.10.4.tgz#78b4d978810b6f3bcf03f9e318f2fc0ed41aecb6"
+  integrity sha512-V6LuOnD31kTkxQPhKiVYzYC/Jgdq53irJC/xBSmqcNcqFGV+PER4l6rU5SH2Vl7bH9mLDHcc0+l9HUOe4RNGKA==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.7.4"
+    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
 
-"@babel/plugin-transform-new-target@^7.4.0", "@babel/plugin-transform-new-target@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.7.4.tgz#4a0753d2d60639437be07b592a9e58ee00720167"
+"@babel/plugin-transform-new-target@^7.10.4", "@babel/plugin-transform-new-target@^7.4.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.10.4.tgz#9097d753cb7b024cb7381a3b2e52e9513a9c6888"
+  integrity sha512-YXwWUDAH/J6dlfwqlWsztI2Puz1NtUAubXhOPLQ5gjR/qmQ5U96DY4FQO8At33JN4XPBhrjB8I4eMmLROjjLjw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-object-super@^7.2.0", "@babel/plugin-transform-object-super@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.7.4.tgz#48488937a2d586c0148451bf51af9d7dda567262"
+"@babel/plugin-transform-object-super@^7.10.4", "@babel/plugin-transform-object-super@^7.2.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.10.4.tgz#d7146c4d139433e7a6526f888c667e314a093894"
+  integrity sha512-5iTw0JkdRdJvr7sY0vHqTpnruUpTea32JHmq/atIWqsnNussbRzjEDyWep8UNztt1B5IusBYg8Irb0bLbiEBCQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-replace-supers" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-replace-supers" "^7.10.4"
 
-"@babel/plugin-transform-parameters@^7.4.3", "@babel/plugin-transform-parameters@^7.7.7":
-  version "7.7.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.7.7.tgz#7a884b2460164dc5f194f668332736584c760007"
+"@babel/plugin-transform-parameters@^7.10.4", "@babel/plugin-transform-parameters@^7.4.3":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.10.5.tgz#59d339d58d0b1950435f4043e74e2510005e2c4a"
+  integrity sha512-xPHwUj5RdFV8l1wuYiu5S9fqWGM2DrYc24TMvUiRrPVm+SM3XeqU9BcokQX/kEUe+p2RBwy+yoiR1w/Blq6ubw==
   dependencies:
-    "@babel/helper-call-delegate" "^7.7.4"
-    "@babel/helper-get-function-arity" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-get-function-arity" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-property-literals@^7.2.0", "@babel/plugin-transform-property-literals@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.7.4.tgz#2388d6505ef89b266103f450f9167e6bd73f98c2"
+"@babel/plugin-transform-property-literals@^7.10.4", "@babel/plugin-transform-property-literals@^7.2.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.10.4.tgz#f6fe54b6590352298785b83edd815d214c42e3c0"
+  integrity sha512-ofsAcKiUxQ8TY4sScgsGeR2vJIsfrzqvFb9GvJ5UdXDzl+MyYCaBj/FGzXuv7qE0aJcjWMILny1epqelnFlz8g==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
 "@babel/plugin-transform-react-constant-elements@7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.2.0.tgz#ed602dc2d8bff2f0cb1a5ce29263dbdec40779f7"
+  integrity sha512-YYQFg6giRFMsZPKUM9v+VcHOdfSQdz9jHCx3akAi3UYgyjndmdYGSXylQ/V+HswQt4fL8IklchD9HTsaOCrWQQ==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.0.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-transform-react-constant-elements@^7.0.0":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.7.4.tgz#499cf732a21ffd62cc4b0016e27c3906097f8982"
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.10.4.tgz#0f485260bf1c29012bb973e7e404749eaac12c9e"
+  integrity sha512-cYmQBW1pXrqBte1raMkAulXmi7rjg3VI6ZLg9QIic8Hq7BtYXaWuZSxsr2siOMI6SWwpxjWfnwhTUrd7JlAV7g==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
 "@babel/plugin-transform-react-display-name@7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.2.0.tgz#ebfaed87834ce8dc4279609a4f0c324c156e3eb0"
+  integrity sha512-Htf/tPa5haZvRMiNSQSFifK12gtr/8vwfr+A9y69uF0QcU77AVu4K7MiHEkTxF7lQoHOL0F9ErqgfNEAKgXj7A==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-react-display-name@^7.0.0", "@babel/plugin-transform-react-display-name@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.7.4.tgz#9f2b80b14ebc97eef4a9b29b612c58ed9c0d10dd"
+"@babel/plugin-transform-react-display-name@^7.0.0", "@babel/plugin-transform-react-display-name@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.10.4.tgz#b5795f4e3e3140419c3611b7a2a3832b9aef328d"
+  integrity sha512-Zd4X54Mu9SBfPGnEcaGcOrVAYOtjT2on8QZkLKEq1S/tHexG39d9XXGZv19VfRrDjPJzFmPfTAqOQS1pfFOujw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-react-jsx-self@^7.0.0", "@babel/plugin-transform-react-jsx-self@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.7.4.tgz#81b8fbfd14b2215e8f1c2c3adfba266127b0231c"
+"@babel/plugin-transform-react-jsx-development@^7.10.4":
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.11.5.tgz#e1439e6a57ee3d43e9f54ace363fb29cefe5d7b6"
+  integrity sha512-cImAmIlKJ84sDmpQzm4/0q/2xrXlDezQoixy3qoz1NJeZL/8PRon6xZtluvr4H4FzwlDGI5tCcFupMnXGtr+qw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-jsx" "^7.7.4"
+    "@babel/helper-builder-react-jsx-experimental" "^7.11.5"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
 
-"@babel/plugin-transform-react-jsx-source@^7.0.0", "@babel/plugin-transform-react-jsx-source@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.7.4.tgz#8994b1bf6014b133f5a46d3b7d1ee5f5e3e72c10"
+"@babel/plugin-transform-react-jsx-self@^7.0.0", "@babel/plugin-transform-react-jsx-self@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.10.4.tgz#cd301a5fed8988c182ed0b9d55e9bd6db0bd9369"
+  integrity sha512-yOvxY2pDiVJi0axdTWHSMi5T0DILN+H+SaeJeACHKjQLezEzhLx9nEF9xgpBLPtkZsks9cnb5P9iBEi21En3gg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-jsx" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
 
-"@babel/plugin-transform-react-jsx@^7.0.0", "@babel/plugin-transform-react-jsx@^7.7.4":
-  version "7.7.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.7.7.tgz#5cbaa7445b4a09f774029f3cc7bb448ff3122a5d"
+"@babel/plugin-transform-react-jsx-source@^7.0.0", "@babel/plugin-transform-react-jsx-source@^7.10.4":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.10.5.tgz#34f1779117520a779c054f2cdd9680435b9222b4"
+  integrity sha512-wTeqHVkN1lfPLubRiZH3o73f4rfon42HpgxUSs86Nc+8QIcm/B9s8NNVXu/gwGcOyd7yDib9ikxoDLxJP0UiDA==
   dependencies:
-    "@babel/helper-builder-react-jsx" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-jsx" "^7.7.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
 
-"@babel/plugin-transform-regenerator@^7.4.3", "@babel/plugin-transform-regenerator@^7.7.5":
-  version "7.7.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.7.5.tgz#3a8757ee1a2780f390e89f246065ecf59c26fce9"
+"@babel/plugin-transform-react-jsx@^7.0.0", "@babel/plugin-transform-react-jsx@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.10.4.tgz#673c9f913948764a4421683b2bef2936968fddf2"
+  integrity sha512-L+MfRhWjX0eI7Js093MM6MacKU4M6dnCRa/QPDwYMxjljzSCzzlzKzj9Pk4P3OtrPcxr2N3znR419nr3Xw+65A==
   dependencies:
-    regenerator-transform "^0.14.0"
+    "@babel/helper-builder-react-jsx" "^7.10.4"
+    "@babel/helper-builder-react-jsx-experimental" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.10.4"
 
-"@babel/plugin-transform-reserved-words@^7.2.0", "@babel/plugin-transform-reserved-words@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.7.4.tgz#6a7cf123ad175bb5c69aec8f6f0770387ed3f1eb"
+"@babel/plugin-transform-react-pure-annotations@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.10.4.tgz#3eefbb73db94afbc075f097523e445354a1c6501"
+  integrity sha512-+njZkqcOuS8RaPakrnR9KvxjoG1ASJWpoIv/doyWngId88JoFlPlISenGXjrVacZUIALGUr6eodRs1vmPnF23A==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-regenerator@^7.10.4", "@babel/plugin-transform-regenerator@^7.4.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.10.4.tgz#2015e59d839074e76838de2159db421966fd8b63"
+  integrity sha512-3thAHwtor39A7C04XucbMg17RcZ3Qppfxr22wYzZNcVIkPHfpM9J0SO8zuCV6SZa265kxBJSrfKTvDCYqBFXGw==
+  dependencies:
+    regenerator-transform "^0.14.2"
+
+"@babel/plugin-transform-reserved-words@^7.10.4", "@babel/plugin-transform-reserved-words@^7.2.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.10.4.tgz#8f2682bcdcef9ed327e1b0861585d7013f8a54dd"
+  integrity sha512-hGsw1O6Rew1fkFbDImZIEqA8GoidwTAilwCyWqLBM9f+e/u/sQMQu7uX6dyokfOayRuuVfKOW4O7HvaBWM+JlQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
 
 "@babel/plugin-transform-runtime@7.4.3":
   version "7.4.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.4.3.tgz#4d6691690ecdc9f5cb8c3ab170a1576c1f556371"
+  integrity sha512-7Q61bU+uEI7bCUFReT1NKn7/X6sDQsZ7wL1sJ9IYMAO7cI+eg6x9re1cEw2fCRMbbTVyoeUKWSV1M6azEfKCfg==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/helper-plugin-utils" "^7.0.0"
     resolve "^1.8.1"
     semver "^5.5.1"
 
-"@babel/plugin-transform-shorthand-properties@^7.2.0", "@babel/plugin-transform-shorthand-properties@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.7.4.tgz#74a0a9b2f6d67a684c6fbfd5f0458eb7ba99891e"
+"@babel/plugin-transform-shorthand-properties@^7.10.4", "@babel/plugin-transform-shorthand-properties@^7.2.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.10.4.tgz#9fd25ec5cdd555bb7f473e5e6ee1c971eede4dd6"
+  integrity sha512-AC2K/t7o07KeTIxMoHneyX90v3zkm5cjHJEokrPEAGEy3UCp8sLKfnfOIGdZ194fyN4wfX/zZUWT9trJZ0qc+Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-spread@^7.2.0", "@babel/plugin-transform-spread@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.7.4.tgz#aa673b356fe6b7e70d69b6e33a17fef641008578"
+"@babel/plugin-transform-spread@^7.11.0", "@babel/plugin-transform-spread@^7.2.0":
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.11.0.tgz#fa84d300f5e4f57752fe41a6d1b3c554f13f17cc"
+  integrity sha512-UwQYGOqIdQJe4aWNyS7noqAnN2VbaczPLiEtln+zPowRNlD+79w3oi2TWfYe0eZgd+gjZCbsydN7lzWysDt+gw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.11.0"
 
-"@babel/plugin-transform-sticky-regex@^7.2.0", "@babel/plugin-transform-sticky-regex@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.7.4.tgz#ffb68c05090c30732076b1285dc1401b404a123c"
+"@babel/plugin-transform-sticky-regex@^7.10.4", "@babel/plugin-transform-sticky-regex@^7.2.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.10.4.tgz#8f3889ee8657581130a29d9cc91d7c73b7c4a28d"
+  integrity sha512-Ddy3QZfIbEV0VYcVtFDCjeE4xwVTJWTmUtorAJkn6u/92Z/nWJNV+mILyqHKrUxXYKA2EoCilgoPePymKL4DvQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-regex" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-regex" "^7.10.4"
 
-"@babel/plugin-transform-template-literals@^7.2.0", "@babel/plugin-transform-template-literals@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.7.4.tgz#1eb6411736dd3fe87dbd20cc6668e5121c17d604"
+"@babel/plugin-transform-template-literals@^7.10.4", "@babel/plugin-transform-template-literals@^7.2.0":
+  version "7.10.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.10.5.tgz#78bc5d626a6642db3312d9d0f001f5e7639fde8c"
+  integrity sha512-V/lnPGIb+KT12OQikDvgSuesRX14ck5FfJXt6+tXhdkJ+Vsd0lDCVtF6jcB4rNClYFzaB2jusZ+lNISDk2mMMw==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-typeof-symbol@^7.2.0", "@babel/plugin-transform-typeof-symbol@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.7.4.tgz#3174626214f2d6de322882e498a38e8371b2140e"
+"@babel/plugin-transform-typeof-symbol@^7.10.4", "@babel/plugin-transform-typeof-symbol@^7.2.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.10.4.tgz#9509f1a7eec31c4edbffe137c16cc33ff0bc5bfc"
+  integrity sha512-QqNgYwuuW0y0H+kUE/GWSR45t/ccRhe14Fs/4ZRouNNQsyd4o3PG4OtHiIrepbM2WKUBDAXKCAK/Lk4VhzTaGA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
 "@babel/plugin-transform-typescript@^7.3.2":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.7.4.tgz#2974fd05f4e85c695acaf497f432342de9fc0636"
+  version "7.11.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.11.0.tgz#2b4879676af37342ebb278216dd090ac67f13abb"
+  integrity sha512-edJsNzTtvb3MaXQwj8403B7mZoGu9ElDJQZOKjGUnvilquxBA3IQoEIOvkX/1O8xfAsnHS/oQhe2w/IXrr+w0w==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-typescript" "^7.7.4"
+    "@babel/helper-create-class-features-plugin" "^7.10.5"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-typescript" "^7.10.4"
 
-"@babel/plugin-transform-unicode-regex@^7.4.3", "@babel/plugin-transform-unicode-regex@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.7.4.tgz#a3c0f65b117c4c81c5b6484f2a5e7b95346b83ae"
+"@babel/plugin-transform-unicode-escapes@^7.10.4":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.10.4.tgz#feae523391c7651ddac115dae0a9d06857892007"
+  integrity sha512-y5XJ9waMti2J+e7ij20e+aH+fho7Wb7W8rNuu72aKRwCHFqQdhkdU2lo3uZ9tQuboEJcUFayXdARhcxLQ3+6Fg==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-unicode-regex@^7.10.4", "@babel/plugin-transform-unicode-regex@^7.4.3":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.10.4.tgz#e56d71f9282fac6db09c82742055576d5e6d80a8"
+  integrity sha512-wNfsc4s8N2qnIwpO/WP2ZiSyjfpTamT2C9V9FDH/Ljub9zw6P3SjkXcFmc0RQUt96k2fmIvtla2MMjgTwIAC+A==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
 "@babel/preset-env@7.4.3":
   version "7.4.3"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.4.3.tgz#e71e16e123dc0fbf65a52cbcbcefd072fbd02880"
+  integrity sha512-FYbZdV12yHdJU5Z70cEg0f6lvtpZ8jFSDakTm7WXeJbLXh4R0ztGEu/SW7G1nJ2ZvKwDhz8YrbA84eYyprmGqw==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/helper-plugin-utils" "^7.0.0"
@@ -725,64 +982,94 @@
     semver "^5.5.0"
 
 "@babel/preset-env@^7.1.6":
-  version "7.7.7"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.7.7.tgz#c294167b91e53e7e36d820e943ece8d0c7fe46ac"
-  dependencies:
-    "@babel/helper-module-imports" "^7.7.4"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-proposal-async-generator-functions" "^7.7.4"
-    "@babel/plugin-proposal-dynamic-import" "^7.7.4"
-    "@babel/plugin-proposal-json-strings" "^7.7.4"
-    "@babel/plugin-proposal-object-rest-spread" "^7.7.7"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.7.4"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.7.7"
-    "@babel/plugin-syntax-async-generators" "^7.7.4"
-    "@babel/plugin-syntax-dynamic-import" "^7.7.4"
-    "@babel/plugin-syntax-json-strings" "^7.7.4"
-    "@babel/plugin-syntax-object-rest-spread" "^7.7.4"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.7.4"
-    "@babel/plugin-syntax-top-level-await" "^7.7.4"
-    "@babel/plugin-transform-arrow-functions" "^7.7.4"
-    "@babel/plugin-transform-async-to-generator" "^7.7.4"
-    "@babel/plugin-transform-block-scoped-functions" "^7.7.4"
-    "@babel/plugin-transform-block-scoping" "^7.7.4"
-    "@babel/plugin-transform-classes" "^7.7.4"
-    "@babel/plugin-transform-computed-properties" "^7.7.4"
-    "@babel/plugin-transform-destructuring" "^7.7.4"
-    "@babel/plugin-transform-dotall-regex" "^7.7.7"
-    "@babel/plugin-transform-duplicate-keys" "^7.7.4"
-    "@babel/plugin-transform-exponentiation-operator" "^7.7.4"
-    "@babel/plugin-transform-for-of" "^7.7.4"
-    "@babel/plugin-transform-function-name" "^7.7.4"
-    "@babel/plugin-transform-literals" "^7.7.4"
-    "@babel/plugin-transform-member-expression-literals" "^7.7.4"
-    "@babel/plugin-transform-modules-amd" "^7.7.5"
-    "@babel/plugin-transform-modules-commonjs" "^7.7.5"
-    "@babel/plugin-transform-modules-systemjs" "^7.7.4"
-    "@babel/plugin-transform-modules-umd" "^7.7.4"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.7.4"
-    "@babel/plugin-transform-new-target" "^7.7.4"
-    "@babel/plugin-transform-object-super" "^7.7.4"
-    "@babel/plugin-transform-parameters" "^7.7.7"
-    "@babel/plugin-transform-property-literals" "^7.7.4"
-    "@babel/plugin-transform-regenerator" "^7.7.5"
-    "@babel/plugin-transform-reserved-words" "^7.7.4"
-    "@babel/plugin-transform-shorthand-properties" "^7.7.4"
-    "@babel/plugin-transform-spread" "^7.7.4"
-    "@babel/plugin-transform-sticky-regex" "^7.7.4"
-    "@babel/plugin-transform-template-literals" "^7.7.4"
-    "@babel/plugin-transform-typeof-symbol" "^7.7.4"
-    "@babel/plugin-transform-unicode-regex" "^7.7.4"
-    "@babel/types" "^7.7.4"
-    browserslist "^4.6.0"
-    core-js-compat "^3.6.0"
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.11.5.tgz#18cb4b9379e3e92ffea92c07471a99a2914e4272"
+  integrity sha512-kXqmW1jVcnB2cdueV+fyBM8estd5mlNfaQi6lwLgRwCby4edpavgbFhiBNjmWA3JpB/yZGSISa7Srf+TwxDQoA==
+  dependencies:
+    "@babel/compat-data" "^7.11.0"
+    "@babel/helper-compilation-targets" "^7.10.4"
+    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-proposal-async-generator-functions" "^7.10.4"
+    "@babel/plugin-proposal-class-properties" "^7.10.4"
+    "@babel/plugin-proposal-dynamic-import" "^7.10.4"
+    "@babel/plugin-proposal-export-namespace-from" "^7.10.4"
+    "@babel/plugin-proposal-json-strings" "^7.10.4"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.11.0"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.10.4"
+    "@babel/plugin-proposal-numeric-separator" "^7.10.4"
+    "@babel/plugin-proposal-object-rest-spread" "^7.11.0"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.10.4"
+    "@babel/plugin-proposal-optional-chaining" "^7.11.0"
+    "@babel/plugin-proposal-private-methods" "^7.10.4"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.10.4"
+    "@babel/plugin-syntax-async-generators" "^7.8.0"
+    "@babel/plugin-syntax-class-properties" "^7.10.4"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+    "@babel/plugin-syntax-json-strings" "^7.8.0"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+    "@babel/plugin-syntax-top-level-await" "^7.10.4"
+    "@babel/plugin-transform-arrow-functions" "^7.10.4"
+    "@babel/plugin-transform-async-to-generator" "^7.10.4"
+    "@babel/plugin-transform-block-scoped-functions" "^7.10.4"
+    "@babel/plugin-transform-block-scoping" "^7.10.4"
+    "@babel/plugin-transform-classes" "^7.10.4"
+    "@babel/plugin-transform-computed-properties" "^7.10.4"
+    "@babel/plugin-transform-destructuring" "^7.10.4"
+    "@babel/plugin-transform-dotall-regex" "^7.10.4"
+    "@babel/plugin-transform-duplicate-keys" "^7.10.4"
+    "@babel/plugin-transform-exponentiation-operator" "^7.10.4"
+    "@babel/plugin-transform-for-of" "^7.10.4"
+    "@babel/plugin-transform-function-name" "^7.10.4"
+    "@babel/plugin-transform-literals" "^7.10.4"
+    "@babel/plugin-transform-member-expression-literals" "^7.10.4"
+    "@babel/plugin-transform-modules-amd" "^7.10.4"
+    "@babel/plugin-transform-modules-commonjs" "^7.10.4"
+    "@babel/plugin-transform-modules-systemjs" "^7.10.4"
+    "@babel/plugin-transform-modules-umd" "^7.10.4"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.10.4"
+    "@babel/plugin-transform-new-target" "^7.10.4"
+    "@babel/plugin-transform-object-super" "^7.10.4"
+    "@babel/plugin-transform-parameters" "^7.10.4"
+    "@babel/plugin-transform-property-literals" "^7.10.4"
+    "@babel/plugin-transform-regenerator" "^7.10.4"
+    "@babel/plugin-transform-reserved-words" "^7.10.4"
+    "@babel/plugin-transform-shorthand-properties" "^7.10.4"
+    "@babel/plugin-transform-spread" "^7.11.0"
+    "@babel/plugin-transform-sticky-regex" "^7.10.4"
+    "@babel/plugin-transform-template-literals" "^7.10.4"
+    "@babel/plugin-transform-typeof-symbol" "^7.10.4"
+    "@babel/plugin-transform-unicode-escapes" "^7.10.4"
+    "@babel/plugin-transform-unicode-regex" "^7.10.4"
+    "@babel/preset-modules" "^0.1.3"
+    "@babel/types" "^7.11.5"
+    browserslist "^4.12.0"
+    core-js-compat "^3.6.2"
     invariant "^2.2.2"
-    js-levenshtein "^1.1.3"
+    levenary "^1.1.1"
     semver "^5.5.0"
 
+"@babel/preset-modules@^0.1.3":
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.4.tgz#362f2b68c662842970fdb5e254ffc8fc1c2e415e"
+  integrity sha512-J36NhwnfdzpmH41M1DrnkkgAqhZaqr/NBdPfQ677mLzlaXo+oDiv1deyCDtgAhz8p328otdob0Du7+xgHGZbKg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
+    "@babel/plugin-transform-dotall-regex" "^7.4.4"
+    "@babel/types" "^7.4.4"
+    esutils "^2.0.2"
+
 "@babel/preset-react@7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.0.0.tgz#e86b4b3d99433c7b3e9e91747e2653958bc6b3c0"
+  integrity sha512-oayxyPS4Zj+hF6Et11BwuBkmpgT/zMxyuZgFrMeZID6Hdh3dGlk4sHCAhdBCpuCKW2ppBfl2uCCetlrUIJRY3w==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-transform-react-display-name" "^7.0.0"
@@ -791,74 +1078,77 @@
     "@babel/plugin-transform-react-jsx-source" "^7.0.0"
 
 "@babel/preset-react@^7.0.0":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.7.4.tgz#3fe2ea698d8fb536d8e7881a592c3c1ee8bf5707"
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-transform-react-display-name" "^7.7.4"
-    "@babel/plugin-transform-react-jsx" "^7.7.4"
-    "@babel/plugin-transform-react-jsx-self" "^7.7.4"
-    "@babel/plugin-transform-react-jsx-source" "^7.7.4"
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.10.4.tgz#92e8a66d816f9911d11d4cc935be67adfc82dbcf"
+  integrity sha512-BrHp4TgOIy4M19JAfO1LhycVXOPWdDbTRep7eVyatf174Hff+6Uk53sDyajqZPu8W1qXRBiYOfIamek6jA7YVw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-transform-react-display-name" "^7.10.4"
+    "@babel/plugin-transform-react-jsx" "^7.10.4"
+    "@babel/plugin-transform-react-jsx-development" "^7.10.4"
+    "@babel/plugin-transform-react-jsx-self" "^7.10.4"
+    "@babel/plugin-transform-react-jsx-source" "^7.10.4"
+    "@babel/plugin-transform-react-pure-annotations" "^7.10.4"
 
 "@babel/preset-typescript@7.3.3":
   version "7.3.3"
   resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.3.3.tgz#88669911053fa16b2b276ea2ede2ca603b3f307a"
+  integrity sha512-mzMVuIP4lqtn4du2ynEfdO0+RYcslwrZiJHXu4MGaC1ctJiW2fyaeDrtjJGs7R/KebZ1sgowcIoWf4uRpEfKEg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-transform-typescript" "^7.3.2"
 
-"@babel/runtime-corejs3@^7.7.4":
-  version "7.7.7"
-  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.7.7.tgz#78fcbd472daec13abc42678bfc319e58a62235a3"
-  dependencies:
-    core-js-pure "^3.0.0"
-    regenerator-runtime "^0.13.2"
-
 "@babel/runtime@7.4.3":
   version "7.4.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.3.tgz#79888e452034223ad9609187a0ad1fe0d2ad4bdc"
+  integrity sha512-9lsJwJLxDh/T3Q3SZszfWOTkk3pHbkmH+3KY+zwIDmsNlxsumuhS2TH3NIpktU4kNvfzy+k3eLT7aTJSPTo0OA==
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.7.4":
-  version "7.7.7"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.7.tgz#194769ca8d6d7790ec23605af9ee3e42a0aa79cf"
-  dependencies:
-    regenerator-runtime "^0.13.2"
-
-"@babel/template@^7.4.0", "@babel/template@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.4.tgz#428a7d9eecffe27deac0a98e23bf8e3675d2a77b"
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@babel/parser" "^7.7.4"
-    "@babel/types" "^7.7.4"
-
-"@babel/traverse@^7.0.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.7.4.tgz#9c1e7c60fb679fe4fcfaa42500833333c2058558"
-  dependencies:
-    "@babel/code-frame" "^7.5.5"
-    "@babel/generator" "^7.7.4"
-    "@babel/helper-function-name" "^7.7.4"
-    "@babel/helper-split-export-declaration" "^7.7.4"
-    "@babel/parser" "^7.7.4"
-    "@babel/types" "^7.7.4"
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.8.4":
+  version "7.11.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
+  integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/template@^7.10.4", "@babel/template@^7.4.0":
+  version "7.10.4"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.10.4.tgz#3251996c4200ebc71d1a8fc405fba940f36ba278"
+  integrity sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/parser" "^7.10.4"
+    "@babel/types" "^7.10.4"
+
+"@babel/traverse@^7.0.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.11.5", "@babel/traverse@^7.4.3":
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.11.5.tgz#be777b93b518eb6d76ee2e1ea1d143daa11e61c3"
+  integrity sha512-EjiPXt+r7LiCZXEfRpSJd+jUMnBd4/9OUv7Nx3+0u9+eimMwJmG0Q98lw4/289JCoxSE8OolDMNZaaF/JZ69WQ==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.11.5"
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-split-export-declaration" "^7.11.0"
+    "@babel/parser" "^7.11.5"
+    "@babel/types" "^7.11.5"
     debug "^4.1.0"
     globals "^11.1.0"
-    lodash "^4.17.13"
+    lodash "^4.17.19"
 
-"@babel/types@^7.0.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.7.4.tgz#516570d539e44ddf308c07569c258ff94fde9193"
+"@babel/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.11.0", "@babel/types@^7.11.5", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4":
+  version "7.11.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.11.5.tgz#d9de577d01252d77c6800cee039ee64faf75662d"
+  integrity sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==
   dependencies:
-    esutils "^2.0.2"
-    lodash "^4.17.13"
+    "@babel/helper-validator-identifier" "^7.10.4"
+    lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
 "@cnakazawa/watch@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef"
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
+  integrity sha512-v9kIhKwjeZThiWrLmj0y17CWoyddASLj9O2yvbZkbvw/N3rWOYy9zkV66ursAoVr0mV15bL8g0c4QZUE6cdDoQ==
   dependencies:
     exec-sh "^0.3.2"
     minimist "^1.2.0"
@@ -866,26 +1156,87 @@
 "@csstools/convert-colors@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
+  integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
 
 "@csstools/normalize.css@^9.0.1":
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-9.0.1.tgz#c27b391d8457d1e893f1eddeaf5e5412d12ffbb5"
+  integrity sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA==
+
+"@fluentui/date-time-utilities@^7.8.0":
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/@fluentui/date-time-utilities/-/date-time-utilities-7.8.0.tgz#4fe384a19aba3508492e9d17680fba76a21a6144"
+  integrity sha512-qzlTp3t+PghebJsLK9JwZr91qBRZ/fOml8TQCIjdtsEn4mH6/ciCwir7Fj8iOEkwwTC0iKsEr1jfsITtJKWSmA==
+  dependencies:
+    "@uifabric/set-version" "^7.0.22"
+    tslib "^1.10.0"
+
+"@fluentui/keyboard-key@^0.2.11":
+  version "0.2.11"
+  resolved "https://registry.yarnpkg.com/@fluentui/keyboard-key/-/keyboard-key-0.2.11.tgz#97cbea8641c144ac5230fae0daf6e10c4f4228d4"
+  integrity sha512-4iG5vNlRD3PrLaMfDTimHNOP1x6V3Dad0fXOwtvBBMsfdySPE9zlY+G+0aqCFcgjymOriFOk0ANZVBpK7XrnTg==
+  dependencies:
+    tslib "^1.10.0"
+
+"@fluentui/react-focus@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-focus/-/react-focus-7.16.0.tgz#51e5d4b22fbe91d557115b4c9402a64214b784ec"
+  integrity sha512-TwB4Av7ID70ejisDIGkCZGKOxlquSazr6W+9Jv1JQAvsBLuj5XOspFJH4/Igjniw1LeO9QmAvFZeh/XRShiObw==
+  dependencies:
+    "@fluentui/keyboard-key" "^0.2.11"
+    "@uifabric/merge-styles" "^7.18.0"
+    "@uifabric/set-version" "^7.0.22"
+    "@uifabric/styling" "^7.16.0"
+    "@uifabric/utilities" "^7.31.0"
+    tslib "^1.10.0"
+
+"@fluentui/react-icons@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-icons/-/react-icons-0.3.0.tgz#4acc45e0ecef69860e15d161f26363a6e711282a"
+  integrity sha512-QDrIhLUpkxM5q5bFE4pkweJJsfaNswdfDoc+X6cmr22Dii+anDFTpOcePEJiTtILxdlEmH0968OcZ4BGZF/joQ==
+  dependencies:
+    "@microsoft/load-themed-styles" "^1.10.26"
+    "@uifabric/set-version" "^7.0.22"
+    "@uifabric/utilities" "^7.31.0"
+    tslib "^1.10.0"
+
+"@fluentui/react-window-provider@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-window-provider/-/react-window-provider-0.3.0.tgz#6dc90a9826306816ddb5b2961e48546c1cb3d93f"
+  integrity sha512-zHeH1PAmoFB3OkgU8f51E3oGHrL/CjuvdPBlb1SGpByUGNihAgH/CwvJohV9z0yPDkq+chfNUmxWA/oDVpbh6Q==
+  dependencies:
+    "@uifabric/set-version" "^7.0.22"
+    tslib "^1.10.0"
+
+"@fluentui/theme@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@fluentui/theme/-/theme-0.2.0.tgz#15e7536e4b8bbbe96132687ef76921687af4200c"
+  integrity sha512-L5OwqymTdxTVwBa3ifkQLF1A3YU6WMkMTk6PFIMfOonjt8LJ3yMMqZgz+KQR3sF/tzgy4wzW4oBmrxtTfJS2EQ==
+  dependencies:
+    "@uifabric/merge-styles" "^7.18.0"
+    "@uifabric/set-version" "^7.0.22"
+    "@uifabric/utilities" "^7.31.0"
+    tslib "^1.10.0"
 
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
+  integrity sha512-QD1PhQk+s31P1ixsX0H0Suoupp3VMXzIVMSwobR3F3MSUO2YCV0B7xqLcUw/Bh8yuvd3LhpyqLQWTNcRmp6IdQ==
 
 "@hapi/bourne@1.x.x":
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/@hapi/bourne/-/bourne-1.3.2.tgz#0a7095adea067243ce3283e1b56b8a8f453b242a"
+  integrity sha512-1dVNHT76Uu5N3eJNTYcvxee+jzX4Z9lfciqRRHCU27ihbUcYi+iSc2iml5Ke1LXe1SyJCLA0+14Jh4tXJgOppA==
 
 "@hapi/hoek@8.x.x", "@hapi/hoek@^8.3.0":
-  version "8.5.0"
-  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-8.5.0.tgz#2f9ce301c8898e1c3248b0a8564696b24d1a9a5a"
+  version "8.5.1"
+  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-8.5.1.tgz#fde96064ca446dec8c55a8c2f130957b070c6e06"
+  integrity sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow==
 
 "@hapi/joi@^15.0.0":
   version "15.1.1"
   resolved "https://registry.yarnpkg.com/@hapi/joi/-/joi-15.1.1.tgz#c675b8a71296f02833f8d6d243b34c57b8ce19d7"
+  integrity sha512-entf8ZMOK8sc+8YfeOlM8pCfg3b5+WZIKBfUaaJT8UsjAAPjartzxIYm3TIbjvA4u+u++KbcXD38k682nVHDAQ==
   dependencies:
     "@hapi/address" "2.x.x"
     "@hapi/bourne" "1.x.x"
@@ -895,6 +1246,7 @@
 "@hapi/topo@3.x.x":
   version "3.1.6"
   resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-3.1.6.tgz#68d935fa3eae7fdd5ab0d7f953f3205d8b2bfc29"
+  integrity sha512-tAag0jEcjwH+P2quUfipd7liWCNX2F8NvYjQp2wtInsZxnMlypdw0FtAOLxtvvkO+GSRRbmNi8m/5y42PQJYCQ==
   dependencies:
     "@hapi/hoek" "^8.3.0"
 
@@ -910,6 +1262,7 @@
 "@jest/console@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"
+  integrity sha512-Zuj6b8TnKXi3q4ymac8EQfc3ea/uhLeCGThFqXeC8H9/raaH8ARPUTdId+XyGd03Z4In0/VjD2OYFcBF09fNLQ==
   dependencies:
     "@jest/source-map" "^24.9.0"
     chalk "^2.0.1"
@@ -918,6 +1271,7 @@
 "@jest/fake-timers@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-24.9.0.tgz#ba3e6bf0eecd09a636049896434d306636540c93"
+  integrity sha512-eWQcNa2YSwzXWIMC5KufBh3oWRIijrQFROsIqt6v/NS9Io/gknw1jsAC9c+ih/RQX4A3O7SeWAhQeN0goKhT9A==
   dependencies:
     "@jest/types" "^24.9.0"
     jest-message-util "^24.9.0"
@@ -926,6 +1280,7 @@
 "@jest/source-map@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-24.9.0.tgz#0e263a94430be4b41da683ccc1e6bffe2a191714"
+  integrity sha512-/Xw7xGlsZb4MJzNDgB7PW5crou5JqWiBQaz6xyPd3ArOg2nfn/PunV8+olXbbEZzNl591o5rWKE9BRDaFAuIBg==
   dependencies:
     callsites "^3.0.0"
     graceful-fs "^4.1.15"
@@ -934,6 +1289,7 @@
 "@jest/test-result@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-24.9.0.tgz#11796e8aa9dbf88ea025757b3152595ad06ba0ca"
+  integrity sha512-XEFrHbBonBJ8dGp2JmF8kP/nQI/ImPpygKHwQ/SY+es59Z3L5PI4Qb9TQQMAEeYsThG1xF0k6tmG0tIKATNiiA==
   dependencies:
     "@jest/console" "^24.9.0"
     "@jest/types" "^24.9.0"
@@ -942,6 +1298,7 @@
 "@jest/transform@^24.7.1":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-24.9.0.tgz#4ae2768b296553fadab09e9ec119543c90b16c56"
+  integrity sha512-TcQUmyNRxV94S0QpMOnZl0++6RMiqpbH/ZMccFB/amku6Uwvyb1cjYX7xkp5nGNkbX4QPH/FcB6q1HBTHynLmQ==
   dependencies:
     "@babel/core" "^7.1.0"
     "@jest/types" "^24.9.0"
@@ -963,61 +1320,121 @@
 "@jest/types@^24.7.0", "@jest/types@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.9.0.tgz#63cb26cb7500d069e5a389441a7c6ab5e909fc59"
+  integrity sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==
   dependencies:
     "@types/istanbul-lib-coverage" "^2.0.0"
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^13.0.0"
 
-"@microsoft/load-themed-styles@^1.7.13":
-  version "1.10.27"
-  resolved "https://registry.yarnpkg.com/@microsoft/load-themed-styles/-/load-themed-styles-1.10.27.tgz#34a6d8cfa7ad83a87dc02e14d03dec0472249c00"
+"@jest/types@^26.3.0":
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.3.0.tgz#97627bf4bdb72c55346eef98e3b3f7ddc4941f71"
+  integrity sha512-BDPG23U0qDeAvU4f99haztXwdAg3hz4El95LkAM+tHAqqhiVzRpEGHHU8EDxT/AnxOrA65YjLBwDahdJ9pTLJQ==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^15.0.0"
+    chalk "^4.0.0"
+
+"@microsoft/load-themed-styles@^1.10.26", "@microsoft/load-themed-styles@^1.7.13":
+  version "1.10.88"
+  resolved "https://registry.yarnpkg.com/@microsoft/load-themed-styles/-/load-themed-styles-1.10.88.tgz#f7eda0cea3349c75290b622bf1db4af8d09a9ca1"
+  integrity sha512-lyM9z/fq3yrRGGSB5AmsAL8BQOR5ljFS7zpS+/wFgzuCz3nRZjQCRTTjflM7yxSQLSgTG0YMdqgsGLXfVUleZQ==
 
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
+  integrity sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==
   dependencies:
     call-me-maybe "^1.0.1"
     glob-to-regexp "^0.3.0"
 
+"@nodelib/fs.scandir@2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz#3a582bdb53804c6ba6d146579c46e52130cf4a3b"
+  integrity sha512-eGmwYQn3gxo4r7jdQnkrrN6bY478C3P+a/y72IJukF8LjB6ZHeB3c+Ehacj3sYeSmUXGlnA67/PmbM9CVwL7Dw==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.3"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@2.0.3", "@nodelib/fs.stat@^2.0.2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.3.tgz#34dc5f4cabbc720f4e60f75a747e7ecd6c175bd3"
+  integrity sha512-bQBFruR2TAwoevBEd/NWMoAAtNGzTRgdrqnYCc7dhzfoNvqPzLyqlEQnzZ3kVnNrSp25iyxE00/3h2fqGAGArA==
+
 "@nodelib/fs.stat@^1.1.2":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
+  integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
+
+"@nodelib/fs.walk@^1.2.3":
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.4.tgz#011b9202a70a6366e436ca5c065844528ab04976"
+  integrity sha512-1V9XOY4rDW0rehzbrcqAmHnz8e7SKvX27gh8Gt2WgB0+pdzdiLV83p72kZPU+jvMbS1qU5mauP2iOvO8rhmurQ==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.3"
+    fastq "^1.6.0"
+
+"@stylelint/postcss-css-in-js@^0.37.2":
+  version "0.37.2"
+  resolved "https://registry.yarnpkg.com/@stylelint/postcss-css-in-js/-/postcss-css-in-js-0.37.2.tgz#7e5a84ad181f4234a2480803422a47b8749af3d2"
+  integrity sha512-nEhsFoJurt8oUmieT8qy4nk81WRHmJynmVwn/Vts08PL9fhgIsMhk1GId5yAN643OzqEEb5S/6At2TZW7pqPDA==
+  dependencies:
+    "@babel/core" ">=7.9.0"
+
+"@stylelint/postcss-markdown@^0.36.1":
+  version "0.36.1"
+  resolved "https://registry.yarnpkg.com/@stylelint/postcss-markdown/-/postcss-markdown-0.36.1.tgz#829b87e6c0f108014533d9d7b987dc9efb6632e8"
+  integrity sha512-iDxMBWk9nB2BPi1VFQ+Dc5+XpvODBHw2n3tYpaBZuEAFQlbtF9If0Qh5LTTwSi/XwdbJ2jt+0dis3i8omyggpw==
+  dependencies:
+    remark "^12.0.0"
+    unist-util-find-all-after "^3.0.1"
 
 "@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1"
+  integrity sha512-j7KnilGyZzYr/jhcrSYS3FGWMZVaqyCG0vzMCwzvei0coIkczuYMcniK07nI0aHJINciujjH11T72ICW5eL5Ig==
 
 "@svgr/babel-plugin-remove-jsx-attribute@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-4.2.0.tgz#297550b9a8c0c7337bea12bdfc8a80bb66f85abc"
+  integrity sha512-3XHLtJ+HbRCH4n28S7y/yZoEQnRpl0tvTZQsHqvaeNXPra+6vE5tbRliH3ox1yZYPCxrlqaJT/Mg+75GpDKlvQ==
 
 "@svgr/babel-plugin-remove-jsx-empty-expression@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-4.2.0.tgz#c196302f3e68eab6a05e98af9ca8570bc13131c7"
+  integrity sha512-yTr2iLdf6oEuUE9MsRdvt0NmdpMBAkgK8Bjhl6epb+eQWk6abBaX3d65UZ3E3FWaOwePyUgNyNCMVG61gGCQ7w==
 
 "@svgr/babel-plugin-replace-jsx-attribute-value@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-4.2.0.tgz#310ec0775de808a6a2e4fd4268c245fd734c1165"
+  integrity sha512-U9m870Kqm0ko8beHawRXLGLvSi/ZMrl89gJ5BNcT452fAjtF2p4uRzXkdzvGJJJYBgx7BmqlDjBN/eCp5AAX2w==
 
 "@svgr/babel-plugin-svg-dynamic-title@^4.3.3":
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-4.3.3.tgz#2cdedd747e5b1b29ed4c241e46256aac8110dd93"
+  integrity sha512-w3Be6xUNdwgParsvxkkeZb545VhXEwjGMwExMVBIdPQJeyMQHqm9Msnb2a1teHBqUYL66qtwfhNkbj1iarCG7w==
 
 "@svgr/babel-plugin-svg-em-dimensions@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-4.2.0.tgz#9a94791c9a288108d20a9d2cc64cac820f141391"
+  integrity sha512-C0Uy+BHolCHGOZ8Dnr1zXy/KgpBOkEUYY9kI/HseHVPeMbluaX3CijJr7D4C5uR8zrc1T64nnq/k63ydQuGt4w==
 
 "@svgr/babel-plugin-transform-react-native-svg@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-4.2.0.tgz#151487322843359a1ca86b21a3815fd21a88b717"
+  integrity sha512-7YvynOpZDpCOUoIVlaaOUU87J4Z6RdD6spYN4eUb5tfPoKGSF9OG2NuhgYnq4jSkAxcpMaXWPf1cePkzmqTPNw==
 
 "@svgr/babel-plugin-transform-svg-component@^4.2.0":
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-4.2.0.tgz#5f1e2f886b2c85c67e76da42f0f6be1b1767b697"
+  integrity sha512-hYfYuZhQPCBVotABsXKSCfel2slf/yvJY8heTVX1PCTaq/IgASq1IyxPPKJ0chWREEKewIU/JMSsIGBtK1KKxw==
 
 "@svgr/babel-preset@^4.3.3":
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-4.3.3.tgz#a75d8c2f202ac0e5774e6bfc165d028b39a1316c"
+  integrity sha512-6PG80tdz4eAlYUN3g5GZiUjg2FMcp+Wn6rtnz5WJG9ITGEF1pmFdzq02597Hn0OmnQuCVaBYQE1OVFAnwOl+0A==
   dependencies:
     "@svgr/babel-plugin-add-jsx-attribute" "^4.2.0"
     "@svgr/babel-plugin-remove-jsx-attribute" "^4.2.0"
@@ -1031,6 +1448,7 @@
 "@svgr/core@^4.1.0":
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/@svgr/core/-/core-4.3.3.tgz#b37b89d5b757dc66e8c74156d00c368338d24293"
+  integrity sha512-qNuGF1QON1626UCaZamWt5yedpgOytvLj5BQZe2j1k1B8DUG4OyugZyfEwBeXozCUwhLEpsrgPrE+eCu4fY17w==
   dependencies:
     "@svgr/plugin-jsx" "^4.3.3"
     camelcase "^5.3.1"
@@ -1039,12 +1457,14 @@
 "@svgr/hast-util-to-babel-ast@^4.3.2":
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-4.3.2.tgz#1d5a082f7b929ef8f1f578950238f630e14532b8"
+  integrity sha512-JioXclZGhFIDL3ddn4Kiq8qEqYM2PyDKV0aYno8+IXTLuYt6TOgHUbUAAFvqtb0Xn37NwP0BTHglejFoYr8RZg==
   dependencies:
     "@babel/types" "^7.4.4"
 
 "@svgr/plugin-jsx@^4.1.0", "@svgr/plugin-jsx@^4.3.3":
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-4.3.3.tgz#e2ba913dbdfbe85252a34db101abc7ebd50992fa"
+  integrity sha512-cLOCSpNWQnDB1/v+SUENHH7a0XY09bfuMKdq9+gYvtuwzC2rU4I0wKGFEp1i24holdQdwodCtDQdFtJiTCWc+w==
   dependencies:
     "@babel/core" "^7.4.5"
     "@svgr/babel-preset" "^4.3.3"
@@ -1054,6 +1474,7 @@
 "@svgr/plugin-svgo@^4.0.3":
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-4.3.1.tgz#daac0a3d872e3f55935c6588dd370336865e9e32"
+  integrity sha512-PrMtEDUWjX3Ea65JsVCwTIXuSqa3CG9px+DluF1/eo9mlDrgrtFE7NE/DjdhjJgSM9wenlVBzkzneSIUgfUI/w==
   dependencies:
     cosmiconfig "^5.2.1"
     merge-deep "^3.0.2"
@@ -1062,6 +1483,7 @@
 "@svgr/webpack@4.1.0":
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-4.1.0.tgz#20c88f32f731c7b1d4711045b2b993887d731c28"
+  integrity sha512-d09ehQWqLMywP/PT/5JvXwPskPK9QCXUjiSkAHehreB381qExXf5JFCBWhfEyNonRbkIneCeYM99w+Ud48YIQQ==
   dependencies:
     "@babel/core" "^7.1.6"
     "@babel/plugin-transform-react-constant-elements" "^7.0.0"
@@ -1073,8 +1495,9 @@
     loader-utils "^1.1.0"
 
 "@types/babel__core@^7.1.0":
-  version "7.1.3"
-  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.3.tgz#e441ea7df63cd080dfcd02ab199e6d16a735fc30"
+  version "7.1.9"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.9.tgz#77e59d438522a6fb898fa43dc3455c6e72f3963d"
+  integrity sha512-sY2RsIJ5rpER1u3/aQ8OFSI7qGIy8o1NEEbgb2UaJcvOtXOMpd39ko723NBpjQFg9SIX7TXtjejZVGeIMLhoOw==
   dependencies:
     "@babel/parser" "^7.1.0"
     "@babel/types" "^7.0.0"
@@ -1085,22 +1508,30 @@
 "@types/babel__generator@*":
   version "7.6.1"
   resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.1.tgz#4901767b397e8711aeb99df8d396d7ba7b7f0e04"
+  integrity sha512-bBKm+2VPJcMRVwNhxKu8W+5/zT7pwNEqeokFOmbvVSqGzFneNxYcEBro9Ac7/N9tlsaPYnZLK8J1LWKkMsLAew==
   dependencies:
     "@babel/types" "^7.0.0"
 
 "@types/babel__template@*":
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.0.2.tgz#4ff63d6b52eddac1de7b975a5223ed32ecea9307"
+  integrity sha512-/K6zCpeW7Imzgab2bLkLEbz0+1JlFSrUMdw7KoIIu+IUdu51GWaBZpd3y1VXGVXzynvGa4DaIaxNZHiON3GXUg==
   dependencies:
     "@babel/parser" "^7.1.0"
     "@babel/types" "^7.0.0"
 
 "@types/babel__traverse@*", "@types/babel__traverse@^7.0.6":
-  version "7.0.8"
-  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.0.8.tgz#479a4ee3e291a403a1096106013ec22cf9b64012"
+  version "7.0.14"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.0.14.tgz#e99da8c075d4fb098c774ba65dabf7dc9954bd13"
+  integrity sha512-8w9szzKs14ZtBVuP6Wn7nMLRJ0D6dfB0VEBEyRgxrZ/Ln49aNMykrghM2FaNn4FJRzNppCSa0Rv9pBRM5Xc3wg==
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/color-name@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
+  integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
+
 "@types/d3-array@*":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-2.0.0.tgz#a0d63a296a2d8435a9ec59393dcac746c6174a96"
@@ -1325,6 +1756,7 @@
 "@types/eslint-visitor-keys@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
+  integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
 
 "@types/geojson@*":
   version "7946.0.7"
@@ -1334,79 +1766,121 @@
 "@types/history@^3":
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/@types/history/-/history-3.2.4.tgz#0b6c62240d1fac020853aa5608758991d9f6ef3d"
+  integrity sha512-q7x8QeCRk2T6DR2UznwYW//mpN5uNlyajkewH2xd1s1ozCS4oHFRg2WMusxwLFlE57EkUYsd/gCapLBYzV3ffg==
 
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
+  integrity sha512-sz7iLqvVUg1gIedBOvlkxPlc8/uVzyS5OwGz1cKjXzkl3FpL3al0crU8YGU1WoHkxn0Wxbw5tyi6hvzJKNzFsw==
 
 "@types/istanbul-lib-report@*":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-1.1.1.tgz#e5471e7fa33c61358dd38426189c037a58433b8c"
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#c14c24f18ea8190c118ee7562b7ff99a36552686"
+  integrity sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==
   dependencies:
     "@types/istanbul-lib-coverage" "*"
 
 "@types/istanbul-reports@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-1.1.1.tgz#7a8cbf6a406f36c8add871625b278eaf0b0d255a"
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-1.1.2.tgz#e875cc689e47bce549ec81f3df5e6f6f11cfaeb2"
+  integrity sha512-P/W9yOX/3oPZSpaYOCQzGqgCQRXn0FFO/V8bWrCQs+wLmvVVxk6CRBXALEvNs9OHIatlnlFokfhuDo2ug01ciw==
   dependencies:
     "@types/istanbul-lib-coverage" "*"
     "@types/istanbul-lib-report" "*"
 
+"@types/istanbul-reports@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-3.0.0.tgz#508b13aa344fa4976234e75dddcc34925737d821"
+  integrity sha512-nwKNbvnwJ2/mndE9ItP/zc2TCzw6uuodnF4EHYWD+gCQDVBuRQL5UzbZD0/ezy1iKsFU2ZQiDqg4M9dN4+wZgA==
+  dependencies:
+    "@types/istanbul-lib-report" "*"
+
 "@types/jest-diff@*":
   version "24.3.0"
   resolved "https://registry.yarnpkg.com/@types/jest-diff/-/jest-diff-24.3.0.tgz#29e237a3d954babfe6e23cc59b57ecd8ca8d858d"
+  integrity sha512-vx1CRDeDUwQ0Pc7v+hS61O1ETA81kD04IMEC0hS1kPyVtHDdZrokAvpF7MT9VI/fVSzicelUZNCepDvhRV1PeA==
   dependencies:
     jest-diff "*"
 
 "@types/jest@24.0.12":
   version "24.0.12"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-24.0.12.tgz#0553dd0a5ac744e7dc4e8700da6d3baedbde3e8f"
+  integrity sha512-60sjqMhat7i7XntZckcSGV8iREJyXXI6yFHZkSZvCPUeOnEJ/VP1rU/WpEWQ56mvoh8NhC+sfKAuJRTyGtCOow==
   dependencies:
     "@types/jest-diff" "*"
 
 "@types/json-schema@^7.0.3":
-  version "7.0.4"
-  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.4.tgz#38fd73ddfd9b55abb1e1b2ed578cb55bd7b7d339"
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.6.tgz#f4c7ec43e81b319a9815115031709f26987891f0"
+  integrity sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==
 
 "@types/json5@^0.0.30":
   version "0.0.30"
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.30.tgz#44cb52f32a809734ca562e685c6473b5754a7818"
+  integrity sha512-sqm9g7mHlPY/43fcSNrCYfOeX9zkTTK+euO5E6+CVijSMm5tTjkVdwdqRkY3ljjIAf8679vps5jKUoJBCLsMDA==
+
+"@types/minimist@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.0.tgz#69a23a3ad29caf0097f06eda59b361ee2f0639f6"
+  integrity sha1-aaI6OtKcrwCX8G7aWbNh7i8GOfY=
+
+"@types/node@*":
+  version "14.6.4"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.6.4.tgz#a145cc0bb14ef9c4777361b7bbafa5cf8e3acb5a"
+  integrity sha512-Wk7nG1JSaMfMpoMJDKUsWYugliB2Vy55pdjLpmLixeyMi7HizW2I/9QoxsPCkXl3dO+ZOVqPumKaDUv5zJu2uQ==
 
 "@types/node@^10.13.0":
-  version "10.17.13"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.13.tgz#ccebcdb990bd6139cd16e84c39dc2fb1023ca90c"
+  version "10.17.30"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.30.tgz#20556a0d7f62b83e163973a6cd640af636d3dd3b"
+  integrity sha512-euU8QLX0ipj+5mOYa4ZqZoTv+53BY7yTg9I2ZIhDXgiI3M+0n4mdAt9TQCuvxVAgU179g8OsRLaBt0qEi0T6xA==
+
+"@types/normalize-package-data@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
+  integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
+
+"@types/parse-json@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
+  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
 "@types/prop-types@*":
   version "15.7.3"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
+  integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
 
 "@types/q@^1.5.1":
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
+  integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
 "@types/react-dom@^16.0.7":
-  version "16.9.4"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.4.tgz#0b58df09a60961dcb77f62d4f1832427513420df"
+  version "16.9.8"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.8.tgz#fe4c1e11dfc67155733dfa6aa65108b4971cb423"
+  integrity sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==
   dependencies:
     "@types/react" "*"
 
 "@types/react-router@^3.0.20":
-  version "3.0.20"
-  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-3.0.20.tgz#a711682475ccef70ad9ad9e459859380221e6ee6"
+  version "3.0.24"
+  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-3.0.24.tgz#f924569538ea78a0b0d70892900a0d99ed6d7354"
+  integrity sha512-cSpMXzI0WocB5/UmySAtGlvG5w3m2mNvU6FgYFFWGqt6KywI7Ez+4Z9mEkglcAAGaP+voZjVg+BJP86bkVrSxQ==
   dependencies:
     "@types/history" "^3"
     "@types/react" "*"
 
 "@types/react@*", "@types/react@^15.x || ^16.x":
-  version "16.9.17"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.17.tgz#58f0cc0e9ec2425d1441dd7b623421a867aa253e"
+  version "16.9.49"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.49.tgz#09db021cf8089aba0cdb12a49f8021a69cce4872"
+  integrity sha512-DtLFjSj0OYAdVLBbyjhuV9CdGVHCkHn2R+xr3XkBvK2rS1Y1tkc14XSGjYgm5Fjjr90AxH9tiSzc1pCFMGO06g==
   dependencies:
     "@types/prop-types" "*"
-    csstype "^2.2.0"
+    csstype "^3.0.2"
 
 "@types/react@16.8.6":
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.6.tgz#fa1de3fe56cc9b6afeddc73d093d7f30fd5e31cc"
+  integrity sha512-bN9qDjEMltmHrl0PZRI4IF2AbB7V5UlRfG+OOduckVnRQ4VzXVSzy/1eLAh778IEqhTnW0mmgL9yShfinNverA==
   dependencies:
     "@types/prop-types" "*"
     csstype "^2.2.0"
@@ -1414,59 +1888,79 @@
 "@types/stack-utils@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
+  integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
+
+"@types/unist@^2.0.0", "@types/unist@^2.0.2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
+  integrity sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==
 
 "@types/yargs-parser@*":
-  version "13.1.0"
-  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-13.1.0.tgz#c563aa192f39350a1d18da36c5a8da382bbd8228"
+  version "15.0.0"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
+  integrity sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==
 
 "@types/yargs@^13.0.0":
-  version "13.0.4"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-13.0.4.tgz#53d231cebe1a540e7e13727fc1f0d13ad4a9ba3b"
+  version "13.0.10"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-13.0.10.tgz#e77bf3fc73c781d48c2eb541f87c453e321e5f4b"
+  integrity sha512-MU10TSgzNABgdzKvQVW1nuuT+sgBMWeXNc3XOs5YXV5SDAK+PPja2eUuBNB9iqElu03xyEDqlnGw0jgl4nbqGQ==
+  dependencies:
+    "@types/yargs-parser" "*"
+
+"@types/yargs@^15.0.0":
+  version "15.0.5"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.5.tgz#947e9a6561483bdee9adffc983e91a6902af8b79"
+  integrity sha512-Dk/IDOPtOgubt/IaevIUbTgV7doaKkoorvOyYM2CMwuDyP89bekI7H4xLIwunNYiK9jhCkmc6pUrJk3cj2AB9w==
   dependencies:
     "@types/yargs-parser" "*"
 
 "@typescript-eslint/eslint-plugin@^2.11.0":
-  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.15.0.tgz#5442c30b687ffd576ff74cfea46a6d7bfb0ee893"
+  version "2.34.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.34.0.tgz#6f8ce8a46c7dea4a6f1d171d2bb8fbae6dac2be9"
+  integrity sha512-4zY3Z88rEE99+CNvTbXSyovv2z9PNOVffTWD2W8QF5s2prBQtwN2zadqERcrHpcR7O/+KMI3fcTAmUUhK/iQcQ==
   dependencies:
-    "@typescript-eslint/experimental-utils" "2.15.0"
-    eslint-utils "^1.4.3"
+    "@typescript-eslint/experimental-utils" "2.34.0"
     functional-red-black-tree "^1.0.1"
     regexpp "^3.0.0"
     tsutils "^3.17.1"
 
-"@typescript-eslint/experimental-utils@2.15.0":
-  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.15.0.tgz#41e35313bfaef91650ddb5380846d1c78a780070"
+"@typescript-eslint/experimental-utils@2.34.0":
+  version "2.34.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.34.0.tgz#d3524b644cdb40eebceca67f8cf3e4cc9c8f980f"
+  integrity sha512-eS6FTkq+wuMJ+sgtuNTtcqavWXqsflWcfBnlYhg/nS4aZ1leewkXGbvBhaapn1q6qf4M71bsR1tez5JTRMuqwA==
   dependencies:
     "@types/json-schema" "^7.0.3"
-    "@typescript-eslint/typescript-estree" "2.15.0"
+    "@typescript-eslint/typescript-estree" "2.34.0"
     eslint-scope "^5.0.0"
+    eslint-utils "^2.0.0"
 
 "@typescript-eslint/parser@^2.11.0":
-  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.15.0.tgz#379a71a51b0429bc3bc55c5f8aab831bf607e411"
+  version "2.34.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.34.0.tgz#50252630ca319685420e9a39ca05fe185a256bc8"
+  integrity sha512-03ilO0ucSD0EPTw2X4PntSIRFtDPWjrVq7C3/Z3VQHRC7+13YB55rcJI3Jt+YgeHbjUdJPcPa7b23rXCBokuyA==
   dependencies:
     "@types/eslint-visitor-keys" "^1.0.0"
-    "@typescript-eslint/experimental-utils" "2.15.0"
-    "@typescript-eslint/typescript-estree" "2.15.0"
+    "@typescript-eslint/experimental-utils" "2.34.0"
+    "@typescript-eslint/typescript-estree" "2.34.0"
     eslint-visitor-keys "^1.1.0"
 
-"@typescript-eslint/typescript-estree@2.15.0":
-  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.15.0.tgz#79ae52eed8701b164d91e968a65d85a9105e76d3"
+"@typescript-eslint/typescript-estree@2.34.0":
+  version "2.34.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.34.0.tgz#14aeb6353b39ef0732cc7f1b8285294937cf37d5"
+  integrity sha512-OMAr+nJWKdlVM9LOqCqh3pQQPwxHAN7Du8DR6dmwCrAmxtiXQnhHJ6tBNtf+cggqfo51SG/FCwnKhXCIM7hnVg==
   dependencies:
     debug "^4.1.1"
     eslint-visitor-keys "^1.1.0"
     glob "^7.1.6"
     is-glob "^4.0.1"
-    lodash.unescape "4.0.1"
-    semver "^6.3.0"
+    lodash "^4.17.15"
+    semver "^7.3.2"
     tsutils "^3.17.1"
 
 "@uifabric/fluent-theme@^0.16.7":
   version "0.16.21"
   resolved "https://registry.yarnpkg.com/@uifabric/fluent-theme/-/fluent-theme-0.16.21.tgz#a9c6202f120787d9aee38d8b8896401477dc0bbe"
+  integrity sha512-j25cP59zM0o7NWwBZGDefUexJcg9ujvSjTcNDu+1AgxrOgh5fDYjiAyfNf4bgJUF7ApOgp3RHgkagxIuYMHXMw==
   dependencies:
     "@uifabric/merge-styles" "^6.19.4"
     "@uifabric/set-version" "^1.1.3"
@@ -1478,75 +1972,85 @@
 "@uifabric/foundation@^0.8.3":
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/@uifabric/foundation/-/foundation-0.8.3.tgz#46fc211deb1407436695d0e069d1975073f9e9d3"
+  integrity sha512-r3WhRj7Out8QAOe50BGA36R8zgRPy0D0GNPuwFK9BB9oIidf91ycj7/miY8U0TZRZi5fB3Kg+dy/uxSDfgC6Og==
   dependencies:
     "@uifabric/set-version" "^1.1.3"
     "@uifabric/styling" "^6.50.7"
     "@uifabric/utilities" "^6.41.7"
     tslib "^1.7.1"
 
-"@uifabric/foundation@^7.5.0":
-  version "7.5.0"
-  resolved "https://registry.yarnpkg.com/@uifabric/foundation/-/foundation-7.5.0.tgz#d36f15ef59edeaa8219f2b7d34f74c6d756f6622"
+"@uifabric/foundation@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@uifabric/foundation/-/foundation-7.9.0.tgz#b7d8333e1c972a22336bfde747fc9f07df24f05c"
+  integrity sha512-4gdPwx0HV59aWvPKIw6yIje60CYwJZmTJsdLRXqh8Np1tWp2EsbA8U/IHQL1V91rEN0DlQhASqCDFhfQoD1jUw==
   dependencies:
-    "@uifabric/merge-styles" "^7.8.0"
-    "@uifabric/set-version" "^7.0.2"
-    "@uifabric/styling" "^7.7.2"
-    "@uifabric/utilities" "^7.5.0"
-    tslib "^1.7.1"
+    "@uifabric/merge-styles" "^7.18.0"
+    "@uifabric/set-version" "^7.0.22"
+    "@uifabric/styling" "^7.16.0"
+    "@uifabric/utilities" "^7.31.0"
+    tslib "^1.10.0"
 
 "@uifabric/icons@^6.5.5":
   version "6.5.5"
   resolved "https://registry.yarnpkg.com/@uifabric/icons/-/icons-6.5.5.tgz#5004e037295bcff0768b718a07d0bbd831c1d3a6"
+  integrity sha512-cGjzdpT0jzQ2RJvzlCVTrewaHCi4rb+ZNL2LWoceMi+5h196Y32qJwKMsc0ggR6u5CjMrzBiAxUFNppBSCutdA==
   dependencies:
     "@uifabric/set-version" "^1.1.3"
     "@uifabric/styling" "^6.50.7"
     tslib "^1.7.1"
 
-"@uifabric/icons@^7.3.0":
-  version "7.3.0"
-  resolved "https://registry.yarnpkg.com/@uifabric/icons/-/icons-7.3.0.tgz#db5b418d1db1e3f05e92d71f2dc829aa6e239bdb"
+"@uifabric/icons@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@uifabric/icons/-/icons-7.5.0.tgz#49b54b1d2eb235073b824f702fbf895676103012"
+  integrity sha512-RINA9VkajlCnlwEBbqiwLBaaGn38Bf9UvjOuwrrja4B9lclLeQzZuGrG/kp7CnDtIO+LC19OYl/7E3jW7yIihA==
   dependencies:
-    "@uifabric/set-version" "^7.0.2"
-    "@uifabric/styling" "^7.7.1"
-    tslib "^1.7.1"
+    "@uifabric/set-version" "^7.0.22"
+    "@uifabric/styling" "^7.16.0"
+    tslib "^1.10.0"
 
 "@uifabric/merge-styles@^6.19.4":
   version "6.19.4"
   resolved "https://registry.yarnpkg.com/@uifabric/merge-styles/-/merge-styles-6.19.4.tgz#986a068a6109d699831d3adedcf286a0e042cb58"
+  integrity sha512-bjQdDHxmRIZVPwL//MtErODhEfcRJ2y+zJXoIWNh3T8JfAepeRDdoJ/pGNnnyJxA/AHMtlWt0IgMaz150/nfAA==
   dependencies:
     "@uifabric/set-version" "^1.1.3"
     tslib "^1.7.1"
 
-"@uifabric/merge-styles@^7.8.0", "@uifabric/merge-styles@^7.8.1":
-  version "7.8.1"
-  resolved "https://registry.yarnpkg.com/@uifabric/merge-styles/-/merge-styles-7.8.1.tgz#b3973eb6942bf5fd1653fb8c2ae349343bacd30d"
+"@uifabric/merge-styles@^7.18.0":
+  version "7.18.0"
+  resolved "https://registry.yarnpkg.com/@uifabric/merge-styles/-/merge-styles-7.18.0.tgz#66c5d0e0a4ce03791d0ff356634b51ae1de4e36a"
+  integrity sha512-805WIbN7lAJATXKxZjjRbIgN7raRMwWYWeDkJJ52PCPuCesOvbpdr0GkH8rC6GQ7EB0MB7YM2i6Fiye7SFewbw==
   dependencies:
-    "@uifabric/set-version" "^7.0.2"
-    tslib "^1.7.1"
+    "@uifabric/set-version" "^7.0.22"
+    tslib "^1.10.0"
 
-"@uifabric/react-hooks@^7.0.1":
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/@uifabric/react-hooks/-/react-hooks-7.0.1.tgz#aa0e9f17e13def6763de7671bd82210261222591"
+"@uifabric/react-hooks@^7.12.0":
+  version "7.12.0"
+  resolved "https://registry.yarnpkg.com/@uifabric/react-hooks/-/react-hooks-7.12.0.tgz#85e86ed6149887e47ffa9c14d33bbd66ade27a0b"
+  integrity sha512-vPrg7NVtjjZlDS33tDUiyJSov8PNHBBX8w+EN9eatxP0g6dDkvGv8uWd+9Xpxrliuzi7ad7vlmUMOQffYJntMg==
   dependencies:
-    "@uifabric/set-version" "^7.0.2"
-    "@uifabric/utilities" "^7.0.10"
-    tslib "^1.7.1"
+    "@uifabric/set-version" "^7.0.22"
+    "@uifabric/utilities" "^7.31.0"
+    tslib "^1.10.0"
 
 "@uifabric/set-version@^1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@uifabric/set-version/-/set-version-1.1.3.tgz#8d1137df1406f38828e597e81122077a16c8da8b"
+  integrity sha512-IYpwVIuN7MJOeiWzZzr9AmFSvA5zc6gJn4fNHtEFIQnNB8WVWIcYrvx8Tbf7wWj9MvhdHYp70F054zZlHbL/Ag==
   dependencies:
     tslib "^1.7.1"
 
-"@uifabric/set-version@^7.0.2":
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/@uifabric/set-version/-/set-version-7.0.2.tgz#9e2aede95e5cad58151e6ab0f94cc6efaef68c13"
+"@uifabric/set-version@^7.0.22":
+  version "7.0.22"
+  resolved "https://registry.yarnpkg.com/@uifabric/set-version/-/set-version-7.0.22.tgz#f2d5235bb10927a7024b23ccef52070371349dbb"
+  integrity sha512-IG35UNJNxqI7NC2eYuobGTD+v4W0VHQcC3bYd5Na9EgoC9jVgguS8n6EXUtP/lC1vJEYEyPEZdVwhPxKw4F4Sw==
   dependencies:
-    tslib "^1.7.1"
+    tslib "^1.10.0"
 
 "@uifabric/styling@^6.50.7":
   version "6.50.7"
   resolved "https://registry.yarnpkg.com/@uifabric/styling/-/styling-6.50.7.tgz#a07c6c88b5b50a5c9dc603b33d76b34ad6fcb507"
+  integrity sha512-F2aBiB30ZiFxlZzy5hzLXODWOl6jySvPFAsoaTofk37xucHiunBLZYjX6WkfZrCWiyGPva+DLssNcwly9ZHVjg==
   dependencies:
     "@microsoft/load-themed-styles" "^1.7.13"
     "@uifabric/merge-styles" "^6.19.4"
@@ -1554,37 +2058,42 @@
     "@uifabric/utilities" "^6.41.7"
     tslib "^1.7.1"
 
-"@uifabric/styling@^7.7.1", "@uifabric/styling@^7.7.2", "@uifabric/styling@^7.8.1":
-  version "7.8.1"
-  resolved "https://registry.yarnpkg.com/@uifabric/styling/-/styling-7.8.1.tgz#4cd85a273ff479785b14a97510472bf22b2cedd7"
+"@uifabric/styling@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@uifabric/styling/-/styling-7.16.0.tgz#428226d184965d549ebbd110ac33e115b3136b6f"
+  integrity sha512-yO404ws8Wl4fjBwG4T58TFJjeU/K+SpWJ4w+WeNMDlJcYe4zXaWn2lbOJtKtQiMl324RAEjFSOuNkXzPb0uOGQ==
   dependencies:
-    "@microsoft/load-themed-styles" "^1.7.13"
-    "@uifabric/merge-styles" "^7.8.1"
-    "@uifabric/set-version" "^7.0.2"
-    "@uifabric/utilities" "^7.8.0"
-    tslib "^1.7.1"
+    "@fluentui/theme" "^0.2.0"
+    "@microsoft/load-themed-styles" "^1.10.26"
+    "@uifabric/merge-styles" "^7.18.0"
+    "@uifabric/set-version" "^7.0.22"
+    "@uifabric/utilities" "^7.31.0"
+    tslib "^1.10.0"
 
-"@uifabric/utilities@^6.41.7", "@uifabric/utilities@^6.45.1":
-  version "6.45.1"
-  resolved "https://registry.yarnpkg.com/@uifabric/utilities/-/utilities-6.45.1.tgz#39cb225d57956abe679985b3ed1742bf3579be79"
+"@uifabric/utilities@^6.41.7", "@uifabric/utilities@^6.45.2":
+  version "6.45.2"
+  resolved "https://registry.yarnpkg.com/@uifabric/utilities/-/utilities-6.45.2.tgz#671696f8ac6c4db07500b5aed5181d7b07affb25"
+  integrity sha512-JiC92OjMOkVoiIAeS2b3R9B1XQU0cJ5bDr9B7VvrxlwKe1W9xMtVsCer7b8gNCU5NFNYBN5ckM3Q7x2Zs5cH0A==
   dependencies:
     "@uifabric/merge-styles" "^6.19.4"
     "@uifabric/set-version" "^1.1.3"
     prop-types "^15.5.10"
     tslib "^1.7.1"
 
-"@uifabric/utilities@^7.0.10", "@uifabric/utilities@^7.5.0", "@uifabric/utilities@^7.8.0", "@uifabric/utilities@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@uifabric/utilities/-/utilities-7.9.0.tgz#2ada7b4a5e333e5a01371d2af56a4c7692382ebb"
+"@uifabric/utilities@^7.31.0":
+  version "7.31.0"
+  resolved "https://registry.yarnpkg.com/@uifabric/utilities/-/utilities-7.31.0.tgz#600ea931b643c7cbcc38d6466748379227d4fbc7"
+  integrity sha512-m4Yeyn4gyW7xS8LvOnCesokPModYS2YuE9GQmO++MDZ/vC5RRNlvlyktUZDuxCZ84cNCiXyTQ8nImBaPGnxHVQ==
   dependencies:
-    "@uifabric/merge-styles" "^7.8.1"
-    "@uifabric/set-version" "^7.0.2"
-    prop-types "^15.5.10"
-    tslib "^1.7.1"
+    "@uifabric/merge-styles" "^7.18.0"
+    "@uifabric/set-version" "^7.0.22"
+    prop-types "^15.7.2"
+    tslib "^1.10.0"
 
 "@uifabric/variants@^6.15.2":
   version "6.15.2"
   resolved "https://registry.yarnpkg.com/@uifabric/variants/-/variants-6.15.2.tgz#ca96e18bf738ba1cc3152d23aeb4ee6990e963b4"
+  integrity sha512-QWz9+hwxPBys8eib5+K+mtNqGmZFj+pjNWr2M63DsOODbod0geEux1n4X/6+TiEQUDoBTts7UGu7izIzVLmNmQ==
   dependencies:
     "@uifabric/set-version" "^1.1.3"
     office-ui-fabric-react "^6.203.2"
@@ -1593,6 +2102,7 @@
 "@webassemblyjs/ast@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"
+  integrity sha512-aJMfngIZ65+t71C3y2nBBg5FFG0Okt9m0XEgWZ7Ywgn1oMAT8cNwx00Uv1cQyHtidq0Xn94R4TAywO+LCQ+ZAQ==
   dependencies:
     "@webassemblyjs/helper-module-context" "1.8.5"
     "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
@@ -1601,28 +2111,34 @@
 "@webassemblyjs/floating-point-hex-parser@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.8.5.tgz#1ba926a2923613edce496fd5b02e8ce8a5f49721"
+  integrity sha512-9p+79WHru1oqBh9ewP9zW95E3XAo+90oth7S5Re3eQnECGq59ly1Ri5tsIipKGpiStHsUYmY3zMLqtk3gTcOtQ==
 
 "@webassemblyjs/helper-api-error@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.8.5.tgz#c49dad22f645227c5edb610bdb9697f1aab721f7"
+  integrity sha512-Za/tnzsvnqdaSPOUXHyKJ2XI7PDX64kWtURyGiJJZKVEdFOsdKUCPTNEVFZq3zJ2R0G5wc2PZ5gvdTRFgm81zA==
 
 "@webassemblyjs/helper-buffer@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.8.5.tgz#fea93e429863dd5e4338555f42292385a653f204"
+  integrity sha512-Ri2R8nOS0U6G49Q86goFIPNgjyl6+oE1abW1pS84BuhP1Qcr5JqMwRFT3Ah3ADDDYGEgGs1iyb1DGX+kAi/c/Q==
 
 "@webassemblyjs/helper-code-frame@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.8.5.tgz#9a740ff48e3faa3022b1dff54423df9aa293c25e"
+  integrity sha512-VQAadSubZIhNpH46IR3yWO4kZZjMxN1opDrzePLdVKAZ+DFjkGD/rf4v1jap744uPVU6yjL/smZbRIIJTOUnKQ==
   dependencies:
     "@webassemblyjs/wast-printer" "1.8.5"
 
 "@webassemblyjs/helper-fsm@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.8.5.tgz#ba0b7d3b3f7e4733da6059c9332275d860702452"
+  integrity sha512-kRuX/saORcg8se/ft6Q2UbRpZwP4y7YrWsLXPbbmtepKr22i8Z4O3V5QE9DbZK908dh5Xya4Un57SDIKwB9eow==
 
 "@webassemblyjs/helper-module-context@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.8.5.tgz#def4b9927b0101dc8cbbd8d1edb5b7b9c82eb245"
+  integrity sha512-/O1B236mN7UNEU4t9X7Pj38i4VoU8CcMHyy3l2cV/kIF4U5KoHXDVqcDuOs1ltkac90IM4vZdHc52t1x8Yfs3g==
   dependencies:
     "@webassemblyjs/ast" "1.8.5"
     mamacro "^0.0.3"
@@ -1630,10 +2146,12 @@
 "@webassemblyjs/helper-wasm-bytecode@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.8.5.tgz#537a750eddf5c1e932f3744206551c91c1b93e61"
+  integrity sha512-Cu4YMYG3Ddl72CbmpjU/wbP6SACcOPVbHN1dI4VJNJVgFwaKf1ppeFJrwydOG3NDHxVGuCfPlLZNyEdIYlQ6QQ==
 
 "@webassemblyjs/helper-wasm-section@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.8.5.tgz#74ca6a6bcbe19e50a3b6b462847e69503e6bfcbf"
+  integrity sha512-VV083zwR+VTrIWWtgIUpqfvVdK4ff38loRmrdDBgBT8ADXYsEZ5mPQ4Nde90N3UYatHdYoDIFb7oHzMncI02tA==
   dependencies:
     "@webassemblyjs/ast" "1.8.5"
     "@webassemblyjs/helper-buffer" "1.8.5"
@@ -1643,22 +2161,26 @@
 "@webassemblyjs/ieee754@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.8.5.tgz#712329dbef240f36bf57bd2f7b8fb9bf4154421e"
+  integrity sha512-aaCvQYrvKbY/n6wKHb/ylAJr27GglahUO89CcGXMItrOBqRarUMxWLJgxm9PJNuKULwN5n1csT9bYoMeZOGF3g==
   dependencies:
     "@xtuc/ieee754" "^1.2.0"
 
 "@webassemblyjs/leb128@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.8.5.tgz#044edeb34ea679f3e04cd4fd9824d5e35767ae10"
+  integrity sha512-plYUuUwleLIziknvlP8VpTgO4kqNaH57Y3JnNa6DLpu/sGcP6hbVdfdX5aHAV716pQBKrfuU26BJK29qY37J7A==
   dependencies:
     "@xtuc/long" "4.2.2"
 
 "@webassemblyjs/utf8@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.8.5.tgz#a8bf3b5d8ffe986c7c1e373ccbdc2a0915f0cedc"
+  integrity sha512-U7zgftmQriw37tfD934UNInokz6yTmn29inT2cAetAsaU9YeVCveWEwhKL1Mg4yS7q//NGdzy79nlXh3bT8Kjw==
 
 "@webassemblyjs/wasm-edit@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.8.5.tgz#962da12aa5acc1c131c81c4232991c82ce56e01a"
+  integrity sha512-A41EMy8MWw5yvqj7MQzkDjU29K7UJq1VrX2vWLzfpRHt3ISftOXqrtojn7nlPsZ9Ijhp5NwuODuycSvfAO/26Q==
   dependencies:
     "@webassemblyjs/ast" "1.8.5"
     "@webassemblyjs/helper-buffer" "1.8.5"
@@ -1672,6 +2194,7 @@
 "@webassemblyjs/wasm-gen@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.8.5.tgz#54840766c2c1002eb64ed1abe720aded714f98bc"
+  integrity sha512-BCZBT0LURC0CXDzj5FXSc2FPTsxwp3nWcqXQdOZE4U7h7i8FqtFK5Egia6f9raQLpEKT1VL7zr4r3+QX6zArWg==
   dependencies:
     "@webassemblyjs/ast" "1.8.5"
     "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
@@ -1682,6 +2205,7 @@
 "@webassemblyjs/wasm-opt@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.8.5.tgz#b24d9f6ba50394af1349f510afa8ffcb8a63d264"
+  integrity sha512-HKo2mO/Uh9A6ojzu7cjslGaHaUU14LdLbGEKqTR7PBKwT6LdPtLLh9fPY33rmr5wcOMrsWDbbdCHq4hQUdd37Q==
   dependencies:
     "@webassemblyjs/ast" "1.8.5"
     "@webassemblyjs/helper-buffer" "1.8.5"
@@ -1691,6 +2215,7 @@
 "@webassemblyjs/wasm-parser@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.8.5.tgz#21576f0ec88b91427357b8536383668ef7c66b8d"
+  integrity sha512-pi0SYE9T6tfcMkthwcgCpL0cM9nRYr6/6fjgDtL6q/ZqKHdMWvxitRi5JcZ7RI4SNJJYnYNaWy5UUrHQy998lw==
   dependencies:
     "@webassemblyjs/ast" "1.8.5"
     "@webassemblyjs/helper-api-error" "1.8.5"
@@ -1702,6 +2227,7 @@
 "@webassemblyjs/wast-parser@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.8.5.tgz#e10eecd542d0e7bd394f6827c49f3df6d4eefb8c"
+  integrity sha512-daXC1FyKWHF1i11obK086QRlsMsY4+tIOKgBqI1lxAnkp9xe9YMcgOxm9kLe+ttjs5aWV2KKE1TWJCN57/Btsg==
   dependencies:
     "@webassemblyjs/ast" "1.8.5"
     "@webassemblyjs/floating-point-hex-parser" "1.8.5"
@@ -1713,6 +2239,7 @@
 "@webassemblyjs/wast-printer@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.8.5.tgz#114bbc481fd10ca0e23b3560fa812748b0bae5bc"
+  integrity sha512-w0U0pD4EhlnvRyeJzBqaVSJAo9w/ce7/WPogeXLzGkO6hzhr4GnQIZ4W4uUt5b9ooAaXPtnXlj0gzsXEOUNYMg==
   dependencies:
     "@webassemblyjs/ast" "1.8.5"
     "@webassemblyjs/wast-parser" "1.8.5"
@@ -1721,10 +2248,12 @@
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
+  integrity sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==
 
 "@xtuc/long@4.2.2":
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
+  integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
 JSONStream@^1.3.4, JSONStream@^1.3.5:
   version "1.3.5"
@@ -1742,6 +2271,7 @@ abbrev@1, abbrev@~1.1.1:
 accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
   version "1.3.7"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
+  integrity sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==
   dependencies:
     mime-types "~2.1.24"
     negotiator "0.6.2"
@@ -1749,10 +2279,12 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
 acorn-dynamic-import@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz#482210140582a36b83c3e342e1cfebcaa9240948"
+  integrity sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==
 
 acorn-jsx@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.1.0.tgz#294adb71b57398b0680015f0a38c563ee1db5384"
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b"
+  integrity sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==
 
 acorn@^5.2.1:
   version "5.7.4"
@@ -1762,10 +2294,12 @@ acorn@^5.2.1:
 acorn@^6.0.5, acorn@^6.0.7:
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474"
+  integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==
 
 address@1.1.2, address@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
+  integrity sha512-aT6camzM4xEA54YVJYSqxz1kv4IHnQZRtThJJHhUMRExaU5spC7jX5ugSwTaTgJliIgs4VhZOk7htClvQ/LmRA==
 
 agent-base@4, agent-base@^4.3.0:
   version "4.3.0"
@@ -1791,24 +2325,17 @@ agentkeepalive@^3.4.1:
 ajv-errors@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
+  integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==
 
 ajv-keywords@^3.1.0:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da"
-
-ajv@^6.1.0, ajv@^6.10.2, ajv@^6.9.1:
-  version "6.10.2"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.10.2.tgz#d3cea04d6b017b2894ad69040fec8b623eb4bd52"
-  dependencies:
-    fast-deep-equal "^2.0.1"
-    fast-json-stable-stringify "^2.0.0"
-    json-schema-traverse "^0.4.1"
-    uri-js "^4.2.2"
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
+  integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
-ajv@^6.5.5:
-  version "6.12.3"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.3.tgz#18c5af38a111ddeb4f2697bd78d68abc1cabd706"
-  integrity sha512-4K0cK3L1hsqk9xIb2z9vs/XU+PGJZ9PNpJRDS9YLzmNdX6jmVPfamLvTJr0aDAusnHyCHO6MjzlkAsgtqp9teA==
+ajv@^6.1.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.9.1:
+  version "6.12.4"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.4.tgz#0614facc4522127fa713445c6bfd3ebd376e2234"
+  integrity sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==
   dependencies:
     fast-deep-equal "^3.1.1"
     fast-json-stable-stringify "^2.0.0"
@@ -1818,10 +2345,12 @@ ajv@^6.5.5:
 alphanum-sort@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
+  integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
 
 amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
+  integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
 
 ansi-align@^2.0.0:
   version "2.0.0"
@@ -1833,14 +2362,17 @@ ansi-align@^2.0.0:
 ansi-colors@^3.0.0:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
+  integrity sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==
 
 ansi-escapes@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
+  integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
 
 ansi-html@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
+  integrity sha1-gTWEAhliqenm/QOflA0S9WynhZ4=
 
 ansi-regex@^2.0.0:
   version "2.1.1"
@@ -1852,14 +2384,20 @@ ansi-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
   integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=
 
-ansi-regex@^4.0.0, ansi-regex@^4.1.0:
+ansi-regex@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
   integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
 
+ansi-regex@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
+  integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
+
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+  integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
 
 ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   version "3.2.1"
@@ -1868,6 +2406,14 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.2.1.tgz#90ae75c424d008d2624c5bf29ead3177ebfcf359"
+  integrity sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==
+  dependencies:
+    "@types/color-name" "^1.1.1"
+    color-convert "^2.0.1"
+
 ansicolors@~0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/ansicolors/-/ansicolors-0.3.2.tgz#665597de86a9ffe3aa9bfbe6cae5c6ea426b4979"
@@ -1881,10 +2427,19 @@ ansistyles@~0.1.3:
 anymatch@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
+  integrity sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==
   dependencies:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
+anymatch@~3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.1.tgz#c55ecf02185e2469259399310c173ce31233b142"
+  integrity sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
 aproba@^1.0.3, aproba@^1.1.1, aproba@^1.1.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
@@ -1911,12 +2466,14 @@ are-we-there-yet@~1.1.2:
 argparse@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
+  integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
   dependencies:
     sprintf-js "~1.0.2"
 
 aria-query@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-3.0.0.tgz#65b3fcc1ca1155a8c9ae64d6eee297f15d5133cc"
+  integrity sha1-ZbP8wcoRVajJrmTW7uKX8V1RM8w=
   dependencies:
     ast-types-flow "0.0.7"
     commander "^2.11.0"
@@ -1924,30 +2481,37 @@ aria-query@^3.0.0:
 arr-diff@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
+  integrity sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=
 
 arr-flatten@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+  integrity sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==
 
 arr-union@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
+  integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
 
 array-find-index@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
+  integrity sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=
 
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+  integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
 
 array-flatten@^2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.2.tgz#24ef80a28c1a893617e2149b0c6d0d788293b099"
+  integrity sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==
 
-array-includes@^3.0.3:
+array-includes@^3.0.3, array-includes@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.1.tgz#cdd67e6852bdf9c1215460786732255ed2459348"
+  integrity sha512-c2VXaCHl7zPsvpkFsw4nxvFie4fh1ur9bpcgsVkIjqn0H/Xwdg+7fv3n2r/isyS8EBj5b06M9kHyZuIr4El6WQ==
   dependencies:
     define-properties "^1.1.3"
     es-abstract "^1.17.0"
@@ -1956,33 +2520,44 @@ array-includes@^3.0.3:
 array-union@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  integrity sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=
   dependencies:
     array-uniq "^1.0.1"
 
+array-union@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
+  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
+
 array-uniq@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+  integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=
 
 array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
+  integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
 
 arrify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+  integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
 
 asap@^2.0.0, asap@~2.0.3, asap@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
   integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
 
-asn1.js@^4.0.0:
-  version "4.10.1"
-  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.10.1.tgz#b9c2bf5805f1e64aadeed6df3a2bfafb5a73f5a0"
+asn1.js@^5.2.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07"
+  integrity sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==
   dependencies:
     bn.js "^4.0.0"
     inherits "^2.0.1"
     minimalistic-assert "^1.0.0"
+    safer-buffer "^2.1.0"
 
 asn1@~0.2.3:
   version "0.2.4"
@@ -1999,6 +2574,7 @@ assert-plus@1.0.0, assert-plus@^1.0.0:
 assert@^1.1.1:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/assert/-/assert-1.5.0.tgz#55c109aaf6e0aefdb3dc4b71240c70bf574b18eb"
+  integrity sha512-EDsgawzwoun2CZkCgtxJbv392v4nbk9XDD06zI+kQYoBM/3RBWLlEyJARDOmhAAosBjWACEkKL6S+lIZtcAubA==
   dependencies:
     object-assign "^4.1.1"
     util "0.10.3"
@@ -2006,10 +2582,12 @@ assert@^1.1.1:
 assign-symbols@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
+  integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
 
 ast-types-flow@0.0.7, ast-types-flow@^0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
+  integrity sha1-9wtzXGvKGlycItmCw+Oef+ujva0=
 
 ast-types@0.9.6:
   version "0.9.6"
@@ -2019,18 +2597,27 @@ ast-types@0.9.6:
 astral-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
+  integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==
+
+astral-regex@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
+  integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
 
 async-each@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
+  integrity sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==
 
 async-foreach@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
+  integrity sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=
 
 async@^2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
+  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
   dependencies:
     lodash "^4.17.14"
 
@@ -2042,18 +2629,20 @@ asynckit@^0.4.0:
 atob@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
+  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-autoprefixer@^9.4.9:
-  version "9.7.3"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.7.3.tgz#fd42ed03f53de9beb4ca0d61fb4f7268a9bb50b4"
+autoprefixer@^9.4.9, autoprefixer@^9.8.6:
+  version "9.8.6"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
+  integrity sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==
   dependencies:
-    browserslist "^4.8.0"
-    caniuse-lite "^1.0.30001012"
-    chalk "^2.4.2"
+    browserslist "^4.12.0"
+    caniuse-lite "^1.0.30001109"
+    colorette "^1.2.1"
     normalize-range "^0.1.2"
     num2fraction "^1.2.2"
-    postcss "^7.0.23"
-    postcss-value-parser "^4.0.2"
+    postcss "^7.0.32"
+    postcss-value-parser "^4.1.0"
 
 aws-sign2@~0.7.0:
   version "0.7.0"
@@ -2061,26 +2650,26 @@ aws-sign2@~0.7.0:
   integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
 
 aws4@^1.8.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.10.0.tgz#a17b3a8ea811060e74d47d306122400ad4497ae2"
-  integrity sha512-3YDiu347mtVtjpyV3u5kVqQLP242c06zwDOgpeRnybmXlYYsLbtTrUBUm8i8srONt+FWobl5aibnU1030PeeuA==
+  version "1.10.1"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.10.1.tgz#e1e82e4f3e999e2cfd61b161280d16a111f86428"
+  integrity sha512-zg7Hz2k5lI8kb7U32998pRRFin7zJlkfezGJjUc2heaD4Pw2wObakCDVzkKztTm/Ln7eiVvYsjqak0Ed4LkMDA==
 
 axios@^0.19.0:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.1.tgz#8a6a04eed23dfe72747e1dd43c604b8f1677b5aa"
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
+  integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==
   dependencies:
     follow-redirects "1.5.10"
 
 axobject-query@^2.0.2:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.1.1.tgz#2a3b1271ec722d48a4cd4b3fcc20c853326a49a7"
-  dependencies:
-    "@babel/runtime" "^7.7.4"
-    "@babel/runtime-corejs3" "^7.7.4"
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
+  integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
 
 babel-code-frame@^6.22.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
+  integrity sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=
   dependencies:
     chalk "^1.1.3"
     esutils "^2.0.2"
@@ -2089,6 +2678,7 @@ babel-code-frame@^6.22.0:
 babel-eslint@10.0.1:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.0.1.tgz#919681dc099614cd7d31d45c8908695092a1faed"
+  integrity sha512-z7OT1iNV+TjOwHNLLyJk+HN+YVWX+CLE6fPD2SymJZOZQBs+QIexFjhm4keGTm8MW9xr4EC9Q0PbaLB24V5GoQ==
   dependencies:
     "@babel/code-frame" "^7.0.0"
     "@babel/parser" "^7.0.0"
@@ -2100,12 +2690,14 @@ babel-eslint@10.0.1:
 babel-extract-comments@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz#0a2aedf81417ed391b85e18b4614e693a0351a21"
+  integrity sha512-qWWzi4TlddohA91bFwgt6zO/J0X+io7Qp184Fw0m2JYRSTZnJbFR8+07KmzudHCZgOiKRCrjhylwv9Xd8gfhVQ==
   dependencies:
     babylon "^6.18.0"
 
 babel-jest@24.7.1:
   version "24.7.1"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.7.1.tgz#73902c9ff15a7dfbdc9994b0b17fcefd96042178"
+  integrity sha512-GPnLqfk8Mtt0i4OemjWkChi73A3ALs4w2/QbG64uAj8b5mmwzxc7jbJVRZt8NJkxi6FopVHog9S3xX6UJKb2qg==
   dependencies:
     "@jest/transform" "^24.7.1"
     "@jest/types" "^24.7.0"
@@ -2118,6 +2710,7 @@ babel-jest@24.7.1:
 babel-loader@8.0.5:
   version "8.0.5"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.5.tgz#225322d7509c2157655840bba52e46b6c2f2fe33"
+  integrity sha512-NTnHnVRd2JnRqPC0vW+iOQWU5pchDbYXsG2E6DMXEpMfUcQKclF9gmf3G3ZMhzG7IG9ji4coL0cm+FxeWxDpnw==
   dependencies:
     find-cache-dir "^2.0.0"
     loader-utils "^1.0.2"
@@ -2127,18 +2720,21 @@ babel-loader@8.0.5:
 babel-plugin-dynamic-import-node@2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.2.0.tgz#c0adfb07d95f4a4495e9aaac6ec386c4d7c2524e"
+  integrity sha512-fP899ELUnTaBcIzmrW7nniyqqdYWrWuJUyPWHxFa/c7r7hS6KC8FscNfLlBNIoPSc55kYMGEEKjPjJGCLbE1qA==
   dependencies:
     object.assign "^4.1.0"
 
-babel-plugin-dynamic-import-node@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.0.tgz#f00f507bdaa3c3e3ff6e7e5e98d90a7acab96f7f"
+babel-plugin-dynamic-import-node@^2.3.3:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz#84fda19c976ec5c6defef57f9427b3def66e17a3"
+  integrity sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==
   dependencies:
     object.assign "^4.1.0"
 
 babel-plugin-istanbul@^5.1.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz#df4ade83d897a92df069c4d9a25cf2671293c854"
+  integrity sha512-5LphC0USA8t4i1zCtjbbNb6jJj/9+X6P37Qfirc/70EQ34xKlMW+a1RHGwxGI+SwWpNwZ27HqvzAobeqaXwiZw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
     find-up "^3.0.0"
@@ -2148,28 +2744,33 @@ babel-plugin-istanbul@^5.1.0:
 babel-plugin-jest-hoist@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-24.9.0.tgz#4f837091eb407e01447c8843cbec546d0002d756"
+  integrity sha512-2EMA2P8Vp7lG0RAzr4HXqtYwacfMErOuv1U3wrvxHX6rD1sV6xS3WXG3r8TRQ2r6w8OhvSdWt+z41hQNwNm3Xw==
   dependencies:
     "@types/babel__traverse" "^7.0.6"
 
 babel-plugin-macros@2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.5.1.tgz#4a119ac2c2e19b458c259b9accd7ee34fd57ec6f"
+  integrity sha512-xN3KhAxPzsJ6OQTktCanNpIFnnMsCV+t8OloKxIL72D6+SUZYFn9qfklPgef5HyyDtzYZqqb+fs1S12+gQY82Q==
   dependencies:
     "@babel/runtime" "^7.4.2"
     cosmiconfig "^5.2.0"
     resolve "^1.10.0"
 
 babel-plugin-named-asset-import@^0.3.2:
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.5.tgz#d3fa1a7f1f4babd4ed0785b75e2f926df0d70d0d"
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.6.tgz#c9750a1b38d85112c9e166bf3ef7c5dbc605f4be"
+  integrity sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA==
 
 babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
+  integrity sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=
 
 babel-plugin-transform-object-rest-spread@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
+  integrity sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=
   dependencies:
     babel-plugin-syntax-object-rest-spread "^6.8.0"
     babel-runtime "^6.26.0"
@@ -2177,10 +2778,12 @@ babel-plugin-transform-object-rest-spread@^6.26.0:
 babel-plugin-transform-react-remove-prop-types@0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a"
+  integrity sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==
 
 babel-preset-jest@^24.6.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz#192b521e2217fb1d1f67cf73f70c336650ad3cdc"
+  integrity sha512-izTUuhE4TMfTRPF92fFwD2QfdXaZW08qvWTFCI51V8rW5x00UuPgc3ajRoWofXOuxjfcOM5zzSYsQS3H8KGCAg==
   dependencies:
     "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
     babel-plugin-jest-hoist "^24.9.0"
@@ -2188,6 +2791,7 @@ babel-preset-jest@^24.6.0:
 babel-preset-react-app@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-8.0.0.tgz#930b6e28cdcfdff97ddb8bef9226d504f244d326"
+  integrity sha512-6Dmj7e8l7eWE+R6sKKLRrGEQXMfcBqBYlphaAgT1ml8qT1NEP+CyTZyfjmgKGqHZfwH3RQCUOuP6y4mpGc7tgg==
   dependencies:
     "@babel/core" "7.4.3"
     "@babel/plugin-proposal-class-properties" "7.4.0"
@@ -2211,6 +2815,7 @@ babel-preset-react-app@^8.0.0:
 babel-runtime@^6.26.0, babel-runtime@^6.6.1:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
+  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
   dependencies:
     core-js "^2.4.0"
     regenerator-runtime "^0.11.0"
@@ -2218,6 +2823,12 @@ babel-runtime@^6.26.0, babel-runtime@^6.6.1:
 babylon@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
+  integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
+
+bail@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
+  integrity sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==
 
 balanced-match@^1.0.0:
   version "1.0.0"
@@ -2227,6 +2838,7 @@ balanced-match@^1.0.0:
 base16@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/base16/-/base16-1.0.0.tgz#e297f60d7ec1014a7a971a39ebc8a98c0b681e70"
+  integrity sha1-4pf2DX7BAUp6lxo568ipjAtoHnA=
 
 base62@^1.1.0:
   version "1.2.8"
@@ -2236,10 +2848,12 @@ base62@^1.1.0:
 base64-js@^1.0.2:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
+  integrity sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g==
 
 base@^0.11.1:
   version "0.11.2"
   resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
+  integrity sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==
   dependencies:
     cache-base "^1.0.1"
     class-utils "^0.3.5"
@@ -2252,6 +2866,7 @@ base@^0.11.1:
 batch@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
+  integrity sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=
 
 bcrypt-pbkdf@^1.0.0:
   version "1.0.2"
@@ -2263,6 +2878,7 @@ bcrypt-pbkdf@^1.0.0:
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
+  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
 
 bin-links@^1.1.2, bin-links@^1.1.8:
   version "1.1.8"
@@ -2279,16 +2895,24 @@ bin-links@^1.1.2, bin-links@^1.1.8:
 binary-extensions@^1.0.0:
   version "1.13.1"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
+  integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==
+
+binary-extensions@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9"
+  integrity sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==
 
 bindings@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.5.0.tgz#10353c9e945334bc0511a6d90b38fbc7c9c504df"
+  integrity sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==
   dependencies:
     file-uri-to-path "1.0.0"
 
 block-stream@*:
   version "0.0.9"
   resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+  integrity sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=
   dependencies:
     inherits "~2.0.0"
 
@@ -2297,13 +2921,20 @@ bluebird@^3.5.1, bluebird@^3.5.3, bluebird@^3.5.5:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
-bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
-  version "4.11.8"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
+bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.4.0:
+  version "4.11.9"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.9.tgz#26d556829458f9d1e81fc48952493d0ba3507828"
+  integrity sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==
+
+bn.js@^5.1.1:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.1.3.tgz#beca005408f642ebebea80b042b4d18d2ac0ee6b"
+  integrity sha512-GkTiFpjFtUzU9CbMeJ5iazkCzGL3jrhzerzZIuqLABjbwRaFt33I9tUdSNryIptM+RxDet6OKm2WnLXzW51KsQ==
 
 body-parser@1.19.0:
   version "1.19.0"
   resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
+  integrity sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==
   dependencies:
     bytes "3.1.0"
     content-type "~1.0.4"
@@ -2319,6 +2950,7 @@ body-parser@1.19.0:
 bonjour@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"
+  integrity sha1-jokKGD2O6aI5OzhExpGkK897yfU=
   dependencies:
     array-flatten "^2.1.0"
     deep-equal "^1.0.1"
@@ -2330,6 +2962,7 @@ bonjour@^3.5.0:
 boolbase@^1.0.0, boolbase@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+  integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
 boxen@^1.2.1:
   version "1.3.0"
@@ -2355,6 +2988,7 @@ brace-expansion@^1.1.7:
 braces@^2.3.1, braces@^2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
+  integrity sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==
   dependencies:
     arr-flatten "^1.1.0"
     array-unique "^0.3.2"
@@ -2367,13 +3001,22 @@ braces@^2.3.1, braces@^2.3.2:
     split-string "^3.0.2"
     to-regex "^3.0.1"
 
+braces@^3.0.1, braces@~3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
 brorand@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
+  integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
 
 browserify-aes@^1.0.0, browserify-aes@^1.0.4:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48"
+  integrity sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==
   dependencies:
     buffer-xor "^1.0.3"
     cipher-base "^1.0.0"
@@ -2385,6 +3028,7 @@ browserify-aes@^1.0.0, browserify-aes@^1.0.4:
 browserify-cipher@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.1.tgz#8d6474c1b870bfdabcd3bcfcc1934a10e94f15f0"
+  integrity sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==
   dependencies:
     browserify-aes "^1.0.4"
     browserify-des "^1.0.0"
@@ -2393,56 +3037,66 @@ browserify-cipher@^1.0.0:
 browserify-des@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.2.tgz#3af4f1f59839403572f1c66204375f7a7f703e9c"
+  integrity sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==
   dependencies:
     cipher-base "^1.0.1"
     des.js "^1.0.0"
     inherits "^2.0.1"
     safe-buffer "^5.1.2"
 
-browserify-rsa@^4.0.0:
+browserify-rsa@^4.0.0, browserify-rsa@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.0.1.tgz#21e0abfaf6f2029cf2fafb133567a701d4135524"
+  integrity sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=
   dependencies:
     bn.js "^4.1.0"
     randombytes "^2.0.1"
 
 browserify-sign@^4.0.0:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.0.4.tgz#aa4eb68e5d7b658baa6bf6a57e630cbd7a93d298"
-  dependencies:
-    bn.js "^4.1.1"
-    browserify-rsa "^4.0.0"
-    create-hash "^1.1.0"
-    create-hmac "^1.1.2"
-    elliptic "^6.0.0"
-    inherits "^2.0.1"
-    parse-asn1 "^5.0.0"
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.1.tgz#eaf4add46dd54be3bb3b36c0cf15abbeba7956c3"
+  integrity sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==
+  dependencies:
+    bn.js "^5.1.1"
+    browserify-rsa "^4.0.1"
+    create-hash "^1.2.0"
+    create-hmac "^1.1.7"
+    elliptic "^6.5.3"
+    inherits "^2.0.4"
+    parse-asn1 "^5.1.5"
+    readable-stream "^3.6.0"
+    safe-buffer "^5.2.0"
 
 browserify-zlib@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
+  integrity sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==
   dependencies:
     pako "~1.0.5"
 
 browserslist@4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.7.0.tgz#9ee89225ffc07db03409f2fee524dc8227458a17"
+  integrity sha512-9rGNDtnj+HaahxiVV38Gn8n8Lr8REKsel68v1sPFfIGEK6uSXTY3h9acgiT1dZVtOOUtifo/Dn8daDQ5dUgVsA==
   dependencies:
     caniuse-lite "^1.0.30000989"
     electron-to-chromium "^1.3.247"
     node-releases "^1.1.29"
 
-browserslist@^4.0.0, browserslist@^4.1.1, browserslist@^4.4.2, browserslist@^4.5.2, browserslist@^4.6.0, browserslist@^4.8.0, browserslist@^4.8.3:
-  version "4.8.3"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.8.3.tgz#65802fcd77177c878e015f0e3189f2c4f627ba44"
+browserslist@^4.0.0, browserslist@^4.1.1, browserslist@^4.12.0, browserslist@^4.4.2, browserslist@^4.5.2, browserslist@^4.8.5:
+  version "4.14.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.1.tgz#cb2b490ba881d45dc3039078c7ed04411eaf3fa3"
+  integrity sha512-zyBTIHydW37pnb63c7fHFXUG6EcqWOqoMdDx6cdyaDFriZ20EoVxcE95S54N+heRqY8m8IUgB5zYta/gCwSaaA==
   dependencies:
-    caniuse-lite "^1.0.30001017"
-    electron-to-chromium "^1.3.322"
-    node-releases "^1.1.44"
+    caniuse-lite "^1.0.30001124"
+    electron-to-chromium "^1.3.562"
+    escalade "^3.0.2"
+    node-releases "^1.1.60"
 
 bser@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
+  integrity sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==
   dependencies:
     node-int64 "^0.4.0"
 
@@ -2454,14 +3108,17 @@ buffer-from@^1.0.0:
 buffer-indexof@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c"
+  integrity sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==
 
 buffer-xor@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
+  integrity sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=
 
 buffer@^4.3.0:
   version "4.9.2"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.2.tgz#230ead344002988644841ab0244af8c44bbe3ef8"
+  integrity sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==
   dependencies:
     base64-js "^1.0.2"
     ieee754 "^1.1.4"
@@ -2470,6 +3127,7 @@ buffer@^4.3.0:
 builtin-status-codes@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
+  integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
 
 builtins@^1.0.3:
   version "1.0.3"
@@ -2489,14 +3147,17 @@ byte-size@^5.0.1:
 bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
+  integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
 
 bytes@3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
+  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
 
 cacache@^11.0.2:
   version "11.3.3"
   resolved "https://registry.yarnpkg.com/cacache/-/cacache-11.3.3.tgz#8bd29df8c6a718a6ebd2d010da4d7972ae3bbadc"
+  integrity sha512-p8WcneCytvzPxhDvYp31PD039vi77I12W+/KfR9S8AZbaiARFBCpsPJS+9uhWfeBfeAtW7o/4vt3MUqLkbY6nA==
   dependencies:
     bluebird "^3.5.5"
     chownr "^1.1.1"
@@ -2537,6 +3198,7 @@ cacache@^12.0.0, cacache@^12.0.2, cacache@^12.0.3:
 cache-base@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
+  integrity sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==
   dependencies:
     collection-visit "^1.0.0"
     component-emitter "^1.2.1"
@@ -2556,30 +3218,36 @@ call-limit@^1.1.1:
 call-me-maybe@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.1.tgz#26d208ea89e37b5cbde60250a15f031c16a4d66b"
+  integrity sha1-JtII6onje1y95gJQoV8DHBak1ms=
 
 caller-callsite@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134"
+  integrity sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=
   dependencies:
     callsites "^2.0.0"
 
 caller-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-2.0.0.tgz#468f83044e369ab2010fac5f06ceee15bb2cb1f4"
+  integrity sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=
   dependencies:
     caller-callsite "^2.0.0"
 
 callsites@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
+  integrity sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=
 
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
 camel-case@3.0.x:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
+  integrity sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=
   dependencies:
     no-case "^2.2.0"
     upper-case "^1.1.1"
@@ -2587,17 +3255,24 @@ camel-case@3.0.x:
 camelcase-keys@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
+  integrity sha1-MIvur/3ygRkFHvodkyITyRuPkuc=
   dependencies:
     camelcase "^2.0.0"
     map-obj "^1.0.0"
 
+camelcase-keys@^6.2.2:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-6.2.2.tgz#5e755d6ba51aa223ec7d3d52f25778210f9dc3c0"
+  integrity sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==
+  dependencies:
+    camelcase "^5.3.1"
+    map-obj "^4.0.0"
+    quick-lru "^4.0.1"
+
 camelcase@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
-
-camelcase@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
+  integrity sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=
 
 camelcase@^4.0.0, camelcase@^4.1.0:
   version "4.1.0"
@@ -2612,19 +3287,22 @@ camelcase@^5.0.0, camelcase@^5.2.0, camelcase@^5.3.1:
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
+  integrity sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==
   dependencies:
     browserslist "^4.0.0"
     caniuse-lite "^1.0.0"
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000939, caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30001012, caniuse-lite@^1.0.30001017:
-  version "1.0.30001019"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001019.tgz#857e3fccaad2b2feb3f1f6d8a8f62d747ea648e1"
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000939, caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001124:
+  version "1.0.30001125"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001125.tgz#2a1a51ee045a0a2207474b086f628c34725e997b"
+  integrity sha512-9f+r7BW8Qli917mU3j0fUaTweT3f3vnX/Lcs+1C73V+RADmFme+Ih0Br8vONQi3X0lseOe6ZHfsZLCA8MSjxUA==
 
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
+  integrity sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==
   dependencies:
     rsvp "^4.8.4"
 
@@ -2636,12 +3314,18 @@ capture-stack-trace@^1.0.0:
 case-sensitive-paths-webpack-plugin@2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.2.0.tgz#3371ef6365ef9c25fa4b81c16ace0e9c7dc58c3e"
+  integrity sha512-u5ElzokS8A1pm9vM3/iDgTcI3xqHxuCao94Oz8etI3cf0Tio0p8izkDYbTIn09uP3yUUr6+veaE6IkjnTYS46g==
 
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
+ccount@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.0.5.tgz#ac82a944905a65ce204eb03023157edf29425c17"
+  integrity sha512-MOli1W+nfbPLlKEhInaxhRdp7KVLFxLN5ykwzHgLsLI3H3gs5jjFAK4Eoj3OzzcxCtumDaI8onoVDeQyWaNTkw==
+
 chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -2654,6 +3338,7 @@ chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.
 chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
   dependencies:
     ansi-styles "^2.2.1"
     escape-string-regexp "^1.0.2"
@@ -2661,13 +3346,43 @@ chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
+chalk@^4.0.0, chalk@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
+  integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+character-entities-html4@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-1.1.4.tgz#0e64b0a3753ddbf1fdc044c5fd01d0199a02e125"
+  integrity sha512-HRcDxZuZqMx3/a+qrzxdBKBPUpxWEq9xw2OPZ3a/174ihfrQKVsFhqtthBInFy1zZ9GgZyFXOatNujm8M+El3g==
+
+character-entities-legacy@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
+  integrity sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==
+
+character-entities@^1.0.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
+  integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
+
+character-reference-invalid@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
+  integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
+
 chardet@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
+  integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
-chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.0.4:
+chokidar@^2.0.0, chokidar@^2.0.4, chokidar@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
+  integrity sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==
   dependencies:
     anymatch "^2.0.0"
     async-each "^1.0.1"
@@ -2683,6 +3398,21 @@ chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.0.4:
   optionalDependencies:
     fsevents "^1.2.7"
 
+chokidar@^3.4.1:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.2.tgz#38dc8e658dec3809741eb3ef7bb0a47fe424232d"
+  integrity sha512-IZHaDeBeI+sZJRX7lGcXsdzgvZqKv6sECqsbErJA4mHWfpRrD8B97kSFN4cQz6nGBGiuFia1MKR4d6c1o8Cv7A==
+  dependencies:
+    anymatch "~3.1.1"
+    braces "~3.0.2"
+    glob-parent "~5.1.0"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.4.0"
+  optionalDependencies:
+    fsevents "~2.1.2"
+
 chownr@^1.1.1, chownr@^1.1.2, chownr@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
@@ -2691,6 +3421,7 @@ chownr@^1.1.1, chownr@^1.1.2, chownr@^1.1.4:
 chrome-trace-event@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4"
+  integrity sha512-9e/zx1jw7B4CO+c/RXoCsfg/x1AfUBioy4owYH0bJprEYAx5hRFLRhWBqHAG57D0ZM4H7vxbP7bPe0VwhQRYDQ==
   dependencies:
     tslib "^1.9.0"
 
@@ -2714,6 +3445,7 @@ cidr-regex@^2.0.10:
 cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
+  integrity sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==
   dependencies:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
@@ -2721,6 +3453,7 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
 class-utils@^0.3.5:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
+  integrity sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==
   dependencies:
     arr-union "^3.1.0"
     define-property "^0.2.5"
@@ -2728,8 +3461,9 @@ class-utils@^0.3.5:
     static-extend "^0.1.1"
 
 clean-css@4.2.x:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
+  integrity sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==
   dependencies:
     source-map "~0.6.0"
 
@@ -2749,6 +3483,7 @@ cli-columns@^3.1.2:
 cli-cursor@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
+  integrity sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=
   dependencies:
     restore-cursor "^2.0.0"
 
@@ -2763,8 +3498,9 @@ cli-table3@^0.5.0, cli-table3@^0.5.1:
     colors "^1.1.2"
 
 cli-width@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.1.tgz#b0433d0b4e9c847ef18868a4ef16fd5fc8271c48"
+  integrity sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==
 
 cliui@^3.2.0:
   version "3.2.0"
@@ -2778,6 +3514,7 @@ cliui@^3.2.0:
 cliui@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.1.0.tgz#348422dbe82d800b3022eef4f6ac10bf2e4d1b49"
+  integrity sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==
   dependencies:
     string-width "^2.1.1"
     strip-ansi "^4.0.0"
@@ -2795,6 +3532,7 @@ cliui@^5.0.0:
 clone-deep@^0.2.4:
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-0.2.4.tgz#4e73dd09e9fb971cc38670c5dced9c1896481cc6"
+  integrity sha1-TnPdCen7lxzDhnDF3O2cGJZIHMY=
   dependencies:
     for-own "^0.1.3"
     is-plain-object "^2.0.1"
@@ -2805,12 +3543,20 @@ clone-deep@^0.2.4:
 clone-deep@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-2.0.2.tgz#00db3a1e173656730d1188c3d6aced6d7ea97713"
+  integrity sha512-SZegPTKjCgpQH63E+eN6mVEEPdQBOUzjyJm5Pora4lrwWRFS8I0QAxV/KD6vV/i0WuijHZWQC1fMsPEdxfdVCQ==
   dependencies:
     for-own "^1.0.0"
     is-plain-object "^2.0.4"
     kind-of "^6.0.0"
     shallow-clone "^1.0.0"
 
+clone-regexp@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/clone-regexp/-/clone-regexp-2.2.0.tgz#7d65e00885cd8796405c35a737e7a86b7429e36f"
+  integrity sha512-beMpP7BOtTipFuW8hrJvREQ2DrRu3BE7by0ZpibtfBA+qfHYvMGTc2Yb1JMYPKg/JUw0CHYvpg796aNTSW9z7Q==
+  dependencies:
+    is-regexp "^2.0.0"
+
 clone@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
@@ -2827,6 +3573,7 @@ cmd-shim@^3.0.0, cmd-shim@^3.0.3:
 coa@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"
+  integrity sha512-q5/jG+YQnSy4nRTV4F7lPepBJZ8qBNJJDBuJdoejDyLXgmL7IEo+Le2JDZudFTFt7mrCqIRaSjws4ygRCTCAXA==
   dependencies:
     "@types/q" "^1.5.1"
     chalk "^2.4.1"
@@ -2837,9 +3584,15 @@ code-point-at@^1.0.0:
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
   integrity sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=
 
+collapse-white-space@^1.0.2:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.6.tgz#e63629c0016665792060dbbeb79c42239d2c5287"
+  integrity sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==
+
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
+  integrity sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=
   dependencies:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
@@ -2851,18 +3604,27 @@ color-convert@^1.9.0, color-convert@^1.9.1:
   dependencies:
     color-name "1.1.3"
 
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
 color-name@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@^1.0.0:
+color-name@^1.0.0, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
 color-string@^1.5.2:
   version "1.5.3"
   resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.3.tgz#c9bbc5f01b58b5492f3d6857459cb6590ce204cc"
+  integrity sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==
   dependencies:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
@@ -2870,10 +3632,16 @@ color-string@^1.5.2:
 color@^3.0.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10"
+  integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==
   dependencies:
     color-convert "^1.9.1"
     color-string "^1.5.2"
 
+colorette@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
+  integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==
+
 colors@^1.1.2:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
@@ -2897,22 +3665,27 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
 commander@2, commander@^2.11.0, commander@^2.19.0, commander@^2.20.0, commander@^2.5.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
 commander@2.17.x:
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
+  integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
 
 commander@~2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
+  integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
 
 common-tags@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
+  integrity sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw==
 
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+  integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
 
 commoner@^0.10.1:
   version "0.10.8"
@@ -2932,16 +3705,19 @@ commoner@^0.10.1:
 component-emitter@^1.2.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
+  integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
 
 compressible@~2.0.16:
   version "2.0.18"
   resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
+  integrity sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==
   dependencies:
     mime-db ">= 1.43.0 < 2"
 
 compression@^1.5.2:
   version "1.7.4"
   resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.4.tgz#95523eff170ca57c29a0ca41e6fe131f41e5bb8f"
+  integrity sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==
   dependencies:
     accepts "~1.3.5"
     bytes "3.0.0"
@@ -2967,9 +3743,9 @@ concat-stream@^1.5.0:
     typedarray "^0.0.6"
 
 concurrently@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-5.2.0.tgz#ead55121d08a0fc817085584c123cedec2e08975"
-  integrity sha512-XxcDbQ4/43d6CxR7+iV8IZXhur4KbmEJk1CetVMUqCy34z9l0DkszbY+/9wvmSnToTej0SYomc2WSRH+L0zVJw==
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-5.3.0.tgz#7500de6410d043c912b2da27de3202cb489b1e7b"
+  integrity sha512-8MhqOB6PWlBfA2vJ8a0bSFKATOdWlHiQlk11IfmQBPaHVP8oP2gsh2MObE6UR3hqDHqvaIvLTyceNW6obVuFHQ==
   dependencies:
     chalk "^2.4.2"
     date-fns "^2.0.1"
@@ -2990,11 +3766,11 @@ config-chain@^1.1.12:
     proto-list "~1.2.1"
 
 configstore@^3.0.0:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.2.tgz#c6f25defaeef26df12dd33414b001fe81a543f8f"
-  integrity sha512-vtv5HtGjcYUgFrXc6Kx747B83MRRVS5R1VTEQoXvuP+kMI+if6uywV0nDGoiydJRy4yk7h9od5Og0kxx4zUXmw==
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/configstore/-/configstore-3.1.5.tgz#e9af331fadc14dabd544d3e7e76dc446a09a530f"
+  integrity sha512-nlOhI4+fdzoK5xmJ+NY+1gZK56bwEaWZr8fYuXohZ9Vkc1o3a4T/R3M+yE/w7x/ZVJ1zF8c+oaOvF0dztdUgmA==
   dependencies:
-    dot-prop "^4.1.0"
+    dot-prop "^4.2.1"
     graceful-fs "^4.1.2"
     make-dir "^1.0.0"
     unique-string "^1.0.0"
@@ -3004,14 +3780,17 @@ configstore@^3.0.0:
 confusing-browser-globals@^1.0.7:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.9.tgz#72bc13b483c0276801681871d4898516f8f54fdd"
+  integrity sha512-KbS1Y0jMtyPgIxjO7ZzMAuUpAKMt1SzCL9fsrKsX6b0zJPTaT0SiSPmewwVZg9UAO83HVIlEhZF84LIjZ0lmAw==
 
 connect-history-api-fallback@^1.3.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
+  integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==
 
 console-browserify@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
+  integrity sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==
 
 console-control-strings@^1.0.0, console-control-strings@^1.1.0, console-control-strings@~1.1.0:
   version "1.1.0"
@@ -3021,34 +3800,41 @@ console-control-strings@^1.0.0, console-control-strings@^1.1.0, console-control-
 constants-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
+  integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
 
 contains-path@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
+  integrity sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=
 
 content-disposition@0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
+  integrity sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==
   dependencies:
     safe-buffer "5.1.2"
 
 content-type@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
+  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
 convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
+  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
   dependencies:
     safe-buffer "~5.1.1"
 
 cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+  integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
 
 cookie@0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
+  integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
 
 copy-concurrently@^1.0.0:
   version "1.0.5"
@@ -3065,35 +3851,37 @@ copy-concurrently@^1.0.0:
 copy-descriptor@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
+  integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
 copy-to-clipboard@^3.0.8:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.2.0.tgz#d2724a3ccbfed89706fac8a894872c979ac74467"
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
   dependencies:
     toggle-selection "^1.0.6"
 
-core-js-compat@^3.0.0, core-js-compat@^3.6.0:
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.2.tgz#314ca8b84d5e71c27c19f1ecda966501b1cf1f10"
+core-js-compat@^3.0.0, core-js-compat@^3.6.2:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.5.tgz#2a51d9a4e25dfd6e690251aa81f99e3c05481f1c"
+  integrity sha512-7ItTKOhOZbznhXAQ2g/slGg1PJV5zDO/WdkTwi7UEOJmkvsE32PWvx6mKtDjiMpjnR2CNf6BAD6sSxIlv7ptng==
   dependencies:
-    browserslist "^4.8.3"
+    browserslist "^4.8.5"
     semver "7.0.0"
 
-core-js-pure@^3.0.0:
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.2.tgz#81f08059134d1c7318838024e1b8e866bcb1ddb3"
-
 core-js@^1.0.0:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+  integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
 
 core-js@^2.4.0:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
+  integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
 
-core-js@^3.4.1:
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.2.tgz#2799ea1a59050f0acf50dfe89b916d6503b16caa"
+core-js@^3.5.0:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
+  integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
 
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
@@ -3103,18 +3891,31 @@ core-util-is@1.0.2, core-util-is@~1.0.0:
 cosmiconfig@^5.0.0, cosmiconfig@^5.2.0, cosmiconfig@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
+  integrity sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==
   dependencies:
     import-fresh "^2.0.0"
     is-directory "^0.3.1"
     js-yaml "^3.13.1"
     parse-json "^4.0.0"
 
+cosmiconfig@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.0.tgz#ef9b44d773959cae63ddecd122de23853b60f8d3"
+  integrity sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
 create-ecdh@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff"
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
+  integrity sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==
   dependencies:
     bn.js "^4.1.0"
-    elliptic "^6.0.0"
+    elliptic "^6.5.3"
 
 create-error-class@^3.0.0:
   version "3.0.2"
@@ -3123,9 +3924,10 @@ create-error-class@^3.0.0:
   dependencies:
     capture-stack-trace "^1.0.0"
 
-create-hash@^1.1.0, create-hash@^1.1.2:
+create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
+  integrity sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==
   dependencies:
     cipher-base "^1.0.1"
     inherits "^2.0.1"
@@ -3133,9 +3935,10 @@ create-hash@^1.1.0, create-hash@^1.1.2:
     ripemd160 "^2.0.1"
     sha.js "^2.4.0"
 
-create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
+create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.7.tgz#69170c78b3ab957147b2b8b04572e47ead2243ff"
+  integrity sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==
   dependencies:
     cipher-base "^1.0.3"
     create-hash "^1.1.0"
@@ -3147,6 +3950,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
 create-react-class@^15.5.1:
   version "15.6.3"
   resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
+  integrity sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==
   dependencies:
     fbjs "^0.8.9"
     loose-envify "^1.3.1"
@@ -3155,6 +3959,7 @@ create-react-class@^15.5.1:
 cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
+  integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
   dependencies:
     nice-try "^1.0.4"
     path-key "^2.0.1"
@@ -3165,6 +3970,7 @@ cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5:
 cross-spawn@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982"
+  integrity sha1-ElYDfsufDF9549bvE14wdwGEuYI=
   dependencies:
     lru-cache "^4.0.1"
     which "^1.2.9"
@@ -3181,6 +3987,7 @@ cross-spawn@^5.0.1:
 crypto-browserify@^3.11.0:
   version "3.12.0"
   resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
+  integrity sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==
   dependencies:
     browserify-cipher "^1.0.0"
     browserify-sign "^4.0.0"
@@ -3202,16 +4009,19 @@ crypto-random-string@^1.0.0:
 css-blank-pseudo@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz#dfdefd3254bf8a82027993674ccf35483bfcb3c5"
+  integrity sha512-LHz35Hr83dnFeipc7oqFDmsjHdljj3TQtxGGiNWSOsTLIAubSm4TEz8qCaKFpk7idaQ1GfWscF4E6mgpBysA1w==
   dependencies:
     postcss "^7.0.5"
 
 css-color-names@0.0.4, css-color-names@^0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
+  integrity sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=
 
 css-declaration-sorter@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-4.0.1.tgz#c198940f63a76d7e36c1e71018b001721054cb22"
+  integrity sha512-BcxQSKTSEEQUftYpBVnsH4SF05NTuBokb19/sBt6asXGKZ/6VP7PLG1CBCkFDYOnhXhPh0jMhO6xZ71oYHXHBA==
   dependencies:
     postcss "^7.0.1"
     timsort "^0.3.0"
@@ -3219,6 +4029,7 @@ css-declaration-sorter@^4.0.1:
 css-has-pseudo@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/css-has-pseudo/-/css-has-pseudo-0.10.0.tgz#3c642ab34ca242c59c41a125df9105841f6966ee"
+  integrity sha512-Z8hnfsZu4o/kt+AuFzeGpLVhFOGO9mluyHBaA2bA8aCGTwah5sT3WV/fTHH8UNZUytOIImuGPrl/prlb4oX4qQ==
   dependencies:
     postcss "^7.0.6"
     postcss-selector-parser "^5.0.0-rc.4"
@@ -3226,6 +4037,7 @@ css-has-pseudo@^0.10.0:
 css-loader@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-2.1.1.tgz#d8254f72e412bb2238bb44dd674ffbef497333ea"
+  integrity sha512-OcKJU/lt232vl1P9EEDamhoO9iKY3tIjY5GU+XDLblAykTdgs6Ux9P1hTHve8nFKy5KPpOXOsVI/hIwi3841+w==
   dependencies:
     camelcase "^5.2.0"
     icss-utils "^4.1.0"
@@ -3242,16 +4054,19 @@ css-loader@2.1.1:
 css-prefers-color-scheme@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz#6f830a2714199d4f0d0d0bb8a27916ed65cff1f4"
+  integrity sha512-MTu6+tMs9S3EUqzmqLXEcgNRbNkkD/TGFvowpeoWJn5Vfq7FMgsmRQs9X5NXAURiOBmOxm/lLjsDNXDE6k9bhg==
   dependencies:
     postcss "^7.0.5"
 
 css-select-base-adapter@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz#3b2ff4972cc362ab88561507a95408a1432135d7"
+  integrity sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==
 
 css-select@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
+  integrity sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=
   dependencies:
     boolbase "~1.0.0"
     css-what "2.1"
@@ -3261,6 +4076,7 @@ css-select@^1.1.0:
 css-select@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.1.0.tgz#6a34653356635934a81baca68d0255432105dbef"
+  integrity sha512-Dqk7LQKpwLoH3VovzZnkzegqNSuAziQyNZUcrdDM401iY+R5NkGBXGmtO05/yaXQziALuPogeG0b7UAgjnTJTQ==
   dependencies:
     boolbase "^1.0.0"
     css-what "^3.2.1"
@@ -3270,37 +4086,48 @@ css-select@^2.0.0:
 css-tree@1.0.0-alpha.37:
   version "1.0.0-alpha.37"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
+  integrity sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==
   dependencies:
     mdn-data "2.0.4"
     source-map "^0.6.1"
 
-css-unit-converter@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996"
+css-tree@1.0.0-alpha.39:
+  version "1.0.0-alpha.39"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.39.tgz#2bff3ffe1bb3f776cf7eefd91ee5cba77a149eeb"
+  integrity sha512-7UvkEYgBAHRG9Nt980lYxjsTrCyHFN53ky3wVsDkiMdVqylqRt+Zc+jm5qw7/qyOvN2dHSYtX0e4MbCCExSvnA==
+  dependencies:
+    mdn-data "2.0.6"
+    source-map "^0.6.1"
 
 css-what@2.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
+  integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
 
 css-what@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.2.1.tgz#f4a8f12421064621b456755e34a03a2c22df5da1"
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.3.0.tgz#10fec696a9ece2e591ac772d759aacabac38cd39"
+  integrity sha512-pv9JPyatiPaQ6pf4OvD/dbfm0o5LviWmwxNWzblYf/1u9QZd0ihV+PMwy5jdQWQ3349kZmKEx9WXuSka2dM4cg==
 
 cssdb@^4.3.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.4.0.tgz#3bf2f2a68c10f5c6a08abd92378331ee803cddb0"
+  integrity sha512-LsTAR1JPEM9TpGhl/0p3nQecC2LJ0kD8X5YARu1hk/9I1gril5vDtMZyNxcEpxxDj34YNck/ucjuoUd66K03oQ==
 
 cssesc@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-2.0.0.tgz#3b13bd1bb1cb36e1bcb5a4dcd27f54c5dcb35703"
+  integrity sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==
 
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
 cssnano-preset-default@^4.0.7:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz#51ec662ccfca0f88b396dcd9679cdb931be17f76"
+  integrity sha512-x0YHHx2h6p0fCl1zY9L9roD7rnlltugGu7zXSKQx6k2rYw0Hi3IqxcoAGF7u9Q5w1nt7vK0ulxV8Lo+EvllGsA==
   dependencies:
     css-declaration-sorter "^4.0.1"
     cssnano-util-raw-cache "^4.0.1"
@@ -3336,24 +4163,29 @@ cssnano-preset-default@^4.0.7:
 cssnano-util-get-arguments@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0.tgz#ed3a08299f21d75741b20f3b81f194ed49cc150f"
+  integrity sha1-7ToIKZ8h11dBsg87gfGU7UnMFQ8=
 
 cssnano-util-get-match@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/cssnano-util-get-match/-/cssnano-util-get-match-4.0.0.tgz#c0e4ca07f5386bb17ec5e52250b4f5961365156d"
+  integrity sha1-wOTKB/U4a7F+xeUiULT1lhNlFW0=
 
 cssnano-util-raw-cache@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/cssnano-util-raw-cache/-/cssnano-util-raw-cache-4.0.1.tgz#b26d5fd5f72a11dfe7a7846fb4c67260f96bf282"
+  integrity sha512-qLuYtWK2b2Dy55I8ZX3ky1Z16WYsx544Q0UWViebptpwn/xDBmog2TLg4f+DBMg1rJ6JDWtn96WHbOKDWt1WQA==
   dependencies:
     postcss "^7.0.0"
 
 cssnano-util-same-parent@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz#574082fb2859d2db433855835d9a8456ea18bbf3"
+  integrity sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==
 
 cssnano@^4.1.0:
   version "4.1.10"
   resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.10.tgz#0ac41f0b13d13d465487e111b778d42da631b8b2"
+  integrity sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ==
   dependencies:
     cosmiconfig "^5.0.0"
     cssnano-preset-default "^4.0.7"
@@ -3361,18 +4193,26 @@ cssnano@^4.1.0:
     postcss "^7.0.0"
 
 csso@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/csso/-/csso-4.0.2.tgz#e5f81ab3a56b8eefb7f0092ce7279329f454de3d"
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-4.0.3.tgz#0d9985dc852c7cc2b2cacfbbe1079014d1a8e903"
+  integrity sha512-NL3spysxUkcrOgnpsT4Xdl2aiEiBG6bXswAABQVHcMrfjjBisFOKwLDOmf4wf32aPdcJws1zds2B0Rg+jqMyHQ==
   dependencies:
-    css-tree "1.0.0-alpha.37"
+    css-tree "1.0.0-alpha.39"
 
 csstype@^2.2.0:
-  version "2.6.8"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.8.tgz#0fb6fc2417ffd2816a418c9336da74d7f07db431"
+  version "2.6.13"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.13.tgz#a6893015b90e84dd6e85d0e3b442a1e84f2dbe0f"
+  integrity sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A==
+
+csstype@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.3.tgz#2b410bbeba38ba9633353aff34b05d9755d065f8"
+  integrity sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag==
 
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
+  integrity sha1-mI3zP+qxke95mmE2nddsF635V+o=
   dependencies:
     array-find-index "^1.0.1"
 
@@ -3392,9 +4232,9 @@ d3-axis@1, d3-axis@^1.0.8:
   integrity sha512-ejINPfPSNdGFKEOAtnBtdkpr24c4d4jsei6Lg98mxf424ivoDP2956/5HDpIAtmHo85lqT4pruy+zEgvRUBqaQ==
 
 d3-brush@1, d3-brush@^1.0.4:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-1.1.5.tgz#066b8e84d17b192986030446c97c0fba7e1bacdc"
-  integrity sha512-rEaJ5gHlgLxXugWjIkolTA0OyMvw8UWU1imYXy1v642XyyswmI1ybKOv05Ft+ewq+TFmdliD3VuK0pRp1VT/5A==
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-1.1.6.tgz#b0a22c7372cabec128bdddf9bddc058592f89e9b"
+  integrity sha512-7RW+w7HfMCPyZLifTz/UnJmI5kdkXtpCbombUSs8xniAyo0vIbrDzDwUJB6eJOgl9u5DQOt2TQlYumxzD1SvYA==
   dependencies:
     d3-dispatch "1"
     d3-drag "1"
@@ -3450,9 +4290,9 @@ d3-dsv@1:
     rw "1"
 
 d3-ease@1:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.6.tgz#ebdb6da22dfac0a22222f2d4da06f66c416a0ec0"
-  integrity sha512-SZ/lVU7LRXafqp7XtIcBdxnWl8yyLpgOmzAk0mWBI9gXNzLDx5ybZgnRbH9dN/yY5tzVBqCQ9avltSnqVwessQ==
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.7.tgz#9a834890ef8b8ae8c558b2fe55bd57f5993b85e2"
+  integrity sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ==
 
 d3-fetch@1:
   version "1.2.0"
@@ -3472,9 +4312,9 @@ d3-force@1:
     d3-timer "1"
 
 d3-format@1:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.4.tgz#356925f28d0fd7c7983bfad593726fce46844030"
-  integrity sha512-TWks25e7t8/cqctxCmxpUuzZN11QxIA7YrMbram94zMQ0PXjE4LVIMe/f6a4+xxL8HQ3OsAFULOINQi1pE62Aw==
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.5.tgz#374f2ba1320e3717eb74a9356c67daee17a7edb4"
+  integrity sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==
 
 d3-geo@1:
   version "1.12.1"
@@ -3536,9 +4376,9 @@ d3-scale@2, d3-scale@^2.1.0:
     d3-time-format "2"
 
 d3-selection@1, d3-selection@^1.1.0, d3-selection@^1.3.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.1.tgz#98eedbbe085fbda5bafa2f9e3f3a2f4d7d622a98"
-  integrity sha512-BTIbRjv/m5rcVTfBs4AMBLKs4x8XaaLkwm28KWu9S2vKNqXkXt2AH2Qf0sdPZHjFxcWg/YL53zcqAz+3g4/7PA==
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.2.tgz#dcaa49522c0dbf32d6c1858afc26b6094555bc5c"
+  integrity sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==
 
 d3-shape@1, d3-shape@^1.2.0:
   version "1.3.7"
@@ -3548,9 +4388,9 @@ d3-shape@1, d3-shape@^1.2.0:
     d3-path "1"
 
 d3-time-format@2:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.2.3.tgz#0c9a12ee28342b2037e5ea1cf0b9eb4dd75f29cb"
-  integrity sha512-RAHNnD8+XvC4Zc4d2A56Uw0yJoM7bsvOlJR33bclxq399Rak/b9bhvu/InjxdWhPtkgU53JJcleJTGkNRnN6IA==
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.3.0.tgz#107bdc028667788a8924ba040faf1fbccd5a7850"
+  integrity sha512-guv6b2H37s2Uq/GefleCDtbe0XZAuy7Wa49VGkPVPMfLL9qObgBST3lEHJBMUp8S7NdLQAGIvr2KXk8Hc98iKQ==
   dependencies:
     d3-time "1"
 
@@ -3630,8 +4470,9 @@ d3@^5.16.0:
     d3-zoom "1"
 
 damerau-levenshtein@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.5.tgz#780cf7144eb2e8dbd1c3bb83ae31100ccc31a414"
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz#143c1641cb3d85c60c32329e26899adea8701791"
+  integrity sha512-JVrozIeElnj3QzfUIt8tB8YMluBJom4Vw9qTPpjGYQ9fYlB3D/rb6OordUxf3xeFB35LKWs0xqcO5U6ySvBtug==
 
 dashdash@^1.12.0:
   version "1.14.1"
@@ -3641,13 +4482,14 @@ dashdash@^1.12.0:
     assert-plus "^1.0.0"
 
 date-fns@^2.0.1:
-  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.15.0.tgz#424de6b3778e4e69d3ff27046ec136af58ae5d5f"
-  integrity sha512-ZCPzAMJZn3rNUvvQIMlXhDr4A+Ar07eLeGsGREoWU19a3Pqf5oYa+ccd+B3F6XVtQY6HANMFdOQ8A+ipFnvJdQ==
+  version "2.16.1"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.16.1.tgz#05775792c3f3331da812af253e1a935851d3834b"
+  integrity sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ==
 
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
   dependencies:
     ms "2.0.0"
 
@@ -3658,7 +4500,7 @@ debug@3.1.0, debug@=3.1.0:
   dependencies:
     ms "2.0.0"
 
-debug@^3.0.0, debug@^3.1.0, debug@^3.1.1, debug@^3.2.5:
+debug@^3.1.0, debug@^3.1.1, debug@^3.2.5:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
   integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@@ -3668,15 +4510,24 @@ debug@^3.0.0, debug@^3.1.0, debug@^3.1.1, debug@^3.2.5:
 debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
+  integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
   dependencies:
     ms "^2.1.1"
 
-debuglog@^1.0.1:
+debuglog@*, debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
   integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=
 
-decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
+decamelize-keys@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
+  integrity sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=
+  dependencies:
+    decamelize "^1.1.0"
+    map-obj "^1.0.0"
+
+decamelize@^1.1.0, decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
@@ -3684,6 +4535,7 @@ decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
 decamelize@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-2.0.0.tgz#656d7bbc8094c4c788ea53c5840908c9c7d063c7"
+  integrity sha512-Ikpp5scV3MSYxY39ymh45ZLEecsTdv/Xj2CaQfI8RLMuwi7XvjX9H/fhraiSuU+C5w5NTDu4ZU72xNiZnurBPg==
   dependencies:
     xregexp "4.0.0"
 
@@ -3695,6 +4547,7 @@ decode-uri-component@^0.2.0:
 deep-equal@^1.0.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"
+  integrity sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==
   dependencies:
     is-arguments "^1.0.4"
     is-date-object "^1.0.1"
@@ -3711,10 +4564,12 @@ deep-extend@^0.6.0:
 deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
+  integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
 default-gateway@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
+  integrity sha512-h6sMrVB1VMWVrW13mSc6ia/DwYYw5MN6+exNu1OaJeFac5aSAvwM7lZ0NVfTABuSkQelr4h5oebg3KB1XPdjgA==
   dependencies:
     execa "^1.0.0"
     ip-regex "^2.1.0"
@@ -3736,18 +4591,21 @@ define-properties@^1.1.2, define-properties@^1.1.3:
 define-property@^0.2.5:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
+  integrity sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=
   dependencies:
     is-descriptor "^0.1.0"
 
 define-property@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
+  integrity sha1-dp66rz9KY6rTr56NMEybvnm/sOY=
   dependencies:
     is-descriptor "^1.0.0"
 
 define-property@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/define-property/-/define-property-2.0.2.tgz#d459689e8d654ba77e02a817f8710d702cb16e9d"
+  integrity sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==
   dependencies:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
@@ -3760,6 +4618,7 @@ defined@^1.0.0:
 del@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/del/-/del-3.0.0.tgz#53ecf699ffcbcb39637691ab13baf160819766e5"
+  integrity sha1-U+z2mf/LyzljdpGrE7rxYIGXZuU=
   dependencies:
     globby "^6.1.0"
     is-path-cwd "^1.0.0"
@@ -3781,10 +4640,12 @@ delegates@^1.0.0:
 depd@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
+  integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
 des.js@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
+  integrity sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==
   dependencies:
     inherits "^2.0.1"
     minimalistic-assert "^1.0.0"
@@ -3792,6 +4653,7 @@ des.js@^1.0.0:
 destroy@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
+  integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
 
 detect-indent@~5.0.0:
   version "5.0.0"
@@ -3806,10 +4668,12 @@ detect-newline@^2.1.0:
 detect-node@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
+  integrity sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==
 
 detect-port-alt@1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/detect-port-alt/-/detect-port-alt-1.1.6.tgz#24707deabe932d4a3cf621302027c2b266568275"
+  integrity sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==
   dependencies:
     address "^1.0.1"
     debug "^2.6.0"
@@ -3830,13 +4694,15 @@ dezalgo@^1.0.0, dezalgo@~1.0.3:
     asap "^2.0.0"
     wrappy "1"
 
-diff-sequences@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
+diff-sequences@^26.3.0:
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.3.0.tgz#62a59b1b29ab7fd27cef2a33ae52abe73042d0a2"
+  integrity sha512-5j5vdRcw3CNctePNYN0Wy2e/JbWT6cAYnXv5OuqPhDpyCGc0uLu2TK0zOCJWNB9kOIfYMSpIulRaDgIi4HJ6Ig==
 
 diffie-hellman@^5.0.0:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
+  integrity sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==
   dependencies:
     bn.js "^4.1.0"
     miller-rabin "^4.0.0"
@@ -3845,17 +4711,27 @@ diffie-hellman@^5.0.0:
 dir-glob@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.0.0.tgz#0b205d2b6aef98238ca286598a8204d29d0a0034"
+  integrity sha512-37qirFDz8cA5fimp9feo43fSuRo2gHwaIn6dXL8Ber1dGwUosDrGZeCCXq57WnIqE4aQ+u3eQZzsk1yOzhdwag==
   dependencies:
     arrify "^1.0.1"
     path-type "^3.0.0"
 
+dir-glob@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
+  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
+  dependencies:
+    path-type "^4.0.0"
+
 dns-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
+  integrity sha1-s55/HabrCnW6nBcySzR1PEfgZU0=
 
 dns-packet@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.1.tgz#12aa426981075be500b910eedcd0b47dd7deda5a"
+  integrity sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==
   dependencies:
     ip "^1.1.0"
     safe-buffer "^5.0.1"
@@ -3863,12 +4739,14 @@ dns-packet@^1.3.1:
 dns-txt@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/dns-txt/-/dns-txt-2.0.2.tgz#b91d806f5d27188e4ab3e7d107d881a1cc4642b6"
+  integrity sha1-uR2Ab10nGI5Ks+fRB9iBocxGQrY=
   dependencies:
     buffer-indexof "^1.0.0"
 
 doctrine@1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
+  integrity sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=
   dependencies:
     esutils "^2.0.2"
     isarray "^1.0.0"
@@ -3876,24 +4754,28 @@ doctrine@1.5.0:
 doctrine@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
+  integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
   dependencies:
     esutils "^2.0.2"
 
 doctrine@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
+  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
   dependencies:
     esutils "^2.0.2"
 
 dom-converter@^0.2:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
+  integrity sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==
   dependencies:
     utila "~0.4"
 
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
+  integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==
   dependencies:
     domelementtype "^2.0.1"
     entities "^2.0.0"
@@ -3901,24 +4783,29 @@ dom-serializer@0:
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
+  integrity sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==
 
 domelementtype@1, domelementtype@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
+  integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
 
 domelementtype@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.0.1.tgz#1f8bdfe91f5a78063274e803b4bdcedf6e94f94d"
+  integrity sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==
 
 domhandler@^2.3.0:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
+  integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==
   dependencies:
     domelementtype "1"
 
 domutils@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
+  integrity sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=
   dependencies:
     dom-serializer "0"
     domelementtype "1"
@@ -3926,24 +4813,34 @@ domutils@1.5.1:
 domutils@^1.5.1, domutils@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
+  integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
   dependencies:
     dom-serializer "0"
     domelementtype "1"
 
-dot-prop@^4.1.0, dot-prop@^4.1.1:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
-  integrity sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==
+dot-prop@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.1.tgz#45884194a71fc2cda71cbb4bceb3a4dd2f433ba4"
+  integrity sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ==
   dependencies:
     is-obj "^1.0.0"
 
+dot-prop@^5.2.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.3.0.tgz#90ccce708cd9cd82cc4dc8c3ddd9abdd55b20e88"
+  integrity sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==
+  dependencies:
+    is-obj "^2.0.0"
+
 dotenv-expand@4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-4.2.0.tgz#def1f1ca5d6059d24a766e587942c21106ce1275"
+  integrity sha1-3vHxyl1gWdJKdm5YeULCEQbOEnU=
 
 dotenv@6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064"
+  integrity sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==
 
 dotenv@^5.0.1:
   version "5.0.1"
@@ -3956,8 +4853,9 @@ duplexer3@^0.1.4:
   integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=
 
 duplexer@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
+  integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
 
 duplexify@^3.4.2, duplexify@^3.6.0:
   version "3.7.1"
@@ -3978,17 +4876,19 @@ ecc-jsbn@~0.1.1:
     safer-buffer "^2.1.0"
 
 echarts-for-react@^2.0.15-beta.1:
-  version "2.0.15-beta.1"
-  resolved "https://registry.yarnpkg.com/echarts-for-react/-/echarts-for-react-2.0.15-beta.1.tgz#1afa21ee0f08f9023eff0b5ab3351f2fe0f708b6"
+  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==
   dependencies:
     fast-deep-equal "^2.0.1"
-    size-sensor "^0.2.0"
+    size-sensor "^1.0.0"
 
 echarts@^4.5.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/echarts/-/echarts-4.6.0.tgz#b5a47a1046cec93ceeef954f9ee54751340558ec"
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/echarts/-/echarts-4.9.0.tgz#a9b9baa03f03a2a731e6340c55befb57a9e1347d"
+  integrity sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==
   dependencies:
-    zrender "4.2.0"
+    zrender "4.3.2"
 
 editor@~1.0.0:
   version "1.0.0"
@@ -3998,14 +4898,17 @@ editor@~1.0.0:
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
-electron-to-chromium@^1.3.247, electron-to-chromium@^1.3.322:
-  version "1.3.328"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.328.tgz#a619575c42f1d5b443103664f25ffa5a80190ee5"
+electron-to-chromium@^1.3.247, electron-to-chromium@^1.3.562:
+  version "1.3.564"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.564.tgz#e9c319ae437b3eb8bbf3e3bae4bead5a21945961"
+  integrity sha512-fNaYN3EtKQWLQsrKXui8mzcryJXuA0LbCLoizeX6oayG2emBaS5MauKjCPAvc29NEY4FpLHIUWiP+Y0Bfrs5dg==
 
-elliptic@^6.0.0:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.2.tgz#05c5678d7173c049d8ca433552224a495d0e3762"
+elliptic@^6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.3.tgz#cb59eb2efdaf73a0bd78ccd7015a62ad6e0f93d6"
+  integrity sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==
   dependencies:
     bn.js "^4.4.0"
     brorand "^1.0.1"
@@ -4020,13 +4923,25 @@ emoji-regex@^7.0.1, emoji-regex@^7.0.2:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
   integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
 
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+  integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
+
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
 encoding@^0.1.11:
   version "0.1.13"
@@ -4043,8 +4958,9 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
     once "^1.4.0"
 
 enhanced-resolve@^4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.1.tgz#2937e2b8066cd0fe7ce0990a98f0d71a35189f66"
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.3.0.tgz#3b806f3bfafc1ec7de69551ef93cca46c1704126"
+  integrity sha512-3e87LvavsdxyoCfGusJnrZ5G8SLPOFeHSNpZI/ATL9a5leXo2k0w6MKnbqhdBad9qTobSfB20Ld7UmgoNbAZkQ==
   dependencies:
     graceful-fs "^4.1.2"
     memory-fs "^0.5.0"
@@ -4053,10 +4969,12 @@ enhanced-resolve@^4.1.0:
 entities@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
+  integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
 
 entities@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.0.tgz#68d6084cab1b079767540d80e56a39b423e4abf4"
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.3.tgz#5c487e5742ab93c15abb5da22759b8590ec03b7f"
+  integrity sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ==
 
 env-paths@^2.2.0:
   version "2.2.0"
@@ -4090,23 +5008,7 @@ error-ex@^1.2.0, error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.17.0:
-  version "1.17.0"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.0.tgz#f42a517d0036a5591dbb2c463591dc8bb50309b1"
-  dependencies:
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-    is-callable "^1.1.5"
-    is-regex "^1.0.5"
-    object-inspect "^1.7.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.0"
-    string.prototype.trimleft "^2.1.1"
-    string.prototype.trimright "^2.1.1"
-
-es-abstract@^1.17.0-next.1, es-abstract@^1.17.5:
+es-abstract@^1.17.0, es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
   version "1.17.6"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.6.tgz#9142071707857b2cacc7b89ecb670316c3e2d52a"
   integrity sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==
@@ -4144,9 +5046,15 @@ es6-promisify@^5.0.0:
   dependencies:
     es6-promise "^4.0.3"
 
+escalade@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.0.2.tgz#6a580d70edb87880f22b4c91d0d56078df6962c4"
+  integrity sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ==
+
 escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
 
 escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
@@ -4163,19 +5071,22 @@ eslint-config-prettier@^6.1.0:
 eslint-config-react-app@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-4.0.1.tgz#23fd0fd7ea89442ef1e733f66a7207674b23c8db"
+  integrity sha512-ZsaoXUIGsK8FCi/x4lT2bZR5mMkL/Kgj+Lnw690rbvvUr/uiwgFiD8FcfAhkCycm7Xte6O5lYz4EqMx2vX7jgw==
   dependencies:
     confusing-browser-globals "^1.0.7"
 
 eslint-import-resolver-node@^0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.2.tgz#58f15fb839b8d0576ca980413476aab2472db66a"
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz#85ffa81942c25012d8231096ddf679c03042c717"
+  integrity sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==
   dependencies:
     debug "^2.6.9"
-    resolve "^1.5.0"
+    resolve "^1.13.1"
 
 eslint-loader@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-2.1.2.tgz#453542a1230d6ffac90e4e7cb9cadba9d851be68"
+  integrity sha512-rA9XiXEOilLYPOIInvVH5S/hYfyTPyxag6DZhoQOduM+3TkghAEQ3VcFO8VnX4J4qg/UIBzp72aOf/xvYmpmsg==
   dependencies:
     loader-fs-cache "^1.0.0"
     loader-utils "^1.0.2"
@@ -4184,8 +5095,9 @@ eslint-loader@2.1.2:
     rimraf "^2.6.1"
 
 eslint-module-utils@^2.3.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.5.0.tgz#cdf0b40d623032274ccd2abd7e64c4e524d6e19c"
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.6.0.tgz#579ebd094f56af7797d19c9866c9c9486629bfa6"
+  integrity sha512-6j9xxegbqe8/kZY8cYpcp0xhbK0EgJlg3g9mib3/miLaExuuwc3n5UEfSnU6hWMbT0FAYVvDbL9RrRgpUeQIvA==
   dependencies:
     debug "^2.6.9"
     pkg-dir "^2.0.0"
@@ -4193,12 +5105,14 @@ eslint-module-utils@^2.3.0:
 eslint-plugin-flowtype@2.50.1:
   version "2.50.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.50.1.tgz#36d4c961ac8b9e9e1dc091d3fba0537dad34ae8a"
+  integrity sha512-9kRxF9hfM/O6WGZcZPszOVPd2W0TLHBtceulLTsGfwMPtiCCLnCW0ssRiOOiXyqrCA20pm1iXdXm7gQeN306zQ==
   dependencies:
     lodash "^4.17.10"
 
 eslint-plugin-import@2.16.0:
   version "2.16.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.16.0.tgz#97ac3e75d0791c4fac0e15ef388510217be7f66f"
+  integrity sha512-z6oqWlf1x5GkHIFgrSvtmudnqM6Q60KM4KvpWi5ubonMjycLjndvd5+8VAZIsTlHC03djdgJuyKG6XO577px6A==
   dependencies:
     contains-path "^0.1.0"
     debug "^2.6.9"
@@ -4214,6 +5128,7 @@ eslint-plugin-import@2.16.0:
 eslint-plugin-jsx-a11y@6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.2.1.tgz#4ebba9f339b600ff415ae4166e3e2e008831cf0c"
+  integrity sha512-cjN2ObWrRz0TTw7vEcGQrx+YltMvZoOEx4hWU8eEERDnBIU00OTq7Vr+jA7DFKxiwLNv4tTh5Pq2GUNEa8b6+w==
   dependencies:
     aria-query "^3.0.0"
     array-includes "^3.0.3"
@@ -4234,10 +5149,12 @@ eslint-plugin-prettier@^3.1.0:
 eslint-plugin-react-hooks@^1.5.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz#6210b6d5a37205f0b92858f895a4e827020a7d04"
+  integrity sha512-iXTCFcOmlWvw4+TOE8CLWj6yX1GwzT0Y6cUfHHZqWnSk144VmVIRcVGtUAzrLES7C798lmvnt02C7rxaOX1HNA==
 
 eslint-plugin-react@7.12.4:
   version "7.12.4"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.12.4.tgz#b1ecf26479d61aee650da612e425c53a99f48c8c"
+  integrity sha512-1puHJkXJY+oS1t467MjbqjvX53uQ05HXwjqDgdbGBqf5j9eeydI54G3KwiJmWciQ0HTBacIKw2jgwSBSH3yfgQ==
   dependencies:
     array-includes "^3.0.3"
     doctrine "^2.1.0"
@@ -4250,6 +5167,7 @@ eslint-plugin-react@7.12.4:
 eslint-scope@3.7.1:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"
+  integrity sha1-PWPD7f2gLgbgGkUq2IyqzHzctug=
   dependencies:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
@@ -4257,30 +5175,42 @@ eslint-scope@3.7.1:
 eslint-scope@^4.0.0, eslint-scope@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848"
+  integrity sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==
   dependencies:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
 eslint-scope@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.0.0.tgz#e87c8887c73e8d1ec84f1ca591645c358bfc8fb9"
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.0.tgz#d0f971dfe59c69e0cada684b23d49dbf82600ce5"
+  integrity sha512-iiGRvtxWqgtx5m8EyQUJihBloE4EnYeGE/bz1wSPwJE6tZuJUtHlhqDM4Xj2ukE8Dyy1+HCZ4hE0fzIVMzb58w==
   dependencies:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
-eslint-utils@^1.3.1, eslint-utils@^1.4.3:
+eslint-utils@^1.3.1:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.3.tgz#74fec7c54d0776b6f67e0251040b5806564e981f"
+  integrity sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
+eslint-utils@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
+  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
 eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
+  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
 
 eslint@^5.16.0:
   version "5.16.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-5.16.0.tgz#a1e3ac1aae4a3fbd8296fcf8f7ab7314cbb6abea"
+  integrity sha512-S3Rz11i7c8AA5JPv7xAH+dOyq/Cu/VXHiHXBPOU1k/JAM5dXqQPt3qcrhpHSorXmrpu2g0gkIBVXAqCpzfoZIg==
   dependencies:
     "@babel/code-frame" "^7.0.0"
     ajv "^6.9.1"
@@ -4322,6 +5252,7 @@ eslint@^5.16.0:
 espree@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/espree/-/espree-5.0.1.tgz#5d6526fa4fc7f0788a5cf75b15f30323e2f81f7a"
+  integrity sha512-qWAZcWh4XE/RwzLJejfcofscgMc9CamR6Tn1+XRXNzrvUSSbiAjGOI/fggztjIi7y9VLPqnICMIPiGyr8JaZ0A==
   dependencies:
     acorn "^6.0.7"
     acorn-jsx "^5.0.0"
@@ -4335,6 +5266,7 @@ esprima-fb@^15001.1.0-dev-harmony-fb:
 esprima@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
 esprima@~3.1.0:
   version "3.1.3"
@@ -4342,46 +5274,60 @@ esprima@~3.1.0:
   integrity sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=
 
 esquery@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.1.tgz#406c51658b1f5991a5f9b62b1dc25b00e3e5c708"
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.3.1.tgz#b78b5828aa8e214e29fb74c4d5b752e1c033da57"
+  integrity sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==
   dependencies:
-    estraverse "^4.0.0"
+    estraverse "^5.1.0"
 
 esrecurse@^4.1.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.1.tgz#007a3b9fdbc2b3bb87e4879ea19c92fdbd3942cf"
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
   dependencies:
-    estraverse "^4.1.0"
+    estraverse "^5.2.0"
 
-estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1:
+estraverse@^4.1.1:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.1.0, estraverse@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
+  integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==
 
-esutils@^2.0.0, esutils@^2.0.2:
+esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
 etag@~1.8.1:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+  integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
 
 eventemitter3@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.0.tgz#d65176163887ee59f386d64c82610b696a4a74eb"
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
+  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
 
 events@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/events/-/events-3.0.0.tgz#9a0a0dfaf62893d92b875b8f2698ca4114973e88"
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.2.0.tgz#93b87c18f8efcd4202a461aec4dfc0556b639379"
+  integrity sha512-/46HWwbfCX2xTawVfkKLGxMifJYQBWMwY1mjywRtb4c9x8l5NP3KoJtnIOiL1hfdRkIuYhETxQlo62IF8tcnlg==
 
 eventsource@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-1.0.7.tgz#8fbc72c93fcd34088090bc0a4e64f4b5cee6d8d0"
+  integrity sha512-4Ln17+vVT0k8aWq+t/bF5arcS3EpT9gYtW66EPacdj/mAFevznsnyoHLPy2BA8gbIQeIHoPsvwmfBftfcG//BQ==
   dependencies:
     original "^1.0.0"
 
 evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
+  integrity sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==
   dependencies:
     md5.js "^1.3.4"
     safe-buffer "^5.1.1"
@@ -4389,6 +5335,7 @@ evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
 exec-sh@^0.3.2:
   version "0.3.4"
   resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.4.tgz#3a018ceb526cc6f6df2bb504b2bfe8e3a4934ec5"
+  integrity sha512-sEFIkc61v75sWeOe72qyrqg2Qg0OuLESziUDk/O/z2qgS15y2gWVFrI6f2Qn/qw/0/NCfCEsmNA4zOjkwEZT1A==
 
 execa@^0.7.0:
   version "0.7.0"
@@ -4406,6 +5353,7 @@ execa@^0.7.0:
 execa@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
+  integrity sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==
   dependencies:
     cross-spawn "^6.0.0"
     get-stream "^4.0.0"
@@ -4415,9 +5363,17 @@ execa@^1.0.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+execall@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/execall/-/execall-2.0.0.tgz#16a06b5fe5099df7d00be5d9c06eecded1663b45"
+  integrity sha512-0FU2hZ5Hh6iQnarpRtQurM/aAvp3RIbfvgLHrcqJYzhXyV2KFruhuChf9NC6waAhiUR7FFtlugkI4p7f2Fqlow==
+  dependencies:
+    clone-regexp "^2.1.0"
+
 expand-brackets@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
+  integrity sha1-t3c14xXOMPa27/D4OwQVGiJEliI=
   dependencies:
     debug "^2.3.3"
     define-property "^0.2.5"
@@ -4430,6 +5386,7 @@ expand-brackets@^2.1.4:
 express@^4.16.2, express@^4.17.1:
   version "4.17.1"
   resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
+  integrity sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
   dependencies:
     accepts "~1.3.7"
     array-flatten "1.1.1"
@@ -4465,17 +5422,19 @@ express@^4.16.2, express@^4.17.1:
 extend-shallow@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
+  integrity sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=
   dependencies:
     is-extendable "^0.1.0"
 
 extend-shallow@^3.0.0, extend-shallow@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
+  integrity sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=
   dependencies:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
 
-extend@~3.0.2:
+extend@^3.0.0, extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
@@ -4483,6 +5442,7 @@ extend@~3.0.2:
 external-editor@^3.0.3:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
+  integrity sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==
   dependencies:
     chardet "^0.7.0"
     iconv-lite "^0.4.24"
@@ -4491,6 +5451,7 @@ external-editor@^3.0.3:
 extglob@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
+  integrity sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==
   dependencies:
     array-unique "^0.3.2"
     define-property "^1.0.0"
@@ -4514,6 +5475,7 @@ extsprintf@^1.2.0:
 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:
   version "3.1.3"
@@ -4528,6 +5490,7 @@ fast-diff@^1.1.2:
 fast-glob@^2.0.2:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
+  integrity sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==
   dependencies:
     "@mrmlnc/readdir-enhanced" "^2.2.1"
     "@nodelib/fs.stat" "^1.1.2"
@@ -4536,6 +5499,18 @@ fast-glob@^2.0.2:
     merge2 "^1.2.3"
     micromatch "^3.1.10"
 
+fast-glob@^3.1.1, fast-glob@^3.2.4:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.4.tgz#d20aefbf99579383e7f3cc66529158c9b98554d3"
+  integrity sha512-kr/Oo6PX51265qeuCYsyGypiO5uJFgBS0jksyG7FUeCyQzNwYnzrNIMR1NXfkZXsMYXYLRAHgISHBz8gQcxKHQ==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.0"
+    merge2 "^1.3.0"
+    micromatch "^4.0.2"
+    picomatch "^2.2.1"
+
 fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
@@ -4544,28 +5519,45 @@ fast-json-stable-stringify@^2.0.0:
 fast-levenshtein@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
+
+fastest-levenshtein@^1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz#9990f7d3a88cc5a9ffd1f1745745251700d497e2"
+  integrity sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==
+
+fastq@^1.6.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.8.0.tgz#550e1f9f59bbc65fe185cb6a9b4d95357107f481"
+  integrity sha512-SMIZoZdLh/fgofivvIkmknUXyPnvxRE3DhtZ5Me3Mrsk5gyPL42F0xr51TdRXskBxHfMp+07bcYzfsYEsSQA9Q==
+  dependencies:
+    reusify "^1.0.4"
 
 faye-websocket@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
+  integrity sha1-TkkvjQTftviQA1B/btvy1QHnxvQ=
   dependencies:
     websocket-driver ">=0.5.1"
 
 faye-websocket@~0.11.1:
   version "0.11.3"
   resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.3.tgz#5c0e9a8968e8912c286639fde977a8b209f2508e"
+  integrity sha512-D2y4bovYpzziGgbHYtGCMjlJM36vAl/y+xUyn1C+FVx8szd1E+86KwVw6XvYSzOP8iMpm1X0I4xJD+QtUb36OA==
   dependencies:
     websocket-driver ">=0.5.1"
 
 fb-watchman@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.1.tgz#fc84fb39d2709cf3ff6d743706157bb5708a8a85"
+  integrity sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==
   dependencies:
     bser "2.1.1"
 
 fbjs@^0.8.9:
   version "0.8.17"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
   dependencies:
     core-js "^1.0.0"
     isomorphic-fetch "^2.1.1"
@@ -4583,18 +5575,21 @@ figgy-pudding@^3.4.1, figgy-pudding@^3.5.1:
 figures@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
+  integrity sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=
   dependencies:
     escape-string-regexp "^1.0.5"
 
 file-entry-cache@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-5.0.1.tgz#ca0f6efa6dd3d561333fb14515065c2fafdf439c"
+  integrity sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==
   dependencies:
     flat-cache "^2.0.1"
 
 file-loader@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-3.0.1.tgz#f8e0ba0b599918b51adfe45d66d1e771ad560faa"
+  integrity sha512-4sNIOXgtH/9WZq4NvlfU3Opn5ynUsqBwSLyM+I7UOwdGigTBYfVVQEwe/msZNX/j4pCJTIM14Fsw66Svo1oVrw==
   dependencies:
     loader-utils "^1.0.2"
     schema-utils "^1.0.0"
@@ -4602,23 +5597,34 @@ file-loader@3.0.1:
 file-uri-to-path@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
+  integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==
 
 filesize@3.6.1:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
+  integrity sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg==
 
 fill-range@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
+  integrity sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=
   dependencies:
     extend-shallow "^2.0.1"
     is-number "^3.0.0"
     repeat-string "^1.6.1"
     to-regex-range "^2.1.0"
 
+fill-range@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
+  dependencies:
+    to-regex-range "^5.0.1"
+
 finalhandler@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
+  integrity sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==
   dependencies:
     debug "2.6.9"
     encodeurl "~1.0.2"
@@ -4631,6 +5637,7 @@ finalhandler@~1.1.2:
 find-cache-dir@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-0.1.1.tgz#c8defae57c8a52a8a784f9e31c57c742e993a0b9"
+  integrity sha1-yN765XyKUqinhPnjHFfHQumToLk=
   dependencies:
     commondir "^1.0.1"
     mkdirp "^0.5.1"
@@ -4639,6 +5646,7 @@ find-cache-dir@^0.1.1:
 find-cache-dir@^2.0.0, find-cache-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
+  integrity sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==
   dependencies:
     commondir "^1.0.1"
     make-dir "^2.0.0"
@@ -4659,6 +5667,7 @@ find-up@3.0.0, find-up@^3.0.0:
 find-up@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
+  integrity sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=
   dependencies:
     path-exists "^2.0.0"
     pinkie-promise "^2.0.0"
@@ -4670,21 +5679,32 @@ find-up@^2.0.0, find-up@^2.1.0:
   dependencies:
     locate-path "^2.0.0"
 
+find-up@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
 flat-cache@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0"
+  integrity sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==
   dependencies:
     flatted "^2.0.0"
     rimraf "2.6.3"
     write "1.0.3"
 
 flatted@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.1.tgz#69e57caa8f0eacbc281d2e2cb458d46fdb449e08"
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
+  integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
 
 flatten@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
+  integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
 
 flush-write-stream@^1.0.0:
   version "1.1.1"
@@ -4697,32 +5717,36 @@ flush-write-stream@^1.0.0:
 follow-redirects@1.5.10:
   version "1.5.10"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
   dependencies:
     debug "=3.1.0"
 
 follow-redirects@^1.0.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.9.0.tgz#8d5bcdc65b7108fe1508649c79c12d732dcedb4f"
-  dependencies:
-    debug "^3.0.0"
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"
+  integrity sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==
 
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
+  integrity sha1-2Hc5COMSVhCZUrH9ubP6hn0ndeE=
 
 for-in@^1.0.1, for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+  integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
 
 for-own@^0.1.3:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  integrity sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=
   dependencies:
     for-in "^1.0.1"
 
 for-own@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/for-own/-/for-own-1.0.0.tgz#c63332f415cedc4b04dbfe70cf836494c53cb44b"
+  integrity sha1-xjMy9BXO3EsE2/5wz4NklMU8tEs=
   dependencies:
     for-in "^1.0.1"
 
@@ -4734,6 +5758,7 @@ forever-agent@~0.6.1:
 fork-ts-checker-webpack-plugin@1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-1.5.0.tgz#ce1d77190b44d81a761b10b6284a373795e41f0c"
+  integrity sha512-zEhg7Hz+KhZlBhILYpXy+Beu96gwvkROWJiTXOCyOOMMrdBIRPvsBpBqgTI4jfJGrJXcqGwJR8zsBGDmzY0jsA==
   dependencies:
     babel-code-frame "^6.22.0"
     chalk "^2.4.1"
@@ -4756,16 +5781,19 @@ form-data@~2.3.2:
 forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
+  integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
 
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
+  integrity sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=
   dependencies:
     map-cache "^0.2.2"
 
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+  integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
 
 from2@^1.3.0:
   version "1.3.0"
@@ -4786,6 +5814,7 @@ from2@^2.1.0:
 fs-extra@7.0.1, fs-extra@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
+  integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
   dependencies:
     graceful-fs "^4.1.2"
     jsonfile "^4.0.0"
@@ -4794,6 +5823,7 @@ fs-extra@7.0.1, fs-extra@^7.0.0:
 fs-extra@^4.0.2:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
+  integrity sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==
   dependencies:
     graceful-fs "^4.1.2"
     jsonfile "^4.0.0"
@@ -4831,15 +5861,22 @@ fs.realpath@^1.0.0:
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
 fsevents@^1.2.7:
-  version "1.2.11"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.11.tgz#67bf57f4758f02ede88fb2a1712fef4d15358be3"
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.13.tgz#f325cb0455592428bcf11b383370ef70e3bfcc38"
+  integrity sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==
   dependencies:
     bindings "^1.5.0"
     nan "^2.12.1"
 
+fsevents@~2.1.2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
+  integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
+
 fstream@^1.0.0, fstream@^1.0.12:
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.12.tgz#4e8ba8ee2d48be4f7d0de505455548eae5932045"
+  integrity sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==
   dependencies:
     graceful-fs "^4.1.2"
     inherits "~2.0.0"
@@ -4854,6 +5891,7 @@ function-bind@^1.1.1:
 functional-red-black-tree@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
+  integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
 gauge@~2.7.3:
   version "2.7.4"
@@ -4872,6 +5910,7 @@ gauge@~2.7.3:
 gaze@^1.0.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/gaze/-/gaze-1.1.3.tgz#c441733e13b927ac8c0ff0b4c3b033f28812924a"
+  integrity sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==
   dependencies:
     globule "^1.0.0"
 
@@ -4880,6 +5919,11 @@ genfun@^5.0.0:
   resolved "https://registry.yarnpkg.com/genfun/-/genfun-5.0.0.tgz#9dd9710a06900a5c4a5bf57aca5da4e52fe76537"
   integrity sha512-KGDOARWVga7+rnB3z9Sd2Letx515owfk0hSxHGuqjANb1M+x2bGZGqHLiozPsYMdM2OubeMni/Hpwmjq6qIUhA==
 
+gensync@^1.0.0-beta.1:
+  version "1.0.0-beta.1"
+  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.1.tgz#58f4361ff987e5ff6e1e7a210827aa371eaac269"
+  integrity sha512-r8EC6NO1sngH/zdD9fiRDLdcgnbayXah+mLgManTaIZJqEC1MZstmnox8KpnI2/fxQwrp5OpCOYWLp4rBl4Jcg==
+
 gentle-fs@^2.3.0, gentle-fs@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/gentle-fs/-/gentle-fs-2.3.1.tgz#11201bf66c18f930ddca72cf69460bdfa05727b1"
@@ -4910,16 +5954,23 @@ get-caller-file@^2.0.1:
 get-own-enumerable-property-symbols@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
+  integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==
 
 get-stdin@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
+  integrity sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=
 
 get-stdin@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-6.0.0.tgz#9e09bf712b360ab9225e812048f71fde9c89657b"
   integrity sha512-jp4tHawyV7+fkkSKyvjuLZswblUtz+SQKzSWnBbii16BuZksJlU1wuBYXY75r+duh/llF1ur6oNwi+2ZzjKZ7g==
 
+get-stdin@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-8.0.0.tgz#cbad6a73feb75f6eeb22ba9e01f89aa28aa97a53"
+  integrity sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==
+
 get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
@@ -4935,6 +5986,7 @@ get-stream@^4.0.0, get-stream@^4.1.0:
 get-value@^2.0.3, get-value@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
+  integrity sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=
 
 getpass@^0.1.1:
   version "0.1.7"
@@ -4946,13 +5998,22 @@ getpass@^0.1.1:
 glob-parent@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
+  integrity sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=
   dependencies:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
+glob-parent@^5.1.0, glob-parent@~5.1.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
+  integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
+  dependencies:
+    is-glob "^4.0.1"
+
 glob-to-regexp@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
+  integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=
 
 glob@^5.0.15:
   version "5.0.15"
@@ -4984,15 +6045,17 @@ global-dirs@^0.1.0:
   dependencies:
     ini "^1.3.4"
 
-global-modules@2.0.0:
+global-modules@2.0.0, global-modules@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780"
+  integrity sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==
   dependencies:
     global-prefix "^3.0.0"
 
 global-prefix@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-3.0.0.tgz#fc85f73064df69f50421f47f883fe5b913ba9b97"
+  integrity sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==
   dependencies:
     ini "^1.3.5"
     kind-of "^6.0.2"
@@ -5001,10 +6064,12 @@ global-prefix@^3.0.0:
 globals@^11.1.0, globals@^11.7.0:
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
+  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
 globby@8.0.2:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/globby/-/globby-8.0.2.tgz#5697619ccd95c5275dbb2d6faa42087c1a941d8d"
+  integrity sha512-yTzMmKygLp8RUpG1Ymu2VXPSJQZjNAZPD4ywgYEaG7e4tBJeUQBO8OpXrf1RCNcEs5alsoJYPAMiIHP0cmeC7w==
   dependencies:
     array-union "^1.0.1"
     dir-glob "2.0.0"
@@ -5014,9 +6079,22 @@ globby@8.0.2:
     pify "^3.0.0"
     slash "^1.0.0"
 
+globby@^11.0.1:
+  version "11.0.1"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.1.tgz#9a2bf107a068f3ffeabc49ad702c79ede8cfd357"
+  integrity sha512-iH9RmgwCmUJHi2z5o2l3eTtGBtXek1OYlHrbcxOYugyHLmAsZrPj43OtHThd62Buh/Vv6VyCBD2bdyWcGNQqoQ==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.1.1"
+    ignore "^5.1.4"
+    merge2 "^1.3.0"
+    slash "^3.0.0"
+
 globby@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
+  integrity sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=
   dependencies:
     array-union "^1.0.1"
     glob "^7.0.3"
@@ -5024,14 +6102,27 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+globjoin@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/globjoin/-/globjoin-0.1.4.tgz#2f4494ac8919e3767c5cbb691e9f463324285d43"
+  integrity sha1-L0SUrIkZ43Z8XLtpHp9GMyQoXUM=
+
 globule@^1.0.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/globule/-/globule-1.3.0.tgz#41d0e9fb44afd4b80d93a23263714f90b3dec904"
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/globule/-/globule-1.3.2.tgz#d8bdd9e9e4eef8f96e245999a5dee7eb5d8529c4"
+  integrity sha512-7IDTQTIu2xzXkT+6mlluidnWo+BypnbSoEVVQCGfzqnl5Ik8d3e1d4wycb8Rj9tWW+Z39uPWsdlquqiqPCd/pA==
   dependencies:
     glob "~7.1.1"
     lodash "~4.17.10"
     minimatch "~3.0.2"
 
+gonzales-pe@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/gonzales-pe/-/gonzales-pe-4.3.0.tgz#fe9dec5f3c557eead09ff868c65826be54d067b3"
+  integrity sha512-otgSPpUmdWJ43VXyiNgEYE4luzHCL2pz4wQ0OnDluC6Eg4Ko3Vexy/SrSynglw/eR+OhkzmqFCZa/OFa/RgAOQ==
+  dependencies:
+    minimist "^1.2.5"
+
 got@^6.7.1:
   version "6.7.1"
   resolved "https://registry.yarnpkg.com/got/-/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
@@ -5057,13 +6148,15 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
 gzip-size@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
+  integrity sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==
   dependencies:
     duplexer "^0.1.1"
     pify "^4.0.1"
 
 handle-thing@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754"
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
+  integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==
 
 har-schema@^2.0.0:
   version "2.0.0"
@@ -5071,20 +6164,27 @@ har-schema@^2.0.0:
   integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
 
 har-validator@~5.1.3:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.3.tgz#1ef89ebd3e4996557675eed9893110dc350fa080"
-  integrity sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.5.tgz#1f0803b9f8cb20c0fa13822df1ecddb36bde1efd"
+  integrity sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==
   dependencies:
-    ajv "^6.5.5"
+    ajv "^6.12.3"
     har-schema "^2.0.0"
 
+hard-rejection@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
+  integrity sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==
+
 harmony-reflect@^1.4.6:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/harmony-reflect/-/harmony-reflect-1.6.1.tgz#c108d4f2bb451efef7a37861fdbdae72c9bdefa9"
+  integrity sha512-WJTeyp0JzGtHcuMsi7rw2VwtkvLa+JyfEKJCFyfcS0+CDkjQ5lHPu7zEhFZP+PDSRrEgXa5Ah0l1MbgbE41XjA==
 
 has-ansi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=
   dependencies:
     ansi-regex "^2.0.0"
 
@@ -5093,6 +6193,11 @@ has-flag@^3.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
   integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
 
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
 has-symbols@^1.0.0, has-symbols@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
@@ -5106,6 +6211,7 @@ has-unicode@^2.0.0, has-unicode@~2.0.1:
 has-value@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
+  integrity sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=
   dependencies:
     get-value "^2.0.3"
     has-values "^0.1.4"
@@ -5114,6 +6220,7 @@ has-value@^0.3.1:
 has-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
+  integrity sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=
   dependencies:
     get-value "^2.0.6"
     has-values "^1.0.0"
@@ -5122,10 +6229,12 @@ has-value@^1.0.0:
 has-values@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
+  integrity sha1-bWHeldkd/Km5oCCJrThL/49it3E=
 
 has-values@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
+  integrity sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=
   dependencies:
     is-number "^3.0.0"
     kind-of "^4.0.0"
@@ -5138,15 +6247,18 @@ has@^1.0.0, has@^1.0.3:
     function-bind "^1.1.1"
 
 hash-base@^3.0.0:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.0.4.tgz#5fc8686847ecd73499403319a6b0a3f3f6ae4918"
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.1.0.tgz#55c381d9e06e1d2997a883b4a3fddfe7f0d3af33"
+  integrity sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==
   dependencies:
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
+    inherits "^2.0.4"
+    readable-stream "^3.6.0"
+    safe-buffer "^5.2.0"
 
 hash.js@^1.0.0, hash.js@^1.0.3:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
+  integrity sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==
   dependencies:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
@@ -5154,14 +6266,17 @@ hash.js@^1.0.0, hash.js@^1.0.3:
 he@1.2.x:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
 hex-color-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
+  integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
 history@^3.0.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/history/-/history-3.3.0.tgz#fcedcce8f12975371545d735461033579a6dae9c"
+  integrity sha1-/O3M6PEpdTcVRdc1RhAzV5ptrpw=
   dependencies:
     invariant "^2.2.1"
     loose-envify "^1.2.0"
@@ -5171,14 +6286,18 @@ history@^3.0.0:
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
+  integrity sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=
   dependencies:
     hash.js "^1.0.3"
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^2.3.1:
-  version "2.5.5"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
+hoist-non-react-statics@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
 
 hosted-git-info@^2.1.4, hosted-git-info@^2.7.1, hosted-git-info@^2.8.8:
   version "2.8.8"
@@ -5188,6 +6307,7 @@ hosted-git-info@^2.1.4, hosted-git-info@^2.7.1, hosted-git-info@^2.8.8:
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
+  integrity sha1-h3dMCUnlE/QuhFdbPEVoH63ioLI=
   dependencies:
     inherits "^2.0.1"
     obuf "^1.0.0"
@@ -5197,22 +6317,27 @@ hpack.js@^2.1.6:
 hsl-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
+  integrity sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=
 
 hsla-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
+  integrity sha1-wc56MWjIxmFAM6S194d/OyJfnDg=
 
 html-comment-regex@^1.1.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
+  integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
 
 html-entities@^1.2.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.3.1.tgz#fb9a1a4b5b14c5daba82d3e34c6ae4fe701a0e44"
+  integrity sha512-rhE/4Z3hIhzHAUKbW8jVcCyuT5oJCXXqhN/6mXXVCpzTmvJnoH2HL/bt3EZ6p55jbFJBeAe1ZNpL5BugLujxNA==
 
 html-minifier@^3.5.20:
   version "3.5.21"
   resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.21.tgz#d0040e054730e354db008463593194015212d20c"
+  integrity sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==
   dependencies:
     camel-case "3.0.x"
     clean-css "4.2.x"
@@ -5222,9 +6347,15 @@ html-minifier@^3.5.20:
     relateurl "0.2.x"
     uglify-js "3.4.x"
 
+html-tags@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
+  integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==
+
 html-webpack-plugin@4.0.0-beta.5:
   version "4.0.0-beta.5"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.5.tgz#2c53083c1151bfec20479b1f8aaf0039e77b5513"
+  integrity sha512-y5l4lGxOW3pz3xBTFdfB9rnnrWRPVxlAhX6nrBYIcW+2k2zC3mSp/3DxlWVCMBfnO6UAnoF8OcFn0IMy6kaKAQ==
   dependencies:
     html-minifier "^3.5.20"
     loader-utils "^1.1.0"
@@ -5233,9 +6364,10 @@ html-webpack-plugin@4.0.0-beta.5:
     tapable "^1.1.0"
     util.promisify "1.0.0"
 
-htmlparser2@^3.3.0:
+htmlparser2@^3.10.0, htmlparser2@^3.3.0:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
+  integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==
   dependencies:
     domelementtype "^1.3.1"
     domhandler "^2.3.0"
@@ -5252,10 +6384,12 @@ http-cache-semantics@^3.8.1:
 http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
+  integrity sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc=
 
 http-errors@1.7.2:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f"
+  integrity sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==
   dependencies:
     depd "~1.1.2"
     inherits "2.0.3"
@@ -5266,6 +6400,7 @@ http-errors@1.7.2:
 http-errors@~1.6.2:
   version "1.6.3"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.3.tgz#8b55680bb4be283a0b5bf4ea2e38580be1d9320d"
+  integrity sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=
   dependencies:
     depd "~1.1.2"
     inherits "2.0.3"
@@ -5275,6 +6410,7 @@ http-errors@~1.6.2:
 http-errors@~1.7.2:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
+  integrity sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==
   dependencies:
     depd "~1.1.2"
     inherits "2.0.4"
@@ -5282,9 +6418,10 @@ http-errors@~1.7.2:
     statuses ">= 1.5.0 < 2"
     toidentifier "1.0.0"
 
-"http-parser-js@>=0.4.0 <0.4.11":
-  version "0.4.10"
-  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.10.tgz#92c9c1374c35085f75db359ec56cc257cbb93fa4"
+http-parser-js@>=0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.2.tgz#da2e31d237b393aae72ace43882dd7e270a8ff77"
+  integrity sha512-opCO9ASqg5Wy2FNo7A0sxy71yGbbkJJXLdgMK04Tcypw9jr2MgWbyubb0+WdmDmGnFflO7fRbqbaihh/ENDlRQ==
 
 http-proxy-agent@^2.1.0:
   version "2.1.0"
@@ -5295,17 +6432,19 @@ http-proxy-agent@^2.1.0:
     debug "3.1.0"
 
 http-proxy-middleware@^0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz#183c7dc4aa1479150306498c210cdaf96080a43a"
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.19.2.tgz#ee73dcc8348165afefe8de2ff717751d181608ee"
+  integrity sha512-aYk1rTKqLTus23X3L96LGNCGNgWpG4cG0XoZIT1GUPhhulEHX/QalnO6Vbo+WmKWi4AL2IidjuC0wZtbpg0yhQ==
   dependencies:
-    http-proxy "^1.17.0"
+    http-proxy "^1.18.1"
     is-glob "^4.0.0"
     lodash "^4.17.11"
     micromatch "^3.1.10"
 
-http-proxy@^1.17.0:
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.0.tgz#dbe55f63e75a347db7f3d99974f2692a314a6a3a"
+http-proxy@^1.18.1:
+  version "1.18.1"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549"
+  integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
   dependencies:
     eventemitter3 "^4.0.0"
     follow-redirects "^1.0.0"
@@ -5323,6 +6462,7 @@ http-signature@~1.2.0:
 https-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
+  integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
 https-proxy-agent@^2.2.3:
   version "2.2.4"
@@ -5342,6 +6482,7 @@ humanize-ms@^1.2.1:
 iconv-lite@0.4, iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.5:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
+  integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
@@ -5355,22 +6496,26 @@ iconv-lite@^0.6.2:
 icss-replace-symbols@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
+  integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=
 
 icss-utils@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
+  integrity sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==
   dependencies:
     postcss "^7.0.14"
 
 identity-obj-proxy@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz#94d2bda96084453ef36fbc5aaec37e0f79f1fc14"
+  integrity sha1-lNK9qWCERT7zb7xarsN+D3nx/BQ=
   dependencies:
     harmony-reflect "^1.4.6"
 
 ieee754@^1.1.4:
   version "1.1.13"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
+  integrity sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==
 
 iferr@^0.1.5:
   version "0.1.5"
@@ -5392,31 +6537,42 @@ ignore-walk@^3.0.1:
 ignore@^3.3.5:
   version "3.3.10"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
+  integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
 
 ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
+  integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
+
+ignore@^5.1.4, ignore@^5.1.8:
+  version "5.1.8"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
+  integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
 
 immer@1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d"
+  integrity sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg==
 
 import-cwd@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
+  integrity sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=
   dependencies:
     import-from "^2.1.0"
 
 import-fresh@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
+  integrity sha1-2BNVwVYS04bGH53dOSLUMEgipUY=
   dependencies:
     caller-path "^2.0.0"
     resolve-from "^3.0.0"
 
-import-fresh@^3.0.0:
+import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.2.1.tgz#633ff618506e793af5ac91bf48b72677e15cbe66"
+  integrity sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==
   dependencies:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
@@ -5424,6 +6580,7 @@ import-fresh@^3.0.0:
 import-from@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
+  integrity sha1-M1238qev/VOqpHHUuAId7ja387E=
   dependencies:
     resolve-from "^3.0.0"
 
@@ -5432,31 +6589,45 @@ import-lazy@^2.1.0:
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
   integrity sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=
 
+import-lazy@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-4.0.0.tgz#e8eb627483a0a43da3c03f3e35548be5cb0cc153"
+  integrity sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==
+
 import-local@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
+  integrity sha512-b6s04m3O+s3CGSbqDIyP4R6aAwAeYlVq9+WUWep6iHa8ETRf9yei1U48C5MmfJmV9AiLYYBKPMq/W+/WRpQmCQ==
   dependencies:
     pkg-dir "^3.0.0"
     resolve-cwd "^2.0.0"
 
-imurmurhash@^0.1.4:
+imurmurhash@*, imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
 
 in-publish@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/in-publish/-/in-publish-2.0.0.tgz#e20ff5e3a2afc2690320b6dc552682a9c7fadf51"
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/in-publish/-/in-publish-2.0.1.tgz#948b1a535c8030561cea522f73f78f4be357e00c"
+  integrity sha512-oDM0kUSNFC31ShNxHKUyfZKy8ZeXZBWMjMdZHKLOk13uvT27VTL/QzRGfRUcevJhpkZAvlhPYuXkF7eNWrtyxQ==
 
 indent-string@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
+  integrity sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=
   dependencies:
     repeating "^2.0.0"
 
+indent-string@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
+  integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
+
 indexes-of@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
+  integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
 
 infer-owner@^1.0.3, infer-owner@^1.0.4:
   version "1.0.4"
@@ -5471,7 +6642,7 @@ inflight@^1.0.4, inflight@~1.0.6:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@2.0.4, inherits@^2.0.0, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -5479,10 +6650,12 @@ inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, i
 inherits@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
+  integrity sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=
 
 inherits@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
+  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
 
 ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
   version "1.3.5"
@@ -5506,6 +6679,7 @@ init-package-json@^1.10.3:
 inquirer@6.5.0:
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.0.tgz#2303317efc9a4ea7ec2e2df6f86569b734accf42"
+  integrity sha512-scfHejeG/lVZSpvCXpsB4j/wQNPM5JC8kiElOI0OUTwmc1RTpXr4H32/HOlQHcZiYl2z2VElwuCVDRG8vFmbnA==
   dependencies:
     ansi-escapes "^3.2.0"
     chalk "^2.4.2"
@@ -5524,6 +6698,7 @@ inquirer@6.5.0:
 inquirer@^6.2.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.2.tgz#ad50942375d036d327ff528c08bd5fab089928ca"
+  integrity sha512-cntlB5ghuB0iuO65Ovoi8ogLHiWGs/5yNrtUcKjFhSSiVeAIVpD7koaSU9RM8mpXw5YDi9RdYXGQMaOURB7ycQ==
   dependencies:
     ansi-escapes "^3.2.0"
     chalk "^2.4.2"
@@ -5542,6 +6717,7 @@ inquirer@^6.2.2:
 internal-ip@^4.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907"
+  integrity sha512-S1zBo1D6zcsyuC6PMmY5+55YMILQ9av8lotMx447Bq6SAgo/sDK6y6uUKmuYhW7eacnIhFfsPmCNYdDzsnnDCg==
   dependencies:
     default-gateway "^4.2.0"
     ipaddr.js "^1.9.0"
@@ -5549,6 +6725,7 @@ internal-ip@^4.2.0:
 invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
   dependencies:
     loose-envify "^1.0.0"
 
@@ -5560,6 +6737,7 @@ invert-kv@^1.0.0:
 invert-kv@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-2.0.0.tgz#7393f5afa59ec9ff5f67a27620d11c226e3eec02"
+  integrity sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==
 
 ip-regex@^2.1.0:
   version "2.1.0"
@@ -5571,33 +6749,52 @@ ip@1.1.5, ip@^1.1.0, ip@^1.1.5:
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
   integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
 
-ipaddr.js@1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.0.tgz#37df74e430a0e47550fe54a2defe30d8acd95f65"
-
-ipaddr.js@^1.9.0:
+ipaddr.js@1.9.1, ipaddr.js@^1.9.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
+  integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
 
 is-absolute-url@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
+  integrity sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=
 
 is-accessor-descriptor@^0.1.6:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
+  integrity sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=
   dependencies:
     kind-of "^3.0.2"
 
 is-accessor-descriptor@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz#169c2f6d3df1f992618072365c9b0ea1f6878656"
+  integrity sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==
   dependencies:
     kind-of "^6.0.0"
 
+is-alphabetical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
+  integrity sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==
+
+is-alphanumeric@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-alphanumeric/-/is-alphanumeric-1.0.0.tgz#4a9cef71daf4c001c1d81d63d140cf53fd6889f4"
+  integrity sha1-Spzvcdr0wAHB2B1j0UDPU/1oifQ=
+
+is-alphanumerical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz#7eb9a2431f855f6b1ef1a78e326df515696c4dbf"
+  integrity sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==
+  dependencies:
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+
 is-arguments@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.0.4.tgz#3faf966c7cba0ff437fb31f6250082fcf0448cf3"
+  integrity sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==
 
 is-arrayish@^0.2.1:
   version "0.2.1"
@@ -5607,26 +6804,37 @@ is-arrayish@^0.2.1:
 is-arrayish@^0.3.1:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
 
 is-binary-path@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+  integrity sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=
   dependencies:
     binary-extensions "^1.0.0"
 
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
 is-buffer@^1.0.2, is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
+  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
+
+is-buffer@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.4.tgz#3e572f23c8411a5cfd9557c849e3665e0b290623"
+  integrity sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==
 
 is-callable@^1.1.4, is-callable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.0.tgz#83336560b54a38e35e3a2df7afd0454d691468bb"
   integrity sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==
 
-is-callable@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
-
 is-ci@^1.0.10:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.2.1.tgz#e3779c8ee17fccf428488f6e281187f2e632841c"
@@ -5637,6 +6845,7 @@ is-ci@^1.0.10:
 is-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
+  integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
   dependencies:
     ci-info "^2.0.0"
 
@@ -5650,6 +6859,7 @@ is-cidr@^3.0.0:
 is-color-stop@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
+  integrity sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=
   dependencies:
     css-color-names "^0.0.4"
     hex-color-regex "^1.1.0"
@@ -5661,12 +6871,14 @@ is-color-stop@^1.0.0:
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
+  integrity sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=
   dependencies:
     kind-of "^3.0.2"
 
 is-data-descriptor@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7"
+  integrity sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==
   dependencies:
     kind-of "^6.0.0"
 
@@ -5675,9 +6887,15 @@ is-date-object@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e"
   integrity sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==
 
+is-decimal@^1.0.0, is-decimal@^1.0.2:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
+  integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==
+
 is-descriptor@^0.1.0:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
+  integrity sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==
   dependencies:
     is-accessor-descriptor "^0.1.6"
     is-data-descriptor "^0.1.4"
@@ -5686,6 +6904,7 @@ is-descriptor@^0.1.0:
 is-descriptor@^1.0.0, is-descriptor@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.2.tgz#3b159746a66604b04f8c81524ba365c5f14d86ec"
+  integrity sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==
   dependencies:
     is-accessor-descriptor "^1.0.0"
     is-data-descriptor "^1.0.0"
@@ -5694,26 +6913,29 @@ is-descriptor@^1.0.0, is-descriptor@^1.0.2:
 is-directory@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
+  integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
 
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+  integrity sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=
 
 is-extendable@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
+  integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
   dependencies:
     is-plain-object "^2.0.4"
 
 is-extglob@^2.1.0, is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
 
 is-finite@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
-  dependencies:
-    number-is-nan "^1.0.0"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.1.0.tgz#904135c77fb42c0641d6aa1bcdbc4daa8da082f3"
+  integrity sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==
 
 is-fullwidth-code-point@^1.0.0:
   version "1.0.0"
@@ -5727,18 +6949,30 @@ is-fullwidth-code-point@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
   integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=
 
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
 is-glob@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
+  integrity sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=
   dependencies:
     is-extglob "^2.1.0"
 
-is-glob@^4.0.0, is-glob@^4.0.1:
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
+  integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
   dependencies:
     is-extglob "^2.1.1"
 
+is-hexadecimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
+  integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
+
 is-installed-globally@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.1.0.tgz#0dfd98f5a9111716dd535dda6492f67bf3d25a80"
@@ -5755,21 +6989,34 @@ is-npm@^1.0.0:
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
+  integrity sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=
   dependencies:
     kind-of "^3.0.2"
 
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
 is-obj@^1.0.0, is-obj@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
   integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8=
 
+is-obj@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
+  integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
+
 is-path-cwd@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
+  integrity sha1-0iXsIxMuie3Tj9p2dHLmLmXxEG0=
 
 is-path-in-cwd@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.1.tgz#5ac48b345ef675339bd6c7a48a912110b241cf52"
+  integrity sha512-FjV1RTW48E7CWM7eE/J2NJvAEEVektecDBVBE5Hh3nM1Jd0kvhHtX68Pr3xsDf857xt3Y4AkwVULK1Vku62aaQ==
   dependencies:
     is-path-inside "^1.0.0"
 
@@ -5780,41 +7027,49 @@ is-path-inside@^1.0.0:
   dependencies:
     path-is-inside "^1.0.1"
 
+is-plain-obj@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
+  integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
+
+is-plain-obj@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
+  integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
+
 is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
+  integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
   dependencies:
     isobject "^3.0.1"
 
-is-promise@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
-
 is-redirect@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
   integrity sha1-HQPd7VO9jbDzDCbk+V02/HyH3CQ=
 
-is-regex@^1.0.4, is-regex@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.5.tgz#39d589a358bf18967f726967120b8fc1aed74eae"
-  dependencies:
-    has "^1.0.3"
-
-is-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.0.tgz#ece38e389e490df0dc21caea2bd596f987f767ff"
-  integrity sha512-iI97M8KTWID2la5uYXlkbSDQIg4F6o1sYboZKKTDpnDQMLtUL86zxhgDet3Q2SriaYsyGqZ6Mn2SjbRKeLHdqw==
+is-regex@^1.0.4, is-regex@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
+  integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
   dependencies:
     has-symbols "^1.0.1"
 
 is-regexp@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
+  integrity sha1-/S2INUXEa6xaYz57mgnof6LLUGk=
+
+is-regexp@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-2.1.0.tgz#cd734a56864e23b956bf4e7c66c396a4c0b22c2d"
+  integrity sha512-OZ4IlER3zmRIoB9AqNhEggVxqIH4ofDns5nRrPS6yQxXE1TPCUpFznBfRQmQa8uC+pXqjMnukiJBxCisIxiLGA==
 
 is-resolvable@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
+  integrity sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==
 
 is-retry-allowed@^1.0.0:
   version "1.2.0"
@@ -5824,6 +7079,7 @@ is-retry-allowed@^1.0.0:
 is-root@2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-root/-/is-root-2.1.0.tgz#809e18129cf1129644302a4f8544035d51984a9c"
+  integrity sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==
 
 is-stream@^1.0.0, is-stream@^1.0.1, is-stream@^1.1.0:
   version "1.1.0"
@@ -5833,10 +7089,12 @@ is-stream@^1.0.0, is-stream@^1.0.1, is-stream@^1.1.0:
 is-string@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.5.tgz#40493ed198ef3ff477b8c7f92f644ec82a5cd3a6"
+  integrity sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==
 
 is-svg@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-3.0.0.tgz#9321dbd29c212e5ca99c4fa9794c714bcafa2f75"
+  integrity sha512-gi4iHK53LR2ujhLVVj+37Ykh9GLqYHX6JOVXbLAucaG/Cqw9xwdFOjDM2qeifLs1sF1npXXFvDu0r5HNgCMrzQ==
   dependencies:
     html-comment-regex "^1.1.0"
 
@@ -5847,7 +7105,7 @@ is-symbol@^1.0.2:
   dependencies:
     has-symbols "^1.0.1"
 
-is-typedarray@~1.0.0:
+is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
@@ -5855,14 +7113,27 @@ is-typedarray@~1.0.0:
 is-utf8@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+  integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
+
+is-whitespace-character@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz#0858edd94a95594c7c9dd0b5c174ec6e45ee4aa7"
+  integrity sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==
 
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
+  integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
+
+is-word-character@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-word-character/-/is-word-character-1.0.4.tgz#ce0e73216f98599060592f62ff31354ddbeb0230"
+  integrity sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==
 
 is-wsl@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
+  integrity sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=
 
 isarray@0.0.1:
   version "0.0.1"
@@ -5882,16 +7153,19 @@ isexe@^2.0.0:
 isobject@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  integrity sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=
   dependencies:
     isarray "1.0.0"
 
 isobject@^3.0.0, isobject@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+  integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
 isomorphic-fetch@^2.1.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
   dependencies:
     node-fetch "^1.0.1"
     whatwg-fetch ">=0.10.0"
@@ -5904,10 +7178,12 @@ isstream@~0.1.2:
 istanbul-lib-coverage@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz#675f0ab69503fad4b1d849f736baaca803344f49"
+  integrity sha512-8aXznuEPCJvGnMSRft4udDRDtb1V3pkQkMMI5LI+6HuQz5oQ4J2UFn1H82raA3qJtyOLkkwVqICBQkjnGtn5mA==
 
 istanbul-lib-instrument@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-3.3.0.tgz#a5f63d91f0bbc0c3e479ef4c5de027335ec6d630"
+  integrity sha512-5nnIN4vo5xQZHdXno/YDXJ0G+I3dAm4XgzfSVTPLQpj/zAV2dV6Juy0yaf10/zrJOJeHoN3fraFe+XRq2bFVZA==
   dependencies:
     "@babel/generator" "^7.4.0"
     "@babel/parser" "^7.4.3"
@@ -5918,21 +7194,24 @@ istanbul-lib-instrument@^3.3.0:
     semver "^6.0.0"
 
 jest-diff@*:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
+  version "26.4.2"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.4.2.tgz#a1b7b303bcc534aabdb3bd4a7caf594ac059f5aa"
+  integrity sha512-6T1XQY8U28WH0Z5rGpQ+VqZSZz8EN8rZcBtfvXaOkbwxIEeRre6qnuZQlbY1AJ4MKDxQF8EkrCvK+hL/VkyYLQ==
   dependencies:
-    chalk "^2.0.1"
-    diff-sequences "^24.9.0"
-    jest-get-type "^24.9.0"
-    pretty-format "^24.9.0"
+    chalk "^4.0.0"
+    diff-sequences "^26.3.0"
+    jest-get-type "^26.3.0"
+    pretty-format "^26.4.2"
 
-jest-get-type@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e"
+jest-get-type@^26.3.0:
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
+  integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==
 
 jest-haste-map@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-24.9.0.tgz#b38a5d64274934e21fa417ae9a9fbeb77ceaac7d"
+  integrity sha512-kfVFmsuWui2Sj1Rp1AJ4D9HqJwE4uwTlS/vO+eRUaMmd54BFpli2XhMQnPC2k4cHFVbB2Q2C+jtI1AGLgEnCjQ==
   dependencies:
     "@jest/types" "^24.9.0"
     anymatch "^2.0.0"
@@ -5951,6 +7230,7 @@ jest-haste-map@^24.9.0:
 jest-message-util@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-24.9.0.tgz#527f54a1e380f5e202a8d1149b0ec872f43119e3"
+  integrity sha512-oCj8FiZ3U0hTP4aSui87P4L4jC37BtQwUMqk+zk/b11FR19BJDeZsZAvIHutWnmtw7r85UmR3CEWZ0HWU2mAlw==
   dependencies:
     "@babel/code-frame" "^7.0.0"
     "@jest/test-result" "^24.9.0"
@@ -5964,20 +7244,24 @@ jest-message-util@^24.9.0:
 jest-mock@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-24.9.0.tgz#c22835541ee379b908673ad51087a2185c13f1c6"
+  integrity sha512-3BEYN5WbSq9wd+SyLDES7AHnjH9A/ROBwmz7l2y+ol+NtSFO8DYiEBzoO1CeFc9a8DYy10EO4dDFVv/wN3zl1w==
   dependencies:
     "@jest/types" "^24.9.0"
 
 jest-regex-util@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-24.9.0.tgz#c13fb3380bde22bf6575432c493ea8fe37965636"
+  integrity sha512-05Cmb6CuxaA+Ys6fjr3PhvV3bGQmO+2p2La4hFbU+W5uOc479f7FdLXUWXw4pYMAhhSZIuKHwSXSu6CsSBAXQA==
 
 jest-serializer@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-24.9.0.tgz#e6d7d7ef96d31e8b9079a714754c5d5c58288e73"
+  integrity sha512-DxYipDr8OvfrKH3Kel6NdED3OXxjvxXZ1uIY2I9OFbGg+vUkkg7AGvi65qbhbWNPvDckXmzMPbK3u3HaDO49bQ==
 
 jest-util@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-24.9.0.tgz#7396814e48536d2e85a37de3e4c431d7cb140162"
+  integrity sha512-x+cZU8VRmOJxbA1K5oDBdxQmdq0OIdADarLxk0Mq+3XS4jgvhG/oKGWcIDCtPG0HgjxOYvF+ilPJQsAyXfbNOg==
   dependencies:
     "@jest/console" "^24.9.0"
     "@jest/fake-timers" "^24.9.0"
@@ -5995,29 +7279,35 @@ jest-util@^24.9.0:
 jest-worker@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
+  integrity sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==
   dependencies:
     merge-stream "^2.0.0"
     supports-color "^6.1.0"
 
 js-base64@^2.1.8:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121"
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
+  integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==
 
 js-levenshtein@^1.1.3:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
+  integrity sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==
 
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
 js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+  integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls=
 
 js-yaml@^3.13.0, js-yaml@^3.13.1:
-  version "3.13.1"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
+  version "3.14.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.0.tgz#a7a34170f26a21bb162424d8adacb4113a69e482"
+  integrity sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==
   dependencies:
     argparse "^1.0.7"
     esprima "^4.0.0"
@@ -6030,16 +7320,23 @@ jsbn@~0.1.0:
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
+  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
 
 jsesc@~0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
+  integrity sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=
 
 json-parse-better-errors@^1.0.0, json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
   integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
 
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -6053,10 +7350,12 @@ json-schema@0.2.3:
 json-stable-stringify-without-jsonify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+  integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
 
 json-stable-stringify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
+  integrity sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=
   dependencies:
     jsonify "~0.0.0"
 
@@ -6068,28 +7367,33 @@ json-stringify-safe@~5.0.1:
 json3@^3.3.2:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.3.tgz#7fc10e375fc5ae42c4705a5cc0aa6f62be305b81"
+  integrity sha512-c7/8mbUsKigAbLkD5B010BK4D9LZm7A1pNItkEwiUZRpIN66exu/e7YQWysGun+TRKaJp8MhemM+VkfWv42aCA==
 
 json5@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
+  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.0, json5@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.1.tgz#81b6cb04e9ba496f1c7005d07b4368a2638f90b6"
+json5@^2.1.0, json5@^2.1.1, json5@^2.1.2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
+  integrity sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==
   dependencies:
-    minimist "^1.2.0"
+    minimist "^1.2.5"
 
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
+  integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=
   optionalDependencies:
     graceful-fs "^4.1.6"
 
 jsonify@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
+  integrity sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=
 
 jsonparse@^1.2.0:
   version "1.3.1"
@@ -6118,46 +7422,58 @@ jstransform@^11.0.3:
     source-map "^0.4.2"
 
 jsx-ast-utils@^2.0.1:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz#8a9364e402448a3ce7f14d357738310d9248054f"
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz#1114a4c1209481db06c690c2b4f488cc665f657e"
+  integrity sha512-z1xSldJ6imESSzOjd3NNkieVJKRlKYSOtMG8SFyCj2FIrvSaSuli/WjpBkEzCBoR9bYYYFgqJw61Xhu7Lcgk+w==
   dependencies:
-    array-includes "^3.0.3"
+    array-includes "^3.1.1"
     object.assign "^4.1.0"
 
 killable@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
+  integrity sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==
 
 kind-of@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-2.0.1.tgz#018ec7a4ce7e3a86cb9141be519d24c8faa981b5"
+  integrity sha1-AY7HpM5+OobLkUG+UZ0kyPqpgbU=
   dependencies:
     is-buffer "^1.0.2"
 
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
+  integrity sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=
   dependencies:
     is-buffer "^1.1.5"
 
 kind-of@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-4.0.0.tgz#20813df3d712928b207378691a45066fae72dd57"
+  integrity sha1-IIE989cSkosgc3hpGkUGb65y3Vc=
   dependencies:
     is-buffer "^1.1.5"
 
 kind-of@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
+  integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
 
-kind-of@^6.0.0, kind-of@^6.0.2:
+kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
+known-css-properties@^0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.19.0.tgz#5d92b7fa16c72d971bda9b7fe295bdf61836ee5b"
+  integrity sha512-eYboRV94Vco725nKMlpkn3nV2+96p9c3gKXRsYqAJSswSENvBhN7n5L+uDhY58xQa0UukWsDMTGELzmD8Q+wTA==
+
 last-call-webpack-plugin@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz#9742df0e10e3cf46e5c0381c2de90d3a7a2d7555"
+  integrity sha512-7KI2l2GIZa9p2spzPIVZBYyNKkN+e/SQPpnjlTiPhdbDW3F86tdKKELxKpzJ5sgU19wQWsACULZmpTPYHeWO5w==
   dependencies:
     lodash "^4.17.5"
     webpack-sources "^1.1.0"
@@ -6172,10 +7488,12 @@ latest-version@^3.0.0:
 lazy-cache@^0.2.3:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-0.2.7.tgz#7feddf2dcb6edb77d11ef1d117ab5ffdf0ab1b65"
+  integrity sha1-f+3fLctu23fRHvHRF6tf/fCrG2U=
 
 lazy-cache@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+  integrity sha1-odePw6UEdMuAhF07O24dpJpEbo4=
 
 lazy-property@~1.0.0:
   version "1.0.0"
@@ -6192,12 +7510,26 @@ lcid@^1.0.0:
 lcid@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/lcid/-/lcid-2.0.0.tgz#6ef5d2df60e52f82eb228a4c373e8d1f397253cf"
+  integrity sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==
   dependencies:
     invert-kv "^2.0.0"
 
+leven@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
+  integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
+
+levenary@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/levenary/-/levenary-1.1.1.tgz#842a9ee98d2075aa7faeedbe32679e9205f46f77"
+  integrity sha512-mkAdOIt79FD6irqjYSs4rdbnlT5vRonMEvBVPVb3XmevfS8kgRXwfes0dhPdEtzTWD/1eNE/Bm/G1iRt6DcnQQ==
+  dependencies:
+    leven "^3.1.0"
+
 levn@^0.3.0, levn@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/levn/-/levn-0.3.0.tgz#3b09924edf9f083c0490fdd4c0bc4421e04764ee"
+  integrity sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=
   dependencies:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
@@ -6322,9 +7654,10 @@ libnpmteam@^1.0.2:
     get-stream "^4.0.0"
     npm-registry-fetch "^4.0.0"
 
-libnpx@10.2.0:
-  version "10.2.0"
-  resolved "https://registry.yarnpkg.com/libnpx/-/libnpx-10.2.0.tgz#1bf4a1c9f36081f64935eb014041da10855e3102"
+libnpx@10.2.2:
+  version "10.2.2"
+  resolved "https://registry.yarnpkg.com/libnpx/-/libnpx-10.2.2.tgz#5a4171b9b92dd031463ef66a4af9f5cbd6b09572"
+  integrity sha512-ujaYToga1SAX5r7FU5ShMFi88CWpY75meNZtr6RtEyv4l2ZK3+Wgvxq2IqlwWBiDZOqhumdeiocPS1aKrCMe3A==
   dependencies:
     dotenv "^5.0.1"
     npm-package-arg "^6.0.0"
@@ -6349,9 +7682,15 @@ libnpx@^10.2.4:
     y18n "^4.0.0"
     yargs "^14.2.3"
 
+lines-and-columns@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
+  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
+
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
+  integrity sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=
   dependencies:
     graceful-fs "^4.1.2"
     parse-json "^2.2.0"
@@ -6372,6 +7711,7 @@ load-json-file@^2.0.0:
 load-json-file@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
+  integrity sha1-L19Fq5HjMhYjT9U62rZo607AmTs=
   dependencies:
     graceful-fs "^4.1.2"
     parse-json "^4.0.0"
@@ -6389,15 +7729,26 @@ loader-fs-cache@^1.0.0:
 loader-runner@^2.3.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
+  integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
 
-loader-utils@1.2.3, loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
+loader-utils@1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
+  integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
   dependencies:
     big.js "^5.2.2"
     emojis-list "^2.0.0"
     json5 "^1.0.1"
 
+loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
+  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^1.0.1"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -6414,6 +7765,13 @@ locate-path@^3.0.0:
     p-locate "^3.0.0"
     path-exists "^3.0.0"
 
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
 lock-verify@^2.0.2, lock-verify@^2.1.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/lock-verify/-/lock-verify-2.2.1.tgz#81107948c51ed16f97b96ff8b60675affb243fc1"
@@ -6430,6 +7788,11 @@ lockfile@^1.0.4:
   dependencies:
     signal-exit "^3.0.2"
 
+lodash._baseindexof@*:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c"
+  integrity sha1-/lK1OhxnYeQmGNZU5KJXie1hgiw=
+
 lodash._baseuniq@~4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8"
@@ -6438,14 +7801,37 @@ lodash._baseuniq@~4.6.0:
     lodash._createset "~4.0.0"
     lodash._root "~3.0.0"
 
+lodash._bindcallback@*:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
+  integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4=
+
+lodash._cacheindexof@*:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92"
+  integrity sha1-PcaayCSY0u5ePOVgkbr9Ktx73pI=
+
+lodash._createcache@*:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093"
+  integrity sha1-VtagZAF2JeeevKa4AY4XRAvc8JM=
+  dependencies:
+    lodash._getnative "^3.0.0"
+
 lodash._createset@~4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26"
   integrity sha1-D0ZZ+7CddRlPqeK4imZE02PJ/iY=
 
+lodash._getnative@*, lodash._getnative@^3.0.0:
+  version "3.9.1"
+  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
+  integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=
+
 lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
+  integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
 
 lodash._root@~3.0.0:
   version "3.0.1"
@@ -6460,22 +7846,32 @@ lodash.clonedeep@^4.5.0, lodash.clonedeep@~4.5.0:
 lodash.curry@^4.0.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170"
+  integrity sha1-JI42By7ekGUB11lmIAqG2riyMXA=
 
 lodash.flow@^3.3.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a"
+  integrity sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o=
 
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
+  integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
+
+lodash.restparam@*:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
+  integrity sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=
 
 lodash.tail@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
+  integrity sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=
 
 lodash.template@^4.4.0, lodash.template@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
+  integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==
   dependencies:
     lodash._reinterpolate "^3.0.0"
     lodash.templatesettings "^4.0.0"
@@ -6483,13 +7879,10 @@ lodash.template@^4.4.0, lodash.template@^4.5.0:
 lodash.templatesettings@^4.0.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz#e481310f049d3cf6d47e912ad09313b154f0fb33"
+  integrity sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==
   dependencies:
     lodash._reinterpolate "^3.0.0"
 
-lodash.unescape@4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
-
 lodash.union@~4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.union/-/lodash.union-4.6.0.tgz#48bb5088409f16f1821666641c44dd1aaae3cd88"
@@ -6505,23 +7898,39 @@ lodash.without@~4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.without/-/lodash.without-4.4.0.tgz#3cd4574a00b67bae373a94b748772640507b7aac"
   integrity sha1-PNRXSgC2e643OpS3SHcmQFB7eqw=
 
-"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.5, lodash@~4.17.10:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
+"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.5, lodash@~4.17.10:
+  version "4.17.20"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
+  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+
+log-symbols@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.0.0.tgz#69b3cc46d20f448eccdb75ea1fa733d9e821c920"
+  integrity sha512-FN8JBzLx6CzeMrB0tg6pqlGU1wCrXW+ZXGH481kfsBqer0hToTIiHdjH4Mq8xJUbvATujKCvaREGWpGUionraA==
+  dependencies:
+    chalk "^4.0.0"
 
 loglevel@^1.4.1:
-  version "1.6.6"
-  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.6.tgz#0ee6300cc058db6b3551fa1c4bf73b83bb771312"
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.0.tgz#728166855a740d59d38db01cf46f042caa041bb0"
+  integrity sha512-i2sY04nal5jDcagM3FMfG++T69GEEM8CYuOfeOIvmXzOIcwE9a/CJPR0MFM97pYMj/u10lzz7/zd7+qwhrBTqQ==
+
+longest-streak@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.4.tgz#b8599957da5b5dab64dee3fe316fa774597d90e4"
+  integrity sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg==
 
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
 loud-rejection@^1.0.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
+  integrity sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=
   dependencies:
     currently-unhandled "^0.4.1"
     signal-exit "^3.0.0"
@@ -6529,6 +7938,7 @@ loud-rejection@^1.0.0:
 lower-case@^1.1.1:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
+  integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw=
 
 lowercase-keys@^1.0.0:
   version "1.0.1"
@@ -6560,6 +7970,7 @@ make-dir@^1.0.0:
 make-dir@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
+  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
   dependencies:
     pify "^4.0.1"
     semver "^5.6.0"
@@ -6584,46 +7995,88 @@ make-fetch-happen@^5.0.0:
 makeerror@1.0.x:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.11.tgz#e01a5c9109f2af79660e4e8b9587790184f5a96c"
+  integrity sha1-4BpckQnyr3lmDk6LlYd5AYT1qWw=
   dependencies:
     tmpl "1.0.x"
 
 mamacro@^0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/mamacro/-/mamacro-0.0.3.tgz#ad2c9576197c9f1abf308d0787865bd975a3f3e4"
+  integrity sha512-qMEwh+UujcQ+kbz3T6V+wAmO2U8veoq2w+3wY8MquqwVA3jChfwY+Tk52GZKDfACEPjuZ7r2oJLejwpt8jtwTA==
 
 map-age-cleaner@^0.1.1:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz#7d583a7306434c055fe474b0f45078e6e1b4b92a"
+  integrity sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==
   dependencies:
     p-defer "^1.0.0"
 
 map-cache@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
+  integrity sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=
 
 map-obj@^1.0.0, map-obj@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
+  integrity sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=
+
+map-obj@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.1.0.tgz#b91221b542734b9f14256c0132c897c5d7256fd5"
+  integrity sha512-glc9y00wgtwcDmp7GaE/0b0OnxpNJsVf3ael/An6Fe2Q51LLwN1er6sdomLRzz5h0+yMpiYLhWYF5R7HeqVd4g==
 
 map-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
+  integrity sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=
   dependencies:
     object-visit "^1.0.0"
 
+markdown-escapes@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535"
+  integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==
+
+markdown-table@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-2.0.0.tgz#194a90ced26d31fe753d8b9434430214c011865b"
+  integrity sha512-Ezda85ToJUBhM6WGaG6veasyym+Tbs3cMAw/ZhOPqXiYsr0jgocBV3j3nx+4lk47plLlIqjwuTm/ywVI+zjJ/A==
+  dependencies:
+    repeat-string "^1.0.0"
+
+mathml-tag-names@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
+  integrity sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
+  integrity sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==
   dependencies:
     hash-base "^3.0.0"
     inherits "^2.0.1"
     safe-buffer "^5.1.2"
 
+mdast-util-compact@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-util-compact/-/mdast-util-compact-2.0.1.tgz#cabc69a2f43103628326f35b1acf735d55c99490"
+  integrity sha512-7GlnT24gEwDrdAwEHrU4Vv5lLWrEer4KOkAiKT9nYstsTad7Oc1TwqT2zIMKRdZF7cTuaf+GA1E4Kv7jJh8mPA==
+  dependencies:
+    unist-util-visit "^2.0.0"
+
 mdn-data@2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
+  integrity sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==
+
+mdn-data@2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.6.tgz#852dc60fcaa5daa2e8cf6c9189c440ed3e042978"
+  integrity sha512-rQvjv71olwNHgiTbfPZFkJtjNMciWgswYeciZhtvWLO8bmX3TnhyA62I6sTWOyZssWHJJjY6/KiWwqQsWWsqOA==
 
-meant@~1.0.1:
+meant@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/meant/-/meant-1.0.2.tgz#5d0c78310a3d8ae1408a16be0fe0bd42a969f560"
   integrity sha512-KN+1uowN/NK+sT/Lzx7WSGIj2u+3xe5n2LbwObfjOhPZiA+cCfCm6idVl0RkEfjThkw5XJ96CyRcanq6GmKtUg==
@@ -6631,6 +8084,7 @@ meant@~1.0.1:
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+  integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
 mem@^1.1.0:
   version "1.1.0"
@@ -6642,6 +8096,7 @@ mem@^1.1.0:
 mem@^4.0.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/mem/-/mem-4.3.0.tgz#461af497bc4ae09608cdb2e60eefb69bff744178"
+  integrity sha512-qX2bG48pTqYRVmDB37rn/6PT7LcR8T7oAX3bf99u1Tt1nzxYfxkgqDwUwolPlXweM0XzBOBFzSx4kfp7KP1s/w==
   dependencies:
     map-age-cleaner "^0.1.1"
     mimic-fn "^2.0.0"
@@ -6650,6 +8105,7 @@ mem@^4.0.0:
 memory-fs@^0.4.1, memory-fs@~0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
+  integrity sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=
   dependencies:
     errno "^0.1.3"
     readable-stream "^2.0.1"
@@ -6657,6 +8113,7 @@ memory-fs@^0.4.1, memory-fs@~0.4.1:
 memory-fs@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.5.0.tgz#324c01288b88652966d161db77838720845a8e3c"
+  integrity sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==
   dependencies:
     errno "^0.1.3"
     readable-stream "^2.0.1"
@@ -6664,6 +8121,7 @@ memory-fs@^0.5.0:
 meow@^3.7.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
+  integrity sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=
   dependencies:
     camelcase-keys "^2.0.0"
     decamelize "^1.1.2"
@@ -6676,9 +8134,27 @@ meow@^3.7.0:
     redent "^1.0.0"
     trim-newlines "^1.0.0"
 
+meow@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-7.1.1.tgz#7c01595e3d337fcb0ec4e8eed1666ea95903d306"
+  integrity sha512-GWHvA5QOcS412WCo8vwKDlTelGLsCGBVevQB5Kva961rmNfun0PCbv5+xta2kUMFJyR8/oWnn7ddeKdosbAPbA==
+  dependencies:
+    "@types/minimist" "^1.2.0"
+    camelcase-keys "^6.2.2"
+    decamelize-keys "^1.1.0"
+    hard-rejection "^2.1.0"
+    minimist-options "4.1.0"
+    normalize-package-data "^2.5.0"
+    read-pkg-up "^7.0.1"
+    redent "^3.0.0"
+    trim-newlines "^3.0.0"
+    type-fest "^0.13.1"
+    yargs-parser "^18.1.3"
+
 merge-deep@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/merge-deep/-/merge-deep-3.0.2.tgz#f39fa100a4f1bd34ff29f7d2bf4508fbb8d83ad2"
+  integrity sha512-T7qC8kg4Zoti1cFd8Cr0M+qaZfOwjlPDEdZIIPPB2JZctjaPM4fX+i7HOId69tAti2fvO6X5ldfYUONDODsrkA==
   dependencies:
     arr-union "^3.1.0"
     clone-deep "^0.2.4"
@@ -6687,26 +8163,32 @@ merge-deep@^3.0.2:
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+  integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
 
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
+  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
-merge2@^1.2.3:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.3.0.tgz#5b366ee83b2f1582c48f87e47cf1a9352103ca81"
+merge2@^1.2.3, merge2@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
 methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+  integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
 microevent.ts@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/microevent.ts/-/microevent.ts-0.1.1.tgz#70b09b83f43df5172d0205a63025bce0f7357fa0"
+  integrity sha512-jo1OfR4TaEwd5HOrt5+tAZ9mqT4jmpNAusXtyfNzqVm9uiSYFZlKM1wYL4oU7azZW/PxQW53wM0S6OR1JHNa2g==
 
 micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^3.1.8:
   version "3.1.10"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
+  integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
   dependencies:
     arr-diff "^4.0.0"
     array-unique "^0.3.2"
@@ -6722,42 +8204,43 @@ micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^3.1.8:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
+micromatch@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
+  integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
+  dependencies:
+    braces "^3.0.1"
+    picomatch "^2.0.5"
+
 miller-rabin@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
+  integrity sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==
   dependencies:
     bn.js "^4.0.0"
     brorand "^1.0.1"
 
-mime-db@1.43.0, "mime-db@>= 1.43.0 < 2":
-  version "1.43.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.43.0.tgz#0a12e0502650e473d735535050e7c8f4eb4fae58"
-
-mime-db@1.44.0:
+mime-db@1.44.0, "mime-db@>= 1.43.0 < 2":
   version "1.44.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.44.0.tgz#fa11c5eb0aca1334b4233cb4d52f10c5a6272f92"
   integrity sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==
 
-mime-types@^2.1.12, mime-types@~2.1.19:
+mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
   version "2.1.27"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.27.tgz#47949f98e279ea53119f5722e0f34e529bec009f"
   integrity sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==
   dependencies:
     mime-db "1.44.0"
 
-mime-types@~2.1.17, mime-types@~2.1.24:
-  version "2.1.26"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.26.tgz#9c921fc09b7e149a65dfdc0da4d20997200b0a06"
-  dependencies:
-    mime-db "1.43.0"
-
 mime@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
 mime@^2.0.3, mime@^2.4.4:
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.4.tgz#bd7b91135fc6b01cde3e9bae33d659b63d8857e5"
+  version "2.4.6"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.6.tgz#e5b407c90db442f2beb5b162373d07b69affa4d1"
+  integrity sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA==
 
 mimic-fn@^1.0.0:
   version "1.2.0"
@@ -6767,10 +8250,17 @@ mimic-fn@^1.0.0:
 mimic-fn@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
+  integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
+
+min-indent@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
+  integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
 mini-css-extract-plugin@0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz#ac0059b02b9692515a637115b0cc9fed3a35c7b0"
+  integrity sha512-IuaLjruM0vMKhUUT51fQdQzBYTX49dLj8w68ALEAe2A4iYNpIC4eMac67mt3NzycvjOlf07/kYxJDc0RTl1Wqw==
   dependencies:
     loader-utils "^1.1.0"
     schema-utils "^1.0.0"
@@ -6779,10 +8269,12 @@ mini-css-extract-plugin@0.5.0:
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
+  integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
 
 minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
+  integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
 "minimatch@2 || 3", minimatch@3.0.4, minimatch@^3.0.4, minimatch@~3.0.2:
   version "3.0.4"
@@ -6791,6 +8283,15 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimist-options@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619"
+  integrity sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==
+  dependencies:
+    arrify "^1.0.1"
+    is-plain-obj "^1.1.0"
+    kind-of "^6.0.3"
+
 minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
@@ -6830,6 +8331,7 @@ mississippi@^3.0.0:
 mixin-deep@^1.2.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
+  integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
   dependencies:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
@@ -6837,6 +8339,7 @@ mixin-deep@^1.2.0:
 mixin-object@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/mixin-object/-/mixin-object-2.0.1.tgz#4fb949441dab182540f1fe035ba60e1947a5e57e"
+  integrity sha1-T7lJRB2rGCVA8f4DW6YOGUel5X4=
   dependencies:
     for-in "^0.1.3"
     is-extendable "^0.1.1"
@@ -6849,14 +8352,16 @@ mixin-object@^2.0.1:
     minimist "^1.2.5"
 
 monaco-editor-webpack-plugin@^1.8.1:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-1.8.2.tgz#3721b8d9a3e2e41b154cf2a2955a7d7246c03714"
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-1.9.0.tgz#5b547281b9f404057dc5d8c5722390df9ac90be6"
+  integrity sha512-tOiiToc94E1sb50BgZ8q8WK/bxus77SRrwCqIpAB5er3cpX78SULbEBY4YPOB8kDolOzKRt30WIHG/D6gz69Ww==
   dependencies:
     loader-utils "^1.2.3"
 
 monaco-editor@^0.19.0:
-  version "0.19.2"
-  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.19.2.tgz#57f07151e462640874561c89c0b41dfb08c3ca59"
+  version "0.19.3"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.19.3.tgz#1c994b3186c00650dbcd034d5370d46bf56c0663"
+  integrity sha512-2n1vJBVQF2Hhi7+r1mMeYsmlf18hjVb6E0v5SoMZyb4aeOmYPKun+CE3gYpiNA1KEvtSdaDHFBqH9d7Wd9vREg==
 
 move-concurrently@^1.0.1:
   version "1.0.1"
@@ -6878,6 +8383,7 @@ ms@2.0.0:
 ms@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
+  integrity sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==
 
 ms@^2.0.0, ms@^2.1.1:
   version "2.1.2"
@@ -6887,10 +8393,12 @@ ms@^2.0.0, ms@^2.1.1:
 multicast-dns-service-types@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
+  integrity sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=
 
 multicast-dns@^6.0.1:
   version "6.2.3"
   resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.3.tgz#a0ec7bd9055c4282f790c3c82f4e28db3b31b229"
+  integrity sha512-ji6J5enbMyGRHIAkAOu3WdV8nggqviKCEKtXcOqfphZZtQrmHKycfynJ2V7eVPUA4NhJ6V7Wf4TmGbTwKE9B6g==
   dependencies:
     dns-packet "^1.3.1"
     thunky "^1.0.2"
@@ -6898,6 +8406,7 @@ multicast-dns@^6.0.1:
 mute-stream@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
+  integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
 
 mute-stream@~0.0.4:
   version "0.0.8"
@@ -6905,12 +8414,14 @@ mute-stream@~0.0.4:
   integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
 
 nan@^2.12.1, nan@^2.13.2:
-  version "2.14.0"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
+  version "2.14.1"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
+  integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
 
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
+  integrity sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==
   dependencies:
     arr-diff "^4.0.0"
     array-unique "^0.3.2"
@@ -6927,22 +8438,27 @@ nanomatch@^1.2.9:
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+  integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
 negotiator@0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
+  integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
 
 neo-async@^2.5.0:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
+  integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
+  integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
 no-case@^2.2.0:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
+  integrity sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==
   dependencies:
     lower-case "^1.1.1"
 
@@ -6958,6 +8474,7 @@ node-fetch-npm@^2.0.2:
 node-fetch@^1.0.1:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
   dependencies:
     encoding "^0.1.11"
     is-stream "^1.0.1"
@@ -6965,10 +8482,12 @@ node-fetch@^1.0.1:
 node-forge@0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.9.0.tgz#d624050edbb44874adca12bb9a52ec63cb782579"
+  integrity sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==
 
 node-gyp@^3.8.0:
   version "3.8.0"
   resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.8.0.tgz#540304261c330e80d0d5edce253a68cb3964218c"
+  integrity sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA==
   dependencies:
     fstream "^1.0.0"
     glob "^7.0.3"
@@ -7003,10 +8522,12 @@ node-gyp@^5.0.2, node-gyp@^5.1.0:
 node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
+  integrity sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=
 
 node-libs-browser@^2.0.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.1.tgz#b64f513d18338625f90346d27b0d235e631f6425"
+  integrity sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q==
   dependencies:
     assert "^1.1.1"
     browserify-zlib "^0.2.0"
@@ -7035,16 +8556,17 @@ node-libs-browser@^2.0.0:
 node-modules-regexp@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
+  integrity sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=
 
-node-releases@^1.1.29, node-releases@^1.1.44:
-  version "1.1.44"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.44.tgz#cd66438a6eb875e3eb012b6a12e48d9f4326ffd7"
-  dependencies:
-    semver "^6.3.0"
+node-releases@^1.1.29, node-releases@^1.1.60:
+  version "1.1.61"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.61.tgz#707b0fca9ce4e11783612ba4a2fcba09047af16e"
+  integrity sha512-DD5vebQLg8jLCOzwupn954fbIiZht05DAZs0k2u8NStSe6h9XdsuIQL8hSRKYiU8WUQRznmSDrKGbv3ObOmC7g==
 
 node-sass@^4.13.0:
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.13.0.tgz#b647288babdd6a1cb726de4545516b31f90da066"
+  version "4.14.1"
+  resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.14.1.tgz#99c87ec2efb7047ed638fb4c9db7f3a42e2217b5"
+  integrity sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==
   dependencies:
     async-foreach "^0.1.3"
     chalk "^1.1.1"
@@ -7060,13 +8582,14 @@ node-sass@^4.13.0:
     node-gyp "^3.8.0"
     npmlog "^4.0.0"
     request "^2.88.0"
-    sass-graph "^2.2.4"
+    sass-graph "2.2.5"
     stdout-stream "^1.4.0"
     "true-case-path" "^1.0.2"
 
 "nopt@2 || 3":
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
+  integrity sha1-xkZdvwirzU2zWTF/eaxopkayj/k=
   dependencies:
     abbrev "1"
 
@@ -7091,20 +8614,29 @@ normalize-package-data@^2.0.0, normalize-package-data@^2.3.2, normalize-package-
 normalize-path@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
+  integrity sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=
   dependencies:
     remove-trailing-separator "^1.0.1"
 
-normalize-path@^3.0.0:
+normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
 normalize-range@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
+
+normalize-selector@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/normalize-selector/-/normalize-selector-0.2.0.tgz#d0b145eb691189c63a78d201dc4fdb1293ef0c03"
+  integrity sha1-0LFF62kRicY6eNIB3E/bEpPvDAM=
 
 normalize-url@^3.0.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
+  integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
 npm-audit-report@^1.3.3:
   version "1.3.3"
@@ -7194,10 +8726,10 @@ npm-profile@^4.0.2, npm-profile@^4.0.4:
     figgy-pudding "^3.4.1"
     npm-registry-fetch "^4.0.0"
 
-npm-registry-fetch@^4.0.0, npm-registry-fetch@^4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/npm-registry-fetch/-/npm-registry-fetch-4.0.5.tgz#cb87cf7f25bfb048d6c3ee19d115bebf93ea5bfa"
-  integrity sha512-yQ0/U4fYpCCqmueB2g8sc+89ckQ3eXpmU4+Yi2j5o/r0WkKvE2+Y0tK3DEILAtn2UaQTkjTHxIXe2/CSdit+/Q==
+npm-registry-fetch@^4.0.0, npm-registry-fetch@^4.0.7:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/npm-registry-fetch/-/npm-registry-fetch-4.0.7.tgz#57951bf6541e0246b34c9f9a38ab73607c9449d7"
+  integrity sha512-cny9v0+Mq6Tjz+e0erFAB+RYJ/AVGzkjnISiobqP8OWj9c9FLoZZu8/SPSKJWE17F1tk4018wfjV+ZbIbqC7fQ==
   dependencies:
     JSONStream "^1.3.4"
     bluebird "^3.5.1"
@@ -7220,9 +8752,9 @@ npm-user-validate@~1.0.0:
   integrity sha1-jOyg9c6gTU6TUZ73LQVXp1Ei6VE=
 
 npm@5.1.0, npm@>=6.14.4:
-  version "6.14.7"
-  resolved "https://registry.yarnpkg.com/npm/-/npm-6.14.7.tgz#011584b469467e5bc5acd5a0dbe58a3d46869582"
-  integrity sha512-swhsdpNpyXg4GbM6LpOQ6qaloQuIKizZ+Zh6JPXJQc59ka49100Js0WvZx594iaKSoFgkFq2s8uXFHS3/Xy2WQ==
+  version "6.14.8"
+  resolved "https://registry.yarnpkg.com/npm/-/npm-6.14.8.tgz#64ef754345639bc035982ec3f609353c8539033c"
+  integrity sha512-HBZVBMYs5blsj94GTeQZel7s9odVuuSUHy1+AlZh7rPVux1os2ashvEGLy/STNK7vUjbrCg5Kq9/GXisJgdf6A==
   dependencies:
     JSONStream "^1.3.5"
     abbrev "~1.1.1"
@@ -7280,7 +8812,7 @@ npm@5.1.0, npm@>=6.14.4:
     lodash.uniq "~4.5.0"
     lodash.without "~4.4.0"
     lru-cache "^5.1.1"
-    meant "~1.0.1"
+    meant "^1.0.2"
     mississippi "^3.0.0"
     mkdirp "^0.5.5"
     move-concurrently "^1.0.1"
@@ -7295,7 +8827,7 @@ npm@5.1.0, npm@>=6.14.4:
     npm-packlist "^1.4.8"
     npm-pick-manifest "^3.0.2"
     npm-profile "^4.0.4"
-    npm-registry-fetch "^4.0.5"
+    npm-registry-fetch "^4.0.7"
     npm-user-validate "~1.0.0"
     npmlog "~4.1.2"
     once "~1.4.0"
@@ -7351,21 +8883,24 @@ npm@5.1.0, npm@>=6.14.4:
     set-blocking "~2.0.0"
 
 npx@^10.2.0:
-  version "10.2.0"
-  resolved "https://registry.yarnpkg.com/npx/-/npx-10.2.0.tgz#f8c9ad30c68f2d13c36a4759cbbecd9c78388044"
+  version "10.2.2"
+  resolved "https://registry.yarnpkg.com/npx/-/npx-10.2.2.tgz#de4be1b76e6bcbf750486925b34a07eed1db01b4"
+  integrity sha512-eImmySusyeWphzs5iNh791XbZnZG0FSNvM4KSah34pdQQIDsdTDhIwg1sjN3AIVcjGLpbQ/YcfqHPshKZQK1fA==
   dependencies:
-    libnpx "10.2.0"
+    libnpx "10.2.2"
     npm "5.1.0"
 
 nth-check@^1.0.2, nth-check@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
+  integrity sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==
   dependencies:
     boolbase "~1.0.0"
 
 num2fraction@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
+  integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
 
 number-is-nan@^1.0.0:
   version "1.0.1"
@@ -7390,6 +8925,7 @@ object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
 object-copy@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
+  integrity sha1-fn2Fi3gb18mRpBupde04EnVOmYw=
   dependencies:
     copy-descriptor "^0.1.0"
     define-property "^0.2.5"
@@ -7398,6 +8934,7 @@ object-copy@^0.1.0:
 object-hash@^1.1.4:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df"
+  integrity sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==
 
 object-inspect@^1.7.0:
   version "1.8.0"
@@ -7405,8 +8942,12 @@ object-inspect@^1.7.0:
   integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
 
 object-is@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.2.tgz#6b80eb84fe451498f65007982f035a5b445edec4"
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.2.tgz#c5d2e87ff9e119f78b7a088441519e2eec1573b6"
+  integrity sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
 
 object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
@@ -7416,6 +8957,7 @@ object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1:
 object-visit@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
+  integrity sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=
   dependencies:
     isobject "^3.0.0"
 
@@ -7432,13 +8974,14 @@ object.assign@^4.1.0:
 object.fromentries@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.2.tgz#4a09c9b9bb3843dd0f89acdb517a794d4f355ac9"
+  integrity sha512-r3ZiBH7MQppDJVLx6fhD618GKNG40CZYH9wgwdhKxBDDbQgjeWGGd4AtkZad84d291YxvWe7bJGuE65Anh0dxQ==
   dependencies:
     define-properties "^1.1.3"
     es-abstract "^1.17.0-next.1"
     function-bind "^1.1.1"
     has "^1.0.3"
 
-object.getownpropertydescriptors@^2.0.3:
+object.getownpropertydescriptors@^2.0.3, object.getownpropertydescriptors@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz#369bf1f9592d8ab89d712dced5cb81c7c5352649"
   integrity sha512-Z53Oah9A3TdLoblT7VKJaTDdXdT+lQO+cNpKVnya5JDe9uLvzu1YyY1yFDFrcxrlRgWrEFH0jJtD/IbuwjcEVg==
@@ -7449,12 +8992,14 @@ object.getownpropertydescriptors@^2.0.3:
 object.pick@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
+  integrity sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=
   dependencies:
     isobject "^3.0.1"
 
 object.values@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.1.tgz#68a99ecde356b7e9295a3c5e0ce31dc8c953de5e"
+  integrity sha512-WTa54g2K8iu0kmS/us18jEmdv1a4Wi//BZ/DTVYEcH0XhLM5NYdpDHja3gt57VrZLcNAO2WGA+KpWsDBaHt6eA==
   dependencies:
     define-properties "^1.1.3"
     es-abstract "^1.17.0-next.1"
@@ -7464,10 +9009,12 @@ object.values@^1.1.0:
 obuf@^1.0.0, obuf@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
+  integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==
 
 office-ui-fabric-react@^6.203.2:
-  version "6.211.1"
-  resolved "https://registry.yarnpkg.com/office-ui-fabric-react/-/office-ui-fabric-react-6.211.1.tgz#ebe349c6935b1298523ccc72d62e5f74647a0be5"
+  version "6.214.1"
+  resolved "https://registry.yarnpkg.com/office-ui-fabric-react/-/office-ui-fabric-react-6.214.1.tgz#e34831fd968b58fd4620a99012446b4e378ac345"
+  integrity sha512-aFTV9pAzx3yWoRkqhOn2J6HoI18fzZ0qXCUfjeJd/hkQ3wL/XwDW+AM/wasvhKAHjW+icNoDuhgC2YZ48S0W1g==
   dependencies:
     "@microsoft/load-themed-styles" "^1.7.13"
     "@uifabric/foundation" "^0.8.3"
@@ -7475,34 +9022,41 @@ office-ui-fabric-react@^6.203.2:
     "@uifabric/merge-styles" "^6.19.4"
     "@uifabric/set-version" "^1.1.3"
     "@uifabric/styling" "^6.50.7"
-    "@uifabric/utilities" "^6.45.1"
+    "@uifabric/utilities" "^6.45.2"
     prop-types "^15.5.10"
     tslib "^1.7.1"
 
 office-ui-fabric-react@^7.78.0:
-  version "7.78.3"
-  resolved "https://registry.yarnpkg.com/office-ui-fabric-react/-/office-ui-fabric-react-7.78.3.tgz#2bd726e538a246b8d097e9791c4455da5f7eb81e"
-  dependencies:
-    "@microsoft/load-themed-styles" "^1.7.13"
-    "@uifabric/foundation" "^7.5.0"
-    "@uifabric/icons" "^7.3.0"
-    "@uifabric/merge-styles" "^7.8.1"
-    "@uifabric/react-hooks" "^7.0.1"
-    "@uifabric/set-version" "^7.0.2"
-    "@uifabric/styling" "^7.8.1"
-    "@uifabric/utilities" "^7.9.0"
-    prop-types "^15.5.10"
-    tslib "^1.7.1"
+  version "7.134.3"
+  resolved "https://registry.yarnpkg.com/office-ui-fabric-react/-/office-ui-fabric-react-7.134.3.tgz#e0f26c86661b357ce0bea47a7c7562db1810778c"
+  integrity sha512-sVOoEIISOe6gVo+5bkiWGrKyiGdAEPB7h3rkfVgfZrQvjt+sgLDjVi6qXHDnmi3p4v6+YeWVdPa73TTAylDzCg==
+  dependencies:
+    "@fluentui/date-time-utilities" "^7.8.0"
+    "@fluentui/react-focus" "^7.16.0"
+    "@fluentui/react-icons" "^0.3.0"
+    "@fluentui/react-window-provider" "^0.3.0"
+    "@microsoft/load-themed-styles" "^1.10.26"
+    "@uifabric/foundation" "^7.9.0"
+    "@uifabric/icons" "^7.5.0"
+    "@uifabric/merge-styles" "^7.18.0"
+    "@uifabric/react-hooks" "^7.12.0"
+    "@uifabric/set-version" "^7.0.22"
+    "@uifabric/styling" "^7.16.0"
+    "@uifabric/utilities" "^7.31.0"
+    prop-types "^15.7.2"
+    tslib "^1.10.0"
 
 on-finished@~2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  integrity sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=
   dependencies:
     ee-first "1.1.1"
 
 on-headers@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.2.tgz#772b0ae6aaa525c399e489adfad90c403eb3c28f"
+  integrity sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==
 
 once@^1.3.0, once@^1.3.1, once@^1.4.0, once@~1.4.0:
   version "1.4.0"
@@ -7514,29 +9068,33 @@ once@^1.3.0, once@^1.3.1, once@^1.4.0, once@~1.4.0:
 onetime@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
+  integrity sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=
   dependencies:
     mimic-fn "^1.0.0"
 
 open@^6.3.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/open/-/open-6.4.0.tgz#5c13e96d0dc894686164f18965ecfe889ecfc8a9"
+  integrity sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==
   dependencies:
     is-wsl "^1.1.0"
 
 opener@^1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.1.tgz#6d2f0e77f1a0af0032aca716c2c1fbb8e7e8abed"
-  integrity sha512-goYSy5c2UXE4Ra1xixabeVh1guIX/ZV/YokJksb6q2lubWu6UbvPQ20p542/sFIll1nl8JnCyK9oBaOcCWXwvA==
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
+  integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
 
 opn@^5.1.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"
+  integrity sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==
   dependencies:
     is-wsl "^1.1.0"
 
 optimize-css-assets-webpack-plugin@5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.1.tgz#9eb500711d35165b45e7fd60ba2df40cb3eb9159"
+  integrity sha512-Rqm6sSjWtx9FchdP0uzTQDc7GXDKnwVEGoSxjezPkzMewx7gEWE9IMUYKmigTRC4U3RaNSwYVnUDLuIdtTpm0A==
   dependencies:
     cssnano "^4.1.0"
     last-call-webpack-plugin "^3.0.0"
@@ -7544,6 +9102,7 @@ optimize-css-assets-webpack-plugin@5.0.1:
 optionator@^0.8.2:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
+  integrity sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==
   dependencies:
     deep-is "~0.1.3"
     fast-levenshtein "~2.0.6"
@@ -7555,24 +9114,20 @@ optionator@^0.8.2:
 original@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/original/-/original-1.0.2.tgz#e442a61cffe1c5fd20a65f3261c26663b303f25f"
+  integrity sha512-hyBVl6iqqUOJ8FqRe+l/gS8H+kKYjrEndd5Pm1MfBtsEKA038HkkdbAl/72EAXGyonD/PFsvmVG+EvcIpliMBg==
   dependencies:
     url-parse "^1.4.3"
 
 os-browserify@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
+  integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
 
 os-homedir@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
   integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
 
-os-locale@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-1.4.0.tgz#20f9f17ae29ed345e8bde583b13d2009803c14d9"
-  dependencies:
-    lcid "^1.0.0"
-
 os-locale@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-2.1.0.tgz#42bc2900a6b5b8bd17376c8e882b65afccf24bf2"
@@ -7585,6 +9140,7 @@ os-locale@^2.0.0:
 os-locale@^3.0.0, os-locale@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.1.0.tgz#a802a6ee17f24c10483ab9935719cef4ed16bf1a"
+  integrity sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==
   dependencies:
     execa "^1.0.0"
     lcid "^2.0.0"
@@ -7606,6 +9162,7 @@ osenv@0, osenv@^0.1.4, osenv@^0.1.5:
 p-defer@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
+  integrity sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=
 
 p-finally@^1.0.0:
   version "1.0.0"
@@ -7615,6 +9172,7 @@ p-finally@^1.0.0:
 p-is-promise@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-2.1.0.tgz#918cebaea248a62cf7ffab8e3bca8c5f882fc42e"
+  integrity sha512-Y3W0wlRPK8ZMRbNq97l4M5otioeA5lm1z7bkNkxCka8HSPjR0xRWmpCmc9utiaLP9Jb1eD8BgeIxTW4AIF45Pg==
 
 p-limit@^1.1.0:
   version "1.3.0"
@@ -7623,7 +9181,7 @@ p-limit@^1.1.0:
   dependencies:
     p-try "^1.0.0"
 
-p-limit@^2.0.0:
+p-limit@^2.0.0, p-limit@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
   integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
@@ -7644,9 +9202,17 @@ p-locate@^3.0.0:
   dependencies:
     p-limit "^2.0.0"
 
+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
 p-map@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b"
+  integrity sha512-r6zKACMNhjPJMTl8KcFH4li//gkrXWfbD6feV8l6doRHlzljFWGJ2AP6iKaCJXyZmAUMOPtvbW7EXkbWO/pLEA==
 
 p-try@^1.0.0:
   version "1.0.0"
@@ -7705,8 +9271,9 @@ pacote@^9.1.0, pacote@^9.5.12, pacote@^9.5.3:
     which "^1.3.1"
 
 pako@~1.0.5:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.10.tgz#4328badb5086a426aa90f541977d4955da5c9732"
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
 
 parallel-transform@^1.1.0:
   version "1.2.0"
@@ -7720,6 +9287,7 @@ parallel-transform@^1.1.0:
 param-case@2.1.x:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
+  integrity sha1-35T9jPZTHs915r75oIWPvHK+Ikc=
   dependencies:
     no-case "^2.2.0"
 
@@ -7745,20 +9313,33 @@ parcoord-es@^2.2.10:
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
   dependencies:
     callsites "^3.0.0"
 
-parse-asn1@^5.0.0:
-  version "5.1.5"
-  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.5.tgz#003271343da58dc94cace494faef3d2147ecea0e"
+parse-asn1@^5.0.0, parse-asn1@^5.1.5:
+  version "5.1.6"
+  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.6.tgz#385080a3ec13cb62a62d39409cb3e88844cdaed4"
+  integrity sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==
   dependencies:
-    asn1.js "^4.0.0"
+    asn1.js "^5.2.0"
     browserify-aes "^1.0.0"
-    create-hash "^1.1.0"
     evp_bytestokey "^1.0.0"
     pbkdf2 "^3.0.3"
     safe-buffer "^5.1.1"
 
+parse-entities@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
+  integrity sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
 parse-json@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
@@ -7769,29 +9350,45 @@ parse-json@^2.2.0:
 parse-json@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
+  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
   dependencies:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
+parse-json@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.1.0.tgz#f96088cdf24a8faa9aea9a009f2d9d942c999646"
+  integrity sha512-+mi/lmVVNKFNVyLXV31ERiy2CY5E1/F6QtJFEzoChPRwwngMNXRDQ9GJ5WdE2Z2P4AujsOi0/+2qHID68KwfIQ==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
 parseurl@~1.3.2, parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
+  integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
 
 pascalcase@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
+  integrity sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=
 
 path-browserify@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a"
+  integrity sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==
 
 path-dirname@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
+  integrity sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=
 
 path-exists@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
+  integrity sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=
   dependencies:
     pinkie-promise "^2.0.0"
 
@@ -7800,6 +9397,11 @@ path-exists@^3.0.0:
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
   integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
 
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
 path-is-absolute@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
@@ -7823,10 +9425,12 @@ path-parse@^1.0.6:
 path-to-regexp@0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+  integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
 path-type@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
+  integrity sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=
   dependencies:
     graceful-fs "^4.1.2"
     pify "^2.0.0"
@@ -7842,12 +9446,19 @@ path-type@^2.0.0:
 path-type@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
+  integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==
   dependencies:
     pify "^3.0.0"
 
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
 pbkdf2@^3.0.3:
-  version "3.0.17"
-  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.17.tgz#976c206530617b14ebb32114239f7b09336e93a6"
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.1.tgz#cb8724b0fada984596856d1a6ebafd3584654b94"
+  integrity sha512-4Ejy1OPxi9f2tt1rRV7Go7zmfDQ+ZectEQz3VGUQhgq62HtIRPDyG/JtnwIxs6x3uNMwo2V7q1fMvKjb+Tnpqg==
   dependencies:
     create-hash "^1.1.2"
     create-hmac "^1.1.4"
@@ -7860,6 +9471,11 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
+picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
+  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
+
 pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -7873,90 +9489,104 @@ pify@^3.0.0:
 pify@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
+  integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
 pinkie-promise@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  integrity sha1-ITXW36ejWMBprJsXh3YogihFD/o=
   dependencies:
     pinkie "^2.0.0"
 
 pinkie@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+  integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
 
 pirates@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.1.tgz#643a92caf894566f91b2b986d2c66950a8e2fb87"
+  integrity sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==
   dependencies:
     node-modules-regexp "^1.0.0"
 
 pkg-dir@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-1.0.0.tgz#7a4b508a8d5bb2d629d447056ff4e9c9314cf3d4"
+  integrity sha1-ektQio1bstYp1EcFb/TpyTFM89Q=
   dependencies:
     find-up "^1.0.0"
 
 pkg-dir@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
+  integrity sha1-9tXREJ4Z1j7fQo4L1X4Sd3YVM0s=
   dependencies:
     find-up "^2.1.0"
 
 pkg-dir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
+  integrity sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==
   dependencies:
     find-up "^3.0.0"
 
 pkg-up@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-2.0.0.tgz#c819ac728059a461cab1c3889a2be3c49a004d7f"
+  integrity sha1-yBmscoBZpGHKscOImivjxJoATX8=
   dependencies:
     find-up "^2.1.0"
 
 pnp-webpack-plugin@1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.2.1.tgz#cd9d698df2a6fcf7255093c1c9511adf65b9421b"
+  integrity sha512-W6GctK7K2qQiVR+gYSv/Gyt6jwwIH4vwdviFqx+Y2jAtVf5eZyYIDf5Ac2NCDMBiX5yWscBLZElPTsyA1UtVVA==
   dependencies:
     ts-pnp "^1.0.0"
 
 portfinder@^1.0.9:
-  version "1.0.25"
-  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.25.tgz#254fd337ffba869f4b9d37edc298059cb4d35eca"
+  version "1.0.28"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
+  integrity sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==
   dependencies:
     async "^2.6.2"
     debug "^3.1.1"
-    mkdirp "^0.5.1"
+    mkdirp "^0.5.5"
 
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
+  integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
 postcss-attribute-case-insensitive@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.1.tgz#b2a721a0d279c2f9103a36331c88981526428cc7"
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.2.tgz#d93e46b504589e94ac7277b0463226c68041a880"
+  integrity sha512-clkFxk/9pcdb4Vkn0hAHq3YnxBQ2p0CGD1dy24jN+reBck+EWxMbxSUqN4Yj7t0w8csl87K6p0gxBe1utkJsYA==
   dependencies:
     postcss "^7.0.2"
-    postcss-selector-parser "^5.0.0"
+    postcss-selector-parser "^6.0.2"
 
 postcss-browser-comments@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postcss-browser-comments/-/postcss-browser-comments-2.0.0.tgz#dc48d6a8ddbff188a80a000b7393436cb18aed88"
+  integrity sha512-xGG0UvoxwBc4Yx4JX3gc0RuDl1kc4bVihCzzk6UC72YPfq5fu3c717Nu8Un3nvnq1BJ31gBnFXIG/OaUTnpHgA==
   dependencies:
     postcss "^7.0.2"
 
 postcss-calc@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.1.tgz#36d77bab023b0ecbb9789d84dcb23c4941145436"
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.4.tgz#5e177ddb417341e6d4a193c5d9fd8ada79094f8b"
+  integrity sha512-0I79VRAd1UTkaHzY9w83P39YGO/M3bG7/tNLrHGEunBolfoGM0hSjrGvjoeaj0JE/zIw5GsI2KZ0UwDJqv5hjw==
   dependencies:
-    css-unit-converter "^1.1.1"
-    postcss "^7.0.5"
-    postcss-selector-parser "^5.0.0-rc.4"
-    postcss-value-parser "^3.3.1"
+    postcss "^7.0.27"
+    postcss-selector-parser "^6.0.2"
+    postcss-value-parser "^4.0.2"
 
 postcss-color-functional-notation@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz#5efd37a88fbabeb00a2966d1e53d98ced93f74e0"
+  integrity sha512-ZBARCypjEDofW4P6IdPVTLhDNXPRn8T2s1zHbZidW6rPaaZvcnCS2soYFIQJrMZSxiePJ2XIYTlcb2ztr/eT2g==
   dependencies:
     postcss "^7.0.2"
     postcss-values-parser "^2.0.0"
@@ -7964,6 +9594,7 @@ postcss-color-functional-notation@^2.0.1:
 postcss-color-gray@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/postcss-color-gray/-/postcss-color-gray-5.0.0.tgz#532a31eb909f8da898ceffe296fdc1f864be8547"
+  integrity sha512-q6BuRnAGKM/ZRpfDascZlIZPjvwsRye7UDNalqVz3s7GDxMtqPY6+Q871liNxsonUw8oC61OG+PSaysYpl1bnw==
   dependencies:
     "@csstools/convert-colors" "^1.4.0"
     postcss "^7.0.5"
@@ -7972,6 +9603,7 @@ postcss-color-gray@^5.0.0:
 postcss-color-hex-alpha@^5.0.2:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/postcss-color-hex-alpha/-/postcss-color-hex-alpha-5.0.3.tgz#a8d9ca4c39d497c9661e374b9c51899ef0f87388"
+  integrity sha512-PF4GDel8q3kkreVXKLAGNpHKilXsZ6xuu+mOQMHWHLPNyjiUBOr75sp5ZKJfmv1MCus5/DWUGcK9hm6qHEnXYw==
   dependencies:
     postcss "^7.0.14"
     postcss-values-parser "^2.0.1"
@@ -7979,6 +9611,7 @@ postcss-color-hex-alpha@^5.0.2:
 postcss-color-mod-function@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz#816ba145ac11cc3cb6baa905a75a49f903e4d31d"
+  integrity sha512-YP4VG+xufxaVtzV6ZmhEtc+/aTXH3d0JLpnYfxqTvwZPbJhWqp8bSY3nfNzNRFLgB4XSaBA82OE4VjOOKpCdVQ==
   dependencies:
     "@csstools/convert-colors" "^1.4.0"
     postcss "^7.0.2"
@@ -7987,6 +9620,7 @@ postcss-color-mod-function@^3.0.3:
 postcss-color-rebeccapurple@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-4.0.1.tgz#c7a89be872bb74e45b1e3022bfe5748823e6de77"
+  integrity sha512-aAe3OhkS6qJXBbqzvZth2Au4V3KieR5sRQ4ptb2b2O8wgvB3SJBsdG+jsn2BZbbwekDG8nTfcCNKcSfe/lEy8g==
   dependencies:
     postcss "^7.0.2"
     postcss-values-parser "^2.0.0"
@@ -7994,6 +9628,7 @@ postcss-color-rebeccapurple@^4.0.1:
 postcss-colormin@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.3.tgz#ae060bce93ed794ac71264f08132d550956bd381"
+  integrity sha512-WyQFAdDZpExQh32j0U0feWisZ0dmOtPl44qYmJKkq9xFWY3p+4qnRzCHeNrkeRhwPHz9bQ3mo0/yVkaply0MNw==
   dependencies:
     browserslist "^4.0.0"
     color "^3.0.0"
@@ -8004,6 +9639,7 @@ postcss-colormin@^4.0.3:
 postcss-convert-values@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-4.0.1.tgz#ca3813ed4da0f812f9d43703584e449ebe189a7f"
+  integrity sha512-Kisdo1y77KUC0Jmn0OXU/COOJbzM8cImvw1ZFsBgBgMgb1iL23Zs/LXRe3r+EZqM3vGYKdQ2YJVQ5VkJI+zEJQ==
   dependencies:
     postcss "^7.0.0"
     postcss-value-parser "^3.0.0"
@@ -8011,12 +9647,14 @@ postcss-convert-values@^4.0.1:
 postcss-custom-media@^7.0.7:
   version "7.0.8"
   resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-7.0.8.tgz#fffd13ffeffad73621be5f387076a28b00294e0c"
+  integrity sha512-c9s5iX0Ge15o00HKbuRuTqNndsJUbaXdiNsksnVH8H4gdc+zbLzr/UasOwNG6CTDpLFekVY4672eWdiiWu2GUg==
   dependencies:
     postcss "^7.0.14"
 
 postcss-custom-properties@^8.0.9:
   version "8.0.11"
   resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-8.0.11.tgz#2d61772d6e92f22f5e0d52602df8fae46fa30d97"
+  integrity sha512-nm+o0eLdYqdnJ5abAJeXp4CEU1c1k+eB2yMCvhgzsds/e0umabFrN6HoTy/8Q4K5ilxERdl/JD1LO5ANoYBeMA==
   dependencies:
     postcss "^7.0.17"
     postcss-values-parser "^2.0.1"
@@ -8024,6 +9662,7 @@ postcss-custom-properties@^8.0.9:
 postcss-custom-selectors@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/postcss-custom-selectors/-/postcss-custom-selectors-5.1.2.tgz#64858c6eb2ecff2fb41d0b28c9dd7b3db4de7fba"
+  integrity sha512-DSGDhqinCqXqlS4R7KGxL1OSycd1lydugJ1ky4iRXPHdBRiozyMHrdu0H3o7qNOCiZwySZTUI5MV0T8QhCLu+w==
   dependencies:
     postcss "^7.0.2"
     postcss-selector-parser "^5.0.0-rc.3"
@@ -8031,6 +9670,7 @@ postcss-custom-selectors@^5.1.2:
 postcss-dir-pseudo-class@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-5.0.0.tgz#6e3a4177d0edb3abcc85fdb6fbb1c26dabaeaba2"
+  integrity sha512-3pm4oq8HYWMZePJY+5ANriPs3P07q+LW6FAdTlkFH2XqDdP4HeeJYMOzn0HYLhRSjBO3fhiqSwwU9xEULSrPgw==
   dependencies:
     postcss "^7.0.2"
     postcss-selector-parser "^5.0.0-rc.3"
@@ -8038,30 +9678,35 @@ postcss-dir-pseudo-class@^5.0.0:
 postcss-discard-comments@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz#1fbabd2c246bff6aaad7997b2b0918f4d7af4033"
+  integrity sha512-RJutN259iuRf3IW7GZyLM5Sw4GLTOH8FmsXBnv8Ab/Tc2k4SR4qbV4DNbyyY4+Sjo362SyDmW2DQ7lBSChrpkg==
   dependencies:
     postcss "^7.0.0"
 
 postcss-discard-duplicates@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-4.0.2.tgz#3fe133cd3c82282e550fc9b239176a9207b784eb"
+  integrity sha512-ZNQfR1gPNAiXZhgENFfEglF93pciw0WxMkJeVmw8eF+JZBbMD7jp6C67GqJAXVZP2BWbOztKfbsdmMp/k8c6oQ==
   dependencies:
     postcss "^7.0.0"
 
 postcss-discard-empty@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-4.0.1.tgz#c8c951e9f73ed9428019458444a02ad90bb9f765"
+  integrity sha512-B9miTzbznhDjTfjvipfHoqbWKwd0Mj+/fL5s1QOz06wufguil+Xheo4XpOnc4NqKYBCNqqEzgPv2aPBIJLox0w==
   dependencies:
     postcss "^7.0.0"
 
 postcss-discard-overridden@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-4.0.1.tgz#652aef8a96726f029f5e3e00146ee7a4e755ff57"
+  integrity sha512-IYY2bEDD7g1XM1IDEsUT4//iEYCxAmP5oDSFMVU/JVvT7gh+l4fmjciLqGgwjdWpQIdb0Che2VX00QObS5+cTg==
   dependencies:
     postcss "^7.0.0"
 
 postcss-double-position-gradients@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/postcss-double-position-gradients/-/postcss-double-position-gradients-1.0.0.tgz#fc927d52fddc896cb3a2812ebc5df147e110522e"
+  integrity sha512-G+nV8EnQq25fOI8CH/B6krEohGWnF5+3A6H/+JEpOncu5dCnkS1QQ6+ct3Jkaepw1NGVqqOZH6lqrm244mCftA==
   dependencies:
     postcss "^7.0.5"
     postcss-values-parser "^2.0.0"
@@ -8069,6 +9714,7 @@ postcss-double-position-gradients@^1.0.0:
 postcss-env-function@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/postcss-env-function/-/postcss-env-function-2.0.2.tgz#0f3e3d3c57f094a92c2baf4b6241f0b0da5365d7"
+  integrity sha512-rwac4BuZlITeUbiBq60h/xbLzXY43qOsIErngWa4l7Mt+RaSkT7QBjXVGTcBHupykkblHMDrBFh30zchYPaOUw==
   dependencies:
     postcss "^7.0.2"
     postcss-values-parser "^2.0.0"
@@ -8076,36 +9722,49 @@ postcss-env-function@^2.0.2:
 postcss-flexbugs-fixes@4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.1.0.tgz#e094a9df1783e2200b7b19f875dcad3b3aff8b20"
+  integrity sha512-jr1LHxQvStNNAHlgco6PzY308zvLklh7SJVYuWUwyUQncofaAlD2l+P/gxKHOdqWKe7xJSkVLFF/2Tp+JqMSZA==
   dependencies:
     postcss "^7.0.0"
 
 postcss-focus-visible@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/postcss-focus-visible/-/postcss-focus-visible-4.0.0.tgz#477d107113ade6024b14128317ade2bd1e17046e"
+  integrity sha512-Z5CkWBw0+idJHSV6+Bgf2peDOFf/x4o+vX/pwcNYrWpXFrSfTkQ3JQ1ojrq9yS+upnAlNRHeg8uEwFTgorjI8g==
   dependencies:
     postcss "^7.0.2"
 
 postcss-focus-within@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-focus-within/-/postcss-focus-within-3.0.0.tgz#763b8788596cee9b874c999201cdde80659ef680"
+  integrity sha512-W0APui8jQeBKbCGZudW37EeMCjDeVxKgiYfIIEo8Bdh5SpB9sxds/Iq8SEuzS0Q4YFOlG7EPFulbbxujpkrV2w==
   dependencies:
     postcss "^7.0.2"
 
 postcss-font-variant@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/postcss-font-variant/-/postcss-font-variant-4.0.0.tgz#71dd3c6c10a0d846c5eda07803439617bbbabacc"
+  integrity sha512-M8BFYKOvCrI2aITzDad7kWuXXTm0YhGdP9Q8HanmN4EF1Hmcgs1KK5rSHylt/lUJe8yLxiSwWAHdScoEiIxztg==
   dependencies:
     postcss "^7.0.2"
 
 postcss-gap-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz#431c192ab3ed96a3c3d09f2ff615960f902c1715"
+  integrity sha512-QZSqDaMgXCHuHTEzMsS2KfVDOq7ZFiknSpkrPJY6jmxbugUPTuSzs/vuE5I3zv0WAS+3vhrlqhijiprnuQfzmg==
   dependencies:
     postcss "^7.0.2"
 
+postcss-html@^0.36.0:
+  version "0.36.0"
+  resolved "https://registry.yarnpkg.com/postcss-html/-/postcss-html-0.36.0.tgz#b40913f94eaacc2453fd30a1327ad6ee1f88b204"
+  integrity sha512-HeiOxGcuwID0AFsNAL0ox3mW6MHH5cstWN1Z3Y+n6H+g12ih7LHdYxWwEA/QmrebctLjo79xz9ouK3MroHwOJw==
+  dependencies:
+    htmlparser2 "^3.10.0"
+
 postcss-image-set-function@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/postcss-image-set-function/-/postcss-image-set-function-3.0.1.tgz#28920a2f29945bed4c3198d7df6496d410d3f288"
+  integrity sha512-oPTcFFip5LZy8Y/whto91L9xdRHCWEMs3e1MdJxhgt4jy2WYXfhkng59fH5qLXSCPN8k4n94p1Czrfe5IOkKUw==
   dependencies:
     postcss "^7.0.2"
     postcss-values-parser "^2.0.0"
@@ -8113,6 +9772,7 @@ postcss-image-set-function@^3.0.1:
 postcss-initial@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-3.0.2.tgz#f018563694b3c16ae8eaabe3c585ac6319637b2d"
+  integrity sha512-ugA2wKonC0xeNHgirR4D3VWHs2JcU08WAi1KFLVcnb7IN89phID6Qtg2RIctWbnvp1TM2BOmDtX8GGLCKdR8YA==
   dependencies:
     lodash.template "^4.5.0"
     postcss "^7.0.2"
@@ -8120,14 +9780,23 @@ postcss-initial@^3.0.0:
 postcss-lab-function@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz#bb51a6856cd12289ab4ae20db1e3821ef13d7d2e"
+  integrity sha512-whLy1IeZKY+3fYdqQFuDBf8Auw+qFuVnChWjmxm/UhHWqNHZx+B99EwxTvGYmUBqe3Fjxs4L1BoZTJmPu6usVg==
   dependencies:
     "@csstools/convert-colors" "^1.4.0"
     postcss "^7.0.2"
     postcss-values-parser "^2.0.0"
 
+postcss-less@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-3.1.4.tgz#369f58642b5928ef898ffbc1a6e93c958304c5ad"
+  integrity sha512-7TvleQWNM2QLcHqvudt3VYjULVB49uiW6XzEUFmvwHzvsOEF5MwBrIXZDJQvJNFGjJQTzSzZnDoCJ8h/ljyGXA==
+  dependencies:
+    postcss "^7.0.14"
+
 postcss-load-config@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.0.tgz#c84d692b7bb7b41ddced94ee62e8ab31b417b003"
+  integrity sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==
   dependencies:
     cosmiconfig "^5.0.0"
     import-cwd "^2.0.0"
@@ -8135,6 +9804,7 @@ postcss-load-config@^2.0.0:
 postcss-loader@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-3.0.0.tgz#6b97943e47c72d845fa9e03f273773d4e8dd6c2d"
+  integrity sha512-cLWoDEY5OwHcAjDnkyRQzAXfs2jrKjXpO/HQFcc5b5u/r7aa471wdmChmwfnv7x2u840iat/wi0lQ5nbRgSkUA==
   dependencies:
     loader-utils "^1.1.0"
     postcss "^7.0.0"
@@ -8144,18 +9814,26 @@ postcss-loader@3.0.0:
 postcss-logical@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-logical/-/postcss-logical-3.0.0.tgz#2495d0f8b82e9f262725f75f9401b34e7b45d5b5"
+  integrity sha512-1SUKdJc2vuMOmeItqGuNaC+N8MzBWFWEkAnRnLpFYj1tGGa7NqyVBujfRtgNa2gXR+6RkGUiB2O5Vmh7E2RmiA==
   dependencies:
     postcss "^7.0.2"
 
 postcss-media-minmax@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/postcss-media-minmax/-/postcss-media-minmax-4.0.0.tgz#b75bb6cbc217c8ac49433e12f22048814a4f5ed5"
+  integrity sha512-fo9moya6qyxsjbFAYl97qKO9gyre3qvbMnkOZeZwlsW6XYFsvs2DMGDlchVLfAd8LHPZDxivu/+qW2SMQeTHBw==
   dependencies:
     postcss "^7.0.2"
 
+postcss-media-query-parser@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
+  integrity sha1-J7Ocb02U+Bsac7j3Y1HGCeXO8kQ=
+
 postcss-merge-longhand@^4.0.11:
   version "4.0.11"
   resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz#62f49a13e4a0ee04e7b98f42bb16062ca2549e24"
+  integrity sha512-alx/zmoeXvJjp7L4mxEMjh8lxVlDFX1gqWHzaaQewwMZiVhLo42TEClKaeHbRf6J7j82ZOdTJ808RtN0ZOZwvw==
   dependencies:
     css-color-names "0.0.4"
     postcss "^7.0.0"
@@ -8165,6 +9843,7 @@ postcss-merge-longhand@^4.0.11:
 postcss-merge-rules@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-4.0.3.tgz#362bea4ff5a1f98e4075a713c6cb25aefef9a650"
+  integrity sha512-U7e3r1SbvYzO0Jr3UT/zKBVgYYyhAz0aitvGIYOYK5CPmkNih+WDSsS5tvPrJ8YMQYlEMvsZIiqmn7HdFUaeEQ==
   dependencies:
     browserslist "^4.0.0"
     caniuse-api "^3.0.0"
@@ -8176,6 +9855,7 @@ postcss-merge-rules@^4.0.3:
 postcss-minify-font-values@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-4.0.2.tgz#cd4c344cce474343fac5d82206ab2cbcb8afd5a6"
+  integrity sha512-j85oO6OnRU9zPf04+PZv1LYIYOprWm6IA6zkXkrJXyRveDEuQggG6tvoy8ir8ZwjLxLuGfNkCZEQG7zan+Hbtg==
   dependencies:
     postcss "^7.0.0"
     postcss-value-parser "^3.0.0"
@@ -8183,6 +9863,7 @@ postcss-minify-font-values@^4.0.2:
 postcss-minify-gradients@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-4.0.2.tgz#93b29c2ff5099c535eecda56c4aa6e665a663471"
+  integrity sha512-qKPfwlONdcf/AndP1U8SJ/uzIJtowHlMaSioKzebAXSG4iJthlWC9iSWznQcX4f66gIWX44RSA841HTHj3wK+Q==
   dependencies:
     cssnano-util-get-arguments "^4.0.0"
     is-color-stop "^1.0.0"
@@ -8192,6 +9873,7 @@ postcss-minify-gradients@^4.0.2:
 postcss-minify-params@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-4.0.2.tgz#6b9cef030c11e35261f95f618c90036d680db874"
+  integrity sha512-G7eWyzEx0xL4/wiBBJxJOz48zAKV2WG3iZOqVhPet/9geefm/Px5uo1fzlHu+DOjT+m0Mmiz3jkQzVHe6wxAWg==
   dependencies:
     alphanum-sort "^1.0.0"
     browserslist "^4.0.0"
@@ -8203,6 +9885,7 @@ postcss-minify-params@^4.0.2:
 postcss-minify-selectors@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-4.0.2.tgz#e2e5eb40bfee500d0cd9243500f5f8ea4262fbd8"
+  integrity sha512-D5S1iViljXBj9kflQo4YutWnJmwm8VvIsU1GeXJGiG9j8CIg9zs4voPMdQDUmIxetUOh60VilsNzCiAFTOqu3g==
   dependencies:
     alphanum-sort "^1.0.0"
     has "^1.0.0"
@@ -8212,20 +9895,23 @@ postcss-minify-selectors@^4.0.2:
 postcss-modules-extract-imports@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e"
+  integrity sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==
   dependencies:
     postcss "^7.0.5"
 
 postcss-modules-local-by-default@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-2.0.6.tgz#dd9953f6dd476b5fd1ef2d8830c8929760b56e63"
+  integrity sha512-oLUV5YNkeIBa0yQl7EYnxMgy4N6noxmiwZStaEJUSe2xPMcdNc8WmBQuQCx18H5psYbVxz8zoHk0RAAYZXP9gA==
   dependencies:
     postcss "^7.0.6"
     postcss-selector-parser "^6.0.0"
     postcss-value-parser "^3.3.1"
 
 postcss-modules-scope@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.1.1.tgz#33d4fc946602eb5e9355c4165d68a10727689dba"
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz#385cae013cc7743f5a7d7602d1073a89eaae62ee"
+  integrity sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ==
   dependencies:
     postcss "^7.0.6"
     postcss-selector-parser "^6.0.0"
@@ -8233,6 +9919,7 @@ postcss-modules-scope@^2.1.0:
 postcss-modules-values@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-2.0.0.tgz#479b46dc0c5ca3dc7fa5270851836b9ec7152f64"
+  integrity sha512-Ki7JZa7ff1N3EIMlPnGTZfUMe69FFwiQPnVSXC9mnn3jozCRBYIxiZd44yJOV2AmabOo4qFf8s0dC/+lweG7+w==
   dependencies:
     icss-replace-symbols "^1.1.0"
     postcss "^7.0.6"
@@ -8240,18 +9927,21 @@ postcss-modules-values@^2.0.0:
 postcss-nesting@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.1.tgz#b50ad7b7f0173e5b5e3880c3501344703e04c052"
+  integrity sha512-FrorPb0H3nuVq0Sff7W2rnc3SmIcruVC6YwpcS+k687VxyxO33iE1amna7wHuRVzM8vfiYofXSBHNAZ3QhLvYg==
   dependencies:
     postcss "^7.0.2"
 
 postcss-normalize-charset@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz#8b35add3aee83a136b0471e0d59be58a50285dd4"
+  integrity sha512-gMXCrrlWh6G27U0hF3vNvR3w8I1s2wOBILvA87iNXaPvSNo5uZAMYsZG7XjCUf1eVxuPfyL4TJ7++SGZLc9A3g==
   dependencies:
     postcss "^7.0.0"
 
 postcss-normalize-display-values@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.2.tgz#0dbe04a4ce9063d4667ed2be476bb830c825935a"
+  integrity sha512-3F2jcsaMW7+VtRMAqf/3m4cPFhPD3EFRgNs18u+k3lTJJlVe7d0YPO+bnwqo2xg8YiRpDXJI2u8A0wqJxMsQuQ==
   dependencies:
     cssnano-util-get-match "^4.0.0"
     postcss "^7.0.0"
@@ -8260,6 +9950,7 @@ postcss-normalize-display-values@^4.0.2:
 postcss-normalize-positions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-4.0.2.tgz#05f757f84f260437378368a91f8932d4b102917f"
+  integrity sha512-Dlf3/9AxpxE+NF1fJxYDeggi5WwV35MXGFnnoccP/9qDtFrTArZ0D0R+iKcg5WsUd8nUYMIl8yXDCtcrT8JrdA==
   dependencies:
     cssnano-util-get-arguments "^4.0.0"
     has "^1.0.0"
@@ -8269,6 +9960,7 @@ postcss-normalize-positions@^4.0.2:
 postcss-normalize-repeat-style@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.2.tgz#c4ebbc289f3991a028d44751cbdd11918b17910c"
+  integrity sha512-qvigdYYMpSuoFs3Is/f5nHdRLJN/ITA7huIoCyqqENJe9PvPmLhNLMu7QTjPdtnVf6OcYYO5SHonx4+fbJE1+Q==
   dependencies:
     cssnano-util-get-arguments "^4.0.0"
     cssnano-util-get-match "^4.0.0"
@@ -8278,6 +9970,7 @@ postcss-normalize-repeat-style@^4.0.2:
 postcss-normalize-string@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-4.0.2.tgz#cd44c40ab07a0c7a36dc5e99aace1eca4ec2690c"
+  integrity sha512-RrERod97Dnwqq49WNz8qo66ps0swYZDSb6rM57kN2J+aoyEAJfZ6bMx0sx/F9TIEX0xthPGCmeyiam/jXif0eA==
   dependencies:
     has "^1.0.0"
     postcss "^7.0.0"
@@ -8286,6 +9979,7 @@ postcss-normalize-string@^4.0.2:
 postcss-normalize-timing-functions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.2.tgz#8e009ca2a3949cdaf8ad23e6b6ab99cb5e7d28d9"
+  integrity sha512-acwJY95edP762e++00Ehq9L4sZCEcOPyaHwoaFOhIwWCDfik6YvqsYNxckee65JHLKzuNSSmAdxwD2Cud1Z54A==
   dependencies:
     cssnano-util-get-match "^4.0.0"
     postcss "^7.0.0"
@@ -8294,6 +9988,7 @@ postcss-normalize-timing-functions@^4.0.2:
 postcss-normalize-unicode@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-normalize-unicode/-/postcss-normalize-unicode-4.0.1.tgz#841bd48fdcf3019ad4baa7493a3d363b52ae1cfb"
+  integrity sha512-od18Uq2wCYn+vZ/qCOeutvHjB5jm57ToxRaMeNuf0nWVHaP9Hua56QyMF6fs/4FSUnVIw0CBPsU0K4LnBPwYwg==
   dependencies:
     browserslist "^4.0.0"
     postcss "^7.0.0"
@@ -8302,6 +9997,7 @@ postcss-normalize-unicode@^4.0.1:
 postcss-normalize-url@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-4.0.1.tgz#10e437f86bc7c7e58f7b9652ed878daaa95faae1"
+  integrity sha512-p5oVaF4+IHwu7VpMan/SSpmpYxcJMtkGppYf0VbdH5B6hN8YNmVyJLuY9FmLQTzY3fag5ESUUHDqM+heid0UVA==
   dependencies:
     is-absolute-url "^2.0.0"
     normalize-url "^3.0.0"
@@ -8311,6 +10007,7 @@ postcss-normalize-url@^4.0.1:
 postcss-normalize-whitespace@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.2.tgz#bf1d4070fe4fcea87d1348e825d8cc0c5faa7d82"
+  integrity sha512-tO8QIgrsI3p95r8fyqKV+ufKlSHh9hMJqACqbv2XknufqEDhDvbguXGBBqxw9nsQoXWf0qOqppziKJKHMD4GtA==
   dependencies:
     postcss "^7.0.0"
     postcss-value-parser "^3.0.0"
@@ -8318,6 +10015,7 @@ postcss-normalize-whitespace@^4.0.2:
 postcss-normalize@7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/postcss-normalize/-/postcss-normalize-7.0.1.tgz#eb51568d962b8aa61a8318383c8bb7e54332282e"
+  integrity sha512-NOp1fwrG+6kVXWo7P9SizCHX6QvioxFD/hZcI2MLxPmVnFJFC0j0DDpIuNw2tUDeCFMni59gCVgeJ1/hYhj2OQ==
   dependencies:
     "@csstools/normalize.css" "^9.0.1"
     browserslist "^4.1.1"
@@ -8327,6 +10025,7 @@ postcss-normalize@7.0.1:
 postcss-ordered-values@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-4.1.2.tgz#0cf75c820ec7d5c4d280189559e0b571ebac0eee"
+  integrity sha512-2fCObh5UanxvSxeXrtLtlwVThBvHn6MQcu4ksNT2tsaV2Fg76R2CV98W7wNSlX+5/pFwEyaDwKLLoEV7uRybAw==
   dependencies:
     cssnano-util-get-arguments "^4.0.0"
     postcss "^7.0.0"
@@ -8335,18 +10034,21 @@ postcss-ordered-values@^4.1.2:
 postcss-overflow-shorthand@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postcss-overflow-shorthand/-/postcss-overflow-shorthand-2.0.0.tgz#31ecf350e9c6f6ddc250a78f0c3e111f32dd4c30"
+  integrity sha512-aK0fHc9CBNx8jbzMYhshZcEv8LtYnBIRYQD5i7w/K/wS9c2+0NSR6B3OVMu5y0hBHYLcMGjfU+dmWYNKH0I85g==
   dependencies:
     postcss "^7.0.2"
 
 postcss-page-break@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postcss-page-break/-/postcss-page-break-2.0.0.tgz#add52d0e0a528cabe6afee8b46e2abb277df46bf"
+  integrity sha512-tkpTSrLpfLfD9HvgOlJuigLuk39wVTbbd8RKcy8/ugV2bNBUW3xU+AIqyxhDrQr1VUj1RmyJrBn1YWrqUm9zAQ==
   dependencies:
     postcss "^7.0.2"
 
 postcss-place@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-place/-/postcss-place-4.0.1.tgz#e9f39d33d2dc584e46ee1db45adb77ca9d1dcc62"
+  integrity sha512-Zb6byCSLkgRKLODj/5mQugyuj9bvAAw9LqJJjgwz5cYryGeXfFZfSXoP1UfveccFmeq0b/2xxwcTEVScnqGxBg==
   dependencies:
     postcss "^7.0.2"
     postcss-values-parser "^2.0.0"
@@ -8354,6 +10056,7 @@ postcss-place@^4.0.1:
 postcss-preset-env@6.6.0:
   version "6.6.0"
   resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-6.6.0.tgz#642e7d962e2bdc2e355db117c1eb63952690ed5b"
+  integrity sha512-I3zAiycfqXpPIFD6HXhLfWXIewAWO8emOKz+QSsxaUZb9Dp8HbF5kUf+4Wy/AxR33o+LRoO8blEWCHth0ZsCLA==
   dependencies:
     autoprefixer "^9.4.9"
     browserslist "^4.4.2"
@@ -8396,6 +10099,7 @@ postcss-preset-env@6.6.0:
 postcss-pseudo-class-any-link@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-6.0.0.tgz#2ed3eed393b3702879dec4a87032b210daeb04d1"
+  integrity sha512-lgXW9sYJdLqtmw23otOzrtbDXofUdfYzNm4PIpNE322/swES3VU9XlXHeJS46zT2onFO7V1QFdD4Q9LiZj8mew==
   dependencies:
     postcss "^7.0.2"
     postcss-selector-parser "^5.0.0-rc.3"
@@ -8403,6 +10107,7 @@ postcss-pseudo-class-any-link@^6.0.0:
 postcss-reduce-initial@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz#7fd42ebea5e9c814609639e2c2e84ae270ba48df"
+  integrity sha512-gKWmR5aUulSjbzOfD9AlJiHCGH6AEVLaM0AV+aSioxUDd16qXP1PCh8d1/BGVvpdWn8k/HiK7n6TjeoXN1F7DA==
   dependencies:
     browserslist "^4.0.0"
     caniuse-api "^3.0.0"
@@ -8412,6 +10117,7 @@ postcss-reduce-initial@^4.0.3:
 postcss-reduce-transforms@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.2.tgz#17efa405eacc6e07be3414a5ca2d1074681d4e29"
+  integrity sha512-EEVig1Q2QJ4ELpJXMZR8Vt5DQx8/mo+dGWSR7vWXqcob2gQLyQGsionYcGKATXvQzMPn6DSN1vTN7yFximdIAg==
   dependencies:
     cssnano-util-get-match "^4.0.0"
     has "^1.0.0"
@@ -8421,18 +10127,48 @@ postcss-reduce-transforms@^4.0.2:
 postcss-replace-overflow-wrap@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-3.0.0.tgz#61b360ffdaedca84c7c918d2b0f0d0ea559ab01c"
+  integrity sha512-2T5hcEHArDT6X9+9dVSPQdo7QHzG4XKclFT8rU5TzJPDN7RIRTbO9c4drUISOVemLj03aezStHCR2AIcr8XLpw==
   dependencies:
     postcss "^7.0.2"
 
+postcss-resolve-nested-selector@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz#29ccbc7c37dedfac304e9fff0bf1596b3f6a0e4e"
+  integrity sha1-Kcy8fDfe36wwTp//C/FZaz9qDk4=
+
 postcss-safe-parser@4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-4.0.1.tgz#8756d9e4c36fdce2c72b091bbc8ca176ab1fcdea"
+  integrity sha512-xZsFA3uX8MO3yAda03QrG3/Eg1LN3EPfjjf07vke/46HERLZyHrTsQ9E1r1w1W//fWEhtYNndo2hQplN2cVpCQ==
   dependencies:
     postcss "^7.0.0"
 
+postcss-safe-parser@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-4.0.2.tgz#a6d4e48f0f37d9f7c11b2a581bf00f8ba4870b96"
+  integrity sha512-Uw6ekxSWNLCPesSv/cmqf2bY/77z11O7jZGPax3ycZMFU/oi2DMH9i89AdHc1tRwFg/arFoEwX0IS3LCUxJh1g==
+  dependencies:
+    postcss "^7.0.26"
+
+postcss-sass@^0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/postcss-sass/-/postcss-sass-0.4.4.tgz#91f0f3447b45ce373227a98b61f8d8f0785285a3"
+  integrity sha512-BYxnVYx4mQooOhr+zer0qWbSPYnarAy8ZT7hAQtbxtgVf8gy+LSLT/hHGe35h14/pZDTw1DsxdbrwxBN++H+fg==
+  dependencies:
+    gonzales-pe "^4.3.0"
+    postcss "^7.0.21"
+
+postcss-scss@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-2.1.1.tgz#ec3a75fa29a55e016b90bf3269026c53c1d2b383"
+  integrity sha512-jQmGnj0hSGLd9RscFw9LyuSVAa5Bl1/KBPqG1NQw9w8ND55nY4ZEsdlVuYJvLPpV+y0nwTV5v/4rHPzZRihQbA==
+  dependencies:
+    postcss "^7.0.6"
+
 postcss-selector-matches@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/postcss-selector-matches/-/postcss-selector-matches-4.0.0.tgz#71c8248f917ba2cc93037c9637ee09c64436fcff"
+  integrity sha512-LgsHwQR/EsRYSqlwdGzeaPKVT0Ml7LAT6E75T8W8xLJY62CE4S/l03BWIt3jT8Taq22kXP08s2SfTSzaraoPww==
   dependencies:
     balanced-match "^1.0.0"
     postcss "^7.0.2"
@@ -8440,29 +10176,33 @@ postcss-selector-matches@^4.0.0:
 postcss-selector-not@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-4.0.0.tgz#c68ff7ba96527499e832724a2674d65603b645c0"
+  integrity sha512-W+bkBZRhqJaYN8XAnbbZPLWMvZD1wKTu0UxtFKdhtGjWYmxhkUneoeOhRJKdAE5V7ZTlnbHfCR+6bNwK9e1dTQ==
   dependencies:
     balanced-match "^1.0.0"
     postcss "^7.0.2"
 
 postcss-selector-parser@^3.0.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz#4f875f4afb0c96573d5cf4d74011aee250a7e865"
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz#b310f5c4c0fdaf76f94902bbaa30db6aa84f5270"
+  integrity sha512-h7fJ/5uWuRVyOtkO45pnt1Ih40CEleeyCHzipqAZO2e5H20g25Y48uYnFUiShvY4rZWNJ/Bib/KVPmanaCtOhA==
   dependencies:
-    dot-prop "^4.1.1"
+    dot-prop "^5.2.0"
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss-selector-parser@^5.0.0, postcss-selector-parser@^5.0.0-rc.3, postcss-selector-parser@^5.0.0-rc.4:
+postcss-selector-parser@^5.0.0-rc.3, postcss-selector-parser@^5.0.0-rc.4:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz#249044356697b33b64f1a8f7c80922dddee7195c"
+  integrity sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==
   dependencies:
     cssesc "^2.0.0"
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss-selector-parser@^6.0.0:
+postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
+  integrity sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==
   dependencies:
     cssesc "^3.0.0"
     indexes-of "^1.0.1"
@@ -8471,15 +10211,22 @@ postcss-selector-parser@^6.0.0:
 postcss-svgo@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.2.tgz#17b997bc711b333bab143aaed3b8d3d6e3d38258"
+  integrity sha512-C6wyjo3VwFm0QgBy+Fu7gCYOkCmgmClghO+pjcxvrcBKtiKt0uCF+hvbMO1fyv5BMImRK90SMb+dwUnfbGd+jw==
   dependencies:
     is-svg "^3.0.0"
     postcss "^7.0.0"
     postcss-value-parser "^3.0.0"
     svgo "^1.0.0"
 
+postcss-syntax@^0.36.2:
+  version "0.36.2"
+  resolved "https://registry.yarnpkg.com/postcss-syntax/-/postcss-syntax-0.36.2.tgz#f08578c7d95834574e5593a82dfbfa8afae3b51c"
+  integrity sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==
+
 postcss-unique-selectors@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-4.0.1.tgz#9446911f3289bfd64c6d680f073c03b1f9ee4bac"
+  integrity sha512-+JanVaryLo9QwZjKrmJgkI4Fn8SBgRO6WXQBJi7KiAVPlmxikB5Jzc4EvXMT2H0/m0RjrVVm9rGNhZddm/8Spg==
   dependencies:
     alphanum-sort "^1.0.0"
     postcss "^7.0.0"
@@ -8488,22 +10235,26 @@ postcss-unique-selectors@^4.0.1:
 postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0, postcss-value-parser@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
+  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
-postcss-value-parser@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz#482282c09a42706d1fc9a069b73f44ec08391dc9"
+postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
+  integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
 postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
+  integrity sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==
   dependencies:
     flatten "^1.0.2"
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.23, postcss@^7.0.5, postcss@^7.0.6:
-  version "7.0.26"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.26.tgz#5ed615cfcab35ba9bbb82414a4fa88ea10429587"
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
+  version "7.0.32"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
+  integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
   dependencies:
     chalk "^2.4.2"
     source-map "^0.6.1"
@@ -8512,6 +10263,7 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
+  integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
 prepend-http@^1.0.1:
   version "1.0.4"
@@ -8531,28 +10283,32 @@ prettier@^1.18.2:
   integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
 
 pretty-bytes@^5.1.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.3.0.tgz#f2849e27db79fb4d6cfe24764fc4134f165989f2"
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.4.1.tgz#cd89f79bbcef21e3d21eb0da68ffe93f803e884b"
+  integrity sha512-s1Iam6Gwz3JI5Hweaz4GoCD1WUNUIyzePFy5+Js2hjwGVt2Z79wNN+ZKOZ2vB6C+Xs6njyB84Z1IthQg8d9LxA==
 
 pretty-error@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"
+  integrity sha1-X0+HyPkeWuPzuoerTPXgOxoX8aM=
   dependencies:
     renderkid "^2.0.1"
     utila "~0.4"
 
-pretty-format@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
+pretty-format@^26.4.2:
+  version "26.4.2"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.4.2.tgz#d081d032b398e801e2012af2df1214ef75a81237"
+  integrity sha512-zK6Gd8zDsEiVydOCGLkoBoZuqv8VTiHyAbKznXe/gaph/DAeZOmit9yMfgIz5adIgAMMs5XfoYSwAX3jcCO1tA==
   dependencies:
-    "@jest/types" "^24.9.0"
-    ansi-regex "^4.0.0"
-    ansi-styles "^3.2.0"
-    react-is "^16.8.4"
+    "@jest/types" "^26.3.0"
+    ansi-regex "^5.0.0"
+    ansi-styles "^4.0.0"
+    react-is "^16.12.0"
 
 private@^0.1.6, private@~0.1.5:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
+  integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==
 
 process-nextick-args@~2.0.0:
   version "2.0.1"
@@ -8562,10 +10318,12 @@ process-nextick-args@~2.0.0:
 process@^0.11.10:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
 
 progress@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
 promise-inflight@^1.0.1, promise-inflight@~1.0.1:
   version "1.0.1"
@@ -8583,12 +10341,14 @@ promise-retry@^1.1.1:
 promise@^7.1.1:
   version "7.3.1"
   resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
   dependencies:
     asap "~2.0.3"
 
 promise@^8.0.3:
-  version "8.0.3"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-8.0.3.tgz#f592e099c6cddc000d538ee7283bb190452b0bf6"
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e"
+  integrity sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==
   dependencies:
     asap "~2.0.6"
 
@@ -8602,6 +10362,7 @@ promzard@^0.3.0:
 prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
   dependencies:
     loose-envify "^1.4.0"
     object-assign "^4.1.1"
@@ -8620,11 +10381,12 @@ protoduck@^5.0.1:
     genfun "^5.0.0"
 
 proxy-addr@~2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.5.tgz#34cbd64a2d81f4b1fd21e76f9f06c8a45299ee34"
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.6.tgz#fdc2336505447d3f2f2c638ed272caf614bbb2bf"
+  integrity sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==
   dependencies:
     forwarded "~0.1.2"
-    ipaddr.js "1.9.0"
+    ipaddr.js "1.9.1"
 
 prr@~1.0.1:
   version "1.0.1"
@@ -8644,6 +10406,7 @@ psl@^1.1.28:
 public-encrypt@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0"
+  integrity sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==
   dependencies:
     bn.js "^4.1.0"
     browserify-rsa "^4.0.0"
@@ -8680,10 +10443,12 @@ pumpify@^1.3.3:
 punycode@1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+  integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=
 
 punycode@^1.2.4:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+  integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
 
 punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
@@ -8693,10 +10458,12 @@ punycode@^2.1.0, punycode@^2.1.1:
 pure-color@^1.2.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/pure-color/-/pure-color-1.3.0.tgz#1fe064fb0ac851f0de61320a8bf796836422f33e"
+  integrity sha1-H+Bk+wrIUfDeYTIKi/eWg2Qi8z4=
 
 q@^1.1.2:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
+  integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
 qrcode-terminal@^0.12.0:
   version "0.12.0"
@@ -8706,6 +10473,7 @@ qrcode-terminal@^0.12.0:
 qs@6.7.0:
   version "6.7.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
+  integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
 
 qs@~6.5.2:
   version "6.5.2"
@@ -8715,6 +10483,7 @@ qs@~6.5.2:
 query-string@^4.2.2:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
+  integrity sha1-u7aTucqRXCMlFbIosaArYJBD2+s=
   dependencies:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
@@ -8731,14 +10500,22 @@ query-string@^6.8.2:
 querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
+  integrity sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=
 
 querystring@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
+  integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
 
 querystringify@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e"
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
+  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+
+quick-lru@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
+  integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
 qw@~1.0.1:
   version "1.0.1"
@@ -8748,18 +10525,21 @@ qw@~1.0.1:
 raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
   dependencies:
     performance-now "^2.1.0"
 
-randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
+randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
+  integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
   dependencies:
     safe-buffer "^5.1.0"
 
 randomfill@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"
+  integrity sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==
   dependencies:
     randombytes "^2.0.5"
     safe-buffer "^5.1.0"
@@ -8767,10 +10547,12 @@ randomfill@^1.0.3:
 range-parser@^1.2.1, range-parser@~1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
+  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
 raw-body@2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.0.tgz#a1ce6fb9c9bc356ca52e89256ab59059e13d0332"
+  integrity sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==
   dependencies:
     bytes "3.1.0"
     http-errors "1.7.2"
@@ -8788,10 +10570,11 @@ rc@^1.0.1, rc@^1.1.6:
     strip-json-comments "~2.0.1"
 
 react-app-polyfill@^1.0.0:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-1.0.5.tgz#59c7377a0b9ed25692eeaca7ad9b12ef2d064709"
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-1.0.6.tgz#890f8d7f2842ce6073f030b117de9130a5f385f0"
+  integrity sha512-OfBnObtnGgLGfweORmdZbyEz+3dgVePQBb3zipiaDsMHV1NpWm0rDFYIVXFV/AK+x4VIIfWHhrdMIeoTLyRr2g==
   dependencies:
-    core-js "^3.4.1"
+    core-js "^3.5.0"
     object-assign "^4.1.1"
     promise "^8.0.3"
     raf "^3.4.1"
@@ -8801,6 +10584,7 @@ react-app-polyfill@^1.0.0:
 react-base16-styling@^0.5.1:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/react-base16-styling/-/react-base16-styling-0.5.3.tgz#3858f24e9c4dd8cbd3f702f3f74d581ca2917269"
+  integrity sha1-OFjyTpxN2MvT9wLz901YHKKRcmk=
   dependencies:
     base16 "^1.0.0"
     lodash.curry "^4.0.1"
@@ -8810,6 +10594,7 @@ react-base16-styling@^0.5.1:
 react-dev-utils@^9.0.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-9.1.0.tgz#3ad2bb8848a32319d760d0a84c56c14bdaae5e81"
+  integrity sha512-X2KYF/lIGyGwP/F/oXgGDF24nxDA2KC4b7AFto+eqzc/t838gpSGiaU8trTqHXOohuLxxc5qi1eDzsl9ucPDpg==
   dependencies:
     "@babel/code-frame" "7.5.5"
     address "1.1.2"
@@ -8838,25 +10623,29 @@ react-dev-utils@^9.0.0:
     text-table "0.2.0"
 
 react-dom@^16.8.6:
-  version "16.12.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11"
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
+  integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
     prop-types "^15.6.2"
-    scheduler "^0.18.0"
+    scheduler "^0.19.1"
 
 react-error-overlay@^6.0.3:
-  version "6.0.4"
-  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.4.tgz#0d165d6d27488e660bc08e57bdabaad741366f7a"
+  version "6.0.7"
+  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
+  integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
-react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
-  version "16.12.0"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
+react-is@^16.12.0, react-is@^16.13.0, react-is@^16.7.0, react-is@^16.8.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
 react-json-tree@^0.11.2:
   version "0.11.2"
   resolved "https://registry.yarnpkg.com/react-json-tree/-/react-json-tree-0.11.2.tgz#af70199fcbc265699ade2aec492465c51608f95e"
+  integrity sha512-aYhUPj1y5jR3ZQ+G3N7aL8FbTyO03iLwnVvvEikLcNFqNTyabdljo9xDftZndUBFyyyL0aK3qGO9+8EilILHUw==
   dependencies:
     babel-runtime "^6.6.1"
     prop-types "^15.5.8"
@@ -8865,14 +10654,15 @@ react-json-tree@^0.11.2:
 react-monaco-editor@^0.32.1:
   version "0.32.1"
   resolved "https://registry.yarnpkg.com/react-monaco-editor/-/react-monaco-editor-0.32.1.tgz#fa45d62fd19d5942cba98bd7c59336d21f8750e0"
+  integrity sha512-gJjU9Rx/QuJr+Y4C0MSidMdkh1hmHGneIU8yI87bc5kd46ZXPNETqiigyUB7pKy4ZSuFHBhjhg2lgESaID43ag==
   dependencies:
     "@types/react" "^15.x || ^16.x"
     prop-types "^15.0.0"
 
 react-paginate@^6.3.2:
-  version "6.3.2"
-  resolved "https://registry.yarnpkg.com/react-paginate/-/react-paginate-6.3.2.tgz#4e18cbdb2654d308566775fa14df11e820188391"
-  integrity sha512-Ch++Njfv8UHpLtIMiQouAPeJQA5Ki86kIYfCer6c1B96Rvn3UF27se+goCilCP8oHNXNsA2R2kxvzanY1YIkyg==
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/react-paginate/-/react-paginate-6.4.0.tgz#89426657c9b41bde616a3ded6923e589c3bcb62b"
+  integrity sha512-xvndbJLUsJhCnEI0F/Xbt+vXg4bRPKhKhd0KrEyvXoIMHnsK/xqXvz5o/unYuLI27Cai5xymwB2tiCSAl+UJPA==
   dependencies:
     prop-types "^15.6.1"
 
@@ -8884,21 +10674,23 @@ react-pagination@^1.0.0:
     react "^0.13.3"
 
 react-router@^3.2.3:
-  version "3.2.5"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-3.2.5.tgz#6f5ce8f4f0b4ff6a6b2fc6106d7619e342fb57be"
+  version "3.2.6"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-3.2.6.tgz#cad202796a7bba3efc2100da453b3379c9d4aeb4"
+  integrity sha512-nlxtQE8B22hb/JxdaslI1tfZacxFU8x8BJryXOnR2RxB4vc01zuHYAHAIgmBkdk1kzXaA25hZxK6KAH/+CXArw==
   dependencies:
     create-react-class "^15.5.1"
     history "^3.0.0"
-    hoist-non-react-statics "^2.3.1"
+    hoist-non-react-statics "^3.3.2"
     invariant "^2.2.1"
     loose-envify "^1.2.0"
     prop-types "^15.7.2"
-    react-is "^16.8.6"
+    react-is "^16.13.0"
     warning "^3.0.0"
 
 react-table@^7.0.0-rc.15:
-  version "7.0.0-rc.15"
-  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-rc.15.tgz#bb855e4e2abbb4aaf0ed2334404a41f3ada8e13a"
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.5.0.tgz#87326d92cdffbbf970f49b395bcafc3f84989ddf"
+  integrity sha512-hLsbNqLJkkYiATVteM8mthP8y5vnLPB2qdi9FeGZjsvb2m5vxj6cavIgk35oulvBmYD6Kox0HFfI332HPZpC7w==
 
 react@^0.13.3:
   version "0.13.3"
@@ -8908,8 +10700,9 @@ react@^0.13.3:
     envify "^3.0.0"
 
 react@^16.8.6:
-  version "16.12.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
+  integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -8937,16 +10730,14 @@ read-installed@~4.0.3:
     graceful-fs "^4.1.2"
 
 "read-package-json@1 || 2", read-package-json@^2.0.0, read-package-json@^2.0.13, read-package-json@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/read-package-json/-/read-package-json-2.1.1.tgz#16aa66c59e7d4dad6288f179dd9295fd59bb98f1"
-  integrity sha512-dAiqGtVc/q5doFz6096CcnXhpYk0ZN8dEKVkGLU0CsASt8SrgF6SF7OTKAYubfvFhWaqofl+Y8HK19GR8jwW+A==
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/read-package-json/-/read-package-json-2.1.2.tgz#6992b2b66c7177259feb8eaac73c3acd28b9222a"
+  integrity sha512-D1KmuLQr6ZSJS0tW8hf3WGpRlwszJOXZ3E8Yd/DNRaM5d+1wVRZdHlpGBLAuovjr28LbWvjpWkBHMxpRGGjzNA==
   dependencies:
     glob "^7.1.1"
-    json-parse-better-errors "^1.0.1"
+    json-parse-even-better-errors "^2.3.0"
     normalize-package-data "^2.0.0"
     npm-normalize-package-bin "^1.0.0"
-  optionalDependencies:
-    graceful-fs "^4.1.2"
 
 read-package-tree@^5.3.1:
   version "5.3.1"
@@ -8960,6 +10751,7 @@ read-package-tree@^5.3.1:
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
+  integrity sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=
   dependencies:
     find-up "^1.0.0"
     read-pkg "^1.0.0"
@@ -8975,13 +10767,24 @@ read-pkg-up@^2.0.0:
 read-pkg-up@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-4.0.0.tgz#1b221c6088ba7799601c808f91161c66e58f8978"
+  integrity sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA==
   dependencies:
     find-up "^3.0.0"
     read-pkg "^3.0.0"
 
+read-pkg-up@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
+  integrity sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==
+  dependencies:
+    find-up "^4.1.0"
+    read-pkg "^5.2.0"
+    type-fest "^0.8.1"
+
 read-pkg@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
+  integrity sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=
   dependencies:
     load-json-file "^1.0.0"
     normalize-package-data "^2.3.2"
@@ -8999,6 +10802,7 @@ read-pkg@^2.0.0:
 read-pkg@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
+  integrity sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=
   dependencies:
     load-json-file "^4.0.0"
     normalize-package-data "^2.3.2"
@@ -9013,6 +10817,16 @@ read-pkg@^4.0.1:
     parse-json "^4.0.0"
     pify "^3.0.0"
 
+read-pkg@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
+  integrity sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==
+  dependencies:
+    "@types/normalize-package-data" "^2.4.0"
+    normalize-package-data "^2.5.0"
+    parse-json "^5.0.0"
+    type-fest "^0.6.0"
+
 read@1, read@~1.0.1, read@~1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/read/-/read-1.0.7.tgz#b3da19bd052431a97671d44a42634adf710b40c4"
@@ -9065,14 +10879,23 @@ readdir-scoped-modules@^1.0.0, readdir-scoped-modules@^1.1.0:
 readdirp@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
+  integrity sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==
   dependencies:
     graceful-fs "^4.1.11"
     micromatch "^3.1.10"
     readable-stream "^2.0.2"
 
+readdirp@~3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.4.0.tgz#9fdccdf9e9155805449221ac645e8303ab5b9ada"
+  integrity sha512-0xe001vZBnJEK+uKcj8qOhyAKPzIT+gStxWr3LCB0DwcXR5NZJ3IaC+yGnHCYzB/S7ov3m3EEbZI2zeNvX+hGQ==
+  dependencies:
+    picomatch "^2.2.1"
+
 realpath-native@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-1.1.0.tgz#2003294fea23fb0672f2476ebe22fcf498a2d65c"
+  integrity sha512-wlgPA6cCIIg9gKz0fgAPjnzh4yR/LnXovwuo9hvyGvx3h8nX4+/iLZplfUWasXpqD8BdnGnP5njOFjkUwPzvjA==
   dependencies:
     util.promisify "^1.0.0"
 
@@ -9089,43 +10912,59 @@ recast@^0.11.17:
 recursive-readdir@2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f"
+  integrity sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==
   dependencies:
     minimatch "3.0.4"
 
 redent@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
+  integrity sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=
   dependencies:
     indent-string "^2.1.0"
     strip-indent "^1.0.1"
 
-regenerate-unicode-properties@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e"
+redent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
+  integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==
+  dependencies:
+    indent-string "^4.0.0"
+    strip-indent "^3.0.0"
+
+regenerate-unicode-properties@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
+  integrity sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==
   dependencies:
     regenerate "^1.4.0"
 
 regenerate@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.1.tgz#cad92ad8e6b591773485fbe05a485caf4f457e6f"
+  integrity sha512-j2+C8+NtXQgEKWk49MMP5P/u2GhnahTtVkRIHr5R5lVRlbKvmQ+oS+A5aLKWp2ma5VkT8sh6v+v4hbH0YHR66A==
 
 regenerator-runtime@^0.11.0:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
-regenerator-runtime@^0.13.2, regenerator-runtime@^0.13.3:
-  version "0.13.3"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
+regenerator-runtime@^0.13.2, regenerator-runtime@^0.13.3, regenerator-runtime@^0.13.4:
+  version "0.13.7"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
+  integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
 
-regenerator-transform@^0.14.0:
-  version "0.14.1"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb"
+regenerator-transform@^0.14.2:
+  version "0.14.5"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.5.tgz#c98da154683671c9c4dcb16ece736517e1b7feb4"
+  integrity sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==
   dependencies:
-    private "^0.1.6"
+    "@babel/runtime" "^7.8.4"
 
 regex-not@^1.0.0, regex-not@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
+  integrity sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==
   dependencies:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
@@ -9133,6 +10972,7 @@ regex-not@^1.0.0, regex-not@^1.0.2:
 regexp.prototype.flags@^1.2.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
+  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
   dependencies:
     define-properties "^1.1.3"
     es-abstract "^1.17.0-next.1"
@@ -9140,21 +10980,24 @@ regexp.prototype.flags@^1.2.0:
 regexpp@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
+  integrity sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==
 
 regexpp@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.0.0.tgz#dd63982ee3300e67b41c1956f850aa680d9d330e"
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
+  integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==
 
-regexpu-core@^4.6.0:
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.6.0.tgz#2037c18b327cfce8a6fea2a4ec441f2432afb8b6"
+regexpu-core@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
+  integrity sha512-TQ4KXRnIn6tz6tjnrXEkD/sshygKH/j5KzK86X8MkeHyZ8qst/LZ89j3X4/8HEIfHANTFIP/AbXakeRhWIl5YQ==
   dependencies:
     regenerate "^1.4.0"
-    regenerate-unicode-properties "^8.1.0"
-    regjsgen "^0.5.0"
-    regjsparser "^0.6.0"
+    regenerate-unicode-properties "^8.2.0"
+    regjsgen "^0.5.1"
+    regjsparser "^0.6.4"
     unicode-match-property-ecmascript "^1.0.4"
-    unicode-match-property-value-ecmascript "^1.1.0"
+    unicode-match-property-value-ecmascript "^1.2.0"
 
 registry-auth-token@^3.0.1:
   version "3.4.0"
@@ -9171,27 +11014,83 @@ registry-url@^3.0.3:
   dependencies:
     rc "^1.0.1"
 
-regjsgen@^0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.1.tgz#48f0bf1a5ea205196929c0d9798b42d1ed98443c"
+regjsgen@^0.5.1:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.2.tgz#92ff295fb1deecbf6ecdab2543d207e91aa33733"
+  integrity sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==
 
-regjsparser@^0.6.0:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.2.tgz#fd62c753991467d9d1ffe0a9f67f27a529024b96"
+regjsparser@^0.6.4:
+  version "0.6.4"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.4.tgz#a769f8684308401a66e9b529d2436ff4d0666272"
+  integrity sha512-64O87/dPDgfk8/RQqC4gkZoGyyWFIEUTTh80CU6CWuK5vkCGyekIx+oKcEIYtP/RAxSQltCZHCNu/mdd7fqlJw==
   dependencies:
     jsesc "~0.5.0"
 
 relateurl@0.2.x:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
+  integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
+
+remark-parse@^8.0.0:
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-8.0.3.tgz#9c62aa3b35b79a486454c690472906075f40c7e1"
+  integrity sha512-E1K9+QLGgggHxCQtLt++uXltxEprmWzNfg+MxpfHsZlrddKzZ/hZyWHDbK3/Ap8HJQqYJRXP+jHczdL6q6i85Q==
+  dependencies:
+    ccount "^1.0.0"
+    collapse-white-space "^1.0.2"
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-whitespace-character "^1.0.0"
+    is-word-character "^1.0.0"
+    markdown-escapes "^1.0.0"
+    parse-entities "^2.0.0"
+    repeat-string "^1.5.4"
+    state-toggle "^1.0.0"
+    trim "0.0.1"
+    trim-trailing-lines "^1.0.0"
+    unherit "^1.0.4"
+    unist-util-remove-position "^2.0.0"
+    vfile-location "^3.0.0"
+    xtend "^4.0.1"
+
+remark-stringify@^8.0.0:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-8.1.1.tgz#e2a9dc7a7bf44e46a155ec78996db896780d8ce5"
+  integrity sha512-q4EyPZT3PcA3Eq7vPpT6bIdokXzFGp9i85igjmhRyXWmPs0Y6/d2FYwUNotKAWyLch7g0ASZJn/KHHcHZQ163A==
+  dependencies:
+    ccount "^1.0.0"
+    is-alphanumeric "^1.0.0"
+    is-decimal "^1.0.0"
+    is-whitespace-character "^1.0.0"
+    longest-streak "^2.0.1"
+    markdown-escapes "^1.0.0"
+    markdown-table "^2.0.0"
+    mdast-util-compact "^2.0.0"
+    parse-entities "^2.0.0"
+    repeat-string "^1.5.4"
+    state-toggle "^1.0.0"
+    stringify-entities "^3.0.0"
+    unherit "^1.0.4"
+    xtend "^4.0.1"
+
+remark@^12.0.0:
+  version "12.0.1"
+  resolved "https://registry.yarnpkg.com/remark/-/remark-12.0.1.tgz#f1ddf68db7be71ca2bad0a33cd3678b86b9c709f"
+  integrity sha512-gS7HDonkdIaHmmP/+shCPejCEEW+liMp/t/QwmF0Xt47Rpuhl32lLtDV1uKWvGoq+kxr5jSgg5oAIpGuyULjUw==
+  dependencies:
+    remark-parse "^8.0.0"
+    remark-stringify "^8.0.0"
+    unified "^9.0.0"
 
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+  integrity sha1-wkvOKig62tW8P1jg1IJJuSN52O8=
 
 renderkid@^2.0.1:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.3.tgz#380179c2ff5ae1365c522bf2fcfcff01c5b74149"
+  integrity sha512-z8CLQp7EZBPCwCnncgf9C4XAi3WR0dv+uWu/PjIyhhAb5d6IJ/QZqlHFprHeKT+59//V6BNUsLbvN8+2LarxGA==
   dependencies:
     css-select "^1.1.0"
     dom-converter "^0.2"
@@ -9202,17 +11101,25 @@ renderkid@^2.0.1:
 repeat-element@^1.1.2:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
+  integrity sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==
 
-repeat-string@^1.6.1:
+repeat-string@^1.0.0, repeat-string@^1.5.4, repeat-string@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
+  integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
 
 repeating@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
+  integrity sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=
   dependencies:
     is-finite "^1.0.0"
 
+replace-ext@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
+  integrity sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=
+
 request@^2.87.0, request@^2.88.0:
   version "2.88.2"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
@@ -9262,48 +11169,53 @@ require-main-filename@^2.0.0:
 requires-port@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+  integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
+  integrity sha1-AKn3OHVW4nA46uIyyqNypqWbZlo=
   dependencies:
     resolve-from "^3.0.0"
 
 resolve-from@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
+  integrity sha1-six699nWiBvItuZTM17rywoYh0g=
 
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
+resolve-from@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
+  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
+
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
+  integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
 resolve@1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.10.0.tgz#3bdaaeaf45cc07f375656dfd2e54ed0810b101ba"
+  integrity sha512-3sUr9aq5OfSg2S9pNtPA9hL1FVEAjvfOC4leW0SNf/mpnaakz2a9femSd6LqAww2RaFctwyf1lCqnTHuF1rxDg==
   dependencies:
     path-parse "^1.0.6"
 
-resolve@^1.10.0:
+resolve@^1.10.0, resolve@^1.13.1, resolve@^1.3.2, resolve@^1.8.1, resolve@^1.9.0:
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
   integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
   dependencies:
     path-parse "^1.0.6"
 
-resolve@^1.3.2, resolve@^1.5.0, resolve@^1.8.1, resolve@^1.9.0:
-  version "1.14.2"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.14.2.tgz#dbf31d0fa98b1f29aa5169783b9c290cb865fea2"
-  dependencies:
-    path-parse "^1.0.6"
-
 restore-cursor@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
+  integrity sha1-n37ih/gv0ybU/RYpI9YhKe7g368=
   dependencies:
     onetime "^2.0.0"
     signal-exit "^3.0.2"
@@ -9311,6 +11223,7 @@ restore-cursor@^2.0.0:
 ret@~0.1.10:
   version "0.1.15"
   resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
+  integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
 
 retry@^0.10.0:
   version "0.10.1"
@@ -9322,13 +11235,20 @@ retry@^0.12.0:
   resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
   integrity sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=
 
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
 rgb-regex@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
+  integrity sha1-wODWiC3w4jviVKR16O3UGRX+rrE=
 
 rgba-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
+  integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
 
 rimraf@2, rimraf@^2.2.8, rimraf@^2.5.2, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2, rimraf@^2.6.3, rimraf@^2.7.1:
   version "2.7.1"
@@ -9340,12 +11260,14 @@ rimraf@2, rimraf@^2.2.8, rimraf@^2.5.2, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.
 rimraf@2.6.3:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
+  integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
   dependencies:
     glob "^7.1.3"
 
 ripemd160@^2.0.0, ripemd160@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
+  integrity sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==
   dependencies:
     hash-base "^3.0.0"
     inherits "^2.0.1"
@@ -9353,12 +11275,17 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
 rsvp@^4.8.4:
   version "4.8.5"
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
+  integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
 
 run-async@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
-  dependencies:
-    is-promise "^2.1.0"
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
+  integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
+
+run-parallel@^1.1.9:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.9.tgz#c9dd3a7cf9f4b2c4b6244e173a6ed866e61dd679"
+  integrity sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==
 
 run-queue@^1.0.0, run-queue@^1.0.3:
   version "1.0.3"
@@ -9372,16 +11299,10 @@ rw@1:
   resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
   integrity sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=
 
-rxjs@^6.4.0:
-  version "6.5.4"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.4.tgz#e0777fe0d184cec7872df147f303572d414e211c"
-  dependencies:
-    tslib "^1.9.0"
-
-rxjs@^6.5.2:
-  version "6.6.0"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.0.tgz#af2901eedf02e3a83ffa7f886240ff9018bbec84"
-  integrity sha512-3HMA8z/Oz61DUHe+SdOiQyzIf4tOx5oQHmMir7IZEu6TMqCLHT4LRcmNaUS0NwOz8VLvmmBduMsoaUvMaIiqzg==
+rxjs@^6.4.0, rxjs@^6.5.2:
+  version "6.6.3"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.3.tgz#8ca84635c4daa900c0d3967a6ee7ac60271ee552"
+  integrity sha512-trsQc+xYYXZ3urjOiJOuCOa5N3jAZ3eiSpQB5hIT8zGlL2QfnHLJ2r7GMkBGuIausdJN1OneaI6gQlsqNHHmZQ==
   dependencies:
     tslib "^1.9.0"
 
@@ -9398,6 +11319,7 @@ safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1,
 safe-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
+  integrity sha1-QKNmnzsHfR6UPURinhV91IAjvy4=
   dependencies:
     ret "~0.1.10"
 
@@ -9409,6 +11331,7 @@ safe-regex@^1.1.0:
 sane@^4.0.3:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/sane/-/sane-4.1.0.tgz#ed881fd922733a6c461bc189dc2b6c006f3ffded"
+  integrity sha512-hhbzAgTIX8O7SHfp2c8/kREfEn4qO/9q8C9beyY6+tvZ87EpoZ3i1RIEvp27YBswnNbY9mWd6paKVmKbAgLfZA==
   dependencies:
     "@cnakazawa/watch" "^1.0.3"
     anymatch "^2.0.0"
@@ -9420,18 +11343,20 @@ sane@^4.0.3:
     minimist "^1.1.1"
     walker "~1.0.5"
 
-sass-graph@^2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.2.4.tgz#13fbd63cd1caf0908b9fd93476ad43a51d1e0b49"
+sass-graph@2.2.5:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/sass-graph/-/sass-graph-2.2.5.tgz#a981c87446b8319d96dce0671e487879bd24c2e8"
+  integrity sha512-VFWDAHOe6mRuT4mZRd4eKE+d8Uedrk6Xnh7Sh9b4NGufQLQjOrvf/MQoOdx+0s92L89FeyUUNfU597j/3uNpag==
   dependencies:
     glob "^7.0.0"
     lodash "^4.0.0"
     scss-tokenizer "^0.2.3"
-    yargs "^7.0.0"
+    yargs "^13.3.2"
 
 sass-loader@7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.1.0.tgz#16fd5138cb8b424bf8a759528a1972d72aad069d"
+  integrity sha512-+G+BKGglmZM2GUSfT9TLuEp6tzehHPjAMoRRItOojWIqIGPloVCMhNIQuG639eJ+y033PaGTSjLaTHts8Kw79w==
   dependencies:
     clone-deep "^2.0.1"
     loader-utils "^1.0.1"
@@ -9443,10 +11368,12 @@ sass-loader@7.1.0:
 sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.18.0:
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.18.0.tgz#5901ad6659bc1d8f3fdaf36eb7a67b0d6746b1c4"
+scheduler@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
+  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -9454,6 +11381,7 @@ scheduler@^0.18.0:
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
+  integrity sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==
   dependencies:
     ajv "^6.1.0"
     ajv-errors "^1.0.0"
@@ -9462,6 +11390,7 @@ schema-utils@^1.0.0:
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
+  integrity sha1-jrBtualyMzOCTT9VMGQRSYR85dE=
   dependencies:
     js-base64 "^2.1.8"
     source-map "^0.4.2"
@@ -9469,10 +11398,12 @@ scss-tokenizer@^0.2.3:
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
+  integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
 
 selfsigned@^1.9.1:
   version "1.10.7"
   resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.7.tgz#da5819fd049d5574f28e88a9bcc6dbc6e6f3906b"
+  integrity sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==
   dependencies:
     node-forge "0.9.0"
 
@@ -9491,22 +11422,32 @@ semver-diff@^2.0.0:
 semver@6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.0.0.tgz#05e359ee571e5ad7ed641a6eec1e547ba52dea65"
+  integrity sha512-0UewU+9rFapKFnlbirLi3byoOuhrSsli/z/ihNnvM24vgF+8sNBiI1LZPBSH9wJKUwaUbw+s3hToDLCXkrghrQ==
 
 semver@7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
+  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
-semver@^6.0.0, semver@^6.3.0:
+semver@^6.0.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+
+semver@^7.3.2:
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
+  integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
 
 semver@~5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
+  integrity sha1-myzl094C0XxgEq0yaqa00M9U+U8=
 
 send@0.17.1:
   version "0.17.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
+  integrity sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==
   dependencies:
     debug "2.6.9"
     depd "~1.1.2"
@@ -9525,14 +11466,19 @@ send@0.17.1:
 serialize-javascript@^1.4.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.9.1.tgz#cfc200aef77b600c47da9bb8149c943e798c2fdb"
+  integrity sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A==
 
-serialize-javascript@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
+serialize-javascript@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
+  integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==
+  dependencies:
+    randombytes "^2.1.0"
 
 serve-index@^1.7.2:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
+  integrity sha1-03aNabHn2C5c4FD/9bRTvqEqkjk=
   dependencies:
     accepts "~1.3.4"
     batch "0.6.1"
@@ -9545,6 +11491,7 @@ serve-index@^1.7.2:
 serve-static@1.14.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.1.tgz#666e636dc4f010f7ef29970a88a674320898b2f9"
+  integrity sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==
   dependencies:
     encodeurl "~1.0.2"
     escape-html "~1.0.3"
@@ -9559,6 +11506,7 @@ set-blocking@^2.0.0, set-blocking@~2.0.0:
 set-value@^2.0.0, set-value@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
+  integrity sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==
   dependencies:
     extend-shallow "^2.0.1"
     is-extendable "^0.1.1"
@@ -9568,18 +11516,22 @@ set-value@^2.0.0, set-value@^2.0.1:
 setimmediate@^1.0.4, setimmediate@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+  integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
 
 setprototypeof@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
+  integrity sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==
 
 setprototypeof@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
+  integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
 
 sha.js@^2.4.0, sha.js@^2.4.8:
   version "2.4.11"
   resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.11.tgz#37a5cf0b81ecbc6943de109ba2960d1b26584ae7"
+  integrity sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==
   dependencies:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
@@ -9594,6 +11546,7 @@ sha@^3.0.0:
 shallow-clone@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-0.1.2.tgz#5909e874ba77106d73ac414cfec1ffca87d97060"
+  integrity sha1-WQnodLp3EG1zrEFM/sH/yofZcGA=
   dependencies:
     is-extendable "^0.1.1"
     kind-of "^2.0.1"
@@ -9603,6 +11556,7 @@ shallow-clone@^0.1.2:
 shallow-clone@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-1.0.0.tgz#4480cd06e882ef68b2ad88a3ea54832e2c48b571"
+  integrity sha512-oeXreoKR/SyNJtRJMAKPDSvd28OqEwG4eR/xc856cRGBII7gX9lvAqDxusPm0846z/w/hWYjI1NpKwJ00NHzRA==
   dependencies:
     is-extendable "^0.1.1"
     kind-of "^5.0.0"
@@ -9623,6 +11577,7 @@ shebang-regex@^1.0.0:
 shell-quote@1.7.2:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
+  integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
 
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
@@ -9632,29 +11587,48 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
 simple-swizzle@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=
   dependencies:
     is-arrayish "^0.3.1"
 
-size-sensor@^0.2.0:
-  version "0.2.6"
-  resolved "https://registry.yarnpkg.com/size-sensor/-/size-sensor-0.2.6.tgz#6fe43afd570786f097171834002a97fe0b19a3da"
+size-sensor@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/size-sensor/-/size-sensor-1.0.1.tgz#f84e46206d3e259faff1d548e4b3beca93219dbb"
+  integrity sha512-QTy7MnuugCFXIedXRpUSk9gUnyNiaxIdxGfUjr8xxXOqIB3QvBUYP9+b51oCg2C4dnhaeNk/h57TxjbvoJrJUA==
 
 slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+  integrity sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=
 
 slash@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
+  integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
+
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
 slice-ansi@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-2.1.0.tgz#cacd7693461a637a5788d92a7dd4fba068e81636"
+  integrity sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==
   dependencies:
     ansi-styles "^3.2.0"
     astral-regex "^1.0.0"
     is-fullwidth-code-point "^2.0.0"
 
+slice-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
+  integrity sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==
+  dependencies:
+    ansi-styles "^4.0.0"
+    astral-regex "^2.0.0"
+    is-fullwidth-code-point "^3.0.0"
+
 slide@^1.1.6, slide@~1.1.3, slide@~1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
@@ -9668,6 +11642,7 @@ smart-buffer@^4.1.0:
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
+  integrity sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==
   dependencies:
     define-property "^1.0.0"
     isobject "^3.0.0"
@@ -9676,12 +11651,14 @@ snapdragon-node@^2.0.1:
 snapdragon-util@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2"
+  integrity sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==
   dependencies:
     kind-of "^3.2.0"
 
 snapdragon@^0.8.1:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/snapdragon/-/snapdragon-0.8.2.tgz#64922e7c565b0e14204ba1aa7d6964278d25182d"
+  integrity sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==
   dependencies:
     base "^0.11.1"
     debug "^2.2.0"
@@ -9695,6 +11672,7 @@ snapdragon@^0.8.1:
 sockjs-client@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.3.0.tgz#12fc9d6cb663da5739d3dc5fb6e8687da95cb177"
+  integrity sha512-R9jxEzhnnrdxLCNln0xg5uGHqMnkhPSTzUZH2eXcR03S/On9Yvoq2wyUZILRUhZCNVu2PmwWVoyuiPz8th8zbg==
   dependencies:
     debug "^3.2.5"
     eventsource "^1.0.7"
@@ -9706,6 +11684,7 @@ sockjs-client@1.3.0:
 sockjs-client@1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.4.0.tgz#c9f2568e19c8fd8173b4997ea3420e0bb306c7d5"
+  integrity sha512-5zaLyO8/nri5cua0VtOrFXBPK1jbL4+1cebT/mmKA1E1ZXOvJrII75bPu0l0k843G/+iAbhEqzyKr0w/eCCj7g==
   dependencies:
     debug "^3.2.5"
     eventsource "^1.0.7"
@@ -9717,6 +11696,7 @@ sockjs-client@1.4.0:
 sockjs@0.3.19:
   version "0.3.19"
   resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.19.tgz#d976bbe800af7bd20ae08598d582393508993c0d"
+  integrity sha512-V48klKZl8T6MzatbLlzzRNhMepEys9Y4oGFpypBFFn1gLI/QQ9HtLLyWJNbPlwGLelOVOEijUbTTJeLLI59jLw==
   dependencies:
     faye-websocket "^0.10.0"
     uuid "^3.0.1"
@@ -9753,10 +11733,12 @@ sorted-union-stream@~2.1.3:
 source-list-map@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
+  integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
 source-map-resolve@^0.5.0:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
+  integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==
   dependencies:
     atob "^2.1.2"
     decode-uri-component "^0.2.0"
@@ -9765,8 +11747,9 @@ source-map-resolve@^0.5.0:
     urix "^0.1.0"
 
 source-map-support@~0.5.10, source-map-support@~0.5.12:
-  version "0.5.16"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.16.tgz#0ae069e7fe3ba7538c64c98515e35339eac5a042"
+  version "0.5.19"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
+  integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
   dependencies:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
@@ -9774,20 +11757,24 @@ source-map-support@~0.5.10, source-map-support@~0.5.12:
 source-map-url@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
+  integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
 
 source-map@^0.4.2:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
+  integrity sha1-66T12pwNyZneaAMti092FzZSA2s=
   dependencies:
     amdefine ">=0.0.4"
 
 source-map@^0.5.0, source-map@^0.5.6, source-map@~0.5.0:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
 source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
 spawn-command@^0.0.2-1:
   version "0.0.2-1"
@@ -9823,6 +11810,7 @@ spdx-license-ids@^3.0.0:
 spdy-transport@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-3.0.0.tgz#00d4863a6400ad75df93361a1608605e5dcdcf31"
+  integrity sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==
   dependencies:
     debug "^4.1.0"
     detect-node "^2.0.4"
@@ -9832,8 +11820,9 @@ spdy-transport@^3.0.0:
     wbuf "^1.7.3"
 
 spdy@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/spdy/-/spdy-4.0.1.tgz#6f12ed1c5db7ea4f24ebb8b89ba58c87c08257f2"
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/spdy/-/spdy-4.0.2.tgz#b74f466203a3eda452c02492b91fb9e84a27677b"
+  integrity sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==
   dependencies:
     debug "^4.1.0"
     handle-thing "^2.0.0"
@@ -9841,6 +11830,11 @@ spdy@^4.0.0:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
+specificity@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/specificity/-/specificity-0.4.1.tgz#aab5e645012db08ba182e151165738d00887b019"
+  integrity sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg==
+
 split-on-first@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
@@ -9849,12 +11843,14 @@ split-on-first@^1.0.0:
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
+  integrity sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==
   dependencies:
     extend-shallow "^3.0.0"
 
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
+  integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
 sshpk@^1.7.0:
   version "1.16.1"
@@ -9881,14 +11877,22 @@ ssri@^6.0.0, ssri@^6.0.1:
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
+  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
 
 stack-utils@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.2.tgz#33eba3897788558bebfc2db059dc158ec36cebb8"
+  integrity sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==
+
+state-toggle@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.3.tgz#e123b16a88e143139b09c6852221bc9815917dfe"
+  integrity sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==
 
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
+  integrity sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=
   dependencies:
     define-property "^0.2.5"
     object-copy "^0.1.0"
@@ -9896,16 +11900,19 @@ static-extend@^0.1.1:
 "statuses@>= 1.4.0 < 2", "statuses@>= 1.5.0 < 2", statuses@~1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+  integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
 
 stdout-stream@^1.4.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/stdout-stream/-/stdout-stream-1.4.1.tgz#5ac174cdd5cd726104aa0c0b2bd83815d8d535de"
+  integrity sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==
   dependencies:
     readable-stream "^2.0.1"
 
 stream-browserify@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"
+  integrity sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==
   dependencies:
     inherits "~2.0.1"
     readable-stream "^2.0.2"
@@ -9921,6 +11928,7 @@ stream-each@^1.1.0:
 stream-http@^2.7.2:
   version "2.8.3"
   resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.8.3.tgz#b2d242469288a5a27ec4fe8933acf623de6514fc"
+  integrity sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==
   dependencies:
     builtin-status-codes "^3.0.0"
     inherits "^2.0.1"
@@ -9944,13 +11952,14 @@ stream-shift@^1.0.0:
 strict-uri-encode@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
+  integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
 
 strict-uri-encode@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
   integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
 
-string-width@^1.0.1, string-width@^1.0.2:
+string-width@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
   integrity sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=
@@ -9976,6 +11985,15 @@ string-width@^3.0.0, string-width@^3.1.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^5.1.0"
 
+string-width@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.0.tgz#952182c46cc7b2c313d1596e623992bd163b72b5"
+  integrity sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.0"
+
 string.prototype.trimend@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
@@ -9984,20 +12002,6 @@ string.prototype.trimend@^1.0.1:
     define-properties "^1.1.3"
     es-abstract "^1.17.5"
 
-string.prototype.trimleft@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.1.tgz#9bdb8ac6abd6d602b17a4ed321870d2f8dcefc74"
-  dependencies:
-    define-properties "^1.1.3"
-    function-bind "^1.1.1"
-
-string.prototype.trimright@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimright/-/string.prototype.trimright-2.1.1.tgz#440314b15996c866ce8a0341894d45186200c5d9"
-  dependencies:
-    define-properties "^1.1.3"
-    function-bind "^1.1.1"
-
 string.prototype.trimstart@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
@@ -10025,9 +12029,21 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
+stringify-entities@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-3.0.1.tgz#32154b91286ab0869ab2c07696223bd23b6dbfc0"
+  integrity sha512-Lsk3ISA2++eJYqBMPKcr/8eby1I6L0gP0NlxF8Zja6c05yr/yCYyb2c9PwXjd08Ib3If1vn1rbs1H5ZtVuOfvQ==
+  dependencies:
+    character-entities-html4 "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.2"
+    is-hexadecimal "^1.0.0"
+
 stringify-object@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629"
+  integrity sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==
   dependencies:
     get-own-enumerable-property-symbols "^3.0.0"
     is-obj "^1.0.1"
@@ -10059,9 +12075,17 @@ strip-ansi@^4.0.0:
   dependencies:
     ansi-regex "^3.0.0"
 
+strip-ansi@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
+  integrity sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==
+  dependencies:
+    ansi-regex "^5.0.0"
+
 strip-bom@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  integrity sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=
   dependencies:
     is-utf8 "^0.2.0"
 
@@ -10073,6 +12097,7 @@ strip-bom@^3.0.0:
 strip-comments@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-1.0.2.tgz#82b9c45e7f05873bee53f37168af930aa368679d"
+  integrity sha512-kL97alc47hoyIQSV165tTt9rG5dn4w1dNnBhOQ3bOU1Nc1hel09jnXANaHJ7vzHLd4Ju8kseDGzlev96pghLFw==
   dependencies:
     babel-extract-comments "^1.0.0"
     babel-plugin-transform-object-rest-spread "^6.26.0"
@@ -10085,9 +12110,17 @@ strip-eof@^1.0.0:
 strip-indent@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
+  integrity sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=
   dependencies:
     get-stdin "^4.0.1"
 
+strip-indent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
+  integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
+  dependencies:
+    min-indent "^1.0.0"
+
 strip-json-comments@^2.0.1, strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
@@ -10096,21 +12129,102 @@ strip-json-comments@^2.0.1, strip-json-comments@~2.0.1:
 style-loader@0.23.1:
   version "0.23.1"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.23.1.tgz#cb9154606f3e771ab6c4ab637026a1049174d925"
+  integrity sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==
   dependencies:
     loader-utils "^1.1.0"
     schema-utils "^1.0.0"
 
+style-search@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
+  integrity sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=
+
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
+  integrity sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g==
   dependencies:
     browserslist "^4.0.0"
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
+stylelint-config-recommended@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-recommended/-/stylelint-config-recommended-3.0.0.tgz#e0e547434016c5539fe2650afd58049a2fd1d657"
+  integrity sha512-F6yTRuc06xr1h5Qw/ykb2LuFynJ2IxkKfCMf+1xqPffkxh0S09Zc902XCffcsw/XMFq/OzQ1w54fLIDtmRNHnQ==
+
+stylelint-config-standard@^20.0.0:
+  version "20.0.0"
+  resolved "https://registry.yarnpkg.com/stylelint-config-standard/-/stylelint-config-standard-20.0.0.tgz#06135090c9e064befee3d594289f50e295b5e20d"
+  integrity sha512-IB2iFdzOTA/zS4jSVav6z+wGtin08qfj+YyExHB3LF9lnouQht//YyB0KZq9gGz5HNPkddHOzcY8HsUey6ZUlA==
+  dependencies:
+    stylelint-config-recommended "^3.0.0"
+
+stylelint@^13.7.0:
+  version "13.7.0"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-13.7.0.tgz#8d7a4233063b2f06e9f28b3405ff189e334547b5"
+  integrity sha512-1wStd4zVetnlHO98VjcHQbjSDmvcA39smkZQMct2cf+hom40H0xlQNdzzbswoG/jGBh61/Ue9m7Lu99PY51O6A==
+  dependencies:
+    "@stylelint/postcss-css-in-js" "^0.37.2"
+    "@stylelint/postcss-markdown" "^0.36.1"
+    autoprefixer "^9.8.6"
+    balanced-match "^1.0.0"
+    chalk "^4.1.0"
+    cosmiconfig "^7.0.0"
+    debug "^4.1.1"
+    execall "^2.0.0"
+    fast-glob "^3.2.4"
+    fastest-levenshtein "^1.0.12"
+    file-entry-cache "^5.0.1"
+    get-stdin "^8.0.0"
+    global-modules "^2.0.0"
+    globby "^11.0.1"
+    globjoin "^0.1.4"
+    html-tags "^3.1.0"
+    ignore "^5.1.8"
+    import-lazy "^4.0.0"
+    imurmurhash "^0.1.4"
+    known-css-properties "^0.19.0"
+    lodash "^4.17.20"
+    log-symbols "^4.0.0"
+    mathml-tag-names "^2.1.3"
+    meow "^7.1.1"
+    micromatch "^4.0.2"
+    normalize-selector "^0.2.0"
+    postcss "^7.0.32"
+    postcss-html "^0.36.0"
+    postcss-less "^3.1.4"
+    postcss-media-query-parser "^0.2.3"
+    postcss-resolve-nested-selector "^0.1.1"
+    postcss-safe-parser "^4.0.2"
+    postcss-sass "^0.4.4"
+    postcss-scss "^2.1.1"
+    postcss-selector-parser "^6.0.2"
+    postcss-syntax "^0.36.2"
+    postcss-value-parser "^4.1.0"
+    resolve-from "^5.0.0"
+    slash "^3.0.0"
+    specificity "^0.4.1"
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    style-search "^0.1.0"
+    sugarss "^2.0.0"
+    svg-tags "^1.0.0"
+    table "^6.0.1"
+    v8-compile-cache "^2.1.1"
+    write-file-atomic "^3.0.3"
+
+sugarss@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/sugarss/-/sugarss-2.0.0.tgz#ddd76e0124b297d40bf3cca31c8b22ecb43bc61d"
+  integrity sha512-WfxjozUk0UVA4jm+U1d736AUpzSrNsQcIbyOkoE364GrtWmIrFdk5lksEupgWMD4VaT/0kVx1dobpiDumSgmJQ==
+  dependencies:
+    postcss "^7.0.2"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
 
 supports-color@^5.3.0:
   version "5.5.0"
@@ -10122,16 +12236,31 @@ supports-color@^5.3.0:
 supports-color@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
+  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
   dependencies:
     has-flag "^3.0.0"
 
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
 svg-parser@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.2.tgz#d134cc396fa2681dc64f518330784e98bd801ec8"
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
+  integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
+
+svg-tags@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
+  integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
 
 svgo@^1.0.0, svgo@^1.2.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
+  integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==
   dependencies:
     chalk "^2.4.1"
     coa "^2.0.2"
@@ -10155,19 +12284,32 @@ sylvester-es6@0.0.2:
 table@^5.2.3:
   version "5.4.6"
   resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
+  integrity sha512-wmEc8m4fjnob4gt5riFRtTu/6+4rSe12TpAELNSqHMfF3IqnA+CH37USM6/YR3qRZv7e56kAEAtd6nKZaxe0Ug==
   dependencies:
     ajv "^6.10.2"
     lodash "^4.17.14"
     slice-ansi "^2.1.0"
     string-width "^3.0.0"
 
+table@^6.0.1:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/table/-/table-6.0.3.tgz#e5b8a834e37e27ad06de2e0fda42b55cfd8a0123"
+  integrity sha512-8321ZMcf1B9HvVX/btKv8mMZahCjn2aYrDlpqHaBFCfnox64edeH9kEid0vTLTRR8gWR2A20aDgeuTTea4sVtw==
+  dependencies:
+    ajv "^6.12.4"
+    lodash "^4.17.20"
+    slice-ansi "^4.0.0"
+    string-width "^4.2.0"
+
 tapable@^1.0.0, tapable@^1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
+  integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
 
 tar@^2.0.0:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.2.tgz#0ca8848562c7299b8b446ff6a4d60cdbb23edc40"
+  integrity sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==
   dependencies:
     block-stream "*"
     fstream "^1.0.12"
@@ -10196,6 +12338,7 @@ term-size@^1.2.0:
 terser-webpack-plugin@1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.2.3.tgz#3f98bc902fac3e5d0de730869f50668561262ec8"
+  integrity sha512-GOK7q85oAb/5kE12fMuLdn2btOS9OBZn4VsecpHDywoUC/jLhSAKOiYo0ezx7ss2EXPMzyEWFoE0s1WLE+4+oA==
   dependencies:
     cacache "^11.0.2"
     find-cache-dir "^2.0.0"
@@ -10207,14 +12350,15 @@ terser-webpack-plugin@1.2.3:
     worker-farm "^1.5.2"
 
 terser-webpack-plugin@^1.1.0:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz#5ecaf2dbdc5fb99745fd06791f46fc9ddb1c9a7c"
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz#a217aefaea330e734ffacb6120ec1fa312d6040b"
+  integrity sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==
   dependencies:
     cacache "^12.0.2"
     find-cache-dir "^2.1.0"
     is-wsl "^1.1.0"
     schema-utils "^1.0.0"
-    serialize-javascript "^2.1.2"
+    serialize-javascript "^4.0.0"
     source-map "^0.6.1"
     terser "^4.1.2"
     webpack-sources "^1.4.0"
@@ -10223,14 +12367,16 @@ terser-webpack-plugin@^1.1.0:
 terser@^3.16.1:
   version "3.17.0"
   resolved "https://registry.yarnpkg.com/terser/-/terser-3.17.0.tgz#f88ffbeda0deb5637f9d24b0da66f4e15ab10cb2"
+  integrity sha512-/FQzzPJmCpjAH9Xvk2paiWrFq+5M6aVOf+2KRbwhByISDX/EujxsK+BAvrhb6H+2rtrLCHK9N01wO014vrIwVQ==
   dependencies:
     commander "^2.19.0"
     source-map "~0.6.1"
     source-map-support "~0.5.10"
 
 terser@^4.1.2:
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.6.1.tgz#913e35e0d38a75285a7913ba01d753c4089ebdbd"
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
+  integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
   dependencies:
     commander "^2.20.0"
     source-map "~0.6.1"
@@ -10239,6 +12385,7 @@ terser@^4.1.2:
 test-exclude@^5.2.3:
   version "5.2.3"
   resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-5.2.3.tgz#c3d3e1e311eb7ee405e092dac10aefd09091eac0"
+  integrity sha512-M+oxtseCFO3EDtAaGH7iiej3CBkzXqFMbzqYAACdzKui4eZA+pq3tZEwChvOdNfa7xxy8BfbmgJSIr43cC/+2g==
   dependencies:
     glob "^7.1.3"
     minimatch "^3.0.4"
@@ -10266,6 +12413,7 @@ through2@^2.0.0:
 thunky@^1.0.2:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
+  integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
 
 timed-out@^4.0.0:
   version "4.0.1"
@@ -10275,12 +12423,14 @@ timed-out@^4.0.0:
 timers-browserify@^2.0.4:
   version "2.0.11"
   resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.11.tgz#800b1f3eee272e5bc53ee465a04d0e804c31211f"
+  integrity sha512-60aV6sgJ5YEbzUdn9c8kYGIqOubPoUdqQCul3SBAsRCZ40s6Y5cMcrW4dt3/k/EsbLVJNl9n6Vz3fTc+k2GeKQ==
   dependencies:
     setimmediate "^1.0.4"
 
 timsort@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
+  integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
 tiny-relative-date@^1.3.0:
   version "1.3.0"
@@ -10290,37 +12440,51 @@ tiny-relative-date@^1.3.0:
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
+  integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
   dependencies:
     os-tmpdir "~1.0.2"
 
 tmpl@1.0.x:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
+  integrity sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE=
 
 to-arraybuffer@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
+  integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
 
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
 
 to-object-path@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
+  integrity sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=
   dependencies:
     kind-of "^3.0.2"
 
 to-regex-range@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
+  integrity sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=
   dependencies:
     is-number "^3.0.0"
     repeat-string "^1.6.1"
 
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
 to-regex@^3.0.1, to-regex@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
+  integrity sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==
   dependencies:
     define-property "^2.0.2"
     extend-shallow "^3.0.2"
@@ -10330,10 +12494,12 @@ to-regex@^3.0.1, to-regex@^3.0.2:
 toggle-selection@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
 
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
+  integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
 tough-cookie@~2.5.0:
   version "2.5.0"
@@ -10351,30 +12517,56 @@ tree-kill@^1.2.2:
 trim-newlines@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
+  integrity sha1-WIeWa7WCpFA6QetST301ARgVphM=
+
+trim-newlines@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.0.tgz#79726304a6a898aa8373427298d54c2ee8b1cb30"
+  integrity sha512-C4+gOpvmxaSMKuEf9Qc134F1ZuOHVXKRbtEflf4NTtuuJDEIJ9p5PXsalL8SkeRw+qit1Mo+yuvMPAKwWg/1hA==
+
+trim-trailing-lines@^1.0.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.3.tgz#7f0739881ff76657b7776e10874128004b625a94"
+  integrity sha512-4ku0mmjXifQcTVfYDfR5lpgV7zVqPg6zV9rdZmwOPqq0+Zq19xDqEgagqVbc4pOOShbncuAOIs59R3+3gcF3ZA==
+
+trim@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/trim/-/trim-0.0.1.tgz#5858547f6b290757ee95cccc666fb50084c460dd"
+  integrity sha1-WFhUf2spB1fulczMZm+1AITEYN0=
+
+trough@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
+  integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
 
 "true-case-path@^1.0.2":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-1.0.3.tgz#f813b5a8c86b40da59606722b144e3225799f47d"
+  integrity sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==
   dependencies:
     glob "^7.1.2"
 
 ts-pnp@^1.0.0:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.5.tgz#840e0739c89fce5f3abd9037bb091dbff16d9dec"
+  version "1.2.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@^1.7.1, tslib@^1.8.1, tslib@^1.9.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
+tslib@^1.10.0, tslib@^1.7.1, tslib@^1.8.1, tslib@^1.9.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
+  integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
 
 tsutils@^3.17.1:
   version "3.17.1"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"
+  integrity sha512-kzeQ5B8H3w60nFY2g8cJIuH7JDpsALXySGtwGJ0p2LSjLgay3NdIpqq5SoOBe46bKDW2iq25irHCr8wjomUS2g==
   dependencies:
     tslib "^1.8.1"
 
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
+  integrity sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=
 
 tunnel-agent@^0.6.0:
   version "0.6.0"
@@ -10391,16 +12583,40 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0:
 type-check@~0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.3.2.tgz#5884cab512cf1d355e3fb784f30804b2b520db72"
+  integrity sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=
   dependencies:
     prelude-ls "~1.1.2"
 
+type-fest@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.13.1.tgz#0172cb5bce80b0bd542ea348db50c7e21834d934"
+  integrity sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==
+
+type-fest@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"
+  integrity sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==
+
+type-fest@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
+  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
+
 type-is@~1.6.17, type-is@~1.6.18:
   version "1.6.18"
   resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
+  integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
   dependencies:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
+typedarray-to-buffer@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
+  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
+  dependencies:
+    is-typedarray "^1.0.0"
+
 typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
@@ -10414,10 +12630,12 @@ typescript@^3.8.0:
 ua-parser-js@^0.7.18:
   version "0.7.21"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.21.tgz#853cf9ce93f642f67174273cc34565ae6f308777"
+  integrity sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ==
 
 uglify-js@3.4.x:
   version "3.4.10"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"
+  integrity sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw==
   dependencies:
     commander "~2.19.0"
     source-map "~0.6.1"
@@ -10432,28 +12650,53 @@ umask@^1.1.0, umask@~1.1.0:
   resolved "https://registry.yarnpkg.com/umask/-/umask-1.1.0.tgz#f29cebf01df517912bb58ff9c4e50fde8e33320d"
   integrity sha1-8pzr8B31F5ErtY/5xOUP3o4zMg0=
 
+unherit@^1.0.4:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.3.tgz#6c9b503f2b41b262330c80e91c8614abdaa69c22"
+  integrity sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ==
+  dependencies:
+    inherits "^2.0.0"
+    xtend "^4.0.0"
+
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
+  integrity sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ==
 
 unicode-match-property-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz#8ed2a32569961bce9227d09cd3ffbb8fed5f020c"
+  integrity sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==
   dependencies:
     unicode-canonical-property-names-ecmascript "^1.0.4"
     unicode-property-aliases-ecmascript "^1.0.4"
 
-unicode-match-property-value-ecmascript@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.1.0.tgz#5b4b426e08d13a80365e0d657ac7a6c1ec46a277"
+unicode-match-property-value-ecmascript@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz#0d91f600eeeb3096aa962b1d6fc88876e64ea531"
+  integrity sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==
 
 unicode-property-aliases-ecmascript@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.5.tgz#a9cc6cc7ce63a0a3023fc99e341b94431d405a57"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz#dd57a99f6207bedff4628abefb94c50db941c8f4"
+  integrity sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==
+
+unified@^9.0.0:
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-9.2.0.tgz#67a62c627c40589edebbf60f53edfd4d822027f8"
+  integrity sha512-vx2Z0vY+a3YoTj8+pttM3tiJHCwY5UFbYdiWrwBEbHmK8pvsPj2rtAX2BFfgXen8T39CJWblWRDT4L5WGXtDdg==
+  dependencies:
+    bail "^1.0.0"
+    extend "^3.0.0"
+    is-buffer "^2.0.0"
+    is-plain-obj "^2.0.0"
+    trough "^1.0.0"
+    vfile "^4.0.0"
 
 union-value@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
+  integrity sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==
   dependencies:
     arr-union "^3.1.0"
     get-value "^2.0.6"
@@ -10463,10 +12706,12 @@ union-value@^1.0.0:
 uniq@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
+  integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
 
 uniqs@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
+  integrity sha1-/+3ks2slKQaW5uFl1KWe25mOawI=
 
 unique-filename@^1.1.1:
   version "1.1.1"
@@ -10489,9 +12734,53 @@ unique-string@^1.0.0:
   dependencies:
     crypto-random-string "^1.0.0"
 
+unist-util-find-all-after@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/unist-util-find-all-after/-/unist-util-find-all-after-3.0.1.tgz#95cc62f48812d879b4685a0512bf1b838da50e9a"
+  integrity sha512-0GICgc++sRJesLwEYDjFVJPJttBpVQaTNgc6Jw0Jhzvfs+jtKePEMu+uD+PqkRUrAvGQqwhpDwLGWo1PK8PDEw==
+  dependencies:
+    unist-util-is "^4.0.0"
+
+unist-util-is@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-4.0.2.tgz#c7d1341188aa9ce5b3cff538958de9895f14a5de"
+  integrity sha512-Ofx8uf6haexJwI1gxWMGg6I/dLnF2yE+KibhD3/diOqY2TinLcqHXCV6OI5gFVn3xQqDH+u0M625pfKwIwgBKQ==
+
+unist-util-remove-position@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/unist-util-remove-position/-/unist-util-remove-position-2.0.1.tgz#5d19ca79fdba712301999b2b73553ca8f3b352cc"
+  integrity sha512-fDZsLYIe2uT+oGFnuZmy73K6ZxOPG/Qcm+w7jbEjaFcJgbQ6cqjs/eSPzXhsmGpAsWPkqZM9pYjww5QTn3LHMA==
+  dependencies:
+    unist-util-visit "^2.0.0"
+
+unist-util-stringify-position@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz#cce3bfa1cdf85ba7375d1d5b17bdc4cada9bd9da"
+  integrity sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==
+  dependencies:
+    "@types/unist" "^2.0.2"
+
+unist-util-visit-parents@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-3.1.0.tgz#4dd262fb9dcfe44f297d53e882fc6ff3421173d5"
+  integrity sha512-0g4wbluTF93npyPrp/ymd3tCDTMnP0yo2akFD2FIBAYXq/Sga3lwaU1D8OYKbtpioaI6CkDcQ6fsMnmtzt7htw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^4.0.0"
+
+unist-util-visit@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-2.0.3.tgz#c3703893146df47203bb8a9795af47d7b971208c"
+  integrity sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^4.0.0"
+    unist-util-visit-parents "^3.0.0"
+
 universalify@^0.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
+  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
 
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
@@ -10501,10 +12790,12 @@ unpipe@1.0.0, unpipe@~1.0.0:
 unquote@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
+  integrity sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=
 
 unset-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
+  integrity sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=
   dependencies:
     has-value "^0.3.1"
     isobject "^3.0.0"
@@ -10517,6 +12808,7 @@ unzip-response@^2.0.1:
 upath@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
+  integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
 
 update-notifier@^2.2.0, update-notifier@^2.3.0, update-notifier@^2.5.0:
   version "2.5.0"
@@ -10537,21 +12829,24 @@ update-notifier@^2.2.0, update-notifier@^2.3.0, update-notifier@^2.5.0:
 upper-case@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
+  integrity sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=
 
 uri-js@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
-  integrity sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.0.tgz#aa714261de793e8a82347a7bcc9ce74e86f28602"
+  integrity sha512-B0yRTzYdUCCn9n+F4+Gh4yIDtMQcaJsmYBDsTSG8g/OejKBodLQ2IHfN3bM7jUsRXndopT7OIXWdYqc1fjmV6g==
   dependencies:
     punycode "^2.1.0"
 
 urix@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
+  integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
 
 url-loader@1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-1.1.2.tgz#b971d191b83af693c5e3fea4064be9e1f2d7f8d8"
+  integrity sha512-dXHkKmw8FhPqu8asTc1puBfe3TehOCo2+RmOOev5suNCIYBcT626kxiWg1NBVkwc4rO8BGa7gP70W7VXuqHrjg==
   dependencies:
     loader-utils "^1.1.0"
     mime "^2.0.3"
@@ -10567,6 +12862,7 @@ url-parse-lax@^1.0.0:
 url-parse@^1.4.3:
   version "1.4.7"
   resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.4.7.tgz#a8a83535e8c00a316e403a5db4ac1b9b853ae278"
+  integrity sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==
   dependencies:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
@@ -10574,6 +12870,7 @@ url-parse@^1.4.3:
 url@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
+  integrity sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=
   dependencies:
     punycode "1.3.2"
     querystring "0.2.0"
@@ -10581,6 +12878,7 @@ url@^0.11.0:
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
+  integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
 
 util-deprecate@^1.0.1, util-deprecate@~1.0.1:
   version "1.0.2"
@@ -10599,38 +12897,58 @@ util-promisify@^2.1.0:
   dependencies:
     object.getownpropertydescriptors "^2.0.3"
 
-util.promisify@1.0.0, util.promisify@^1.0.0, util.promisify@~1.0.0:
+util.promisify@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
+  integrity sha512-i+6qA2MPhvoKLuxnJNpXAGhg7HphQOSUq2LKMZD0m15EiskXUkMvKdF4Uui0WYeCUGea+o2cw/ZuwehtfsrNkA==
   dependencies:
     define-properties "^1.1.2"
     object.getownpropertydescriptors "^2.0.3"
 
+util.promisify@^1.0.0, util.promisify@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.1.tgz#6baf7774b80eeb0f7520d8b81d07982a59abbaee"
+  integrity sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.2"
+    has-symbols "^1.0.1"
+    object.getownpropertydescriptors "^2.1.0"
+
 util@0.10.3:
   version "0.10.3"
   resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
+  integrity sha1-evsa/lCAUkZInj23/g7TeTNqwPk=
   dependencies:
     inherits "2.0.1"
 
 util@^0.11.0:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/util/-/util-0.11.1.tgz#3236733720ec64bb27f6e26f421aaa2e1b588d61"
+  integrity sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==
   dependencies:
     inherits "2.0.3"
 
 utila@^0.4.0, utila@~0.4:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
+  integrity sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=
 
 utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+  integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
 
 uuid@^3.0.1, uuid@^3.3.2, uuid@^3.3.3:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
+v8-compile-cache@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz#54bc3cdd43317bca91e35dcaf305b1a7237de745"
+  integrity sha512-8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ==
+
 validate-npm-package-license@^3.0.1, validate-npm-package-license@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
@@ -10649,10 +12967,12 @@ validate-npm-package-name@^3.0.0, validate-npm-package-name@~3.0.0:
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
 
 vendors@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.3.tgz#a6467781abd366217c050f8202e7e50cc9eef8c0"
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
+  integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
 
 verror@1.10.0:
   version "1.10.0"
@@ -10663,33 +12983,71 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+vfile-location@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-3.1.0.tgz#81cd8a04b0ac935185f4fce16f270503fc2f692f"
+  integrity sha512-FCZ4AN9xMcjFIG1oGmZKo61PjwJHRVA+0/tPUP2ul4uIwjGGndIxavEMRpWn5p4xwm/ZsdXp9YNygf1ZyE4x8g==
+
+vfile-message@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-2.0.4.tgz#5b43b88171d409eae58477d13f23dd41d52c371a"
+  integrity sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-stringify-position "^2.0.0"
+
+vfile@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-4.2.0.tgz#26c78ac92eb70816b01d4565e003b7e65a2a0e01"
+  integrity sha512-a/alcwCvtuc8OX92rqqo7PflxiCgXRFjdyoGVuYV+qbgCb0GgZJRvIgCD4+U/Kl1yhaRsaTwksF88xbPyGsgpw==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    is-buffer "^2.0.0"
+    replace-ext "1.0.0"
+    unist-util-stringify-position "^2.0.0"
+    vfile-message "^2.0.0"
+
 vm-browserify@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
+  integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
 walker@^1.0.7, walker@~1.0.5:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"
+  integrity sha1-L3+bj9ENZ3JisYqITijRlhjgKPs=
   dependencies:
     makeerror "1.0.x"
 
 warning@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+  integrity sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=
   dependencies:
     loose-envify "^1.0.0"
 
+watchpack-chokidar2@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.0.tgz#9948a1866cbbd6cb824dea13a7ed691f6c8ddff0"
+  integrity sha512-9TyfOyN/zLUbA288wZ8IsMZ+6cbzvsNyEzSBp6e/zkifi6xxbl8SmQ/CxQq32k8NNqrdVEVUVSEf56L4rQ/ZxA==
+  dependencies:
+    chokidar "^2.1.8"
+
 watchpack@^1.5.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.7.4.tgz#6e9da53b3c80bb2d6508188f5b200410866cd30b"
+  integrity sha512-aWAgTW4MoSJzZPAicljkO1hsi1oKj/RRq/OJQh2PKI2UKL04c2Bs+MBOB+BBABHTXJpf9mCwHN7ANCvYsvY2sg==
   dependencies:
-    chokidar "^2.0.2"
     graceful-fs "^4.1.2"
     neo-async "^2.5.0"
+  optionalDependencies:
+    chokidar "^3.4.1"
+    watchpack-chokidar2 "^2.0.0"
 
 wbuf@^1.1.0, wbuf@^1.7.3:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/wbuf/-/wbuf-1.7.3.tgz#c1d8d149316d3ea852848895cb6a0bfe887b87df"
+  integrity sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==
   dependencies:
     minimalistic-assert "^1.0.0"
 
@@ -10703,6 +13061,7 @@ wcwidth@^1.0.0:
 webpack-dev-middleware@^3.5.1:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz#0019c3db716e3fa5cecbf64f2ab88a74bab331f3"
+  integrity sha512-1xC42LxbYoqLNAhV6YzTYacicgMZQTqRd27Sim9wn5hJrX3I5nxYy1SxSd4+gjUFsz1dQFj+yEe6zEVmSkeJjw==
   dependencies:
     memory-fs "^0.4.1"
     mime "^2.4.4"
@@ -10713,6 +13072,7 @@ webpack-dev-middleware@^3.5.1:
 webpack-dev-server@3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.2.1.tgz#1b45ce3ecfc55b6ebe5e36dab2777c02bc508c4e"
+  integrity sha512-sjuE4mnmx6JOh9kvSbPYw3u/6uxCLHNWfhWaIPwcXWsvWOPN+nc5baq4i9jui3oOBRXGonK9+OI0jVkaz6/rCw==
   dependencies:
     ansi-html "0.0.7"
     bonjour "^3.5.0"
@@ -10748,6 +13108,7 @@ webpack-dev-server@3.2.1:
 webpack-log@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-2.0.0.tgz#5b7928e0637593f119d32f6227c1e0ac31e1b47f"
+  integrity sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==
   dependencies:
     ansi-colors "^3.0.0"
     uuid "^3.3.2"
@@ -10755,6 +13116,7 @@ webpack-log@^2.0.0:
 webpack-manifest-plugin@2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-2.0.4.tgz#e4ca2999b09557716b8ba4475fb79fab5986f0cd"
+  integrity sha512-nejhOHexXDBKQOj/5v5IZSfCeTO3x1Dt1RZEcGfBSul891X/eLIcIVH31gwxPDdsi2Z8LKKFGpM4w9+oTBOSCg==
   dependencies:
     fs-extra "^7.0.0"
     lodash ">=3.5 <5"
@@ -10763,6 +13125,7 @@ webpack-manifest-plugin@2.0.4:
 webpack-sources@^1.1.0, webpack-sources@^1.3.0, webpack-sources@^1.4.0:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
+  integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
   dependencies:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
@@ -10770,6 +13133,7 @@ webpack-sources@^1.1.0, webpack-sources@^1.3.0, webpack-sources@^1.4.0:
 webpack@4.29.6:
   version "4.29.6"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.29.6.tgz#66bf0ec8beee4d469f8b598d3988ff9d8d90e955"
+  integrity sha512-MwBwpiE1BQpMDkbnUUaW6K8RFZjljJHArC6tWQJoFm0oQtfoSebtg4Y7/QHnJ/SddtjYLHaKGX64CFjG5rehJw==
   dependencies:
     "@webassemblyjs/ast" "1.8.5"
     "@webassemblyjs/helper-module-context" "1.8.5"
@@ -10797,10 +13161,11 @@ webpack@4.29.6:
     webpack-sources "^1.3.0"
 
 websocket-driver@>=0.5.1:
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.3.tgz#a2d4e0d4f4f116f1e6297eba58b05d430100e9f9"
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"
+  integrity sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==
   dependencies:
-    http-parser-js ">=0.4.0 <0.4.11"
+    http-parser-js ">=0.5.1"
     safe-buffer ">=5.1.0"
     websocket-extensions ">=0.1.1"
 
@@ -10810,12 +13175,9 @@ websocket-extensions@>=0.1.1:
   integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
 
 whatwg-fetch@>=0.10.0, whatwg-fetch@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
-
-which-module@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/which-module/-/which-module-1.0.0.tgz#bba63ca861948994ff307736089e3b96026c2a4f"
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.4.1.tgz#e5f871572d6879663fa5674c8f833f15a8425ab3"
+  integrity sha512-sofZVzE1wKwO+EYPbWfiwzaKovWiZXf4coEzjGP9b2GBVgQRLQUZ2QcuPpQExGDAW5GItpEm6Tl4OU5mywnAoQ==
 
 which-module@^2.0.0:
   version "2.0.0"
@@ -10846,22 +13208,26 @@ widest-line@^2.0.0:
 word-wrap@~1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
+  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
 
 workbox-background-sync@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-4.3.1.tgz#26821b9bf16e9e37fd1d640289edddc08afd1950"
+  integrity sha512-1uFkvU8JXi7L7fCHVBEEnc3asPpiAL33kO495UMcD5+arew9IbKW2rV5lpzhoWcm/qhGB89YfO4PmB/0hQwPRg==
   dependencies:
     workbox-core "^4.3.1"
 
 workbox-broadcast-update@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-4.3.1.tgz#e2c0280b149e3a504983b757606ad041f332c35b"
+  integrity sha512-MTSfgzIljpKLTBPROo4IpKjESD86pPFlZwlvVG32Kb70hW+aob4Jxpblud8EhNb1/L5m43DUM4q7C+W6eQMMbA==
   dependencies:
     workbox-core "^4.3.1"
 
 workbox-build@^4.2.0:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-4.3.1.tgz#414f70fb4d6de47f6538608b80ec52412d233e64"
+  integrity sha512-UHdwrN3FrDvicM3AqJS/J07X0KXj67R8Cg0waq1MKEOqzo89ap6zh6LmaLnRAjpB+bDIz+7OlPye9iii9KBnxw==
   dependencies:
     "@babel/runtime" "^7.3.4"
     "@hapi/joi" "^15.0.0"
@@ -10890,22 +13256,26 @@ workbox-build@^4.2.0:
 workbox-cacheable-response@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-4.3.1.tgz#f53e079179c095a3f19e5313b284975c91428c91"
+  integrity sha512-Rp5qlzm6z8IOvnQNkCdO9qrDgDpoPNguovs0H8C+wswLuPgSzSp9p2afb5maUt9R1uTIwOXrVQMmPfPypv+npw==
   dependencies:
     workbox-core "^4.3.1"
 
 workbox-core@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-4.3.1.tgz#005d2c6a06a171437afd6ca2904a5727ecd73be6"
+  integrity sha512-I3C9jlLmMKPxAC1t0ExCq+QoAMd0vAAHULEgRZ7kieCdUd919n53WC0AfvokHNwqRhGn+tIIj7vcb5duCjs2Kg==
 
 workbox-expiration@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-4.3.1.tgz#d790433562029e56837f341d7f553c4a78ebe921"
+  integrity sha512-vsJLhgQsQouv9m0rpbXubT5jw0jMQdjpkum0uT+d9tTwhXcEZks7qLfQ9dGSaufTD2eimxbUOJfWLbNQpIDMPw==
   dependencies:
     workbox-core "^4.3.1"
 
 workbox-google-analytics@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-4.3.1.tgz#9eda0183b103890b5c256e6f4ea15a1f1548519a"
+  integrity sha512-xzCjAoKuOb55CBSwQrbyWBKqp35yg1vw9ohIlU2wTy06ZrYfJ8rKochb1MSGlnoBfXGWss3UPzxR5QL5guIFdg==
   dependencies:
     workbox-background-sync "^4.3.1"
     workbox-core "^4.3.1"
@@ -10915,46 +13285,54 @@ workbox-google-analytics@^4.3.1:
 workbox-navigation-preload@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-4.3.1.tgz#29c8e4db5843803b34cd96dc155f9ebd9afa453d"
+  integrity sha512-K076n3oFHYp16/C+F8CwrRqD25GitA6Rkd6+qAmLmMv1QHPI2jfDwYqrytOfKfYq42bYtW8Pr21ejZX7GvALOw==
   dependencies:
     workbox-core "^4.3.1"
 
 workbox-precaching@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-4.3.1.tgz#9fc45ed122d94bbe1f0ea9584ff5940960771cba"
+  integrity sha512-piSg/2csPoIi/vPpp48t1q5JLYjMkmg5gsXBQkh/QYapCdVwwmKlU9mHdmy52KsDGIjVaqEUMFvEzn2LRaigqQ==
   dependencies:
     workbox-core "^4.3.1"
 
 workbox-range-requests@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-4.3.1.tgz#f8a470188922145cbf0c09a9a2d5e35645244e74"
+  integrity sha512-S+HhL9+iTFypJZ/yQSl/x2Bf5pWnbXdd3j57xnb0V60FW1LVn9LRZkPtneODklzYuFZv7qK6riZ5BNyc0R0jZA==
   dependencies:
     workbox-core "^4.3.1"
 
 workbox-routing@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-4.3.1.tgz#a675841af623e0bb0c67ce4ed8e724ac0bed0cda"
+  integrity sha512-FkbtrODA4Imsi0p7TW9u9MXuQ5P4pVs1sWHK4dJMMChVROsbEltuE79fBoIk/BCztvOJ7yUpErMKa4z3uQLX+g==
   dependencies:
     workbox-core "^4.3.1"
 
 workbox-strategies@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-4.3.1.tgz#d2be03c4ef214c115e1ab29c9c759c9fe3e9e646"
+  integrity sha512-F/+E57BmVG8dX6dCCopBlkDvvhg/zj6VDs0PigYwSN23L8hseSRwljrceU2WzTvk/+BSYICsWmRq5qHS2UYzhw==
   dependencies:
     workbox-core "^4.3.1"
 
 workbox-streams@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-4.3.1.tgz#0b57da70e982572de09c8742dd0cb40a6b7c2cc3"
+  integrity sha512-4Kisis1f/y0ihf4l3u/+ndMkJkIT4/6UOacU3A4BwZSAC9pQ9vSvJpIi/WFGQRH/uPXvuVjF5c2RfIPQFSS2uA==
   dependencies:
     workbox-core "^4.3.1"
 
 workbox-sw@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-4.3.1.tgz#df69e395c479ef4d14499372bcd84c0f5e246164"
+  integrity sha512-0jXdusCL2uC5gM3yYFT6QMBzKfBr2XTk0g5TPAV4y8IZDyVNDyj1a8uSXy3/XrvkVTmQvLN4O5k3JawGReXr9w==
 
 workbox-webpack-plugin@4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/workbox-webpack-plugin/-/workbox-webpack-plugin-4.2.0.tgz#c94c3f69ff39c8a5b0c7e6bebc382cb53410a63d"
+  integrity sha512-YZsiA+y/ns/GdWRaBsfYv8dln1ebWtGnJcTOg1ppO0pO1tScAHX0yGtHIjndxz3L/UUhE8b0NQE9KeLNwJwA5A==
   dependencies:
     "@babel/runtime" "^7.0.0"
     json-stable-stringify "^1.0.1"
@@ -10963,6 +13341,7 @@ workbox-webpack-plugin@4.2.0:
 workbox-window@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-4.3.1.tgz#ee6051bf10f06afa5483c9b8dfa0531994ede0f3"
+  integrity sha512-C5gWKh6I58w3GeSc0wp2Ne+rqVw8qwcmZnQGpjiek8A2wpbxSJb1FdCoQVO+jDJs35bFgo/WETgl1fqgsxN0Hg==
   dependencies:
     workbox-core "^4.3.1"
 
@@ -10976,6 +13355,7 @@ worker-farm@^1.5.2, worker-farm@^1.6.0, worker-farm@^1.7.0:
 worker-rpc@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/worker-rpc/-/worker-rpc-0.1.1.tgz#cb565bd6d7071a8f16660686051e969ad32f54d5"
+  integrity sha512-P1WjMrUB3qgJNI9jfmpZ/htmBEjFh//6l/5y8SD9hg1Ef5zTTVVoRjTrTEzPrNBQvmhMxkoTsjOXN10GWU7aCg==
   dependencies:
     microevent.ts "~0.1.1"
 
@@ -11004,6 +13384,7 @@ wrappy@1:
 write-file-atomic@2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.1.tgz#d0b05463c188ae804396fd5ab2a370062af87529"
+  integrity sha512-TGHFeZEZMnv+gBFRfjAcxL5bPHrsGKtnb4qsFAws7/vlh+QfwAaySIw4AXP9ZskTTh5GWu3FLuJhsWVdiJPGvg==
   dependencies:
     graceful-fs "^4.1.11"
     imurmurhash "^0.1.4"
@@ -11018,9 +13399,20 @@ write-file-atomic@^2.0.0, write-file-atomic@^2.3.0, write-file-atomic@^2.4.3:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.2"
 
+write-file-atomic@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8"
+  integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==
+  dependencies:
+    imurmurhash "^0.1.4"
+    is-typedarray "^1.0.0"
+    signal-exit "^3.0.2"
+    typedarray-to-buffer "^3.1.5"
+
 write@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"
+  integrity sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==
   dependencies:
     mkdirp "^0.5.1"
 
@@ -11032,8 +13424,9 @@ xdg-basedir@^3.0.0:
 xregexp@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.0.0.tgz#e698189de49dd2a18cc5687b05e17c8e43943020"
+  integrity sha512-PHyM+sQouu7xspQQwELlGwwd05mXUFqwFYfqPO0cC7x4fxyHnnuetmQr6CjJiafIDoH4MogHb9dOoJzR/Y4rFg==
 
-xtend@^4.0.0, xtend@~4.0.1:
+xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
@@ -11058,9 +13451,15 @@ yallist@^3.0.0, yallist@^3.0.2, yallist@^3.0.3:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
 
+yaml@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e"
+  integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==
+
 yargs-parser@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-10.1.0.tgz#7202265b89f7e9e9f2e5765e0fe735a905edbaa8"
+  integrity sha512-VCIyR1wJoEBZUqk5PA+oOBF6ypbwh5aNB3I50guxAL/quggdfs4TtNHQrSazFA3fYZ+tEqfs0zIGlv0c/rgjbQ==
   dependencies:
     camelcase "^4.1.0"
 
@@ -11080,11 +13479,13 @@ yargs-parser@^15.0.1:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a"
+yargs-parser@^18.1.3:
+  version "18.1.3"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
+  integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==
   dependencies:
-    camelcase "^3.0.0"
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
 
 yargs-parser@^7.0.0:
   version "7.0.0"
@@ -11096,12 +13497,14 @@ yargs-parser@^7.0.0:
 yargs-parser@^9.0.2:
   version "9.0.2"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-9.0.2.tgz#9ccf6a43460fe4ed40a9bb68f48d43b8a68cc077"
+  integrity sha1-nM9qQ0YP5O1Aqbto9I1DuKaMwHc=
   dependencies:
     camelcase "^4.1.0"
 
 yargs@12.0.2:
   version "12.0.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.2.tgz#fe58234369392af33ecbef53819171eff0f5aadc"
+  integrity sha512-e7SkEx6N6SIZ5c5H22RTZae61qtn3PYUE8JYbBFlK9sYmh3DMQ6E5ygtaG/2BW0JZi4WGgTR2IV5ChqlqrDGVQ==
   dependencies:
     cliui "^4.0.0"
     decamelize "^2.0.0"
@@ -11119,6 +13522,7 @@ yargs@12.0.2:
 yargs@^11.0.0:
   version "11.1.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-11.1.1.tgz#5052efe3446a4df5ed669c995886cc0f13702766"
+  integrity sha512-PRU7gJrJaXv3q3yQZ/+/X6KBswZiaQ+zOmdprZcouPYtQgvNU35i+68M4b1ZHLZtYFT5QObFLV+ZkmJYcwKdiw==
   dependencies:
     cliui "^4.0.0"
     decamelize "^1.1.1"
@@ -11133,7 +13537,7 @@ yargs@^11.0.0:
     y18n "^3.2.1"
     yargs-parser "^9.0.2"
 
-yargs@^13.3.0:
+yargs@^13.3.0, yargs@^13.3.2:
   version "13.3.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
   integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==
@@ -11166,24 +13570,6 @@ yargs@^14.2.3:
     y18n "^4.0.0"
     yargs-parser "^15.0.1"
 
-yargs@^7.0.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"
-  dependencies:
-    camelcase "^3.0.0"
-    cliui "^3.2.0"
-    decamelize "^1.1.1"
-    get-caller-file "^1.0.1"
-    os-locale "^1.4.0"
-    read-pkg-up "^1.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^1.0.1"
-    set-blocking "^2.0.0"
-    string-width "^1.0.2"
-    which-module "^1.0.0"
-    y18n "^3.2.1"
-    yargs-parser "^5.0.0"
-
 yargs@^8.0.2:
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-8.0.2.tgz#6299a9055b1cefc969ff7e79c1d918dceb22c360"
@@ -11203,6 +13589,7 @@ yargs@^8.0.2:
     y18n "^3.2.1"
     yargs-parser "^7.0.0"
 
-zrender@4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/zrender/-/zrender-4.2.0.tgz#d001302e155f28de1f9fc7fcd5c254bad28471cf"
+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==

From 96d10098917bf491df33f9a37d5d3d4be5e28174 Mon Sep 17 00:00:00 2001
From: Lijiao <Lijiaoa@outlook.com>
Date: Thu, 10 Sep 2020 08:56:31 +0000
Subject: [PATCH 5/8] add arrow-parens rule

---
 src/webui/.eslintrc                           |  7 +-
 src/webui/package.json                        |  1 +
 src/webui/prettier.config.js                  |  1 +
 src/webui/src/App.tsx                         |  7 +-
 src/webui/src/components/Modals/Compare.tsx   | 75 ++++++++-----------
 .../src/components/overview/SuccessTable.tsx  | 12 ++-
 6 files changed, 45 insertions(+), 58 deletions(-)

diff --git a/src/webui/.eslintrc b/src/webui/.eslintrc
index 801c353c1a..0b5b7832b2 100644
--- a/src/webui/.eslintrc
+++ b/src/webui/.eslintrc
@@ -26,11 +26,12 @@
         "@typescript-eslint/no-namespace": 0,
         "@typescript-eslint/consistent-type-assertions": 0,
         "@typescript-eslint/no-inferrable-types": 0,
-        "no-inner-declarations": 0,
         "@typescript-eslint/no-var-requires": 0,
-        "react/display-name": 0,
+        "arrow-parens": [2, "as-needed"],
+        "no-inner-declarations": 0,
         "no-empty": 2,
-        "no-multiple-empty-lines": [2, { "max": 1 }]
+        "no-multiple-empty-lines": [2, { "max": 1 }],
+        "react/display-name": 0
     },
     "settings": {
         "react": {
diff --git a/src/webui/package.json b/src/webui/package.json
index 0de4b39de6..6be2634397 100644
--- a/src/webui/package.json
+++ b/src/webui/package.json
@@ -2,6 +2,7 @@
   "name": "nni-webui",
   "version": "0.1.0",
   "private": true,
+  "license": "MIT",
   "dependencies": {
     "axios": "^0.19.0",
     "babel-eslint": "10.0.1",
diff --git a/src/webui/prettier.config.js b/src/webui/prettier.config.js
index a40c3a1d75..798b34d91c 100644
--- a/src/webui/prettier.config.js
+++ b/src/webui/prettier.config.js
@@ -4,6 +4,7 @@ module.exports = {
     useTabs: true,
     tabWidth: 4,
     trailingComma: 'none',
+    arrowParens: 'avoid',
     bracketSpacing: true,
     eslintIntegration: true,
     singleQuote: true,
diff --git a/src/webui/src/App.tsx b/src/webui/src/App.tsx
index 5370590d40..69f7d9f0fe 100644
--- a/src/webui/src/App.tsx
+++ b/src/webui/src/App.tsx
@@ -146,15 +146,14 @@ class App extends React.Component<{}, AppState> {
 				<Stack className='contentBox'>
 					<Stack className='content'>
 						{/* if api has error field, show error message */}
-						{errorList.map((item, key) => {
-							return (
+						{errorList.map(
+							(item, key) =>
 								item.errorWhere && (
 									<div key={key} className='warning'>
 										<MessageInfo info={item.errorMessage} typeInfo='error' />
 									</div>
 								)
-							);
-						})}
+						)}
 						{isillegalFinal && (
 							<div className='warning'>
 								<MessageInfo info={expWarningMessage} typeInfo='warning' />
diff --git a/src/webui/src/components/Modals/Compare.tsx b/src/webui/src/components/Modals/Compare.tsx
index 104e0134ee..fa0b95eb2a 100644
--- a/src/webui/src/components/Modals/Compare.tsx
+++ b/src/webui/src/components/Modals/Compare.tsx
@@ -147,63 +147,50 @@ class Compare extends React.Component<CompareProps, {}> {
 				<tbody>
 					<tr>
 						<td className='column'>Id</td>
-						{Object.keys(idList).map(key => {
-							return (
-								<td className='value idList' key={key}>
-									{idList[key]}
-								</td>
-							);
-						})}
+						{Object.keys(idList).map(key => (
+							<td className='value idList' key={key}>
+								{idList[key]}
+							</td>
+						))}
 					</tr>
 					<tr>
 						<td className='column'>Trial No.</td>
-						{Object.keys(sequenceIdList).map(key => {
-							return (
-								<td className='value idList' key={key}>
-									{sequenceIdList[key]}
-								</td>
-							);
-						})}
+						{Object.keys(sequenceIdList).map(key => (
+							<td className='value idList' key={key}>
+								{sequenceIdList[key]}
+							</td>
+						))}
 					</tr>
 					<tr>
 						<td className='column'>Default metric</td>
-						{Object.keys(compareStacks).map(index => {
-							const temp = compareStacks[index];
-							return (
-								<td className='value' key={index}>
-									<IntermediateVal trialId={temp.id} />
-								</td>
-							);
-						})}
+						{Object.keys(compareStacks).map(index => (
+							<td className='value' key={index}>
+								<IntermediateVal trialId={compareStacks[index].id} />
+							</td>
+						))}
 					</tr>
 					<tr>
 						<td className='column'>duration</td>
-						{Object.keys(durationList).map(index => {
-							return (
-								<td className='value' key={index}>
-									{durationList[index]}
-								</td>
-							);
-						})}
+						{Object.keys(durationList).map(index => (
+							<td className='value' key={index}>
+								{durationList[index]}
+							</td>
+						))}
 					</tr>
 					{isComplexSearchSpace
 						? null
-						: Object.keys(parameterKeys).map(index => {
-								return (
-									<tr key={index}>
-										<td className='column' key={index}>
-											{parameterKeys[index]}
+						: Object.keys(parameterKeys).map(index => (
+								<tr key={index}>
+									<td className='column' key={index}>
+										{parameterKeys[index]}
+									</td>
+									{Object.keys(parameterList).map(key => (
+										<td key={key} className='value'>
+											{parameterList[key][parameterKeys[index]]}
 										</td>
-										{Object.keys(parameterList).map(key => {
-											return (
-												<td key={key} className='value'>
-													{parameterList[key][parameterKeys[index]]}
-												</td>
-											);
-										})}
-									</tr>
-								);
-						  })}
+									))}
+								</tr>
+						  ))}
 				</tbody>
 			</table>
 		);
diff --git a/src/webui/src/components/overview/SuccessTable.tsx b/src/webui/src/components/overview/SuccessTable.tsx
index ea8a83540a..eae2cdb892 100644
--- a/src/webui/src/components/overview/SuccessTable.tsx
+++ b/src/webui/src/components/overview/SuccessTable.tsx
@@ -96,13 +96,11 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
 			fieldName: 'duration',
 			data: 'number',
 			onColumnClick: this.onColumnClick,
-			onRender: (item: any): React.ReactNode => {
-				return (
-					<div className='durationsty'>
-						<div>{convertDuration(item.duration)}</div>
-					</div>
-				);
-			}
+			onRender: (item: any): React.ReactNode => (
+				<div className='durationsty'>
+					<div>{convertDuration(item.duration)}</div>
+				</div>
+			)
 		},
 		{
 			name: 'Status',

From 63973a495d3501e6a64168c6dcfbdd7ceb92088d Mon Sep 17 00:00:00 2001
From: Lijiao <Lijiaoa@outlook.com>
Date: Thu, 10 Sep 2020 09:24:59 +0000
Subject: [PATCH 6/8] update

---
 src/webui/.eslintignore                       |    2 +-
 src/webui/.eslintrc                           |    2 +-
 src/webui/.stylelintrc.json                   |    2 +-
 src/webui/prettier.config.js                  |    3 +-
 src/webui/src/App.test.tsx                    |    6 +-
 src/webui/src/App.tsx                         |  376 ++---
 src/webui/src/components/Buttons/Icon.tsx     |   28 +-
 .../src/components/Buttons/ModalTheme.tsx     |   86 +-
 .../Modals/ChangeColumnComponent.tsx          |  236 +--
 src/webui/src/components/Modals/Compare.tsx   |  422 ++---
 .../src/components/Modals/CustomizedTrial.tsx |  488 +++---
 .../src/components/Modals/ExperimentPanel.tsx |  202 +--
 src/webui/src/components/Modals/Killjob.tsx   |  224 +--
 src/webui/src/components/Modals/LogPanel.tsx  |  292 ++--
 .../src/components/Modals/MessageInfo.tsx     |   28 +-
 src/webui/src/components/NavCon.tsx           |  414 ++---
 src/webui/src/components/Overview.tsx         |  342 ++--
 src/webui/src/components/TrialsDetail.tsx     |  356 ++--
 .../src/components/overview/Accuracy.tsx      |   46 +-
 .../src/components/overview/BasicInfo.tsx     |   98 +-
 src/webui/src/components/overview/Details.tsx |   44 +-
 .../src/components/overview/NumInput.tsx      |   94 +-
 .../src/components/overview/Progress.tsx      |  546 +++---
 .../src/components/overview/ProgressItem.tsx  |   62 +-
 .../src/components/overview/SearchSpace.tsx   |   36 +-
 .../src/components/overview/SuccessTable.tsx  |  262 +--
 src/webui/src/components/overview/Title1.tsx  |   30 +-
 .../src/components/overview/TrialProfile.tsx  |   70 +-
 .../components/public-child/DefaultMetric.tsx |   16 +-
 .../public-child/IntermediateVal.tsx          |   14 +-
 .../components/public-child/LogPathChild.tsx  |   42 +-
 .../components/public-child/MonacoEditor.tsx  |   76 +-
 .../src/components/public-child/OpenRow.tsx   |  174 +-
 .../components/public-child/PaiTrialChild.tsx |   62 +-
 .../components/public-child/PaiTrialLog.tsx   |   84 +-
 .../src/components/public-child/TrialLog.tsx  |   26 +-
 .../stateless-component/NNItabs.tsx           |   18 +-
 .../trial-detail/DefaultMetricPoint.tsx       |  332 ++--
 .../src/components/trial-detail/Duration.tsx  |  366 ++--
 .../components/trial-detail/Intermediate.tsx  |  546 +++---
 .../src/components/trial-detail/Para.tsx      |  506 +++---
 .../src/components/trial-detail/TableList.tsx | 1466 ++++++++---------
 src/webui/src/index.tsx                       |   18 +-
 src/webui/src/react-app-env.d.ts              |   52 +-
 src/webui/src/static/const.ts                 |  100 +-
 src/webui/src/static/function.ts              |  386 ++---
 src/webui/src/static/interface.ts             |  314 ++--
 src/webui/src/static/model/experiment.ts      |  334 ++--
 src/webui/src/static/model/searchspace.ts     |  312 ++--
 src/webui/src/static/model/trial.ts           |  564 +++----
 src/webui/src/static/model/trialmanager.ts    |  516 +++---
 51 files changed, 5560 insertions(+), 5561 deletions(-)

diff --git a/src/webui/.eslintignore b/src/webui/.eslintignore
index c487812d87..b83a84e051 100644
--- a/src/webui/.eslintignore
+++ b/src/webui/.eslintignore
@@ -1,3 +1,3 @@
 /build/**
 /scripts/**
-/src/serviceWorker.ts
\ No newline at end of file
+/src/serviceWorker.ts
diff --git a/src/webui/.eslintrc b/src/webui/.eslintrc
index 0b5b7832b2..9cbc9b54bc 100644
--- a/src/webui/.eslintrc
+++ b/src/webui/.eslintrc
@@ -43,4 +43,4 @@
             "**/*.js"
         ]
     }
-}
\ No newline at end of file
+}
diff --git a/src/webui/.stylelintrc.json b/src/webui/.stylelintrc.json
index 0c4b9e48e5..ed2c635724 100644
--- a/src/webui/.stylelintrc.json
+++ b/src/webui/.stylelintrc.json
@@ -8,4 +8,4 @@
     "indentation": 4,
     "no-descending-specificity": null
   }
-}
\ No newline at end of file
+}
diff --git a/src/webui/prettier.config.js b/src/webui/prettier.config.js
index 798b34d91c..8865b43b22 100644
--- a/src/webui/prettier.config.js
+++ b/src/webui/prettier.config.js
@@ -1,7 +1,6 @@
 module.exports = {
     printWidth: 120,
     semi: true,
-    useTabs: true,
     tabWidth: 4,
     trailingComma: 'none',
     arrowParens: 'avoid',
@@ -10,4 +9,4 @@ module.exports = {
     singleQuote: true,
     jsxSingleQuote: true,
     endOfline: 'lf'
-};
\ No newline at end of file
+};
diff --git a/src/webui/src/App.test.tsx b/src/webui/src/App.test.tsx
index 52d874c0f2..d1c2db9810 100644
--- a/src/webui/src/App.test.tsx
+++ b/src/webui/src/App.test.tsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import App from './App';
 
 it('renders without crashing', () => {
-	const div = document.createElement('div');
-	ReactDOM.render(<App />, div);
-	ReactDOM.unmountComponentAtNode(div);
+    const div = document.createElement('div');
+    ReactDOM.render(<App />, div);
+    ReactDOM.unmountComponentAtNode(div);
 });
diff --git a/src/webui/src/App.tsx b/src/webui/src/App.tsx
index 69f7d9f0fe..ed042e1002 100644
--- a/src/webui/src/App.tsx
+++ b/src/webui/src/App.tsx
@@ -7,197 +7,197 @@ import MessageInfo from './components/Modals/MessageInfo';
 import './App.scss';
 
 interface AppState {
-	interval: number;
-	columnList: string[];
-	experimentUpdateBroadcast: number;
-	trialsUpdateBroadcast: number;
-	metricGraphMode: 'max' | 'min'; // tuner's optimize_mode filed
-	isillegalFinal: boolean;
-	expWarningMessage: string;
-	bestTrialEntries: string; // for overview page: best trial entreis
+    interval: number;
+    columnList: string[];
+    experimentUpdateBroadcast: number;
+    trialsUpdateBroadcast: number;
+    metricGraphMode: 'max' | 'min'; // tuner's optimize_mode filed
+    isillegalFinal: boolean;
+    expWarningMessage: string;
+    bestTrialEntries: string; // for overview page: best trial entreis
 }
 
 class App extends React.Component<{}, AppState> {
-	private timerId!: number | undefined;
-	private dataFormatimer!: number;
-	private firstLoad: boolean = false; // when click refresh selector options
-
-	constructor(props: {}) {
-		super(props);
-		this.state = {
-			interval: 10, // sendons
-			columnList: COLUMN,
-			experimentUpdateBroadcast: 0,
-			trialsUpdateBroadcast: 0,
-			metricGraphMode: 'max',
-			isillegalFinal: false,
-			expWarningMessage: '',
-			bestTrialEntries: '10'
-		};
-	}
-
-	async componentDidMount(): Promise<void> {
-		await Promise.all([EXPERIMENT.init(), TRIALS.init()]);
-		this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1 }));
-		this.setState(state => ({ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
-		this.timerId = window.setTimeout(this.refresh, this.state.interval * 1000);
-		this.setState({ metricGraphMode: EXPERIMENT.optimizeMode === 'minimize' ? 'min' : 'max' });
-		// final result is legal
-		// get a succeed trial，see final result data's format
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		this.dataFormatimer = window.setInterval(this.getFinalDataFormat, this.state.interval * 1000);
-	}
-
-	getFinalDataFormat = (): void => {
-		for (let i = 0; this.state.isillegalFinal === false; i++) {
-			if (TRIALS.succeededTrials()[0] !== undefined && TRIALS.succeededTrials()[0].final !== undefined) {
-				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-				const oneSucceedTrial = JSON.parse(JSON.parse(TRIALS.succeededTrials()[0].final!.data));
-				if (typeof oneSucceedTrial === 'number' || oneSucceedTrial.hasOwnProperty('default')) {
-					window.clearInterval(this.dataFormatimer);
-					break;
-				} else {
-					// illegal final data
-					this.setState(() => ({
-						isillegalFinal: true,
-						expWarningMessage:
-							'WebUI support final result as number and dictornary includes default keys, your experiment final result is illegal, please check your data.'
-					}));
-					window.clearInterval(this.dataFormatimer);
-				}
-			} else {
-				break;
-			}
-		}
-	};
-
-	changeInterval = (interval: number): void => {
-		window.clearTimeout(this.timerId);
-		if (interval === 0) {
-			return;
-		}
-		// setState will trigger page refresh at once.
-		// setState is asyc, interval not update to (this.state.interval) at once.
-		this.setState({ interval }, () => {
-			this.firstLoad = true;
-			this.refresh();
-		});
-	};
-
-	// TODO: use local storage
-	changeColumn = (columnList: string[]): void => {
-		this.setState({ columnList: columnList });
-	};
-
-	changeMetricGraphMode = (val: 'max' | 'min'): void => {
-		this.setState({ metricGraphMode: val });
-	};
-
-	// overview best trial module
-	changeEntries = (entries: string): void => {
-		this.setState({ bestTrialEntries: entries });
-	};
-
-	render(): React.ReactNode {
-		const {
-			interval,
-			columnList,
-			experimentUpdateBroadcast,
-			trialsUpdateBroadcast,
-			metricGraphMode,
-			isillegalFinal,
-			expWarningMessage,
-			bestTrialEntries
-		} = this.state;
-		if (experimentUpdateBroadcast === 0 || trialsUpdateBroadcast === 0) {
-			return null; // TODO: render a loading page
-		}
-
-		const errorList = [
-			{ errorWhere: TRIALS.jobListError(), errorMessage: TRIALS.getJobErrorMessage() },
-			{ errorWhere: EXPERIMENT.experimentError(), errorMessage: EXPERIMENT.getExperimentMessage() },
-			{ errorWhere: EXPERIMENT.statusError(), errorMessage: EXPERIMENT.getStatusMessage() },
-			{ errorWhere: TRIALS.MetricDataError(), errorMessage: TRIALS.getMetricDataErrorMessage() },
-			{ errorWhere: TRIALS.latestMetricDataError(), errorMessage: TRIALS.getLatestMetricDataErrorMessage() },
-			{ errorWhere: TRIALS.metricDataRangeError(), errorMessage: TRIALS.metricDataRangeErrorMessage() }
-		];
-
-		const reactPropsChildren = React.Children.map(this.props.children, child =>
-			React.cloneElement(child as React.ReactElement<any>, {
-				interval,
-				columnList,
-				changeColumn: this.changeColumn,
-				experimentUpdateBroadcast,
-				trialsUpdateBroadcast,
-				metricGraphMode,
-				changeMetricGraphMode: this.changeMetricGraphMode,
-				bestTrialEntries,
-				changeEntries: this.changeEntries
-			})
-		);
-
-		return (
-			<Stack className='nni' style={{ minHeight: window.innerHeight }}>
-				<div className='header'>
-					<div className='headerCon'>
-						<NavCon changeInterval={this.changeInterval} refreshFunction={this.lastRefresh} />
-					</div>
-				</div>
-				<Stack className='contentBox'>
-					<Stack className='content'>
-						{/* if api has error field, show error message */}
-						{errorList.map(
-							(item, key) =>
-								item.errorWhere && (
-									<div key={key} className='warning'>
-										<MessageInfo info={item.errorMessage} typeInfo='error' />
-									</div>
-								)
-						)}
-						{isillegalFinal && (
-							<div className='warning'>
-								<MessageInfo info={expWarningMessage} typeInfo='warning' />
-							</div>
-						)}
-						{reactPropsChildren}
-					</Stack>
-				</Stack>
-			</Stack>
-		);
-	}
-
-	private refresh = async (): Promise<void> => {
-		// resolve this question: 10s -> 20s, page refresh twice.
-		// only refresh this page after clicking the refresh options
-		if (this.firstLoad !== true) {
-			const [experimentUpdated, trialsUpdated] = await Promise.all([EXPERIMENT.update(), TRIALS.update()]);
-			if (experimentUpdated) {
-				this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1 }));
-			}
-			if (trialsUpdated) {
-				this.setState(state => ({ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
-			}
-		} else {
-			this.firstLoad = false;
-		}
-
-		// experiment status and /trial-jobs api's status could decide website update
-		if (['DONE', 'ERROR', 'STOPPED'].includes(EXPERIMENT.status) || TRIALS.jobListError()) {
-			// experiment finished, refresh once more to ensure consistency
-			this.setState({ interval: 0 });
-			this.lastRefresh();
-			return;
-		}
-
-		this.timerId = window.setTimeout(this.refresh, this.state.interval * 1000);
-	};
-
-	public async lastRefresh(): Promise<void> {
-		await EXPERIMENT.update();
-		await TRIALS.update(true);
-		this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1 }));
-		this.setState(state => ({ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
-	}
+    private timerId!: number | undefined;
+    private dataFormatimer!: number;
+    private firstLoad: boolean = false; // when click refresh selector options
+
+    constructor(props: {}) {
+        super(props);
+        this.state = {
+            interval: 10, // sendons
+            columnList: COLUMN,
+            experimentUpdateBroadcast: 0,
+            trialsUpdateBroadcast: 0,
+            metricGraphMode: 'max',
+            isillegalFinal: false,
+            expWarningMessage: '',
+            bestTrialEntries: '10'
+        };
+    }
+
+    async componentDidMount(): Promise<void> {
+        await Promise.all([EXPERIMENT.init(), TRIALS.init()]);
+        this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1 }));
+        this.setState(state => ({ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
+        this.timerId = window.setTimeout(this.refresh, this.state.interval * 1000);
+        this.setState({ metricGraphMode: EXPERIMENT.optimizeMode === 'minimize' ? 'min' : 'max' });
+        // final result is legal
+        // get a succeed trial，see final result data's format
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        this.dataFormatimer = window.setInterval(this.getFinalDataFormat, this.state.interval * 1000);
+    }
+
+    getFinalDataFormat = (): void => {
+        for (let i = 0; this.state.isillegalFinal === false; i++) {
+            if (TRIALS.succeededTrials()[0] !== undefined && TRIALS.succeededTrials()[0].final !== undefined) {
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                const oneSucceedTrial = JSON.parse(JSON.parse(TRIALS.succeededTrials()[0].final!.data));
+                if (typeof oneSucceedTrial === 'number' || oneSucceedTrial.hasOwnProperty('default')) {
+                    window.clearInterval(this.dataFormatimer);
+                    break;
+                } else {
+                    // illegal final data
+                    this.setState(() => ({
+                        isillegalFinal: true,
+                        expWarningMessage:
+                            'WebUI support final result as number and dictornary includes default keys, your experiment final result is illegal, please check your data.'
+                    }));
+                    window.clearInterval(this.dataFormatimer);
+                }
+            } else {
+                break;
+            }
+        }
+    };
+
+    changeInterval = (interval: number): void => {
+        window.clearTimeout(this.timerId);
+        if (interval === 0) {
+            return;
+        }
+        // setState will trigger page refresh at once.
+        // setState is asyc, interval not update to (this.state.interval) at once.
+        this.setState({ interval }, () => {
+            this.firstLoad = true;
+            this.refresh();
+        });
+    };
+
+    // TODO: use local storage
+    changeColumn = (columnList: string[]): void => {
+        this.setState({ columnList: columnList });
+    };
+
+    changeMetricGraphMode = (val: 'max' | 'min'): void => {
+        this.setState({ metricGraphMode: val });
+    };
+
+    // overview best trial module
+    changeEntries = (entries: string): void => {
+        this.setState({ bestTrialEntries: entries });
+    };
+
+    render(): React.ReactNode {
+        const {
+            interval,
+            columnList,
+            experimentUpdateBroadcast,
+            trialsUpdateBroadcast,
+            metricGraphMode,
+            isillegalFinal,
+            expWarningMessage,
+            bestTrialEntries
+        } = this.state;
+        if (experimentUpdateBroadcast === 0 || trialsUpdateBroadcast === 0) {
+            return null; // TODO: render a loading page
+        }
+
+        const errorList = [
+            { errorWhere: TRIALS.jobListError(), errorMessage: TRIALS.getJobErrorMessage() },
+            { errorWhere: EXPERIMENT.experimentError(), errorMessage: EXPERIMENT.getExperimentMessage() },
+            { errorWhere: EXPERIMENT.statusError(), errorMessage: EXPERIMENT.getStatusMessage() },
+            { errorWhere: TRIALS.MetricDataError(), errorMessage: TRIALS.getMetricDataErrorMessage() },
+            { errorWhere: TRIALS.latestMetricDataError(), errorMessage: TRIALS.getLatestMetricDataErrorMessage() },
+            { errorWhere: TRIALS.metricDataRangeError(), errorMessage: TRIALS.metricDataRangeErrorMessage() }
+        ];
+
+        const reactPropsChildren = React.Children.map(this.props.children, child =>
+            React.cloneElement(child as React.ReactElement<any>, {
+                interval,
+                columnList,
+                changeColumn: this.changeColumn,
+                experimentUpdateBroadcast,
+                trialsUpdateBroadcast,
+                metricGraphMode,
+                changeMetricGraphMode: this.changeMetricGraphMode,
+                bestTrialEntries,
+                changeEntries: this.changeEntries
+            })
+        );
+
+        return (
+            <Stack className='nni' style={{ minHeight: window.innerHeight }}>
+                <div className='header'>
+                    <div className='headerCon'>
+                        <NavCon changeInterval={this.changeInterval} refreshFunction={this.lastRefresh} />
+                    </div>
+                </div>
+                <Stack className='contentBox'>
+                    <Stack className='content'>
+                        {/* if api has error field, show error message */}
+                        {errorList.map(
+                            (item, key) =>
+                                item.errorWhere && (
+                                    <div key={key} className='warning'>
+                                        <MessageInfo info={item.errorMessage} typeInfo='error' />
+                                    </div>
+                                )
+                        )}
+                        {isillegalFinal && (
+                            <div className='warning'>
+                                <MessageInfo info={expWarningMessage} typeInfo='warning' />
+                            </div>
+                        )}
+                        {reactPropsChildren}
+                    </Stack>
+                </Stack>
+            </Stack>
+        );
+    }
+
+    private refresh = async (): Promise<void> => {
+        // resolve this question: 10s -> 20s, page refresh twice.
+        // only refresh this page after clicking the refresh options
+        if (this.firstLoad !== true) {
+            const [experimentUpdated, trialsUpdated] = await Promise.all([EXPERIMENT.update(), TRIALS.update()]);
+            if (experimentUpdated) {
+                this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1 }));
+            }
+            if (trialsUpdated) {
+                this.setState(state => ({ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
+            }
+        } else {
+            this.firstLoad = false;
+        }
+
+        // experiment status and /trial-jobs api's status could decide website update
+        if (['DONE', 'ERROR', 'STOPPED'].includes(EXPERIMENT.status) || TRIALS.jobListError()) {
+            // experiment finished, refresh once more to ensure consistency
+            this.setState({ interval: 0 });
+            this.lastRefresh();
+            return;
+        }
+
+        this.timerId = window.setTimeout(this.refresh, this.state.interval * 1000);
+    };
+
+    public async lastRefresh(): Promise<void> {
+        await EXPERIMENT.update();
+        await TRIALS.update(true);
+        this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1 }));
+        this.setState(state => ({ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
+    }
 }
 
 export default App;
diff --git a/src/webui/src/components/Buttons/Icon.tsx b/src/webui/src/components/Buttons/Icon.tsx
index 7e1c0d4577..e67f71a6dc 100644
--- a/src/webui/src/components/Buttons/Icon.tsx
+++ b/src/webui/src/components/Buttons/Icon.tsx
@@ -18,18 +18,18 @@ const closeTimer = { iconName: 'Blocked2' };
 const LineChart = <Icon iconName='LineChart' />;
 
 export {
-	infoIcon,
-	warining,
-	errorBadge,
-	completed,
-	blocked,
-	infoIconAbout,
-	copy,
-	tableListIcon,
-	downLoadIcon,
-	timeIcon,
-	disableUpdates,
-	requency,
-	closeTimer,
-	LineChart
+    infoIcon,
+    warining,
+    errorBadge,
+    completed,
+    blocked,
+    infoIconAbout,
+    copy,
+    tableListIcon,
+    downLoadIcon,
+    timeIcon,
+    disableUpdates,
+    requency,
+    closeTimer,
+    LineChart
 };
diff --git a/src/webui/src/components/Buttons/ModalTheme.tsx b/src/webui/src/components/Buttons/ModalTheme.tsx
index 2afece9696..90871597aa 100644
--- a/src/webui/src/components/Buttons/ModalTheme.tsx
+++ b/src/webui/src/components/Buttons/ModalTheme.tsx
@@ -2,52 +2,52 @@ import { getTheme, mergeStyleSets, FontWeights, FontSizes } from 'office-ui-fabr
 // Themed styles for the example.
 const theme = getTheme();
 const contentStyles = mergeStyleSets({
-	container: {
-		display: 'flex',
-		flexFlow: 'column nowrap',
-		alignItems: 'stretch'
-	},
-	header: [
-		theme.fonts.xLargePlus,
-		{
-			flex: '1 1 auto',
-			borderTop: `4px solid ${theme.palette.themePrimary}`,
-			color: theme.palette.neutralPrimary,
-			display: 'flex',
-			fontSize: FontSizes.xLarge,
-			alignItems: 'center',
-			fontWeight: FontWeights.semibold,
-			padding: '12px 12px 14px 24px'
-		}
-	],
-	body: {
-		flex: '4 4 auto',
-		padding: '0 24px 24px 24px',
-		overflowY: 'hidden',
-		selectors: {
-			p: {
-				margin: '14px 0'
-			},
-			'p:first-child': {
-				marginTop: 0
-			},
-			'p:last-child': {
-				marginBottom: 0
-			}
-		}
-	}
+    container: {
+        display: 'flex',
+        flexFlow: 'column nowrap',
+        alignItems: 'stretch'
+    },
+    header: [
+        theme.fonts.xLargePlus,
+        {
+            flex: '1 1 auto',
+            borderTop: `4px solid ${theme.palette.themePrimary}`,
+            color: theme.palette.neutralPrimary,
+            display: 'flex',
+            fontSize: FontSizes.xLarge,
+            alignItems: 'center',
+            fontWeight: FontWeights.semibold,
+            padding: '12px 12px 14px 24px'
+        }
+    ],
+    body: {
+        flex: '4 4 auto',
+        padding: '0 24px 24px 24px',
+        overflowY: 'hidden',
+        selectors: {
+            p: {
+                margin: '14px 0'
+            },
+            'p:first-child': {
+                marginTop: 0
+            },
+            'p:last-child': {
+                marginBottom: 0
+            }
+        }
+    }
 });
 
 const iconButtonStyles = mergeStyleSets({
-	root: {
-		color: theme.palette.neutralPrimary,
-		marginLeft: 'auto',
-		marginTop: '4px',
-		marginRight: '2px'
-	},
-	rootHovered: {
-		color: theme.palette.neutralDark
-	}
+    root: {
+        color: theme.palette.neutralPrimary,
+        marginLeft: 'auto',
+        marginTop: '4px',
+        marginRight: '2px'
+    },
+    rootHovered: {
+        color: theme.palette.neutralDark
+    }
 });
 
 export { contentStyles, iconButtonStyles };
diff --git a/src/webui/src/components/Modals/ChangeColumnComponent.tsx b/src/webui/src/components/Modals/ChangeColumnComponent.tsx
index c291e9ce95..673246aad0 100644
--- a/src/webui/src/components/Modals/ChangeColumnComponent.tsx
+++ b/src/webui/src/components/Modals/ChangeColumnComponent.tsx
@@ -3,62 +3,62 @@ import { Dialog, DialogType, DialogFooter, Checkbox, PrimaryButton, DefaultButto
 import { OPERATION } from '../../static/const';
 
 interface ChangeColumnState {
-	userSelectColumnList: string[];
-	originSelectColumnList: string[];
+    userSelectColumnList: string[];
+    originSelectColumnList: string[];
 }
 
 interface ChangeColumnProps {
-	isHideDialog: boolean;
-	showColumn: string[]; // all column List
-	selectedColumn: string[]; // user selected column list
-	changeColumn: (val: string[]) => void;
-	hideShowColumnDialog: () => void;
+    isHideDialog: boolean;
+    showColumn: string[]; // all column List
+    selectedColumn: string[]; // user selected column list
+    changeColumn: (val: string[]) => void;
+    hideShowColumnDialog: () => void;
 }
 
 interface CheckBoxItems {
-	label: string;
-	checked: boolean;
-	onChange: () => void;
+    label: string;
+    checked: boolean;
+    onChange: () => void;
 }
 class ChangeColumnComponent extends React.Component<ChangeColumnProps, ChangeColumnState> {
-	constructor(props: ChangeColumnProps) {
-		super(props);
-		this.state = {
-			userSelectColumnList: this.props.selectedColumn,
-			originSelectColumnList: this.props.selectedColumn
-		};
-	}
+    constructor(props: ChangeColumnProps) {
+        super(props);
+        this.state = {
+            userSelectColumnList: this.props.selectedColumn,
+            originSelectColumnList: this.props.selectedColumn
+        };
+    }
 
-	makeChangeHandler = (label: string): any => {
-		return (ev: any, checked: boolean): void => this.onCheckboxChange(ev, label, checked);
-	};
+    makeChangeHandler = (label: string): any => {
+        return (ev: any, checked: boolean): void => this.onCheckboxChange(ev, label, checked);
+    };
 
-	onCheckboxChange = (
-		ev: React.FormEvent<HTMLElement | HTMLInputElement> | undefined,
-		label: string,
-		val?: boolean
-	): void => {
-		const source: string[] = JSON.parse(JSON.stringify(this.state.userSelectColumnList));
-		if (val === true) {
-			if (!source.includes(label)) {
-				source.push(label);
-				this.setState(() => ({ userSelectColumnList: source }));
-			}
-		} else {
-			if (source.includes(label)) {
-				// remove from source
-				const result = source.filter(item => item !== label);
-				this.setState(() => ({ userSelectColumnList: result }));
-			}
-		}
-	};
+    onCheckboxChange = (
+        ev: React.FormEvent<HTMLElement | HTMLInputElement> | undefined,
+        label: string,
+        val?: boolean
+    ): void => {
+        const source: string[] = JSON.parse(JSON.stringify(this.state.userSelectColumnList));
+        if (val === true) {
+            if (!source.includes(label)) {
+                source.push(label);
+                this.setState(() => ({ userSelectColumnList: source }));
+            }
+        } else {
+            if (source.includes(label)) {
+                // remove from source
+                const result = source.filter(item => item !== label);
+                this.setState(() => ({ userSelectColumnList: result }));
+            }
+        }
+    };
 
-	saveUserSelectColumn = (): void => {
-		const { userSelectColumnList } = this.state;
-		const { showColumn } = this.props;
-		// sort by Trial No. | ID | Duration | Start Time | End Time | ...
-		const sortColumn: string[] = [];
-		/**
+    saveUserSelectColumn = (): void => {
+        const { userSelectColumnList } = this.state;
+        const { showColumn } = this.props;
+        // sort by Trial No. | ID | Duration | Start Time | End Time | ...
+        const sortColumn: string[] = [];
+        /**
          * 
          * TODO: use this function to refactor sort column
          * search space might orderless
@@ -72,82 +72,82 @@ class ChangeColumnComponent extends React.Component<ChangeColumnProps, ChangeCol
                 });
             });
          */
-		// push ![Operation] ![search space] column
-		showColumn.map(item => {
-			userSelectColumnList.map(key => {
-				if (item === key && item !== OPERATION) {
-					sortColumn.push(key);
-				}
-			});
-		});
-		// push search space key
-		userSelectColumnList.map(index => {
-			if (index.includes('search space')) {
-				if (!sortColumn.includes(index)) {
-					sortColumn.push(index);
-				}
-			}
-		});
-		// push Operation
-		if (userSelectColumnList.includes(OPERATION)) {
-			sortColumn.push(OPERATION);
-		}
-		this.props.changeColumn(sortColumn);
-		this.hideDialog(); // hide dialog
-	};
+        // push ![Operation] ![search space] column
+        showColumn.map(item => {
+            userSelectColumnList.map(key => {
+                if (item === key && item !== OPERATION) {
+                    sortColumn.push(key);
+                }
+            });
+        });
+        // push search space key
+        userSelectColumnList.map(index => {
+            if (index.includes('search space')) {
+                if (!sortColumn.includes(index)) {
+                    sortColumn.push(index);
+                }
+            }
+        });
+        // push Operation
+        if (userSelectColumnList.includes(OPERATION)) {
+            sortColumn.push(OPERATION);
+        }
+        this.props.changeColumn(sortColumn);
+        this.hideDialog(); // hide dialog
+    };
 
-	hideDialog = (): void => {
-		this.props.hideShowColumnDialog();
-	};
+    hideDialog = (): void => {
+        this.props.hideShowColumnDialog();
+    };
 
-	// user exit dialog
-	cancelOption = (): void => {
-		// reset select column
-		const { originSelectColumnList } = this.state;
-		this.setState({ userSelectColumnList: originSelectColumnList }, () => {
-			this.hideDialog();
-		});
-	};
+    // user exit dialog
+    cancelOption = (): void => {
+        // reset select column
+        const { originSelectColumnList } = this.state;
+        this.setState({ userSelectColumnList: originSelectColumnList }, () => {
+            this.hideDialog();
+        });
+    };
 
-	render(): React.ReactNode {
-		const { showColumn, isHideDialog } = this.props;
-		const { userSelectColumnList } = this.state;
-		const renderOptions: Array<CheckBoxItems> = [];
-		showColumn.map(item => {
-			if (userSelectColumnList.includes(item)) {
-				// selected column name
-				renderOptions.push({ label: item, checked: true, onChange: this.makeChangeHandler(item) });
-			} else {
-				renderOptions.push({ label: item, checked: false, onChange: this.makeChangeHandler(item) });
-			}
-		});
-		return (
-			<div>
-				<Dialog
-					hidden={isHideDialog} // required field!
-					dialogContentProps={{
-						type: DialogType.largeHeader,
-						title: 'Change table column',
-						subText: 'You can chose which columns you want to see in the table.'
-					}}
-					modalProps={{
-						isBlocking: false,
-						styles: { main: { maxWidth: 450 } }
-					}}
-				>
-					<div className='columns-height'>
-						{renderOptions.map(item => {
-							return <Checkbox key={item.label} {...item} styles={{ root: { marginBottom: 8 } }} />;
-						})}
-					</div>
-					<DialogFooter>
-						<PrimaryButton text='Save' onClick={this.saveUserSelectColumn} />
-						<DefaultButton text='Cancel' onClick={this.cancelOption} />
-					</DialogFooter>
-				</Dialog>
-			</div>
-		);
-	}
+    render(): React.ReactNode {
+        const { showColumn, isHideDialog } = this.props;
+        const { userSelectColumnList } = this.state;
+        const renderOptions: Array<CheckBoxItems> = [];
+        showColumn.map(item => {
+            if (userSelectColumnList.includes(item)) {
+                // selected column name
+                renderOptions.push({ label: item, checked: true, onChange: this.makeChangeHandler(item) });
+            } else {
+                renderOptions.push({ label: item, checked: false, onChange: this.makeChangeHandler(item) });
+            }
+        });
+        return (
+            <div>
+                <Dialog
+                    hidden={isHideDialog} // required field!
+                    dialogContentProps={{
+                        type: DialogType.largeHeader,
+                        title: 'Change table column',
+                        subText: 'You can chose which columns you want to see in the table.'
+                    }}
+                    modalProps={{
+                        isBlocking: false,
+                        styles: { main: { maxWidth: 450 } }
+                    }}
+                >
+                    <div className='columns-height'>
+                        {renderOptions.map(item => {
+                            return <Checkbox key={item.label} {...item} styles={{ root: { marginBottom: 8 } }} />;
+                        })}
+                    </div>
+                    <DialogFooter>
+                        <PrimaryButton text='Save' onClick={this.saveUserSelectColumn} />
+                        <DefaultButton text='Cancel' onClick={this.cancelOption} />
+                    </DialogFooter>
+                </Dialog>
+            </div>
+        );
+    }
 }
 
 export default ChangeColumnComponent;
diff --git a/src/webui/src/components/Modals/Compare.tsx b/src/webui/src/components/Modals/Compare.tsx
index fa0b95eb2a..745b5a173f 100644
--- a/src/webui/src/components/Modals/Compare.tsx
+++ b/src/webui/src/components/Modals/Compare.tsx
@@ -8,232 +8,232 @@ import { contentStyles, iconButtonStyles } from '../Buttons/ModalTheme';
 import '../../static/style/compare.scss';
 
 const dragOptions: IDragOptions = {
-	moveMenuItemText: 'Move',
-	closeMenuItemText: 'Close',
-	menu: ContextualMenu
+    moveMenuItemText: 'Move',
+    closeMenuItemText: 'Close',
+    menu: ContextualMenu
 };
 
 // the modal of trial compare
 interface CompareProps {
-	compareStacks: Array<TableRecord>;
-	cancelFunc: () => void;
+    compareStacks: Array<TableRecord>;
+    cancelFunc: () => void;
 }
 
 class Compare extends React.Component<CompareProps, {}> {
-	public _isCompareMount!: boolean;
-	constructor(props: CompareProps) {
-		super(props);
-	}
+    public _isCompareMount!: boolean;
+    constructor(props: CompareProps) {
+        super(props);
+    }
 
-	intermediate = (): React.ReactNode => {
-		const { compareStacks } = this.props;
-		const trialIntermediate: Array<Intermedia> = [];
-		const idsList: string[] = [];
-		compareStacks.forEach(element => {
-			const trial = TRIALS.getTrial(element.id);
-			trialIntermediate.push({
-				name: element.id,
-				data: trial.description.intermediate,
-				type: 'line',
-				hyperPara: trial.description.parameters
-			});
-			idsList.push(element.id);
-		});
-		// find max intermediate number
-		trialIntermediate.sort((a, b) => {
-			return b.data.length - a.data.length;
-		});
-		const legend: string[] = [];
-		// max length
-		const length = trialIntermediate[0] !== undefined ? trialIntermediate[0].data.length : 0;
-		const xAxis: number[] = [];
-		trialIntermediate.forEach(element => {
-			legend.push(element.name);
-		});
-		for (let i = 1; i <= length; i++) {
-			xAxis.push(i);
-		}
-		const option = {
-			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];
-					}
-				},
-				formatter: function(data: TooltipForIntermediate): React.ReactNode {
-					const trialId = data.seriesName;
-					let obj = {};
-					const temp = trialIntermediate.find(key => key.name === trialId);
-					if (temp !== undefined) {
-						obj = temp.hyperPara;
-					}
-					return (
-						'<div class="tooldetailAccuracy">' +
-						'<div>Trial ID: ' +
-						trialId +
-						'</div>' +
-						'<div>Intermediate: ' +
-						data.data +
-						'</div>' +
-						'<div>Parameters: ' +
-						'<pre>' +
-						JSON.stringify(obj, null, 4) +
-						'</pre>' +
-						'</div>' +
-						'</div>'
-					);
-				}
-			},
-			grid: {
-				left: '5%',
-				top: 40,
-				containLabel: true
-			},
-			legend: {
-				// more than 10 trials will hide legend
-				data: idsList.length > 10 ? null : idsList
-			},
-			xAxis: {
-				type: 'category',
-				// name: '# Intermediate',
-				boundaryGap: false,
-				data: xAxis
-			},
-			yAxis: {
-				type: 'value',
-				name: 'Metric',
-				scale: true
-			},
-			series: trialIntermediate
-		};
-		return (
-			<ReactEcharts
-				option={option}
-				style={{ width: '100%', height: 418, margin: '0 auto' }}
-				notMerge={true} // update now
-			/>
-		);
-	};
+    intermediate = (): React.ReactNode => {
+        const { compareStacks } = this.props;
+        const trialIntermediate: Array<Intermedia> = [];
+        const idsList: string[] = [];
+        compareStacks.forEach(element => {
+            const trial = TRIALS.getTrial(element.id);
+            trialIntermediate.push({
+                name: element.id,
+                data: trial.description.intermediate,
+                type: 'line',
+                hyperPara: trial.description.parameters
+            });
+            idsList.push(element.id);
+        });
+        // find max intermediate number
+        trialIntermediate.sort((a, b) => {
+            return b.data.length - a.data.length;
+        });
+        const legend: string[] = [];
+        // max length
+        const length = trialIntermediate[0] !== undefined ? trialIntermediate[0].data.length : 0;
+        const xAxis: number[] = [];
+        trialIntermediate.forEach(element => {
+            legend.push(element.name);
+        });
+        for (let i = 1; i <= length; i++) {
+            xAxis.push(i);
+        }
+        const option = {
+            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];
+                    }
+                },
+                formatter: function(data: TooltipForIntermediate): React.ReactNode {
+                    const trialId = data.seriesName;
+                    let obj = {};
+                    const temp = trialIntermediate.find(key => key.name === trialId);
+                    if (temp !== undefined) {
+                        obj = temp.hyperPara;
+                    }
+                    return (
+                        '<div class="tooldetailAccuracy">' +
+                        '<div>Trial ID: ' +
+                        trialId +
+                        '</div>' +
+                        '<div>Intermediate: ' +
+                        data.data +
+                        '</div>' +
+                        '<div>Parameters: ' +
+                        '<pre>' +
+                        JSON.stringify(obj, null, 4) +
+                        '</pre>' +
+                        '</div>' +
+                        '</div>'
+                    );
+                }
+            },
+            grid: {
+                left: '5%',
+                top: 40,
+                containLabel: true
+            },
+            legend: {
+                // more than 10 trials will hide legend
+                data: idsList.length > 10 ? null : idsList
+            },
+            xAxis: {
+                type: 'category',
+                // name: '# Intermediate',
+                boundaryGap: false,
+                data: xAxis
+            },
+            yAxis: {
+                type: 'value',
+                name: 'Metric',
+                scale: true
+            },
+            series: trialIntermediate
+        };
+        return (
+            <ReactEcharts
+                option={option}
+                style={{ width: '100%', height: 418, margin: '0 auto' }}
+                notMerge={true} // update now
+            />
+        );
+    };
 
-	// render table column ---
-	initColumn = (): React.ReactNode => {
-		const idList: string[] = [];
-		const sequenceIdList: number[] = [];
-		const durationList: number[] = [];
+    // render table column ---
+    initColumn = (): React.ReactNode => {
+        const idList: string[] = [];
+        const sequenceIdList: number[] = [];
+        const durationList: number[] = [];
 
-		const compareStacks = this.props.compareStacks.map(tableRecord => TRIALS.getTrial(tableRecord.id));
+        const compareStacks = this.props.compareStacks.map(tableRecord => TRIALS.getTrial(tableRecord.id));
 
-		const parameterList: Array<object> = [];
-		let parameterKeys: string[] = [];
-		if (compareStacks.length !== 0) {
-			parameterKeys = Object.keys(compareStacks[0].description.parameters);
-		}
-		compareStacks.forEach(temp => {
-			idList.push(temp.id);
-			sequenceIdList.push(temp.sequenceId);
-			durationList.push(temp.duration);
-			parameterList.push(temp.description.parameters);
-		});
-		let isComplexSearchSpace;
-		if (parameterList.length > 0) {
-			isComplexSearchSpace = typeof parameterList[0][parameterKeys[0]] === 'object' ? true : false;
-		}
-		return (
-			<table className='compare-modal-table'>
-				<tbody>
-					<tr>
-						<td className='column'>Id</td>
-						{Object.keys(idList).map(key => (
-							<td className='value idList' key={key}>
-								{idList[key]}
-							</td>
-						))}
-					</tr>
-					<tr>
-						<td className='column'>Trial No.</td>
-						{Object.keys(sequenceIdList).map(key => (
-							<td className='value idList' key={key}>
-								{sequenceIdList[key]}
-							</td>
-						))}
-					</tr>
-					<tr>
-						<td className='column'>Default metric</td>
-						{Object.keys(compareStacks).map(index => (
-							<td className='value' key={index}>
-								<IntermediateVal trialId={compareStacks[index].id} />
-							</td>
-						))}
-					</tr>
-					<tr>
-						<td className='column'>duration</td>
-						{Object.keys(durationList).map(index => (
-							<td className='value' key={index}>
-								{durationList[index]}
-							</td>
-						))}
-					</tr>
-					{isComplexSearchSpace
-						? null
-						: Object.keys(parameterKeys).map(index => (
-								<tr key={index}>
-									<td className='column' key={index}>
-										{parameterKeys[index]}
-									</td>
-									{Object.keys(parameterList).map(key => (
-										<td key={key} className='value'>
-											{parameterList[key][parameterKeys[index]]}
-										</td>
-									))}
-								</tr>
-						  ))}
-				</tbody>
-			</table>
-		);
-	};
+        const parameterList: Array<object> = [];
+        let parameterKeys: string[] = [];
+        if (compareStacks.length !== 0) {
+            parameterKeys = Object.keys(compareStacks[0].description.parameters);
+        }
+        compareStacks.forEach(temp => {
+            idList.push(temp.id);
+            sequenceIdList.push(temp.sequenceId);
+            durationList.push(temp.duration);
+            parameterList.push(temp.description.parameters);
+        });
+        let isComplexSearchSpace;
+        if (parameterList.length > 0) {
+            isComplexSearchSpace = typeof parameterList[0][parameterKeys[0]] === 'object' ? true : false;
+        }
+        return (
+            <table className='compare-modal-table'>
+                <tbody>
+                    <tr>
+                        <td className='column'>Id</td>
+                        {Object.keys(idList).map(key => (
+                            <td className='value idList' key={key}>
+                                {idList[key]}
+                            </td>
+                        ))}
+                    </tr>
+                    <tr>
+                        <td className='column'>Trial No.</td>
+                        {Object.keys(sequenceIdList).map(key => (
+                            <td className='value idList' key={key}>
+                                {sequenceIdList[key]}
+                            </td>
+                        ))}
+                    </tr>
+                    <tr>
+                        <td className='column'>Default metric</td>
+                        {Object.keys(compareStacks).map(index => (
+                            <td className='value' key={index}>
+                                <IntermediateVal trialId={compareStacks[index].id} />
+                            </td>
+                        ))}
+                    </tr>
+                    <tr>
+                        <td className='column'>duration</td>
+                        {Object.keys(durationList).map(index => (
+                            <td className='value' key={index}>
+                                {durationList[index]}
+                            </td>
+                        ))}
+                    </tr>
+                    {isComplexSearchSpace
+                        ? null
+                        : Object.keys(parameterKeys).map(index => (
+                              <tr key={index}>
+                                  <td className='column' key={index}>
+                                      {parameterKeys[index]}
+                                  </td>
+                                  {Object.keys(parameterList).map(key => (
+                                      <td key={key} className='value'>
+                                          {parameterList[key][parameterKeys[index]]}
+                                      </td>
+                                  ))}
+                              </tr>
+                          ))}
+                </tbody>
+            </table>
+        );
+    };
 
-	componentDidMount(): void {
-		this._isCompareMount = true;
-	}
+    componentDidMount(): void {
+        this._isCompareMount = true;
+    }
 
-	componentWillUnmount(): void {
-		this._isCompareMount = false;
-	}
+    componentWillUnmount(): void {
+        this._isCompareMount = false;
+    }
 
-	render(): React.ReactNode {
-		const { cancelFunc } = this.props;
+    render(): React.ReactNode {
+        const { cancelFunc } = this.props;
 
-		return (
-			<Modal
-				isOpen={true}
-				containerClassName={contentStyles.container}
-				className='compare-modal'
-				allowTouchBodyScroll={true}
-				dragOptions={dragOptions}
-			>
-				<div>
-					<div className={contentStyles.header}>
-						<span>Compare trials</span>
-						<IconButton
-							styles={iconButtonStyles}
-							iconProps={{ iconName: 'Cancel' }}
-							ariaLabel='Close popup modal'
-							onClick={cancelFunc}
-						/>
-					</div>
-					<Stack className='compare-modal-intermediate'>
-						{this.intermediate()}
-						<Stack className='compare-yAxis'># Intermediate result</Stack>
-					</Stack>
-					<Stack>{this.initColumn()}</Stack>
-				</div>
-			</Modal>
-		);
-	}
+        return (
+            <Modal
+                isOpen={true}
+                containerClassName={contentStyles.container}
+                className='compare-modal'
+                allowTouchBodyScroll={true}
+                dragOptions={dragOptions}
+            >
+                <div>
+                    <div className={contentStyles.header}>
+                        <span>Compare trials</span>
+                        <IconButton
+                            styles={iconButtonStyles}
+                            iconProps={{ iconName: 'Cancel' }}
+                            ariaLabel='Close popup modal'
+                            onClick={cancelFunc}
+                        />
+                    </div>
+                    <Stack className='compare-modal-intermediate'>
+                        {this.intermediate()}
+                        <Stack className='compare-yAxis'># Intermediate result</Stack>
+                    </Stack>
+                    <Stack>{this.initColumn()}</Stack>
+                </div>
+            </Modal>
+        );
+    }
 }
 
 export default Compare;
diff --git a/src/webui/src/components/Modals/CustomizedTrial.tsx b/src/webui/src/components/Modals/CustomizedTrial.tsx
index 642d93c752..ea62bf6864 100644
--- a/src/webui/src/components/Modals/CustomizedTrial.tsx
+++ b/src/webui/src/components/Modals/CustomizedTrial.tsx
@@ -8,275 +8,275 @@ import { warining, errorBadge, completed } from '../Buttons/Icon';
 import '../../static/style/customized.scss';
 
 interface CustomizeProps {
-	visible: boolean;
-	copyTrialId: string;
-	closeCustomizeModal: () => void;
+    visible: boolean;
+    copyTrialId: string;
+    closeCustomizeModal: () => void;
 }
 
 interface CustomizeState {
-	isShowSubmitSucceed: boolean;
-	isShowSubmitFailed: boolean;
-	isShowWarning: boolean;
-	searchSpace: object;
-	copyTrialParameter: object; // user click the trial's parameters
-	customParameters: object; // customized trial, maybe user change trial's parameters
-	customID: number; // submit customized trial succeed, return the new customized trial id
-	changeMap: Map<string, string | number>; // store change key: value
+    isShowSubmitSucceed: boolean;
+    isShowSubmitFailed: boolean;
+    isShowWarning: boolean;
+    searchSpace: object;
+    copyTrialParameter: object; // user click the trial's parameters
+    customParameters: object; // customized trial, maybe user change trial's parameters
+    customID: number; // submit customized trial succeed, return the new customized trial id
+    changeMap: Map<string, string | number>; // store change key: value
 }
 
 class Customize extends React.Component<CustomizeProps, CustomizeState> {
-	constructor(props: CustomizeProps) {
-		super(props);
-		this.state = {
-			isShowSubmitSucceed: false,
-			isShowSubmitFailed: false,
-			isShowWarning: false,
-			searchSpace: EXPERIMENT.searchSpace,
-			copyTrialParameter: {},
-			customParameters: {},
-			customID: NaN,
-			changeMap: new Map()
-		};
-	}
+    constructor(props: CustomizeProps) {
+        super(props);
+        this.state = {
+            isShowSubmitSucceed: false,
+            isShowSubmitFailed: false,
+            isShowWarning: false,
+            searchSpace: EXPERIMENT.searchSpace,
+            copyTrialParameter: {},
+            customParameters: {},
+            customID: NaN,
+            changeMap: new Map()
+        };
+    }
 
-	getFinalVal = (event: React.ChangeEvent<HTMLInputElement>): void => {
-		const { name, value } = event.target;
-		const { changeMap } = this.state;
-		this.setState({ changeMap: changeMap.set(name, value) });
-	};
+    getFinalVal = (event: React.ChangeEvent<HTMLInputElement>): void => {
+        const { name, value } = event.target;
+        const { changeMap } = this.state;
+        this.setState({ changeMap: changeMap.set(name, value) });
+    };
 
-	// [submit click] user add a new trial [submit a trial]
-	addNewTrial = (): void => {
-		const { searchSpace, copyTrialParameter, changeMap } = this.state;
-		// get user edited hyperParameter, ps: will change data type if you modify the input val
-		const customized = JSON.parse(JSON.stringify(copyTrialParameter));
-		// changeMap: user changed keys: values
-		changeMap.forEach(function(value, key) {
-			customized[key] = value;
-		});
+    // [submit click] user add a new trial [submit a trial]
+    addNewTrial = (): void => {
+        const { searchSpace, copyTrialParameter, changeMap } = this.state;
+        // get user edited hyperParameter, ps: will change data type if you modify the input val
+        const customized = JSON.parse(JSON.stringify(copyTrialParameter));
+        // changeMap: user changed keys: values
+        changeMap.forEach(function(value, key) {
+            customized[key] = value;
+        });
 
-		// true: parameters are wrong
-		let parametersIllegal = false;
-		Object.keys(customized).map(item => {
-			if (item !== 'tag') {
-				// unified data type
-				if (typeof copyTrialParameter[item] === 'number' && typeof customized[item] === 'string') {
-					customized[item] = JSON.parse(customized[item]);
-				}
-				if (searchSpace[item] === undefined) {
-					// sometimes the schema of trial parameters is different from search space
-					// e.g. Batch Tuner
-					return;
-				}
-				if (searchSpace[item]._type === 'choice') {
-					if (
-						searchSpace[item]._value.find((val: string | number) => val === customized[item]) === undefined
-					) {
-						parametersIllegal = true;
-						return;
-					}
-				} else {
-					if (
-						customized[item] < searchSpace[item]._value[0] ||
-						customized[item] > searchSpace[item]._value[1]
-					) {
-						parametersIllegal = true;
-						return;
-					}
-				}
-			}
-		});
-		if (parametersIllegal !== false) {
-			// open the warning modal
-			this.setState(() => ({ isShowWarning: true, customParameters: customized }));
-		} else {
-			// submit a customized job
-			this.submitCustomize(customized);
-		}
-	};
+        // true: parameters are wrong
+        let parametersIllegal = false;
+        Object.keys(customized).map(item => {
+            if (item !== 'tag') {
+                // unified data type
+                if (typeof copyTrialParameter[item] === 'number' && typeof customized[item] === 'string') {
+                    customized[item] = JSON.parse(customized[item]);
+                }
+                if (searchSpace[item] === undefined) {
+                    // sometimes the schema of trial parameters is different from search space
+                    // e.g. Batch Tuner
+                    return;
+                }
+                if (searchSpace[item]._type === 'choice') {
+                    if (
+                        searchSpace[item]._value.find((val: string | number) => val === customized[item]) === undefined
+                    ) {
+                        parametersIllegal = true;
+                        return;
+                    }
+                } else {
+                    if (
+                        customized[item] < searchSpace[item]._value[0] ||
+                        customized[item] > searchSpace[item]._value[1]
+                    ) {
+                        parametersIllegal = true;
+                        return;
+                    }
+                }
+            }
+        });
+        if (parametersIllegal !== false) {
+            // open the warning modal
+            this.setState(() => ({ isShowWarning: true, customParameters: customized }));
+        } else {
+            // submit a customized job
+            this.submitCustomize(customized);
+        }
+    };
 
-	warningConfirm = (): void => {
-		this.setState(() => ({ isShowWarning: false }));
-		const { customParameters } = this.state;
-		this.submitCustomize(customParameters);
-	};
+    warningConfirm = (): void => {
+        this.setState(() => ({ isShowWarning: false }));
+        const { customParameters } = this.state;
+        this.submitCustomize(customParameters);
+    };
 
-	warningCancel = (): void => {
-		this.setState(() => ({ isShowWarning: false }));
-	};
+    warningCancel = (): void => {
+        this.setState(() => ({ isShowWarning: false }));
+    };
 
-	submitCustomize = (customized: Record<string, any>): void => {
-		// delete `tag` key
-		for (const i in customized) {
-			if (i === 'tag') {
-				delete customized[i];
-			}
-		}
-		axios(`${MANAGER_IP}/trial-jobs`, {
-			method: 'POST',
-			headers: { 'Content-Type': 'application/json' },
-			data: customized
-		})
-			.then(res => {
-				if (res.status === 200) {
-					this.setState(() => ({ isShowSubmitSucceed: true, customID: res.data.sequenceId }));
-					this.props.closeCustomizeModal();
-				} else {
-					this.setState(() => ({ isShowSubmitFailed: true }));
-				}
-			})
-			.catch(() => {
-				this.setState(() => ({ isShowSubmitFailed: true }));
-			});
-	};
+    submitCustomize = (customized: Record<string, any>): void => {
+        // delete `tag` key
+        for (const i in customized) {
+            if (i === 'tag') {
+                delete customized[i];
+            }
+        }
+        axios(`${MANAGER_IP}/trial-jobs`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            data: customized
+        })
+            .then(res => {
+                if (res.status === 200) {
+                    this.setState(() => ({ isShowSubmitSucceed: true, customID: res.data.sequenceId }));
+                    this.props.closeCustomizeModal();
+                } else {
+                    this.setState(() => ({ isShowSubmitFailed: true }));
+                }
+            })
+            .catch(() => {
+                this.setState(() => ({ isShowSubmitFailed: true }));
+            });
+    };
 
-	closeSucceedHint = (): void => {
-		// also close customized trial modal
-		this.setState(() => ({ isShowSubmitSucceed: false, changeMap: new Map() }));
-		this.props.closeCustomizeModal();
-	};
+    closeSucceedHint = (): void => {
+        // also close customized trial modal
+        this.setState(() => ({ isShowSubmitSucceed: false, changeMap: new Map() }));
+        this.props.closeCustomizeModal();
+    };
 
-	closeFailedHint = (): void => {
-		// also close customized trial modal
-		this.setState(() => ({ isShowSubmitFailed: false, changeMap: new Map() }));
-		this.props.closeCustomizeModal();
-	};
+    closeFailedHint = (): void => {
+        // also close customized trial modal
+        this.setState(() => ({ isShowSubmitFailed: false, changeMap: new Map() }));
+        this.props.closeCustomizeModal();
+    };
 
-	componentDidMount(): void {
-		const { copyTrialId } = this.props;
-		if (copyTrialId !== undefined && TRIALS.getTrial(copyTrialId) !== undefined) {
-			const originCopyTrialPara = TRIALS.getTrial(copyTrialId).description.parameters;
-			this.setState(() => ({ copyTrialParameter: originCopyTrialPara }));
-		}
-	}
+    componentDidMount(): void {
+        const { copyTrialId } = this.props;
+        if (copyTrialId !== undefined && TRIALS.getTrial(copyTrialId) !== undefined) {
+            const originCopyTrialPara = TRIALS.getTrial(copyTrialId).description.parameters;
+            this.setState(() => ({ copyTrialParameter: originCopyTrialPara }));
+        }
+    }
 
-	componentDidUpdate(prevProps: CustomizeProps): void {
-		if (this.props.copyTrialId !== prevProps.copyTrialId) {
-			const { copyTrialId } = this.props;
-			if (copyTrialId !== undefined && TRIALS.getTrial(copyTrialId) !== undefined) {
-				const originCopyTrialPara = TRIALS.getTrial(copyTrialId).description.parameters;
-				this.setState(() => ({ copyTrialParameter: originCopyTrialPara }));
-			}
-		}
-	}
+    componentDidUpdate(prevProps: CustomizeProps): void {
+        if (this.props.copyTrialId !== prevProps.copyTrialId) {
+            const { copyTrialId } = this.props;
+            if (copyTrialId !== undefined && TRIALS.getTrial(copyTrialId) !== undefined) {
+                const originCopyTrialPara = TRIALS.getTrial(copyTrialId).description.parameters;
+                this.setState(() => ({ copyTrialParameter: originCopyTrialPara }));
+            }
+        }
+    }
 
-	render(): React.ReactNode {
-		const { closeCustomizeModal, visible } = this.props;
-		const { isShowSubmitSucceed, isShowSubmitFailed, isShowWarning, customID, copyTrialParameter } = this.state;
-		const warning =
-			'The parameters you set are not in our search space, this may cause the tuner to crash, Are' +
-			' you sure you want to continue submitting?';
-		return (
-			<Stack>
-				<Dialog
-					hidden={!visible} // required field!
-					dialogContentProps={{
-						type: DialogType.largeHeader,
-						title: 'Customized trial setting',
-						subText: 'You can submit a customized trial.'
-					}}
-					modalProps={{
-						isBlocking: false,
-						styles: { main: { maxWidth: 450 } }
-					}}
-				>
-					<form className='hyper-box'>
-						{Object.keys(copyTrialParameter).map(item => (
-							<Stack horizontal key={item} className='hyper-form'>
-								<StackItem styles={{ root: { minWidth: 100 } }} className='title'>
-									{item}
-								</StackItem>
-								<StackItem className='inputs'>
-									<input
-										type='text'
-										name={item}
-										defaultValue={copyTrialParameter[item]}
-										onChange={this.getFinalVal}
-									/>
-								</StackItem>
-							</Stack>
-						))}
-						{/* disable [tag] because we havn't support */}
-						{/* <Stack key="tag" horizontal className="hyper-form tag-input">
+    render(): React.ReactNode {
+        const { closeCustomizeModal, visible } = this.props;
+        const { isShowSubmitSucceed, isShowSubmitFailed, isShowWarning, customID, copyTrialParameter } = this.state;
+        const warning =
+            'The parameters you set are not in our search space, this may cause the tuner to crash, Are' +
+            ' you sure you want to continue submitting?';
+        return (
+            <Stack>
+                <Dialog
+                    hidden={!visible} // required field!
+                    dialogContentProps={{
+                        type: DialogType.largeHeader,
+                        title: 'Customized trial setting',
+                        subText: 'You can submit a customized trial.'
+                    }}
+                    modalProps={{
+                        isBlocking: false,
+                        styles: { main: { maxWidth: 450 } }
+                    }}
+                >
+                    <form className='hyper-box'>
+                        {Object.keys(copyTrialParameter).map(item => (
+                            <Stack horizontal key={item} className='hyper-form'>
+                                <StackItem styles={{ root: { minWidth: 100 } }} className='title'>
+                                    {item}
+                                </StackItem>
+                                <StackItem className='inputs'>
+                                    <input
+                                        type='text'
+                                        name={item}
+                                        defaultValue={copyTrialParameter[item]}
+                                        onChange={this.getFinalVal}
+                                    />
+                                </StackItem>
+                            </Stack>
+                        ))}
+                        {/* disable [tag] because we havn't support */}
+                        {/* <Stack key="tag" horizontal className="hyper-form tag-input">
                             <StackItem grow={9} className="title">Tag</StackItem>
                             <StackItem grow={15} className="inputs">
                                 <input type="text" value='Customized' />
                             </StackItem>
                         </Stack> */}
-					</form>
-					<DialogFooter>
-						<PrimaryButton text='Submit' onClick={this.addNewTrial} />
-						<DefaultButton text='Cancel' onClick={closeCustomizeModal} />
-					</DialogFooter>
-				</Dialog>
+                    </form>
+                    <DialogFooter>
+                        <PrimaryButton text='Submit' onClick={this.addNewTrial} />
+                        <DefaultButton text='Cancel' onClick={closeCustomizeModal} />
+                    </DialogFooter>
+                </Dialog>
 
-				{/* clone: prompt succeed or failed */}
-				<Dialog
-					hidden={!isShowSubmitSucceed}
-					onDismiss={this.closeSucceedHint}
-					dialogContentProps={{
-						type: DialogType.normal,
-						title: (
-							<div className='icon-color'>
-								{completed}
-								<b>Submit successfully</b>
-							</div>
-						),
-						closeButtonAriaLabel: 'Close',
-						subText: `You can find your customized trial by Trial No.${customID}`
-					}}
-					modalProps={{
-						isBlocking: false,
-						styles: { main: { minWidth: 500 } }
-					}}
-				>
-					<DialogFooter>
-						<PrimaryButton onClick={this.closeSucceedHint} text='OK' />
-					</DialogFooter>
-				</Dialog>
+                {/* clone: prompt succeed or failed */}
+                <Dialog
+                    hidden={!isShowSubmitSucceed}
+                    onDismiss={this.closeSucceedHint}
+                    dialogContentProps={{
+                        type: DialogType.normal,
+                        title: (
+                            <div className='icon-color'>
+                                {completed}
+                                <b>Submit successfully</b>
+                            </div>
+                        ),
+                        closeButtonAriaLabel: 'Close',
+                        subText: `You can find your customized trial by Trial No.${customID}`
+                    }}
+                    modalProps={{
+                        isBlocking: false,
+                        styles: { main: { minWidth: 500 } }
+                    }}
+                >
+                    <DialogFooter>
+                        <PrimaryButton onClick={this.closeSucceedHint} text='OK' />
+                    </DialogFooter>
+                </Dialog>
 
-				<Dialog
-					hidden={!isShowSubmitFailed}
-					onDismiss={this.closeSucceedHint}
-					dialogContentProps={{
-						type: DialogType.normal,
-						title: <div className='icon-error'>{errorBadge}Submit Failed</div>,
-						closeButtonAriaLabel: 'Close',
-						subText: 'Unknown error.'
-					}}
-					modalProps={{
-						isBlocking: false,
-						styles: { main: { minWidth: 500 } }
-					}}
-				>
-					<DialogFooter>
-						<PrimaryButton onClick={this.closeFailedHint} text='OK' />
-					</DialogFooter>
-				</Dialog>
+                <Dialog
+                    hidden={!isShowSubmitFailed}
+                    onDismiss={this.closeSucceedHint}
+                    dialogContentProps={{
+                        type: DialogType.normal,
+                        title: <div className='icon-error'>{errorBadge}Submit Failed</div>,
+                        closeButtonAriaLabel: 'Close',
+                        subText: 'Unknown error.'
+                    }}
+                    modalProps={{
+                        isBlocking: false,
+                        styles: { main: { minWidth: 500 } }
+                    }}
+                >
+                    <DialogFooter>
+                        <PrimaryButton onClick={this.closeFailedHint} text='OK' />
+                    </DialogFooter>
+                </Dialog>
 
-				{/* hyperParameter not match search space, warning modal */}
-				<Dialog
-					hidden={!isShowWarning}
-					onDismiss={this.closeSucceedHint}
-					dialogContentProps={{
-						type: DialogType.normal,
-						title: <div className='icon-error'>{warining}Warning</div>,
-						closeButtonAriaLabel: 'Close',
-						subText: `${warning}`
-					}}
-					modalProps={{
-						isBlocking: false,
-						styles: { main: { minWidth: 500 } }
-					}}
-				>
-					<DialogFooter>
-						<PrimaryButton onClick={this.warningConfirm} text='Confirm' />
-						<DefaultButton onClick={this.warningCancel} text='Cancel' />
-					</DialogFooter>
-				</Dialog>
-			</Stack>
-		);
-	}
+                {/* hyperParameter not match search space, warning modal */}
+                <Dialog
+                    hidden={!isShowWarning}
+                    onDismiss={this.closeSucceedHint}
+                    dialogContentProps={{
+                        type: DialogType.normal,
+                        title: <div className='icon-error'>{warining}Warning</div>,
+                        closeButtonAriaLabel: 'Close',
+                        subText: `${warning}`
+                    }}
+                    modalProps={{
+                        isBlocking: false,
+                        styles: { main: { minWidth: 500 } }
+                    }}
+                >
+                    <DialogFooter>
+                        <PrimaryButton onClick={this.warningConfirm} text='Confirm' />
+                        <DefaultButton onClick={this.warningCancel} text='Cancel' />
+                    </DialogFooter>
+                </Dialog>
+            </Stack>
+        );
+    }
 }
 
 export default Customize;
diff --git a/src/webui/src/components/Modals/ExperimentPanel.tsx b/src/webui/src/components/Modals/ExperimentPanel.tsx
index 865b14242a..9367097c06 100644
--- a/src/webui/src/components/Modals/ExperimentPanel.tsx
+++ b/src/webui/src/components/Modals/ExperimentPanel.tsx
@@ -7,122 +7,122 @@ import MonacoEditor from 'react-monaco-editor';
 import '../../static/style/logDrawer.scss';
 
 interface ExpDrawerProps {
-	closeExpDrawer: () => void;
-	experimentProfile: object;
+    closeExpDrawer: () => void;
+    experimentProfile: object;
 }
 
 interface ExpDrawerState {
-	experiment: string;
-	expDrawerHeight: number;
+    experiment: string;
+    expDrawerHeight: number;
 }
 
 class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
-	public _isExperimentMount!: boolean;
-	private refreshId!: number | undefined;
+    public _isExperimentMount!: boolean;
+    private refreshId!: number | undefined;
 
-	constructor(props: ExpDrawerProps) {
-		super(props);
+    constructor(props: ExpDrawerProps) {
+        super(props);
 
-		this.state = {
-			experiment: '',
-			expDrawerHeight: window.innerHeight
-		};
-	}
+        this.state = {
+            experiment: '',
+            expDrawerHeight: window.innerHeight
+        };
+    }
 
-	getExperimentContent = (): void => {
-		const experimentData = JSON.parse(JSON.stringify(this.props.experimentProfile));
-		if (experimentData.params.searchSpace) {
-			experimentData.params.searchSpace = JSON.parse(experimentData.params.searchSpace);
-		}
-		const trialMessagesArr = TRIALS.getTrialJobList();
-		const interResultList = TRIALS.getMetricsList();
-		Object.keys(trialMessagesArr).map(item => {
-			// not deal with trial's hyperParameters
-			const trialId = trialMessagesArr[item].jobId;
-			// add intermediate result message
-			trialMessagesArr[item].intermediate = [];
-			Object.keys(interResultList).map(key => {
-				const interId = interResultList[key].trialJobId;
-				if (trialId === interId) {
-					trialMessagesArr[item].intermediate.push(interResultList[key]);
-				}
-			});
-		});
-		const result = {
-			experimentParameters: experimentData,
-			trialMessage: trialMessagesArr
-		};
-		if (this._isExperimentMount === true) {
-			this.setState({ experiment: JSON.stringify(result, null, 4) });
-		}
+    getExperimentContent = (): void => {
+        const experimentData = JSON.parse(JSON.stringify(this.props.experimentProfile));
+        if (experimentData.params.searchSpace) {
+            experimentData.params.searchSpace = JSON.parse(experimentData.params.searchSpace);
+        }
+        const trialMessagesArr = TRIALS.getTrialJobList();
+        const interResultList = TRIALS.getMetricsList();
+        Object.keys(trialMessagesArr).map(item => {
+            // not deal with trial's hyperParameters
+            const trialId = trialMessagesArr[item].jobId;
+            // add intermediate result message
+            trialMessagesArr[item].intermediate = [];
+            Object.keys(interResultList).map(key => {
+                const interId = interResultList[key].trialJobId;
+                if (trialId === interId) {
+                    trialMessagesArr[item].intermediate.push(interResultList[key]);
+                }
+            });
+        });
+        const result = {
+            experimentParameters: experimentData,
+            trialMessage: trialMessagesArr
+        };
+        if (this._isExperimentMount === true) {
+            this.setState({ experiment: JSON.stringify(result, null, 4) });
+        }
 
-		if (['DONE', 'ERROR', 'STOPPED'].includes(EXPERIMENT.status)) {
-			if (this.refreshId !== null || this.refreshId !== undefined) {
-				window.clearInterval(this.refreshId);
-			}
-		}
-	};
+        if (['DONE', 'ERROR', 'STOPPED'].includes(EXPERIMENT.status)) {
+            if (this.refreshId !== null || this.refreshId !== undefined) {
+                window.clearInterval(this.refreshId);
+            }
+        }
+    };
 
-	downExperimentParameters = (): void => {
-		const { experiment } = this.state;
-		downFile(experiment, 'experiment.json');
-	};
+    downExperimentParameters = (): void => {
+        const { experiment } = this.state;
+        downFile(experiment, 'experiment.json');
+    };
 
-	onWindowResize = (): void => {
-		this.setState(() => ({ expDrawerHeight: window.innerHeight }));
-	};
+    onWindowResize = (): void => {
+        this.setState(() => ({ expDrawerHeight: window.innerHeight }));
+    };
 
-	componentDidMount(): void {
-		this._isExperimentMount = true;
-		this.getExperimentContent();
-		this.refreshId = window.setInterval(this.getExperimentContent, 10000);
-		window.addEventListener('resize', this.onWindowResize);
-	}
+    componentDidMount(): void {
+        this._isExperimentMount = true;
+        this.getExperimentContent();
+        this.refreshId = window.setInterval(this.getExperimentContent, 10000);
+        window.addEventListener('resize', this.onWindowResize);
+    }
 
-	componentWillUnmount(): void {
-		this._isExperimentMount = false;
-		window.clearTimeout(this.refreshId);
-		window.removeEventListener('resize', this.onWindowResize);
-	}
+    componentWillUnmount(): void {
+        this._isExperimentMount = false;
+        window.clearTimeout(this.refreshId);
+        window.removeEventListener('resize', this.onWindowResize);
+    }
 
-	render(): React.ReactNode {
-		const { closeExpDrawer } = this.props;
-		const { experiment, expDrawerHeight } = this.state;
-		return (
-			<Stack className='logDrawer'>
-				<Panel
-					isOpen={true}
-					hasCloseButton={false}
-					isLightDismiss={true}
-					onLightDismissClick={closeExpDrawer}
-					styles={{ root: { height: expDrawerHeight, paddingTop: 15 } }}
-				>
-					<Pivot style={{ minHeight: 190 }} className='log-tab-body'>
-						<PivotItem headerText='Experiment parameters'>
-							<div className='just-for-log'>
-								<MonacoEditor
-									width='100%'
-									// 92 + marginTop[16]
-									height={expDrawerHeight - 108}
-									language='json'
-									value={experiment}
-									options={DRAWEROPTION}
-								/>
-							</div>
-							<Stack horizontal className='buttons'>
-								<StackItem grow={50} className='download'>
-									<PrimaryButton text='Download' onClick={this.downExperimentParameters} />
-								</StackItem>
-								<StackItem grow={50} className='close'>
-									<DefaultButton text='Close' onClick={closeExpDrawer} />
-								</StackItem>
-							</Stack>
-						</PivotItem>
-					</Pivot>
-				</Panel>
-			</Stack>
-		);
-	}
+    render(): React.ReactNode {
+        const { closeExpDrawer } = this.props;
+        const { experiment, expDrawerHeight } = this.state;
+        return (
+            <Stack className='logDrawer'>
+                <Panel
+                    isOpen={true}
+                    hasCloseButton={false}
+                    isLightDismiss={true}
+                    onLightDismissClick={closeExpDrawer}
+                    styles={{ root: { height: expDrawerHeight, paddingTop: 15 } }}
+                >
+                    <Pivot style={{ minHeight: 190 }} className='log-tab-body'>
+                        <PivotItem headerText='Experiment parameters'>
+                            <div className='just-for-log'>
+                                <MonacoEditor
+                                    width='100%'
+                                    // 92 + marginTop[16]
+                                    height={expDrawerHeight - 108}
+                                    language='json'
+                                    value={experiment}
+                                    options={DRAWEROPTION}
+                                />
+                            </div>
+                            <Stack horizontal className='buttons'>
+                                <StackItem grow={50} className='download'>
+                                    <PrimaryButton text='Download' onClick={this.downExperimentParameters} />
+                                </StackItem>
+                                <StackItem grow={50} className='close'>
+                                    <DefaultButton text='Close' onClick={closeExpDrawer} />
+                                </StackItem>
+                            </Stack>
+                        </PivotItem>
+                    </Pivot>
+                </Panel>
+            </Stack>
+        );
+    }
 }
 
 export default ExperimentDrawer;
diff --git a/src/webui/src/components/Modals/Killjob.tsx b/src/webui/src/components/Modals/Killjob.tsx
index 24c55a3a02..aeae4391bc 100644
--- a/src/webui/src/components/Modals/Killjob.tsx
+++ b/src/webui/src/components/Modals/Killjob.tsx
@@ -1,136 +1,136 @@
 import * as React from 'react';
 import {
-	Stack,
-	FocusTrapCallout,
-	DefaultButton,
-	FocusZone,
-	PrimaryButton,
-	getTheme,
-	mergeStyleSets,
-	FontWeights
+    Stack,
+    FocusTrapCallout,
+    DefaultButton,
+    FocusZone,
+    PrimaryButton,
+    getTheme,
+    mergeStyleSets,
+    FontWeights
 } from 'office-ui-fabric-react';
 import { killJob } from '../../static/function';
 import { blocked } from '../Buttons/Icon';
 
 const theme = getTheme();
 const styles = mergeStyleSets({
-	buttonArea: {
-		verticalAlign: 'top',
-		display: 'inline-block',
-		textAlign: 'center',
-		height: 32
-	},
-	callout: {
-		maxWidth: 300
-	},
-	header: {
-		padding: '18px 24px 12px'
-	},
-	title: [
-		theme.fonts.xLarge,
-		{
-			margin: 0,
-			color: theme.palette.neutralPrimary,
-			fontWeight: FontWeights.semilight
-		}
-	],
-	inner: {
-		height: '100%',
-		padding: '0 24px 20px'
-	},
-	actions: {
-		position: 'relative',
-		marginTop: 20,
-		width: '100%',
-		whiteSpace: 'nowrap'
-	},
-	buttons: {
-		display: 'flex',
-		justifyContent: 'flex-end',
-		padding: '0 24px 24px'
-	},
-	subtext: [
-		theme.fonts.small,
-		{
-			margin: 0,
-			color: theme.palette.neutralPrimary,
-			fontWeight: FontWeights.semilight
-		}
-	]
+    buttonArea: {
+        verticalAlign: 'top',
+        display: 'inline-block',
+        textAlign: 'center',
+        height: 32
+    },
+    callout: {
+        maxWidth: 300
+    },
+    header: {
+        padding: '18px 24px 12px'
+    },
+    title: [
+        theme.fonts.xLarge,
+        {
+            margin: 0,
+            color: theme.palette.neutralPrimary,
+            fontWeight: FontWeights.semilight
+        }
+    ],
+    inner: {
+        height: '100%',
+        padding: '0 24px 20px'
+    },
+    actions: {
+        position: 'relative',
+        marginTop: 20,
+        width: '100%',
+        whiteSpace: 'nowrap'
+    },
+    buttons: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        padding: '0 24px 24px'
+    },
+    subtext: [
+        theme.fonts.small,
+        {
+            margin: 0,
+            color: theme.palette.neutralPrimary,
+            fontWeight: FontWeights.semilight
+        }
+    ]
 });
 
 interface KillJobState {
-	isCalloutVisible: boolean;
+    isCalloutVisible: boolean;
 }
 
 interface KillJobProps {
-	trial: any;
+    trial: any;
 }
 
 class KillJob extends React.Component<KillJobProps, KillJobState> {
-	private menuButtonElement!: HTMLElement | null;
-	constructor(props: KillJobProps) {
-		super(props);
-		this.state = { isCalloutVisible: false };
-	}
+    private menuButtonElement!: HTMLElement | null;
+    constructor(props: KillJobProps) {
+        super(props);
+        this.state = { isCalloutVisible: false };
+    }
 
-	onDismiss = (): void => {
-		this.setState(() => ({ isCalloutVisible: false }));
-	};
+    onDismiss = (): void => {
+        this.setState(() => ({ isCalloutVisible: false }));
+    };
 
-	onKill = (): void => {
-		this.setState({ isCalloutVisible: false }, () => {
-			const { trial } = this.props;
-			killJob(trial.key, trial.id, trial.status);
-		});
-	};
+    onKill = (): void => {
+        this.setState({ isCalloutVisible: false }, () => {
+            const { trial } = this.props;
+            killJob(trial.key, trial.id, trial.status);
+        });
+    };
 
-	openPromot = (event: React.SyntheticEvent<EventTarget>): void => {
-		event.preventDefault();
-		event.stopPropagation();
-		this.setState({ isCalloutVisible: true });
-	};
+    openPromot = (event: React.SyntheticEvent<EventTarget>): void => {
+        event.preventDefault();
+        event.stopPropagation();
+        this.setState({ isCalloutVisible: true });
+    };
 
-	render(): React.ReactNode {
-		const { isCalloutVisible } = this.state;
-		const prompString = 'Are you sure to cancel this trial?';
-		return (
-			<div>
-				<div className={styles.buttonArea} ref={(menuButton): any => (this.menuButtonElement = menuButton)}>
-					<PrimaryButton className='detail-button-operation' onClick={this.openPromot} title='kill'>
-						{blocked}
-					</PrimaryButton>
-				</div>
-				{isCalloutVisible ? (
-					<div>
-						<FocusTrapCallout
-							role='alertdialog'
-							className={styles.callout}
-							gapSpace={0}
-							target={this.menuButtonElement}
-							onDismiss={this.onDismiss}
-							setInitialFocus={true}
-						>
-							<div className={styles.header}>
-								<p className={styles.title}>Kill trial</p>
-							</div>
-							<div className={styles.inner}>
-								<div>
-									<p className={styles.subtext}>{prompString}</p>
-								</div>
-							</div>
-							<FocusZone>
-								<Stack className={styles.buttons} gap={8} horizontal>
-									<DefaultButton onClick={this.onDismiss}>No</DefaultButton>
-									<PrimaryButton onClick={this.onKill}>Yes</PrimaryButton>
-								</Stack>
-							</FocusZone>
-						</FocusTrapCallout>
-					</div>
-				) : null}
-			</div>
-		);
-	}
+    render(): React.ReactNode {
+        const { isCalloutVisible } = this.state;
+        const prompString = 'Are you sure to cancel this trial?';
+        return (
+            <div>
+                <div className={styles.buttonArea} ref={(menuButton): any => (this.menuButtonElement = menuButton)}>
+                    <PrimaryButton className='detail-button-operation' onClick={this.openPromot} title='kill'>
+                        {blocked}
+                    </PrimaryButton>
+                </div>
+                {isCalloutVisible ? (
+                    <div>
+                        <FocusTrapCallout
+                            role='alertdialog'
+                            className={styles.callout}
+                            gapSpace={0}
+                            target={this.menuButtonElement}
+                            onDismiss={this.onDismiss}
+                            setInitialFocus={true}
+                        >
+                            <div className={styles.header}>
+                                <p className={styles.title}>Kill trial</p>
+                            </div>
+                            <div className={styles.inner}>
+                                <div>
+                                    <p className={styles.subtext}>{prompString}</p>
+                                </div>
+                            </div>
+                            <FocusZone>
+                                <Stack className={styles.buttons} gap={8} horizontal>
+                                    <DefaultButton onClick={this.onDismiss}>No</DefaultButton>
+                                    <PrimaryButton onClick={this.onKill}>Yes</PrimaryButton>
+                                </Stack>
+                            </FocusZone>
+                        </FocusTrapCallout>
+                    </div>
+                ) : null}
+            </div>
+        );
+    }
 }
 
 export default KillJob;
diff --git a/src/webui/src/components/Modals/LogPanel.tsx b/src/webui/src/components/Modals/LogPanel.tsx
index 2e0ebd2cfb..ef7a717fe5 100644
--- a/src/webui/src/components/Modals/LogPanel.tsx
+++ b/src/webui/src/components/Modals/LogPanel.tsx
@@ -8,158 +8,158 @@ import MonacoHTML from '../public-child/MonacoEditor';
 import '../../static/style/logDrawer.scss';
 
 interface LogDrawerProps {
-	closeDrawer: () => void;
-	activeTab?: string;
+    closeDrawer: () => void;
+    activeTab?: string;
 }
 
 interface LogDrawerState {
-	nniManagerLogStr: string | null;
-	dispatcherLogStr: string | null;
-	isLoading: boolean;
-	logDrawerHeight: number;
+    nniManagerLogStr: string | null;
+    dispatcherLogStr: string | null;
+    isLoading: boolean;
+    logDrawerHeight: number;
 }
 
 class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
-	private timerId: number | undefined;
-
-	constructor(props: LogDrawerProps) {
-		super(props);
-
-		this.state = {
-			nniManagerLogStr: null,
-			dispatcherLogStr: null,
-			isLoading: true,
-			logDrawerHeight: window.innerHeight - 48
-		};
-	}
-
-	downloadNNImanager = (): void => {
-		if (this.state.nniManagerLogStr !== null) {
-			downFile(this.state.nniManagerLogStr, 'nnimanager.log');
-		}
-	};
-
-	downloadDispatcher = (): void => {
-		if (this.state.dispatcherLogStr !== null) {
-			downFile(this.state.dispatcherLogStr, 'dispatcher.log');
-		}
-	};
-
-	dispatcherHTML = (): React.ReactNode => {
-		return (
-			<div>
-				<span>Dispatcher log</span>
-				<span className='refresh' onClick={this.manualRefresh}>
-					{infoIcon}
-				</span>
-			</div>
-		);
-	};
-
-	nnimanagerHTML = (): React.ReactNode => {
-		return (
-			<div>
-				<span>NNImanager log</span>
-				<span className='refresh' onClick={this.manualRefresh}>
-					{infoIcon}
-				</span>
-			</div>
-		);
-	};
-
-	setLogDrawerHeight = (): void => {
-		this.setState(() => ({ logDrawerHeight: window.innerHeight - 48 }));
-	};
-
-	async componentDidMount(): Promise<void> {
-		this.refresh();
-		window.addEventListener('resize', this.setLogDrawerHeight);
-	}
-
-	componentWillUnmount(): void {
-		window.clearTimeout(this.timerId);
-		window.removeEventListener('resize', this.setLogDrawerHeight);
-	}
-
-	render(): React.ReactNode {
-		const { closeDrawer, activeTab } = this.props;
-		const { nniManagerLogStr, dispatcherLogStr, isLoading, logDrawerHeight } = this.state;
-
-		return (
-			<Stack>
-				<Panel
-					isOpen={true}
-					hasCloseButton={false}
-					isFooterAtBottom={true}
-					isLightDismiss={true}
-					onLightDismissClick={closeDrawer}
-				>
-					<div className='log-tab-body'>
-						<Pivot selectedKey={activeTab} style={{ minHeight: 190, paddingTop: '16px' }}>
-							{/* <PivotItem headerText={this.dispatcherHTML()} key="dispatcher" onLinkClick> */}
-							<PivotItem headerText='Dispatcher log' key='dispatcher'>
-								<MonacoHTML
-									content={dispatcherLogStr || 'Loading...'}
-									loading={isLoading}
-									// paddingTop[16] + tab[44] + button[32]
-									height={logDrawerHeight - 92}
-								/>
-								<Stack horizontal className='buttons'>
-									<StackItem grow={12} className='download'>
-										<PrimaryButton text='Download' onClick={this.downloadDispatcher} />
-									</StackItem>
-									<StackItem grow={12} className='close'>
-										<DefaultButton text='Close' onClick={closeDrawer} />
-									</StackItem>
-								</Stack>
-							</PivotItem>
-							<PivotItem headerText='NNIManager log' key='nnimanager'>
-								{/* <TabPane tab="NNImanager Log" key="nnimanager"> */}
-								<MonacoHTML
-									content={nniManagerLogStr || 'Loading...'}
-									loading={isLoading}
-									height={logDrawerHeight - 92}
-								/>
-								<Stack horizontal className='buttons'>
-									<StackItem grow={12} className='download'>
-										<PrimaryButton text='Download' onClick={this.downloadNNImanager} />
-									</StackItem>
-									<StackItem grow={12} className='close'>
-										<DefaultButton text='Close' onClick={closeDrawer} />
-									</StackItem>
-								</Stack>
-							</PivotItem>
-						</Pivot>
-					</div>
-				</Panel>
-			</Stack>
-		);
-	}
-
-	private refresh = (): void => {
-		window.clearTimeout(this.timerId);
-		const dispatcherPromise = axios.get(`${DOWNLOAD_IP}/dispatcher.log`);
-		const nniManagerPromise = axios.get(`${DOWNLOAD_IP}/nnimanager.log`);
-		dispatcherPromise.then(res => {
-			if (res.status === 200) {
-				this.setState({ dispatcherLogStr: res.data });
-			}
-		});
-		nniManagerPromise.then(res => {
-			if (res.status === 200) {
-				this.setState({ nniManagerLogStr: res.data });
-			}
-		});
-		Promise.all([dispatcherPromise, nniManagerPromise]).then(() => {
-			this.setState({ isLoading: false });
-			this.timerId = window.setTimeout(this.refresh, 10000);
-		});
-	};
-
-	private manualRefresh = (): void => {
-		this.setState({ isLoading: true });
-		this.refresh();
-	};
+    private timerId: number | undefined;
+
+    constructor(props: LogDrawerProps) {
+        super(props);
+
+        this.state = {
+            nniManagerLogStr: null,
+            dispatcherLogStr: null,
+            isLoading: true,
+            logDrawerHeight: window.innerHeight - 48
+        };
+    }
+
+    downloadNNImanager = (): void => {
+        if (this.state.nniManagerLogStr !== null) {
+            downFile(this.state.nniManagerLogStr, 'nnimanager.log');
+        }
+    };
+
+    downloadDispatcher = (): void => {
+        if (this.state.dispatcherLogStr !== null) {
+            downFile(this.state.dispatcherLogStr, 'dispatcher.log');
+        }
+    };
+
+    dispatcherHTML = (): React.ReactNode => {
+        return (
+            <div>
+                <span>Dispatcher log</span>
+                <span className='refresh' onClick={this.manualRefresh}>
+                    {infoIcon}
+                </span>
+            </div>
+        );
+    };
+
+    nnimanagerHTML = (): React.ReactNode => {
+        return (
+            <div>
+                <span>NNImanager log</span>
+                <span className='refresh' onClick={this.manualRefresh}>
+                    {infoIcon}
+                </span>
+            </div>
+        );
+    };
+
+    setLogDrawerHeight = (): void => {
+        this.setState(() => ({ logDrawerHeight: window.innerHeight - 48 }));
+    };
+
+    async componentDidMount(): Promise<void> {
+        this.refresh();
+        window.addEventListener('resize', this.setLogDrawerHeight);
+    }
+
+    componentWillUnmount(): void {
+        window.clearTimeout(this.timerId);
+        window.removeEventListener('resize', this.setLogDrawerHeight);
+    }
+
+    render(): React.ReactNode {
+        const { closeDrawer, activeTab } = this.props;
+        const { nniManagerLogStr, dispatcherLogStr, isLoading, logDrawerHeight } = this.state;
+
+        return (
+            <Stack>
+                <Panel
+                    isOpen={true}
+                    hasCloseButton={false}
+                    isFooterAtBottom={true}
+                    isLightDismiss={true}
+                    onLightDismissClick={closeDrawer}
+                >
+                    <div className='log-tab-body'>
+                        <Pivot selectedKey={activeTab} style={{ minHeight: 190, paddingTop: '16px' }}>
+                            {/* <PivotItem headerText={this.dispatcherHTML()} key="dispatcher" onLinkClick> */}
+                            <PivotItem headerText='Dispatcher log' key='dispatcher'>
+                                <MonacoHTML
+                                    content={dispatcherLogStr || 'Loading...'}
+                                    loading={isLoading}
+                                    // paddingTop[16] + tab[44] + button[32]
+                                    height={logDrawerHeight - 92}
+                                />
+                                <Stack horizontal className='buttons'>
+                                    <StackItem grow={12} className='download'>
+                                        <PrimaryButton text='Download' onClick={this.downloadDispatcher} />
+                                    </StackItem>
+                                    <StackItem grow={12} className='close'>
+                                        <DefaultButton text='Close' onClick={closeDrawer} />
+                                    </StackItem>
+                                </Stack>
+                            </PivotItem>
+                            <PivotItem headerText='NNIManager log' key='nnimanager'>
+                                {/* <TabPane tab="NNImanager Log" key="nnimanager"> */}
+                                <MonacoHTML
+                                    content={nniManagerLogStr || 'Loading...'}
+                                    loading={isLoading}
+                                    height={logDrawerHeight - 92}
+                                />
+                                <Stack horizontal className='buttons'>
+                                    <StackItem grow={12} className='download'>
+                                        <PrimaryButton text='Download' onClick={this.downloadNNImanager} />
+                                    </StackItem>
+                                    <StackItem grow={12} className='close'>
+                                        <DefaultButton text='Close' onClick={closeDrawer} />
+                                    </StackItem>
+                                </Stack>
+                            </PivotItem>
+                        </Pivot>
+                    </div>
+                </Panel>
+            </Stack>
+        );
+    }
+
+    private refresh = (): void => {
+        window.clearTimeout(this.timerId);
+        const dispatcherPromise = axios.get(`${DOWNLOAD_IP}/dispatcher.log`);
+        const nniManagerPromise = axios.get(`${DOWNLOAD_IP}/nnimanager.log`);
+        dispatcherPromise.then(res => {
+            if (res.status === 200) {
+                this.setState({ dispatcherLogStr: res.data });
+            }
+        });
+        nniManagerPromise.then(res => {
+            if (res.status === 200) {
+                this.setState({ nniManagerLogStr: res.data });
+            }
+        });
+        Promise.all([dispatcherPromise, nniManagerPromise]).then(() => {
+            this.setState({ isLoading: false });
+            this.timerId = window.setTimeout(this.refresh, 10000);
+        });
+    };
+
+    private manualRefresh = (): void => {
+        this.setState({ isLoading: true });
+        this.refresh();
+    };
 }
 
 export default LogDrawer;
diff --git a/src/webui/src/components/Modals/MessageInfo.tsx b/src/webui/src/components/Modals/MessageInfo.tsx
index 0568aa9fe2..8477cda63e 100644
--- a/src/webui/src/components/Modals/MessageInfo.tsx
+++ b/src/webui/src/components/Modals/MessageInfo.tsx
@@ -2,24 +2,24 @@ import * as React from 'react';
 import { MessageBar, MessageBarType } from 'office-ui-fabric-react';
 
 interface MessageInfoProps {
-	info: string;
-	typeInfo: string;
-	className?: string;
+    info: string;
+    typeInfo: string;
+    className?: string;
 }
 
 class MessageInfo extends React.Component<MessageInfoProps, {}> {
-	constructor(props: MessageInfoProps) {
-		super(props);
-	}
+    constructor(props: MessageInfoProps) {
+        super(props);
+    }
 
-	render(): React.ReactNode {
-		const { info, typeInfo, className } = this.props;
-		return (
-			<MessageBar messageBarType={MessageBarType[typeInfo]} isMultiline={true} className={className}>
-				{info}
-			</MessageBar>
-		);
-	}
+    render(): React.ReactNode {
+        const { info, typeInfo, className } = this.props;
+        return (
+            <MessageBar messageBarType={MessageBarType[typeInfo]} isMultiline={true} className={className}>
+                {info}
+            </MessageBar>
+        );
+    }
 }
 
 export default MessageInfo;
diff --git a/src/webui/src/components/NavCon.tsx b/src/webui/src/components/NavCon.tsx
index abad7884b9..62ec9a209e 100644
--- a/src/webui/src/components/NavCon.tsx
+++ b/src/webui/src/components/NavCon.tsx
@@ -2,13 +2,13 @@ import * as React from 'react';
 import axios from 'axios';
 import { WEBUIDOC, MANAGER_IP } from '../static/const';
 import {
-	Stack,
-	initializeIcons,
-	StackItem,
-	CommandBarButton,
-	IContextualMenuProps,
-	IStackTokens,
-	IStackStyles
+    Stack,
+    initializeIcons,
+    StackItem,
+    CommandBarButton,
+    IContextualMenuProps,
+    IStackTokens,
+    IStackStyles
 } from 'office-ui-fabric-react';
 import LogPanel from './Modals/LogPanel';
 import ExperimentPanel from './Modals/ExperimentPanel';
@@ -20,221 +20,221 @@ import '../static/style/icon.scss';
 
 initializeIcons();
 const stackTokens: IStackTokens = {
-	childrenGap: 15
+    childrenGap: 15
 };
 const stackStyle: IStackStyles = {
-	root: {
-		minWidth: 400,
-		height: 56,
-		display: 'flex',
-		verticalAlign: 'center'
-	}
+    root: {
+        minWidth: 400,
+        height: 56,
+        display: 'flex',
+        verticalAlign: 'center'
+    }
 };
 
 interface NavState {
-	version: string;
-	menuVisible: boolean;
-	navBarVisible: boolean;
-	isdisabledFresh: boolean;
-	isvisibleLogDrawer: boolean;
-	isvisibleExperimentDrawer: boolean;
-	refreshText: string;
-	refreshFrequency: number | string;
+    version: string;
+    menuVisible: boolean;
+    navBarVisible: boolean;
+    isdisabledFresh: boolean;
+    isvisibleLogDrawer: boolean;
+    isvisibleExperimentDrawer: boolean;
+    refreshText: string;
+    refreshFrequency: number | string;
 }
 
 interface NavProps {
-	changeInterval: (value: number) => void;
-	refreshFunction: () => void;
+    changeInterval: (value: number) => void;
+    refreshFunction: () => void;
 }
 
 class NavCon extends React.Component<NavProps, NavState> {
-	constructor(props: NavProps) {
-		super(props);
-		this.state = {
-			version: '',
-			menuVisible: false,
-			navBarVisible: false,
-			isdisabledFresh: false,
-			isvisibleLogDrawer: false, // download button (nnimanager·dispatcher) click -> drawer
-			isvisibleExperimentDrawer: false,
-			refreshText: 'Auto refresh',
-			refreshFrequency: 10
-		};
-	}
-
-	// to see & download experiment parameters
-	showExpcontent = (): void => {
-		this.setState({ isvisibleExperimentDrawer: true });
-	};
-
-	// to see & download dispatcher | nnimanager log
-	showDispatcherLog = (): void => {
-		this.setState({ isvisibleLogDrawer: true });
-	};
-
-	// close log drawer (nnimanager.dispatcher)
-	closeLogDrawer = (): void => {
-		this.setState({ isvisibleLogDrawer: false });
-	};
-
-	// close download experiment parameters drawer
-	closeExpDrawer = (): void => {
-		this.setState({ isvisibleExperimentDrawer: false });
-	};
-
-	getNNIversion = (): void => {
-		axios(`${MANAGER_IP}/version`, {
-			method: 'GET'
-		}).then(res => {
-			if (res.status === 200) {
-				this.setState({ version: res.data });
-			}
-		});
-	};
-
-	openGithub = (): void => {
-		const { version } = this.state;
-		const feed = `https://github.com/Microsoft/nni/issues/new?labels=${version}`;
-		window.open(feed);
-	};
-
-	openDocs = (): void => {
-		window.open(WEBUIDOC);
-	};
-
-	openGithubNNI = (): void => {
-		const { version } = this.state;
-		const nniLink = `https://github.com/Microsoft/nni/tree/${version}`;
-		window.open(nniLink);
-	};
-
-	getInterval = (num: number): void => {
-		this.props.changeInterval(num); // notice parent component
-		this.setState(() => ({
-			refreshFrequency: num === 0 ? '' : num,
-			refreshText: num === 0 ? 'Disable auto' : 'Auto refresh'
-		}));
-	};
-
-	componentDidMount(): void {
-		this.getNNIversion();
-	}
-
-	render(): React.ReactNode {
-		const { isvisibleLogDrawer, isvisibleExperimentDrawer, version, refreshText, refreshFrequency } = this.state;
-		const aboutProps: IContextualMenuProps = {
-			items: [
-				{
-					key: 'feedback',
-					text: 'Feedback',
-					iconProps: { iconName: 'OfficeChat' },
-					onClick: this.openGithub
-				},
-				{
-					key: 'help',
-					text: 'Document',
-					iconProps: { iconName: 'TextDocument' },
-					onClick: this.openDocs
-				},
-				{
-					key: 'version',
-					text: `Version ${version}`,
-					iconProps: { iconName: 'VerifiedBrand' },
-					onClick: this.openGithubNNI
-				}
-			]
-		};
-		return (
-			<Stack horizontal className='nav'>
-				<StackItem grow={30} styles={{ root: { minWidth: 300, display: 'flex', verticalAlign: 'center' } }}>
-					<span className='desktop-logo'>{NNILOGO}</span>
-					<span className='left-right-margin'>{OVERVIEWTABS}</span>
-					<span>{DETAILTABS}</span>
-				</StackItem>
-				<StackItem grow={70} className='navOptions'>
-					<Stack horizontal horizontalAlign='end' tokens={stackTokens} styles={stackStyle}>
-						{/* refresh button danyi*/}
-						{/* TODO: fix bug */}
-						{/* <CommandBarButton
+    constructor(props: NavProps) {
+        super(props);
+        this.state = {
+            version: '',
+            menuVisible: false,
+            navBarVisible: false,
+            isdisabledFresh: false,
+            isvisibleLogDrawer: false, // download button (nnimanager·dispatcher) click -> drawer
+            isvisibleExperimentDrawer: false,
+            refreshText: 'Auto refresh',
+            refreshFrequency: 10
+        };
+    }
+
+    // to see & download experiment parameters
+    showExpcontent = (): void => {
+        this.setState({ isvisibleExperimentDrawer: true });
+    };
+
+    // to see & download dispatcher | nnimanager log
+    showDispatcherLog = (): void => {
+        this.setState({ isvisibleLogDrawer: true });
+    };
+
+    // close log drawer (nnimanager.dispatcher)
+    closeLogDrawer = (): void => {
+        this.setState({ isvisibleLogDrawer: false });
+    };
+
+    // close download experiment parameters drawer
+    closeExpDrawer = (): void => {
+        this.setState({ isvisibleExperimentDrawer: false });
+    };
+
+    getNNIversion = (): void => {
+        axios(`${MANAGER_IP}/version`, {
+            method: 'GET'
+        }).then(res => {
+            if (res.status === 200) {
+                this.setState({ version: res.data });
+            }
+        });
+    };
+
+    openGithub = (): void => {
+        const { version } = this.state;
+        const feed = `https://github.com/Microsoft/nni/issues/new?labels=${version}`;
+        window.open(feed);
+    };
+
+    openDocs = (): void => {
+        window.open(WEBUIDOC);
+    };
+
+    openGithubNNI = (): void => {
+        const { version } = this.state;
+        const nniLink = `https://github.com/Microsoft/nni/tree/${version}`;
+        window.open(nniLink);
+    };
+
+    getInterval = (num: number): void => {
+        this.props.changeInterval(num); // notice parent component
+        this.setState(() => ({
+            refreshFrequency: num === 0 ? '' : num,
+            refreshText: num === 0 ? 'Disable auto' : 'Auto refresh'
+        }));
+    };
+
+    componentDidMount(): void {
+        this.getNNIversion();
+    }
+
+    render(): React.ReactNode {
+        const { isvisibleLogDrawer, isvisibleExperimentDrawer, version, refreshText, refreshFrequency } = this.state;
+        const aboutProps: IContextualMenuProps = {
+            items: [
+                {
+                    key: 'feedback',
+                    text: 'Feedback',
+                    iconProps: { iconName: 'OfficeChat' },
+                    onClick: this.openGithub
+                },
+                {
+                    key: 'help',
+                    text: 'Document',
+                    iconProps: { iconName: 'TextDocument' },
+                    onClick: this.openDocs
+                },
+                {
+                    key: 'version',
+                    text: `Version ${version}`,
+                    iconProps: { iconName: 'VerifiedBrand' },
+                    onClick: this.openGithubNNI
+                }
+            ]
+        };
+        return (
+            <Stack horizontal className='nav'>
+                <StackItem grow={30} styles={{ root: { minWidth: 300, display: 'flex', verticalAlign: 'center' } }}>
+                    <span className='desktop-logo'>{NNILOGO}</span>
+                    <span className='left-right-margin'>{OVERVIEWTABS}</span>
+                    <span>{DETAILTABS}</span>
+                </StackItem>
+                <StackItem grow={70} className='navOptions'>
+                    <Stack horizontal horizontalAlign='end' tokens={stackTokens} styles={stackStyle}>
+                        {/* refresh button danyi*/}
+                        {/* TODO: fix bug */}
+                        {/* <CommandBarButton
                             iconProps={{ iconName: 'sync' }}
                             text="Refresh"
                             onClick={this.props.refreshFunction}
                         /> */}
-						<div className='nav-refresh'>
-							<CommandBarButton
-								iconProps={refreshFrequency === '' ? disableUpdates : timeIcon}
-								text={refreshText}
-								menuProps={this.refreshProps}
-							/>
-							<div className='nav-refresh-num'>{refreshFrequency}</div>
-						</div>
-						<CommandBarButton iconProps={downLoadIcon} text='Download' menuProps={this.menuProps} />
-						<CommandBarButton iconProps={infoIconAbout} text='About' menuProps={aboutProps} />
-					</Stack>
-				</StackItem>
-				{/* the drawer for dispatcher & nnimanager log message */}
-				{isvisibleLogDrawer && <LogPanel closeDrawer={this.closeLogDrawer} />}
-				{isvisibleExperimentDrawer && (
-					<ExperimentPanel closeExpDrawer={this.closeExpDrawer} experimentProfile={EXPERIMENT.profile} />
-				)}
-			</Stack>
-		);
-	}
-
-	// view and download experiment [log & experiment result]
-	private menuProps: IContextualMenuProps = {
-		items: [
-			{
-				key: 'experiment',
-				text: 'Experiment summary',
-				iconProps: { iconName: 'ShowResults' },
-				onClick: this.showExpcontent
-			},
-			{
-				key: 'logfiles',
-				text: 'Log files',
-				iconProps: { iconName: 'FilePDB' },
-				onClick: this.showDispatcherLog
-			}
-		],
-		directionalHintFixed: true
-	};
-
-	private refreshProps: IContextualMenuProps = {
-		items: [
-			{
-				key: 'disableRefresh',
-				text: 'Disable auto refresh',
-				iconProps: closeTimer,
-				onClick: this.getInterval.bind(this, 0)
-			},
-			{
-				key: 'refresh10',
-				text: 'Refresh every 10s',
-				iconProps: requency,
-				onClick: this.getInterval.bind(this, 10)
-			},
-			{
-				key: 'refresh20',
-				text: 'Refresh every 20s',
-				iconProps: requency,
-				onClick: this.getInterval.bind(this, 20)
-			},
-			{
-				key: 'refresh30',
-				text: 'Refresh every 30s',
-				iconProps: requency,
-				onClick: this.getInterval.bind(this, 30)
-			},
-
-			{
-				key: 'refresh60',
-				text: 'Refresh every 1min',
-				iconProps: requency,
-				onClick: this.getInterval.bind(this, 60)
-			}
-		]
-	};
+                        <div className='nav-refresh'>
+                            <CommandBarButton
+                                iconProps={refreshFrequency === '' ? disableUpdates : timeIcon}
+                                text={refreshText}
+                                menuProps={this.refreshProps}
+                            />
+                            <div className='nav-refresh-num'>{refreshFrequency}</div>
+                        </div>
+                        <CommandBarButton iconProps={downLoadIcon} text='Download' menuProps={this.menuProps} />
+                        <CommandBarButton iconProps={infoIconAbout} text='About' menuProps={aboutProps} />
+                    </Stack>
+                </StackItem>
+                {/* the drawer for dispatcher & nnimanager log message */}
+                {isvisibleLogDrawer && <LogPanel closeDrawer={this.closeLogDrawer} />}
+                {isvisibleExperimentDrawer && (
+                    <ExperimentPanel closeExpDrawer={this.closeExpDrawer} experimentProfile={EXPERIMENT.profile} />
+                )}
+            </Stack>
+        );
+    }
+
+    // view and download experiment [log & experiment result]
+    private menuProps: IContextualMenuProps = {
+        items: [
+            {
+                key: 'experiment',
+                text: 'Experiment summary',
+                iconProps: { iconName: 'ShowResults' },
+                onClick: this.showExpcontent
+            },
+            {
+                key: 'logfiles',
+                text: 'Log files',
+                iconProps: { iconName: 'FilePDB' },
+                onClick: this.showDispatcherLog
+            }
+        ],
+        directionalHintFixed: true
+    };
+
+    private refreshProps: IContextualMenuProps = {
+        items: [
+            {
+                key: 'disableRefresh',
+                text: 'Disable auto refresh',
+                iconProps: closeTimer,
+                onClick: this.getInterval.bind(this, 0)
+            },
+            {
+                key: 'refresh10',
+                text: 'Refresh every 10s',
+                iconProps: requency,
+                onClick: this.getInterval.bind(this, 10)
+            },
+            {
+                key: 'refresh20',
+                text: 'Refresh every 20s',
+                iconProps: requency,
+                onClick: this.getInterval.bind(this, 20)
+            },
+            {
+                key: 'refresh30',
+                text: 'Refresh every 30s',
+                iconProps: requency,
+                onClick: this.getInterval.bind(this, 30)
+            },
+
+            {
+                key: 'refresh60',
+                text: 'Refresh every 1min',
+                iconProps: requency,
+                onClick: this.getInterval.bind(this, 60)
+            }
+        ]
+    };
 }
 
 export default NavCon;
diff --git a/src/webui/src/components/Overview.tsx b/src/webui/src/components/Overview.tsx
index 12a77edb79..b5fde3433a 100644
--- a/src/webui/src/components/Overview.tsx
+++ b/src/webui/src/components/Overview.tsx
@@ -13,189 +13,189 @@ import '../static/style/overview.scss';
 import '../static/style/logPath.scss';
 
 const stackTokens: IStackTokens = {
-	childrenGap: 30
+    childrenGap: 30
 };
 
 const entriesOption = [
-	{ key: '10', text: 'Display top 10 trials' },
-	{ key: '20', text: 'Display top 20 trials' },
-	{ key: '30', text: 'Display top 30 trials' },
-	{ key: '50', text: 'Display top 50 trials' },
-	{ key: '100', text: 'Display top 100 trials' }
+    { key: '10', text: 'Display top 10 trials' },
+    { key: '20', text: 'Display top 20 trials' },
+    { key: '30', text: 'Display top 30 trials' },
+    { key: '50', text: 'Display top 50 trials' },
+    { key: '100', text: 'Display top 100 trials' }
 ];
 
 interface OverviewProps {
-	experimentUpdateBroadcast: number;
-	trialsUpdateBroadcast: number;
-	metricGraphMode: 'max' | 'min';
-	bestTrialEntries: string;
-	changeMetricGraphMode: (val: 'max' | 'min') => void;
-	changeEntries: (entries: string) => void;
+    experimentUpdateBroadcast: number;
+    trialsUpdateBroadcast: number;
+    metricGraphMode: 'max' | 'min';
+    bestTrialEntries: string;
+    changeMetricGraphMode: (val: 'max' | 'min') => void;
+    changeEntries: (entries: string) => void;
 }
 
 interface OverviewState {
-	trialConcurrency: number;
+    trialConcurrency: number;
 }
 
 class Overview extends React.Component<OverviewProps, OverviewState> {
-	constructor(props: OverviewProps) {
-		super(props);
-		this.state = {
-			trialConcurrency: EXPERIMENT.trialConcurrency
-		};
-	}
-
-	clickMaxTop = (event: React.SyntheticEvent<EventTarget>): void => {
-		event.stopPropagation();
-		// #999 panel active bgcolor; #b3b3b3 as usual
-		const { changeMetricGraphMode } = this.props;
-		changeMetricGraphMode('max');
-	};
-
-	clickMinTop = (event: React.SyntheticEvent<EventTarget>): void => {
-		event.stopPropagation();
-		const { changeMetricGraphMode } = this.props;
-		changeMetricGraphMode('min');
-	};
-
-	changeConcurrency = (val: number): void => {
-		this.setState({ trialConcurrency: val });
-	};
-
-	// updateEntries = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
-	updateEntries = (event: React.FormEvent<HTMLDivElement>, item: any): void => {
-		if (item !== undefined) {
-			this.props.changeEntries(item.key);
-		}
-	};
-
-	render(): React.ReactNode {
-		const { trialConcurrency } = this.state;
-		const { experimentUpdateBroadcast, metricGraphMode, bestTrialEntries } = this.props;
-		const bestTrials = this.findBestTrials();
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		const bestAccuracy = bestTrials.length > 0 ? bestTrials[0].accuracy! : NaN;
-		const accuracyGraphData = this.generateAccuracyGraph(bestTrials);
-		const noDataMessage = bestTrials.length > 0 ? '' : 'No data';
-
-		const titleMaxbgcolor = metricGraphMode === 'max' ? '#333' : '#b3b3b3';
-		const titleMinbgcolor = metricGraphMode === 'min' ? '#333' : '#b3b3b3';
-
-		return (
-			<div className='overview'>
-				{/* status and experiment block */}
-				<Stack className='bottomDiv bgNNI'>
-					<Title1 text='Experiment' icon='11.png' />
-					<BasicInfo experimentUpdateBroadcast={experimentUpdateBroadcast} />
-				</Stack>
-
-				<Stack horizontal className='overMessage bottomDiv'>
-					{/* status block */}
-					<Stack.Item grow className='prograph bgNNI borderRight'>
-						<Title1 text='Status' icon='5.png' />
-						<Progressed
-							bestAccuracy={bestAccuracy}
-							concurrency={trialConcurrency}
-							changeConcurrency={this.changeConcurrency}
-							experimentUpdateBroadcast={experimentUpdateBroadcast}
-						/>
-					</Stack.Item>
-					{/* experiment parameters search space tuner assessor... */}
-					<Stack.Item grow styles={{ root: { width: 450 } }} className='overviewBoder borderRight bgNNI'>
-						<Title1 text='Search space' icon='10.png' />
-						<Stack className='experiment'>
-							<SearchSpace searchSpace={EXPERIMENT.searchSpace} />
-						</Stack>
-					</Stack.Item>
-					{/* <Stack.Item grow styles={{root: {width: 450}}} className="bgNNI"> */}
-					<Stack.Item grow styles={{ root: { width: 450 } }} className='bgNNI'>
-						<Title1 text='Config' icon='4.png' />
-						<Stack className='experiment'>
-							{/* the scroll bar all the trial profile in the searchSpace div*/}
-							<div className='experiment searchSpace'>
-								<TrialInfo
-									experimentUpdateBroadcast={experimentUpdateBroadcast}
-									concurrency={trialConcurrency}
-								/>
-							</div>
-						</Stack>
-					</Stack.Item>
-				</Stack>
-
-				<Stack style={{ backgroundColor: '#fff' }}>
-					<Stack horizontal className='top10bg' style={{ position: 'relative', height: 42 }}>
-						<div className='title' onClick={this.clickMaxTop}>
-							<Title1 text='Top maximal trials' icon='max.png' fontColor={titleMaxbgcolor} />
-						</div>
-						<div className='title minTitle' onClick={this.clickMinTop}>
-							<Title1 text='Top minimal trials' icon='min.png' fontColor={titleMinbgcolor} />
-						</div>
-						<div style={{ position: 'absolute', right: '2%', top: 8 }}>
-							<Dropdown
-								selectedKey={bestTrialEntries}
-								options={entriesOption}
-								onChange={this.updateEntries}
-								styles={{ root: { width: 170 } }}
-							/>
-						</div>
-					</Stack>
-					<Stack horizontal tokens={stackTokens}>
-						<div style={{ width: '40%', position: 'relative' }}>
-							<Accuracy accuracyData={accuracyGraphData} accNodata={noDataMessage} height={404} />
-						</div>
-						<div style={{ width: '60%' }}>
-							<SuccessTable trialIds={bestTrials.map(trial => trial.info.id)} />
-						</div>
-					</Stack>
-				</Stack>
-			</div>
-		);
-	}
-
-	private findBestTrials(): Trial[] {
-		const bestTrials = TRIALS.sort();
-		const { bestTrialEntries } = this.props;
-		if (this.props.metricGraphMode === 'max') {
-			bestTrials.reverse().splice(JSON.parse(bestTrialEntries));
-		} else {
-			bestTrials.splice(JSON.parse(bestTrialEntries));
-		}
-		return bestTrials;
-	}
-
-	private generateAccuracyGraph(bestTrials: Trial[]): object {
-		const xSequence = bestTrials.map(trial => trial.sequenceId);
-		const ySequence = bestTrials.map(trial => trial.accuracy);
-
-		return {
-			// support max show 0.0000000
-			grid: {
-				left: 67,
-				right: 40
-			},
-			tooltip: {
-				trigger: 'item'
-			},
-			xAxis: {
-				name: 'Trial',
-				type: 'category',
-				data: xSequence
-			},
-			yAxis: {
-				name: 'Default metric',
-				type: 'value',
-				scale: true,
-				data: ySequence
-			},
-			series: [
-				{
-					symbolSize: 6,
-					type: 'scatter',
-					data: ySequence
-				}
-			]
-		};
-	}
+    constructor(props: OverviewProps) {
+        super(props);
+        this.state = {
+            trialConcurrency: EXPERIMENT.trialConcurrency
+        };
+    }
+
+    clickMaxTop = (event: React.SyntheticEvent<EventTarget>): void => {
+        event.stopPropagation();
+        // #999 panel active bgcolor; #b3b3b3 as usual
+        const { changeMetricGraphMode } = this.props;
+        changeMetricGraphMode('max');
+    };
+
+    clickMinTop = (event: React.SyntheticEvent<EventTarget>): void => {
+        event.stopPropagation();
+        const { changeMetricGraphMode } = this.props;
+        changeMetricGraphMode('min');
+    };
+
+    changeConcurrency = (val: number): void => {
+        this.setState({ trialConcurrency: val });
+    };
+
+    // updateEntries = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
+    updateEntries = (event: React.FormEvent<HTMLDivElement>, item: any): void => {
+        if (item !== undefined) {
+            this.props.changeEntries(item.key);
+        }
+    };
+
+    render(): React.ReactNode {
+        const { trialConcurrency } = this.state;
+        const { experimentUpdateBroadcast, metricGraphMode, bestTrialEntries } = this.props;
+        const bestTrials = this.findBestTrials();
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const bestAccuracy = bestTrials.length > 0 ? bestTrials[0].accuracy! : NaN;
+        const accuracyGraphData = this.generateAccuracyGraph(bestTrials);
+        const noDataMessage = bestTrials.length > 0 ? '' : 'No data';
+
+        const titleMaxbgcolor = metricGraphMode === 'max' ? '#333' : '#b3b3b3';
+        const titleMinbgcolor = metricGraphMode === 'min' ? '#333' : '#b3b3b3';
+
+        return (
+            <div className='overview'>
+                {/* status and experiment block */}
+                <Stack className='bottomDiv bgNNI'>
+                    <Title1 text='Experiment' icon='11.png' />
+                    <BasicInfo experimentUpdateBroadcast={experimentUpdateBroadcast} />
+                </Stack>
+
+                <Stack horizontal className='overMessage bottomDiv'>
+                    {/* status block */}
+                    <Stack.Item grow className='prograph bgNNI borderRight'>
+                        <Title1 text='Status' icon='5.png' />
+                        <Progressed
+                            bestAccuracy={bestAccuracy}
+                            concurrency={trialConcurrency}
+                            changeConcurrency={this.changeConcurrency}
+                            experimentUpdateBroadcast={experimentUpdateBroadcast}
+                        />
+                    </Stack.Item>
+                    {/* experiment parameters search space tuner assessor... */}
+                    <Stack.Item grow styles={{ root: { width: 450 } }} className='overviewBoder borderRight bgNNI'>
+                        <Title1 text='Search space' icon='10.png' />
+                        <Stack className='experiment'>
+                            <SearchSpace searchSpace={EXPERIMENT.searchSpace} />
+                        </Stack>
+                    </Stack.Item>
+                    {/* <Stack.Item grow styles={{root: {width: 450}}} className="bgNNI"> */}
+                    <Stack.Item grow styles={{ root: { width: 450 } }} className='bgNNI'>
+                        <Title1 text='Config' icon='4.png' />
+                        <Stack className='experiment'>
+                            {/* the scroll bar all the trial profile in the searchSpace div*/}
+                            <div className='experiment searchSpace'>
+                                <TrialInfo
+                                    experimentUpdateBroadcast={experimentUpdateBroadcast}
+                                    concurrency={trialConcurrency}
+                                />
+                            </div>
+                        </Stack>
+                    </Stack.Item>
+                </Stack>
+
+                <Stack style={{ backgroundColor: '#fff' }}>
+                    <Stack horizontal className='top10bg' style={{ position: 'relative', height: 42 }}>
+                        <div className='title' onClick={this.clickMaxTop}>
+                            <Title1 text='Top maximal trials' icon='max.png' fontColor={titleMaxbgcolor} />
+                        </div>
+                        <div className='title minTitle' onClick={this.clickMinTop}>
+                            <Title1 text='Top minimal trials' icon='min.png' fontColor={titleMinbgcolor} />
+                        </div>
+                        <div style={{ position: 'absolute', right: '2%', top: 8 }}>
+                            <Dropdown
+                                selectedKey={bestTrialEntries}
+                                options={entriesOption}
+                                onChange={this.updateEntries}
+                                styles={{ root: { width: 170 } }}
+                            />
+                        </div>
+                    </Stack>
+                    <Stack horizontal tokens={stackTokens}>
+                        <div style={{ width: '40%', position: 'relative' }}>
+                            <Accuracy accuracyData={accuracyGraphData} accNodata={noDataMessage} height={404} />
+                        </div>
+                        <div style={{ width: '60%' }}>
+                            <SuccessTable trialIds={bestTrials.map(trial => trial.info.id)} />
+                        </div>
+                    </Stack>
+                </Stack>
+            </div>
+        );
+    }
+
+    private findBestTrials(): Trial[] {
+        const bestTrials = TRIALS.sort();
+        const { bestTrialEntries } = this.props;
+        if (this.props.metricGraphMode === 'max') {
+            bestTrials.reverse().splice(JSON.parse(bestTrialEntries));
+        } else {
+            bestTrials.splice(JSON.parse(bestTrialEntries));
+        }
+        return bestTrials;
+    }
+
+    private generateAccuracyGraph(bestTrials: Trial[]): object {
+        const xSequence = bestTrials.map(trial => trial.sequenceId);
+        const ySequence = bestTrials.map(trial => trial.accuracy);
+
+        return {
+            // support max show 0.0000000
+            grid: {
+                left: 67,
+                right: 40
+            },
+            tooltip: {
+                trigger: 'item'
+            },
+            xAxis: {
+                name: 'Trial',
+                type: 'category',
+                data: xSequence
+            },
+            yAxis: {
+                name: 'Default metric',
+                type: 'value',
+                scale: true,
+                data: ySequence
+            },
+            series: [
+                {
+                    symbolSize: 6,
+                    type: 'scatter',
+                    data: ySequence
+                }
+            ]
+        };
+    }
 }
 
 export default Overview;
diff --git a/src/webui/src/components/TrialsDetail.tsx b/src/webui/src/components/TrialsDetail.tsx
index d3b884d692..d2e9d3ae40 100644
--- a/src/webui/src/components/TrialsDetail.tsx
+++ b/src/webui/src/components/TrialsDetail.tsx
@@ -12,197 +12,197 @@ import '../static/style/trialsDetail.scss';
 import '../static/style/search.scss';
 
 interface TrialDetailState {
-	tablePageSize: number; // table components val
-	whichChart: string;
-	searchType: string;
-	searchFilter: (trial: Trial) => boolean;
+    tablePageSize: number; // table components val
+    whichChart: string;
+    searchType: string;
+    searchFilter: (trial: Trial) => boolean;
 }
 
 interface TrialsDetailProps {
-	columnList: string[];
-	changeColumn: (val: string[]) => void;
-	experimentUpdateBroacast: number;
-	trialsUpdateBroadcast: number;
+    columnList: string[];
+    changeColumn: (val: string[]) => void;
+    experimentUpdateBroacast: number;
+    trialsUpdateBroadcast: number;
 }
 
 class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState> {
-	public interAccuracy = 0;
-	public interAllTableList = 2;
+    public interAccuracy = 0;
+    public interAllTableList = 2;
 
-	public tableList!: TableList | null;
-	public searchInput!: HTMLInputElement | null;
+    public tableList!: TableList | null;
+    public searchInput!: HTMLInputElement | null;
 
-	constructor(props: TrialsDetailProps) {
-		super(props);
-		this.state = {
-			tablePageSize: 20,
-			whichChart: 'Default metric',
-			searchType: 'id',
-			// eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-function-return-type
-			searchFilter: trial => true
-		};
-	}
+    constructor(props: TrialsDetailProps) {
+        super(props);
+        this.state = {
+            tablePageSize: 20,
+            whichChart: 'Default metric',
+            searchType: 'id',
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/explicit-function-return-type
+            searchFilter: trial => true
+        };
+    }
 
-	// search a trial by trial No. | trial id | Parameters | Status
-	searchTrial = (event: React.ChangeEvent<HTMLInputElement>): void => {
-		const targetValue = event.target.value;
-		// eslint-disable-next-line @typescript-eslint/no-unused-vars
-		let filter = (trial: Trial): boolean => true;
-		if (!targetValue.trim()) {
-			this.setState({ searchFilter: filter });
-			return;
-		}
-		switch (this.state.searchType) {
-			case 'id':
-				filter = (trial): boolean => trial.info.id.toUpperCase().includes(targetValue.toUpperCase());
-				break;
-			case 'Trial No.':
-				filter = (trial): boolean => trial.info.sequenceId.toString() === targetValue;
-				break;
-			case 'status':
-				filter = (trial): boolean => trial.info.status.toUpperCase().includes(targetValue.toUpperCase());
-				break;
-			case 'parameters':
-				// TODO: support filters like `x: 2` (instead of `"x": 2`)
-				filter = (trial): boolean => JSON.stringify(trial.info.hyperParameters, null, 4).includes(targetValue);
-				break;
-			default:
-				alert(`Unexpected search filter ${this.state.searchType}`);
-		}
-		this.setState({ searchFilter: filter });
-	};
+    // search a trial by trial No. | trial id | Parameters | Status
+    searchTrial = (event: React.ChangeEvent<HTMLInputElement>): void => {
+        const targetValue = event.target.value;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        let filter = (trial: Trial): boolean => true;
+        if (!targetValue.trim()) {
+            this.setState({ searchFilter: filter });
+            return;
+        }
+        switch (this.state.searchType) {
+            case 'id':
+                filter = (trial): boolean => trial.info.id.toUpperCase().includes(targetValue.toUpperCase());
+                break;
+            case 'Trial No.':
+                filter = (trial): boolean => trial.info.sequenceId.toString() === targetValue;
+                break;
+            case 'status':
+                filter = (trial): boolean => trial.info.status.toUpperCase().includes(targetValue.toUpperCase());
+                break;
+            case 'parameters':
+                // TODO: support filters like `x: 2` (instead of `"x": 2`)
+                filter = (trial): boolean => JSON.stringify(trial.info.hyperParameters, null, 4).includes(targetValue);
+                break;
+            default:
+                alert(`Unexpected search filter ${this.state.searchType}`);
+        }
+        this.setState({ searchFilter: filter });
+    };
 
-	handleTablePageSizeSelect = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
-		if (item !== undefined) {
-			this.setState({ tablePageSize: item.text === 'all' ? -1 : parseInt(item.text, 10) });
-		}
-	};
+    handleTablePageSizeSelect = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
+        if (item !== undefined) {
+            this.setState({ tablePageSize: item.text === 'all' ? -1 : parseInt(item.text, 10) });
+        }
+    };
 
-	handleWhichTabs = (item: any): void => {
-		this.setState({ whichChart: item.props.headerText });
-	};
+    handleWhichTabs = (item: any): void => {
+        this.setState({ whichChart: item.props.headerText });
+    };
 
-	updateSearchFilterType = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
-		// clear input value and re-render table
-		if (item !== undefined) {
-			if (this.searchInput !== null) {
-				this.searchInput.value = '';
-			}
-			this.setState(() => ({ searchType: item.key.toString() }));
-		}
-	};
+    updateSearchFilterType = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
+        // clear input value and re-render table
+        if (item !== undefined) {
+            if (this.searchInput !== null) {
+                this.searchInput.value = '';
+            }
+            this.setState(() => ({ searchType: item.key.toString() }));
+        }
+    };
 
-	render(): React.ReactNode {
-		const { tablePageSize, whichChart, searchType } = this.state;
-		const { columnList, changeColumn } = this.props;
-		const source = TRIALS.filter(this.state.searchFilter);
-		const trialIds = TRIALS.filter(this.state.searchFilter).map(trial => trial.id);
-		const searchOptions = [
-			{ key: 'id', text: 'Id' },
-			{ key: 'Trial No.', text: 'Trial No.' },
-			{ key: 'status', text: 'Status' },
-			{ key: 'parameters', text: 'Parameters' }
-		];
-		return (
-			<div>
-				<div className='trial' id='tabsty'>
-					<Pivot
-						defaultSelectedKey={'0'}
-						className='detial-title'
-						onLinkClick={this.handleWhichTabs}
-						selectedKey={whichChart}
-					>
-						{/* <PivotItem tab={this.titleOfacc} key="1"> doesn't work*/}
-						<PivotItem headerText='Default metric' itemIcon='HomeGroup' key='Default metric'>
-							<Stack className='graph'>
-								<DefaultPoint
-									trialIds={trialIds}
-									visible={whichChart === 'Default metric'}
-									trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
-								/>
-							</Stack>
-						</PivotItem>
-						{/* <PivotItem tab={this.titleOfhyper} key="2"> */}
-						<PivotItem headerText='Hyper-parameter' itemIcon='Equalizer' key='Hyper-parameter'>
-							<Stack className='graph'>
-								<Para trials={source} searchSpace={EXPERIMENT.searchSpaceNew} whichChart={whichChart} />
-							</Stack>
-						</PivotItem>
-						{/* <PivotItem tab={this.titleOfDuration} key="3"> */}
-						<PivotItem headerText='Duration' itemIcon='BarChartHorizontal' key='Duration'>
-							<Duration source={source} whichChart={whichChart} />
-						</PivotItem>
-						{/* <PivotItem tab={this.titleOfIntermediate} key="4"> */}
-						<PivotItem
-							headerText='Intermediate result'
-							itemIcon='StackedLineChart'
-							key='Intermediate result'
-						>
-							{/* *why this graph has small footprint? */}
-							<Intermediate source={source} whichChart={whichChart} />
-						</PivotItem>
-					</Pivot>
-				</div>
-				{/* trial table list */}
-				<div style={{ backgroundColor: '#fff' }}>
-					<Stack horizontal className='panelTitle' style={{ marginTop: 10 }}>
-						<span style={{ marginRight: 12 }}>{tableListIcon}</span>
-						<span>Trial jobs</span>
-					</Stack>
-					<Stack horizontal className='allList'>
-						<StackItem grow={50}>
-							<DefaultButton
-								text='Compare'
-								className='allList-compare'
-								// use child-component tableList's function, the function is in child-component.
-								onClick={(): void => {
-									if (this.tableList) {
-										this.tableList.compareBtn();
-									}
-								}}
-							/>
-						</StackItem>
-						<StackItem grow={50}>
-							<Stack horizontal horizontalAlign='end' className='allList'>
-								<DefaultButton
-									className='allList-button-gap'
-									text='Add column'
-									onClick={(): void => {
-										if (this.tableList) {
-											this.tableList.addColumn();
-										}
-									}}
-								/>
-								<Dropdown
-									selectedKey={searchType}
-									options={searchOptions}
-									onChange={this.updateSearchFilterType}
-									styles={{ root: { width: 150 } }}
-								/>
-								<input
-									type='text'
-									className='allList-search-input'
-									placeholder={`Search by ${this.state.searchType}`}
-									onChange={this.searchTrial}
-									style={{ width: 230 }}
-									ref={(text): any => (this.searchInput = text)}
-								/>
-							</Stack>
-						</StackItem>
-					</Stack>
-					<TableList
-						pageSize={tablePageSize}
-						tableSource={source.map(trial => trial.tableRecord)}
-						columnList={columnList}
-						changeColumn={changeColumn}
-						trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
-						// TODO: change any to specific type
-						ref={(tabList): any => (this.tableList = tabList)}
-					/>
-				</div>
-			</div>
-		);
-	}
+    render(): React.ReactNode {
+        const { tablePageSize, whichChart, searchType } = this.state;
+        const { columnList, changeColumn } = this.props;
+        const source = TRIALS.filter(this.state.searchFilter);
+        const trialIds = TRIALS.filter(this.state.searchFilter).map(trial => trial.id);
+        const searchOptions = [
+            { key: 'id', text: 'Id' },
+            { key: 'Trial No.', text: 'Trial No.' },
+            { key: 'status', text: 'Status' },
+            { key: 'parameters', text: 'Parameters' }
+        ];
+        return (
+            <div>
+                <div className='trial' id='tabsty'>
+                    <Pivot
+                        defaultSelectedKey={'0'}
+                        className='detial-title'
+                        onLinkClick={this.handleWhichTabs}
+                        selectedKey={whichChart}
+                    >
+                        {/* <PivotItem tab={this.titleOfacc} key="1"> doesn't work*/}
+                        <PivotItem headerText='Default metric' itemIcon='HomeGroup' key='Default metric'>
+                            <Stack className='graph'>
+                                <DefaultPoint
+                                    trialIds={trialIds}
+                                    visible={whichChart === 'Default metric'}
+                                    trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
+                                />
+                            </Stack>
+                        </PivotItem>
+                        {/* <PivotItem tab={this.titleOfhyper} key="2"> */}
+                        <PivotItem headerText='Hyper-parameter' itemIcon='Equalizer' key='Hyper-parameter'>
+                            <Stack className='graph'>
+                                <Para trials={source} searchSpace={EXPERIMENT.searchSpaceNew} whichChart={whichChart} />
+                            </Stack>
+                        </PivotItem>
+                        {/* <PivotItem tab={this.titleOfDuration} key="3"> */}
+                        <PivotItem headerText='Duration' itemIcon='BarChartHorizontal' key='Duration'>
+                            <Duration source={source} whichChart={whichChart} />
+                        </PivotItem>
+                        {/* <PivotItem tab={this.titleOfIntermediate} key="4"> */}
+                        <PivotItem
+                            headerText='Intermediate result'
+                            itemIcon='StackedLineChart'
+                            key='Intermediate result'
+                        >
+                            {/* *why this graph has small footprint? */}
+                            <Intermediate source={source} whichChart={whichChart} />
+                        </PivotItem>
+                    </Pivot>
+                </div>
+                {/* trial table list */}
+                <div style={{ backgroundColor: '#fff' }}>
+                    <Stack horizontal className='panelTitle' style={{ marginTop: 10 }}>
+                        <span style={{ marginRight: 12 }}>{tableListIcon}</span>
+                        <span>Trial jobs</span>
+                    </Stack>
+                    <Stack horizontal className='allList'>
+                        <StackItem grow={50}>
+                            <DefaultButton
+                                text='Compare'
+                                className='allList-compare'
+                                // use child-component tableList's function, the function is in child-component.
+                                onClick={(): void => {
+                                    if (this.tableList) {
+                                        this.tableList.compareBtn();
+                                    }
+                                }}
+                            />
+                        </StackItem>
+                        <StackItem grow={50}>
+                            <Stack horizontal horizontalAlign='end' className='allList'>
+                                <DefaultButton
+                                    className='allList-button-gap'
+                                    text='Add column'
+                                    onClick={(): void => {
+                                        if (this.tableList) {
+                                            this.tableList.addColumn();
+                                        }
+                                    }}
+                                />
+                                <Dropdown
+                                    selectedKey={searchType}
+                                    options={searchOptions}
+                                    onChange={this.updateSearchFilterType}
+                                    styles={{ root: { width: 150 } }}
+                                />
+                                <input
+                                    type='text'
+                                    className='allList-search-input'
+                                    placeholder={`Search by ${this.state.searchType}`}
+                                    onChange={this.searchTrial}
+                                    style={{ width: 230 }}
+                                    ref={(text): any => (this.searchInput = text)}
+                                />
+                            </Stack>
+                        </StackItem>
+                    </Stack>
+                    <TableList
+                        pageSize={tablePageSize}
+                        tableSource={source.map(trial => trial.tableRecord)}
+                        columnList={columnList}
+                        changeColumn={changeColumn}
+                        trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
+                        // TODO: change any to specific type
+                        ref={(tabList): any => (this.tableList = tabList)}
+                    />
+                </div>
+            </div>
+        );
+    }
 }
 
 export default TrialsDetail;
diff --git a/src/webui/src/components/overview/Accuracy.tsx b/src/webui/src/components/overview/Accuracy.tsx
index 9d4d310e0b..2f2fd9253b 100644
--- a/src/webui/src/components/overview/Accuracy.tsx
+++ b/src/webui/src/components/overview/Accuracy.tsx
@@ -2,39 +2,39 @@ import * as React from 'react';
 import ReactEcharts from 'echarts-for-react';
 import echarts from 'echarts/lib/echarts';
 echarts.registerTheme('my_theme', {
-	color: '#3c8dbc'
+    color: '#3c8dbc'
 });
 import 'echarts/lib/chart/scatter';
 import 'echarts/lib/component/tooltip';
 import 'echarts/lib/component/title';
 
 interface AccuracyProps {
-	accuracyData: object;
-	accNodata: string;
-	height: number;
+    accuracyData: object;
+    accNodata: string;
+    height: number;
 }
 
 class Accuracy extends React.Component<AccuracyProps, {}> {
-	constructor(props: AccuracyProps) {
-		super(props);
-	}
+    constructor(props: AccuracyProps) {
+        super(props);
+    }
 
-	render(): React.ReactNode {
-		const { accNodata, accuracyData, height } = this.props;
-		return (
-			<div>
-				<ReactEcharts
-					option={accuracyData}
-					style={{
-						height: height,
-						margin: '0 auto'
-					}}
-					theme='my_theme'
-				/>
-				<div className='showMess'>{accNodata}</div>
-			</div>
-		);
-	}
+    render(): React.ReactNode {
+        const { accNodata, accuracyData, height } = this.props;
+        return (
+            <div>
+                <ReactEcharts
+                    option={accuracyData}
+                    style={{
+                        height: height,
+                        margin: '0 auto'
+                    }}
+                    theme='my_theme'
+                />
+                <div className='showMess'>{accNodata}</div>
+            </div>
+        );
+    }
 }
 
 export default Accuracy;
diff --git a/src/webui/src/components/overview/BasicInfo.tsx b/src/webui/src/components/overview/BasicInfo.tsx
index 151d76fac0..c49ed1f1c7 100644
--- a/src/webui/src/components/overview/BasicInfo.tsx
+++ b/src/webui/src/components/overview/BasicInfo.tsx
@@ -4,59 +4,59 @@ import { EXPERIMENT } from '../../static/datamodel';
 import { formatTimestamp } from '../../static/function';
 
 interface BasicInfoProps {
-	experimentUpdateBroadcast: number;
+    experimentUpdateBroadcast: number;
 }
 
 class BasicInfo extends React.Component<BasicInfoProps, {}> {
-	// Use getId() to ensure that the ID is unique on the page.
-	// (It's also okay to use a plain string without getId() and manually ensure uniqueness.)
-	// for tooltip user the log directory
-	private _hostId: string = getId('tooltipHost');
-	constructor(props: BasicInfoProps) {
-		super(props);
-	}
+    // Use getId() to ensure that the ID is unique on the page.
+    // (It's also okay to use a plain string without getId() and manually ensure uniqueness.)
+    // for tooltip user the log directory
+    private _hostId: string = getId('tooltipHost');
+    constructor(props: BasicInfoProps) {
+        super(props);
+    }
 
-	render(): React.ReactNode {
-		return (
-			<Stack horizontal horizontalAlign='space-between' className='main'>
-				<Stack.Item grow={3} className='padItem basic'>
-					<p>Name</p>
-					<div>{EXPERIMENT.profile.params.experimentName}</div>
-				</Stack.Item>
-				<Stack.Item grow={3} className='padItem basic'>
-					<p>ID</p>
-					<div>{EXPERIMENT.profile.id}</div>
-				</Stack.Item>
-				<Stack.Item grow={3} className='padItem basic'>
-					<p>Start time</p>
-					<div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.startTime)}</div>
-				</Stack.Item>
-				<Stack.Item grow={3} className='padItem basic'>
-					<p>End time</p>
-					<div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.endTime)}</div>
-				</Stack.Item>
-				<Stack.Item className='padItem basic'>
-					<p>Log directory</p>
-					<div className='nowrap'>
-						<TooltipHost
-							// Tooltip message content
-							content={EXPERIMENT.profile.logDir || 'unknown'}
-							id={this._hostId}
-							calloutProps={{ gapSpace: 0 }}
-							styles={{ root: { display: 'inline-block' } }}
-						>
-							{/* show logDir */}
-							{EXPERIMENT.profile.logDir || 'unknown'}
-						</TooltipHost>
-					</div>
-				</Stack.Item>
-				<Stack.Item className='padItem basic'>
-					<p>Training platform</p>
-					<div className='nowrap'>{EXPERIMENT.profile.params.trainingServicePlatform}</div>
-				</Stack.Item>
-			</Stack>
-		);
-	}
+    render(): React.ReactNode {
+        return (
+            <Stack horizontal horizontalAlign='space-between' className='main'>
+                <Stack.Item grow={3} className='padItem basic'>
+                    <p>Name</p>
+                    <div>{EXPERIMENT.profile.params.experimentName}</div>
+                </Stack.Item>
+                <Stack.Item grow={3} className='padItem basic'>
+                    <p>ID</p>
+                    <div>{EXPERIMENT.profile.id}</div>
+                </Stack.Item>
+                <Stack.Item grow={3} className='padItem basic'>
+                    <p>Start time</p>
+                    <div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.startTime)}</div>
+                </Stack.Item>
+                <Stack.Item grow={3} className='padItem basic'>
+                    <p>End time</p>
+                    <div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.endTime)}</div>
+                </Stack.Item>
+                <Stack.Item className='padItem basic'>
+                    <p>Log directory</p>
+                    <div className='nowrap'>
+                        <TooltipHost
+                            // Tooltip message content
+                            content={EXPERIMENT.profile.logDir || 'unknown'}
+                            id={this._hostId}
+                            calloutProps={{ gapSpace: 0 }}
+                            styles={{ root: { display: 'inline-block' } }}
+                        >
+                            {/* show logDir */}
+                            {EXPERIMENT.profile.logDir || 'unknown'}
+                        </TooltipHost>
+                    </div>
+                </Stack.Item>
+                <Stack.Item className='padItem basic'>
+                    <p>Training platform</p>
+                    <div className='nowrap'>{EXPERIMENT.profile.params.trainingServicePlatform}</div>
+                </Stack.Item>
+            </Stack>
+        );
+    }
 }
 
 export default BasicInfo;
diff --git a/src/webui/src/components/overview/Details.tsx b/src/webui/src/components/overview/Details.tsx
index 1fb63acebc..f3c3430c9e 100644
--- a/src/webui/src/components/overview/Details.tsx
+++ b/src/webui/src/components/overview/Details.tsx
@@ -3,35 +3,35 @@ import { DetailsRow, IDetailsRowBaseProps } from 'office-ui-fabric-react';
 import OpenRow from '../public-child/OpenRow';
 
 interface DetailsProps {
-	detailsProps: IDetailsRowBaseProps;
+    detailsProps: IDetailsRowBaseProps;
 }
 
 interface DetailsState {
-	isExpand: boolean;
+    isExpand: boolean;
 }
 
 class Details extends React.Component<DetailsProps, DetailsState> {
-	constructor(props: DetailsProps) {
-		super(props);
-		this.state = { isExpand: false };
-	}
+    constructor(props: DetailsProps) {
+        super(props);
+        this.state = { isExpand: false };
+    }
 
-	render(): React.ReactNode {
-		const { detailsProps } = this.props;
-		const { isExpand } = this.state;
-		return (
-			<div>
-				<div
-					onClick={(): void => {
-						this.setState(() => ({ isExpand: !isExpand }));
-					}}
-				>
-					<DetailsRow {...detailsProps} />
-				</div>
-				{isExpand && <OpenRow trialId={detailsProps.item.id} />}
-			</div>
-		);
-	}
+    render(): React.ReactNode {
+        const { detailsProps } = this.props;
+        const { isExpand } = this.state;
+        return (
+            <div>
+                <div
+                    onClick={(): void => {
+                        this.setState(() => ({ isExpand: !isExpand }));
+                    }}
+                >
+                    <DetailsRow {...detailsProps} />
+                </div>
+                {isExpand && <OpenRow trialId={detailsProps.item.id} />}
+            </div>
+        );
+    }
 }
 
 export default Details;
diff --git a/src/webui/src/components/overview/NumInput.tsx b/src/webui/src/components/overview/NumInput.tsx
index ce33830ba0..9313f713f2 100644
--- a/src/webui/src/components/overview/NumInput.tsx
+++ b/src/webui/src/components/overview/NumInput.tsx
@@ -2,64 +2,64 @@ import * as React from 'react';
 import { Stack, PrimaryButton } from 'office-ui-fabric-react';
 
 interface ConcurrencyInputProps {
-	value: number;
-	updateValue: (val: string) => void;
+    value: number;
+    updateValue: (val: string) => void;
 }
 
 interface ConcurrencyInputStates {
-	editting: boolean;
+    editting: boolean;
 }
 
 class ConcurrencyInput extends React.Component<ConcurrencyInputProps, ConcurrencyInputStates> {
-	private input = React.createRef<HTMLInputElement>();
+    private input = React.createRef<HTMLInputElement>();
 
-	constructor(props: ConcurrencyInputProps) {
-		super(props);
-		this.state = { editting: false };
-	}
+    constructor(props: ConcurrencyInputProps) {
+        super(props);
+        this.state = { editting: false };
+    }
 
-	save = (): void => {
-		if (this.input.current !== null) {
-			this.props.updateValue(this.input.current.value);
-			this.setState({ editting: false });
-		}
-	};
+    save = (): void => {
+        if (this.input.current !== null) {
+            this.props.updateValue(this.input.current.value);
+            this.setState({ editting: false });
+        }
+    };
 
-	cancel = (): void => {
-		this.setState({ editting: false });
-	};
+    cancel = (): void => {
+        this.setState({ editting: false });
+    };
 
-	edit = (): void => {
-		this.setState({ editting: true });
-	};
+    edit = (): void => {
+        this.setState({ editting: true });
+    };
 
-	render(): React.ReactNode {
-		if (this.state.editting) {
-			return (
-				<Stack horizontal className='inputBox'>
-					<input
-						type='number'
-						className='concurrencyInput'
-						defaultValue={this.props.value.toString()}
-						ref={this.input}
-					/>
-					<PrimaryButton text='Save' onClick={this.save} />
-					<PrimaryButton
-						text='Cancel'
-						style={{ display: 'inline-block', marginLeft: 1 }}
-						onClick={this.cancel}
-					/>
-				</Stack>
-			);
-		} else {
-			return (
-				<Stack horizontal className='inputBox'>
-					<input type='number' className='concurrencyInput' disabled={true} value={this.props.value} />
-					<PrimaryButton text='Edit' onClick={this.edit} />
-				</Stack>
-			);
-		}
-	}
+    render(): React.ReactNode {
+        if (this.state.editting) {
+            return (
+                <Stack horizontal className='inputBox'>
+                    <input
+                        type='number'
+                        className='concurrencyInput'
+                        defaultValue={this.props.value.toString()}
+                        ref={this.input}
+                    />
+                    <PrimaryButton text='Save' onClick={this.save} />
+                    <PrimaryButton
+                        text='Cancel'
+                        style={{ display: 'inline-block', marginLeft: 1 }}
+                        onClick={this.cancel}
+                    />
+                </Stack>
+            );
+        } else {
+            return (
+                <Stack horizontal className='inputBox'>
+                    <input type='number' className='concurrencyInput' disabled={true} value={this.props.value} />
+                    <PrimaryButton text='Edit' onClick={this.edit} />
+                </Stack>
+            );
+        }
+    }
 }
 
 export default ConcurrencyInput;
diff --git a/src/webui/src/components/overview/Progress.tsx b/src/webui/src/components/overview/Progress.tsx
index b3509f2094..9b3d1cd184 100644
--- a/src/webui/src/components/overview/Progress.tsx
+++ b/src/webui/src/components/overview/Progress.tsx
@@ -1,15 +1,15 @@
 import * as React from 'react';
 import {
-	Stack,
-	Callout,
-	Link,
-	IconButton,
-	FontWeights,
-	mergeStyleSets,
-	getId,
-	getTheme,
-	StackItem,
-	TooltipHost
+    Stack,
+    Callout,
+    Link,
+    IconButton,
+    FontWeights,
+    mergeStyleSets,
+    getId,
+    getTheme,
+    StackItem,
+    TooltipHost
 } from 'office-ui-fabric-react';
 import axios from 'axios';
 import { MANAGER_IP, CONCURRENCYTOOLTIP } from '../../static/const';
@@ -23,293 +23,293 @@ import { infoIcon } from '../Buttons/Icon';
 import '../../static/style/progress.scss';
 import '../../static/style/probar.scss';
 interface ProgressProps {
-	concurrency: number;
-	bestAccuracy: number;
-	changeConcurrency: (val: number) => void;
-	experimentUpdateBroadcast: number;
+    concurrency: number;
+    bestAccuracy: number;
+    changeConcurrency: (val: number) => void;
+    experimentUpdateBroadcast: number;
 }
 
 interface ProgressState {
-	isShowLogDrawer: boolean;
-	isCalloutVisible?: boolean;
-	isShowSucceedInfo: boolean;
-	info: string;
-	typeInfo: string;
+    isShowLogDrawer: boolean;
+    isCalloutVisible?: boolean;
+    isShowSucceedInfo: boolean;
+    info: string;
+    typeInfo: string;
 }
 
 const itemStyles: React.CSSProperties = {
-	height: 50,
-	width: 100
+    height: 50,
+    width: 100
 };
 const theme = getTheme();
 const styles = mergeStyleSets({
-	buttonArea: {
-		verticalAlign: 'top',
-		display: 'inline-block',
-		textAlign: 'center',
-		// margin: '0 100px',
-		minWidth: 30,
-		height: 30
-	},
-	callout: {
-		maxWidth: 300
-	},
-	header: {
-		padding: '18px 24px 12px'
-	},
-	title: [
-		theme.fonts.xLarge,
-		{
-			margin: 0,
-			color: theme.palette.neutralPrimary,
-			fontWeight: FontWeights.semilight
-		}
-	],
-	inner: {
-		height: '100%',
-		padding: '0 24px 20px'
-	},
-	actions: {
-		position: 'relative',
-		marginTop: 20,
-		width: '100%',
-		whiteSpace: 'nowrap'
-	},
-	subtext: [
-		theme.fonts.small,
-		{
-			margin: 0,
-			color: theme.palette.neutralPrimary,
-			fontWeight: FontWeights.semilight
-		}
-	],
-	link: [
-		theme.fonts.medium,
-		{
-			color: theme.palette.neutralPrimary
-		}
-	]
+    buttonArea: {
+        verticalAlign: 'top',
+        display: 'inline-block',
+        textAlign: 'center',
+        // margin: '0 100px',
+        minWidth: 30,
+        height: 30
+    },
+    callout: {
+        maxWidth: 300
+    },
+    header: {
+        padding: '18px 24px 12px'
+    },
+    title: [
+        theme.fonts.xLarge,
+        {
+            margin: 0,
+            color: theme.palette.neutralPrimary,
+            fontWeight: FontWeights.semilight
+        }
+    ],
+    inner: {
+        height: '100%',
+        padding: '0 24px 20px'
+    },
+    actions: {
+        position: 'relative',
+        marginTop: 20,
+        width: '100%',
+        whiteSpace: 'nowrap'
+    },
+    subtext: [
+        theme.fonts.small,
+        {
+            margin: 0,
+            color: theme.palette.neutralPrimary,
+            fontWeight: FontWeights.semilight
+        }
+    ],
+    link: [
+        theme.fonts.medium,
+        {
+            color: theme.palette.neutralPrimary
+        }
+    ]
 });
 
 class Progressed extends React.Component<ProgressProps, ProgressState> {
-	private menuButtonElement!: HTMLDivElement | null;
-	private labelId: string = getId('callout-label');
-	private descriptionId: string = getId('callout-description');
-	constructor(props: ProgressProps) {
-		super(props);
-		this.state = {
-			isShowLogDrawer: false,
-			isCalloutVisible: false,
-			isShowSucceedInfo: false,
-			info: '',
-			typeInfo: 'success'
-		};
-	}
+    private menuButtonElement!: HTMLDivElement | null;
+    private labelId: string = getId('callout-label');
+    private descriptionId: string = getId('callout-description');
+    constructor(props: ProgressProps) {
+        super(props);
+        this.state = {
+            isShowLogDrawer: false,
+            isCalloutVisible: false,
+            isShowSucceedInfo: false,
+            info: '',
+            typeInfo: 'success'
+        };
+    }
 
-	hideSucceedInfo = (): void => {
-		this.setState(() => ({ isShowSucceedInfo: false }));
-	};
+    hideSucceedInfo = (): void => {
+        this.setState(() => ({ isShowSucceedInfo: false }));
+    };
 
-	/**
-	 * info: message content
-	 * typeInfo: message type: success | error...
-	 * continuousTime: show time, 2000ms
-	 */
-	showMessageInfo = (info: string, typeInfo: string): void => {
-		this.setState(() => ({
-			info,
-			typeInfo,
-			isShowSucceedInfo: true
-		}));
-		setTimeout(this.hideSucceedInfo, 2000);
-	};
+    /**
+     * info: message content
+     * typeInfo: message type: success | error...
+     * continuousTime: show time, 2000ms
+     */
+    showMessageInfo = (info: string, typeInfo: string): void => {
+        this.setState(() => ({
+            info,
+            typeInfo,
+            isShowSucceedInfo: true
+        }));
+        setTimeout(this.hideSucceedInfo, 2000);
+    };
 
-	editTrialConcurrency = async (userInput: string): Promise<void> => {
-		if (!userInput.match(/^[1-9]\d*$/)) {
-			this.showMessageInfo('Please enter a positive integer!', 'error');
-			return;
-		}
-		const newConcurrency = parseInt(userInput, 10);
-		if (newConcurrency === this.props.concurrency) {
-			this.showMessageInfo('Trial concurrency has not changed', 'error');
-			return;
-		}
+    editTrialConcurrency = async (userInput: string): Promise<void> => {
+        if (!userInput.match(/^[1-9]\d*$/)) {
+            this.showMessageInfo('Please enter a positive integer!', 'error');
+            return;
+        }
+        const newConcurrency = parseInt(userInput, 10);
+        if (newConcurrency === this.props.concurrency) {
+            this.showMessageInfo('Trial concurrency has not changed', 'error');
+            return;
+        }
 
-		const newProfile = Object.assign({}, EXPERIMENT.profile);
-		newProfile.params.trialConcurrency = newConcurrency;
+        const newProfile = Object.assign({}, EXPERIMENT.profile);
+        newProfile.params.trialConcurrency = newConcurrency;
 
-		// rest api, modify trial concurrency value
-		try {
-			const res = await axios.put(`${MANAGER_IP}/experiment`, newProfile, {
-				// eslint-disable-next-line @typescript-eslint/camelcase
-				params: { update_type: 'TRIAL_CONCURRENCY' }
-			});
-			if (res.status === 200) {
-				this.showMessageInfo('Successfully updated trial concurrency', 'success');
-				// NOTE: should we do this earlier in favor of poor networks?
-				this.props.changeConcurrency(newConcurrency);
-			}
-		} catch (error) {
-			if (error.response && error.response.data.error) {
-				this.showMessageInfo(`Failed to update trial concurrency\n${error.response.data.error}`, 'error');
-			} else if (error.response) {
-				this.showMessageInfo(
-					`Failed to update trial concurrency\nServer responsed ${error.response.status}`,
-					'error'
-				);
-			} else if (error.message) {
-				this.showMessageInfo(`Failed to update trial concurrency\n${error.message}`, 'error');
-			} else {
-				this.showMessageInfo(`Failed to update trial concurrency\nUnknown error`, 'error');
-			}
-		}
-	};
+        // rest api, modify trial concurrency value
+        try {
+            const res = await axios.put(`${MANAGER_IP}/experiment`, newProfile, {
+                // eslint-disable-next-line @typescript-eslint/camelcase
+                params: { update_type: 'TRIAL_CONCURRENCY' }
+            });
+            if (res.status === 200) {
+                this.showMessageInfo('Successfully updated trial concurrency', 'success');
+                // NOTE: should we do this earlier in favor of poor networks?
+                this.props.changeConcurrency(newConcurrency);
+            }
+        } catch (error) {
+            if (error.response && error.response.data.error) {
+                this.showMessageInfo(`Failed to update trial concurrency\n${error.response.data.error}`, 'error');
+            } else if (error.response) {
+                this.showMessageInfo(
+                    `Failed to update trial concurrency\nServer responsed ${error.response.status}`,
+                    'error'
+                );
+            } else if (error.message) {
+                this.showMessageInfo(`Failed to update trial concurrency\n${error.message}`, 'error');
+            } else {
+                this.showMessageInfo(`Failed to update trial concurrency\nUnknown error`, 'error');
+            }
+        }
+    };
 
-	isShowDrawer = (): void => {
-		this.setState({ isShowLogDrawer: true });
-	};
+    isShowDrawer = (): void => {
+        this.setState({ isShowLogDrawer: true });
+    };
 
-	closeDrawer = (): void => {
-		this.setState({ isShowLogDrawer: false });
-	};
+    closeDrawer = (): void => {
+        this.setState({ isShowLogDrawer: false });
+    };
 
-	onDismiss = (): void => {
-		this.setState({ isCalloutVisible: false });
-	};
+    onDismiss = (): void => {
+        this.setState({ isCalloutVisible: false });
+    };
 
-	onShow = (): void => {
-		this.setState({ isCalloutVisible: true });
-	};
+    onShow = (): void => {
+        this.setState({ isCalloutVisible: true });
+    };
 
-	render(): React.ReactNode {
-		const { bestAccuracy } = this.props;
-		const { isShowLogDrawer, isCalloutVisible, isShowSucceedInfo, info, typeInfo } = this.state;
+    render(): React.ReactNode {
+        const { bestAccuracy } = this.props;
+        const { isShowLogDrawer, isCalloutVisible, isShowSucceedInfo, info, typeInfo } = this.state;
 
-		const count = TRIALS.countStatus();
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		const stoppedCount = count.get('USER_CANCELED')! + count.get('SYS_CANCELED')! + count.get('EARLY_STOPPED')!;
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		const bar2 = count.get('RUNNING')! + count.get('SUCCEEDED')! + count.get('FAILED')! + stoppedCount;
-		// support type [0, 1], not 98%
-		const bar2Percent = bar2 / EXPERIMENT.profile.params.maxTrialNum;
-		const percent = EXPERIMENT.profile.execDuration / EXPERIMENT.profile.params.maxExecDuration;
-		const remaining = convertTime(EXPERIMENT.profile.params.maxExecDuration - EXPERIMENT.profile.execDuration);
-		const maxDuration = convertTime(EXPERIMENT.profile.params.maxExecDuration);
-		const maxTrialNum = EXPERIMENT.profile.params.maxTrialNum;
-		const execDuration = convertTime(EXPERIMENT.profile.execDuration);
+        const count = TRIALS.countStatus();
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const stoppedCount = count.get('USER_CANCELED')! + count.get('SYS_CANCELED')! + count.get('EARLY_STOPPED')!;
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const bar2 = count.get('RUNNING')! + count.get('SUCCEEDED')! + count.get('FAILED')! + stoppedCount;
+        // support type [0, 1], not 98%
+        const bar2Percent = bar2 / EXPERIMENT.profile.params.maxTrialNum;
+        const percent = EXPERIMENT.profile.execDuration / EXPERIMENT.profile.params.maxExecDuration;
+        const remaining = convertTime(EXPERIMENT.profile.params.maxExecDuration - EXPERIMENT.profile.execDuration);
+        const maxDuration = convertTime(EXPERIMENT.profile.params.maxExecDuration);
+        const maxTrialNum = EXPERIMENT.profile.params.maxTrialNum;
+        const execDuration = convertTime(EXPERIMENT.profile.execDuration);
 
-		return (
-			<Stack className='progress' id='barBack'>
-				<Stack className='basic lineBasic'>
-					<p>Status</p>
-					<Stack horizontal className='status'>
-						<span className={`${EXPERIMENT.status} status-text`}>{EXPERIMENT.status}</span>
-						{EXPERIMENT.status === 'ERROR' ? (
-							<div>
-								<div className={styles.buttonArea} ref={(val): any => (this.menuButtonElement = val)}>
-									<IconButton
-										iconProps={{ iconName: 'info' }}
-										onClick={isCalloutVisible ? this.onDismiss : this.onShow}
-									/>
-								</div>
-								{isCalloutVisible && (
-									<Callout
-										className={styles.callout}
-										ariaLabelledBy={this.labelId}
-										ariaDescribedBy={this.descriptionId}
-										role='alertdialog'
-										gapSpace={0}
-										target={this.menuButtonElement}
-										onDismiss={this.onDismiss}
-										setInitialFocus={true}
-									>
-										<div className={styles.header}>
-											<p className={styles.title} id={this.labelId}>
-												Error
-											</p>
-										</div>
-										<div className={styles.inner}>
-											<p className={styles.subtext} id={this.descriptionId}>
-												{EXPERIMENT.error}
-											</p>
-											<div className={styles.actions}>
-												<Link className={styles.link} onClick={this.isShowDrawer}>
-													Learn about
-												</Link>
-											</div>
-										</div>
-									</Callout>
-								)}
-							</div>
-						) : null}
-					</Stack>
-				</Stack>
-				<ProgressBar
-					who='Duration'
-					percent={percent}
-					description={execDuration}
-					bgclass={EXPERIMENT.status}
-					maxString={`Max duration: ${maxDuration}`}
-				/>
-				<ProgressBar
-					who='Trial numbers'
-					percent={bar2Percent}
-					description={bar2.toString()}
-					bgclass={EXPERIMENT.status}
-					maxString={`Max trial number: ${maxTrialNum}`}
-				/>
-				<Stack className='basic colorOfbasic mess' horizontal>
-					<StackItem grow={50}>
-						<p>Best metric</p>
-						<div>{isNaN(bestAccuracy) ? 'N/A' : bestAccuracy.toFixed(6)}</div>
-					</StackItem>
-					<StackItem>
-						{isShowSucceedInfo && <MessageInfo className='info' typeInfo={typeInfo} info={info} />}
-					</StackItem>
-				</Stack>
-				<Stack horizontal horizontalAlign='space-between' className='mess'>
-					<span style={itemStyles} className='basic colorOfbasic'>
-						<p>Spent</p>
-						<div>{execDuration}</div>
-					</span>
-					<span style={itemStyles} className='basic colorOfbasic'>
-						<p>Remaining</p>
-						<div className='time'>{remaining}</div>
-					</span>
-					<span style={itemStyles}>
-						{/* modify concurrency */}
-						<TooltipHost content={CONCURRENCYTOOLTIP}>
-							<p className='cursor'>
-								Concurrency<span className='progress-info'>{infoIcon}</span>
-							</p>
-						</TooltipHost>
-						<ConcurrencyInput value={this.props.concurrency} updateValue={this.editTrialConcurrency} />
-					</span>
-					<span style={itemStyles} className='basic colorOfbasic'></span>
-				</Stack>
-				<Stack horizontal horizontalAlign='space-between' className='mess'>
-					<div style={itemStyles} className='basic colorOfbasic'>
-						<p>Running</p>
-						<div>{count.get('RUNNING')}</div>
-					</div>
-					<div style={itemStyles} className='basic colorOfbasic'>
-						<p>Succeeded</p>
-						<div>{count.get('SUCCEEDED')}</div>
-					</div>
-					<div style={itemStyles} className='basic'>
-						<p>Stopped</p>
-						<div>{stoppedCount}</div>
-					</div>
-					<div style={itemStyles} className='basic'>
-						<p>Failed</p>
-						<div>{count.get('FAILED')}</div>
-					</div>
-				</Stack>
-				{/* learn about click -> default active key is dispatcher. */}
-				{isShowLogDrawer ? <LogDrawer closeDrawer={this.closeDrawer} activeTab='dispatcher' /> : null}
-			</Stack>
-		);
-	}
+        return (
+            <Stack className='progress' id='barBack'>
+                <Stack className='basic lineBasic'>
+                    <p>Status</p>
+                    <Stack horizontal className='status'>
+                        <span className={`${EXPERIMENT.status} status-text`}>{EXPERIMENT.status}</span>
+                        {EXPERIMENT.status === 'ERROR' ? (
+                            <div>
+                                <div className={styles.buttonArea} ref={(val): any => (this.menuButtonElement = val)}>
+                                    <IconButton
+                                        iconProps={{ iconName: 'info' }}
+                                        onClick={isCalloutVisible ? this.onDismiss : this.onShow}
+                                    />
+                                </div>
+                                {isCalloutVisible && (
+                                    <Callout
+                                        className={styles.callout}
+                                        ariaLabelledBy={this.labelId}
+                                        ariaDescribedBy={this.descriptionId}
+                                        role='alertdialog'
+                                        gapSpace={0}
+                                        target={this.menuButtonElement}
+                                        onDismiss={this.onDismiss}
+                                        setInitialFocus={true}
+                                    >
+                                        <div className={styles.header}>
+                                            <p className={styles.title} id={this.labelId}>
+                                                Error
+                                            </p>
+                                        </div>
+                                        <div className={styles.inner}>
+                                            <p className={styles.subtext} id={this.descriptionId}>
+                                                {EXPERIMENT.error}
+                                            </p>
+                                            <div className={styles.actions}>
+                                                <Link className={styles.link} onClick={this.isShowDrawer}>
+                                                    Learn about
+                                                </Link>
+                                            </div>
+                                        </div>
+                                    </Callout>
+                                )}
+                            </div>
+                        ) : null}
+                    </Stack>
+                </Stack>
+                <ProgressBar
+                    who='Duration'
+                    percent={percent}
+                    description={execDuration}
+                    bgclass={EXPERIMENT.status}
+                    maxString={`Max duration: ${maxDuration}`}
+                />
+                <ProgressBar
+                    who='Trial numbers'
+                    percent={bar2Percent}
+                    description={bar2.toString()}
+                    bgclass={EXPERIMENT.status}
+                    maxString={`Max trial number: ${maxTrialNum}`}
+                />
+                <Stack className='basic colorOfbasic mess' horizontal>
+                    <StackItem grow={50}>
+                        <p>Best metric</p>
+                        <div>{isNaN(bestAccuracy) ? 'N/A' : bestAccuracy.toFixed(6)}</div>
+                    </StackItem>
+                    <StackItem>
+                        {isShowSucceedInfo && <MessageInfo className='info' typeInfo={typeInfo} info={info} />}
+                    </StackItem>
+                </Stack>
+                <Stack horizontal horizontalAlign='space-between' className='mess'>
+                    <span style={itemStyles} className='basic colorOfbasic'>
+                        <p>Spent</p>
+                        <div>{execDuration}</div>
+                    </span>
+                    <span style={itemStyles} className='basic colorOfbasic'>
+                        <p>Remaining</p>
+                        <div className='time'>{remaining}</div>
+                    </span>
+                    <span style={itemStyles}>
+                        {/* modify concurrency */}
+                        <TooltipHost content={CONCURRENCYTOOLTIP}>
+                            <p className='cursor'>
+                                Concurrency<span className='progress-info'>{infoIcon}</span>
+                            </p>
+                        </TooltipHost>
+                        <ConcurrencyInput value={this.props.concurrency} updateValue={this.editTrialConcurrency} />
+                    </span>
+                    <span style={itemStyles} className='basic colorOfbasic'></span>
+                </Stack>
+                <Stack horizontal horizontalAlign='space-between' className='mess'>
+                    <div style={itemStyles} className='basic colorOfbasic'>
+                        <p>Running</p>
+                        <div>{count.get('RUNNING')}</div>
+                    </div>
+                    <div style={itemStyles} className='basic colorOfbasic'>
+                        <p>Succeeded</p>
+                        <div>{count.get('SUCCEEDED')}</div>
+                    </div>
+                    <div style={itemStyles} className='basic'>
+                        <p>Stopped</p>
+                        <div>{stoppedCount}</div>
+                    </div>
+                    <div style={itemStyles} className='basic'>
+                        <p>Failed</p>
+                        <div>{count.get('FAILED')}</div>
+                    </div>
+                </Stack>
+                {/* learn about click -> default active key is dispatcher. */}
+                {isShowLogDrawer ? <LogDrawer closeDrawer={this.closeDrawer} activeTab='dispatcher' /> : null}
+            </Stack>
+        );
+    }
 }
 
 export default Progressed;
diff --git a/src/webui/src/components/overview/ProgressItem.tsx b/src/webui/src/components/overview/ProgressItem.tsx
index 2decbbd659..b75361f126 100644
--- a/src/webui/src/components/overview/ProgressItem.tsx
+++ b/src/webui/src/components/overview/ProgressItem.tsx
@@ -2,41 +2,41 @@ import * as React from 'react';
 import { Stack, StackItem, ProgressIndicator } from 'office-ui-fabric-react';
 
 interface ProItemProps {
-	who: string;
-	percent: number;
-	description: string;
-	maxString: string;
-	bgclass: string;
+    who: string;
+    percent: number;
+    description: string;
+    maxString: string;
+    bgclass: string;
 }
 
 class ProgressBar extends React.Component<ProItemProps, {}> {
-	constructor(props: ProItemProps) {
-		super(props);
-	}
+    constructor(props: ProItemProps) {
+        super(props);
+    }
 
-	render(): React.ReactNode {
-		const { who, percent, description, maxString, bgclass } = this.props;
-		return (
-			<div>
-				<Stack horizontal className={`probar ${bgclass}`}>
-					<div className='name'>{who}</div>
-					<div className='showProgress' style={{ width: '78%' }}>
-						<ProgressIndicator barHeight={30} percentComplete={percent} />
-						<Stack horizontal className='boundary'>
-							<StackItem grow={30}>0</StackItem>
-							<StackItem className='right' grow={70}>
-								{maxString}
-							</StackItem>
-						</Stack>
-					</div>
-					<div className='description' style={{ width: '22%' }}>
-						{description}
-					</div>
-				</Stack>
-				<br />
-			</div>
-		);
-	}
+    render(): React.ReactNode {
+        const { who, percent, description, maxString, bgclass } = this.props;
+        return (
+            <div>
+                <Stack horizontal className={`probar ${bgclass}`}>
+                    <div className='name'>{who}</div>
+                    <div className='showProgress' style={{ width: '78%' }}>
+                        <ProgressIndicator barHeight={30} percentComplete={percent} />
+                        <Stack horizontal className='boundary'>
+                            <StackItem grow={30}>0</StackItem>
+                            <StackItem className='right' grow={70}>
+                                {maxString}
+                            </StackItem>
+                        </Stack>
+                    </div>
+                    <div className='description' style={{ width: '22%' }}>
+                        {description}
+                    </div>
+                </Stack>
+                <br />
+            </div>
+        );
+    }
 }
 
 export default ProgressBar;
diff --git a/src/webui/src/components/overview/SearchSpace.tsx b/src/webui/src/components/overview/SearchSpace.tsx
index 9e853b7cee..9532f8b812 100644
--- a/src/webui/src/components/overview/SearchSpace.tsx
+++ b/src/webui/src/components/overview/SearchSpace.tsx
@@ -3,28 +3,28 @@ import MonacoEditor from 'react-monaco-editor';
 import { MONACO } from '../../static/const';
 
 interface SearchspaceProps {
-	searchSpace: object;
+    searchSpace: object;
 }
 
 class SearchSpace extends React.Component<SearchspaceProps, {}> {
-	constructor(props: SearchspaceProps) {
-		super(props);
-	}
+    constructor(props: SearchspaceProps) {
+        super(props);
+    }
 
-	render(): React.ReactNode {
-		const { searchSpace } = this.props;
-		return (
-			<div className='searchSpace'>
-				<MonacoEditor
-					height='361'
-					language='json'
-					theme='vs-light'
-					value={JSON.stringify(searchSpace, null, 2)}
-					options={MONACO}
-				/>
-			</div>
-		);
-	}
+    render(): React.ReactNode {
+        const { searchSpace } = this.props;
+        return (
+            <div className='searchSpace'>
+                <MonacoEditor
+                    height='361'
+                    language='json'
+                    theme='vs-light'
+                    value={JSON.stringify(searchSpace, null, 2)}
+                    options={MONACO}
+                />
+            </div>
+        );
+    }
 }
 
 export default SearchSpace;
diff --git a/src/webui/src/components/overview/SuccessTable.tsx b/src/webui/src/components/overview/SuccessTable.tsx
index eae2cdb892..e9e6192fab 100644
--- a/src/webui/src/components/overview/SuccessTable.tsx
+++ b/src/webui/src/components/overview/SuccessTable.tsx
@@ -9,151 +9,151 @@ import '../../static/style/succTable.scss';
 import '../../static/style/openRow.scss';
 
 interface SuccessTableProps {
-	trialIds: string[];
+    trialIds: string[];
 }
 
 interface SuccessTableState {
-	columns: IColumn[];
-	source: Array<any>;
+    columns: IColumn[];
+    source: Array<any>;
 }
 
 class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> {
-	constructor(props: SuccessTableProps) {
-		super(props);
-		this.state = { columns: this.columns, source: TRIALS.table(this.props.trialIds) };
-	}
+    constructor(props: SuccessTableProps) {
+        super(props);
+        this.state = { columns: this.columns, source: TRIALS.table(this.props.trialIds) };
+    }
 
-	private onRenderRow: IDetailsListProps['onRenderRow'] = props => {
-		if (props) {
-			return <Details detailsProps={props} />;
-		}
-		return null;
-	};
+    private onRenderRow: IDetailsListProps['onRenderRow'] = props => {
+        if (props) {
+            return <Details detailsProps={props} />;
+        }
+        return null;
+    };
 
-	onColumnClick = (ev: React.MouseEvent<HTMLElement>, getColumn: IColumn): void => {
-		const { columns, source } = this.state;
-		const newColumns: IColumn[] = columns.slice();
-		const currColumn: IColumn = newColumns.filter(item => getColumn.key === item.key)[0];
-		newColumns.forEach((newCol: IColumn) => {
-			if (newCol === currColumn) {
-				currColumn.isSortedDescending = !currColumn.isSortedDescending;
-				currColumn.isSorted = true;
-			} else {
-				newCol.isSorted = false;
-				newCol.isSortedDescending = true;
-			}
-		});
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		const newItems = this.copyAndSort(source, currColumn.fieldName!, currColumn.isSortedDescending);
-		this.setState({
-			columns: newColumns,
-			source: newItems
-		});
-	};
+    onColumnClick = (ev: React.MouseEvent<HTMLElement>, getColumn: IColumn): void => {
+        const { columns, source } = this.state;
+        const newColumns: IColumn[] = columns.slice();
+        const currColumn: IColumn = newColumns.filter(item => getColumn.key === item.key)[0];
+        newColumns.forEach((newCol: IColumn) => {
+            if (newCol === currColumn) {
+                currColumn.isSortedDescending = !currColumn.isSortedDescending;
+                currColumn.isSorted = true;
+            } else {
+                newCol.isSorted = false;
+                newCol.isSortedDescending = true;
+            }
+        });
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const newItems = this.copyAndSort(source, currColumn.fieldName!, currColumn.isSortedDescending);
+        this.setState({
+            columns: newColumns,
+            source: newItems
+        });
+    };
 
-	private copyAndSort<T>(items: T[], columnKey: string, isSortedDescending?: boolean): T[] {
-		const key = columnKey as keyof T;
-		return items.slice(0).sort((a: T, b: T) => ((isSortedDescending ? a[key] < b[key] : a[key] > b[key]) ? 1 : -1));
-	}
+    private copyAndSort<T>(items: T[], columnKey: string, isSortedDescending?: boolean): T[] {
+        const key = columnKey as keyof T;
+        return items.slice(0).sort((a: T, b: T) => ((isSortedDescending ? a[key] < b[key] : a[key] > b[key]) ? 1 : -1));
+    }
 
-	tooltipStr = (
-		<div>
-			<p>The experiment is running, please wait for the final metric patiently.</p>
-			<div className='link'>
-				You could also find status of trial job with <span>{DETAILTABS}</span> button.
-			</div>
-		</div>
-	);
+    tooltipStr = (
+        <div>
+            <p>The experiment is running, please wait for the final metric patiently.</p>
+            <div className='link'>
+                You could also find status of trial job with <span>{DETAILTABS}</span> button.
+            </div>
+        </div>
+    );
 
-	columns = [
-		{
-			name: 'Trial No.',
-			key: 'sequenceId',
-			fieldName: 'sequenceId', // required!
-			minWidth: 60,
-			maxWidth: 120,
-			isResizable: true,
-			data: 'number',
-			onColumnClick: this.onColumnClick
-		},
-		{
-			name: 'ID',
-			key: 'id',
-			fieldName: 'id',
-			minWidth: 80,
-			maxWidth: 100,
-			isResizable: true,
-			className: 'tableHead leftTitle',
-			data: 'string',
-			onColumnClick: this.onColumnClick
-		},
-		{
-			name: 'Duration',
-			key: 'duration',
-			minWidth: 100,
-			maxWidth: 210,
-			isResizable: true,
-			fieldName: 'duration',
-			data: 'number',
-			onColumnClick: this.onColumnClick,
-			onRender: (item: any): React.ReactNode => (
-				<div className='durationsty'>
-					<div>{convertDuration(item.duration)}</div>
-				</div>
-			)
-		},
-		{
-			name: 'Status',
-			key: 'status',
-			minWidth: 140,
-			maxWidth: 210,
-			isResizable: true,
-			fieldName: 'status',
-			onRender: (item: any): React.ReactNode => {
-				return <div className={`${item.status} commonStyle`}>{item.status}</div>;
-			}
-		},
-		{
-			name: 'Default metric',
-			key: 'accuracy',
-			fieldName: 'accuracy',
-			minWidth: 120,
-			maxWidth: 360,
-			isResizable: true,
-			data: 'number',
-			onColumnClick: this.onColumnClick,
-			onRender: (item: any): React.ReactNode => {
-				return <DefaultMetric trialId={item.id} />;
-			}
-		}
-	];
+    columns = [
+        {
+            name: 'Trial No.',
+            key: 'sequenceId',
+            fieldName: 'sequenceId', // required!
+            minWidth: 60,
+            maxWidth: 120,
+            isResizable: true,
+            data: 'number',
+            onColumnClick: this.onColumnClick
+        },
+        {
+            name: 'ID',
+            key: 'id',
+            fieldName: 'id',
+            minWidth: 80,
+            maxWidth: 100,
+            isResizable: true,
+            className: 'tableHead leftTitle',
+            data: 'string',
+            onColumnClick: this.onColumnClick
+        },
+        {
+            name: 'Duration',
+            key: 'duration',
+            minWidth: 100,
+            maxWidth: 210,
+            isResizable: true,
+            fieldName: 'duration',
+            data: 'number',
+            onColumnClick: this.onColumnClick,
+            onRender: (item: any): React.ReactNode => (
+                <div className='durationsty'>
+                    <div>{convertDuration(item.duration)}</div>
+                </div>
+            )
+        },
+        {
+            name: 'Status',
+            key: 'status',
+            minWidth: 140,
+            maxWidth: 210,
+            isResizable: true,
+            fieldName: 'status',
+            onRender: (item: any): React.ReactNode => {
+                return <div className={`${item.status} commonStyle`}>{item.status}</div>;
+            }
+        },
+        {
+            name: 'Default metric',
+            key: 'accuracy',
+            fieldName: 'accuracy',
+            minWidth: 120,
+            maxWidth: 360,
+            isResizable: true,
+            data: 'number',
+            onColumnClick: this.onColumnClick,
+            onRender: (item: any): React.ReactNode => {
+                return <DefaultMetric trialId={item.id} />;
+            }
+        }
+    ];
 
-	componentDidUpdate(prevProps: SuccessTableProps): void {
-		if (this.props.trialIds !== prevProps.trialIds) {
-			const { trialIds } = this.props;
-			this.setState(() => ({ source: TRIALS.table(trialIds) }));
-		}
-	}
+    componentDidUpdate(prevProps: SuccessTableProps): void {
+        if (this.props.trialIds !== prevProps.trialIds) {
+            const { trialIds } = this.props;
+            this.setState(() => ({ source: TRIALS.table(trialIds) }));
+        }
+    }
 
-	render(): React.ReactNode {
-		const { columns, source } = this.state;
-		const isNoneData = source.length === 0 ? true : false;
+    render(): React.ReactNode {
+        const { columns, source } = this.state;
+        const isNoneData = source.length === 0 ? true : false;
 
-		return (
-			<div id='succTable'>
-				<DetailsList
-					columns={columns}
-					items={source}
-					setKey='set'
-					compact={true}
-					onRenderRow={this.onRenderRow}
-					selectionMode={0} // close selector function
-					className='succTable'
-				/>
-				{isNoneData && <div className='succTable-tooltip'>{this.tooltipStr}</div>}
-			</div>
-		);
-	}
+        return (
+            <div id='succTable'>
+                <DetailsList
+                    columns={columns}
+                    items={source}
+                    setKey='set'
+                    compact={true}
+                    onRenderRow={this.onRenderRow}
+                    selectionMode={0} // close selector function
+                    className='succTable'
+                />
+                {isNoneData && <div className='succTable-tooltip'>{this.tooltipStr}</div>}
+            </div>
+        );
+    }
 }
 
 export default SuccessTable;
diff --git a/src/webui/src/components/overview/Title1.tsx b/src/webui/src/components/overview/Title1.tsx
index f762a0b4c2..d86390e493 100644
--- a/src/webui/src/components/overview/Title1.tsx
+++ b/src/webui/src/components/overview/Title1.tsx
@@ -2,25 +2,25 @@ import * as React from 'react';
 import { Stack } from 'office-ui-fabric-react';
 import '../../static/style/overviewTitle.scss';
 interface Title1Props {
-	text: string;
-	icon?: string;
-	fontColor?: string;
+    text: string;
+    icon?: string;
+    fontColor?: string;
 }
 
 class Title1 extends React.Component<Title1Props, {}> {
-	constructor(props: Title1Props) {
-		super(props);
-	}
+    constructor(props: Title1Props) {
+        super(props);
+    }
 
-	render(): React.ReactNode {
-		const { text, icon, fontColor } = this.props;
-		return (
-			<Stack horizontal className='panelTitle'>
-				<img src={require(`../../static/img/icon/${icon}`)} alt='icon' />
-				<span style={{ color: fontColor }}>{text}</span>
-			</Stack>
-		);
-	}
+    render(): React.ReactNode {
+        const { text, icon, fontColor } = this.props;
+        return (
+            <Stack horizontal className='panelTitle'>
+                <img src={require(`../../static/img/icon/${icon}`)} alt='icon' />
+                <span style={{ color: fontColor }}>{text}</span>
+            </Stack>
+        );
+    }
 }
 
 export default Title1;
diff --git a/src/webui/src/components/overview/TrialProfile.tsx b/src/webui/src/components/overview/TrialProfile.tsx
index bc1eb05a01..6c49ad4907 100644
--- a/src/webui/src/components/overview/TrialProfile.tsx
+++ b/src/webui/src/components/overview/TrialProfile.tsx
@@ -4,46 +4,46 @@ import { MONACO } from '../../static/const';
 import { EXPERIMENT } from '../../static/datamodel';
 
 interface TrialInfoProps {
-	experimentUpdateBroadcast: number;
-	concurrency: number;
+    experimentUpdateBroadcast: number;
+    concurrency: number;
 }
 
 class TrialInfo extends React.Component<TrialInfoProps, {}> {
-	constructor(props: TrialInfoProps) {
-		super(props);
-	}
+    constructor(props: TrialInfoProps) {
+        super(props);
+    }
 
-	render(): React.ReactNode {
-		const blacklist = [
-			'id',
-			'logDir',
-			'startTime',
-			'endTime',
-			'experimentName',
-			'searchSpace',
-			'trainingServicePlatform'
-		];
-		const filter = (key: string, val: any): any => {
-			if (key === 'trialConcurrency') {
-				return this.props.concurrency;
-			}
-			return blacklist.includes(key) ? undefined : val;
-		};
-		const profile = JSON.stringify(EXPERIMENT.profile, filter, 2);
+    render(): React.ReactNode {
+        const blacklist = [
+            'id',
+            'logDir',
+            'startTime',
+            'endTime',
+            'experimentName',
+            'searchSpace',
+            'trainingServicePlatform'
+        ];
+        const filter = (key: string, val: any): any => {
+            if (key === 'trialConcurrency') {
+                return this.props.concurrency;
+            }
+            return blacklist.includes(key) ? undefined : val;
+        };
+        const profile = JSON.stringify(EXPERIMENT.profile, filter, 2);
 
-		return (
-			<div className='profile'>
-				<MonacoEditor
-					width='100%'
-					height='361'
-					language='json'
-					theme='vs-light'
-					value={profile}
-					options={MONACO}
-				/>
-			</div>
-		);
-	}
+        return (
+            <div className='profile'>
+                <MonacoEditor
+                    width='100%'
+                    height='361'
+                    language='json'
+                    theme='vs-light'
+                    value={profile}
+                    options={MONACO}
+                />
+            </div>
+        );
+    }
 }
 
 export default TrialInfo;
diff --git a/src/webui/src/components/public-child/DefaultMetric.tsx b/src/webui/src/components/public-child/DefaultMetric.tsx
index 2012b86c2b..388a7f1d18 100644
--- a/src/webui/src/components/public-child/DefaultMetric.tsx
+++ b/src/webui/src/components/public-child/DefaultMetric.tsx
@@ -3,18 +3,18 @@ import { TRIALS } from '../../static/datamodel';
 import { formatAccuracy } from '../../static/function';
 
 interface DefaultMetricProps {
-	trialId: string;
+    trialId: string;
 }
 
 class DefaultMetric extends React.Component<DefaultMetricProps, {}> {
-	constructor(props: DefaultMetricProps) {
-		super(props);
-	}
+    constructor(props: DefaultMetricProps) {
+        super(props);
+    }
 
-	render(): React.ReactNode {
-		const accuracy = TRIALS.getTrial(this.props.trialId).accuracy;
-		return <div>{accuracy !== undefined ? formatAccuracy(accuracy) : '--'}</div>;
-	}
+    render(): React.ReactNode {
+        const accuracy = TRIALS.getTrial(this.props.trialId).accuracy;
+        return <div>{accuracy !== undefined ? formatAccuracy(accuracy) : '--'}</div>;
+    }
 }
 
 export default DefaultMetric;
diff --git a/src/webui/src/components/public-child/IntermediateVal.tsx b/src/webui/src/components/public-child/IntermediateVal.tsx
index cbbb2d5422..1d41b1b41d 100644
--- a/src/webui/src/components/public-child/IntermediateVal.tsx
+++ b/src/webui/src/components/public-child/IntermediateVal.tsx
@@ -2,17 +2,17 @@ import * as React from 'react';
 import { TRIALS } from '../../static/datamodel';
 
 interface IntermediateValProps {
-	trialId: string;
+    trialId: string;
 }
 
 class IntermediateVal extends React.Component<IntermediateValProps, {}> {
-	constructor(props: IntermediateValProps) {
-		super(props);
-	}
+    constructor(props: IntermediateValProps) {
+        super(props);
+    }
 
-	render(): React.ReactNode {
-		return <div>{TRIALS.getTrial(this.props.trialId).formatLatestAccuracy()}</div>;
-	}
+    render(): React.ReactNode {
+        return <div>{TRIALS.getTrial(this.props.trialId).formatLatestAccuracy()}</div>;
+    }
 }
 
 export default IntermediateVal;
diff --git a/src/webui/src/components/public-child/LogPathChild.tsx b/src/webui/src/components/public-child/LogPathChild.tsx
index 62b0cbda0e..a73fabc6de 100644
--- a/src/webui/src/components/public-child/LogPathChild.tsx
+++ b/src/webui/src/components/public-child/LogPathChild.tsx
@@ -1,32 +1,32 @@
 import * as React from 'react';
 
 interface LogpathChildProps {
-	eachLogpath: string;
-	logName: string;
+    eachLogpath: string;
+    logName: string;
 }
 
 class LogPathChild extends React.Component<LogpathChildProps, {}> {
-	constructor(props: LogpathChildProps) {
-		super(props);
-	}
+    constructor(props: LogpathChildProps) {
+        super(props);
+    }
 
-	render(): React.ReactNode {
-		const { eachLogpath, logName } = this.props;
-		const isLink = /^http/gi.test(eachLogpath);
+    render(): React.ReactNode {
+        const { eachLogpath, logName } = this.props;
+        const isLink = /^http/gi.test(eachLogpath);
 
-		return (
-			<div className='logpath'>
-				<span className='logName'>{logName}</span>
-				{isLink ? (
-					<a className='logContent logHref' rel='noopener noreferrer' href={eachLogpath} target='_blank'>
-						{eachLogpath}
-					</a>
-				) : (
-					<span className='logContent'>{eachLogpath}</span>
-				)}
-			</div>
-		);
-	}
+        return (
+            <div className='logpath'>
+                <span className='logName'>{logName}</span>
+                {isLink ? (
+                    <a className='logContent logHref' rel='noopener noreferrer' href={eachLogpath} target='_blank'>
+                        {eachLogpath}
+                    </a>
+                ) : (
+                    <span className='logContent'>{eachLogpath}</span>
+                )}
+            </div>
+        );
+    }
 }
 
 export default LogPathChild;
diff --git a/src/webui/src/components/public-child/MonacoEditor.tsx b/src/webui/src/components/public-child/MonacoEditor.tsx
index 31d2311193..8f0f82bcfc 100644
--- a/src/webui/src/components/public-child/MonacoEditor.tsx
+++ b/src/webui/src/components/public-child/MonacoEditor.tsx
@@ -4,51 +4,51 @@ import { DRAWEROPTION } from '../../static/const';
 import MonacoEditor from 'react-monaco-editor';
 
 interface MonacoEditorProps {
-	content: string;
-	loading: boolean;
-	height: number;
+    content: string;
+    loading: boolean;
+    height: number;
 }
 
 class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
-	public _isMonacoMount!: boolean;
+    public _isMonacoMount!: boolean;
 
-	constructor(props: MonacoEditorProps) {
-		super(props);
-	}
+    constructor(props: MonacoEditorProps) {
+        super(props);
+    }
 
-	componentDidMount(): void {
-		this._isMonacoMount = true;
-	}
+    componentDidMount(): void {
+        this._isMonacoMount = true;
+    }
 
-	componentWillUnmount(): void {
-		this._isMonacoMount = false;
-	}
+    componentWillUnmount(): void {
+        this._isMonacoMount = false;
+    }
 
-	render(): React.ReactNode {
-		const { content, loading, height } = this.props;
-		return (
-			<div className='just-for-log'>
-				{loading ? (
-					<Spinner
-						label='Wait, wait...'
-						ariaLive='assertive'
-						labelPosition='right'
-						styles={{ root: { width: '100%', height: height } }}
-					>
-						<MonacoEditor
-							width='100%'
-							height={height}
-							language='json'
-							value={content}
-							options={DRAWEROPTION}
-						/>
-					</Spinner>
-				) : (
-					<MonacoEditor width='100%' height={height} language='json' value={content} options={DRAWEROPTION} />
-				)}
-			</div>
-		);
-	}
+    render(): React.ReactNode {
+        const { content, loading, height } = this.props;
+        return (
+            <div className='just-for-log'>
+                {loading ? (
+                    <Spinner
+                        label='Wait, wait...'
+                        ariaLive='assertive'
+                        labelPosition='right'
+                        styles={{ root: { width: '100%', height: height } }}
+                    >
+                        <MonacoEditor
+                            width='100%'
+                            height={height}
+                            language='json'
+                            value={content}
+                            options={DRAWEROPTION}
+                        />
+                    </Spinner>
+                ) : (
+                    <MonacoEditor width='100%' height={height} language='json' value={content} options={DRAWEROPTION} />
+                )}
+            </div>
+        );
+    }
 }
 
 export default MonacoHTML;
diff --git a/src/webui/src/components/public-child/OpenRow.tsx b/src/webui/src/components/public-child/OpenRow.tsx
index 86cd90dd5d..d1e6d11667 100644
--- a/src/webui/src/components/public-child/OpenRow.tsx
+++ b/src/webui/src/components/public-child/OpenRow.tsx
@@ -11,103 +11,103 @@ import '../../static/style/overview.scss';
 import '../../static/style/copyParameter.scss';
 
 interface OpenRowProps {
-	trialId: string;
+    trialId: string;
 }
 
 interface OpenRowState {
-	typeInfo: string;
-	info: string;
-	isHidenInfo: boolean;
+    typeInfo: string;
+    info: string;
+    isHidenInfo: boolean;
 }
 
 class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
-	constructor(props: OpenRowProps) {
-		super(props);
-		this.state = {
-			typeInfo: '',
-			info: '',
-			isHidenInfo: true
-		};
-	}
+    constructor(props: OpenRowProps) {
+        super(props);
+        this.state = {
+            typeInfo: '',
+            info: '',
+            isHidenInfo: true
+        };
+    }
 
-	hideMessageInfo = (): void => {
-		this.setState(() => ({ isHidenInfo: true }));
-	};
+    hideMessageInfo = (): void => {
+        this.setState(() => ({ isHidenInfo: true }));
+    };
 
-	/**
-	 * info: message content
-	 * typeInfo: message type: success | error...
-	 * continuousTime: show time, 2000ms
-	 */
-	getCopyStatus = (info: string, typeInfo: string): void => {
-		this.setState(() => ({ info, typeInfo, isHidenInfo: false }));
-		setTimeout(this.hideMessageInfo, 2000);
-	};
+    /**
+     * info: message content
+     * typeInfo: message type: success | error...
+     * continuousTime: show time, 2000ms
+     */
+    getCopyStatus = (info: string, typeInfo: string): void => {
+        this.setState(() => ({ info, typeInfo, isHidenInfo: false }));
+        setTimeout(this.hideMessageInfo, 2000);
+    };
 
-	copyParams = (trial: Trial): void => {
-		// get copy parameters
-		const params = JSON.stringify(trial.description.parameters, null, 4);
-		if (copy.default(params)) {
-			this.getCopyStatus('Success copy parameters to clipboard in form of python dict !', 'success');
-		} else {
-			this.getCopyStatus('Failed !', 'error');
-		}
-	};
+    copyParams = (trial: Trial): void => {
+        // get copy parameters
+        const params = JSON.stringify(trial.description.parameters, null, 4);
+        if (copy.default(params)) {
+            this.getCopyStatus('Success copy parameters to clipboard in form of python dict !', 'success');
+        } else {
+            this.getCopyStatus('Failed !', 'error');
+        }
+    };
 
-	render(): React.ReactNode {
-		const { isHidenInfo, typeInfo, info } = this.state;
-		const trialId = this.props.trialId;
-		const trial = TRIALS.getTrial(trialId);
-		const logPathRow = trial.info.logPath || "This trial's log path is not available.";
-		return (
-			<Stack className='openRow'>
-				<Stack className='openRowContent'>
-					<Pivot>
-						<PivotItem headerText='Parameters' key='1' itemIcon='TestParameter'>
-							{trial.info.hyperParameters !== undefined ? (
-								<Stack id='description'>
-									<Stack className='bgHyper'>
-										<JSONTree
-											hideRoot={true}
-											shouldExpandNode={(): boolean => true} // default expandNode
-											getItemString={(): null => null} // remove the {} items
-											data={trial.description.parameters}
-										/>
-									</Stack>
-									<Stack horizontal className='copy'>
-										<PrimaryButton
-											onClick={this.copyParams.bind(this, trial)}
-											text='Copy as json'
-											styles={{ root: { width: 128, marginRight: 10 } }}
-										/>
-										{/* copy success | failed message info */}
-										{!isHidenInfo && <MessageInfo typeInfo={typeInfo} info={info} />}
-									</Stack>
-								</Stack>
-							) : (
-								<Stack className='logpath'>
-									<span className='logName'>Error: </span>
-									<span className='error'>{`This trial's parameters are not available.'`}</span>
-								</Stack>
-							)}
-						</PivotItem>
-						<PivotItem headerText='Log' key='2' itemIcon='M365InvoicingLogo'>
-							{// FIXME: this should not be handled in web UI side
-							EXPERIMENT.trainingServicePlatform !== 'local' ? (
-								<PaiTrialLog
-									logStr={logPathRow}
-									id={trialId}
-									logCollection={EXPERIMENT.logCollectionEnabled}
-								/>
-							) : (
-								<TrialLog logStr={logPathRow} id={trialId} />
-							)}
-						</PivotItem>
-					</Pivot>
-				</Stack>
-			</Stack>
-		);
-	}
+    render(): React.ReactNode {
+        const { isHidenInfo, typeInfo, info } = this.state;
+        const trialId = this.props.trialId;
+        const trial = TRIALS.getTrial(trialId);
+        const logPathRow = trial.info.logPath || "This trial's log path is not available.";
+        return (
+            <Stack className='openRow'>
+                <Stack className='openRowContent'>
+                    <Pivot>
+                        <PivotItem headerText='Parameters' key='1' itemIcon='TestParameter'>
+                            {trial.info.hyperParameters !== undefined ? (
+                                <Stack id='description'>
+                                    <Stack className='bgHyper'>
+                                        <JSONTree
+                                            hideRoot={true}
+                                            shouldExpandNode={(): boolean => true} // default expandNode
+                                            getItemString={(): null => null} // remove the {} items
+                                            data={trial.description.parameters}
+                                        />
+                                    </Stack>
+                                    <Stack horizontal className='copy'>
+                                        <PrimaryButton
+                                            onClick={this.copyParams.bind(this, trial)}
+                                            text='Copy as json'
+                                            styles={{ root: { width: 128, marginRight: 10 } }}
+                                        />
+                                        {/* copy success | failed message info */}
+                                        {!isHidenInfo && <MessageInfo typeInfo={typeInfo} info={info} />}
+                                    </Stack>
+                                </Stack>
+                            ) : (
+                                <Stack className='logpath'>
+                                    <span className='logName'>Error: </span>
+                                    <span className='error'>{`This trial's parameters are not available.'`}</span>
+                                </Stack>
+                            )}
+                        </PivotItem>
+                        <PivotItem headerText='Log' key='2' itemIcon='M365InvoicingLogo'>
+                            {// FIXME: this should not be handled in web UI side
+                            EXPERIMENT.trainingServicePlatform !== 'local' ? (
+                                <PaiTrialLog
+                                    logStr={logPathRow}
+                                    id={trialId}
+                                    logCollection={EXPERIMENT.logCollectionEnabled}
+                                />
+                            ) : (
+                                <TrialLog logStr={logPathRow} id={trialId} />
+                            )}
+                        </PivotItem>
+                    </Pivot>
+                </Stack>
+            </Stack>
+        );
+    }
 }
 
 export default OpenRow;
diff --git a/src/webui/src/components/public-child/PaiTrialChild.tsx b/src/webui/src/components/public-child/PaiTrialChild.tsx
index c582691b9b..e907952738 100644
--- a/src/webui/src/components/public-child/PaiTrialChild.tsx
+++ b/src/webui/src/components/public-child/PaiTrialChild.tsx
@@ -2,41 +2,41 @@ import * as React from 'react';
 import { DOWNLOAD_IP } from '../../static/const';
 
 interface PaiTrialChildProps {
-	logString: string;
-	id: string;
-	logCollect: boolean;
+    logString: string;
+    id: string;
+    logCollect: boolean;
 }
 
 class PaiTrialChild extends React.Component<PaiTrialChildProps, {}> {
-	constructor(props: PaiTrialChildProps) {
-		super(props);
-	}
+    constructor(props: PaiTrialChildProps) {
+        super(props);
+    }
 
-	render(): React.ReactNode {
-		const { logString, id, logCollect } = this.props;
-		return (
-			<div>
-				{logString === '' ? (
-					<div />
-				) : (
-					<div>
-						{logCollect ? (
-							<a
-								target='_blank'
-								rel='noopener noreferrer'
-								href={`${DOWNLOAD_IP}/trial_${id}.log`}
-								style={{ marginRight: 10 }}
-							>
-								trial stdout
-							</a>
-						) : (
-							<span>trial stdout: {logString}</span>
-						)}
-					</div>
-				)}
-			</div>
-		);
-	}
+    render(): React.ReactNode {
+        const { logString, id, logCollect } = this.props;
+        return (
+            <div>
+                {logString === '' ? (
+                    <div />
+                ) : (
+                    <div>
+                        {logCollect ? (
+                            <a
+                                target='_blank'
+                                rel='noopener noreferrer'
+                                href={`${DOWNLOAD_IP}/trial_${id}.log`}
+                                style={{ marginRight: 10 }}
+                            >
+                                trial stdout
+                            </a>
+                        ) : (
+                            <span>trial stdout: {logString}</span>
+                        )}
+                    </div>
+                )}
+            </div>
+        );
+    }
 }
 
 export default PaiTrialChild;
diff --git a/src/webui/src/components/public-child/PaiTrialLog.tsx b/src/webui/src/components/public-child/PaiTrialLog.tsx
index a4f13a2f6d..e67853433e 100644
--- a/src/webui/src/components/public-child/PaiTrialLog.tsx
+++ b/src/webui/src/components/public-child/PaiTrialLog.tsx
@@ -4,52 +4,52 @@ import PaiTrialChild from './PaiTrialChild';
 import LogPathChild from './LogPathChild';
 
 interface PaitrialLogProps {
-	logStr: string;
-	id: string;
-	logCollection: boolean;
+    logStr: string;
+    id: string;
+    logCollection: boolean;
 }
 
 class PaitrialLog extends React.Component<PaitrialLogProps, {}> {
-	constructor(props: PaitrialLogProps) {
-		super(props);
-	}
+    constructor(props: PaitrialLogProps) {
+        super(props);
+    }
 
-	render(): React.ReactNode {
-		const { logStr, id, logCollection } = this.props;
-		const isTwopath = logStr.indexOf(',') !== -1 ? true : false;
-		return (
-			<div>
-				<div>
-					{isTwopath ? (
-						<div>
-							{logCollection ? (
-								<div>
-									<a
-										target='_blank'
-										rel='noopener noreferrer'
-										href={`${DOWNLOAD_IP}/trial_${id}.log`}
-										style={{ marginRight: 10 }}
-									>
-										Trial stdout
-									</a>
-									<a target='_blank' rel='noopener noreferrer' href={logStr.split(',')[1]}>
-										hdfsLog
-									</a>
-								</div>
-							) : (
-								<div>
-									<LogPathChild eachLogpath={logStr.split(',')[0]} logName='Trial stdout:' />
-									<LogPathChild eachLogpath={logStr.split(',')[1]} logName='Log on HDFS:' />
-								</div>
-							)}
-						</div>
-					) : (
-						<PaiTrialChild logString={logStr} id={id} logCollect={logCollection} />
-					)}
-				</div>
-			</div>
-		);
-	}
+    render(): React.ReactNode {
+        const { logStr, id, logCollection } = this.props;
+        const isTwopath = logStr.indexOf(',') !== -1 ? true : false;
+        return (
+            <div>
+                <div>
+                    {isTwopath ? (
+                        <div>
+                            {logCollection ? (
+                                <div>
+                                    <a
+                                        target='_blank'
+                                        rel='noopener noreferrer'
+                                        href={`${DOWNLOAD_IP}/trial_${id}.log`}
+                                        style={{ marginRight: 10 }}
+                                    >
+                                        Trial stdout
+                                    </a>
+                                    <a target='_blank' rel='noopener noreferrer' href={logStr.split(',')[1]}>
+                                        hdfsLog
+                                    </a>
+                                </div>
+                            ) : (
+                                <div>
+                                    <LogPathChild eachLogpath={logStr.split(',')[0]} logName='Trial stdout:' />
+                                    <LogPathChild eachLogpath={logStr.split(',')[1]} logName='Log on HDFS:' />
+                                </div>
+                            )}
+                        </div>
+                    ) : (
+                        <PaiTrialChild logString={logStr} id={id} logCollect={logCollection} />
+                    )}
+                </div>
+            </div>
+        );
+    }
 }
 
 export default PaitrialLog;
diff --git a/src/webui/src/components/public-child/TrialLog.tsx b/src/webui/src/components/public-child/TrialLog.tsx
index e6179b3e50..126ab8711b 100644
--- a/src/webui/src/components/public-child/TrialLog.tsx
+++ b/src/webui/src/components/public-child/TrialLog.tsx
@@ -2,24 +2,24 @@ import * as React from 'react';
 import LogPathChild from './LogPathChild';
 
 interface TrialLogProps {
-	logStr: string;
-	id: string;
+    logStr: string;
+    id: string;
 }
 
 class TrialLog extends React.Component<TrialLogProps, {}> {
-	constructor(props: TrialLogProps) {
-		super(props);
-	}
+    constructor(props: TrialLogProps) {
+        super(props);
+    }
 
-	render(): React.ReactNode {
-		const { logStr } = this.props;
+    render(): React.ReactNode {
+        const { logStr } = this.props;
 
-		return (
-			<div>
-				<LogPathChild eachLogpath={logStr} logName='Log path:' />
-			</div>
-		);
-	}
+        return (
+            <div>
+                <LogPathChild eachLogpath={logStr} logName='Log path:' />
+            </div>
+        );
+    }
 }
 
 export default TrialLog;
diff --git a/src/webui/src/components/stateless-component/NNItabs.tsx b/src/webui/src/components/stateless-component/NNItabs.tsx
index eb1d15c381..809729bf21 100644
--- a/src/webui/src/components/stateless-component/NNItabs.tsx
+++ b/src/webui/src/components/stateless-component/NNItabs.tsx
@@ -2,21 +2,21 @@ import * as React from 'react';
 import { Link } from 'react-router';
 
 const OVERVIEWTABS = (
-	<Link to={'/oview'} activeClassName='high-light' className='common-tabs'>
-		Overview
-	</Link>
+    <Link to={'/oview'} activeClassName='high-light' className='common-tabs'>
+        Overview
+    </Link>
 );
 
 const DETAILTABS = (
-	<Link to={'/detail'} activeClassName='high-light' className='common-tabs'>
-		Trials detail
-	</Link>
+    <Link to={'/detail'} activeClassName='high-light' className='common-tabs'>
+        Trials detail
+    </Link>
 );
 
 const NNILOGO = (
-	<Link to={'/oview'}>
-		<img src={require('../../static/img/logo2.png')} alt='NNI logo' style={{ height: 40 }} />
-	</Link>
+    <Link to={'/oview'}>
+        <img src={require('../../static/img/logo2.png')} alt='NNI logo' style={{ height: 40 }} />
+    </Link>
 );
 
 export { OVERVIEWTABS, DETAILTABS, NNILOGO };
diff --git a/src/webui/src/components/trial-detail/DefaultMetricPoint.tsx b/src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
index 16b48836a4..02a28d616f 100644
--- a/src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
+++ b/src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
@@ -9,181 +9,181 @@ import 'echarts/lib/component/tooltip';
 import 'echarts/lib/component/title';
 
 const EmptyGraph = {
-	grid: {
-		left: '8%'
-	},
-	xAxis: {
-		name: 'Trial',
-		type: 'category'
-	},
-	yAxis: {
-		name: 'Default metric',
-		type: 'value'
-	}
+    grid: {
+        left: '8%'
+    },
+    xAxis: {
+        name: 'Trial',
+        type: 'category'
+    },
+    yAxis: {
+        name: 'Default metric',
+        type: 'value'
+    }
 };
 
 interface DefaultPointProps {
-	trialIds: string[];
-	visible: boolean;
-	trialsUpdateBroadcast: number;
+    trialIds: string[];
+    visible: boolean;
+    trialsUpdateBroadcast: number;
 }
 
 interface DefaultPointState {
-	bestCurveEnabled?: boolean | undefined;
-	startY: number; // dataZoomY
-	endY: number;
+    bestCurveEnabled?: boolean | undefined;
+    startY: number; // dataZoomY
+    endY: number;
 }
 
 class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState> {
-	constructor(props: DefaultPointProps) {
-		super(props);
-		this.state = {
-			bestCurveEnabled: false,
-			startY: 0, // dataZoomY
-			endY: 100
-		};
-	}
-
-	loadDefault = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
-		this.setState({ bestCurveEnabled: checked });
-	};
-
-	shouldComponentUpdate(nextProps: DefaultPointProps): boolean {
-		return nextProps.visible;
-	}
-
-	metricDataZoom = (e: EventMap): void => {
-		if (e.batch !== undefined) {
-			this.setState(() => ({
-				startY: e.batch[0].start !== null ? e.batch[0].start : 0,
-				endY: e.batch[0].end !== null ? e.batch[0].end : 100
-			}));
-		}
-	};
-
-	generateGraphConfig(maxSequenceId: number): any {
-		const { startY, endY } = this.state;
-		return {
-			grid: {
-				left: '8%'
-			},
-			tooltip: {
-				trigger: 'item',
-				enterable: true,
-				position: (point: number[], data: TooltipForAccuracy): number[] => [
-					data.data[0] < maxSequenceId ? point[0] : point[0] - 300,
-					80
-				],
-				formatter: (data: TooltipForAccuracy): React.ReactNode =>
-					'<div class="tooldetailAccuracy">' +
-					'<div>Trial No.: ' +
-					data.data[0] +
-					'</div>' +
-					'<div>Default metric: ' +
-					data.data[1] +
-					'</div>' +
-					'<div>Parameters: <pre>' +
-					JSON.stringify(data.data[2], null, 4) +
-					'</pre></div>' +
-					'</div>'
-			},
-			dataZoom: [
-				{
-					id: 'dataZoomY',
-					type: 'inside',
-					yAxisIndex: [0],
-					filterMode: 'empty',
-					start: startY,
-					end: endY
-				}
-			],
-			xAxis: {
-				name: 'Trial',
-				type: 'category'
-			},
-			yAxis: {
-				name: 'Default metric',
-				type: 'value',
-				scale: true
-			},
-			series: undefined
-		};
-	}
-
-	generateScatterSeries(trials: Trial[]): any {
-		const data = trials.map(trial => [trial.sequenceId, trial.accuracy, trial.description.parameters]);
-		return {
-			symbolSize: 6,
-			type: 'scatter',
-			data
-		};
-	}
-
-	generateBestCurveSeries(trials: Trial[]): any {
-		let best = trials[0];
-		const data = [[best.sequenceId, best.accuracy, best.description.parameters]];
-
-		for (let i = 1; i < trials.length; i++) {
-			const trial = trials[i];
-			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-			const delta = trial.accuracy! - best.accuracy!;
-			const better = EXPERIMENT.optimizeMode === 'minimize' ? delta < 0 : delta > 0;
-			if (better) {
-				data.push([trial.sequenceId, trial.accuracy, trial.description.parameters]);
-				best = trial;
-			} else {
-				data.push([trial.sequenceId, best.accuracy, trial.description.parameters]);
-			}
-		}
-
-		return {
-			type: 'line',
-			lineStyle: { color: '#FF6600' },
-			data
-		};
-	}
-
-	render(): React.ReactNode {
-		const graph = this.generateGraph();
-		const accNodata = graph === EmptyGraph ? 'No data' : '';
-		const onEvents = { dataZoom: this.metricDataZoom };
-
-		return (
-			<div>
-				<Stack horizontalAlign='end' className='default-metric'>
-					<Toggle label='Optimization curve' inlineLabel onChange={this.loadDefault} />
-				</Stack>
-				<div className='default-metric-graph'>
-					<ReactEcharts
-						option={graph}
-						style={{
-							width: '100%',
-							height: 402,
-							margin: '0 auto'
-						}}
-						theme='my_theme'
-						notMerge={true} // update now
-						onEvents={onEvents}
-					/>
-					<div className='default-metric-noData'>{accNodata}</div>
-				</div>
-			</div>
-		);
-	}
-
-	private generateGraph(): any {
-		const trials = TRIALS.getTrials(this.props.trialIds).filter(trial => trial.sortable);
-		if (trials.length === 0) {
-			return EmptyGraph;
-		}
-		const graph = this.generateGraphConfig(trials[trials.length - 1].sequenceId);
-		if (this.state.bestCurveEnabled) {
-			(graph as any).series = [this.generateBestCurveSeries(trials), this.generateScatterSeries(trials)];
-		} else {
-			(graph as any).series = [this.generateScatterSeries(trials)];
-		}
-		return graph;
-	}
+    constructor(props: DefaultPointProps) {
+        super(props);
+        this.state = {
+            bestCurveEnabled: false,
+            startY: 0, // dataZoomY
+            endY: 100
+        };
+    }
+
+    loadDefault = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
+        this.setState({ bestCurveEnabled: checked });
+    };
+
+    shouldComponentUpdate(nextProps: DefaultPointProps): boolean {
+        return nextProps.visible;
+    }
+
+    metricDataZoom = (e: EventMap): void => {
+        if (e.batch !== undefined) {
+            this.setState(() => ({
+                startY: e.batch[0].start !== null ? e.batch[0].start : 0,
+                endY: e.batch[0].end !== null ? e.batch[0].end : 100
+            }));
+        }
+    };
+
+    generateGraphConfig(maxSequenceId: number): any {
+        const { startY, endY } = this.state;
+        return {
+            grid: {
+                left: '8%'
+            },
+            tooltip: {
+                trigger: 'item',
+                enterable: true,
+                position: (point: number[], data: TooltipForAccuracy): number[] => [
+                    data.data[0] < maxSequenceId ? point[0] : point[0] - 300,
+                    80
+                ],
+                formatter: (data: TooltipForAccuracy): React.ReactNode =>
+                    '<div class="tooldetailAccuracy">' +
+                    '<div>Trial No.: ' +
+                    data.data[0] +
+                    '</div>' +
+                    '<div>Default metric: ' +
+                    data.data[1] +
+                    '</div>' +
+                    '<div>Parameters: <pre>' +
+                    JSON.stringify(data.data[2], null, 4) +
+                    '</pre></div>' +
+                    '</div>'
+            },
+            dataZoom: [
+                {
+                    id: 'dataZoomY',
+                    type: 'inside',
+                    yAxisIndex: [0],
+                    filterMode: 'empty',
+                    start: startY,
+                    end: endY
+                }
+            ],
+            xAxis: {
+                name: 'Trial',
+                type: 'category'
+            },
+            yAxis: {
+                name: 'Default metric',
+                type: 'value',
+                scale: true
+            },
+            series: undefined
+        };
+    }
+
+    generateScatterSeries(trials: Trial[]): any {
+        const data = trials.map(trial => [trial.sequenceId, trial.accuracy, trial.description.parameters]);
+        return {
+            symbolSize: 6,
+            type: 'scatter',
+            data
+        };
+    }
+
+    generateBestCurveSeries(trials: Trial[]): any {
+        let best = trials[0];
+        const data = [[best.sequenceId, best.accuracy, best.description.parameters]];
+
+        for (let i = 1; i < trials.length; i++) {
+            const trial = trials[i];
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const delta = trial.accuracy! - best.accuracy!;
+            const better = EXPERIMENT.optimizeMode === 'minimize' ? delta < 0 : delta > 0;
+            if (better) {
+                data.push([trial.sequenceId, trial.accuracy, trial.description.parameters]);
+                best = trial;
+            } else {
+                data.push([trial.sequenceId, best.accuracy, trial.description.parameters]);
+            }
+        }
+
+        return {
+            type: 'line',
+            lineStyle: { color: '#FF6600' },
+            data
+        };
+    }
+
+    render(): React.ReactNode {
+        const graph = this.generateGraph();
+        const accNodata = graph === EmptyGraph ? 'No data' : '';
+        const onEvents = { dataZoom: this.metricDataZoom };
+
+        return (
+            <div>
+                <Stack horizontalAlign='end' className='default-metric'>
+                    <Toggle label='Optimization curve' inlineLabel onChange={this.loadDefault} />
+                </Stack>
+                <div className='default-metric-graph'>
+                    <ReactEcharts
+                        option={graph}
+                        style={{
+                            width: '100%',
+                            height: 402,
+                            margin: '0 auto'
+                        }}
+                        theme='my_theme'
+                        notMerge={true} // update now
+                        onEvents={onEvents}
+                    />
+                    <div className='default-metric-noData'>{accNodata}</div>
+                </div>
+            </div>
+        );
+    }
+
+    private generateGraph(): any {
+        const trials = TRIALS.getTrials(this.props.trialIds).filter(trial => trial.sortable);
+        if (trials.length === 0) {
+            return EmptyGraph;
+        }
+        const graph = this.generateGraphConfig(trials[trials.length - 1].sequenceId);
+        if (this.state.bestCurveEnabled) {
+            (graph as any).series = [this.generateBestCurveSeries(trials), this.generateScatterSeries(trials)];
+        } else {
+            (graph as any).series = [this.generateScatterSeries(trials)];
+        }
+        return graph;
+    }
 }
 
 export default DefaultPoint;
diff --git a/src/webui/src/components/trial-detail/Duration.tsx b/src/webui/src/components/trial-detail/Duration.tsx
index 3b838bd5f3..d4e16f665a 100644
--- a/src/webui/src/components/trial-detail/Duration.tsx
+++ b/src/webui/src/components/trial-detail/Duration.tsx
@@ -7,206 +7,206 @@ import 'echarts/lib/component/tooltip';
 import 'echarts/lib/component/title';
 
 interface Runtrial {
-	trialId: string[];
-	trialTime: number[];
+    trialId: string[];
+    trialTime: number[];
 }
 
 interface DurationProps {
-	source: Array<TableObj>;
-	whichChart: string;
+    source: Array<TableObj>;
+    whichChart: string;
 }
 
 interface DurationState {
-	startDuration: number; // for record data zoom
-	endDuration: number;
-	durationSource: {};
+    startDuration: number; // for record data zoom
+    endDuration: number;
+    durationSource: {};
 }
 
 class Duration extends React.Component<DurationProps, DurationState> {
-	constructor(props: DurationProps) {
-		super(props);
-		this.state = {
-			startDuration: 0, // for record data zoom
-			endDuration: 100,
-			durationSource: this.initDuration(this.props.source)
-		};
-	}
+    constructor(props: DurationProps) {
+        super(props);
+        this.state = {
+            startDuration: 0, // for record data zoom
+            endDuration: 100,
+            durationSource: this.initDuration(this.props.source)
+        };
+    }
 
-	initDuration = (source: Array<TableObj>): any => {
-		const trialId: number[] = [];
-		const trialTime: number[] = [];
-		const trialJobs = source.filter(filterDuration);
+    initDuration = (source: Array<TableObj>): any => {
+        const trialId: number[] = [];
+        const trialTime: number[] = [];
+        const trialJobs = source.filter(filterDuration);
 
-		trialJobs.forEach(item => {
-			trialId.push(item.sequenceId);
-			trialTime.push(item.duration);
-		});
-		return {
-			tooltip: {
-				trigger: 'axis',
-				axisPointer: {
-					type: 'shadow'
-				},
-				formatter: (data: any): React.ReactNode =>
-					'<div>' +
-					'<div>Trial No.: ' +
-					data[0].dataIndex +
-					'</div>' +
-					'<div>Duration: ' +
-					convertDuration(data[0].data) +
-					'</div>' +
-					'</div>'
-			},
-			grid: {
-				bottom: '3%',
-				containLabel: true,
-				left: '1%',
-				right: '5%'
-			},
-			dataZoom: [
-				{
-					id: 'dataZoomY',
-					type: 'inside',
-					yAxisIndex: [0],
-					filterMode: 'empty',
-					start: 0,
-					end: 100
-				}
-			],
-			xAxis: {
-				name: 'Time/s',
-				type: 'value'
-			},
-			yAxis: {
-				name: 'Trial No.',
-				type: 'category',
-				data: trialId,
-				nameTextStyle: {
-					padding: [0, 0, 0, 30]
-				}
-			},
-			series: [
-				{
-					type: 'bar',
-					data: trialTime
-				}
-			]
-		};
-	};
+        trialJobs.forEach(item => {
+            trialId.push(item.sequenceId);
+            trialTime.push(item.duration);
+        });
+        return {
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow'
+                },
+                formatter: (data: any): React.ReactNode =>
+                    '<div>' +
+                    '<div>Trial No.: ' +
+                    data[0].dataIndex +
+                    '</div>' +
+                    '<div>Duration: ' +
+                    convertDuration(data[0].data) +
+                    '</div>' +
+                    '</div>'
+            },
+            grid: {
+                bottom: '3%',
+                containLabel: true,
+                left: '1%',
+                right: '5%'
+            },
+            dataZoom: [
+                {
+                    id: 'dataZoomY',
+                    type: 'inside',
+                    yAxisIndex: [0],
+                    filterMode: 'empty',
+                    start: 0,
+                    end: 100
+                }
+            ],
+            xAxis: {
+                name: 'Time/s',
+                type: 'value'
+            },
+            yAxis: {
+                name: 'Trial No.',
+                type: 'category',
+                data: trialId,
+                nameTextStyle: {
+                    padding: [0, 0, 0, 30]
+                }
+            },
+            series: [
+                {
+                    type: 'bar',
+                    data: trialTime
+                }
+            ]
+        };
+    };
 
-	getOption = (dataObj: Runtrial): any => {
-		const { startDuration, endDuration } = this.state;
-		return {
-			tooltip: {
-				trigger: 'axis',
-				axisPointer: {
-					type: 'shadow'
-				},
-				formatter: (data: any): React.ReactNode =>
-					'<div>' +
-					'<div>Trial No.: ' +
-					data[0].dataIndex +
-					'</div>' +
-					'<div>Duration: ' +
-					convertDuration(data[0].data) +
-					'</div>' +
-					'</div>'
-			},
-			grid: {
-				bottom: '3%',
-				containLabel: true,
-				left: '1%',
-				right: '5%'
-			},
-			dataZoom: [
-				{
-					id: 'dataZoomY',
-					type: 'inside',
-					yAxisIndex: [0],
-					filterMode: 'empty',
-					start: startDuration,
-					end: endDuration
-				}
-			],
-			xAxis: {
-				name: 'Time',
-				type: 'value'
-			},
-			yAxis: {
-				name: 'Trial',
-				type: 'category',
-				data: dataObj.trialId,
-				nameTextStyle: {
-					padding: [0, 0, 0, 30]
-				}
-			},
-			series: [
-				{
-					type: 'bar',
-					data: dataObj.trialTime
-				}
-			]
-		};
-	};
+    getOption = (dataObj: Runtrial): any => {
+        const { startDuration, endDuration } = this.state;
+        return {
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow'
+                },
+                formatter: (data: any): React.ReactNode =>
+                    '<div>' +
+                    '<div>Trial No.: ' +
+                    data[0].dataIndex +
+                    '</div>' +
+                    '<div>Duration: ' +
+                    convertDuration(data[0].data) +
+                    '</div>' +
+                    '</div>'
+            },
+            grid: {
+                bottom: '3%',
+                containLabel: true,
+                left: '1%',
+                right: '5%'
+            },
+            dataZoom: [
+                {
+                    id: 'dataZoomY',
+                    type: 'inside',
+                    yAxisIndex: [0],
+                    filterMode: 'empty',
+                    start: startDuration,
+                    end: endDuration
+                }
+            ],
+            xAxis: {
+                name: 'Time',
+                type: 'value'
+            },
+            yAxis: {
+                name: 'Trial',
+                type: 'category',
+                data: dataObj.trialId,
+                nameTextStyle: {
+                    padding: [0, 0, 0, 30]
+                }
+            },
+            series: [
+                {
+                    type: 'bar',
+                    data: dataObj.trialTime
+                }
+            ]
+        };
+    };
 
-	drawDurationGraph = (source: Array<TableObj>): void => {
-		// why this function run two times when props changed?
-		const trialId: string[] = [];
-		const trialTime: number[] = [];
-		const trialRun: Runtrial[] = [];
-		const trialJobs = source.filter(filterDuration);
-		Object.keys(trialJobs).map(item => {
-			const temp = trialJobs[item];
-			trialId.push(temp.sequenceId);
-			trialTime.push(temp.duration);
-		});
-		trialRun.push({
-			trialId: trialId,
-			trialTime: trialTime
-		});
-		this.setState({
-			durationSource: this.getOption(trialRun[0])
-		});
-	};
+    drawDurationGraph = (source: Array<TableObj>): void => {
+        // why this function run two times when props changed?
+        const trialId: string[] = [];
+        const trialTime: number[] = [];
+        const trialRun: Runtrial[] = [];
+        const trialJobs = source.filter(filterDuration);
+        Object.keys(trialJobs).map(item => {
+            const temp = trialJobs[item];
+            trialId.push(temp.sequenceId);
+            trialTime.push(temp.duration);
+        });
+        trialRun.push({
+            trialId: trialId,
+            trialTime: trialTime
+        });
+        this.setState({
+            durationSource: this.getOption(trialRun[0])
+        });
+    };
 
-	componentDidMount(): void {
-		const { source } = this.props;
-		this.drawDurationGraph(source);
-	}
+    componentDidMount(): void {
+        const { source } = this.props;
+        this.drawDurationGraph(source);
+    }
 
-	componentDidUpdate(prevProps: DurationProps): void {
-		// add this if to prevent endless loop
-		if (this.props.source !== prevProps.source) {
-			if (this.props.whichChart === 'Duration') {
-				this.drawDurationGraph(this.props.source);
-			}
-		}
-	}
+    componentDidUpdate(prevProps: DurationProps): void {
+        // add this if to prevent endless loop
+        if (this.props.source !== prevProps.source) {
+            if (this.props.whichChart === 'Duration') {
+                this.drawDurationGraph(this.props.source);
+            }
+        }
+    }
 
-	render(): React.ReactNode {
-		const { durationSource } = this.state;
-		const onEvents = { dataZoom: this.durationDataZoom };
-		return (
-			<div>
-				<ReactEcharts
-					option={durationSource}
-					style={{ width: '94%', height: 412, margin: '0 auto', marginTop: 15 }}
-					theme='my_theme'
-					notMerge={true} // update now
-					onEvents={onEvents}
-				/>
-			</div>
-		);
-	}
+    render(): React.ReactNode {
+        const { durationSource } = this.state;
+        const onEvents = { dataZoom: this.durationDataZoom };
+        return (
+            <div>
+                <ReactEcharts
+                    option={durationSource}
+                    style={{ width: '94%', height: 412, margin: '0 auto', marginTop: 15 }}
+                    theme='my_theme'
+                    notMerge={true} // update now
+                    onEvents={onEvents}
+                />
+            </div>
+        );
+    }
 
-	private durationDataZoom = (e: EventMap): void => {
-		if (e.batch !== undefined) {
-			this.setState(() => ({
-				startDuration: e.batch[0].start !== null ? e.batch[0].start : 0,
-				endDuration: e.batch[0].end !== null ? e.batch[0].end : 100
-			}));
-		}
-	};
+    private durationDataZoom = (e: EventMap): void => {
+        if (e.batch !== undefined) {
+            this.setState(() => ({
+                startDuration: e.batch[0].start !== null ? e.batch[0].start : 0,
+                endDuration: e.batch[0].end !== null ? e.batch[0].end : 100
+            }));
+        }
+    };
 }
 
 export default Duration;
diff --git a/src/webui/src/components/trial-detail/Intermediate.tsx b/src/webui/src/components/trial-detail/Intermediate.tsx
index 3b080de539..06c45de97e 100644
--- a/src/webui/src/components/trial-detail/Intermediate.tsx
+++ b/src/webui/src/components/trial-detail/Intermediate.tsx
@@ -6,298 +6,298 @@ import 'echarts/lib/component/tooltip';
 import 'echarts/lib/component/title';
 
 const stackTokens: IStackTokens = {
-	childrenGap: 20
+    childrenGap: 20
 };
 
 interface IntermediateState {
-	detailSource: Array<TableObj>;
-	interSource: object;
-	filterSource: Array<TableObj>;
-	eachIntermediateNum: number; // trial's intermediate number count
-	isLoadconfirmBtn: boolean;
-	isFilter?: boolean | undefined;
-	length: number;
-	clickCounts: number; // user filter intermediate click confirm btn's counts
-	startMediaY: number;
-	endMediaY: number;
+    detailSource: Array<TableObj>;
+    interSource: object;
+    filterSource: Array<TableObj>;
+    eachIntermediateNum: number; // trial's intermediate number count
+    isLoadconfirmBtn: boolean;
+    isFilter?: boolean | undefined;
+    length: number;
+    clickCounts: number; // user filter intermediate click confirm btn's counts
+    startMediaY: number;
+    endMediaY: number;
 }
 
 interface IntermediateProps {
-	source: Array<TableObj>;
-	whichChart: string;
+    source: Array<TableObj>;
+    whichChart: string;
 }
 
 class Intermediate extends React.Component<IntermediateProps, IntermediateState> {
-	static intervalMediate = 1;
-	public pointInput!: HTMLInputElement | null;
-	public minValInput!: HTMLInputElement | null;
-	public maxValInput!: HTMLInputElement | null;
+    static intervalMediate = 1;
+    public pointInput!: HTMLInputElement | null;
+    public minValInput!: HTMLInputElement | null;
+    public maxValInput!: HTMLInputElement | null;
 
-	constructor(props: IntermediateProps) {
-		super(props);
-		this.state = {
-			detailSource: [],
-			interSource: {},
-			filterSource: [],
-			eachIntermediateNum: 1,
-			isLoadconfirmBtn: false,
-			isFilter: false,
-			length: 100000,
-			clickCounts: 0,
-			startMediaY: 0,
-			endMediaY: 100
-		};
-	}
+    constructor(props: IntermediateProps) {
+        super(props);
+        this.state = {
+            detailSource: [],
+            interSource: {},
+            filterSource: [],
+            eachIntermediateNum: 1,
+            isLoadconfirmBtn: false,
+            isFilter: false,
+            length: 100000,
+            clickCounts: 0,
+            startMediaY: 0,
+            endMediaY: 100
+        };
+    }
 
-	drawIntermediate = (source: Array<TableObj>): void => {
-		if (source.length > 0) {
-			this.setState({
-				length: source.length,
-				detailSource: source
-			});
-			const { startMediaY, endMediaY } = this.state;
-			const trialIntermediate: Array<Intermedia> = [];
-			Object.keys(source).map(item => {
-				const temp = source[item];
-				trialIntermediate.push({
-					name: temp.id,
-					data: temp.description.intermediate,
-					type: 'line',
-					hyperPara: temp.description.parameters
-				});
-			});
-			// find max intermediate number
-			trialIntermediate.sort((a, b) => {
-				return b.data.length - a.data.length;
-			});
-			const legend: string[] = [];
-			// max length
-			const length = trialIntermediate[0].data.length;
-			const xAxis: number[] = [];
-			Object.keys(trialIntermediate).map(item => {
-				const temp = trialIntermediate[item];
-				legend.push(temp.name);
-			});
-			for (let i = 1; i <= length; i++) {
-				xAxis.push(i);
-			}
-			const option = {
-				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];
-						}
-					},
-					formatter: function(data: TooltipForIntermediate): React.ReactNode {
-						const trialId = data.seriesName;
-						let obj = {};
-						const temp = trialIntermediate.find(key => key.name === trialId);
-						if (temp !== undefined) {
-							obj = temp.hyperPara;
-						}
-						return (
-							'<div class="tooldetailAccuracy">' +
-							'<div>Trial ID: ' +
-							trialId +
-							'</div>' +
-							'<div>Intermediate: ' +
-							data.data +
-							'</div>' +
-							'<div>Parameters: ' +
-							'<pre>' +
-							JSON.stringify(obj, null, 4) +
-							'</pre>' +
-							'</div>' +
-							'</div>'
-						);
-					}
-				},
-				grid: {
-					left: '5%',
-					top: 40,
-					containLabel: true
-				},
-				xAxis: {
-					type: 'category',
-					// name: '# Intermediate',
-					boundaryGap: false,
-					data: xAxis
-				},
-				yAxis: {
-					type: 'value',
-					name: 'Metric',
-					scale: true
-				},
-				dataZoom: [
-					{
-						id: 'dataZoomY',
-						type: 'inside',
-						yAxisIndex: [0],
-						filterMode: 'none',
-						start: startMediaY,
-						end: endMediaY
-					}
-				],
-				series: trialIntermediate
-			};
-			this.setState({
-				interSource: option
-			});
-		} else {
-			const nullData = {
-				grid: {
-					left: '5%',
-					top: 40,
-					containLabel: true
-				},
-				xAxis: {
-					type: 'category',
-					boundaryGap: false
-				},
-				yAxis: {
-					type: 'value',
-					name: 'Metric'
-				}
-			};
-			this.setState({ interSource: nullData });
-		}
-	};
+    drawIntermediate = (source: Array<TableObj>): void => {
+        if (source.length > 0) {
+            this.setState({
+                length: source.length,
+                detailSource: source
+            });
+            const { startMediaY, endMediaY } = this.state;
+            const trialIntermediate: Array<Intermedia> = [];
+            Object.keys(source).map(item => {
+                const temp = source[item];
+                trialIntermediate.push({
+                    name: temp.id,
+                    data: temp.description.intermediate,
+                    type: 'line',
+                    hyperPara: temp.description.parameters
+                });
+            });
+            // find max intermediate number
+            trialIntermediate.sort((a, b) => {
+                return b.data.length - a.data.length;
+            });
+            const legend: string[] = [];
+            // max length
+            const length = trialIntermediate[0].data.length;
+            const xAxis: number[] = [];
+            Object.keys(trialIntermediate).map(item => {
+                const temp = trialIntermediate[item];
+                legend.push(temp.name);
+            });
+            for (let i = 1; i <= length; i++) {
+                xAxis.push(i);
+            }
+            const option = {
+                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];
+                        }
+                    },
+                    formatter: function(data: TooltipForIntermediate): React.ReactNode {
+                        const trialId = data.seriesName;
+                        let obj = {};
+                        const temp = trialIntermediate.find(key => key.name === trialId);
+                        if (temp !== undefined) {
+                            obj = temp.hyperPara;
+                        }
+                        return (
+                            '<div class="tooldetailAccuracy">' +
+                            '<div>Trial ID: ' +
+                            trialId +
+                            '</div>' +
+                            '<div>Intermediate: ' +
+                            data.data +
+                            '</div>' +
+                            '<div>Parameters: ' +
+                            '<pre>' +
+                            JSON.stringify(obj, null, 4) +
+                            '</pre>' +
+                            '</div>' +
+                            '</div>'
+                        );
+                    }
+                },
+                grid: {
+                    left: '5%',
+                    top: 40,
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    // name: '# Intermediate',
+                    boundaryGap: false,
+                    data: xAxis
+                },
+                yAxis: {
+                    type: 'value',
+                    name: 'Metric',
+                    scale: true
+                },
+                dataZoom: [
+                    {
+                        id: 'dataZoomY',
+                        type: 'inside',
+                        yAxisIndex: [0],
+                        filterMode: 'none',
+                        start: startMediaY,
+                        end: endMediaY
+                    }
+                ],
+                series: trialIntermediate
+            };
+            this.setState({
+                interSource: option
+            });
+        } else {
+            const nullData = {
+                grid: {
+                    left: '5%',
+                    top: 40,
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false
+                },
+                yAxis: {
+                    type: 'value',
+                    name: 'Metric'
+                }
+            };
+            this.setState({ interSource: nullData });
+        }
+    };
 
-	// confirm btn function [filter data]
-	filterLines = (): void => {
-		const filterSource: Array<TableObj> = [];
-		this.setState({ isLoadconfirmBtn: true }, () => {
-			const { source } = this.props;
-			// get input value
-			const pointVal = this.pointInput !== null ? this.pointInput.value : '';
-			const minVal = this.minValInput !== null ? this.minValInput.value : '';
-			const maxVal = this.maxValInput !== null ? this.maxValInput.value : '';
-			// user not input message
-			if (pointVal === '' || minVal === '') {
-				alert('Please input filter message');
-			} else {
-				// user not input max value
-				const position = JSON.parse(pointVal);
-				const min = JSON.parse(minVal);
-				if (maxVal === '') {
-					Object.keys(source).map(item => {
-						const temp = source[item];
-						const val = temp.description.intermediate[position - 1];
-						if (val >= min) {
-							filterSource.push(temp);
-						}
-					});
-				} else {
-					const max = JSON.parse(maxVal);
-					Object.keys(source).map(item => {
-						const temp = source[item];
-						const val = temp.description.intermediate[position - 1];
-						if (val >= min && val <= max) {
-							filterSource.push(temp);
-						}
-					});
-				}
-				this.setState({ filterSource: filterSource });
-				this.drawIntermediate(filterSource);
-			}
-			const counts = this.state.clickCounts + 1;
-			this.setState({ isLoadconfirmBtn: false, clickCounts: counts });
-		});
-	};
+    // confirm btn function [filter data]
+    filterLines = (): void => {
+        const filterSource: Array<TableObj> = [];
+        this.setState({ isLoadconfirmBtn: true }, () => {
+            const { source } = this.props;
+            // get input value
+            const pointVal = this.pointInput !== null ? this.pointInput.value : '';
+            const minVal = this.minValInput !== null ? this.minValInput.value : '';
+            const maxVal = this.maxValInput !== null ? this.maxValInput.value : '';
+            // user not input message
+            if (pointVal === '' || minVal === '') {
+                alert('Please input filter message');
+            } else {
+                // user not input max value
+                const position = JSON.parse(pointVal);
+                const min = JSON.parse(minVal);
+                if (maxVal === '') {
+                    Object.keys(source).map(item => {
+                        const temp = source[item];
+                        const val = temp.description.intermediate[position - 1];
+                        if (val >= min) {
+                            filterSource.push(temp);
+                        }
+                    });
+                } else {
+                    const max = JSON.parse(maxVal);
+                    Object.keys(source).map(item => {
+                        const temp = source[item];
+                        const val = temp.description.intermediate[position - 1];
+                        if (val >= min && val <= max) {
+                            filterSource.push(temp);
+                        }
+                    });
+                }
+                this.setState({ filterSource: filterSource });
+                this.drawIntermediate(filterSource);
+            }
+            const counts = this.state.clickCounts + 1;
+            this.setState({ isLoadconfirmBtn: false, clickCounts: counts });
+        });
+    };
 
-	switchTurn = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
-		this.setState({ isFilter: checked });
-		if (checked === false) {
-			this.drawIntermediate(this.props.source);
-		}
-	};
+    switchTurn = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
+        this.setState({ isFilter: checked });
+        if (checked === false) {
+            this.drawIntermediate(this.props.source);
+        }
+    };
 
-	componentDidMount(): void {
-		const { source } = this.props;
-		this.drawIntermediate(source);
-	}
+    componentDidMount(): void {
+        const { source } = this.props;
+        this.drawIntermediate(source);
+    }
 
-	componentDidUpdate(prevProps: IntermediateProps, prevState: any): void {
-		if (this.props.source !== prevProps.source || this.state.isFilter !== prevState.isFilter) {
-			const { isFilter, filterSource } = this.state;
-			const { whichChart, source } = this.props;
+    componentDidUpdate(prevProps: IntermediateProps, prevState: any): void {
+        if (this.props.source !== prevProps.source || this.state.isFilter !== prevState.isFilter) {
+            const { isFilter, filterSource } = this.state;
+            const { whichChart, source } = this.props;
 
-			if (whichChart === 'Intermediate result') {
-				if (isFilter === true) {
-					const pointVal = this.pointInput !== null ? this.pointInput.value : '';
-					const minVal = this.minValInput !== null ? this.minValInput.value : '';
-					if (pointVal === '' && minVal === '') {
-						this.drawIntermediate(source);
-					} else {
-						this.drawIntermediate(filterSource);
-					}
-				} else {
-					this.drawIntermediate(source);
-				}
-			}
-		}
-	}
+            if (whichChart === 'Intermediate result') {
+                if (isFilter === true) {
+                    const pointVal = this.pointInput !== null ? this.pointInput.value : '';
+                    const minVal = this.minValInput !== null ? this.minValInput.value : '';
+                    if (pointVal === '' && minVal === '') {
+                        this.drawIntermediate(source);
+                    } else {
+                        this.drawIntermediate(filterSource);
+                    }
+                } else {
+                    this.drawIntermediate(source);
+                }
+            }
+        }
+    }
 
-	render(): React.ReactNode {
-		const { interSource, isLoadconfirmBtn, isFilter } = this.state;
-		const IntermediateEvents = { dataZoom: this.intermediateDataZoom };
+    render(): React.ReactNode {
+        const { interSource, isLoadconfirmBtn, isFilter } = this.state;
+        const IntermediateEvents = { dataZoom: this.intermediateDataZoom };
 
-		return (
-			<div>
-				{/* style in para.scss */}
-				<Stack horizontal horizontalAlign='end' tokens={stackTokens} className='meline intermediate'>
-					{isFilter ? (
-						<div>
-							<span className='filter-x'># Intermediate result</span>
-							<input
-								// placeholder="point"
-								ref={(input): any => (this.pointInput = input)}
-								className='strange'
-							/>
-							<span>Metric range</span>
-							<input
-								// placeholder="range"
-								ref={(input): any => (this.minValInput = input)}
-							/>
-							<span className='hyphen'>-</span>
-							<input
-								// placeholder="range"
-								ref={(input): any => (this.maxValInput = input)}
-							/>
-							<PrimaryButton text='Confirm' onClick={this.filterLines} disabled={isLoadconfirmBtn} />
-						</div>
-					) : null}
-					{/* filter message */}
-					<Stack horizontal className='filter-toggle'>
-						<span>Filter</span>
-						<Toggle onChange={this.switchTurn} />
-					</Stack>
-				</Stack>
-				<div className='intermediate-graph'>
-					<ReactEcharts
-						option={interSource}
-						style={{ width: '100%', height: 400, margin: '0 auto' }}
-						notMerge={true} // update now
-						onEvents={IntermediateEvents}
-					/>
-					<div className='xAxis'># Intermediate result</div>
-				</div>
-			</div>
-		);
-	}
+        return (
+            <div>
+                {/* style in para.scss */}
+                <Stack horizontal horizontalAlign='end' tokens={stackTokens} className='meline intermediate'>
+                    {isFilter ? (
+                        <div>
+                            <span className='filter-x'># Intermediate result</span>
+                            <input
+                                // placeholder="point"
+                                ref={(input): any => (this.pointInput = input)}
+                                className='strange'
+                            />
+                            <span>Metric range</span>
+                            <input
+                                // placeholder="range"
+                                ref={(input): any => (this.minValInput = input)}
+                            />
+                            <span className='hyphen'>-</span>
+                            <input
+                                // placeholder="range"
+                                ref={(input): any => (this.maxValInput = input)}
+                            />
+                            <PrimaryButton text='Confirm' onClick={this.filterLines} disabled={isLoadconfirmBtn} />
+                        </div>
+                    ) : null}
+                    {/* filter message */}
+                    <Stack horizontal className='filter-toggle'>
+                        <span>Filter</span>
+                        <Toggle onChange={this.switchTurn} />
+                    </Stack>
+                </Stack>
+                <div className='intermediate-graph'>
+                    <ReactEcharts
+                        option={interSource}
+                        style={{ width: '100%', height: 400, margin: '0 auto' }}
+                        notMerge={true} // update now
+                        onEvents={IntermediateEvents}
+                    />
+                    <div className='xAxis'># Intermediate result</div>
+                </div>
+            </div>
+        );
+    }
 
-	private intermediateDataZoom = (e: EventMap): void => {
-		if (e.batch !== undefined) {
-			this.setState(() => ({
-				startMediaY: e.batch[0].start !== null ? e.batch[0].start : 0,
-				endMediaY: e.batch[0].end !== null ? e.batch[0].end : 100
-			}));
-		}
-	};
+    private intermediateDataZoom = (e: EventMap): void => {
+        if (e.batch !== undefined) {
+            this.setState(() => ({
+                startMediaY: e.batch[0].start !== null ? e.batch[0].start : 0,
+                endMediaY: e.batch[0].end !== null ? e.batch[0].end : 100
+            }));
+        }
+    };
 }
 
 export default Intermediate;
diff --git a/src/webui/src/components/trial-detail/Para.tsx b/src/webui/src/components/trial-detail/Para.tsx
index 039d83e9c0..cd9aa90195 100644
--- a/src/webui/src/components/trial-detail/Para.tsx
+++ b/src/webui/src/components/trial-detail/Para.tsx
@@ -11,283 +11,283 @@ import '../../static/style/button.scss';
 import '../../static/style/para.scss';
 
 interface ParaState {
-	dimName: string[];
-	selectedPercent: string;
-	primaryMetricKey: string;
-	noChart: boolean;
+    dimName: string[];
+    selectedPercent: string;
+    primaryMetricKey: string;
+    noChart: boolean;
 }
 
 interface ParaProps {
-	trials: Array<TableObj>;
-	searchSpace: SearchSpace;
-	whichChart: string;
+    trials: Array<TableObj>;
+    searchSpace: SearchSpace;
+    whichChart: string;
 }
 
 class Para extends React.Component<ParaProps, ParaState> {
-	private paraRef = React.createRef<HTMLDivElement>();
-	private pcs: any;
+    private paraRef = React.createRef<HTMLDivElement>();
+    private pcs: any;
 
-	private chartMulineStyle = {
-		width: '100%',
-		height: 392,
-		margin: '0 auto'
-	};
-	private innerChartMargins = {
-		top: 32,
-		right: 20,
-		bottom: 20,
-		left: 28
-	};
+    private chartMulineStyle = {
+        width: '100%',
+        height: 392,
+        margin: '0 auto'
+    };
+    private innerChartMargins = {
+        top: 32,
+        right: 20,
+        bottom: 20,
+        left: 28
+    };
 
-	constructor(props: ParaProps) {
-		super(props);
-		this.state = {
-			dimName: [],
-			primaryMetricKey: 'default',
-			selectedPercent: '1',
-			noChart: true
-		};
-	}
+    constructor(props: ParaProps) {
+        super(props);
+        this.state = {
+            dimName: [],
+            primaryMetricKey: 'default',
+            selectedPercent: '1',
+            noChart: true
+        };
+    }
 
-	// get percent value number
-	percentNum = (event: React.FormEvent<HTMLDivElement>, item?: IDropdownOption): void => {
-		if (item !== undefined) {
-			this.setState({ selectedPercent: item.key.toString() }, () => {
-				this.renderParallelCoordinates();
-			});
-		}
-	};
+    // get percent value number
+    percentNum = (event: React.FormEvent<HTMLDivElement>, item?: IDropdownOption): void => {
+        if (item !== undefined) {
+            this.setState({ selectedPercent: item.key.toString() }, () => {
+                this.renderParallelCoordinates();
+            });
+        }
+    };
 
-	// select all final keys
-	updateEntries = (event: React.FormEvent<HTMLDivElement>, item: any): void => {
-		if (item !== undefined) {
-			this.setState({ primaryMetricKey: item.key }, () => {
-				this.renderParallelCoordinates();
-			});
-		}
-	};
+    // select all final keys
+    updateEntries = (event: React.FormEvent<HTMLDivElement>, item: any): void => {
+        if (item !== undefined) {
+            this.setState({ primaryMetricKey: item.key }, () => {
+                this.renderParallelCoordinates();
+            });
+        }
+    };
 
-	componentDidMount(): void {
-		this.renderParallelCoordinates();
-	}
+    componentDidMount(): void {
+        this.renderParallelCoordinates();
+    }
 
-	componentDidUpdate(prevProps: ParaProps): void {
-		// FIXME: redundant update
-		if (this.props.trials !== prevProps.trials || this.props.searchSpace !== prevProps.searchSpace) {
-			const { whichChart } = this.props;
-			if (whichChart === 'Hyper-parameter') {
-				this.renderParallelCoordinates();
-			}
-		}
-	}
+    componentDidUpdate(prevProps: ParaProps): void {
+        // FIXME: redundant update
+        if (this.props.trials !== prevProps.trials || this.props.searchSpace !== prevProps.searchSpace) {
+            const { whichChart } = this.props;
+            if (whichChart === 'Hyper-parameter') {
+                this.renderParallelCoordinates();
+            }
+        }
+    }
 
-	render(): React.ReactNode {
-		const { selectedPercent, noChart } = this.state;
+    render(): React.ReactNode {
+        const { selectedPercent, noChart } = this.state;
 
-		return (
-			<div className='parameter'>
-				<Stack horizontal className='para-filter' horizontalAlign='end'>
-					<Dropdown
-						selectedKey={selectedPercent}
-						onChange={this.percentNum}
-						options={[
-							{ key: '0.01', text: 'Top 1%' },
-							{ key: '0.05', text: 'Top 5%' },
-							{ key: '0.2', text: 'Top 20%' },
-							{ key: '1', text: 'Top 100%' }
-						]}
-						styles={{ dropdown: { width: 120 } }}
-						className='para-filter-percent'
-					/>
-					{this.finalKeysDropdown()}
-				</Stack>
-				<div className='parcoords' style={this.chartMulineStyle} ref={this.paraRef} />
-				{noChart && <div className='nodata'>No data</div>}
-			</div>
-		);
-	}
+        return (
+            <div className='parameter'>
+                <Stack horizontal className='para-filter' horizontalAlign='end'>
+                    <Dropdown
+                        selectedKey={selectedPercent}
+                        onChange={this.percentNum}
+                        options={[
+                            { key: '0.01', text: 'Top 1%' },
+                            { key: '0.05', text: 'Top 5%' },
+                            { key: '0.2', text: 'Top 20%' },
+                            { key: '1', text: 'Top 100%' }
+                        ]}
+                        styles={{ dropdown: { width: 120 } }}
+                        className='para-filter-percent'
+                    />
+                    {this.finalKeysDropdown()}
+                </Stack>
+                <div className='parcoords' style={this.chartMulineStyle} ref={this.paraRef} />
+                {noChart && <div className='nodata'>No data</div>}
+            </div>
+        );
+    }
 
-	private finalKeysDropdown(): any {
-		const { primaryMetricKey } = this.state;
-		if (TRIALS.finalKeys().length === 1) {
-			return null;
-		} else {
-			const finalKeysDropdown: any = [];
-			TRIALS.finalKeys().forEach(item => {
-				finalKeysDropdown.push({
-					key: item,
-					text: item
-				});
-			});
-			return (
-				<div>
-					<span className='para-filter-text para-filter-middle'>Metrics</span>
-					<Dropdown
-						selectedKey={primaryMetricKey}
-						options={finalKeysDropdown}
-						onChange={this.updateEntries}
-						styles={{ root: { width: 150, display: 'inline-block' } }}
-						className='para-filter-percent'
-					/>
-				</div>
-			);
-		}
-	}
+    private finalKeysDropdown(): any {
+        const { primaryMetricKey } = this.state;
+        if (TRIALS.finalKeys().length === 1) {
+            return null;
+        } else {
+            const finalKeysDropdown: any = [];
+            TRIALS.finalKeys().forEach(item => {
+                finalKeysDropdown.push({
+                    key: item,
+                    text: item
+                });
+            });
+            return (
+                <div>
+                    <span className='para-filter-text para-filter-middle'>Metrics</span>
+                    <Dropdown
+                        selectedKey={primaryMetricKey}
+                        options={finalKeysDropdown}
+                        onChange={this.updateEntries}
+                        styles={{ root: { width: 150, display: 'inline-block' } }}
+                        className='para-filter-percent'
+                    />
+                </div>
+            );
+        }
+    }
 
-	/**
-	 * Render the parallel coordinates. Using trial data as base and leverage
-	 * information from search space at a best effort basis.
-	 * @param source Array of trial data
-	 * @param searchSpace Search space
-	 */
-	private renderParallelCoordinates(): void {
-		const { searchSpace } = this.props;
-		const percent = parseFloat(this.state.selectedPercent);
-		const { primaryMetricKey } = this.state;
+    /**
+     * Render the parallel coordinates. Using trial data as base and leverage
+     * information from search space at a best effort basis.
+     * @param source Array of trial data
+     * @param searchSpace Search space
+     */
+    private renderParallelCoordinates(): void {
+        const { searchSpace } = this.props;
+        const percent = parseFloat(this.state.selectedPercent);
+        const { primaryMetricKey } = this.state;
 
-		const inferredSearchSpace = TRIALS.inferredSearchSpace(searchSpace);
-		const inferredMetricSpace = TRIALS.inferredMetricSpace();
-		let convertedTrials = this.getTrialsAsObjectList(inferredSearchSpace, inferredMetricSpace);
+        const inferredSearchSpace = TRIALS.inferredSearchSpace(searchSpace);
+        const inferredMetricSpace = TRIALS.inferredMetricSpace();
+        let convertedTrials = this.getTrialsAsObjectList(inferredSearchSpace, inferredMetricSpace);
 
-		const dimensions: [any, any][] = [];
-		let colorDim: string | undefined = undefined,
-			colorScale: any = undefined;
-		// treat every axis as numeric to fit for brush
-		for (const [k, v] of inferredSearchSpace.axes) {
-			dimensions.push([
-				k,
-				{
-					type: 'number',
-					yscale: this.convertToD3Scale(v)
-				}
-			]);
-		}
-		for (const [k, v] of inferredMetricSpace.axes) {
-			const scale = this.convertToD3Scale(v);
-			if (k === primaryMetricKey && scale !== undefined && scale.interpolate) {
-				// set color for primary metrics
-				// `colorScale` is used to produce a color range, while `scale` is to produce a pixel range
-				colorScale = this.convertToD3Scale(v, false);
-				convertedTrials.sort((a, b) => (EXPERIMENT.optimizeMode === 'minimize' ? a[k] - b[k] : b[k] - a[k]));
-				// filter top trials
-				if (percent != 1) {
-					const keptTrialNum = Math.max(Math.ceil(convertedTrials.length * percent), 1);
-					convertedTrials = convertedTrials.slice(0, keptTrialNum);
-					const domain = d3.extent(convertedTrials, item => item[k]);
-					scale.domain([domain[0], domain[1]]);
-					colorScale.domain([domain[0], domain[1]]);
-					if (colorScale !== undefined) {
-						colorScale.domain(domain);
-					}
-				}
-				// reverse the converted trials to show the top ones upfront
-				convertedTrials.reverse();
-				const assignColors = (scale: any): void => {
-					scale.range([0, 1]); // fake a range to perform invert
-					const [scaleMin, scaleMax] = scale.domain();
-					const pivot = scale.invert(0.5);
-					scale
-						.domain([scaleMin, pivot, scaleMax])
-						.range(['#90EE90', '#FFC400', '#CA0000'])
-						.interpolate(d3.interpolateHsl);
-				};
-				assignColors(colorScale);
-				colorDim = k;
-			}
-			dimensions.push([
-				k,
-				{
-					type: 'number',
-					yscale: scale
-				}
-			]);
-		}
+        const dimensions: [any, any][] = [];
+        let colorDim: string | undefined = undefined,
+            colorScale: any = undefined;
+        // treat every axis as numeric to fit for brush
+        for (const [k, v] of inferredSearchSpace.axes) {
+            dimensions.push([
+                k,
+                {
+                    type: 'number',
+                    yscale: this.convertToD3Scale(v)
+                }
+            ]);
+        }
+        for (const [k, v] of inferredMetricSpace.axes) {
+            const scale = this.convertToD3Scale(v);
+            if (k === primaryMetricKey && scale !== undefined && scale.interpolate) {
+                // set color for primary metrics
+                // `colorScale` is used to produce a color range, while `scale` is to produce a pixel range
+                colorScale = this.convertToD3Scale(v, false);
+                convertedTrials.sort((a, b) => (EXPERIMENT.optimizeMode === 'minimize' ? a[k] - b[k] : b[k] - a[k]));
+                // filter top trials
+                if (percent != 1) {
+                    const keptTrialNum = Math.max(Math.ceil(convertedTrials.length * percent), 1);
+                    convertedTrials = convertedTrials.slice(0, keptTrialNum);
+                    const domain = d3.extent(convertedTrials, item => item[k]);
+                    scale.domain([domain[0], domain[1]]);
+                    colorScale.domain([domain[0], domain[1]]);
+                    if (colorScale !== undefined) {
+                        colorScale.domain(domain);
+                    }
+                }
+                // reverse the converted trials to show the top ones upfront
+                convertedTrials.reverse();
+                const assignColors = (scale: any): void => {
+                    scale.range([0, 1]); // fake a range to perform invert
+                    const [scaleMin, scaleMax] = scale.domain();
+                    const pivot = scale.invert(0.5);
+                    scale
+                        .domain([scaleMin, pivot, scaleMax])
+                        .range(['#90EE90', '#FFC400', '#CA0000'])
+                        .interpolate(d3.interpolateHsl);
+                };
+                assignColors(colorScale);
+                colorDim = k;
+            }
+            dimensions.push([
+                k,
+                {
+                    type: 'number',
+                    yscale: scale
+                }
+            ]);
+        }
 
-		if (convertedTrials.length === 0) {
-			return;
-		}
+        if (convertedTrials.length === 0) {
+            return;
+        }
 
-		const firstRun = this.pcs === undefined;
-		if (firstRun) {
-			this.pcs = ParCoords()(this.paraRef.current);
-		}
-		this.pcs
-			.data(convertedTrials)
-			.dimensions(dimensions.reduce((obj, entry) => ({ ...obj, [entry[0]]: entry[1] }), {}));
-		if (firstRun) {
-			this.pcs
-				.margin(this.innerChartMargins)
-				.alphaOnBrushed(0.2)
-				.smoothness(0.1)
-				.brushMode('1D-axes')
-				.reorderable()
-				.interactive();
-		}
-		if (colorScale !== undefined) {
-			this.pcs.color(d => (colorScale as any)(d[colorDim as any]));
-		}
-		this.pcs.render();
-		if (firstRun) {
-			this.setState({ noChart: false });
-		}
-	}
+        const firstRun = this.pcs === undefined;
+        if (firstRun) {
+            this.pcs = ParCoords()(this.paraRef.current);
+        }
+        this.pcs
+            .data(convertedTrials)
+            .dimensions(dimensions.reduce((obj, entry) => ({ ...obj, [entry[0]]: entry[1] }), {}));
+        if (firstRun) {
+            this.pcs
+                .margin(this.innerChartMargins)
+                .alphaOnBrushed(0.2)
+                .smoothness(0.1)
+                .brushMode('1D-axes')
+                .reorderable()
+                .interactive();
+        }
+        if (colorScale !== undefined) {
+            this.pcs.color(d => (colorScale as any)(d[colorDim as any]));
+        }
+        this.pcs.render();
+        if (firstRun) {
+            this.setState({ noChart: false });
+        }
+    }
 
-	private getTrialsAsObjectList(inferredSearchSpace: MultipleAxes, inferredMetricSpace: MultipleAxes): {}[] {
-		const { trials } = this.props;
-		const succeededTrials = trials.filter(filterByStatus);
+    private getTrialsAsObjectList(inferredSearchSpace: MultipleAxes, inferredMetricSpace: MultipleAxes): {}[] {
+        const { trials } = this.props;
+        const succeededTrials = trials.filter(filterByStatus);
 
-		return succeededTrials.map(s => {
-			const entries = Array.from(s.parameters(inferredSearchSpace).entries());
-			entries.push(...Array.from(s.metrics(inferredMetricSpace).entries()));
-			const ret = {};
-			for (const [k, v] of entries) {
-				ret[k.fullName] = v;
-			}
-			return ret;
-		});
-	}
+        return succeededTrials.map(s => {
+            const entries = Array.from(s.parameters(inferredSearchSpace).entries());
+            entries.push(...Array.from(s.metrics(inferredMetricSpace).entries()));
+            const ret = {};
+            for (const [k, v] of entries) {
+                ret[k.fullName] = v;
+            }
+            return ret;
+        });
+    }
 
-	private getRange(): [number, number] {
-		// Documentation is lacking.
-		// Reference: https://github.com/syntagmatic/parallel-coordinates/issues/308
-		// const range = this.pcs.height() - this.pcs.margin().top - this.pcs.margin().bottom;
-		const range = this.chartMulineStyle.height - this.innerChartMargins.top - this.innerChartMargins.bottom;
-		return [range, 1];
-	}
+    private getRange(): [number, number] {
+        // Documentation is lacking.
+        // Reference: https://github.com/syntagmatic/parallel-coordinates/issues/308
+        // const range = this.pcs.height() - this.pcs.margin().top - this.pcs.margin().bottom;
+        const range = this.chartMulineStyle.height - this.innerChartMargins.top - this.innerChartMargins.bottom;
+        return [range, 1];
+    }
 
-	private convertToD3Scale(axis: SingleAxis, initRange: boolean = true): any {
-		const padLinear = ([x0, x1], k = 0.1): [number, number] => {
-			const dx = ((x1 - x0) * k) / 2;
-			return [x0 - dx, x1 + dx];
-		};
-		const padLog = ([x0, x1], k = 0.1): [number, number] => {
-			const [y0, y1] = padLinear([Math.log(x0), Math.log(x1)], k);
-			return [Math.exp(y0), Math.exp(y1)];
-		};
-		let scaleInst: any = undefined;
-		if (axis.scale === 'ordinal') {
-			if (axis.nested) {
-				// TODO: handle nested entries
-				scaleInst = d3
-					.scalePoint()
-					.domain(Array.from(axis.domain.keys()))
-					.padding(0.2);
-			} else {
-				scaleInst = d3
-					.scalePoint()
-					.domain(axis.domain)
-					.padding(0.2);
-			}
-		} else if (axis.scale === 'log') {
-			scaleInst = d3.scaleLog().domain(padLog(axis.domain));
-		} else if (axis.scale === 'linear') {
-			scaleInst = d3.scaleLinear().domain(padLinear(axis.domain));
-		}
-		if (initRange) {
-			scaleInst = scaleInst.range(this.getRange());
-		}
-		return scaleInst;
-	}
+    private convertToD3Scale(axis: SingleAxis, initRange: boolean = true): any {
+        const padLinear = ([x0, x1], k = 0.1): [number, number] => {
+            const dx = ((x1 - x0) * k) / 2;
+            return [x0 - dx, x1 + dx];
+        };
+        const padLog = ([x0, x1], k = 0.1): [number, number] => {
+            const [y0, y1] = padLinear([Math.log(x0), Math.log(x1)], k);
+            return [Math.exp(y0), Math.exp(y1)];
+        };
+        let scaleInst: any = undefined;
+        if (axis.scale === 'ordinal') {
+            if (axis.nested) {
+                // TODO: handle nested entries
+                scaleInst = d3
+                    .scalePoint()
+                    .domain(Array.from(axis.domain.keys()))
+                    .padding(0.2);
+            } else {
+                scaleInst = d3
+                    .scalePoint()
+                    .domain(axis.domain)
+                    .padding(0.2);
+            }
+        } else if (axis.scale === 'log') {
+            scaleInst = d3.scaleLog().domain(padLog(axis.domain));
+        } else if (axis.scale === 'linear') {
+            scaleInst = d3.scaleLinear().domain(padLinear(axis.domain));
+        }
+        if (initRange) {
+            scaleInst = scaleInst.range(this.getRange());
+        }
+        return scaleInst;
+    }
 }
 
 export default Para;
diff --git a/src/webui/src/components/trial-detail/TableList.tsx b/src/webui/src/components/trial-detail/TableList.tsx
index 3c3d6af97f..de5d839f99 100644
--- a/src/webui/src/components/trial-detail/TableList.tsx
+++ b/src/webui/src/components/trial-detail/TableList.tsx
@@ -2,20 +2,20 @@ import * as React from 'react';
 import axios from 'axios';
 import ReactEcharts from 'echarts-for-react';
 import {
-	Stack,
-	Dropdown,
-	DetailsList,
-	IDetailsListProps,
-	DetailsListLayoutMode,
-	PrimaryButton,
-	Modal,
-	IDropdownOption,
-	IColumn,
-	Selection,
-	SelectionMode,
-	IconButton,
-	TooltipHost,
-	IStackTokens
+    Stack,
+    Dropdown,
+    DetailsList,
+    IDetailsListProps,
+    DetailsListLayoutMode,
+    PrimaryButton,
+    Modal,
+    IDropdownOption,
+    IColumn,
+    Selection,
+    SelectionMode,
+    IconButton,
+    TooltipHost,
+    IStackTokens
 } from 'office-ui-fabric-react';
 import ReactPaginate from 'react-paginate';
 import { LineChart, blocked, copy } from '../Buttons/Icon';
@@ -42,740 +42,740 @@ require('echarts/lib/chart/line');
 require('echarts/lib/component/tooltip');
 require('echarts/lib/component/title');
 echarts.registerTheme('my_theme', {
-	color: '#3c8dbc'
+    color: '#3c8dbc'
 });
 
 const horizontalGapStackTokens: IStackTokens = {
-	childrenGap: 20,
-	padding: 10
+    childrenGap: 20,
+    padding: 10
 };
 
 interface TableListProps {
-	pageSize: number;
-	tableSource: Array<TableRecord>;
-	columnList: string[]; // user select columnKeys
-	changeColumn: (val: string[]) => void;
-	trialsUpdateBroadcast: number;
+    pageSize: number;
+    tableSource: Array<TableRecord>;
+    columnList: string[]; // user select columnKeys
+    changeColumn: (val: string[]) => void;
+    trialsUpdateBroadcast: number;
 }
 
 interface SortInfo {
-	field: string;
-	isDescend?: boolean;
+    field: string;
+    isDescend?: boolean;
 }
 
 interface TableListState {
-	intermediateOption: object;
-	modalVisible: boolean;
-	isObjFinal: boolean;
-	isShowColumn: boolean;
-	selectRows: Array<any>;
-	isShowCompareModal: boolean;
-	selectedRowKeys: string[] | number[];
-	intermediateData: Array<object>; // a trial's intermediate results (include dict)
-	intermediateId: string;
-	intermediateOtherKeys: string[];
-	isShowCustomizedModal: boolean;
-	copyTrialId: string; // user copy trial to submit a new customized trial
-	isCalloutVisible: boolean; // kill job button callout [kill or not kill job window]
-	intermediateKey: string; // intermeidate modal: which key is choosed.
-	isExpand: boolean;
-	modalIntermediateWidth: number;
-	modalIntermediateHeight: number;
-	tableColumns: IColumn[];
-	allColumnList: string[];
-	tableSourceForSort: Array<TableRecord>;
-	sortMessage: SortInfo;
-	offset: number;
-	data: Array<TableRecord>;
-	perPage: number;
-	currentPage: number;
-	pageCount: number;
+    intermediateOption: object;
+    modalVisible: boolean;
+    isObjFinal: boolean;
+    isShowColumn: boolean;
+    selectRows: Array<any>;
+    isShowCompareModal: boolean;
+    selectedRowKeys: string[] | number[];
+    intermediateData: Array<object>; // a trial's intermediate results (include dict)
+    intermediateId: string;
+    intermediateOtherKeys: string[];
+    isShowCustomizedModal: boolean;
+    copyTrialId: string; // user copy trial to submit a new customized trial
+    isCalloutVisible: boolean; // kill job button callout [kill or not kill job window]
+    intermediateKey: string; // intermeidate modal: which key is choosed.
+    isExpand: boolean;
+    modalIntermediateWidth: number;
+    modalIntermediateHeight: number;
+    tableColumns: IColumn[];
+    allColumnList: string[];
+    tableSourceForSort: Array<TableRecord>;
+    sortMessage: SortInfo;
+    offset: number;
+    data: Array<TableRecord>;
+    perPage: number;
+    currentPage: number;
+    pageCount: number;
 }
 
 class TableList extends React.Component<TableListProps, TableListState> {
-	public intervalTrialLog = 10;
-	public trialId!: string;
-
-	constructor(props: TableListProps) {
-		super(props);
-
-		this.state = {
-			intermediateOption: {},
-			modalVisible: false,
-			isObjFinal: false,
-			isShowColumn: false,
-			isShowCompareModal: false,
-			selectRows: [],
-			selectedRowKeys: [], // close selected trial message after modal closed
-			intermediateData: [],
-			intermediateId: '',
-			intermediateOtherKeys: [],
-			isShowCustomizedModal: false,
-			isCalloutVisible: false,
-			copyTrialId: '',
-			intermediateKey: 'default',
-			isExpand: false,
-			modalIntermediateWidth: window.innerWidth,
-			modalIntermediateHeight: window.innerHeight,
-			tableColumns: this.initTableColumnList(this.props.columnList),
-			allColumnList: this.getAllColumnKeys(),
-			sortMessage: { field: '', isDescend: false },
-			offset: 0,
-			data: [],
-			perPage: 20,
-			currentPage: 0,
-			pageCount: 0,
-			tableSourceForSort: this.props.tableSource
-		};
-	}
-
-	// sort for table column
-	onColumnClick = (ev: React.MouseEvent<HTMLElement>, getColumn: IColumn): void => {
-		const { tableColumns, tableSourceForSort } = this.state;
-		const newColumns: IColumn[] = tableColumns.slice();
-		const currColumn: IColumn = newColumns.filter(item => getColumn.key === item.key)[0];
-		newColumns.forEach((newCol: IColumn) => {
-			if (newCol === currColumn) {
-				currColumn.isSortedDescending = !currColumn.isSortedDescending;
-				currColumn.isSorted = true;
-			} else {
-				newCol.isSorted = false;
-				newCol.isSortedDescending = true;
-			}
-		});
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		const newItems = this.copyAndSort(tableSourceForSort, currColumn.fieldName!, currColumn.isSortedDescending);
-		this.setState({
-			tableColumns: newColumns,
-			tableSourceForSort: newItems,
-			sortMessage: { field: getColumn.key, isDescend: currColumn.isSortedDescending }
-		});
-	};
-
-	private copyAndSort<T>(items: T[], columnKey: string, isSortedDescending?: boolean): any {
-		const key = columnKey as keyof T;
-		return items.slice(0).sort(function(a: T, b: T): any {
-			if (a[key] === undefined) {
-				return 1;
-			}
-			if (b[key] === undefined) {
-				return -1;
-			}
-			return (isSortedDescending ? a[key] < b[key] : a[key] > b[key]) ? 1 : -1;
-		});
-	}
-
-	AccuracyColumnConfig: any = {
-		name: 'Default metric',
-		className: 'leftTitle',
-		key: 'latestAccuracy',
-		fieldName: 'latestAccuracy',
-		minWidth: 200,
-		maxWidth: 300,
-		isResizable: true,
-		data: 'number',
-		onColumnClick: this.onColumnClick,
-		onRender: (item): React.ReactNode => (
-			<TooltipHost content={item.formattedLatestAccuracy}>
-				<div className='ellipsis'>{item.formattedLatestAccuracy}</div>
-			</TooltipHost>
-		)
-	};
-
-	SequenceIdColumnConfig: any = {
-		name: 'Trial No.',
-		key: 'sequenceId',
-		fieldName: 'sequenceId',
-		minWidth: 80,
-		maxWidth: 240,
-		className: 'tableHead',
-		data: 'number',
-		onColumnClick: this.onColumnClick
-	};
-
-	IdColumnConfig: any = {
-		name: 'ID',
-		key: 'id',
-		fieldName: 'id',
-		minWidth: 150,
-		maxWidth: 200,
-		isResizable: true,
-		data: 'string',
-		onColumnClick: this.onColumnClick,
-		className: 'tableHead leftTitle'
-	};
-
-	StartTimeColumnConfig: any = {
-		name: 'Start time',
-		key: 'startTime',
-		fieldName: 'startTime',
-		minWidth: 150,
-		maxWidth: 400,
-		isResizable: true,
-		data: 'number',
-		onColumnClick: this.onColumnClick,
-		onRender: (record): React.ReactNode => <span>{formatTimestamp(record.startTime)}</span>
-	};
-
-	EndTimeColumnConfig: any = {
-		name: 'End time',
-		key: 'endTime',
-		fieldName: 'endTime',
-		minWidth: 200,
-		maxWidth: 400,
-		isResizable: true,
-		data: 'number',
-		onColumnClick: this.onColumnClick,
-		onRender: (record): React.ReactNode => <span>{formatTimestamp(record.endTime, '--')}</span>
-	};
-
-	DurationColumnConfig: any = {
-		name: 'Duration',
-		key: 'duration',
-		fieldName: 'duration',
-		minWidth: 150,
-		maxWidth: 300,
-		isResizable: true,
-		data: 'number',
-		onColumnClick: this.onColumnClick,
-		onRender: (record): React.ReactNode => <span className='durationsty'>{convertDuration(record.duration)}</span>
-	};
-
-	StatusColumnConfig: any = {
-		name: 'Status',
-		key: 'status',
-		fieldName: 'status',
-		className: 'tableStatus',
-		minWidth: 150,
-		maxWidth: 250,
-		isResizable: true,
-		data: 'string',
-		onColumnClick: this.onColumnClick,
-		onRender: (record): React.ReactNode => <span className={`${record.status} commonStyle`}>{record.status}</span>
-	};
-
-	IntermediateCountColumnConfig: any = {
-		name: 'Intermediate result',
-		dataIndex: 'intermediateCount',
-		fieldName: 'intermediateCount',
-		minWidth: 150,
-		maxWidth: 200,
-		isResizable: true,
-		data: 'number',
-		onColumnClick: this.onColumnClick,
-		onRender: (record): React.ReactNode => <span>{`#${record.intermediateCount}`}</span>
-	};
-
-	showIntermediateModal = async (record: TrialJobInfo, event: React.SyntheticEvent<EventTarget>): Promise<void> => {
-		event.preventDefault();
-		event.stopPropagation();
-		const res = await axios.get(`${MANAGER_IP}/metric-data/${record.id}`);
-		if (res.status === 200) {
-			const intermediateArr: number[] = [];
-			// support intermediate result is dict because the last intermediate result is
-			// final result in a succeed trial, it may be a dict.
-			// get intermediate result dict keys array
-			const { intermediateKey } = this.state;
-			const otherkeys: string[] = [];
-			const metricDatas = res.data;
-			if (metricDatas.length !== 0) {
-				// just add type=number keys
-				const intermediateMetrics = parseMetrics(metricDatas[0].data);
-				for (const key in intermediateMetrics) {
-					if (typeof intermediateMetrics[key] === 'number') {
-						otherkeys.push(key);
-					}
-				}
-			}
-			// intermediateArr just store default val
-			metricDatas.map(item => {
-				if (item.type === 'PERIODICAL') {
-					const temp = parseMetrics(item.data);
-					if (typeof temp === 'object') {
-						intermediateArr.push(temp[intermediateKey]);
-					} else {
-						intermediateArr.push(temp);
-					}
-				}
-			});
-			const intermediate = intermediateGraphOption(intermediateArr, record.id);
-			this.setState({
-				intermediateData: res.data, // store origin intermediate data for a trial
-				intermediateOption: intermediate,
-				intermediateOtherKeys: otherkeys,
-				intermediateId: record.id
-			});
-		}
-		this.setState({ modalVisible: true });
-	};
-
-	// intermediate button click -> intermediate graph for each trial
-	// support intermediate is dict
-	selectOtherKeys = (event: React.FormEvent<HTMLDivElement>, item?: IDropdownOption): void => {
-		if (item !== undefined) {
-			const value = item.text;
-			const isShowDefault: boolean = value === 'default' ? true : false;
-			const { intermediateData, intermediateId } = this.state;
-			const intermediateArr: number[] = [];
-			// just watch default key-val
-			if (isShowDefault === true) {
-				Object.keys(intermediateData).map(item => {
-					if (intermediateData[item].type === 'PERIODICAL') {
-						const temp = parseMetrics(intermediateData[item].data);
-						if (typeof temp === 'object') {
-							intermediateArr.push(temp[value]);
-						} else {
-							intermediateArr.push(temp);
-						}
-					}
-				});
-			} else {
-				Object.keys(intermediateData).map(item => {
-					const temp = parseMetrics(intermediateData[item].data);
-					if (typeof temp === 'object') {
-						intermediateArr.push(temp[value]);
-					}
-				});
-			}
-			const intermediate = intermediateGraphOption(intermediateArr, intermediateId);
-			// re-render
-			this.setState({
-				intermediateKey: value,
-				intermediateOption: intermediate
-			});
-		}
-	};
-
-	hideIntermediateModal = (): void => {
-		this.setState({
-			modalVisible: false
-		});
-	};
-
-	hideShowColumnModal = (): void => {
-		this.setState(() => ({ isShowColumn: false }));
-	};
-
-	// click add column btn, just show the modal of addcolumn
-	addColumn = (): void => {
-		// show user select check button
-		this.setState(() => ({ isShowColumn: true }));
-	};
-
-	fillSelectedRowsTostate = (selected: number[] | string[], selectedRows: Array<TableRecord>): void => {
-		this.setState({ selectRows: selectedRows, selectedRowKeys: selected });
-	};
-
-	// open Compare-modal
-	compareBtn = (): void => {
-		const { selectRows } = this.state;
-		if (selectRows.length === 0) {
-			alert('Please select datas you want to compare!');
-		} else {
-			this.setState({ isShowCompareModal: true });
-		}
-	};
-
-	// close Compare-modal
-	hideCompareModal = (): void => {
-		// close modal. clear select rows data, clear selected track
-		this.setState({ isShowCompareModal: false, selectedRowKeys: [], selectRows: [] });
-	};
-
-	// open customized trial modal
-	private setCustomizedTrial = (trialId: string, event: React.SyntheticEvent<EventTarget>): void => {
-		event.preventDefault();
-		event.stopPropagation();
-		this.setState({
-			isShowCustomizedModal: true,
-			copyTrialId: trialId
-		});
-	};
-
-	private closeCustomizedTrial = (): void => {
-		this.setState({
-			isShowCustomizedModal: false,
-			copyTrialId: ''
-		});
-	};
-
-	private onWindowResize = (): void => {
-		this.setState(() => ({
-			modalIntermediateHeight: window.innerHeight,
-			modalIntermediateWidth: window.innerWidth
-		}));
-	};
-
-	private onRenderRow: IDetailsListProps['onRenderRow'] = props => {
-		if (props) {
-			return <Details detailsProps={props} />;
-		}
-		return null;
-	};
-
-	private getSelectedRows = new Selection({
-		onSelectionChanged: (): void => {
-			this.setState(() => ({ selectRows: this.getSelectedRows.getSelection() }));
-		}
-	});
-
-	// trial parameters & dict final keys & Trial No. Id ...
-	private getAllColumnKeys = (): string[] => {
-		const tableSource: Array<TableRecord> = JSON.parse(JSON.stringify(this.props.tableSource));
-		// parameter as table column
-		const parameterStr: string[] = [];
-		if (!EXPERIMENT.isNestedExp()) {
-			if (tableSource.length > 0) {
-				const trialMess = TRIALS.getTrial(tableSource[0].id);
-				const trial = trialMess.description.parameters;
-				const parameterColumn: string[] = Object.keys(trial);
-				parameterColumn.forEach(value => {
-					parameterStr.push(`${value} (search space)`);
-				});
-			}
-		}
-		// concat trial all final keys and remove dup "default" val, return list
-		const finalKeysList = TRIALS.finalKeys().filter(item => item !== 'default');
-		return COLUMNPro.concat(parameterStr).concat(finalKeysList);
-	};
-
-	// get IColumn[]
-	// when user click [Add Column] need to use the function
-	private initTableColumnList = (columnList: string[]): IColumn[] => {
-		// const { columnList } = this.props;
-		const disabledAddCustomizedTrial = ['DONE', 'ERROR', 'STOPPED'].includes(EXPERIMENT.status);
-		const showColumn: IColumn[] = [];
-		for (const item of columnList) {
-			const paraColumn = item.match(/ \(search space\)$/);
-			let result;
-			if (paraColumn !== null) {
-				result = paraColumn.input;
-			}
-			switch (item) {
-				case 'Trial No.':
-					showColumn.push(this.SequenceIdColumnConfig);
-					break;
-				case 'ID':
-					showColumn.push(this.IdColumnConfig);
-					break;
-				case 'Start time':
-					showColumn.push(this.StartTimeColumnConfig);
-					break;
-				case 'End time':
-					showColumn.push(this.EndTimeColumnConfig);
-					break;
-				case 'Duration':
-					showColumn.push(this.DurationColumnConfig);
-					break;
-				case 'Status':
-					showColumn.push(this.StatusColumnConfig);
-					break;
-				case 'Intermediate result':
-					showColumn.push(this.IntermediateCountColumnConfig);
-					break;
-				case 'Default':
-					showColumn.push(this.AccuracyColumnConfig);
-					break;
-				case 'Operation':
-					showColumn.push({
-						name: 'Operation',
-						key: 'operation',
-						fieldName: 'operation',
-						minWidth: 160,
-						maxWidth: 200,
-						isResizable: true,
-						className: 'detail-table',
-						onRender: (record: any) => {
-							const trialStatus = record.status;
-							const flag: boolean = trialStatus === 'RUNNING' || trialStatus === 'UNKNOWN' ? false : true;
-							return (
-								<Stack className='detail-button' horizontal>
-									{/* see intermediate result graph */}
-									<PrimaryButton
-										className='detail-button-operation'
-										title='Intermediate'
-										onClick={this.showIntermediateModal.bind(this, record)}
-									>
-										{LineChart}
-									</PrimaryButton>
-									{/* kill job */}
-									{flag ? (
-										<PrimaryButton className='detail-button-operation' disabled={true} title='kill'>
-											{blocked}
-										</PrimaryButton>
-									) : (
-										<KillJob trial={record} />
-									)}
-									{/* Add a new trial-customized trial */}
-									<PrimaryButton
-										className='detail-button-operation'
-										title='Customized trial'
-										onClick={this.setCustomizedTrial.bind(this, record.id)}
-										disabled={disabledAddCustomizedTrial}
-									>
-										{copy}
-									</PrimaryButton>
-								</Stack>
-							);
-						}
-					});
-					break;
-				case result:
-					// remove SEARCH_SPACE title
-					// const realItem = item.replace(' (search space)', '');
-					showColumn.push({
-						name: item.replace(' (search space)', ''),
-						key: item,
-						fieldName: item,
-						minWidth: 150,
-						onRender: (record: TableRecord) => {
-							const eachTrial = TRIALS.getTrial(record.id);
-							return <span>{eachTrial.description.parameters[item.replace(' (search space)', '')]}</span>;
-						}
-					});
-					break;
-				default:
-					showColumn.push({
-						name: item,
-						key: item,
-						fieldName: item,
-						minWidth: 100,
-						onRender: (record: TableRecord) => {
-							const accDictionary = record.accDictionary;
-							let other = '';
-							if (accDictionary !== undefined) {
-								other = accDictionary[item].toString();
-							}
-							return (
-								<TooltipHost content={other}>
-									<div className='ellipsis'>{other}</div>
-								</TooltipHost>
-							);
-						}
-					});
-			}
-		}
-		return showColumn;
-	};
-
-	componentDidMount(): void {
-		window.addEventListener('resize', this.onWindowResize);
-		this.updateData();
-	}
-
-	componentDidUpdate(prevProps: TableListProps): void {
-		if (this.props.columnList !== prevProps.columnList || this.props.tableSource !== prevProps.tableSource) {
-			const { columnList } = this.props;
-			this.setState(
-				{
-					tableColumns: this.initTableColumnList(columnList),
-					allColumnList: this.getAllColumnKeys()
-				},
-				() => {
-					this.updateData();
-				}
-			);
-		}
-	}
-
-	updateData(): void {
-		const tableSource: Array<TableRecord> = JSON.parse(JSON.stringify(this.props.tableSource));
-
-		const tableSlice = tableSource.slice(this.state.offset, this.state.offset + this.state.perPage);
-
-		this.setState({
-			tableSourceForSort: tableSlice,
-			pageCount: Math.ceil(tableSource.length / this.state.perPage)
-		});
-	}
-
-	handlePageClick = (evt: any): void => {
-		const selectedPage = evt.selected;
-		const offset = selectedPage * this.state.perPage;
-
-		this.setState(
-			{
-				currentPage: selectedPage,
-				offset: offset
-			},
-			() => {
-				this.updateData();
-			}
-		);
-	};
-
-	updateperPage = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
-		// clear input value and re-render table
-		if (item !== undefined) {
-			this.setState(
-				{
-					perPage: item.key === 'all' ? this.props.tableSource.length : Number(item.key)
-				},
-				() => {
-					this.updateData();
-				}
-			);
-		}
-	};
-
-	render(): React.ReactNode {
-		const {
-			intermediateKey,
-			modalIntermediateWidth,
-			modalIntermediateHeight,
-			tableColumns,
-			allColumnList,
-			isShowColumn,
-			modalVisible,
-			selectRows,
-			isShowCompareModal,
-			intermediateOtherKeys,
-			isShowCustomizedModal,
-			copyTrialId,
-			intermediateOption,
-			sortMessage
-		} = this.state;
-		const { columnList } = this.props;
-		const tableSource = this.state.tableSourceForSort;
-		const perPageOptions = [
-			{ key: '10', text: '10 items per page' },
-			{ key: '20', text: '20 items per page' },
-			{ key: '50', text: '50 items per page' },
-			{ key: 'all', text: 'All items' }
-		];
-
-		if (sortMessage.field !== '') {
-			tableSource.sort(function(a, b): any {
-				if (a[sortMessage.field] === undefined) {
-					return 1;
-				}
-				if (b[sortMessage.field] === undefined) {
-					return -1;
-				}
-				return (sortMessage.isDescend
-				? a[sortMessage.field] < b[sortMessage.field]
-				: a[sortMessage.field] > b[sortMessage.field])
-					? 1
-					: -1;
-			});
-		}
-
-		return (
-			<Stack>
-				<div id='tableList'>
-					<DetailsList
-						columns={tableColumns}
-						items={tableSource}
-						setKey='set'
-						compact={true}
-						onRenderRow={this.onRenderRow}
-						layoutMode={DetailsListLayoutMode.justified}
-						selectionMode={SelectionMode.multiple}
-						selection={this.getSelectedRows}
-					/>
-
-					<Stack
-						horizontal
-						horizontalAlign='end'
-						verticalAlign='baseline'
-						styles={{ root: { padding: 10 } }}
-						tokens={horizontalGapStackTokens}
-					>
-						<Dropdown
-							selectedKey={
-								this.state.perPage === this.props.tableSource.length
-									? 'all'
-									: String(this.state.perPage)
-							}
-							options={perPageOptions}
-							onChange={this.updateperPage}
-							styles={{ dropdown: { width: 150 } }}
-						/>
-
-						{/* this.props.tableSource.length > this.state.perPage &&  */}
-						<ReactPaginate
-							previousLabel={'<'}
-							nextLabel={'>'}
-							breakLabel={'...'}
-							breakClassName={'break'}
-							pageCount={this.state.pageCount}
-							marginPagesDisplayed={2}
-							pageRangeDisplayed={2}
-							onPageChange={this.handlePageClick}
-							containerClassName={this.props.tableSource.length == 0 ? 'pagination hidden' : 'pagination'}
-							subContainerClassName={'pages pagination'}
-							disableInitialCallback={false}
-							activeClassName={'active'}
-						/>
-					</Stack>
-
-					{/* /> */}
-				</div>
-				{/* Intermediate Result Modal */}
-				<Modal
-					isOpen={modalVisible}
-					onDismiss={this.hideIntermediateModal}
-					containerClassName={contentStyles.container}
-				>
-					<div className={contentStyles.header}>
-						<span>Intermediate result</span>
-						<IconButton
-							styles={iconButtonStyles}
-							iconProps={{ iconName: 'Cancel' }}
-							ariaLabel='Close popup modal'
-							onClick={this.hideIntermediateModal as any}
-						/>
-					</div>
-					{intermediateOtherKeys.length > 1 ? (
-						<Stack horizontalAlign='end' className='selectKeys'>
-							<Dropdown
-								className='select'
-								selectedKey={intermediateKey}
-								options={intermediateOtherKeys.map((key, item) => {
-									return {
-										key: key,
-										text: intermediateOtherKeys[item]
-									};
-								})}
-								onChange={this.selectOtherKeys}
-							/>
-						</Stack>
-					) : null}
-					<div className='intermediate-graph'>
-						<ReactEcharts
-							option={intermediateOption}
-							style={{
-								width: 0.5 * modalIntermediateWidth,
-								height: 0.7 * modalIntermediateHeight,
-								maxHeight: 534,
-								padding: 20
-							}}
-							theme='my_theme'
-						/>
-						<div className='xAxis'>#Intermediate result</div>
-					</div>
-				</Modal>
-				{/* Add Column Modal */}
-				{isShowColumn && (
-					<ChangeColumnComponent
-						hideShowColumnDialog={this.hideShowColumnModal}
-						isHideDialog={!isShowColumn}
-						showColumn={allColumnList}
-						selectedColumn={columnList}
-						changeColumn={this.props.changeColumn}
-					/>
-				)}
-				{/* compare trials based message */}
-				{isShowCompareModal && <Compare compareStacks={selectRows} cancelFunc={this.hideCompareModal} />}
-				{/* clone trial parameters and could submit a customized trial */}
-				<Customize
-					visible={isShowCustomizedModal}
-					copyTrialId={copyTrialId}
-					closeCustomizeModal={this.closeCustomizedTrial}
-				/>
-			</Stack>
-		);
-	}
+    public intervalTrialLog = 10;
+    public trialId!: string;
+
+    constructor(props: TableListProps) {
+        super(props);
+
+        this.state = {
+            intermediateOption: {},
+            modalVisible: false,
+            isObjFinal: false,
+            isShowColumn: false,
+            isShowCompareModal: false,
+            selectRows: [],
+            selectedRowKeys: [], // close selected trial message after modal closed
+            intermediateData: [],
+            intermediateId: '',
+            intermediateOtherKeys: [],
+            isShowCustomizedModal: false,
+            isCalloutVisible: false,
+            copyTrialId: '',
+            intermediateKey: 'default',
+            isExpand: false,
+            modalIntermediateWidth: window.innerWidth,
+            modalIntermediateHeight: window.innerHeight,
+            tableColumns: this.initTableColumnList(this.props.columnList),
+            allColumnList: this.getAllColumnKeys(),
+            sortMessage: { field: '', isDescend: false },
+            offset: 0,
+            data: [],
+            perPage: 20,
+            currentPage: 0,
+            pageCount: 0,
+            tableSourceForSort: this.props.tableSource
+        };
+    }
+
+    // sort for table column
+    onColumnClick = (ev: React.MouseEvent<HTMLElement>, getColumn: IColumn): void => {
+        const { tableColumns, tableSourceForSort } = this.state;
+        const newColumns: IColumn[] = tableColumns.slice();
+        const currColumn: IColumn = newColumns.filter(item => getColumn.key === item.key)[0];
+        newColumns.forEach((newCol: IColumn) => {
+            if (newCol === currColumn) {
+                currColumn.isSortedDescending = !currColumn.isSortedDescending;
+                currColumn.isSorted = true;
+            } else {
+                newCol.isSorted = false;
+                newCol.isSortedDescending = true;
+            }
+        });
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const newItems = this.copyAndSort(tableSourceForSort, currColumn.fieldName!, currColumn.isSortedDescending);
+        this.setState({
+            tableColumns: newColumns,
+            tableSourceForSort: newItems,
+            sortMessage: { field: getColumn.key, isDescend: currColumn.isSortedDescending }
+        });
+    };
+
+    private copyAndSort<T>(items: T[], columnKey: string, isSortedDescending?: boolean): any {
+        const key = columnKey as keyof T;
+        return items.slice(0).sort(function(a: T, b: T): any {
+            if (a[key] === undefined) {
+                return 1;
+            }
+            if (b[key] === undefined) {
+                return -1;
+            }
+            return (isSortedDescending ? a[key] < b[key] : a[key] > b[key]) ? 1 : -1;
+        });
+    }
+
+    AccuracyColumnConfig: any = {
+        name: 'Default metric',
+        className: 'leftTitle',
+        key: 'latestAccuracy',
+        fieldName: 'latestAccuracy',
+        minWidth: 200,
+        maxWidth: 300,
+        isResizable: true,
+        data: 'number',
+        onColumnClick: this.onColumnClick,
+        onRender: (item): React.ReactNode => (
+            <TooltipHost content={item.formattedLatestAccuracy}>
+                <div className='ellipsis'>{item.formattedLatestAccuracy}</div>
+            </TooltipHost>
+        )
+    };
+
+    SequenceIdColumnConfig: any = {
+        name: 'Trial No.',
+        key: 'sequenceId',
+        fieldName: 'sequenceId',
+        minWidth: 80,
+        maxWidth: 240,
+        className: 'tableHead',
+        data: 'number',
+        onColumnClick: this.onColumnClick
+    };
+
+    IdColumnConfig: any = {
+        name: 'ID',
+        key: 'id',
+        fieldName: 'id',
+        minWidth: 150,
+        maxWidth: 200,
+        isResizable: true,
+        data: 'string',
+        onColumnClick: this.onColumnClick,
+        className: 'tableHead leftTitle'
+    };
+
+    StartTimeColumnConfig: any = {
+        name: 'Start time',
+        key: 'startTime',
+        fieldName: 'startTime',
+        minWidth: 150,
+        maxWidth: 400,
+        isResizable: true,
+        data: 'number',
+        onColumnClick: this.onColumnClick,
+        onRender: (record): React.ReactNode => <span>{formatTimestamp(record.startTime)}</span>
+    };
+
+    EndTimeColumnConfig: any = {
+        name: 'End time',
+        key: 'endTime',
+        fieldName: 'endTime',
+        minWidth: 200,
+        maxWidth: 400,
+        isResizable: true,
+        data: 'number',
+        onColumnClick: this.onColumnClick,
+        onRender: (record): React.ReactNode => <span>{formatTimestamp(record.endTime, '--')}</span>
+    };
+
+    DurationColumnConfig: any = {
+        name: 'Duration',
+        key: 'duration',
+        fieldName: 'duration',
+        minWidth: 150,
+        maxWidth: 300,
+        isResizable: true,
+        data: 'number',
+        onColumnClick: this.onColumnClick,
+        onRender: (record): React.ReactNode => <span className='durationsty'>{convertDuration(record.duration)}</span>
+    };
+
+    StatusColumnConfig: any = {
+        name: 'Status',
+        key: 'status',
+        fieldName: 'status',
+        className: 'tableStatus',
+        minWidth: 150,
+        maxWidth: 250,
+        isResizable: true,
+        data: 'string',
+        onColumnClick: this.onColumnClick,
+        onRender: (record): React.ReactNode => <span className={`${record.status} commonStyle`}>{record.status}</span>
+    };
+
+    IntermediateCountColumnConfig: any = {
+        name: 'Intermediate result',
+        dataIndex: 'intermediateCount',
+        fieldName: 'intermediateCount',
+        minWidth: 150,
+        maxWidth: 200,
+        isResizable: true,
+        data: 'number',
+        onColumnClick: this.onColumnClick,
+        onRender: (record): React.ReactNode => <span>{`#${record.intermediateCount}`}</span>
+    };
+
+    showIntermediateModal = async (record: TrialJobInfo, event: React.SyntheticEvent<EventTarget>): Promise<void> => {
+        event.preventDefault();
+        event.stopPropagation();
+        const res = await axios.get(`${MANAGER_IP}/metric-data/${record.id}`);
+        if (res.status === 200) {
+            const intermediateArr: number[] = [];
+            // support intermediate result is dict because the last intermediate result is
+            // final result in a succeed trial, it may be a dict.
+            // get intermediate result dict keys array
+            const { intermediateKey } = this.state;
+            const otherkeys: string[] = [];
+            const metricDatas = res.data;
+            if (metricDatas.length !== 0) {
+                // just add type=number keys
+                const intermediateMetrics = parseMetrics(metricDatas[0].data);
+                for (const key in intermediateMetrics) {
+                    if (typeof intermediateMetrics[key] === 'number') {
+                        otherkeys.push(key);
+                    }
+                }
+            }
+            // intermediateArr just store default val
+            metricDatas.map(item => {
+                if (item.type === 'PERIODICAL') {
+                    const temp = parseMetrics(item.data);
+                    if (typeof temp === 'object') {
+                        intermediateArr.push(temp[intermediateKey]);
+                    } else {
+                        intermediateArr.push(temp);
+                    }
+                }
+            });
+            const intermediate = intermediateGraphOption(intermediateArr, record.id);
+            this.setState({
+                intermediateData: res.data, // store origin intermediate data for a trial
+                intermediateOption: intermediate,
+                intermediateOtherKeys: otherkeys,
+                intermediateId: record.id
+            });
+        }
+        this.setState({ modalVisible: true });
+    };
+
+    // intermediate button click -> intermediate graph for each trial
+    // support intermediate is dict
+    selectOtherKeys = (event: React.FormEvent<HTMLDivElement>, item?: IDropdownOption): void => {
+        if (item !== undefined) {
+            const value = item.text;
+            const isShowDefault: boolean = value === 'default' ? true : false;
+            const { intermediateData, intermediateId } = this.state;
+            const intermediateArr: number[] = [];
+            // just watch default key-val
+            if (isShowDefault === true) {
+                Object.keys(intermediateData).map(item => {
+                    if (intermediateData[item].type === 'PERIODICAL') {
+                        const temp = parseMetrics(intermediateData[item].data);
+                        if (typeof temp === 'object') {
+                            intermediateArr.push(temp[value]);
+                        } else {
+                            intermediateArr.push(temp);
+                        }
+                    }
+                });
+            } else {
+                Object.keys(intermediateData).map(item => {
+                    const temp = parseMetrics(intermediateData[item].data);
+                    if (typeof temp === 'object') {
+                        intermediateArr.push(temp[value]);
+                    }
+                });
+            }
+            const intermediate = intermediateGraphOption(intermediateArr, intermediateId);
+            // re-render
+            this.setState({
+                intermediateKey: value,
+                intermediateOption: intermediate
+            });
+        }
+    };
+
+    hideIntermediateModal = (): void => {
+        this.setState({
+            modalVisible: false
+        });
+    };
+
+    hideShowColumnModal = (): void => {
+        this.setState(() => ({ isShowColumn: false }));
+    };
+
+    // click add column btn, just show the modal of addcolumn
+    addColumn = (): void => {
+        // show user select check button
+        this.setState(() => ({ isShowColumn: true }));
+    };
+
+    fillSelectedRowsTostate = (selected: number[] | string[], selectedRows: Array<TableRecord>): void => {
+        this.setState({ selectRows: selectedRows, selectedRowKeys: selected });
+    };
+
+    // open Compare-modal
+    compareBtn = (): void => {
+        const { selectRows } = this.state;
+        if (selectRows.length === 0) {
+            alert('Please select datas you want to compare!');
+        } else {
+            this.setState({ isShowCompareModal: true });
+        }
+    };
+
+    // close Compare-modal
+    hideCompareModal = (): void => {
+        // close modal. clear select rows data, clear selected track
+        this.setState({ isShowCompareModal: false, selectedRowKeys: [], selectRows: [] });
+    };
+
+    // open customized trial modal
+    private setCustomizedTrial = (trialId: string, event: React.SyntheticEvent<EventTarget>): void => {
+        event.preventDefault();
+        event.stopPropagation();
+        this.setState({
+            isShowCustomizedModal: true,
+            copyTrialId: trialId
+        });
+    };
+
+    private closeCustomizedTrial = (): void => {
+        this.setState({
+            isShowCustomizedModal: false,
+            copyTrialId: ''
+        });
+    };
+
+    private onWindowResize = (): void => {
+        this.setState(() => ({
+            modalIntermediateHeight: window.innerHeight,
+            modalIntermediateWidth: window.innerWidth
+        }));
+    };
+
+    private onRenderRow: IDetailsListProps['onRenderRow'] = props => {
+        if (props) {
+            return <Details detailsProps={props} />;
+        }
+        return null;
+    };
+
+    private getSelectedRows = new Selection({
+        onSelectionChanged: (): void => {
+            this.setState(() => ({ selectRows: this.getSelectedRows.getSelection() }));
+        }
+    });
+
+    // trial parameters & dict final keys & Trial No. Id ...
+    private getAllColumnKeys = (): string[] => {
+        const tableSource: Array<TableRecord> = JSON.parse(JSON.stringify(this.props.tableSource));
+        // parameter as table column
+        const parameterStr: string[] = [];
+        if (!EXPERIMENT.isNestedExp()) {
+            if (tableSource.length > 0) {
+                const trialMess = TRIALS.getTrial(tableSource[0].id);
+                const trial = trialMess.description.parameters;
+                const parameterColumn: string[] = Object.keys(trial);
+                parameterColumn.forEach(value => {
+                    parameterStr.push(`${value} (search space)`);
+                });
+            }
+        }
+        // concat trial all final keys and remove dup "default" val, return list
+        const finalKeysList = TRIALS.finalKeys().filter(item => item !== 'default');
+        return COLUMNPro.concat(parameterStr).concat(finalKeysList);
+    };
+
+    // get IColumn[]
+    // when user click [Add Column] need to use the function
+    private initTableColumnList = (columnList: string[]): IColumn[] => {
+        // const { columnList } = this.props;
+        const disabledAddCustomizedTrial = ['DONE', 'ERROR', 'STOPPED'].includes(EXPERIMENT.status);
+        const showColumn: IColumn[] = [];
+        for (const item of columnList) {
+            const paraColumn = item.match(/ \(search space\)$/);
+            let result;
+            if (paraColumn !== null) {
+                result = paraColumn.input;
+            }
+            switch (item) {
+                case 'Trial No.':
+                    showColumn.push(this.SequenceIdColumnConfig);
+                    break;
+                case 'ID':
+                    showColumn.push(this.IdColumnConfig);
+                    break;
+                case 'Start time':
+                    showColumn.push(this.StartTimeColumnConfig);
+                    break;
+                case 'End time':
+                    showColumn.push(this.EndTimeColumnConfig);
+                    break;
+                case 'Duration':
+                    showColumn.push(this.DurationColumnConfig);
+                    break;
+                case 'Status':
+                    showColumn.push(this.StatusColumnConfig);
+                    break;
+                case 'Intermediate result':
+                    showColumn.push(this.IntermediateCountColumnConfig);
+                    break;
+                case 'Default':
+                    showColumn.push(this.AccuracyColumnConfig);
+                    break;
+                case 'Operation':
+                    showColumn.push({
+                        name: 'Operation',
+                        key: 'operation',
+                        fieldName: 'operation',
+                        minWidth: 160,
+                        maxWidth: 200,
+                        isResizable: true,
+                        className: 'detail-table',
+                        onRender: (record: any) => {
+                            const trialStatus = record.status;
+                            const flag: boolean = trialStatus === 'RUNNING' || trialStatus === 'UNKNOWN' ? false : true;
+                            return (
+                                <Stack className='detail-button' horizontal>
+                                    {/* see intermediate result graph */}
+                                    <PrimaryButton
+                                        className='detail-button-operation'
+                                        title='Intermediate'
+                                        onClick={this.showIntermediateModal.bind(this, record)}
+                                    >
+                                        {LineChart}
+                                    </PrimaryButton>
+                                    {/* kill job */}
+                                    {flag ? (
+                                        <PrimaryButton className='detail-button-operation' disabled={true} title='kill'>
+                                            {blocked}
+                                        </PrimaryButton>
+                                    ) : (
+                                        <KillJob trial={record} />
+                                    )}
+                                    {/* Add a new trial-customized trial */}
+                                    <PrimaryButton
+                                        className='detail-button-operation'
+                                        title='Customized trial'
+                                        onClick={this.setCustomizedTrial.bind(this, record.id)}
+                                        disabled={disabledAddCustomizedTrial}
+                                    >
+                                        {copy}
+                                    </PrimaryButton>
+                                </Stack>
+                            );
+                        }
+                    });
+                    break;
+                case result:
+                    // remove SEARCH_SPACE title
+                    // const realItem = item.replace(' (search space)', '');
+                    showColumn.push({
+                        name: item.replace(' (search space)', ''),
+                        key: item,
+                        fieldName: item,
+                        minWidth: 150,
+                        onRender: (record: TableRecord) => {
+                            const eachTrial = TRIALS.getTrial(record.id);
+                            return <span>{eachTrial.description.parameters[item.replace(' (search space)', '')]}</span>;
+                        }
+                    });
+                    break;
+                default:
+                    showColumn.push({
+                        name: item,
+                        key: item,
+                        fieldName: item,
+                        minWidth: 100,
+                        onRender: (record: TableRecord) => {
+                            const accDictionary = record.accDictionary;
+                            let other = '';
+                            if (accDictionary !== undefined) {
+                                other = accDictionary[item].toString();
+                            }
+                            return (
+                                <TooltipHost content={other}>
+                                    <div className='ellipsis'>{other}</div>
+                                </TooltipHost>
+                            );
+                        }
+                    });
+            }
+        }
+        return showColumn;
+    };
+
+    componentDidMount(): void {
+        window.addEventListener('resize', this.onWindowResize);
+        this.updateData();
+    }
+
+    componentDidUpdate(prevProps: TableListProps): void {
+        if (this.props.columnList !== prevProps.columnList || this.props.tableSource !== prevProps.tableSource) {
+            const { columnList } = this.props;
+            this.setState(
+                {
+                    tableColumns: this.initTableColumnList(columnList),
+                    allColumnList: this.getAllColumnKeys()
+                },
+                () => {
+                    this.updateData();
+                }
+            );
+        }
+    }
+
+    updateData(): void {
+        const tableSource: Array<TableRecord> = JSON.parse(JSON.stringify(this.props.tableSource));
+
+        const tableSlice = tableSource.slice(this.state.offset, this.state.offset + this.state.perPage);
+
+        this.setState({
+            tableSourceForSort: tableSlice,
+            pageCount: Math.ceil(tableSource.length / this.state.perPage)
+        });
+    }
+
+    handlePageClick = (evt: any): void => {
+        const selectedPage = evt.selected;
+        const offset = selectedPage * this.state.perPage;
+
+        this.setState(
+            {
+                currentPage: selectedPage,
+                offset: offset
+            },
+            () => {
+                this.updateData();
+            }
+        );
+    };
+
+    updateperPage = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
+        // clear input value and re-render table
+        if (item !== undefined) {
+            this.setState(
+                {
+                    perPage: item.key === 'all' ? this.props.tableSource.length : Number(item.key)
+                },
+                () => {
+                    this.updateData();
+                }
+            );
+        }
+    };
+
+    render(): React.ReactNode {
+        const {
+            intermediateKey,
+            modalIntermediateWidth,
+            modalIntermediateHeight,
+            tableColumns,
+            allColumnList,
+            isShowColumn,
+            modalVisible,
+            selectRows,
+            isShowCompareModal,
+            intermediateOtherKeys,
+            isShowCustomizedModal,
+            copyTrialId,
+            intermediateOption,
+            sortMessage
+        } = this.state;
+        const { columnList } = this.props;
+        const tableSource = this.state.tableSourceForSort;
+        const perPageOptions = [
+            { key: '10', text: '10 items per page' },
+            { key: '20', text: '20 items per page' },
+            { key: '50', text: '50 items per page' },
+            { key: 'all', text: 'All items' }
+        ];
+
+        if (sortMessage.field !== '') {
+            tableSource.sort(function(a, b): any {
+                if (a[sortMessage.field] === undefined) {
+                    return 1;
+                }
+                if (b[sortMessage.field] === undefined) {
+                    return -1;
+                }
+                return (sortMessage.isDescend
+                  ? a[sortMessage.field] < b[sortMessage.field]
+                  : a[sortMessage.field] > b[sortMessage.field])
+                    ? 1
+                    : -1;
+            });
+        }
+
+        return (
+            <Stack>
+                <div id='tableList'>
+                    <DetailsList
+                        columns={tableColumns}
+                        items={tableSource}
+                        setKey='set'
+                        compact={true}
+                        onRenderRow={this.onRenderRow}
+                        layoutMode={DetailsListLayoutMode.justified}
+                        selectionMode={SelectionMode.multiple}
+                        selection={this.getSelectedRows}
+                    />
+
+                    <Stack
+                        horizontal
+                        horizontalAlign='end'
+                        verticalAlign='baseline'
+                        styles={{ root: { padding: 10 } }}
+                        tokens={horizontalGapStackTokens}
+                    >
+                        <Dropdown
+                            selectedKey={
+                                this.state.perPage === this.props.tableSource.length
+                                    ? 'all'
+                                    : String(this.state.perPage)
+                            }
+                            options={perPageOptions}
+                            onChange={this.updateperPage}
+                            styles={{ dropdown: { width: 150 } }}
+                        />
+
+                        {/* this.props.tableSource.length > this.state.perPage &&  */}
+                        <ReactPaginate
+                            previousLabel={'<'}
+                            nextLabel={'>'}
+                            breakLabel={'...'}
+                            breakClassName={'break'}
+                            pageCount={this.state.pageCount}
+                            marginPagesDisplayed={2}
+                            pageRangeDisplayed={2}
+                            onPageChange={this.handlePageClick}
+                            containerClassName={this.props.tableSource.length == 0 ? 'pagination hidden' : 'pagination'}
+                            subContainerClassName={'pages pagination'}
+                            disableInitialCallback={false}
+                            activeClassName={'active'}
+                        />
+                    </Stack>
+
+                    {/* /> */}
+                </div>
+                {/* Intermediate Result Modal */}
+                <Modal
+                    isOpen={modalVisible}
+                    onDismiss={this.hideIntermediateModal}
+                    containerClassName={contentStyles.container}
+                >
+                    <div className={contentStyles.header}>
+                        <span>Intermediate result</span>
+                        <IconButton
+                            styles={iconButtonStyles}
+                            iconProps={{ iconName: 'Cancel' }}
+                            ariaLabel='Close popup modal'
+                            onClick={this.hideIntermediateModal as any}
+                        />
+                    </div>
+                    {intermediateOtherKeys.length > 1 ? (
+                        <Stack horizontalAlign='end' className='selectKeys'>
+                            <Dropdown
+                                className='select'
+                                selectedKey={intermediateKey}
+                                options={intermediateOtherKeys.map((key, item) => {
+                                    return {
+                                        key: key,
+                                        text: intermediateOtherKeys[item]
+                                    };
+                                })}
+                                onChange={this.selectOtherKeys}
+                            />
+                        </Stack>
+                    ) : null}
+                    <div className='intermediate-graph'>
+                        <ReactEcharts
+                            option={intermediateOption}
+                            style={{
+                                width: 0.5 * modalIntermediateWidth,
+                                height: 0.7 * modalIntermediateHeight,
+                                maxHeight: 534,
+                                padding: 20
+                            }}
+                            theme='my_theme'
+                        />
+                        <div className='xAxis'>#Intermediate result</div>
+                    </div>
+                </Modal>
+                {/* Add Column Modal */}
+                {isShowColumn && (
+                    <ChangeColumnComponent
+                        hideShowColumnDialog={this.hideShowColumnModal}
+                        isHideDialog={!isShowColumn}
+                        showColumn={allColumnList}
+                        selectedColumn={columnList}
+                        changeColumn={this.props.changeColumn}
+                    />
+                )}
+                {/* compare trials based message */}
+                {isShowCompareModal && <Compare compareStacks={selectRows} cancelFunc={this.hideCompareModal} />}
+                {/* clone trial parameters and could submit a customized trial */}
+                <Customize
+                    visible={isShowCustomizedModal}
+                    copyTrialId={copyTrialId}
+                    closeCustomizeModal={this.closeCustomizedTrial}
+                />
+            </Stack>
+        );
+    }
 }
 
 export default TableList;
diff --git a/src/webui/src/index.tsx b/src/webui/src/index.tsx
index 968d11693a..22e7d9132f 100644
--- a/src/webui/src/index.tsx
+++ b/src/webui/src/index.tsx
@@ -8,16 +8,16 @@ import './index.css';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
-	<Router history={browserHistory}>
-		<Route path='/' component={App}>
-			<IndexRedirect to='/oview' />
-			<Route path='/oview' component={Overview} />
-			<Route path='/detail' component={TrialsDetail} />
-			{/* test branch */}
-		</Route>
-	</Router>,
+    <Router history={browserHistory}>
+        <Route path='/' component={App}>
+            <IndexRedirect to='/oview' />
+            <Route path='/oview' component={Overview} />
+            <Route path='/detail' component={TrialsDetail} />
+            {/* test branch */}
+        </Route>
+    </Router>,
 
-	document.getElementById('root')
+    document.getElementById('root')
 );
 
 // If you want your app to work offline and load faster, you can change
diff --git a/src/webui/src/react-app-env.d.ts b/src/webui/src/react-app-env.d.ts
index cd9072a81e..0af75e6f50 100644
--- a/src/webui/src/react-app-env.d.ts
+++ b/src/webui/src/react-app-env.d.ts
@@ -1,60 +1,60 @@
 declare namespace NodeJS {
-	interface ProcessEnv {
-		readonly NODE_ENV: 'development' | 'production' | 'test';
-		readonly PUBLIC_URL: string;
-	}
+    interface ProcessEnv {
+        readonly NODE_ENV: 'development' | 'production' | 'test';
+        readonly PUBLIC_URL: string;
+    }
 }
 
 declare module '*.bmp' {
-	const src: string;
-	export default src;
+    const src: string;
+    export default src;
 }
 
 declare module '*.gif' {
-	const src: string;
-	export default src;
+    const src: string;
+    export default src;
 }
 
 declare module '*.jpg' {
-	const src: string;
-	export default src;
+    const src: string;
+    export default src;
 }
 
 declare module '*.jpeg' {
-	const src: string;
-	export default src;
+    const src: string;
+    export default src;
 }
 
 declare module '*.png' {
-	const src: string;
-	export default src;
+    const src: string;
+    export default src;
 }
 
 declare module '*.webp' {
-	const src: string;
-	export default src;
+    const src: string;
+    export default src;
 }
 
 declare module '*.svg' {
-	import * as React from 'react';
+    import * as React from 'react';
 
-	export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+    export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
 
-	const src: string;
-	export default src;
+    const src: string;
+    export default src;
 }
 
 declare module '*.module.css' {
-	const classes: { [key: string]: string };
-	export default classes;
+    const classes: { [key: string]: string };
+    export default classes;
 }
 
 declare module '*.module.scss' {
-	const classes: { [key: string]: string };
-	export default classes;
+    const classes: { [key: string]: string };
+    export default classes;
 }
 
 declare module '*.module.sass' {
-	const classes: { [key: string]: string };
-	export default classes;
+    const classes: { [key: string]: string };
+    export default classes;
 }
diff --git a/src/webui/src/static/const.ts b/src/webui/src/static/const.ts
index 16ee11acb7..1a44cb3fba 100644
--- a/src/webui/src/static/const.ts
+++ b/src/webui/src/static/const.ts
@@ -2,74 +2,74 @@
 const METRIC_GROUP_UPDATE_THRESHOLD = 100;
 const METRIC_GROUP_UPDATE_SIZE = 20;
 
-const MANAGER_IP = `/api/v1/nni`;
+const MANAGER_IP = `http://13.77.78.63:8080/api/v1/nni`;
 const DOWNLOAD_IP = `/logs`;
 const WEBUIDOC = 'https://nni.readthedocs.io/en/latest/Tutorial/WebUI.html';
 const trialJobStatus = [
-	'UNKNOWN',
-	'WAITING',
-	'RUNNING',
-	'SUCCEEDED',
-	'FAILED',
-	'USER_CANCELED',
-	'SYS_CANCELED',
-	'EARLY_STOPPED'
+    'UNKNOWN',
+    'WAITING',
+    'RUNNING',
+    'SUCCEEDED',
+    'FAILED',
+    'USER_CANCELED',
+    'SYS_CANCELED',
+    'EARLY_STOPPED'
 ];
 const CONTROLTYPE = ['SEARCH_SPACE', 'TRIAL_CONCURRENCY', 'MAX_EXEC_DURATION'];
 const MONACO = {
-	readOnly: true,
-	automaticLayout: true,
-	scrollBeyondLastLine: false
+    readOnly: true,
+    automaticLayout: true,
+    scrollBeyondLastLine: false
 };
 const DRAWEROPTION = {
-	minimap: { enabled: false },
-	readOnly: true,
-	automaticLayout: true
+    minimap: { enabled: false },
+    readOnly: true,
+    automaticLayout: true
 };
 const OPERATION = 'Operation';
 // defatult selected column
 const COLUMN = ['Trial No.', 'ID', 'Duration', 'Status', 'Default', OPERATION];
 // all choice column !dictory final
 const COLUMNPro = [
-	'Trial No.',
-	'ID',
-	'Start time',
-	'End time',
-	'Duration',
-	'Status',
-	'Intermediate result',
-	'Default',
-	OPERATION
+    'Trial No.',
+    'ID',
+    'Start time',
+    'End time',
+    'Duration',
+    'Status',
+    'Intermediate result',
+    'Default',
+    OPERATION
 ];
 const CONCURRENCYTOOLTIP = 'Trial concurrency is the number of trials running concurrently.';
 const SUPPORTED_SEARCH_SPACE_TYPE = [
-	'choice',
-	'layer_choice',
-	'input_choice',
-	'randint',
-	'uniform',
-	'quniform',
-	'loguniform',
-	'qloguniform',
-	'normal',
-	'qnormal',
-	'lognormal',
-	'qlognormal'
+    'choice',
+    'layer_choice',
+    'input_choice',
+    'randint',
+    'uniform',
+    'quniform',
+    'loguniform',
+    'qloguniform',
+    'normal',
+    'qnormal',
+    'lognormal',
+    'qlognormal'
 ];
 
 export {
-	MANAGER_IP,
-	DOWNLOAD_IP,
-	trialJobStatus,
-	COLUMNPro,
-	WEBUIDOC,
-	CONTROLTYPE,
-	MONACO,
-	COLUMN,
-	DRAWEROPTION,
-	OPERATION,
-	METRIC_GROUP_UPDATE_THRESHOLD,
-	METRIC_GROUP_UPDATE_SIZE,
-	CONCURRENCYTOOLTIP,
-	SUPPORTED_SEARCH_SPACE_TYPE
+    MANAGER_IP,
+    DOWNLOAD_IP,
+    trialJobStatus,
+    COLUMNPro,
+    WEBUIDOC,
+    CONTROLTYPE,
+    MONACO,
+    COLUMN,
+    DRAWEROPTION,
+    OPERATION,
+    METRIC_GROUP_UPDATE_THRESHOLD,
+    METRIC_GROUP_UPDATE_SIZE,
+    CONCURRENCYTOOLTIP,
+    SUPPORTED_SEARCH_SPACE_TYPE
 };
diff --git a/src/webui/src/static/function.ts b/src/webui/src/static/function.ts
index ce5bf07d89..bd27b7e884 100644
--- a/src/webui/src/static/function.ts
+++ b/src/webui/src/static/function.ts
@@ -4,250 +4,250 @@ import { MANAGER_IP } from './const';
 import { MetricDataRecord, FinalType, TableObj } from './interface';
 
 async function requestAxios(url: string): Promise<any> {
-	const response = await axios.get(url);
-	if (response.status === 200) {
-		if (response.data.error !== undefined) {
-			throw new Error(`API ${url} ${response.data.error}`);
-		} else {
-			return response.data as any;
-		}
-	} else {
-		throw new Error(`API ${url} ${response.status} error`);
-	}
+    const response = await axios.get(url);
+    if (response.status === 200) {
+        if (response.data.error !== undefined) {
+            throw new Error(`API ${url} ${response.data.error}`);
+        } else {
+            return response.data as any;
+        }
+    } else {
+        throw new Error(`API ${url} ${response.status} error`);
+    }
 }
 
 const convertTime = (num: number): string => {
-	if (num <= 0) {
-		return '0';
-	}
-	if (num % 3600 === 0) {
-		return num / 3600 + 'h';
-	} else {
-		const hour = Math.floor(num / 3600);
-		const min = Math.floor((num / 60) % 60);
-		return hour > 0 ? `${hour}h ${min}min` : `${min}min`;
-	}
+    if (num <= 0) {
+        return '0';
+    }
+    if (num % 3600 === 0) {
+        return num / 3600 + 'h';
+    } else {
+        const hour = Math.floor(num / 3600);
+        const min = Math.floor((num / 60) % 60);
+        return hour > 0 ? `${hour}h ${min}min` : `${min}min`;
+    }
 };
 
 // trial's duration, accurate to seconds for example 10min 30s
 const convertDuration = (num: number): string => {
-	if (num < 1) {
-		return '0s';
-	}
-	const hour = Math.floor(num / 3600);
-	const minute = Math.floor((num / 60) % 60);
-	const second = Math.floor(num % 60);
-	const result: string[] = [];
-	if (hour > 0) {
-		result.push(`${hour}h`);
-	}
-	if (minute > 0) {
-		result.push(`${minute}min`);
-	}
-	if (second > 0) {
-		result.push(`${second}s`);
-	}
-	return result.join(' ');
+    if (num < 1) {
+        return '0s';
+    }
+    const hour = Math.floor(num / 3600);
+    const minute = Math.floor((num / 60) % 60);
+    const second = Math.floor(num % 60);
+    const result: string[] = [];
+    if (hour > 0) {
+        result.push(`${hour}h`);
+    }
+    if (minute > 0) {
+        result.push(`${minute}min`);
+    }
+    if (second > 0) {
+        result.push(`${second}s`);
+    }
+    return result.join(' ');
 };
 
 function parseMetrics(metricData: string): any {
-	if (metricData.includes('NaN')) {
-		return JSON5.parse(JSON5.parse(metricData));
-	} else {
-		return JSON.parse(JSON.parse(metricData));
-	}
+    if (metricData.includes('NaN')) {
+        return JSON5.parse(JSON5.parse(metricData));
+    } else {
+        return JSON.parse(JSON.parse(metricData));
+    }
 }
 
 const isArrayType = (list: any): boolean | undefined => {
-	return Array.isArray(list);
+    return Array.isArray(list);
 };
 
 // get final result value
 // draw Accuracy point graph
 const getFinalResult = (final?: MetricDataRecord[]): number => {
-	let acc;
-	let showDefault = 0;
-	if (final) {
-		acc = parseMetrics(final[final.length - 1].data);
-		if (typeof acc === 'object' && !isArrayType(acc)) {
-			if (acc.default) {
-				showDefault = acc.default;
-			}
-		} else if (typeof acc === 'number') {
-			showDefault = acc;
-		} else {
-			showDefault = NaN;
-		}
-		return showDefault;
-	} else {
-		return 0;
-	}
+    let acc;
+    let showDefault = 0;
+    if (final) {
+        acc = parseMetrics(final[final.length - 1].data);
+        if (typeof acc === 'object' && !isArrayType(acc)) {
+            if (acc.default) {
+                showDefault = acc.default;
+            }
+        } else if (typeof acc === 'number') {
+            showDefault = acc;
+        } else {
+            showDefault = NaN;
+        }
+        return showDefault;
+    } else {
+        return 0;
+    }
 };
 
 // get final result value // acc obj
 const getFinal = (final?: MetricDataRecord[]): FinalType | undefined => {
-	let showDefault: FinalType;
-	if (final) {
-		showDefault = parseMetrics(final[final.length - 1].data);
-		if (typeof showDefault === 'number') {
-			if (!isNaN(showDefault)) {
-				showDefault = { default: showDefault };
-				return showDefault;
-			}
-		} else if (isArrayType(showDefault)) {
-			// not support final type
-			return undefined;
-		} else if (typeof showDefault === 'object' && showDefault.hasOwnProperty('default')) {
-			return showDefault;
-		}
-	} else {
-		return undefined;
-	}
+    let showDefault: FinalType;
+    if (final) {
+        showDefault = parseMetrics(final[final.length - 1].data);
+        if (typeof showDefault === 'number') {
+            if (!isNaN(showDefault)) {
+                showDefault = { default: showDefault };
+                return showDefault;
+            }
+        } else if (isArrayType(showDefault)) {
+            // not support final type
+            return undefined;
+        } else if (typeof showDefault === 'object' && showDefault.hasOwnProperty('default')) {
+            return showDefault;
+        }
+    } else {
+        return undefined;
+    }
 };
 
 // detail page table intermediate button
 const intermediateGraphOption = (intermediateArr: number[], id: string): any => {
-	const sequence: number[] = [];
-	const lengthInter = intermediateArr.length;
-	for (let i = 1; i <= lengthInter; i++) {
-		sequence.push(i);
-	}
-	return {
-		title: {
-			text: id,
-			left: 'center',
-			textStyle: {
-				fontSize: 16,
-				color: '#333'
-			}
-		},
-		tooltip: {
-			trigger: 'item'
-		},
-		xAxis: {
-			// name: '#Intermediate result',
-			data: sequence
-		},
-		yAxis: {
-			name: 'Default metric',
-			type: 'value',
-			data: intermediateArr,
-			scale: true
-		},
-		series: [
-			{
-				symbolSize: 6,
-				type: 'scatter',
-				data: intermediateArr
-			}
-		]
-	};
+    const sequence: number[] = [];
+    const lengthInter = intermediateArr.length;
+    for (let i = 1; i <= lengthInter; i++) {
+        sequence.push(i);
+    }
+    return {
+        title: {
+            text: id,
+            left: 'center',
+            textStyle: {
+                fontSize: 16,
+                color: '#333'
+            }
+        },
+        tooltip: {
+            trigger: 'item'
+        },
+        xAxis: {
+            // name: '#Intermediate result',
+            data: sequence
+        },
+        yAxis: {
+            name: 'Default metric',
+            type: 'value',
+            data: intermediateArr,
+            scale: true
+        },
+        series: [
+            {
+                symbolSize: 6,
+                type: 'scatter',
+                data: intermediateArr
+            }
+        ]
+    };
 };
 
 // kill job
 const killJob = (key: number, id: string, status: string, updateList?: Function): void => {
-	axios(`${MANAGER_IP}/trial-jobs/${id}`, {
-		method: 'DELETE',
-		headers: {
-			'Content-Type': 'application/json;charset=utf-8'
-		}
-	})
-		.then(res => {
-			if (res.status === 200) {
-				// TODO: use Message.txt to tooltip
-				alert('Cancel the job successfully');
-				// render the table
-				if (updateList) {
-					updateList(); // FIXME
-				}
-			} else {
-				alert('fail to cancel the job');
-			}
-		})
-		.catch(error => {
-			if (error.response.status === 500) {
-				if (error.response.data.error) {
-					alert(123);
-					// message.error(error.response.data.error);
-				} else {
-					alert(234);
-					// message.error('500 error, fail to cancel the job');
-				}
-			}
-		});
+    axios(`${MANAGER_IP}/trial-jobs/${id}`, {
+        method: 'DELETE',
+        headers: {
+            'Content-Type': 'application/json;charset=utf-8'
+        }
+    })
+        .then(res => {
+            if (res.status === 200) {
+                // TODO: use Message.txt to tooltip
+                alert('Cancel the job successfully');
+                // render the table
+                if (updateList) {
+                    updateList(); // FIXME
+                }
+            } else {
+                alert('fail to cancel the job');
+            }
+        })
+        .catch(error => {
+            if (error.response.status === 500) {
+                if (error.response.data.error) {
+                    alert(123);
+                    // message.error(error.response.data.error);
+                } else {
+                    alert(234);
+                    // message.error('500 error, fail to cancel the job');
+                }
+            }
+        });
 };
 
 const filterByStatus = (item: TableObj): boolean => {
-	return item.status === 'SUCCEEDED';
+    return item.status === 'SUCCEEDED';
 };
 
 // a waittiong trial may havn't start time
 const filterDuration = (item: TableObj): boolean => {
-	return item.status !== 'WAITING';
+    return item.status !== 'WAITING';
 };
 
 const downFile = (content: string, fileName: string): void => {
-	const aTag = document.createElement('a');
-	const isEdge = navigator.userAgent.indexOf('Edge') !== -1 ? true : false;
-	const file = new Blob([content], { type: 'application/json' });
-	aTag.download = fileName;
-	aTag.href = URL.createObjectURL(file);
-	aTag.click();
-	if (!isEdge) {
-		URL.revokeObjectURL(aTag.href);
-	}
-	if (navigator.userAgent.indexOf('Firefox') > -1) {
-		const downTag = document.createElement('a');
-		downTag.addEventListener('click', function() {
-			downTag.download = fileName;
-			downTag.href = URL.createObjectURL(file);
-		});
-		const eventMouse = document.createEvent('MouseEvents');
-		eventMouse.initEvent('click', false, false);
-		downTag.dispatchEvent(eventMouse);
-	}
+    const aTag = document.createElement('a');
+    const isEdge = navigator.userAgent.indexOf('Edge') !== -1 ? true : false;
+    const file = new Blob([content], { type: 'application/json' });
+    aTag.download = fileName;
+    aTag.href = URL.createObjectURL(file);
+    aTag.click();
+    if (!isEdge) {
+        URL.revokeObjectURL(aTag.href);
+    }
+    if (navigator.userAgent.indexOf('Firefox') > -1) {
+        const downTag = document.createElement('a');
+        downTag.addEventListener('click', function() {
+            downTag.download = fileName;
+            downTag.href = URL.createObjectURL(file);
+        });
+        const eventMouse = document.createEvent('MouseEvents');
+        eventMouse.initEvent('click', false, false);
+        downTag.dispatchEvent(eventMouse);
+    }
 };
 
 // function formatTimestamp(timestamp?: number, placeholder?: string = 'N/A'): string {
 function formatTimestamp(timestamp?: number, placeholder?: string): string {
-	if (placeholder === undefined) {
-		placeholder = 'N/A';
-	}
-	return timestamp ? new Date(timestamp).toLocaleString('en-US') : placeholder;
+    if (placeholder === undefined) {
+        placeholder = 'N/A';
+    }
+    return timestamp ? new Date(timestamp).toLocaleString('en-US') : placeholder;
 }
 
 function metricAccuracy(metric: MetricDataRecord): number {
-	const data = parseMetrics(metric.data);
-	// return typeof data === 'number' ? data : NaN;
-	if (typeof data === 'number') {
-		return data;
-	} else {
-		return data.default;
-	}
+    const data = parseMetrics(metric.data);
+    // return typeof data === 'number' ? data : NaN;
+    if (typeof data === 'number') {
+        return data;
+    } else {
+        return data.default;
+    }
 }
 
 function formatAccuracy(accuracy: number): string {
-	// TODO: how to format NaN?
-	return accuracy
-		.toFixed(6)
-		.replace(/0+$/, '')
-		.replace(/\.$/, '');
+    // TODO: how to format NaN?
+    return accuracy
+        .toFixed(6)
+        .replace(/0+$/, '')
+        .replace(/\.$/, '');
 }
 
 export {
-	convertTime,
-	convertDuration,
-	getFinalResult,
-	getFinal,
-	downFile,
-	intermediateGraphOption,
-	killJob,
-	filterByStatus,
-	filterDuration,
-	formatAccuracy,
-	formatTimestamp,
-	metricAccuracy,
-	parseMetrics,
-	isArrayType,
-	requestAxios
+    convertTime,
+    convertDuration,
+    getFinalResult,
+    getFinal,
+    downFile,
+    intermediateGraphOption,
+    killJob,
+    filterByStatus,
+    filterDuration,
+    formatAccuracy,
+    formatTimestamp,
+    metricAccuracy,
+    parseMetrics,
+    isArrayType,
+    requestAxios
 };
diff --git a/src/webui/src/static/interface.ts b/src/webui/src/static/interface.ts
index 76958858df..3ec81d294c 100644
--- a/src/webui/src/static/interface.ts
+++ b/src/webui/src/static/interface.ts
@@ -2,12 +2,12 @@
  * Definition of single dimension in search space.
  */
 interface SingleAxis {
-	baseName: string;
-	fullName: string;
-	type: string;
-	scale: 'log' | 'linear' | 'ordinal';
-	domain: any;
-	nested: boolean;
+    baseName: string;
+    fullName: string;
+    type: string;
+    scale: 'log' | 'linear' | 'ordinal';
+    domain: any;
+    nested: boolean;
 }
 
 /**
@@ -16,217 +16,217 @@ interface SingleAxis {
  * Typically, it is a search space or a sub search space.
  */
 interface MultipleAxes {
-	baseName: string;
-	fullName: string;
-	axes: Map<string, SingleAxis>;
+    baseName: string;
+    fullName: string;
+    axes: Map<string, SingleAxis>;
 }
 
 // draw accuracy graph data export interface
 interface TableObj {
-	key: number;
-	sequenceId: number;
-	id: string;
-	duration: number;
-	status: string;
-	acc?: FinalType; // draw accuracy graph
-	description: Parameters;
-	color?: string;
-	startTime?: number;
-	endTime?: number;
-	parameters(axes: MultipleAxes): Map<SingleAxis, any>;
-	metrics(axes: MultipleAxes): Map<SingleAxis, any>;
+    key: number;
+    sequenceId: number;
+    id: string;
+    duration: number;
+    status: string;
+    acc?: FinalType; // draw accuracy graph
+    description: Parameters;
+    color?: string;
+    startTime?: number;
+    endTime?: number;
+    parameters(axes: MultipleAxes): Map<SingleAxis, any>;
+    metrics(axes: MultipleAxes): Map<SingleAxis, any>;
 }
 
 interface TableRecord {
-	key: string;
-	sequenceId: number;
-	startTime: number;
-	endTime?: number;
-	id: string;
-	duration: number;
-	status: string;
-	intermediateCount: number;
-	accuracy?: number;
-	latestAccuracy: number | undefined;
-	formattedLatestAccuracy: string; // format (LATEST/FINAL),
-	accDictionary: FinalType | undefined;
+    key: string;
+    sequenceId: number;
+    startTime: number;
+    endTime?: number;
+    id: string;
+    duration: number;
+    status: string;
+    intermediateCount: number;
+    accuracy?: number;
+    latestAccuracy: number | undefined;
+    formattedLatestAccuracy: string; // format (LATEST/FINAL),
+    accDictionary: FinalType | undefined;
 }
 
 interface SearchSpace {
-	_value: Array<number | string>;
-	_type: string;
+    _value: Array<number | string>;
+    _type: string;
 }
 
 interface FinalType {
-	default: string;
+    default: string;
 }
 
 interface ErrorParameter {
-	error?: string;
+    error?: string;
 }
 
 interface Parameters {
-	parameters: ErrorParameter;
-	logPath?: string;
-	intermediate: number[];
-	multiProgress?: number;
+    parameters: ErrorParameter;
+    logPath?: string;
+    intermediate: number[];
+    multiProgress?: number;
 }
 
 // trial accuracy
 interface AccurPoint {
-	acc: number;
-	index: number;
+    acc: number;
+    index: number;
 }
 
 interface DetailAccurPoint {
-	acc: number;
-	index: number;
-	searchSpace: object;
+    acc: number;
+    index: number;
+    searchSpace: object;
 }
 
 interface TooltipForIntermediate {
-	data: string;
-	seriesName: string;
-	dataIndex: number;
+    data: string;
+    seriesName: string;
+    dataIndex: number;
 }
 
 interface TooltipForAccuracy {
-	data: Array<number | object>;
+    data: Array<number | object>;
 }
 
 interface Dimobj {
-	dim: number;
-	name: string;
-	max?: number;
-	min?: number;
-	type?: string;
-	data?: string[];
-	boundaryGap?: boolean;
-	axisTick?: object;
-	axisLabel?: object;
-	axisLine?: object;
-	nameTextStyle?: object;
-	scale?: boolean;
+    dim: number;
+    name: string;
+    max?: number;
+    min?: number;
+    type?: string;
+    data?: string[];
+    boundaryGap?: boolean;
+    axisTick?: object;
+    axisLabel?: object;
+    axisLine?: object;
+    nameTextStyle?: object;
+    scale?: boolean;
 }
 
 interface ParaObj {
-	data: number[][];
-	parallelAxis: Array<Dimobj>;
+    data: number[][];
+    parallelAxis: Array<Dimobj>;
 }
 
 interface Intermedia {
-	name: string; // id
-	type: string;
-	data: Array<number | object>; // intermediate data
-	hyperPara: object; // each trial hyperpara value
+    name: string; // id
+    type: string;
+    data: Array<number | object>; // intermediate data
+    hyperPara: object; // each trial hyperpara value
 }
 
 interface MetricDataRecord {
-	timestamp: number;
-	trialJobId: string;
-	type: string;
-	sequence: number;
-	data: string;
+    timestamp: number;
+    trialJobId: string;
+    type: string;
+    sequence: number;
+    data: string;
 }
 
 interface TrialJobInfo {
-	id: string;
-	sequenceId: number;
-	status: string;
-	startTime?: number;
-	endTime?: number;
-	hyperParameters?: string[];
-	logPath?: string;
-	finalMetricData?: MetricDataRecord[];
-	stderrPath?: string;
+    id: string;
+    sequenceId: number;
+    status: string;
+    startTime?: number;
+    endTime?: number;
+    hyperParameters?: string[];
+    logPath?: string;
+    finalMetricData?: MetricDataRecord[];
+    stderrPath?: string;
 }
 
 interface ExperimentParams {
-	authorName: string;
-	experimentName: string;
-	description?: string;
-	trialConcurrency: number;
-	maxExecDuration: number; // seconds
-	maxTrialNum: number;
-	searchSpace: string;
-	trainingServicePlatform: string;
-	multiThread?: boolean;
-	versionCheck?: boolean;
-	logCollection?: string;
-	tuner?: {
-		className: string;
-		builtinTunerName?: string;
-		codeDir?: string;
-		classArgs?: any;
-		classFileName?: string;
-		checkpointDir: string;
-		gpuNum?: number;
-		includeIntermediateResults?: boolean;
-	};
-	assessor?: {
-		className: string;
-		builtinAssessorName?: string;
-		codeDir?: string;
-		classArgs?: any;
-		classFileName?: string;
-		checkpointDir: string;
-		gpuNum?: number;
-	};
-	advisor?: {
-		className: string;
-		builtinAdvisorName?: string;
-		codeDir?: string;
-		classArgs?: any;
-		classFileName?: string;
-		checkpointDir: string;
-		gpuNum?: number;
-	};
-	clusterMetaData?: {
-		key: string;
-		value: string;
-	}[];
+    authorName: string;
+    experimentName: string;
+    description?: string;
+    trialConcurrency: number;
+    maxExecDuration: number; // seconds
+    maxTrialNum: number;
+    searchSpace: string;
+    trainingServicePlatform: string;
+    multiThread?: boolean;
+    versionCheck?: boolean;
+    logCollection?: string;
+    tuner?: {
+        className: string;
+        builtinTunerName?: string;
+        codeDir?: string;
+        classArgs?: any;
+        classFileName?: string;
+        checkpointDir: string;
+        gpuNum?: number;
+        includeIntermediateResults?: boolean;
+    };
+    assessor?: {
+        className: string;
+        builtinAssessorName?: string;
+        codeDir?: string;
+        classArgs?: any;
+        classFileName?: string;
+        checkpointDir: string;
+        gpuNum?: number;
+    };
+    advisor?: {
+        className: string;
+        builtinAdvisorName?: string;
+        codeDir?: string;
+        classArgs?: any;
+        classFileName?: string;
+        checkpointDir: string;
+        gpuNum?: number;
+    };
+    clusterMetaData?: {
+        key: string;
+        value: string;
+    }[];
 }
 
 interface ExperimentProfile {
-	params: ExperimentParams;
-	id: string;
-	execDuration: number;
-	logDir?: string;
-	startTime?: number;
-	endTime?: number;
-	maxSequenceId: number;
-	revision: number;
+    params: ExperimentParams;
+    id: string;
+    execDuration: number;
+    logDir?: string;
+    startTime?: number;
+    endTime?: number;
+    maxSequenceId: number;
+    revision: number;
 }
 
 interface NNIManagerStatus {
-	status: string;
-	errors: string[];
+    status: string;
+    errors: string[];
 }
 
 interface EventMap {
-	[key: string]: () => void;
+    [key: string]: () => void;
 }
 
 export {
-	TableObj,
-	TableRecord,
-	SearchSpace,
-	FinalType,
-	ErrorParameter,
-	Parameters,
-	AccurPoint,
-	DetailAccurPoint,
-	TooltipForIntermediate,
-	TooltipForAccuracy,
-	Dimobj,
-	ParaObj,
-	Intermedia,
-	MetricDataRecord,
-	TrialJobInfo,
-	ExperimentParams,
-	ExperimentProfile,
-	NNIManagerStatus,
-	EventMap,
-	SingleAxis,
-	MultipleAxes
+    TableObj,
+    TableRecord,
+    SearchSpace,
+    FinalType,
+    ErrorParameter,
+    Parameters,
+    AccurPoint,
+    DetailAccurPoint,
+    TooltipForIntermediate,
+    TooltipForAccuracy,
+    Dimobj,
+    ParaObj,
+    Intermedia,
+    MetricDataRecord,
+    TrialJobInfo,
+    ExperimentParams,
+    ExperimentProfile,
+    NNIManagerStatus,
+    EventMap,
+    SingleAxis,
+    MultipleAxes
 };
diff --git a/src/webui/src/static/model/experiment.ts b/src/webui/src/static/model/experiment.ts
index 016ad83837..2cc29202c9 100644
--- a/src/webui/src/static/model/experiment.ts
+++ b/src/webui/src/static/model/experiment.ts
@@ -4,176 +4,176 @@ import { requestAxios } from '../function';
 import { SearchSpace } from './searchspace';
 
 function compareProfiles(profile1?: ExperimentProfile, profile2?: ExperimentProfile): boolean {
-	if (!profile1 || !profile2) {
-		return false;
-	}
-	const copy1 = Object.assign({}, profile1, { execDuration: undefined });
-	const copy2 = Object.assign({}, profile2, { execDuration: undefined });
-	return JSON.stringify(copy1) === JSON.stringify(copy2);
+    if (!profile1 || !profile2) {
+        return false;
+    }
+    const copy1 = Object.assign({}, profile1, { execDuration: undefined });
+    const copy2 = Object.assign({}, profile2, { execDuration: undefined });
+    return JSON.stringify(copy1) === JSON.stringify(copy2);
 }
 
 class Experiment {
-	private profileField?: ExperimentProfile = undefined;
-	private statusField?: NNIManagerStatus = undefined;
-	private isNestedExperiment: boolean = false;
-	private isexperimentError: boolean = false;
-	private experimentErrorMessage: string = '';
-	private isStatusError: boolean = false;
-	private statusErrorMessage: string = '';
-
-	public async init(): Promise<void> {
-		while (!this.profileField || !this.statusField) {
-			if (this.isexperimentError) {
-				return;
-			}
-			if (this.isStatusError) {
-				return;
-			}
-			await this.update();
-		}
-	}
-
-	public isNestedExp(): boolean {
-		return this.isNestedExperiment;
-	}
-
-	public experimentError(): boolean {
-		return this.isexperimentError;
-	}
-
-	public statusError(): boolean {
-		return this.isStatusError;
-	}
-
-	public getExperimentMessage(): string {
-		return this.experimentErrorMessage;
-	}
-
-	public getStatusMessage(): string {
-		return this.statusErrorMessage;
-	}
-
-	public async update(): Promise<boolean> {
-		let updated = false;
-
-		await requestAxios(`${MANAGER_IP}/experiment`)
-			.then(data => {
-				updated = updated || compareProfiles(this.profileField, data);
-				this.profileField = data;
-			})
-			.catch(error => {
-				this.isexperimentError = true;
-				this.experimentErrorMessage = `${error.message}`;
-				updated = true;
-			});
-
-		await requestAxios(`${MANAGER_IP}/check-status`)
-			.then(data => {
-				updated = JSON.stringify(this.statusField) === JSON.stringify(data);
-				this.statusField = data;
-			})
-			.catch(error => {
-				this.isStatusError = true;
-				this.statusErrorMessage = `${error.message}`;
-				updated = true;
-			});
-
-		return updated;
-	}
-
-	get profile(): ExperimentProfile {
-		if (!this.profileField) {
-			// throw Error('Experiment profile not initialized');
-			// set initProfile to prevent page broken
-			const initProfile = {
-				data: {
-					id: '',
-					revision: 0,
-					execDuration: 0,
-					logDir: '',
-					nextSequenceId: 0,
-					params: {
-						authorName: '',
-						experimentName: '',
-						trialConcurrency: 0,
-						maxExecDuration: 0,
-						maxTrialNum: 0,
-						searchSpace: 'null',
-						trainingServicePlatform: '',
-						tuner: {
-							builtinTunerName: 'TPE',
-							// eslint-disable-next-line @typescript-eslint/camelcase
-							classArgs: { optimize_mode: '' },
-							checkpointDir: ''
-						},
-						versionCheck: true,
-						clusterMetaData: [
-							{ key: '', value: '' },
-							{ key: '', value: '' }
-						]
-					},
-					startTime: 0,
-					endTime: 0
-				}
-			};
-			this.profileField = initProfile.data as any;
-		}
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		return this.profileField!;
-	}
-
-	get trialConcurrency(): number {
-		return this.profile.params.trialConcurrency;
-	}
-
-	get optimizeMode(): string {
-		const tuner = this.profile.params.tuner;
-		return tuner && tuner.classArgs && tuner.classArgs.optimize_mode ? tuner.classArgs.optimize_mode : 'unknown';
-	}
-
-	get trainingServicePlatform(): string {
-		return this.profile.params.trainingServicePlatform;
-	}
-
-	get searchSpace(): object {
-		const result = JSON.parse(this.profile.params.searchSpace);
-		for (const item in result) {
-			if (result[item]._value && typeof result[item]._value[0] === 'object') {
-				this.isNestedExperiment = true;
-				break;
-			}
-		}
-		return result;
-	}
-
-	get searchSpaceNew(): SearchSpace {
-		// The search space derived directly from profile
-		// eventually this will replace searchSpace
-		return new SearchSpace('', '', this.searchSpace);
-	}
-
-	get logCollectionEnabled(): boolean {
-		return !!(this.profile.params.logCollection && this.profile.params.logCollection !== 'none');
-	}
-
-	get status(): string {
-		if (!this.statusField) {
-			// throw Error('Experiment status not initialized');
-			// this.statusField.status = '';
-			return '';
-		}
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		return this.statusField!.status;
-	}
-
-	get error(): string {
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		if (!this.statusField) {
-			throw Error('Experiment status not initialized');
-		}
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		return this.statusField!.errors[0] || '';
-	}
+    private profileField?: ExperimentProfile = undefined;
+    private statusField?: NNIManagerStatus = undefined;
+    private isNestedExperiment: boolean = false;
+    private isexperimentError: boolean = false;
+    private experimentErrorMessage: string = '';
+    private isStatusError: boolean = false;
+    private statusErrorMessage: string = '';
+
+    public async init(): Promise<void> {
+        while (!this.profileField || !this.statusField) {
+            if (this.isexperimentError) {
+                return;
+            }
+            if (this.isStatusError) {
+                return;
+            }
+            await this.update();
+        }
+    }
+
+    public isNestedExp(): boolean {
+        return this.isNestedExperiment;
+    }
+
+    public experimentError(): boolean {
+        return this.isexperimentError;
+    }
+
+    public statusError(): boolean {
+        return this.isStatusError;
+    }
+
+    public getExperimentMessage(): string {
+        return this.experimentErrorMessage;
+    }
+
+    public getStatusMessage(): string {
+        return this.statusErrorMessage;
+    }
+
+    public async update(): Promise<boolean> {
+        let updated = false;
+
+        await requestAxios(`${MANAGER_IP}/experiment`)
+            .then(data => {
+                updated = updated || compareProfiles(this.profileField, data);
+                this.profileField = data;
+            })
+            .catch(error => {
+                this.isexperimentError = true;
+                this.experimentErrorMessage = `${error.message}`;
+                updated = true;
+            });
+
+        await requestAxios(`${MANAGER_IP}/check-status`)
+            .then(data => {
+                updated = JSON.stringify(this.statusField) === JSON.stringify(data);
+                this.statusField = data;
+            })
+            .catch(error => {
+                this.isStatusError = true;
+                this.statusErrorMessage = `${error.message}`;
+                updated = true;
+            });
+
+        return updated;
+    }
+
+    get profile(): ExperimentProfile {
+        if (!this.profileField) {
+            // throw Error('Experiment profile not initialized');
+            // set initProfile to prevent page broken
+            const initProfile = {
+                data: {
+                    id: '',
+                    revision: 0,
+                    execDuration: 0,
+                    logDir: '',
+                    nextSequenceId: 0,
+                    params: {
+                        authorName: '',
+                        experimentName: '',
+                        trialConcurrency: 0,
+                        maxExecDuration: 0,
+                        maxTrialNum: 0,
+                        searchSpace: 'null',
+                        trainingServicePlatform: '',
+                        tuner: {
+                            builtinTunerName: 'TPE',
+                            // eslint-disable-next-line @typescript-eslint/camelcase
+                            classArgs: { optimize_mode: '' },
+                            checkpointDir: ''
+                        },
+                        versionCheck: true,
+                        clusterMetaData: [
+                            { key: '', value: '' },
+                            { key: '', value: '' }
+                        ]
+                    },
+                    startTime: 0,
+                    endTime: 0
+                }
+            };
+            this.profileField = initProfile.data as any;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return this.profileField!;
+    }
+
+    get trialConcurrency(): number {
+        return this.profile.params.trialConcurrency;
+    }
+
+    get optimizeMode(): string {
+        const tuner = this.profile.params.tuner;
+        return tuner && tuner.classArgs && tuner.classArgs.optimize_mode ? tuner.classArgs.optimize_mode : 'unknown';
+    }
+
+    get trainingServicePlatform(): string {
+        return this.profile.params.trainingServicePlatform;
+    }
+
+    get searchSpace(): object {
+        const result = JSON.parse(this.profile.params.searchSpace);
+        for (const item in result) {
+            if (result[item]._value && typeof result[item]._value[0] === 'object') {
+                this.isNestedExperiment = true;
+                break;
+            }
+        }
+        return result;
+    }
+
+    get searchSpaceNew(): SearchSpace {
+        // The search space derived directly from profile
+        // eventually this will replace searchSpace
+        return new SearchSpace('', '', this.searchSpace);
+    }
+
+    get logCollectionEnabled(): boolean {
+        return !!(this.profile.params.logCollection && this.profile.params.logCollection !== 'none');
+    }
+
+    get status(): string {
+        if (!this.statusField) {
+            // throw Error('Experiment status not initialized');
+            // this.statusField.status = '';
+            return '';
+        }
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return this.statusField!.status;
+    }
+
+    get error(): string {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        if (!this.statusField) {
+            throw Error('Experiment status not initialized');
+        }
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return this.statusField!.errors[0] || '';
+    }
 }
 
 export { Experiment };
diff --git a/src/webui/src/static/model/searchspace.ts b/src/webui/src/static/model/searchspace.ts
index 63297e471d..24c12472e2 100644
--- a/src/webui/src/static/model/searchspace.ts
+++ b/src/webui/src/static/model/searchspace.ts
@@ -2,180 +2,180 @@ import { SingleAxis, MultipleAxes, TableObj } from '../interface';
 import { SUPPORTED_SEARCH_SPACE_TYPE } from '../const';
 
 function fullNameJoin(prefix: string, name: string): string {
-	return prefix ? prefix + '/' + name : name;
+    return prefix ? prefix + '/' + name : name;
 }
 
 class NumericAxis implements SingleAxis {
-	min: number = 0;
-	max: number = 0;
-	type: string;
-	baseName: string;
-	fullName: string;
-	scale: 'log' | 'linear';
-	nested = false;
+    min: number = 0;
+    max: number = 0;
+    type: string;
+    baseName: string;
+    fullName: string;
+    scale: 'log' | 'linear';
+    nested = false;
 
-	constructor(baseName: string, fullName: string, type: string, value: any) {
-		this.baseName = baseName;
-		this.fullName = fullName;
-		this.type = type;
-		this.scale = type.includes('log') ? 'log' : 'linear';
-		if (type === 'randint') {
-			this.min = value[0];
-			this.max = value[1] - 1;
-		} else if (type.includes('uniform')) {
-			this.min = value[0];
-			this.max = value[1];
-		} else if (type.includes('normal')) {
-			const [mu, sigma] = [value[0], value[1]];
-			this.min = mu - 4 * sigma;
-			this.max = mu + 4 * sigma;
-			if (this.scale === 'log') {
-				this.min = Math.exp(this.min);
-				this.max = Math.exp(this.max);
-			}
-		}
-	}
+    constructor(baseName: string, fullName: string, type: string, value: any) {
+        this.baseName = baseName;
+        this.fullName = fullName;
+        this.type = type;
+        this.scale = type.includes('log') ? 'log' : 'linear';
+        if (type === 'randint') {
+            this.min = value[0];
+            this.max = value[1] - 1;
+        } else if (type.includes('uniform')) {
+            this.min = value[0];
+            this.max = value[1];
+        } else if (type.includes('normal')) {
+            const [mu, sigma] = [value[0], value[1]];
+            this.min = mu - 4 * sigma;
+            this.max = mu + 4 * sigma;
+            if (this.scale === 'log') {
+                this.min = Math.exp(this.min);
+                this.max = Math.exp(this.max);
+            }
+        }
+    }
 
-	get domain(): [number, number] {
-		return [this.min, this.max];
-	}
+    get domain(): [number, number] {
+        return [this.min, this.max];
+    }
 }
 
 class SimpleOrdinalAxis implements SingleAxis {
-	type: string;
-	baseName: string;
-	fullName: string;
-	scale: 'ordinal' = 'ordinal';
-	domain: any[];
-	nested = false;
-	constructor(baseName: string, fullName: string, type: string, value: any) {
-		this.baseName = baseName;
-		this.fullName = fullName;
-		this.type = type;
-		this.domain = value;
-	}
+    type: string;
+    baseName: string;
+    fullName: string;
+    scale: 'ordinal' = 'ordinal';
+    domain: any[];
+    nested = false;
+    constructor(baseName: string, fullName: string, type: string, value: any) {
+        this.baseName = baseName;
+        this.fullName = fullName;
+        this.type = type;
+        this.domain = value;
+    }
 }
 
 class NestedOrdinalAxis implements SingleAxis {
-	type: string;
-	baseName: string;
-	fullName: string;
-	scale: 'ordinal' = 'ordinal';
-	domain = new Map<string, MultipleAxes>();
-	nested = true;
-	constructor(baseName: any, fullName: string, type: any, value: any) {
-		this.baseName = baseName;
-		this.fullName = fullName;
-		this.type = type;
-		for (const v of value) {
-			// eslint-disable-next-line @typescript-eslint/no-use-before-define
-			this.domain.set(v._name, new SearchSpace(v._name, fullNameJoin(fullName, v._name), v));
-		}
-	}
+    type: string;
+    baseName: string;
+    fullName: string;
+    scale: 'ordinal' = 'ordinal';
+    domain = new Map<string, MultipleAxes>();
+    nested = true;
+    constructor(baseName: any, fullName: string, type: any, value: any) {
+        this.baseName = baseName;
+        this.fullName = fullName;
+        this.type = type;
+        for (const v of value) {
+            // eslint-disable-next-line @typescript-eslint/no-use-before-define
+            this.domain.set(v._name, new SearchSpace(v._name, fullNameJoin(fullName, v._name), v));
+        }
+    }
 }
 
 export class SearchSpace implements MultipleAxes {
-	axes = new Map<string, SingleAxis>();
-	baseName: string;
-	fullName: string;
+    axes = new Map<string, SingleAxis>();
+    baseName: string;
+    fullName: string;
 
-	constructor(baseName: string, fullName: string, searchSpaceSpec: any) {
-		this.baseName = baseName;
-		this.fullName = fullName;
-		if (searchSpaceSpec === undefined) {
-			return;
-		}
-		Object.entries(searchSpaceSpec).forEach(item => {
-			const key = item[0],
-				spec = item[1] as any;
-			if (key === '_name') {
-				return;
-			} else if (['choice', 'layer_choice', 'input_choice'].includes(spec._type)) {
-				// ordinal types
-				if (spec._value && typeof spec._value[0] === 'object') {
-					// nested dimension
-					this.axes.set(
-						key,
-						new NestedOrdinalAxis(key, fullNameJoin(fullName, key), spec._type, spec._value)
-					);
-				} else {
-					this.axes.set(
-						key,
-						new SimpleOrdinalAxis(key, fullNameJoin(fullName, key), spec._type, spec._value)
-					);
-				}
-			} else if (SUPPORTED_SEARCH_SPACE_TYPE.includes(spec._type)) {
-				this.axes.set(key, new NumericAxis(key, fullName + key, spec._type, spec._value));
-			}
-		});
-	}
+    constructor(baseName: string, fullName: string, searchSpaceSpec: any) {
+        this.baseName = baseName;
+        this.fullName = fullName;
+        if (searchSpaceSpec === undefined) {
+            return;
+        }
+        Object.entries(searchSpaceSpec).forEach(item => {
+            const key = item[0],
+                spec = item[1] as any;
+            if (key === '_name') {
+                return;
+            } else if (['choice', 'layer_choice', 'input_choice'].includes(spec._type)) {
+                // ordinal types
+                if (spec._value && typeof spec._value[0] === 'object') {
+                    // nested dimension
+                    this.axes.set(
+                        key,
+                        new NestedOrdinalAxis(key, fullNameJoin(fullName, key), spec._type, spec._value)
+                    );
+                } else {
+                    this.axes.set(
+                        key,
+                        new SimpleOrdinalAxis(key, fullNameJoin(fullName, key), spec._type, spec._value)
+                    );
+                }
+            } else if (SUPPORTED_SEARCH_SPACE_TYPE.includes(spec._type)) {
+                this.axes.set(key, new NumericAxis(key, fullName + key, spec._type, spec._value));
+            }
+        });
+    }
 
-	static inferFromTrials(searchSpace: SearchSpace, trials: TableObj[]): SearchSpace {
-		const newSearchSpace = new SearchSpace(searchSpace.baseName, searchSpace.fullName, undefined);
-		for (const [k, v] of searchSpace.axes) {
-			newSearchSpace.axes.set(k, v);
-		}
-		// Add axis inferred from trials columns
-		const addingColumns = new Map<string, any[]>();
-		for (const trial of trials) {
-			try {
-				trial.parameters(searchSpace);
-			} catch (unexpectedEntries) {
-				// eslint-disable-next-line no-console
-				console.log(unexpectedEntries);
-				for (const [k, v] of unexpectedEntries as Map<string, any>) {
-					const column = addingColumns.get(k);
-					if (column === undefined) {
-						addingColumns.set(k, [v]);
-					} else {
-						column.push(v);
-					}
-				}
-			}
-		}
-		addingColumns.forEach((value, key) => {
-			if (value.every(v => typeof v === 'number')) {
-				newSearchSpace.axes.set(
-					key,
-					new NumericAxis(key, key, 'uniform', [Math.min(...value), Math.max(...value)])
-				);
-			} else {
-				newSearchSpace.axes.set(key, new SimpleOrdinalAxis(key, key, 'choice', new Set(value).values()));
-			}
-		});
-		return newSearchSpace;
-	}
+    static inferFromTrials(searchSpace: SearchSpace, trials: TableObj[]): SearchSpace {
+        const newSearchSpace = new SearchSpace(searchSpace.baseName, searchSpace.fullName, undefined);
+        for (const [k, v] of searchSpace.axes) {
+            newSearchSpace.axes.set(k, v);
+        }
+        // Add axis inferred from trials columns
+        const addingColumns = new Map<string, any[]>();
+        for (const trial of trials) {
+            try {
+                trial.parameters(searchSpace);
+            } catch (unexpectedEntries) {
+                // eslint-disable-next-line no-console
+                console.log(unexpectedEntries);
+                for (const [k, v] of unexpectedEntries as Map<string, any>) {
+                    const column = addingColumns.get(k);
+                    if (column === undefined) {
+                        addingColumns.set(k, [v]);
+                    } else {
+                        column.push(v);
+                    }
+                }
+            }
+        }
+        addingColumns.forEach((value, key) => {
+            if (value.every(v => typeof v === 'number')) {
+                newSearchSpace.axes.set(
+                    key,
+                    new NumericAxis(key, key, 'uniform', [Math.min(...value), Math.max(...value)])
+                );
+            } else {
+                newSearchSpace.axes.set(key, new SimpleOrdinalAxis(key, key, 'choice', new Set(value).values()));
+            }
+        });
+        return newSearchSpace;
+    }
 }
 
 export class MetricSpace implements MultipleAxes {
-	axes = new Map<string, SingleAxis>();
-	baseName = '';
-	fullName = '';
+    axes = new Map<string, SingleAxis>();
+    baseName = '';
+    fullName = '';
 
-	constructor(trials: TableObj[]) {
-		const columns = new Map<string, any[]>();
-		for (const trial of trials) {
-			if (trial.acc === undefined) {
-				continue;
-			}
-			// TODO: handle more than number and object
-			const acc = typeof trial.acc === 'number' ? { default: trial.acc } : trial.acc;
-			Object.entries(acc).forEach(item => {
-				const [k, v] = item;
-				const column = columns.get(k);
-				if (column === undefined) {
-					columns.set(k, [v]);
-				} else {
-					column.push(v);
-				}
-			});
-		}
-		columns.forEach((value, key) => {
-			if (value.every(v => typeof v === 'number')) {
-				this.axes.set(key, new NumericAxis(key, key, 'uniform', [Math.min(...value), Math.max(...value)]));
-			} else {
-				// TODO: skip for now
-			}
-		});
-	}
+    constructor(trials: TableObj[]) {
+        const columns = new Map<string, any[]>();
+        for (const trial of trials) {
+            if (trial.acc === undefined) {
+                continue;
+            }
+            // TODO: handle more than number and object
+            const acc = typeof trial.acc === 'number' ? { default: trial.acc } : trial.acc;
+            Object.entries(acc).forEach(item => {
+                const [k, v] = item;
+                const column = columns.get(k);
+                if (column === undefined) {
+                    columns.set(k, [v]);
+                } else {
+                    column.push(v);
+                }
+            });
+        }
+        columns.forEach((value, key) => {
+            if (value.every(v => typeof v === 'number')) {
+                this.axes.set(key, new NumericAxis(key, key, 'uniform', [Math.min(...value), Math.max(...value)]));
+            } else {
+                // TODO: skip for now
+            }
+        });
+    }
 }
diff --git a/src/webui/src/static/model/trial.ts b/src/webui/src/static/model/trial.ts
index 7954cbc848..55c2b86fd6 100644
--- a/src/webui/src/static/model/trial.ts
+++ b/src/webui/src/static/model/trial.ts
@@ -1,12 +1,12 @@
 import {
-	MetricDataRecord,
-	TrialJobInfo,
-	TableObj,
-	TableRecord,
-	Parameters,
-	FinalType,
-	MultipleAxes,
-	SingleAxis
+    MetricDataRecord,
+    TrialJobInfo,
+    TableObj,
+    TableRecord,
+    Parameters,
+    FinalType,
+    MultipleAxes,
+    SingleAxis
 } from '../interface';
 import { getFinal, formatAccuracy, metricAccuracy, parseMetrics, isArrayType } from '../function';
 
@@ -18,311 +18,311 @@ import { getFinal, formatAccuracy, metricAccuracy, parseMetrics, isArrayType } f
  * @returns Parsed structured parameters and unexpected entries
  */
 function inferTrialParameters(
-	paramObj: object,
-	space: MultipleAxes,
-	prefix: string = ''
+    paramObj: object,
+    space: MultipleAxes,
+    prefix: string = ''
 ): [Map<SingleAxis, any>, Map<string, any>] {
-	const parameters = new Map<SingleAxis, any>();
-	const unexpectedEntries = new Map<string, any>();
-	for (const [k, v] of Object.entries(paramObj)) {
-		// prefix can be a good fallback when corresponding item is not found in namespace
-		const axisKey = space.axes.get(k);
-		if (prefix && k === '_name') continue;
-		if (axisKey !== undefined) {
-			if (typeof v === 'object' && v._name !== undefined && axisKey.nested) {
-				// nested entry
-				parameters.set(axisKey, v._name);
-				const subSpace = axisKey.domain.get(v._name);
-				if (subSpace !== undefined) {
-					const [subParams, subUnexpected] = inferTrialParameters(v, subSpace, prefix + k + '/');
-					subParams.forEach((v, k) => parameters.set(k, v));
-					subUnexpected.forEach((v, k) => unexpectedEntries.set(k, v));
-				}
-			} else {
-				parameters.set(axisKey, v);
-			}
-		} else {
-			unexpectedEntries.set(prefix + k, v);
-		}
-	}
-	return [parameters, unexpectedEntries];
+    const parameters = new Map<SingleAxis, any>();
+    const unexpectedEntries = new Map<string, any>();
+    for (const [k, v] of Object.entries(paramObj)) {
+        // prefix can be a good fallback when corresponding item is not found in namespace
+        const axisKey = space.axes.get(k);
+        if (prefix && k === '_name') continue;
+        if (axisKey !== undefined) {
+            if (typeof v === 'object' && v._name !== undefined && axisKey.nested) {
+                // nested entry
+                parameters.set(axisKey, v._name);
+                const subSpace = axisKey.domain.get(v._name);
+                if (subSpace !== undefined) {
+                    const [subParams, subUnexpected] = inferTrialParameters(v, subSpace, prefix + k + '/');
+                    subParams.forEach((v, k) => parameters.set(k, v));
+                    subUnexpected.forEach((v, k) => unexpectedEntries.set(k, v));
+                }
+            } else {
+                parameters.set(axisKey, v);
+            }
+        } else {
+            unexpectedEntries.set(prefix + k, v);
+        }
+    }
+    return [parameters, unexpectedEntries];
 }
 
 class Trial implements TableObj {
-	private metricsInitialized: boolean = false;
-	private infoField: TrialJobInfo | undefined;
-	private intermediates: (MetricDataRecord | undefined)[] = [];
-	public final: MetricDataRecord | undefined;
-	private finalAcc: number | undefined;
+    private metricsInitialized: boolean = false;
+    private infoField: TrialJobInfo | undefined;
+    private intermediates: (MetricDataRecord | undefined)[] = [];
+    public final: MetricDataRecord | undefined;
+    private finalAcc: number | undefined;
 
-	constructor(info?: TrialJobInfo, metrics?: MetricDataRecord[]) {
-		this.infoField = info;
-		if (metrics) {
-			this.updateMetrics(metrics);
-		}
-	}
+    constructor(info?: TrialJobInfo, metrics?: MetricDataRecord[]) {
+        this.infoField = info;
+        if (metrics) {
+            this.updateMetrics(metrics);
+        }
+    }
 
-	public compareAccuracy(otherTrial: Trial): number | undefined {
-		if (!this.sortable || !otherTrial.sortable) {
-			return undefined;
-		}
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		return this.finalAcc! - otherTrial.finalAcc!;
-	}
+    public compareAccuracy(otherTrial: Trial): number | undefined {
+        if (!this.sortable || !otherTrial.sortable) {
+            return undefined;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return this.finalAcc! - otherTrial.finalAcc!;
+    }
 
-	get info(): TrialJobInfo {
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		return this.infoField!;
-	}
+    get info(): TrialJobInfo {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return this.infoField!;
+    }
 
-	get intermediateMetrics(): MetricDataRecord[] {
-		const ret: MetricDataRecord[] = [];
-		for (let i = 0; i < this.intermediates.length; i++) {
-			if (this.intermediates[i]) {
-				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-				ret.push(this.intermediates[i]!);
-			} else {
-				break;
-			}
-		}
-		return ret;
-	}
+    get intermediateMetrics(): MetricDataRecord[] {
+        const ret: MetricDataRecord[] = [];
+        for (let i = 0; i < this.intermediates.length; i++) {
+            if (this.intermediates[i]) {
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                ret.push(this.intermediates[i]!);
+            } else {
+                break;
+            }
+        }
+        return ret;
+    }
 
-	get accuracy(): number | undefined {
-		return this.finalAcc;
-	}
+    get accuracy(): number | undefined {
+        return this.finalAcc;
+    }
 
-	get sortable(): boolean {
-		return this.metricsInitialized && this.finalAcc !== undefined && !isNaN(this.finalAcc);
-	}
+    get sortable(): boolean {
+        return this.metricsInitialized && this.finalAcc !== undefined && !isNaN(this.finalAcc);
+    }
 
-	get latestAccuracy(): number | undefined {
-		if (this.accuracy !== undefined) {
-			return this.accuracy;
-		} else if (this.intermediates.length > 0) {
-			const temp = this.intermediates[this.intermediates.length - 1];
-			if (temp !== undefined) {
-				if (isArrayType(parseMetrics(temp.data))) {
-					return undefined;
-				} else if (
-					typeof parseMetrics(temp.data) === 'object' &&
-					parseMetrics(temp.data).hasOwnProperty('default')
-				) {
-					return parseMetrics(temp.data).default;
-				} else if (typeof parseMetrics(temp.data) === 'number') {
-					return parseMetrics(temp.data);
-				}
-			} else {
-				return undefined;
-			}
-		} else {
-			return undefined;
-		}
-	}
-	/* table obj start */
+    get latestAccuracy(): number | undefined {
+        if (this.accuracy !== undefined) {
+            return this.accuracy;
+        } else if (this.intermediates.length > 0) {
+            const temp = this.intermediates[this.intermediates.length - 1];
+            if (temp !== undefined) {
+                if (isArrayType(parseMetrics(temp.data))) {
+                    return undefined;
+                } else if (
+                    typeof parseMetrics(temp.data) === 'object' &&
+                    parseMetrics(temp.data).hasOwnProperty('default')
+                ) {
+                    return parseMetrics(temp.data).default;
+                } else if (typeof parseMetrics(temp.data) === 'number') {
+                    return parseMetrics(temp.data);
+                }
+            } else {
+                return undefined;
+            }
+        } else {
+            return undefined;
+        }
+    }
+    /* table obj start */
 
-	get tableRecord(): TableRecord {
-		const endTime = this.info.endTime || new Date().getTime();
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		const duration = (endTime - this.info.startTime!) / 1000;
+    get tableRecord(): TableRecord {
+        const endTime = this.info.endTime || new Date().getTime();
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const duration = (endTime - this.info.startTime!) / 1000;
 
-		return {
-			key: this.info.id,
-			sequenceId: this.info.sequenceId,
-			id: this.info.id,
-			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-			startTime: this.info.startTime!,
-			endTime: this.info.endTime,
-			duration,
-			status: this.info.status,
-			intermediateCount: this.intermediates.length,
-			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-			accuracy: this.acc !== undefined ? JSON.parse(this.acc!.default) : undefined,
-			latestAccuracy: this.latestAccuracy,
-			formattedLatestAccuracy: this.formatLatestAccuracy(),
-			accDictionary: this.acc
-		};
-	}
+        return {
+            key: this.info.id,
+            sequenceId: this.info.sequenceId,
+            id: this.info.id,
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            startTime: this.info.startTime!,
+            endTime: this.info.endTime,
+            duration,
+            status: this.info.status,
+            intermediateCount: this.intermediates.length,
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            accuracy: this.acc !== undefined ? JSON.parse(this.acc!.default) : undefined,
+            latestAccuracy: this.latestAccuracy,
+            formattedLatestAccuracy: this.formatLatestAccuracy(),
+            accDictionary: this.acc
+        };
+    }
 
-	get key(): number {
-		return this.info.sequenceId;
-	}
+    get key(): number {
+        return this.info.sequenceId;
+    }
 
-	get sequenceId(): number {
-		return this.info.sequenceId;
-	}
+    get sequenceId(): number {
+        return this.info.sequenceId;
+    }
 
-	get id(): string {
-		return this.info.id;
-	}
+    get id(): string {
+        return this.info.id;
+    }
 
-	get duration(): number {
-		const endTime = this.info.endTime || new Date().getTime();
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		return (endTime - this.info.startTime!) / 1000;
-	}
+    get duration(): number {
+        const endTime = this.info.endTime || new Date().getTime();
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return (endTime - this.info.startTime!) / 1000;
+    }
 
-	get status(): string {
-		return this.info.status;
-	}
+    get status(): string {
+        return this.info.status;
+    }
 
-	get acc(): FinalType | undefined {
-		return getFinal(this.info.finalMetricData);
-	}
+    get acc(): FinalType | undefined {
+        return getFinal(this.info.finalMetricData);
+    }
 
-	get description(): Parameters {
-		const ret: Parameters = {
-			parameters: {},
-			intermediate: [],
-			multiProgress: 1
-		};
-		const tempHyper = this.info.hyperParameters;
-		if (tempHyper !== undefined) {
-			const getPara = JSON.parse(tempHyper[tempHyper.length - 1]).parameters;
-			ret.multiProgress = tempHyper.length;
-			if (typeof getPara === 'string') {
-				ret.parameters = JSON.parse(getPara);
-			} else {
-				ret.parameters = getPara;
-			}
-		} else {
-			ret.parameters = { error: "This trial's parameters are not available." };
-		}
-		if (this.info.logPath !== undefined) {
-			ret.logPath = this.info.logPath;
-		}
+    get description(): Parameters {
+        const ret: Parameters = {
+            parameters: {},
+            intermediate: [],
+            multiProgress: 1
+        };
+        const tempHyper = this.info.hyperParameters;
+        if (tempHyper !== undefined) {
+            const getPara = JSON.parse(tempHyper[tempHyper.length - 1]).parameters;
+            ret.multiProgress = tempHyper.length;
+            if (typeof getPara === 'string') {
+                ret.parameters = JSON.parse(getPara);
+            } else {
+                ret.parameters = getPara;
+            }
+        } else {
+            ret.parameters = { error: "This trial's parameters are not available." };
+        }
+        if (this.info.logPath !== undefined) {
+            ret.logPath = this.info.logPath;
+        }
 
-		const mediate: number[] = [];
-		for (const items of this.intermediateMetrics) {
-			if (typeof parseMetrics(items.data) === 'object') {
-				mediate.push(parseMetrics(items.data).default);
-			} else {
-				mediate.push(parseMetrics(items.data));
-			}
-		}
-		ret.intermediate = mediate;
-		return ret;
-	}
+        const mediate: number[] = [];
+        for (const items of this.intermediateMetrics) {
+            if (typeof parseMetrics(items.data) === 'object') {
+                mediate.push(parseMetrics(items.data).default);
+            } else {
+                mediate.push(parseMetrics(items.data));
+            }
+        }
+        ret.intermediate = mediate;
+        return ret;
+    }
 
-	public parameters(axes: MultipleAxes): Map<SingleAxis, any> {
-		const tempHyper = this.info.hyperParameters;
-		if (tempHyper === undefined) {
-			throw new Map([['error', "This trial's parameters are not available."]]);
-		} else {
-			let params = JSON.parse(tempHyper[tempHyper.length - 1]).parameters;
-			if (typeof params === 'string') {
-				params = JSON.parse(params);
-			}
-			const [result, unexpectedEntries] = inferTrialParameters(params, axes);
-			if (unexpectedEntries.size) {
-				throw unexpectedEntries;
-			}
-			return result;
-		}
-	}
+    public parameters(axes: MultipleAxes): Map<SingleAxis, any> {
+        const tempHyper = this.info.hyperParameters;
+        if (tempHyper === undefined) {
+            throw new Map([['error', "This trial's parameters are not available."]]);
+        } else {
+            let params = JSON.parse(tempHyper[tempHyper.length - 1]).parameters;
+            if (typeof params === 'string') {
+                params = JSON.parse(params);
+            }
+            const [result, unexpectedEntries] = inferTrialParameters(params, axes);
+            if (unexpectedEntries.size) {
+                throw unexpectedEntries;
+            }
+            return result;
+        }
+    }
 
-	public metrics(space: MultipleAxes): Map<SingleAxis, any> {
-		const ret = new Map<SingleAxis, any>();
-		const unexpectedEntries = new Map<string, any>();
-		if (this.acc === undefined) {
-			return ret;
-		}
-		const acc = typeof this.acc === 'number' ? { default: this.acc } : this.acc;
-		Object.entries(acc).forEach(item => {
-			const [k, v] = item;
-			const column = space.axes.get(k);
-			if (column !== undefined) {
-				ret.set(column, v);
-			} else {
-				unexpectedEntries.set(k, v);
-			}
-		});
-		if (unexpectedEntries.size) {
-			throw unexpectedEntries;
-		}
-		return ret;
-	}
+    public metrics(space: MultipleAxes): Map<SingleAxis, any> {
+        const ret = new Map<SingleAxis, any>();
+        const unexpectedEntries = new Map<string, any>();
+        if (this.acc === undefined) {
+            return ret;
+        }
+        const acc = typeof this.acc === 'number' ? { default: this.acc } : this.acc;
+        Object.entries(acc).forEach(item => {
+            const [k, v] = item;
+            const column = space.axes.get(k);
+            if (column !== undefined) {
+                ret.set(column, v);
+            } else {
+                unexpectedEntries.set(k, v);
+            }
+        });
+        if (unexpectedEntries.size) {
+            throw unexpectedEntries;
+        }
+        return ret;
+    }
 
-	get color(): string | undefined {
-		return undefined;
-	}
+    get color(): string | undefined {
+        return undefined;
+    }
 
-	public finalKeys(): string[] {
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		return Object.keys(this.acc!);
-	}
+    public finalKeys(): string[] {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return Object.keys(this.acc!);
+    }
 
-	/* table obj end */
+    /* table obj end */
 
-	public initialized(): boolean {
-		return Boolean(this.infoField);
-	}
+    public initialized(): boolean {
+        return Boolean(this.infoField);
+    }
 
-	public updateMetrics(metrics: MetricDataRecord[]): boolean {
-		// parameter `metrics` must contain all known metrics of this trial
-		this.metricsInitialized = true;
-		const prevMetricCnt = this.intermediates.length + (this.final ? 1 : 0);
-		if (metrics.length <= prevMetricCnt) {
-			return false;
-		}
-		for (const metric of metrics) {
-			if (metric.type === 'PERIODICAL') {
-				this.intermediates[metric.sequence] = metric;
-			} else {
-				this.final = metric;
-				this.finalAcc = metricAccuracy(metric);
-			}
-		}
-		return true;
-	}
+    public updateMetrics(metrics: MetricDataRecord[]): boolean {
+        // parameter `metrics` must contain all known metrics of this trial
+        this.metricsInitialized = true;
+        const prevMetricCnt = this.intermediates.length + (this.final ? 1 : 0);
+        if (metrics.length <= prevMetricCnt) {
+            return false;
+        }
+        for (const metric of metrics) {
+            if (metric.type === 'PERIODICAL') {
+                this.intermediates[metric.sequence] = metric;
+            } else {
+                this.final = metric;
+                this.finalAcc = metricAccuracy(metric);
+            }
+        }
+        return true;
+    }
 
-	public updateLatestMetrics(metrics: MetricDataRecord[]): boolean {
-		// this method is effectively identical to `updateMetrics`, but has worse performance
-		this.metricsInitialized = true;
-		let updated = false;
-		for (const metric of metrics) {
-			if (metric.type === 'PERIODICAL') {
-				updated = updated || !this.intermediates[metric.sequence];
-				this.intermediates[metric.sequence] = metric;
-			} else {
-				updated = updated || !this.final;
-				this.final = metric;
-				this.finalAcc = metricAccuracy(metric);
-			}
-		}
-		return updated;
-	}
+    public updateLatestMetrics(metrics: MetricDataRecord[]): boolean {
+        // this method is effectively identical to `updateMetrics`, but has worse performance
+        this.metricsInitialized = true;
+        let updated = false;
+        for (const metric of metrics) {
+            if (metric.type === 'PERIODICAL') {
+                updated = updated || !this.intermediates[metric.sequence];
+                this.intermediates[metric.sequence] = metric;
+            } else {
+                updated = updated || !this.final;
+                this.final = metric;
+                this.finalAcc = metricAccuracy(metric);
+            }
+        }
+        return updated;
+    }
 
-	public updateTrialJobInfo(trialJobInfo: TrialJobInfo): boolean {
-		const same = this.infoField && this.infoField.status === trialJobInfo.status;
-		this.infoField = trialJobInfo;
-		if (trialJobInfo.finalMetricData) {
-			this.final = trialJobInfo.finalMetricData[trialJobInfo.finalMetricData.length - 1];
-			this.finalAcc = metricAccuracy(this.final);
-		}
-		return !same;
-	}
+    public updateTrialJobInfo(trialJobInfo: TrialJobInfo): boolean {
+        const same = this.infoField && this.infoField.status === trialJobInfo.status;
+        this.infoField = trialJobInfo;
+        if (trialJobInfo.finalMetricData) {
+            this.final = trialJobInfo.finalMetricData[trialJobInfo.finalMetricData.length - 1];
+            this.finalAcc = metricAccuracy(this.final);
+        }
+        return !same;
+    }
 
-	public formatLatestAccuracy(): string {
-		// TODO: this should be private
-		if (this.accuracy !== undefined) {
-			if (isNaN(this.accuracy)) {
-				return this.accuracy.toString();
-			} else {
-				return `${formatAccuracy(this.accuracy)} (FINAL)`;
-			}
-		} else if (this.intermediates.length === 0) {
-			return '--';
-		} else {
-			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-			const latest = this.intermediates[this.intermediates.length - 1]!;
-			if (isNaN(metricAccuracy(latest))) {
-				return 'NaN';
-			} else {
-				return `${formatAccuracy(metricAccuracy(latest))} (LATEST)`;
-			}
-		}
-	}
+    public formatLatestAccuracy(): string {
+        // TODO: this should be private
+        if (this.accuracy !== undefined) {
+            if (isNaN(this.accuracy)) {
+                return this.accuracy.toString();
+            } else {
+                return `${formatAccuracy(this.accuracy)} (FINAL)`;
+            }
+        } else if (this.intermediates.length === 0) {
+            return '--';
+        } else {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const latest = this.intermediates[this.intermediates.length - 1]!;
+            if (isNaN(metricAccuracy(latest))) {
+                return 'NaN';
+            } else {
+                return `${formatAccuracy(metricAccuracy(latest))} (LATEST)`;
+            }
+        }
+    }
 }
 
 export { Trial };
diff --git a/src/webui/src/static/model/trialmanager.ts b/src/webui/src/static/model/trialmanager.ts
index d631d31b99..4bea34368a 100644
--- a/src/webui/src/static/model/trialmanager.ts
+++ b/src/webui/src/static/model/trialmanager.ts
@@ -5,267 +5,267 @@ import { SearchSpace, MetricSpace } from './searchspace';
 import { requestAxios } from '../function';
 
 function groupMetricsByTrial(metrics: MetricDataRecord[]): Map<string, MetricDataRecord[]> {
-	const ret = new Map<string, MetricDataRecord[]>();
-	for (const metric of metrics) {
-		if (ret.has(metric.trialJobId)) {
-			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-			ret.get(metric.trialJobId)!.push(metric);
-		} else {
-			ret.set(metric.trialJobId, [metric]);
-		}
-	}
-	return ret;
+    const ret = new Map<string, MetricDataRecord[]>();
+    for (const metric of metrics) {
+        if (ret.has(metric.trialJobId)) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            ret.get(metric.trialJobId)!.push(metric);
+        } else {
+            ret.set(metric.trialJobId, [metric]);
+        }
+    }
+    return ret;
 }
 
 class TrialManager {
-	private trials: Map<string, Trial> = new Map<string, Trial>();
-	private infoInitialized: boolean = false;
-	private metricInitialized: boolean = false;
-	private maxSequenceId: number = 0;
-	private doingBatchUpdate: boolean = false;
-	private batchUpdatedAfterReading: boolean = false;
-	private isJobListError: boolean = false; // trial-jobs api error filed
-	private jobErrorMessage: string = ''; // trial-jobs error message
-	private isMetricdataError: boolean = false; // metric-data api error filed
-	private MetricdataErrorMessage: string = ''; // metric-data error message
-	private isLatestMetricdataError: boolean = false; // metric-data-latest api error filed
-	private latestMetricdataErrorMessage: string = ''; // metric-data-latest error message
-	private isMetricdataRangeError: boolean = false; // metric-data-range api error filed
-	private metricdataRangeErrorMessage: string = ''; // metric-data-latest error message
-	private metricsList: Array<MetricDataRecord> = [];
-	private trialJobList: Array<TrialJobInfo> = [];
-
-	public getMetricsList(): Array<MetricDataRecord> {
-		return this.metricsList;
-	}
-
-	public getTrialJobList(): Array<TrialJobInfo> {
-		return this.trialJobList;
-	}
-
-	public async init(): Promise<void> {
-		while (!this.infoInitialized || !this.metricInitialized) {
-			if (this.isMetricdataError) {
-				return;
-			}
-			await this.update();
-		}
-	}
-
-	public async update(lastTime?: boolean): Promise<boolean> {
-		const [infoUpdated, metricUpdated] = await Promise.all([this.updateInfo(), this.updateMetrics(lastTime)]);
-		return infoUpdated || metricUpdated;
-	}
-
-	public getTrial(trialId: string): Trial {
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		return this.trials.get(trialId)!;
-	}
-
-	public getTrials(trialIds: string[]): Trial[] {
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		return trialIds.map(trialId => this.trials.get(trialId)!);
-	}
-
-	public table(trialIds: string[]): TableRecord[] {
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		return trialIds.map(trialId => this.trials.get(trialId)!.tableRecord);
-	}
-
-	public toArray(): Trial[] {
-		const trials = Array.from(this.trials.values()).filter(trial => trial.initialized());
-		return trials.sort((trial1, trial2) => trial1.sequenceId - trial2.sequenceId);
-	}
-
-	public filter(callback: (trial: Trial) => boolean): Trial[] {
-		const trials = Array.from(this.trials.values()).filter(trial => trial.initialized() && callback(trial));
-		return trials.sort((trial1, trial2) => trial1.sequenceId - trial2.sequenceId);
-	}
-
-	public succeededTrials(): Trial[] {
-		return this.filter(trial => trial.status === 'SUCCEEDED');
-	}
-
-	public finalKeys(): string[] {
-		const succeedTrialsList = this.filter(trial => trial.status === 'SUCCEEDED');
-		if (succeedTrialsList !== undefined && succeedTrialsList[0] !== undefined) {
-			return succeedTrialsList[0].finalKeys();
-		} else {
-			return ['default'];
-		}
-	}
-
-	public sort(): Trial[] {
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		return this.filter(trial => trial.sortable).sort((trial1, trial2) => trial1.compareAccuracy(trial2)!);
-	}
-
-	public countStatus(): Map<string, number> {
-		const cnt = new Map<string, number>([
-			['UNKNOWN', 0],
-			['WAITING', 0],
-			['RUNNING', 0],
-			['SUCCEEDED', 0],
-			['FAILED', 0],
-			['USER_CANCELED', 0],
-			['SYS_CANCELED', 0],
-			['EARLY_STOPPED', 0]
-		]);
-		for (const trial of this.trials.values()) {
-			if (trial.initialized()) {
-				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-				cnt.set(trial.info.status, cnt.get(trial.info.status)! + 1);
-			}
-		}
-		return cnt;
-	}
-
-	public inferredSearchSpace(expSearchSpace: SearchSpace): MultipleAxes {
-		// The search space inferred from trial parameters
-		return SearchSpace.inferFromTrials(expSearchSpace, [...this.trials.values()]);
-	}
-
-	public inferredMetricSpace(): MultipleAxes {
-		return new MetricSpace([...this.trials.values()]);
-	}
-
-	// if this.jobListError = true, show trial error message [/trial-jobs]
-	public jobListError(): boolean {
-		return this.isJobListError;
-	}
-
-	// trial error message's content [/trial-jobs]
-	public getJobErrorMessage(): string {
-		return this.jobErrorMessage;
-	}
-
-	// [/metric-data]
-	public MetricDataError(): boolean {
-		return this.isMetricdataError;
-	}
-
-	// [/metric-data]
-	public getMetricDataErrorMessage(): string {
-		return this.MetricdataErrorMessage;
-	}
-
-	// [/metric-data-latest]
-	public latestMetricDataError(): boolean {
-		return this.isLatestMetricdataError;
-	}
-
-	// [/metric-data-latest]
-	public getLatestMetricDataErrorMessage(): string {
-		return this.latestMetricdataErrorMessage;
-	}
-
-	public metricDataRangeError(): boolean {
-		return this.isMetricdataRangeError;
-	}
-
-	public metricDataRangeErrorMessage(): string {
-		return this.metricdataRangeErrorMessage;
-	}
-
-	private async updateInfo(): Promise<boolean> {
-		let updated = false;
-		requestAxios(`${MANAGER_IP}/trial-jobs`)
-			.then(data => {
-				for (const trialInfo of data as TrialJobInfo[]) {
-					if (this.trials.has(trialInfo.id)) {
-						// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-						updated = this.trials.get(trialInfo.id)!.updateTrialJobInfo(trialInfo) || updated;
-					} else {
-						this.trials.set(trialInfo.id, new Trial(trialInfo, undefined));
-						updated = true;
-					}
-					this.maxSequenceId = Math.max(this.maxSequenceId, trialInfo.sequenceId);
-				}
-				this.infoInitialized = true;
-			})
-			.catch(error => {
-				this.isJobListError = true;
-				this.jobErrorMessage = error.message;
-				this.infoInitialized = true;
-				updated = true;
-			});
-
-		return updated;
-	}
-
-	private async updateMetrics(lastTime?: boolean): Promise<boolean> {
-		if (this.trials.size < METRIC_GROUP_UPDATE_THRESHOLD || lastTime) {
-			return await this.updateAllMetrics();
-		} else {
-			this.updateManyMetrics();
-			const ret = (await this.updateLatestMetrics()) || this.batchUpdatedAfterReading;
-			this.batchUpdatedAfterReading = false;
-			return ret;
-		}
-	}
-
-	private async updateAllMetrics(): Promise<boolean> {
-		return requestAxios(`${MANAGER_IP}/metric-data`)
-			.then(data => {
-				this.metricsList = data;
-				return this.doUpdateMetrics(data as any, false);
-			})
-			.catch(error => {
-				this.isMetricdataError = true;
-				this.MetricdataErrorMessage = `${error.message}`;
-				this.doUpdateMetrics([], false);
-				return true;
-			});
-	}
-
-	private async updateLatestMetrics(): Promise<boolean> {
-		return requestAxios(`${MANAGER_IP}/metric-data-latest`)
-			.then(data => this.doUpdateMetrics(data as any, true))
-			.catch(error => {
-				this.isLatestMetricdataError = true;
-				this.latestMetricdataErrorMessage = `${error.message}`;
-				this.doUpdateMetrics([], true);
-				return true;
-			});
-	}
-
-	private async updateManyMetrics(): Promise<void> {
-		if (this.doingBatchUpdate) {
-			return;
-		}
-		this.doingBatchUpdate = true;
-		for (
-			let i = 0;
-			i < this.maxSequenceId && this.isMetricdataRangeError === false;
-			i += METRIC_GROUP_UPDATE_SIZE
-		) {
-			requestAxios(`${MANAGER_IP}/metric-data-range/${i}/${i + METRIC_GROUP_UPDATE_SIZE}`)
-				.then(data => {
-					const updated = this.doUpdateMetrics(data as any, false);
-					this.batchUpdatedAfterReading = this.batchUpdatedAfterReading || updated;
-				})
-				.catch(error => {
-					this.isMetricdataRangeError = true;
-					this.metricdataRangeErrorMessage = `${error.message}`;
-				});
-		}
-		this.doingBatchUpdate = false;
-	}
-
-	private doUpdateMetrics(allMetrics: MetricDataRecord[], latestOnly: boolean): boolean {
-		let updated = false;
-		for (const [trialId, metrics] of groupMetricsByTrial(allMetrics).entries()) {
-			const trial = this.trials.get(trialId);
-			if (trial !== undefined) {
-				updated = (latestOnly ? trial.updateLatestMetrics(metrics) : trial.updateMetrics(metrics)) || updated;
-			} else {
-				this.trials.set(trialId, new Trial(undefined, metrics));
-				updated = true;
-			}
-		}
-		this.metricInitialized = true;
-		return updated;
-	}
+    private trials: Map<string, Trial> = new Map<string, Trial>();
+    private infoInitialized: boolean = false;
+    private metricInitialized: boolean = false;
+    private maxSequenceId: number = 0;
+    private doingBatchUpdate: boolean = false;
+    private batchUpdatedAfterReading: boolean = false;
+    private isJobListError: boolean = false; // trial-jobs api error filed
+    private jobErrorMessage: string = ''; // trial-jobs error message
+    private isMetricdataError: boolean = false; // metric-data api error filed
+    private MetricdataErrorMessage: string = ''; // metric-data error message
+    private isLatestMetricdataError: boolean = false; // metric-data-latest api error filed
+    private latestMetricdataErrorMessage: string = ''; // metric-data-latest error message
+    private isMetricdataRangeError: boolean = false; // metric-data-range api error filed
+    private metricdataRangeErrorMessage: string = ''; // metric-data-latest error message
+    private metricsList: Array<MetricDataRecord> = [];
+    private trialJobList: Array<TrialJobInfo> = [];
+
+    public getMetricsList(): Array<MetricDataRecord> {
+        return this.metricsList;
+    }
+
+    public getTrialJobList(): Array<TrialJobInfo> {
+        return this.trialJobList;
+    }
+
+    public async init(): Promise<void> {
+        while (!this.infoInitialized || !this.metricInitialized) {
+            if (this.isMetricdataError) {
+                return;
+            }
+            await this.update();
+        }
+    }
+
+    public async update(lastTime?: boolean): Promise<boolean> {
+        const [infoUpdated, metricUpdated] = await Promise.all([this.updateInfo(), this.updateMetrics(lastTime)]);
+        return infoUpdated || metricUpdated;
+    }
+
+    public getTrial(trialId: string): Trial {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return this.trials.get(trialId)!;
+    }
+
+    public getTrials(trialIds: string[]): Trial[] {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return trialIds.map(trialId => this.trials.get(trialId)!);
+    }
+
+    public table(trialIds: string[]): TableRecord[] {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return trialIds.map(trialId => this.trials.get(trialId)!.tableRecord);
+    }
+
+    public toArray(): Trial[] {
+        const trials = Array.from(this.trials.values()).filter(trial => trial.initialized());
+        return trials.sort((trial1, trial2) => trial1.sequenceId - trial2.sequenceId);
+    }
+
+    public filter(callback: (trial: Trial) => boolean): Trial[] {
+        const trials = Array.from(this.trials.values()).filter(trial => trial.initialized() && callback(trial));
+        return trials.sort((trial1, trial2) => trial1.sequenceId - trial2.sequenceId);
+    }
+
+    public succeededTrials(): Trial[] {
+        return this.filter(trial => trial.status === 'SUCCEEDED');
+    }
+
+    public finalKeys(): string[] {
+        const succeedTrialsList = this.filter(trial => trial.status === 'SUCCEEDED');
+        if (succeedTrialsList !== undefined && succeedTrialsList[0] !== undefined) {
+            return succeedTrialsList[0].finalKeys();
+        } else {
+            return ['default'];
+        }
+    }
+
+    public sort(): Trial[] {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return this.filter(trial => trial.sortable).sort((trial1, trial2) => trial1.compareAccuracy(trial2)!);
+    }
+
+    public countStatus(): Map<string, number> {
+        const cnt = new Map<string, number>([
+            ['UNKNOWN', 0],
+            ['WAITING', 0],
+            ['RUNNING', 0],
+            ['SUCCEEDED', 0],
+            ['FAILED', 0],
+            ['USER_CANCELED', 0],
+            ['SYS_CANCELED', 0],
+            ['EARLY_STOPPED', 0]
+        ]);
+        for (const trial of this.trials.values()) {
+            if (trial.initialized()) {
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                cnt.set(trial.info.status, cnt.get(trial.info.status)! + 1);
+            }
+        }
+        return cnt;
+    }
+
+    public inferredSearchSpace(expSearchSpace: SearchSpace): MultipleAxes {
+        // The search space inferred from trial parameters
+        return SearchSpace.inferFromTrials(expSearchSpace, [...this.trials.values()]);
+    }
+
+    public inferredMetricSpace(): MultipleAxes {
+        return new MetricSpace([...this.trials.values()]);
+    }
+
+    // if this.jobListError = true, show trial error message [/trial-jobs]
+    public jobListError(): boolean {
+        return this.isJobListError;
+    }
+
+    // trial error message's content [/trial-jobs]
+    public getJobErrorMessage(): string {
+        return this.jobErrorMessage;
+    }
+
+    // [/metric-data]
+    public MetricDataError(): boolean {
+        return this.isMetricdataError;
+    }
+
+    // [/metric-data]
+    public getMetricDataErrorMessage(): string {
+        return this.MetricdataErrorMessage;
+    }
+
+    // [/metric-data-latest]
+    public latestMetricDataError(): boolean {
+        return this.isLatestMetricdataError;
+    }
+
+    // [/metric-data-latest]
+    public getLatestMetricDataErrorMessage(): string {
+        return this.latestMetricdataErrorMessage;
+    }
+
+    public metricDataRangeError(): boolean {
+        return this.isMetricdataRangeError;
+    }
+
+    public metricDataRangeErrorMessage(): string {
+        return this.metricdataRangeErrorMessage;
+    }
+
+    private async updateInfo(): Promise<boolean> {
+        let updated = false;
+        requestAxios(`${MANAGER_IP}/trial-jobs`)
+            .then(data => {
+                for (const trialInfo of data as TrialJobInfo[]) {
+                    if (this.trials.has(trialInfo.id)) {
+                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                        updated = this.trials.get(trialInfo.id)!.updateTrialJobInfo(trialInfo) || updated;
+                    } else {
+                        this.trials.set(trialInfo.id, new Trial(trialInfo, undefined));
+                        updated = true;
+                    }
+                    this.maxSequenceId = Math.max(this.maxSequenceId, trialInfo.sequenceId);
+                }
+                this.infoInitialized = true;
+            })
+            .catch(error => {
+                this.isJobListError = true;
+                this.jobErrorMessage = error.message;
+                this.infoInitialized = true;
+                updated = true;
+            });
+
+        return updated;
+    }
+
+    private async updateMetrics(lastTime?: boolean): Promise<boolean> {
+        if (this.trials.size < METRIC_GROUP_UPDATE_THRESHOLD || lastTime) {
+            return await this.updateAllMetrics();
+        } else {
+            this.updateManyMetrics();
+            const ret = (await this.updateLatestMetrics()) || this.batchUpdatedAfterReading;
+            this.batchUpdatedAfterReading = false;
+            return ret;
+        }
+    }
+
+    private async updateAllMetrics(): Promise<boolean> {
+        return requestAxios(`${MANAGER_IP}/metric-data`)
+            .then(data => {
+                this.metricsList = data;
+                return this.doUpdateMetrics(data as any, false);
+            })
+            .catch(error => {
+                this.isMetricdataError = true;
+                this.MetricdataErrorMessage = `${error.message}`;
+                this.doUpdateMetrics([], false);
+                return true;
+            });
+    }
+
+    private async updateLatestMetrics(): Promise<boolean> {
+        return requestAxios(`${MANAGER_IP}/metric-data-latest`)
+            .then(data => this.doUpdateMetrics(data as any, true))
+            .catch(error => {
+                this.isLatestMetricdataError = true;
+                this.latestMetricdataErrorMessage = `${error.message}`;
+                this.doUpdateMetrics([], true);
+                return true;
+            });
+    }
+
+    private async updateManyMetrics(): Promise<void> {
+        if (this.doingBatchUpdate) {
+            return;
+        }
+        this.doingBatchUpdate = true;
+        for (
+            let i = 0;
+            i < this.maxSequenceId && this.isMetricdataRangeError === false;
+            i += METRIC_GROUP_UPDATE_SIZE
+        ) {
+            requestAxios(`${MANAGER_IP}/metric-data-range/${i}/${i + METRIC_GROUP_UPDATE_SIZE}`)
+                .then(data => {
+                    const updated = this.doUpdateMetrics(data as any, false);
+                    this.batchUpdatedAfterReading = this.batchUpdatedAfterReading || updated;
+                })
+                .catch(error => {
+                    this.isMetricdataRangeError = true;
+                    this.metricdataRangeErrorMessage = `${error.message}`;
+                });
+        }
+        this.doingBatchUpdate = false;
+    }
+
+    private doUpdateMetrics(allMetrics: MetricDataRecord[], latestOnly: boolean): boolean {
+        let updated = false;
+        for (const [trialId, metrics] of groupMetricsByTrial(allMetrics).entries()) {
+            const trial = this.trials.get(trialId);
+            if (trial !== undefined) {
+                updated = (latestOnly ? trial.updateLatestMetrics(metrics) : trial.updateMetrics(metrics)) || updated;
+            } else {
+                this.trials.set(trialId, new Trial(undefined, metrics));
+                updated = true;
+            }
+        }
+        this.metricInitialized = true;
+        return updated;
+    }
 }
 
 export { TrialManager };

From 2544190b1fc747f96efaf2dac27cce14285a8a92 Mon Sep 17 00:00:00 2001
From: Lijiao <Lijiaoa@outlook.com>
Date: Fri, 11 Sep 2020 07:16:55 +0000
Subject: [PATCH 7/8] fix lint

---
 src/webui/src/App.tsx                         |  16 +-
 src/webui/src/components/Modals/Compare.tsx   |   2 +-
 .../src/components/public-child/OpenRow.tsx   |  54 ++-
 .../components/public-child/PaiTrialChild.tsx |  41 +-
 .../components/public-child/PaiTrialLog.tsx   |  64 ++-
 .../src/components/trial-detail/TableList.tsx | 384 ++++++++++--------
 src/webui/src/static/const.ts                 |   2 +-
 src/webui/src/static/function.ts              |   4 +-
 src/webui/src/static/model/trial.ts           |  48 ++-
 src/webui/src/static/style/compare.scss       |   9 +-
 src/webui/src/static/style/trialsDetail.scss  |   1 +
 11 files changed, 336 insertions(+), 289 deletions(-)

diff --git a/src/webui/src/App.tsx b/src/webui/src/App.tsx
index 702b452bf6..947fda94a3 100644
--- a/src/webui/src/App.tsx
+++ b/src/webui/src/App.tsx
@@ -22,7 +22,7 @@ class App extends React.Component<{}, AppState> {
     private timerId!: number | undefined;
     private dataFormatimer!: number;
     private firstLoad: boolean = false; // when click refresh selector options
-    
+
     constructor(props: {}) {
         super(props);
         this.state = {
@@ -40,10 +40,10 @@ class App extends React.Component<{}, AppState> {
 
     async componentDidMount(): Promise<void> {
         await Promise.all([EXPERIMENT.init(), TRIALS.init()]);
-        this.setState(state => ({ 
-            experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1, 
+        this.setState(state => ({
+            experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1,
             trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1,
-            metricGraphMode: (EXPERIMENT.optimizeMode === 'minimize' ? 'min' : 'max')
+            metricGraphMode: EXPERIMENT.optimizeMode === 'minimize' ? 'min' : 'max'
         }));
         this.timerId = window.setTimeout(this.refresh, this.state.interval * 100);
         // final result is legal
@@ -103,8 +103,7 @@ class App extends React.Component<{}, AppState> {
     };
 
     shouldComponentUpdate(nextProps: any, nextState: AppState): boolean {
-        
-        if(!(nextState.isUpdate || nextState.isUpdate === undefined)){
+        if (!(nextState.isUpdate || nextState.isUpdate === undefined)) {
             nextState.isUpdate = true;
             return false;
         }
@@ -206,7 +205,10 @@ class App extends React.Component<{}, AppState> {
     public async lastRefresh(): Promise<void> {
         await EXPERIMENT.update();
         await TRIALS.update(true);
-        this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1, trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
+        this.setState(state => ({
+            experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1,
+            trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1
+        }));
     }
 }
 
diff --git a/src/webui/src/components/Modals/Compare.tsx b/src/webui/src/components/Modals/Compare.tsx
index 6ee0ac70b5..5c33196590 100644
--- a/src/webui/src/components/Modals/Compare.tsx
+++ b/src/webui/src/components/Modals/Compare.tsx
@@ -209,7 +209,7 @@ class Compare extends React.Component<CompareProps, {}> {
 
     getWebUIWidth = (): number => {
         return window.innerWidth;
-    }
+    };
 
     componentDidMount(): void {
         this._isCompareMount = true;
diff --git a/src/webui/src/components/public-child/OpenRow.tsx b/src/webui/src/components/public-child/OpenRow.tsx
index 6c65f56c5b..56625e590b 100644
--- a/src/webui/src/components/public-child/OpenRow.tsx
+++ b/src/webui/src/components/public-child/OpenRow.tsx
@@ -58,7 +58,7 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
 
     openTrialLog = (type: string): void => {
         window.open(`${MANAGER_IP}/trial-log/${this.props.trialId}/${type}`);
-    }
+    };
 
     render(): React.ReactNode {
         const { isHidenInfo, typeInfo, info } = this.state;
@@ -97,35 +97,33 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
                                 </Stack>
                             )}
                         </PivotItem>
-                        <PivotItem headerText="Log" key="2" itemIcon="M365InvoicingLogo">
-                            {
-                                // FIXME: this should not be handled in web UI side
-                                EXPERIMENT.trainingServicePlatform !== 'local'
-                                    ?
-                                    <PaiTrialLog
-                                        logStr={logPathRow}
-                                        id={trialId}
-                                        logCollection={EXPERIMENT.logCollectionEnabled}
-                                    />
-                                    :
-                                    <div>
-                                        <TrialLog logStr={logPathRow} id={trialId} />
-                                        {/* view each trial log in drawer*/}
-                                        <div id="trialog">
-                                            <div className="copy" style={{ marginTop: 15 }}>
-                                                <PrimaryButton
-                                                    onClick={this.openTrialLog.bind(this, 'TRIAL_LOG')}
-                                                    text="View trial log"
-                                                />
-                                                <PrimaryButton
-                                                    onClick={this.openTrialLog.bind(this, 'TRIAL_ERROR')}
-                                                    text="View trial error"
-                                                    styles={{ root: { marginLeft: 15 } }}
-                                                />
-                                            </div>
+                        <PivotItem headerText='Log' key='2' itemIcon='M365InvoicingLogo'>
+                            {// FIXME: this should not be handled in web UI side
+                            EXPERIMENT.trainingServicePlatform !== 'local' ? (
+                                <PaiTrialLog
+                                    logStr={logPathRow}
+                                    id={trialId}
+                                    logCollection={EXPERIMENT.logCollectionEnabled}
+                                />
+                            ) : (
+                                <div>
+                                    <TrialLog logStr={logPathRow} id={trialId} />
+                                    {/* view each trial log in drawer*/}
+                                    <div id='trialog'>
+                                        <div className='copy' style={{ marginTop: 15 }}>
+                                            <PrimaryButton
+                                                onClick={this.openTrialLog.bind(this, 'TRIAL_LOG')}
+                                                text='View trial log'
+                                            />
+                                            <PrimaryButton
+                                                onClick={this.openTrialLog.bind(this, 'TRIAL_ERROR')}
+                                                text='View trial error'
+                                                styles={{ root: { marginLeft: 15 } }}
+                                            />
                                         </div>
                                     </div>
-                            }
+                                </div>
+                            )}
                         </PivotItem>
                     </Pivot>
                 </Stack>
diff --git a/src/webui/src/components/public-child/PaiTrialChild.tsx b/src/webui/src/components/public-child/PaiTrialChild.tsx
index 2b1dc9f2eb..438bc1df22 100644
--- a/src/webui/src/components/public-child/PaiTrialChild.tsx
+++ b/src/webui/src/components/public-child/PaiTrialChild.tsx
@@ -17,31 +17,22 @@ class PaiTrialChild extends React.Component<PaiTrialChildProps, {}> {
         const { logString, id, logCollect } = this.props;
         return (
             <div>
-                {
-                    logString === ''
-                        ?
-                        null
-                        :
-                        <div>
-                            {
-                                logCollect
-                                    ?
-                                    <a
-                                        target="_blank"
-                                        rel="noopener noreferrer"
-                                        href={`${DOWNLOAD_IP}/trial_${id}.log`}
-                                        style={{ marginRight: 10 }}
-                                    >
-                                        Trial stdout
-                                    </a>
-                                    :
-                                    <LogPathChild
-                                        eachLogpath={logString}
-                                        logName="Trial stdout:"
-                                    />
-                            }
-                        </div>
-                }
+                {logString === '' ? null : (
+                    <div>
+                        {logCollect ? (
+                            <a
+                                target='_blank'
+                                rel='noopener noreferrer'
+                                href={`${DOWNLOAD_IP}/trial_${id}.log`}
+                                style={{ marginRight: 10 }}
+                            >
+                                Trial stdout
+                            </a>
+                        ) : (
+                            <LogPathChild eachLogpath={logString} logName='Trial stdout:' />
+                        )}
+                    </div>
+                )}
             </div>
         );
     }
diff --git a/src/webui/src/components/public-child/PaiTrialLog.tsx b/src/webui/src/components/public-child/PaiTrialLog.tsx
index ef79b3dc38..f522cece57 100644
--- a/src/webui/src/components/public-child/PaiTrialLog.tsx
+++ b/src/webui/src/components/public-child/PaiTrialLog.tsx
@@ -20,44 +20,32 @@ class PaitrialLog extends React.Component<PaitrialLogProps, {}> {
         return (
             <div>
                 <div>
-                    {
-                        isTwopath
-                            ?
-                            <div>
-                                {
-                                    logCollection
-                                        ?
-                                        <div>
-                                            <a
-                                                target="_blank"
-                                                rel="noopener noreferrer"
-                                                href={`${DOWNLOAD_IP}/trial_${id}.log`}
-                                                style={{ marginRight: 10 }}
-                                            >
-                                                Trial stdout
-                                            </a>
-                                            <a target="_blank" rel="noopener noreferrer" href={logStr.split(',')[1]}>NFS log</a>
-                                        </div>
-                                        :
-                                        <div>
-                                            <LogPathChild
-                                                eachLogpath={logStr.split(',')[0]}
-                                                logName="Trial stdout:"
-                                            />
-                                            <LogPathChild
-                                                eachLogpath={logStr.split(',')[1]}
-                                                logName="Log on NFS:"
-                                            />
-                                        </div>
-                                }
-                            </div>
-                            :
-                            <PaiTrialChild
-                                logString={logStr}
-                                id={id}
-                                logCollect={logCollection}
-                            />
-                    }
+                    {isTwopath ? (
+                        <div>
+                            {logCollection ? (
+                                <div>
+                                    <a
+                                        target='_blank'
+                                        rel='noopener noreferrer'
+                                        href={`${DOWNLOAD_IP}/trial_${id}.log`}
+                                        style={{ marginRight: 10 }}
+                                    >
+                                        Trial stdout
+                                    </a>
+                                    <a target='_blank' rel='noopener noreferrer' href={logStr.split(',')[1]}>
+                                        NFS log
+                                    </a>
+                                </div>
+                            ) : (
+                                <div>
+                                    <LogPathChild eachLogpath={logStr.split(',')[0]} logName='Trial stdout:' />
+                                    <LogPathChild eachLogpath={logStr.split(',')[1]} logName='Log on NFS:' />
+                                </div>
+                            )}
+                        </div>
+                    ) : (
+                        <PaiTrialChild logString={logStr} id={id} logCollect={logCollection} />
+                    )}
                 </div>
             </div>
         );
diff --git a/src/webui/src/components/trial-detail/TableList.tsx b/src/webui/src/components/trial-detail/TableList.tsx
index 9331db8b65..d2ac4c613d 100644
--- a/src/webui/src/components/trial-detail/TableList.tsx
+++ b/src/webui/src/components/trial-detail/TableList.tsx
@@ -2,8 +2,20 @@ import * as React from 'react';
 import axios from 'axios';
 import ReactEcharts from 'echarts-for-react';
 import {
-    Stack, Dropdown, DetailsList, IDetailsListProps, DetailsListLayoutMode,
-    PrimaryButton, Modal, IDropdownOption, IColumn, Selection, SelectionMode, IconButton, TooltipHost, IStackTokens
+    Stack,
+    Dropdown,
+    DetailsList,
+    IDetailsListProps,
+    DetailsListLayoutMode,
+    PrimaryButton,
+    Modal,
+    IDropdownOption,
+    IColumn,
+    Selection,
+    SelectionMode,
+    IconButton,
+    TooltipHost,
+    IStackTokens
 } from 'office-ui-fabric-react';
 import ReactPaginate from 'react-paginate';
 import { LineChart, blocked, copy } from '../Buttons/Icon';
@@ -25,7 +37,6 @@ import '../../static/style/button.scss';
 import '../../static/style/openRow.scss';
 import '../../static/style/pagination.scss';
 
-
 const echarts = require('echarts/lib/echarts');
 require('echarts/lib/chart/line');
 require('echarts/lib/component/tooltip');
@@ -36,7 +47,7 @@ echarts.registerTheme('my_theme', {
 
 const horizontalGapStackTokens: IStackTokens = {
     childrenGap: 20,
-    padding: 10,
+    padding: 10
 };
 
 interface TableListProps {
@@ -82,7 +93,6 @@ interface TableListState {
 }
 
 class TableList extends React.Component<TableListProps, TableListState> {
-
     public intervalTrialLog = 10;
     public trialId!: string;
 
@@ -130,17 +140,20 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 currColumn.isSorted = true;
             } else {
                 newCol.isSorted = false;
-                newCol.isSortedDescending =  true;
+                newCol.isSortedDescending = true;
             }
         });
 
-        this.setState({
-            tableColumns: newColumns,
-            sortMessage: { field: getColumn.key, isDescend: currColumn.isSortedDescending }
-        }, () => {
-            this.updateData();
-        });
-    }
+        this.setState(
+            {
+                tableColumns: newColumns,
+                sortMessage: { field: getColumn.key, isDescend: currColumn.isSortedDescending }
+            },
+            () => {
+                this.updateData();
+            }
+        );
+    };
 
     AccuracyColumnConfig: any = {
         name: 'Default metric',
@@ -152,9 +165,11 @@ class TableList extends React.Component<TableListProps, TableListState> {
         isResizable: true,
         data: 'number',
         onColumnClick: this.onColumnClick,
-        onRender: (item): React.ReactNode => <TooltipHost content={item.formattedLatestAccuracy}>
-            <div className="ellipsis">{item.formattedLatestAccuracy}</div>
-        </TooltipHost>
+        onRender: (item): React.ReactNode => (
+            <TooltipHost content={item.formattedLatestAccuracy}>
+                <div className='ellipsis'>{item.formattedLatestAccuracy}</div>
+            </TooltipHost>
+        )
     };
 
     SequenceIdColumnConfig: any = {
@@ -165,7 +180,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
         maxWidth: 240,
         className: 'tableHead',
         data: 'number',
-        onColumnClick: this.onColumnClick,
+        onColumnClick: this.onColumnClick
     };
 
     IdColumnConfig: any = {
@@ -180,7 +195,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
         className: 'tableHead leftTitle'
     };
 
-
     StartTimeColumnConfig: any = {
         name: 'Start time',
         key: 'startTime',
@@ -190,9 +204,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
         isResizable: true,
         data: 'number',
         onColumnClick: this.onColumnClick,
-        onRender: (record): React.ReactNode => (
-            <span>{formatTimestamp(record.startTime)}</span>
-        )
+        onRender: (record): React.ReactNode => <span>{formatTimestamp(record.startTime)}</span>
     };
 
     EndTimeColumnConfig: any = {
@@ -204,9 +216,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
         isResizable: true,
         data: 'number',
         onColumnClick: this.onColumnClick,
-        onRender: (record): React.ReactNode => (
-            <span>{formatTimestamp(record.endTime, '--')}</span>
-        )
+        onRender: (record): React.ReactNode => <span>{formatTimestamp(record.endTime, '--')}</span>
     };
 
     DurationColumnConfig: any = {
@@ -218,9 +228,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
         isResizable: true,
         data: 'number',
         onColumnClick: this.onColumnClick,
-        onRender: (record): React.ReactNode => (
-            <span className="durationsty">{convertDuration(record.duration)}</span>
-        )
+        onRender: (record): React.ReactNode => <span className='durationsty'>{convertDuration(record.duration)}</span>
     };
 
     StatusColumnConfig: any = {
@@ -233,9 +241,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
         isResizable: true,
         data: 'string',
         onColumnClick: this.onColumnClick,
-        onRender: (record): React.ReactNode => (
-            <span className={`${record.status} commonStyle`}>{record.status}</span>
-        ),
+        onRender: (record): React.ReactNode => <span className={`${record.status} commonStyle`}>{record.status}</span>
     };
 
     IntermediateCountColumnConfig: any = {
@@ -247,9 +253,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
         isResizable: true,
         data: 'number',
         onColumnClick: this.onColumnClick,
-        onRender: (record): React.ReactNode => (
-            <span>{`#${record.intermediateCount}`}</span>
-        )
+        onRender: (record): React.ReactNode => <span>{`#${record.intermediateCount}`}</span>
     };
 
     showIntermediateModal = async (record: TrialJobInfo, event: React.SyntheticEvent<EventTarget>): Promise<void> => {
@@ -275,7 +279,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
             }
             // intermediateArr just store default val
             metricDatas.map(item => {
-
                 if (item.type === 'PERIODICAL') {
                     const temp = parseMetrics(item.data);
                     if (typeof temp === 'object') {
@@ -294,7 +297,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
             });
         }
         this.setState({ modalVisible: true });
-    }
+    };
 
     // intermediate button click -> intermediate graph for each trial
     // support intermediate is dict
@@ -331,45 +334,43 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 intermediateOption: intermediate
             });
         }
-    }
+    };
 
     hideIntermediateModal = (): void => {
         this.setState({
             modalVisible: false
         });
-    }
+    };
 
     hideShowColumnModal = (): void => {
-
         this.setState(() => ({ isShowColumn: false }));
-    }
+    };
 
     // click add column btn, just show the modal of addcolumn
     addColumn = (): void => {
         // show user select check button
         this.setState(() => ({ isShowColumn: true }));
-    }
+    };
 
     fillSelectedRowsTostate = (selected: number[] | string[], selectedRows: Array<TableRecord>): void => {
         this.setState({ selectRows: selectedRows, selectedRowKeys: selected });
-    }
+    };
 
     // open Compare-modal
     compareBtn = (): void => {
-
         const { selectRows } = this.state;
         if (selectRows.length === 0) {
             alert('Please select datas you want to compare!');
         } else {
             this.setState({ isShowCompareModal: true });
         }
-    }
+    };
 
     // close Compare-modal
     hideCompareModal = (): void => {
         // close modal. clear select rows data, clear selected track
         this.setState({ isShowCompareModal: false, selectedRowKeys: [], selectRows: [] });
-    }
+    };
 
     // open customized trial modal
     private setCustomizedTrial = (trialId: string, event: React.SyntheticEvent<EventTarget>): void => {
@@ -379,21 +380,21 @@ class TableList extends React.Component<TableListProps, TableListState> {
             isShowCustomizedModal: true,
             copyTrialId: trialId
         });
-    }
+    };
 
     private closeCustomizedTrial = (): void => {
         this.setState({
             isShowCustomizedModal: false,
             copyTrialId: ''
         });
-    }
+    };
 
     private onWindowResize = (): void => {
         this.setState(() => ({
             modalIntermediateHeight: window.innerHeight,
             modalIntermediateWidth: window.innerWidth
         }));
-    }
+    };
 
     private onRenderRow: IDetailsListProps['onRenderRow'] = props => {
         if (props) {
@@ -425,8 +426,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
         }
         // concat trial all final keys and remove dup "default" val, return list
         const finalKeysList = TRIALS.finalKeys().filter(item => item !== 'default');
-        return (COLUMNPro.concat(parameterStr)).concat(finalKeysList);
-    }
+        return COLUMNPro.concat(parameterStr).concat(finalKeysList);
+    };
 
     // get IColumn[]
     // when user click [Add Column] need to use the function
@@ -476,31 +477,29 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         className: 'detail-table',
                         onRender: (record: any) => {
                             const trialStatus = record.status;
-                            const flag: boolean = (trialStatus === 'RUNNING' || trialStatus === 'UNKNOWN') ? false : true;
+                            const flag: boolean = trialStatus === 'RUNNING' || trialStatus === 'UNKNOWN' ? false : true;
                             return (
-                                <Stack className="detail-button" horizontal>
+                                <Stack className='detail-button' horizontal>
                                     {/* see intermediate result graph */}
                                     <PrimaryButton
-                                        className="detail-button-operation"
-                                        title="Intermediate"
+                                        className='detail-button-operation'
+                                        title='Intermediate'
                                         onClick={this.showIntermediateModal.bind(this, record)}
                                     >
                                         {LineChart}
                                     </PrimaryButton>
                                     {/* kill job */}
-                                    {
-                                        flag
-                                            ?
-                                            <PrimaryButton className="detail-button-operation" disabled={true} title="kill">
-                                                {blocked}
-                                            </PrimaryButton>
-                                            :
-                                            <KillJob trial={record} />
-                                    }
+                                    {flag ? (
+                                        <PrimaryButton className='detail-button-operation' disabled={true} title='kill'>
+                                            {blocked}
+                                        </PrimaryButton>
+                                    ) : (
+                                        <KillJob trial={record} />
+                                    )}
                                     {/* Add a new trial-customized trial */}
                                     <PrimaryButton
-                                        className="detail-button-operation"
-                                        title="Customized trial"
+                                        className='detail-button-operation'
+                                        title='Customized trial'
                                         onClick={this.setCustomizedTrial.bind(this, record.id)}
                                         disabled={disabledAddCustomizedTrial}
                                     >
@@ -508,10 +507,10 @@ class TableList extends React.Component<TableListProps, TableListState> {
                                     </PrimaryButton>
                                 </Stack>
                             );
-                        },
+                        }
                     });
                     break;
-                case (result):
+                case result:
                     // remove SEARCH_SPACE title
                     // const realItem = item.replace(' (search space)', '');
                     showColumn.push({
@@ -521,10 +520,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         minWidth: 150,
                         onRender: (record: TableRecord) => {
                             const eachTrial = TRIALS.getTrial(record.id);
-                            return (
-                                <span>{eachTrial.description.parameters[item.replace(' (search space)', '')]}</span>
-                            );
-                        },
+                            return <span>{eachTrial.description.parameters[item.replace(' (search space)', '')]}</span>;
+                        }
                     });
                     break;
                 default:
@@ -541,7 +538,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                             }
                             return (
                                 <TooltipHost content={other}>
-                                    <div className="ellipsis">{other}</div>
+                                    <div className='ellipsis'>{other}</div>
                                 </TooltipHost>
                             );
                         }
@@ -549,7 +546,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
             }
         }
         return showColumn;
-    }
+    };
 
     componentDidMount(): void {
         window.addEventListener('resize', this.onWindowResize);
@@ -557,14 +554,21 @@ class TableList extends React.Component<TableListProps, TableListState> {
     }
 
     componentDidUpdate(prevProps: TableListProps): void {
-        if (this.props.columnList !== prevProps.columnList || this.props.tableSource !== prevProps.tableSource || prevProps.trialsUpdateBroadcast !== this.props.trialsUpdateBroadcast) {
+        if (
+            this.props.columnList !== prevProps.columnList ||
+            this.props.tableSource !== prevProps.tableSource ||
+            prevProps.trialsUpdateBroadcast !== this.props.trialsUpdateBroadcast
+        ) {
             const { columnList } = this.props;
-            this.setState({
-                tableColumns: this.initTableColumnList(columnList),
-                allColumnList: this.getAllColumnKeys()
-                }, () => {
+            this.setState(
+                {
+                    tableColumns: this.initTableColumnList(columnList),
+                    allColumnList: this.getAllColumnKeys()
+                },
+                () => {
                     this.updateData();
-                });
+                }
+            );
         }
     }
 
@@ -573,111 +577,153 @@ class TableList extends React.Component<TableListProps, TableListState> {
         const tableSource: Array<TableRecord> = this.props.tableSource;
         const { offset, perPage, sortMessage } = this.state;
 
-        if (sortMessage.field !== '') {	
-            tableSource.sort(function (a, b): any {	
-                if (a[sortMessage.field] === undefined || Object.is(a[sortMessage.field], NaN) || Object.is(a[sortMessage.field], Infinity) || Object.is(a[sortMessage.field], -Infinity) || typeof a[sortMessage.field] === 'object' ) {   
-                    return 1;   
-                }   
-                if (b[sortMessage.field] === undefined || Object.is(b[sortMessage.field], NaN) || Object.is(b[sortMessage.field], Infinity) || Object.is(b[sortMessage.field], -Infinity) || typeof b[sortMessage.field] === 'object' ) {   
-                    return -1;  
-                }	
-                return (sortMessage.isDescend ? a[sortMessage.field] < b[sortMessage.field] : a[sortMessage.field] > b[sortMessage.field]) ? 1 : -1;
-            });	
+        if (sortMessage.field !== '') {
+            tableSource.sort(function(a, b): any {
+                if (
+                    a[sortMessage.field] === undefined ||
+                    Object.is(a[sortMessage.field], NaN) ||
+                    Object.is(a[sortMessage.field], Infinity) ||
+                    Object.is(a[sortMessage.field], -Infinity) ||
+                    typeof a[sortMessage.field] === 'object'
+                ) {
+                    return 1;
+                }
+                if (
+                    b[sortMessage.field] === undefined ||
+                    Object.is(b[sortMessage.field], NaN) ||
+                    Object.is(b[sortMessage.field], Infinity) ||
+                    Object.is(b[sortMessage.field], -Infinity) ||
+                    typeof b[sortMessage.field] === 'object'
+                ) {
+                    return -1;
+                }
+                return (sortMessage.isDescend
+                  ? a[sortMessage.field] < b[sortMessage.field]
+                  : a[sortMessage.field] > b[sortMessage.field])
+                    ? 1
+                    : -1;
+            });
         }
 
-        const tableSlice = tableSource.slice(offset, offset + perPage)
-        const curPageCount = Math.ceil(tableSource.length / perPage)
+        const tableSlice = tableSource.slice(offset, offset + perPage);
+        const curPageCount = Math.ceil(tableSource.length / perPage);
         this.setState({
             tablePerPage: tableSlice,
-            pageCount: curPageCount,
+            pageCount: curPageCount
         });
     }
-    
+
     // update data when click the page index of pagination
     handlePageClick = (evt: any): void => {
         const selectedPage = evt.selected;
         const offset = selectedPage * this.state.perPage;
-        
-        this.setState({ 
-            currentPage: selectedPage, 
-            offset: offset
-        }, () => {
-            this.updateData();
-        });
-    }
+
+        this.setState(
+            {
+                currentPage: selectedPage,
+                offset: offset
+            },
+            () => {
+                this.updateData();
+            }
+        );
+    };
 
     // update per page items when click the dropdown of pagination
     updatePerPage = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
         const { pageCount } = this.state;
-        
+
         if (item !== undefined) {
-            const currentPerPage = item.key === 'all' ? this.props.tableSource.length: Number(item.key)
-            const currentPageCount = this.props.tableSource.length <= currentPerPage ? 1 : pageCount
-            
-            this.setState({ 
-                perPage: currentPerPage,
-                offset: 0,
-                currentPage: 0,
-                pageCount: currentPageCount
-            }, () => {
-                this.updateData();
-            });
+            const currentPerPage = item.key === 'all' ? this.props.tableSource.length : Number(item.key);
+            const currentPageCount = this.props.tableSource.length <= currentPerPage ? 1 : pageCount;
+
+            this.setState(
+                {
+                    perPage: currentPerPage,
+                    offset: 0,
+                    currentPage: 0,
+                    pageCount: currentPageCount
+                },
+                () => {
+                    this.updateData();
+                }
+            );
         }
-    }
+    };
 
     render(): React.ReactNode {
-        const { intermediateKey, modalIntermediateWidth, modalIntermediateHeight,
-            tableColumns, allColumnList, isShowColumn, modalVisible,
-            selectRows, isShowCompareModal, intermediateOtherKeys,
-            isShowCustomizedModal, copyTrialId, intermediateOption,
+        const {
+            intermediateKey,
+            modalIntermediateWidth,
+            modalIntermediateHeight,
+            tableColumns,
+            allColumnList,
+            isShowColumn,
+            modalVisible,
+            selectRows,
+            isShowCompareModal,
+            intermediateOtherKeys,
+            isShowCustomizedModal,
+            copyTrialId,
+            intermediateOption,
             tablePerPage
         } = this.state;
         const { columnList } = this.props;
         const perPageOptions = [
-            { key: '10', text: '10 items per page'},
-            { key: '20', text: '20 items per page'},
-            { key: '50', text: '50 items per page'},
-            { key: 'all', text: 'All items'},
+            { key: '10', text: '10 items per page' },
+            { key: '20', text: '20 items per page' },
+            { key: '50', text: '50 items per page' },
+            { key: 'all', text: 'All items' }
         ];
-        
+
         return (
             <Stack>
-                <div id="tableList">
+                <div id='tableList'>
                     <DetailsList
                         columns={tableColumns}
                         items={tablePerPage}
-                        setKey="set"
+                        setKey='set'
                         compact={true}
                         onRenderRow={this.onRenderRow}
                         layoutMode={DetailsListLayoutMode.justified}
                         selectionMode={SelectionMode.multiple}
                         selection={this.getSelectedRows}
                     />
-                      
-                    <Stack horizontal horizontalAlign="end" verticalAlign="baseline" styles={{root:{padding:10}}} tokens={horizontalGapStackTokens}>
+
+                    <Stack
+                        horizontal
+                        horizontalAlign='end'
+                        verticalAlign='baseline'
+                        styles={{ root: { padding: 10 } }}
+                        tokens={horizontalGapStackTokens}
+                    >
                         <Dropdown
-                        selectedKey={this.state.perPage === this.props.tableSource.length ? 'all':String(this.state.perPage)}
-                        options={perPageOptions}
-                        onChange={this.updatePerPage}
-                        styles={{dropdown: { width: 150}}}/>
+                            selectedKey={
+                                this.state.perPage === this.props.tableSource.length
+                                    ? 'all'
+                                    : String(this.state.perPage)
+                            }
+                            options={perPageOptions}
+                            onChange={this.updatePerPage}
+                            styles={{ dropdown: { width: 150 } }}
+                        />
 
                         <ReactPaginate
-                        previousLabel={"<"}
-                        nextLabel={">"}
-                        breakLabel={"..."}
-                        breakClassName={"break"}
-                        pageCount={this.state.pageCount}
-                        marginPagesDisplayed={2}
-                        pageRangeDisplayed={2}
-                        onPageChange={this.handlePageClick}
-                        containerClassName={(this.props.tableSource.length == 0 ? "pagination hidden" : "pagination" )}
-                        subContainerClassName={"pages pagination"}
-                        disableInitialCallback={false}
-                        activeClassName={"active"}
-                        forcePage={this.state.currentPage}
+                            previousLabel={'<'}
+                            nextLabel={'>'}
+                            breakLabel={'...'}
+                            breakClassName={'break'}
+                            pageCount={this.state.pageCount}
+                            marginPagesDisplayed={2}
+                            pageRangeDisplayed={2}
+                            onPageChange={this.handlePageClick}
+                            containerClassName={this.props.tableSource.length == 0 ? 'pagination hidden' : 'pagination'}
+                            subContainerClassName={'pages pagination'}
+                            disableInitialCallback={false}
+                            activeClassName={'active'}
+                            forcePage={this.state.currentPage}
                         />
                     </Stack>
-
                 </div>
                 {/* Intermediate Result Modal */}
                 <Modal
@@ -690,31 +736,26 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         <IconButton
                             styles={iconButtonStyles}
                             iconProps={{ iconName: 'Cancel' }}
-                            ariaLabel="Close popup modal"
+                            ariaLabel='Close popup modal'
                             onClick={this.hideIntermediateModal as any}
                         />
                     </div>
-                    {
-                        intermediateOtherKeys.length > 1
-                            ?
-                            <Stack horizontalAlign="end" className="selectKeys">
-                                <Dropdown
-                                    className="select"
-                                    selectedKey={intermediateKey}
-                                    options={
-                                        intermediateOtherKeys.map((key, item) => {
-                                            return {
-                                                key: key, text: intermediateOtherKeys[item]
-                                            };
-                                        })
-                                    }
-                                    onChange={this.selectOtherKeys}
-                                />
-                            </Stack>
-                            :
-                            null
-                    }
-                    <div className="intermediate-graph">
+                    {intermediateOtherKeys.length > 1 ? (
+                        <Stack horizontalAlign='end' className='selectKeys'>
+                            <Dropdown
+                                className='select'
+                                selectedKey={intermediateKey}
+                                options={intermediateOtherKeys.map((key, item) => {
+                                    return {
+                                        key: key,
+                                        text: intermediateOtherKeys[item]
+                                    };
+                                })}
+                                onChange={this.selectOtherKeys}
+                            />
+                        </Stack>
+                    ) : null}
+                    <div className='intermediate-graph'>
                         <ReactEcharts
                             option={intermediateOption}
                             style={{
@@ -723,14 +764,13 @@ class TableList extends React.Component<TableListProps, TableListState> {
                                 maxHeight: 534,
                                 padding: 20
                             }}
-                            theme="my_theme"
+                            theme='my_theme'
                         />
-                        <div className="xAxis">#Intermediate result</div>
+                        <div className='xAxis'>#Intermediate result</div>
                     </div>
                 </Modal>
                 {/* Add Column Modal */}
-                {
-                    isShowColumn &&
+                {isShowColumn && (
                     <ChangeColumnComponent
                         hideShowColumnDialog={this.hideShowColumnModal}
                         isHideDialog={!isShowColumn}
@@ -738,7 +778,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         selectedColumn={columnList}
                         changeColumn={this.props.changeColumn}
                     />
-                }
+                )}
                 {/* compare trials based message */}
                 {isShowCompareModal && <Compare compareStacks={selectRows} cancelFunc={this.hideCompareModal} />}
                 {/* clone trial parameters and could submit a customized trial */}
@@ -752,4 +792,4 @@ class TableList extends React.Component<TableListProps, TableListState> {
     }
 }
 
-export default TableList;
\ No newline at end of file
+export default TableList;
diff --git a/src/webui/src/static/const.ts b/src/webui/src/static/const.ts
index 1a44cb3fba..f35826b5e0 100644
--- a/src/webui/src/static/const.ts
+++ b/src/webui/src/static/const.ts
@@ -2,7 +2,7 @@
 const METRIC_GROUP_UPDATE_THRESHOLD = 100;
 const METRIC_GROUP_UPDATE_SIZE = 20;
 
-const MANAGER_IP = `http://13.77.78.63:8080/api/v1/nni`;
+const MANAGER_IP = `/api/v1/nni`;
 const DOWNLOAD_IP = `/logs`;
 const WEBUIDOC = 'https://nni.readthedocs.io/en/latest/Tutorial/WebUI.html';
 const trialJobStatus = [
diff --git a/src/webui/src/static/function.ts b/src/webui/src/static/function.ts
index 210a729164..f4e614e403 100644
--- a/src/webui/src/static/function.ts
+++ b/src/webui/src/static/function.ts
@@ -259,5 +259,7 @@ export {
     metricAccuracy,
     parseMetrics,
     isArrayType,
-    requestAxios
+    requestAxios,
+    isNaNorInfinity,
+    formatComplexTypeValue
 };
diff --git a/src/webui/src/static/model/trial.ts b/src/webui/src/static/model/trial.ts
index 0b093f06e3..1578a6c4b2 100644
--- a/src/webui/src/static/model/trial.ts
+++ b/src/webui/src/static/model/trial.ts
@@ -1,6 +1,23 @@
 import * as JSON5 from 'json5';
-import { MetricDataRecord, TrialJobInfo, TableObj, TableRecord, Parameters, FinalType, MultipleAxes, SingleAxis } from '../interface';
-import { getFinal, formatAccuracy, metricAccuracy, parseMetrics, isArrayType, isNaNorInfinity, formatComplexTypeValue } from '../function';
+import {
+    MetricDataRecord,
+    TrialJobInfo,
+    TableObj,
+    TableRecord,
+    Parameters,
+    FinalType,
+    MultipleAxes,
+    SingleAxis
+} from '../interface';
+import {
+    getFinal,
+    formatAccuracy,
+    metricAccuracy,
+    parseMetrics,
+    isArrayType,
+    isNaNorInfinity,
+    formatComplexTypeValue
+} from '../function';
 
 /**
  * Get a structured representation of parameters
@@ -9,14 +26,17 @@ import { getFinal, formatAccuracy, metricAccuracy, parseMetrics, isArrayType, is
  * @param prefix Current namespace (to make full name for unexpected entries)
  * @returns Parsed structured parameters and unexpected entries
  */
-function inferTrialParameters(paramObj: object, space: MultipleAxes, prefix: string = ''): [Map<SingleAxis, any>, Map<string, any>] {
+function inferTrialParameters(
+    paramObj: object,
+    space: MultipleAxes,
+    prefix: string = ''
+): [Map<SingleAxis, any>, Map<string, any>] {
     const parameters = new Map<SingleAxis, any>();
     const unexpectedEntries = new Map<string, any>();
     for (const [k, v] of Object.entries(paramObj)) {
         // prefix can be a good fallback when corresponding item is not found in namespace
         const axisKey = space.axes.get(k);
-        if (prefix && k === '_name')
-            continue;
+        if (prefix && k === '_name') continue;
         if (axisKey !== undefined) {
             if (typeof v === 'object' && v._name !== undefined && axisKey.nested) {
                 // nested entry
@@ -93,7 +113,10 @@ class Trial implements TableObj {
             if (temp !== undefined) {
                 if (isArrayType(parseMetrics(temp.data))) {
                     return undefined;
-                } else if (typeof parseMetrics(temp.data) === 'object' && parseMetrics(temp.data).hasOwnProperty('default')) {
+                } else if (
+                    typeof parseMetrics(temp.data) === 'object' &&
+                    parseMetrics(temp.data).hasOwnProperty('default')
+                ) {
                     return parseMetrics(temp.data).default;
                 } else if (typeof parseMetrics(temp.data) === 'number') {
                     return parseMetrics(temp.data);
@@ -182,7 +205,7 @@ class Trial implements TableObj {
                 ret.parameters = getPara;
             }
         } else {
-            ret.parameters = { error: 'This trial\'s parameters are not available.' };
+            ret.parameters = { error: "This trial's parameters are not available." };
         }
         if (this.info.logPath !== undefined) {
             ret.logPath = this.info.logPath;
@@ -294,7 +317,7 @@ class Trial implements TableObj {
     }
 
     public updateTrialJobInfo(trialJobInfo: TrialJobInfo): boolean {
-        const same = (this.infoField && this.infoField.status === trialJobInfo.status);
+        const same = this.infoField && this.infoField.status === trialJobInfo.status;
         this.infoField = trialJobInfo;
         if (trialJobInfo.finalMetricData) {
             this.final = trialJobInfo.finalMetricData[trialJobInfo.finalMetricData.length - 1];
@@ -312,7 +335,6 @@ class Trial implements TableObj {
                     return `${formatAccuracy(val)} (LATEST)`;
                 } else {
                     return `${formatAccuracy(val)} (FINAL)`;
-
                 }
             }
         } else {
@@ -321,9 +343,10 @@ class Trial implements TableObj {
         }
     }
 
-    public formatLatestAccuracy(): string {  // TODO: this should be private
+    public formatLatestAccuracy(): string {
+        // TODO: this should be private
         if (this.status === 'SUCCEEDED') {
-            return (this.accuracy === undefined ? '--' : this.renderNumber(this.accuracy));
+            return this.accuracy === undefined ? '--' : this.renderNumber(this.accuracy);
         } else {
             if (this.accuracy !== undefined) {
                 return this.renderNumber(this.accuracy);
@@ -335,8 +358,7 @@ class Trial implements TableObj {
                 return this.renderNumber(metricAccuracy(latest));
             }
         }
-
     }
 }
 
-export { Trial };
\ No newline at end of file
+export { Trial };
diff --git a/src/webui/src/static/style/compare.scss b/src/webui/src/static/style/compare.scss
index ff3359564e..4f0996bdcd 100644
--- a/src/webui/src/static/style/compare.scss
+++ b/src/webui/src/static/style/compare.scss
@@ -4,14 +4,17 @@
         width: 50%;
         min-width: 450px;
     }
-    .ms-Modal-scrollableContent{
+
+    .ms-Modal-scrollableContent {
         overflow-x: hidden;
     }
+
     /* compare-md: table style */
-    .flex{
+    .flex {
         display: flex;
     }
-    &-table{
+
+    &-table {
         width: 92%;
         margin: 0 auto;
         margin-bottom: 20px;
diff --git a/src/webui/src/static/style/trialsDetail.scss b/src/webui/src/static/style/trialsDetail.scss
index 07e8a06091..a663b3d1d9 100644
--- a/src/webui/src/static/style/trialsDetail.scss
+++ b/src/webui/src/static/style/trialsDetail.scss
@@ -57,6 +57,7 @@
 #tableList {
     width: 96%;
     margin: 0 auto;
+
     .commonTableStyle {
         overflow: hidden;
     }

From 5e70a545b867f4e32e1bd8b194fdf16bf5688a03 Mon Sep 17 00:00:00 2001
From: Lijiao <Lijiaoa@outlook.com>
Date: Fri, 18 Sep 2020 03:24:07 +0000
Subject: [PATCH 8/8] fix conflict

---
 src/webui/.eslintignore                       |    2 +-
 src/webui/.eslintrc                           |    2 +-
 src/webui/.stylelintrc.json                   |   20 +-
 src/webui/package.json                        |   24 +-
 src/webui/prettier.config.js                  |    2 +-
 src/webui/src/App.tsx                         |   51 +-
 src/webui/src/components/NavCon.tsx           |    8 +-
 src/webui/src/components/Overview.tsx         |  217 ++-
 src/webui/src/components/TrialsDetail.tsx     |  224 +--
 .../components/{Buttons => buttons}/Icon.tsx  |    4 +-
 .../{Buttons => buttons}/ModalTheme.tsx       |    2 +-
 .../ChangeColumnComponent.tsx                 |    2 +-
 .../components/{Modals => modals}/Compare.tsx |    4 +-
 .../{Modals => modals}/CustomizedTrial.tsx    |    8 +-
 .../{Modals => modals}/ExperimentPanel.tsx    |    2 +-
 .../components/{Modals => modals}/Killjob.tsx |    4 +-
 .../{Modals => modals}/LogPanel.tsx           |   42 +-
 .../{Modals => modals}/MessageInfo.tsx        |    2 +-
 .../modals}/customized.scss                   |    0
 .../src/components/overview/BasicInfo.tsx     |   99 +-
 src/webui/src/components/overview/Details.tsx |    2 +-
 .../src/components/overview/NumInput.tsx      |    2 +-
 .../src/components/overview/Progress.tsx      |    8 +-
 .../src/components/overview/ProgressItem.tsx  |    2 +-
 .../src/components/overview/SuccessTable.tsx  |    2 +-
 src/webui/src/components/overview/Title1.tsx  |   31 +-
 .../components/public-child/MonacoEditor.tsx  |    2 +-
 .../src/components/public-child/OpenRow.tsx   |    4 +-
 .../stateless-component/NNItabs.tsx           |   14 +-
 .../trial-detail/DefaultMetricPoint.tsx       |    3 +-
 .../components/trial-detail/Intermediate.tsx  |    2 +-
 .../src/components/trial-detail/Para.tsx      |    2 +-
 .../src/components/trial-detail/TableList.tsx |   18 +-
 src/webui/src/index.tsx                       |   25 +-
 src/webui/src/static/function.ts              |    5 +-
 src/webui/src/static/style/nav/nav.scss       |   16 +-
 src/webui/src/static/style/search.scss        |    1 -
 src/webui/src/static/style/table.scss         |    8 +-
 src/webui/src/static/style/trialsDetail.scss  |    4 +
 src/webui/yarn.lock                           | 1630 ++++++++++++-----
 40 files changed, 1624 insertions(+), 876 deletions(-)
 rename src/webui/src/components/{Buttons => buttons}/Icon.tsx (89%)
 rename src/webui/src/components/{Buttons => buttons}/ModalTheme.tsx (98%)
 rename src/webui/src/components/{Modals => modals}/ChangeColumnComponent.tsx (99%)
 rename src/webui/src/components/{Modals => modals}/Compare.tsx (98%)
 rename src/webui/src/components/{Modals => modals}/CustomizedTrial.tsx (98%)
 rename src/webui/src/components/{Modals => modals}/ExperimentPanel.tsx (98%)
 rename src/webui/src/components/{Modals => modals}/Killjob.tsx (98%)
 rename src/webui/src/components/{Modals => modals}/LogPanel.tsx (89%)
 rename src/webui/src/components/{Modals => modals}/MessageInfo.tsx (89%)
 rename src/webui/src/{static/style => components/modals}/customized.scss (100%)

diff --git a/src/webui/.eslintignore b/src/webui/.eslintignore
index b83a84e051..c487812d87 100644
--- a/src/webui/.eslintignore
+++ b/src/webui/.eslintignore
@@ -1,3 +1,3 @@
 /build/**
 /scripts/**
-/src/serviceWorker.ts
+/src/serviceWorker.ts
\ No newline at end of file
diff --git a/src/webui/.eslintrc b/src/webui/.eslintrc
index 1ff0216e76..9fb5393e3e 100644
--- a/src/webui/.eslintrc
+++ b/src/webui/.eslintrc
@@ -44,4 +44,4 @@
             "**/*.js"
         ]
     }
-}
+}
\ No newline at end of file
diff --git a/src/webui/.stylelintrc.json b/src/webui/.stylelintrc.json
index ed2c635724..59743ae917 100644
--- a/src/webui/.stylelintrc.json
+++ b/src/webui/.stylelintrc.json
@@ -1,11 +1,11 @@
 {
-  "extends": "stylelint-config-standard",
-  "ignoreFiles": [
-    "build/**"
-  ],
-  "rules": {
-    "at-rule-empty-line-before": null,
-    "indentation": 4,
-    "no-descending-specificity": null
-  }
-}
+    "extends": "stylelint-config-standard",
+    "ignoreFiles": [
+        "build/**"
+    ],
+    "rules": {
+        "at-rule-empty-line-before": null,
+        "indentation": 4,
+        "no-descending-specificity": null
+    }
+}
\ No newline at end of file
diff --git a/src/webui/package.json b/src/webui/package.json
index 6be2634397..01be332eb3 100644
--- a/src/webui/package.json
+++ b/src/webui/package.json
@@ -1,7 +1,6 @@
 {
   "name": "nni-webui",
   "version": "0.1.0",
-  "private": true,
   "license": "MIT",
   "dependencies": {
     "axios": "^0.19.0",
@@ -23,12 +22,15 @@
     "html-webpack-plugin": "4.0.0-beta.5",
     "identity-obj-proxy": "3.0.0",
     "is-wsl": "^1.1.0",
+    "jest": "24.7.1",
+    "jest-environment-jsdom-fourteen": "0.1.0",
+    "jest-resolve": "24.7.1",
+    "jest-watch-typeahead": "0.3.0",
     "json5": "^2.1.1",
     "mini-css-extract-plugin": "0.5.0",
     "monaco-editor": "^0.19.0",
     "monaco-editor-webpack-plugin": "^1.8.1",
     "node-sass": "^4.13.0",
-    "office-ui-fabric-react": "^7.78.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "parcoord-es": "^2.2.10",
     "pnp-webpack-plugin": "1.2.1",
@@ -45,14 +47,13 @@
     "react-monaco-editor": "^0.32.1",
     "react-paginate": "^6.3.2",
     "react-pagination": "^1.0.0",
-    "react-router": "^3.2.3",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "react-table": "^7.0.0-rc.15",
     "resolve": "1.10.0",
     "sass-loader": "7.1.0",
     "semver": "6.0.0",
     "style-loader": "0.23.1",
-    "stylelint": "^13.7.0",
-    "stylelint-config-standard": "^20.0.0",
     "terser-webpack-plugin": "1.2.3",
     "url-loader": "1.1.2",
     "webpack": "4.29.6",
@@ -62,17 +63,16 @@
   },
   "devDependencies": {
     "@babel/core": "7.4.3",
+    "@fluentui/react": "^7.135.0",
     "@svgr/webpack": "4.1.0",
     "@types/d3": "^5.7.2",
     "@types/jest": "24.0.12",
     "@types/json5": "^0.0.30",
-    "@types/node": "^10.13.0",
-    "@types/react": "16.8.6",
-    "@types/react-dom": "^16.0.7",
-    "@types/react-router": "^3.0.20",
+    "@types/node": "^10.14.2",
+    "@types/react": "16.8.15",
+    "@types/react-dom": "16.8.4",
     "@typescript-eslint/eslint-plugin": "^2.11.0",
     "@typescript-eslint/parser": "^2.11.0",
-    "@uifabric/fluent-theme": "^0.16.7",
     "concurrently": "^5.2.0",
     "eslint": "^5.16.0",
     "eslint-config-prettier": "^6.1.0",
@@ -87,6 +87,8 @@
     "express": "^4.17.1",
     "npx": "^10.2.0",
     "prettier": "^1.18.2",
+    "stylelint": "^13.7.0",
+    "stylelint-config-standard": "^20.0.0",
     "typescript": "^3.8.0"
   },
   "proxy": "http://localhost:12138",
@@ -113,4 +115,4 @@
   "resolutions": {
     "npm": ">=6.14.4"
   }
-}
\ No newline at end of file
+}
diff --git a/src/webui/prettier.config.js b/src/webui/prettier.config.js
index 8865b43b22..09b26e21a6 100644
--- a/src/webui/prettier.config.js
+++ b/src/webui/prettier.config.js
@@ -5,8 +5,8 @@ module.exports = {
     trailingComma: 'none',
     arrowParens: 'avoid',
     bracketSpacing: true,
-    eslintIntegration: true,
     singleQuote: true,
+    eslintIntegration: true,
     jsxSingleQuote: true,
     endOfline: 'lf'
 };
diff --git a/src/webui/src/App.tsx b/src/webui/src/App.tsx
index 947fda94a3..08818e64be 100644
--- a/src/webui/src/App.tsx
+++ b/src/webui/src/App.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { Stack } from 'office-ui-fabric-react';
+import { Stack } from '@fluentui/react';
 import { COLUMN } from './static/const';
 import { EXPERIMENT, TRIALS } from './static/datamodel';
 import NavCon from './components/NavCon';
-import MessageInfo from './components/Modals/MessageInfo';
+import MessageInfo from './components/modals/MessageInfo';
 import './App.scss';
 
 interface AppState {
@@ -18,11 +18,25 @@ interface AppState {
     isUpdate: boolean;
 }
 
+export const AppContext = React.createContext({
+    interval: 10, // sendons
+    columnList: COLUMN,
+    experimentUpdateBroadcast: 0,
+    trialsUpdateBroadcast: 0,
+    metricGraphMode: 'max',
+    bestTrialEntries: '10',
+    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+    changeColumn: (val: string[]) => {},
+    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+    changeMetricGraphMode: (val: 'max' | 'min') => {},
+    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
+    changeEntries: (val: string) => {}
+});
+
 class App extends React.Component<{}, AppState> {
     private timerId!: number | undefined;
     private dataFormatimer!: number;
     private firstLoad: boolean = false; // when click refresh selector options
-
     constructor(props: {}) {
         super(props);
         this.state = {
@@ -132,21 +146,6 @@ class App extends React.Component<{}, AppState> {
             { errorWhere: TRIALS.latestMetricDataError(), errorMessage: TRIALS.getLatestMetricDataErrorMessage() },
             { errorWhere: TRIALS.metricDataRangeError(), errorMessage: TRIALS.metricDataRangeErrorMessage() }
         ];
-
-        const reactPropsChildren = React.Children.map(this.props.children, child =>
-            React.cloneElement(child as React.ReactElement<any>, {
-                interval,
-                columnList,
-                changeColumn: this.changeColumn,
-                experimentUpdateBroadcast,
-                trialsUpdateBroadcast,
-                metricGraphMode,
-                changeMetricGraphMode: this.changeMetricGraphMode,
-                bestTrialEntries,
-                changeEntries: this.changeEntries
-            })
-        );
-
         return (
             <Stack className='nni' style={{ minHeight: window.innerHeight }}>
                 <div className='header'>
@@ -170,7 +169,21 @@ class App extends React.Component<{}, AppState> {
                                 <MessageInfo info={expWarningMessage} typeInfo='warning' />
                             </div>
                         )}
-                        {reactPropsChildren}
+                        <AppContext.Provider
+                            value={{
+                                interval,
+                                columnList,
+                                changeColumn: this.changeColumn,
+                                experimentUpdateBroadcast,
+                                trialsUpdateBroadcast,
+                                metricGraphMode,
+                                changeMetricGraphMode: this.changeMetricGraphMode,
+                                bestTrialEntries,
+                                changeEntries: this.changeEntries
+                            }}
+                        >
+                            {this.props.children}
+                        </AppContext.Provider>
                     </Stack>
                 </Stack>
             </Stack>
diff --git a/src/webui/src/components/NavCon.tsx b/src/webui/src/components/NavCon.tsx
index 62ec9a209e..b1bc216fae 100644
--- a/src/webui/src/components/NavCon.tsx
+++ b/src/webui/src/components/NavCon.tsx
@@ -9,10 +9,10 @@ import {
     IContextualMenuProps,
     IStackTokens,
     IStackStyles
-} from 'office-ui-fabric-react';
-import LogPanel from './Modals/LogPanel';
-import ExperimentPanel from './Modals/ExperimentPanel';
-import { downLoadIcon, infoIconAbout, timeIcon, disableUpdates, requency, closeTimer } from './Buttons/Icon';
+} from '@fluentui/react';
+import LogPanel from './modals/LogPanel';
+import ExperimentPanel from './modals/ExperimentPanel';
+import { downLoadIcon, infoIconAbout, timeIcon, disableUpdates, requency, closeTimer } from './buttons/Icon';
 import { OVERVIEWTABS, DETAILTABS, NNILOGO } from './stateless-component/NNItabs';
 import { EXPERIMENT } from '../static/datamodel';
 import '../static/style/nav/nav.scss';
diff --git a/src/webui/src/components/Overview.tsx b/src/webui/src/components/Overview.tsx
index b5fde3433a..a875d2efaa 100644
--- a/src/webui/src/components/Overview.tsx
+++ b/src/webui/src/components/Overview.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react';
-import { Stack, IStackTokens, Dropdown } from 'office-ui-fabric-react';
+import { Stack, IStackTokens, Dropdown } from '@fluentui/react';
 import { EXPERIMENT, TRIALS } from '../static/datamodel';
 import { Trial } from '../static/model/trial';
-import Title1 from './overview/Title1';
+import { AppContext } from '../App';
+import { Title1 } from './overview/Title1';
 import SuccessTable from './overview/SuccessTable';
 import Progressed from './overview/Progress';
 import Accuracy from './overview/Accuracy';
 import SearchSpace from './overview/SearchSpace';
-import BasicInfo from './overview/BasicInfo';
+import { BasicInfo } from './overview/BasicInfo';
 import TrialInfo from './overview/TrialProfile';
 import '../static/style/overview.scss';
 import '../static/style/logPath.scss';
@@ -24,21 +25,20 @@ const entriesOption = [
     { key: '100', text: 'Display top 100 trials' }
 ];
 
-interface OverviewProps {
-    experimentUpdateBroadcast: number;
-    trialsUpdateBroadcast: number;
-    metricGraphMode: 'max' | 'min';
-    bestTrialEntries: string;
-    changeMetricGraphMode: (val: 'max' | 'min') => void;
-    changeEntries: (entries: string) => void;
-}
-
 interface OverviewState {
     trialConcurrency: number;
 }
 
-class Overview extends React.Component<OverviewProps, OverviewState> {
-    constructor(props: OverviewProps) {
+export const TitleContext = React.createContext({
+    text: '',
+    icon: '',
+    fontColor: ''
+});
+
+class Overview extends React.Component<{}, OverviewState> {
+    static contextType = AppContext;
+
+    constructor(props) {
         super(props);
         this.state = {
             trialConcurrency: EXPERIMENT.trialConcurrency
@@ -48,13 +48,13 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
     clickMaxTop = (event: React.SyntheticEvent<EventTarget>): void => {
         event.stopPropagation();
         // #999 panel active bgcolor; #b3b3b3 as usual
-        const { changeMetricGraphMode } = this.props;
+        const { changeMetricGraphMode } = this.context;
         changeMetricGraphMode('max');
     };
 
     clickMinTop = (event: React.SyntheticEvent<EventTarget>): void => {
         event.stopPropagation();
-        const { changeMetricGraphMode } = this.props;
+        const { changeMetricGraphMode } = this.context;
         changeMetricGraphMode('min');
     };
 
@@ -65,97 +65,134 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
     // updateEntries = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
     updateEntries = (event: React.FormEvent<HTMLDivElement>, item: any): void => {
         if (item !== undefined) {
-            this.props.changeEntries(item.key);
+            this.context.changeEntries(item.key);
         }
     };
 
     render(): React.ReactNode {
         const { trialConcurrency } = this.state;
-        const { experimentUpdateBroadcast, metricGraphMode, bestTrialEntries } = this.props;
         const bestTrials = this.findBestTrials();
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const bestAccuracy = bestTrials.length > 0 ? bestTrials[0].accuracy! : NaN;
         const accuracyGraphData = this.generateAccuracyGraph(bestTrials);
         const noDataMessage = bestTrials.length > 0 ? '' : 'No data';
-
-        const titleMaxbgcolor = metricGraphMode === 'max' ? '#333' : '#b3b3b3';
-        const titleMinbgcolor = metricGraphMode === 'min' ? '#333' : '#b3b3b3';
-
         return (
-            <div className='overview'>
-                {/* status and experiment block */}
-                <Stack className='bottomDiv bgNNI'>
-                    <Title1 text='Experiment' icon='11.png' />
-                    <BasicInfo experimentUpdateBroadcast={experimentUpdateBroadcast} />
-                </Stack>
-
-                <Stack horizontal className='overMessage bottomDiv'>
-                    {/* status block */}
-                    <Stack.Item grow className='prograph bgNNI borderRight'>
-                        <Title1 text='Status' icon='5.png' />
-                        <Progressed
-                            bestAccuracy={bestAccuracy}
-                            concurrency={trialConcurrency}
-                            changeConcurrency={this.changeConcurrency}
-                            experimentUpdateBroadcast={experimentUpdateBroadcast}
-                        />
-                    </Stack.Item>
-                    {/* experiment parameters search space tuner assessor... */}
-                    <Stack.Item grow styles={{ root: { width: 450 } }} className='overviewBoder borderRight bgNNI'>
-                        <Title1 text='Search space' icon='10.png' />
-                        <Stack className='experiment'>
-                            <SearchSpace searchSpace={EXPERIMENT.searchSpace} />
-                        </Stack>
-                    </Stack.Item>
-                    {/* <Stack.Item grow styles={{root: {width: 450}}} className="bgNNI"> */}
-                    <Stack.Item grow styles={{ root: { width: 450 } }} className='bgNNI'>
-                        <Title1 text='Config' icon='4.png' />
-                        <Stack className='experiment'>
-                            {/* the scroll bar all the trial profile in the searchSpace div*/}
-                            <div className='experiment searchSpace'>
-                                <TrialInfo
-                                    experimentUpdateBroadcast={experimentUpdateBroadcast}
-                                    concurrency={trialConcurrency}
-                                />
-                            </div>
-                        </Stack>
-                    </Stack.Item>
-                </Stack>
-
-                <Stack style={{ backgroundColor: '#fff' }}>
-                    <Stack horizontal className='top10bg' style={{ position: 'relative', height: 42 }}>
-                        <div className='title' onClick={this.clickMaxTop}>
-                            <Title1 text='Top maximal trials' icon='max.png' fontColor={titleMaxbgcolor} />
-                        </div>
-                        <div className='title minTitle' onClick={this.clickMinTop}>
-                            <Title1 text='Top minimal trials' icon='min.png' fontColor={titleMinbgcolor} />
-                        </div>
-                        <div style={{ position: 'absolute', right: '2%', top: 8 }}>
-                            <Dropdown
-                                selectedKey={bestTrialEntries}
-                                options={entriesOption}
-                                onChange={this.updateEntries}
-                                styles={{ root: { width: 170 } }}
-                            />
-                        </div>
-                    </Stack>
-                    <Stack horizontal tokens={stackTokens}>
-                        <div style={{ width: '40%', position: 'relative' }}>
-                            <Accuracy accuracyData={accuracyGraphData} accNodata={noDataMessage} height={404} />
-                        </div>
-                        <div style={{ width: '60%' }}>
-                            <SuccessTable trialIds={bestTrials.map(trial => trial.info.id)} />
+            <AppContext.Consumer>
+                {(value): React.ReactNode => {
+                    const { experimentUpdateBroadcast, metricGraphMode, bestTrialEntries } = value;
+                    const titleMaxbgcolor = metricGraphMode === 'max' ? '#333' : '#b3b3b3';
+                    const titleMinbgcolor = metricGraphMode === 'min' ? '#333' : '#b3b3b3';
+                    return (
+                        <div className='overview'>
+                            {/* status and experiment block */}
+                            <Stack className='bottomDiv bgNNI'>
+                                <TitleContext.Provider value={{ text: 'Experiment', icon: '11.png', fontColor: '' }}>
+                                    <Title1 />
+                                </TitleContext.Provider>
+                                <BasicInfo />
+                            </Stack>
+
+                            <Stack horizontal className='overMessage bottomDiv'>
+                                {/* status block */}
+                                <Stack.Item grow className='prograph bgNNI borderRight'>
+                                    <TitleContext.Provider value={{ text: 'Status', icon: '5.png', fontColor: '' }}>
+                                        <Title1 />
+                                    </TitleContext.Provider>
+                                    <Progressed
+                                        bestAccuracy={bestAccuracy}
+                                        concurrency={trialConcurrency}
+                                        changeConcurrency={this.changeConcurrency}
+                                        experimentUpdateBroadcast={experimentUpdateBroadcast}
+                                    />
+                                </Stack.Item>
+                                {/* experiment parameters search space tuner assessor... */}
+                                <Stack.Item
+                                    grow
+                                    styles={{ root: { width: 450 } }}
+                                    className='overviewBoder borderRight bgNNI'
+                                >
+                                    <TitleContext.Provider
+                                        value={{ text: 'Search space', icon: '10.png', fontColor: '' }}
+                                    >
+                                        <Title1 />
+                                    </TitleContext.Provider>
+                                    <Stack className='experiment'>
+                                        <SearchSpace searchSpace={EXPERIMENT.searchSpace} />
+                                    </Stack>
+                                </Stack.Item>
+                                <Stack.Item grow styles={{ root: { width: 450 } }} className='bgNNI'>
+                                    <TitleContext.Provider value={{ text: 'Config', icon: '4.png', fontColor: '' }}>
+                                        <Title1 />
+                                    </TitleContext.Provider>
+                                    <Stack className='experiment'>
+                                        {/* the scroll bar all the trial profile in the searchSpace div*/}
+                                        <div className='experiment searchSpace'>
+                                            <TrialInfo
+                                                experimentUpdateBroadcast={experimentUpdateBroadcast}
+                                                concurrency={trialConcurrency}
+                                            />
+                                        </div>
+                                    </Stack>
+                                </Stack.Item>
+                            </Stack>
+
+                            <Stack style={{ backgroundColor: '#fff' }}>
+                                <Stack horizontal className='top10bg' style={{ position: 'relative', height: 42 }}>
+                                    <div className='title' onClick={this.clickMaxTop}>
+                                        <TitleContext.Provider
+                                            value={{
+                                                text: 'Top maximal trials',
+                                                icon: 'max.png',
+                                                fontColor: titleMaxbgcolor
+                                            }}
+                                        >
+                                            <Title1 />
+                                        </TitleContext.Provider>
+                                    </div>
+                                    <div className='title minTitle' onClick={this.clickMinTop}>
+                                        <TitleContext.Provider
+                                            value={{
+                                                text: 'Top minimal trials',
+                                                icon: 'min.png',
+                                                fontColor: titleMinbgcolor
+                                            }}
+                                        >
+                                            <Title1 />
+                                        </TitleContext.Provider>
+                                    </div>
+                                    <div style={{ position: 'absolute', right: '2%', top: 8 }}>
+                                        <Dropdown
+                                            selectedKey={bestTrialEntries}
+                                            options={entriesOption}
+                                            onChange={this.updateEntries}
+                                            styles={{ root: { width: 170 } }}
+                                        />
+                                    </div>
+                                </Stack>
+                                <Stack horizontal tokens={stackTokens}>
+                                    <div style={{ width: '40%', position: 'relative' }}>
+                                        <Accuracy
+                                            accuracyData={accuracyGraphData}
+                                            accNodata={noDataMessage}
+                                            height={404}
+                                        />
+                                    </div>
+                                    <div style={{ width: '60%' }}>
+                                        <SuccessTable trialIds={bestTrials.map(trial => trial.info.id)} />
+                                    </div>
+                                </Stack>
+                            </Stack>
                         </div>
-                    </Stack>
-                </Stack>
-            </div>
+                    );
+                }}
+            </AppContext.Consumer>
         );
     }
 
     private findBestTrials(): Trial[] {
         const bestTrials = TRIALS.sort();
-        const { bestTrialEntries } = this.props;
-        if (this.props.metricGraphMode === 'max') {
+        const { bestTrialEntries, metricGraphMode } = this.context;
+        if (metricGraphMode === 'max') {
             bestTrials.reverse().splice(JSON.parse(bestTrialEntries));
         } else {
             bestTrials.splice(JSON.parse(bestTrialEntries));
diff --git a/src/webui/src/components/TrialsDetail.tsx b/src/webui/src/components/TrialsDetail.tsx
index d2e9d3ae40..b22d6d2841 100644
--- a/src/webui/src/components/TrialsDetail.tsx
+++ b/src/webui/src/components/TrialsDetail.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { Stack, StackItem, Pivot, PivotItem, Dropdown, IDropdownOption, DefaultButton } from 'office-ui-fabric-react';
+import { Stack, StackItem, Pivot, PivotItem, Dropdown, IDropdownOption, DefaultButton } from '@fluentui/react';
 import { EXPERIMENT, TRIALS } from '../static/datamodel';
 import { Trial } from '../static/model/trial';
-import { tableListIcon } from './Buttons/Icon';
+import { AppContext } from '../App';
+import { tableListIcon } from './buttons/Icon';
 import DefaultPoint from './trial-detail/DefaultMetricPoint';
 import Duration from './trial-detail/Duration';
 import Para from './trial-detail/Para';
@@ -11,6 +12,13 @@ import TableList from './trial-detail/TableList';
 import '../static/style/trialsDetail.scss';
 import '../static/style/search.scss';
 
+const searchOptions = [
+    { key: 'id', text: 'Id' },
+    { key: 'Trial No.', text: 'Trial No.' },
+    { key: 'status', text: 'Status' },
+    { key: 'parameters', text: 'Parameters' }
+];
+
 interface TrialDetailState {
     tablePageSize: number; // table components val
     whichChart: string;
@@ -18,21 +26,15 @@ interface TrialDetailState {
     searchFilter: (trial: Trial) => boolean;
 }
 
-interface TrialsDetailProps {
-    columnList: string[];
-    changeColumn: (val: string[]) => void;
-    experimentUpdateBroacast: number;
-    trialsUpdateBroadcast: number;
-}
-
-class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState> {
+class TrialsDetail extends React.Component<{}, TrialDetailState> {
+    static contextType = AppContext;
     public interAccuracy = 0;
     public interAllTableList = 2;
 
     public tableList!: TableList | null;
     public searchInput!: HTMLInputElement | null;
 
-    constructor(props: TrialsDetailProps) {
+    constructor(props) {
         super(props);
         this.state = {
             tablePageSize: 20,
@@ -94,113 +96,111 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
 
     render(): React.ReactNode {
         const { tablePageSize, whichChart, searchType } = this.state;
-        const { columnList, changeColumn } = this.props;
         const source = TRIALS.filter(this.state.searchFilter);
         const trialIds = TRIALS.filter(this.state.searchFilter).map(trial => trial.id);
-        const searchOptions = [
-            { key: 'id', text: 'Id' },
-            { key: 'Trial No.', text: 'Trial No.' },
-            { key: 'status', text: 'Status' },
-            { key: 'parameters', text: 'Parameters' }
-        ];
+
         return (
-            <div>
-                <div className='trial' id='tabsty'>
-                    <Pivot
-                        defaultSelectedKey={'0'}
-                        className='detial-title'
-                        onLinkClick={this.handleWhichTabs}
-                        selectedKey={whichChart}
-                    >
-                        {/* <PivotItem tab={this.titleOfacc} key="1"> doesn't work*/}
-                        <PivotItem headerText='Default metric' itemIcon='HomeGroup' key='Default metric'>
-                            <Stack className='graph'>
-                                <DefaultPoint
-                                    trialIds={trialIds}
-                                    visible={whichChart === 'Default metric'}
-                                    trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
-                                />
+            <AppContext.Consumer>
+                {(value): React.ReactNode => (
+                    <React.Fragment>
+                        <div className='trial' id='tabsty'>
+                            <Pivot
+                                defaultSelectedKey={'0'}
+                                className='detial-title'
+                                onLinkClick={this.handleWhichTabs}
+                                selectedKey={whichChart}
+                            >
+                                {/* <PivotItem tab={this.titleOfacc} key="1"> doesn't work*/}
+                                <PivotItem headerText='Default metric' itemIcon='HomeGroup' key='Default metric'>
+                                    <Stack className='graph'>
+                                        <DefaultPoint trialIds={trialIds} visible={whichChart === 'Default metric'} />
+                                    </Stack>
+                                </PivotItem>
+                                {/* <PivotItem tab={this.titleOfhyper} key="2"> */}
+                                <PivotItem headerText='Hyper-parameter' itemIcon='Equalizer' key='Hyper-parameter'>
+                                    <Stack className='graph'>
+                                        <Para
+                                            trials={source}
+                                            searchSpace={EXPERIMENT.searchSpaceNew}
+                                            whichChart={whichChart}
+                                        />
+                                    </Stack>
+                                </PivotItem>
+                                {/* <PivotItem tab={this.titleOfDuration} key="3"> */}
+                                <PivotItem headerText='Duration' itemIcon='BarChartHorizontal' key='Duration'>
+                                    <Duration source={source} whichChart={whichChart} />
+                                </PivotItem>
+                                {/* <PivotItem tab={this.titleOfIntermediate} key="4"> */}
+                                <PivotItem
+                                    headerText='Intermediate result'
+                                    itemIcon='StackedLineChart'
+                                    key='Intermediate result'
+                                >
+                                    {/* *why this graph has small footprint? */}
+                                    <Intermediate source={source} whichChart={whichChart} />
+                                </PivotItem>
+                            </Pivot>
+                        </div>
+                        {/* trial table list */}
+                        <div style={{ backgroundColor: '#fff' }}>
+                            <Stack horizontal className='panelTitle' style={{ marginTop: 10 }}>
+                                <span style={{ marginRight: 12 }}>{tableListIcon}</span>
+                                <span>Trial jobs</span>
                             </Stack>
-                        </PivotItem>
-                        {/* <PivotItem tab={this.titleOfhyper} key="2"> */}
-                        <PivotItem headerText='Hyper-parameter' itemIcon='Equalizer' key='Hyper-parameter'>
-                            <Stack className='graph'>
-                                <Para trials={source} searchSpace={EXPERIMENT.searchSpaceNew} whichChart={whichChart} />
+                            <Stack horizontal className='allList'>
+                                <StackItem grow={50}>
+                                    <DefaultButton
+                                        text='Compare'
+                                        className='allList-compare'
+                                        // use child-component tableList's function, the function is in child-component.
+                                        onClick={(): void => {
+                                            if (this.tableList) {
+                                                this.tableList.compareBtn();
+                                            }
+                                        }}
+                                    />
+                                </StackItem>
+                                <StackItem grow={50}>
+                                    <Stack horizontal horizontalAlign='end' className='allList'>
+                                        <DefaultButton
+                                            className='allList-button-gap'
+                                            text='Add column'
+                                            onClick={(): void => {
+                                                if (this.tableList) {
+                                                    this.tableList.addColumn();
+                                                }
+                                            }}
+                                        />
+                                        <Dropdown
+                                            selectedKey={searchType}
+                                            options={searchOptions}
+                                            onChange={this.updateSearchFilterType}
+                                            styles={{ root: { width: 150 } }}
+                                        />
+                                        <input
+                                            type='text'
+                                            className='allList-search-input'
+                                            placeholder={`Search by ${this.state.searchType}`}
+                                            onChange={this.searchTrial}
+                                            style={{ width: 230 }}
+                                            ref={(text): any => (this.searchInput = text)}
+                                        />
+                                    </Stack>
+                                </StackItem>
                             </Stack>
-                        </PivotItem>
-                        {/* <PivotItem tab={this.titleOfDuration} key="3"> */}
-                        <PivotItem headerText='Duration' itemIcon='BarChartHorizontal' key='Duration'>
-                            <Duration source={source} whichChart={whichChart} />
-                        </PivotItem>
-                        {/* <PivotItem tab={this.titleOfIntermediate} key="4"> */}
-                        <PivotItem
-                            headerText='Intermediate result'
-                            itemIcon='StackedLineChart'
-                            key='Intermediate result'
-                        >
-                            {/* *why this graph has small footprint? */}
-                            <Intermediate source={source} whichChart={whichChart} />
-                        </PivotItem>
-                    </Pivot>
-                </div>
-                {/* trial table list */}
-                <div style={{ backgroundColor: '#fff' }}>
-                    <Stack horizontal className='panelTitle' style={{ marginTop: 10 }}>
-                        <span style={{ marginRight: 12 }}>{tableListIcon}</span>
-                        <span>Trial jobs</span>
-                    </Stack>
-                    <Stack horizontal className='allList'>
-                        <StackItem grow={50}>
-                            <DefaultButton
-                                text='Compare'
-                                className='allList-compare'
-                                // use child-component tableList's function, the function is in child-component.
-                                onClick={(): void => {
-                                    if (this.tableList) {
-                                        this.tableList.compareBtn();
-                                    }
-                                }}
+                            <TableList
+                                pageSize={tablePageSize}
+                                tableSource={source.map(trial => trial.tableRecord)}
+                                columnList={value.columnList}
+                                changeColumn={value.changeColumn}
+                                trialsUpdateBroadcast={this.context.trialsUpdateBroadcast}
+                                // TODO: change any to specific type
+                                ref={(tabList): any => (this.tableList = tabList)}
                             />
-                        </StackItem>
-                        <StackItem grow={50}>
-                            <Stack horizontal horizontalAlign='end' className='allList'>
-                                <DefaultButton
-                                    className='allList-button-gap'
-                                    text='Add column'
-                                    onClick={(): void => {
-                                        if (this.tableList) {
-                                            this.tableList.addColumn();
-                                        }
-                                    }}
-                                />
-                                <Dropdown
-                                    selectedKey={searchType}
-                                    options={searchOptions}
-                                    onChange={this.updateSearchFilterType}
-                                    styles={{ root: { width: 150 } }}
-                                />
-                                <input
-                                    type='text'
-                                    className='allList-search-input'
-                                    placeholder={`Search by ${this.state.searchType}`}
-                                    onChange={this.searchTrial}
-                                    style={{ width: 230 }}
-                                    ref={(text): any => (this.searchInput = text)}
-                                />
-                            </Stack>
-                        </StackItem>
-                    </Stack>
-                    <TableList
-                        pageSize={tablePageSize}
-                        tableSource={source.map(trial => trial.tableRecord)}
-                        columnList={columnList}
-                        changeColumn={changeColumn}
-                        trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
-                        // TODO: change any to specific type
-                        ref={(tabList): any => (this.tableList = tabList)}
-                    />
-                </div>
-            </div>
+                        </div>
+                    </React.Fragment>
+                )}
+            </AppContext.Consumer>
         );
     }
 }
diff --git a/src/webui/src/components/Buttons/Icon.tsx b/src/webui/src/components/buttons/Icon.tsx
similarity index 89%
rename from src/webui/src/components/Buttons/Icon.tsx
rename to src/webui/src/components/buttons/Icon.tsx
index e67f71a6dc..4d77758feb 100644
--- a/src/webui/src/components/Buttons/Icon.tsx
+++ b/src/webui/src/components/buttons/Icon.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Icon, initializeIcons } from 'office-ui-fabric-react';
+import { Icon, initializeIcons } from '@fluentui/react';
 initializeIcons();
 
 const infoIcon = <Icon iconName='info' />;
@@ -11,7 +11,7 @@ const copy = <Icon iconName='Copy' />;
 const tableListIcon = <Icon iconName='BulletedList' />;
 const downLoadIcon = { iconName: 'Download' };
 const infoIconAbout = { iconName: 'info' };
-const timeIcon = { iconName: 'ReminderTime' };
+const timeIcon = { iconName: 'Refresh' };
 const disableUpdates = { iconName: 'DisableUpdates' };
 const requency = { iconName: 'Timer' };
 const closeTimer = { iconName: 'Blocked2' };
diff --git a/src/webui/src/components/Buttons/ModalTheme.tsx b/src/webui/src/components/buttons/ModalTheme.tsx
similarity index 98%
rename from src/webui/src/components/Buttons/ModalTheme.tsx
rename to src/webui/src/components/buttons/ModalTheme.tsx
index 90871597aa..eaf513b532 100644
--- a/src/webui/src/components/Buttons/ModalTheme.tsx
+++ b/src/webui/src/components/buttons/ModalTheme.tsx
@@ -1,4 +1,4 @@
-import { getTheme, mergeStyleSets, FontWeights, FontSizes } from 'office-ui-fabric-react';
+import { getTheme, mergeStyleSets, FontWeights, FontSizes } from '@fluentui/react';
 // Themed styles for the example.
 const theme = getTheme();
 const contentStyles = mergeStyleSets({
diff --git a/src/webui/src/components/Modals/ChangeColumnComponent.tsx b/src/webui/src/components/modals/ChangeColumnComponent.tsx
similarity index 99%
rename from src/webui/src/components/Modals/ChangeColumnComponent.tsx
rename to src/webui/src/components/modals/ChangeColumnComponent.tsx
index 673246aad0..a4691b8d40 100644
--- a/src/webui/src/components/Modals/ChangeColumnComponent.tsx
+++ b/src/webui/src/components/modals/ChangeColumnComponent.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Dialog, DialogType, DialogFooter, Checkbox, PrimaryButton, DefaultButton } from 'office-ui-fabric-react';
+import { Dialog, DialogType, DialogFooter, Checkbox, PrimaryButton, DefaultButton } from '@fluentui/react';
 import { OPERATION } from '../../static/const';
 
 interface ChangeColumnState {
diff --git a/src/webui/src/components/Modals/Compare.tsx b/src/webui/src/components/modals/Compare.tsx
similarity index 98%
rename from src/webui/src/components/Modals/Compare.tsx
rename to src/webui/src/components/modals/Compare.tsx
index 5c33196590..daed24526c 100644
--- a/src/webui/src/components/Modals/Compare.tsx
+++ b/src/webui/src/components/modals/Compare.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Stack, Modal, IconButton, IDragOptions, ContextualMenu } from 'office-ui-fabric-react';
+import { Stack, Modal, IconButton, IDragOptions, ContextualMenu } from '@fluentui/react';
 import ReactEcharts from 'echarts-for-react';
 import IntermediateVal from '../public-child/IntermediateVal';
 import { TRIALS } from '../../static/datamodel';
 import { TableRecord, Intermedia, TooltipForIntermediate } from '../../static/interface';
-import { contentStyles, iconButtonStyles } from '../Buttons/ModalTheme';
+import { contentStyles, iconButtonStyles } from '../buttons/ModalTheme';
 import '../../static/style/compare.scss';
 
 const dragOptions: IDragOptions = {
diff --git a/src/webui/src/components/Modals/CustomizedTrial.tsx b/src/webui/src/components/modals/CustomizedTrial.tsx
similarity index 98%
rename from src/webui/src/components/Modals/CustomizedTrial.tsx
rename to src/webui/src/components/modals/CustomizedTrial.tsx
index ea62bf6864..86d4ed3c50 100644
--- a/src/webui/src/components/Modals/CustomizedTrial.tsx
+++ b/src/webui/src/components/modals/CustomizedTrial.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import axios from 'axios';
-import { Stack, StackItem, PrimaryButton, DefaultButton } from 'office-ui-fabric-react';
-import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
+import { Stack, StackItem, PrimaryButton, DefaultButton } from '@fluentui/react';
+import { Dialog, DialogType, DialogFooter } from '@fluentui/react/lib/Dialog';
 import { MANAGER_IP } from '../../static/const';
 import { EXPERIMENT, TRIALS } from '../../static/datamodel';
-import { warining, errorBadge, completed } from '../Buttons/Icon';
-import '../../static/style/customized.scss';
+import { warining, errorBadge, completed } from '../buttons/Icon';
+import './customized.scss';
 
 interface CustomizeProps {
     visible: boolean;
diff --git a/src/webui/src/components/Modals/ExperimentPanel.tsx b/src/webui/src/components/modals/ExperimentPanel.tsx
similarity index 98%
rename from src/webui/src/components/Modals/ExperimentPanel.tsx
rename to src/webui/src/components/modals/ExperimentPanel.tsx
index 9367097c06..11b45abf11 100644
--- a/src/webui/src/components/Modals/ExperimentPanel.tsx
+++ b/src/webui/src/components/modals/ExperimentPanel.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { downFile } from '../../static/function';
-import { Stack, PrimaryButton, DefaultButton, Panel, StackItem, Pivot, PivotItem } from 'office-ui-fabric-react';
+import { Stack, PrimaryButton, DefaultButton, Panel, StackItem, Pivot, PivotItem } from '@fluentui/react';
 import { DRAWEROPTION } from '../../static/const';
 import { EXPERIMENT, TRIALS } from '../../static/datamodel';
 import MonacoEditor from 'react-monaco-editor';
diff --git a/src/webui/src/components/Modals/Killjob.tsx b/src/webui/src/components/modals/Killjob.tsx
similarity index 98%
rename from src/webui/src/components/Modals/Killjob.tsx
rename to src/webui/src/components/modals/Killjob.tsx
index aeae4391bc..e35be32cfa 100644
--- a/src/webui/src/components/Modals/Killjob.tsx
+++ b/src/webui/src/components/modals/Killjob.tsx
@@ -8,9 +8,9 @@ import {
     getTheme,
     mergeStyleSets,
     FontWeights
-} from 'office-ui-fabric-react';
+} from '@fluentui/react';
 import { killJob } from '../../static/function';
-import { blocked } from '../Buttons/Icon';
+import { blocked } from '../buttons/Icon';
 
 const theme = getTheme();
 const styles = mergeStyleSets({
diff --git a/src/webui/src/components/Modals/LogPanel.tsx b/src/webui/src/components/modals/LogPanel.tsx
similarity index 89%
rename from src/webui/src/components/Modals/LogPanel.tsx
rename to src/webui/src/components/modals/LogPanel.tsx
index ef7a717fe5..1b4c7a9cf3 100644
--- a/src/webui/src/components/Modals/LogPanel.tsx
+++ b/src/webui/src/components/modals/LogPanel.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import axios from 'axios';
-import { Stack, StackItem, Panel, PrimaryButton, DefaultButton, Pivot, PivotItem } from 'office-ui-fabric-react';
-import { infoIcon } from '../Buttons/Icon';
+import { Stack, StackItem, Panel, PrimaryButton, DefaultButton, Pivot, PivotItem } from '@fluentui/react';
+import { infoIcon } from '../buttons/Icon';
 import { DOWNLOAD_IP } from '../../static/const';
 import { downFile } from '../../static/function';
 import MonacoHTML from '../public-child/MonacoEditor';
@@ -45,27 +45,23 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
         }
     };
 
-    dispatcherHTML = (): React.ReactNode => {
-        return (
-            <div>
-                <span>Dispatcher log</span>
-                <span className='refresh' onClick={this.manualRefresh}>
-                    {infoIcon}
-                </span>
-            </div>
-        );
-    };
-
-    nnimanagerHTML = (): React.ReactNode => {
-        return (
-            <div>
-                <span>NNImanager log</span>
-                <span className='refresh' onClick={this.manualRefresh}>
-                    {infoIcon}
-                </span>
-            </div>
-        );
-    };
+    dispatcherHTML = (): React.ReactNode => (
+        <div>
+            <span>Dispatcher log</span>
+            <span className='refresh' onClick={this.manualRefresh}>
+                {infoIcon}
+            </span>
+        </div>
+    );
+
+    nnimanagerHTML = (): React.ReactNode => (
+        <div>
+            <span>NNImanager log</span>
+            <span className='refresh' onClick={this.manualRefresh}>
+                {infoIcon}
+            </span>
+        </div>
+    );
 
     setLogDrawerHeight = (): void => {
         this.setState(() => ({ logDrawerHeight: window.innerHeight - 48 }));
diff --git a/src/webui/src/components/Modals/MessageInfo.tsx b/src/webui/src/components/modals/MessageInfo.tsx
similarity index 89%
rename from src/webui/src/components/Modals/MessageInfo.tsx
rename to src/webui/src/components/modals/MessageInfo.tsx
index 8477cda63e..c9f34c7149 100644
--- a/src/webui/src/components/Modals/MessageInfo.tsx
+++ b/src/webui/src/components/modals/MessageInfo.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MessageBar, MessageBarType } from 'office-ui-fabric-react';
+import { MessageBar, MessageBarType } from '@fluentui/react';
 
 interface MessageInfoProps {
     info: string;
diff --git a/src/webui/src/static/style/customized.scss b/src/webui/src/components/modals/customized.scss
similarity index 100%
rename from src/webui/src/static/style/customized.scss
rename to src/webui/src/components/modals/customized.scss
diff --git a/src/webui/src/components/overview/BasicInfo.tsx b/src/webui/src/components/overview/BasicInfo.tsx
index c49ed1f1c7..6ef6505191 100644
--- a/src/webui/src/components/overview/BasicInfo.tsx
+++ b/src/webui/src/components/overview/BasicInfo.tsx
@@ -1,62 +1,43 @@
-import * as React from 'react';
-import { Stack, TooltipHost, getId } from 'office-ui-fabric-react';
+import React from 'react';
+import { Stack, TooltipHost } from '@fluentui/react';
 import { EXPERIMENT } from '../../static/datamodel';
 import { formatTimestamp } from '../../static/function';
 
-interface BasicInfoProps {
-    experimentUpdateBroadcast: number;
-}
-
-class BasicInfo extends React.Component<BasicInfoProps, {}> {
-    // Use getId() to ensure that the ID is unique on the page.
-    // (It's also okay to use a plain string without getId() and manually ensure uniqueness.)
-    // for tooltip user the log directory
-    private _hostId: string = getId('tooltipHost');
-    constructor(props: BasicInfoProps) {
-        super(props);
-    }
-
-    render(): React.ReactNode {
-        return (
-            <Stack horizontal horizontalAlign='space-between' className='main'>
-                <Stack.Item grow={3} className='padItem basic'>
-                    <p>Name</p>
-                    <div>{EXPERIMENT.profile.params.experimentName}</div>
-                </Stack.Item>
-                <Stack.Item grow={3} className='padItem basic'>
-                    <p>ID</p>
-                    <div>{EXPERIMENT.profile.id}</div>
-                </Stack.Item>
-                <Stack.Item grow={3} className='padItem basic'>
-                    <p>Start time</p>
-                    <div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.startTime)}</div>
-                </Stack.Item>
-                <Stack.Item grow={3} className='padItem basic'>
-                    <p>End time</p>
-                    <div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.endTime)}</div>
-                </Stack.Item>
-                <Stack.Item className='padItem basic'>
-                    <p>Log directory</p>
-                    <div className='nowrap'>
-                        <TooltipHost
-                            // Tooltip message content
-                            content={EXPERIMENT.profile.logDir || 'unknown'}
-                            id={this._hostId}
-                            calloutProps={{ gapSpace: 0 }}
-                            styles={{ root: { display: 'inline-block' } }}
-                        >
-                            {/* show logDir */}
-                            {EXPERIMENT.profile.logDir || 'unknown'}
-                        </TooltipHost>
-                    </div>
-                </Stack.Item>
-                <Stack.Item className='padItem basic'>
-                    <p>Training platform</p>
-                    <div className='nowrap'>{EXPERIMENT.profile.params.trainingServicePlatform}</div>
-                </Stack.Item>
-            </Stack>
-        );
-    }
-}
-
-export default BasicInfo;
+export const BasicInfo = (): any => (
+    <Stack horizontal horizontalAlign='space-between' className='main'>
+        <Stack.Item grow={3} className='padItem basic'>
+            <p>Name</p>
+            <div>{EXPERIMENT.profile.params.experimentName}</div>
+        </Stack.Item>
+        <Stack.Item grow={3} className='padItem basic'>
+            <p>ID</p>
+            <div>{EXPERIMENT.profile.id}</div>
+        </Stack.Item>
+        <Stack.Item grow={3} className='padItem basic'>
+            <p>Start time</p>
+            <div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.startTime)}</div>
+        </Stack.Item>
+        <Stack.Item grow={3} className='padItem basic'>
+            <p>End time</p>
+            <div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.endTime)}</div>
+        </Stack.Item>
+        <Stack.Item className='padItem basic'>
+            <p>Log directory</p>
+            <div className='nowrap'>
+                <TooltipHost
+                    // Tooltip message content
+                    content={EXPERIMENT.profile.logDir || 'unknown'}
+                    calloutProps={{ gapSpace: 0 }}
+                    styles={{ root: { display: 'inline-block' } }}
+                >
+                    {/* show logDir */}
+                    {EXPERIMENT.profile.logDir || 'unknown'}
+                </TooltipHost>
+            </div>
+        </Stack.Item>
+        <Stack.Item className='padItem basic'>
+            <p>Training platform</p>
+            <div className='nowrap'>{EXPERIMENT.profile.params.trainingServicePlatform}</div>
+        </Stack.Item>
+    </Stack>
+);
diff --git a/src/webui/src/components/overview/Details.tsx b/src/webui/src/components/overview/Details.tsx
index f3c3430c9e..65407b7965 100644
--- a/src/webui/src/components/overview/Details.tsx
+++ b/src/webui/src/components/overview/Details.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DetailsRow, IDetailsRowBaseProps } from 'office-ui-fabric-react';
+import { DetailsRow, IDetailsRowBaseProps } from '@fluentui/react';
 import OpenRow from '../public-child/OpenRow';
 
 interface DetailsProps {
diff --git a/src/webui/src/components/overview/NumInput.tsx b/src/webui/src/components/overview/NumInput.tsx
index 9313f713f2..6264923aa6 100644
--- a/src/webui/src/components/overview/NumInput.tsx
+++ b/src/webui/src/components/overview/NumInput.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Stack, PrimaryButton } from 'office-ui-fabric-react';
+import { Stack, PrimaryButton } from '@fluentui/react';
 
 interface ConcurrencyInputProps {
     value: number;
diff --git a/src/webui/src/components/overview/Progress.tsx b/src/webui/src/components/overview/Progress.tsx
index 9b3d1cd184..4bc5139f0c 100644
--- a/src/webui/src/components/overview/Progress.tsx
+++ b/src/webui/src/components/overview/Progress.tsx
@@ -10,16 +10,16 @@ import {
     getTheme,
     StackItem,
     TooltipHost
-} from 'office-ui-fabric-react';
+} from '@fluentui/react';
 import axios from 'axios';
 import { MANAGER_IP, CONCURRENCYTOOLTIP } from '../../static/const';
 import { EXPERIMENT, TRIALS } from '../../static/datamodel';
 import { convertTime } from '../../static/function';
 import ConcurrencyInput from './NumInput';
 import ProgressBar from './ProgressItem';
-import LogDrawer from '../Modals/LogPanel';
-import MessageInfo from '../Modals/MessageInfo';
-import { infoIcon } from '../Buttons/Icon';
+import LogDrawer from '../modals/LogPanel';
+import MessageInfo from '../modals/MessageInfo';
+import { infoIcon } from '../buttons/Icon';
 import '../../static/style/progress.scss';
 import '../../static/style/probar.scss';
 interface ProgressProps {
diff --git a/src/webui/src/components/overview/ProgressItem.tsx b/src/webui/src/components/overview/ProgressItem.tsx
index b75361f126..849171bb57 100644
--- a/src/webui/src/components/overview/ProgressItem.tsx
+++ b/src/webui/src/components/overview/ProgressItem.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Stack, StackItem, ProgressIndicator } from 'office-ui-fabric-react';
+import { Stack, StackItem, ProgressIndicator } from '@fluentui/react';
 
 interface ProItemProps {
     who: string;
diff --git a/src/webui/src/components/overview/SuccessTable.tsx b/src/webui/src/components/overview/SuccessTable.tsx
index e9e6192fab..67c3ae8908 100644
--- a/src/webui/src/components/overview/SuccessTable.tsx
+++ b/src/webui/src/components/overview/SuccessTable.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DetailsList, IDetailsListProps, IColumn } from 'office-ui-fabric-react';
+import { DetailsList, IDetailsListProps, IColumn } from '@fluentui/react';
 import DefaultMetric from '../public-child/DefaultMetric';
 import Details from './Details';
 import { convertDuration } from '../../static/function';
diff --git a/src/webui/src/components/overview/Title1.tsx b/src/webui/src/components/overview/Title1.tsx
index d86390e493..dd89dd8fa0 100644
--- a/src/webui/src/components/overview/Title1.tsx
+++ b/src/webui/src/components/overview/Title1.tsx
@@ -1,26 +1,15 @@
 import * as React from 'react';
-import { Stack } from 'office-ui-fabric-react';
+import { Stack } from '@fluentui/react';
+import { TitleContext } from '../Overview';
 import '../../static/style/overviewTitle.scss';
-interface Title1Props {
-    text: string;
-    icon?: string;
-    fontColor?: string;
-}
 
-class Title1 extends React.Component<Title1Props, {}> {
-    constructor(props: Title1Props) {
-        super(props);
-    }
-
-    render(): React.ReactNode {
-        const { text, icon, fontColor } = this.props;
-        return (
+export const Title1 = (): any => (
+    <TitleContext.Consumer>
+        {(value): React.ReactNode => (
             <Stack horizontal className='panelTitle'>
-                <img src={require(`../../static/img/icon/${icon}`)} alt='icon' />
-                <span style={{ color: fontColor }}>{text}</span>
+                <img src={require(`../../static/img/icon/${value.icon}`)} alt='icon' />
+                <span style={{ color: value.fontColor }}>{value.text}</span>
             </Stack>
-        );
-    }
-}
-
-export default Title1;
+        )}
+    </TitleContext.Consumer>
+);
diff --git a/src/webui/src/components/public-child/MonacoEditor.tsx b/src/webui/src/components/public-child/MonacoEditor.tsx
index 8f0f82bcfc..850a01ad1c 100644
--- a/src/webui/src/components/public-child/MonacoEditor.tsx
+++ b/src/webui/src/components/public-child/MonacoEditor.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Spinner } from 'office-ui-fabric-react';
+import { Spinner } from '@fluentui/react';
 import { DRAWEROPTION } from '../../static/const';
 import MonacoEditor from 'react-monaco-editor';
 
diff --git a/src/webui/src/components/public-child/OpenRow.tsx b/src/webui/src/components/public-child/OpenRow.tsx
index 56625e590b..b54b24aa5d 100644
--- a/src/webui/src/components/public-child/OpenRow.tsx
+++ b/src/webui/src/components/public-child/OpenRow.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import * as copy from 'copy-to-clipboard';
-import { Stack, PrimaryButton, Pivot, PivotItem } from 'office-ui-fabric-react';
+import { Stack, PrimaryButton, Pivot, PivotItem } from '@fluentui/react';
 import { Trial } from '../../static/model/trial';
 import { MANAGER_IP } from '../../static/const';
 import { EXPERIMENT, TRIALS } from '../../static/datamodel';
 import JSONTree from 'react-json-tree';
 import PaiTrialLog from '../public-child/PaiTrialLog';
 import TrialLog from '../public-child/TrialLog';
-import MessageInfo from '../Modals/MessageInfo';
+import MessageInfo from '../modals/MessageInfo';
 import '../../static/style/overview.scss';
 import '../../static/style/copyParameter.scss';
 import '../../static/style/openRow.scss';
diff --git a/src/webui/src/components/stateless-component/NNItabs.tsx b/src/webui/src/components/stateless-component/NNItabs.tsx
index 809729bf21..a733da4fdd 100644
--- a/src/webui/src/components/stateless-component/NNItabs.tsx
+++ b/src/webui/src/components/stateless-component/NNItabs.tsx
@@ -1,22 +1,22 @@
 import * as React from 'react';
-import { Link } from 'react-router';
+import { NavLink } from 'react-router-dom';
 
 const OVERVIEWTABS = (
-    <Link to={'/oview'} activeClassName='high-light' className='common-tabs'>
+    <NavLink to={'/oview'} activeClassName='selected' className='common-tabs'>
         Overview
-    </Link>
+    </NavLink>
 );
 
 const DETAILTABS = (
-    <Link to={'/detail'} activeClassName='high-light' className='common-tabs'>
+    <NavLink to={'/detail'} activeClassName='selected' className='common-tabs'>
         Trials detail
-    </Link>
+    </NavLink>
 );
 
 const NNILOGO = (
-    <Link to={'/oview'}>
+    <NavLink to={'/oview'}>
         <img src={require('../../static/img/logo2.png')} alt='NNI logo' style={{ height: 40 }} />
-    </Link>
+    </NavLink>
 );
 
 export { OVERVIEWTABS, DETAILTABS, NNILOGO };
diff --git a/src/webui/src/components/trial-detail/DefaultMetricPoint.tsx b/src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
index 02a28d616f..3427c0c28d 100644
--- a/src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
+++ b/src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Toggle, Stack } from 'office-ui-fabric-react';
+import { Toggle, Stack } from '@fluentui/react';
 import ReactEcharts from 'echarts-for-react';
 import { EXPERIMENT, TRIALS } from '../../static/datamodel';
 import { Trial } from '../../static/model/trial';
@@ -25,7 +25,6 @@ const EmptyGraph = {
 interface DefaultPointProps {
     trialIds: string[];
     visible: boolean;
-    trialsUpdateBroadcast: number;
 }
 
 interface DefaultPointState {
diff --git a/src/webui/src/components/trial-detail/Intermediate.tsx b/src/webui/src/components/trial-detail/Intermediate.tsx
index 06c45de97e..72dcc94cee 100644
--- a/src/webui/src/components/trial-detail/Intermediate.tsx
+++ b/src/webui/src/components/trial-detail/Intermediate.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Stack, PrimaryButton, Toggle, IStackTokens } from 'office-ui-fabric-react';
+import { Stack, PrimaryButton, Toggle, IStackTokens } from '@fluentui/react';
 import { TooltipForIntermediate, TableObj, Intermedia, EventMap } from '../../static/interface';
 import ReactEcharts from 'echarts-for-react';
 import 'echarts/lib/component/tooltip';
diff --git a/src/webui/src/components/trial-detail/Para.tsx b/src/webui/src/components/trial-detail/Para.tsx
index d2b87ee2e1..31f33207b7 100644
--- a/src/webui/src/components/trial-detail/Para.tsx
+++ b/src/webui/src/components/trial-detail/Para.tsx
@@ -1,5 +1,5 @@
 import * as d3 from 'd3';
-import { Dropdown, IDropdownOption, Stack } from 'office-ui-fabric-react';
+import { Dropdown, IDropdownOption, Stack } from '@fluentui/react';
 import ParCoords from 'parcoord-es';
 import 'parcoord-es/dist/parcoords.css';
 import * as React from 'react';
diff --git a/src/webui/src/components/trial-detail/TableList.tsx b/src/webui/src/components/trial-detail/TableList.tsx
index d2ac4c613d..47687f7142 100644
--- a/src/webui/src/components/trial-detail/TableList.tsx
+++ b/src/webui/src/components/trial-detail/TableList.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { lazy } from 'react';
 import axios from 'axios';
 import ReactEcharts from 'echarts-for-react';
 import {
@@ -16,19 +16,19 @@ import {
     IconButton,
     TooltipHost,
     IStackTokens
-} from 'office-ui-fabric-react';
+} from '@fluentui/react';
 import ReactPaginate from 'react-paginate';
-import { LineChart, blocked, copy } from '../Buttons/Icon';
+import { LineChart, blocked, copy } from '../buttons/Icon';
 import { MANAGER_IP, COLUMNPro } from '../../static/const';
 import { convertDuration, formatTimestamp, intermediateGraphOption, parseMetrics } from '../../static/function';
 import { EXPERIMENT, TRIALS } from '../../static/datamodel';
 import { TableRecord, TrialJobInfo } from '../../static/interface';
-import Details from '../overview/Details';
-import ChangeColumnComponent from '../Modals/ChangeColumnComponent';
-import Compare from '../Modals/Compare';
-import KillJob from '../Modals/Killjob';
-import Customize from '../Modals/CustomizedTrial';
-import { contentStyles, iconButtonStyles } from '../Buttons/ModalTheme';
+const Details = lazy(() => import('../overview/Details'));
+const ChangeColumnComponent = lazy(() => import('../modals/ChangeColumnComponent'));
+const Compare = lazy(() => import('../modals/Compare'));
+const KillJob = lazy(() => import('../modals/Killjob'));
+const Customize = lazy(() => import('../modals/CustomizedTrial'));
+import { contentStyles, iconButtonStyles } from '../buttons/ModalTheme';
 import '../../static/style/search.scss';
 import '../../static/style/tableStatus.css';
 import '../../static/style/logPath.scss';
diff --git a/src/webui/src/index.tsx b/src/webui/src/index.tsx
index 22e7d9132f..50e4ec0521 100644
--- a/src/webui/src/index.tsx
+++ b/src/webui/src/index.tsx
@@ -1,20 +1,23 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-import { Router, Route, browserHistory, IndexRedirect } from 'react-router';
-import Overview from './components/Overview';
-import TrialsDetail from './components/TrialsDetail';
+import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
+const Overview = lazy(() => import('./components/Overview'));
+const TrialsDetail = lazy(() => import('./components/TrialsDetail'));
 import './index.css';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
-    <Router history={browserHistory}>
-        <Route path='/' component={App}>
-            <IndexRedirect to='/oview' />
-            <Route path='/oview' component={Overview} />
-            <Route path='/detail' component={TrialsDetail} />
-            {/* test branch */}
-        </Route>
+    <Router>
+        <App>
+            <Switch>
+                <Suspense fallback={null}>
+                    <Route path='/oview' component={Overview} />
+                    <Route path='/detail' component={TrialsDetail} />
+                    <Route path='/' render={(): React.ReactNode => <Redirect to={{ pathname: '/oview' }} />} />
+                </Suspense>
+            </Switch>
+        </App>
     </Router>,
 
     document.getElementById('root')
diff --git a/src/webui/src/static/function.ts b/src/webui/src/static/function.ts
index f4e614e403..58729f9c3c 100644
--- a/src/webui/src/static/function.ts
+++ b/src/webui/src/static/function.ts
@@ -94,9 +94,8 @@ const getFinal = (final?: MetricDataRecord[]): FinalType | undefined => {
     if (final) {
         showDefault = parseMetrics(final[final.length - 1].data);
         if (typeof showDefault === 'number') {
-            if (!isNaN(showDefault)) {
-                showDefault = { default: showDefault };
-                return showDefault;
+            if (!isNaNorInfinity(showDefault)) {
+                return { default: showDefault };
             }
         } else if (isArrayType(showDefault)) {
             // not support final type
diff --git a/src/webui/src/static/style/nav/nav.scss b/src/webui/src/static/style/nav/nav.scss
index 0227199940..58d0769267 100644
--- a/src/webui/src/static/style/nav/nav.scss
+++ b/src/webui/src/static/style/nav/nav.scss
@@ -50,8 +50,8 @@ $barHeight: 56px;
 
     &-refresh-num {
         position: absolute;
-        top: -10px;
-        left: 18px;
+        top: -13px;
+        left: 17px;
         color: #fff;
         font-size: 12px;
     }
@@ -65,16 +65,16 @@ a.common-tabs {
     text-decoration: none;
 }
 
-.common-tabs:hover,
-.high-light {
+.common-tabs:visited,
+.selected:hover {
     color: #fff;
-    border-bottom: 1px solid #fff;
+    text-decoration: none;
 }
 
-.common-tabs:visited,
-.high-light:hover {
+.common-tabs:hover,
+.selected {
     color: #fff;
-    text-decoration: none;
+    border-bottom: 1px solid #fff;
 }
 
 .left-right-margin {
diff --git a/src/webui/src/static/style/search.scss b/src/webui/src/static/style/search.scss
index 5ef82aed4f..b302acea70 100644
--- a/src/webui/src/static/style/search.scss
+++ b/src/webui/src/static/style/search.scss
@@ -22,7 +22,6 @@
     }
 }
 
-
 /* each row's Intermediate btn -> Modal */
 .selectKeys {
     /* intermediate result is dict, select box for keys */
diff --git a/src/webui/src/static/style/table.scss b/src/webui/src/static/style/table.scss
index 79821d37c5..14d6712f23 100644
--- a/src/webui/src/static/style/table.scss
+++ b/src/webui/src/static/style/table.scss
@@ -21,6 +21,10 @@
 
 #succeTable,
 #tableList {
+    .commonTableStyle .leftTitle div {
+        text-align: left;
+    }
+
     .durationsty {
         width: 80%;
         margin: 0 auto;
@@ -30,10 +34,6 @@
             margin-right: 9px;
         }
     }
-
-    .commonTableStyle .leftTitle div {
-        text-align: left;
-    }
 }
 
 .margin-mediate {
diff --git a/src/webui/src/static/style/trialsDetail.scss b/src/webui/src/static/style/trialsDetail.scss
index a663b3d1d9..24e97b5c93 100644
--- a/src/webui/src/static/style/trialsDetail.scss
+++ b/src/webui/src/static/style/trialsDetail.scss
@@ -22,6 +22,10 @@
                 background: #999;
             }
         }
+
+        .is-selected::before {
+            border-bottom: none;
+        }
     }
 
     .ms-Pivot-icon {
diff --git a/src/webui/yarn.lock b/src/webui/yarn.lock
index 765c7d92d6..29e17accd0 100644
--- a/src/webui/yarn.lock
+++ b/src/webui/yarn.lock
@@ -1105,7 +1105,7 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4":
   version "7.11.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
   integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
@@ -1121,7 +1121,7 @@
     "@babel/parser" "^7.10.4"
     "@babel/types" "^7.10.4"
 
-"@babel/traverse@^7.0.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.11.5", "@babel/traverse@^7.4.3":
+"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.11.5", "@babel/traverse@^7.4.3":
   version "7.11.5"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.11.5.tgz#be777b93b518eb6d76ee2e1ea1d143daa11e61c3"
   integrity sha512-EjiPXt+r7LiCZXEfRpSJd+jUMnBd4/9OUv7Nx3+0u9+eimMwJmG0Q98lw4/289JCoxSE8OolDMNZaaF/JZ69WQ==
@@ -1163,59 +1163,76 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-9.0.1.tgz#c27b391d8457d1e893f1eddeaf5e5412d12ffbb5"
   integrity sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA==
 
-"@fluentui/date-time-utilities@^7.8.0":
-  version "7.8.0"
-  resolved "https://registry.yarnpkg.com/@fluentui/date-time-utilities/-/date-time-utilities-7.8.0.tgz#4fe384a19aba3508492e9d17680fba76a21a6144"
-  integrity sha512-qzlTp3t+PghebJsLK9JwZr91qBRZ/fOml8TQCIjdtsEn4mH6/ciCwir7Fj8iOEkwwTC0iKsEr1jfsITtJKWSmA==
+"@fluentui/date-time-utilities@^7.8.1":
+  version "7.8.1"
+  resolved "https://registry.yarnpkg.com/@fluentui/date-time-utilities/-/date-time-utilities-7.8.1.tgz#d78e9794689f14aaf8b79428d2c8773d08be012a"
+  integrity sha512-2FsR7scZ6yS9h7MEUAunpLLYpHp4z7+DVgGlIBlNeL7YD5Vl0msj4pn7zRd1pcGfvoQfkWz3+ju3rBBl4LV4wQ==
   dependencies:
-    "@uifabric/set-version" "^7.0.22"
+    "@uifabric/set-version" "^7.0.23"
     tslib "^1.10.0"
 
-"@fluentui/keyboard-key@^0.2.11":
-  version "0.2.11"
-  resolved "https://registry.yarnpkg.com/@fluentui/keyboard-key/-/keyboard-key-0.2.11.tgz#97cbea8641c144ac5230fae0daf6e10c4f4228d4"
-  integrity sha512-4iG5vNlRD3PrLaMfDTimHNOP1x6V3Dad0fXOwtvBBMsfdySPE9zlY+G+0aqCFcgjymOriFOk0ANZVBpK7XrnTg==
+"@fluentui/dom-utilities@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@fluentui/dom-utilities/-/dom-utilities-1.1.1.tgz#b0bbab665fe726f245800bb9e7883b1ceb54248b"
+  integrity sha512-w40gi8fzCpwa7U8cONiuu8rszPStkVOL/weDf5pCbYEb1gdaV7MDPSNkgM6IV0Kz+k017noDgK9Fv4ru1Dwz1g==
   dependencies:
+    "@uifabric/set-version" "^7.0.23"
     tslib "^1.10.0"
 
-"@fluentui/react-focus@^7.16.0":
-  version "7.16.0"
-  resolved "https://registry.yarnpkg.com/@fluentui/react-focus/-/react-focus-7.16.0.tgz#51e5d4b22fbe91d557115b4c9402a64214b784ec"
-  integrity sha512-TwB4Av7ID70ejisDIGkCZGKOxlquSazr6W+9Jv1JQAvsBLuj5XOspFJH4/Igjniw1LeO9QmAvFZeh/XRShiObw==
+"@fluentui/keyboard-key@^0.2.12":
+  version "0.2.12"
+  resolved "https://registry.yarnpkg.com/@fluentui/keyboard-key/-/keyboard-key-0.2.12.tgz#74eddf4657c164193b6c8855746e691af466441a"
+  integrity sha512-t3yIbbPKJubb22vQ/FIWwS9vFAzaPYzFxKWPHVWLtxs/P+5yL+LD3B16DRtYreWAdl9CZvEbos58ChLZ0KHwSQ==
   dependencies:
-    "@fluentui/keyboard-key" "^0.2.11"
-    "@uifabric/merge-styles" "^7.18.0"
-    "@uifabric/set-version" "^7.0.22"
-    "@uifabric/styling" "^7.16.0"
-    "@uifabric/utilities" "^7.31.0"
     tslib "^1.10.0"
 
-"@fluentui/react-icons@^0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@fluentui/react-icons/-/react-icons-0.3.0.tgz#4acc45e0ecef69860e15d161f26363a6e711282a"
-  integrity sha512-QDrIhLUpkxM5q5bFE4pkweJJsfaNswdfDoc+X6cmr22Dii+anDFTpOcePEJiTtILxdlEmH0968OcZ4BGZF/joQ==
+"@fluentui/react-focus@^7.16.5":
+  version "7.16.5"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-focus/-/react-focus-7.16.5.tgz#c19c841e4c297a028b83ab9eaeabd784a2707dae"
+  integrity sha512-FlRqYSzkptXuKvsIiI9m1tf7g5pRcbu9S9rK6c8pHax/kDRsBuDRW2OajxjVYR36B6IyAgYjylWdk6zBJI5oSQ==
+  dependencies:
+    "@fluentui/keyboard-key" "^0.2.12"
+    "@uifabric/merge-styles" "^7.19.1"
+    "@uifabric/set-version" "^7.0.23"
+    "@uifabric/styling" "^7.16.5"
+    "@uifabric/utilities" "^7.32.2"
+    tslib "^1.10.0"
+
+"@fluentui/react-icons@^0.3.4":
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-icons/-/react-icons-0.3.4.tgz#bce6c207cb7a8a1df89d55e9b408c72a12ac153e"
+  integrity sha512-/6xyGL7EQVCn9TP1eV+VjKS0HuC7WGZHs0t604E40LEE1HCIbXx7Jm1KDlMqP36n1W8XVDgyEZlffTmEOVGRkg==
   dependencies:
     "@microsoft/load-themed-styles" "^1.10.26"
-    "@uifabric/set-version" "^7.0.22"
-    "@uifabric/utilities" "^7.31.0"
+    "@uifabric/set-version" "^7.0.23"
+    "@uifabric/utilities" "^7.32.2"
     tslib "^1.10.0"
 
-"@fluentui/react-window-provider@^0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@fluentui/react-window-provider/-/react-window-provider-0.3.0.tgz#6dc90a9826306816ddb5b2961e48546c1cb3d93f"
-  integrity sha512-zHeH1PAmoFB3OkgU8f51E3oGHrL/CjuvdPBlb1SGpByUGNihAgH/CwvJohV9z0yPDkq+chfNUmxWA/oDVpbh6Q==
+"@fluentui/react-window-provider@^0.3.3":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@fluentui/react-window-provider/-/react-window-provider-0.3.3.tgz#2950c4e19b28f24079d0e9d6a7a7e4d5b79ad115"
+  integrity sha512-MVPf2hqOQ17LAZsuvGcr3oOHksAskUm+fCYdXFhbVoAgsCDVTIuH6i8XgHFd6YjBtzjZmI4+k/3NTQfDqBX8EQ==
   dependencies:
-    "@uifabric/set-version" "^7.0.22"
+    "@uifabric/set-version" "^7.0.23"
     tslib "^1.10.0"
 
-"@fluentui/theme@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@fluentui/theme/-/theme-0.2.0.tgz#15e7536e4b8bbbe96132687ef76921687af4200c"
-  integrity sha512-L5OwqymTdxTVwBa3ifkQLF1A3YU6WMkMTk6PFIMfOonjt8LJ3yMMqZgz+KQR3sF/tzgy4wzW4oBmrxtTfJS2EQ==
+"@fluentui/react@^7.135.0":
+  version "7.138.0"
+  resolved "https://registry.yarnpkg.com/@fluentui/react/-/react-7.138.0.tgz#b7bbecf1fbca8ad0b6905f6ab148906aa6f9e412"
+  integrity sha512-fekFIGSMqzSUbiqwm1GvYZ+BvmBPHwP0sUcoNct92WCTrfcwnHhX7q770RbcRGGG7K9OuasbGafP3auFHSz7FQ==
   dependencies:
-    "@uifabric/merge-styles" "^7.18.0"
-    "@uifabric/set-version" "^7.0.22"
-    "@uifabric/utilities" "^7.31.0"
+    "@uifabric/set-version" "^7.0.23"
+    office-ui-fabric-react "^7.138.0"
+    tslib "^1.10.0"
+
+"@fluentui/theme@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@fluentui/theme/-/theme-0.3.2.tgz#a5443546db1de46533847ee4fd7a3dbb9d39b4a4"
+  integrity sha512-Yt4VK2NKTc+Sao0+ZguXiQ0ZpN74h+7c+7YAyxaao2R/nwSHSnmH42VVlzBN+aL5kYDrbQ4P9Z8zPIwKEZ1u3A==
+  dependencies:
+    "@uifabric/merge-styles" "^7.19.1"
+    "@uifabric/set-version" "^7.0.23"
+    "@uifabric/utilities" "^7.32.2"
     tslib "^1.10.0"
 
 "@hapi/address@2.x.x":
@@ -1259,7 +1276,7 @@
     update-notifier "^2.2.0"
     yargs "^8.0.2"
 
-"@jest/console@^24.9.0":
+"@jest/console@^24.7.1", "@jest/console@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"
   integrity sha512-Zuj6b8TnKXi3q4ymac8EQfc3ea/uhLeCGThFqXeC8H9/raaH8ARPUTdId+XyGd03Z4In0/VjD2OYFcBF09fNLQ==
@@ -1268,6 +1285,50 @@
     chalk "^2.0.1"
     slash "^2.0.0"
 
+"@jest/core@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-24.9.0.tgz#2ceccd0b93181f9c4850e74f2a9ad43d351369c4"
+  integrity sha512-Fogg3s4wlAr1VX7q+rhV9RVnUv5tD7VuWfYy1+whMiWUrvl7U3QJSJyWcDio9Lq2prqYsZaeTv2Rz24pWGkJ2A==
+  dependencies:
+    "@jest/console" "^24.7.1"
+    "@jest/reporters" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    graceful-fs "^4.1.15"
+    jest-changed-files "^24.9.0"
+    jest-config "^24.9.0"
+    jest-haste-map "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-regex-util "^24.3.0"
+    jest-resolve "^24.9.0"
+    jest-resolve-dependencies "^24.9.0"
+    jest-runner "^24.9.0"
+    jest-runtime "^24.9.0"
+    jest-snapshot "^24.9.0"
+    jest-util "^24.9.0"
+    jest-validate "^24.9.0"
+    jest-watcher "^24.9.0"
+    micromatch "^3.1.10"
+    p-each-series "^1.0.0"
+    realpath-native "^1.1.0"
+    rimraf "^2.5.4"
+    slash "^2.0.0"
+    strip-ansi "^5.0.0"
+
+"@jest/environment@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-24.9.0.tgz#21e3afa2d65c0586cbd6cbefe208bafade44ab18"
+  integrity sha512-5A1QluTPhvdIPFYnO3sZC3smkNeXPVELz7ikPbhUj0bQjB07EoE9qtLrem14ZUYWdVayYbsjVwIiL4WBIMV4aQ==
+  dependencies:
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    jest-mock "^24.9.0"
+
 "@jest/fake-timers@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-24.9.0.tgz#ba3e6bf0eecd09a636049896434d306636540c93"
@@ -1277,7 +1338,34 @@
     jest-message-util "^24.9.0"
     jest-mock "^24.9.0"
 
-"@jest/source-map@^24.9.0":
+"@jest/reporters@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-24.9.0.tgz#86660eff8e2b9661d042a8e98a028b8d631a5b43"
+  integrity sha512-mu4X0yjaHrffOsWmVLzitKmmmWSQ3GGuefgNscUSWNiUNcEOSEQk9k3pERKEQVBb0Cnn88+UESIsZEMH3o88Gw==
+  dependencies:
+    "@jest/environment" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    glob "^7.1.2"
+    istanbul-lib-coverage "^2.0.2"
+    istanbul-lib-instrument "^3.0.1"
+    istanbul-lib-report "^2.0.4"
+    istanbul-lib-source-maps "^3.0.1"
+    istanbul-reports "^2.2.6"
+    jest-haste-map "^24.9.0"
+    jest-resolve "^24.9.0"
+    jest-runtime "^24.9.0"
+    jest-util "^24.9.0"
+    jest-worker "^24.6.0"
+    node-notifier "^5.4.2"
+    slash "^2.0.0"
+    source-map "^0.6.0"
+    string-length "^2.0.0"
+
+"@jest/source-map@^24.3.0", "@jest/source-map@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-24.9.0.tgz#0e263a94430be4b41da683ccc1e6bffe2a191714"
   integrity sha512-/Xw7xGlsZb4MJzNDgB7PW5crou5JqWiBQaz6xyPd3ArOg2nfn/PunV8+olXbbEZzNl591o5rWKE9BRDaFAuIBg==
@@ -1295,7 +1383,17 @@
     "@jest/types" "^24.9.0"
     "@types/istanbul-lib-coverage" "^2.0.0"
 
-"@jest/transform@^24.7.1":
+"@jest/test-sequencer@^24.9.0":
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-24.9.0.tgz#f8f334f35b625a4f2f355f2fe7e6036dad2e6b31"
+  integrity sha512-6qqsU4o0kW1dvA95qfNog8v8gkRN9ph6Lz7r96IvZpHdNipP2cBcb07J1Z45mz/VIS01OHJ3pY8T5fUY38tg4A==
+  dependencies:
+    "@jest/test-result" "^24.9.0"
+    jest-haste-map "^24.9.0"
+    jest-runner "^24.9.0"
+    jest-runtime "^24.9.0"
+
+"@jest/transform@^24.7.1", "@jest/transform@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-24.9.0.tgz#4ae2768b296553fadab09e9ec119543c90b16c56"
   integrity sha512-TcQUmyNRxV94S0QpMOnZl0++6RMiqpbH/ZMccFB/amku6Uwvyb1cjYX7xkp5nGNkbX4QPH/FcB6q1HBTHynLmQ==
@@ -1337,10 +1435,10 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
-"@microsoft/load-themed-styles@^1.10.26", "@microsoft/load-themed-styles@^1.7.13":
-  version "1.10.88"
-  resolved "https://registry.yarnpkg.com/@microsoft/load-themed-styles/-/load-themed-styles-1.10.88.tgz#f7eda0cea3349c75290b622bf1db4af8d09a9ca1"
-  integrity sha512-lyM9z/fq3yrRGGSB5AmsAL8BQOR5ljFS7zpS+/wFgzuCz3nRZjQCRTTjflM7yxSQLSgTG0YMdqgsGLXfVUleZQ==
+"@microsoft/load-themed-styles@^1.10.26":
+  version "1.10.93"
+  resolved "https://registry.yarnpkg.com/@microsoft/load-themed-styles/-/load-themed-styles-1.10.93.tgz#ed7197c3985016410747732e7cc1f13e1ba71143"
+  integrity sha512-iziiQyDJmyP8QE33hYjuVsj18RvtzRMdON1QLDkJSrs9xisXWgEjK8U12UsEkBYpYXzxPxqq5+X+fK8Vs6g8vQ==
 
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
@@ -1709,9 +1807,9 @@
   integrity sha512-DExNQkaHd1F3dFPvGA/Aw2NGyjMln6E9QzsiqOcBgnE+VInYnFBHBBySbZQts6z6xD+5jTfKCP7M4OqMyVjdwQ==
 
 "@types/d3-zoom@*":
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/@types/d3-zoom/-/d3-zoom-1.7.4.tgz#9226ffd2bd3846ec0e4a4e2bff211612d3aafad5"
-  integrity sha512-5jnFo/itYhJeB2khO/lKe730kW/h2EbKMOvY0uNp3+7NdPm4w63DwPEMxifQZ7n902xGYK5DdU67FmToSoy4VA==
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/@types/d3-zoom/-/d3-zoom-1.7.5.tgz#1fd7f3497a10f8cfaaefcf2f879767ec775fc3a3"
+  integrity sha512-G0lpZjlvmv+fI2/dg2whWFbUUmMC3dy4xoeaGOXnaUmOSnms1q9QtlkRq5MXZt1/7LcKwzgmKdEjPVLVq5dH5Q==
   dependencies:
     "@types/d3-interpolate" "*"
     "@types/d3-selection" "*"
@@ -1763,11 +1861,6 @@
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.7.tgz#c8fa532b60a0042219cdf173ca21a975ef0666ad"
   integrity sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==
 
-"@types/history@^3":
-  version "3.2.4"
-  resolved "https://registry.yarnpkg.com/@types/history/-/history-3.2.4.tgz#0b6c62240d1fac020853aa5608758991d9f6ef3d"
-  integrity sha512-q7x8QeCRk2T6DR2UznwYW//mpN5uNlyajkewH2xd1s1ozCS4oHFRg2WMusxwLFlE57EkUYsd/gCapLBYzV3ffg==
-
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz#4ba8ddb720221f432e443bd5f9117fd22cfd4762"
@@ -1825,14 +1918,14 @@
   integrity sha1-aaI6OtKcrwCX8G7aWbNh7i8GOfY=
 
 "@types/node@*":
-  version "14.6.4"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.6.4.tgz#a145cc0bb14ef9c4777361b7bbafa5cf8e3acb5a"
-  integrity sha512-Wk7nG1JSaMfMpoMJDKUsWYugliB2Vy55pdjLpmLixeyMi7HizW2I/9QoxsPCkXl3dO+ZOVqPumKaDUv5zJu2uQ==
+  version "14.11.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.11.1.tgz#56af902ad157e763f9ba63d671c39cda3193c835"
+  integrity sha512-oTQgnd0hblfLsJ6BvJzzSL+Inogp3lq9fGgqRkMB/ziKMgEUaFl801OncOzUmalfzt14N0oPHMK47ipl+wbTIw==
 
-"@types/node@^10.13.0":
-  version "10.17.30"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.30.tgz#20556a0d7f62b83e163973a6cd640af636d3dd3b"
-  integrity sha512-euU8QLX0ipj+5mOYa4ZqZoTv+53BY7yTg9I2ZIhDXgiI3M+0n4mdAt9TQCuvxVAgU179g8OsRLaBt0qEi0T6xA==
+"@types/node@^10.14.2":
+  version "10.17.35"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.35.tgz#58058f29b870e6ae57b20e4f6e928f02b7129f56"
+  integrity sha512-gXx7jAWpMddu0f7a+L+txMplp3FnHl53OhQIF9puXKq3hDGY/GjH+MF04oWnV/adPSCrbtHumDCFwzq2VhltWA==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
@@ -1854,21 +1947,13 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
-"@types/react-dom@^16.0.7":
-  version "16.9.8"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.8.tgz#fe4c1e11dfc67155733dfa6aa65108b4971cb423"
-  integrity sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==
+"@types/react-dom@16.8.4":
+  version "16.8.4"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.8.4.tgz#7fb7ba368857c7aa0f4e4511c4710ca2c5a12a88"
+  integrity sha512-eIRpEW73DCzPIMaNBDP5pPIpK1KXyZwNgfxiVagb5iGiz6da+9A5hslSX6GAQKdO7SayVCS/Fr2kjqprgAvkfA==
   dependencies:
     "@types/react" "*"
 
-"@types/react-router@^3.0.20":
-  version "3.0.24"
-  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-3.0.24.tgz#f924569538ea78a0b0d70892900a0d99ed6d7354"
-  integrity sha512-cSpMXzI0WocB5/UmySAtGlvG5w3m2mNvU6FgYFFWGqt6KywI7Ez+4Z9mEkglcAAGaP+voZjVg+BJP86bkVrSxQ==
-  dependencies:
-    "@types/history" "^3"
-    "@types/react" "*"
-
 "@types/react@*", "@types/react@^15.x || ^16.x":
   version "16.9.49"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.49.tgz#09db021cf8089aba0cdb12a49f8021a69cce4872"
@@ -1877,10 +1962,10 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
-"@types/react@16.8.6":
-  version "16.8.6"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.6.tgz#fa1de3fe56cc9b6afeddc73d093d7f30fd5e31cc"
-  integrity sha512-bN9qDjEMltmHrl0PZRI4IF2AbB7V5UlRfG+OOduckVnRQ4VzXVSzy/1eLAh778IEqhTnW0mmgL9yShfinNverA==
+"@types/react@16.8.15":
+  version "16.8.15"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.15.tgz#a76515fed5aa3e996603056f54427fec5f2a5122"
+  integrity sha512-dMhzw1rWK+wwJWvPp5Pk12ksSrm/z/C/+lOQbMZ7YfDQYnJ02bc0wtg4EJD9qrFhuxFrf/ywNgwTboucobJqQg==
   dependencies:
     "@types/prop-types" "*"
     csstype "^2.2.0"
@@ -1957,148 +2042,74 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@uifabric/fluent-theme@^0.16.7":
-  version "0.16.21"
-  resolved "https://registry.yarnpkg.com/@uifabric/fluent-theme/-/fluent-theme-0.16.21.tgz#a9c6202f120787d9aee38d8b8896401477dc0bbe"
-  integrity sha512-j25cP59zM0o7NWwBZGDefUexJcg9ujvSjTcNDu+1AgxrOgh5fDYjiAyfNf4bgJUF7ApOgp3RHgkagxIuYMHXMw==
+"@uifabric/foundation@^7.9.5":
+  version "7.9.5"
+  resolved "https://registry.yarnpkg.com/@uifabric/foundation/-/foundation-7.9.5.tgz#6635c29286380569b0f3184830bbf66ec7783187"
+  integrity sha512-r4KjYJAjSRgBGqeJXGKogYgzJS55/zcxmU3Gsps0BCMP8SCn55KZ31KiMYmjxoNnJAlGnhIq+h5zUEVRhpHN/Q==
   dependencies:
-    "@uifabric/merge-styles" "^6.19.4"
-    "@uifabric/set-version" "^1.1.3"
-    "@uifabric/styling" "^6.50.7"
-    "@uifabric/variants" "^6.15.2"
-    office-ui-fabric-react "^6.203.2"
-    tslib "^1.7.1"
-
-"@uifabric/foundation@^0.8.3":
-  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/@uifabric/foundation/-/foundation-0.8.3.tgz#46fc211deb1407436695d0e069d1975073f9e9d3"
-  integrity sha512-r3WhRj7Out8QAOe50BGA36R8zgRPy0D0GNPuwFK9BB9oIidf91ycj7/miY8U0TZRZi5fB3Kg+dy/uxSDfgC6Og==
-  dependencies:
-    "@uifabric/set-version" "^1.1.3"
-    "@uifabric/styling" "^6.50.7"
-    "@uifabric/utilities" "^6.41.7"
-    tslib "^1.7.1"
-
-"@uifabric/foundation@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@uifabric/foundation/-/foundation-7.9.0.tgz#b7d8333e1c972a22336bfde747fc9f07df24f05c"
-  integrity sha512-4gdPwx0HV59aWvPKIw6yIje60CYwJZmTJsdLRXqh8Np1tWp2EsbA8U/IHQL1V91rEN0DlQhASqCDFhfQoD1jUw==
-  dependencies:
-    "@uifabric/merge-styles" "^7.18.0"
-    "@uifabric/set-version" "^7.0.22"
-    "@uifabric/styling" "^7.16.0"
-    "@uifabric/utilities" "^7.31.0"
+    "@uifabric/merge-styles" "^7.19.1"
+    "@uifabric/set-version" "^7.0.23"
+    "@uifabric/styling" "^7.16.5"
+    "@uifabric/utilities" "^7.32.2"
     tslib "^1.10.0"
 
-"@uifabric/icons@^6.5.5":
-  version "6.5.5"
-  resolved "https://registry.yarnpkg.com/@uifabric/icons/-/icons-6.5.5.tgz#5004e037295bcff0768b718a07d0bbd831c1d3a6"
-  integrity sha512-cGjzdpT0jzQ2RJvzlCVTrewaHCi4rb+ZNL2LWoceMi+5h196Y32qJwKMsc0ggR6u5CjMrzBiAxUFNppBSCutdA==
-  dependencies:
-    "@uifabric/set-version" "^1.1.3"
-    "@uifabric/styling" "^6.50.7"
-    tslib "^1.7.1"
-
-"@uifabric/icons@^7.5.0":
-  version "7.5.0"
-  resolved "https://registry.yarnpkg.com/@uifabric/icons/-/icons-7.5.0.tgz#49b54b1d2eb235073b824f702fbf895676103012"
-  integrity sha512-RINA9VkajlCnlwEBbqiwLBaaGn38Bf9UvjOuwrrja4B9lclLeQzZuGrG/kp7CnDtIO+LC19OYl/7E3jW7yIihA==
+"@uifabric/icons@^7.5.5":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@uifabric/icons/-/icons-7.5.5.tgz#2f1c245d3099a5a0d8d96fa6bcbb440cdc2ca4e3"
+  integrity sha512-lErlirRm3D4Lv63oxa/JFx+JUyHRX/pqNoolLQKlPKqNauHFcrcEEDRuZdtfSOJtF/1a09ZvIyirij3XwZjNBw==
   dependencies:
-    "@uifabric/set-version" "^7.0.22"
-    "@uifabric/styling" "^7.16.0"
+    "@uifabric/set-version" "^7.0.23"
+    "@uifabric/styling" "^7.16.5"
     tslib "^1.10.0"
 
-"@uifabric/merge-styles@^6.19.4":
-  version "6.19.4"
-  resolved "https://registry.yarnpkg.com/@uifabric/merge-styles/-/merge-styles-6.19.4.tgz#986a068a6109d699831d3adedcf286a0e042cb58"
-  integrity sha512-bjQdDHxmRIZVPwL//MtErODhEfcRJ2y+zJXoIWNh3T8JfAepeRDdoJ/pGNnnyJxA/AHMtlWt0IgMaz150/nfAA==
-  dependencies:
-    "@uifabric/set-version" "^1.1.3"
-    tslib "^1.7.1"
-
-"@uifabric/merge-styles@^7.18.0":
-  version "7.18.0"
-  resolved "https://registry.yarnpkg.com/@uifabric/merge-styles/-/merge-styles-7.18.0.tgz#66c5d0e0a4ce03791d0ff356634b51ae1de4e36a"
-  integrity sha512-805WIbN7lAJATXKxZjjRbIgN7raRMwWYWeDkJJ52PCPuCesOvbpdr0GkH8rC6GQ7EB0MB7YM2i6Fiye7SFewbw==
+"@uifabric/merge-styles@^7.19.1":
+  version "7.19.1"
+  resolved "https://registry.yarnpkg.com/@uifabric/merge-styles/-/merge-styles-7.19.1.tgz#446b3da48ce9925d1649edd0fc232221974b00c9"
+  integrity sha512-yqUwmk62Kgu216QNPE9vOfS3h0kiSbTvoqM5QcZi+IzpqsBOlzZx3A9Er9UiDaqHRd5lsYF5pO/jeUULmBWF/A==
   dependencies:
-    "@uifabric/set-version" "^7.0.22"
+    "@uifabric/set-version" "^7.0.23"
     tslib "^1.10.0"
 
-"@uifabric/react-hooks@^7.12.0":
-  version "7.12.0"
-  resolved "https://registry.yarnpkg.com/@uifabric/react-hooks/-/react-hooks-7.12.0.tgz#85e86ed6149887e47ffa9c14d33bbd66ade27a0b"
-  integrity sha512-vPrg7NVtjjZlDS33tDUiyJSov8PNHBBX8w+EN9eatxP0g6dDkvGv8uWd+9Xpxrliuzi7ad7vlmUMOQffYJntMg==
+"@uifabric/react-hooks@^7.13.4":
+  version "7.13.4"
+  resolved "https://registry.yarnpkg.com/@uifabric/react-hooks/-/react-hooks-7.13.4.tgz#9713a289ada1eee4adfe9d05067b6f9ee4e8b0e4"
+  integrity sha512-hyL3eQqbS7DrZCpkF1QDrC0TX+dV+yZZr5UgT3wAZMtzEMBFVgaiPHdv0zHgUbiQv5ktbQoY7yQp7clfVN65DA==
   dependencies:
-    "@uifabric/set-version" "^7.0.22"
-    "@uifabric/utilities" "^7.31.0"
+    "@fluentui/react-window-provider" "^0.3.3"
+    "@uifabric/set-version" "^7.0.23"
+    "@uifabric/utilities" "^7.32.2"
     tslib "^1.10.0"
 
-"@uifabric/set-version@^1.1.3":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@uifabric/set-version/-/set-version-1.1.3.tgz#8d1137df1406f38828e597e81122077a16c8da8b"
-  integrity sha512-IYpwVIuN7MJOeiWzZzr9AmFSvA5zc6gJn4fNHtEFIQnNB8WVWIcYrvx8Tbf7wWj9MvhdHYp70F054zZlHbL/Ag==
-  dependencies:
-    tslib "^1.7.1"
-
-"@uifabric/set-version@^7.0.22":
-  version "7.0.22"
-  resolved "https://registry.yarnpkg.com/@uifabric/set-version/-/set-version-7.0.22.tgz#f2d5235bb10927a7024b23ccef52070371349dbb"
-  integrity sha512-IG35UNJNxqI7NC2eYuobGTD+v4W0VHQcC3bYd5Na9EgoC9jVgguS8n6EXUtP/lC1vJEYEyPEZdVwhPxKw4F4Sw==
+"@uifabric/set-version@^7.0.23":
+  version "7.0.23"
+  resolved "https://registry.yarnpkg.com/@uifabric/set-version/-/set-version-7.0.23.tgz#bfe10b6ba17a2518704cca856bdba8adbc11ffb0"
+  integrity sha512-9E+YKtnH2kyMKnK9XZZsqyM8OCxEJIIfxtaThTlQpYOzrWAGJxQADFbZ7+Usi0U2xHnWNPFROjq+B9ocEzhqMA==
   dependencies:
     tslib "^1.10.0"
 
-"@uifabric/styling@^6.50.7":
-  version "6.50.7"
-  resolved "https://registry.yarnpkg.com/@uifabric/styling/-/styling-6.50.7.tgz#a07c6c88b5b50a5c9dc603b33d76b34ad6fcb507"
-  integrity sha512-F2aBiB30ZiFxlZzy5hzLXODWOl6jySvPFAsoaTofk37xucHiunBLZYjX6WkfZrCWiyGPva+DLssNcwly9ZHVjg==
-  dependencies:
-    "@microsoft/load-themed-styles" "^1.7.13"
-    "@uifabric/merge-styles" "^6.19.4"
-    "@uifabric/set-version" "^1.1.3"
-    "@uifabric/utilities" "^6.41.7"
-    tslib "^1.7.1"
-
-"@uifabric/styling@^7.16.0":
-  version "7.16.0"
-  resolved "https://registry.yarnpkg.com/@uifabric/styling/-/styling-7.16.0.tgz#428226d184965d549ebbd110ac33e115b3136b6f"
-  integrity sha512-yO404ws8Wl4fjBwG4T58TFJjeU/K+SpWJ4w+WeNMDlJcYe4zXaWn2lbOJtKtQiMl324RAEjFSOuNkXzPb0uOGQ==
+"@uifabric/styling@^7.16.5":
+  version "7.16.5"
+  resolved "https://registry.yarnpkg.com/@uifabric/styling/-/styling-7.16.5.tgz#88aef7fc8b275a54093ec0c7b9ae6bd7daf9fa10"
+  integrity sha512-mJcPam0ivtGfC8NEUQgpJFs8uG4ZRY1ml1RY9rOY6py5pTEno15xaq11yfRxv3ACxkuK9D9qZM23x0q8sWsCdg==
   dependencies:
-    "@fluentui/theme" "^0.2.0"
+    "@fluentui/theme" "^0.3.2"
     "@microsoft/load-themed-styles" "^1.10.26"
-    "@uifabric/merge-styles" "^7.18.0"
-    "@uifabric/set-version" "^7.0.22"
-    "@uifabric/utilities" "^7.31.0"
+    "@uifabric/merge-styles" "^7.19.1"
+    "@uifabric/set-version" "^7.0.23"
+    "@uifabric/utilities" "^7.32.2"
     tslib "^1.10.0"
 
-"@uifabric/utilities@^6.41.7", "@uifabric/utilities@^6.45.2":
-  version "6.45.2"
-  resolved "https://registry.yarnpkg.com/@uifabric/utilities/-/utilities-6.45.2.tgz#671696f8ac6c4db07500b5aed5181d7b07affb25"
-  integrity sha512-JiC92OjMOkVoiIAeS2b3R9B1XQU0cJ5bDr9B7VvrxlwKe1W9xMtVsCer7b8gNCU5NFNYBN5ckM3Q7x2Zs5cH0A==
-  dependencies:
-    "@uifabric/merge-styles" "^6.19.4"
-    "@uifabric/set-version" "^1.1.3"
-    prop-types "^15.5.10"
-    tslib "^1.7.1"
-
-"@uifabric/utilities@^7.31.0":
-  version "7.31.0"
-  resolved "https://registry.yarnpkg.com/@uifabric/utilities/-/utilities-7.31.0.tgz#600ea931b643c7cbcc38d6466748379227d4fbc7"
-  integrity sha512-m4Yeyn4gyW7xS8LvOnCesokPModYS2YuE9GQmO++MDZ/vC5RRNlvlyktUZDuxCZ84cNCiXyTQ8nImBaPGnxHVQ==
+"@uifabric/utilities@^7.32.2":
+  version "7.32.2"
+  resolved "https://registry.yarnpkg.com/@uifabric/utilities/-/utilities-7.32.2.tgz#abdced888b6d7ef7f352c70640c29e8c75cb28e6"
+  integrity sha512-x47zJIjezkfed17EfNRTr9wP6hHR+i0pBbr3eQYetpcVsAXcbZsd+D6divwy+kQOsdLQ8TozWqoVk3ySe6RfSw==
   dependencies:
-    "@uifabric/merge-styles" "^7.18.0"
-    "@uifabric/set-version" "^7.0.22"
+    "@fluentui/dom-utilities" "^1.1.1"
+    "@uifabric/merge-styles" "^7.19.1"
+    "@uifabric/set-version" "^7.0.23"
     prop-types "^15.7.2"
     tslib "^1.10.0"
 
-"@uifabric/variants@^6.15.2":
-  version "6.15.2"
-  resolved "https://registry.yarnpkg.com/@uifabric/variants/-/variants-6.15.2.tgz#ca96e18bf738ba1cc3152d23aeb4ee6990e963b4"
-  integrity sha512-QWz9+hwxPBys8eib5+K+mtNqGmZFj+pjNWr2M63DsOODbod0geEux1n4X/6+TiEQUDoBTts7UGu7izIzVLmNmQ==
-  dependencies:
-    "@uifabric/set-version" "^1.1.3"
-    office-ui-fabric-react "^6.203.2"
-    tslib "^1.7.1"
-
 "@webassemblyjs/ast@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"
@@ -2263,6 +2274,11 @@ JSONStream@^1.3.4, JSONStream@^1.3.5:
     jsonparse "^1.2.0"
     through ">=2.2.7 <3"
 
+abab@^2.0.0:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a"
+  integrity sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==
+
 abbrev@1, abbrev@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
@@ -2281,17 +2297,30 @@ acorn-dynamic-import@^4.0.0:
   resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz#482210140582a36b83c3e342e1cfebcaa9240948"
   integrity sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==
 
+acorn-globals@^4.1.0, acorn-globals@^4.3.0:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.4.tgz#9fa1926addc11c97308c4e66d7add0d40c3272e7"
+  integrity sha512-clfQEh21R+D0leSbUdWf3OcfqyaCSAQ8Ryq00bofSekfr9W8u1jyYZo6ir0xu9Gtcf7BjcHJpnbZH7JOCpP60A==
+  dependencies:
+    acorn "^6.0.1"
+    acorn-walk "^6.0.1"
+
 acorn-jsx@^5.0.0:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b"
   integrity sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==
 
-acorn@^5.2.1:
+acorn-walk@^6.0.1:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.2.0.tgz#123cb8f3b84c2171f1f7fb252615b1c78a6b1a8c"
+  integrity sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==
+
+acorn@^5.2.1, acorn@^5.5.3:
   version "5.7.4"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.4.tgz#3e8d8a9947d0599a1796d10225d7432f4a4acf5e"
   integrity sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==
 
-acorn@^6.0.5, acorn@^6.0.7:
+acorn@^6.0.1, acorn@^6.0.4, acorn@^6.0.5, acorn@^6.0.7:
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474"
   integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==
@@ -2333,9 +2362,9 @@ ajv-keywords@^3.1.0:
   integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
 ajv@^6.1.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.9.1:
-  version "6.12.4"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.4.tgz#0614facc4522127fa713445c6bfd3ebd376e2234"
-  integrity sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==
+  version "6.12.5"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.5.tgz#19b0e8bae8f476e5ba666300387775fb1a00a4da"
+  integrity sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==
   dependencies:
     fast-deep-equal "^3.1.1"
     fast-json-stable-stringify "^2.0.0"
@@ -2364,7 +2393,7 @@ ansi-colors@^3.0.0:
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
   integrity sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==
 
-ansi-escapes@^3.2.0:
+ansi-escapes@^3.0.0, ansi-escapes@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
   integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
@@ -2384,7 +2413,7 @@ ansi-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
   integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=
 
-ansi-regex@^4.1.0:
+ansi-regex@^4.0.0, ansi-regex@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
   integrity sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==
@@ -2493,6 +2522,11 @@ arr-union@^3.1.0:
   resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
   integrity sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=
 
+array-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
+  integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
+
 array-find-index@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
@@ -2544,7 +2578,7 @@ arrify@^1.0.1:
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
   integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
 
-asap@^2.0.0, asap@~2.0.3, asap@~2.0.6:
+asap@^2.0.0, asap@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
   integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
@@ -2614,6 +2648,11 @@ async-foreach@^0.1.3:
   resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542"
   integrity sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=
 
+async-limiter@~1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
+  integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
+
 async@^2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
@@ -2707,6 +2746,19 @@ babel-jest@24.7.1:
     chalk "^2.4.2"
     slash "^2.0.0"
 
+babel-jest@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.9.0.tgz#3fc327cb8467b89d14d7bc70e315104a783ccd54"
+  integrity sha512-ntuddfyiN+EhMw58PTNL1ph4C9rECiQXjI4nMMBKBaNjXvqLdkXpPRcMSr4iyBrJg/+wz9brFUD6RhOAT6r4Iw==
+  dependencies:
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/babel__core" "^7.1.0"
+    babel-plugin-istanbul "^5.1.0"
+    babel-preset-jest "^24.9.0"
+    chalk "^2.4.2"
+    slash "^2.0.0"
+
 babel-loader@8.0.5:
   version "8.0.5"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.5.tgz#225322d7509c2157655840bba52e46b6c2f2fe33"
@@ -2780,7 +2832,7 @@ babel-plugin-transform-react-remove-prop-types@0.4.24:
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a"
   integrity sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA==
 
-babel-preset-jest@^24.6.0:
+babel-preset-jest@^24.6.0, babel-preset-jest@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz#192b521e2217fb1d1f67cf73f70c336650ad3cdc"
   integrity sha512-izTUuhE4TMfTRPF92fFwD2QfdXaZW08qvWTFCI51V8rW5x00UuPgc3ajRoWofXOuxjfcOM5zzSYsQS3H8KGCAg==
@@ -3013,6 +3065,18 @@ brorand@^1.0.1:
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
   integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
 
+browser-process-hrtime@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
+  integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
+
+browser-resolve@^1.11.3:
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.3.tgz#9b7cbb3d0f510e4cb86bdbd796124d28b5890af6"
+  integrity sha512-exDi1BYWB/6raKHmDTCicQfTkqwN5fioMFV4j8BsfMU4R2DK/QfZfK7kOVkmWCNANf0snkBzqGqAJBao9gZMdQ==
+  dependencies:
+    resolve "1.1.7"
+
 browserify-aes@^1.0.0, browserify-aes@^1.0.4:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48"
@@ -3084,14 +3148,14 @@ browserslist@4.7.0:
     node-releases "^1.1.29"
 
 browserslist@^4.0.0, browserslist@^4.1.1, browserslist@^4.12.0, browserslist@^4.4.2, browserslist@^4.5.2, browserslist@^4.8.5:
-  version "4.14.1"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.1.tgz#cb2b490ba881d45dc3039078c7ed04411eaf3fa3"
-  integrity sha512-zyBTIHydW37pnb63c7fHFXUG6EcqWOqoMdDx6cdyaDFriZ20EoVxcE95S54N+heRqY8m8IUgB5zYta/gCwSaaA==
+  version "4.14.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.3.tgz#381f9e7f13794b2eb17e1761b4f118e8ae665a53"
+  integrity sha512-GcZPC5+YqyPO4SFnz48/B0YaCwS47Q9iPChRGi6t7HhflKBcINzFrJvRfC+jp30sRMKxF+d4EHGs27Z0XP1NaQ==
   dependencies:
-    caniuse-lite "^1.0.30001124"
-    electron-to-chromium "^1.3.562"
-    escalade "^3.0.2"
-    node-releases "^1.1.60"
+    caniuse-lite "^1.0.30001131"
+    electron-to-chromium "^1.3.570"
+    escalade "^3.1.0"
+    node-releases "^1.1.61"
 
 bser@2.1.1:
   version "2.1.1"
@@ -3294,10 +3358,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000939, caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001124:
-  version "1.0.30001125"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001125.tgz#2a1a51ee045a0a2207474b086f628c34725e997b"
-  integrity sha512-9f+r7BW8Qli917mU3j0fUaTweT3f3vnX/Lcs+1C73V+RADmFme+Ih0Br8vONQi3X0lseOe6ZHfsZLCA8MSjxUA==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000939, caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001131:
+  version "1.0.30001131"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001131.tgz#afad8a28fc2b7a0d3ae9407e71085a0ead905d54"
+  integrity sha512-4QYi6Mal4MMfQMSqGIRPGbKIbZygeN83QsWq1ixpUwvtfgAZot5BrCKzGygvZaV+CnELdTwD0S4cqUNozq7/Cw==
 
 capture-exit@^2.0.0:
   version "2.0.0"
@@ -3570,6 +3634,11 @@ cmd-shim@^3.0.0, cmd-shim@^3.0.3:
     graceful-fs "^4.1.2"
     mkdirp "~0.5.0"
 
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+  integrity sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=
+
 coa@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"
@@ -3868,11 +3937,6 @@ core-js-compat@^3.0.0, core-js-compat@^3.6.2:
     browserslist "^4.8.5"
     semver "7.0.0"
 
-core-js@^1.0.0:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
-  integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
-
 core-js@^2.4.0:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
@@ -3947,15 +4011,6 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-create-react-class@^15.5.1:
-  version "15.6.3"
-  resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
-  integrity sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==
-  dependencies:
-    fbjs "^0.8.9"
-    loose-envify "^1.3.1"
-    object-assign "^4.1.1"
-
 cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -4199,6 +4254,18 @@ csso@^4.0.2:
   dependencies:
     css-tree "1.0.0-alpha.39"
 
+cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0", cssom@^0.3.4:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
+
+cssstyle@^1.0.0, cssstyle@^1.1.1:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-1.4.0.tgz#9d31328229d3c565c61e586b02041a28fccdccf1"
+  integrity sha512-GBrLZYZ4X4x6/QEoBnIrqb8B/f5l4+8me2dkom/j1Gtbxy0kBv6OGzKuAsGM75bkGwGAFkt56Iwg28S3XTZgSA==
+  dependencies:
+    cssom "0.3.x"
+
 csstype@^2.2.0:
   version "2.6.13"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.13.tgz#a6893015b90e84dd6e85d0e3b442a1e84f2dbe0f"
@@ -4481,6 +4548,15 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+data-urls@^1.0.0, data-urls@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-1.1.0.tgz#15ee0582baa5e22bb59c77140da8f9c76963bbfe"
+  integrity sha512-YTWYI9se1P55u58gL5GkQHW4P6VJBJ5iBT+B5a7i2Tjadhv52paJG0qHX4A0OR6/t52odI64KP2YvFpkDOi3eQ==
+  dependencies:
+    abab "^2.0.0"
+    whatwg-mimetype "^2.2.0"
+    whatwg-url "^7.0.0"
+
 date-fns@^2.0.1:
   version "2.16.1"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.16.1.tgz#05775792c3f3331da812af253e1a935851d3834b"
@@ -4514,7 +4590,7 @@ debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   dependencies:
     ms "^2.1.1"
 
-debuglog@*, debuglog@^1.0.1:
+debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
   integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=
@@ -4694,6 +4770,11 @@ dezalgo@^1.0.0, dezalgo@~1.0.3:
     asap "^2.0.0"
     wrappy "1"
 
+diff-sequences@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
+  integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==
+
 diff-sequences@^26.3.0:
   version "26.3.0"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.3.0.tgz#62a59b1b29ab7fd27cef2a33ae52abe73042d0a2"
@@ -4791,9 +4872,16 @@ domelementtype@1, domelementtype@^1.3.1:
   integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
 
 domelementtype@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.0.1.tgz#1f8bdfe91f5a78063274e803b4bdcedf6e94f94d"
-  integrity sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.0.2.tgz#f3b6e549201e46f588b59463dd77187131fe6971"
+  integrity sha512-wFwTwCVebUrMgGeAwRL/NhZtHAUyT9n9yg4IMDwf10+6iCMxSkVq9MGCVEH+QZWo1nNidy8kNvwmv4zWHDTqvA==
+
+domexception@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.1.tgz#937442644ca6a31261ef36e3ec677fe805582c90"
+  integrity sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==
+  dependencies:
+    webidl-conversions "^4.0.2"
 
 domhandler@^2.3.0:
   version "2.4.2"
@@ -4900,10 +4988,10 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
-electron-to-chromium@^1.3.247, electron-to-chromium@^1.3.562:
-  version "1.3.564"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.564.tgz#e9c319ae437b3eb8bbf3e3bae4bead5a21945961"
-  integrity sha512-fNaYN3EtKQWLQsrKXui8mzcryJXuA0LbCLoizeX6oayG2emBaS5MauKjCPAvc29NEY4FpLHIUWiP+Y0Bfrs5dg==
+electron-to-chromium@^1.3.247, electron-to-chromium@^1.3.570:
+  version "1.3.570"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.570.tgz#3f5141cc39b4e3892a276b4889980dabf1d29c7f"
+  integrity sha512-Y6OCoVQgFQBP5py6A/06+yWxUZHDlNr/gNDGatjH8AZqXl8X0tE4LfjLJsXGz/JmWJz8a6K7bR1k+QzZ+k//fg==
 
 elliptic@^6.5.3:
   version "6.5.3"
@@ -5025,6 +5113,24 @@ es-abstract@^1.17.0, es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstrac
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
+es-abstract@^1.18.0-next.0:
+  version "1.18.0-next.0"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0-next.0.tgz#b302834927e624d8e5837ed48224291f2c66e6fc"
+  integrity sha512-elZXTZXKn51hUBdJjSZGYRujuzilgXo8vSPQzjGYXLvSlGiCo8VO8ZGV3kjo9a0WNJJ57hENagwbtlRuHuzkcQ==
+  dependencies:
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.1"
+    is-callable "^1.2.0"
+    is-negative-zero "^2.0.0"
+    is-regex "^1.1.1"
+    object-inspect "^1.8.0"
+    object-keys "^1.1.1"
+    object.assign "^4.1.0"
+    string.prototype.trimend "^1.0.1"
+    string.prototype.trimstart "^1.0.1"
+
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -5046,10 +5152,10 @@ es6-promisify@^5.0.0:
   dependencies:
     es6-promise "^4.0.3"
 
-escalade@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.0.2.tgz#6a580d70edb87880f22b4c91d0d56078df6962c4"
-  integrity sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ==
+escalade@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.0.tgz#e8e2d7c7a8b76f6ee64c2181d6b8151441602d4e"
+  integrity sha512-mAk+hPSO8fLDkhV7V0dXazH5pDc6MrjBTPyD3VeKzxnVFjH1MIxbCdqGZB9O8+EwWakZs3ZCbDS4IpRt79V1ig==
 
 escape-html@~1.0.3:
   version "1.0.3"
@@ -5061,6 +5167,18 @@ escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
+escodegen@^1.11.0, escodegen@^1.9.1:
+  version "1.14.3"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.3.tgz#4e7b81fba61581dc97582ed78cab7f0e8d63f503"
+  integrity sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==
+  dependencies:
+    esprima "^4.0.1"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.6.1"
+
 eslint-config-prettier@^6.1.0:
   version "6.11.0"
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.11.0.tgz#f6d2238c1290d01c859a8b5c1f7d352a0b0da8b1"
@@ -5181,11 +5299,11 @@ eslint-scope@^4.0.0, eslint-scope@^4.0.3:
     estraverse "^4.1.1"
 
 eslint-scope@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.0.tgz#d0f971dfe59c69e0cada684b23d49dbf82600ce5"
-  integrity sha512-iiGRvtxWqgtx5m8EyQUJihBloE4EnYeGE/bz1wSPwJE6tZuJUtHlhqDM4Xj2ukE8Dyy1+HCZ4hE0fzIVMzb58w==
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
   dependencies:
-    esrecurse "^4.1.0"
+    esrecurse "^4.3.0"
     estraverse "^4.1.1"
 
 eslint-utils@^1.3.1:
@@ -5263,7 +5381,7 @@ esprima-fb@^15001.1.0-dev-harmony-fb:
   resolved "https://registry.yarnpkg.com/esprima-fb/-/esprima-fb-15001.1.0-dev-harmony-fb.tgz#30a947303c6b8d5e955bee2b99b1d233206a6901"
   integrity sha1-MKlHMDxrjV6VW+4rmbHSMyBqaQE=
 
-esprima@^4.0.0:
+esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
@@ -5280,14 +5398,14 @@ esquery@^1.0.1:
   dependencies:
     estraverse "^5.1.0"
 
-esrecurse@^4.1.0:
+esrecurse@^4.1.0, esrecurse@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
   integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
   dependencies:
     estraverse "^5.2.0"
 
-estraverse@^4.1.1:
+estraverse@^4.1.1, estraverse@^4.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
   integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
@@ -5370,6 +5488,11 @@ execall@^2.0.0:
   dependencies:
     clone-regexp "^2.1.0"
 
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+  integrity sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=
+
 expand-brackets@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
@@ -5383,6 +5506,18 @@ expand-brackets@^2.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
+expect@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-24.9.0.tgz#b75165b4817074fa4a157794f46fe9f1ba15b6ca"
+  integrity sha512-wvVAx8XIol3Z5m9zvZXiyZOQ+sRJqNTIm6sGjdWlaZIeupQGO3WbYI+15D/AmEwZywL6wtJkbAbJtzkOfBuR0Q==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    ansi-styles "^3.2.0"
+    jest-get-type "^24.9.0"
+    jest-matcher-utils "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-regex-util "^24.9.0"
+
 express@^4.16.2, express@^4.17.1:
   version "4.17.1"
   resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
@@ -5554,19 +5689,6 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "2.1.1"
 
-fbjs@^0.8.9:
-  version "0.8.17"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
-  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
-  dependencies:
-    core-js "^1.0.0"
-    isomorphic-fetch "^2.1.1"
-    loose-envify "^1.0.0"
-    object-assign "^4.1.0"
-    promise "^7.1.1"
-    setimmediate "^1.0.5"
-    ua-parser-js "^0.7.18"
-
 figgy-pudding@^3.4.1, figgy-pudding@^3.5.1:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
@@ -6145,6 +6267,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
   integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
 
+growly@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
+  integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
+
 gzip-size@5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
@@ -6198,7 +6325,7 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
-has-symbols@^1.0.0, has-symbols@^1.0.1:
+has-symbols@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
   integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==
@@ -6273,15 +6400,17 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
-history@^3.0.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/history/-/history-3.3.0.tgz#fcedcce8f12975371545d735461033579a6dae9c"
-  integrity sha1-/O3M6PEpdTcVRdc1RhAzV5ptrpw=
+history@^4.9.0:
+  version "4.10.1"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
+  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
   dependencies:
-    invariant "^2.2.1"
+    "@babel/runtime" "^7.1.2"
     loose-envify "^1.2.0"
-    query-string "^4.2.2"
-    warning "^3.0.0"
+    resolve-pathname "^3.0.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+    value-equal "^1.0.1"
 
 hmac-drbg@^1.0.0:
   version "1.0.1"
@@ -6292,7 +6421,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -6329,11 +6458,23 @@ html-comment-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
   integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
 
+html-encoding-sniffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
+  integrity sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==
+  dependencies:
+    whatwg-encoding "^1.0.1"
+
 html-entities@^1.2.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.3.1.tgz#fb9a1a4b5b14c5daba82d3e34c6ae4fe701a0e44"
   integrity sha512-rhE/4Z3hIhzHAUKbW8jVcCyuT5oJCXXqhN/6mXXVCpzTmvJnoH2HL/bt3EZ6p55jbFJBeAe1ZNpL5BugLujxNA==
 
+html-escaper@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
+  integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
+
 html-minifier@^3.5.20:
   version "3.5.21"
   resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.21.tgz#d0040e054730e354db008463593194015212d20c"
@@ -6602,7 +6743,7 @@ import-local@^2.0.0:
     pkg-dir "^3.0.0"
     resolve-cwd "^2.0.0"
 
-imurmurhash@*, imurmurhash@^0.1.4:
+imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
@@ -6722,7 +6863,7 @@ internal-ip@^4.2.0:
     default-gateway "^4.2.0"
     ipaddr.js "^1.9.0"
 
-invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.4:
+invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -6831,9 +6972,9 @@ is-buffer@^2.0.0:
   integrity sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==
 
 is-callable@^1.1.4, is-callable@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.0.tgz#83336560b54a38e35e3a2df7afd0454d691468bb"
-  integrity sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.1.tgz#4d1e21a4f437509d25ce55f8184350771421c96d"
+  integrity sha512-wliAfSzx6V+6WfMOmus1xy0XvSgf/dlStkvTfq7F0g4bOIW0PSUbnyse3NhDwdyYS1ozfUtAAySqTws3z9Eqgg==
 
 is-ci@^1.0.10:
   version "1.2.1"
@@ -6954,6 +7095,11 @@ is-fullwidth-code-point@^3.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
+is-generator-fn@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
+  integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==
+
 is-glob@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
@@ -6981,6 +7127,11 @@ is-installed-globally@^0.1.0:
     global-dirs "^0.1.0"
     is-path-inside "^1.0.0"
 
+is-negative-zero@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
+  integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
+
 is-npm@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-1.0.0.tgz#f2fb63a65e4905b406c86072765a1a4dc793b9f4"
@@ -7049,7 +7200,7 @@ is-redirect@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
   integrity sha1-HQPd7VO9jbDzDCbk+V02/HyH3CQ=
 
-is-regex@^1.0.4, is-regex@^1.1.0:
+is-regex@^1.0.4, is-regex@^1.1.0, is-regex@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9"
   integrity sha512-1+QkEcxiLlB7VEyFtyBg94e08OAsvq7FUBgApTq/w2ymCLyKJgDPsybBENVtA7XCQEgEXxKPonG+mvYRxh/LIg==
@@ -7081,7 +7232,7 @@ is-root@2.1.0:
   resolved "https://registry.yarnpkg.com/is-root/-/is-root-2.1.0.tgz#809e18129cf1129644302a4f8544035d51984a9c"
   integrity sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==
 
-is-stream@^1.0.0, is-stream@^1.0.1, is-stream@^1.1.0:
+is-stream@^1.0.0, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
@@ -7162,25 +7313,17 @@ isobject@^3.0.0, isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha1-TkMekrEalzFjaqH5yNHMvP2reN8=
 
-isomorphic-fetch@^2.1.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
-  integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
-  dependencies:
-    node-fetch "^1.0.1"
-    whatwg-fetch ">=0.10.0"
-
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
   integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 
-istanbul-lib-coverage@^2.0.5:
+istanbul-lib-coverage@^2.0.2, istanbul-lib-coverage@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz#675f0ab69503fad4b1d849f736baaca803344f49"
   integrity sha512-8aXznuEPCJvGnMSRft4udDRDtb1V3pkQkMMI5LI+6HuQz5oQ4J2UFn1H82raA3qJtyOLkkwVqICBQkjnGtn5mA==
 
-istanbul-lib-instrument@^3.3.0:
+istanbul-lib-instrument@^3.0.1, istanbul-lib-instrument@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-3.3.0.tgz#a5f63d91f0bbc0c3e479ef4c5de027335ec6d630"
   integrity sha512-5nnIN4vo5xQZHdXno/YDXJ0G+I3dAm4XgzfSVTPLQpj/zAV2dV6Juy0yaf10/zrJOJeHoN3fraFe+XRq2bFVZA==
@@ -7193,6 +7336,84 @@ istanbul-lib-instrument@^3.3.0:
     istanbul-lib-coverage "^2.0.5"
     semver "^6.0.0"
 
+istanbul-lib-report@^2.0.4:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-2.0.8.tgz#5a8113cd746d43c4889eba36ab10e7d50c9b4f33"
+  integrity sha512-fHBeG573EIihhAblwgxrSenp0Dby6tJMFR/HvlerBsrCTD5bkUuoNtn3gVh29ZCS824cGGBPn7Sg7cNk+2xUsQ==
+  dependencies:
+    istanbul-lib-coverage "^2.0.5"
+    make-dir "^2.1.0"
+    supports-color "^6.1.0"
+
+istanbul-lib-source-maps@^3.0.1:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-3.0.6.tgz#284997c48211752ec486253da97e3879defba8c8"
+  integrity sha512-R47KzMtDJH6X4/YW9XTx+jrLnZnscW4VpNN+1PViSYTejLVPWv7oov+Duf8YQSPyVRUvueQqz1TcsC6mooZTXw==
+  dependencies:
+    debug "^4.1.1"
+    istanbul-lib-coverage "^2.0.5"
+    make-dir "^2.1.0"
+    rimraf "^2.6.3"
+    source-map "^0.6.1"
+
+istanbul-reports@^2.2.6:
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-2.2.7.tgz#5d939f6237d7b48393cc0959eab40cd4fd056931"
+  integrity sha512-uu1F/L1o5Y6LzPVSVZXNOoD/KXpJue9aeLRd0sM9uMXfZvzomB0WxVamWb5ue8kA2vVWEmW7EG+A5n3f1kqHKg==
+  dependencies:
+    html-escaper "^2.0.0"
+
+jest-changed-files@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-24.9.0.tgz#08d8c15eb79a7fa3fc98269bc14b451ee82f8039"
+  integrity sha512-6aTWpe2mHF0DhL28WjdkO8LyGjs3zItPET4bMSeXU6T3ub4FPMw+mcOcbdGXQOAfmLcxofD23/5Bl9Z4AkFwqg==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    execa "^1.0.0"
+    throat "^4.0.0"
+
+jest-cli@^24.7.1:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-24.9.0.tgz#ad2de62d07472d419c6abc301fc432b98b10d2af"
+  integrity sha512-+VLRKyitT3BWoMeSUIHRxV/2g8y9gw91Jh5z2UmXZzkZKpbC08CSehVxgHUwTpy+HwGcns/tqafQDJW7imYvGg==
+  dependencies:
+    "@jest/core" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    import-local "^2.0.0"
+    is-ci "^2.0.0"
+    jest-config "^24.9.0"
+    jest-util "^24.9.0"
+    jest-validate "^24.9.0"
+    prompts "^2.0.1"
+    realpath-native "^1.1.0"
+    yargs "^13.3.0"
+
+jest-config@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-24.9.0.tgz#fb1bbc60c73a46af03590719efa4825e6e4dd1b5"
+  integrity sha512-RATtQJtVYQrp7fvWg6f5y3pEFj9I+H8sWw4aKxnDZ96mob5i5SD6ZEGWgMLXQ4LE8UurrjbdlLWdUeo+28QpfQ==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/test-sequencer" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    babel-jest "^24.9.0"
+    chalk "^2.0.1"
+    glob "^7.1.1"
+    jest-environment-jsdom "^24.9.0"
+    jest-environment-node "^24.9.0"
+    jest-get-type "^24.9.0"
+    jest-jasmine2 "^24.9.0"
+    jest-regex-util "^24.3.0"
+    jest-resolve "^24.9.0"
+    jest-util "^24.9.0"
+    jest-validate "^24.9.0"
+    micromatch "^3.1.10"
+    pretty-format "^24.9.0"
+    realpath-native "^1.1.0"
+
 jest-diff@*:
   version "26.4.2"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.4.2.tgz#a1b7b303bcc534aabdb3bd4a7caf594ac059f5aa"
@@ -7203,6 +7424,71 @@ jest-diff@*:
     jest-get-type "^26.3.0"
     pretty-format "^26.4.2"
 
+jest-diff@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
+  integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
+  dependencies:
+    chalk "^2.0.1"
+    diff-sequences "^24.9.0"
+    jest-get-type "^24.9.0"
+    pretty-format "^24.9.0"
+
+jest-docblock@^24.3.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-24.9.0.tgz#7970201802ba560e1c4092cc25cbedf5af5a8ce2"
+  integrity sha512-F1DjdpDMJMA1cN6He0FNYNZlo3yYmOtRUnktrT9Q37njYzC5WEaDdmbynIgy0L/IvXvvgsG8OsqhLPXTpfmZAA==
+  dependencies:
+    detect-newline "^2.1.0"
+
+jest-each@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-24.9.0.tgz#eb2da602e2a610898dbc5f1f6df3ba86b55f8b05"
+  integrity sha512-ONi0R4BvW45cw8s2Lrx8YgbeXL1oCQ/wIDwmsM3CqM/nlblNCPmnC3IPQlMbRFZu3wKdQ2U8BqM6lh3LJ5Bsog==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    jest-get-type "^24.9.0"
+    jest-util "^24.9.0"
+    pretty-format "^24.9.0"
+
+jest-environment-jsdom-fourteen@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom-fourteen/-/jest-environment-jsdom-fourteen-0.1.0.tgz#aad6393a9d4b565b69a609109bf469f62bf18ccc"
+  integrity sha512-4vtoRMg7jAstitRzL4nbw83VmGH8Rs13wrND3Ud2o1fczDhMUF32iIrNKwYGgeOPUdfvZU4oy8Bbv+ni1fgVCA==
+  dependencies:
+    jest-mock "^24.5.0"
+    jest-util "^24.5.0"
+    jsdom "^14.0.0"
+
+jest-environment-jsdom@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-24.9.0.tgz#4b0806c7fc94f95edb369a69cc2778eec2b7375b"
+  integrity sha512-Zv9FV9NBRzLuALXjvRijO2351DRQeLYXtpD4xNvfoVFw21IOKNhZAEUKcbiEtjTkm2GsJ3boMVgkaR7rN8qetA==
+  dependencies:
+    "@jest/environment" "^24.9.0"
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    jest-mock "^24.9.0"
+    jest-util "^24.9.0"
+    jsdom "^11.5.1"
+
+jest-environment-node@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-24.9.0.tgz#333d2d2796f9687f2aeebf0742b519f33c1cbfd3"
+  integrity sha512-6d4V2f4nxzIzwendo27Tr0aFm+IXWa0XEUnaH6nU0FMaozxovt+sfRvh4J47wL1OvF83I3SSTu0XK+i4Bqe7uA==
+  dependencies:
+    "@jest/environment" "^24.9.0"
+    "@jest/fake-timers" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    jest-mock "^24.9.0"
+    jest-util "^24.9.0"
+
+jest-get-type@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e"
+  integrity sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==
+
 jest-get-type@^26.3.0:
   version "26.3.0"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
@@ -7227,6 +7513,46 @@ jest-haste-map@^24.9.0:
   optionalDependencies:
     fsevents "^1.2.7"
 
+jest-jasmine2@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-24.9.0.tgz#1f7b1bd3242c1774e62acabb3646d96afc3be6a0"
+  integrity sha512-Cq7vkAgaYKp+PsX+2/JbTarrk0DmNhsEtqBXNwUHkdlbrTBLtMJINADf2mf5FkowNsq8evbPc07/qFO0AdKTzw==
+  dependencies:
+    "@babel/traverse" "^7.1.0"
+    "@jest/environment" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    co "^4.6.0"
+    expect "^24.9.0"
+    is-generator-fn "^2.0.0"
+    jest-each "^24.9.0"
+    jest-matcher-utils "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-runtime "^24.9.0"
+    jest-snapshot "^24.9.0"
+    jest-util "^24.9.0"
+    pretty-format "^24.9.0"
+    throat "^4.0.0"
+
+jest-leak-detector@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-24.9.0.tgz#b665dea7c77100c5c4f7dfcb153b65cf07dcf96a"
+  integrity sha512-tYkFIDsiKTGwb2FG1w8hX9V0aUb2ot8zY/2nFg087dUageonw1zrLMP4W6zsRO59dPkTSKie+D4rhMuP9nRmrA==
+  dependencies:
+    jest-get-type "^24.9.0"
+    pretty-format "^24.9.0"
+
+jest-matcher-utils@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.9.0.tgz#f5b3661d5e628dffe6dd65251dfdae0e87c3a073"
+  integrity sha512-OZz2IXsu6eaiMAwe67c1T+5tUAtQyQx27/EMEkbFAGiw52tB9em+uGbzpcgYVpA8wl0hlxKPZxrly4CXU/GjHA==
+  dependencies:
+    chalk "^2.0.1"
+    jest-diff "^24.9.0"
+    jest-get-type "^24.9.0"
+    pretty-format "^24.9.0"
+
 jest-message-util@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-24.9.0.tgz#527f54a1e380f5e202a8d1149b0ec872f43119e3"
@@ -7241,24 +7567,133 @@ jest-message-util@^24.9.0:
     slash "^2.0.0"
     stack-utils "^1.0.1"
 
-jest-mock@^24.9.0:
+jest-mock@^24.5.0, jest-mock@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-24.9.0.tgz#c22835541ee379b908673ad51087a2185c13f1c6"
   integrity sha512-3BEYN5WbSq9wd+SyLDES7AHnjH9A/ROBwmz7l2y+ol+NtSFO8DYiEBzoO1CeFc9a8DYy10EO4dDFVv/wN3zl1w==
   dependencies:
     "@jest/types" "^24.9.0"
 
-jest-regex-util@^24.9.0:
+jest-pnp-resolver@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c"
+  integrity sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==
+
+jest-regex-util@^24.3.0, jest-regex-util@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-24.9.0.tgz#c13fb3380bde22bf6575432c493ea8fe37965636"
   integrity sha512-05Cmb6CuxaA+Ys6fjr3PhvV3bGQmO+2p2La4hFbU+W5uOc479f7FdLXUWXw4pYMAhhSZIuKHwSXSu6CsSBAXQA==
 
+jest-resolve-dependencies@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-24.9.0.tgz#ad055198959c4cfba8a4f066c673a3f0786507ab"
+  integrity sha512-Fm7b6AlWnYhT0BXy4hXpactHIqER7erNgIsIozDXWl5dVm+k8XdGVe1oTg1JyaFnOxarMEbax3wyRJqGP2Pq+g==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    jest-regex-util "^24.3.0"
+    jest-snapshot "^24.9.0"
+
+jest-resolve@24.7.1:
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-24.7.1.tgz#e4150198299298380a75a9fd55043fa3b9b17fde"
+  integrity sha512-Bgrc+/UUZpGJ4323sQyj85hV9d+ANyPNu6XfRDUcyFNX1QrZpSoM0kE4Mb2vZMAYTJZsBFzYe8X1UaOkOELSbw==
+  dependencies:
+    "@jest/types" "^24.7.0"
+    browser-resolve "^1.11.3"
+    chalk "^2.0.1"
+    jest-pnp-resolver "^1.2.1"
+    realpath-native "^1.1.0"
+
+jest-resolve@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-24.9.0.tgz#dff04c7687af34c4dd7e524892d9cf77e5d17321"
+  integrity sha512-TaLeLVL1l08YFZAt3zaPtjiVvyy4oSA6CRe+0AFPPVX3Q/VI0giIWWoAvoS5L96vj9Dqxj4fB5p2qrHCmTU/MQ==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    browser-resolve "^1.11.3"
+    chalk "^2.0.1"
+    jest-pnp-resolver "^1.2.1"
+    realpath-native "^1.1.0"
+
+jest-runner@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-24.9.0.tgz#574fafdbd54455c2b34b4bdf4365a23857fcdf42"
+  integrity sha512-KksJQyI3/0mhcfspnxxEOBueGrd5E4vV7ADQLT9ESaCzz02WnbdbKWIf5Mkaucoaj7obQckYPVX6JJhgUcoWWg==
+  dependencies:
+    "@jest/console" "^24.7.1"
+    "@jest/environment" "^24.9.0"
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.4.2"
+    exit "^0.1.2"
+    graceful-fs "^4.1.15"
+    jest-config "^24.9.0"
+    jest-docblock "^24.3.0"
+    jest-haste-map "^24.9.0"
+    jest-jasmine2 "^24.9.0"
+    jest-leak-detector "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-resolve "^24.9.0"
+    jest-runtime "^24.9.0"
+    jest-util "^24.9.0"
+    jest-worker "^24.6.0"
+    source-map-support "^0.5.6"
+    throat "^4.0.0"
+
+jest-runtime@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-24.9.0.tgz#9f14583af6a4f7314a6a9d9f0226e1a781c8e4ac"
+  integrity sha512-8oNqgnmF3v2J6PVRM2Jfuj8oX3syKmaynlDMMKQ4iyzbQzIG6th5ub/lM2bCMTmoTKM3ykcUYI2Pw9xwNtjMnw==
+  dependencies:
+    "@jest/console" "^24.7.1"
+    "@jest/environment" "^24.9.0"
+    "@jest/source-map" "^24.3.0"
+    "@jest/transform" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/yargs" "^13.0.0"
+    chalk "^2.0.1"
+    exit "^0.1.2"
+    glob "^7.1.3"
+    graceful-fs "^4.1.15"
+    jest-config "^24.9.0"
+    jest-haste-map "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-mock "^24.9.0"
+    jest-regex-util "^24.3.0"
+    jest-resolve "^24.9.0"
+    jest-snapshot "^24.9.0"
+    jest-util "^24.9.0"
+    jest-validate "^24.9.0"
+    realpath-native "^1.1.0"
+    slash "^2.0.0"
+    strip-bom "^3.0.0"
+    yargs "^13.3.0"
+
 jest-serializer@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-24.9.0.tgz#e6d7d7ef96d31e8b9079a714754c5d5c58288e73"
   integrity sha512-DxYipDr8OvfrKH3Kel6NdED3OXxjvxXZ1uIY2I9OFbGg+vUkkg7AGvi65qbhbWNPvDckXmzMPbK3u3HaDO49bQ==
 
-jest-util@^24.9.0:
+jest-snapshot@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-24.9.0.tgz#ec8e9ca4f2ec0c5c87ae8f925cf97497b0e951ba"
+  integrity sha512-uI/rszGSs73xCM0l+up7O7a40o90cnrk429LOiK3aeTvfC0HHmldbd81/B7Ix81KSFe1lwkbl7GnBGG4UfuDew==
+  dependencies:
+    "@babel/types" "^7.0.0"
+    "@jest/types" "^24.9.0"
+    chalk "^2.0.1"
+    expect "^24.9.0"
+    jest-diff "^24.9.0"
+    jest-get-type "^24.9.0"
+    jest-matcher-utils "^24.9.0"
+    jest-message-util "^24.9.0"
+    jest-resolve "^24.9.0"
+    mkdirp "^0.5.1"
+    natural-compare "^1.4.0"
+    pretty-format "^24.9.0"
+    semver "^6.2.0"
+
+jest-util@^24.5.0, jest-util@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-24.9.0.tgz#7396814e48536d2e85a37de3e4c431d7cb140162"
   integrity sha512-x+cZU8VRmOJxbA1K5oDBdxQmdq0OIdADarLxk0Mq+3XS4jgvhG/oKGWcIDCtPG0HgjxOYvF+ilPJQsAyXfbNOg==
@@ -7276,7 +7711,44 @@ jest-util@^24.9.0:
     slash "^2.0.0"
     source-map "^0.6.0"
 
-jest-worker@^24.9.0:
+jest-validate@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-24.9.0.tgz#0775c55360d173cd854e40180756d4ff52def8ab"
+  integrity sha512-HPIt6C5ACwiqSiwi+OfSSHbK8sG7akG8eATl+IPKaeIjtPOeBUd/g3J7DghugzxrGjI93qS/+RPKe1H6PqvhRQ==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    camelcase "^5.3.1"
+    chalk "^2.0.1"
+    jest-get-type "^24.9.0"
+    leven "^3.1.0"
+    pretty-format "^24.9.0"
+
+jest-watch-typeahead@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-0.3.0.tgz#f56d9ee17ea71ecbf8253fed213df3185a1584c9"
+  integrity sha512-+uOtlppt9ysST6k6ZTqsPI0WNz2HLa8bowiZylZoQCQaAVn7XsVmHhZREkz73FhKelrFrpne4hQQjdq42nFEmA==
+  dependencies:
+    ansi-escapes "^3.0.0"
+    chalk "^2.4.1"
+    jest-watcher "^24.3.0"
+    slash "^2.0.0"
+    string-length "^2.0.0"
+    strip-ansi "^5.0.0"
+
+jest-watcher@^24.3.0, jest-watcher@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-24.9.0.tgz#4b56e5d1ceff005f5b88e528dc9afc8dd4ed2b3b"
+  integrity sha512-+/fLOfKPXXYJDYlks62/4R4GoT+GU1tYZed99JSCOsmzkkF7727RqKrjNAxtfO4YpGv11wybgRvCjR73lK2GZw==
+  dependencies:
+    "@jest/test-result" "^24.9.0"
+    "@jest/types" "^24.9.0"
+    "@types/yargs" "^13.0.0"
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.1"
+    jest-util "^24.9.0"
+    string-length "^2.0.0"
+
+jest-worker@^24.6.0, jest-worker@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
   integrity sha512-51PE4haMSXcHohnSMdM42anbvZANYTqMrr52tVKPqqsPJMzoP6FYYDVqahX/HrAoKEKz3uUPzSvKs9A3qR4iVw==
@@ -7284,6 +7756,14 @@ jest-worker@^24.9.0:
     merge-stream "^2.0.0"
     supports-color "^6.1.0"
 
+jest@24.7.1:
+  version "24.7.1"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-24.7.1.tgz#0d94331cf510c75893ee32f87d7321d5bf8f2501"
+  integrity sha512-AbvRar5r++izmqo5gdbAjTeA6uNRGoNRuj5vHB0OnDXo2DXWZJVuaObiGgtlvhKb+cWy2oYbQSfxv7Q7GjnAtA==
+  dependencies:
+    import-local "^2.0.0"
+    jest-cli "^24.7.1"
+
 js-base64@^2.1.8:
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
@@ -7317,6 +7797,70 @@ jsbn@~0.1.0:
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
   integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
 
+jsdom@^11.5.1:
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.12.0.tgz#1a80d40ddd378a1de59656e9e6dc5a3ba8657bc8"
+  integrity sha512-y8Px43oyiBM13Zc1z780FrfNLJCXTL40EWlty/LXUtcjykRBNgLlCjWXpfSPBl2iv+N7koQN+dvqszHZgT/Fjw==
+  dependencies:
+    abab "^2.0.0"
+    acorn "^5.5.3"
+    acorn-globals "^4.1.0"
+    array-equal "^1.0.0"
+    cssom ">= 0.3.2 < 0.4.0"
+    cssstyle "^1.0.0"
+    data-urls "^1.0.0"
+    domexception "^1.0.1"
+    escodegen "^1.9.1"
+    html-encoding-sniffer "^1.0.2"
+    left-pad "^1.3.0"
+    nwsapi "^2.0.7"
+    parse5 "4.0.0"
+    pn "^1.1.0"
+    request "^2.87.0"
+    request-promise-native "^1.0.5"
+    sax "^1.2.4"
+    symbol-tree "^3.2.2"
+    tough-cookie "^2.3.4"
+    w3c-hr-time "^1.0.1"
+    webidl-conversions "^4.0.2"
+    whatwg-encoding "^1.0.3"
+    whatwg-mimetype "^2.1.0"
+    whatwg-url "^6.4.1"
+    ws "^5.2.0"
+    xml-name-validator "^3.0.0"
+
+jsdom@^14.0.0:
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-14.1.0.tgz#916463b6094956b0a6c1782c94e380cd30e1981b"
+  integrity sha512-O901mfJSuTdwU2w3Sn+74T+RnDVP+FuV5fH8tcPWyqrseRAb0s5xOtPgCFiPOtLcyK7CLIJwPyD83ZqQWvA5ng==
+  dependencies:
+    abab "^2.0.0"
+    acorn "^6.0.4"
+    acorn-globals "^4.3.0"
+    array-equal "^1.0.0"
+    cssom "^0.3.4"
+    cssstyle "^1.1.1"
+    data-urls "^1.1.0"
+    domexception "^1.0.1"
+    escodegen "^1.11.0"
+    html-encoding-sniffer "^1.0.2"
+    nwsapi "^2.1.3"
+    parse5 "5.1.0"
+    pn "^1.1.0"
+    request "^2.88.0"
+    request-promise-native "^1.0.5"
+    saxes "^3.1.9"
+    symbol-tree "^3.2.2"
+    tough-cookie "^2.5.0"
+    w3c-hr-time "^1.0.1"
+    w3c-xmlserializer "^1.1.2"
+    webidl-conversions "^4.0.2"
+    whatwg-encoding "^1.0.5"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^7.0.0"
+    ws "^6.1.2"
+    xml-name-validator "^3.0.0"
+
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
@@ -7465,6 +8009,11 @@ kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
+kleur@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
+  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
+
 known-css-properties@^0.19.0:
   version "0.19.0"
   resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.19.0.tgz#5d92b7fa16c72d971bda9b7fe295bdf61836ee5b"
@@ -7514,6 +8063,11 @@ lcid@^2.0.0:
   dependencies:
     invert-kv "^2.0.0"
 
+left-pad@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.3.0.tgz#5b8a3a7765dfe001261dde915589e782f8c94d1e"
+  integrity sha512-XI5MPzVNApjAyhQzphX8BkmKsKUxD4LdyK24iZeQGinBN9yTQT3bFlCBy/aVx2HrNcqQGsdot8ghrjyrvMCoEA==
+
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
@@ -7788,11 +8342,6 @@ lockfile@^1.0.4:
   dependencies:
     signal-exit "^3.0.2"
 
-lodash._baseindexof@*:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c"
-  integrity sha1-/lK1OhxnYeQmGNZU5KJXie1hgiw=
-
 lodash._baseuniq@~4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8"
@@ -7801,33 +8350,11 @@ lodash._baseuniq@~4.6.0:
     lodash._createset "~4.0.0"
     lodash._root "~3.0.0"
 
-lodash._bindcallback@*:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
-  integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4=
-
-lodash._cacheindexof@*:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92"
-  integrity sha1-PcaayCSY0u5ePOVgkbr9Ktx73pI=
-
-lodash._createcache@*:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093"
-  integrity sha1-VtagZAF2JeeevKa4AY4XRAvc8JM=
-  dependencies:
-    lodash._getnative "^3.0.0"
-
 lodash._createset@~4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26"
   integrity sha1-D0ZZ+7CddRlPqeK4imZE02PJ/iY=
 
-lodash._getnative@*, lodash._getnative@^3.0.0:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
-  integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=
-
 lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -7858,10 +8385,10 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
-lodash.restparam@*:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
-  integrity sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=
+lodash.sortby@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
+  integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
 lodash.tail@^4.1.1:
   version "4.1.1"
@@ -7967,7 +8494,7 @@ make-dir@^1.0.0:
   dependencies:
     pify "^3.0.0"
 
-make-dir@^2.0.0:
+make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
   integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
@@ -8257,6 +8784,14 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
+mini-create-react-context@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz#df60501c83151db69e28eac0ef08b4002efab040"
+  integrity sha512-b0TytUgFSbgFJGzJqXPKCFCBWigAjpjo+Fl7Vf7ZbKRDptszpppKxXH6DRXEABZ/gcEQczeb0iZ7JvL8e8jjCA==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    tiny-warning "^1.0.3"
+
 mini-css-extract-plugin@0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.5.0.tgz#ac0059b02b9692515a637115b0cc9fed3a35c7b0"
@@ -8471,18 +9006,10 @@ node-fetch-npm@^2.0.2:
     json-parse-better-errors "^1.0.0"
     safe-buffer "^5.1.1"
 
-node-fetch@^1.0.1:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
-  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
-  dependencies:
-    encoding "^0.1.11"
-    is-stream "^1.0.1"
-
-node-forge@0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.9.0.tgz#d624050edbb44874adca12bb9a52ec63cb782579"
-  integrity sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==
+node-forge@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3"
+  integrity sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==
 
 node-gyp@^3.8.0:
   version "3.8.0"
@@ -8558,7 +9085,18 @@ node-modules-regexp@^1.0.0:
   resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
   integrity sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=
 
-node-releases@^1.1.29, node-releases@^1.1.60:
+node-notifier@^5.4.2:
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.4.3.tgz#cb72daf94c93904098e28b9c590fd866e464bd50"
+  integrity sha512-M4UBGcs4jeOK9CjTsYwkvH6/MzuUmGCyTW+kCY7uO+1ZVr0+FHGdPdIf5CCLqAaxnRrWidyoQlNkMIIVwbKB8Q==
+  dependencies:
+    growly "^1.3.0"
+    is-wsl "^1.1.0"
+    semver "^5.5.0"
+    shellwords "^0.1.1"
+    which "^1.3.0"
+
+node-releases@^1.1.29, node-releases@^1.1.61:
   version "1.1.61"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.61.tgz#707b0fca9ce4e11783612ba4a2fcba09047af16e"
   integrity sha512-DD5vebQLg8jLCOzwupn954fbIiZht05DAZs0k2u8NStSe6h9XdsuIQL8hSRKYiU8WUQRznmSDrKGbv3ObOmC7g==
@@ -8907,6 +9445,11 @@ number-is-nan@^1.0.0:
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
 
+nwsapi@^2.0.7, nwsapi@^2.1.3:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.0.tgz#204879a9e3d068ff2a55139c2c772780681a38b7"
+  integrity sha512-h2AatdwYH+JHiZpv7pt/gSX1XoRGb7L/qSIeuqA6GwYoF9w1vP1cw42TO0aI2pNyshRK5893hNSl+1//vHK7hQ==
+
 oauth-sign@~0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
@@ -8936,7 +9479,7 @@ object-hash@^1.1.4:
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df"
   integrity sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==
 
-object-inspect@^1.7.0:
+object-inspect@^1.7.0, object-inspect@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
   integrity sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==
@@ -8949,7 +9492,7 @@ object-is@^1.0.1:
     define-properties "^1.1.3"
     es-abstract "^1.17.5"
 
-object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1:
+object-keys@^1.0.12, object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
@@ -8962,14 +9505,14 @@ object-visit@^1.0.0:
     isobject "^3.0.0"
 
 object.assign@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
-  integrity sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.1.tgz#303867a666cdd41936ecdedfb1f8f3e32a478cdd"
+  integrity sha512-VT/cxmx5yaoHSOTSyrCygIDFco+RsibY2NM0a4RdEeY/4KgqezwFtK1yr3U67xYhqJSlASm2pKhLVzPj2lr4bA==
   dependencies:
-    define-properties "^1.1.2"
-    function-bind "^1.1.1"
-    has-symbols "^1.0.0"
-    object-keys "^1.0.11"
+    define-properties "^1.1.3"
+    es-abstract "^1.18.0-next.0"
+    has-symbols "^1.0.1"
+    object-keys "^1.1.1"
 
 object.fromentries@^2.0.0:
   version "2.0.2"
@@ -9011,38 +9554,23 @@ obuf@^1.0.0, obuf@^1.1.2:
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
   integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==
 
-office-ui-fabric-react@^6.203.2:
-  version "6.214.1"
-  resolved "https://registry.yarnpkg.com/office-ui-fabric-react/-/office-ui-fabric-react-6.214.1.tgz#e34831fd968b58fd4620a99012446b4e378ac345"
-  integrity sha512-aFTV9pAzx3yWoRkqhOn2J6HoI18fzZ0qXCUfjeJd/hkQ3wL/XwDW+AM/wasvhKAHjW+icNoDuhgC2YZ48S0W1g==
-  dependencies:
-    "@microsoft/load-themed-styles" "^1.7.13"
-    "@uifabric/foundation" "^0.8.3"
-    "@uifabric/icons" "^6.5.5"
-    "@uifabric/merge-styles" "^6.19.4"
-    "@uifabric/set-version" "^1.1.3"
-    "@uifabric/styling" "^6.50.7"
-    "@uifabric/utilities" "^6.45.2"
-    prop-types "^15.5.10"
-    tslib "^1.7.1"
-
-office-ui-fabric-react@^7.78.0:
-  version "7.134.3"
-  resolved "https://registry.yarnpkg.com/office-ui-fabric-react/-/office-ui-fabric-react-7.134.3.tgz#e0f26c86661b357ce0bea47a7c7562db1810778c"
-  integrity sha512-sVOoEIISOe6gVo+5bkiWGrKyiGdAEPB7h3rkfVgfZrQvjt+sgLDjVi6qXHDnmi3p4v6+YeWVdPa73TTAylDzCg==
-  dependencies:
-    "@fluentui/date-time-utilities" "^7.8.0"
-    "@fluentui/react-focus" "^7.16.0"
-    "@fluentui/react-icons" "^0.3.0"
-    "@fluentui/react-window-provider" "^0.3.0"
+office-ui-fabric-react@^7.138.0:
+  version "7.138.0"
+  resolved "https://registry.yarnpkg.com/office-ui-fabric-react/-/office-ui-fabric-react-7.138.0.tgz#45c789d3fd6ef0823f83321b9801e5d89917e153"
+  integrity sha512-HW4ugd+x7Jg96yBWxmUNMfkTS0U8RMwf5mGsHBAvW9s5l1ektjTjKnb5beHxNrddXKqcjz9ZThdTk/Gxds0jig==
+  dependencies:
+    "@fluentui/date-time-utilities" "^7.8.1"
+    "@fluentui/react-focus" "^7.16.5"
+    "@fluentui/react-icons" "^0.3.4"
+    "@fluentui/react-window-provider" "^0.3.3"
     "@microsoft/load-themed-styles" "^1.10.26"
-    "@uifabric/foundation" "^7.9.0"
-    "@uifabric/icons" "^7.5.0"
-    "@uifabric/merge-styles" "^7.18.0"
-    "@uifabric/react-hooks" "^7.12.0"
-    "@uifabric/set-version" "^7.0.22"
-    "@uifabric/styling" "^7.16.0"
-    "@uifabric/utilities" "^7.31.0"
+    "@uifabric/foundation" "^7.9.5"
+    "@uifabric/icons" "^7.5.5"
+    "@uifabric/merge-styles" "^7.19.1"
+    "@uifabric/react-hooks" "^7.13.4"
+    "@uifabric/set-version" "^7.0.23"
+    "@uifabric/styling" "^7.16.5"
+    "@uifabric/utilities" "^7.32.2"
     prop-types "^15.7.2"
     tslib "^1.10.0"
 
@@ -9099,7 +9627,7 @@ optimize-css-assets-webpack-plugin@5.0.1:
     cssnano "^4.1.0"
     last-call-webpack-plugin "^3.0.0"
 
-optionator@^0.8.2:
+optionator@^0.8.1, optionator@^0.8.2:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
   integrity sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==
@@ -9164,6 +9692,13 @@ p-defer@^1.0.0:
   resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
   integrity sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=
 
+p-each-series@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-1.0.0.tgz#930f3d12dd1f50e7434457a22cd6f04ac6ad7f71"
+  integrity sha1-kw89Et0fUOdDRFeiLNbwSsatf3E=
+  dependencies:
+    p-reduce "^1.0.0"
+
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
@@ -9214,6 +9749,11 @@ p-map@^1.1.1:
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b"
   integrity sha512-r6zKACMNhjPJMTl8KcFH4li//gkrXWfbD6feV8l6doRHlzljFWGJ2AP6iKaCJXyZmAUMOPtvbW7EXkbWO/pLEA==
 
+p-reduce@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-reduce/-/p-reduce-1.0.0.tgz#18c2b0dd936a4690a529f8231f58a0fdb6a47dfa"
+  integrity sha1-GMKw3ZNqRpClKfgjH1ig/bakffo=
+
 p-try@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
@@ -9365,6 +9905,16 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
+parse5@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
+  integrity sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==
+
+parse5@5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2"
+  integrity sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==
+
 parseurl@~1.3.2, parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
@@ -9427,6 +9977,13 @@ path-to-regexp@0.1.7:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
+path-to-regexp@^1.7.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
+  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@@ -9538,6 +10095,11 @@ pkg-up@2.0.0:
   dependencies:
     find-up "^2.1.0"
 
+pn@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
+  integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
+
 pnp-webpack-plugin@1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.2.1.tgz#cd9d698df2a6fcf7255093c1c9511adf65b9421b"
@@ -9794,9 +10356,9 @@ postcss-less@^3.1.4:
     postcss "^7.0.14"
 
 postcss-load-config@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.0.tgz#c84d692b7bb7b41ddced94ee62e8ab31b417b003"
-  integrity sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.1.1.tgz#0a684bb8beb05e55baf922f7ab44c3edb17cf78e"
+  integrity sha512-D2ENobdoZsW0+BHy4x1CAkXtbXtYWYRIxL/JbtRBqrRGOPtJ2zoga/bEZWhV/ShWB5saVxJMzbMdSyA/vv4tXw==
   dependencies:
     cosmiconfig "^5.0.0"
     import-cwd "^2.0.0"
@@ -10252,9 +10814,9 @@ postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1:
     uniq "^1.0.1"
 
 postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
-  version "7.0.32"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
-  integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
+  version "7.0.34"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.34.tgz#f2baf57c36010df7de4009940f21532c16d65c20"
+  integrity sha512-H/7V2VeNScX9KE83GDrDZNiGT1m2H+UTnlinIzhjlLX9hfMUn1mHNnGeX81a1c8JSBdBvqk7c2ZOG6ZPn5itGw==
   dependencies:
     chalk "^2.4.2"
     source-map "^0.6.1"
@@ -10295,6 +10857,16 @@ pretty-error@^2.1.1:
     renderkid "^2.0.1"
     utila "~0.4"
 
+pretty-format@^24.9.0:
+  version "24.9.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
+  integrity sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==
+  dependencies:
+    "@jest/types" "^24.9.0"
+    ansi-regex "^4.0.0"
+    ansi-styles "^3.2.0"
+    react-is "^16.8.4"
+
 pretty-format@^26.4.2:
   version "26.4.2"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.4.2.tgz#d081d032b398e801e2012af2df1214ef75a81237"
@@ -10338,13 +10910,6 @@ promise-retry@^1.1.1:
     err-code "^1.0.0"
     retry "^0.10.0"
 
-promise@^7.1.1:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
-  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
-  dependencies:
-    asap "~2.0.3"
-
 promise@^8.0.3:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e"
@@ -10352,6 +10917,14 @@ promise@^8.0.3:
   dependencies:
     asap "~2.0.6"
 
+prompts@^2.0.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.3.2.tgz#480572d89ecf39566d2bd3fe2c9fccb7c4c0b068"
+  integrity sha512-Q06uKs2CkNYVID0VqwfAl9mipo99zkBv/n2JtWY89Yxa3ZabWSrs0e2KTudKVa3peLUvYXMefDqIleLPVUBZMA==
+  dependencies:
+    kleur "^3.0.3"
+    sisteransi "^1.0.4"
+
 promzard@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/promzard/-/promzard-0.3.0.tgz#26a5d6ee8c7dee4cb12208305acfb93ba382a9ee"
@@ -10359,7 +10932,7 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.0.0, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -10480,18 +11053,10 @@ qs@~6.5.2:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
   integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
 
-query-string@^4.2.2:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
-  integrity sha1-u7aTucqRXCMlFbIosaArYJBD2+s=
-  dependencies:
-    object-assign "^4.1.0"
-    strict-uri-encode "^1.0.0"
-
 query-string@^6.8.2:
-  version "6.13.1"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.13.1.tgz#d913ccfce3b4b3a713989fe6d39466d92e71ccad"
-  integrity sha512-RfoButmcK+yCta1+FuU8REvisx1oEzhMKwhLUNcepQTPGcNMp1sIqjnfCtfnvGSQZQEhaBHvccujtWoUV3TTbA==
+  version "6.13.2"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.13.2.tgz#3585aa9412c957cbd358fd5eaca7466f05586dda"
+  integrity sha512-BMmDaUiLDFU1hlM38jTFcRt7HYiGP/zt1sRzrIWm5zpeEuO1rkbPS0ELI3uehoLuuhHDCS8u8lhFN3fEN4JzPQ==
   dependencies:
     decode-uri-component "^0.2.0"
     split-on-first "^1.0.0"
@@ -10637,7 +11202,7 @@ react-error-overlay@^6.0.3:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
   integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
-react-is@^16.12.0, react-is@^16.13.0, react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -10660,9 +11225,9 @@ react-monaco-editor@^0.32.1:
     prop-types "^15.0.0"
 
 react-paginate@^6.3.2:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/react-paginate/-/react-paginate-6.4.0.tgz#89426657c9b41bde616a3ded6923e589c3bcb62b"
-  integrity sha512-xvndbJLUsJhCnEI0F/Xbt+vXg4bRPKhKhd0KrEyvXoIMHnsK/xqXvz5o/unYuLI27Cai5xymwB2tiCSAl+UJPA==
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/react-paginate/-/react-paginate-6.5.0.tgz#b9baf53627b115cfd688afa048776aa45bffda19"
+  integrity sha512-H7xSi9jyiJzgfaj+2nNhQcjZfwzJ/Mxb64V2RiyDctjZyCWojwsaGwMqhLBpQ58iAuMVtBMRQ7ECqMcUKG9QSQ==
   dependencies:
     prop-types "^15.6.1"
 
@@ -10673,19 +11238,34 @@ react-pagination@^1.0.0:
   dependencies:
     react "^0.13.3"
 
-react-router@^3.2.3:
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-3.2.6.tgz#cad202796a7bba3efc2100da453b3379c9d4aeb4"
-  integrity sha512-nlxtQE8B22hb/JxdaslI1tfZacxFU8x8BJryXOnR2RxB4vc01zuHYAHAIgmBkdk1kzXaA25hZxK6KAH/+CXArw==
+react-router-dom@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
+  integrity sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==
   dependencies:
-    create-react-class "^15.5.1"
-    history "^3.0.0"
-    hoist-non-react-statics "^3.3.2"
-    invariant "^2.2.1"
-    loose-envify "^1.2.0"
-    prop-types "^15.7.2"
-    react-is "^16.13.0"
-    warning "^3.0.0"
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.2"
+    react-router "5.2.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
+
+react-router@5.2.0, react-router@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293"
+  integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    hoist-non-react-statics "^3.1.0"
+    loose-envify "^1.3.1"
+    mini-create-react-context "^0.4.0"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.6.2"
+    react-is "^16.6.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
 
 react-table@^7.0.0-rc.15:
   version "7.5.0"
@@ -11120,6 +11700,22 @@ replace-ext@1.0.0:
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
   integrity sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=
 
+request-promise-core@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.4.tgz#3eedd4223208d419867b78ce815167d10593a22f"
+  integrity sha512-TTbAfBBRdWD7aNNOoVOBH4pN/KigV6LyapYNNlAPA8JwbovRti1E88m3sYAwsLi5ryhPKsE9APwnjFTgdUjTpw==
+  dependencies:
+    lodash "^4.17.19"
+
+request-promise-native@^1.0.5:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.9.tgz#e407120526a5efdc9a39b28a5679bf47b9d9dc28"
+  integrity sha512-wcW+sIUiWnKgNY0dqCpOZkUbF/I+YPi+f09JZIDa39Ec+q82CpSYniDp+ISgTTbKmnpJWASeJBPZmoxH84wt3g==
+  dependencies:
+    request-promise-core "1.1.4"
+    stealthy-require "^1.1.1"
+    tough-cookie "^2.3.3"
+
 request@^2.87.0, request@^2.88.0:
   version "2.88.2"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
@@ -11193,11 +11789,21 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
+resolve-pathname@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
+  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
+
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
+resolve@1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+  integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
+
 resolve@1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.10.0.tgz#3bdaaeaf45cc07f375656dfd2e54ed0810b101ba"
@@ -11365,11 +11971,18 @@ sass-loader@7.1.0:
     pify "^3.0.0"
     semver "^5.5.0"
 
-sax@~1.2.4:
+sax@^1.2.4, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
+saxes@^3.1.9:
+  version "3.1.11"
+  resolved "https://registry.yarnpkg.com/saxes/-/saxes-3.1.11.tgz#d59d1fd332ec92ad98a2e0b2ee644702384b1c5b"
+  integrity sha512-Ydydq3zC+WYDJK1+gRxRapLIED9PWeSuuS41wqyoRmzvhhh9nc+QQrVMKJYzJFULazeGhzSV0QleN2wD3boh2g==
+  dependencies:
+    xmlchars "^2.1.1"
+
 scheduler@^0.19.1:
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
@@ -11401,11 +12014,11 @@ select-hose@^2.0.0:
   integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
 
 selfsigned@^1.9.1:
-  version "1.10.7"
-  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.7.tgz#da5819fd049d5574f28e88a9bcc6dbc6e6f3906b"
-  integrity sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==
+  version "1.10.8"
+  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.8.tgz#0d17208b7d12c33f8eac85c41835f27fc3d81a30"
+  integrity sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==
   dependencies:
-    node-forge "0.9.0"
+    node-forge "^0.10.0"
 
 semver-diff@^2.0.0:
   version "2.1.0"
@@ -11429,7 +12042,7 @@ semver@7.0.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
-semver@^6.0.0:
+semver@^6.0.0, semver@^6.2.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
@@ -11513,7 +12126,7 @@ set-value@^2.0.0, set-value@^2.0.1:
     is-plain-object "^2.0.3"
     split-string "^3.0.1"
 
-setimmediate@^1.0.4, setimmediate@^1.0.5:
+setimmediate@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
   integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
@@ -11579,6 +12192,11 @@ shell-quote@1.7.2:
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
   integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
 
+shellwords@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
+  integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -11591,6 +12209,11 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
+sisteransi@^1.0.4:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
+  integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
+
 size-sensor@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/size-sensor/-/size-sensor-1.0.1.tgz#f84e46206d3e259faff1d548e4b3beca93219dbb"
@@ -11746,7 +12369,7 @@ source-map-resolve@^0.5.0:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
-source-map-support@~0.5.10, source-map-support@~0.5.12:
+source-map-support@^0.5.6, source-map-support@~0.5.10, source-map-support@~0.5.12:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
   integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
@@ -11803,9 +12426,9 @@ spdx-expression-parse@^3.0.0:
     spdx-license-ids "^3.0.0"
 
 spdx-license-ids@^3.0.0:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz#3694b5804567a458d3c8045842a6358632f62654"
-  integrity sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.6.tgz#c80757383c28abf7296744998cbc106ae8b854ce"
+  integrity sha512-+orQK83kyMva3WyPf59k1+Y525csj5JejicWut55zeTWANuN17qSiSLUXWtzHeNWORSvT7GLDJ/E/XiIWoXBTw==
 
 spdy-transport@^3.0.0:
   version "3.0.0"
@@ -11909,6 +12532,11 @@ stdout-stream@^1.4.0:
   dependencies:
     readable-stream "^2.0.1"
 
+stealthy-require@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
+  integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
+
 stream-browserify@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"
@@ -11949,16 +12577,19 @@ stream-shift@^1.0.0:
   resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.1.tgz#d7088281559ab2778424279b0877da3c392d5a3d"
   integrity sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==
 
-strict-uri-encode@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
-  integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
-
 strict-uri-encode@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
   integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
 
+string-length@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
+  integrity sha1-1A27aGo6zpYMHP/KVivyxF+DY+0=
+  dependencies:
+    astral-regex "^1.0.0"
+    strip-ansi "^4.0.0"
+
 string-width@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@@ -12161,9 +12792,9 @@ stylelint-config-standard@^20.0.0:
     stylelint-config-recommended "^3.0.0"
 
 stylelint@^13.7.0:
-  version "13.7.0"
-  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-13.7.0.tgz#8d7a4233063b2f06e9f28b3405ff189e334547b5"
-  integrity sha512-1wStd4zVetnlHO98VjcHQbjSDmvcA39smkZQMct2cf+hom40H0xlQNdzzbswoG/jGBh61/Ue9m7Lu99PY51O6A==
+  version "13.7.1"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-13.7.1.tgz#bee97ee78d778a3f1dbe3f7397b76414973e263e"
+  integrity sha512-qzqazcyRxrSRdmFuO0/SZOJ+LyCxYy0pwcvaOBBnl8/2VfHSMrtNIE+AnyJoyq6uKb+mt+hlgmVrvVi6G6XHfQ==
   dependencies:
     "@stylelint/postcss-css-in-js" "^0.37.2"
     "@stylelint/postcss-markdown" "^0.36.1"
@@ -12281,6 +12912,11 @@ sylvester-es6@0.0.2:
   resolved "https://registry.yarnpkg.com/sylvester-es6/-/sylvester-es6-0.0.2.tgz#3e65178a5ae3cc3f419542d9cd1ad55435912abf"
   integrity sha1-PmUXilrjzD9BlULZzRrVVDWRKr8=
 
+symbol-tree@^3.2.2:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
+  integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
+
 table@^5.2.3:
   version "5.4.6"
   resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
@@ -12397,6 +13033,11 @@ text-table@0.2.0, text-table@^0.2.0, text-table@~0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
+throat@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
+  integrity sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=
+
 through2@^2.0.0:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
@@ -12432,11 +13073,21 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-invariant@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
+  integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
+
 tiny-relative-date@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/tiny-relative-date/-/tiny-relative-date-1.3.0.tgz#fa08aad501ed730f31cc043181d995c39a935e07"
   integrity sha512-MOQHpzllWxDCHHaDno30hhLfbouoYlOI8YlMNtvKe1zXbjEVhbcEovQxvZrPvtiYW630GQDoMMarCnjfyfHA+A==
 
+tiny-warning@^1.0.0, tiny-warning@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -12501,7 +13152,7 @@ toidentifier@1.0.0:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
-tough-cookie@~2.5.0:
+tough-cookie@^2.3.3, tough-cookie@^2.3.4, tough-cookie@^2.5.0, tough-cookie@~2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
   integrity sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==
@@ -12509,6 +13160,13 @@ tough-cookie@~2.5.0:
     psl "^1.1.28"
     punycode "^2.1.1"
 
+tr46@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
+  integrity sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=
+  dependencies:
+    punycode "^2.1.0"
+
 tree-kill@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
@@ -12551,7 +13209,7 @@ 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@^1.10.0, tslib@^1.7.1, tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
   integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
@@ -12627,11 +13285,6 @@ typescript@^3.8.0:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa"
   integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==
 
-ua-parser-js@^0.7.18:
-  version "0.7.21"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.21.tgz#853cf9ce93f642f67174273cc34565ae6f308777"
-  integrity sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ==
-
 uglify-js@3.4.x:
   version "3.4.10"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"
@@ -12964,6 +13617,11 @@ validate-npm-package-name@^3.0.0, validate-npm-package-name@~3.0.0:
   dependencies:
     builtins "^1.0.3"
 
+value-equal@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
+  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -13012,6 +13670,22 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+w3c-hr-time@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"
+  integrity sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==
+  dependencies:
+    browser-process-hrtime "^1.0.0"
+
+w3c-xmlserializer@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-1.1.2.tgz#30485ca7d70a6fd052420a3d12fd90e6339ce794"
+  integrity sha512-p10l/ayESzrBMYWRID6xbuCKh2Fp77+sA0doRuGn4tTIMrrZVeqfpKjXHY+oDh3K4nLdPgNwMTVP6Vp4pvqbNg==
+  dependencies:
+    domexception "^1.0.1"
+    webidl-conversions "^4.0.2"
+    xml-name-validator "^3.0.0"
+
 walker@^1.0.7, walker@~1.0.5:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"
@@ -13019,13 +13693,6 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
-warning@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
-  integrity sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=
-  dependencies:
-    loose-envify "^1.0.0"
-
 watchpack-chokidar2@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.0.tgz#9948a1866cbbd6cb824dea13a7ed691f6c8ddff0"
@@ -13058,6 +13725,11 @@ wcwidth@^1.0.0:
   dependencies:
     defaults "^1.0.3"
 
+webidl-conversions@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
+  integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
+
 webpack-dev-middleware@^3.5.1:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz#0019c3db716e3fa5cecbf64f2ab88a74bab331f3"
@@ -13174,11 +13846,41 @@ websocket-extensions@>=0.1.1:
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
   integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
 
-whatwg-fetch@>=0.10.0, whatwg-fetch@^3.0.0:
+whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"
+  integrity sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==
+  dependencies:
+    iconv-lite "0.4.24"
+
+whatwg-fetch@^3.0.0:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.4.1.tgz#e5f871572d6879663fa5674c8f833f15a8425ab3"
   integrity sha512-sofZVzE1wKwO+EYPbWfiwzaKovWiZXf4coEzjGP9b2GBVgQRLQUZ2QcuPpQExGDAW5GItpEm6Tl4OU5mywnAoQ==
 
+whatwg-mimetype@^2.1.0, whatwg-mimetype@^2.2.0, whatwg-mimetype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
+  integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
+
+whatwg-url@^6.4.1:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-6.5.0.tgz#f2df02bff176fd65070df74ad5ccbb5a199965a8"
+  integrity sha512-rhRZRqx/TLJQWUpQ6bmrt2UV4f0HCQ463yQuONJqC6fO2VoEb1pTYddbe59SkYq87aoM5A3bdhMZiUiVws+fzQ==
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^1.0.1"
+    webidl-conversions "^4.0.2"
+
+whatwg-url@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.1.0.tgz#c2c492f1eca612988efd3d2266be1b9fc6170d06"
+  integrity sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^1.0.1"
+    webidl-conversions "^4.0.2"
+
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
@@ -13416,11 +14118,35 @@ write@1.0.3:
   dependencies:
     mkdirp "^0.5.1"
 
+ws@^5.2.0:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-5.2.2.tgz#dffef14866b8e8dc9133582514d1befaf96e980f"
+  integrity sha512-jaHFD6PFv6UgoIVda6qZllptQsMlDEJkTQcybzzXDYM1XO9Y8em691FGMPmM46WGyLU4z9KMgQN+qrux/nhlHA==
+  dependencies:
+    async-limiter "~1.0.0"
+
+ws@^6.1.2:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
+  integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==
+  dependencies:
+    async-limiter "~1.0.0"
+
 xdg-basedir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
   integrity sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ=
 
+xml-name-validator@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
+  integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
+
+xmlchars@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
+  integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
+
 xregexp@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.0.0.tgz#e698189de49dd2a18cc5687b05e17c8e43943020"