show plotted images

pdb-js/src/app/app.component.scss

@@ -1,7 +1,7 @@
 
 
 #main-toolbar {
-  height: 1.5em;
+  height: 2.0em;
   width: 100%;
   padding-bottom: 0.5em;
   border-bottom: solid 1px black;

pdb-js/src/app/app.module.ts

@@ -20,6 +20,7 @@ import {MatTooltipModule} from '@angular/material/tooltip';
 import { YAxisRangeComponent } from './y-axis-range/y-axis-range.component';
 import { QueryAutocompleteComponent } from './query-autocomplete/query-autocomplete.component';
 import { LimitByComponent } from './limit-by/limit-by.component';
+import { PlotViewComponent } from './plot-view/plot-view.component';
 
 @NgModule({
   declarations: [
@@ -31,6 +32,7 @@ import { LimitByComponent } from './limit-by/limit-by.component';
     YAxisRangeComponent,
     QueryAutocompleteComponent,
     LimitByComponent,
+    PlotViewComponent,
   ],
   imports: [
     BrowserModule,

pdb-js/src/app/plot-view/plot-view.component.html

@@ -0,0 +1,5 @@
+<img
+  *ngIf="imageUrl" 
+  src="{{imageUrl}}" />
+  
+<div *ngIf="errorMessage" class="errorPanel">{{errorMessage}}</div>

pdb-js/src/app/plot-view/plot-view.component.scss

@@ -0,0 +1,4 @@
+
+img {
+  display:block; /* removes 3 pixels extra height around the image */
+}

pdb-js/src/app/plot-view/plot-view.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlotViewComponent } from './plot-view.component';
+
+describe('PlotViewComponent', () => {
+  let component: PlotViewComponent;
+  let fixture: ComponentFixture<PlotViewComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PlotViewComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PlotViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

pdb-js/src/app/plot-view/plot-view.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'pdb-plot-view',
+  templateUrl: './plot-view.component.html',
+  styleUrls: ['./plot-view.component.scss']
+})
+export class PlotViewComponent implements OnInit {
+
+  imageUrl : string;
+  
+  errorMessage: string;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

pdb-js/src/app/plot.service.ts

@@ -148,7 +148,7 @@ export class PlotRequest {
   thumbnailMaxHeight : number = 200;
   groupBy : Array<string>;
   limitBy : string;
-  yAxis : string;
+  yAxisScale : string;
   limit : number;
   dateRange : string;
   aggregates : Array<string>;

pdb-js/src/app/query-autocomplete/query-autocomplete.component.scss

@@ -9,4 +9,5 @@
   border-radius: 5px;
   box-sizing: border-box;
   padding: 5px;
-}
+}
+

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

@@ -20,7 +20,7 @@
       </mat-form-field>
     
       <mat-form-field>
-        <mat-label>Combine with:</mat-label>
+        <mat-label>Combine With Type:</mat-label>
         <mat-select [formControl]="selectedCombinePlotType">
           <mat-option>-</mat-option>
           <mat-option *ngFor="let plotType of combinePlotTypes" [value]="plotType">
@@ -40,9 +40,9 @@
       
       <mat-form-field>
         <mat-label>Y-Axis:</mat-label>
-        <mat-select [(value)]="yAxis">
-          <mat-option value="log">Logarithm</mat-option>
-          <mat-option value="linear">Linear</mat-option>
+        <mat-select [(value)]="yAxisScale">
+          <mat-option value="LOG10">Logarithm</mat-option>
+          <mat-option value="LINEAR">Linear</mat-option>
         </mat-select>
       </mat-form-field>
       
@@ -83,7 +83,9 @@
       </div>
     </div>
   </div>
-  <div id="results"></div>
+  <div id="results">
+    <pdb-plot-view #plotView></pdb-plot-view>
+  </div>
   
 </div>
 

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

@@ -50,6 +50,8 @@
 
 #results {
   grid-area: results;
+  overflow: hidden;
+  margin-right: 1em;
 }
 
 #plot-button-bar {

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

pdb-js/src/app/y-axis-range/y-axis-range.component.html

@@ -1,6 +1,6 @@
 <div>
    <mat-form-field class="pdb-form-mid">
-    <mat-label>Unit:</mat-label>
+    <mat-label>Y-Axis Range:</mat-label>
     <mat-select [(value)]="yAxisUnit">
       <mat-option value="AUTOMATIC">automatic</mat-option>
       <mat-option value="MILLISECONDS">milli seconds</mat-option>

pdb-js/src/app/y-axis-range/y-axis-range.component.ts

@@ -7,9 +7,9 @@ import { Component,  Input } from '@angular/core';
 })
 export class YAxisRangeComponent {
 
-  yAxisUnit: string = "AUTOMATIC";
-  minYValue: number = 1;
-  maxYValue: number = 60;
+  yAxisUnit: string = "SECONDS";
+  minYValue: number = 0;
+  maxYValue: number = 300;
 
   constructor() {
   }

pdb-js/src/styles.scss

@@ -21,12 +21,14 @@ $background-color: #CBD7F4;
 
 
 
-@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
+//@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
+@import 'custom-theme.scss';
 
 *, body {
   font-family: Arial, sans-serif;
   font-size: 14px;
   margin: 0;
+  box-sizing: border-box;
 }
 
 .icon-inline {
@@ -73,9 +75,8 @@ a.external-link:after {
   display: inline-block;
 }
 
-
-body .mat-select-panel {
-  max-height: 500px;
+body .mat-select-panel, body .mat-autocomplete-panel {
+  max-height: 512px;
 }
 
 mat-form-field {
@@ -93,3 +94,8 @@ mat-form-field.pdb-form-mid {
 }
 
 
+.errorPanel {
+  padding: 1ex;
+  background-color: map-get($mat-red, 100);
+}
+