diff --git a/src/lib/navigator/EventNetwork/Legend.svelte b/src/lib/navigator/EventNetwork/Legend.svelte index 9bc6a8d..38cec1b 100644 --- a/src/lib/navigator/EventNetwork/Legend.svelte +++ b/src/lib/navigator/EventNetwork/Legend.svelte @@ -56,6 +56,7 @@ let tagAnchorsExpanded = $state(true); let tagControlsExpanded = $state(true); let personVisualizerExpanded = $state(true); + let tagSortMode = $state<'count' | 'alphabetical'>('count'); $effect(() => { if (collapsedOnInteraction) { @@ -244,16 +245,65 @@ {#if tagAnchorsExpanded} + {@const sortedAnchors = tagSortMode === 'count' + ? [...tagAnchors].sort((a, b) => b.count - a.count) + : [...tagAnchors].sort((a, b) => a.label.localeCompare(b.label)) + } {#if autoDisabledTags}
Note: All {tagAnchors.length} tags were auto-disabled to prevent graph overload. Click individual tags below to enable them.
{/if} + + +
+
+ Sort by: + + +
+ + +
+
- {#each tagAnchors as anchor} + {#each sortedAnchors as anchor} {@const tagId = `${anchor.type}-${anchor.label}`} {@const isDisabled = disabledTags.has(tagId)}