Merge pull request #136 from neo4j/hover-nodes

Add hover effects for node IDs

Author: adamnsch

README.md

@@ -32,9 +32,11 @@ The package wraps the [Neo4j Visualization JavaScript library (NVL)](https://neo
   * Colors
   * Captions
   * Pinning
+  * On hover tooltip
 * Relationship features:
   * Colors
   * Captions
+  * On hover tooltip
 * Graph features:
   * Zooming
   * Panning

docs/source/rendering.rst

@@ -45,6 +45,9 @@ It defaults to 10.000, because rendering a large number of nodes can be slow and
 However, you can increase this value if you are confident that your environment can handle the scale.
 In this case you might also want to pass ``Renderer.WEB_GL`` as the ``renderer`` to improve performance.
 
+By default a tooltip will be shown when hovering over a node or relationship.
+But you can disable this by passing ``show_hover_tooltip=False``.
+
 
 Examples
 --------

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
@@ -11,8 +11,11 @@ class PyNVL {
 
   dragNodeInteraction: DragNodeInteraction
 
+  hoverInteraction: HoverInteraction
+
   constructor(
     frame: HTMLElement,
+    tooltip: HTMLElement | null = null,
     nvlNodes: Node[] = [],
     nvlRels: Relationship[] = [],
     options: NvlOptions = {},
@@ -24,6 +27,30 @@ class PyNVL {
     this.panInteraction = new PanInteraction(this.nvl)
     this.dragNodeInteraction = new DragNodeInteraction(this.nvl)
 
+    if (tooltip !== null) {
+      this.hoverInteraction = new HoverInteraction(this.nvl)
+
+      this.hoverInteraction.updateCallback('onHover', (element) => {
+        if (element === undefined) {
+          tooltip.textContent = "";
+          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/README.md

@@ -33,9 +33,11 @@ The package wraps the [Neo4j Visualization JavaScript library (NVL)](https://neo
   * Colors
   * Captions
   * Pinning
+  * On hover tooltip
 * Relationship features:
   * Colors
   * Captions
+  * On hover tooltip
 * Graph features:
   * Zooming
   * Panning

python-wrapper/src/neo4j_viz/nvl.py

@@ -35,6 +35,7 @@ def render(
         render_options: RenderOptions,
         width: str,
         height: str,
+        show_hover_tooltip: bool,
     ) -> HTML:
         try:
             nodes_json = json.dumps([node.to_dict() for node in nodes])
@@ -46,19 +47,29 @@ def render(
             raise self.unsupported_field_type_error(e, "relationship")
 
         render_options_json = json.dumps(render_options.to_dict())
-
         container_id = str(uuid.uuid4())
+
+        if show_hover_tooltip:
+            hover_element = f"document.getElementById('{container_id}-tooltip')"
+            hover_div = f'<div id="{container_id}-tooltip" style="width: 20%; min-width: 100px; max-width: 600px; max-height: 80%; position: absolute; z-index: 2147483647; right: 0; bottom: 0; background: white; display: none; border: solid; border-color: #BBBEC3; border-width: 0.5px; padding: 0.8rem; border-radius: 8px; margin-bottom: 1rem; margin-right: 0.5rem; filter: drop-shadow(0 4px 8px rgba(26,27,29,0.12)); font-family: PublicSans; color: #4D5157; font-size: 14px"></div>'
+        else:
+            hover_element = "null"
+            hover_div = ""
+
         js_code = f"""
         var myNvl = new NVLBase.NVL(
             document.getElementById('{container_id}'),
+            {hover_element},
             {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;">
+            {hover_div}
+        </div>
         <script>
             {full_code}
         </script>

python-wrapper/src/neo4j_viz/resources/nvl_entrypoint/base.js

@@ -51,6 +51,7 @@ def render(
         max_zoom: float = 10,
         allow_dynamic_min_zoom: bool = True,
         max_allowed_nodes: int = 10_000,
+        show_hover_tooltip: bool = True,
     ) -> HTML:
         """
         Render the graph.
@@ -77,6 +78,8 @@ def render(
             Whether to allow dynamic minimum zoom level.
         max_allowed_nodes:
             The maximum allowed number of nodes to render.
+        show_hover_tooltip:
+            Whether to show an info tooltip when hovering over nodes and relationships.
         """
 
         num_nodes = len(self.nodes)
@@ -106,6 +109,7 @@ def render(
             render_options,
             width,
             height,
+            show_hover_tooltip,
         )
 
     def toggle_nodes_pinned(self, pinned: dict[NodeIdType, bool]) -> None: