@eventcatalog/core 2.55.2 → 2.55.4

package/dist/analytics/analytics.cjs

@@ -37,7 +37,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.55.2";
+var version = "2.55.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-IDIX2ZKS.js";
-import "../chunk-GVFJKTWB.js";
+} from "../chunk-DJEUHHVO.js";
+import "../chunk-HCICJ77X.js";
 export {
   raiseEvent
 };

package/dist/analytics/log-build.cjs

@@ -106,7 +106,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.55.2";
+var version = "2.55.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-5LLK3UBP.js";
-import "../chunk-IDIX2ZKS.js";
-import "../chunk-GVFJKTWB.js";
+} from "../chunk-RMB2KQZ5.js";
+import "../chunk-DJEUHHVO.js";
+import "../chunk-HCICJ77X.js";
 import "../chunk-UPONRQSN.js";
 export {
   log_build_default as default

package/dist/{chunk-IDIX2ZKS.js → chunk-DJEUHHVO.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-GVFJKTWB.js";
+} from "./chunk-HCICJ77X.js";
 
 // src/analytics/analytics.js
 import axios from "axios";

package/dist/{chunk-GVFJKTWB.js → chunk-HCICJ77X.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "2.55.2";
+var version = "2.55.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/{chunk-5LLK3UBP.js → chunk-RMB2KQZ5.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-IDIX2ZKS.js";
+} from "./chunk-DJEUHHVO.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/constants.cjs

@@ -25,7 +25,7 @@ __export(constants_exports, {
 module.exports = __toCommonJS(constants_exports);
 
 // package.json
-var version = "2.55.2";
+var version = "2.55.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-GVFJKTWB.js";
+} from "./chunk-HCICJ77X.js";
 export {
   VERSION
 };

package/dist/eventcatalog.cjs

@@ -157,7 +157,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.55.2";
+var version = "2.55.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-PLNJC7NZ.js";
 import {
   log_build_default
-} from "./chunk-5LLK3UBP.js";
-import "./chunk-IDIX2ZKS.js";
+} from "./chunk-RMB2KQZ5.js";
+import "./chunk-DJEUHHVO.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
@@ -15,7 +15,7 @@ import {
 import "./chunk-55D645EH.js";
 import {
   VERSION
-} from "./chunk-GVFJKTWB.js";
+} from "./chunk-HCICJ77X.js";
 import {
   getProjectOutDir,
   isAuthEnabled,

package/eventcatalog/src/components/Grids/DomainGrid.tsx

@@ -1,5 +1,5 @@
-import { useState, useMemo } from 'react';
-import { ServerIcon, EnvelopeIcon, RectangleGroupIcon } from '@heroicons/react/24/outline';
+import { useState, useMemo, useEffect } from 'react';
+import { ServerIcon, EnvelopeIcon, RectangleGroupIcon, Squares2X2Icon, QueueListIcon } from '@heroicons/react/24/outline';
 import { buildUrlWithParams } from '@utils/url-builder';
 import type { CollectionEntry } from 'astro:content';
 import { type CollectionMessageTypes } from '@types';
@@ -21,6 +21,24 @@ interface DomainGridProps {
 
 export default function DomainGrid({ domains, embeded }: DomainGridProps) {
   const [searchQuery, setSearchQuery] = useState('');
+  const [isMultiColumn, setIsMultiColumn] = useState(false);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const saved = localStorage.getItem('EventCatalog:ArchitectureColumnLayout');
+      if (saved !== null) {
+        setIsMultiColumn(saved === 'multi');
+      }
+    }
+  }, []);
+
+  const toggleColumnLayout = () => {
+    const newValue = !isMultiColumn;
+    setIsMultiColumn(newValue);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('EventCatalog:ArchitectureColumnLayout', newValue ? 'multi' : 'single');
+    }
+  };
 
   const filteredDomains = useMemo(() => {
     let result = [...domains];
@@ -63,7 +81,7 @@ export default function DomainGrid({ domains, embeded }: DomainGridProps) {
             <p className="mt-2 text-sm text-gray-500">Browse and manage domains in your event-driven architecture</p>
           </div>
 
-          <div className="mt-6 md:mt-0 md:ml-4 flex-shrink-0">
+          <div className="mt-6 md:mt-0 md:ml-4 flex-shrink-0 flex items-center gap-3">
             <SearchBar
               searchQuery={searchQuery}
               onSearchChange={setSearchQuery}
@@ -71,11 +89,22 @@ export default function DomainGrid({ domains, embeded }: DomainGridProps) {
               totalResults={filteredDomains.length}
               totalItems={domains.length}
             />
+            <button
+              onClick={toggleColumnLayout}
+              className="flex items-center justify-center p-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors duration-200"
+              title={isMultiColumn ? 'Switch to single column' : 'Switch to multi column'}
+            >
+              {isMultiColumn ? (
+                <QueueListIcon className="h-5 w-5 text-gray-600" />
+              ) : (
+                <Squares2X2Icon className="h-5 w-5 text-gray-600" />
+              )}
+            </button>
           </div>
         </div>
       </div>
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 gap-6">
+      <div className={`grid gap-6 ${isMultiColumn ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2' : 'grid-cols-1'}`}>
         {filteredDomains.map((domain) => (
           <a
             key={domain.data.id}

package/eventcatalog/src/components/Grids/ServiceGrid.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useEffect, memo } from 'react';
-import { ServerIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { ServerIcon, ChevronRightIcon, Squares2X2Icon, QueueListIcon } from '@heroicons/react/24/outline';
 import { RectangleGroupIcon } from '@heroicons/react/24/outline';
 import { buildUrl, buildUrlWithParams } from '@utils/url-builder';
 import type { CollectionEntry } from 'astro:content';
@@ -117,7 +117,19 @@ const ServiceCard = memo(({ service, urlParams, selectedTypes }: { service: any;
 
 // Domain Section component
 const DomainSection = memo(
-  ({ domain, services, urlParams, selectedTypes }: { domain: any; services: any[]; urlParams: any; selectedTypes: string[] }) => {
+  ({
+    domain,
+    services,
+    urlParams,
+    selectedTypes,
+    isMultiColumn,
+  }: {
+    domain: any;
+    services: any[];
+    urlParams: any;
+    selectedTypes: string[];
+    isMultiColumn: boolean;
+  }) => {
     const subdomains = domain.data.domains || [];
     const allSubDomainServices = subdomains.map((subdomain: any) => subdomain.data.services || []).flat();
 
@@ -128,7 +140,9 @@ const DomainSection = memo(
     return (
       <div className="space-y-6">
         {servicesWithoutSubdomains.length > 0 && (
-          <div className="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 xl:grid-cols-1 gap-6">
+          <div
+            className={`grid gap-6 ${isMultiColumn ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2' : 'grid-cols-1'}`}
+          >
             {servicesWithoutSubdomains.map((service) => (
               <ServiceCard key={service.data.id} service={service} urlParams={urlParams} selectedTypes={selectedTypes} />
             ))}
@@ -186,7 +200,9 @@ const DomainSection = memo(
                 </div>
               )}
 
-              <div className="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 xl:grid-cols-1 gap-6">
+              <div
+                className={`grid gap-6 ${isMultiColumn ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2' : 'grid-cols-1'}`}
+              >
                 {subdomainServices.map((service) => (
                   <ServiceCard
                     key={service.data.id}
@@ -219,6 +235,7 @@ export default function ServiceGrid({ services, domains, embeded }: ServiceGridP
   const [searchQuery, setSearchQuery] = useState('');
   const [currentPage, setCurrentPage] = useState(1);
   const [selectedTypes, setSelectedTypes] = useState<CollectionMessageTypes[]>([]);
+  const [isMultiColumn, setIsMultiColumn] = useState(false);
   const ITEMS_PER_PAGE = 16;
   const [urlParams, setUrlParams] = useState<{
     serviceIds?: string[];
@@ -237,6 +254,23 @@ export default function ServiceGrid({ services, domains, embeded }: ServiceGridP
     });
   }, []);
 
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const saved = localStorage.getItem('EventCatalog:ServiceColumnLayout');
+      if (saved !== null) {
+        setIsMultiColumn(saved === 'multi');
+      }
+    }
+  }, []);
+
+  const toggleColumnLayout = () => {
+    const newValue = !isMultiColumn;
+    setIsMultiColumn(newValue);
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('EventCatalog:ServiceColumnLayout', newValue ? 'multi' : 'single');
+    }
+  };
+
   const filteredAndSortedServices = useMemo(() => {
     if (urlParams === null) return [];
 
@@ -325,7 +359,7 @@ export default function ServiceGrid({ services, domains, embeded }: ServiceGridP
             </p>
           </div>
 
-          <div className="mt-6 md:mt-0 md:ml-4 flex-shrink-0">
+          <div className="mt-6 md:mt-0 md:ml-4 flex-shrink-0 flex items-center gap-3">
             <SearchBar
               searchQuery={searchQuery}
               onSearchChange={setSearchQuery}
@@ -333,6 +367,17 @@ export default function ServiceGrid({ services, domains, embeded }: ServiceGridP
               totalResults={filteredAndSortedServices.length}
               totalItems={services.length}
             />
+            <button
+              onClick={toggleColumnLayout}
+              className="flex items-center justify-center p-2 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors duration-200"
+              title={isMultiColumn ? 'Switch to single column' : 'Switch to multi column'}
+            >
+              {isMultiColumn ? (
+                <QueueListIcon className="h-5 w-5 text-gray-600" />
+              ) : (
+                <Squares2X2Icon className="h-5 w-5 text-gray-600" />
+              )}
+            </button>
           </div>
         </div>
       </div>
@@ -383,10 +428,13 @@ export default function ServiceGrid({ services, domains, embeded }: ServiceGridP
                   services={paginatedServices}
                   urlParams={urlParams}
                   selectedTypes={selectedTypes}
+                  isMultiColumn={isMultiColumn}
                 />
               ))
           ) : (
-            <div className={`grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 xl:grid-cols-1 gap-6`}>
+            <div
+              className={`grid gap-6 ${isMultiColumn ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2' : 'grid-cols-1'}`}
+            >
               {paginatedServices.map((service) => (
                 <ServiceCard key={service.data.id} service={service} urlParams={urlParams} selectedTypes={selectedTypes} />
               ))}

package/eventcatalog/src/pages/architecture/architecture.astro

@@ -7,6 +7,7 @@ import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 import DomainGrid from '@components/Grids/DomainGrid';
 import ServiceGrid from '@components/Grids/ServiceGrid';
 import MessageGrid from '@components/Grids/MessageGrid';
+import { removeContentFromCollection } from '@utils/collections/util';
 
 import type { CollectionEntry } from 'astro:content';
 import type { CollectionMessageTypes } from '@types';
@@ -64,13 +65,9 @@ if (type === 'services') {
   }) as unknown as Service[];
   items = filteredServices;
 } else if (type === 'messages') {
-  const { events, commands, queries } = await getMessages({ getAllVersions: false });
+  const { events, commands, queries } = await getMessages({ getAllVersions: false, hydrateServices: false });
   const messages = [...events, ...commands, ...queries];
-  items = messages.map((m) => ({
-    ...m,
-    body: undefined,
-    catalog: undefined,
-  })) as unknown as CollectionEntry<CollectionMessageTypes>[];
+  items = removeContentFromCollection(messages) as unknown as CollectionEntry<CollectionMessageTypes>[];
 }
 ---
 

package/eventcatalog/src/utils/collections/util.ts

@@ -148,3 +148,11 @@ export const getDeprecatedDetails = (item: CollectionEntry<CollectionTypes>) =>
 
   return options;
 };
+
+export const removeContentFromCollection = (collection: CollectionEntry<CollectionTypes>[]) => {
+  return collection.map((item) => ({
+    ...item,
+    body: undefined,
+    catalog: undefined,
+  }));
+};

package/eventcatalog/src/utils/commands.ts

@@ -15,6 +15,7 @@ type Command = CollectionEntry<'commands'> & {
 
 interface Props {
   getAllVersions?: boolean;
+  hydrateServices?: boolean;
 }
 
 // cache for build time
@@ -23,10 +24,10 @@ let cachedCommands: Record<string, Command[]> = {
   currentVersions: [],
 };
 
-export const getCommands = async ({ getAllVersions = true }: Props = {}): Promise<Command[]> => {
+export const getCommands = async ({ getAllVersions = true, hydrateServices = true }: Props = {}): Promise<Command[]> => {
   const cacheKey = getAllVersions ? 'allVersions' : 'currentVersions';
 
-  if (cachedCommands[cacheKey].length > 0) {
+  if (cachedCommands[cacheKey].length > 0 && hydrateServices) {
     return cachedCommands[cacheKey];
   }
 
@@ -37,24 +38,35 @@ export const getCommands = async ({ getAllVersions = true }: Props = {}): Promis
   const services = await getCollection('services');
   const allChannels = await getCollection('channels');
 
+  // @ts-ignore
   cachedCommands[cacheKey] = commands.map((command) => {
     const { latestVersion, versions } = getVersionForCollectionItem(command, commands);
 
-    const producers = services.filter((service) => {
-      return service.data.sends?.some((item) => {
-        if (item.id != command.data.id) return false;
-        if (item.version == 'latest' || item.version == undefined) return command.data.version == latestVersion;
-        return satisfies(command.data.version, item.version);
+    const producers = services
+      .filter((service) => {
+        return service.data.sends?.some((item) => {
+          if (item.id != command.data.id) return false;
+          if (item.version == 'latest' || item.version == undefined) return command.data.version == latestVersion;
+          return satisfies(command.data.version, item.version);
+        });
+      })
+      .map((service) => {
+        if (!hydrateServices) return { id: service.id, version: service.data.version };
+        return service;
       });
-    });
 
-    const consumers = services.filter((service) => {
-      return service.data.receives?.some((item) => {
-        if (item.id != command.data.id) return false;
-        if (item.version == 'latest' || item.version == undefined) return command.data.version == latestVersion;
-        return satisfies(command.data.version, item.version);
+    const consumers = services
+      .filter((service) => {
+        return service.data.receives?.some((item) => {
+          if (item.id != command.data.id) return false;
+          if (item.version == 'latest' || item.version == undefined) return command.data.version == latestVersion;
+          return satisfies(command.data.version, item.version);
+        });
+      })
+      .map((service) => {
+        if (!hydrateServices) return { id: service.id, version: service.data.version };
+        return service;
       });
-    });
 
     const messageChannels = command.data.channels || [];
     const channelsForCommand = allChannels.filter((c) => messageChannels.some((channel) => c.data.id === channel.id));

package/eventcatalog/src/utils/events.ts

@@ -15,6 +15,7 @@ type Event = CollectionEntry<'events'> & {
 
 interface Props {
   getAllVersions?: boolean;
+  hydrateServices?: boolean;
 }
 
 // cache for build time
@@ -23,10 +24,10 @@ let cachedEvents: Record<string, Event[]> = {
   currentVersions: [],
 };
 
-export const getEvents = async ({ getAllVersions = true }: Props = {}): Promise<Event[]> => {
+export const getEvents = async ({ getAllVersions = true, hydrateServices = true }: Props = {}): Promise<Event[]> => {
   const cacheKey = getAllVersions ? 'allVersions' : 'currentVersions';
 
-  if (cachedEvents[cacheKey].length > 0) {
+  if (cachedEvents[cacheKey].length > 0 && hydrateServices) {
     return cachedEvents[cacheKey];
   }
 
@@ -37,24 +38,35 @@ export const getEvents = async ({ getAllVersions = true }: Props = {}): Promise<
   const services = await getCollection('services');
   const allChannels = await getCollection('channels');
 
+  // @ts-ignore
   cachedEvents[cacheKey] = events.map((event) => {
     const { latestVersion, versions } = getVersionForCollectionItem(event, events);
 
-    const producers = services.filter((service) =>
-      service.data.sends?.some((item) => {
-        if (item.id != event.data.id) return false;
-        if (item.version == 'latest' || item.version == undefined) return event.data.version == latestVersion;
-        return satisfies(event.data.version, item.version);
-      })
-    );
+    const producers = services
+      .filter((service) =>
+        service.data.sends?.some((item) => {
+          if (item.id != event.data.id) return false;
+          if (item.version == 'latest' || item.version == undefined) return event.data.version == latestVersion;
+          return satisfies(event.data.version, item.version);
+        })
+      )
+      .map((service) => {
+        if (!hydrateServices) return { id: service.id, version: service.data.version };
+        return service;
+      });
 
-    const consumers = services.filter((service) =>
-      service.data.receives?.some((item) => {
-        if (item.id != event.data.id) return false;
-        if (item.version == 'latest' || item.version == undefined) return event.data.version == latestVersion;
-        return satisfies(event.data.version, item.version);
-      })
-    );
+    const consumers = services
+      .filter((service) =>
+        service.data.receives?.some((item) => {
+          if (item.id != event.data.id) return false;
+          if (item.version == 'latest' || item.version == undefined) return event.data.version == latestVersion;
+          return satisfies(event.data.version, item.version);
+        })
+      )
+      .map((service) => {
+        if (!hydrateServices) return { id: service.id, version: service.data.version };
+        return service;
+      });
 
     const messageChannels = event.data.channels || [];
     const channelsForEvent = allChannels.filter((c) => messageChannels.some((channel) => c.data.id === channel.id));

package/eventcatalog/src/utils/messages.ts

@@ -8,6 +8,7 @@ export { getEvents } from '@utils/events';
 
 interface Props {
   getAllVersions?: boolean;
+  hydrateServices?: boolean;
 }
 
 type Messages = {
@@ -17,11 +18,11 @@ type Messages = {
 };
 
 // Main function that uses the imported functions
-export const getMessages = async ({ getAllVersions = true }: Props = {}): Promise<Messages> => {
+export const getMessages = async ({ getAllVersions = true, hydrateServices = true }: Props = {}): Promise<Messages> => {
   const [commands, events, queries] = await Promise.all([
-    getCommands({ getAllVersions }),
-    getEvents({ getAllVersions }),
-    getQueries({ getAllVersions }),
+    getCommands({ getAllVersions, hydrateServices }),
+    getEvents({ getAllVersions, hydrateServices }),
+    getQueries({ getAllVersions, hydrateServices }),
   ]);
 
   return {

package/eventcatalog/src/utils/queries.ts

@@ -15,6 +15,7 @@ type Query = CollectionEntry<'queries'> & {
 
 interface Props {
   getAllVersions?: boolean;
+  hydrateServices?: boolean;
 }
 
 // Cache for build time
@@ -23,10 +24,10 @@ let cachedQueries: Record<string, Query[]> = {
   currentVersions: [],
 };
 
-export const getQueries = async ({ getAllVersions = true }: Props = {}): Promise<Query[]> => {
+export const getQueries = async ({ getAllVersions = true, hydrateServices = true }: Props = {}): Promise<Query[]> => {
   const cacheKey = getAllVersions ? 'allVersions' : 'currentVersions';
 
-  if (cachedQueries[cacheKey].length > 0) {
+  if (cachedQueries[cacheKey].length > 0 && hydrateServices) {
     return cachedQueries[cacheKey];
   }
 
@@ -37,24 +38,35 @@ export const getQueries = async ({ getAllVersions = true }: Props = {}): Promise
   const services = await getCollection('services');
   const allChannels = await getCollection('channels');
 
+  // @ts-ignore
   cachedQueries[cacheKey] = queries.map((query) => {
     const { latestVersion, versions } = getVersionForCollectionItem(query, queries);
 
-    const producers = services.filter((service) =>
-      service.data.sends?.some((item) => {
-        if (item.id != query.data.id) return false;
-        if (item.version == 'latest' || item.version == undefined) return query.data.version == latestVersion;
-        return satisfies(query.data.version, item.version);
-      })
-    );
+    const producers = services
+      .filter((service) =>
+        service.data.sends?.some((item) => {
+          if (item.id != query.data.id) return false;
+          if (item.version == 'latest' || item.version == undefined) return query.data.version == latestVersion;
+          return satisfies(query.data.version, item.version);
+        })
+      )
+      .map((service) => {
+        if (!hydrateServices) return { id: service.id, version: service.data.version };
+        return service;
+      });
 
-    const consumers = services.filter((service) =>
-      service.data.receives?.some((item) => {
-        if (item.id != query.data.id) return false;
-        if (item.version == 'latest' || item.version == undefined) return query.data.version == latestVersion;
-        return satisfies(query.data.version, item.version);
-      })
-    );
+    const consumers = services
+      .filter((service) =>
+        service.data.receives?.some((item) => {
+          if (item.id != query.data.id) return false;
+          if (item.version == 'latest' || item.version == undefined) return query.data.version == latestVersion;
+          return satisfies(query.data.version, item.version);
+        })
+      )
+      .map((service) => {
+        if (!hydrateServices) return { id: service.id, version: service.data.version };
+        return service;
+      });
 
     const messageChannels = query.data.channels || [];
     const channelsForQuery = allChannels.filter((c) => messageChannels.some((channel) => c.data.id === channel.id));

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.55.2",
+  "version": "2.55.4",
   "publishConfig": {
     "access": "public"
   },