From 2787b42c31b9bdc00bbe8ce5b8fbdfe382b0771d Mon Sep 17 00:00:00 2001 From: Andreas Huber Date: Wed, 9 Oct 2019 19:02:34 +0200 Subject: [PATCH] adding a few filters (no doing anything yet) --- pdb-js/src/app/app-routing.module.ts | 3 +- pdb-js/src/app/app.module.ts | 14 ++++- pdb-js/src/app/plot.service.spec.ts | 12 ++++ pdb-js/src/app/plot.service.ts | 63 +++++++++++++++++++ .../visualization-page.component.html | 42 ++++++++++++- .../visualization-page.component.scss | 1 + .../visualization-page.component.ts | 19 +++++- pdb-js/src/styles.scss | 3 + .../java/org/lucares/pdbui/PdbController.java | 4 +- 9 files changed, 154 insertions(+), 7 deletions(-) create mode 100644 pdb-js/src/app/plot.service.spec.ts create mode 100644 pdb-js/src/app/plot.service.ts diff --git a/pdb-js/src/app/app-routing.module.ts b/pdb-js/src/app/app-routing.module.ts index f02e8b5..5c20b33 100644 --- a/pdb-js/src/app/app-routing.module.ts +++ b/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 { } diff --git a/pdb-js/src/app/app.module.ts b/pdb-js/src/app/app.module.ts index e2043a2..afb7abc 100644 --- a/pdb-js/src/app/app.module.ts +++ b/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] diff --git a/pdb-js/src/app/plot.service.spec.ts b/pdb-js/src/app/plot.service.spec.ts new file mode 100644 index 0000000..7c94324 --- /dev/null +++ b/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(); + }); +}); diff --git a/pdb-js/src/app/plot.service.ts b/pdb-js/src/app/plot.service.ts new file mode 100644 index 0000000..0b01e52 --- /dev/null +++ b/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; + + tagFields: Observable; + + constructor(private http: HttpClient) { + this.plotTypes = new Array(); + 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(); + + } + + ngOnInit() { + + + } + + getPlotTypes(): Array { + return this.plotTypes; + } + + getTagFields(): Observable { + 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; + } +} + + diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.html b/pdb-js/src/app/visualization-page/visualization-page.component.html index 8b6f6d9..1a56247 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.html +++ b/pdb-js/src/app/visualization-page/visualization-page.component.html @@ -4,7 +4,47 @@
- filters + + + Type: + + + {{plotType.name}} + + + + + + Combine with: + + - + + {{plotType.name}} + + + + + + + + + + Group By: + + {{tagField.name}} + + + + + Split By: + + {{tagField.name}} + + + + + +
\ No newline at end of file diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.scss b/pdb-js/src/app/visualization-page/visualization-page.component.scss index e1a3c71..fa6429b 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.scss +++ b/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 { diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.ts b/pdb-js/src/app/visualization-page/visualization-page.component.ts index 18f87d0..a3bc27b 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.ts +++ b/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; + + selectedCombinePlotType: string; + combinePlotTypes: Array; + + tagFields: Array; - 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(); } } diff --git a/pdb-js/src/styles.scss b/pdb-js/src/styles.scss index 095db11..e7c95f0 100644 --- a/pdb-js/src/styles.scss +++ b/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; diff --git a/pdb-ui/src/main/java/org/lucares/pdbui/PdbController.java b/pdb-ui/src/main/java/org/lucares/pdbui/PdbController.java index 29a08e6..0ed9967 100644 --- a/pdb-ui/src/main/java/org/lucares/pdbui/PdbController.java +++ b/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