Annotations: Fix axis markers rendering in wrong (stale) positions (#82219)

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]);