@likec4/diagram 1.59.4 → 1.60.0

package/dist/overlays/relationships-browser/custom/nodeTypes.mjs

@@ -0,0 +1,108 @@
+import { __name } from "../../../_virtual/_rolldown/runtime.mjs";
+import { useCallbackRef } from "../../../hooks/useCallbackRef.mjs";
+import { useEnabledFeatures } from "../../../context/DiagramFeatures.mjs";
+import { useDiagram } from "../../../hooks/safeContext.mjs";
+import { CompoundDetailsButton } from "../../../base-primitives/compound/CompoundDetailsButton.mjs";
+import { CompoundNodeContainer } from "../../../base-primitives/compound/CompoundNodeContainer.mjs";
+import { CompoundTitle } from "../../../base-primitives/compound/CompoundTitle.mjs";
+import { ElementData } from "../../../base-primitives/element/ElementData.mjs";
+import { ElementDetailsButton } from "../../../base-primitives/element/ElementDetailsButton.mjs";
+import { ElementNodeContainer } from "../../../base-primitives/element/ElementNodeContainer.mjs";
+import { ElementShape } from "../../../base-primitives/element/ElementShape.mjs";
+import { ElementTags as ElementTags$1 } from "../../../base-primitives/element/ElementTags.mjs";
+import { ElementActions } from "./ElementActions.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Handle, Position } from "@xyflow/react";
+
+//#region src/overlays/relationships-browser/custom/nodeTypes.tsx
+function ElementTags(props) {
+	const diagram = useDiagram();
+	return /* @__PURE__ */ jsx(ElementTags$1, {
+		onTagClick: useCallbackRef((tag) => {
+			diagram.openSearch(tag);
+		}),
+		...props
+	});
+}
+const ElementDetailsButtonWithHandler = (props) => {
+	const diagram = useDiagram();
+	return /* @__PURE__ */ jsx(ElementDetailsButton, {
+		...props,
+		onClick: (e) => {
+			e.stopPropagation();
+			diagram.openElementDetails(props.data.fqn);
+		}
+	});
+};
+function ElementNode(props) {
+	const { enableElementTags } = useEnabledFeatures();
+	return /* @__PURE__ */ jsxs(ElementNodeContainer, {
+		layoutId: props.id,
+		nodeProps: props,
+		children: [
+			/* @__PURE__ */ jsx(ElementShape, { ...props }),
+			/* @__PURE__ */ jsx(ElementData, { ...props }),
+			enableElementTags && /* @__PURE__ */ jsx(ElementTags, { ...props }),
+			/* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props }),
+			/* @__PURE__ */ jsx(ElementActions, { ...props }),
+			/* @__PURE__ */ jsx(ElementPorts, { ...props })
+		]
+	}, props.id);
+}
+function CompoundNode(props) {
+	const diagram = useDiagram();
+	return /* @__PURE__ */ jsxs(CompoundNodeContainer, {
+		layoutId: props.id,
+		nodeProps: props,
+		children: [
+			/* @__PURE__ */ jsx(CompoundTitle, { ...props }),
+			/* @__PURE__ */ jsx(CompoundDetailsButton, {
+				...props,
+				onClick: (e) => {
+					e.stopPropagation();
+					diagram.openElementDetails(props.data.fqn);
+				}
+			}),
+			/* @__PURE__ */ jsx(CompoundPorts, { ...props })
+		]
+	}, props.id);
+}
+const ElementPorts = ({ data: { ports, height: h } }) => {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [ports.in.map((id, i) => /* @__PURE__ */ jsx(Handle, {
+		id,
+		type: "target",
+		position: Position.Left,
+		style: {
+			visibility: "hidden",
+			top: `${15 + (i + 1) * ((h - 30) / (ports.in.length + 1))}px`
+		}
+	}, id)), ports.out.map((id, i) => /* @__PURE__ */ jsx(Handle, {
+		id,
+		type: "source",
+		position: Position.Right,
+		style: {
+			visibility: "hidden",
+			top: `${15 + (i + 1) * ((h - 30) / (ports.out.length + 1))}px`
+		}
+	}, id))] });
+};
+const CompoundPorts = ({ data }) => /* @__PURE__ */ jsxs(Fragment, { children: [data.ports.in.map((id, i) => /* @__PURE__ */ jsx(Handle, {
+	id,
+	type: "target",
+	position: Position.Left,
+	style: {
+		visibility: "hidden",
+		top: `${20 * (i + 1)}px`
+	}
+}, id)), data.ports.out.map((id, i) => /* @__PURE__ */ jsx(Handle, {
+	id,
+	type: "source",
+	position: Position.Right,
+	style: {
+		visibility: "hidden",
+		top: `${20 * (i + 1)}px`
+	}
+}, id))] });
+
+//#endregion
+export { CompoundNode, CompoundPorts, ElementNode, ElementPorts };

