Skip to content

Commit

Permalink
Merge pull request KaotoIO#373 from lhein/horizontalLayout
Browse files Browse the repository at this point in the history 
adding buttons for layout direction switches
  • Loading branch information
@lhein
lhein authored Nov 20, 2023
2 parents aa2e83d + 68d455e commit 762cd99
Show file tree
Hide file tree
Showing 8 changed files with 138 additions and 26 deletions.
Binary file added packages/ui/src/assets/layout-horizontal.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/ui/src/assets/layout-vertical.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 33 additions & 1 deletion packages/ui/src/components/Visualization/Canvas/Canvas.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Icon } from '@patternfly/react-core';
import { CatalogIcon } from '@patternfly/react-icons';
import {
GRAPH_LAYOUT_END_EVENT,
Expand All @@ -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 {
Expand All @@ -48,9 +51,38 @@ export const Canvas: FunctionComponent<PropsWithChildren<CanvasProps>> = (props)
const controlButtons = useMemo(() => {
const customButtons = catalogModalContext
? [
{
id: 'topology-control-bar-h_layout-button',
icon: (
<Icon>
<img src={layoutHorizontalIcon} />
</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: (
<Icon>
<img src={layoutVerticalIcon} />
</Icon>
),
tooltip: 'Vertical Layout',
callback: action(() => {
controller.getGraph().setLayout(LayoutType.DagreVertical);
controller.getGraph().reset();
controller.getGraph().layout();
}),
},
{
id: 'topology-control-bar-catalog-button',
icon: <CatalogIcon />,
tooltip: 'Open Catalog',
callback: () => {
catalogModalContext.setIsModalOpen(true);
},
Expand Down
119 changes: 98 additions & 21 deletions packages/ui/src/components/Visualization/Canvas/__snapshots__/Canvas.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1526,29 +1526,106 @@ exports[`Canvas should render the Catalog button if \`CatalogModalContext\` is p
<div
class="pf-v5-c-toolbar__item"
>
<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-13"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
id="topology-control-bar-catalog-button"
type="button"
<div
style="display: contents;"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 1088 1024"
width="1em"
<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-13"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
id="topology-control-bar-h_layout-button"
type="button"
>
<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>
</button>
<span
class="pf-v5-c-icon"
>
<span
class="pf-v5-c-icon__content"
>
<img
src=""
/>
</span>
</span>
<span
class="pf-v5-u-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-14"
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-u-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-15"
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-u-screen-reader"
>
Open Catalog
</span>
</button>
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/Visualization/Canvas/canvas.defaults.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
3 changes: 2 additions & 1 deletion packages/ui/src/components/Visualization/Canvas/canvas.models.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/components/Visualization/Canvas/canvas.service.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand Down
4 changes: 3 additions & 1 deletion packages/ui/src/components/Visualization/Canvas/canvas.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down

0 comments on commit 762cd99

Please sign in to comment.