TableList.tsx 24.2 KB
Newer Older
Lijiaoa's avatar
Lijiaoa committed
1
import React from 'react';
2
import {
3
    DefaultButton,
4
    IColumn,
5
6
7
8
    Icon,
    PrimaryButton,
    Stack,
    StackItem,
9
    TooltipHost,
10
11
    DirectionalHint,
    Checkbox
12
} from '@fluentui/react';
13
import { EXPERIMENT, TRIALS } from '../../static/datamodel';
14
import { TOOLTIP_BACKGROUND_COLOR } from '../../static/const';
15
16
17
import { convertDuration, formatTimestamp, copyAndSort, parametersType } from '../../static/function';
import { TableObj, SortInfo, SearchItems } from '../../static/interface';
import { getTrialsBySearchFilters } from './search/searchFunction';
18
19
20
21
import { blocked, copy, LineChart, tableListIcon } from '../buttons/Icon';
import ChangeColumnComponent from '../modals/ChangeColumnComponent';
import Compare from '../modals/Compare';
import Customize from '../modals/CustomizedTrial';
Lijiaoa's avatar
Lijiaoa committed
22
import TensorboardUI from '../modals/tensorboard/TensorboardUI';
23
import Search from './search/Search';
24
25
26
import KillJob from '../modals/Killjob';
import ExpandableDetails from '../public-child/ExpandableDetails';
import PaginationTable from '../public-child/PaginationTable';
27
import CopyButton from '../public-child/CopyButton';
28
import { Trial } from '../../static/model/trial';
Lijiaoa's avatar
Lijiaoa committed
29
30
31
32
33
34
35
36
37
import '../../static/style/button.scss';
import '../../static/style/logPath.scss';
import '../../static/style/openRow.scss';
import '../../static/style/pagination.scss';
import '../../static/style/search.scss';
import '../../static/style/table.scss';
import '../../static/style/tableStatus.css';
import '../../static/style/tensorboard.scss';
import '../../static/style/overview/overviewTitle.scss';
38

Lijiao's avatar
Lijiao committed
39
40
41
42
require('echarts/lib/chart/line');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

43
type SearchOptionType = 'id' | 'trialnum' | 'status' | 'parameters';
44

45
const defaultDisplayedColumns = ['sequenceId', 'id', 'duration', 'status', 'latestAccuracy'];
Lijiao's avatar
Lijiao committed
46

47
48
49
50
51
52
53
function _inferColumnTitle(columnKey: string): string {
    if (columnKey === 'sequenceId') {
        return 'Trial No.';
    } else if (columnKey === 'id') {
        return 'ID';
    } else if (columnKey === 'intermediateCount') {
        return 'Intermediate results (#)';
54
55
    } else if (columnKey === 'message') {
        return 'Message';
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
    } else if (columnKey.startsWith('space/')) {
        return columnKey.split('/', 2)[1] + ' (space)';
    } else if (columnKey === 'latestAccuracy') {
        return 'Default metric'; // to align with the original design
    } else if (columnKey.startsWith('metric/')) {
        return columnKey.split('/', 2)[1] + ' (metric)';
    } else if (columnKey.startsWith('_')) {
        return columnKey;
    } else {
        // camel case to verbose form
        const withSpace = columnKey.replace(/[A-Z]/g, letter => ` ${letter.toLowerCase()}`);
        return withSpace.charAt(0).toUpperCase() + withSpace.slice(1);
    }
}

interface TableListProps {
    tableSource: TableObj[];
73
    updateDetailPage: () => void;
74
75
}

Lijiao's avatar
Lijiao committed
76
interface TableListState {
77
78
79
80
81
82
83
84
85
86
87
    displayedItems: any[];
    displayedColumns: string[];
    columns: IColumn[];
    searchType: SearchOptionType;
    searchText: string;
    selectedRowIds: string[];
    customizeColumnsDialogVisible: boolean;
    compareDialogVisible: boolean;
    intermediateDialogTrial: TableObj | undefined;
    copiedTrialId: string | undefined;
    sortInfo: SortInfo;
88
89
    searchItems: Array<SearchItems>;
    relation: Map<string, string>;
90
91
}

