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

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;
}