[Bug] Prevent crash in react-map-gl when zoom cannot be calculated (#…

…1365)

* fix: prevent crash in react-map-gl when zoom cannot be calculated
* export selectors from kepler-gl.js
* add plot container test

Signed-off-by: Shan He <heshan0131@gmail.com>
Co-authored-by: Ilija Puaca <ilija@unfolded.ai>

src/components/geocoder-panel.js

@@ -23,8 +23,8 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Processors from 'processors';
 import {FlyToInterpolator} from '@deck.gl/core';
-import geoViewport from '@mapbox/geo-viewport';
 import KeplerGlSchema from 'schemas';
+import {getCenterAndZoomFromBounds} from 'utils/projection-utils';
 
 import Geocoder from './geocoder/geocoder';
 import {
@@ -135,19 +135,22 @@ export default function GeocoderPanelFactory() {
         lon + GEOCODER_GEO_OFFSET,
         lat + GEOCODER_GEO_OFFSET
       ];
-      const {zoom} = geoViewport.viewport(bounds, [
-        this.props.mapState.width,
-        this.props.mapState.height
-      ]);
-      // center being calculated by geo-vieweport.viewport has a complex logic that
-      // projects and then unprojects the coordinates to determine the center
-      // Calculating a simple average instead as that is the expected behavior in most of cases
-      const center = [(bounds[0] + bounds[2]) / 2, (bounds[1] + bounds[3]) / 2];
+      const centerAndZoom = getCenterAndZoomFromBounds(bounds, {
+        width: this.props.mapState.width,
+        height: this.props.mapState.height
+      });
+
+      if (!centerAndZoom) {
+        // failed to fit bounds
+        return;
+      }
 
       this.props.updateMap({
-        latitude: center[1],
-        longitude: center[0],
-        zoom,
+        latitude: centerAndZoom.center[1],
+        longitude: centerAndZoom.center[0],
+        // For marginal or invalid bounds, zoom may be NaN. Make sure to provide a valid value in order
+        // to avoid corrupt state and potential crashes as zoom is expected to be a number
+        ...(Number.isFinite(centerAndZoom.zoom) ? {zoom: centerAndZoom.zoom} : {}),
         pitch: 0,
         bearing: 0,
         transitionDuration: this.props.transitionDuration,

src/components/index.js

@@ -34,7 +34,7 @@ import {appInjector} from './container';
 export {default as KeplerGl, default, injectComponents, ContainerFactory} from './container';
 
 // factories
-export {default as KeplerGlFactory} from './kepler-gl';
+export {default as KeplerGlFactory, DEFAULT_KEPLER_GL_PROPS} from './kepler-gl';
 export {default as SidePanelFactory, PanelTitleFactory} from './side-panel';
 export {default as MapContainerFactory} from './map-container';
 export {