@eventcatalog/core 2.52.0 → 2.53.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.52.0";
+var version = "2.53.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/analytics.js

@@ -1,7 +1,7 @@
 import {
   raiseEvent
-} from "../chunk-6DB32LQO.js";
-import "../chunk-GR53VD3Z.js";
+} from "../chunk-Q363JHA2.js";
+import "../chunk-K5LYWIYR.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.52.0";
+var version = "2.53.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/analytics/log-build.js

@@ -1,8 +1,8 @@
 import {
   log_build_default
-} from "../chunk-IXFKZMN2.js";
-import "../chunk-6DB32LQO.js";
-import "../chunk-GR53VD3Z.js";
+} from "../chunk-BQDTPLND.js";
+import "../chunk-Q363JHA2.js";
+import "../chunk-K5LYWIYR.js";
 import "../chunk-E7TXTI7G.js";
 export {
   log_build_default as default

package/dist/{chunk-IXFKZMN2.js → chunk-BQDTPLND.js}

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

package/dist/{chunk-GR53VD3Z.js → chunk-K5LYWIYR.js}

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

package/dist/{chunk-6DB32LQO.js → chunk-Q363JHA2.js}

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

package/dist/constants.cjs

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

package/dist/constants.js

@@ -1,6 +1,6 @@
 import {
   VERSION
-} from "./chunk-GR53VD3Z.js";
+} from "./chunk-K5LYWIYR.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.52.0";
+var version = "2.53.1";
 
 // src/constants.ts
 var VERSION = version;

package/dist/eventcatalog.js

