Para.tsx 13.5 KB
Newer Older
Lijiaoa's avatar
Lijiaoa committed
1
import * as React from 'react';
2
import * as d3 from 'd3';
3
import { Dropdown, IDropdownOption, Stack, DefaultButton } from '@fluentui/react';
4
import ParCoords from 'parcoord-es';
Lijiaoa's avatar
Lijiaoa committed
5
6
7
8
9
10
import { SearchSpace } from '@model/searchspace';
import { filterByStatus } from '@static/function';
import { EXPERIMENT, TRIALS } from '@static/datamodel';
import { TableObj, SingleAxis, MultipleAxes } from '@static/interface';
import ChangeColumnComponent from '../ChangeColumnComponent';

11
import 'parcoord-es/dist/parcoords.css';
Lijiaoa's avatar
Lijiaoa committed
12
13
import '@style/button.scss';
import '@style/experiment/trialdetail/para.scss';
14

Deshui Yu's avatar
Deshui Yu committed
15
interface ParaState {
16
    dimName: string[];
17
    selectedPercent: string;
18
    userSelectOptimizeMode: string;
19
20
    primaryMetricKey: string;
    noChart: boolean;
21
22
23
    customizeColumnsDialogVisible: boolean;
    availableDimensions: string[];
    chosenDimensions: string[];
Deshui Yu's avatar
Deshui Yu committed
24
25
}

26
interface ParaProps {
27
28
    trials: Array<TableObj>;
    searchSpace: SearchSpace;
Lijiao's avatar
Lijiao committed
29
30
}

31
class Para extends React.Component<ParaProps, ParaState> {
32
33
34
    private paraRef = React.createRef<HTMLDivElement>();
    private pcs: any;

35
36
37
    private chartMulineStyle = {
        width: '100%',
        height: 392,
38
39
40
41
42
43
44
        margin: '0 auto'
    };
    private innerChartMargins = {
        top: 32,
        right: 20,
        bottom: 20,
        left: 28
45
46
47
    };

