Make hover tooltip optional

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

@@ -15,7 +15,7 @@ class PyNVL {
 
   constructor(
     frame: HTMLElement,
-    tooltip: HTMLElement,
+    tooltip: HTMLElement | null = null,
     nvlNodes: Node[] = [],
     nvlRels: Relationship[] = [],
     options: NvlOptions = {},
@@ -26,27 +26,30 @@ class PyNVL {
     this.zoomInteraction = new ZoomInteraction(this.nvl)
     this.panInteraction = new PanInteraction(this.nvl)
     this.dragNodeInteraction = new DragNodeInteraction(this.nvl)
-    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";
+    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}`)
         }
-      } 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,12 +47,19 @@ 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}'),
-            document.getElementById('{container_id}-tooltip'),
+            {hover_element},
             {nodes_json},
             {rels_json},
             {render_options_json},
@@ -60,7 +68,7 @@ def render(
         full_code = self.library_code + js_code
         html_output = f"""
         <div id="{container_id}" style="width: {width}; height: {height}; position: relative;">
-            <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>
+            {hover_div}
         </div>
         <script>
             {full_code}

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: