[8.x] [ML] Data Drift: Update brush positions on window resize fix (#…

…196830) (#196914)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ML] Data Drift: Update brush positions on window resize fix
(#196830)](#196830)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Robert
Jaszczurek","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-18T15:31:00Z","message":"[ML]
Data Drift: Update brush positions on window resize fix (#196830)\n\n##
Summary\r\n\r\nFix for:
[#188738](https://github.com/elastic/kibana/issues/188738).\r\nThe brush
positions weren't being updated on window resize, as is done\r\nin e.g.
`Log Rate Analysis`.\r\n\r\nAfter
fix:\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/fd424c19-744f-4d20-8076-25cf8e0c8ecb","sha":"720c1cbb19e141d31cd0b2ce052c1d62342c51d9","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix",":ml","Feature:File
and Index Data
Viz","v9.0.0","v8.16.0","backport:version","v8.17.0"],"title":"[ML] Data
Drift: Update brush positions on window resize
fix","number":196830,"url":"https://github.com/elastic/kibana/pull/196830","mergeCommit":{"message":"[ML]
Data Drift: Update brush positions on window resize fix (#196830)\n\n##
Summary\r\n\r\nFix for:
[#188738](https://github.com/elastic/kibana/issues/188738).\r\nThe brush
positions weren't being updated on window resize, as is done\r\nin e.g.
`Log Rate Analysis`.\r\n\r\nAfter
fix:\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/fd424c19-744f-4d20-8076-25cf8e0c8ecb","sha":"720c1cbb19e141d31cd0b2ce052c1d62342c51d9"}},"sourceBranch":"main","suggestedTargetBranches":["8.16","8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/196830","number":196830,"mergeCommit":{"message":"[ML]
Data Drift: Update brush positions on window resize fix (#196830)\n\n##
Summary\r\n\r\nFix for:
[#188738](https://github.com/elastic/kibana/issues/188738).\r\nThe brush
positions weren't being updated on window resize, as is done\r\nin e.g.
`Log Rate Analysis`.\r\n\r\nAfter
fix:\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/fd424c19-744f-4d20-8076-25cf8e0c8ecb","sha":"720c1cbb19e141d31cd0b2ce052c1d62342c51d9"}},{"branch":"8.16","label":"v8.16.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Robert Jaszczurek <[email protected]>

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();