Topology UI improvements

apache · Jan 10, 2024 · bef72b1 · bef72b1
1 parent e77de3a
commit bef72b1
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 26 deletions.
diff --git 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
@@ -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>
     );