From 6898ca7328ecd0302948b0d84af8451a42ccc720 Mon Sep 17 00:00:00 2001
From: Robert Jaszczurek <92210485+rbrtj@users.noreply.github.com>
Date: Fri, 18 Oct 2024 17:31:00 +0200
Subject: [PATCH] [ML] Data Drift: Update brush positions on window resize fix
 (#196830)

## Summary

Fix for: [#188738](https://github.com/elastic/kibana/issues/188738).
The brush positions weren't being updated on window resize, as is done
in e.g. `Log Rate Analysis`.

After fix:

https://github.com/user-attachments/assets/fd424c19-744f-4d20-8076-25cf8e0c8ecb
(cherry picked from commit 720c1cbb19e141d31cd0b2ce052c1d62342c51d9)
---
 .../single_brush.tsx                          | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/x-pack/plugins/data_visualizer/public/application/data_drift/document_count_chart_single_brush/single_brush.tsx b/x-pack/plugins/data_visualizer/public/application/data_drift/document_count_chart_single_brush/single_brush.tsx
index b6b3a32f628f1..4e0af369a8124 100644
--- a/x-pack/plugins/data_visualizer/public/application/data_drift/document_count_chart_single_brush/single_brush.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/data_drift/document_count_chart_single_brush/single_brush.tsx
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { isEqual } from 'lodash';
 import React, { useEffect, useRef, type FC } from 'react';
 
 import * as d3Brush from 'd3-brush';
@@ -310,9 +311,42 @@ export const SingleBrush: FC<SingleBrushProps> = (props) => {
         mlBrushSelection.exit().remove();
       }
 
+      function updateBrush() {
+        const mlBrushSelection = gBrushes
+          .selectAll('.brush')
+          .data<SingleBrush>(brushes.current, (d) => (d as SingleBrush).id);
+
+        mlBrushSelection.each(function (brushObject, i, n) {
+          const x = d3
+            .scaleLinear()
+            .domain([minRef.current, maxRef.current])
+            .rangeRound([0, widthRef.current]);
+          brushObject.brush.extent([
+            [0, BRUSH_MARGIN],
+            [widthRef.current, BRUSH_HEIGHT - BRUSH_MARGIN],
+          ]);
+
+          brushObject.brush(d3.select(n[i] as SVGGElement));
+          const xStart = x(brushObject.start) ?? 0;
+          const xEnd = x(brushObject.end) ?? 0;
+          brushObject.brush.move(d3.select(n[i] as SVGGElement), [xStart, xEnd]);
+        });
+      }
+
       if (brushes.current.length !== 1) {
         widthRef.current = width;
         newBrush(`${brushId}`, baselineMin, baselineMax);
+      } else if (
+        widthRef.current !== width ||
+        minRef.current !== min ||
+        maxRef.current !== max ||
+        !isEqual(snapTimestampsRef.current, snapTimestamps)
+      ) {
+        widthRef.current = width;
+        minRef.current = min;
+        maxRef.current = max;
+        snapTimestampsRef.current = snapTimestamps;
+        updateBrush();
       }
 
       drawBrushes();