Skip to content

Frontend UI Implementation Plan

[!NOTE] For the latest implementation status, please refer to Functional Implementation Status (Remaining Functionality).

This plan is for the Dash front end related to file management. It shows the implementation steps based on detailed screen design and usability improvement. Extend existing MVP components and create an easy-to-use document management interface Build.

1. Goal and scope

  • Upload, version control, difference comparison, and batch processing functions Build unified dashboards.
  • Improve UX so users can operate files intuitively.
  • Backend API (VersionManager, rollback_version, parsing pipeline) and loosely coupled design.

Target page/component: 1. File Send & Preview 2. Version history list and operation panel 3. Version comparison viewer 4. Processing queue monitoring 5. Overall layout/navigation

Supported browsers: Latest Chrome/Firefox/Safari

2. Screen design proposal

2.1 Dashboard structure

┌───────────────────────────────────────────┐
│ ナビバー (Upload | History | Compare | Batch) │
└───────────────────────────────────────────┘
│                                           │
│ [選択されたタブのパネル表示領域]          │
│                                           │
└───────────────────────────────────────────┘

The navigation bar is implemented using Dash dbc.Navbar, and tab switching is performed using callbacks.

2.2 File upload screen

  • Display icon and status in drag and drop area
  • List of selected files (file name, size, progress bar)
  • Cancel/delete button for each file
  • Enable "Start Analysis" button after successful upload
  • Display size/format errors as modal or inline warnings
  • Preview: Instantly display the first few lines of text or PDF (using pdfjs or <pre>)

2.3 Version history screen

  • In addition to DataTable, each row has "Download", "Compare", and "Rollback" Add action button for
  • Enable table filter/search functionality
  • Show selected entry in details panel (sidebar modal) → Metadata (size, date and time of creation, number of pages, etc.)

2.4 Version comparison screen

  • Dropdown to select version in left and right panes respectively
  • Diff obtained from frontend/version_compare.diff_text Show with syntax highlighting
  • Jump function to changed part (Next/Prev diff)
  • Display options such as spaces, tabs, etc.

2.5 Batch processing screen

  • List of jobs in queue (file name/status)
  • Color-coded by status (queued/running/failed/done)
  • Overall progress bar/individual progress bar
  • Job addition form (file selection or text input)
  • Stop/Retry button
  • Event log display (scrollable)

2.6 Common elements

  • Global notification component (using dbc.Toast)
  • Loading indicator, lazy loading
  • Mobile-friendly layout

3. Usability & Accessibility

  • Supports keyboard operations (move tabs, press enter to upload/action)
  • ARIA label and contrast ratio development for visually impaired people
  • Internationalization of file names and error messages (if necessary)
  • Performance monitoring for large capacity/many files (virtual list)

4. Implementation steps

  1. Introducing a design framework: Dash Bootstrap Components Add to dependencies (if not installed)
  2. Page template: Create frontend/pages/base.py and add navigation bar/ define container
  3. Upload page extension: Replace MVP component and upload Implemented queue UI. Added POST call to backend API.
  4. History page: Add table action and implement details panel.
  5. Compare Page: Includes panes and diff navigation.
  6. Batch Page: Implemented queue management UI and API polling.
  7. Common notifications/logs: Added toast and log windows
  8. Accessibility: ARIA attributes and keyboard shortcuts test and fix
  9. System tests: Added E2E tests under tools (selenium/ Playwright etc.)
  10. Documentation Update: Added operating instructions to README/Developer Guide

Expect 1-2 weeks for each step (adjust depending on resources). MVP level The goal is for the entire project to be completed within two months.

5. API & Callback Overview

  • /api/upload POST - File data reception → large_file_handler → parse_document_stream → VersionManager
  • /api/versions GET - Returns the history of the specified path
  • /api/versions/<id>/rollback POST - Execute rollback
  • /api/diff POST - accepts two version IDs and returns difference text
  • /api/batch GET/POST/DELETE - Queue state management

Dash calls these with requests and dash.callback_context.

6. Testing & QA

  • Unit test: Check rendering of existing components
  • Integration testing: pageflow with API mocks
  • UI test: Automation E2E upload → version creation → comparison
  • Performance test: memory/response time measurements in batches of 1000 files

7. Next phase

  1. Upload by folder by drag and drop
  2. Security: Added CSRF token/authentication flow
  3. Compatible with mobile apps and Electron wrappers
  4. AI-assisted automatic tagging and full-text search integration

Divide tasks based on the above plan and import them into the project management tool Please.