From a3143bcb857c986948f706a3603fea00f89db987 Mon Sep 17 00:00:00 2001 From: silberengel Date: Sat, 2 Aug 2025 00:18:46 +0200 Subject: [PATCH] fixed bugs and accesibility warnings --- src/lib/navigator/EventNetwork/Legend.svelte | 357 +++++++++--------- .../navigator/EventNetwork/Settings.svelte | 81 ++-- .../navigator/EventNetwork/TagTable.svelte | 8 +- .../utils/personNetworkBuilder.ts | 6 +- src/lib/stores/index.ts | 2 - src/lib/utils/nostr_identifiers.ts | 2 +- src/lib/utils/websocket_utils.ts | 4 +- .../[type]/[identifier]/+layout.server.ts | 3 +- .../[type]/[identifier]/+page.server.ts | 3 +- 9 files changed, 245 insertions(+), 221 deletions(-) delete mode 100644 src/lib/stores/index.ts diff --git a/src/lib/navigator/EventNetwork/Legend.svelte b/src/lib/navigator/EventNetwork/Legend.svelte index 1c49fe6..69866c0 100644 --- a/src/lib/navigator/EventNetwork/Legend.svelte +++ b/src/lib/navigator/EventNetwork/Legend.svelte @@ -97,7 +97,13 @@
-
+
+ {#if expanded} -
+
-
+
+ {#if nodeTypesExpanded} -
    - - {#each Object.entries(eventCounts).sort(([a], [b]) => Number(a) - Number(b)) as [kindStr, count]} - {@const kind = Number(kindStr)} - {@const countNum = count as number} - {@const color = getEventKindColor(kind)} - {@const name = getEventKindName(kind)} - {#if countNum > 0} -
  • -
    - +
    +
      + + {#each Object.entries(eventCounts).sort(([a], [b]) => Number(a) - Number(b)) as [kindStr, count]} + {@const kind = Number(kindStr)} + {@const countNum = count as number} + {@const color = getEventKindColor(kind)} + {@const name = getEventKindName(kind)} + {#if countNum > 0} +
    • +
      + + +
      + + {kind} - {name} ({countNum}) -
    - - {kind} - {name} ({countNum}) - -
    • - {/if} - {/each} - - -
  • - - - - - {#if starMode} - Radial connections from centers to related events - {:else} - Arrows indicate relationships and sequence +
    • {/if} - - - - - {#if showPersonNodes && personAnchors.length > 0} -
  • - - - - - Authored by person - -
    • + {/each} + +
  • - - References person + + {#if starMode} + Radial connections from centers to related events + {:else} + Arrows indicate relationships and sequence + {/if}
    • - {/if} -
+ + + {#if showPersonNodes && personAnchors.length > 0} +
  • + + + + + Authored by person + +
    • +
  • + + + + + References person + +
    • + {/if} + +
    {/if}
    -
    tagControlsExpanded = !tagControlsExpanded}> +
    + {#if tagControlsExpanded} -
    +
    @@ -231,8 +253,9 @@ {#if showTagAnchors}
    - + - Count - - +
    + {#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 sortedAnchors as anchor} - {@const tagId = `${anchor.type}-${anchor.label}`} - {@const isDisabled = disabledTags.has(tagId)} - - {/each} + {/each} +
    {/if}
    @@ -352,7 +362,13 @@
    -
    personVisualizerExpanded = !personVisualizerExpanded}> +
    + {#if personVisualizerExpanded} -
    +
    @@ -373,7 +389,9 @@ showPersonNodes = !showPersonNodes; onPersonSettingsChange(); }} + onkeydown={(e) => e.key === 'Enter' || e.key === ' ' ? (showPersonNodes = !showPersonNodes, onPersonSettingsChange()) : null} class="px-2 py-1 border border-gray-300 dark:border-gray-700 rounded text-xs font-medium cursor-pointer transition min-w-[3rem] hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500 {showPersonNodes ? 'bg-blue-600 text-white border-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:text-white dark:border-blue-600 dark:hover:bg-blue-700' : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300'}" + aria-pressed={showPersonNodes} > {showPersonNodes ? 'ON' : 'OFF'} @@ -430,37 +448,30 @@ > {#each personAnchors as person} {@const isDisabled = disabledPersons.has(person.pubkey)} - + {/each}
    - {:else if showPersonNodes} -

    - No people found in the current events. -

    {/if}
    {/if} diff --git a/src/lib/navigator/EventNetwork/Settings.svelte b/src/lib/navigator/EventNetwork/Settings.svelte index 584834b..cd4e1e8 100644 --- a/src/lib/navigator/EventNetwork/Settings.svelte +++ b/src/lib/navigator/EventNetwork/Settings.svelte @@ -42,7 +42,13 @@
    -
    +
    + {#if expanded} -
    +
    Showing {count} of {totalCount} events @@ -63,9 +69,12 @@
    -
    e.key === 'Enter' || e.key === ' ' ? toggleEventTypes() : null} + aria-expanded={eventTypesExpanded} + aria-controls="event-types-content" >

    Event Configuration @@ -77,21 +86,24 @@ {/if}

    -
    + {#if eventTypesExpanded} - +
    + +
    {/if}
    - -
    -
    e.key === 'Enter' || e.key === ' ' ? toggleVisualSettings() : null} + aria-expanded={visualSettingsExpanded} + aria-controls="visual-settings-content" >

    Visual Settings @@ -103,32 +115,31 @@ {/if}

    -
    + {#if visualSettingsExpanded} - -
    -
    - -

    - Toggle between star clusters (on) and linear sequence (off) - visualization -

    +
    +
    +
    + +

    + Toggle between star clusters (on) and linear sequence (off) + visualization +

    +
    +
    - -
    - {/if}
    diff --git a/src/lib/navigator/EventNetwork/TagTable.svelte b/src/lib/navigator/EventNetwork/TagTable.svelte index fa02295..55e603d 100644 --- a/src/lib/navigator/EventNetwork/TagTable.svelte +++ b/src/lib/navigator/EventNetwork/TagTable.svelte @@ -12,12 +12,12 @@ }>(); // Computed property for unique tags - let uniqueTags = $derived(() => { - const tagMap = new Map(); + let uniqueTags = $derived.by(() => { + const tagMap = new Map(); - events.forEach(event => { + events.forEach((event: NDKEvent) => { const tags = event.tags || []; - tags.forEach(tag => { + tags.forEach((tag: string[]) => { if (tag[0] === selectedTagType) { const tagValue = tag[1]; const count = tagMap.get(tagValue)?.count || 0; diff --git a/src/lib/navigator/EventNetwork/utils/personNetworkBuilder.ts b/src/lib/navigator/EventNetwork/utils/personNetworkBuilder.ts index b998703..aaafa00 100644 --- a/src/lib/navigator/EventNetwork/utils/personNetworkBuilder.ts +++ b/src/lib/navigator/EventNetwork/utils/personNetworkBuilder.ts @@ -293,13 +293,15 @@ export function createPersonLinks( connectionType = 'referenced'; } - return { + const link: PersonLink = { source: anchor, target: node, isSequential: false, connectionType, }; - }).filter(Boolean); // Remove undefineds + + return link; + }).filter((link): link is PersonLink => link !== undefined); // Remove undefineds and type guard }); debug("Created person links", { linkCount: links.length }); diff --git a/src/lib/stores/index.ts b/src/lib/stores/index.ts deleted file mode 100644 index 467f6e7..0000000 --- a/src/lib/stores/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './relayStore'; -export * from './displayLimits'; \ No newline at end of file diff --git a/src/lib/utils/nostr_identifiers.ts b/src/lib/utils/nostr_identifiers.ts index 246fc9b..8e789d7 100644 --- a/src/lib/utils/nostr_identifiers.ts +++ b/src/lib/utils/nostr_identifiers.ts @@ -1,9 +1,9 @@ import { VALIDATION } from './search_constants'; -import type { NostrEventId } from './nostr_identifiers'; /** * Nostr identifier types */ +export type NostrEventId = string; // 64-character hex string export type NostrCoordinate = string; // kind:pubkey:d-tag format export type NostrIdentifier = NostrEventId | NostrCoordinate; diff --git a/src/lib/utils/websocket_utils.ts b/src/lib/utils/websocket_utils.ts index 9d0d382..bad0818 100644 --- a/src/lib/utils/websocket_utils.ts +++ b/src/lib/utils/websocket_utils.ts @@ -27,7 +27,7 @@ export async function fetchNostrEvent(filter: NostrFilter): Promise const ws = await WebSocketPool.instance.acquire("wss://thecitadel.nostr1.com"); const subId = crypto.randomUUID(); - const res = new Promise((resolve, reject) => { + const res = new Promise((resolve, reject) => { ws.addEventListener("message", (ev) => { const data = JSON.parse(ev.data); @@ -42,7 +42,7 @@ export async function fetchNostrEvent(filter: NostrFilter): Promise reject(new Error(`[WebSocket Utils]: Subscription ${subId} closed`)); break; case "EOSE": - resolve(null); + reject(new Error(`[WebSocket Utils]: Event not found`)); break; } diff --git a/src/routes/publication/[type]/[identifier]/+layout.server.ts b/src/routes/publication/[type]/[identifier]/+layout.server.ts index b89da64..f2c64dc 100644 --- a/src/routes/publication/[type]/[identifier]/+layout.server.ts +++ b/src/routes/publication/[type]/[identifier]/+layout.server.ts @@ -1,6 +1,7 @@ import { error } from "@sveltejs/kit"; import type { LayoutServerLoad } from "./$types"; -import { fetchEventByDTag, fetchEventById, fetchEventByNaddr, fetchEventByNevent, NostrEvent } from "../../../../lib/utils/websocket_utils.ts"; +import { fetchEventByDTag, fetchEventById, fetchEventByNaddr, fetchEventByNevent } from "../../../../lib/utils/websocket_utils.ts"; +import type { NostrEvent } from "../../../../lib/utils/websocket_utils.ts"; export const load: LayoutServerLoad = async ({ params, url }) => { const { type, identifier } = params; diff --git a/src/routes/publication/[type]/[identifier]/+page.server.ts b/src/routes/publication/[type]/[identifier]/+page.server.ts index 18a5e41..b23adcf 100644 --- a/src/routes/publication/[type]/[identifier]/+page.server.ts +++ b/src/routes/publication/[type]/[identifier]/+page.server.ts @@ -1,6 +1,7 @@ import { error } from "@sveltejs/kit"; import type { PageServerLoad } from "./$types"; -import { fetchEventByDTag, fetchEventById, fetchEventByNaddr, fetchEventByNevent, NostrEvent } from "../../../../lib/utils/websocket_utils.ts"; +import { fetchEventByDTag, fetchEventById, fetchEventByNaddr, fetchEventByNevent } from "../../../../lib/utils/websocket_utils.ts"; +import type { NostrEvent } from "../../../../lib/utils/websocket_utils.ts"; export const load: PageServerLoad = async ({ params }) => { const { type, identifier } = params;