[Fix] layer popover mapIndex

src/actions/src/vis-state-actions.ts

@@ -1006,21 +1006,25 @@ export function toggleFilterFeature(
 }
 
 export type OnLayerHoverUpdaterAction = {
-  info: (PickInfo<any> & {mapIndex?: number}) | null;
+  info: PickInfo<any> | null;
+  mapIndex?: number;
 };
 /**
  * Trigger layer hover event with hovered object
  * @memberof visStateActions
- * @param info - Object hovered, returned by deck.gl. Includes an optional `mapIndex` property for limiting the display of the `<MapPopover>` to the `<MapContainer>` the user is interacting with.
+ * @param info - Object hovered, returned by deck.gl.
+ * @param mapIndex - Optional property for limiting the display of the `<MapPopover>` to the `<MapContainer>` the user is interacting with.
  * @returns action
  * @public
  */
 export function onLayerHover(
-  info: (PickInfo<any> & {mapIndex?: number}) | null
+  info: PickInfo<any> | null,
+  mapIndex?: number
 ): Merge<OnLayerHoverUpdaterAction, {type: typeof ActionTypes.LAYER_HOVER}> {
   return {
     type: ActionTypes.LAYER_HOVER,
-    info
+    info,
+    mapIndex
   };
 }
 

src/components/src/map-container.tsx

@@ -456,8 +456,8 @@ export default function MapContainerFactory(
       this.props.visStateActions.onLayerClick(null);
     };
 
-    _onLayerHover = (idx: number, info: PickInfo<any> | null) => {
-      this.props.visStateActions.onLayerHover(info);
+    _onLayerHover = (_idx: number, info: PickInfo<any> | null) => {
+      this.props.visStateActions.onLayerHover(info, this.props.index);
     };
 
     _onLayerSetDomain = (idx: number, colorDomain: VisualChannelDomain) => {
@@ -919,13 +919,7 @@ export default function MapContainerFactory(
     };
 
     _onLayerHoverDebounced = debounce((data, index, event) => {
-      // add `mapIndex` property which will end up in the the `hoverInfo` object of `visState`
-      // this is for limiting the display of the `<MapPopover>` to the `<MapContainer>` the user is interacting with
-      // TODO this should be part of onLayerHover arguments, investigate
-      // @ts-ignore (does not fail with local yarn-test)
-      data.mapIndex = index;
-
-      this.props.visStateActions.onLayerHover(data);
+      this.props.visStateActions.onLayerHover(data, index);
     }, DEBOUNCE_MOUSE_MOVE_PROPAGATE);
 
     _onMouseMoveDebounced = debounce((event, viewport) => {

src/reducers/src/vis-state-updaters.ts

@@ -1693,7 +1693,8 @@ export const layerHoverUpdater = (
   ...state,
   hoverInfo: {
     // deck.gl info is mutable
-    ...action.info
+    ...action.info,
+    ...(Number.isFinite(action.mapIndex) ? {mapIndex: action.mapIndex} : {})
   }
 });
 

website/webpack.config.js

@@ -5,7 +5,11 @@ const {resolve, join} = require('path');
 const webpack = require('webpack');
 
 const KeplerPackage = require('../package');
-const {WEBPACK_ENV_VARIABLES, ENV_VARIABLES_WITH_INSTRUCTIONS, RESOLVE_ALIASES} = require('../webpack/shared-webpack-configuration');
+const {
+  WEBPACK_ENV_VARIABLES,
+  ENV_VARIABLES_WITH_INSTRUCTIONS,
+  RESOLVE_ALIASES
+} = require('../webpack/shared-webpack-configuration');
 
 const LIB_DIR = resolve(__dirname, '..');
 const SRC_DIR = resolve(LIB_DIR, './src');
@@ -69,6 +73,13 @@ const COMMON_CONFIG = {
         test: /\.mjs$/,
         include: /node_modules\/apache-arrow/,
         type: 'javascript/auto'
+      },
+      // for compiling @probe.gl, website build started to fail (March, 2024)
+      {
+        test: /\.(js)$/,
+        loader: 'babel-loader',
+        options: BABEL_CONFIG,
+        include: /node_modules\/@probe.gl/
       }
     ]
   },
@@ -135,9 +146,7 @@ function logInstruction(msg) {
 function validateEnvVariable(variable, instruction) {
   if (!process.env[variable]) {
     logError(`Error! ${variable} is not defined`);
-    logInstruction(
-      `Make sure to run "export ${variable}=<token>" before deploy the website`
-    );
+    logInstruction(`Make sure to run "export ${variable}=<token>" before deploy the website`);
     logInstruction(instruction);
     throw new Error(`Missing ${variable}`);
   }