Commit 931bbb27 authored by Tifenn Guillas's avatar Tifenn Guillas
Browse files

Add tolltip on datasets => DONE

parent e1a98bdb
......@@ -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
......
......@@ -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)"
......
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[];
......
......@@ -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>
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,9 @@ export class DatasetsByFamilyComponent {
});
this.updateSelectedDatasets.emit(clonedSelectedDatasets);
}
getProjectDescription(projectName: string): string {
console.error(this.projectList.find(p => p.name === projectName).description);
return this.projectList.find(p => p.name === projectName).description;
}
}
......@@ -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"
......
......@@ -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);
......
......@@ -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
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment