use snackbar to show error messages

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

@@ -16,11 +16,13 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatSelectModule} from '@angular/material/select';
 import {MatFormFieldModule, MatInputModule} from '@angular/material';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
 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';
+import { GalleryViewComponent } from './gallery-view/gallery-view.component';
 
 @NgModule({
   declarations: [
@@ -45,6 +47,7 @@ import { PlotViewComponent } from './plot-view/plot-view.component';
     MatFormFieldModule,
     MatInputModule,
     MatSelectModule,
+    MatSnackBarModule,
     MatTooltipModule,
     BrowserAnimationsModule,
     HttpClientModule

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

@@ -19,4 +19,3 @@
      [style.width]="zoomInSliderStyleWidth"
   ></div>
 </div>
-<div *ngIf="errorMessage" class="errorPanel">{{errorMessage}}</div>

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

@@ -16,8 +16,6 @@ export class PlotViewComponent implements OnInit {
 
   imageUrl : string;
   
-  errorMessage: string;
-  
   @Output()
   zoomRange : EventEmitter<SelectionRange> = new EventEmitter<SelectionRange>();
   

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

@@ -93,6 +93,8 @@
       #plotView 
       (zoomRange)="zoomRange($event)" 
       (zoomWithDateAnchor)="zoomWithDateAnchor($event)"></pdb-plot-view>
+    <pdb-gallery-view>
+    </pdb-gallery-view>
   </div>
   
 </div>

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

@@ -2,10 +2,12 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { PlotService, PlotType, PlotRequest, PlotResponse, TagField, FilterDefaults  } from '../plot.service';
 import { Observable } from 'rxjs/Observable';
 import { FormControl, Validators } from '@angular/forms';
+import { MatSnackBar } from '@angular/material/snack-bar';
 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, SelectionRange, DateAnchor} from '../plot-view/plot-view.component'
+import { PlotViewComponent, SelectionRange, DateAnchor } from '../plot-view/plot-view.component';
+import { GalleryViewComponent } from '../gallery-view/gallery-view.component';
 import * as moment from 'moment';
 
 @Component({
@@ -48,7 +50,14 @@ export class VisualizationPageComponent implements OnInit {
   enableGallery = false;
   splitBy = null;
 
-  constructor(private plotService: PlotService) {
+  constructor(private plotService: PlotService, private snackBar: MatSnackBar) {
+  }
+
+  showError(message) {
+    this.snackBar.open(message, "", {
+      duration: 5000,
+      verticalPosition: 'top'
+    });
   }
 
   ngOnInit() {
@@ -64,6 +73,9 @@ export class VisualizationPageComponent implements OnInit {
     
       filterDefaults.fields.forEach(function(name) {
         that.tagFields.push(new TagField(name));
+      },
+      error => {
+        that.showError(error.error.message);
       });
     
       that.groupBy = that.tagFields.filter(val => filterDefaults.groupBy.includes(val.name));
@@ -76,6 +88,9 @@ export class VisualizationPageComponent implements OnInit {
       if (!that.combinePlotTypes.includes(that.selectedCombinePlotType.value)){
         that.selectedCombinePlotType.setValue('');
       }
+    },
+    error => {
+      that.showError(error.error.message);
     });
   }
     
@@ -95,18 +110,16 @@ export class VisualizationPageComponent implements OnInit {
     const that = this;
     this.plotService.splitQuery(this.query.query, this.splitBy.name).subscribe(function(valuesForSplitBy){
       console.log("valuesForSplitBy: " + JSON.stringify(valuesForSplitBy));
-      that.plotView.errorMessage = '';
     },
     error => {
       that.plotView.imageUrl = '';
-      that.plotView.errorMessage = error.error.message;
+      that.showError(error.error.message);
     });
   }
     
   plot(){
     const that = this;
     
-    that.plotView.errorMessage = '';
     that.plotView.imageUrl = '';
     
     
@@ -136,11 +149,10 @@ 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;
-      that.plotView.errorMessage = '';
     },
     error => {
       that.plotView.imageUrl = '';
-      that.plotView.errorMessage = error.error.message;
+      that.showError(error.error.message);
     });
   }