@adcops/autocore-react 3.3.82 → 3.3.84

package/src/components/tis/TestDataView.tsx

@@ -2,10 +2,26 @@
  * Copyright (C) 2026 Automated Design Corp. All Rights Reserved.
  *
  * TestDataView — standardized test-detail view for the Test Information
- * System. Renders metadata header + cycle-scatter chart + virtual-scroll
- * cycle table + results table, and subscribes to live `tis.cycle_added`
- * and `tis.results_updated` broadcasts so the display updates as the
- * control program appends cycles.
+ * System. Renders, top-to-bottom:
+ *
+ *   - metadata header (sample, project/method/run, "View Raw Data" btn)
+ *   - **unified chart panel**: one dropdown lists every view declared in
+ *     the schema (any type). The chart area dispatches on `view.type`:
+ *       * `raw_trace`     — plots columns from the per-cycle raw blob,
+ *                            shows a cycle picker when >1 cycle exists.
+ *       * `cycle_scatter` — plots per-cycle scalars across the full run.
+ *     Raw blob fetching is lazy: nothing's pulled until a raw_trace view
+ *     is actually selected, so scatter-only runs don't pay the round trip.
+ *   - virtual-scroll cycle table
+ *   - results table
+ *
+ * Subscribes to live `tis.cycle_added` and `tis.results_updated`
+ * broadcasts so cycle data + scatter chart update as the control
+ * program appends cycles.
+ *
+ * Sibling <TestRawDataView> stays exported for callers that want a
+ * focused trace-only viewer with no scatter / cycle-table / results
+ * sections.
  */
 
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
@@ -26,6 +42,7 @@ import { Line } from 'react-chartjs-2';
 import { EventEmitterContext } from '../../core/EventEmitterContext';
 import { MessageType } from '../../hub/CommandMessage';
 import { useTis } from './TisProvider';
