@eventcatalog/core 2.44.0 → 2.44.1

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

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-NUHIER2H.js";
-import "../chunk-C4NENBPQ.js";
+} from "../chunk-AUGREOCT.js";
+import "../chunk-HGLZ22GT.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.0";
+var version = "2.44.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-MF3FQSRF.js";
-import "../chunk-NUHIER2H.js";
-import "../chunk-C4NENBPQ.js";
+} from "../chunk-ECUXDBJ7.js";
+import "../chunk-AUGREOCT.js";
+import "../chunk-HGLZ22GT.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/{chunk-NUHIER2H.js → chunk-AUGREOCT.js}

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

package/dist/{chunk-MF3FQSRF.js → chunk-ECUXDBJ7.js}

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

package/dist/{chunk-C4NENBPQ.js → chunk-HGLZ22GT.js}

@@ -1,5 +1,5 @@
 // package.json
-var version = "2.44.0";
+var version = "2.44.1";
 
 // 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.0";
+var version = "2.44.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-C4NENBPQ.js";
+} from "./chunk-HGLZ22GT.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.0";
+var version = "2.44.1";
 
 // 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-MF3FQSRF.js";
-import "./chunk-NUHIER2H.js";
+} from "./chunk-ECUXDBJ7.js";
+import "./chunk-AUGREOCT.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
@@ -15,7 +15,7 @@ import {
 import "./chunk-EXAALOQA.js";
 import {
   VERSION
-} from "./chunk-C4NENBPQ.js";
+} from "./chunk-HGLZ22GT.js";
 import {
   isAuthEnabled,
   isBackstagePluginEnabled,

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

@@ -103,6 +103,7 @@ if (collection === 'domain-context-map') {
     client:only="react"
     linksToVisualiser={linksToVisualiser}
     links={links}
+    mode={mode}
   />
 </div>
 

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

@@ -12,9 +12,13 @@ import {
   type Edge,
   type Node,
   useReactFlow,
+  getNodesBounds,
+  getViewportForBounds,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import { HistoryIcon } from 'lucide-react';
+import { toPng } from 'html-to-image';
+import { DocumentArrowDownIcon } from '@heroicons/react/24/outline';
 // Nodes and edges
 import ServiceNode from './Nodes/Service';
 import FlowNode from './Nodes/Flow';
@@ -31,11 +35,11 @@ import CustomNode from './Nodes/Custom';
 import type { CollectionEntry } from 'astro:content';
 import { navigate } from 'astro:transitions/client';
 import type { CollectionTypes } from '@types';
-import DownloadButton from './DownloadButton';
 import { buildUrl } from '@utils/url-builder';
 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';
 interface Props {
   nodes: any;
   edges: any;
@@ -47,6 +51,7 @@ interface Props {
   includeKey?: boolean;
   linksToVisualiser?: boolean;
   links?: { label: string; url: string }[];
+  mode?: 'full' | 'simple';
 }
 
 const getVisualiserUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
@@ -62,6 +67,7 @@ const NodeGraphBuilder = ({
   includeKey = true,
   linksToVisualiser = false,
   links = [],
+  mode = 'full',
 }: Props) => {
   const nodeTypes = useMemo(
     () => ({
@@ -92,7 +98,8 @@ const NodeGraphBuilder = ({
   const [isAnimated, setIsAnimated] = useState(false);
   const [animateMessages, setAnimateMessages] = useState(false);
   const { hideChannels, toggleChannelsVisibility } = useEventCatalogVisualiser({ nodes, edges, setNodes, setEdges });
-  const { fitView } = useReactFlow();
+  const { fitView, getNodes } = useReactFlow();
+  const searchRef = useRef<VisualiserSearchRef>(null);
 
   const resetNodesAndEdges = useCallback(() => {
     setNodes((nds) =>
@@ -200,10 +207,59 @@ const NodeGraphBuilder = ({
 
   const handlePaneClick = useCallback(() => {
     setIsSettingsOpen(false);
+    searchRef.current?.hideSuggestions();
     resetNodesAndEdges();
     fitView({ duration: 800 });
   }, [resetNodesAndEdges, fitView]);
 
+  const handleNodeSelect = useCallback(
+    (node: Node) => {
+      handleNodeClick(null, node);
+    },
+    [handleNodeClick]
+  );
+
+  const handleSearchClear = useCallback(() => {
+    resetNodesAndEdges();
+    fitView({ duration: 800 });
+  }, [resetNodesAndEdges, fitView]);
+
+  const downloadImage = useCallback((dataUrl: string, filename?: string) => {
+    const a = document.createElement('a');
+    a.setAttribute('download', `${filename || 'eventcatalog'}.png`);
+    a.setAttribute('href', dataUrl);
+    a.click();
+  }, []);
+
+  const handleExportVisual = useCallback(() => {
+    const imageWidth = 1024;
+    const imageHeight = 768;
+    const nodesBounds = getNodesBounds(getNodes());
+    const width = imageWidth > nodesBounds.width ? imageWidth : nodesBounds.width;
+    const height = imageHeight > nodesBounds.height ? imageHeight : nodesBounds.height;
+    const viewport = getViewportForBounds(nodesBounds, width, height, 0.5, 2, 0);
+
+    // Hide settings panel and controls during export
+    setIsSettingsOpen(false);
+    const controls = document.querySelector('.react-flow__controls') as HTMLElement;
+    if (controls) controls.style.display = 'none';
+
+    toPng(document.querySelector('.react-flow__viewport') as HTMLElement, {
+      backgroundColor: '#f1f1f1',
+      width,
+      height,
+      style: {
+        width: width.toString(),
+        height: height.toString(),
+        transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`,
+      },
+    }).then((dataUrl: string) => {
+      downloadImage(dataUrl, title);
+      // Restore controls
+      if (controls) controls.style.display = 'block';
+    });
+  }, [getNodes, downloadImage, title]);
+
   const handleLegendClick = useCallback(
     (collectionType: string, groupId?: string) => {
       const updatedNodes = nodes.map((node: Node<any>) => {
@@ -304,50 +360,55 @@ const NodeGraphBuilder = ({
       className="relative"
     >
       <Panel position="top-center" className="w-full pr-6 ">
-        <div className="flex space-x-2 justify-between  items-center">
-          <div>
-            <button
-              onClick={() => setIsSettingsOpen(!isSettingsOpen)}
-              className="py-2.5 px-3 bg-white rounded-md shadow-md hover:bg-purple-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
-              aria-label="Open settings"
-            >
-              <CogIcon className="h-5 w-5 text-gray-600" />
-            </button>
-          </div>
-          {title && (
-            <span className="block shadow-sm bg-white text-xl z-10 text-black px-4 py-2 border-gray-200 rounded-md border opacity-80">
-              {title}
-            </span>
-          )}
-          <div className="flex justify-end space-x-2">
-            <DownloadButton filename={title} addPadding={false} />
-            {/* // Dropdown for links */}
-            {links.length > 0 && (
-              <div className="relative flex items-center -mt-1">
-                <span className="absolute left-2 pointer-events-none flex items-center h-full">
-                  <HistoryIcon className="h-4 w-4 text-gray-600" />
-                </span>
-                <select
-                  value={links.find((link) => window.location.href.includes(link.url))?.url || links[0].url}
-                  onChange={(e) => navigate(e.target.value)}
-                  className="appearance-none pl-7 pr-6 py-0 text-[14px] bg-white rounded-md border border-gray-200 hover:bg-gray-100/50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
-                  style={{ minWidth: 120, height: '26px' }}
-                >
-                  {links.map((link) => (
-                    <option key={link.url} value={link.url}>
-                      {link.label}
-                    </option>
-                  ))}
-                </select>
-                <span className="absolute right-2 pointer-events-none">
-                  <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-                  </svg>
-                </span>
-              </div>
+        <div className="flex space-x-2 justify-between items-center">
+          <div className="flex space-x-2">
+            <div>
+              <button
+                onClick={() => setIsSettingsOpen(!isSettingsOpen)}
+                className="py-2.5 px-3 bg-white rounded-md shadow-md hover:bg-purple-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
+                aria-label="Open settings"
+              >
+                <CogIcon className="h-5 w-5 text-gray-600" />
+              </button>
+            </div>
+            {title && (
+              <span className="block shadow-sm bg-white text-xl z-10 text-black px-4 py-1.5 border-gray-200 rounded-md border opacity-80">
+                {title}
+              </span>
             )}
           </div>
+          {mode === 'full' && (
+            <div className="flex justify-end space-x-2 w-96">
+              <VisualiserSearch ref={searchRef} nodes={nodes} onNodeSelect={handleNodeSelect} onClear={handleSearchClear} />
+            </div>
+          )}
         </div>
+        {links.length > 0 && (
+          <div className="flex justify-end mt-3">
+            <div className="relative flex items-center -mt-1">
+              <span className="absolute left-2 pointer-events-none flex items-center h-full">
+                <HistoryIcon className="h-4 w-4 text-gray-600" />
+              </span>
+              <select
+                value={links.find((link) => window.location.href.includes(link.url))?.url || links[0].url}
+                onChange={(e) => navigate(e.target.value)}
+                className="appearance-none pl-7 pr-6 py-0 text-[14px] bg-white rounded-md border border-gray-200 hover:bg-gray-100/50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
+                style={{ minWidth: 120, height: '26px' }}
+              >
+                {links.map((link) => (
+                  <option key={link.url} value={link.url}>
+                    {link.label}
+                  </option>
+                ))}
+              </select>
+              <span className="absolute right-2 pointer-events-none">
+                <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+                </svg>
+              </span>
+            </div>
+          </div>
+        )}
       </Panel>
 
       {isSettingsOpen && (
@@ -396,6 +457,15 @@ const NodeGraphBuilder = ({
               </div>
               <p className="text-[10px] text-gray-500">Show or hide channels in the visualizer.</p>
             </div>
+            <div className="pt-4 border-t border-gray-200">
+              <button
+                onClick={handleExportVisual}
+                className="w-full flex items-center justify-center space-x-2 px-4 py-2 bg-purple-600 text-white text-sm font-medium rounded-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
+              >
+                <DocumentArrowDownIcon className="w-4 h-4" />
+                <span>Export Visual</span>
+              </button>
+            </div>
           </div>
         </div>
       )}
@@ -437,6 +507,7 @@ interface NodeGraphProps {
   footerLabel?: string;
   linksToVisualiser?: boolean;
   links?: { label: string; url: string }[];
+  mode?: 'full' | 'simple';
 }
 
 const NodeGraph = ({
@@ -451,6 +522,7 @@ const NodeGraph = ({
   footerLabel,
   linksToVisualiser = false,
   links = [],
+  mode = 'full',
 }: NodeGraphProps) => {
   const [elem, setElem] = useState(null);
   const [showFooter, setShowFooter] = useState(true);
@@ -482,6 +554,7 @@ const NodeGraph = ({
             includeKey={includeKey}
             linksToVisualiser={linksToVisualiser}
             links={links}
+            mode={mode}
           />
 
           {showFooter && (

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

@@ -0,0 +1,207 @@
+import { useState, useCallback, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
+import type { Node } from '@xyflow/react';
+
+interface VisualiserSearchProps {
+  nodes: Node[];
+  onNodeSelect: (node: Node) => void;
+  onClear: () => void;
+  onPaneClick?: () => void;
+}
+
+export interface VisualiserSearchRef {
+  hideSuggestions: () => void;
+}
+
+const VisualiserSearch = forwardRef<VisualiserSearchRef, VisualiserSearchProps>(
+  ({ nodes, onNodeSelect, onClear, onPaneClick }, ref) => {
+    const [searchQuery, setSearchQuery] = useState('');
+    const [filteredSuggestions, setFilteredSuggestions] = useState<Node[]>([]);
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(-1);
+    const searchInputRef = useRef<HTMLInputElement>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    const hideSuggestions = useCallback(() => {
+      setShowSuggestions(false);
+      setSelectedSuggestionIndex(-1);
+    }, []);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        hideSuggestions,
+      }),
+      [hideSuggestions]
+    );
+
+    const getNodeDisplayName = useCallback((node: Node) => {
+      // @ts-ignore
+      const name = node.data?.message?.data?.name || node.data?.service?.data?.name || node.data?.name || node.id;
+      // @ts-ignore
+      const version = node.data?.message?.data?.version || node.data?.service?.data?.version || node.data?.version;
+      return version ? `${name} (v${version})` : name;
+    }, []);
+
+    const getNodeTypeColorClass = useCallback((nodeType: string) => {
+      const colorClasses: { [key: string]: string } = {
+        events: 'bg-orange-600 text-white',
+        services: 'bg-pink-600 text-white',
+        flows: 'bg-teal-600 text-white',
+        commands: 'bg-blue-600 text-white',
+        queries: 'bg-green-600 text-white',
+        channels: 'bg-gray-600 text-white',
+        externalSystem: 'bg-pink-600 text-white',
+        actor: 'bg-yellow-500 text-white',
+        step: 'bg-gray-700 text-white',
+        user: 'bg-yellow-500 text-white',
+        custom: 'bg-gray-500 text-white',
+      };
+      return colorClasses[nodeType] || 'bg-gray-100 text-gray-700';
+    }, []);
+
+    const handleSearchChange = useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        const query = event.target.value;
+        setSearchQuery(query);
+
+        if (query.length > 0) {
+          const filtered = nodes.filter((node) => {
+            const nodeName = getNodeDisplayName(node);
+            return nodeName.toLowerCase().includes(query.toLowerCase());
+          });
+          setFilteredSuggestions(filtered);
+          setShowSuggestions(true);
+          setSelectedSuggestionIndex(-1);
+        } else {
+          setFilteredSuggestions(nodes);
+          setShowSuggestions(true);
+          setSelectedSuggestionIndex(-1);
+        }
+      },
+      [nodes, getNodeDisplayName]
+    );
+
+    const handleSearchFocus = useCallback(() => {
+      if (searchQuery.length === 0) {
+        setFilteredSuggestions(nodes);
+      }
+      setShowSuggestions(true);
+      setSelectedSuggestionIndex(-1);
+    }, [nodes, searchQuery]);
+
+    const handleSuggestionClick = useCallback(
+      (node: Node) => {
+        setSearchQuery(getNodeDisplayName(node));
+        setShowSuggestions(false);
+        onNodeSelect(node);
+      },
+      [onNodeSelect, getNodeDisplayName]
+    );
+
+    const handleSearchKeyDown = useCallback(
+      (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (!showSuggestions || filteredSuggestions.length === 0) return;
+
+        switch (event.key) {
+          case 'ArrowDown':
+            event.preventDefault();
+            setSelectedSuggestionIndex((prev) => (prev < filteredSuggestions.length - 1 ? prev + 1 : 0));
+            break;
+          case 'ArrowUp':
+            event.preventDefault();
+            setSelectedSuggestionIndex((prev) => (prev > 0 ? prev - 1 : filteredSuggestions.length - 1));
+            break;
+          case 'Enter':
+            event.preventDefault();
+            if (selectedSuggestionIndex >= 0) {
+              handleSuggestionClick(filteredSuggestions[selectedSuggestionIndex]);
+            }
+            break;
+          case 'Escape':
+            setShowSuggestions(false);
+            setSelectedSuggestionIndex(-1);
+            break;
+        }
+      },
+      [showSuggestions, filteredSuggestions, selectedSuggestionIndex, handleSuggestionClick]
+    );
+
+    const clearSearch = useCallback(() => {
+      setSearchQuery('');
+      setShowSuggestions(false);
+      setFilteredSuggestions([]);
+      setSelectedSuggestionIndex(-1);
+      onClear();
+      if (searchInputRef.current) {
+        searchInputRef.current.focus();
+      }
+    }, [onClear]);
+
+    // Close suggestions when clicking outside
+    useEffect(() => {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+          setShowSuggestions(false);
+          setSelectedSuggestionIndex(-1);
+        }
+      };
+
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, []);
+
+    return (
+      <div ref={containerRef} className="w-full max-w-md mx-auto relative">
+        <div className="relative">
+          <input
+            ref={searchInputRef}
+            type="text"
+            placeholder="Search nodes..."
+            value={searchQuery}
+            onChange={handleSearchChange}
+            onKeyDown={handleSearchKeyDown}
+            onFocus={handleSearchFocus}
+            className="w-full px-4 py-2 pr-10 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent"
+          />
+          {searchQuery && (
+            <button
+              onClick={clearSearch}
+              className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+              aria-label="Clear search"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          )}
+        </div>
+        {showSuggestions && filteredSuggestions.length > 0 && (
+          <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-gray-300 rounded-md shadow-lg z-50 max-h-60 overflow-y-auto">
+            {filteredSuggestions.map((node, index) => {
+              const nodeName = getNodeDisplayName(node);
+              const nodeType = node.type || 'unknown';
+              return (
+                <div
+                  key={node.id}
+                  onClick={() => handleSuggestionClick(node)}
+                  className={`px-4 py-2 cursor-pointer flex items-center justify-between hover:bg-gray-100 ${
+                    index === selectedSuggestionIndex ? 'bg-purple-50' : ''
+                  }`}
+                >
+                  <span className="text-sm font-medium text-gray-900">{nodeName}</span>
+                  <span className={`text-xs capitalize px-2 py-1 rounded ${getNodeTypeColorClass(nodeType)}`}>{nodeType}</span>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+VisualiserSearch.displayName = 'VisualiserSearch';
+
+export default VisualiserSearch;

package/package.json

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