[fix] fixes the logic to set map overlay type properly when switching…

… layer type (#2135)

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
Co-authored-by: Ilya Boyandin <iboyandin@foursquare.com>

src/components/src/map-container.tsx

@@ -339,6 +339,15 @@ export default function MapContainerFactory(
       this.props.visStateActions.onLayerClick(null);
     };
 
+    _onLayerHover = (
+      idx: number,
+      info: {
+        picked?: boolean;
+      } | null
+    ) => {
+      this.props.visStateActions.onLayerHover(info);
+    };
+
     _onLayerSetDomain = (idx: number, colorDomain: VisualChannelDomain) => {
       this.props.visStateActions.layerConfigChange(this.props.visState.layers[idx], {
         colorDomain
@@ -586,7 +595,10 @@ export default function MapContainerFactory(
               }
             : undefined
         },
-        this._onLayerSetDomain,
+        {
+          onLayerHover: this._onLayerHover,
+          onSetLayerDomain: this._onLayerSetDomain
+        },
         deckGlProps
       );
 

src/components/src/map/layer-hover-info.tsx

@@ -31,6 +31,7 @@ import {
   getTooltipDisplayDeltaValue,
   getTooltipDisplayValue
 } from '@kepler.gl/reducers';
+import {useIntl} from 'react-intl';
 
 export const StyledLayerName = styled(CenterFlexbox)`
   color: ${props => props.theme.textColorHl};
@@ -190,6 +191,7 @@ const CellInfo = ({
 const LayerHoverInfoFactory = () => {
   const LayerHoverInfo = props => {
     const {data, layer} = props;
+    const intl = useIntl();
 
     if (!data || !layer) {
       return null;
@@ -202,7 +204,17 @@ const LayerHoverInfoFactory = () => {
           {props.layer.config.label}
         </StyledLayerName>
         <StyledTable>
-          {props.layer.isAggregated ? <CellInfo {...props} /> : <EntryInfo {...props} />}
+          {data.fieldValues ? (
+            <tbody>
+              {data.fieldValues.map(({labelMessage, value}, i) => (
+                <Row key={i} name={intl.formatMessage({id: labelMessage})} value={value} />
+              ))}
+            </tbody>
+          ) : props.layer.isAggregated ? (
+            <CellInfo {...props} />
+          ) : (
+            <EntryInfo {...props} />
+          )}
         </StyledTable>
       </div>
     );

src/components/src/side-panel/layer-manager.tsx

@@ -21,6 +21,7 @@
 import React, {Component, useCallback} from 'react';
 
 import {injectIntl, WrappedComponentProps} from 'react-intl';
+import styled from 'styled-components';
 import {FormattedMessage} from '@kepler.gl/localization';
 
 import LayerListFactory from './layer-panel/layer-list';
@@ -32,6 +33,7 @@ import AddLayerButtonFactory from './layer-panel/add-layer-button';
 
 import ItemSelector from '../common/item-selector/item-selector';
 import {PanelLabel, SidePanelDivider, SidePanelSection} from '../common/styled-components';
+import InfoHelperFactory from '../common/info-helper';
 
 import {LAYER_BLENDINGS, OVERLAY_BLENDINGS, PANEL_VIEW_TOGGLES} from '@kepler.gl/constants';
 import {Layer, LayerClassesType} from '@kepler.gl/layers';
@@ -48,6 +50,7 @@ type LayerBlendingSelectorProps = {
 type OverlayBlendingSelectorProps = {
   overlayBlending: string;
   updateOverlayBlending: ActionHandler<typeof VisStateActions.updateOverlayBlending>;
+  infoHelper: React.ReactNode;
 } & WrappedComponentProps;
 
 type LayerManagerProps = {
@@ -100,8 +103,18 @@ const LayerBlendingSelector = React.memo(
 );
 LayerBlendingSelector.displayName = 'LayerBlendingSelector';
 
+const InfoHelperWrapper = styled.div`
+  float: right;
+`;
+
+const OverlayBlendingSelectorTitleRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
 const OverlayBlendingSelector = React.memo(
-  ({overlayBlending, updateOverlayBlending, intl}: OverlayBlendingSelectorProps) => {
+  ({overlayBlending, updateOverlayBlending, intl, infoHelper}: OverlayBlendingSelectorProps) => {
     const labeledOverlayBlendings = Object.keys(OVERLAY_BLENDINGS).reduce(
       (acc, current) => ({
         ...acc,
@@ -117,9 +130,12 @@ const OverlayBlendingSelector = React.memo(
 
     return (
       <SidePanelSection>
-        <PanelLabel>
-          <FormattedMessage id="overlayBlending.title" />
-        </PanelLabel>
+        <OverlayBlendingSelectorTitleRow>
+          <PanelLabel>
+            <FormattedMessage id="overlayBlending.title" />
+          </PanelLabel>
+          <InfoHelperWrapper>{infoHelper}</InfoHelperWrapper>
+        </OverlayBlendingSelectorTitleRow>
         <ItemSelector
           selectedItems={intl.formatMessage({id: OVERLAY_BLENDINGS[overlayBlending].label})}
           options={Object.keys(labeledOverlayBlendings)}
@@ -139,7 +155,8 @@ LayerManagerFactory.deps = [
   PanelViewListToggleFactory,
   PanelTitleFactory,
   DatasetSectionFactory,
-  AddLayerButtonFactory
+  AddLayerButtonFactory,
+  InfoHelperFactory
 ];
 
 function LayerManagerFactory(
@@ -148,7 +165,8 @@ function LayerManagerFactory(
   PanelViewListToggle: ReturnType<typeof PanelViewListToggleFactory>,
   PanelTitle: ReturnType<typeof PanelTitleFactory>,
   DatasetSection: ReturnType<typeof DatasetSectionFactory>,
-  AddLayerButton: ReturnType<typeof AddLayerButtonFactory>
+  AddLayerButton: ReturnType<typeof AddLayerButtonFactory>,
+  InfoHelper: ReturnType<typeof InfoHelperFactory>
 ) {
   class LayerManager extends Component<LayerManagerProps> {
     _addLayer = (dataset: string) => {
@@ -241,6 +259,12 @@ function LayerManagerFactory(
             overlayBlending={this.props.overlayBlending}
             updateOverlayBlending={visStateActions.updateOverlayBlending}
             intl={intl}
+            infoHelper={
+              <InfoHelper
+                id={`overlayBlending-description`}
+                description={'overlayBlending.description'}
+              />
+            }
           />
         </div>
       );

src/components/src/side-panel/layer-panel/layer-type-list-item.tsx

@@ -46,6 +46,8 @@ const StyledListItem = styled.div`
       color: ${props => props.theme.activeColor};
       background-size: ${props => props.theme.layerTypeIconSizeSM}px
         ${props => props.theme.layerTypeIconSizeSM}px;
+      height: ${props => props.theme.layerTypeIconSizeSM}px;
+      width: ${props => props.theme.layerTypeIconSizeSM}px;
       margin-right: 12px;
     }
   }
