Merge branch '140-search-multiple-add-tooltip-for-datasets' into 'develop'

Resolve "[Search Multiple] Add tooltip for datasets"

Closes #140

See merge request !153

CHANGELOG.md

@@ -6,6 +6,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [3.5.0] - 2020-xx
 ### Added
+- #140 => Add description tooltip on search multiple datasets
 - #136 => Add detail view for spectra type object and default object
 
 ### Fixed

src/app/search-multiple/components/datasets/dataset-list.component.html

@@ -2,6 +2,7 @@
     <div *ngFor="let datasetFamily of getDatasetFamilyList()" class="col-12 col-lg-6 col-xl-4 my-3 text-center">
         <app-datasets-by-family
             [datasetFamily]="datasetFamily"
+            [projectList]="projectList"
             [datasetList]="getDatasetsByFamily(datasetFamily.id)"
             [selectedDatasets]="selectedDatasets"
             [isAllSelected]="getIsAllSelected(datasetFamily.id)"

src/app/search-multiple/components/datasets/dataset-list.component.spec.ts

@@ -2,7 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Component, Input, ViewChild } from '@angular/core';
 
 import { DatasetListComponent } from './dataset-list.component';
-import { Dataset, Family } from '../../../metamodel/model';
+import { Dataset, Family, Project } from '../../../metamodel/model';
 import { DATASET, DATASET_FAMILY_LIST } from '../../../../settings/test-data';
 
 describe('[SearchMultiple][Datasets] Component: DatasetListComponent', () => {
@@ -24,8 +24,9 @@ describe('[SearchMultiple][Datasets] Component: DatasetListComponent', () => {
     }
 
     @Component({ selector: 'app-datasets-by-family', template: '' })
-    class DatasetsByProjectStubComponent {
-        @Input() datasetFamily: number;
+    class DatasetsByFamilyStubComponent {
+        @Input() datasetFamily: Family;
+        @Input() projectList: Project[];
         @Input() datasetList: Dataset[];
         @Input() selectedDatasets: string[];
         @Input() isAllSelected: boolean;
@@ -41,7 +42,7 @@ describe('[SearchMultiple][Datasets] Component: DatasetListComponent', () => {
             declarations: [
                 DatasetListComponent,
                 TestHostComponent,
-                DatasetsByProjectStubComponent
+                DatasetsByFamilyStubComponent
             ]
         });
         testHostFixture = TestBed.createComponent(TestHostComponent);

src/app/search-multiple/components/datasets/dataset-list.component.ts

 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 
-import { Dataset, Family } from '../../../metamodel/model';
+import { Dataset, Family, Project } from '../../../metamodel/model';
 import { sortByDisplay } from '../../../shared/utils';
 
 @Component({
@@ -9,6 +9,7 @@ import { sortByDisplay } from '../../../shared/utils';
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DatasetListComponent {
+    @Input() projectList: Project[];
     @Input() datasetFamilyList: Family[];
     @Input() datasetList: Dataset[];
     @Input() selectedDatasets: string[];

src/app/search-multiple/components/datasets/datasets-by-family.component.html

@@ -17,13 +17,27 @@
     <div *ngFor="let dataset of getDatasetSortedByDisplay()">
         <div *ngIf="isSelected(dataset.name)">
             <button class="btn btn-block text-left py-1 m-0 rounded-0" (click)="toggleSelection(dataset.name)">
-                <span class="fas fa-fw fa-check-square theme-color"></span> {{ dataset.label }}
+                <span class="fas fa-fw fa-check-square theme-color"></span>
+                {{ dataset.label }}
+                <span [tooltip]="datasetInfo" placement="right" containerClass="custom-tooltip right-tooltip">
+                    <span class="far fa-question-circle fa-xs"></span>
+                </span>
             </button>
         </div>
         <div *ngIf="!isSelected(dataset.name)">
             <button class="btn btn-block text-left py-1 m-0 rounded-0" (click)="toggleSelection(dataset.name)">
-                <span class="far fa-fw fa-square text-secondary"></span> {{ dataset.label }}
+                <span class="far fa-fw fa-square text-secondary"></span>
+                {{ dataset.label }}
+                <span [tooltip]="datasetInfo" placement="right" containerClass="custom-tooltip right-tooltip">
+                    <span class="far fa-question-circle fa-xs"></span>
+                </span>
             </button>
         </div>
+
+        <ng-template #datasetInfo class="text-left">
+            {{ dataset.description }}
+            <br><br>
+            {{ getProjectDescription(dataset.project_name) }}
+        </ng-template>
     </div>
-</div>
\ No newline at end of file
+</div>

src/app/search-multiple/components/datasets/datasets-by-family.component.spec.ts

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { DatasetsByFamilyComponent } from './datasets-by-family.component';
 import { Dataset } from '../../../metamodel/model';
-import { DATASET_LIST } from '../../../../settings/test-data';
+import { DATASET_LIST, PROJECT_LIST } from '../../../../settings/test-data';
 
 describe('[SearchMultiple][Datasets] Component: DatasetsByFamilyComponent', () => {
     let component: DatasetsByFamilyComponent;
@@ -67,5 +67,10 @@ describe('[SearchMultiple][Datasets] Component: DatasetsByFamilyComponent', () =
         component.updateSelectedDatasets.subscribe((event: string[]) => expect(event).toEqual(expectedSelectedDatasets));
         component.unselectAll();
     });
+
+    it('#getProjectDescription() should return the description of the given project', () => {
+        component.projectList = PROJECT_LIST;
+        expect(component.getProjectDescription('project_1')).toEqual('Description of project 1');
+    });
 });
 

src/app/search-multiple/components/datasets/datasets-by-family.component.ts

-import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
 
-import { Dataset, Family } from '../../../metamodel/model';
+import { Dataset, Family, Project } from '../../../metamodel/model';
 import { sortByDisplay } from '../../../shared/utils';
 
 @Component({
     selector: 'app-datasets-by-family',
     templateUrl: 'datasets-by-family.component.html',
     styleUrls: ['datasets-by-family.component.css'],
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    encapsulation: ViewEncapsulation.None
 })
 export class DatasetsByFamilyComponent {
     @Input() datasetFamily: Family;
+    @Input() projectList: Project[];
     @Input() datasetList: Dataset[];
     @Input() selectedDatasets: string[];
     @Input() isAllSelected: boolean;
@@ -54,4 +56,8 @@ export class DatasetsByFamilyComponent {
         });
         this.updateSelectedDatasets.emit(clonedSelectedDatasets);
     }
+
+    getProjectDescription(projectName: string): string {
+        return this.projectList.find(p => p.name === projectName).description;
+    }
 }

src/app/search-multiple/containers/datasets.component.html

@@ -8,6 +8,7 @@
                     <span class="sr-only">Loading...</span>
                 </div>
                     <app-dataset-list *ngIf="datasetSearchMetaIsLoaded | async"
+                        [projectList]="projectList | async"
                         [datasetFamilyList]="datasetFamilyList | async"
                         [datasetList]="datasetList | async"
                         [selectedDatasets]="selectedDatasets | async"

src/app/search-multiple/containers/datasets.component.ts

@@ -9,7 +9,7 @@ import * as searchMultipleSelector from '../store/search-multiple.selector';
 import { SearchMultipleQueryParams } from '../store/model';
 import * as fromMetamodel from '../../metamodel/reducers';
 import * as datasetActions from '../../metamodel/action/dataset.action';
-import { Dataset, Family } from '../../metamodel/model';
+import { Dataset, Family, Project } from '../../metamodel/model';
 import * as metamodelSelector from '../../metamodel/selectors';
 import * as coneSearchSelector from '../../shared/cone-search/store/cone-search.selector';
 import { ConeSearch } from '../../shared/cone-search/store/model';
@@ -29,6 +29,7 @@ export class DatasetsComponent implements OnInit {
     public datasetSearchMetaIsLoading: Observable<boolean>;
     public datasetSearchMetaIsLoaded: Observable<boolean>;
     public currentStep: Observable<string>;
+    public projectList: Observable<Project[]>;
     public datasetFamilyList: Observable<Family[]>;
     public datasetList: Observable<Dataset[]>;
     public isValidConeSearch: Observable<boolean>;
@@ -41,6 +42,7 @@ export class DatasetsComponent implements OnInit {
         this.datasetSearchMetaIsLoading = store.select(metamodelSelector.getDatasetSearchMetaIsLoading);
         this.datasetSearchMetaIsLoaded = store.select(metamodelSelector.getDatasetSearchMetaIsLoaded);
         this.currentStep = store.select(searchMultipleSelector.getCurrentStep);
+        this.projectList = store.select(metamodelSelector.getProjectList);
         this.datasetFamilyList = store.select(metamodelSelector.getDatasetFamilyList);
         this.datasetList = store.select(metamodelSelector.getDatasetWithConeSearchList);
         this.isValidConeSearch = this.store.select(coneSearchSelector.getIsValidConeSearch);

src/styles.css

@@ -79,6 +79,7 @@
     background-color: #E9ECEF;
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
     max-width: fit-content;
+    text-align: unset;
 }
 
 .tooltip.custom-tooltip .tooltip-arrow,
@@ -90,4 +91,15 @@
 .tooltip.right-tooltip .arrow:before {
     border-top-color: transparent;
     border-right-color: #E9ECEF;
+}
+
+.tooltip.custom-tooltip .tooltip-inner .text-left {
+    text-align: left;
+}
+.tooltip.custom-tooltip .tooltip-inner .text-center {
+    text-align: center;
+}
+.tooltip.custom-tooltip .tooltip-inner .text-right {
+    text-align: right;
+    background-color: red;
 }
\ No newline at end of file