From 9c2122ddcdd577779b7d0bf4478ba61656ce6fc6 Mon Sep 17 00:00:00 2001 From: Diego Imbert Date: Wed, 30 Sep 2026 19:51:54 +0200 Subject: [PATCH] fix: Add data source pill sits one small gap above the graph Co-Authored-By: Claude Opus 5.5 (1M context) --- .../components/assets/AssetGraph/assetGraphLayout.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/frontend/src/lib/components/assets/AssetGraph/assetGraphLayout.ts b/frontend/src/lib/components/assets/AssetGraph/assetGraphLayout.ts index 26580584e0..e1e1e1e7da 100644 --- a/frontend/src/lib/components/assets/AssetGraph/assetGraphLayout.ts +++ b/frontend/src/lib/components/assets/AssetGraph/assetGraphLayout.ts @@ -12,6 +12,10 @@ const NODE_HEIGHT = NODE.height + 30 export const PIPELINE_NODE_HEIGHT = 48 // A step more than the flow editor's gap: the + on a node's bottom edge sits in it. const LAYER_GAP = NODE.gap.vertical + 16 +/** Height of the "Add data source" pill the anchor draws, and its gap to the + * graph: tighter than LAYER_GAP, since no edge runs through it. */ +const ANCHOR_HEIGHT = 32 +const ANCHOR_GAP = 40 const SIBLING_GAP = NODE.gap.horizontal // Horizontal gutter between two disjoint subgraphs. Wider than the // within-subgraph sibling gap so visually-unrelated components (e.g. two @@ -329,7 +333,7 @@ export function layoutAssetGraph( } // 4. Re-place the anchor centered horizontally over the whole packed - // graph, one layer above it; then renormalize so the anchor sits at the + // graph, just above it; then renormalize so the anchor sits at the // top (y = 0), pushing the components down a layer to make room (mirrors // the previous "anchor is the parent of every root" behaviour). if (anchorId && graph.nodes.some((n) => n.id === anchorId)) { @@ -344,7 +348,9 @@ export function layoutAssetGraph( if (p.x > maxX) maxX = p.x if (p.y < minY) minY = p.y } - byId.set(anchorId, { x: (minX + maxX) / 2, y: minY - layerH }) + // One gap above the graph, sized to the pill rather than a full node row: + // a row tall enough for an assets-only card leaves it floating high. + byId.set(anchorId, { x: (minX + maxX) / 2, y: minY - ANCHOR_HEIGHT - ANCHOR_GAP }) let nMinY = Infinity for (const p of byId.values()) if (p.y < nMinY) nMinY = p.y for (const p of byId.values()) p.y -= nMinY