Commit d010cb9d authored by Jérémy Destin's avatar Jérémy Destin
Browse files

fix: Make the question mark clickable, hide the Germplasm List search box and...

fix: Make the question mark clickable, hide the Germplasm List search box and use the facet sources generate by the germplasm search web service when displaying the germplasm result page.  Upgrade the tslib version  GNP-4309
parent 326820b6
......@@ -10064,9 +10064,9 @@
}
},
"tslib": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
"integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
"version": "1.11.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.11.0.tgz",
"integrity": "sha512-BmndXUtiTn/VDDrJzQE7Mm22Ix3PxgLltW9bSNLoeCY31gnG2OPx0QqJnuc9oMIKioYrz487i6K9o4Pdn0j+Kg=="
},
"tslint": {
"version": "5.11.0",
......
......@@ -39,7 +39,7 @@
"popper.js": "1.14.6",
"rxjs": "6.4.0",
"trait-ontology-widget": "git+https://github.com/gnpis/trait-ontology-widget.git#v2.2.1",
"tslib": "1.9.3",
"tslib": "1.11.0",
"zone.js": "0.8.29"
},
"devDependencies": {
......
<ng-template #germplasmDetailsPopup>
<div class="card ngb-popover-window ">
<br>
Activation of the button allows to view more information about the germplasm.<br>
You can also download the germplasm list.
This is a button to view more information about the germplasm that are return by your search.<br>
You can also download the results in standard format.
</div>
</ng-template>
<div class="card mb-1" *ngIf="facet.terms.length && facet.terms.length <= 8">
<div class="card-body">
<h3 class="card-title">{{ formatFacets[facet.field] ? (formatFacets[ facet.field] | titlecase) : facet.field | titlecase }}</h3>
<h3
class="card-title">{{ formatFacets[facet.field] ? (formatFacets[facet.field] | titlecase) : facet.field | titlecase }}</h3>
<form [formGroup]="checkBoxes" class="card-text">
<div class="form-check" *ngFor="let term of facet.terms">
......@@ -37,9 +37,16 @@
(change)="switchToGermplasmResult()">
<span class="slider round"></span>
</label>
<a class="btn popovers" data-boundary="window" placement="auto"
[autoClose]="'outside'"
[ngbPopover]="germplasmDetailsPopup"
[popoverTitle]="'Details button\'s help.'" container="body">
<img src="assets/faidare/images/question-mark.png" alt="help"
title="This is a button to view more information about the germplasm that are return by your search. You can also download the results in standard format."
title="This is a button to view more information about the germplasm that are return by your search.
You can also download the results in standard format."
height="20px" style="margin-top: -10px; margin-left: 10px"/>
</a>
</div>
</div>
</form>
......
......@@ -121,12 +121,18 @@ export class SmallFacetsComponent implements OnInit {
}
switchToGermplasmResult() {
/*for (const [key, control] of Object.entries(this.checkBoxes.controls)) {
if (key === 'selectSwitchButton') {
control.setValue(currentState, { emitEvent: false });
}
}*/
if (!this.displayGermplasmCurrentState) {
this.localCriteria = {
... this.localCriteria,
facetFields: ['types']
};
} else {
this.localCriteria = {
... this.localCriteria,
facetFields: ['types', 'sources']
};
}
this.criteria$.next(this.localCriteria);
this.displayGermplasmResult$.next(!this.displayGermplasmCurrentState);
}
......
......@@ -36,7 +36,8 @@
</div>
</div>
<!-- Input for the germplasmList field -->
<div class="form-group row">
<div class="form-group row"
*ngIf="!displayGermplasmResult">
<label for="germplasmList" class="col-sm-4">
<span>Germplasm list</span>
<small class="small text-muted">
......
......@@ -4,6 +4,7 @@ import { FormComponent } from './form.component';
import { MockComponents } from 'ng-mocks';
import { SuggestionFieldComponent } from './suggestion-field/suggestion-field.component';
import { TraitOntologyWidgetComponent } from './trait-ontology-widget/trait-ontology-widget.component';
import { BehaviorSubject } from 'rxjs';
describe('FormComponent', () => {
......@@ -18,6 +19,8 @@ describe('FormComponent', () => {
it('should switch tabs', async(() => {
const fixture = TestBed.createComponent(FormComponent);
const component = fixture.componentInstance;
component.displayGermplasmResult$ = new BehaviorSubject(false);
fixture.detectChanges();
const element: HTMLElement = fixture.nativeElement;
......
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { DataDiscoveryCriteria } from '../models/data-discovery.model';
import { BehaviorSubject } from 'rxjs';
......@@ -12,7 +12,7 @@ enum Tabs {
templateUrl: './form.component.html',
styleUrls: ['./form.component.scss']
})
export class FormComponent {
export class FormComponent implements OnInit {
@Input() criteria$: BehaviorSubject<DataDiscoveryCriteria>;
@Input() displayGermplasmResult$: BehaviorSubject<boolean>;
@Output() traitWidgetInitialized = new EventEmitter();
......@@ -22,6 +22,7 @@ export class FormComponent {
// to give access in HTML template
tabs = Tabs;
displayGermplasmResult: boolean;
getNavClass(tab: Tabs) {
return this.activeTab === tab ? 'active' : '';
......@@ -30,4 +31,7 @@ export class FormComponent {
getTabClass(tab: Tabs) {
return this.activeTab === tab ? 'visible' : 'd-none';
}
ngOnInit(): void {
this.displayGermplasmResult$.subscribe(displayStatus => this.displayGermplasmResult = displayStatus);
}
}
......@@ -72,7 +72,7 @@ export class GermplasmResultPageComponent implements OnInit {
ngOnInit() {
const queryParams = this.route.snapshot.queryParams;
this.reassignCriteriaFieldFromDataDiscoveryFields(queryParams);
// this.reassignCriteriaFieldFromDataDiscoveryFields(queryParams);
this.criteriaFromForm$.subscribe(criteria => {
this.reassignCriteriaFieldFromDataDiscoveryFields(criteria);
......
......@@ -31,7 +31,7 @@ export class DataDiscoveryCriteriaUtils {
return {
accessions: null,
crops: null,
facetFields: ['sources', 'types'],
facetFields: ['types', 'sources'],
germplasmLists: null,
observationVariableIds: null,
topSelectedTraitOntologyIds: null,
......@@ -68,7 +68,7 @@ export class DataDiscoveryCriteriaUtils {
sources: null,
types: 'Germplasm',
facetFields: ['holdingInstitute',
facetFields: ['sources', 'holdingInstitute',
'biologicalStatus', 'geneticNature', 'country'],
sortBy: null,
sortOrder: null,
......
......@@ -13,7 +13,6 @@
<faidare-facets
*ngIf="displayGermplasmResult && germplasmfacets.length"
[criteria$]="criteria$"
[facets]="germplasmfacets"
[displayGermplasmResult$]="displayGermplasmResult$"
[germplasmSearchCriteria$]="germplasmSearchCriteria$">
......
Markdown is supported
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