[OPIK-8005] [FE] fix: scope hydration cancellation to the effect run (Baz review)

Baz caught a real bug in the previous commit, and it is worth being precise that
the new early-return path made a latent flaw dangerous rather than merely
inelegant.

cancelledRef is a single ref shared across every effect run, and the effect body
reset it to false on entry. React runs the previous run's cleanup before the next
body, so the sequence was: run 1 starts hydrating dataset A and installs cleanup
-> dataset changes -> cleanup sets cancelled = true -> run 2 enters and resets it
to false, un-cancelling run 1's still-pending loop -> run 1's continuation passes
its post-await check and calls setHydratedItems on the new array.

Before this PR the only early return sat after setHydratedItems([]), so that
stale continuation's prev.map() ran over an empty array and produced nothing —
harmless. The no-media early return added in the previous commit sits after
setHydratedItems(datasetItems) with a populated array, so the same continuation
writes dataset A's data into dataset B's array at a positional index. That is
silent cross-dataset corruption, reachable by switching dataset or page size
while a media-bearing dataset is still hydrating.

Replace the shared ref with a `cancelled` flag scoped to each effect run. Each
run observes only its own flag, so early-returning without installing cleanup
cannot resurrect an older run's loop. This also fixes the pre-existing empty-
dataset path and the setState-after-unmount case, and removes the useRef import.

Verified: tsc, eslint --max-warnings=0, prettier, and the full vitest suite
(150 files, 2229 tests) all pass.

Refs: OPIK-8005, CUST_6878, AI_546

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: Nimrod007

apps/opik-frontend/src/v2/pages/PlaygroundPage/useIncrementalDatasetHydration.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import { DatasetItem } from "@/types/datasets";
 import { useHydrateDatasetItemData } from "@/v2/pages/PlaygroundPage/useHydrateDatasetItemData";
 import { containsTruncatedMedia } from "@/lib/media";
@@ -10,10 +10,16 @@ export function useIncrementalDatasetHydration(datasetItems: DatasetItem[]): {
   const hydrateDatasetItemData = useHydrateDatasetItemData();
   const [hydratedItems, setHydratedItems] = useState<DatasetItem[]>([]);
   const [isHydrating, setIsHydrating] = useState(false);
-  const cancelledRef = useRef(false);
 
   useEffect(() => {
-    cancelledRef.current = false;
+    // Scoped to this effect run rather than a shared ref. React runs the previous
+    // run's cleanup before this body, so an in-flight hydration from an earlier
+    // dataset observes its own `cancelled === true` and stops — even when this run
+    // returns early below and installs no cleanup of its own. A shared ref instead
+    // got reset here on every run, un-cancelling the previous run's loop; its
+    // continuation would then write the old dataset's data into the new array at a
+    // positional index. Also covers unmount.
+    let cancelled = false;
 
     if (datasetItems.length === 0) {
       setHydratedItems([]);
@@ -48,11 +54,11 @@ export function useIncrementalDatasetHydration(datasetItems: DatasetItem[]): {
 
     const hydrateItems = async () => {
       for (const index of indexesToHydrate) {
-        if (cancelledRef.current) return;
+        if (cancelled) return;
 
         const hydratedData = await hydrateDatasetItemData(datasetItems[index]);
 
-        if (cancelledRef.current) return;
+        if (cancelled) return;
 
         setHydratedItems((prev) =>
           prev.map((item, idx) =>
@@ -67,7 +73,7 @@ export function useIncrementalDatasetHydration(datasetItems: DatasetItem[]): {
     hydrateItems();
 
     return () => {
-      cancelledRef.current = true;
+      cancelled = true;
     };
   }, [datasetItems, hydrateDatasetItemData]);