From f235890cc1123a084586cec6f0cc4a2bec5f3abb Mon Sep 17 00:00:00 2001 From: Andreas Huber Date: Sat, 26 Oct 2019 10:32:11 +0200 Subject: [PATCH] prepare sending of plot requests - values for query and date range were not propagated to the model --- pdb-js/src/app/app.module.ts | 2 +- pdb-js/src/app/plot.service.ts | 70 +++++++++++++++---- .../query-autocomplete.component.html | 16 ++--- .../query-autocomplete.component.ts | 50 ++++++++++--- .../visualization-page.component.html | 13 ++-- .../visualization-page.component.ts | 64 ++++++++++------- pdb-js/src/index.html | 4 ++ 7 files changed, 156 insertions(+), 63 deletions(-) diff --git a/pdb-js/src/app/app.module.ts b/pdb-js/src/app/app.module.ts index 5e547e4..2cc5148 100644 --- a/pdb-js/src/app/app.module.ts +++ b/pdb-js/src/app/app.module.ts @@ -11,7 +11,7 @@ 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 {MatAutocompleteModule} from '@angular/material/autocomplete'; +import {MatAutocompleteModule} from '@angular/material/autocomplete'; import {MatButtonModule} from '@angular/material/button'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatSelectModule} from '@angular/material/select'; diff --git a/pdb-js/src/app/plot.service.ts b/pdb-js/src/app/plot.service.ts index b21a0d2..a8c37bd 100644 --- a/pdb-js/src/app/plot.service.ts +++ b/pdb-js/src/app/plot.service.ts @@ -15,22 +15,23 @@ export class PlotService { constructor(private http: HttpClient) { this.plotTypes = new Array(); this.plotTypes.push(new PlotType( + "SCATTER", "Scatter", "scatter-chart2", true, DataType.Time, DataType.Duration)); - this.plotTypes.push(new PlotType("Heatmap", "heatmap", false, DataType.Other, DataType.Other)); - this.plotTypes.push(new PlotType("Contour", "contour-chart", false, DataType.Time, DataType.Duration)); - this.plotTypes.push(new PlotType("Cumulative Distribution", "cumulative-distribution-chart", true, DataType.Percent, DataType.Duration)); - this.plotTypes.push(new PlotType("Histogram", "histogram", false, DataType.Group, DataType.Duration)); - this.plotTypes.push(new PlotType("Ridgelines", "ridgelines", false, DataType.Other, DataType.Other)); - this.plotTypes.push(new PlotType("Quantile-Quantile", "quantile-quantile", false, DataType.Other, DataType.Other)); - this.plotTypes.push(new PlotType("Parallel Requests", "parallel-requests-chart", true, DataType.Time, DataType.Count)); - this.plotTypes.push(new PlotType("Violin", "violin-chart", false, DataType.Group, DataType.Duration)); - this.plotTypes.push(new PlotType("Strip", "strip-chart", false, DataType.Group, DataType.Duration)); - this.plotTypes.push(new PlotType("Pie", "pie-chart", false, DataType.Other, DataType.Other)); - this.plotTypes.push(new PlotType("Bar", "bar-chart", false, DataType.Other, DataType.Other)); + this.plotTypes.push(new PlotType("HEATMAP", "Heatmap", "heatmap", false, DataType.Other, DataType.Other)); + this.plotTypes.push(new PlotType("CONTOUR", "Contour", "contour-chart", false, DataType.Time, DataType.Duration)); + this.plotTypes.push(new PlotType("CUM_DISTRIBUTION", "Cumulative Distribution", "cumulative-distribution-chart", true, DataType.Percent, DataType.Duration)); + this.plotTypes.push(new PlotType("HISTOGRAM", "Histogram", "histogram", false, DataType.Group, DataType.Duration)); + this.plotTypes.push(new PlotType("RIDGELINES", "Ridgelines", "ridgelines", false, DataType.Other, DataType.Other)); + this.plotTypes.push(new PlotType("QQ", "Quantile-Quantile", "quantile-quantile", false, DataType.Other, DataType.Other)); + this.plotTypes.push(new PlotType("PARALLEL", "Parallel Requests", "parallel-requests-chart", true, DataType.Time, DataType.Count)); + this.plotTypes.push(new PlotType("VIOLIN", "Violin", "violin-chart", false, DataType.Group, DataType.Duration)); + this.plotTypes.push(new PlotType("STRIP", "Strip", "strip-chart", false, DataType.Group, DataType.Duration)); + this.plotTypes.push(new PlotType("PIE", "Pie", "pie-chart", false, DataType.Other, DataType.Other)); + this.plotTypes.push(new PlotType("BAR", "Bar", "bar-chart", false, DataType.Other, DataType.Other)); this.tagFields = new Array(); } @@ -64,17 +65,25 @@ export class PlotService { }; return this.http.get('//'+window.location.hostname+':8080/autocomplete', options); } + + sendPlotRequest(plotRequest: PlotRequest): Observable{ + + console.log("send plot request: "+ JSON.stringify(plotRequest)); + return this.http.post('//'+window.location.hostname+':8080/plots', plotRequest); + } } export class PlotType { + id: string; name: string; icon: string active: boolean; xAxis: DataType; yAxis: DataType; - constructor(name: string, icon: string, active: boolean, xAxis: DataType, yAxis: DataType) { + constructor(id: string, name: string, icon: string, active: boolean, xAxis: DataType, yAxis: DataType) { + this.id = id; this.name = name; this.icon = icon; this.active = active; @@ -131,6 +140,43 @@ export class AutocompleteResult{ proposals: Array; } +export class PlotRequest { + query : string; + height : number; + width : number; + thumbnailMaxWidth : number = 300; + thumbnailMaxHeight : number = 200; + groupBy : Array; + limitBy : string; + yAxis : string; + limit : number; + dateRange : string; + aggregates : Array; + yRangeMin : number; + yRangeMax : number; + yRangeUnit : string; + keyOutside : boolean = false; + generateThumbnail : boolean; +} +export class PlotResponse { + imageUrl : string; + stats : PlotResponseStats; + thumbnailUrl : string; +} +export class PlotResponseStats { + maxValue : number; + values : number; + average : number ; + plottedValues : number; + dataSeriesStats : Array; +} + +export class DataSeriesStats { + values : number; + maxValue : number; + average : number; + plottedValues : number; +} diff --git a/pdb-js/src/app/query-autocomplete/query-autocomplete.component.html b/pdb-js/src/app/query-autocomplete/query-autocomplete.component.html index ec11857..bd32723 100644 --- a/pdb-js/src/app/query-autocomplete/query-autocomplete.component.html +++ b/pdb-js/src/app/query-autocomplete/query-autocomplete.component.html @@ -2,16 +2,16 @@ type="text" id="query-autocomplete-input" placeholder="Query" - [formControl]="query" - [matAutocomplete]="auto" + [formControl]="queryField" + [matAutocomplete]="auto" (keyup)="onKey($event)" - (focus)="onKey($event)"/> + (mouseup)="onKey($event)"/> - - {{suggestion.value}} - - \ No newline at end of file + + {{suggestion.value}} + + \ No newline at end of file diff --git a/pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts b/pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts index 9e2e4cd..661df12 100644 --- a/pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts +++ b/pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts @@ -1,7 +1,8 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, OnInit, Input, ViewChild } from '@angular/core'; import {FormControl} from '@angular/forms'; import {Observable} from 'rxjs'; import {startWith, map} from 'rxjs/operators'; +import {MatAutocompleteTrigger } from '@angular/material/autocomplete'; import { PlotService, PlotType, AutocompleteResult, Suggestion } from '../plot.service'; @Component({ @@ -11,38 +12,65 @@ import { PlotService, PlotType, AutocompleteResult, Suggestion } from '../plot.s }) export class QueryAutocompleteComponent implements OnInit { - @Input() query = new FormControl(''); + queryField = new FormControl(''); suggestions = new FormControl(); - filteredSuggestions: Observable; + filteredSuggestions: Observable; + + query : string; + + @ViewChild(MatAutocompleteTrigger, {static: false}) + autocomplete: MatAutocompleteTrigger; + constructor(private plotService: PlotService) {} ngOnInit() { + const that = this; + this.query = ""; + this.queryField.valueChanges.subscribe(function(value){ + if (typeof value == "string") { + that.query = value; + }else{ + that.query = value.newQuery; + + var el : HTMLInputElement = document.getElementById('query-autocomplete-input'); + el.selectionStart=value.newCaretPosition; + el.selectionEnd=value.newCaretPosition; + + that.fetchSuggestions(value.newCaretPosition); + } + }); this.filteredSuggestions = this.suggestions.valueChanges.pipe( map(value => value) ); } - - onKey(event: any) { - const that = this; - console.log(event); + onKey(event: any) { + //console.log(event); if (event.key == "ArrowDown" || event.key == "ArrowUp"){ return; } - const query = typeof this.query.value == "string" - ? this.query.value - : this.query.value.newQuery; const caretIndex = event.srcElement.selectionStart +1; + this.fetchSuggestions(caretIndex); + } + + fetchSuggestions(caretIndex: number){ + const that = this; + const query = typeof this.queryField.value == "string" + ? this.queryField.value + : this.queryField.value.newQuery; + this.plotService .autocomplete(query, caretIndex) .subscribe( (data: AutocompleteResult) => {// success path - console.log(JSON.stringify(data.proposals)); + //console.log(JSON.stringify(data.proposals)); that.suggestions.setValue(data.proposals); + + that.autocomplete.openPanel(); }, error => console.log(error) ); 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 b756cb8..4630f5f 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.html +++ b/pdb-js/src/app/visualization-page/visualization-page.component.html @@ -1,18 +1,19 @@
- +
Date Range: - + + - + Type: - + {{plotType.name}} @@ -20,9 +21,9 @@ Combine with: - + - - + {{plotType.name}} 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 917848e..017a9d8 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.ts +++ b/pdb-js/src/app/visualization-page/visualization-page.component.ts @@ -1,9 +1,10 @@ import { Component, OnInit, ViewChild } from '@angular/core'; -import { PlotService, PlotType } from '../plot.service'; +import { PlotService, PlotType, PlotRequest, PlotResponse } from '../plot.service'; import { Observable } from 'rxjs/Observable'; import { FormControl, Validators } from '@angular/forms'; import { LimitByComponent } from '../limit-by/limit-by.component'; import { YAxisRangeComponent } from '../y-axis-range/y-axis-range.component'; +import { QueryAutocompleteComponent } from '../query-autocomplete/query-autocomplete.component'; @Component({ @@ -35,7 +36,8 @@ export class VisualizationPageComponent implements OnInit { @ViewChild(YAxisRangeComponent, {static: false}) private yAxisRangeComponent : YAxisRangeComponent; - query: string; + @ViewChild(QueryAutocompleteComponent, {static: false}) + query: QueryAutocompleteComponent; enableGallery = false; @@ -48,9 +50,8 @@ export class VisualizationPageComponent implements OnInit { ngOnInit() { const that = this; - this.query = "pod=*"; this.plotTypes = this.plotService.getPlotTypes(); - this.selectedPlotType.setValue(this.plotTypes[0].name); + this.selectedPlotType.setValue(this.plotTypes[0]); this.plotTypes.forEach(pt => this.availablePlotTypes[pt.name] = pt); @@ -59,41 +60,54 @@ export class VisualizationPageComponent implements OnInit { this.tagFields = this.plotService.getTagFields(); this.yAxis = "log"; - - - this.selectedPlotType.valueChanges.subscribe(function(selectedMainPlotType){ that.combinePlotTypes = that.getCombinablePlotTypes(selectedMainPlotType); + if (!that.combinePlotTypes.includes(that.selectedCombinePlotType.value)){ + that.selectedCombinePlotType.setValue(''); + } }); } - + + changeDate(event){ + console.log("changed date: " + JSON.stringify(event)); + } getCombinablePlotTypes(selectedMainPlotType) : Array{ - const mainPlotType = this.availablePlotTypes[selectedMainPlotType]; + //const mainPlotType = this.availablePlotTypes[selectedMainPlotType]; + const mainPlotType = selectedMainPlotType; const compatiblePlotTypes = this.plotTypes.filter(pt => pt.compatible(mainPlotType)); return compatiblePlotTypes; } plot(){ + + var aggregates = []; + aggregates.push(this.selectedPlotType.value.id); + if (this.selectedCombinePlotType.value){ + aggregates.push(this.selectedCombinePlotType.value.id); + } - var request = {}; - request['query'] = this.query; - request['height'] = document.getElementById("results").offsetHeight; - request['width'] = document.getElementById("results").offsetWidth; - request['groupBy'] = this.groupBy.map(o => o.name); - request['limitBy'] = this.limitbycomponent.limitBy; - request['limit'] = this.limitbycomponent.limit; - request['dateRange'] = this.dateRange.value; - request['axisScale'] = this.yAxis; - request['aggregate'] = this.selectedCombinePlotType.value; - request['keyOutside'] = false; - request['generateThumbnail'] = this.enableGallery; - request['yRangeMin'] = this.yAxisRangeComponent.minYValue; - request['yRangeMax'] = this.yAxisRangeComponent.maxYValue; - request['yRangeUnit'] = this.yAxisRangeComponent.yAxisUnit; + var request = new PlotRequest(); + request.query = this.query.query; + request.height = document.getElementById("results").offsetHeight; + request.width = document.getElementById("results").offsetWidth; + request.groupBy = this.groupBy.map(o => o.name); + request.limitBy = this.limitbycomponent.limitBy; + request.limit = this.limitbycomponent.limit; + request.dateRange = (document.getElementById("search-date-range")).value; + request.yAxis = this.yAxis; + request.aggregates = aggregates; + request.keyOutside = false; + request.generateThumbnail = this.enableGallery; + request.yRangeMin = this.yAxisRangeComponent.minYValue; + request.yRangeMax = this.yAxisRangeComponent.maxYValue; + request.yRangeUnit = this.yAxisRangeComponent.yAxisUnit; - console.log("plot clicked: "+ JSON.stringify(request)); + + this.plotService.sendPlotRequest(request).subscribe(function(plotResponse){ + console.log("response: " + JSON.stringify(plotResponse)); + }); } } diff --git a/pdb-js/src/index.html b/pdb-js/src/index.html index 8910a83..8623b06 100644 --- a/pdb-js/src/index.html +++ b/pdb-js/src/index.html @@ -43,6 +43,10 @@ }, }); + $('#search-date-range').on('apply.daterangepicker', function(ev, picker) { + const range = $('#search-date-range').val(); + console.log("update date range: " + range); + }); });