Add classification annotation grid item component

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

@@ -0,0 +1,109 @@
+<script lang="ts">
+    import {
+        SampleType,
+        type AnnotationWithPayloadView,
+        type ImageAnnotationView,
+        type VideoFrameAnnotationView
+    } from '$lib/api/lightly_studio_local';
+    import { get } from 'svelte/store';
+    import { useSettings } from '$lib/hooks/useSettings';
+    import SampleClassificationPills from '$lib/components/SampleClassificationPills/SampleClassificationPills.svelte';
+    import { getGridImageURL, getGridFrameURL, getGridThumbnailRequestSize } from '$lib/utils';
+    import type { CropWindow } from '../AnnotationItem/renderCropObjectUrl';
+
+    interface Props {
+        /** The classification annotation with its parent sample data. */
+        annotation: AnnotationWithPayloadView;
+        /** Width of the grid container tile in pixels. */
+        containerWidth: number;
+        /** Height of the grid container tile in pixels. */
+        containerHeight: number;
+        /** Whether text labels are visible globally. */
+        showLabel: boolean;
+        /** Whether this tile is currently selected. */
+        selected?: boolean;
+        /** Collection version cache-buster (same as AnnotationImageGridItem). */
+        cachedCollectionVersion?: string;
+        /** Reports full-image crop geometry for drag-to-search (same contract as AnnotationItem). */
+        onCropWindowChange?: (annotationId: string, window: CropWindow | null) => void;
+    }
+
+    let {
+        annotation,
+        containerWidth,
+        containerHeight,
+        showLabel,
+        selected = false,
+        cachedCollectionVersion = '',
+        onCropWindowChange
+    }: Props = $props();
+
+    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
+    // the annotation prop during effect cleanup after the grid array shrinks).
+    const annotationId = annotation.annotation.sample_id;
+
+    const thumbnailUrl = $derived.by(() => {
+        const dpr = globalThis.window?.devicePixelRatio || 1;
+        const renderedWidth = getGridThumbnailRequestSize(containerWidth, dpr);
+        const renderedHeight = getGridThumbnailRequestSize(containerHeight, dpr);
+        if (annotation.parent_sample_type === SampleType.IMAGE) {
+            const image = annotation.parent_sample_data as ImageAnnotationView;
+            return getGridImageURL({
+                sampleId: image.sample_id,
+                quality,
+                renderedWidth,
+                renderedHeight,
+                cacheBuster: cachedCollectionVersion
+            });
+        }
+        const frame = annotation.parent_sample_data as VideoFrameAnnotationView;
+        return getGridFrameURL({
+            sampleId: frame.sample_id,
+            quality,
+            renderedWidth,
+            renderedHeight
+        });
+    });
+
+    const sampleDimensions = $derived.by(() => {
+        if (annotation.parent_sample_type === SampleType.IMAGE) {
+            const image = annotation.parent_sample_data as ImageAnnotationView;
+            return { width: image.width, height: image.height };
+        }
+        const frame = annotation.parent_sample_data as VideoFrameAnnotationView;
+        return { width: frame.video.width, height: frame.video.height };
+    });
+
+    // Emit a full-image CropWindow so classification tiles participate in drag-to-search.
+    // windowX/Y=0 covers the entire sample — there is no bounding box to crop for classification.
+    $effect(() => {
+        if (!thumbnailUrl) return;
+        onCropWindowChange?.(annotationId, {
+            sourceUrl: thumbnailUrl,
+            sampleWidth: sampleDimensions.width,
+            sampleHeight: sampleDimensions.height,
+            windowWidth: sampleDimensions.width,
+            windowHeight: sampleDimensions.height,
+            windowX: 0,
+            windowY: 0
+        });
+        return () => onCropWindowChange?.(annotationId, null);
+    });
+</script>
+
+<div
+    class="relative overflow-hidden rounded-lg bg-black"
+    class:grid-item-selected={selected}
+    aria-selected={selected}
+    style="width: {containerWidth}px; height: {containerHeight}px; background-image: url('{thumbnailUrl}'); background-size: cover; background-position: center;"
+>
+    {#if showLabel}
+        <!-- One tile shows exactly one label — [annotation.annotation] wraps a single classification. -->
+        <SampleClassificationPills sample={{ annotations: [annotation.annotation] }} />
+    {/if}
+</div>

lightly_studio_view/src/lib/components/AnnotationsGrid/AnnotationClassificationGridItem/AnnotationClassificationGridItem.test.ts

@@ -0,0 +1,268 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import '@testing-library/jest-dom';
+import { tick } from 'svelte';
+import {
+    SampleType,
+    AnnotationType,
+    type AnnotationWithPayloadView,
+    type ImageAnnotationView,
+    type VideoFrameAnnotationView,
+    type AnnotationView
+} from '$lib/api/lightly_studio_local';
+import AnnotationClassificationGridItem from './AnnotationClassificationGridItem.svelte';
+
+vi.mock('$lib/components/SampleClassificationPills/SampleClassificationPills.svelte', async () => {
+    const module = await import('./SampleClassificationPills.mock.svelte');
+    return { default: module.default };
+});
+
+vi.mock('$lib/utils', async (importOriginal) => {
+    const actual = await importOriginal<typeof import('$lib/utils')>();
+    return {
+        ...actual,
+        getGridImageURL: ({ sampleId }: { sampleId: string }) => `http://images/sample/${sampleId}`,
+        getGridFrameURL: ({ sampleId }: { sampleId: string }) => `http://frames/media/${sampleId}`
+    };
+});
+
+describe('AnnotationClassificationGridItem', () => {
+    it('renders thumbnail div and SampleClassificationPills for an image annotation', async () => {
+        const annotation = {
+            parent_sample_type: SampleType.IMAGE,
+            annotation: {
+                sample_id: 'ann-1',
+                annotation_type: AnnotationType.CLASSIFICATION,
+                annotation_label: { annotation_label_name: 'cat' },
+                annotation_collection_id: 'col-1',
+                parent_sample_id: 'img-1'
+            } as unknown as AnnotationView,
+            parent_sample_data: {
+                sample_id: 'img-1',
+                width: 800,
+                height: 600
+            } as unknown as ImageAnnotationView
+        } satisfies AnnotationWithPayloadView;
+
+        const { container } = render(AnnotationClassificationGridItem, {
+            props: {
+                annotation,
+                containerWidth: 200,
+                containerHeight: 150,
+                showLabel: true,
+                cachedCollectionVersion: 'v1'
+            }
+        });
+
+        await tick();
+
+        const thumbnail = container.firstElementChild as HTMLElement;
+        expect(thumbnail).toBeInTheDocument();
+        expect(thumbnail.style.backgroundImage).toContain('img-1');
+        expect(screen.getByTestId('mock-classification-pills')).toBeInTheDocument();
+    });
+
+    it('renders thumbnail using frame URL for a video frame annotation', async () => {
+        const annotation = {
+            parent_sample_type: SampleType.VIDEO_FRAME,
+            annotation: {
+                sample_id: 'ann-2',
+                annotation_type: AnnotationType.CLASSIFICATION,
+                annotation_label: { annotation_label_name: 'dog' },
+                annotation_collection_id: 'col-1',
+                parent_sample_id: 'frame-1'
+            } as unknown as AnnotationView,
+            parent_sample_data: {
+                sample_id: 'frame-1',
+                video: { width: 1920, height: 1080, file_path_abs: '/video.mp4' }
+            } as unknown as VideoFrameAnnotationView
+        } satisfies AnnotationWithPayloadView;
+
+        const { container } = render(AnnotationClassificationGridItem, {
+            props: {
+                annotation,
+                containerWidth: 200,
+                containerHeight: 150,
+                showLabel: true
+            }
+        });
+
+        await tick();
+
+        const thumbnail = container.firstElementChild as HTMLElement;
+        expect(thumbnail.style.backgroundImage).toContain('frames/media/frame-1');
+    });
+
+    it('applies grid-item-selected class when selected is true', () => {
+        const annotation = {
+            parent_sample_type: SampleType.IMAGE,
+            annotation: {
+                sample_id: 'ann-3',
+                annotation_type: AnnotationType.CLASSIFICATION,
+                annotation_label: { annotation_label_name: 'cat' },
+                annotation_collection_id: 'col-1',
+                parent_sample_id: 'img-3'
+            } as unknown as AnnotationView,
+            parent_sample_data: {
+                sample_id: 'img-3',
+                width: 800,
+                height: 600
+            } as unknown as ImageAnnotationView
+        } satisfies AnnotationWithPayloadView;
+
+        const { container } = render(AnnotationClassificationGridItem, {
+            props: {
+                annotation,
+                containerWidth: 200,
+                containerHeight: 150,
+                showLabel: true,
+                selected: true
+            }
+        });
+
+        expect(container.firstElementChild).toHaveAttribute('aria-selected', 'true');
+    });
+
+    it('hides SampleClassificationPills when showLabel is false', () => {
+        const annotation = {
+            parent_sample_type: SampleType.IMAGE,
+            annotation: {
+                sample_id: 'ann-4',
+                annotation_type: AnnotationType.CLASSIFICATION,
+                annotation_label: { annotation_label_name: 'cat' },
+                annotation_collection_id: 'col-1',
+                parent_sample_id: 'img-4'
+            } as unknown as AnnotationView,
+            parent_sample_data: {
+                sample_id: 'img-4',
+                width: 800,
+                height: 600
+            } as unknown as ImageAnnotationView
+        } satisfies AnnotationWithPayloadView;
+
+        render(AnnotationClassificationGridItem, {
+            props: {
+                annotation,
+                containerWidth: 200,
+                containerHeight: 150,
+                showLabel: false
+            }
+        });
+
+        expect(screen.queryByTestId('mock-classification-pills')).not.toBeInTheDocument();
+    });
+
+    it('passes only the single annotation to SampleClassificationPills', async () => {
+        const annotation = {
+            parent_sample_type: SampleType.IMAGE,
+            annotation: {
+                sample_id: 'ann-5',
+                annotation_type: AnnotationType.CLASSIFICATION,
+                annotation_label: { annotation_label_name: 'cat' },
+                annotation_collection_id: 'col-1',
+                parent_sample_id: 'img-5'
+            } as unknown as AnnotationView,
+            parent_sample_data: {
+                sample_id: 'img-5',
+                width: 800,
+                height: 600
+            } as unknown as ImageAnnotationView
+        } satisfies AnnotationWithPayloadView;
+
+        render(AnnotationClassificationGridItem, {
+            props: {
+                annotation,
+                containerWidth: 200,
+                containerHeight: 150,
+                showLabel: true
+            }
+        });
+
+        await tick();
+
+        const pills = screen.getByTestId('mock-classification-pills');
+        // Exactly one annotation is passed — not all sibling labels for the parent sample.
+        expect(pills).toHaveAttribute('data-annotation-count', '1');
+        expect(pills).toHaveAttribute('data-annotation-id', 'ann-5');
+    });
+
+    it('calls onCropWindowChange with a full-image CropWindow (windowX/Y=0) once URL is available', async () => {
+        const onCropWindowChange = vi.fn();
+        const annotation = {
+            parent_sample_type: SampleType.IMAGE,
+            annotation: {
+                sample_id: 'ann-6',
+                annotation_type: AnnotationType.CLASSIFICATION,
+                annotation_label: { annotation_label_name: 'cat' },
+                annotation_collection_id: 'col-1',
+                parent_sample_id: 'img-6'
+            } as unknown as AnnotationView,
+            parent_sample_data: {
+                sample_id: 'img-6',
+                width: 1024,
+                height: 768
+            } as unknown as ImageAnnotationView
+        } satisfies AnnotationWithPayloadView;
+
+        render(AnnotationClassificationGridItem, {
+            props: {
+                annotation,
+                containerWidth: 200,
+                containerHeight: 150,
+                showLabel: true,
+                onCropWindowChange
+            }
+        });
+
+        await tick();
+
+        expect(onCropWindowChange).toHaveBeenCalledOnce();
+        const [annotationId, cropWindow] = onCropWindowChange.mock.calls[0];
+        expect(annotationId).toBe('ann-6');
+        expect(cropWindow.windowX).toBe(0);
+        expect(cropWindow.windowY).toBe(0);
+        expect(cropWindow.windowWidth).toBe(1024);
+        expect(cropWindow.windowHeight).toBe(768);
+        expect(cropWindow.sampleWidth).toBe(1024);
+        expect(cropWindow.sampleHeight).toBe(768);
+    });
+
+    it('calls onCropWindowChange with null on unmount', async () => {
+        const onCropWindowChange = vi.fn();
+        const annotation = {
+            parent_sample_type: SampleType.IMAGE,
+            annotation: {
+                sample_id: 'ann-7',
+                annotation_type: AnnotationType.CLASSIFICATION,
+                annotation_label: { annotation_label_name: 'cat' },
+                annotation_collection_id: 'col-1',
+                parent_sample_id: 'img-7'
+            } as unknown as AnnotationView,
+            parent_sample_data: {
+                sample_id: 'img-7',
+                width: 1024,
+                height: 768
+            } as unknown as ImageAnnotationView
+        } satisfies AnnotationWithPayloadView;
+
+        const { unmount } = render(AnnotationClassificationGridItem, {
+            props: {
+                annotation,
+                containerWidth: 200,
+                containerHeight: 150,
+                showLabel: true,
+                onCropWindowChange
+            }
+        });
+
+        await tick();
+
+        unmount();
+
+        await tick();
+
+        const lastCall = onCropWindowChange.mock.calls.at(-1);
+        expect(lastCall?.[0]).toBe('ann-7');
+        expect(lastCall?.[1]).toBeNull();
+    });
+});

lightly_studio_view/src/lib/components/AnnotationsGrid/AnnotationClassificationGridItem/SampleClassificationPills.mock.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    import type { AnnotationView } from '$lib/api/lightly_studio_local';
+
+    interface Props {
+        sample: { annotations: AnnotationView[] };
+    }
+
+    let { sample }: Props = $props();
+</script>
+
+<div
+    data-testid="mock-classification-pills"
+    data-annotation-count={sample.annotations.length}
+    data-annotation-id={sample.annotations[0]?.sample_id}
+></div>