package/dist/overlays/relationships-browser/hooks.mjs

@@ -0,0 +1,58 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { createContext, useContext, useMemo } from "react";
+import { shallowEqual } from "fast-equals";
+import { nonNullable } from "@likec4/core";
+import { useSelector } from "@xstate/react";
+
+//#region src/overlays/relationships-browser/hooks.ts
+const RelationshipsBrowserActorContext = createContext(null);
+function useRelationshipsBrowserActor() {
+	return nonNullable(useContext(RelationshipsBrowserActorContext), "No RelationshipsBrowserActorContext");
+}
+function useRelationshipsBrowserState(selector, compare = shallowEqual) {
+	const actor = useRelationshipsBrowserActor();
+	return useSelector(actor, selector, compare);
+}
+function useRelationshipsBrowser() {
+	const actor = useRelationshipsBrowserActor();
+	return useMemo(() => ({
+		actor,
+		get rootElementId() {
+			return `relationships-browser-${actor.sessionId.replaceAll(":", "_")}`;
+		},
+		getState: () => actor.getSnapshot().context,
+		send: actor.send,
+		updateView: (layouted) => {
+			if (actor.getSnapshot().status === "active") actor.send({
+				type: "update.view",
+				layouted
+			});
+		},
+		changeScope: (scope) => {
+			actor.send({
+				type: "change.scope",
+				scope
+			});
+		},
+		navigateTo: (subject, fromNode) => {
+			actor.send({
+				type: "navigate.to",
+				subject,
+				fromNode
+			});
+		},
+		fitDiagram: () => {
+			actor.send({ type: "fitDiagram" });
+		},
+		close: () => {
+			if (actor._parent) actor._parent?.send({
+				type: "close",
+				actorId: actor.id
+			});
+			else actor.send({ type: "close" });
+		}
+	}), [actor]);
+}
+
+//#endregion
+export { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserActor, useRelationshipsBrowserState };

package/dist/overlays/relationships-browser/layout.d.mts

@@ -0,0 +1,30 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { RelationshipsBrowserTypes } from "./_types.mjs";
+import { DiagramEdge, DiagramNode, DiagramView, ElementKind, Fqn, MarkdownOrString, ViewId } from "@likec4/core/types";
+import { LikeC4ViewModel } from "@likec4/core/model";
+import "@likec4/core/compute-view";
+//#region src/overlays/relationships-browser/layout.d.ts
+export type LayoutRelationshipsViewResult = {
+  subject: Fqn;
+  subjectExistsInScope: boolean;
+  nodes: LayoutRelationshipsViewResult.Node[];
+  edges: LayoutRelationshipsViewResult.Edge[];
+  bounds: DiagramView['bounds'];
+};
+export declare namespace LayoutRelationshipsViewResult {
+  const Empty: ElementKind;
+  type Node = Omit<DiagramNode, 'deploymentRef' | 'description' | 'inEdges' | 'outEdges'> & {
+    description: MarkdownOrString | null;
+    column: RelationshipsBrowserTypes.Column;
+    ports: RelationshipsBrowserTypes.Ports;
+    existsInCurrentView: boolean;
+  };
+  type Edge = Omit<DiagramEdge, 'description'> & {
+    sourceFqn: Fqn;
+    targetFqn: Fqn;
+    sourceHandle: string;
+    targetHandle: string;
+    existsInCurrentView: boolean;
+  };
+}
+//#endregion