@@ -56,6 +58,8 @@ const StyledListItem = styled.div`
     background-image: url(${`${CLOUDFRONT}/kepler.gl-layer-icon-bg.png`});
     background-size: ${props => props.theme.layerTypeIconSizeL}px
       ${props => props.theme.layerTypeIconSizeL}px;
+    height: ${props => props.theme.layerTypeIconSizeL}px;
+    width: ${props => props.theme.layerTypeIconSizeL}px;
   }
 
   .layer-type-selector__item__label {

src/constants/src/default-settings.ts

@@ -231,41 +231,52 @@ export const DEFAULT_LAYER_GROUPS: DEFAULT_LAYER_GROUP[] = [
   }
 ];
 
+export const BASE_MAP_COLOR_MODES = keyMirror({
+  NONE: null,
+  DARK: null,
+  LIGHT: null
+});
+
 export const DEFAULT_MAP_STYLES = [
   {
     id: 'dark',
     label: 'Dark',
     url: 'mapbox://styles/uberdata/cjoqbbf6l9k302sl96tyvka09',
     icon: `${ICON_PREFIX}/UBER_DARK_V2.png`,
-    layerGroups: DEFAULT_LAYER_GROUPS
+    layerGroups: DEFAULT_LAYER_GROUPS,
+    colorMode: BASE_MAP_COLOR_MODES.DARK
   },
   {
     id: 'light',
     label: 'Light',
     url: 'mapbox://styles/uberdata/cjoqb9j339k1f2sl9t5ic5bn4',
     icon: `${ICON_PREFIX}/UBER_LIGHT_V2.png`,
-    layerGroups: DEFAULT_LAYER_GROUPS
+    layerGroups: DEFAULT_LAYER_GROUPS,
+    colorMode: BASE_MAP_COLOR_MODES.LIGHT
   },
   {
     id: 'muted',
     label: 'Muted Light',
     url: 'mapbox://styles/uberdata/cjfyl03kp1tul2smf5v2tbdd4',
     icon: `${ICON_PREFIX}/UBER_MUTED_LIGHT.png`,
-    layerGroups: DEFAULT_LAYER_GROUPS
+    layerGroups: DEFAULT_LAYER_GROUPS,
+    colorMode: BASE_MAP_COLOR_MODES.LIGHT
   },
   {
     id: 'muted_night',
     label: 'Muted Night',
     url: 'mapbox://styles/uberdata/cjfxhlikmaj1b2soyzevnywgs',
     icon: `${ICON_PREFIX}/UBER_MUTED_NIGHT.png`,
-    layerGroups: DEFAULT_LAYER_GROUPS
+    layerGroups: DEFAULT_LAYER_GROUPS,
+    colorMode: BASE_MAP_COLOR_MODES.DARK
   },
   {
     id: 'satellite',
     label: 'Satellite',
     url: `mapbox://styles/mapbox/satellite-v9`,
     icon: `${ICON_PREFIX}/UBER_SATELLITE.png`,
