Options for Deleting a Track Point

[veillette]

UI Options for Deleting a Track Point

Option 1: Delete button in the Data Table row

Add a small trash/× icon at the end of each row in DataTableNode. Since the table already shows every digitized point (frame, time, x, y per track), this is the most discoverable location.

Pros:

• Highly discoverable — the table is where users inspect point data
• Precise — users can see exact coordinates before deleting
• Consistent with the existing trash-icon pattern in TrackListPanel
• Works naturally with multi-track rows (one delete icon per track cell group, or per-row if targeting a specific track)

Cons:

• Adds visual clutter to the table, especially with many tracks
• Need to decide behavior when a row has points from multiple tracks (delete all tracks' points at that frame, or per-track?)

Option 2: Click-to-select on the video overlay, then Delete key

Make the mark dots in DigitizingOverlayNode pickable. Clicking a dot selects it (highlight ring), then pressing Delete/Backspace removes it. This follows the direct-manipulation paradigm that TrackLab already uses for digitizing.

Pros:

• Spatial — users select points where they see them, matching the digitizing workflow
• Keyboard-accelerated — fast for power users correcting tracking errors
• Minimal UI footprint — no new buttons needed

Cons:

• Dots are currently 2px radius (MARK_DOT_RADIUS) — too small to click reliably; would need an enlarged hit area
• Discoverability is low — users won't know dots are clickable without a hint
• Requires adding a "selected point" state to the model

Option 3: Right-click context menu on table row or video dot

Right-clicking a dot on the video overlay or a row in the data table shows a context menu with "Delete Point". This is a standard desktop pattern.

Pros:

• Zero visual clutter — no new buttons
• Extensible — can add future actions (e.g., "Edit coordinates", "Go to frame")
• Familiar desktop convention

Cons:

• Not discoverable on touch devices (no right-click)
• SceneryStack doesn't have a built-in context menu component — you'd need to build one or use a DOM overlay
• Right-click on the HTML table (DataTableNode) is simpler since it's already DOM-based

Option 4: "Delete mode" toggle in the TrackListPanel

Add a toggle button (e.g., eraser icon) that puts the app into "delete mode". While active, clicking any mark dot on the video removes that point. Similar to how checking a track enables digitizing mode.

Pros:

• Clear modal state — user knows what clicks will do
• Reuses the existing overlay interaction area
• Touch-friendly

Cons:

• Modal interfaces can confuse users (forgetting they're in delete mode)
• Adds another state to manage in SimModel

Implementation sketch for Option 1 (table delete button)

Model change in SimModel.ts — add one method:

public removePointFromTrack(trackId: string, frame: number): void

Filter out the point matching frame from the track's points array, then update tracksProperty.

View change in DataTableNode.ts — for each data cell group belonging to a track, append a small × button. On click, call model.removePointFromTrack(trackId, frame).