@adcops/autocore-react 3.3.72 → 3.3.75

package/src/components/tis/ResultHistoryTable.tsx

@@ -24,40 +24,98 @@ export interface ResultHistoryTableProps {
 }
 
 /**
- * Convert a raw_data blob (`{ colA: [...], colB: [...], ... }`) into a CSV
- * string. Keys with scalar (non-array) values are skipped; array lengths are
- * truncated to the shortest column so the grid is rectangular.
- *
- * Column order: `t` first if present (it's the canonical x-axis in every
- * current test schema), then the remaining keys in their JSON order. Each
- * cell is quoted only when it contains a comma, quote, or newline — matching
- * RFC 4180.
+ * Peel a tis.read_raw response. The wire shape may be either a per-cycle
+ * envelope `{ cycle_index, cycle_fields, context, data }` or the legacy
+ * flat `{ col: number[] }` blob. CSV builders only want the columnar
+ * `{ col: number[] }` part.
  */
-const rawBlobToCsv = (blob: any): string => {
-    if (!blob || typeof blob !== 'object') return '';
-
-    const entries: Array<[string, any[]]> = Object.entries(blob)
-        .filter(([, v]) => Array.isArray(v)) as Array<[string, any[]]>;
-    if (entries.length === 0) return '';
+const unwrapEnvelope = (blob: any): Record<string, any[]> => {
+    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 as Record<string, any[]>;
+    }
+    return blob as Record<string, any[]>;
+};
 
