DECKGL integration - Phase 1 (#3771)

* DECKGL integration

Adding a new set of geospatial visualizations building on top of the
awesome deck.gl library. https://github.com/uber/deck.gl

While the end goal it to expose all types of layers and let users bind
their data to control most props exposed by the deck.gl API, this
PR focusses on a first set of visualizations and props:

* ScatterLayer
* HexagonLayer
* GridLayer
* ScreenGridLayer

* Addressing comments

* lint

* Linting

* Addressing chri's comments

superset/assets/javascripts/explore/components/Control.jsx

@@ -21,6 +21,7 @@ const propTypes = {
   value: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
+    PropTypes.object,
     PropTypes.bool,
     PropTypes.array,
     PropTypes.func]),

superset/assets/javascripts/explore/components/controls/FixedOrMetricControl.jsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Label, Popover, OverlayTrigger } from 'react-bootstrap';
+
+import controls from '../../stores/controls';
+import TextControl from './TextControl';
+import SelectControl from './SelectControl';
+import ControlHeader from '../ControlHeader';
+import PopoverSection from '../../../components/PopoverSection';
+
+const controlTypes = {
+  fixed: 'fix',
+  metric: 'metric',
+};
+
+const propTypes = {
+  onChange: PropTypes.func,
+  value: PropTypes.object,
+  isFloat: PropTypes.bool,
+  datasource: PropTypes.object,
+  default: PropTypes.shape({
+    type: PropTypes.oneOf(['fix', 'metric']),
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  }),
+};
+
+const defaultProps = {
+  onChange: () => {},
+  default: { type: controlTypes.fixed, value: 5 },
+};
+
+export default class FixedOrMetricControl extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onChange = this.onChange.bind(this);
+    this.setType = this.setType.bind(this);
+    this.setFixedValue = this.setFixedValue.bind(this);
+    this.setMetric = this.setMetric.bind(this);
+    const type = (props.value ? props.value.type : props.default.type) || controlTypes.fixed;
+    const value = (props.value ? props.value.value : props.default.value) || '100';
+    this.state = {
+      type,
+      fixedValue: type === controlTypes.fixed ? value : '',
+      metricValue: type === controlTypes.metric ? value : null,
+    };
+  }
+  onChange() {
+    this.props.onChange({
+      type: this.state.type,
+      value: this.state.type === controlTypes.fixed ?
+        this.state.fixedValue : this.state.metricValue,
+    });
+  }
+  setType(type) {
+    this.setState({ type }, this.onChange);
+  }
+  setFixedValue(fixedValue) {
+    this.setState({ fixedValue }, this.onChange);
+  }
+  setMetric(metricValue) {
+    this.setState({ metricValue }, this.onChange);
+  }
+  renderPopover() {
+    const value = this.props.value || this.props.default;
+    const type = value.type || controlTypes.fixed;
+    const metrics = this.props.datasource ? this.props.datasource.metrics : null;
+    return (
+      <Popover id="filter-popover">
+        <div style={{ width: '240px' }}>
+          <PopoverSection
+            title="Fixed"
+            isSelected={type === controlTypes.fixed}
+            onSelect={() => { this.onChange(controlTypes.fixed); }}
+          >
+            <TextControl
+              isFloat
+              onChange={this.setFixedValue}
+              onFocus={() => { this.setType(controlTypes.fixed); }}
+              value={this.state.fixedValue}
+            />
+          </PopoverSection>
+          <PopoverSection
+            title="Based on a metric"
+            isSelected={type === controlTypes.metric}
+            onSelect={() => { this.onChange(controlTypes.metric); }}
+          >
+            <SelectControl
+              {...controls.metric}
+              name="metric"
+              options={metrics}
+              onFocus={() => { this.setType(controlTypes.metric); }}
+              onChange={this.setMetric}
+              value={this.state.metricValue}
+            />
+          </PopoverSection>
+        </div>
+      </Popover>
+    );
+  }
+  render() {
+    return (
+      <div>
+        <ControlHeader {...this.props} />
+        <OverlayTrigger
+          container={document.body}
+          trigger="click"
+          rootClose
+          ref="trigger"
+          placement="right"
+          overlay={this.renderPopover()}
+        >
+          <Label style={{ cursor: 'pointer' }}>
+            {this.state.type === controlTypes.fixed &&
+              <span>{this.state.fixedValue}</span>
+            }
+            {this.state.type === controlTypes.metric &&
+              <span>
+                <span style={{ fontWeight: 'normal' }}>metric: </span>
+                <strong>{this.state.metricValue}</strong>
+              </span>
+            }
+          </Label>
+        </OverlayTrigger>
+      </div>
+    );
+  }
+}
+
+FixedOrMetricControl.propTypes = propTypes;
+FixedOrMetricControl.defaultProps = defaultProps;

superset/assets/javascripts/explore/components/controls/SelectControl.jsx

