Adjustment before merging with develop

client/src/app/instance/search/components/result/criteria-list.component.html

+<accordion [isAnimated]="true">
+    <accordion-group #ag panelClass="abstract-accordion lead" [isOpen]="true" class="mt-2">
+        <button class="btn btn-link btn-block clearfix pb-1" accordion-heading>
+            <div class="pull-left float-left font-weight-bold">
+                Search criteria
+                &nbsp;
+                <span *ngIf="ag.isOpen">
+                    <span class="fas fa-chevron-up"></span>
+                </span>
+                <span *ngIf="!ag.isOpen">
+                    <span class="fas fa-chevron-down"></span>
+                </span>
+            </div>
+        </button>
+
+        <!-- Criteria list -->
+        <ul>
+            <li *ngFor="let criterion of criteriaList">
+                {{ getAttribute(criterion.id).form_label }} {{ printCriterion(criterion) }}
+            </li>
+        </ul>
+    </accordion-group>
+</accordion>

client/src/app/instance/search/components/result/criteria-list.component.ts

+/**
+ * This file is part of Anis Client.
+ *
+ * @copyright Laboratoire d'Astrophysique de Marseille / CNRS
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+
+import { Criterion, getPrettyCriterion } from 'src/app/instance/store/models';
+import { Attribute } from 'src/app/metamodel/models';
+
+@Component({
+    selector: 'app-criteria-list',
+    templateUrl: 'criteria-list.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CriteriaListComponent {
+    @Input() criteriaList: Criterion[];
+    @Input() attributeList: Attribute[];
+
+    /**
+     * Returns attribute for the given attribute ID.
+     *
+     * @param  {number} id - The attribute ID.
+     *
+     * @return Attribute
+     */
+    getAttribute(id: number): Attribute {
+        return this.attributeList.find(attribute => attribute.id === id);
+    }
+
+    /**
+     * Returns pretty print of the given criterion.
+     *
+     * @param  {Criterion} criterion - The criterion.
+     *
+     * @return string
+     */
+    printCriterion(criterion: Criterion): string {
+        return getPrettyCriterion(criterion);
+    }
+}

client/src/app/instance/search/components/result/index.ts

@@ -4,6 +4,7 @@ import { DatatableActionsComponent } from './datatable-actions.component';
 import { UrlDisplayComponent } from './url-display.component';
 import { DatatableComponent } from './datatable.component';
 import { ConeSearchPlotComponent } from './cone-search-plot.component';
+import { CriteriaListComponent } from './criteria-list.component';
 import { rendererComponents } from './renderer';
 
 export const resultComponents = [
@@ -13,5 +14,6 @@ export const resultComponents = [
     DatatableActionsComponent,
     ConeSearchPlotComponent,
     DownloadResultComponent,
+    CriteriaListComponent,
     rendererComponents
 ];

client/src/app/instance/search/containers/result.component.html

@@ -22,19 +22,15 @@
             <div class="jumbotron row mb-4 py-4">
                 <div class="col">
                     <div class="lead">
-                        Dataset <span class="font-weight-bold">{{ (dataset | async).label }}</span> 
-                        selected with <span class="font-weight-bold">{{ dataLength | async }}</span> objects found.
-                        <div  *ngIf="(criteriaList | async) as criteriaList">
-                            <span *ngIf="criteriaList.length">Search criteria :</span>
-                            <ul>
-                              
-                                <li *ngFor="let criterion of criteriaList">
-                                    {{ getAttribute(criterion.id).form_label }} {{ printCriterion(criterion) }}
-    
-                                </li>
-    
-                            </ul>
-                        </div>
+                        <span class="font-weight-bold">{{ dataLength | async }}</span> objects found in the 
+                        <span class="font-weight-bold">{{ (dataset | async).label }}</span> dataset 
+                        <span *ngIf="(criteriaList | async).length > 0">
+                            with <span class="font-weight-bold">{{ (criteriaList | async).length }}</span> search criteria.
+                        </span>
+                        <app-criteria-list *ngIf="(criteriaList | async).length > 0"
+                            [criteriaList]="criteriaList | async"
+                            [attributeList]="attributeList | async">
+                        </app-criteria-list>
                     </div>
                     <div class="lead mt-4">
                         <app-download-result

client/src/app/instance/search/containers/result.component.ts

@@ -10,11 +10,11 @@
 import { Component } from '@angular/core';
 
 import { Store } from '@ngrx/store';
-import { map, Observable, of, Subscription } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 
 import { AbstractSearchComponent } from './abstract-search.component';
-import { Criterion, getPrettyCriterion, Pagination } from '../../store/models';
-import { Instance, Dataset, Image, ConeSearchConfig, Attribute } from 'src/app/metamodel/models';
+import { Pagination } from '../../store/models';
+import { Instance, Dataset, Image, ConeSearchConfig } from 'src/app/metamodel/models';
 import * as instanceSelector from 'src/app/metamodel/selectors/instance.selector';
 import * as searchActions from '../../store/actions/search.actions';
 import * as searchSelector from '../../store/selectors/search.selector';
@@ -167,39 +167,4 @@ export class ResultComponent extends AbstractSearchComponent {
         if (this.pristineSubscription) this.pristineSubscription.unsubscribe();
         super.ngOnDestroy();
     }
-    
-    /**
-     * Returns attribute for the given attribute ID.
-     *
-     * @param  {number} id - The attribute ID.
-     *
-     * @return Attribute
-     */
-    getAttribute(id: number): Attribute {
-        
-        const attributeList = this.attributeList;
-        let findAttribute : Attribute;
-        attributeList.subscribe(attributeList => {
-            // find the attribute
-            const attribute =  attributeList.find(attribute => attribute.id === id)
-            findAttribute = attribute;  
-          });
-
-        return findAttribute;
-    }
-
-    /**
-     * Returns pretty print of the given criterion.
-     *
-     * @param  {Criterion} criterion - The criterion.
-     *
-     * @return string
-     */
-     printCriterion(criterion: Criterion): string {
-        return getPrettyCriterion(criterion);
-    }
-
-
-    
-
 }