@eventcatalog/core 3.7.2 → 3.8.0

package/eventcatalog/src/pages/discover/[type]/index.astro

@@ -1,5 +1,5 @@
 ---
-import { QueueListIcon, RectangleGroupIcon, BoltIcon, ChatBubbleLeftIcon } from '@heroicons/react/24/outline';
+import { QueueListIcon, RectangleGroupIcon, BoltIcon, ChatBubbleLeftIcon, CubeIcon } from '@heroicons/react/24/outline';
 import ServerIcon from '@heroicons/react/24/outline/ServerIcon';
 import { MagnifyingGlassIcon } from '@heroicons/react/20/solid';
 import { DatabaseIcon } from 'lucide-react';
@@ -10,8 +10,10 @@ import { getEvents } from '@utils/collections/events';
 import { getServices } from '@utils/collections/services';
 import { getQueries } from '@utils/collections/queries';
 import { getContainers } from '@utils/collections/containers';
+import { getDataProducts } from '@utils/collections/data-products';
 import { getUsers } from '@utils/collections/users';
 import { getTeams } from '@utils/collections/teams';
+import { getChannels } from '@utils/collections/channels';
 import { buildUrl } from '@utils/url-builder';
 import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 import { DiscoverTable, type DiscoverTableData, type CollectionType } from '@components/Tables/Discover';
@@ -31,6 +33,8 @@ const services = await getServices();
 const domains = await getDomains({ getAllVersions: false });
 const flows = await getFlows();
 const containers = await getContainers();
+const dataProducts = await getDataProducts();
+const channels = await getChannels();
 const users = await getUsers();
 const teams = await getTeams();
 
@@ -108,6 +112,15 @@ const typeConfig: Record<
       { id: 'isDeprecated', label: 'Is Deprecated' },
     ],
   },
+  'data-products': {
+    label: 'Data Products',
+    propertyOptions: [
+      { id: 'hasOwners', label: 'Has Owners' },
+      { id: 'hasInputs', label: 'Has Inputs' },
+      { id: 'hasOutputs', label: 'Has Outputs' },
+      { id: 'isDeprecated', label: 'Is Deprecated' },
+    ],
+  },
 };
 
 const currentTypeConfig = typeConfig[type] || typeConfig.events;
@@ -143,6 +156,15 @@ const tabs = [
     enabled: containers.length > 0,
     visible: containers.length > 0,
   },
