improved styles for task list

src/app/components/download-button/download-button.component.html

+<div class="footer-buttons network-footer-toolbar-element">
+  <div class="dropdown is-hoverable is-up">
+    <div class="dropdown-trigger">
+      <button
+        [id]="buttonId"
+        class="button is-primary is-rounded has-tooltip"
+        aria-haspopup="true"
+        attr.aria-controls="{{ 'controls-' + buttonId }}"
+        [ngClass]="{ 'button-small': smallStyle }"
+      >
+        <span class="icon">
+          <i class="fas fa-download" aria-hidden="true"></i>
+        </span>
+        <span [ngClass]="{ 'text-normal': smallStyle }">Download</span>
+      </button>
+    </div>
+    <div class="dropdown-menu" id="{{ 'controls-' + buttonId }}" role="menu">
+      <div class="dropdown-content">
+        <a
+          (click)="downloadLink('graphml')"
+          class="dropdown-item"
+          [ngClass]="{ 'text-normal': smallStyle }"
+          >.graphml</a
+        >
+        <hr class="dropdown-divider" />
+        <a
+          (click)="downloadLink('json')"
+          class="dropdown-item"
+          [ngClass]="{ 'text-normal': smallStyle }"
+          >.json</a
+        >
+        <hr class="dropdown-divider" />
+        <a
+          (click)="downloadLink('csv')"
+          class="dropdown-item"
+          [ngClass]="{ 'text-normal': smallStyle }"
+          >.csv</a
+        >
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/download-button/download-button.component.scss

+@import "src/stylesheets/variables";
+
+.dropdown-menu{
+    z-index: $analysis-network-toolbar-dropdown-z !important;
+}
\ No newline at end of file

