feat(app): 2066 tooltips

Closes #2066
NCI-GDC · Apr 26, 2016 · 475725b · 475725b
1 parent 05d4462
commit 475725b
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 19 deletions.
diff --git a/app/scripts/annotations/annotations.table.model.ts b/app/scripts/annotations/annotations.table.model.ts
@@ -8,14 +8,16 @@ module ngApp.projects.models {
             id: "annotation_id",
             td: row => '<a href="annotations/'+row.annotation_id+'">' + row.annotation_id + '</a>',
             sortable: true,
-            tdClassName: 'truncated-cell'
+            tdClassName: 'truncated-cell',
+            toolTipText: row => row.annotation_id
           },
           {
               name: "Case UUID",
               id: "case_id",
               td: row => '<a href="cases/'+row.case_id+'">' + row.case_id + '</a>',
               sortable: true,
-              tdClassName: 'truncated-cell'
+              tdClassName: 'truncated-cell',
+              toolTipText: row => row.case_id
           },
           {
               name: "Program",
@@ -28,12 +30,9 @@ module ngApp.projects.models {
               name: "Project",
               id: "project.project_id",
               td: row => row.project && '<a href="projects/'+row.project.project_id +
-                           '" data-uib-tooltip="' + row.project.name +
-                           '" data-tooltip-popup-delay=1000' +
-                           '" data-tooltip-append-to-body="true">' +
-                           row.project.project_id +
-                         '</a>',
-              sortable: true
+                         '">' + row.project.project_id + '</a>',
+              sortable: true,
+              toolTipText: row => row.project.name
           },
           {
               name: "Entity Type",
@@ -46,7 +45,8 @@ module ngApp.projects.models {
               id: "entity_id",
               td: row => row.entity_id,
               sortable: true,
-              tdClassName: 'truncated-cell'
+              tdClassName: 'truncated-cell',
+              toolTipText: row => row.entity_id
           },
           {
               name: "Entity Barcode",
@@ -100,7 +100,8 @@ module ngApp.projects.models {
           "case_id",
           "notes",
           "project.program.name",
-          "project.project_id"
+          "project.project_id",
+          "project.name",
         ],
         facets: [
           {

diff --git a/app/scripts/app.ts b/app/scripts/app.ts
@@ -125,7 +125,7 @@ function appRun(gettextCatalog: any,
   if (navigator.cookieEnabled && $cookies.get("GDC-Portal-Sha") !== config.commitHash) {
     $cookies.put("GDC-Portal-Sha", config.commitHash);
     [ "Projects-col", "Annotations-col", "Files-col", "Cases-col",
-      "Cart-col", "gdc-cart-items", "gdc-cart-updated"
+      "Cart-col", "gdc-cart-items", "gdc-cart-updated", "gdc-facet-config"
     ].forEach(item => LocalStorageService.removeItem(item))
   }
   gettextCatalog.debug = true;

diff --git a/app/scripts/components/facets/facets.directives.ts b/app/scripts/components/facets/facets.directives.ts
@@ -18,7 +18,8 @@ module ngApp.components.facets.directives {
         title: "@",
         name: "@",
         removeFunction: "&",
-        removable: "@"
+        removable: "@",
+        showTooltip: "@"
       },
       replace: true,
       templateUrl: "components/facets/templates/facet.html",

diff --git a/app/scripts/components/facets/templates/facet.html b/app/scripts/components/facets/templates/facet.html
@@ -51,10 +51,17 @@
             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"
-              data-tooltip="{{ ::ProjectsService.projectIdMapping[term.key] }}"
+              data-uib-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">
+              data-tooltip-placement="right">
+          {{ ::term.key.toUpperCase() }}
+        </span>
+        <span data-ng-if="tc.name.indexOf('project_id') === -1 && showTooltip"
+              data-tooltip-append-to-body="true"
+              data-uib-tooltip="{{::term.key}}">
+          {{ ::term.key | translate | humanify: true:true }}
+        </span>
+        <span data-ng-if="tc.name.indexOf('project_id') === -1 && !showTooltip">
           {{ ::term.key | translate | humanify: true:true }}
         </span>
       </span>

diff --git a/app/scripts/components/facets/templates/facets-section.html b/app/scripts/components/facets/templates/facets-section.html
@@ -17,6 +17,7 @@
          data-facet="aggregations[f.name]"
          data-collapsed="{{ f.collapsed }}"
          data-removable="{{ f.removable }}"
+         data-show-tooltip="{{ f.showTooltip }}"
          data-remove-function="removeFacet(f.name)"></terms>
 
   <range-facet data-ng-if="f.facetType === 'range'"

diff --git a/app/scripts/components/summary-card/summary-card.directives.ts b/app/scripts/components/summary-card/summary-card.directives.ts
@@ -1,7 +1,8 @@
 module ngApp.components.summaryCard.directives {
   import ILocationService = ngApp.components.location.services.ILocationService;
+  import IProjectsService = ngApp.projects.services.IProjectsService;
 
-  function SummaryCard(LocationService: ILocationService): ng.IDirective {
+  function SummaryCard(LocationService: ILocationService, ProjectsService: IProjectsService): ng.IDirective {
     return {
       restrict: "E",
       templateUrl: "components/summary-card/templates/summary-card.html",
@@ -18,6 +19,7 @@ module ngApp.components.summaryCard.directives {
         showCases: "="
       },
       link: function($scope) {
+        $scope.ProjectsService = ProjectsService;
         var config = $scope.config;
         $scope.mode = $scope.mode || "graph";
 

diff --git a/app/scripts/components/summary-card/templates/summary-card.html b/app/scripts/components/summary-card/templates/summary-card.html
@@ -40,7 +40,10 @@ <h4 data-ng-if="!config.tableTitle || mode === 'graph'" class="panel-title pull-
         <tr data-ng-repeat="item in tableData track by $index" data-ng-click="sc.addFilters(item)">
           <th scope="row" class="truncated-cell">
             <div class="item-color" data-ng-style="{ 'background-color': item.color }"></div>
-            <a href="#">{{ item[config.displayKey] | humanify }}</a>
+            <a href="#"
+               data-uib-tooltip="{{::ProjectsService.projectIdMapping[item[config.displayKey]] }}">
+              {{ item[config.displayKey] | humanify }}
+            </a>
           </th>
           <td class="text-right" data-ng-if="showCases">
             <span data-ng-if="item.case_count">

diff --git a/app/scripts/projects/templates/projects.facets.html b/app/scripts/projects/templates/projects.facets.html
@@ -5,7 +5,9 @@
        data-facet="prsc.projects.aggregations.primary_site" data-title="Primary Site"></terms>
 <terms data-name="program.name"
       data-facet="prsc.projects.aggregations['program.name']" data-title="Cancer Program"></terms>
-<terms data-name="disease_type" data-title="Disease Type"
+<terms data-name="disease_type"
+       data-title="Disease Type"
+       data-show-tooltip="true"
        data-facet="prsc.projects.aggregations.disease_type"></terms>
 <terms data-name="summary.data_categories.data_category"
        data-facet="prsc.projects.aggregations['summary.data_categories.data_category']" data-title="Data Category"></terms>

diff --git a/app/scripts/search/search.participants.table.model.ts b/app/scripts/search/search.participants.table.model.ts
@@ -248,7 +248,7 @@ module ngApp.search.models {
             {name: "project.primary_site", title: "Primary Site", collapsed: false, facetType: "terms"},
             {name: "project.program.name", title: "Cancer Program", collapsed: false, facetType: "terms"},
             {name: "project.project_id", title: "Project", collapsed: false, facetType: "terms"},
-            {name: "project.disease_type", title: "Disease Type", collapsed: false, facetType: "terms"},
+            {name: "project.disease_type", title: "Disease Type", collapsed: false, facetType: "terms", showTooltip: true},
             {name: "demographic.gender", title: "Gender", collapsed: false, facetType: "terms"},
             {name: "diagnoses.age_at_diagnosis", title: "Age at diagnosis", collapsed: false, facetType: "range", unitsMap: [
                             {

diff --git a/app/scripts/search/tests/search.tests.js b/app/scripts/search/tests/search.tests.js
@@ -9,6 +9,7 @@ describe('Search:', function () {
 
   beforeEach(module(function ($provide) {
       $provide.value('AuthRestangular', {});
+      $provide.value('ProjectsService', {});
       $provide.value('config', {});
   }));