mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
[mapbox] fix viewport alterations (#3293)
* [mapbox] fix viewport alterations Since explorev2 it appears that altering the viewport hasn't been changing the controls as it used to. This PR addresses it. * lint
This commit is contained in:
parent
d1d1c49009
commit
ccf505a480
@ -178,7 +178,8 @@ class ChartContainer extends React.PureComponent {
|
||||
const mockSlice = this.getMockedSliceObject();
|
||||
this.setState({ mockSlice });
|
||||
try {
|
||||
visMap[this.props.viz_type](mockSlice, this.props.queryResponse);
|
||||
const viz = visMap[this.props.viz_type];
|
||||
viz(mockSlice, this.props.queryResponse, this.props.actions.setControlValue);
|
||||
} catch (e) {
|
||||
this.props.actions.chartRenderingFailed(e);
|
||||
}
|
||||
|
@ -29,13 +29,10 @@ const defaultProps = {
|
||||
export default class TextControl extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const value = props.value ? props.value.toString() : '';
|
||||
this.state = { value };
|
||||
this.onChange = this.onChange.bind(this);
|
||||
}
|
||||
onChange(event) {
|
||||
let value = event.target.value || '';
|
||||
this.setState({ value });
|
||||
|
||||
// Validation & casting
|
||||
const errors = [];
|
||||
@ -58,6 +55,7 @@ export default class TextControl extends React.Component {
|
||||
this.props.onChange(value, errors);
|
||||
}
|
||||
render() {
|
||||
const value = this.props.value ? this.props.value.toString() : '';
|
||||
return (
|
||||
<div>
|
||||
<ControlHeader {...this.props} />
|
||||
@ -66,7 +64,7 @@ export default class TextControl extends React.Component {
|
||||
type="text"
|
||||
placeholder=""
|
||||
onChange={this.onChange}
|
||||
value={this.state.value}
|
||||
value={value}
|
||||
/>
|
||||
</FormGroup>
|
||||
</div>
|
||||
|
@ -8,6 +8,7 @@ import ScatterPlotOverlay from 'react-map-gl/dist/overlays/scatterplot.react';
|
||||
import Immutable from 'immutable';
|
||||
import supercluster from 'supercluster';
|
||||
import ViewportMercator from 'viewport-mercator-project';
|
||||
|
||||
import {
|
||||
kmToPixels,
|
||||
rgbLuminance,
|
||||
@ -17,8 +18,9 @@ import {
|
||||
DEFAULT_LATITUDE,
|
||||
DEFAULT_ZOOM,
|
||||
} from '../utils/common';
|
||||
import './mapbox.css';
|
||||
|
||||
require('./mapbox.css');
|
||||
const NOOP = () => {};
|
||||
|
||||
class ScatterPlotGlowOverlay extends ScatterPlotOverlay {
|
||||
drawText(ctx, pixel, options = {}) {
|
||||
@ -201,9 +203,10 @@ class MapboxViz extends React.Component {
|
||||
}
|
||||
|
||||
onChangeViewport(viewport) {
|
||||
this.setState({
|
||||
viewport,
|
||||
});
|
||||
this.setState({ viewport });
|
||||
this.props.setControlValue('viewport_longitude', viewport.longitude);
|
||||
this.props.setControlValue('viewport_latitude', viewport.latitude);
|
||||
this.props.setControlValue('viewport_zoom', viewport.zoom);
|
||||
}
|
||||
|
||||
render() {
|
||||
@ -220,11 +223,6 @@ class MapboxViz extends React.Component {
|
||||
const clusters = this.props.clusterer.getClusters(bbox, Math.round(this.state.viewport.zoom));
|
||||
const isDragging = this.state.viewport.isDragging === undefined ? false :
|
||||
this.state.viewport.isDragging;
|
||||
|
||||
d3.select('#viewport_longitude').attr('value', this.state.viewport.longitude);
|
||||
d3.select('#viewport_latitude').attr('value', this.state.viewport.latitude);
|
||||
d3.select('#viewport_zoom').attr('value', this.state.viewport.zoom);
|
||||
|
||||
return (
|
||||
<MapGL
|
||||
{...this.state.viewport}
|
||||
@ -259,6 +257,7 @@ class MapboxViz extends React.Component {
|
||||
MapboxViz.propTypes = {
|
||||
aggregatorName: PropTypes.string,
|
||||
clusterer: PropTypes.object,
|
||||
setControlValue: PropTypes.func,
|
||||
globalOpacity: PropTypes.number,
|
||||
mapStyle: PropTypes.string,
|
||||
mapboxApiKey: PropTypes.string,
|
||||
@ -273,7 +272,7 @@ MapboxViz.propTypes = {
|
||||
viewportZoom: PropTypes.number,
|
||||
};
|
||||
|
||||
function mapbox(slice, json) {
|
||||
function mapbox(slice, json, setControlValue) {
|
||||
const div = d3.select(slice.selector);
|
||||
const DEFAULT_POINT_RADIUS = 60;
|
||||
const DEFAULT_MAX_ZOOM = 16;
|
||||
@ -331,6 +330,7 @@ function mapbox(slice, json) {
|
||||
clusterer={clusterer}
|
||||
pointRadius={DEFAULT_POINT_RADIUS}
|
||||
aggregatorName={aggName}
|
||||
setControlValue={setControlValue || NOOP}
|
||||
/>,
|
||||
div.node(),
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user