make the drop down for "combine with" dynamic

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