[PR to v1.0] Update filter description and fix typo

docs/en_US/Tutorial/WebUI.md

@@ -50,13 +50,11 @@ Click the tab "Intermediate Result" to see the lines graph.
 
 ![](../../img/webui-img/trials_intermeidate.png)
 
-We set a filter function for the intermediate result graph because that the trials may have many intermediate results in the training progress. You need to provide data if you want to use the filter button to see the trend of some trial.
+The trial may have many intermediate results in the training progress. In order to see the trend of some trials more clearly, we set a filtering function for the intermediate result graph.
 
-What data should be written in the first input? Maybe you find an intermediate count those trials became better or worse. In other word, it's an important and concerned intermediate count. Just input it into the first input.
+Maybe you will find that these trials will get better or worse at some intermediate node. In other words, this is an important and relevant intermediate node. To take a closer look at the point here, you need to enter its corresponding abscissa value at #Intermediate.
 
-After selecting the intermeidate count, you should input your focus metric's range on this intermediate count. Yes, it's the min and max value. Like this picture, I choose the intermeidate count is 9 and the metric's range is 60-80.
-
-As a result, I filter these trials that the metric's range is 20-60 on the 13 intermediate count.
+After selecting the value of #Intermediate, you need to enter the range of the Metrics for its ordinate. Like this picture, I choose the #intermediate is 4 and the metric's range is 0.8-1.
 
 ![](../../img/webui-img/filter-intermediate.png)
 ## View trials status

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

@@ -83,7 +83,7 @@ class Compare extends React.Component<CompareProps, {}> {
             },
             xAxis: {
                 type: 'category',
-                // name: '# Intermeidate',
+                // name: '# Intermediate',
                 boundaryGap: false,
                 data: xAxis
             },
@@ -194,9 +194,9 @@ class Compare extends React.Component<CompareProps, {}> {
                 maskClosable={false}
                 width="90%"
             >
-                <Row className="compare-intermeidate">
+                <Row className="compare-intermediate">
                     {this.intermediate()}
-                    <Row className="compare-yAxis"># Intermeidate</Row>
+                    <Row className="compare-yAxis"># Intermediate</Row>
                 </Row>
                 <Row>{this.initColumn()}</Row>
             </Modal>

src/webui/src/components/TrialsDetail.tsx

@@ -9,7 +9,7 @@ import DefaultPoint from './trial-detail/DefaultMetricPoint';
 import Duration from './trial-detail/Duration';
 import Title1 from './overview/Title1';
 import Para from './trial-detail/Para';
-import Intermediate from './trial-detail/Intermeidate';
+import Intermediate from './trial-detail/Intermediate';
 import TableList from './trial-detail/TableList';
 const TabPane = Tabs.TabPane;
 import '../static/style/trialsDetail.scss';

src/webui/src/components/trial-detail/Intermeidate.tsx → src/webui/src/components/trial-detail/Intermediate.tsx

@@ -292,7 +292,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                         isFilter
                             ?
                             <span>
-                                <span className="filter-x"># Intermeidate</span>
+                                <span className="filter-x"># Intermediate</span>
                                 <input
                                     // placeholder="point"
                                     ref={input => this.pointInput = input}
@@ -321,7 +321,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                             null
                     }
                 </Row>
-                <Row className="intermeidate-graph">
+                <Row className="intermediate-graph">
                     <ReactEcharts
                         option={interSource}
                         style={{ width: '100%', height: 418, margin: '0 auto' }}

src/webui/src/components/trial-detail/TableList.tsx

@@ -193,7 +193,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 case 'Status':
                 case 'Operation':
                 case 'Default':
-                case 'Intermeidate count':
+                case 'Intermediate count':
                     break;
                 default:
                     finalKeys.push(checkedValues[m]);
@@ -392,7 +392,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         sorter: (a: TableObj, b: TableObj): number => a.status.localeCompare(b.status)
                     });
                     break;
-                case 'Intermeidate count':
+                case 'Intermediate count':
                     showColumn.push({
                         title: 'Intermediate count',
                         dataIndex: 'progress',

src/webui/src/static/const.ts

@@ -1,4 +1,5 @@
-const MANAGER_IP = `/api/v1/nni`;
+const MANAGER_IP = `http://10.170.69.50:8080/api/v1/nni`;
+// const MANAGER_IP = `/api/v1/nni`;
 const DOWNLOAD_IP = `/logs`;
 const trialJobStatus = [
     'UNKNOWN',
@@ -42,7 +43,7 @@ const COLUMN_INDEX = [
         index: 4
     },
     {
-        name: 'Intermeidate count',
+        name: 'Intermediate count',
         index: 5
     },
     {
@@ -57,7 +58,7 @@ const COLUMN_INDEX = [
 // defatult selected column
 const COLUMN = ['Trial No.', 'ID', 'Duration', 'Status', 'Default', 'Operation'];
 // all choice column !dictory final
-const COLUMNPro = ['Trial No.', 'ID', 'Duration', 'Status', 'Intermeidate count', 'Default', 'Operation'];
+const COLUMNPro = ['Trial No.', 'ID', 'Duration', 'Status', 'Intermediate count', 'Default', 'Operation'];
 export {
     MANAGER_IP, DOWNLOAD_IP, trialJobStatus, COLUMNPro,
     CONTROLTYPE, MONACO, COLUMN, COLUMN_INDEX, DRAWEROPTION

src/webui/src/static/style/compare.scss

@@ -24,7 +24,7 @@
     }
 }
 
-.compare-intermeidate{
+.compare-intermediate{
     position: relative;
     .compare-yAxis{
         color: #333;

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

@@ -84,8 +84,8 @@
     }
 }
 
-/* for # intermediate in intermeidate graph*/
-.intermeidate-graph{
+/* for # intermediate in intermediate graph*/
+.intermediate-graph{
     position: relative;
     .yAxis{
         color: #333;