Skip to content

[ENHANCEMENT] Dual preview modes for cross-page structure inspection #292

@klcd

Description

@klcd

Context

The document workspace preview currently forces one visualization mode at a time: historically a single-page preview with pagination, and now a stacked scroll preview. Both are useful for different inspection tasks.

Single-page mode is still the fastest way to inspect precise bounding boxes, page-local layout, and chunk placement on one page. The stacked scroll mode solves a different problem: it lets users follow structures that span page boundaries without losing context.

This matters for Docling outputs where the logical structure is distributed across pages, for example:

  • long text blocks split by page breaks
  • chunks whose source items continue on the next page
  • sections where headers, paragraphs, tables, or captions are visually disconnected by pagination

Without both modes, the user either loses the compact page-focused workflow or loses the ability to visually track cross-page continuity.

Goal

Support both preview modes in Parse and Chunk:

  1. Page mode — classic single-page preview with page pills / prev-next navigation.
  2. Scroll mode — vertically stacked full-document preview with the current page inferred from the viewport.

The same shared preview component should own the switch so both tabs behave consistently.

Scope

In scope — Frontend only

  • Add a local preview mode switch to frontend/src/features/document/ui/PagePreviewWithOverlay.vue.
  • Keep existing page navigation controls for the single-page workflow.
  • Keep stacked multi-page rendering for cross-page inspection.
  • Preserve existing overlay interactions in both modes:
    • Parse tree selection -> preview highlight
    • bbox click -> tree or chunk selection
    • chunk selection -> preview highlight
  • Keep page state synchronized appropriately:
    • in Page mode, page changes are explicit through navigation
    • in Scroll mode, the active page follows the page mostly visible in the viewport
  • Add i18n labels for the mode switch.

Out of scope

  • Persisting the chosen preview mode across sessions
  • Zoom controls
  • OCR / chunking backend changes
  • Redesigning the surrounding Parse or Chunk tab layouts

Why this helps

This change makes it much easier to identify structures distributed across pages, especially text pieces and chunks whose semantic continuity is broken by pagination. Users can stay in Scroll mode to understand the full structure, then switch back to Page mode for precise per-page inspection and editing.

Acceptance criteria

  • Parse and Chunk both expose a Page / Scroll preview switch.
  • Page mode renders only the active page.
  • Scroll mode renders the full document as a vertically scrollable stack.
  • Existing bbox overlays and highlight interactions work in both modes.
  • In Scroll mode, the workspace page state updates to the page mostly visible in the viewport.
  • In Page mode, existing page pills and prev/next controls still drive the preview.
  • i18n keys exist for both mode labels.
  • Frontend type-check and production build pass.

References

  • frontend/src/features/document/ui/PagePreviewWithOverlay.vue
  • frontend/src/pages/DocParseTab.vue
  • frontend/src/pages/DocChunkTab.vue

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestfrontendFrontend (Vue/TypeScript)

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions