@likec4/diagram 1.55.1 → 1.57.0

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

@@ -1,478 +1,426 @@
-import { computeRelationshipsView, treeFromElements } from '@likec4/core/compute-view';
-import { useMemo } from 'react';
-import dagre from '@dagrejs/dagre';
-import { preferSummary, exact } from '@likec4/core/types';
-import { toArray, invariant, ifind, nonNullable, DefaultMap } from '@likec4/core/utils';
-import { pipe, concat, map, groupBy, prop, forEachObj, filter, mapToObj, omit, find, only, unique, tap, reduce, sortBy } from 'remeda';
-import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
-
-const Sizes = {
-  dagre: {
-    ranksep: 60,
-    nodesep: 35,
-    edgesep: 25
-  },
-  edgeLabel: {
-    width: 140,
-    height: 10,
-    minlen: 1,
-    weight: 1
-  },
-  emptyNodeOffset: 120,
-  nodeWidth: 330,
-  nodeHeight: 180,
-  compound: {
-    labelHeight: 2,
-    paddingTop: 50,
-    paddingBottom: 32
-  }
+import "../../_virtual/_rolldown/runtime.js";
+import { useLikeC4Model } from "../../hooks/useLikeC4Model.js";
+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 { computeRelationshipsView, treeFromElements } from "@likec4/core/compute-view";
+import dagre from "@dagrejs/dagre";
+import { exact, preferSummary } from "@likec4/core/types";
+//#region src/overlays/relationships-browser/layout.ts
+/**
+* All constants related to the layout
+*/
+var 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 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";
+var 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);
-      const graph = graphNodes.get(element.id);
-      return {
-        element,
-        graph
-      };
-    },
-    graphNodes
-  };
+	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, {
-    // disableOptimalOrderHeuristic: true,
-  });
-  return (nodeId) => {
-    const node = g.node(nodeId);
-    const { x, y, width, height } = node;
-    return {
-      position: {
-        x: x - Math.round(width / 2),
-        y: y - Math.round(height / 2)
-      },
-      width,
-      height
-    };
-  };
+	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
+		};
+	};
 }
 var LayoutRelationshipsViewResult;
-((LayoutRelationshipsViewResult2) => {
-  LayoutRelationshipsViewResult2.Empty = "@empty";
+(function(_LayoutRelationshipsViewResult) {
+	_LayoutRelationshipsViewResult.Empty = "@empty";
 })(LayoutRelationshipsViewResult || (LayoutRelationshipsViewResult = {}));
 function layoutRelationshipsView(data, scope) {
-  const g = createGraph();
-  const incomers = createNodes("incomers", data.incomers, g), subjects = createNodes("subjects", data.subjects, g), 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}`
-    })),
-    // Group if same source and target
-    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 edgeCount2 = Math.max(g.inEdges(nodeId)?.length ?? 0, g.outEdges(nodeId)?.length ?? 0);
-    if (edgeCount2 > 2) {
-      node.height = node.height + (edgeCount2 - 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,
-    // Compound nodes have different portId
-    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: minY2, maxY }) => {
-        const {
-          position: { x },
-          width
-        } = dagreBounds(nodeId);
-        minY2 = minY2 - Sizes.compound.paddingTop;
-        maxY = maxY + Sizes.compound.paddingBottom;
-        return {
-          position: {
-            x,
-            y: minY2
-          },
-          width,
-          height: maxY - minY2
-        };
-      }
-    );
-  }
-  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, (e2) => e2.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;
-    }, [])
-  };
+	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]);
+	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
+	]);
 }
-
-export { LayoutRelationshipsViewResult, layoutRelationshipsView, useRelationshipsView };
+//#endregion
+export { LayoutRelationshipsViewResult, useRelationshipsView };