@adcops/autocore-react 3.3.109 → 3.3.112

package/dist/components/tis/TestSetupForm.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import React,{useState,useEffect,useContext,useMemo}from"react";import{Button}from"primereact/button";import{InputText}from"primereact/inputtext";import{Dropdown}from"primereact/dropdown";import{Dialog}from"primereact/dialog";import{EventEmitterContext}from"../../core/EventEmitterContext";import{AutoCoreTagContext}from"../../core/AutoCoreTagContext";import{MessageType}from"../../hub/CommandMessage";import{ValueInput}from"../ValueInput";import{TextInput}from"../TextInput";import{useTis}from"./TisProvider";import{useAmsAssets,useAmsRoles}from"../ams/AmsProvider";import{TestMethodDialog}from"./TestMethodDialog";import{ConfigurationDialog,configLabelOf}from"./ConfigurationDialog";const labelOf=e=>{const t=e.label&&e.label.length>0?e.label:e.name;return e.units?`${t} [${e.units}]`:t},rawToDisplay=(e,t)=>t&&1!==t&&"number"==typeof e&&Number.isFinite(e)?e*t:e,displayToRaw=(e,t)=>t&&1!==t&&"number"==typeof e&&Number.isFinite(e)?e/t:e,hasDescription=e=>"string"==typeof e.description&&e.description.length>0,DEFAULT_TOKEN_RE=/^\$\{\s*([^}]+?)\s*\}$/,resolveDefaultRaw=(e,t,s)=>{const i=e.default;if("string"==typeof i){const e=i.match(DEFAULT_TOKEN_RE);if(e){const i=t(e[1]),a=i?s[i.tagName]:void 0;return null==a?{raw:void 0,ok:!1}:{raw:a,ok:!0}}}return{raw:displayToRaw(i,e.scale),ok:!0}},rangeIssue=(e,t)=>{if(void 0===t||""===t||null===t)return null;if(null==e.min&&null==e.max)return null;const s=Number(rawToDisplay(Number(t),e.scale));return Number.isFinite(s)?null!=e.min&&s<e.min?`must be ≥ ${e.min}`:null!=e.max&&s>e.max?`must be ≤ ${e.max}`:null:null},normalizeOptions=e=>(e??[]).map(e=>null!==e&&"object"==typeof e?{label:String(e.label??e.value),value:e.value}:{label:String(e),value:e}),methodLabelOf=(e,t)=>t?.label&&t.label.length>0?t.label:e,AssetIdPicker=({assetType:e,value:t,onChange:s,invalid:i})=>{const a=useAmsAssets(),n=useAmsRoles(),o=useMemo(()=>a.filter(t=>t.asset_type===e&&"active"===t.status).map(e=>{const t=n[e.asset_type]?.find(t=>t.location===e.location)?.label,s=[e.asset_id];return t?s.push(`— ${t}`):e.location&&s.push(`— ${e.location}`),e.serial&&s.push(`(s/n ${e.serial})`),{label:s.join(" "),value:e.asset_id}}),[a,n,e]);return _jsx(Dropdown,{value:t,options:o,onChange:e=>s(e.value??""),placeholder:0===o.length?`No active ${e} assets registered — add one in Settings → Assets`:`Select ${e}…`,className:"ac-dropdown-clearable"+(i?" p-invalid":""),filter:!0,showClear:!0,disabled:0===o.length})};export const TestSetupForm=({schema:e,defaultMethodId:t,onMethodChange:s,onValidationChange:i})=>{const a=useTis(),{invoke:n,write:o}=useContext(EventEmitterContext),{rawValues:r,findTagByFqdn:l}=useContext(AutoCoreTagContext),c=useMemo(()=>Object.keys(a.schemas),[a.schemas]),d=a.selection.projectId,m=""!==d.trim()&&a.projectKnown(d.trim()),[u,p]=useState(a.selection.methodId||t||a.defaultMethodId||""),[f,h]=useState(a.selection.sampleId||""),g=a.stagedConfig,x=e=>{const t="function"==typeof e?e(a.stagedConfig):e;t!==a.stagedConfig&&a.setStagedConfig(t)},_=e??(u?a.schemas[u]:void 0),j=(e,t)=>{for(const[s,i]of Object.entries(e.defaults??{})){if("sample_id"===s)continue;const e=_?.config_fields.find(e=>e.name===s),a=displayToRaw(i,e?.scale);t[s]=a,e?.source&&Promise.resolve().then(()=>o(e.source,a)).catch(e=>{})}return t};useEffect(()=>{a.selection.methodId!==u&&u&&a.setSelection({methodId:u}),s&&s(u)},[u]),useEffect(()=>{a.selection.sampleId!==f&&a.setSelection({sampleId:f})},[f]),useEffect(()=>{a.state.stagedSampleId&&a.state.stagedSampleId!==f&&h(a.state.stagedSampleId)},[a.state.stagedSampleId]),useEffect(()=>{a.selection.methodId&&a.selection.methodId!==u&&p(a.selection.methodId)},[a.selection.methodId]);const[b,v]=useState(!1),[y,N]=useState(!1),[C,I]=useState(!1),T=_?.configurations??[],S=T.find(e=>e.name===a.configurationName),[w,k]=useState({open:!1,title:"",body:null});useEffect(()=>{if(!_||!u)return;if(a.defaultsAppliedForMethod===u)return;a.markDefaultsAppliedForMethod(u);const e=_.configurations&&_.configurations.length>0?_.configurations[0]:void 0;x(t=>{let s=t;for(const e of _.config_fields){if("sample_id"===e.name)continue;if(void 0===e.default||null===e.default)continue;if(e.source){const t=l(e.source),s=t?r[t.tagName]:void 0;if(null!=s)continue}const{raw:i,ok:a}=resolveDefaultRaw(e,l,r);a&&(s===t&&(s={...t}),s[e.name]=i,e.source&&Promise.resolve().then(()=>o(e.source,i)).catch(e=>{}))}return e&&(s===t&&(s={...t}),s=j(e,s)),s}),a.setConfigurationName(e?e.name:"")},[_,u,o,r,l,a.defaultsAppliedForMethod,a.markDefaultsAppliedForMethod,a.setConfigurationName]),useEffect(()=>{_&&x(e=>{let t=e;for(const s of _.config_fields){if("sample_id"===s.name)continue;if(!s.source)continue;const i=l(s.source);if(!i)continue;const a=r[i.tagName];null!=a&&(t[s.name]!==a&&(t===e&&(t={...e}),t[s.name]=a))}return t})},[_,r,l]),useEffect(()=>{if(!_)return void v(!1);let e=!0;m||(e=!1),u.trim()||(e=!1),f.trim()||(e=!1),e&&!a.projectFieldsLoaded&&(e=!1);for(const t of _.config_fields){if("sample_id"===t.name)continue;const s=g[t.name],i=void 0===s||""===s||null===s;if(t.required&&i){e=!1;break}if(rangeIssue(t,s)){e=!1;break}}if(v(e),i&&i(e,g),e){const{sample_id:e,...t}=g??{},s={...a.projectFields,...t};n("tis.stage_test",MessageType.Request,{project_id:d,method_id:u,sample_id:f,config:s}).catch(e=>{})}},[g,_,d,u,f,m,a.projectFields,a.projectFieldsLoaded,i,n]);const A=async(e,t)=>{const s=displayToRaw(t,e.scale);if(x({...g,[e.name]:s}),e.source)try{await o(e.source,s)}catch(e){}};if(!_)return _jsx("div",{className:"ac-form-grid",style:{padding:"1.25rem"},children:_jsx("h3",{className:"ac-form-section",children:a.schemasLoaded?"No Test Method Selected":"Loading test methods…"})});if(!m)return _jsxs("div",{style:{padding:"1.25rem",maxWidth:"600px"},children:[_jsx("h3",{className:"ac-form-section",children:"No project selected"}),_jsxs("p",{style:{color:"var(--text-secondary-color)",marginTop:"0.5rem"},children:["Pick a project on the ",_jsx("strong",{children:"Project"})," tab first",""!==d.trim()&&` (or click + there to create "${d.trim()}")`,"."]})]});const D={padding:"1.25rem",gridTemplateColumns:"auto 1fr 1.75rem 1.75rem"},F=b&&!a.state.lastStartError;return _jsxs("div",{className:"ac-test-setup-form",children:[_jsxs("div",{className:"ac-form-grid ac-test-setup-form__head",style:D,children:[_jsxs("h3",{className:"ac-form-section",style:{display:"flex",alignItems:"center",gap:"10px"},children:["Test Setup",_jsx(Button,{icon:F?"pi pi-check-circle":"pi pi-exclamation-circle",severity:F?"success":"danger",text:!0,rounded:!0,"aria-label":"Test Setup status",onClick:()=>{const e=(()=>{const e=[];if(m||e.push("No project is selected. Pick or create one on the Project tab."),a.projectFieldsLoaded||e.push("Project fields are still loading."),u.trim()||e.push("No test method selected."),f.trim()||e.push("Sample ID is required."),_)for(const t of _.config_fields){if("sample_id"===t.name)continue;const s=g[t.name],i=void 0===s||""===s||null===s;if(t.required&&i){e.push(`Required field "${labelOf(t)}" is empty.`);continue}const a=rangeIssue(t,s);a&&e.push(`"${labelOf(t)}" ${a}.`)}return e})(),t=a.state.lastStartError?.trim()??"";let s;s=0!==e.length||t?_jsxs("div",{children:[e.length>0&&_jsxs(_Fragment,{children:[_jsx("p",{style:{margin:"0 0 0.5rem 0"},children:"The form is incomplete:"}),_jsx("ul",{style:{margin:"0 0 1rem 1.25rem"},children:e.map((e,t)=>_jsx("li",{children:e},t))})]}),t&&_jsxs(_Fragment,{children:[_jsx("p",{style:{margin:"0 0 0.25rem 0",fontWeight:600},children:"Last start_test error from the server:"}),_jsx("pre",{style:{margin:0,padding:"0.5rem",background:"rgba(0,0,0,0.25)",borderRadius:"4px",whiteSpace:"pre-wrap",fontSize:"0.875rem"},children:t})]})]}):_jsx("p",{style:{margin:0},children:"All required fields are complete. The test is staged and ready to start."}),k({open:!0,title:"Test Setup Status",body:s})}}),_jsxs("span",{style:{fontSize:"0.85em",color:"var(--text-secondary-color)",fontWeight:"normal",marginLeft:"0.25rem"},children:["project: ",_jsx("strong",{children:d})]})]}),_jsx("span",{className:"ac-form-label",children:"Sample ID"}),_jsx(TextInput,{label:void 0,value:f,onValueChanged:e=>{h(e)},className:f.trim()?"":"p-invalid"}),_jsx("span",{"aria-hidden":"true"}),_jsx("span",{style:{color:f.trim()?"var(--green-500)":"var(--red-500)",display:"flex",alignItems:"center"},children:_jsx("i",{className:f.trim()?"pi pi-check":"pi pi-times"})}),c.length>0&&_jsxs(_Fragment,{children:[_jsx("span",{className:"ac-form-label",children:"Test Method"}),_jsxs("div",{className:"p-inputgroup",style:{flex:1},children:[_jsx(InputText,{value:methodLabelOf(u,_),readOnly:!0,style:{flex:1},tabIndex:-1}),_jsx(Button,{icon:"pi pi-folder",type:"button",onClick:()=>N(!0),tooltip:c.length>1?"Change test method":"View test method details",tooltipOptions:{position:"top"}})]}),_jsx("span",{"aria-hidden":"true"}),_jsx("span",{style:{color:u?"var(--green-500)":"var(--red-500)",display:"flex",alignItems:"center"},children:_jsx("i",{className:u?"pi pi-check":"pi pi-times"})})]}),T.length>0&&_jsxs(_Fragment,{children:[_jsx("span",{className:"ac-form-label",children:"Configuration"}),_jsxs("div",{className:"p-inputgroup",style:{flex:1},children:[_jsx(InputText,{value:S?configLabelOf(S):"",placeholder:"No configuration selected",readOnly:!0,style:{flex:1},tabIndex:-1}),_jsx(Button,{icon:"pi pi-folder",type:"button",onClick:()=>I(!0),tooltip:"Change configuration",tooltipOptions:{position:"top"}})]}),_jsx("span",{"aria-hidden":"true"}),_jsx("span",{style:{color:S?"var(--green-500)":"var(--text-secondary-color)",display:"flex",alignItems:"center"},children:_jsx("i",{className:S?"pi pi-check":"pi pi-minus"})})]})]}),_jsx("div",{className:"ac-test-setup-form__body",children:_jsxs("div",{className:"ac-form-grid",style:D,children:[_jsx("h3",{className:"ac-form-section",children:"Test Configuration"}),_.config_fields.map(e=>{if("sample_id"===e.name)return null;const t=(e=>{const t=g[e.name],s=void 0===t||""===t||null===t;return!(e.required&&s||rangeIssue(e,t))})(e),s=(e=>{const t=_?.asset_refs??[],s=a.projectAssetRefs??[],i=`config.${e.name}`,n=t.find(e=>"by_id_field"===e.select&&e.from===i);if(n)return n.asset_type;const o=s.find(e=>"by_id_field"===e.select&&e.from===i);return o?o.asset_type:null})(e),i=!s&&Array.isArray(e.options)&&e.options.length>0?normalizeOptions(e.options):null,n=!s&&!i&&"string"!==e.type&&"bool"!==e.type;return _jsxs(React.Fragment,{children:[_jsx("span",{className:"ac-form-label",children:labelOf(e)}),s?_jsx(AssetIdPicker,{assetType:s,value:null!=g[e.name]?String(g[e.name]):"",onChange:t=>A(e,t),invalid:!t}):i?_jsx(Dropdown,{value:g[e.name]??null,options:i,onChange:t=>A(e,t.value),placeholder:`Select ${e.label??e.name}…`,className:"ac-dropdown-clearable"+(t?"":" p-invalid"),showClear:!e.required}):n?_jsx(ValueInput,{label:void 0,value:null!=g[e.name]?Number(rawToDisplay(Number(g[e.name]),e.scale)):null,min:e.min,max:e.max,onValueChanged:t=>A(e,t),className:t?"":"p-invalid"}):_jsx(TextInput,{label:void 0,value:null!=g[e.name]?String(g[e.name]):"",onValueChanged:t=>A(e,t),className:t?"":"p-invalid"}),hasDescription(e)?_jsx(Button,{icon:"pi pi-info-circle",text:!0,rounded:!0,"aria-label":`About ${labelOf(e)}`,onClick:()=>k({open:!0,title:labelOf(e),body:_jsx("p",{style:{margin:0,whiteSpace:"pre-wrap"},children:e.description})})}):_jsx("span",{"aria-hidden":"true"}),_jsx("span",{style:{color:t?"var(--green-500)":"var(--red-500)",display:"flex",alignItems:"center"},children:_jsx("i",{className:t?"pi pi-check":"pi pi-times"})})]},e.name)})]})}),_jsx(TestMethodDialog,{visible:y,onHide:()=>N(!1),currentMethodId:u,onSelected:e=>p(e)}),_jsx(ConfigurationDialog,{visible:C,onHide:()=>I(!1),configurations:T,currentConfigName:a.configurationName,onSelected:e=>{const t=T.find(t=>t.name===e);t&&(x(e=>j(t,{...e})),a.setConfigurationName(e))}}),_jsx(Dialog,{header:w.title,visible:w.open,onHide:()=>k({open:!1,title:"",body:null}),style:{width:"32rem",maxWidth:"90vw"},modal:!0,dismissableMask:!0,children:w.body})]})};
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import React,{useState,useEffect,useContext,useMemo}from"react";import{Button}from"primereact/button";import{InputText}from"primereact/inputtext";import{Dropdown}from"primereact/dropdown";import{Dialog}from"primereact/dialog";import{EventEmitterContext}from"../../core/EventEmitterContext";import{AutoCoreTagContext}from"../../core/AutoCoreTagContext";import{MessageType}from"../../hub/CommandMessage";import{ValueInput}from"../ValueInput";import{TextInput}from"../TextInput";import{useTis}from"./TisProvider";import{useAmsAssets,useAmsRoles}from"../ams/AmsProvider";import{TestMethodDialog}from"./TestMethodDialog";import{ConfigurationDialog,configLabelOf}from"./ConfigurationDialog";const labelOf=e=>{const t=e.label&&e.label.length>0?e.label:e.name;return e.units?`${t} [${e.units}]`:t},rawToDisplay=(e,t)=>t&&1!==t&&"number"==typeof e&&Number.isFinite(e)?e*t:e,displayToRaw=(e,t)=>t&&1!==t&&"number"==typeof e&&Number.isFinite(e)?e/t:e,hasDescription=e=>"string"==typeof e.description&&e.description.length>0,DEFAULT_TOKEN_RE=/^\$\{\s*([^}]+?)\s*\}$/,resolveDefaultRaw=(e,t,s)=>{const i=e.default;if("string"==typeof i){const e=i.match(DEFAULT_TOKEN_RE);if(e){const i=t(e[1]),n=i?s[i.tagName]:void 0;return null==n?{raw:void 0,ok:!1}:{raw:n,ok:!0}}}return{raw:displayToRaw(i,e.scale),ok:!0}},rangeIssue=(e,t)=>{if(void 0===t||""===t||null===t)return null;if(null==e.min&&null==e.max)return null;const s=Number(rawToDisplay(Number(t),e.scale));if(!Number.isFinite(s))return null;const i=null!=e.min&&null!=e.max?Math.min(e.min,e.max):e.min,n=null!=e.min&&null!=e.max?Math.max(e.min,e.max):e.max;return null!=i&&s<i?`must be ≥ ${i}`:null!=n&&s>n?`must be ≤ ${n}`:null},normalizeOptions=e=>(e??[]).map(e=>null!==e&&"object"==typeof e?{label:String(e.label??e.value),value:e.value}:{label:String(e),value:e}),methodLabelOf=(e,t)=>t?.label&&t.label.length>0?t.label:e,AssetIdPicker=({assetType:e,value:t,onChange:s,invalid:i})=>{const n=useAmsAssets(),a=useAmsRoles(),o=useMemo(()=>n.filter(t=>t.asset_type===e&&"active"===t.status).map(e=>{const t=a[e.asset_type]?.find(t=>t.location===e.location)?.label,s=[e.asset_id];return t?s.push(`— ${t}`):e.location&&s.push(`— ${e.location}`),e.serial&&s.push(`(s/n ${e.serial})`),{label:s.join(" "),value:e.asset_id}}),[n,a,e]);return _jsx(Dropdown,{value:t,options:o,onChange:e=>s(e.value??""),placeholder:0===o.length?`No active ${e} assets registered — add one in Settings → Assets`:`Select ${e}…`,className:"ac-dropdown-clearable"+(i?" p-invalid":""),filter:!0,showClear:!0,disabled:0===o.length})};export const TestSetupForm=({schema:e,defaultMethodId:t,onMethodChange:s,onValidationChange:i})=>{const n=useTis(),{invoke:a,write:o}=useContext(EventEmitterContext),{rawValues:l,findTagByFqdn:r}=useContext(AutoCoreTagContext),c=useMemo(()=>Object.keys(n.schemas),[n.schemas]),d=n.selection.projectId,m=""!==d.trim()&&n.projectKnown(d.trim()),[u,p]=useState(n.selection.methodId||t||n.defaultMethodId||""),[f,h]=useState(n.selection.sampleId||""),g=n.stagedConfig,x=e=>{const t="function"==typeof e?e(n.stagedConfig):e;t!==n.stagedConfig&&n.setStagedConfig(t)},_=e??(u?n.schemas[u]:void 0),j=(e,t)=>{for(const[s,i]of Object.entries(e.defaults??{})){if("sample_id"===s)continue;const e=_?.config_fields.find(e=>e.name===s),n=displayToRaw(i,e?.scale);t[s]=n,e?.source&&Promise.resolve().then(()=>o(e.source,n)).catch(e=>{})}return t};useEffect(()=>{n.selection.methodId!==u&&u&&n.setSelection({methodId:u}),s&&s(u)},[u]),useEffect(()=>{n.selection.sampleId!==f&&n.setSelection({sampleId:f})},[f]),useEffect(()=>{n.state.stagedSampleId&&n.state.stagedSampleId!==f&&h(n.state.stagedSampleId)},[n.state.stagedSampleId]),useEffect(()=>{n.selection.methodId&&n.selection.methodId!==u&&p(n.selection.methodId)},[n.selection.methodId]);const[b,v]=useState(!1),[y,N]=useState(!1),[C,I]=useState(!1),T=_?.configurations??[],S=T.find(e=>e.name===n.configurationName),[w,k]=useState({open:!1,title:"",body:null});useEffect(()=>{if(!_||!u)return;if(n.defaultsAppliedForMethod===u)return;n.markDefaultsAppliedForMethod(u);const e=_.configurations&&_.configurations.length>0?_.configurations[0]:void 0;x(t=>{let s=t;for(const e of _.config_fields){if("sample_id"===e.name)continue;if(void 0===e.default||null===e.default)continue;if(e.source){const t=r(e.source),s=t?l[t.tagName]:void 0;if(null!=s)continue}const{raw:i,ok:n}=resolveDefaultRaw(e,r,l);n&&(s===t&&(s={...t}),s[e.name]=i,e.source&&Promise.resolve().then(()=>o(e.source,i)).catch(e=>{}))}return e&&(s===t&&(s={...t}),s=j(e,s)),s}),n.setConfigurationName(e?e.name:"")},[_,u,o,l,r,n.defaultsAppliedForMethod,n.markDefaultsAppliedForMethod,n.setConfigurationName]),useEffect(()=>{_&&x(e=>{let t=e;for(const s of _.config_fields){if("sample_id"===s.name)continue;if(!s.source)continue;const i=r(s.source);if(!i)continue;const n=l[i.tagName];null!=n&&(t[s.name]!==n&&(t===e&&(t={...e}),t[s.name]=n))}return t})},[_,l,r]),useEffect(()=>{if(!_)return void v(!1);let e=!0;m||(e=!1),u.trim()||(e=!1),f.trim()||(e=!1),e&&!n.projectFieldsLoaded&&(e=!1);for(const t of _.config_fields){if("sample_id"===t.name)continue;const s=g[t.name],i=void 0===s||""===s||null===s;if(t.required&&i){e=!1;break}if(rangeIssue(t,s)){e=!1;break}}if(v(e),i&&i(e,g),e){const{sample_id:e,...t}=g??{},s={...n.projectFields,...t};a("tis.stage_test",MessageType.Request,{project_id:d,method_id:u,sample_id:f,config:s}).catch(e=>{})}},[g,_,d,u,f,m,n.projectFields,n.projectFieldsLoaded,i,a]);const A=async(e,t)=>{const s=displayToRaw(t,e.scale);if(x({...g,[e.name]:s}),e.source)try{await o(e.source,s)}catch(e){}};if(!_)return _jsx("div",{className:"ac-form-grid",style:{padding:"1.25rem"},children:_jsx("h3",{className:"ac-form-section",children:n.schemasLoaded?"No Test Method Selected":"Loading test methods…"})});if(!m)return _jsxs("div",{style:{padding:"1.25rem",maxWidth:"600px"},children:[_jsx("h3",{className:"ac-form-section",children:"No project selected"}),_jsxs("p",{style:{color:"var(--text-secondary-color)",marginTop:"0.5rem"},children:["Pick a project on the ",_jsx("strong",{children:"Project"})," tab first",""!==d.trim()&&` (or click + there to create "${d.trim()}")`,"."]})]});const D={padding:"1.25rem",gridTemplateColumns:"auto 1fr 1.75rem 1.75rem"},F=b&&!n.state.lastStartError;return _jsxs("div",{className:"ac-test-setup-form",children:[_jsxs("div",{className:"ac-form-grid ac-test-setup-form__head",style:D,children:[_jsxs("h3",{className:"ac-form-section",style:{display:"flex",alignItems:"center",gap:"10px"},children:["Test Setup",_jsx(Button,{icon:F?"pi pi-check-circle":"pi pi-exclamation-circle",severity:F?"success":"danger",text:!0,rounded:!0,"aria-label":"Test Setup status",onClick:()=>{const e=(()=>{const e=[];if(m||e.push("No project is selected. Pick or create one on the Project tab."),n.projectFieldsLoaded||e.push("Project fields are still loading."),u.trim()||e.push("No test method selected."),f.trim()||e.push("Sample ID is required."),_)for(const t of _.config_fields){if("sample_id"===t.name)continue;const s=g[t.name],i=void 0===s||""===s||null===s;if(t.required&&i){e.push(`Required field "${labelOf(t)}" is empty.`);continue}const n=rangeIssue(t,s);n&&e.push(`"${labelOf(t)}" ${n}.`)}return e})(),t=n.state.lastStartError?.trim()??"";let s;s=0!==e.length||t?_jsxs("div",{children:[e.length>0&&_jsxs(_Fragment,{children:[_jsx("p",{style:{margin:"0 0 0.5rem 0"},children:"The form is incomplete:"}),_jsx("ul",{style:{margin:"0 0 1rem 1.25rem"},children:e.map((e,t)=>_jsx("li",{children:e},t))})]}),t&&_jsxs(_Fragment,{children:[_jsx("p",{style:{margin:"0 0 0.25rem 0",fontWeight:600},children:"Last start_test error from the server:"}),_jsx("pre",{style:{margin:0,padding:"0.5rem",background:"rgba(0,0,0,0.25)",borderRadius:"4px",whiteSpace:"pre-wrap",fontSize:"0.875rem"},children:t})]})]}):_jsx("p",{style:{margin:0},children:"All required fields are complete. The test is staged and ready to start."}),k({open:!0,title:"Test Setup Status",body:s})}}),_jsxs("span",{style:{fontSize:"0.85em",color:"var(--text-secondary-color)",fontWeight:"normal",marginLeft:"0.25rem"},children:["project: ",_jsx("strong",{children:d})]})]}),_jsx("span",{className:"ac-form-label",children:"Sample ID"}),_jsx(TextInput,{label:void 0,value:f,onValueChanged:e=>{h(e)},className:f.trim()?"":"p-invalid"}),_jsx("span",{"aria-hidden":"true"}),_jsx("span",{style:{color:f.trim()?"var(--green-500)":"var(--red-500)",display:"flex",alignItems:"center"},children:_jsx("i",{className:f.trim()?"pi pi-check":"pi pi-times"})}),c.length>0&&_jsxs(_Fragment,{children:[_jsx("span",{className:"ac-form-label",children:"Test Method"}),_jsxs("div",{className:"p-inputgroup",style:{flex:1},children:[_jsx(InputText,{value:methodLabelOf(u,_),readOnly:!0,style:{flex:1},tabIndex:-1}),_jsx(Button,{icon:"pi pi-folder",type:"button",onClick:()=>N(!0),tooltip:c.length>1?"Change test method":"View test method details",tooltipOptions:{position:"top"}})]}),_jsx("span",{"aria-hidden":"true"}),_jsx("span",{style:{color:u?"var(--green-500)":"var(--red-500)",display:"flex",alignItems:"center"},children:_jsx("i",{className:u?"pi pi-check":"pi pi-times"})})]}),T.length>0&&_jsxs(_Fragment,{children:[_jsx("span",{className:"ac-form-label",children:"Configuration"}),_jsxs("div",{className:"p-inputgroup",style:{flex:1},children:[_jsx(InputText,{value:S?configLabelOf(S):"",placeholder:"No configuration selected",readOnly:!0,style:{flex:1},tabIndex:-1}),_jsx(Button,{icon:"pi pi-folder",type:"button",onClick:()=>I(!0),tooltip:"Change configuration",tooltipOptions:{position:"top"}})]}),_jsx("span",{"aria-hidden":"true"}),_jsx("span",{style:{color:S?"var(--green-500)":"var(--text-secondary-color)",display:"flex",alignItems:"center"},children:_jsx("i",{className:S?"pi pi-check":"pi pi-minus"})})]})]}),_jsx("div",{className:"ac-test-setup-form__body",children:_jsxs("div",{className:"ac-form-grid",style:D,children:[_jsx("h3",{className:"ac-form-section",children:"Test Configuration"}),_.config_fields.map(e=>{if("sample_id"===e.name)return null;const t=(e=>{const t=g[e.name],s=void 0===t||""===t||null===t;return!(e.required&&s||rangeIssue(e,t))})(e),s=(e=>{const t=_?.asset_refs??[],s=n.projectAssetRefs??[],i=`config.${e.name}`,a=t.find(e=>"by_id_field"===e.select&&e.from===i);if(a)return a.asset_type;const o=s.find(e=>"by_id_field"===e.select&&e.from===i);return o?o.asset_type:null})(e),i=!s&&Array.isArray(e.options)&&e.options.length>0?normalizeOptions(e.options):null,a=!s&&!i&&"string"!==e.type&&"bool"!==e.type;return _jsxs(React.Fragment,{children:[_jsx("span",{className:"ac-form-label",children:labelOf(e)}),s?_jsx(AssetIdPicker,{assetType:s,value:null!=g[e.name]?String(g[e.name]):"",onChange:t=>A(e,t),invalid:!t}):i?_jsx(Dropdown,{value:g[e.name]??null,options:i,onChange:t=>A(e,t.value),placeholder:`Select ${e.label??e.name}…`,className:"ac-dropdown-clearable"+(t?"":" p-invalid"),showClear:!e.required}):a?_jsx(ValueInput,{label:void 0,value:null!=g[e.name]?Number(rawToDisplay(Number(g[e.name]),e.scale)):null,min:e.min,max:e.max,onValueChanged:t=>A(e,t),className:t?"":"p-invalid"}):_jsx(TextInput,{label:void 0,value:null!=g[e.name]?String(g[e.name]):"",onValueChanged:t=>A(e,t),className:t?"":"p-invalid"}),hasDescription(e)?_jsx(Button,{icon:"pi pi-info-circle",text:!0,rounded:!0,"aria-label":`About ${labelOf(e)}`,onClick:()=>k({open:!0,title:labelOf(e),body:_jsx("p",{style:{margin:0,whiteSpace:"pre-wrap"},children:e.description})})}):_jsx("span",{"aria-hidden":"true"}),_jsx("span",{style:{color:t?"var(--green-500)":"var(--red-500)",display:"flex",alignItems:"center"},children:_jsx("i",{className:t?"pi pi-check":"pi pi-times"})})]},e.name)})]})}),_jsx(TestMethodDialog,{visible:y,onHide:()=>N(!1),currentMethodId:u,onSelected:e=>p(e)}),_jsx(ConfigurationDialog,{visible:C,onHide:()=>I(!1),configurations:T,currentConfigName:n.configurationName,onSelected:e=>{const t=T.find(t=>t.name===e);t&&(x(e=>j(t,{...e})),n.setConfigurationName(e))}}),_jsx(Dialog,{header:w.title,visible:w.open,onHide:()=>k({open:!1,title:"",body:null}),style:{width:"32rem",maxWidth:"90vw"},modal:!0,dismissableMask:!0,children:w.body})]})};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adcops/autocore-react",
-    "version": "3.3.109",
+    "version": "3.3.112",
     "description": "A React component library for industrial user interfaces.",
     "private": false,
     "type": "module",

