Order datasets by dataset family rather than project => DONE, Tests => DONE

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

 <div class="row">
-    <div *ngFor="let project of getProject()" class="col-12 col-lg-6 col-xl-4 my-3 text-center">
-        <app-datasets-by-project
-            [project]="project"
-            [datasetList]="getDatasetsByProject(project.name)"
+    <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"
+            [datasetList]="getDatasetsByFamily(datasetFamily.id)"
             [selectedDatasets]="selectedDatasets"
-            [isAllSelected]="getIsAllSelected(project.name)"
-            [isAllUnselected]="getIsAllUnselected(project.name)"
+            [isAllSelected]="getIsAllSelected(datasetFamily.id)"
+            [isAllUnselected]="getIsAllUnselected(datasetFamily.id)"
             (updateSelectedDatasets)="updateSelectedDatasets.emit($event)">
-        </app-datasets-by-project>
+        </app-datasets-by-family>
     </div>
 </div>
\ No newline at end of file

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

@@ -2,15 +2,15 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { Component, Input, ViewChild } from '@angular/core';
 
 import { DatasetListComponent } from './dataset-list.component';
-import { Project, Dataset } from '../../../metamodel/model';
-import { PROJECT_LIST, DATASET } from '../../../../settings/test-data';
+import { Dataset, Family } from '../../../metamodel/model';
+import { DATASET, DATASET_FAMILY_LIST } from '../../../../settings/test-data';
 
 describe('[SearchMultiple][Datasets] Component: DatasetListComponent', () => {
     @Component({
         selector: `app-host`,
         template: `
             <app-dataset-list
-                [projectList]="projectList"
+                [datasetFamilyList]="datasetFamilyList"
                 [datasetList]="datasetList"
                 [selectedDatasets]="selectedDatasets">
             </app-dataset-list>`
@@ -18,14 +18,14 @@ describe('[SearchMultiple][Datasets] Component: DatasetListComponent', () => {
     class TestHostComponent {
         @ViewChild(DatasetListComponent, { static: false })
         public testedComponent: DatasetListComponent;
-        public projectList: Project[] = PROJECT_LIST;
+        public datasetFamilyList: Family[] = DATASET_FAMILY_LIST;
         public datasetList: Dataset[] = [DATASET];
         public selectedDatasets: string[] = [];
     }
 
-    @Component({ selector: 'app-datasets-by-project', template: '' })
+    @Component({ selector: 'app-datasets-by-family', template: '' })
     class DatasetsByProjectStubComponent {
-        @Input() project: string;
+        @Input() datasetFamily: number;
         @Input() datasetList: Dataset[];
         @Input() selectedDatasets: string[];
         @Input() isAllSelected: boolean;
@@ -54,36 +54,36 @@ describe('[SearchMultiple][Datasets] Component: DatasetListComponent', () => {
         expect(testedComponent).toBeTruthy();
     });
 
-    it('#getProject() should return sorted project list', () => {
-        const sortedProjectList: Project[] = testedComponent.getProject();
-        expect(sortedProjectList.length).toBe(1);
-        expect(sortedProjectList[0].name).toBe('project_1');
+    it('#getDatasetFamilyList() should return sorted project list', () => {
+        const sortedDatasetFamilyList: Family[] = testedComponent.getDatasetFamilyList();
+        expect(sortedDatasetFamilyList.length).toBe(1);
+        expect(sortedDatasetFamilyList[0].label).toBe('Default dataset family');
     });
 
-    it('#getDatasetsByProject() should return dataset list for the given project', () => {
-        const datasetList: Dataset[] = testedComponent.getDatasetsByProject('project_1');
+    it('#getDatasetsByFamily() should return dataset list for the given dataset family', () => {
+        const datasetList: Dataset[] = testedComponent.getDatasetsByFamily(1);
         expect(datasetList.length).toBe(1);
         expect(datasetList[0].name).toBe('cat_1');
     });
 
-    it('#getIsAllSelected() should return true if all datasets of the given project are selected', () => {
+    it('#getIsAllSelected() should return true if all datasets of the given dataset family are selected', () => {
         testHostComponent.selectedDatasets = ['cat_1'];
         testHostFixture.detectChanges();
-        expect(testedComponent.getIsAllSelected('project_1')).toBeTruthy();
+        expect(testedComponent.getIsAllSelected(1)).toBeTruthy();
     });
 
-    it('#getIsAllSelected() should return false if not all datasets of the given project are selected', () => {
-        expect(testedComponent.getIsAllSelected('project_1')).toBeFalsy();
+    it('#getIsAllSelected() should return false if not all datasets of the given dataset family are selected', () => {
+        expect(testedComponent.getIsAllSelected(1)).toBeFalsy();
     });
 
-    it('#getIsAllUnselected() should return true if all datasets of the given project are not selected', () => {
-        expect(testedComponent.getIsAllUnselected('project_1')).toBeTruthy();
+    it('#getIsAllUnselected() should return true if all datasets of the given dataset family are not selected', () => {
+        expect(testedComponent.getIsAllUnselected(1)).toBeTruthy();
     });
 
-    it('#getIsAllUnselected() should return false if not all datasets of the given project are not selected', () => {
+    it('#getIsAllUnselected() should return false if not all datasets of the given dataset family are not selected', () => {
         testHostComponent.selectedDatasets = ['cat_1'];
         testHostFixture.detectChanges();
-        expect(testedComponent.getIsAllUnselected('project_1')).toBeFalsy();
+        expect(testedComponent.getIsAllUnselected(1)).toBeFalsy();
     });
 });
 

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

 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 
-import { Dataset, Project } from '../../../metamodel/model';
+import { Dataset, Family } from '../../../metamodel/model';
+import { sortByDisplay } from '../../../shared/utils';
 
 @Component({
     selector: 'app-dataset-list',
@@ -8,38 +9,38 @@ import { Dataset, Project } from '../../../metamodel/model';
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DatasetListComponent {
-    @Input() projectList: Project[];
+    @Input() datasetFamilyList: Family[];
     @Input() datasetList: Dataset[];
     @Input() selectedDatasets: string[];
     @Output() updateSelectedDatasets: EventEmitter<string[]> = new EventEmitter();
 
 
-    // Return project that contains datasets with cone search enabled
-    // Return projects are sorted by name
-    getProject(): Project[] {
-        const projectNames: string[] = [];
+    // Return dataset families that contains datasets with cone search enabled
+    // Return dataset families are sorted by display
+    getDatasetFamilyList(): Family[] {
+        const familyId: number[] = [];
         this.datasetList.forEach(d => {
-            if (!projectNames.includes(d.project_name)) {
-                projectNames.push(d.project_name);
+            if (!familyId.includes(d.id_dataset_family)) {
+                familyId.push(d.id_dataset_family);
             }
         });
-        return [...this.projectList]
-            .filter(p => projectNames.includes(p.name))
-            .sort((a, b) => a.name.localeCompare(b.name));
+        return this.datasetFamilyList
+            .filter(f => familyId.includes(f.id))
+            .sort(sortByDisplay);
     }
 
-    getDatasetsByProject(projectName: string): Dataset[] {
-        return this.datasetList.filter(d => d.project_name === projectName);
+    getDatasetsByFamily(familyId: number): Dataset[] {
+        return this.datasetList.filter(d => d.id_dataset_family === familyId);
     }
 
-    getIsAllSelected(projectName: string): boolean {
-        const datasetListName = this.getDatasetsByProject(projectName).map(d => d.name);
+    getIsAllSelected(familyId: number): boolean {
+        const datasetListName = this.getDatasetsByFamily(familyId).map(d => d.name);
         const filteredSelectedDatasets = this.selectedDatasets.filter(name => datasetListName.indexOf(name) > -1);
         return datasetListName.length === filteredSelectedDatasets.length;
     }
 
-    getIsAllUnselected(projectName: string): boolean {
-        const datasetListName = this.getDatasetsByProject(projectName).map(d => d.name);
+    getIsAllUnselected(familyId: number): boolean {
+        const datasetListName = this.getDatasetsByFamily(familyId).map(d => d.name);
         const filteredSelectedDatasets = this.selectedDatasets.filter(name => datasetListName.indexOf(name) > -1);
         return filteredSelectedDatasets.length === 0;
     }

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

+.selectbox {
+    height: 200px;
+    overflow-y: auto;
+    border: 1px solid #ced4da;
+    border-radius: .25rem;
+}
+
+.letter-spacing {
+    letter-spacing: 2px;
+}
+
+.selectbox button:hover {
+    background-color: #ECECEC;
+}
+
+.selectbox button:focus {
+    box-shadow: none;
+}
\ No newline at end of file

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

-<p class="mb-3"><em>{{ project.label }}</em></p>
+<p class="mb-3"><em>{{ datasetFamily.label }}</em></p>
 <div class="row mb-1">
     <div class="col pr-1">
         <button (click)="selectAll()" [disabled]="isAllSelected"

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

 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { DatasetsByProjectComponent } from './datasets-by-project.component';
+import { DatasetsByFamilyComponent } from './datasets-by-family.component';
 import { Dataset } from '../../../metamodel/model';
 import { DATASET_LIST } from '../../../../settings/test-data';
 
-describe('[SearchMultiple][Datasets] Component: DatasetsByProjectComponent', () => {
-    let component: DatasetsByProjectComponent;
-    let fixture: ComponentFixture<DatasetsByProjectComponent>;
+describe('[SearchMultiple][Datasets] Component: DatasetsByFamilyComponent', () => {
+    let component: DatasetsByFamilyComponent;
+    let fixture: ComponentFixture<DatasetsByFamilyComponent>;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            declarations: [DatasetsByProjectComponent]
+            declarations: [DatasetsByFamilyComponent]
         });
-        fixture = TestBed.createComponent(DatasetsByProjectComponent);
+        fixture = TestBed.createComponent(DatasetsByFamilyComponent);
         component = fixture.componentInstance;
     });
 
@@ -20,12 +20,12 @@ describe('[SearchMultiple][Datasets] Component: DatasetsByProjectComponent', ()
         expect(component).toBeTruthy();
     });
 
-    it('#getDatasetSortedByDisplay() should sreturn dataset list sorted by display', () => {
-        component.datasetList = DATASET_LIST.filter(d => d.project_name === 'project_1');
+    it('#getDatasetSortedByDisplay() should return dataset list sorted by display', () => {
+        component.datasetList = DATASET_LIST.filter(d => d.id_dataset_family === 2);
         const sortedDatasetList: Dataset[] = component.getDatasetSortedByDisplay();
         expect(sortedDatasetList.length).toEqual(2);
-        expect(sortedDatasetList[0].name).toBe('cat_1');
-        expect(sortedDatasetList[1].name).toBe('cat_2');
+        expect(sortedDatasetList[0].name).toBe('cat_2');
+        expect(sortedDatasetList[1].name).toBe('cat_3');
     });
 
     it('#isSelected() should return true if the given dataset is selected', () => {
@@ -53,16 +53,16 @@ describe('[SearchMultiple][Datasets] Component: DatasetsByProjectComponent', ()
     });
 
     it('#selectAll() should add all datasets to selectedDatasets and raise updateSelectedDatasets event', () => {
-        component.datasetList = DATASET_LIST.filter(d => d.project_name === 'project_1');
+        component.datasetList = DATASET_LIST.filter(d => d.id_dataset_family === 2);
         component.selectedDatasets = [];
-        const expectedSelectedDatasets = ['cat_1', 'cat_2'];
+        const expectedSelectedDatasets = ['cat_3', 'cat_2'];
         component.updateSelectedDatasets.subscribe((event: string[]) => expect(event).toEqual(expectedSelectedDatasets));
         component.selectAll();
     });
 
     it('#unselectAll() should remove all datasets to selectedDatasets and raise updateSelectedDatasets event', () => {
-        component.datasetList = DATASET_LIST.filter(d => d.project_name === 'project_1');
-        component.selectedDatasets = ['cat_1', 'cat_2'];
+        component.datasetList = DATASET_LIST.filter(d => d.id_dataset_family === 2);
+        component.selectedDatasets = ['cat_3', 'cat_2'];
         const expectedSelectedDatasets = [];
         component.updateSelectedDatasets.subscribe((event: string[]) => expect(event).toEqual(expectedSelectedDatasets));
         component.unselectAll();

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

 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
 
-import { Dataset, Project } from '../../../metamodel/model';
+import { Dataset, Family } from '../../../metamodel/model';
 import { sortByDisplay } from '../../../shared/utils';
 
 @Component({
-    selector: 'app-datasets-by-project',
-    templateUrl: 'datasets-by-project.component.html',
+    selector: 'app-datasets-by-family',
+    templateUrl: 'datasets-by-family.component.html',
+    styleUrls: ['datasets-by-family.component.css'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DatasetsByProjectComponent {
-    @Input() project: Project;
+export class DatasetsByFamilyComponent {
+    @Input() datasetFamily: Family;
     @Input() datasetList: Dataset[];
     @Input() selectedDatasets: string[];
     @Input() isAllSelected: boolean;

src/app/search-multiple/components/index.ts

 import { ProgressBarMultipleComponent } from './progress-bar-multiple.component';
 import { SummaryMultipleComponent } from './summary-multiple.component';
 import { DatasetListComponent } from './datasets/dataset-list.component';
-import { DatasetsByProjectComponent } from './datasets/datasets-by-project.component';
+import { DatasetsByFamilyComponent } from './datasets/datasets-by-family.component';
 import { OverviewComponent } from './result/overview.component';
 import { DatasetsResultComponent } from './result/datasets-result.component';
 import { DownloadSectionComponent } from "./result/download-section.component";
@@ -10,7 +10,7 @@ export const dummiesComponents = [
     ProgressBarMultipleComponent,
     SummaryMultipleComponent,
     DatasetListComponent,
-    DatasetsByProjectComponent,
+    DatasetsByFamilyComponent,
     OverviewComponent,
     DatasetsResultComponent,
     DownloadSectionComponent

src/app/search-multiple/components/result/datasets-result.component.html

@@ -3,7 +3,7 @@
         <ng-container *ngFor="let dataset of getOrderedDatasetWithResults()">
             <accordion-group (isOpenChange)="loadData($event, dataset.name)" #ag [panelClass]="'custom-accordion'" [isOpen]="false" class="my-2">
                 <button class="btn btn-link btn-block clearfix" accordion-heading>
-                    <div class="pull-left float-left">
+                    <span class="pull-left float-left">
                         {{ dataset.label }}
                         <span class="badge badge-pill badge-primary">{{ getCount(dataset.name) }}</span>
                         <span *ngIf="getCount(dataset.name) < 2"> object found</span>
@@ -15,7 +15,7 @@
                         <span *ngIf="!ag.isOpen">
                         <span class="fas fa-chevron-down"></span>
                     </span>
-                    </div>
+                    </span>
                 </button>
                 <div *ngIf="!attributeListIsLoaded(dataset.name)" class="text-center">
                     <span class="fas fa-circle-notch fa-spin fa-3x"></span>

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

@@ -4,7 +4,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { DatasetsResultComponent } from './datasets-result.component';
 import { Attribute, Dataset } from '../../../metamodel/model';
 import { Pagination, PaginationOrder } from '../../../shared/datatable/model';
-import { ATTRIBUTE_LIST, DATASET_LIST, PROJECT_LIST } from '../../../../settings/test-data';
+import { ATTRIBUTE_LIST, DATASET_FAMILY_LIST, DATASET_LIST } from '../../../../settings/test-data';
 
 describe('[SearchMultiple][Result] Component: DatasetsResultComponent', () => {
     @Component({ selector: 'app-datatable', template: '' })
@@ -36,7 +36,7 @@ describe('[SearchMultiple][Result] Component: DatasetsResultComponent', () => {
     });
 
     it('#getOrderedDatasetWithResults() should return datasetList with results, ordered by project and display', () => {
-        component.projectList = PROJECT_LIST;
+        component.datasetFamilyList = DATASET_FAMILY_LIST;
         component.datasetList = DATASET_LIST;
         component.datasetsCount = [{ dname: 'cat_1', count: 1 }, { dname: 'cat_3', count: 1 }];
         expect(component.getOrderedDatasetWithResults().length).toEqual(2);

src/app/search-multiple/components/result/datasets-result.component.ts

@@ -3,10 +3,10 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
 import { Dictionary } from '@ngrx/entity';
 
 import { DataByDataset, DatasetCount } from '../../store/model';
-import { Attribute, AttributesByDataset, Dataset, Project } from '../../../metamodel/model';
-import { sortByDisplay } from '../../../shared/utils';
+import { Attribute, AttributesByDataset, Dataset, Family } from '../../../metamodel/model';
 import { Pagination, PaginationOrder } from '../../../shared/datatable/model';
 import { ConeSearch } from '../../../shared/cone-search/store/model';
+import { sortByDisplay } from '../../../shared/utils';
 
 @Component({
     selector: 'app-datasets-result',
@@ -15,7 +15,7 @@ import { ConeSearch } from '../../../shared/cone-search/store/model';
 })
 export class DatasetsResultComponent {
     @Input() datasetsCountIsLoaded: boolean;
-    @Input() projectList: Project[];
+    @Input() datasetFamilyList: Family[];
     @Input() datasetList: Dataset[];
     @Input() coneSearch: ConeSearch;
     @Input() selectedDatasets: string[];
@@ -31,9 +31,9 @@ export class DatasetsResultComponent {
 
     getOrderedDatasetWithResults(): Dataset[] {
         let datasets: Dataset[] = [];
-        const projectOrderedByName: Project[] = [...this.projectList].sort((a, b) => a.name.localeCompare(b.name));
-        projectOrderedByName.forEach(p => {
-            this.datasetList.filter(d => d.project_name === p.name)
+        const sortedDatasetFamilyList: Family[] = [...this.datasetFamilyList].sort(sortByDisplay);
+        sortedDatasetFamilyList.forEach(f => {
+            this.datasetList.filter(d => d.id_dataset_family === f.id)
                 .sort(sortByDisplay)
                 .forEach(d => {
                     this.datasetsCount.forEach(c => {

src/app/search-multiple/components/result/overview.component.html

@@ -17,10 +17,10 @@
                     <li>radius = {{ coneSearch.radius }} arcsecond</li>
                 </ul>
             </div>
-            <div *ngFor="let project of getProjectSortedByName()" class="col-auto">
-                <span class="title">{{ project.label }}</span>
+            <div *ngFor="let datasetFamily of getSortedDatasetFamilyList()" class="col-auto">
+                <span class="title">{{ datasetFamily.label }}</span>
                 <ul class="list-unstyled pl-3">
-                    <li *ngFor="let dataset of getSelectedDatasetsByProject(project.name)" >
+                    <li *ngFor="let dataset of getSelectedDatasetsByFamily(datasetFamily.id)" >
                         {{ dataset.label }} <span class="badge badge-pill badge-light text-danger">0</span>
                     </li>
                 </ul>
@@ -55,10 +55,10 @@
                     <li>radius = {{ coneSearch.radius }} arcsecond</li>
                 </ul>
             </div>
-            <div *ngFor="let project of getProjectSortedByName()" class="col-auto">
-                <span class="title">{{ project.label }}</span>
+            <div *ngFor="let datasetFamily of getSortedDatasetFamilyList()" class="col-auto">
+                <span class="title">{{ datasetFamily.label }}</span>
                 <ul class="list-unstyled pl-3">
-                    <li *ngFor="let dataset of getSelectedDatasetsByProject(project.name)" >
+                    <li *ngFor="let dataset of getSelectedDatasetsByFamily(datasetFamily.id)" >
                         {{ dataset.label }}
                         <span class="badge badge-pill badge-light" [ngClass]="{'text-primary': getCountByDataset(dataset.name) !== 0}">
                             {{ getCountByDataset(dataset.name) }}

src/app/search-multiple/components/result/overview.component.spec.ts

@@ -3,9 +3,9 @@ import { Component, ViewChild } from '@angular/core';
 
 import { OverviewComponent } from './overview.component';
 import { DatasetCount, SearchMultipleQueryParams } from '../../store/model';
-import { Dataset, Project } from '../../../metamodel/model';
+import { Dataset, Family } from '../../../metamodel/model';
 import { ConeSearch } from '../../../shared/cone-search/store/model';
-import { DATASET_LIST, PROJECT_LIST } from '../../../../settings/test-data';
+import { DATASET_FAMILY_LIST, DATASET_LIST } from '../../../../settings/test-data';
 
 describe('[SearchMultiple][Result] Component: OverviewComponent', () => {
     @Component({
@@ -14,7 +14,7 @@ describe('[SearchMultiple][Result] Component: OverviewComponent', () => {
             <app-overview
                 [datasetSearchMetaIsLoaded]='datasetSearchMetaIsLoaded'
                 [coneSearch]='coneSearch'
-                [projectList]='projectList'
+                [datasetFamilyList]='datasetFamilyList'
                 [datasetList]='datasetList'
                 [selectedDatasets]='selectedDatasets'
                 [queryParams]='queryParams'
@@ -27,7 +27,7 @@ describe('[SearchMultiple][Result] Component: OverviewComponent', () => {
         public testedComponent: OverviewComponent;
         public datasetSearchMetaIsLoaded: boolean = false;
         public coneSearch: ConeSearch;
-        public projectList: Project[] = PROJECT_LIST;
+        public datasetFamilyList: Family[] = DATASET_FAMILY_LIST;
         public datasetList: Dataset[] = DATASET_LIST;
         public selectedDatasets: string[];
         public queryParams: SearchMultipleQueryParams;
@@ -64,17 +64,17 @@ describe('[SearchMultiple][Result] Component: OverviewComponent', () => {
         expect(testedComponent.getTotalDatasets()).toEqual(2);
     });
 
-    it('#getProjectSortedByName() should return sorted projectList with selected datasets in it', () => {
+    it('#getSortedDatasetFamilyList() should return sorted dataset family list with selected datasets in it', () => {
         testedComponent.selectedDatasets = ['cat_1', 'cat_2', 'cat_3'];
-        const sortedProjectList: Project[] = testedComponent.getProjectSortedByName();
-        expect(sortedProjectList.length).toEqual(2);
-        expect(sortedProjectList[0].name).toBe('project_1');
-        expect(sortedProjectList[1].name).toBe('project_2');
+        const sortedDatasetFamilyList: Family[] = testedComponent.getSortedDatasetFamilyList();
+        expect(sortedDatasetFamilyList.length).toEqual(2);
+        expect(sortedDatasetFamilyList[0].label).toBe('Default dataset family');
+        expect(sortedDatasetFamilyList[1].label).toBe('Another dataset family');
     });
 
-    it('#getSelectedDatasetsByProject() should return selected dataset that belongs to the given project', () => {
+    it('#getSelectedDatasetsByFamily() should return selected dataset that belongs to the given dataset family', () => {
         testedComponent.selectedDatasets = ['cat_1'];
-        const selectedDatasets: Dataset[] = testedComponent.getSelectedDatasetsByProject('project_1');
+        const selectedDatasets: Dataset[] = testedComponent.getSelectedDatasetsByFamily(1);
         expect(selectedDatasets.length).toEqual(1);
     });
 

src/app/search-multiple/components/result/overview.component.ts

 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 import { DatasetCount, SearchMultipleQueryParams } from '../../store/model';
-import { Dataset, Project } from '../../../metamodel/model';
+import { Dataset, Family } from '../../../metamodel/model';
 import { ConeSearch } from '../../../shared/cone-search/store/model';
+import { sortByDisplay } from '../../../shared/utils';
 
 @Component({
     selector: 'app-overview',
@@ -15,7 +16,7 @@ export class OverviewComponent {
         }
     }
     @Input() coneSearch: ConeSearch;
-    @Input() projectList: Project[];
+    @Input() datasetFamilyList: Family[];
     @Input() datasetList: Dataset[];
     @Input() selectedDatasets: string[];
     @Input() queryParams: SearchMultipleQueryParams;
@@ -36,21 +37,23 @@ export class OverviewComponent {
         return this.datasetsCount.filter(c => c.count > 0).length;
     }
 
-    getProjectSortedByName(): Project[] {
-        let projectWithSelectedDataset: Project[] = [];
+    // Return dataset families that contains datasets with cone search enabled
+    // Returned dataset families are sorted by display
+    getSortedDatasetFamilyList(): Family[] {
+        let datasetFamiliesWithSelectedDataset: Family[] = [];
         this.selectedDatasets.forEach(dname => {
             const dataset: Dataset = this.datasetList.find(d => d.name === dname);
-            const project: Project = this.projectList.find(p => p.name === dataset.project_name);
-            if (!projectWithSelectedDataset.includes(project)) {
-                projectWithSelectedDataset.push(project);
+            const datasetFamily: Family = this.datasetFamilyList.find(f => f.id === dataset.id_dataset_family);
+            if (!datasetFamiliesWithSelectedDataset.includes(datasetFamily)) {
+                datasetFamiliesWithSelectedDataset.push(datasetFamily);
             }
         });
-        return projectWithSelectedDataset.sort((a, b) => a.name.localeCompare(b.name));
+        return datasetFamiliesWithSelectedDataset.sort(sortByDisplay);
     }
 
-    getSelectedDatasetsByProject(projectName: string): Dataset[] {
+    getSelectedDatasetsByFamily(familyId: number): Dataset[] {
         return this.datasetList
-            .filter(d => d.project_name === projectName)
+            .filter(d => d.id_dataset_family === familyId)
             .filter(d => this.selectedDatasets.includes(d.name));
     }
 

src/app/search-multiple/components/summary-multiple.component.html

@@ -31,12 +31,12 @@
             At least 1 dataset required!
         </p>
         <div *ngIf="!noSelectedDatasets">
-            <!-- Accordion projects -->
+            <!-- Accordion Dataset families -->
             <accordion [isAnimated]="true">
-                <accordion-group *ngFor="let project of getProject()" #ag panelClass="abstract-accordion" [isOpen]="accordionProjectIsOpen" class="pl-5">
+                <accordion-group *ngFor="let datasetFamily of getDatasetFamilyList()" #ag panelClass="abstract-accordion" [isOpen]="accordionFamilyIsOpen" class="pl-5">
                     <button class="btn btn-link btn-block clearfix pb-1 text-primary" accordion-heading>
                         <div class="pull-left float-left">
-                            {{ project.label }}
+                            {{ datasetFamily.label }}
                             &nbsp;
                             <span *ngIf="ag.isOpen">
                                 <span class="fas fa-chevron-up"></span>
@@ -48,8 +48,8 @@
                     </button>
 
                     <!-- Selected Datasets -->
-                    <ul *ngIf="getSelectedDatasetsByProject(project.name).length > 0; else noDataset" class="mb-0 pl-4 list-unstyled">
-                        <li *ngFor="let dataset of getSelectedDatasetsByProject(project.name)" class="pb-1">
+                    <ul *ngIf="getSelectedDatasetsByFamily(datasetFamily.id).length > 0; else noDataset" class="mb-0 pl-4 list-unstyled">
+                        <li *ngFor="let dataset of getSelectedDatasetsByFamily(datasetFamily.id)" class="pb-1">
                             {{ dataset.label }}
                         </li>
                     </ul>

src/app/search-multiple/components/summary-multiple.component.spec.ts

@@ -4,7 +4,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AccordionModule } from 'ngx-bootstrap/accordion';
 
 import { SummaryMultipleComponent } from './summary-multiple.component';
-import { DATASET, DATASET_LIST, PROJECT_LIST } from '../../../settings/test-data';
+import { DATASET, DATASET_FAMILY_LIST, DATASET_LIST } from '../../../settings/test-data';
 
 describe('[SearchMultiple] Component: SummaryMultipleComponent', () => {
     let component: SummaryMultipleComponent;
@@ -23,17 +23,17 @@ describe('[SearchMultiple] Component: SummaryMultipleComponent', () => {
         expect(component).toBeTruthy();
     });