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 548a2811f5..9fb5393e3e 100644
--- a/src/webui/.eslintrc
+++ b/src/webui/.eslintrc
@@ -9,22 +9,29 @@
         "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,
         "@typescript-eslint/no-use-before-define": [2, "nofunc"],
-        "no-inner-declarations": 0,
         "@typescript-eslint/no-var-requires": 0,
+        "arrow-parens": [2, "as-needed"],
+        "no-inner-declarations": 0,
+        "no-empty": 2,
+        "no-multiple-empty-lines": [2, { "max": 1 }],
         "react/display-name": 0
     },
     "settings": {
diff --git a/src/webui/.stylelintrc.json b/src/webui/.stylelintrc.json
new file mode 100644
index 0000000000..59743ae917
--- /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 f7a1687f48..01be332eb3 100644
--- a/src/webui/package.json
+++ b/src/webui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "nni-webui",
   "version": "0.1.0",
-  "private": true,
+  "license": "MIT",
   "dependencies": {
     "axios": "^0.19.0",
     "babel-eslint": "10.0.1",
@@ -75,15 +75,20 @@
     "@typescript-eslint/parser": "^2.11.0",
     "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",
     "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",
@@ -92,6 +97,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
new file mode 100644
index 0000000000..09b26e21a6
--- /dev/null
+++ b/src/webui/prettier.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+    printWidth: 120,
+    semi: true,
+    tabWidth: 4,
+    trailingComma: 'none',
+    arrowParens: 'avoid',
+    bracketSpacing: true,
+    singleQuote: true,
+    eslintIntegration: true,
+    jsxSingleQuote: true,
+    endOfline: 'lf'
+};
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.tsx b/src/webui/src/App.tsx
index 1ce12e3eaf..08818e64be 100644
--- a/src/webui/src/App.tsx
+++ b/src/webui/src/App.tsx
@@ -28,7 +28,7 @@ export const AppContext = React.createContext({
     // 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') => {},
+    changeMetricGraphMode: (val: 'max' | 'min') => {},
     // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
     changeEntries: (val: string) => {}
 });
@@ -54,10 +54,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
@@ -78,7 +78,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);
                 }
@@ -86,10 +87,9 @@ class App extends React.Component<{}, AppState> {
                 break;
             }
         }
-    }
+    };
 
     changeInterval = (interval: number): void => {
-
         window.clearTimeout(this.timerId);
         if (interval === 0) {
             return;
@@ -100,22 +100,21 @@ 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 });
-    }
+    };
 
     shouldComponentUpdate(nextProps: any, nextState: AppState): boolean {
         if (!(nextState.isUpdate || nextState.isUpdate === undefined)) {
@@ -126,11 +125,18 @@ class App extends React.Component<{}, AppState> {
     }
 
     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() },
@@ -141,38 +147,41 @@ class App extends React.Component<{}, AppState> {
             { errorWhere: TRIALS.metricDataRangeError(), errorMessage: TRIALS.metricDataRangeErrorMessage() }
         ];
         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) =>
+                                item.errorWhere && (
+                                    <div key={key} className='warning'>
+                                        <MessageInfo info={item.errorMessage} typeInfo='error' />
                                     </div>
-                                );
-                            })
-                        }
-                        {isillegalFinal && <div className="warning">
-                            <MessageInfo info={expWarningMessage} typeInfo="warning" />
-                        </div>}
-                        <AppContext.Provider value={{
-                            interval,
-                            columnList, 
-                            changeColumn: this.changeColumn,
-                            experimentUpdateBroadcast,
-                            trialsUpdateBroadcast,
-                            metricGraphMode, 
-                            changeMetricGraphMode: this.changeMetricGraphMode,
-                            bestTrialEntries, 
-                            changeEntries: this.changeEntries
-                        }}>
+                                )
+                        )}
+                        {isillegalFinal && (
+                            <div className='warning'>
+                                <MessageInfo info={expWarningMessage} typeInfo='warning' />
+                            </div>
+                        )}
+                        <AppContext.Provider
+                            value={{
+                                interval,
+                                columnList,
+                                changeColumn: this.changeColumn,
+                                experimentUpdateBroadcast,
+                                trialsUpdateBroadcast,
+                                metricGraphMode,
+                                changeMetricGraphMode: this.changeMetricGraphMode,
+                                bestTrialEntries,
+                                changeEntries: this.changeEntries
+                            }}
+                        >
                             {this.props.children}
                         </AppContext.Provider>
                     </Stack>
@@ -192,7 +201,6 @@ class App extends React.Component<{}, AppState> {
             if (trialsUpdated) {
                 this.setState(state => ({ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
             }
-
         } else {
             this.firstLoad = false;
         }
@@ -205,13 +213,15 @@ class App extends React.Component<{}, AppState> {
         }
 
         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, trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
+        this.setState(state => ({
+            experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1,
+            trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1
+        }));
     }
 }
 
diff --git a/src/webui/src/components/NavCon.tsx b/src/webui/src/components/NavCon.tsx
index 07e0facbbe..b1bc216fae 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 '@fluentui/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 32469a59d3..a875d2efaa 100644
--- a/src/webui/src/components/Overview.tsx
+++ b/src/webui/src/components/Overview.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Stack, IStackTokens, Dropdown } from '@fluentui/react';
 import { EXPERIMENT, TRIALS } from '../static/datamodel';
 import { Trial } from '../static/model/trial';
-import { AppContext } from "../App";
+import { AppContext } from '../App';
 import { Title1 } from './overview/Title1';
 import SuccessTable from './overview/SuccessTable';
 import Progressed from './overview/Progress';
@@ -14,7 +14,7 @@ import '../static/style/overview.scss';
 import '../static/style/logPath.scss';
 
 const stackTokens: IStackTokens = {
-    childrenGap: 30,
+    childrenGap: 30
 };
 
 const entriesOption = [
@@ -50,25 +50,24 @@ class Overview extends React.Component<{}, OverviewState> {
         // #999 panel active bgcolor; #b3b3b3 as usual
         const { changeMetricGraphMode } = this.context;
         changeMetricGraphMode('max');
-    }
-
+    };
 
     clickMinTop = (event: React.SyntheticEvent<EventTarget>): void => {
         event.stopPropagation();
         const { changeMetricGraphMode } = this.context;
         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.context.changeEntries(item.key);
         }
