From dfd542016ec8e61e80d36ee626f689c00f5e36ab Mon Sep 17 00:00:00 2001
From: limina1 <liminal@duck.com>
Date: Fri, 13 Jun 2025 11:33:12 -0400
Subject: [PATCH] Visual indicators of events loaded

 Visual indicators: Event kind badges now have colored borders:
    - Green border = Events loaded (with count shown)
    - Red border = Not loaded yet
  2. Hint text: Added explanations below the badges explaining what the colors mean
  3. Event counts: Shows the number of loaded events for each kind in parentheses
---
 src/lib/components/EventKindFilter.svelte     | 24 ++++++++++++++++---
 .../navigator/EventNetwork/Settings.svelte    |  4 +++-
 src/lib/navigator/EventNetwork/index.svelte   |  1 +
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/EventKindFilter.svelte b/src/lib/components/EventKindFilter.svelte
index 599d476..1a5f5d9 100644
--- a/src/lib/components/EventKindFilter.svelte
+++ b/src/lib/components/EventKindFilter.svelte
@@ -4,9 +4,11 @@
   import { CloseCircleOutline } from 'flowbite-svelte-icons';
   
   let {
-    onReload = () => {}
+    onReload = () => {},
+    eventCounts = {}
   } = $props<{
     onReload?: () => void;
+    eventCounts?: { [kind: number]: number };
   }>();
   
   let newKind = $state('');
@@ -76,16 +78,21 @@
   <div class="flex flex-wrap gap-2 items-center">
     {#each $visualizationConfig.allowedKinds as kind}
       {@const isDisabled = $visualizationConfig.disabledKinds.includes(kind)}
+      {@const isLoaded = (eventCounts[kind] || 0) > 0}
+      {@const borderColor = isLoaded ? 'border-green-500' : 'border-red-500'}
       <button
-        class="badge-container {isDisabled ? 'disabled' : ''}"
+        class="badge-container {isDisabled ? 'disabled' : ''} {isLoaded ? 'loaded' : 'not-loaded'}"
         onclick={() => toggleKind(kind)}
         title={isDisabled ? `Click to enable ${getKindName(kind)}` : `Click to disable ${getKindName(kind)}`}
       >
         <Badge 
           color="dark" 
-          class="flex items-center gap-1 px-2 py-1 {isDisabled ? 'opacity-40' : ''}"
+          class="flex items-center gap-1 px-2 py-1 {isDisabled ? 'opacity-40' : ''} border-2 {borderColor}"
         >
           <span class="text-xs">{kind}</span>
+          {#if isLoaded}
+            <span class="text-xs text-gray-400">({eventCounts[kind]})</span>
+          {/if}
           <button
             onclick={(e) => {
               e.stopPropagation();
@@ -158,6 +165,17 @@
     </Button>
   </div>
   
+  <div class="text-xs text-gray-500 dark:text-gray-400 space-y-1">
+    <p class="flex items-center gap-2">
+      <span class="inline-block w-3 h-3 border-2 border-green-500 rounded"></span>
+      <span>Green border = Events loaded</span>
+    </p>
+    <p class="flex items-center gap-2">
+      <span class="inline-block w-3 h-3 border-2 border-red-500 rounded"></span>
+      <span>Red border = Not loaded (click Reload to fetch)</span>
+    </p>
+  </div>
+  
   <label class="flex items-center gap-2 text-xs">
     <input
       type="checkbox"
diff --git a/src/lib/navigator/EventNetwork/Settings.svelte b/src/lib/navigator/EventNetwork/Settings.svelte
index fc096e6..47378a0 100644
--- a/src/lib/navigator/EventNetwork/Settings.svelte
+++ b/src/lib/navigator/EventNetwork/Settings.svelte
@@ -20,6 +20,7 @@
     selectedTagType = $bindable("t"),
     tagExpansionDepth = $bindable(0),
     onFetchMissing = () => {},
+    eventCounts = {},
   } = $props<{
     count: number;
     totalCount: number;
@@ -30,6 +31,7 @@
     selectedTagType?: string;
     tagExpansionDepth?: number;
     onFetchMissing?: (ids: string[]) => void;
+    eventCounts?: { [kind: number]: number };
   }>();
 
   let expanded = $state(false);
@@ -154,7 +156,7 @@
           </Button>
         </div>
         {#if eventTypesExpanded}
-          <EventKindFilter onReload={onupdate} />
+          <EventKindFilter onReload={onupdate} {eventCounts} />
         {/if}
       </div>
 
diff --git a/src/lib/navigator/EventNetwork/index.svelte b/src/lib/navigator/EventNetwork/index.svelte
index 25d96da..b88c47f 100644
--- a/src/lib/navigator/EventNetwork/index.svelte
+++ b/src/lib/navigator/EventNetwork/index.svelte
@@ -927,6 +927,7 @@
       bind:showTagAnchors
       bind:selectedTagType
       bind:tagExpansionDepth
+      {eventCounts}
     />
 
     <!-- svelte-ignore a11y_click_events_have_key_events -->