enhance(kepler-layers) use kepler provided utility functions to render

modules/react/src/kepler-layers.js

@@ -1,4 +1,5 @@
 import {createSelector} from 'reselect';
+import {renderDeckGlLayer, prepareLayersToRender} from 'kepler.gl/dist/utils/layer-utils';
 
 /**
  * Kepler Layer Creation
@@ -13,21 +14,8 @@ const layersToRenderSelector = createSelector(
   layersSelector,
   layerDataSelector,
   mapLayersSelector,
-  // {[id]: true \ false}
-  (layers, layerData, mapLayers) =>
-    layers.reduce(
-      (accu, layer, idx) => ({
-        ...accu,
-        [layer.id]: layer.shouldRenderLayer(layerData[idx]) && _isVisibleMapLayer(layer, mapLayers) // eslint-disable-line
-      }),
-      {}
-    )
+  prepareLayersToRender
 );
-/* component private functions */
-function _isVisibleMapLayer(layer, mapLayers) {
-  // if layer.id is not in mapLayers, don't render it
-  return !mapLayers || (mapLayers && mapLayers[layer.id]);
-}
 
 function _onLayerSetDomain(idx, colorDomain) {
   // TODO: this isn't dispatched to the redux store yet.
@@ -36,47 +24,47 @@ function _onLayerSetDomain(idx, colorDomain) {
   // });
 }
 
-function renderLayer(overlays, idx, map, viewState) {
+export function createKeplerLayers(map, viewState) {
+  const layersToRender = layersToRenderSelector(map);
+
   const {
-    visState: {datasets, layers, layerData, hoverInfo, clicked, interactionConfig, animationConfig},
+    visState: {
+      datasets,
+      layers,
+      layerData,
+      hoverInfo,
+      clicked,
+      interactionConfig,
+      animationConfig,
+      layerOrder
+    },
     mapState
   } = map;
 
-  const layer = layers[idx];
-  const data = layerData[idx];
-  const {gpuFilter} = datasets[layer.config.dataId] || {};
-
-  const objectHovered = clicked || hoverInfo;
-  const layerCallbacks = {
-    onSetLayerDomain: val => _onLayerSetDomain(idx, val)
+  const props = {
+    datasets,
+    layers,
+    layerData,
+    hoverInfo,
+    clicked,
+    mapState: {...mapState, ...viewState},
+    interactionConfig,
+    animationConfig
   };
 
-  // Layer is Layer class
-  const layerOverlay = layer
-    .renderLayer({
-      data,
-      gpuFilter,
-      idx,
-      interactionConfig,
-      layerCallbacks,
-      mapState: {...mapState, ...viewState},
-      animationConfig,
-      objectHovered
-    })
-    .map(deckLayer => deckLayer.clone({pickable: false}));
-  return overlays.concat(layerOverlay || []);
-}
-
-export function createKeplerLayers(map, viewState) {
-  const layersToRender = layersToRenderSelector(map);
   // returns an arr of DeckGL layer objects
-  const {layerOrder, layerData, layers} = map.visState;
   if (layerData && layerData.length) {
     return layerOrder
       .slice()
       .reverse()
-      .filter(idx => layers[idx].overlayType === 'deckgl' && layersToRender[layers[idx].id])
-      .reduce((overlays, idx) => renderLayer(overlays, idx, map, viewState), []); // Slicing & reversing to create same layer order as Kepler
+      .filter(idx => layersToRender[layers[idx].id])
+      .reduce((overlays, idx) => {
+        const layerCallbacks = {
+          onSetLayerDomain: val => _onLayerSetDomain(idx, val)
+        };
+        const layerOverlay = renderDeckGlLayer(props, layerCallbacks, idx);
+        return overlays.concat(layerOverlay || []);
+      }, []);
   }
   return [];
 }

package.json

@@ -69,7 +69,7 @@
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-react": "^7.10",
     "gl": "^4.9.0",
-    "kepler.gl": "^2.5.1",
+    "kepler.gl": "2.5.5",
     "lerna": "^3.16.4",
     "lodash": "4.17.21",
     "ocular-dev-tools": "^0.3.0",