-    }
+    };
 
     render(): React.ReactNode {
         const { trialConcurrency } = this.state;
@@ -81,22 +80,22 @@ class Overview extends React.Component<{}, OverviewState> {
             <AppContext.Consumer>
                 {(value): React.ReactNode => {
                     const { experimentUpdateBroadcast, metricGraphMode, bestTrialEntries } = value;
-                    const titleMaxbgcolor = (metricGraphMode === 'max' ? '#333' : '#b3b3b3');
-                    const titleMinbgcolor = (metricGraphMode === 'min' ? '#333' : '#b3b3b3');
+                    const titleMaxbgcolor = metricGraphMode === 'max' ? '#333' : '#b3b3b3';
+                    const titleMinbgcolor = metricGraphMode === 'min' ? '#333' : '#b3b3b3';
                     return (
-                        <div className="overview">
+                        <div className='overview'>
                             {/* status and experiment block */}
-                            <Stack className="bottomDiv bgNNI">
-                                <TitleContext.Provider value={{ text: "Experiment", icon: "11.png", fontColor: '' }}>
+                            <Stack className='bottomDiv bgNNI'>
+                                <TitleContext.Provider value={{ text: 'Experiment', icon: '11.png', fontColor: '' }}>
                                     <Title1 />
                                 </TitleContext.Provider>
                                 <BasicInfo />
                             </Stack>
 
-                            <Stack horizontal className="overMessage bottomDiv">
+                            <Stack horizontal className='overMessage bottomDiv'>
                                 {/* status block */}
-                                <Stack.Item grow className="prograph bgNNI borderRight">
-                                    <TitleContext.Provider value={{ text: "Status", icon: "5.png", fontColor: '' }}>
+                                <Stack.Item grow className='prograph bgNNI borderRight'>
+                                    <TitleContext.Provider value={{ text: 'Status', icon: '5.png', fontColor: '' }}>
                                         <Title1 />
                                     </TitleContext.Provider>
                                     <Progressed
@@ -107,21 +106,27 @@ class Overview extends React.Component<{}, OverviewState> {
                                     />
                                 </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: '' }}>
+                                <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">
+                                    <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: '' }}>
+                                <Stack.Item grow styles={{ root: { width: 450 } }} className='bgNNI'>
+                                    <TitleContext.Provider value={{ text: 'Config', icon: '4.png', fontColor: '' }}>
                                         <Title1 />
                                     </TitleContext.Provider>
-                                    <Stack className="experiment">
+                                    <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}
@@ -132,20 +137,26 @@ class Overview extends React.Component<{}, OverviewState> {
                             </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 }}>
+                                <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 }}>
+                                    <div className='title minTitle' onClick={this.clickMinTop}>
+                                        <TitleContext.Provider
+                                            value={{
+                                                text: 'Top minimal trials',
+                                                icon: 'min.png',
+                                                fontColor: titleMinbgcolor
+                                            }}
+                                        >
                                             <Title1 />
                                         </TitleContext.Provider>
                                     </div>
@@ -172,9 +183,8 @@ class Overview extends React.Component<{}, OverviewState> {
                                 </Stack>
                             </Stack>
                         </div>
-                    )
-                }
-                }
+                    );
+                }}
             </AppContext.Consumer>
         );
     }
@@ -214,11 +224,13 @@ class Overview extends React.Component<{}, 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 1e3595038a..b22d6d2841 100644
--- a/src/webui/src/components/TrialsDetail.tsx
+++ b/src/webui/src/components/TrialsDetail.tsx
@@ -1,10 +1,8 @@
 import * as React from 'react';
-import {
-    Stack, StackItem, Pivot, PivotItem, Dropdown, IDropdownOption, DefaultButton
-} from '@fluentui/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 { AppContext } from "../App";
+import { AppContext } from '../App';
 import { tableListIcon } from './buttons/Icon';
 import DefaultPoint from './trial-detail/DefaultMetricPoint';
 import Duration from './trial-detail/Duration';
@@ -18,7 +16,7 @@ const searchOptions = [
     { key: 'id', text: 'Id' },
     { key: 'Trial No.', text: 'Trial No.' },
     { key: 'status', text: 'Status' },
-    { key: 'parameters', text: 'Parameters' },
+    { key: 'parameters', text: 'Parameters' }
 ];
 
 interface TrialDetailState {
@@ -74,17 +72,17 @@ class TrialsDetail extends React.Component<{}, 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 });
-    }
+    };
 
     updateSearchFilterType = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
         // clear input value and re-render table
@@ -94,31 +92,33 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
             }
             this.setState(() => ({ searchType: item.key.toString() }));
         }
-    }
+    };
 
     render(): React.ReactNode {
         const { tablePageSize, whichChart, searchType } = this.state;
         const source = TRIALS.filter(this.state.searchFilter);
         const trialIds = TRIALS.filter(this.state.searchFilter).map(trial => trial.id);
-        
+
         return (
             <AppContext.Consumer>
-                {(value): React.ReactNode =>
+                {(value): React.ReactNode => (
                     <React.Fragment>
-                        <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">
-                                        <DefaultPoint
-                                            trialIds={trialIds}
-                                            visible={whichChart === 'Default metric'}
-                                        />
+                                <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">
+                                <PivotItem headerText='Hyper-parameter' itemIcon='Equalizer' key='Hyper-parameter'>
+                                    <Stack className='graph'>
                                         <Para
                                             trials={source}
                                             searchSpace={EXPERIMENT.searchSpaceNew}
@@ -127,11 +127,15 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                                     </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>
@@ -139,25 +143,33 @@ class TrialsDetail extends React.Component<{}, 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}
@@ -166,12 +178,12 @@ class TrialsDetail extends React.Component<{}, 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>
@@ -183,11 +195,11 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                                 changeColumn={value.changeColumn}
                                 trialsUpdateBroadcast={this.context.trialsUpdateBroadcast}
                                 // TODO: change any to specific type
-                                ref={(tabList): any => this.tableList = tabList}
+                                ref={(tabList): any => (this.tableList = tabList)}
                             />
                         </div>
                     </React.Fragment>
-                }
+                )}
             </AppContext.Consumer>
         );
     }
diff --git a/src/webui/src/components/buttons/Icon.tsx b/src/webui/src/components/buttons/Icon.tsx
index 06f2d28295..4d77758feb 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: 'Refresh' };
 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 caf9d1c2db..eaf513b532 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 8a05a3a058..a4691b8d40 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 7d97c4edd2..daed24526c 100644
--- a/src/webui/src/components/modals/Compare.tsx
+++ b/src/webui/src/components/modals/Compare.tsx
@@ -20,7 +20,6 @@ interface CompareProps {
 }
 
 class Compare extends React.Component<CompareProps, {}> {
-
     public _isCompareMount!: boolean;
     constructor(props: CompareProps) {
         super(props);
@@ -41,7 +40,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;
@@ -56,27 +57,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: {
@@ -110,8 +119,7 @@ class Compare extends React.Component<CompareProps, {}> {
                 notMerge={true} // update now
             />
         );
-
-    }
+    };
 
     // render table column ---
     initColumn = (): React.ReactNode => {
@@ -134,8 +142,7 @@ 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;
         }
         const width = this.getWebUIWidth();
         let scrollClass;
@@ -150,70 +157,59 @@ class Compare extends React.Component<CompareProps, {}> {
             <table className={`compare-modal-table ${scrollClass}`}>
                 <tbody>
                     <tr>
-                        <td className="column">Id</td>
-                        {Object.keys(idList).map(key => {
-                            return (
-                                <td className="value idList" key={key}>{idList[key]}</td>
-                            );
-                        })}
+                        <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 => {
-                            return (
-                                <td className="value idList" key={key}>{sequenceIdList[key]}</td>
-                            );
-                        })}
+                        <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 => {
-                            const temp = compareStacks[index];
-                            return (
-                                <td className="value" key={index}>
-                                    <IntermediateVal trialId={temp.id} />
-                                </td>
-                            );
-                        })}
+                        <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 => {
-                            return (
-                                <td className="value" key={index}>{durationList[index]}</td>
-                            );
-                        })}
+                        <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 => {
-                                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 => (
+                              <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>
         );
-    }
+    };
 
     getWebUIWidth = (): number => {
         return window.innerWidth;
-    }
+    };
 
     componentDidMount(): void {
         this._isCompareMount = true;
@@ -230,7 +226,7 @@ class Compare extends React.Component<CompareProps, {}> {
             <Modal
                 isOpen={true}
                 containerClassName={contentStyles.container}
-                className="compare-modal"
+                className='compare-modal'
                 allowTouchBodyScroll={true}
                 dragOptions={dragOptions}
             >
@@ -240,13 +236,13 @@ class Compare extends React.Component<CompareProps, {}> {
                         <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 9fbf396050..86d4ed3c50 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 e77d76a946..11b45abf11 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 '@fluentui/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';
@@ -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 48d927ae56..e35be32cfa 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 '@fluentui/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.id, 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 8df1a233ac..1b4c7a9cf3 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 '@fluentui/react';
+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';
@@ -40,44 +37,42 @@ 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}>
-                    {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 }));
-    }
+    };
 
     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 +90,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 +150,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 265a5f6253..c9f34c7149 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/modals/customized.scss b/src/webui/src/components/modals/customized.scss
index ef2cce35b8..a6bfe1fc3d 100644
--- a/src/webui/src/components/modals/customized.scss
+++ b/src/webui/src/components/modals/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/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 fcea08639e..6ef6505191 100644
--- a/src/webui/src/components/overview/BasicInfo.tsx
+++ b/src/webui/src/components/overview/BasicInfo.tsx
@@ -4,28 +4,28 @@ import { EXPERIMENT } from '../../static/datamodel';
 import { formatTimestamp } from '../../static/function';
 
 export const BasicInfo = (): any => (
-    <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'}
                     calloutProps={{ gapSpace: 0 }}
                     styles={{ root: { display: 'inline-block' } }}
@@ -35,9 +35,9 @@ export const BasicInfo = (): any => (
                 </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>
-);
\ No newline at end of file
+);
diff --git a/src/webui/src/components/overview/Details.tsx b/src/webui/src/components/overview/Details.tsx
index 6925b9963d..65407b7965 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 bf8901248f..6264923aa6 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 dbf1b0e861..4bc5139f0c 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 '@fluentui/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 f9b9921d98..849171bb57 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 023a7f2cb6..67c3ae8908 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,
@@ -92,12 +96,13 @@ 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',
             key: 'status',
             minWidth: 140,
@@ -105,11 +110,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 +123,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 +137,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 a2b3c9279e..dd89dd8fa0 100644
--- a/src/webui/src/components/overview/Title1.tsx
+++ b/src/webui/src/components/overview/Title1.tsx
@@ -5,13 +5,11 @@ import '../../static/style/overviewTitle.scss';
 
 export const Title1 = (): any => (
     <TitleContext.Consumer>
-        {
-            (value): React.ReactNode => (
-                <Stack horizontal className="panelTitle">
-                    <img src={require(`../../static/img/icon/${value.icon}`)} alt="icon" />
-                    <span style={{ color: value.fontColor }}>{value.text}</span>
-                </Stack>
-            )
-        }
+        {(value): React.ReactNode => (
+            <Stack horizontal className='panelTitle'>
+                <img src={require(`../../static/img/icon/${value.icon}`)} alt='icon' />
+                <span style={{ color: value.fontColor }}>{value.text}</span>
+            </Stack>
+        )}
     </TitleContext.Consumer>
-);
\ No newline at end of file
+);
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 7def1a840d..850a01ad1c 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 c45458bdba..b54b24aa5d 100644
--- a/src/webui/src/components/public-child/OpenRow.tsx
+++ b/src/webui/src/components/public-child/OpenRow.tsx
@@ -23,7 +23,6 @@ interface OpenRowState {
 }
 
 class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
-
     constructor(props: OpenRowProps) {
         super(props);
         this.state = {
@@ -35,17 +34,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
@@ -55,83 +54,79 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
         } else {
             this.getCopyStatus('Failed !', 'error');
         }
-    }
+    };
 
     openTrialLog = (type: string): void => {
         window.open(`${MANAGER_IP}/trial-log/${this.props.trialId}/${type}`);
-    }
+    };
 
     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}
-                                    />
-                                    :
-                                    <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 >
+                </Stack>
             </Stack>
         );
     }
diff --git a/src/webui/src/components/public-child/PaiTrialChild.tsx b/src/webui/src/components/public-child/PaiTrialChild.tsx
index c505623b3f..438bc1df22 100644
--- a/src/webui/src/components/public-child/PaiTrialChild.tsx
+++ b/src/webui/src/components/public-child/PaiTrialChild.tsx
@@ -9,41 +9,30 @@ 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 === ''
-                        ?
-                        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 f083e7e750..f522cece57 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]}>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/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 41251ef65e..a733da4fdd 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 { NavLink } from 'react-router-dom';
 
 const OVERVIEWTABS = (
-    <NavLink to={'/oview'} activeClassName="selected" className="common-tabs">
+    <NavLink to={'/oview'} activeClassName='selected' className='common-tabs'>
         Overview
     </NavLink>
 );
 
 const DETAILTABS = (
-    <NavLink to={'/detail'} activeClassName="selected" className="common-tabs">
+    <NavLink to={'/detail'} activeClassName='selected' className='common-tabs'>
         Trials detail
     </NavLink>
 );
 
 const NNILOGO = (
     <NavLink 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 }} />
     </NavLink>
 );
 
-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 982ef96561..3427c0c28d 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'
     }
 };
 
@@ -29,7 +29,7 @@ interface DefaultPointProps {
 
 interface DefaultPointState {
     bestCurveEnabled?: boolean | undefined;
-    startY: number;  // dataZoomY
+    startY: number; // dataZoomY
     endY: number;
 }
 
@@ -45,7 +45,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;
@@ -54,31 +54,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: [
                 {
@@ -92,27 +98,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
         };
     }
 
@@ -124,7 +126,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;
@@ -136,36 +138,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 ba6a6398ed..72dcc94cee 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 ac99f85ea2..31f33207b7 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);
@@ -164,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);
@@ -179,20 +183,24 @@ 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);
                 };
                 assignColors(colorScale);
                 colorDim = k;
             }
-            dimensions.push([k, {
-                type: 'number',
-                yscale: scale
-            }]);
+            dimensions.push([
+                k,
+                {
+                    type: 'number',
+                    yscale: scale
+                }
+            ]);
         }
 
         if (convertedTrials.length === 0 || dimensions.length <= 1) {
@@ -203,13 +211,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();
         }
