5a737d0891
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
51 lines
2.5 KiB
Markdown
51 lines
2.5 KiB
Markdown
# 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.
|