Sort and paginate media items#577
Conversation
🪼 branch checks and previews
|
🦄 change detectedThis Pull Request includes changes to the following packages.
|
🪼 branch checks and previews
Install Trackio from this PR (includes built frontend) pip install "https://huggingface.co/buckets/trackio/trackio-wheels/resolve/aff897c30b6b4bd94fb8661b186662aa2a03a3b7/trackio-0.26.0-py3-none-any.whl" |
|
The docs for this PR live here. All of your documentation changes will be reflected on that endpoint. The docs are available until 30 days after the last update. |
There was a problem hiding this comment.
Pull request overview
This PR updates the frontend Media page to show media/table items in a more usable order and introduces client-side pagination controls to avoid rendering everything at once.
Changes:
- Default sort order is now newest-first, with a UI selector to toggle newest/oldest.
- Add per-section “Load more” pagination for images, videos, audio, and tables.
- Add a changeset to ship the feature as a minor release.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
trackio/frontend/src/pages/Media.svelte |
Adds sorting logic, derived visible slices for pagination, a sort toolbar, and “Load more” controls per section. |
.changeset/funny-trams-press.md |
Declares a minor release changeset for the Media sorting/pagination feature. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| images: sortMediaItems(rawMediaItems.images), | ||
| videos: sortMediaItems(rawMediaItems.videos), | ||
| audios: sortMediaItems(rawMediaItems.audios), | ||
| tables: sortMediaItems(rawMediaItems.tables), |
There was a problem hiding this comment.
Fixed in 69d470e. Tables are now filtered in the derived media layer via isDisplayableTable(), so section counts, hasMedia, and pagination only include renderable tables.
| @@ -114,7 +180,7 @@ | |||
| ]); | |||
There was a problem hiding this comment.
Fixed in 69d470e. I removed the static-mode eager fetchMediaBlob() pass entirely; rendered media now uses getMediaUrl(), so only rendered/paginated items are requested by the browser.
| <div class="media-toolbar"> | ||
| <label class="media-control" for="media-sort-order"> | ||
| <span>Sort</span> | ||
| <select id="media-sort-order" bind:value={sortOrder}> | ||
| <option value="newest">Newest first</option> | ||
| <option value="oldest">Oldest first</option> | ||
| </select> | ||
| </label> | ||
| </div> |
There was a problem hiding this comment.
Updated the PR body to use Addresses: #575 instead of closing the issue. This PR handles newest/oldest sorting and pagination, while step/time navigation can remain follow-up work.
| @@ -114,7 +180,7 @@ | |||
| ]); | |||
There was a problem hiding this comment.
Fixed in 69d470e as part of removing eager static-mode media blob resolution. Table image URLs are now resolved when their rendered table rows request them, so hidden later pages no longer trigger up-front blob fetches.
|
Very cool ! I think it's quite important expecially when using trackio with a bad peering (either from the server or client). The feature should definitively be debug with the Chrome Dev tool with artificial throttling (like simulating 3G network). For reference here is how it look with 3G: CleanShot.2026-06-09.at.15.14.06.2.mp4It's still a bit problematic I think. The images dom elements doesn't show in the UI before loading, so I can't even open the image individually. I think we should have a progressive image loading (with maybe a BlurHash of the image, or even maybe a generic placeholder), so at least the frame of each image is here and we can right click and open in a new tab. Even better would be clicking on the image open it on a new tab. For video they all show in a way that at least make it easy to get the direct link directly. |
|
To be fair here it's kind of an extreme case with a 3G network, but honestly it's not super far from the reality even with a usual home wifi, expecially when you have huge image + that are not optimized for web |
|
Thanks for testing @julien-blanchon let me see what we can do to improve rendering for slow networks |
|
@julien-blanchon thanks for testing this under throttled network conditions, this was really │ helpful. I pushed an update that should improve the slow-network behavior without requiring backend/image metadata changes. Images now render inside fixed-size frames immediately, with a lightweight placeholder while the image bytes are loading. I also kept lazy loading and added async decoding. When you click on thumbnail, now it opens a simple in-page image preview/lightbox. |
|
This look amazing @abidlabs ! Those are small things but I believe they might greatly improve the overall users experience. I will try this as soon as possible ! |
Closes: #575
Screen.Recording.2026-06-08.at.7.08.46.PM.mov