@eventcatalog/core 5.7.1 → 5.7.4

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/changelog/index.astro

@@ -1,176 +1,12 @@
 ---
-import Footer from '@layouts/Footer.astro';
-import { getChangeLogs } from '@utils/collections/changelogs';
-import { getChangelogResourceBadge } from '@utils/changelog-resource-badge';
-import { render, getEntry } from 'astro:content';
-import mdxComponents from '@components/MDX/components';
-import 'diff2html/bundles/css/diff2html.min.css';
-
-import { buildUrl } from '@utils/url-builder';
-import { getPreviousVersion } from '@utils/collections/util';
-import { getDiffsForCurrentAndPreviousVersion } from '@utils/file-diffs';
-import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
-import Badge from '@components/Badge.astro';
-import { ClientRouter } from 'astro:transitions';
-
+import ChangelogPage from './_ChangelogPage.astro';
 import { Page } from './_index.data';
 
 export const prerender = Page.prerender;
 export const getStaticPaths = Page.getStaticPaths;
 
-// Get data
-const props = await Page.getData(Astro);
-if (!props) return Astro.rewrite('/404');
-
-let collectionItem = props;
-const logs = await getChangeLogs(props);
-
-const { data } = props;
-const latestVersion = data.latestVersion;
-
-const renderedLogs = logs.map(async (log) => {
-  const logEntry = await getEntry('changelogs', log.id);
-  const { Content } = await render(logEntry as any);
-  return {
-    Content,
-    ...log,
-  };
-});
-
-const logsToRender = await Promise.all(renderedLogs);
-
-const logListPromise = logsToRender.map(async (log, index) => {
-  const currentLogVersion = log.data.version;
-  const previousLogVersion = log.data.version ? getPreviousVersion(log.data.version, data.versions || []) : '';
-  return {
-    id: log.id,
-    url: buildUrl(`/docs/${props.collection}/${props.data.id}`),
-    isLatest: log.data.version === latestVersion,
-    version: log.data.version,
-    createdAt: log.data.createdAt,
-    badges: log.data.badges || [],
-    Content: log.Content,
-    diffs:
-      currentLogVersion && previousLogVersion
-        ? await getDiffsForCurrentAndPreviousVersion(
-            currentLogVersion,
-            previousLogVersion,
-            collectionItem.data.id,
-            props.allCollectionItems
-          )
-        : [],
-  };
-});
-
-const logList = await Promise.all(logListPromise);
-
-const badges = [getChangelogResourceBadge(props.collection)].filter((badge) => badge != null);
+const changelogOwner = await Page.getData(Astro);
+if (!changelogOwner) return Astro.rewrite('/404');
 ---
 