+import { useRawCycleData } from './useRawCycleData';
 
 ChartJS.register(
     CategoryScale, LinearScale, PointElement, LineElement,
@@ -43,6 +60,11 @@ export interface TestFieldDef {
     units?: string;
     required?: boolean;
     source?: string;
+    /** Optional display-time scale multiplier. `display = raw * scale`,
+     *  default 1.0 = no conversion. Cycle Data and Results panels
+     *  apply this when formatting numeric cells. Charts plot raw
+     *  values (axis labels already carry units). Storage stays raw. */
+    scale?: number;
 }
 
 export interface ChartAxis  { field?: string; column?: string; label?: string; }
@@ -88,6 +110,9 @@ export interface TestDataViewProps {
     throttleMs?:  number;
     /** Fixed cycle-table scroll height. Default "400px". */
     cycleTableHeight?: string;
+    /** Height of the unified chart panel (any CSS length). Default "320px".
+     *  Set to e.g. "50vh" for a taller chart on a single-test page. */
+    chartHeight?: string;
 }
 
 // -------------------------------------------------------------------------
@@ -98,7 +123,7 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
     const methodId  = props.methodId  ?? tis.selection.methodId;
     const runId     = props.runId     ?? tis.selection.runId;
     const schema    = props.schema    ?? (methodId ? (tis.schemas[methodId] as TestMethod) : undefined);
-    const { throttleMs = 100, cycleTableHeight = '400px' } = props;
+    const { throttleMs = 100, cycleTableHeight = '400px', chartHeight = '320px' } = props;
     const { invoke, subscribe, unsubscribe } = useContext(EventEmitterContext);
 
     const [meta, setMeta]       = useState<any>(null);
@@ -107,6 +132,13 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
     const [rawOpen, setRawOpen] = useState(false);
     const [configOpen, setConfigOpen] = useState(false);
 
+    // Direct handle on the chart.js instance so the toolbar's reset-
+    // zoom button can call chart.resetZoom() — the zoom plugin's only
+    // imperative API. Customers like the wheel/pinch/drag zoom but
+    // can get lost in the chart with no obvious way back; the icon
+    // button in the chart's header row is the escape hatch.
+    const chartRef = useRef<any>(null);
+
     // Lazy-loaded blobs for the View Raw Data dialog. Fetched only
     // when the dialog opens, and re-fetched if the operator pins a
     // different run / cycle while the dialog is closed.
@@ -128,37 +160,42 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
     const [availableCycles, setAvailableCycles] = useState<number[]>([]);
     const [selectedCycle, setSelectedCycle]     = useState<number | null>(null);
 
-    // Scatter-capable views only — raw_trace lives in <TestRawDataView>.
-    const scatterViews = useMemo(() => {
+    // All views, any type, in declaration order. The dropdown lists
+    // every one; the chart area dispatches on `view.type` to render
+    // either a scatter or a raw_trace chart from the appropriate data.
+    const allViews = useMemo(() => {
         const out: { name: string; view: ChartView }[] = [];
         for (const [name, v] of Object.entries(schema?.views ?? {})) {
-            if ((v as ChartView).type === 'cycle_scatter') out.push({ name, view: v as ChartView });
+            out.push({ name, view: v as ChartView });
         }
         return out;
     }, [schema]);
 
     const [selectedView, setSelectedView] = useState<string | null>(
-        scatterViews.length > 0 ? scatterViews[0].name : null,
+        allViews.length > 0 ? allViews[0].name : null,
     );
 
     // Default to the first available view as soon as the schema loads.
     // The useState initializer above only runs on first mount, when
-    // scatterViews is typically still empty (schema fetch in flight).
+    // allViews is typically still empty (schema fetch in flight).
     // Without this effect, selectedView stays null and the chart
     // stays blank until the operator opens the dropdown — almost
     // nobody does, so they email asking why the chart is broken.
     //
     // Also handles the case where the schema changes and the
-    // currently-selected view is no longer in scatterViews — falls
-    // back to the new first view rather than rendering nothing.
+    // currently-selected view is no longer in allViews — falls back
+    // to the new first view rather than rendering nothing.
     useEffect(() => {
-        if (scatterViews.length === 0) return;
+        if (allViews.length === 0) return;
         const stillValid = selectedView !== null
-            && scatterViews.some(v => v.name === selectedView);
+            && allViews.some(v => v.name === selectedView);
         if (!stillValid) {
-            setSelectedView(scatterViews[0].name);
+            setSelectedView(allViews[0].name);
         }
-    }, [scatterViews, selectedView]);
+    }, [allViews, selectedView]);
+
+    const selectedViewDef = allViews.find(v => v.name === selectedView)?.view;
+    const isRawTraceView  = selectedViewDef?.type === 'raw_trace';
 
     // Pending updates coalesced by a throttle window — keeps React
     // re-renders at <= 1 / throttleMs even if cycles stream faster.
@@ -245,58 +282,102 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
     }, [projectId, methodId, runId, throttleMs]);
 
     // -----------------------------------------------------------------
