@eventcatalog/core 2.44.3 → 2.44.4

package/dist/analytics/analytics.cjs

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

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-SHFEPDUF.js";
-import "../chunk-EJOD6TNE.js";
+} from "../chunk-5JM4QIHQ.js";
+import "../chunk-DFFXN3Z4.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.44.3";
+var version = "2.44.4";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-CGPQJVQ3.js";
-import "../chunk-SHFEPDUF.js";
-import "../chunk-EJOD6TNE.js";
+} from "../chunk-DAC5BKLG.js";
+import "../chunk-5JM4QIHQ.js";
+import "../chunk-DFFXN3Z4.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/{chunk-SHFEPDUF.js → chunk-5JM4QIHQ.js}

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

package/dist/{chunk-CGPQJVQ3.js → chunk-DAC5BKLG.js}

@@ -1,6 +1,6 @@
 import {
   raiseEvent
-} from "./chunk-SHFEPDUF.js";
+} from "./chunk-5JM4QIHQ.js";
 import {
   getEventCatalogConfigFile,
   verifyRequiredFieldsAreInCatalogConfigFile

package/dist/{chunk-EJOD6TNE.js → chunk-DFFXN3Z4.js}

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

package/dist/constants.cjs

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

package/dist/constants.js

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

package/dist/eventcatalog.cjs

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

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-DCLTVJDP.js";
 import {
   log_build_default
-} from "./chunk-CGPQJVQ3.js";
-import "./chunk-SHFEPDUF.js";
+} from "./chunk-DAC5BKLG.js";
+import "./chunk-5JM4QIHQ.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
@@ -15,7 +15,7 @@ import {
 import "./chunk-EXAALOQA.js";
 import {
   VERSION
-} from "./chunk-EJOD6TNE.js";
+} from "./chunk-DFFXN3Z4.js";
 import {
   isAuthEnabled,
   isBackstagePluginEnabled,

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

@@ -40,6 +40,7 @@ import ChannelNode from './Nodes/Channel';
 import { CogIcon } from '@heroicons/react/20/solid';
 import { useEventCatalogVisualiser } from 'src/hooks/eventcatalog-visualizer';
 import VisualiserSearch, { type VisualiserSearchRef } from './VisualiserSearch';
+import StepWalkthrough from './StepWalkthrough';
 interface Props {
   nodes: any;
   edges: any;
@@ -97,6 +98,7 @@ const NodeGraphBuilder = ({
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const [isAnimated, setIsAnimated] = useState(false);
   const [animateMessages, setAnimateMessages] = useState(false);
+  const [activeStepIndex, setActiveStepIndex] = useState<number | null>(null);
   const { hideChannels, toggleChannelsVisibility } = useEventCatalogVisualiser({ nodes, edges, setNodes, setEdges });
   const { fitView, getNodes } = useReactFlow();
   const searchRef = useRef<VisualiserSearchRef>(null);
@@ -343,6 +345,106 @@ const NodeGraphBuilder = ({
 
   const legend = getNodesByCollectionWithColors(nodes);
 
+  const handleStepChange = useCallback(
+    (nodeId: string | null, highlightPaths?: string[], shouldZoomOut?: boolean) => {
+      if (nodeId === null) {
+        // Reset all nodes and edges
+        resetNodesAndEdges();
+        setActiveStepIndex(null);
+
+        // If shouldZoomOut is true, fit the entire view
+        if (shouldZoomOut) {
+          setTimeout(() => {
+            fitView({ duration: 800, padding: 0.1 });
+          }, 100);
+        }
+        return;
+      }
+
+      const activeNode = nodes.find((node: Node) => node.id === nodeId);
+      if (!activeNode) return;
+
+      // Create set of highlighted nodes and edges
+      const highlightedNodeIds = new Set<string>();
+      const highlightedEdgeIds = new Set<string>();
+
+      // Add current node
+      highlightedNodeIds.add(activeNode.id);
+
+      // Add incoming edges and their source nodes
+      edges.forEach((edge: Edge) => {
+        if (edge.target === activeNode.id) {
+          highlightedEdgeIds.add(edge.id);
+          highlightedNodeIds.add(edge.source);
+        }
+      });
+
+      // Add outgoing edges
+      if (highlightPaths) {
+        // Highlight all possible paths when at a fork
+        highlightPaths.forEach((pathId) => {
+          const [source, target] = pathId.split('-');
+          edges.forEach((edge: Edge) => {
+            if (edge.source === source && edge.target === target) {
+              highlightedEdgeIds.add(edge.id);
+              highlightedNodeIds.add(edge.target);
+            }
+          });
+        });
+      } else {
+        // Highlight all outgoing edges normally
+        edges.forEach((edge: Edge) => {
+          if (edge.source === activeNode.id) {
+            highlightedEdgeIds.add(edge.id);
+            highlightedNodeIds.add(edge.target);
+          }
+        });
+      }
+
+      // Update nodes
+      const updatedNodes = nodes.map((node: Node) => {
+        if (highlightedNodeIds.has(node.id)) {
+          return { ...node, style: { ...node.style, opacity: 1 } };
+        }
+        return { ...node, style: { ...node.style, opacity: 0.2 } };
+      });
+
+      // Update edges
+      const updatedEdges = edges.map((edge: Edge) => {
+        if (highlightedEdgeIds.has(edge.id)) {
+          return {
+            ...edge,
+            data: { ...edge.data, opacity: 1, animated: true },
+            style: { ...edge.style, opacity: 1, strokeWidth: 3 },
+            labelStyle: { ...edge.labelStyle, opacity: 1 },
+            animated: true,
+          };
+        }
+        return {
+          ...edge,
+          data: { ...edge.data, opacity: 0.2, animated: false },
+          style: { ...edge.style, opacity: 0.2, strokeWidth: 2 },
+          labelStyle: { ...edge.labelStyle, opacity: 0.2 },
+          animated: false,
+        };
+      });
+
+      setNodes(updatedNodes);
+      setEdges(updatedEdges);
+
+      // Fit view to active node
+      fitView({
+        padding: 0.4,
+        duration: 800,
+        nodes: [activeNode],
+      });
+    },
+    [nodes, edges, setNodes, setEdges, resetNodesAndEdges, fitView]
+  );
+
+  // Check if this is a flow visualization by checking if edges use flow-edge type
+  const isFlowVisualization = edges.some((edge: Edge) => edge.type === 'flow-edge');
+
   return (
     <ReactFlow
       nodeTypes={nodeTypes}
@@ -471,6 +573,17 @@ const NodeGraphBuilder = ({
       )}
       {includeBackground && <Background color="#bbb" gap={16} />}
       {includeBackground && <Controls />}
+      {isFlowVisualization && (
+        <Panel position="bottom-left">
+          <StepWalkthrough
+            nodes={nodes}
+            edges={edges}
+            isFlowVisualization={isFlowVisualization}
+            onStepChange={handleStepChange}
+            mode={mode}
+          />
+        </Panel>
+      )}
       {includeKey && (
         <Panel position="bottom-right">
           <div className=" bg-white font-light px-4 text-[12px] shadow-md py-1 rounded-md">

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

@@ -0,0 +1,296 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import type { Node, Edge } from '@xyflow/react';
+
+interface NodeData {
+  step?: {
+    title?: string;
+    summary?: string;
+  };
+  service?: {
+    data?: {
+      name?: string;
+      summary?: string;
+    };
+  };
+  message?: {
+    data?: {
+      name?: string;
+      summary?: string;
+    };
+  };
+  flow?: {
+    data?: {
+      name?: string;
+    };
+  };
+  custom?: {
+    title?: string;
+    label?: string;
+    summary?: string;
+  };
+  actor?: {
+    label?: string;
+  };
+  externalSystem?: {
+    label?: string;
+  };
+}
+
+interface CustomNode {
+  id: string;
+  data: NodeData;
+}
+
+interface StepWalkthroughProps {
+  nodes: CustomNode[];
+  edges: Edge[];
+  isFlowVisualization: boolean;
+  onStepChange: (nodeId: string | null, highlightPaths?: string[], shouldZoomOut?: boolean) => void;
+  mode?: 'full' | 'simple';
+}
+
+interface PathOption {
+  targetId: string;
+  label?: string;
+  targetNode: CustomNode;
+}
+
+export default function StepWalkthrough({
+  nodes,
+  edges,
+  isFlowVisualization,
+  onStepChange,
+  mode = 'full',
+}: StepWalkthroughProps) {
+  const [currentNodeId, setCurrentNodeId] = useState<string | null>(null);
+  const [pathHistory, setPathHistory] = useState<string[]>([]);
+  const [currentStepIndex, setCurrentStepIndex] = useState<number>(-1); // -1 means not started
+  const [availablePaths, setAvailablePaths] = useState<PathOption[]>([]);
+  const [selectedPathIndex, setSelectedPathIndex] = useState<number>(0);
+  const [startNodeId, setStartNodeId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isFlowVisualization && nodes.length > 0) {
+      // Find the starting node (node with no incoming edges)
+      const incomingEdgeMap = new Map<string, number>();
+      nodes.forEach((node: CustomNode) => incomingEdgeMap.set(node.id, 0));
+
+      edges.forEach((edge: Edge) => {
+        if (incomingEdgeMap.has(edge.target)) {
+          incomingEdgeMap.set(edge.target, (incomingEdgeMap.get(edge.target) || 0) + 1);
+        }
+      });
+
+      const startNodes = nodes.filter((node: CustomNode) => incomingEdgeMap.get(node.id) === 0);
+      if (startNodes.length > 0 && !startNodeId) {
+        const firstStartNode = startNodes[0];
+        setStartNodeId(firstStartNode.id);
+      }
+    }
+  }, [nodes, edges, isFlowVisualization, startNodeId]);
+
+  useEffect(() => {
+    if (currentNodeId) {
+      // Find available paths from current node
+      const outgoingEdges = edges.filter((edge: Edge) => edge.source === currentNodeId);
+      const paths: PathOption[] = outgoingEdges.map((edge: Edge) => {
+        const targetNode = nodes.find((n: CustomNode) => n.id === edge.target);
+        return {
+          targetId: edge.target,
+          label: edge.label as string | undefined,
+          targetNode: targetNode!,
+        };
+      });
+      setAvailablePaths(paths);
+      setSelectedPathIndex(0);
+    } else {
+      setAvailablePaths([]);
+    }
+  }, [currentNodeId, nodes, edges]);
+
+  const handleNextStep = useCallback(() => {
+    if (currentStepIndex === -1) {
+      // Start the walkthrough
+      if (startNodeId) {
+        setPathHistory([startNodeId]);
+        setCurrentNodeId(startNodeId);
+        setCurrentStepIndex(0);
+        onStepChange(startNodeId);
+      }
+    } else if (availablePaths.length > 0) {
+      // Move to the selected path
+      const selectedPath = availablePaths[selectedPathIndex];
+      const newHistory = [...pathHistory, selectedPath.targetId];
+      setPathHistory(newHistory);
+      setCurrentNodeId(selectedPath.targetId);
+      setCurrentStepIndex((prev) => prev + 1);
+
+      // Highlight the selected path
+      const allPaths = availablePaths.map((p) => `${currentNodeId}-${p.targetId}`);
+      onStepChange(selectedPath.targetId, allPaths);
+    }
+  }, [currentStepIndex, startNodeId, availablePaths, selectedPathIndex, currentNodeId, onStepChange]);
+
+  const handlePreviousStep = useCallback(() => {
+    if (currentStepIndex > 0) {
+      // Go back to previous step
+      const newIndex = currentStepIndex - 1;
+      const prevNodeId = pathHistory[newIndex];
+      setCurrentNodeId(prevNodeId);
+      setCurrentStepIndex(newIndex);
+      onStepChange(prevNodeId);
+    } else if (currentStepIndex === 0) {
+      // Go back to the start (no selection)
+      setCurrentNodeId(null);
+      setCurrentStepIndex(-1);
+      onStepChange(null);
+    }
+  }, [currentStepIndex, pathHistory, onStepChange]);
+
+  const handlePathSelection = useCallback((index: number) => {
+    setSelectedPathIndex(index);
+  }, []);
+
+  const handleFinish = useCallback(() => {
+    setCurrentNodeId(null);
+    setCurrentStepIndex(-1);
+    setPathHistory([]);
+    onStepChange(null, [], true); // Pass true to indicate full reset with zoom out
+  }, [onStepChange]);
+
+  if (!isFlowVisualization || nodes.length === 0 || mode !== 'full') {
+    return null;
+  }
+
+  const getCurrentStepInfo = () => {
+    if (currentStepIndex === -1) {
+      return { title: 'Walk through business flow', description: 'Step through the flow to understand the business process' };
+    }
+
+    const currentNode = nodes.find((n: CustomNode) => n.id === currentNodeId);
+    if (!currentNode) return { title: 'Unknown step', description: '' };
+
+    let stepNumber = currentStepIndex + 1;
+    let title = `Step ${stepNumber}`;
+    let description = '';
+
+    // Get node information based on type - check step data first, then type-specific data
+    if (currentNode.data.step?.title) {
+      title += `: ${currentNode.data.step.title}`;
+    } else if (currentNode.data.service?.data?.name) {
+      title += `: ${currentNode.data.service.data.name}`;
+    } else if (currentNode.data.message?.data?.name) {
+      title += `: ${currentNode.data.message.data.name}`;
+    } else if (currentNode.data.flow?.data?.name) {
+      title += `: ${currentNode.data.flow.data.name}`;
+    } else if (currentNode.data.custom?.title) {
+      title += `: ${currentNode.data.custom.title}`;
+    } else if (currentNode.data.custom?.label) {
+      title += `: ${currentNode.data.custom.label}`;
+    } else if (currentNode.data.actor?.label) {
+      title += `: ${currentNode.data.actor.label}`;
+    } else if (currentNode.data.externalSystem?.label) {
+      title += `: ${currentNode.data.externalSystem.label}`;
+    }
+
+    // Get description - check step data first, then type-specific data
+    if (currentNode.data.step?.summary) {
+      description = currentNode.data.step.summary;
+    } else if (currentNode.data.service?.data?.summary) {
+      description = currentNode.data.service.data.summary;
+    } else if (currentNode.data.message?.data?.summary) {
+      description = currentNode.data.message.data.summary;
+    } else if (currentNode.data.custom?.summary) {
+      description = currentNode.data.custom.summary;
+    }
+
+    return { title, description };
+  };
+
+  const { title, description } = getCurrentStepInfo();
+
+  return (
+    <div className="ml-8 bg-white rounded-lg shadow-sm p-[8px] z-30 border border-gray-200 w-[350px]">
+      <div className="mb-3">
+        <h3 className="text-sm font-semibold text-gray-900">{title}</h3>
+        {description && <p className="text-xs text-gray-600 mt-1">{description}</p>}
+      </div>
+
+      {/* Show path options when there are multiple paths */}
+      {currentNodeId && availablePaths.length > 1 && (
+        <div className="mb-3">
+          <label className="block text-xs font-medium text-gray-700 mb-2">Choose next path:</label>
+          <select
+            value={selectedPathIndex}
+            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => handlePathSelection(parseInt(e.target.value))}
+            className="w-full px-3 py-2 text-xs border border-gray-300 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+          >
+            {availablePaths.map((path, index) => {
+              // @ts-ignore
+              const nodeLabel =
+                path.targetNode.data.step?.title ||
+                (path.targetNode.data as any).service?.data?.name ||
+                (path.targetNode.data as any).message?.data?.name ||
+                (path.targetNode.data as any).flow?.data?.name ||
+                (path.targetNode.data as any).custom?.title ||
+                (path.targetNode.data as any).custom?.label ||
+                (path.targetNode.data as any).actor?.label ||
+                (path.targetNode.data as any).externalSystem?.label ||
+                'Unknown';
+
+              return (
+                <option key={path.targetId} value={index}>
+                  {path.label ? `${path.label}: ${nodeLabel}` : nodeLabel}
+                </option>
+              );
+            })}
+          </select>
+        </div>
+      )}
+
+      <div className="flex items-center justify-between">
+        {currentStepIndex === -1 ? (
+          // Initial state - show only Start button on the right
+          <>
+            <div className="flex-1"></div>
+            <button
+              onClick={handleNextStep}
+              className="flex items-center justify-center px-6 py-2 text-xs font-medium bg-purple-600 text-white rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-colors"
+            >
+              Start
+            </button>
+          </>
+        ) : (
+          // In walkthrough - show Previous on left, Next on right (only if paths available)
+          <>
+            <button
+              onClick={handlePreviousStep}
+              className="flex items-center justify-center px-4 py-2 text-xs font-medium bg-purple-600 text-white rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-colors"
+            >
+              <ChevronLeftIcon className="w-4 h-4 mr-1" />
+              Previous
+            </button>
+
+            {availablePaths.length > 0 ? (
+              <button
+                onClick={handleNextStep}
+                className="flex items-center justify-center px-4 py-2 text-xs font-medium bg-purple-600 text-white rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-colors"
+              >
+                Next
+                <ChevronRightIcon className="w-4 h-4 ml-1" />
+              </button>
+            ) : (
+              <button
+                onClick={handleFinish}
+                className="flex items-center justify-center px-4 py-2 text-xs font-medium bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors"
+              >
+                Finish
+              </button>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -1,10 +1,33 @@
 import React from 'react';
 import { getMessageColorByCollection, getMessageCollectionName } from '../index';
+
 interface MessageListProps {
   messages: any[];
   decodedCurrentPath: string;
+  searchTerm?: string;
 }
 
+const HighlightedText = React.memo(({ text, searchTerm }: { text: string; searchTerm?: string }) => {
+  if (!searchTerm) return <>{text}</>;
+
+  const regex = new RegExp(`(${searchTerm})`, 'gi');
+  const parts = text.split(regex);
+
+  return (
+    <>
+      {parts.map((part, index) =>
+        regex.test(part) ? (
+          <span key={index} className="bg-yellow-200 text-gray-900 font-semibold">
+            {part}
+          </span>
+        ) : (
+          <span key={index}>{part}</span>
+        )
+      )}
+    </>
+  );
+});
+
 const getMessageColorByLabelOrCollection = (collection: string, badge?: string) => {
   if (!badge) {
     return getMessageColorByCollection(collection);
@@ -25,7 +48,7 @@ const getMessageColorByLabelOrCollection = (collection: string, badge?: string)
   return getMessageColorByCollection(collection);
 };
 
-const MessageList: React.FC<MessageListProps> = ({ messages, decodedCurrentPath }) => (
+const MessageList: React.FC<MessageListProps> = ({ messages, decodedCurrentPath, searchTerm }) => (
   <ul className="space-y-0.5 border-l border-gray-200/80 ml-[9px] pl-4">
     {messages.map((message: any) => (
       <li key={message.id} data-active={decodedCurrentPath === message.href}>
@@ -35,7 +58,9 @@ const MessageList: React.FC<MessageListProps> = ({ messages, decodedCurrentPath
             decodedCurrentPath.includes(message.href) ? 'bg-purple-100 ' : 'hover:bg-purple-100'
           }`}
         >
-          <span className="truncate">{message.data?.sidebar?.label || message.data.name}</span>
+          <span className="truncate">
+            <HighlightedText text={message.data?.sidebar?.label || message.data.name} searchTerm={searchTerm} />
+          </span>
           <span
             className={`ml-2 text-[10px]  flex items-center gap-1 font-medium px-2 uppercase py-0.5 rounded ${getMessageColorByLabelOrCollection(message.collection, message.data?.sidebar?.badge)}`}
           >

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

@@ -8,6 +8,27 @@ import type { MessageItem, ServiceItem, ListViewSideBarProps } from './types';
 const STORAGE_KEY = 'EventCatalog:catalogSidebarCollapsedGroups';
 const DEBOUNCE_DELAY = 300; // 300ms debounce delay
 
+const HighlightedText = React.memo(({ text, searchTerm }: { text: string; searchTerm: string }) => {
+  if (!searchTerm) return <>{text}</>;
+
+  const regex = new RegExp(`(${searchTerm})`, 'gi');
+  const parts = text.split(regex);
+
+  return (
+    <>
+      {parts.map((part, index) =>
+        regex.test(part) ? (
+          <span key={index} className="bg-yellow-200 text-gray-900 font-semibold">
+            {part}
+          </span>
+        ) : (
+          <span key={index}>{part}</span>
+        )
+      )}
+    </>
+  );
+});
+
 export const getMessageColorByCollection = (collection: string) => {
   if (collection === 'commands') return 'bg-blue-50 text-blue-600';
   if (collection === 'queries') return 'bg-green-50 text-green-600';
@@ -46,12 +67,14 @@ const ServiceItem = React.memo(
     collapsedGroups,
     toggleGroupCollapse,
     isVisualizer,
+    searchTerm,
   }: {
     item: ServiceItem;
     decodedCurrentPath: string;
     collapsedGroups: { [key: string]: boolean };
     toggleGroupCollapse: (group: string) => void;
     isVisualizer: boolean;
+    searchTerm: string;
   }) => {
     const asyncAPISpecifications = item.specifications?.filter((spec) => spec.type === 'asyncapi');
     const openAPISpecifications = item.specifications?.filter((spec) => spec.type === 'openapi');
@@ -68,7 +91,9 @@ const ServiceItem = React.memo(
             }}
             className="flex justify-between items-center pl-2 w-full text-xs"
           >
-            <span className="truncate text-xs font-bold">{item.label}</span>
+            <span className="truncate text-xs font-bold">
+              <HighlightedText text={item.label} searchTerm={searchTerm} />
+            </span>
             <span className="text-purple-600 ml-2 text-[10px] font-medium bg-purple-50 px-2 py-0.5 rounded">SERVICE</span>
           </button>
         }
@@ -131,7 +156,7 @@ const ServiceItem = React.memo(
               </button>
             }
           >
-            <MessageList messages={item.receives} decodedCurrentPath={decodedCurrentPath} />
+            <MessageList messages={item.receives} decodedCurrentPath={decodedCurrentPath} searchTerm={searchTerm} />
           </CollapsibleGroup>
 
           <CollapsibleGroup
@@ -149,7 +174,7 @@ const ServiceItem = React.memo(
               </button>
             }
           >
-            <MessageList messages={item.sends} decodedCurrentPath={decodedCurrentPath} />
+            <MessageList messages={item.sends} decodedCurrentPath={decodedCurrentPath} searchTerm={searchTerm} />
           </CollapsibleGroup>
           {!isVisualizer && item.entities.length > 0 && (
             <CollapsibleGroup
@@ -167,7 +192,7 @@ const ServiceItem = React.memo(
                 </button>
               }
             >
-              <MessageList messages={item.entities} decodedCurrentPath={decodedCurrentPath} />
+              <MessageList messages={item.entities} decodedCurrentPath={decodedCurrentPath} searchTerm={searchTerm} />
             </CollapsibleGroup>
           )}
         </div>
@@ -206,12 +231,17 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
   const filteredData = useMemo(() => {
     if (!debouncedSearchTerm) return data;
 
-    const filterItem = (item: { label: string }) => {
-      return item.label.toLowerCase().includes(debouncedSearchTerm);
+    const filterItem = (item: { label: string; id?: string }) => {
+      return (
+        item.label.toLowerCase().includes(debouncedSearchTerm) || (item.id && item.id.toLowerCase().includes(debouncedSearchTerm))
+      );
     };
 
     const filterMessages = (messages: MessageItem[]) => {
-      return messages.filter((message) => message.data.name.toLowerCase().includes(debouncedSearchTerm));
+      return messages.filter(
+        (message) =>
+          message.data.name.toLowerCase().includes(debouncedSearchTerm) || message.id.toLowerCase().includes(debouncedSearchTerm)
+      );
     };
 
     return {
@@ -224,13 +254,22 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
             receives: filterMessages(service.receives),
             isVisible:
               filterItem(service) ||
-              service.sends.some((msg: MessageItem) => msg.data.name.toLowerCase().includes(debouncedSearchTerm)) ||
-              service.receives.some((msg: MessageItem) => msg.data.name.toLowerCase().includes(debouncedSearchTerm)),
+              service.sends.some(
+                (msg: MessageItem) =>
+                  msg.data.name.toLowerCase().includes(debouncedSearchTerm) || msg.id.toLowerCase().includes(debouncedSearchTerm)
+              ) ||
+              service.receives.some(
+                (msg: MessageItem) =>
+                  msg.data.name.toLowerCase().includes(debouncedSearchTerm) || msg.id.toLowerCase().includes(debouncedSearchTerm)
+              ),
           }))
           .filter((service: ServiceItem & { isVisible: boolean }) => service.isVisible) || [],
       flows: data.flows?.filter(filterItem) || [],
       messagesNotInService:
-        data.messagesNotInService?.filter((msg: MessageItem) => msg.label.toLowerCase().includes(debouncedSearchTerm)) || [],
+        data.messagesNotInService?.filter(
+          (msg: MessageItem) =>
+            msg.label.toLowerCase().includes(debouncedSearchTerm) || msg.id.toLowerCase().includes(debouncedSearchTerm)
+        ) || [],
     };
   }, [data, debouncedSearchTerm]);
 
@@ -333,7 +372,9 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
                             decodedCurrentPath === item.href
                           }`}
                         >
-                          <span className="truncate">{item.label}</span>
+                          <span className="truncate">
+                            <HighlightedText text={item.label} searchTerm={debouncedSearchTerm} />
+                          </span>
                           <span className="text-yellow-600 ml-2 text-[10px] font-medium bg-yellow-50 px-2 py-0.5 rounded">
                             {isDomainSubDomain(item) ? 'SUBDOMAIN' : 'DOMAIN'}
                           </span>
@@ -395,7 +436,11 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
                                 </button>
                               }
                             >
-                              <MessageList messages={item.entities} decodedCurrentPath={decodedCurrentPath} />
+                              <MessageList
+                                messages={item.entities}
+                                decodedCurrentPath={decodedCurrentPath}
+                                searchTerm={debouncedSearchTerm}
+                              />
                             </CollapsibleGroup>
                           )}
                         </div>
@@ -417,6 +462,7 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
                       collapsedGroups={collapsedGroups}
                       toggleGroupCollapse={toggleGroupCollapse}
                       isVisualizer={isVisualizer}
+                      searchTerm={debouncedSearchTerm}
                     />
                   ))}
                 </ul>
@@ -434,7 +480,9 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
                           decodedCurrentPath === item.href ? 'bg-purple-100 text-purple-900' : 'hover:bg-purple-100'
                         }`}
                       >
-                        <span className="truncate">{item.label}</span>
+                        <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)}`}
                         >
@@ -458,7 +506,9 @@ const ListViewSideBar: React.FC<ListViewSideBarProps> = ({ resources, currentPat
                           decodedCurrentPath === item.href ? 'bg-cyan-100 text-cyan-900' : 'hover:bg-purple-100'
                         }`}
                       >
-                        <span className="truncate">{item.label}</span>
+                        <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>

package/package.json

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