@carto/kepler.gl 0.0.71-alpha.6 → 0.0.71-alpha.8

package/src/components/common/styled-components.js

@@ -478,41 +478,10 @@ export const StyledModalInputFootnote = styled.div.attrs({
 export const StyledMapContainer = styled.div`
   width: 100%;
   height: 100%;
-  .mapboxgl-map {
-    .mapboxgl-missing-css {
+  .maplibregl-ctrl {
+    &.maplibregl-ctrl-attrib {
       display: none;
     }
-    .mapboxgl-ctrl-attrib {
-      display: none;
-    }
-  }
-`;
-
-export const StyledAttrbution = styled.div.attrs({
-  className: 'mapbox-attribution-container'
-})`
-  bottom: 0;
-  right: 0;
-  position: absolute;
-  display: block;
-  margin: 0 10px 2px;
-  z-index: 0;
-
-  .attrition-logo {
-    display: flex;
-    font-size: 10px;
-    justify-content: flex-end;
-    align-items: center;
-    color: ${props => props.theme.labelColor};
-    margin-bottom: -4px;
-
-    a.mapboxgl-ctrl-logo {
-      width: 72px;
-      margin-left: 6px;
-    }
-  }
-  a {
-    font-size: 10px;
   }
 `;
 

package/src/components/kepler-gl.js

@@ -88,10 +88,6 @@ const GlobalStyle = styled.div`
     text-decoration: none;
     color: ${props => props.theme.labelColor};
   }
-
-  .mapboxgl-ctrl .mapboxgl-ctrl-logo {
-    display: none;
-  }
 `;
 
 const BottomWidgetOuter = styled.div(

package/src/components/map-container.js

@@ -32,24 +32,19 @@ import {errorNotification} from 'utils/notifications-utils';
 // components
 import MapPopoverFactory from 'components/map/map-popover';
 import MapControlFactory from 'components/map/map-control';
-import {StyledMapContainer, StyledAttrbution} from 'components/common/styled-components';
+import {StyledMapContainer} from 'components/common/styled-components';
 
 import EditorFactory from './editor/editor';
 
 // utils
-import {generateMapboxLayers, updateMapboxLayers} from 'layers/mapbox-utils';
+import {generateMapboxLayers} from 'layers/mapbox-utils';
 import {setLayerBlending} from 'utils/gl-utils';
 import {transformRequest} from 'utils/map-style-utils/mapbox-utils';
 import {renderDeckGlLayer, prepareLayersToRender, prepareLayersForDeck} from 'utils/layer-utils';
 
 // default-settings
 import ThreeDBuildingLayer from 'deckgl-layers/3d-building-layer/3d-building-layer';
-import {
-  FILTER_TYPES,
-  GEOCODER_LAYER_ID,
-  MASK_LAYER_ID,
-  THROTTLE_NOTIFICATION_TIME
-} from 'constants/default-settings';
+import {FILTER_TYPES, MASK_LAYER_ID, THROTTLE_NOTIFICATION_TIME} from 'constants/default-settings';
 
 import {observeDimensions, unobserveDimensions} from '../utils/observe-dimensions';
 import {LOCALE_CODES} from 'localization/locales';
@@ -81,39 +76,8 @@ const MAP_STYLE = {
   }
 };
 
-const MAPBOXGL_STYLE_UPDATE = 'style.load';
-const MAPBOXGL_RENDER = 'render';
 const TRANSITION_DURATION = 0;
 
-export const Attribution = () => (
-  <StyledAttrbution>
-    <div className="attrition-logo">
-      Basemap by:
-      <a
-        className="mapboxgl-ctrl-logo"
-        target="_blank"
-        rel="noopener noreferrer"
-        href="https://www.mapbox.com/"
-        aria-label="Mapbox logo"
-      />
-    </div>
-    <div className="attrition-link">
-      <a href="https://kepler.gl/policy/" target="_blank" rel="noopener noreferrer">
-        © kepler.gl |{' '}
-      </a>
-      <a href="https://www.mapbox.com/about/maps/" target="_blank" rel="noopener noreferrer">
-        © Mapbox |{' '}
-      </a>
-      <a href="http://www.openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer">
-        © OpenStreetMap |{' '}
-      </a>
-      <a href="https://www.mapbox.com/map-feedback/" target="_blank" rel="noopener noreferrer">
-        <strong>Improve this map</strong>
-      </a>
-    </div>
-  </StyledAttrbution>
-);
-
 MapContainerFactory.deps = [MapPopoverFactory, MapControlFactory, EditorFactory];
 
 export default function MapContainerFactory(MapPopover, MapControl, Editor) {
@@ -145,7 +109,7 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
       mapLayers: PropTypes.object,
       onMapToggleLayer: PropTypes.func,
       onMapStyleLoaded: PropTypes.func,
-      onMapRender: PropTypes.func,
+      generateThumbnail: PropTypes.func,
       getMapboxRef: PropTypes.func,
       index: PropTypes.number,
       popupSettings: PropTypes.object
@@ -161,10 +125,6 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
     constructor(props) {
       super(props);
 
-      this.previousLayers = {
-        // [layers.id]: mapboxLayerConfig
-      };
-
       this._deck = null;
       this._ref = createRef();
 
@@ -187,11 +147,6 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
     }
 
     componentWillUnmount() {
-      // unbind mapboxgl event listener
-      if (this._map) {
-        this._map.off(MAPBOXGL_STYLE_UPDATE);
-        this._map.off(MAPBOXGL_RENDER);
-      }
       unobserveDimensions(this._ref.current);
     }
 
@@ -252,41 +207,6 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
       visStateActions.toggleLayerForMap(mapIndex, layerId);
     };
 
-    _onMapboxStyleUpdate = () => {
-      // force refresh mapboxgl layers
-      this.previousLayers = {};
-      this._updateMapboxLayers();
-
-      if (typeof this.props.onMapStyleLoaded === 'function') {
-        this.props.onMapStyleLoaded(this._map);
-      }
-    };
-
-    _setMapboxMap = mapbox => {
-      if (!this._map && mapbox) {
-        this._map = mapbox.getMap();
-        // i noticed in certain context we don't access the actual map element
-        if (!this._map) {
-          return;
-        }
-        // bind mapboxgl event listener
-        this._map.on(MAPBOXGL_STYLE_UPDATE, this._onMapboxStyleUpdate);
-
-        this._map.on(MAPBOXGL_RENDER, () => {
-          if (typeof this.props.onMapRender === 'function') {
-            this.props.onMapRender(this._map);
-          }
-        });
-      }
-
-      if (this.props.getMapboxRef) {
-        // The parent component can gain access to our MapboxGlMap by
-        // providing this callback. Note that 'mapbox' will be null when the
-        // ref is unset (e.g. when a split map is closed).
-        this.props.getMapboxRef(mapbox, this.props.index);
-      }
-    };
-
     _onDeckInitialized(gl) {
       if (this.props.onDeckInitialized) {
         this.props.onDeckInitialized(this._deck, gl);
@@ -351,6 +271,9 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
         mapboxApiUrl,
         maskPolygon
       } = this.props;
+
+      const mousePosition = this._mousePosition;
+
       trackers.drawCount?.increment();
 
       // initialise layers from props if exists
@@ -407,10 +330,12 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
       // Limit renders
       const hasRendered = this._hasRendered;
       const resetHasRendered = () => (hasRendered.current = false);
+
       return (
         <DeckGL
           controller={true}
           {...this.props.deckGlProps}
+          glOptions={{preserveDrawingBuffer: true}}
           viewState={mapState}
           onViewStateChange={({viewState}) => {
             // Limit updates (prevents freezes when dev tools open)
@@ -425,8 +350,15 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
             resetHasRendered();
             this._onBeforeRender(opts);
           }}
-          onHover={visStateActions.onLayerHover}
+          // onHover={visStateActions.onLayerHover}
+          onHover={info => {
+            visStateActions.onLayerHover(info);
+            mousePosition.current = {mousePosition: info.pixel};
+          }}
           onClick={visStateActions.onLayerClick}
+          onDragStart={() => {
+            mousePosition.current = null;
+          }}
           onError={this._onDeckError}
           ref={comp => {
             if (comp && comp.deck && comp.deck !== this._deck) {
@@ -452,23 +384,6 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
       );
     }
 
-    _updateMapboxLayers() {
-      const mapboxLayers = this.mapboxLayersSelector(this.props);
-      if (!Object.keys(mapboxLayers).length && !Object.keys(this.previousLayers).length) {
-        return;
-      }
-
-      updateMapboxLayers(this._map, mapboxLayers, this.previousLayers);
-
-      this.previousLayers = mapboxLayers;
-    }
-
-    _renderMapboxOverlays() {
-      if (this._map && this._map.isStyleLoaded()) {
-        this._updateMapboxLayers();
-      }
-    }
-
     _onViewportChange = viewState => {
       trackers.viewportChangeCount?.increment();
       const {width, height, ...restViewState} = viewState;
@@ -504,8 +419,6 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
         layers,
         MapComponent,
         datasets,
-        mapboxApiAccessToken,
-        mapboxApiUrl,
         mapControls,
         isExport,
         locale,
@@ -514,7 +427,8 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
         interactionConfig,
         editor,
         index,
-        primary
+        primary,
+        generateThumbnail
       } = this.props;
 
       const layersToRender = this.layersToRenderSelector(this.props);
@@ -525,16 +439,11 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
         width: '100%',
         height: '100%',
         preserveDrawingBuffer: true,
-        mapboxApiAccessToken,
-        mapboxApiUrl,
-        transformRequest
+        transformRequest,
+        generateThumbnail
       };
 
-      const isEdit = (mapControls.mapDraw || {}).active;
-
-      const hasGeocoderLayer = layers.find(l => l.id === GEOCODER_LAYER_ID);
       const isSplit = Boolean(mapState.isSplit);
-      const mousePosition = this._mousePosition;
 
       return (
         <>
@@ -562,50 +471,11 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
             onSetLocale={uiStateActions.setLocale}
             onToggleEditorVisibility={visStateActions.toggleEditorVisibility}
           />
-          <MapComponent
-            {...mapProps}
-            key="bottom"
-            ref={this._setMapboxMap}
-            mapStyle={mapStyle.bottomMapStyle}
-            getCursor={this.props.hoverInfo ? () => 'pointer' : undefined}
-            onMouseMove={evt => {
-              // Sending mouse move updates via Redux is expensive. Store
-              // locally and rely on deck.gl to drive render updates
-              // See Builder: features/builder/ui/KeplerGl/MapContainer/MapContainer.tsx
-              mousePosition.current = {mousePosition: evt.point};
-            }}
-          >
+          <MapComponent {...mapProps} key="bottom" mapStyle={mapStyle.bottomMapStyle}>
             {PERF_DEBUG && renderPerformanceStats()}
             {this._renderDeckOverlay(layersForDeck)}
-            {this._renderMapboxOverlays()}
-            <Editor
-              index={index}
-              datasets={datasets}
-              editor={editor}
-              filters={this.polygonFilters(this.props)}
-              isEnabled={isEdit}
-              layers={layers}
-              layersToRender={layersToRender}
-              onDeleteFeature={visStateActions.deleteFeature}
-              onSelect={visStateActions.setSelectedFeature}
-              onUpdate={visStateActions.setFeatures}
-              onTogglePolygonFilter={visStateActions.setPolygonFilterLayer}
-              style={{
-                pointerEvents: isEdit ? 'all' : 'none',
-                position: 'absolute',
-                display: editor.visible ? 'block' : 'none'
-              }}
-            />
           </MapComponent>
-          {mapStyle.topMapStyle || hasGeocoderLayer ? (
-            <div style={MAP_STYLE.top}>
-              <MapComponent {...mapProps} key="top" mapStyle={mapStyle.topMapStyle}>
-                {this._renderDeckOverlay({[GEOCODER_LAYER_ID]: true})}
-              </MapComponent>
-            </div>
-          ) : null}
           {this._renderMapPopover(layersToRender)}
-          {!isSplit || index === 1 ? <Attribution /> : null}
         </>
       );
     }

package/src/components/plot-container.js

@@ -55,12 +55,6 @@ PlotContainerFactory.deps = [MapContainerFactory, MapsLayoutFactory];
 
 // Remove mapbox logo in exported map, because it contains non-ascii characters
 const StyledPlotContainer = styled.div`
-  .mapboxgl-ctrl-bottom-left,
-  .mapboxgl-ctrl-bottom-right,
-  .mapbox-attribution-container {
-    display: none;
-  }
-
   position: absolute;
   top: ${OUT_OF_SCREEN_POSITION}px;
   left: ${OUT_OF_SCREEN_POSITION}px;
@@ -83,7 +77,8 @@ export default function PlotContainerFactory(MapContainer, MapsLayout) {
   class PlotContainer extends Component {
     constructor(props) {
       super(props);
-      this._onMapRender = debounce(this._onMapRender, 500);
+      // _onMapRender defined in cloud-native
+      this._generateThumbnail = null;
       this._retrieveNewScreenshot = debounce(this._retrieveNewScreenshot, 500);
     }
 
@@ -133,12 +128,6 @@ export default function PlotContainerFactory(MapContainer, MapsLayout) {
       })
     );
 
-    _onMapRender = map => {
-      if (map.isStyleLoaded()) {
-        this._retrieveNewScreenshot();
-      }
-    };
-
     _retrieveNewScreenshot = () => {
       if (this.plottingAreaRef.current) {
         convertToPng(this.plottingAreaRef.current, {filter: DOM_FILTER_FUNC})
@@ -203,7 +192,7 @@ export default function PlotContainerFactory(MapContainer, MapsLayout) {
           }
         },
         MapComponent: StaticMap,
-        onMapRender: this._onMapRender,
+        generateThumbnail: this._generateThumbnail,
         isExport: true,
         deckGlProps,
         maskPolygon

package/src/layers/base-layer.js

@@ -25,6 +25,7 @@ import {COORDINATE_SYSTEM, Layer as DeckLayer} from '@deck.gl/core';
 import {_PointLabelLayer as PointLabelLayer} from '@deck.gl/carto';
 import DefaultLayerIcon from './default-layer-icon';
 import {diffUpdateTriggers} from './layer-update';
+import {rgb} from 'd3-color';
 
 import {
   ALL_FIELD_TYPES,
@@ -53,7 +54,7 @@ import {generateHashId, isPlainObject} from 'utils/utils';
 import {getLatLngBounds, notNullorUndefined} from 'utils/data-utils';
 import {getSampleData} from 'utils/table-utils/data-container-utils';
 
-import {hexToRgb, getColorGroupByName, reverseColorRange} from 'utils/color-utils';
+import {hexToRgb, getColorGroupByName, reverseColorRange, checkColorOrFallback} from 'utils/color-utils';
 import {getMaskExtensionProps} from 'utils/layer-utils';
 import {scaleOrdinal} from 'd3-scale';
 
@@ -834,7 +835,8 @@ class Layer {
   getColorScale(colorScale, colorDomain, colorRange) {
     if (colorRange.type === hexColor) {
       return (_, color) => {
-        return hexToRgb(color);
+        const {r, g, b} = rgb(color);
+        return [r, g, b].some(isNaN) ? UNKNOWN_COLOR : [r, g, b];
       };
     } else if (Array.isArray(colorRange.colorMap)) {
       const cMap = new Map();
@@ -1286,9 +1288,12 @@ class Layer {
 
       if (channelConfig?.type === hexColor) {
         const dataSetField = dataset.fields.find(f => f.name === field.colorColumn);
-        const colors = dataset.getColumnLayerDomain(dataSetField, SCALE_TYPES.ordinal);
+        const colors = dataset
+          .getColumnLayerDomain(dataSetField, SCALE_TYPES.ordinal)
+          .slice(0, 20)
+          .map(c => checkColorOrFallback(c));
         this.updateLayerVisConfig({
-          [channel.range]: {...channelConfig, colors: colors.slice(0, 20)}
+          [channel.range]: {...channelConfig, colors}
         });
       }
     });

package/src/utils/color-utils.js

@@ -18,6 +18,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
+import {UNKNOWN_COLOR} from 'constants/default-settings';
+import {rgb as d3Rgb} from 'd3-color';
+
 /**
  * get r g b from hex code
  *
@@ -104,3 +107,9 @@ export function createLinearGradient(direction, colors) {
 
   return `linear-gradient(to ${direction}, ${bands.join(',')})`;
 }
+
+export function checkColorOrFallback(hexColor, fallback = UNKNOWN_COLOR) {
+  const color = d3Rgb(hexColor);
+  const {r, g, b} = color;
+  return [r, g, b].some(isNaN) ? d3Rgb(...fallback).formatHex() : hexColor;
+}

package/src/utils/dom-to-image.js

@@ -515,6 +515,11 @@ function newImages() {
         return Promise.resolve(nd);
       }
 
+      if (background.search(/url\("data:image\/svg\+xml[^"]*"\)/) !== -1) {
+        nd.style.removeProperty('background');
+        return Promise.resolve(nd);
+      }
+
       return inliner
         .inlineAll(background)
         .then(inlined => {

package/src/utils/index.js

@@ -27,7 +27,7 @@ export {
   FIELD_DISPLAY_FORMAT
 } from './data-utils';
 export {createNewDataEntry, datasetColorMaker, findDefaultColorField} from './dataset-utils';
-export {hexToRgb} from './color-utils';
+export {hexToRgb, checkColorOrFallback} from './color-utils';
 export {errorNotification} from './notifications-utils';
 export {dataURItoBlob, downloadFile} from './export-utils';
 export {

package/src/utils/table-utils/kepler-table.js

@@ -46,6 +46,7 @@ import {ALL_FIELD_TYPES, SCALE_TYPES} from 'constants/default-settings';
 
 import {createDataContainer} from './data-container-utils';
 import {uniqueSortedPairByFrequency} from 'utils/data-utils';
+import {checkColorOrFallback} from 'utils/color-utils';
 
 // Unique identifier of each field
 const FID_KEY = 'name';
@@ -351,7 +352,15 @@ class KeplerTable {
       previous.push([current, rightValues[idx]]);
       return previous;
     }, []);
-    return uniqueSortedPairByFrequency(pairing).map(row => ({label: row.left, color: row.right}));
+
+    return uniqueSortedPairByFrequency(pairing)
+      .map(row => {
+        return {
+          label: row.left,
+          color: checkColorOrFallback(row.right)
+        };
+      })
+      .slice(0, 20);
   }
 
   /**