perf: optimize combo combined layout performance (#226)

* perf: config perf env, add combo-combine test case

* perf: add perf test baseline

* perf: optimize combo-combined layout, generate perf report

* refactor: fix cr issue

Author: Aarebecca

package.json

@@ -44,7 +44,7 @@
     "@antv/g-plugin-3d": "^1.9.34",
     "@antv/g-plugin-control": "^1.9.22",
     "@antv/g-webgl": "^1.9.37",
-    "@antv/graphlib": "^2.0.2",
+    "@antv/graphlib": "^2.0.3",
     "@babel/core": "^7.24.0",
     "@babel/polyfill": "^7.12.1",
     "@babel/preset-env": "^7.24.0",
@@ -67,6 +67,7 @@
     "graphology-layout-forceatlas2": "^0.10.1",
     "graphology-types": "^0.24.7",
     "husky": "^7.0.4",
+    "iperf": "0.1.0-beta.13",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "29.5.0",
     "lil-gui": "^0.16.0",

packages/layout/src/comboCombined.ts

@@ -12,6 +12,7 @@ import type {
   Node,
   OutNode,
 } from './types';
+import { isLayoutWithIterations } from './types';
 import { getLayoutBBox, graphTreeDfs, isArray } from './util';
 import { handleSingleNodeGraph } from './util/common';
 
@@ -116,7 +117,7 @@ export class ComboCombinedLayout implements Layout<ComboCombinedLayoutOptions> {
     });
 
     // each one in comboNodes is a combo contains the size and child nodes
-    // comboNodes ncludes the node who has no parent combo
+    // comboNodes includes the node who has no parent combo
     const comboNodes: Map<ID, Node> = new Map();
     // the inner layouts, the result positions are stored in comboNodes and their child nodes
     const innerGraphLayoutPromises = this.getInnerGraphs(
@@ -214,7 +215,8 @@ export class ComboCombinedLayout implements Layout<ComboCombinedLayoutOptions> {
               : new ConcentricLayout();
           await outerLayoutPreset.assign(outerLayoutGraph);
         }
-        outerPositions = await outerLayout.execute(outerLayoutGraph, {
+
+        const options = {
           center,
           kg: 5,
           preventOverlap: true,
@@ -232,7 +234,13 @@ export class ComboCombinedLayout implements Layout<ComboCombinedLayoutOptions> {
                 },
               }
             : {}),
-        });
+        };
+
+        outerPositions = await executeLayout(
+          outerLayout,
+          outerLayoutGraph,
+          options,
+        );
       }
 
       // move the combos and their child nodes
@@ -400,7 +408,7 @@ export class ComboCombinedLayout implements Layout<ComboCombinedLayoutOptions> {
         },
       });
 
