diff --git a/drugstone-test.html b/drugstone-test.html index d98985f85c5c36b966e07884a343459453b1975d..28776f37f62cc98a89b0d1de937227849458b42a 100644 --- a/drugstone-test.html +++ b/drugstone-test.html @@ -1,17 +1,20 @@ <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="src/stylesheets/theme.css"> - <script src="https://cdn.jsdelivr.net/gh/AndiMajore/drugstone-releases/uhh/drugsTone.js"></script> - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AndiMajore/drugstone-releases@0.8.1-rc3/uhh/styles.css"> + <script src="https://cdn.jsdelivr.net/gh/AndiMajore/drugstone-releases@0.8.2-rc1/remote/drugsTone.js"></script> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AndiMajore/drugstone-releases@0.8.2-rc1/remote/styles.css"> <!-- <link rel="stylesheet" type="text/css" href="./drugsTone-build/styles.css">--> </head> <body> <div style="height: 700px; width: 1300px;"> <network-expander - id='example-drugst.one' + id='drugstOne' config='{"nodeGroups":{"patient":{"type":"patient","color":"#000000","font":{"color":"#f0f0f0"},"groupName":"Patient","shape":"image","image":"https://static.thenounproject.com/png/22780-200.png","shadow":true},"condition":{"type":"condition","color":"#000000","font":{"color":"#f0f0f0"},"groupName":"Condition","shape":"text","shadow":false},"important":{"type":"gene","color":"#ff881f","font":{"color":"#f0f0f0"},"groupName":"Important Gene","shape":"star","shadow":true},"gene":{"type":"gene","color":"#4da300","font":{"color":"#f0f0f0"},"groupName":"Gene","shape":"circle","shadow":true}},"edgeGroups":{"genotype":{"color":"white","groupName":"Relevant Gene","shadow":false},"has-condition":{"color":"white","groupName":"Has Condition","dashes":[2,2],"shadow":false},"ggi":{"color":"#ffffff","groupName":"Interaction","dashes":[3,2],"shadow":false}},"identifier":"symbol","title":"Breast cancer example network","nodeShadow":false,"edgeShadow":false,"showLegend":true}' network='{"nodes":[{"id":"patient-1","group":"patient","x":592,"y":446},{"id":"patient-2","group":"patient","x":235,"y":87},{"id":"patient-3","group":"patient","x":105,"y":369},{"id":"ATM","label":"ATM","group":"gene","x":289,"y":242},{"id":"BARD1","label":"BARD1","group":"gene","x":44,"y":250},{"id":"BRCA1","label":"BRCA1","group":"gene","x":466,"y":576},{"id":"BRCA2","label":"BRCA2","group":"gene","x":507,"y":285},{"id":"BRIP1","label":"BRIP1","group":"gene","x":54,"y":474},{"id":"CHEK2","label":"CHEK2","group":"gene","x":216,"y":590},{"id":"CDH1","label":"CDH1","group":"gene","x":320,"y":-57},{"id":"NF1","label":"NF1","group":"gene","x":481,"y":111},{"id":"NBN","label":"NBN","group":"gene","x":-57,"y":314},{"id":"PALB2","label":"PALB2","group":"gene","x":450,"y":190},{"id":"PTEN","label":"PTEN","group":"important","x":305,"y":494},{"id":"RAD51C","label":"RAD51C","group":"gene","x":182,"y":-90},{"id":"RAD51D","label":"RAD51D","group":"gene","x":368,"y":73},{"id":"STK11","label":"STK11","group":"gene","x":686,"y":330},{"id":"TP53","label":"TP53","group":"important","x":333,"y":316},{"id":"subtype-1","label":"Subtype 1","group":"condition","x":556,"y":171},{"id":"subtype-2","label":"Subtype 2","group":"condition","x":-87,"y":221}],"edges":[{"from":"BRCA1","to":"BRCA2","group":"ggi"},{"from":"ATM","to":"BARD1","group":"ggi"},{"from":"BRCA1","to":"CHEK2","group":"ggi"},{"from":"RAD51C","to":"RAD51D","group":"ggi"},{"from":"STK11","to":"TP53","group":"ggi"},{"from":"TP53","to":"PALB2","group":"ggi"},{"from":"TP53","to":"RAD51D","group":"ggi"},{"from":"TP53","to":"NF1","group":"ggi"},{"from":"TP53","to":"BRCA1","group":"ggi"},{"from":"TP53","to":"BRCA2","group":"ggi"},{"from":"PTEN","to":"BRCA1","group":"ggi"},{"from":"PTEN","to":"BRCA2","group":"ggi"},{"from":"TP53","to":"PTEN","group":"ggi"},{"from":"ATM","to":"PTEN","group":"ggi"},{"from":"CDH1","to":"RAD51D","group":"ggi"},{"from":"CDH1","to":"PALB2","group":"ggi"},{"from":"NBN","to":"BRIP1","group":"ggi"},{"from":"BRIP1","to":"PTEN","group":"ggi"},{"from":"patient-1","to":"BRCA1","group":"genotype"},{"from":"patient-1","to":"TP53","group":"genotype"},{"from":"patient-1","to":"BRCA2","group":"genotype"},{"from":"patient-1","to":"PTEN","group":"genotype"},{"from":"patient-2","to":"TP53","group":"genotype"},{"from":"patient-2","to":"NF1","group":"genotype"},{"from":"patient-2","to":"BARD1","group":"genotype"},{"from":"patient-3","to":"TP53","group":"genotype"},{"from":"patient-3","to":"PTEN","group":"genotype"},{"from":"patient-3","to":"NBN","group":"genotype"},{"from":"patient-1","to":"subtype-1","group":"has-condition"},{"from":"patient-2","to":"subtype-1","group":"has-condition"},{"from":"patient-3","to":"subtype-2","group":"has-condition"}]}'> </network-expander> + <script type="text/javascript"> + document.getElementById("drugstOne").addEventListener("taskEvent",(event)=>{console.log(event.detail)}) + </script> </div> </body> </html> diff --git a/releases/release_tag.sh b/releases/release_tag.sh index 1edfae826a9a6f22ba0068ba993b5a14e1a30a2c..9145eb4f34a3729129e361c7e76e3d339f5147b9 100755 --- a/releases/release_tag.sh +++ b/releases/release_tag.sh @@ -33,11 +33,11 @@ echo "Updating Repo..." #cd ../ #cp frontend/drugsTone-build/* drugstone-releases/dev/ # -#echo "Building remote..." -#cd frontend || exit -#npm run build:netex-remote -#cd ../ -#cp frontend/drugsTone-build/* drugstone-releases/remote/ +echo "Building remote..." +cd frontend || exit +npm run build:netex-remote +cd ../ +cp frontend/drugsTone-build/* drugstone-releases/remote/ echo "Building v-server..." diff --git a/src/app/components/analysis-panel/analysis-panel.component.ts b/src/app/components/analysis-panel/analysis-panel.component.ts index e1de31959bd7f3e71a41ea5d3eed28056e008a9f..a92a38c3401040862957a29877edc271b9c06ca4 100644 --- a/src/app/components/analysis-panel/analysis-panel.component.ts +++ b/src/app/components/analysis-panel/analysis-panel.component.ts @@ -70,7 +70,6 @@ export class AnalysisPanelComponent implements OnInit, OnChanges { for (const key of Object.keys(config)) { this.myConfig[key] = config[key]; } - console.log(this.myConfig) } @Output() tokenChange = new EventEmitter<string | null>(); @Output() showDetailsChange = new EventEmitter<Wrapper>(); @@ -166,7 +165,6 @@ export class AnalysisPanelComponent implements OnInit, OnChanges { if (this.task && this.task.info.done) { this.result = await this.netex.getTaskResult(this.token); - console.log(this.result) const nodeAttributes = this.result.nodeAttributes || {}; this.seedMap = nodeAttributes.isSeed || {}; diff --git a/src/app/dialogs/launch-analysis/launch-analysis.component.ts b/src/app/dialogs/launch-analysis/launch-analysis.component.ts index 526c084f0e3c395c1bc328692f8a80fd14a97fc2..38ef3ecd0f03eec458368d5dba22a0e63ce6937e 100644 --- a/src/app/dialogs/launch-analysis/launch-analysis.component.ts +++ b/src/app/dialogs/launch-analysis/launch-analysis.component.ts @@ -28,6 +28,8 @@ export class LaunchAnalysisComponent implements OnInit, OnChanges { public config: IConfig; @Output() public showChange = new EventEmitter<boolean>(); + @Output() + public taskEvent = new EventEmitter<object>(); public algorithm: AlgorithmType | QuickAlgorithmType; @@ -173,7 +175,9 @@ export class LaunchAnalysisComponent implements OnInit, OnChanges { } parameters.hub_penalty = this.multisteinerHubPenalty; } - await this.analysis.startAnalysis(this.algorithm, this.target, parameters); + const token = await this.analysis.startAnalysis(this.algorithm, this.target, parameters); + const object = {taskId: token, algorithm: this.algorithm, target: this.target, params: parameters}; + this.taskEvent.emit(object); } } diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html index f4ead32b1fe07efe2000c2693e5fe7a1a762482d..e459358cb0b1f6b9544660c35f1bf15da205ed76 100644 --- a/src/app/pages/explorer-page/explorer-page.component.html +++ b/src/app/pages/explorer-page/explorer-page.component.html @@ -8,6 +8,7 @@ [target]="analysisDialogTarget" [config]="myConfig" [inputNetwork]="{ nodes: proteins, edges: edges }" + (taskEvent)="emitTaskEvent($event)" > </app-launch-analysis> diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts index 118b1b3a28595363c6c603d82dd2be985b10bee3..8d1a07b92e02140c8513007bc07064ce0bd1e7e1 100644 --- a/src/app/pages/explorer-page/explorer-page.component.ts +++ b/src/app/pages/explorer-page/explorer-page.component.ts @@ -4,8 +4,9 @@ import { ElementRef, HostListener, Input, - OnInit, + OnInit, Output, ViewChild, + EventEmitter, ViewEncapsulation } from '@angular/core'; import { @@ -27,7 +28,7 @@ import {defaultConfig, EdgeGroup, IConfig, InteractionDatabase, NodeGroup} from import {NetexControllerService} from 'src/app/services/netex-controller/netex-controller.service'; import {downLoadFile, removeDuplicateObjectsFromList} from '../../utils' import * as merge from 'lodash/fp/merge'; -import { AnalysisPanelComponent } from 'src/app/components/analysis-panel/analysis-panel.component'; +import {AnalysisPanelComponent} from 'src/app/components/analysis-panel/analysis-panel.component'; // import * as 'vis' from 'vis-network'; // import {DataSet} from 'vis-data'; @@ -115,6 +116,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { this.createNetwork(); } + @Output() + public taskEvent = new EventEmitter<object>(); + public get network() { return this.networkJSON; } @@ -177,7 +181,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { @ViewChild('network', {static: false}) networkEl: ElementRef; @ViewChild('networkWithLegend', {static: false}) networkWithLegendEl: ElementRef; - @ViewChild(AnalysisPanelComponent, { static: false }) + @ViewChild(AnalysisPanelComponent, {static: false}) private analysisPanel: AnalysisPanelComponent; constructor( @@ -213,7 +217,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { false, selected, 1.0 - ) + ) nodeStyled.x = pos[wrapper.id].x; nodeStyled.y = pos[wrapper.id].y; updatedNodes.push(nodeStyled); @@ -314,6 +318,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { this.smallStyle = this.windowWidth < 1250; } + private zoomToNode(id: string) { // get network object, depending on whether analysis is open or not const network = this.selectedAnalysisToken ? this.analysisPanel.network : this.networkInternal; @@ -455,18 +460,18 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { public updateAdjacentDrugs(bool: boolean) { this.adjacentDrugs = bool; if (this.adjacentDrugs) { - this.netex.adjacentDrugs(this.myConfig.interactionDrugProtein, this.nodeData.nodes).subscribe(response => { - for (const interaction of response.pdis) { - const edge = {from: interaction.protein, to: interaction.drug}; - this.adjacentDrugEdgesList.push(mapCustomEdge(edge, this.myConfig)); - } - for (const drug of response.drugs) { - drug.group = 'foundDrug'; - drug.id = getDrugNodeId(drug) - this.adjacentDrugList.push(mapCustomNode(drug, this.myConfig)) - } - this.nodeData.nodes.add(this.adjacentDrugList); - this.nodeData.edges.add(this.adjacentDrugEdgesList); + this.netex.adjacentDrugs(this.myConfig.interactionDrugProtein, this.nodeData.nodes).subscribe(response => { + for (const interaction of response.pdis) { + const edge = {from: interaction.protein, to: interaction.drug}; + this.adjacentDrugEdgesList.push(mapCustomEdge(edge, this.myConfig)); + } + for (const drug of response.drugs) { + drug.group = 'foundDrug'; + drug.id = getDrugNodeId(drug) + this.adjacentDrugList.push(mapCustomNode(drug, this.myConfig)) + } + this.nodeData.nodes.add(this.adjacentDrugList); + this.nodeData.edges.add(this.adjacentDrugEdgesList); }) this.legendContext = 'adjacentDrugs' } else { @@ -646,7 +651,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { false, this.analysis.inSelection(getWrapperFromNode(item)), 1.0 - ) + ) ) updatedNodes.push(node); } @@ -700,4 +705,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { this.currentViewSelectedTissue = this.selectedTissue; } + emitTaskEvent(eventObject: object) { + this.taskEvent.emit(eventObject); + } } diff --git a/src/app/services/analysis/analysis.service.ts b/src/app/services/analysis/analysis.service.ts index 541905eacdd6b0fcc773e5e74f6a870a46f4e8b4..86b584b1a3efaa7d5e7aeeafd542f6b562e002b9 100644 --- a/src/app/services/analysis/analysis.service.ts +++ b/src/app/services/analysis/analysis.service.ts @@ -289,7 +289,7 @@ export class AnalysisService { position: 'top-center', animate: {in: 'fadeIn', out: 'fadeOut'} }); - return; + return ''; } const resp = await this.http.post<any>(`${environment.backend}task/`, { algorithm, @@ -300,6 +300,7 @@ export class AnalysisService { this.tokens.push(resp.token); localStorage.setItem(`netex-tokens-${window.location.host}`, JSON.stringify(this.tokens)); this.startWatching(); + return resp.token; } public isLaunchingQuick(): boolean { diff --git a/src/index.html b/src/index.html index 34f3cec1b089db9f888f56b548adc5b147f9eca6..d97b1223eb02764a800b4dc018b6f597bd5a9f67 100644 --- a/src/index.html +++ b/src/index.html @@ -29,6 +29,7 @@ <button onclick=changeConfigStr('{"legendPos":"left"}') > Legend to Left </button> <br> <button onclick=changeConfigStr('{"legendPos":"right"}') > Legend to Right </button> <br> <button onclick=changeConfigStr('{"interactions":"omnipath"}') >Get Omnipath Interactions </button> <br> +<button onclick="initTaskEventListener()">Init Task-Eventlistener</button> <br> <!--<input type="checkbox" onclick=changeConfigStr('{"showSimpleAnalysis":'+this.checked+'}') checked /> Show SimpleAnalysis<br>--> @@ -95,6 +96,11 @@ netexp.setAttribute('config', config); } + function initTaskEventListener(){ + document.getElementsByTagName("network-expander")[0].addEventListener("taskEvent",(event)=>{console.log(event.detail)}) + } + + function setNetwork(nw) { const netexp = document.getElementById(nw);