Merge pull request #253 from neo4j/tooltip-truncated

Truncate long property values in tooltip

Author: FlorentinD

changelog.md

@@ -13,4 +13,6 @@
 
 ## Improvements
 
+- Truncate large property values in the rendered output.
+
 ## Other changes

js-applet/src/index.ts

@@ -38,6 +38,14 @@ class PyNVL {
     if (tooltip !== null) {
       this.hoverInteraction = new HoverInteraction(this.nvl)
 
+      const truncateValue = (value: any, maxLength: number = 100): string => {
+        const strValue = String(value);
+        if (strValue.length <= maxLength) {
+          return strValue;
+        }
+        return `<span class="tooltip-value">${strValue}</span>`;
+      };
+
       this.hoverInteraction.updateCallback('onHover', (element: PyNode | PyRel) => {
         if (element === undefined) {
           tooltip.textContent = "";
@@ -49,7 +57,7 @@ class PyNVL {
 
           let hoverInfo: string = (`<b>Source ID:</b> ${rel.from} </br><b>Target ID:</b> ${rel.to}`)
           for (const [key, value] of Object.entries(element.properties)) {
-            hoverInfo += `</br><b>${key}:</b> ${value}`
+            hoverInfo += `</br><b>${key}:</b> ${truncateValue(value)}`
           }
           tooltip.setHTMLUnsafe(hoverInfo)
 
@@ -59,7 +67,7 @@ class PyNVL {
         } else if ("id" in element) {
           let hoverInfo: string = `<b>ID:</b> ${element.id}`
           for (const [key, value] of Object.entries(element.properties)) {
-            hoverInfo += `</br><b>${key}:</b> ${value}`
+            hoverInfo += `</br><b>${key}:</b> ${truncateValue(value)}`
           }
           tooltip.setHTMLUnsafe(hoverInfo)
 

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

@@ -49,5 +49,17 @@ button.icon:active {
   filter: drop-shadow(0 4px 8px rgba(26,27,29,0.12));
   font-family: 'Public Sans', sans-serif;
   color: var(--neutral-text-default);
-  font-size: 14px
+  font-size: 14px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.tooltip-value {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }