Skip to content

feat: enhance viewport handling on resize and panel transitions #10

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

Merged
hugolytics merged 2 commits into from
Mar 12, 2026
Merged

feat: enhance viewport handling on resize and panel transitions #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0a71a10
feat: enhance viewport handling during resize and add tests for curre…
hugolytics Mar 12, 2026
49cd065
feat: trigger viewport sync on panel transition end
hugolytics Mar 12, 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
19 changes: 18 additions & 1 deletion docs-site/public/examples/vllm/deployment.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -600,6 +600,7 @@
this.onMouseMove = null;
this.onCanvasClick = null;
this.onKeyDown = null;
this.onPanelTransitionEnd = null;
this.narrowObserver = null;
this.canvasObserver = null;
this.viewportSyncRaf = null;
Expand Down Expand Up @@ -749,9 +750,15 @@
};
this.viewportSyncRaf = schedule(() => {
this.viewportSyncRaf = null;
const desiredState = this.captureViewportState() ?? this.lastKnownViewport;
if (!this.applyCanvasSize(targetSvg)) return;
this.pz?.resize();
const activeNodes = this.curStep >= 0 ? this.steps[this.curStep]?.nodes ?? [] : [];
if (activeNodes.length) {
applyHighlight(this, activeNodes);
autoZoom(this, activeNodes);
return;
}
const desiredState = this.captureViewportState() ?? this.lastKnownViewport;
if (!this.restoreViewport(desiredState)) this.recoverViewport();
});
}
Expand Down Expand Up @@ -876,6 +883,15 @@
bindKeyboard(this);
if (this.autoBindControls) this.bindControls();
this.syncPanelToggleButton();
const panel = this.doc.getElementById("panel");
if (panel) {
this.onPanelTransitionEnd = (e) => {
if (e.target !== panel) return;
if (e.propertyName !== "width" && e.propertyName !== "min-height") return;
this.onResize?.();
};
panel.addEventListener("transitionend", this.onPanelTransitionEnd);
}
if (this.overview && this.overview.position !== "last") {
this.showOverview(this.doc.querySelector(`${this.selectors.stepButtons}[data-step="all"]`));
} else {
Expand Down Expand Up @@ -950,6 +966,7 @@
if (this.onMouseMove) this.doc.removeEventListener("mousemove", this.onMouseMove);
if (this.onCanvasClick && this.canvasWrap) this.canvasWrap.removeEventListener("click", this.onCanvasClick);
if (this.onKeyDown) this.doc.removeEventListener("keydown", this.onKeyDown);
if (this.onPanelTransitionEnd) this.doc.getElementById("panel")?.removeEventListener("transitionend", this.onPanelTransitionEnd);
if (this.zoomRaf) cancelAnimationFrame(this.zoomRaf);
if (this.viewportSyncRaf !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(this.viewportSyncRaf);
this.narrowObserver?.disconnect();
Expand Down
19 changes: 18 additions & 1 deletion examples/vLLM/deployment.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -600,6 +600,7 @@
this.onMouseMove = null;
this.onCanvasClick = null;
this.onKeyDown = null;
this.onPanelTransitionEnd = null;
this.narrowObserver = null;
this.canvasObserver = null;
this.viewportSyncRaf = null;
Expand Down Expand Up @@ -749,9 +750,15 @@
};
this.viewportSyncRaf = schedule(() => {
this.viewportSyncRaf = null;
const desiredState = this.captureViewportState() ?? this.lastKnownViewport;
if (!this.applyCanvasSize(targetSvg)) return;
this.pz?.resize();
const activeNodes = this.curStep >= 0 ? this.steps[this.curStep]?.nodes ?? [] : [];
if (activeNodes.length) {
applyHighlight(this, activeNodes);
autoZoom(this, activeNodes);
return;
}
const desiredState = this.captureViewportState() ?? this.lastKnownViewport;
if (!this.restoreViewport(desiredState)) this.recoverViewport();
});
}
Expand Down Expand Up @@ -876,6 +883,15 @@
bindKeyboard(this);
if (this.autoBindControls) this.bindControls();
this.syncPanelToggleButton();
const panel = this.doc.getElementById("panel");
if (panel) {
this.onPanelTransitionEnd = (e) => {
if (e.target !== panel) return;
if (e.propertyName !== "width" && e.propertyName !== "min-height") return;
this.onResize?.();
};
panel.addEventListener("transitionend", this.onPanelTransitionEnd);
}
if (this.overview && this.overview.position !== "last") {
this.showOverview(this.doc.querySelector(`${this.selectors.stepButtons}[data-step="all"]`));
} else {
Expand Down Expand Up @@ -950,6 +966,7 @@
if (this.onMouseMove) this.doc.removeEventListener("mousemove", this.onMouseMove);
if (this.onCanvasClick && this.canvasWrap) this.canvasWrap.removeEventListener("click", this.onCanvasClick);
if (this.onKeyDown) this.doc.removeEventListener("keydown", this.onKeyDown);
if (this.onPanelTransitionEnd) this.doc.getElementById("panel")?.removeEventListener("transitionend", this.onPanelTransitionEnd);
if (this.zoomRaf) cancelAnimationFrame(this.zoomRaf);
if (this.viewportSyncRaf !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(this.viewportSyncRaf);
this.narrowObserver?.disconnect();
Expand Down
19 changes: 18 additions & 1 deletion src/viewer/viewer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export class DiaScopeViewer {
onMouseMove: ((e: MouseEvent) => void) | null = null;
onCanvasClick: ((e: MouseEvent) => void) | null = null;
onKeyDown: ((e: KeyboardEvent) => void) | null = null;
onPanelTransitionEnd: ((e: TransitionEvent) => void) | null = null;

readonly doc: Document;
readonly steps: Step[];
Expand Down Expand Up @@ -252,9 +253,15 @@ export class DiaScopeViewer {

this.viewportSyncRaf = schedule(() => {
this.viewportSyncRaf = null;
const desiredState = this.captureViewportState() ?? this.lastKnownViewport;
if (!this.applyCanvasSize(targetSvg)) return;
this.pz?.resize();
const activeNodes = this.curStep >= 0 ? this.steps[this.curStep]?.nodes ?? [] : [];
if (activeNodes.length) {
applyHighlight(this, activeNodes);
autoZoom(this, activeNodes);
return;
}
const desiredState = this.captureViewportState() ?? this.lastKnownViewport;
if (!this.restoreViewport(desiredState)) this.recoverViewport();
});
}
Expand Down Expand Up @@ -404,6 +411,15 @@ export class DiaScopeViewer {
bindKeyboard(this);
if (this.autoBindControls) this.bindControls();
this.syncPanelToggleButton();
const panel = this.doc.getElementById("panel");
if (panel) {
this.onPanelTransitionEnd = (e: TransitionEvent) => {
if (e.target !== panel) return;
if (e.propertyName !== "width" && e.propertyName !== "min-height") return;
this.onResize?.();
};
panel.addEventListener("transitionend", this.onPanelTransitionEnd);
}

// Start at overview when configured at 'first' position; otherwise start at step 0
if (this.overview && this.overview.position !== 'last') {
Expand Down Expand Up @@ -488,6 +504,7 @@ export class DiaScopeViewer {
if (this.onMouseMove) this.doc.removeEventListener("mousemove", this.onMouseMove);
if (this.onCanvasClick && this.canvasWrap) this.canvasWrap.removeEventListener("click", this.onCanvasClick);
if (this.onKeyDown) this.doc.removeEventListener("keydown", this.onKeyDown);
if (this.onPanelTransitionEnd) this.doc.getElementById("panel")?.removeEventListener("transitionend", this.onPanelTransitionEnd);
if (this.zoomRaf) cancelAnimationFrame(this.zoomRaf);
if (this.viewportSyncRaf !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(this.viewportSyncRaf);
this.narrowObserver?.disconnect();
Expand Down
146 changes: 139 additions & 7 deletions tests/viewer.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,41 @@ import { DiaScopeViewer } from "../src/viewer/viewer.js";
class FakeElement {
readonly style: Record<string, string> = {};
readonly children: FakeElement[] = [];
readonly listeners = new Map<string, Array<() => void | Promise<void>>>();
readonly listeners = new Map<string, Array<(event?: unknown) => void | Promise<void>>>();
readonly attributes = new Map<string, string>();
private readonly classes = new Set<string>();
readonly classList = {
add: vi.fn(),
remove: vi.fn(),
contains: vi.fn(() => false),
add: vi.fn((...names: string[]) => {
names.forEach((name) => this.classes.add(name));
}),
remove: vi.fn((...names: string[]) => {
names.forEach((name) => this.classes.delete(name));
}),
contains: vi.fn((name: string) => this.classes.has(name)),
toggle: vi.fn((name: string, force?: boolean) => {
if (force === true) {
this.classes.add(name);
return true;
}
if (force === false) {
this.classes.delete(name);
return false;
}
if (this.classes.has(name)) {
this.classes.delete(name);
return false;
}
this.classes.add(name);
return true;
}),
};
innerHTML = "";
title = "";
id = "";
clientWidth = 0;
clientHeight = 0;
dataset: Record<string, string> = {};
rect = { x: 0, y: 0, width: 0, height: 0 };
requestFullscreen = vi.fn(() => Promise.resolve());

constructor(private readonly doc: FakeDocument, id = "") {
Expand All @@ -40,26 +63,53 @@ class FakeElement {
if (child.id) this.doc.register(child);
}

addEventListener(type: string, listener: () => void | Promise<void>): void {
addEventListener(type: string, listener: (event?: unknown) => void | Promise<void>): void {
const current = this.listeners.get(type) ?? [];
current.push(listener);
this.listeners.set(type, current);
}

async click(): Promise<void> {
for (const listener of this.listeners.get("click") ?? []) await listener();
await this.dispatch("click", { target: this, currentTarget: this });
}

async dispatch(type: string, event: Record<string, unknown> = {}): Promise<void> {
for (const listener of this.listeners.get(type) ?? []) {
await listener({ target: this, currentTarget: this, ...event });
}
}

querySelectorAll(): FakeElement[] {
return [];
}

getBoundingClientRect() {
const { x, y, width, height } = this.rect.width || this.rect.height
? this.rect
: { x: 0, y: 0, width: this.clientWidth, height: this.clientHeight };
return {
x,
y,
width,
height,
top: y,
left: x,
right: x + width,
bottom: y + height,
toJSON() {
return { x, y, width, height, top: y, left: x, right: x + width, bottom: y + height };
},
};
}
}

class FakeDocument {
readonly elements = new Map<string, FakeElement>();
readonly listeners = new Map<string, Array<() => void>>();
readonly body = new FakeElement(this, "body");
readonly documentElement = new FakeElement(this, "document-element");
nodes: FakeElement[] = [];
edges: FakeElement[] = [];
readonly defaultView = {
location: { href: "https://diascope.biolytics.ai/examples/vllm/deployment.html?expandable" },
open: vi.fn(),
Expand Down Expand Up @@ -94,6 +144,12 @@ class FakeDocument {
return [];
}

querySelectorAllBySelector(selector: string): FakeElement[] {
if (selector === ".d2-node") return this.nodes;
if (selector === ".d2-edge") return this.edges;
return [];
}

addEventListener(type: string, listener: () => void): void {
const current = this.listeners.get(type) ?? [];
current.push(listener);
Expand All @@ -110,6 +166,7 @@ function createViewerHarness() {
const canvasWrap = doc.register(new FakeElement(doc, "canvas-wrap"));
canvasWrap.clientWidth = 556;
canvasWrap.clientHeight = 291;
const panel = doc.register(new FakeElement(doc, "panel"));
const svgHost = doc.register(new FakeElement(doc, "svg-host"));
const svg = doc.register(new FakeElement(doc, "diagram-svg"));
svgHost.appendChild(svg);
Expand Down Expand Up @@ -141,7 +198,7 @@ function createViewerHarness() {
steps: [],
});

return { doc, canvasWrap, svg, viewer, pz };
return { doc, canvasWrap, panel, svg, viewer, pz };
}

describe("DiaScopeViewer expand button", () => {
Expand Down Expand Up @@ -262,4 +319,79 @@ describe("DiaScopeViewer resize handling", () => {

vi.unstubAllGlobals();
});

it("re-focuses the current step after a resize instead of restoring the old raw viewport", () => {
const addEventListener = vi.fn();
const removeEventListener = vi.fn();
vi.stubGlobal("window", { addEventListener, removeEventListener });
vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
cb(0);
return 1;
});
vi.stubGlobal("cancelAnimationFrame", vi.fn());

const { doc, canvasWrap, viewer, pz } = createViewerHarness();
const node = new FakeElement(doc, "node-A");
node.dataset = { nodeId: "A" };
node.rect = { x: 120, y: 80, width: 90, height: 50 };
doc.nodes = [node];
doc.querySelectorAll = ((selector?: string) => doc.querySelectorAllBySelector(selector ?? "")) as typeof doc.querySelectorAll;

viewer.steps = [{ nodes: ["A"] }];
viewer.curStep = 0;

viewer.init();
const preResizeZoom = pz.getZoom();
const preResizePan = pz.getPan();
vi.clearAllMocks();

canvasWrap.clientWidth = 776;
canvasWrap.clientHeight = 560;
viewer.onResize?.();

expect(pz.resize).toHaveBeenCalledTimes(1);
expect(pz.fit).not.toHaveBeenCalled();
expect(pz.zoom).not.toHaveBeenCalledWith(preResizeZoom);
expect(pz.pan).not.toHaveBeenCalledWith(preResizePan);

vi.unstubAllGlobals();
});

it("re-focuses the current step after the side panel width transition settles", async () => {
const addEventListener = vi.fn();
const removeEventListener = vi.fn();
vi.stubGlobal("window", { addEventListener, removeEventListener });
vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
cb(0);
return 1;
});
vi.stubGlobal("cancelAnimationFrame", vi.fn());

const { doc, canvasWrap, panel, viewer, pz } = createViewerHarness();
const node = new FakeElement(doc, "node-A");
node.dataset = { nodeId: "A" };
node.rect = { x: 120, y: 80, width: 90, height: 50 };
doc.nodes = [node];
doc.querySelectorAll = ((selector?: string) => doc.querySelectorAllBySelector(selector ?? "")) as typeof doc.querySelectorAll;

viewer.steps = [{ nodes: ["A"] }];
viewer.curStep = 0;

viewer.init();
const preCollapseZoom = pz.getZoom();
const preCollapsePan = pz.getPan();
vi.clearAllMocks();

viewer.togglePanel();

canvasWrap.clientWidth = 776;
await panel.dispatch("transitionend", { propertyName: "width" });

expect(pz.resize).toHaveBeenCalledTimes(2);
expect(pz.fit).not.toHaveBeenCalled();
expect(pz.zoom).not.toHaveBeenCalledWith(preCollapseZoom);
expect(pz.pan).not.toHaveBeenCalledWith(preCollapsePan);

vi.unstubAllGlobals();
});
});
Loading