fix(heatmap): update tooltip visibility logic to handle empty tooltip info

[andrimal]

Summary

The heatmap tooltip is no longer visible if it's empty.

Before the fix:

After the fix:

fix #2546

Details

Issues

Checklist

• The proper chart type label has been added (e.g. :xy, :partition)
• The proper feature labels have been added (e.g. :interactions, :axis)
• All related issues have been linked (i.e. closes #123, fixes #123)
• New public API exports have been added to packages/charts/src/index.ts
• Unit tests have been added or updated to match the most common scenarios
• The proper documentation and/or storybook story has been added or updated
• The code has been checked for cross-browser compatibility (Chrome, Firefox, Safari, Edge)
• Visual changes have been tested with light and dark themes

[andrimal]

buildkite update vrt

[mariairiartef]

I've checked and the tooltip has already a property called isVisible. For the specific case we are covering, we are setting it to true:

elastic-charts/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts

Lines 87 to 100 in 13d9455

	tooltipInfo.values.push({
	label: '',
	color: Colors.Transparent.keyword,
	isHighlighted: false,
	isVisible: true,
	seriesIdentifier: {
	specId: spec.id,
	key: spec.id,
	},
	value: `${pickedShapes.value}`,
	formattedValue: `${pickedShapes.text}`,
	datum: pickedShapes.value,
	displayOnly: true,
	});

Have you considered updating this value and using it in isTooltipVisibleSelector? For example:

isVisible: Boolean(pickedShapes.text)

And then in the selector:

visible: tooltipInfo.values.some(({ isVisible }) => isVisible) || pinned,

Otherwise, you can try to add a condition like the following at the beginning of isTooltipVisibleSelector:

if (
  type === TooltipType.None ||
  tooltipInfo.values.length === 0 ||
  (tooltipInfo.values.length === 1 && !tooltipInfo.values[0]?.formattedValue)
) {
  return {
    visible: false,
    isExternal: false,
    displayOnly: false,
    isPinnable: false,
  };
}

but this depends on how you build the tooltip in packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts

[andrimal]

I've checked and the tooltip has already a property called isVisible. For the specific case we are covering, we are setting it to true:

elastic-charts/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts

Lines 87 to 100 in 13d9455

	tooltipInfo.values.push({
	label: '',
	color: Colors.Transparent.keyword,
	isHighlighted: false,
	isVisible: true,
	seriesIdentifier: {
	specId: spec.id,
	key: spec.id,
	},
	value: `${pickedShapes.value}`,
	formattedValue: `${pickedShapes.text}`,
	datum: pickedShapes.value,
	displayOnly: true,
	});

Have you considered updating this value and using it in isTooltipVisibleSelector? For example:

isVisible: Boolean(pickedShapes.text)

And then in the selector:

visible: tooltipInfo.values.some(({ isVisible }) => isVisible) || pinned,

Otherwise, you can try to add a condition like the following at the beginning of isTooltipVisibleSelector:

if (
  type === TooltipType.None ||
  tooltipInfo.values.length === 0 ||
  (tooltipInfo.values.length === 1 && !tooltipInfo.values[0]?.formattedValue)
) {
  return {
    visible: false,
    isExternal: false,
    displayOnly: false,
    isPinnable: false,
  };
}

but this depends on how you build the tooltip in packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts

Nice suggestion @mariairiartef! I used the isVisible property to check the tooltip visibility.

[andrimal]

buildkite test this

[andrimal]

buildkite update vrt

[markov00]

Implementation wise it LGTM. I've doubts if we need to apply the same logic also to the Y axis value and X axis value when the mouse pointer is on the chart and one of the axis has an empty value (see second screenshot that shows an empty Y Value) but I believe we can discuss this offline and and add it in case in a subsequent phase.