diff --git a/packages/ui/src/components/Visualization/Canvas/Canvas.scss b/packages/ui/src/components/Visualization/Canvas/Canvas.scss
index 0a14e61c2..424251c34 100644
--- a/packages/ui/src/components/Visualization/Canvas/Canvas.scss
+++ b/packages/ui/src/components/Visualization/Canvas/Canvas.scss
@@ -4,3 +4,13 @@
     border: none;
   }
 }
+
+.canvas-empty-state {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+
+.hidden {
+  visibility: hidden;
+}
diff --git a/packages/ui/src/components/Visualization/Canvas/Canvas.test.tsx b/packages/ui/src/components/Visualization/Canvas/Canvas.test.tsx
index 989d77519..09cd7a49c 100644
--- a/packages/ui/src/components/Visualization/Canvas/Canvas.test.tsx
+++ b/packages/ui/src/components/Visualization/Canvas/Canvas.test.tsx
@@ -1,31 +1,52 @@
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { VisualizationProvider } from '@patternfly/react-topology';
+import { act, fireEvent, render, RenderResult, screen, waitFor } from '@testing-library/react';
 import { CamelRouteResource, KameletResource } from '../../../models/camel';
 import { CamelRouteVisualEntity } from '../../../models/visualization/flows';
+import { ActionConfirmationModalContextProvider } from '../../../providers';
 import { CatalogModalContext } from '../../../providers/catalog-modal.provider';
 import { VisibleFLowsContextResult } from '../../../providers/visible-flows.provider';
 import { TestProvidersWrapper } from '../../../stubs';
 import { camelRouteJson } from '../../../stubs/camel-route';
 import { kameletJson } from '../../../stubs/kamelet-route';
 import { Canvas } from './Canvas';
-import { ActionConfirmationModalContextProvider } from '../../../providers';
+import { ControllerService } from './controller.service';
 
 describe('Canvas', () => {
   const entity = new CamelRouteVisualEntity(camelRouteJson);
   const entity2 = { ...entity, id: 'route-9999' } as CamelRouteVisualEntity;
 
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
   it('should render correctly', async () => {
     jest.spyOn(console, 'error').mockImplementation(() => {});
     const { Provider } = TestProvidersWrapper({
       visibleFlowsContext: { visibleFlows: { ['route-8888']: true } } as unknown as VisibleFLowsContextResult,
     });
-    const result = render(
-      <Provider>
-        <Canvas entities={[entity]} />
-      </Provider>,
-    );
 
-    await waitFor(async () => expect(result.container.querySelector('#fit-to-screen')).toBeInTheDocument());
-    expect(result.container).toMatchSnapshot();
+    let result: RenderResult | undefined;
+
+    await act(async () => {
+      result = render(
+        <Provider>
+          <VisualizationProvider controller={ControllerService.createController()}>
+            <Canvas entities={[entity]} />
+          </VisualizationProvider>
+        </Provider>,
+      );
+    });
+
+    await act(async () => {
+      await jest.runAllTimersAsync();
+    });
+
+    await waitFor(async () => expect(screen.getByText('Reset View')).toBeInTheDocument());
+    expect(result?.asFragment()).toMatchSnapshot();
   });
 
   it('should render correctly with more routes ', async () => {
@@ -34,14 +55,25 @@ describe('Canvas', () => {
         visibleFlows: { ['route-8888']: true, ['route-9999']: false },
       } as unknown as VisibleFLowsContextResult,
     });
-    const result = render(
-      <Provider>
-        <Canvas entities={[entity, entity2]} />
-      </Provider>,
-    );
 
-    await waitFor(async () => expect(result.container.querySelector('#fit-to-screen')).toBeInTheDocument());
-    expect(result.container).toMatchSnapshot();
+    let result: RenderResult | undefined;
+
+    await act(async () => {
+      result = render(
+        <Provider>
+          <VisualizationProvider controller={ControllerService.createController()}>
+            <Canvas entities={[entity, entity2]} />
+          </VisualizationProvider>
+        </Provider>,
+      );
+    });
+
+    await act(async () => {
+      await jest.runAllTimersAsync();
+    });
+
+    await waitFor(async () => expect(screen.getByText('Reset View')).toBeInTheDocument());
+    expect(result?.asFragment()).toMatchSnapshot();
   });
 
   it('should be able to delete the routes', async () => {
@@ -55,16 +87,31 @@ describe('Canvas', () => {
         visibleFlows: { ['route-8888']: true },
       } as unknown as VisibleFLowsContextResult,
     });
-    const wrapper = render(
-      <ActionConfirmationModalContextProvider>
-        <Provider>
-          <Canvas entities={routeEntities} />
-        </Provider>
-      </ActionConfirmationModalContextProvider>,
-    );
+
+    let result: RenderResult | undefined;
+
+    await act(async () => {
+      result = render(
+        <ActionConfirmationModalContextProvider>
+          <Provider>
+            <VisualizationProvider controller={ControllerService.createController()}>
+              <Canvas entities={routeEntities} />
+            </VisualizationProvider>
+          </Provider>
+        </ActionConfirmationModalContextProvider>,
+      );
+    });
+
+    await act(async () => {
+      await jest.runAllTimersAsync();
+    });
+
+    const route = result?.getByText('route-8888');
+    if (!route) {
+      fail('Route not found');
+    }
 
     // Right click anywhere on the container label
-    const route = wrapper.getByText('route-8888');
     await act(async () => {
       fireEvent.contextMenu(route);
     });
@@ -102,17 +149,30 @@ describe('Canvas', () => {
       } as unknown as VisibleFLowsContextResult,
     });
 
-    const wrapper = render(
-      <ActionConfirmationModalContextProvider>
-        <Provider>
-          <Canvas entities={kameletEntities} />
-        </Provider>
-      </ActionConfirmationModalContextProvider>,
-    );
+    let result: RenderResult | undefined;
+
+    await act(async () => {
+      result = render(
+        <ActionConfirmationModalContextProvider>
+          <Provider>
+            <VisualizationProvider controller={ControllerService.createController()}>
+              <Canvas entities={kameletEntities} />
+            </VisualizationProvider>
+          </Provider>
+        </ActionConfirmationModalContextProvider>,
+      );
+    });
+
+    await act(async () => {
+      await jest.runAllTimersAsync();
+    });
+
+    const kamelet = result?.getByText('user-source');
+    if (!kamelet) {
+      fail('Kamelet not found');
+    }
 
     // Right click anywhere on the container label
-    const kamelet = wrapper.getByText('user-source');
-    // const route = document.querySelectorAll('.pf-topology__group');
     await act(async () => {
       fireEvent.contextMenu(kamelet);
     });
@@ -137,22 +197,58 @@ describe('Canvas', () => {
     expect(removeSpy).toHaveBeenCalled();
   });
 
-  it('should render the Catalog button if `CatalogModalContext` is provided', async () => {
-    const { Provider } = TestProvidersWrapper({
-      visibleFlowsContext: { visibleFlows: { ['route-8888']: true } } as unknown as VisibleFLowsContextResult,
+  describe('Catalog button', () => {
+    it('should be present if `CatalogModalContext` is provided', async () => {
+      const { Provider } = TestProvidersWrapper({
+        visibleFlowsContext: { visibleFlows: { ['route-8888']: true } } as unknown as VisibleFLowsContextResult,
+      });
+
+      let result: RenderResult | undefined;
+
+      await act(async () => {
+        result = render(
+          <CatalogModalContext.Provider value={{ getNewComponent: jest.fn(), setIsModalOpen: jest.fn() }}>
+            <Provider>
+              <VisualizationProvider controller={ControllerService.createController()}>
+                <Canvas entities={[entity]} />
+              </VisualizationProvider>
+            </Provider>
+          </CatalogModalContext.Provider>,
+        );
+      });
+
+      await act(async () => {
+        await jest.runAllTimersAsync();
+      });
+
+      await waitFor(async () => expect(screen.getByText('Open Catalog')).toBeInTheDocument());
+      expect(result?.asFragment()).toMatchSnapshot();
+    });
+
+    it('should NOT be present if `CatalogModalContext` is NOT provided', async () => {
+      const { Provider } = TestProvidersWrapper({
+        visibleFlowsContext: { visibleFlows: { ['route-8888']: true } } as unknown as VisibleFLowsContextResult,
+      });
+
+      let result: RenderResult | undefined;
+
+      await act(async () => {
+        result = render(
+          <Provider>
+            <VisualizationProvider controller={ControllerService.createController()}>
+              <Canvas entities={[entity]} />
+            </VisualizationProvider>
+          </Provider>,
+        );
+      });
+
+      await act(async () => {
+        await jest.runAllTimersAsync();
+      });
+
+      await waitFor(async () => expect(screen.queryByText('Open Catalog')).not.toBeInTheDocument());
+      expect(result?.asFragment()).toMatchSnapshot();
     });
-    const result = render(
-      <CatalogModalContext.Provider value={{ getNewComponent: jest.fn(), setIsModalOpen: jest.fn() }}>
-        <Provider>
-          <Canvas entities={[entity]} />
-        </Provider>
-      </CatalogModalContext.Provider>,
-    );
-
-    await waitFor(async () =>
-      expect(result.container.querySelector('#topology-control-bar-catalog-button')).toBeInTheDocument(),
-    );
-    expect(result.container).toMatchSnapshot();
   });
 
   describe('Empty state', () => {
@@ -160,28 +256,49 @@ describe('Canvas', () => {
       const { Provider } = TestProvidersWrapper({
         visibleFlowsContext: { visibleFlows: {} } as unknown as VisibleFLowsContextResult,
       });
-      const result = render(
-        <Provider>
-          <Canvas entities={[]} />
-        </Provider>,
-      );
 
-      await waitFor(async () => expect(result.getByTestId('visualization-empty-state')).toBeInTheDocument());
-      expect(result.container).toMatchSnapshot();
+      let result: RenderResult | undefined;
+
+      await act(async () => {
+        result = render(
+          <Provider>
+            <VisualizationProvider controller={ControllerService.createController()}>
+              <Canvas entities={[]} />
+            </VisualizationProvider>
+          </Provider>,
+        );
+      });
+
+      await act(async () => {
+        await jest.runAllTimersAsync();
+      });
+
+      await waitFor(async () => expect(screen.getByTestId('visualization-empty-state')).toBeInTheDocument());
+      expect(result?.asFragment()).toMatchSnapshot();
     });
 
     it('should render empty state when there is no visible flows', async () => {
       const { Provider } = TestProvidersWrapper({
         visibleFlowsContext: { visibleFlows: { ['route-8888']: false } } as unknown as VisibleFLowsContextResult,
       });
-      const result = render(
-        <Provider>
-          <Canvas entities={[entity]} />
-        </Provider>,
-      );
+      let result: RenderResult | undefined;
+
+      await act(async () => {
+        result = render(
+          <Provider>
+            <VisualizationProvider controller={ControllerService.createController()}>
+              <Canvas entities={[entity]} />
+            </VisualizationProvider>
+          </Provider>,
+        );
+      });
+
+      await act(async () => {
+        await jest.runAllTimersAsync();
+      });
 
-      await waitFor(async () => expect(result.getByTestId('visualization-empty-state')).toBeInTheDocument());
-      expect(result.container).toMatchSnapshot();
+      await waitFor(async () => expect(screen.getByTestId('visualization-empty-state')).toBeInTheDocument());
+      expect(result?.container).toMatchSnapshot();
     });
   });
 });
diff --git a/packages/ui/src/components/Visualization/Canvas/Canvas.tsx b/packages/ui/src/components/Visualization/Canvas/Canvas.tsx
index b390a409b..b8cfbf22e 100644
--- a/packages/ui/src/components/Visualization/Canvas/Canvas.tsx
+++ b/packages/ui/src/components/Visualization/Canvas/Canvas.tsx
@@ -1,8 +1,6 @@
 import { Icon } from '@patternfly/react-core';
 import { CatalogIcon } from '@patternfly/react-icons';
 import {
-  GRAPH_LAYOUT_END_EVENT,
-  GraphLayoutEndEventListener,
   Model,
   SELECTION_EVENT,
   SelectionEventListener,
@@ -16,6 +14,7 @@ import {
   useEventListener,
   useVisualizationController,
 } from '@patternfly/react-topology';
+import clsx from 'clsx';
 import {
   FunctionComponent,
   PropsWithChildren,
@@ -41,12 +40,13 @@ import { CanvasEdge, CanvasNode, LayoutType } from './canvas.models';
 import { FlowService } from './flow.service';
 
 interface CanvasProps {
-  contextToolbar?: ReactNode;
   entities: BaseVisualCamelEntity[];
+  contextToolbar?: ReactNode;
 }
 
 export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = ({ entities, contextToolbar }) => {
   /** State for @patternfly/react-topology */
+  const [initialized, setInitialized] = useState(false);
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
   const [selectedNode, setSelectedNode] = useState<CanvasNode | undefined>(undefined);
   const [activeLayout, setActiveLayout] = useLocalStorage(LocalStorageKeys.CanvasLayout, CanvasDefaults.DEFAULT_LAYOUT);
@@ -89,28 +89,22 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = ({ enti
       },
     };
 
-    console.log('[RENDER] Canvas - Draw graph', nodes);
     controller.fromModel(model, true);
-  }, [activeLayout, controller, entities, visibleFlows]);
-
-  useEventListener<SelectionEventListener>(SELECTION_EVENT, (ids) => {
-    setSelectedIds(ids);
-  });
-  useEventListener<GraphLayoutEndEventListener>(GRAPH_LAYOUT_END_EVENT, ({ graph }) => {
-    console.log('[RENDER] Canvas - Graph layout end');
-    setTimeout(
-      action(() => {
-        graph.fit(80);
-      }),
-      0,
-    );
-  });
+    setInitialized(true);
+  }, [controller, entities, visibleFlows]);
+
+  const handleSelection = useCallback((selectedIds: string[]) => {
+    setSelectedIds(selectedIds);
+  }, []);
+  useEventListener<SelectionEventListener>(SELECTION_EVENT, handleSelection);
 
   /** Set select node and pan it into view */
   useEffect(() => {
     let resizeTimeout: number | undefined;
 
     if (!selectedIds[0]) {
+      setSelectedNode(undefined);
+    } else {
       const selectedNode = controller.getNodeById(selectedIds[0]);
       if (selectedNode) {
         setSelectedNode(selectedNode as unknown as CanvasNode);
@@ -122,69 +116,65 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = ({ enti
           500,
         ) as unknown as number;
       }
+      return () => {
+        if (resizeTimeout) {
+          clearTimeout(resizeTimeout);
+        }
+      };
     }
-    return () => {
-      if (resizeTimeout) {
-        clearTimeout(resizeTimeout);
-      }
-    };
   }, [selectedIds, controller]);
 
   const controlButtons = useMemo(() => {
-    const customButtons: TopologyControlButton[] = catalogModalContext
-      ? [
-          {
-            id: 'topology-control-bar-h_layout-button',
-            icon: (
-              <Icon>
-                <img src={layoutHorizontalIcon} />
-              </Icon>
-            ),
-            tooltip: 'Horizontal Layout',
-            callback: action(() => {
-              setActiveLayout(LayoutType.DagreHorizontal);
-              controller.getGraph().setLayout(LayoutType.DagreHorizontal);
-              controller.getGraph().reset();
-              controller.getGraph().layout();
-            }),
-          },
-          {
-            id: 'topology-control-bar-v_layout-button',
-            icon: (
-              <Icon>
-                <img src={layoutVerticalIcon} />
-              </Icon>
-            ),
-            tooltip: 'Vertical Layout',
-            callback: action(() => {
-              setActiveLayout(LayoutType.DagreVertical);
-              controller.getGraph().setLayout(LayoutType.DagreVertical);
-              controller.getGraph().reset();
-              controller.getGraph().layout();
-            }),
-          },
-          {
-            id: 'topology-control-bar-catalog-button',
-            icon: <CatalogIcon />,
-            tooltip: 'Open Catalog',
-            callback: action(() => {
-              catalogModalContext.setIsModalOpen(true);
-            }),
-          },
-        ]
-      : [];
+    const customButtons: TopologyControlButton[] = [
+      {
+        id: 'topology-control-bar-h_layout-button',
+        icon: (
+          <Icon>
+            <img src={layoutHorizontalIcon} />
+          </Icon>
+        ),
+        tooltip: 'Horizontal Layout',
+        callback: action(() => {
+          setActiveLayout(LayoutType.DagreHorizontal);
+          controller.getGraph().setLayout(LayoutType.DagreHorizontal);
+          controller.getGraph().layout();
+        }),
+      },
+      {
+        id: 'topology-control-bar-v_layout-button',
+        icon: (
+          <Icon>
+            <img src={layoutVerticalIcon} />
+          </Icon>
+        ),
+        tooltip: 'Vertical Layout',
+        callback: action(() => {
+          setActiveLayout(LayoutType.DagreVertical);
+          controller.getGraph().setLayout(LayoutType.DagreVertical);
+          controller.getGraph().layout();
+        }),
+      },
+    ];
+    if (catalogModalContext) {
+      customButtons.push({
+        id: 'topology-control-bar-catalog-button',
+        icon: <CatalogIcon />,
+        tooltip: 'Open Catalog',
+        callback: action(() => {
+          catalogModalContext.setIsModalOpen(true);
+        }),
+      });
+    }
 
     return createTopologyControlButtons({
       ...defaultControlButtonsOptions,
+      fitToScreen: false,
       zoomInCallback: action(() => {
         controller.getGraph().scaleBy(4 / 3);
       }),
       zoomOutCallback: action(() => {
         controller.getGraph().scaleBy(3 / 4);
       }),
-      fitToScreenCallback: action(() => {
-        controller.getGraph().fit(80);
-      }),
       resetViewCallback: action(() => {
         controller.getGraph().reset();
         controller.getGraph().layout();
@@ -203,6 +193,7 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = ({ enti
 
   return (
     <TopologyView
+      className={clsx({ hidden: !initialized })}
       defaultSideBarSize={sidebarWidth + 'px'}
       minSideBarSize="210px"
       onSideBarResize={setSidebarWidth}
@@ -212,10 +203,14 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = ({ enti
       contextToolbar={contextToolbar}
       controlBar={<TopologyControlBar controlButtons={controlButtons} />}
     >
-      {shouldShowEmptyState ? (
-        <VisualizationEmptyState data-testid="visualization-empty-state" entitiesNumber={entities.length} />
-      ) : (
-        <VisualizationSurface state={{ selectedIds }} />
+      <VisualizationSurface state={{ selectedIds }} />
+
+      {shouldShowEmptyState && (
+        <VisualizationEmptyState
+          className="canvas-empty-state"
+          data-testid="visualization-empty-state"
+          entitiesNumber={entities.length}
+        />
       )}
     </TopologyView>
   );
diff --git a/packages/ui/src/components/Visualization/Canvas/CanvasController.tsx b/packages/ui/src/components/Visualization/Canvas/CanvasController.tsx
deleted file mode 100644
index 6d01f7f59..000000000
--- a/packages/ui/src/components/Visualization/Canvas/CanvasController.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { VisualizationProvider } from '@patternfly/react-topology';
-import { FunctionComponent, PropsWithChildren, ReactNode, useMemo } from 'react';
-import { BaseVisualCamelEntity } from '../../../models/visualization/base-visual-entity';
-import { Canvas } from './Canvas';
-import './Canvas.scss';
-import { ControllerService } from './controller.service';
-
-interface CanvasProps {
-  contextToolbar?: ReactNode;
-  entities: BaseVisualCamelEntity[];
-}
-
-export const CanvasController: FunctionComponent<PropsWithChildren<CanvasProps>> = ({ entities }) => {
-  const controller = useMemo(() => ControllerService.createController(), []);
-
-  return (
-    <VisualizationProvider controller={controller}>
-      <Canvas entities={entities} />
-    </VisualizationProvider>
-  );
-};
diff --git a/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap b/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap
index dc3856713..426317993 100644
--- a/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap
+++ b/packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Canvas Empty state should render empty state when there is no visible flows 1`] = `
-<div>
+exports[`Canvas Catalog button should NOT be present if \`CatalogModalContext\` is NOT provided 1`] = `
+<DocumentFragment>
   <div
     class="pf-v5-l-stack"
   >
@@ -24,445 +24,574 @@ exports[`Canvas Empty state should render empty state when there is no visible f
                 class="pf-topology-content"
               >
                 <div
-                  class="pf-v5-l-bullseye"
+                  class="pf-topology-visualization-surface"
+                  data-test-id="topology"
                 >
-                  <div
-                    class="pf-v5-c-card"
-                    data-ouia-component-id="OUIA-Generated-Card-2"
-                    data-ouia-component-type="PF5/Card"
-                    data-ouia-safe="true"
-                    id=""
+                  <svg
+                    class="pf-topology-visualization-surface__svg"
                   >
-                    <div
-                      class="pf-v5-c-empty-state"
-                      data-testid="visualization-empty-state"
+                    <g
+                      data-id="g1"
+                      data-kind="graph"
+                      data-type="graph"
                     >
-                      <div
-                        class="pf-v5-c-empty-state__content"
+                      <rect
+                        fill-opacity="0"
+                        height="0"
+                        width="0"
+                        x="0"
+                        y="0"
+                      />
+                      <g
+                        data-surface="true"
+                        transform="translate(-0.39215686274509803, -0.5140056022408963) scale(0.0011204481792717086)"
                       >
-                        <div
-                          class="pf-v5-c-empty-state__header"
+                        <g
+                          data-layer-id="bottom"
+                        />
+                        <g
+                          data-layer-id="groups"
                         >
-                          <div
-                            class="pf-v5-c-empty-state__icon"
+                          <g
+                            data-id="route-1234"
+                            data-kind="node"
+                            data-type="group"
+                            transform="translate(0, 0)"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class="pf-v5-svg"
-                              data-testid="eye-slash-icon"
-                              fill="currentColor"
-                              height="1em"
-                              role="img"
-                              viewBox="0 0 640 512"
-                              width="1em"
-                            >
-                              <path
-                                d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"
+                            <g>
+                              <rect
+                                class="phantom-rect"
+                                height="892.5"
+                                width="870"
+                                x="-85"
+                                y="12.5"
                               />
-                            </svg>
-                          </div>
-                          <div
-                            class="pf-v5-c-empty-state__title"
-                          >
-                            <h4
-                              class="pf-v5-c-empty-state__title-text"
-                            >
-                              <p>
-                                There are no visible routes
-                              </p>
-                            </h4>
-                          </div>
-                        </div>
-                        <div
-                          class="pf-v5-c-empty-state__body"
-                        >
-                          <p>
-                            You can toggle the visibility of a route by using Routes list
-                          </p>
-                        </div>
-                        <div
-                          class="pf-v5-c-empty-state__footer"
-                        >
-                          <div
-                            class="pf-v5-c-empty-state__actions"
-                          />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <span
-                  class="pf-topology-control-bar"
-                >
-                  <div
-                    class="pf-v5-c-toolbar"
-                    data-ouia-component-id="OUIA-Generated-Toolbar-7"
-                    data-ouia-component-type="PF5/Toolbar"
-                    data-ouia-safe="true"
-                    id="pf-topology-control-bar-14"
-                    style="background-color: transparent; padding: 0px;"
-                  >
-                    <div
-                      class="pf-v5-c-toolbar__content"
-                    >
-                      <div
-                        class="pf-v5-c-toolbar__content-section"
-                      >
-                        <div
-                          class="pf-v5-c-toolbar__group pf-m-space-items-none"
-                        >
-                          <div
-                            class="pf-v5-c-toolbar__item"
-                          >
-                            <div
-                              style="display: contents;"
-                            >
-                              <button
-                                aria-disabled="false"
-                                class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
-                                data-ouia-component-id="OUIA-Generated-Button-tertiary-28"
-                                data-ouia-component-type="PF5/Button"
-                                data-ouia-safe="true"
-                                id="zoom-in"
-                                type="button"
+                              <foreignobject
+                                class="foreign-object"
+                                data-nodelabel="route-8888"
+                                height="892.5"
+                                width="870"
+                                x="-85"
+                                y="12.5"
                               >
-                                <svg
-                                  aria-hidden="true"
-                                  class="pf-v5-svg"
-                                  fill="currentColor"
-                                  height="1em"
-                                  role="img"
-                                  viewBox="0 0 512 512"
-                                  width="1em"
-                                >
-                                  <path
-                                    d="M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z"
-                                  />
-                                </svg>
-                                <span
-                                  class="pf-v5-screen-reader"
+                                <div
+                                  class="custom-group"
                                 >
-                                  Zoom In
-                                </span>
-                              </button>
-                            </div>
-                          </div>
-                          <div
-                            class="pf-v5-c-toolbar__item"
+                                  <div
+                                    class="custom-group__title"
+                                  >
+                                    <div
+                                      class="custom-group__title__img-circle"
+                                    >
+                                      <img
+                                        src=""
+                                      />
+                                    </div>
+                                    <span
+                                      title="route-8888"
+                                    >
+                                      route-8888
+                                    </span>
+                                    <div
+                                      style="display: contents;"
+                                    >
+                                      <button
+                                        class="container-controls"
+                                        data-testid="collapseButton-route-8888"
+                                        id="collapse-button-control"
+                                      >
+                                        <svg
+                                          aria-hidden="true"
+                                          class="pf-v5-svg"
+                                          data-testid="collapse-icon"
+                                          fill="currentColor"
+                                          height="1em"
+                                          role="img"
+                                          viewBox="0 0 512 512"
+                                          width="1em"
+                                        >
+                                          <path
+                                            d="M200 288H88c-21.4 0-32.1 25.8-17 41l32.9 31-99.2 99.3c-6.2 6.2-6.2 16.4 0 22.6l25.4 25.4c6.2 6.2 16.4 6.2 22.6 0L152 408l31.1 33c15.1 15.1 40.9 4.4 40.9-17V312c0-13.3-10.7-24-24-24zm112-64h112c21.4 0 32.1-25.9 17-41l-33-31 99.3-99.3c6.2-6.2 6.2-16.4 0-22.6L481.9 4.7c-6.2-6.2-16.4-6.2-22.6 0L360 104l-31.1-33C313.8 55.9 288 66.6 288 88v112c0 13.3 10.7 24 24 24zm96 136l33-31.1c15.1-15.1 4.4-40.9-17-40.9H312c-13.3 0-24 10.7-24 24v112c0 21.4 25.9 32.1 41 17l31-32.9 99.3 99.3c6.2 6.2 16.4 6.2 22.6 0l25.4-25.4c6.2-6.2 6.2-16.4 0-22.6L408 360zM183 71.1L152 104 52.7 4.7c-6.2-6.2-16.4-6.2-22.6 0L4.7 30.1c-6.2 6.2-6.2 16.4 0 22.6L104 152l-33 31.1C55.9 198.2 66.6 224 88 224h112c13.3 0 24-10.7 24-24V88c0-21.3-25.9-32-41-16.9z"
+                                          />
+                                        </svg>
+                                      </button>
+                                    </div>
+                                    <div
+                                      style="display: contents;"
+                                    >
+                                      <button
+                                        class="container-controls"
+                                        data-testid="contextualMenu-route-8888"
+                                        id="container-controls-contextual-menu"
+                                      >
+                                        <svg
+                                          aria-hidden="true"
+                                          class="pf-v5-svg"
+                                          fill="currentColor"
+                                          height="1em"
+                                          role="img"
+                                          viewBox="0 0 192 512"
+                                          width="1em"
+                                        >
+                                          <path
+                                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                          />
+                                        </svg>
+                                      </button>
+                                    </div>
+                                  </div>
+                                </div>
+                              </foreignobject>
+                            </g>
+                          </g>
+                          <g
+                            data-id="choice-1234"
+                            data-kind="node"
+                            data-type="group"
+                            transform="translate(0, 0)"
                           >
-                            <div
-                              style="display: contents;"
-                            >
-                              <button
-                                aria-disabled="false"
-                                class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
-                                data-ouia-component-id="OUIA-Generated-Button-tertiary-29"
-                                data-ouia-component-type="PF5/Button"
-                                data-ouia-safe="true"
-                                id="zoom-out"
-                                type="button"
+                            <g>
+                              <rect
+                                class="phantom-rect"
+                                height="627.5"
+                                width="750"
+                                x="-25"
+                                y="72.5"
+                              />
+                              <foreignobject
+                                class="foreign-object"
+                                data-nodelabel="choice"
+                                height="627.5"
+                                width="750"
+                                x="-25"
+                                y="72.5"
                               >
-                                <svg
-                                  aria-hidden="true"
-                                  class="pf-v5-svg"
-                                  fill="currentColor"
-                                  height="1em"
-                                  role="img"
-                                  viewBox="0 0 512 512"
-                                  width="1em"
+                                <div
+                                  class="custom-group"
                                 >
-                                  <path
-                                    d="M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z"
-                                  />
-                                </svg>
-                                <span
-                                  class="pf-v5-screen-reader"
+                                  <div
+                                    class="custom-group__title"
+                                  >
+                                    <div
+                                      class="custom-group__title__img-circle"
+                                    >
+                                      <img
+                                        src=""
+                                      />
+                                    </div>
+                                    <span
+                                      title="choice"
+                                    >
+                                      choice
+                                    </span>
+                                    <div
+                                      style="display: contents;"
+                                    >
+                                      <button
+                                        class="container-controls"
+                                        data-testid="collapseButton-choice"
+                                        id="collapse-button-control"
+                                      >
+                                        <svg
+                                          aria-hidden="true"
+                                          class="pf-v5-svg"
+                                          data-testid="collapse-icon"
+                                          fill="currentColor"
+                                          height="1em"
+                                          role="img"
+                                          viewBox="0 0 512 512"
+                                          width="1em"
+                                        >
+                                          <path
+                                            d="M200 288H88c-21.4 0-32.1 25.8-17 41l32.9 31-99.2 99.3c-6.2 6.2-6.2 16.4 0 22.6l25.4 25.4c6.2 6.2 16.4 6.2 22.6 0L152 408l31.1 33c15.1 15.1 40.9 4.4 40.9-17V312c0-13.3-10.7-24-24-24zm112-64h112c21.4 0 32.1-25.9 17-41l-33-31 99.3-99.3c6.2-6.2 6.2-16.4 0-22.6L481.9 4.7c-6.2-6.2-16.4-6.2-22.6 0L360 104l-31.1-33C313.8 55.9 288 66.6 288 88v112c0 13.3 10.7 24 24 24zm96 136l33-31.1c15.1-15.1 4.4-40.9-17-40.9H312c-13.3 0-24 10.7-24 24v112c0 21.4 25.9 32.1 41 17l31-32.9 99.3 99.3c6.2 6.2 16.4 6.2 22.6 0l25.4-25.4c6.2-6.2 6.2-16.4 0-22.6L408 360zM183 71.1L152 104 52.7 4.7c-6.2-6.2-16.4-6.2-22.6 0L4.7 30.1c-6.2 6.2-6.2 16.4 0 22.6L104 152l-33 31.1C55.9 198.2 66.6 224 88 224h112c13.3 0 24-10.7 24-24V88c0-21.3-25.9-32-41-16.9z"
+                                          />
+                                        </svg>
+                                      </button>
+                                    </div>
+                                    <div
+                                      style="display: contents;"
+                                    >
+                                      <button
+                                        class="container-controls"
+                                        data-testid="contextualMenu-choice"
+                                        id="container-controls-contextual-menu"
+                                      >
+                                        <svg
+                                          aria-hidden="true"
+                                          class="pf-v5-svg"
+                                          fill="currentColor"
+                                          height="1em"
+                                          role="img"
+                                          viewBox="0 0 192 512"
+                                          width="1em"
+                                        >
+                                          <path
+                                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                          />
+                                        </svg>
+                                      </button>
+                                    </div>
+                                  </div>
+                                </div>
+                              </foreignobject>
+                            </g>
+                          </g>
+                          <g
+                            data-id="otherwise-1234"
+                            data-kind="node"
+                            data-type="group"
+                            transform="translate(0, 0)"
+                          >
+                            <g>
+                              <rect
+                                class="phantom-rect"
+                                height="195"
+                                width="360"
+                                x="305"
+                                y="445"
+                              />
+                              <foreignobject
+                                class="foreign-object"
+                                data-nodelabel="otherwise"
+                                height="195"
+                                width="360"
+                                x="305"
+                                y="445"
+                              >
+                                <div
+                                  class="custom-group"
                                 >
-                                  Zoom Out
-                                </span>
-                              </button>
-                            </div>
-                          </div>
-                          <div
-                            class="pf-v5-c-toolbar__item"
+                                  <div
+                                    class="custom-group__title"
+                                  >
+                                    <div
+                                      class="custom-group__title__img-circle"
+                                    >
+                                      <img
+                                        src=""
+                                      />
+                                    </div>
+                                    <span
+                                      title="otherwise"
+                                    >
+                                      otherwise
+                                    </span>
+                                    <div
+                                      style="display: contents;"
+                                    >
+                                      <button
+                                        class="container-controls"
+                                        data-testid="collapseButton-otherwise"
+                                        id="collapse-button-control"
+                                      >
+                                        <svg
+                                          aria-hidden="true"
+                                          class="pf-v5-svg"
+                                          data-testid="collapse-icon"
+                                          fill="currentColor"
+                                          height="1em"
+                                          role="img"
+                                          viewBox="0 0 512 512"
+                                          width="1em"
+                                        >
+                                          <path
+                                            d="M200 288H88c-21.4 0-32.1 25.8-17 41l32.9 31-99.2 99.3c-6.2 6.2-6.2 16.4 0 22.6l25.4 25.4c6.2 6.2 16.4 6.2 22.6 0L152 408l31.1 33c15.1 15.1 40.9 4.4 40.9-17V312c0-13.3-10.7-24-24-24zm112-64h112c21.4 0 32.1-25.9 17-41l-33-31 99.3-99.3c6.2-6.2 6.2-16.4 0-22.6L481.9 4.7c-6.2-6.2-16.4-6.2-22.6 0L360 104l-31.1-33C313.8 55.9 288 66.6 288 88v112c0 13.3 10.7 24 24 24zm96 136l33-31.1c15.1-15.1 4.4-40.9-17-40.9H312c-13.3 0-24 10.7-24 24v112c0 21.4 25.9 32.1 41 17l31-32.9 99.3 99.3c6.2 6.2 16.4 6.2 22.6 0l25.4-25.4c6.2-6.2 6.2-16.4 0-22.6L408 360zM183 71.1L152 104 52.7 4.7c-6.2-6.2-16.4-6.2-22.6 0L4.7 30.1c-6.2 6.2-6.2 16.4 0 22.6L104 152l-33 31.1C55.9 198.2 66.6 224 88 224h112c13.3 0 24-10.7 24-24V88c0-21.3-25.9-32-41-16.9z"
+                                          />
+                                        </svg>
+                                      </button>
+                                    </div>
+                                    <div
+                                      style="display: contents;"
+                                    >
+                                      <button
+                                        class="container-controls"
+                                        data-testid="contextualMenu-otherwise"
+                                        id="container-controls-contextual-menu"
+                                      >
+                                        <svg
+                                          aria-hidden="true"
+                                          class="pf-v5-svg"
+                                          fill="currentColor"
+                                          height="1em"
+                                          role="img"
+                                          viewBox="0 0 192 512"
+                                          width="1em"
+                                        >
+                                          <path
+                                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                          />
+                                        </svg>
+                                      </button>
+                                    </div>
+                                  </div>
+                                </div>
+                              </foreignobject>
+                            </g>
+                          </g>
+                        </g>
+                        <g
+                          data-layer-id="default"
+                        >
+                          <g
+                            data-id="timer-1234-to-set-header-1234"
+                            data-kind="edge"
+                            data-type="edge"
+                            style="z-index: 0;"
                           >
-                            <div
-                              style="display: contents;"
+                            <g
+                              class="pf-topology__edge"
+                              data-test-id="edge-handler"
                             >
-                              <button
-                                aria-disabled="false"
-                                class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
-                                data-ouia-component-id="OUIA-Generated-Button-tertiary-30"
-                                data-ouia-component-type="PF5/Button"
-                                data-ouia-safe="true"
-                                id="fit-to-screen"
-                                type="button"
+                              <path
+                                class="pf-topology__edge__background"
+                                d="M440 132.5 L440 263.5"
+                              />
+                              <path
+                                class="pf-topology__edge__link pf-m-solid"
+                                d="M440 132.5 L440 277.5"
+                                style="animation-duration: 0s;"
+                              />
+                              <g
+                                class="pf-topology-connector-arrow pf-topology__edge"
+                                transform="translate(440, 263.5) rotate(90)"
                               >
-                                <svg
-                                  aria-hidden="true"
-                                  class="pf-v5-svg"
-                                  fill="currentColor"
-                                  height="1em"
-                                  role="img"
-                                  viewBox="0 0 448 512"
-                                  width="1em"
-                                >
-                                  <path
-                                    d="M448 344v112a23.94 23.94 0 0 1-24 24H312c-21.39 0-32.09-25.9-17-41l36.2-36.2L224 295.6 116.77 402.9 153 439c15.09 15.1 4.39 41-17 41H24a23.94 23.94 0 0 1-24-24V344c0-21.4 25.89-32.1 41-17l36.19 36.2L184.46 256 77.18 148.7 41 185c-15.1 15.1-41 4.4-41-17V56a23.94 23.94 0 0 1 24-24h112c21.39 0 32.09 25.9 17 41l-36.2 36.2L224 216.4l107.23-107.3L295 73c-15.09-15.1-4.39-41 17-41h112a23.94 23.94 0 0 1 24 24v112c0 21.4-25.89 32.1-41 17l-36.19-36.2L263.54 256l107.28 107.3L407 327.1c15.1-15.2 41-4.5 41 16.9z"
-                                  />
-                                </svg>
-                                <span
-                                  class="pf-v5-screen-reader"
-                                >
-                                  Fit to Screen
-                                </span>
-                              </button>
-                            </div>
-                          </div>
-                          <div
-                            class="pf-v5-c-toolbar__item"
+                                <polygon
+                                  points=" 0,7 0,-7 14,0"
+                                />
+                                <polygon
+                                  fill-opacity="0"
+                                  stroke-width="0"
+                                />
+                              </g>
+                            </g>
+                          </g>
+                          <g
+                            data-id="set-header-1234-to-choice-1234"
+                            data-kind="edge"
+                            data-type="edge"
+                            style="z-index: 0;"
                           >
-                            <div
-                              style="display: contents;"
+                            <g
+                              class="pf-topology__edge"
+                              data-test-id="edge-handler"
                             >
-                              <button
-                                aria-disabled="false"
-                                class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
-                                data-ouia-component-id="OUIA-Generated-Button-tertiary-31"
-                                data-ouia-component-type="PF5/Button"
-                                data-ouia-safe="true"
-                                id="reset-view"
-                                type="button"
+                              <path
+                                class="pf-topology__edge__background"
+                                d="M440 277.5 L440 86.5"
+                              />
+                              <path
+                                class="pf-topology__edge__link pf-m-solid"
+                                d="M440 277.5 L440 72.5"
+                                style="animation-duration: 0s;"
+                              />
+                              <g
+                                class="pf-topology-connector-arrow pf-topology__edge"
+                                transform="translate(440, 86.5) rotate(270)"
                               >
-                                <svg
-                                  aria-hidden="true"
-                                  class="pf-v5-svg"
-                                  fill="currentColor"
-                                  height="1em"
-                                  role="img"
-                                  viewBox="0 0 448 512"
+                                <polygon
+                                  points=" 0,7 0,-7 14,0"
+                                />
+                                <polygon
+                                  fill-opacity="0"
+                                  stroke-width="0"
+                                />
+                              </g>
+                            </g>
+                          </g>
+                          <g
+                            data-id="amqp-1234-to-amqp-1234"
+                            data-kind="edge"
+                            data-type="edge"
+                            style="z-index: 0;"
+                          >
+                            <g
+                              class="pf-topology__edge"
+                              data-test-id="edge-handler"
+                            >
+                              <path
+                                class="pf-topology__edge__background"
+                                d="M567.5 542.5 L0 0"
+                              />
+                              <path
+                                class="pf-topology__edge__link pf-m-solid"
+                                d="M567.5 542.5 L567.5 542.5"
+                                style="animation-duration: 0s;"
+                              />
+                              <g
+                                class="pf-topology-connector-arrow pf-topology__edge"
+                                transform="translate(0, 0) rotate(180)"
+                              >
+                                <polygon
+                                  points=" 0,7 0,-7 14,0"
+                                />
+                                <polygon
+                                  fill-opacity="0"
+                                  stroke-width="0"
+                                />
+                              </g>
+                            </g>
+                          </g>
+                          <g
+                            data-id="choice-1234-to-direct-1234"
+                            data-kind="edge"
+                            data-type="edge"
+                            style="z-index: 0;"
+                          >
+                            <g
+                              class="pf-topology__edge"
+                              data-test-id="edge-handler"
+                            >
+                              <path
+                                class="pf-topology__edge__background"
+                                d="M440 700 L440 793.5"
+                              />
+                              <path
+                                class="pf-topology__edge__link pf-m-solid"
+                                d="M440 700 L440 807.5"
+                                style="animation-duration: 0s;"
+                              />
+                              <g
+                                class="pf-topology-connector-arrow pf-topology__edge"
+                                transform="translate(440, 793.5) rotate(90)"
+                              >
+                                <polygon
+                                  points=" 0,7 0,-7 14,0"
+                                />
+                                <polygon
+                                  fill-opacity="0"
+                                  stroke-width="0"
+                                />
+                              </g>
+                            </g>
+                          </g>
+                          <g
+                            data-id="route-1234"
+                            data-kind="node"
+                            data-type="group"
+                          >
+                            <g
+                              class="custom-group"
+                            />
+                            <g
+                              data-id="timer-1234"
+                              data-kind="node"
+                              data-type="node"
+                              transform="translate(402.5, 95)"
+                            />
+                            <g
+                              data-id="set-header-1234"
+                              data-kind="node"
+                              data-type="node"
+                              transform="translate(402.5, 240)"
+                            />
+                            <g
+                              data-id="choice-1234"
+                              data-kind="node"
+                              data-type="group"
+                            >
+                              <g
+                                class="custom-group"
+                              />
+                              <g
+                                data-id="when-1234"
+                                data-kind="node"
+                                data-type="group"
+                              />
+                              <g
+                                data-id="otherwise-1234"
+                                data-kind="node"
+                                data-type="group"
+                              >
+                                <g
+                                  class="custom-group"
+                                />
+                                <g
+                                  data-id="amqp-1234"
+                                  data-kind="node"
+                                  data-type="node"
+                                  transform="translate(530, 505)"
+                                />
+                                <g
+                                  data-id="log-1234"
+                                  data-kind="node"
+                                  data-type="node"
+                                  transform="translate(365, 505)"
+                                />
+                              </g>
+                            </g>
+                            <g
+                              data-id="direct-1234"
+                              data-kind="node"
+                              data-type="node"
+                              transform="translate(402.5, 770)"
+                            />
+                          </g>
+                        </g>
+                        <g
+                          data-layer-id="top"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </div>
+                <span
+                  class="pf-topology-control-bar"
+                >
+                  <div
+                    class="pf-v5-c-toolbar"
+                    data-ouia-component-id="OUIA-Generated-Toolbar-6"
+                    data-ouia-component-type="PF5/Toolbar"
+                    data-ouia-safe="true"
+                    id="pf-topology-control-bar-12"
+                    style="background-color: transparent; padding: 0px;"
+                  >
+                    <div
+                      class="pf-v5-c-toolbar__content"
+                    >
+                      <div
+                        class="pf-v5-c-toolbar__content-section"
+                      >
+                        <div
+                          class="pf-v5-c-toolbar__group pf-m-space-items-none"
+                        >
+                          <div
+                            class="pf-v5-c-toolbar__item"
+                          >
+                            <div
+                              style="display: contents;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-27"
+                                data-ouia-component-type="PF5/Button"
+                                data-ouia-safe="true"
+                                id="zoom-in"
+                                type="button"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="pf-v5-svg"
+                                  fill="currentColor"
+                                  height="1em"
+                                  role="img"
+                                  viewBox="0 0 512 512"
                                   width="1em"
                                 >
                                   <path
-                                    d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"
+                                    d="M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z"
                                   />
                                 </svg>
                                 <span
                                   class="pf-v5-screen-reader"
                                 >
-                                  Reset View
+                                  Zoom In
                                 </span>
                               </button>
                             </div>
                           </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="pf-v5-c-toolbar__content pf-m-hidden"
-                      hidden=""
-                    >
-                      <div
-                        class="pf-v5-c-toolbar__group"
-                      />
-                    </div>
-                  </div>
-                </span>
-              </div>
-            </div>
-          </div>
-          <div
-            class="pf-v5-c-drawer__panel pf-m-resizable"
-            hidden=""
-            id="topology-resize-panel"
-            style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 210px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Canvas Empty state should render empty state when there is no visual entity 1`] = `
-<div>
-  <div
-    class="pf-v5-l-stack"
-  >
-    <div
-      class="pf-v5-l-stack__item pf-m-fill pf-topology-container"
-    >
-      <div
-        class="pf-v5-c-drawer pf-m-inline"
-      >
-        <div
-          class="pf-v5-c-drawer__main"
-        >
-          <div
-            class="pf-v5-c-drawer__content"
-          >
-            <div
-              class="pf-v5-c-drawer__body"
-            >
-              <div
-                class="pf-topology-content"
-              >
-                <div
-                  class="pf-v5-l-bullseye"
-                >
-                  <div
-                    class="pf-v5-c-card"
-                    data-ouia-component-id="OUIA-Generated-Card-1"
-                    data-ouia-component-type="PF5/Card"
-                    data-ouia-safe="true"
-                    id=""
-                  >
-                    <div
-                      class="pf-v5-c-empty-state"
-                      data-testid="visualization-empty-state"
-                    >
-                      <div
-                        class="pf-v5-c-empty-state__content"
-                      >
-                        <div
-                          class="pf-v5-c-empty-state__header"
-                        >
                           <div
-                            class="pf-v5-c-empty-state__icon"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="pf-v5-svg"
-                              data-testid="cubes-icon"
-                              fill="currentColor"
-                              height="1em"
-                              role="img"
-                              viewBox="0 0 512 512"
-                              width="1em"
-                            >
-                              <path
-                                d="M488.6 250.2L392 214V105.5c0-15-9.3-28.4-23.4-33.7l-100-37.5c-8.1-3.1-17.1-3.1-25.3 0l-100 37.5c-14.1 5.3-23.4 18.7-23.4 33.7V214l-96.6 36.2C9.3 255.5 0 268.9 0 283.9V394c0 13.6 7.7 26.1 19.9 32.2l100 50c10.1 5.1 22.1 5.1 32.2 0l103.9-52 103.9 52c10.1 5.1 22.1 5.1 32.2 0l100-50c12.2-6.1 19.9-18.6 19.9-32.2V283.9c0-15-9.3-28.4-23.4-33.7zM358 214.8l-85 31.9v-68.2l85-37v73.3zM154 104.1l102-38.2 102 38.2v.6l-102 41.4-102-41.4v-.6zm84 291.1l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6zm240 112l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6z"
-                              />
-                            </svg>
-                          </div>
-                          <div
-                            class="pf-v5-c-empty-state__title"
-                          >
-                            <h4
-                              class="pf-v5-c-empty-state__title-text"
-                            >
-                              <p>
-                                There are no routes defined
-                              </p>
-                            </h4>
-                          </div>
-                        </div>
-                        <div
-                          class="pf-v5-c-empty-state__body"
-                        >
-                          <p>
-                            You can create a new route using the New button
-                          </p>
-                        </div>
-                        <div
-                          class="pf-v5-c-empty-state__footer"
-                        >
-                          <div
-                            class="pf-v5-c-empty-state__actions"
-                          >
-                            <div
-                              class="pf-v5-c-menu-toggle pf-m-full-width pf-m-split-button pf-m-action"
-                            >
-                              <div
-                                style="display: contents;"
-                              >
-                                <button
-                                  aria-label="DSL list"
-                                  class="pf-v5-c-menu-toggle__button"
-                                  data-testid="dsl-list-btn"
-                                  id="dsl-list-btn"
-                                  type="button"
-                                >
-                                  <svg
-                                    aria-hidden="true"
-                                    class="pf-v5-svg"
-                                    fill="currentColor"
-                                    height="1em"
-                                    role="img"
-                                    viewBox="0 0 448 512"
-                                    width="1em"
-                                  >
-                                    <path
-                                      d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-                                    />
-                                  </svg>
-                                  <span
-                                    class="pf-v5-u-m-sm"
-                                  >
-                                    New
-                                  </span>
-                                </button>
-                              </div>
-                              <button
-                                aria-expanded="false"
-                                class="pf-v5-c-menu-toggle__button"
-                                data-ouia-component-id="OUIA-Generated-MenuToggle-1"
-                                data-ouia-component-type="PF5/MenuToggle"
-                                data-ouia-safe="true"
-                                data-testid="viz-dsl-list-dropdown"
-                                type="button"
-                              >
-                                <span
-                                  class="pf-v5-c-menu-toggle__controls"
-                                >
-                                  <span
-                                    class="pf-v5-c-menu-toggle__toggle-icon"
-                                  >
-                                    <svg
-                                      aria-hidden="true"
-                                      class="pf-v5-svg"
-                                      fill="currentColor"
-                                      height="1em"
-                                      role="img"
-                                      viewBox="0 0 320 512"
-                                      width="1em"
-                                    >
-                                      <path
-                                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                                      />
-                                    </svg>
-                                  </span>
-                                </span>
-                              </button>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <span
-                  class="pf-topology-control-bar"
-                >
-                  <div
-                    class="pf-v5-c-toolbar"
-                    data-ouia-component-id="OUIA-Generated-Toolbar-6"
-                    data-ouia-component-type="PF5/Toolbar"
-                    data-ouia-safe="true"
-                    id="pf-topology-control-bar-12"
-                    style="background-color: transparent; padding: 0px;"
-                  >
-                    <div
-                      class="pf-v5-c-toolbar__content"
-                    >
-                      <div
-                        class="pf-v5-c-toolbar__content-section"
-                      >
-                        <div
-                          class="pf-v5-c-toolbar__group pf-m-space-items-none"
-                        >
-                          <div
-                            class="pf-v5-c-toolbar__item"
+                            class="pf-v5-c-toolbar__item"
                           >
                             <div
                               style="display: contents;"
@@ -470,10 +599,10 @@ exports[`Canvas Empty state should render empty state when there is no visual en
                               <button
                                 aria-disabled="false"
                                 class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
-                                data-ouia-component-id="OUIA-Generated-Button-tertiary-24"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-28"
                                 data-ouia-component-type="PF5/Button"
                                 data-ouia-safe="true"
-                                id="zoom-in"
+                                id="zoom-out"
                                 type="button"
                               >
                                 <svg
@@ -486,13 +615,13 @@ exports[`Canvas Empty state should render empty state when there is no visual en
                                   width="1em"
                                 >
                                   <path
-                                    d="M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z"
+                                    d="M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z"
                                   />
                                 </svg>
                                 <span
                                   class="pf-v5-screen-reader"
                                 >
-                                  Zoom In
+                                  Zoom Out
                                 </span>
                               </button>
                             </div>
@@ -506,10 +635,10 @@ exports[`Canvas Empty state should render empty state when there is no visual en
                               <button
                                 aria-disabled="false"
                                 class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
-                                data-ouia-component-id="OUIA-Generated-Button-tertiary-25"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-29"
                                 data-ouia-component-type="PF5/Button"
                                 data-ouia-safe="true"
-                                id="zoom-out"
+                                id="reset-view"
                                 type="button"
                               >
                                 <svg
@@ -518,17 +647,17 @@ exports[`Canvas Empty state should render empty state when there is no visual en
                                   fill="currentColor"
                                   height="1em"
                                   role="img"
-                                  viewBox="0 0 512 512"
+                                  viewBox="0 0 448 512"
                                   width="1em"
                                 >
                                   <path
-                                    d="M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z"
+                                    d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"
                                   />
                                 </svg>
                                 <span
                                   class="pf-v5-screen-reader"
                                 >
-                                  Zoom Out
+                                  Reset View
                                 </span>
                               </button>
                             </div>
@@ -542,29 +671,27 @@ exports[`Canvas Empty state should render empty state when there is no visual en
                               <button
                                 aria-disabled="false"
                                 class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
-                                data-ouia-component-id="OUIA-Generated-Button-tertiary-26"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-30"
                                 data-ouia-component-type="PF5/Button"
                                 data-ouia-safe="true"
-                                id="fit-to-screen"
+                                id="topology-control-bar-h_layout-button"
                                 type="button"
                               >
-                                <svg
-                                  aria-hidden="true"
-                                  class="pf-v5-svg"
-                                  fill="currentColor"
-                                  height="1em"
-                                  role="img"
-                                  viewBox="0 0 448 512"
-                                  width="1em"
+                                <span
+                                  class="pf-v5-c-icon"
                                 >
-                                  <path
-                                    d="M448 344v112a23.94 23.94 0 0 1-24 24H312c-21.39 0-32.09-25.9-17-41l36.2-36.2L224 295.6 116.77 402.9 153 439c15.09 15.1 4.39 41-17 41H24a23.94 23.94 0 0 1-24-24V344c0-21.4 25.89-32.1 41-17l36.19 36.2L184.46 256 77.18 148.7 41 185c-15.1 15.1-41 4.4-41-17V56a23.94 23.94 0 0 1 24-24h112c21.39 0 32.09 25.9 17 41l-36.2 36.2L224 216.4l107.23-107.3L295 73c-15.09-15.1-4.39-41 17-41h112a23.94 23.94 0 0 1 24 24v112c0 21.4-25.89 32.1-41 17l-36.19-36.2L263.54 256l107.28 107.3L407 327.1c15.1-15.2 41-4.5 41 16.9z"
-                                  />
-                                </svg>
+                                  <span
+                                    class="pf-v5-c-icon__content"
+                                  >
+                                    <img
+                                      src=""
+                                    />
+                                  </span>
+                                </span>
                                 <span
                                   class="pf-v5-screen-reader"
                                 >
-                                  Fit to Screen
+                                  Horizontal Layout
                                 </span>
                               </button>
                             </div>
@@ -578,29 +705,27 @@ exports[`Canvas Empty state should render empty state when there is no visual en
                               <button
                                 aria-disabled="false"
                                 class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
-                                data-ouia-component-id="OUIA-Generated-Button-tertiary-27"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-31"
                                 data-ouia-component-type="PF5/Button"
                                 data-ouia-safe="true"
-                                id="reset-view"
+                                id="topology-control-bar-v_layout-button"
                                 type="button"
                               >
-                                <svg
-                                  aria-hidden="true"
-                                  class="pf-v5-svg"
-                                  fill="currentColor"
-                                  height="1em"
-                                  role="img"
-                                  viewBox="0 0 448 512"
-                                  width="1em"
+                                <span
+                                  class="pf-v5-c-icon"
                                 >
-                                  <path
-                                    d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"
-                                  />
-                                </svg>
+                                  <span
+                                    class="pf-v5-c-icon__content"
+                                  >
+                                    <img
+                                      src=""
+                                    />
+                                  </span>
+                                </span>
                                 <span
                                   class="pf-v5-screen-reader"
                                 >
-                                  Reset View
+                                  Vertical Layout
                                 </span>
                               </button>
                             </div>
@@ -631,11 +756,11 @@ exports[`Canvas Empty state should render empty state when there is no visual en
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`Canvas should render correctly 1`] = `
-<div>
+exports[`Canvas Catalog button should be present if \`CatalogModalContext\` is provided 1`] = `
+<DocumentFragment>
   <div
     class="pf-v5-l-stack"
   >
@@ -678,7 +803,7 @@ exports[`Canvas should render correctly 1`] = `
                       />
                       <g
                         data-surface="true"
-                        transform="translate(0, 0) scale(1)"
+                        transform="translate(-0.39215686274509803, -0.5140056022408963) scale(0.0011204481792717086)"
                       >
                         <g
                           data-layer-id="bottom"
@@ -695,18 +820,18 @@ exports[`Canvas should render correctly 1`] = `
                             <g>
                               <rect
                                 class="phantom-rect"
-                                height="435"
-                                width="435"
-                                x="-180"
-                                y="-180"
+                                height="892.5"
+                                width="870"
+                                x="-85"
+                                y="12.5"
                               />
                               <foreignobject
                                 class="foreign-object"
                                 data-nodelabel="route-8888"
-                                height="435"
-                                width="435"
-                                x="-180"
-                                y="-180"
+                                height="892.5"
+                                width="870"
+                                x="-85"
+                                y="12.5"
                               >
                                 <div
                                   class="custom-group"
@@ -787,18 +912,18 @@ exports[`Canvas should render correctly 1`] = `
                             <g>
                               <rect
                                 class="phantom-rect"
-                                height="315"
-                                width="315"
-                                x="-120"
-                                y="-120"
+                                height="627.5"
+                                width="750"
+                                x="-25"
+                                y="72.5"
                               />
                               <foreignobject
                                 class="foreign-object"
                                 data-nodelabel="choice"
-                                height="315"
-                                width="315"
-                                x="-120"
-                                y="-120"
+                                height="627.5"
+                                width="750"
+                                x="-25"
+                                y="72.5"
                               >
                                 <div
                                   class="custom-group"
@@ -876,307 +1001,1119 @@ exports[`Canvas should render correctly 1`] = `
                             data-type="group"
                             transform="translate(0, 0)"
                           >
-                            <g>
-                              <rect
-                                class="phantom-rect"
-                                height="195"
-                                width="195"
-                                x="-60"
-                                y="-60"
-                              />
-                              <foreignobject
-                                class="foreign-object"
-                                data-nodelabel="otherwise"
-                                height="195"
-                                width="195"
-                                x="-60"
-                                y="-60"
+                            <g>
+                              <rect
+                                class="phantom-rect"
+                                height="195"
+                                width="360"
+                                x="305"
+                                y="445"
+                              />
+                              <foreignobject
+                                class="foreign-object"
+                                data-nodelabel="otherwise"
+                                height="195"
+                                width="360"
+                                x="305"
+                                y="445"
+                              >
+                                <div
+                                  class="custom-group"
+                                >
+                                  <div
+                                    class="custom-group__title"
+                                  >
+                                    <div
+                                      class="custom-group__title__img-circle"
+                                    >
+                                      <img
+                                        src=""
+                                      />
+                                    </div>
+                                    <span
+                                      title="otherwise"
+                                    >
+                                      otherwise
+                                    </span>
+                                    <div
+                                      style="display: contents;"
+                                    >
+                                      <button
+                                        class="container-controls"
+                                        data-testid="collapseButton-otherwise"
+                                        id="collapse-button-control"
+                                      >
+                                        <svg
+                                          aria-hidden="true"
+                                          class="pf-v5-svg"
+                                          data-testid="collapse-icon"
+                                          fill="currentColor"
+                                          height="1em"
+                                          role="img"
+                                          viewBox="0 0 512 512"
+                                          width="1em"
+                                        >
+                                          <path
+                                            d="M200 288H88c-21.4 0-32.1 25.8-17 41l32.9 31-99.2 99.3c-6.2 6.2-6.2 16.4 0 22.6l25.4 25.4c6.2 6.2 16.4 6.2 22.6 0L152 408l31.1 33c15.1 15.1 40.9 4.4 40.9-17V312c0-13.3-10.7-24-24-24zm112-64h112c21.4 0 32.1-25.9 17-41l-33-31 99.3-99.3c6.2-6.2 6.2-16.4 0-22.6L481.9 4.7c-6.2-6.2-16.4-6.2-22.6 0L360 104l-31.1-33C313.8 55.9 288 66.6 288 88v112c0 13.3 10.7 24 24 24zm96 136l33-31.1c15.1-15.1 4.4-40.9-17-40.9H312c-13.3 0-24 10.7-24 24v112c0 21.4 25.9 32.1 41 17l31-32.9 99.3 99.3c6.2 6.2 16.4 6.2 22.6 0l25.4-25.4c6.2-6.2 6.2-16.4 0-22.6L408 360zM183 71.1L152 104 52.7 4.7c-6.2-6.2-16.4-6.2-22.6 0L4.7 30.1c-6.2 6.2-6.2 16.4 0 22.6L104 152l-33 31.1C55.9 198.2 66.6 224 88 224h112c13.3 0 24-10.7 24-24V88c0-21.3-25.9-32-41-16.9z"
+                                          />
+                                        </svg>
+                                      </button>
+                                    </div>
+                                    <div
+                                      style="display: contents;"
+                                    >
+                                      <button
+                                        class="container-controls"
+                                        data-testid="contextualMenu-otherwise"
+                                        id="container-controls-contextual-menu"
+                                      >
+                                        <svg
+                                          aria-hidden="true"
+                                          class="pf-v5-svg"
+                                          fill="currentColor"
+                                          height="1em"
+                                          role="img"
+                                          viewBox="0 0 192 512"
+                                          width="1em"
+                                        >
+                                          <path
+                                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                                          />
+                                        </svg>
+                                      </button>
+                                    </div>
+                                  </div>
+                                </div>
+                              </foreignobject>
+                            </g>
+                          </g>
+                        </g>
+                        <g
+                          data-layer-id="default"
+                        >
+                          <g
+                            data-id="timer-1234-to-set-header-1234"
+                            data-kind="edge"
+                            data-type="edge"
+                            style="z-index: 0;"
+                          >
+                            <g
+                              class="pf-topology__edge"
+                              data-test-id="edge-handler"
+                            >
+                              <path
+                                class="pf-topology__edge__background"
+                                d="M440 132.5 L440 263.5"
+                              />
+                              <path
+                                class="pf-topology__edge__link pf-m-solid"
+                                d="M440 132.5 L440 277.5"
+                                style="animation-duration: 0s;"
+                              />
+                              <g
+                                class="pf-topology-connector-arrow pf-topology__edge"
+                                transform="translate(440, 263.5) rotate(90)"
+                              >
+                                <polygon
+                                  points=" 0,7 0,-7 14,0"
+                                />
+                                <polygon
+                                  fill-opacity="0"
+                                  stroke-width="0"
+                                />
+                              </g>
+                            </g>
+                          </g>
+                          <g
+                            data-id="set-header-1234-to-choice-1234"
+                            data-kind="edge"
+                            data-type="edge"
+                            style="z-index: 0;"
+                          >
+                            <g
+                              class="pf-topology__edge"
+                              data-test-id="edge-handler"
+                            >
+                              <path
+                                class="pf-topology__edge__background"
+                                d="M440 277.5 L440 86.5"
+                              />
+                              <path
+                                class="pf-topology__edge__link pf-m-solid"
+                                d="M440 277.5 L440 72.5"
+                                style="animation-duration: 0s;"
+                              />
+                              <g
+                                class="pf-topology-connector-arrow pf-topology__edge"
+                                transform="translate(440, 86.5) rotate(270)"
+                              >
+                                <polygon
+                                  points=" 0,7 0,-7 14,0"
+                                />
+                                <polygon
+                                  fill-opacity="0"
+                                  stroke-width="0"
+                                />
+                              </g>
+                            </g>
+                          </g>
+                          <g
+                            data-id="amqp-1234-to-amqp-1234"
+                            data-kind="edge"
+                            data-type="edge"
+                            style="z-index: 0;"
+                          >
+                            <g
+                              class="pf-topology__edge"
+                              data-test-id="edge-handler"
+                            >
+                              <path
+                                class="pf-topology__edge__background"
+                                d="M567.5 542.5 L0 0"
+                              />
+                              <path
+                                class="pf-topology__edge__link pf-m-solid"
+                                d="M567.5 542.5 L567.5 542.5"
+                                style="animation-duration: 0s;"
+                              />
+                              <g
+                                class="pf-topology-connector-arrow pf-topology__edge"
+                                transform="translate(0, 0) rotate(180)"
+                              >
+                                <polygon
+                                  points=" 0,7 0,-7 14,0"
+                                />
+                                <polygon
+                                  fill-opacity="0"
+                                  stroke-width="0"
+                                />
+                              </g>
+                            </g>
+                          </g>
+                          <g
+                            data-id="choice-1234-to-direct-1234"
+                            data-kind="edge"
+                            data-type="edge"
+                            style="z-index: 0;"
+                          >
+                            <g
+                              class="pf-topology__edge"
+                              data-test-id="edge-handler"
+                            >
+                              <path
+                                class="pf-topology__edge__background"
+                                d="M440 700 L440 793.5"
+                              />
+                              <path
+                                class="pf-topology__edge__link pf-m-solid"
+                                d="M440 700 L440 807.5"
+                                style="animation-duration: 0s;"
+                              />
+                              <g
+                                class="pf-topology-connector-arrow pf-topology__edge"
+                                transform="translate(440, 793.5) rotate(90)"
+                              >
+                                <polygon
+                                  points=" 0,7 0,-7 14,0"
+                                />
+                                <polygon
+                                  fill-opacity="0"
+                                  stroke-width="0"
+                                />
+                              </g>
+                            </g>
+                          </g>
+                          <g
+                            data-id="route-1234"
+                            data-kind="node"
+                            data-type="group"
+                          >
+                            <g
+                              class="custom-group"
+                            />
+                            <g
+                              data-id="timer-1234"
+                              data-kind="node"
+                              data-type="node"
+                              transform="translate(402.5, 95)"
+                            />
+                            <g
+                              data-id="set-header-1234"
+                              data-kind="node"
+                              data-type="node"
+                              transform="translate(402.5, 240)"
+                            />
+                            <g
+                              data-id="choice-1234"
+                              data-kind="node"
+                              data-type="group"
+                            >
+                              <g
+                                class="custom-group"
+                              />
+                              <g
+                                data-id="when-1234"
+                                data-kind="node"
+                                data-type="group"
+                              />
+                              <g
+                                data-id="otherwise-1234"
+                                data-kind="node"
+                                data-type="group"
+                              >
+                                <g
+                                  class="custom-group"
+                                />
+                                <g
+                                  data-id="amqp-1234"
+                                  data-kind="node"
+                                  data-type="node"
+                                  transform="translate(530, 505)"
+                                />
+                                <g
+                                  data-id="log-1234"
+                                  data-kind="node"
+                                  data-type="node"
+                                  transform="translate(365, 505)"
+                                />
+                              </g>
+                            </g>
+                            <g
+                              data-id="direct-1234"
+                              data-kind="node"
+                              data-type="node"
+                              transform="translate(402.5, 770)"
+                            />
+                          </g>
+                        </g>
+                        <g
+                          data-layer-id="top"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </div>
+                <span
+                  class="pf-topology-control-bar"
+                >
+                  <div
+                    class="pf-v5-c-toolbar"
+                    data-ouia-component-id="OUIA-Generated-Toolbar-5"
+                    data-ouia-component-type="PF5/Toolbar"
+                    data-ouia-safe="true"
+                    id="pf-topology-control-bar-10"
+                    style="background-color: transparent; padding: 0px;"
+                  >
+                    <div
+                      class="pf-v5-c-toolbar__content"
+                    >
+                      <div
+                        class="pf-v5-c-toolbar__content-section"
+                      >
+                        <div
+                          class="pf-v5-c-toolbar__group pf-m-space-items-none"
+                        >
+                          <div
+                            class="pf-v5-c-toolbar__item"
+                          >
+                            <div
+                              style="display: contents;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-21"
+                                data-ouia-component-type="PF5/Button"
+                                data-ouia-safe="true"
+                                id="zoom-in"
+                                type="button"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="pf-v5-svg"
+                                  fill="currentColor"
+                                  height="1em"
+                                  role="img"
+                                  viewBox="0 0 512 512"
+                                  width="1em"
+                                >
+                                  <path
+                                    d="M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z"
+                                  />
+                                </svg>
+                                <span
+                                  class="pf-v5-screen-reader"
+                                >
+                                  Zoom In
+                                </span>
+                              </button>
+                            </div>
+                          </div>
+                          <div
+                            class="pf-v5-c-toolbar__item"
+                          >
+                            <div
+                              style="display: contents;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-22"
+                                data-ouia-component-type="PF5/Button"
+                                data-ouia-safe="true"
+                                id="zoom-out"
+                                type="button"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="pf-v5-svg"
+                                  fill="currentColor"
+                                  height="1em"
+                                  role="img"
+                                  viewBox="0 0 512 512"
+                                  width="1em"
+                                >
+                                  <path
+                                    d="M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z"
+                                  />
+                                </svg>
+                                <span
+                                  class="pf-v5-screen-reader"
+                                >
+                                  Zoom Out
+                                </span>
+                              </button>
+                            </div>
+                          </div>
+                          <div
+                            class="pf-v5-c-toolbar__item"
+                          >
+                            <div
+                              style="display: contents;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-23"
+                                data-ouia-component-type="PF5/Button"
+                                data-ouia-safe="true"
+                                id="reset-view"
+                                type="button"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="pf-v5-svg"
+                                  fill="currentColor"
+                                  height="1em"
+                                  role="img"
+                                  viewBox="0 0 448 512"
+                                  width="1em"
+                                >
+                                  <path
+                                    d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"
+                                  />
+                                </svg>
+                                <span
+                                  class="pf-v5-screen-reader"
+                                >
+                                  Reset View
+                                </span>
+                              </button>
+                            </div>
+                          </div>
+                          <div
+                            class="pf-v5-c-toolbar__item"
+                          >
+                            <div
+                              style="display: contents;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-24"
+                                data-ouia-component-type="PF5/Button"
+                                data-ouia-safe="true"
+                                id="topology-control-bar-h_layout-button"
+                                type="button"
+                              >
+                                <span
+                                  class="pf-v5-c-icon"
+                                >
+                                  <span
+                                    class="pf-v5-c-icon__content"
+                                  >
+                                    <img
+                                      src=""
+                                    />
+                                  </span>
+                                </span>
+                                <span
+                                  class="pf-v5-screen-reader"
+                                >
+                                  Horizontal Layout
+                                </span>
+                              </button>
+                            </div>
+                          </div>
+                          <div
+                            class="pf-v5-c-toolbar__item"
+                          >
+                            <div
+                              style="display: contents;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-25"
+                                data-ouia-component-type="PF5/Button"
+                                data-ouia-safe="true"
+                                id="topology-control-bar-v_layout-button"
+                                type="button"
+                              >
+                                <span
+                                  class="pf-v5-c-icon"
+                                >
+                                  <span
+                                    class="pf-v5-c-icon__content"
+                                  >
+                                    <img
+                                      src=""
+                                    />
+                                  </span>
+                                </span>
+                                <span
+                                  class="pf-v5-screen-reader"
+                                >
+                                  Vertical Layout
+                                </span>
+                              </button>
+                            </div>
+                          </div>
+                          <div
+                            class="pf-v5-c-toolbar__item"
+                          >
+                            <div
+                              style="display: contents;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-26"
+                                data-ouia-component-type="PF5/Button"
+                                data-ouia-safe="true"
+                                id="topology-control-bar-catalog-button"
+                                type="button"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="pf-v5-svg"
+                                  fill="currentColor"
+                                  height="1em"
+                                  role="img"
+                                  viewBox="0 0 1088 1024"
+                                  width="1em"
+                                >
+                                  <path
+                                    d="M576,160 C687.3,88.6 874.6,32 960,32 L960,800 C898.8,783.1 738,760.5 576,864 L576,160 Z M1024,96 C1088,96 1088,162.8 1088,162.8 L1088,928 C1088,992 985.7,989.9 985.7,989.9 C863.1,804.7 576,992 576,992 L576,925.4 C863,728.7 1024,928 1024,928 L1024,96 Z M128,800 L128,32 C212.9,32 400.6,88.3 512,160 L512,864 C352,760.5 189.3,783.2 128,800 Z M512,925.4 L512,992 C512,992 227.9,805.8 102.5,989.9 C102.5,989.9 0,992 0,928 L0,162.8 C0,162.8 0,96 64,96 L64,928 C64,927.9 226,728.7 512,925.4 Z"
+                                  />
+                                </svg>
+                                <span
+                                  class="pf-v5-screen-reader"
+                                >
+                                  Open Catalog
+                                </span>
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="pf-v5-c-toolbar__content pf-m-hidden"
+                      hidden=""
+                    >
+                      <div
+                        class="pf-v5-c-toolbar__group"
+                      />
+                    </div>
+                  </div>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div
+            class="pf-v5-c-drawer__panel pf-m-resizable"
+            hidden=""
+            id="topology-resize-panel"
+            style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 210px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Canvas Empty state should render empty state when there is no visible flows 1`] = `
+<div>
+  <div
+    class="pf-v5-l-stack"
+  >
+    <div
+      class="pf-v5-l-stack__item pf-m-fill pf-topology-container"
+    >
+      <div
+        class="pf-v5-c-drawer pf-m-inline"
+      >
+        <div
+          class="pf-v5-c-drawer__main"
+        >
+          <div
+            class="pf-v5-c-drawer__content"
+          >
+            <div
+              class="pf-v5-c-drawer__body"
+            >
+              <div
+                class="pf-topology-content"
+              >
+                <div
+                  class="pf-topology-visualization-surface"
+                  data-test-id="topology"
+                >
+                  <svg
+                    class="pf-topology-visualization-surface__svg"
+                  >
+                    <g
+                      data-id="g1"
+                      data-kind="graph"
+                      data-type="graph"
+                    >
+                      <rect
+                        fill-opacity="0"
+                        height="0"
+                        width="0"
+                        x="0"
+                        y="0"
+                      />
+                      <g
+                        data-surface="true"
+                        transform="translate(0, 0) scale(1)"
+                      >
+                        <g
+                          data-layer-id="bottom"
+                        />
+                        <g
+                          data-layer-id="groups"
+                        />
+                        <g
+                          data-layer-id="default"
+                        />
+                        <g
+                          data-layer-id="top"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </div>
+                <div
+                  class="pf-v5-l-bullseye canvas-empty-state"
+                >
+                  <div
+                    class="pf-v5-c-card"
+                    data-ouia-component-id="OUIA-Generated-Card-2"
+                    data-ouia-component-type="PF5/Card"
+                    data-ouia-safe="true"
+                    id=""
+                  >
+                    <div
+                      class="pf-v5-c-empty-state"
+                      data-testid="visualization-empty-state"
+                    >
+                      <div
+                        class="pf-v5-c-empty-state__content"
+                      >
+                        <div
+                          class="pf-v5-c-empty-state__header"
+                        >
+                          <div
+                            class="pf-v5-c-empty-state__icon"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              class="pf-v5-svg"
+                              data-testid="eye-slash-icon"
+                              fill="currentColor"
+                              height="1em"
+                              role="img"
+                              viewBox="0 0 640 512"
+                              width="1em"
+                            >
+                              <path
+                                d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"
+                              />
+                            </svg>
+                          </div>
+                          <div
+                            class="pf-v5-c-empty-state__title"
+                          >
+                            <h4
+                              class="pf-v5-c-empty-state__title-text"
+                            >
+                              <p>
+                                There are no visible routes
+                              </p>
+                            </h4>
+                          </div>
+                        </div>
+                        <div
+                          class="pf-v5-c-empty-state__body"
+                        >
+                          <p>
+                            You can toggle the visibility of a route by using Routes list
+                          </p>
+                        </div>
+                        <div
+                          class="pf-v5-c-empty-state__footer"
+                        >
+                          <div
+                            class="pf-v5-c-empty-state__actions"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <span
+                  class="pf-topology-control-bar"
+                >
+                  <div
+                    class="pf-v5-c-toolbar"
+                    data-ouia-component-id="OUIA-Generated-Toolbar-8"
+                    data-ouia-component-type="PF5/Toolbar"
+                    data-ouia-safe="true"
+                    id="pf-topology-control-bar-16"
+                    style="background-color: transparent; padding: 0px;"
+                  >
+                    <div
+                      class="pf-v5-c-toolbar__content"
+                    >
+                      <div
+                        class="pf-v5-c-toolbar__content-section"
+                      >
+                        <div
+                          class="pf-v5-c-toolbar__group pf-m-space-items-none"
+                        >
+                          <div
+                            class="pf-v5-c-toolbar__item"
+                          >
+                            <div
+                              style="display: contents;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-37"
+                                data-ouia-component-type="PF5/Button"
+                                data-ouia-safe="true"
+                                id="zoom-in"
+                                type="button"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="pf-v5-svg"
+                                  fill="currentColor"
+                                  height="1em"
+                                  role="img"
+                                  viewBox="0 0 512 512"
+                                  width="1em"
+                                >
+                                  <path
+                                    d="M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z"
+                                  />
+                                </svg>
+                                <span
+                                  class="pf-v5-screen-reader"
+                                >
+                                  Zoom In
+                                </span>
+                              </button>
+                            </div>
+                          </div>
+                          <div
+                            class="pf-v5-c-toolbar__item"
+                          >
+                            <div
+                              style="display: contents;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-38"
+                                data-ouia-component-type="PF5/Button"
+                                data-ouia-safe="true"
+                                id="zoom-out"
+                                type="button"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="pf-v5-svg"
+                                  fill="currentColor"
+                                  height="1em"
+                                  role="img"
+                                  viewBox="0 0 512 512"
+                                  width="1em"
+                                >
+                                  <path
+                                    d="M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z"
+                                  />
+                                </svg>
+                                <span
+                                  class="pf-v5-screen-reader"
+                                >
+                                  Zoom Out
+                                </span>
+                              </button>
+                            </div>
+                          </div>
+                          <div
+                            class="pf-v5-c-toolbar__item"
+                          >
+                            <div
+                              style="display: contents;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-39"
+                                data-ouia-component-type="PF5/Button"
+                                data-ouia-safe="true"
+                                id="reset-view"
+                                type="button"
+                              >
+                                <svg
+                                  aria-hidden="true"
+                                  class="pf-v5-svg"
+                                  fill="currentColor"
+                                  height="1em"
+                                  role="img"
+                                  viewBox="0 0 448 512"
+                                  width="1em"
+                                >
+                                  <path
+                                    d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"
+                                  />
+                                </svg>
+                                <span
+                                  class="pf-v5-screen-reader"
+                                >
+                                  Reset View
+                                </span>
+                              </button>
+                            </div>
+                          </div>
+                          <div
+                            class="pf-v5-c-toolbar__item"
+                          >
+                            <div
+                              style="display: contents;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-40"
+                                data-ouia-component-type="PF5/Button"
+                                data-ouia-safe="true"
+                                id="topology-control-bar-h_layout-button"
+                                type="button"
                               >
-                                <div
-                                  class="custom-group"
+                                <span
+                                  class="pf-v5-c-icon"
                                 >
-                                  <div
-                                    class="custom-group__title"
+                                  <span
+                                    class="pf-v5-c-icon__content"
                                   >
-                                    <div
-                                      class="custom-group__title__img-circle"
-                                    >
-                                      <img
-                                        src=""
-                                      />
-                                    </div>
-                                    <span
-                                      title="otherwise"
-                                    >
-                                      otherwise
-                                    </span>
-                                    <div
-                                      style="display: contents;"
-                                    >
-                                      <button
-                                        class="container-controls"
-                                        data-testid="collapseButton-otherwise"
-                                        id="collapse-button-control"
-                                      >
-                                        <svg
-                                          aria-hidden="true"
-                                          class="pf-v5-svg"
-                                          data-testid="collapse-icon"
-                                          fill="currentColor"
-                                          height="1em"
-                                          role="img"
-                                          viewBox="0 0 512 512"
-                                          width="1em"
-                                        >
-                                          <path
-                                            d="M200 288H88c-21.4 0-32.1 25.8-17 41l32.9 31-99.2 99.3c-6.2 6.2-6.2 16.4 0 22.6l25.4 25.4c6.2 6.2 16.4 6.2 22.6 0L152 408l31.1 33c15.1 15.1 40.9 4.4 40.9-17V312c0-13.3-10.7-24-24-24zm112-64h112c21.4 0 32.1-25.9 17-41l-33-31 99.3-99.3c6.2-6.2 6.2-16.4 0-22.6L481.9 4.7c-6.2-6.2-16.4-6.2-22.6 0L360 104l-31.1-33C313.8 55.9 288 66.6 288 88v112c0 13.3 10.7 24 24 24zm96 136l33-31.1c15.1-15.1 4.4-40.9-17-40.9H312c-13.3 0-24 10.7-24 24v112c0 21.4 25.9 32.1 41 17l31-32.9 99.3 99.3c6.2 6.2 16.4 6.2 22.6 0l25.4-25.4c6.2-6.2 6.2-16.4 0-22.6L408 360zM183 71.1L152 104 52.7 4.7c-6.2-6.2-16.4-6.2-22.6 0L4.7 30.1c-6.2 6.2-6.2 16.4 0 22.6L104 152l-33 31.1C55.9 198.2 66.6 224 88 224h112c13.3 0 24-10.7 24-24V88c0-21.3-25.9-32-41-16.9z"
-                                          />
-                                        </svg>
-                                      </button>
-                                    </div>
-                                    <div
-                                      style="display: contents;"
-                                    >
-                                      <button
-                                        class="container-controls"
-                                        data-testid="contextualMenu-otherwise"
-                                        id="container-controls-contextual-menu"
-                                      >
-                                        <svg
-                                          aria-hidden="true"
-                                          class="pf-v5-svg"
-                                          fill="currentColor"
-                                          height="1em"
-                                          role="img"
-                                          viewBox="0 0 192 512"
-                                          width="1em"
-                                        >
-                                          <path
-                                            d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                                          />
-                                        </svg>
-                                      </button>
-                                    </div>
-                                  </div>
-                                </div>
-                              </foreignobject>
-                            </g>
-                          </g>
-                        </g>
-                        <g
-                          data-layer-id="default"
-                        >
-                          <g
-                            data-id="timer-1234-to-set-header-1234"
-                            data-kind="edge"
-                            data-type="edge"
-                            style="z-index: 0;"
+                                    <img
+                                      src=""
+                                    />
+                                  </span>
+                                </span>
+                                <span
+                                  class="pf-v5-screen-reader"
+                                >
+                                  Horizontal Layout
+                                </span>
+                              </button>
+                            </div>
+                          </div>
+                          <div
+                            class="pf-v5-c-toolbar__item"
                           >
-                            <g
-                              class="pf-topology__edge"
-                              data-test-id="edge-handler"
+                            <div
+                              style="display: contents;"
                             >
-                              <path
-                                class="pf-topology__edge__background"
-                                d="M37.5 37.5 L0 0"
-                              />
-                              <path
-                                class="pf-topology__edge__link pf-m-solid"
-                                d="M37.5 37.5 L37.5 37.5"
-                                style="animation-duration: 0s;"
-                              />
-                              <g
-                                class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(0, 0) rotate(180)"
+                              <button
+                                aria-disabled="false"
+                                class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-41"
+                                data-ouia-component-type="PF5/Button"
+                                data-ouia-safe="true"
+                                id="topology-control-bar-v_layout-button"
+                                type="button"
                               >
-                                <polygon
-                                  points=" 0,7 0,-7 14,0"
-                                />
-                                <polygon
-                                  fill-opacity="0"
-                                  stroke-width="0"
-                                />
-                              </g>
-                            </g>
-                          </g>
-                          <g
-                            data-id="set-header-1234-to-choice-1234"
-                            data-kind="edge"
-                            data-type="edge"
-                            style="z-index: 0;"
+                                <span
+                                  class="pf-v5-c-icon"
+                                >
+                                  <span
+                                    class="pf-v5-c-icon__content"
+                                  >
+                                    <img
+                                      src=""
+                                    />
+                                  </span>
+                                </span>
+                                <span
+                                  class="pf-v5-screen-reader"
+                                >
+                                  Vertical Layout
+                                </span>
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="pf-v5-c-toolbar__content pf-m-hidden"
+                      hidden=""
+                    >
+                      <div
+                        class="pf-v5-c-toolbar__group"
+                      />
+                    </div>
+                  </div>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div
+            class="pf-v5-c-drawer__panel pf-m-resizable"
+            hidden=""
+            id="topology-resize-panel"
+            style="--pf-v5-c-drawer__panel--md--FlexBasis: 500px; --pf-v5-c-drawer__panel--md--FlexBasis--min: 210px; --pf-v5-c-drawer__panel--md--FlexBasis--max: 100%;"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Canvas Empty state should render empty state when there is no visual entity 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-l-stack"
+  >
+    <div
+      class="pf-v5-l-stack__item pf-m-fill pf-topology-container"
+    >
+      <div
+        class="pf-v5-c-drawer pf-m-inline"
+      >
+        <div
+          class="pf-v5-c-drawer__main"
+        >
+          <div
+            class="pf-v5-c-drawer__content"
+          >
+            <div
+              class="pf-v5-c-drawer__body"
+            >
+              <div
+                class="pf-topology-content"
+              >
+                <div
+                  class="pf-topology-visualization-surface"
+                  data-test-id="topology"
+                >
+                  <svg
+                    class="pf-topology-visualization-surface__svg"
+                  >
+                    <g
+                      data-id="g1"
+                      data-kind="graph"
+                      data-type="graph"
+                    >
+                      <rect
+                        fill-opacity="0"
+                        height="0"
+                        width="0"
+                        x="0"
+                        y="0"
+                      />
+                      <g
+                        data-surface="true"
+                        transform="translate(0, 0) scale(1)"
+                      >
+                        <g
+                          data-layer-id="bottom"
+                        />
+                        <g
+                          data-layer-id="groups"
+                        />
+                        <g
+                          data-layer-id="default"
+                        />
+                        <g
+                          data-layer-id="top"
+                        />
+                      </g>
+                    </g>
+                  </svg>
+                </div>
+                <div
+                  class="pf-v5-l-bullseye canvas-empty-state"
+                >
+                  <div
+                    class="pf-v5-c-card"
+                    data-ouia-component-id="OUIA-Generated-Card-1"
+                    data-ouia-component-type="PF5/Card"
+                    data-ouia-safe="true"
+                    id=""
+                  >
+                    <div
+                      class="pf-v5-c-empty-state"
+                      data-testid="visualization-empty-state"
+                    >
+                      <div
+                        class="pf-v5-c-empty-state__content"
+                      >
+                        <div
+                          class="pf-v5-c-empty-state__header"
+                        >
+                          <div
+                            class="pf-v5-c-empty-state__icon"
                           >
-                            <g
-                              class="pf-topology__edge"
-                              data-test-id="edge-handler"
+                            <svg
+                              aria-hidden="true"
+                              class="pf-v5-svg"
+                              data-testid="cubes-icon"
+                              fill="currentColor"
+                              height="1em"
+                              role="img"
+                              viewBox="0 0 512 512"
+                              width="1em"
                             >
                               <path
-                                class="pf-topology__edge__background"
-                                d="M37.5 37.5 L-106 37.5"
-                              />
-                              <path
-                                class="pf-topology__edge__link pf-m-solid"
-                                d="M37.5 37.5 L-120 37.5"
-                                style="animation-duration: 0s;"
+                                d="M488.6 250.2L392 214V105.5c0-15-9.3-28.4-23.4-33.7l-100-37.5c-8.1-3.1-17.1-3.1-25.3 0l-100 37.5c-14.1 5.3-23.4 18.7-23.4 33.7V214l-96.6 36.2C9.3 255.5 0 268.9 0 283.9V394c0 13.6 7.7 26.1 19.9 32.2l100 50c10.1 5.1 22.1 5.1 32.2 0l103.9-52 103.9 52c10.1 5.1 22.1 5.1 32.2 0l100-50c12.2-6.1 19.9-18.6 19.9-32.2V283.9c0-15-9.3-28.4-23.4-33.7zM358 214.8l-85 31.9v-68.2l85-37v73.3zM154 104.1l102-38.2 102 38.2v.6l-102 41.4-102-41.4v-.6zm84 291.1l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6zm240 112l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6z"
                               />
-                              <g
-                                class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(-106, 37.5) rotate(180)"
-                              >
-                                <polygon
-                                  points=" 0,7 0,-7 14,0"
-                                />
-                                <polygon
-                                  fill-opacity="0"
-                                  stroke-width="0"
-                                />
-                              </g>
-                            </g>
-                          </g>
-                          <g
-                            data-id="amqp-1234-to-amqp-1234"
-                            data-kind="edge"
-                            data-type="edge"
-                            style="z-index: 0;"
+                            </svg>
+                          </div>
+                          <div
+                            class="pf-v5-c-empty-state__title"
                           >
-                            <g
-                              class="pf-topology__edge"
-                              data-test-id="edge-handler"
+                            <h4
+                              class="pf-v5-c-empty-state__title-text"
                             >
-                              <path
-                                class="pf-topology__edge__background"
-                                d="M37.5 37.5 L0 0"
-                              />
-                              <path
-                                class="pf-topology__edge__link pf-m-solid"
-                                d="M37.5 37.5 L37.5 37.5"
-                                style="animation-duration: 0s;"
-                              />
-                              <g
-                                class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(0, 0) rotate(180)"
-                              >
-                                <polygon
-                                  points=" 0,7 0,-7 14,0"
-                                />
-                                <polygon
-                                  fill-opacity="0"
-                                  stroke-width="0"
-                                />
-                              </g>
-                            </g>
-                          </g>
-                          <g
-                            data-id="choice-1234-to-direct-1234"
-                            data-kind="edge"
-                            data-type="edge"
-                            style="z-index: 0;"
+                              <p>
+                                There are no routes defined
+                              </p>
+                            </h4>
+                          </div>
+                        </div>
+                        <div
+                          class="pf-v5-c-empty-state__body"
+                        >
+                          <p>
+                            You can create a new route using the New button
+                          </p>
+                        </div>
+                        <div
+                          class="pf-v5-c-empty-state__footer"
+                        >
+                          <div
+                            class="pf-v5-c-empty-state__actions"
                           >
-                            <g
-                              class="pf-topology__edge"
-                              data-test-id="edge-handler"
+                            <div
+                              class="pf-v5-c-menu-toggle pf-m-full-width pf-m-split-button pf-m-action"
                             >
-                              <path
-                                class="pf-topology__edge__background"
-                                d="M-120 37.5 L23.5 37.5"
-                              />
-                              <path
-                                class="pf-topology__edge__link pf-m-solid"
-                                d="M-120 37.5 L37.5 37.5"
-                                style="animation-duration: 0s;"
-                              />
-                              <g
-                                class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(23.5, 37.5) rotate(0)"
+                              <div
+                                style="display: contents;"
                               >
-                                <polygon
-                                  points=" 0,7 0,-7 14,0"
-                                />
-                                <polygon
-                                  fill-opacity="0"
-                                  stroke-width="0"
-                                />
-                              </g>
-                            </g>
-                          </g>
-                          <g
-                            data-id="route-1234"
-                            data-kind="node"
-                            data-type="group"
-                          >
-                            <g
-                              class="custom-group"
-                            />
-                            <g
-                              data-id="timer-1234"
-                              data-kind="node"
-                              data-type="node"
-                              transform="translate(0, 0)"
-                            />
-                            <g
-                              data-id="set-header-1234"
-                              data-kind="node"
-                              data-type="node"
-                              transform="translate(0, 0)"
-                            />
-                            <g
-                              data-id="choice-1234"
-                              data-kind="node"
-                              data-type="group"
-                            >
-                              <g
-                                class="custom-group"
-                              />
-                              <g
-                                data-id="when-1234"
-                                data-kind="node"
-                                data-type="group"
-                              />
-                              <g
-                                data-id="otherwise-1234"
-                                data-kind="node"
-                                data-type="group"
+                                <button
+                                  aria-label="DSL list"
+                                  class="pf-v5-c-menu-toggle__button"
+                                  data-testid="dsl-list-btn"
+                                  id="dsl-list-btn"
+                                  type="button"
+                                >
+                                  <svg
+                                    aria-hidden="true"
+                                    class="pf-v5-svg"
+                                    fill="currentColor"
+                                    height="1em"
+                                    role="img"
+                                    viewBox="0 0 448 512"
+                                    width="1em"
+                                  >
+                                    <path
+                                      d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+                                    />
+                                  </svg>
+                                  <span
+                                    class="pf-v5-u-m-sm"
+                                  >
+                                    New
+                                  </span>
+                                </button>
+                              </div>
+                              <button
+                                aria-expanded="false"
+                                class="pf-v5-c-menu-toggle__button"
+                                data-ouia-component-id="OUIA-Generated-MenuToggle-1"
+                                data-ouia-component-type="PF5/MenuToggle"
+                                data-ouia-safe="true"
+                                data-testid="viz-dsl-list-dropdown"
+                                type="button"
                               >
-                                <g
-                                  class="custom-group"
-                                />
-                                <g
-                                  data-id="amqp-1234"
-                                  data-kind="node"
-                                  data-type="node"
-                                  transform="translate(0, 0)"
-                                />
-                                <g
-                                  data-id="log-1234"
-                                  data-kind="node"
-                                  data-type="node"
-                                  transform="translate(0, 0)"
-                                />
-                              </g>
-                            </g>
-                            <g
-                              data-id="direct-1234"
-                              data-kind="node"
-                              data-type="node"
-                              transform="translate(0, 0)"
-                            />
-                          </g>
-                        </g>
-                        <g
-                          data-layer-id="top"
-                        />
-                      </g>
-                    </g>
-                  </svg>
+                                <span
+                                  class="pf-v5-c-menu-toggle__controls"
+                                >
+                                  <span
+                                    class="pf-v5-c-menu-toggle__toggle-icon"
+                                  >
+                                    <svg
+                                      aria-hidden="true"
+                                      class="pf-v5-svg"
+                                      fill="currentColor"
+                                      height="1em"
+                                      role="img"
+                                      viewBox="0 0 320 512"
+                                      width="1em"
+                                    >
+                                      <path
+                                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                                      />
+                                    </svg>
+                                  </span>
+                                </span>
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                 </div>
                 <span
                   class="pf-topology-control-bar"
                 >
                   <div
                     class="pf-v5-c-toolbar"
-                    data-ouia-component-id="OUIA-Generated-Toolbar-1"
+                    data-ouia-component-id="OUIA-Generated-Toolbar-7"
                     data-ouia-component-type="PF5/Toolbar"
                     data-ouia-safe="true"
-                    id="pf-topology-control-bar-0"
+                    id="pf-topology-control-bar-14"
                     style="background-color: transparent; padding: 0px;"
                   >
                     <div
@@ -1197,7 +2134,7 @@ exports[`Canvas should render correctly 1`] = `
                               <button
                                 aria-disabled="false"
                                 class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
-                                data-ouia-component-id="OUIA-Generated-Button-tertiary-1"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-32"
                                 data-ouia-component-type="PF5/Button"
                                 data-ouia-safe="true"
                                 id="zoom-in"
@@ -1233,7 +2170,7 @@ exports[`Canvas should render correctly 1`] = `
                               <button
                                 aria-disabled="false"
                                 class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
-                                data-ouia-component-id="OUIA-Generated-Button-tertiary-2"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-33"
                                 data-ouia-component-type="PF5/Button"
                                 data-ouia-safe="true"
                                 id="zoom-out"
@@ -1269,10 +2206,10 @@ exports[`Canvas should render correctly 1`] = `
                               <button
                                 aria-disabled="false"
                                 class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
-                                data-ouia-component-id="OUIA-Generated-Button-tertiary-3"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-34"
                                 data-ouia-component-type="PF5/Button"
                                 data-ouia-safe="true"
-                                id="fit-to-screen"
+                                id="reset-view"
                                 type="button"
                               >
                                 <svg
@@ -1285,13 +2222,13 @@ exports[`Canvas should render correctly 1`] = `
                                   width="1em"
                                 >
                                   <path
-                                    d="M448 344v112a23.94 23.94 0 0 1-24 24H312c-21.39 0-32.09-25.9-17-41l36.2-36.2L224 295.6 116.77 402.9 153 439c15.09 15.1 4.39 41-17 41H24a23.94 23.94 0 0 1-24-24V344c0-21.4 25.89-32.1 41-17l36.19 36.2L184.46 256 77.18 148.7 41 185c-15.1 15.1-41 4.4-41-17V56a23.94 23.94 0 0 1 24-24h112c21.39 0 32.09 25.9 17 41l-36.2 36.2L224 216.4l107.23-107.3L295 73c-15.09-15.1-4.39-41 17-41h112a23.94 23.94 0 0 1 24 24v112c0 21.4-25.89 32.1-41 17l-36.19-36.2L263.54 256l107.28 107.3L407 327.1c15.1-15.2 41-4.5 41 16.9z"
+                                    d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"
                                   />
                                 </svg>
                                 <span
                                   class="pf-v5-screen-reader"
                                 >
-                                  Fit to Screen
+                                  Reset View
                                 </span>
                               </button>
                             </div>
@@ -1305,29 +2242,61 @@ exports[`Canvas should render correctly 1`] = `
                               <button
                                 aria-disabled="false"
                                 class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
-                                data-ouia-component-id="OUIA-Generated-Button-tertiary-4"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-35"
                                 data-ouia-component-type="PF5/Button"
                                 data-ouia-safe="true"
-                                id="reset-view"
+                                id="topology-control-bar-h_layout-button"
                                 type="button"
                               >
-                                <svg
-                                  aria-hidden="true"
-                                  class="pf-v5-svg"
-                                  fill="currentColor"
-                                  height="1em"
-                                  role="img"
-                                  viewBox="0 0 448 512"
-                                  width="1em"
+                                <span
+                                  class="pf-v5-c-icon"
                                 >
-                                  <path
-                                    d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"
-                                  />
-                                </svg>
+                                  <span
+                                    class="pf-v5-c-icon__content"
+                                  >
+                                    <img
+                                      src=""
+                                    />
+                                  </span>
+                                </span>
                                 <span
                                   class="pf-v5-screen-reader"
                                 >
-                                  Reset View
+                                  Horizontal Layout
+                                </span>
+                              </button>
+                            </div>
+                          </div>
+                          <div
+                            class="pf-v5-c-toolbar__item"
+                          >
+                            <div
+                              style="display: contents;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-36"
+                                data-ouia-component-type="PF5/Button"
+                                data-ouia-safe="true"
+                                id="topology-control-bar-v_layout-button"
+                                type="button"
+                              >
+                                <span
+                                  class="pf-v5-c-icon"
+                                >
+                                  <span
+                                    class="pf-v5-c-icon__content"
+                                  >
+                                    <img
+                                      src=""
+                                    />
+                                  </span>
+                                </span>
+                                <span
+                                  class="pf-v5-screen-reader"
+                                >
+                                  Vertical Layout
                                 </span>
                               </button>
                             </div>
@@ -1358,11 +2327,11 @@ exports[`Canvas should render correctly 1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`Canvas should render correctly with more routes  1`] = `
-<div>
+exports[`Canvas should render correctly 1`] = `
+<DocumentFragment>
   <div
     class="pf-v5-l-stack"
   >
@@ -1405,7 +2374,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
                       />
                       <g
                         data-surface="true"
-                        transform="translate(0, 0) scale(1)"
+                        transform="translate(-0.39215686274509803, -0.5140056022408963) scale(0.0011204481792717086)"
                       >
                         <g
                           data-layer-id="bottom"
@@ -1422,18 +2391,18 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             <g>
                               <rect
                                 class="phantom-rect"
-                                height="435"
-                                width="435"
-                                x="-180"
-                                y="-180"
+                                height="892.5"
+                                width="870"
+                                x="-85"
+                                y="12.5"
                               />
                               <foreignobject
                                 class="foreign-object"
                                 data-nodelabel="route-8888"
-                                height="435"
-                                width="435"
-                                x="-180"
-                                y="-180"
+                                height="892.5"
+                                width="870"
+                                x="-85"
+                                y="12.5"
                               >
                                 <div
                                   class="custom-group"
@@ -1514,18 +2483,18 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             <g>
                               <rect
                                 class="phantom-rect"
-                                height="315"
-                                width="315"
-                                x="-120"
-                                y="-120"
+                                height="627.5"
+                                width="750"
+                                x="-25"
+                                y="72.5"
                               />
                               <foreignobject
                                 class="foreign-object"
                                 data-nodelabel="choice"
-                                height="315"
-                                width="315"
-                                x="-120"
-                                y="-120"
+                                height="627.5"
+                                width="750"
+                                x="-25"
+                                y="72.5"
                               >
                                 <div
                                   class="custom-group"
@@ -1607,17 +2576,17 @@ exports[`Canvas should render correctly with more routes  1`] = `
                               <rect
                                 class="phantom-rect"
                                 height="195"
-                                width="195"
-                                x="-60"
-                                y="-60"
+                                width="360"
+                                x="305"
+                                y="445"
                               />
                               <foreignobject
                                 class="foreign-object"
                                 data-nodelabel="otherwise"
                                 height="195"
-                                width="195"
-                                x="-60"
-                                y="-60"
+                                width="360"
+                                x="305"
+                                y="445"
                               >
                                 <div
                                   class="custom-group"
@@ -1705,16 +2674,16 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M37.5 37.5 L0 0"
+                                d="M440 132.5 L440 263.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-solid"
-                                d="M37.5 37.5 L37.5 37.5"
+                                d="M440 132.5 L440 277.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(0, 0) rotate(180)"
+                                transform="translate(440, 263.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -1738,16 +2707,16 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M37.5 37.5 L-106 37.5"
+                                d="M440 277.5 L440 86.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-solid"
-                                d="M37.5 37.5 L-120 37.5"
+                                d="M440 277.5 L440 72.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(-106, 37.5) rotate(180)"
+                                transform="translate(440, 86.5) rotate(270)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -1771,11 +2740,11 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M37.5 37.5 L0 0"
+                                d="M567.5 542.5 L0 0"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-solid"
-                                d="M37.5 37.5 L37.5 37.5"
+                                d="M567.5 542.5 L567.5 542.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
@@ -1804,16 +2773,16 @@ exports[`Canvas should render correctly with more routes  1`] = `
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M-120 37.5 L23.5 37.5"
+                                d="M440 700 L440 793.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-solid"
-                                d="M-120 37.5 L37.5 37.5"
+                                d="M440 700 L440 807.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(23.5, 37.5) rotate(0)"
+                                transform="translate(440, 793.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -1837,13 +2806,13 @@ exports[`Canvas should render correctly with more routes  1`] = `
                               data-id="timer-1234"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(0, 0)"
+                              transform="translate(402.5, 95)"
                             />
                             <g
                               data-id="set-header-1234"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(0, 0)"
+                              transform="translate(402.5, 240)"
                             />
                             <g
                               data-id="choice-1234"
@@ -1870,13 +2839,13 @@ exports[`Canvas should render correctly with more routes  1`] = `
                                   data-id="amqp-1234"
                                   data-kind="node"
                                   data-type="node"
-                                  transform="translate(0, 0)"
+                                  transform="translate(530, 505)"
                                 />
                                 <g
                                   data-id="log-1234"
                                   data-kind="node"
                                   data-type="node"
-                                  transform="translate(0, 0)"
+                                  transform="translate(365, 505)"
                                 />
                               </g>
                             </g>
@@ -1884,7 +2853,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
                               data-id="direct-1234"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(0, 0)"
+                              transform="translate(402.5, 770)"
                             />
                           </g>
                         </g>
@@ -1900,10 +2869,10 @@ exports[`Canvas should render correctly with more routes  1`] = `
                 >
                   <div
                     class="pf-v5-c-toolbar"
-                    data-ouia-component-id="OUIA-Generated-Toolbar-2"
+                    data-ouia-component-id="OUIA-Generated-Toolbar-1"
                     data-ouia-component-type="PF5/Toolbar"
                     data-ouia-safe="true"
-                    id="pf-topology-control-bar-2"
+                    id="pf-topology-control-bar-0"
                     style="background-color: transparent; padding: 0px;"
                   >
                     <div
@@ -1924,7 +2893,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
                               <button
                                 aria-disabled="false"
                                 class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
-                                data-ouia-component-id="OUIA-Generated-Button-tertiary-5"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-1"
                                 data-ouia-component-type="PF5/Button"
                                 data-ouia-safe="true"
                                 id="zoom-in"
@@ -1960,7 +2929,7 @@ exports[`Canvas should render correctly with more routes  1`] = `
                               <button
                                 aria-disabled="false"
                                 class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
-                                data-ouia-component-id="OUIA-Generated-Button-tertiary-6"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-2"
                                 data-ouia-component-type="PF5/Button"
                                 data-ouia-safe="true"
                                 id="zoom-out"
@@ -1996,10 +2965,10 @@ exports[`Canvas should render correctly with more routes  1`] = `
                               <button
                                 aria-disabled="false"
                                 class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
-                                data-ouia-component-id="OUIA-Generated-Button-tertiary-7"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-3"
                                 data-ouia-component-type="PF5/Button"
                                 data-ouia-safe="true"
-                                id="fit-to-screen"
+                                id="reset-view"
                                 type="button"
                               >
                                 <svg
@@ -2012,13 +2981,13 @@ exports[`Canvas should render correctly with more routes  1`] = `
                                   width="1em"
                                 >
                                   <path
-                                    d="M448 344v112a23.94 23.94 0 0 1-24 24H312c-21.39 0-32.09-25.9-17-41l36.2-36.2L224 295.6 116.77 402.9 153 439c15.09 15.1 4.39 41-17 41H24a23.94 23.94 0 0 1-24-24V344c0-21.4 25.89-32.1 41-17l36.19 36.2L184.46 256 77.18 148.7 41 185c-15.1 15.1-41 4.4-41-17V56a23.94 23.94 0 0 1 24-24h112c21.39 0 32.09 25.9 17 41l-36.2 36.2L224 216.4l107.23-107.3L295 73c-15.09-15.1-4.39-41 17-41h112a23.94 23.94 0 0 1 24 24v112c0 21.4-25.89 32.1-41 17l-36.19-36.2L263.54 256l107.28 107.3L407 327.1c15.1-15.2 41-4.5 41 16.9z"
+                                    d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"
                                   />
                                 </svg>
                                 <span
                                   class="pf-v5-screen-reader"
                                 >
-                                  Fit to Screen
+                                  Reset View
                                 </span>
                               </button>
                             </div>
@@ -2032,29 +3001,61 @@ exports[`Canvas should render correctly with more routes  1`] = `
                               <button
                                 aria-disabled="false"
                                 class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
-                                data-ouia-component-id="OUIA-Generated-Button-tertiary-8"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-4"
                                 data-ouia-component-type="PF5/Button"
                                 data-ouia-safe="true"
-                                id="reset-view"
+                                id="topology-control-bar-h_layout-button"
                                 type="button"
                               >
-                                <svg
-                                  aria-hidden="true"
-                                  class="pf-v5-svg"
-                                  fill="currentColor"
-                                  height="1em"
-                                  role="img"
-                                  viewBox="0 0 448 512"
-                                  width="1em"
+                                <span
+                                  class="pf-v5-c-icon"
                                 >
-                                  <path
-                                    d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"
-                                  />
-                                </svg>
+                                  <span
+                                    class="pf-v5-c-icon__content"
+                                  >
+                                    <img
+                                      src=""
+                                    />
+                                  </span>
+                                </span>
                                 <span
                                   class="pf-v5-screen-reader"
                                 >
-                                  Reset View
+                                  Horizontal Layout
+                                </span>
+                              </button>
+                            </div>
+                          </div>
+                          <div
+                            class="pf-v5-c-toolbar__item"
+                          >
+                            <div
+                              style="display: contents;"
+                            >
+                              <button
+                                aria-disabled="false"
+                                class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-5"
+                                data-ouia-component-type="PF5/Button"
+                                data-ouia-safe="true"
+                                id="topology-control-bar-v_layout-button"
+                                type="button"
+                              >
+                                <span
+                                  class="pf-v5-c-icon"
+                                >
+                                  <span
+                                    class="pf-v5-c-icon__content"
+                                  >
+                                    <img
+                                      src=""
+                                    />
+                                  </span>
+                                </span>
+                                <span
+                                  class="pf-v5-screen-reader"
+                                >
+                                  Vertical Layout
                                 </span>
                               </button>
                             </div>
@@ -2085,11 +3086,11 @@ exports[`Canvas should render correctly with more routes  1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
-exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is provided 1`] = `
-<div>
+exports[`Canvas should render correctly with more routes  1`] = `
+<DocumentFragment>
   <div
     class="pf-v5-l-stack"
   >
@@ -2132,7 +3133,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                       />
                       <g
                         data-surface="true"
-                        transform="translate(0, 0) scale(1)"
+                        transform="translate(-0.39215686274509803, -0.5140056022408963) scale(0.0011204481792717086)"
                       >
                         <g
                           data-layer-id="bottom"
@@ -2149,18 +3150,18 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                             <g>
                               <rect
                                 class="phantom-rect"
-                                height="435"
-                                width="435"
-                                x="-180"
-                                y="-180"
+                                height="892.5"
+                                width="870"
+                                x="-85"
+                                y="12.5"
                               />
                               <foreignobject
                                 class="foreign-object"
                                 data-nodelabel="route-8888"
-                                height="435"
-                                width="435"
-                                x="-180"
-                                y="-180"
+                                height="892.5"
+                                width="870"
+                                x="-85"
+                                y="12.5"
                               >
                                 <div
                                   class="custom-group"
@@ -2241,18 +3242,18 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                             <g>
                               <rect
                                 class="phantom-rect"
-                                height="315"
-                                width="315"
-                                x="-120"
-                                y="-120"
+                                height="627.5"
+                                width="750"
+                                x="-25"
+                                y="72.5"
                               />
                               <foreignobject
                                 class="foreign-object"
                                 data-nodelabel="choice"
-                                height="315"
-                                width="315"
-                                x="-120"
-                                y="-120"
+                                height="627.5"
+                                width="750"
+                                x="-25"
+                                y="72.5"
                               >
                                 <div
                                   class="custom-group"
@@ -2334,17 +3335,17 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                               <rect
                                 class="phantom-rect"
                                 height="195"
-                                width="195"
-                                x="-60"
-                                y="-60"
+                                width="360"
+                                x="305"
+                                y="445"
                               />
                               <foreignobject
                                 class="foreign-object"
                                 data-nodelabel="otherwise"
                                 height="195"
-                                width="195"
-                                x="-60"
-                                y="-60"
+                                width="360"
+                                x="305"
+                                y="445"
                               >
                                 <div
                                   class="custom-group"
@@ -2432,16 +3433,16 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M37.5 37.5 L0 0"
+                                d="M440 132.5 L440 263.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-solid"
-                                d="M37.5 37.5 L37.5 37.5"
+                                d="M440 132.5 L440 277.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(0, 0) rotate(180)"
+                                transform="translate(440, 263.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -2465,16 +3466,16 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M37.5 37.5 L-106 37.5"
+                                d="M440 277.5 L440 86.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-solid"
-                                d="M37.5 37.5 L-120 37.5"
+                                d="M440 277.5 L440 72.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(-106, 37.5) rotate(180)"
+                                transform="translate(440, 86.5) rotate(270)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -2498,11 +3499,11 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M37.5 37.5 L0 0"
+                                d="M567.5 542.5 L0 0"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-solid"
-                                d="M37.5 37.5 L37.5 37.5"
+                                d="M567.5 542.5 L567.5 542.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
@@ -2531,16 +3532,16 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                             >
                               <path
                                 class="pf-topology__edge__background"
-                                d="M-120 37.5 L23.5 37.5"
+                                d="M440 700 L440 793.5"
                               />
                               <path
                                 class="pf-topology__edge__link pf-m-solid"
-                                d="M-120 37.5 L37.5 37.5"
+                                d="M440 700 L440 807.5"
                                 style="animation-duration: 0s;"
                               />
                               <g
                                 class="pf-topology-connector-arrow pf-topology__edge"
-                                transform="translate(23.5, 37.5) rotate(0)"
+                                transform="translate(440, 793.5) rotate(90)"
                               >
                                 <polygon
                                   points=" 0,7 0,-7 14,0"
@@ -2564,13 +3565,13 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                               data-id="timer-1234"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(0, 0)"
+                              transform="translate(402.5, 95)"
                             />
                             <g
                               data-id="set-header-1234"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(0, 0)"
+                              transform="translate(402.5, 240)"
                             />
                             <g
                               data-id="choice-1234"
@@ -2597,13 +3598,13 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                                   data-id="amqp-1234"
                                   data-kind="node"
                                   data-type="node"
-                                  transform="translate(0, 0)"
+                                  transform="translate(530, 505)"
                                 />
                                 <g
                                   data-id="log-1234"
                                   data-kind="node"
                                   data-type="node"
-                                  transform="translate(0, 0)"
+                                  transform="translate(365, 505)"
                                 />
                               </g>
                             </g>
@@ -2611,7 +3612,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                               data-id="direct-1234"
                               data-kind="node"
                               data-type="node"
-                              transform="translate(0, 0)"
+                              transform="translate(402.5, 770)"
                             />
                           </g>
                         </g>
@@ -2627,10 +3628,10 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                 >
                   <div
                     class="pf-v5-c-toolbar"
-                    data-ouia-component-id="OUIA-Generated-Toolbar-5"
+                    data-ouia-component-id="OUIA-Generated-Toolbar-2"
                     data-ouia-component-type="PF5/Toolbar"
                     data-ouia-safe="true"
-                    id="pf-topology-control-bar-10"
+                    id="pf-topology-control-bar-2"
                     style="background-color: transparent; padding: 0px;"
                   >
                     <div
@@ -2651,7 +3652,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                               <button
                                 aria-disabled="false"
                                 class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
-                                data-ouia-component-id="OUIA-Generated-Button-tertiary-17"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-6"
                                 data-ouia-component-type="PF5/Button"
                                 data-ouia-safe="true"
                                 id="zoom-in"
@@ -2687,7 +3688,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                               <button
                                 aria-disabled="false"
                                 class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
-                                data-ouia-component-id="OUIA-Generated-Button-tertiary-18"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-7"
                                 data-ouia-component-type="PF5/Button"
                                 data-ouia-safe="true"
                                 id="zoom-out"
@@ -2723,43 +3724,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                               <button
                                 aria-disabled="false"
                                 class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
-                                data-ouia-component-id="OUIA-Generated-Button-tertiary-19"
-                                data-ouia-component-type="PF5/Button"
-                                data-ouia-safe="true"
-                                id="fit-to-screen"
-                                type="button"
-                              >
-                                <svg
-                                  aria-hidden="true"
-                                  class="pf-v5-svg"
-                                  fill="currentColor"
-                                  height="1em"
-                                  role="img"
-                                  viewBox="0 0 448 512"
-                                  width="1em"
-                                >
-                                  <path
-                                    d="M448 344v112a23.94 23.94 0 0 1-24 24H312c-21.39 0-32.09-25.9-17-41l36.2-36.2L224 295.6 116.77 402.9 153 439c15.09 15.1 4.39 41-17 41H24a23.94 23.94 0 0 1-24-24V344c0-21.4 25.89-32.1 41-17l36.19 36.2L184.46 256 77.18 148.7 41 185c-15.1 15.1-41 4.4-41-17V56a23.94 23.94 0 0 1 24-24h112c21.39 0 32.09 25.9 17 41l-36.2 36.2L224 216.4l107.23-107.3L295 73c-15.09-15.1-4.39-41 17-41h112a23.94 23.94 0 0 1 24 24v112c0 21.4-25.89 32.1-41 17l-36.19-36.2L263.54 256l107.28 107.3L407 327.1c15.1-15.2 41-4.5 41 16.9z"
-                                  />
-                                </svg>
-                                <span
-                                  class="pf-v5-screen-reader"
-                                >
-                                  Fit to Screen
-                                </span>
-                              </button>
-                            </div>
-                          </div>
-                          <div
-                            class="pf-v5-c-toolbar__item"
-                          >
-                            <div
-                              style="display: contents;"
-                            >
-                              <button
-                                aria-disabled="false"
-                                class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
-                                data-ouia-component-id="OUIA-Generated-Button-tertiary-20"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-8"
                                 data-ouia-component-type="PF5/Button"
                                 data-ouia-safe="true"
                                 id="reset-view"
@@ -2795,7 +3760,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                               <button
                                 aria-disabled="false"
                                 class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
-                                data-ouia-component-id="OUIA-Generated-Button-tertiary-21"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-9"
                                 data-ouia-component-type="PF5/Button"
                                 data-ouia-safe="true"
                                 id="topology-control-bar-h_layout-button"
@@ -2829,7 +3794,7 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                               <button
                                 aria-disabled="false"
                                 class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
-                                data-ouia-component-id="OUIA-Generated-Button-tertiary-22"
+                                data-ouia-component-id="OUIA-Generated-Button-tertiary-10"
                                 data-ouia-component-type="PF5/Button"
                                 data-ouia-safe="true"
                                 id="topology-control-bar-v_layout-button"
@@ -2854,42 +3819,6 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
                               </button>
                             </div>
                           </div>
-                          <div
-                            class="pf-v5-c-toolbar__item"
-                          >
-                            <div
-                              style="display: contents;"
-                            >
-                              <button
-                                aria-disabled="false"
-                                class="pf-v5-c-button pf-m-tertiary pf-topology-control-bar__button"
-                                data-ouia-component-id="OUIA-Generated-Button-tertiary-23"
-                                data-ouia-component-type="PF5/Button"
-                                data-ouia-safe="true"
-                                id="topology-control-bar-catalog-button"
-                                type="button"
-                              >
-                                <svg
-                                  aria-hidden="true"
-                                  class="pf-v5-svg"
-                                  fill="currentColor"
-                                  height="1em"
-                                  role="img"
-                                  viewBox="0 0 1088 1024"
-                                  width="1em"
-                                >
-                                  <path
-                                    d="M576,160 C687.3,88.6 874.6,32 960,32 L960,800 C898.8,783.1 738,760.5 576,864 L576,160 Z M1024,96 C1088,96 1088,162.8 1088,162.8 L1088,928 C1088,992 985.7,989.9 985.7,989.9 C863.1,804.7 576,992 576,992 L576,925.4 C863,728.7 1024,928 1024,928 L1024,96 Z M128,800 L128,32 C212.9,32 400.6,88.3 512,160 L512,864 C352,760.5 189.3,783.2 128,800 Z M512,925.4 L512,992 C512,992 227.9,805.8 102.5,989.9 C102.5,989.9 0,992 0,928 L0,162.8 C0,162.8 0,96 64,96 L64,928 C64,927.9 226,728.7 512,925.4 Z"
-                                  />
-                                </svg>
-                                <span
-                                  class="pf-v5-screen-reader"
-                                >
-                                  Open Catalog
-                                </span>
-                              </button>
-                            </div>
-                          </div>
                         </div>
                       </div>
                     </div>
@@ -2916,5 +3845,5 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
diff --git a/packages/ui/src/components/Visualization/Canvas/controller.service.test.ts b/packages/ui/src/components/Visualization/Canvas/controller.service.test.ts
index d9e056011..823b1c5b7 100644
--- a/packages/ui/src/components/Visualization/Canvas/controller.service.test.ts
+++ b/packages/ui/src/components/Visualization/Canvas/controller.service.test.ts
@@ -28,6 +28,20 @@ describe('ControllerService', () => {
     expect(baselineElementFactorySpy).toHaveBeenCalledWith(ControllerService.baselineElementFactory);
   });
 
+  it('should generate an empty graph when creating a controller to force computing dimensions right away', () => {
+    const fromModelSpy = jest.spyOn(Visualization.prototype, 'fromModel');
+
+    const controller = ControllerService.createController();
+
+    expect(controller).toBeInstanceOf(Visualization);
+    expect(fromModelSpy).toHaveBeenCalledWith({
+      graph: {
+        id: 'g1',
+        type: 'graph',
+      },
+    });
+  });
+
   describe('baselineComponentFactory', () => {
     it('should return the correct component for a group', () => {
       const component = ControllerService.baselineComponentFactory({} as ModelKind, 'group');
diff --git a/packages/ui/src/components/Visualization/Canvas/controller.service.ts b/packages/ui/src/components/Visualization/Canvas/controller.service.ts
index dfd921d9b..2f5089a1a 100644
--- a/packages/ui/src/components/Visualization/Canvas/controller.service.ts
+++ b/packages/ui/src/components/Visualization/Canvas/controller.service.ts
@@ -28,6 +28,13 @@ export class ControllerService {
     newController.registerLayoutFactory(this.baselineLayoutFactory);
     newController.registerComponentFactory(this.baselineComponentFactory);
     newController.registerElementFactory(this.baselineElementFactory);
+    newController.setFitToScreenOnLayout(true, 80);
+    newController.fromModel({
+      graph: {
+        id: 'g1',
+        type: 'graph',
+      },
+    });
 
     return newController;
   }
diff --git a/packages/ui/src/components/Visualization/ContextToolbar/ContextToolbar.scss b/packages/ui/src/components/Visualization/ContextToolbar/ContextToolbar.scss
index 4067c9520..d166ea8b1 100644
--- a/packages/ui/src/components/Visualization/ContextToolbar/ContextToolbar.scss
+++ b/packages/ui/src/components/Visualization/ContextToolbar/ContextToolbar.scss
@@ -27,3 +27,8 @@
   --pf-v5-c-toolbar__content--PaddingRight: 0;
   --pf-v5-c-toolbar--RowGap: 0;
 }
+
+// Override for the default patternfly class
+.pf-v5-u-m-sm {
+  margin: var(--pf-v5-global--spacer--sm);
+}
diff --git a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsMenu.scss b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsMenu.scss
index 7e4c11f36..60652333f 100644
--- a/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsMenu.scss
+++ b/packages/ui/src/components/Visualization/ContextToolbar/Flows/FlowsMenu.scss
@@ -1,7 +1,8 @@
 .flows-menu-display {
   display: inline-grid;
-  max-width: 200px;
+  max-width: 300px;
   margin: 0 8px;
+  text-align: left;
 }
 
 .flows-menu-truncate {
diff --git a/packages/ui/src/components/Visualization/EmptyState/VisualizationEmptyState.tsx b/packages/ui/src/components/Visualization/EmptyState/VisualizationEmptyState.tsx
index cca4d3604..b1ea48411 100644
--- a/packages/ui/src/components/Visualization/EmptyState/VisualizationEmptyState.tsx
+++ b/packages/ui/src/components/Visualization/EmptyState/VisualizationEmptyState.tsx
@@ -18,13 +18,14 @@ const EyeSlashIcon: FunctionComponent = (props) => <PatternFlyEyeSlashIcon data-
 
 interface IVisualizationEmptyState extends IDataTestID {
   entitiesNumber: number;
+  className?: string;
 }
 
 export const VisualizationEmptyState: FunctionComponent<IVisualizationEmptyState> = (props) => {
   const hasRoutes = useMemo(() => props.entitiesNumber > 0, [props.entitiesNumber]);
 
   return (
-    <Bullseye>
+    <Bullseye className={props.className}>
       <Card>
         <EmptyState data-testid={props['data-testid']}>
           <EmptyStateHeader
diff --git a/packages/ui/src/components/Visualization/Visualization.scss b/packages/ui/src/components/Visualization/Visualization.scss
index 15ec6eca7..c32cbfbcb 100644
--- a/packages/ui/src/components/Visualization/Visualization.scss
+++ b/packages/ui/src/components/Visualization/Visualization.scss
@@ -6,8 +6,3 @@
     border-radius: 15px;
   }
 }
-
-// Override for the default patternfly class
-.pf-v5-u-m-sm {
-  margin: var(--pf-v5-global--spacer--sm);
-}
diff --git a/packages/ui/src/components/Visualization/Visualization.tsx b/packages/ui/src/components/Visualization/Visualization.tsx
index f4ba7e306..a95d905c1 100644
--- a/packages/ui/src/components/Visualization/Visualization.tsx
+++ b/packages/ui/src/components/Visualization/Visualization.tsx
@@ -1,8 +1,10 @@
+import { VisualizationProvider } from '@patternfly/react-topology';
 import { FunctionComponent, PropsWithChildren, ReactNode, useMemo } from 'react';
 import { BaseVisualCamelEntity } from '../../models/visualization/base-visual-entity';
 import { CanvasFormTabsProvider } from '../../providers';
 import { ErrorBoundary } from '../ErrorBoundary';
-import { CanvasController } from './Canvas/CanvasController';
+import { Canvas } from './Canvas';
+import { ControllerService } from './Canvas/controller.service';
 import { CanvasFallback } from './CanvasFallback';
 import { ContextToolbar } from './ContextToolbar/ContextToolbar';
 import './Visualization.scss';
@@ -14,15 +16,17 @@ interface CanvasProps {
 }
 
 export const Visualization: FunctionComponent<PropsWithChildren<CanvasProps>> = (props) => {
-  const lastUpdate = useMemo(() => Date.now(), [props.entities]);
+  const controller = useMemo(() => ControllerService.createController(), []);
 
   return (
-    <div className={`canvas-surface ${props.className ?? ''}`}>
-      <ErrorBoundary key={lastUpdate} fallback={props.fallback ?? <CanvasFallback />}>
+    <VisualizationProvider controller={controller}>
+      <div className={`canvas-surface ${props.className ?? ''}`}>
         <CanvasFormTabsProvider>
-          <CanvasController contextToolbar={<ContextToolbar />} entities={props.entities} />
+          <ErrorBoundary fallback={props.fallback ?? <CanvasFallback />}>
+            <Canvas contextToolbar={<ContextToolbar />} entities={props.entities} />
+          </ErrorBoundary>
         </CanvasFormTabsProvider>
-      </ErrorBoundary>
-    </div>
+      </div>
+    </VisualizationProvider>
   );
 };