dtoro/Socrates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MVP M5 (in-memory): bidirectional sync via ModelOp + applyOps + ModelStore

Browse Source 
Both canvases now share a canonical SysMLModel through React context.
Renames in the diagram inspector ripple to every chip in the narrative
referencing the same refId, and double-clicking a chip emits an update op
that re-renders the diagram block. Validation re-runs on every successful
apply. State is in-memory; M5.9 adds Postgres persistence.

apps/web/lib/sync (new)
- ops.ts: ModelOp alphabet (18 op kinds across block / property /
  association / constraint / requirement / relation, add/update/remove for
  each). tempId() helper + per-kind constructors.
- applyOps.ts: pure (model, ops) → { model, idMapping, errors, applied }
  reducer. Atomic per batch. Cascades on remove-block (drops incident
  associations + constraint applies-to + requirement satisfiers). tempId
  resolution rewrites to canonical ids on duplicate-id collision.
- ModelStore.tsx: React provider exposing { model, apply, issues,
  issuesByElement }. Validation memoized on every model change.

Editor refactor
- EditorShell wraps in ModelStoreProvider. Initial model derived from
  fixture (+ optional ?break= corruptions). Validation now lives in the
  store, not duplicated here.
- LeftRail consumes useModel(): Model section lists real blocks +
  constraints (sorted by kind), Requirements section lists real
  requirements with traced/untraced status from r.relations.

Diagram refactor (the tricky piece)
- React Flow now owns ephemeral state via useNodesState / useEdgesState.
  Positions, drag-in-progress, selection are all RF-internal.
- Model → RF: a useEffect runs on model change, applies targeted setNodes
  updates only for elements whose semantic data (label, kind, properties)
  changed. Object identity preserved for unchanged nodes — fixes the
  "re-render storm on drag" + RF measurement-cache loss.
- RF → Model: onNodesChange / onEdgesChange / onConnect / onDrop emit
  ops via useApply(). Constraint-applies edges decompose into
  updateConstraint ops. deleteKeyCode={[Backspace, Delete]}.
- onNodesChange now handles type:'remove' too (was missing — that's why
  selecting a block + Del removed only the edges, leaving the block).

Chip refactor
- ChipView resolves displayed label from useModel() via refId lookup
  (block / requirement / association / property). Double-click chip →
  inline rename input → emit update-{block,requirement,association} op.
  All other chips with the same refId update on the next render.
- Slash-menu inserted chips have refId=null and skip the rename
  affordance (until M6 wires real model element resolution).

Removed obsolete components/diagram-canvas/fixtureToFlow.ts; replaced
with modelToFlow.ts. Bumped CSS for the chip-rename input.
This commit is contained in:
authentik Default Admin
2026-04-29 00:42:18 +02:00
parent 2052a280b1
commit 384cbb4ae9
12 changed files with 1375 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/web/app/editor/[projectId]/page.tsx
View File

@@ -1,16 +1,10 @@
import { Suspense } from "react";
import { EditorShell } from "../../../components/editor/EditorShell";
import { aristotleFixture } from "../../../lib/fixtures/aristotle";
// M1: every projectId resolves to the Aristotle fixture.
// M4–M5 wire this to a real database lookup.
//
// Suspense boundary required because EditorShell uses useSearchParams (for
// the M4 ?break=... demo of validation rules).
// (EditorShell wraps itself in Suspense for useSearchParams; no boundary
// needed at this level.)
export default async function EditorPage(_props: { params: Promise<{ projectId: string }> }) {
return (
<Suspense fallback={null}>
<EditorShell data={aristotleFixture} />
</Suspense>
);
return <EditorShell data={aristotleFixture} />;
}

532
apps/web/components/diagram-canvas/DiagramCanvas.tsx
View File

@@ -1,11 +1,18 @@
// React Flow-backed diagram canvas (M3).
// - Custom block/actor/constraint/system nodes
// - Custom edges (association/composition/constraint)
// - Drag-create from the left palette
// - Click-edit via the right inspector
// - Drag handles between nodes to connect
// React Flow-backed diagram canvas (M5).
//
// State is in-memory for M3; M5 swaps it for the bidirectional sync engine.
// State separation:
// - SysMLModel → ModelStore (canonical, semantic). The narrative reads here too.
// - React Flow → owns positions, selection, drag-in-progress (UI ephemeral).
//
// Sync rules:
// - On model change from outside (chip rename, etc.), we apply targeted
// `setNodes` updates (label, kind, properties) WITHOUT touching positions.
// Newly-added blocks/constraints get added; removed ones get removed.
// - On user actions in RF (connect, drop-from-palette, node delete, edge
// delete, inspector edit), we emit ModelOps via useApply().
//
// This avoids the "re-derive nodes on every drag tick" trap that made
// dragging feel laggy in the first cut.
"use client";
@@ -17,12 +24,11 @@ import {
BackgroundVariant,
Controls,
MarkerType,
applyNodeChanges,
applyEdgeChanges,
addEdge,
useNodesState,
useEdgesState,
useReactFlow,
type Node,
type Edge,
type Node,
type NodeChange,
type EdgeChange,
type Connection,
@@ -32,15 +38,32 @@ import { BlockNode, type BlockNodeData } from "./nodes/BlockNode";
import { SysmlEdge, type SysmlEdgeData } from "./edges/SysmlEdge";
import { Palette } from "./Palette";
import { NodeInspector } from "./NodeInspector";
import { fixtureToFlow } from "./fixtureToFlow";
import type { Density } from "../socrates/SocratesDock";
import type { FixtureData, AssociationKind, BlockKind } from "../../lib/fixtures/aristotle";
import { useModel, useApply } from "../../lib/sync/ModelStore";
import {
addBlock as addBlockOp,
addConstraint as addConstraintOp,
removeBlock as removeBlockOp,
removeConstraint as removeConstraintOp,
removeAssociation as removeAssociationOp,
updateBlock as updateBlockOp,
updateConstraint as updateConstraintOp,
addAssociation as addAssociationOp,
addProperty as addPropertyOp,
updateProperty as updatePropertyOp,
removeProperty as removePropertyOp,
newProperty,
tempId,
type ModelOp,
} from "../../lib/sync/ops";
import type { ValidationIssue } from "../../lib/sysml/validate";
import type { Density } from "../socrates/SocratesDock";
import type { FixtureData, BlockKind } from "../../lib/fixtures/aristotle";
import type { Block, Property, PropertyType, SysMLModel } from "../../lib/sysml/model";
export type DiagramVariant = "softened" | "formal" | "graph";
interface DiagramCanvasProps {
data: FixtureData;
data?: FixtureData;
density?: Density;
variant?: DiagramVariant;
focusBlockId: string | null;
@@ -51,12 +74,11 @@ interface DiagramCanvasProps {
const nodeTypes = { sysmlBlock: BlockNode };
const edgeTypes = { sysml: SysmlEdge };
let nextNodeId = 1000;
let nextEdgeId = 1000;
function freshNodeId(): string { return `n${nextNodeId++}`; }
function freshEdgeId(): string { return `e${nextEdgeId++}`; }
const BOARD_W = 720;
const BOARD_H = 460;
function pickWorst(issues: ValidationIssue[]): "error" | "warning" | "soft" | undefined {
function pickWorst(issues: ValidationIssue[] | undefined): "error" | "warning" | "soft" | undefined {
if (!issues) return undefined;
if (issues.some(i => i.severity === "error")) return "error";
if (issues.some(i => i.severity === "warning")) return "warning";
if (issues.some(i => i.severity === "soft")) return "soft";
@@ -72,60 +94,195 @@ export function DiagramCanvas(props: DiagramCanvasProps) {
}
function DiagramInner({ data, focusBlockId, onSelect, issuesByElement }: DiagramCanvasProps) {
const initial = useMemo(() => fixtureToFlow(data), [data]);
const [nodes, setNodes] = useState<Node<BlockNodeData>[]>(initial.nodes);
const [edges, setEdges] = useState<Edge<SysmlEdgeData>[]>(initial.edges);
const model = useModel();
const apply = useApply();
const wrapperRef = useRef<HTMLDivElement | null>(null);
const { screenToFlowPosition } = useReactFlow();
const onNodesChange = useCallback(
(changes: NodeChange[]) => setNodes(ns => applyNodeChanges(changes, ns) as Node<BlockNodeData>[]),
[]
);
const onEdgesChange = useCallback(
(changes: EdgeChange[]) => setEdges(es => applyEdgeChanges(changes, es) as Edge<SysmlEdgeData>[]),
[]
);
const onConnect = useCallback((connection: Connection) => {
const newEdge: Edge<SysmlEdgeData> = {
id: freshEdgeId(),
source: connection.source,
target: connection.target,
type: "sysml",
data: { label: "relates_to", kind: "association" satisfies AssociationKind },
markerEnd: { type: MarkerType.Arrow, color: "var(--edge)", width: 18, height: 18 },
};
setEdges(es => addEdge(newEdge, es) as Edge<SysmlEdgeData>[]);
}, []);
// Initialize React Flow state from the model + fixture positions on first render.
// Lazy `useState`-style init to avoid recomputing on every render.
const [initialN] = useState(() => initialNodes(model, data));
const [initialE] = useState(() => initialEdges(model));
const [nodes, setNodes, onNodesChangeRaw] = useNodesState<Node<BlockNodeData>>(initialN);
const [edges, setEdges, onEdgesChangeRaw] = useEdgesState<Edge<SysmlEdgeData>>(initialE);
// Highlight focusBlockId from sibling components (e.g. narrative chip hover).
// Also surface validation severity onto each node so BlockNode can ring it.
// Track the model's element ids so we can detect adds/removes between renders.
const elementIdsRef = useRef<{ blocks: Set<string>; assocs: Set<string>; constraints: Set<string> }>(snapshotIds(model));
// ─── Model → React Flow (targeted sync) ──────────────────────────────────
useEffect(() => {
setNodes(ns =>
ns.map(n => {
const issues = issuesByElement?.get(n.id) ?? [];
const severity = pickWorst(issues);
return {
...n,
selected: n.id === focusBlockId,
data: { ...(n.data as BlockNodeData), issueSeverity: severity },
};
})
);
}, [focusBlockId, issuesByElement]);
const prev = elementIdsRef.current;
const curr = snapshotIds(model);
setNodes(currentNodes => {
const byId = new Map(currentNodes.map(n => [n.id, n]));
const next: Node<BlockNodeData>[] = [];
// Existing model elements first — preserve position & selection from RF state
for (const b of model.blocks) {
const existing = byId.get(b.id);
if (existing) {
// Update data only if it changed (cheap structural compare)
const propNames = b.properties.map(p => p.name);
const dataChanged =
existing.data?.label !== b.label ||
existing.data?.kind !== b.kind ||
!sameStringArray(existing.data?.properties ?? [], propNames);
if (dataChanged) {
next.push({ ...existing, data: { ...existing.data, label: b.label, kind: b.kind, properties: propNames } });
} else {
next.push(existing);
}
} else {
// New block from outside (rare in M5; mostly self-originated drops)
next.push(makeNodeForBlock(b));
}
}
for (const c of model.constraints) {
const existing = byId.get(c.id);
if (existing) {
const expr = c.expression || "{ }";
const dataChanged =
existing.data?.label !== c.label ||
existing.data?.expression !== expr;
if (dataChanged) {
next.push({ ...existing, data: { ...existing.data, label: c.label, kind: "constraint", properties: [], expression: expr } });
} else {
next.push(existing);
}
} else {
next.push(makeNodeForConstraint(c));
}
}
return next;
});
setEdges(currentEdges => {
const byId = new Map(currentEdges.map(e => [e.id, e]));
const next: Edge<SysmlEdgeData>[] = [];
for (const a of model.associations) {
const existing = byId.get(a.id);
if (existing && existing.data?.label === a.label && existing.data?.kind === a.kind) {
next.push(existing);
} else {
next.push(makeEdgeForAssociation(a));
}
}
// Synthesized constraint→block edges
for (const c of model.constraints) {
for (const target of c.appliesTo) {
const id = `${c.id}__applies__${target}`;
const existing = byId.get(id);
next.push(existing ?? makeEdgeForApplies(c.id, target));
}
}
return next;
});
elementIdsRef.current = curr;
void prev;
}, [model, setNodes, setEdges]);
// ─── Selection sync — narrative chip hover / rail entry hover → here ────
useEffect(() => {
setNodes(curr => {
let changed = false;
const next = curr.map(n => {
const shouldSelect = n.id === focusBlockId;
if (n.selected === shouldSelect) return n;
changed = true;
return { ...n, selected: shouldSelect };
});
return changed ? next : curr;
});
}, [focusBlockId, setNodes]);
// ─── Issue-severity sync — validation results → node ring color ─────────
useEffect(() => {
setNodes(curr => {
let changed = false;
const next = curr.map(n => {
const next = pickWorst(issuesByElement?.get(n.id));
if (n.data?.issueSeverity === next) return n;
changed = true;
return { ...n, data: { ...n.data, issueSeverity: next } };
});
return changed ? next : curr;
});
}, [issuesByElement, setNodes]);
// ─── React Flow → ModelStore handlers ───────────────────────────────────
const onNodesChange = useCallback((changes: NodeChange[]) => {
// 1. Let React Flow update its own state (positions, drags, selections)
onNodesChangeRaw(changes as NodeChange<Node<BlockNodeData>>[]);
// 2. For removals, emit the corresponding remove ops
const removalOps: ModelOp[] = [];
for (const c of changes) {
if (c.type !== "remove") continue;
const isConstraint = !!model.constraints.find(x => x.id === c.id);
if (isConstraint) {
removalOps.push(removeConstraintOp(c.id));
} else if (model.blocks.find(x => x.id === c.id)) {
removalOps.push(removeBlockOp(c.id));
}
}
if (removalOps.length > 0) apply(removalOps);
}, [apply, model.blocks, model.constraints, onNodesChangeRaw]);
const onEdgesChange = useCallback((changes: EdgeChange[]) => {
// 1. Let React Flow update its own state
onEdgesChangeRaw(changes as EdgeChange<Edge<SysmlEdgeData>>[]);
// 2. For removals, emit ops — except for synthesized constraint-applies
// edges which decompose into a constraint update.
const removalOps: ModelOp[] = [];
for (const c of changes) {
if (c.type !== "remove") continue;
if (c.id.includes("__applies__")) {
const [cid, tid] = c.id.split("__applies__");
const target = model.constraints.find(x => x.id === cid);
if (target) {
removalOps.push(updateConstraintOp(cid!, { appliesTo: target.appliesTo.filter(x => x !== tid) }));
}
} else if (model.associations.find(a => a.id === c.id)) {
removalOps.push(removeAssociationOp(c.id));
}
}
if (removalOps.length > 0) apply(removalOps);
}, [apply, model.associations, model.constraints, onEdgesChangeRaw]);
const onConnect = useCallback((connection: Connection) => {
if (!connection.source || !connection.target) return;
const newId = tempId("a");
apply([
addAssociationOp({
id: newId,
fromBlockId: connection.source,
toBlockId: connection.target,
label: "relates_to",
kind: "association",
}, newId),
]);
}, [apply]);
const onNodeClick: NodeMouseHandler = useCallback(
(_event, node) => {
onSelect?.(node.id);
},
(_event, node) => onSelect?.(node.id),
[onSelect]
);
const onPaneClick = useCallback(() => onSelect?.(null), [onSelect]);
const onPaneClick = useCallback(() => {
onSelect?.(null);
}, [onSelect]);
const selectedNode = nodes.find(n => n.id === focusBlockId);
const selectedBlock = useMemo(
() => model.blocks.find(b => b.id === focusBlockId) ?? null,
[model.blocks, focusBlockId]
);
const selectedConstraint = useMemo(
() => model.constraints.find(c => c.id === focusBlockId) ?? null,
[model.constraints, focusBlockId]
);
// Drag-and-drop from the palette
const onDragOver = useCallback((event: React.DragEvent) => {
@@ -138,46 +295,94 @@ function DiagramInner({ data, focusBlockId, onSelect, issuesByElement }: Diagram
event.preventDefault();
const kindRaw = event.dataTransfer.getData("application/sysml-kind");
if (!kindRaw) return;
const kind = kindRaw as BlockKind | "system";
const position = screenToFlowPosition({ x: event.clientX, y: event.clientY });
const id = freshNodeId();
const newNode: Node<BlockNodeData> = {
id,
type: "sysmlBlock",
position,
data: {
label: kind === "system"
? "System"
: kind === "actor"
? "Actor"
: kind === "constraint"
? "Constraint"
: "Block",
kind,
properties: kind === "constraint" ? [] : ["new_property"],
...(kind === "constraint" ? { expression: "{ }" } : {}),
},
if (kindRaw === "constraint") {
const cid = tempId("c");
const result = apply([
addConstraintOp({ id: cid, label: "Constraint", expression: "{ }", appliesTo: [] }, cid),
]);
if (result.applied) {
const final = result.idMapping[cid] ?? cid;
// Position the new node at the drop coordinates
setNodes(curr => curr.map(n => (n.id === final ? { ...n, position } : n)));
onSelect?.(final);
}
return;
}
const kind = kindRaw as BlockKind | "system";
const bid = tempId("b");
const block: Block = {
id: bid,
label:
kind === "system" ? "System" :
kind === "actor" ? "Actor" :
"Block",
kind: kind === "system" ? "system" : kind,
stereotypes: [kind],
properties: [newProperty("new_property")],
};
setNodes(ns => [...ns, newNode]);
onSelect?.(id);
const result = apply([addBlockOp(block, bid)]);
if (result.applied) {
const final = result.idMapping[bid] ?? bid;
setNodes(curr => curr.map(n => (n.id === final ? { ...n, position } : n)));
onSelect?.(final);
}
},
[onSelect, screenToFlowPosition]
[apply, onSelect, screenToFlowPosition, setNodes]
);
function patchSelected(patch: Partial<BlockNodeData>) {
if (!focusBlockId) return;
setNodes(ns =>
ns.map(n => (n.id === focusBlockId ? { ...n, data: { ...(n.data as BlockNodeData), ...patch } } : n))
);
if (selectedBlock) {
const ops: ModelOp[] = [];
if (patch.label !== undefined && patch.label !== selectedBlock.label) {
ops.push(updateBlockOp(selectedBlock.id, { label: patch.label }));
}
if (patch.kind !== undefined && patch.kind !== selectedBlock.kind) {
ops.push(updateBlockOp(selectedBlock.id, { kind: patch.kind, stereotypes: [patch.kind] }));
}
if (patch.properties !== undefined) {
ops.push(...diffProperties(selectedBlock, patch.properties));
}
if (ops.length > 0) apply(ops);
} else if (selectedConstraint) {
const ops: ModelOp[] = [];
if (patch.label !== undefined && patch.label !== selectedConstraint.label) {
ops.push(updateConstraintOp(selectedConstraint.id, { label: patch.label }));
}
if (patch.expression !== undefined && patch.expression !== selectedConstraint.expression) {
ops.push(updateConstraintOp(selectedConstraint.id, { expression: patch.expression }));
}
if (ops.length > 0) apply(ops);
}
}
function deleteSelected() {
if (!focusBlockId) return;
setNodes(ns => ns.filter(n => n.id !== focusBlockId));
setEdges(es => es.filter(e => e.source !== focusBlockId && e.target !== focusBlockId));
onSelect?.(null);
if (selectedBlock) {
apply([removeBlockOp(selectedBlock.id)]);
onSelect?.(null);
} else if (selectedConstraint) {
apply([removeConstraintOp(selectedConstraint.id)]);
onSelect?.(null);
}
}
const inspectorData: BlockNodeData | null = selectedBlock
? {
label: selectedBlock.label,
kind: selectedBlock.kind,
properties: selectedBlock.properties.map(p => p.name),
}
: selectedConstraint
? {
label: selectedConstraint.label,
kind: "constraint",
properties: [],
expression: selectedConstraint.expression,
}
: null;
return (
<div ref={wrapperRef} className="diagram-flow" onDragOver={onDragOver} onDrop={onDrop}>
<ReactFlow
@@ -190,6 +395,7 @@ function DiagramInner({ data, focusBlockId, onSelect, issuesByElement }: Diagram
onConnect={onConnect}
onNodeClick={onNodeClick}
onPaneClick={onPaneClick}
deleteKeyCode={["Backspace", "Delete"]}
fitView
fitViewOptions={{ padding: 0.15, includeHiddenNodes: false, maxZoom: 1.2 }}
proOptions={{ hideAttribution: true }}
@@ -204,10 +410,10 @@ function DiagramInner({ data, focusBlockId, onSelect, issuesByElement }: Diagram
<Palette />
{selectedNode && (
{inspectorData && focusBlockId && (
<NodeInspector
nodeId={selectedNode.id}
data={selectedNode.data as BlockNodeData}
nodeId={focusBlockId}
data={inspectorData}
onChange={patchSelected}
onDelete={deleteSelected}
onClose={() => onSelect?.(null)}
@@ -216,3 +422,137 @@ function DiagramInner({ data, focusBlockId, onSelect, issuesByElement }: Diagram
</div>
);
}
// ─── Initial state builders ──────────────────────────────────────────────
function initialNodes(model: SysMLModel, data?: FixtureData): Node<BlockNodeData>[] {
// Bootstrap positions from the fixture for the original Aristotle blocks.
const fixturePositions: Record<string, { x: number; y: number }> = {};
if (data) {
for (const b of data.blocks) {
fixturePositions[b.id] = { x: b.x * BOARD_W, y: b.y * BOARD_H };
}
}
const nodes: Node<BlockNodeData>[] = [];
let autoCol = 0;
let autoRow = 0;
function autoPosition() {
const pos = { x: 60 + autoCol * 220, y: 60 + autoRow * 160 };
autoCol++;
if (autoCol >= 4) { autoCol = 0; autoRow++; }
return pos;
}
for (const b of model.blocks) {
nodes.push({
...makeNodeForBlock(b),
position: fixturePositions[b.id] ?? autoPosition(),
});
}
for (const c of model.constraints) {
nodes.push({
...makeNodeForConstraint(c),
position: fixturePositions[c.id] ?? autoPosition(),
});
}
return nodes;
}
function initialEdges(model: SysMLModel): Edge<SysmlEdgeData>[] {
const edges: Edge<SysmlEdgeData>[] = [];
for (const a of model.associations) edges.push(makeEdgeForAssociation(a));
for (const c of model.constraints) {
for (const target of c.appliesTo) {
edges.push(makeEdgeForApplies(c.id, target));
}
}
return edges;
}
function makeNodeForBlock(b: Block): Node<BlockNodeData> {
return {
id: b.id,
type: "sysmlBlock",
position: { x: 0, y: 0 },
data: {
label: b.label,
kind: b.kind,
properties: b.properties.map(p => p.name),
},
};
}
function makeNodeForConstraint(c: import("../../lib/sysml/model").Constraint): Node<BlockNodeData> {
return {
id: c.id,
type: "sysmlBlock",
position: { x: 0, y: 0 },
data: {
label: c.label,
kind: "constraint",
properties: [],
expression: c.expression || "{ }",
},
};
}
function makeEdgeForAssociation(a: import("../../lib/sysml/model").Association): Edge<SysmlEdgeData> {
return {
id: a.id,
source: a.fromBlockId,
target: a.toBlockId,
type: "sysml",
data: { label: a.label, kind: a.kind },
markerEnd: a.kind === "composition"
? { type: MarkerType.ArrowClosed, color: "var(--edge)", width: 18, height: 18 }
: a.kind === "constraintApplies"
? undefined
: { type: MarkerType.Arrow, color: "var(--edge)", width: 18, height: 18 },
};
}
function makeEdgeForApplies(constraintId: string, targetBlockId: string): Edge<SysmlEdgeData> {
return {
id: `${constraintId}__applies__${targetBlockId}`,
source: constraintId,
target: targetBlockId,
type: "sysml",
data: { label: "applies_to", kind: "constraintApplies" },
};
}
function snapshotIds(model: SysMLModel): { blocks: Set<string>; assocs: Set<string>; constraints: Set<string> } {
return {
blocks: new Set(model.blocks.map(b => b.id)),
assocs: new Set(model.associations.map(a => a.id)),
constraints: new Set(model.constraints.map(c => c.id)),
};
}
function sameStringArray(a: string[], b: string[]): boolean {
if (a.length !== b.length) return false;
for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
return true;
}
/** Diff property-name lists into add/update/remove ops. */
function diffProperties(block: Block, nextNames: string[]): ModelOp[] {
const ops: ModelOp[] = [];
const cur = block.properties;
for (let i = 0; i < cur.length; i++) {
const c = cur[i]!;
const n = nextNames[i];
if (n === undefined) {
ops.push(removePropertyOp(block.id, c.id));
} else if (n !== c.name) {
ops.push(updatePropertyOp(block.id, c.id, { name: n }));
}
}
for (let i = cur.length; i < nextNames.length; i++) {
const n = nextNames[i]!;
const pid = tempId("p");
const p: Property = { id: pid, name: n, type: { kind: "string" } as PropertyType, multiplicity: "0..1" };
ops.push(addPropertyOp(block.id, p, pid));
}
return ops;
}

4
apps/web/components/diagram-canvas/edges/SysmlEdge.tsx
View File

@@ -6,7 +6,7 @@
"use client";
import { BaseEdge, EdgeLabelRenderer, getBezierPath, type EdgeProps } from "@xyflow/react";
import type { AssociationKind } from "../../../lib/fixtures/aristotle";
import type { AssociationKind } from "../../../lib/sysml/model";
export interface SysmlEdgeData extends Record<string, unknown> {
label?: string;
@@ -26,7 +26,7 @@ export function SysmlEdge(props: EdgeProps) {
curvature: 0.25,
});
const isConstraint = kind === "constraint";
const isConstraint = kind === "constraintApplies";
return (
<>

47
apps/web/components/diagram-canvas/fixtureToFlow.ts
View File

@@ -1,47 +0,0 @@
// Convert FixtureData → React Flow nodes/edges.
// Positions in the fixture are normalized 0..1 against a 720×460 board; we map
// to absolute pixel coordinates so React Flow can render them.
import { MarkerType, type Edge, type Node } from "@xyflow/react";
import type { BlockNodeData } from "./nodes/BlockNode";
import type { SysmlEdgeData } from "./edges/SysmlEdge";
import type { FixtureData, AssociationKind } from "../../lib/fixtures/aristotle";
const BOARD_W = 720;
const BOARD_H = 460;
function markerForKind(kind: AssociationKind) {
if (kind === "composition") {
// React Flow doesn't ship a diamond marker; use the closed-arrow as the
// closest stock alternative. M3 ships this — a custom diamond can be
// added later if needed.
return { type: MarkerType.ArrowClosed, color: "var(--edge)", width: 18, height: 18 };
}
if (kind === "constraint") return undefined;
return { type: MarkerType.Arrow, color: "var(--edge)", width: 18, height: 18 };
}
export function fixtureToFlow(data: FixtureData): { nodes: Node<BlockNodeData>[]; edges: Edge<SysmlEdgeData>[] } {
const nodes: Node<BlockNodeData>[] = data.blocks.map(b => ({
id: b.id,
type: "sysmlBlock",
position: { x: b.x * BOARD_W, y: b.y * BOARD_H },
data: {
label: b.label,
kind: b.kind,
properties: [...b.properties],
...(b.kind === "constraint" ? { expression: "{ tenancy = institutional }" } : {}),
},
}));
const edges: Edge<SysmlEdgeData>[] = data.associations.map(a => ({
id: a.id,
source: a.from,
target: a.to,
type: "sysml",
data: { label: a.label, kind: a.kind },
markerEnd: markerForKind(a.kind),
}));
return { nodes, edges };
}

112
apps/web/components/diagram-canvas/modelToFlow.ts Normal file
View File

@@ -0,0 +1,112 @@
// SysMLModel → React Flow nodes/edges. M5 replaces fixtureToFlow with this
// so the diagram renders the canonical store state.
import { MarkerType, type Edge, type Node } from "@xyflow/react";
import type { SysMLModel, AssociationKind } from "../../lib/sysml/model";
import type { BlockNodeData } from "./nodes/BlockNode";
import type { SysmlEdgeData } from "./edges/SysmlEdge";
// Default board dimensions used when the model lacks per-block positions.
const BOARD_W = 720;
const BOARD_H = 460;
export interface NodePositions {
[blockId: string]: { x: number; y: number };
}
export interface ConvertOptions {
/** Per-node positions tracked in component state (drag offsets). */
positions?: NodePositions;
}
function markerForKind(kind: AssociationKind) {
if (kind === "composition") {
return { type: MarkerType.ArrowClosed, color: "var(--edge)", width: 18, height: 18 };
}
if (kind === "constraintApplies") return undefined;
return { type: MarkerType.Arrow, color: "var(--edge)", width: 18, height: 18 };
}
export function modelToFlow(model: SysMLModel, opts: ConvertOptions = {}): { nodes: Node<BlockNodeData>[]; edges: Edge<SysmlEdgeData>[] } {
const positions = opts.positions ?? {};
// Auto-place blocks that don't have a tracked position. Spread them on a
// grid so newly-created elements don't all stack at (0,0).
const positioned = new Set(Object.keys(positions));
let autoIdx = 0;
function autoPosition(blockId: string) {
autoIdx++;
const col = autoIdx % 4;
const row = Math.floor(autoIdx / 4);
return { x: 100 + col * 220, y: 100 + row * 160 };
}
// Render constraints + blocks together so the user sees both.
const allBlockLikeNodes: Node<BlockNodeData>[] = [];
model.blocks.forEach((b, i) => {
const pos = positions[b.id] ?? defaultPositionForIndex(i, model.blocks.length);
allBlockLikeNodes.push({
id: b.id,
type: "sysmlBlock",
position: pos,
data: {
label: b.label,
kind: b.kind,
properties: b.properties.map(p => p.name),
},
});
});
model.constraints.forEach(c => {
const pos = positions[c.id] ?? autoPosition(c.id);
if (!positioned.has(c.id)) positioned.add(c.id);
allBlockLikeNodes.push({
id: c.id,
type: "sysmlBlock",
position: pos,
data: {
label: c.label,
kind: "constraint",
properties: [],
expression: c.expression || "{ }",
},
});
});
const edges: Edge<SysmlEdgeData>[] = [];
for (const a of model.associations) {
edges.push({
id: a.id,
source: a.fromBlockId,
target: a.toBlockId,
type: "sysml",
data: { label: a.label, kind: a.kind },
markerEnd: markerForKind(a.kind),
});
}
// Synthesize constraint→block edges from the constraint's appliesTo field.
for (const c of model.constraints) {
for (const target of c.appliesTo) {
edges.push({
id: `${c.id}__applies__${target}`,
source: c.id,
target,
type: "sysml",
data: { label: "applies_to", kind: "constraintApplies" },
});
}
}
return { nodes: allBlockLikeNodes, edges };
}
function defaultPositionForIndex(i: number, total: number): { x: number; y: number } {
// Best-effort grid layout when no positions are tracked yet.
const cols = Math.max(2, Math.ceil(Math.sqrt(total)));
const col = i % cols;
const row = Math.floor(i / cols);
return { x: 60 + col * (BOARD_W / cols), y: 60 + row * 160 };
}

89
apps/web/components/editor/EditorShell.tsx
View File

@@ -1,11 +1,10 @@
// The dual-canvas workspace shell.
// Composes TopBar / SocratesDock / LeftRail / TextCanvas / DiagramCanvas / StatusBar.
// M4 adds: SysML model derivation + validation, IssuesPanel, optional ?break=...
// query param to demonstrate the validator surfacing rule violations.
// M5: state lives in ModelStoreProvider; both canvases consume the canonical
// SysMLModel and emit ModelOps back through useApply().
"use client";
import { useMemo, useState } from "react";
import { useMemo, useState, Suspense } from "react";
import { useSearchParams } from "next/navigation";
import { TopBar } from "./TopBar";
import { LeftRail } from "./LeftRail";
@@ -18,8 +17,8 @@ import { SocratesDock, type Density, type SocratesPresence } from "../socrates/S
import type { MarkupStyle } from "../text-canvas/Chip";
import type { FixtureData } from "../../lib/fixtures/aristotle";
import { fromFixture } from "../../lib/sysml/fromFixture";
import { validate, type ValidationIssue } from "../../lib/sysml/validate";
import { applyBreaks, BREAKS, type BreakName } from "../../lib/sysml/breaks";
import { ModelStoreProvider, useModelStore } from "../../lib/sync/ModelStore";
interface EditorShellProps {
data: FixtureData;
@@ -29,42 +28,62 @@ interface EditorShellProps {
presence?: SocratesPresence;
}
export function EditorShell({
export function EditorShell(props: EditorShellProps) {
return (
<Suspense fallback={null}>
<EditorShellInner {...props} />
</Suspense>
);
}
function EditorShellInner({
data,
density = "comfortable",
markupStyle = "color",
diagramStyle = "softened",
presence = "default",
}: EditorShellProps) {
const [focusBlockId, setFocusBlockId] = useState<string | null>(null);
const searchParams = useSearchParams();
// Parse `?break=S1-dangling,M2-cycle&...` into a list of named corruptions.
const breaks = useMemo<BreakName[]>(() => {
const raw = searchParams?.get("break") ?? "";
if (!raw) return [];
return raw
.split(",")
.map(s => s.trim())
.filter((s): s is BreakName => s in BREAKS);
return raw.split(",").map(s => s.trim()).filter((s): s is BreakName => s in BREAKS);
}, [searchParams]);
// Derive the SysML model from the fixture, optionally apply breaks, validate.
const { issues, issuesByElement } = useMemo(() => {
const baseModel = fromFixture(data);
const broken = breaks.length > 0 ? applyBreaks(baseModel, breaks) : baseModel;
const issues = validate(broken);
const issuesByElement = new Map<string, ValidationIssue[]>();
for (const i of issues) {
const key = anchorKey(i.anchor);
if (!key) continue;
const prev = issuesByElement.get(key) ?? [];
prev.push(i);
issuesByElement.set(key, prev);
}
return { issues, issuesByElement };
const initialModel = useMemo(() => {
const base = fromFixture(data);
return breaks.length > 0 ? applyBreaks(base, breaks) : base;
}, [data, breaks]);
return (
<ModelStoreProvider initialModel={initialModel}>
<ShellBody
data={data}
density={density}
markupStyle={markupStyle}
diagramStyle={diagramStyle}
presence={presence}
breaks={breaks}
/>
</ModelStoreProvider>
);
}
function ShellBody({
data,
density,
markupStyle,
diagramStyle,
presence,
breaks,
}: Required<Omit<EditorShellProps, "data">> & { data: FixtureData; breaks: BreakName[] }) {
const [focusBlockId, setFocusBlockId] = useState<string | null>(null);
const { model, issues, issuesByElement } = useModelStore();
const stats = `SysML · ${model.blocks.length} blocks · ${model.associations.length} associations · ${model.constraints.length} constraints`;
const subtitle = breaks.length > 0 ? `${stats} · breaks active: ${breaks.join(", ")}` : stats;
return (
<div className={`shell shell-density-${density} shell-presence-${presence}`}>
<TopBar data={data} />
@@ -97,9 +116,7 @@ export function EditorShell({
<section className="canvas canvas-diagram">
<CanvasHeader
title="Model"
subtitle={breaks.length > 0
? `SysML · breaks active: ${breaks.join(", ")}`
: "SysML · 6 blocks · 6 associations · 1 constraint"}
subtitle={subtitle}
right={
<div className="canvas-actions">
<span className="canvas-mode-pill">Fit</span>
@@ -128,17 +145,3 @@ export function EditorShell({
</div>
);
}
/** Map an issue's anchor to a single string key matching either a block id or
* a synthetic key (`assoc:a1`, `req:req-001`, `constraint:ferpa`). The UI uses
* block ids most often, so block anchors return the bare id. */
function anchorKey(anchor: ValidationIssue["anchor"]): string | null {
switch (anchor.kind) {
case "block": return anchor.id;
case "association": return `assoc:${anchor.id}`;
case "constraint": return `constraint:${anchor.id}`;
case "requirement": return `req:${anchor.id}`;
case "property": return anchor.blockId;
case "model": return null;
}
}

76
apps/web/components/editor/LeftRail.tsx
View File

@@ -1,12 +1,17 @@
// Outline / Model / Requirements sections, each independently collapsible.
// The whole rail can also collapse to a 36px vertical strip.
// Ported from docs/design-source/socrata/project/editor-shell.jsx (LeftRail).
//
// M5: Model + Requirements sections read from the canonical SysMLModel via
// useModelStore() so renames in either canvas reflect here immediately.
// Outline section is still narrative-derived and uses the fixture (M6 will
// migrate it to the live ProseMirror outline).
"use client";
import { useState } from "react";
import type { FixtureData } from "../../lib/fixtures/aristotle";
import type { ValidationIssue, Severity } from "../../lib/sysml/validate";
import { useModel } from "../../lib/sync/ModelStore";
interface LeftRailProps {
data: FixtureData;
@@ -29,10 +34,11 @@ function IssueDot({ severity, title }: { severity: Severity | null; title?: stri
return <span className={`rail-issue-dot rail-issue-dot-${severity}`} title={title} />;
}
export function LeftRail({ data, focusBlockId, setFocusBlockId, issuesByElement }: LeftRailProps) {
export function LeftRail({ focusBlockId, setFocusBlockId, issuesByElement }: LeftRailProps) {
const [collapsed, setCollapsed] = useState(false);
const [open, setOpen] = useState({ outline: true, model: true, requirements: true });
const toggle = (k: keyof typeof open) => setOpen(s => ({ ...s, [k]: !s[k] }));
const model = useModel();
if (collapsed) {
return (
@@ -47,13 +53,39 @@ export function LeftRail({ data, focusBlockId, setFocusBlockId, issuesByElement
</button>
<div className="rail-collapsed-stack">
<span className="rail-collapsed-tag" title="Outline">OUT</span>
<span className="rail-collapsed-tag" title="Model · 6 blocks">MOD</span>
<span className="rail-collapsed-tag" title={`Model · ${model.blocks.length + model.constraints.length} elements`}>MOD</span>
<span className="rail-collapsed-tag" title="Requirements">REQ</span>
</div>
</nav>
);
}
// Combine blocks + constraints in the Model section, sorted by kind for a
// predictable order: system → block → actor → constraint.
const kindRank: Record<string, number> = { system: 0, block: 1, actor: 2, constraint: 3 };
const modelEntries: Array<{
id: string;
label: string;
kind: "block" | "actor" | "constraint" | "system";
propertyCount: number;
}> = [
...model.blocks.map(b => ({
id: b.id,
label: b.label,
kind: b.kind,
propertyCount: b.properties.length,
})),
...model.constraints.map(c => ({
id: c.id,
label: c.label,
kind: "constraint" as const,
propertyCount: 0,
})),
].sort((a, b) => {
const r = (kindRank[a.kind] ?? 99) - (kindRank[b.kind] ?? 99);
return r !== 0 ? r : a.label.localeCompare(b.label);
});
return (
<nav className="leftrail">
<div className="rail-section">
@@ -96,7 +128,7 @@ export function LeftRail({ data, focusBlockId, setFocusBlockId, issuesByElement
</button>
{open.model && (
<ul className="rail-list rail-blocks">
{data.blocks.map(b => {
{modelEntries.map(b => {
const sev = maxSeverityForKey(issuesByElement, b.id);
const tooltip = issuesByElement?.get(b.id)?.map(i => `${i.code}: ${i.message}`).join("\n");
return (
@@ -105,19 +137,23 @@ export function LeftRail({ data, focusBlockId, setFocusBlockId, issuesByElement
className={`rail-block rail-${b.kind} ${focusBlockId === b.id ? "rail-block-active" : ""}`}
onMouseEnter={() => setFocusBlockId(b.id)}
onMouseLeave={() => setFocusBlockId(null)}
onClick={() => setFocusBlockId(b.id)}
style={{ cursor: "pointer" }}
>
<span className="rail-block-glyph">
{b.kind === "constraint" ? "{}" : b.kind === "actor" ? "◐" : "▢"}
{b.kind === "constraint" ? "{}" : b.kind === "actor" ? "◐" : b.kind === "system" ? "◎" : "▢"}
</span>
<span className="rail-block-label">{b.label}</span>
<IssueDot severity={sev} title={tooltip} />
<span
className="rail-block-count"
title={`${b.properties.length} ${b.properties.length === 1 ? "property" : "properties"}`}
>
<span className="rail-block-count-glyph">·</span>
{b.properties.length}
</span>
{b.kind !== "constraint" && (
<span
className="rail-block-count"
title={`${b.propertyCount} ${b.propertyCount === 1 ? "property" : "properties"}`}
>
<span className="rail-block-count-glyph">·</span>
{b.propertyCount}
</span>
)}
</li>
);
})}
@@ -132,18 +168,18 @@ export function LeftRail({ data, focusBlockId, setFocusBlockId, issuesByElement
</button>
{open.requirements && (
<ul className="rail-list">
{(["req-001", "req-002", "req-003"] as const).map(reqId => {
const tag = reqId.toUpperCase().replace("-", "-");
const sev = maxSeverityForKey(issuesByElement, `req:${reqId}`);
const tooltip = issuesByElement?.get(`req:${reqId}`)?.map(i => `${i.code}: ${i.message}`).join("\n");
const isUntraced = sev === "warning"; // T1 is the warning we surface here
{model.requirements.map(r => {
const key = `req:${r.id}`;
const sev = maxSeverityForKey(issuesByElement, key);
const tooltip = issuesByElement?.get(key)?.map(i => `${i.code}: ${i.message}`).join("\n");
const traced = r.relations.some(rel => rel.kind === "satisfy");
return (
<li key={reqId} className="rail-req">
<span className="req-tag">{tag.toUpperCase()}</span>
<li key={r.id} className="rail-req">
<span className="req-tag">{r.tag}</span>
{sev ? (
<IssueDot severity={sev} title={tooltip} />
) : (
<span className={`req-status ${isUntraced ? "req-untraced" : "req-traced"}`} />
<span className={`req-status ${traced ? "req-traced" : "req-untraced"}`} />
)}
</li>
);

137
apps/web/components/text-canvas/ChipView.tsx
View File

@@ -1,13 +1,20 @@
// React NodeView for the chip TipTap node.
// Renders identically to the static Chip via the same CSS classes.
//
// M5: chips look up their displayed label from the SysMLModel via refId.
// Click a chip → opens an inline rename popover that emits an update-block
// op via useApply(). Renaming here updates every other chip with the same
// refId AND the diagram block label.
"use client";
import { NodeViewWrapper } from "@tiptap/react";
import type { NodeViewProps } from "@tiptap/react";
import { useEffect, useRef, useState } from "react";
import type { ChipKind } from "../../lib/fixtures/aristotle";
import type { MarkupStyle } from "./Chip";
import { useChipFocus } from "./FocusContext";
import { useModelStore } from "../../lib/sync/ModelStore";
import { updateBlock, updateRequirement, updateAssociation } from "../../lib/sync/ops";
const KIND_LABEL: Record<ChipKind, string> = {
block: "block",
@@ -27,30 +34,99 @@ function kindGlyph(kind: ChipKind): string {
export function ChipView({ node, selected, editor }: NodeViewProps) {
const kind = (node.attrs.kind as ChipKind) ?? "block";
const label = (node.attrs.label as string) ?? "untitled";
const refId = (node.attrs.refId as string | null) ?? null;
// Read the current markup style from the editor's storage; defaults to "color".
const fallbackLabel = (node.attrs.label as string) ?? "untitled";
const markupStyle =
((editor.storage as unknown as Record<string, unknown>).markupStyle as MarkupStyle | undefined) ?? "color";
const { focusBlockId, setFocusBlockId } = useChipFocus();
const isFocused = (refId !== null && refId === focusBlockId) || selected;
const { model, apply } = useModelStore();
// Resolve the live label from the model, falling back to the node's stored
// label (e.g. for chips created via slash-menu before they're bound).
const liveLabel = useMemo_label(model, kind, refId) ?? fallbackLabel;
const isFocused = (refId !== null && refId === focusBlockId) || selected;
const [isEditing, setIsEditing] = useState(false);
const [draft, setDraft] = useState(liveLabel);
const inputRef = useRef<HTMLInputElement | null>(null);
useEffect(() => {
if (isEditing) {
setDraft(liveLabel);
// Allow the input to mount before focusing.
requestAnimationFrame(() => {
inputRef.current?.focus();
inputRef.current?.select();
});
}
}, [isEditing, liveLabel]);
function commitRename() {
setIsEditing(false);
const next = draft.trim();
if (!next || next === liveLabel || !refId) return;
if (kind === "block") {
apply([updateBlock(refId, { label: next })]);
} else if (kind === "requirement") {
apply([updateRequirement(refId, { tag: next })]);
} else if (kind === "association") {
apply([updateAssociation(refId, { label: next })]);
}
// property and (potential future) constraint chips: rename in the
// model is more involved (need parent block id resolution); skip for M5.
}
const cls = `chip chip-${kind} chip-style-${markupStyle}${isFocused ? " chip-focus" : ""}${isEditing ? " chip-editing" : ""}`;
const cls = `chip chip-${kind} chip-style-${markupStyle}${isFocused ? " chip-focus" : ""}`;
const handlers = refId
? {
onMouseEnter: () => setFocusBlockId(refId),
onMouseLeave: () => setFocusBlockId(null),
onMouseLeave: () => !isEditing && setFocusBlockId(null),
onDoubleClick: (e: React.MouseEvent) => {
e.preventDefault();
if (refId) setIsEditing(true);
},
onClick: () => setFocusBlockId(refId),
}
: {};
// Inline rename input — replaces the label visual, preserves the chip frame
if (isEditing && refId) {
return (
<NodeViewWrapper as="span" className={cls} contentEditable={false} draggable={false}>
{markupStyle === "bracket" && <span className="chip-bracket">[</span>}
{markupStyle === "bracket" && <span className="chip-kind">{KIND_LABEL[kind]}:</span>}
{markupStyle !== "bracket" && <span className="chip-glyph">{kindGlyph(kind)}</span>}
<input
ref={inputRef}
className="chip-rename"
value={draft}
onChange={e => setDraft(e.target.value)}
onBlur={commitRename}
onKeyDown={e => {
if (e.key === "Enter") {
e.preventDefault();
(e.target as HTMLInputElement).blur();
} else if (e.key === "Escape") {
setDraft(liveLabel);
setIsEditing(false);
}
}}
size={Math.max(draft.length, 6)}
/>
{markupStyle === "bracket" && <span className="chip-bracket">]</span>}
</NodeViewWrapper>
);
}
if (markupStyle === "bracket") {
return (
<NodeViewWrapper as="span" className={cls} contentEditable={false} draggable={false} {...handlers}>
<NodeViewWrapper as="span" className={cls} contentEditable={false} draggable={false} {...handlers} title={refId ? "double-click to rename" : undefined}>
<span className="chip-bracket">[</span>
<span className="chip-kind">{KIND_LABEL[kind]}:</span>
<span className="chip-label">{label}</span>
<span className="chip-label">{liveLabel}</span>
<span className="chip-bracket">]</span>
</NodeViewWrapper>
);
@@ -58,17 +134,54 @@ export function ChipView({ node, selected, editor }: NodeViewProps) {
if (markupStyle === "underline") {
return (
<NodeViewWrapper as="span" className={cls} contentEditable={false} draggable={false} {...handlers}>
<NodeViewWrapper as="span" className={cls} contentEditable={false} draggable={false} {...handlers} title={refId ? "double-click to rename" : undefined}>
<span className="chip-glyph">{kindGlyph(kind)}</span>
<span className="chip-label">{label}</span>
<span className="chip-label">{liveLabel}</span>
</NodeViewWrapper>
);
}
return (
<NodeViewWrapper as="span" className={cls} contentEditable={false} draggable={false} {...handlers}>
<NodeViewWrapper as="span" className={cls} contentEditable={false} draggable={false} {...handlers} title={refId ? "double-click to rename" : undefined}>
<span className="chip-glyph">{kindGlyph(kind)}</span>
<span className="chip-label">{label}</span>
<span className="chip-label">{liveLabel}</span>
</NodeViewWrapper>
);
}
/**
* Look up the live label for a chip from the model. Inline-imported and
* collocated to keep the resolution rules near the consumer.
*
* For block / requirement / association / constraint chips we resolve by
* matching `refId` against the corresponding element. Property chips use a
* composite refId ("blockId.propertyId") — handled with a `.` split.
*/
function useMemo_label(model: ReturnType<typeof useModelStore>["model"], kind: ChipKind, refId: string | null): string | null {
if (!refId) return null;
if (kind === "block") {
return model.blocks.find(b => b.id === refId)?.label ?? null;
}
if (kind === "requirement") {
return model.requirements.find(r => r.id === refId || r.tag === refId)?.tag ?? null;
}
if (kind === "association") {
return model.associations.find(a => a.id === refId)?.label ?? null;
}
if (kind === "property") {
const dot = refId.indexOf(".");
if (dot < 0) {
// Bare property name from the fixture; do a flat search.
for (const b of model.blocks) {
const p = b.properties.find(p => p.name === refId || p.id === refId);
if (p) return p.name;
}
return null;
}
const blockId = refId.slice(0, dot);
const propId = refId.slice(dot + 1);
const b = model.blocks.find(x => x.id === blockId);
return b?.properties.find(p => p.id === propId || p.name === propId)?.name ?? null;
}
return null;
}

83
apps/web/lib/sync/ModelStore.tsx Normal file
View File

@@ -0,0 +1,83 @@
// React provider exposing the canonical SysMLModel + applyOps.
// Used by both canvases (and the rail) so they stay in sync.
"use client";
import { createContext, useCallback, useContext, useMemo, useState } from "react";
import { applyOps, type ApplyResult } from "./applyOps";
import { validate, type ValidationIssue } from "../sysml/validate";
import type { SysMLModel } from "../sysml/model";
import type { ModelOp } from "./ops";
export interface ModelStoreValue {
model: SysMLModel;
apply: (ops: ModelOp[]) => ApplyResult;
/** Validation issues, recomputed on each successful apply. */
issues: ValidationIssue[];
issuesByElement: Map<string, ValidationIssue[]>;
}
const ModelStoreContext = createContext<ModelStoreValue | null>(null);
interface ModelStoreProviderProps {
initialModel: SysMLModel;
children: React.ReactNode;
}
export function ModelStoreProvider({ initialModel, children }: ModelStoreProviderProps) {
const [model, setModel] = useState<SysMLModel>(initialModel);
const apply = useCallback((ops: ModelOp[]): ApplyResult => {
let result: ApplyResult = { model, idMapping: {}, errors: [], applied: false };
setModel(current => {
result = applyOps(current, ops);
return result.applied ? result.model : current;
});
return result;
}, [model]);
const { issues, issuesByElement } = useMemo(() => {
const issues = validate(model);
const issuesByElement = new Map<string, ValidationIssue[]>();
for (const i of issues) {
const k = anchorKey(i.anchor);
if (!k) continue;
const prev = issuesByElement.get(k) ?? [];
prev.push(i);
issuesByElement.set(k, prev);
}
return { issues, issuesByElement };
}, [model]);
const value: ModelStoreValue = useMemo(
() => ({ model, apply, issues, issuesByElement }),
[model, apply, issues, issuesByElement]
);
return <ModelStoreContext.Provider value={value}>{children}</ModelStoreContext.Provider>;
}
export function useModelStore(): ModelStoreValue {
const ctx = useContext(ModelStoreContext);
if (!ctx) throw new Error("useModelStore must be used inside ModelStoreProvider");
return ctx;
}
export function useModel(): SysMLModel {
return useModelStore().model;
}
export function useApply(): (ops: ModelOp[]) => ApplyResult {
return useModelStore().apply;
}
function anchorKey(anchor: ValidationIssue["anchor"]): string | null {
switch (anchor.kind) {
case "block": return anchor.id;
case "association": return `assoc:${anchor.id}`;
case "constraint": return `constraint:${anchor.id}`;
case "requirement": return `req:${anchor.id}`;
case "property": return anchor.blockId;
case "model": return null;
}
}

261
apps/web/lib/sync/applyOps.ts Normal file
View File

@@ -0,0 +1,261 @@
// The single chokepoint for SysMLModel mutations.
//
// Pure: (model, ops) → { model, idMapping, errors }. No DB / network here.
// M5 in-memory: tempIds are used as canonical ids when free, otherwise
// rewritten with a `_n` suffix. The DB layer (later) will replace this with
// server-issued ids.
//
// applyOps is atomic per-batch: if any op fails validation, the entire
// batch is rejected and the original model is returned unchanged. This is
// the contract docs/sync.md §4 specifies.
import type { SysMLModel, Block, Association, Constraint, Requirement } from "../sysml/model";
import type { ModelOp } from "./ops";
export interface ApplyResult {
model: SysMLModel;
/** Map of any tempId → assigned canonical id. */
idMapping: Record<string, string>;
errors: ApplyError[];
/** True iff the batch landed without errors. */
applied: boolean;
}
export interface ApplyError {
opIndex: number;
code: "DUPLICATE_ID" | "MISSING_ELEMENT" | "INVALID_PATCH";
message: string;
}
export function applyOps(model: SysMLModel, ops: ModelOp[]): ApplyResult {
const idMapping: Record<string, string> = {};
const errors: ApplyError[] = [];
// Fail-fast working copy. We mutate this; if errors accumulate we throw it
// away and return the original.
let next = cloneModel(model);
for (let i = 0; i < ops.length; i++) {
const op = ops[i]!;
try {
next = applyOne(next, op, idMapping);
} catch (err) {
errors.push({ opIndex: i, code: classifyError(err), message: (err as Error).message });
}
}
if (errors.length > 0) {
return { model, idMapping: {}, errors, applied: false };
}
return { model: next, idMapping, errors: [], applied: true };
}
// ─── Per-op application ──────────────────────────────────────────────────
function applyOne(model: SysMLModel, op: ModelOp, idMapping: Record<string, string>): SysMLModel {
switch (op.kind) {
case "add-block": {
const id = resolveAddId(op.block.id, op.tempId, idMapping, model.blocks.map(b => b.id));
const block: Block = { ...op.block, id };
return { ...model, blocks: [...model.blocks, block] };
}
case "update-block": {
const realId = idMapping[op.blockId] ?? op.blockId;
assertExists(model.blocks, realId, "block");
return {
...model,
blocks: model.blocks.map(b => (b.id === realId ? { ...b, ...op.patch } : b)),
};
}
case "remove-block": {
const realId = idMapping[op.blockId] ?? op.blockId;
assertExists(model.blocks, realId, "block");
// Cascade: drop incident associations + requirement satisfiers + constraint applies-to
return {
...model,
blocks: model.blocks.filter(b => b.id !== realId),
associations: model.associations.filter(a => a.fromBlockId !== realId && a.toBlockId !== realId),
constraints: model.constraints.map(c => ({ ...c, appliesTo: c.appliesTo.filter(id => id !== realId) })),
requirements: model.requirements.map(r => ({
...r,
relations: r.relations.filter(rel => rel.kind !== "satisfy" || rel.blockId !== realId),
})),
};
}
case "add-property": {
const blockId = idMapping[op.blockId] ?? op.blockId;
const block = model.blocks.find(b => b.id === blockId);
if (!block) throw missing("block", blockId);
const propId = resolveAddId(op.property.id, op.tempId, idMapping, block.properties.map(p => p.id));
return {
...model,
blocks: model.blocks.map(b =>
b.id === blockId ? { ...b, properties: [...b.properties, { ...op.property, id: propId }] } : b
),
};
}
case "update-property": {
const blockId = idMapping[op.blockId] ?? op.blockId;
return {
...model,
blocks: model.blocks.map(b =>
b.id === blockId
? { ...b, properties: b.properties.map(p => (p.id === op.propertyId ? { ...p, ...op.patch } : p)) }
: b
),
};
}
case "remove-property": {
const blockId = idMapping[op.blockId] ?? op.blockId;
return {
...model,
blocks: model.blocks.map(b =>
b.id === blockId ? { ...b, properties: b.properties.filter(p => p.id !== op.propertyId) } : b
),
};
}
case "add-association": {
const id = resolveAddId(op.association.id, op.tempId, idMapping, model.associations.map(a => a.id));
const association: Association = {
...op.association,
id,
fromBlockId: idMapping[op.association.fromBlockId] ?? op.association.fromBlockId,
toBlockId: idMapping[op.association.toBlockId] ?? op.association.toBlockId,
};
return { ...model, associations: [...model.associations, association] };
}
case "update-association": {
const realId = idMapping[op.associationId] ?? op.associationId;
assertExists(model.associations, realId, "association");
return {
...model,
associations: model.associations.map(a => (a.id === realId ? { ...a, ...op.patch } : a)),
};
}
case "remove-association": {
const realId = idMapping[op.associationId] ?? op.associationId;
assertExists(model.associations, realId, "association");
return { ...model, associations: model.associations.filter(a => a.id !== realId) };
}
case "add-constraint": {
const id = resolveAddId(op.constraint.id, op.tempId, idMapping, model.constraints.map(c => c.id));
const constraint: Constraint = {
...op.constraint,
id,
appliesTo: op.constraint.appliesTo.map(b => idMapping[b] ?? b),
};
return { ...model, constraints: [...model.constraints, constraint] };
}
case "update-constraint": {
const realId = idMapping[op.constraintId] ?? op.constraintId;
assertExists(model.constraints, realId, "constraint");
return {
...model,
constraints: model.constraints.map(c => (c.id === realId ? { ...c, ...op.patch } : c)),
};
}
case "remove-constraint": {
const realId = idMapping[op.constraintId] ?? op.constraintId;
assertExists(model.constraints, realId, "constraint");
return { ...model, constraints: model.constraints.filter(c => c.id !== realId) };
}
case "add-requirement": {
const id = resolveAddId(op.requirement.id, op.tempId, idMapping, model.requirements.map(r => r.id));
const requirement: Requirement = { ...op.requirement, id };
return { ...model, requirements: [...model.requirements, requirement] };
}
case "update-requirement": {
const realId = idMapping[op.requirementId] ?? op.requirementId;
assertExists(model.requirements, realId, "requirement");
return {
...model,
requirements: model.requirements.map(r => (r.id === realId ? { ...r, ...op.patch } : r)),
};
}
case "remove-requirement": {
const realId = idMapping[op.requirementId] ?? op.requirementId;
assertExists(model.requirements, realId, "requirement");
return { ...model, requirements: model.requirements.filter(r => r.id !== realId) };
}
case "add-relation": {
const realId = idMapping[op.requirementId] ?? op.requirementId;
assertExists(model.requirements, realId, "requirement");
return {
...model,
requirements: model.requirements.map(r =>
r.id === realId ? { ...r, relations: [...r.relations, op.relation] } : r
),
};
}
case "remove-relation": {
const realId = idMapping[op.requirementId] ?? op.requirementId;
assertExists(model.requirements, realId, "requirement");
return {
...model,
requirements: model.requirements.map(r =>
r.id === realId
? { ...r, relations: r.relations.filter((_, idx) => idx !== op.relationIndex) }
: r
),
};
}
}
}
// ─── Helpers ─────────────────────────────────────────────────────────────
function cloneModel(model: SysMLModel): SysMLModel {
// Shallow-clone collections; nested objects are immutable per our op contract.
return {
systemOfInterestId: model.systemOfInterestId,
blocks: model.blocks.map(b => ({ ...b, properties: [...b.properties], stereotypes: [...b.stereotypes] })),
associations: model.associations.map(a => ({ ...a })),
constraints: model.constraints.map(c => ({ ...c, appliesTo: [...c.appliesTo] })),
requirements: model.requirements.map(r => ({ ...r, relations: [...r.relations] })),
};
}
/**
* Decide what id to use for a newly-added element.
* - If the requested id is unused, it sticks. (Most common path.)
* - Otherwise, append `_2`, `_3`, … until free, and record the mapping from
* the requested id to the assigned id so subsequent ops in the same batch
* can reference the new element by its tempId.
*/
function resolveAddId(
desiredId: string,
tempId: string | undefined,
idMapping: Record<string, string>,
existing: string[]
): string {
const taken = new Set(existing);
if (!taken.has(desiredId)) {
if (tempId) idMapping[tempId] = desiredId;
return desiredId;
}
let suffix = 2;
while (taken.has(`${desiredId}_${suffix}`)) suffix++;
const final = `${desiredId}_${suffix}`;
if (tempId) idMapping[tempId] = final;
idMapping[desiredId] = final;
return final;
}
function assertExists<T extends { id: string }>(items: T[], id: string, what: string): void {
if (!items.find(i => i.id === id)) throw missing(what, id);
}
function missing(what: string, id: string): Error {
return new Error(`${what} "${id}" not found`);
}
function classifyError(err: unknown): ApplyError["code"] {
const msg = (err as Error).message ?? "";
if (msg.includes("not found")) return "MISSING_ELEMENT";
if (msg.includes("duplicate")) return "DUPLICATE_ID";
return "INVALID_PATCH";
}

235
apps/web/lib/sync/ops.ts Normal file
View File

@@ -0,0 +1,235 @@
// The canonical ModelOp alphabet — every mutation to a SysMLModel is
// expressible as one or more of these. See docs/sync.md §3 for the design.
//
// `tempId` lets clients optimistically create elements with a client-generated
// id; applyOps may rewrite to a canonical id and return the mapping. (M5
// in-memory: tempId IS the canonical id; the rewrite seam is here for the
// later DB / SSE iteration.)
import type {
Block,
BlockKind,
Association,
AssociationKind,
Constraint,
Property,
PropertyType,
Multiplicity,
Requirement,
RequirementRelation,
} from "../sysml/model";
// ─── Block ops ───────────────────────────────────────────────────────────
export interface AddBlockOp {
kind: "add-block";
block: Block;
tempId?: string;
}
export interface UpdateBlockOp {
kind: "update-block";
blockId: string;
patch: Partial<Pick<Block, "label" | "kind" | "stereotypes" | "description">>;
}
export interface RemoveBlockOp {
kind: "remove-block";
blockId: string;
}
// ─── Property ops ────────────────────────────────────────────────────────
export interface AddPropertyOp {
kind: "add-property";
blockId: string;
property: Property;
tempId?: string;
}
export interface UpdatePropertyOp {
kind: "update-property";
blockId: string;
propertyId: string;
patch: Partial<Pick<Property, "name" | "type" | "multiplicity" | "description">>;
}
export interface RemovePropertyOp {
kind: "remove-property";
blockId: string;
propertyId: string;
}
// ─── Association ops ─────────────────────────────────────────────────────
export interface AddAssociationOp {
kind: "add-association";
association: Association;
tempId?: string;
}
export interface UpdateAssociationOp {
kind: "update-association";
associationId: string;
patch: Partial<Pick<Association, "fromBlockId" | "toBlockId" | "label" | "kind" | "multiplicity">>;
}
export interface RemoveAssociationOp {
kind: "remove-association";
associationId: string;
}
// ─── Constraint ops ──────────────────────────────────────────────────────
export interface AddConstraintOp {
kind: "add-constraint";
constraint: Constraint;
tempId?: string;
}
export interface UpdateConstraintOp {
kind: "update-constraint";
constraintId: string;
patch: Partial<Pick<Constraint, "label" | "expression" | "appliesTo">>;
}
export interface RemoveConstraintOp {
kind: "remove-constraint";
constraintId: string;
}
// ─── Requirement ops ─────────────────────────────────────────────────────
export interface AddRequirementOp {
kind: "add-requirement";
requirement: Requirement;
tempId?: string;
}
export interface UpdateRequirementOp {
kind: "update-requirement";
requirementId: string;
patch: Partial<Pick<Requirement, "tag" | "text">>;
}
export interface RemoveRequirementOp {
kind: "remove-requirement";
requirementId: string;
}
export interface AddRelationOp {
kind: "add-relation";
requirementId: string;
relation: RequirementRelation;
}
export interface RemoveRelationOp {
kind: "remove-relation";
requirementId: string;
relationIndex: number;
}
// ─── Union ───────────────────────────────────────────────────────────────
export type ModelOp =
| AddBlockOp
| UpdateBlockOp
| RemoveBlockOp
| AddPropertyOp
| UpdatePropertyOp
| RemovePropertyOp
| AddAssociationOp
| UpdateAssociationOp
| RemoveAssociationOp
| AddConstraintOp
| UpdateConstraintOp
| RemoveConstraintOp
| AddRequirementOp
| UpdateRequirementOp
| RemoveRequirementOp
| AddRelationOp
| RemoveRelationOp;
// ─── Op constructors (call sites stay readable) ─────────────────────────
export function addBlock(block: Block, tempId?: string): AddBlockOp {
return { kind: "add-block", block, tempId };
}
export function updateBlock(blockId: string, patch: UpdateBlockOp["patch"]): UpdateBlockOp {
return { kind: "update-block", blockId, patch };
}
export function removeBlock(blockId: string): RemoveBlockOp {
return { kind: "remove-block", blockId };
}
export function addProperty(blockId: string, property: Property, tempId?: string): AddPropertyOp {
return { kind: "add-property", blockId, property, tempId };
}
export function updateProperty(blockId: string, propertyId: string, patch: UpdatePropertyOp["patch"]): UpdatePropertyOp {
return { kind: "update-property", blockId, propertyId, patch };
}
export function removeProperty(blockId: string, propertyId: string): RemovePropertyOp {
return { kind: "remove-property", blockId, propertyId };
}
export function addAssociation(association: Association, tempId?: string): AddAssociationOp {
return { kind: "add-association", association, tempId };
}
export function updateAssociation(associationId: string, patch: UpdateAssociationOp["patch"]): UpdateAssociationOp {
return { kind: "update-association", associationId, patch };
}
export function removeAssociation(associationId: string): RemoveAssociationOp {
return { kind: "remove-association", associationId };
}
export function addConstraint(constraint: Constraint, tempId?: string): AddConstraintOp {
return { kind: "add-constraint", constraint, tempId };
}
export function updateConstraint(constraintId: string, patch: UpdateConstraintOp["patch"]): UpdateConstraintOp {
return { kind: "update-constraint", constraintId, patch };
}
export function removeConstraint(constraintId: string): RemoveConstraintOp {
return { kind: "remove-constraint", constraintId };
}
export function addRequirement(requirement: Requirement, tempId?: string): AddRequirementOp {
return { kind: "add-requirement", requirement, tempId };
}
export function updateRequirement(requirementId: string, patch: UpdateRequirementOp["patch"]): UpdateRequirementOp {
return { kind: "update-requirement", requirementId, patch };
}
export function removeRequirement(requirementId: string): RemoveRequirementOp {
return { kind: "remove-requirement", requirementId };
}
export function addRelation(requirementId: string, relation: RequirementRelation): AddRelationOp {
return { kind: "add-relation", requirementId, relation };
}
export function removeRelation(requirementId: string, relationIndex: number): RemoveRelationOp {
return { kind: "remove-relation", requirementId, relationIndex };
}
// ─── Helpers ─────────────────────────────────────────────────────────────
let counter = 0;
/** Generate a temp id. Distinct prefix so applyOps can recognize them. */
export function tempId(prefix = "tmp"): string {
counter++;
return `${prefix}_${Date.now().toString(36)}_${counter}`;
}
/** Quick property factory used by clients producing add-property ops. */
export function newProperty(name: string, type: PropertyType = { kind: "string" }, multiplicity: Multiplicity = "0..1"): Property {
return { id: tempId("p"), name, type, multiplicity };
}

16
apps/web/styles/base.css
View File

@@ -1043,3 +1043,19 @@ button { font-family: inherit; }
.sysml-node-issue-soft {
border-style: dotted !important;
}
/* ─── Chip inline rename (M5) ─── */
.chip-rename {
font-family: inherit;
font-size: 0.86em;
color: inherit;
background: var(--surface);
border: none;
border-bottom: 1px solid var(--accent);
outline: none;
padding: 0 1px;
min-width: 50px;
font-weight: 500;
}
.chip-rename:focus { background: var(--surface-2); }
.chip.chip-editing { box-shadow: 0 0 0 1.5px var(--accent); }