Tooltip slows down panel refresh

[marcusolsson]

The tooltip is being loaded for every bucket on panel refresh, leading to poor performance for large time ranges.

From the Chrome DevTools:

All the small bars under Heatmap are Tippy updates.

Might be worth looking into making the Tippy instance a singleton: atomiks/tippyjs-react#42 (comment) or switch to a different tooltip library.

Offending lines of code:

grafana-hourly-heatmap-panel/src/components/Heatmap.tsx

Lines 58 to 80 in 7e8ce9e

	<Tippy
	key={i}
	content={
	<div>
	<Tooltip
	bucketStartTime={bucketStart}
	displayValue={displayValue}
	numBuckets={numBuckets}
	tz={timeZone}
	/>
	</div>
	}
	placement="bottom"
	animation={false}
	>
	<rect
	x={x(startOfDay.valueOf().toString())}
	y={Math.ceil(y(minutesSinceStartOfDay))}
	fill={colorScale(d.value)}
	width={cellWidth}
	height={cellHeight}
	/>
	</Tippy>

[marcusolsson]

The Tooltip in @grafana/ui performs better, but has other issues.

Tippy

Grafana Tooltip