@adcops/autocore-react 3.3.32 → 3.3.34

package/dist/components/TestDataView.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+export interface TestFieldDef {
+    name: string;
+    type: string;
+    units?: string;
+    required?: boolean;
+    source?: string;
+}
+export interface ChartAxis {
+    field?: string;
+    column?: string;
+    label?: string;
+}
+export interface ChartSeries {
+    field?: string;
+    column?: string;
+    label?: string;
+    y_axis?: 'left' | 'right';
+}
+export interface ChartView {
+    title?: string;
+    type: 'cycle_scatter' | 'raw_trace';
+    x: ChartAxis;
+    y: ChartSeries[];
+}
+export interface RawDataShape {
+    blob_name: string;
+    columns: string[];
+    units?: {
+        [col: string]: string;
+    };
+}
+export interface TestDefinition {
+    project_fields: TestFieldDef[];
+    config_fields: TestFieldDef[];
+    cycle_fields: TestFieldDef[];
+    results_fields: TestFieldDef[];
+    raw_data?: RawDataShape | null;
+    views?: {
+        [name: string]: ChartView;
+    };
+}
+export interface TestDataViewProps {
+    projectId: string;
+    definitionId: string;
+    runId: string;
+    schema: TestDefinition;
+    /** Minimum ms between display updates when broadcasts arrive. Default 100. */
+    throttleMs?: number;
+    /** Fixed cycle-table scroll height. Default "400px". */
+    cycleTableHeight?: string;
+}
+export declare const TestDataView: React.FC<TestDataViewProps>;
+//# sourceMappingURL=TestDataView.d.ts.map

package/dist/components/TestDataView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TestDataView.d.ts","sourceRoot":"","sources":["../../src/components/TestDataView.tsx"],"names":[],"mappings":"AAUA,OAAO,KAA2D,MAAM,OAAO,CAAC;AA4BhF,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,SAAS;IAAI,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CAAE;AAChF,MAAM,WAAW,WAAW;IAAG,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAAE;AAC5G,MAAM,WAAW,SAAS;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,eAAe,GAAG,WAAW,CAAC;IACpC,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,WAAW,EAAE,CAAC;CACpB;AACD,MAAM,WAAW,YAAY;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACrC;AACD,MAAM,WAAW,cAAc;IAC3B,cAAc,EAAG,YAAY,EAAE,CAAC;IAChC,aAAa,EAAI,YAAY,EAAE,CAAC;IAChC,YAAY,EAAK,YAAY,EAAE,CAAC;IAChC,cAAc,EAAG,YAAY,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAQ,YAAY,GAAG,IAAI,CAAC;IACrC,KAAK,CAAC,EAAW;QAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAC;CAClD;AAED,MAAM,WAAW,iBAAiB;IAC9B,SAAS,EAAK,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAS,MAAM,CAAC;IACrB,MAAM,EAAQ,cAAc,CAAC;IAC7B,8EAA8E;IAC9E,UAAU,CAAC,EAAG,MAAM,CAAC;IACrB,wDAAwD;IACxD,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkOpD,CAAC"}

