Improve layout terations

src/core/components/Graph/Graph.constants.ts

@@ -22,8 +22,8 @@ export const nodeColors = [
 ];
 
 export const NODE_COLOR_DEFAULT = '#6A6E73';
-export const EDGE_COLOR_DEFAULT = '#c7c7c7';
-export const EDGE_COLOR_ACTIVE_DEFAULT = '#1f77b4';
+export const EDGE_COLOR_DEFAULT = '#B8BBBE';
+export const EDGE_COLOR_ACTIVE_DEFAULT = '#0066CC';
 export const COMBO_COLOR_DEFAULT = NODE_COLOR_DEFAULT;
 export const NODE_COLOR_HOVER_DEFAULT = '#BEE1F4';
 export const NODE_COLOR_HOVER_EDGE_DEFAULT = '#0066CC';

src/core/components/Graph/Graph.interfaces.ts

@@ -7,6 +7,8 @@ export interface GraphNode {
   icon?: {
     show?: boolean;
     img?: string;
+    width?: number;
+    height?: number;
   };
   style?: Record<string, string>;
   x: number | undefined;

src/core/components/Graph/GraphReactAdaptor.tsx

@@ -169,13 +169,25 @@
             });
 
             const node = item as INode | null;
+
             if (node) {
+              const neighbors = node.getNeighbors();
+              const neighborsIds = neighbors.map((neighbor) => neighbor.getID());
+
+              topologyGraph.getNodes().forEach(function (n) {
+                if (node?.getID() !== n.getID() && !neighborsIds.includes(n.getID())) {
+                  topologyGraph.setItemState(n, 'hidden', true);
+                  topologyGraph.updateItem(n, {
+                    icon: { show: false },
+                    labelCfg: { offset: -100000 }
+                  });
+                }
+              });
               // To ensure that only one node is selected at a time, we need to clean up any previously selected nodes.
               //This situation can arise when we automatically select an element from another pager through nodeSelect.
               topologyGraph.findAllByState<INode>('node', 'hover').forEach((nodeWithHoverState) => {
                 topologyGraph.setItemState(nodeWithHoverState, 'hover', false);
-
                 nodeWithHoverState.getEdges().forEach((edgeConnectedWithHoverState) => {
                   topologyGraph.setItemState(edgeConnectedWithHoverState, 'hover', false);
                 });
               });
@@ -187,7 +199,7 @@
                 edgeConnected.show();
               });
 
-              node.getNeighbors().forEach((neighbor) => {
+              neighbors.forEach((neighbor) => {
                 topologyGraph.setItemState(neighbor, 'hover', true);
               });
             }
@@ -196,6 +208,14 @@
           topologyGraph.on('node:mouseleave', ({ item }) => {
             isHoverState.current = false;
 
+            topologyGraph.getNodes().forEach(function (node) {
+              topologyGraph.setItemState(node, 'hidden', false);
+              topologyGraph.updateItem(node, {
+                icon: { show: true },
+                labelCfg: { offset: 15 }
+              });
+            });
+
             topologyGraph.getEdges().forEach(function (edge) {
               edge.show();
             });
@@ -240,7 +260,7 @@
                 if (nodeWithHoverState !== source && nodeWithHoverState !== target) {
                   topologyGraph.setItemState(nodeWithHoverState, 'hover', false);
 
                   nodeWithHoverState.getEdges().forEach((edgeConnectedWithHoverState) => {
                     topologyGraph.setItemState(edgeConnectedWithHoverState, 'hover', false);
                   });
                 }

src/core/components/Graph/config.ts

@@ -31,9 +31,10 @@ export const DEFAULT_MODE = {
 export const DEFAULT_LAYOUT_COMBO_FORCE_CONFIG: LayoutConfig = {
   type: 'comboForce',
   nodeSize: NODE_SIZE,
-  nodeSpacing: NODE_SIZE / 3,
+  nodeSpacing: NODE_SIZE,
   preventOverlap: true,
-  comboSpacing: 0,
+  comboCollideStrength: 1,
+  comboSpacing: 10,
   linkDistance: 150
 };
 
@@ -122,6 +123,10 @@ export const DEFAULT_NODE_STATE_CONFIG = {
     shadowBlur: 10,
     shadowColor: NODE_COLOR_HOVER_EDGE_DEFAULT,
     cursor: 'pointer'
+  },
+  hidden: {
+    opacity: 0,
+    fill: 'transparent'
   }
 };
 

src/pages/Topology/services/index.ts

@@ -36,38 +36,22 @@ const shape = {
 
 export const TopologyController = {
   convertSitesToNodes: (entities: SiteResponse[]): GraphNode[] =>
-    entities.map(({ identity, name, siteVersion }, index) => {
+    entities.map(({ identity, name, siteVersion }) => {
       const { x, y } = GraphController.getPositionFromLocalStorage(identity);
-      const color = getColor(index);
       const img = siteSVG;
 
-      const style = {
-        fillOpacity: 0.1,
-        fill: color,
-        stroke: color,
-        shadowColor: color
-      };
-
-      return convertEntityToNode({ id: identity, label: `${name} (${siteVersion})`, x, y, img, nodeConfig: { style } });
+      return convertEntityToNode({ id: identity, label: `${name} (${siteVersion})`, x, y, img });
     }),
 
   convertProcessGroupsToNodes: (entities: ProcessGroupResponse[]): GraphNode[] =>
-    entities.map(({ identity, name, processGroupRole, processCount }, index) => {
+    entities.map(({ identity, name, processGroupRole, processCount }) => {
       const { x, y } = GraphController.getPositionFromLocalStorage(identity);
-      const color = getColor(processGroupRole === 'internal' ? 16 : index);
       const img = processGroupRole === 'internal' ? skupperProcessSVG : componentSVG;
 
       const suffix = processCount > 1 ? Labels.Processes : Labels.Process;
       const label = `${name} (${processCount} ${suffix})`;
 
-      const style = {
-        fillOpacity: 0.1,
-        fill: color,
-        stroke: color,
-        shadowColor: color
-      };
-
-      const nodeConfig = processGroupRole === 'remote' ? DEFAULT_REMOTE_NODE_CONFIG : { type: shape.bound, style };
+      const nodeConfig = processGroupRole === 'remote' ? DEFAULT_REMOTE_NODE_CONFIG : { type: shape.bound };
 
       return convertEntityToNode({ id: identity, label, x, y, img, nodeConfig });
     }),
@@ -97,7 +81,18 @@ export const TopologyController = {
 
     return sites
       .filter((site) => groups.includes(site.id))
-      .map(({ id, style, label }) => ({ id, label, style: { ...style, fillOpacity: 0.02 } }));
+      .map(({ id, label }, index) => {
+        const color = getColor(index);
+
+        const style = {
+          fillOpacity: 0.1,
+          fill: color,
+          stroke: color,
+          shadowColor: color
+        };
+
+        return { id, label, style: { ...style, fillOpacity: 0.02 } };
+      });
   },
 
   convertFlowPairsToLinks: (flowPairsByAddress: FlowPairsResponse[], showProtocol = false): GraphEdge[] =>
@@ -205,14 +200,11 @@ export const TopologyController = {
   },
   selectLayoutFromNodes: (nodes: GraphNode[], type: 'combo' | 'default' = 'default') => {
     let layout = undefined;
-    const nodeCount = nodes.filter((node) => node.x && node.y).length;
+    const nodeCount = !!nodes.filter((node) => node.x === undefined && node.y === undefined).length;
 
-    if (nodeCount === 0) {
+    if (nodeCount) {
       if (type === 'combo') {
-        layout = {
-          ...DEFAULT_LAYOUT_COMBO_FORCE_CONFIG,
-          maxIteration: GraphController.calculateMaxIteration(nodes.length)
-        };
+        layout = DEFAULT_LAYOUT_COMBO_FORCE_CONFIG;
       } else {
         layout = nodes.length <= 200 ? DEFAULT_LAYOUT_FORCE_CONFIG : DEFAULT_LAYOUT_FORCE_WITH_GPU_CONFIG;
       }
@@ -235,7 +227,9 @@ function convertEntityToNode({ id, comboId, label, x, y, img, nodeConfig }: Enti
     y,
     icon: {
       show: true,
-      img
+      img,
+      width: 14,
+      height: 14
     },
     ...{ ...DEFAULT_NODE_CONFIG, ...nodeConfig }
   };