superset-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From maximebeauche...@apache.org
Subject [incubator-superset] branch master updated: Refactoring deckgl (#4293)
Date Wed, 31 Jan 2018 07:03:38 GMT
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 c77bab8  Refactoring deckgl (#4293)
c77bab8 is described below

commit c77bab8160fac364bac2c46387b78ec13ea985b3
Author: Beto Dealmeida <roberto@dealmeida.net>
AuthorDate: Tue Jan 30 23:03:35 2018 -0800

    Refactoring deckgl (#4293)
    
    * Refactoring dekgl
    
    * Refactor layers
    
    * Standardize function name
    
    * Fix exports
    
    * Fix require
    
    * Fix lint
---
 superset/assets/visualizations/deckgl/factory.jsx  | 25 -----------------
 .../assets/visualizations/deckgl/layers/arc.jsx    | 31 +++++++++++++++++++++-
 .../visualizations/deckgl/layers/geojson.jsx       | 31 +++++++++++++++++++++-
 .../assets/visualizations/deckgl/layers/grid.jsx   | 31 +++++++++++++++++++++-
 .../assets/visualizations/deckgl/layers/hex.jsx    | 31 +++++++++++++++++++++-
 .../assets/visualizations/deckgl/layers/index.js   | 16 +++++------
 .../assets/visualizations/deckgl/layers/path.jsx   | 31 +++++++++++++++++++++-
 .../visualizations/deckgl/layers/polygon.jsx       | 31 +++++++++++++++++++++-
 .../visualizations/deckgl/layers/scatter.jsx       | 31 +++++++++++++++++++++-
 .../visualizations/deckgl/layers/screengrid.jsx    | 31 +++++++++++++++++++++-
 superset/assets/visualizations/main.js             | 17 ++++++------
 11 files changed, 256 insertions(+), 50 deletions(-)

diff --git a/superset/assets/visualizations/deckgl/factory.jsx b/superset/assets/visualizations/deckgl/factory.jsx
deleted file mode 100644
index fa6c372..0000000
--- 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 8e04e9a..ebeff3c 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 7792d23..7f09363 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 ed970d2..1e7ff1d 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 86fb534..7dc4d8b 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 4e354e5..d8d25d5 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 df2c1b0..a20c2bb 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 8862827..920fb6a 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 0f591a2..ed1dd79 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 ca589cd..7494c67 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 93c12e8..40b6592 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;

-- 
To stop receiving notification emails like this one, please contact
maximebeauchemin@apache.org.

Mime
View raw message