Intermediate.tsx 10.9 KB
Newer Older
1
import * as React from 'react';
2
import { Stack, PrimaryButton, Toggle, IStackTokens } from '@fluentui/react';
Lijiao's avatar
Lijiao committed
3
import { TooltipForIntermediate, TableObj, Intermedia, EventMap } from '../../static/interface';
4
import ReactEcharts from 'echarts-for-react';
5
6
7
8
9
10
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

const stackTokens: IStackTokens = {
    childrenGap: 20
};
11
12

interface IntermediateState {
13
    detailSource: Array<TableObj>;
14
15
16
17
    interSource: object;
    filterSource: Array<TableObj>;
    eachIntermediateNum: number; // trial's intermediate number count
    isLoadconfirmBtn: boolean;
18
    isFilter?: boolean | undefined;
19
    length: number;
20
    clickCounts: number; // user filter intermediate click confirm btn's counts
Lijiao's avatar
Lijiao committed
21
22
    startMediaY: number;
    endMediaY: number;
23
24
25
26
27
28
29
30
}

interface IntermediateProps {
    source: Array<TableObj>;
}

class Intermediate extends React.Component<IntermediateProps, IntermediateState> {
    static intervalMediate = 1;
31
32
33
    public pointInput!: HTMLInputElement | null;
    public minValInput!: HTMLInputElement | null;
    public maxValInput!: HTMLInputElement | null;
34
35
36
37

    constructor(props: IntermediateProps) {
        super(props);
        this.state = {
38
            detailSource: [],
39
40
41
42
            interSource: {},
            filterSource: [],
            eachIntermediateNum: 1,
            isLoadconfirmBtn: false,
43
44
            isFilter: false,
            length: 100000,
Lijiao's avatar
Lijiao committed
45
46
47
            clickCounts: 0,
            startMediaY: 0,
            endMediaY: 100
48
49
50
        };
    }

Lijiao's avatar
Lijiao committed
51
    drawIntermediate = (source: Array<TableObj>): void => {
52
        if (source.length > 0) {
53
54
55
56
            this.setState({
                length: source.length,
                detailSource: source
            });
Lijiao's avatar
Lijiao committed
57
            const { startMediaY, endMediaY } = this.state;
58
59
60
61
62
            const trialIntermediate: Array<Intermedia> = [];
            Object.keys(source).map(item => {
                const temp = source[item];
                trialIntermediate.push({
                    name: temp.id,
63
                    trialNum: temp.sequenceId,
64
65
66
67
68
69
                    data: temp.description.intermediate,
                    type: 'line',
                    hyperPara: temp.description.parameters
                });
            });
            // find max intermediate number
70
71
72
            trialIntermediate.sort((a, b) => {
                return b.data.length - a.data.length;
            });
73
            const legend: string[] = [];
74
75
            // max length
            const length = trialIntermediate[0].data.length;
Lijiao's avatar
Lijiao committed
76
            const xAxis: number[] = [];
77
78
79
80
81
82
83
84
85
86
87
            Object.keys(trialIntermediate).map(item => {
                const temp = trialIntermediate[item];
                legend.push(temp.name);
            });
            for (let i = 1; i <= length; i++) {
                xAxis.push(i);
            }
            const option = {
                tooltip: {
                    trigger: 'item',
                    enterable: true,
88
                    confine: true,
89
                    formatter: function(data: TooltipForIntermediate): React.ReactNode {
90
                        const trialId = data.seriesName;
91
92
                        let parameters = {};
                        let trialNum = 0;
93
94
                        const temp = trialIntermediate.find(key => key.name === trialId);
                        if (temp !== undefined) {
95
96
                            parameters = temp.hyperPara;
                            trialNum = temp.trialNum;
97
                        }
98
99
100
101
102
103
104
105
106
                        return `
                            <div class="tooldetailAccuracy">
                                <div>Trial No.: ${trialNum}</div> 
                                <div>Trial ID: ${trialId}</div>
                                <div>Intermediate: ${data.data}</div>
                                <div>Parameters: <pre>${JSON.stringify(parameters, null, 4)}</pre>
                                </div>
                            </div>
                        `;
107
108
109
110
111
112
113
114
115
                    }
                },
                grid: {
                    left: '5%',
                    top: 40,
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
116
                    // name: '# Intermediate',
117
118
119
120
121
                    boundaryGap: false,
                    data: xAxis
                },
                yAxis: {
                    type: 'value',
122
                    name: 'Metric',
123
                    scale: true
124
                },
Lijiao's avatar
Lijiao committed
125
126
127
128
129
                dataZoom: [
                    {
                        id: 'dataZoomY',
                        type: 'inside',
                        yAxisIndex: [0],
130
                        filterMode: 'none',
Lijiao's avatar
Lijiao committed
131
132
133
134
                        start: startMediaY,
                        end: endMediaY
                    }
                ],
135
136
                series: trialIntermediate
            };
137
138
139
            this.setState({
                interSource: option
            });
140
        } else {
141
142
143
144
145
146
147
148
            const nullData = {
                grid: {
                    left: '5%',
                    top: 40,
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
149
                    boundaryGap: false
150
151
152
                },
                yAxis: {
                    type: 'value',
153
                    name: 'Metric'
154
155
                }
            };
156
            this.setState({ interSource: nullData });
157
        }
158
    };
159
160

