diff --git a/pdb-js/src/app/app.module.ts b/pdb-js/src/app/app.module.ts index 62361bb..deebe3a 100644 --- a/pdb-js/src/app/app.module.ts +++ b/pdb-js/src/app/app.module.ts @@ -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] diff --git a/pdb-js/src/app/plot-details/plot-details.component.scss b/pdb-js/src/app/plot-details/plot-details.component.scss index 25d86f2..4314ab6 100644 --- a/pdb-js/src/app/plot-details/plot-details.component.scss +++ b/pdb-js/src/app/plot-details/plot-details.component.scss @@ -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 { diff --git a/pdb-js/src/app/plot-view/plot-view.component.html b/pdb-js/src/app/plot-view/plot-view.component.html index a5a5dd5..626cbe0 100644 --- a/pdb-js/src/app/plot-view/plot-view.component.html +++ b/pdb-js/src/app/plot-view/plot-view.component.html @@ -1,3 +1,14 @@ + + +
+
+
    +
  1. {{ stat.name }}
    2. +
+
{ + 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 { diff --git a/pdb-js/src/app/plot.service.ts b/pdb-js/src/app/plot.service.ts index b8e15d4..b4c4a20 100644 --- a/pdb-js/src/app/plot.service.ts +++ b/pdb-js/src/app/plot.service.ts @@ -239,7 +239,7 @@ export class RenderOptions { constructor( public height: number, public width: number, - public keyOutside: boolean, + public showKey: boolean, public renderLabels: boolean) {} } 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 9cec794..63141e3 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.ts +++ b/pdb-js/src/app/visualization-page/visualization-page.component.ts @@ -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), }; diff --git a/pdb-js/src/styles.scss b/pdb-js/src/styles.scss index f677bfc..30aa5cf 100644 --- a/pdb-js/src/styles.scss +++ b/pdb-js/src/styles.scss @@ -97,6 +97,10 @@ h2 { margin-block-end: 0.83rem; } +.hidden { + visibility: hidden; +} + .icon-inline { width: 1em; height: 1em; @@ -246,4 +250,35 @@ markdown tfoot { markdown pre { font-family: monospace; -} \ No newline at end of file +} + + +.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;} diff --git a/pdb-plotting/src/main/java/org/lucares/pdb/plot/api/RenderOptions.java b/pdb-plotting/src/main/java/org/lucares/pdb/plot/api/RenderOptions.java index 840242f..0a3bcb1 100644 --- a/pdb-plotting/src/main/java/org/lucares/pdb/plot/api/RenderOptions.java +++ b/pdb-plotting/src/main/java/org/lucares/pdb/plot/api/RenderOptions.java @@ -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() { diff --git a/pdb-plotting/src/main/java/org/lucares/recommind/logs/GnuplotFileGenerator.java b/pdb-plotting/src/main/java/org/lucares/recommind/logs/GnuplotFileGenerator.java index 5126ba4..15e5024 100644 --- a/pdb-plotting/src/main/java/org/lucares/recommind/logs/GnuplotFileGenerator.java +++ b/pdb-plotting/src/main/java/org/lucares/recommind/logs/GnuplotFileGenerator.java @@ -50,18 +50,16 @@ public class GnuplotFileGenerator implements Appender { appendln(result, "set nokey"); } else { - if (settings.isKeyOutside()) { - appendfln(result, "set key outside"); - } else { - - // 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) - appendln(result, "set lmargin 11"); // margin 11 -> 110px - appendln(result, "set rmargin 11"); // margin 11 -> 110px - appendln(result, "set tmargin 3"); // margin 3 -> 57px - marker (1) - appendln(result, "set bmargin 4"); // margin 4 -> 76 + 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) + appendln(result, "set lmargin 11"); // margin 11 -> 110px + appendln(result, "set rmargin 11"); // margin 11 -> 110px + appendln(result, "set tmargin 3"); // margin 3 -> 57px - marker (1) + appendln(result, "set bmargin 4"); // margin 4 -> 76 } // appendfln(result, "set xrange [-1:1]"); diff --git a/pdb-plotting/src/main/java/org/lucares/recommind/logs/GnuplotSettings.java b/pdb-plotting/src/main/java/org/lucares/recommind/logs/GnuplotSettings.java index d12e35f..7d3373b 100644 --- a/pdb-plotting/src/main/java/org/lucares/recommind/logs/GnuplotSettings.java +++ b/pdb-plotting/src/main/java/org/lucares/recommind/logs/GnuplotSettings.java @@ -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) { diff --git a/pdb-plotting/src/main/java/org/lucares/recommind/logs/Plotter.java b/pdb-plotting/src/main/java/org/lucares/recommind/logs/Plotter.java index dcd473e..4498d2b 100644 --- a/pdb-plotting/src/main/java/org/lucares/recommind/logs/Plotter.java +++ b/pdb-plotting/src/main/java/org/lucares/recommind/logs/Plotter.java @@ -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); }