Fix annotations refresh

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 1.5.0 (2024-10-21)
+
+### Features / Enhancements
+
+- Fix annotations refresh (#17)
+
 ## 1.4.0 (2024-10-01)
 
 ### Features / Enhancements

package.json

@@ -81,5 +81,5 @@
     "test:ci": "jest --maxWorkers 4 --coverage",
     "upgrade": "npm upgrade --save"
   },
-  "version": "1.4.0"
+  "version": "1.5.0"
 }

src/plugins/AnnotationsPlugin.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useReducer, useRef } from 'react';
 import uPlot from 'uplot';
 
 import { colorManipulator, DataFrame, DataFrameFieldIndex, DataFrameView } from '@grafana/data';
@@ -20,6 +20,8 @@ export const AnnotationsPlugin = ({ annotations, timeZone, config }: Annotations
 
   const annotationsRef = useRef<Array<DataFrameView<AnnotationsDataFrameViewDTO>>>();
 
+  const [_, forceUpdate] = useReducer((x) => x + 1, 0);
+
   // Update annotations views when new annotations came
   useEffect(() => {
     const views: Array<DataFrameView<AnnotationsDataFrameViewDTO>> = [];
@@ -100,6 +102,20 @@ export const AnnotationsPlugin = ({ annotations, timeZone, config }: Annotations
     });
   }, [config, theme]);
 
+  // ensure annos are re-drawn whenever they change
+  useEffect(() => {
+    if (plotInstance.current) {
+      plotInstance.current.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);
+    }
+  }, [annotations]);
+
   const mapAnnotationToXYCoords = useCallback((frame: DataFrame, dataFrameFieldIndex: DataFrameFieldIndex) => {
     const view = new DataFrameView<AnnotationsDataFrameViewDTO>(frame);
     const annotation = view.get(dataFrameFieldIndex.fieldIndex);