[Enhancement] passport-scan: open MRZ crop/tilt immediately after upload or capture; run OCR from one clear “Extract / Scan MRZ” action #11

New Issue

2026-04-26T18:42:44Z

spikerj commented

2026-04-26 18:42:44 +00:00

Summary

Improve the app-passport-scan (AppPassportScanComponent) flow so that after the user chooses a file or takes a picture, the UI immediately shows the image in the MRZ crop experience (crop to MRZ lines + tilt / slider), and only then the user runs OCR via a single clear action ( Extract or Scan MRZ — same meaning; align copy).

Problem (UX)

Today the first primary button is labeled “Extract” (or “Extract + Store” / “Store Only”), but in extract modes that button does not run OCR first — it only opens the next step. That feels misleading: users think they are “extracting” when they are really just advancing to selection/crop. The real extraction happens only after crop (and related controls), often described as “Scan MRZ” in the crop UI — so the mental model is: Extract → (nothing extracted yet) → adjust → Scan MRZ.

Desired model: Choose image / capture → immediately see preview + crop MRZ + tilt → then Extract / Scan MRZ (OCR).

Scope / component

Component: app-passport-scan
Path: spikersoft-angular/projects/spikersoft/src/app/_components/employment/application-dialog/passport-scan/
Crop sub-component: app-mrz-crop (MrzCropComponent)

Implementation notes (for devs)

requestScan() currently sets showCrop.set(true) for non-store modes; it is the entry to <app-mrz-crop>.
Camera capturePhoto() already sets showCrop to true for extract / extract-store (see passport-scan.component.ts — blob callback after toBlob).
File onFileSelected() only sets selectedFile and does not set showCrop — so upload still requires the user to press the primary Extract-labeled button, which is the inconsistency the ticket addresses.
Acceptance (proposed):
1. On file pick (valid image), if intake mode is extract or extract-store, automatically set showCrop = true (equivalent to calling the same path as requestScan() for that branch), or refactor so a single enterCropUi() is invoked from both file select and capture.
2. Ensure tilt / slider and crop are available before any OCR.
3. Unify or clarify labels: final OCR action can be “Scan MRZ” or “Extract” but not two confusing steps that both sound like “run OCR now.”
4. Store-only mode may stay different (no crop if product requires).

Type

Enhancement (UX + flow; no production incident).

Labels (optional): enhancement, frontend, ux, passport / application-dialog

## Summary Improve the **app-passport-scan** (`AppPassportScanComponent`) flow so that after the user **chooses a file** or **takes a picture**, the UI **immediately** shows the image in the **MRZ crop** experience (crop to MRZ lines + tilt / slider), and only **then** the user runs **OCR** via a single clear action ( **Extract** or **Scan MRZ** — same meaning; align copy). ## Problem (UX) Today the first primary button is labeled **“Extract”** (or “Extract + Store” / “Store Only”), but **in extract modes that button does not run OCR first** — it only opens the next step. That feels misleading: users think they are “extracting” when they are really just **advancing to selection/crop**. The real extraction happens only after **crop** (and related controls), often described as **“Scan MRZ”** in the crop UI — so the mental model is: *Extract → (nothing extracted yet) → adjust → Scan MRZ*. **Desired model:** *Choose image / capture → immediately see preview + **crop MRZ** + **tilt** → then **Extract / Scan MRZ** (OCR).* ## Scope / component - **Component:** `app-passport-scan` - **Path:** `spikersoft-angular/projects/spikersoft/src/app/_components/employment/application-dialog/passport-scan/` - **Crop sub-component:** `app-mrz-crop` (`MrzCropComponent`) ## Implementation notes (for devs) - **`requestScan()`** currently sets `showCrop.set(true)` for non-store modes; it is the entry to `<app-mrz-crop>`. - **Camera `capturePhoto()`** already sets `showCrop` to `true` for extract / extract-store (see `passport-scan.component.ts` — blob callback after `toBlob`). - **File `onFileSelected()`** only sets `selectedFile` and does **not** set `showCrop` — so upload still requires the user to press the primary **Extract**-labeled button, which is the inconsistency the ticket addresses. - **Acceptance (proposed):** 1. On file pick (valid image), if intake mode is **extract** or **extract-store**, automatically set **`showCrop = true`** (equivalent to calling the same path as `requestScan()` for that branch), or refactor so a single `enterCropUi()` is invoked from both file select and capture. 2. Ensure **tilt / slider** and crop are available **before** any OCR. 3. Unify or clarify labels: final OCR action can be **“Scan MRZ”** or **“Extract”** but not two confusing steps that both sound like “run OCR now.” 4. **Store-only** mode may stay different (no crop if product requires). ## Type **Enhancement** (UX + flow; no production incident). --- *Labels (optional):* `enhancement`, `frontend`, `ux`, `passport` / `application-dialog`

