DefaultMetricPoint.tsx 6.38 KB
Newer Older
1
import * as React from 'react';
2
import { Toggle, Stack } from '@fluentui/react';
3
import ReactEcharts from 'echarts-for-react';
4
5
import { EXPERIMENT, TRIALS } from '../../static/datamodel';
import { Trial } from '../../static/model/trial';
Lijiao's avatar
Lijiao committed
6
import { TooltipForAccuracy, EventMap } from '../../static/interface';
7
8
9
10
import 'echarts/lib/chart/scatter';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

Lijiao's avatar
Lijiao committed
11
12
13
14
15
16
const EmptyGraph = {
    grid: {
        left: '8%'
    },
    xAxis: {
        name: 'Trial',
17
        type: 'category'
Lijiao's avatar
Lijiao committed
18
19
20
    },
    yAxis: {
        name: 'Default metric',
21
        type: 'value'
Lijiao's avatar
Lijiao committed
22
23
    }
};
24

25
interface DefaultPointProps {
26
    trialIds: string[];
27
28
    chartHeight: number;
    hasBestCurve: boolean;
29
    changeExpandRowIDs: Function;
30
31
32
}

interface DefaultPointState {
33
    bestCurveEnabled?: boolean | undefined;
34
    startY: number; // dataZoomY
Lijiao's avatar
Lijiao committed
35
    endY: number;
36
37
38
39
40
}

class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState> {
    constructor(props: DefaultPointProps) {
        super(props);
Lijiao's avatar
Lijiao committed
41
42
43
        this.state = {
            bestCurveEnabled: false,
            startY: 0, // dataZoomY
44
            endY: 100
Lijiao's avatar
Lijiao committed
45
        };
46
47
    }

48
    loadDefault = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
49
        this.setState({ bestCurveEnabled: checked });
50
    };
51

52
53
54
    metricDataZoom = (e: EventMap): void => {
        if (e.batch !== undefined) {
            this.setState(() => ({
55
56
                startY: e.batch[0].start !== null ? e.batch[0].start : 0,
                endY: e.batch[0].end !== null ? e.batch[0].end : 100
57
58
            }));
        }
59
    };
60

61
62
63
64
65
66
67
    pointClick = (params: any): void => {
        if (window.location.pathname === '/oview') {
            this.props.changeExpandRowIDs(params.data[2], 'chart');
        }
    };

    generateGraphConfig(_maxSequenceId: number): any {
68
69
70
        const { startY, endY } = this.state;
        return {
            grid: {
71
                left: '8%'
72
73
74
75
            },
            tooltip: {
                trigger: 'item',
                enterable: true,
76
                confine: true, // confirm always show tooltip box rather than hidden by background
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
                formatter: (data: TooltipForAccuracy): React.ReactNode => {
                    return (
                        '<div class="tooldetailAccuracy">' +
                        '<div>Trial No.: ' +
                        data.data[0] +
                        '</div>' +
                        '<div>Trial ID: ' +
                        data.data[2] +
                        '</div>' +
                        '<div>Default metric: ' +
                        data.data[1] +
                        '</div>' +
                        '<div>Parameters: <pre>' +
                        JSON.stringify(data.data[3], null, 4) +
                        '</pre></div>' +
                        '</div>'
                    );
                }
95
96
97
98
99
100
101
102
103
104
105
106
107
            },
            dataZoom: [
                {
                    id: 'dataZoomY',
                    type: 'inside',
                    yAxisIndex: [0],
                    filterMode: 'empty',
                    start: startY,
                    end: endY
                }
            ],
            xAxis: {
                name: 'Trial',
108
                type: 'category'
109
110
111
112
            },
            yAxis: {
                name: 'Default metric',
                type: 'value',
113
                scale: true
114
            },
115
            series: undefined
116
117
118
119
        };
    }

    generateScatterSeries(trials: Trial[]): any {
120
        const data = trials.map(trial => [trial.sequenceId, trial.accuracy, trial.id, trial.description.parameters]);
Lijiao's avatar
Lijiao committed
121
122
123
        return {
            symbolSize: 6,
            type: 'scatter',
124
            data
Lijiao's avatar
Lijiao committed
125
126
        };
    }
127
128

    generateBestCurveSeries(trials: Trial[]): any {
Lijiao's avatar
Lijiao committed
129
        let best = trials[0];
130
        const data = [[best.sequenceId, best.accuracy, best.id, best.description.parameters]];
131

Lijiao's avatar
Lijiao committed
132
133
        for (let i = 1; i < trials.length; i++) {
            const trial = trials[i];
134
135
            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
            const delta = trial.accuracy! - best.accuracy!;
136
            const better = EXPERIMENT.optimizeMode === 'minimize' ? delta < 0 : delta > 0;
137
            if (better) {
138
                data.push([trial.sequenceId, trial.accuracy, best.id, trial.description.parameters]);
139
140
                best = trial;
            } else {
141
                data.push([trial.sequenceId, best.accuracy, best.id, trial.description.parameters]);
Lijiao's avatar
Lijiao committed
142
143
            }
        }
144

Lijiao's avatar
Lijiao committed
145
146
147
        return {
            type: 'line',
            lineStyle: { color: '#FF6600' },
148
            data
Lijiao's avatar
Lijiao committed
149
150
151
152
        };
    }

    render(): React.ReactNode {
153
        const { hasBestCurve, chartHeight } = this.props;
154
        const graph = this.generateGraph();
155
        const accNodata = graph === EmptyGraph ? 'No data' : '';
156
        const onEvents = { dataZoom: this.metricDataZoom, click: this.pointClick };
157

158
159
        return (
            <div>
160
161
162
163
164
                {hasBestCurve && (
                    <Stack horizontalAlign='end' className='default-metric'>
                        <Toggle label='Optimization curve' inlineLabel onChange={this.loadDefault} />
                    </Stack>
                )}
165
                <div className='default-metric-graph'>
166
167
168
169
                    <ReactEcharts
                        option={graph}
                        style={{
                            width: '100%',
170
                            height: chartHeight,
171
                            margin: '0 auto'
172
                        }}
173
                        theme='nni_theme'
174
175
176
                        notMerge={true} // update now
                        onEvents={onEvents}
                    />
177
                    <div className='default-metric-noData'>{accNodata}</div>
178
                </div>
179
180
181
            </div>
        );
    }
182

Lijiao's avatar
Lijiao committed
183
    private generateGraph(): any {
184
185
186
187
        const trials = TRIALS.getTrials(this.props.trialIds).filter(trial => trial.sortable);
        if (trials.length === 0) {
            return EmptyGraph;
        }
Lijiao's avatar
Lijiao committed
188
        const graph = this.generateGraphConfig(trials[trials.length - 1].sequenceId);
189
        if (this.state.bestCurveEnabled) {
Lijiao's avatar
Lijiao committed
190
            (graph as any).series = [this.generateBestCurveSeries(trials), this.generateScatterSeries(trials)];
191
        } else {
Lijiao's avatar
Lijiao committed
192
            (graph as any).series = [this.generateScatterSeries(trials)];
193
194
195
196
197
198
        }
        return graph;
    }
}

export default DefaultPoint;