Start adding hover effects

Co-Authored-By: Florentin Dörre <florentin.dorre@neotechnology.com>

Author: adamnsch

js-applet/src/index.ts

@@ -1,6 +1,6 @@
 import { FreeLayoutType, NVL } from '@neo4j-nvl/base'
 import type { Node, NvlOptions, Relationship } from '@neo4j-nvl/base'
-import { DragNodeInteraction, PanInteraction, ZoomInteraction } from '@neo4j-nvl/interaction-handlers'
+import { DragNodeInteraction, PanInteraction, ZoomInteraction, HoverInteraction } from '@neo4j-nvl/interaction-handlers'
 
 class PyNVL {
   nvl: NVL
@@ -13,6 +13,7 @@ class PyNVL {
 
   constructor(
     frame: HTMLElement,
+    tooltip: HTMLElement,
     nvlNodes: Node[] = [],
     nvlRels: Relationship[] = [],
     options: NvlOptions = {},
@@ -24,6 +25,28 @@ class PyNVL {
     this.panInteraction = new PanInteraction(this.nvl)
     this.dragNodeInteraction = new DragNodeInteraction(this.nvl)
 
+    const hoverInteraction = new HoverInteraction(this.nvl)
+
+    hoverInteraction.updateCallback('onHover', (element, hitElements, event) => {
+      if (element === undefined) {
+        tooltip.setHTMLUnsafe("")
+        if (tooltip.style.display === "block") {
+          tooltip.style.display = "none";
+        }
+      } else if ("from" in element) {
+        const rel = element as Relationship
+        if (tooltip.style.display === "none") {
+          tooltip.style.display = "block";
+        }
+        tooltip.setHTMLUnsafe("<b>Source ID:</b> " + rel.from + "</br><b>Target ID:</b> " + rel.to)
+      } else if ("id" in element) {
+        if (tooltip.style.display === "none") {
+          tooltip.style.display = "block";
+        }
+        tooltip.setHTMLUnsafe("<b>ID:</b> " + element.id)
+      }
+    })
+
     if (options.layout === FreeLayoutType) {
       this.nvl.setNodePositions(nvlNodes, false)
     }

python-wrapper/src/neo4j_viz/nvl.py

@@ -51,14 +51,17 @@ def render(
         js_code = f"""
         var myNvl = new NVLBase.NVL(
             document.getElementById('{container_id}'),
+            document.getElementById('tooltip'),
             {nodes_json},
             {rels_json},
-            {render_options_json}
+            {render_options_json},
         );
         """
         full_code = self.library_code + js_code
         html_output = f"""
-        <div id="{container_id}" style="width: {width}; height: {height};"></div>
+        <div id="{container_id}" style="width: {width}; height: {height}; position: relative;">
+            <div id="tooltip" style="width: 20%; max-height: 90%; position: absolute; z-index: 2147483647; right: 0; bottom: 0; background: white; display: none; border: solid; border-color: #BBBEC3; border-width: 0.5px; padding: 0.6rem; border-radius: 8px; margin-bottom: 1rem; margin-right: 0.5rem; filter: drop-shadow(0 4px 8px rgba(26,27,29,0.12)); font: PublicSans; font-color: #4D5157; font-size: 14px"></div>
+        </div>
         <script>
             {full_code}
         </script>