github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-08-22 12:49:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

💄 Prune graph console layout roster and tune overlap

Browse Source 
Remove grid, random, force, fruchterman, force-atlas2 (nothing over the kept set) and mds (stress layout degenerates to spokes on tree distances, no collision term to tune). Parameterize the keepers against node overlap — concentric/radial get preventOverlap+nodeSize, d3-force a collide radius — and shrink node labels to 7 px on those layouts (DENSE_LABEL_LAYOUTS), verified against variants_simple (72 nodes).

Signed-off-by: Álvaro Tejero Cantero <alvorithm@teje.ro>
This commit is contained in:
Álvaro Tejero Cantero 2026-07-16 19:37:34 +02:00 committed by Andrey Antukh
parent 65d8e21afd
commit e6dcd1af99
1 changed files with 20 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
backend/resources/app/templates/graph-console.tmpl
View File

@ -573,28 +573,30 @@ Graph Console
// Layout dropdown source of truth: name -> G6 layout config, or null for // Layout dropdown source of truth: name -> G6 layout config, or null for
// the built-in O(n) tree layout (preset positions from treePositions, // the built-in O(n) tree layout (preset positions from treePositions,
// fastest, exploits IsChildOf being a tree). The <select> is populated // fastest, exploits IsChildOf being a tree). The <select> is populated
// from these keys; add/remove/tune entries here. All 13 G6 configs below // from these keys; add/remove/tune entries here. Pruned 2026-07-16:
// were smoke-tested against combo data on this UMD build (2026-07-15). // grid/random/force/fruchterman/force-atlas2 added nothing over this
// Note: iterative layouts (force*, fruchterman) are slow on 1000+ nodes; // set. combo-combined is the only combo-aware layout: it lays out each
// combo-combined is the only combo-aware one; the rest just get bounding // combo's members internally, then treats every combo as one super-node
// boxes drawn around wherever they put the member nodes. // in an outer force pass. Non-hierarchical layouts carry overlap
// parameters (preventOverlap ignores label extents — see
// DENSE_LABEL_LAYOUTS).
const LAYOUTS = { const LAYOUTS = {
"tree": null, "tree": null,
"antv-dagre": { type: "antv-dagre", rankdir: "BT", nodesep: 10, ranksep: 40, sortByCombo: true }, "antv-dagre": { type: "antv-dagre", rankdir: "BT", nodesep: 10, ranksep: 40, sortByCombo: true },
"dagre": { type: "dagre", rankdir: "BT" }, "dagre": { type: "dagre", rankdir: "BT" },
"circular": { type: "circular" }, "circular": { type: "circular" },
"concentric": { type: "concentric" }, "concentric": { type: "concentric", preventOverlap: true, nodeSize: 32, nodeSpacing: 12 },
"radial": { type: "radial" }, "radial": { type: "radial", preventOverlap: true, nodeSize: 32, unitRadius: 90 },
"grid": { type: "grid" }, "d3-force": { type: "d3-force", collide: { radius: 26 } },
"force": { type: "force" }, "combo-combined": { type: "combo-combined" }
"d3-force": { type: "d3-force" },
"force-atlas2": { type: "force-atlas2" },
"fruchterman": { type: "fruchterman" },
"mds": { type: "mds" },
"combo-combined": { type: "combo-combined" },
"random": { type: "random" }
}; };
const DEFAULT_LAYOUT = "tree"; const DEFAULT_LAYOUT = "tree";
// Always-on labels are the residual overlap driver on ring/stress
// layouts (their collision handling ignores label extents), so these
// get smaller labels; the hover tooltip carries full identity anywhere.
const DENSE_LABEL_LAYOUTS = {
"concentric": true, "radial": true, "d3-force": true
};
const graphViewStatus = document.getElementById("graph-view-status"); const graphViewStatus = document.getElementById("graph-view-status");
let g6graph = null; let g6graph = null;
@ -795,7 +797,9 @@ Graph Console
return m && m.kind === "removed" ? [3, 3] : 0; return m && m.kind === "removed" ? [3, 3] : 0;
}, },
labelText: function (d) { return d.data.label; }, labelText: function (d) { return d.data.label; },
labelFontSize: 9, labelFontSize: function () {
return DENSE_LABEL_LAYOUTS[currentLayoutName()] ? 7 : 9;
},
labelFill: "#0b0b0b", labelFill: "#0b0b0b",
labelPlacement: "bottom", labelPlacement: "bottom",
halo: function (d) { return !!nodeMark(d.id); }, halo: function (d) { return !!nodeMark(d.id); },