From be5dff8472261f0a7950e0f2e6b129b4ecce809f Mon Sep 17 00:00:00 2001 From: kevgliss Date: Mon, 30 May 2016 21:52:34 -0700 Subject: [PATCH] Adding a visualization for authorities. (#338) * Adding a visualization for authorities. * Fixing some lint. * Fixing some lint. --- .jshintrc | 4 +- bower.json | 3 +- lemur/authorities/views.py | 25 +++ .../app/angular/authorities/view/view.js | 155 ++++++++++++++++++ .../angular/authorities/view/view.tpl.html | 8 + lemur/static/app/styles/lemur.css | 20 +++ 6 files changed, 213 insertions(+), 2 deletions(-) diff --git a/.jshintrc b/.jshintrc index c40849ed..5962a012 100644 --- a/.jshintrc +++ b/.jshintrc @@ -8,7 +8,7 @@ "eqeqeq": true, "immed": true, "indent": 2, - "latedef": true, + "latedef": false, "newcap": false, "noarg": true, "quotmark": "single", @@ -22,6 +22,8 @@ "angular": false, "moment": false, "toaster": false, + "d3": false, + "self": false, "_": false } } diff --git a/bower.json b/bower.json index ed1b02f4..7a76915f 100644 --- a/bower.json +++ b/bower.json @@ -39,7 +39,8 @@ "angular-ui-switch": "~0.1.0", "angular-sanitize": "^1.5.0", "angular-file-saver": "~1.0.1", - "angular-ui-select": "~0.17.1" + "angular-ui-select": "~0.17.1", + "d3": "^3.5.17" }, "resolutions": { "moment": ">=2.8.0 <2.11.0", diff --git a/lemur/authorities/views.py b/lemur/authorities/views.py index 921feec8..e5eaedf1 100644 --- a/lemur/authorities/views.py +++ b/lemur/authorities/views.py @@ -335,6 +335,31 @@ class CertificateAuthority(AuthenticatedResource): return cert.authority + +class AuthorityVisualizations(AuthenticatedResource): + def get(self, authority_id): + """ + {"name": "flare", + "children": [ + { + "name": "analytics", + "children": [ + { + "name": "cluster", + "children": [ + {"name": "AgglomerativeCluster", "size": 3938}, + {"name": "CommunityStructure", "size": 3812}, + {"name": "HierarchicalCluster", "size": 6714}, + {"name": "MergeEdge", "size": 743} + ] + } + } + ]} + """ + authority = service.get(authority_id) + return dict(name=authority.name, children=[{"name": c.name} for c in authority.certificates]) + api.add_resource(AuthoritiesList, '/authorities', endpoint='authorities') api.add_resource(Authorities, '/authorities/', endpoint='authority') +api.add_resource(AuthorityVisualizations, '/authorities//visualize', endpoint='authority_visualizations') api.add_resource(CertificateAuthority, '/certificates//authority', endpoint='certificateAuthority') diff --git a/lemur/static/app/angular/authorities/view/view.js b/lemur/static/app/angular/authorities/view/view.js index 1a2c9357..24de86a8 100644 --- a/lemur/static/app/angular/authorities/view/view.js +++ b/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({ diff --git a/lemur/static/app/angular/authorities/view/view.tpl.html b/lemur/static/app/angular/authorities/view/view.tpl.html index a4b4cd30..75365b84 100644 --- a/lemur/static/app/angular/authorities/view/view.tpl.html +++ b/lemur/static/app/angular/authorities/view/view.tpl.html @@ -109,6 +109,14 @@ 
{{ authority.authorityCertificate.body }}
+ + + Visualization + + 
+                                        
+
+ diff --git a/lemur/static/app/styles/lemur.css b/lemur/static/app/styles/lemur.css index adc1de65..5f591fae 100644 --- a/lemur/static/app/styles/lemur.css +++ b/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; +} +