@eventcatalog/core 2.15.0 → 2.16.1

package/default-files-for-collections/ubiquitousLanguages.md

@@ -0,0 +1,7 @@
+---
+id: ubiquitous-language
+name: Ubiquitous Language
+summary: A shared language used by all team members to communicate about the system.
+description: A shared language used by all team members to communicate about the system.
+---
+<!-- Do not delete this file, required for EC, you an ignore this file -->

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.15.0";
+var version = "2.16.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-65VQIGAP.js";
-import "../chunk-TGOUSS6C.js";
+} from "../chunk-J5H7ICLD.js";
+import "../chunk-GEPV3ACK.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.15.0";
+var version = "2.16.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-KI4KAUWW.js";
-import "../chunk-65VQIGAP.js";
-import "../chunk-TGOUSS6C.js";
+} from "../chunk-A3QFF66M.js";
+import "../chunk-J5H7ICLD.js";
+import "../chunk-GEPV3ACK.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/catalog-to-astro-content-directory.cjs

@@ -129,7 +129,8 @@ var COLLECTION_KEYS = [
   "pages",
   "changelogs",
   "queries",
-  "channels"
+  "channels",
+  "ubiquitousLanguages"
 ];
 function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const relativeFilePath = removeBasePath(filePath, projectDir);
