fix(tooltip): rerender correctly (#4962)

__tests__/integration/snapshots/tooltip/alphabet-interval-tooltip-render-update/step0.html

@@ -0,0 +1,10 @@
+<div
+  xmlns="http://www.w3.org/1999/xhtml"
+  class="tooltip"
+  style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 10px; top: 10px;"
+>
+  <div>
+    <h2>A</h2>
+    <span>frequency: 0.08167</span>
+  </div>
+</div>;

__tests__/integration/snapshots/tooltip/alphabet-interval-tooltip-render-update/step1.html

@@ -0,0 +1,10 @@
+<div
+  xmlns="http://www.w3.org/1999/xhtml"
+  class="tooltip"
+  style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: Roboto-Regular; left: 10px; top: 10px;"
+>
+  <div>
+    <h2>B</h2>
+    <span>frequency: 0.01492</span>
+  </div>
+</div>;

__tests__/plots/tooltip/alphabet-interval-tooltip-render-update.ts

@@ -0,0 +1,53 @@
+import { CustomEvent } from '@antv/g';
+import { G2Spec, ELEMENT_CLASS_NAME } from '../../../src';
+import { LEGEND_ITEMS_CLASS_NAME } from '../../../src/interaction/legendFilter';
+
+export function alphabetIntervalTooltipRenderUpdate(): G2Spec {
+  return {
+    type: 'interval',
+    paddingLeft: 60,
+    data: {
+      type: 'fetch',
+      value: 'data/alphabet.csv',
+      transform: [{ type: 'slice', start: 0, end: 3 }],
+    },
+    encode: {
+      x: 'letter',
+      y: 'frequency',
+      color: 'letter',
+    },
+    interaction: {
+      legendFilter: true,
+      tooltip: {
+        render: (_, { title, items }) =>
+          `<div><h2>${title}</h2>${items.map(
+            (d) => `<span>${d.name}: ${d.value}</span>`,
+          )}</di>`,
+      },
+    },
+  };
+}
+
+alphabetIntervalTooltipRenderUpdate.steps = ({ canvas }) => {
+  const { document } = canvas;
+  return [
+    {
+      changeState: async () => {
+        const items = document.getElementsByClassName(LEGEND_ITEMS_CLASS_NAME);
+        const [i0] = items;
+        i0.dispatchEvent(new CustomEvent('click'));
+
+        const elements = document.getElementsByClassName(ELEMENT_CLASS_NAME);
+        const [e0] = elements;
+        e0.dispatchEvent(new CustomEvent('pointerover'));
+      },
+    },
+    {
+      changeState: async () => {
+        const elements = document.getElementsByClassName(ELEMENT_CLASS_NAME);
+        const [e0] = elements;
+        e0.dispatchEvent(new CustomEvent('pointerover'));
+      },
+    },
+  ];
+};

__tests__/plots/tooltip/index.ts

@@ -61,3 +61,4 @@ export { alphabetIntervalBrushTooltip } from './alphabet-interval-brush-tooltip'
 export { mockLineFalsy } from './mock-line-falsy';
 export { provincesLineGroupName } from './provinces-line-group-name';
 export { pointsPointRegressionQuad } from './points-point-regression-quad';
+export { alphabetIntervalTooltipRenderUpdate } from './alphabet-interval-tooltip-render-update';

src/runtime/plot.ts

@@ -324,8 +324,7 @@ function updateTooltip(selection, options, view, library, context) {
   // Instances for tooltip.
   const container = selection.node();
   const nameInteraction = container['nameInteraction'];
-  const { interaction } = options;
-  const tooltipOptions = inferInteraction(interaction).find(
+  const tooltipOptions = inferInteraction(options).find(
     (d) => d.type === 'tooltip',
   );
 

src/transform/filter.ts

@@ -11,7 +11,7 @@ export type FilterOptions = Omit<FilterTransform, 'type'>;
  */
 export const Filter: TC<FilterOptions> = (options = {}) => {
   return (I, mark) => {
-    const { encode } = mark;
+    const { encode, data } = mark;
     const filters = Object.entries(options)
       .map(([key, value]) => {
         const [V] = columnOf(encode, key);
@@ -43,7 +43,11 @@ export const Filter: TC<FilterOptions> = (options = {}) => {
     });
     return [
       newIndex,
-      deepMix({}, mark, { encode: Object.fromEntries(newEncodes) }),
+      deepMix({}, mark, {
+        encode: Object.fromEntries(newEncodes),
+        // Filter data for tooltip item.
+        data: FI.map((i) => data[i]),
+      }),
     ];
   };
 };