issue-passport-scan.png

19 KiB

spikerj commented

2026-05-07 14:02:54 +00:00

Closing — already implemented

Verified the current state of AppPassportScanComponent; every acceptance item is in place. Closing as done.

Acceptance checklist

Auto-enter crop UI on file pick — onFileSelected() now calls enterCropUi() when needsExtraction is true (extract / extract-store), so upload no longer requires the user to press an Extract-labeled button just to advance to the crop step.
Tilt + crop available before any OCR — runClientOcr() only fires from onCropped() / onCropSkipped() (i.e. after <app-mrz-crop> emits), never directly from upload or capture.
Single OCR action label — the in-crop "Scan MRZ" button is the sole OCR trigger; the prior double-Extract step is gone. The enterCropUi() doc-comment explicitly narrates this design intent.
Store-only mode unchanged — requestScan() short-circuits to emitStore(file) for store mode, and onIntakeModeChange() hides the crop UI if the user flips to store after picking a file.

Implementation

New private helper enterCropUi() is the single entry-point invoked from all three intake paths (file upload, camera capture, manual requestScan) so the crop experience is identical regardless of source.
onFileSelected (lines 71–79), capturePhoto (lines 144–146), and requestScan (line 200) all funnel through it.
Bonus polish (not in original ticket): onIntakeModeChange() keeps the crop UI in sync with mode flips when a file is already chosen.

File

spikersoft-angular/projects/spikersoft/src/app/_components/employment/application-dialog/passport-scan/passport-scan.component.ts

## Closing — already implemented Verified the current state of `AppPassportScanComponent`; every acceptance item is in place. Closing as **done**. ### Acceptance checklist - [x] **Auto-enter crop UI on file pick** — `onFileSelected()` now calls `enterCropUi()` when `needsExtraction` is true (extract / extract-store), so upload no longer requires the user to press an Extract-labeled button just to advance to the crop step. - [x] **Tilt + crop available before any OCR** — `runClientOcr()` only fires from `onCropped()` / `onCropSkipped()` (i.e. after `<app-mrz-crop>` emits), never directly from upload or capture. - [x] **Single OCR action label** — the in-crop "Scan MRZ" button is the sole OCR trigger; the prior double-Extract step is gone. The `enterCropUi()` doc-comment explicitly narrates this design intent. - [x] **Store-only mode unchanged** — `requestScan()` short-circuits to `emitStore(file)` for store mode, and `onIntakeModeChange()` hides the crop UI if the user flips to store after picking a file. ### Implementation - New private helper `enterCropUi()` is the single entry-point invoked from all three intake paths (file upload, camera capture, manual `requestScan`) so the crop experience is identical regardless of source. - `onFileSelected` (lines 71–79), `capturePhoto` (lines 144–146), and `requestScan` (line 200) all funnel through it. - Bonus polish (not in original ticket): `onIntakeModeChange()` keeps the crop UI in sync with mode flips when a file is already chosen. ### File `spikersoft-angular/projects/spikersoft/src/app/_components/employment/application-dialog/passport-scan/passport-scan.component.ts`

spikerj closed this issue

2026-05-07 14:02:58 +00:00

spikerj referenced this issue

2026-07-05 20:18:44 +00:00

[infra drift] image-description & trellis3d deploy to /mnt/infrastructure folders that don't exist #403

spikerj referenced this issue

2026-07-05 20:25:38 +00:00

[CI drift] lesson-video-processor is deployed but has NO build workflow → orphaned image #418

spikerj referenced this issue

2026-07-13 00:59:55 +00:00

[ArtPipe] Baked images Phase 0: build scaffolding (Dockerfiles, CI, setup flags) + disk/limits go-no-go gates (epic #515) #516

Sign in to join this conversation.