Commit b537ffe3 authored by Exbrayat Cédric's avatar Exbrayat Cédric Committed by Exbrayat Cédric
Browse files

feat: fallback to small aggregation if few results

Fixes #6

Uses a small aggregation instead of a large one if there are less than 10 options.
parent 67a0007d
<div *ngIf="aggregations?.length">
<div *ngFor="let aggregation of aggregations">
<!-- we display checkboxes if there are only a few options -->
<rare-small-aggregation *ngIf="aggregation.type === 'SMALL'" [aggregation]="aggregation"
[selectedKeys]="selectedKeysForAggregation(aggregation.name)"
(aggregationChange)="onAggregationChange($event)"></rare-small-aggregation>
<!-- we display an input with autocomplete if there are many options, like for the taxon -->
<rare-large-aggregation *ngIf="aggregation.type === 'LARGE'" [aggregation]="aggregation"
[selectedKeys]="selectedKeysForAggregation(aggregation.name)"
(aggregationChange)="onAggregationChange($event)"></rare-large-aggregation>
<ng-template #smallAggregation>
<rare-small-aggregation [aggregation]="aggregation"
[selectedKeys]="selectedKeysForAggregation(aggregation.name)"
(aggregationChange)="onAggregationChange($event)"></rare-small-aggregation>
</ng-template>
<!-- we display an input with autocomplete if there are usually many options, like for the taxon,
and more than 10 options for this search -->
<rare-large-aggregation
*ngIf="aggregation.type === 'LARGE' && aggregation.buckets.length >= 10; else smallAggregation"
[aggregation]="aggregation"
[selectedKeys]="selectedKeysForAggregation(aggregation.name)"
(aggregationChange)="onAggregationChange($event)"></rare-large-aggregation>
</div>
</div>
......@@ -104,7 +104,9 @@ describe('AggregationsComponent', () => {
// given a few aggregations
const domain = toAggregation('domain', ['Plant']);
const coo = toAggregation('coo', ['France', 'Italy']);
// country of origin as a large aggregation with 10 options to keep being large
const coo = toAggregation('coo', ['France', 'Italy', 'Japan', 'Indonesia', 'New Zealand',
'Chile', 'Bolivia', 'Argentina', 'Antarctica', 'Canada']);
coo.type = 'LARGE';
component.aggregations = [domain, coo];
component.selectedCriteria = [{ name: 'coo', values: ['France'] }];
......@@ -122,6 +124,29 @@ describe('AggregationsComponent', () => {
expect(large.selectedKeys).toEqual(['France']);
});
it('should display a small aggregation for a large one with few results', () => {
const tester = new AggregationsComponentTester();
const component = tester.componentInstance;
// given a few aggregations
const domain = toAggregation('domain', ['Plant']);
// country of origin as a large aggregation with only 2 options to see if it is displayed as a small one
const coo = toAggregation('coo', ['France', 'Italy']);
coo.type = 'LARGE';
component.aggregations = [domain, coo];
component.selectedCriteria = [{ name: 'coo', values: ['France'] }];
tester.detectChanges();
// then it should display 2 small aggregations
expect(tester.aggregations.length).toBe(2);
const small = tester.aggregations[0].componentInstance as SmallAggregationComponent;
expect(small.aggregation).toBe(domain);
expect(small.selectedKeys).toEqual([]);
const largeAsSmall = tester.aggregations[1].componentInstance as LargeAggregationComponent;
expect(largeAsSmall.aggregation).toBe(coo);
expect(largeAsSmall.selectedKeys).toEqual(['France']);
});
it('should update criteria when a criterion changes', () => {
const tester = new AggregationsComponentTester();
const component = tester.componentInstance;
......
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