diff --git a/lightly_studio_view/src/lib/components/DatasetDistributionPanel/DatasetDistributionPanel.svelte b/lightly_studio_view/src/lib/components/DatasetDistributionPanel/DatasetDistributionPanel.svelte index 3b010855e..d4532218d 100644 --- a/lightly_studio_view/src/lib/components/DatasetDistributionPanel/DatasetDistributionPanel.svelte +++ b/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} {/if} + {#if activeSource.id === 'classes' && comparisonTagItems.length > 0 && onComparisonTagIdsChange} +
+ Compare by + +
+ {/if} {#if activeHistogram}
+ 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] + ); + + + + + + + + + + + No sample tag found. + + {#each items as item (item.value)} + toggle(item.value)}> + + {item.label} + + {/each} + + + + +