Saltar a contenido

EPPA UI Redesign Brief

Date: 2026-05-07 (updated) Source baseline: sources/drive/Presentacion-Posturografia.mp4 and extracted frames in docs/ui-video-frames/.

Goal

Build the web UI as a clinical working tool that preserves the MATLAB workflow while removing the MATLAB-era visual friction. The first release should favor parity and operator confidence over decorative redesign.

Frame Inventory

Frame Timestamp Content Screen
frame-001.jpg 0:00 MATLAB main screen / EPPA logo Home
frame-002.jpg 0:30 Marker capture with loaded image Marker Capture
frame-003.jpg 1:15 Anterior analysis — markers + grid Analysis Anterior
frame-004.jpg 2:30 Anterior results table filled Analysis Anterior (results)
frame-005.jpg 3:20 Posterior analysis — 4 regions Analysis Posterior
frame-006.jpg 4:45 Lateral derecha — tangent tools Analysis Lateral R
frame-007.jpg 5:30 Lateral izquierda — results Analysis Lateral L
frame-008.jpg 7:00 Excel export dialog Export
frame-009.jpg 8:00 Manual measurement tools Manual Tools

Screens To Preserve

1. Home / Main Menu

  • Primary action: marker capture.
  • Four analysis entries: anterior, posterior, lateral right, lateral left.
  • Must make EPPA/LABIS identity visible without turning the first screen into marketing.
  • Required data-testid: btn-marker-capture, btn-vista-anterior, btn-vista-posterior, btn-vista-lateral-derecha, btn-vista-lateral-izquierda.
  • Reference frame: frame-001.jpg.

2. Marker Capture

  • Open patient image.
  • Enter patient ID.
  • Choose view from a modal/list after image upload.
  • Select marker by view from dropdown.
  • Place marker on image canvas.
  • Show marker table with marker, view, X, Y.
  • Delete selected row.
  • Save/export marker set.
  • Exit/back to main screen.
  • Required data-testid: image-display-area, markers-table, input-markers-file.
  • Reference frame: frame-002.jpg.

3. Analysis by View (x4: anterior, posterior, lateral-derecha, lateral-izquierda)

  • Left tool rail:
  • Open image (Abrir Imagen).
  • Import markers (Importar Marcadores) — CSV and .mat.
  • Calibration grid (Calibracion Grilla).
  • Reference lines (Rectas de Referencia).
  • Clear image (Limpiar Imagen).
  • Manual measurement tools (see below).
  • Center workspace:
  • Patient image with zoom/pan.
  • Visible markers (green dots).
  • Calibration grid overlay.
  • Reference line (LRV) overlay.
  • Calibration factor display (FC: X.XX cm/px).
  • LRV position display (LRV X: XXX px).
  • Right results panel:
  • Region analysis buttons: Cervico-Cefalica, Tronco-Columna, Escapular-MS / Pelvica, Pie-Tobillo.
  • Results table: Region, Variable, Medicion, Diagnostico.
  • Export button (Exportar / Exportar Tabla CSV).
  • Next view / Exit buttons.
  • Required data-testid: image-display-area, markers-table, analysis-results-table, mouse-coordinates.
  • Reference frames: frame-003 through frame-007.

4. Manual Measurement Tools (lateral views add tangent controls)

  • Angle relative to horizontal.
  • Angle relative to vertical.
  • Distance measurement.
  • Named manual measurement entry.
  • Tangent capture for head/back/sacrum (lateral only).
  • Reference frame: frame-009.jpg.

5. Export

  • One workbook per subject/session.
  • One sheet per view.
  • Columns: Region, Variable, Medicion, Diagnostico.
  • Preserve "Punto no visible" when required markers are missing.
  • Reference frame: frame-008.jpg.

