@ -1,40 +1,84 @@
<!-- EventNetwork.svelte --> <!--
EventNetwork Component
A force-directed graph visualization of Nostr events, showing the relationships
between index events and their content. This component handles the D3 force
simulation, SVG rendering, and user interactions.
-->
< script lang = "ts" > < script lang = "ts" >
import { onMount } from "svelte"; import { onMount } from "svelte";
import * as d3 from "d3"; import * as d3 from "d3";
import type { NDKEvent } from "@nostr-dev-kit/ndk"; import type { NDKEvent } from "@nostr-dev-kit/ndk";
import { levelsToRender } from "$lib/state"; import { levelsToRender } from "$lib/state";
import { generateGraph , getEventColor } from "./utils/networkBuilder"; import { generateGraph , getEventColor } from "./utils/networkBuilder";
import { createSimulation , setupDragHandlers , applyGlobalLogGravity , applyConnectedGravity } from "./utils/forceSimulation"; import {
createSimulation,
setupDragHandlers,
applyGlobalLogGravity,
applyConnectedGravity,
type Simulation
} from "./utils/forceSimulation";
import Legend from "./Legend.svelte"; import Legend from "./Legend.svelte";
import NodeTooltip from "./NodeTooltip.svelte"; import NodeTooltip from "./NodeTooltip.svelte";
import type { NetworkNode , NetworkLink } from "./types"; import type { NetworkNode , NetworkLink } from "./types";
import Settings from "./Settings.svelte";
import { Button } from 'flowbite-svelte';
// Type alias for D3 selections
type Selection = any;
// Configuration
const DEBUG = false; // Set to true to enable debug logging
const NODE_RADIUS = 20;
const LINK_DISTANCE = 10;
const ARROW_DISTANCE = 10;
const CONTENT_COLOR_LIGHT = "#d6c1a8";
const CONTENT_COLOR_DARK = "#FFFFFF";
/**
* Debug logging function that only logs when DEBUG is true
*/
function debug(...args: any[]) {
if (DEBUG) {
console.log("[EventNetwork]", ...args);
}
}
// Component props
let { events = [], onupdate } = $props< { events? : NDKEvent [], onupdate : () => void } >();
let { events = [] } = $props< { events? : NDKEvent [] } >(); // Error state
let errorMessage = $state< string | null > (null);
let hasError = $derived(!!errorMessage);
// DOM references
let svg: SVGSVGElement; let svg: SVGSVGElement;
let isDarkMode = $state(false);
let container: HTMLDivElement; let container: HTMLDivElement;
// Use a string ID for comparisons instead of the node object // Theme state
let isDarkMode = $state(false);
// Tooltip state
let selectedNodeId = $state< string | null > (null); let selectedNodeId = $state< string | null > (null);
let tooltipVisible = $state(false); let tooltipVisible = $state(false);
let tooltipX = $state(0); let tooltipX = $state(0);
let tooltipY = $state(0); let tooltipY = $state(0);
let tooltipNode = $state< NetworkNode | null > (null); let tooltipNode = $state< NetworkNode | null > (null);
const nodeRadius = 20; // Dimensions
const linkDistance = 10;
const arrowDistance = 10;
let width = $state(1000); let width = $state(1000);
let height = $state(600); let height = $state(600);
let windowHeight = $state< number | undefined > (undefined); let windowHeight = $state< number | undefined > (undefined);
let graphHeight = $derived(windowHeight ? Math.max(windowHeight * 0.2, 400) : 400);
let simulation: d3.Simulation< NetworkNode , NetworkLink > | null = null; // D3 objects
let svgGroup: d3.Selection< SVGGElement , unknown , null , undefined > ; let simulation: Simulation< NetworkNode , NetworkLink > | null = null;
let svgGroup: Selection;
let zoomBehavior: any;
let svgElement: Selection;
let graphHeight = $derived(windowHeight ? Math.max(windowHeight * 0.2, 400) : 400); // Track current render level
let currentLevels = $derived(levelsToRender);
// Update dimensions when container changes // Update dimensions when container changes
$effect(() => { $effect(() => {
@ -44,32 +88,40 @@
} }
}); });
// Track levelsToRender changes /**
let currentLevels = $derived(levelsToRender); * Initializes the SVG graph structure
* Sets up the SVG element, zoom behavior, and arrow marker
*/
function initializeGraph() { function initializeGraph() {
if (!svg) return; debug("Initializing graph");
if (!svg) {
debug("SVG element not found");
return;
}
debug("SVG dimensions", { width , height } );
const svgElement = d3.select(svg) const svgElement = d3.select(svg)
.attr("viewBox", `0 0 ${ width } ${ height } `); .attr("viewBox", `0 0 ${ width } ${ height } `);
// Clear existing content // Clear existing content
svgElement.selectAll("*").remove(); svgElement.selectAll("*").remove();
debug("Cleared SVG content");
// Create main group for zoom // Create main group for zoom
svgGroup = svgElement.append("g"); svgGroup = svgElement.append("g");
debug("Created SVG group");
// Set up zoom behavior // Set up zoom behavior
const zoom = d3 zoomBehavior = d3
.zoom< SVGSVGElement , unknown > .zoom()
.scaleExtent([0.1, 9]) .scaleExtent([0.1, 9]) // Min/max zoom levels
.on("zoom", (event) => { .on("zoom", (event: any ) => {
svgGroup.attr("transform", event.transform); svgGroup.attr("transform", event.transform);
}); });
svgElement.call(zoom); svgElement.call(zoomBehavior );
// Set up arrow marker // Set up arrow marker for links
const defs = svgElement.append("defs"); const defs = svgElement.append("defs");
defs defs
.append("marker") .append("marker")
@ -88,166 +140,248 @@
.attr("stroke-width", 1); .attr("stroke-width", 1);
} }
/**
* Updates the graph with new data
* Generates the graph from events, creates the simulation, and renders nodes and links
*/
function updateGraph() { function updateGraph() {
if (!svg || !events?.length || !svgGroup) return; debug("Updating graph");
errorMessage = null;
const { nodes , links } = generateGraph(events, Number(currentLevels));
if (!nodes.length) return; // Create variables to hold our selections
let link: any;
// Stop any existing simulation let node: any;
if (simulation) simulation.stop(); let dragHandler: any;
let nodes: NetworkNode[] = [];
// Create new simulation let links: NetworkLink[] = [];
simulation = createSimulation(nodes, links, Number(nodeRadius), Number(linkDistance));
const dragHandler = setupDragHandlers(simulation); try {
// Validate required elements
// Update links if (!svg) {
const link = svgGroup throw new Error("SVG element not found");
.selectAll< SVGPathElement , NetworkLink > ("path.link") }
.data(links, d => `${ d . source . id } -${ d . target . id } `)
.join( if (!events?.length) {
enter => enter throw new Error("No events to render");
.append("path") }
.attr("class", "link network-link-leather")
.attr("stroke-width", 2) if (!svgGroup) {
.attr("marker-end", "url(#arrowhead)"), throw new Error("SVG group not found");
update => update, }
exit => exit.remove()
); // Generate graph data from events
debug("Generating graph with events", {
// Update nodes eventCount: events.length,
const node = svgGroup currentLevels
.selectAll< SVGGElement , NetworkNode > ("g.node")
.data(nodes, d => d.id)
.join(
enter => {
const nodeEnter = enter
.append("g")
.attr("class", "node network-node-leather")
.call(dragHandler);
nodeEnter
.append("circle")
.attr("class", "drag-circle")
.attr("r", nodeRadius * 2.5)
.attr("fill", "transparent")
.attr("stroke", "transparent")
.style("cursor", "move");
nodeEnter
.append("circle")
.attr("class", "visual-circle")
.attr("r", nodeRadius)
.attr("stroke-width", 2);
nodeEnter
.append("text")
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.attr("fill", "black")
.attr("font-size", "12px");
return nodeEnter;
},
update => update,
exit => exit.remove()
);
// Update node appearances
node.select("circle.visual-circle")
.attr("class", d => !d.isContainer
? "visual-circle network-node-leather network-node-content"
: "visual-circle network-node-leather"
)
.attr("fill", d => !d.isContainer
? isDarkMode ? "#FFFFFF" : "network-link-leather"
: getEventColor(d.id)
);
node.select("text")
.text(d => d.isContainer ? "I" : "C");
// Update node interactions
node
.on("mouseover", (event, d) => {
if (!selectedNodeId) {
tooltipVisible = true;
tooltipNode = d;
tooltipX = event.pageX;
tooltipY = event.pageY;
}
})
.on("mousemove", (event, d) => {
if (!selectedNodeId) {
tooltipX = event.pageX;
tooltipY = event.pageY;
}
})
.on("mouseout", () => {
if (!selectedNodeId) {
tooltipVisible = false;
tooltipNode = null;
}
})
.on("click", (event, d) => {
event.stopPropagation();
if (selectedNodeId === d.id) {
selectedNodeId = null;
tooltipVisible = false;
tooltipNode = d;
tooltipX = event.pageX;
tooltipY = event.pageY;
} else {
selectedNodeId = d.id;
tooltipVisible = true;
tooltipNode = d;
tooltipX = event.pageX;
tooltipY = event.pageY;
}
}); });
// Handle simulation ticks const graphData = generateGraph(events, Number(currentLevels));
simulation.on("tick", () => { nodes = graphData.nodes;
nodes.forEach(node => { links = graphData.links;
applyGlobalLogGravity(node, width / 2, height / 2, simulation!.alpha());
applyConnectedGravity(node, links, simulation!.alpha()); debug("Generated graph data", {
nodeCount: nodes.length,
linkCount: links.length
}); });
// Update positions if (!nodes.length) {
link.attr("d", d => { throw new Error("No nodes to render");
const dx = d.target.x! - d.source.x!; }
const dy = d.target.y! - d.source.y!;
const angle = Math.atan2(dy, dx); // Stop any existing simulation
if (simulation) {
const sourceGap = nodeRadius; debug("Stopping existing simulation");
const targetGap = nodeRadius + arrowDistance; simulation.stop();
}
const startX = d.source.x! + sourceGap * Math.cos(angle);
const startY = d.source.y! + sourceGap * Math.sin(angle); // Create new simulation
const endX = d.target.x! - targetGap * Math.cos(angle); debug("Creating new simulation");
const endY = d.target.y! - targetGap * Math.sin(angle); simulation = createSimulation(nodes, links, NODE_RADIUS, LINK_DISTANCE);
return `M${ startX } ,${ startY } L${ endX } ,${ endY } `; // Center the nodes when the simulation is done
simulation.on("end", () => {
centerGraph();
}); });
node.attr("transform", d => `translate(${ d . x } ,${ d . y } )`); // Create drag handler
}); dragHandler = setupDragHandlers(simulation);
// Update links
debug("Updating links");
link = svgGroup
.selectAll("path.link")
.data(links, (d: NetworkLink) => `${ d . source . id } -${ d . target . id } `)
.join(
(enter: any) => enter
.append("path")
.attr("class", "link network-link-leather")
.attr("stroke-width", 2)
.attr("marker-end", "url(#arrowhead)"),
(update: any) => update,
(exit: any) => exit.remove()
);
// Update nodes
debug("Updating nodes");
node = svgGroup
.selectAll("g.node")
.data(nodes, (d: NetworkNode) => d.id)
.join(
(enter: any) => {
const nodeEnter = enter
.append("g")
.attr("class", "node network-node-leather")
.call(dragHandler);
// Larger transparent circle for better drag handling
nodeEnter
.append("circle")
.attr("class", "drag-circle")
.attr("r", NODE_RADIUS * 2.5)
.attr("fill", "transparent")
.attr("stroke", "transparent")
.style("cursor", "move");
// Visible circle
nodeEnter
.append("circle")
.attr("class", "visual-circle")
.attr("r", NODE_RADIUS)
.attr("stroke-width", 2);
// Node label
nodeEnter
.append("text")
.attr("dy", "0.35em")
.attr("text-anchor", "middle")
.attr("fill", "black")
.attr("font-size", "12px");
return nodeEnter;
},
(update: any) => update,
(exit: any) => exit.remove()
);
// Update node appearances
debug("Updating node appearances");
node.select("circle.visual-circle")
.attr("class", (d: NetworkNode) => !d.isContainer
? "visual-circle network-node-leather network-node-content"
: "visual-circle network-node-leather"
)
.attr("fill", (d: NetworkNode) => !d.isContainer
? isDarkMode ? CONTENT_COLOR_DARK : CONTENT_COLOR_LIGHT
: getEventColor(d.id)
);
node.select("text")
.text((d: NetworkNode) => d.isContainer ? "I" : "C");
// Set up node interactions
debug("Setting up node interactions");
node
.on("mouseover", (event: any, d: NetworkNode) => {
if (!selectedNodeId) {
tooltipVisible = true;
tooltipNode = d;
tooltipX = event.pageX;
tooltipY = event.pageY;
}
})
.on("mousemove", (event: any) => {
if (!selectedNodeId) {
tooltipX = event.pageX;
tooltipY = event.pageY;
}
})
.on("mouseout", () => {
if (!selectedNodeId) {
tooltipVisible = false;
tooltipNode = null;
}
})
.on("click", (event: any, d: NetworkNode) => {
event.stopPropagation();
if (selectedNodeId === d.id) {
// Clicking the selected node again deselects it
selectedNodeId = null;
tooltipVisible = false;
} else {
// Select the node and show its tooltip
selectedNodeId = d.id;
tooltipVisible = true;
tooltipNode = d;
tooltipX = event.pageX;
tooltipY = event.pageY;
}
});
// Set up simulation tick handler
debug("Setting up simulation tick handler");
if (simulation) {
simulation.on("tick", () => {
// Apply custom forces to each node
nodes.forEach(node => {
// Pull nodes toward the center
applyGlobalLogGravity(node, width / 2, height / 2, simulation!.alpha());
// Pull connected nodes toward each other
applyConnectedGravity(node, links, simulation!.alpha());
});
// Update link positions
link.attr("d", (d: NetworkLink) => {
// Calculate angle between source and target
const dx = d.target.x! - d.source.x!;
const dy = d.target.y! - d.source.y!;
const angle = Math.atan2(dy, dx);
// Calculate start and end points with offsets for node radius
const sourceGap = NODE_RADIUS;
const targetGap = NODE_RADIUS + ARROW_DISTANCE;
const startX = d.source.x! + sourceGap * Math.cos(angle);
const startY = d.source.y! + sourceGap * Math.sin(angle);
const endX = d.target.x! - targetGap * Math.cos(angle);
const endY = d.target.y! - targetGap * Math.sin(angle);
return `M${ startX } ,${ startY } L${ endX } ,${ endY } `;
});
// Update node positions
node.attr("transform", (d: NetworkNode) => `translate(${ d . x } ,${ d . y } )`);
});
}
} catch (error) {
console.error("Error in updateGraph:", error);
errorMessage = `Error updating graph: ${ error instanceof Error ? error.message : String ( error )} `;
}
} }
/**
* Component lifecycle setup
*/
onMount(() => { onMount(() => {
isDarkMode = document.body.classList.contains("dark"); debug("Component mounted");
try {
// Initialize the graph structure // Detect initial theme
initializeGraph(); isDarkMode = document.body.classList.contains("dark");
// Initialize the graph structure
initializeGraph();
} catch (error) {
console.error("Error in onMount:", error);
errorMessage = `Error initializing graph: ${ error instanceof Error ? error.message : String ( error )} `;
}
// Handle window resizing // Set up window resize handler
const handleResize = () => { const handleResize = () => {
windowHeight = window.innerHeight; windowHeight = window.innerHeight;
}; };
windowHeight = window.innerHeight; windowHeight = window.innerHeight;
window.addEventListener("resize", handleResize); window.addEventListener("resize", handleResize);
// Watch for theme changes // Set up theme change observer
const themeObserver = new MutationObserver((mutations) => { const themeObserver = new MutationObserver((mutations) => {
mutations.forEach((mutation) => { mutations.forEach((mutation) => {
if (mutation.attributeName === "class") { if (mutation.attributeName === "class") {
@ -256,10 +390,10 @@
isDarkMode = newIsDarkMode; isDarkMode = newIsDarkMode;
// Update node colors when theme changes // Update node colors when theme changes
if (svgGroup) { if (svgGroup) {
svgGroup.selectAll< SVGGElement , NetworkNode > svgGroup.selectAll("g.node")
.select("circle.visual-circle") .select("circle.visual-circle")
.attr("fill", d => !d.isContainer .attr("fill", ( d: NetworkNode) => !d.isContainer
? newIsDarkMode ? "#FFFFFF" : "network-link-leather" ? newIsDarkMode ? CONTENT_COLOR_DARK : CONTENT_COLOR_LIGHT
: getEventColor(d.id) : getEventColor(d.id)
); );
} }
@ -268,6 +402,7 @@
}); });
}); });
// Set up container resize observer
const resizeObserver = new ResizeObserver((entries) => { const resizeObserver = new ResizeObserver((entries) => {
for (const entry of entries) { for (const entry of entries) {
width = entry.contentRect.width; width = entry.contentRect.width;
@ -275,19 +410,21 @@
} }
if (svg) { if (svg) {
d3.select(svg).attr("viewBox", `0 0 ${ width } ${ height } `); d3.select(svg).attr("viewBox", `0 0 ${ width } ${ height } `);
// Trigger simulation to adjust to new dimensions // Restart simulation with new dimensions
if (simulation) { if (simulation) {
simulation.alpha(0.3).restart(); simulation.alpha(0.3).restart();
} }
} }
}); });
// Start observers
themeObserver.observe(document.documentElement, { themeObserver.observe(document.documentElement, {
attributes: true, attributes: true,
attributeFilter: ["class"], attributeFilter: ["class"],
}); });
resizeObserver.observe(container); resizeObserver.observe(container);
// Clean up on component destruction
return () => { return () => {
themeObserver.disconnect(); themeObserver.disconnect();
resizeObserver.disconnect(); resizeObserver.disconnect();
@ -296,29 +433,150 @@
}; };
}); });
// Watch for changes that should trigger a graph update /**
* Watch for changes that should trigger a graph update
*/
$effect(() => { $effect(() => {
if (svg && events?.length) { debug("Effect triggered", {
// Include currentLevels in the effect dependencies hasSvg: !!svg,
const _ = currentLevels; eventCount: events?.length,
updateGraph(); currentLevels
});
try {
if (svg && events?.length) {
// Include currentLevels in the effect dependencies
const _ = currentLevels;
updateGraph();
}
} catch (error) {
console.error("Error in effect:", error);
errorMessage = `Error updating graph: ${ error instanceof Error ? error.message : String ( error )} `;
} }
}); });
/**
* Handles tooltip close event
*/
function handleTooltipClose() { function handleTooltipClose() {
tooltipVisible = false; tooltipVisible = false;
selectedNodeId = null; selectedNodeId = null;
} }
/**
* Centers the graph in the viewport
*/
function centerGraph() {
if (svg && svgGroup && zoomBehavior) {
const svgWidth = svg.clientWidth || width;
const svgHeight = svg.clientHeight || height;
// Reset zoom and center
d3.select(svg).transition().duration(750).call(
zoomBehavior.transform,
d3.zoomIdentity.translate(svgWidth / 2, svgHeight / 2).scale(0.8)
);
}
}
/**
* Zooms in the graph
*/
function zoomIn() {
if (svg && zoomBehavior) {
d3.select(svg).transition().duration(300).call(
zoomBehavior.scaleBy, 1.3
);
}
}
/**
* Zooms out the graph
*/
function zoomOut() {
if (svg && zoomBehavior) {
d3.select(svg).transition().duration(300).call(
zoomBehavior.scaleBy, 0.7
);
}
}
/**
* Legend interactions
*/
let graphInteracted = $state(false);
function handleGraphClick() {
if (!graphInteracted) {
graphInteracted = true;
}
}
< / script > < / script >
< div < div class = "network-container" >
class="flex flex-col w-full h-[calc(100vh-120px)] min-h-[400px] max-h-[900px] p-4 gap-4" { #if hasError }
> < div class = "network-error" >
< div class = "h-[calc(100%-130px)] min-h-[300px]" bind:this = { container } > < h3 class = "network-error-title" > Error< / h3 >
< p > { errorMessage } </ p >
< button
class="network-error-retry"
onclick={() => { errorMessage = null ; updateGraph (); }}
>
Retry
< / button >
< / div >
{ /if }
< div class = "network-svg-container" bind:this = { container } role="figure" >
< Legend collapsedOnInteraction = { graphInteracted } className='' />
<!-- Settings Panel (shown when settings button is clicked) -->
< Settings count = { events . length } onupdate= { onupdate } />
<!-- svelte - ignore a11y_click_events_have_key_events -->
<!-- svelte - ignore a11y_no_static_element_interactions -->
< svg < svg
bind:this={ svg } bind:this={ svg }
class="w-full h-full border border-gray-300 dark:border-gray-700 rounded" class="network-svg"
onclick={ handleGraphClick }
/> />
<!-- Zoom controls -->
< div class = "network-controls" >
< Button outline size = "lg"
class="network-control-button btn-leather rounded-lg p-2"
onclick={ zoomIn }
aria-label="Zoom in"
>
< svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" >
< circle cx = "11" cy = "11" r = "8" > < / circle >
< line x1 = "21" y1 = "21" x2 = "16.65" y2 = "16.65" > < / line >
< line x1 = "11" y1 = "8" x2 = "11" y2 = "14" > < / line >
< line x1 = "8" y1 = "11" x2 = "14" y2 = "11" > < / line >
< / svg >
< / Button >
< Button outline size = "lg"
class="network-control-button btn-leather rounded-lg p-2"
onclick={ zoomOut }
aria-label="Zoom out"
>
< svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" >
< circle cx = "11" cy = "11" r = "8" > < / circle >
< line x1 = "21" y1 = "21" x2 = "16.65" y2 = "16.65" > < / line >
< line x1 = "8" y1 = "11" x2 = "14" y2 = "11" > < / line >
< / svg >
< / Button >
< Button outline size = "lg"
class="network-control-button btn-leather rounded-lg p-2"
onclick={ centerGraph }
aria-label="Center graph"
>
< svg xmlns = "http://www.w3.org/2000/svg" width = "24" height = "24" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" stroke-width = "2" stroke-linecap = "round" stroke-linejoin = "round" >
< circle cx = "12" cy = "12" r = "10" > < / circle >
< circle cx = "12" cy = "12" r = "3" > < / circle >
< / svg >
< / Button >
< / div >
< / div > < / div >
{ #if tooltipVisible && tooltipNode } { #if tooltipVisible && tooltipNode }
@ -327,9 +585,8 @@
selected={ tooltipNode . id === selectedNodeId } selected={ tooltipNode . id === selectedNodeId }
x={ tooltipX } x={ tooltipX }
y={ tooltipY } y={ tooltipY }
on: close={ handleTooltipClose } onclose={ handleTooltipClose }
/> />
{ /if } { /if }
< Legend / >
< / div > < / div >
Nuša Pukšič
11 months ago