From f6199596dfce449274351517b8eec255d7ca81b6 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 7 Oct 2021 04:50:19 -0400
Subject: [PATCH] Annotations: Improve rendering performance of event markers
 (#39984) (#39999)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit ead8429210143a848803a40e5d7574496c08eb15)

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>
---
 .../src/components/uPlot/geometries/Marker.tsx        | 11 +++++------
 public/app/plugins/datasource/testdata/datasource.ts  |  2 +-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/grafana-ui/src/components/uPlot/geometries/Marker.tsx b/packages/grafana-ui/src/components/uPlot/geometries/Marker.tsx
index 0c70c14fa39..cd74a84e11b 100644
--- a/packages/grafana-ui/src/components/uPlot/geometries/Marker.tsx
+++ b/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>
diff --git a/public/app/plugins/datasource/testdata/datasource.ts b/public/app/plugins/datasource/testdata/datasource.ts
index a27c211a482..a2ab453271d 100644
--- a/public/app/plugins/datasource/testdata/datasource.ts
+++ b/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 };