@@ -6,8 +6,8 @@ import {
 } from "./chunk-XE6PFSH5.js";
 import {
   log_build_default
-} from "./chunk-IXFKZMN2.js";
-import "./chunk-6DB32LQO.js";
+} from "./chunk-BQDTPLND.js";
+import "./chunk-Q363JHA2.js";
 import {
   catalogToAstro,
   checkAndConvertMdToMdx
@@ -15,7 +15,7 @@ import {
 import "./chunk-LDBRNJIL.js";
 import {
   VERSION
-} from "./chunk-GR53VD3Z.js";
+} from "./chunk-K5LYWIYR.js";
 import {
   isAuthEnabled,
   isBackstagePluginEnabled,

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

@@ -32,6 +32,7 @@ interface Props {
   linksToVisualiser?: boolean;
   showSearch?: boolean;
   showLegend?: boolean;
+  zoomOnScroll?: boolean;
 }
 
 const {
@@ -45,6 +46,7 @@ const {
   linksToVisualiser,
   showSearch = true,
   showLegend = true,
+  zoomOnScroll = false,
 } = Astro.props;
 
 let nodes = [],
@@ -136,6 +138,7 @@ if (collection === 'domains-entities') {
     mode={mode}
     showSearch={showSearch}
     includeKey={showLegend}
+    zoomOnScroll={zoomOnScroll}
   />
 </div>
 

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

@@ -57,6 +57,7 @@ interface Props {
   mode?: 'full' | 'simple';
   showFlowWalkthrough?: boolean;
   showSearch?: boolean;
+  zoomOnScroll?: boolean;
 }
 
 const getVisualiserUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
@@ -75,6 +76,7 @@ const NodeGraphBuilder = ({
   mode = 'full',
   showFlowWalkthrough = true,
   showSearch = true,
+  zoomOnScroll = false,
 }: Props) => {
   const nodeTypes = useMemo(
     () => ({
@@ -119,6 +121,8 @@ const NodeGraphBuilder = ({
   });
   const { fitView, getNodes } = useReactFlow();
   const searchRef = useRef<VisualiserSearchRef>(null);
+  const reactFlowWrapperRef = useRef<HTMLDivElement>(null);
+  const scrollableContainerRef = useRef<HTMLElement | null>(null);
 
   const resetNodesAndEdges = useCallback(() => {
     setNodes((nds) =>
@@ -224,6 +228,70 @@ const NodeGraphBuilder = ({
     }, 150);
   }, []);
 
+  // Handle scroll wheel events to forward to page when no modifier keys are pressed
+  // Only when zoomOnScroll is disabled
+  // This is a fix for when we embed node graphs into pages, and users are scrolling the documentation pages
+  // We dont want REACT FLOW to swallow the scroll events, so we forward them to the parent page
+  useEffect(() => {
+    // Skip scroll handling if zoomOnScroll is enabled
+    if (zoomOnScroll) return;
+
+    // Cache the scrollable container on mount (expensive operation done once)
+    const findScrollableContainer = (): HTMLElement | null => {
+      // Try specific known selectors first (fast)
+      const selectors = [
+        '.docs-layout .overflow-y-auto',
+        '.overflow-y-auto',
+        '[style*="overflow-y:auto"]',
+        '[style*="overflow-y: auto"]',
+      ];
+
+      for (const selector of selectors) {
+        const element = document.querySelector(selector) as HTMLElement;
+        if (element) return element;
+      }
+
+      return null;
+    };
+
+    // Find and cache the scrollable container once
+    if (!scrollableContainerRef.current) {
+      scrollableContainerRef.current = findScrollableContainer();
+    }
+
+    const handleWheel = (event: WheelEvent) => {
+      // Only forward scroll if no modifier keys are pressed
+      if (!event.ctrlKey && !event.shiftKey && !event.metaKey) {
+        event.preventDefault();
+
+        const scrollableContainer = scrollableContainerRef.current;
+
+        if (scrollableContainer) {
+          scrollableContainer.scrollBy({
+            top: event.deltaY,
+            left: event.deltaX,
+            behavior: 'instant',
+          });
+        } else {
+          // Fallback to window scroll
+          window.scrollBy({
+            top: event.deltaY,
+            left: event.deltaX,
+            behavior: 'instant',
+          });
+        }
+      }
+    };
+
+    const wrapper = reactFlowWrapperRef.current;
+    if (wrapper) {
+      wrapper.addEventListener('wheel', handleWheel, { passive: false });
+      return () => {
+        wrapper.removeEventListener('wheel', handleWheel);
+      };
+    }
+  }, [zoomOnScroll]);
+
   const handlePaneClick = useCallback(() => {
     setIsSettingsOpen(false);
     searchRef.current?.hideSuggestions();
@@ -463,167 +531,170 @@ const NodeGraphBuilder = ({
   const isFlowVisualization = edges.some((edge: Edge) => edge.type === 'flow-edge');
 
   return (
-    <ReactFlow
-      nodeTypes={nodeTypes}
-      edgeTypes={edgeTypes}
-      minZoom={0.07}
-      nodes={nodes}
-      edges={edges}
-      fitView
-      onNodesChange={onNodesChange}
-      onEdgesChange={onEdgesChange}
-      connectionLineType={ConnectionLineType.SmoothStep}
-      nodeOrigin={[0.1, 0.1]}
-      onNodeClick={handleNodeClick}
-      onPaneClick={handlePaneClick}
-      className="relative"
-    >
-      <Panel position="top-center" className="w-full pr-6 ">
-        <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 ref={reactFlowWrapperRef} className="w-full h-full">
+      <ReactFlow
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        minZoom={0.07}
+        nodes={nodes}
+        edges={edges}
+        fitView
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        connectionLineType={ConnectionLineType.SmoothStep}
+        nodeOrigin={[0.1, 0.1]}
+        onNodeClick={handleNodeClick}
+        onPaneClick={handlePaneClick}
+        zoomOnScroll={zoomOnScroll}
+        className="relative"
+      >
+        <Panel position="top-center" className="w-full pr-6 ">
+          <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>
-            {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>
+            {mode === 'full' && showSearch && (
+              <div className="flex justify-end space-x-2 w-96">
+                <VisualiserSearch ref={searchRef} nodes={nodes} onNodeSelect={handleNodeSelect} onClear={handleSearchClear} />
+              </div>
             )}
           </div>
-          {mode === 'full' && showSearch && (
-            <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 && (
-        <div className="absolute top-[68px] left-5 w-72 p-4 bg-white rounded-lg shadow-lg z-30 border border-gray-200">
-          <h3 className="text-lg font-semibold mb-4">Visualizer Settings</h3>
-          <div className="space-y-4 ">
-            <div>
-              <div className="flex items-center justify-between">
-                <label htmlFor="message-animation-toggle" className="text-sm font-medium text-gray-700">
-                  Simulate Messages
-                </label>
-                <button
-                  id="message-animation-toggle"
-                  onClick={toggleAnimateMessages}
-                  className={`${
-                    animateMessages ? 'bg-purple-600' : 'bg-gray-200'
-                  } relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2`}
+          {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' }}
                 >
-                  <span
-                    className={`${
-                      animateMessages ? 'translate-x-6' : 'translate-x-1'
-                    } inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
-                  />
-                </button>
+                  {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>
-              <p className="text-[10px] text-gray-500">Animate events, queries and commands.</p>
             </div>
-            {hasChannels && (
+          )}
+        </Panel>
+
+        {isSettingsOpen && (
+          <div className="absolute top-[68px] left-5 w-72 p-4 bg-white rounded-lg shadow-lg z-30 border border-gray-200">
+            <h3 className="text-lg font-semibold mb-4">Visualizer Settings</h3>
+            <div className="space-y-4 ">
               <div>
                 <div className="flex items-center justify-between">
-                  <label htmlFor="hide-channels-toggle" className="text-sm font-medium text-gray-700">
-                    Hide Channels
+                  <label htmlFor="message-animation-toggle" className="text-sm font-medium text-gray-700">
+                    Simulate Messages
                   </label>
                   <button
-                    id="hide-channels-toggle"
-                    onClick={toggleChannelsVisibility}
+                    id="message-animation-toggle"
+                    onClick={toggleAnimateMessages}
                     className={`${
-                      hideChannels ? 'bg-purple-600' : 'bg-gray-200'
+                      animateMessages ? 'bg-purple-600' : 'bg-gray-200'
                     } relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2`}
                   >
                     <span
                       className={`${
-                        hideChannels ? 'translate-x-6' : 'translate-x-1'
+                        animateMessages ? 'translate-x-6' : 'translate-x-1'
                       } inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
                     />
                   </button>
                 </div>
-                <p className="text-[10px] text-gray-500">Show or hide channels in the visualizer.</p>
+                <p className="text-[10px] text-gray-500">Animate events, queries and commands.</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>
-      )}
-      {includeBackground && <Background color="#bbb" gap={16} />}
-      {includeBackground && <Controls />}
-      {isFlowVisualization && showFlowWalkthrough && (
-        <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">
-            <ul className="m-0 p-0 ">
-              {Object.entries(legend).map(([key, { count, colorClass, groupId }]) => (
-                <li
-                  key={key}
-                  className="flex space-x-2 items-center text-[10px] cursor-pointer hover:text-purple-600 hover:underline"
-                  onClick={() => handleLegendClick(key, groupId)}
+              {hasChannels && (
+                <div>
+                  <div className="flex items-center justify-between">
+                    <label htmlFor="hide-channels-toggle" className="text-sm font-medium text-gray-700">
+                      Hide Channels
+                    </label>
+                    <button
+                      id="hide-channels-toggle"
+                      onClick={toggleChannelsVisibility}
+                      className={`${
+                        hideChannels ? 'bg-purple-600' : 'bg-gray-200'
+                      } relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2`}
+                    >
+                      <span
+                        className={`${
+                          hideChannels ? 'translate-x-6' : 'translate-x-1'
+                        } inline-block h-4 w-4 transform rounded-full bg-white transition-transform`}
+                      />
+                    </button>
+                  </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"
                 >
-                  <span className={`w-2 h-2 block ${colorClass}`} />
-                  <span className="block capitalize">
-                    {key} ({count})
-                  </span>
-                </li>
-              ))}
-            </ul>
+                  <DocumentArrowDownIcon className="w-4 h-4" />
+                  <span>Export Visual</span>
+                </button>
+              </div>
+            </div>
           </div>
-        </Panel>
-      )}
-    </ReactFlow>
+        )}
+        {includeBackground && <Background color="#bbb" gap={16} />}
+        {includeBackground && <Controls />}
+        {isFlowVisualization && showFlowWalkthrough && (
+          <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">
+              <ul className="m-0 p-0 ">
+                {Object.entries(legend).map(([key, { count, colorClass, groupId }]) => (
+                  <li
+                    key={key}
+                    className="flex space-x-2 items-center text-[10px] cursor-pointer hover:text-purple-600 hover:underline"
+                    onClick={() => handleLegendClick(key, groupId)}
+                  >
+                    <span className={`w-2 h-2 block ${colorClass}`} />
+                    <span className="block capitalize">
+                      {key} ({count})
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </Panel>
+        )}
+      </ReactFlow>
+    </div>
   );
 };
 
@@ -643,6 +714,7 @@ interface NodeGraphProps {
   portalId?: string;
   showFlowWalkthrough?: boolean;
   showSearch?: boolean;
+  zoomOnScroll?: boolean;
 }
 
 const NodeGraph = ({
@@ -661,6 +733,7 @@ const NodeGraph = ({
   portalId,
   showFlowWalkthrough = true,
   showSearch = true,
+  zoomOnScroll = false,
 }: NodeGraphProps) => {
   const [elem, setElem] = useState(null);
   const [showFooter, setShowFooter] = useState(true);
@@ -697,6 +770,7 @@ const NodeGraph = ({
             mode={mode}
             showFlowWalkthrough={showFlowWalkthrough}
             showSearch={showSearch}
+            zoomOnScroll={zoomOnScroll}
           />
 
           {showFooter && (

package/eventcatalog/src/components/SideBars/ChannelSideBar.astro

@@ -75,12 +75,20 @@ const consumersList = consumers.map((c) => ({
   tag: `v${c.data.version}`,
   href: buildUrl(`/docs/${c.collection}/${c.data.id}/${c.data.version}`),
 }));
+
+const shouldRenderSideBarSection = (section: string) => {
+  if (!channel.data.detailsPanel) {
+    return true;
+  }
+  // @ts-ignore
+  return channel.data.detailsPanel[section]?.visible ?? true;
+};
 ---
 
 <aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto py-4">
   <div class="">
     {
-      producersList.length > 0 && (
+      producersList.length > 0 && shouldRenderSideBarSection('producers') && (
         <PillListFlat
           title={`Producers (${producersList.length})`}
           pills={producersList}
@@ -92,7 +100,7 @@ const consumersList = consumers.map((c) => ({
     }
 
     {
-      consumersList.length > 0 && (
+      consumersList.length > 0 && shouldRenderSideBarSection('consumers') && (
         <PillListFlat
           title={`Consumers (${consumersList.length})`}
           pills={consumersList}
@@ -104,7 +112,7 @@ const consumersList = consumers.map((c) => ({
     }
 
     {
-      messageList.length > 0 && (
+      messageList.length > 0 && shouldRenderSideBarSection('messages') && (
         <PillListFlat
           title={`Messages using channel (${messageList.length})`}
           pills={messageList}
@@ -116,13 +124,13 @@ const consumersList = consumers.map((c) => ({
     }
 
     {
-      protocolList.length > 0 && (
+      protocolList.length > 0 && shouldRenderSideBarSection('protocols') && (
         <ProtocolList color="pink" title={`Protocols (${protocolList.length})`} pills={protocolList} client:load />
       )
     }
 
     {
-      channel.data.versions && (
+      channel.data.versions && shouldRenderSideBarSection('versions') && (
         <VersionList
           title={`Versions (${channel.data.versions?.length})`}
           versions={channel.data.versions}
@@ -131,27 +139,31 @@ const consumersList = consumers.map((c) => ({
       )
     }
 
-    <OwnersList
-      title={`Owners (${filteredOwners.length})`}
-      owners={ownersList}
-      emptyMessage={`This channel does not have any documented owners.`}
-      client:load
-    />
+    {
+      ownersList.length > 0 && shouldRenderSideBarSection('owners') && (
+        <OwnersList
+          title={`Owners (${filteredOwners.length})`}
+          owners={ownersList}
+          emptyMessage={`This channel does not have any documented owners.`}
+          client:load
+        />
+      )
+    }
 
     {
-      channel.data.repository && (
+      channel.data.repository && shouldRenderSideBarSection('repository') && (
         <RepositoryList repository={channel.data.repository?.url} language={channel.data.repository?.language} />
       )
     }
 
     {
-      paramsList.length > 0 && (
+      paramsList.length > 0 && shouldRenderSideBarSection('parameters') && (
         <PillListFlat color="pink" title={`Parameters (${paramsList.length})`} pills={paramsList} client:load />
       )
     }
 
     {
-      isChangelogEnabled() && (
+      isChangelogEnabled() && shouldRenderSideBarSection('changelog') && (
         <div class="space-y-2">
           <a
             href={buildUrl(`/docs/${channel.collection}/${channel.data.id}/${channel.data.latestVersion}/changelog`)}

package/eventcatalog/src/components/SideBars/DomainSideBar.astro

@@ -105,12 +105,20 @@ const ownersList = filteredOwners.map((o) => ({
   avatarUrl: o.collection === 'users' ? o.data.avatarUrl : '',
   href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
 }));
+
+const shouldRenderSideBarSection = (section: string) => {
+  if (!domain.data.detailsPanel) {
+    return true;
+  }
+  // @ts-ignore
+  return domain.data.detailsPanel[section]?.visible ?? true;
+};
 ---
 
 <aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto py-4">
   <div>
     {
-      parentDomains.length > 0 && (
+      parentDomains.length > 0 && shouldRenderSideBarSection('parentDomains') && (
         <PillListFlat
           title={`Parent domains (${parentDomains.length})`}
           pills={parentDomainList}
@@ -123,7 +131,7 @@ const ownersList = filteredOwners.map((o) => ({
     }
 
     {
-      subDomains.length > 0 && (
+      subDomains.length > 0 && shouldRenderSideBarSection('subdomains') && (
         <PillListFlat
           title={`Subdomains (${subDomains.length})`}
           pills={subDomainList}
@@ -139,29 +147,41 @@ const ownersList = filteredOwners.map((o) => ({
         .filter((section) => section.items.length > 0 && section.sidebar)
         .map((section) => <CustomSideBarSectionList section={section} />)
     }
-    <PillListFlat
-      title={`Services (${services.length})`}
-      pills={serviceList}
-      emptyMessage={`This domain does not contain any services.`}
-      color="pink"
-      client:load
-    />
-    <PillListFlat
-      title={`Sends messages (${sendsList.length})`}
-      pills={sendsList}
-      emptyMessage={`This domain does not send any messages.`}
-      color="orange"
-      client:load
-    />
-    <PillListFlat
-      title={`Receives messages (${receivesList.length})`}
-      pills={receivesList}
-      emptyMessage={`This domain does not receive any messages.`}
-      color="orange"
-      client:load
-    />
     {
-      ubiquitousLanguageList && hasUbiquitousLanguage && (
+      shouldRenderSideBarSection('services') && (
+        <PillListFlat
+          title={`Services (${services.length})`}
+          pills={serviceList}
+          emptyMessage={`This domain does not contain any services.`}
+          color="pink"
+          client:load
+        />
+      )
+    }
+    {
+      shouldRenderSideBarSection('messages') && (
+        <PillListFlat
+          title={`Sends messages (${sendsList.length})`}
+          pills={sendsList}
+          emptyMessage={`This domain does not send any messages.`}
+          color="orange"
+          client:load
+        />
+      )
+    }
+    {
+      shouldRenderSideBarSection('messages') && (
+        <PillListFlat
+          title={`Receives messages (${receivesList.length})`}
+          pills={receivesList}
+          emptyMessage={`This domain does not receive any messages.`}
+          color="orange"
+          client:load
+        />
+      )
+    }
+    {
+      ubiquitousLanguageList && hasUbiquitousLanguage && shouldRenderSideBarSection('ubiquitousLanguage') && (
         <PillListFlat
           title={`Ubiquitous Language Dictionary (${ubiquitousLanguageDictionary?.length})`}
           pills={ubiquitousLanguageList}
@@ -173,7 +193,7 @@ const ownersList = filteredOwners.map((o) => ({
       )
     }
     {
-      entities.length > 0 && (
+      entities.length > 0 && shouldRenderSideBarSection('entities') && (
         <PillListFlat
           title={`Entities (${entities.length})`}
           pills={entityList}
@@ -183,18 +203,26 @@ const ownersList = filteredOwners.map((o) => ({
         />
       )
     }
-    {domain.data.versions && <VersionList versions={domain.data.versions} collectionItem={domain} />}
     {
-      domain.data.repository && (
+      domain.data.versions && shouldRenderSideBarSection('versions') && (
+        <VersionList versions={domain.data.versions} collectionItem={domain} />
+      )
+    }
+    {
+      domain.data.repository && shouldRenderSideBarSection('repository') && (
         <RepositoryList repository={domain.data.repository?.url} language={domain.data.repository?.language} />
       )
     }
-    <OwnersList
-      title={`Owners (${ownersList.length})`}
-      owners={ownersList}
-      emptyMessage={`This domain does not have any documented owners.`}
-      client:load
-    />
+    {
+      shouldRenderSideBarSection('owners') && (
+        <OwnersList
+          title={`Owners (${ownersList.length})`}
+          owners={ownersList}
+          emptyMessage={`This domain does not have any documented owners.`}
+          client:load
+        />
+      )
+    }
 
     <div class="space-y-2">
       <a
@@ -205,7 +233,7 @@ const ownersList = filteredOwners.map((o) => ({
         <span class="block">View in visualiser</span>
       </a>
       {
-        isChangelogEnabled() && (
+        isChangelogEnabled() && shouldRenderSideBarSection('changelog') && (
           <a
             href={buildUrl(`/docs/${domain.collection}/${domain.data.id}/${domain.data.latestVersion}/changelog`)}
             class="flex items-center space-x-2 justify-center text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"

package/eventcatalog/src/components/SideBars/EntitySideBar.astro

@@ -48,12 +48,20 @@ const domainsList = domains.map((p) => ({
   tag: `v${p.data.version}`,
   href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
 }));
+
+const shouldRenderSideBarSection = (section: string) => {
+  if (!entity.data.detailsPanel) {
+    return true;
+  }
+  // @ts-ignore
+  return entity.data.detailsPanel[section]?.visible ?? true;
+};
 ---
 
 <aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto py-4">
   <div class="">
     {
-      (
+      shouldRenderSideBarSection('domains') && (
         <PillListFlat
           title={`Domains (${domainsList.length})`}
           pills={domainsList}
@@ -64,7 +72,7 @@ const domainsList = domains.map((p) => ({
       )
     }
     {
-      servicesList.length > 0 && (
+      servicesList.length > 0 && shouldRenderSideBarSection('services') && (
         <PillListFlat
           title={`Services (${servicesList.length})`}
           pills={servicesList}
@@ -74,16 +82,24 @@ const domainsList = domains.map((p) => ({
         />
       )
     }
-    {entity.data.versions && <VersionList versions={entity.data.versions} collectionItem={entity} />}
-    <OwnersList
-      title={`Owners (${filteredOwners.length})`}
-      owners={ownersList}
-      emptyMessage={`This entity does not have any documented owners.`}
-      client:load
-    />
+    {
+      entity.data.versions && shouldRenderSideBarSection('versions') && (
+        <VersionList versions={entity.data.versions} collectionItem={entity} />
+      )
+    }
+    {
+      filteredOwners.length > 0 && shouldRenderSideBarSection('owners') && (
+        <OwnersList
+          title={`Owners (${filteredOwners.length})`}
+          owners={ownersList}
+          emptyMessage={`This entity does not have any documented owners.`}
+          client:load
+        />
+      )
+    }
 
     {
-      isChangelogEnabled() && (
+      isChangelogEnabled() && shouldRenderSideBarSection('changelog') && (
         <div class="space-y-2">
           <a
             href={buildUrl(`/docs/${entity.collection}/${entity.data.id}/${entity.data.latestVersion}/changelog`)}

package/eventcatalog/src/components/SideBars/FlowSideBar.astro

@@ -29,6 +29,14 @@ const ownersList = filteredOwners.map((o) => ({
 }));
 
 const isRSSEnabled = config.rss?.enabled;
+
+const shouldRenderSideBarSection = (section: string) => {
+  if (!flow.data.detailsPanel) {
+    return true;
+  }
+  // @ts-ignore
+  return flow.data.detailsPanel[section]?.visible ?? true;
+};
 ---
 
 <aside class="sticky top-28 left-0 h-full overflow-y-auto pr-6 py-4">
@@ -38,14 +46,22 @@ const isRSSEnabled = config.rss?.enabled;
         .filter((section) => section.items.length > 0 && section.sidebar)
         .map((section) => <CustomSideBarSectionList section={section} />)
     }
-    {flow.data.versions && <VersionList versions={flow.data.versions} collectionItem={flow} />}
+    {
+      flow.data.versions && shouldRenderSideBarSection('versions') && (
+        <VersionList versions={flow.data.versions} collectionItem={flow} />
+      )
+    }
 
-    <OwnersList
-      title={`Owners (${ownersList.length})`}
-      owners={ownersList}
-      emptyMessage={`This flow does not have any documented owners.`}
-      client:load
-    />
+    {
+      shouldRenderSideBarSection('owners') && (
+        <OwnersList
+          title={`Owners (${ownersList.length})`}
+          owners={ownersList}
+          emptyMessage={`This flow does not have any documented owners.`}
+          client:load
+        />
+      )
+    }
 
     {
       isRSSEnabled && (
@@ -72,7 +88,7 @@ const isRSSEnabled = config.rss?.enabled;
         <span class="block">View in visualiser</span>
       </a>
       {
-        isChangelogEnabled() && (
+        isChangelogEnabled() && shouldRenderSideBarSection('changelog') && (
           <a
             href={buildUrl(`/docs/${flow.collection}/${flow.data.id}/${flow.data.latestVersion}/changelog`)}
             class="flex items-center space-x-2 justify-center text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"

package/eventcatalog/src/components/SideBars/MessageSideBar.astro

@@ -98,6 +98,14 @@ const publicPath = message?.catalog?.publicPath;
 
 const schemaFilePath = message?.data?.schemaPath;
 const schemaURL = path.join(publicPath, schemaFilePath || '');
+
+const shouldRenderSideBarSection = (section: string) => {
+  if (!message.data.detailsPanel) {
+    return true;
+  }
+  // @ts-ignore
+  return message.data.detailsPanel[section]?.visible ?? true;
+};
 ---
 
 <aside class="sticky top-28 left-0 space-y-8 h-full overflow-y-auto py-4">
@@ -108,7 +116,7 @@ const schemaURL = path.join(publicPath, schemaFilePath || '');
         .map((section) => <CustomSideBarSectionList section={section} />)
     }
     {
-      producerList.length > 0 && (
+      producerList.length > 0 && shouldRenderSideBarSection('producers') && (
         <PillListFlat
           color="pink"
           title={`Producers (${producerList.length})`}
@@ -119,7 +127,7 @@ const schemaURL = path.join(publicPath, schemaFilePath || '');
       )
     }
     {
-      consumerList.length > 0 && (
+      consumerList.length > 0 && shouldRenderSideBarSection('consumers') && (
         <PillListFlat
           color="pink"
           title={`Consumers (${consumerList.length})`}
@@ -130,13 +138,13 @@ const schemaURL = path.join(publicPath, schemaFilePath || '');
       )
     }
     {
-      channelList.length > 0 && (
+      channelList.length > 0 && shouldRenderSideBarSection('channels') && (
         <PillListFlat color="pink" title={`Channels (${channelList.length})`} pills={channelList} client:load />
       )
     }
 
     {
-      message.data.versions && (
+      message.data.versions && shouldRenderSideBarSection('versions') && (
         <VersionList
           title={`Versions (${message.data.versions?.length})`}
           versions={message.data.versions}
@@ -145,15 +153,19 @@ const schemaURL = path.join(publicPath, schemaFilePath || '');
       )
     }
 
-    <OwnersList
-      title={`Owners (${ownersList.length})`}
-      owners={ownersList}
-      emptyMessage={`This ${type} does not have any documented owners.`}
-      client:load
-    />
+    {
+      ownersList.length > 0 && shouldRenderSideBarSection('owners') && (
+        <OwnersList
+          title={`Owners (${ownersList.length})`}
+          owners={ownersList}
+          emptyMessage={`This ${type} does not have any documented owners.`}
+          client:load
+        />
+      )
+    }
 
     {
-      message.data.repository && (
+      message.data.repository && shouldRenderSideBarSection('repository') && (
         <RepositoryList repository={message.data.repository?.url} language={message.data.repository?.language} />
       )
     }
@@ -196,7 +208,7 @@ const schemaURL = path.join(publicPath, schemaFilePath || '');
       </a>
 
       {
-        isChangelogEnabled() && (
+        isChangelogEnabled() && shouldRenderSideBarSection('changelog') && (
           <a
             href={buildUrl(`/docs/${message.collection}/${message.data.id}/${message.data.latestVersion}/changelog`)}
             class="flex items-center space-x-2 justify-center text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"

package/eventcatalog/src/components/SideBars/ServiceSideBar.astro

@@ -87,6 +87,14 @@ const isRSSEnabled = config.rss?.enabled;
 const publicPath = service?.catalog?.publicPath;
 const schemaFilePath = service?.data?.schemaPath;
 const schemaURL = join(publicPath, schemaFilePath || '');
+
+const shouldRenderSideBarSection = (section: string) => {
+  if (!service.data.detailsPanel) {
+    return true;
+  }
+  // @ts-ignore
+  return service.data.detailsPanel[section]?.visible ?? true;
+};
 ---
 
 <aside class="sticky top-28 left-0 h-full overflow-y-auto pr-6 py-4">
@@ -97,7 +105,7 @@ const schemaURL = join(publicPath, schemaFilePath || '');
         .map((section) => <CustomSideBarSectionList section={section} />)
     }
     {
-      domainList.length > 0 && (
+      domainList.length > 0 && shouldRenderSideBarSection('domains') && (
         <PillListFlat
           title={`Domains (${domainList.length})`}
           pills={domainList}
@@ -107,26 +115,40 @@ const schemaURL = join(publicPath, schemaFilePath || '');
         />
       )
     }
-    <PillListFlat
-      title={`Receives Messages (${receivesList.length})`}
-      pills={receivesList}
-      emptyMessage={`This service does not receive any messages.`}
-      color="orange"
-      client:load
-    />
-    <PillListFlat
-      title={`Sends Messages (${sendsList.length})`}
-      pills={sendsList}
-      emptyMessage={`This service does not send any messages.`}
-      color="orange"
-      client:load
-    />
-    {service.data.versions && <VersionList versions={service.data.versions} collectionItem={service} />}
-
-    {service.data.specifications && <SpecificationsList collectionItem={service} />}
+    {
+      shouldRenderSideBarSection('messages') && (
+        <>
+          <PillListFlat
+            title={`Receives Messages (${receivesList.length})`}
+            pills={receivesList}
+            emptyMessage={`This service does not receive any messages.`}
+            color="orange"
+            client:load
+          />
+          <PillListFlat
+            title={`Sends Messages (${sendsList.length})`}
+            pills={sendsList}
+            emptyMessage={`This service does not send any messages.`}
+            color="orange"
+            client:load
+          />
+        </>
+      )
+    }
+    {
+      service.data.versions && shouldRenderSideBarSection('versions') && (
+        <VersionList versions={service.data.versions} collectionItem={service} />
+      )
+    }
+
+    {
+      service.data.specifications && shouldRenderSideBarSection('specifications') && (
+        <SpecificationsList collectionItem={service} />
+      )
+    }
 
     {
-      entities.length > 0 && (
+      entities.length > 0 && shouldRenderSideBarSection('entities') && (
         <PillListFlat
           title={`Entities (${entities.length})`}
           pills={entityList}
@@ -137,15 +159,19 @@ const schemaURL = join(publicPath, schemaFilePath || '');
       )
     }
 
-    <OwnersList
-      title={`Owners (${ownersList.length})`}
-      owners={ownersList}
-      emptyMessage={`This service does not have any documented owners.`}
-      client:load
-    />
+    {
+      shouldRenderSideBarSection('owners') && (
+        <OwnersList
+          title={`Owners (${ownersList.length})`}
+          owners={ownersList}
+          emptyMessage={`This service does not have any documented owners.`}
+          client:load
+        />
+      )
+    }
 
     {
-      service.data.repository && (
+      service.data.repository && shouldRenderSideBarSection('repository') && (
         <RepositoryList repository={service.data.repository?.url} language={service.data.repository?.language} />
       )
     }
@@ -187,7 +213,7 @@ const schemaURL = join(publicPath, schemaFilePath || '');
         <span class="block">View in visualiser</span>
       </a>
       {
-        isChangelogEnabled() && (
+        isChangelogEnabled() && shouldRenderSideBarSection('changelog') && (
           <a
             href={buildUrl(`/docs/${service.collection}/${service.data.id}/${service.data.latestVersion}/changelog`)}
             class="flex items-center space-x-2 justify-center text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-primary"

package/eventcatalog/src/content.config.ts

@@ -31,6 +31,10 @@ const pointer = z.object({
   version: z.string().optional().default('latest'),
 });
 
+const detailPanelPropertySchema = z.object({
+  visible: z.boolean().optional(),
+});
+
 const channelPointer = z
   .object({
     parameters: z.record(z.string()).optional(),
@@ -175,6 +179,13 @@ const flows = defineCollection({
   }),
   schema: z
     .object({
+      detailsPanel: z
+        .object({
+          owners: detailPanelPropertySchema.optional(),
+          versions: detailPanelPropertySchema.optional(),
+          changelog: detailPanelPropertySchema.optional(),
+        })
+        .optional(),
       steps: z.array(
         z
           .object({
@@ -185,6 +196,7 @@ const flows = defineCollection({
             message: pointer.optional(),
             service: pointer.optional(),
             flow: pointer.optional(),
+
             actor: z
               .object({
                 name: z.string(),
@@ -233,6 +245,16 @@ const flows = defineCollection({
     .merge(baseSchema),
 });
 
+const messageDetailsPanelPropertySchema = z.object({
+  producers: detailPanelPropertySchema.optional(),
+  consumers: detailPanelPropertySchema.optional(),
+  channels: detailPanelPropertySchema.optional(),
+  versions: detailPanelPropertySchema.optional(),
+  repository: detailPanelPropertySchema.optional(),
+  owners: detailPanelPropertySchema.optional(),
+  changelog: detailPanelPropertySchema.optional(),
+});
+
 const events = defineCollection({
   loader: glob({
     pattern: ['**/events/*/index.(md|mdx)', '**/events/*/versioned/*/index.(md|mdx)'],
@@ -248,6 +270,7 @@ const events = defineCollection({
       channels: z.array(channelPointer).optional(),
       // Used by eventcatalog
       messageChannels: z.array(reference('channels')).optional(),
+      detailsPanel: messageDetailsPanelPropertySchema.optional(),
     })
     .merge(baseSchema),
 });
@@ -265,6 +288,7 @@ const commands = defineCollection({
       producers: z.array(reference('services')).optional(),
       consumers: z.array(reference('services')).optional(),
       channels: z.array(channelPointer).optional(),
+      detailsPanel: messageDetailsPanelPropertySchema.optional(),
       // Used by eventcatalog
       messageChannels: z.array(reference('channels')).optional(),
     })
@@ -284,6 +308,7 @@ const queries = defineCollection({
       producers: z.array(reference('services')).optional(),
       consumers: z.array(reference('services')).optional(),
       channels: z.array(channelPointer).optional(),
+      detailsPanel: messageDetailsPanelPropertySchema.optional(),
       // Used by eventcatalog
       messageChannels: z.array(reference('channels')).optional(),
     })
@@ -314,6 +339,18 @@ const services = defineCollection({
       sends: z.array(pointer).optional(),
       receives: z.array(pointer).optional(),
       entities: z.array(pointer).optional(),
+      detailsPanel: z
+        .object({
+          domains: detailPanelPropertySchema.optional(),
+          messages: detailPanelPropertySchema.optional(),
+          versions: detailPanelPropertySchema.optional(),
+          specifications: detailPanelPropertySchema.optional(),
+          entities: detailPanelPropertySchema.optional(),
+          repository: detailPanelPropertySchema.optional(),
+          owners: detailPanelPropertySchema.optional(),
+          changelog: detailPanelPropertySchema.optional(),
+        })
+        .optional(),
     })
     .merge(baseSchema),
 });
@@ -356,6 +393,20 @@ const domains = defineCollection({
       services: z.array(pointer).optional(),
       domains: z.array(pointer).optional(),
       entities: z.array(pointer).optional(),
+      detailsPanel: z
+        .object({
+          parentDomains: detailPanelPropertySchema.optional(),
+          subdomains: detailPanelPropertySchema.optional(),
+          services: detailPanelPropertySchema.optional(),
+          entities: detailPanelPropertySchema.optional(),
+          messages: detailPanelPropertySchema.optional(),
+          ubiquitousLanguage: detailPanelPropertySchema.optional(),
+          repository: detailPanelPropertySchema.optional(),
+          versions: detailPanelPropertySchema.optional(),
+          owners: detailPanelPropertySchema.optional(),
+          changelog: detailPanelPropertySchema.optional(),
+        })
+        .optional(),
     })
     .merge(baseSchema),
 });
@@ -383,6 +434,19 @@ const channels = defineCollection({
         )
         .optional(),
       messages: z.array(z.object({ collection: z.string(), name: z.string(), ...pointer.shape })).optional(),
+      detailsPanel: z
+        .object({
+          producers: detailPanelPropertySchema.optional(),
+          consumers: detailPanelPropertySchema.optional(),
+          messages: detailPanelPropertySchema.optional(),
+          protocols: detailPanelPropertySchema.optional(),
+          parameters: detailPanelPropertySchema.optional(),
+          versions: detailPanelPropertySchema.optional(),
+          repository: detailPanelPropertySchema.optional(),
+          owners: detailPanelPropertySchema.optional(),
+          changelog: detailPanelPropertySchema.optional(),
+        })
+        .optional(),
     })
     .merge(baseSchema),
 });
@@ -438,6 +502,16 @@ const entities = defineCollection({
         .optional(),
       services: z.array(reference('services')).optional(),
       domains: z.array(reference('domains')).optional(),
+      detailsPanel: z
+        .object({
+          domains: detailPanelPropertySchema.optional(),
+          services: detailPanelPropertySchema.optional(),
+          messages: detailPanelPropertySchema.optional(),
+          versions: detailPanelPropertySchema.optional(),
+          owners: detailPanelPropertySchema.optional(),
+          changelog: detailPanelPropertySchema.optional(),
+        })
+        .optional(),
     })
 
     .merge(baseSchema),

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

@@ -30,6 +30,7 @@ const {
       linkTo="visualiser"
       version={props.data.version}
       linksToVisualiser={false}
+      zoomOnScroll={true}
       href={{
         label: `Open documentation for ${props.data.name} v${props.data.version}`,
         url: buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}`),

package/package.json

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