[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.
+You may find that these trials will get better or worse at one of intermediate results. In other words, this is an important and relevant intermediate result. 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.
+And then input the range of metrics on this intermedia result. Like below picture, it chooses No. 4 intermediate result and set the range of metrics to 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

@@ -42,7 +42,7 @@ const COLUMN_INDEX = [
         index: 4
     },
     {
-        name: 'Intermeidate count',
+        name: 'Intermediate count',
         index: 5
     },
     {
@@ -57,7 +57,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;