Browse Source
Adds zoom and centering buttons. Implements D3 properly and updates everything to Svelte 5 and CSS styles.master
12 changed files with 1407 additions and 354 deletions
@ -1,30 +1,61 @@ |
|||||||
|
<!-- |
||||||
|
Legend Component |
||||||
|
|
||||||
|
Displays a legend explaining the different node and link types in the |
||||||
|
event network visualization. |
||||||
|
--> |
||||||
<script lang="ts"> |
<script lang="ts"> |
||||||
|
// Optional class name to apply to the legend container |
||||||
export let className: string = ""; |
export let className: string = ""; |
||||||
</script> |
</script> |
||||||
|
|
||||||
<div class="leather-legend {className}"> |
<div class="leather-legend {className}"> |
||||||
<h3 class="text-lg font-bold mb-2 h-leather">Legend</h3> |
<h3 class="h-leather">Legend</h3> |
||||||
<ul class="legend-list"> |
<ul class="legend-list"> |
||||||
|
<!-- Index event node --> |
||||||
<li class="legend-item"> |
<li class="legend-item"> |
||||||
<div class="legend-icon"> |
<div class="legend-icon"> |
||||||
<span class="legend-circle" style="background-color: hsl(200, 70%, 75%)"> |
<span |
||||||
|
class="legend-circle" |
||||||
|
style="background-color: hsl(200, 70%, 75%)" |
||||||
|
> |
||||||
|
<span class="legend-letter">I</span> |
||||||
</span> |
</span> |
||||||
<span class="legend-letter">I</span> |
|
||||||
</div> |
</div> |
||||||
<span>Index events (kind 30040) - Each with a unique pastel color</span> |
<span class="legend-text">Index events (kind 30040) - Each with a unique pastel color</span> |
||||||
</li> |
</li> |
||||||
|
|
||||||
|
<!-- Content event node --> |
||||||
<li class="legend-item"> |
<li class="legend-item"> |
||||||
<div class="legend-icon"> |
<div class="legend-icon"> |
||||||
<span class="legend-circle content"></span> |
<span class="legend-circle content"> |
||||||
<span class="legend-letter">C</span> |
<span class="legend-letter">C</span> |
||||||
|
</span> |
||||||
</div> |
</div> |
||||||
<span>Content events (kinds 30041, 30818) - Publication sections</span> |
<span class="legend-text">Content events (kinds 30041, 30818) - Publication sections</span> |
||||||
</li> |
</li> |
||||||
|
|
||||||
|
<!-- Link arrow --> |
||||||
<li class="legend-item"> |
<li class="legend-item"> |
||||||
<svg class="w-6 h-6 mr-2" viewBox="0 0 24 24"> |
<svg class="w-6 h-6 mr-2" viewBox="0 0 24 24"> |
||||||
<path d="M4 12h16M16 6l6 6-6 6" class="network-link-leather" /> |
<path |
||||||
|
d="M4 12h16M16 6l6 6-6 6" |
||||||
|
class="network-link-leather" |
||||||
|
stroke-width="2" |
||||||
|
fill="none" |
||||||
|
/> |
||||||
</svg> |
</svg> |
||||||
<span>Arrows indicate reading/sequence order</span> |
<span class="legend-text">Arrows indicate reading/sequence order</span> |
||||||
</li> |
</li> |
||||||
</ul> |
</ul> |
||||||
</div> |
</div> |
||||||
|
|
||||||
|
<style> |
||||||
|
.legend-circle.content { |
||||||
|
background-color: var(--content-color, #d6c1a8); |
||||||
|
} |
||||||
|
|
||||||
|
:global(.dark) .legend-circle.content { |
||||||
|
background-color: var(--content-color-dark, #FFFFFF); |
||||||
|
} |
||||||
|
</style> |
||||||
|
|||||||
@ -1,35 +1,79 @@ |
|||||||
|
/** |
||||||
|
* Type definitions for the Event Network visualization |
||||||
|
*
|
||||||
|
* This module defines the core data structures used in the D3 force-directed |
||||||
|
* graph visualization of Nostr events. |
||||||
|
*/ |
||||||
|
|
||||||
import type { NDKEvent } from "@nostr-dev-kit/ndk"; |
import type { NDKEvent } from "@nostr-dev-kit/ndk"; |
||||||
|
|
||||||
export interface NetworkNode extends d3.SimulationNodeDatum { |
/** |
||||||
id: string; |
* Base interface for nodes in a D3 force simulation |
||||||
event?: NDKEvent; |
* Represents the physical properties of a node in the simulation |
||||||
level: number; |
*/ |
||||||
kind: number; |
export interface SimulationNodeDatum { |
||||||
title: string; |
index?: number; // Node index in the simulation
|
||||||
content: string; |
x?: number; // X position
|
||||||
author: string; |
y?: number; // Y position
|
||||||
type: "Index" | "Content"; |
vx?: number; // X velocity
|
||||||
naddr?: string; |
vy?: number; // Y velocity
|
||||||
nevent?: string; |
fx?: number | null; // Fixed X position (when node is pinned)
|
||||||
x?: number; |
fy?: number | null; // Fixed Y position (when node is pinned)
|
||||||
y?: number; |
} |
||||||
isContainer?: boolean; |
|
||||||
|
/** |
||||||
|
* Base interface for links in a D3 force simulation |
||||||
|
* Represents connections between nodes |
||||||
|
*/ |
||||||
|
export interface SimulationLinkDatum<NodeType> { |
||||||
|
source: NodeType | string | number; // Source node or identifier
|
||||||
|
target: NodeType | string | number; // Target node or identifier
|
||||||
|
index?: number; // Link index in the simulation
|
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Represents a node in the event network visualization |
||||||
|
* Extends the base simulation node with Nostr event-specific properties |
||||||
|
*/ |
||||||
|
export interface NetworkNode extends SimulationNodeDatum { |
||||||
|
id: string; // Unique identifier (event ID)
|
||||||
|
event?: NDKEvent; // Reference to the original NDK event
|
||||||
|
level: number; // Hierarchy level in the network
|
||||||
|
kind: number; // Nostr event kind (30040 for index, 30041/30818 for content)
|
||||||
|
title: string; // Event title
|
||||||
|
content: string; // Event content
|
||||||
|
author: string; // Author's public key
|
||||||
|
type: "Index" | "Content"; // Node type classification
|
||||||
|
naddr?: string; // NIP-19 naddr identifier
|
||||||
|
nevent?: string; // NIP-19 nevent identifier
|
||||||
|
isContainer?: boolean; // Whether this node is a container (index)
|
||||||
} |
} |
||||||
|
|
||||||
export interface NetworkLink extends d3.SimulationLinkDatum<NetworkNode> { |
/** |
||||||
source: NetworkNode; |
* Represents a link between nodes in the event network |
||||||
target: NetworkNode; |
* Extends the base simulation link with event-specific properties |
||||||
isSequential: boolean; |
*/ |
||||||
|
export interface NetworkLink extends SimulationLinkDatum<NetworkNode> { |
||||||
|
source: NetworkNode; // Source node (overridden to be more specific)
|
||||||
|
target: NetworkNode; // Target node (overridden to be more specific)
|
||||||
|
isSequential: boolean; // Whether this link represents a sequential relationship
|
||||||
} |
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Represents the complete graph data for visualization |
||||||
|
*/ |
||||||
export interface GraphData { |
export interface GraphData { |
||||||
nodes: NetworkNode[]; |
nodes: NetworkNode[]; // All nodes in the graph
|
||||||
links: NetworkLink[]; |
links: NetworkLink[]; // All links in the graph
|
||||||
} |
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Represents the internal state of the graph during construction |
||||||
|
* Used to track relationships and build the final graph |
||||||
|
*/ |
||||||
export interface GraphState { |
export interface GraphState { |
||||||
nodeMap: Map<string, NetworkNode>; |
nodeMap: Map<string, NetworkNode>; // Maps event IDs to nodes
|
||||||
links: NetworkLink[]; |
links: NetworkLink[]; // All links in the graph
|
||||||
eventMap: Map<string, NDKEvent>; |
eventMap: Map<string, NDKEvent>; // Maps event IDs to original events
|
||||||
referencedIds: Set<string>; |
referencedIds: Set<string>; // Set of event IDs referenced by other events
|
||||||
} |
} |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
/** |
||||||
|
* Type declarations for D3.js and related modules
|
||||||
|
*
|
||||||
|
* These declarations allow TypeScript to recognize D3 imports without requiring |
||||||
|
* detailed type definitions. For a project requiring more type safety, consider |
||||||
|
* using the @types/d3 package and its related sub-packages. |
||||||
|
*/ |
||||||
|
|
||||||
|
// Core D3 library
|
||||||
|
declare module 'd3'; |
||||||
|
|
||||||
|
// Force simulation module for graph layouts
|
||||||
|
declare module 'd3-force'; |
||||||
|
|
||||||
|
// DOM selection and manipulation module
|
||||||
|
declare module 'd3-selection'; |
||||||
|
|
||||||
|
// Drag behavior module
|
||||||
|
declare module 'd3-drag'; |
||||||
Loading…
Reference in new issue