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

@@ -14,13 +14,13 @@ export class PlotService {
   constructor(private http: HttpClient) {
     this.plotTypes = new Array<PlotType>();
     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,23 +92,20 @@ export class PlotType {
     this.yAxis = yAxis;
   }
   
-  compatible(other: PlotType) : boolean {
+  compatible(others: Array<PlotType>) : boolean {
+    var result = true;
+    var other : PlotType;
     
-    const xEqual = this.xAxis === other.xAxis;
+    var xAxisTypes = new Set([this.xAxis]);
-    const yEqual = this.yAxis === other.yAxis;
+    var yAxisTypes = new Set([this.yAxis]);
-    const anyIsOther = this.xAxis === DataType.Other 
-                      || this.yAxis === DataType.Other 
-                      || other.xAxis === DataType.Other 
-                      || other.yAxis === DataType.Other;
   
-    var result = xEqual || yEqual;
+    for(var i = 0; i < others.length; i++){
+      other = others[i];
+      xAxisTypes.add(other.xAxis);
+      yAxisTypes.add(other.yAxis);
+    }
   
-    // if either dimension is Other, then this plot is not compatible with any other plot
+    return xAxisTypes.size <= 2 && yAxisTypes.size <= 2;
-    result = result && !anyIsOther;
-    
-    // is not the same
-    result = result && this.name != other.name;
-    return result;
   }
 }
 

pdb-js/src/app/visualization-page/visualization-page.component.html

@@ -17,7 +17,7 @@
 
       <mat-form-field>
         <mat-label>Type:</mat-label>
-        <mat-select multiple [(value)]="selectedPlotType">
+        <mat-select multiple [(ngModel)]="selectedPlotType" (ngModelChange)="changePlotType($event)">
           <mat-option *ngFor="let plotType of plotTypes" [value]="plotType">
             <img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}}
           </mat-option>

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<any>;
@@ -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) {
     
@@ -82,14 +82,12 @@ export class VisualizationPageComponent implements OnInit {
     this.yAxisScale = "LOG10";
   }
   
-  getCombinablePlotTypes(selectedMainPlotType) : Array<any>{
+  changePlotType(selectedPlotTypes: Array<PlotType>) {
-      //const mainPlotType = this.availablePlotTypes[selectedMainPlotType];
+    const compatiblePlotTypes = this.availablePlotTypes.filter(pt => pt.compatible(selectedPlotTypes));
-      const mainPlotType = selectedMainPlotType;
+    this.plotTypes = compatiblePlotTypes;
-      
-      const compatiblePlotTypes = this.plotTypes.filter(pt => pt.compatible(mainPlotType));
-      return compatiblePlotTypes;
   }
    
+  
   dateRangeAsString() : string {
     return (<HTMLInputElement>document.getElementById("search-date-range")).value;
   }

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