LIG-10246 Add sample-tag comparison selector

lightly_studio_view/src/lib/components/DatasetDistributionPanel/DatasetDistributionPanel.svelte

@@ -10,6 +10,7 @@
     import ExpandDialog from './ExpandDialog/ExpandDialog.svelte';
     import HistogramExpandDialog from './HistogramExpandDialog/HistogramExpandDialog.svelte';
     import PanelHeader from './PanelHeader/PanelHeader.svelte';
+    import TagComparisonSelect from './TagComparisonSelect.svelte';
     import { selectVisibleCounts } from './selectVisibleCounts';
     import {
         HISTOGRAM_BIN_COUNT_ITEMS,
@@ -59,6 +60,12 @@
         histogramBinCount?: number;
         /** Called when the user picks a new histogram bin count. */
         onHistogramBinCountChange?: (binCount: number) => void;
+        /** Sample tags available for an independent class-distribution comparison. */
+        comparisonTagItems?: SelectItem[];
+        /** IDs of the sample tags currently included in the comparison. */
+        selectedComparisonTagIds?: string[];
+        /** Updates the independent comparison selection without changing the grid filter. */
+        onComparisonTagIdsChange?: (ids: string[]) => void;
     }
 
     const {
@@ -72,7 +79,10 @@
         initialCountMode = AnnotationCountMode.OBJECTS,
         onHistogramRangeSelect,
         histogramBinCount = 20,
-        onHistogramBinCountChange
+        onHistogramBinCountChange,
+        comparisonTagItems = [],
+        selectedComparisonTagIds = [],
+        onComparisonTagIdsChange
     }: Props = $props();
 
     // Normalise to a source list so the rest of the panel has one code path.
@@ -222,6 +232,16 @@
             {/if}
         </div>
     {/if}
+    {#if activeSource.id === 'classes' && comparisonTagItems.length > 0 && onComparisonTagIdsChange}
+        <div class="mt-2 flex items-center gap-2">
+            <span class="w-[100px] shrink-0 text-xs text-muted-foreground">Compare by</span>
+            <TagComparisonSelect
+                items={comparisonTagItems}
+                selectedIds={selectedComparisonTagIds}
+                onChange={onComparisonTagIdsChange}
+            />
+        </div>
+    {/if}
     {#if activeHistogram}
         <div class="mt-2 flex flex-wrap items-center justify-between gap-2">
             <span

lightly_studio_view/src/lib/components/DatasetDistributionPanel/TagComparisonSelect.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    import { Check, ChevronsUpDown } from '@lucide/svelte';
+    import { Button } from '$lib/components/ui/button';
+    import * as Command from '$lib/components/ui/command';
+    import * as Popover from '$lib/components/ui/popover';
+    import type { SelectItem } from '$lib/components/Select';
+    import { cn } from '$lib/utils';
+
+    interface Props {
+        items: SelectItem[];
+        selectedIds: string[];
+        onChange: (ids: string[]) => void;
+    }
+
+    const { items, selectedIds, onChange }: Props = $props();
+    let open = $state(false);
+    const label = $derived(
+        selectedIds.length === 0
+            ? 'Compare sample tags'
+            : `${selectedIds.length} tag${selectedIds.length === 1 ? '' : 's'} selected`
+    );
+
+    const toggle = (id: string) =>
+        onChange(
+            selectedIds.includes(id)
+                ? selectedIds.filter((selectedId) => selectedId !== id)
+                : [...selectedIds, id]
+        );
+</script>
+
+<Popover.Root bind:open>
+    <Popover.Trigger>
+        <Button
+            variant="outline"
+            size="sm"
+            class="h-8 min-w-0 flex-1 justify-between"
+            role="combobox"
+            aria-expanded={open}
+            data-testid="dataset-distribution-tag-select"
+        >
+            <span class="truncate">{label}</span>
+            <ChevronsUpDown class="ml-2 shrink-0 opacity-50" />
+        </Button>
+    </Popover.Trigger>
+    <Popover.Content class="w-[260px] p-0">
+        <Command.Root>
+            <Command.Input placeholder="Search sample tags..." />
+            <Command.List class="max-h-[240px] dark:[color-scheme:dark]">
+                <Command.Empty>No sample tag found.</Command.Empty>
+                <Command.Group>
+                    {#each items as item (item.value)}
+                        <Command.Item value={item.label} onSelect={() => toggle(item.value)}>
+                            <Check
+                                class={cn(!selectedIds.includes(item.value) && 'text-transparent')}
+                            />
+                            <span class="min-w-0 flex-1 truncate">{item.label}</span>
+                        </Command.Item>
+                    {/each}
+                </Command.Group>
+            </Command.List>
+        </Command.Root>
+    </Popover.Content>
+</Popover.Root>