adding a few filters (no doing anything yet)

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

@@ -4,7 +4,47 @@
 
 <div id="visualization">
   <div id="filters">
-    filters
+  
+  <mat-form-field>
+    <mat-label>Type:</mat-label>
+    <mat-select [(value)]="selectedPlotType">
+      <mat-option *ngFor="let plotType of plotTypes" [value]="plotType.name">
+        {{plotType.name}}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>Combine with:</mat-label>
+    <mat-select [(value)]="selectedCombinePlotType">
+      <mat-option>-</mat-option>
+      <mat-option *ngFor="let plotType of combinePlotTypes" [value]="plotType.name">
+        {{plotType.name}}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+  
+  <mat-form-field>
+    <textarea matInput placeholder="Query"></textarea>
+  </mat-form-field>
+  
+  <mat-form-field>
+    <mat-label>Group By:</mat-label>
+    <mat-select  multiple>
+      <mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option>
+    </mat-select>
+  </mat-form-field>
+  
+  <mat-form-field>
+    <mat-label>Split By:</mat-label>
+    <mat-select>
+      <mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option>
+    </mat-select>
+  </mat-form-field>
+  
+  
+
+  
   </div>
   <div id="results"></div>
 </div>

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

@@ -32,6 +32,7 @@
 #filters {
   grid-area: filters;
   background-color: #eee;
+  padding-left: 1em;
 }
 
 #results {

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

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { PlotService, PlotType } from '../plot.service';
 
 @Component({
   selector: 'pdb-visualization-page',
@@ -6,10 +7,26 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./visualization-page.component.scss']
 })
 export class VisualizationPageComponent implements OnInit {
+  
+  selectedPlotType: string;
+  plotTypes: Array<any>;
+  
+  selectedCombinePlotType: string;
+  combinePlotTypes: Array<any>;
+  
+  tagFields: Array<any>;
 
-  constructor() { }
+  constructor(private plotService: PlotService) {
+  }
 
   ngOnInit() {
+    this.plotTypes = this.plotService.getPlotTypes();
+    this.selectedPlotType = this.plotTypes[0].name;
+    
+    this.combinePlotTypes = this.plotTypes;
+    
+    
+    this.tagFields = this.plotService.getTagFields();
   }
 
 }