[Bug] allow tooltip format to apply to aggregation layer hover (#1872)

Signed-off-by: Shan He <heshan0131@gmail.com>
Co-authored-by: Shan He <heshan0131@gmail.com>

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

@@ -18,13 +18,16 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React from 'react';
+import React, {useMemo} from 'react';
 import styled from 'styled-components';
+import {TooltipField} from 'reducers/vis-state-updaters';
 import {CenterFlexbox} from 'components/common/styled-components';
 import {Layers} from 'components/common/icons';
 import PropTypes from 'prop-types';
 import {notNullorUndefined} from 'utils/data-utils';
 import {getTooltipDisplayValue, getTooltipDisplayDeltaValue} from 'utils/interaction-utils';
+import {AggregationLayerHoverData} from 'utils/layer-utils';
+import {Layer} from 'layers';
 
 export const StyledLayerName = styled(CenterFlexbox)`
   color: ${props => props.theme.textColorHl};
@@ -114,7 +117,8 @@ const EntryInfoRow = ({item, fields, data, primaryData, compareType}) => {
     return null;
   }
   const field = fields[fieldIdx];
-  const displayValue = getTooltipDisplayValue({item, field, data, fieldIdx});
+  const value = data.valueAt(fieldIdx);
+  const displayValue = getTooltipDisplayValue({item, field, value});
 
   const displayDeltaValue = getTooltipDisplayDeltaValue({
     item,
@@ -135,24 +139,48 @@ const EntryInfoRow = ({item, fields, data, primaryData, compareType}) => {
 };
 
 // TODO: supporting comparative value for aggregated cells as well
-const CellInfo = ({data, layer}) => {
-  const {colorField, sizeField} = layer.config;
+const CellInfo = ({
+  fieldsToShow,
+  data,
+  layer
+}: {
+  data: AggregationLayerHoverData;
+  fieldsToShow: TooltipField[];
+  layer: Layer;
+}) => {
+  const {colorField, sizeField} = layer.config as any;
+
+  const colorValue = useMemo(() => {
+    if (colorField && layer.visualChannels.color) {
+      const item = fieldsToShow.find(field => field.name === colorField.name);
+      return getTooltipDisplayValue({item, field: colorField, value: data.colorValue});
+    }
+    return null;
+  }, [fieldsToShow, colorField, layer, data.colorValue]);
+
+  const elevationValue = useMemo(() => {
+    if (sizeField && layer.visualChannels.size) {
+      const item = fieldsToShow.find(field => field.name === sizeField.name);
+      return getTooltipDisplayValue({item, field: sizeField, value: data.elevationValue});
+    }
+    return null;
+  }, [fieldsToShow, sizeField, layer, data.elevationValue]);
 
   return (
     <tbody>
-      <Row name={'total points'} key="count" value={data.points && data.points.length} />
+      <Row name={'total points'} key="count" value={String(data.points && data.points.length)} />
       {colorField && layer.visualChannels.color ? (
         <Row
           name={layer.getVisualChannelDescription('color').measure}
           key="color"
-          value={data.colorValue || 'N/A'}
+          value={colorValue || 'N/A'}
         />
       ) : null}
       {sizeField && layer.visualChannels.size ? (
         <Row
           name={layer.getVisualChannelDescription('size').measure}
           key="size"
-          value={data.elevationValue || 'N/A'}
+          value={elevationValue || 'N/A'}
         />
       ) : null}
     </tbody>

src/utils/interaction-utils.ts

@@ -195,20 +195,17 @@ export function getTooltipDisplayDeltaValue({
 export function getTooltipDisplayValue({
   item,
   field,
-  data,
-  fieldIdx
+  value
 }: {
-  item: TooltipField;
+  item: TooltipField | undefined;
   field: Field;
-  data: DataRow;
-  fieldIdx: number;
+  value: any;
 }): string {
-  const dataValue = data.valueAt(fieldIdx);
-  if (!notNullorUndefined(dataValue)) {
+  if (!notNullorUndefined(value)) {
     return '';
   }
 
-  return item.format
-    ? getFormatter(item.format, field)(dataValue)
-    : parseFieldValue(dataValue, field.type);
+  return item?.format
+    ? getFormatter(item.format, field)(value)
+    : parseFieldValue(value, field.type);
 }

src/utils/layer-utils.ts

@@ -32,12 +32,14 @@ export type LayersToRender = {
   [layerId: string]: boolean;
 };
 
+export type AggregationLayerHoverData = {points: any[]; colorValue?: any; elevationValue?: any};
+
 export type LayerHoverProp = {
-  data: any[];
+  data: any[] | AggregationLayerHoverData;
   fields: Field[];
   fieldsToShow: TooltipField[];
   layer: Layer;
-  primaryData?: any[];
+  primaryData?: any[] | AggregationLayerHoverData;
   compareType?: CompareType;
 };
 

test/node/utils/interaction-utils-test.js

@@ -237,8 +237,7 @@ test('interactionUtil -> getTooltipDisplayValue', t => {
       dataset.dataContainer.map(data =>
         getTooltipDisplayValue({
           field,
-          data,
-          fieldIdx,
+          value: data.valueAt(fieldIdx),
           item: tc.input
         })
       ),