From 4f5fe15ac7f93eb99454d0fee741da98202fa8c5 Mon Sep 17 00:00:00 2001 From: Andreas Huber Date: Fri, 27 Dec 2019 18:45:37 +0100 Subject: [PATCH] update plotType drop down on selection The drop down for plot types should only contain plot types that can be combined. The reason is, that we can only draw images with two x/y-axis. Therefore a combination of types that would need three or more axis is not supported. --- pdb-js/src/app/plot.service.ts | 37 +++++++++---------- .../visualization-page.component.html | 2 +- .../visualization-page.component.ts | 16 ++++---- .../plot/api/AggregateHandlerCollection.java | 5 ++- 4 files changed, 29 insertions(+), 31 deletions(-) diff --git a/pdb-js/src/app/plot.service.ts b/pdb-js/src/app/plot.service.ts index 896b638..5f27aa7 100644 --- a/pdb-js/src/app/plot.service.ts +++ b/pdb-js/src/app/plot.service.ts @@ -14,13 +14,13 @@ export class PlotService { constructor(private http: HttpClient) { this.plotTypes = new Array(); this.plotTypes.push(new PlotType("SCATTER","Scatter","scatter-chart2",true,DataType.Time,DataType.Duration)); - this.plotTypes.push(new PlotType("HEATMAP", "Heatmap", "heatmap", false, DataType.Other, DataType.Other)); - this.plotTypes.push(new PlotType("CONTOUR", "Contour", "contour-chart", false, DataType.Time, DataType.Duration)); this.plotTypes.push(new PlotType("CUM_DISTRIBUTION", "Cumulative Distribution", "cumulative-distribution-chart", true, DataType.Percent, DataType.Duration)); this.plotTypes.push(new PlotType("HISTOGRAM", "Histogram", "histogram", true, DataType.HistogramBin, DataType.HistogramCount)); + this.plotTypes.push(new PlotType("PARALLEL", "Parallel Requests", "parallel-requests-chart", true, DataType.Time, DataType.Count)); + this.plotTypes.push(new PlotType("HEATMAP", "Heatmap", "heatmap", false, DataType.Other, DataType.Other)); + this.plotTypes.push(new PlotType("CONTOUR", "Contour", "contour-chart", false, DataType.Time, DataType.Duration)); this.plotTypes.push(new PlotType("RIDGELINES", "Ridgelines", "ridgelines", false, DataType.Other, DataType.Other)); this.plotTypes.push(new PlotType("QQ", "Quantile-Quantile", "quantile-quantile", false, DataType.Other, DataType.Other)); - this.plotTypes.push(new PlotType("PARALLEL", "Parallel Requests", "parallel-requests-chart", true, DataType.Time, DataType.Count)); this.plotTypes.push(new PlotType("VIOLIN", "Violin", "violin-chart", false, DataType.Group, DataType.Duration)); this.plotTypes.push(new PlotType("STRIP", "Strip", "strip-chart", false, DataType.Group, DataType.Duration)); this.plotTypes.push(new PlotType("PIE", "Pie", "pie-chart", false, DataType.Other, DataType.Other)); @@ -92,24 +92,21 @@ export class PlotType { this.yAxis = yAxis; } - compatible(other: PlotType) : boolean { - - const xEqual = this.xAxis === other.xAxis; - const yEqual = this.yAxis === other.yAxis; - const anyIsOther = this.xAxis === DataType.Other - || this.yAxis === DataType.Other - || other.xAxis === DataType.Other - || other.yAxis === DataType.Other; - - var result = xEqual || yEqual; + compatible(others: Array) : boolean { + var result = true; + var other : PlotType; - // if either dimension is Other, then this plot is not compatible with any other plot - result = result && !anyIsOther; - - // is not the same - result = result && this.name != other.name; - return result; - } + var xAxisTypes = new Set([this.xAxis]); + var yAxisTypes = new Set([this.yAxis]); + + for(var i = 0; i < others.length; i++){ + other = others[i]; + xAxisTypes.add(other.xAxis); + yAxisTypes.add(other.yAxis); + } + + return xAxisTypes.size <= 2 && yAxisTypes.size <= 2; + } } export class TagField { 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 2dc0d2e..32b665f 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.html +++ b/pdb-js/src/app/visualization-page/visualization-page.component.html @@ -17,7 +17,7 @@ Type: - + {{plotType.name}} 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 0d4b3a9..c14da85 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.ts +++ b/pdb-js/src/app/visualization-page/visualization-page.component.ts @@ -21,7 +21,7 @@ export class VisualizationPageComponent implements OnInit { dateRange = new FormControl('2019-10-05 00:00:00 - 2019-10-11 23:59:59'); - availablePlotTypes = {}; + availablePlotTypes = []; selectedPlotType = []; plotTypes: Array; @@ -65,7 +65,7 @@ export class VisualizationPageComponent implements OnInit { this.plotTypes = this.plotService.getPlotTypes(); this.selectedPlotType.push(this.plotTypes[0]); - this.plotTypes.forEach(pt => this.availablePlotTypes[pt.name] = pt); + this.availablePlotTypes = [].concat(this.plotTypes); that.plotService.getFilterDefaults().subscribe(function(filterDefaults) { @@ -81,14 +81,12 @@ export class VisualizationPageComponent implements OnInit { }); this.yAxisScale = "LOG10"; } - - getCombinablePlotTypes(selectedMainPlotType) : Array{ - //const mainPlotType = this.availablePlotTypes[selectedMainPlotType]; - const mainPlotType = selectedMainPlotType; - - const compatiblePlotTypes = this.plotTypes.filter(pt => pt.compatible(mainPlotType)); - return compatiblePlotTypes; + + changePlotType(selectedPlotTypes: Array) { + const compatiblePlotTypes = this.availablePlotTypes.filter(pt => pt.compatible(selectedPlotTypes)); + this.plotTypes = compatiblePlotTypes; } + dateRangeAsString() : string { return (document.getElementById("search-date-range")).value; diff --git a/pdb-plotting/src/main/java/org/lucares/pdb/plot/api/AggregateHandlerCollection.java b/pdb-plotting/src/main/java/org/lucares/pdb/plot/api/AggregateHandlerCollection.java index ed2071e..37084e1 100644 --- a/pdb-plotting/src/main/java/org/lucares/pdb/plot/api/AggregateHandlerCollection.java +++ b/pdb-plotting/src/main/java/org/lucares/pdb/plot/api/AggregateHandlerCollection.java @@ -45,7 +45,10 @@ public class AggregateHandlerCollection { // TODO merge axis definitions and use the greater values for: range, // ticsIncrement } else { - Preconditions.checkSmaller(result.size(), 2, "at most two different axis are supported"); + Preconditions.checkSmaller(result.size(), 2, + "At most two different axis are supported. " + + "The combination of plot types needs more than two " + axis + + "-axis. Remove one or more plot types."); final GnuplotAxis mirrorAxis = axis.mirrorAxis(); handler.updateAxis(mirrorAxis); result.add(type);