@carto/kepler.gl 0.0.1-alpha.map-libre

package/src/components/map-container.js

@@ -0,0 +1,502 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+// libraries
+import React, {Component, createRef} from 'react';
+import PropTypes from 'prop-types';
+import MapboxGLMap from 'react-map-gl';
+import DeckGL from '@deck.gl/react';
+import {createSelector} from 'reselect';
+import {OPERATION, Layer} from '@deck.gl/core';
+import {SolidPolygonLayer} from '@deck.gl/layers';
+import {TileLayer} from '@deck.gl/geo-layers';
+import {errorNotification} from 'utils/notifications-utils';
+
+// components
+import MapPopoverFactory from 'components/map/map-popover';
+import MapControlFactory from 'components/map/map-control';
+import {StyledMapContainer} from 'components/common/styled-components';
+
+import EditorFactory from './editor/editor';
+
+// 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, MASK_LAYER_ID, THROTTLE_NOTIFICATION_TIME} from 'constants/default-settings';
+
+import {observeDimensions, unobserveDimensions} from '../utils/observe-dimensions';
+import {LOCALE_CODES} from 'localization/locales';
+
+// Performance debugging
+import {createTracker, createLayerUpdateTracker, renderPerformanceStats} from './performance';
+const trackers = {};
+const PERF_DEBUG = window?.location?.search?.includes('PERF_DEBUG');
+if (PERF_DEBUG) {
+  trackers.drawCount = createTracker('draws');
+  trackers.viewportChangeCount = createTracker('viewport changes');
+  createLayerUpdateTracker('state updates', [Layer, TileLayer]);
+}
+
+/** @type {{[key: string]: React.CSSProperties}} */
+const MAP_STYLE = {
+  container: {
+    display: 'inline-block',
+    position: 'relative',
+    width: '100%',
+    height: '100%'
+  },
+  top: {
+    position: 'absolute',
+    top: '0px',
+    pointerEvents: 'none',
+    width: '100%',
+    height: '100%'
+  }
+};
+
+const TRANSITION_DURATION = 0;
+
+MapContainerFactory.deps = [MapPopoverFactory, MapControlFactory, EditorFactory];
+
+export default function MapContainerFactory(MapPopover, MapControl, Editor) {
+  class MapContainer extends Component {
+    static propTypes = {
+      // required
+      datasets: PropTypes.object,
+      interactionConfig: PropTypes.object.isRequired,
+      layerBlending: PropTypes.string.isRequired,
+      layerOrder: PropTypes.arrayOf(PropTypes.any).isRequired,
+      layerData: PropTypes.arrayOf(PropTypes.any).isRequired,
+      layers: PropTypes.arrayOf(PropTypes.any).isRequired,
+      filters: PropTypes.arrayOf(PropTypes.any).isRequired,
+      mapState: PropTypes.object.isRequired,
+      mapControls: PropTypes.object.isRequired,
+      mapStyle: PropTypes.object.isRequired,
+      mapboxApiAccessToken: PropTypes.string.isRequired,
+      mapboxApiUrl: PropTypes.string,
+      visStateActions: PropTypes.object.isRequired,
+      mapStateActions: PropTypes.object.isRequired,
+      uiStateActions: PropTypes.object.isRequired,
+
+      // optional
+      primary: PropTypes.bool, // primary one will be reporting its size to appState
+      readOnly: PropTypes.bool,
+      isExport: PropTypes.bool,
+      clicked: PropTypes.object,
+      hoverInfo: PropTypes.object,
+      mapLayers: PropTypes.object,
+      onMapToggleLayer: PropTypes.func,
+      onMapStyleLoaded: PropTypes.func,
+      generateThumbnail: PropTypes.func,
+      getMapboxRef: PropTypes.func,
+      index: PropTypes.number,
+      popupSettings: PropTypes.object
+    };
+
+    static defaultProps = {
+      MapComponent: MapboxGLMap,
+      deckGlProps: {},
+      index: 0,
+      primary: true
+    };
+
+    constructor(props) {
+      super(props);
+
+      this._deck = null;
+      this._ref = createRef();
+
+      // Render limiting mechanism
+      this._hasRendered = createRef();
+      this._mousePosition = createRef();
+    }
+
+    componentDidMount() {
+      observeDimensions(this._ref.current, this._handleResize);
+    }
+
+    componentDidUpdate() {
+      const contextLost = this.state?.contextLost;
+
+      if (contextLost) {
+        // eslint-disable-next-line react/no-did-update-set-state
+        this.setState({contextLost: false});
+      }
+    }
+
+    componentWillUnmount() {
+      unobserveDimensions(this._ref.current);
+    }
+
+    _handleResize = dimensions => {
+      const {primary, isExport} = this.props;
+      if (primary) {
+        const {mapStateActions} = this.props;
+        if (!isExport && dimensions && dimensions.width > 0 && dimensions.height > 0) {
+          mapStateActions.updateMap(dimensions);
+        }
+      }
+    };
+
+    layersSelector = props => props.layers;
+    layerDataSelector = props => props.layerData;
+    mapLayersSelector = props => props.mapLayers;
+    layerOrderSelector = props => props.layerOrder;
+    popupSettingsSelector = props => props.popupSettings;
+
+    layersToRenderSelector = createSelector(
+      this.layersSelector,
+      this.layerDataSelector,
+      this.mapLayersSelector,
+      this.popupSettingsSelector,
+      prepareLayersToRender
+    );
+    layersForDeckSelector = createSelector(
+      this.layersSelector,
+      this.layerDataSelector,
+      prepareLayersForDeck
+    );
+    filtersSelector = props => props.filters;
+    polygonFilters = createSelector(this.filtersSelector, filters =>
+      filters.filter(f => f.type === FILTER_TYPES.polygon)
+    );
+
+    mapboxLayersSelector = createSelector(
+      this.layersSelector,
+      this.layerDataSelector,
+      this.layerOrderSelector,
+      this.layersToRenderSelector,
+      generateMapboxLayers
+    );
+
+    /* component private functions */
+    _onCloseMapPopover = () => {
+      this.props.visStateActions.onLayerClick(null);
+    };
+
+    _onLayerSetDomain = (idx, colorDomain) => {
+      this.props.visStateActions.layerConfigChange(this.props.layers[idx], {
+        colorDomain
+      });
+    };
+
+    _handleMapToggleLayer = layerId => {
+      const {index: mapIndex = 0, visStateActions} = this.props;
+      visStateActions.toggleLayerForMap(mapIndex, layerId);
+    };
+
+    _onDeckInitialized(gl) {
+      if (this.props.onDeckInitialized) {
+        this.props.onDeckInitialized(this._deck, gl);
+      }
+    }
+
+    _onBeforeRender = ({gl}) => {
+      setLayerBlending(gl, this.props.layerBlending);
+    };
+
+    _onDeckError = (error, layer) => {
+      if (error?.message === 'WebGL context is lost') {
+        this.setState({contextLost: true});
+        return;
+      }
+
+      const errorMessage = `An error in deck.gl: ${error?.message} in ${layer?.id}`;
+      const notificationId = `${layer?.id}-${error?.message}`;
+
+      // Throttle error notifications, as React doesn't like too many state changes from here.
+      this._deckGLErrorsElapsed = this._deckGLErrorsElapsed || {};
+      const lastShown = this._deckGLErrorsElapsed[notificationId];
+      if (!lastShown || lastShown < Date.now() - THROTTLE_NOTIFICATION_TIME) {
+        this._deckGLErrorsElapsed[notificationId] = Date.now();
+
+        // Create new error notification or update existing one with same id.
+        // Update is required to preserve the order of notifications as they probably are going to "jump" based on order of errors.
+        const {uiStateActions} = this.props;
+        uiStateActions.addNotification(
+          errorNotification({
+            message: errorMessage,
+            id: notificationId
+          })
+        );
+      }
+    };
+
+    /* component render functions */
+
+    /* eslint-disable complexity */
+    _renderMapPopover(layersToRender) {
+      // Overriden in Builder: features/builder/ui/KeplerGl/MapContainer/MapContainer.tsx
+      return null;
+    }
+
+    /* eslint-enable complexity */
+
+    _getHoverXY(viewport, lngLat) {
+      const screenCoord = !viewport || !lngLat ? null : viewport.project(lngLat);
+      return screenCoord && {x: screenCoord[0], y: screenCoord[1]};
+    }
+
+    _renderDeckOverlay(layersForDeck) {
+      const {
+        mapState,
+        mapStyle,
+        layerData,
+        layerOrder,
+        layers,
+        visStateActions,
+        mapboxApiAccessToken,
+        mapboxApiUrl,
+        maskPolygon
+      } = this.props;
+
+      const mousePosition = this._mousePosition;
+
+      trackers.drawCount?.increment();
+
+      // initialise layers from props if exists
+      let deckGlLayers = this.props.deckGlProps?.layers || [];
+
+      // wait until data is ready before render data layers
+      if (layerData && layerData.length) {
+        // last layer render first
+        const dataLayers = layerOrder
+          .slice()
+          .reverse()
+          .filter(idx => layersForDeck[layers[idx].id])
+          .reduce((overlays, idx) => {
+            const layerCallbacks = {
+              onSetLayerDomain: val => this._onLayerSetDomain(idx, val)
+            };
+            const layerOverlay = renderDeckGlLayer(this.props, layerCallbacks, idx);
+            return overlays.concat(layerOverlay || []);
+          }, []);
+        deckGlLayers = deckGlLayers.concat(dataLayers);
+      }
+
+      if (this.props.deckGlProps?.layersOnTop) {
+        deckGlLayers = deckGlLayers.concat(this.props.deckGlProps.layersOnTop);
+      }
+
+      if (maskPolygon) {
+        deckGlLayers.push(
+          new SolidPolygonLayer({
+            id: MASK_LAYER_ID,
+            operation: OPERATION.MASK,
+            data: [maskPolygon],
+            dataComparator: (data, oldData) => data[0] === oldData[0],
+            getPolygon: d => d,
+            getFillColor: [255, 255, 255, 255]
+          })
+        );
+      }
+
+      if (mapStyle.visibleLayerGroups['3d building']) {
+        deckGlLayers.push(
+          new ThreeDBuildingLayer({
+            id: '_keplergl_3d-building',
+            mapboxApiAccessToken,
+            mapboxApiUrl,
+            threeDBuildingColor: mapStyle.threeDBuildingColor,
+            updateTriggers: {
+              getFillColor: mapStyle.threeDBuildingColor
+            }
+          })
+        );
+      }
+
+      // 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)
+            if (!hasRendered.current && viewState.width > 1 && viewState.height > 1) {
+              hasRendered.current = true;
+              this._onViewportChange(viewState);
+            }
+          }}
+          id="default-deckgl-overlay"
+          layers={deckGlLayers}
+          onBeforeRender={opts => {
+            resetHasRendered();
+            this._onBeforeRender(opts);
+          }}
+          // 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) {
+              this._deck = comp.deck;
+            }
+          }}
+          onWebGLInitialized={gl => this._onDeckInitialized(gl)}
+          layerFilter={({layer, viewport}) => {
+            if (
+              isNaN(layer.props.visibilityByZoom?.min) ||
+              isNaN(layer.props.visibilityByZoom?.max)
+            ) {
+              return true;
+            }
+            const currentZoomRange = Math.round(mapState.zoom);
+
+            return (
+              layer.props.visibilityByZoom.min <= currentZoomRange &&
+              layer.props.visibilityByZoom.max >= currentZoomRange
+            );
+          }}
+        />
+      );
+    }
+
+    _onViewportChange = viewState => {
+      trackers.viewportChangeCount?.increment();
+      const {width, height, ...restViewState} = viewState;
+      const {primary, isExport} = this.props;
+      // react-map-gl sends 0,0 dimensions during initialization
+      // after we have received proper dimensions from observeDimensions
+      const next = {
+        ...(width > 0 && height > 0 ? viewState : restViewState),
+        // enabling transition in two maps may lead to endless update loops
+        transitionDuration: primary ? TRANSITION_DURATION : 0
+      };
+      if (typeof this.props.onViewStateChange === 'function') {
+        this.props.onViewStateChange(next);
+      }
+
+      if (!isExport) {
+        this.props.mapStateActions.updateMap(next);
+      }
+    };
+
+    _toggleMapControl = panelId => {
+      const {index, uiStateActions} = this.props;
+
+      uiStateActions.toggleMapControl(panelId, index);
+    };
+
+    /* eslint-disable complexity */
+    _renderMap() {
+      const {
+        mapState,
+        mapStyle,
+        mapStateActions,
+        layers,
+        MapComponent,
+        datasets,
+        mapControls,
+        isExport,
+        locale,
+        uiStateActions,
+        visStateActions,
+        interactionConfig,
+        editor,
+        index,
+        primary,
+        generateThumbnail
+      } = this.props;
+
+      const layersToRender = this.layersToRenderSelector(this.props);
+      const layersForDeck = this.layersForDeckSelector(this.props);
+
+      const mapProps = {
+        ...mapState,
+        width: '100%',
+        height: '100%',
+        preserveDrawingBuffer: true,
+        transformRequest,
+        generateThumbnail
+      };
+
+      const isSplit = Boolean(mapState.isSplit);
+
+      return (
+        <>
+          <MapControl
+            datasets={datasets}
+            availableLocales={Object.keys(LOCALE_CODES)}
+            dragRotate={mapState.dragRotate}
+            isSplit={isSplit}
+            primary={primary}
+            isExport={isExport}
+            layers={layers}
+            layersToRender={layersToRender}
+            mapIndex={index}
+            mapControls={mapControls}
+            readOnly={this.props.readOnly}
+            scale={mapState.scale || 1}
+            top={interactionConfig.geocoder && interactionConfig.geocoder.enabled ? 52 : 0}
+            editor={editor}
+            locale={locale}
+            onTogglePerspective={mapStateActions.togglePerspective}
+            onToggleSplitMap={mapStateActions.toggleSplitMap}
+            onMapToggleLayer={this._handleMapToggleLayer}
+            onToggleMapControl={this._toggleMapControl}
+            onSetEditorMode={visStateActions.setEditorMode}
+            onSetLocale={uiStateActions.setLocale}
+            onToggleEditorVisibility={visStateActions.toggleEditorVisibility}
+          />
+          <MapComponent {...mapProps} key="bottom" mapStyle={mapStyle.bottomMapStyle}>
+            {PERF_DEBUG && renderPerformanceStats()}
+            {this._renderDeckOverlay(layersForDeck)}
+          </MapComponent>
+          {this._renderMapPopover(layersToRender)}
+        </>
+      );
+    }
+
+    render() {
+      const {mapState, mapStyle} = this.props;
+      const contextLost = this.state?.contextLost;
+
+      if (contextLost) {
+        return null;
+      }
+
+      return (
+        <StyledMapContainer ref={this._ref} style={MAP_STYLE.container} globe={mapState.globe}>
+          {mapStyle.bottomMapStyle && this._renderMap()}
+        </StyledMapContainer>
+      );
+    }
+  }
+
+  MapContainer.displayName = 'MapContainer';
+
+  return MapContainer;
+}

