diff --git a/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.html b/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.html index 04564e4..7810132 100644 --- a/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.html +++ b/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.html @@ -1,4 +1,23 @@ -

{{data.config.query}}

+
+ + +
+ There was an error! This is a good time to panic! +
+
+ diff --git a/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.ts b/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.ts index 479358a..563b2e8 100644 --- a/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.ts +++ b/pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.ts @@ -1,13 +1,53 @@ -import { Component, Input } from '@angular/core'; +import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core'; import { PlotWidget } from 'src/app/dashboard.service'; +import { PlotViewComponent } from 'src/app/plot-view/plot-view.component'; +import { PlotRequest, PlotResponse, PlotService } from 'src/app/plot.service'; @Component({ selector: 'app-plot-widget', templateUrl: './plot-widget.component.html' }) -export class PlotWidgetComponent { +export class PlotWidgetComponent implements AfterViewInit { @Input("data") data!: PlotWidget; - + thumbnailUrl = ""; + + isError = false; + + @ViewChild("plotView") plotView!: PlotViewComponent; + + constructor(private plotService : PlotService){} + + ngAfterViewInit(): void { + + + const plotRequest = this.createPlotRequest(); + this.plotService.sendPlotRequest(plotRequest).subscribe({ + next: (response: PlotResponse) => { + this.thumbnailUrl = response.thumbnailUrl; + }, + error: () => { + this.isError = true; + } + }); + } + + createPlotRequest(): PlotRequest { + + const height = window.innerHeight - 20; + const width = window. innerWidth - 20; + + const request = new PlotRequest( + height, + width, + 600, // thumbnailMaxWidth + 500, // thumbnailMaxHeight + false, // keyOutside + true, // generateThumbnail + (window).submitterId, + this.data.config!); + return request; + } + } diff --git a/pdb-js/src/app/dashboard.service.ts b/pdb-js/src/app/dashboard.service.ts index 4125d11..ca40487 100644 --- a/pdb-js/src/app/dashboard.service.ts +++ b/pdb-js/src/app/dashboard.service.ts @@ -53,4 +53,8 @@ export class PlotWidget extends BaseWidget { constructor(override size: 'SMALL'|'MEDIUM'|'LARGE', public config: PlotConfig) { super('PLOT', size); } +} + +export class WidgetDimensions{ + constructor(public width: number, public height: number){} } \ No newline at end of file diff --git a/pdb-js/src/app/plot-view/plot-view.component.ts b/pdb-js/src/app/plot-view/plot-view.component.ts index edb633c..5df605c 100644 --- a/pdb-js/src/app/plot-view/plot-view.component.ts +++ b/pdb-js/src/app/plot-view/plot-view.component.ts @@ -2,6 +2,7 @@ import { Component, OnInit, Output, EventEmitter } from '@angular/core'; import { DataType, AxesTypes, PlotResponseStats, PlotConfig, PlotService, PlotResponse, PlotRequest } from '../plot.service'; import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'; import * as moment from 'moment'; +import { WidgetDimensions } from '../dashboard.service'; @Component({ selector: 'pdb-plot-view', @@ -46,8 +47,6 @@ export class PlotViewComponent implements OnInit { config? : PlotConfig; - submitterId = crypto.randomUUID(); - constructor(private service : PlotService, private snackBar: MatSnackBar) { } ngOnInit() { @@ -221,13 +220,36 @@ export class PlotViewComponent implements OnInit { this.showStats = false; } + getAxes(): AxesTypes{ + const plotTypes = this.service.getPlotTypes(); + + this.config?.aggregates + + const x = new Array(); + const y = new Array(); + + for(var i = 0; i < this.config!.aggregates.length; i++){ + const aggregateType = this.config?.aggregates[i]; + const plotType = plotTypes.find((p) => p.id == aggregateType); + if (plotType) { + if (!x.includes(plotType.xAxis)) { + x.push(plotType.xAxis); + } + if (!y.includes(plotType.yAxis)) { + y.push(plotType.yAxis); + } + } + } + + return new AxesTypes(x,y); + } - plot(config : PlotConfig, axes: AxesTypes){ + plot(config : PlotConfig, dimension: WidgetDimensions | (()=>WidgetDimensions)){ this.config = config; - this.axes = axes; + this.axes = this.getAxes(); - const request = this.createPlotRequest(); + const request = this.createPlotRequest(dimension); this.loadingEvent.emit(new LoadingEvent(true)); const x = this.service.sendPlotRequest(request).subscribe({ @@ -247,21 +269,20 @@ export class PlotViewComponent implements OnInit { }); } - createPlotRequest(): PlotRequest { - const results = document.getElementById("results"); - - + createPlotRequest( dimension: WidgetDimensions | (()=>WidgetDimensions)): PlotRequest { + + const actualDimension = typeof dimension === "function" ? dimension() : dimension; - const request = new PlotRequest( - results != null ? results.offsetHeight-1: 1024, - results != null ? results.offsetWidth-1 : 1024, - 300, // thumbnailMaxWidth - 200, // thumbnailMaxHeight - false, // keyOutside - false, // generateThumbnail - this.submitterId, - this.config!); - return request; + const request = new PlotRequest( + actualDimension.height, + actualDimension.width, + 300, // thumbnailMaxWidth + 200, // thumbnailMaxHeight + false, // keyOutside + false, // generateThumbnail + (window).submitterId, + this.config!); + return request; } /** 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 cfadfdd..0813b40 100644 --- a/pdb-js/src/app/visualization-page/visualization-page.component.ts +++ b/pdb-js/src/app/visualization-page/visualization-page.component.ts @@ -8,6 +8,7 @@ import { QueryAutocompleteComponent } from '../query-autocomplete/query-autocomp import { PlotViewComponent, SelectionRange, DateAnchor, LoadingEvent } from '../plot-view/plot-view.component'; import { GalleryViewComponent } from '../gallery-view/gallery-view.component'; import * as moment from 'moment'; +import { WidgetDimensions } from '../dashboard.service'; @Component({ selector: 'pdb-visualization-page', @@ -54,8 +55,6 @@ export class VisualizationPageComponent implements OnInit { intervalValue = 1; renderBarChartTickLabels = false; - submitterId = crypto.randomUUID(); - plotJobActive = false; constructor(private plotService: PlotService, private snackBar: MatSnackBar) { @@ -147,7 +146,7 @@ export class VisualizationPageComponent implements OnInit { } abort() { - this.plotService.abort(this.submitterId).subscribe({ + this.plotService.abort((window).submitterId).subscribe({ complete: () => { this.plotView.imageUrl = ''; this.plotView.stats = null; @@ -160,8 +159,13 @@ export class VisualizationPageComponent implements OnInit { plot(){ const config = this.createPlotConfig(); - const axes = this.getAxes(); - this.plotView.plot(config, axes); + this.plotView.plot(config, this.plotDimensionSupplier); + } + + plotDimensionSupplier(): WidgetDimensions{ + const results = document.getElementById("results"); + return new WidgetDimensions(results != null ? results.offsetHeight-1: 1024, + results != null ? results.offsetWidth-1 : 1024,); } createPlotConfig(): PlotConfig { @@ -199,7 +203,7 @@ export class VisualizationPageComponent implements OnInit { 200, // thumbnailMaxHeight false, // keyOutside this.enableGallery, // generateThumbnail - this.submitterId, + (window).submitterId, config); return request; } diff --git a/pdb-js/src/main.ts b/pdb-js/src/main.ts index c7b673c..af4dead 100644 --- a/pdb-js/src/main.ts +++ b/pdb-js/src/main.ts @@ -8,5 +8,7 @@ if (environment.production) { enableProdMode(); } +(window).submitterId = crypto.randomUUID(); + platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err));