Keep task log selection stable while dragging (apache#71155)

* Keep downward task log selection stable while dragging

Chrome can resolve the drag focus to the start of the absolutely positioned virtualized log block when the pointer moves below the viewport, reversing the selection.

* Keep task log selection stable while dragging

* Fix duplicate imports left over from merge conflict resolution

Author: Andrushika

airflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/Logs.test.tsx

@@ -18,7 +18,7 @@
  */
 import "@testing-library/jest-dom";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { describe, it, expect, beforeAll, vi } from "vitest";
+import { beforeAll, describe, expect, it, vi } from "vitest";
 
 import { AppWrapper } from "src/utils/AppWrapper";
 
@@ -642,3 +642,110 @@ describe("Selection pinning across scrolling", () => {
     });
   });
 });
+
+describe("Downward drag selection", () => {
+  it("coalesces events and extends the selection to the mounted bottom row", async () => {
+    render(
+      <AppWrapper initialEntries={["/dags/log_grouping/runs/manual__2025-02-18T12:19/tasks/ti_context"]} />,
+    );
+    await waitForLogs();
+
+    const container = screen.getByTestId("virtual-scroll-container");
+    const rows = container.querySelectorAll<HTMLElement>("[data-index]");
+    const anchorRow = rows[0] as HTMLElement;
+    const lastRow = rows[rows.length - 1] as HTMLElement;
+    const extend = vi.fn();
+    const range = document.createRange();
+
+    range.selectNodeContents(anchorRow);
+
+    const selection = {
+      anchorNode: anchorRow,
+      extend,
+      focusNode: anchorRow,
+      focusOffset: 0,
+      getRangeAt: () => range,
+      rangeCount: 1,
+    } as unknown as Selection;
+    const animationFrames = new Array<FrameRequestCallback>();
+    const getSelectionSpy = vi.spyOn(document, "getSelection").mockReturnValue(selection);
+    const requestAnimationFrameSpy = vi
+      .spyOn(globalThis, "requestAnimationFrame")
+      .mockImplementation((callback) => {
+        animationFrames.push(callback);
+
+        return animationFrames.length;
+      });
+    const cancelAnimationFrameSpy = vi
+      .spyOn(globalThis, "cancelAnimationFrame")
+      .mockImplementation(() => undefined);
+
+    container.getBoundingClientRect = () => ({ bottom: 500 }) as DOMRect;
+    lastRow.getBoundingClientRect = () => ({ bottom: 480 }) as DOMRect;
+
+    fireEvent.pointerDown(anchorRow, { button: 0, clientY: 200, pointerType: "mouse" });
+    fireEvent.pointerMove(document, { clientY: 490, pointerType: "mouse" });
+    document.dispatchEvent(new Event("selectionchange"));
+    fireEvent.scroll(container);
+
+    expect(animationFrames).toHaveLength(1);
+    animationFrames.shift()?.(0);
+    expect(extend).toHaveBeenCalledWith(lastRow, lastRow.childNodes.length);
+
+    fireEvent.scroll(container);
+    expect(animationFrames).toHaveLength(1);
+    animationFrames.shift()?.(1);
+    expect(extend).toHaveBeenCalledTimes(2);
+
+    fireEvent.scroll(container);
+    const pendingAnimationFrame = animationFrames.shift();
+
+    fireEvent.pointerUp(document, { pointerType: "mouse" });
+    expect(cancelAnimationFrameSpy).toHaveBeenCalledWith(1);
+
+    pendingAnimationFrame?.(2);
+    expect(extend).toHaveBeenCalledTimes(2);
+
+    getSelectionSpy.mockRestore();
+    requestAnimationFrameSpy.mockRestore();
+    cancelAnimationFrameSpy.mockRestore();
+  });
+
+  it("only activates for downward primary-mouse drags starting in a log row", async () => {
+    render(
+      <AppWrapper initialEntries={["/dags/log_grouping/runs/manual__2025-02-18T12:19/tasks/ti_context"]} />,
+    );
+    await waitForLogs();
+
+    const container = screen.getByTestId("virtual-scroll-container");
+    const anchorRow = container.querySelector<HTMLElement>("[data-index]") as HTMLElement;
+    const rows = container.querySelectorAll<HTMLElement>("[data-index]");
+    const lastRow = rows[rows.length - 1] as HTMLElement;
+    const requestAnimationFrameSpy = vi
+      .spyOn(globalThis, "requestAnimationFrame")
+      .mockImplementation(() => 1);
+
+    container.getBoundingClientRect = () => ({ bottom: 500 }) as DOMRect;
+    lastRow.getBoundingClientRect = () => ({ bottom: 700 }) as DOMRect;
+
+    fireEvent.pointerDown(container, { button: 0, clientY: 200, pointerType: "mouse" });
+    fireEvent.pointerMove(document, { clientY: 600, pointerType: "mouse" });
+    expect(requestAnimationFrameSpy).not.toHaveBeenCalled();
+
+    fireEvent.pointerDown(anchorRow, { button: 2, clientY: 200, pointerType: "mouse" });
+    fireEvent.pointerMove(document, { clientY: 600, pointerType: "mouse" });
+    expect(requestAnimationFrameSpy).not.toHaveBeenCalled();
+
+    fireEvent.pointerDown(anchorRow, { button: 0, clientY: 200, pointerType: "touch" });
+    fireEvent.pointerMove(document, { clientY: 600, pointerType: "touch" });
+    expect(requestAnimationFrameSpy).not.toHaveBeenCalled();
+
+    fireEvent.pointerDown(anchorRow, { button: 0, clientY: 200, pointerType: "mouse" });
+    fireEvent.pointerMove(document, { clientY: 50, pointerType: "mouse" });
+    fireEvent.scroll(container);
+    expect(requestAnimationFrameSpy).not.toHaveBeenCalled();
+
+    fireEvent.pointerUp(document, { pointerType: "mouse" });
+    requestAnimationFrameSpy.mockRestore();
+  });
+});