Lijiao's avatar
Lijiao committed
92
class TableList extends React.Component<TableListProps, TableListState> {
93
    private _expandedTrialIds: Set<string>;
94

Lijiao's avatar
Lijiao committed
95
96
97
98
    constructor(props: TableListProps) {
        super(props);

        this.state = {
99
            displayedItems: [],
100
101
102
103
104
            displayedColumns:
                localStorage.getItem('columns') !== null
                    ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                      JSON.parse(localStorage.getItem('columns')!)
                    : defaultDisplayedColumns,
105
106
107
108
109
110
111
112
            columns: [],
            searchType: 'id',
            searchText: '',
            customizeColumnsDialogVisible: false,
            compareDialogVisible: false,
            selectedRowIds: [],
            intermediateDialogTrial: undefined,
            copiedTrialId: undefined,
113
114
115
            sortInfo: { field: '', isDescend: true },
            searchItems: [],
            relation: parametersType()
Lijiao's avatar
Lijiao committed
116
117
        };

118
119
        this._expandedTrialIds = new Set<string>();
    }
120

121
    /* Table basic function related methods */
Lijiao's avatar
Lijiao committed
122

123
124
125
126
127
128
129
130
131
132
133
134
135
    private _onColumnClick(ev: React.MouseEvent<HTMLElement>, column: IColumn): void {
        // handle the click events on table header (do sorting)
        const { columns } = this.state;
        const newColumns: IColumn[] = columns.slice();
        const currColumn: IColumn = newColumns.filter(currCol => column.key === currCol.key)[0];
        const isSortedDescending = !currColumn.isSortedDescending;
        this.setState(
            {
                sortInfo: { field: column.key, isDescend: isSortedDescending }
            },
            this._updateTableSource
        );
    }
136

137
138
139
140
    private _trialsToTableItems(trials: TableObj[]): any[] {
        // TODO: use search space and metrics space from TRIALS will cause update issues.
        const searchSpace = TRIALS.inferredSearchSpace(EXPERIMENT.searchSpaceNew);
        const metricSpace = TRIALS.inferredMetricSpace();
141
        const { selectedRowIds } = this.state;
142
143
144
145
        const items = trials.map(trial => {
            const ret = {
                sequenceId: trial.sequenceId,
                id: trial.id,
146
                _checked: selectedRowIds.includes(trial.id) ? true : false,
147
148
149
150
                startTime: (trial as Trial).info.startTime, // FIXME: why do we need info here?
                endTime: (trial as Trial).info.endTime,
                duration: trial.duration,
                status: trial.status,
151
                message: (trial as Trial).info.message || '--',
152
153
154
155
156
157
158
159
160
161
162
163
                intermediateCount: trial.intermediates.length,
                _expandDetails: this._expandedTrialIds.has(trial.id) // hidden field names should start with `_`
            };
            for (const [k, v] of trial.parameters(searchSpace)) {
                ret[`space/${k.baseName}`] = v;
            }
            for (const [k, v] of trial.metrics(metricSpace)) {
                ret[`metric/${k.baseName}`] = v;
            }
            ret['latestAccuracy'] = (trial as Trial).latestAccuracy;
            ret['_formattedLatestAccuracy'] = (trial as Trial).formatLatestAccuracy();
            return ret;
164
        });
165

166
167
        const { sortInfo } = this.state;
        if (sortInfo.field !== '') {
168
            return copyAndSort(items, sortInfo.field, sortInfo.isDescend);
169
170
        } else {
            return items;
171
        }
172
    }
173

174
175
176
177
178
179
180
181
182
183
184
185
186
    private selectedTrialOnChangeEvent = (
        id: string,
        _ev?: React.FormEvent<HTMLElement | HTMLInputElement>,
        checked?: boolean
    ): void => {
        const { displayedItems, selectedRowIds } = this.state;
        const items = JSON.parse(JSON.stringify(displayedItems));
        const temp = selectedRowIds;
        if (checked === true) {
            temp.push(id);
        }
        items.forEach(item => {
            if (item.id === id) {
187
                item._checked = !!checked;
188
189
190
191
192
193
194
195
196
            }
        });
        this.setState(() => ({ displayedItems: items, selectedRowIds: temp }));
    };