-    // Chart data
+    // Raw-trace data fetch (lazy)
+    //
+    // Only ever pulls a blob when the active chart view is a raw_trace.
+    // Switching to a cycle_scatter view leaves the previously-loaded
+    // raw state alone (still in memory but unused), so flipping back
+    // and forth is instant after the first fetch.
+    // -----------------------------------------------------------------
+    const traceBlobName = schema?.raw_data?.blob_name ?? 'trace';
+    const traceFetch = useRawCycleData({
+        projectId, methodId, runId,
+        blobName: traceBlobName,
+        enabled: isRawTraceView,
+    });
+
+    // -----------------------------------------------------------------
+    // Chart data — dispatches on view.type so one panel handles both
+    // shapes. Returns null when the active view's input data isn't
+    // ready (e.g., raw blob still loading); the render block treats
+    // null as "show overlay instead of an empty chart."
     // -----------------------------------------------------------------
     const chartData = useMemo(() => {
-        if (!selectedView || scatterViews.length === 0) return null;
-        const view = scatterViews.find(v => v.name === selectedView)?.view;
-        if (!view) return null;
-
-        const xField = view.x.field!;
-        const asc = [...cycles].reverse();  // cycles state is newest-first; charts want oldest-first
-        const xs = asc.map(c => c[xField]);
-
-        const datasets = view.y.map((s, idx) => ({
-            label: s.label ?? s.field,
-            data: asc.map(c => c[s.field!]),
-            yAxisID: s.y_axis === 'right' ? 'y1' : 'y',
-            borderColor:  palette(idx),
-            backgroundColor: palette(idx),
-            tension: 0.1,
-            pointRadius: 2,
-        }));
-
-        return { labels: xs, datasets };
-    }, [cycles, selectedView, scatterViews]);
-
-    const selectedViewDef = scatterViews.find(v => v.name === selectedView)?.view;
+        if (!selectedViewDef) return null;
+        if (selectedViewDef.type === 'cycle_scatter') {
+            const xField = selectedViewDef.x.field;
+            if (!xField) return null;
+            const asc = [...cycles].reverse(); // state is newest-first; charts want oldest-first
+            const xs = asc.map(c => c[xField]);
+            const datasets = selectedViewDef.y.map((s, idx) => ({
+                label: s.label ?? s.field,
+                data: asc.map(c => c[s.field!]),
+                yAxisID: s.y_axis === 'right' ? 'y1' : 'y',
+                borderColor:  palette(idx),
+                backgroundColor: palette(idx),
+                tension: 0.1,
+                pointRadius: 2,
+            }));
+            return { labels: xs, datasets };
+        }
+        if (selectedViewDef.type === 'raw_trace') {
+            if (!traceFetch.raw) return null;
+            const xCol = selectedViewDef.x.column;
+            if (!xCol) return null;
+            const xs = traceFetch.raw[xCol] ?? [];
+            const datasets = selectedViewDef.y.map((s, idx) => ({
+                label: s.label ?? s.column,
+                data: (traceFetch.raw![s.column!] ?? []).map((y, i) => ({ x: xs[i], y })),
+                yAxisID: s.y_axis === 'right' ? 'y1' : 'y',
+                borderColor:  palette(idx),
+                backgroundColor: palette(idx),
+                pointRadius: 0,
+                borderWidth: 1.5,
+                showLine: true,
+            }));
+            return { datasets };
+        }
+        return null;
+    }, [selectedViewDef, cycles, traceFetch.raw]);
+
     const usesRightAxis = selectedViewDef?.y.some(s => s.y_axis === 'right') ?? false;
 
-    const chartOptions = useMemo(() => ({
-        responsive: true,
-        maintainAspectRatio: false,
-        scales: {
-            x:  { title: { display: !!selectedViewDef?.x.label, text: selectedViewDef?.x.label } },
-            y:  { position: 'left' as const,
-                  title: { display: true, text: leftAxisLabel(selectedViewDef) } },
-            ...(usesRightAxis ? {
-                y1: { position: 'right' as const,
-                      grid: { drawOnChartArea: false },
-                      title: { display: true, text: rightAxisLabel(selectedViewDef) } },
-            } : {}),
-        },
-        plugins: {
-            legend: { display: true },
-            zoom: {
-                pan:  { enabled: true, mode: 'xy' as const },
+    const chartOptions = useMemo(() => {
+        const isTrace = selectedViewDef?.type === 'raw_trace';
+        return {
+            responsive: true,
+            maintainAspectRatio: false,
+            // raw_trace datasets are pre-built `{x, y}` points so
+            // chart.js shouldn't try to parse them; cycle_scatter uses
+            // the `labels` + per-dataset `data: number[]` shape and
+            // needs default parsing on.
+            parsing: isTrace ? (false as const) : undefined,
+            scales: {
+                x: isTrace
+                    ? { type: 'linear' as const,
+                        title: { display: !!selectedViewDef?.x.label, text: selectedViewDef?.x.label } }
+                    : { title: { display: !!selectedViewDef?.x.label, text: selectedViewDef?.x.label } },
+                y: { position: 'left' as const,
+                     title: { display: true, text: leftAxisLabel(selectedViewDef) } },
+                ...(usesRightAxis ? {
+                    y1: { position: 'right' as const,
+                          grid: { drawOnChartArea: false },
+                          title: { display: true, text: rightAxisLabel(selectedViewDef) } },
+                } : {}),
+            },
+            plugins: {
+                legend: { display: true },
                 zoom: {
-                    wheel: { enabled: true },
-                    pinch: { enabled: true },
-                    mode:  'xy' as const,
+                    pan:  { enabled: true, mode: 'xy' as const },
+                    zoom: {
+                        wheel: { enabled: true },
+                        pinch: { enabled: true },
+                        mode:  'xy' as const,
+                    },
                 },
             },
-        },
-    }), [selectedViewDef, usesRightAxis]);
+        };
+    }, [selectedViewDef, usesRightAxis]);
 
     // -----------------------------------------------------------------
     // View Raw Data dialog: lazy-fetch raw + filtered blobs the first
@@ -439,36 +520,92 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
                 affordance instead of silence. The dropdown is disabled
                 in that case; the chart area renders empty. */}
             <div className="p-card" style={{ padding: '1rem' }}>