package/dist/overlays/relationships-browser/layout.mjs

@@ -0,0 +1,428 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { useLikeC4Model } from "../../hooks/useLikeC4Model.mjs";
+import { useMemo } from "react";
+import { concat, filter, find, forEachObj, groupBy, map, mapToObj, omit, only, pipe, prop, reduce, sortBy, tap, unique } from "remeda";
+import { DefaultMap, ifind, invariant, nonNullable, toArray } from "@likec4/core/utils";
+import { exact, preferSummary } from "@likec4/core/types";
+import { computeRelationshipsView, treeFromElements } from "@likec4/core/compute-view";
+import dagre from "@dagrejs/dagre";
+
+//#region src/overlays/relationships-browser/layout.ts
+/**
+* All constants related to the layout
+*/
+const Sizes = {
+	dagre: {
+		ranksep: 60,
+		nodesep: 35,
+		edgesep: 25
+	},
+	edgeLabel: {
+		width: 140,
+		height: 10,
+		minlen: 1,
+		weight: 1
+	},
+	emptyNodeOffset: 120,
+	nodeWidth: 330,
+	nodeHeight: 180,
+	spacerHeight: 0,
+	compound: {
+		labelHeight: 2,
+		paddingTop: 50,
+		paddingBottom: 32
+	}
+};
+function createGraph() {
+	const g = new dagre.graphlib.Graph({
+		directed: true,
+		compound: true,
+		multigraph: true
+	});
+	g.setGraph({
+		...Sizes.dagre,
+		rankdir: "LR"
+	});
+	g.setDefaultEdgeLabel(() => ({ ...Sizes.edgeLabel }));
+	g.setDefaultNodeLabel(() => ({}));
+	return g;
+}
+const PortSuffix = "-port";
+function createNodes(column, elements, g) {
+	const graphNodes = new DefaultMap((key) => ({
+		id: `${column}-${key}`,
+		portId: `${column}-${key}`
+	}));
+	const tree = treeFromElements(elements);
+	for (const element of tree.sorted) {
+		const isCompound = tree.children(element).length > 0;
+		const fqn = element.id;
+		const id = `${column}-${fqn}`;
+		const portId = isCompound ? `${id}${PortSuffix}` : id;
+		graphNodes.set(fqn, {
+			id,
+			portId
+		});
+		g.setNode(id, {
+			column,
+			element,
+			isCompound,
+			portId,
+			inPorts: [],
+			outPorts: [],
+			width: Sizes.nodeWidth,
+			height: Sizes.nodeHeight
+		});
+		if (isCompound) {
+			g.setNode(portId, {
+				element,
+				portId,
+				isCompound,
+				inPorts: [],
+				outPorts: [],
+				width: Sizes.nodeWidth - Sizes.dagre.ranksep,
+				height: Sizes.compound.labelHeight
+			});
+			g.setParent(portId, id);
+		}
+		const parent = tree.parent(element);
+		if (parent) g.setParent(id, `${column}-${parent.id}`);
+	}
+	return {
+		...tree,
+		byId: (id) => {
+			const element = tree.byId(id);
+			return {
+				element,
+				graph: graphNodes.get(element.id)
+			};
+		},
+		graphNodes
+	};
+}
+/**
+* Apply dagre layout to the graph
+* And return a function to get node bounds for xyflow
+*/
+function applyDagreLayout(g) {
+	dagre.layout(g, {});
+	return (nodeId) => {
+		const { x, y, width, height } = g.node(nodeId);
+		return {
+			position: {
+				x: x - Math.round(width / 2),
+				y: y - Math.round(height / 2)
+			},
+			width,
+			height
+		};
+	};
+}
+let LayoutRelationshipsViewResult;
+(function(_LayoutRelationshipsViewResult) {
+	_LayoutRelationshipsViewResult.Empty = "@empty";
+})(LayoutRelationshipsViewResult || (LayoutRelationshipsViewResult = {}));
+function layoutRelationshipsView(data, scope) {
+	const g = createGraph();
+	const incomers = createNodes("incomers", data.incomers, g);
+	const subjects = createNodes("subjects", data.subjects, g);
+	const outgoers = createNodes("outgoers", data.outgoers, g);
+	const edges = [];
+	pipe(concat(pipe(toArray(data.incoming), map((r) => ({
+		id: r.source.id,
+		sourceFqn: r.source.id,
+		targetFqn: r.target.id,
+		source: incomers.byId(r.source.id).graph,
+		target: subjects.byId(r.target.id).graph,
+		relation: r
+	}))), pipe(toArray(data.outgoing), map((r) => ({
+		id: r.target.id,
+		sourceFqn: r.source.id,
+		targetFqn: r.target.id,
+		source: subjects.byId(r.source.id).graph,
+		target: outgoers.byId(r.target.id).graph,
+		relation: r
+	})))), map((r) => ({
+		...r,
+		expr: `${r.source.id}->${r.target.id}`
+	})), groupBy(prop("expr")), forEachObj((grouped) => {
+		const source = grouped[0].source;
+		const target = grouped[0].target;
+		const name = grouped[0].expr;
+		g.node(source.id).outPorts.push(target.id);
+		g.node(target.id).inPorts.push(source.id);
+		g.setEdge(source.portId, target.portId, { ...Sizes.edgeLabel }, name);
+		edges.push({
+			name,
+			sourceFqn: grouped[0].sourceFqn,
+			targetFqn: grouped[0].targetFqn,
+			source: source.id,
+			sourceHandle: source.id + "_out" + (g.node(source.id).outPorts.length - 1),
+			target: target.id,
+			targetHandle: target.id + "_in" + (g.node(target.id).inPorts.length - 1),
+			relations: map(grouped, prop("relation"))
+		});
+	}));
+	for (const subjectNode of subjects.graphNodes.values()) {
+		const nodeId = subjectNode.id;
+		const node = g.node(nodeId);
+		if (node.isCompound) continue;
+		const edgeCount = Math.max(g.inEdges(nodeId)?.length ?? 0, g.outEdges(nodeId)?.length ?? 0);
+		if (edgeCount > 2) node.height = node.height + (edgeCount - 3) * 14;
+	}
+	const nodeIds = [
+		...incomers.graphNodes.values(),
+		...subjects.graphNodes.values(),
+		...outgoers.graphNodes.values()
+	];
+	if (incomers.graphNodes.size == 0) {
+		const id = "incomers-empty";
+		g.setNode(id, {
+			column: "incomers",
+			element: null,
+			isCompound: false,
+			portId: id,
+			inPorts: [],
+			outPorts: [],
+			width: Sizes.nodeWidth,
+			height: Sizes.nodeHeight
+		});
+		for (const subjectNode of subjects.graphNodes.values()) g.setEdge(id, subjectNode.portId);
+		nodeIds.push({
+			id,
+			portId: id
+		});
+	}
+	if (outgoers.graphNodes.size == 0) {
+		const id = "outgoers-empty";
+		g.setNode(id, {
+			column: "outgoers",
+			element: null,
+			isCompound: false,
+			portId: id,
+			inPorts: [],
+			outPorts: [],
+			width: Sizes.nodeWidth,
+			height: Sizes.nodeHeight
+		});
+		for (const subjectNode of subjects.graphNodes.values()) g.setEdge(subjectNode.portId, id);
+		nodeIds.push({
+			id,
+			portId: id
+		});
+	}
+	const edgeCount = g.edgeCount();
+	if (edgeCount > 10) for (const edge of g.edges()) g.setEdge(edge, {
+		...Sizes.edgeLabel,
+		width: edgeCount > 25 ? 800 : 400
+	});
+	const dagreBounds = applyDagreLayout(g);
+	const _calculatedNodeBounds = pipe(nodeIds, filter((n) => n.id === n.portId), mapToObj((n) => [n.id, dagreBounds(n.id)]));
+	function nodeBounds(nodeId) {
+		return _calculatedNodeBounds[nodeId] ??= pipe(g.children(nodeId) ?? [], filter((id) => !id.endsWith(PortSuffix)), map((id) => nodeBounds(id)), tap((bounds) => {
+			invariant(bounds.length > 0, `Node ${nodeId} has no nested nodes`);
+		}), reduce((acc, bounds) => {
+			return {
+				minY: Math.min(acc.minY, bounds.position.y),
+				maxY: Math.max(acc.maxY, bounds.position.y + bounds.height)
+			};
+		}, {
+			minY: Infinity,
+			maxY: -Infinity
+		}), ({ minY, maxY }) => {
+			const { position: { x }, width } = dagreBounds(nodeId);
+			minY = minY - Sizes.compound.paddingTop;
+			maxY = maxY + Sizes.compound.paddingBottom;
+			return {
+				position: {
+					x,
+					y: minY
+				},
+				width,
+				height: maxY - minY
+			};
+		});
+	}
+	function nodeLevel(nodeId) {
+		const parent = g.parent(nodeId);
+		if (parent) return nodeLevel(parent) + 1;
+		return 0;
+	}
+	function nodeDepth(nodeId) {
+		const children = g.children(nodeId) ?? [];
+		if (children.length === 0) return 0;
+		return 1 + Math.max(...children.map(nodeDepth));
+	}
+	const sortedPorts = (nodeId, type, ports) => {
+		return pipe(ports, map((port, index) => {
+			return {
+				port: nodeId + "_" + type + index,
+				topY: nodeBounds(port).position.y
+			};
+		}), sortBy(prop("topY")), map(prop("port")));
+	};
+	let minX = 0;
+	let minY = 0;
+	const [subject] = [...subjects.root];
+	invariant(subject, "Subjects should not be empty");
+	let subjectBounds = nodeBounds(subjects.graphNodes.get(subject.id).id);
+	const nodes = nodeIds.map(({ id }) => {
+		const { element, inPorts, outPorts, column } = g.node(id);
+		let { position, width, height } = nodeBounds(id);
+		if (!element) {
+			height = Math.min(subjectBounds.height, 300);
+			position.y = subjectBounds.position.y + subjectBounds.height / 2 - height / 2;
+			if (column === "incomers") width = subjectBounds.position.x - Sizes.emptyNodeOffset - position.x;
+			else {
+				const rightX = position.x + width;
+				position.x = subjectBounds.position.x + subjectBounds.width + Sizes.emptyNodeOffset;
+				width = rightX - position.x;
+			}
+			return {
+				id,
+				parent: null,
+				x: position.x,
+				y: position.y,
+				title: "empty node",
+				description: null,
+				technology: null,
+				tags: [],
+				links: [],
+				color: "muted",
+				shape: "rectangle",
+				style: {
+					border: "dashed",
+					opacity: 50
+				},
+				kind: LayoutRelationshipsViewResult.Empty,
+				level: 0,
+				labelBBox: {
+					x: position.x,
+					y: position.y,
+					width,
+					height
+				},
+				children: [],
+				width,
+				height,
+				column,
+				ports: {
+					in: [],
+					out: []
+				},
+				existsInCurrentView: false
+			};
+		}
+		const parentId = g.parent(id);
+		const children = (g.children(id) ?? []).filter((c) => !c.endsWith(PortSuffix));
+		minX = Math.min(minX, position.x);
+		minY = Math.min(minY, position.y);
+		const navigateTo = scope ? ifind(element.scopedViews(), (v) => v.id !== scope.id)?.id ?? null : null;
+		const inheritFromNode = scope?.findNodeWithElement(element.id);
+		const scopedAncestor = scope && !inheritFromNode ? ifind(element.ancestors(), (a) => !!scope.findNodeWithElement(a.id))?.id : null;
+		const inheritFromNodeOrAncestor = inheritFromNode ?? (scopedAncestor && scope?.findNodeWithElement(scopedAncestor));
+		return {
+			id,
+			parent: parentId ?? null,
+			x: position.x,
+			y: position.y,
+			title: element.title,
+			description: preferSummary(element.$element) ?? null,
+			technology: element.technology,
+			tags: [...element.tags],
+			links: null,
+			color: inheritFromNodeOrAncestor?.color ?? element.color,
+			shape: inheritFromNode?.shape ?? element.shape,
+			icon: inheritFromNode?.icon ?? element.icon ?? "none",
+			modelRef: element.id,
+			kind: element.kind,
+			level: nodeLevel(id),
+			labelBBox: {
+				x: position.x,
+				y: position.y,
+				width,
+				height
+			},
+			style: omit({
+				...(inheritFromNode ?? inheritFromNodeOrAncestor)?.style,
+				...element.$element.style
+			}, [
+				"color",
+				"shape",
+				"icon"
+			]),
+			navigateTo,
+			...children.length > 0 && { depth: nodeDepth(id) },
+			children,
+			width,
+			height,
+			column,
+			ports: {
+				in: sortedPorts(id, "in", inPorts),
+				out: sortedPorts(id, "out", outPorts)
+			},
+			existsInCurrentView: !!inheritFromNode
+		};
+	});
+	return {
+		subjectExistsInScope: !scope || scope.includesElement(subject.id),
+		bounds: {
+			x: Math.min(minX, 0),
+			y: Math.min(minY, 0),
+			width: g.graph().width ?? 100,
+			height: g.graph().height ?? 100
+		},
+		nodes,
+		edges: g.edges().reduce((acc, e) => {
+			const edge = g.edge(e);
+			const ename = e.name;
+			if (!ename) return acc;
+			const { name, source, sourceFqn, target, targetFqn, relations, sourceHandle, targetHandle } = nonNullable(find(edges, (e) => e.name === ename));
+			const onlyRelation = only(relations);
+			const label = onlyRelation?.title ?? "untitled";
+			const isMultiple = relations.length > 1;
+			const navigateTo = only(unique(relations.flatMap((r) => r.navigateTo?.id ? r.navigateTo.id : [])));
+			acc.push(exact({
+				id: name,
+				sourceFqn,
+				source,
+				sourceHandle,
+				targetFqn,
+				target,
+				targetHandle,
+				label: isMultiple ? `${relations.length} relationships` : label,
+				navigateTo,
+				color: onlyRelation?.color ?? "gray",
+				existsInCurrentView: !scope || relations.every((r) => scope.includesRelation(r.id)),
+				points: edge.points.map((p) => [p.x, p.y]),
+				line: onlyRelation?.line ?? "dashed",
+				head: onlyRelation?.head,
+				tail: onlyRelation?.tail,
+				relations: relations.map((r) => r.id),
+				parent: null
+			}));
+			return acc;
+		}, [])
+	};
+}
+function useRelationshipsView(subject, viewId, scope) {
+	const model = useLikeC4Model();
+	return useMemo(() => {
+		const view = viewId ? model.findView(viewId) : null;
+		const data = layoutRelationshipsView(computeRelationshipsView(subject, model, viewId, scope), scope === "view" ? view : null);
+		if (view && (scope === "global" || !data.subjectExistsInScope)) data.edges = data.edges.map((edge) => {
+			edge.existsInCurrentView = edge.relations.every((r) => view.includesRelation(r));
+			return edge;
+		});
+		return Object.assign(data, { subject });
+	}, [
+		model,
+		subject,
+		viewId,
+		scope,
+		computeRelationshipsView
+	]);
+}
+
+//#endregion
+export { LayoutRelationshipsViewResult, layoutRelationshipsView, useRelationshipsView };