    // confirm btn function [filter data]
Lijiao's avatar
Lijiao committed
161
    filterLines = (): void => {
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
        const filterSource: Array<TableObj> = [];
        this.setState({ isLoadconfirmBtn: true }, () => {
            const { source } = this.props;
            // get input value
            const pointVal = this.pointInput !== null ? this.pointInput.value : '';
            const minVal = this.minValInput !== null ? this.minValInput.value : '';
            const maxVal = this.maxValInput !== null ? this.maxValInput.value : '';
            // user not input message
            if (pointVal === '' || minVal === '') {
                alert('Please input filter message');
            } else {
                // user not input max value
                const position = JSON.parse(pointVal);
                const min = JSON.parse(minVal);
                if (maxVal === '') {
                    Object.keys(source).map(item => {
                        const temp = source[item];
                        const val = temp.description.intermediate[position - 1];
                        if (val >= min) {
                            filterSource.push(temp);
                        }
                    });
184
                } else {
185
186
187
188
189
190
191
192
                    const max = JSON.parse(maxVal);
                    Object.keys(source).map(item => {
                        const temp = source[item];
                        const val = temp.description.intermediate[position - 1];
                        if (val >= min && val <= max) {
                            filterSource.push(temp);
                        }
                    });
193
                }
194
195
196
197
198
199
                this.setState({ filterSource: filterSource });
                this.drawIntermediate(filterSource);
            }
            const counts = this.state.clickCounts + 1;
            this.setState({ isLoadconfirmBtn: false, clickCounts: counts });
        });
200
    };
201

202
    switchTurn = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
203
        this.setState({ isFilter: checked });
204
205
206
        if (checked === false) {
            this.drawIntermediate(this.props.source);
        }
207
    };
208

Lijiao's avatar
Lijiao committed
209
    componentDidMount(): void {
210
211
212
213
        const { source } = this.props;
        this.drawIntermediate(source);
    }

214
215
216
    componentDidUpdate(prevProps: IntermediateProps, prevState: any): void {
        if (this.props.source !== prevProps.source || this.state.isFilter !== prevState.isFilter) {
            const { isFilter, filterSource } = this.state;
217
            const { source } = this.props;
218

219
220
221
222
            if (isFilter === true) {
                const pointVal = this.pointInput !== null ? this.pointInput.value : '';
                const minVal = this.minValInput !== null ? this.minValInput.value : '';
                if (pointVal === '' && minVal === '') {
223
                    this.drawIntermediate(source);
224
225
                } else {
                    this.drawIntermediate(filterSource);
226
                }
227
228
            } else {
                this.drawIntermediate(source);
229
230
231
232
            }
        }
    }

Lijiao's avatar
Lijiao committed
233
    render(): React.ReactNode {
234
        const { interSource, isLoadconfirmBtn, isFilter } = this.state;
235
        const IntermediateEvents = { dataZoom: this.intermediateDataZoom };
236

237
238
239
        return (
            <div>
                {/* style in para.scss */}
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
                <Stack horizontal horizontalAlign='end' tokens={stackTokens} className='meline intermediate'>
                    {isFilter ? (
                        <div>
                            <span className='filter-x'># Intermediate result</span>
                            <input
                                // placeholder="point"
                                ref={(input): any => (this.pointInput = input)}
                                className='strange'
                            />
                            <span>Metric range</span>
                            <input
                                // placeholder="range"
                                ref={(input): any => (this.minValInput = input)}
                            />
                            <span className='hyphen'>-</span>
                            <input
                                // placeholder="range"
                                ref={(input): any => (this.maxValInput = input)}
                            />
                            <PrimaryButton text='Confirm' onClick={this.filterLines} disabled={isLoadconfirmBtn} />
                        </div>
                    ) : null}
Lijiao's avatar
Lijiao committed
262
                    {/* filter message */}
263
                    <Stack horizontal className='filter-toggle'>
264
265
266
267
                        <span>Filter</span>
                        <Toggle onChange={this.switchTurn} />
                    </Stack>
                </Stack>
268
                <div className='intermediate-graph graph'>
269
270
                    <ReactEcharts
                        option={interSource}
271
                        style={{ width: '100%', height: 400, margin: '0 auto' }}
272
                        notMerge={true} // update now
Lijiao's avatar
Lijiao committed
273
                        onEvents={IntermediateEvents}
274
                    />
275
                    <div className='xAxis'># Intermediate result</div>
276
                </div>
277
278
279
            </div>
        );
    }
Lijiao's avatar
Lijiao committed
280

Lijiao's avatar
Lijiao committed
281
    private intermediateDataZoom = (e: EventMap): void => {
Lijiao's avatar
Lijiao committed
282
283
        if (e.batch !== undefined) {
            this.setState(() => ({
284
285
                startMediaY: e.batch[0].start !== null ? e.batch[0].start : 0,
                endMediaY: e.batch[0].end !== null ? e.batch[0].end : 100
Lijiao's avatar
Lijiao committed
286
287
            }));
        }
288
    };
289
290
}

v-liguo's avatar
v-liguo committed
291
export default Intermediate;