Adding a visualization for authorities. (#338)

* Adding a visualization for authorities.

* Fixing some lint.

* Fixing some lint.

lemur/static/app/angular/authorities/view/view.js

@@ -16,6 +16,161 @@ angular.module('lemur')
       });
   })
 
+  .directive('authorityVisualization', function () {
+    // constants
+    var margin = {top: 20, right: 120, bottom: 20, left: 120},
+    width = 960 - margin.right - margin.left,
+    height = 400 - margin.top - margin.bottom;
+
+    return {
+      restrict: 'E',
+      scope: {
+        val: '=',
+        grouped: '='
+      },
+      link: function (scope, element) {
+        function update(source) {
+
+          // Compute the new tree layout.
+          var nodes = tree.nodes(root).reverse(),
+            links = tree.links(nodes);
+
+          // Normalize for fixed-depth.
+          nodes.forEach(function(d) { d.y = d.depth * 180; });
+
+          // Update the nodes…
+          var node = svg.selectAll('g.node')
+            .data(nodes, function(d) { return d.id || (d.id = ++i); });
+
+          // Enter any new nodes at the parent's previous position.
+          var nodeEnter = node.enter().append('g')
+            .attr('class', 'node')
+            .attr('transform', function() { return 'translate(' + source.y0 + ',' + source.x0 + ')'; })
+            .on('click', click);
+
+          nodeEnter.append('circle')
+            .attr('r', 1e-6)
+            .style('fill', function(d) { return d._children ? 'lightsteelblue' : '#fff'; });
+
+          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; })
+            .style('fill-opacity', 1e-6);
+
+          // Transition nodes to their new position.
+          var nodeUpdate = node.transition()
+            .duration(duration)
+            .attr('transform', function(d) { return 'translate(' + d.y + ',' + d.x + ')'; });
+
+          nodeUpdate.select('circle')
+            .attr('r', 4.5)
+            .style('fill', function(d) { return d._children ? 'lightsteelblue' : '#fff'; });
+
+          nodeUpdate.select('text')
+            .style('fill-opacity', 1);
+
+          // Transition exiting nodes to the parent's new position.
+          var nodeExit = node.exit().transition()
+            .duration(duration)
+            .attr('transform', function() { return 'translate(' + source.y + ',' + source.x + ')'; })
+            .remove();
+
+          nodeExit.select('circle')
+            .attr('r', 1e-6);
+
+          nodeExit.select('text')
+            .style('fill-opacity', 1e-6);
+
+          // Update the links…
+          var link = svg.selectAll('path.link')
+            .data(links, function(d) { return d.target.id; });
+
+          // Enter any new links at the parent's previous position.
+          link.enter().insert('path', 'g')
+            .attr('class', 'link')
+            .attr('d', function() {
+              var o = {x: source.x0, y: source.y0};
+              return diagonal({source: o, target: o});
+            });
+
+          // Transition links to their new position.
+          link.transition()
+            .duration(duration)
+            .attr('d', diagonal);
+
+          // Transition exiting nodes to the parent's new position.
+          link.exit().transition()
+            .duration(duration)
+            .attr('d', function() {
+              var o = {x: source.x, y: source.y};
+              return diagonal({source: o, target: o});
+            })
+            .remove();
+
+          // Stash the old positions for transition.
+          nodes.forEach(function(d) {
+            d.x0 = d.x;
+            d.y0 = d.y;
+          });
+        }
+
+        // Toggle children on click.
+        function click(d) {
+          if (d.children) {
+            d._children = d.children;
+            d.children = null;
+          } else {
+            d.children = d._children;
+            d._children = null;
+          }
+          update(d);
+        }
+
+        var i = 0,
+            duration = 750,
+            root;
+
+        var tree = d3.layout.tree()
+            .size([height, width]);
+
+        var diagonal = d3.svg.diagonal()
+            .projection(function(d) { return [d.y, d.x]; });
+
+        var svg = d3.select(element[0]).append('svg')
+            .attr('width', width + margin.right + margin.left)
+            .attr('height', height + margin.top + margin.bottom)
+            .call(d3.behavior.zoom().on('zoom', function () {
+              svg.attr('transform', 'translate(' + d3.event.translate + ')' + ' scale(' + d3.event.scale + ')');
+            }))
+            .append('g')
+            .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+        scope.val.customGET('visualize').then(function (result) {
+          root = result;
+          root.x0 = height / 2;
+          root.y0 = 0;
+
+          function collapse(d) {
+            if (d.children) {
+              d._children = d.children;
+              d._children.forEach(collapse);
+              d.children = null;
+            }
+          }
+
+          root.children.forEach(collapse);
+          update(root);
+
+        });
+
+        d3.select(self.frameElement).style('height', '800px');
+
+      }
+    };
+  })
+
   .controller('AuthoritiesViewController', function ($scope, $q, $uibModal, $stateParams, AuthorityApi, AuthorityService, MomentService, ngTableParams, toaster) {
     $scope.filter = $stateParams;
     $scope.authoritiesTable = new ngTableParams({

lemur/static/app/angular/authorities/view/view.tpl.html

@@ -109,6 +109,14 @@
                                     </uib-tab-heading>
                                     <pre style="width: 100%">{{ authority.authorityCertificate.body }}</pre>
                                 </uib-tab>
+                                <uib-tab>
+                                    <uib-tab-heading>
+                                        Visualization
+                                    </uib-tab-heading>
+                                    <pre style="width: 100%">
+                                        <authority-visualization val="authority"></authority-visualization>
+                                    </pre>
+                                </uib-tab>
                             </uib-tabset>
                         </td>
                     </tr>

lemur/static/app/styles/lemur.css

@@ -178,3 +178,23 @@ a {
     line-height: 1;
 }
 
+.node {
+  cursor: pointer;
+}
+
+.node circle {
+  fill: #fff;
+  stroke: steelblue;
+  stroke-width: 1.5px;
+}
+
+.node text {
+  font: 10px sans-serif;
+}
+
+.link {
+  fill: none;
+  stroke: #ccc;
+  stroke-width: 1.5px;
+}
+