From bf09d0694f4a5ad5035000a6328bbb4f661165a0 Mon Sep 17 00:00:00 2001
From: v-liguo <v-liguo@microsoft.com>
Date: Sun, 4 Aug 2019 16:39:33 +0800
Subject: [PATCH 1/5] Add intermeidte count column to show trial progress

---
 src/webui/src/components/Modal/Compare.tsx    | 14 +--
 .../components/trial-detail/Intermeidate.tsx  | 80 ++++++++---------
 .../src/components/trial-detail/TableList.tsx | 89 +++++++++++--------
 src/webui/src/static/const.ts                 | 17 ++--
 src/webui/src/static/style/compare.scss       | 10 +++
 src/webui/src/static/style/para.scss          | 18 ++--
 src/webui/src/static/style/table.scss         | 44 ++++++++-
 src/webui/src/static/style/trialsDetail.scss  | 11 +++
 8 files changed, 180 insertions(+), 103 deletions(-)

diff --git a/src/webui/src/components/Modal/Compare.tsx b/src/webui/src/components/Modal/Compare.tsx
index ed586f6e22..fe7fc6ec3c 100644
--- a/src/webui/src/components/Modal/Compare.tsx
+++ b/src/webui/src/components/Modal/Compare.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Row, Modal } from 'antd';
 import ReactEcharts from 'echarts-for-react';
-import  IntermediateVal from '../public-child/IntermediateVal';
+import IntermediateVal from '../public-child/IntermediateVal';
 import '../../static/style/compare.scss';
 import { TableObj, Intermedia, TooltipForIntermediate } from 'src/static/interface';
 
@@ -83,7 +83,7 @@ class Compare extends React.Component<CompareProps, {}> {
             },
             xAxis: {
                 type: 'category',
-                name: 'Step',
+                // name: '# Intermeidate',
                 boundaryGap: false,
                 data: xAxis
             },
@@ -137,7 +137,7 @@ class Compare extends React.Component<CompareProps, {}> {
                             const temp = compareRows[index];
                             return (
                                 <td className="value" key={index}>
-                                    <IntermediateVal record={temp}/>
+                                    <IntermediateVal record={temp} />
                                 </td>
                             );
                         })}
@@ -193,10 +193,12 @@ class Compare extends React.Component<CompareProps, {}> {
                 destroyOnClose={true}
                 maskClosable={false}
                 width="90%"
-                // centered={true}
             >
-                <Row>{this.intermediate()}</Row>
-                <Row>{this.initColumn()}</Row>
+                <Row className="compare-intermeidate">
+                    {this.intermediate()}
+                    <Row className="compare-yAxis"># Intermeidate</Row>
+                </Row>
+                <Row className="">{this.initColumn()}</Row>
             </Modal>
         );
     }
diff --git a/src/webui/src/components/trial-detail/Intermeidate.tsx b/src/webui/src/components/trial-detail/Intermeidate.tsx
index 3eba67db4c..ed0f28c824 100644
--- a/src/webui/src/components/trial-detail/Intermeidate.tsx
+++ b/src/webui/src/components/trial-detail/Intermeidate.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Row, Col, Button, Switch } from 'antd';
+import { Row, Button, Switch } from 'antd';
 import { TooltipForIntermediate, TableObj, Intermedia } from '../../static/interface';
 import ReactEcharts from 'echarts-for-react';
 require('echarts/lib/component/tooltip');
@@ -108,7 +108,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                 },
                 xAxis: {
                     type: 'category',
-                    name: 'Step',
+                    // name: '# Intermediate',
                     boundaryGap: false,
                     data: xAxis
                 },
@@ -282,58 +282,52 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
             <div>
                 {/* style in para.scss */}
                 <Row className="meline intermediate">
-                    <Col span={8} />
-                    <Col span={3} className="inter-filter-btn">
-                        {/* filter message */}
-                        <span>Filter</span>
-                        <Switch
-                            defaultChecked={false}
-                            onChange={this.switchTurn}
-                        />
-                    </Col>
+                    {/* filter message */}
+                    <span>Filter</span>
+                    <Switch
+                        defaultChecked={false}
+                        onChange={this.switchTurn}
+                    />
                     {
                         isFilter
                             ?
-                            <div>
-                                <Col span={3}>
-                                    <span>Step</span>
-                                    <input
-                                        placeholder="point"
-                                        ref={input => this.pointInput = input}
-                                        className="strange"
-                                    />
-                                </Col>
-                                <Col className="range" span={10}>
-                                    <span>Intermediate result</span>
-                                    <input
-                                        placeholder="number"
-                                        ref={input => this.minValInput = input}
-                                    />
-                                    <span className="heng">-</span>
-                                    <input
-                                        placeholder="number"
-                                        ref={input => this.maxValInput = input}
-                                    />
-                                    <Button
-                                        type="primary"
-                                        className="changeBtu tableButton"
-                                        onClick={this.filterLines}
-                                        disabled={isLoadconfirmBtn}
-                                    >
-                                        Confirm
-                                    </Button>
-                                </Col>
-                            </div>
+                            <span>
+                                <span className="filter-x"># Intermeidate</span>
+                                <input
+                                    // placeholder="point"
+                                    ref={input => this.pointInput = input}
+                                    className="strange"
+                                />
+                                <span>Metric range</span>
+                                <input
+                                    // placeholder="range"
+                                    ref={input => this.minValInput = input}
+                                />
+                                <span className="heng">-</span>
+                                <input
+                                    // placeholder="range"
+                                    ref={input => this.maxValInput = input}
+                                />
+                                <Button
+                                    type="primary"
+                                    className="changeBtu tableButton"
+                                    onClick={this.filterLines}
+                                    disabled={isLoadconfirmBtn}
+                                >
+                                    Confirm
+                                </Button>
+                            </span>
                             :
-                            <Col />
+                            null
                     }
                 </Row>
-                <Row>
+                <Row className="intermeidate-graph">
                     <ReactEcharts
                         option={interSource}
                         style={{ width: '100%', height: 418, margin: '0 auto' }}
                         notMerge={true} // update now
                     />
+                    <div className="yAxis"># Intermediate</div>
                 </Row>
             </div>
         );
diff --git a/src/webui/src/components/trial-detail/TableList.tsx b/src/webui/src/components/trial-detail/TableList.tsx
index b5c9df1ed7..a82a2241b8 100644
--- a/src/webui/src/components/trial-detail/TableList.tsx
+++ b/src/webui/src/components/trial-detail/TableList.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import axios from 'axios';
 import ReactEcharts from 'echarts-for-react';
-import { Row, Table, Button, Popconfirm, Modal, Checkbox, Select } from 'antd';
+import { Row, Table, Button, Popconfirm, Modal, Checkbox, Select, Icon } from 'antd';
 const Option = Select.Option;
 const CheckboxGroup = Checkbox.Group;
-import { MANAGER_IP, trialJobStatus, COLUMN, COLUMN_INDEX } from '../../static/const';
+import { MANAGER_IP, trialJobStatus, COLUMN, COLUMN_INDEX, COLUMNPro } from '../../static/const';
 import { convertDuration, intermediateGraphOption, killJob } from '../../static/function';
 import { TableObj, TrialJob } from '../../static/interface';
 import OpenRow from '../public-child/OpenRow';
@@ -192,7 +192,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 case 'Status':
                 case 'Operation':
                 case 'Default':
-                case 'Intermediate result':
+                case 'Intermeidate count':
                     break;
                 default:
                     finalKeys.push(checkedValues[m]);
@@ -285,7 +285,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 this.fillSelectedRowsTostate(selected, selectedRows);
             }
         };
-        let showTitle = COLUMN;
+        let showTitle = COLUMNPro;
         let bgColor = '';
         const trialJob: Array<TrialJob> = [];
         const showColumn: Array<object> = [];
@@ -295,13 +295,15 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 if (this._isMounted) {
                     // concat default column and finalkeys
                     const item = Object.keys(temp);
-                    const want: Array<string> = [];
-                    Object.keys(item).map(key => {
-                        if (item[key] !== 'default') {
-                            want.push(item[key]);
-                        }
-                    });
-                    showTitle = COLUMN.concat(want);
+                    if (item.length <= 1) {
+                        const want: Array<string> = [];
+                        Object.keys(item).map(key => {
+                            if (item[key] !== 'default') {
+                                want.push(item[key]);
+                            }
+                        });
+                        showTitle = COLUMNPro.concat(want);
+                    }
                 }
             }
         }
@@ -345,7 +347,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         title: 'Duration',
                         dataIndex: 'duration',
                         key: 'duration',
-                        width: 140,
+                        width: 100,
                         // the sort of number
                         sorter: (a: TableObj, b: TableObj) => (a.duration as number) - (b.duration as number),
                         render: (text: string, record: TableObj) => {
@@ -387,6 +389,19 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         sorter: (a: TableObj, b: TableObj): number => a.status.localeCompare(b.status)
                     });
                     break;
+                case 'Intermeidate count':
+                    showColumn.push({
+                        title: 'Intermediate count',
+                        dataIndex: 'progress',
+                        key: 'progress',
+                        width: 86,
+                        render: (text: string, record: TableObj) => {
+                            return (
+                                <span>{`#${record.description.intermediate.length}`}</span>
+                            );
+                        },
+                    });
+                    break;
                 case 'Default':
                     showColumn.push({
                         title: 'Default metric',
@@ -415,37 +430,37 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         title: 'Operation',
                         dataIndex: 'operation',
                         key: 'operation',
-                        width: 90,
+                        width: 120,
                         render: (text: string, record: TableObj) => {
                             let trialStatus = record.status;
-                            let flagKill = false;
-                            if (trialStatus === 'RUNNING') {
-                                flagKill = true;
-                            } else {
-                                flagKill = false;
-                            }
+                            const flag: boolean = trialStatus === 'RUNNING' ? false : true;
                             return (
-                                flagKill
-                                    ?
-                                    (
-                                        <Popconfirm
-                                            title="Are you sure to cancel this trial?"
-                                            onConfirm={killJob.
-                                                bind(this, record.key, record.id, record.status, updateList)}
-                                        >
-                                            <Button type="primary" className="tableButton">Kill</Button>
-                                        </Popconfirm>
-                                    )
-                                    :
-                                    (
+                                <Row id="detail-button">
+                                    {/* see intermediate result graph */}
+                                    <Button
+                                        type="primary"
+                                        className="common-style"
+                                        onClick={this.showIntermediateModal.bind(this, record.id)}
+                                        title="Intermediate"
+                                    >
+                                        <Icon type="line-chart" />
+                                    </Button>
+                                    {/* kill job */}
+                                    <Popconfirm
+                                        title="Are you sure to cancel this trial?"
+                                        onConfirm={killJob.
+                                            bind(this, record.key, record.id, record.status, updateList)}
+                                    >
                                         <Button
-                                            type="primary"
-                                            className="tableButton"
-                                            disabled={true}
+                                            type="default"
+                                            disabled={flag}
+                                            className="margin-mediate special"
+                                            title="kill"
                                         >
-                                            Kill
+                                            <Icon type="stop" />
                                         </Button>
-                                    )
+                                    </Popconfirm>
+                                </Row>
                             );
                         },
                     });
diff --git a/src/webui/src/static/const.ts b/src/webui/src/static/const.ts
index 790ff47cc9..4318fbb9b2 100644
--- a/src/webui/src/static/const.ts
+++ b/src/webui/src/static/const.ts
@@ -42,20 +42,23 @@ const COLUMN_INDEX = [
         index: 4
     },
     {
-        name: 'Default',
+        name: 'Intermeidate count',
         index: 5
     },
     {
-        name: 'Operation',
-        index: 10000
+        name: 'Default',
+        index: 6
     },
     {
-        name: 'Intermediate result',
-        index: 10001
+        name: 'Operation',
+        index: 10000
     }
 ];
-const COLUMN = ['Trial No.', 'ID', 'Duration', 'Status', 'Default', 'Operation', 'Intermediate result'];
+// defatult selected column
+const COLUMN = ['Trial No.', 'ID', 'Duration', 'Status', 'Default', 'Operation'];
+// all choice column !dictory final
+const COLUMNPro = ['Trial No.', 'ID', 'Duration', 'Intermeidate count', 'Status', 'Default', 'Operation'];
 export {
-    MANAGER_IP, DOWNLOAD_IP, trialJobStatus,
+    MANAGER_IP, DOWNLOAD_IP, trialJobStatus, COLUMNPro,
     CONTROLTYPE, MONACO, COLUMN, COLUMN_INDEX, DRAWEROPTION
 };
diff --git a/src/webui/src/static/style/compare.scss b/src/webui/src/static/style/compare.scss
index 9787d1d122..927b340f78 100644
--- a/src/webui/src/static/style/compare.scss
+++ b/src/webui/src/static/style/compare.scss
@@ -23,3 +23,13 @@
         font-weight: 600;
     }
 }
+
+.compare-intermeidate{
+    position: relative;
+    .compare-yAxis{
+        color: #333;
+        position: absolute;
+        top: 87%;
+        left: 45%;
+    }
+}
diff --git a/src/webui/src/static/style/para.scss b/src/webui/src/static/style/para.scss
index e5f4d775f9..5a7cee7023 100644
--- a/src/webui/src/static/style/para.scss
+++ b/src/webui/src/static/style/para.scss
@@ -27,23 +27,23 @@
 
 /* Intermediate Result Style */
 .intermediate{
+    width: 90%;
+    text-align: right;
    /* border: 1px solid blue; */
     input{
-        width: 80px;
+        width: 64px;
         height: 32px;
         padding-left: 8px;
     }
     .strange{
         margin-top: 2px;
+        margin-right: 15px;
     }
-    .inter-filter-btn{
-        height: 34px;
-        line-height: 34px;
+    .heng{
+        margin-left: 6px;
+        margin-right: 6px;
     }
-    .range{
-        .heng{
-            margin-left: 6px;
-            margin-right: 6px;
-        }
+    .filter-x{
+        margin-left: 15px;
     }
 }
diff --git a/src/webui/src/static/style/table.scss b/src/webui/src/static/style/table.scss
index 264c9abb96..6185ed4859 100644
--- a/src/webui/src/static/style/table.scss
+++ b/src/webui/src/static/style/table.scss
@@ -108,4 +108,46 @@
 .ant-table-thead > tr > th .ant-table-column-sorters::before{
     padding-bottom: 25px;
     border-bottom: 1px solid #e8e8e8;
-}
\ No newline at end of file
+}
+
+.margin-mediate{
+    margin: 0 10px;
+}
+
+#detail-button{
+    .common-style, .common-style:visited, .common-style:focus{
+        height: 26px;
+        border: none;
+        border-radius: 0;
+        background-color: #0078d4;
+    }
+    .common-style:hover{
+        background-color: #106ebe;
+    }
+    .common-style:active{
+        background-color: #005a9e;
+        outline: 0;
+    }
+    .common-style:disabled{
+        background-color: #f4f4f4;
+    }
+    .special, .special:visited, .special:focus{
+        height: 26px;
+        border: none;
+        border-radius: 0;
+        outline: 0;
+        background-color: #f4f4f4;
+        color: #333;
+    }
+    .special:hover{
+        background-color: #eaeaea;
+    }
+    .special:active{
+        background-color: #c8c8c8;
+        outline: 0;
+    }
+    .special:disabled{
+        background-color: #f4f4f4;
+        color: #d9d9d9;
+    }
+} 
diff --git a/src/webui/src/static/style/trialsDetail.scss b/src/webui/src/static/style/trialsDetail.scss
index f9fb544d5e..2b8f75e579 100644
--- a/src/webui/src/static/style/trialsDetail.scss
+++ b/src/webui/src/static/style/trialsDetail.scss
@@ -83,3 +83,14 @@
             }
     }
 }
+
+/* for # intermediate in intermeidate graph*/
+.intermeidate-graph{
+    position: relative;
+    .yAxis{
+        color: #333;
+        position: absolute;
+        left: 45%;
+        top: 86%;
+    }
+}

From 5f9cf815e4bb33f430535655c258c618652b8035 Mon Sep 17 00:00:00 2001
From: v-liguo <v-liguo@microsoft.com>
Date: Sun, 4 Aug 2019 16:43:46 +0800
Subject: [PATCH 2/5] delete unuseful code

---
 src/webui/src/components/Modal/Compare.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webui/src/components/Modal/Compare.tsx b/src/webui/src/components/Modal/Compare.tsx
index fe7fc6ec3c..798feda0db 100644
--- a/src/webui/src/components/Modal/Compare.tsx
+++ b/src/webui/src/components/Modal/Compare.tsx
@@ -198,7 +198,7 @@ class Compare extends React.Component<CompareProps, {}> {
                     {this.intermediate()}
                     <Row className="compare-yAxis"># Intermeidate</Row>
                 </Row>
-                <Row className="">{this.initColumn()}</Row>
+                <Row>{this.initColumn()}</Row>
             </Modal>
         );
     }

From a791d29a4bb8418a9fbd4d0e00e5b93403479da6 Mon Sep 17 00:00:00 2001
From: v-liguo <v-liguo@microsoft.com>
Date: Sun, 4 Aug 2019 17:06:43 +0800
Subject: [PATCH 3/5] update style

---
 src/webui/src/static/style/progress.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/webui/src/static/style/progress.scss b/src/webui/src/static/style/progress.scss
index f832752e28..8a863a0392 100644
--- a/src/webui/src/static/style/progress.scss
+++ b/src/webui/src/static/style/progress.scss
@@ -9,6 +9,7 @@
     }
 
     .probar{
+        width: 95%;
         height: 34px;
         margin-top: 15px;
 

From fc66cd8401f9138a50e9f38cc4d8b68c7e63fef5 Mon Sep 17 00:00:00 2001
From: v-liguo <v-liguo@microsoft.com>
Date: Mon, 5 Aug 2019 10:54:24 +0800
Subject: [PATCH 4/5] rename yAxis metric to Metric in compare modal

---
 src/webui/src/components/Modal/Compare.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webui/src/components/Modal/Compare.tsx b/src/webui/src/components/Modal/Compare.tsx
index 798feda0db..0164d13935 100644
--- a/src/webui/src/components/Modal/Compare.tsx
+++ b/src/webui/src/components/Modal/Compare.tsx
@@ -89,7 +89,7 @@ class Compare extends React.Component<CompareProps, {}> {
             },
             yAxis: {
                 type: 'value',
-                name: 'metric'
+                name: 'Metric'
             },
             series: trialIntermediate
         };

From e32221b6af5320fd1aa14ff4596936e5efd71ae4 Mon Sep 17 00:00:00 2001
From: v-liguo <v-liguo@microsoft.com>
Date: Mon, 5 Aug 2019 14:44:46 +0800
Subject: [PATCH 5/5] fix comments

---
 .../components/trial-detail/Intermeidate.tsx  |  2 +-
 .../src/components/trial-detail/TableList.tsx | 21 +++++++++++--------
 src/webui/src/static/const.ts                 |  2 +-
 src/webui/src/static/style/para.scss          |  2 +-
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/webui/src/components/trial-detail/Intermeidate.tsx b/src/webui/src/components/trial-detail/Intermeidate.tsx
index ed0f28c824..95f02d0816 100644
--- a/src/webui/src/components/trial-detail/Intermeidate.tsx
+++ b/src/webui/src/components/trial-detail/Intermeidate.tsx
@@ -303,7 +303,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                                     // placeholder="range"
                                     ref={input => this.minValInput = input}
                                 />
-                                <span className="heng">-</span>
+                                <span className="hyphen">-</span>
                                 <input
                                     // placeholder="range"
                                     ref={input => this.maxValInput = input}
