From 8e752439c69103f47bd8f5ae8fe5b2e52dac1ea3 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Tue, 9 May 2023 15:26:17 +0100
Subject: [PATCH] Graph: Fix legend overlapping graph area (#67912)

use render callback instead of requestIdleTimeout
---
 public/app/plugins/panel/graph/Legend/Legend.tsx | 4 +++-
 public/app/plugins/panel/graph/graph.ts          | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/panel/graph/Legend/Legend.tsx b/public/app/plugins/panel/graph/Legend/Legend.tsx
index 670b892725e..984d2af5b8b 100644
--- a/public/app/plugins/panel/graph/Legend/Legend.tsx
+++ b/public/app/plugins/panel/graph/Legend/Legend.tsx
@@ -32,6 +32,7 @@ interface LegendDisplayProps {
   alignAsTable?: boolean;
   rightSide?: boolean;
   sideWidth?: number;
+  renderCallback?: () => void;
 }
 
 interface LegendValuesProps {
@@ -176,6 +177,7 @@ export class GraphLegend extends PureComponent<GraphLegendProps, LegendState> {
       avg,
       current,
       total,
+      renderCallback,
     } = this.props;
     const seriesValuesProps = { values, min, max, avg, current, total };
     const hiddenSeries = this.state.hiddenSeries;
@@ -205,7 +207,7 @@ export class GraphLegend extends PureComponent<GraphLegendProps, LegendState> {
     };
 
     return (
-      <div className={`graph-legend-content ${legendClass}`} style={legendStyle}>
+      <div className={`graph-legend-content ${legendClass}`} ref={renderCallback} style={legendStyle}>
         {this.props.alignAsTable ? <LegendTable {...legendProps} /> : <LegendSeriesList {...legendProps} />}
       </div>
     );
diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts
index 57f4f2a8760..819fa92e37d 100644
--- a/public/app/plugins/panel/graph/graph.ts
+++ b/public/app/plugins/panel/graph/graph.ts
@@ -155,13 +155,13 @@ class GraphElement {
       onToggleSort: this.ctrl.onToggleSort,
       onColorChange: this.ctrl.onColorChange,
       onToggleAxis: this.ctrl.onToggleAxis,
+      renderCallback: this.renderPanel.bind(this),
     };
 
     const legendReactElem = React.createElement(LegendWithThemeProvider, legendProps);
 
     // render callback isn't supported in react 18+, see: https://github.com/reactwg/react-18/discussions/5
     this.legendElemRoot.render(legendReactElem);
-    requestIdleCallback(() => this.renderPanel());
   }
 
   onGraphHover(evt: LegacyGraphHoverEventPayload | DataHoverPayload) {