Annotations: Improve rendering performance of event markers (#39984) (#39999)

(cherry picked from commit ead8429210)

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>

packages/grafana-ui/src/components/uPlot/geometries/Marker.tsx

@@ -1,4 +1,3 @@
-import { css } from '@emotion/css';
 import React from 'react';
 
 interface MarkerProps {
@@ -13,11 +12,11 @@ interface MarkerProps {
 export const Marker: React.FC<MarkerProps> = ({ x, y, children }) => {
   return (
     <div
-      className={css`
-        position: absolute;
-        top: ${y}px;
-        left: ${x}px;
-      `}
+      style={{
+        position: 'absolute',
+        top: `${y}px`,
+        left: `${x}px`,
+      }}
     >
       {children}
     </div>

public/app/plugins/datasource/testdata/datasource.ts

@@ -106,7 +106,7 @@ export class TestDataDataSource extends DataSourceWithBackend<TestDataQuery> {
   }
 
   annotationDataTopicTest(target: TestDataQuery, req: DataQueryRequest<TestDataQuery>): Observable<DataQueryResponse> {
-    const events = this.buildFakeAnnotationEvents(req.range, 10);
+    const events = this.buildFakeAnnotationEvents(req.range, 50);
     const dataFrame = new ArrayDataFrame(events);
     dataFrame.meta = { dataTopic: DataTopic.Annotations };