-    entries.sort(([a], [b]) => (a === 't' ? -1 : b === 't' ? 1 : 0));
+/**
+ * RFC 4180 escape: quote only when the value contains comma, quote, or newline.
+ */
+const escapeCsv = (v: any): string => {
+    if (v === null || v === undefined) return '';
+    const s = String(v);
+    return /[",\n\r]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
+};
 
-    const columns = entries.map(([k]) => k);
-    const nRows   = entries.reduce((min, [, arr]) => Math.min(min, arr.length), Infinity);
+/**
+ * Build the canonical column order for a set of cycle blobs: `t` first
+ * (canonical x-axis in every current schema), then the union of remaining
+ * array-valued keys in first-seen order across cycles.
+ */
+const unifyColumns = (blobs: Record<string, any[]>[]): string[] => {
+    const seen = new Set<string>();
+    const out: string[] = [];
+    for (const blob of blobs) {
+        for (const [k, v] of Object.entries(blob)) {
+            if (Array.isArray(v) && !seen.has(k)) {
+                seen.add(k);
+                out.push(k);
+            }
+        }
+    }
+    out.sort((a, b) => (a === 't' ? -1 : b === 't' ? 1 : 0));
+    return out;
+};
 
-    const escape = (v: any): string => {
-        if (v === null || v === undefined) return '';
-        const s = String(v);
-        return /[",\n\r]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
-    };
+/**
+ * Concatenate one or more cycle envelopes into a single CSV. Adds a leading
+ * `cycle_index` column so downstream consumers can split groups apart again.
+ * Missing columns in a given cycle become empty cells.
+ */
+const cyclesToCsv = (cycles: Array<{ cycleIndex: number; blob: any }>): string => {
+    if (cycles.length === 0) return '';
+    const unwrapped = cycles.map(c => ({
+        cycleIndex: c.cycleIndex,
+        blob: unwrapEnvelope(c.blob),
+    }));
+    const columns = unifyColumns(unwrapped.map(u => u.blob));
+    if (columns.length === 0) return '';
 
-    const lines: string[] = [columns.join(',')];
-    for (let i = 0; i < nRows; i++) {
-        lines.push(entries.map(([, arr]) => escape(arr[i])).join(','));
+    const lines: string[] = [['cycle_index', ...columns].join(',')];
+    for (const { cycleIndex, blob } of unwrapped) {
+        const nRows = columns.reduce(
+            (min, c) => Array.isArray(blob[c]) ? Math.min(min, blob[c].length) : min,
+            Infinity,
+        );
+        const finite = Number.isFinite(nRows) ? (nRows as number) : 0;
+        for (let i = 0; i < finite; i++) {
+            const row = [escapeCsv(cycleIndex)];
+            for (const c of columns) {
+                const arr = blob[c];
+                row.push(escapeCsv(Array.isArray(arr) ? arr[i] : ''));
+            }
+            lines.push(row.join(','));
+        }
     }
     return lines.join('\n');
 };
 
+/**
+ * Single-blob CSV — kept for the filtered-data download path, which is
+ * not (yet) per-cycle on the server.
+ */
+const rawBlobToCsv = (blob: any): string => {
+    const unwrapped = unwrapEnvelope(blob);
+    return cyclesToCsv([{ cycleIndex: 0, blob: unwrapped }])
+        // Strip the synthetic cycle_index column for the legacy single-blob path.
+        .split('\n')
+        .map(line => {
+            const idx = line.indexOf(',');
+            return idx >= 0 ? line.slice(idx + 1) : '';
+        })
+        .join('\n');
+};
+
 /**
  * Browser download shim: turn a string into a transient blob URL, click it,
  * and clean up. Works without any extra libraries.
@@ -126,37 +184,86 @@ export const ResultHistoryTable: React.FC<ResultHistoryTableProps> = (props) =>
         const rowMethodId = rowData?.method_id ?? methodId;
         if (!runId || !rowMethodId) return;
 
-        // raw_data/ and filtered_data/ are symmetric dirs on disk; the same
-        // blob name ("trace") exists in both. Only the IPC topic and filename
-        // suffix change.
+        // raw_data/ is per-cycle on disk; filtered_data/ is still a single
+        // file per test. The raw path lists cycles via tis.list_raw and
+        // concatenates them into one CSV with a leading cycle_index
+        // column. Filtered keeps its one-shot tis.read_filtered.
         const topic  = kind === 'raw' ? 'tis.read_raw' : 'tis.read_filtered';
         const label  = kind === 'raw' ? 'raw trace'   : 'filtered trace';
         const suffix = kind === 'raw' ? 'raw'         : 'filtered';
 
         setDownloading({ runId, kind });
         try {
-            const resp: any = await invoke(topic as any, MessageType.Request, {
-                project_id: projectId,
-                method_id:  rowMethodId,
-                run_id:     runId,
-                name:       'trace',
-            } as any);
+            let csv = '';
 
-            if (!resp?.success || !resp.data) {
-                console.warn(`${topic} returned no data for`, runId, resp?.error_message);
-                alert(
-                    `No ${label} available for ${runId}` +
-                    (resp?.error_message ? `: ${resp.error_message}` : '')
+            if (kind === 'raw') {
+                // List every cycle on disk for this run/blob.
+                const listResp: any = await invoke(
+                    'tis.list_raw' as any, MessageType.Request, {
+                        project_id: projectId, method_id: rowMethodId, run_id: runId,
+                    } as any,
                 );
-                return;
+                const cycleEntries: any[] = listResp?.data?.cycles ?? [];
+                const cycleIdxs = cycleEntries
+                    .filter(c => c?.name === 'trace' && typeof c?.cycle_index === 'number')
+                    .map(c => c.cycle_index as number)
+                    .sort((a, b) => a - b);
+
+                if (cycleIdxs.length === 0) {
+                    // Legacy run with a single un-cycled file → fall back
+                    // to a one-shot read (server resolves the legacy path).
+                    const resp: any = await invoke(topic as any, MessageType.Request, {
+                        project_id: projectId, method_id: rowMethodId,
+                        run_id: runId, name: 'trace',
+                    } as any);
+                    if (!resp?.success || !resp.data) {
+                        console.warn(`${topic} returned no data for`, runId, resp?.error_message);
+                        alert(`No ${label} available for ${runId}` +
+                              (resp?.error_message ? `: ${resp.error_message}` : ''));
+                        return;
+                    }
+                    csv = rawBlobToCsv(resp.data);
+                } else {
+                    // Fetch each cycle's envelope in parallel; concat into
+                    // one CSV with a leading cycle_index column.
+                    const fetched = await Promise.all(cycleIdxs.map(async (ci) => {
+                        const r: any = await invoke('tis.read_raw' as any, MessageType.Request, {
+                            project_id: projectId, method_id: rowMethodId,
+                            run_id: runId, name: 'trace', cycle_index: ci,
+                        } as any);
+                        return r?.success ? { cycleIndex: ci, blob: r.data } : null;
+                    }));
+                    const good = fetched.filter((x): x is { cycleIndex: number; blob: any } => x !== null);
+                    if (good.length === 0) {
+                        alert(`No ${label} cycles readable for ${runId}.`);
+                        return;
+                    }
+                    csv = cyclesToCsv(good);
+                }
+            } else {
+                const resp: any = await invoke(topic as any, MessageType.Request, {
+                    project_id: projectId, method_id: rowMethodId,
+                    run_id: runId, name: 'trace',
+                } as any);
+                if (!resp?.success || !resp.data) {
+                    console.warn(`${topic} returned no data for`, runId, resp?.error_message);
+                    alert(`No ${label} available for ${runId}` +
+                          (resp?.error_message ? `: ${resp.error_message}` : ''));
+                    return;
+                }
+                csv = rawBlobToCsv(resp.data);
             }
 
-            const csv = rawBlobToCsv(resp.data);
             if (!csv) {
                 alert(`${label} for ${runId} is empty or has no array columns.`);
                 return;
             }
-            downloadCsv(`${projectId}_${rowMethodId}_${runId}_${suffix}.csv`, csv);
+            // sample_id is required for every run, so it always belongs in
+            // the filename. Sanitize to match the on-disk filename rules
+            // applied server-side in tis_servelet::sanitize_for_filename.
+            const sampleId = sanitizeForFilename(sampleIdOf(rowData));
+            const sampleSeg = sampleId ? `${sampleId}_` : '';
+            downloadCsv(`${projectId}_${rowMethodId}_${sampleSeg}${runId}_${suffix}.csv`, csv);
         } catch (err) {
             console.error(`Failed to download ${label}`, err);
             alert(`Download failed: ${err instanceof Error ? err.message : String(err)}`);
@@ -179,6 +286,12 @@ export const ResultHistoryTable: React.FC<ResultHistoryTableProps> = (props) =>
         return '';
     };
 
+    // Mirrors tis_servelet::sanitize_for_filename on the server. Keeping
+    // the rules aligned means the SampleID segment in download names
+    // matches the on-disk raw_data/<sample_id>_<name>.json file.
+    const sanitizeForFilename = (s: string): string =>
+        s.replace(/[\/\\:*?"<>|\0\x00-\x1f]/g, '_');
+
     return (
         // Outer wrapper pins the whole component to its container's width.
         // `overflow: hidden` keeps a wide row from pushing the table past the

package/src/components/tis/TestDataView.tsx

@@ -109,7 +109,12 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
 
     // 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 while the dialog is closed.
+    // different run / cycle while the dialog is closed.
+    //
+    // Wire format (post per-cycle change) is an envelope:
+    //   { cycle_index, cycle_fields, context, data: { col: number[] } }
+    // The legacy flat `{ col: number[] }` shape is still tolerated for
+    // runs written before the change — see unwrapEnvelope() below.
     const [rawBlob, setRawBlob]           = useState<any | null>(null);
     const [rawError, setRawError]         = useState<string | null>(null);
     const [rawLoading, setRawLoading]     = useState(false);
@@ -117,6 +122,12 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
     const [filteredError, setFilteredError] = useState<string | null>(null);
     const [filteredLoading, setFilteredLoading] = useState(false);
 
+    // Per-test cycle listing for the raw dialog's cycle picker. Loaded
+    // once when the dialog opens. selectedCycle is null until the list
+    // arrives; we default it to the latest cycle.
+    const [availableCycles, setAvailableCycles] = useState<number[]>([]);
+    const [selectedCycle, setSelectedCycle]     = useState<number | null>(null);
+
     // Scatter-capable views only — raw_trace lives in <TestRawDataView>.
     const scatterViews = useMemo(() => {
         const out: { name: string; view: ChartView }[] = [];
@@ -295,14 +306,42 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
     // download in <ResultHistoryTable> pulls.
     // -----------------------------------------------------------------
     const blobName = schema?.raw_data?.blob_name ?? 'trace';
-    const fetchKeyRef = useRef<string>(''); // last (project, method, run, blob) we fetched
+    const fetchKeyRef = useRef<string>(''); // last (project, method, run, blob, cycle) we fetched
+
+    // Discover which cycles have raw_data on disk so we can present a
+    // picker. tis.list_raw returns the flat name list (back-compat) AND
+    // a per-cycle list; we want the cycles for the selected blob name.
+    const loadCycleList = useCallback(async (): Promise<number[]> => {
+        if (!projectId || !methodId || !runId) return [];
+        try {
+            const resp: any = await invoke(
+                'tis.list_raw' as any, MessageType.Request,
+                { project_id: projectId, method_id: methodId, run_id: runId } as any,
+            );
+            if (!resp?.success) return [];
+            const cycles: any[] = resp.data?.cycles ?? [];
+            const indices = cycles
+                .filter(c => c?.name === blobName && typeof c?.cycle_index === 'number')
+                .map(c => c.cycle_index as number)
+                .sort((a, b) => a - b);
+            return indices;
+        } catch {
+            return [];
+        }
+    }, [projectId, methodId, runId, blobName, invoke]);
 
-    const loadBlobs = useCallback(async () => {
+    const loadBlobs = useCallback(async (cycleIndex: number | null) => {
         if (!projectId || !methodId || !runId) return;
-        const key = `${projectId}|${methodId}|${runId}|${blobName}`;
-        if (fetchKeyRef.current === key) return; // already loaded for this run
+        const key = `${projectId}|${methodId}|${runId}|${blobName}|${cycleIndex ?? 'latest'}`;
+        if (fetchKeyRef.current === key) return; // already loaded for this slice
         fetchKeyRef.current = key;
 
+        const baseArgs: Record<string, any> = {
+            project_id: projectId, method_id: methodId,
+            run_id: runId, name: blobName,
+        };
+        if (cycleIndex != null) baseArgs.cycle_index = cycleIndex;
+
         // Raw — must succeed for the dialog to be useful, but a
         // missing file is logged and surfaced rather than aborted.
         setRawLoading(true);
@@ -310,8 +349,7 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
         setRawBlob(null);
         try {
             const resp: any = await invoke(
-                'tis.read_raw' as any, MessageType.Request,
-                { project_id: projectId, method_id: methodId, run_id: runId, name: blobName } as any,
+                'tis.read_raw' as any, MessageType.Request, baseArgs as any,
             );
             if (resp?.success) {
                 setRawBlob(resp.data ?? {});
@@ -327,6 +365,8 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
         // Filtered is optional. The 'no filtered data' case is the
         // common one (only the post-processing pipeline writes it),
         // and we render a friendly message rather than an error tone.
+        // Filtered files are not per-cycle (yet); cycle_index is
+        // ignored on the filtered side.
         setFilteredLoading(true);
         setFilteredError(null);
         setFilteredBlob(null);
@@ -347,18 +387,34 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
         }
     }, [projectId, methodId, runId, blobName, invoke]);
 
-    // When the run changes, drop the cache key so the next dialog
-    // open refetches. Don't auto-fetch — that's wasteful if the
-    // operator never opens the dialog.
+    // When the run / blob changes, reset cycle picker and cache key.
     useEffect(() => {
         fetchKeyRef.current = '';
+        setAvailableCycles([]);
+        setSelectedCycle(null);
     }, [projectId, methodId, runId, blobName]);
 
-    const openRawDialog = () => {
+    const openRawDialog = async () => {
         setRawOpen(true);
-        void loadBlobs();
+        // Resolve cycle list lazily — first open after a run change.
+        let cycles = availableCycles;
+        if (cycles.length === 0) {
+            cycles = await loadCycleList();
+            setAvailableCycles(cycles);
+        }
+        const latest = cycles.length > 0 ? cycles[cycles.length - 1] : null;
+        const initial = selectedCycle ?? latest;
+        if (selectedCycle !== initial) setSelectedCycle(initial);
+        await loadBlobs(initial);
     };
 
+    // Re-fetch when the operator picks a different cycle from the dialog.
+    useEffect(() => {
+        if (rawOpen && selectedCycle != null) {
+            void loadBlobs(selectedCycle);
+        }
+    }, [rawOpen, selectedCycle, loadBlobs]);
+
     // -----------------------------------------------------------------
     // Render
     // -----------------------------------------------------------------
@@ -436,10 +492,16 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
                     style={{ width: '90vw', height: '80vh' }}
                     maximizable
                 >
+                    <CyclePickerBar
+                        cycles={availableCycles}
+                        selected={selectedCycle}
+                        onChange={setSelectedCycle}
+                    />
+                    <RawEnvelopeHeader envelope={rawBlob} />
                     <TabView style={{ height: '100%' }}>
                         <TabPanel header="Raw Data">
                             <DataBlobTable
-                                blob={rawBlob}
+                                blob={unwrapEnvelope(rawBlob)}
                                 loading={rawLoading}
                                 error={rawError}
                                 rawData={schema.raw_data}
@@ -447,7 +509,7 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
                         </TabPanel>
                         <TabPanel header="Filtered Data">
                             <DataBlobTable
-                                blob={filteredBlob}
+                                blob={unwrapEnvelope(filteredBlob)}
                                 loading={filteredLoading}
                                 error={filteredError}
                                 rawData={schema.raw_data}
@@ -567,6 +629,90 @@ const ConfigList: React.FC<{ config: any }> = ({ config }) => {
     );
 };
 
+// -------------------------------------------------------------------------
+// unwrapEnvelope — `tis.read_raw` returns one of:
+//   - the per-cycle envelope `{ cycle_index, cycle_fields, context, data }`
+//   - the legacy flat columnar blob `{ col: number[] }` (pre per-cycle)
+// Downstream consumers (DataBlobTable, chart datasets, CSV) only care
+// about the columnar payload — peel off the envelope when present so
+// both shapes render identically.
+// -------------------------------------------------------------------------
+const unwrapEnvelope = (blob: any): any => {
+    if (!blob || typeof blob !== 'object') return blob;
+    if ('data' in blob && blob.data && typeof blob.data === 'object'
+        && Object.values(blob.data).some(v => Array.isArray(v))) {
+        return blob.data;
+    }
+    return blob;
+};
+
+// -------------------------------------------------------------------------
+// CyclePickerBar — dropdown of available cycle indices for the raw_data
+// dialog. Hidden when only one (or zero) cycles exist; rendered as a
+// labelled selector otherwise.
+// -------------------------------------------------------------------------
+const CyclePickerBar: React.FC<{
+    cycles: number[];
+    selected: number | null;
+    onChange: (idx: number) => void;
+}> = ({ cycles, selected, onChange }) => {
+    if (cycles.length <= 1) return null;
+    return (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem',
+                      padding: '0.25rem 0.5rem 0.5rem' }}>
+            <label htmlFor="raw-cycle-picker"
+                   style={{ color: 'var(--text-secondary-color)' }}>Cycle:</label>
+            <Dropdown
+                inputId="raw-cycle-picker"
+                value={selected}
+                options={cycles.map(c => ({ label: `Cycle ${c}`, value: c }))}
+                onChange={(e) => onChange(Number(e.value))}
+                style={{ minWidth: '8rem' }}
+            />
+            <span style={{ color: 'var(--text-secondary-color)' }}>
+                ({cycles.length} cycles recorded)
+            </span>
+        </div>
+    );
+};
+
+// -------------------------------------------------------------------------
+// RawEnvelopeHeader — small key/value strip showing the metadata embedded
+// in the on-disk envelope (cycle_index, schema-declared cycle_fields,
+// capture context). Renders nothing for legacy flat blobs.
+// -------------------------------------------------------------------------
+const RawEnvelopeHeader: React.FC<{ envelope: any }> = ({ envelope }) => {
+    if (!envelope || typeof envelope !== 'object') return null;
+    const cycleIndex = envelope.cycle_index;
+    const cycleFields = envelope.cycle_fields;
+    const context = envelope.context;
+    if (cycleIndex == null && !cycleFields && !context) return null;
+
+    const renderKV = (obj: any) => {
+        if (!obj || typeof obj !== 'object') return null;
+        const entries = Object.entries(obj).filter(([, v]) =>
+            v !== null && typeof v !== 'object');
+        if (entries.length === 0) return null;
+        return entries.map(([k, v]) => (
+            <span key={k} style={{ marginRight: '1rem' }}>
+                <span style={{ color: 'var(--text-secondary-color)' }}>{k}: </span>
+                <span>{String(v)}</span>
+            </span>
+        ));
+    };
+
+    return (
+        <div style={{ padding: '0.5rem', borderBottom: '1px solid var(--surface-border)',
+                      fontSize: '0.9rem' }}>
+            {cycleIndex != null && (
+                <div><strong>Cycle {cycleIndex}</strong></div>
+            )}
+            {cycleFields && <div style={{ marginTop: '0.25rem' }}>{renderKV(cycleFields)}</div>}
+            {context && <div style={{ marginTop: '0.25rem' }}>{renderKV(context)}</div>}
+        </div>
+    );
+};
+
 // -------------------------------------------------------------------------
 // DataBlobTable — tabular display of a columnar JSON blob
 // (`{ col_name: number[] }`). Used by the View Raw Data dialog for both