nitweb/angular: show entities graph

Signed-off-by: Alexandre Terrasa <alexandre@moz-code.org>

diff --git a/share/nitweb/javascripts/entities.js b/share/nitweb/javascripts/entities.js
index 9eefc9f..545bf08 100644 (file)
--- a/share/nitweb/javascripts/entities.js
+++ b/share/nitweb/javascripts/entities.js
@@ -16,9 +16,9 @@
 
 (function() {
        angular
-               .module('entities', ['ui', 'model'])
+               .module('entities', ['ngSanitize', 'ui', 'model'])
 
-               .controller('EntityCtrl', ['Model', '$routeParams', '$scope', function(Model, $routeParams, $scope) {
+               .controller('EntityCtrl', ['Model', '$routeParams', '$scope', '$sce', function(Model, $routeParams, $scope, $sce) {
                        this.loadEntityLinearization = function() {
                                Model.loadEntityLinearization($routeParams.id,
                                        function(data) {
@@ -46,6 +46,15 @@
                                        });
                        };
 
+                       this.loadEntityGraph = function(e) {
+                               Model.loadEntityGraph($routeParams.id,
+                                       function(data) {
+                                               $scope.graph = $sce.trustAsHtml(data);
+                                       }, function(err) {
+                                               $scope.error = err;
+                                       });
+                       };
+
                        Model.loadEntity($routeParams.id,
                                function(data) {
                                        $scope.mentity = data;

diff --git a/share/nitweb/javascripts/model.js b/share/nitweb/javascripts/model.js
index 2144983..8812a7a 100644 (file)
--- a/share/nitweb/javascripts/model.js
+++ b/share/nitweb/javascripts/model.js
@@ -47,6 +47,12 @@
                                                .error(cbErr);
                                },
 
+                               loadEntityGraph: function(id, cb, cbErr) {
+                                       $http.get(apiUrl + '/graph/inheritance/' + id + '?cdepth=3')
+                                               .success(cb)
+                                               .error(cbErr);
+                               },
+
                                search: function(q, n, cb, cbErr) {
                                        $http.get(apiUrl + '/search?q=' + q + '&n=' + n)
                                                .success(cb)

diff --git a/share/nitweb/views/class.html b/share/nitweb/views/class.html
index 4950546..33c9fad 100644 (file)
--- a/share/nitweb/views/class.html
+++ b/share/nitweb/views/class.html
@@ -11,6 +11,11 @@
                        </a>
                </li>
                <li role='presentation'>
+                       <a data-toggle='tab' data-target='#graph' ng-click="entityCtrl.loadEntityGraph()">
+                               <span class='glyphicon glyphicon-object-align-vertical'/> Inheritance
+                       </a>
+               </li>
+               <li role='presentation'>
                        <a data-toggle='tab' data-target='#all_props'>
                                <span class='glyphicon glyphicon-tags'/> All properties
                        </a>
@@ -52,5 +57,12 @@
                                list-entities='linearization'
                                list-focus='mentity.intro' />
                </div>
+               <div role='tabpanel' class='tab-pane fade' id='graph'>
+                       <div class='card'>
+                               <div class='card-body text-center'>
+                                       <div class='graph' ng-bind-html='graph'></div>
+                               </div>
+                       </div>
+               </div>
        </div>
 </div>

diff --git a/share/nitweb/views/group.html b/share/nitweb/views/group.html
index ca19974..53a1d2d 100644 (file)
--- a/share/nitweb/views/group.html
+++ b/share/nitweb/views/group.html
@@ -1,29 +1,40 @@
 <div class='container-fluid'>
-               <div class='page-header'>
-                       <h2><entity-signature mentity='mentity' /></h2>
-                       <entity-link mentity='mentity.mpackage' /> :: {{mentity.name}}
-               </div>
+       <div class='page-header'>
+               <h2><entity-signature mentity='mentity' /></h2>
+               <entity-link mentity='mentity.mpackage' /> :: {{mentity.name}}
+       </div>
 
-               <ul class='nav nav-tabs'>
-                       <li class='active'>
-                               <a data-toggle='tab' data-target='#doc'>
-                                       <span class='glyphicon glyphicon-book'/> Doc
-                               </a>
-                       </li>
-               </ul>
+       <ul class='nav nav-tabs'>
+               <li class='active'>
+                       <a data-toggle='tab' data-target='#doc'>
+                               <span class='glyphicon glyphicon-book'/> Doc
+                       </a>
+               </li>
+               <li role='presentation'>
+                       <a data-toggle='tab' data-target='#graph' ng-click="entityCtrl.loadEntityGraph()">
+                               <span class='glyphicon glyphicon-object-align-vertical'/> Imports
+                       </a>
+               </li>
+       </ul>
 
-               <div class='tab-content'>
-                       <div class='tab-pane fade in active' id='doc'>
-                               <entity-doc mentity='mentity'/>
+       <div class='tab-content'>
+               <div role='tabpanel' class='tab-pane fade in active' id='doc'>
+                       <entity-doc mentity='mentity'/>
 
-                               <entity-list list-title='Parent group' list-entities='[mentity.parent]'
-                                       list-object-filter='{}' ng-if='mentity.parent' />
+                       <entity-list list-title='Parent group' list-entities='[mentity.parent]'
+                               list-object-filter='{}' ng-if='mentity.parent' />
 
-                               <entity-list list-title='Subgroups' list-entities='mentity.mgroups'
-                                       list-object-filter='{}' />
+                       <entity-list list-title='Subgroups' list-entities='mentity.mgroups'
+                               list-object-filter='{}' />
 
-                               <entity-list list-title='Modules' list-entities='mentity.mmodules'
-                                       list-object-filter='{}' />
+                       <entity-list list-title='Modules' list-entities='mentity.mmodules'
+                               list-object-filter='{}' />
+               </div>
+               <div role='tabpanel' class='tab-pane fade' id='graph'>
+                       <div class='card'>
+                               <div class='card-body text-center'>
+                                       <div class='graph' ng-bind-html='graph'></div>
+                               </div>
                        </div>
                </div>
        </div>

diff --git a/share/nitweb/views/module.html b/share/nitweb/views/module.html
index 9a15c76..ec33908 100644 (file)
--- a/share/nitweb/views/module.html
+++ b/share/nitweb/views/module.html
@@ -11,6 +11,11 @@
                        </a>
                </li>
                <li role='presentation'>
+                       <a data-toggle='tab' data-target='#graph' ng-click="entityCtrl.loadEntityGraph()">
+                               <span class='glyphicon glyphicon-object-align-vertical'/> Imports
+                       </a>
+               </li>
+               <li role='presentation'>
                        <a data-toggle='tab' data-target='#code' ng-click="entityCtrl.loadEntityCode()">
                                <span class='glyphicon glyphicon-console'/> Code
                        </a>
@@ -36,7 +41,7 @@
                                list-object-filter='{}' />
 
                </div>
-               <div class='tab-pane fade' id='code'>
+               <div role='tabpanel' class='tab-pane fade' id='code'>
                        <div class='card'>
                                <div class='card-body'>
                                        <pre ng-bind-html='code' />
@@ -48,5 +53,12 @@
                        <entity-list list-title='Class definitions' list-entities='defs'
                                list-object-filter='{}' />
                </div>
+               <div class='tab-pane fade' id='graph'>
+                       <div class='card'>
+                               <div class='card-body text-center'>
+                                       <div class='graph' ng-bind-html='graph'></div>
+                               </div>
+                       </div>
+               </div>
        </div>
 </div>

diff --git a/share/nitweb/views/package.html b/share/nitweb/views/package.html
index ee19aa5..544c56d 100644 (file)
--- a/share/nitweb/views/package.html
+++ b/share/nitweb/views/package.html
@@ -9,6 +9,11 @@
                                <span class='glyphicon glyphicon-book'/> Doc
                        </a>
                </li>
+               <li role='presentation'>
+                       <a data-toggle='tab' data-target='#graph' ng-click="entityCtrl.loadEntityGraph()">
+                               <span class='glyphicon glyphicon-object-align-vertical'/> Dependencies
+                       </a>
+               </li>
        </ul>
 
        <div class='tab-content'>
@@ -18,5 +23,12 @@
                        <entity-list list-title='Groups' list-entities='mentity.mgroups'
                                list-object-filter='{}' />
                </div>
+               <div role='tabpanel' class='tab-pane fade' id='graph'>
+                       <div class='card'>
+                               <div class='card-body text-center'>
+                                       <div class='graph' ng-bind-html='graph'></div>
+                               </div>
+                       </div>
+               </div>
        </div>
 </div>