@@ -228,7 +238,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;
@@ -247,20 +257,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 5beea1b928..47687f7142 100644
--- a/src/webui/src/components/trial-detail/TableList.tsx
+++ b/src/webui/src/components/trial-detail/TableList.tsx
@@ -2,8 +2,20 @@ import React, { lazy } 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 '@fluentui/react';
 import ReactPaginate from 'react-paginate';
 import { LineChart, blocked, copy } from '../buttons/Icon';
@@ -81,7 +93,6 @@ interface TableListState {
 }
 
 class TableList extends React.Component<TableListProps, TableListState> {
-
     public intervalTrialLog = 10;
     public trialId!: string;
 
@@ -129,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',
@@ -151,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 = {
@@ -164,7 +180,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
         maxWidth: 240,
         className: 'tableHead',
         data: 'number',
-        onColumnClick: this.onColumnClick,
+        onColumnClick: this.onColumnClick
     };
 
     IdColumnConfig: any = {
@@ -188,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 = {
@@ -202,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 = {
@@ -216,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 = {
@@ -231,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 = {
@@ -245,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> => {
@@ -273,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') {
@@ -292,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
@@ -329,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 => {
@@ -377,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) {
@@ -423,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
@@ -474,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}
                                     >
@@ -506,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({
@@ -519,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:
@@ -539,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>
                             );
                         }
@@ -547,7 +546,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
             }
         }
         return showColumn;
-    }
+    };
 
     componentDidMount(): void {
         window.addEventListener('resize', this.onWindowResize);
@@ -555,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();
-                });
+                }
+            );
         }
     }
 
@@ -571,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
@@ -688,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={{
@@ -721,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}
@@ -736,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 */}
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 7cba172fce..50e4ec0521 100644
--- a/src/webui/src/index.tsx
+++ b/src/webui/src/index.tsx
@@ -8,21 +8,19 @@ import './index.css';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
-  (
     <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>
+        <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')
+    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 fda4cd89cf..58729f9c3c 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;
@@ -94,7 +94,7 @@ const getFinal = (final?: MetricDataRecord[]): FinalType | undefined => {
     if (final) {
         showDefault = parseMetrics(final[final.length - 1].data);
         if (typeof showDefault === 'number') {
-            if(!isNaNorInfinity(showDefault)){
+            if (!isNaNorInfinity(showDefault)) {
                 return { default: showDefault };
             }
         } else if (isArrayType(showDefault)) {
@@ -121,7 +121,7 @@ const intermediateGraphOption = (intermediateArr: number[], id: string): any =>
             left: 'center',
             textStyle: {
                 fontSize: 16,
-                color: '#333',
+                color: '#333'
             }
         },
         tooltip: {
@@ -137,11 +137,13 @@ const intermediateGraphOption = (intermediateArr: number[], id: string): any =>
             data: intermediateArr,
             scale: true
         },
-        series: [{
-            symbolSize: 6,
-            type: 'scatter',
-            data: intermediateArr
-        }]
+        series: [
+            {
+                symbolSize: 6,
+                type: 'scatter',
+                data: intermediateArr
+            }
+        ]
     };
 };
 
@@ -159,7 +161,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');
@@ -180,7 +182,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';
 };
@@ -197,7 +199,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);
         });
@@ -227,7 +229,10 @@ 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(/\.$/, '');
 }
 
 function formatComplexTypeValue(value: any): string | number {
@@ -239,8 +244,21 @@ function formatComplexTypeValue(value: any): string | number {
 }
 
 export {
-    convertTime, convertDuration, getFinalResult, getFinal, downFile,
-    intermediateGraphOption, killJob, filterByStatus, filterDuration,
-    formatAccuracy, formatTimestamp, metricAccuracy, parseMetrics,
-    isArrayType, requestAxios, isNaNorInfinity, formatComplexTypeValue
+    convertTime,
+    convertDuration,
+    getFinalResult,
+    getFinal,
+    downFile,
+    intermediateGraphOption,
+    killJob,
+    filterByStatus,
+    filterDuration,
+    formatAccuracy,
+    formatTimestamp,
+    metricAccuracy,
+    parseMetrics,
+    isArrayType,
+    requestAxios,
+    isNaNorInfinity,
+    formatComplexTypeValue
 };
diff --git a/src/webui/src/static/interface.ts b/src/webui/src/static/interface.ts
index 734921ead3..400d33eee2 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>;
 }
 
@@ -208,8 +208,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 3d8d088789..e6a2a79887 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 cd1cfede23..443b66e7f0 100644
--- a/src/webui/src/static/model/searchspace.ts
+++ b/src/webui/src/static/model/searchspace.ts
@@ -3,7 +3,7 @@ import { SUPPORTED_SEARCH_SPACE_TYPE } from '../const';
 import { formatComplexTypeValue } from '../function';
 
 function fullNameJoin(prefix: string, name: string): string {
-    return prefix ? (prefix + '/' + name) : name;
+    return prefix ? prefix + '/' + name : name;
 }
 
 class NumericAxis implements SingleAxis {
@@ -86,17 +86,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));
@@ -129,7 +136,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 5aa3854069..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,7 +358,6 @@ class Trial implements TableObj {
                 return this.renderNumber(metricAccuracy(latest));
             }
         }
-
     }
 }
 
diff --git a/src/webui/src/static/model/trialmanager.ts b/src/webui/src/static/model/trialmanager.ts
index ffc0f85f55..4bea34368a 100644
--- a/src/webui/src/static/model/trialmanager.ts
+++ b/src/webui/src/static/model/trialmanager.ts
@@ -11,7 +11,7 @@ function groupMetricsByTrial(metrics: MetricDataRecord[]): Map<string, MetricDat
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             ret.get(metric.trialJobId)!.push(metric);
         } else {
-            ret.set(metric.trialJobId, [ metric ]);
+            ret.set(metric.trialJobId, [metric]);
         }
     }
     return ret;
@@ -91,7 +91,7 @@ class TrialManager {
         if (succeedTrialsList !== undefined && succeedTrialsList[0] !== undefined) {
             return succeedTrialsList[0].finalKeys();
         } else {
-            return ["default"];
+            return ['default'];
         }
     }
 
