Hovering over nodes will zoom their text and show a tooltip

Author: nikitaeverywhere

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iknow-entity-browser",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "Visualizer for iKnow entities",
   "main": "gulpfile.babel.js",
   "scripts": {

src/static/js/graph/index.js

@@ -281,6 +281,16 @@ export function update (g = lastGraph, reset = false) {
         .attr("dy", ".3em")
         .attr("style", d => `font-size:${ Math.round(d.radius / 2) }px`)
         .text(d => d.label);
+
+    nodeEnter.each(function (d) {
+        if (d.type !== "folder")
+            return;
+        d3.select(this).append("text")
+            .classed("tooltip", () => true)
+            .attr("dy", "-0.7em")
+            .attr("style", d => `font-size:${ Math.round(d.radius / 2) }px`)
+            .text(d => `Double-click to display more`);
+    });
     node = nodeEnter.merge(node);
 
     if (reset)

src/static/js/model/index.js

@@ -80,7 +80,7 @@ function toTree (graph, parent) {
         );
     } catch (e) {
         console.error(`Error! Most likely, one of the graph nodes does not has any entities.`
-            + ` The folding criteria displayed on the diagram would be random.`);
+            + ` The folding criteria displayed on the diagram will be random.`);
     }
 
     return parent;

src/static/scss/graph.scss

@@ -53,6 +53,22 @@
                 text-anchor: middle;
                 pointer-events: none;
                 fill: black;
+                transition: transform .3s ease, opacity .3s ease;
+            }
+
+            &:hover text {
+                transform: scale(2);
+            }
+
+            .tooltip {
+                visibility: hidden;
+                opacity: 0;
+                fill: gray;
+            }
+
+            &:hover .tooltip {
+                visibility: visible;
+                opacity: 1;
             }
 
             &.highlighted circle {