Tooltip slows down panel refresh

[Marcus Olsson]

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> 

[Marcus Olsson]

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

Tippy

Grafana Tooltip