From 47a51d4e17b6bf1ee2222fd93dfcaec3c3d7674a Mon Sep 17 00:00:00 2001 From: PIER PAOLO MANCA Date: Wed, 19 Aug 2026 11:52:48 +0100 Subject: [PATCH 1/6] fix: :lady_beetle: improve Processes topology layout --- src/core/components/SkGraph/index.tsx | 10 +++++-- src/core/components/SkGraph/layout.ts | 41 +++++++++++++++++++-------- 2 files changed, 37 insertions(+), 14 deletions(-) diff --git a/src/core/components/SkGraph/index.tsx b/src/core/components/SkGraph/index.tsx index ca7406139..76c25bea5 100644 --- a/src/core/components/SkGraph/index.tsx +++ b/src/core/components/SkGraph/index.tsx @@ -31,6 +31,7 @@ const SkGraph: FC = memo( }) => { const [isGraphLoaded, setIsGraphLoaded] = useState(false); const topologyGraphRef = useRef(null); + const isInitializedRef = useRef(false); const prevNodesRef = useRef(nodesWithoutPosition); const prevEdgesRef = useRef(edges); @@ -82,6 +83,10 @@ const SkGraph: FC = memo( const graphRef = useCallback(($node: HTMLDivElement) => { if (nodesWithoutPosition && !topologyGraphRef.current) { const nodes = savePositions ? GraphController.addPositionsToNodes(nodesWithoutPosition) : nodesWithoutPosition; + + const allPositioned = nodes.every((n) => n.x !== undefined && n.y !== undefined); + const activeLayout = allPositioned ? undefined : LAYOUT_MAP[layout]; + // Filter the `options.behaviors` array, removing any behaviors that match an entry in the `excludeBehaviors` array. const filteredBehaviors = options.behaviors?.filter( (behavior) => behavior.key && !(excludeBehaviors as string[]).includes(behavior.key) @@ -91,7 +96,7 @@ const SkGraph: FC = memo( ...options, behaviors: filteredBehaviors, container: $node, - layout: LAYOUT_MAP[layout], + layout: activeLayout, data: GraphController.transformData({ edges, nodes, combos }) }; @@ -139,6 +144,7 @@ const SkGraph: FC = memo( // Store the graph instance and set the state topologyGraphRef.current = graph; + isInitializedRef.current = true; setIsGraphLoaded(true); // Mark the graph as loaded }); } @@ -146,7 +152,7 @@ const SkGraph: FC = memo( }, []); const updateData = useCallback(async () => { - if (!isGraphLoaded) { + if (!isGraphLoaded || !isInitializedRef.current) { return; } diff --git a/src/core/components/SkGraph/layout.ts b/src/core/components/SkGraph/layout.ts index 099860300..5a9ad71bb 100644 --- a/src/core/components/SkGraph/layout.ts +++ b/src/core/components/SkGraph/layout.ts @@ -1,4 +1,4 @@ -import { ForceLayoutOptions, LayoutOptions } from '@antv/g6'; +import { ComboCombinedLayoutOptions, ForceLayoutOptions, LayoutOptions } from '@antv/g6'; import { theme } from './config'; import { GraphLayouts } from '../../../types/Graph.interfaces'; @@ -12,18 +12,35 @@ const LAYOUT_TOPOLOGY_DEFAULT: ForceLayoutOptions & { type: 'force' } = { factor: 4 }; -const LAYOUT_TOPOLOGY_COMBO: ForceLayoutOptions & { type: 'force' } = { - type: 'force', +const MIN_COMBO_COLLISION_DIAMETER = 200; + +const comboOuterSize = (node: unknown): number => { + if (!node || typeof node !== 'object') { + return theme.node.size; + } + + const { size } = node as { size?: number | number[] }; + + if (Array.isArray(size)) { + const width = size[0] ?? 0; + const height = size[1] ?? 0; + + return Math.max(width, height, MIN_COMBO_COLLISION_DIAMETER); + } + + return typeof size === 'number' ? size : theme.node.size; +}; + +const LAYOUT_TOPOLOGY_COMBO: ComboCombinedLayoutOptions & { type: 'combo-combined' } = { + type: 'combo-combined', nodeSize: theme.node.size, - nodeSpacing: theme.node.size, - preventOverlap: true, - clustering: true, - nodeClusterBy: 'cluster', - distanceThresholdMode: 'max', - clusterNodeStrength: 300000, - nodeStrength: 8000, - leafCluster: true, - factor: 1000 + nodeSpacing: theme.node.size / 2, + comboPadding: 60, + comboSpacing: 30, + layout: (comboId) => + comboId === null + ? { type: 'force', preventOverlap: true, factor: 2, nodeSize: comboOuterSize } + : { type: 'force', preventOverlap: true, linkDistance: theme.node.size * 2 } }; const LAYOUT_TOPOLOGY_DAGRE: LayoutOptions & { type: 'antv-dagre' } = { From 60dd405353870277ec46433216aad724e4477fa6 Mon Sep 17 00:00:00 2001 From: PIER PAOLO MANCA Date: Fri, 21 Aug 2026 10:51:10 +0100 Subject: [PATCH 2/6] fix: :lady_beetle: removed unnecessary code --- src/core/components/SkGraph/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/core/components/SkGraph/index.tsx b/src/core/components/SkGraph/index.tsx index 76c25bea5..9687decc1 100644 --- a/src/core/components/SkGraph/index.tsx +++ b/src/core/components/SkGraph/index.tsx @@ -31,7 +31,6 @@ const SkGraph: FC = memo( }) => { const [isGraphLoaded, setIsGraphLoaded] = useState(false); const topologyGraphRef = useRef(null); - const isInitializedRef = useRef(false); const prevNodesRef = useRef(nodesWithoutPosition); const prevEdgesRef = useRef(edges); @@ -144,7 +143,6 @@ const SkGraph: FC = memo( // Store the graph instance and set the state topologyGraphRef.current = graph; - isInitializedRef.current = true; setIsGraphLoaded(true); // Mark the graph as loaded }); } @@ -152,7 +150,7 @@ const SkGraph: FC = memo( }, []); const updateData = useCallback(async () => { - if (!isGraphLoaded || !isInitializedRef.current) { + if (!isGraphLoaded) { return; } From b9e7a7c840dfbe0ff20c0237fd0c7bcbcbca481c Mon Sep 17 00:00:00 2001 From: PIER PAOLO MANCA Date: Fri, 21 Aug 2026 16:47:16 +0100 Subject: [PATCH 3/6] fix: :lady_beetle: moved to antv-dagre layout --- src/core/components/SkGraph/layout.ts | 37 ++++++++------------------- 1 file changed, 10 insertions(+), 27 deletions(-) diff --git a/src/core/components/SkGraph/layout.ts b/src/core/components/SkGraph/layout.ts index 5a9ad71bb..0ded7abd0 100644 --- a/src/core/components/SkGraph/layout.ts +++ b/src/core/components/SkGraph/layout.ts @@ -12,35 +12,18 @@ const LAYOUT_TOPOLOGY_DEFAULT: ForceLayoutOptions & { type: 'force' } = { factor: 4 }; -const MIN_COMBO_COLLISION_DIAMETER = 200; - -const comboOuterSize = (node: unknown): number => { - if (!node || typeof node !== 'object') { - return theme.node.size; - } - - const { size } = node as { size?: number | number[] }; - - if (Array.isArray(size)) { - const width = size[0] ?? 0; - const height = size[1] ?? 0; - - return Math.max(width, height, MIN_COMBO_COLLISION_DIAMETER); - } - - return typeof size === 'number' ? size : theme.node.size; -}; - const LAYOUT_TOPOLOGY_COMBO: ComboCombinedLayoutOptions & { type: 'combo-combined' } = { type: 'combo-combined', - nodeSize: theme.node.size, - nodeSpacing: theme.node.size / 2, - comboPadding: 60, - comboSpacing: 30, - layout: (comboId) => - comboId === null - ? { type: 'force', preventOverlap: true, factor: 2, nodeSize: comboOuterSize } - : { type: 'force', preventOverlap: true, linkDistance: theme.node.size * 2 } + nodeSize: theme.node.size / 2, + nodeSpacing: theme.node.size, + comboPadding: 0, + comboSpacing: 0, + layout: { + type: 'antv-dagre', + controlPoints: true, + radial: true, + rankdir: 'LR' + } }; const LAYOUT_TOPOLOGY_DAGRE: LayoutOptions & { type: 'antv-dagre' } = { From 349e6903816cd14b1c0a4ce71983a89523f69196 Mon Sep 17 00:00:00 2001 From: PIER PAOLO MANCA Date: Mon, 31 Aug 2026 17:25:31 +0100 Subject: [PATCH 4/6] fix: :lady_beetle: moved to antv-dagre layout - ranksep/nodesep --- src/core/components/SkGraph/layout.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/core/components/SkGraph/layout.ts b/src/core/components/SkGraph/layout.ts index 0ded7abd0..23d3bfc30 100644 --- a/src/core/components/SkGraph/layout.ts +++ b/src/core/components/SkGraph/layout.ts @@ -22,7 +22,9 @@ const LAYOUT_TOPOLOGY_COMBO: ComboCombinedLayoutOptions & { type: 'combo-combine type: 'antv-dagre', controlPoints: true, radial: true, - rankdir: 'LR' + rankdir: 'LR', + ranksep: 45, + nodesep: 30 } }; From d76962b748f202f7ec7aba649bede7e74d65d3ae Mon Sep 17 00:00:00 2001 From: PIER PAOLO MANCA Date: Mon, 21 Sep 2026 12:12:32 +0100 Subject: [PATCH 5/6] refactor: :refactor: :recycle: removed unrelated code --- src/core/components/SkGraph/index.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/core/components/SkGraph/index.tsx b/src/core/components/SkGraph/index.tsx index 9687decc1..e5738755d 100644 --- a/src/core/components/SkGraph/index.tsx +++ b/src/core/components/SkGraph/index.tsx @@ -83,9 +83,6 @@ const SkGraph: FC = memo( if (nodesWithoutPosition && !topologyGraphRef.current) { const nodes = savePositions ? GraphController.addPositionsToNodes(nodesWithoutPosition) : nodesWithoutPosition; - const allPositioned = nodes.every((n) => n.x !== undefined && n.y !== undefined); - const activeLayout = allPositioned ? undefined : LAYOUT_MAP[layout]; - // Filter the `options.behaviors` array, removing any behaviors that match an entry in the `excludeBehaviors` array. const filteredBehaviors = options.behaviors?.filter( (behavior) => behavior.key && !(excludeBehaviors as string[]).includes(behavior.key) @@ -95,7 +92,7 @@ const SkGraph: FC = memo( ...options, behaviors: filteredBehaviors, container: $node, - layout: activeLayout, + layout: LAYOUT_MAP[layout], data: GraphController.transformData({ edges, nodes, combos }) }; From eeb1cacac0b02ef3b194e37638b5c9b91ddcc7bc Mon Sep 17 00:00:00 2001 From: PIER PAOLO MANCA Date: Mon, 21 Sep 2026 12:15:34 +0100 Subject: [PATCH 6/6] refactor: :recycle: removed space --- src/core/components/SkGraph/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/core/components/SkGraph/index.tsx b/src/core/components/SkGraph/index.tsx index e5738755d..ca7406139 100644 --- a/src/core/components/SkGraph/index.tsx +++ b/src/core/components/SkGraph/index.tsx @@ -82,7 +82,6 @@ const SkGraph: FC = memo( const graphRef = useCallback(($node: HTMLDivElement) => { if (nodesWithoutPosition && !topologyGraphRef.current) { const nodes = savePositions ? GraphController.addPositionsToNodes(nodesWithoutPosition) : nodesWithoutPosition; - // Filter the `options.behaviors` array, removing any behaviors that match an entry in the `excludeBehaviors` array. const filteredBehaviors = options.behaviors?.filter( (behavior) => behavior.key && !(excludeBehaviors as string[]).includes(behavior.key)