[Draft] Refactor session details

annavik commented 3 days ago

We are moving towards a new, more scaleable, way of navigating captures. This is the start to adress both #263 and #361.

For now, the timestamp slider is not possible to interact with (we need some BE changes to select capture based on timestamp first). It shows the idea though. Next and previous button works, but we are only considering the first 200 captures for now. I will update the logic there as well after the BE updates.

For capture detections, they are now all be visible by default (but can be hidden from sidebar). I have also update the frames to better match future design from Andre. Selected captures will always be visible and will get a primary border and the tooltip.

Notes:

Maybe for later, just putting it here:

I think we can improve the sidebar content a bit. Perhaps show capture info inline, instead of in popover? Also the processing settings feel a bit strange to me, for example the expand button is a bit unclear?
More view settings? Make it possible to toggle the "score frames"? Make it possible to only show detections that matches the score, like before?
Would be nice to store all view settings in browser, not just the threshold.
Maybe the sidebar should be possible to show/hide if you want a nice full view of the capture?
Showing all verification labels at once is a bit tricky for now, we need some collision handling.

Screenshots:

Skärmavbild 2024-07-04 kl 15 41 34

Skärmavbild 2024-07-04 kl 15 41 58

netlify[bot] commented 3 days ago

Deploy Preview for ami-storybook ready!

Name	Link
Latest commit	b2aa189fde6746178f829b63cc3a146393bc1723
Latest deploy log	https://app.netlify.com/sites/ami-storybook/deploys/6686ac38fe2aa60008a6ddf1
Deploy Preview	https://deploy-preview-453--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[bot] commented 3 days ago

Deploy Preview for ami-web ready!

Name	Link
Latest commit	b2aa189fde6746178f829b63cc3a146393bc1723
Latest deploy log	https://app.netlify.com/sites/ami-web/deploys/6686ac388a44ca0009c9edac
Deploy Preview	https://deploy-preview-453--ami-web.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 73 Accessibility: 95 Best Practices: 92 SEO: 92 PWA: 70 View the detailed breakdown and full score reports

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

RolnickLab / ami-platform