From 84bfde677d4c2f98b05e00f5c03fb811cc002d68 Mon Sep 17 00:00:00 2001
From: j <j@mailb.org>
Date: Thu, 9 Aug 2018 18:00:29 +0100
Subject: [PATCH] add links to tree

---
 static/ontology/index.js | 30 ++++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/static/ontology/index.js b/static/ontology/index.js
index 5ee5a9d..68caac5 100644
--- a/static/ontology/index.js
+++ b/static/ontology/index.js
@@ -13,7 +13,7 @@ var diagonal = d3.svg.diagonal()
     .projection(function(d) { return [d.y, d.x]; });
 
 var svg = d3.select("body").append("svg")
-    .attr("width", width + margin.right + margin.left)
+    .attr("width", "100%")
     .attr("height", height + margin.top + margin.bottom)
   .append("g")
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
@@ -42,6 +42,16 @@ d3.json("sized_ontology.json", function(error, flare) {
 
 d3.select(self.frameElement).style("height", "800px");
 
+
+function get_color(d) {
+  if (d.children || d._children) {
+      return '#fff'
+  }
+  if (d.size == 1) {
+    return "gray";
+  }
+  return "lightsteelblue";
+}
 function update(source) {
 
   // Compute the new tree layout.
@@ -63,15 +73,22 @@ function update(source) {
 
   nodeEnter.append("circle")
       .attr("r", 1e-6)
-      .style("fill", function(d) { return d.children || d._children ? "#fff": "lightsteelblue"; });
+      .on("click", click)
+      .style("fill", get_color)
 
   nodeEnter.append("text")
       .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
       .attr("dy", ".35em")
       .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
-      .text(function(d) { return d.name; })
+      .text(function(d) {
+          if (d.children || d._children || d.size == 1) {
+              return d.name;
+          }
+          return d.name + ' (' + d.size + ')';
+      })
       .style("fill-opacity", 1e-6);
 
+
   // Transition nodes to their new position.
   var nodeUpdate = node.transition()
       .duration(duration)
@@ -79,7 +96,7 @@ function update(source) {
 
   nodeUpdate.select("circle")
       .attr("r", 4.5)
-      .style("fill", function(d) { return d.children || d._children ? "#fff": "lightsteelblue"; });
+      .style("fill", get_color)
 
   nodeUpdate.select("text")
       .style("fill-opacity", 1);
@@ -138,5 +155,10 @@ function click(d) {
     d.children = d._children;
     d._children = null;
   }
+  if (!d.children && ! d._children && d.size > 1) {
+    var name = d.parent.name + ': ' + d.name
+    document.location.href = '/clip/created/keywords=' + name
+  }
   update(d);
 }
+