Merge branch 'add-feedback-after-launch' into 'master'

Add feedback after launching quick find drugs

See merge request covid-19/frontend!79

src/app/analysis.service.ts

@@ -45,6 +45,8 @@ export class AnalysisService {
   private intervalId: any;
   private canLaunchNewTask = false;
 
+  private launchingQuick = false;
+
   constructor(private http: HttpClient) {
     const tokens = localStorage.getItem('tokens');
     const finishedTokens = localStorage.getItem('finishedTokens');
@@ -153,6 +155,8 @@ export class AnalysisService {
       return;
     }
 
+    this.launchingQuick = true;
+
     const resp = await this.http.post<any>(`${environment.backend}task/`, {
       algorithm: 'quick',
       target: 'drug',
@@ -200,6 +204,10 @@ export class AnalysisService {
     this.startWatching();
   }
 
+  public isLaunchingQuick(): boolean {
+    return this.launchingQuick;
+  }
+
   showToast(task: Task, status: 'DONE' | 'FAILED') {
     let toastMessage;
     let toastType;
@@ -252,6 +260,7 @@ export class AnalysisService {
       } else {
         this.canLaunchNewTask = true;
       }
+      this.launchingQuick = false;
     };
     watch();
     if (this.intervalId) {

src/app/pages/explorer-page/explorer-page.component.html

@@ -224,8 +224,8 @@
       <header class="card-header">
         <p class="card-header-title">
           <span class="icon">
-        <i class="fas fa-flask" aria-hidden="true"></i>
-      </span> Quick Find Drugs
+            <i class="fas fa-flask" aria-hidden="true"></i>
+          </span> Quick Find Drugs
         </p>
         <a (click)="collapseAnalysisQuick = !collapseAnalysisQuick" data-action="collapse"
            class="card-header-icon is-hidden-fullscreen" aria-label="more options">
@@ -251,10 +251,11 @@
               <div class="tile notification is-info">
                 <div class="align-vmiddle">
                   <div class="digit">2</div>
-                  <button (click)="analysis.startQuickAnalysis()" [disabled]="analysis.getCount() === 0"
+                  <button (click)="analysis.startQuickAnalysis()" [disabled]="analysis.getCount() === 0 || analysis.isLaunchingQuick()"
                           class="button is-white is-rounded">
                     <span class="icon">
-                      <i class="fa fa-capsules"></i>
+                      <i class="fa fa-capsules" *ngIf="!analysis.isLaunchingQuick()"></i>
+                      <i class="fa fa-spin fa-spinner" *ngIf="analysis.isLaunchingQuick()"></i>
                     </span>
                     <span>
                       Find Drugs