mistercrunch closed pull request #4293: Refactoring deckgl
URL: https://github.com/apache/incubator-superset/pull/4293
This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:
As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):
diff --git a/superset/assets/visualizations/deckgl/factory.jsx
b/superset/assets/visualizations/deckgl/factory.jsx
deleted file mode 100644
index fa6c372979..0000000000
--- a/superset/assets/visualizations/deckgl/factory.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-import DeckGLContainer from './DeckGLContainer';
-import layerGenerators from './layers';
-
-export default function deckglFactory(slice, payload, setControlValue) {
- const fd = slice.formData;
- const layer = layerGenerators[fd.viz_type](fd, payload, slice);
- const viewport = {
- ...fd.viewport,
- width: slice.width(),
- height: slice.height(),
- };
- ReactDOM.render(
- <DeckGLContainer
- mapboxApiAccessToken={payload.data.mapboxApiKey}
- viewport={viewport}
- layers={[layer]}
- mapStyle={fd.mapbox_style}
- setControlValue={setControlValue}
- />,
- document.getElementById(slice.containerId),
- );
-}
diff --git a/superset/assets/visualizations/deckgl/layers/arc.jsx
b/superset/assets/visualizations/deckgl/layers/arc.jsx
index 8e04e9af52..ebeff3cb89 100644
--- a/superset/assets/visualizations/deckgl/layers/arc.jsx
+++ b/superset/assets/visualizations/deckgl/layers/arc.jsx
@@ -1,9 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
import { ArcLayer } from 'deck.gl';
+import DeckGLContainer from './../DeckGLContainer';
+
import * as common from './common';
import sandboxedEval from '../../../javascripts/modules/sandbox';
-export default function arcLayer(formData, payload, slice) {
+function getLayer(formData, payload, slice) {
const fd = formData;
const fc = fd.color_picker;
let data = payload.data.arcs.map(d => ({
@@ -24,3 +29,27 @@ export default function arcLayer(formData, payload, slice) {
...common.commonLayerProps(fd, slice),
});
}
+
+function deckArc(slice, payload, setControlValue) {
+ const layer = getLayer(slice.formData, payload, slice);
+ const viewport = {
+ ...slice.formData.viewport,
+ width: slice.width(),
+ height: slice.height(),
+ };
+ ReactDOM.render(
+ <DeckGLContainer
+ mapboxApiAccessToken={payload.data.mapboxApiKey}
+ viewport={viewport}
+ layers={[layer]}
+ mapStyle={slice.formData.mapbox_style}
+ setControlValue={setControlValue}
+ />,
+ document.getElementById(slice.containerId),
+ );
+}
+
+module.exports = {
+ default: deckArc,
+ getLayer,
+};
diff --git a/superset/assets/visualizations/deckgl/layers/geojson.jsx
b/superset/assets/visualizations/deckgl/layers/geojson.jsx
index 7792d23c80..7f0936304e 100644
--- a/superset/assets/visualizations/deckgl/layers/geojson.jsx
+++ b/superset/assets/visualizations/deckgl/layers/geojson.jsx
@@ -1,5 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
import { GeoJsonLayer } from 'deck.gl';
+import DeckGLContainer from './../DeckGLContainer';
+
import * as common from './common';
import { hexToRGB } from '../../../javascripts/modules/colors';
import sandboxedEval from '../../../javascripts/modules/sandbox';
@@ -53,7 +58,7 @@ const recurseGeoJson = (node, propOverrides, extraProps) => {
}
};
-export default function geoJsonLayer(formData, payload, slice) {
+function getLayer(formData, payload, slice) {
const fd = formData;
const fc = fd.fill_color_picker;
const sc = fd.stroke_color_picker;
@@ -87,3 +92,27 @@ export default function geoJsonLayer(formData, payload,
slice) {
...common.commonLayerProps(fd, slice),
});
}
+
+function deckGeoJson(slice, payload, setControlValue) {
+ const layer = getLayer(slice.formData, payload, slice);
+ const viewport = {
+ ...slice.formData.viewport,
+ width: slice.width(),
+ height: slice.height(),
+ };
+ ReactDOM.render(
+ <DeckGLContainer
+ mapboxApiAccessToken={payload.data.mapboxApiKey}
+ viewport={viewport}
+ layers={[layer]}
+ mapStyle={slice.formData.mapbox_style}
+ setControlValue={setControlValue}
+ />,
+ document.getElementById(slice.containerId),
+ );
+}
+
+module.exports = {
+ default: deckGeoJson,
+ getLayer,
+};
diff --git a/superset/assets/visualizations/deckgl/layers/grid.jsx
b/superset/assets/visualizations/deckgl/layers/grid.jsx
index ed970d2976..1e7ff1d70b 100644
--- a/superset/assets/visualizations/deckgl/layers/grid.jsx
+++ b/superset/assets/visualizations/deckgl/layers/grid.jsx
@@ -1,9 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
import { GridLayer } from 'deck.gl';
+import DeckGLContainer from './../DeckGLContainer';
+
import * as common from './common';
import sandboxedEval from '../../../javascripts/modules/sandbox';
-export default function getLayer(formData, payload, slice) {
+function getLayer(formData, payload, slice) {
const fd = formData;
const c = fd.color_picker;
let data = payload.data.features.map(d => ({
@@ -31,3 +36,27 @@ export default function getLayer(formData, payload, slice) {
...common.commonLayerProps(fd, slice),
});
}
+
+function deckGrid(slice, payload, setControlValue) {
+ const layer = getLayer(slice.formData, payload, slice);
+ const viewport = {
+ ...slice.formData.viewport,
+ width: slice.width(),
+ height: slice.height(),
+ };
+ ReactDOM.render(
+ <DeckGLContainer
+ mapboxApiAccessToken={payload.data.mapboxApiKey}
+ viewport={viewport}
+ layers={[layer]}
+ mapStyle={slice.formData.mapbox_style}
+ setControlValue={setControlValue}
+ />,
+ document.getElementById(slice.containerId),
+ );
+}
+
+module.exports = {
+ default: deckGrid,
+ getLayer,
+};
diff --git a/superset/assets/visualizations/deckgl/layers/hex.jsx
b/superset/assets/visualizations/deckgl/layers/hex.jsx
index 86fb5349d5..7dc4d8b025 100644
--- a/superset/assets/visualizations/deckgl/layers/hex.jsx
+++ b/superset/assets/visualizations/deckgl/layers/hex.jsx
@@ -1,9 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
import { HexagonLayer } from 'deck.gl';
+import DeckGLContainer from './../DeckGLContainer';
+
import * as common from './common';
import sandboxedEval from '../../../javascripts/modules/sandbox';
-export default function getLayer(formData, payload, slice) {
+function getLayer(formData, payload, slice) {
const fd = formData;
const c = fd.color_picker;
let data = payload.data.features.map(d => ({
@@ -31,3 +36,27 @@ export default function getLayer(formData, payload, slice) {
...common.commonLayerProps(fd, slice),
});
}
+
+function deckHex(slice, payload, setControlValue) {
+ const layer = getLayer(slice.formData, payload, slice);
+ const viewport = {
+ ...slice.formData.viewport,
+ width: slice.width(),
+ height: slice.height(),
+ };
+ ReactDOM.render(
+ <DeckGLContainer
+ mapboxApiAccessToken={payload.data.mapboxApiKey}
+ viewport={viewport}
+ layers={[layer]}
+ mapStyle={slice.formData.mapbox_style}
+ setControlValue={setControlValue}
+ />,
+ document.getElementById(slice.containerId),
+ );
+}
+
+module.exports = {
+ default: deckHex,
+ getLayer,
+};
diff --git a/superset/assets/visualizations/deckgl/layers/index.js
b/superset/assets/visualizations/deckgl/layers/index.js
index 4e354e535e..d8d25d5b0e 100644
--- a/superset/assets/visualizations/deckgl/layers/index.js
+++ b/superset/assets/visualizations/deckgl/layers/index.js
@@ -1,12 +1,12 @@
/* eslint camelcase: 0 */
-import deck_grid from './grid';
-import deck_screengrid from './screengrid';
-import deck_path from './path';
-import deck_hex from './hex';
-import deck_scatter from './scatter';
-import deck_geojson from './geojson';
-import deck_arc from './arc';
-import deck_polygon from './polygon';
+import { getLayer as deck_grid } from './grid';
+import { getLayer as deck_screengrid } from './screengrid';
+import { getLayer as deck_path } from './path';
+import { getLayer as deck_hex } from './hex';
+import { getLayer as deck_scatter } from './scatter';
+import { getLayer as deck_geojson } from './geojson';
+import { getLayer as deck_arc } from './arc';
+import { getLayer as deck_polygon } from './polygon';
const layerGenerators = {
deck_grid,
diff --git a/superset/assets/visualizations/deckgl/layers/path.jsx
b/superset/assets/visualizations/deckgl/layers/path.jsx
index df2c1b0c1a..a20c2bbdb0 100644
--- a/superset/assets/visualizations/deckgl/layers/path.jsx
+++ b/superset/assets/visualizations/deckgl/layers/path.jsx
@@ -1,9 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
import { PathLayer } from 'deck.gl';
+import DeckGLContainer from './../DeckGLContainer';
+
import * as common from './common';
import sandboxedEval from '../../../javascripts/modules/sandbox';
-export default function getLayer(formData, payload, slice) {
+function getLayer(formData, payload, slice) {
const fd = formData;
const c = fd.color_picker;
const fixedColor = [c.r, c.g, c.b, 255 * c.a];
@@ -27,3 +32,27 @@ export default function getLayer(formData, payload, slice) {
...common.commonLayerProps(fd, slice),
});
}
+
+function deckPath(slice, payload, setControlValue) {
+ const layer = getLayer(slice.formData, payload, slice);
+ const viewport = {
+ ...slice.formData.viewport,
+ width: slice.width(),
+ height: slice.height(),
+ };
+ ReactDOM.render(
+ <DeckGLContainer
+ mapboxApiAccessToken={payload.data.mapboxApiKey}
+ viewport={viewport}
+ layers={[layer]}
+ mapStyle={slice.formData.mapbox_style}
+ setControlValue={setControlValue}
+ />,
+ document.getElementById(slice.containerId),
+ );
+}
+
+module.exports = {
+ default: deckPath,
+ getLayer,
+};
diff --git a/superset/assets/visualizations/deckgl/layers/polygon.jsx
b/superset/assets/visualizations/deckgl/layers/polygon.jsx
index 886282707f..920fb6a89a 100644
--- a/superset/assets/visualizations/deckgl/layers/polygon.jsx
+++ b/superset/assets/visualizations/deckgl/layers/polygon.jsx
@@ -1,9 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
import { PolygonLayer } from 'deck.gl';
+import DeckGLContainer from './../DeckGLContainer';
+
import * as common from './common';
import sandboxedEval from '../../../javascripts/modules/sandbox';
-export default function polygonLayer(formData, payload, slice) {
+function getLayer(formData, payload, slice) {
const fd = formData;
const fc = fd.fill_color_picker;
let data = payload.data.features.map(d => ({
@@ -26,3 +31,27 @@ export default function polygonLayer(formData, payload,
slice) {
...common.commonLayerProps(fd, slice),
});
}
+
+function deckPolygon(slice, payload, setControlValue) {
+ const layer = getLayer(slice.formData, payload, slice);
+ const viewport = {
+ ...slice.formData.viewport,
+ width: slice.width(),
+ height: slice.height(),
+ };
+ ReactDOM.render(
+ <DeckGLContainer
+ mapboxApiAccessToken={payload.data.mapboxApiKey}
+ viewport={viewport}
+ layers={[layer]}
+ mapStyle={slice.formData.mapbox_style}
+ setControlValue={setControlValue}
+ />,
+ document.getElementById(slice.containerId),
+ );
+}
+
+module.exports = {
+ default: deckPolygon,
+ getLayer,
+};
diff --git a/superset/assets/visualizations/deckgl/layers/scatter.jsx
b/superset/assets/visualizations/deckgl/layers/scatter.jsx
index 0f591a2123..ed1dd792af 100644
--- a/superset/assets/visualizations/deckgl/layers/scatter.jsx
+++ b/superset/assets/visualizations/deckgl/layers/scatter.jsx
@@ -1,11 +1,16 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
import { ScatterplotLayer } from 'deck.gl';
+import DeckGLContainer from './../DeckGLContainer';
+
import * as common from './common';
import { getColorFromScheme, hexToRGB } from
'../../../javascripts/modules/colors';
import { unitToRadius } from '../../../javascripts/modules/geo';
import sandboxedEval from '../../../javascripts/modules/sandbox';
-export default function getLayer(formData, payload, slice) {
+function getLayer(formData, payload, slice) {
const fd = formData;
const c = fd.color_picker || { r: 0, g: 0, b: 0, a: 1 };
const fixedColor = [c.r, c.g, c.b, 255 * c.a];
@@ -42,3 +47,27 @@ export default function getLayer(formData, payload, slice) {
...common.commonLayerProps(fd, slice),
});
}
+
+function deckScatter(slice, payload, setControlValue) {
+ const layer = getLayer(slice.formData, payload, slice);
+ const viewport = {
+ ...slice.formData.viewport,
+ width: slice.width(),
+ height: slice.height(),
+ };
+ ReactDOM.render(
+ <DeckGLContainer
+ mapboxApiAccessToken={payload.data.mapboxApiKey}
+ viewport={viewport}
+ layers={[layer]}
+ mapStyle={slice.formData.mapbox_style}
+ setControlValue={setControlValue}
+ />,
+ document.getElementById(slice.containerId),
+ );
+}
+
+module.exports = {
+ default: deckScatter,
+ getLayer,
+};
diff --git a/superset/assets/visualizations/deckgl/layers/screengrid.jsx
b/superset/assets/visualizations/deckgl/layers/screengrid.jsx
index ca589cd8d5..7494c67d3d 100644
--- a/superset/assets/visualizations/deckgl/layers/screengrid.jsx
+++ b/superset/assets/visualizations/deckgl/layers/screengrid.jsx
@@ -1,9 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
import { ScreenGridLayer } from 'deck.gl';
+import DeckGLContainer from './../DeckGLContainer';
+
import * as common from './common';
import sandboxedEval from '../../../javascripts/modules/sandbox';
-export default function getLayer(formData, payload, slice) {
+function getLayer(formData, payload, slice) {
const fd = formData;
const c = fd.color_picker;
let data = payload.data.features.map(d => ({
@@ -31,3 +36,27 @@ export default function getLayer(formData, payload, slice) {
...common.commonLayerProps(fd, slice),
});
}
+
+function deckScreenGrid(slice, payload, setControlValue) {
+ const layer = getLayer(slice.formData, payload, slice);
+ const viewport = {
+ ...slice.formData.viewport,
+ width: slice.width(),
+ height: slice.height(),
+ };
+ ReactDOM.render(
+ <DeckGLContainer
+ mapboxApiAccessToken={payload.data.mapboxApiKey}
+ viewport={viewport}
+ layers={[layer]}
+ mapStyle={slice.formData.mapbox_style}
+ setControlValue={setControlValue}
+ />,
+ document.getElementById(slice.containerId),
+ );
+}
+
+module.exports = {
+ default: deckScreenGrid,
+ getLayer,
+};
diff --git a/superset/assets/visualizations/main.js
b/superset/assets/visualizations/main.js
index 93c12e8617..40b6592d90 100644
--- a/superset/assets/visualizations/main.js
+++ b/superset/assets/visualizations/main.js
@@ -1,5 +1,4 @@
/* eslint-disable global-require */
-import deckglFactory from './deckgl/factory';
// You ***should*** use these to reference viz_types in code
export const VIZ_TYPES = {
@@ -89,14 +88,14 @@ const vizMap = {
[VIZ_TYPES.event_flow]: require('./EventFlow.jsx'),
[VIZ_TYPES.paired_ttest]: require('./paired_ttest.jsx'),
[VIZ_TYPES.partition]: require('./partition.js'),
- [VIZ_TYPES.deck_scatter]: deckglFactory,
- [VIZ_TYPES.deck_screengrid]: deckglFactory,
- [VIZ_TYPES.deck_grid]: deckglFactory,
- [VIZ_TYPES.deck_hex]: deckglFactory,
- [VIZ_TYPES.deck_path]: deckglFactory,
- [VIZ_TYPES.deck_geojson]: deckglFactory,
- [VIZ_TYPES.deck_arc]: deckglFactory,
- [VIZ_TYPES.deck_polygon]: deckglFactory,
+ [VIZ_TYPES.deck_scatter]: require('./deckgl/layers/scatter.jsx').default,
+ [VIZ_TYPES.deck_screengrid]:
require('./deckgl/layers/screengrid.jsx').default,
+ [VIZ_TYPES.deck_grid]: require('./deckgl/layers/grid.jsx').default,
+ [VIZ_TYPES.deck_hex]: require('./deckgl/layers/hex.jsx').default,
+ [VIZ_TYPES.deck_path]: require('./deckgl/layers/path.jsx').default,
+ [VIZ_TYPES.deck_geojson]: require('./deckgl/layers/geojson.jsx').default,
+ [VIZ_TYPES.deck_arc]: require('./deckgl/layers/arc.jsx').default,
+ [VIZ_TYPES.deck_polygon]: require('./deckgl/layers/polygon.jsx').default,
[VIZ_TYPES.deck_multi]: require('./deckgl/multi.jsx'),
};
export default vizMap;
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
With regards,
Apache Git Services
