Task fixes

src/app/analysis.service.ts

@@ -265,6 +265,9 @@ export class AnalysisService {
     const watch = async () => {
       if (this.tokens.length > 0) {
         this.tasks = await this.getTasks();
+        if (!this.tasks) {
+          return;
+        }
         let queuedOrRunningTasks = 0;
         this.tasks.forEach((task) => {
           if (!task.info.done && !task.info.failed) {

src/app/components/task-list/task-list.component.html

 <div class="content">
   <div class="list is-hoverable">
     <a *ngFor="let task of analysis.tasks" class="list-item" [class.is-active]="task.token === token">
-      <div *ngIf="!task.info.startedAt" (click)="open(task.token)">
+      <div *ngIf="!task.info.startedAt">
         <p>
           <span class="is-capitalized"><i class="fa" [class.fa-capsules]="task.info.target === 'drug'"
                                           [class.fa-crosshairs]="task.info.target === 'drug-target'"></i> {{algorithmNames[task.info.algorithm]}}</span>
@@ -24,7 +24,7 @@
           </a>
         </p>
       </div>
-      <div *ngIf="!task.info.done && !task.info.failed && task.info.startedAt" (click)="open(task.token)">
+      <div *ngIf="!task.info.done && !task.info.failed && task.info.startedAt">
         <p>
           <span class="is-capitalized"><i class="fa" [class.fa-capsules]="task.info.target === 'drug'"
                                           [class.fa-crosshairs]="task.info.target === 'drug-target'"></i> {{algorithmNames[task.info.algorithm]}}</span>
@@ -38,7 +38,7 @@
             </span>
           </a>
         </p>
-        <progress class="progress is-success" [value]="task.info.progress * 100" max="100">Test</progress>
+        <progress class="progress is-success" [value]="task.info.progress * 100" max="100"></progress>
       </div>
       <div *ngIf="task.info.done" (click)="open(task.token)" data-tooltip="Show analysis results">
         <p>
@@ -55,14 +55,14 @@
           </a>
         </p>
       </div>
-      <div *ngIf="task.info.failed && task.info.finishedAt == null">
+      <div *ngIf="task.info.failed">
         <p>
           <span class="is-capitalized"><i class="fa" [class.fa-capsules]="task.info.target === 'drug'"
                                           [class.fa-crosshairs]="task.info.target === 'drug-target'"></i> {{algorithmNames[task.info.algorithm]}}</span>
           <span class="icon is-pulled-right"><i class="fas fa-exclamation-triangle" aria-hidden="true"></i></span>
         </p>
         <p class="has-text-danger">
-          <small>{{task.info.status}}</small>
+          <small class="status-field">{{task.info.status}}</small>
           <a (click)="analysis.removeTask(task.token)" class="is-pulled-right has-text-danger">
             <span class="icon is-pulled-right">
               <i class="fa fa-trash"></i>

src/app/components/task-list/task-list.component.scss

@@ -8,3 +8,14 @@
     margin-bottom: 5px;
   }
 }
+
+.status-field {
+  background-color: white;
+  padding: 2px;
+  font-size: 10px;
+  max-width: 215px;
+  height: 20px;
+  overflow: hidden;
+  border: 1px solid #e4e4e4;
+  display: inline-block;
+}

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

@@ -342,7 +342,7 @@
         <p class="card-header-title">
           <span class="icon">
             <i class="fas fa-filter" aria-hidden="true"></i>
-          </span> Tasks ({{analysis.tokens.length}})
+          </span> Tasks ({{analysis.tasks.length}})
         </p>
         <a (click)="collapseTask = !collapseTask" data-action="collapse" class="card-header-icon is-hidden-fullscreen"
            aria-label="more options">

src/styles.scss

@@ -166,7 +166,7 @@ div.field.has-addons.add-remove-toggle {
 }
 
 .fa-spinner {
-  color: $warning;
+  color: $light-invert;
 }
 
 .fa-pause {