@@ -139,7 +140,11 @@ function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const baseTargetPaths = getBaseTargetPaths(relativeFilePath);
   const relativeTargetPath = getRelativeTargetPath(relativeFilePath);
   return baseTargetPaths.map(
-    (base) => import_node_path2.default.join(astroDir, base, relativeTargetPath.replace("index.md", "index.mdx").replace("changelog.md", "changelog.mdx"))
+    (base) => import_node_path2.default.join(
+      astroDir,
+      base,
+      relativeTargetPath.replace("index.md", "index.mdx").replace("changelog.md", "changelog.mdx").replace("ubiquitous-language.md", "ubiquitous-language.mdx")
+    )
   );
 }
 function removeBasePath(fullPath, basePath) {
@@ -172,6 +177,9 @@ function getBaseTargetPaths(filePath) {
     if (filePathArr[filePathArr.length - 1] == "changelog.md") {
       return [import_node_path2.default.join("src", "content", "changelogs")];
     }
+    if (filePathArr[filePathArr.length - 1] == "ubiquitous-language.md") {
+      return [import_node_path2.default.join("src", "content", "ubiquitousLanguages")];
+    }
     if (filePathArr[filePathArr.length - 1].match(/\.md$/)) {
       return [import_node_path2.default.join("src", "content")];
     }
@@ -241,7 +249,8 @@ var ensureAstroCollectionNotEmpty = async (astroDir) => {
     "pages",
     "changelogs",
     "queries",
-    "channels"
+    "channels",
+    "ubiquitousLanguages"
   ];
   const emptyCollections = [];
   for (const collection of COLLECTIONS) {

package/dist/catalog-to-astro-content-directory.js

@@ -1,8 +1,8 @@
 import {
   catalogToAstro
-} from "./chunk-O6BGVVOW.js";
+} from "./chunk-55YPRY5U.js";
 import "./chunk-E7TXTI7G.js";
-import "./chunk-PK2EQVPD.js";
+import "./chunk-5RNDOKYT.js";
 export {
   catalogToAstro
 };

package/dist/{chunk-O6BGVVOW.js → chunk-55YPRY5U.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk-E7TXTI7G.js";
 import {
   mapCatalogToAstro
-} from "./chunk-PK2EQVPD.js";
+} from "./chunk-5RNDOKYT.js";
 
 // src/catalog-to-astro-content-directory.js
 import { glob } from "glob";
@@ -50,7 +50,8 @@ var ensureAstroCollectionNotEmpty = async (astroDir) => {
     "pages",
     "changelogs",
     "queries",
-    "channels"
+    "channels",
+    "ubiquitousLanguages"
   ];
   const emptyCollections = [];
   for (const collection of COLLECTIONS) {

package/dist/{chunk-PK2EQVPD.js → chunk-5RNDOKYT.js}

@@ -11,7 +11,8 @@ var COLLECTION_KEYS = [
   "pages",
   "changelogs",
   "queries",
-  "channels"
+  "channels",
+  "ubiquitousLanguages"
 ];
 function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const relativeFilePath = removeBasePath(filePath, projectDir);
@@ -21,7 +22,11 @@ function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const baseTargetPaths = getBaseTargetPaths(relativeFilePath);
   const relativeTargetPath = getRelativeTargetPath(relativeFilePath);
   return baseTargetPaths.map(
-    (base) => path.join(astroDir, base, relativeTargetPath.replace("index.md", "index.mdx").replace("changelog.md", "changelog.mdx"))
+    (base) => path.join(
+      astroDir,
+      base,
+      relativeTargetPath.replace("index.md", "index.mdx").replace("changelog.md", "changelog.mdx").replace("ubiquitous-language.md", "ubiquitous-language.mdx")
+    )
   );
 }
 function removeBasePath(fullPath, basePath) {
@@ -54,6 +59,9 @@ function getBaseTargetPaths(filePath) {
     if (filePathArr[filePathArr.length - 1] == "changelog.md") {
       return [path.join("src", "content", "changelogs")];
     }
+    if (filePathArr[filePathArr.length - 1] == "ubiquitous-language.md") {
+      return [path.join("src", "content", "ubiquitousLanguages")];
+    }
     if (filePathArr[filePathArr.length - 1].match(/\.md$/)) {
       return [path.join("src", "content")];
     }

package/dist/{chunk-KI4KAUWW.js → chunk-A3QFF66M.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-65VQIGAP.js";
+} from "./chunk-J5H7ICLD.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-TGOUSS6C.js → chunk-GEPV3ACK.js}

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

package/dist/{chunk-65VQIGAP.js → chunk-J5H7ICLD.js}

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

package/dist/{chunk-7HYM3M5I.js → chunk-NTCYOR4N.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-E7TXTI7G.js";
 import {
   mapCatalogToAstro
-} from "./chunk-PK2EQVPD.js";
+} from "./chunk-5RNDOKYT.js";
 
 // src/watcher.js
 import watcher from "@parcel/watcher";

package/dist/constants.cjs

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

package/dist/constants.js

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

package/dist/eventcatalog.cjs

@@ -161,7 +161,7 @@ var import_axios = __toESM(require("axios"), 1);
 var import_os = __toESM(require("os"), 1);
 
 // package.json
-var version = "2.15.0";
+var version = "2.16.1";
 
 // src/constants.ts
 var VERSION = version;
@@ -226,7 +226,8 @@ var COLLECTION_KEYS = [
   "pages",
   "changelogs",
   "queries",
-  "channels"
+  "channels",
+  "ubiquitousLanguages"
 ];
 function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const relativeFilePath = removeBasePath(filePath, projectDir);
@@ -236,7 +237,11 @@ function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const baseTargetPaths = getBaseTargetPaths(relativeFilePath);
   const relativeTargetPath = getRelativeTargetPath(relativeFilePath);
   return baseTargetPaths.map(
-    (base) => import_node_path3.default.join(astroDir, base, relativeTargetPath.replace("index.md", "index.mdx").replace("changelog.md", "changelog.mdx"))
+    (base) => import_node_path3.default.join(
+      astroDir,
+      base,
+      relativeTargetPath.replace("index.md", "index.mdx").replace("changelog.md", "changelog.mdx").replace("ubiquitous-language.md", "ubiquitous-language.mdx")
+    )
   );
 }
 function removeBasePath(fullPath, basePath) {
@@ -269,6 +274,9 @@ function getBaseTargetPaths(filePath) {
     if (filePathArr[filePathArr.length - 1] == "changelog.md") {
       return [import_node_path3.default.join("src", "content", "changelogs")];
     }
+    if (filePathArr[filePathArr.length - 1] == "ubiquitous-language.md") {
+      return [import_node_path3.default.join("src", "content", "ubiquitousLanguages")];
+    }
     if (filePathArr[filePathArr.length - 1].match(/\.md$/)) {
       return [import_node_path3.default.join("src", "content")];
     }
@@ -425,7 +433,8 @@ var ensureAstroCollectionNotEmpty = async (astroDir) => {
     "pages",
     "changelogs",
     "queries",
-    "channels"
+    "channels",
+    "ubiquitousLanguages"
   ];
   const emptyCollections = [];
   for (const collection of COLLECTIONS) {

package/dist/eventcatalog.js

@@ -1,21 +1,21 @@
 import {
   log_build_default
-} from "./chunk-KI4KAUWW.js";
-import "./chunk-65VQIGAP.js";
+} from "./chunk-A3QFF66M.js";
+import "./chunk-J5H7ICLD.js";
 import {
   catalogToAstro
-} from "./chunk-O6BGVVOW.js";
+} from "./chunk-55YPRY5U.js";
 import {
   VERSION
-} from "./chunk-TGOUSS6C.js";
+} from "./chunk-GEPV3ACK.js";
 import {
   generate
 } from "./chunk-YEQVKHST.js";
 import {
   watch
-} from "./chunk-7HYM3M5I.js";
+} from "./chunk-NTCYOR4N.js";
 import "./chunk-E7TXTI7G.js";
-import "./chunk-PK2EQVPD.js";
+import "./chunk-5RNDOKYT.js";
 
 // src/eventcatalog.ts
 import { Command } from "commander";

package/dist/map-catalog-to-astro.cjs

@@ -45,7 +45,8 @@ var COLLECTION_KEYS = [
   "pages",
   "changelogs",
   "queries",
-  "channels"
+  "channels",
+  "ubiquitousLanguages"
 ];
 function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const relativeFilePath = removeBasePath(filePath, projectDir);
@@ -55,7 +56,11 @@ function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const baseTargetPaths = getBaseTargetPaths(relativeFilePath);
   const relativeTargetPath = getRelativeTargetPath(relativeFilePath);
   return baseTargetPaths.map(
-    (base) => import_node_path.default.join(astroDir, base, relativeTargetPath.replace("index.md", "index.mdx").replace("changelog.md", "changelog.mdx"))
+    (base) => import_node_path.default.join(
+      astroDir,
+      base,
+      relativeTargetPath.replace("index.md", "index.mdx").replace("changelog.md", "changelog.mdx").replace("ubiquitous-language.md", "ubiquitous-language.mdx")
+    )
   );
 }
 function removeBasePath(fullPath, basePath) {
@@ -88,6 +93,9 @@ function getBaseTargetPaths(filePath) {
     if (filePathArr[filePathArr.length - 1] == "changelog.md") {
       return [import_node_path.default.join("src", "content", "changelogs")];
     }
+    if (filePathArr[filePathArr.length - 1] == "ubiquitous-language.md") {
+      return [import_node_path.default.join("src", "content", "ubiquitousLanguages")];
+    }
     if (filePathArr[filePathArr.length - 1].match(/\.md$/)) {
       return [import_node_path.default.join("src", "content")];
     }

package/dist/map-catalog-to-astro.js

@@ -1,6 +1,6 @@
 import {
   mapCatalogToAstro
-} from "./chunk-PK2EQVPD.js";
+} from "./chunk-5RNDOKYT.js";
 export {
   mapCatalogToAstro
 };

package/dist/watcher.cjs

@@ -49,7 +49,8 @@ var COLLECTION_KEYS = [
   "pages",
   "changelogs",
   "queries",
-  "channels"
+  "channels",
+  "ubiquitousLanguages"
 ];
 function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const relativeFilePath = removeBasePath(filePath, projectDir);
@@ -59,7 +60,11 @@ function mapCatalogToAstro({ filePath, astroDir, projectDir }) {
   const baseTargetPaths = getBaseTargetPaths(relativeFilePath);
   const relativeTargetPath = getRelativeTargetPath(relativeFilePath);
   return baseTargetPaths.map(
-    (base) => import_node_path.default.join(astroDir, base, relativeTargetPath.replace("index.md", "index.mdx").replace("changelog.md", "changelog.mdx"))
+    (base) => import_node_path.default.join(
+      astroDir,
+      base,
+      relativeTargetPath.replace("index.md", "index.mdx").replace("changelog.md", "changelog.mdx").replace("ubiquitous-language.md", "ubiquitous-language.mdx")
+    )
   );
 }
 function removeBasePath(fullPath, basePath) {
@@ -92,6 +97,9 @@ function getBaseTargetPaths(filePath) {
     if (filePathArr[filePathArr.length - 1] == "changelog.md") {
       return [import_node_path.default.join("src", "content", "changelogs")];
     }
+    if (filePathArr[filePathArr.length - 1] == "ubiquitous-language.md") {
+      return [import_node_path.default.join("src", "content", "ubiquitousLanguages")];
+    }
     if (filePathArr[filePathArr.length - 1].match(/\.md$/)) {
       return [import_node_path.default.join("src", "content")];
     }

package/dist/watcher.js

@@ -1,8 +1,8 @@
 import {
   watch
-} from "./chunk-7HYM3M5I.js";
+} from "./chunk-NTCYOR4N.js";
 import "./chunk-E7TXTI7G.js";
-import "./chunk-PK2EQVPD.js";
+import "./chunk-5RNDOKYT.js";
 export {
   watch
 };

package/eventcatalog/src/components/MDX/NodeGraph/Edges/AnimatedMessageEdge.tsx

@@ -10,7 +10,7 @@ const AnimatedMessageEdge = ({
   sourcePosition,
   targetPosition,
   data,
-  label,
+  label = '',
   markerEnd,
 }: any) => {
   const [edgePath, labelX, labelY] = getBezierPath({

package/eventcatalog/src/components/MDX/NodeGraph/NodeGraph.tsx

@@ -252,6 +252,7 @@ const NodeGraphBuilder = ({
     <ReactFlow
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
+      minZoom={0.07}
       nodes={nodes}
       edges={edges}
       fitView

package/eventcatalog/src/components/MDX/SchemaViewer/SchemaViewer.astro

@@ -2,6 +2,7 @@
 const { catalog, id } = Astro.props;
 import fs from 'node:fs/promises';
 import { existsSync } from 'fs';
+import yaml from 'js-yaml';
 import path from 'path';
 import SchemaViewerClient from './SchemaViewer';
 import Admonition from '../Admonition';
@@ -48,7 +49,11 @@ try {
     if (exists) {
       // Load the schema for the component
       schema = await fs.readFile(schemaPath, 'utf-8');
-      schema = JSON.parse(schema);
+      if (schemaPath.endsWith('.yml') || schemaPath.endsWith('.yaml')) {
+        schema = yaml.load(schema);
+      } else {
+        schema = JSON.parse(schema);
+      }
     }
 
     return {

package/eventcatalog/src/components/SideBars/CatalogResourcesSideBar/index.tsx

@@ -4,12 +4,37 @@ import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
 import './styles.css';
 import { getIconForCollection as getIconForCollectionOriginal } from '@utils/collections/icons';
 
-const CatalogResourcesSideBar = ({ resources, currentPath }: any) => {
+const STORAGE_KEY = 'EventCatalog:catalogSidebarCollapsedGroups';
+
+interface CatalogResourcesSideBarProps {
+  resources: any;
+  currentPath: string;
+}
+
+const CatalogResourcesSideBar: React.FC<CatalogResourcesSideBarProps> = ({ resources, currentPath }) => {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
   const [data, setData] = useState(resources);
   const [searchQuery, setSearchQuery] = useState('');
-  const [collapsedGroups, setCollapsedGroups] = useState<{ [key: string]: boolean }>({});
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [collapsedGroups, setCollapsedGroups] = useState<{ [key: string]: boolean }>(() => {
+    if (typeof window !== 'undefined') {
+      const saved = window.localStorage.getItem(STORAGE_KEY);
+      setIsInitialized(true);
+      return saved ? JSON.parse(saved) : {};
+    }
+    return {};
+  });
   const decodedCurrentPath = decodeURIComponent(currentPath);
 
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(collapsedGroups));
+    }
+  }, [collapsedGroups]);
+
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(e.target.value);
   };
@@ -47,6 +72,8 @@ const CatalogResourcesSideBar = ({ resources, currentPath }: any) => {
 
   const getIconForCollection = useMemo(() => getIconForCollectionOriginal, []);
 
+  if (!isInitialized) return null;
+
   return (
     <nav className="space-y-6 text-black ">
       <div className="space-y-2">

package/eventcatalog/src/components/SideBars/DomainSideBar.astro

@@ -3,6 +3,7 @@ import OwnersList from '@components/Lists/OwnersList';
 import PillListFlat from '@components/Lists/PillListFlat';
 import RepositoryList from '@components/Lists/RepositoryList.astro';
 import VersionList from '@components/Lists/VersionList.astro';
+import { getUbiquitousLanguage } from '@utils/collections/domains';
 import { buildUrl } from '@utils/url-builder';
 import { getEntry, type CollectionEntry } from 'astro:content';
 import { ScrollText, Workflow } from 'lucide-react';
@@ -14,6 +15,9 @@ const { domain } = Astro.props;
 
 // @ts-ignore
 const services = (domain.data.services as CollectionEntry<'services'>[]) || [];
+const ubiquitousLanguage = await getUbiquitousLanguage(domain);
+const hasUbiquitousLanguage = ubiquitousLanguage.length > 0;
+const ubiquitousLanguageDictionary = hasUbiquitousLanguage ? ubiquitousLanguage[0].data.dictionary : [];
 
 const ownersRaw = domain.data?.owners || [];
 const owners = await Promise.all(ownersRaw.map((o) => getEntry(o)));
@@ -26,6 +30,13 @@ const serviceList = services.map((p) => ({
   href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
 }));
 
+const ubiquitousLanguageList = ubiquitousLanguageDictionary?.map((l) => ({
+  label: l.name,
+  badge: 'Ubiquitous Language',
+  collection: 'ubiquitousLanguages',
+  href: buildUrl(`/docs/${domain.collection}/${domain.data.id}/language?id=${l.id}`),
+}));
+
 const ownersList = owners.map((o) => ({
   label: o.data.name,
   type: o.collection,
@@ -45,6 +56,17 @@ const ownersList = owners.map((o) => ({
       icon="ServerIcon"
       client:load
     />
+    {
+      ubiquitousLanguageList && hasUbiquitousLanguage && (
+        <PillListFlat
+          title={`Ubiquitous Language Dictionary (${ubiquitousLanguageDictionary?.length})`}
+          pills={ubiquitousLanguageList}
+          color="pink"
+          emptyMessage={`This domain does not have any documented ubiquitous language.`}
+          client:load
+        />
+      )
+    }
     {domain.data.versions && <VersionList versions={domain.data.versions} collectionItem={domain} />}
     {
       domain.data.repository && (
@@ -57,6 +79,7 @@ const ownersList = owners.map((o) => ({
       emptyMessage={`This domain does not have any documented owners.`}
       client:load
     />
+
     <div class="space-y-2">
       <a
         href={buildUrl(`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`)}

package/eventcatalog/src/components/Tables/Table.tsx

@@ -21,7 +21,7 @@ import type { CollectionTypes } from '@types';
 declare module '@tanstack/react-table' {
   // @ts-ignore
   interface ColumnMeta<TData extends RowData, TValue> {
-    filterVariant?: 'collection' | 'name';
+    filterVariant?: 'collection' | 'name' | 'badges';
     collectionFilterKey?: string;
     showFilter?: boolean;
     className?: string;
@@ -211,6 +211,16 @@ function Filter({ column }: { column: Column<any, unknown> }) {
 
       return uniqueItemsInList.sort().slice(0, 2000);
     }
+    if (filterVariant === 'badges') {
+      const allBadges = column.getFacetedUniqueValues().keys();
+      // join all badges into a single array
+      const allBadgesArray = Array.from(allBadges)
+        .flat()
+        .filter((b) => !!b);
+      const allBadgesString = allBadgesArray.map((badge) => badge.content);
+      const uniqueBadges = Array.from(new Set(allBadgesString));
+      return uniqueBadges.sort().slice(0, 2000);
+    }
     return Array.from(column.getFacetedUniqueValues().keys()).sort().slice(0, 2000);
   }, [column.getFacetedUniqueValues(), filterVariant]);
 

package/eventcatalog/src/components/Tables/columns/DomainTableColumns.tsx

@@ -2,8 +2,10 @@ import { ServerIcon } from '@heroicons/react/20/solid';
 import { RectangleGroupIcon } from '@heroicons/react/20/solid';
 import { createColumnHelper } from '@tanstack/react-table';
 import type { CollectionEntry } from 'astro:content';
-import { filterByName, filterCollectionByName } from '../filters/custom-filters';
+import { filterByBadge, filterByName, filterCollectionByName } from '../filters/custom-filters';
 import { buildUrl } from '@utils/url-builder';
+import { Tag } from 'lucide-react';
+import { createBadgesColumn } from './SharedColumns';
 
 const columnHelper = createColumnHelper<CollectionEntry<'domains'>>();
 
@@ -40,14 +42,6 @@ export const columns = () => [
     },
     filterFn: filterByName,
   }),
-  // columnHelper.accessor('data.version', {
-  //   header: () => <span>Version</span>,
-  //   cell: (info) => {
-  //     const service = info.row.original;
-  //     return <div className="text-left font-light">{`v${info.getValue()} ${service.data.latestVersion === service.data.version ? '(latest)': ''}`}</div>
-  //   },
-  //   footer: (info) => info.column.id,
-  // }),
   columnHelper.accessor('data.summary', {
     id: 'summary',
     header: () => 'Summary',
@@ -96,9 +90,9 @@ export const columns = () => [
         </ul>
       );
     },
-    // footer: (info) => info.column.id,
     filterFn: filterCollectionByName('services'),
   }),
+  createBadgesColumn(columnHelper),
   columnHelper.accessor('data.name', {
     header: () => <span />,
     cell: (info) => {

package/eventcatalog/src/components/Tables/columns/FlowTableColumns.tsx

@@ -1,10 +1,9 @@
-import { ServerIcon } from '@heroicons/react/20/solid';
-import { RectangleGroupIcon } from '@heroicons/react/20/solid';
 import { createColumnHelper } from '@tanstack/react-table';
 import type { CollectionEntry } from 'astro:content';
-import { filterByName, filterCollectionByName } from '../filters/custom-filters';
+import { filterByName } from '../filters/custom-filters';
 import { buildUrl } from '@utils/url-builder';
 import { QueueListIcon } from '@heroicons/react/24/solid';
+import { createBadgesColumn } from './SharedColumns';
 
 const columnHelper = createColumnHelper<CollectionEntry<'flows'>>();
 
@@ -61,6 +60,7 @@ export const columns = () => [
       className: 'max-w-md',
     },
   }),
+  createBadgesColumn(columnHelper),
   columnHelper.accessor('data.name', {
     header: () => <span />,
     cell: (info) => {

package/eventcatalog/src/components/Tables/columns/MessageTableColumns.tsx

@@ -3,8 +3,9 @@ import { createColumnHelper } from '@tanstack/react-table';
 import type { CollectionMessageTypes } from '@types';
 import type { CollectionEntry } from 'astro:content';
 import { useMemo } from 'react';
-import { filterByName, filterCollectionByName } from '../filters/custom-filters';
+import { filterByName, filterCollectionByName, filterByBadge } from '../filters/custom-filters';
 import { buildUrl } from '@utils/url-builder';
+import { createBadgesColumn } from './SharedColumns';
 
 const columnHelper = createColumnHelper<CollectionEntry<CollectionMessageTypes>>();
 
@@ -55,6 +56,7 @@ export const columns = () => [
     },
     filterFn: filterByName,
   }),
+
   columnHelper.accessor('data.summary', {
     id: 'summary',
     header: () => 'Summary',
@@ -62,7 +64,7 @@ export const columns = () => [
     footer: (info) => info.column.id,
     meta: {
       showFilter: false,
-      className: 'max-w-md',
+      className: 'max-w-[200px]',
     },
   }),
 
@@ -145,6 +147,7 @@ export const columns = () => [
     footer: (info) => info.column.id,
     filterFn: filterCollectionByName('consumers'),
   }),
+  createBadgesColumn(columnHelper),
   columnHelper.accessor('data.name', {
     header: () => <span />,
     cell: (info) => {