    constructor(props: ParaProps) {
Deshui Yu's avatar
Deshui Yu committed
48
49
50
        super(props);
        this.state = {
            dimName: [],
51
52
            primaryMetricKey: 'default',
            selectedPercent: '1',
53
            userSelectOptimizeMode: EXPERIMENT.optimizeMode || 'maximize',
54
55
56
            noChart: true,
            customizeColumnsDialogVisible: false,
            availableDimensions: [],
57
58
59
60
61
            chosenDimensions:
                localStorage.getItem('paraColumns') !== null
                    ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                      JSON.parse(localStorage.getItem('paraColumns')!)
                    : []
Deshui Yu's avatar
Deshui Yu committed
62
63
        };
    }
64

Deshui Yu's avatar
Deshui Yu committed
65
    // get percent value number
66
67
    percentNum = (event: React.FormEvent<HTMLDivElement>, item?: IDropdownOption): void => {
        if (item !== undefined) {
68
69
            this.setState({ selectedPercent: item.key.toString() }, () => {
                this.renderParallelCoordinates();
70
71
            });
        }
72
    };
Deshui Yu's avatar
Deshui Yu committed
73

74
75
76
77
78
79
80
81
82
    // get user mode number 'max' or 'min'
    updateUserOptimizeMode = (event: React.FormEvent<HTMLDivElement>, item?: IDropdownOption): void => {
        if (item !== undefined) {
            this.setState({ userSelectOptimizeMode: item.key.toString() }, () => {
                this.renderParallelCoordinates();
            });
        }
    };

83
84
85
    // select all final keys
    updateEntries = (event: React.FormEvent<HTMLDivElement>, item: any): void => {
        if (item !== undefined) {
86
87
88
            this.setState({ primaryMetricKey: item.key }, () => {
                this.renderParallelCoordinates();
            });
89
        }
90
    };
91

Lijiao's avatar
Lijiao committed
92
    componentDidMount(): void {
93
        this.renderParallelCoordinates();
94
95
    }

96
    componentDidUpdate(prevProps: ParaProps): void {
97
98
        // FIXME: redundant update
        if (this.props.trials !== prevProps.trials || this.props.searchSpace !== prevProps.searchSpace) {
99
            this.renderParallelCoordinates();
100
101
        }
    }
Deshui Yu's avatar
Deshui Yu committed
102

Lijiao's avatar
Lijiao committed
103
    render(): React.ReactNode {
104
105
106
107
108
109
110
111
        const {
            selectedPercent,
            noChart,
            customizeColumnsDialogVisible,
            availableDimensions,
            chosenDimensions,
            userSelectOptimizeMode
        } = this.state;
112

Deshui Yu's avatar
Deshui Yu committed
113
        return (
114
115
            <div className='parameter'>
                <Stack horizontal className='para-filter' horizontalAlign='end'>
116
117
118
119
120
121
122
                    <DefaultButton
                        text='Add/Remove axes'
                        onClick={(): void => {
                            this.setState({ customizeColumnsDialogVisible: true });
                        }}
                        styles={{ root: { marginRight: 10 } }}
                    />
123
124
125
126
127
128
129
130
131
132
                    <Dropdown
                        selectedKey={userSelectOptimizeMode}
                        onChange={this.updateUserOptimizeMode}
                        options={[
                            { key: 'maximize', text: 'Maximize' },
                            { key: 'minimize', text: 'Minimize' }
                        ]}
                        styles={{ dropdown: { width: 100 } }}
                        className='para-filter-percent'
                    />
133
                    <Dropdown
134
                        selectedKey={selectedPercent}
135
136
                        onChange={this.percentNum}
                        options={[
137
138
139
                            { key: '0.01', text: 'Top 1%' },
                            { key: '0.05', text: 'Top 5%' },
                            { key: '0.2', text: 'Top 20%' },
140
                            { key: '1', text: 'Top 100%' }
141
                        ]}
142
                        styles={{ dropdown: { width: 120 } }}
143
                        className='para-filter-percent'
144
                    />
145
                    {this.finalKeysDropdown()}
146
                </Stack>
147
148
149
150
151
152
153
154
155
156
157
158
159
                {customizeColumnsDialogVisible && availableDimensions.length > 0 && (
                    <ChangeColumnComponent
                        selectedColumns={chosenDimensions}
                        allColumns={availableDimensions.map(dim => ({ key: dim, name: dim }))}
                        onSelectedChange={(selected: string[]): void => {
                            this.setState({ chosenDimensions: selected }, () => {
                                this.renderParallelCoordinates();
                            });
                        }}
                        onHideDialog={(): void => {
                            this.setState({ customizeColumnsDialogVisible: false });
                        }}
                        minSelected={2}
160
                        whichComponent='para'
161
162
                    />
                )}
163
164
                <div className='parcoords' style={this.chartMulineStyle} ref={this.paraRef} />
                {noChart && <div className='nodata'>No data</div>}
165
            </div>
Deshui Yu's avatar
Deshui Yu committed
166
167
        );
    }
168

169
170
    private finalKeysDropdown(): any {
        const { primaryMetricKey } = this.state;
171
172
173
174
175
176
        if (TRIALS.finalKeys().length === 1) {
            return null;
        } else {
            const finalKeysDropdown: any = [];
            TRIALS.finalKeys().forEach(item => {
                finalKeysDropdown.push({
177
178
                    key: item,
                    text: item
179
180
181
182
                });
            });
            return (
                <div>
183
                    <span className='para-filter-text para-filter-middle'>Metrics</span>
184
                    <Dropdown
185
                        selectedKey={primaryMetricKey}
186
187
188
                        options={finalKeysDropdown}
                        onChange={this.updateEntries}
                        styles={{ root: { width: 150, display: 'inline-block' } }}
189
                        className='para-filter-percent'
190
191
192
193
                    />
                </div>
            );
        }
194
    }
195

196
197
198
199
200
201
202
203
204
    /**
     * Render the parallel coordinates. Using trial data as base and leverage
     * information from search space at a best effort basis.
     * @param source Array of trial data
     * @param searchSpace Search space
     */
    private renderParallelCoordinates(): void {
        const { searchSpace } = this.props;
        const percent = parseFloat(this.state.selectedPercent);
205
        const { primaryMetricKey, chosenDimensions, userSelectOptimizeMode } = this.state;
206
207
208
209
210

        const inferredSearchSpace = TRIALS.inferredSearchSpace(searchSpace);
        const inferredMetricSpace = TRIALS.inferredMetricSpace();
        let convertedTrials = this.getTrialsAsObjectList(inferredSearchSpace, inferredMetricSpace);

211
        const dimensions: [string, any][] = [];
212
213
        let colorDim: string | undefined = undefined,
            colorScale: any = undefined;
214
215
        // treat every axis as numeric to fit for brush
        for (const [k, v] of inferredSearchSpace.axes) {
216
217
218
219
220
221
222
            dimensions.push([
                k,
                {
                    type: 'number',
                    yscale: this.convertToD3Scale(v)
                }
            ]);
223
224
225
226
227
        }
        for (const [k, v] of inferredMetricSpace.axes) {
            const scale = this.convertToD3Scale(v);
            if (k === primaryMetricKey && scale !== undefined && scale.interpolate) {
                // set color for primary metrics
228
229
                // `colorScale` is used to produce a color range, while `scale` is to produce a pixel range
                colorScale = this.convertToD3Scale(v, false);
230
                convertedTrials.sort((a, b) => (userSelectOptimizeMode === 'minimize' ? a[k] - b[k] : b[k] - a[k]));
231
232
233
234
235
236
                // filter top trials
                if (percent != 1) {
                    const keptTrialNum = Math.max(Math.ceil(convertedTrials.length * percent), 1);
                    convertedTrials = convertedTrials.slice(0, keptTrialNum);
                    const domain = d3.extent(convertedTrials, item => item[k]);
                    scale.domain([domain[0], domain[1]]);
237
                    colorScale.domain([domain[0], domain[1]]);
238
239
240
241
                    if (colorScale !== undefined) {
                        colorScale.domain(domain);
                    }
                }
242
243
244
                // reverse the converted trials to show the top ones upfront
                convertedTrials.reverse();
                const assignColors = (scale: any): void => {
245
                    scale.range([0, 1]); // fake a range to perform invert
246
247
                    const [scaleMin, scaleMax] = scale.domain();
                    const pivot = scale.invert(0.5);
248
249
                    scale
                        .domain([scaleMin, pivot, scaleMax])
250
251
252
253
254
                        .range(['#90EE90', '#FFC400', '#CA0000'])
                        .interpolate(d3.interpolateHsl);
                };
                assignColors(colorScale);
                colorDim = k;
255
            }
256
257
258
259
260
261
262
            dimensions.push([
                k,
                {
                    type: 'number',
                    yscale: scale
                }
            ]);
263
264
        }

Lijiaoa's avatar
Lijiaoa committed
265
        if (convertedTrials.length === 0 || dimensions.length <= 1) {
266
267
268
269
270
271
272
            return;
        }

        const firstRun = this.pcs === undefined;
        if (firstRun) {
            this.pcs = ParCoords()(this.paraRef.current);
        }
273
274
        this.pcs
            .data(convertedTrials)
275
276
277
278
279
            .dimensions(
                dimensions
                    .filter(([d, _]) => chosenDimensions.length === 0 || chosenDimensions.includes(d))
                    .reduce((obj, entry) => ({ ...obj, [entry[0]]: entry[1] }), {})
            );
280
        if (firstRun) {
281
282
            this.pcs
                .margin(this.innerChartMargins)
283
284
                .alphaOnBrushed(0.2)
                .smoothness(0.1)
285
                .brushMode('1D-axes')
286
287
288
289
290
291
292
293
294
295
                .reorderable()
                .interactive();
        }
        if (colorScale !== undefined) {
            this.pcs.color(d => (colorScale as any)(d[colorDim as any]));
        }
        this.pcs.render();
        if (firstRun) {
            this.setState({ noChart: false });
        }
296
297
298
299
300
301

        // set new available dims
        this.setState({
            availableDimensions: dimensions.map(e => e[0]),
            chosenDimensions: chosenDimensions.length === 0 ? dimensions.map(e => e[0]) : chosenDimensions
        });
302
303
304
305
306
307
308
309
    }

