feat: Topology view

Author: lhein

.gitignore

@@ -149,3 +149,4 @@ storybook-static
 .bob/notes
 .bob/skills
 .codex
+.claude/

packages/ui/src/components/Visualization/Canvas/Canvas.tsx

@@ -50,13 +50,15 @@ interface CanvasProps {
   entitiesCount: number;
   isVizNodesResolving?: boolean;
   contextToolbar?: ReactNode;
+  isTopologyView?: boolean;
 }
 
 export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = ({
   vizNodes,
   entitiesCount,
   isVizNodesResolving = false,
   contextToolbar,
+  isTopologyView = false,
 }) => {
   const settingsAdapter = useContext(SettingsContext);
   const settingsLayout = useMemo(
@@ -103,14 +105,21 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = ({
     const nodes: CanvasNode[] = [];
     const edges: CanvasEdge[] = [];
 
-    vizNodes.forEach((vizNode) => {
-      const { nodes: childNodes, edges: childEdges } = FlowService.getFlowDiagram(
-        vizNode.getId() ?? vizNode.id,
-        vizNode,
-      );
+    if (isTopologyView) {
+      const { nodes: childNodes, edges: childEdges } = FlowService.getTopologyFlowDiagram(vizNodes);
       nodes.push(...childNodes);
       edges.push(...childEdges);
-    });
+    } else {
+      vizNodes.forEach((vizNode) => {
+        const { nodes: childNodes, edges: childEdges } = FlowService.getFlowDiagram(
+          vizNode.getId() ?? vizNode.id,
+          vizNode,
+          { removePlaceholder: isTopologyView ? true : false, isTopologyView },
+        );
+        nodes.push(...childNodes);
+        edges.push(...childEdges);
+      });
+    }
 
     const model: Model = {
       nodes,

packages/ui/src/components/Visualization/Canvas/controller.service.test.ts

@@ -2,7 +2,9 @@ import { DagreGroupsLayout, ModelKind, Visualization } from '@patternfly/react-t
 
 import { CustomGroupWithSelection } from '../Custom';
 import { CustomEdge } from '../Custom/Edge/CustomEdge';
+import TopologyEdge from '../Custom/Edge/TopologyEdge';
 import { PlaceholderNode } from '../Custom/Node/PlaceholderNode';
+import { TopologyNode } from '../Custom/Node/TopologyNode';
 import { CanvasDefaults } from './canvas.defaults';
 import { LayoutType } from './canvas.models';
 import { ControllerService } from './controller.service';
@@ -75,6 +77,18 @@ describe('ControllerService', () => {
       expect(component).toBe(CustomEdge);
     });
 
+    it('should return TopologyNode for topology-node type', () => {
+      const component = ControllerService.baselineComponentFactory(ModelKind.node, 'topology-node');
+
+      expect(component).toBe(TopologyNode);
+    });
+
+    it('should return TopologyEdge for topology-edge type', () => {
+      const component = ControllerService.baselineComponentFactory(ModelKind.edge, 'topology-edge');
+
+      expect(component).toBe(TopologyEdge);
+    });
+
     it('should return undefined for an unknown type', () => {
       const component = ControllerService.baselineComponentFactory({} as ModelKind, 'unknown');
 

packages/ui/src/components/Visualization/Canvas/controller.service.ts

@@ -12,8 +12,10 @@ import {
 
 import { CustomGroupWithSelection, CustomNodeWithSelection, NoBendpointsEdge } from '../Custom';
 import { CustomEdge } from '../Custom/Edge/CustomEdge';
+import TopologyEdge from '../Custom/Edge/TopologyEdge';
 import { CustomGraphWithSelection } from '../Custom/Graph/CustomGraph';
 import { PlaceholderNode } from '../Custom/Node/PlaceholderNode';
+import { TopologyNode } from '../Custom/Node/TopologyNode';
 import { LayoutType } from './canvas.models';
 
 export class ControllerService {
@@ -52,6 +54,10 @@ export class ControllerService {
         return CustomGroupWithSelection;
       case 'node-placeholder':
         return PlaceholderNode;
+      case 'topology-edge':
+        return TopologyEdge;
+      case 'topology-node':
+        return TopologyNode;
       default:
         switch (kind) {
           case ModelKind.graph:

packages/ui/src/components/Visualization/Canvas/flow.service.ts

@@ -8,11 +8,45 @@ export class FlowService {
   static nodes: CanvasNode[] = [];
   static edges: CanvasEdge[] = [];
   private static visitedNodes: string[] = [];
+  private static consumersByEndpoint: Map<string, string[]> = new Map();
+  private static outgoingByEntity: Map<string, string[]> = new Map();
+  private static PRODUCER_KEYS = ['to', 'toD', 'wireTap', 'enrich', 'pollEnrich'] as const;
+  private static IN_VM_ENDPOINT_PREFIXES = ['direct:', 'seda:', 'vm:', 'direct-vm:'];
+
+  private static normalizeEndpoint = (uri: string | undefined): string | undefined => {
+    if (!uri) {
+      return undefined;
+    }
+    const stripped = uri.split('?')[0];
+    return this.IN_VM_ENDPOINT_PREFIXES.some((p) => stripped.startsWith(p)) ? stripped : undefined;
+  };
+
+  private static getUri = (value: unknown): string | undefined => {
+    if (typeof value === 'string') {
+      return value;
+    }
+    if (value && typeof value === 'object') {
+      const obj = value as { uri?: unknown; parameters?: { name?: unknown } };
+      const rawUri = obj.uri;
+      if (typeof rawUri === 'string') {
+        // Camel allows `uri: direct` + `parameters.name: foo` as an equivalent of `uri: direct:foo`.
+        // Compose the canonical form here so endpoint matching works for both spellings.
+        if (!rawUri.includes(':')) {
+          const name = obj.parameters?.name;
+          if (typeof name === 'string') {
+            return `${rawUri}:${name}`;
+          }
+        }
+        return rawUri;
+      }
+    }
+    return undefined;
+  };
 
   static getFlowDiagram(
     scope: string,
     vizNode: IVisualizationNode,
-    options: { removePlaceholder?: boolean } = {},
+    options: { removePlaceholder?: boolean; isTopologyView?: boolean } = {},
   ): CanvasNodesAndEdges {
     this.nodes = [];
     this.edges = [];
@@ -37,7 +71,7 @@ export class FlowService {
   /** Method for iterating over all the IVisualizationNode and its children using a depth-first algorithm */
   private static appendNodesAndEdges(
     vizNodeParam: IVisualizationNode,
-    options: { removePlaceholder?: boolean } = {},
+    options: { removePlaceholder?: boolean; isTopologyView?: boolean } = {},
   ): void {
     const removePlaceholder = options.removePlaceholder ?? false;
     if (this.visitedNodes.includes(vizNodeParam.id) || (removePlaceholder && vizNodeParam.data.isPlaceholder)) {
@@ -77,6 +111,81 @@ export class FlowService {
     this.edges.push(...this.getEdgesFromVizNode(vizNodeParam, options));
   }
 
+  private static appendTopologyNodesAndEdges(
+    vizNodeParam: IVisualizationNode,
+    options: { isTopologyView?: boolean } = {},
+  ): void {
+    let node: CanvasNode;
+
+    let children = vizNodeParam.getChildren() ?? [];
+    children = children.filter((child) => !child.data.isPlaceholder);
+    const hasRealChildren = children.length > 0;
+
+    if (vizNodeParam.data.isGroup && vizNodeParam.getParentNode() === undefined) {
+      node = this.getTopologyNode(vizNodeParam);
+      /** Add node */
+      this.nodes.push(node);
+      this.visitedNodes.push(node.id);
+    }
+
+    if (vizNodeParam.data.isGroup && hasRealChildren) {
+      children.forEach((child) => {
+        this.appendTopologyNodesAndEdges(child, options);
+      });
+    } else {
+      const processorName = vizNodeParam.data.processorName;
+      const def = vizNodeParam.getNodeDefinition();
+      if (processorName === 'from') {
+        const endpoint = this.normalizeEndpoint(this.getUri(def));
+        if (endpoint) this.consumersByEndpoint.set(endpoint, [vizNodeParam.getId() ?? vizNodeParam.id]);
+      }
+      if (this.PRODUCER_KEYS.includes(processorName as (typeof this.PRODUCER_KEYS)[number])) {
+        const rawUri = this.getUri(def);
+        const endpoint = this.normalizeEndpoint(rawUri);
+        if (endpoint) {
+          const producerId = vizNodeParam.getId() ?? vizNodeParam.id;
+          const existingEndpoints = this.outgoingByEntity.get(producerId) ?? [];
+          this.outgoingByEntity.set(producerId, [...existingEndpoints, endpoint]);
+        }
+      }
+    }
+  }
+
+  static getTopologyFlowDiagram(vizNodes: IVisualizationNode[]): CanvasNodesAndEdges {
+    this.nodes = [];
+    this.edges = [];
+    this.visitedNodes = [];
+
+    vizNodes.forEach((vizNode) => {
+      this.appendTopologyNodesAndEdges(vizNode, { isTopologyView: true });
+    });
+
+    this.outgoingByEntity.forEach((endpoints, producerId) => {
+      const producerTop = this.nodes.map((node) => node.id.split('|')[0]).includes(producerId);
+      if (!producerTop) {
+        return;
+      }
+      endpoints.forEach((endpoint) => {
+        const consumerIds = this.consumersByEndpoint.get(endpoint);
+
+        // The endpoint is consumed somewhere in this file (possibly only by the producer itself).
+        // Don't treat it as external; emit edges to any non-self consumer.
+        if (consumerIds && consumerIds.length > 0) {
+          consumerIds.forEach((consumerId) => {
+            if (consumerId === producerId) {
+              return;
+            }
+            if (this.nodes.map((node) => node.id.split('|')[0]).includes(consumerId)) {
+              this.edges.push(this.getEdge(producerId, consumerId, true));
+            }
+          });
+        }
+      });
+    });
+
+    return { nodes: this.nodes, edges: this.edges };
+  }
+
   private static getCanvasNode(vizNodeParam: IVisualizationNode): CanvasNode {
     /** Join the parent if exist to form a group */
     const parentNode =
@@ -158,10 +267,22 @@ export class FlowService {
     };
   }
 
-  private static getEdge(source: string, target: string): CanvasEdge {
+  private static getTopologyNode(vizNodeParam: IVisualizationNode): CanvasNode {
+    return {
+      id: vizNodeParam.getId() ?? vizNodeParam.id,
+      type: 'topology-node',
+      label: vizNodeParam.getId(),
+      data: { vizNode: vizNodeParam },
+      width: CanvasDefaults.DEFAULT_NODE_WIDTH,
+      height: CanvasDefaults.DEFAULT_NODE_HEIGHT,
+      shape: CanvasDefaults.DEFAULT_NODE_SHAPE,
+    };
+  }
+
+  private static getEdge(source: string, target: string, isTopologyEdge?: boolean): CanvasEdge {
     return {
       id: `${source} >>> ${target}`,
-      type: 'edge',
+      type: isTopologyEdge ? 'topology-edge' : 'edge',
       source,
       target,
       edgeStyle: EdgeStyle.solid,

packages/ui/src/components/Visualization/Custom/Edge/TopologyEdge.tsx

@@ -0,0 +1,27 @@
+import { EdgeTerminalType, GraphElement, isEdge, TaskEdge } from '@patternfly/react-topology';
+import { observer } from 'mobx-react';
+import { FunctionComponent } from 'react';
+
+/** Spacing for TaskEdge integral bends — aligned with Dagre nodesep/ranksep in topology layout. */
+const TOPOLOGY_EDGE_NODE_SEPARATION = 20;
+
+interface TopologyEdgeProps {
+  element: GraphElement;
+}
+
+const TopologyEdge: FunctionComponent<TopologyEdgeProps> = ({ element, ...props }) => {
+  if (!isEdge(element)) {
+    throw new Error('TopologyEdge must be used only on Edge elements');
+  }
+
+  return (
+    <TaskEdge
+      element={element}
+      endTerminalType={EdgeTerminalType.directional}
+      nodeSeparation={TOPOLOGY_EDGE_NODE_SEPARATION}
+      {...props}
+    />
+  );
+};
+
+export default observer(TopologyEdge);

packages/ui/src/components/Visualization/Custom/Node/CustomNode.tsx

@@ -1,8 +1,6 @@
 import './CustomNode.scss';
 
 import { isDefined } from '@kaoto/forms';
-import { Icon } from '@patternfly/react-core';
-import { ExclamationCircleIcon } from '@patternfly/react-icons';
 import {
   AnchorEnd,
   DEFAULT_LAYER,
@@ -28,7 +26,6 @@ import {
   withContextMenu,
   withSelection,
 } from '@patternfly/react-topology';
-import clsx from 'clsx';
 import { FunctionComponent, useContext, useMemo, useRef } from 'react';
 
 import { CatalogModalContext } from '../../../../dynamic-catalog/catalog-modal.provider';
@@ -45,6 +42,7 @@ import { NodeContextMenuFn } from '../ContextMenu/NodeContextMenu';
 import { getDropTargetContainerClassNames, GROUP_DRAG_TYPE, NODE_DRAG_TYPE } from '../customComponentUtils';
 import { TargetAnchor } from '../target-anchor';
 import { CustomNodeContainer } from './CustomNodeContainer';
+import { CustomNodeLabel } from './CustomNodeLabels';
 import {
   checkNodeDropCompatibility,
   getNodeDragAndDropDirection,
@@ -60,50 +58,6 @@ interface CustomNodeProps extends DefaultNodeProps {
   onCollapseToggle?: () => void;
 }
 
-interface CustomNodeLabelProps {
-  label: string;
-  doesHaveWarnings?: boolean;
-  validationText?: string;
-  x?: number;
-  y?: number;
-  transform?: string;
-  width?: number;
-  height?: number;
-  className?: string;
-}
-
-const CustomNodeLabel: FunctionComponent<CustomNodeLabelProps> = ({
-  label,
-  doesHaveWarnings = false,
-  validationText,
-  x,
-  y,
-  transform,
-  width = CanvasDefaults.DEFAULT_LABEL_WIDTH,
-  height = CanvasDefaults.DEFAULT_LABEL_HEIGHT,
-  className = 'custom-node__label',
-}) => (
-  <foreignObject
-    width={width}
-    height={height}
-    className={className}
-    {...(transform ? { transform } : { x: x!, y: y! })}
-  >
-    <div
-      className={clsx('custom-node__label__text', {
-        'custom-node__label__text__error': doesHaveWarnings,
-      })}
-    >
-      {doesHaveWarnings && (
-        <Icon status="danger" title={validationText} data-warning={doesHaveWarnings}>
-          <ExclamationCircleIcon />
-        </Icon>
-      )}
-      <span title={label}>{label}</span>
-    </div>
-  </foreignObject>
-);
-
 function getShouldShowToolbar(
   trigger: NodeToolbarTrigger | undefined,
   isGHover: boolean,