From c2d830012435e24dae040f66f6cd7daede14a4ce Mon Sep 17 00:00:00 2001
From: Michael Hartung <michi@Michaels-MacBook-Pro.local>
Date: Thu, 29 Jul 2021 10:01:59 +0200
Subject: [PATCH] keepin network overview updated
---
.../analysis-panel.component.ts | 7 +-
.../explorer-page.component.html | 856 +++++++++++-------
.../explorer-page/explorer-page.component.ts | 7 +-
3 files changed, 539 insertions(+), 331 deletions(-)
diff --git a/src/app/components/analysis-panel/analysis-panel.component.ts b/src/app/components/analysis-panel/analysis-panel.component.ts
index 1387e48c..57015d98 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.ts
+++ b/src/app/components/analysis-panel/analysis-panel.component.ts
@@ -24,6 +24,7 @@ import {
Task,
Tissue,
Wrapper,
+ NodeInteraction,
} from '../../interfaces';
import domtoimage from 'dom-to-image';
import {toast} from 'bulma-toast';
@@ -72,7 +73,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
}
@Output() tokenChange = new EventEmitter<string | null>();
@Output() showDetailsChange = new EventEmitter<Wrapper>();
- @Output() visibleItems = new EventEmitter<[any[], [Node[], Tissue]]>();
+ @Output() visibleItems = new EventEmitter<[any[], [Node[], Tissue], NodeInteraction[]]>();
public task: Task | null = null;
public myConfig: IConfig = JSON.parse(JSON.stringify(defaultConfig));
@@ -340,7 +341,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
public emitVisibleItems(on: boolean) {
if (on) {
- this.visibleItems.emit([this.nodeData.nodes, [this.proteins, this.selectedTissue]]);
+ this.visibleItems.emit([this.nodeData.nodes, [this.proteins, this.selectedTissue], this.nodeData.edges]);
} else {
this.visibleItems.emit(null);
}
@@ -585,6 +586,8 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
this.adjacentDrugEdgesList = [];
}
this.setLegendContext()
+ // emit data to update sidebar information
+ this.emitVisibleItems(true);
}
public updatePhysicsEnabled(bool: boolean) {
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index 6529540e..97633a5b 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -1,50 +1,65 @@
-<div id="appWindow" [style.color]="textColor" (window:resize)="onResize($event)">
+<div
+ id="appWindow"
+ [style.color]="textColor"
+ (window:resize)="onResize($event)"
+>
<div class="is-hidden-mobile fullheight">
-
- <app-launch-analysis [(show)]="showAnalysisDialog"
- [target]="analysisDialogTarget"
- [config]="myConfig"
- [inputNetwork]="{nodes:proteins, edges:edges}">
+ <app-launch-analysis
+ [(show)]="showAnalysisDialog"
+ [target]="analysisDialogTarget"
+ [config]="myConfig"
+ [inputNetwork]="{ nodes: proteins, edges: edges }"
+ >
</app-launch-analysis>
- <app-custom-proteins [(show)]="showCustomProteinsDialog" [visibleNodes]="currentViewNodes">
+ <app-custom-proteins
+ [(show)]="showCustomProteinsDialog"
+ [visibleNodes]="currentViewNodes"
+ >
</app-custom-proteins>
- <app-add-expressed-proteins [(show)]="showThresholdDialog"
- [selectedTissue]="currentViewSelectedTissue"
- [visibleNodes]="currentViewNodes"
- [currentViewProteins]="currentViewProteins"
- [expressionMap]="expressionMap"
+ <app-add-expressed-proteins
+ [(show)]="showThresholdDialog"
+ [selectedTissue]="currentViewSelectedTissue"
+ [visibleNodes]="currentViewNodes"
+ [currentViewProteins]="currentViewProteins"
+ [expressionMap]="expressionMap"
>
</app-add-expressed-proteins>
<!-- Start explorer -->
<div class="covex explorer">
-
<!-- Start left sidebar -->
<div *ngIf="myConfig.showLeftSidebar" class="covex sidebar bar-left">
-
- <div *ngIf="myConfig.showOverview" class="card bar-large" [ngClass]="{'b-text-small':smallStyle}">
+ <div
+ *ngIf="myConfig.showOverview"
+ class="card bar-large"
+ [ngClass]="{ 'b-text-small': smallStyle }"
+ >
<header class="card-header">
<p class="card-header-title">
- <span class="icon">
- <i class="fas fa-info" aria-hidden="true"></i>
- </span> Network Overview
+ <span class="icon">
+ <i class="fas fa-info" aria-hidden="true"></i>
+ </span>
+ Network Overview
</p>
- <a (click)="collapseOverview= !collapseOverview" data-action="collapse"
- class="card-header-icon is-hidden-fullscreen" aria-label="more options">
- <span *ngIf="collapseOverview" class="icon">
- <i class="fas fa-angle-down" aria-hidden="true"></i>
- </span>
+ <a
+ (click)="collapseOverview = !collapseOverview"
+ data-action="collapse"
+ class="card-header-icon is-hidden-fullscreen"
+ aria-label="more options"
+ >
+ <span *ngIf="collapseOverview" class="icon">
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
+ </span>
<span *ngIf="!collapseOverview" class="icon">
- <i class="fas fa-angle-left" aria-hidden="true"></i>
- </span>
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
+ </span>
</a>
</header>
<div *ngIf="collapseOverview">
<div class="card-content">
<nav class="level" *ngIf="proteinData">
-
<!-- TO DO : CHANGE THIS LATER
<div class="level-item has-text-centered">
<div>
@@ -56,14 +71,18 @@
<div class="level-item has-text-centered">
<div>
- <p class="heading">Proteins</p>
- <p class="title">{{ proteinData.proteins.length }}</p>
+ <p class="heading">Nodes</p>
+ <p class="title">
+ {{ currentViewNodes.length }}
+ </p>
</div>
</div>
<div class="level-item has-text-centered">
<div>
<p class="heading">Interactions</p>
- <p class="title">{{ proteinData.edges.length }}</p>
+ <p class="title">
+ {{ currentViewEdges.length }}
+ </p>
</div>
</div>
</nav>
@@ -71,31 +90,42 @@
</div>
</div>
- <div *ngIf="myConfig.showQuery" class="card bar-large" [ngClass]="{'b-text-small':smallStyle}">
+ <div
+ *ngIf="myConfig.showQuery"
+ class="card bar-large"
+ [ngClass]="{ 'b-text-small': smallStyle }"
+ >
<header class="card-header">
<p class="card-header-title">
- <span class="icon">
- <i class="fas fa-search" aria-hidden="true"></i>
- </span> Query Protein/Gene
+ <span class="icon">
+ <i class="fas fa-search" aria-hidden="true"></i>
+ </span>
+ Query Protein/Gene
</p>
- <a (click)="collapseQuery = !collapseQuery" data-action="collapse"
- class="card-header-icon is-hidden-fullscreen" aria-label="more options">
- <span class="icon">
- <span *ngIf="collapseQuery" class="icon">
- <i class="fas fa-angle-down" aria-hidden="true"></i>
- </span>
- <span *ngIf="!collapseQuery" class="icon">
- <i class="fas fa-angle-left" aria-hidden="true"></i>
- </span>
- </span>
+ <a
+ (click)="collapseQuery = !collapseQuery"
+ data-action="collapse"
+ class="card-header-icon is-hidden-fullscreen"
+ aria-label="more options"
+ >
+ <span class="icon">
+ <span *ngIf="collapseQuery" class="icon">
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
+ </span>
+ <span *ngIf="!collapseQuery" class="icon">
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
+ </span>
+ </span>
</a>
</header>
<div *ngIf="collapseQuery">
<div class="card-content">
<div class="field">
<div class="control">
- <app-query-tile-component (selectItem)="queryAction($event)"
- [queryItems]="queryItems"></app-query-tile-component>
+ <app-query-tile-component
+ (selectItem)="queryAction($event)"
+ [queryItems]="queryItems"
+ ></app-query-tile-component>
</div>
</div>
</div>
@@ -105,79 +135,120 @@
<!-- Start network block -->
<div class="covex network center-panel" id="main-column">
-
<div class="analysis-view" *ngIf="selectedAnalysisToken">
- <app-analysis-panel [(token)]="selectedAnalysisToken"
- (showDetailsChange)="selectedWrapper = $event"
- (visibleItems)="analysisWindowChanged($event)" [config]="myConfig"
- [smallStyle]="smallStyle"></app-analysis-panel>
+ <app-analysis-panel
+ [(token)]="selectedAnalysisToken"
+ (showDetailsChange)="selectedWrapper = $event"
+ (visibleItems)="analysisWindowChanged($event)"
+ [config]="myConfig"
+ [smallStyle]="smallStyle"
+ ></app-analysis-panel>
</div>
<div class="card network">
-
<header class="card-header network-header">
<p class="card-header-title">
- {{myConfig.title}}
+ {{ myConfig.title }}
</p>
</header>
<div class="card-content explorer-network-view-settings">
<div class="card-image canvas-content" #networkWithLegend>
<div *ngIf="myConfig.showLegend">
- <app-network-legend [config]="myConfig" [context]="legendContext"></app-network-legend>
+ <app-network-legend
+ [config]="myConfig"
+ [context]="legendContext"
+ ></app-network-legend>
</div>
<div class="center image1 fullheight" #network>
- <button class="button is-loading center" alt="loading...">Loading</button>
+ <button class="button is-loading center" alt="loading...">
+ Loading
+ </button>
</div>
</div>
- <footer *ngIf="myConfig.showFooter" class="card-footer toolbar network-footer-toolbar">
-
+ <footer
+ *ngIf="myConfig.showFooter"
+ class="card-footer toolbar network-footer-toolbar"
+ >
<div class="network-footer-toolbar-inner-container">
-
<ng-container *ngIf="myConfig.showFooterButtonScreenshot">
- <button (click)="toImage()"
- class="button is-primary is-rounded has-tooltip network-footer-toolbar-element"
- pTooltip="Take a screenshot of the current network." tooltipPosition="top">
- <span class="icon">
- <i class="fas fa-camera" aria-hidden="true"></i>
- </span>
- <span [ngClass]="{'text-normal':smallStyle}">Screenshot</span>
+ <button
+ (click)="toImage()"
+ class="
+ button
+ is-primary is-rounded
+ has-tooltip
+ network-footer-toolbar-element
+ "
+ pTooltip="Take a screenshot of the current network."
+ tooltipPosition="top"
+ >
+ <span class="icon">
+ <i class="fas fa-camera" aria-hidden="true"></i>
+ </span>
+ <span [ngClass]="{ 'text-normal': smallStyle }"
+ >Screenshot</span
+ >
</button>
</ng-container>
<ng-container *ngIf="myConfig.showFooterButtonExpression">
- <div class="footer-buttons dropdown is-up network-footer-toolbar-element"
- [class.is-active]="expressionExpanded">
-
+ <div
+ class="
+ footer-buttons
+ dropdown
+ is-up
+ network-footer-toolbar-element
+ "
+ [class.is-active]="expressionExpanded"
+ >
<div class="dropdown-trigger">
- <button (click)="expressionExpanded=!expressionExpanded"
- class="button is-rounded is-primary" [class.is-outlined]="!selectedTissue"
- aria-haspopup="true" aria-controls="dropdown-menu"
- pTooltip="Tissue expression data is provided by the GTEx project." tooltipPosition="top"
- [ngClass]="{'button-small':smallStyle}">
- <span *ngIf="!selectedTissue" [ngClass]="{'text-small':smallStyle}">Tissue</span>
- <span *ngIf="selectedTissue">{{selectedTissue.name}}</span>
+ <button
+ (click)="expressionExpanded = !expressionExpanded"
+ class="button is-rounded is-primary"
+ [class.is-outlined]="!selectedTissue"
+ aria-haspopup="true"
+ aria-controls="dropdown-menu"
+ pTooltip="Tissue expression data is provided by the GTEx project."
+ tooltipPosition="top"
+ [ngClass]="{ 'button-small': smallStyle }"
+ >
+ <span
+ *ngIf="!selectedTissue"
+ [ngClass]="{ 'text-small': smallStyle }"
+ >Tissue</span
+ >
+ <span *ngIf="selectedTissue">{{
+ selectedTissue.name
+ }}</span>
<span *ngIf="expressionExpanded" class="icon is-small">
- <i class="fas fa-angle-up" aria-hidden="true"></i>
- </span>
+ <i class="fas fa-angle-up" aria-hidden="true"></i>
+ </span>
<span *ngIf="!expressionExpanded" class="icon is-small">
- <i class="fas fa-angle-left" aria-hidden="true"></i>
- </span>
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
+ </span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content tissue-dropdown">
<div class="scroll-area">
- <a (click)="selectTissue(null)"
- [class.is-active]="!selectedTissue"
- class="dropdown-item">
+ <a
+ (click)="selectTissue(null)"
+ [class.is-active]="!selectedTissue"
+ class="dropdown-item"
+ >
None
</a>
- <a *ngFor="let tissue of analysis.getTissues()"
- (click)="selectTissue(tissue)"
- [class.is-active]="selectedTissue && tissue.netexId === selectedTissue.netexId"
- class="dropdown-item">
- {{tissue.name}}
+ <a
+ *ngFor="let tissue of analysis.getTissues()"
+ (click)="selectTissue(tissue)"
+ [class.is-active]="
+ selectedTissue &&
+ tissue.netexId === selectedTissue.netexId
+ "
+ class="dropdown-item"
+ >
+ {{ tissue.name }}
</a>
</div>
</div>
@@ -185,17 +256,27 @@
</div>
</ng-container>
- <app-toggle class="footer-buttons network-footer-toolbar-element" textOn="Drugs" textOff="Off"
- tooltipOn="Display adjacent drugs ON."
- tooltipOff="Display adjacent drugs OFF."
- [smallStyle]="smallStyle"
- [value]="adjacentDrugs" (valueChange)="updateAdjacentDrugs($event)"></app-toggle>
-
- <app-toggle class="footer-buttons network-footer-toolbar-element" textOn="Animation On" textOff="Off"
- tooltipOn="Enable the network animation."
- tooltipOff="Disable the network animation and freeze nodes."
- [smallStyle]="smallStyle"
- [value]="physicsEnabled" (valueChange)="updatePhysicsEnabled($event)"></app-toggle>
+ <app-toggle
+ class="footer-buttons network-footer-toolbar-element"
+ textOn="Drugs"
+ textOff="Off"
+ tooltipOn="Display adjacent drugs ON."
+ tooltipOff="Display adjacent drugs OFF."
+ [smallStyle]="smallStyle"
+ [value]="adjacentDrugs"
+ (valueChange)="updateAdjacentDrugs($event)"
+ ></app-toggle>
+
+ <app-toggle
+ class="footer-buttons network-footer-toolbar-element"
+ textOn="Animation On"
+ textOff="Off"
+ tooltipOn="Enable the network animation."
+ tooltipOff="Disable the network animation and freeze nodes."
+ [smallStyle]="smallStyle"
+ [value]="physicsEnabled"
+ (valueChange)="updatePhysicsEnabled($event)"
+ ></app-toggle>
</div>
</footer>
</div>
@@ -206,52 +287,69 @@
<div *ngIf="myConfig.showRightSidebar" class="covex sidebar bar-right">
<div *ngIf="myConfig.showItemSelector" class="card bar-large">
- <header class="card-header" [ngClass]="{'b-text-small':smallStyle}">
+ <header
+ class="card-header"
+ [ngClass]="{ 'b-text-small': smallStyle }"
+ >
<p class="card-header-title">
- <span *ngIf="!selectedWrapper" class="icon">
- <i class="fas fa-info" aria-hidden="true"></i>
- </span>
+ <span *ngIf="!selectedWrapper" class="icon">
+ <i class="fas fa-info" aria-hidden="true"></i>
+ </span>
<!-- <i *ngIf="selectedWrapper && selectedWrapper.data.netexId && selectedWrapper.data.netexId.startsWith('p')" class="fas fa-dna" aria-hidden="true"></i>
<i *ngIf="selectedWrapper && selectedWrapper.data.netexId && selectedWrapper.data.netexId.startsWith('d')" class="fas fa-capsules"
aria-hidden="true"></i> -->
<span *ngIf="!selectedWrapper">No item selected</span>
<span *ngIf="selectedWrapper">
- <span>{{ selectedWrapper.data.type }}</span>
- </span>
+ <span>{{ selectedWrapper.data.type }}</span>
+ </span>
</p>
- <a (click)="collapseDetails = !collapseDetails" data-action="collapse"
- class="card-header-icon is-hidden-fullscreen" aria-label="more options">
- <span *ngIf="collapseDetails" class="icon">
- <i class="fas fa-angle-down" aria-hidden="true"></i>
- </span>
+ <a
+ (click)="collapseDetails = !collapseDetails"
+ data-action="collapse"
+ class="card-header-icon is-hidden-fullscreen"
+ aria-label="more options"
+ >
+ <span *ngIf="collapseDetails" class="icon">
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
+ </span>
<span *ngIf="!collapseDetails" class="icon">
- <i class="fas fa-angle-left" aria-hidden="true"></i>
- </span>
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
+ </span>
</a>
</header>
<div *ngIf="collapseDetails">
<div class="card-content">
- <app-info-tile [wrapper]="selectedWrapper" [smallStyle]="smallStyle"></app-info-tile>
+ <app-info-tile
+ [wrapper]="selectedWrapper"
+ [smallStyle]="smallStyle"
+ ></app-info-tile>
</div>
</div>
</div>
<div *ngIf="myConfig.showSimpleAnalysis" class="card bar-large">
- <header class="card-header" [ngClass]="{'b-text-small':smallStyle}">
+ <header
+ class="card-header"
+ [ngClass]="{ 'b-text-small': smallStyle }"
+ >
<p class="card-header-title">
- <span class="icon">
- <i class="fas fa-flask" aria-hidden="true"></i>
- </span>
+ <span class="icon">
+ <i class="fas fa-flask" aria-hidden="true"></i>
+ </span>
Simple Analysis
</p>
- <a (click)="collapseAnalysisQuick = !collapseAnalysisQuick" data-action="collapse"
- class="card-header-icon is-hidden-fullscreen" aria-label="more options">
- <span *ngIf="collapseAnalysisQuick" class="icon">
- <i class="fas fa-angle-down" aria-hidden="true"></i>
- </span>
+ <a
+ (click)="collapseAnalysisQuick = !collapseAnalysisQuick"
+ data-action="collapse"
+ class="card-header-icon is-hidden-fullscreen"
+ aria-label="more options"
+ >
+ <span *ngIf="collapseAnalysisQuick" class="icon">
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
+ </span>
<span *ngIf="!collapseAnalysisQuick" class="icon">
- <i class="fas fa-angle-left" aria-hidden="true"></i>
- </span>
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
+ </span>
</a>
</header>
<div *ngIf="collapseAnalysisQuick">
@@ -260,47 +358,74 @@
<div class="control">
<div class="tile notification is-danger">
<div class="align-vmiddle">
- <div class="digit"><i class="fa fa-fast-forward"></i></div>
- <button (click)="analysis.startQuickAnalysis(true, null)"
- [disabled]="analysis.isLaunchingQuick()"
- class="button is-white is-rounded has-tooltip" pTooltip="Find drugs for all proteins."
- tooltipPosition="top">
- <span class="icon">
- <i class="fa fa-capsules" *ngIf="!analysis.isLaunchingQuick()"></i>
- <i class="fa fa-spin fa-spinner" *ngIf="analysis.isLaunchingQuick()"></i>
- </span>
- <span [ngClass]="{'text-normal':smallStyle}">
- Quick Start
- </span>
+ <div class="digit">
+ <i class="fa fa-fast-forward"></i>
+ </div>
+ <button
+ (click)="analysis.startQuickAnalysis(true, null)"
+ [disabled]="analysis.isLaunchingQuick()"
+ class="button is-white is-rounded has-tooltip"
+ pTooltip="Find drugs for all proteins."
+ tooltipPosition="top"
+ >
+ <span class="icon">
+ <i
+ class="fa fa-capsules"
+ *ngIf="!analysis.isLaunchingQuick()"
+ ></i>
+ <i
+ class="fa fa-spin fa-spinner"
+ *ngIf="analysis.isLaunchingQuick()"
+ ></i>
+ </span>
+ <span [ngClass]="{ 'text-normal': smallStyle }">
+ Quick Start
+ </span>
</button>
</div>
</div>
- <div class="divisor-rapid">
- — or —
- </div>
+ <div class="divisor-rapid">— or —</div>
<div class="tile notification is-info">
<div class="align-vmiddle">
- <div class="digit" *ngIf="analysis.getCount() == 0">1</div>
- <div class="digit" *ngIf="analysis.getCount() > 0"><i class="fa fa-check"></i></div>
+ <div class="digit" *ngIf="analysis.getCount() == 0">
+ 1
+ </div>
+ <div class="digit" *ngIf="analysis.getCount() > 0">
+ <i class="fa fa-check"></i>
+ </div>
<div>
- <span [ngClass]="{'text-normal':smallStyle}">Select Proteins</span>
+ <span [ngClass]="{ 'text-normal': smallStyle }"
+ >Select Proteins</span
+ >
</div>
</div>
</div>
<div class="tile notification is-info">
<div class="align-vmiddle">
<div class="digit">2</div>
- <button (click)="analysis.startQuickAnalysis(false, null)"
- [disabled]="analysis.getCount() === 0 || analysis.isLaunchingQuick()"
- class="button is-white is-rounded has-tooltip"
- pTooltip="Find drugs for the selected proteins." tooltipPosition="top">
- <span class="icon">
- <i class="fa fa-capsules" *ngIf="!analysis.isLaunchingQuick()"></i>
- <i class="fa fa-spin fa-spinner" *ngIf="analysis.isLaunchingQuick()"></i>
- </span>
- <span [ngClass]="{'text-normal':smallStyle}">
- {{ myConfig.taskName }}
- </span>
+ <button
+ (click)="analysis.startQuickAnalysis(false, null)"
+ [disabled]="
+ analysis.getCount() === 0 ||
+ analysis.isLaunchingQuick()
+ "
+ class="button is-white is-rounded has-tooltip"
+ pTooltip="Find drugs for the selected proteins."
+ tooltipPosition="top"
+ >
+ <span class="icon">
+ <i
+ class="fa fa-capsules"
+ *ngIf="!analysis.isLaunchingQuick()"
+ ></i>
+ <i
+ class="fa fa-spin fa-spinner"
+ *ngIf="analysis.isLaunchingQuick()"
+ ></i>
+ </span>
+ <span [ngClass]="{ 'text-normal': smallStyle }">
+ {{ myConfig.taskName }}
+ </span>
</button>
</div>
</div>
@@ -311,74 +436,123 @@
</div>
<div *ngIf="myConfig.showAdvAnalysis" class="card bar-large">
- <header class="card-header" [ngClass]="{'b-text-small':smallStyle}">
+ <header
+ class="card-header"
+ [ngClass]="{ 'b-text-small': smallStyle }"
+ >
<p class="card-header-title">
- <span class="icon">
- <i class="fas fa-flask" aria-hidden="true"></i>
- </span>
+ <span class="icon">
+ <i class="fas fa-flask" aria-hidden="true"></i>
+ </span>
Analysis
</p>
- <a (click)="collapseAnalysis = !collapseAnalysis" data-action="collapse"
- class="card-header-icon is-hidden-fullscreen" aria-label="more options">
- <span *ngIf="collapseAnalysis" class="icon">
- <i class="fas fa-angle-down" aria-hidden="true"></i>
- </span>
+ <a
+ (click)="collapseAnalysis = !collapseAnalysis"
+ data-action="collapse"
+ class="card-header-icon is-hidden-fullscreen"
+ aria-label="more options"
+ >
+ <span *ngIf="collapseAnalysis" class="icon">
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
+ </span>
<span *ngIf="!collapseAnalysis" class="icon">
- <i class="fas fa-angle-left" aria-hidden="true"></i>
- </span>
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
+ </span>
</a>
</header>
<div *ngIf="collapseAnalysis">
<div class="card-content">
<div class="field">
- <div class="control" pTooltip="Find drug targets for the selected proteins." tooltipPosition="top">
- <button (click)="analysisDialogTarget = 'drug-target'; showAnalysisDialog = true;"
- class="button is-primary is-fullwidth is-rounded has-tooltip"
- [disabled]="analysis.getCount() === 0" [ngClass]="{'text-small':smallStyle}">
- <span class="icon">
- <i class="fa fa-crosshairs"></i>
- </span>
- <span>
- Find Drug Targets
- </span>
+ <div
+ class="control"
+ pTooltip="Find drug targets for the selected proteins."
+ tooltipPosition="top"
+ >
+ <button
+ (click)="
+ analysisDialogTarget = 'drug-target';
+ showAnalysisDialog = true
+ "
+ class="
+ button
+ is-primary is-fullwidth is-rounded
+ has-tooltip
+ "
+ [disabled]="analysis.getCount() === 0"
+ [ngClass]="{ 'text-small': smallStyle }"
+ >
+ <span class="icon">
+ <i class="fa fa-crosshairs"></i>
+ </span>
+ <span> Find Drug Targets </span>
</button>
</div>
</div>
<div class="field">
- <div class="control" pTooltip="Find drugs for the selected proteins." tooltipPosition="top">
- <button (click)="analysisDialogTarget = 'drug'; showAnalysisDialog = true;"
- class="button is-primary is-fullwidth is-rounded has-tooltip"
- [disabled]="analysis.getCount() === 0" [ngClass]="{'text-small':smallStyle}">
- <span class="icon">
- <i class="fa fa-capsules"></i>
- </span>
+ <div
+ class="control"
+ pTooltip="Find drugs for the selected proteins."
+ tooltipPosition="top"
+ >
+ <button
+ (click)="
+ analysisDialogTarget = 'drug'; showAnalysisDialog = true
+ "
+ class="
+ button
+ is-primary is-fullwidth is-rounded
+ has-tooltip
+ "
+ [disabled]="analysis.getCount() === 0"
+ [ngClass]="{ 'text-small': smallStyle }"
+ >
+ <span class="icon">
+ <i class="fa fa-capsules"></i>
+ </span>
<span>
- {{myConfig.taskName}}
- </span>
+ {{ myConfig.taskName }}
+ </span>
</button>
</div>
</div>
<div class="field">
<div class="control">
- <a *ngIf="analysis.getCount() > 0" [href]="gProfilerLink()" target="_blank"
- class="button is-primary is-fullwidth is-rounded has-tooltip"
- pTooltip="Use enrichment analysis via g:Profiler (external)." tooltipPosition="top">
- <span class="icon">
- <i class="fa fa-external-link-alt"></i>
- </span>
- <span [ngClass]="{'text-small':smallStyle}">
- Enrichment Analysis
- </span>
+ <a
+ *ngIf="analysis.getCount() > 0"
+ [href]="gProfilerLink()"
+ target="_blank"
+ class="
+ button
+ is-primary is-fullwidth is-rounded
+ has-tooltip
+ "
+ pTooltip="Use enrichment analysis via g:Profiler (external)."
+ tooltipPosition="top"
+ >
+ <span class="icon">
+ <i class="fa fa-external-link-alt"></i>
+ </span>
+ <span [ngClass]="{ 'text-small': smallStyle }">
+ Enrichment Analysis
+ </span>
</a>
- <a *ngIf="analysis.getCount() === 0" disabled
- class="button is-primary is-fullwidth is-rounded has-tooltip"
- pTooltip="Use enrichment analysis via g:Profiler (external)." tooltipPosition="top">
- <span class="icon">
- <i class="fa fa-external-link-alt"></i>
- </span>
- <span [ngClass]="{'text-small':smallStyle}">
- Enrichment Analysis
- </span>
+ <a
+ *ngIf="analysis.getCount() === 0"
+ disabled
+ class="
+ button
+ is-primary is-fullwidth is-rounded
+ has-tooltip
+ "
+ pTooltip="Use enrichment analysis via g:Profiler (external)."
+ tooltipPosition="top"
+ >
+ <span class="icon">
+ <i class="fa fa-external-link-alt"></i>
+ </span>
+ <span [ngClass]="{ 'text-small': smallStyle }">
+ Enrichment Analysis
+ </span>
</a>
</div>
</div>
@@ -387,162 +561,188 @@
</div>
<div *ngIf="myConfig.showTasks" class="card bar-large">
- <header class="card-header" [ngClass]="{'b-text-small':smallStyle}">
+ <header
+ class="card-header"
+ [ngClass]="{ 'b-text-small': smallStyle }"
+ >
<p class="card-header-title">
- <span class="icon">
- <i class="fas fa-tasks" aria-hidden="true"></i>
- </span>
- Tasks ({{analysis.tasks.length}})
+ <span class="icon">
+ <i class="fas fa-tasks" aria-hidden="true"></i>
+ </span>
+ Tasks ({{ analysis.tasks.length }})
</p>
- <a (click)="collapseTask = !collapseTask" data-action="collapse"
- class="card-header-icon is-hidden-fullscreen"
- aria-label="more options">
- <span *ngIf="collapseTask" class="icon">
- <i class="fas fa-angle-down" aria-hidden="true"></i>
- </span>
+ <a
+ (click)="collapseTask = !collapseTask"
+ data-action="collapse"
+ class="card-header-icon is-hidden-fullscreen"
+ aria-label="more options"
+ >
+ <span *ngIf="collapseTask" class="icon">
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
+ </span>
<span *ngIf="!collapseTask" class="icon">
- <i class="fas fa-angle-left" aria-hidden="true"></i>
- </span>
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
+ </span>
</a>
</header>
<div *ngIf="collapseTask">
- <div class="card-content overflow task-list-container" *ngIf="analysis.tasks && analysis.tasks.length > 0">
+ <div
+ class="card-content overflow task-list-container"
+ *ngIf="analysis.tasks && analysis.tasks.length > 0"
+ >
<app-task-list [(token)]="selectedAnalysisToken"></app-task-list>
</div>
<footer class="card-footer">
- <a *ngIf="analysis.tasks && analysis.tasks.length > 0"
- (click)="analysis.removeAllTasks(); selectedAnalysisToken = null;"
- class="card-footer-item text-danger" pTooltip="Delete all tasks." tooltipPosition="top">
- <span class="icon">
- <i class="fa fa-trash"></i>
- </span>
- <span>
- Delete all
- </span>
+ <a
+ *ngIf="analysis.tasks && analysis.tasks.length > 0"
+ (click)="
+ analysis.removeAllTasks(); selectedAnalysisToken = null
+ "
+ class="card-footer-item text-danger"
+ pTooltip="Delete all tasks."
+ tooltipPosition="top"
+ >
+ <span class="icon">
+ <i class="fa fa-trash"></i>
+ </span>
+ <span> Delete all </span>
</a>
</footer>
</div>
</div>
<div *ngIf="myConfig.showSelection" class="card bar-large">
- <header class="card-header" [ngClass]="{'b-text-small':smallStyle}">
+ <header
+ class="card-header"
+ [ngClass]="{ 'b-text-small': smallStyle }"
+ >
<p class="card-header-title">
- <span class="icon">
- <i class="fas fa-filter" aria-hidden="true"></i>
- </span> Selection ({{analysis.getCount()}})
+ <span class="icon">
+ <i class="fas fa-filter" aria-hidden="true"></i>
+ </span>
+ Selection ({{ analysis.getCount() }})
</p>
- <a (click)="collapseSelection = !collapseSelection" data-action="collapse"
- class="card-header-icon is-hidden-fullscreen" aria-label="more options">
- <span *ngIf="collapseSelection" class="icon">
- <i class="fas fa-angle-down" aria-hidden="true"></i>
- </span>
+ <a
+ (click)="collapseSelection = !collapseSelection"
+ data-action="collapse"
+ class="card-header-icon is-hidden-fullscreen"
+ aria-label="more options"
+ >
+ <span *ngIf="collapseSelection" class="icon">
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
+ </span>
<span *ngIf="!collapseSelection" class="icon">
- <i class="fas fa-angle-left" aria-hidden="true"></i>
- </span>
-
- </a>
- </header>
- <div *ngIf="collapseSelection" class="seed-selection" [ngClass]="{'text-normal':smallStyle}">
- <!-- <div class="card-content overflow">
- <table class="table selection-table" *ngIf="analysis.getCount() > 0">
- <thead>
- <tr>
- <td>Label</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>
- <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>
- </tbody>
- </table>
- <i *ngIf="analysis.getCount() === 0">
- Double-click on a protein to select it for the analysis.
- </i>
- </div>
-
- <footer class="card-footer" *ngIf="selectedAnalysisToken">
- <a (click)="analysis.addSeeds(currentViewNodes)"
- class="card-footer-item has-text-success" tooltipPosition="top" pTooltip="Add all visible seeds.">
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
+ </span>
+ </a>
+ </header>
+ <div
+ *ngIf="collapseSelection"
+ class="seed-selection"
+ [ngClass]="{ 'text-normal': 'smallStyle' }"
+ >
+ <!-- <div class="card-content overflow">
+ <table class="table selection-table" *ngIf="analysis.getCount() > 0">
+ <thead>
+ <tr>
+ <td>Label</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>
+ <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>
+ </tbody>
+ </table>
+ <i *ngIf="analysis.getCount() === 0">
+ Double-click on a protein to select it for the analysis.
+ </i>
+ </div>
- <span class="icon">
- <i class="fa fa-plus"></i>
- </span>
- <span>
- Add seeds
- </span>
- </a>
- <a (click)="analysis.removeSeeds(currentViewNodes)"
- class="card-footer-item text-danger" tooltipPosition="top" pTooltip="Remove all seeds.">
- <span class="icon">
- <i class="fa fa-minus"></i>
- </span>
- <span>
- Remove seeds
- </span>
- </a>
- </footer>
+ <footer class="card-footer" *ngIf="selectedAnalysisToken">
+ <a (click)="analysis.addSeeds(currentViewNodes)"
+ class="card-footer-item has-text-success" tooltipPosition="top" pTooltip="Add all visible seeds.">
- <footer class="card-footer">
- <a (click)="showCustomProteinsDialog = true"
- class="card-footer-item text-primary"
- tooltipPosition="top" pTooltip="Add a custom list of proteins.">
- <span class="icon">
- <i class="fa fa-upload"></i>
- </span>
- <span>
- Custom proteins
- </span>
+ <span class="icon">
+ <i class="fa fa-plus"></i>
+ </span>
+ <span>
+ Add seeds
+ </span>
+ </a>
+ <a (click)="analysis.removeSeeds(currentViewNodes)"
+ class="card-footer-item text-danger" tooltipPosition="top" pTooltip="Remove all seeds.">
+ <span class="icon">
+ <i class="fa fa-minus"></i>
+ </span>
+ <span>
+ Remove seeds
+ </span>
+ </a>
+ </footer>
+
+ <footer class="card-footer">
+ <a (click)="showCustomProteinsDialog = true"
+ class="card-footer-item text-primary"
+ tooltipPosition="top" pTooltip="Add a custom list of proteins.">
+ <span class="icon">
+ <i class="fa fa-upload"></i>
+ </span>
+ <span>
+ Custom proteins
+ </span>
+ </a>
+ <a (click)="showThresholdDialog = true"
+ class="card-footer-item text-primary"
+ pTooltip="Add proteins expressed in the tissue." tooltipPosition="top">
+ <span class="icon">
+ <i class="fas fa-angle-double-up"></i>
+ </span>
+ <span>
+ Tissue proteins
+ </span>
</a>
- <a (click)="showThresholdDialog = true"
- class="card-footer-item text-primary"
- pTooltip="Add proteins expressed in the tissue." tooltipPosition="top">
- <span class="icon">
- <i class="fas fa-angle-double-up"></i>
- </span>
- <span>
- Tissue proteins
- </span>
- </a>
- </footer> -->
+ </footer> -->
<!-- <footer class="card-footer">
- <a (click)="analysis.invertSelection(currentViewNodes)" class="card-footer-item text-primary"
- tooltipPosition="top" pTooltip="Invert the current selection.">
- <span class="icon">
- <i class="fa fa-sync"></i>
- </span>
- <span>
- Invert
- </span>
- </a>
- <a (click)="analysis.resetSelection()" class="card-footer-item text-danger"
- tooltipPosition="top" pTooltip="Remove all entries from the selection.">
- <span class="icon">
- <i class="fa fa-broom"></i>
- </span>
- <span>
- Reset
- </span>
- </a>
- </footer> -->
+ <a (click)="analysis.invertSelection(currentViewNodes)" class="card-footer-item text-primary"
+ tooltipPosition="top" pTooltip="Invert the current selection.">
+ <span class="icon">
+ <i class="fa fa-sync"></i>
+ </span>
+ <span>
+ Invert
+ </span>
+ </a>
+ <a (click)="analysis.resetSelection()" class="card-footer-item text-danger"
+ tooltipPosition="top" pTooltip="Remove all entries from the selection.">
+ <span class="icon">
+ <i class="fa fa-broom"></i>
+ </span>
+ <span>
+ Reset
+ </span>
+ </a>
+ </footer> -->
+ <!-- </div> -->
+ <!-- </div> -->
</div>
</div>
</div>
- </div>
- </div>
- <div class="is-hidden-tablet mobile-fallback">
- Sorry, CoVex is not available for mobile phones.
- To find information about CoVex, please check the <a routerLink="/about">About</a> page or visit this page
- with another device with a larger screen.
+ <div class="is-hidden-tablet mobile-fallback">
+ Sorry, CoVex is not available for mobile phones. To find information
+ about CoVex, please check the <a routerLink="/about">About</a> page or
+ visit this page with another device with a larger screen.
+ </div>
+ </div>
</div>
</div>
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index c4584342..8785ee6f 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -12,6 +12,7 @@ import {
getDrugNodeId,
getWrapperFromNode,
legendContext,
+ NetworkEdge,
Node,
NodeAttributeMap,
NodeInteraction,
@@ -163,6 +164,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
public currentViewProteins: Node[];
public currentViewSelectedTissue: Tissue | null = null;
public currentViewNodes: Node[];
+ public currentViewEdges: NodeInteraction[];
public expressionExpanded = false;
public selectedTissue: Tissue | null = null;
@@ -421,6 +423,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
});
this.currentViewNodes = this.nodeData.nodes;
+ this.currentViewEdges = this.nodeData.edges;
this.currentViewProteins = this.proteins;
}
@@ -572,13 +575,15 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
});
}
- analysisWindowChanged($event: [any[], [Node[], Tissue]]) {
+ analysisWindowChanged($event: [any[], [Node[], Tissue], NodeInteraction[]]) {
if ($event) {
this.currentViewNodes = $event[0];
+ this.currentViewEdges = $event[2];
this.currentViewProteins = $event[1][0];
this.currentViewSelectedTissue = $event[1][1];
} else {
this.currentViewNodes = this.nodeData.nodes;
+ this.currentViewEdges = this.nodeData.edges;
this.currentViewProteins = this.proteins;
this.currentViewSelectedTissue = this.selectedTissue;
}
--
GitLab