From a983be75c5c90ec665b19cb7bc36f422a7262ef3 Mon Sep 17 00:00:00 2001
From: Igor Dykhta <igorDykhta@users.noreply.github.com>
Date: Wed, 27 Jul 2022 01:32:38 +0300
Subject: [PATCH] [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   | 42 +++++++++++++++++++----
 src/utils/interaction-utils.ts            | 17 ++++-----
 src/utils/layer-utils.ts                  |  6 ++--
 test/node/utils/interaction-utils-test.js |  3 +-
 4 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/src/components/map/layer-hover-info.tsx b/src/components/map/layer-hover-info.tsx
index 8bc642e5ee..52107670d3 100644
--- a/src/components/map/layer-hover-info.tsx
+++ b/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>
diff --git a/src/utils/interaction-utils.ts b/src/utils/interaction-utils.ts
index 39bcae9a31..d33922f120 100644
--- a/src/utils/interaction-utils.ts
+++ b/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);
 }
diff --git a/src/utils/layer-utils.ts b/src/utils/layer-utils.ts
index 85fa711922..1b64d3b3c7 100644
--- a/src/utils/layer-utils.ts
+++ b/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;
 };
 
diff --git a/test/node/utils/interaction-utils-test.js b/test/node/utils/interaction-utils-test.js
index 7ee6b3837f..43213ca19e 100644
--- a/test/node/utils/interaction-utils-test.js
+++ b/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
         })
       ),