diff --git a/packages/ui/src/assets/layout-horizontal.png b/packages/ui/src/assets/layout-horizontal.png new file mode 100644 index 000000000..43d079364 Binary files /dev/null and b/packages/ui/src/assets/layout-horizontal.png differ diff --git a/packages/ui/src/assets/layout-vertical.png b/packages/ui/src/assets/layout-vertical.png new file mode 100644 index 000000000..910d64b03 Binary files /dev/null and b/packages/ui/src/assets/layout-vertical.png differ diff --git a/packages/ui/src/components/Visualization/Canvas/Canvas.tsx b/packages/ui/src/components/Visualization/Canvas/Canvas.tsx index d9a2bae5e..ebb5b1329 100644 --- a/packages/ui/src/components/Visualization/Canvas/Canvas.tsx +++ b/packages/ui/src/components/Visualization/Canvas/Canvas.tsx @@ -1,3 +1,4 @@ +import { Icon } from '@patternfly/react-core'; import { CatalogIcon } from '@patternfly/react-icons'; import { GRAPH_LAYOUT_END_EVENT, @@ -21,12 +22,14 @@ import { useMemo, useState, } from 'react'; +import layoutHorizontalIcon from '../../../assets/layout-horizontal.png'; +import layoutVerticalIcon from '../../../assets/layout-vertical.png'; import { BaseVisualCamelEntity } from '../../../models/visualization/base-visual-entity'; import { CatalogModalContext } from '../../../providers/catalog-modal.provider'; import { VisibleFlowsContext } from '../../../providers/visible-flows.provider'; import { CanvasSideBar } from './CanvasSideBar'; import { CanvasDefaults } from './canvas.defaults'; -import { CanvasEdge, CanvasNode } from './canvas.models'; +import { CanvasEdge, CanvasNode, LayoutType } from './canvas.models'; import { CanvasService } from './canvas.service'; interface CanvasProps { @@ -48,9 +51,38 @@ export const Canvas: FunctionComponent> = (props) const controlButtons = useMemo(() => { const customButtons = catalogModalContext ? [ + { + id: 'topology-control-bar-h_layout-button', + icon: ( + + + + ), + tooltip: 'Horizontal Layout', + callback: action(() => { + controller.getGraph().setLayout(LayoutType.DagreHorizontal); + controller.getGraph().reset(); + controller.getGraph().layout(); + }), + }, + { + id: 'topology-control-bar-v_layout-button', + icon: ( + + + + ), + tooltip: 'Vertical Layout', + callback: action(() => { + controller.getGraph().setLayout(LayoutType.DagreVertical); + controller.getGraph().reset(); + controller.getGraph().layout(); + }), + }, { id: 'topology-control-bar-catalog-button', icon: , + tooltip: 'Open Catalog', callback: () => { catalogModalContext.setIsModalOpen(true); }, 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 4c0f8a3c7..710731455 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 @@ -1526,29 +1526,106 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
- + + + + + + + Horizontal Layout + + +
+ +
+
+ +
+
+
+
+ +
diff --git a/packages/ui/src/components/Visualization/Canvas/canvas.defaults.ts b/packages/ui/src/components/Visualization/Canvas/canvas.defaults.ts index a84f8eae1..b4f26feeb 100644 --- a/packages/ui/src/components/Visualization/Canvas/canvas.defaults.ts +++ b/packages/ui/src/components/Visualization/Canvas/canvas.defaults.ts @@ -2,7 +2,7 @@ import { NodeShape } from '@patternfly/react-topology'; import { LayoutType } from './canvas.models'; export class CanvasDefaults { - static readonly DEFAULT_LAYOUT = LayoutType.Dagre; + static readonly DEFAULT_LAYOUT = LayoutType.DagreVertical; static readonly DEFAULT_NODE_SHAPE = NodeShape.rect; static readonly DEFAULT_NODE_DIAMETER = 75; static readonly DEFAULT_GROUP_PADDING = 50; diff --git a/packages/ui/src/components/Visualization/Canvas/canvas.models.ts b/packages/ui/src/components/Visualization/Canvas/canvas.models.ts index 5be9e4305..d138407b9 100644 --- a/packages/ui/src/components/Visualization/Canvas/canvas.models.ts +++ b/packages/ui/src/components/Visualization/Canvas/canvas.models.ts @@ -6,7 +6,8 @@ export const enum LayoutType { Cola = 'Cola', ColaNoForce = 'ColaNoForce', Concentric = 'Concentric', - Dagre = 'Dagre', + DagreVertical = 'DagreVertical', + DagreHorizontal = 'DagreHorizontal', Force = 'Force', Grid = 'Grid', ColaGroups = 'ColaGroups', diff --git a/packages/ui/src/components/Visualization/Canvas/canvas.service.test.ts b/packages/ui/src/components/Visualization/Canvas/canvas.service.test.ts index 13d7b427c..44da85f63 100644 --- a/packages/ui/src/components/Visualization/Canvas/canvas.service.test.ts +++ b/packages/ui/src/components/Visualization/Canvas/canvas.service.test.ts @@ -94,7 +94,7 @@ describe('CanvasService', () => { [LayoutType.ColaNoForce, ColaLayout], [LayoutType.ColaGroups, ColaLayout], [LayoutType.Concentric, ConcentricLayout], - [LayoutType.Dagre, DagreLayout], + [LayoutType.DagreVertical, DagreLayout], [LayoutType.Force, ForceLayout], [LayoutType.Grid, GridLayout], ['unknown' as LayoutType, ColaLayout], diff --git a/packages/ui/src/components/Visualization/Canvas/canvas.service.ts b/packages/ui/src/components/Visualization/Canvas/canvas.service.ts index 5a5f2329b..21b597ed0 100644 --- a/packages/ui/src/components/Visualization/Canvas/canvas.service.ts +++ b/packages/ui/src/components/Visualization/Canvas/canvas.service.ts @@ -75,8 +75,10 @@ export class CanvasService { return new ColaLayout(graph, { layoutOnDrag: false }); case LayoutType.Concentric: return new ConcentricLayout(graph); - case LayoutType.Dagre: + case LayoutType.DagreVertical: return new DagreLayout(graph, { rankdir: 'TB', nodesep: 20, ranksep: 0 }); + case LayoutType.DagreHorizontal: + return new DagreLayout(graph, { rankdir: 'LR', nodesep: 20, ranksep: 0 }); case LayoutType.Force: return new ForceLayout(graph); case LayoutType.Grid: