[feat] Show selected fields in the tooltip for aggregation layers (#2814

)

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

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

@@ -15,6 +15,7 @@ import {
   getTooltipDisplayValue
 } from '@kepler.gl/reducers';
 import {useIntl} from 'react-intl';
+import {capitalizeFirstLetter} from '@kepler.gl/utils';
 
 export const StyledLayerName = styled(CenterFlexbox)`
   color: ${props => props.theme.textColorHl};
@@ -169,6 +170,22 @@ const CellInfo = ({
     return null;
   }, [fieldsToShow, sizeField, layer, data.elevationValue]);
 
+  const aggregatedData = useMemo(() => {
+    if (data.aggregatedData && fieldsToShow) {
+      return fieldsToShow.reduce((acc, field) => {
+        const dataForField = data.aggregatedData?.[field.name];
+        if (dataForField?.measure && field.name !== colorField?.name) {
+          acc.push({
+            name: `${capitalizeFirstLetter(dataForField.measure)} of ${field.name}`,
+            value: dataForField.value
+          });
+        }
+        return acc;
+      }, [] as {name: string; value?: string}[]);
+    }
+    return [];
+  }, [data.aggregatedData, fieldsToShow, colorField?.name]);
+
   const colorMeasure = layer.getVisualChannelDescription('color').measure;
   const sizeMeasure = layer.getVisualChannelDescription('size').measure;
   return (
@@ -180,6 +197,9 @@ const CellInfo = ({
       {sizeField && layer.visualChannels.size && sizeMeasure ? (
         <Row name={sizeMeasure} key="size" value={elevationValue || 'N/A'} />
       ) : null}
+      {aggregatedData.map((dataForField, idx) => (
+        <Row name={dataForField.name} key={`data_${idx}`} value={dataForField.value || 'N/A'} />
+      ))}
     </tbody>
   );
 };

src/layers/src/aggregation-layer.ts

@@ -10,15 +10,15 @@ import Layer, {
   VisualChannelDescription,
   VisualChannels
 } from './base-layer';
-import {hexToRgb, aggregate} from '@kepler.gl/utils';
+import {hexToRgb, aggregate, DataContainerInterface} from '@kepler.gl/utils';
 import {
   HIGHLIGH_COLOR_3D,
   CHANNEL_SCALES,
   FIELD_OPTS,
   DEFAULT_AGGREGATION,
   ColorRange
 } from '@kepler.gl/constants';
-import {Merge, LayerColumn} from '@kepler.gl/types';
+import {Field, LayerColumn, Merge} from '@kepler.gl/types';
 import {KeplerTable, Datasets} from '@kepler.gl/table';
 
 type AggregationLayerColumns = {
@@ -171,9 +171,22 @@ export default class AggregationLayer extends Layer {
     };
   }
 
-  getHoverData(object) {
+  getHoverData(object: any, dataContainer: DataContainerInterface, fields: Field[]): any {
+    if (!object) return object;
+    const measure = this.config.visConfig.colorAggregation;
+    // aggregate all fields for the hovered group
+    const aggregatedData = fields.reduce((accu, field) => {
+      accu[field.name] = {
+        measure,
+        value: aggregate(object.points, measure, (d: {index: number}) => {
+          return dataContainer.valueAt(d.index, field.fieldIdx);
+        })
+      };
+      return accu;
+    }, {});
+
     // return aggregated object
-    return object;
+    return {aggregatedData, ...object};
   }
 
   getFilteredItemCount() {

src/reducers/src/layer-utils.ts

@@ -34,7 +34,18 @@ export type LayersToRender = {
   [layerId: string]: boolean;
 };
 
-export type AggregationLayerHoverData = {points: any[]; colorValue?: any; elevationValue?: any};
+export type AggregationLayerHoverData = {
+  points: any[];
+  colorValue?: any;
+  elevationValue?: any;
+  aggregatedData?: Record<
+    string,
+    {
+      measure: string;
+      value?: any;
+    }
+  >;
+};
 
 export type LayerHoverProp = {
   data: DataRow | AggregationLayerHoverData | null;