@eventcatalog/core 5.0.0-beta.7 → 5.0.0-beta.8

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

@@ -1,7 +1,7 @@
-import type { Edge, Node } from '@xyflow/react';
+import { MarkerType, type Edge, type Node } from '@xyflow/react';
 import { getMessagesLabel } from '@eventcatalog/visualiser/layout';
-import { EDGE_MARKER, MESSAGE_COLLECTIONS } from './edges';
-import { GROUP_TYPES, isGroupType } from './node-types';
+import { MESSAGE_COLLECTIONS } from './edges';
+import { GROUP_TYPES, isGroupType, isWrittenOnCanvas } from './node-types';
 
 /**
  * Levels of detail, the same as EventCatalog's diagrams:
@@ -23,22 +23,43 @@ export const LEVELS: { level: Level; description: string }[] = [
 // 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 COLLAPSED_GROUP_SIZE = { width: 280, height: 110 };
+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) or dropped.
- * Edges between the same two nodes are merged, labelled with the messages they carry.
+ * 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) => {
+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) => {
@@ -49,8 +70,9 @@ const collapseGraph = (nodes: Node[], edges: Edge[], representativeOf: (node: No
   const outgoing = new Map<string, Edge[]>();
   edges.forEach((edge) => outgoing.set(edge.source, [...(outgoing.get(edge.source) ?? []), edge]));
 
-  type Merged = { source: string; target: string; messages: Map<string, string>; labels: string[] };
+  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!]);
   };
@@ -58,8 +80,10 @@ const collapseGraph = (nodes: Node[], edges: Edge[], representativeOf: (node: No
   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 ?? '')] }];
+    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) {
@@ -67,19 +91,27 @@ const collapseGraph = (nodes: Node[], edges: Edge[], representativeOf: (node: No
       if (visited.has(current.id)) continue;
       visited.add(current.id);
       const node = byId.get(current.id);
-      const to = representatives.get(current.id);
-      if (!node || !to || to.kind === 'drop') continue;
+      const reached = representatives.get(current.id);
+      if (!node || !reached || reached.kind === 'drop') continue;
       const messages = new Map(current.messages);
       addMessage(messages, node);
-      if (to.kind === 'carrier') {
-        (outgoing.get(current.id) ?? []).forEach((next) => stack.push({ id: next.target, messages, labels: [] as string[] }));
+      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 system and the
-      // messages left loose in its domain, which fold into the domain)
-      if (from.id === to.id || isInside(from.id, to.id) || isInside(to.id, from.id)) continue;
-      const key = `${from.id}->${to.id}`;
-      const entry: Merged = merged.get(key) ?? { source: from.id, target: to.id, messages: new Map(), labels: [] };
+      // 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);
@@ -87,21 +119,19 @@ const collapseGraph = (nodes: Node[], edges: Edge[], representativeOf: (node: No
   });
 
   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: [...merged.values()].map(({ source, target, messages, labels }): Edge => {
-      const collections = new Set(messages.values());
-      const collection = collections.size === 1 ? [...collections][0] : undefined;
-      return {
-        id: `level-${source}-${target}`,
-        source,
-        target,
-        type: collection ? 'animated' : 'smoothstep',
-        label: getMessagesLabel(messages) ?? [...new Set(labels)].join(', '),
-        markerEnd: EDGE_MARKER,
-        data: collection ? { message: { collection } } : {},
-      };
-    }),
+    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 }) };
+      }),
+    ],
   };
 };
 
@@ -135,51 +165,83 @@ const getContainers = (nodes: Node[], edges: Edge[]) => {
 };
 
 /**
- * Containers left with nothing inside them at a level become compact boxes (same id, so switching levels
- * grows and shrinks them); containers with something inside are sized to fit by the layout
+ * 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 compactEmptyGroups = ({ nodes, edges }: { nodes: Node[]; edges: Edge[] }) => {
-  const parents = new Set(nodes.map((node) => node.parentId).filter(Boolean));
-  return {
-    edges,
-    nodes: nodes.map((node) => {
-      if (!isGroupType(node.type)) return node;
-      if (parents.has(node.id)) return { ...node, width: undefined, height: undefined, measured: undefined };
-      return { ...node, ...COLLAPSED_GROUP_SIZE, measured: undefined };
-    }),
-  };
-};
+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 }));
+  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 how many services they hold), connected by plain
- * edges labelled with the messages between them
+ * 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, containers }: { all: Node[]; containers: ReturnType<typeof getContainers> }
+  { all, allEdges, containers }: { all: Node[]; allEdges: Edge[]; containers: ReturnType<typeof getContainers> }
 ) => {
-  const servicesIn = new Map<string, number>();
-  for (const node of all) {
-    const system = node.type === 'service' ? containers.get(node.id)?.system : undefined;
-    if (system) servicesIn.set(system, (servicesIn.get(system) ?? 0) + 1);
-  }
+  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 => {
-      if (node.type !== GROUP_TYPES.system) return node;
       const { id, parentId, position, data } = node;
-      return {
-        id,
-        type: 'system',
-        position,
-        ...(parentId && { parentId }),
-        data: { mode: 'full', ...data, servicesCount: servicesIn.get(id) ?? 0 },
-      };
+      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;
     }),
-    edges: edges.map(({ type: _, data: __, ...edge }): Edge => ({ ...edge, type: 'default' })),
   };
 };
 
@@ -192,25 +254,29 @@ const level1 = (nodes: Node[], edges: Edge[]) => {
     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' || node.type === 'note') return { kind: 'drop' };
+    if (node.type === 'data' || isWrittenOnCanvas(node.type)) return { kind: 'drop' };
     return { kind: 'node', id: node.id };
   });
-  return asSystemsLevel(collapsed, { all: nodes, containers });
+  return asSystemsLevel(collapsed, { all: nodes, allEdges: edges, containers });
 };
 
-/** The graph for a level (not laid out: positions come from the layout) */
+/**
+ * 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 === 1) return compactEmptyGroups(level1(nodes, edges));
-  if (level === 2) return compactEmptyGroups(level2(nodes, edges));
-  return { nodes, edges };
+  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 => {
-  if (level === 1 && !nodes.some(isContainer))
-    return 'Not available: add a domain or system from the catalog to see how they relate';
-  if (level === 2 && !nodes.some(isCarrier)) return 'Not available: there are no messages or channels to hide';
+  // 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;
 };

package/eventcatalog/src/features/studio/node-types.ts

@@ -25,8 +25,10 @@ export type NodeDefinition = {
   unlisted?: boolean;
   /** Where the resource lives inside node.data (e.g. `service` for data.service). Undefined = data root */
   resourceKey?: string;
-  /** Nodes that are sized on the canvas (containers, notes) start at this size */
+  /** Nodes that are sized on the canvas (containers, notes, text) start at this size */
   defaultSize?: { width: number; height: number };
+  /** Only its width is set: its height follows what's in it (text) */
+  autoHeight?: boolean;
   createData: () => Record<string, unknown>;
 };
 
@@ -122,12 +124,22 @@ export const nodeDefinitions: NodeDefinition[] = [
     label: 'Actor',
     createData: () => ({ mode: 'full', name: 'Customer', summary: 'A person using the system.' }),
   },
+  {
+    type: 'text',
+    category: 'other',
+    label: 'Text',
+    defaultSize: { width: 240, height: 40 },
+    autoHeight: true,
+    createData: () => ({ text: 'Add some text' }),
+  },
   {
     type: 'note',
     category: 'other',
     label: 'Sticky Note',
-    defaultSize: { width: 200, height: 160 },
-    createData: () => ({ text: 'Double-click to edit...', color: 'yellow' }),
+    // About square, like a post-it (taller if more is written on it)
+    defaultSize: { width: 200, height: 176 },
+    autoHeight: true,
+    createData: () => ({ text: '', color: 'yellow' }),
   },
 ];
 
@@ -162,6 +174,26 @@ export const getResource = (type: string | undefined, data: Record<string, unkno
   return key ? ((data[key] as Record<string, unknown>) ?? {}) : data;
 };
 
+/** Sticky notes sit on the canvas wherever they're put, never inside a container */
+export const canGoInContainer = (type?: string) => type !== 'note';
+
+/**
+ * The level (L1, L2 or L3) a sticky note was added on: it's only shown there. Notes from before levels had notes
+ * are on L3, the canvas people edit. Other nodes are on every level they fit in, so they have none.
+ */
+export const getNoteLevel = (node: { type?: string; data: Record<string, unknown> }): 1 | 2 | 3 | undefined =>
+  node.type === 'note' ? ((node.data.level as 1 | 2 | undefined) ?? 3) : undefined;
+
+/** Whether a node is on a level's canvas as itself: everything on L3, but notes only on the level they were added on */
+export const isOnLevel = (node: { type?: string; data: Record<string, unknown> }, level: 1 | 2 | 3) =>
+  node.type !== 'note' || getNoteLevel(node) === level;
+
+/** Notes and text: written on the canvas itself (their text is their data, not a resource with a name) */
+export const isWrittenOnCanvas = (type?: string) => type === 'note' || type === 'text';
+
+/** Whether a node's resource has a version (actors and notes don't) */
+export const isVersioned = (type?: string) => !!getResourceKey(type);
+
 /** Returns new node data with fields of the resource changed */
 export const updateResource = (type: string | undefined, data: Record<string, unknown>, fields: Record<string, unknown>) => {
   const key = getResourceKey(type);

package/eventcatalog/src/features/studio/pages/[id].astro

@@ -6,7 +6,8 @@ import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 import { buildUrl } from '@utils/url-builder';
 import StudioDesigner from '../components/StudioDesigner';
 import { getCatalogResources } from '../catalog-resources';
-import { STUDIO_SOCKET_PATH } from '../server/runtime';
+import { startStudio, STUDIO_SOCKET_PATH } from '../server/runtime';
+import { getSignedInUser, isSignedIn } from '../server/sign-in';
 
 export const prerender = false;
 
@@ -17,6 +18,8 @@ if (!id || !/^[0-9a-f-]{36}$/i.test(id)) {
 }
 
 const { resources, relations } = await getCatalogResources();
+const keptInMemory = (await startStudio({ isSignedIn })).storage.type === 'memory';
+const signedInAs = getSignedInUser(Astro.locals);
 ---
 
 <VerticalSideBarLayout title="Studio - EventCatalog" showNestedSideBar={false}>
@@ -28,9 +31,11 @@ const { resources, relations } = await getCatalogResources();
       client:only="react"
       canvasId={id}
       socketPath={buildUrl(STUDIO_SOCKET_PATH, true)}
-      newCanvasUrl={buildUrl('/studio')}
+      newCanvasUrl={`${buildUrl('/studio')}?new=1`}
       mcpUrl={buildUrl('/docs/mcp', true)}
       relayScriptPath={buildUrl('/webmcp-relay/embed.js', true)}
+      keptInMemory={keptInMemory}
+      signedInAs={signedInAs}
       resources={resources}
       relations={relations}
     />