src/app/components/download-button/download-button.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DownloadButtonComponent } from './download-button.component';
+
+describe('DownloadButtonComponent', () => {
+  let component: DownloadButtonComponent;
+  let fixture: ComponentFixture<DownloadButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DownloadButtonComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DownloadButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/download-button/download-button.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { NetexControllerService } from 'src/app/services/netex-controller/netex-controller.service';
+import { downLoadFile } from 'src/app/utils';
+
+@Component({
+  selector: 'app-download-button',
+  templateUrl: './download-button.component.html',
+  styleUrls: ['./download-button.component.scss']
+})
+export class DownloadButtonComponent implements OnInit {
+
+  @Input() nodeData: { nodes: any, edges: any } = {nodes: null, edges: null};
+  @Input() smallStyle: boolean;
+  @Input() buttonId: string;
+
+  constructor(public netex: NetexControllerService) { }
+
+  ngOnInit(): void {
+  }
+
+  public downloadLink(fmt) {
+    const data = {nodes: this.nodeData.nodes.get(), edges: this.nodeData.edges.get(), fmt: fmt};
+    this.netex.graphExport(data).subscribe(response => {
+      return downLoadFile(response, `application/${fmt}`, fmt);
+    });
+  }
+
+}

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 box small-box" [class.is-active]="task.token === token">
+  <div class="list is-hoverable" [ngClass]="{ 'text-normal': smallStyle }">
+    <a
+      *ngFor="let task of analysis.tasks"
+      class="list-item box small-box"
+      [class.is-active]="task.token === 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>
-          <span class="icon is-pulled-right"><i class="fas fa-pause" aria-hidden="true"></i></span>
-        </p>
-        <p>
-          <small *ngIf="task.stats.queueLength > 0 && task.stats.queuePosition === 1">
-            Queued: 1 other task to finish
-          </small>
-          <small *ngIf="task.stats.queueLength > 0 && task.stats.queuePosition > 1">
-            Queued: {{task.stats.queuePosition}} other tasks to finish
-          </small>
-          <small *ngIf="task.stats.queueLength === 0 || task.stats.queuePosition === 0">
-            Execution imminent...
-          </small>
-          <a (click)="analysis.removeTask(task.token)" class="text-danger">
-            <span class="icon is-pulled-right">
-              <i class="fa fa-trash"></i>
-            </span>
-          </a>
-        </p>
+        <div class="columns mb-0">
+          <div class="column is-8">
+            <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
+            >
+          </div>
+          <div class="column is-2">
+            <span class="icon  "
+              ><i class="fas fa-pause" aria-hidden="true"></i
+            ></span>
+          </div>
+        </div>
+        <div class="columns mb-0">
+          <div class="column is-8 pt-0 pb-0">
+            <small
+              *ngIf="
+                task.stats.queueLength > 0 && task.stats.queuePosition === 1
+              "
+            >
+              Queued: 1 other task to finish
+            </small>
+            <small
+              *ngIf="task.stats.queueLength > 0 && task.stats.queuePosition > 1"
+            >
+              Queued: {{ task.stats.queuePosition }} other tasks to finish
+            </small>
+            <small
+              *ngIf="
+                task.stats.queueLength === 0 || task.stats.queuePosition === 0
+              "
+            >
+              Execution imminent...
+            </small>
+          </div>
+          <div class="column is-2 pt-0 pb-0">
+            <a (click)="analysis.removeTask(task.token)" class="text-danger">
+              <span class="icon">
+                <i class="fa fa-trash"></i>
+              </span>
+            </a>
+          </div>
+        </div>
       </div>
       <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>
-          <span class="icon is-pulled-right"><i class="fas fa-spinner fa-spin" aria-hidden="true"></i></span>
-        </p>
-        <p>
-          <small>Started {{task.info.startedAt | date :'short'}}</small>
-          <a (click)="analysis.removeTask(task.token)" class="is-pulled-right text-danger">
-            <span class="icon is-pulled-right">
-              <i class="fa fa-trash"></i>
-            </span>
-          </a>
-        </p>
-        <progress class="progress is-success" [value]="task.info.progress * 100" max="100"></progress>
+        <div class="columns mb-0">
+          <div class="column is-8">
+            <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
+            >
+          </div>
+          <div class="column is-2">
+            <span class="icon"
+              ><i class="fas fa-spinner fa-spin" aria-hidden="true"></i
+            ></span>
+          </div>
+        </div>
+        <div class="columns mb-0">
+          <div class="column is-8 pt-0 pb-0">
+            <small>Started {{ task.info.startedAt | date: "short" }}</small>
+          </div>
+          <div class="column is-2 pt-0 pb-0">
+            <a
+              (click)="analysis.removeTask(task.token)"
+              class="  text-danger"
+            >
+              <span class="icon">
+                <i class="fa fa-trash"></i>
+              </span>
+            </a>
+          </div>
+        </div>
+        <progress
+          class="progress is-success"
+          [value]="task.info.progress * 100"
+          max="100"
+        ></progress>
       </div>
-      <div *ngIf="task.info.done" (click)="open(task.token)" pTooltip="Show analysis results" [tooltipStyleClass]="'drgstn drgstn-tooltip'" tooltipPosition="top">
-        <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-check" aria-hidden="true"></i></span>
-        </p>
-        <p>
-          <small>Finished {{task.info.finishedAt | date :'short'}}</small>
-          <a (click)="analysis.removeTask(task.token)" class="is-pulled-right text-danger">
-            <span class="icon is-pulled-right">
-              <i class="fa fa-trash"></i>
-            </span>
-          </a>
-        </p>
+      <div
+        *ngIf="task.info.done"
+        (click)="open(task.token)"
+        pTooltip="Show analysis results"
+        [tooltipStyleClass]="'drgstn drgstn-tooltip'"
+        tooltipPosition="top"
+      >
+        <div class="columns mb-0">
+          <div class="column is-8">
+            <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
+            >
+          </div>
+          <div class="column is-2">
+            <span class="icon"
+              ><i class="fas fa-check" aria-hidden="true"></i
+            ></span>
+          </div>
+        </div>
+        <div class="columns mb-0">
+          <div class="column is-8 pt-0 pb-0">
+            <small>Finished {{ task.info.finishedAt | date: "short" }}</small>
+          </div>
+          <div class="column is-2 pt-0 pb-0">
+            <a (click)="analysis.removeTask(task.token)" class="text-danger">
+              <span class="icon">
+                <i class="fa fa-trash"></i>
+              </span>
+            </a>
+          </div>
+        </div>
       </div>
       <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="text-danger">
-          <small class="status-field">{{task.info.status}}</small>
-          <a (click)="analysis.removeTask(task.token)" class="is-pulled-right text-danger">
-            <span class="icon is-pulled-right">
-              <i class="fa fa-trash"></i>
-            </span>
-          </a>
-        </p>
+        <div class="columns mb-0">
+          <div class="column is-8">
+            <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
+            >
+          </div>
+          <div class="column is-2">
+            <span class="icon  "
+              ><i class="fas fa-exclamation-triangle" aria-hidden="true"></i
+            ></span>
+          </div>
+        </div>
+        <div class="columns mb-0">
+          <div class="column is-8 pt-0 pb-0 text-danger">
+            <small class="status-field">{{ task.info.status }}</small>
+          </div>
+          <div class="column is-2 pt-0 pb-0">
+            <a
+              (click)="analysis.removeTask(task.token)"
+              class="  text-danger"
+            >
+              <span class="icon  ">
+                <i class="fa fa-trash"></i>
+              </span>
+            </a>
+          </div>
+        </div>
       </div>
     </a>
   </div>

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

@@ -7,6 +7,11 @@
     margin-top: 5px;
     margin-bottom: 5px;
   }
+
+  .icon {
+    display: block !important;
+  }
+
 }
 
 .status-field {
@@ -14,8 +19,8 @@
   padding: 2px;
   font-size: 10px;
   max-width: 215px;
-  height: 20px;
-  overflow: hidden;
+  max-height: 30px;
+  overflow: scroll;
   border: 1px solid var(--drgstn-border);
   display: inline-block;
 }

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

@@ -12,6 +12,7 @@ export class TaskListComponent implements OnInit {
 
   @Input() token: string;
   @Output() tokenChange: EventEmitter<string> = new EventEmitter();
+  @Input() smallStyle: boolean;
 
   public algorithmNames = algorithmNames;
 

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

-<div
-  id="appWindow"
-  (window:resize)="onResize($event)"
->
+<div id="appWindow" (window:resize)="onResize($event)">
   <div class="is-hidden-mobile fullheight" id="appContainer">
     <app-launch-analysis
       [(show)]="showAnalysisDialog"
@@ -73,7 +70,9 @@
                   <div>
                     <p class="heading">Nodes</p>
                     <p class="title">
-                      {{ currentViewNodes != null ? currentViewNodes.length : 0 }}
+                      {{
+                        currentViewNodes != null ? currentViewNodes.length : 0
+                      }}
                     </p>
                   </div>
                 </div>
@@ -81,7 +80,9 @@
                   <div>
                     <p class="heading">Interactions</p>
                     <p class="title">
-                      {{ currentViewEdges != null ? currentViewEdges.length : 0 }}
+                      {{
+                        currentViewEdges != null ? currentViewEdges.length : 0
+                      }}
                     </p>
                   </div>
                 </div>
@@ -174,36 +175,31 @@
             >
               <div class="network-footer-toolbar-inner-container">
                 <ng-container *ngIf="myConfig.showFooterButtonScreenshot">
-                  <div
-                    class="
-                      footer-buttons
-                      network-footer-toolbar-element
-                    "
-                  >
+                  <div class="footer-buttons network-footer-toolbar-element">
                     <button
                       (click)="toImage()"
-                      class="
-                      button
-                      is-primary is-rounded
-                      has-tooltip
-                    "
+                      class="button is-primary is-rounded has-tooltip"
                       pTooltip="Take a screenshot of the current network."
                       [ngClass]="{ 'button-small': smallStyle }"
                       [tooltipStyleClass]="'drgstn drgstn-tooltip'"
                       tooltipPosition="top"
                     >
-                    <span class="icon">
-                      <i class="fas fa-camera" aria-hidden="true"></i>
-                    </span>
+                      <span class="icon">
+                        <i class="fas fa-camera" aria-hidden="true"></i>
+                      </span>
                       <span [ngClass]="{ 'text-normal': smallStyle }"
-                      >Screenshot</span
+                        >Screenshot</span
                       >
                     </button>
                   </div>
                 </ng-container>
 
                 <ng-container *ngIf="myConfig.showFooterButtonExportGraphml">
-                  <app-download-button [nodeData]="nodeData" [smallStyle]="smallStyle" [buttonId]="'explorer-download'"></app-download-button>
+                  <app-download-button
+                    [nodeData]="nodeData"
+                    [smallStyle]="smallStyle"
+                    [buttonId]="'explorer-download'"
+                  ></app-download-button>
                 </ng-container>
 
                 <ng-container *ngIf="myConfig.showFooterButtonExpression">
@@ -231,10 +227,11 @@
                         <span
                           *ngIf="!selectedTissue"
                           [ngClass]="{ 'text-small': smallStyle }"
-                        >Tissue</span>
+                          >Tissue</span
+                        >
                         <span *ngIf="selectedTissue">{{
                           selectedTissue.name
-                          }}</span>
+                        }}</span>
                         <span *ngIf="expressionExpanded" class="icon is-small">
                           <i class="fas fa-angle-up" aria-hidden="true"></i>
                         </span>
