From 41c9986da88aeb079da91b22706245cca294d1d9 Mon Sep 17 00:00:00 2001
From: limina1 <liminal@duck.com>
Date: Sun, 24 Aug 2025 09:22:14 -0400
Subject: [PATCH] reinstate old tag styles and Invert Selection component

---
 src/lib/navigator/EventNetwork/Legend.svelte | 32 ++++++++++++++------
 src/lib/navigator/EventNetwork/index.svelte  | 14 +++++++++
 2 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/lib/navigator/EventNetwork/Legend.svelte b/src/lib/navigator/EventNetwork/Legend.svelte
index 12a68da..8dd5bb7 100644
--- a/src/lib/navigator/EventNetwork/Legend.svelte
+++ b/src/lib/navigator/EventNetwork/Legend.svelte
@@ -77,7 +77,7 @@
 
   function invertTagSelection() {
     // Invert selection - toggle all tags one by one
-    const allTagIds = tagAnchors.map((anchor: any) => `${anchor.type}-${anchor.label}`);
+    const allTagIds = tagAnchors.map((anchor: any) => anchor.value);
     
     // Process all tags
     allTagIds.forEach((tagId: string) => {
@@ -330,6 +330,16 @@
                     <span class="text-xs text-gray-700 dark:text-gray-300">Alphabetical</span>
                   </label>
                 </div>
+                
+                <!-- Invert Selection -->
+                <label class="flex items-center gap-1 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    onclick={invertTagSelection}
+                    class="w-3 h-3"
+                  />
+                  <span class="text-xs text-gray-700 dark:text-gray-300">Invert Selection</span>
+                </label>
               </div>
               
               <div class="space-y-1 max-h-48 overflow-y-auto">
@@ -337,22 +347,26 @@
                   {@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"
+                    class="flex items-center gap-2 w-full p-2 rounded text-left border-none bg-none cursor-pointer transition hover:bg-black/5 dark:hover:bg-white/5"
                     onclick={() => onTagToggle(tagId)}
                     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}
                   >
-                    <span class="text-xs text-gray-700 dark:text-gray-300 truncate max-w-32" style="opacity: {isDisabled ? 0.5 : 1};" title="{tag.label} ({tag.count})">
-                      {tag.label} ({tag.count})
-                    </span>
+                    <!-- Circular icon with # symbol -->
                     <div class="flex items-center">
                       <span
-                        class="inline-block w-3.5 h-3.5 rotate-45 border-2 border-white"
-                        style="background-color: {getEventKindColor(30040)}; opacity: {isDisabled ? 0.3 : 1};"
-                      ></span>
+                        class="w-4 h-4 rounded-full border-2 border-white flex items-center justify-center text-xs text-white font-bold"
+                        style="background-color: {tag.color || '#FB7185'}; opacity: {isDisabled ? 0.3 : 1};"
+                      >
+                        #
+                      </span>
                     </div>
+                    <!-- Tag label with count -->
+                    <span class="text-xs text-gray-700 dark:text-gray-300 flex-1" style="opacity: {isDisabled ? 0.5 : 1};">
+                      {tag.label}
+                      <span class="text-gray-500">({tag.count})</span>
+                    </span>
                   </button>
                 {/each}
               </div>
diff --git a/src/lib/navigator/EventNetwork/index.svelte b/src/lib/navigator/EventNetwork/index.svelte
index 98ad74a..aea8c8a 100644
--- a/src/lib/navigator/EventNetwork/index.svelte
+++ b/src/lib/navigator/EventNetwork/index.svelte
@@ -168,6 +168,7 @@
   let totalPersonCount = $state(0);
   let displayedPersonCount = $state(0);
   let hasInitializedPersons = $state(false);
+  let hasInitializedTags = $state(false);
 
 
   // Update dimensions when container changes
@@ -298,9 +299,22 @@
           label: n.title,
           count: n.connectedNodes?.length || 0,
           color: getTagAnchorColor(n.tagType || ""),
+          value: `${n.tagType}-${n.title}`, // Use the correct tag ID format for toggling
         }));
+        
+      // Auto-disable all tag anchors by default (only on first time showing)
+      if (!hasInitializedTags && tagAnchors.length > 0) {
+        tagAnchorInfo.forEach(anchor => {
+          disabledTags.add(anchor.value);
+        });
+        hasInitializedTags = true;
+      }
     } else {
       tagAnchorInfo = [];
+      // Reset initialization flag when tag anchors are hidden
+      if (hasInitializedTags && tagAnchorInfo.length === 0) {
+        hasInitializedTags = false;
+      }
     }
 
     // Add person nodes if enabled