feat: Topology view

Author: lhein

.gitignore

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

packages/ui-tests/stories/canvas/Canvas.stories.tsx

@@ -1,5 +1,6 @@
 import {
   BaseVisualEntity,
+  buildDesignerCanvasModel,
   CamelRouteVisualEntity,
   Canvas,
   CatalogLoaderProvider,
@@ -65,8 +66,18 @@ const CanvasFromEntity: StoryFn<CanvasStoryArgs> = ({ entity }) => {
   const entities = useMemo(() => [entity], [entity]);
   const visibleFlows = useMemo(() => ({ [entity.id]: true }), [entity.id]);
   const { vizNodes, isResolving } = useVisibleVizNodes(entities, visibleFlows);
+  const { nodes, edges } = useMemo(() => buildDesignerCanvasModel(vizNodes), [vizNodes]);
 
-  return <Canvas vizNodes={vizNodes} entitiesCount={1} isVizNodesResolving={isResolving} />;
+  return (
+    <Canvas
+      nodes={nodes}
+      edges={edges}
+      entitiesCount={1}
+      visibleEntitiesCount={vizNodes.length}
+      isModelResolving={isResolving}
+      applyCollapseOnUpdate
+    />
+  );
 };
 
 const ContextDecorator = (Story: StoryFn) => {

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

@@ -15,6 +15,7 @@ import { VisibleFlowsContextResult } from '../../../providers/visible-flows.prov
 import { TestProvidersWrapper, TestRuntimeProviderWrapper } from '../../../stubs';
 import { camelRouteJson } from '../../../stubs/camel-route';
 import { kameletJson } from '../../../stubs/kamelet-route';
+import { buildDesignerCanvasModel } from '../designer-canvas-model';
 import { Canvas } from './Canvas';
 import { LayoutType } from './canvas.models';
 import { ControllerService } from './controller.service';
@@ -25,6 +26,17 @@ vi.mock('./apply-collapse-state', () => ({
 
 import { applyCollapseState } from './apply-collapse-state';
 
+function canvasPropsFromVizNodes(vizNodes: IVisualizationNode[], entitiesCount: number) {
+  const { nodes, edges } = buildDesignerCanvasModel(vizNodes);
+  return {
+    nodes,
+    edges,
+    entitiesCount,
+    visibleEntitiesCount: vizNodes.length,
+    applyCollapseOnUpdate: true,
+  };
+}
+
 describe('Canvas', () => {
   const entity = new CamelRouteVisualEntity(camelRouteJson);
 
@@ -47,7 +59,7 @@ describe('Canvas', () => {
       result = render(
         <Provider>
           <VisualizationProvider controller={ControllerService.createController()}>
-            <Canvas vizNodes={[vizNode]} entitiesCount={1} />
+            <Canvas {...canvasPropsFromVizNodes([vizNode], 1)} />
           </VisualizationProvider>
         </Provider>,
       );
@@ -74,7 +86,7 @@ describe('Canvas', () => {
       render(
         <Provider>
           <VisualizationProvider controller={controller}>
-            <Canvas vizNodes={[vizNode]} entitiesCount={1} />
+            <Canvas {...canvasPropsFromVizNodes([vizNode], 1)} />
           </VisualizationProvider>
         </Provider>,
       );
@@ -114,7 +126,7 @@ describe('Canvas', () => {
       setVizNodesState = setVizNodes;
       return (
         <VisualizationProvider controller={controller}>
-          <Canvas vizNodes={vizNodes} entitiesCount={1} />
+          <Canvas {...canvasPropsFromVizNodes(vizNodes, 1)} />
         </VisualizationProvider>
       );
     };
@@ -160,7 +172,7 @@ describe('Canvas', () => {
         <ActionConfirmationModalContextProvider>
           <Provider>
             <VisualizationProvider controller={ControllerService.createController()}>
-              <Canvas vizNodes={[vizNode]} entitiesCount={1} />
+              <Canvas {...canvasPropsFromVizNodes([vizNode], 1)} />
             </VisualizationProvider>
           </Provider>
         </ActionConfirmationModalContextProvider>,
@@ -220,7 +232,7 @@ describe('Canvas', () => {
         <ActionConfirmationModalContextProvider>
           <Provider>
             <VisualizationProvider controller={ControllerService.createController()}>
-              <Canvas vizNodes={[vizNode]} entitiesCount={1} />
+              <Canvas {...canvasPropsFromVizNodes([vizNode], 1)} />
             </VisualizationProvider>
           </Provider>
         </ActionConfirmationModalContextProvider>,
@@ -273,7 +285,7 @@ describe('Canvas', () => {
           <CatalogModalContext.Provider value={{ getNewComponent: vi.fn(), checkCompatibility: vi.fn() }}>
             <Provider>
               <VisualizationProvider controller={ControllerService.createController()}>
-                <Canvas vizNodes={[vizNode]} entitiesCount={1} />
+                <Canvas {...canvasPropsFromVizNodes([vizNode], 1)} />
               </VisualizationProvider>
             </Provider>
           </CatalogModalContext.Provider>,
@@ -300,7 +312,7 @@ describe('Canvas', () => {
         result = render(
           <Provider>
             <VisualizationProvider controller={ControllerService.createController()}>
-              <Canvas vizNodes={[vizNode]} entitiesCount={1} />
+              <Canvas {...canvasPropsFromVizNodes([vizNode], 1)} />
             </VisualizationProvider>
           </Provider>,
         );
@@ -331,7 +343,7 @@ describe('Canvas', () => {
           <RuntimeProvider>
             <Provider>
               <VisualizationProvider controller={ControllerService.createController()}>
-                <Canvas vizNodes={[]} entitiesCount={0} />
+                <Canvas nodes={[]} edges={[]} entitiesCount={0} visibleEntitiesCount={0} />
               </VisualizationProvider>
             </Provider>
           </RuntimeProvider>,
@@ -358,7 +370,7 @@ describe('Canvas', () => {
           <RuntimeProvider>
             <Provider>
               <VisualizationProvider controller={ControllerService.createController()}>
-                <Canvas vizNodes={[]} entitiesCount={1} />
+                <Canvas nodes={[]} edges={[]} entitiesCount={1} visibleEntitiesCount={0} />
               </VisualizationProvider>
             </Provider>
           </RuntimeProvider>,
@@ -384,7 +396,7 @@ describe('Canvas', () => {
           <RuntimeProvider>
             <Provider>
               <VisualizationProvider controller={ControllerService.createController()}>
-                <Canvas vizNodes={[]} entitiesCount={1} isVizNodesResolving />
+                <Canvas nodes={[]} edges={[]} entitiesCount={1} visibleEntitiesCount={0} isModelResolving />
               </VisualizationProvider>
             </Provider>
           </RuntimeProvider>,
@@ -446,7 +458,7 @@ describe('Canvas', () => {
             <SettingsProvider adapter={settingsAdapter}>
               <Provider>
                 <VisualizationProvider controller={controller}>
-                  <Canvas vizNodes={[vizNode]} entitiesCount={1} />
+                  <Canvas {...canvasPropsFromVizNodes([vizNode], 1)} />
                 </VisualizationProvider>
               </Provider>
             </SettingsProvider>,
@@ -489,7 +501,7 @@ describe('Canvas', () => {
           <SettingsProvider adapter={settingsAdapter}>
             <Provider>
               <VisualizationProvider controller={ControllerService.createController()}>
-                <Canvas vizNodes={[vizNode]} entitiesCount={1} />
+                <Canvas {...canvasPropsFromVizNodes([vizNode], 1)} />
               </VisualizationProvider>
             </Provider>
           </SettingsProvider>,
@@ -531,7 +543,7 @@ describe('Canvas', () => {
           <SettingsProvider adapter={settingsAdapter}>
             <Provider>
               <VisualizationProvider controller={ControllerService.createController()}>
-                <Canvas vizNodes={[vizNode]} entitiesCount={1} />
+                <Canvas {...canvasPropsFromVizNodes([vizNode], 1)} />
               </VisualizationProvider>
             </Provider>
           </SettingsProvider>,
@@ -571,7 +583,7 @@ describe('Canvas', () => {
             <SettingsProvider adapter={settingsAdapter}>
               <Provider>
                 <VisualizationProvider controller={ControllerService.createController()}>
-                  <Canvas vizNodes={[vizNode]} entitiesCount={1} />
+                  <Canvas {...canvasPropsFromVizNodes([vizNode], 1)} />
                 </VisualizationProvider>
               </Provider>
             </SettingsProvider>,

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

@@ -32,7 +32,6 @@ import { useLocalStorage } from '../../../hooks';
 import { usePrevious } from '../../../hooks/previous.hook';
 import { LocalStorageKeys } from '../../../models';
 import { CanvasLayoutDirection } from '../../../models/settings/settings.model';
-import { IVisualizationNode } from '../../../models/visualization/base-visual-entity';
 import { SettingsContext } from '../../../providers/settings.provider';
 import { getInitialLayout } from '../../../utils/get-initial-layout';
 import { HorizontalLayoutIcon } from '../../Icons/HorizontalLayout';
@@ -43,20 +42,25 @@ import { applyCollapseState } from './apply-collapse-state';
 import { CanvasDefaults } from './canvas.defaults';
 import { CanvasEdge, CanvasNode, LayoutType } from './canvas.models';
 import { CanvasSideBar } from './CanvasSideBar';
-import { FlowService } from './flow.service';
 
 interface CanvasProps {
-  vizNodes: IVisualizationNode[];
+  nodes: CanvasNode[];
+  edges: CanvasEdge[];
   entitiesCount: number;
-  isVizNodesResolving?: boolean;
+  visibleEntitiesCount: number;
+  isModelResolving?: boolean;
   contextToolbar?: ReactNode;
+  applyCollapseOnUpdate?: boolean;
 }
 
 export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = ({
-  vizNodes,
+  nodes,
+  edges,
   entitiesCount,
-  isVizNodesResolving = false,
+  visibleEntitiesCount,
+  isModelResolving = false,
   contextToolbar,
+  applyCollapseOnUpdate = false,
 }) => {
   const settingsAdapter = useContext(SettingsContext);
   const settingsLayout = useMemo(
@@ -80,9 +84,9 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = ({
   const controller = useVisualizationController();
   const shouldShowEmptyState = useMemo(() => {
     const areNoFlows = entitiesCount === 0;
-    const areAllFlowsHidden = vizNodes.length === 0 && entitiesCount > 0;
+    const areAllFlowsHidden = visibleEntitiesCount === 0 && entitiesCount > 0;
     return areNoFlows || areAllFlowsHidden;
-  }, [entitiesCount, vizNodes.length]);
+  }, [entitiesCount, visibleEntitiesCount]);
 
   const wasEmptyStateVisible = usePrevious(shouldShowEmptyState);
   const clearSelection = useCallback(() => {
@@ -96,22 +100,10 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = ({
   useEffect(() => {
     clearSelection();
 
-    if (isVizNodesResolving) {
+    if (isModelResolving) {
       return;
     }
 
-    const nodes: CanvasNode[] = [];
-    const edges: CanvasEdge[] = [];
-
-    vizNodes.forEach((vizNode) => {
-      const { nodes: childNodes, edges: childEdges } = FlowService.getFlowDiagram(
-        vizNode.getId() ?? vizNode.id,
-        vizNode,
-      );
-      nodes.push(...childNodes);
-      edges.push(...childEdges);
-    });
-
     const model: Model = {
       nodes,
       edges,
@@ -133,10 +125,12 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = ({
     }
 
     controller.fromModel(model, true);
-    applyCollapseState(controller);
+    if (applyCollapseOnUpdate) {
+      applyCollapseState(controller);
+    }
     controller.getGraph().layout();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [controller, vizNodes, isVizNodesResolving]);
+  }, [controller, nodes, edges, isModelResolving, applyCollapseOnUpdate]);
 
   useEventListener<SelectionEventListener>(SELECTION_EVENT, setSelectedIds);
 
@@ -238,7 +232,7 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = ({
 
   const isSidebarOpen = useMemo(() => selectedIds.length > 0, [selectedIds.length]);
 
-  if (isVizNodesResolving) {
+  if (isModelResolving) {
     return null;
   }
 

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.test.ts

@@ -201,4 +201,37 @@ describe('FlowService', () => {
       expect(edges[1].target).toBe('test|route.from.steps.1.placeholder');
     });
   });
+
+  describe('getTopologyFlowDiagram', () => {
+    it('builds one topology node per route and cross-route edges for matching in-vm endpoints', async () => {
+      const producerRoute = await new CamelRouteVisualEntity({
+        route: {
+          id: 'route-producer',
+          from: {
+            uri: 'timer:tick',
+            steps: [{ to: { uri: 'direct', parameters: { name: 'shared' } } }],
+          },
+        },
+      }).toVizNode();
+      const consumerRoute = await new CamelRouteVisualEntity({
+        route: {
+          id: 'route-consumer',
+          from: { uri: 'direct', parameters: { name: 'shared' }, steps: [] },
+        },
+      }).toVizNode();
+
+      const { nodes, edges } = FlowService.getTopologyFlowDiagram([producerRoute, consumerRoute]);
+
+      expect(nodes).toHaveLength(2);
+      expect(nodes.map((node) => node.id).sort()).toEqual(['route-consumer', 'route-producer']);
+      expect(nodes.every((node) => node.type === 'topology-node')).toBe(true);
+
+      expect(edges).toHaveLength(1);
+      expect(edges[0]).toMatchObject({
+        type: 'topology-edge',
+        source: 'route-producer',
+        target: 'route-consumer',
+      });
+    });
+  });
 });