From 13768da4172e00a8f5a224dac1fa4447a135acb3 Mon Sep 17 00:00:00 2001
From: Leon Sorokin <leeoniya@gmail.com>
Date: Sat, 29 May 2021 14:01:58 -0500
Subject: [PATCH] State timeline: defer quadtree construction until first
 mousemove (#34949)

---
 .../app/plugins/panel/state-timeline/timeline.ts | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/public/app/plugins/panel/state-timeline/timeline.ts b/public/app/plugins/panel/state-timeline/timeline.ts
index a2d47238914..6d596087238 100644
--- a/public/app/plugins/panel/state-timeline/timeline.ts
+++ b/public/app/plugins/panel/state-timeline/timeline.ts
@@ -143,7 +143,7 @@ export function getConfig(opts: TimelineCoreOptions) {
     const fieldConfig = getFieldConfig(seriesIdx);
     const fillColor = getFillColor(fieldConfig, valueColor);
 
-    const boxRect = (boxRectsBySeries[seriesIdx][valueIdx] = {
+    boxRectsBySeries[seriesIdx][valueIdx] = {
       x: round(left - xOff),
       y: round(top - yOff),
       w: boxWidth,
@@ -152,9 +152,7 @@ export function getConfig(opts: TimelineCoreOptions) {
       didx: valueIdx,
       // for computing label contrast
       fillColor,
-    });
-
-    qt.add(boxRect);
+    };
 
     if (discrete) {
       let fillStyle = fillColor;
@@ -429,6 +427,16 @@ export function getConfig(opts: TimelineCoreOptions) {
   const setCursor = (u: uPlot) => {
     let cx = round(u.cursor!.left! * pxRatio);
     let cy = round(u.cursor!.top! * pxRatio);
+
+    // if quadtree is empty, fill it
+    if (!qt.o.length && qt.q == null) {
+      for (const seriesRects of boxRectsBySeries) {
+        for (const rect of seriesRects) {
+          rect && qt.add(rect);
+        }
+      }
+    }
+
     doHover(cx, cy);
   };