From 5bffca8d4202b00fd203ee5cbdca5ea85cf5b9ac Mon Sep 17 00:00:00 2001 From: AndiMajore <andi.majore@googlemail.com> Date: Thu, 13 Apr 2023 16:19:00 +0200 Subject: [PATCH] added cancel button to loading screen --- .../analysis-panel.component.ts | 75 ++++++++++--------- .../loading-screen.component.html | 17 +++++ .../loading-screen.component.ts | 15 +++- .../components/network/network.component.ts | 4 +- .../explorer-page.component.html | 4 +- .../explorer-page/explorer-page.component.ts | 22 +++++- .../legend-service/legend-service.service.ts | 7 +- 7 files changed, 95 insertions(+), 49 deletions(-) diff --git a/src/app/components/analysis-panel/analysis-panel.component.ts b/src/app/components/analysis-panel/analysis-panel.component.ts index 0fc23159..00466cbe 100644 --- a/src/app/components/analysis-panel/analysis-panel.component.ts +++ b/src/app/components/analysis-panel/analysis-panel.component.ts @@ -122,10 +122,9 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit @Output() resetEmitter: EventEmitter<boolean> = new EventEmitter(); public reset() { - this.resetEmitter.emit(true); this.networkHandler.activeNetwork.selectedTissue = null; - this.networkHandler.activeNetwork.expressionExpanded = false; this.close(); + this.resetEmitter.emit(true); } private rankTable(table: Array<Drug & Scored> | Array<Node & Scored & Seeded>) { @@ -400,6 +399,9 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit this.loading = true; this.netex.getTaskResult(this.token).then(async result => { + if (this.networkHandler.activeNetwork.networkType !== 'analysis') { + return; + } this.drugstoneConfig.set_analysisConfig(result.parameters.config); this.result = result; if (this.result.parameters.target === 'drug') { @@ -408,23 +410,25 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit this.legendService.add_to_context('drugTarget'); } const nodeAttributes = this.result.nodeAttributes || {}; - - this.networkHandler.activeNetwork.seedMap = nodeAttributes.isSeed || {}; + const analysisNetwork = this.networkHandler.networks['analysis']; + analysisNetwork.seedMap = nodeAttributes.isSeed || {}; // Reset this.nodeData = {nodes: null, edges: null}; - this.networkHandler.activeNetwork.networkEl.nativeElement.innerHTML = ''; - this.networkHandler.activeNetwork.networkInternal = null; + analysisNetwork.networkEl.nativeElement.innerHTML = ''; + analysisNetwork.networkInternal = null; // Create await this.createNetwork(this.result).then(nw => { return new Promise<any>((resolve, reject) => { - + if (this.networkHandler.activeNetwork.networkType !== 'analysis') { + return; + } const nodes = nw.nodes; const edges = nw.edges; - this.networkHandler.activeNetwork.inputNetwork = {nodes: nodes, edges: edges}; + analysisNetwork.inputNetwork = {nodes: nodes, edges: edges}; this.nodeData.nodes = new vis.DataSet(nodes); this.nodeData.edges = new vis.DataSet(edges); - const container = this.networkHandler.activeNetwork.networkEl.nativeElement; + const container = analysisNetwork.networkEl.nativeElement; const isBig = nodes.length > 100 || edges.length > 100; const options = NetworkSettings.getOptions(isBig ? 'analysis-big' : 'analysis', this.drugstoneConfig.currentConfig()); // @ts-ignore @@ -437,16 +441,16 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit if (this.drugstoneConfig.config.physicsOn) { this.drugstoneConfig.config.physicsOn = !isBig; } - this.networkHandler.activeNetwork.networkInternal = new vis.Network(container, this.nodeData, options); + analysisNetwork.networkInternal = new vis.Network(container, this.nodeData, options); if (isBig) { resolve(nodes); } - this.networkHandler.activeNetwork.networkInternal.once('stabilizationIterationsDone', async () => { - if (!this.drugstoneConfig.config.physicsOn || this.networkHandler.activeNetwork.isBig()) { - this.networkHandler.activeNetwork.updatePhysicsEnabled(false); + analysisNetwork.networkInternal.once('stabilizationIterationsDone', async () => { + if (!this.drugstoneConfig.config.physicsOn || analysisNetwork.isBig()) { + analysisNetwork.updatePhysicsEnabled(false); } - this.networkHandler.updateAdjacentNodes(this.networkHandler.activeNetwork.isBig()).then(() => { + this.networkHandler.updateAdjacentNodes(analysisNetwork.isBig()).then(() => { resolve(nodes); }); }); @@ -463,7 +467,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit this.tableSelectedProteins = []; this.tableProteins.forEach((r) => { r.rawScore = r.score; - r.isSeed = this.networkHandler.activeNetwork.seedMap[r.id]; + r.isSeed = analysisNetwork.seedMap[r.id]; const wrapper = getWrapperFromNode(r); if (this.analysis.inSelection(wrapper)) { this.tableSelectedProteins.push(r); @@ -477,23 +481,23 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit if (this.tableHasScores) { this.toggleNormalization(true); } - this.networkHandler.activeNetwork.networkInternal.setData({nodes: undefined, edge: undefined}); + analysisNetwork.networkInternal.setData({nodes: undefined, edge: undefined}); setTimeout(() => { - this.networkHandler.activeNetwork.networkInternal.setData(this.nodeData); + analysisNetwork.networkInternal.setData(this.nodeData); }, 1000); - this.networkHandler.activeNetwork.networkInternal.on('dragEnd', (properties) => { - const node_ids = this.networkHandler.activeNetwork.networkInternal.getSelectedNodes(); + analysisNetwork.networkInternal.on('dragEnd', (properties) => { + const node_ids = analysisNetwork.networkInternal.getSelectedNodes(); if (node_ids.length === 0) { return; } this.analysis.addNodesByIdsToSelection(node_ids); - this.networkHandler.activeNetwork.networkInternal.unselectAll(); + analysisNetwork.networkInternal.unselectAll(); }); - this.networkHandler.activeNetwork.networkInternal.on('deselectNode', (properties) => { + analysisNetwork.networkInternal.on('deselectNode', (properties) => { this.showDetailsChange.emit(null); }); - this.networkHandler.activeNetwork.networkInternal.on('doubleClick', (properties) => { + analysisNetwork.networkInternal.on('doubleClick', (properties) => { const nodeIds: Array<string> = properties.nodes; if (nodeIds.length > 0) { const nodeId = nodeIds[0]; @@ -513,13 +517,13 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit } }); - this.networkHandler.activeNetwork.networkInternal.on('click', (properties) => { + analysisNetwork.networkInternal.on('click', (properties) => { if (properties.nodes.length === 0 && properties.edges.length === 1) { // clicked on one edge const edgeId = properties.edges[0]; - this.networkHandler.activeNetwork.openEdgeSummary(edgeId); + analysisNetwork.openEdgeSummary(edgeId); } else { - this.networkHandler.activeNetwork.activeEdge = null; + analysisNetwork.activeEdge = null; const selectedNodes = this.nodeData.nodes.get(properties.nodes); if (selectedNodes.length > 0) { this.showDetailsChange.emit(getWrapperFromNode(selectedNodes[0])); @@ -542,17 +546,17 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit if (!node) { continue; } - const pos = this.networkHandler.activeNetwork.networkInternal.getPositions([item.id]); + const pos = analysisNetwork.networkInternal.getPositions([item.id]); node.x = pos[item.id].x; node.y = pos[item.id].y; - const isSeed = this.networkHandler.activeNetwork.highlightSeeds ? this.networkHandler.activeNetwork.seedMap[node.id] : false; + const isSeed = analysisNetwork.highlightSeeds ? analysisNetwork.seedMap[node.id] : false; const nodeStyled = NetworkSettings.getNodeStyle( node, this.drugstoneConfig.currentConfig(), isSeed, selected, - this.networkHandler.activeNetwork.getGradient(item.id), - this.networkHandler.activeNetwork.nodeRenderer + analysisNetwork.getGradient(item.id), + analysisNetwork.nodeRenderer ); updatedNodes.push(nodeStyled); } @@ -575,7 +579,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit // else: selected is null const updatedNodes = []; this.nodeData.nodes.forEach((node) => { - const isSeed = this.networkHandler.activeNetwork.highlightSeeds ? this.networkHandler.activeNetwork.seedMap[node.id] : false; + const isSeed = analysisNetwork.highlightSeeds ? analysisNetwork.seedMap[node.id] : false; if (!isSeed) { return; } @@ -584,8 +588,8 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit this.drugstoneConfig.currentConfig(), isSeed, selected, - this.networkHandler.activeNetwork.getGradient(node.id), - this.networkHandler.activeNetwork.nodeRenderer + analysisNetwork.getGradient(node.id), + analysisNetwork.nodeRenderer ); updatedNodes.push(nodeStyled); }); @@ -646,12 +650,13 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit } close() { - this.networkHandler.activeNetwork.gradientMap = {}; + const analysisNetwork = this.networkHandler.networks['analysis']; + analysisNetwork.gradientMap = {}; this.drugstoneConfig.remove_analysisConfig(); this.expressionExpanded = false; this.expressionMap = undefined; - this.networkHandler.activeNetwork.seedMap = {}; - this.networkHandler.activeNetwork.highlightSeeds = false; + analysisNetwork.seedMap = {}; + analysisNetwork.highlightSeeds = false; this.analysis.switchSelection('main'); this.token = null; this.tokenChange.emit(this.token); diff --git a/src/app/components/loading-screen/loading-screen.component.html b/src/app/components/loading-screen/loading-screen.component.html index ca8040e3..3b79fc1d 100644 --- a/src/app/components/loading-screen/loading-screen.component.html +++ b/src/app/components/loading-screen/loading-screen.component.html @@ -3,5 +3,22 @@ <div class="loading-screen-inner-text pulse"> Loading... </div> + <button (click)="cancel()" + class="button is-primary is-rounded has-tooltip" + pTooltip="Cancel the loading screen in case it takes too long or gets stuck." + [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-bottom'" + tooltipPosition="bottom" + [ngClass]="{ + 'is-small': drugstoneConfig.smallStyle + }" + > + <app-fa-solid-icon icon="times"></app-fa-solid-icon> + <span + [ngClass]="{ + 'text-normal': drugstoneConfig.smallStyle + }" + >Cancel</span + > + </button> </div> </div> diff --git a/src/app/components/loading-screen/loading-screen.component.ts b/src/app/components/loading-screen/loading-screen.component.ts index e2dfffca..162d8386 100644 --- a/src/app/components/loading-screen/loading-screen.component.ts +++ b/src/app/components/loading-screen/loading-screen.component.ts @@ -1,5 +1,6 @@ -import { Component, OnInit } from '@angular/core'; -import { LoadingScreenService } from 'src/app/services/loading-screen/loading-screen.service'; +import {Component, EventEmitter, OnInit, Output} from '@angular/core'; +import {LoadingScreenService} from 'src/app/services/loading-screen/loading-screen.service'; +import {DrugstoneConfigService} from '../../services/drugstone-config/drugstone-config.service'; @Component({ selector: 'app-loading-screen', @@ -8,7 +9,8 @@ import { LoadingScreenService } from 'src/app/services/loading-screen/loading-sc }) export class LoadingScreenComponent implements OnInit { - constructor(private loadingScreen: LoadingScreenService) { } + constructor(private loadingScreen: LoadingScreenService, public drugstoneConfig: DrugstoneConfigService) { + } public active = false; public fullscreen = false; @@ -18,4 +20,11 @@ export class LoadingScreenComponent implements OnInit { this.loadingScreen._isFullscreen.forEach(bool => this.fullscreen = bool); } + @Output() reset: EventEmitter<boolean> = new EventEmitter(); + + cancel(): void { + this.active = false; + this.reset.emit(true); + } + } diff --git a/src/app/components/network/network.component.ts b/src/app/components/network/network.component.ts index 47754e9e..66c2bbe6 100644 --- a/src/app/components/network/network.component.ts +++ b/src/app/components/network/network.component.ts @@ -116,8 +116,6 @@ export class NetworkComponent implements OnInit { @Output() resetEmitter: EventEmitter<boolean> = new EventEmitter(); public reset() { - this.nodeGroupsWithExpression = new Set(); - this.nodeRenderer = null; this.resetEmitter.emit(true); } @@ -132,7 +130,7 @@ export class NetworkComponent implements OnInit { return {edges: this.inputNetwork.edges, nodes}; } - resetInputNetwork(){ + resetInputNetwork() { const nodes = this.inputNetwork.nodes; nodes.forEach(n => { if (n._group) { diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html index 223148f5..d2628a88 100644 --- a/src/app/pages/explorer-page/explorer-page.component.html +++ b/src/app/pages/explorer-page/explorer-page.component.html @@ -2,7 +2,7 @@ <div class="is-hidden-mobile fullheight" id="appContainer"> <app-fa-icons></app-fa-icons> - <app-loading-screen></app-loading-screen> + <app-loading-screen (reset)="reset()"></app-loading-screen> <app-network-warning></app-network-warning> <app-network-empty-warning></app-network-empty-warning> <app-group-warning></app-group-warning> @@ -608,7 +608,7 @@ <div class="drugstone network column" id="main-column"> <!-- analysis panel with analysis network --> <div *ngIf="selectedToken"> - <app-analysis-panel (resetEmitter)="reset()" + <app-analysis-panel #analysis (resetEmitter)="reset()" [(token)]="selectedToken" [(tokenType)]="selectedAnalysisTokenType" (showDetailsChange)=" diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts index d6da6cf5..441f3721 100644 --- a/src/app/pages/explorer-page/explorer-page.component.ts +++ b/src/app/pages/explorer-page/explorer-page.component.ts @@ -24,6 +24,7 @@ import * as merge from 'lodash/fp/merge'; import * as JSON5 from 'json5'; import {DrugstoneConfigService} from 'src/app/services/drugstone-config/drugstone-config.service'; import {NetworkHandlerService} from 'src/app/services/network-handler/network-handler.service'; +import {LegendService} from '../../services/legend-service/legend-service.service'; declare var vis: any; @@ -46,12 +47,24 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { @Input() public id: undefined | string; + @ViewChild('analysis') analysisElement public reset() { - this.networkHandler.activeNetwork.selectTissue(null); - this.config = this.config; + // const analysisNetwork = this.networkHandler.networks['analysis']; + const explorerNetwork = this.networkHandler.networks['explorer']; + if (this.analysisElement) { + this.analysisElement.close(); + } + this.selectedToken = null; + explorerNetwork.selectTissue(null); + explorerNetwork.adjacentDrugs = false; + explorerNetwork.adjacentDisordersProtein = false; + explorerNetwork.adjacentDisordersDrug = false; + explorerNetwork.nodeRenderer = null; + explorerNetwork.nodeGroupsWithExpression = new Set(); + explorerNetwork.updatePhysicsEnabled(false); + this.legendService.reset(); this.network = this.network; - this.groups = this.groups; } @Input() @@ -198,7 +211,8 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { public analysis: AnalysisService, public drugstoneConfig: DrugstoneConfigService, public netex: NetexControllerService, - public networkHandler: NetworkHandlerService) { + public networkHandler: NetworkHandlerService, + public legendService: LegendService) { this.showDetails = false; this.analysis.subscribeList(async (items, selected) => { diff --git a/src/app/services/legend-service/legend-service.service.ts b/src/app/services/legend-service/legend-service.service.ts index 6c482703..a883f0dd 100644 --- a/src/app/services/legend-service/legend-service.service.ts +++ b/src/app/services/legend-service/legend-service.service.ts @@ -1,5 +1,5 @@ import {Injectable} from '@angular/core'; -import {LegendContext} from "../../interfaces"; +import {LegendContext} from '../../interfaces'; @Injectable({ providedIn: 'root' @@ -33,6 +33,10 @@ export class LegendService { } } + public reset() { + this.context = []; + } + public get_nodes_to_delete() { const out = [].concat(this.default_delete); for (const node of this.default_delete) { @@ -51,5 +55,4 @@ export class LegendService { } - } -- GitLab