airflow-core/src/airflow/ui/src/pages/TaskInstance/Logs/TaskLogContent.tsx

@@ -30,6 +30,8 @@ import type { ParsedLogEntry } from "src/queries/useLogs";
 import { HighlightedText } from "./HighlightedText";
 import { ScrollToButton } from "./ScrollToButton";
 import {
+  getBottomDragBoundary,
+  getBottomDragClampTarget,
   extractSelectedLogText,
   getEntryText,
   getSelectionPinnedRows,
@@ -83,6 +85,10 @@ export const TaskLogContent = ({
   const isAtBottomRef = useRef<boolean>(true);
   const prevVisibleCountRef = useRef<number>(0);
   const pinnedRowsRef = useRef<Array<number>>([]);
+  const isSelectingRef = useRef<boolean>(false);
+  // NaN disables clamping between drags.
+  const lastPointerYRef = useRef<number>(Number.NaN);
+  const dragClampRafRef = useRef<number>(0);
 
   const rangeExtractor = (range: VirtualizerRange) =>
     mergePinnedIndexes(defaultRangeExtractor(range), pinnedRowsRef.current, range.count);
@@ -118,16 +124,89 @@ export const TaskLogContent = ({
 
   useEffect(() => {
     const container = parentRef.current;
+
+    if (!container) {
+      return undefined;
+    }
+    const clampSelectionToBottom = () => {
+      dragClampRafRef.current = 0;
+
+      if (!isSelectingRef.current) {
+        return;
+      }
+      const selection = document.getSelection();
+
+      if (!selection) {
+        return;
+      }
+      const clampTarget = getBottomDragClampTarget({
+        container,
+        pointerY: lastPointerYRef.current,
+        selection,
+      });
+
+      if (clampTarget) {
+        selection.extend(clampTarget.node, clampTarget.offset);
+      }
+    };
+    const scheduleBottomClamp = () => {
+      if (!isSelectingRef.current || dragClampRafRef.current !== 0) {
+        return;
+      }
+      const boundary = getBottomDragBoundary(container);
+
+      if (boundary === undefined || lastPointerYRef.current < boundary.y) {
+        return;
+      }
+      dragClampRafRef.current = requestAnimationFrame(clampSelectionToBottom);
+    };
     const handleSelectionChange = () => {
-      if (!container) {
+      const selection = document.getSelection();
+
+      pinnedRowsRef.current = getSelectionPinnedRows(selection, container);
+      scheduleBottomClamp();
+    };
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target instanceof Element ? event.target.closest("[data-index]") : null;
+
+      if (event.button !== 0 || event.pointerType !== "mouse" || !target || !container.contains(target)) {
         return;
       }
-      pinnedRowsRef.current = getSelectionPinnedRows(document.getSelection(), container);
+      isSelectingRef.current = true;
+      lastPointerYRef.current = event.clientY;
+    };
+    const stopSelecting = () => {
+      isSelectingRef.current = false;
+      lastPointerYRef.current = Number.NaN;
+      cancelAnimationFrame(dragClampRafRef.current);
+      dragClampRafRef.current = 0;
+    };
+    const handlePointerMove = (event: PointerEvent) => {
+      if (!isSelectingRef.current) {
+        return;
+      }
+      lastPointerYRef.current = event.clientY;
+      scheduleBottomClamp();
     };
 
+    container.addEventListener("pointerdown", handlePointerDown);
+    container.addEventListener("scroll", scheduleBottomClamp, { passive: true });
     document.addEventListener("selectionchange", handleSelectionChange);
-
-    return () => document.removeEventListener("selectionchange", handleSelectionChange);
+    document.addEventListener("pointermove", handlePointerMove, { passive: true });
+    document.addEventListener("pointerup", stopSelecting);
+    document.addEventListener("pointercancel", stopSelecting);
+    globalThis.addEventListener("blur", stopSelecting);
+
+    return () => {
+      container.removeEventListener("pointerdown", handlePointerDown);
+      container.removeEventListener("scroll", scheduleBottomClamp);
+      document.removeEventListener("selectionchange", handleSelectionChange);
+      document.removeEventListener("pointermove", handlePointerMove);
+      document.removeEventListener("pointerup", stopSelecting);
+      document.removeEventListener("pointercancel", stopSelecting);
+      globalThis.removeEventListener("blur", stopSelecting);
+      cancelAnimationFrame(dragClampRafRef.current);
+    };
   }, []);
 
   useEffect(() => {