adding a few filters (no doing anything yet)

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

@@ -21,7 +21,8 @@ const routes: Routes = [
       //{ enableTracing: true } // <-- debugging purposes only
     )
   ],
-  declarations: [VisualizationPageComponent],
+  //declarations: [VisualizationPageComponent],
+  declarations: [],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

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

@@ -1,12 +1,17 @@
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { MainPageComponent } from './main-page/main-page.component';
 import { HelpPageComponent } from './help-page/help-page.component';
 import { UploadPageComponent } from './upload-page/upload-page.component';
-//import { VisualizationPageComponent } from './visualization-page/visualization-page.component';
+import { VisualizationPageComponent } from './visualization-page/visualization-page.component';
+ 
+import {MatSelectModule} from '@angular/material/select';
+import {MatFormFieldModule, MatInputModule} from '@angular/material';
 
 @NgModule({
   declarations: [
@@ -14,11 +19,14 @@ import { UploadPageComponent } from './upload-page/upload-page.component';
     MainPageComponent,
     HelpPageComponent,
     UploadPageComponent,
-    //VisualizationPageComponent,
+    VisualizationPageComponent,
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    MatSelectModule,MatFormFieldModule, MatInputModule,
+    BrowserAnimationsModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

pdb-js/src/app/plot.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PlotService } from './plot.service';
+
+describe('PlotService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: PlotService = TestBed.get(PlotService);
+    expect(service).toBeTruthy();
+  });
+});

pdb-js/src/app/plot.service.ts

@@ -0,0 +1,63 @@
+import { Injectable, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PlotService {
+
+  plotTypes: Array<PlotType>;
+  
+  tagFields: Observable<TagField>;
+
+  constructor(private http: HttpClient) {
+    this.plotTypes = new Array<PlotType>();
+    this.plotTypes.push(new PlotType("Scatter"));
+    this.plotTypes.push(new PlotType("Cumulative Distribution"));
+    this.plotTypes.push(new PlotType("Parallel Requests"));
+    this.plotTypes.push(new PlotType("Parallel Requests"));
+    
+    this.tagFields = new Array<TagField>();
+    
+  }
+  
+  ngOnInit() {
+    
+    
+  }
+  
+  getPlotTypes(): Array<PlotType> {
+    return this.plotTypes;
+  }
+  
+  getTagFields(): Observable<TagField> {
+    const that = this;
+    this.http.get('//localhost:8080/fields').subscribe(data => {
+      data.forEach(function(name) {
+        that.tagFields.push(new TagField(name));
+      });
+    });
+    return this.tagFields;
+  }
+}
+
+
+export class PlotType {
+  name: string;
+  
+  constructor(name: string) {
+    this.name = name;
+  }
+}
+
+export class TagField {
+  name: string;
+  
+  constructor(name: string) {
+    this.name = name;
+  }
+}
+
+

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

pdb-js/src/styles.scss

@@ -20,6 +20,9 @@ grey
 $background-color: #CBD7F4;
 
 
+
+@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
+
 body {
   font-family: Arial, sans-serif;
   font-size: 14px;

pdb-ui/src/main/java/org/lucares/pdbui/PdbController.java

@@ -44,6 +44,7 @@ import org.springframework.http.MediaType;
 import org.springframework.http.ResponseEntity;
 import org.springframework.stereotype.Controller;
 import org.springframework.util.StreamUtils;
+import org.springframework.web.bind.annotation.CrossOrigin;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestBody;
@@ -60,6 +61,7 @@ import com.fasterxml.jackson.databind.ObjectMapper;
 
 @Controller
 @EnableAutoConfiguration
+@CrossOrigin(origins = "http://localhost:4200")
 public class PdbController implements HardcodedValues, PropertyKeys {
 
 	private static final Logger LOGGER = LoggerFactory.getLogger(PdbController.class);
@@ -231,7 +233,7 @@ public class PdbController implements HardcodedValues, PropertyKeys {
 
 	@RequestMapping(path = "/fields", //
 			method = RequestMethod.GET, //
-			consumes = MediaType.APPLICATION_JSON_UTF8_VALUE, //
+			//consumes = MediaType.APPLICATION_JSON_UTF8_VALUE, //
 			produces = MediaType.APPLICATION_JSON_UTF8_VALUE //
 	)
 	@ResponseBody