add search space key as table additional column (#1574)

add search space key as table additional column

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

@@ -26,11 +26,12 @@ class Compare extends React.Component<CompareProps, {}> {
         const idsList: Array<string> = [];
         Object.keys(compareRows).map(item => {
             const temp = compareRows[item];
+            const trial = TRIALS.getTrial(temp.id);
             trialIntermediate.push({
                 name: temp.id,
-                data: temp.description.intermediate,
+                data: trial.description.intermediate,
                 type: 'line',
-                hyperPara: temp.description.parameters
+                hyperPara: trial.description.parameters
             });
             idsList.push(temp.id);
         });
@@ -208,7 +209,7 @@ class Compare extends React.Component<CompareProps, {}> {
             >
                 <Row className="compare-intermediate">
                     {this.intermediate()}
-                    <Row className="compare-yAxis"># Intermediate</Row>
+                    <Row className="compare-yAxis"># Intermediate result</Row>
                 </Row>
                 <Row>{this.initColumn()}</Row>
             </Modal>

src/webui/src/components/TrialsDetail.tsx

@@ -117,7 +117,6 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
         const { columnList, changeColumn } = this.props;
         const source = TRIALS.filter(this.state.searchFilter);
         const trialIds = TRIALS.filter(this.state.searchFilter).map(trial => trial.id);
-
         return (
             <div>
                 <div className="trial" id="tabsty">

src/webui/src/components/overview/Progress.tsx

@@ -86,7 +86,7 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
         const percent = (EXPERIMENT.profile.execDuration / EXPERIMENT.profile.params.maxExecDuration) * 100;
         const remaining = convertTime(EXPERIMENT.profile.params.maxExecDuration - EXPERIMENT.profile.execDuration);
         const maxDuration = convertTime(EXPERIMENT.profile.params.maxExecDuration);
-        const maxTrialNum = convertTime(EXPERIMENT.profile.params.maxTrialNum);
+        const maxTrialNum = EXPERIMENT.profile.params.maxTrialNum;
         const execDuration = convertTime(EXPERIMENT.profile.execDuration);
 
         let errorContent;

src/webui/src/components/public-child/OpenRow.tsx

@@ -59,7 +59,6 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
         const { isShowFormatModal, formatStr } = this.state;
         const trialId = this.props.trialId;
         const trial = TRIALS.getTrial(trialId);
-        let isClick = false;
         const trialLink: string = `${MANAGER_IP}/trial-jobs/${trialId}`;
         const logPathRow = trial.info.logPath || 'This trial\'s log path is not available.';
         const multiProgress = trial.info.hyperParameters === undefined ? 0 : trial.info.hyperParameters.length;
@@ -76,7 +75,7 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
                                     <br />
                                     For the entire parameter set, please refer to the following "
                                     <a href={trialLink} target="_blank">{trialLink}</a>".
-                                    <br/>
+                                    <br />
                                     Current Phase: {multiProgress}.
                                 </Row>
                                 :
@@ -87,18 +86,12 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
                                 ?
                                 <Row id="description">
                                     <Row className="bgHyper">
-                                        {
-                                            isClick
-                                                ?
-                                                <pre>{JSON.stringify(trial.info.hyperParameters, null, 4)}</pre>
-                                                :
                                         <JSONTree
                                             hideRoot={true}
                                             shouldExpandNode={() => true}  // default expandNode
                                             getItemString={() => (<span />)}  // remove the {} items
-                                                    data={trial.info.hyperParameters}
+                                            data={trial.description.parameters}
                                         />
-                                        }
                                     </Row>
                                     <Row className="copy">
                                         <Button

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

@@ -124,7 +124,7 @@ function generateScatterSeries(trials: Trial[]) {
     const data = trials.map(trial => [
         trial.sequenceId,
         trial.accuracy,
-        trial.info.hyperParameters,
+        trial.description.parameters,
     ]);
     return {
         symbolSize: 6,

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

@@ -272,7 +272,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                         isFilter
                             ?
                             <span>
-                                <span className="filter-x"># Intermediate</span>
+                                <span className="filter-x"># Intermediate result</span>
                                 <input
                                     // placeholder="point"
                                     ref={input => this.pointInput = input}
@@ -307,7 +307,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
                         style={{ width: '100%', height: 418, margin: '0 auto' }}
                         notMerge={true} // update now
                     />
-                    <div className="yAxis"># Intermediate</div>
+                    <div className="yAxis"># Intermediate result</div>
                 </Row>
             </div>
         );

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

@@ -326,7 +326,7 @@ class Para extends React.Component<ParaProps, ParaState> {
         } else {
             Object.keys(dataSource).map(item => {
                 const trial = dataSource[item];
-                eachTrialParams.push(trial.description.parameters.error || '');
+                eachTrialParams.push(trial.description.parameters || '');
                 // may be a succeed trial hasn't final result
                 // all detail page may be break down if havn't if
                 if (trial.acc !== undefined) {

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

@@ -7,6 +7,7 @@ const Option = Select.Option;
 const CheckboxGroup = Checkbox.Group;
 import { MANAGER_IP, trialJobStatus, COLUMN_INDEX, COLUMNPro } from '../../static/const';
 import { convertDuration, formatTimestamp, intermediateGraphOption, killJob } from '../../static/function';
+import { TRIALS } from '../../static/datamodel';
 import { TableRecord } from '../../static/interface';
 import OpenRow from '../public-child/OpenRow';
 import Compare from '../Modal/Compare';
@@ -159,8 +160,9 @@ class TableList extends React.Component<TableListProps, TableListState> {
 
     // checkbox for coloumn
     selectedColumn = (checkedValues: Array<string>) => {
-        // 7: because have seven common column, "Intermediate count" is hidden by default
-        let count = 7;
+        // 9: because have nine common column, 
+        // [Intermediate count, Start Time, End Time] is hidden by default
+        let count = 9;
         const want: Array<object> = [];
         const finalKeys: Array<string> = [];
         const wantResult: Array<string> = [];
@@ -174,7 +176,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 case 'Status':
                 case 'Operation':
                 case 'Default':
-                case 'Intermediate count':
+                case 'Intermediate result':
                     break;
                 default:
                     finalKeys.push(checkedValues[m]);
@@ -237,7 +239,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
     render() {
         const { pageSize, columnList } = this.props;
         const tableSource: Array<TableRecord> = JSON.parse(JSON.stringify(this.props.tableSource));
-        console.log('rerender table', tableSource);
         const { intermediateOption, modalVisible, isShowColumn,
             selectRows, isShowCompareModal, selectedRowKeys, intermediateOtherKeys } = this.state;
         const rowSelection = {
@@ -248,6 +249,17 @@ class TableList extends React.Component<TableListProps, TableListState> {
         };
         let showTitle = COLUMNPro;
         const showColumn: Array<object> = [];
+
+        // parameter as table column
+        const trialMess = TRIALS.getTrial(tableSource[0].id);
+        const trial = trialMess.description.parameters;
+        const parameterColumn: Array<string> = Object.keys(trial);
+        const parameterStr: Array<string> = [];
+        parameterColumn.forEach(value => {
+            parameterStr.push(`${value} (search space)`);
+        });
+        showTitle = COLUMNPro.concat(parameterStr);
+
         // only succeed trials have final keys
         if (tableSource.filter(record => record.status === 'SUCCEEDED').length >= 1) {
             const temp = tableSource.filter(record => record.status === 'SUCCEEDED')[0].accuracy;
@@ -267,6 +279,11 @@ class TableList extends React.Component<TableListProps, TableListState> {
             }
         }
         for (const item of columnList) {
+            const paraColumn = item.match(/ \(search space\)$/);
+            let cc;
+            if (paraColumn !== null) {
+                cc = paraColumn.input;
+            }
             switch (item) {
                 case 'Trial No.':
                     showColumn.push(SequenceIdColumnConfig);
@@ -286,7 +303,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 case 'Status':
                     showColumn.push(StatusColumnConfig);
                     break;
-                case 'Intermediate count':
+                case 'Intermediate result':
                     showColumn.push(IntermediateCountColumnConfig);
                     break;
                 case 'Default':
@@ -332,27 +349,22 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         },
                     });
                     break;
-
-                case 'Intermediate result':
+                case (cc):
+                    // remove SEARCH_SPACE title
+                    const realItem = item.replace(' (search space)', '');
                     showColumn.push({
-                        title: 'Intermediate result',
-                        dataIndex: 'intermediate',
-                        key: 'intermediate',
-                        width: '16%',
+                        title: realItem,
+                        dataIndex: item,
+                        key: item,
+                        width: '6%',
                         render: (text: string, record: TableRecord) => {
+                            const eachTrial = TRIALS.getTrial(record.id);
                             return (
-                                <Button
-                                    type="primary"
-                                    className="tableButton"
-                                    onClick={this.showIntermediateModal.bind(this, record.id)}
-                                >
-                                    Intermediate
-                                </Button>
+                                <span>{eachTrial.description.parameters[realItem]}</span>
                             );
                         },
                     });
                     break;
-
                 default:
                     // FIXME
                     alert('Unexpected column type');
@@ -369,6 +381,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         expandedRowRender={this.openRow}
                         dataSource={tableSource}
                         className="commonTableStyle"
+                        scroll={{x: 'max-content'}}
                         pagination={pageSize > 0 ? { pageSize } : false}
                     />
                     {/* Intermediate Result Modal */}
@@ -495,7 +508,7 @@ const StatusColumnConfig: ColumnProps<TableRecord> = {
 };
 
 const IntermediateCountColumnConfig: ColumnProps<TableRecord> = {
-    title: 'Intermediate count',
+    title: 'Intermediate result',
     dataIndex: 'intermediateCount',
     width: 86,
     render: (text, record) => (

src/webui/src/static/const.ts

@@ -38,11 +38,11 @@ const COLUMN_INDEX = [
         index: 2
     },
     {
-        name: 'StartTime',
+        name: 'Start Time',
         index: 3
     },
     {
-        name: 'EndTime',
+        name: 'End Time',
         index: 4
     },
     {
@@ -54,7 +54,7 @@ const COLUMN_INDEX = [
         index: 6
     },
     {
-        name: 'Intermediate count',
+        name: 'Intermediate result',
         index: 7
     },
     {
@@ -70,7 +70,7 @@ const COLUMN_INDEX = [
 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 count', 'Default', 'Operation'];
+'Intermediate result', 'Default', 'Operation'];
 export {
     MANAGER_IP, DOWNLOAD_IP, trialJobStatus, COLUMNPro,
     CONTROLTYPE, MONACO, COLUMN, COLUMN_INDEX, DRAWEROPTION,