show plotted images

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

@@ -5,6 +5,7 @@ import { FormControl, Validators } from '@angular/forms';
 import { LimitByComponent } from '../limit-by/limit-by.component';
 import { YAxisRangeComponent } from '../y-axis-range/y-axis-range.component';
 import { QueryAutocompleteComponent } from '../query-autocomplete/query-autocomplete.component';
+import {PlotViewComponent } from '../plot-view/plot-view.component'
 
 
 @Component({
@@ -31,7 +32,7 @@ export class VisualizationPageComponent implements OnInit {
   @ViewChild(LimitByComponent, {static: false})
   private limitbycomponent : LimitByComponent;
     
-  yAxis: string;
+  yAxisScale: string;
   
   @ViewChild(YAxisRangeComponent, {static: false})
   private yAxisRangeComponent : YAxisRangeComponent;
@@ -39,6 +40,8 @@ export class VisualizationPageComponent implements OnInit {
   @ViewChild(QueryAutocompleteComponent, {static: false})
   query: QueryAutocompleteComponent;
   
+  @ViewChild(PlotViewComponent, {static: false})
+  plotView: PlotViewComponent;
     
   enableGallery = false;
   splitBy = new FormControl(null, [
@@ -58,7 +61,7 @@ export class VisualizationPageComponent implements OnInit {
     this.combinePlotTypes = this.getCombinablePlotTypes(this.selectedPlotType.value);
     
     this.tagFields = this.plotService.getTagFields();
-    this.yAxis = "log";
+    this.yAxisScale = "LOG10";
     
     this.selectedPlotType.valueChanges.subscribe(function(selectedMainPlotType){
       that.combinePlotTypes = that.getCombinablePlotTypes(selectedMainPlotType);
@@ -81,7 +84,7 @@ export class VisualizationPageComponent implements OnInit {
   }
     
   plot(){
-  
+    const that = this;
     var aggregates = [];
     aggregates.push(this.selectedPlotType.value.id);
     if (this.selectedCombinePlotType.value){
@@ -90,13 +93,13 @@ export class VisualizationPageComponent implements OnInit {
     
     var request = new PlotRequest();
     request.query = this.query.query;
-    request.height = document.getElementById("results").offsetHeight;
-    request.width = document.getElementById("results").offsetWidth;
+    request.height = document.getElementById("results").offsetHeight-1;
+    request.width = document.getElementById("results").offsetWidth-1;
     request.groupBy = this.groupBy.map(o => o.name);
     request.limitBy = this.limitbycomponent.limitBy;
     request.limit = this.limitbycomponent.limit;
     request.dateRange = (<HTMLInputElement>document.getElementById("search-date-range")).value; 
-    request.yAxis = this.yAxis;
+    request.yAxisScale = this.yAxisScale;
     request.aggregates = aggregates;
     request.keyOutside = false;
     request.generateThumbnail = this.enableGallery;
@@ -107,6 +110,12 @@ export class VisualizationPageComponent implements OnInit {
     
     this.plotService.sendPlotRequest(request).subscribe(function(plotResponse){
       console.log("response: " + JSON.stringify(plotResponse));
+      that.plotView.imageUrl = "http://"+window.location.hostname+':8080/'+plotResponse.imageUrl;
+    },
+    error => {
+      that.plotView.imageUrl = '';
+      //that.plotView.errorMessage = JSON.stringify(error)
+      that.plotView.errorMessage = error.error.message;
     });
   }