Add Trial No. message in compare modal and add a button to link webui document (#1538)

src/webui/src/components/Modal/Compare.tsx

@@ -107,6 +107,7 @@ class Compare extends React.Component<CompareProps, {}> {
     initColumn = () => {
         const { compareRows } = this.props;
         const idList: Array<string> = [];
+        const sequenceIdList: Array<number> = [];
         const durationList: Array<number> = [];
 
         const parameterList: Array<object> = [];
@@ -117,6 +118,7 @@ class Compare extends React.Component<CompareProps, {}> {
         Object.keys(compareRows).map(item => {
             const temp = compareRows[item];
             idList.push(temp.id);
+            sequenceIdList.push(temp.sequenceId);
             durationList.push(temp.duration);
             parameterList.push(temp.description.parameters);
         });
@@ -124,13 +126,21 @@ class Compare extends React.Component<CompareProps, {}> {
             <table className="compare">
                 <tbody>
                     <tr>
-                        <td />
+                        <td className="column">Id</td>
                         {Object.keys(idList).map(key => {
                             return (
                                 <td className="value idList" key={key}>{idList[key]}</td>
                             );
                         })}
                     </tr>
+                    <tr>
+                        <td className="column">Trial No.</td>
+                        {Object.keys(sequenceIdList).map(key => {
+                            return (
+                                <td className="value idList" key={key}>{sequenceIdList[key]}</td>
+                            );
+                        })}
+                    </tr>
                     <tr>
                         <td className="column">Default metric</td>
                         {Object.keys(compareRows).map(index => {

src/webui/src/components/SlideBar.tsx

@@ -223,6 +223,16 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
                     <span>{DETAILTABS}</span>
                 </Col>
                 <Col span={16} className="desktop-right">
+                    <span>
+                        <Button
+                            className="fresh"
+                            type="ghost"
+                        >
+                            <a target="_blank" href="https://nni.readthedocs.io/en/latest/Tutorial/WebUI.html">
+                                <Icon type="question" /><span>Help</span>
+                            </a>
+                        </Button>
+                    </span>
                     <span>{this.select()}</span>
                     <span>
                         <Dropdown
@@ -238,9 +248,9 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
                                 {
                                     menuVisible
                                         ?
-                                    <Icon type="up" className="margin-icon"/>
+                                        <Icon type="up" className="margin-icon" />
                                         :
-                                    <Icon type="down" className="margin-icon"/>
+                                        <Icon type="down" className="margin-icon" />
                                 }
                             </a>
                         </Dropdown>

src/webui/src/static/style/slideBar.scss

@@ -9,10 +9,11 @@ $drowHoverBgColor: #e2e2e2;
     border: none;
     color: #fff;
     font-size: 16px;
-    padding: 0;
+    padding: 0 8px;
 }
 .fresh:hover{
     color: #fff;
+    background-color: #006cb5;
 }
 
 .dropdown{