You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@camel.apache.org by ma...@apache.org on 2024/01/10 16:41:36 UTC
(camel-karavan) 02/02: Topology UI improvements
This is an automated email from the ASF dual-hosted git repository.
marat pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/camel-karavan.git
commit bef72b1e1f8a65d9d35f852db7e79205e72bad32
Author: Marat Gubaidullin <ma...@talismancloud.io>
AuthorDate: Wed Jan 10 11:41:19 2024 -0500
Topology UI improvements
---
karavan-designer/src/topology/TopologyStore.ts | 10 +++-
karavan-designer/src/topology/TopologyTab.tsx | 79 ++++++++++++++++++--------
2 files changed, 63 insertions(+), 26 deletions(-)
diff --git a/karavan-designer/src/topology/TopologyStore.ts b/karavan-designer/src/topology/TopologyStore.ts
index 3cf5067b..73aead9f 100644
--- a/karavan-designer/src/topology/TopologyStore.ts
+++ b/karavan-designer/src/topology/TopologyStore.ts
@@ -33,6 +33,8 @@ interface TopologyState {
fileName?: string
setSelectedIds: (selectedIds: string []) => void
setFileName: (fileName?: string) => void
+ ranker: string
+ setRanker: (ranker: string) => void
}
export const useTopologyStore = createWithEqualityFn<TopologyState>((set) => ({
@@ -46,5 +48,11 @@ export const useTopologyStore = createWithEqualityFn<TopologyState>((set) => ({
set((state: TopologyState) => {
return {fileName: fileName};
});
- }
+ },
+ ranker: 'network-simplex',
+ setRanker: (ranker: string) => {
+ set((state: TopologyState) => {
+ return {ranker: ranker};
+ });
+ },
}), shallow)
diff --git a/karavan-designer/src/topology/TopologyTab.tsx b/karavan-designer/src/topology/TopologyTab.tsx
index 5da3a3c4..be2e754a 100644
--- a/karavan-designer/src/topology/TopologyTab.tsx
+++ b/karavan-designer/src/topology/TopologyTab.tsx
@@ -35,6 +35,7 @@ import {IntegrationFile, useTopologyStore} from "./TopologyStore";
import {TopologyPropertiesPanel} from "./TopologyPropertiesPanel";
import {TopologyToolbar} from "./TopologyToolbar";
import {useDesignerStore} from "../designer/DesignerStore";
+import RankerIcon from "@patternfly/react-icons/dist/esm/icons/random-icon";
interface Props {
files: IntegrationFile[],
@@ -45,10 +46,10 @@ interface Props {
onClickAddBean: () => void
}
-export function TopologyTab (props: Props) {
+export function TopologyTab(props: Props) {
- const [selectedIds, setSelectedIds, setFileName] = useTopologyStore((s) =>
- [s.selectedIds, s.setSelectedIds, s.setFileName], shallow);
+ const [selectedIds, setSelectedIds, setFileName, ranker, setRanker] = useTopologyStore((s) =>
+ [s.selectedIds, s.setSelectedIds, s.setFileName, s.ranker, s.setRanker], shallow);
const [setSelectedStep] = useDesignerStore((s) => [s.setSelectedStep], shallow)
function setTopologySelected(model: Model, ids: string []) {
@@ -71,7 +72,15 @@ export function TopologyTab (props: Props) {
const controller = React.useMemo(() => {
const model = getModel(props.files);
const newController = new Visualization();
- newController.registerLayoutFactory((_, graph) => new DagreLayout(graph));
+ newController.registerLayoutFactory((_, graph) =>
+ new DagreLayout(graph, {
+ rankdir: 'TB',
+ ranker: ranker,
+ nodesep: 20,
+ edgesep: 20,
+ ranksep: 0
+ }));
+
newController.registerComponentFactory(customComponentFactory);
newController.addEventListener(SELECTION_EVENT, args => setTopologySelected(model, args));
@@ -84,15 +93,51 @@ export function TopologyTab (props: Props) {
newController.fromModel(model, false);
return newController;
- }, []);
+ },[]);
React.useEffect(() => {
setSelectedIds([])
const model = getModel(props.files);
controller.fromModel(model, false);
- }, []);
+ }, [ranker, controller, setSelectedIds, props.files]);
+
+ const controlButtons = React.useMemo(() => {
+ // const customButtons = [
+ // {
+ // id: "change-ranker",
+ // icon: <RankerIcon />,
+ // tooltip: 'Change Ranker ' + ranker,
+ // ariaLabel: '',
+ // callback: (id: any) => {
+ // if (ranker === 'network-simplex') {
+ // setRanker('tight-tree')
+ // } else {
+ // setRanker('network-simplex')
+ // }
+ // }
+ // }
+ // ];
+ return createTopologyControlButtons({
+ ...defaultControlButtonsOptions,
+ zoomInCallback: action(() => {
+ controller.getGraph().scaleBy(4 / 3);
+ }),
+ zoomOutCallback: action(() => {
+ controller.getGraph().scaleBy(0.75);
+ }),
+ fitToScreenCallback: action(() => {
+ controller.getGraph().fit(80);
+ }),
+ resetViewCallback: action(() => {
+ controller.getGraph().reset();
+ controller.getGraph().layout();
+ }),
+ legend: false,
+ // customButtons,
+ });
+ }, [ranker, controller, setRanker]);
- return (
+ return (
<TopologyView
className="topology-panel"
contextToolbar={!props.hideToolbar
@@ -103,28 +148,12 @@ export function TopologyTab (props: Props) {
sideBar={<TopologyPropertiesPanel onSetFile={props.onSetFile}/>}
controlBar={
<TopologyControlBar
- controlButtons={createTopologyControlButtons({
- ...defaultControlButtonsOptions,
- zoomInCallback: action(() => {
- controller.getGraph().scaleBy(4 / 3);
- }),
- zoomOutCallback: action(() => {
- controller.getGraph().scaleBy(0.75);
- }),
- fitToScreenCallback: action(() => {
- controller.getGraph().fit(80);
- }),
- resetViewCallback: action(() => {
- controller.getGraph().reset();
- controller.getGraph().layout();
- }),
- legend: false
- })}
+ controlButtons={controlButtons}
/>
}
>
<VisualizationProvider controller={controller}>
- <VisualizationSurface state={{ selectedIds }}/>
+ <VisualizationSurface state={{selectedIds}}/>
</VisualizationProvider>
</TopologyView>
);