diff --git a/src/app/components/analysis-panel/analysis-panel.component.ts b/src/app/components/analysis-panel/analysis-panel.component.ts index 0fc231594aa278d94ce27ae4f371c15129277fb3..00466cbec1c899cfbdc8c2d57468baa4c18b8389 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 ca8040e3e2a90811f1de452b6c86fe1d61851774..3b79fc1daab0081d317f8f07b4f0e84edcb5b8b8 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 e2dfffcad552f21a523511127ed0a13501f5a894..162d83860462759a94247c657f17fcc18f96e4d7 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 47754e9ec0761a52dc863f3e4f141038ba9b7da7..66c2bbe61aea7a12ba2335f489d00f48cc3a4975 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 223148f5844599f5a57fdc93c9c6b8bb8bc0bc47..d2628a88e677fc0590923ff0a183e088f0e4bc95 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 d6da6cf58107acb48ee0e5c8ba7c44ec387dc372..441f372185d0ea85bc0eb993c70453a9d056646e 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 6c4827036b09b8e55093d543151700911e46715f..a883f0dd1a78ab6960209def4bb9695b9748ac21 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 { } - }