diff --git a/src/webui/src/components/trial-detail/TableList.tsx b/src/webui/src/components/trial-detail/TableList.tsx
index a82a2241b8..57550d5682 100644
--- a/src/webui/src/components/trial-detail/TableList.tsx
+++ b/src/webui/src/components/trial-detail/TableList.tsx
@@ -5,7 +5,7 @@ import { Row, Table, Button, Popconfirm, Modal, Checkbox, Select, Icon } from 'a
 const Option = Select.Option;
 const CheckboxGroup = Checkbox.Group;
 import { MANAGER_IP, trialJobStatus, COLUMN, COLUMN_INDEX, COLUMNPro } from '../../static/const';
-import { convertDuration, intermediateGraphOption, killJob } from '../../static/function';
+import { convertDuration, intermediateGraphOption, killJob, filterByStatus } from '../../static/function';
 import { TableObj, TrialJob } from '../../static/interface';
 import OpenRow from '../public-child/OpenRow';
 import Compare from '../Modal/Compare';
@@ -180,7 +180,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
 
     // checkbox for coloumn
     selectedColumn = (checkedValues: Array<string>) => {
-        let count = 6;
+        // 7: because have seven common column, "Intermediate count" is not shown by default
+        let count = 7;
         const want: Array<object> = [];
         const finalKeys: Array<string> = [];
         const wantResult: Array<string> = [];
@@ -289,17 +290,19 @@ class TableList extends React.Component<TableListProps, TableListState> {
         let bgColor = '';
         const trialJob: Array<TrialJob> = [];
         const showColumn: Array<object> = [];
-        if (tableSource.length >= 1) {
-            const temp = tableSource[0].acc;
+        // only succeed trials have final keys
+        if (tableSource.filter(filterByStatus).length >= 1) {
+            const temp = tableSource.filter(filterByStatus)[0].acc;
             if (temp !== undefined && typeof temp === 'object') {
                 if (this._isMounted) {
                     // concat default column and finalkeys
                     const item = Object.keys(temp);
-                    if (item.length <= 1) {
+                    // item: ['default', 'other-keys', 'maybe loss']
+                    if (item.length > 1) {
                         const want: Array<string> = [];
-                        Object.keys(item).map(key => {
-                            if (item[key] !== 'default') {
-                                want.push(item[key]);
+                        item.forEach(value => {
+                            if (value !== 'default') {
+                                want.push(value);
                             }
                         });
                         showTitle = COLUMNPro.concat(want);
@@ -433,7 +436,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         width: 120,
                         render: (text: string, record: TableObj) => {
                             let trialStatus = record.status;
-                            const flag: boolean = trialStatus === 'RUNNING' ? false : true;
+                            const flag: boolean = (trialStatus === 'RUNNING') ? false : true;
                             return (
                                 <Row id="detail-button">
                                     {/* see intermediate result graph */}
diff --git a/src/webui/src/static/const.ts b/src/webui/src/static/const.ts
index 4318fbb9b2..963c435276 100644
--- a/src/webui/src/static/const.ts
+++ b/src/webui/src/static/const.ts
@@ -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', 'Intermeidate count', 'Status', 'Default', 'Operation'];
+const COLUMNPro = ['Trial No.', 'ID', 'Duration', 'Status', 'Intermeidate count', 'Default', 'Operation'];
 export {
     MANAGER_IP, DOWNLOAD_IP, trialJobStatus, COLUMNPro,
     CONTROLTYPE, MONACO, COLUMN, COLUMN_INDEX, DRAWEROPTION
diff --git a/src/webui/src/static/style/para.scss b/src/webui/src/static/style/para.scss
index 5a7cee7023..30eddc23e9 100644
--- a/src/webui/src/static/style/para.scss
+++ b/src/webui/src/static/style/para.scss
@@ -39,7 +39,7 @@
         margin-top: 2px;
         margin-right: 15px;
     }
-    .heng{
+    .hyphen{
         margin-left: 6px;
         margin-right: 6px;
     }