andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

add sorting for gallery

Browse Source
This commit is contained in:
Andreas Huber
2019-11-17 09:36:37 +01:00
parent 73ea635ac1
commit 70fb84d634
14 changed files with 310 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
pdb-js/src/app/app.module.ts
View File

@@ -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,

25
pdb-js/src/app/gallery-view/gallery-view.component.html
View File

@@ -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>

11
pdb-js/src/app/gallery-view/gallery-view.component.scss
View File

@@ -1,7 +1,18 @@
#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);
}

52
pdb-js/src/app/gallery-view/gallery-view.component.ts
View File

@@ -12,8 +12,25 @@ 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,6 +103,7 @@ 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 => {
@@ -71,6 +111,18 @@ export class GalleryViewComponent implements OnInit {
});
}
set sortBy(name: string) {
this._sortBy = name;
this.sortGallery();
}
get sortBy(): string { return this._sortBy; }
sortOrderChanged(event){
this.sortOrder = event;
this.sortGallery();
}
}
@Component({

1
pdb-js/src/app/image-toggle/image-toggle.component.html Normal file
View File

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

0
pdb-js/src/app/image-toggle/image-toggle.component.scss Normal file
View File

25
pdb-js/src/app/image-toggle/image-toggle.component.spec.ts Normal file
View File

@@ -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();
});
});

38
pdb-js/src/app/image-toggle/image-toggle.component.ts Normal file
View File

@@ -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);
}
}

5
pdb-js/src/app/visualization-page/visualization-page.component.html
View File

@@ -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

3
pdb-js/src/app/visualization-page/visualization-page.component.scss
View File

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

2
pdb-js/src/app/visualization-page/visualization-page.component.ts
View File

@@ -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();

70
pdb-js/src/assets/img/ascending-filter.svg
View File

@@ -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>
<?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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 665 B

After

Width:  |  Height:  |  Size: 2.3 KiB

67
pdb-js/src/assets/img/descending-filter.svg
View File

@@ -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>
<?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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 668 B

After

Width:  |  Height:  |  Size: 2.3 KiB

10
pdb-js/src/styles.scss
View File

@@ -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 {