From 7ca7b802558d96d87b41bafdcf6b1dbf4dfc157d Mon Sep 17 00:00:00 2001 From: Andreas Huber Date: Thu, 10 Oct 2019 12:00:41 +0200 Subject: [PATCH] create icons for plot types --- pdb-js/package-lock.json | 5 + pdb-js/package.json | 2 + pdb-js/src/app/app.component.html | 2 +- pdb-js/src/app/app.module.ts | 4 +- .../app/main-page/main-page.component.html | 2 +- pdb-js/src/app/plot.service.ts | 31 +- .../visualization-page.component.html | 4 +- .../img/cumulative-distribution-chart.svg | 171 ++++++++ pdb-js/src/assets/img/heatmap.svg | 259 ++++++++++++ .../assets/img/parallel-requests-chart.svg | 181 +++++++++ pdb-js/src/assets/img/quantile-quantile.svg | 383 ++++++++++++++++++ pdb-js/src/assets/img/scatter-chart.svg | 206 ++++++++++ pdb-js/src/assets/img/strip-chart.svg | 256 ++++++++++++ pdb-js/src/assets/img/violin-chart.svg | 210 ++++++++++ pdb-js/src/styles.scss | 12 + .../java/org/lucares/pdbui/PdbController.java | 2 +- 16 files changed, 1713 insertions(+), 17 deletions(-) create mode 100644 pdb-js/src/assets/img/cumulative-distribution-chart.svg create mode 100644 pdb-js/src/assets/img/heatmap.svg create mode 100644 pdb-js/src/assets/img/parallel-requests-chart.svg create mode 100644 pdb-js/src/assets/img/quantile-quantile.svg create mode 100644 pdb-js/src/assets/img/scatter-chart.svg create mode 100644 pdb-js/src/assets/img/strip-chart.svg create mode 100644 pdb-js/src/assets/img/violin-chart.svg diff --git a/pdb-js/package-lock.json b/pdb-js/package-lock.json index f5da10f..21738e6 100644 --- a/pdb-js/package-lock.json +++ b/pdb-js/package-lock.json @@ -9535,6 +9535,11 @@ "tslib": "^1.9.0" } }, + "rxjs-compat": { + "version": "6.5.3", + "resolved": "https://registry.npmjs.org/rxjs-compat/-/rxjs-compat-6.5.3.tgz", + "integrity": "sha512-BIJX2yovz3TBpjJoAZyls2QYuU6ZiCaZ+U96SmxQpuSP/qDUfiXPKOVLbThBB2WZijNHkdTTJXKRwvv5Y48H7g==" + }, "safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", diff --git a/pdb-js/package.json b/pdb-js/package.json index 683c94e..82073c5 100644 --- a/pdb-js/package.json +++ b/pdb-js/package.json @@ -5,6 +5,7 @@ "ng": "ng", "start": "ng serve", "build": "ng build", + "releasebuild": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" @@ -22,6 +23,7 @@ "@angular/platform-browser-dynamic": "~8.2.9", "@angular/router": "~8.2.9", "rxjs": "~6.4.0", + "rxjs-compat": "^6.5.3", "tslib": "^1.10.0", "zone.js": "~0.9.1" }, diff --git a/pdb-js/src/app/app.component.html b/pdb-js/src/app/app.component.html index 089cf32..b5492ce 100644 --- a/pdb-js/src/app/app.component.html +++ b/pdb-js/src/app/app.component.html @@ -11,7 +11,7 @@
- +
diff --git a/pdb-js/src/app/app.module.ts b/pdb-js/src/app/app.module.ts index afb7abc..07308df 100644 --- a/pdb-js/src/app/app.module.ts +++ b/pdb-js/src/app/app.module.ts @@ -1,6 +1,6 @@ import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { NgModule } from '@angular/core'; +import { NgModule, enableProdMode } from '@angular/core'; import { HttpClientModule } from '@angular/common/http'; import { AppRoutingModule } from './app-routing.module'; @@ -32,3 +32,5 @@ import {MatFormFieldModule, MatInputModule} from '@angular/material'; bootstrap: [AppComponent] }) export class AppModule { } + +enableProdMode() diff --git a/pdb-js/src/app/main-page/main-page.component.html b/pdb-js/src/app/main-page/main-page.component.html index 389f303..cb77356 100644 --- a/pdb-js/src/app/main-page/main-page.component.html +++ b/pdb-js/src/app/main-page/main-page.component.html @@ -12,7 +12,7 @@
- +
diff --git a/pdb-js/src/app/plot.service.ts b/pdb-js/src/app/plot.service.ts index 0b01e52..c2019f6 100644 --- a/pdb-js/src/app/plot.service.ts +++ b/pdb-js/src/app/plot.service.ts @@ -10,14 +10,19 @@ export class PlotService { plotTypes: Array; - tagFields: Observable; + tagFields: Array; 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.plotTypes.push(new PlotType("Scatter", "scatter-chart")); + this.plotTypes.push(new PlotType("Heatmap", "heatmap")); + this.plotTypes.push(new PlotType("Cumulative Distribution", "cumulative-distribution-chart")); + this.plotTypes.push(new PlotType("Quantile-Quantile", "quantile-quantile")); + this.plotTypes.push(new PlotType("Parallel Requests", "parallel-requests-chart")); + this.plotTypes.push(new PlotType("Violin", "violin-chart")); + this.plotTypes.push(new PlotType("Strip", "strip-chart")); + this.plotTypes.push(new PlotType("Pie", "pie-chart")); + this.plotTypes.push(new PlotType("Bar", "bar-chart")); this.tagFields = new Array(); @@ -32,12 +37,14 @@ export class PlotService { return this.plotTypes; } - getTagFields(): Observable { + getTagFields(): Array { const that = this; - this.http.get('//localhost:8080/fields').subscribe(data => { - data.forEach(function(name) { - that.tagFields.push(new TagField(name)); - }); + this.http.get('//'+window.location.hostname+':8080/fields').subscribe(data => { + if (data instanceof Array){ + data.forEach(function(name) { + that.tagFields.push(new TagField(name)); + }); + } }); return this.tagFields; } @@ -46,9 +53,11 @@ export class PlotService { export class PlotType { name: string; + icon: string - constructor(name: string) { + constructor(name: string, icon: string) { this.name = name; + this.icon = icon; } } 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 1a56247..25aac92 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.html +++ b/pdb-js/src/app/visualization-page/visualization-page.component.html @@ -9,7 +9,7 @@ Type: - {{plotType.name}} + {{plotType.name}} @@ -19,7 +19,7 @@ - - {{plotType.name}} + {{plotType.name}} diff --git a/pdb-js/src/assets/img/cumulative-distribution-chart.svg b/pdb-js/src/assets/img/cumulative-distribution-chart.svg new file mode 100644 index 0000000..b4becf3 --- /dev/null +++ b/pdb-js/src/assets/img/cumulative-distribution-chart.svg @@ -0,0 +1,171 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/pdb-js/src/assets/img/heatmap.svg b/pdb-js/src/assets/img/heatmap.svg new file mode 100644 index 0000000..049dbf0 --- /dev/null +++ b/pdb-js/src/assets/img/heatmap.svg @@ -0,0 +1,259 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/pdb-js/src/assets/img/parallel-requests-chart.svg b/pdb-js/src/assets/img/parallel-requests-chart.svg new file mode 100644 index 0000000..0bc8710 --- /dev/null +++ b/pdb-js/src/assets/img/parallel-requests-chart.svg @@ -0,0 +1,181 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/pdb-js/src/assets/img/quantile-quantile.svg b/pdb-js/src/assets/img/quantile-quantile.svg new file mode 100644 index 0000000..9d2aa30 --- /dev/null +++ b/pdb-js/src/assets/img/quantile-quantile.svg @@ -0,0 +1,383 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/pdb-js/src/assets/img/scatter-chart.svg b/pdb-js/src/assets/img/scatter-chart.svg new file mode 100644 index 0000000..6ebf7d4 --- /dev/null +++ b/pdb-js/src/assets/img/scatter-chart.svg @@ -0,0 +1,206 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/pdb-js/src/assets/img/strip-chart.svg b/pdb-js/src/assets/img/strip-chart.svg new file mode 100644 index 0000000..6a15259 --- /dev/null +++ b/pdb-js/src/assets/img/strip-chart.svg @@ -0,0 +1,256 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/pdb-js/src/assets/img/violin-chart.svg b/pdb-js/src/assets/img/violin-chart.svg new file mode 100644 index 0000000..0ff2b9b --- /dev/null +++ b/pdb-js/src/assets/img/violin-chart.svg @@ -0,0 +1,210 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/pdb-js/src/styles.scss b/pdb-js/src/styles.scss index e7c95f0..5775a52 100644 --- a/pdb-js/src/styles.scss +++ b/pdb-js/src/styles.scss @@ -44,6 +44,12 @@ body { margin: 1em; } +.icon-select { + width: 1.5em; + height: 1.5em; + vertical-align: text-bottom; +} + a.external-link:after { background: transparent url('/assets/img/external-link.svg') no-repeat center bottom; background-size: 0.8em; @@ -52,3 +58,9 @@ a.external-link:after { height: 1em; content: ""; } + + + +body .mat-select-panel { + max-height: 500px; +} 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 0ed9967..682602f 100644 --- a/pdb-ui/src/main/java/org/lucares/pdbui/PdbController.java +++ b/pdb-ui/src/main/java/org/lucares/pdbui/PdbController.java @@ -61,7 +61,7 @@ import com.fasterxml.jackson.databind.ObjectMapper; @Controller @EnableAutoConfiguration -@CrossOrigin(origins = "http://localhost:4200") +@CrossOrigin(origins = {"http://localhost:4200", "http://127.0.0.1:4200"}) public class PdbController implements HardcodedValues, PropertyKeys { private static final Logger LOGGER = LoggerFactory.getLogger(PdbController.class);