@eventcatalog/core 2.65.0 → 3.0.0-beta.0

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

@@ -1,5 +1,5 @@
 // import { getColor } from '@utils/colors';
-import { getEvents } from '@utils/events';
+import { getEvents } from '@utils/collections/events';
 import type { CollectionEntry } from 'astro:content';
 import dagre from 'dagre';
 import {
@@ -17,15 +17,17 @@ import {
   findMatchingNodes,
   getItemsFromCollectionByIdAndSemverOrLatest,
   getLatestVersionInCollectionById,
+  createVersionedMap,
+  findInMap,
 } from '@utils/collections/util';
 import type { CollectionMessageTypes } from '@types';
-import { getCommands } from '@utils/commands';
-import { getQueries } from '@utils/queries';
+import { getCommands } from '@utils/collections/commands';
+import { getQueries } from '@utils/collections/queries';
 import { createNode } from './utils/utils';
 import { getConsumersOfMessage, getProducersOfMessage } from '@utils/collections/services';
 import { getNodesAndEdgesForChannelChain } from './channel-node-graph';
-import { getChannelChain, isChannelsConnected } from '@utils/channels';
-import { getChannels } from '@utils/channels';
+import { getChannelChain, isChannelsConnected } from '@utils/collections/channels';
+import { getChannels } from '@utils/collections/channels';
 
 type DagreGraph = any;
 
@@ -64,6 +66,9 @@ const getNodesAndEdges = async ({
     };
   }
 
+  // Pre-calculate channel map for O(1) lookups
+  const channelMap = createVersionedMap(channels);
+
   // We always render the message itself
   nodes.push({
     id: generateIdForNode(message),
@@ -127,11 +132,7 @@ const getNodesAndEdges = async ({
 
     // If the producer has channels defined, we need to render them
     for (const producerChannel of producerChannelConfiguration) {
-      const channel = getItemsFromCollectionByIdAndSemverOrLatest(
-        channels,
-        producerChannel.id,
-        producerChannel.version
-      )[0] as CollectionEntry<'channels'>;
+      const channel = findInMap(channelMap, producerChannel.id, producerChannel.version) as CollectionEntry<'channels'>;
 
       // If we cannot find the channel in EventCatalog, we just connect the producer to the event directly
       if (!channel) {
@@ -219,11 +220,7 @@ const getNodesAndEdges = async ({
 
     // If the consumer has channels defined, we try and render them
     for (const consumerChannel of consumerChannelConfiguration) {
-      const channel = getItemsFromCollectionByIdAndSemverOrLatest(
-        channels,
-        consumerChannel.id,
-        consumerChannel.version
-      )[0] as CollectionEntry<'channels'>;
+      const channel = findInMap(channelMap, consumerChannel.id, consumerChannel.version) as CollectionEntry<'channels'>;
 
       // If we cannot find the channel in EventCatalog, we connect the message directly to the consumer
       if (!channel) {
@@ -246,18 +243,18 @@ const getNodesAndEdges = async ({
       const consumerChannels = consumer.data.receives?.find((receive) => receive.id === message.data.id)?.from ?? [];
 
       for (const producerChannel of producerChannels) {
-        const producerChannelValue = getItemsFromCollectionByIdAndSemverOrLatest(
-          channels,
+        const producerChannelValue = findInMap(
+          channelMap,
           producerChannel.id,
           producerChannel.version
-        )[0] as CollectionEntry<'channels'>;
+        ) as CollectionEntry<'channels'>;
 
         for (const consumerChannel of consumerChannels) {
-          const consumerChannelValue = getItemsFromCollectionByIdAndSemverOrLatest(
-            channels,
+          const consumerChannelValue = findInMap(
+            channelMap,
             consumerChannel.id,
             consumerChannel.version
-          )[0] as CollectionEntry<'channels'>;
+          ) as CollectionEntry<'channels'>;
           const channelChainToRender = getChannelChain(producerChannelValue, consumerChannelValue, channels);
 
           // If there is a chain between them we need to render them al
@@ -416,6 +413,7 @@ export const getNodesAndEdgesForConsumedMessage = ({
   currentNodes = [],
   target,
   mode = 'simple',
+  channelMap,
 }: {
   message: CollectionEntry<CollectionMessageTypes>;
   targetChannels?: { id: string; version: string }[];
@@ -424,10 +422,14 @@ export const getNodesAndEdgesForConsumedMessage = ({
   currentNodes: Node[];
   target: CollectionEntry<'services'>;
   mode?: 'simple' | 'full';
+  channelMap?: Map<string, CollectionEntry<'channels'>[]>;
 }) => {
   let nodes = [] as Node[],
     edges = [] as any;
 
+  // Use the provided map or create one if missing
+  const map = channelMap || createVersionedMap(channels);
+
   const messageId = generateIdForNode(message);
 
   const rootSourceAndTarget = {
@@ -458,8 +460,8 @@ export const getNodesAndEdgesForConsumedMessage = ({
   const targetMessageConfiguration = target.data.receives?.find((receive) => receive.id === message.data.id);
   const channelsFromMessageToTarget = targetMessageConfiguration?.from ?? [];
   const hydratedChannelsFromMessageToTarget = channelsFromMessageToTarget
-    .map((channel) => getItemsFromCollectionByIdAndSemverOrLatest(channels, channel.id, channel.version)[0])
-    .filter((channel) => channel !== undefined);
+    .map((channel) => findInMap(map, channel.id, channel.version))
+    .filter((channel): channel is CollectionEntry<'channels'> => channel !== undefined);
 
   // Now we get the producers of the message and create nodes and edges for them
   const producers = getProducersOfMessage(services, message);
@@ -467,8 +469,6 @@ export const getNodesAndEdgesForConsumedMessage = ({
   const hasProducers = producers.length > 0;
   const targetHasDefinedChannels = targetChannels.length > 0;
 
-  const isMessageEvent = message.collection === 'events';
-
   // Warning edge if no producers or target channels are defined
   if (!hasProducers && !targetHasDefinedChannels) {
     edges.push(
@@ -485,11 +485,7 @@ export const getNodesAndEdgesForConsumedMessage = ({
   // If the target defined channels they consume the message from, we need to create the channel nodes and edges
   if (targetHasDefinedChannels) {
     for (const targetChannel of targetChannels) {
-      const channel = getItemsFromCollectionByIdAndSemverOrLatest(
-        channels,
-        targetChannel.id,
-        targetChannel.version
-      )[0] as CollectionEntry<'channels'>;
+      const channel = findInMap(map, targetChannel.id, targetChannel.version) as CollectionEntry<'channels'>;
 
       if (!channel) {
         // No channe found, we just connect the message to the target directly
@@ -530,8 +526,6 @@ export const getNodesAndEdgesForConsumedMessage = ({
 
       // If we dont have any producers, we will connect the message to the channel directly
       if (producers.length === 0) {
-        const isEvent = message.collection === 'events';
-
         edges.push(
           createEdge({
             id: generatedIdForEdge(message, channel),
@@ -617,11 +611,7 @@ export const getNodesAndEdgesForConsumedMessage = ({
 
     // Process each producer channel configuration
     for (const producerChannel of producerChannelConfiguration) {
-      const channel = getItemsFromCollectionByIdAndSemverOrLatest(
-        channels,
-        producerChannel.id,
-        producerChannel.version
-      )[0] as CollectionEntry<'channels'>;
+      const channel = findInMap(map, producerChannel.id, producerChannel.version) as CollectionEntry<'channels'>;
 
       // If we cannot find the channel in EventCatalog, we just connect the message to the target directly
       if (!channel) {
@@ -729,6 +719,7 @@ export const getNodesAndEdgesForProducedMessage = ({
   currentEdges = [],
   source,
   mode = 'simple',
+  channelMap,
 }: {
   message: CollectionEntry<CollectionMessageTypes>;
   sourceChannels?: { id: string; version: string }[];
@@ -738,10 +729,14 @@ export const getNodesAndEdgesForProducedMessage = ({
   currentEdges: Edge[];
   source: CollectionEntry<'services'>;
   mode?: 'simple' | 'full';
+  channelMap?: Map<string, CollectionEntry<'channels'>[]>;
 }) => {
   let nodes = [] as Node[],
     edges = [] as any;
 
+  // Use provided map or create one
+  const map = channelMap || createVersionedMap(channels);
+
   const messageId = generateIdForNode(message);
 
   const rootSourceAndTarget = {
@@ -784,17 +779,13 @@ export const getNodesAndEdgesForProducedMessage = ({
   const channelsFromSourceToMessage = sourceMessageConfiguration?.to ?? [];
 
   const hydratedChannelsFromSourceToMessage = channelsFromSourceToMessage
-    .map((channel) => getItemsFromCollectionByIdAndSemverOrLatest(channels, channel.id, channel.version)[0])
-    .filter((channel) => channel !== undefined);
+    .map((channel) => findInMap(map, channel.id, channel.version))
+    .filter((channel): channel is CollectionEntry<'channels'> => channel !== undefined);
 
   // If the source defined channels they send the message to, we need to create the channel nodes and edges
   if (sourceChannels && sourceChannels.length > 0) {
     for (const sourceChannel of sourceChannels) {
-      const channel = getItemsFromCollectionByIdAndSemverOrLatest(
-        channels,
-        sourceChannel.id,
-        sourceChannel.version
-      )[0] as CollectionEntry<'channels'>;
+      const channel = findInMap(map, sourceChannel.id, sourceChannel.version) as CollectionEntry<'channels'>;
 
       if (!channel) {
         // No channel found, we just connect the message to the source directly
@@ -881,11 +872,7 @@ export const getNodesAndEdgesForProducedMessage = ({
 
     // Process each consumer channel configuration
     for (const consumerChannel of consumerChannelConfiguration) {
-      const channel = getItemsFromCollectionByIdAndSemverOrLatest(
-        channels,
-        consumerChannel.id,
-        consumerChannel.version
-      )[0] as CollectionEntry<'channels'>;
+      const channel = findInMap(map, consumerChannel.id, consumerChannel.version) as CollectionEntry<'channels'>;
 
       const edgeProps = { customColor: getColorFromString(message.data.id), rootSourceAndTarget };
 

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

@@ -8,7 +8,7 @@ import {
   createEdge,
 } from '@utils/node-graphs/utils/utils';
 
-import { findMatchingNodes, getItemsFromCollectionByIdAndSemverOrLatest } from '@utils/collections/util';
+import { findMatchingNodes, findInMap, createVersionedMap } from '@utils/collections/util';
 import { MarkerType } from '@xyflow/react';
 import type { CollectionMessageTypes } from '@types';
 import { getNodesAndEdgesForConsumedMessage, getNodesAndEdgesForProducedMessage } from './message-node-graph';
@@ -63,7 +63,15 @@ export const getNodesAndEdges = async ({
   let nodes = [] as any,
     edges = [] as any;
 
-  const services = await getCollection('services');
+  // Fetch all collections in parallel
+  const [services, events, commands, queries, channels, containers] = await Promise.all([
+    getCollection('services'),
+    getCollection('events'),
+    getCollection('commands'),
+    getCollection('queries'),
+    getCollection('channels'),
+    getCollection('containers'),
+  ]);
 
   const service = services.find((service) => service.data.id === id && service.data.version === version);
 
@@ -75,37 +83,31 @@ export const getNodesAndEdges = async ({
     };
   }
 
+  // Build maps for O(1) lookups
+  const messages = [...events, ...commands, ...queries];
+  const messageMap = createVersionedMap(messages);
+  const containerMap = createVersionedMap(containers);
+  const channelMap = createVersionedMap(channels);
+
   const receivesRaw = service?.data.receives || [];
   const sendsRaw = service?.data.sends || [];
   const writesToRaw = service?.data.writesTo || [];
   const readsFromRaw = service?.data.readsFrom || [];
 
-  const events = await getCollection('events');
-  const commands = await getCollection('commands');
-  const queries = await getCollection('queries');
-  const channels = await getCollection('channels');
-  const containers = await getCollection('containers');
-
-  const messages = [...events, ...commands, ...queries];
-
   const receivesHydrated = receivesRaw
-    .map((message) => getItemsFromCollectionByIdAndSemverOrLatest(messages, message.id, message.version))
-    .flat()
+    .map((message) => findInMap(messageMap, message.id, message.version))
     .filter((e) => e !== undefined);
 
   const sendsHydrated = sendsRaw
-    .map((message) => getItemsFromCollectionByIdAndSemverOrLatest(messages, message.id, message.version))
-    .flat()
+    .map((message) => findInMap(messageMap, message.id, message.version))
     .filter((e) => e !== undefined);
 
   const writesToHydrated = writesToRaw
-    .map((container) => getItemsFromCollectionByIdAndSemverOrLatest(containers, container.id, container.version))
-    .flat()
+    .map((container) => findInMap(containerMap, container.id, container.version))
     .filter((e) => e !== undefined);
 
   const readsFromHydrated = readsFromRaw
-    .map((container) => getItemsFromCollectionByIdAndSemverOrLatest(containers, container.id, container.version))
-    .flat()
+    .map((container) => findInMap(containerMap, container.id, container.version))
     .filter((e) => e !== undefined);
 
   const receives = (receivesHydrated as CollectionEntry<CollectionMessageTypes>[]) || [];
@@ -130,6 +132,7 @@ export const getNodesAndEdges = async ({
         target: service,
         mode,
         channels,
+        channelMap,
       });
 
       nodes.push(...consumedMessageNodes);
@@ -221,6 +224,7 @@ export const getNodesAndEdges = async ({
         currentEdges: edges,
         mode,
         channels,
+        channelMap,
       });
 
       nodes.push(...producedMessageNodes);

package/eventcatalog/src/utils/page-loaders/page-data-loader.ts

@@ -1,11 +1,11 @@
 import type { CollectionTypes, PageTypes } from '@types';
-import { getChannels } from '@utils/channels';
+import { getChannels } from '@utils/collections/channels';
 import { getDomains } from '@utils/collections/domains';
-import { getCommands, getEvents } from '@utils/messages';
-import { getQueries } from '@utils/queries';
+import { getCommands, getEvents } from '@utils/collections/messages';
+import { getQueries } from '@utils/collections/queries';
 import { getServices } from '@utils/collections/services';
 import { getFlows } from '@utils/collections/flows';
-import { getEntities } from '@utils/entities';
+import { getEntities } from '@utils/collections/entities';
 import { getContainers } from '@utils/collections/containers';
 import type { CollectionEntry } from 'astro:content';
 

package/eventcatalog/tailwind.config.mjs

@@ -34,6 +34,20 @@ export default {
         },
         ...theme,
       },
+      keyframes: {
+        'progress-bar': {
+          '0%': { transform: 'translateX(-100%)' },
+          '100%': { transform: 'translateX(100%)' },
+        },
+        'progress-bar-reverse': {
+          '0%': { transform: 'translateX(100%)' },
+          '100%': { transform: 'translateX(-100%)' },
+        },
+      },
+      animation: {
+        'progress-bar': 'progress-bar 2s linear infinite',
+        'progress-bar-reverse': 'progress-bar-reverse 2s linear infinite',
+      },
     },
   },
   safelist: [

package/eventcatalog/tsconfig.json

@@ -15,7 +15,8 @@
       "@layouts/*": ["src/layouts/*"],
       "@enterprise/*": ["src/enterprise/*"],
       "@ai/*": ["src/generated-ai/*"],
-      "auth:config": ["./auth.config.ts"]
+      "auth:config": ["./auth.config.ts"],
+      "@stores/*": ["src/stores/*"]
     },
     "jsx": "react-jsx",
     "jsxImportSource": "react",

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.65.0",
+  "version": "3.0.0-beta.0",
   "publishConfig": {
     "access": "public"
   },
@@ -45,6 +45,7 @@
     "@heroicons/react": "^2.1.3",
     "@iconify-json/logos": "^1.2.4",
     "@mermaid-js/layout-elk": "^0.2.0",
+    "@nanostores/react": "^1.0.0",
     "@parcel/watcher": "^2.4.1",
     "@radix-ui/react-context-menu": "^2.2.6",
     "@radix-ui/react-dialog": "^1.1.6",
@@ -56,7 +57,7 @@
     "@tanstack/react-table": "^8.17.3",
     "@xyflow/react": "^12.3.6",
     "ai": "^5.0.60",
-    "astro": "^5.16.0",
+    "astro": "^5.16.4",
     "astro-compress": "^2.3.8",
     "astro-expressive-code": "^0.41.3",
     "astro-seo": "^0.8.4",
@@ -83,6 +84,7 @@
     "lucide-react": "^0.453.0",
     "marked": "^15.0.6",
     "mermaid": "^11.4.1",
+    "nanostores": "^1.1.0",
     "pagefind": "^1.3.0",
     "pako": "^2.1.0",
     "react": "^18.3.1",
@@ -99,13 +101,14 @@
     "semver": "7.6.3",
     "shelljs": "^0.8.5",
     "tailwindcss": "^3.4.3",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^5.4.5",
     "unist-util-visit": "^5.0.0",
     "update-notifier": "^7.3.1",
     "uuid": "^10.0.0"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.9.5",
+    "@astrojs/check": "^0.9.6",
     "@changesets/cli": "^2.27.5",
     "@playwright/test": "^1.48.1",
     "@types/dagre": "^0.7.52",
@@ -134,7 +137,7 @@
   "scripts": {
     "dev": "astro dev",
     "build:bin": "tsup",
-    "test": "vitest",
+    "test": "cross-env DISABLE_EVENTCATALOG_CACHE=true vitest",
     "test:ci": "node scripts/ci/test.js",
     "test:e2e": "playwright test",
     "start": "astro dev",

package/eventcatalog/src/components/DiscoverInsight.astro

@@ -1,61 +0,0 @@
----
-import { buildUrl } from '@utils/url-builder';
-import type React from 'react';
-import config from '@config';
-import { RssIcon } from 'lucide-react';
-interface Props {
-  color: string;
-  dataTarget: number;
-  icon: React.ElementType;
-  label: 'domains' | 'services' | 'commands' | 'queries' | 'events' | 'flows';
-}
-
-const { color, dataTarget, icon: Icon, label } = Astro.props;
-const isRSSEnabled = config.rss?.enabled;
----
-
-<div class={`relative text-center ${color}`}>
-  <div class="flex justify-center mb-2">
-    <Icon className="w-8 h-8" />
-  </div>
-
-  <div class="text-2xl font-bold mb-1">
-    <span class="statistic" data-target={dataTarget}>0</span>
-  </div>
-
-  <a href={buildUrl(`/discover/${label}`)} class="static hover:underline underline-offset-8 text-sm text-gray-600 capitalize">
-    {label}
-  </a>
-  {
-    isRSSEnabled && (
-      <div class="text-center flex justify-center items-center mt-2">
-        <a href={buildUrl(`/rss/${label}/rss.xml`)} class="flex items-center space-x-2 hover:underline underline-offset-8 ">
-          <RssIcon className="h-3 w-3 text-gray-800 group-hover:text-white" strokeWidth={1} />
-          <span class="text-xs text-gray-600 capitalize">RSS Feed</span>
-        </a>
-      </div>
-    )
-  }
-</div>
-
-<script>
-  function animateStatistics() {
-    const statistics = document.querySelectorAll('.statistic');
-    statistics.forEach((statistic) => {
-      let target = parseInt(statistic.getAttribute('data-target')!);
-      let current = 0;
-      const increment = target / 50;
-      const timer = setInterval(() => {
-        current += increment;
-        if (current >= target) {
-          clearInterval(timer);
-          statistic.textContent = target.toString();
-        } else {
-          statistic.textContent = Math.round(current).toString();
-        }
-      }, 20);
-    });
-  }
-
-  window.addEventListener('load', animateStatistics);
-</script>