refactor(General): ♻️ Use gforce layout

skupperproject · Jul 2, 2023 · 0f35196 · 0f35196
1 parent 74b71af
commit 0f35196
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 51 deletions.
diff --git a/src/core/components/Graph/Graph.interfaces.ts b/src/core/components/Graph/Graph.interfaces.ts
@@ -9,8 +9,8 @@ export interface GraphNode {
     img?: string;
   };
   style?: Record<string, string>;
-  x: number | null;
-  y: number | null;
+  x: number | undefined;
+  y: number | undefined;
 }
 
 export interface GraphCombo {
@@ -62,6 +62,6 @@ export interface LocalStorageData extends LocalStorageDataSavedPayload {
 }
 
 export interface LocalStorageDataWithNullXY extends Omit<LocalStorageData, 'x' | 'y'> {
-  x: number | null;
-  y: number | null;
+  x: number | undefined;
+  y: number | undefined;
 }
diff --git a/src/core/components/Graph/GraphReactAdaptor.tsx b/src/core/components/Graph/GraphReactAdaptor.tsx
@@ -1,6 +1,6 @@
 import { FC, memo, useCallback, useEffect, useRef, useState } from 'react';
 
-import G6, { Graph, ICombo, IEdge, INode } from '@antv/g6';
+import G6, { Graph, GraphOptions, ICombo, IEdge, INode } from '@antv/g6';
 
 import {
   GraphEdge,
@@ -100,22 +100,27 @@ const GraphReactAdaptor: FC<GraphReactAdaptorProps> = memo(
           const width = $node.scrollWidth;
           const height = $node.scrollHeight;
 
-          topologyGraphRef.current = new G6.Graph({
+          const options: GraphOptions = {
             container: $node,
             width,
             height,
             fitCenter: config?.fitCenter || false,
             plugins: [legend],
             modes: DEFAULT_MODE,
-            layout: {
-              ...layout,
-              center: [Math.floor(width / 2), Math.floor(height / 2)]
-            },
             defaultNode: DEFAULT_NODE_CONFIG,
             defaultCombo: DEFAULT_COMBO_CONFIG,
             defaultEdge: DEFAULT_EDGE_CONFIG,
             nodeStateStyles: DEFAULT_NODE_STATE_CONFIG
-          });
+          };
+
+          if (layout) {
+            options.layout = {
+              ...layout,
+              center: [width / 2, height / 2]
+            };
+          }
+
+          topologyGraphRef.current = new G6.Graph(options);
           const topologyGraph = topologyGraphRef.current;
 
           topologyGraph.on('node:click', ({ item }) => {
@@ -315,10 +320,15 @@ const GraphReactAdaptor: FC<GraphReactAdaptorProps> = memo(
             }
           });
 
-          topologyGraph.on('afterlayout', () => {
+          topologyGraph.on('afterrender', () => {
             prevNodesRef.current = nodes;
             prevEdgesRef.current = edges;
             prevCombosRef.current = combos;
+
+            if (options.layout) {
+              topologyGraph.destroyLayout();
+            }
+
             setIsGraphLoaded(true);
           });
 

diff --git a/src/core/components/Graph/config.ts b/src/core/components/Graph/config.ts
@@ -34,33 +34,15 @@ export const DEFAULT_LAYOUT_COMBO_FORCE_CONFIG: LayoutConfig = {
   nodeSpacing: NODE_SIZE / 3,
   preventOverlap: true,
   comboSpacing: 0,
-  linkDistance: 150,
-  nodeStrength: 10,
-  edgeStrength: 1,
-  collideStrength: 0.3,
-  comboCollideStrength: 0.5
+  linkDistance: 150
 };
 
 export const DEFAULT_LAYOUT_FORCE_CONFIG: LayoutConfig = {
-  type: 'force',
+  type: 'force2',
   nodeSize: NODE_SIZE,
   nodeSpacing: NODE_SIZE,
   preventOverlap: true,
-  linkDistance: 150,
-  alphaMin: 0.07,
-  alpha: 0.1
-};
-
-export const DEFAULT_LAYOUT_GFORCE_CONFIG: LayoutConfig = {
-  type: 'gForce',
-  nodeSize: NODE_SIZE,
-  nodeSpacing: NODE_SIZE / 3,
-  linkDistance: 150,
-  nodeStrength: 500,
-  edgeStrength: 200,
-  collideStrength: 0.3,
-  preventOverlap: true,
-  gpuEnabled: true
+  linkDistance: 150
 };
 
 export const DEFAULT_NODE_CONFIG: ModelStyle = {

diff --git a/src/core/components/Graph/services.ts b/src/core/components/Graph/services.ts
@@ -31,8 +31,8 @@ export const GraphController = {
     const cache = JSON.parse(localStorage.getItem(prefixLocalStorageItem) || '{}');
     const positions = cache[id] as LocalStorageDataSavedPayload | undefined;
 
-    const x = positions ? positions.x : null;
-    const y = positions ? positions.y : null;
+    const x = positions ? positions.x : undefined;
+    const y = positions ? positions.y : undefined;
 
     return { id, x, y };
   },

diff --git a/src/pages/Topology/Topology.interfaces.ts b/src/pages/Topology/Topology.interfaces.ts
@@ -5,7 +5,7 @@ export interface Entity {
   comboId?: string;
   label: string;
   img: string;
-  x: number | null;
-  y: number | null;
+  x: number | undefined;
+  y: number | undefined;
   nodeConfig?: ModelStyle;
 }
diff --git a/src/pages/Topology/services/index.ts b/src/pages/Topology/services/index.ts
@@ -6,7 +6,6 @@ import skupperProcessSVG from '@assets/skupper.svg';
 import {
   DEFAULT_LAYOUT_COMBO_FORCE_CONFIG,
   DEFAULT_LAYOUT_FORCE_CONFIG,
-  DEFAULT_LAYOUT_GFORCE_CONFIG,
   DEFAULT_NODE_CONFIG,
   DEFAULT_REMOTE_NODE_CONFIG
 } from '@core/components/Graph/config';
@@ -204,19 +203,15 @@ export const TopologyController = {
     });
   },
   selectLayoutFromNodes: (nodes: GraphNode[], type: 'combo' | 'default' = 'default') => {
-    let layout = {};
-
-    const nodesNotInitializedCount = nodes.filter(({ x, y }) => !!(!x || !y)).length;
-
-    if (nodesNotInitializedCount) {
-      if (type === 'combo') {
-        layout = {
-          ...DEFAULT_LAYOUT_COMBO_FORCE_CONFIG,
-          maxIteration: GraphController.calculateMaxIteration(nodes.length)
-        };
-      } else {
-        layout = nodesNotInitializedCount > 250 ? DEFAULT_LAYOUT_GFORCE_CONFIG : DEFAULT_LAYOUT_FORCE_CONFIG;
-      }
+    let layout = undefined;
+
+    if (type === 'combo') {
+      layout = {
+        ...DEFAULT_LAYOUT_COMBO_FORCE_CONFIG,
+        maxIteration: GraphController.calculateMaxIteration(nodes.length)
+      };
+    } else {
+      layout = DEFAULT_LAYOUT_FORCE_CONFIG;
     }
 
     return layout;