-<VerticalSideBarLayout title="ChangeLog">
-  <main class="w-full md:pt-4 px-8 overflow-y-auto h-full max-w-[95%]">
-    <nav aria-label="Breadcrumb" class="flex">
-      <ol role="list" class="flex items-center space-x-2">
-        <li>
-          <div>
-            <a
-              href={buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}`)}
-              class="text-sm font-medium text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]"
-            >
-              {props.data.name}
-            </a>
-          </div>
-        </li>
-        <li>
-          <div class="flex items-center">
-            <svg
-              fill="currentColor"
-              viewBox="0 0 20 20"
-              aria-hidden="true"
-              class="h-5 w-5 flex-shrink-0 text-[rgb(var(--ec-page-border))]"
-            >
-              <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z"></path>
-            </svg>
-            <a
-              href={buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}`)}
-              class="text-sm font-medium text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-page-text))]"
-            >
-              Changelog
-            </a>
-          </div>
-        </li>
-      </ol>
-    </nav>
-    <div class="border-b border-[rgb(var(--ec-page-border))] flex justify-between items-start py-4 w-full">
-      <div>
-        <h2 class="text-2xl md:text-4xl font-bold text-[rgb(var(--ec-page-text))]">{props.data.name} (Changelog)</h2>
-        <h2 class="text-lg pt-2 text-[rgb(var(--ec-page-text-muted))] font-light">{props.data.summary}</h2>
-        {
-          badges.length > 0 && (
-            <div class="flex flex-wrap py-2 pt-4">
-              {badges.map((badge) => (
-                <Badge badge={badge} className="mr-2 px-2 py-1 rounded-md" />
-              ))}
-            </div>
-          )
-        }
-      </div>
-    </div>
-    {
-      logList.length === 0 && (
-        <div class="py-4 text-[rgb(var(--ec-page-text-muted))] prose prose-md">
-          <p>No changelogs found.</p>
-        </div>
-      )
-    }
-    <div class="flow-root py-8 w-full">
-      <ul role="list" class="-mb-8">
-        {
-          logList.map((log, index) => (
-            <li>
-              <div class="relative pb-8">
-                {index !== logList.length - 1 ? (
-                  <span aria-hidden="true" class="absolute left-6 top-4 -ml-px h-full w-0.5 bg-[rgb(var(--ec-page-border))]" />
-                ) : null}
-                <div class="relative flex space-x-3">
-                  <div>
-                    <a
-                      href={buildUrl(`${log.url}/${log.version}`)}
-                      class="bg-primary hover:bg-primary/80 text-white flex h-8 w-14 items-center justify-center rounded-full ring-8 ring-[rgb(var(--ec-page-bg))]"
-                    >
-                      {log.version}
-                    </a>
-                  </div>
-                </div>
-                <div class="pl-[70px] py-2 -mt-10">
-                  {log.createdAt && (
-                    <div class="pb-2">
-                      <h3 class="text-2xl text-[rgb(var(--ec-page-text))] font-bold">
-                        <span>
-                          {log.createdAt.toISOString().split('T')[0]} {`${log.isLatest ? '(latest)' : ''}`}
-                        </span>
-                      </h3>
-                    </div>
-                  )}
-                  {log.badges && (
-                    <div class="flex flex-wrap">
-                      {log.badges.filter(Boolean).map((badge: any) => (
-                        <Badge badge={badge} className="mr-2 px-2 py-1 rounded-md" />
-                      ))}
-                    </div>
-                  )}
-                  <div class="prose prose-md max-w-none! py-2">
-                    <log.Content components={mdxComponents(props)} />
-                  </div>
-                  {log.diffs && log.diffs.map((diff) => <div class="bg-white rounded-lg p-2 my-2" set:html={diff} />)}
-                </div>
-              </div>
-            </li>
-          ))
-        }
-      </ul>
-    </div>
-    <Footer />
-  </main>
-  <ClientRouter />
-</VerticalSideBarLayout>
+<ChangelogPage changelogOwner={changelogOwner} />

package/eventcatalog/src/pages/docs/services/[id]/[version]/changelog/index.astro

@@ -0,0 +1,14 @@
+---
+// Services need their own Changelog route: /docs/services/[id]/[docType]/[docId] outranks
+// the generic /docs/[type]/[id]/[version]/changelog route and would catch these URLs.
+import ChangelogPage from '../../../../[type]/[id]/[version]/changelog/_ChangelogPage.astro';
+import { ServicePage } from '../../../../[type]/[id]/[version]/changelog/_index.data';
+
+export const prerender = ServicePage.prerender;
+export const getStaticPaths = ServicePage.getStaticPaths;
+
+const changelogOwner = await ServicePage.getData(Astro);
+if (!changelogOwner) return Astro.rewrite('/404');
+---
+
+<ChangelogPage changelogOwner={changelogOwner} />

package/eventcatalog/src/pages/docs/services/[id]/changelog/index.astro

@@ -2,11 +2,11 @@
 import LatestVersionRedirect from '@components/LatestVersionRedirect.astro';
 import { isChangelogEnabled, isSSR } from '@utils/feature';
 import { buildUrl } from '@utils/url-builder';
-import { Page as VersionedPage } from '../../../[type]/[id]/[version]/changelog/_index.data';
-import { getLatestServicePaths, getLatestServiceVersion } from '../../_latest-version-route';
+import { getLatestServiceChangelogPaths } from '../../../[type]/[id]/[version]/changelog/_index.data';
+import { getLatestServiceVersion } from '../../_latest-version-route';
 
 export const prerender = !isSSR();
-export const getStaticPaths = async () => getLatestServicePaths(await VersionedPage.getStaticPaths());
+export const getStaticPaths = getLatestServiceChangelogPaths;
 
 const { id } = Astro.params;
 const version = Astro.props.redirectVersion ?? (id ? await getLatestServiceVersion(id) : undefined);

package/eventcatalog/src/utils/node-graphs/domain-levels-node-graph.ts

@@ -4,6 +4,7 @@ import { getNodesAndEdges as getServiceNodesAndEdges } from './services-node-gra
 import { getNodesAndEdgesForDomainSystems as getDomainContextNodesAndEdges } from './system-context-node-graph';
 import { getServices } from '@utils/collections/services';
 import { getAgents } from '@utils/collections/agents';
+import { versionMatches } from '@utils/collections/util';
 import { createTriggerMessageNode } from './message-node-graph';
 import {
   createEdge,
@@ -97,14 +98,16 @@ const createDomainCard = (domain: any, { parentId, subdomain = false }: { parent
  * systems is shown as a card. Messages a (sub)domain sends or receives itself
  * (`domainMessages`: by message, the boxes drawn with it) fold into it, as a
  * system's do into the system, when only one does (more than one, they connect
- * through the message instead, rather than to each other).
+ * through the message instead, rather than to each other). `receivedBy` has
+ * what the services other domains stand for receive, by the node shown for them.
  */
 export const collapseSystems = (
   graph: Graph,
   systems: any[],
   contextNodes: Map<string, any>,
   subdomains: Map<string, any>,
-  domainMessages: Map<string, Set<string>> = new Map()
+  domainMessages: Map<string, Set<string>> = new Map(),
+  receivedBy: Map<string, any[]> = new Map()
 ): Graph => {
   const nodesById = new Map(graph.nodes.map((node) => [node.id, node]));
   const systemsByGroupId = new Map<string, any>(systems.map((system: any) => [systemGroupId(system), system]));
@@ -123,11 +126,32 @@ export const collapseSystems = (
     cards.set(groupId, createDomainCard(subdomain, { parentId: nodesById.get(groupId)?.parentId, subdomain: true }));
   });
 
+  const sendersOf = new Map<string, string[]>();
+  graph.edges.forEach((edge) => sendersOf.set(edge.target, [...(sendersOf.get(edge.target) ?? []), edge.source]));
+  const carries = (nodeId: string) => nodesById.has(nodeId) && isCarrier(nodesById.get(nodeId));
+  const isMessage = (nodeId: string) => MESSAGE_TYPES.has(nodesById.get(nodeId)?.type);
+  const isChannel = (nodeId: string) => nodesById.get(nodeId)?.type === 'channels';
+
+  // A message is shown as what sends it, not where it's drawn, which can be with
+  // one of its consumers. Sent from more than one, it's left as it is (connecting
+  // each sender to what receives it, rather than one to the rest). None when nothing sends it
+  const senderHomes = new Map<string, string | undefined>();
+  const senderHome = (nodeId: string): string | undefined => {
+    if (!senderHomes.has(nodeId)) {
+      const senders = new Set((sendersOf.get(nodeId) ?? []).filter((sender) => !carries(sender)).map(representative));
+      const [sender] = [...senders];
+      senderHomes.set(nodeId, senders.size > 1 ? nodeId : sender);
+    }
+    return senderHomes.get(nodeId);
+  };
+
   // The node something is shown as: its system, the card of the subdomain it's
   // in, the (sub)domain it's in, or itself
   const representative = (nodeId: string): string => {
     const boxes = domainMessages.get(nodeId);
     if (boxes?.size === 1) return representative([...boxes][0]);
+    const home = isMessage(nodeId) ? senderHome(nodeId) : undefined;
+    if (home) return home;
     for (let node = nodesById.get(nodeId); node; node = node.parentId ? nodesById.get(node.parentId) : undefined) {
       const system: any = systemsByGroupId.get(node.id);
       if (system) return generateIdForNode(system);
@@ -149,6 +173,37 @@ export const collapseSystems = (
   );
   const shownNodes = new Map([...otherNodes, ...systemNodes, ...cards.values()].map((node) => [node.id, node]));
 
+  // The messages sent through a channel (and the channels before it)
+  const messagesThrough = (channelId: string, seen = new Set<string>()): string[] => {
+    if (seen.has(channelId)) return [];
+    seen.add(channelId);
+    return (sendersOf.get(channelId) ?? []).flatMap((sender) =>
+      isMessage(sender) ? [sender] : isChannel(sender) ? messagesThrough(sender, seen) : []
+    );
+  };
+  // Whether a node (or the services another domain stands for) says it receives a
+  // message: its id, and its version (or range, or latest)
+  const receives = (nodeId: string, messageId: string) => {
+    const data = nodesById.get(nodeId)?.data;
+    const message = nodesById.get(messageId)?.data?.message;
+    return ((data?.service ?? data?.agent)?.receives ?? receivedBy.get(nodeId) ?? []).some((pointer: any) => {
+      const { id, version } = pointer.data ?? pointer;
+      return id === message?.id && versionMatches(message?.version ?? '', version ?? 'latest');
+    });
+  };
+
+  // Where an edge is from and the messages it carries. A channel is one node for
+  // all its messages, so an edge out of one is from each message sent through it
+  // that its target receives (all of them when that isn't known), as those
+  // messages are shown. Edges into a channel are shown by the edges out of it
+  const edgeSources = (edge: any): { from: string; messages: string[] }[] => {
+    if (isChannel(edge.target) && carries(edge.source)) return [];
+    const through = isChannel(edge.source) ? messagesThrough(edge.source) : [];
+    if (through.length === 0) return [{ from: edge.source, messages: [edge.source, edge.target].filter(isMessage) }];
+    const sent = through.filter((messageId) => receives(edge.target, messageId));
+    return (sent.length > 0 ? sent : through).map((messageId) => ({ from: messageId, messages: [messageId] }));
+  };
+
   // Edges between systems / actors / domains: context relationships as they
   // are, edges to nodes kept as their first label, the rest labelled with the
   // messages they carry
@@ -156,28 +211,30 @@ export const collapseSystems = (
     string,
     { source: string; target: string; messages: Map<string, string>; relationship?: any; label?: string; crossDomain?: boolean }
   >();
-  graph.edges.forEach((edge) => {
-    const source = representative(edge.source);
-    const target = representative(edge.target);
-    if (
-      source === target ||
-      !shownNodes.has(source) ||
-      !shownNodes.has(target) ||
-      // One shown node inside another (e.g. a system in its domain)
-      isInside(shownNodes, source, target) ||
-      isInside(shownNodes, target, source)
-    )
-      return;
-    const key = `${source}->${target}`;
-    const connection = connections.get(key) ?? { source, target, messages: new Map<string, string>() };
-    if (edge.id.startsWith(CONTEXT_EDGE_PREFIX)) connection.relationship = edge;
-    if (edge.data?.crossDomain) connection.crossDomain = true;
-    [edge.source, edge.target].forEach((nodeId) => {
-      const node = nodesById.get(nodeId);
-      if (MESSAGE_TYPES.has(node?.type)) connection.messages.set(node.data?.message?.name ?? nodeId, node.type);
-    });
-    connections.set(key, connection);
-  });
+  graph.edges.forEach((edge) =>
+    edgeSources(edge).forEach(({ from, messages }) => {
+      const source = representative(from);
+      const target = representative(edge.target);
+      if (
+        source === target ||
+        !shownNodes.has(source) ||
+        !shownNodes.has(target) ||
+        // One shown node inside another (e.g. a system in its domain)
+        isInside(shownNodes, source, target) ||
+        isInside(shownNodes, target, source)
+      )
+        return;
+      const key = `${source}->${target}`;
+      const connection = connections.get(key) ?? { source, target, messages: new Map<string, string>() };
+      if (edge.id.startsWith(CONTEXT_EDGE_PREFIX)) connection.relationship = edge;
+      if (edge.data?.crossDomain) connection.crossDomain = true;
+      messages.forEach((messageId) => {
+        const node = nodesById.get(messageId);
+        connection.messages.set(node.data?.message?.name ?? messageId, node.type);
+      });
+      connections.set(key, connection);
+    })
+  );
 
   // A relationship already connects the pair (either way), so skip messages
   const related = new Set(
@@ -298,8 +355,10 @@ export const buildDomainGraph = ({
     ])
   );
   const edges: any[] = [];
-  // Nodes replaced by another (services in other domains become the domain)
+  // Nodes replaced by another (services in other domains become the domain),
+  // and what each of them receives
   const replacedBy = new Map<string, string>();
+  const replacedReceives = new Map<string, any[]>();
 
   // Other domains are shown as a single card, with counts of what's in them. A
   // subdomain of another domain is shown inside a box for that domain (and
@@ -364,6 +423,7 @@ export const buildDomainGraph = ({
       const owner = SERVICE_TYPES.has(node.type) ? owners.get(node.id) : undefined;
       if (owner && !groupOfDomain.has(owner.domain.data.id)) {
         replacedBy.set(node.id, addOtherDomain(owner.domain));
+        replacedReceives.set(node.id, (node.data?.service ?? node.data?.agent)?.receives ?? []);
         return;
       }
       if (owner && owner.system) {
@@ -440,11 +500,17 @@ export const buildDomainGraph = ({
 
   const graphEdges = connectEdges(edges, new Map([...cardBoxes, ...replacedBy]), nodes);
   placeMessagesWithPublishers(nodes, graphEdges, new Set(domainMessages.keys()));
+  // What the services each other domain stands for receive, by the node shown for the domain
+  const receivedBy = new Map<string, any[]>();
+  replacedBy.forEach((nodeId, replaced) =>
+    receivedBy.set(nodeId, [...(receivedBy.get(nodeId) ?? []), ...(replacedReceives.get(replaced) ?? [])])
+  );
   return {
     nodes,
     edges: graphEdges,
     otherDomainIds: new Set([...replacedBy.values(), ...[...otherDomainIds].map((id) => cardBoxes.get(id) ?? id)]),
     domainMessages,
+    receivedBy,
   };
 };
 
@@ -609,7 +675,8 @@ const addDomainMessages = ({
 /**
  * Messages are placed in the first graph they appear in, which can be a
  * system consuming them. Moves each message into the system (or domain) of the
- * services publishing it, when they're all in the same one. Messages a domain
+ * services publishing it, when they're all in the same one, and each channel
+ * with the messages sent through it. Messages a domain
  * sends or receives itself (`kept`) stay outside its box, where its edge to them
  * is drawn.
  */
@@ -630,6 +697,22 @@ export const placeMessagesWithPublishers = (nodes: Map<string, any>, edges: any[
       nodes.set(messageId, { ...message, parentId, extent: undefined });
     }
   });
+
+  // Channels go with what sends through them (messages, or channels before them), when that's all in one place
+  const sendersOf = new Map<string, string[]>();
+  edges.forEach((edge) => sendersOf.set(edge.target, [...(sendersOf.get(edge.target) ?? []), edge.source]));
+  for (let moved = true; moved; ) {
+    moved = false;
+    nodes.forEach((channel, channelId) => {
+      if (channel.type !== 'channels' || kept.has(channelId)) return;
+      const groups = new Set((sendersOf.get(channelId) ?? []).map((sender) => nodes.get(sender)?.parentId));
+      const [parentId] = [...groups];
+      if (groups.size === 1 && parentId && channel.parentId !== parentId) {
+        nodes.set(channelId, { ...channel, parentId, extent: undefined });
+        moved = true;
+      }
+    });
+  }
 };
 
 /**
@@ -860,7 +943,7 @@ const buildLevels = async ({ id, version, mode = 'full', channelRenderMode }: No
     ),
   ]);
 
-  const { nodes, edges, otherDomainIds, domainMessages } = buildDomainGraph({
+  const { nodes, edges, otherDomainIds, domainMessages, receivedBy } = buildDomainGraph({
     tree,
     owners,
     parentDomainOf,
@@ -888,7 +971,8 @@ const buildLevels = async ({ id, version, mode = 'full', channelRenderMode }: No
     systems.map(({ system }) => system),
     context.contextNodesById,
     new Map(tree.filter((entry) => entry.parentId).map((entry) => [entry.groupId, entry.domain])),
-    domainMessages
+    domainMessages,
+    receivedBy
   );
   const overview = hideMessageNodes(collapsed.nodes, collapsed.edges);
 

package/eventcatalog/src/utils/node-graphs/systems-node-graph.ts

@@ -126,17 +126,21 @@ export const getNodesAndEdges = async ({
 
   // Wrap the graph in one parent "system group" boundary node. Messages,
   // channels and data stores stay in it. With confineToMembers, only this
-  // system's own services are children; other services are left outside.
+  // system's own services are children; other services (and their agent tools)
+  // are left outside.
+  const graphNodes = [...nodes.values()];
+  const graphEdges = [...edges.values()];
   const graph = {
     nodes:
       wrapInSystemGroup && nodes.size > 0
         ? wrapNodesInSystemGroup(
-            [...nodes.values()],
+            graphNodes,
+            graphEdges,
             system,
             confineToMembers ? memberServiceNodeIds(system, serviceMap) : undefined
           )
-        : [...nodes.values()],
-    edges: [...edges.values()],
+        : graphNodes,
+    edges: graphEdges,
   };
 
   return layout ? layoutNodeGraph(graph) : graph;
@@ -167,11 +171,22 @@ const withoutGroupParent = (node: any) => {
  * Wraps a system's nodes in one parent `system-group` node (sized to fit them
  * when the graph is laid out), so they visibly belong to the system.
  * When `memberIds` is set, service and agent nodes that aren't members are
- * left outside the group.
+ * left outside the group, and so are the tools of agents left outside.
  */
-const wrapNodesInSystemGroup = (systemNodes: any[], system: any, memberIds?: Set<string>) => {
+const wrapNodesInSystemGroup = (systemNodes: any[], systemEdges: any[], system: any, memberIds?: Set<string>) => {
   const groupId = `system-group-${system.data.id}-${system.data.version}`;
 
+  const outside = new Set<string>(
+    memberIds
+      ? systemNodes.filter((node) => SERVICE_NODE_TYPES.has(node.type) && !memberIds.has(node.id)).map((node) => node.id)
+      : []
+  );
+  // An agent's tools sit wherever the agent does
+  const toolIds = new Set(systemNodes.filter((node) => node.type === 'agentTool').map((node) => node.id));
+  for (const edge of systemEdges) {
+    if (outside.has(edge.source) && toolIds.has(edge.target)) outside.add(edge.target);
+  }
+
   const groupNode = {
     id: groupId,
     type: 'system-group',
@@ -188,9 +203,8 @@ const wrapNodesInSystemGroup = (systemNodes: any[], system: any, memberIds?: Set
   // Parent must come before its children in the array for React Flow
   return [
     groupNode,
-    ...systemNodes.map((node) => {
-      if (memberIds && SERVICE_NODE_TYPES.has(node.type) && !memberIds.has(node.id)) return withoutGroupParent(node);
-      return { ...node, parentId: groupId, extent: 'parent' };
-    }),
+    ...systemNodes.map((node) =>
+      outside.has(node.id) ? withoutGroupParent(node) : { ...node, parentId: groupId, extent: 'parent' }
+    ),
   ];
 };

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "BUSL-1.1",
   "type": "module",
-  "version": "5.7.1",
+  "version": "5.7.4",
   "publishConfig": {
     "access": "public"
   },
@@ -142,10 +142,10 @@
     "yjs": "^13.6.33",
     "zod": "^4.6.6",
     "@eventcatalog/exporters": "0.1.4",
-    "@eventcatalog/linter": "1.3.1",
     "@eventcatalog/fitness": "0.1.1",
-    "@eventcatalog/sdk": "2.32.0",
-    "@eventcatalog/visualiser": "^5.2.1"
+    "@eventcatalog/linter": "1.3.1",
+    "@eventcatalog/visualiser": "^5.2.2",
+    "@eventcatalog/sdk": "2.32.0"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.10",