diff --git a/pdb-api/src/main/java/org/lucares/pdb/api/AbortException.java b/pdb-api/src/main/java/org/lucares/pdb/api/AbortException.java index 50df990..7365ae2 100644 --- a/pdb-api/src/main/java/org/lucares/pdb/api/AbortException.java +++ b/pdb-api/src/main/java/org/lucares/pdb/api/AbortException.java @@ -1,5 +1,7 @@ package org.lucares.pdb.api; +import java.util.concurrent.TimeUnit; + public class AbortException extends RuntimeException { private static final long serialVersionUID = 7614132985675048490L; @@ -29,4 +31,18 @@ public class AbortException extends RuntimeException { } } + public static void sleepAbortibly(final long millis) throws AbortException { + final long deadline = System.currentTimeMillis() + millis; + + while (System.currentTimeMillis() < deadline) { + try { + TimeUnit.MILLISECONDS.sleep(Math.min(10, deadline - System.currentTimeMillis())); + } catch (final InterruptedException e) { + Thread.currentThread().interrupt(); + throw new AbortException(); + } + AbortException.abortIfInterrupted(); + } + } + } diff --git a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts index 22c6b11..ac1cc2b 100644 --- a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts +++ b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts @@ -40,7 +40,8 @@ export class DashboardComponent implements OnInit { this.repairArrangement(); dashboard.plots.forEach(p => { - this.plotWidgetRenderData.push(new PlotWidgetRenderData(p)); + const submitterId = (window).submitterId + (window).randomId(); + this.plotWidgetRenderData.push(new PlotWidgetRenderData(p, submitterId)); }); this.loadImages(0, this.plotWidgetRenderData); @@ -64,17 +65,25 @@ export class DashboardComponent implements OnInit { loadImages(index: number, plotWidgetQueue: PlotWidgetRenderData[]) { if (index < plotWidgetQueue.length){ + const plot = plotWidgetQueue[index]; - const request = PlotWidget.createPlotRequest(plot.widget); - this.plotService.sendPlotRequest(request).subscribe({ - next: (response: PlotResponse)=> { - plot.plotResponse= response; - }, - error: (error:any)=> {}, - complete: () => { - this.loadImages(index +1 , plotWidgetQueue); - } - }); + if (plot.isAborted) { + this.loadImages(index +1 , plotWidgetQueue); + }else{ + const request = PlotWidget.createPlotRequest(plot.widget, plot.submitterId); + this.plotService.sendPlotRequest(request).subscribe({ + next: (response: PlotResponse)=> { + plot.plotResponse= response; + }, + error: (error:any)=> { + plot.error = error; + this.loadImages(index +1 , plotWidgetQueue); + }, + complete: () => { + this.loadImages(index +1 , plotWidgetQueue); + } + }); + } } } @@ -127,7 +136,7 @@ export class DashboardComponent implements OnInit { const widget = new PlotWidget((window).randomId(), 'MEDIUM', config); this.dashboard!.plots.push(widget); this.dashboard!.arrangement[0].push(widget.id); - this.plotWidgetRenderData.push(new PlotWidgetRenderData(widget)); + this.plotWidgetRenderData.push(new PlotWidgetRenderData(widget, (window).randomId())); this.loadImages(this.plotWidgetRenderData.length-1, this.plotWidgetRenderData); } }); 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 1baf39a..302c8d0 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 @@ -16,7 +16,7 @@ width: 402px; height: 302px; } - img { + img.render-img { cursor: zoom-in; } @@ -38,16 +38,51 @@ .dashboard-card:hover .editable-hovered { visibility: visible; } + + .aborted-img { + flex-grow: 0.3; + opacity: 0.3; + } + .aborted-img img { + width: 100%; + } + + .invader { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAUCAYAAACTQC2+AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9kKGRAxBENShygAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAbUlEQVRIx9WVQQrAMAgEM6X///L2FCihYvRg7F416LCsQdKo0DWKZA4CBGzjev1lRHgezS0lkan3IYr485ZFdo5oJZkbWoRWfSWrJ8p6suvZucsgCS8THsHX+zKiO5uLaO763bpobvoS/e6HfQBzIE0PhAsDxgAAAABJRU5ErkJggg==); + width: 26px; + height: 20px; + display: inline-block; + vertical-align: text-bottom; + } + .spinner { + animation: wobble 2s linear infinite; + } + @keyframes wobble { + 0% { + opacity: 1; + } + 50% { + opacity: 0.3; + } + 100% { + opacity: 1; + } + }
- - -
+
+ +
+ +
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 bf4223c..e8314c5 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 @@ -17,7 +17,6 @@ export class PlotWidgetComponent { public thumbnailUrl = ""; - isError = false; @ViewChild("plotView") plotView!: PlotViewComponent; @@ -45,6 +44,17 @@ export class PlotWidgetComponent { }); } + abort(){ + window.console.log("abort"); + this.data.isAborted = true; + this.service.abort(this.data.submitterId).subscribe({ + complete: () => { + window.console.log("cancelled"); + }, + error: () => {} + }); + } + delete() { this.dialog .open(ConfirmationDialogComponent, { @@ -67,16 +77,16 @@ export class PlotWidgetComponent { if (config !== undefined && config.query.length > 0) { this.data.widget.config = config; - this.isError = false; + this.data.error = false; this.data.plotResponse = undefined; - const request = PlotWidget.createPlotRequest(this.data.widget); + const request = PlotWidget.createPlotRequest(this.data.widget, this.data.submitterId); this.service.sendPlotRequest(request).subscribe({ next: (response: PlotResponse)=> { this.data.plotResponse = response; }, error: (error:any)=> { - this.isError = true; + this.data.error = true; }, }); } diff --git a/pdb-js/src/app/dashboard.service.ts b/pdb-js/src/app/dashboard.service.ts index b68e48b..5cca275 100644 --- a/pdb-js/src/app/dashboard.service.ts +++ b/pdb-js/src/app/dashboard.service.ts @@ -68,7 +68,7 @@ export class PlotWidget extends BaseWidget { super(id, 'PLOT', size); } - public static createPlotRequest(widget: PlotWidget): PlotRequest { + public static createPlotRequest(widget: PlotWidget, submitterId: string): PlotRequest { const height = this.height(widget.size); const width = this.width(widget.size); @@ -77,7 +77,7 @@ export class PlotWidget extends BaseWidget { const fullHeight = window.innerHeight-30; const request = new PlotRequest( - (window).submitterId+(window).randomId(), + submitterId, widget.config, { 'main': new RenderOptions(height,width, false, true), @@ -115,7 +115,9 @@ export type PlotSize = 'SMALL'|'MEDIUM'|'LARGE'; export type PlotType = 'TEXT'|'PLOT'; export class PlotWidgetRenderData { - constructor(public widget: PlotWidget, public plotResponse?: PlotResponse) { + public isAborted = false; + public error: string|boolean = false; + constructor(public widget: PlotWidget, public submitterId: string, public plotResponse?: PlotResponse) { } } diff --git a/pdb-js/src/assets/img/image-aborted.svg b/pdb-js/src/assets/img/image-aborted.svg new file mode 100644 index 0000000..262c581 --- /dev/null +++ b/pdb-js/src/assets/img/image-aborted.svg @@ -0,0 +1,5 @@ + + + + +