OuestWare's Graphology Experiments - Layout split

Some graphology helpers to lay out a graph region by region, and to pack several layouts into a single non-overlapping arrangement.

It exposes two functions:

• splitLayout computes a separate layout for each part of a node partition, then arranges these parts side by side.
• arrangeRegions takes a list of already-computed LayoutMappings and packs them into columns without overlap.

Usage

• Split a graph into regions, lay out each one, and arrange them:

import Graph from "graphology";

import { splitLayout } from "@ouestware/graphology-layout-split";
import { type LayoutMapping, applyLayout } from "@ouestware/graphology-layout-utils";

const graph = new Graph();
// ...populate the graph...

// A partition is a list of node-id groups:
const partition: string[][] = [
  ["a", "b", "c"],
  ["d", "e"],
];

// getLayout is called with each part's subgraph, and returns its LayoutMapping:
const layout = splitLayout(graph, partition, (subgraph) => myLayout(subgraph));

applyLayout(graph, layout);

• Pack a list of independent layouts directly:

import { arrangeRegions } from "@ouestware/graphology-layout-split";

const arranged = arrangeRegions([layoutA, layoutB, layoutC], { padding: 30 });

Notes

• arrangeRegions distributes regions into columns, filling each column up to 1.5 × the tallest region's height before starting a new one. The first region (which may hold a root) is placed alone in the first column.
• padding (default 30) is the gap kept between regions, both within a column and between columns.
• Both functions preserve each node's relative position inside its region; only whole regions are translated.
• arrangeRegions([]) returns an empty mapping.