@adcops/autocore-react 3.3.87 → 3.3.90

package/src/components/tis/TestSetupForm.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext, useMemo, useRef } from 'react';
+import React, { useState, useEffect, useContext, useMemo } from 'react';
 import { Button } from 'primereact/button';
 import { InputText } from 'primereact/inputtext';
 import { Dropdown } from 'primereact/dropdown';
@@ -11,6 +11,7 @@ import { TextInput } from '../TextInput';
 import { useTis } from './TisProvider';
 import { useAmsAssets, useAmsRoles, type AmsAssetEntry } from '../ams/AmsProvider';
 import { TestMethodDialog } from './TestMethodDialog';
+import { ConfigurationDialog, configLabelOf } from './ConfigurationDialog';
 
 /**
  * One asset_ref declared on a test method. We only consume the subset
@@ -59,6 +60,19 @@ export interface TestFieldDef {
      *  Cycle and results values are scaled by the corresponding paths
      *  in TestDataView; the server scales CSV exports too. */
     scale?: number;
+    /** Optional fixed set of choices. When present, the field renders
+     *  as a dropdown and the operator must pick one of the declared
+     *  values rather than typing freely. Each entry is either a bare
+     *  scalar (label === value) or an explicit `{ label, value }` pair
+     *  when the displayed text should differ from the stored value.
+     *  Works with any `type`; like `default`, values are authored in
+     *  display units when `scale` is set. */
+    options?: Array<
+        | string
+        | number
+        | boolean
+        | { label?: string; value: string | number | boolean }
+    >;
 }
 
 export interface TestMethod {
@@ -90,6 +104,33 @@ export interface TestMethod {
      *  as `analysis` — the form ignores them; the type just has to
      *  accept them so generated schemas typecheck. */
     views?: Record<string, any>;
+    /**
+     * Optional named configurations for this method. When one or more
+     * are declared, the form renders a Configuration selector beneath
+     * the Test Method picker. Selecting (or accepting) a configuration
+     * writes its `defaults` into the matching config_fields. Each
+     * configuration only needs to declare the fields whose value is
+     * specific to it — unlisted fields keep the method's base default.
+     */
+    configurations?: TestConfiguration[];
+}
+
+/**
+ * One named, ready-to-use set of config_field overrides for a method —
+ * e.g. translational_traction's "Plaque" vs "Shoe". `defaults` is a
+ * sparse map of `config_field.name → value`; values are authored in
+ * display units (the form converts via the field's `scale` before
+ * writing to stagedConfig / GM, same convention as `TestFieldDef.default`).
+ */
+export interface TestConfiguration {
+    /** Canonical key — unique within the method. */
+    name: string;
+    /** Pretty label shown in the Configuration picker. Falls back to `name`. */
+    label?: string;
+    /** Long-form guidance shown beside the dropdown in the picker dialog. */
+    description?: string;
+    /** Sparse `config_field.name → value` overrides applied on selection. */
+    defaults?: Record<string, any>;
 }
 
 /**
@@ -145,6 +186,20 @@ const displayToRaw = (display: any, scale: number | undefined): any => {
 const hasDescription = (f: TestFieldDef): boolean =>
     typeof f.description === 'string' && f.description.length > 0;
 
+/**
+ * Normalise a field's `options` (bare scalars and/or `{label, value}`
+ * pairs) into the `{ label, value }[]` shape PrimeReact's Dropdown
+ * wants. Bare scalars use their stringified form as the label.
+ */
+const normalizeOptions = (
+    opts: TestFieldDef['options'],
+): { label: string; value: string | number | boolean }[] =>
+    (opts ?? []).map((o) =>
+        o !== null && typeof o === 'object'
+            ? { label: String(o.label ?? o.value), value: o.value }
+            : { label: String(o), value: o },
+    );
+
 const methodLabelOf = (methodId: string, schema: TestMethod | undefined): string =>
     (schema?.label && schema.label.length > 0) ? schema.label : methodId;
 
@@ -240,6 +295,28 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
 
     const schema = schemaOverride ?? (methodId ? tis.schemas[methodId] : undefined);
 
+    // Write one configuration's sparse `defaults` overrides into a config
+    // object in place (returns the same object for chaining). Mirrors the
+    // base-default seeding below: values are authored in display units, so
+    // we convert to raw before storing; source-bound fields are also
+    // pushed to GM so the control program sees them. Used both by the
+    // auto-apply-first effect and by the picker dialog's accept handler.
+    const applyConfigOverridesInto = (cfg: TestConfiguration, target: any): any => {
+        for (const [fieldName, val] of Object.entries(cfg.defaults ?? {})) {
+            if (fieldName === 'sample_id') continue;
+            const field = schema?.config_fields.find((f: TestFieldDef) => f.name === fieldName);
+            const rawVal = displayToRaw(val, field?.scale);
+            target[fieldName] = rawVal;
+            if (field?.source) {
+                void Promise.resolve()
+                    .then(() => write(field.source!, rawVal))
+                    .catch(e => console.error(
+                        `[TestSetupForm] Failed to apply configuration override for ${fieldName}:`, e));
+            }
+        }
+        return target;
+    };
+
     useEffect(() => {
         if (tis.selection.methodId !== methodId && methodId) {
             tis.setSelection({ methodId });
@@ -274,6 +351,19 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
 
     const [isValid, setIsValid] = useState(false);
     const [methodPickerOpen, setMethodPickerOpen] = useState(false);
+    const [configPickerOpen, setConfigPickerOpen] = useState(false);
+
+    const configurations = (schema?.configurations ?? []) as TestConfiguration[];
+    const selectedConfig = configurations.find(c => c.name === tis.configurationName);
+
+    // Operator accepted a configuration in the picker dialog — write its
+    // overrides into the fields and remember the selection.
+    const handleConfigurationSelected = (configName: string) => {
+        const cfg = configurations.find(c => c.name === configName);
+        if (!cfg) return;
+        setConfig((prev: any) => applyConfigOverridesInto(cfg, { ...prev }));
+        tis.setConfigurationName(configName);
+    };
 
     // Single shared "info" dialog used by:
     //   - the Test Setup status button (shows what's wrong, including
@@ -288,14 +378,23 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
     // Apply schema-declared defaults when the operator picks a method.
     // Source-bound fields write the default to GM (the control program
     // is the consumer of record); non-source fields land directly in
-    // stagedConfig. We track the last method we seeded so subsequent
-    // re-renders don't clobber operator edits — only an actual method
-    // change re-applies the defaults.
-    const defaultsAppliedFor = useRef<string>('');
+    // stagedConfig. The "already seeded" marker lives on the provider
+    // (tis.defaultsAppliedForMethod), not in a local ref, so it
+    // survives this form unmounting when the operator switches tabs —
+    // otherwise defaults would re-apply on every Test-tab return and
+    // clobber the operator's edits. Only an actual method change (or
+    // clearStagedConfig() after start_test) re-applies the defaults.
     useEffect(() => {
         if (!schema || !methodId) return;
-        if (defaultsAppliedFor.current === methodId) return;
-        defaultsAppliedFor.current = methodId;
+        if (tis.defaultsAppliedForMethod === methodId) return;
+        tis.markDefaultsAppliedForMethod(methodId);
+
+        // Auto-apply the method's first configuration (if any) on top of
+        // the base defaults. '' when the method declares none, which also
+        // clears any stale selection carried over from a previous method.
+        const firstConfig = (schema.configurations && schema.configurations.length > 0)
+            ? schema.configurations[0] as TestConfiguration
+            : undefined;
 
         setConfig((prev: any) => {
             let next = prev;
@@ -321,9 +420,17 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
                             `[TestSetupForm] Failed to seed default for ${field.name}:`, e));
                 }
             }
+            // Configuration overrides win over base defaults for the
+            // fields they name (e.g. Plaque's z_start_position).
+            if (firstConfig) {
+                if (next === prev) next = { ...prev };
+                next = applyConfigOverridesInto(firstConfig, next);
+            }
             return next;
         });
-    }, [schema, methodId, write]);
+
+        tis.setConfigurationName(firstConfig ? firstConfig.name : '');
+    }, [schema, methodId, write, tis.defaultsAppliedForMethod, tis.markDefaultsAppliedForMethod, tis.setConfigurationName]);
 
     // Seed and live-update config_fields that declare a `source`.
     useEffect(() => {
@@ -451,7 +558,14 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
         if (field.name === 'sample_id') return null;
         const valid = isFieldValid(field);
         const assetType = assetTypeForField(field);
-        const isNum = !assetType && field.type !== 'string' && field.type !== 'bool';
+        // A schema-declared `options` list turns the field into a
+        // dropdown (skipped when an asset_ref already claims the field
+        // — that picker is sourced from AMS, not the static list).
+        const dropdownOptions = !assetType && Array.isArray(field.options) && field.options.length > 0
+            ? normalizeOptions(field.options)
+            : null;
+        const isNum = !assetType && !dropdownOptions
+            && field.type !== 'string' && field.type !== 'bool';
         return (
             <React.Fragment key={field.name}>
                 <span className="ac-form-label">{labelOf(field)}</span>
@@ -462,6 +576,15 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
                         onChange={(val) => handleFieldChange(field, val)}
                         invalid={!valid}
                     />
+                ) : dropdownOptions ? (
+                    <Dropdown
+                        value={config[field.name] ?? null}
+                        options={dropdownOptions}
+                        onChange={(e) => handleFieldChange(field, e.value)}
+                        placeholder={`Select ${field.label ?? field.name}…`}
+                        className={!valid ? 'p-invalid' : ''}
+                        showClear={!field.required}
+                    />
                 ) : isNum ? (
                     <ValueInput
                         label={undefined}
@@ -664,7 +787,7 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
                             tabIndex={-1}
                         />
                         <Button
-                            icon="pi pi-pencil"
+                            icon="pi pi-folder"
                             type="button"
                             onClick={() => setMethodPickerOpen(true)}
                             tooltip={methodIds.length > 1
@@ -680,6 +803,32 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
                 </>
             )}
 
+            {configurations.length > 0 && (
+                <>
+                    <span className="ac-form-label">Configuration</span>
+                    <div className="p-inputgroup" style={{ flex: 1 }}>
+                        <InputText
+                            value={selectedConfig ? configLabelOf(selectedConfig) : ''}
+                            placeholder="No configuration selected"
+                            readOnly
+                            style={{ flex: 1 }}
+                            tabIndex={-1}
+                        />
+                        <Button
+                            icon="pi pi-folder"
+                            type="button"
+                            onClick={() => setConfigPickerOpen(true)}
+                            tooltip="Change configuration"
+                            tooltipOptions={{ position: 'top' }}
+                        />
+                    </div>
+                    <span aria-hidden="true" />
+                    <span style={{ color: selectedConfig ? 'var(--green-500)' : 'var(--text-secondary-color)', display: 'flex', alignItems: 'center' }}>
+                        <i className={selectedConfig ? 'pi pi-check' : 'pi pi-minus'} />
+                    </span>
+                </>
+            )}
+
             <h3 className="ac-form-section" style={{ marginTop: '1rem' }}>Test Configuration</h3>
             {schema.config_fields.map(renderConfigField)}
 
@@ -690,6 +839,14 @@ export const TestSetupForm: React.FC<TestSetupFormProps> = ({
                 onSelected={(picked) => setMethodIdLocal(picked)}
             />
 
+            <ConfigurationDialog
+                visible={configPickerOpen}
+                onHide={() => setConfigPickerOpen(false)}
+                configurations={configurations}
+                currentConfigName={tis.configurationName}
+                onSelected={handleConfigurationSelected}
+            />
+
             {/* Shared info dialog. Driven by the Test Setup status
                 button (validation + server errors) and by per-field
                 info buttons (replaces the old hover Tooltip). One

package/src/components/tis/TisProvider.tsx

@@ -181,6 +181,33 @@ export interface TisContextValue {
      *  method selection or after a run completes. */
     clearStagedConfig: () => void;
 
+    /** methodId whose schema defaults have already been seeded into
+     *  `stagedConfig` (and written to GM for source-bound fields) for
+     *  the current session. `<TestSetupForm>` gates its one-shot
+     *  "apply defaults" effect on this value so it only fires on an
+     *  actual method change — not on form remount when the operator
+     *  switches tabs. Empty string means "no method seeded yet."
+     *  Reset to `''` by `clearStagedConfig()` so the next staged test
+     *  re-seeds correctly. */
+    defaultsAppliedForMethod: string;
+    /** Mark the given methodId as having been seeded. The form calls
+     *  this immediately after writing the defaults, so subsequent
+     *  remounts skip re-application. */
+    markDefaultsAppliedForMethod: (methodId: string) => void;
+
+    /** `name` of the method configuration the operator currently has
+     *  selected (see `TestMethod.configurations`). Empty string when the
+     *  active method declares no configurations, or none is chosen yet.
+     *  Held on the provider — like `stagedConfig` — so the selection
+     *  survives `<TestSetupForm>` remounting on a tab switch. HMI-only:
+     *  it scopes which override set is shown; the override *values* it
+     *  applies are what actually get recorded. */
+    configurationName: string;
+    /** Set the selected configuration name. The form calls this when the
+     *  seeding effect auto-applies the first configuration and when the
+     *  operator accepts a different one in the picker dialog. */
+    setConfigurationName: (name: string) => void;
+
     /** Fetch the run list for a (project, method?) pair. Method may be
      *  omitted to aggregate runs across every method in the project —
      *  the History tab uses this. */
@@ -224,6 +251,10 @@ const TisContext = createContext<TisContextValue>({
     stagedConfig: {},
     setStagedConfig: () => {},
     clearStagedConfig: () => {},
+    defaultsAppliedForMethod: '',
+    markDefaultsAppliedForMethod: () => {},
+    configurationName: '',
+    setConfigurationName: () => {},
     fetchRuns: async () => [],
     fetchRun: async () => null,
     runCache: {},
@@ -646,8 +677,26 @@ export const TisProvider: React.FC<TisProviderProps> = ({ children, defaultMetho
     const setStagedConfig = useCallback((patch: Record<string, any>) => {
         setStagedConfigState(prev => ({ ...prev, ...patch }));
     }, []);
+    // Tracks which methodId's schema defaults have been seeded into
+    // stagedConfig + GM during this session. Owned by the provider (not
+    // by <TestSetupForm>) so the marker survives the form unmounting
+    // when the operator switches tabs — otherwise the form's seed
+    // effect re-fires on every remount and clobbers operator edits.
+    const [defaultsAppliedForMethod, setDefaultsAppliedForMethod] = useState<string>('');
+    const markDefaultsAppliedForMethod = useCallback((methodId: string) => {
+        setDefaultsAppliedForMethod(methodId);
+    }, []);
+    // Selected method configuration (TestMethod.configurations). Lives
+    // alongside stagedConfig so it survives a form remount; reset on a
+    // fresh stage so the next test re-applies the method's first config.
+    const [configurationName, setConfigurationName] = useState<string>('');
     const clearStagedConfig = useCallback(() => {
         setStagedConfigState({});
+        // Re-seed defaults on the next stage. Without this, the form
+        // would render empty after start_test (config cleared) because
+        // the seed gate would still consider the method "applied."
+        setDefaultsAppliedForMethod('');
+        setConfigurationName('');
     }, []);
 
     const value: TisContextValue = useMemo(() => ({
@@ -656,6 +705,8 @@ export const TisProvider: React.FC<TisProviderProps> = ({ children, defaultMetho
         existingProjects, projectKnown, refreshProjects, markProjectJustCreated,
         projectFields, projectFieldsLoaded, loadProjectFields, setProjectFields,
         stagedConfig, setStagedConfig, clearStagedConfig,
+        defaultsAppliedForMethod, markDefaultsAppliedForMethod,
+        configurationName, setConfigurationName,
         fetchRuns, fetchRun, runCache,
     }), [
         schemas, projectAssetRefs, defaultMethodId, schemasLoaded,
@@ -663,6 +714,8 @@ export const TisProvider: React.FC<TisProviderProps> = ({ children, defaultMetho
         existingProjects, projectKnown, refreshProjects, markProjectJustCreated,
         projectFields, projectFieldsLoaded, loadProjectFields, setProjectFields,
         stagedConfig, setStagedConfig, clearStagedConfig,
+        defaultsAppliedForMethod, markDefaultsAppliedForMethod,
+        configurationName, setConfigurationName,
         fetchRuns, fetchRun, runCache,
     ]);
 

package/src/components/tis-editor/TisConfigEditor.css

@@ -119,3 +119,23 @@
     gap: 0.25rem;
     margin-bottom: 0.25rem;
 }
+
+/* Portrait displays (e.g. wall-mounted HMIs rotated to portrait) don't
+   have the horizontal room for a fixed 320px selection pane beside the
+   content pane — the content pane gets squeezed and cut off. Stack the
+   two panes instead: the method-selection list becomes a capped,
+   scrollable band on top, and the editor takes the remaining height. */
+@media (orientation: portrait) {
+    .tis-editor__body {
+        flex-direction: column;
+    }
+
+    .tis-editor__sidebar {
+        /* Cap the list at ~35% of the body height (it scrolls internally
+           via the DataTable's scrollHeight="flex"); the editor below gets
+           the rest. Drop the fixed 320px width — full width when stacked. */
+        flex: 0 1 35%;
+        border-right: none;
+        border-bottom: 1px solid var(--surface-d, #e2e8f0);
+    }
+}

package/src/components/tis-editor/editor/ConfigurationsEditor.tsx

@@ -0,0 +1,242 @@
+/**
+ * ConfigurationsEditor — manages a method's named `configurations`
+ * (e.g. translational_traction's "Plaque" vs "Shoe"). Each configuration
+ * carries a sparse set of config_field overrides; only the fields whose
+ * value is specific to that configuration need to be listed.
+ *
+ * Mirrors <AssetRefsEditor>: a DataTable of the declared configurations
+ * plus an add/edit Dialog. The override sub-editor is a small key/value
+ * table whose key is a dropdown of the method's own config_fields, so the
+ * author can only target fields that actually exist, and values are
+ * coerced to the field's declared type on save.
+ */
+
+import { useMemo, useState } from 'react';
+import { Dialog } from 'primereact/dialog';
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+import { InputTextarea } from 'primereact/inputtextarea';
+import { Dropdown } from 'primereact/dropdown';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { FormSection } from '../../forms/FormSection';
+import { FormRow } from '../../forms/FormRow';
+import type { TestConfiguration, TestField, TestMethod } from '../types';
+
+export interface ConfigurationsEditorProps {
+    method: TestMethod;
+    onChange: (next: TestMethod) => void;
+}
+
+const NUMERIC_TYPES = new Set(['i32', 'i64', 'u32', 'u64', 'f32', 'f64']);
+
+/** Coerce a raw text entry to the declared field type. Non-numeric text
+ *  for a numeric field is left as the string so validation can flag it. */
+const coerceValue = (field: TestField | undefined, raw: string): unknown => {
+    const t = field?.type ?? 'string';
+    if (t === 'bool') return raw === 'true' || raw === '1';
+    if (NUMERIC_TYPES.has(t)) {
+        const n = Number(raw);
+        return raw.trim() !== '' && Number.isFinite(n) ? n : raw;
+    }
+    return raw;
+};
+
+interface OverrideRow { field: string; value: string }
+
+const blank = (): TestConfiguration => ({ name: '', defaults: {} });
+
+const toRows = (defaults: Record<string, unknown> | undefined): OverrideRow[] =>
+    Object.entries(defaults ?? {}).map(([field, value]) => ({ field, value: String(value) }));
+
+export const ConfigurationsEditor: React.FC<ConfigurationsEditorProps> = ({ method, onChange }) => {
+    const configs: TestConfiguration[] = (method.configurations as TestConfiguration[]) ?? [];
+    const configFields: TestField[] = (method.config_fields as TestField[]) ?? [];
+
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [editingIdx, setEditingIdx] = useState<number | null>(null);
+    const [draft, setDraft] = useState<TestConfiguration>(blank());
+    const [rows, setRows] = useState<OverrideRow[]>([]);
+    const [error, setError] = useState<string | null>(null);
+
+    // Fields the author can override (skip the implicit sample_id).
+    const fieldOptions = useMemo(
+        () => configFields
+            .filter(f => f.name && f.name !== 'sample_id')
+            .map(f => ({ label: f.units ? `${f.name} [${f.units}]` : f.name, value: f.name })),
+        [configFields],
+    );
+    const fieldByName = useMemo(() => {
+        const m = new Map<string, TestField>();
+        configFields.forEach(f => m.set(f.name, f));
+        return m;
+    }, [configFields]);
+
+    const openNew = () => {
+        setEditingIdx(null);
+        setDraft(blank());
+        setRows([]);
+        setError(null);
+        setDialogOpen(true);
+    };
+    const openEdit = (i: number) => {
+        setEditingIdx(i);
+        setDraft({ ...configs[i] });
+        setRows(toRows(configs[i].defaults));
+        setError(null);
+        setDialogOpen(true);
+    };
+
+    const validate = (c: TestConfiguration): string | null => {
+        if (!c.name.trim()) return 'Name is required.';
+        if (configs.some((o, i) => o.name === c.name && i !== editingIdx)) {
+            return `A configuration named "${c.name}" already exists.`;
+        }
+        const seen = new Set<string>();
+        for (const r of rows) {
+            if (!r.field) return 'Every override row must pick a field.';
+            if (seen.has(r.field)) return `Field "${r.field}" is overridden more than once.`;
+            seen.add(r.field);
+            if (!fieldByName.has(r.field)) return `"${r.field}" is not a config_field on this method.`;
+        }
+        return null;
+    };
+
+    const handleSave = () => {
+        const err = validate(draft);
+        if (err) { setError(err); return; }
+        const defaults: Record<string, unknown> = {};
+        for (const r of rows) {
+            defaults[r.field] = coerceValue(fieldByName.get(r.field), r.value);
+        }
+        const saved: TestConfiguration = {
+            name: draft.name.trim(),
+            ...(draft.label?.trim() ? { label: draft.label.trim() } : {}),
+            ...(draft.description?.trim() ? { description: draft.description.trim() } : {}),
+            defaults,
+        };
+        const next = [...configs];
+        if (editingIdx === null) next.push(saved);
+        else next[editingIdx] = saved;
+        onChange({ ...method, configurations: next });
+        setDialogOpen(false);
+    };
+
+    const handleRemove = (i: number) => {
+        if (!window.confirm(`Remove configuration "${configs[i].name}"?`)) return;
+        onChange({ ...method, configurations: configs.filter((_, idx) => idx !== i) });
+    };
+
+    const addRow = () => setRows([...rows, { field: '', value: '' }]);
+    const updateRow = (i: number, patch: Partial<OverrideRow>) =>
+        setRows(rows.map((r, idx) => (idx === i ? { ...r, ...patch } : r)));
+    const removeRow = (i: number) => setRows(rows.filter((_, idx) => idx !== i));
+
+    const overridesSummary = (c: TestConfiguration): string => {
+        const entries = Object.entries(c.defaults ?? {});
+        if (entries.length === 0) return '—';
+        return entries.map(([k, v]) => `${k}=${String(v)}`).join(', ');
+    };
+
+    const rowActions = (_r: TestConfiguration, opts: { rowIndex: number }) => (
+        <div style={{ display: 'flex', gap: '0.25rem' }}>
+            <Button icon="pi pi-pencil" className="p-button-text p-button-sm" onClick={() => openEdit(opts.rowIndex)} />
+            <Button icon="pi pi-trash" className="p-button-text p-button-danger p-button-sm" onClick={() => handleRemove(opts.rowIndex)} />
+        </div>
+    );
+
+    return (
+        <>
+            <FormSection
+                title="Configurations"
+                description="Named, ready-to-use override sets (e.g. Plaque vs Shoe). Selecting one in Test Setup writes its values into the matching config fields; the method's first configuration is applied automatically."
+                actions={<Button label="Add configuration" icon="pi pi-plus" size="small" onClick={openNew} />}
+            >
+                <DataTable value={configs} dataKey="name" emptyMessage="No configurations declared.">
+                    <Column field="name" header="Name" style={{ width: '10rem' }} />
+                    <Column header="Label" body={(c: TestConfiguration) => c.label ?? '—'} style={{ width: '10rem' }} />
+                    <Column header="Overrides" body={overridesSummary} />
+                    <Column header="" body={rowActions} style={{ width: '6rem' }} />
+                </DataTable>
+            </FormSection>
+
+            <Dialog
+                header={editingIdx === null ? 'New configuration' : `Edit configuration: ${configs[editingIdx ?? 0]?.name}`}
+                visible={dialogOpen}
+                onHide={() => setDialogOpen(false)}
+                style={{ width: '44rem' }}
+            >
+                {error && <div style={{ color: '#dc2626', marginBottom: '0.5rem' }}>{error}</div>}
+                <FormRow label="Name" required hint="Canonical key — unique within the method.">
+                    <InputText value={draft.name} onChange={(e) => setDraft({ ...draft, name: e.target.value })} placeholder="e.g. plaque" />
+                </FormRow>
+                <FormRow label="Label" hint="Shown in the Configuration picker. Falls back to Name.">
+                    <InputText value={draft.label ?? ''} onChange={(e) => setDraft({ ...draft, label: e.target.value || undefined })} placeholder="e.g. Plaque" />
+                </FormRow>
+                <FormRow label="Description" hint="Shown beside the dropdown in the picker dialog.">
+                    <InputTextarea rows={2} value={draft.description ?? ''} onChange={(e) => setDraft({ ...draft, description: e.target.value || undefined })} />
+                </FormRow>
+
+                <FormSection
+                    title="Field overrides"
+                    description="Only list fields whose value is specific to this configuration. Values are authored in display units, same as a field's default."
+                    actions={
+                        <Button
+                            label="Add override"
+                            icon="pi pi-plus"
+                            size="small"
+                            onClick={addRow}
+                            disabled={fieldOptions.length === 0}
+                        />
+                    }
+                >
+                    {fieldOptions.length === 0 ? (
+                        <small style={{ color: 'var(--text-secondary-color)' }}>
+                            This method has no config_fields to override yet — add some on the Fields tab first.
+                        </small>
+                    ) : rows.length === 0 ? (
+                        <small style={{ color: 'var(--text-secondary-color)' }}>No overrides — this configuration uses every field's base default.</small>
+                    ) : (
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+                            {rows.map((r, i) => {
+                                const f = fieldByName.get(r.field);
+                                return (
+                                    <div key={i} style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+                                        <Dropdown
+                                            value={r.field || null}
+                                            options={fieldOptions}
+                                            onChange={(e) => updateRow(i, { field: e.value })}
+                                            placeholder="Field"
+                                            style={{ flex: '0 0 16rem' }}
+                                        />
+                                        {f?.type === 'bool' ? (
+                                            <Dropdown
+                                                value={r.value === 'true' || r.value === '1' ? 'true' : 'false'}
+                                                options={[{ label: 'true', value: 'true' }, { label: 'false', value: 'false' }]}
+                                                onChange={(e) => updateRow(i, { value: e.value })}
+                                                style={{ flex: 1 }}
+                                            />
+                                        ) : (
+                                            <InputText
+                                                value={r.value}
+                                                onChange={(e) => updateRow(i, { value: e.target.value })}
+                                                placeholder={f?.type && NUMERIC_TYPES.has(f.type) ? 'number' : 'value'}
+                                                style={{ flex: 1 }}
+                                            />
+                                        )}
+                                        <Button icon="pi pi-trash" className="p-button-text p-button-danger p-button-sm" onClick={() => removeRow(i)} />
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    )}
+                </FormSection>
+
+                <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '0.5rem', marginTop: '1rem' }}>
+                    <Button label="Cancel" className="p-button-text" onClick={() => setDialogOpen(false)} />
+                    <Button label="Save" onClick={handleSave} />
+                </div>
+            </Dialog>
+        </>
+    );
+};

package/src/components/tis-editor/editor/MethodFormEditor.tsx

@@ -13,6 +13,7 @@ import { Button } from 'primereact/button';
 import { CodeEditor } from '../../CodeEditor';
 import { IdentitySection } from './IdentitySection';
 import { FieldArrayEditor } from './FieldArrayEditor';
+import { ConfigurationsEditor } from './ConfigurationsEditor';
 import { ViewsEditor } from './ViewsEditor';
 import { RawDataEditor } from './RawDataEditor';
 import { AssetRefsEditor } from './AssetRefsEditor';
@@ -140,6 +141,9 @@ export const MethodFormEditor: React.FC<MethodFormEditorProps> = ({
                         <FieldArrayEditor arrayKey="cycle_fields"   method={draft} onChange={handleFormChange} />
                         <FieldArrayEditor arrayKey="results_fields" method={draft} onChange={handleFormChange} />
                     </TabPanel>
+                    <TabPanel header="Configurations">
+                        <ConfigurationsEditor method={draft} onChange={handleFormChange} />
+                    </TabPanel>
                     <TabPanel header="Views">
                         <ViewsEditor method={draft} onChange={handleFormChange} />
                     </TabPanel>