add node popover feature

Author: Renaud Pawlak

components/bubbletree/arnd_bubbletree.ts

@@ -91,6 +91,10 @@ interface BubbleTreeConfiguration<D extends Data> {
      * On built callback.
      */
     onBuilt?: (bubbleTree: BubbleTree<D>) => any;
+    /**
+     * A function to create a popover on a node. It can return undefined when no popover needs to be shown.
+     */
+    nodePopover?: (node: d3.pack.Node<D>) => { title?: string, content: string };
 }
 
 /**
@@ -147,6 +151,16 @@ class BubbleTree<D extends Data> {
             .style("stroke", "#B0B0B0")
             .style("fill", d => this.nodeColor(d));
 
+        if (this.config.nodePopover != null) {
+            this.circle
+                .classed("popover-node", true)
+                .attr("data-content", d => this.config.nodePopover(d).content)
+                .attr("data-original-title", d => this.config.nodePopover(d).title)
+                .attr("rel", "popover")
+                .attr("data-trigger", "hover");
+            (<any>$('.popover-node')).popover();
+        }
+
         let handlers = {
             "click": (d: d3.pack.Node<D>) => {
                 if (!d.children) {

dist/visualization-components-bundle.d.ts

@@ -75,6 +75,13 @@ interface BubbleTreeConfiguration<D extends Data> {
      * On built callback.
      */
     onBuilt?: (bubbleTree: BubbleTree<D>) => any;
+    /**
+     * A function to create a popover on a node. It can return undefined when no popover needs to be shown.
+     */
+    nodePopover?: (node: d3.pack.Node<D>) => {
+        title?: string;
+        content: string;
+    };
 }
 /**
  * An interactive D3.js component to render trees as an SVG flat bubble tree.

dist/visualization-components-bundle.js

@@ -31,6 +31,19 @@
 <div id="list" style="max-height:300px;overflow-y:scroll">
 </div>
 
+<nav>
+  <div class="nav nav-tabs" id="nav-tab" role="tablist">
+    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
+    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
+    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
+  </div>
+</nav>
+<div class="tab-content" id="nav-tabContent">
+  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">ABC</div>
+  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">DEF</div>
+  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">GFHI</div>
+</div>
+
 <script src="../lib/d3.v4.min.js"></script>
 <script src="../lib/jquery-1.12.4.js"></script>
 <script src="../lib/bootstrap.bundle.min.js"></script>
@@ -137,7 +150,10 @@
             "dblclick": function(d) { console.info("dblclick"); }
         },
         selectOnClick: true,
-        showRoot: true
+        showRoot: true,
+        nodePopover: function(d) {
+        	return { title: "Node", content: d.data.name };
+        }
     });
 
     var t = new Table();