@eventcatalog/core 3.7.2 → 3.8.0

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

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-GQZVIS3Z.js";
-import "../chunk-WAX3S32H.js";
+} from "../chunk-GITARDPK.js";
+import "../chunk-EG36OTR7.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 = "3.7.2";
+var version = "3.8.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-M7EPRGHR.js";
-import "../chunk-GQZVIS3Z.js";
-import "../chunk-WAX3S32H.js";
+} from "../chunk-ZIG6J4R2.js";
+import "../chunk-GITARDPK.js";
+import "../chunk-EG36OTR7.js";
 import "../chunk-UPONRQSN.js";
 export {
   log_build_default as default

package/dist/{chunk-O6SRHGZ7.js → chunk-4EJDLNIX.js}

@@ -1,6 +1,6 @@
 import {
   logger
-} from "./chunk-7CTNGTBB.js";
+} from "./chunk-IEEU454Z.js";
 import {
   cleanup,
   getEventCatalogConfigFile

package/dist/{chunk-WAX3S32H.js → chunk-EG36OTR7.js}

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

package/dist/{chunk-GQZVIS3Z.js → chunk-GITARDPK.js}

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

package/dist/{chunk-7CTNGTBB.js → chunk-IEEU454Z.js}

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-WAX3S32H.js";
+} from "./chunk-EG36OTR7.js";
 
 // src/utils/cli-logger.ts
 import pc from "picocolors";

package/dist/{chunk-M7EPRGHR.js → chunk-ZIG6J4R2.js}

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

package/dist/constants.cjs

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

package/dist/constants.js

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

package/dist/eventcatalog.cjs

@@ -109,7 +109,7 @@ var verifyRequiredFieldsAreInCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.7.2";
+var version = "3.8.0";
 
 // 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-M7EPRGHR.js";
-import "./chunk-GQZVIS3Z.js";
+} from "./chunk-ZIG6J4R2.js";
+import "./chunk-GITARDPK.js";
 import {
   runMigrations
 } from "./chunk-BH3JMNAV.js";
@@ -21,13 +21,13 @@ import {
 } from "./chunk-5VBIXL6C.js";
 import {
   generate
-} from "./chunk-O6SRHGZ7.js";
+} from "./chunk-4EJDLNIX.js";
 import {
   logger
-} from "./chunk-7CTNGTBB.js";
+} from "./chunk-IEEU454Z.js";
 import {
   VERSION
-} from "./chunk-WAX3S32H.js";
+} from "./chunk-EG36OTR7.js";
 import "./chunk-UPONRQSN.js";
 
 // src/eventcatalog.ts

package/dist/generate.cjs

@@ -73,7 +73,7 @@ var getEventCatalogConfigFile = async (projectDirectory) => {
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.7.2";
+var version = "3.8.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/generate.js

@@ -1,8 +1,8 @@
 import {
   generate
-} from "./chunk-O6SRHGZ7.js";
-import "./chunk-7CTNGTBB.js";
-import "./chunk-WAX3S32H.js";
+} from "./chunk-4EJDLNIX.js";
+import "./chunk-IEEU454Z.js";
+import "./chunk-EG36OTR7.js";
 import "./chunk-UPONRQSN.js";
 export {
   generate

package/dist/utils/cli-logger.cjs

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(cli_logger_exports);
 var import_picocolors = __toESM(require("picocolors"), 1);
 
 // package.json
-var version = "3.7.2";
+var version = "3.8.0";
 
 // src/constants.ts
 var VERSION = version;

package/dist/utils/cli-logger.js

@@ -1,7 +1,7 @@
 import {
   logger
-} from "../chunk-7CTNGTBB.js";
-import "../chunk-WAX3S32H.js";
+} from "../chunk-IEEU454Z.js";
+import "../chunk-EG36OTR7.js";
 export {
   logger
 };

package/eventcatalog/src/components/ChatPanel/ChatPanel.tsx

@@ -171,6 +171,17 @@ const suggestedQuestionsConfig: QuestionConfig[] = [
       { label: 'Who owns this domain?', prompt: 'Who owns this domain and how do I contact them?' },
     ],
   },
