feat(projects): Add tooltip for name to code.

- Basic tooltip displayed for project codes across all
  pages that display them.
- Additions for Facets.

Closes #664

app/index.html

@@ -139,7 +139,7 @@
 <script src="libs/angular-cache/dist/angular-cache.js"></script>
 <script src="libs/angular-animate/angular-animate.js"></script>
 <script src="libs/angular-ui-router/release/angular-ui-router.js"></script>
-<script src="libs/angular-ui-bootstrap-bower/ui-bootstrap-tpls.js"></script>
+<script src="libs/angular-bootstrap/ui-bootstrap-tpls.js"></script>
 <script src="libs/restangular/dist/restangular.js"></script>
 <script src="libs/angular-gettext/dist/angular-gettext.js"></script>
 <script src="libs/angular-aria/angular-aria.js"></script>

app/scripts/annotations/annotations.table.model.ts

@@ -35,13 +35,12 @@ module ngApp.projects.models {
         {
             displayName: "Project",
             id: "project.project_id",
-            sref: function (field, row) {
-                var project = _.find(row, (a) => {
-                    return a.id === "project";
-                });
-                return {
-                    state: "/projects/" + project.val.project_id
-                };
+            compile: function ($scope) {
+                var project = _.result(_.findWhere($scope.row, {'id': 'project'}), 'val');
+                var htm = '<a data-ng-href="/projects/' + project.project_id + '" data-tooltip="' +
+                          project.name + '" tooltip-append-to-body="true" tooltip-placement="right">' +
+                          project.project_id + '</a>';
+                return htm;
             },
             sortable: true
         },

app/scripts/app.ts

@@ -28,6 +28,7 @@ import IRootScope = ngApp.IRootScope;
 import IGDCConfig = ngApp.IGDCConfig;
 import INotifyService = ng.cgNotify.INotifyService;
 import IUserService = ngApp.components.user.services.IUserService;
+import IProjectsService = ngApp.projects.services.IProjectsService;
 
 /* @ngInject */
 function appConfig($urlRouterProvider: ng.ui.IUrlRouterProvider,
@@ -48,7 +49,8 @@ function appRun(gettextCatalog: any, Restangular: restangular.IProvider,
                 $state: ng.ui.IStateService, CoreService: ICoreService,
                 $rootScope: IRootScope, config: IGDCConfig, notify: INotifyService,
                 $cookies: ng.cookies.ICookiesService,
-                UserService: IUserService) {
+                UserService: IUserService,
+                ProjectsService: IProjectsService) {
   gettextCatalog.debug = true;
 
   $rootScope.config = config;
@@ -77,6 +79,17 @@ function appRun(gettextCatalog: any, Restangular: restangular.IProvider,
 
   UserService.login();
 
+  ProjectsService.getProjects({
+    size: 100
+  })
+  .then((data) => {
+    var mapping = {};
+    _.each(data.hits, (project) => {
+      mapping[project.project_id] = project.name;
+    });
+    ProjectsService.projectIdMapping = mapping;
+  });
+
   $rootScope.$on("$stateChangeStart", () => {
     // Page change
     //CoreService.setLoadedState(false);

app/scripts/components/facets/facets.directives.ts

@@ -1,10 +1,11 @@
 module ngApp.components.facets.directives {
   import IFacet = ngApp.models.IFacet;
+  import IProjectsService = ngApp.projects.services.IProjectsService;
   import IFacetScope = ngApp.components.facets.models.IFacetScope;
   import ITermsController = ngApp.components.facets.controllers.ITermsController;
 
   /* @ngInject */
-  function Terms(): ng.IDirective {
+  function Terms(ProjectsService: IProjectsService): ng.IDirective {
     return {
       restrict: "E",
       scope: {
@@ -19,6 +20,8 @@ module ngApp.components.facets.directives {
       templateUrl: "components/facets/templates/facet.html",
       controller: "termsCtrl as tc",
       link: ($scope: IFacetScope, elem: ng.IAugmentedJQuery, attr: ng.IAttributes, ctrl: ITermsController) => {
+        $scope.ProjectsService = ProjectsService;
+
         $scope.add = (facet: string, term: string, event: any) => {
           if (event.which === 13) {
             elem.closest(".list-group").focus();

app/scripts/components/facets/templates/facet.html

@@ -16,8 +16,11 @@
             data-ng-keypress="remove(tc.name, term.key, $event)"
             class="facet-term-label">
         <i class="fa fa-check-square-o" aria-controls="data-table" aria-checked="false"></i>
-        <span data-ng-if="tc.name.indexOf('project_id') !== -1">{{ ::term.key.toUpperCase() }}</span>
-        <span data-ng-if="tc.name.indexOf('project_id') == -1">{{ ::term.key | translate | humanify: true:true }}</span>
+        <span data-ng-if="tc.name.indexOf('project_id') !== -1"
+              data-tooltip="{{ ProjectsService.projectIdMapping[term.key] }}"
+              data-tooltip-append-to-body="true"
+              data-tooltip-placement="right">{{ ::term.key.toUpperCase() }}</span>
+        <span data-ng-if="tc.name.indexOf('project_id') === -1">{{ ::term.key | translate | humanify: true:true }}</span>
       </span>
       <span class="label label-primary pull-right">{{ term.doc_count | number:0}}</span>
     </p>
@@ -29,8 +32,11 @@
             data-ng-keypress="add(tc.name, term.key, $event)"
             class="facet-term-label">
         <i class="fa fa-square-o" aria-controls="data-table" aria-checked="false"></i>
-        <span data-ng-if="tc.name.indexOf('project_id') !== -1">{{ ::term.key.toUpperCase() }}</span>
-        <span data-ng-if="tc.name.indexOf('project_id') == -1">{{ ::term.key | translate | humanify: true:true }}</span>
+        <span data-ng-if="tc.name.indexOf('project_id') !== -1"
+              data-tooltip="{{ ProjectsService.projectIdMapping[term.key] }}"
+              data-tooltip-append-to-body="true"
+              data-tooltip-placement="right">{{ ::term.key.toUpperCase() }}</span>
+        <span data-ng-if="tc.name.indexOf('project_id') === -1">{{ ::term.key | translate | humanify: true:true }}</span>
       </span>
       <span class="label label-primary pull-right">{{ term.doc_count | number:0}}</span>
     </p>

app/scripts/components/tables/templates/tableicious.html

@@ -32,14 +32,13 @@
         <tr data-ng-repeat="datum in dataAsKeyValuePairs track by $index">
             <td ng-if="!heading.hidden && getHeadingEnabled(heading, this)"
                 data-ng-repeat="heading in expandedHeadings | orderBy:getColumnIndex:heading"
-                class="{{getFieldClass(field,datum,this,heading)}}"
-                >
+                class="{{getFieldClass(field,datum,this,heading)}}">
 
                 <div ng-if='::heading.compile' tableicious-cell >
 
                 </div>
 
-              <a data-ng-if="heading.sref && getSref(heading,getDataAtRow(heading, $parent.$index), $parent.datum, this, $filter) !== '--'"
+                <a data-ng-if="heading.sref && getSref(heading,getDataAtRow(heading, $parent.$index), $parent.datum, this, $filter) !== '--'"
                    data-ng-href="{{getSref(heading,getDataAtRow(heading, $parent.$index), $parent.datum, this, $filter)}}">
                     {{getTemplate(heading,getDataAtRow(heading, $parent.$index),$parent.datum,this, $filter)}}
                 </a>
@@ -48,7 +47,7 @@
                     {{getTemplate(heading,getDataAtRow(heading, $parent.$index),$parent.datum,this, $filter)}}
                 </span>
 
-                <span ng-if="!heading.sref">
+                <span ng-if="!heading.sref && !heading.compile">
                     {{getTemplate(heading,getDataAtRow(heading, $parent.$index),$parent.datum,this, $filter)}}
                 </span>
 

app/scripts/projects/projects.table.model.ts

@@ -37,11 +37,12 @@ module ngApp.projects.models {
         displayName: "ID",
         id: "project_id",
         enabled: true,
-        sref: function (field, scope) {
-          var project_id = _.result(_.findWhere(scope, {'id': 'project_id'}), 'val');
-          return {
-            state: "/projects/" + project_id
-          };
+        compile: function ($scope) {
+          var project_id = _.result(_.findWhere($scope.row, {'id': 'project_id'}), 'val');
+          var projectName = _.result(_.findWhere($scope.row, {'id': 'name'}), 'val');
+          var htm = '<a data-ng-href="/projects/' + project_id + '" data-tooltip="' + projectName +
+                    '" tooltip-append-to-body="true" tooltip-placement="right">' + project_id + '</a>';
+          return htm;
         }
       }, {
         displayName: "Disease Type",
@@ -322,7 +323,8 @@ module ngApp.projects.models {
       "disease_type",
       "state",
       "primary_site",
-      "project_id"
+      "project_id",
+      "name"
     ],
     expand: [
       "summary",

app/scripts/search/search.files.table.model.ts

@@ -36,7 +36,7 @@ module ngApp.search.models {
         displayName: "add_to_cart",
         id: "add_to_cart",
         compile: function ($scope) {
-          $scope.arrayRow = arrayToObject($scope.row); // TODO: the file being passed here is wrong how to fix?
+          $scope.arrayRow = arrayToObject($scope.row);
           var htm = '<div add-to-cart-single file="arrayRow"></div>';
           return htm;
         },
@@ -50,10 +50,9 @@ module ngApp.search.models {
         displayName: "download",
         id: "download",
         compile: function ($scope) {
-          $scope.file = arrayToObject($scope.row); // TODO: the file being passed here is wrong how to fix?
+          $scope.file = arrayToObject($scope.row);
           var htm = '<a class="btn btn-primary" download-button files=file>' +
-//          var htm = '<a class="btn btn-primary" download-button data-ng-href="{{ [file.file_id].concat(file.related_ids || []) | makeDownloadLink }}">' +
-              '<i class="fa fa-download"></i></a>';
+                    '<i class="fa fa-download"></i></a>';
           return htm;
         },
         noTitle: true,
@@ -159,16 +158,16 @@ module ngApp.search.models {
             }
           }
         },
-        sref: function (field: TableiciousEntryDefinition, row: TableiciousEntryDefinition[], scope) {
-          var participants: TableiciousEntryDefinition = _.find(row, function (a: TableiciousEntryDefinition) {
-            return a.id === 'participants'
-          });
-          if (participants.val.length === 1) {
-            return {
-              state: "/projects/" + participants.val[0].project.project_id
-            };
+        compile: function ($scope) {
+          var participants = _.result(_.findWhere($scope.row, {'id': 'participants'}), 'val'),
+              href, projectNames, projectVal;
+
+          if (participants.length === 1) {
+            href = "/projects/" + participants[0].project.project_id;
+            projectNames = participants[0].project.name;
+            projectVal = participants[0].project.project_id;
           } else if (participants.val.length > 1) {
-            var projects = _.map(participants.val, (participant: TableicousEntryDefinition) => {
+            var projects = _.map(participants, (participant: TableicousEntryDefinition) => {
               return {
                 project_id: participant.project.project_id
               };
@@ -179,17 +178,23 @@ module ngApp.search.models {
             }));
 
             if (projectId.length === 1) {
-              return {
-                state: "/projects/" + projects[0].project_id
-              };
-            }
+              href = "/projects/" + participants[0].project.project_id;
+              projectNames = participants[0].project.name;
+              projectVal = participants[0].project.project_id;
+            } else {
+              var filters = $filter("makeFilter")([{name: "project_id", value: projectId}]);
 
-            var filters = $filter("makeFilter")([{name: "project_id", value: projectId}]);
-            return {
-              state: "/projects/t",
-              filters: filters
-            };
+              projectNames = _.map(participants, (participant: TableicousEntryDefinition) => {
+                return participant.project.name;
+              }).join("<br />");
+              projectVal = projectId.length;
+              href = "/projects/t?filters=" + angular.fromJson(filters);
+            }
           }
+
+          var htm = '<a data-ng-href="' + href + '" data-tooltip="' + projectNames +
+                    '" tooltip-append-to-body="true" tooltip-placement="right">' + projectVal + '</a>';
+          return htm;
         },
         sortable: true
       }, {

app/scripts/search/search.participants.table.model.ts

@@ -97,14 +97,12 @@ module ngApp.search.models {
             id: "project.project_id",
             enabled: true,
             sortable: true,
-            sref: function(field, row, scope, $filter) {
-                var project = _.find(row, (item) => {
-                    return item.id === "project";
-                });
-
-                return {
-                    state: "/projects/" + project.val.project_id
-                };
+            compile: function ($scope) {
+              var project = _.result(_.findWhere($scope.row, {'id': 'project'}), 'val');
+              var htm = '<a data-ng-href="/projects/' + project.project_id + '" data-tooltip="' +
+                        project.name + '" tooltip-append-to-body="true" tooltip-placement="right">' +
+                        project.project_id + '</a>';
+              return htm;
             }
         }, {
             displayName: "Primary Site",

app/styles/app.less

@@ -1,23 +1,21 @@
 @import "../../bower_components/bootstrap/less/bootstrap.less";
-  @import "theme.less";
+@import "theme.less";
 @icon-font-path: "../../libs/bootstrap/dist/fonts/";
-//
-//// angular-ui-bootstrap fix
-  @import "colours.less";
+
+@import "colours.less";
 @import "globals.less";
-  @import "utils.less";
 @import "cart.less";
-  @import "entities.less";
-//  @import "files.less";
+@import "utils.less";
+@import "entities.less";
 @import "header.less";
 @import "footer.less";
-//  @import "search.less";
 @import "facets.less";
 @import "tables.less";
 @import "pagination.less";
 @import "dnd.less";
-  @import "../scripts/components/styles.less";
-//
+@import "tooltip.less";
+@import "../scripts/components/styles.less";
+
 html, body {
   margin: 0;
   padding: 0;