@eventcatalog/core 2.58.1 → 2.59.0

package/eventcatalog/src/components/SideNav/ListViewSideBar/index.tsx

@@ -77,6 +77,11 @@ const ServiceItem = React.memo(
     isVisualizer: boolean;
     searchTerm: string;
   }) => {
+    const readsAndWritesTo = item.writesTo.filter((writeTo) => item.readsFrom.some((readFrom) => readFrom.id === writeTo.id));
+    const resourceReads = item.readsFrom.filter((readFrom) => !readsAndWritesTo.some((writeTo) => writeTo.id === readFrom.id));
+    const resourceWrites = item.writesTo.filter((writeTo) => !readsAndWritesTo.some((readFrom) => readFrom.id === writeTo.id));
+    const hasData = item.writesTo.length > 0 || item.readsFrom.length > 0;
+
     return (
       <CollapsibleGroup
         isCollapsed={collapsedGroups[item.href]}
@@ -115,6 +120,17 @@ const ServiceItem = React.memo(
           >
             <span className="truncate">Overview</span>
           </a>
+          {isVisualizer && hasData && (
+            <a
+              href={buildUrl(`/${item.href}/data`)}
+              data-active={decodedCurrentPath === `${item.href}/data`}
+              className={`flex items-center px-2 py-1.5 text-xs text-gray-600 hover:bg-purple-100 rounded-md ${
+                decodedCurrentPath === `${item.href}/data` ? 'bg-purple-100 ' : 'hover:bg-purple-100'
+              }`}
+            >
+              <span className="truncate">Data Diagram</span>
+            </a>
+          )}
           {!isVisualizer && (
             <a
               href={buildUrlWithParams('/architecture/docs/messages', {
@@ -185,6 +201,84 @@ const ServiceItem = React.memo(
           >
             <MessageList messages={item.sends} decodedCurrentPath={decodedCurrentPath} searchTerm={searchTerm} />
           </CollapsibleGroup>
+          {!isVisualizer && hasData && (
+            <CollapsibleGroup
+              isCollapsed={collapsedGroups[`${item.href}-data`]}
+              onToggle={() => toggleGroupCollapse(`${item.href}-data`)}
+              title={
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    toggleGroupCollapse(`${item.href}-data`);
+                  }}
+                  className="truncate underline ml-2 text-xs mb-1 py-1"
+                >
+                  Data Stores ({readsAndWritesTo.length + resourceWrites.length + resourceReads.length})
+                </button>
+              }
+            >
+              {readsAndWritesTo.length > 0 && (
+                <CollapsibleGroup
+                  className="ml-4"
+                  isCollapsed={collapsedGroups[`${item.href}-writesTo-data`]}
+                  onToggle={() => toggleGroupCollapse(`${item.href}-writesTo-data`)}
+                  title={
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        toggleGroupCollapse(`${item.href}-writesTo-data`);
+                      }}
+                      className="truncate underline ml-2 text-xs mb-1 py-1"
+                    >
+                      Reads and writes to
+                    </button>
+                  }
+                >
+                  <MessageList messages={readsAndWritesTo} decodedCurrentPath={decodedCurrentPath} searchTerm={searchTerm} />
+                </CollapsibleGroup>
+              )}
+              {resourceWrites.length > 0 && (
+                <CollapsibleGroup
+                  className="ml-4"
+                  isCollapsed={collapsedGroups[`${item.href}-writesTo-data`]}
+                  onToggle={() => toggleGroupCollapse(`${item.href}-writesTo-data`)}
+                  title={
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        toggleGroupCollapse(`${item.href}-writesTo-data`);
+                      }}
+                      className="truncate underline ml-2 text-xs mb-1 py-1"
+                    >
+                      Writes to
+                    </button>
+                  }
+                >
+                  <MessageList messages={resourceWrites} decodedCurrentPath={decodedCurrentPath} searchTerm={searchTerm} />
+                </CollapsibleGroup>
+              )}
+              {resourceReads.length > 0 && (
+                <CollapsibleGroup
+                  className="ml-4"
+                  isCollapsed={collapsedGroups[`${item.href}-readsFrom-data`]}
+                  onToggle={() => toggleGroupCollapse(`${item.href}-readsFrom-data`)}
+                  title={
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        toggleGroupCollapse(`${item.href}-readsFrom-data`);
+                      }}
+                      className="truncate underline ml-2 text-xs mb-1 py-1"
+                    >
+                      Reads From
+                    </button>
+                  }
+                >
+                  <MessageList messages={resourceReads} decodedCurrentPath={decodedCurrentPath} searchTerm={searchTerm} />
+                </CollapsibleGroup>
+              )}
+            </CollapsibleGroup>
+          )}
           {!isVisualizer && item.entities.length > 0 && (
             <CollapsibleGroup
               isCollapsed={collapsedGroups[`${item.href}-entities`]}
@@ -513,6 +607,7 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
             >
               <span className="truncate">Overview</span>
             </a>
+
             {isVisualizer && hasEntities && (
               <a
                 href={buildUrl(`/${item.href}/entity-map`)}
@@ -720,73 +815,169 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
 
             {filteredData['messagesNotInService'] && filteredData['messagesNotInService'].length > 0 && (
               <div className="pt-4 pb-2">
-                <ul className="space-y-4">
-                  {filteredData['messagesNotInService'].map((item: any) => (
-                    <li key={item.href} className="space-y-0" data-active={decodedCurrentPath === item.href}>
-                      <a
-                        href={item.href}
-                        data-active={decodedCurrentPath === item.href}
-                        className={`flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md ${
-                          decodedCurrentPath === item.href ? 'bg-purple-100 text-purple-900' : 'hover:bg-purple-100'
-                        }`}
-                      >
-                        <span className="truncate">
-                          <HighlightedText text={item.label} searchTerm={debouncedSearchTerm} />
-                        </span>
-                        <span
-                          className={`ml-2 text-[10px] font-medium px-2 uppercase py-0.5 rounded ${getMessageColorByCollection(item.collection)}`}
+                <CollapsibleGroup
+                  isCollapsed={collapsedGroups['messagesNotInService-group']}
+                  onToggle={() => toggleGroupCollapse('messagesNotInService-group')}
+                  title={
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        toggleGroupCollapse('messagesNotInService-group');
+                      }}
+                      className="flex justify-between items-center pl-2 w-full text-xs"
+                    >
+                      <span className="truncate text-xs font-bold">Orphaned Messages</span>
+                    </button>
+                  }
+                >
+                  <div className="space-y-2 border-gray-200/80 border-l pl-3 ml-[9px] mt-3">
+                    {filteredData['messagesNotInService'].map((item: any) => (
+                      <div key={item.href} data-active={decodedCurrentPath === item.href}>
+                        <a
+                          href={item.href}
+                          data-active={decodedCurrentPath === item.href}
+                          className={`flex items-center justify-between px-2 py-0.5 text-xs font-thin rounded-md ${
+                            decodedCurrentPath === item.href ? 'bg-purple-100 text-purple-900' : 'hover:bg-purple-100'
+                          }`}
                         >
-                          {getMessageCollectionName(item.collection, item)}
-                        </span>
-                      </a>
-                    </li>
-                  ))}
-                </ul>
+                          <span className="truncate">
+                            <HighlightedText text={item.label} searchTerm={debouncedSearchTerm} />
+                          </span>
+                          <span
+                            className={`ml-2 text-[10px] font-medium px-2 uppercase py-0.5 rounded ${getMessageColorByCollection(item.collection)}`}
+                          >
+                            {getMessageCollectionName(item.collection, item)}
+                          </span>
+                        </a>
+                      </div>
+                    ))}
+                  </div>
+                </CollapsibleGroup>
               </div>
             )}
 
-            {filteredData['flows'] && (
+            {/* Flows Group */}
+            {filteredData['flows'] && filteredData['flows'].length > 0 && (
               <div className="pt-4 pb-2">
-                <ul className="space-y-4">
-                  {filteredData['flows'].map((item: any) => (
-                    <li key={item.href} className="space-y-0" data-active={decodedCurrentPath === item.href}>
-                      <a
-                        href={item.href}
-                        data-active={decodedCurrentPath === item.href}
-                        className={`flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md ${
-                          decodedCurrentPath === item.href ? 'bg-cyan-100 text-cyan-900' : 'hover:bg-purple-100'
-                        }`}
-                      >
-                        <span className="truncate">
-                          <HighlightedText text={item.label} searchTerm={debouncedSearchTerm} />
-                        </span>
-                        <span className="text-cyan-600 ml-2 text-[10px] font-medium bg-cyan-50 px-2 py-0.5 rounded">FLOW</span>
-                      </a>
-                    </li>
-                  ))}
-                </ul>
+                <CollapsibleGroup
+                  isCollapsed={collapsedGroups['flows-group']}
+                  onToggle={() => toggleGroupCollapse('flows-group')}
+                  title={
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        toggleGroupCollapse('flows-group');
+                      }}
+                      className="flex justify-between items-center pl-2 w-full text-xs"
+                    >
+                      <span className="truncate text-xs font-bold">Flows</span>
+                    </button>
+                  }
+                >
+                  <div className="space-y-2 border-gray-200/80 border-l pl-3 ml-[9px] mt-3">
+                    {filteredData['flows'].map((item: any) => (
+                      <div key={item.href} data-active={decodedCurrentPath === item.href}>
+                        <a
+                          href={item.href}
+                          data-active={decodedCurrentPath === item.href}
+                          className={`flex items-center justify-between px-2 py-0.5 text-xs font-thin rounded-md ${
+                            decodedCurrentPath === item.href ? 'bg-purple-100 text-purple-900' : 'hover:bg-purple-100'
+                          }`}
+                        >
+                          <span className="truncate">
+                            <HighlightedText text={item.label} searchTerm={debouncedSearchTerm} />
+                          </span>
+                          <span className={`ml-2 text-[10px] font-medium px-2 uppercase py-0.5 rounded bg-teal-50 text-teal-600`}>
+                            FLOW
+                          </span>
+                        </a>
+                      </div>
+                    ))}
+                  </div>
+                </CollapsibleGroup>
               </div>
             )}
-            {filteredData['designs'] && isVisualizer && (
+
+            {/* Data Group */}
+            {filteredData['containers'] && filteredData['containers'].length > 0 && (
               <div className="pt-4 pb-2">
-                <ul className="space-y-4">
-                  {filteredData['designs'].map((item: any) => (
-                    <li key={item.href} className="space-y-0" data-active={decodedCurrentPath === item.href}>
-                      <a
-                        href={item.href}
-                        data-active={decodedCurrentPath === item.href}
-                        className={`flex items-center justify-between px-2 py-0.5 text-xs font-bold rounded-md ${
-                          decodedCurrentPath === item.href ? 'bg-cyan-100 text-cyan-900' : 'hover:bg-purple-100'
-                        }`}
-                      >
-                        <span className="truncate">
-                          <HighlightedText text={item.label} searchTerm={debouncedSearchTerm} />
-                        </span>
-                        <span className="text-cyan-600 ml-2 text-[10px] font-medium bg-cyan-50 px-2 py-0.5 rounded">DESIGN</span>
-                      </a>
-                    </li>
-                  ))}
-                </ul>
+                <CollapsibleGroup
+                  isCollapsed={collapsedGroups['data-group']}
+                  onToggle={() => toggleGroupCollapse('data-group')}
+                  title={
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        toggleGroupCollapse('data-group');
+                      }}
+                      className="flex justify-between items-center pl-2 w-full text-xs"
+                    >
+                      <span className="truncate text-xs font-bold">Data</span>
+                    </button>
+                  }
+                >
+                  <div className="space-y-2 border-gray-200/80 border-l pl-3 ml-[9px] mt-3">
+                    {filteredData['containers'].map((item: any) => (
+                      <div key={item.href} data-active={decodedCurrentPath === item.href}>
+                        <a
+                          href={item.href}
+                          data-active={decodedCurrentPath === item.href}
+                          className={`flex items-center justify-between px-2 py-0.5 text-xs font-thin rounded-md ${
+                            decodedCurrentPath === item.href ? 'bg-purple-100 text-purple-900' : 'hover:bg-purple-100'
+                          }`}
+                        >
+                          <span className="truncate">
+                            <HighlightedText text={item.label} searchTerm={debouncedSearchTerm} />
+                          </span>
+                          <span className={`ml-2 text-[10px] font-medium px-2 uppercase py-0.5 rounded bg-blue-50 text-blue-600`}>
+                            DATA
+                          </span>
+                        </a>
+                      </div>
+                    ))}
+                  </div>
+                </CollapsibleGroup>
+              </div>
+            )}
+
+            {filteredData['designs'] && filteredData['designs'].length > 0 && (
+              <div className="pt-4 pb-2">
+                <CollapsibleGroup
+                  isCollapsed={collapsedGroups['designs-group']}
+                  onToggle={() => toggleGroupCollapse('designs-group')}
+                  title={
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        toggleGroupCollapse('designs-group');
+                      }}
+                      className="flex justify-between items-center pl-2 w-full text-xs"
+                    >
+                      <span className="truncate text-xs font-bold">Designs</span>
+                    </button>
+                  }
+                >
+                  <div className="space-y-2 border-gray-200/80 border-l pl-3 ml-[9px] mt-3">
+                    {filteredData['designs'].map((item: any) => (
+                      <div key={item.href} data-active={decodedCurrentPath === item.href}>
+                        <a
+                          href={item.href}
+                          data-active={decodedCurrentPath === item.href}
+                          className={`flex items-center justify-between px-2 py-0.5 text-xs font-thin rounded-md ${
+                            decodedCurrentPath === item.href ? 'bg-purple-100 text-purple-900' : 'hover:bg-purple-100'
+                          }`}
+                        >
+                          <span className="truncate">
+                            <HighlightedText text={item.label} searchTerm={debouncedSearchTerm} />
+                          </span>
+                          <span className={`ml-2 text-[10px] font-medium px-2 uppercase py-0.5 rounded bg-teal-50 text-teal-600`}>
+                            DESIGN
+                          </span>
+                        </a>
+                      </div>
+                    ))}
+                  </div>
+                </CollapsibleGroup>
               </div>
             )}
           </>

package/eventcatalog/src/components/SideNav/ListViewSideBar/types.ts

@@ -33,6 +33,8 @@ export interface ServiceItem {
   sends: MessageItem[];
   receives: MessageItem[];
   entities: EntityItem[];
+  writesTo: MessageItem[];
+  readsFrom: MessageItem[];
   specifications?: {
     type: string;
     path: string;
@@ -79,6 +81,7 @@ export interface Resources {
   commands?: MessageItem[];
   queries?: MessageItem[];
   events?: MessageItem[];
+  containers?: MessageItem[];
 }
 
 export interface ListViewSideBarProps {

package/eventcatalog/src/components/SideNav/ListViewSideBar/utils.ts

@@ -8,6 +8,7 @@ import { getCommands } from '@utils/commands';
 import { getEvents } from '@utils/events';
 import { getQueries } from '@utils/queries';
 import { getDesigns } from '@utils/collections/designs';
+import { getContainers } from '@utils/collections/containers';
 
 const stripCollection = (collection: any) => {
   return collection.map((item: any) => ({
@@ -26,6 +27,7 @@ export async function getResourcesForNavigation({ currentPath }: { currentPath:
   const domains = await getDomains({ getAllVersions: false });
   const channels = await getChannels({ getAllVersions: false });
   const flows = await getFlows({ getAllVersions: false });
+  const containers = await getContainers({ getAllVersions: false });
   const designs = await getDesigns({ getAllVersions: false });
 
   const messages = [...events, ...commands, ...queries];
@@ -43,7 +45,7 @@ export async function getResourcesForNavigation({ currentPath }: { currentPath:
   const route = currentPath.includes('visualiser') ? 'visualiser' : 'docs';
 
   // Just the domains for now.
-  const allDataAsSideNav = [...domains, ...services, ...flows, ...channels].reduce((acc, item) => {
+  const allDataAsSideNav = [...domains, ...services, ...flows, ...channels, ...containers].reduce((acc, item) => {
     const title = item.collection;
     const group = acc[title] || [];
 
@@ -54,6 +56,10 @@ export async function getResourcesForNavigation({ currentPath }: { currentPath:
     const sends = isCollectionService ? item.data.sends || null : null;
     const receives = isCollectionService ? item.data.receives || null : null;
     const entities = isCollectionDomain || isCollectionService ? item.data.entities || null : null;
+
+    const writesTo = isCollectionService ? item.data.writesTo || null : null;
+    const readsFrom = isCollectionService ? item.data.readsFrom || null : null;
+
     // Add href to the sends and receives
     const sendsWithHref = sends?.map((send: any) => ({
       id: send.data.id,
@@ -89,6 +95,32 @@ export async function getResourcesForNavigation({ currentPath }: { currentPath:
       href: buildUrl(`/${route}/${entity.collection}/${entity.data.id}/${entity.data.version}`),
     }));
 
+    const writesToWithHref = writesTo?.map((writeTo: any) => ({
+      id: writeTo.data.id,
+      data: {
+        name: writeTo.data.name,
+        sidebar: {
+          badge: writeTo.data.container_type || writeTo.collection,
+          backgroundColor: 'bg-blue-100 text-blue-600',
+        },
+      },
+      collection: writeTo.collection,
+      href: buildUrl(`/${route}/${writeTo.collection}/${writeTo.data.id}/${writeTo.data.version}`),
+    }));
+
+    const readsFromWithHref = readsFrom?.map((readFrom: any) => ({
+      id: readFrom.data.id,
+      data: {
+        name: readFrom.data.name,
+        sidebar: {
+          badge: readFrom.data.container_type || readFrom.collection,
+          backgroundColor: 'bg-blue-100 text-indigo-600',
+        },
+      },
+      collection: readFrom.collection,
+      href: buildUrl(`/${route}/${readFrom.collection}/${readFrom.data.id}/${readFrom.data.version}`),
+    }));
+
     // don't render items if we are in the visualiser and the item has visualiser set to false
     if (currentPath.includes('visualiser') && item.data.visualiser === false) {
       return acc;
@@ -115,6 +147,8 @@ export async function getResourcesForNavigation({ currentPath }: { currentPath:
       receives: receivesWithHref,
       entities: entitiesWithHref,
       specifications: isCollectionService ? getSpecificationsForService(item) : null,
+      writesTo: writesToWithHref,
+      readsFrom: readsFromWithHref,
       sidebar: item.data?.sidebar,
       renderInVisualiser: item.data?.visualiser ?? true,
     };

package/eventcatalog/src/components/SideNav/TreeView/getTreeView.ts

@@ -18,7 +18,7 @@ export type TreeNode = {
 /**
  * Resource types that should be in the sidenav
  */
-const RESOURCE_TYPES = ['domains', 'entities', 'services', 'events', 'commands', 'queries', 'flows', 'channels'];
+const RESOURCE_TYPES = ['domains', 'entities', 'services', 'events', 'commands', 'queries', 'flows', 'channels', 'containers'];
 // const RESOURCE_TYPES = ['domains', 'services', 'events', 'commands', 'queries', 'flows', 'channels'];
 
 /**
@@ -125,7 +125,7 @@ function groupChildrenByType(parentNode: TreeNode) {
     .map(([type, nodes]) => {
       return {
         id: `${parentNode.id}/${type}`,
-        name: type,
+        name: type === 'containers' ? 'Data' : type,
         type: type as CollectionKey,
         version: '0',
         children: nodes,

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

@@ -31,14 +31,16 @@ declare module '@tanstack/react-table' {
       | 'ownedQueries'
       | 'ownedEvents'
       | 'ownedServices'
-      | 'associatedTeams';
+      | 'associatedTeams'
+      | 'servicesThatWriteToContainer'
+      | 'servicesThatReadFromContainer';
     filteredItemHasVersion?: boolean;
     showFilter?: boolean;
     className?: string;
   }
 }
 
-export type TCollectionTypes = 'domains' | 'services' | CollectionMessageTypes | 'flows' | 'users' | 'teams';
+export type TCollectionTypes = 'domains' | 'services' | CollectionMessageTypes | 'flows' | 'users' | 'teams' | 'containers';
 
 export type TData<T extends TCollectionTypes> = {
   collection: T;
@@ -103,6 +105,24 @@ export type TData<T extends TCollectionTypes> = {
         version: string;
       };
     }>;
+    // Only for containers
+    servicesThatWriteToContainer?: Array<{
+      collection: string; // Specify only 'services'?
+      data: {
+        id: string;
+        name: string;
+        version: string;
+      };
+    }>;
+    // Only for containers
+    servicesThatReadFromContainer?: Array<{
+      collection: string; // Specify only 'services'?
+      data: {
+        id: string;
+        name: string;
+        version: string;
+      };
+    }>;
     // ---------------------------------------------------------------------------
     // Users
     avatarUrl?: string;

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

@@ -0,0 +1,152 @@
+import { createColumnHelper } from '@tanstack/react-table';
+import { filterByName } from '../filters/custom-filters';
+import { buildUrl } from '@utils/url-builder';
+import { ServerIcon } from '@heroicons/react/24/solid';
+import { DatabaseIcon } from 'lucide-react';
+import { createBadgesColumn } from './SharedColumns';
+import type { TData } from '../Table';
+import { filterCollectionByName } from '../filters/custom-filters';
+
+const columnHelper = createColumnHelper<TData<'containers'>>();
+
+export const columns = () => [
+  columnHelper.accessor('data.name', {
+    id: 'name',
+    header: () => <span>Storage</span>,
+    cell: (info) => {
+      const containerRaw = info.row.original;
+      const color = 'blue';
+      return (
+        <div className=" group ">
+          <a
+            href={buildUrl(`/docs/${containerRaw.collection}/${containerRaw.data.id}/${containerRaw.data.version}`)}
+            className={`group-hover:text-${color}-500 flex space-x-1 items-center`}
+          >
+            <div className={`flex items-center border border-gray-300 shadow-sm rounded-md group-hover:border-${color}-400`}>
+              <span className="flex items-center">
+                <span className={`bg-${color}-500 group-hover:bg-${color}-600 h-full rounded-tl rounded-bl p-1`}>
+                  <DatabaseIcon className="h-4 w-4 text-white" />
+                </span>
+                <span className="leading-none px-2 group-hover:underline group-hover:text-primary font-light">
+                  {containerRaw.data.name} (v{containerRaw.data.version})
+                </span>
+              </span>
+            </div>
+          </a>
+        </div>
+      );
+    },
+    footer: (info) => info.column.id,
+    meta: {
+      filterVariant: 'name',
+    },
+    filterFn: filterByName,
+  }),
+  columnHelper.accessor('data.summary', {
+    id: 'summary',
+    header: () => 'Summary',
+    cell: (info) => <span className="font-light ">{info.renderValue()}</span>,
+    footer: (info) => info.column.id,
+    meta: {
+      showFilter: false,
+      className: 'max-w-md',
+    },
+  }),
+  columnHelper.accessor('data.servicesThatWriteToContainer', {
+    header: () => <span>Writes</span>,
+    meta: {
+      filterVariant: 'collection',
+      collectionFilterKey: 'servicesThatWriteToContainer',
+    },
+    cell: (info) => {
+      const services = info.getValue();
+      if (services?.length === 0 || !services)
+        return <div className="font-light text-sm text-gray-400/60 text-left italic">No services documented</div>;
+      return (
+        <ul className="">
+          {services.map((service, index) => {
+            return (
+              <li className="py-2 group flex items-center space-x-2" key={`${service.data.id}-${index}`}>
+                <a
+                  href={buildUrl(`/docs/${service.collection}/${service.data.id}/${service.data.version}`)}
+                  className="group-hover:text-primary flex space-x-1 items-center "
+                >
+                  <div className="flex items-center border border-gray-300 shadow-sm rounded-md">
+                    <span className="flex items-center">
+                      <span className="bg-pink-500 h-full rounded-tl rounded-bl p-1">
+                        <ServerIcon className="h-4 w-4 text-white" />
+                      </span>
+                      <span className="font-light leading-none px-2 group-hover:underline">
+                        {service.data.name} (v{service.data.version})
+                      </span>
+                    </span>{' '}
+                  </div>
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      );
+    },
+    footer: (info) => info.column.id,
+    filterFn: filterCollectionByName('servicesThatWriteToContainer'),
+  }),
+  columnHelper.accessor('data.servicesThatReadFromContainer', {
+    header: () => <span>Reads</span>,
+    meta: {
+      filterVariant: 'collection',
+      collectionFilterKey: 'servicesThatReadFromContainer',
+    },
+    cell: (info) => {
+      const services = info.getValue();
+      if (services?.length === 0 || !services)
+        return <div className="font-light text-sm text-gray-400/60 text-left italic">No services documented</div>;
+      return (
+        <ul className="">
+          {services.map((service, index) => {
+            return (
+              <li className="py-2 group flex items-center space-x-2" key={`${service.data.id}-${index}`}>
+                <a
+                  href={buildUrl(`/docs/${service.collection}/${service.data.id}/${service.data.version}`)}
+                  className="group-hover:text-primary flex space-x-1 items-center "
+                >
+                  <div className="flex items-center border border-gray-300 shadow-sm rounded-md">
+                    <span className="flex items-center">
+                      <span className="bg-pink-500 h-full rounded-tl rounded-bl p-1">
+                        <ServerIcon className="h-4 w-4 text-white" />
+                      </span>
+                      <span className="font-light leading-none px-2 group-hover:underline">
+                        {service.data.name} (v{service.data.version})
+                      </span>
+                    </span>{' '}
+                  </div>
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      );
+    },
+    footer: (info) => info.column.id,
+    filterFn: filterCollectionByName('servicesThatReadFromContainer'),
+  }),
+  createBadgesColumn(columnHelper),
+  columnHelper.accessor('data.name', {
+    header: () => <span />,
+    cell: (info) => {
+      const container = info.row.original;
+      return (
+        <a
+          className="hover:text-primary hover:underline px-4 font-light"
+          href={buildUrl(`/visualiser/${container.collection}/${container.data.id}/${container.data.version}`)}
+        >
+          Visualiser &rarr;
+        </a>
+      );
+    },
+    id: 'actions',
+    meta: {
+      showFilter: false,
+    },
+  }),
+];