pyronear / pyronear/pyro-annotator

Detection review canvas: overlapping-box interaction polish

Open
#170 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
0
Forks
1
Avg merge
1d 2h
Merged PRs (30d)
2

Description

Non-blocking interaction issues found while reviewing the seed-at-submit review UI (the data-integrity findings were fixed in the Chunk 3 branch).

1. z-30 review layer shadows overlapping human boxes (situational)

The interactive winning-model review layer sits above the z-20 human-drawing layer, and its boxes opt into pointer-events:auto whenever not in draw mode. If a still-pending model box physically overlaps an adjusted box's editable human copy, the copy's handles/body under the model box are unreachable and a click there selects the model box instead of grabbing the human box. Requires overlapping predictions; mitigated for the re-open case (winning layer is now non-interactive there), but remains during first review.

Possible fixes: raise the selected human box (+ handles) above the review layer while it's selected; or make review boxes ignore pointer events over a selected human box.

2. Resize handles overlap on tiny boxes

All eight 8px handles (±4px offsets) fully overlap once a box is only a few px; the last in DOM (se) wins the pointer, so sub-~16px boxes are effectively se-only for resize. Usability, not correctness. Consider hiding edge handles below a size threshold, or only showing corner handles for small boxes.

3. Review boxes clickable while faded out

During the ~50-150ms overlay fade (opacity 0), review boxes keep pointer-events:auto — invisible-but-clickable for that window. Gate pointer events on overlaysVisible.

Surfaced during the Chunk 3 (seed-at-submit review) code review.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the seed-at-submit review UI and the interaction code for the z-30 review layer, z-20 human-drawing layer, resize handles, and overlaysVisible. Reproduce overlapping boxes, very small boxes, and the fade transition. Done means human copies remain reachable, small boxes have usable resize controls, and faded review boxes cannot be clicked.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.