package/dist/components/TestDataView.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import React,{useContext,useEffect,useMemo,useRef,useState}from"react";import{Button}from"primereact/button";import{Column}from"primereact/column";import{DataTable}from"primereact/datatable";import{Dialog}from"primereact/dialog";import{Dropdown}from"primereact/dropdown";import{Chart as ChartJS,CategoryScale,LinearScale,PointElement,LineElement,Title,Tooltip,Legend}from"chart.js";import zoomPlugin from"chartjs-plugin-zoom";import{Line}from"react-chartjs-2";import{EventEmitterContext}from"../core/EventEmitterContext";import{MessageType}from"../hub/CommandMessage";import{TestRawDataView}from"./TestRawDataView";ChartJS.register(CategoryScale,LinearScale,PointElement,LineElement,Title,Tooltip,Legend,zoomPlugin);export const TestDataView=({projectId:e,definitionId:t,runId:i,schema:r,throttleMs:a=100,cycleTableHeight:s="400px"})=>{const{invoke:l,subscribe:n,unsubscribe:o}=useContext(EventEmitterContext),[c,d]=useState(null),[m,u]=useState([]),[p,f]=useState({}),[x,h]=useState(!1),g=useMemo(()=>{const e=[];for(const[t,i]of Object.entries(r.views??{}))"cycle_scatter"===i.type&&e.push({name:t,view:i});return e},[r]),[y,_]=useState(g.length>0?g[0].name:null),j=useRef([]),v=useRef(null),b=useRef(null),w=()=>{b.current||(b.current=setTimeout(()=>{if(b.current=null,j.current.length>0){const e=j.current;j.current=[],u(t=>[...e.slice().reverse(),...t])}v.current&&(f(v.current),v.current=null)},a))};useEffect(()=>{let r=!1;return(async()=>{try{const a=await l("results.read_test",MessageType.Request,{project_id:e,definition_id:t,run_id:i});!r&&a?.success&&(d(a.data),f(a.data.results??{}));const s=await l("results.read_cycles",MessageType.Request,{project_id:e,definition_id:t,run_id:i,offset:0,limit:200,order:"desc"});!r&&s?.success&&u(s.data.cycles??[])}catch(e){}})(),()=>{r=!0}},[e,t,i,l]),useEffect(()=>{const r=r=>r?.project_id===e&&r?.definition_id===t&&r?.run_id===i,a=n("results.cycle_added",e=>{r(e)&&e.cycle&&(j.current.push(e.cycle),w())}),s=n("results.results_updated",e=>{r(e)&&(v.current=e.results??{},w())});return()=>{o(a),o(s),b.current&&(clearTimeout(b.current),b.current=null)}},[e,t,i,a]);const C=useMemo(()=>{if(!y||0===g.length)return null;const e=g.find(e=>e.name===y)?.view;if(!e)return null;const t=e.x.field,i=[...m].reverse();return{labels:i.map(e=>e[t]),datasets:e.y.map((e,t)=>({label:e.label??e.field,data:i.map(t=>t[e.field]),yAxisID:"right"===e.y_axis?"y1":"y",borderColor:palette(t),backgroundColor:palette(t),tension:.1,pointRadius:2}))}},[m,y,g]),R=g.find(e=>e.name===y)?.view,S=R?.y.some(e=>"right"===e.y_axis)??!1,T=useMemo(()=>({responsive:!0,maintainAspectRatio:!1,scales:{x:{title:{display:!!R?.x.label,text:R?.x.label}},y:{position:"left",title:{display:!0,text:leftAxisLabel(R)}},...S?{y1:{position:"right",grid:{drawOnChartArea:!1},title:{display:!0,text:rightAxisLabel(R)}}}:{}},plugins:{legend:{display:!0},zoom:{pan:{enabled:!0,mode:"xy"},zoom:{wheel:{enabled:!0},pinch:{enabled:!0},mode:"xy"}}}}),[R,S]);return _jsxs("div",{className:"vblock",style:{display:"flex",flexDirection:"column",gap:"1rem"},children:[_jsx(Header,{meta:c,config:c?.config,runId:i,projectId:e,definitionId:t,canViewRaw:!!r.raw_data,onViewRaw:()=>h(!0)}),g.length>0&&_jsxs("div",{className:"p-card",style:{padding:"1rem"},children:[_jsxs("div",{className:"flex",style:{gap:"1rem",alignItems:"center",marginBottom:"0.5rem"},children:[_jsx(Dropdown,{value:y,options:g.map(e=>({label:e.view.title??e.name,value:e.name})),onChange:e=>_(e.value),placeholder:"Select a view"}),_jsx("h3",{style:{margin:0},children:R?.title??""})]}),_jsx("div",{style:{height:320},children:C&&_jsx(Line,{data:C,options:T})})]}),_jsxs("div",{className:"p-card",style:{padding:"1rem"},children:[_jsxs("h3",{style:{marginTop:0},children:["Cycle Data (",m.length,")"]}),_jsx(DataTable,{value:m,scrollable:!0,scrollHeight:s,virtualScrollerOptions:{itemSize:38},emptyMessage:"No cycles yet.",children:r.cycle_fields.map(e=>_jsx(Column,{field:e.name,header:e.units?`${e.name} (${e.units})`:e.name,body:t=>formatCell(t[e.name],e.type)},e.name))})]}),_jsxs("div",{className:"p-card",style:{padding:"1rem"},children:[_jsx("h3",{style:{marginTop:0},children:"Results"}),_jsx(ResultsGrid,{schema:r.results_fields,values:p})]}),r.raw_data&&_jsx(Dialog,{visible:x,onHide:()=>h(!1),header:"Raw Data",style:{width:"90vw",height:"80vh"},maximizable:!0,children:_jsx(TestRawDataView,{projectId:e,definitionId:t,runId:i,schema:r})})]})};const Header=({meta:e,config:t,runId:i,projectId:r,definitionId:a,canViewRaw:s,onViewRaw:l})=>_jsxs("div",{className:"p-card",style:{padding:"1rem"},children:[_jsxs("div",{className:"flex",style:{justifyContent:"space-between",alignItems:"flex-start",gap:"1rem"},children:[_jsxs("div",{children:[_jsxs("h2",{style:{margin:0},children:[a," — ",i]}),_jsxs("div",{style:{color:"var(--text-secondary-color)",fontSize:"0.85em"},children:["project: ",r,e?.start_time&&_jsxs(_Fragment,{children:[" · started: ",new Date(e.start_time).toLocaleString()]})]})]}),s&&_jsx(Button,{icon:"pi pi-chart-line",label:"View Raw Data",onClick:l,outlined:!0})]}),t&&Object.keys(t).length>0&&_jsx("div",{style:{marginTop:"0.75rem",display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(220px, 1fr))",gap:"0.25rem 1rem",fontSize:"0.9em"},children:Object.entries(t).map(([e,t])=>_jsxs("div",{children:[_jsxs("strong",{children:[e,":"]})," ",formatCell(t,"string")]},e))})]}),ResultsGrid=({schema:e,values:t})=>t&&0!==Object.keys(t).length?_jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(220px, 1fr))",gap:"0.5rem 1rem"},children:e.map(e=>_jsxs("div",{children:[_jsxs("div",{style:{fontSize:"0.8em",color:"var(--text-secondary-color)"},children:[e.name,e.units?` (${e.units})`:""]}),_jsx("div",{children:formatCell(t[e.name],e.type)})]},e.name))}):_jsx("div",{style:{color:"var(--text-secondary-color)"},children:"No results yet."}),CHART_COLORS=["#4ea8de","#f59e0b","#22c55e","#a855f7","#ef4444","#14b8a6","#eab308","#ec4899"],palette=e=>CHART_COLORS[e%CHART_COLORS.length],leftAxisLabel=e=>e?.y.filter(e=>"right"!==e.y_axis).map(e=>e.label??e.field).join(" / ")??"",rightAxisLabel=e=>e?.y.filter(e=>"right"===e.y_axis).map(e=>e.label??e.field).join(" / ")??"",formatCell=(e,t)=>null==e?"":"f32"===t||"f64"===t?"number"==typeof e?e.toFixed(4):String(e):"object"==typeof e?JSON.stringify(e):String(e);

package/dist/components/TestRawDataView.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { TestDefinition } from './TestDataView';
+export interface TestRawDataViewProps {
+    projectId: string;
+    definitionId: string;
+    runId: string;
+    schema: TestDefinition;
+    /** Override the blob name (default: schema.raw_data.blob_name). */
+    blobName?: string;
+    /** Fixed chart height. Default "60vh". */
+    chartHeight?: string;
+}
+export declare const TestRawDataView: React.FC<TestRawDataViewProps>;
+//# sourceMappingURL=TestRawDataView.d.ts.map

package/dist/components/TestRawDataView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TestRawDataView.d.ts","sourceRoot":"","sources":["../../src/components/TestRawDataView.tsx"],"names":[],"mappings":"AAYA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAahF,OAAO,KAAK,EAAa,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAOhE,MAAM,WAAW,oBAAoB;IACjC,SAAS,EAAK,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAS,MAAM,CAAC;IACrB,MAAM,EAAQ,cAAc,CAAC;IAC7B,mEAAmE;IACnE,QAAQ,CAAC,EAAK,MAAM,CAAC;IACrB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2I1D,CAAC"}

package/dist/components/TestRawDataView.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import React,{useContext,useEffect,useMemo,useRef,useState}from"react";import{Button}from"primereact/button";import{Dropdown}from"primereact/dropdown";import{Chart as ChartJS,CategoryScale,LinearScale,PointElement,LineElement,Title,Tooltip,Legend}from"chart.js";import zoomPlugin from"chartjs-plugin-zoom";import{Line}from"react-chartjs-2";import{EventEmitterContext}from"../core/EventEmitterContext";import{MessageType}from"../hub/CommandMessage";ChartJS.register(CategoryScale,LinearScale,PointElement,LineElement,Title,Tooltip,Legend,zoomPlugin);export const TestRawDataView=({projectId:e,definitionId:t,runId:a,schema:i,blobName:n,chartHeight:r="60vh"})=>{const{invoke:o}=useContext(EventEmitterContext),[s,l]=useState(null),[m,d]=useState(!0),[c,p]=useState(null),u=useRef(null),x=useMemo(()=>{const e=[];for(const[t,a]of Object.entries(i.views??{}))"raw_trace"===a.type&&e.push({name:t,view:a});return e},[i]),[h,y]=useState(x.length>0?x[0].name:null),f=n??i.raw_data?.blob_name??"trace";useEffect(()=>{let i=!1;return d(!0),p(null),(async()=>{try{const n=await o("results.read_raw",MessageType.Request,{project_id:e,definition_id:t,run_id:a,name:f});if(i)return;n?.success?l(n.data??{}):p(n?.error_message??"Failed to read raw data")}catch(e){i||p(String(e?.message??e))}finally{i||d(!1)}})(),()=>{i=!0}},[e,t,a,f,o]);const g=useMemo(()=>{if(!s||!h)return null;const e=x.find(e=>e.name===h)?.view;if(!e)return null;const t=e.x.column,a=s[t]??[];return{datasets:e.y.map((e,t)=>({label:e.label??e.column,data:(s[e.column]??[]).map((e,t)=>({x:a[t],y:e})),yAxisID:"right"===e.y_axis?"y1":"y",borderColor:palette(t),backgroundColor:palette(t),pointRadius:0,borderWidth:1.5,showLine:!0}))}},[s,h,x]),_=x.find(e=>e.name===h)?.view,v=_?.y.some(e=>"right"===e.y_axis)??!1,b=useMemo(()=>({responsive:!0,maintainAspectRatio:!1,parsing:!1,scales:{x:{type:"linear",title:{display:!!_?.x.label,text:_?.x.label}},y:{position:"left",title:{display:!0,text:axisLabel(_,"left")}},...v?{y1:{position:"right",grid:{drawOnChartArea:!1},title:{display:!0,text:axisLabel(_,"right")}}}:{}},plugins:{legend:{display:!0},zoom:{pan:{enabled:!0,mode:"xy"},zoom:{wheel:{enabled:!0},pinch:{enabled:!0},drag:{enabled:!0,modifierKey:"shift"},mode:"xy"}}}}),[_,v]);return i.raw_data?0===x.length?_jsx(EmptyState,{message:"No raw_trace views declared. Add one to schema.views in project.json."}):_jsxs("div",{className:"vblock",style:{display:"flex",flexDirection:"column",gap:"1rem",height:"100%"},children:[_jsxs("div",{className:"flex",style:{gap:"1rem",alignItems:"center"},children:[_jsx(Dropdown,{value:h,options:x.map(e=>({label:e.view.title??e.name,value:e.name})),onChange:e=>y(e.value),placeholder:"Select a view"}),_jsx("h3",{style:{margin:0},children:_?.title??""}),_jsx("div",{style:{flex:1}}),_jsx(Button,{icon:"pi pi-refresh",label:"Reset Zoom",outlined:!0,onClick:()=>u.current?.resetZoom?.()})]}),_jsxs("div",{style:{flex:1,minHeight:0,height:r,position:"relative"},children:[m&&_jsx(Overlay,{children:"Loading raw data…"}),c&&_jsx(Overlay,{children:c}),g&&!m&&!c&&_jsx(Line,{ref:u,data:g,options:b})]})]}):_jsx(EmptyState,{message:"No raw_data is declared for this test definition."})};const Overlay=({children:e})=>_jsx("div",{style:{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"center",color:"var(--text-secondary-color)",pointerEvents:"none"},children:e}),EmptyState=({message:e})=>_jsx("div",{style:{padding:"1rem",color:"var(--text-secondary-color)"},children:e}),CHART_COLORS=["#4ea8de","#f59e0b","#22c55e","#a855f7","#ef4444","#14b8a6","#eab308","#ec4899"],palette=e=>CHART_COLORS[e%CHART_COLORS.length],axisLabel=(e,t)=>e?.y.filter(e=>(e.y_axis??"left")===t).map(e=>e.label??e.column).join(" / ")??"";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adcops/autocore-react",
-    "version": "3.3.32",
+    "version": "3.3.34",
     "description": "A React component library for industrial user interfaces.",
     "private": false,
     "type": "module",
@@ -52,9 +52,12 @@
     "dependencies": {
         "@monaco-editor/react": "^4.7.0",
         "@tauri-apps/api": "^2.9.1",
+        "chart.js": "^4.5.1",
+        "chartjs-plugin-zoom": "^2.2.0",
         "clsx": "^2.1.1",
         "numerable": "^0.3.15",
         "react-blockly": "^8.1.2",
+        "react-chartjs-2": "^5.3.0",
         "react-simple-keyboard": "^3.8.120",
         "react-transition-group": "^4.4.5",
         "sass": "^1.92.1",

package/src/components/TestDataView.tsx

@@ -0,0 +1,380 @@
+/*
+ * Copyright (C) 2026 Automated Design Corp. All Rights Reserved.
+ *
+ * TestDataView — standardized test-detail view for the Results System.
+ * Renders metadata header + cycle-scatter chart + virtual-scroll cycle
+ * table + results table, and subscribes to live `results.cycle_added` /
+ * `results.results_updated` broadcasts so the display updates as the
+ * control program appends cycles.
+ */
+
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Button } from 'primereact/button';
+import { Column } from 'primereact/column';
+import { DataTable } from 'primereact/datatable';
+import { Dialog } from 'primereact/dialog';
+import { Dropdown } from 'primereact/dropdown';
+
+import { Chart as ChartJS,
+    CategoryScale, LinearScale, PointElement, LineElement,
+    Title, Tooltip, Legend,
+} from 'chart.js';
+import zoomPlugin from 'chartjs-plugin-zoom';
+import { Line } from 'react-chartjs-2';
+
+import { EventEmitterContext } from '../core/EventEmitterContext';
+import { MessageType } from '../hub/CommandMessage';
+import { TestRawDataView } from './TestRawDataView';
+
+ChartJS.register(
+    CategoryScale, LinearScale, PointElement, LineElement,
+    Title, Tooltip, Legend, zoomPlugin,
+);
+
+// -------------------------------------------------------------------------
+// Types (mirror codegen/codegen_results.rs — kept local so the component
+// works without a hard dependency on any specific generated results.ts)
+// -------------------------------------------------------------------------
+
+export interface TestFieldDef {
+    name: string;
+    type: string;
+    units?: string;
+    required?: boolean;
+    source?: string;
+}
+
+export interface ChartAxis  { field?: string; column?: string; label?: string; }
+export interface ChartSeries { field?: string; column?: string; label?: string; y_axis?: 'left' | 'right'; }
+export interface ChartView  {
+    title?: string;
+    type: 'cycle_scatter' | 'raw_trace';
+    x: ChartAxis;
+    y: ChartSeries[];
+}
+export interface RawDataShape {
+    blob_name: string;
+    columns: string[];
+    units?: { [col: string]: string };
+}
+export interface TestDefinition {
+    project_fields:  TestFieldDef[];
+    config_fields:   TestFieldDef[];
+    cycle_fields:    TestFieldDef[];
+    results_fields:  TestFieldDef[];
+    raw_data?:       RawDataShape | null;
+    views?:          { [name: string]: ChartView };
+}
+
+export interface TestDataViewProps {
+    projectId:    string;
+    definitionId: string;
+    runId:        string;
+    schema:       TestDefinition;
+    /** Minimum ms between display updates when broadcasts arrive. Default 100. */
+    throttleMs?:  number;
+    /** Fixed cycle-table scroll height. Default "400px". */
+    cycleTableHeight?: string;
+}
+
+// -------------------------------------------------------------------------
+
+export const TestDataView: React.FC<TestDataViewProps> = ({
+    projectId, definitionId, runId, schema,
+    throttleMs = 100,
+    cycleTableHeight = '400px',
+}) => {
+    const { invoke, subscribe, unsubscribe } = useContext(EventEmitterContext);
+
+    const [meta, setMeta]       = useState<any>(null);
+    const [cycles, setCycles]   = useState<any[]>([]);
+    const [results, setResults] = useState<any>({});
+    const [rawOpen, setRawOpen] = useState(false);
+
+    // Scatter-capable views only — raw_trace lives in <TestRawDataView>.
+    const scatterViews = useMemo(() => {
+        const out: { name: string; view: ChartView }[] = [];
+        for (const [name, v] of Object.entries(schema.views ?? {})) {
+            if (v.type === 'cycle_scatter') out.push({ name, view: v });
+        }
+        return out;
+    }, [schema]);
+
+    const [selectedView, setSelectedView] = useState<string | null>(
+        scatterViews.length > 0 ? scatterViews[0].name : null,
+    );
+
+    // Pending updates coalesced by a throttle window — keeps React
+    // re-renders at <= 1 / throttleMs even if cycles stream faster.
+    const pendingCycles = useRef<any[]>([]);
+    const pendingResults = useRef<any | null>(null);
+    const flushTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    const scheduleFlush = () => {
+        if (flushTimer.current) return;
+        flushTimer.current = setTimeout(() => {
+            flushTimer.current = null;
+            if (pendingCycles.current.length > 0) {
+                const batch = pendingCycles.current;
+                pendingCycles.current = [];
+                setCycles(prev => [...batch.slice().reverse(), ...prev]);  // newest-first
+            }
+            if (pendingResults.current) {
+                setResults(pendingResults.current);
+                pendingResults.current = null;
+            }
+        }, throttleMs);
+    };
+
+    // -----------------------------------------------------------------
+    // Initial load
+    // -----------------------------------------------------------------
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const testResp: any = await invoke(
+                    'results.read_test' as any, MessageType.Request as any,
+                    { project_id: projectId, definition_id: definitionId, run_id: runId } as any);
+                if (!cancelled && testResp?.success) {
+                    setMeta(testResp.data);
+                    setResults(testResp.data.results ?? {});
+                }
+                const cyResp: any = await invoke(
+                    'results.read_cycles' as any, MessageType.Request as any,
+                    { project_id: projectId, definition_id: definitionId, run_id: runId,
+                      offset: 0, limit: 200, order: 'desc' } as any);
+                if (!cancelled && cyResp?.success) {
+                    setCycles(cyResp.data.cycles ?? []);
+                }
+            } catch (e) {
+                console.error('[TestDataView] initial load failed', e);
+            }
+        })();
+        return () => { cancelled = true; };
+    }, [projectId, definitionId, runId, invoke]);
+
+    // -----------------------------------------------------------------
+    // Live broadcasts
+    // -----------------------------------------------------------------
+    useEffect(() => {
+        const matches = (payload: any) =>
+            payload?.project_id === projectId
+            && payload?.definition_id === definitionId
+            && payload?.run_id === runId;
+
+        const onCycle = (payload: any) => {
+            if (!matches(payload) || !payload.cycle) return;
+            pendingCycles.current.push(payload.cycle);
+            scheduleFlush();
+        };
+        const onResults = (payload: any) => {
+            if (!matches(payload)) return;
+            pendingResults.current = payload.results ?? {};
+            scheduleFlush();
+        };
+
+        const id1 = subscribe('results.cycle_added',     onCycle);
+        const id2 = subscribe('results.results_updated', onResults);
+        return () => {
+            unsubscribe(id1);
+            unsubscribe(id2);
+            if (flushTimer.current) { clearTimeout(flushTimer.current); flushTimer.current = null; }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [projectId, definitionId, runId, throttleMs]);
+
+    // -----------------------------------------------------------------
+    // Chart data
+    // -----------------------------------------------------------------
+    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;
+    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 },
+                zoom: {
+                    wheel: { enabled: true },
+                    pinch: { enabled: true },
+                    mode:  'xy' as const,
+                },
+            },
+        },
+    }), [selectedViewDef, usesRightAxis]);
+
+    // -----------------------------------------------------------------
+    // Render
+    // -----------------------------------------------------------------
+    return (
+        <div className="vblock" style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+            <Header meta={meta} config={meta?.config} runId={runId}
+                    projectId={projectId} definitionId={definitionId}
+                    canViewRaw={!!schema.raw_data}
+                    onViewRaw={() => setRawOpen(true)} />
+
+            {scatterViews.length > 0 && (
+                <div className="p-card" style={{ padding: '1rem' }}>
+                    <div className="flex" style={{ gap: '1rem', alignItems: 'center', marginBottom: '0.5rem' }}>
+                        <Dropdown
+                            value={selectedView}
+                            options={scatterViews.map(v => ({ label: v.view.title ?? v.name, value: v.name }))}
+                            onChange={(e) => setSelectedView(e.value)}
+                            placeholder="Select a view"
+                        />
+                        <h3 style={{ margin: 0 }}>{selectedViewDef?.title ?? ''}</h3>
+                    </div>
+                    <div style={{ height: 320 }}>
+                        {chartData && <Line 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>
+            </div>
+
+            <div className="p-card" style={{ padding: '1rem' }}>
+                <h3 style={{ marginTop: 0 }}>Results</h3>
+                <ResultsGrid schema={schema.results_fields} values={results} />
+            </div>
+
+            {schema.raw_data && (
+                <Dialog
+                    visible={rawOpen}
+                    onHide={() => setRawOpen(false)}
+                    header="Raw Data"
+                    style={{ width: '90vw', height: '80vh' }}
+                    maximizable
+                >
+                    <TestRawDataView
+                        projectId={projectId}
+                        definitionId={definitionId}
+                        runId={runId}
+                        schema={schema}
+                    />
+                </Dialog>
+            )}
+        </div>
+    );
+};
+
+// -------------------------------------------------------------------------
+// Sub-components and helpers
+// -------------------------------------------------------------------------
+
+const Header: React.FC<{
+    meta: any; config: any; runId: string;
+    projectId: string; definitionId: string;
+    canViewRaw: boolean; onViewRaw: () => void;
+}> = ({ meta, config, runId, projectId, definitionId, canViewRaw, onViewRaw }) => (
+    <div className="p-card" style={{ padding: '1rem' }}>
+        <div className="flex" style={{ justifyContent: 'space-between', alignItems: 'flex-start', gap: '1rem' }}>
+            <div>
+                <h2 style={{ margin: 0 }}>{definitionId} — {runId}</h2>
+                <div style={{ color: 'var(--text-secondary-color)', fontSize: '0.85em' }}>
+                    project: {projectId}
+                    {meta?.start_time && <> · started: {new Date(meta.start_time).toLocaleString()}</>}
+                </div>
+            </div>
+            {canViewRaw && (
+                <Button icon="pi pi-chart-line" label="View Raw Data" onClick={onViewRaw} outlined />
+            )}
+        </div>
+        {config && Object.keys(config).length > 0 && (
+            <div style={{ marginTop: '0.75rem', display: 'grid',
+                          gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))',
+                          gap: '0.25rem 1rem', fontSize: '0.9em' }}>
+                {Object.entries(config).map(([k, v]) => (
+                    <div key={k}><strong>{k}:</strong> {formatCell(v, 'string')}</div>
+                ))}
+            </div>
+        )}
+    </div>
+);
+
+const ResultsGrid: React.FC<{ schema: TestFieldDef[]; values: any }> = ({ schema, values }) => {
+    if (!values || Object.keys(values).length === 0) {
+        return <div style={{ color: 'var(--text-secondary-color)' }}>No results yet.</div>;
+    }
+    return (
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: '0.5rem 1rem' }}>
+            {schema.map(f => (
+                <div key={f.name}>
+                    <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>
+            ))}
+        </div>
+    );
+};
+
+const CHART_COLORS = [
+    '#4ea8de', '#f59e0b', '#22c55e', '#a855f7',
+    '#ef4444', '#14b8a6', '#eab308', '#ec4899',
+];
+const palette = (i: number) => CHART_COLORS[i % CHART_COLORS.length];
+
+const leftAxisLabel = (v?: ChartView) =>
+    v?.y.filter(s => s.y_axis !== 'right').map(s => s.label ?? s.field).join(' / ') ?? '';
+const rightAxisLabel = (v?: ChartView) =>
+    v?.y.filter(s => s.y_axis === 'right').map(s => s.label ?? s.field).join(' / ') ?? '';
+
+const formatCell = (v: any, type: string): string => {
+    if (v === null || v === undefined) return '';
+    if (type === 'f32' || type === 'f64') {
+        return typeof v === 'number' ? v.toFixed(4) : String(v);
+    }
+    if (typeof v === 'object') return JSON.stringify(v);
+    return String(v);
+};