@@ -386,82 +383,147 @@
             </a>
           </header>
           <div *ngIf="collapseAnalysisQuick">
-            <div class="card-content quick-find" [ngClass]="{small:smallStyle}">
+            <div
+              class="card-content quick-find"
+              [ngClass]="{ small: smallStyle }"
+            >
               <div class="field">
                 <div class="control">
-                  <div class="tile notification quick-start warning" [ngClass]="{small:smallStyle}">
+                  <div
+                    class="tile notification quick-start warning"
+                    [ngClass]="{ small: smallStyle }"
+                  >
                     <div class="align-vmiddle">
-                      <div [ngClass]="{'digit':!smallStyle, 'digit-small': smallStyle}">
+                      <div
+                        [ngClass]="{
+                          digit: !smallStyle,
+                          'digit-small': smallStyle
+                        }"
+                      >
                         <i class="fa fa-fast-forward"></i>
                       </div>
-                      <div style="display: flex; justify-content: center; width:100%">
+                      <div
+                        style="
+                          display: flex;
+                          justify-content: center;
+                          width: 100%;
+                        "
+                      >
                         <button
                           (click)="analysis.startQuickAnalysis(true, null)"
                           [disabled]="analysis.isLaunchingQuick()"
-                          class="button is-white is-rounded has-tooltip quick-start-btn"
+                          class="
+                            button
+                            is-white is-rounded
+                            has-tooltip
+                            quick-start-btn
+                          "
                           pTooltip="Find drugs for all proteins."
                           [tooltipStyleClass]="'drgstn drgstn-tooltip'"
                           tooltipPosition="top"
                         >
-                        <span class="icon quick-icon">
-                          <span *ngIf="!analysis.isLaunchingQuick()">
-                          <i class="fa fa-capsules"></i>
+                          <span class="icon quick-icon">
+                            <span *ngIf="!analysis.isLaunchingQuick()">
+                              <i class="fa fa-capsules"></i>
+                            </span>
+                            <span *ngIf="analysis.isLaunchingQuick()">
+                              <i class="fa fa-spin fa-spinner"></i>
                             </span>
-                          <span *ngIf="analysis.isLaunchingQuick()">
-                          <i class="fa fa-spin fa-spinner"></i>
                           </span>