    private getTrialsAsObjectList(inferredSearchSpace: MultipleAxes, inferredMetricSpace: MultipleAxes): {}[] {
        const { trials } = this.props;
        const succeededTrials = trials.filter(filterByStatus);

        return succeededTrials.map(s => {
            const entries = Array.from(s.parameters(inferredSearchSpace).entries());
310
            entries.push(...Array.from(s.metrics(inferredMetricSpace).entries()));
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
            const ret = {};
            for (const [k, v] of entries) {
                ret[k.fullName] = v;
            }
            return ret;
        });
    }

    private getRange(): [number, number] {
        // Documentation is lacking.
        // Reference: https://github.com/syntagmatic/parallel-coordinates/issues/308
        // const range = this.pcs.height() - this.pcs.margin().top - this.pcs.margin().bottom;
        const range = this.chartMulineStyle.height - this.innerChartMargins.top - this.innerChartMargins.bottom;
        return [range, 1];
    }
326

327
328
    private convertToD3Scale(axis: SingleAxis, initRange: boolean = true): any {
        const padLinear = ([x0, x1], k = 0.1): [number, number] => {
329
            const dx = ((x1 - x0) * k) / 2;
330
331
332
333
334
            return [x0 - dx, x1 + dx];
        };
        const padLog = ([x0, x1], k = 0.1): [number, number] => {
            const [y0, y1] = padLinear([Math.log(x0), Math.log(x1)], k);
            return [Math.exp(y0), Math.exp(y1)];
335
        };
336
337
338
339
        let scaleInst: any = undefined;
        if (axis.scale === 'ordinal') {
            if (axis.nested) {
                // TODO: handle nested entries
340
                scaleInst = d3.scalePoint().domain(Array.from(axis.domain.keys())).padding(0.2);
341
            } else {
342
                scaleInst = d3.scalePoint().domain(axis.domain).padding(0.2);
343
344
345
346
347
348
349
350
351
352
353
            }
        } else if (axis.scale === 'log') {
            scaleInst = d3.scaleLog().domain(padLog(axis.domain));
        } else if (axis.scale === 'linear') {
            scaleInst = d3.scaleLinear().domain(padLinear(axis.domain));
        }
        if (initRange) {
            scaleInst = scaleInst.range(this.getRange());
        }
        return scaleInst;
    }
Deshui Yu's avatar
Deshui Yu committed
354
355
}

356
export default Para;