+  // Data Products page
+  {
+    pattern: /^\/(docs|visualiser)\/data-products\/.+/,
+    questions: [
+      { label: 'What are the inputs and outputs?', prompt: 'What are the inputs and outputs of this data product?' },
+      { label: 'Show me the data contracts', prompt: 'What are the data contracts for this data product?' },
+      { label: 'Is this data product production ready?', prompt: 'Is this data product production ready?' },
+      { label: 'What is the quality & SLA of this product?', prompt: 'What is the quality & SLA of this product?' },
+      { label: 'Who owns this data product?', prompt: 'Who owns this data product and how do I contact them?' },
+    ],
+  },
   // Designs page
   {
     pattern: /^\/diagrams\/.+/,
@@ -490,7 +501,7 @@ const ChatPanel = ({ isOpen, onClose }: ChatPanelProps) => {
   // Memoize page context to avoid recalculating on every render
   const pageContext = useMemo(() => {
     const match = pathname.match(
-      /^\/(docs|visualiser|architecture)\/(events|services|commands|queries|flows|domains|channels|entities|containers)\/([^/]+)(?:\/([^/]+))?/
+      /^\/(docs|visualiser|architecture)\/(events|services|commands|queries|flows|domains|channels|entities|containers|data-products)\/([^/]+)(?:\/([^/]+))?/
     );
     if (match) {
       const [, , collection, id, version] = match;
@@ -504,6 +515,7 @@ const ChatPanel = ({ isOpen, onClose }: ChatPanelProps) => {
         channels: 'Channel',
         entities: 'Entity',
         containers: 'Container',
+        'data-products': 'Data Product',
       };
       return {
         type: collectionNames[collection] || collection,

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

@@ -11,6 +11,7 @@ import {
   ArrowTopRightOnSquareIcon,
   ArrowLongRightIcon,
   ArrowLongLeftIcon,
+  CubeIcon,
 } from '@heroicons/react/24/outline';
 import { buildUrl } from '@utils/url-builder';
 import { BoxIcon } from 'lucide-react';
@@ -324,6 +325,43 @@ const ServiceCard = memo(({ service }: { service: any }) => {
   );
 });
 
+const DataProductCard = memo(({ dataProduct }: { dataProduct: any }) => {
+  const data = dataProduct?.data || dataProduct;
+
+  if (!data?.id) return null;
+
+  const href = buildUrl(`/docs/data-products/${data.id}/${data.version}`);
+
+  return (
+    <a
+      href={href}
+      className="block bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-xl shadow-sm hover:shadow-md hover:border-[rgb(var(--ec-accent)/0.5)] transition-all"
+    >
+      <div className="flex items-center justify-between px-4 py-3">
+        <div className="flex items-center gap-2.5">
+          <div className="flex items-center justify-center w-8 h-8 bg-purple-100 dark:bg-purple-500/20 rounded-lg">
+            <CubeIcon className="h-4 w-4 text-purple-600 dark:text-purple-400" />
+          </div>
+          <div>
+            <div className="flex items-center gap-2">
+              <span className="font-semibold text-[rgb(var(--ec-page-text))]">{data.name || data.id}</span>
+              <span className="text-[11px] text-[rgb(var(--ec-page-text-muted))] font-medium bg-[rgb(var(--ec-content-hover))] px-1.5 py-0.5 rounded">
+                v{data.version}
+              </span>
+            </div>
+            {data.summary && (
+              <p className="text-xs text-[rgb(var(--ec-page-text-muted))] line-clamp-1 mt-0.5 max-w-md">{data.summary}</p>
+            )}
+          </div>
+        </div>
+        <div className="p-1.5 text-[rgb(var(--ec-icon-color))]">
+          <ArrowTopRightOnSquareIcon className="h-4 w-4" />
+        </div>
+      </div>
+    </a>
+  );
+});
+
 const SubdomainSection = memo(({ subdomain }: { subdomain: any }) => {
   const data = subdomain?.data || subdomain;
   const [isCollapsed, setIsCollapsed] = useState(true);
@@ -332,6 +370,7 @@ const SubdomainSection = memo(({ subdomain }: { subdomain: any }) => {
 
   const services = data.services || [];
   const entities = data.entities || [];
+  const dataProducts = data['data-products'] || [];
 
   return (
     <div className="bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] border border-[rgb(var(--ec-page-border))] rounded-xl overflow-hidden shadow-sm">
@@ -351,11 +390,13 @@ const SubdomainSection = memo(({ subdomain }: { subdomain: any }) => {
                 v{data.version}
               </span>
               {/* Show counts when collapsed */}
-              {isCollapsed && (services.length > 0 || entities.length > 0) && (
+              {isCollapsed && (services.length > 0 || entities.length > 0 || dataProducts.length > 0) && (
                 <span className="text-[11px] text-[rgb(var(--ec-icon-color))] ml-1">
                   {services.length > 0 && `${services.length} service${services.length > 1 ? 's' : ''}`}
-                  {services.length > 0 && entities.length > 0 && ', '}
+                  {services.length > 0 && (entities.length > 0 || dataProducts.length > 0) && ', '}
                   {entities.length > 0 && `${entities.length} entit${entities.length > 1 ? 'ies' : 'y'}`}
+                  {entities.length > 0 && dataProducts.length > 0 && ', '}
+                  {dataProducts.length > 0 && `${dataProducts.length} data product${dataProducts.length > 1 ? 's' : ''}`}
                 </span>
               )}
             </div>
@@ -417,9 +458,28 @@ const SubdomainSection = memo(({ subdomain }: { subdomain: any }) => {
             </div>
           )}
 
-          {entities.length === 0 && services.length === 0 && (
+          {/* Subdomain Data Products */}
+          {dataProducts.length > 0 && (
+            <div>
+              <div className="flex items-center gap-2 mb-3">
+                <CubeIcon className="h-4 w-4 text-purple-600 dark:text-purple-400" />
+                <h4 className="text-sm font-semibold text-[rgb(var(--ec-page-text))]">Data Products</h4>
+                <span className="text-xs text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-content-hover))] px-2 py-0.5 rounded-full font-medium">
+                  {dataProducts.length}
+                </span>
+              </div>
+              <div className="space-y-3">
+                {dataProducts.map((dataProduct: any) => {
+                  const dataProductId = dataProduct?.data?.id || dataProduct?.id;
+                  return dataProductId ? <DataProductCard key={dataProductId} dataProduct={dataProduct} /> : null;
+                })}
+              </div>
+            </div>
+          )}
+
+          {entities.length === 0 && services.length === 0 && dataProducts.length === 0 && (
             <p className="text-sm text-[rgb(var(--ec-icon-color))] italic text-center py-4">
-              No entities or services in this subdomain
+              No entities, services, or data products in this subdomain
             </p>
           )}
         </div>
@@ -439,6 +499,7 @@ export default function DomainGrid({ domain }: DomainGridProps) {
   const subdomains = data.domains || [];
   const entities = data.entities || [];
   const services = data.services || [];
+  const dataProducts = data['data-products'] || [];
 
   // Get services that are NOT in any subdomain
   const subdomainServiceIds = useMemo(
@@ -452,6 +513,18 @@ export default function DomainGrid({ domain }: DomainGridProps) {
     [subdomains]
   );
 
+  // Get data products that are NOT in any subdomain
+  const subdomainDataProductIds = useMemo(
+    () =>
+      new Set(
+        subdomains.flatMap((sd: any) => {
+          const sdData = sd?.data || sd;
+          return (sdData?.['data-products'] || []).map((dp: any) => dp?.data?.id || dp?.id);
+        })
+      ),
+    [subdomains]
+  );
+
   const topLevelServices = useMemo(
     () =>
       services.filter((s: any) => {
@@ -461,6 +534,15 @@ export default function DomainGrid({ domain }: DomainGridProps) {
     [services, subdomainServiceIds]
   );
 
+  const topLevelDataProducts = useMemo(
+    () =>
+      dataProducts.filter((dp: any) => {
+        const dpId = dp?.data?.id || dp?.id;
+        return dpId && !subdomainDataProductIds.has(dpId);
+      }),
+    [dataProducts, subdomainDataProductIds]
+  );
+
   return (
     <div className="w-full">
       {/* Domain Header - Doc style */}
@@ -548,13 +630,34 @@ export default function DomainGrid({ domain }: DomainGridProps) {
           </div>
         )}
 
+        {/* Top-level Data Products */}
+        {topLevelDataProducts.length > 0 && (
+          <div>
+            <div className="flex items-center gap-2 mb-4">
+              <CubeIcon className="h-5 w-5 text-purple-600 dark:text-purple-400" />
+              <h3 className="text-lg font-semibold text-[rgb(var(--ec-page-text))]">Data Products</h3>
+              <span className="text-sm text-[rgb(var(--ec-page-text-muted))] bg-[rgb(var(--ec-content-hover))] px-2.5 py-0.5 rounded-full font-medium">
+                {topLevelDataProducts.length}
+              </span>
+            </div>
+            <div className="space-y-3">
+              {topLevelDataProducts.map((dataProduct: any) => {
+                const dataProductId = dataProduct?.data?.id || dataProduct?.id;
+                return dataProductId ? <DataProductCard key={dataProductId} dataProduct={dataProduct} /> : null;
+              })}
+            </div>
+          </div>
+        )}
+
         {/* Empty state */}
-        {entities.length === 0 && services.length === 0 && subdomains.length === 0 && (
+        {entities.length === 0 && services.length === 0 && dataProducts.length === 0 && subdomains.length === 0 && (
           <div className="text-center py-12">
             <div className="flex items-center justify-center w-16 h-16 mx-auto mb-4 bg-[rgb(var(--ec-content-hover))] rounded-2xl">
               <RectangleGroupIcon className="h-8 w-8 text-[rgb(var(--ec-icon-color))]" />
             </div>
-            <p className="text-[rgb(var(--ec-page-text-muted))]">This domain has no entities, services, or subdomains defined.</p>
+            <p className="text-[rgb(var(--ec-page-text-muted))]">
+              This domain has no entities, services, data products, or subdomains defined.
+            </p>
           </div>
         )}
       </div>

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

@@ -1,4 +1,11 @@
-import { BoltIcon, ChatBubbleLeftIcon, MagnifyingGlassIcon, EnvelopeIcon, ServerIcon } from '@heroicons/react/24/outline';
+import {
+  BoltIcon,
+  ChatBubbleLeftIcon,
+  MagnifyingGlassIcon,
+  EnvelopeIcon,
+  ServerIcon,
+  DocumentCheckIcon,
+} from '@heroicons/react/24/outline';
 import type { CollectionMessageTypes, CollectionTypes } from '@types';
 
 export const getCollectionStyles = (collection: CollectionMessageTypes | CollectionTypes) => {
@@ -11,6 +18,8 @@ export const getCollectionStyles = (collection: CollectionMessageTypes | Collect
       return { color: 'green', Icon: MagnifyingGlassIcon };
     case 'services':
       return { color: 'pink', Icon: ServerIcon };
+    case 'data-products':
+      return { color: 'purple', Icon: DocumentCheckIcon };
     default:
       return { color: 'gray', Icon: EnvelopeIcon };
   }

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

@@ -13,6 +13,7 @@ import {
 import { getNodesAndEdges as getNodesAndEdgesForDomainEntityMap } from '@utils/node-graphs/domain-entity-map';
 import { getDomainsCanvasData } from '@utils/node-graphs/domains-canvas';
 import { getNodesAndEdges as getNodesAndEdgesForFlows } from '@utils/node-graphs/flows-node-graph';
+import { getNodesAndEdges as getNodesAndEdgesForDataProduct } from '@utils/node-graphs/data-products-node-graph';
 import { buildUrl } from '@utils/url-builder';
 import { getVersionFromCollection } from '@utils/collections/versions';
 import { pageDataLoader } from '@utils/page-loaders/page-data-loader';
@@ -61,6 +62,7 @@ const getNodesAndEdgesFunctions = {
   domains: getNodesAndEdgesForDomain,
   flows: getNodesAndEdgesForFlows,
   containers: getNodesAndEdgesForContainer,
+  'data-products': getNodesAndEdgesForDataProduct,
 };
 
 let links: { label: string; url: string }[] = [];

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

@@ -39,6 +39,7 @@ import DataNode from './Nodes/Data';
 import ViewNode from './Nodes/View';
 import ActorNode from './Nodes/Actor';
 import ExternalSystemNode2 from './Nodes/ExternalSystem2';
+import DataProductNode from './Nodes/DataProduct';
 import { Note as NoteNode } from '@eventcatalog/visualizer';
 
 import type { CollectionEntry } from 'astro:content';
@@ -118,6 +119,8 @@ const NodeGraphBuilder = ({
         data: DataNode,
         view: ViewNode,
         actor: ActorNode,
+        'data-product': DataProductNode,
+        'data-products': DataProductNode,
         note: (props: any) => <NoteNode {...props} readOnly={true} />,
       }) as unknown as NodeTypes,
     []
@@ -462,6 +465,7 @@ const NodeGraphBuilder = ({
       actor: 'bg-yellow-500',
       step: 'bg-gray-700',
       data: 'bg-blue-600',
+      'data-products': 'bg-indigo-600',
     };
 
     let legendForDomains: { [key: string]: { count: number; colorClass: string; groupId: string } } = {};

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

@@ -0,0 +1,132 @@
+import { Handle } from '@xyflow/react';
+import * as ContextMenu from '@radix-ui/react-context-menu';
+import { buildUrl } from '@utils/url-builder';
+import { Position } from '@xyflow/react';
+import { Package } from 'lucide-react';
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(' ');
+}
+
+interface DataProductNodeProps {
+  data: {
+    mode: 'simple' | 'full';
+    dataProduct: {
+      id: string;
+      version: string;
+      name: string;
+      summary?: string;
+      inputs?: any[];
+      outputs?: any[];
+      owners?: any[];
+    };
+  };
+  selected?: boolean;
+}
+
+export default function DataProductNode(props: DataProductNodeProps) {
+  const { id, version, name, summary, inputs = [], outputs = [], owners = [] } = props.data.dataProduct;
+  const mode = props.data.mode || 'simple';
+  const nodeLabel = 'Data Product';
+  const rotatedLabel = 'Product';
+
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger>
+        <div className="relative">
+          <Handle
+            type="target"
+            position={Position.Left}
+            style={{ width: 10, height: 10, background: '#6366f1', zIndex: 10 }}
+            className="bg-indigo-500"
+          />
+          <Handle
+            type="source"
+            position={Position.Right}
+            style={{ width: 10, height: 10, background: '#6366f1', zIndex: 10 }}
+            className="bg-indigo-500"
+          />
+          <div
+            className={classNames(
+              'w-full rounded-md border flex justify-start bg-white text-black',
+              props.selected ? 'border-indigo-600 ring-2 ring-indigo-500 shadow-lg' : 'border-indigo-400'
+            )}
+          >
+            <div
+              className={`bg-gradient-to-b from-indigo-500 to-indigo-700 relative flex items-center w-5 justify-center rounded-l-sm text-indigo-100 border-r-[1px] border-indigo-500`}
+            >
+              <Package className="w-4 h-4 opacity-90 text-white absolute top-1" />
+              {mode === 'full' && (
+                <span
+                  className={'w-1/2 text-center absolute bottom-1 text-[8px] text-white font-bold uppercase tracking-[3px]'}
+                  style={{ transform: 'rotate(-90deg)' }}
+                >
+                  {rotatedLabel}
+                </span>
+              )}
+            </div>
+            <div className="p-1 min-w-60 max-w-[min-content]">
+              <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
+                <span className="text-xs font-bold block pt-0.5 pb-0.5">{name}</span>
+                <div className="flex justify-between">
+                  <span className="text-[10px] font-light block pt-0.5 pb-0.5">v{version}</span>
+                  {mode === 'simple' && (
+                    <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5">{nodeLabel}</span>
+                  )}
+                </div>
+              </div>
+              {mode === 'full' && (
+                <div className="divide-y divide-gray-200">
+                  <div className="leading-3 py-1">
+                    <div
+                      className="text-[8px] font-light overflow-hidden"
+                      style={{
+                        display: '-webkit-box',
+                        WebkitLineClamp: 2,
+                        WebkitBoxOrient: 'vertical',
+                      }}
+                      title={summary}
+                    >
+                      {summary}
+                    </div>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-x-4 py-1">
+                    <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                      Inputs: {inputs.length}
+                    </span>
+                    <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                      Outputs: {outputs.length}
+                    </span>
+                    <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                      Owners: {owners.length}
+                    </span>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </ContextMenu.Trigger>
+      <ContextMenu.Portal>
+        <ContextMenu.Content className="min-w-[220px] bg-white rounded-md p-1 shadow-md border border-gray-200">
+          <ContextMenu.Item
+            asChild
+            className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-indigo-100 rounded-sm flex items-center"
+          >
+            <a href={buildUrl(`/docs/data-products/${id}/${version}`)}>Read documentation</a>
+          </ContextMenu.Item>
+          <ContextMenu.Separator className="h-[1px] bg-gray-200 m-1" />
+          <ContextMenu.Item asChild>
+            <a
+              href={buildUrl(`/visualiser/data-products/${id}/${version}`)}
+              className="text-sm px-2 py-1.5 outline-none cursor-pointer hover:bg-indigo-100 rounded-sm flex items-center"
+            >
+              View in Visualiser
+            </a>
+          </ContextMenu.Item>
+        </ContextMenu.Content>
+      </ContextMenu.Portal>
+    </ContextMenu.Root>
+  );
+}