use snackbar to show error messages

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