This repository was archived by the owner on Jan 3, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.tsx
More file actions
104 lines (89 loc) · 2.8 KB
/
Copy pathindex.tsx
File metadata and controls
104 lines (89 loc) · 2.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
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
/**
* author: Samuel Gratzl
* email: samuel_gratzl@gmx.at
* created: 2016-10-28T11:19:52.797Z
*/
import * as React from 'react';
import merge from 'datavisyn-scatterplot/src/merge';
import Impl, {IScatterplotOptions, IWindow} from 'datavisyn-scatterplot/src';
export {scale, symbol, IScatterplotOptions} from 'datavisyn-scatterplot/src';
export {default as QQPlot, IQQPlotProps} from './qqplot';
export {default as ManhattanPlot} from './ManhattanPlot';
export {default as LocusZoom, ILocusZoomProps} from './LocusZoom';
export {default as GeneExon, IGeneExonViewProps as IGeneExonProps} from './GeneExon';
import {isEqual} from 'lodash';
/**
* all scatterplot options and the data
*/
export interface IScatterplotProps<T> {
data: T[];
selection?: T[];
options?: IScatterplotOptions<T>;
onSelectionChanged?(selection: T[]);
onWindowChanged?(window: IWindow);
}
/**
* scatterplot component wrapping the scatterplot implementation
*/
export default class Scatterplot<T> extends React.Component<IScatterplotProps<T>,{}> {
static propTypes = {
data: React.PropTypes.array.isRequired,
selection: React.PropTypes.any,
options: React.PropTypes.object,
onSelectionChanged: React.PropTypes.func,
onWindowChanged: React.PropTypes.func
};
static defaultProps = {
data: []
};
private plot: Impl<T> = null;
private renderedProps: IScatterplotProps<T> = null;
private parent: HTMLDivElement = null;
constructor(props: IScatterplotProps<T>, context?: any) {
super(props, context);
}
private build() {
this.renderedProps = {
options: merge({}, this.props.options),
data: this.props.data
};
if (this.plot) {
this.parent.innerHTML = ''; //clear
}
this.plot = new Impl(this.renderedProps.data, this.parent, this.renderedProps.options);
this.plot.on(Impl.EVENT_SELECTION_CHANGED, this.onSelectionChanged.bind(this));
if (this.props.onWindowChanged) {
this.plot.on(Impl.EVENT_WINDOW_CHANGED, this.props.onWindowChanged);
}
this.plot.render();
}
//shouldComponentUpdate?(nextProps: IScatterplotProps<T>) {
// return !deepEqual(this.props.selection, nextProps.selection);
//}
private onSelectionChanged() {
//update my state and notify
const s = this.plot.selection;
if (this.props.onSelectionChanged) {
this.props.onSelectionChanged(s);
}
}
componentDidMount() {
this.build();
}
componentDidUpdate() {
if (!this.renderedProps) { // || !isEqual(this.props.options, this.renderedProps.options)) {
this.build();
} else if (!isEqual(this.props.data, this.renderedProps.data)) {
this.build();
} else {
this.plot.selection = this.props.selection;
this.plot.render();
}
}
render() {
return (
<div ref={(div) => this.parent = div}>
</div>
);
}
}