fixed tag anchors

src/lib/navigator/EventNetwork/Legend.svelte

@@ -301,7 +301,7 @@
             <div id="tag-anchors-content">
               {#if autoDisabledTags}
                 <div class="text-xs text-amber-600 dark:text-amber-400 mb-2 p-2 bg-amber-50 dark:bg-amber-900/20 rounded">
-                  <strong>Note:</strong> All {tagAnchors.length} tags were auto-disabled to prevent graph overload. Click individual tags below to enable them.
+                  <strong>Note:</strong> Some tags were auto-disabled to prevent graph overload. Click individual tags below to enable/disable them.
                 </div>
               {/if}
               
@@ -334,11 +334,12 @@
               
               <div class="space-y-1 max-h-48 overflow-y-auto">
                 {#each sortedAnchors as tag}
-                  {@const isDisabled = disabledTags.has(tag.value)}
+                  {@const tagId = `${tag.type}-${tag.label}`}
+                  {@const isDisabled = disabledTags.has(tagId)}
                   <button
                     class="flex items-center justify-between w-full p-2 rounded text-left border-none bg-none cursor-pointer transition hover:bg-black/5 dark:hover:bg-white/5 disabled:opacity-50"
-                    onclick={() => onTagToggle(tag.value)}
+                    onclick={() => onTagToggle(tagId)}
-                    onkeydown={(e) => e.key === 'Enter' || e.key === ' ' ? onTagToggle(tag.value) : null}
+                    onkeydown={(e) => e.key === 'Enter' || e.key === ' ' ? onTagToggle(tagId) : null}
                     disabled={false}
                     title={isDisabled ? `Click to show ${tag.label}` : `Click to hide ${tag.label}`}
                     aria-pressed={!isDisabled}

src/lib/navigator/EventNetwork/index.svelte

@@ -156,7 +156,7 @@
   let autoDisabledTags = $state(false);
   
   // Maximum number of tag anchors before auto-disabling
-  const MAX_TAG_ANCHORS = 20;
+  const MAX_TAG_ANCHORS = 50;
   
   // Person nodes state
   let showPersonNodes = $state(false);
@@ -1108,11 +1108,14 @@
       if (tagAnchorInfo.length > MAX_TAG_ANCHORS && !autoDisabledTags) {
         // Defer the state update to break the sync cycle
         autoDisableTimer = setTimeout(() => {
-          debug(`Auto-disabling tags: ${tagAnchorInfo.length} exceeds maximum of ${MAX_TAG_ANCHORS}`);
+          debug(`Auto-disabling excess tags: ${tagAnchorInfo.length} exceeds maximum of ${MAX_TAG_ANCHORS}`);
+          
+          // Sort tags by count (most connected first) and disable the excess ones
+          const sortedTags = [...tagAnchorInfo].sort((a, b) => b.count - a.count);
+          const tagsToDisable = sortedTags.slice(MAX_TAG_ANCHORS);
           
-          // Disable all tags
           const newDisabledTags = new Set<string>();
-          tagAnchorInfo.forEach(anchor => {
+          tagsToDisable.forEach(anchor => {
             const tagId = `${anchor.type}-${anchor.label}`;
             newDisabledTags.add(tagId);
           });
@@ -1121,13 +1124,15 @@
           autoDisabledTags = true;
           
           // Optional: Show a notification to the user
-          console.info(`[EventNetwork] Auto-disabled ${tagAnchorInfo.length} tag anchors to prevent graph overload. Click individual tags in the legend to enable them.`);
+          console.info(`[EventNetwork] Auto-disabled ${tagsToDisable.length} tag anchors to prevent graph overload. Click individual tags in the legend to enable them.`);
         }, 0);
       }
       
       // Reset auto-disabled flag if tag count goes back down
       if (tagAnchorInfo.length <= MAX_TAG_ANCHORS && autoDisabledTags) {
         autoDisableTimer = setTimeout(() => {
+          // Clear disabled tags when we're back under the limit
+          disabledTags.clear();
           autoDisabledTags = false;
         }, 0);
       }