aknuth/bizmatch-qc-desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dfgdf

Browse Source
This commit is contained in:
Andreas Knuth
2026-07-15 18:27:24 -05:00
parent 741b38b4f6
commit 5c69c40453
6 changed files with 3338 additions and 979 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
main.ts
View File

@@ -19,10 +19,10 @@ import STYLES_CSS from "./web/styles.css" with { type: "text" };
import SAMPLE_DOCUMENTS from "./sample-data/buyers_vision_anonymous.json" with {
type: "json",
};
import PDFJS_LIB_TEXT from "pdfjs-dist/build/pdf.min.mjs" with {
import PDFJS_LIB_TEXT from "pdfjs-dist/legacy/build/pdf.min.mjs" with {
type: "text",
};
import PDFJS_WORKER_TEXT from "pdfjs-dist/build/pdf.worker.min.mjs" with {
import PDFJS_WORKER_TEXT from "pdfjs-dist/legacy/build/pdf.worker.min.mjs" with {
type: "text",
};
@@ -357,7 +357,10 @@ Deno.serve(async (request) => {
// ---- PDF prepare endpoint ----
if (url.pathname === "/api/pdf/prepare" && request.method === "POST") {
try {
const body = await request.json() as { index?: number };
const body = await request.json() as {
index?: number;
requestId?: string;
};
const index = body.index;
const doc = documents[index!];
if (!Number.isInteger(index) || !doc) {
@@ -366,7 +369,8 @@ Deno.serve(async (request) => {
const sourcePath = resolvePdfPath(settings.pdfBaseDirectory, doc);
const relative = doc._letter + "/" + doc.file_name;
console.log(`${PREFIX} PDF prepare requested: ${relative}`);
const reqTag = body.requestId ? `PDF ${body.requestId}` : "PDF";
console.log(`${PREFIX} ${reqTag} prepare requested: ${relative}`);
const startTime = performance.now();
const cacheResult = await cacheOrGetPdf(sourcePath);
@@ -389,7 +393,7 @@ Deno.serve(async (request) => {
const elapsed = Math.round(performance.now() - startTime);
const status = cacheResult.stale ? "refresh" : "hit";
console.log(
`${PREFIX} PDF disk cache ${status} in ${elapsed}ms, token created`,
`${PREFIX} ${reqTag} disk cache ${status} in ${elapsed}ms, token created`,
);
return json({
@@ -449,7 +453,7 @@ Deno.serve(async (request) => {
}
// ---- PDF.js library assets ----
if (url.pathname === "/pdfjs/pdf.min.mjs") {
if (url.pathname === "/pdfjs/legacy/pdf.min.mjs") {
return new Response(PDFJS_LIB_TEXT, {
headers: {
"content-type": "text/javascript; charset=utf-8",
@@ -458,7 +462,7 @@ Deno.serve(async (request) => {
});
}
if (url.pathname === "/pdfjs/pdf.worker.min.mjs") {
if (url.pathname === "/pdfjs/legacy/pdf.worker.min.mjs") {
return new Response(PDFJS_WORKER_TEXT, {
headers: {
"content-type": "text/javascript; charset=utf-8",

3799
session-ses_0984.md
View File

File diff suppressed because it is too large Load Diff

27
web/app.js
View File

@@ -2,6 +2,7 @@ let state;
let groups = [];
let selectedIndex = -1;
let pdfViewer = null;
let loadRequestId = 0;
const people = document.querySelector("#people");
const fields = document.querySelector("#fields");
@@ -112,6 +113,14 @@ function renderList() {
}
async function loadPdf(index) {
const doc = state.documents[index];
if (!doc) return;
// Deduplicate: don't reload the same document
if (index === selectedIndex && pdfViewer) {
return;
}
if (pdfViewer) {
pdfViewer.destroy();
}
@@ -120,12 +129,18 @@ async function loadPdf(index) {
pdfMessage.hidden = false;
pdfMessage.textContent = "Loading PDF\u2026";
const reqId = "pdf-" + (++loadRequestId);
console.log(
`[BizMatch QC] PDF ${reqId} selection: ${doc._letter}/${doc.file_name}`,
);
console.log(`[BizMatch QC] PDF ${reqId} prepare requested`);
const startTime = performance.now();
try {
const response = await fetch("/api/pdf/prepare", {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify({ index }),
body: JSON.stringify({ index, requestId: reqId }),
});
if (!response.ok) {
const body = await response.json().catch(() => ({}));
@@ -134,13 +149,21 @@ async function loadPdf(index) {
const data = await response.json();
const prepareMs = Math.round(performance.now() - startTime);
console.log(
`[BizMatch QC] PDF prepare: ${prepareMs}ms, disk cache ${data.cacheStatus}`,
`[BizMatch QC] PDF ${reqId} prepare: ${prepareMs}ms, disk cache ${data.cacheStatus}`,
);
if (index !== selectedIndex) {
// A newer selection happened while preparing, don't show stale result
return;
}
viewer.classList.add("loaded");
pdfMessage.hidden = true;
console.log(`[BizMatch QC] PDF ${reqId} viewer load started`);
await pdfViewer.load(data.url, data.size);
console.log(`[BizMatch QC] PDF ${reqId} rendering complete`);
} catch (error) {
if (index !== selectedIndex) return;
const message = error instanceof Error ? error.message : String(error);
pdfMessage.textContent = `Cannot open PDF: ${message}`;
pdfMessage.hidden = false;

9
web/index.html
View File

@@ -6,8 +6,13 @@
<title>BizMatch QC</title>
<link rel="stylesheet" href="/styles.css">
<script type="module">
import * as pdfjsLib from "/pdfjs/pdf.min.mjs";
pdfjsLib.GlobalWorkerOptions.workerSrc = "/pdfjs/pdf.worker.min.mjs";
console.log(
"[BizMatch QC] Map.getOrInsertComputed supported:",
typeof Map.prototype.getOrInsertComputed === "function",
);
console.log("[BizMatch QC] PDF.js frontend build: legacy");
import * as pdfjsLib from "/pdfjs/legacy/pdf.min.mjs";
pdfjsLib.GlobalWorkerOptions.workerSrc = "/pdfjs/legacy/pdf.worker.min.mjs";
globalThis.pdfjsLib = pdfjsLib;
</script>
<script type="module" src="/pdf_viewer.js"></script>

419
web/pdf_viewer.js
View File

@@ -1,287 +1,262 @@
// PDF.js viewer with memory LRU cache and lazy page rendering.
// Depends on global pdfjsLib (loaded via module import in index.html).
// Uses pdfjs-dist 6.1.200.
const MAX_CACHED_DOCS = 3;
const MAX_CACHED_BYTES = 150 * 1024 * 1024;
const PRELOAD_PAGES_AHEAD = 2;
const PRELOAD_PAGES_BEHIND = 1;
const MAX_RENDER_SCALE = 2.0;
// PDF.js viewer using pdfjs-dist 6.1.200 legacy build.
// Depends on global pdfjsLib (loaded in index.html).
class PdfViewer {
constructor(container) {
this.container = container;
this.lru = [];
this.currentEntry = null;
this.renderTasks = [];
this.observer = null;
this.currentDocId = 0;
this.loadingDiv = null;
this.errorDiv = null;
this.pagesDiv = null;
this.generation = 0;
this.loadingTask = null;
this.doc = null;
this.renderTasks = new Set();
this.lastUrl = null;
this.lastSize = null;
this._createDOM();
}
_createDOM() {
// The pages container is always visible (never hidden).
// Loading and error states are overlays on top.
this.container.innerHTML = `
<div class="pdf-v-loading" hidden>Loading PDF\u2026</div>
<div class="pdf-v-error" hidden></div>
<div class="pdf-v-pages"></div>
<div class="pdf-v-overlay pdf-v-loading" hidden>Loading PDF\u2026</div>
<div class="pdf-v-overlay pdf-v-error" hidden>
<div class="pdf-v-error-msg"></div>
<button class="pdf-v-retry">Retry</button>
</div>
`;
this.pagesDiv = this.container.querySelector(".pdf-v-pages");
this.loadingDiv = this.container.querySelector(".pdf-v-loading");
this.errorDiv = this.container.querySelector(".pdf-v-error");
this.pagesDiv = this.container.querySelector(".pdf-v-pages");
this.errorMsg = this.container.querySelector(".pdf-v-error-msg");
this.retryBtn = this.container.querySelector(".pdf-v-retry");
this.retryBtn.addEventListener("click", () => {
if (this.lastUrl != null) {
this._setState("loading");
this._loadInternal(this.lastUrl, this.lastSize);
}
});
}
_showError(msg) {
_setState(state) {
this.loadingDiv.hidden = true;
this.errorDiv.textContent = msg;
this.errorDiv.hidden = false;
}
_showLoading() {
this.errorDiv.hidden = true;
this.loadingDiv.hidden = false;
}
_hideLoading() {
this.loadingDiv.hidden = true;
if (state === "loading") this.loadingDiv.hidden = false;
if (state === "error") this.errorDiv.hidden = false;
this._viewerState = state;
}
async load(url, byteSize) {
const docId = ++this.currentDocId;
this._showLoading();
this._cancelAllRenders();
if (this.observer) this.observer.disconnect();
this.lastUrl = url;
this.lastSize = byteSize;
this._setState("loading");
await this._loadInternal(url, byteSize);
}
// Check memory LRU
const cached = this.lru.find((e) => e.url === url);
if (cached) {
cached.lastUsed = Date.now();
this.lru = this.lru.filter((e) => e !== cached);
this.lru.push(cached);
this.currentEntry = cached;
this._renderDoc(docId, cached);
console.log("[BizMatch QC] PDF memory cache hit");
return;
}
async _loadInternal(url, _byteSize) {
const generation = ++this.generation;
console.log(
`[BizMatch QC] PDF viewer load started: generation ${generation}`,
);
const startLoad = performance.now();
// Await cleanup of previous document (promises may be involved)
await this._disposeCurrentDocument();
if (generation !== this.generation) return;
this.pagesDiv.innerHTML = "";
const loadStart = performance.now();
try {
const task = pdfjsLib.getDocument({ url, rangeChunkSize: 65536 });
const doc = await task.promise;
const loadMs = Math.round(performance.now() - startLoad);
console.log(
`[BizMatch QC] PDF.js document loaded: ${loadMs}ms`,
);
const pageCount = doc.numPages;
const entry = {
const task = pdfjsLib.getDocument({
url,
doc,
byteSize: byteSize || 0,
pageCount,
lastUsed: Date.now(),
};
rangeChunkSize: 65536,
disableAutoFetch: false,
});
this.loadingTask = task;
this._evictIfNeeded(entry.byteSize);
this.lru.push(entry);
if (docId !== this.currentDocId) {
const doc = await task.promise;
if (generation !== this.generation) {
doc.destroy();
return;
}
this.currentEntry = entry;
console.log("[BizMatch QC] PDF memory cache miss");
this._renderDoc(docId, entry, startLoad);
} catch (err) {
if (docId !== this.currentDocId) return;
this._showError(
`Cannot open PDF: ${err instanceof Error ? err.message : String(err)}`,
);
}
}
this.doc = doc;
_evictIfNeeded(incomingBytes) {
let totalBytes = incomingBytes;
for (const e of this.lru) totalBytes += e.byteSize;
while (
this.lru.length > 0 &&
(this.lru.length >= MAX_CACHED_DOCS || totalBytes > MAX_CACHED_BYTES)
) {
const victim = this.lru.shift();
totalBytes -= victim.byteSize;
try {
victim.doc.destroy();
} catch { /* ok */ }
const numPages = doc.numPages;
const loadMs = Math.round(performance.now() - loadStart);
console.log(
"[BizMatch QC] PDF memory cache evicted: " +
victim.url.split("/").pop(),
`[BizMatch QC] PDF document loaded: ${numPages} pages in ${loadMs}ms`,
);
}
}
_cancelAllRenders() {
for (const t of this.renderTasks) {
t.cancelled = true;
}
this.renderTasks = [];
}
const viewerWidth = this._getViewportWidth();
console.log(`[BizMatch QC] PDF usable render width: ${viewerWidth}px`);
async _renderDoc(docId, entry, startLoad = 0) {
this.pagesDiv.innerHTML = "";
this._hideLoading();
const pageStart = performance.now();
await this._renderPage(doc, 1, viewerWidth, generation);
if (generation !== this.generation) return;
const pageCount = entry.pageCount;
const placeholderStyle = "pdf-v-placeholder";
for (let i = 1; i <= pageCount; i++) {
const ph = document.createElement("div");
ph.className = placeholderStyle;
ph.dataset.page = String(i);
// Pre-allocate aspect ratio from first page
this.pagesDiv.appendChild(ph);
}
// Get first page dimensions for placeholder sizing
try {
const firstPage = await entry.doc.getPage(1);
const vp = firstPage.getViewport({ scale: 1 });
const ratio = vp.height / vp.width;
const placeholders = this.pagesDiv.querySelectorAll(
`.${placeholderStyle}`,
this._setState(null); // Remove loading overlay
const firstPageMs = Math.round(performance.now() - pageStart);
console.log(
`[BizMatch QC] PDF page 1 rendered in ${firstPageMs}ms`,
);
for (const ph of placeholders) {
// Will be sized in CSS via aspect-ratio; set data attrs for CSS
ph.dataset.ratio = String(ratio);
console.log(
`[BizMatch QC] First page visible after ${
Math.round(performance.now() - loadStart)
}ms`,
);
for (let p = 2; p <= numPages; p++) {
if (generation !== this.generation) return;
const pStart = performance.now();
await this._renderPage(doc, p, viewerWidth, generation);
if (generation !== this.generation) return;
console.log(
`[BizMatch QC] PDF page ${p} rendered in ${
Math.round(performance.now() - pStart)
}ms`,
);
await new Promise((r) => requestAnimationFrame(r));
}
} catch { /* ignore */ }
// Render first page immediately
this._renderPage(docId, entry, 1);
// Set up lazy rendering
this.observer = new IntersectionObserver(
(entries) => {
for (const e of entries) {
if (e.isIntersecting) {
const pageNum = parseInt(e.target.dataset.page);
if (pageNum) {
this._renderPage(docId, entry, pageNum);
// Pre-render nearby pages
for (
let p = pageNum - PRELOAD_PAGES_BEHIND;
p <= pageNum + PRELOAD_PAGES_AHEAD;
p++
) {
if (p >= 1 && p <= pageCount && p !== pageNum) {
this._renderPage(docId, entry, p);
}
}
}
}
}
},
{ root: this.pagesDiv, rootMargin: "200px" },
);
const placeholders = this.pagesDiv.querySelectorAll(`.${placeholderStyle}`);
for (const ph of placeholders) {
this.observer.observe(ph);
}
if (startLoad) {
const readyMs = Math.round(performance.now() - startLoad);
console.log(`[BizMatch QC] PDF ready: ${readyMs}ms`);
const totalMs = Math.round(performance.now() - loadStart);
console.log(
`[BizMatch QC] PDF viewer load completed: generation ${generation}`,
);
console.log(
`[BizMatch QC] PDF fully rendered: ${numPages} pages in ${totalMs}ms`,
);
} catch (err) {
if (generation !== this.generation) return;
// Distinguish cancellation from real errors
if (isCancellationError(err)) {
console.log(
`[BizMatch QC] PDF generation ${generation} cancelled`,
);
return;
}
const msg = errorMsg(err);
console.error(`[BizMatch QC] PDF load failed:`, msg);
this.errorMsg.textContent = `Unable to open PDF: ${msg}`;
this._setState("error");
}
}
async _renderPage(docId, entry, pageNum) {
// Don't re-render if already rendered
const existing = this.pagesDiv.querySelector(
`.pdf-v-page[data-page="${pageNum}"]`,
);
if (existing) return;
if (docId !== this.currentDocId) return;
_getViewportWidth() {
const style = globalThis.getComputedStyle
? getComputedStyle(this.pagesDiv)
: null;
let padding = 24; // default guess
if (style) {
padding = (parseFloat(style.paddingLeft) || 0) +
(parseFloat(style.paddingRight) || 0);
}
const raw = Math.round(this.pagesDiv.clientWidth || 600);
return Math.max(raw - padding, 200);
}
// Don't re-render if cancelled
const existingTask = this.renderTasks.find((t) => t.pageNum === pageNum);
if (existingTask) return;
async _disposeCurrentDocument() {
for (const rt of this.renderTasks) {
try {
rt.cancel();
} catch { /* ok */ }
}
this.renderTasks.clear();
const placeholder = this.pagesDiv.querySelector(
`.pdf-v-placeholder[data-page="${pageNum}"]`,
);
if (!placeholder) return;
if (this.loadingTask) {
try {
await this.loadingTask.destroy();
} catch { /* ok */ }
this.loadingTask = null;
}
const renderTask = { pageNum, cancelled: false, promise: null };
this.renderTasks.push(renderTask);
if (this.doc) {
try {
await this.doc.destroy();
} catch { /* ok */ }
this.doc = null;
}
}
async _renderPage(doc, pageNum, viewerWidth, generation) {
const pageDiv = document.createElement("div");
pageDiv.className = "pdf-v-page";
pageDiv.dataset.page = String(pageNum);
pageDiv.dataset.renderState = "idle";
const canvas = document.createElement("canvas");
pageDiv.appendChild(canvas);
this.pagesDiv.appendChild(pageDiv);
pageDiv.dataset.renderState = "rendering";
const startRender = performance.now();
try {
const page = await entry.doc.getPage(pageNum);
if (renderTask.cancelled || docId !== this.currentDocId) return;
const page = await doc.getPage(pageNum);
if (generation !== this.generation) return;
const containerWidth = this.pagesDiv.clientWidth || 600;
const vp1 = page.getViewport({ scale: 1 });
const fitScale = containerWidth / vp1.width;
const dpr = Math.min(globalThis.devicePixelRatio || 1, MAX_RENDER_SCALE);
const scale = Math.min(fitScale * dpr, MAX_RENDER_SCALE);
const fitScale = viewerWidth / vp1.width;
const viewport = page.getViewport({ scale: fitScale });
const pageDiv = document.createElement("div");
pageDiv.className = "pdf-v-page";
pageDiv.dataset.page = String(pageNum);
pageDiv.style.width = `${viewport.width}px`;
pageDiv.style.height = `${viewport.height}px`;
const canvas = document.createElement("canvas");
canvas.style.width = `${viewport.width}px`;
canvas.style.height = `${viewport.height}px`;
canvas.width = Math.floor(viewport.width * (scale / fitScale));
canvas.height = Math.floor(viewport.height * (scale / fitScale));
pageDiv.appendChild(canvas);
placeholder.replaceWith(pageDiv);
const dpr = Math.min(globalThis.devicePixelRatio || 1, 2);
canvas.width = Math.floor(viewport.width * dpr);
canvas.height = Math.floor(viewport.height * dpr);
canvas.style.width = `${Math.floor(viewport.width)}px`;
canvas.style.height = `${Math.floor(viewport.height)}px`;
const ctx = canvas.getContext("2d");
if (ctx && !renderTask.cancelled && docId === this.currentDocId) {
await page.render({ canvasContext: ctx, viewport }).promise;
if (pageNum === 1) {
const renderMs = Math.round(performance.now() - startRender);
console.log(
`[BizMatch QC] First page rendered: ${renderMs}ms`,
);
}
}
const transform = dpr !== 1 ? [dpr, 0, 0, dpr, 0, 0] : undefined;
const renderTask = page.render({
canvasContext: ctx,
viewport,
transform,
});
this.renderTasks.add(renderTask);
await renderTask.promise;
this.renderTasks.delete(renderTask);
if (generation !== this.generation) return;
pageDiv.dataset.renderState = "rendered";
} catch (err) {
if (renderTask.cancelled) return;
placeholder.textContent = `Error rendering page ${pageNum}: ${
errorMsg(err)
}`;
} finally {
this.renderTasks = this.renderTasks.filter((t) => t !== renderTask);
if (generation !== this.generation) return;
if (isCancellationError(err)) return;
pageDiv.dataset.renderState = "error";
console.error(
`[BizMatch QC] Failed to render PDF page ${pageNum}`,
err,
);
if (pageNum === 1) {
this.errorMsg.textContent = `Unable to open PDF: ${errorMsg(err)}`;
this._setState("error");
} else {
pageDiv.textContent = `Error rendering page ${pageNum}`;
pageDiv.style.padding = "20px";
pageDiv.style.color = "#f88";
pageDiv.style.textAlign = "center";
}
}
}
destroy() {
this._cancelAllRenders();
if (this.observer) this.observer.disconnect();
this._evictAll();
this.generation = 0;
this._disposeCurrentDocument().catch(() => {});
this.pagesDiv.innerHTML = "";
this._setState("loading");
}
}
_evictAll() {
for (const entry of this.lru) {
try {
entry.doc.destroy();
} catch { /* ok */ }
}
this.lru = [];
this.currentEntry = null;
}
function isCancellationError(err) {
if (!(err instanceof Error)) return false;
const msg = err.message || "";
return msg.includes("cancelled") ||
msg.includes("cancelled") ||
msg.includes("destroyed") ||
msg.includes("Worker was destroyed");
}
function errorMsg(err) {
return err instanceof Error ? err.message : String(err);
}
// Export global
globalThis.PdfViewer = PdfViewer;

45
web/styles.css
View File

@@ -80,6 +80,7 @@ aside,
overflow: hidden;
}
.viewer #pdfViewer {
position: relative;
width: 100%;
height: 100%;
overflow-y: auto;
@@ -190,6 +191,11 @@ hr.field-sep {
}
/* PDF.js viewer */
.pdf-v-overlay {
position: absolute;
inset: 0;
z-index: 1;
}
.pdf-v-loading {
padding: 40px 20px;
color: #aaa;
@@ -198,29 +204,44 @@ hr.field-sep {
}
.pdf-v-error {
padding: 30px 20px;
color: #f88;
text-align: center;
}
.pdf-v-error-msg {
color: #f88;
font-size: 16px;
margin-bottom: 12px;
white-space: pre-wrap;
}
.pdf-v-retry {
padding: 8px 24px;
font-size: 14px;
cursor: pointer;
border: 1px solid #888;
background: #444;
color: #eee;
border-radius: 4px;
}
.pdf-v-retry:hover {
background: #555;
}
.pdf-v-pages {
box-sizing: border-box;
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
scrollbar-gutter: stable;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 10px 0;
gap: 16px;
padding: 12px;
}
.pdf-v-page {
background: white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
flex-shrink: 0;
}
.pdf-v-placeholder {
background: rgba(255, 255, 255, 0.05);
flex-shrink: 0;
}
.pdf-v-page canvas,
.pdf-v-placeholder canvas {
.pdf-v-page canvas {
display: block;
width: 100%;
height: 100%;
}