@@ -17,6 +17,7 @@ const propTypes = {
   multi: PropTypes.bool,
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func,
+  onFocus: PropTypes.func,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   showHeader: PropTypes.bool,
   optionRenderer: PropTypes.func,
@@ -34,6 +35,7 @@ const defaultProps = {
   label: null,
   multi: false,
   onChange: () => {},
+  onFocus: () => {},
   showHeader: true,
   optionRenderer: opt => opt.label,
   valueRenderer: opt => opt.label,
@@ -115,6 +117,7 @@ export default class SelectControl extends React.PureComponent {
       clearable: this.props.clearable,
       isLoading: this.props.isLoading,
       onChange: this.onChange,
+      onFocus: this.props.onFocus,
       optionRenderer: VirtualizedRendererWrap(this.props.optionRenderer),
       valueRenderer: this.props.valueRenderer,
       selectComponent: this.props.freeForm ? Creatable : Select,

superset/assets/javascripts/explore/components/controls/TextControl.jsx

@@ -5,10 +5,8 @@ import * as v from '../../validators';
 import ControlHeader from '../ControlHeader';
 
 const propTypes = {
-  name: PropTypes.string.isRequired,
-  label: PropTypes.string,
-  description: PropTypes.string,
   onChange: PropTypes.func,
+  onFocus: PropTypes.func,
   value: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
@@ -18,9 +16,8 @@ const propTypes = {
 };
 
 const defaultProps = {
-  label: null,
-  description: null,
   onChange: () => {},
+  onFocus: () => {},
   value: '',
   isInt: false,
   isFloat: false,
@@ -64,6 +61,7 @@ export default class TextControl extends React.Component {
             type="text"
             placeholder=""
             onChange={this.onChange}
+            onFocus={this.props.onFocus}
             value={value}
           />
         </FormGroup>

superset/assets/javascripts/explore/components/controls/ViewportControl.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Label, Popover, OverlayTrigger } from 'react-bootstrap';
+import { decimal2sexagesimal } from 'geolib';
+
+import TextControl from './TextControl';
+import ControlHeader from '../ControlHeader';
+import { defaultViewport } from '../../../modules/geo';
+
+const PARAMS = [
+  'longitude',
+  'latitude',
+  'zoom',
+  'bearing',
+  'pitch',
+];
+
+const propTypes = {
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.shape({
+    longitude: PropTypes.number,
+    latitude: PropTypes.number,
+    zoom: PropTypes.number,
+    bearing: PropTypes.number,
+    pitch: PropTypes.number,
+  }),
+  default: PropTypes.object,
+  name: PropTypes.string.isRequired,
+};
+
+const defaultProps = {
+  onChange: () => {},
+  default: { type: 'fix', value: 5 },
+  value: defaultViewport,
+};
+
+export default class ViewportControl extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onChange = this.onChange.bind(this);
+  }
+  onChange(ctrl, value) {
+    this.props.onChange({
+      ...this.props.value,
+      [ctrl]: value,
+    });
+  }
+  renderTextControl(ctrl) {
+    return (
+      <div key={ctrl}>
+        {ctrl}
+        <TextControl
+          value={this.props.value[ctrl]}
+          onChange={this.onChange.bind(this, ctrl)}
+          isFloat
+        />
+      </div>
+    );
+  }
+  renderPopover() {
+    return (
+      <Popover id={`filter-popover-${this.props.name}`} title="Viewport">
+        {PARAMS.map(ctrl => this.renderTextControl(ctrl))}
+      </Popover>
+    );
+  }
+  renderLabel() {
+    if (this.props.value.longitude && this.props.value.latitude) {
+      return (
+        decimal2sexagesimal(this.props.value.longitude) +
+        ' | ' +
+        decimal2sexagesimal(this.props.value.latitude)
+      );
+    }
+    return 'N/A';
+  }
+  render() {
+    return (
+      <div>
+        <ControlHeader {...this.props} />
+        <OverlayTrigger
+          container={document.body}
+          trigger="click"
+          rootClose
+          ref="trigger"
+          placement="right"
+          overlay={this.renderPopover()}
+        >
+          <Label style={{ cursor: 'pointer' }}>
+            {this.renderLabel()}
+          </Label>
+        </OverlayTrigger>
+      </div>
+    );
+  }
+}
+
+ViewportControl.propTypes = propTypes;
+ViewportControl.defaultProps = defaultProps;

superset/assets/javascripts/explore/components/controls/index.js

@@ -6,12 +6,14 @@ import ColorSchemeControl from './ColorSchemeControl';
 import DatasourceControl from './DatasourceControl';
 import DateFilterControl from './DateFilterControl';
 import FilterControl from './FilterControl';
+import FixedOrMetricControl from './FixedOrMetricControl';
 import HiddenControl from './HiddenControl';
 import SelectAsyncControl from './SelectAsyncControl';
 import SelectControl from './SelectControl';
 import TextAreaControl from './TextAreaControl';
 import TextControl from './TextControl';
 import TimeSeriesColumnControl from './TimeSeriesColumnControl';
+import ViewportControl from './ViewportControl';
 import VizTypeControl from './VizTypeControl';
 
 const controlMap = {
@@ -23,12 +25,14 @@ const controlMap = {
   DatasourceControl,
   DateFilterControl,
   FilterControl,
+  FixedOrMetricControl,
   HiddenControl,
   SelectAsyncControl,
   SelectControl,
   TextAreaControl,
   TextControl,
   TimeSeriesColumnControl,
+  ViewportControl,
   VizTypeControl,
 };
 export default controlMap;