make the drop down for "combine with" dynamic

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

@@ -7,19 +7,21 @@
       <input matInput placeholder="Query" value="{{query}}" />
   </div>
   <div id="filters">
-    <button mat-button>
+    <button mat-button (click)="plot()">
       <img src="assets/img/scatter-chart2.svg" class="icon-inline" aria-hidden="true" title="create plot" />
       Plot
     </button>
-    <button mat-button>
+    <!--
+    <button mat-button (click)="gallery()">
       <img src="assets/img/four-squares-line.svg" class="icon-inline" aria-hidden="true" title="Create Gallery (only active if 'Split' is set)" />
       Gallery
     </button>
+    -->
     
   
     <mat-form-field>
       <mat-label>Type:</mat-label>
-      <mat-select [(value)]="selectedPlotType">
+      <mat-select [formControl]="selectedPlotType">
         <mat-option *ngFor="let plotType of plotTypes" [value]="plotType.name">
           <img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}}
         </mat-option>

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

@@ -1,5 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { PlotService, PlotType } from '../plot.service';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+import { FormControl } from '@angular/forms';
 
 @Component({
   selector: 'pdb-visualization-page',
@@ -8,10 +11,12 @@ import { PlotService, PlotType } from '../plot.service';
 })
 export class VisualizationPageComponent implements OnInit {
   
-  selectedPlotType: string;
+  availablePlotTypes = {};
+  
+  selectedPlotType = new FormControl('');
   plotTypes: Array<any>;
   
-  selectedCombinePlotType: string;
+  selectedCombinePlotType = new FormControl('');
   combinePlotTypes: Array<any>;
   
   tagFields: Array<any>;
@@ -23,21 +28,42 @@ export class VisualizationPageComponent implements OnInit {
   
   query: string;
 
-  constructor(private plotService: PlotService) {
+  constructor(private plotService: PlotService, private http: HttpClient) {
   }
 
   ngOnInit() {
+    const that = this;
     this.query = "pod=*";
     this.plotTypes = this.plotService.getPlotTypes();
-    this.selectedPlotType = this.plotTypes[0].name;
+    this.selectedPlotType.setValue(this.plotTypes[0].name);
     
-    this.combinePlotTypes = this.plotTypes;
+    this.plotTypes.forEach(pt => this.availablePlotTypes[pt.name] = pt);
+    
+    this.combinePlotTypes = this.getCombinablePlotTypes(this.selectedPlotType.value);
     
     this.tagFields = this.plotService.getTagFields();
     this.yAxis = "log";
     this.yAxisUnit = "MINUTES";
     this.minYValue = 0;
     this.maxYValue = 120;
+    
+    
+    this.selectedPlotType.valueChanges.subscribe(function(selectedMainPlotType){
+      that.combinePlotTypes = that.getCombinablePlotTypes(selectedMainPlotType);
+    });
+  }
+  
+  getCombinablePlotTypes(selectedMainPlotType) : Array<any>{
+      // get compatible plot types
+      const mainPlotType = this.availablePlotTypes[selectedMainPlotType];
+      
+      const compatiblePlotTypes = this.plotTypes.filter(pt => pt.compatible(mainPlotType));
+      console.log(compatiblePlotTypes);
+      return compatiblePlotTypes;
+  }
+  
+  plot(){
+    console.log("plot clicked");
   }
 
 }