-                        </span>
                           <span [ngClass]="{ 'text-normal': smallStyle }">
-                          Quick Start
-                        </span>
+                            Quick Start
+                          </span>
                         </button>
                       </div>
                     </div>
                   </div>
                   <div class="divisor-rapid">&mdash; or &mdash;</div>
-                  <div class="tile notification quick-start info" [ngClass]="{small:smallStyle}">
+                  <div
+                    class="tile notification quick-start info"
+                    [ngClass]="{ small: smallStyle }"
+                  >
                     <div class="align-vmiddle">
-                      <div [ngClass]="{'digit':!smallStyle, 'digit-small': smallStyle}"
-                           *ngIf="analysis.getCount() == 0">
+                      <div
+                        [ngClass]="{
+                          digit: !smallStyle,
+                          'digit-small': smallStyle
+                        }"
+                        *ngIf="analysis.getCount() == 0"
+                      >
                         1
                       </div>
-                      <div [ngClass]="{ 'digit': !smallStyle, 'digit-small': smallStyle }"
-                           *ngIf="analysis.getCount() > 0">
+                      <div
+                        [ngClass]="{
+                          digit: !smallStyle,
+                          'digit-small': smallStyle
+                        }"
+                        *ngIf="analysis.getCount() > 0"
+                      >
                         <i class="fa fa-check"></i>
                       </div>
-                      <div style="display: flex; justify-content: center; width:100%">
-                        <div [ngClass]="{ 'text-normal': smallStyle }" class="quick-start-btn"
-                        >Select Proteins
-                        </div
+                      <div
+                        style="
+                          display: flex;
+                          justify-content: center;
+                          width: 100%;
+                        "
+                      >
+                        <div
+                          [ngClass]="{ 'text-normal': smallStyle }"
+                          class="quick-start-btn"
                         >
+                          Select Proteins
+                        </div>
                       </div>
                     </div>
                   </div>
-                  <div class="tile notification quick-start info" [ngClass]="{small:smallStyle}">
+                  <div
+                    class="tile notification quick-start info"
+                    [ngClass]="{ small: smallStyle }"
+                  >
                     <div class="align-vmiddle">
-                      <div [ngClass]="{'digit':!smallStyle, 'digit-small': smallStyle}">2</div>
-                      <div style="display: flex; justify-content: center; width:100%">
+                      <div
+                        [ngClass]="{
+                          digit: !smallStyle,
+                          'digit-small': smallStyle
+                        }"
+                      >
+                        2
+                      </div>
+                      <div
+                        style="
+                          display: flex;
+                          justify-content: center;
+                          width: 100%;
+                        "
+                      >
                         <button
                           (click)="analysis.startQuickAnalysis(false, null)"
                           [disabled]="
-                          analysis.getCount() === 0 ||
-                          analysis.isLaunchingQuick()
-                        "
-                          class="button is-white is-rounded quick-start-btn drugs-btn"
+                            analysis.getCount() === 0 ||
+                            analysis.isLaunchingQuick()
+                          "
+                          class="
+                            button
+                            is-white is-rounded
+                            quick-start-btn
+                            drugs-btn
+                          "
                           pTooltip="Find drugs for the selected proteins."
                           [tooltipStyleClass]="'drgstn drgstn-tooltip'"
                           tooltipPosition="top"
-                        ><span class="icon quick-icon">
-                          <span *ngIf="!analysis.isLaunchingQuick()">
-                          <i class="fa fa-capsules"></i>
+                        >
+                          <span class="icon quick-icon">
+                            <span *ngIf="!analysis.isLaunchingQuick()">
+                              <i class="fa fa-capsules"></i>
+                            </span>
+                            <span *ngIf="analysis.isLaunchingQuick()">
+                              <i class="fa fa-spin fa-spinner"></i>
                             </span>
-                          <span *ngIf="analysis.isLaunchingQuick()">
-                          <i class="fa fa-spin fa-spinner"></i>
                           </span>
