From 1b329d8517e8e96726db12e28a161e0caca55a9a Mon Sep 17 00:00:00 2001
From: "Hartung, Michael" <michael.hartung@uni-hamburg.de>
Date: Thu, 21 Jul 2022 18:21:57 +0200
Subject: [PATCH] quick drug search and connect nodes
---
src/app/app.module.ts | 8 +-
.../analysis-panel.component.ts | 5 +-
.../quick-drug-target.component.html | 102 ++++++++++
.../quick-drug-target.component.scss | 0
.../quick-drug-target.component.spec.ts | 25 +++
.../quick-drug-target.component.ts | 21 ++
.../quick-drug/quick-drug.component.html | 104 ++++++++++
.../quick-drug/quick-drug.component.scss | 0
.../quick-drug/quick-drug.component.spec.ts | 25 +++
.../quick-drug/quick-drug.component.ts | 20 ++
src/app/config.ts | 2 +
.../launch-analysis.component.ts | 7 +-
src/app/interfaces.ts | 2 +-
.../explorer-page.component.html | 187 +-----------------
.../explorer-page/explorer-page.component.ts | 9 +-
src/app/services/analysis/analysis.service.ts | 70 ++++---
src/index.html | 3 +-
src/stylesheets/styles.scss | 4 +
18 files changed, 369 insertions(+), 225 deletions(-)
create mode 100644 src/app/components/quick-drug-target/quick-drug-target.component.html
create mode 100644 src/app/components/quick-drug-target/quick-drug-target.component.scss
create mode 100644 src/app/components/quick-drug-target/quick-drug-target.component.spec.ts
create mode 100644 src/app/components/quick-drug-target/quick-drug-target.component.ts
create mode 100644 src/app/components/quick-drug/quick-drug.component.html
create mode 100644 src/app/components/quick-drug/quick-drug.component.scss
create mode 100644 src/app/components/quick-drug/quick-drug.component.spec.ts
create mode 100644 src/app/components/quick-drug/quick-drug.component.ts
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 2eb67893..57b4a798 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -34,7 +34,7 @@ import {
faRulerVertical, faDna, faMicroscope, faBook, faPause, faTrash, faSpinner, faExclamationTriangle, faPlus,
faExpand, faInfo, faRocket, faAngleDown, faSearch, faFastForward, faExternalLinkAlt, faTasks, faFilter,
faMinus, faUpload, faAngleDoubleDown, faSync, faBroom, faAngleDoubleUp, faChild, faHeadSideMask, faBiohazard,
- faBullseye, faSeedling, faSyncAlt, faCompress, faKey, faInfoCircle, faWrench
+ faBullseye, faSeedling, faSyncAlt, faCompress, faKey, faInfoCircle, faWrench, faProjectDiagram
} from '@fortawesome/free-solid-svg-icons';
import { TooltipModule } from 'primeng/tooltip';
import { NetworkMenuComponent } from './components/network/network-menu/network-menu.component';
@@ -47,6 +47,8 @@ import { NetworkControlComponent } from './components/network-control/network-co
import { CenterViewComponent } from './components/network/network-menu/center-view/center-view.component';
import { CenterViewInverseComponent } from './components/network/network-menu-left/center-view-inverse/center-view-inverse.component';
import { LicenseAgreementComponent } from './components/license-agreement/license-agreement.component';
+import { QuickDrugTargetComponent } from './components/quick-drug-target/quick-drug-target.component';
+import { QuickDrugComponent } from './components/quick-drug/quick-drug.component';
@NgModule({
@@ -75,6 +77,8 @@ import { LicenseAgreementComponent } from './components/license-agreement/licens
CenterViewComponent,
CenterViewInverseComponent,
LicenseAgreementComponent,
+ QuickDrugTargetComponent,
+ QuickDrugComponent,
],
imports: [
BrowserModule,
@@ -100,7 +104,7 @@ export class AppModule {
faSpinner, faExclamationTriangle, faPlus, faExpand, faInfo, faRocket, faAngleDown, faSearch,
faFastForward, faExternalLinkAlt, faTasks, faFilter, faMinus, faUpload, faAngleDoubleDown,
faSync, faBroom, faAngleDoubleUp, faChild, faHeadSideMask, faBiohazard, faBullseye, faSeedling,
- faSyncAlt, faExpand, faCompress, faKey, faInfoCircle,faWrench);
+ faSyncAlt, faExpand, faCompress, faKey, faInfoCircle, faWrench, faProjectDiagram);
const NetworkExpander = createCustomElement(ExplorerPageComponent, { injector });
// Register the custom element with the browser.
customElements.define('drugst-one', NetworkExpander);
diff --git a/src/app/components/analysis-panel/analysis-panel.component.ts b/src/app/components/analysis-panel/analysis-panel.component.ts
index 6112dc2c..59ba4596 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.ts
+++ b/src/app/components/analysis-panel/analysis-panel.component.ts
@@ -73,7 +73,6 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
}
@Output() tokenChange = new EventEmitter<string | null>();
@Output() showDetailsChange = new EventEmitter<Wrapper>();
- @Output() setInputNetwork = new EventEmitter<any>();
@Output() visibleItems = new EventEmitter<[any[], [Node[], Tissue], NodeInteraction[]]>();
public task: Task | null = null;
public result: any = null;
@@ -188,7 +187,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
// Create
const { nodes, edges } = this.createNetwork(this.result);
- this.setInputNetwork.emit({ nodes: nodes, edges: edges });
+ this.analysis.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;
@@ -365,7 +364,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
this.analysis.switchSelection('main');
this.token = null;
this.tokenChange.emit(this.token);
- this.setInputNetwork.emit(undefined);
+ this.analysis.inputNetwork = {};
this.emitVisibleItems(false);
}
diff --git a/src/app/components/quick-drug-target/quick-drug-target.component.html b/src/app/components/quick-drug-target/quick-drug-target.component.html
new file mode 100644
index 00000000..78e18f4e
--- /dev/null
+++ b/src/app/components/quick-drug-target/quick-drug-target.component.html
@@ -0,0 +1,102 @@
+<div class="card bar-large">
+ <header
+ class="card-header"
+ [ngClass]="{ 'b-text-small': drugstoneConfig.smallStyle }"
+ >
+ <p class="card-header-title">
+ <span class="icon">
+ <i class="fas fa-project-diagram" aria-hidden="true"></i>
+ </span>
+ Connect Nodes
+ </p>
+ <a
+ (click)="collapseQuickConnect = !collapseQuickConnect"
+ data-action="collapse"
+ class="card-header-icon is-hidden-fullscreen"
+ aria-label="more options"
+ >
+ <span *ngIf="collapseQuickConnect" class="icon">
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
+ </span>
+ <span *ngIf="!collapseQuickConnect" class="icon">
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
+ </span>
+ </a>
+ </header>
+ <div *ngIf="collapseQuickConnect">
+ <div
+ class="card-content quick-find"
+ [ngClass]="{ small: drugstoneConfig.smallStyle }"
+ >
+ <div class="field">
+ <div class="control">
+ <div style="display: flex; justify-content: center">
+ <button
+ (click)="analysis.startQuickAnalysis(false, 'connect')"
+ [disabled]="analysis.isLaunchingQuick()"
+ [ngClass]="{
+ 'text-small': drugstoneConfig.smallStyle
+ }"
+ class="button is-rounded has-tooltip quick-start-btn is-fullwidth is-primary"
+ pTooltip="Connect all proteins in the network."
+ [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'"
+ tooltipPosition="top"
+ >
+ <span class="icon quick-icon">
+ <span *ngIf="!analysis.isLaunchingQuick()">
+ <i class="fa fa-capsules"></i>
+ </span>
+ <span *ngIf="analysis.isLaunchingQuick()">
+ <i class="fa fa-spin fa-spinner"></i>
+ </span>
+ </span>
+ <span
+ [ngClass]="{
+ 'text-normal': drugstoneConfig.smallStyle
+ }"
+ >
+ Connect All
+ </span>
+ </button>
+ </div>
+ <div style="display: flex; justify-content: center; width: 100%">
+ <div class="divisor-rapid">— or —</div>
+ </div>
+ <div style="display: flex; justify-content: center">
+ <button
+ (click)="analysis.startQuickAnalysis(true, 'connectSelected')"
+ [disabled]="
+ analysis.getCount() === 0 || analysis.isLaunchingQuick()
+ "
+ [ngClass]="{
+ 'text-small': drugstoneConfig.smallStyle
+ }"
+ class="button is-rounded quick-start-btn drugs-btn is-fullwidth is-primary"
+ pTooltip="Connect the selected nodes."
+ [tooltipStyleClass]="
+ 'drgstn drgstn-tooltip drgstn-tooltip-top'
+ "
+ tooltipPosition="top"
+ >
+ <span class="icon quick-icon">
+ <span *ngIf="!analysis.isLaunchingQuick()">
+ <i class="fa fa-capsules"></i>
+ </span>
+ <span *ngIf="analysis.isLaunchingQuick()">
+ <i class="fa fa-spin fa-spinner"></i>
+ </span>
+ </span>
+ <span
+ [ngClass]="{
+ 'text-normal': drugstoneConfig.smallStyle
+ }"
+ >
+ Connect Selected
+ </span>
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/src/app/components/quick-drug-target/quick-drug-target.component.scss b/src/app/components/quick-drug-target/quick-drug-target.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/components/quick-drug-target/quick-drug-target.component.spec.ts b/src/app/components/quick-drug-target/quick-drug-target.component.spec.ts
new file mode 100644
index 00000000..24116c14
--- /dev/null
+++ b/src/app/components/quick-drug-target/quick-drug-target.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuickDrugTargetComponent } from './quick-drug-target.component';
+
+describe('QuickDrugTargetComponent', () => {
+ let component: QuickDrugTargetComponent;
+ let fixture: ComponentFixture<QuickDrugTargetComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ QuickDrugTargetComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(QuickDrugTargetComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/quick-drug-target/quick-drug-target.component.ts b/src/app/components/quick-drug-target/quick-drug-target.component.ts
new file mode 100644
index 00000000..a0f65ce2
--- /dev/null
+++ b/src/app/components/quick-drug-target/quick-drug-target.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { AnalysisService } from 'src/app/services/analysis/analysis.service';
+import { DrugstoneConfigService } from 'src/app/services/drugstone-config/drugstone-config.service';
+
+@Component({
+ selector: 'app-quick-drug-target',
+ templateUrl: './quick-drug-target.component.html',
+ styleUrls: ['./quick-drug-target.component.scss']
+})
+export class QuickDrugTargetComponent implements OnInit {
+
+ constructor(
+ public drugstoneConfig: DrugstoneConfigService,
+ public analysis: AnalysisService) { }
+
+ public collapseQuickConnect = false;
+
+ ngOnInit(): void {
+ }
+
+}
diff --git a/src/app/components/quick-drug/quick-drug.component.html b/src/app/components/quick-drug/quick-drug.component.html
new file mode 100644
index 00000000..356077c0
--- /dev/null
+++ b/src/app/components/quick-drug/quick-drug.component.html
@@ -0,0 +1,104 @@
+<div class="card bar-large">
+ <header
+ class="card-header"
+ [ngClass]="{ 'b-text-small': drugstoneConfig.smallStyle }"
+ >
+ <p class="card-header-title">
+ <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>
+ <span *ngIf="!collapseAnalysisQuick" class="icon">
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
+ </span>
+ </a>
+ </header>
+ <div *ngIf="collapseAnalysisQuick">
+ <div
+ class="card-content quick-find"
+ [ngClass]="{ small: drugstoneConfig.smallStyle }"
+ >
+ <div class="field">
+ <div class="control">
+ <div style="display: flex; justify-content: center">
+ <button
+ (click)="analysis.startQuickAnalysis(true, 'super')"
+ [disabled]="analysis.isLaunchingQuick()"
+ [ngClass]="{
+ 'text-small': drugstoneConfig.smallStyle
+ }"
+ class="button is-primary is-rounded has-tooltip quick-start-btn is-fullwidth"
+ pTooltip="Find drugs for all proteins."
+ [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'"
+ tooltipPosition="top"
+ >
+ <span class="icon quick-icon">
+ <span *ngIf="!analysis.isLaunchingQuick()">
+ <i class="fa fa-capsules"></i>
+ </span>
+ <span *ngIf="analysis.isLaunchingQuick()">
+ <i class="fa fa-spin fa-spinner"></i>
+ </span>
+ </span>
+ <span
+ [ngClass]="{
+ 'text-normal': drugstoneConfig.smallStyle
+ }"
+ >
+ Quick Start
+ </span>
+ </button>
+ </div>
+ <div
+ style="display: flex; justify-content: center"
+ class="is-fullwidth"
+ >
+ <div class="divisor-rapid">— or —</div>
+ </div>
+
+ <div style="display: flex; justify-content: center">
+ <button
+ (click)="analysis.startQuickAnalysis(false, 'quick')"
+ [disabled]="
+ analysis.getCount() === 0 || analysis.isLaunchingQuick()
+ "
+ [ngClass]="{
+ 'text-small': drugstoneConfig.smallStyle
+ }"
+ class="button is-primary is-rounded quick-start-btn drugs-btn is-fullwidth"
+ pTooltip="Find drugs for the selected proteins."
+ [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'"
+ tooltipPosition="top"
+ >
+ <span class="icon quick-icon">
+ <span *ngIf="!analysis.isLaunchingQuick()">
+ <i class="fa fa-capsules"></i>
+ </span>
+ <span *ngIf="analysis.isLaunchingQuick()">
+ <i class="fa fa-spin fa-spinner"></i>
+ </span>
+ </span>
+ <span
+ [ngClass]="{
+ 'text-normal': drugstoneConfig.smallStyle
+ }"
+ >
+ Seed Analysis
+ </span>
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/src/app/components/quick-drug/quick-drug.component.scss b/src/app/components/quick-drug/quick-drug.component.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/components/quick-drug/quick-drug.component.spec.ts b/src/app/components/quick-drug/quick-drug.component.spec.ts
new file mode 100644
index 00000000..3729fce8
--- /dev/null
+++ b/src/app/components/quick-drug/quick-drug.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QuickDrugComponent } from './quick-drug.component';
+
+describe('QuickDrugComponent', () => {
+ let component: QuickDrugComponent;
+ let fixture: ComponentFixture<QuickDrugComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ QuickDrugComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(QuickDrugComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/quick-drug/quick-drug.component.ts b/src/app/components/quick-drug/quick-drug.component.ts
new file mode 100644
index 00000000..185e0e21
--- /dev/null
+++ b/src/app/components/quick-drug/quick-drug.component.ts
@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { AnalysisService } from 'src/app/services/analysis/analysis.service';
+import { DrugstoneConfigService } from 'src/app/services/drugstone-config/drugstone-config.service';
+
+@Component({
+ selector: 'app-quick-drug',
+ templateUrl: './quick-drug.component.html',
+ styleUrls: ['./quick-drug.component.scss']
+})
+export class QuickDrugComponent implements OnInit {
+
+ constructor(
+ public drugstoneConfig: DrugstoneConfigService,
+ public analysis: AnalysisService) { }
+
+ public collapseAnalysisQuick = false;
+
+ ngOnInit(): void {
+ }
+}
diff --git a/src/app/config.ts b/src/app/config.ts
index c575eae9..70810c69 100644
--- a/src/app/config.ts
+++ b/src/app/config.ts
@@ -57,6 +57,7 @@ export interface IConfig {
showNetworkMenuButtonExportGraphml: boolean;
showNetworkMenuButtonAdjacentDrugs: boolean;
showNetworkMenuButtonCenter: boolean;
+ showConnectNodes: boolean;
networkMenuButtonAdjacentDrugsLabel: string;
showNetworkMenuButtonAdjacentDisordersProteins: boolean;
networkMenuButtonAdjacentDisordersProteinsLabel: string;
@@ -111,6 +112,7 @@ export const defaultConfig: IConfig = {
showNetworkMenuButtonExportGraphml: true,
showNetworkMenuButtonAdjacentDrugs: true,
showNetworkMenuButtonCenter: true,
+ showConnectNodes: true,
networkMenuButtonAdjacentDrugsLabel: 'Drugs',
showNetworkMenuButtonAdjacentDisordersProteins: true,
networkMenuButtonAdjacentDisordersProteinsLabel: 'Disorders (protein)',
diff --git a/src/app/dialogs/launch-analysis/launch-analysis.component.ts b/src/app/dialogs/launch-analysis/launch-analysis.component.ts
index 2810fcc7..329a5485 100644
--- a/src/app/dialogs/launch-analysis/launch-analysis.component.ts
+++ b/src/app/dialogs/launch-analysis/launch-analysis.component.ts
@@ -20,8 +20,6 @@ export class LaunchAnalysisComponent implements OnInit, OnChanges {
public show = false;
@Input()
public target: 'drug' | 'drug-target';
- @Input()
- public inputNetwork: { nodes: any, edges: any };
@Output()
public showChange = new EventEmitter<boolean>();
@Output()
@@ -116,7 +114,7 @@ export class LaunchAnalysisComponent implements OnInit, OnChanges {
const parameters: any = {
seeds: seedsFiltered,
config: this.drugstoneConfig.config,
- input_network: this.inputNetwork
+ input_network: this.analysis.inputNetwork
};
parameters.ppi_dataset = this.drugstoneConfig.config.interactionProteinProtein;
@@ -124,7 +122,8 @@ export class LaunchAnalysisComponent implements OnInit, OnChanges {
parameters.target = this.target === 'drug' ? 'drug' : 'drug-target';
// pass network data to reconstruct network in analysis result to connect non-proteins to results
// drop interactions in nodes beforehand to no cause cyclic error, information is contained in edges
- this.inputNetwork.nodes.forEach(node => {
+ // @ts-ignore
+ this.analysis.inputNetwork.nodes.forEach(node => {
delete node.interactions
});
diff --git a/src/app/interfaces.ts b/src/app/interfaces.ts
index 16048966..494bc044 100644
--- a/src/app/interfaces.ts
+++ b/src/app/interfaces.ts
@@ -240,7 +240,7 @@ export type AlgorithmType =
| 'degree'
| 'proximity'
| 'betweenness';
-export type QuickAlgorithmType = 'quick' | 'super';
+export type QuickAlgorithmType = 'quick' | 'super' | 'connect' | 'connectSelected';
export interface Algorithm {
slug: AlgorithmType | QuickAlgorithmType;
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index 2bc4959d..d40d5985 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -6,7 +6,6 @@
<app-launch-analysis
[(show)]="showAnalysisDialog"
[target]="analysisDialogTarget"
- [inputNetwork]="{ nodes: proteins, edges: edges }"
(taskEvent)="emitTaskEvent($event)"
>
</app-launch-analysis>
@@ -196,189 +195,9 @@
</div>
</div>
- <div
- *ngIf="drugstoneConfig.config.showSimpleAnalysis"
- class="card bar-large"
- >
- <header
- class="card-header"
- [ngClass]="{ 'b-text-small': drugstoneConfig.smallStyle }"
- >
- <p class="card-header-title">
- <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>
- <span *ngIf="!collapseAnalysisQuick" class="icon">
- <i class="fas fa-angle-left" aria-hidden="true"></i>
- </span>
- </a>
- </header>
- <div *ngIf="collapseAnalysisQuick">
- <div
- class="card-content quick-find"
- [ngClass]="{ small: drugstoneConfig.smallStyle }"
- >
- <div class="field">
- <div class="control">
- <div
- class="tile notification quick-start warning"
- [ngClass]="{ small: drugstoneConfig.smallStyle }"
- >
- <div class="align-vmiddle">
- <div
- [ngClass]="{
- digit: !drugstoneConfig.smallStyle,
- 'digit-small': drugstoneConfig.smallStyle
- }"
- >
- <i class="fa fa-fast-forward"></i>
- </div>
- <div
- style="
- display: flex;
- justify-content: center;
- width: 100%;
- "
- >
- <button
- (click)="analysis.startQuickAnalysis(true, null)"
- [disabled]="analysis.isLaunchingQuick()"
- class="button is-white is-rounded has-tooltip quick-start-btn"
- pTooltip="Find drugs for all proteins."
- [tooltipStyleClass]="
- 'drgstn drgstn-tooltip drgstn-tooltip-top'
- "
- tooltipPosition="top"
- >
- <span class="icon quick-icon">
- <span *ngIf="!analysis.isLaunchingQuick()">
- <i class="fa fa-capsules"></i>
- </span>
- <span *ngIf="analysis.isLaunchingQuick()">
- <i class="fa fa-spin fa-spinner"></i>
- </span>
- </span>
- <span
- [ngClass]="{
- 'text-normal': drugstoneConfig.smallStyle
- }"
- >
- Quick Start
- </span>
- </button>
- </div>
- </div>
- </div>
- <div class="divisor-rapid">— or —</div>
- <div
- class="tile notification quick-start info"
- [ngClass]="{ small: drugstoneConfig.smallStyle }"
- >
- <div class="align-vmiddle">
- <div
- [ngClass]="{
- digit: !drugstoneConfig.smallStyle,
- 'digit-small': drugstoneConfig.smallStyle
- }"
- *ngIf="analysis.getCount() == 0"
- >
- 1
- </div>
- <div
- [ngClass]="{
- digit: !drugstoneConfig.smallStyle,
- 'digit-small': drugstoneConfig.smallStyle
- }"
- *ngIf="analysis.getCount() > 0"
- >
- <i class="fa fa-check"></i>
- </div>
- <div
- style="
- display: flex;
- justify-content: center;
- width: 100%;
- "
- >
- <div
- [ngClass]="{
- 'text-normal': drugstoneConfig.smallStyle
- }"
- class="quick-start-btn"
- >
- Select Proteins
- </div>
- </div>
- </div>
- </div>
- <div
- class="tile notification quick-start info"
- [ngClass]="{ small: drugstoneConfig.smallStyle }"
- >
- <div class="align-vmiddle">
- <div
- [ngClass]="{
- digit: !drugstoneConfig.smallStyle,
- 'digit-small': drugstoneConfig.smallStyle
- }"
- >
- 2
- </div>
- <div
- style="
- display: flex;
- justify-content: center;
- width: 100%;
- "
- >
- <button
- (click)="analysis.startQuickAnalysis(false, null)"
- [disabled]="
- analysis.getCount() === 0 ||
- analysis.isLaunchingQuick()
- "
- class="button is-white is-rounded quick-start-btn drugs-btn"
- pTooltip="Find drugs for the selected proteins."
- [tooltipStyleClass]="
- 'drgstn drgstn-tooltip drgstn-tooltip-top'
- "
- tooltipPosition="top"
- >
- <span class="icon quick-icon">
- <span *ngIf="!analysis.isLaunchingQuick()">
- <i class="fa fa-capsules"></i>
- </span>
- <span *ngIf="analysis.isLaunchingQuick()">
- <i class="fa fa-spin fa-spinner"></i>
- </span>
- </span>
- <span
- [ngClass]="{
- 'text-normal': drugstoneConfig.smallStyle
- }"
- >
- {{ drugstoneConfig.config.taskDrugName }}
- </span>
- </button>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
+ <app-quick-drug-target *ngIf="drugstoneConfig.config.showConnectNodes"></app-quick-drug-target>
+
+ <app-quick-drug *ngIf="drugstoneConfig.config.showSimpleAnalysis"></app-quick-drug>
<div
*ngIf="drugstoneConfig.config.showAdvAnalysis"
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index 34bcd013..79f3f692 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -93,7 +93,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
public showDetails = false;
- public collapseAnalysisQuick = true;
public collapseAnalysis = true;
public collapseDetails = true;
public collapseTask = true;
@@ -119,8 +118,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
public selectedAnalysisToken: string | null = null;
- @Input() inputNetwork = {};
-
@Input() set taskId(token: string | null) {
if (token == null || token.length === 0)
this.selectedAnalysisToken = null
@@ -391,7 +388,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
});
// remove edges without endpoints
network.edges = edges;
- this.inputNetwork = network;
+ this.analysis.inputNetwork = network;
this.proteins = network.nodes;
this.edges = network.edges;
}
@@ -546,9 +543,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
setInputNetwork(network: any) {
if (network == null)
- this.inputNetwork = { nodes: this.proteins, edges: this.edges }
+ this.analysis.inputNetwork = { nodes: this.proteins, edges: this.edges }
else
- this.inputNetwork = network;
+ this.analysis.inputNetwork = network;
}
}
diff --git a/src/app/services/analysis/analysis.service.ts b/src/app/services/analysis/analysis.service.ts
index f85cb23f..da4e0759 100644
--- a/src/app/services/analysis/analysis.service.ts
+++ b/src/app/services/analysis/analysis.service.ts
@@ -1,10 +1,12 @@
-import {Wrapper, Task, getWrapperFromNode, Node, Dataset, Tissue, Algorithm} from '../../interfaces';
+import {Wrapper, Task, getWrapperFromNode, Node, Dataset, Tissue, Algorithm, QuickAlgorithmType} from '../../interfaces';
import {Subject} from 'rxjs';
import {HttpClient} from '@angular/common/http';
import {environment} from '../../../environments/environment';
import {toast} from 'bulma-toast';
import {Injectable} from '@angular/core';
import {NetexControllerService} from '../netex-controller/netex-controller.service';
+import { DrugstoneConfigService } from '../drugstone-config/drugstone-config.service';
+import { NetworkHandlerService } from '../network-handler/network-handler.service';
export const algorithmNames = {
trustrank: 'TrustRank',
@@ -16,6 +18,8 @@ export const algorithmNames = {
betweenness: 'Betweenness Centrality',
quick: 'Simple',
super: 'Quick-Start',
+ connect: 'Connect All',
+ connectSelected: 'Connect Selected',
};
export const TRUSTRANK: Algorithm = {slug: 'trustrank', name: algorithmNames.trustrank};
@@ -35,6 +39,8 @@ export class AnalysisService {
private selection = 'main';
+ public inputNetwork = {};
+
private selectedItems = new Map<string, Wrapper>();
private selectListSubject = new Subject<{ items: Wrapper[], selected: boolean | null }>();
@@ -53,7 +59,11 @@ export class AnalysisService {
private tissues: Tissue[] = [];
- constructor(private http: HttpClient, public netex: NetexControllerService) {
+ constructor(
+ private http: HttpClient,
+ public netex: NetexControllerService,
+ public drugstoneConfig: DrugstoneConfigService,
+ public networkHandler: NetworkHandlerService) {
const tokens = localStorage.getItem(this.tokensCookieKey);
const finishedTokens = localStorage.getItem(this.tokensFinishedCookieKey);
@@ -192,7 +202,7 @@ export class AnalysisService {
});
}
- async startQuickAnalysis(isSuper: boolean, dataset: Dataset) {
+ async startQuickAnalysis(isSuper: boolean, algorithm: QuickAlgorithmType) {
if (!this.canLaunchTask()) {
toast({
message: `You can only run ${MAX_TASKS} tasks at once. Please wait for one of them to finish or delete it from the task list.`,
@@ -206,36 +216,48 @@ export class AnalysisService {
return;
}
- if (dataset == null) {
- toast({
- message: `Passed dataset is null. This feature might be still under development.`,
- duration: 5000,
- dismissible: true,
- pauseOnHover: true,
- type: 'is-danger',
- position: 'top-center',
- animate: {in: 'fadeIn', out: 'fadeOut'}
- });
- return;
- }
-
this.launchingQuick = true;
+ const seeds = [];
+ if (isSuper) {
+ // get ids for selected nodes
+ this.getSelection().forEach((item: Wrapper) => {
+ if (item.data.drugstoneId != null) {
+ seeds.push(item.data.drugstoneId);
+ }
+ })
+ } else {
+ // get all node ids
+ this.networkHandler.activeNetwork.currentViewProteins.forEach((item: Node) => {
+ if (item.drugstoneId != null) {
+ seeds.push(item.drugstoneId);
+ }
+ })
+ }
+ const target = ['connect', 'connectSelected'].includes(algorithm) ? 'drug-target' : 'drug'
+ console.log(target)
+ const parameters: any = {
+ seeds: seeds,
+ config: this.drugstoneConfig.config,
+ input_network: this.inputNetwork,
+ ppi_dataset: this.drugstoneConfig.config.interactionProteinProtein,
+ pdi_dataset: this.drugstoneConfig.config.interactionDrugProtein,
+ target: target,
+ num_trees: 5,
+ tolerance: 10,
+ };
+
const resp = await this.http.post<any>(`${environment.backend}task/`, {
- algorithm: isSuper ? 'super' : 'quick',
- target: 'drug',
- parameters: {
- strain_or_drugs: dataset.id,
- bait_datasets: dataset.data,
- seeds: isSuper ? [] : this.getSelection().map((i) => i.id),
- },
+ algorithm: algorithm,
+ target: target,
+ parameters: parameters,
}).toPromise();
this.tokens.push(resp.token);
localStorage.setItem(this.tokensCookieKey, JSON.stringify(this.tokens));
this.startWatching();
toast({
- message: 'Quick analysis started. This may take a while.' +
+ message: 'Quick analysis started.' +
' Once the computation finished you can view the results in the task list to the right.',
duration: 10000,
dismissible: true,
diff --git a/src/index.html b/src/index.html
index 119e3699..8c682413 100644
--- a/src/index.html
+++ b/src/index.html
@@ -14,7 +14,8 @@
<input type="checkbox" onclick=changeConfigStr('{"showQuery":'+this.checked+'}') /> Show query<br>
<!-- <input type="checkbox" onclick=changeConfigStr('{"showSidebar":'+this.checked+'}') checked /> Show sidebar<br> -->
<input type="checkbox" onclick=changeConfigStr('{"showItemSelector":'+this.checked+'}') checked /> Show ItemSelector<br>
-<input type="checkbox" onclick=changeConfigStr('{"showSimpleAnalysis":'+this.checked+'}') /> Show SimpleAnalysis<br>
+<input type="checkbox" onclick=changeConfigStr('{"showConnectNodes":'+this.checked+'}') /> Show Connect Nodes<br>
+<input type="checkbox" onclick=changeConfigStr('{"showSimpleAnalysis":'+this.checked+'}') /> Show Simple Analysis<br>
<input type="checkbox" onclick=changeConfigStr('{"showAdvAnalysis":'+this.checked+'}') checked /> Show Advanced Analysis<br>
<input type="checkbox" onclick=changeConfigStr('{"showTasks":'+this.checked+'}') checked /> Show Tasks<br>
<input type="checkbox" onclick=changeConfigStr('{"showSelection":'+this.checked+'}') checked /> Show Selection<br>
diff --git a/src/stylesheets/styles.scss b/src/stylesheets/styles.scss
index 4a225608..09f37cf5 100644
--- a/src/stylesheets/styles.scss
+++ b/src/stylesheets/styles.scss
@@ -210,4 +210,8 @@
}
}
}
+
+ button.is-secondary, button.is-secondary:hover {
+ background-color: var(--drgstn-secondary) !important;
+ }
}
--
GitLab