Allowed kinds able to be removed and disabled

Click the box to enable/disable
Click x to remove

src/lib/stores/visualizationConfig.ts

@@ -3,6 +3,7 @@ import { writable, derived } from 'svelte/store';
 export interface VisualizationConfig {
   // Event filtering
   allowedKinds: number[];  // Using array for ordered display
+  disabledKinds: number[]; // Kinds that are temporarily disabled but not removed
   allowFreeEvents: boolean;
   
   // Display limits (moving from displayLimits store)
@@ -16,6 +17,7 @@ export interface VisualizationConfig {
 function createVisualizationConfig() {
   const { subscribe, set, update } = writable<VisualizationConfig>({
     allowedKinds: [30040, 30041, 30818],
+    disabledKinds: [30041, 30818], // 30041 and 30818 disabled by default
     allowFreeEvents: false,
     maxPublicationIndices: -1,
     maxEventsPerIndex: -1,
@@ -27,6 +29,7 @@ function createVisualizationConfig() {
     update,
     reset: () => set({
       allowedKinds: [30040, 30041, 30818],
+      disabledKinds: [30041, 30818], // 30041 and 30818 disabled by default
       allowFreeEvents: false,
       maxPublicationIndices: -1,
       maxEventsPerIndex: -1,
@@ -57,14 +60,30 @@ function createVisualizationConfig() {
     toggleSearchThroughFetched: () => update(config => ({
       ...config,
       searchThroughFetched: !config.searchThroughFetched
-    }))
+    })),
+    toggleKind: (kind: number) => update(config => {
+      const isDisabled = config.disabledKinds.includes(kind);
+      if (isDisabled) {
+        // Re-enable it
+        return {
+          ...config,
+          disabledKinds: config.disabledKinds.filter(k => k !== kind)
+        };
+      } else {
+        // Disable it
+        return {
+          ...config,
+          disabledKinds: [...config.disabledKinds, kind]
+        };
+      }
+    })
   };
 }
 
 export const visualizationConfig = createVisualizationConfig();
 
-// Helper to check if a kind is allowed
+// Helper to check if a kind is allowed and enabled
 export const isKindAllowed = derived(
   visualizationConfig,
-  $config => (kind: number) => $config.allowedKinds.includes(kind)
+  $config => (kind: number) => $config.allowedKinds.includes(kind) && !$config.disabledKinds.includes(kind)
 );

src/lib/utils/displayLimits.ts

@@ -1,23 +1,31 @@
 import type { NDKEvent } from '@nostr-dev-kit/ndk';
 import type { DisplayLimits } from '$lib/stores/displayLimits';
+import type { VisualizationConfig } from '$lib/stores/visualizationConfig';
 
 /**
- * Filters events based on display limits
+ * Filters events based on display limits and allowed kinds
  * @param events - All available events
  * @param limits - Display limit settings
+ * @param config - Visualization configuration (optional)
  * @returns Filtered events that should be displayed
  */
-export function filterByDisplayLimits(events: NDKEvent[], limits: DisplayLimits): NDKEvent[] {
+export function filterByDisplayLimits(events: NDKEvent[], limits: DisplayLimits, config?: VisualizationConfig): NDKEvent[] {
-  if (limits.max30040 === -1 && limits.max30041 === -1) {
-    // No limits, return all events
-    return events;
-  }
-
   const result: NDKEvent[] = [];
   let count30040 = 0;
   let count30041 = 0;
 
   for (const event of events) {
+    // First check if the event kind is allowed and not disabled
+    if (config && event.kind !== undefined) {
+      if (!config.allowedKinds.includes(event.kind)) {
+        continue; // Skip events with disallowed kinds
+      }
+      if (config.disabledKinds.includes(event.kind)) {
+        continue; // Skip temporarily disabled kinds
+      }
+    }
+
+    // Then apply the count limits
     if (event.kind === 30040) {
       if (limits.max30040 === -1 || count30040 < limits.max30040) {
         result.push(event);
@@ -29,7 +37,7 @@ export function filterByDisplayLimits(events: NDKEvent[], limits: DisplayLimits)
         count30041++;
       }
     } else {
-      // Other event kinds always pass through
+      // Other allowed event kinds pass through
       result.push(event);
     }
 

src/routes/visualize/+page.svelte

@@ -233,7 +233,7 @@
       baseEvents = [...allEvents]; // Store base events for tag expansion
       
       // Step 6: Apply display limits
-      events = filterByDisplayLimits(allEvents, $displayLimits);
+      events = filterByDisplayLimits(allEvents, $displayLimits, $visualizationConfig);
       
       // Step 7: Detect missing events
       const eventIds = new Set(allEvents.map(e => e.id));
@@ -265,7 +265,7 @@
     if (depth === 0 || tags.length === 0) {
       // Reset to base events only
       allEvents = [...baseEvents];
-      events = filterByDisplayLimits(allEvents, $displayLimits);
+      events = filterByDisplayLimits(allEvents, $displayLimits, $visualizationConfig);
       return;
     }
     
@@ -506,11 +506,11 @@
     }
   }
 
-  // React to display limit changes
+  // React to display limit and allowed kinds changes
   $effect(() => {
-    debug("Effect triggered: allEvents.length =", allEvents.length, "displayLimits =", $displayLimits);
+    debug("Effect triggered: allEvents.length =", allEvents.length, "displayLimits =", $displayLimits, "allowedKinds =", $visualizationConfig.allowedKinds);
     if (allEvents.length > 0) {
-      const newEvents = filterByDisplayLimits(allEvents, $displayLimits);
+      const newEvents = filterByDisplayLimits(allEvents, $displayLimits, $visualizationConfig);
       
       // Only update if actually different to avoid infinite loops
       if (newEvents.length !== events.length) {