feat: add tooltips in aggregations

Explains what is the number we see.

Fixes #7

frontend/src/app/aggregation/small-aggregation.component.spec.ts

 import { fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { ComponentTester, speculoosMatchers } from 'ngx-speculoos';
 
 import { SmallAggregationComponent } from './small-aggregation.component';
@@ -31,7 +32,10 @@ describe('SmallAggregationComponent', () => {
   }
 
   beforeEach(() => TestBed.configureTestingModule({
-    imports: [ReactiveFormsModule],
+    imports: [
+      ReactiveFormsModule,
+      NgbTooltipModule.forRoot()
+    ],
     declarations: [SmallAggregationComponent, AggregationNamePipe, DocumentCountComponent]
   }));
 

frontend/src/app/aggregations/aggregations.component.spec.ts

 import { fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { ReactiveFormsModule } from '@angular/forms';
-import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbTooltipModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
 import { ComponentTester } from 'ngx-speculoos';
 
 import { AggregationsComponent } from './aggregations.component';
@@ -31,7 +31,8 @@ describe('AggregationsComponent', () => {
   beforeEach(() => TestBed.configureTestingModule({
     imports: [
       ReactiveFormsModule,
-      NgbTypeaheadModule.forRoot()
+      NgbTypeaheadModule.forRoot(),
+      NgbTooltipModule.forRoot()
     ],
     declarations: [
       AggregationsComponent,

frontend/src/app/app.module.ts

@@ -6,7 +6,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { ReactiveFormsModule } from '@angular/forms';
 import { registerLocaleData } from '@angular/common';
 import localeFr from '@angular/common/locales/fr';
-import { NgbPaginationModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbPaginationModule, NgbTooltipModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { routes } from './app.routes';
 import { AppComponent } from './app.component';
@@ -46,7 +46,8 @@ registerLocaleData(localeFr);
     ReactiveFormsModule,
     HttpClientModule,
     NgbPaginationModule.forRoot(),
-    NgbTypeaheadModule.forRoot()
+    NgbTypeaheadModule.forRoot(),
+    NgbTooltipModule.forRoot()
   ],
   providers: [
     { provide: LOCALE_ID, useValue: 'fr-FR' }

frontend/src/app/document-count/document-count.component.html

+<!-- tooltip precising what is the number displayed -->
+<ng-template #tooltipContent>
+  <ng-container [ngPlural]="count">
+    <ng-template ngPluralCase="=1">Un seul document correspond à <em>{{ name }}</em></ng-template>
+    <ng-template ngPluralCase="other">{{ count | number }} documents correspondent à <em>{{ name }}</em></ng-template>
+  </ng-container>
+</ng-template>
+<!-- name, with a link if necessary, followed by the count -->
 <a *ngIf="url" [href]="url">{{ name }}</a>
 <span *ngIf="!url">{{ name }}</span>
-<small class="ml-1" [class.text-muted]="muted">[{{ count | number }}]</small>
+<small class="ml-1" [class.text-muted]="muted" [ngbTooltip]="tooltipContent" placement="top" container="body">[{{ count | number }}]</small>

frontend/src/app/document-count/document-count.component.scss

+em {
+  font-style: italic;
+}

frontend/src/app/document-count/document-count.component.spec.ts

 import { TestBed } from '@angular/core/testing';
 import { registerLocaleData } from '@angular/common';
 import localeFr from '@angular/common/locales/fr';
+import { LOCALE_ID } from '@angular/core';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { ComponentTester, speculoosMatchers } from 'ngx-speculoos';
 
 import { DocumentCountComponent } from './document-count.component';
-import { LOCALE_ID } from '@angular/core';
 
 describe('DocumentCountComponent', () => {
 
@@ -24,12 +25,17 @@ describe('DocumentCountComponent', () => {
     get count() {
       return this.element('small');
     }
+
+    get tooltip() {
+      return document.querySelector('ngb-tooltip-window');
+    }
   }
 
   beforeEach(() => {
     registerLocaleData(localeFr);
     TestBed.configureTestingModule({
       declarations: [DocumentCountComponent],
+      imports: [NgbTooltipModule.forRoot()],
       providers: [{ provide: LOCALE_ID, useValue: 'fr-FR' }]
     });
     jasmine.addMatchers(speculoosMatchers);
@@ -66,4 +72,37 @@ describe('DocumentCountComponent', () => {
     expect(tester.link.attr('href')).toBe('http://florilege.arcad-project.org/fr/collections');
     expect(tester.count).toHaveText('[1\u00a0298]');
   });
+
+  it('should display a tooltip to explain the count', () => {
+    // given a component with a name, a url and a count
+    const tester = new DocumentCountComponentTester();
+    const component = tester.componentInstance;
+    component.name = 'Florilège';
+    component.count = 1298;
+    component.url = 'http://florilege.arcad-project.org/fr/collections';
+
+    // when displaying it
+    tester.detectChanges();
+    // and hovering the element
+    tester.count.dispatchEventOfType('mouseenter');
+
+    // then we should have the tooltip displayed
+    expect(tester.tooltip).not.toBeNull();
+    expect(tester.tooltip.textContent).toBe('1\u00a0298 documents correspondent à Florilège');
+
+    // and hide it when leaving
+    tester.count.dispatchEventOfType('mouseleave');
+    expect(tester.tooltip).toBeNull();
+
+    // with only one document
+    component.count = 1;
+
+    // when displaying it again
+    tester.detectChanges();
+    tester.count.dispatchEventOfType('mouseenter');
+
+    // then we should have the tooltip displayed with special text for one document
+    expect(tester.tooltip).not.toBeNull();
+    expect(tester.tooltip.textContent).toBe('Un seul document correspond à Florilège');
+  });
 });

frontend/src/app/home/home.component.spec.ts

@@ -5,7 +5,7 @@ import { Router } from '@angular/router';
 import { By } from '@angular/platform-browser';
 import { ComponentTester, speculoosMatchers } from 'ngx-speculoos';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbTooltipModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { HomeComponent } from './home.component';
 import { SearchService } from '../search.service';
@@ -32,7 +32,13 @@ class HomeComponentTester extends ComponentTester<HomeComponent> {
 
 describe('HomeComponent', () => {
   beforeEach(() => TestBed.configureTestingModule({
-    imports: [ReactiveFormsModule, RouterTestingModule, HttpClientTestingModule, NgbTypeaheadModule.forRoot()],
+    imports: [
+      ReactiveFormsModule,
+      RouterTestingModule,
+      HttpClientTestingModule,
+      NgbTypeaheadModule.forRoot(),
+      NgbTooltipModule.forRoot()
+    ],
     declarations: [HomeComponent, PillarsComponent, DocumentCountComponent],
     providers: [HttpClientTestingModule]
   }));

frontend/src/app/large-aggregation/large-aggregation.component.html

@@ -12,8 +12,15 @@
   <div class="card-body">
 
     <!-- title -->
+    <!-- tooltip precising what is the number displayed -->
+    <ng-template #tooltipContent>
+      <ng-container [ngPlural]="aggregation.buckets.length">
+        <ng-template ngPluralCase="=1">Un seule valeur possible pour <i>{{ aggregation.name | aggregationName }}</i></ng-template>
+        <ng-template ngPluralCase="other">{{ aggregation.buckets.length | number }} valeurs possibles pour <i>{{ aggregation.name | aggregationName }}</i></ng-template>
+      </ng-container>
+    </ng-template>
     <h3 class="card-title">{{ aggregation.name | aggregationName }}
-      <small class="text-muted ml-1">({{ aggregation.buckets.length | number }})</small>
+      <small class="text-muted ml-1" [ngbTooltip]="tooltipContent" placement="top" container="body">({{ aggregation.buckets.length | number }})</small>
     </h3>
 
     <!-- values as pills and a typeahead to add them -->

frontend/src/app/large-aggregation/large-aggregation.component.spec.ts

@@ -2,7 +2,7 @@ import { fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { of } from 'rxjs';
-import { NgbTypeahead, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbTooltipModule, NgbTypeahead, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
 import { ComponentTester, speculoosMatchers } from 'ngx-speculoos';
 
 import { BucketOrRefine, LargeAggregationComponent } from './large-aggregation.component';
@@ -47,7 +47,11 @@ describe('LargeAggregationComponent', () => {
   }
 
   beforeEach(() => TestBed.configureTestingModule({
-    imports: [ReactiveFormsModule, NgbTypeaheadModule.forRoot()],
+    imports: [
+      ReactiveFormsModule,
+      NgbTypeaheadModule.forRoot(),
+      NgbTooltipModule.forRoot()
+    ],
     declarations: [LargeAggregationComponent, AggregationNamePipe, DocumentCountComponent]
   }));
 

frontend/src/app/pillars/pillars.component.spec.ts

@@ -4,6 +4,7 @@ import { EMPTY, of } from 'rxjs';
 import { registerLocaleData } from '@angular/common';
 import localeFr from '@angular/common/locales/fr';
 import { LOCALE_ID } from '@angular/core';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { ComponentTester, speculoosMatchers } from 'ngx-speculoos';
 
 import { PillarsComponent } from './pillars.component';
@@ -41,7 +42,10 @@ describe('PillarsComponent', () => {
     registerLocaleData(localeFr);
     TestBed.configureTestingModule({
       declarations: [PillarsComponent, DocumentCountComponent],
-      imports: [HttpClientTestingModule],
+      imports: [
+        HttpClientTestingModule,
+        NgbTooltipModule.forRoot()
+      ],
       providers: [
         { provide: LOCALE_ID, useValue: 'fr-FR' }
       ]

frontend/src/app/search/search.component.spec.ts

@@ -5,7 +5,7 @@ import { Router } from '@angular/router';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { NgbPagination, NgbPaginationModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbPagination, NgbPaginationModule, NgbTooltipModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
 import { of } from 'rxjs';
 import { ComponentTester, fakeRoute, speculoosMatchers } from 'ngx-speculoos';
 
@@ -55,6 +55,7 @@ describe('SearchComponent', () => {
       HttpClientTestingModule,
       NgbPaginationModule.forRoot(),
       NgbTypeaheadModule.forRoot(),
+      NgbTooltipModule.forRoot(),
       NoopAnimationsModule
     ],
     declarations: [

frontend/src/custom-bootstrap.scss

@@ -30,7 +30,7 @@
 // @import "../node_modules/bootstrap/scss/list-group";
 // @import "../node_modules/bootstrap/scss/close";
 // @import "../node_modules/bootstrap/scss/modal";
-// @import "../node_modules/bootstrap/scss/tooltip";
+@import "../node_modules/bootstrap/scss/tooltip";
 // @import "../node_modules/bootstrap/scss/popover";
 // @import "../node_modules/bootstrap/scss/carousel";
 @import "../node_modules/bootstrap/scss/utilities";