Skip to content
Snippets Groups Projects
Commit 0be60f28 authored by AndiMajore's avatar AndiMajore
Browse files

Merge branch 'master' of gitlab.lrz.de:netex/frontend

parents c3ca27cf ffaa7083
No related branches found
No related tags found
No related merge requests found
...@@ -24,6 +24,7 @@ import { ...@@ -24,6 +24,7 @@ import {
Task, Task,
Tissue, Tissue,
Wrapper, Wrapper,
NodeInteraction,
} from '../../interfaces'; } from '../../interfaces';
import domtoimage from 'dom-to-image'; import domtoimage from 'dom-to-image';
import {toast} from 'bulma-toast'; import {toast} from 'bulma-toast';
...@@ -72,7 +73,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges { ...@@ -72,7 +73,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
} }
@Output() tokenChange = new EventEmitter<string | null>(); @Output() tokenChange = new EventEmitter<string | null>();
@Output() showDetailsChange = new EventEmitter<Wrapper>(); @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 task: Task | null = null;
public myConfig: IConfig = JSON.parse(JSON.stringify(defaultConfig)); public myConfig: IConfig = JSON.parse(JSON.stringify(defaultConfig));
...@@ -299,12 +300,12 @@ export class AnalysisPanelComponent implements OnInit, OnChanges { ...@@ -299,12 +300,12 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
// else: selected is null // else: selected is null
const updatedNodes = []; const updatedNodes = [];
this.nodeData.nodes.forEach((node) => { this.nodeData.nodes.forEach((node) => {
let drugType; // let drugType;
let drugInTrial; // let drugInTrial;
if (node.wrapper.data.netexId && node.wrapper.data.netexId.startswith('d')) { // if (node.netexId && node.netexId.startsWith('d')) {
drugType = node.wrapper.data.status; // drugType = node.status;
drugInTrial = node.wrapper.data.inTrial; // drugInTrial = node.inTrial;
} // }
const isSeed = this.highlightSeeds ? this.seedMap[node.id] : false; const isSeed = this.highlightSeeds ? this.seedMap[node.id] : false;
const gradient = (this.gradientMap !== {}) && (this.gradientMap[node.id]) ? this.gradientMap[node.id] : 1.0; const gradient = (this.gradientMap !== {}) && (this.gradientMap[node.id]) ? this.gradientMap[node.id] : 1.0;
const nodeStyled = NetworkSettings.getNodeStyle( const nodeStyled = NetworkSettings.getNodeStyle(
...@@ -340,7 +341,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges { ...@@ -340,7 +341,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
public emitVisibleItems(on: boolean) { public emitVisibleItems(on: boolean) {
if (on) { 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 { } else {
this.visibleItems.emit(null); this.visibleItems.emit(null);
} }
...@@ -585,6 +586,8 @@ export class AnalysisPanelComponent implements OnInit, OnChanges { ...@@ -585,6 +586,8 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
this.adjacentDrugEdgesList = []; this.adjacentDrugEdgesList = [];
} }
this.setLegendContext() this.setLegendContext()
// emit data to update sidebar information
this.emitVisibleItems(true);
} }
public updatePhysicsEnabled(bool: boolean) { public updatePhysicsEnabled(bool: boolean) {
......
<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"> <div class="is-hidden-mobile fullheight">
<app-launch-analysis
<app-launch-analysis [(show)]="showAnalysisDialog" [(show)]="showAnalysisDialog"
[target]="analysisDialogTarget" [target]="analysisDialogTarget"
[config]="myConfig" [config]="myConfig"
[inputNetwork]="{nodes:proteins, edges:edges}"> [inputNetwork]="{ nodes: proteins, edges: edges }"
>
</app-launch-analysis> </app-launch-analysis>
<app-custom-proteins [(show)]="showCustomProteinsDialog" [visibleNodes]="currentViewNodes"> <app-custom-proteins
[(show)]="showCustomProteinsDialog"
[visibleNodes]="currentViewNodes"
>
</app-custom-proteins> </app-custom-proteins>
<app-add-expressed-proteins [(show)]="showThresholdDialog" <app-add-expressed-proteins
[(show)]="showThresholdDialog"
[selectedTissue]="currentViewSelectedTissue" [selectedTissue]="currentViewSelectedTissue"
[visibleNodes]="currentViewNodes" [visibleNodes]="currentViewNodes"
[currentViewProteins]="currentViewProteins" [currentViewProteins]="currentViewProteins"
...@@ -20,19 +29,26 @@ ...@@ -20,19 +29,26 @@
<!-- Start explorer --> <!-- Start explorer -->
<div class="covex explorer"> <div class="covex explorer">
<!-- Start left sidebar --> <!-- Start left sidebar -->
<div *ngIf="myConfig.showLeftSidebar" class="covex sidebar bar-left"> <div *ngIf="myConfig.showLeftSidebar" class="covex sidebar bar-left">
<div
<div *ngIf="myConfig.showOverview" class="card bar-large" [ngClass]="{'b-text-small':smallStyle}"> *ngIf="myConfig.showOverview"
class="card bar-large"
[ngClass]="{ 'b-text-small': smallStyle }"
>
<header class="card-header"> <header class="card-header">
<p class="card-header-title"> <p class="card-header-title">
<span class="icon"> <span class="icon">
<i class="fas fa-info" aria-hidden="true"></i> <i class="fas fa-info" aria-hidden="true"></i>
</span> Network Overview </span>
Network Overview
</p> </p>
<a (click)="collapseOverview= !collapseOverview" data-action="collapse" <a
class="card-header-icon is-hidden-fullscreen" aria-label="more options"> (click)="collapseOverview = !collapseOverview"
data-action="collapse"
class="card-header-icon is-hidden-fullscreen"
aria-label="more options"
>
<span *ngIf="collapseOverview" class="icon"> <span *ngIf="collapseOverview" class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i> <i class="fas fa-angle-down" aria-hidden="true"></i>
</span> </span>
...@@ -44,7 +60,6 @@ ...@@ -44,7 +60,6 @@
<div *ngIf="collapseOverview"> <div *ngIf="collapseOverview">
<div class="card-content"> <div class="card-content">
<nav class="level" *ngIf="proteinData"> <nav class="level" *ngIf="proteinData">
<!-- TO DO : CHANGE THIS LATER <!-- TO DO : CHANGE THIS LATER
<div class="level-item has-text-centered"> <div class="level-item has-text-centered">
<div> <div>
...@@ -56,14 +71,18 @@ ...@@ -56,14 +71,18 @@
<div class="level-item has-text-centered"> <div class="level-item has-text-centered">
<div> <div>
<p class="heading">Proteins</p> <p class="heading">Nodes</p>
<p class="title">{{ proteinData.proteins.length }}</p> <p class="title">
{{ currentViewNodes.length }}
</p>
</div> </div>
</div> </div>
<div class="level-item has-text-centered"> <div class="level-item has-text-centered">
<div> <div>
<p class="heading">Interactions</p> <p class="heading">Interactions</p>
<p class="title">{{ proteinData.edges.length }}</p> <p class="title">
{{ currentViewEdges.length }}
</p>
</div> </div>
</div> </div>
</nav> </nav>
...@@ -71,15 +90,24 @@ ...@@ -71,15 +90,24 @@
</div> </div>
</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"> <header class="card-header">
<p class="card-header-title"> <p class="card-header-title">
<span class="icon"> <span class="icon">
<i class="fas fa-search" aria-hidden="true"></i> <i class="fas fa-search" aria-hidden="true"></i>
</span> Query Protein/Gene </span>
Query Protein/Gene
</p> </p>
<a (click)="collapseQuery = !collapseQuery" data-action="collapse" <a
class="card-header-icon is-hidden-fullscreen" aria-label="more options"> (click)="collapseQuery = !collapseQuery"
data-action="collapse"
class="card-header-icon is-hidden-fullscreen"
aria-label="more options"
>
<span class="icon"> <span class="icon">
<span *ngIf="collapseQuery" class="icon"> <span *ngIf="collapseQuery" class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i> <i class="fas fa-angle-down" aria-hidden="true"></i>
...@@ -94,8 +122,10 @@ ...@@ -94,8 +122,10 @@
<div class="card-content"> <div class="card-content">
<div class="field"> <div class="field">
<div class="control"> <div class="control">
<app-query-tile-component (selectItem)="queryAction($event)" <app-query-tile-component
[queryItems]="queryItems"></app-query-tile-component> (selectItem)="queryAction($event)"
[queryItems]="queryItems"
></app-query-tile-component>
</div> </div>
</div> </div>
</div> </div>
...@@ -105,16 +135,17 @@ ...@@ -105,16 +135,17 @@
<!-- Start network block --> <!-- Start network block -->
<div class="covex network center-panel" id="main-column"> <div class="covex network center-panel" id="main-column">
<div class="analysis-view" *ngIf="selectedAnalysisToken"> <div class="analysis-view" *ngIf="selectedAnalysisToken">
<app-analysis-panel [(token)]="selectedAnalysisToken" <app-analysis-panel
[(token)]="selectedAnalysisToken"
(showDetailsChange)="selectedWrapper = $event" (showDetailsChange)="selectedWrapper = $event"
(visibleItems)="analysisWindowChanged($event)" [config]="myConfig" (visibleItems)="analysisWindowChanged($event)"
[smallStyle]="smallStyle"></app-analysis-panel> [config]="myConfig"
[smallStyle]="smallStyle"
></app-analysis-panel>
</div> </div>
<div class="card network"> <div class="card network">
<header class="card-header network-header"> <header class="card-header network-header">
<p class="card-header-title"> <p class="card-header-title">
{{ myConfig.title }} {{ myConfig.title }}
...@@ -123,40 +154,73 @@ ...@@ -123,40 +154,73 @@
<div class="card-content explorer-network-view-settings"> <div class="card-content explorer-network-view-settings">
<div class="card-image canvas-content" #networkWithLegend> <div class="card-image canvas-content" #networkWithLegend>
<div *ngIf="myConfig.showLegend"> <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>
<div class="center image1 fullheight" #network> <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>
</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"> <div class="network-footer-toolbar-inner-container">
<ng-container *ngIf="myConfig.showFooterButtonScreenshot"> <ng-container *ngIf="myConfig.showFooterButtonScreenshot">
<button (click)="toImage()" <button
class="button is-primary is-rounded has-tooltip network-footer-toolbar-element" (click)="toImage()"
pTooltip="Take a screenshot of the current network." tooltipPosition="top"> 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"> <span class="icon">
<i class="fas fa-camera" aria-hidden="true"></i> <i class="fas fa-camera" aria-hidden="true"></i>
</span> </span>
<span [ngClass]="{'text-normal':smallStyle}">Screenshot</span> <span [ngClass]="{ 'text-normal': smallStyle }"
>Screenshot</span
>
</button> </button>
</ng-container> </ng-container>
<ng-container *ngIf="myConfig.showFooterButtonExpression"> <ng-container *ngIf="myConfig.showFooterButtonExpression">
<div class="footer-buttons dropdown is-up network-footer-toolbar-element" <div
[class.is-active]="expressionExpanded"> class="
footer-buttons
dropdown
is-up
network-footer-toolbar-element
"
[class.is-active]="expressionExpanded"
>
<div class="dropdown-trigger"> <div class="dropdown-trigger">
<button (click)="expressionExpanded=!expressionExpanded" <button
class="button is-rounded is-primary" [class.is-outlined]="!selectedTissue" (click)="expressionExpanded = !expressionExpanded"
aria-haspopup="true" aria-controls="dropdown-menu" class="button is-rounded is-primary"
pTooltip="Tissue expression data is provided by the GTEx project." tooltipPosition="top" [class.is-outlined]="!selectedTissue"
[ngClass]="{'button-small':smallStyle}"> aria-haspopup="true"
<span *ngIf="!selectedTissue" [ngClass]="{'text-small':smallStyle}">Tissue</span> aria-controls="dropdown-menu"
<span *ngIf="selectedTissue">{{selectedTissue.name}}</span> 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"> <span *ngIf="expressionExpanded" class="icon is-small">
<i class="fas fa-angle-up" aria-hidden="true"></i> <i class="fas fa-angle-up" aria-hidden="true"></i>
</span> </span>
...@@ -168,15 +232,22 @@ ...@@ -168,15 +232,22 @@
<div class="dropdown-menu" id="dropdown-menu" role="menu"> <div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content tissue-dropdown"> <div class="dropdown-content tissue-dropdown">
<div class="scroll-area"> <div class="scroll-area">
<a (click)="selectTissue(null)" <a
(click)="selectTissue(null)"
[class.is-active]="!selectedTissue" [class.is-active]="!selectedTissue"
class="dropdown-item"> class="dropdown-item"
>
None None
</a> </a>
<a *ngFor="let tissue of analysis.getTissues()" <a
*ngFor="let tissue of analysis.getTissues()"
(click)="selectTissue(tissue)" (click)="selectTissue(tissue)"
[class.is-active]="selectedTissue && tissue.netexId === selectedTissue.netexId" [class.is-active]="
class="dropdown-item"> selectedTissue &&
tissue.netexId === selectedTissue.netexId
"
class="dropdown-item"
>
{{ tissue.name }} {{ tissue.name }}
</a> </a>
</div> </div>
...@@ -185,17 +256,27 @@ ...@@ -185,17 +256,27 @@
</div> </div>
</ng-container> </ng-container>
<app-toggle class="footer-buttons network-footer-toolbar-element" textOn="Drugs" textOff="Off" <app-toggle
class="footer-buttons network-footer-toolbar-element"
textOn="Drugs"
textOff="Off"
tooltipOn="Display adjacent drugs ON." tooltipOn="Display adjacent drugs ON."
tooltipOff="Display adjacent drugs OFF." tooltipOff="Display adjacent drugs OFF."
[smallStyle]="smallStyle" [smallStyle]="smallStyle"
[value]="adjacentDrugs" (valueChange)="updateAdjacentDrugs($event)"></app-toggle> [value]="adjacentDrugs"
(valueChange)="updateAdjacentDrugs($event)"
<app-toggle class="footer-buttons network-footer-toolbar-element" textOn="Animation On" textOff="Off" ></app-toggle>
<app-toggle
class="footer-buttons network-footer-toolbar-element"
textOn="Animation On"
textOff="Off"
tooltipOn="Enable the network animation." tooltipOn="Enable the network animation."
tooltipOff="Disable the network animation and freeze nodes." tooltipOff="Disable the network animation and freeze nodes."
[smallStyle]="smallStyle" [smallStyle]="smallStyle"
[value]="physicsEnabled" (valueChange)="updatePhysicsEnabled($event)"></app-toggle> [value]="physicsEnabled"
(valueChange)="updatePhysicsEnabled($event)"
></app-toggle>
</div> </div>
</footer> </footer>
</div> </div>
...@@ -206,7 +287,10 @@ ...@@ -206,7 +287,10 @@
<div *ngIf="myConfig.showRightSidebar" class="covex sidebar bar-right"> <div *ngIf="myConfig.showRightSidebar" class="covex sidebar bar-right">
<div *ngIf="myConfig.showItemSelector" class="card bar-large"> <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"> <p class="card-header-title">
<span *ngIf="!selectedWrapper" class="icon"> <span *ngIf="!selectedWrapper" class="icon">
<i class="fas fa-info" aria-hidden="true"></i> <i class="fas fa-info" aria-hidden="true"></i>
...@@ -219,8 +303,12 @@ ...@@ -219,8 +303,12 @@
<span>{{ selectedWrapper.data.type }}</span> <span>{{ selectedWrapper.data.type }}</span>
</span> </span>
</p> </p>
<a (click)="collapseDetails = !collapseDetails" data-action="collapse" <a
class="card-header-icon is-hidden-fullscreen" aria-label="more options"> (click)="collapseDetails = !collapseDetails"
data-action="collapse"
class="card-header-icon is-hidden-fullscreen"
aria-label="more options"
>
<span *ngIf="collapseDetails" class="icon"> <span *ngIf="collapseDetails" class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i> <i class="fas fa-angle-down" aria-hidden="true"></i>
</span> </span>
...@@ -231,21 +319,31 @@ ...@@ -231,21 +319,31 @@
</header> </header>
<div *ngIf="collapseDetails"> <div *ngIf="collapseDetails">
<div class="card-content"> <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>
</div> </div>
<div *ngIf="myConfig.showSimpleAnalysis" class="card bar-large"> <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"> <p class="card-header-title">
<span class="icon"> <span class="icon">
<i class="fas fa-flask" aria-hidden="true"></i> <i class="fas fa-flask" aria-hidden="true"></i>
</span> </span>
Simple Analysis Simple Analysis
</p> </p>
<a (click)="collapseAnalysisQuick = !collapseAnalysisQuick" data-action="collapse" <a
class="card-header-icon is-hidden-fullscreen" aria-label="more options"> (click)="collapseAnalysisQuick = !collapseAnalysisQuick"
data-action="collapse"
class="card-header-icon is-hidden-fullscreen"
aria-label="more options"
>
<span *ngIf="collapseAnalysisQuick" class="icon"> <span *ngIf="collapseAnalysisQuick" class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i> <i class="fas fa-angle-down" aria-hidden="true"></i>
</span> </span>
...@@ -260,14 +358,25 @@ ...@@ -260,14 +358,25 @@
<div class="control"> <div class="control">
<div class="tile notification is-danger"> <div class="tile notification is-danger">
<div class="align-vmiddle"> <div class="align-vmiddle">
<div class="digit"><i class="fa fa-fast-forward"></i></div> <div class="digit">
<button (click)="analysis.startQuickAnalysis(true, null)" <i class="fa fa-fast-forward"></i>
</div>
<button
(click)="analysis.startQuickAnalysis(true, null)"
[disabled]="analysis.isLaunchingQuick()" [disabled]="analysis.isLaunchingQuick()"
class="button is-white is-rounded has-tooltip" pTooltip="Find drugs for all proteins." class="button is-white is-rounded has-tooltip"
tooltipPosition="top"> pTooltip="Find drugs for all proteins."
tooltipPosition="top"
>
<span class="icon"> <span class="icon">
<i class="fa fa-capsules" *ngIf="!analysis.isLaunchingQuick()"></i> <i
<i class="fa fa-spin fa-spinner" *ngIf="analysis.isLaunchingQuick()"></i> class="fa fa-capsules"
*ngIf="!analysis.isLaunchingQuick()"
></i>
<i
class="fa fa-spin fa-spinner"
*ngIf="analysis.isLaunchingQuick()"
></i>
</span> </span>
<span [ngClass]="{ 'text-normal': smallStyle }"> <span [ngClass]="{ 'text-normal': smallStyle }">
Quick Start Quick Start
...@@ -275,28 +384,44 @@ ...@@ -275,28 +384,44 @@
</button> </button>
</div> </div>
</div> </div>
<div class="divisor-rapid"> <div class="divisor-rapid">&mdash; or &mdash;</div>
&mdash; or &mdash;
</div>
<div class="tile notification is-info"> <div class="tile notification is-info">
<div class="align-vmiddle"> <div class="align-vmiddle">
<div class="digit" *ngIf="analysis.getCount() == 0">1</div> <div class="digit" *ngIf="analysis.getCount() == 0">
<div class="digit" *ngIf="analysis.getCount() > 0"><i class="fa fa-check"></i></div> 1
</div>
<div class="digit" *ngIf="analysis.getCount() > 0">
<i class="fa fa-check"></i>
</div>
<div> <div>
<span [ngClass]="{'text-normal':smallStyle}">Select Proteins</span> <span [ngClass]="{ 'text-normal': smallStyle }"
>Select Proteins</span
>
</div> </div>
</div> </div>
</div> </div>
<div class="tile notification is-info"> <div class="tile notification is-info">
<div class="align-vmiddle"> <div class="align-vmiddle">
<div class="digit">2</div> <div class="digit">2</div>
<button (click)="analysis.startQuickAnalysis(false, null)" <button
[disabled]="analysis.getCount() === 0 || analysis.isLaunchingQuick()" (click)="analysis.startQuickAnalysis(false, null)"
[disabled]="
analysis.getCount() === 0 ||
analysis.isLaunchingQuick()
"
class="button is-white is-rounded has-tooltip" class="button is-white is-rounded has-tooltip"
pTooltip="Find drugs for the selected proteins." tooltipPosition="top"> pTooltip="Find drugs for the selected proteins."
tooltipPosition="top"
>
<span class="icon"> <span class="icon">
<i class="fa fa-capsules" *ngIf="!analysis.isLaunchingQuick()"></i> <i
<i class="fa fa-spin fa-spinner" *ngIf="analysis.isLaunchingQuick()"></i> class="fa fa-capsules"
*ngIf="!analysis.isLaunchingQuick()"
></i>
<i
class="fa fa-spin fa-spinner"
*ngIf="analysis.isLaunchingQuick()"
></i>
</span> </span>
<span [ngClass]="{ 'text-normal': smallStyle }"> <span [ngClass]="{ 'text-normal': smallStyle }">
{{ myConfig.taskName }} {{ myConfig.taskName }}
...@@ -311,15 +436,22 @@ ...@@ -311,15 +436,22 @@
</div> </div>
<div *ngIf="myConfig.showAdvAnalysis" class="card bar-large"> <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"> <p class="card-header-title">
<span class="icon"> <span class="icon">
<i class="fas fa-flask" aria-hidden="true"></i> <i class="fas fa-flask" aria-hidden="true"></i>
</span> </span>
Analysis Analysis
</p> </p>
<a (click)="collapseAnalysis = !collapseAnalysis" data-action="collapse" <a
class="card-header-icon is-hidden-fullscreen" aria-label="more options"> (click)="collapseAnalysis = !collapseAnalysis"
data-action="collapse"
class="card-header-icon is-hidden-fullscreen"
aria-label="more options"
>
<span *ngIf="collapseAnalysis" class="icon"> <span *ngIf="collapseAnalysis" class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i> <i class="fas fa-angle-down" aria-hidden="true"></i>
</span> </span>
...@@ -331,24 +463,49 @@ ...@@ -331,24 +463,49 @@
<div *ngIf="collapseAnalysis"> <div *ngIf="collapseAnalysis">
<div class="card-content"> <div class="card-content">
<div class="field"> <div class="field">
<div class="control" pTooltip="Find drug targets for the selected proteins." tooltipPosition="top"> <div
<button (click)="analysisDialogTarget = 'drug-target'; showAnalysisDialog = true;" class="control"
class="button is-primary is-fullwidth is-rounded has-tooltip" pTooltip="Find drug targets for the selected proteins."
[disabled]="analysis.getCount() === 0" [ngClass]="{'text-small':smallStyle}"> 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"> <span class="icon">
<i class="fa fa-crosshairs"></i> <i class="fa fa-crosshairs"></i>
</span> </span>
<span> <span> Find Drug Targets </span>
Find Drug Targets
</span>
</button> </button>
</div> </div>
</div> </div>
<div class="field"> <div class="field">
<div class="control" pTooltip="Find drugs for the selected proteins." tooltipPosition="top"> <div
<button (click)="analysisDialogTarget = 'drug'; showAnalysisDialog = true;" class="control"
class="button is-primary is-fullwidth is-rounded has-tooltip" pTooltip="Find drugs for the selected proteins."
[disabled]="analysis.getCount() === 0" [ngClass]="{'text-small':smallStyle}"> 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"> <span class="icon">
<i class="fa fa-capsules"></i> <i class="fa fa-capsules"></i>
</span> </span>
...@@ -360,9 +517,18 @@ ...@@ -360,9 +517,18 @@
</div> </div>
<div class="field"> <div class="field">
<div class="control"> <div class="control">
<a *ngIf="analysis.getCount() > 0" [href]="gProfilerLink()" target="_blank" <a
class="button is-primary is-fullwidth is-rounded has-tooltip" *ngIf="analysis.getCount() > 0"
pTooltip="Use enrichment analysis via g:Profiler (external)." tooltipPosition="top"> [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"> <span class="icon">
<i class="fa fa-external-link-alt"></i> <i class="fa fa-external-link-alt"></i>
</span> </span>
...@@ -370,9 +536,17 @@ ...@@ -370,9 +536,17 @@
Enrichment Analysis Enrichment Analysis
</span> </span>
</a> </a>
<a *ngIf="analysis.getCount() === 0" disabled <a
class="button is-primary is-fullwidth is-rounded has-tooltip" *ngIf="analysis.getCount() === 0"
pTooltip="Use enrichment analysis via g:Profiler (external)." tooltipPosition="top"> disabled
class="
button
is-primary is-fullwidth is-rounded
has-tooltip
"
pTooltip="Use enrichment analysis via g:Profiler (external)."
tooltipPosition="top"
>
<span class="icon"> <span class="icon">
<i class="fa fa-external-link-alt"></i> <i class="fa fa-external-link-alt"></i>
</span> </span>
...@@ -387,16 +561,22 @@ ...@@ -387,16 +561,22 @@
</div> </div>
<div *ngIf="myConfig.showTasks" class="card bar-large"> <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"> <p class="card-header-title">
<span class="icon"> <span class="icon">
<i class="fas fa-tasks" aria-hidden="true"></i> <i class="fas fa-tasks" aria-hidden="true"></i>
</span> </span>
Tasks ({{ analysis.tasks.length }}) Tasks ({{ analysis.tasks.length }})
</p> </p>
<a (click)="collapseTask = !collapseTask" data-action="collapse" <a
(click)="collapseTask = !collapseTask"
data-action="collapse"
class="card-header-icon is-hidden-fullscreen" class="card-header-icon is-hidden-fullscreen"
aria-label="more options"> aria-label="more options"
>
<span *ngIf="collapseTask" class="icon"> <span *ngIf="collapseTask" class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i> <i class="fas fa-angle-down" aria-hidden="true"></i>
</span> </span>
...@@ -406,43 +586,61 @@ ...@@ -406,43 +586,61 @@
</a> </a>
</header> </header>
<div *ngIf="collapseTask"> <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> <app-task-list [(token)]="selectedAnalysisToken"></app-task-list>
</div> </div>
<footer class="card-footer"> <footer class="card-footer">
<a *ngIf="analysis.tasks && analysis.tasks.length > 0" <a
(click)="analysis.removeAllTasks(); selectedAnalysisToken = null;" *ngIf="analysis.tasks && analysis.tasks.length > 0"
class="card-footer-item text-danger" pTooltip="Delete all tasks." tooltipPosition="top"> (click)="
analysis.removeAllTasks(); selectedAnalysisToken = null
"
class="card-footer-item text-danger"
pTooltip="Delete all tasks."
tooltipPosition="top"
>
<span class="icon"> <span class="icon">
<i class="fa fa-trash"></i> <i class="fa fa-trash"></i>
</span> </span>
<span> <span> Delete all </span>
Delete all
</span>
</a> </a>
</footer> </footer>
</div> </div>
</div> </div>
<div *ngIf="myConfig.showSelection" class="card bar-large"> <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"> <p class="card-header-title">
<span class="icon"> <span class="icon">
<i class="fas fa-filter" aria-hidden="true"></i> <i class="fas fa-filter" aria-hidden="true"></i>
</span> Selection ({{analysis.getCount()}}) </span>
Selection ({{ analysis.getCount() }})
</p> </p>
<a (click)="collapseSelection = !collapseSelection" data-action="collapse" <a
class="card-header-icon is-hidden-fullscreen" aria-label="more options"> (click)="collapseSelection = !collapseSelection"
data-action="collapse"
class="card-header-icon is-hidden-fullscreen"
aria-label="more options"
>
<span *ngIf="collapseSelection" class="icon"> <span *ngIf="collapseSelection" class="icon">
<i class="fas fa-angle-down" aria-hidden="true"></i> <i class="fas fa-angle-down" aria-hidden="true"></i>
</span> </span>
<span *ngIf="!collapseSelection" class="icon"> <span *ngIf="!collapseSelection" class="icon">
<i class="fas fa-angle-left" aria-hidden="true"></i> <i class="fas fa-angle-left" aria-hidden="true"></i>
</span> </span>
</a> </a>
</header> </header>
<div *ngIf="collapseSelection" class="seed-selection" [ngClass]="{'text-normal':smallStyle}"> <div
*ngIf="collapseSelection"
class="seed-selection"
[ngClass]="{ 'text-normal': 'smallStyle' }"
>
<!-- <div class="card-content overflow"> <!-- <div class="card-content overflow">
<table class="table selection-table" *ngIf="analysis.getCount() > 0"> <table class="table selection-table" *ngIf="analysis.getCount() > 0">
<thead> <thead>
...@@ -534,15 +732,17 @@ ...@@ -534,15 +732,17 @@
</a> </a>
</footer> --> </footer> -->
</div> <!-- </div> -->
</div> <!-- </div> -->
</div> </div>
</div> </div>
</div> </div>
<div class="is-hidden-tablet mobile-fallback"> <div class="is-hidden-tablet mobile-fallback">
Sorry, CoVex is not available for mobile phones. Sorry, CoVex is not available for mobile phones. To find information
To find information about CoVex, please check the <a routerLink="/about">About</a> page or visit this page about CoVex, please check the <a routerLink="/about">About</a> page or
with another device with a larger screen. visit this page with another device with a larger screen.
</div>
</div>
</div> </div>
</div> </div>
...@@ -12,6 +12,7 @@ import { ...@@ -12,6 +12,7 @@ import {
getDrugNodeId, getDrugNodeId,
getWrapperFromNode, getWrapperFromNode,
legendContext, legendContext,
NetworkEdge,
Node, Node,
NodeAttributeMap, NodeAttributeMap,
NodeInteraction, NodeInteraction,
...@@ -163,6 +164,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -163,6 +164,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
public currentViewProteins: Node[]; public currentViewProteins: Node[];
public currentViewSelectedTissue: Tissue | null = null; public currentViewSelectedTissue: Tissue | null = null;
public currentViewNodes: Node[]; public currentViewNodes: Node[];
public currentViewEdges: NodeInteraction[];
public expressionExpanded = false; public expressionExpanded = false;
public selectedTissue: Tissue | null = null; public selectedTissue: Tissue | null = null;
...@@ -421,6 +423,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -421,6 +423,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
}); });
this.currentViewNodes = this.nodeData.nodes; this.currentViewNodes = this.nodeData.nodes;
this.currentViewEdges = this.nodeData.edges;
this.currentViewProteins = this.proteins; this.currentViewProteins = this.proteins;
} }
...@@ -572,13 +575,15 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -572,13 +575,15 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
}); });
} }
analysisWindowChanged($event: [any[], [Node[], Tissue]]) { analysisWindowChanged($event: [any[], [Node[], Tissue], NodeInteraction[]]) {
if ($event) { if ($event) {
this.currentViewNodes = $event[0]; this.currentViewNodes = $event[0];
this.currentViewEdges = $event[2];
this.currentViewProteins = $event[1][0]; this.currentViewProteins = $event[1][0];
this.currentViewSelectedTissue = $event[1][1]; this.currentViewSelectedTissue = $event[1][1];
} else { } else {
this.currentViewNodes = this.nodeData.nodes; this.currentViewNodes = this.nodeData.nodes;
this.currentViewEdges = this.nodeData.edges;
this.currentViewProteins = this.proteins; this.currentViewProteins = this.proteins;
this.currentViewSelectedTissue = this.selectedTissue; this.currentViewSelectedTissue = this.selectedTissue;
} }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment