jedarden/pdftract
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
pdftract/notes/pdftract-5ec94.md
jedarden 5a737d0891 docs(pdftract-5ec94): add verification note for hover/search/JSON features 
All three required features were already implemented:
- Hover tooltips with 50ms response (CSS transition:opacity 0s)
- JSON-tree click navigation with scroll + highlight
- Search filter UI with Enter cycling and Escape clear

Acceptance criteria: 6/6 PASS
2026-06-01 00:56:20 -04:00

2.5 KiB
Raw Blame History

pdftract-5ec94: Hover tooltips, JSON-tree click navigation, search filter UI

Summary

All three required features were already implemented in the frontend code:

1. Hover tooltips (50 ms requirement)

  • Implementation: setupTooltips() in app.js (lines 594-671)
  • CSS: transition:opacity 0s in style.css line 45 - instant appearance, no delay
  • Content displayed: Text, Font (name + size), Confidence, BBox, Block ref, MCID, Reading idx
  • Data source: data-* attributes populated server-side in SVG rendering

2. JSON-tree click navigation

  • Span click handler: handleSpanClick() (lines 344-371)
  • Setup: setupJsonNavigation() (lines 335-342)
  • Behavior:
    • Clicking a span scrolls the JSON panel to the matching entry
    • Adds .highlighted class (yellow background) for 2 seconds
    • Opens parent <details> elements to reveal the entry
    • Smooth scroll animation

3. Search filter UI

  • Setup: setupSearch() (lines 469-482)
  • Filtering: performSearch() (lines 484-518) - case-insensitive substring match
  • Cycling: cycleMatch() (lines 520-537) - Enter cycles forward, Shift+Enter cycles backward
  • Clearing: clearSearch() (lines 556-561) - Escape key clears filter
  • Visual feedback:
    • .search-match class adds bright orange outline (2px solid #ff9800)
    • Active match gets double outline (3px solid #ff6f00)
    • Match count displayed (e.g., "3 of 7 matches")

Acceptance Criteria

Criterion Status Notes
Hover tooltip appears within 50 ms ✅ PASS CSS transition:opacity 0s - instant
Click span -> JSON tree scrolls + highlights ✅ PASS handleSpanClick() with smooth scroll + 2s highlight
Search filter narrows visible spans ✅ PASS .search-match class with bright outline
Enter cycles through matches ✅ PASS cycleMatch(1) on Enter, cycleMatch(-1) on Shift+Enter
Escape clears search ✅ PASS Keyboard handler + clearSearch()
Tooltip content matches plan ✅ PASS Text, Font, Confidence, Bbox, Block, MCID, Reading idx

Files Verified

  • crates/pdftract-cli/src/inspect/frontend/index.html - HTML structure with tooltip div, search input, match count span
  • crates/pdftract-cli/src/inspect/frontend/app.js - All JS handlers for hover, click, search
  • crates/pdftract-cli/src/inspect/frontend/style.css - CSS for tooltip (0s transition), search-match outline, highlighted animation

Conclusion

Bead requirements were already satisfied by existing code. No new implementation needed.