@@ -109,7 +109,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()) {
@@ -168,7 +168,6 @@ class TrialManager {
     }
 
     private async updateInfo(): Promise<boolean> {
-
         let updated = false;
         requestAxios(`${MANAGER_IP}/trial-jobs`)
             .then(data => {
@@ -235,7 +234,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/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 8c5c24503c..4f0996bdcd 100644
--- a/src/webui/src/static/style/compare.scss
+++ b/src/webui/src/static/style/compare.scss
@@ -1,51 +1,61 @@
-.compare-modal{
+.compare-modal {
     /* decide modal size */
-    .ms-Dialog-main{
+    .ms-Dialog-main {
         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;
         border: 1px solid transparent;
         overflow: auto hidden;
         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/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 3b515ab8e0..58d0769267 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: -13px;
         left: 17px;
@@ -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, .selected:hover{
+
+.common-tabs:visited,
+.selected:hover {
     color: #fff;
     text-decoration: none;
 }
-.common-tabs:hover, .selected{
+
+.common-tabs:hover,
+.selected {
     color: #fff;
     border-bottom: 1px solid #fff;
 }
-.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..b302acea70 100644
--- a/src/webui/src/static/style/search.scss
+++ b/src/webui/src/static/style/search.scss
@@ -1,36 +1,35 @@
 /* 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..14d6712f23 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{
+#succeTable,
+#tableList {
+    .commonTableStyle .leftTitle div {
         text-align: left;
     }
-    .durationsty{
+
+    .durationsty {
         width: 80%;
         margin: 0 auto;
-        div{
+
+        div {
             text-align: right;
             margin-right: 9px;
         }
     }
 }
 
-.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 54f18f2b38..24e97b5c93 100644
--- a/src/webui/src/static/style/trialsDetail.scss
+++ b/src/webui/src/static/style/trialsDetail.scss
@@ -1,67 +1,73 @@
-#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;
             }
         }
 
-        .is-selected::before{
+        .is-selected::before {
             border-bottom: none;
         }
     }
-    
-    .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;
@@ -69,22 +75,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%;
@@ -92,17 +99,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%;
@@ -111,17 +120,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 88bf87df30..c680dc365d 100644
--- a/src/webui/yarn.lock
+++ b/src/webui/yarn.lock
@@ -45,7 +45,11 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+<<<<<<< HEAD
+"@babel/core@>=7.9.0", "@babel/core@^7.1.0", "@babel/core@^7.1.6", "@babel/core@^7.4.5":
+=======
 "@babel/core@^7.1.0", "@babel/core@^7.1.6", "@babel/core@^7.4.5":
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
   version "7.11.6"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.11.6.tgz#3a9455dc7387ff1bac45770650bc13ba04a15651"
   integrity sha512-Wpcv03AGnmkgm6uS6k8iwhIwTrcP0m17TL1n1sy7qD0qelDu4XNeW0dN0mHfa+Gei211yDaLoEe/VlbXQzM4Bg==
@@ -80,6 +84,7 @@
   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==
+<<<<<<< HEAD
   dependencies:
     "@babel/types" "^7.10.4"
 
@@ -104,7 +109,34 @@
   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:
+=======
+  dependencies:
+    "@babel/types" "^7.10.4"
+
+"@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.10.4"
+    "@babel/types" "^7.10.4"
+
+"@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/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-module-imports" "^7.10.4"
+    "@babel/types" "^7.11.5"
+
+"@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:
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
     "@babel/helper-annotate-as-pure" "^7.10.4"
     "@babel/types" "^7.10.4"
 
@@ -1163,6 +1195,78 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-9.0.1.tgz#c27b391d8457d1e893f1eddeaf5e5412d12ffbb5"
   integrity sha512-6It2EVfGskxZCQhuykrfnALg7oVeiI6KclWSmGDqB0AiInVrTGB9Jp9i4/Ad21u9Jde/voVQz6eFX/eSg/UsPA==
 
+<<<<<<< HEAD
+"@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.23"
+    tslib "^1.10.0"
+
+"@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/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:
+    tslib "^1.10.0"
+
+"@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.23"
+    "@uifabric/utilities" "^7.32.2"
+    tslib "^1.10.0"
+
+"@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.23"
+    tslib "^1.10.0"
+
+"@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/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"
+=======
 "@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"
@@ -1225,6 +1329,7 @@
     "@uifabric/merge-styles" "^7.18.0"
     "@uifabric/set-version" "^7.0.22"
     "@uifabric/utilities" "^7.31.0"
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
     tslib "^1.10.0"
 
 "@hapi/address@2.x.x":
@@ -1428,9 +1533,15 @@
     chalk "^4.0.0"
 
 "@microsoft/load-themed-styles@^1.10.26":
+<<<<<<< HEAD
+  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==
+=======
   version "1.10.90"
   resolved "https://registry.yarnpkg.com/@microsoft/load-themed-styles/-/load-themed-styles-1.10.90.tgz#b9bfc10a9bfe3098efefcc3f842991ca6a029dd8"
   integrity sha512-nJaQ6Yij68+GeaSt5ZgK70l5dn2aNGlc9EeES2B054anZTmmBhfaGpciIoSyPZrOg6PSAJjGWTXwd1ovMKOk1w==
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
@@ -1440,10 +1551,49 @@
     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==
+<<<<<<< HEAD
+
+"@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"
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 "@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
   version "4.2.0"
@@ -1868,6 +2018,32 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.30.tgz#44cb52f32a809734ca562e685c6473b5754a7818"
   integrity sha512-sqm9g7mHlPY/43fcSNrCYfOeX9zkTTK+euO5E6+CVijSMm5tTjkVdwdqRkY3ljjIAf8679vps5jKUoJBCLsMDA==
 
+<<<<<<< HEAD
+"@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.11.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.11.1.tgz#56af902ad157e763f9ba63d671c39cda3193c835"
+  integrity sha512-oTQgnd0hblfLsJ6BvJzzSL+Inogp3lq9fGgqRkMB/ziKMgEUaFl801OncOzUmalfzt14N0oPHMK47ipl+wbTIw==
+
+"@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"
+  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/node@*":
   version "14.10.1"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.10.1.tgz#cc323bad8e8a533d4822f45ce4e5326f36e42177"
@@ -1877,6 +2053,7 @@
   version "10.17.32"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.32.tgz#4ef6ff8b842ea0eb3fcbc4331489f4ae64036fa8"
   integrity sha512-EUq+cjH/3KCzQHikGnNbWAGe548IFLSm93Vl8xA7EuYEEATiyOVDyEVuGkowL7c9V69FF/RiZSAOCFPApMs/ig==
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 "@types/prop-types@*":
   version "15.7.3"
@@ -1915,6 +2092,14 @@
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
+<<<<<<< HEAD
+
+"@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==
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 "@types/yargs-parser@*":
   version "15.0.0"
@@ -1925,6 +2110,23 @@
   version "13.0.10"
   resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-13.0.10.tgz#e77bf3fc73c781d48c2eb541f87c453e321e5f4b"
   integrity sha512-MU10TSgzNABgdzKvQVW1nuuT+sgBMWeXNc3XOs5YXV5SDAK+PPja2eUuBNB9iqElu03xyEDqlnGw0jgl4nbqGQ==
+<<<<<<< HEAD
+  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.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:
+=======
   dependencies:
     "@types/yargs-parser" "*"
 
@@ -1940,6 +2142,7 @@
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.34.0.tgz#6f8ce8a46c7dea4a6f1d171d2bb8fbae6dac2be9"
   integrity sha512-4zY3Z88rEE99+CNvTbXSyovv2z9PNOVffTWD2W8QF5s2prBQtwN2zadqERcrHpcR7O/+KMI3fcTAmUUhK/iQcQ==
   dependencies:
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
     "@typescript-eslint/experimental-utils" "2.34.0"
     functional-red-black-tree "^1.0.1"
     regexpp "^3.0.0"
@@ -1978,6 +2181,73 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
+<<<<<<< HEAD
+"@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" "^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@^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.23"
+    "@uifabric/styling" "^7.16.5"
+    tslib "^1.10.0"
+
+"@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.23"
+    tslib "^1.10.0"
+
+"@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:
+    "@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@^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@^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.3.2"
+    "@microsoft/load-themed-styles" "^1.10.26"
+    "@uifabric/merge-styles" "^7.19.1"
+    "@uifabric/set-version" "^7.0.23"
+    "@uifabric/utilities" "^7.32.2"
+    tslib "^1.10.0"
+
+"@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:
+    "@fluentui/dom-utilities" "^1.1.1"
+    "@uifabric/merge-styles" "^7.19.1"
+    "@uifabric/set-version" "^7.0.23"
+=======
 "@uifabric/foundation@^7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@uifabric/foundation/-/foundation-7.9.0.tgz#b7d8333e1c972a22336bfde747fc9f07df24f05c"
@@ -2042,6 +2312,7 @@
   dependencies:
     "@uifabric/merge-styles" "^7.18.0"
     "@uifabric/set-version" "^7.0.22"
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
     prop-types "^15.7.2"
     tslib "^1.10.0"
 
@@ -2244,12 +2515,21 @@ 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==
+<<<<<<< HEAD
+
+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-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==
 
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 acorn@^5.2.1, acorn@^5.5.3:
   version "5.7.4"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.4.tgz#3e8d8a9947d0599a1796d10225d7432f4a4acf5e"
@@ -2296,7 +2576,11 @@ ajv-keywords@^3.1.0:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
   integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
+<<<<<<< HEAD
+ajv@^6.1.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.9.1:
+=======
 ajv@^6.1.0, ajv@^6.10.2, ajv@^6.12.3, ajv@^6.9.1:
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
   version "6.12.5"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.5.tgz#19b0e8bae8f476e5ba666300387775fb1a00a4da"
   integrity sha512-lRF8RORchjpKG50/WFf8xmg7sgCLFiYNNnqdKflk63whMQcWR5ngGjiSXkL9bjxy6B2npOK2HSMN49jEBMSkag==
@@ -2493,6 +2777,11 @@ array-union@^1.0.1:
   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"
@@ -2562,6 +2851,14 @@ 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==
+<<<<<<< HEAD
+
+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==
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 async-each@^1.0.1:
   version "1.0.3"
@@ -2595,7 +2892,11 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+<<<<<<< HEAD
+autoprefixer@^9.4.9, autoprefixer@^9.8.6:
+=======
 autoprefixer@^9.4.9:
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
   version "9.8.6"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
   integrity sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==
@@ -2801,6 +3102,14 @@ 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==
+<<<<<<< HEAD
+
+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==
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 balanced-match@^1.0.0:
   version "1.0.0"
@@ -2973,7 +3282,11 @@ braces@^2.3.1, braces@^2.3.2:
     split-string "^3.0.2"
     to-regex "^3.0.1"
 
+<<<<<<< HEAD
+braces@^3.0.1, braces@~3.0.2:
+=======
 braces@~3.0.2:
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -3068,6 +3381,15 @@ 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:
+<<<<<<< HEAD
+  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.30001131"
+    electron-to-chromium "^1.3.570"
+    escalade "^3.1.0"
+=======
   version "4.14.2"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.2.tgz#1b3cec458a1ba87588cc5e9be62f19b6d48813ce"
   integrity sha512-HI4lPveGKUR0x2StIz+2FXfDk9SfVMrxn6PLh1JeGUwcuoDkdKZebWiyLRJ68iIPDpMI4JLVDf7S7XzslgWOhw==
@@ -3075,6 +3397,7 @@ browserslist@^4.0.0, browserslist@^4.1.1, browserslist@^4.12.0, browserslist@^4.
     caniuse-lite "^1.0.30001125"
     electron-to-chromium "^1.3.564"
     escalade "^3.0.2"
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
     node-releases "^1.1.61"
 
 bser@2.1.1:
@@ -3244,6 +3567,15 @@ camelcase-keys@^2.0.0:
     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"
@@ -3269,10 +3601,17 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
+<<<<<<< HEAD
+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==
+=======
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000939, caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125:
   version "1.0.30001129"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001129.tgz#e6514b94c0ef50f98cf7476daa91228ddd2ef7bc"
   integrity sha512-9945fTVKS810DZITpsAbuhQG7Lam0tEfVbZlsBaCFZaszepbryrArS05PWmJSBQ6mta+v9iz0pUIAbW1eBILIg==
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 capture-exit@^2.0.0:
   version "2.0.0"
@@ -3296,6 +3635,11 @@ caseless@~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"
@@ -3316,7 +3660,11 @@ chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
+<<<<<<< HEAD
+chalk@^4.0.0, chalk@^4.1.0:
+=======
 chalk@^4.0.0:
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.0.tgz#4e14870a618d9e2edd97dd8345fd9d9dc315646a"
   integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
@@ -3324,6 +3672,29 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+<<<<<<< HEAD
+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==
+
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 chardet@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
@@ -3500,6 +3871,13 @@ clone-deep@^2.0.1:
     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"
@@ -3532,6 +3910,11 @@ 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"
@@ -3836,6 +4219,17 @@ cosmiconfig@^5.0.0, cosmiconfig@^5.2.0, cosmiconfig@^5.2.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.4"
   resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e"
@@ -4453,12 +4847,20 @@ 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=
 
-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=
@@ -4652,6 +5054,13 @@ dir-glob@2.0.0:
     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"
@@ -4836,10 +5245,17 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
+<<<<<<< HEAD
+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==
+=======
 electron-to-chromium@^1.3.247, electron-to-chromium@^1.3.564:
   version "1.3.567"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.567.tgz#7a404288952ac990e447a7a86470d460ea953b8f"
   integrity sha512-1aKkw0Hha1Bw9JA5K5PT5eFXC/TXbkJvUfNSNEciPUMgSIsRJZM1hF2GUEAGZpAbgvd8En21EA+Lv820KOhvqA==
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 elliptic@^6.5.3:
   version "6.5.3"
@@ -4859,6 +5275,11 @@ 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"
@@ -4995,10 +5416,17 @@ es6-promisify@^5.0.0:
   dependencies:
     es6-promise "^4.0.3"
 
+<<<<<<< HEAD
+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==
+=======
 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==
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 escape-html@~1.0.3:
   version "1.0.3"
@@ -5022,6 +5450,16 @@ escodegen@^1.11.0, escodegen@^1.9.1:
   optionalDependencies:
     source-map "~0.6.1"
 
+<<<<<<< HEAD
+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"
+
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 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"
@@ -5093,6 +5531,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"
@@ -5310,6 +5755,16 @@ execa@^1.0.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+<<<<<<< HEAD
+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"
+
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -5391,7 +5846,7 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
     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==
@@ -5439,6 +5894,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"
@@ -5451,6 +5911,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"
@@ -5460,6 +5932,21 @@ 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=
+<<<<<<< HEAD
+
+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"
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 faye-websocket@^0.10.0:
   version "0.10.0"
@@ -5594,6 +6081,14 @@ 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"
@@ -5867,6 +6362,19 @@ 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=
+<<<<<<< HEAD
+
+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==
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 get-stream@^3.0.0:
   version "3.0.0"
@@ -5900,7 +6408,11 @@ glob-parent@^3.1.0:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
+<<<<<<< HEAD
+glob-parent@^5.1.0, glob-parent@~5.1.0:
+=======
 glob-parent@~5.1.0:
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
   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==
@@ -5942,7 +6454,7 @@ 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==
@@ -5976,6 +6488,18 @@ 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"
@@ -5987,6 +6511,11 @@ 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.2"
   resolved "https://registry.yarnpkg.com/globule/-/globule-1.3.2.tgz#d8bdd9e9e4eef8f96e245999a5dee7eb5d8529c4"
@@ -5996,6 +6525,13 @@ globule@^1.0.0:
     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"
@@ -6049,6 +6585,11 @@ har-validator@~5.1.3:
     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"
@@ -6234,6 +6775,11 @@ 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"
@@ -6246,7 +6792,7 @@ 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==
@@ -6425,6 +6971,14 @@ 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==
+<<<<<<< HEAD
+
+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==
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 immer@1.10.0:
   version "1.10.0"
@@ -6446,7 +7000,7 @@ import-fresh@^2.0.0:
     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==
@@ -6466,6 +7020,11 @@ 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"
@@ -6474,7 +7033,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=
@@ -6491,6 +7050,11 @@ indent-string@^2.1.0:
   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"
@@ -6509,7 +7073,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==
@@ -6640,6 +7204,24 @@ is-accessor-descriptor@^1.0.0:
   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"
@@ -6674,6 +7256,14 @@ is-buffer@^1.0.2, is-buffer@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
+<<<<<<< HEAD
+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==
+
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 is-callable@^1.1.4, is-callable@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.1.tgz#4d1e21a4f437509d25ce55f8184350771421c96d"
@@ -6731,6 +7321,11 @@ 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"
@@ -6788,6 +7383,14 @@ 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=
 
+<<<<<<< HEAD
+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==
+
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 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"
@@ -6807,6 +7410,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   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"
@@ -6866,6 +7474,16 @@ 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"
@@ -6889,6 +7507,14 @@ 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=
+<<<<<<< HEAD
+
+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==
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 is-resolvable@^1.0.0:
   version "1.1.0"
@@ -6929,7 +7555,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=
@@ -6938,11 +7564,27 @@ 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=
+<<<<<<< HEAD
+
+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==
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 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==
+<<<<<<< HEAD
+
+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==
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 is-wsl@^1.1.0:
   version "1.1.0"
@@ -7667,7 +8309,7 @@ kind-of@^5.0.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==
@@ -7677,6 +8319,14 @@ kleur@^3.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
 
+<<<<<<< HEAD
+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==
+
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 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"
@@ -7894,6 +8544,11 @@ 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"
@@ -7972,6 +8627,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"
@@ -7988,11 +8650,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"
@@ -8001,33 +8658,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"
@@ -8058,10 +8693,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.sortby@^4.7.0:
   version "4.7.0"
@@ -8103,15 +8738,37 @@ lodash.without@~4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.without/-/lodash.without-4.4.0.tgz#3cd4574a00b67bae373a94b748772640507b7aac"
   integrity sha1-PNRXSgC2e643OpS3SHcmQFB7eqw=
 
+<<<<<<< HEAD
+"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"
+=======
 "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.5, lodash@~4.17.10:
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 loglevel@^1.4.1:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.0.tgz#728166855a740d59d38db01cf46f042caa041bb0"
   integrity sha512-i2sY04nal5jDcagM3FMfG++T69GEEM8CYuOfeOIvmXzOIcwE9a/CJPR0MFM97pYMj/u10lzz7/zd7+qwhrBTqQ==
+<<<<<<< HEAD
+
+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==
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 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"
@@ -8213,6 +8870,14 @@ 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=
+<<<<<<< HEAD
+
+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==
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 map-visit@^1.0.0:
   version "1.0.0"
@@ -8221,6 +8886,23 @@ map-visit@^1.0.0:
   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"
@@ -8230,6 +8912,13 @@ md5.js@^1.3.4:
     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"
@@ -8298,6 +8987,23 @@ 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"
@@ -8317,7 +9023,11 @@ merge-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
+<<<<<<< HEAD
+merge2@^1.2.3, merge2@^1.3.0:
+=======
 merge2@^1.2.3:
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
@@ -8351,6 +9061,14 @@ 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"
@@ -8391,6 +9109,14 @@ mimic-fn@^2.0.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
+<<<<<<< HEAD
+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==
+
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 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"
@@ -8425,6 +9151,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"
@@ -8604,10 +9339,17 @@ node-fetch-npm@^2.0.2:
     json-parse-better-errors "^1.0.0"
     safe-buffer "^5.1.1"
 
+<<<<<<< HEAD
+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-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==
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 node-gyp@^3.8.0:
   version "3.8.0"
@@ -8763,6 +9505,14 @@ 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=
+<<<<<<< HEAD
+
+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=
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 normalize-url@^3.0.0:
   version "3.3.0"
@@ -9147,6 +9897,25 @@ obuf@^1.0.0, obuf@^1.1.2:
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
   integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==
 
+<<<<<<< HEAD
+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.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"
+=======
 office-ui-fabric-react@^7.137.1:
   version "7.137.1"
   resolved "https://registry.yarnpkg.com/office-ui-fabric-react/-/office-ui-fabric-react-7.137.1.tgz#58b3c1d2254afb3d7ab1f780cf1fb6929c42fafe"
@@ -9164,6 +9933,7 @@ office-ui-fabric-react@^7.137.1:
     "@uifabric/set-version" "^7.0.22"
     "@uifabric/styling" "^7.16.0"
     "@uifabric/utilities" "^7.31.0"
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
     prop-types "^15.7.2"
     tslib "^1.10.0"
 
@@ -9309,7 +10079,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==
@@ -9330,6 +10100,13 @@ 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"
@@ -9454,6 +10231,18 @@ parse-asn1@^5.0.0, parse-asn1@^5.1.5:
     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"
@@ -9469,6 +10258,19 @@ parse-json@^4.0.0:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
+<<<<<<< HEAD
+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"
+
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 parse5@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
@@ -9511,6 +10313,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"
@@ -9566,6 +10373,11 @@ path-type@^3.0.0:
   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.1.1"
   resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.1.tgz#cb8724b0fada984596856d1a6ebafd3584654b94"
@@ -9582,7 +10394,11 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
+<<<<<<< HEAD
+picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1:
+=======
 picomatch@^2.0.4, picomatch@^2.2.1:
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
@@ -9870,6 +10686,13 @@ postcss-gap-properties@^2.0.0:
   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"
@@ -9895,10 +10718,23 @@ postcss-lab-function@^2.0.1:
     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:
+<<<<<<< HEAD
+  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==
+=======
   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==
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
   dependencies:
     cosmiconfig "^5.0.0"
     import-cwd "^2.0.0"
@@ -9927,6 +10763,11 @@ postcss-media-minmax@^4.0.0:
   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"
@@ -10228,6 +11069,11 @@ postcss-replace-overflow-wrap@^3.0.0:
   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"
@@ -10235,6 +11081,28 @@ postcss-safe-parser@4.0.1:
   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"
@@ -10288,6 +11156,11 @@ postcss-svgo@^4.0.2:
     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"
@@ -10316,10 +11189,17 @@ postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
+<<<<<<< HEAD
+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.34"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.34.tgz#f2baf57c36010df7de4009940f21532c16d65c20"
+  integrity sha512-H/7V2VeNScX9KE83GDrDZNiGT1m2H+UTnlinIzhjlLX9hfMUn1mHNnGeX81a1c8JSBdBvqk7c2ZOG6ZPn5itGw==
+=======
 postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, 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==
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
   dependencies:
     chalk "^2.4.2"
     source-map "^0.6.1"
@@ -10335,6 +11215,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.4.1"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.4.1.tgz#cd89f79bbcef21e3d21eb0da68ffe93f803e884b"
@@ -10567,6 +11459,14 @@ querystringify@^2.1.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
   integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+<<<<<<< HEAD
+
+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==
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 qw@~1.0.1:
   version "1.0.1"
@@ -10728,6 +11628,7 @@ 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==
+<<<<<<< HEAD
   dependencies:
     "@babel/runtime" "^7.1.2"
     history "^4.9.0"
@@ -10744,6 +11645,24 @@ react-router@5.2.0, react-router@^5.2.0:
   dependencies:
     "@babel/runtime" "^7.1.2"
     history "^4.9.0"
+=======
+  dependencies:
+    "@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"
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
     hoist-non-react-statics "^3.1.0"
     loose-envify "^1.3.1"
     mini-create-react-context "^0.4.0"
@@ -10838,6 +11757,15 @@ read-pkg-up@^4.0.0:
     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"
@@ -10874,6 +11802,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"
@@ -10971,6 +11909,17 @@ redent@^1.0.0:
     indent-string "^2.1.0"
     strip-indent "^1.0.1"
 
+<<<<<<< HEAD
+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"
+
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 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"
@@ -11069,6 +12018,60 @@ 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=
+<<<<<<< HEAD
+
+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"
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
@@ -11091,7 +12094,7 @@ repeat-element@^1.1.2:
   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=
@@ -11103,6 +12106,14 @@ repeating@^2.0.0:
   dependencies:
     is-finite "^1.0.0"
 
+<<<<<<< HEAD
+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=
+
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 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"
@@ -11187,6 +12198,14 @@ resolve-from@^4.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
+<<<<<<< HEAD
+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==
+
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 resolve-pathname@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
@@ -11239,6 +12258,11 @@ 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"
@@ -11280,6 +12304,14 @@ run-async@^2.2.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
   integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
+<<<<<<< HEAD
+
+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==
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 run-queue@^1.0.0, run-queue@^1.0.3:
   version "1.0.3"
@@ -11363,6 +12395,7 @@ 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==
+<<<<<<< HEAD
 
 saxes@^3.1.9:
   version "3.1.11"
@@ -11371,6 +12404,16 @@ saxes@^3.1.9:
   dependencies:
     xmlchars "^2.1.1"
 
+=======
+
+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"
+
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 scheduler@^0.19.1:
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
@@ -11402,11 +12445,17 @@ select-hose@^2.0.0:
   integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
 
 selfsigned@^1.9.1:
+<<<<<<< HEAD
+  version "1.10.8"
+  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.8.tgz#0d17208b7d12c33f8eac85c41835f27fc3d81a30"
+  integrity sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==
+=======
   version "1.10.7"
   resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.7.tgz#da5819fd049d5574f28e88a9bcc6dbc6e6f3906b"
   integrity sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
   dependencies:
-    node-forge "0.9.0"
+    node-forge "^0.10.0"
 
 semver-diff@^2.0.0:
   version "2.1.0"
@@ -11616,6 +12665,14 @@ slash@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
   integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
+<<<<<<< HEAD
+
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 slice-ansi@^2.1.0:
   version "2.1.0"
@@ -11626,6 +12683,15 @@ slice-ansi@^2.1.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"
@@ -11800,9 +12866,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"
@@ -11827,6 +12893,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"
@@ -11875,6 +12946,14 @@ 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==
+<<<<<<< HEAD
+
+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==
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 static-extend@^0.1.1:
   version "0.1.2"
@@ -11980,6 +13059,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"
@@ -12015,6 +13103,17 @@ 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"
@@ -12050,6 +13149,13 @@ 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"
@@ -12082,6 +13188,13 @@ strip-indent@^1.0.1:
   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"
@@ -12095,6 +13208,11 @@ style-loader@0.23.1:
     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"
@@ -12104,6 +13222,79 @@ stylehacks@^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.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"
+    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"
@@ -12134,6 +13325,14 @@ svg-parser@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
   integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
+<<<<<<< HEAD
+
+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=
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 svgo@^1.0.0, svgo@^1.2.2:
   version "1.3.2"
@@ -12174,6 +13373,16 @@ table@^5.2.3:
     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"
@@ -12413,6 +13622,29 @@ 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=
+<<<<<<< HEAD
+
+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==
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 "true-case-path@^1.0.2":
   version "1.0.3"
@@ -12462,6 +13694,21 @@ type-check@~0.3.2:
   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"
@@ -12470,6 +13717,13 @@ type-is@~1.6.17, type-is@~1.6.18:
     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"
@@ -12498,6 +13752,14 @@ 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"
@@ -12520,6 +13782,21 @@ unicode-property-aliases-ecmascript@^1.0.4:
   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==
+<<<<<<< HEAD
+
+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"
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 
 union-value@^1.0.0:
   version "1.0.1"
@@ -12562,6 +13839,49 @@ 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"
@@ -12729,6 +14049,11 @@ uuid@^3.0.1, uuid@^3.3.2, uuid@^3.3.3:
   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"
@@ -12768,6 +14093,30 @@ 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"
@@ -13204,6 +14553,16 @@ 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"
@@ -13245,7 +14604,7 @@ xregexp@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==
@@ -13270,6 +14629,11 @@ 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"
@@ -13293,6 +14657,17 @@ yargs-parser@^15.0.1:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
+<<<<<<< HEAD
+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 "^5.0.0"
+    decamelize "^1.2.0"
+
+=======
+>>>>>>> 4668fc088ab66798be6cc998cba24986f8611848
 yargs-parser@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-7.0.0.tgz#8d0ac42f16ea55debd332caf4c4038b3e3f5dfd9"