Skip to content

Fix choppy pan/zoom on large graphs #107

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
EBB2675 wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

Fix choppy pan/zoom on large graphs #107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6b4d267
Stop re-measuring every node on pan and zoom in the graph overlay
EBB2675 Sep 4, 2026
ca64e26
strenthen overlay drag test
EBB2675 Sep 4, 2026
d70ad39
Address review: guard sameCardBox, coalesce viewport sync in rAF
EBB2675 Sep 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
256 changes: 128 additions & 128 deletions ...ight_mode/static/assets/index-DZx-Y8jh.js → ...ight_mode/static/assets/index-CMERCfRz.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion ...t_mode/static/assets/index.es-GC6TJ9k9.js → ...t_mode/static/assets/index.es-BZxAWXQn.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 0 additions & 2 deletions api/light_mode/static/assets/purify.es-Bzr520pe.js
View file
Open in desktop

This file was deleted.

2 changes: 2 additions & 0 deletions api/light_mode/static/assets/purify.es-CovBOfck.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion api/light_mode/static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SchemaStudio</title>
<script type="module" crossorigin src="/assets/index-DZx-Y8jh.js"></script>
<script type="module" crossorigin src="/assets/index-CMERCfRz.js"></script>
Comment thread
EBB2675 marked this conversation as resolved.
<link rel="stylesheet" crossorigin href="/assets/index-DisXmSVd.css">
</head>
<body>
Expand Down
82 changes: 56 additions & 26 deletions web/src/GraphView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,16 @@ const cleanType = (t?: string | null) => {

const editableCardWidth = (box: CardBox) => Math.max(box.w + 24, 200);

const sameCardBox = (a: CardBox | undefined, b: CardBox | undefined) =>
a !== undefined && b !== undefined &&
a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;

const sameCardBoxMap = (a: Record<string, CardBox>, b: Record<string, CardBox>) => {
const ids = Object.keys(a);
if (ids.length !== Object.keys(b).length) return false;
return ids.every((id) => sameCardBox(a[id], b[id]));
};

const connectionPoints = (source: CardBox, target: CardBox) => {
const sx = source.x + source.w / 2;
const sy = source.y + source.h / 2;
Expand Down Expand Up @@ -143,7 +153,7 @@ export default function GraphView({
const containerRef = useRef<HTMLDivElement | null>(null);
const cyRef = useRef<Core | null>(null);
const overlayRef = useRef<HTMLDivElement | null>(null);
const [cardBoxes, setCardBoxes] = useState<Record<string, { x: number; y: number; w: number; h: number }>>({});
const [cardBoxes, setCardBoxes] = useState<Record<string, CardBox>>({});
const [viewport, setViewport] = useState<{ pan: { x: number; y: number }; zoom: number }>({
pan: { x: 0, y: 0 },
zoom: 1,
Expand Down Expand Up @@ -816,43 +826,56 @@ export default function GraphView({
const cy = cyRef.current;
if (!cy) return;

let rafId: number | null = null;
let viewportRaf: number | null = null;

const updateBoxes = () => {
const boxes: Record<string, { x: number; y: number; w: number; h: number }> = {};
// Viewport synchronization: the overlay wrapper is translated/scaled to
// follow Cytoscape pan/zoom. Node model positions and model-space bounding
// boxes do not change when the user pans or zooms, so this path stays cheap
// and must never re-measure node geometry.
const applyViewport = () => {
const pan = cy.pan();
const zoom = cy.zoom();
setViewport((prev) =>
prev.pan.x === pan.x && prev.pan.y === pan.y && prev.zoom === zoom
? prev
: { pan: { x: pan.x, y: pan.y }, zoom }
);
Comment thread
EBB2675 marked this conversation as resolved.
};

// A single interaction (wheel input, cy.animate()) can emit several
// pan/zoom events per frame; coalesce them into one state update.
const scheduleViewportSync = () => {
if (viewportRaf !== null) return;
viewportRaf = requestAnimationFrame(() => {
viewportRaf = null;
applyViewport();
});
};

// Full geometry synchronization: measure every node's model-space bounding
// box and rebuild the card-box map. Only needed when the graph geometry
// actually changes (initial overlay geometry, and when layout finishes).
const syncAllCardBoxes = () => {
const boxes: Record<string, CardBox> = {};
cy.nodes().forEach((n) => {
const box = n.boundingBox({ includeLabels: true });
boxes[n.id()] = { x: box.x1, y: box.y1, w: box.w, h: box.h };
});

setViewport((prev) => {
const samePan = prev.pan.x === pan.x && prev.pan.y === pan.y;
const sameZoom = prev.zoom === zoom;
if (samePan && sameZoom) return prev;
return { pan, zoom };
});
setCardBoxes(boxes);
setCardBoxes((prev) => (sameCardBoxMap(prev, boxes) ? prev : boxes));
};

const scheduleUpdate = () => {
if (rafId !== null) return;
rafId = requestAnimationFrame(() => {
rafId = null;
updateBoxes();
});
};
// Establish initial geometry now, in case layout already completed before
// this effect registered its listener.
applyViewport();
syncAllCardBoxes();

updateBoxes();
cy.on("render", scheduleUpdate);
cy.on("pan zoom", scheduleUpdate);
cy.on("pan zoom", scheduleViewportSync);
cy.on("layoutstop", syncAllCardBoxes);

return () => {
if (rafId !== null) cancelAnimationFrame(rafId);
cy.off("render", scheduleUpdate);
cy.off("pan zoom", scheduleUpdate);
if (viewportRaf !== null) cancelAnimationFrame(viewportRaf);
cy.off("pan zoom", scheduleViewportSync);
cy.off("layoutstop", syncAllCardBoxes);
};
}, [umlState, theme, umlEdges, graphNodes, showQuantityMetadata, diff]);

Expand Down Expand Up @@ -901,7 +924,14 @@ export default function GraphView({
const dx = (e.clientX - state.startX) / viewport.zoom;
const dy = (e.clientY - state.startY) / viewport.zoom;
node.position({ x: state.nodeX + dx, y: state.nodeY + dy });
cy.emit("render");

// Only the dragged node's model position changed: update just its card
// box instead of re-measuring every node in the graph.
const box = node.boundingBox({ includeLabels: true });
const next: CardBox = { x: box.x1, y: box.y1, w: box.w, h: box.h };
setCardBoxes((prev) =>
sameCardBox(prev[state.id], next) ? prev : { ...prev, [state.id]: next }
);
},
[viewport.zoom]
);
Expand Down
Loading
Loading