iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[bugfix] deckgl legend is not interactive (#6365) 

* [bugfix] deckgl legend is not interactive

Somehow when clicking categories in the legend, nothing happened. The
problem seemed to be around the `getDerivedStateFromProps` override
which gets triggered after each render and would alter the state and
reset the categories state to their origin.

Changed the method name to not be an override and just be called once
in the constructor

https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops

* lint
This commit is contained in:
Maxime Beauchemin 2018-11-19 14:02:07 -08:00 committed by GitHub
parent 4c4b6c41a1
commit 8155f4bf30
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
superset/assets/src/visualizations/deckgl/CategoricalDeckGLContainer.jsx
View File

@ -52,8 +52,7 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
*/
constructor(props) {
super(props);
this.state = CategoricalDeckGLContainer.getDerivedStateFromProps(props);
this.state = this.getInitialStateFromProps(props);
this.getLayers = this.getLayers.bind(this);
this.onValuesChange = this.onValuesChange.bind(this);
@ -61,7 +60,17 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
this.toggleCategory = this.toggleCategory.bind(this);
this.showSingleCategory = this.showSingleCategory.bind(this);
}
static getDerivedStateFromProps(props, state) {
onValuesChange(values) {
this.setState({
values: Array.isArray(values)
? values
: [values, values + this.state.getStep(values)],
});
}
onViewportChange(viewport) {
this.setState({ viewport });
}
getInitialStateFromProps(props, state) {
const features = props.payload.data.features || [];
const timestamps = features.map(f => f.__timestamp);
const categories = getCategories(props.formData, features);
@ -106,16 +115,6 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
categories,
};
}
onValuesChange(values) {
this.setState({
values: Array.isArray(values)
? values
: [values, values + this.state.getStep(values)],
});
}
onViewportChange(viewport) {
this.setState({ viewport });
}
getLayers(values) {
const {
getLayer,
@ -171,15 +170,19 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
}
toggleCategory(category) {
const categoryState = this.state.categories[category];
categoryState.enabled = !categoryState.enabled;
const categories = { ...this.state.categories, [category]: categoryState };
const categories = {
...this.state.categories,
[category]: {
...categoryState,
enabled: !categoryState.enabled,
},
};
// if all categories are disabled, enable all -- similar to nvd3
if (Object.values(categories).every(v => !v.enabled)) {
/* eslint-disable no-param-reassign */
Object.values(categories).forEach((v) => { v.enabled = true; });
}
this.setState({ categories });
}
showSingleCategory(category) {