add job service to be able to cancel plot requests

This commit is contained in:
2023-02-18 17:36:54 +01:00
parent 8c410fac4a
commit ed448af78c
18 changed files with 296 additions and 38 deletions

View File

@@ -112,6 +112,8 @@ export class GalleryViewComponent implements OnInit {
sequenceId = 0;
showDetails = false;
submitterId!: string;
@ViewChild(GalleryFilterView)
filter! : GalleryFilterView;
@@ -146,6 +148,7 @@ export class GalleryViewComponent implements OnInit {
this.totalNumberImages = 0;
this.splitByValuesQueue = new Array<string>();
this.sequenceId++;
this.plotService.abort(this.submitterId).subscribe({next: () => {}});
}
filteredSortedGalleryItems(): Array<GalleryItem> {
@@ -235,20 +238,24 @@ export class GalleryViewComponent implements OnInit {
renderGallery(request: PlotRequest, splitByField: string) {
const that=this;
this.submitterId = request.submitterId;
this.galleryItems.length = 0;
this.splitByValuesQueue.length = 0;
request.generateThumbnail = true;
this.plotService.splitQuery(request.query, splitByField).subscribe(function(valuesForSplitBy){
console.log("valuesForSplitBy: " + JSON.stringify(valuesForSplitBy));
that.splitByValuesQueue = valuesForSplitBy;
that.progress = 0;
that.totalNumberImages = that.splitByValuesQueue.length;
that.renderGalleryRecursively(request, splitByField);
},
error => {
that.showError(error.error.message);
this.plotService.splitQuery(request.query, splitByField).subscribe({
next: function(valuesForSplitBy){
console.log("valuesForSplitBy: " + JSON.stringify(valuesForSplitBy));
that.splitByValuesQueue = valuesForSplitBy;
that.progress = 0;
that.totalNumberImages = that.splitByValuesQueue.length;
that.renderGalleryRecursively(request, splitByField);
},
error: error => {
console.log(JSON.stringify(error));
that.showError(error.error.message);
}
});
}

View File

@@ -50,6 +50,10 @@ export class PlotService {
};
return this.http.get<AutocompleteResult>('//'+window.location.hostname+':'+window.location.port+'/api/autocomplete', options);
}
abort(submitterId: string): Observable<void>{
return this.http.delete<void>('//'+window.location.hostname+':'+window.location.port+'/api/plots/'+submitterId)
}
sendPlotRequest(plotRequest: PlotRequest): Observable<PlotResponse>{
@@ -219,6 +223,7 @@ export class PlotRequest {
public generateThumbnail : boolean,
public intervalUnit: string,
public intervalValue: number,
public submitterId: string,
public renderBarChartTickLabels: boolean = false){}
copy(): PlotRequest {

View File

@@ -67,7 +67,8 @@
<div id="plot-button-bar">
<button
*ngIf="!enableGallery"
*ngIf="!enableGallery && !plotJobActive"
[disabled]="plotJobActive"
mat-button
matTooltip="Create Plot"
(click)="plot()">
@@ -75,7 +76,7 @@
Plot
</button>
<button
*ngIf="enableGallery"
*ngIf="enableGallery && !plotJobActive"
mat-button
matTooltip="Create Gallery"
(click)="gallery()"
@@ -83,6 +84,11 @@
<img src="assets/img/four-squares-line.svg" class="icon-inline" aria-hidden="true" title="Create Gallery (only active if 'Split' is set)" />
Gallery
</button>
<button
*ngIf="plotJobActive"
mat-button
(click)="abort()"
matTooltip="abort"><img src="assets/img/close.svg" class="icon-inline" /> Abort</button>
</div>
</div>
</div>

View File

@@ -54,6 +54,10 @@ export class VisualizationPageComponent implements OnInit {
intervalValue = 1;
renderBarChartTickLabels = false;
submitterId = crypto.randomUUID();
plotJobActive = false;
constructor(private plotService: PlotService, private snackBar: MatSnackBar) {
}
@@ -103,10 +107,9 @@ export class VisualizationPageComponent implements OnInit {
gallery(){
if (this.splitBy != null){
const that = this;
this.plotView.imageUrl = '';
that.plotView.stats = null;
that.galleryView.show=true;
this.plotView.stats = null;
this.galleryView.show=true;
const request = this.createPlotRequest();
this.galleryView.renderGallery(request, this.splitBy.name);
} else {
@@ -116,8 +119,8 @@ export class VisualizationPageComponent implements OnInit {
getAxes() : AxesTypes {
var x = new Array<DataType>();
var y = new Array<DataType>();
const x = new Array<DataType>();
const y = new Array<DataType>();
for(var i = 0; i < this.selectedPlotType.length; i++){
var plotType = this.selectedPlotType[i];
@@ -131,12 +134,25 @@ export class VisualizationPageComponent implements OnInit {
return new AxesTypes(x,y);
}
abort() {
this.plotService.abort(this.submitterId).subscribe({
complete: () => {
this.plotView.imageUrl = '';
this.plotView.stats = null;
this.plotJobActive = false;
this.showError("Job aborted");
document.dispatchEvent(new Event("invadersPause", {}));
}
});
}
plot(){
const that = this;
that.plotView.imageUrl = '';
that.plotView.stats = null;
this.plotJobActive = true;
this.plotView.axes = this.getAxes();
console.log(JSON.stringify(this.getAxes()));
that.galleryView.show=false;
@@ -148,11 +164,14 @@ export class VisualizationPageComponent implements OnInit {
next: (plotResponse: PlotResponse) => {
this.plotView.imageUrl = "http://"+window.location.hostname+':'+window.location.port+'/'+plotResponse.imageUrl;
this.plotView.stats = plotResponse.stats;
this.plotJobActive = false;
document.dispatchEvent(new Event("invadersPause", {}));
},
error: (error:any) => {
console.log(JSON.stringify(error));
this.plotView.imageUrl = '';
this.plotView.stats = null;
this.plotJobActive = false;
this.showError(error.error.message);
document.dispatchEvent(new Event("invadersPause", {}));
}
@@ -184,6 +203,7 @@ export class VisualizationPageComponent implements OnInit {
this.enableGallery, // generateThumbnail
this.intervalUnit,
this.intervalValue,
this.submitterId,
this.renderBarChartTickLabels);
return request;
}