nodes/ComfyAssets-ComfyUI_PromptManager
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(history): enforce chronological marker visual parity (#209)

Browse Source
This commit is contained in:
Vito Sansevero
2026-10-18 14:21:50 -07:00
parent 3fb608bc21
commit c32d01e8aa
3 changed files with 84 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/browser/history-canonical-comparison.mjs
+63 -3
View File
@@ -45,6 +45,9 @@ export async function historyGeometry(page, production) {
footer: '.library-variant-footer', all: '.library-variants button:last-child',
recordedPositiveLabel: '.history-positive-lane span', recordedBranch: '.history-context-branch',
recordedHeading: '.recorded-history h2', recordedTimeline: '.history-timeline', recordedCanvas: '.history-canvas',
recordedPositive: '.history-positive-lane', recordedLabel: '.history-context-label',
recordedAnchor: '.history-context-anchor', recordedRepeat: '.history-run-marker:not(.history-context-anchor)',
recordedMarker: '.history-run-marker', recordedColumn: '.history-run-column',
} : {
surface: '.surface', timeline: '.timeline', positive: '.positive-lane', branch: '.variant-lane',
label: '.variant-lane span', dot: '.variant-dot[aria-pressed="true"]', role: '.surface .prompt-section',
@@ -52,8 +55,10 @@ export async function historyGeometry(page, production) {
prompt: '.surface .prompt-text', gallery: '.history-gallery',
heading: '.timeline-panel h2', intro: '.timeline-panel .panel-heading .small',
footer: '.timeline-lower', all: '.timeline-lower button',
repeat: '.timeline .run-dot',
};
return page.evaluate(selectors => Object.fromEntries(Object.entries(selectors).map(([key, selector]) => {
return page.evaluate(selectors => ({ pointerCoarse: matchMedia('(pointer: coarse)').matches,
...Object.fromEntries(Object.entries(selectors).map(([key, selector]) => {
const nodes = [...document.querySelectorAll(selector)];
return [key, nodes.map(node => {
const style = getComputedStyle(node), before = getComputedStyle(node, '::before');
@@ -62,13 +67,18 @@ export async function historyGeometry(page, production) {
padding: style.padding, top: style.top, left: style.left, background: style.backgroundColor, color: style.color,
border: style.borderTopWidth, borderColor: style.borderTopColor, radius: style.borderRadius,
fontSize: style.fontSize, fontFamily: style.fontFamily, lineHeight: style.lineHeight,
fontWeight: style.fontWeight, text: node.textContent, contextId: node.dataset.contextId || node.dataset.contextBranch,
runId: node.dataset.runId,
marginLeft: style.marginLeft, outline: style.outlineWidth, outlineColor: style.outlineColor,
outlineOffset: style.outlineOffset, before: { width: before.width, height: before.height,
top: before.top, left: before.left, borderLeft: before.borderLeftWidth,
borderBottom: before.borderBottomWidth, radius: before.borderBottomLeftRadius,
background: before.backgroundColor, color: before.color } };
background: before.backgroundColor, color: before.color, borderColor: before.borderTopColor,
borderLeftColor: before.borderLeftColor, borderBottomColor: before.borderBottomColor,
fontSize: before.fontSize, fontFamily: before.fontFamily, fontWeight: before.fontWeight,
content: before.content } };
})];
})), selectors);
})) }), selectors);
}
export async function nativeDialogState(locator) {
@@ -156,4 +166,54 @@ export async function compareCanonicalHistory(reference, actual, testInfo) {
for (const property of ['color', 'background']) expect.soft(actual.positive[0].before[property]).toBe(reference.positive[0].before[property]);
for (const [index, block] of actual.role.entries()) for (const property of ['border', 'borderColor', 'fontSize']) expect.soft(block[property]).toBe(reference.role[index][property]);
for (const [index, prompt] of actual.prompt.entries()) for (const property of ['fontSize', 'lineHeight', 'fontFamily']) expect.soft(prompt[property]).toBe(reference.prompt[index][property]);
assertRecordedHistory(reference, actual, { branchCount: 1, anchorCount: 1, repeatCount: 0 });
}
export function assertRecordedHistory(reference, actual, { branchCount, anchorCount, repeatCount }) {
expect(branchCount).toBeGreaterThan(0);
expect(reference.branch.length).toBeGreaterThanOrEqual(2);
expect(reference.dot).toHaveLength(1);
expect(reference.repeat.length).toBeGreaterThan(0);
expect.soft(actual.recordedBranch, 'chronological branches').toHaveLength(branchCount);
expect.soft(actual.recordedLabel, 'chronological labels').toHaveLength(branchCount);
expect.soft(actual.recordedAnchor, 'chronological anchors').toHaveLength(anchorCount);
expect.soft(actual.recordedRepeat, 'chronological repeats').toHaveLength(repeatCount);
expect.soft(actual.recordedMarker).toHaveLength(anchorCount + repeatCount);
expect.soft(actual.recordedColumn).toHaveLength(anchorCount + repeatCount);
expect.soft(actual.recordedPositive).toHaveLength(1);
for (const property of ['border', 'borderColor']) expect.soft(actual.recordedPositive[0][property], `recorded positive ${property}`).toBe(reference.positive[0][property]);
for (const property of ['color', 'background', 'width', 'height', 'fontSize']) expect.soft(actual.recordedPositive[0].before[property], `recorded positive glyph ${property}`).toBe(reference.positive[0].before[property]);
for (const [index, branch] of actual.recordedBranch.entries()) {
for (const property of ['height', 'border', 'borderColor']) expect.soft(branch[property], `recorded branch ${index} ${property}`).toBe(reference.branch[0][property]);
for (const property of ['width', 'height', 'top', 'left', 'borderLeft', 'borderBottom', 'radius', 'borderLeftColor', 'borderBottomColor']) expect.soft(branch.before[property], `recorded curve ${index} ${property}`).toBe(reference.branch[0].before[property]);
if (index) expect.soft(branch.y - actual.recordedBranch[index - 1].y, 'recorded 57px branch rhythm').toBe(reference.branch[1].y - reference.branch[0].y);
}
for (const label of actual.recordedLabel) for (const property of ['color', 'fontSize']) expect.soft(label[property], `recorded label ${property}`).toBe(reference.label[0][property]);
for (const [index, column] of actual.recordedColumn.entries()) {
expect.soft(column.left).toBe(`${38 + index * 64}px`);
if (index) expect.soft(column.x - actual.recordedColumn[index - 1].x, '64px chronological columns').toBe(64);
}
const checkMarker = (marker, canonical, anchor) => {
const visual = actual.pointerCoarse ? marker.before : marker;
const size = anchor ? 29 : 12;
expect.soft(visual.width, 'recorded marker visual width').toBe(actual.pointerCoarse ? `${size}px` : size);
expect.soft(visual.height, 'recorded marker visual height').toBe(actual.pointerCoarse ? `${size}px` : size);
for (const property of ['background', 'borderColor', 'radius']) expect.soft(visual[property], `recorded marker ${property}`).toBe(canonical[property]);
if (actual.pointerCoarse) {
expect.soft(marker.width, 'coarse marker hit width').toBeGreaterThanOrEqual(44);
expect.soft(marker.height, 'coarse marker hit height').toBeGreaterThanOrEqual(44);
expect.soft(visual.borderLeft).toBe('2px');
} else expect.soft(marker.border).toBe(canonical.border);
if (anchor) {
expect.soft(marker.text).toBe('−');
if (actual.pointerCoarse) expect.soft(visual.content).toBe('"−"');
for (const property of ['color', 'fontSize', 'fontFamily', 'fontWeight']) expect.soft(visual[property], `recorded minus ${property}`).toBe(canonical[property]);
const branch = actual.recordedBranch.find(value => value.contextId === marker.contextId);
expect(branch, 'each context anchor has its real branch').toBeTruthy();
expect.soft(Math.abs(marker.x + marker.width / 2 - branch.x)).toBeLessThanOrEqual(1);
expect.soft(Math.abs(marker.y + marker.height / 2 - branch.y)).toBeLessThanOrEqual(1);
} else expect.soft(marker.text).toBe('');
};
for (const marker of actual.recordedAnchor) checkMarker(marker, reference.dot[0], true);
for (const marker of actual.recordedRepeat) checkMarker(marker, reference.repeat[0], false);
}
tests/browser/workspace-visual.spec.mjs
+19 -1
View File
@@ -1,7 +1,7 @@
import { writeFile } from 'node:fs/promises';
import { readFile } from 'node:fs/promises';
import { createHash } from 'node:crypto';
import { captureCanonicalState, historyGeometry, compareCanonicalHistory, nativeDialogState, exerciseCurrentPairSend } from './history-canonical-comparison.mjs';
import { captureCanonicalState, historyGeometry, compareCanonicalHistory, nativeDialogState, exerciseCurrentPairSend, assertRecordedHistory } from './history-canonical-comparison.mjs';
import { startCoverage, saveCoverage } from '../../tools/vendor/browser-coverage.mjs';
import { test, expect } from '../../tools/vendor/node_modules/@playwright/test/index.mjs';
@@ -131,6 +131,24 @@ for (const [width, height] of [[1600, 1100], [390, 844]]) for (const theme of ['
await captureCanonicalState(page, testInfo, `production-viewer-${width}-${theme}`, 'dialog.image-preview');
await page.keyboard.press('Escape');await expect(view).toBeFocused();await page.keyboard.press('Escape');await expect(run).toBeFocused();
await compareCanonicalHistory(reference, actual, testInfo);
const history = await request.get(`/prompt_manager/library/${fixture.positive_id}/history`);await expect(history).toBeOK();
const window = await history.json();expect(window.items.map(item => item.run_id)).toEqual(fixture.aab);
expect(window.context_summaries).toHaveLength(2);
const contextIds = [...new Set(window.items.flatMap(item => item.matching_anchors.map(anchor => anchor.context_id)))];
expect(contextIds).toHaveLength(2);
await page.goto(`${workspace}#/library/${fixture.positive_id}`);
await expect(page.locator('.history-run-marker')).toHaveCount(3);
await page.locator('.history-timeline').evaluate(node => { node.scrollLeft = 0;node.scrollTop = 0; });
const anchor = page.locator('.history-context-anchor').first();await anchor.focus();await expect(anchor).toBeFocused();
const multiple = await historyGeometry(page, true);
expect(multiple.recordedBranch.map(branch => branch.contextId)).toEqual(contextIds);
expect(multiple.recordedMarker.map(marker => marker.runId)).toEqual(fixture.aab);
await captureCanonicalState(page, testInfo, `production-chronology-multiple-${width}-${theme}`, '.recorded-history');
const geometryPath = testInfo.outputPath('canonical-recorded-geometry.json');
await writeFile(geometryPath, JSON.stringify({ reference, actual: multiple, expected: { contextIds, runIds: fixture.aab, branchCount: 2, anchorCount: 2, repeatCount: 1 }, differences: 'Two real frozen contexts / three runs versus three illustrative saved variants; chronological columns retain 64px run spacing, with the same role colors, curves and 57px row rhythm.' }, null, 2));
await testInfo.attach('canonical-recorded-geometry', { path: geometryPath, contentType: 'application/json' });
assertRecordedHistory(reference, multiple, { branchCount: 2, anchorCount: 2, repeatCount: 1 });
});
}
web/js/workspace/library.css
+2 -2
View File
@@ -82,7 +82,7 @@ main.library-main { --library-negative: #ff8c98; }
.history-run-column { position: absolute; inset-block: 0; inline-size: 64px; pointer-events: none; }
.history-position { position: absolute; inset-block-start: 41px; font-size: 10px; color: var(--ca-muted); }
.ca-tools .history-run-marker { position: absolute; pointer-events: auto; transform: translate(-50%, -50%); inline-size: 12px; block-size: 12px; min-inline-size: 12px; min-block-size: 12px; border: 2px solid var(--library-negative); border-radius: 50%; background: var(--ca-field); padding: 0; color: var(--ca-field); font-size: 16px; line-height: 1; }
.ca-tools .history-context-anchor { inline-size: 29px; block-size: 29px; min-inline-size: 29px; min-block-size: 29px; background: var(--library-negative); }
.ca-tools .history-context-anchor { inline-size: 29px; block-size: 29px; min-inline-size: 29px; min-block-size: 29px; background: var(--library-negative); color: #38151b; font-size: 12px; }
.history-run-marker[aria-pressed="true"], .history-run-marker:focus-visible { outline: 3px solid var(--ca-focus); outline-offset: 4px; }
.history-run-marker[aria-disabled="true"] { opacity: .6; cursor: progress; }
.recorded-run-dialog { box-sizing: border-box; inline-size: min(1100px, calc(100% - 32px)); max-inline-size: calc(100% - 32px); max-block-size: calc(100dvh - 32px); padding: 22px; border: 1px solid var(--ca-border); border-radius: 7px; color: var(--ca-text); background: var(--ca-surface); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; overflow-wrap: anywhere; }
@@ -114,7 +114,7 @@ main.library-main { --library-negative: #ff8c98; }
.recorded-history :where(.history-toolbar button, .history-scope summary) { min-inline-size: 44px; min-block-size: 44px; }
.ca-tools .history-run-marker { inline-size: 44px; block-size: 44px; min-inline-size: 44px; min-block-size: 44px; border: 0; background: transparent; color: transparent; }
.ca-tools .history-run-marker::before { content: ""; position: absolute; inset: 16px; box-sizing: border-box; border: 2px solid var(--library-negative); border-radius: 50%; background: var(--ca-field); }
.ca-tools .history-context-anchor::before { content: "−"; inset: 7.5px; inline-size: 29px; block-size: 29px; line-height: 25px; color: var(--ca-field); background: var(--library-negative); }
.ca-tools .history-context-anchor::before { content: "−"; inset: 7.5px; inline-size: 29px; block-size: 29px; line-height: 25px; color: #38151b; background: var(--library-negative); }
.ca-tools .library-main .library-variant-dot::after { content: ""; position: absolute; inset: -9px; }
.ca-tools .recorded-run-dialog :where(button, summary) { min-inline-size: 44px; min-block-size: 44px; }
}