From 70fb84d6347ce6946eb1ca19c3905ccf37b19387 Mon Sep 17 00:00:00 2001
From: Andreas Huber <bitbucket@lucares.de>
Date: Sun, 17 Nov 2019 09:36:37 +0100
Subject: [PATCH] add sorting for gallery

---
 pdb-js/src/app/app.module.ts                  |  4 +-
 .../gallery-view/gallery-view.component.html  | 25 ++++++-
 .../gallery-view/gallery-view.component.scss  | 21 ++++--
 .../gallery-view/gallery-view.component.ts    | 52 ++++++++++++++
 .../image-toggle/image-toggle.component.html  |  1 +
 .../image-toggle/image-toggle.component.scss  |  0
 .../image-toggle.component.spec.ts            | 25 +++++++
 .../image-toggle/image-toggle.component.ts    | 38 ++++++++++
 .../visualization-page.component.html         |  5 +-
 .../visualization-page.component.scss         |  3 +-
 .../visualization-page.component.ts           |  2 +
 pdb-js/src/assets/img/ascending-filter.svg    | 70 ++++++++++++++++++-
 pdb-js/src/assets/img/descending-filter.svg   | 67 +++++++++++++++++-
 pdb-js/src/styles.scss                        | 10 +++
 14 files changed, 310 insertions(+), 13 deletions(-)
 create mode 100644 pdb-js/src/app/image-toggle/image-toggle.component.html
 create mode 100644 pdb-js/src/app/image-toggle/image-toggle.component.scss
 create mode 100644 pdb-js/src/app/image-toggle/image-toggle.component.spec.ts
 create mode 100644 pdb-js/src/app/image-toggle/image-toggle.component.ts

diff --git a/pdb-js/src/app/app.module.ts b/pdb-js/src/app/app.module.ts
index 579a93c..e8aaf6d 100644
--- a/pdb-js/src/app/app.module.ts
+++ b/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,
diff --git a/pdb-js/src/app/gallery-view/gallery-view.component.html b/pdb-js/src/app/gallery-view/gallery-view.component.html
index 094ce5f..b68101e 100644
--- a/pdb-js/src/app/gallery-view/gallery-view.component.html
+++ b/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>
diff --git a/pdb-js/src/app/gallery-view/gallery-view.component.scss b/pdb-js/src/app/gallery-view/gallery-view.component.scss
index c25801b..dea0b1b 100644
--- a/pdb-js/src/app/gallery-view/gallery-view.component.scss
+++ b/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);
 }
 
diff --git a/pdb-js/src/app/gallery-view/gallery-view.component.ts b/pdb-js/src/app/gallery-view/gallery-view.component.ts
index 16d9e9f..0e4c104 100644
--- a/pdb-js/src/app/gallery-view/gallery-view.component.ts
+++ b/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();
+  }
 
 }
 
diff --git a/pdb-js/src/app/image-toggle/image-toggle.component.html b/pdb-js/src/app/image-toggle/image-toggle.component.html
new file mode 100644
index 0000000..1738d6f
--- /dev/null
+++ b/pdb-js/src/app/image-toggle/image-toggle.component.html
@@ -0,0 +1 @@
+<img src="{{imageUrl()}}" (click)="toggle($event)" class="icon-small" title="{{title()}}" />
diff --git a/pdb-js/src/app/image-toggle/image-toggle.component.scss b/pdb-js/src/app/image-toggle/image-toggle.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/pdb-js/src/app/image-toggle/image-toggle.component.spec.ts b/pdb-js/src/app/image-toggle/image-toggle.component.spec.ts
new file mode 100644
index 0000000..2f7cc73
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/pdb-js/src/app/image-toggle/image-toggle.component.ts b/pdb-js/src/app/image-toggle/image-toggle.component.ts
new file mode 100644
index 0000000..65d0c49
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.html b/pdb-js/src/app/visualization-page/visualization-page.component.html
index cbba769..9dfc187 100644
--- a/pdb-js/src/app/visualization-page/visualization-page.component.html
+++ b/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 
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.scss b/pdb-js/src/app/visualization-page/visualization-page.component.scss
index f94aeee..da9349f 100644
--- a/pdb-js/src/app/visualization-page/visualization-page.component.scss
+++ b/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 {
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.ts b/pdb-js/src/app/visualization-page/visualization-page.component.ts
index f7fcbc8..735fc30 100644
--- a/pdb-js/src/app/visualization-page/visualization-page.component.ts
+++ b/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();
     
diff --git a/pdb-js/src/assets/img/ascending-filter.svg b/pdb-js/src/assets/img/ascending-filter.svg
index bf23478..6150788 100644
--- a/pdb-js/src/assets/img/ascending-filter.svg
+++ b/pdb-js/src/assets/img/ascending-filter.svg
@@ -1 +1,69 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640"><path d="M318.972 530.227c141.427 0-58.536.024 82.879.024l.024-81.155c-141.427 0 58.524-.012-82.903-.012v81.143zM88.123 467.12V0h128.458v467.12h72.26L152.33 640 15.863 467.12h72.26zm368.52-72.639c-121.112.012-16.571 0-137.671 0v-81.143h137.671v81.143zM318.972 122.954c228.121 0 77.02.012 305.142.012l.035-81.143c-228.133 0-77.056-.035-305.177-.035v81.166zm0 135.77c95.848 0 112.112.011 207.947.011l.012-81.178H318.97v81.166z"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="64"
+   height="64"
+   shape-rendering="geometricPrecision"
+   text-rendering="geometricPrecision"
+   image-rendering="optimizeQuality"
+   fill-rule="evenodd"
+   clip-rule="evenodd"
+   viewBox="0 0 640 640"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="ascending-filter.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1533"
+     inkscape:window-height="1145"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="10.429825"
+     inkscape:cx="32"
+     inkscape:cy="32"
+     inkscape:window-x="67"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <g
+     id="g833">
+    <path
+       sodipodi:nodetypes="ccccccccccccccccccccc"
+       inkscape:connector-curvature="0"
+       id="path2"
+       d="m 318.972,150.7725 c 141.427,0 -58.536,-0.024 82.879,-0.024 l 0.024,81.155 c -141.427,0 58.524,0.012 -82.903,0.012 z m 137.671,135.746 c -121.112,-0.012 -16.571,0 -137.671,0 v 81.143 h 137.671 z m -137.671,271.527 c 228.121,0 77.02,-0.012 305.142,-0.012 l 0.035,81.143 c -228.133,0 -77.056,0.035 -305.177,0.035 z m 0,-135.77 c 95.848,0 112.112,-0.011 207.947,-0.011 l 0.012,81.178 H 318.97 v -81.166 z" />
+  </g>
+  <path
+     style="stroke-width:1"
+     d="M 88.121,467.12 V -2.500002e-7 H 216.579 V 467.12 h 72.26 L 152.328,640 15.861001,467.12 Z"
+     id="path2-3"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccc" />
+</svg>
diff --git a/pdb-js/src/assets/img/descending-filter.svg b/pdb-js/src/assets/img/descending-filter.svg
index b3e8196..9753e1a 100644
--- a/pdb-js/src/assets/img/descending-filter.svg
+++ b/pdb-js/src/assets/img/descending-filter.svg
@@ -1 +1,66 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 640 640"><path d="M88.123 172.88V640h128.458V172.88h72.26L152.33 0 15.863 172.88h72.26zm230.85 385.965c228.12 0 77.02-.024 305.141-.024l.036 81.155c-228.133 0-77.057.023-305.177.023v-81.154zm0-407.285c141.426 0-58.537-.024 82.878-.024l.024 81.167c-141.427 0 58.524.012-82.903.012V151.56zm137.67 135.758c-121.112-.012-16.571 0-137.67 0v81.143h137.67v-81.143zm-137.67 135.746c95.847 0 112.111-.012 207.946-.012l.012 81.178H318.97v-81.166z"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="64"
+   height="64"
+   shape-rendering="geometricPrecision"
+   text-rendering="geometricPrecision"
+   image-rendering="optimizeQuality"
+   fill-rule="evenodd"
+   clip-rule="evenodd"
+   viewBox="0 0 640 640"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="descending-filter.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1533"
+     inkscape:window-height="1145"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="14.75"
+     inkscape:cx="32"
+     inkscape:cy="30.857724"
+     inkscape:window-x="67"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4" />
+  <path
+     d="M 88.123,467.12 V 0 h 128.458 v 467.12 h 72.26 L 152.33,640 15.863,467.12 Z"
+     id="path2"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccc" />
+  <path
+     style="stroke-width:1"
+     d="m 333.5147,231.5125 c 228.12,0 77.02,0.024 305.141,0.024 l 0.036,-81.155 c -228.133,0 -77.057,-0.023 -305.177,-0.023 z m 0,407.285 c 141.426,0 -58.537,0.024 82.878,0.024 l 0.024,-81.167 c -141.427,0 58.524,-0.012 -82.903,-0.012 v 81.155 z m 137.67,-135.758 c -121.112,0.012 -16.571,0 -137.67,0 v -81.143 h 137.67 z m -137.67,-135.746 c 95.847,0 112.111,0.012 207.946,0.012 l 0.012,-81.178 h -207.961 v 81.166 z"
+     id="path2-3"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccsccccscccccsccccs" />
+</svg>
diff --git a/pdb-js/src/styles.scss b/pdb-js/src/styles.scss
index 2ce1286..4c24d1f 100644
--- a/pdb-js/src/styles.scss
+++ b/pdb-js/src/styles.scss
@@ -93,9 +93,19 @@ mat-form-field:last-child {
 mat-form-field.pdb-form-number {
   width: 3.5em;
 }
+.pdb-form-icon-small {
+  display: inline-block;
+  width: 2em;
+  vertical-align: middle;
+}
 mat-form-field.pdb-form-mid {
   width: 7.5em;
 }
+mat-form-field.pdb-form-wide {
+  width: 10em;
+}
+
+
 
 
 .errorPanel {