Add manual particle tracking with labeled tracks panel - #5
Merged
Conversation
Users can now create named tracks (A, B, C …) from a right-side panel that appears once a video is loaded. Each track is displayed as a colour-coded box with its letter symbol and a trash-can delete button. Clicking a track box records a data point (frame number + timestamp) for that track and automatically advances the video by one frame, enabling frame-by-frame manual digitising. All recorded points are logged to the browser console. Changes: - src/screen-name/model/Track.ts (new) – TrackPoint / Track types - src/screen-name/model/SimModel.ts – addTrack / removeTrack / addPointToTrack / canAddTrack methods + tracksProperty - src/screen-name/view/TrackListPanel.ts (new) – TrackListPanel + TrackRowNode UI components - src/screen-name/view/VideoPlayerNode.ts – public stepForward() method - src/screen-name/view/SimScreenView.ts – wire TrackListPanel into layout https://claude.ai/code/session_01CP5L71zPTyP7PVNarwE1sz
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR implements a manual particle tracking feature that allows users to create labeled tracks (A, B, C, etc.) and record data points by clicking on particles in video frames. A new right-side panel displays active tracks with color-coded badges and provides controls to add/remove tracks.
Key Changes
New Track data model (
Track.ts): DefinesTrackandTrackPointtypes to store particle tracking data with frame numbers, timestamps, and color-coded symbols.Track management in SimModel: Added track lifecycle methods:
addTrack(): Creates new labeled tracks (A–Z) with assigned colors from a paletteremoveTrack(): Deletes tracks by IDaddPointToTrack(): Records frame/time data points for a trackcanAddTrack(): Checks if more tracks can be added (max 26)tracksProperty: Observable property that notifies UI of track changesTrackListPanel UI component: New right-side panel featuring:
VideoPlayerNode enhancement: Added public
stepForward()method to advance playback by exactly one frame (1/30 s) for manual digitizing workflow.Integration in SimScreenView: Positioned TrackListPanel to the right of the video player with proper layout spacing.
Notable Implementation Details
https://claude.ai/code/session_01CP5L71zPTyP7PVNarwE1sz