    private changeSelectTrialIds = (): void => {
        const { displayedItems } = this.state;
        const newDisplayedItems = displayedItems;
        newDisplayedItems.forEach(item => {
197
            item._checked = false;
198
199
200
201
202
203
204
        });
        this.setState(() => ({
            selectedRowIds: [],
            displayedItems: newDisplayedItems
        }));
    };

205
206
    private _buildColumnsFromTableItems(tableItems: any[]): IColumn[] {
        const columns: IColumn[] = [
207
208
209
210
211
212
213
214
215
216
217
218
            // select trial function
            {
                name: '',
                key: '_selected',
                fieldName: 'selected',
                minWidth: 20,
                maxWidth: 20,
                isResizable: true,
                className: 'detail-table',
                onRender: (record): React.ReactNode => (
                    <Checkbox
                        label={undefined}
219
                        checked={record._checked}
220
221
222
223
224
225
                        className='detail-check'
                        onChange={this.selectedTrialOnChangeEvent.bind(this, record.id)}
                    />
                )
            },
            // extra column, for a icon to expand the trial details panel
226
227
228
            {
                key: '_expand',
                name: '',
229
                onRender: (item): any => {
230
231
232
233
                    return (
                        <Icon
                            aria-hidden={true}
                            iconName='ChevronRight'
234
                            className='cursor'
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
                            styles={{
                                root: {
                                    transition: 'all 0.2s',
                                    transform: `rotate(${item._expandDetails ? 90 : 0}deg)`
                                }
                            }}
                            onClick={(event): void => {
                                event.stopPropagation();
                                const newItem: any = { ...item, _expandDetails: !item._expandDetails };
                                if (newItem._expandDetails) {
                                    // preserve to be restored when refreshed
                                    this._expandedTrialIds.add(newItem.id);
                                } else {
                                    this._expandedTrialIds.delete(newItem.id);
                                }
250
251
252
                                const newItems = this.state.displayedItems.map(item =>
                                    item.id === newItem.id ? newItem : item
                                );
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
                                this.setState({
                                    displayedItems: newItems
                                });
                            }}
                            onMouseDown={(e): void => {
                                e.stopPropagation();
                            }}
                            onMouseUp={(e): void => {
                                e.stopPropagation();
                            }}
                        />
                    );
                },
                fieldName: 'expand',
                isResizable: false,
                minWidth: 20,
                maxWidth: 20
270
            }
271
        ];
272

273
274
275
276
277
        // looking at the first row only for now
        for (const k of Object.keys(tableItems[0])) {
            if (k === 'metric/default') {
                // FIXME: default metric is hacked as latestAccuracy currently
                continue;
Lijiao's avatar
Lijiao committed
278
            }
279
280
            const columnTitle = _inferColumnTitle(k);
            // TODO: add blacklist
Lijiaoa's avatar
Lijiaoa committed
281
282
            // 0.85: tableWidth / screen
            const widths = window.innerWidth * 0.85;
283
284
285
286
            columns.push({
                name: columnTitle,
                key: k,
                fieldName: k,
Lijiaoa's avatar
Lijiaoa committed
287
288
                minWidth: widths * 0.12,
                maxWidth: widths * 0.19,
289
290
291
292
293
294
295
296
                isResizable: true,
                onColumnClick: this._onColumnClick.bind(this),
                ...(k === 'status' && {
                    // color status
                    onRender: (record): React.ReactNode => (
                        <span className={`${record.status} commonStyle`}>{record.status}</span>
                    )
                }),
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
                ...(k === 'message' && {
                    onRender: (record): React.ReactNode =>
                        record.message.length > 15 ? (
                            <TooltipHost
                                content={record.message}
                                directionalHint={DirectionalHint.bottomCenter}
                                tooltipProps={{
                                    calloutProps: {
                                        styles: {
                                            beak: { background: TOOLTIP_BACKGROUND_COLOR },
                                            beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
                                            calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
                                        }
                                    }
                                }}
                            >
                                <div>{record.message}</div>
                            </TooltipHost>
                        ) : (
                            <div>{record.message}</div>
                        )
                }),
319
320
321
                ...((k.startsWith('metric/') || k.startsWith('space/')) && {
                    // show tooltip
                    onRender: (record): React.ReactNode => (
322
323
324
325
326
327
328
329
330
331
332
333
334
                        <TooltipHost
                            content={record[k]}
                            directionalHint={DirectionalHint.bottomCenter}
                            tooltipProps={{
                                calloutProps: {
                                    styles: {
                                        beak: { background: TOOLTIP_BACKGROUND_COLOR },
                                        beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
                                        calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
                                    }
                                }
                            }}
                        >
335
336
337
338
339
340
341
                            <div className='ellipsis'>{record[k]}</div>
                        </TooltipHost>
                    )
                }),
                ...(k === 'latestAccuracy' && {
                    // FIXME: this is ad-hoc
                    onRender: (record): React.ReactNode => (
342
343
344
345
346
347
348
349
350
351
352
353
354
                        <TooltipHost
                            content={record._formattedLatestAccuracy}
                            directionalHint={DirectionalHint.bottomCenter}
                            tooltipProps={{
                                calloutProps: {
                                    styles: {
                                        beak: { background: TOOLTIP_BACKGROUND_COLOR },
                                        beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
                                        calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
                                    }
                                }
                            }}
                        >
355
356
357
358
359
360
361
362
363
364
365
                            <div className='ellipsis'>{record._formattedLatestAccuracy}</div>
                        </TooltipHost>
                    )
                }),
                ...(['startTime', 'endTime'].includes(k) && {
                    onRender: (record): React.ReactNode => <span>{formatTimestamp(record[k], '--')}</span>
                }),
                ...(k === 'duration' && {
                    onRender: (record): React.ReactNode => (
                        <span className='durationsty'>{convertDuration(record[k])}</span>
                    )
366
367
368
369
370
371
372
373
                }),
                ...(k === 'id' && {
                    onRender: (record): React.ReactNode => (
                        <Stack horizontal className='idCopy'>
                            <div>{record.id}</div>
                            <CopyButton value={record.id} />
                        </Stack>
                    )
374
375
                })
            });
376
        }
377
378
379
380
381
        // operations column
        columns.push({
            name: 'Operation',
            key: '_operation',
            fieldName: 'operation',
Lijiaoa's avatar
Lijiaoa committed
382
383
            minWidth: 150,
            maxWidth: 160,
384
385
386
387
            isResizable: true,
            className: 'detail-table',
            onRender: this._renderOperationColumn.bind(this)
        });
388

389
390
391
392
393
394
395
396
397
        const { sortInfo } = this.state;
        for (const column of columns) {
            if (column.key === sortInfo.field) {
                column.isSorted = true;
                column.isSortedDescending = sortInfo.isDescend;
            } else {
                column.isSorted = false;
                column.isSortedDescending = true;
            }
398
        }
399
        return columns;
400
    }
401

402
403
    private _updateTableSource(): void {
        // call this method when trials or the computation of trial filter has changed
404
405
406
407
408
        const { searchItems, relation } = this.state;
        let items = this._trialsToTableItems(this.props.tableSource);
        if (searchItems.length > 0) {
            items = getTrialsBySearchFilters(items, searchItems, relation); // use search filter to filter data
        }
409
410
411
412
413
414
415
416
417
418
        if (items.length > 0) {
            const columns = this._buildColumnsFromTableItems(items);
            this.setState({
                displayedItems: items,
                columns: columns
            });
        } else {
            this.setState({
                displayedItems: [],
                columns: []
419
            });
420
        }
421
    }
422

423
    private _updateDisplayedColumns(displayedColumns: string[]): void {
424
        this.setState({
425
            displayedColumns: displayedColumns
426
427
        });
    }
428

429
430
    private _renderOperationColumn(record: any): React.ReactNode {
        const runningTrial: boolean = ['RUNNING', 'UNKNOWN'].includes(record.status) ? false : true;
431
        const disabledAddCustomizedTrial = ['DONE', 'ERROR', 'STOPPED', 'VIEWED'].includes(EXPERIMENT.status);
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
        return (
            <Stack className='detail-button' horizontal>
                <PrimaryButton
                    className='detail-button-operation'
                    title='Intermediate'
                    onClick={(): void => {
                        const { tableSource } = this.props;
                        const trial = tableSource.find(trial => trial.id === record.id) as TableObj;
                        this.setState({ intermediateDialogTrial: trial });
                    }}
                >
                    {LineChart}
                </PrimaryButton>
                {runningTrial ? (
                    <PrimaryButton className='detail-button-operation' disabled={true} title='kill'>
                        {blocked}
                    </PrimaryButton>
                ) : (
                    <KillJob trial={record} />
                )}
                <PrimaryButton
                    className='detail-button-operation'
                    title='Customized trial'
                    onClick={(): void => {
                        this.setState({ copiedTrialId: record.id });
                    }}
                    disabled={disabledAddCustomizedTrial}
                >
                    {copy}
                </PrimaryButton>
            </Stack>
463
        );
464
    }
465

466
467
468
469
470
471
    private changeSearchFilterList = (arr: Array<SearchItems>): void => {
        this.setState(() => ({
            searchItems: arr
        }));
    };

472
473
474
    componentDidUpdate(prevProps: TableListProps): void {
        if (this.props.tableSource !== prevProps.tableSource) {
            this._updateTableSource();
475
        }
476
477
478
479
480
    }

