Keep task log selection stable while dragging

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";
 
@@ -529,3 +529,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

@@ -29,7 +29,12 @@ import type { ParsedLogEntry } from "src/queries/useLogs";
 
 import { HighlightedText } from "./HighlightedText";
 import { ScrollToButton } from "./ScrollToButton";
-import { getSelectionPinnedRows, mergePinnedIndexes } from "./logSelection";
+import {
+  getBottomDragBoundary,
+  getBottomDragClampTarget,
+  getSelectionPinnedRows,
+  mergePinnedIndexes,
+} from "./logSelection";
 import { useLogGroups } from "./useLogGroups";
 import { getHighlightColor, isSelectionWithin, scrollToBottom, scrollToTop } from "./utils";
 
@@ -78,6 +83,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);
@@ -113,16 +122,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);
+    };
   }, []);
 
   useLayoutEffect(() => {