This is an automated email from the ASF dual-hosted git repository. maximebeauchemin pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push: new ccf505a [mapbox] fix viewport alterations (#3293) ccf505a is described below commit ccf505a4805203684e7416d2d9789f6f54f2f9ad Author: Maxime Beauchemin <maximebeauche...@gmail.com> AuthorDate: Wed Aug 16 11:23:01 2017 -0700 [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 --- .../explore/components/ChartContainer.jsx | 3 ++- .../explore/components/controls/TextControl.jsx | 6 ++---- superset/assets/visualizations/mapbox.jsx | 20 ++++++++++---------- 3 files changed, 14 insertions(+), 15 deletions(-) diff --git a/superset/assets/javascripts/explore/components/ChartContainer.jsx b/superset/assets/javascripts/explore/components/ChartContainer.jsx index 3243f32..d5b4545 100644 --- a/superset/assets/javascripts/explore/components/ChartContainer.jsx +++ b/superset/assets/javascripts/explore/components/ChartContainer.jsx @@ -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); } diff --git a/superset/assets/javascripts/explore/components/controls/TextControl.jsx b/superset/assets/javascripts/explore/components/controls/TextControl.jsx index c3f7aa5..4fe558e 100644 --- a/superset/assets/javascripts/explore/components/controls/TextControl.jsx +++ b/superset/assets/javascripts/explore/components/controls/TextControl.jsx @@ -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> diff --git a/superset/assets/visualizations/mapbox.jsx b/superset/assets/visualizations/mapbox.jsx index 9a86853..c01ad28 100644 --- a/superset/assets/visualizations/mapbox.jsx +++ b/superset/assets/visualizations/mapbox.jsx @@ -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(), ); -- To stop receiving notification emails like this one, please contact ['"comm...@superset.apache.org" <comm...@superset.apache.org>'].