    componentDidMount(): void {
        this._updateTableSource();
    }
481

482
    render(): React.ReactNode {
483
        const {
484
485
486
487
488
489
490
            displayedItems,
            columns,
            customizeColumnsDialogVisible,
            compareDialogVisible,
            displayedColumns,
            selectedRowIds,
            intermediateDialogTrial,
491
492
            copiedTrialId,
            searchItems
493
        } = this.state;
494

Lijiao's avatar
Lijiao committed
495
        return (
496
497
498
499
500
501
            <div id='tableList'>
                <Stack horizontal className='panelTitle' style={{ marginTop: 10 }}>
                    <span style={{ marginRight: 12 }}>{tableListIcon}</span>
                    <span>Trial jobs</span>
                </Stack>
                <Stack horizontal className='allList'>
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
                    <StackItem>
                        <Stack horizontal horizontalAlign='end' className='allList'>
                            <Search
                                searchFilter={searchItems} // search filter list
                                changeSearchFilterList={this.changeSearchFilterList}
                                updatePage={this.props.updateDetailPage}
                            />
                        </Stack>
                    </StackItem>

                    <StackItem styles={{ root: { position: 'absolute', right: '0' } }}>
                        <DefaultButton
                            className='allList-button-gap'
                            text='Add/Remove columns'
                            onClick={(): void => {
                                this.setState({ customizeColumnsDialogVisible: true });
                            }}
                        />
520
521
522
523
524
525
526
                        <DefaultButton
                            text='Compare'
                            className='allList-compare'
                            onClick={(): void => {
                                this.setState({ compareDialogVisible: true });
                            }}
                            disabled={selectedRowIds.length === 0}
527
                        />
528
529
530
531
                        <TensorboardUI
                            selectedRowIds={selectedRowIds}
                            changeSelectTrialIds={this.changeSelectTrialIds}
                        />
532
533
534
535
536
537
                    </StackItem>
                </Stack>
                {columns && displayedItems && (
                    <PaginationTable
                        columns={columns.filter(
                            column =>
538
539
                                displayedColumns.includes(column.key) ||
                                ['_expand', '_operation', '_selected'].includes(column.key)
540
541
542
                        )}
                        items={displayedItems}
                        compact={true}
543
                        selectionMode={0}
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
                        selectionPreservedOnEmptyClick={true}
                        onRenderRow={(props): any => {
                            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                            return <ExpandableDetails detailsProps={props!} isExpand={props!.item._expandDetails} />;
                        }}
                    />
                )}
                {compareDialogVisible && (
                    <Compare
                        title='Compare trials'
                        showDetails={true}
                        trials={this.props.tableSource.filter(trial => selectedRowIds.includes(trial.id))}
                        onHideDialog={(): void => {
                            this.setState({ compareDialogVisible: false });
                        }}
559
                        changeSelectTrialIds={this.changeSelectTrialIds}
560
561
562
563
564
565
566
567
568
569
570
571
572
                    />
                )}
                {intermediateDialogTrial !== undefined && (
                    <Compare
                        title='Intermediate results'
                        showDetails={false}
                        trials={[intermediateDialogTrial]}
                        onHideDialog={(): void => {
                            this.setState({ intermediateDialogTrial: undefined });
                        }}
                    />
                )}
                {customizeColumnsDialogVisible && (
573
                    <ChangeColumnComponent
574
575
576
577
578
579
580
581
                        selectedColumns={displayedColumns}
                        allColumns={columns
                            .filter(column => !column.key.startsWith('_'))
                            .map(column => ({ key: column.key, name: column.name }))}
                        onSelectedChange={this._updateDisplayedColumns.bind(this)}
                        onHideDialog={(): void => {
                            this.setState({ customizeColumnsDialogVisible: false });
                        }}
582
                        whichComponent='table'
583
                    />
584
                )}
585
586
                {/* Clone a trial and customize a set of new parameters */}
                {/* visible is done inside because prompt is needed even when the dialog is closed */}
587
                <Customize
588
589
590
591
592
                    visible={copiedTrialId !== undefined}
                    copyTrialId={copiedTrialId || ''}
                    closeCustomizeModal={(): void => {
                        this.setState({ copiedTrialId: undefined });
                    }}
593
                />
594
            </div>
Lijiao's avatar
Lijiao committed
595
596
597
598
        );
    }
}

599
export default TableList;