-                        </span>
-                        <span [ngClass]="{ 'text-normal': smallStyle }">
-                          {{ myConfig.taskDrugName }}
-                        </span>
+                          <span [ngClass]="{ 'text-normal': smallStyle }">
+                            {{ myConfig.taskDrugName }}
+                          </span>
                         </button>
                       </div>
                     </div>
@@ -631,7 +693,10 @@
               class="card-content overflow task-list-container"
               *ngIf="analysis.tasks && analysis.tasks.length > 0"
             >
-              <app-task-list [(token)]="selectedAnalysisToken"></app-task-list>
+              <app-task-list
+                [(token)]="selectedAnalysisToken"
+                [smallStyle]="smallStyle"
+              ></app-task-list>
             </div>
             <footer class="card-footer">
               <a
@@ -689,45 +754,45 @@
                 *ngIf="analysis.getCount() > 0"
               >
                 <thead>
-                <tr>
-                  <td>Label</td>
-                  <td>Group</td>
-                  <td *ngIf="myConfig.identifier !== 'symbol'">Symbol</td>
-                  <td *ngIf="myConfig.identifier !== 'uniprot'">Uniprot</td>
-                  <td>Actions</td>
-                </tr>
+                  <tr>
+                    <td>Label</td>
+                    <td>Group</td>
+                    <td *ngIf="myConfig.identifier !== 'symbol'">Symbol</td>
+                    <td *ngIf="myConfig.identifier !== 'uniprot'">Uniprot</td>
+                    <td>Actions</td>
+                  </tr>
                 </thead>
                 <tbody>
-                <tr *ngFor="let p of analysis.getSelection()">
-                  <td>
-                    <p class="is-capitalized">{{ p.data.label }}</p>
-                  </td>
-                  <td>
-                    <p>
-                      {{ myConfig.nodeGroups[p.data.group]["groupName"] }}
-                    </p>
-                  </td>
-                  <td *ngIf="myConfig.identifier !== 'symbol'">
-                    <p>{{ p.data.symbol }}</p>
-                  </td>
-                  <td *ngIf="myConfig.identifier !== 'uniprot'">
-                    <p>{{ p.data.uniprotAc }}</p>
-                  </td>
-                  <td>
-                    <button
-                      (click)="analysis.removeItems([p])"
-                      class="
+                  <tr *ngFor="let p of analysis.getSelection()">
+                    <td>
+                      <p class="is-capitalized">{{ p.data.label }}</p>
+                    </td>
+                    <td>
+                      <p>
+                        {{ myConfig.nodeGroups[p.data.group]["groupName"] }}
+                      </p>
+                    </td>
+                    <td *ngIf="myConfig.identifier !== 'symbol'">
+                      <p>{{ p.data.symbol }}</p>
+                    </td>
+                    <td *ngIf="myConfig.identifier !== 'uniprot'">
+                      <p>{{ p.data.uniprotAc }}</p>
+                    </td>
+                    <td>
+                      <button
+                        (click)="analysis.removeItems([p])"
+                        class="
                           button
                           is-small is-danger is-outlined
                           has-tooltip
                         "
-                      tooltipPosition="top"
-                      pTooltip="Remove from selection."
-                    >
-                      <i class="fa fa-trash"></i>
-                    </button>
-                  </td>
-                </tr>
+                        tooltipPosition="top"
+                        pTooltip="Remove from selection."
+                      >
+                        <i class="fa fa-trash"></i>
+                      </button>
+                    </td>
+                  </tr>
                 </tbody>
               </table>
               <i *ngIf="analysis.getCount() === 0">

src/app/services/analysis/analysis.service.ts

@@ -394,7 +394,7 @@ export class AnalysisService {
       clearInterval(this.intervalId);
     }
     // 5000
-    this.intervalId = setInterval(watch, 5000);
+    this.intervalId = setInterval(watch, 50000000);
   }