From 02d61857abc39b623b154a139d26312ff8c8d0f0 Mon Sep 17 00:00:00 2001
From: Leon Sorokin <leeoniya@gmail.com>
Date: Fri, 9 Feb 2024 06:55:09 -0600
Subject: [PATCH] Annotations: Fix axis markers rendering in wrong (stale)
 positions (#82219)

---
 .../panel/timeseries/plugins/AnnotationsPlugin2.tsx   | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin2.tsx b/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin2.tsx
index 32b6da49ca8..c1e616aeb22 100644
--- a/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin2.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin2.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useReducer } from 'react';
 import { createPortal } from 'react-dom';
 import tinycolor from 'tinycolor2';
 import uPlot from 'uplot';
@@ -68,6 +68,8 @@ export const AnnotationsPlugin2 = ({
   const styles = useStyles2(getStyles);
   const getColorByName = useTheme2().visualization.getColorByName;
 
+  const [_, forceUpdate] = useReducer((x) => x + 1, 0);
+
   const annos = useMemo(() => {
     let annos = annotations.filter(
       (frame) => frame.name !== 'exemplar' && frame.length > 0 && frame.fields.some((f) => f.name === 'time')
@@ -165,6 +167,13 @@ export const AnnotationsPlugin2 = ({
   useEffect(() => {
     if (plot) {
       plot.redraw();
+
+      // this forces a second redraw after uPlot is updated (in the Plot.tsx didUpdate) with new data/scales
+      // and ensures the anno marker positions in the dom are re-rendered in correct places
+      // (this is temp fix until uPlot integrtion is refactored)
+      setTimeout(() => {
+        forceUpdate();
+      }, 0);
     }
   }, [annos, plot]);