TrialConfigPanel.tsx 3.94 KB
Newer Older
1
import * as React from 'react';
2
import { Stack, Panel, PrimaryButton } from '@fluentui/react';
3
import lodash from 'lodash';
Lijiaoa's avatar
Lijiaoa committed
4
5
6
7
8
9
import MonacoEditor from 'react-monaco-editor';
import { EXPERIMENT } from '@static/datamodel';
import { MONACO } from '@static/const';
import { convertDuration, caclMonacoEditorHeight } from '@static/function';
import { prettyStringify } from '@static/jsonutil';
import '@static/style/logPanel.scss';
10

Lijiaoa's avatar
Lijiaoa committed
11
interface LogPanelProps {
12
    hideConfigPanel: () => void;
13
    panelName: string;
14
15
}

Lijiaoa's avatar
Lijiaoa committed
16
interface LogPanelState {
17
    panelInnerHeight: number;
18
    innerWidth: number;
19
20
}

21
22
23
24
25
26
/**
 * search space
 * config
 * model
 */

Lijiaoa's avatar
Lijiaoa committed
27
28
class TrialConfigPanel extends React.Component<LogPanelProps, LogPanelState> {
    constructor(props: LogPanelProps) {
29
30
31
        super(props);

        this.state = {
32
33
            panelInnerHeight: window.innerHeight,
            innerWidth: window.innerWidth
34
35
36
        };
    }

37
    // use arrow function for change window size met error: this.setState is not a function
Lijiaoa's avatar
Lijiaoa committed
38
    setLogPanelHeight = (): void => {
39
40
        this.setState(() => ({ panelInnerHeight: window.innerHeight, innerWidth: window.innerWidth }));
    };
41
42

    async componentDidMount(): Promise<void> {
Lijiaoa's avatar
Lijiaoa committed
43
        window.addEventListener('resize', this.setLogPanelHeight);
44
45
46
    }

    componentWillUnmount(): void {
Lijiaoa's avatar
Lijiaoa committed
47
        window.removeEventListener('resize', this.setLogPanelHeight);
48
49
50
    }

    render(): React.ReactNode {
51
        const { hideConfigPanel, panelName } = this.props;
52
        const { panelInnerHeight, innerWidth } = this.state;
53
        const monacoEditorHeight = caclMonacoEditorHeight(panelInnerHeight);
54
55
56
57
58
59
60
61
62
63
64
65
66
67
        const blacklist = [
            'id',
            'logDir',
            'startTime',
            'endTime',
            'experimentName',
            'searchSpace',
            'trainingServicePlatform'
        ];
        const filter = (key: string, val: any): any => {
            return blacklist.includes(key) ? undefined : val;
        };
        const profile = lodash.cloneDeep(EXPERIMENT.profile);
        profile.execDuration = convertDuration(profile.execDuration);
68
69
70

        const prettyWidth = innerWidth > 1400 ? 100 : 60;

71
        const showProfile = JSON.stringify(profile, filter, 2);
72
        return (
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
            <Stack>
                <Panel
                    isOpen={true}
                    hasCloseButton={false}
                    isFooterAtBottom={true}
                    isLightDismiss={true}
                    onLightDismissClick={hideConfigPanel}
                >
                    <div className='panel'>
                        {panelName === 'search space' ? (
                            <div>
                                <div className='panelName'>Search space</div>
                                <MonacoEditor
                                    height={monacoEditorHeight}
                                    language='json'
                                    theme='vs-light'
                                    value={prettyStringify(EXPERIMENT.searchSpace, prettyWidth, 2)}
                                    options={MONACO}
                                />
                            </div>
                        ) : (
                            <div className='profile'>
                                <div className='panelName'>Config</div>
                                <MonacoEditor
                                    width='100%'
                                    height={monacoEditorHeight}
                                    language='json'
                                    theme='vs-light'
                                    value={showProfile}
                                    options={MONACO}
                                />
                            </div>
                        )}
                        <PrimaryButton text='Close' className='configClose' onClick={hideConfigPanel} />
                    </div>
                </Panel>
            </Stack>
110
111
112
113
114
        );
    }
}

export default TrialConfigPanel;