diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2eb67893e0029b37a7baf377284d16613cf608b9..57b4a7989b31d122be25961d140fa2ceb2e632f2 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 6112dc2cf5567f4f3f4113adee749496ca7b2b53..59ba4596aa84ecd3f5af101b00bfce6894bf2e2e 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 0000000000000000000000000000000000000000..78e18f4e83819ccd30b39dbe8b9cb9028e048ca0 --- /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 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 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 0000000000000000000000000000000000000000..24116c14a14630c9bb5d1c923e0a1aa48309e40d --- /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 0000000000000000000000000000000000000000..a0f65ce2acf43d1078398ffc1fd015d9d372b2e4 --- /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 0000000000000000000000000000000000000000..356077c03b3665c0712a10d09a0f258e3ffcec2b --- /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 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 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 0000000000000000000000000000000000000000..3729fce8a332f3d585b73c22192ccbd882d7a351 --- /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 0000000000000000000000000000000000000000..185e0e2184e1f60a2c046b7b065e7a2caaa1b06e --- /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 c575eae9d6f553923feb79dc33bf681d8255ddb8..70810c6959ff2da7df96c59c8e8044099ae4643f 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 2810fcc700d6588e160dd9822d5472c90c9808ca..329a54854ab632c9dc143b18fd91f4724672c3fa 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 160489662b791f090b4fea0d94981e124d3e6f21..494bc044e80470f52c79926e37f0b98269af3e89 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 2bc4959dff1a1ec56f80ee84da98dcb863486b17..d40d5985d3ca8c75f08702963fc3150fb6849612 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 34bcd013e7d5bf455d6644b505ad3d12dbecfea3..79f3f692127b00ff2ffecde0e8bc372b013c24d9 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 f85cb23f1f32eface3b6807ecd97d86cb86280e5..da4e07598cfa6c1da4c171300130e6b5fe09e45f 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 119e369954f7916ccc35017232df0e40af3cb840..8c682413579d3467855e7916f748fa6cb8800346 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 4a22560835561397061ea481811866004dbe1844..09f37cf54c17b2d173c2ee097104fe51d71dd63e 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; + } }