-      let start = Promise.resolve();
+      let start: Promise<any> = Promise.resolve();
 
       // Regard the child nodes in one combo as a graph, and layout them from bottom to top
       graphTreeDfs(
@@ -479,14 +487,16 @@ export class ComboCombinedLayout implements Layout<ComboCombinedLayoutOptions> {
             // innerGraphLayout.assign(innerGraphCore, innerLayoutOptions);
             start = start.then(async () => {
               const innerGraphCore = new GraphCore(innerGraphData);
-              const innerLayout = await innerGraphLayout.assign(
+              await executeLayout(
+                innerGraphLayout,
                 innerGraphCore,
                 innerLayoutOptions,
+                true,
               );
               const { minX, minY, maxX, maxY } = getLayoutBBox(
                 innerLayoutNodes as OutNode[],
               );
-              // move the innerGraph to [0, 0], for later controled by parent layout
+              // move the innerGraph to [0, 0], for later controlled by parent layout
               const center = { x: (maxX + minX) / 2, y: (maxY + minY) / 2 };
               innerGraphData.nodes.forEach((node) => {
                 node.data.x -= center.x;
@@ -499,7 +509,6 @@ export class ComboCombinedLayout implements Layout<ComboCombinedLayoutOptions> {
 
               comboNodes.get(treeNode.id).data.size = size;
               comboNodes.get(treeNode.id).data.nodes = innerLayoutNodes;
-              return innerLayout;
             });
           }
           return true;
@@ -512,3 +521,18 @@ export class ComboCombinedLayout implements Layout<ComboCombinedLayoutOptions> {
     return innerLayoutPromises;
   }
 }
+
+async function executeLayout(
+  layout: Layout<any>,
+  graph: Graph,
+  options: Record<string, any>,
+  assign?: boolean,
+) {
+  if (isLayoutWithIterations(layout)) {
+    layout.execute(graph, options);
+    layout.stop();
+    return layout.tick(options.iterations ?? 300);
+  }
+  if (assign) return await layout.assign(graph, options);
+  return await layout.execute(graph, options);
+}

perf.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from 'iperf';
+import path from 'path';
+
+export default defineConfig({
+  perf: {
+    report: {},
+  },
+  resolve: {
+    alias: {
+      '@antv/layout': path.resolve(__dirname, './packages/layout/src'),
+    },
+  },
+});

perf/combo-combined.perf.ts

@@ -0,0 +1,55 @@
+import { Graph } from '@antv/graphlib';
+import type { LayoutMapping } from '@antv/layout';
+import { ComboCombinedLayout } from '@antv/layout';
+import type { Test } from 'iperf';
+
+export const comboCombined: Test = async ({ perf, container }) => {
+  const data = await fetch(
+    'https://assets.antv.antgroup.com/g6/combo.json',
+  ).then((res) => res.json());
+
+  const nodes = [
+    ...data.nodes.map((node: any) => ({
+      ...node,
+      data: { _isCombo: false },
+    })),
+    ...data.combos.map((combo: any) => ({
+      ...combo,
+      data: { _isCombo: true },
+    })),
+  ];
+  const edges = data.edges.map((edge: any) => ({
+    ...edge,
+    id: `${edge.source}-${edge.target}`,
+  }));
+
+  const graph = new Graph({ nodes, edges });
+  graph.attachTreeStructure('combo');
+  data.nodes.forEach((node: any) => {
+    if (node.combo) graph.setParent(node.id, node.combo, 'combo');
+  });
+
+  const layout = new ComboCombinedLayout({});
+
+  let result: LayoutMapping;
+
+  await perf.evaluate('combo combined', async () => {
+    result = await layout.execute(graph);
+  });
+
+  const canvas = document.createElement('canvas');
+  container.appendChild(canvas);
+  const ctx = canvas.getContext('2d');
+  const [width, height] = [500, 500];
+  canvas.width = width;
+  canvas.height = height;
+
+  result.nodes.forEach((node) => {
+    const {
+      data: { x, y },
+    } = node;
+    ctx.beginPath();
+    ctx.arc(x + 200, y, 5, 0, Math.PI * 2);
+    ctx.fill();
+  });
+};

perf/reports/9821ed36_2024-08-29_15:28:33.json

@@ -0,0 +1,43 @@
+{
+  "version": "1.0",
+  "device": {
+    "os": {
+      "arch": "arm64",
+      "distro": "macOS",
+      "serial": "9821ed36011eee5abf6c71d6fc2c03fb4bf4655e674c56b7f50e2560cb6e924a"
+    },
+    "cpu": {
+      "manufacturer": "Apple",
+      "brand": "M1 Pro",
+      "speed": 2.4,
+      "cores": 10
+    },
+    "memory": {
+      "total": 16384,
+      "free": 32.96875
+    },
+    "gpu": {
+      "vendor": "Apple",
+      "model": "Apple M1 Pro",
+      "cores": "16"
+    }
+  },
+  "repo": "a7ec123a4112a8995c869daf084f51a7ffee8f94",
+  "client": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/128.0.6613.18 Safari/537.36",
+  "reports": {
+    "comboCombined": {
+      "time": [
+        {
+          "min": 529.2999999970198,
+          "max": 539.7000000029802,
+          "median": 530.2000000029802,
+          "avg": 530.9250000026077,
+          "variance": 4.824374999050051,
+          "reliable": true,
+          "key": "combo combined"
+        }
+      ],
+      "status": "passed"
+    }
+  }
+}

perf/reports/9821ed36_2024-08-29_15:29:12.json

@@ -0,0 +1,43 @@
+{
+  "version": "1.0",
+  "device": {
+    "os": {
+      "arch": "arm64",
+      "distro": "macOS",
+      "serial": "9821ed36011eee5abf6c71d6fc2c03fb4bf4655e674c56b7f50e2560cb6e924a"
+    },
+    "cpu": {
+      "manufacturer": "Apple",
+      "brand": "M1 Pro",
+      "speed": 2.4,
+      "cores": 10
+    },
+    "memory": {
+      "total": 16384,
+      "free": 121.796875
+    },
+    "gpu": {
+      "vendor": "Apple",
+      "model": "Apple M1 Pro",
+      "cores": "16"
+    }
+  },
+  "repo": "ee6714c42b02ba09912e17bc405d2607caf25e69",
+  "client": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/128.0.6613.18 Safari/537.36",
+  "reports": {
+    "comboCombined": {
+      "time": [
+        {
+          "min": 2.800000011920929,
+          "max": 19,
+          "median": 3.6000000089406967,
+          "avg": 4.500000001862645,
+          "variance": 6.094999999850989,
+          "reliable": false,
+          "key": "combo combined"
+        }
+      ],
+      "status": "passed"
+    }
+  }
+}

perf/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "paths": {
+      "@antv/layout": ["../packages/layout/src/index.ts"]
+    }
+  },
+}