package/src/components/maps-layout.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export type MapsLayoutProps = {};
+
+export default function MapsLayoutFactory(): React.Component<MapsLayoutProps>;

package/src/components/maps-layout.js

@@ -0,0 +1,40 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import styled from 'styled-components';
+import React from 'react';
+
+const Outer = styled.div`
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+`;
+
+MapsLayoutFactory.deps = [];
+
+export default function MapsLayoutFactory() {
+  class MapsLayout extends React.Component {
+    render() {
+      return <Outer>{this.props.children}</Outer>;
+    }
+  }
+  return MapsLayout;
+}

package/src/components/modal-container.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import * as VisStateActions from '../actions/vis-state-actions';
+import * as UIStateActions from '../actions/ui-state-actions';
+import * as MapStyleActions from '../actions/map-style-actions';
+import * as ProviderActions from '../actions/provider-actions';
+import {OnErrorCallBack, OnSuccessCallBack} from 'actions/provider-actions';
+
+import {MapState} from 'reducers/map-state-updaters';
+import {MapStyle} from 'reducers/map-style-updaters';
+import {UiState} from 'reducers/ui-state-updaters';
+import {VisState} from 'reducers/vis-state-updaters';
+import {ProviderState} from 'reducers/provider-state-updaters';
+
+export type ModalContainerProps = {
+  appName: string;
+  rootNode: React.ReactNode;
+  containerW: number;
+  containerH: number;
+  mapboxApiAccessToken: string;
+  mapboxApiUrl?: string;
+  mapState: MapState;
+  mapStyle: MapStyle;
+  uiState: UiState;
+  visState: VisState;
+  providerState: ProviderState;
+  visStateActions: typeof VisStateActions;
+  uiStateActions: typeof UIStateActions;
+  mapStyleActions: typeof MapStyleActions;
+  providerActions: typeof ProviderActions;
+  onSaveToStorage: () => void;
+  cloudProviders: object[];
+  onLoadCloudMapSuccess: OnSuccessCallBack;
+  onLoadCloudMapError: OnErrorCallBack;
+  onExportToCloudSuccess: OnSuccessCallBack;
+  onExportToCloudError: OnErrorCallBack;
+};
+
+export default function ModalContainerFactory(): React.Component<ModelContainerProps>;