@eventcatalog/core 5.0.0-beta.8 → 5.0.0

package/eventcatalog/src/features/studio/grouping.ts

@@ -1,226 +0,0 @@
-import type { Node, XYPosition } from '@xyflow/react';
-import { canGoInContainer, getNodeSize, isGroupType } from './node-types';
-
-/**
- * Containers: domains and systems shown as boxes that other nodes sit in.
- * A node inside one has its parentId, and its position is relative to the container.
- */
-
-/** Room around what's in a container, and for its header */
-export const GROUP_PADDING = { top: 80, right: 40, bottom: 40, left: 40 };
-
-type Rect = { x: number; y: number; width: number; height: number };
-
-const byId = (nodes: Node[]) => new Map(nodes.map((node) => [node.id, node]));
-
-/** A node's size: as rendered (in the browser), as set (containers, notes), or what its type renders at */
-export const sizeOf = (node: Node) => ({
-  width: node.measured?.width ?? node.width ?? getNodeSize(node.type).width,
-  height: node.measured?.height ?? node.height ?? getNodeSize(node.type).height,
-});
-
-/** Nodes are positioned relative to their container, so walk up the chain to get the canvas position */
-export const getAbsolutePosition = (node: Node, lookup: Map<string, Node>): XYPosition => {
-  const parent = node.parentId ? lookup.get(node.parentId) : undefined;
-  if (!parent) return node.position;
-  const parentPosition = getAbsolutePosition(parent, lookup);
-  return { x: parentPosition.x + node.position.x, y: parentPosition.y + node.position.y };
-};
-
-export const getAbsoluteRect = (node: Node, lookup: Map<string, Node>): Rect => ({
-  ...getAbsolutePosition(node, lookup),
-  ...sizeOf(node),
-});
-
-const getDepth = (node: Node, lookup: Map<string, Node>): number => {
-  const parent = node.parentId ? lookup.get(node.parentId) : undefined;
-  return parent ? 1 + getDepth(parent, lookup) : 0;
-};
-
-const isDescendantOf = (node: Node, ancestorId: string, lookup: Map<string, Node>): boolean => {
-  if (!node.parentId) return false;
-  if (node.parentId === ancestorId) return true;
-  const parent = lookup.get(node.parentId);
-  return parent ? isDescendantOf(parent, ancestorId, lookup) : false;
-};
-
-const containsPoint = (rect: Rect, point: XYPosition) =>
-  point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
-
-/** React Flow needs containers before what's in them in the nodes array */
-export const sortByHierarchy = (nodes: Node[]): Node[] => {
-  const lookup = byId(nodes);
-  return nodes
-    .map((node, index) => ({ node, index, depth: getDepth(node, lookup) }))
-    .sort((a, b) => a.depth - b.depth || a.index - b.index)
-    .map(({ node }) => node);
-};
-
-/** The innermost container under the centre of a node (never itself, or one of its own children) */
-export const findDropTarget = (nodeId: string, nodes: Node[]): Node | undefined => {
-  const lookup = byId(nodes);
-  const node = lookup.get(nodeId);
-  // Sticky notes go anywhere, never in a container (one that's in one is taken out when it's next moved)
-  if (!node || !canGoInContainer(node.type)) return undefined;
-  const rect = getAbsoluteRect(node, lookup);
-  const center = { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
-  return nodes
-    .filter((candidate) => isGroupType(candidate.type) && candidate.id !== nodeId && !isDescendantOf(candidate, nodeId, lookup))
-    .filter((candidate) => containsPoint(getAbsoluteRect(candidate, lookup), center))
-    .sort((a, b) => getDepth(b, lookup) - getDepth(a, lookup))[0];
-};
-
-/** The innermost container at a canvas point, for things dropped there */
-export const findGroupAtPoint = (point: XYPosition, nodes: Node[]): Node | undefined => {
-  const lookup = byId(nodes);
-  return nodes
-    .filter((candidate) => isGroupType(candidate.type) && containsPoint(getAbsoluteRect(candidate, lookup), point))
-    .sort((a, b) => getDepth(b, lookup) - getDepth(a, lookup))[0];
-};
-
-/** A node moved into (or out of, without a parentId) a container, staying in the same place on the canvas */
-export const withParent = (node: Node, parentId: string | undefined, nodes: Node[]): Node => {
-  const lookup = byId(nodes);
-  const absolute = getAbsolutePosition(node, lookup);
-  const parent = parentId ? lookup.get(parentId) : undefined;
-  const parentPosition = parent ? getAbsolutePosition(parent, lookup) : { x: 0, y: 0 };
-  const { parentId: _, extent: __, ...rest } = node;
-  return {
-    ...rest,
-    ...(parent && { parentId: parent.id }),
-    position: { x: absolute.x - parentPosition.x, y: absolute.y - parentPosition.y },
-  };
-};
-
-/** A canvas point, relative to a container */
-export const toRelativePosition = (point: XYPosition, parentId: string, nodes: Node[]): XYPosition => {
-  const lookup = byId(nodes);
-  const parent = lookup.get(parentId);
-  if (!parent) return point;
-  const parentPosition = getAbsolutePosition(parent, lookup);
-  return { x: point.x - parentPosition.x, y: point.y - parentPosition.y };
-};
-
-/** Nodes and everything inside them (deleted with their container) */
-export const withDescendants = (ids: string[], nodes: Node[]): Set<string> => {
-  const lookup = byId(nodes);
-  const result = new Set(ids);
-  nodes.forEach((node) => {
-    if (ids.some((id) => isDescendantOf(node, id, lookup))) result.add(node.id);
-  });
-  return result;
-};
-
-/**
- * The size a container needs to fit what's inside it, never smaller than it is, and how far its children
- * must shift when some sit above or left of its content area (so the header stays clear).
- */
-export const fitGroup = (groupId: string, nodes: Node[]) => {
-  const lookup = byId(nodes);
-  const group = lookup.get(groupId);
-  const children = nodes.filter((node) => node.parentId === groupId);
-  if (!group || children.length === 0) return undefined;
-  const rects = children.map((child) => ({ ...child.position, ...sizeOf(child) }));
-  const shift = {
-    x: Math.max(0, GROUP_PADDING.left - Math.min(...rects.map((rect) => rect.x))),
-    y: Math.max(0, GROUP_PADDING.top - Math.min(...rects.map((rect) => rect.y))),
-  };
-  const current = sizeOf(group);
-  return {
-    shift,
-    width: Math.max(current.width, Math.max(...rects.map((rect) => rect.x + rect.width)) + shift.x + GROUP_PADDING.right),
-    height: Math.max(current.height, Math.max(...rects.map((rect) => rect.y + rect.height)) + shift.y + GROUP_PADDING.bottom),
-  };
-};
-
-/** How far a dragged node's middle can go past a container's edge and still be kept in it (growing it) */
-export const KEEP_IN_CONTAINER_MARGIN = 160;
-
-type Size = { width: number; height: number };
-/** A node's place and size as shown while something's dragged */
-export type NodePreview = { position: XYPosition; width?: number; height?: number };
-
-/**
- * Containers growing to fit what's being dragged in them, on every side, as a preview of where things will be.
- * `containerIds` are the containers around what's dragged, innermost first. `start` is the canvas when the drag
- * started, and `now` the canvas as shown (with the dragged nodes where they are now). A dragged node is kept in a
- * container while its middle is within `KEEP_IN_CONTAINER_MARGIN` of where the container was, and dropping it
- * further away takes it out, so the container goes back to its size. A container growing up or left moves, and
- * what's in it moves the other way, so nothing moves on the canvas.
- *
- * Returns, by id, where containers and the nodes in them that aren't dragged go (positions relative to their
- * containers), and their sizes for containers.
- */
-export const previewContainerGrowth = (
-  containerIds: string[],
-  draggedIds: ReadonlySet<string>,
-  start: ReadonlyMap<string, Node>,
-  now: ReadonlyMap<string, Node>
-): Map<string, NodePreview> => {
-  const previews = new Map<string, NodePreview>();
-  // Where each container's top left was on the canvas when the drag started (moving a container grown up or
-  // left is offset by what's in it moving the other way, so only its own shift changes it)
-  const startOrigin = (id: string) => getAbsolutePosition(start.get(id)!, start as Map<string, Node>);
-  const shifts = new Map<string, XYPosition>();
-
-  for (const id of containerIds) {
-    const container = start.get(id);
-    if (!container) continue;
-    const origin = startOrigin(id);
-    const startSize = sizeOf(container);
-    // Everything in it, in its coordinates when the drag started
-    const items: { rect: Rect }[] = [];
-    for (const node of start.values()) {
-      if (node.parentId !== id) continue;
-      if (draggedIds.has(node.id)) {
-        const current = now.get(node.id);
-        if (!current) continue;
-        const at = getAbsoluteRect(current, now as Map<string, Node>);
-        const middle = { x: at.x + at.width / 2, y: at.y + at.height / 2 };
-        const kept =
-          middle.x >= origin.x - KEEP_IN_CONTAINER_MARGIN &&
-          middle.x <= origin.x + startSize.width + KEEP_IN_CONTAINER_MARGIN &&
-          middle.y >= origin.y - KEEP_IN_CONTAINER_MARGIN &&
-          middle.y <= origin.y + startSize.height + KEEP_IN_CONTAINER_MARGIN;
-        if (kept) items.push({ rect: { ...at, x: at.x - origin.x, y: at.y - origin.y } });
-        continue;
-      }
-      // A container inside it that's grown: where it's grown to
-      const inner = previews.get(node.id);
-      const innerShift = shifts.get(node.id) ?? { x: 0, y: 0 };
-      items.push({
-        rect: {
-          x: node.position.x - innerShift.x,
-          y: node.position.y - innerShift.y,
-          ...(inner?.width && inner.height ? { width: inner.width, height: inner.height } : sizeOf(node)),
-        },
-      });
-    }
-
-    const shift = { x: 0, y: 0 };
-    let width = startSize.width;
-    let height = startSize.height;
-    if (items.length > 0) {
-      shift.x = Math.max(0, GROUP_PADDING.left - Math.min(...items.map(({ rect }) => rect.x)));
-      shift.y = Math.max(0, GROUP_PADDING.top - Math.min(...items.map(({ rect }) => rect.y)));
-      width =
-        Math.max(startSize.width, Math.max(...items.map(({ rect }) => rect.x + rect.width)) + GROUP_PADDING.right) + shift.x;
-      height =
-        Math.max(startSize.height, Math.max(...items.map(({ rect }) => rect.y + rect.height)) + GROUP_PADDING.bottom) + shift.y;
-    }
-    shifts.set(id, shift);
-    previews.set(id, {
-      position: { x: container.position.x - shift.x, y: container.position.y - shift.y },
-      width,
-      height,
-    });
-    // What's in it moves the other way. Not what's dragged: React Flow places it against the container as it is.
-    for (const node of start.values()) {
-      if (node.parentId !== id || draggedIds.has(node.id)) continue;
-      const own = previews.get(node.id);
-      const base = own?.position ?? node.position;
-      previews.set(node.id, { ...own, position: { x: base.x + shift.x, y: base.y + shift.y } });
-    }
-  }
-  return previews;
-};

package/eventcatalog/src/features/studio/layout.ts

@@ -1,42 +0,0 @@
-import type { Edge, Node, XYPosition } from '@xyflow/react';
-import { layoutWithElk } from '@eventcatalog/visualiser/layout';
-import { isGroupType, isOnLevel } from './node-types';
-
-/**
- * Lays a canvas out with the same ELK layout as EventCatalog's visualiser (left to right, edges routed
- * around nodes, containers laid out with what's in them and sized to fit). Nodes are sized as rendered when
- * they have been (in the browser), or by their type.
- */
-export const layoutGraph = (nodes: Node[], edges: Edge[]) => layoutWithElk({ nodes, edges });
-
-/** The layout sizes containers with style.width/height; the canvas sizes them with width/height */
-export const withGroupSizes = (nodes: Node[]) =>
-  nodes.map((node) => {
-    const { width, height, ...style } = node.style ?? {};
-    if (typeof width !== 'number' || typeof height !== 'number') return node;
-    return { ...node, width, height, style };
-  });
-
-export type LayoutResult = Map<string, { position: XYPosition; size?: { width: number; height: number } }>;
-
-/**
- * New positions (relative to their container, if they're in one) for the nodes on a canvas, and new sizes for
- * containers. Only these are kept for the canvas people edit: the edge routes ELK draws would be out of date
- * as soon as someone moves a node. Notes added on L1 or L2 aren't on this canvas, so they stay where they are.
- */
-export const getLayoutPositions = async (nodes: Node[], edges: Edge[]): Promise<LayoutResult> => {
-  const onCanvas = nodes.filter((node) => isOnLevel(node, 3));
-  if (onCanvas.length === 0) return new Map();
-  const ids = new Set(onCanvas.map((node) => node.id));
-  const between = edges.filter((edge) => ids.has(edge.source) && ids.has(edge.target));
-  const laidOut = withGroupSizes((await layoutGraph(onCanvas, between)).nodes);
-  return new Map(
-    laidOut.map((node) => [
-      node.id,
-      {
-        position: node.position,
-        ...(isGroupType(node.type) && node.width && node.height && { size: { width: node.width, height: node.height } }),
-      },
-    ])
-  );
-};

package/eventcatalog/src/features/studio/levels.ts

@@ -1,282 +0,0 @@
-import { MarkerType, type Edge, type Node } from '@xyflow/react';
-import { getMessagesLabel } from '@eventcatalog/visualiser/layout';
-import { MESSAGE_COLLECTIONS } from './edges';
-import { GROUP_TYPES, isGroupType, isWrittenOnCanvas } from './node-types';
-
-/**
- * Levels of detail, the same as EventCatalog's diagrams:
- * - L1: domains, systems and how they relate (services folded into the system or domain that contains them)
- * - L2: services and data stores, with messages and channels hidden (the nodes either side connected directly)
- * - L3: everything, including messages and channels (the canvas people edit)
- *
- * What a domain or system contains is what sits inside it (as a container), or what it's connected to with
- * "contains" (as a card, which catalog domains and systems get when their services are on the canvas).
- */
-export type Level = 1 | 2 | 3;
-
-export const LEVELS: { level: Level; description: string }[] = [
-  { level: 1, description: 'Domains, systems and their relationships' },
-  { level: 2, description: 'Services and data stores' },
-  { level: 3, description: 'Everything, including messages and channels' },
-];
-
-// Domains and systems: as cards (what they contain is connected with "contains") or containers (it's inside)
-const CONTAINER_TYPES = new Set(['system', 'context-domain', GROUP_TYPES.system, GROUP_TYPES.domain]);
-const isSystem = (node: Node) => node.type === 'system' || node.type === GROUP_TYPES.system;
-const isDomain = (node: Node) => node.type === 'context-domain' || node.type === GROUP_TYPES.domain;
-
-const isMessage = (node: Node) => !!MESSAGE_COLLECTIONS[node.type ?? ''];
-const isCarrier = (node: Node) => isMessage(node) || node.type === 'channel';
-const isContainer = (node: Node) => CONTAINER_TYPES.has(node.type ?? '');
-const messageName = (node: Node) => String((node.data as { message?: { name?: string } }).message?.name ?? node.id);
-
-// Edges as the visualiser's levels draw them: what's folded together is joined by a plain line, and what was joined
-// through hidden messages or channels by a dashed, muted one ("bridged"), each with the visualiser's arrow
-const EDGE_STROKE = 'var(--ec-edge-stroke, #6b7280)';
-const MUTED = 'rgb(var(--ec-page-text-muted))';
-const FOLDED_EDGE = {
-  type: 'smoothstep',
-  style: { strokeWidth: 1, stroke: EDGE_STROKE },
-  markerEnd: { type: MarkerType.ArrowClosed, width: 20, height: 20 },
-} satisfies Partial<Edge>;
-const BRIDGED_EDGE = {
-  type: 'smoothstep',
-  style: { strokeWidth: 1.5, stroke: MUTED, strokeDasharray: '5 5' },
-  markerEnd: { type: MarkerType.ArrowClosed, width: 20, height: 20, color: MUTED },
-} satisfies Partial<Edge>;
-
-/** What a node becomes at a level: kept (as itself or another node), carried through (messages, channels) or dropped */
-type Representative = { kind: 'node'; id: string } | { kind: 'carrier' } | { kind: 'drop' };
-
-/**
- * Collapse a graph: each node is kept, replaced by another node (e.g. a service by its system), carried through
- * (messages and channels: the nodes either side get connected directly, "bridged") or dropped. Edges between two
- * nodes that are kept as they are stay as they were (`keepDirect`, for L2); the rest are merged per pair and kind
- * (folded or bridged), labelled with the messages they carry.
- */
-const collapseGraph = (
-  nodes: Node[],
-  edges: Edge[],
-  representativeOf: (node: Node) => Representative,
-  { keepDirect = false }: { keepDirect?: boolean } = {}
-) => {
-  const byId = new Map(nodes.map((node) => [node.id, node]));
-  // Whether one node is inside another (e.g. a system in its domain): they're not connected, one holds the other
-  const isInside = (id: string, containerId: string) => {
-    for (let node = byId.get(id); node?.parentId; node = byId.get(node.parentId)) if (node.parentId === containerId) return true;
-    return false;
-  };
-  const representatives = new Map(nodes.map((node) => [node.id, representativeOf(node)]));
-  const outgoing = new Map<string, Edge[]>();
-  edges.forEach((edge) => outgoing.set(edge.source, [...(outgoing.get(edge.source) ?? []), edge]));
-
-  type Merged = { source: string; target: string; bridged: boolean; messages: Map<string, string>; labels: string[] };
-  const merged = new Map<string, Merged>();
-  const kept: Edge[] = [];
-  const addMessage = (messages: Map<string, string>, node: Node) => {
-    if (isMessage(node)) messages.set(messageName(node), MESSAGE_COLLECTIONS[node.type!]);
-  };
-
-  edges.forEach((edge) => {
-    const from = representatives.get(edge.source);
-    if (from?.kind !== 'node') return;
-    const to = representatives.get(edge.target);
-    if (keepDirect && from.id === edge.source && to?.kind === 'node' && to.id === edge.target) return kept.push(edge);
-    // Follow the edge through carried nodes to the node(s) it reaches, collecting the messages on the way
-    const stack = [{ id: edge.target, messages: new Map<string, string>(), labels: [String(edge.label ?? '')], bridged: false }];
-    const visited = new Set<string>();
-    addMessage(stack[0].messages, byId.get(edge.source)!);
-    while (stack.length) {
-      const current = stack.pop()!;
-      if (visited.has(current.id)) continue;
-      visited.add(current.id);
-      const node = byId.get(current.id);
-      const reached = representatives.get(current.id);
-      if (!node || !reached || reached.kind === 'drop') continue;
-      const messages = new Map(current.messages);
-      addMessage(messages, node);
-      if (reached.kind === 'carrier') {
-        (outgoing.get(current.id) ?? []).forEach((next) =>
-          stack.push({ id: next.target, messages, labels: [] as string[], bridged: true })
-        );
-        continue;
-      }
-      // Edges inside what was collapsed disappear, and so do edges to what a node is in (e.g. a service loose in a
-      // domain, folded into it, and a system in the same domain)
-      if (from.id === reached.id || isInside(from.id, reached.id) || isInside(reached.id, from.id)) continue;
-      const key = `${current.bridged ? 'bridged' : 'level'}-${from.id}-${reached.id}`;
-      const entry: Merged = merged.get(key) ?? {
-        source: from.id,
-        target: reached.id,
-        bridged: current.bridged,
-        messages: new Map(),
-        labels: [],
-      };
-      messages.forEach((collection, name) => entry.messages.set(name, collection));
-      entry.labels.push(...current.labels.filter(Boolean));
-      merged.set(key, entry);
-    }
-  });
-
-  const keptIds = new Set([...representatives.values()].flatMap((rep) => (rep.kind === 'node' ? [rep.id] : [])));
-  // Actors' connections are relationships, labelled as they were (like the visualiser's context relationships)
-  const isActor = (id: string) => byId.get(id)?.type === 'actor';
-  return {
-    nodes: nodes.filter((node) => keptIds.has(node.id)),
-    edges: [
-      ...kept,
-      ...[...merged.entries()].map(([id, { source, target, bridged, messages, labels }]): Edge => {
-        const label =
-          getMessagesLabel(messages) ??
-          (!bridged && (isActor(source) || isActor(target)) && labels.length ? [...new Set(labels)].join(', ') : undefined);
-        return { id, source, target, ...(bridged ? BRIDGED_EDGE : FOLDED_EDGE), ...(label && { label }) };
-      }),
-    ],
-  };
-};
-
-/**
- * The system and domain each node is in: the containers it sits inside, or the domain and system cards
- * connected to it with "contains"
- */
-const getContainers = (nodes: Node[], edges: Edge[]) => {
-  const byId = new Map(nodes.map((node) => [node.id, node]));
-  const containers = new Map<string, { system?: string; domain?: string }>();
-  const add = (nodeId: string, container: Node) => {
-    const entry = containers.get(nodeId) ?? {};
-    if (isSystem(container)) entry.system ??= container.id;
-    else entry.domain ??= container.id;
-    containers.set(nodeId, entry);
-  };
-  for (const node of nodes) {
-    for (
-      let parent = node.parentId ? byId.get(node.parentId) : undefined;
-      parent;
-      parent = parent.parentId ? byId.get(parent.parentId) : undefined
-    ) {
-      if (isContainer(parent)) add(node.id, parent);
-    }
-  }
-  for (const edge of edges) {
-    const container = byId.get(edge.source);
-    if (container && isContainer(container) && edge.label === 'contains') add(edge.target, container);
-  }
-  return containers;
-};
-
-/**
- * Containers are sized by the layout: to fit what's in them, or (empty) the size the visualiser lays empty groups
- * out at. Same ids, so switching levels grows and shrinks them.
- */
-const sizedByLayout = ({ nodes, edges }: { nodes: Node[]; edges: Edge[] }) => ({
-  edges,
-  nodes: nodes.map((node) =>
-    isGroupType(node.type) ? { ...node, width: undefined, height: undefined, measured: undefined } : node
-  ),
-});
-
-/** L2: messages and channels hidden, the nodes either side connected directly */
-const level2 = (nodes: Node[], edges: Edge[]) =>
-  collapseGraph(nodes, edges, (node) => (isCarrier(node) ? { kind: 'carrier' } : { kind: 'node', id: node.id }), {
-    keepDirect: true,
-  });
-
-/** Whether a node is inside a container, at any depth */
-const isWithin = (node: Node, containerId: string, byId: Map<string, Node>) => {
-  for (let parent = node.parentId; parent; parent = byId.get(parent)?.parentId) if (parent === containerId) return true;
-  return false;
-};
-
-/**
- * L1 as EventCatalog's diagrams draw it: systems as cards with what's in them counted, and domains with no system in
- * them (or in their subdomains) as domain cards
- */
-const asSystemsLevel = (
-  { nodes, edges }: { nodes: Node[]; edges: Edge[] },
-  { all, allEdges, containers }: { all: Node[]; allEdges: Edge[]; containers: ReturnType<typeof getContainers> }
-) => {
-  const byId = new Map(all.map((node) => [node.id, node]));
-  const count = (id: string, matches: (node: Node) => boolean) =>
-    all.filter((node) => matches(node) && containers.get(node.id)?.system === id).length;
-  // The messages a system's services send and receive
-  const messagesOf = (id: string) => {
-    const services = new Set(all.filter((node) => containers.get(node.id)?.system === id).map((node) => node.id));
-    const messages = new Set<string>();
-    for (const edge of allEdges) {
-      const [inside, other] = services.has(edge.source) ? [edge.source, edge.target] : [edge.target, edge.source];
-      if (services.has(inside) && byId.get(other) && isMessage(byId.get(other)!)) messages.add(other);
-    }
-    return messages.size;
-  };
-  return {
-    edges,
-    nodes: nodes.map((node): Node => {
-      const { id, parentId, position, data } = node;
-      if (node.type === GROUP_TYPES.system)
-        return {
-          id,
-          type: 'system',
-          position,
-          ...(parentId && { parentId }),
-          data: {
-            mode: 'full',
-            ...data,
-            servicesCount: count(id, (child) => child.type === 'service' || child.type === 'agent'),
-            containersCount: count(id, (child) => child.type === 'data'),
-            messagesCount: messagesOf(id),
-          },
-        };
-      if (node.type === GROUP_TYPES.domain && !all.some((other) => isSystem(other) && isWithin(other, id, byId)))
-        return {
-          id,
-          type: 'context-domain',
-          position,
-          ...(parentId && { parentId }),
-          data: {
-            mode: 'full',
-            ...data,
-            subdomain: !!parentId,
-            systemsCount: 0,
-            servicesCount: all.filter((other) => other.type === 'service' && isWithin(other, id, byId)).length,
-          },
-        };
-      return node;
-    }),
-  };
-};
-
-/** L1: services folded into their system (or domain); actors, external systems and loose services stay */
-const level1 = (nodes: Node[], edges: Edge[]) => {
-  const containers = getContainers(nodes, edges);
-  const collapsed = collapseGraph(nodes, edges, (node) => {
-    const container = containers.get(node.id);
-    // Systems stay (inside their domain's container, if they're in one); everything else folds into its system or domain
-    if (isContainer(node) && (isSystem(node) || !container?.system)) return { kind: 'node', id: node.id };
-    if (container?.system) return { kind: 'node', id: container.system };
-    // Messages and channels connect the systems either side, even when they sit in a domain rather than a system
-    // (the visualiser has them outside its domains; catalog domains on a canvas hold their messages)
-    if (isCarrier(node)) return { kind: 'carrier' };
-    if (container?.domain) return { kind: 'node', id: container.domain };
-    if (node.type === 'data' || isWrittenOnCanvas(node.type)) return { kind: 'drop' };
-    return { kind: 'node', id: node.id };
-  });
-  return asSystemsLevel(collapsed, { all: nodes, allEdges: edges, containers });
-};
-
-/**
- * The graph for a level (not laid out: positions come from the layout). Notes aren't in it: the ones added on the
- * level are shown where they were put, over its layout.
- */
-export const getLevelGraph = (nodes: Node[], edges: Edge[], level: Level) => {
-  if (level === 3) return { nodes, edges };
-  const withoutNotes = nodes.filter((node) => node.type !== 'note');
-  return sizedByLayout(level === 1 ? level1(withoutNotes, edges) : level2(withoutNotes, edges));
-};
-
-/** Why a level can't be shown for this canvas, if it can't */
-export const getLevelUnavailableReason = (nodes: Node[], level: Level): string | undefined => {
-  // Like the visualiser: L1 needs systems, or domains to relate (one domain on its own has nothing to show)
-  if (level === 1 && !nodes.some(isSystem) && nodes.filter(isDomain).length < 2)
-    return 'Not available: add a system, or more than one domain, to see how they relate';
-  return undefined;
-};