@likec4/diagram 1.59.4 → 1.61.0

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

@@ -0,0 +1,57 @@
+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";
+
+// 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]);
+}
+
+export { RelationshipsBrowserActorContext, useRelationshipsBrowser, useRelationshipsBrowserActor, useRelationshipsBrowserState };

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

@@ -0,0 +1,28 @@
+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";
+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;
+  };
+}

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

@@ -0,0 +1,477 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { useEnabledFeatures } from "../../context/DiagramFeatures.mjs";
+import { useEdgeLabelFontLoader } from "../../hooks/useEdgeLabelFontLoader.mjs";
+import { useLikeC4Model } from "../../hooks/useLikeC4Model.mjs";
+import { measureEdgeLabel } from "../../utils/measure-edge-label.mjs";
+import { useEffect, useMemo } from "react";
+import { concat, filter, find, forEachObj, groupBy, isNumber, 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";
+
+// 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,
+		labelpos: "c"
+	},
+	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, { withNavigateButtons = false } = {}) {
+	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);
+		const relations = map(grouped, prop("relation"));
+		const onlyRelation = only(relations);
+		const navigateTo = only(unique(relations.flatMap((r) => r.navigateTo?.id ? r.navigateTo.id : []))) ?? null;
+		const label = measureEdgeLabel({
+			label: relations.length > 1 ? `${relations.length} relationships` : onlyRelation?.title ?? "untitled",
+			withActionButton: withNavigateButtons && !!navigateTo
+		});
+		g.setEdge(source.portId, target.portId, {
+			...Sizes.edgeLabel,
+			width: label.width,
+			height: label.height
+		}, 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,
+			label,
+			navigateTo
+		});
+	}));
+	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) {
+		const minWidth = edgeCount > 25 ? 800 : 400;
+		for (const edge of g.edges()) {
+			const config = g.edge(edge);
+			const width = config["width"];
+			g.setEdge(edge, {
+				...config,
+				width: Math.max(isNumber(width) ? width : 0, minWidth)
+			});
+		}
+	}
+	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
+		};
+	});
+	const scopedEdges = scope ? [...scope.edges()] : [];
+	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, label, navigateTo } = nonNullable(find(edges, (e) => e.name === ename));
+			const onlyRelation = only(relations);
+			const scopedEdgesForGroup = scopedEdges.filter((edge) => relations.some((r) => edge.includesRelation(r.id)));
+			const commonScopedStyle = (values) => {
+				const [value] = values;
+				return values.length > 0 && values.every((v) => v === value) ? {
+					found: true,
+					value
+				} : { found: false };
+			};
+			const color = commonScopedStyle(scopedEdgesForGroup.map((edge) => edge.color));
+			const line = commonScopedStyle(scopedEdgesForGroup.map((edge) => edge.line));
+			const head = commonScopedStyle(scopedEdgesForGroup.map((edge) => edge.head));
+			const tail = commonScopedStyle(scopedEdgesForGroup.map((edge) => edge.tail));
+			const labelX = edge["x"];
+			const labelY = edge["y"];
+			invariant(isNumber(labelX) && isNumber(labelY), `dagre should place the label of ${name}`);
+			acc.push(exact({
+				id: name,
+				sourceFqn,
+				source,
+				sourceHandle,
+				targetFqn,
+				target,
+				targetHandle,
+				label: label.label,
+				labelBBox: {
+					x: Math.round(labelX - label.width / 2),
+					y: Math.round(labelY - label.height / 2),
+					width: label.width,
+					height: label.height
+				},
+				navigateTo,
+				color: color.found ? color.value ?? onlyRelation?.color ?? "gray" : onlyRelation?.color ?? "gray",
+				existsInCurrentView: !scope || relations.every((r) => scope.includesRelation(r.id)),
+				points: edge.points.map((p) => [p.x, p.y]),
+				line: line.found ? line.value ?? onlyRelation?.line ?? "dashed" : onlyRelation?.line ?? "dashed",
+				head: head.found ? head.value : onlyRelation?.head,
+				tail: tail.found ? tail.value : scopedEdgesForGroup.length === 0 ? onlyRelation?.tail : void 0,
+				relations: relations.map((r) => r.id),
+				parent: null
+			}));
+			return acc;
+		}, [])
+	};
+}
+function useRelationshipsView(subject, viewId, scope) {
+	const model = useLikeC4Model();
+	const { enableNavigateTo } = useEnabledFeatures();
+	const [fontsVersion, ensureFontsLoaded] = useEdgeLabelFontLoader();
+	const result = useMemo(() => {
+		const view = viewId ? model.findView(viewId) : null;
+		const data = layoutRelationshipsView(computeRelationshipsView(subject, model, viewId, scope), scope === "view" ? view : null, { withNavigateButtons: enableNavigateTo });
+		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,
+		enableNavigateTo,
+		fontsVersion
+	]);
+	useEffect(() => {
+		ensureFontsLoaded(result.edges.flatMap((edge) => edge.label ?? []));
+	}, [result]);
+	return result;
+}
+
+export { LayoutRelationshipsViewResult, layoutRelationshipsView, useRelationshipsView };

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

@@ -0,0 +1,146 @@
+import { __name } from "../../_virtual/_rolldown/runtime.mjs";
+import { ZIndexes } from "../../base/const.mjs";
+import { LayoutRelationshipsViewResult } from "./layout.mjs";
+import "@react-hookz/web";
+import { hasAtLeast } from "remeda";
+import { GroupElementKind, Queue, invariant, nonNullable } from "@likec4/core";
+
+// src/overlays/relationships-browser/useViewToNodesEdges.ts
+function viewToNodesEdge(view) {
+	const xynodes = [];
+	const xyedges = [];
+	const nodeLookup = /* @__PURE__ */ new Map();
+	const queue = Queue.from(view.nodes.reduce((acc, node) => {
+		nodeLookup.set(node.id, node);
+		if (!node.parent) acc.push({
+			node,
+			parent: null
+		});
+		return acc;
+	}, []));
+	const nodeById = (id) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`);
+	let next;
+	while (next = queue.dequeue()) {
+		const { node, parent } = next;
+		const isCompound = hasAtLeast(node.children, 1) || node.kind == GroupElementKind;
+		if (isCompound) for (const child of node.children) queue.enqueue({
+			node: nodeById(child),
+			parent: node
+		});
+		const position = {
+			x: node.x,
+			y: node.y
+		};
+		if (parent) {
+			position.x -= parent.x;
+			position.y -= parent.y;
+		}
+		const id = node.id;
+		const base = {
+			id,
+			position,
+			zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
+			style: {
+				width: node.width,
+				height: node.height
+			},
+			initialWidth: node.width,
+			initialHeight: node.height,
+			...parent && { parentId: parent.id }
+		};
+		const fqn = node.modelRef ?? null;
+		const navigateTo = { navigateTo: node.navigateTo ?? null };
+		switch (true) {
+			case node.kind === LayoutRelationshipsViewResult.Empty:
+				xynodes.push({
+					...base,
+					type: "empty",
+					data: { column: node.column }
+				});
+				break;
+			case isCompound && !!fqn:
+				xynodes.push({
+					...base,
+					type: "compound",
+					data: {
+						id,
+						column: node.column,
+						title: node.title,
+						color: node.color,
+						shape: node.shape,
+						style: node.style,
+						depth: node.depth ?? 0,
+						icon: node.icon ?? "none",
+						ports: node.ports,
+						existsInCurrentView: node.existsInCurrentView,
+						fqn,
+						...navigateTo
+					}
+				});
+				break;
+			default:
+				invariant(fqn, "Element should have either modelRef or deploymentRef");
+				xynodes.push({
+					...base,
+					type: "element",
+					data: {
+						id,
+						column: node.column,
+						fqn,
+						title: node.title,
+						technology: node.technology,
+						description: node.description,
+						height: node.height,
+						width: node.width,
+						color: node.color,
+						shape: node.shape,
+						icon: node.icon ?? "none",
+						ports: node.ports,
+						style: node.style,
+						existsInCurrentView: node.existsInCurrentView,
+						tags: node.tags,
+						...navigateTo
+					}
+				});
+		}
+	}
+	for (const edge of view.edges) {
+		const source = edge.source;
+		const target = edge.target;
+		const id = edge.id;
+		if (!hasAtLeast(edge.points, 2)) {
+			console.error("edge should have at least 2 points", edge);
+			continue;
+		}
+		if (!hasAtLeast(edge.relations, 1)) {
+			console.error("edge should have at least 1 relation", edge);
+			continue;
+		}
+		xyedges.push({
+			id,
+			type: "relationship",
+			source,
+			target,
+			sourceHandle: edge.sourceHandle,
+			targetHandle: edge.targetHandle,
+			data: {
+				sourceFqn: edge.sourceFqn,
+				targetFqn: edge.targetFqn,
+				relations: edge.relations,
+				color: edge.color ?? "gray",
+				label: edge.label,
+				labelBBox: edge.labelBBox ?? null,
+				navigateTo: edge.navigateTo ?? null,
+				line: edge.line ?? "dashed",
+				existsInCurrentView: edge.existsInCurrentView
+			},
+			interactionWidth: 20
+		});
+	}
+	return {
+		xynodes,
+		xyedges
+	};
+}
+
+export { viewToNodesEdge };