Snap to tick with detections

[annavik]

Summary

In this PR we suggest a solution to #585 with a new new view setting "Snap to tick with detections". When checked, we will snap to the next tick with detections when using one of the three ways to navigate images:

• When using arrows/keyboard for going to next/previous image
• When clicking the graph
• When using the timeline slider

Comments and limitations

At the moment, the timeline response from backend does not include processing status for images. From a frontend perspective, we only know if a timeline tick has detections or not. In practice a processed image might not include any detections, this is why I named the view setting this way, without mentioning processing status.

Another detail to mention is that a timeline tick might include multiple images with detections. At the moment, backend only returns the id for the "top image" in the interval. This is why we call the view setting "snap to tick" instead of "snap to image". If the timeline endpoint could provide some more info about images in an interval, we could update this. We have discussed one tick/image before @mihow . If not to much data do handle at once, I think this could reduce some limitations...?

Regarding the first capture that will be visible, currently this ID is specified by the backend session response. Do you think we should change this, to return ID for the first capture with some detections?

Screenshot

[netlify]

✅ Deploy Preview for ami-dev ready!

Name	Link
🔨 Latest commit	1624666
🔍 Latest deploy log	https://app.netlify.com/sites/ami-dev/deploys/66f407b5f79fc30008ab81df
😎 Deploy Preview	https://deploy-preview-596--ami-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 27 Accessibility: 89 Best Practices: 92 SEO: 100 PWA: 80 View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for ami-storybook ready!

Name	Link
🔨 Latest commit	1624666
🔍 Latest deploy log	https://app.netlify.com/sites/ami-storybook/deploys/66f407b5f3b8520009039548
😎 Deploy Preview	https://deploy-preview-596--ami-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

Tessa Rhinehart left a comment:

This is great! Thank you so much for implementing this feature. I think the language of "Snap to images with detections" is exactly right.

Trying to look through the eyes of an unitiated user - it wasn't necessarily obvious how the interface would respond to me as first started clicking the timeline, because there was nothing near the timeline to indicate that snapping was in effect. Either of these suggestions that might make the feature more obvious/intuitive:

• The "Snap to images with detections" checkbox would stick out more if it were right above the timeline/next to the arrow keys above the timeline that are for navigating through the captures

• When you hover over a particular point of the timeline, it is a bit confusing for the hover box and dashed line to show up over any capture, but clicking on that point in the timeline snaps to a different point in time. I wonder if the dashed line and hover box could just stay in one place and show the information for the one point in the timeline the click will snap to?

Browser metadata

Path:      /projects/84/sessions/4256?capture=13638426
Browser:   Chrome 129.0.0.0 on Mac OS 10.15.7
Viewport:  1728 x 992 @2x
Language:  en-US
Cookies:   Enabled

Open in BrowserStack

Open Deploy Preview · Mark as Resolved

[mihow]

• I agree it make sense to snap the cursor to ticks with detections as well
• I agree that the checkbox may be more apparent next to the Prev/Next arrows.

I am going to merge this so we can use the current version this week.