301cfffd1a
Some checks failed
CI / Unit & Component Tests (pull_request) Failing after 4m4s
CI / OCR Service Tests (pull_request) Successful in 36s
CI / Backend Unit Tests (pull_request) Failing after 3m17s
CI / Unit & Component Tests (push) Failing after 4m3s
CI / OCR Service Tests (push) Successful in 40s
CI / Backend Unit Tests (push) Failing after 3m22s
The widget hides below the Tailwind lg breakpoint to protect the 44×44 touch-target floor on tablet (Leonie's round-1 finding) but the diagram still claimed 640px (sm). Update both the docsListPageTs description, the timelineFilter description, and the relationship label to match +page.ts. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
44 lines
3.9 KiB
Plaintext
44 lines
3.9 KiB
Plaintext
@startuml
|
|
!include <C4/C4_Component>
|
|
|
|
title Component Diagram: Web Frontend — Document Workflows
|
|
|
|
Person(user, "User")
|
|
Container(backend, "API Backend", "Spring Boot")
|
|
|
|
System_Boundary(frontend, "Web Frontend (SvelteKit / SSR)") {
|
|
Component(homePage, "/ (Home / Search)", "SvelteKit Route", "Loader: parses URL params (q, from, to, senderId, receiverId, tags), fetches /api/documents/search and /api/persons. Renders search form with full-text, date range, sender/receiver typeahead, and tag filters.")
|
|
Component(docsListPageTs, "/documents/+page.ts", "SvelteKit Client Loader", "Client-side load gated by matchMedia('(min-width: 1024px)') and ?view query. Fetches /api/documents/density only on desktop (Tailwind lg breakpoint) and outside calendar view; degrades to empty buckets on network failure.")
|
|
Component(timelineFilter, "TimelineDensityFilter.svelte", "Svelte Component", "Per-month density bars above the document list. Click selects a single month, emits onchange({from, to}) using YYYY-MM-DD boundaries. Hidden on mobile and tablet (below lg, 1024px) and in calendar view.")
|
|
Component(docDetail, "/documents/[id]", "SvelteKit Route", "Loader: GET /api/documents/{id}. Page: metadata panel, inline file viewer, transcription editor, annotation layer, and comment thread.")
|
|
Component(docEdit, "/documents/[id]/edit", "SvelteKit Route", "Edit form with PersonTypeahead, TagInput, date/location fields. Form action: PUT /api/documents/{id}.")
|
|
Component(docNew, "/documents/new", "SvelteKit Route", "Upload form for a new document. Loader: GET /api/persons. Form action: POST /api/documents with multipart file.")
|
|
Component(docBulkEdit, "/documents/bulk-edit", "SvelteKit Route", "Multi-document metadata editor. Loader: GET /api/documents/incomplete. Requires WRITE_ALL (redirects otherwise). Action: PATCH /api/documents/bulk.")
|
|
Component(enrichPage, "/enrich/[id]", "SvelteKit Route", "Guided enrichment workflow. Loader: GET /api/documents/{id}. Progressively saves annotations and transcription blocks.")
|
|
Component(apiPersons, "/api/persons (SvelteKit API)", "SvelteKit Server Route", "Proxies GET /api/persons?q=... to backend for PersonTypeahead suggestions.")
|
|
Component(apiTags, "/api/tags (SvelteKit API)", "SvelteKit Server Route", "Proxies GET /api/tags to backend for TagInput autocomplete.")
|
|
Component(typeahead, "PersonTypeahead.svelte", "Svelte Component", "Async autocomplete for selecting a person. Debounces input, calls /api/persons?q=.")
|
|
Component(tagInput, "TagInput.svelte", "Svelte Component", "Multi-tag input. Supports free-text entry and selecting existing tags from /api/tags.")
|
|
}
|
|
|
|
Rel(user, homePage, "Searches and browses", "HTTPS / Browser")
|
|
Rel(homePage, backend, "GET /api/documents/search, GET /api/persons", "HTTP / JSON")
|
|
Rel(docsListPageTs, backend, "GET /api/documents/density (desktop only, ≥1024px)", "HTTP / JSON")
|
|
Rel(homePage, timelineFilter, "Mounts above the result list")
|
|
Rel(docsListPageTs, timelineFilter, "Provides density / minDate / maxDate props")
|
|
Rel(docDetail, backend, "GET /api/documents/{id}, GET /api/documents/{id}/file", "HTTP / JSON + Binary")
|
|
Rel(docEdit, backend, "PUT /api/documents/{id}", "HTTP / Multipart")
|
|
Rel(docNew, backend, "GET /api/persons, POST /api/documents", "HTTP / JSON + Multipart")
|
|
Rel(docBulkEdit, backend, "GET /api/documents/incomplete, PATCH /api/documents/bulk", "HTTP / JSON")
|
|
Rel(enrichPage, backend, "GET/POST /api/transcription, POST /api/documents/{id}/annotations", "HTTP / JSON")
|
|
Rel(homePage, typeahead, "Uses for sender/receiver filter")
|
|
Rel(docEdit, typeahead, "Uses for sender/receiver selection")
|
|
Rel(docNew, typeahead, "Uses for sender selection")
|
|
Rel(docEdit, tagInput, "Uses for tag management")
|
|
Rel(typeahead, apiPersons, "Fetches suggestions", "HTTP")
|
|
Rel(tagInput, apiTags, "Fetches existing tags", "HTTP")
|
|
Rel(apiPersons, backend, "GET /api/persons", "HTTP / JSON")
|
|
Rel(apiTags, backend, "GET /api/tags", "HTTP / JSON")
|
|
|
|
@enduml
|