[Ready] Define ChartProps data structure (#6125)

* rename basicChartInput to chartProps

* replace BasicChartInput with ChartProps class

* Add transformProps to deck.gl plugins

* Add space

* delete BasicChartInput

* add width and height as part of ChartProps and update transformProps

* remove width and height

* remove adaptors from deck.gl components

* remove deck.gl creataAdaptor

superset/assets/src/utils/createAdaptor.jsx

@@ -1,18 +1,33 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import BasicChartInput from '../visualizations/models/BasicChartInput';
+import ChartProps from '../visualizations/core/models/ChartProps';
 
 const IDENTITY = x => x;
 
 export default function createAdaptor(Component, transformProps = IDENTITY) {
   return function adaptor(slice, payload, setControlValue) {
-    const basicChartInput = new BasicChartInput(slice, payload, setControlValue);
+    const chartProps = new ChartProps({
+      width: slice.width(),
+      height: slice.height(),
+      annotationData: slice.annotationData,
+      datasource: slice.datasource,
+      filters: slice.getFilters(),
+      formData: slice.formData,
+      onAddFilter(...args) {
+        slice.addFilter(...args);
+      },
+      onError(...args) {
+        slice.error(...args);
+      },
+      payload,
+      setControlValue,
+      setTooltip(...args) {
+        slice.setTooltip(...args);
+      },
+    });
+
     ReactDOM.render(
-      <Component
+      <Component {...transformProps(chartProps)} />,
-        width={slice.width()}
-        height={slice.height()}
-        {...transformProps(basicChartInput)}
-      />,
       document.querySelector(slice.selector),
     );
   };

superset/assets/src/visualizations/BigNumber/transformProps.js

@@ -5,8 +5,8 @@ import { renderTooltipFactory } from './BigNumber';
 
 const TIME_COLUMN = '__timestamp';
 
-export default function transformProps(basicChartInput) {
+export default function transformProps(chartProps) {
-  const { formData, payload } = basicChartInput;
+  const { width, height, formData, payload } = chartProps;
   const {
     colorPicker,
     compareLag: compareLagInput,
@@ -65,6 +65,8 @@ export default function transformProps(basicChartInput) {
   const formatValue = d3FormatPreset(yAxisFormat);
 
   return {
+    width,
+    height,
     bigNumber,
     className,
     formatBigNumber: formatValue,

superset/assets/src/visualizations/Calendar/transformProps.js

@@ -1,5 +1,5 @@
-export default function transformProps(basicChartInput) {
+export default function transformProps(chartProps) {
-  const { formData, payload, datasource } = basicChartInput;
+  const { height, formData, payload, datasource } = chartProps;
   const {
     cellPadding,
     cellRadius,
@@ -16,6 +16,7 @@ export default function transformProps(basicChartInput) {
   const { verboseMap } = datasource;
 
   return {
+    height,
     data: payload.data,
     cellPadding,
     cellRadius,

superset/assets/src/visualizations/Chord/transformProps.js

@@ -1,8 +1,10 @@
-export default function transformProps(basicChartInput) {
+export default function transformProps(chartProps) {
-  const { formData, payload } = basicChartInput;
+  const { width, height, formData, payload } = chartProps;
   const { yAxisFormat, colorScheme } = formData;
 
   return {
+    width,
+    height,
     data: payload.data,
     numberFormat: yAxisFormat,
     colorScheme,

superset/assets/src/visualizations/CountryMap/transformProps.js

@@ -1,5 +1,5 @@
-export default function transformProps(basicChartInput) {
+export default function transformProps(chartProps) {
-  const { formData, payload } = basicChartInput;
+  const { width, height, formData, payload } = chartProps;
   const {
     linearColorScheme,
     numberFormat,
@@ -7,6 +7,8 @@ export default function transformProps(basicChartInput) {
   } = formData;
 
   return {
+    width,
+    height,
     data: payload.data,
     country: selectCountry,
     linearColorScheme,

superset/assets/src/visualizations/EventFlow/transformProps.js

@@ -5,8 +5,8 @@ import {
   ENTITY_ID,
 } from '@data-ui/event-flow';
 
-export default function transformProps(basicChartInput) {
+export default function transformProps(chartProps) {
-  const { formData, payload } = basicChartInput;
+  const { formData, payload } = chartProps;
   const {
     allColumnsX,
     entity,

superset/assets/src/visualizations/FilterBox/transformProps.js

@@ -1,4 +1,4 @@
-export default function transformProps(basicChartInput) {
+export default function transformProps(chartProps) {
   const {
     datasource,
     filters,
@@ -6,7 +6,7 @@ export default function transformProps(basicChartInput) {
     onAddFilter,
     payload,
     rawDatasource,
-  } = basicChartInput;
+  } = chartProps;
   const {
     dateFilter,
     groupby,

superset/assets/src/visualizations/ForceDirected/transformProps.js

@@ -1,8 +1,10 @@
-export default function transformProps(basicChartInput) {
+export default function transformProps(chartProps) {
-  const { formData, payload } = basicChartInput;
+  const { width, height, formData, payload } = chartProps;
   const { charge, linkLength } = formData;
 
   return {
+    width,
+    height,
     data: payload.data,
     charge,
     linkLength,

superset/assets/src/visualizations/Heatmap/transformProps.js

@@ -1,5 +1,5 @@
-export default function transformProps(basicChartInput) {
+export default function transformProps(chartProps) {
-  const { formData, payload } = basicChartInput;
+  const { width, height, formData, payload } = chartProps;
   const {
     bottomMargin,
     canvasImageRendering,
@@ -21,6 +21,8 @@ export default function transformProps(basicChartInput) {
   } = formData;
 
   return {
+    width,
+    height,
     data: payload.data,
     bottomMargin,
     canvasImageRendering,

superset/assets/src/visualizations/Histogram/transformProps.js

@@ -1,5 +1,5 @@
-export default function transformProps(basicChartInput) {
+export default function transformProps(chartProps) {
-  const { formData, payload } = basicChartInput;
+  const { width, height, formData, payload } = chartProps;
   const {
     colorScheme,
     linkLength,
@@ -10,6 +10,8 @@ export default function transformProps(basicChartInput) {
   } = formData;
 
   return {
+    width,
+    height,
     data: payload.data,
     binCount: parseInt(linkLength, 10),
     colorScheme,

superset/assets/src/visualizations/Horizon/transformProps.js

@@ -1,11 +1,12 @@
-export default function transformProps(basicChartInput) {
+export default function transformProps(chartProps) {
-  const { formData, payload } = basicChartInput;
+  const { width, formData, payload } = chartProps;
   const {
     horizonColorScale,
     seriesHeight,
   } = formData;
 
   return {
+    width,
     data: payload.data,
     seriesHeight: parseInt(seriesHeight, 10),
     colorScale: horizonColorScale,

superset/assets/src/visualizations/MapBox/transformProps.js

@@ -1,8 +1,8 @@
 import supercluster from 'supercluster';
 import { DEFAULT_POINT_RADIUS, DEFAULT_MAX_ZOOM } from './MapBox';
 
-export default function transformProps(basicChartInput) {
+export default function transformProps(chartProps) {
-  const { formData, onError, payload, setControlValue } = basicChartInput;
+  const { width, height, formData, onError, payload, setControlValue } = chartProps;
   const {
     bounds,
     geoJSON,
@@ -59,6 +59,8 @@ export default function transformProps(basicChartInput) {
   clusterer.load(geoJSON.features);
 
   return {
+    width,
+    height,
     aggregatorName: pandasAggfunc,
     bounds,
     clusterer,

superset/assets/src/visualizations/PairedTTest/transformProps.js

@@ -1,5 +1,5 @@
-export default function transformProps(basicChartInput) {
+export default function transformProps(chartProps) {
-  const { formData, payload } = basicChartInput;
+  const { formData, payload } = chartProps;
   const {
     groupby,
     liftvaluePrecision,

superset/assets/src/visualizations/ParallelCoordinates/transformProps.js

@@ -1,5 +1,5 @@
-export default function transformProps(basicChartInput) {
+export default function transformProps(chartProps) {
-  const { formData, payload } = basicChartInput;
+  const { width, height, formData, payload } = chartProps;
   const {
     includeSeries,
     linearColorScheme,
@@ -10,6 +10,8 @@ export default function transformProps(basicChartInput) {
   } = formData;
 
   return {
+    width,
+    height,
     data: payload.data,
     includeSeries,
     linearColorScheme,

superset/assets/src/visualizations/Partition/transformProps.js

@@ -1,5 +1,5 @@
-export default function transformProps(basicChartInput) {
+export default function transformProps(chartProps) {
-  const { datasource, formData, payload } = basicChartInput;
+  const { width, height, datasource, formData, payload } = chartProps;
   const {
     colorScheme,
     dateTimeFormat,
@@ -16,6 +16,8 @@ export default function transformProps(basicChartInput) {
   const { verboseMap } = datasource;
 
   return {
+    width,
+    height,
     data: payload.data,
     colorScheme,
     dateTimeFormat,

superset/assets/src/visualizations/PivotTable/transformProps.js

@@ -1,5 +1,5 @@
-export default function transformProps(basicChartInput) {
+export default function transformProps(chartProps) {
-  const { datasource, formData, payload } = basicChartInput;
+  const { height, datasource, formData, payload } = chartProps;
   const {
     groupby,
     numberFormat,
@@ -10,6 +10,7 @@ export default function transformProps(basicChartInput) {
   } = datasource;
 
   return {
+    height,
     data: payload.data,
     columnFormats,
     numGroups: groupby.length,

superset/assets/src/visualizations/Rose/transformProps.js

@@ -1,5 +1,5 @@
-export default function transformProps(basicChartInput) {
+export default function transformProps(chartProps) {
-  const { formData, payload } = basicChartInput;
+  const { width, height, formData, payload } = chartProps;
   const {
     colorScheme,
     dateTimeFormat,
@@ -9,6 +9,8 @@ export default function transformProps(basicChartInput) {
   } = formData;
 
   return {
+    width,
+    height,
     data: payload.data,
     colorScheme,
     dateTimeFormat,

superset/assets/src/visualizations/Sankey/transformProps.js

@@ -1,8 +1,10 @@
-export default function transformProps(basicChartInput) {
+export default function transformProps(chartProps) {
-  const { formData, payload } = basicChartInput;
+  const { width, height, formData, payload } = chartProps;
   const { colorScheme } = formData;
 
   return {
+    width,
+    height,
     data: payload.data,
     colorScheme,
   };

superset/assets/src/visualizations/Sunburst/transformProps.js

@@ -1,8 +1,10 @@
-export default function transformProps(basicChartInput) {
+export default function transformProps(chartProps) {
-  const { formData, payload } = basicChartInput;
+  const { width, height, formData, payload } = chartProps;
   const { colorScheme, metric, secondaryMetric } = formData;
 
   return {
+    width,
+    height,
     data: payload.data,
     colorScheme,
     metrics: [metric, secondaryMetric],

superset/assets/src/visualizations/Table/transformProps.js

@@ -1,11 +1,12 @@
-export default function transformProps(basicChartInput) {
+export default function transformProps(chartProps) {
   const {
+    height,
     datasource,
     filters,
     formData,
     onAddFilter,
     payload,
-  } = basicChartInput;
+  } = chartProps;
   const {
     alignPn,
     colorPn,
@@ -40,6 +41,7 @@ export default function transformProps(basicChartInput) {
   });
 
   return {
+    height,
     data: records,
     alignPositiveNegative: alignPn,
     colorPositiveNegative: colorPn,

superset/assets/src/visualizations/TimeTable/transformProps.js

@@ -1,5 +1,5 @@
-export default function transformProps(basicChartInput) {
+export default function transformProps(chartProps) {
-  const { datasource, formData, payload } = basicChartInput;
+  const { height, datasource, formData, payload } = chartProps;
   const {
     columnCollection,
     groupby,
@@ -40,6 +40,7 @@ export default function transformProps(basicChartInput) {
   });
 
   return {
+    height,
     data: records,
     columnConfigs: columnCollection,
     rows,

superset/assets/src/visualizations/Treemap/transformProps.js

@@ -1,5 +1,5 @@
-export default function transformProps(basicChartInput) {
+export default function transformProps(chartProps) {
-  const { formData, payload } = basicChartInput;
+  const { width, height, formData, payload } = chartProps;
   const {
     colorScheme,
     numberFormat,
@@ -7,6 +7,8 @@ export default function transformProps(basicChartInput) {
   } = formData;
 
   return {
+    width,
+    height,
     data: payload.data,
     colorScheme,
     numberFormat,

superset/assets/src/visualizations/WorldMap/transformProps.js

@@ -1,8 +1,9 @@
-export default function transformProps(basicChartInput) {
+export default function transformProps(chartProps) {
-  const { formData, payload } = basicChartInput;
+  const { height, formData, payload } = chartProps;
   const { maxBubbleSize, showBubbles } = formData;
 
   return {
+    height,
     data: payload.data,
     maxBubbleSize: parseInt(maxBubbleSize, 10),
     showBubbles,

superset/assets/src/visualizations/core/models/ChartProps.js

@@ -0,0 +1,31 @@
+import convertKeysToCamelCase from '../../../utils/convertKeysToCamelCase';
+
+export default class ChartProps {
+  constructor({
+    width,
+    height,
+    annotationData,
+    datasource,
+    filters,
+    formData,
+    onAddFilter,
+    onError,
+    payload,
+    setControlValue,
+    setTooltip,
+  }) {
+    this.width = width;
+    this.height = height;
+    this.annotationData = annotationData;
+    this.datasource = convertKeysToCamelCase(datasource);
+    this.rawDatasource = datasource;
+    this.filters = filters;
+    this.formData = convertKeysToCamelCase(formData);
+    this.rawFormData = formData;
+    this.onAddFilter = onAddFilter;
+    this.onError = onError;
+    this.payload = payload;
+    this.setControlValue = setControlValue;
+    this.setTooltip = setTooltip;
+  }
+}

superset/assets/src/visualizations/deckgl/Multi/Multi.jsx

@@ -4,7 +4,6 @@ import $ from 'jquery';
 import DeckGLContainer from '../DeckGLContainer';
 import { getExploreLongUrl } from '../../../explore/exploreUtils';
 import layerGenerators from '../layers';
-import createAdaptor from '../createAdaptor';
 
 const propTypes = {
   formData: PropTypes.object.isRequired,
@@ -84,4 +83,4 @@ class DeckMulti extends React.PureComponent {
 
 DeckMulti.propTypes = propTypes;
 
-export default createAdaptor(DeckMulti);
+export default DeckMulti;

superset/assets/src/visualizations/deckgl/Multi/MultiChartPlugin.js

@@ -1,6 +1,7 @@
 import ChartPlugin from '../../core/models/ChartPlugin';
 import ChartMetadata from '../../core/models/ChartMetadata';
 import thumbnail from './images/thumbnail.png';
+import transformProps from '../transformProps';
 
 const metadata = new ChartMetadata({
   name: 'deck.gl Multiple Layers',
@@ -14,6 +15,7 @@ export default class MultiChartPlugin extends ChartPlugin {
     super({
       metadata,
       loadChart: () => import('./Multi.jsx'),
+      transformProps,
     });
   }
 }

superset/assets/src/visualizations/deckgl/createAdaptor.jsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-const IDENTITY = x => x;
-
-class DeckGlChartInput {
-  constructor(slice, payload, setControlValue) {
-    this.formData = slice.formData;
-    this.payload = payload;
-    this.setControlValue = setControlValue;
-    this.viewport = {
-      ...this.formData.viewport,
-      width: slice.width(),
-      height: slice.height(),
-    };
-
-    this.onAddFilter = ((...args) => { slice.addFilter(...args); });
-    this.setTooltip = ((...args) => { slice.setTooltip(...args); });
-  }
-}
-
-export default function createAdaptor(Component, transformProps = IDENTITY) {
-  return function adaptor(slice, payload, setControlValue) {
-    const chartInput = new DeckGlChartInput(slice, payload, setControlValue);
-    ReactDOM.render(
-      <Component {...transformProps(chartInput)} />,
-      document.querySelector(slice.selector),
-    );
-  };
-}

superset/assets/src/visualizations/deckgl/layers/Arc/Arc.jsx

@@ -1,6 +1,5 @@
 import { ArcLayer } from 'deck.gl';
 import { commonLayerProps } from '../common';
-import createAdaptor from '../../createAdaptor';
 import { createCategoricalDeckGLComponent } from '../../factory';
 
 function getPoints(data) {
@@ -26,4 +25,4 @@ export function getLayer(fd, payload, onAddFilter, setTooltip) {
   });
 }
 
-export default createAdaptor(createCategoricalDeckGLComponent(getLayer, getPoints));
+export default createCategoricalDeckGLComponent(getLayer, getPoints);

superset/assets/src/visualizations/deckgl/layers/Arc/ArcChartPlugin.js

@@ -1,6 +1,7 @@
 import ChartPlugin from '../../../core/models/ChartPlugin';
 import ChartMetadata from '../../../core/models/ChartMetadata';
 import thumbnail from './images/thumbnail.png';
+import transformProps from '../../transformProps';
 
 const metadata = new ChartMetadata({
   name: 'deck.gl Arc',
@@ -14,6 +15,7 @@ export default class ArcChartPlugin extends ChartPlugin {
     super({
       metadata,
       loadChart: () => import('./Arc.jsx'),
+      transformProps,
     });
   }
 }

superset/assets/src/visualizations/deckgl/layers/Geojson/Geojson.jsx

@@ -7,7 +7,6 @@ import DeckGLContainer from '../../DeckGLContainer';
 import { hexToRGB } from '../../../../modules/colors';
 import sandboxedEval from '../../../../modules/sandbox';
 import { commonLayerProps } from '../common';
-import createAdaptor from '../../createAdaptor';
 
 const propertyMap = {
   fillColor: 'fillColor',
@@ -137,4 +136,4 @@ function deckGeoJson(props) {
 deckGeoJson.propTypes = propTypes;
 deckGeoJson.defaultProps = defaultProps;
 
-export default createAdaptor(deckGeoJson);
+export default deckGeoJson;

superset/assets/src/visualizations/deckgl/layers/Geojson/GeojsonChartPlugin.js

@@ -1,6 +1,7 @@
 import ChartPlugin from '../../../core/models/ChartPlugin';
 import ChartMetadata from '../../../core/models/ChartMetadata';
 import thumbnail from './images/thumbnail.png';
+import transformProps from '../../transformProps';
 
 const metadata = new ChartMetadata({
   name: 'deck.gl Geojson',
@@ -14,6 +15,7 @@ export default class GeojsonChartPlugin extends ChartPlugin {
     super({
       metadata,
       loadChart: () => import('./Geojson.jsx'),
+      transformProps,
     });
   }
 }

superset/assets/src/visualizations/deckgl/layers/Grid/Grid.jsx

@@ -1,7 +1,6 @@
 import { GridLayer } from 'deck.gl';
 import { commonLayerProps } from '../common';
 import sandboxedEval from '../../../../modules/sandbox';
-import createAdaptor from '../../createAdaptor';
 import { createDeckGLComponent } from '../../factory';
 
 export function getLayer(formData, payload, onAddFilter, setTooltip) {
@@ -37,4 +36,4 @@ function getPoints(data) {
   return data.map(d => d.position);
 }
 
-export default createAdaptor(createDeckGLComponent(getLayer, getPoints));
+export default createDeckGLComponent(getLayer, getPoints);

superset/assets/src/visualizations/deckgl/layers/Grid/GridChartPlugin.js

@@ -1,6 +1,7 @@
 import ChartPlugin from '../../../core/models/ChartPlugin';
 import ChartMetadata from '../../../core/models/ChartMetadata';
 import thumbnail from './images/thumbnail.png';
+import transformProps from '../../transformProps';
 
 const metadata = new ChartMetadata({
   name: 'deck.gl Grid',
@@ -14,6 +15,7 @@ export default class GridChartPlugin extends ChartPlugin {
     super({
       metadata,
       loadChart: () => import('./Grid.jsx'),
+      transformProps,
     });
   }
 }

superset/assets/src/visualizations/deckgl/layers/Hex/Hex.jsx

@@ -1,7 +1,6 @@
 import { HexagonLayer } from 'deck.gl';
 import { commonLayerProps } from '../common';
 import sandboxedEval from '../../../../modules/sandbox';
-import createAdaptor from '../../createAdaptor';
 import { createDeckGLComponent } from '../../factory';
 
 export function getLayer(formData, payload, onAddFilter, setTooltip) {
@@ -37,4 +36,4 @@ function getPoints(data) {
   return data.map(d => d.position);
 }
 
-export default createAdaptor(createDeckGLComponent(getLayer, getPoints));
+export default createDeckGLComponent(getLayer, getPoints);

superset/assets/src/visualizations/deckgl/layers/Hex/HexChartPlugin.js

@@ -1,6 +1,7 @@
 import ChartPlugin from '../../../core/models/ChartPlugin';
 import ChartMetadata from '../../../core/models/ChartMetadata';
 import thumbnail from './images/thumbnail.png';
+import transformProps from '../../transformProps';
 
 const metadata = new ChartMetadata({
   name: 'deck.gl 3D Hexagon',
@@ -14,6 +15,7 @@ export default class HexChartPlugin extends ChartPlugin {
     super({
       metadata,
       loadChart: () => import('./Hex.jsx'),
+      transformProps,
     });
   }
 }

superset/assets/src/visualizations/deckgl/layers/Path/Path.jsx

@@ -1,7 +1,6 @@
 import { PathLayer } from 'deck.gl';
 import { commonLayerProps } from '../common';
 import sandboxedEval from '../../../../modules/sandbox';
-import createAdaptor from '../../createAdaptor';
 import { createDeckGLComponent } from '../../factory';
 
 export function getLayer(formData, payload, onAddFilter, setTooltip) {
@@ -37,4 +36,4 @@ function getPoints(data) {
   return points;
 }
 
-export default createAdaptor(createDeckGLComponent(getLayer, getPoints));
+export default createDeckGLComponent(getLayer, getPoints);

superset/assets/src/visualizations/deckgl/layers/Path/PathChartPlugin.js

@@ -1,6 +1,7 @@
 import ChartPlugin from '../../../core/models/ChartPlugin';
 import ChartMetadata from '../../../core/models/ChartMetadata';
 import thumbnail from './images/thumbnail.png';
+import transformProps from '../../transformProps';
 
 const metadata = new ChartMetadata({
   name: 'deck.gl Path',
@@ -14,6 +15,7 @@ export default class PathChartPlugin extends ChartPlugin {
     super({
       metadata,
       loadChart: () => import('./Path.jsx'),
+      transformProps,
     });
   }
 }

superset/assets/src/visualizations/deckgl/layers/Polygon/Polygon.jsx

@@ -4,7 +4,6 @@ import { flatten } from 'lodash';
 import { colorScalerFactory } from '../../../../modules/colors';
 import { commonLayerProps } from '../common';
 import sandboxedEval from '../../../../modules/sandbox';
-import createAdaptor from '../../createAdaptor';
 import { createDeckGLComponent } from '../../factory';
 
 function getPoints(features) {
@@ -49,4 +48,4 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) {
   });
 }
 
-export default createAdaptor(createDeckGLComponent(getLayer, getPoints));
+export default createDeckGLComponent(getLayer, getPoints);

superset/assets/src/visualizations/deckgl/layers/Polygon/PolygonChartPlugin.js

@@ -1,6 +1,7 @@
 import ChartPlugin from '../../../core/models/ChartPlugin';
 import ChartMetadata from '../../../core/models/ChartMetadata';
 import thumbnail from './images/thumbnail.png';
+import transformProps from '../../transformProps';
 
 const metadata = new ChartMetadata({
   name: 'deck.gl Polygon',
@@ -14,6 +15,7 @@ export default class PolygonChartPlugin extends ChartPlugin {
     super({
       metadata,
       loadChart: () => import('./Polygon.jsx'),
+      transformProps,
     });
   }
 }

superset/assets/src/visualizations/deckgl/layers/Scatter/Scatter.jsx

@@ -1,6 +1,5 @@
 import { ScatterplotLayer } from 'deck.gl';
 import { commonLayerProps } from '../common';
-import createAdaptor from '../../createAdaptor';
 import { createCategoricalDeckGLComponent } from '../../factory';
 import { unitToRadius } from '../../../../modules/geo';
 
@@ -33,4 +32,4 @@ export function getLayer(fd, payload, slice) {
   });
 }
 
-export default createAdaptor(createCategoricalDeckGLComponent(getLayer, getPoints));
+export default createCategoricalDeckGLComponent(getLayer, getPoints);

superset/assets/src/visualizations/deckgl/layers/Scatter/ScatterChartPlugin.js

@@ -1,6 +1,7 @@
 import ChartPlugin from '../../../core/models/ChartPlugin';
 import ChartMetadata from '../../../core/models/ChartMetadata';
 import thumbnail from './images/thumbnail.png';
+import transformProps from '../../transformProps';
 
 const metadata = new ChartMetadata({
   name: 'deck.gl Scatterplot',
@@ -14,6 +15,7 @@ export default class ScatterChartPlugin extends ChartPlugin {
     super({
       metadata,
       loadChart: () => import('./Scatter.jsx'),
+      transformProps,
     });
   }
 }

superset/assets/src/visualizations/deckgl/layers/Screengrid/Screengrid.jsx

@@ -7,7 +7,6 @@ import AnimatableDeckGLContainer from '../../AnimatableDeckGLContainer';
 import { getPlaySliderParams } from '../../../../modules/time';
 import sandboxedEval from '../../../../modules/sandbox';
 import { commonLayerProps, fitViewport } from '../common';
-import createAdaptor from '../../createAdaptor';
 
 function getPoints(data) {
   return data.map(d => d.position);
@@ -135,4 +134,4 @@ class DeckGLScreenGrid extends React.PureComponent {
 DeckGLScreenGrid.propTypes = propTypes;
 DeckGLScreenGrid.defaultProps = defaultProps;
 
-export default createAdaptor(DeckGLScreenGrid);
+export default DeckGLScreenGrid;

superset/assets/src/visualizations/deckgl/layers/Screengrid/ScreengridChartPlugin.js

@@ -1,6 +1,7 @@
 import ChartPlugin from '../../../core/models/ChartPlugin';
 import ChartMetadata from '../../../core/models/ChartMetadata';
 import thumbnail from './images/thumbnail.png';
+import transformProps from '../../transformProps';
 
 const metadata = new ChartMetadata({
   name: 'deck.gl Screen Grid',
@@ -14,6 +15,7 @@ export default class ScreengridChartPlugin extends ChartPlugin {
     super({
       metadata,
       loadChart: () => import('./Screengrid.jsx'),
+      transformProps,
     });
   }
 }

superset/assets/src/visualizations/deckgl/transformProps.js

@@ -0,0 +1,24 @@
+export default function transformProps(chartProps) {
+  const {
+    width,
+    height,
+    rawFormData,
+    payload,
+    setControlValue,
+    onAddFilter,
+    setTooltip,
+  } = chartProps;
+
+  return {
+    formData: rawFormData,
+    payload,
+    setControlValue,
+    viewport: {
+      ...rawFormData.viewport,
+      width,
+      height,
+    },
+    onAddFilter,
+    setTooltip,
+  };
+}

superset/assets/src/visualizations/index.js

@@ -1,3 +1,6 @@
+import createAdaptor from '../utils/createAdaptor';
+import transformProps from './deckgl/transformProps';
+
 /* eslint-disable global-require */
 
 // You ***should*** use these to reference viz_types in code
@@ -55,10 +58,13 @@ export const VIZ_TYPES = {
 const loadVis = promise =>
   promise.then((module) => {
     const defaultExport = module.default || module;
-
     // deckgl visualizations don't use esModules, fix it?
     return defaultExport.default || defaultExport;
   });
+
+const loadDeckGLVis = promise =>
+  loadVis(promise).then(module => createAdaptor(module, transformProps));
+
 const loadNvd3 = () => loadVis(import(/* webpackChunkName: "nvd3_vis" */ './nvd3/adaptor.jsx'));
 
 const vizMap = {
@@ -117,25 +123,25 @@ const vizMap = {
   [VIZ_TYPES.partition]: () =>
     loadVis(import(/* webpackChunkName: "partition" */ './Partition/adaptor.jsx')),
   [VIZ_TYPES.deck_scatter]: () =>
-    loadVis(import(/* webpackChunkName: "deckgl/layers/scatter" */ './deckgl/layers/Scatter/Scatter.jsx')),
+    loadDeckGLVis(import(/* webpackChunkName: "deckgl/layers/scatter" */ './deckgl/layers/Scatter/Scatter.jsx')),
   [VIZ_TYPES.deck_screengrid]: () =>
-    loadVis(
+    loadDeckGLVis(
       import(/* webpackChunkName: "deckgl/layers/screengrid" */ './deckgl/layers/Screengrid/Screengrid.jsx'),
     ),
   [VIZ_TYPES.deck_grid]: () =>
-    loadVis(import(/* webpackChunkName: "deckgl/layers/grid" */ './deckgl/layers/Grid/Grid.jsx')),
+    loadDeckGLVis(import(/* webpackChunkName: "deckgl/layers/grid" */ './deckgl/layers/Grid/Grid.jsx')),
   [VIZ_TYPES.deck_hex]: () =>
-    loadVis(import(/* webpackChunkName: "deckgl/layers/hex" */ './deckgl/layers/Hex/Hex.jsx')),
+    loadDeckGLVis(import(/* webpackChunkName: "deckgl/layers/hex" */ './deckgl/layers/Hex/Hex.jsx')),
   [VIZ_TYPES.deck_path]: () =>
-    loadVis(import(/* webpackChunkName: "deckgl/layers/path" */ './deckgl/layers/Path/Path.jsx')),
+    loadDeckGLVis(import(/* webpackChunkName: "deckgl/layers/path" */ './deckgl/layers/Path/Path.jsx')),
   [VIZ_TYPES.deck_geojson]: () =>
-    loadVis(import(/* webpackChunkName: "deckgl/layers/geojson" */ './deckgl/layers/Geojson/Geojson.jsx')),
+    loadDeckGLVis(import(/* webpackChunkName: "deckgl/layers/geojson" */ './deckgl/layers/Geojson/Geojson.jsx')),
   [VIZ_TYPES.deck_arc]: () =>
-    loadVis(import(/* webpackChunkName: "deckgl/layers/arc" */ './deckgl/layers/Arc/Arc.jsx')),
+    loadDeckGLVis(import(/* webpackChunkName: "deckgl/layers/arc" */ './deckgl/layers/Arc/Arc.jsx')),
   [VIZ_TYPES.deck_polygon]: () =>
-    loadVis(import(/* webpackChunkName: "deckgl/layers/polygon" */ './deckgl/layers/Polygon/Polygon.jsx')),
+    loadDeckGLVis(import(/* webpackChunkName: "deckgl/layers/polygon" */ './deckgl/layers/Polygon/Polygon.jsx')),
   [VIZ_TYPES.deck_multi]: () =>
-    loadVis(import(/* webpackChunkName: "deckgl/multi" */ './deckgl/Multi/Multi.jsx')),
+    loadDeckGLVis(import(/* webpackChunkName: "deckgl/multi" */ './deckgl/Multi/Multi.jsx')),
   [VIZ_TYPES.rose]: () => loadVis(import(/* webpackChunkName: "rose" */ './Rose/adaptor.jsx')),
 };
 

superset/assets/src/visualizations/models/BasicChartInput.js

@@ -1,19 +0,0 @@
-import convertKeysToCamelCase from '../../utils/convertKeysToCamelCase';
-
-export default class BasicChartInput {
-  constructor(slice, payload, setControlValue) {
-    this.annotationData = slice.annotationData;
-    this.datasource = convertKeysToCamelCase(slice.datasource);
-    this.rawDatasource = slice.datasource;
-    this.filters = slice.getFilters();
-    this.formData = convertKeysToCamelCase(slice.formData);
-    this.onAddFilter = (...args) => {
-      slice.addFilter(...args);
-    };
-    this.onError = (...args) => {
-      slice.error(...args);
-    };
-    this.payload = payload;
-    this.setControlValue = setControlValue;
-  }
-}

superset/assets/src/visualizations/nvd3/transformProps.js

@@ -1,15 +1,17 @@
 import { isTruthy } from '../../utils/common';
 import { formatLabel } from './utils';
 
-export default function transformProps(basicChartInput) {
+export default function transformProps(chartProps) {
   const {
+    width,
+    height,
     annotationData,
     datasource,
     formData,
     onError,
     onAddFilter,
     payload,
-  } = basicChartInput;
+  } = chartProps;
 
   const {
     annotationLayers,
@@ -63,6 +65,8 @@ export default function transformProps(basicChartInput) {
     : rawData;
 
   return {
+    width,
+    height,
     data,
     annotationData,
     annotationLayers,

superset/assets/src/visualizations/wordcloud/transformProps.js

@@ -9,8 +9,8 @@ function transformData(data, formData) {
   return transformedData;
 }
 
-export default function transformProps(basicChartInput) {
+export default function transformProps(chartProps) {
-  const { formData, payload } = basicChartInput;
+  const { width, height, formData, payload } = chartProps;
   const {
     colorScheme,
     rotation,
@@ -19,6 +19,8 @@ export default function transformProps(basicChartInput) {
   } = formData;
 
   return {
+    width,
+    height,
     data: transformData(payload.data, formData),
     colorScheme,
     rotation,