diff --git a/src/app/components/download-button/download-button.component.html b/src/app/components/download-button/download-button.component.html new file mode 100644 index 0000000000000000000000000000000000000000..e75f66ff8233e0183c1e4822f2fccb1786facc42 --- /dev/null +++ b/src/app/components/download-button/download-button.component.html @@ -0,0 +1,42 @@ +<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> diff --git a/src/app/components/download-button/download-button.component.scss b/src/app/components/download-button/download-button.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..6f4b627a8c5fb90c7c46b7d7934fefac183c59dd --- /dev/null +++ b/src/app/components/download-button/download-button.component.scss @@ -0,0 +1,5 @@ +@import "src/stylesheets/variables"; + +.dropdown-menu{ + z-index: $analysis-network-toolbar-dropdown-z !important; +} \ No newline at end of file diff --git a/src/app/components/download-button/download-button.component.spec.ts b/src/app/components/download-button/download-button.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..635c59fb8253e9cb1a3576ae90c18819a2732cb1 --- /dev/null +++ b/src/app/components/download-button/download-button.component.spec.ts @@ -0,0 +1,25 @@ +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(); + }); +}); diff --git a/src/app/components/download-button/download-button.component.ts b/src/app/components/download-button/download-button.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..596f7558a16e2220af9d2ba4bdbad3632e0b8c5d --- /dev/null +++ b/src/app/components/download-button/download-button.component.ts @@ -0,0 +1,28 @@ +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); + }); + } + +} diff --git a/src/app/components/task-list/task-list.component.html b/src/app/components/task-list/task-list.component.html index 7db23b0f12b278d3f02f5fb4f05762dddf8943eb..1c44521f3a3a28c113a1a28f9d3752da6b464730 100644 --- a/src/app/components/task-list/task-list.component.html +++ b/src/app/components/task-list/task-list.component.html @@ -1,74 +1,168 @@ <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> diff --git a/src/app/components/task-list/task-list.component.scss b/src/app/components/task-list/task-list.component.scss index 81b579eb2752bd0a5f73efb6907beda18f6f7cd3..ec5bceefa372b1f007e9ec671231569e201a1783 100644 --- a/src/app/components/task-list/task-list.component.scss +++ b/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; } diff --git a/src/app/components/task-list/task-list.component.ts b/src/app/components/task-list/task-list.component.ts index b238299144cbc4b81774577df4f6dbfbd4271c09..7d65563c8d4c25513f29d6a432e48a9234121797 100644 --- a/src/app/components/task-list/task-list.component.ts +++ b/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; diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html index 60d443efada37a684524d523d72a973652d66bbb..774e6032938e0eb70acc634fbf90ade1b29d6e28 100644 --- a/src/app/pages/explorer-page/explorer-page.component.html +++ b/src/app/pages/explorer-page/explorer-page.component.html @@ -1,7 +1,4 @@ -<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">— or —</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"> diff --git a/src/app/services/analysis/analysis.service.ts b/src/app/services/analysis/analysis.service.ts index 0752bd504f9dc66a1ee2ca704a811fb063edf310..92981e1606037a78757e9397d0685937fa017003 100644 --- a/src/app/services/analysis/analysis.service.ts +++ b/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); }