add sorting for gallery

pdb-js/src/app/app.module.ts

@@ -23,6 +23,7 @@ import { QueryAutocompleteComponent } from './query-autocomplete/query-autocompl
 import { LimitByComponent } from './limit-by/limit-by.component';
 import { PlotViewComponent } from './plot-view/plot-view.component';
 import { GalleryViewComponent, GalleryItemView } from './gallery-view/gallery-view.component';
+import { ImageToggleComponent } from './image-toggle/image-toggle.component';
 
 @NgModule({
   declarations: [
@@ -36,7 +37,8 @@ import { GalleryViewComponent, GalleryItemView } from './gallery-view/gallery-vi
     LimitByComponent,
     PlotViewComponent,
     GalleryViewComponent,
-    GalleryItemView
+    GalleryItemView,
+    ImageToggleComponent
   ],
   imports: [
     BrowserModule,

pdb-js/src/app/gallery-view/gallery-view.component.html

@@ -1,4 +1,27 @@
-<div id="gallery" class="card-grid-300">
+<div
+  *ngIf="show" 
+  id="gallery-filters">
+    
+    <mat-form-field class="pdb-form-wide">
+      <mat-label>Sort By:</mat-label>
+      <mat-select [(value)]="sortBy">
+        <mat-option value="NAME">name</mat-option>
+        <mat-option value="MAX_VALUE">max value</mat-option>
+        <mat-option value="AVERAGE">average</mat-option>
+        <mat-option value="VALUES">#values</mat-option>
+        <mat-option value="PLOTTED_VALUES">#plotted values</mat-option>
+      </mat-select>
+    </mat-form-field>
+    
+    <div class="pdb-form-icon-small">
+      <pdb-image-toggle images="{{ascDescImages}}" (valueChanged)="sortOrderChanged($event)"></pdb-image-toggle>
+    </div>
+    
+  </div>
+<div
+  *ngIf="show" 
+  id="gallery" 
+  class="card-grid-300">
   <pdb-gallery-item-view
     *ngFor="let galleryItem of galleryItems" [data]="galleryItem">
   </pdb-gallery-item-view>

pdb-js/src/app/gallery-view/gallery-view.component.scss

@@ -1,7 +1,18 @@
-.card-grid-300 {
-  display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 300px));
-    grid-gap: 10px;
-    padding: 10px;
+
+#gallery-filters{
+  padding: 0.5em 0.5em 0em 0.5em;
+  margin: 0 1em 0em 0em;
+  border-radius: 5px;
+  background-color: #f8f8f8;
+}
+
+
+.card-grid-300 {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 300px));
+  grid-gap: 10px;
+  padding: 10px;
+  overflow-y: auto;
+  height: calc(100% - 4.5em);
 }
 

pdb-js/src/app/gallery-view/gallery-view.component.ts

@@ -12,7 +12,24 @@ export class GalleryViewComponent implements OnInit {
 
   galleryItems: Array<GalleryItem> = new Array<GalleryItem>();
   
+  show = false;
+  
   splitByValuesQueue = new Array<string>();
+  
+  _sortBy= "NAME";
+  
+  sortOrder = 0;
+  
+  ascDescImages = JSON.stringify([
+    {
+      imageUrl: 'assets/img/ascending-filter.svg',
+      title: 'ascending'
+    },
+    {
+      imageUrl: 'assets/img/descending-filter.svg',
+      title: 'descending'
+    }
+  ]);
 
   constructor(private plotService: PlotService, private snackBar: MatSnackBar) {
   }
@@ -27,6 +44,28 @@ export class GalleryViewComponent implements OnInit {
   ngOnInit() {
   }
   
+  sortGallery() {
+    const orderFactor = this.sortOrder == 0 ? 1 : -1; // ASC=1, DESC=-1
+
+    switch (this._sortBy) {
+      case "NAME":
+        this.galleryItems.sort(function(a, b){return orderFactor*a.splitByValue.localeCompare(b.splitByValue);});
+        break;
+      case "VALUES":
+        this.galleryItems.sort(function(a, b){return orderFactor*(a.stats.values - b.stats.values);});
+        break;
+      case "PLOTTED_VALUES":
+        this.galleryItems.sort(function(a, b){return orderFactor*(a.stats.plottedValues - b.stats.plottedValues);});
+        break;
+      case "MAX_VALUE":
+        this.galleryItems.sort(function(a, b){return orderFactor*(a.stats.maxValue - b.stats.maxValue);});
+        break;
+      case "AVERAGE":
+        this.galleryItems.sort(function(a, b){return orderFactor*(a.stats.average - b.stats.average);});
+        break;
+    }
+  }
+  
   renderGallery(request: PlotRequest, splitByField: string) {
     const that=this;
     
@@ -64,12 +103,25 @@ export class GalleryViewComponent implements OnInit {
       plotResponse.imageUrl = "http://"+window.location.hostname+':8080/'+plotResponse.imageUrl;
       let galleryItem = new GalleryItem(splitByValue, plotResponse);
       that.galleryItems.push(galleryItem);
+      that.sortGallery();
       that.renderGalleryRecursively(masterRequest, splitByField);
     },
     error => {
       that.showError(error.error.message);
     });
   }
+  
+  set sortBy(name: string) {
+    this._sortBy = name;
+    this.sortGallery();
+  }
+
+  get sortBy(): string { return this._sortBy; }
+ 
+  sortOrderChanged(event){
+    this.sortOrder = event;
+    this.sortGallery();
+  }
 
 }
 

pdb-js/src/app/image-toggle/image-toggle.component.html

@@ -0,0 +1 @@
+<img src="{{imageUrl()}}" (click)="toggle($event)" class="icon-small" title="{{title()}}" />

pdb-js/src/app/image-toggle/image-toggle.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ImageToggleComponent } from './image-toggle.component';
+
+describe('ImageToggleComponent', () => {
+  let component: ImageToggleComponent;
+  let fixture: ComponentFixture<ImageToggleComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ImageToggleComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ImageToggleComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

pdb-js/src/app/image-toggle/image-toggle.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'pdb-image-toggle',
+  templateUrl: './image-toggle.component.html',
+  styleUrls: ['./image-toggle.component.scss']
+})
+export class ImageToggleComponent implements OnInit {
+
+  @Input()
+  images : string = "";
+  
+  value: number = 0;
+  
+  @Output()
+  valueChanged : EventEmitter<number> = new EventEmitter<number>();
+  
+  _states : Array<any>;
+
+  constructor() { }
+
+  ngOnInit() {
+    this._states = JSON.parse(this.images);
+  }
+  
+  imageUrl() : string {
+    return this._states[this.value].imageUrl;
+  }
+  
+  title() : string {
+    return this._states[this.value].title;
+  }
+
+  toggle(event){
+    this.value = (this.value+1) % this._states.length;
+    this.valueChanged.emit(this.value);
+  }
+}

pdb-js/src/app/visualization-page/visualization-page.component.html

@@ -4,7 +4,7 @@
   </div>
   
   <div id="date-box">
-    <mat-form-field class="mat-field-full-width">
+    <mat-form-field>
         <mat-label>Date Range:</mat-label>
         <input matInput id="search-date-range" value="dateRange" name="dates" (input)="changeDate($event)"  />
         <input type="hidden" id="hidden-search-date-range" [(ngModel)]="hiddenSearchDateRange" />
@@ -15,7 +15,7 @@
     <div id="filterpanel">
       
 
-      <mat-form-field class="mat-field-full-width">
+      <mat-form-field>
         <mat-label>Type:</mat-label>
         <mat-select [formControl]="selectedPlotType">
           <mat-option *ngFor="let plotType of plotTypes" [value]="plotType">
@@ -88,6 +88,7 @@
       </div>
     </div>
   </div>
+  
   <div id="results">
     <pdb-plot-view
       #plotView 

pdb-js/src/app/visualization-page/visualization-page.component.scss

@@ -59,8 +59,7 @@
 #results {
   grid-area: results;
   overflow: hidden;
-  position:relative; /* ??? */ 
-  overflow-y: scroll;
+  position:relative;
 }
 
 #plot-button-bar {

pdb-js/src/app/visualization-page/visualization-page.component.ts

@@ -112,6 +112,7 @@ export class VisualizationPageComponent implements OnInit {
   gallery(){
     const that = this;
     this.plotView.imageUrl = '';
+    that.galleryView.show=true;
     const request = this.createPlotRequest();
     this.galleryView.renderGallery(request, this.splitBy.name);
   }
@@ -120,6 +121,7 @@ export class VisualizationPageComponent implements OnInit {
     const that = this;
     
     that.plotView.imageUrl = '';
+    that.galleryView.show=false;
     
     const request = this.createPlotRequest();