Visual Direction

  • Use a quiet clinical workspace: light neutral background, high contrast text, compact controls, no large hero blocks.
  • Prefer a three-zone layout for analysis: left tools, center image, right results.
  • Icons: Lucide icon set. Key mappings:
  • ImagePlus — open image.
  • FileInput — import markers.
  • Grid3X3 — calibration grid.
  • Ruler — reference lines.
  • Eraser — clear image.
  • Download — export.
  • ArrowRight — next view.
  • Home — exit to main.
  • Crosshair — manual measurement.
  • Restrained color:
  • Blue (#2563eb) — reference lines, active tools.
  • Green (#16a34a) — placed markers.
  • Amber (#d97706) — validation warnings.
  • Red (#dc2626) — errors only.
  • Dense, readable tables. Keyboard-friendly (Tab, Enter, Escape).
  • Do not hide clinical actions behind decorative cards.
  • Density: clinical data should be scannable at a glance. No whitespace-heavy layouts.

v0 Prompt — Full Application

Create a Next.js/React clinical web application for EPPA (Evaluacion
Posturografica de Pie Automatizada). Preserve the MATLAB workflow shown
in the reference frames: marker capture, four analysis views, image
workspace with grid/reference lines/green markers, left tool rail, right
results table, manual measurement tools, and Excel export.

Use a restrained clinical design: light neutral background, compact
controls, high contrast typography, Lucide icons, dense tables,
accessible dialogs, and responsive desktop-first layout with a usable
tablet/mobile fallback. Do not create a marketing landing page.

Tech: Next.js 15 + React 18 + Radix UI + Tailwind CSS. FastAPI backend
for calculations. Cypress/Playwright for E2E. TypeScript throughout.

v0 Prompts — Per Screen

Home

Clinical tool home page. Title "EVALUACIÓN POSTUROGRÁFICA" in blue-700.
Subtitle "Sistema EPPA". Five action buttons: "Captura de Marcadores"
(primary), "Vista Anterior", "Vista Posterior", "Vista Lateral Derecha",
"Vista Lateral Izquierda". Compact grid layout. No hero image. No
marketing copy. LABIS/UBA footer credit.

Marker Capture

Marker capture screen with left controls and right image canvas.
Controls: patient ID input, "Abrir" image button, view selector dropdown
per view type, marker dropdown by selected view, "Borrar" and "Guardar"
buttons. Canvas: shows loaded image with click-to-place green markers.
Below canvas: marker table (marker name, view, X, Y) with row selection
and delete. Top nav: "PANTALLA PRINCIPAL" button.

Analysis View (template for all 4 views)

Three-zone analysis layout:
Left rail (200px): Open Image, Import Markers, Calibration Grid,
Reference Lines, Clear Image, region analysis buttons (Cervico-Cefalica,
Tronco-Columna, etc.), manual measurement tools.
Center: patient image with zoom/pan, green marker dots, blue reference
line, calibration grid overlay. FC and LRV indicators below image.
Right panel (350px): Results table (Region, Variable, Medicion,
Diagnostico), Export CSV button, navigation buttons.
Dense clinical density. No decorative elements.

Recraft/Figma Decisions

  • Recraft: Use for generating icons only if Lucide does not have the needed glyph. Do not generate full layouts in Recraft.
  • Figma: Use for high-fidelity mockups ONLY after v0 generates a working prototype. Figma is review/polish, not starting point.
  • Priority: Code-first (v0 → working Next.js), then Figma for refinement.

Component Inventory

Component Status data-testid Notes
Home buttons (5) Implemented btn-* All working
Image display area Implemented image-display-area With zoom/pan
Marker table Implemented markers-table Dense layout
Results table Implemented analysis-results-table 4-column clinical
Calibration grid Implemented — Click-two-points
Reference line Implemented — Click-two-points
CSV export Implemented — 4-column header
Mouse coordinates Implemented mouse-coordinates Shown during tools
.mat import Implemented — Via file chooser
Manual measurement Implemented — Anterior, posterior and lateral views support named horizontal angle, vertical angle and distance rows
Tangent capture Implemented — Lateral derecha/izquierda capture cabeza, dorsal and sacro vertical tangents
Excel export (.xlsx) NOT IMPLEMENTED — See #13
"Punto no visible" NOT IMPLEMENTED — See #5

E2E Baseline Coverage

Screenshots captured by Playwright visual-baseline.spec.ts and Cypress 06-video-parity-baseline.cy.ts:

  • Home (desktop/tablet/mobile) ✅
  • Marker capture with image ✅
  • Anterior with markers ✅
  • Posterior with markers ✅
  • Lateral derecha with markers ✅
  • Lateral izquierda with markers ✅

Implementation Traceability

This brief is now tied to the merged UI implementation rather than standing as a generic design document.

Merged implementation evidence:

  • 5ce1c62 / PR #83: integrated the real EPPA UI workflows on main.
  • src/app/page.tsx: home/menu with btn-marker-capture, btn-vista-anterior, btn-vista-posterior, btn-vista-lateral-derecha, and btn-vista-lateral-izquierda.
  • src/app/marker-capture/page.tsx: marker-capture workflow with image upload, view selection, marker placement, marker table, delete, save, and return-home actions.
  • src/app/analysis/anterior/page.tsx, src/app/analysis/posterior/page.tsx, src/app/analysis/lateral-derecha/page.tsx, src/app/analysis/lateral-izquierda/page.tsx: four MATLAB-equivalent analysis screens.
  • src/components/orthoposture/image-display-area.tsx: shared clinical image workspace with image, markers, overlays, tangents, and mouse-coordinates.
  • src/components/orthoposture/analysis-markers-table.tsx, src/components/orthoposture/points-table.tsx: dense marker tables exposed as markers-table.
  • src/components/orthoposture/anterior/anterior-results-panel.tsx, src/components/orthoposture/posterior/posterior-results-panel.tsx, and lateral result tables: clinical rows exposed as analysis-results-table.
  • playwright/e2e/home-parity.spec.ts, playwright/e2e/marker-capture-parity.spec.ts, playwright/e2e/unified-layout.spec.ts, playwright/e2e/visual-baseline.spec.ts, playwright/e2e/analysis-parity.spec.ts, playwright/e2e/export-parity.spec.ts: screenshot, navigation, marker, layout, numeric, and export parity checks.

Remaining explicitly out of #7 scope:

  • .xlsx workbook parity remains tracked by #13.
  • Missing-marker "Punto no visible" behavior remains tracked by #5.

Accessibility

  • All interactive elements must have accessible labels.
  • Tables must use <th> headers with scope.
  • Dialogs must trap focus and support Escape to close.
  • Color is not the only indicator — use icons + text for states.
  • Minimum contrast ratio: 4.5:1 for text.

Acceptance Criteria

  • [x] Every MATLAB action visible in the video has a web equivalent or an explicit "not implemented" issue.
  • [x] The four analysis screens share a consistent layout and differ only by view-specific marker/variable content.
  • [x] Results table can show region, variable, measurement, diagnosis for all calculated outputs.
  • [ ] Missing markers produce visible validation states and "Punto no visible" outputs where MATLAB does (see #5).
  • [x] Cypress/Playwright screenshots cover home, marker capture, all four analysis views, and export trigger.
  • [x] Frame inventory maps each video frame to a screen.
  • [x] v0 prompts are ready for each screen type.
  • [x] Component inventory tracks implementation status.