package/src/assets/{JogXNeg.tsx → JogXLeft.tsx}

@@ -3,11 +3,14 @@
  * Created Date: 2026-06-02
  * -----
  *
+ * Named for the direction it points (left), not a jog polarity — which
+ * axis end "positive" corresponds to varies by machine, so the icon is
+ * chosen by direction via the JogPanel `icon` field, decoupled from action.
  */
 
 import type { SVGProps } from "react";
 
-export const SvgJogXNeg = (props: SVGProps<SVGSVGElement>) => (
+export const SvgJogXLeft = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"
@@ -20,11 +23,11 @@ export const SvgJogXNeg = (props: SVGProps<SVGSVGElement>) => (
     strokeLinejoin="round"
     {...props}
   >
-    {/* Triangle pointing left (X negative) */}
+    {/* Triangle pointing left */}
     <path d="M10 6 3 12 10 18Z" fill="currentColor" />
     {/* Letter X */}
     <path d="M14 6l8 12M22 6l-8 12" />
   </svg>
 );
 
-export default SvgJogXNeg;
+export default SvgJogXLeft;

package/src/assets/{JogXPos.tsx → JogXRight.tsx}

@@ -3,11 +3,14 @@
  * Created Date: 2026-06-02
  * -----
  *
+ * Named for the direction it points (right), not a jog polarity — which
+ * axis end "positive" corresponds to varies by machine, so the icon is
+ * chosen by direction via the JogPanel `icon` field, decoupled from action.
  */
 
 import type { SVGProps } from "react";
 
-export const SvgJogXPos = (props: SVGProps<SVGSVGElement>) => (
+export const SvgJogXRight = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"
@@ -22,9 +25,9 @@ export const SvgJogXPos = (props: SVGProps<SVGSVGElement>) => (
   >
     {/* Letter X */}
     <path d="M2 6l8 12M10 6l-8 12" />
-    {/* Triangle pointing right (X positive) */}
+    {/* Triangle pointing right */}
     <path d="M14 6 21 12 14 18Z" fill="currentColor" />
   </svg>
 );
 
-export default SvgJogXPos;
+export default SvgJogXRight;

package/src/assets/{JogYPos.tsx → JogYDownLeft.tsx}

@@ -7,7 +7,7 @@
 
 import type { SVGProps } from "react";
 
-export const SvgJogYNeg = (props: SVGProps<SVGSVGElement>) => (
+export const SvgJogYDownLeft = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"
@@ -27,4 +27,4 @@ export const SvgJogYNeg = (props: SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
-export default SvgJogYNeg;
+export default SvgJogYDownLeft;

package/src/assets/{JogYNeg.tsx → JogYUpRight.tsx}

@@ -7,7 +7,7 @@
 
 import type { SVGProps } from "react";
 
-export const SvgJogYPos = (props: SVGProps<SVGSVGElement>) => (
+export const SvgJogYUpRight = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"
@@ -27,4 +27,5 @@ export const SvgJogYPos = (props: SVGProps<SVGSVGElement>) => (
   </svg>
 );
 
-export default SvgJogYPos;
+export default SvgJogYUpRight;
+

package/src/assets/index.ts

@@ -3,10 +3,10 @@ export { default as Distance } from "./Distance";
 export { default as JogLong } from "./JogLong";
 export { default as JogMedium } from "./JogMedium";
 export { default as JogShort } from "./JogShort";
-export { default as JogXPos } from "./JogXPos";
-export { default as JogXNeg } from "./JogXNeg";
-export { default as JogYPos } from "./JogYPos";
-export { default as JogYNeg } from "./JogYNeg";
+export { default as JogXRight } from "./JogXRight";
+export { default as JogXLeft } from "./JogXLeft";
+export { default as JogYUpRight } from "./JogYUpRight";
+export { default as JogYDownLeft } from "./JogYDownLeft";
 export { default as JogZPos } from "./JogZPos";
 export { default as JogZNeg } from "./JogZNeg";
 export { default as On } from "./On";

package/src/components/JogPanel.tsx

@@ -19,7 +19,7 @@ import { Distance, JogShort, JogMedium, JogLong } from '../assets';
 import { Speed, SpeedSlow, SpeedMedium, SpeedFast } from '../assets';
 import { RotationCcwA, RotationCcwB, RotationCcwC } from '../assets';
 import { RotationCwA, RotationCwB, RotationCwC  } from '../assets';
-import { JogXPos, JogXNeg, JogYPos, JogYNeg, JogZPos, JogZNeg } from '../assets';
+import { JogXLeft, JogXRight, JogYDownLeft, JogYUpRight, JogZPos, JogZNeg } from '../assets';
 
 /**
  * Enumerates the source button or action when an event occurs.
@@ -80,6 +80,17 @@ export enum JogSpeedAction {
  * Jog button definition type for defining the button in the JogPanel.
  */
 export interface JogPanelButtonDefinition {
+    /**
+     * Direction key selecting the arrow icon shown on the button, e.g.
+     * `jog_x_left`, `jog_x_right`, `jog_y_up_right`, `jog_y_down_left`,
+     * `jog_z_up`, `jog_z_down`, or the rotation keys `rot_{a|b|c}_{cw|ccw}`.
+     *
+     * Deliberately independent of `action`: which physical direction a
+     * machine's "jog X positive" moves is not consistent across machines,
+     * so the icon (what the operator sees) is chosen here by direction while
+     * `action` carries the polarity sent to the control program. See
+     * `selectIcon`. Legacy `pi pi-arrow-*` values are still accepted.
+     */
     icon: string;
     alt: string;
     action: JogPanelAction
@@ -126,18 +137,18 @@ interface JogPanelState {
  * A default jog button configuration for linear 3D motion.
  */
 export const DefaultLinearJogButtons : (JogPanelButtonDefinition | undefined)[][] = [
-    [undefined, { icon: "pi pi-arrow-up", action: JogPanelAction.zPositive, alt: "Z Positive" }, { icon: "pi pi-arrow-down-left", action: JogPanelAction.yNegative, alt: "Y Negative" }],
-    [{ icon: "pi pi-arrow-left", action: JogPanelAction.xNegative, alt: "X Negative" }, undefined, { icon: "pi pi-arrow-right", action: JogPanelAction.xPositive, alt: "X Positive" }],
-    [{ icon: "pi pi-arrow-up-right", action: JogPanelAction.yPositive, alt: "Y Positive" }, { icon: "pi pi-arrow-down", action: JogPanelAction.zNegative, alt: "Z Negative" }, undefined],
+    [undefined, { icon: "jog_z_up", action: JogPanelAction.zPositive, alt: "Z Positive" }, { icon: "jog_y_up_right", action: JogPanelAction.yNegative, alt: "Y Negative" }],
+    [{ icon: "jog_x_left", action: JogPanelAction.xNegative, alt: "X Negative" }, undefined, { icon: "jog_x_right", action: JogPanelAction.xPositive, alt: "X Positive" }],
+    [{ icon: "jog_y_down_left", action: JogPanelAction.yPositive, alt: "Y Positive" }, { icon: "jog_z_down", action: JogPanelAction.zNegative, alt: "Z Negative" }, undefined],
 ];
 
 /**
  * A default jog button configuration for rotational 3D motion.
  */
 export const DefaultRotationJogButtons : (JogPanelButtonDefinition | undefined)[][] = [
-    [{ icon: "pi", action: JogPanelAction.bPositive, alt: "Rot B Positive" }, { icon: "pi", action: JogPanelAction.cPositive, alt: "Rot C Positive" }, undefined],
-    [{ icon: "pi", action: JogPanelAction.aNegative, alt: "Rot A Negative" }, undefined, { icon: "pi", action: JogPanelAction.aPositive, alt: "Rot A Positive" }],
-    [undefined, { icon: "pi", action: JogPanelAction.cNegative, alt: "Rot C Negative" }, { icon: "pi ", action: JogPanelAction.bNegative, alt: "Rot B Negative" }],
+    [{ icon: "rot_b_cw", action: JogPanelAction.bPositive, alt: "Rot B Positive" }, { icon: "rot_c_cw", action: JogPanelAction.cPositive, alt: "Rot C Positive" }, undefined],
+    [{ icon: "rot_a_ccw", action: JogPanelAction.aNegative, alt: "Rot A Negative" }, undefined, { icon: "rot_a_cw", action: JogPanelAction.aPositive, alt: "Rot A Positive" }],
+    [undefined, { icon: "rot_c_ccw", action: JogPanelAction.cNegative, alt: "Rot C Negative" }, { icon: "rot_b_ccw", action: JogPanelAction.bNegative, alt: "Rot B Negative" }],
 ];
 
 /**
@@ -157,10 +168,14 @@ export const DefaultRotationJogButtons : (JogPanelButtonDefinition | undefined)[
  * Example:
  * ```
  * export const kDefaultButtonDefinitions : (JogPanelButtonDefinition | undefined)[][] = [
- *    [undefined, { icon: "pi pi-arrow-up", action: JogPanelAction.zPositive, alt: "Z Positive" }, { icon: "pi pi-arrow-down-left", action: JogPanelAction.yNegative, alt: "Y Negative" }],
- *    [{ icon: "pi pi-arrow-left", action: JogPanelAction.xNegative, alt: "X Negative" }, undefined, { icon: "pi pi-arrow-right", action: JogPanelAction.xPositive, alt: "X Positive" }],
- *    [{ icon: "pi pi-arrow-up-right", action: JogPanelAction.yPositive, alt: "Y Positive" }, { icon: "pi pi-arrow-down", action: JogPanelAction.zNegative, alt: "Z Negative" }, undefined],
+ *    [undefined, { icon: "jog_z_up", action: JogPanelAction.zPositive, alt: "Z Positive" }, { icon: "jog_y_down_left", action: JogPanelAction.yNegative, alt: "Y Negative" }],
+ *    [{ icon: "jog_x_left", action: JogPanelAction.xNegative, alt: "X Negative" }, undefined, { icon: "jog_x_right", action: JogPanelAction.xPositive, alt: "X Positive" }],
+ *    [{ icon: "jog_y_up_right", action: JogPanelAction.yPositive, alt: "Y Positive" }, { icon: "jog_z_down", action: JogPanelAction.zNegative, alt: "Z Negative" }, undefined],
  * ];
+ *
+ * // The icon is chosen by direction, not polarity: on a machine where
+ * // "X positive" jogs left, give that button `icon: "jog_x_left"` while
+ * // keeping `action: JogPanelAction.xPositive`.
  * ```
  * 
  */
@@ -242,53 +257,42 @@ export class JogPanel extends React.Component<JogPanelProps, JogPanelState> {
         </div>
     }  
     
-    private actionToIcon(action : JogPanelAction | undefined) {
-        if (action == JogPanelAction.Invalid) {
-            return <i/>
-        }
-        else if (action == JogPanelAction.Stop) {
-            return <i/>
-        }
-        else if (action == JogPanelAction.xNegative) {
-            return <JogXNeg />
-        }
-        else if (action == JogPanelAction.xPositive) {
-            return <JogXPos />
-        }
-        else if (action == JogPanelAction.yNegative) {
-            return <JogYNeg />
-        }
-        else if (action == JogPanelAction.yPositive) {
-            return <JogYPos />
-        }
-        else if (action == JogPanelAction.zNegative) {
-            return <JogZNeg />
-        }
-        else if (action == JogPanelAction.zPositive) {
-            return <JogZPos />
-        }
-        else if (action == JogPanelAction.aNegative) {
-            return <RotationCcwA />
-        }
-        else if (action == JogPanelAction.aPositive) {
-            return <RotationCwA />
-        }
-        else if (action == JogPanelAction.bNegative) {
-            return <RotationCcwB />
-        }
-        else if (action == JogPanelAction.bPositive) {
-            return <RotationCwB />
-        }
-        else if (action == JogPanelAction.cNegative) {
-            return <RotationCcwC />
-        }
-        else if (action == JogPanelAction.cPositive) {
-            return <RotationCwC />
-        }
-        else {
-            return <i />
+    /**
+     * Map a button's `icon` direction key to its arrow glyph. Decoupled from
+     * `action` on purpose: which physical direction "jog X positive" moves is
+     * not consistent across machines, so the caller picks the icon by the
+     * direction the operator should see. Unknown/empty keys render nothing.
+     *
+     * The `pi pi-arrow-*` cases are legacy aliases kept so button definitions
+     * written before the direction-key scheme (which already encoded the
+     * arrow here — it was simply ignored) keep rendering the right glyph.
+     */
+    private selectIcon(icon : string | undefined) {
+        switch (icon) {
+            // Direction keys
+            case 'jog_x_left':      return <JogXLeft />
+            case 'jog_x_right':     return <JogXRight />
+            case 'jog_y_up_right':  return <JogYUpRight />
+            case 'jog_y_down_left': return <JogYDownLeft />
+            case 'jog_z_up':        return <JogZPos />
+            case 'jog_z_down':      return <JogZNeg />
+            case 'rot_a_cw':        return <RotationCwA />
+            case 'rot_a_ccw':       return <RotationCcwA />
+            case 'rot_b_cw':        return <RotationCwB />
+            case 'rot_b_ccw':       return <RotationCcwB />
+            case 'rot_c_cw':        return <RotationCwC />
+            case 'rot_c_ccw':       return <RotationCcwC />
+
+            // Legacy PrimeReact arrow-class aliases (back-compat)
+            case 'pi pi-arrow-left':      return <JogXLeft />
+            case 'pi pi-arrow-right':     return <JogXRight />
+            case 'pi pi-arrow-up':        return <JogZPos />
+            case 'pi pi-arrow-down':      return <JogZNeg />
+            case 'pi pi-arrow-up-right':  return <JogYUpRight />
+            case 'pi pi-arrow-down-left': return <JogYDownLeft />
+
+            default:                return <i />
         }
-
     }
 
     standardButton(row : number, col : number) {
@@ -298,14 +302,15 @@ export class JogPanel extends React.Component<JogPanelProps, JogPanelState> {
             && this.props.buttonDefinitions[row][col] !== undefined 
             && this.props.buttonDefinitions[row][col]?.action !== undefined ) {
 
-            const action = this.props.buttonDefinitions[row][col]?.action;
+            const def = this.props.buttonDefinitions[row][col];
+            const action = def?.action;
 
             return <Button
                 key={`${row}-${col}`}
-                tooltip={this.props.buttonDefinitions[row][col]?.alt}
+                tooltip={def?.alt}
                 onClick={() => this.handleClicked(action)}
                 className="button-item"
-                icon={() => this.actionToIcon(action)}/>
+                icon={() => this.selectIcon(def?.icon)}/>
 
         }
         else {

package/src/components/ValueInput.tsx

@@ -108,10 +108,17 @@ export const ValueInput: React.FC<ValueInputProps> = ({
         }
     }, [value, editing]);
 
+    // Treat the bounds as an unordered interval: an author may write the range
+    // in "magnitude" order (e.g. min:-50, max:-1000 for a compressive load),
+    // which is numerically inverted. Without this, min > max yields an empty
+    // valid set and the field rejects every value, including its own default.
+    const lo = min !== undefined && max !== undefined ? Math.min(min, max) : min;
+    const hi = min !== undefined && max !== undefined ? Math.max(min, max) : max;
+
     const validate = (val: number | null): boolean => {
         if (val === null || Number.isNaN(val)) return false;
-        if (min !== undefined && val < min) return false;
-        if (max !== undefined && val > max) return false;
+        if (lo !== undefined && val < lo) return false;
+        if (hi !== undefined && val > hi) return false;
         return true;
     };
 
@@ -148,7 +155,7 @@ export const ValueInput: React.FC<ValueInputProps> = ({
     };
 
     const isLabelDefined = label !== undefined && label !== null && label !== '';
-    const allowNegative = min === undefined || min < 0;
+    const allowNegative = lo === undefined || lo < 0;
 
     return (
         <div>

package/src/components/network/StagedChangeBanner.tsx

@@ -11,6 +11,7 @@
  */
 
 import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { Button } from 'primereact/button';
 import { useNetwork } from './NetworkProvider';
 
@@ -38,10 +39,23 @@ export const StagedChangeBanner: React.FC<StagedChangeBannerProps> = ({ style })
     const total = Math.max(1, staged.revert_in_seconds);
     const pctRemaining = Math.max(0, Math.min(100, (remainingSec / total) * 100));
 
+    // NOTE: the banner is rendered through a portal into <body> (see the
+    // createPortal call below) and positioned `fixed`, not `sticky`. That is
+    // deliberate: host apps commonly wrap their content in a
+    // `position: fixed`/`transform`ed shell (which establishes a stacking
+    // context) and open configuration screens as PrimeReact *modal* dialogs.
+    // A modal Dialog portals its mask to <body> at z-index ~1100+, so a
+    // banner living inside the app shell — no matter how high its own
+    // z-index — renders *beneath* the modal and becomes unreachable
+    // ("press confirm on a popup that is hidden"). Portaling to <body> puts
+    // the banner in the root stacking context alongside the modal, where a
+    // z-index above the PrimeReact modal range actually wins.
     const containerStyle: React.CSSProperties = {
-        position: 'sticky',
+        position: 'fixed',
         top: 0,
-        zIndex: 1000,
+        left: 0,
+        right: 0,
+        zIndex: 2000,
         padding: '0.75rem 1rem',
         background: remainingSec <= 10 ? '#7f1d1d' : '#78350f',
         color: 'white',
@@ -50,7 +64,7 @@ export const StagedChangeBanner: React.FC<StagedChangeBannerProps> = ({ style })
         ...style,
     };
 
-    return (
+    const banner = (
         <div style={containerStyle} role="alertdialog" aria-live="polite">
             <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '1rem', flexWrap: 'wrap' }}>
                 <div style={{ minWidth: 0 }}>
@@ -96,6 +110,11 @@ export const StagedChangeBanner: React.FC<StagedChangeBannerProps> = ({ style })
             </div>
         </div>
     );
+
+    // Guard for non-DOM environments (SSR/tests); render inline if there is
+    // no document to portal into.
+    if (typeof document === 'undefined' || !document.body) return banner;
+    return createPortal(banner, document.body);
 };
 
 export default StagedChangeBanner;

package/src/components/tis/ResultHistoryTable.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useContext } from 'react';
 import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
 import { Button } from 'primereact/button';
-import { Tag } from 'primereact/tag';
+import { Badge } from 'primereact/badge';
 import { EventEmitterContext } from '../../core/EventEmitterContext';
 import { MessageType } from '../../hub/CommandMessage';
 import { useTis } from './TisProvider';
@@ -364,17 +364,26 @@ export const ResultHistoryTable: React.FC<ResultHistoryTableProps> = (props) =>
                     style={{ minWidth: '12rem' }}
                 />
                 <Column field="method_id" header="Test Method" sortable style={{ minWidth: '10rem' }} />
-                <Column field="run_id"    header="Run ID"      sortable style={{ minWidth: '12rem' }} />
+                {/* Run ID dropped from the table — it's an internal handle
+                    (the row's sample_id + date already identify the run for a
+                    human), and its 12rem column was the main reason the table
+                    overflowed in portrait. Still carried on the row data and
+                    used for selection + downloads. */}
                 <Column header="Status" field="status" sortable
                     body={(rowData) => {
                         const s = statusOf(rowData);
-                        return <Tag value={s.label} severity={s.severity} />;
+                        return <Badge value={s.label} severity={s.severity} />;
                     }}
-                    style={{ minWidth: '8rem' }}
+                    style={{ minWidth: '6rem' }}
                 />
+                {/* Inclusion shown as a single checkmark / eye-slash toggle so
+                    the column stays narrow. Green check = counted in cross-test
+                    results; amber eye-slash = excluded. Click toggles. */}
                 <Column
-                    header="Include"
-                    style={{ width: '8rem' }}
+                    header="Incl."
+                    align="center"
+                    alignHeader="center"
+                    style={{ width: '4.5rem' }}
                     body={(rowData) => {
                         const isExcluded = rowData?.excluded === true;
                         const isBusy = excludingRunId === rowData.run_id;
@@ -382,12 +391,14 @@ export const ResultHistoryTable: React.FC<ResultHistoryTableProps> = (props) =>
                             <Button
                                 icon={isBusy ? 'pi pi-spin pi-spinner'
                                              : (isExcluded ? 'pi pi-eye-slash' : 'pi pi-check')}
-                                label={isExcluded ? 'Excluded' : 'Included'}
+                                rounded
+                                text
                                 size="small"
-                                outlined
                                 severity={isExcluded ? 'warning' : 'success'}
                                 disabled={excludingRunId !== null}
                                 onClick={() => handleToggleExclude(rowData)}
+                                aria-label={isExcluded ? 'Excluded — click to include'
+                                                       : 'Included — click to exclude'}
                                 tooltip={isExcluded
                                     ? 'Excluded from cross-test results — click to include'
                                     : 'Included in cross-test results — click to exclude'}

package/src/components/tis/ScienceTable.css

@@ -0,0 +1,87 @@
+/*
+ * ScienceTable — "instrument report" styling for cycle/results tables.
+ *
+ * Every rule is scoped under `.p-datatable.ac-science-table` (both classes on
+ * the DataTable root) so it out-specifies the PrimeReact theme's
+ * `.p-datatable ...` rules and cannot bleed onto any other table. The palette
+ * is a fixed light "lab report" look (dark headers, cream cells) independent
+ * of the app theme — that IS the requested Bluehill appearance.
+ */
+
+.ac-science-table-wrap {
+    border: 1px solid #2b2b2b;
+    border-radius: 4px;
+    overflow: hidden;
+    background: #f7f4e9;
+}
+
+/* Dark title bar with a centered caption, like "Results 1". */
+.ac-science-table-title {
+    background: #2b2b2b;
+    color: #ffffff;
+    text-align: center;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    padding: 0.4rem 0.75rem;
+    font-size: 0.95rem;
+}
+
+/* Horizontal scroll for wide results rows without pushing the page sideways. */
+.ac-science-table-scroll {
+    overflow-x: auto;
+}
+
+/* ---- Column header band -------------------------------------------------- */
+.p-datatable.ac-science-table .p-datatable-thead > tr > th {
+    background: #3d3d3d;
+    color: #ffffff;
+    text-align: center;
+    border: 1px solid #2b2b2b;
+    border-top: none;
+    padding: 0.35rem 0.6rem;
+    font-weight: 600;
+    vertical-align: middle;
+}
+.p-datatable.ac-science-table .p-datatable-thead > tr > th .p-column-header-content {
+    justify-content: center;
+}
+
+.ac-sci-th {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    line-height: 1.15;
+}
+.ac-sci-th-unit {
+    font-weight: 400;
+    font-size: 0.8em;
+    opacity: 0.85;
+}
+
+/* ---- Data cells: cream, dark text, thin gridlines, tabular figures ------- */
+.p-datatable.ac-science-table .p-datatable-tbody > tr {
+    background: #f7f4e9;
+    color: #1a1a1a;
+}
+.p-datatable.ac-science-table .p-datatable-tbody > tr > td {
+    background: #f7f4e9;
+    color: #1a1a1a;
+    text-align: center;
+    border: 1px solid #d9d2b8;
+    padding: 0.3rem 0.6rem;
+    font-variant-numeric: tabular-nums;
+}
+/* Faint zebra banding keeps long cycle lists readable on the cream base. */
+.p-datatable.ac-science-table .p-datatable-tbody > tr:nth-child(even) > td {
+    background: #efe9d4;
+}
+
+/* ---- Row-index column: dark, matching the header band -------------------- */
+.p-datatable.ac-science-table .p-datatable-thead > tr > th.ac-sci-index,
+.p-datatable.ac-science-table .p-datatable-tbody > tr > td.ac-sci-index {
+    background: #3d3d3d;
+    color: #ffffff;
+    font-weight: 600;
+    text-align: center;
+    border: 1px solid #2b2b2b;
+}