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

dashboard #1

Merged
andi merged 118 commits from dashboard into master 2024-09-29 06:47:35 +00:00
Conversation 0 Commits 118 Files Changed 130 +138 -62
12 changed files with 138 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 43e13b53b1 - Show all commits

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

@@ -22,6 +22,7 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatRadioModule} from '@angular/material/radio';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatTooltipModule} from '@angular/material/tooltip';
import {OverlayModule} from '@angular/cdk/overlay';
import { YAxisDefinitionComponent } from './y-axis-definition/y-axis-definition.component';
import { QueryAutocompleteComponent } from './query-autocomplete/query-autocomplete.component';
import { LimitByComponent } from './limit-by/limit-by.component';
@@ -101,7 +102,8 @@ import { MarkdownModule } from 'ngx-markdown';
MatTableModule,
MatTooltipModule,
BrowserAnimationsModule,
HttpClientModule
HttpClientModule,
OverlayModule
],
providers: [{provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: true}}],
bootstrap: [AppComponent]

29
pdb-js/src/app/plot-details/plot-details.component.scss
View File

@@ -1,33 +1,4 @@
.plot-details-plotType {
background-image: url(/assets/img/pointTypes.png);
width: 9px;
height: 7px;
transform: scale(1.5);
}
.plot-details-plotType_0 {background-position-x: 0px;}
.plot-details-plotType_1 {background-position-x: -10px;}
.plot-details-plotType_2 {background-position-x: -20px;}
.plot-details-plotType_3 {background-position-x: -30px;}
.plot-details-plotType_4 {background-position-x: -40px;}
.plot-details-plotType_5 {background-position-x: -50px;}
.plot-details-plotType_6 {background-position-x: -60px;}
.plot-details-plotType_7 {background-position-x: -70px;}
.plot-details-plotType_8 {background-position-x: -80px;}
.plot-details-plotType_9 {background-position-x: -90px;}
.plot-details-plotType_10 {background-position-x:-100px;}
.plot-details-plotType_11 {background-position-x:-110px;}
.plot-details-plotType_12 {background-position-x:-120px;}
.plot-details-plotType_0051c2 {background-position-y: 0px;}
.plot-details-plotType_bf8300 {background-position-y: -8px;}
.plot-details-plotType_9400d3 {background-position-y: -16px;}
.plot-details-plotType_00c254 {background-position-y: -24px;}
.plot-details-plotType_e6e600 {background-position-y: -32px;}
.plot-details-plotType_e51e10 {background-position-y: -40px;}
.plot-details-plotType_57a1c2 {background-position-y: -48px;}
.plot-details-plotType_bd36c2 {background-position-y: -56px;}
.gallery-item-details td {

11
pdb-js/src/app/plot-view/plot-view.component.html
View File

@@ -1,3 +1,14 @@
<!---->
<div cdkDrag
[ngClass]="{'hidden': !imageUrl || showStats}"
class="plot-view--legend"
[cdkDragFreeDragPosition]="legendInitialPosition">
<div cdkDragHandle></div>
<ol>
<li *ngFor="let stat of dataSeries()"><div class="{{ pointTypeClass(stat.dashTypeAndColor) }}" title="{{ stat.name }}"></div>{{ stat.name }}</li>
</ol>
</div>
<div
*ngIf="imageUrl">
<div

46
pdb-js/src/app/plot-view/plot-view.component.scss
View File

@@ -21,3 +21,49 @@ img {
box-shadow: 5px 5px 10px 0px #e0e0e0;
overflow: auto;
}
.plot-view--legend {
padding-bottom: 0.5em;
border: solid 1px #ccc;
display: flex;
flex-direction: column;
background: #fff;
border-radius: 4px;
position: fixed;
z-index: 1;
transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
background-color: white;
}
.plot-view--legend:active {
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.plot-view--legend div[cdkDragHandle] {
visibility: hidden;
height: 1.2rem;
}
.plot-view--legend:hover div[cdkDragHandle] {
cursor: move;
visibility: visible;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAF0lEQVQI12P4//8/AwMDhGSEUFCAUwYAJl4R8Z1D4wIAAAAASUVORK5CYII=);
}
.plot-view--legend ol {
padding-inline-start: 0.7em;
}
.plot-view--legend ol li {
list-style-type: none;
display: flex;
flex-direction: row;
align-items: center
}
.plot-view--legend ol li .plot-details-plotType{
margin-right: 0.3em;
}

25
pdb-js/src/app/plot-view/plot-view.component.ts
View File

@@ -1,15 +1,16 @@
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { DataType, AxesTypes, PlotResponseStats, PlotConfig, PlotService, PlotResponse, PlotRequest, RenderOptions } from '../plot.service';
import { Component, Output, EventEmitter } from '@angular/core';
import { DataType, AxesTypes, PlotResponseStats, PlotConfig, PlotService, PlotResponse, PlotRequest, RenderOptions, DataSeriesStats, DashTypeAndColor } from '../plot.service';
import { MatSnackBar } from '@angular/material/snack-bar';
import * as moment from 'moment';
import { WidgetDimensions } from '../dashboard.service';
import { Overlay } from "@angular/cdk/overlay";
@Component({
selector: 'pdb-plot-view',
templateUrl: './plot-view.component.html',
styleUrls: ['./plot-view.component.scss']
})
export class PlotViewComponent implements OnInit {
export class PlotViewComponent {
readonly DATE_PATTERN = "YYYY-MM-DD HH:mm:ss"; // for moment-JS
@@ -18,6 +19,7 @@ export class PlotViewComponent implements OnInit {
readonly gnuplotTMargin = 57; // The top margin configured for gnuplot
readonly gnuplotBMargin = 76; // The bottom margin configured for gnuplot
isOpen = false;
imageUrl! : string;
stats: PlotResponseStats | null = null;
@@ -47,10 +49,9 @@ export class PlotViewComponent implements OnInit {
config? : PlotConfig;
constructor(private service : PlotService, private snackBar: MatSnackBar) { }
legendInitialPosition = {x:115,y:60};
ngOnInit() {
}
constructor(private service : PlotService, private snackBar: MatSnackBar, private overlay: Overlay) { }
showError(message:string) {
@@ -335,6 +336,18 @@ export class PlotViewComponent implements OnInit {
duration: moment.duration(endDate.diff(startDate))
};
}
dataSeries(): Array<DataSeriesStats> {
return this.stats ? this.stats.dataSeriesStats : [];
}
pointTypeClass(typeAndColor: DashTypeAndColor): string {
return "plot-details-plotType"
+" plot-details-plotType_"+typeAndColor.pointType
+" plot-details-plotType_"+typeAndColor.color.toLocaleLowerCase();
}
}
export class SelectionRange {

2
pdb-js/src/app/plot.service.ts
View File

@@ -239,7 +239,7 @@ export class RenderOptions {
constructor(
public height: number,
public width: number,
public keyOutside: boolean,
public showKey: boolean,
public renderLabels: boolean) {}
}

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

@@ -243,7 +243,7 @@ toggleGallery(event: Event){
const config = this.createPlotConfig();
const renderOptions : RenderOptionsMap = {
'main': new RenderOptions(results!.offsetHeight-1, results!.offsetWidth-1, false, true),
'main': new RenderOptions(results!.offsetHeight-1, results!.offsetWidth-1, true, true),
'thumbnail': new RenderOptions(200, 300, false, false),
};

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

@@ -97,6 +97,10 @@ h2 {
margin-block-end: 0.83rem;
}
.hidden {
visibility: hidden;
}
.icon-inline {
width: 1em;
height: 1em;
@@ -247,3 +251,34 @@ markdown tfoot {
markdown pre {
font-family: monospace;
}
.plot-details-plotType {
background-image: url(/assets/img/pointTypes.png);
width: 9px;
height: 7px;
transform: scale(1.5);
}
.plot-details-plotType_0 {background-position-x: 0px;}
.plot-details-plotType_1 {background-position-x: -10px;}
.plot-details-plotType_2 {background-position-x: -20px;}
.plot-details-plotType_3 {background-position-x: -30px;}
.plot-details-plotType_4 {background-position-x: -40px;}
.plot-details-plotType_5 {background-position-x: -50px;}
.plot-details-plotType_6 {background-position-x: -60px;}
.plot-details-plotType_7 {background-position-x: -70px;}
.plot-details-plotType_8 {background-position-x: -80px;}
.plot-details-plotType_9 {background-position-x: -90px;}
.plot-details-plotType_10 {background-position-x:-100px;}
.plot-details-plotType_11 {background-position-x:-110px;}
.plot-details-plotType_12 {background-position-x:-120px;}
.plot-details-plotType_0051c2 {background-position-y: 0px;}
.plot-details-plotType_bf8300 {background-position-y: -8px;}
.plot-details-plotType_9400d3 {background-position-y: -16px;}
.plot-details-plotType_00c254 {background-position-y: -24px;}
.plot-details-plotType_e6e600 {background-position-y: -32px;}
.plot-details-plotType_e51e10 {background-position-y: -40px;}
.plot-details-plotType_57a1c2 {background-position-y: -48px;}
.plot-details-plotType_bd36c2 {background-position-y: -56px;}

10
pdb-plotting/src/main/java/org/lucares/pdb/plot/api/RenderOptions.java
View File

@@ -3,7 +3,7 @@ package org.lucares.pdb.plot.api;
public class RenderOptions {
private int height;
private int width;
private boolean keyOutside;
private boolean showKey;
private boolean renderLabels;
public int getHeight() {
@@ -22,12 +22,12 @@ public class RenderOptions {
this.width = width;
}
public boolean isKeyOutside() {
return keyOutside;
public boolean isShowKey() {
return showKey;
}
public void setKeyOutside(final boolean keyOutside) {
this.keyOutside = keyOutside;
public void setShowKey(final boolean showKey) {
this.showKey = showKey;
}
public boolean isRenderLabels() {

8
pdb-plotting/src/main/java/org/lucares/recommind/logs/GnuplotFileGenerator.java
View File

@@ -50,10 +50,9 @@ public class GnuplotFileGenerator implements Appender {
appendln(result, "set nokey");
} else {
if (settings.isKeyOutside()) {
appendfln(result, "set key outside");
} else {
if (!settings.isShowKey()) {
appendfln(result, "set nokey");
}
// make sure left and right margins are always the same
// this is need to be able to zoom in by selecting a region
// (horizontal: 1 unit = 10px; vertical: 1 unit = 19px)
@@ -62,7 +61,6 @@ public class GnuplotFileGenerator implements Appender {
appendln(result, "set tmargin 3"); // margin 3 -> 57px - marker (1)
appendln(result, "set bmargin 4"); // margin 4 -> 76
}
}
// appendfln(result, "set xrange [-1:1]");
appendfln(result, "set boxwidth 0.5");

10
pdb-plotting/src/main/java/org/lucares/recommind/logs/GnuplotSettings.java
View File

@@ -30,7 +30,7 @@ public class GnuplotSettings {
private YAxisDefinition y1;
private YAxisDefinition y2;
private AggregateHandlerCollection aggregates;
private boolean keyOutside = false;
private boolean showKey = false;
private AxisSettings xAxisSettings = new AxisSettings();
private boolean renderLabels = true;
@@ -101,12 +101,12 @@ public class GnuplotSettings {
return aggregates;
}
public void setKeyOutside(final boolean keyOutside) {
this.keyOutside = keyOutside;
public void setShowKey(final boolean showKey) {
this.showKey = showKey;
}
public boolean isKeyOutside() {
return keyOutside;
public boolean isShowKey() {
return showKey;
}
public void renderLabels(final boolean renderLabels) {

2
pdb-plotting/src/main/java/org/lucares/recommind/logs/Plotter.java
View File

@@ -126,7 +126,7 @@ public class Plotter {
gnuplotSettings.setY1(plotSettings.getY1());
gnuplotSettings.setY2(plotSettings.getY2());
gnuplotSettings.setAggregates(plotSettings.getAggregates());
gnuplotSettings.setKeyOutside(renderOptions.isKeyOutside());
gnuplotSettings.setShowKey(renderOptions.isShowKey());
gnuplotSettings.renderLabels(renderOptions.isRenderLabels());
gnuplot.plot(gnuplotSettings, dataSeries);
}