-                <div className="flex" style={{ gap: '1rem', alignItems: 'center', marginBottom: '0.5rem' }}>
+                <div className="flex" style={{ gap: '1rem', alignItems: 'center', marginBottom: '0.5rem', flexWrap: 'wrap' }}>
                     <Dropdown
                         value={selectedView}
-                        options={scatterViews.map(v => ({ label: v.view.title ?? v.name, value: v.name }))}
+                        options={allViews.map(v => ({ label: v.view.title ?? v.name, value: v.name }))}
                         onChange={(e) => setSelectedView(e.value)}
-                        placeholder={scatterViews.length === 0 ? 'No view defined' : 'Select a view'}
-                        disabled={scatterViews.length === 0}
+                        placeholder={allViews.length === 0 ? 'No view defined' : 'Select a view'}
+                        disabled={allViews.length === 0}
                     />
                     <h3 style={{ margin: 0 }}>{selectedViewDef?.title ?? ''}</h3>
+                    {/* Cycle picker — only visible for raw_trace views
+                        AND when more than one cycle exists. The hook
+                        handles the cycle-list discovery and "default
+                        to latest" behaviour so this stays declarative. */}
+                    {isRawTraceView && traceFetch.cycles.length > 1 && (
+                        <>
+                            <label htmlFor="chart-cycle-picker"
+                                   style={{ color: 'var(--text-secondary-color)' }}>Cycle:</label>
+                            <Dropdown
+                                inputId="chart-cycle-picker"
+                                value={traceFetch.selectedCycle}
+                                options={traceFetch.cycles.map(c => ({ label: `Cycle ${c}`, value: c }))}
+                                onChange={(e) => traceFetch.setSelectedCycle(Number(e.value))}
+                                style={{ minWidth: '8rem' }}
+                            />
+                            <span style={{ color: 'var(--text-secondary-color)' }}>
+                                of {traceFetch.cycles.length}
+                            </span>
+                        </>
+                    )}
+                    {/* Spacer pushes the reset-zoom button to the right
+                        edge of the row, opposite the dropdown. The
+                        pi-th-large icon mirrors a "view all" / "fit"
+                        affordance — the chart.js zoom plugin calls
+                        this resetZoom and we wire it on the chartRef
+                        below. Customers wanted the affordance because
+                        the chart's wheel/pinch zoom is easy to lose
+                        track of mid-test. */}
+                    <div style={{ flex: 1 }} />
+                    <Button
+                        icon="pi pi-th-large"
+                        outlined
+                        rounded
+                        size="small"
+                        onClick={() => chartRef.current?.resetZoom?.()}
+                        disabled={!chartData}
+                        tooltip="Reset chart zoom"
+                        tooltipOptions={{ position: 'left' }}
+                        aria-label="Reset chart zoom"
+                    />
                 </div>
-                <div style={{ height: 320 }}>
-                    {chartData && <Line data={chartData} options={chartOptions} />}
+                <div style={{ height: chartHeight, position: 'relative' }}>
+                    {isRawTraceView && traceFetch.loading &&
+                        <ChartOverlay>Loading raw data…</ChartOverlay>}
+                    {isRawTraceView && traceFetch.error &&
+                        <ChartOverlay>{traceFetch.error}</ChartOverlay>}
+                    {chartData && <Line ref={chartRef} data={chartData} options={chartOptions} />}
                 </div>
             </div>
 
             <div className="p-card" style={{ padding: '1rem' }}>
                 <h3 style={{ marginTop: 0 }}>Cycle Data ({cycles.length})</h3>
-                <DataTable
-                    value={cycles}
-                    scrollable
-                    scrollHeight={cycleTableHeight}
-                    virtualScrollerOptions={{ itemSize: 38 }}
-                    emptyMessage="No cycles yet."
-                >
-                    {schema.cycle_fields.map(f => (
-                        <Column key={f.name} field={f.name}
-                                header={f.units ? `${f.name} (${f.units})` : f.name}
-                                body={(row) => formatCell(row[f.name], f.type)} />
-                    ))}
-                </DataTable>
+                {/* Size-to-content for small runs (≤ CYCLE_VIRTUAL_THRESHOLD
+                    rows) so the Results panel below isn't pushed off-screen
+                    on tests with one or two cycles. Larger runs flip to
+                    virtual scrolling against `cycleTableHeight` so a
+                    1000-cycle test doesn't render 1000 row elements at
+                    once. Operators on test methods that always run a
+                    fixed-size short cycle list see no scrollbar at all. */}
+                {(() => {
+                    const useVirtual = cycles.length > CYCLE_VIRTUAL_THRESHOLD;
+                    return (
+                        <DataTable
+                            value={cycles}
+                            scrollable={useVirtual}
+                            scrollHeight={useVirtual ? cycleTableHeight : undefined}
+                            virtualScrollerOptions={useVirtual ? { itemSize: 38 } : undefined}
+                            emptyMessage="No cycles yet."
+                        >
+                            {schema.cycle_fields.map(f => (
+                                <Column key={f.name} field={f.name}
+                                        header={f.units ? `${f.name} (${f.units})` : f.name}
+                                        body={(row) => formatCell(row[f.name], f.type, f.scale)} />
+                            ))}
+                        </DataTable>
+                    );
+                })()}
             </div>
 
             <div className="p-card" style={{ padding: '1rem' }}>
@@ -851,26 +988,61 @@ const ResultsGrid: React.FC<{ schema: TestFieldDef[]; values: any }> = ({ schema
                     <div style={{ fontSize: '0.8em', color: 'var(--text-secondary-color)' }}>
                         {f.name}{f.units ? ` (${f.units})` : ''}
                     </div>
-                    <div>{formatCell(values[f.name], f.type)}</div>
+                    <div>{formatCell(values[f.name], f.type, f.scale)}</div>
                 </div>
             ))}
         </div>
     );
 };
 
+/** Row count above which the Cycle Data table switches into virtual-
+ *  scroll mode with a fixed `cycleTableHeight`. At or below the
+ *  threshold the table sizes to its content so the Results panel
+ *  below doesn't get pushed off-screen on short runs. 30 is enough to
+ *  comfortably show a typical hand-tuned test session without
+ *  scrolling but small enough that virtualization kicks in well
+ *  before performance becomes a concern. */
+const CYCLE_VIRTUAL_THRESHOLD = 30;
+
 const CHART_COLORS = [
     '#4ea8de', '#f59e0b', '#22c55e', '#a855f7',
     '#ef4444', '#14b8a6', '#eab308', '#ec4899',
 ];
 const palette = (i: number) => CHART_COLORS[i % CHART_COLORS.length];
 
+// Loading / error wash drawn over the chart area while a raw_trace
+// fetch is in flight. Centered, pointer-events-none so the operator
+// can still interact with the dropdown above.
+const ChartOverlay: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+    <div style={{ position: 'absolute', inset: 0, display: 'flex',
+                  alignItems: 'center', justifyContent: 'center',
+                  color: 'var(--text-secondary-color)', pointerEvents: 'none' }}>
+        {children}
+    </div>
+);
+
+// Axis labels work for both scatter (s.field) and raw_trace (s.column)
+// series. Whichever the view declared, that's what's used as a label
+// fallback when the explicit `label` is absent.
+const seriesLabel = (s: ChartSeries) => s.label ?? s.field ?? s.column ?? '';
 const leftAxisLabel = (v?: ChartView) =>
