UpSet gallery

Show setup script

<script lang="ts">
	import { UpSet } from '../../../lib/index.js';
	import { genres, makeData } from '../../demo-data.js';

	const data = makeData();

	// Counts that were computed elsewhere (e.g. a manifest): no per-item rows needed.
	const contrasts = ['treated vs control', 'KO vs WT', 'aged vs young'];
	const counted = [
		{ id: 'a', sets: ['treated vs control'], size: 42 },
		{ id: 'b', sets: ['KO vs WT'], size: 17 },
		{ id: 'c', sets: ['treated vs control', 'KO vs WT'], size: 9 },
		{ id: 'd', sets: ['aged vs young'], size: 4 },
		{ id: 'e', sets: ['KO vs WT', 'aged vs young', 'treated vs control'], size: 2 }
	];
	let selected = $state<string | null>(null);
	let hoverSet = $state<string | null>(null);
	let controlledPick = $state<string | null>('c');
	let controlledCalls = $state<(string | null)[]>([]);
	let selectCalls = $state<string[]>([]);
	let pickedSet = $state<string | null>(null);
	let controlledSet = $state<string | null>('Drama');
	let setCalls = $state<string[]>([]);
</script>

Selection and highlighting

Click a column. highlightColor + dimOpacity.

Show code

<UpSet
	{data}
	sets={genres}
	minSize={8}
	bind:selected
	highlightColor="#e53e3e"
	dimOpacity={0.15}
	onsethover={(s) => (hoverSet = s?.name ?? null)}
/>

Custom tooltip

Hover or Tab to a bar. The tooltip is a snippet, and every bar is a button (Enter/Space select, arrows move, Esc clears).

Show code

<UpSet {data} sets={genres} minSize={15}>
	{#snippet tooltip(t)}
		{#if t.kind === 'intersection'}
			<strong>{t.intersection.sets.join(' + ')}</strong><br />
			{t.intersection.size} films · degree {t.intersection.degree}
		{:else}
			<strong>{t.set.name}</strong>: {t.set.size} films
		{/if}
	{/snippet}
</UpSet>

Controlled selection

The owner holds the selection; clicks only notify through onselect.

Show code

<UpSet
	intersections={counted}
	sets={contrasts}
	labelWidth={140}
	controlled
	selected={controlledPick}
	onselect={(i) => controlledCalls.push(i?.id ?? null)}
/>
<button type="button" data-set-pick onclick={() => (controlledPick = 'a')}>select a</button>

onselect previous argument

Show code

<UpSet
	{data}
	sets={genres}
	minSize={40}
	onselect={(s, p) => selectCalls.push(`${s?.id ?? 'null'},${p?.id ?? 'null'}`)}
/>

Set selection (bound)

Click a set bar or row label to keep only the columns that contain it; Esc or a second click clears.

Show code

<UpSet {data} sets={genres} minSize={10} bind:selectedSet={pickedSet} />

Set selection (controlled)

With controlled the owner decides; onsetselect only reports.

Show code

<UpSet
	{data}
	sets={genres}
	minSize={10}
	selectedSet={controlledSet}
	controlled
	onsetselect={(s, p) => (setCalls = [...setCalls, `${p?.name ?? 'none'}->${s?.name ?? 'none'}`])}
/>