+  {
+    label: `Data Products (${dataProducts.length})`,
+    href: buildUrl('/discover/data-products'),
+    isActive: type === 'data-products',
+    icon: CubeIcon,
+    activeColor: 'cyan',
+    enabled: dataProducts.length > 0,
+    visible: dataProducts.length > 0,
+  },
   {
     label: `Events (${events.length})`,
     href: buildUrl('/discover/events'),
@@ -222,6 +244,35 @@ function hasSpecifications(service: any): boolean {
   return !!(specs.openapiPath || specs.asyncapiPath || specs.graphqlPath);
 }
 
+// Build lookup maps for all collections (for resolving data product inputs/outputs)
+const allCollections = [
+  ...services.map((s) => ({ ...s, collection: 'services' })),
+  ...containers.map((c) => ({ ...c, collection: 'containers' })),
+  ...channels.map((c) => ({ ...c, collection: 'channels' })),
+  ...events.map((e) => ({ ...e, collection: 'events' })),
+  ...commands.map((c) => ({ ...c, collection: 'commands' })),
+  ...queries.map((q) => ({ ...q, collection: 'queries' })),
+  ...dataProducts.map((dp) => ({ ...dp, collection: 'data-products' })),
+];
+
+// Create a map for quick lookup by id
+const collectionItemMap = new Map(allCollections.map((item) => [item.data.id, item]));
+
+// Helper to resolve a pointer to a collection item
+function resolvePointer(pointer: { id: string; version?: string }) {
+  if (!pointer?.id) return null;
+  const item = collectionItemMap.get(pointer.id);
+  if (!item) return null;
+  return {
+    collection: item.collection,
+    data: {
+      id: item.data.id,
+      name: item.data.name,
+      version: item.data.version,
+    },
+  };
+}
+
 // Build a Set of subdomain IDs (domains that are nested within other domains)
 const allSubdomainIds = new Set(
   domains.flatMap((d: any) => (d.data?.domains || []).map((sd: any) => sd.data?.id || sd.id)).filter(Boolean)
@@ -256,6 +307,9 @@ const tableData = enrichedData.map((d: any) => ({
   hasSpecifications: type === 'services' ? hasSpecifications(d) : false,
   hasRepository: type === 'services' ? !!d.data?.repository?.url : false,
   hasDataDependencies: type === 'services' ? (d.data?.writesTo || []).length > 0 || (d.data?.readsFrom || []).length > 0 : false,
+  // Data-product-specific properties
+  hasInputs: type === 'data-products' ? (d.data?.inputs || []).length > 0 : false,
+  hasOutputs: type === 'data-products' ? (d.data?.outputs || []).length > 0 : false,
   isDeprecated: d.data?.deprecated === true || (typeof d.data?.deprecated === 'object' && d.data?.deprecated !== null),
   data: {
     id: d.data.id,
@@ -272,6 +326,8 @@ const tableData = enrichedData.map((d: any) => ({
     services: d.data?.services?.map(mapToItem) ?? [],
     servicesThatWriteToContainer: d.data?.servicesThatWriteToContainer?.map(mapToItem) ?? [],
     servicesThatReadFromContainer: d.data?.servicesThatReadFromContainer?.map(mapToItem) ?? [],
+    inputs: d.data?.inputs?.map(resolvePointer).filter(Boolean) ?? [],
+    outputs: d.data?.outputs?.map(resolvePointer).filter(Boolean) ?? [],
   },
 }));
 

package/eventcatalog/src/pages/docs/[type]/[id]/[version]/_index.data.ts

@@ -22,6 +22,7 @@ export class Page extends HybridPage {
       'channels',
       'entities',
       'containers',
+      'data-products',
     ];
     const allItems = await Promise.all(itemTypes.map((type) => pageDataLoader[type]()));
 

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

@@ -28,7 +28,7 @@ import {
   ClockIcon,
 } from '@heroicons/react/24/outline';
 import { ArrowsRightLeftIcon } from '@heroicons/react/20/solid';
-import { Box, Boxes, SquarePenIcon, DatabaseIcon, DatabaseZapIcon, ShieldCheckIcon, AlignLeft } from 'lucide-react';
+import { Box, Boxes, SquarePenIcon, DatabaseIcon, DatabaseZapIcon, ShieldCheckIcon, AlignLeft, Package } from 'lucide-react';
 
 import { getSpecificationsForService } from '@utils/collections/services';
 import { resourceToCollectionMap, collectionToResourceMap, getDeprecatedDetails } from '@utils/collections/util';
@@ -160,6 +160,10 @@ const getBadge = () => {
     return entityBadges;
   }
 
+  if (props.collection === 'data-products') {
+    return [{ backgroundColor: 'indigo', textColor: 'indigo', content: 'Data Product', icon: Package }];
+  }
+
   return [{ backgroundColor: 'teal', textColor: 'teal', content: '', icon: QueueListIcon, class: 'text-gray' }];
 };
 

package/eventcatalog/src/pages/schemas/[type]/[id]/[version]/_index.data.ts

@@ -28,8 +28,8 @@ export class Page extends HybridPage {
     // We only care about any item that has data.schemaPath
     const itemsWithSchema = allItems.flatMap((items) => items.filter((item) => item.data.schemaPath));
 
-    // return allItems.flatMap((items, index) =>
-    return itemsWithSchema.map((item, index) => ({
+    // Generate paths for messages with schemas
+    const messagePaths = itemsWithSchema.map((item) => ({
       params: {
         type: item.collection,
         id: item.data.id,
@@ -42,7 +42,31 @@ export class Page extends HybridPage {
         body: undefined,
       },
     }));
-    // );
+
+    // Generate paths for data products with contracts
+    const dataProducts = await pageDataLoader['data-products']();
+    const dataProductPaths = dataProducts.flatMap((dataProduct) => {
+      const outputs = (dataProduct.data as any).outputs || [];
+      const outputsWithContracts = outputs.filter((output: any) => output.contract);
+
+      return outputsWithContracts.map((output: any) => ({
+        params: {
+          type: 'data-products',
+          id: dataProduct.data.id,
+          version: dataProduct.data.version,
+        },
+        props: {
+          type: 'data-products',
+          ...dataProduct,
+          contractPath: output.contract.path,
+          contractName: output.contract.name,
+          contractType: output.contract.type,
+          body: undefined,
+        },
+      }));
+    });
+
+    return [...messagePaths, ...dataProductPaths];
   }
 
   protected static async fetchData(params: any) {

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

@@ -6,8 +6,8 @@ import SchemaPageViewer from '@components/SchemaExplorer/SchemaPageViewer';
 import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
 import { sortVersioned } from '@utils/collections/util';
 import { isEventCatalogScaleEnabled } from '@utils/feature';
-import fs from 'fs';
-import path from 'path';
+import { resourceFileExists, readResourceFile } from '@utils/resource-files';
+import path from 'node:path';
 import type { SchemaItem } from '@components/SchemaExplorer/types';
 
 export const prerender = Page.prerender;
@@ -16,27 +16,76 @@ export const getStaticPaths = Page.getStaticPaths;
 // Get data
 const props = await Page.getData(Astro);
 const { type, data } = props as { type: PageTypes; data: any };
-const pageTitle = `${type} | ${data.name}`.replace(/^\w/, (c) => c.toUpperCase());
 
-const allItems = await pageDataLoader[type]();
-const versions = allItems.filter((item) => item.data.id === data.id);
+// Check if this is a data product with a contract
+const isDataProduct = type === 'data-products';
+// Try query param first (SSR mode), then fall back to props (static mode)
+const contractPath = Astro.url.searchParams.get('contract') || (props as any).contractPath;
+
+let currentMessage: SchemaItem | null = null;
+let sortedVersions: SchemaItem[] = [];
+let pageTitle = `${type} | ${data.name}`.replace(/^\w/, (c) => c.toUpperCase());
+
+if (isDataProduct && contractPath) {
+  // Handle data product contracts
+  const allDataProducts = await pageDataLoader['data-products']();
+  const dataProductVersions = allDataProducts.filter((item) => item.data.id === data.id);
+
+  // Find contracts across all versions
+  const contractVersions = dataProductVersions
+    .map((dataProduct) => {
+      const outputs = (dataProduct.data as any).outputs || [];
+      const matchingOutput = outputs.find((output: any) => output.contract?.path === contractPath);
+
+      if (!matchingOutput) return null;
+
+      if (!resourceFileExists(dataProduct, contractPath)) return null;
 
-// Transform to SchemaItems
-const availableVersions = await Promise.all(
-  versions
-    .filter((message) => message.data.schemaPath)
-    .filter((message) => fs.existsSync(path.join(path.dirname(message.filePath ?? ''), message.data.schemaPath ?? '')))
-    .map(async (message) => {
       try {
-        const schemaPath = message.data.schemaPath;
-        const fullSchemaPath = path.join(path.dirname(message.filePath ?? ''), schemaPath ?? '');
+        const schemaContent = readResourceFile(dataProduct, contractPath) ?? '';
+        const schemaExtension = path.extname(contractPath).slice(1);
 
-        let schemaContent = '';
-        if (fs.existsSync(fullSchemaPath)) {
-          schemaContent = fs.readFileSync(fullSchemaPath, 'utf-8');
-        }
+        return {
+          collection: 'data-products',
+          data: {
+            id: dataProduct.data.id,
+            name: matchingOutput.contract.name,
+            version: dataProduct.data.version,
+            summary: `Data contract for ${dataProduct.data.name}`,
+            schemaPath: contractPath,
+          },
+          schemaContent,
+          schemaExtension,
+          contractType: matchingOutput.contract.type,
+          dataProductId: dataProduct.data.id,
+          dataProductVersion: dataProduct.data.version,
+        } as SchemaItem;
+      } catch (error) {
+        console.error(`Error reading contract for ${dataProduct.data.id}:`, error);
+        return null;
+      }
+    })
+    .filter((v): v is SchemaItem => v !== null);
 
-        const schemaExtension = path.extname(schemaPath ?? '').slice(1);
+  sortedVersions = sortVersioned(contractVersions, (item) => item.data.version);
+  currentMessage = sortedVersions.find((v) => v.data.version === data.version) ?? null;
+
+  if (currentMessage) {
+    pageTitle = `Data Contract | ${currentMessage.data.name}`;
+  }
+} else {
+  // Handle regular messages (events, commands, queries)
+  const allItems = await pageDataLoader[type]();
+  const versions = allItems.filter((item) => item.data.id === data.id);
+
+  // Transform to SchemaItems
+  const availableVersions = versions
+    .filter((message) => message.data.schemaPath && resourceFileExists(message, message.data.schemaPath))
+    .map((message) => {
+      try {
+        const schemaPath = message.data.schemaPath ?? '';
+        const schemaContent = readResourceFile(message, schemaPath) ?? '';
+        const schemaExtension = path.extname(schemaPath).slice(1);
 
         return {
           collection: message.collection,
@@ -59,14 +108,12 @@ const availableVersions = await Promise.all(
         return null;
       }
     })
-);
-
-const validVersions = availableVersions.filter((v): v is SchemaItem => v !== null);
+    .filter((v): v is SchemaItem => v !== null);
 
-// Sort versions descending (newest first)
-const sortedVersions = sortVersioned(validVersions, (item) => item.data.version);
+  sortedVersions = sortVersioned(availableVersions, (item) => item.data.version);
+  currentMessage = sortedVersions.find((v) => v.data.version === data.version) ?? null;
+}
 
-const currentMessage = sortedVersions.find((v) => v.data.version === data.version);
 const apiAccessEnabled = isEventCatalogScaleEnabled();
 ---
 
@@ -83,7 +130,9 @@ const apiAccessEnabled = isEventCatalogScaleEnabled();
           showProducersConsumers={false}
         />
       ) : (
-        <div class="p-8 flex items-center justify-center h-full text-gray-500">Schema not found or could not be loaded.</div>
+        <div class="p-8 flex items-center justify-center h-full text-[rgb(var(--ec-page-text-muted))]">
+          Schema not found or could not be loaded.
+        </div>
       )
     }
   </div>

package/eventcatalog/src/pages/schemas/explorer/_index.data.ts

@@ -5,6 +5,7 @@ import { getCommands } from '@utils/collections/commands';
 import { getQueries } from '@utils/collections/queries';
 import { getServices, getSpecificationsForService } from '@utils/collections/services';
 import { getDomains, getSpecificationsForDomain } from '@utils/collections/domains';
+import { getDataProducts } from '@utils/collections/data-products';
 import { getOwner } from '@utils/collections/owners';
 import { buildUrl } from '@utils/url-builder';
 import { resourceFileExists, readResourceFile } from '@utils/resource-files';
@@ -185,7 +186,60 @@ async function fetchAllSchemas() {
   // Flatten and filter out null values for domains
   const flatDomainsWithSpecs = domainsWithSpecs.flat().filter((domain) => domain !== null);
 
-  return [...messagesWithSchemas, ...flatServicesWithSpecs, ...flatDomainsWithSpecs];
+  // Fetch all data products and extract contracts from outputs
+  const dataProducts = await getDataProducts({ getAllVersions: true });
+
+  // Filter data products with contracts in outputs and read contract content
+  const dataProductsWithContracts = await Promise.all(
+    dataProducts.map(async (dataProduct) => {
+      try {
+        const outputs = dataProduct.data.outputs || [];
+        const outputsWithContracts = outputs.filter((output) => output.contract);
+
+        if (outputsWithContracts.length === 0) {
+          return null;
+        }
+
+        return await Promise.all(
+          outputsWithContracts.map(async (output) => {
+            const contract = output.contract!;
+            if (!resourceFileExists(dataProduct, contract.path)) {
+              return null;
+            }
+
+            const schemaContent = readResourceFile(dataProduct, contract.path) ?? '';
+            const schemaExtension = path.extname(contract.path).slice(1) || 'json';
+            const enrichedOwners = await enrichOwners(dataProduct.data.owners || []);
+
+            return {
+              collection: 'data-products',
+              data: {
+                id: `${dataProduct.data.id}__${contract.path}`,
+                name: contract.name,
+                version: dataProduct.data.version,
+                summary: `Data contract for ${dataProduct.data.name}`,
+                schemaPath: contract.path,
+                owners: enrichedOwners,
+              },
+              schemaContent,
+              schemaExtension,
+              contractType: contract.type,
+              dataProductId: dataProduct.data.id,
+              dataProductVersion: dataProduct.data.version,
+            };
+          })
+        );
+      } catch (error) {
+        console.error(`Error reading contracts for data product ${dataProduct.data.id}:`, error);
+        return null;
+      }
+    })
+  );
+
+  // Flatten and filter out null values for data product contracts
+  const flatDataProductContracts = dataProductsWithContracts.flat().filter((contract) => contract !== null);
+
+  return [...messagesWithSchemas, ...flatServicesWithSpecs, ...flatDomainsWithSpecs, ...flatDataProductContracts];
 }
 
 export class Page extends HybridPage {

package/eventcatalog/src/pages/visualiser/[type]/[id]/[version]/_index.data.ts

@@ -20,7 +20,16 @@ export class Page extends HybridPage {
       flows: getFlows,
     };
 
-    const itemTypes: PageTypesWithFlows[] = ['events', 'commands', 'queries', 'services', 'domains', 'flows', 'containers'];
+    const itemTypes: PageTypesWithFlows[] = [
+      'events',
+      'commands',
+      'queries',
+      'services',
+      'domains',
+      'flows',
+      'containers',
+      'data-products',
+    ];
     const allItems = await Promise.all(itemTypes.map((type) => loaders[type]()));
 
     return allItems.flatMap((items, index) =>

package/eventcatalog/src/stores/sidebar-store/builders/container.ts

@@ -18,11 +18,22 @@ export const buildContainerNode = (
 ): NavNode => {
   const servicesWritingToContainer = container.data.servicesThatWriteToContainer || [];
   const servicesReadingFromContainer = container.data.servicesThatReadFromContainer || [];
+  const dataProductsWritingToContainer = (container.data as any).dataProductsThatWriteToContainer || [];
+  const dataProductsReadingFromContainer = (container.data as any).dataProductsThatReadFromContainer || [];
 
-  const renderServicesWritingToContainer =
-    servicesWritingToContainer.length > 0 && shouldRenderSideBarSection(container, 'services');
-  const renderServicesReadingFromContainer =
-    servicesReadingFromContainer.length > 0 && shouldRenderSideBarSection(container, 'services');
+  // Combine writes: services + data products
+  const allWrites = [
+    ...servicesWritingToContainer.map((s: any) => `service:${s.data.id}:${s.data.version}`),
+    ...dataProductsWritingToContainer.map((dp: any) => `data-product:${dp.data.id}:${dp.data.version}`),
+  ];
+  const renderWrites = allWrites.length > 0 && shouldRenderSideBarSection(container, 'services');
+
+  // Combine reads: services + data products
+  const allReads = [
+    ...servicesReadingFromContainer.map((s: any) => `service:${s.data.id}:${s.data.version}`),
+    ...dataProductsReadingFromContainer.map((dp: any) => `data-product:${dp.data.id}:${dp.data.version}`),
+  ];
+  const renderReads = allReads.length > 0 && shouldRenderSideBarSection(container, 'services');
 
   const renderVisualiser = isVisualiserEnabled();
 
@@ -67,21 +78,17 @@ export const buildContainerNode = (
         icon: 'FileImage',
         pages: diagramNavItems,
       },
-      renderServicesWritingToContainer && {
+      renderWrites && {
         type: 'group',
-        title: 'Services (Writes)',
-        icon: 'Server',
-        pages: servicesWritingToContainer.map(
-          (service) => `service:${(service as any).data.id}:${(service as any).data.version}`
-        ),
+        title: 'Writes',
+        icon: 'ArrowUpFromLine',
+        pages: allWrites,
       },
-      renderServicesReadingFromContainer && {
+      renderReads && {
         type: 'group',
-        title: 'Services (Reads)',
-        icon: 'Server',
-        pages: servicesReadingFromContainer.map(
-          (service) => `service:${(service as any).data.id}:${(service as any).data.version}`
-        ),
+        title: 'Reads',
+        icon: 'ArrowDownToLine',
+        pages: allReads,
       },
       renderOwners && buildOwnersSection(owners),
       renderRepository && buildRepositorySection(container.data.repository as { url: string; language: string }),

package/eventcatalog/src/stores/sidebar-store/builders/data-product.ts

@@ -0,0 +1,130 @@
+import type { CollectionEntry } from 'astro:content';
+import { buildUrl } from '@utils/url-builder';
+import type { NavNode, ChildRef } from './shared';
+import { buildQuickReferenceSection, buildOwnersSection, shouldRenderSideBarSection } from './shared';
+import { isVisualiserEnabled } from '@utils/feature';
+import { getItemsFromCollectionByIdAndSemverOrLatest, sortVersioned } from '@utils/collections/util';
+import { getSchemaFormatFromURL } from '@utils/collections/schemas';
+
+interface DataProductContext {
+  events: CollectionEntry<'events'>[];
+  commands: CollectionEntry<'commands'>[];
+  queries: CollectionEntry<'queries'>[];
+  services: CollectionEntry<'services'>[];
+  containers: CollectionEntry<'containers'>[];
+  channels: CollectionEntry<'channels'>[];
+}
+
+// Get highest version from matched items (semver ranges may return multiple matches)
+const getHighestVersion = <T extends { data: { version: string } }>(items: T[]): T | undefined => {
+  if (items.length === 0) return undefined;
+  if (items.length === 1) return items[0];
+  const sorted = sortVersioned(items, (item) => item.data.version);
+  return sorted[0];
+};
+
+// Resolve a pointer to its collection type and format as sidebar reference
+// Note: Messages use plural keys (events:, commands:, queries:) while other resources use singular
+const resolvePointerToRef = (pointer: { id: string; version?: string }, context: DataProductContext): string | null => {
+  const { id, version } = pointer;
+
+  // Check each collection type using semver resolution - messages use plural keys in the sidebar
+  const events = getItemsFromCollectionByIdAndSemverOrLatest(context.events, id, version);
+  const event = getHighestVersion(events);
+  if (event) return `events:${id}:${event.data.version}`;
+
+  const commands = getItemsFromCollectionByIdAndSemverOrLatest(context.commands, id, version);
+  const command = getHighestVersion(commands);
+  if (command) return `commands:${id}:${command.data.version}`;
+
+  const queries = getItemsFromCollectionByIdAndSemverOrLatest(context.queries, id, version);
+  const query = getHighestVersion(queries);
+  if (query) return `queries:${id}:${query.data.version}`;
+
+  // Non-message resources use singular keys
+  const services = getItemsFromCollectionByIdAndSemverOrLatest(context.services, id, version);
+  const service = getHighestVersion(services);
+  if (service) return `service:${id}:${service.data.version}`;
+
+  const containers = getItemsFromCollectionByIdAndSemverOrLatest(context.containers, id, version);
+  const container = getHighestVersion(containers);
+  if (container) return `container:${id}:${container.data.version}`;
+
+  const channels = getItemsFromCollectionByIdAndSemverOrLatest(context.channels, id, version);
+  const channel = getHighestVersion(channels);
+  if (channel) return `channel:${id}:${channel.data.version}`;
+
+  // Unknown type - skip it
+  return null;
+};
+
+export const buildDataProductNode = (
+  dataProduct: CollectionEntry<'data-products'>,
+  owners: any[],
+  context: DataProductContext
+): NavNode => {
+  const inputs = dataProduct.data.inputs || [];
+  const outputs = dataProduct.data.outputs || [];
+
+  const renderVisualiser = isVisualiserEnabled();
+  const renderOwners = owners.length > 0 && shouldRenderSideBarSection(dataProduct, 'owners');
+
+  // Resolve inputs and outputs to their proper sidebar references
+  const resolvedInputs = inputs.map((input) => resolvePointerToRef(input, context)).filter(Boolean) as string[];
+  const resolvedOutputs = outputs.map((output) => resolvePointerToRef(output, context)).filter(Boolean) as string[];
+
+  // Extract data contracts from outputs that have a contract field
+  const dataContracts = outputs
+    .filter((output) => output.contract)
+    .map((output) => ({
+      type: 'item' as const,
+      title: `${output.contract!.name} (${getSchemaFormatFromURL(output.contract!.path).toUpperCase()})`,
+      summary: output.contract!.type ? `Type: ${output.contract!.type}` : undefined,
+      href: buildUrl(
+        `/schemas/data-products/${dataProduct.data.id}/${dataProduct.data.version}?contract=${encodeURIComponent(output.contract!.path)}`
+      ),
+    }));
+
+  return {
+    type: 'item',
+    title: dataProduct.data.name,
+    badge: 'Data Product',
+    summary: dataProduct.data.summary,
+    pages: [
+      buildQuickReferenceSection([
+        { title: 'Overview', href: buildUrl(`/docs/data-products/${dataProduct.data.id}/${dataProduct.data.version}`) },
+      ]),
+      renderVisualiser && {
+        type: 'group',
+        title: 'Architecture',
+        icon: 'Workflow',
+        pages: [
+          {
+            type: 'item',
+            title: 'Map',
+            href: buildUrl(`/visualiser/data-products/${dataProduct.data.id}/${dataProduct.data.version}`),
+          },
+        ],
+      },
+      resolvedInputs.length > 0 && {
+        type: 'group',
+        title: 'Inputs',
+        icon: 'ArrowDownToLine',
+        pages: resolvedInputs,
+      },
+      resolvedOutputs.length > 0 && {
+        type: 'group',
+        title: 'Outputs',
+        icon: 'ArrowUpFromLine',
+        pages: resolvedOutputs,
+      },
+      dataContracts.length > 0 && {
+        type: 'group',
+        title: 'Data Contracts',
+        icon: 'FileCheck',
+        pages: dataContracts,
+      },
+      renderOwners && buildOwnersSection(owners),
+    ].filter(Boolean) as ChildRef[],
+  };
+};

package/eventcatalog/src/stores/sidebar-store/builders/domain.ts

@@ -18,6 +18,9 @@ export const buildDomainNode = (domain: CollectionEntry<'domains'>, owners: any[
   const servicesInDomain = domain.data.services || [];
   const renderServices = servicesInDomain.length > 0 && shouldRenderSideBarSection(domain, 'services');
 
+  const dataProductsInDomain = domain.data['data-products'] || [];
+  const renderDataProducts = dataProductsInDomain.length > 0 && shouldRenderSideBarSection(domain, 'data-products');
+
   const subDomains = domain.data.domains || [];
   const renderSubDomains = subDomains.length > 0 && shouldRenderSideBarSection(domain, 'subdomains');
 
@@ -157,6 +160,14 @@ export const buildDomainNode = (domain: CollectionEntry<'domains'>, owners: any[
         icon: 'Server',
         pages: servicesInDomain.map((service) => `service:${(service as any).data.id}:${(service as any).data.version}`),
       },
+      renderDataProducts && {
+        type: 'group',
+        title: 'Data Products',
+        icon: 'Package',
+        pages: dataProductsInDomain.map(
+          (dataProduct) => `data-product:${(dataProduct as any).data.id}:${(dataProduct as any).data.version}`
+        ),
+      },
       sendsMessages.length > 0 &&
         renderMessages && {
           type: 'group',