-    v?.y.filter(s => s.y_axis !== 'right').map(s => s.label ?? s.field).join(' / ') ?? '';
+    v?.y.filter(s => s.y_axis !== 'right').map(seriesLabel).join(' / ') ?? '';
 const rightAxisLabel = (v?: ChartView) =>
-    v?.y.filter(s => s.y_axis === 'right').map(s => s.label ?? s.field).join(' / ') ?? '';
+    v?.y.filter(s => s.y_axis === 'right').map(seriesLabel).join(' / ') ?? '';
 
-const formatCell = (v: any, type: string): string => {
+/**
+ * Format one value for a cycle / results / config cell.
+ *
+ * `scale`, when present and != 1, is applied to numeric values so the
+ * cell displays in operator units while storage stays raw. Mirrors
+ * the convention used by AutoCoreTagContext: `display = raw * scale`.
+ * Non-numeric values pass through unchanged.
+ */
+const formatCell = (v: any, type: string, scale?: number): string => {
     if (v === null || v === undefined) return '';
+    if (scale && scale !== 1 && typeof v === 'number' && Number.isFinite(v)) {
+        v = v * scale;
+    }
     if (type === 'f32' || type === 'f64') {
         return typeof v === 'number' ? v.toFixed(4) : String(v);
     }

package/src/components/tis/TestRawDataView.tsx

@@ -10,7 +10,7 @@
  * built-in dialog inside <TestDataView>.
  */
 
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { Button } from 'primereact/button';
 import { Dropdown } from 'primereact/dropdown';
 
@@ -21,10 +21,9 @@ import { Chart as ChartJS,
 import zoomPlugin from 'chartjs-plugin-zoom';
 import { Line } from 'react-chartjs-2';
 
-import { EventEmitterContext } from '../../core/EventEmitterContext';
-import { MessageType } from '../../hub/CommandMessage';
 import type { ChartView, TestMethod } from './TestDataView';
 import { useTis } from './TisProvider';
+import { useRawCycleData } from './useRawCycleData';
 
 ChartJS.register(
     CategoryScale, LinearScale, PointElement, LineElement,
@@ -53,19 +52,8 @@ export const TestRawDataView: React.FC<TestRawDataViewProps> = (props) => {
     const runId     = props.runId     ?? tis.selection.runId;
     const schema    = props.schema    ?? (methodId ? (tis.schemas[methodId] as TestMethod) : undefined);
     const { blobName, chartHeight = '60vh' } = props;
-    const { invoke } = useContext(EventEmitterContext);
-
-    const [raw, setRaw]         = useState<Record<string, number[]> | null>(null);
-    const [envelope, setEnvelope] = useState<any | null>(null);
-    const [loading, setLoading] = useState(true);
-    const [error, setError]     = useState<string | null>(null);
     const chartRef              = useRef<any>(null);
 
-    // Per-test cycle picker. Default to latest cycle on disk; the
-    // operator can flip backward through earlier cycles.
-    const [cycles, setCycles]               = useState<number[]>([]);
-    const [selectedCycle, setSelectedCycle] = useState<number | null>(null);
-
     // raw_trace-capable views only — cycle scatter lives in <TestDataView>.
     const traceViews = useMemo(() => {
         const out: { name: string; view: ChartView }[] = [];
@@ -81,75 +69,19 @@ export const TestRawDataView: React.FC<TestRawDataViewProps> = (props) => {
 
     const effectiveBlobName = blobName ?? schema?.raw_data?.blob_name ?? 'trace';
 
-    // Reset cycle state when the run identity changes; the new run has
-    // its own cycle list and "latest" target.
-    useEffect(() => {
-        setCycles([]);
-        setSelectedCycle(null);
-    }, [projectId, methodId, runId, effectiveBlobName]);
-
-    // Discover available cycles for this run/blob. Runs ahead of the
-    // data fetch so the cycle picker can render immediately.
-    useEffect(() => {
-        if (!projectId || !methodId || !runId) return;
-        let cancelled = false;
-        (async () => {
-            try {
-                const resp: any = await invoke(
-                    'tis.list_raw' as any, MessageType.Request as any,
-                    { project_id: projectId, method_id: methodId, run_id: runId } as any);
-                if (cancelled || !resp?.success) return;
-                const list: any[] = resp.data?.cycles ?? [];
-                const indices = list
-                    .filter(c => c?.name === effectiveBlobName && typeof c?.cycle_index === 'number')
-                    .map(c => c.cycle_index as number)
-                    .sort((a, b) => a - b);
-                setCycles(indices);
-                if (indices.length > 0) {
-                    setSelectedCycle(prev => prev ?? indices[indices.length - 1]);
-                }
-            } catch {
-                // Listing failure is non-fatal — the data fetch below
-                // still tries "latest" and the picker just stays empty.
-            }
-        })();
-        return () => { cancelled = true; };
-    }, [projectId, methodId, runId, effectiveBlobName, invoke]);
-
-    // Lazy fetch — runs on mount / when identifiers / selectedCycle change.
-    useEffect(() => {
-        if (!projectId || !methodId || !runId) {
-            setRaw(null); setEnvelope(null); setLoading(false); setError(null);
-            return;
-        }
-        let cancelled = false;
-        setLoading(true);
-        setError(null);
-        (async () => {
-            try {
-                const args: Record<string, any> = {
-                    project_id: projectId, method_id: methodId,
-                    run_id: runId, name: effectiveBlobName,
-                };
-                if (selectedCycle != null) args.cycle_index = selectedCycle;
-                const resp: any = await invoke(
-                    'tis.read_raw' as any, MessageType.Request as any, args as any);
-                if (cancelled) return;
-                if (resp?.success) {
-                    const payload = resp.data ?? {};
-                    setEnvelope(payload);
-                    setRaw(unwrapEnvelope(payload));
-                } else {
-                    setError(resp?.error_message ?? 'Failed to read raw data');
-                }
-            } catch (e: any) {
-                if (!cancelled) setError(String(e?.message ?? e));
-            } finally {
-                if (!cancelled) setLoading(false);
-            }
-        })();
-        return () => { cancelled = true; };
-    }, [projectId, methodId, runId, effectiveBlobName, selectedCycle, invoke]);
+    // Cycle discovery + per-cycle blob fetch live in the shared hook so
+    // <TestDataView>'s unified panel can reuse the exact same fetch path
+    // when a raw_trace view is selected there.
+    const { cycles, selectedCycle, setSelectedCycle, raw, envelope, loading, error } =
+        useRawCycleData({
+            projectId, methodId, runId,
+            blobName: effectiveBlobName,
+            // This component only renders raw_trace charts, so always
+            // fetch as long as the run identity is in scope. The early
+            // returns below cover the "no test selected" / "no schema"
+            // cases that would otherwise be wasted requests.
+            enabled: !!projectId && !!methodId && !!runId,
+        });
 
     const chartData = useMemo(() => {
         if (!raw || !selectedView) return null;
@@ -279,20 +211,6 @@ const EmptyState: React.FC<{ message: string }> = ({ message }) => (
     <div style={{ padding: '1rem', color: 'var(--text-secondary-color)' }}>{message}</div>
 );
 
-// tis.read_raw returns one of:
-//   - per-cycle envelope: { cycle_index, cycle_fields, context, data }
-//   - legacy flat blob:   { col: number[] }
-// Chart/CSV code only wants the columnar payload — strip the envelope
-// when present, otherwise pass the blob through.
-const unwrapEnvelope = (blob: any): Record<string, number[]> => {
-    if (!blob || typeof blob !== 'object') return {};
-    if ('data' in blob && blob.data && typeof blob.data === 'object'
-        && Object.values(blob.data).some(v => Array.isArray(v))) {
-        return blob.data;
-    }
-    return blob;
-};
-
 // Strip of cycle_index + cycle_fields + context, rendered above the
 // chart so the operator can see *which* cycle they're looking at and
 // what schema-declared metric values were active for it. Renders