Skip to content

Clinical Movement Re-annotation

website

A human-in-the-loop clinical workspace for reviewing recorded movement frames and correcting AI-generated lines, angles, key points, and measurement values before results are saved.

Role
Frontend architecture and modernization within the MyMedicalHub team
Scope
Clinical review workflow, canvas geometry, legacy API integration, validation, error recovery, and automated testing
Status
Private employer-owned clinical tool under active modernization

Problem

Automated movement analysis can place measurement geometry on an imperfect frame or anatomical position. Clinical reviewers need a precise, explainable way to choose the right frame, correct lines and angles, compare reference guidance, and save revised measurements without losing the original exercise context.

Constraints

  1. C1

    Measurement geometry must remain correct while media is scaled, points are dragged, and line types restrict movement to one axis.

  2. C2

    The workflow depends on multiple tenant-specific legacy APIs and session values whose payloads can be missing, stale, or inconsistent.

  3. C3

    Large video frames and rendered canvas images must be validated and processed without freezing the review interface.

  4. C4

    Clinical reviewers need explicit unavailable, loading, validation, save, retake, and completion states rather than ambiguous canvas failures.

Architecture

A Next.js and React review shell separates workflow state from Konva geometry, validates upstream payloads through Zod, maps legacy responses into typed domain models, and coordinates frame selection, alignment, verification, and persistence through a reducer-driven controller.

01

Review workflow

A reducer and controller own frame selection, alignment, verification, loading, failure, save, and completion transitions.

02

Geometry domain

Typed points, lines, angles, plumb references, scaling rules, and measurement calculations stay independent of rendering components.

03

Canvas interface

React Konva renders the patient frame, draggable key points, measurement geometry, reference guidance, and responsive controls.

04

Legacy integration boundary

Schema validation, response mappers, diagnostics, and an API client normalize tenant and session-specific upstream contracts.

Decisions

D1

Separate geometry from the canvas renderer

Pure coordinate and measurement functions can be tested without Konva, while the interface focuses on interaction and presentation.

D2

Model the review as explicit steps

Frame selection, alignment, and verification form a controlled sequence so save behavior cannot run against incomplete media or geometry.

D3

Validate at the legacy boundary

Upstream payloads are parsed and mapped before reaching UI state, turning malformed contracts into diagnosable unavailable states instead of downstream exceptions.

D4

Preserve measurement semantics

Line type, direction, measurement type, left and right values, and plumb-line relationships remain explicit throughout editing and persistence.

Contribution

  • Rebuilt the re-annotation experience around Next.js, React, TypeScript, and a structured clinical review flow.
  • Separated annotation geometry, schemas, API mapping, reducer state, asset preloading, and canvas presentation into testable boundaries.
  • Implemented frame selection, draggable line and angle correction, automated-analysis comparison, reference guidance, save, retake, and completion states.
  • Added unit, integration, and browser-oriented coverage for geometry, upstream mappings, API contracts, and critical review interactions.

Outcomes

  • Reviewers can correct automated clinical measurements through a guided workflow instead of manipulating an opaque legacy canvas.
  • Typed domain models preserve line, angle, direction, and measurement semantics across load, edit, render, and save operations.
  • Malformed or unavailable upstream data produces explicit recovery guidance rather than partially initialized review state.
  • The modernized boundaries make geometry and API behavior independently testable while legacy services continue to operate.

Verified stack

  • Next.js
  • React 19
  • TypeScript
  • Konva
  • React Konva
  • Zod
  • Tailwind CSS
  • Vitest
  • React Testing Library
  • Playwright
  • Pino
  • System Design

Working through something similar?

Share your challenge, scope, and timeline to start a focused conversation.

Discuss a project