-    layerGroups: []
+    layerGroups: [],
+    colorMode: BASE_MAP_COLOR_MODES.NONE
   }
 ];
 

src/constants/src/layers.ts

@@ -449,6 +449,13 @@ export const LAYER_VIS_CONFIGS: LayerVisConfigSettings = {
     group: PROPERTY_GROUPS.cell,
     property: 'radius',
     allowCustomValue: true
+  },
+  darkBaseMapEnabled: {
+    type: 'boolean',
+    defaultValue: true,
+    label: 'layerVisConfigs.darkModeEnabled',
+    property: 'darkBaseMapEnabled',
+    group: PROPERTY_GROUPS.display
   }
 };
 

src/layers/src/aggregation-layer.ts

@@ -63,7 +63,10 @@ export const getValueAggrFunc = getPointData => (field, aggregation) => points =
       )
     : points.length;
 
-export const getFilterDataFunc = (filterRange, getFilterValue) => pt =>
+export const getFilterDataFunc = (
+  filterRange: number[][],
+  getFilterValue: (d: any) => number[]
+): ((d: any) => boolean) => pt =>
   getFilterValue(pt).every((val, i) => val >= filterRange[i][0] && val <= filterRange[i][1]);
 
 const getLayerColorRange = (colorRange: ColorRange) => colorRange.colors.map(hexToRgb);

src/layers/src/arc-layer/arc-layer.ts

@@ -239,11 +239,11 @@ export default class ArcLayer extends Layer {
     // get bounds from arcs
     const getPosition = this.getPositionAccessor(dataContainer);
 
-    const sBounds = this.getPointsBounds(dataContainer, (d, i) => {
+    const sBounds = this.getPointsBounds(dataContainer, d => {
       const pos = getPosition(d);
       return [pos[0], pos[1]];
     });
-    const tBounds = this.getPointsBounds(dataContainer, (d, i) => {
+    const tBounds = this.getPointsBounds(dataContainer, d => {
       const pos = getPosition(d);
       return [pos[3], pos[4]];
     });

src/layers/src/base-layer.ts

@@ -160,10 +160,9 @@ export type VisualChannel = {
   defaultMeasure?: any;
   accessor?: string;
   condition?: (config: any) => boolean;
+  defaultValue?: ((config: any) => any) | any;
   getAttributeValue?: (config: any) => (d: any) => any;
 
-  // TODO: define defaultValue
-  defaultValue?: any;
   // TODO: define fixed
   fixed?: any;
 
@@ -177,7 +176,12 @@ export type VisualChannelDescription = {
   measure: string | undefined;
 };
 
-export type ColumnPairs = {[key: string]: {pair: string; fieldPairKey: string}};
+export type ColumnPair = {
+  pair: string;
+  fieldPairKey: string;
+};
+
+export type ColumnPairs = {[key: string]: ColumnPair};
 
 type ColumnValidator = (column: LayerColumn, columns: LayerColumns, allFields: Field[]) => boolean;
 
@@ -221,8 +225,7 @@ export const colorMaker = generateColor();
 
 class Layer {
   id: string;
-  // TODO: define meta
-  meta: {};
+  meta: Record<string, any>;
   visConfigSettings: {
     [key: string]: ValueOf<LayerVisConfigSettings>;
   };
@@ -541,7 +544,7 @@ class Layer {
    * @param pair - field Pair
    * @returns {object} - Column config
    */
-  assignColumnPairs(key, pair) {
+  assignColumnPairs(key: string, pair: string): LayerColumns {
     if (!this.columnPairs || !this.columnPairs?.[key]) {
       // should not end in this state
       return this.config.columns;
@@ -1000,15 +1003,18 @@ class Layer {
    * @param {(d: {index: number}, dc: import('utils/table-utils/data-container-interface').DataContainerInterface) => number[]} getPosition Access kepler.gl layer data from deck.gl layer
    * @return {number[]|null} bounds of the data.
    */
-  getPointsBounds(dataContainer, getPosition) {
+  getPointsBounds(
+    dataContainer: DataContainerInterface,
+    getPosition?: (x: any, dc: DataContainerInterface) => number[]
+  ): number[] | null {
     // no need to loop through the entire dataset
     // get a sample of data to calculate bounds
     const sampleData =
       dataContainer.numRows() > MAX_SAMPLE_SIZE
         ? getSampleContainerData(dataContainer, MAX_SAMPLE_SIZE)
         : dataContainer;
 
-    const points = sampleData.mapIndex(getPosition);
+    const points = getPosition ? sampleData.mapIndex(getPosition) : [];
 
     const latBounds = getLatLngBounds(points, 1, [-90, 90]);
     const lngBounds = getLatLngBounds(points, 0, [-180, 180]);
@@ -1058,7 +1064,7 @@ class Layer {
     return attributeValue;
   }
 
-  updateMeta(meta) {
+  updateMeta(meta: Layer['meta']) {
     this.meta = {...this.meta, ...meta};
   }
 
@@ -1078,7 +1084,7 @@ class Layer {
     };
   }
 
-  updateData(datasets, oldLayerData) {
+  updateData(datasets: Datasets, oldLayerData: any) {
     if (!this.config.dataId) {
       return {};
     }

src/layers/src/h3-hexagon-layer/h3-hexagon-layer.ts

@@ -277,9 +277,12 @@ export default class HexagonIdLayer extends Layer {
 
     const centroidsDataContainer = createDataContainer(centroids);
 
-    const bounds = this.getPointsBounds(centroidsDataContainer, (d, dc) => {
-      return [dc.valueAt(d.index, 0), dc.valueAt(d.index, 1)];
-    });
+    const bounds = this.getPointsBounds(
+      centroidsDataContainer,
+      (d: any, dc: DataContainerInterface) => {
+        return [dc.valueAt(d.index, 0), dc.valueAt(d.index, 1)];
+      }
+    );
     this.dataToFeature = {centroids};
     this.updateMeta({bounds});
   }

src/layers/src/index.ts

@@ -108,4 +108,6 @@ export {getEditorLayer} from './editor-layer/editor-layer';
 import {isDrawingActive, onClick, onHover, getTooltip, getCursor} from './editor-layer/editor-layer-utils';
 export const EditorLayerUtils = {
   isDrawingActive, onClick, onHover, getTooltip, getCursor
-};
+};
+
+export {getFilterDataFunc} from './aggregation-layer';