mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
Merge pull request #1 from apache-superset/upgrade_simple
chore: upgrade to deck.gl 7.x
This commit is contained in:
parent
369021dc3f
commit
6c895c9510
@ -30,7 +30,7 @@
|
||||
"d3-array": "^1.2.4",
|
||||
"d3-color": "^1.2.0",
|
||||
"d3-scale": "^2.1.2",
|
||||
"deck.gl": "^5.3.5",
|
||||
"deck.gl": "7.1.11",
|
||||
"jquery": "^3.4.1",
|
||||
"lodash": "^4.17.15",
|
||||
"mapbox-gl": "^0.53.0",
|
||||
|
@ -42,8 +42,9 @@ const propTypes = {
|
||||
mapStyle: PropTypes.string,
|
||||
mapboxApiAccessToken: PropTypes.string.isRequired,
|
||||
setControlValue: PropTypes.func,
|
||||
onViewportChange: PropTypes.func,
|
||||
onValuesChange: PropTypes.func,
|
||||
width: PropTypes.number.isRequired,
|
||||
height: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
@ -51,23 +52,10 @@ const defaultProps = {
|
||||
disabled: false,
|
||||
mapStyle: 'light',
|
||||
setControlValue: () => {},
|
||||
onViewportChange: () => {},
|
||||
onValuesChange: () => {},
|
||||
};
|
||||
|
||||
export default class AnimatableDeckGLContainer extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.onViewportChange = this.onViewportChange.bind(this);
|
||||
}
|
||||
|
||||
onViewportChange(viewport) {
|
||||
const originalViewport = this.props.disabled
|
||||
? { ...viewport }
|
||||
: { ...viewport, height: viewport.height + PLAYSLIDER_HEIGHT };
|
||||
this.props.onViewportChange(originalViewport);
|
||||
}
|
||||
|
||||
export default class AnimatableDeckGLContainer extends React.PureComponent {
|
||||
render() {
|
||||
const {
|
||||
start,
|
||||
@ -83,24 +71,22 @@ export default class AnimatableDeckGLContainer extends React.Component {
|
||||
setControlValue,
|
||||
mapStyle,
|
||||
mapboxApiAccessToken,
|
||||
height,
|
||||
width,
|
||||
} = this.props;
|
||||
const layers = getLayers(values);
|
||||
|
||||
// leave space for the play slider
|
||||
const modifiedViewport = {
|
||||
...viewport,
|
||||
height: disabled ? viewport.height : viewport.height - PLAYSLIDER_HEIGHT,
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<DeckGLContainer
|
||||
viewport={modifiedViewport}
|
||||
viewport={viewport}
|
||||
layers={layers}
|
||||
setControlValue={setControlValue}
|
||||
mapStyle={mapStyle}
|
||||
mapboxApiAccessToken={mapboxApiAccessToken}
|
||||
onViewportChange={this.onViewportChange}
|
||||
bottomMargin={disabled ? 0 : PLAYSLIDER_HEIGHT}
|
||||
width={width}
|
||||
height={height}
|
||||
/>
|
||||
{!disabled && (
|
||||
<PlaySlider
|
||||
|
@ -74,6 +74,8 @@ const propTypes = {
|
||||
payload: PropTypes.object.isRequired,
|
||||
onAddFilter: PropTypes.func,
|
||||
setTooltip: PropTypes.func,
|
||||
width: PropTypes.number.isRequired,
|
||||
height: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
export default class CategoricalDeckGLContainer extends React.PureComponent {
|
||||
@ -89,7 +91,6 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
|
||||
|
||||
this.getLayers = this.getLayers.bind(this);
|
||||
this.onValuesChange = this.onValuesChange.bind(this);
|
||||
this.onViewportChange = this.onViewportChange.bind(this);
|
||||
this.toggleCategory = this.toggleCategory.bind(this);
|
||||
this.showSingleCategory = this.showSingleCategory.bind(this);
|
||||
}
|
||||
@ -106,10 +107,6 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
|
||||
});
|
||||
}
|
||||
|
||||
onViewportChange(viewport) {
|
||||
this.setState({ viewport });
|
||||
}
|
||||
|
||||
getStateFromProps(props, state) {
|
||||
const features = props.payload.data.features || [];
|
||||
const timestamps = features.map(f => f.__timestamp);
|
||||
@ -239,10 +236,11 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
|
||||
onValuesChange={this.onValuesChange}
|
||||
disabled={this.state.disabled}
|
||||
viewport={this.state.viewport}
|
||||
onViewportChange={this.onViewportChange}
|
||||
mapboxApiAccessToken={this.props.mapboxApiKey}
|
||||
mapStyle={this.props.formData.mapbox_style}
|
||||
setControlValue={this.props.setControlValue}
|
||||
width={this.props.width}
|
||||
height={this.props.height}
|
||||
>
|
||||
<Legend
|
||||
categories={this.state.categories}
|
||||
|
@ -22,13 +22,12 @@
|
||||
*/
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import MapGL from 'react-map-gl';
|
||||
import { StaticMap } from 'react-map-gl';
|
||||
import DeckGL from 'deck.gl';
|
||||
import 'mapbox-gl/dist/mapbox-gl.css';
|
||||
import { isEqual } from 'lodash';
|
||||
import './css/deckgl.css';
|
||||
|
||||
const TICK = 2000; // milliseconds
|
||||
const TICK = 250; // milliseconds
|
||||
|
||||
const propTypes = {
|
||||
viewport: PropTypes.object.isRequired,
|
||||
@ -36,62 +35,47 @@ const propTypes = {
|
||||
setControlValue: PropTypes.func,
|
||||
mapStyle: PropTypes.string,
|
||||
mapboxApiAccessToken: PropTypes.string.isRequired,
|
||||
onViewportChange: PropTypes.func,
|
||||
children: PropTypes.node,
|
||||
bottomMargin: PropTypes.number,
|
||||
width: PropTypes.number.isRequired,
|
||||
height: PropTypes.number.isRequired,
|
||||
};
|
||||
const defaultProps = {
|
||||
mapStyle: 'light',
|
||||
onViewportChange: () => {},
|
||||
setControlValue: () => {},
|
||||
children: null,
|
||||
bottomMargin: 0,
|
||||
};
|
||||
|
||||
export default class DeckGLContainer extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.tick = this.tick.bind(this);
|
||||
this.onViewportChange = this.onViewportChange.bind(this);
|
||||
this.onViewStateChange = this.onViewStateChange.bind(this);
|
||||
// This has to be placed after this.tick is bound to this
|
||||
this.state = {
|
||||
previousViewport: props.viewport,
|
||||
timer: setInterval(this.tick, TICK),
|
||||
viewState: props.viewport,
|
||||
};
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(nextProps, prevState) {
|
||||
if (nextProps.viewport !== prevState.viewport) {
|
||||
return {
|
||||
viewport: { ...nextProps.viewport },
|
||||
previousViewport: prevState.viewport,
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
clearInterval(this.state.timer);
|
||||
}
|
||||
|
||||
onViewportChange(viewport) {
|
||||
const vp = Object.assign({}, viewport);
|
||||
// delete vp.width;
|
||||
// delete vp.height;
|
||||
const newVp = { ...this.state.previousViewport, ...vp };
|
||||
|
||||
// this.setState(() => ({ viewport: newVp }));
|
||||
this.props.onViewportChange(newVp);
|
||||
onViewStateChange({ viewState }) {
|
||||
this.setState({ viewState, lastUpdate: Date.now() });
|
||||
}
|
||||
|
||||
tick() {
|
||||
// Limiting updating viewport controls through Redux at most 1*sec
|
||||
// Deep compare is needed as shallow equality doesn't work here, viewport object
|
||||
// changes id at every change
|
||||
if (this.state && !isEqual(this.state.previousViewport, this.props.viewport)) {
|
||||
// Rate limiting updating viewport controls as it triggers lotsa renders
|
||||
const { lastUpdate } = this.state;
|
||||
if (lastUpdate && Date.now() - lastUpdate > TICK) {
|
||||
const setCV = this.props.setControlValue;
|
||||
const vp = this.props.viewport;
|
||||
if (setCV) {
|
||||
setCV('viewport', vp);
|
||||
setCV('viewport', this.state.viewState);
|
||||
}
|
||||
this.setState(() => ({ previousViewport: this.props.viewport }));
|
||||
this.setState({ lastUpdate: null });
|
||||
}
|
||||
}
|
||||
|
||||
@ -105,17 +89,30 @@ export default class DeckGLContainer extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { viewport } = this.props;
|
||||
const { children, bottomMargin, height, width } = this.props;
|
||||
const { viewState } = this.state;
|
||||
const adjustedHeight = height - bottomMargin;
|
||||
|
||||
const layers = this.layers();
|
||||
|
||||
return (
|
||||
<MapGL
|
||||
{...viewport}
|
||||
mapStyle={this.props.mapStyle}
|
||||
onViewportChange={this.onViewportChange}
|
||||
mapboxApiAccessToken={this.props.mapboxApiAccessToken}
|
||||
<div style={{ position: 'relative', width, height: adjustedHeight }}>
|
||||
<DeckGL
|
||||
width={width}
|
||||
height={adjustedHeight}
|
||||
layers={layers}
|
||||
viewState={viewState}
|
||||
onViewStateChange={this.onViewStateChange}
|
||||
initWebGLParameters
|
||||
controller
|
||||
>
|
||||
<DeckGL {...viewport} layers={this.layers()} initWebGLParameters />
|
||||
</MapGL>
|
||||
<StaticMap
|
||||
mapStyle={this.props.mapStyle}
|
||||
mapboxApiAccessToken={this.props.mapboxApiAccessToken}
|
||||
/>
|
||||
</DeckGL>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -39,6 +39,8 @@ const propTypes = {
|
||||
viewport: PropTypes.object.isRequired,
|
||||
onAddFilter: PropTypes.func,
|
||||
setTooltip: PropTypes.func,
|
||||
width: PropTypes.number.isRequired,
|
||||
height: PropTypes.number.isRequired,
|
||||
};
|
||||
const defaultProps = {
|
||||
onAddFilter() {},
|
||||
@ -81,7 +83,7 @@ export function createDeckGLComponent(getLayer, getPoints) {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { formData, payload, setControlValue } = this.props;
|
||||
const { formData, payload, setControlValue, height, width } = this.props;
|
||||
const { layer, viewport } = this.state;
|
||||
|
||||
return (
|
||||
@ -92,6 +94,8 @@ export function createDeckGLComponent(getLayer, getPoints) {
|
||||
mapStyle={formData.mapbox_style}
|
||||
setControlValue={setControlValue}
|
||||
onViewportChange={this.onViewportChange}
|
||||
width={width}
|
||||
height={height}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -104,7 +108,16 @@ export function createDeckGLComponent(getLayer, getPoints) {
|
||||
|
||||
export function createCategoricalDeckGLComponent(getLayer, getPoints) {
|
||||
function Component(props) {
|
||||
const { formData, payload, setControlValue, onAddFilter, setTooltip, viewport } = props;
|
||||
const {
|
||||
formData,
|
||||
payload,
|
||||
setControlValue,
|
||||
onAddFilter,
|
||||
setTooltip,
|
||||
viewport,
|
||||
width,
|
||||
height,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<CategoricalDeckGLContainer
|
||||
@ -117,6 +130,8 @@ export function createCategoricalDeckGLComponent(getLayer, getPoints) {
|
||||
onAddFilter={onAddFilter}
|
||||
setTooltip={setTooltip}
|
||||
getPoints={getPoints}
|
||||
width={width}
|
||||
height={height}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
@ -32,7 +32,7 @@ function setTooltipContent(o) {
|
||||
<div className="deckgl-tooltip">
|
||||
<TooltipRow
|
||||
label={`${t('Longitude and Latitude')}: `}
|
||||
value={`${o.object.position[0]}, ${o.object.position[1]}`}
|
||||
value={`${o.coordinate[0]}, ${o.coordinate[1]}`}
|
||||
/>
|
||||
<TooltipRow label={`${t('Height')}: `} value={`${o.object.elevationValue}`} />
|
||||
</div>
|
||||
|
@ -32,7 +32,7 @@ function setTooltipContent(o) {
|
||||
<div className="deckgl-tooltip">
|
||||
<TooltipRow
|
||||
label={`${t('Centroid (Longitude and Latitude)')}: `}
|
||||
value={`(${o.object.centroid[0]}, ${o.object.centroid[1]})`}
|
||||
value={`(${o.coordinate[0]}, ${o.coordinate[1]})`}
|
||||
/>
|
||||
<TooltipRow label={`${t('Height')}: `} value={`${o.object.elevationValue}`} />
|
||||
</div>
|
||||
|
@ -60,6 +60,9 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) {
|
||||
|
||||
return new PathLayer({
|
||||
id: `path-layer-${fd.slice_id}`,
|
||||
getColor: d => d.color,
|
||||
getPath: d => d.path,
|
||||
getWidth: d => d.width,
|
||||
data,
|
||||
rounded: true,
|
||||
widthScale: 1,
|
||||
|
@ -137,6 +137,8 @@ const propTypes = {
|
||||
viewport: PropTypes.object.isRequired,
|
||||
onAddFilter: PropTypes.func,
|
||||
setTooltip: PropTypes.func,
|
||||
width: PropTypes.number.isRequired,
|
||||
height: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
@ -153,7 +155,6 @@ class DeckGLPolygon extends React.Component {
|
||||
this.getLayers = this.getLayers.bind(this);
|
||||
this.onSelect = this.onSelect.bind(this);
|
||||
this.onValuesChange = this.onValuesChange.bind(this);
|
||||
this.onViewportChange = this.onViewportChange.bind(this);
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(props, state) {
|
||||
@ -224,10 +225,6 @@ class DeckGLPolygon extends React.Component {
|
||||
});
|
||||
}
|
||||
|
||||
onViewportChange(viewport) {
|
||||
this.setState({ viewport });
|
||||
}
|
||||
|
||||
getLayers(values) {
|
||||
if (this.props.payload.data.features === undefined) {
|
||||
return [];
|
||||
@ -276,7 +273,8 @@ class DeckGLPolygon extends React.Component {
|
||||
onValuesChange={this.onValuesChange}
|
||||
disabled={disabled}
|
||||
viewport={viewport}
|
||||
onViewportChange={this.onViewportChange}
|
||||
width={this.props.width}
|
||||
height={this.props.height}
|
||||
mapboxApiAccessToken={payload.data.mapboxApiKey}
|
||||
mapStyle={formData.mapbox_style}
|
||||
setControlValue={setControlValue}
|
||||
|
@ -70,9 +70,11 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) {
|
||||
id: `scatter-layer-${fd.slice_id}`,
|
||||
data: dataWithRadius,
|
||||
fp64: true,
|
||||
getFillColor: d => d.color,
|
||||
getRadius: d => d.radius,
|
||||
radiusMinPixels: fd.min_radius || null,
|
||||
radiusMaxPixels: fd.max_radius || null,
|
||||
outline: false,
|
||||
stroked: false,
|
||||
...commonLayerProps(fd, setTooltip, setTooltipContent(fd)),
|
||||
});
|
||||
}
|
||||
|
@ -42,7 +42,7 @@ function setTooltipContent(o) {
|
||||
<div className="deckgl-tooltip">
|
||||
<TooltipRow
|
||||
label={`${t('Longitude and Latitude')}: `}
|
||||
value={`${o.object.position[0]}, ${o.object.position[1]}`}
|
||||
value={`${o.coordinate[0]}, ${o.coordinate[1]}`}
|
||||
/>
|
||||
<TooltipRow label={`${t('Weight')}: `} value={`${o.object.weight}`} />
|
||||
</div>
|
||||
@ -92,6 +92,8 @@ const propTypes = {
|
||||
viewport: PropTypes.object.isRequired,
|
||||
onAddFilter: PropTypes.func,
|
||||
setTooltip: PropTypes.func,
|
||||
width: PropTypes.number.isRequired,
|
||||
height: PropTypes.number.isRequired,
|
||||
};
|
||||
const defaultProps = {
|
||||
onAddFilter() {},
|
||||
@ -106,7 +108,6 @@ class DeckGLScreenGrid extends React.PureComponent {
|
||||
|
||||
this.getLayers = this.getLayers.bind(this);
|
||||
this.onValuesChange = this.onValuesChange.bind(this);
|
||||
this.onViewportChange = this.onViewportChange.bind(this);
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(props, state) {
|
||||
@ -151,10 +152,6 @@ class DeckGLScreenGrid extends React.PureComponent {
|
||||
});
|
||||
}
|
||||
|
||||
onViewportChange(viewport) {
|
||||
this.setState({ viewport });
|
||||
}
|
||||
|
||||
getLayers(values) {
|
||||
const filters = [];
|
||||
|
||||
@ -190,7 +187,8 @@ class DeckGLScreenGrid extends React.PureComponent {
|
||||
onValuesChange={this.onValuesChange}
|
||||
disabled={this.state.disabled}
|
||||
viewport={this.state.viewport}
|
||||
onViewportChange={this.onViewportChange}
|
||||
width={this.props.width}
|
||||
height={this.props.height}
|
||||
mapboxApiAccessToken={payload.data.mapboxApiKey}
|
||||
mapStyle={formData.mapbox_style}
|
||||
setControlValue={setControlValue}
|
||||
|
@ -98,7 +98,7 @@ export function commonLayerProps(formData, setTooltip, setTooltipContent, onSele
|
||||
setTooltip({
|
||||
content: tooltipContentGenerator(o),
|
||||
x: o.x,
|
||||
y: o.y + 30,
|
||||
y: o.y,
|
||||
});
|
||||
} else {
|
||||
setTooltip(null);
|
||||
|
@ -24,6 +24,7 @@ export default function transformProps(chartProps) {
|
||||
|
||||
return {
|
||||
formData: rawFormData,
|
||||
height,
|
||||
onAddFilter,
|
||||
payload: queryData,
|
||||
setControlValue,
|
||||
@ -33,5 +34,6 @@ export default function transformProps(chartProps) {
|
||||
height,
|
||||
width,
|
||||
},
|
||||
width,
|
||||
};
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user