= ({
+ target,
+ usl,
+ lsl,
+ cpkTarget,
+ disabled,
+ idPrefix,
+ ariaPrefix,
+ onChange,
+}) => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+interface StepCardProps {
+ step: ProcessMap['nodes'][number];
+ tributaries: ProcessMapTributary[];
+ subgroupAxes: string[];
+ availableColumns: string[];
+ gaps: Gap[];
+ disabled?: boolean;
+ /** Per-step CTQ specs (USL/LSL/target/cpkTarget). Only rendered when ctqColumn is set. */
+ ctqSpecs?: SpecLimits;
+ onRename: (name: string) => void;
+ onCtqChange: (column: string | undefined) => void;
+ onRemove: () => void;
+ onAddTributary: (column: string) => void;
+ onRemoveTributary: (tributaryId: string) => void;
+ onToggleSubgroupAxis: (tributaryId: string) => void;
+ /** Called with the full new SpecLimits shape when any per-step spec input changes. */
+ onCtqSpecsChange?: (next: SpecLimits) => void;
+}
+
+const StepCard: React.FC = ({
+ step,
+ tributaries,
+ subgroupAxes,
+ availableColumns,
+ gaps,
+ disabled,
+ ctqSpecs,
+ onRename,
+ onCtqChange,
+ onRemove,
+ onAddTributary,
+ onRemoveTributary,
+ onToggleSubgroupAxis,
+ onCtqSpecsChange,
+}) => {
+ const [newTribCol, setNewTribCol] = React.useState('');
+ const availableForTrib = availableColumns.filter(
+ c => !tributaries.some(t => t.column === c) && c !== step.ctqColumn
+ );
+
+ return (
+
+
+ onRename(e.target.value)}
+ disabled={disabled}
+ placeholder="Step name"
+ aria-label={`Step ${step.order + 1} name`}
+ className="flex-1 text-sm font-medium bg-transparent border-none focus:outline-none focus:ring-1 focus:ring-edge-strong rounded px-1 disabled:text-content-secondary"
+ data-testid={`process-map-step-name-${step.id}`}
+ />
+ {!disabled && (
+
+ )}
+
+
+
+
+ {step.ctqColumn !== undefined && onCtqSpecsChange && (
+
+ onCtqSpecsChange({ ...next, characteristicType: ctqSpecs?.characteristicType })
+ }
+ />
+ )}
+
+ {tributaries.length > 0 && (
+
+ )}
+
+ {!disabled && availableForTrib.length > 0 && (
+
+
+
+
+ )}
+
+ {gaps.length > 0 && (
+
+ {gaps.map((g, i) => (
+ -
+ ⚠ {g.message}
+
+ ))}
+
+ )}
+
+
Customer outcome (CTS)
+
+ {onSpecsChange && (
+
+ onSpecsChange({
+ target: next.target,
+ usl: next.usl,
+ lsl: next.lsl,
+ cpkTarget: next.cpkTarget,
+ })
+ }
+ />
+ )}
+ Missing from your map ({gaps.length})
+ {required.length > 0 && (
+
+ {required.map((g, i) => (
+ -
+ ● required · {g.message}
+
+ ))}
+
+ )}
+ {recommended.length > 0 && (
+
+ {recommended.map((g, i) => (
+ -
+ ○ recommended · {g.message}
+
+ ))}
+
+ )}
+
+ );
+};
+
+// ────────────────────────────────────────────────────────────────────────────
+// Main component
+// ────────────────────────────────────────────────────────────────────────────
+
+export const ProcessMapBase: React.FC = ({
+ map,
+ availableColumns,
+ onChange,
+ gaps,
+ disabled,
+ target,
+ usl,
+ lsl,
+ cpkTarget,
+ onSpecsChange,
+ stepSpecs,
+ onStepSpecsChange,
+ showGaps = true,
+}) => {
+ const sortedSteps = React.useMemo(
+ () => [...map.nodes].sort((a, b) => a.order - b.order),
+ [map.nodes]
+ );
+
+ const update = (next: ProcessMap) => onChange(bumpUpdated(next));
+
+ const addStep = () => {
+ const newOrder = sortedSteps.length;
+ update({
+ ...map,
+ nodes: [...map.nodes, { id: uid('step'), name: '', order: newOrder }],
+ });
+ };
+
+ const renameStep = (stepId: string, name: string) => {
+ update({
+ ...map,
+ nodes: map.nodes.map(n => (n.id === stepId ? { ...n, name } : n)),
+ });
+ };
+
+ const setStepCtq = (stepId: string, ctqColumn: string | undefined) => {
+ update({
+ ...map,
+ nodes: map.nodes.map(n => (n.id === stepId ? { ...n, ctqColumn } : n)),
+ });
+ };
+
+ const removeStep = (stepId: string) => {
+ const remaining = map.nodes.filter(n => n.id !== stepId);
+ // Re-pack `order` so it stays 0..N-1 monotonic.
+ const reordered = [...remaining]
+ .sort((a, b) => a.order - b.order)
+ .map((n, i) => ({ ...n, order: i }));
+ update({
+ ...map,
+ nodes: reordered,
+ tributaries: map.tributaries.filter(t => t.stepId !== stepId),
+ hunches: (map.hunches ?? []).filter(h => h.stepId !== stepId),
+ });
+ };
+
+ const addTributary = (stepId: string, column: string) => {
+ const newT: ProcessMapTributary = { id: uid('trib'), stepId, column };
+ update({ ...map, tributaries: [...map.tributaries, newT] });
+ };
+
+ const removeTributary = (tributaryId: string) => {
+ update({
+ ...map,
+ tributaries: map.tributaries.filter(t => t.id !== tributaryId),
+ subgroupAxes: (map.subgroupAxes ?? []).filter(id => id !== tributaryId),
+ hunches: (map.hunches ?? []).filter(h => h.tributaryId !== tributaryId),
+ });
+ };
+
+ const toggleSubgroupAxis = (tributaryId: string) => {
+ const current = map.subgroupAxes ?? [];
+ const next = current.includes(tributaryId)
+ ? current.filter(id => id !== tributaryId)
+ : [...current, tributaryId];
+ update({ ...map, subgroupAxes: next });
+ };
+
+ const setCts = (ctsColumn: string | undefined) => {
+ update({ ...map, ctsColumn });
+ };
+
+ const addHunch = (text: string, pin: { stepId?: string; tributaryId?: string }) => {
+ const hunch: ProcessMapHunch = { id: uid('hunch'), text, ...pin };
+ update({ ...map, hunches: [...(map.hunches ?? []), hunch] });
+ };
+
+ const removeHunch = (hunchId: string) => {
+ update({
+ ...map,
+ hunches: (map.hunches ?? []).filter(h => h.id !== hunchId),
+ });
+ };
+
+ return (
+
+
+
Process Map
+ {!disabled && (
+
+ )}
+
+
+
+ {sortedSteps.map((step, i) => (
+
+ t.stepId === step.id)}
+ subgroupAxes={map.subgroupAxes ?? []}
+ availableColumns={availableColumns}
+ gaps={gapsForStep(gaps, step.id)}
+ disabled={disabled}
+ ctqSpecs={step.ctqColumn ? stepSpecs?.[step.ctqColumn] : undefined}
+ onRename={name => renameStep(step.id, name)}
+ onCtqChange={col => setStepCtq(step.id, col)}
+ onRemove={() => removeStep(step.id)}
+ onAddTributary={col => addTributary(step.id, col)}
+ onRemoveTributary={removeTributary}
+ onToggleSubgroupAxis={toggleSubgroupAxis}
+ onCtqSpecsChange={
+ onStepSpecsChange && step.ctqColumn
+ ? next => onStepSpecsChange(step.ctqColumn!, next)
+ : undefined
+ }
+ />
+ {i < sortedSteps.length - 1 && (
+
+ →
+
+ )}
+
+ ))}
+ {sortedSteps.length > 0 && (
+
+ →
+
+ )}
+
+
+
+
+
+ {showGaps &&
}
+
-
-
-
-
-
-
-
-
- );
-};
-
-interface StepCardProps {
- step: ProcessMap['nodes'][number];
- tributaries: ProcessMapTributary[];
- subgroupAxes: string[];
- availableColumns: string[];
- gaps: Gap[];
- disabled?: boolean;
- /** Per-step CTQ specs (USL/LSL/target/cpkTarget). Only rendered when ctqColumn is set. */
- ctqSpecs?: SpecLimits;
- onRename: (name: string) => void;
- onCtqChange: (column: string | undefined) => void;
- onRemove: () => void;
- onAddTributary: (column: string) => void;
- onRemoveTributary: (tributaryId: string) => void;
- onToggleSubgroupAxis: (tributaryId: string) => void;
- /** Called with the full new SpecLimits shape when any per-step spec input changes. */
- onCtqSpecsChange?: (next: SpecLimits) => void;
-}
-
-const StepCard: React.FC = ({
- step,
- tributaries,
- subgroupAxes,
- availableColumns,
- gaps,
- disabled,
- ctqSpecs,
- onRename,
- onCtqChange,
- onRemove,
- onAddTributary,
- onRemoveTributary,
- onToggleSubgroupAxis,
- onCtqSpecsChange,
-}) => {
- const [newTribCol, setNewTribCol] = React.useState('');
- const availableForTrib = availableColumns.filter(
- c => !tributaries.some(t => t.column === c) && c !== step.ctqColumn
- );
-
- return (
-
-
- onRename(e.target.value)}
- disabled={disabled}
- placeholder="Step name"
- aria-label={`Step ${step.order + 1} name`}
- className="flex-1 text-sm font-medium bg-transparent border-none focus:outline-none focus:ring-1 focus:ring-edge-strong rounded px-1 disabled:text-content-secondary"
- data-testid={`process-map-step-name-${step.id}`}
- />
- {!disabled && (
-
- )}
-
-
-
-
- {step.ctqColumn !== undefined && onCtqSpecsChange && (
-
- onCtqSpecsChange({ ...next, characteristicType: ctqSpecs?.characteristicType })
- }
- />
- )}
-
- {tributaries.length > 0 && (
-
- )}
-
- {!disabled && availableForTrib.length > 0 && (
-
-
-
-
- )}
-
- {gaps.length > 0 && (
-
- {gaps.map((g, i) => (
- -
- ⚠ {g.message}
-
- ))}
-
- )}
-
-
- Customer outcome (CTS)
-
-
- {onSpecsChange && (
-
- onSpecsChange({
- target: next.target,
- usl: next.usl,
- lsl: next.lsl,
- cpkTarget: next.cpkTarget,
- })
- }
- />
- )}
-
- Missing from your map ({gaps.length})
-
- {required.length > 0 && (
-
- {required.map((g, i) => (
- -
- ● required · {g.message}
-
- ))}
-
- )}
- {recommended.length > 0 && (
-
- {recommended.map((g, i) => (
- -
- ○ recommended · {g.message}
-
- ))}
-
- )}
-
- );
-};
-
-// ────────────────────────────────────────────────────────────────────────────
-// Main component
-// ────────────────────────────────────────────────────────────────────────────
-
-export const ProcessMapBase: React.FC = ({
- map,
- availableColumns,
- onChange,
- gaps,
- disabled,
- target,
- usl,
- lsl,
- cpkTarget,
- onSpecsChange,
- stepSpecs,
- onStepSpecsChange,
- showGaps = true,
-}) => {
- const sortedSteps = React.useMemo(
- () => [...map.nodes].sort((a, b) => a.order - b.order),
- [map.nodes]
- );
-
- const update = (next: ProcessMap) => onChange(bumpUpdated(next));
-
- const addStep = () => {
- const newOrder = sortedSteps.length;
- update({
- ...map,
- nodes: [...map.nodes, { id: uid('step'), name: '', order: newOrder }],
- });
- };
-
- const renameStep = (stepId: string, name: string) => {
- update({
- ...map,
- nodes: map.nodes.map(n => (n.id === stepId ? { ...n, name } : n)),
- });
- };
-
- const setStepCtq = (stepId: string, ctqColumn: string | undefined) => {
- update({
- ...map,
- nodes: map.nodes.map(n => (n.id === stepId ? { ...n, ctqColumn } : n)),
- });
- };
-
- const removeStep = (stepId: string) => {
- const remaining = map.nodes.filter(n => n.id !== stepId);
- // Re-pack `order` so it stays 0..N-1 monotonic.
- const reordered = [...remaining]
- .sort((a, b) => a.order - b.order)
- .map((n, i) => ({ ...n, order: i }));
- update({
- ...map,
- nodes: reordered,
- tributaries: map.tributaries.filter(t => t.stepId !== stepId),
- hunches: (map.hunches ?? []).filter(h => h.stepId !== stepId),
- });
- };
-
- const addTributary = (stepId: string, column: string) => {
- const newT: ProcessMapTributary = { id: uid('trib'), stepId, column };
- update({ ...map, tributaries: [...map.tributaries, newT] });
- };
-
- const removeTributary = (tributaryId: string) => {
- update({
- ...map,
- tributaries: map.tributaries.filter(t => t.id !== tributaryId),
- subgroupAxes: (map.subgroupAxes ?? []).filter(id => id !== tributaryId),
- hunches: (map.hunches ?? []).filter(h => h.tributaryId !== tributaryId),
- });
- };
-
- const toggleSubgroupAxis = (tributaryId: string) => {
- const current = map.subgroupAxes ?? [];
- const next = current.includes(tributaryId)
- ? current.filter(id => id !== tributaryId)
- : [...current, tributaryId];
- update({ ...map, subgroupAxes: next });
- };
-
- const setCts = (ctsColumn: string | undefined) => {
- update({ ...map, ctsColumn });
- };
-
- const addHunch = (text: string, pin: { stepId?: string; tributaryId?: string }) => {
- const hunch: ProcessMapHunch = { id: uid('hunch'), text, ...pin };
- update({ ...map, hunches: [...(map.hunches ?? []), hunch] });
- };
-
- const removeHunch = (hunchId: string) => {
- update({
- ...map,
- hunches: (map.hunches ?? []).filter(h => h.id !== hunchId),
- });
- };
-
- return (
-
-
-
Process Map
- {!disabled && (
-
- )}
-
-
-
- {sortedSteps.map((step, i) => (
-
- t.stepId === step.id)}
- subgroupAxes={map.subgroupAxes ?? []}
- availableColumns={availableColumns}
- gaps={gapsForStep(gaps, step.id)}
- disabled={disabled}
- ctqSpecs={step.ctqColumn ? stepSpecs?.[step.ctqColumn] : undefined}
- onRename={name => renameStep(step.id, name)}
- onCtqChange={col => setStepCtq(step.id, col)}
- onRemove={() => removeStep(step.id)}
- onAddTributary={col => addTributary(step.id, col)}
- onRemoveTributary={removeTributary}
- onToggleSubgroupAxis={toggleSubgroupAxis}
- onCtqSpecsChange={
- onStepSpecsChange && step.ctqColumn
- ? next => onStepSpecsChange(step.ctqColumn!, next)
- : undefined
- }
- />
- {i < sortedSteps.length - 1 && (
-
- →
-
- )}
-
- ))}
- {sortedSteps.length > 0 && (
-
- →
-
- )}
-
-
-
-
-
- {showGaps &&
}
-