MET-6239 Prevent Double Load

projects/sandbox/src/app/dataset-info/dataset-info.component.html

@@ -2,6 +2,7 @@
   <a
     tabindex="0"
     class="debias-link"
+    [attr.disabled]="(cmpDebias && cmpDebias.isBusy) || null"
     (click)="runOrShowDebiasReport(runEnabled)"
     [attr.data-linkText]="(runEnabled ? 'run' : 'view') + ' report'"
   >

projects/sandbox/src/app/dataset-info/dataset-info.component.scss

@@ -262,6 +262,11 @@ $slide-down-duration: 0.4s;
   display: flex;
   justify-content: flex-end;
 
+  &[disabled] {
+    pointer-events: none;
+    cursor: default;
+    color: $gray-light;
+  }
   &::before {
     content: attr(data-linkText);
   }
@@ -273,7 +278,3 @@ $slide-down-duration: 0.4s;
     width: 3.5em;
   }
 }
-
-.debias-link-wrapper {
-  float: right;
-}

projects/sandbox/src/app/dataset-info/dataset-info.component.spec.ts

@@ -1,5 +1,12 @@
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import {
+  async,
+  ComponentFixture,
+  discardPeriodicTasks,
+  fakeAsync,
+  TestBed,
+  tick
+} from '@angular/core/testing';
 import { Observable, of } from 'rxjs';
 // sonar-disable-next-statement (sonar doesn't read tsconfig paths entry)
 import { MockModalConfirmService, ModalConfirmService } from 'shared';
@@ -69,8 +76,8 @@ describe('DatasetInfoComponent', () => {
     expect(component.datasetInfo).toBeFalsy();
 
     component.datasetId = '1';
+    expect(component.datasetInfo).toBeFalsy();
     tick(1);
-
     expect(component.datasetInfo).toBeTruthy();
   }));
 
@@ -112,7 +119,6 @@ describe('DatasetInfoComponent', () => {
 
     component.datasetId = '2';
     tick(1);
-
     expect(component.checkIfCanRunDebias).toHaveBeenCalledTimes(2);
   }));
 
@@ -179,12 +185,33 @@ describe('DatasetInfoComponent', () => {
     expect(component.fullInfoOpen).toBeFalsy();
   });
 
-  it('should run the debias report', fakeAsync(() => {
+  it('should run the debias report unless busy', fakeAsync(() => {
     expect(component.canRunDebias).toBeFalsy();
     expect(component.canRunDebias).toBeFalsy();
+
+    fixture.detectChanges();
+
+    spyOn(component.cmpDebias, 'startPolling').and.callThrough();
+
+    component.cmpDebias.isBusy = true;
+    component.runOrShowDebiasReport(false);
+    expect(component.cmpDebias.startPolling).not.toHaveBeenCalled();
+
+    expect(component.canRunDebias).toBeUndefined();
+
+    component.cmpDebias.isBusy = false;
+    component.runOrShowDebiasReport(false);
+    expect(component.canRunDebias).toBeUndefined();
+
+    expect(component.cmpDebias.startPolling).toHaveBeenCalledTimes(1);
+    expect(component.cmpDebias.isBusy).toBeFalsy();
+
     component.runOrShowDebiasReport(true);
-    tick(1);
+    expect(component.canRunDebias).not.toBeUndefined();
     expect(component.canRunDebias).toBeFalsy();
+
+    expect(component.cmpDebias.startPolling).toHaveBeenCalledTimes(1);
+    discardPeriodicTasks();
   }));
 
   it('should initiate polling in the debias component', fakeAsync(() => {
@@ -195,6 +222,6 @@ describe('DatasetInfoComponent', () => {
 
     component.runOrShowDebiasReport(false);
     expect(component.cmpDebias.startPolling).toHaveBeenCalled();
-    tick(1);
+    discardPeriodicTasks();
   }));
 });

projects/sandbox/src/app/dataset-info/dataset-info.component.ts

@@ -197,17 +197,22 @@ export class DatasetInfoComponent extends SubscriptionManager {
    * @param { boolean } run - flags action
    **/
   runOrShowDebiasReport(run: boolean): void {
+    if (this.cmpDebias.isBusy) {
+      return;
+    }
+    this.cmpDebias.isBusy = true;
     if (run) {
       this.subs.push(
         this.sandbox.runDebiasReport(this.datasetId).subscribe(() => {
           this.canRunDebias = false;
+          this.cmpDebias.isBusy = false;
         })
       );
     } else {
       const pollerId = this.cmpDebias.startPolling();
       this.subs.push(
         this.modalConfirms.open(this.modalIdPrefix + this.modalIdDebias).subscribe(() => {
-          console.log(this.cmpDebias.clearDataPollerByIdentifier(pollerId));
+          this.cmpDebias.clearDataPollerByIdentifier(pollerId);
         })
       );
     }

projects/sandbox/src/app/debias/debias.component.ts

@@ -36,6 +36,7 @@ import { isoLanguageNames } from '../_data';
 export class DebiasComponent extends DataPollingComponent {
   debiasHeaderOpen = false;
   debiasReport: DebiasReport;
+  isBusy: boolean;
   private readonly sandbox = inject(SandboxService);
   private readonly csv = inject(ExportCSVService);
   public apiSettings = apiSettings;
@@ -61,6 +62,8 @@ export class DebiasComponent extends DataPollingComponent {
    * begins the data poller for the debias data
    **/
   startPolling(): string {
+    this.isBusy = true;
+
     const pollerId = this.datasetId + '-debias-' + new Date().toISOString();
 
     this.createNewDataPoller(
@@ -70,6 +73,7 @@ export class DebiasComponent extends DataPollingComponent {
       },
       false,
       (debiasReport: DebiasReport) => {
+        this.isBusy = false;
         if (debiasReport) {
           this.debiasReport = debiasReport;
           if (debiasReport.state === DebiasState.COMPLETED) {