package/src/components/TestRawDataView.tsx

@@ -0,0 +1,208 @@
+/*
+ * Copyright (C) 2026 Automated Design Corp. All Rights Reserved.
+ *
+ * TestRawDataView — raw-trace viewer for the Results System. Lazy-fetches
+ * the columnar `raw_data/<blob>.json` for a single test and renders it
+ * using any `raw_trace`-type view declared in the test schema. Supports
+ * pinch-zoom, wheel-zoom, and drag-pan.
+ *
+ * Can be used either standalone (e.g. a dedicated route) or from the
+ * built-in dialog inside <TestDataView>.
+ */
+
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Button } from 'primereact/button';
+import { Dropdown } from 'primereact/dropdown';
+
+import { Chart as ChartJS,
+    CategoryScale, LinearScale, PointElement, LineElement,
+    Title, Tooltip, Legend,
+} from 'chart.js';
+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, TestDefinition } from './TestDataView';
+
+ChartJS.register(
+    CategoryScale, LinearScale, PointElement, LineElement,
+    Title, Tooltip, Legend, zoomPlugin,
+);
+
+export interface TestRawDataViewProps {
+    projectId:    string;
+    definitionId: string;
+    runId:        string;
+    schema:       TestDefinition;
+    /** Override the blob name (default: schema.raw_data.blob_name). */
+    blobName?:    string;
+    /** Fixed chart height. Default "60vh". */
+    chartHeight?: string;
+}
+
+export const TestRawDataView: React.FC<TestRawDataViewProps> = ({
+    projectId, definitionId, runId, schema,
+    blobName,
+    chartHeight = '60vh',
+}) => {
+    const { invoke } = useContext(EventEmitterContext);
+
+    const [raw, setRaw]         = useState<Record<string, number[]> | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError]     = useState<string | null>(null);
+    const chartRef              = useRef<any>(null);
+
+    // raw_trace-capable views only — cycle scatter lives in <TestDataView>.
+    const traceViews = useMemo(() => {
+        const out: { name: string; view: ChartView }[] = [];
+        for (const [name, v] of Object.entries(schema.views ?? {})) {
+            if (v.type === 'raw_trace') out.push({ name, view: v });
+        }
+        return out;
+    }, [schema]);
+
+    const [selectedView, setSelectedView] = useState<string | null>(
+        traceViews.length > 0 ? traceViews[0].name : null,
+    );
+
+    const effectiveBlobName = blobName ?? schema.raw_data?.blob_name ?? 'trace';
+
+    // Lazy fetch — only runs on mount / when identifiers change.
+    useEffect(() => {
+        let cancelled = false;
+        setLoading(true);
+        setError(null);
+        (async () => {
+            try {
+                const resp: any = await invoke(
+                    'results.read_raw' as any, MessageType.Request as any,
+                    { project_id: projectId, definition_id: definitionId,
+                      run_id: runId, name: effectiveBlobName } as any);
+                if (cancelled) return;
+                if (resp?.success) {
+                    setRaw(resp.data ?? {});
+                } 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, definitionId, runId, effectiveBlobName, invoke]);
+
+    const chartData = useMemo(() => {
+        if (!raw || !selectedView) return null;
+        const view = traceViews.find(v => v.name === selectedView)?.view;
+        if (!view) return null;
+
+        const xCol = view.x.column!;
+        const xs = raw[xCol] ?? [];
+
+        const datasets = view.y.map((s, idx) => ({
+            label: s.label ?? s.column,
+            data: (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 };
+    }, [raw, selectedView, traceViews]);
+
+    const selectedViewDef = traceViews.find(v => v.name === selectedView)?.view;
+    const usesRightAxis = selectedViewDef?.y.some(s => s.y_axis === 'right') ?? false;
+
+    const chartOptions = useMemo(() => ({
+        responsive: true,
+        maintainAspectRatio: false,
+        parsing: false as const,  // raw points are already {x, y}
+        scales: {
+            x: { type: 'linear' as const,
+                 title: { display: !!selectedViewDef?.x.label, text: selectedViewDef?.x.label } },
+            y: { position: 'left' as const,
+                 title: { display: true, text: axisLabel(selectedViewDef, 'left') } },
+            ...(usesRightAxis ? {
+                y1: { position: 'right' as const,
+                      grid: { drawOnChartArea: false },
+                      title: { display: true, text: axisLabel(selectedViewDef, 'right') } },
+            } : {}),
+        },
+        plugins: {
+            legend: { display: true },
+            zoom: {
+                pan:  { enabled: true, mode: 'xy' as const },
+                zoom: {
+                    wheel: { enabled: true },
+                    pinch: { enabled: true },
+                    drag:  { enabled: true, modifierKey: 'shift' as const },
+                    mode:  'xy' as const,
+                },
+            },
+        },
+    }), [selectedViewDef, usesRightAxis]);
+
+    if (!schema.raw_data) {
+        return <EmptyState message="No raw_data is declared for this test definition." />;
+    }
+    if (traceViews.length === 0) {
+        return <EmptyState message="No raw_trace views declared. Add one to schema.views in project.json." />;
+    }
+
+    return (
+        <div className="vblock" style={{ display: 'flex', flexDirection: 'column', gap: '1rem', height: '100%' }}>
+            <div className="flex" style={{ gap: '1rem', alignItems: 'center' }}>
+                <Dropdown
+                    value={selectedView}
+                    options={traceViews.map(v => ({ label: v.view.title ?? v.name, value: v.name }))}
+                    onChange={(e) => setSelectedView(e.value)}
+                    placeholder="Select a view"
+                />
+                <h3 style={{ margin: 0 }}>{selectedViewDef?.title ?? ''}</h3>
+                <div style={{ flex: 1 }} />
+                <Button icon="pi pi-refresh" label="Reset Zoom"
+                        outlined
+                        onClick={() => chartRef.current?.resetZoom?.()} />
+            </div>
+
+            <div style={{ flex: 1, minHeight: 0, height: chartHeight, position: 'relative' }}>
+                {loading && <Overlay>Loading raw data…</Overlay>}
+                {error   && <Overlay>{error}</Overlay>}
+                {chartData && !loading && !error && (
+                    <Line ref={chartRef} data={chartData} options={chartOptions} />
+                )}
+            </div>
+        </div>
+    );
+};
+
+// -------------------------------------------------------------------------
+// helpers
+// -------------------------------------------------------------------------
+
+const Overlay: 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>
+);
+
+const EmptyState: React.FC<{ message: string }> = ({ message }) => (
+    <div style={{ padding: '1rem', color: 'var(--text-secondary-color)' }}>{message}</div>
+);
+
+const CHART_COLORS = [
+    '#4ea8de', '#f59e0b', '#22c55e', '#a855f7',
+    '#ef4444', '#14b8a6', '#eab308', '#ec4899',
+];
+const palette = (i: number) => CHART_COLORS[i % CHART_COLORS.length];
+
+const axisLabel = (v: ChartView | undefined, side: 'left' | 'right') =>
+    v?.y.filter(s => (s.y_axis ?? 'left') === side).map(s => s.label ?? s.column).join(' / ') ?? '';