From ece42f30218d275cba271a7caf3464a3a94c7f46 Mon Sep 17 00:00:00 2001
From: Silberengel <silberengel7@protonmail.com>
Date: Wed, 9 Apr 2025 17:53:30 +0200
Subject: [PATCH] Fix a type error. Got rid of unused style and applied a style
 from the main css. Implemented Svelte props. Made sure entire element is
 visible on page, and added a hyperlink to the publication based upon eventID.
 Limit content to 200 chars.

---
 .../navigator/EventNetwork/NodeTooltip.svelte | 66 +++++++++++++++----
 src/lib/navigator/EventNetwork/index.svelte   | 12 +---
 2 files changed, 57 insertions(+), 21 deletions(-)

diff --git a/src/lib/navigator/EventNetwork/NodeTooltip.svelte b/src/lib/navigator/EventNetwork/NodeTooltip.svelte
index 072ea96..0c40287 100644
--- a/src/lib/navigator/EventNetwork/NodeTooltip.svelte
+++ b/src/lib/navigator/EventNetwork/NodeTooltip.svelte
@@ -1,10 +1,17 @@
 <script lang="ts">
   import type { NetworkNode } from "./types";
+  import { onMount } from "svelte";
   
-  export let node: NetworkNode;
-  export let selected: boolean = false;
-  export let x: number;
-  export let y: number;
+  let { node, selected = false, x, y } = $props<{
+    node: NetworkNode;
+    selected?: boolean;
+    x: number;
+    y: number;
+  }>();
+  
+  let tooltipElement: HTMLDivElement;
+  let tooltipX = $state(x + 10);
+  let tooltipY = $state(y - 10);
   
   function getAuthorTag(node: NetworkNode): string {
     if (node.event) {
@@ -25,31 +32,66 @@
     }
     return "View Publication";
   }
+  
+  function truncateContent(content: string, maxLength: number = 200): string {
+    if (content.length <= maxLength) return content;
+    return content.substring(0, maxLength) + "...";
+  }
+  
+  // Ensure tooltip is fully visible on screen
+  onMount(() => {
+    if (tooltipElement) {
+      const rect = tooltipElement.getBoundingClientRect();
+      const windowWidth = window.innerWidth;
+      const windowHeight = window.innerHeight;
+      
+      // Check if tooltip goes off the right edge
+      if (rect.right > windowWidth) {
+        tooltipX = windowWidth - rect.width - 10;
+      }
+      
+      // Check if tooltip goes off the bottom edge
+      if (rect.bottom > windowHeight) {
+        tooltipY = windowHeight - rect.height - 10;
+      }
+      
+      // Check if tooltip goes off the left edge
+      if (rect.left < 0) {
+        tooltipX = 10;
+      }
+      
+      // Check if tooltip goes off the top edge
+      if (rect.top < 0) {
+        tooltipY = 10;
+      }
+    }
+  });
 </script>
 
 <div
+  bind:this={tooltipElement}
   class="tooltip-leather fixed p-4 rounded shadow-lg bg-primary-0 dark:bg-primary-800
          border border-gray-200 dark:border-gray-800 transition-colors duration-200"
-  style="left: {x + 10}px; top: {y - 10}px; z-index: 1000;"
+  style="left: {tooltipX}px; top: {tooltipY}px; z-index: 1000;"
 >
   <div class="space-y-2">
-    <div class="font-bold text-base">{node.title}</div>
+    <div class="font-bold text-base">
+      <a href="/publication?id={node.id}" class="text-gray-800 hover:text-primary-400 dark:text-gray-300 dark:hover:text-primary-500">
+        {node.title}
+      </a>
+    </div>
     <div class="text-gray-600 dark:text-gray-400 text-sm">
       {node.type} ({node.isContainer ? "30040" : "30041"})
     </div>
     <div class="text-gray-600 dark:text-gray-400 text-sm">
       Author: {getAuthorTag(node)}
     </div>
-    <div class="text-gray-600 dark:text-gray-400 text-sm">
-      <a href="/publication?id={node.id}" class="text-blue-500 hover:underline">
-        {getDTag(node)}
-      </a>
-    </div>
+
     {#if node.content}
       <div
         class="mt-2 text-xs bg-gray-100 dark:bg-gray-800 p-2 rounded overflow-auto max-h-40"
       >
-        {node.content}
+        {truncateContent(node.content)}
       </div>
     {/if}
     {#if selected}
diff --git a/src/lib/navigator/EventNetwork/index.svelte b/src/lib/navigator/EventNetwork/index.svelte
index 9246df3..23aa12b 100644
--- a/src/lib/navigator/EventNetwork/index.svelte
+++ b/src/lib/navigator/EventNetwork/index.svelte
@@ -8,6 +8,7 @@
   import { createSimulation, setupDragHandlers, applyGlobalLogGravity, applyConnectedGravity } from "./utils/forceSimulation";
   import Legend from "./Legend.svelte";
   import NodeTooltip from "./NodeTooltip.svelte";
+  import type { NetworkNode, NetworkLink } from "./types";
 
   let { events = [] } = $props<{ events?: NDKEvent[] }>();
 
@@ -90,14 +91,14 @@
   function updateGraph() {
     if (!svg || !events?.length || !svgGroup) return;
 
-    const { nodes, links } = generateGraph(events, currentLevels);
+    const { nodes, links } = generateGraph(events, Number(currentLevels));
     if (!nodes.length) return;
 
     // Stop any existing simulation
     if (simulation) simulation.stop();
 
     // Create new simulation
-    simulation = createSimulation(nodes, links, nodeRadius, linkDistance);
+    simulation = createSimulation(nodes, links, Number(nodeRadius), Number(linkDistance));
     const dragHandler = setupDragHandlers(simulation);
 
     // Update links
@@ -326,10 +327,3 @@
 
   <Legend />
 </div>
-
-<style>
-  .tooltip {
-    max-width: 300px;
-    word-wrap: break-word;
-  }
-</style>
\ No newline at end of file