Add classification annotation grid item component

[LeonardoRosaa]

What has changed and why?

This PR adds AnnotationClassificationGridItem for classification annotations whose parent sample is an image or video frame. The component renders its thumbnail with the existing grid image and frame URL helpers, reuses SampleClassificationPills for label display.

How has it been tested?

Unit tests

Did you update CHANGELOG.md?

• Yes
• Not needed (internal change)

Summary by CodeRabbit

• New Features

  • Added classification tiles to annotation grids with thumbnail previews, selection state, and optional classification labels.
  • Classification tiles now support drag-to-search across the full sample.
  • Added support for image and video-frame thumbnails.

• Tests

  • Added coverage for rendering, selection, labels, thumbnail paths, and drag-to-search behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 3d998623-b7e1-4472-867d-65affe7b06e7

📥 Commits

Reviewing files that changed from the base of the PR and between 1059a39 and fe1f127.

📒 Files selected for processing (1)

• lightly_studio_view/src/lib/components/AnnotationsGrid/AnnotationClassificationGridItem/AnnotationClassificationGridItem.svelte

🚧 Files skipped from review as they are similar to previous changes (1)

• lightly_studio_view/src/lib/components/AnnotationsGrid/AnnotationClassificationGridItem/AnnotationClassificationGridItem.svelte

---

📝 Walkthrough

Walkthrough

Adds a Svelte classification grid tile with image/video thumbnails, optional classification labels, selection state, and full-sample crop-window callbacks. Tests cover rendering, URL selection, labels, accessibility, annotation payloads, and callback cleanup.

Changes

Classification grid tiles

Layer / File(s)	Summary
Thumbnail data and tile behavior lightly_studio_view/src/lib/components/AnnotationsGrid/AnnotationClassificationGridItem/AnnotationClassificationGridItem.svelte, lightly_studio_view/src/lib/utils/index.ts	Defines the tile props, derives thumbnails and sample dimensions, renders selection and classification labels, and emits full-sample crop windows with cleanup callbacks.
Tile validation and test doubles lightly_studio_view/src/lib/components/AnnotationsGrid/AnnotationClassificationGridItem/*, lightly_studio_view/src/lib/components/AnnotationsGrid/AnnotationsGridItem/AnnotationClassificationGridItem.mock.svelte	Adds tests and Svelte mocks for image/video thumbnails, labels, selection state, annotation payloads, and crop-window lifecycle behavior.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

• lightly-ai/lightly-studio#1312: Adds the related SampleClassificationPills visualization used by this component.
• lightly-ai/lightly-studio#1521: Uses the same crop-window callback contract for annotation grid tiles.
• lightly-ai/lightly-studio#1688: Shares thumbnail and sample-dimension helper logic with this component.

Suggested reviewers: ikondrat

Sequence Diagram(s)

sequenceDiagram
  participant GridSettings
  participant AnnotationClassificationGridItem
  participant ThumbnailHelpers
  participant CropSearch
  GridSettings->>AnnotationClassificationGridItem: Provide thumbnail quality
  AnnotationClassificationGridItem->>ThumbnailHelpers: Build media thumbnail URL
  ThumbnailHelpers-->>AnnotationClassificationGridItem: Return thumbnail URL
  AnnotationClassificationGridItem->>CropSearch: Emit full-sample CropWindow
  AnnotationClassificationGridItem->>CropSearch: Emit null on unmount

Loading

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: adding a classification annotation grid item component.
Description check	✅ Passed	The description includes all required sections and a valid changelog checkbox, with a brief but sufficient test note.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch leonardo-lig-10112-classification-grid-view-editing-annotation-grid-item-view

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 8ae03ec947

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[coderabbitai]

🧹 Nitpick comments (1)

lightly_studio_view/src/lib/components/AnnotationsGrid/AnnotationClassificationGridItem/AnnotationClassificationGridItem.svelte (1)

41-45: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Simplify store subscription.

Svelte's auto-subscription prefix ($) works natively for destructured store variables. You can remove the manual $state and $effect subscription logic and simply use $gridViewThumbnailQualityStore directly when calling the URL helpers below.

♻️ Proposed refactor

     const { gridViewThumbnailQualityStore } = useSettings();
 
-    let quality = $state(get(gridViewThumbnailQualityStore));
-    $effect(() => gridViewThumbnailQualityStore.subscribe((v) => (quality = v)));
-
     // Stable id captured at init — same pattern as AnnotationItem (avoids re-reading

Then, you can replace quality with $gridViewThumbnailQualityStore in lines 58 and 67:

             return getGridImageURL({
                 sampleId: image.sample_id,
-                quality,
+                quality: $gridViewThumbnailQualityStore,
                 renderedWidth,
                 renderedHeight,
                 cacheBuster: cachedCollectionVersion
             });
         }
         const frame = annotation.parent_sample_data as VideoFrameAnnotationView;
         return getGridFrameURL({
             sampleId: frame.sample_id,
-            quality,
+            quality: $gridViewThumbnailQualityStore,
             renderedWidth,
             renderedHeight
         });

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@lightly_studio_view/src/lib/components/AnnotationsGrid/AnnotationClassificationGridItem/AnnotationClassificationGridItem.svelte`
around lines 41 - 45, In the component’s quality handling, remove the manual
`get`, `$state`, and `$effect` subscription logic, then use Svelte’s
auto-subscription value `$gridViewThumbnailQualityStore` directly in the URL
helper calls currently using `quality`. Preserve the existing store source from
`useSettings()`.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In
`@lightly_studio_view/src/lib/components/AnnotationsGrid/AnnotationClassificationGridItem/AnnotationClassificationGridItem.svelte`:
- Around line 41-45: In the component’s quality handling, remove the manual
`get`, `$state`, and `$effect` subscription logic, then use Svelte’s
auto-subscription value `$gridViewThumbnailQualityStore` directly in the URL
helper calls currently using `quality`. Preserve the existing store source from
`useSettings()`.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 0b72a18c-8fc6-4520-9dd5-fa1d51fa4c9a

📥 Commits

Reviewing files that changed from the base of the PR and between 601ee5d and 8ae03ec.

📒 Files selected for processing (4)

• lightly_studio_view/src/lib/components/AnnotationsGrid/AnnotationClassificationGridItem/AnnotationClassificationGridItem.svelte
• lightly_studio_view/src/lib/components/AnnotationsGrid/AnnotationClassificationGridItem/AnnotationClassificationGridItem.test.ts
• lightly_studio_view/src/lib/components/AnnotationsGrid/AnnotationClassificationGridItem/SampleClassificationPills.mock.svelte
• lightly_studio_view/src/lib/components/AnnotationsGrid/AnnotationsGridItem/AnnotationClassificationGridItem.mock.svelte

[LeonardoRosaa]

/review