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

diverse style and adjacent drug related fixes

parent db84c6ea
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/app/components/analysis-panel/analysis-panel.component.html
+ 13
− 16
View file @ d8bdd5e6
......@@ -114,14 +114,13 @@
>
<td>Include indirect drugs</td>
<td>
<i
*ngIf="task.info.parameters.includeIndirectDrugs"
class="fa fa-check"
></i>
<i
*ngIf="!task.info.parameters.includeIndirectDrugs"
class="fa fa-times"
></i>
<span *ngIf="task.info.parameters.includeIndirectDrugs">
<i class="fa fa-check"></i>
</span>
<span *ngIf="!task.info.parameters.includeIndirectDrugs">
<i class="fa fa-times"></i>
</span>
</td>
</tr>
<tr
......@@ -132,14 +131,12 @@
>
<td>Include non-approved drugs</td>
<td>
<i
*ngIf="task.info.parameters.includeNonApprovedDrugs"
class="fa fa-check"
></i>
<i
*ngIf="!task.info.parameters.includeNonApprovedDrugs"
class="fa fa-times"
></i>
<span *ngIf="task.info.parameters.includeNonApprovedDrugs">
<i class="fa fa-check"></i>
</span>
<span *ngIf="!task.info.parameters.includeNonApprovedDrugs">
<i class="fa fa-times"></i>
</span>
</td>
</tr>
</tbody>
......
src/app/components/network/network.component.ts
+ 26
− 20
View file @ d8bdd5e6
import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
import domtoimage from 'dom-to-image';
import { InteractionDatabase } from 'src/app/config';
import { DrugstoneConfigService } from 'src/app/services/drugstone-config/drugstone-config.service';
import { NetexControllerService } from 'src/app/services/netex-controller/netex-controller.service';
import { OmnipathControllerService } from 'src/app/services/omnipath-controller/omnipath-controller.service';
import { mapCustomEdge, mapCustomNode, mapNetexEdge, ProteinNetwork } from '../../main-network';
import {InteractionDatabase} from 'src/app/config';
import {DrugstoneConfigService} from 'src/app/services/drugstone-config/drugstone-config.service';
import {NetexControllerService} from 'src/app/services/netex-controller/netex-controller.service';
import {OmnipathControllerService} from 'src/app/services/omnipath-controller/omnipath-controller.service';
import {mapCustomEdge, mapCustomNode, mapNetexEdge, ProteinNetwork} from '../../main-network';
import {
getDrugNodeId,
getWrapperFromNode,
......@@ -17,10 +17,10 @@ import {
Wrapper,
NetworkType
} from '../../interfaces';
import { AnalysisService } from 'src/app/services/analysis/analysis.service';
import { NetworkSettings } from 'src/app/network-settings';
import { pieChartContextRenderer } from 'src/app/utils';
import { NetworkHandlerService } from 'src/app/services/network-handler/network-handler.service';
import {AnalysisService} from 'src/app/services/analysis/analysis.service';
import {NetworkSettings} from 'src/app/network-settings';
import {pieChartContextRenderer} from 'src/app/utils';
import {NetworkHandlerService} from 'src/app/services/network-handler/network-handler.service';
@Component({
......@@ -35,8 +35,8 @@ export class NetworkComponent implements OnInit {
@Input() public legendContext: LegendContext;
@ViewChild('network', { static: false }) networkEl: ElementRef;
@ViewChild('networkWithLegend', { static: false }) networkWithLegendEl: ElementRef;
@ViewChild('network', {static: false}) networkEl: ElementRef;
@ViewChild('networkWithLegend', {static: false}) networkWithLegendEl: ElementRef;
public networkInternal: any = null;
......@@ -78,7 +78,8 @@ export class NetworkComponent implements OnInit {
public gradientMap: NodeAttributeMap = {};
constructor(public networkHandler: NetworkHandlerService, public analysis: AnalysisService, public drugstoneConfig: DrugstoneConfigService, public netex: NetexControllerService, public omnipath: OmnipathControllerService) { }
constructor(public networkHandler: NetworkHandlerService, public analysis: AnalysisService, public drugstoneConfig: DrugstoneConfigService, public netex: NetexControllerService, public omnipath: OmnipathControllerService) {
}
ngOnInit(): void {
this.networkHandler.networks[this.networkType] = this;
......@@ -114,7 +115,7 @@ export class NetworkComponent implements OnInit {
if (this.adjacentDisordersProtein) {
this.netex.adjacentDisorders(this.nodeData.nodes, 'proteins', this.drugstoneConfig.config.associatedProteinDisorder).subscribe(response => {
for (const interaction of response.edges) {
const edge = { from: interaction.protein, to: interaction.disorder };
const edge = {from: interaction.protein, to: interaction.disorder};
this.adjacentProteinDisorderEdgesList.push(mapCustomEdge(edge, this.drugstoneConfig.config));
}
for (const disorder of response.disorders) {
......@@ -142,7 +143,7 @@ export class NetworkComponent implements OnInit {
if (this.adjacentDisordersDrug) {
this.netex.adjacentDisorders(this.nodeData.nodes, 'drugs', this.drugstoneConfig.config.indicationDrugDisorder).subscribe(response => {
for (const interaction of response.edges) {
const edge = { from: interaction.drug, to: interaction.disorder };
const edge = {from: interaction.drug, to: interaction.disorder};
this.adjacentDrugDisorderEdgesList.push(mapCustomEdge(edge, this.drugstoneConfig.config));
}
for (const disorder of response.disorders) {
......@@ -168,16 +169,21 @@ export class NetworkComponent implements OnInit {
public updateAdjacentDrugs(bool: boolean) {
this.adjacentDrugs = bool;
if (this.adjacentDrugs) {
// console.log(this.nodeData.nodes)
this.netex.adjacentDrugs(this.drugstoneConfig.config.interactionDrugProtein, this.nodeData.nodes).subscribe(response => {
const existingDrugIDs = this.nodeData.nodes.get().filter(n => n.drugstoneId).map(n => n.drugstoneId);
for (const interaction of response.pdis) {
const edge = { from: interaction.protein, to: interaction.drug };
const edge = {from: interaction.protein, to: interaction.drug};
this.adjacentDrugEdgesList.push(mapCustomEdge(edge, this.drugstoneConfig.config));
}
for (const drug of response.drugs) {
drug.group = 'foundDrug';
drug.id = getDrugNodeId(drug)
this.adjacentDrugList.push(mapCustomNode(drug, this.drugstoneConfig.config))
drug.id = getDrugNodeId(drug);
if (existingDrugIDs.indexOf(drug.drugstoneId) === -1) {
this.adjacentDrugList.push(mapCustomNode(drug, this.drugstoneConfig.config))
}
}
this.nodeData.nodes.add(this.adjacentDrugList);
this.nodeData.edges.add(this.adjacentDrugEdgesList);
this.updateQueryItems();
......@@ -220,7 +226,7 @@ export class NetworkComponent implements OnInit {
}
public downloadDom(dom: object) {
return domtoimage.toPng(dom, { bgcolor: '#ffffff' }).then((generatedImage) => {
return domtoimage.toPng(dom, {bgcolor: '#ffffff'}).then((generatedImage) => {
const a = document.createElement('a');
a.href = generatedImage;
a.download = `Network.png`;
......@@ -254,7 +260,7 @@ export class NetworkComponent implements OnInit {
zoomScale = 3.0;
}
this.networkInternal.moveTo({
position: { x: coords.x, y: coords.y },
position: {x: coords.x, y: coords.y},
scale: zoomScale,
animation: true,
});
......
src/app/config.ts
+ 5
− 5
View file @ d8bdd5e6
......@@ -23,11 +23,11 @@ export interface EdgeGroup {
shadow?: any;
}
export type Identifier = 'symbol'|'uniprot'|'ensg';
export type InteractionDrugProteinDB = 'DrugBank'|'Chembl'|'DGIdb' | 'NeDRex';
export type InteractionProteinProteinDB = 'STRING'|'BioGRID'|'APID' | 'NeDRex';
export type IndicationDrugDisorderDB = 'DrugBank' | 'NeDRex';
export type AssociatedProteinDisorderDB = 'NeDRex' | 'DisGeNET';
export type Identifier = 'symbol' | 'uniprot' | 'ensg' | 'entrez';
export type InteractionDrugProteinDB = 'NeDRex' | 'DrugBank' | 'Drug Central' | 'ChEMBL' | 'DGIdb';
export type InteractionProteinProteinDB = 'NeDRex' | 'BioGRID' | 'IID' | 'IntAct' | 'STRING' | 'APID';
export type IndicationDrugDisorderDB = 'NeDRex' | 'CTD' | 'Drug Central' | 'DrugBank';
export type AssociatedProteinDisorderDB = 'NeDRex' | 'DisGeNET' | 'OMIM';
// TODO: should this be external or integrated in the backend?
......
src/app/dialogs/launch-analysis/launch-analysis.component.ts
+ 0
− 1
View file @ d8bdd5e6
......@@ -114,7 +114,6 @@ export class LaunchAnalysisComponent implements OnInit, OnChanges {
config: this.config,
input_network: this.inputNetwork
};
parameters.ppi_dataset = this.config.interactionProteinProtein;
parameters.pdi_dataset = this.config.interactionDrugProtein;
parameters.target = this.target === 'drug' ? 'drug' : 'drug-target';
......
src/index.html
+ 67
− 2
View file @ d8bdd5e6
......@@ -38,6 +38,48 @@
<input id="taskID" type="text" /> <button onclick=loadTaskID(document.getElementById("taskID").value) class="button is-primary" >Load TaskID</button> <br>
<br>
<br>
<b>Datasets</b>
<div>
<i>Protein-Protein Interactions</i>
<select name="Protein-Protein Interactions" onchange="applyDataset()" id="ppi-dataset">
<option value="NeDRex">NeDRex</option>
<option value="BioGRID">BioGRID</option>
<option value="IID">IID</option>
<option value="IntAct">IntAct</option>
<option value="STRING">STRING</option>
<option value="APID">APID</option>
</select>
</div>
<div>
<i>Drug-Protein Targets</i>
<select name="Drug-Protein Targets" onchange="applyDataset()" id="drpi-dataset">
<option value="NeDRex">NeDRex</option>
<option value="DrugBank">DrugBank</option>
<option value="Drug Central">Drug Central</option>
<option value="ChEMBL">ChEMBL</option>
<option value="DGIdb">DGIdb</option>
</select>
</div>
<div>
<i>Drug-Disorder Indications</i>
<select name="Drug-Disorder Indications" onchange="applyDataset()" id="drdi-dataset">
<option value="NeDRex">NeDRex</option>
<option value="CTD">CTD</option>
<option value="Drug Central">Drug Central</option>
<option value="DrugBank">DrugBank</option>
</select>
</div>
<div>
<i>Protein-Disorder Associations</i>
<select name="Protein-Disorder Associations" onchange="applyDataset()" id="pdis-dataset">
<option value="NeDRex">NeDRex</option>
<option value="DisGeNET">CTD</option>
<option value="OMIM">Drug Central</option>
</select>
</div>
<!--<input type="checkbox" onclick=changeConfigStr('{"showSimpleAnalysis":'+this.checked+'}') checked /> Show SimpleAnalysis<br>-->
......@@ -49,8 +91,8 @@
<drugst-one id="netexp1"
pluginId="2"
config='{"interactionDrugProtein":"NeDRex", "physicsOn":true, "showLeftSidebar": true, "showSimpleAnalysis":true, "nodeGroups":{"patient":{"type":"patient","color":"black","font":{"color":"#ffffff"},"groupName":"Patient","shape":"image","image":"https://static.thenounproject.com/png/22780-200.png"},"condition":{"type":"condition","color":"black","font":{"color":"black"},"groupName":"Condition","shape":"text"},"important":{"type":"gene","color":"#ff881f","font":{"color":"#000000"},"groupName":"Important Gene","shape":"star"},"gene":{"type":"gene","color":"#4da300","font":{"color":"#ffffff"},"groupName":"Gene","shape":"circle"},"foundDrug":{"type":"drug","color":{"border":"#F12590","background":"#F12590"},"font":{"color":"#f0f0f0"},"groupName":"Drug","shape":"diamond"}},"edgeGroups":{"genotype":{"color":"black","groupName":"Relevant Gene"},"has-condition":{"color":"#000000","groupName":"Has Condition","dashes":[2,2]},"default":{"color":"#000000","groupName":"default edge"},"ggi":{"color":"#000000","groupName":"Interaction","dashes":[3,2]}},"identifier":"symbol","title":"Breast cancer example network","nodeShadow":true,"edgeShadow":false,"autofillEdges":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"}]}'>
config='{"interactionDrugProtein":"NeDRex", "physicsOn":true, "showLeftSidebar": true, "showSimpleAnalysis":true, "nodeGroups":{"patient":{"type":"patient","color":"black","font":{"color":"#ffffff"},"groupName":"Patient","shape":"image","image":"https://static.thenounproject.com/png/22780-200.png"},"condition":{"type":"condition","color":"black","font":{"color":"black"},"groupName":"Condition","shape":"text"},"important":{"type":"gene","color":"#ff881f","font":{"color":"#000000"},"groupName":"Important Gene","shape":"star"},"gene":{"type":"gene","color":"#4da300","font":{"color":"#ffffff"},"groupName":"Gene","shape":"circle"},"foundDrug":{"type":"drug","color":{"border":"#F12590","background":"#F12590"},"font":{"color":"#000000"},"groupName":"Drug","shape":"diamond"}},"edgeGroups":{"genotype":{"color":"black","groupName":"Relevant Gene"},"has-condition":{"color":"#ffffff","groupName":"Has Condition","dashes":[2,2]},"default":{"color":"#000000","groupName":"default edge"},"ggi":{"color":"#000000","groupName":"Interaction","dashes":[3,2]}},"identifier":"symbol","title":"Breast cancer example network","nodeShadow":true,"edgeShadow":false,"autofillEdges":true,"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":"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"}]}'>
</drugst-one>
</div>
......@@ -102,6 +144,29 @@
document.getElementsByTagName("network-expander")[0].addEventListener("taskEvent",(event)=>{console.log(event.detail)})
}
function applyDataset(){
let ppi = document.getElementById('ppi-dataset')
setDataset('interactionProteinProtein',ppi.options[ppi.selectedIndex].value)
let drpi = document.getElementById('drpi-dataset')
setDataset('interactionDrugProtein', drpi.options[drpi.selectedIndex].value)
let drdi = document.getElementById('drdi-dataset')
setDataset('indicationDrugDisorder', drdi.options[drdi.selectedIndex].value)
let pdis = document.getElementById('pdis-dataset')
setDataset('associatedProteinDisorder', pdis.options[pdis.selectedIndex].value)
}
function setDataset(name, dataset){
// console.log(event)
console.log("Dataset "+name+" -> "+dataset)
const netexp = document.getElementById('netexp1');
config = JSON.parse(netexp.getAttribute('config'))
console.log(config)
config[name]=dataset
changeConfigStr(JSON.stringify(config))
}
function setNetwork(nw) {
const netexp = document.getElementById(nw);
......
src/index_static.html 0 → 100644
+ 211
− 0
View file @ d8bdd5e6
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Network Expander</title>
<!-- <base href="/">-->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!-- <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>-->
<script src="https://cdn.drugst.one/latest/drugstone.js"></script>
<link rel="stylesheet" href="https://cdn.drugst.one/latest/styles.css">
<!-- <link rel="stylesheet" type="text/css" href="./stylesheets/theme.css">-->
</head>
<body>
<input type="checkbox" onclick=changeConfigStr('{"showOverview":'+this.checked+'}') checked /> Show overview<br>
<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('{"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>
<input type="checkbox" onclick=changeConfigStr('{"showNetworkMenu":'+this.checked+'}') checked /> Show Footer<br>
<input type="checkbox" onclick=changeConfigStr('{"showLegend":'+this.checked+'}') checked /> Show Legend<br>
<input type="checkbox" onclick=changeConfigStr('{"showNetworkMenuButtonScreenshot":'+this.checked+'}') checked /> Show Screenshot button<br>
<input type="checkbox" onclick=changeConfigStr('{"showNetworkMenuButtonExportGraphml":'+this.checked+'}') checked /> Show Export As Graphml Button<br>
<input id="new_color" type="text" /> <button onclick=changeColor(document.getElementById("new_color").value) >Set Color </button> <br>
<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=changeConfigStr('{"showSidebar":false}') > Hide sidebar</button><br>
<button onclick=changeConfigStr('{"showSidebar":"left"}') > Mode sidebar to left</button><br>
<button onclick=changeConfigStr('{"showSidebar":"right"}') > Move sidebar to right</button><br>
<button onclick=changeConfigStr('{"showNetworkMenu":false}') > Hide networkMenu</button><br>
<button onclick=changeConfigStr('{"showNetworkMenu":"left"}') > Mode networkMenu to left</button><br>
<button onclick=changeConfigStr('{"showNetworkMenu":"right"}') > Move networkMenu to right</button><br>
<button onclick="initTaskEventListener()">Init Task-Eventlistener</button> <br>
<input id="taskID" type="text" /> <button onclick=loadTaskID(document.getElementById("taskID").value) class="button is-primary" >Load TaskID</button> <br>
<br>
<br>
<b>Datasets</b>
<div>
<i>Protein-Protein Interactions</i>
<select name="Protein-Protein Interactions" onchange="applyDataset()" id="ppi-dataset">
<option value="NeDRex">NeDRex</option>
<option value="BioGRID">BioGRID</option>
<option value="IID">IID</option>
<option value="IntAct">IntAct</option>
<option value="STRING">STRING</option>
<option value="APID">APID</option>
</select>
</div>
<div>
<i>Drug-Protein Targets</i>
<select name="Drug-Protein Targets" onchange="applyDataset()" id="drpi-dataset">
<option value="NeDRex">NeDRex</option>
<option value="DrugBank">DrugBank</option>
<option value="Drug Central">Drug Central</option>
<option value="ChEMBL">ChEMBL</option>
<option value="DGIdb">DGIdb</option>
</select>
</div>
<div>
<i>Drug-Disorder Indications</i>
<select name="Drug-Disorder Indications" onchange="applyDataset()" id="drdi-dataset">
<option value="NeDRex">NeDRex</option>
<option value="CTD">CTD</option>
<option value="Drug Central">Drug Central</option>
<option value="DrugBank">DrugBank</option>
</select>
</div>
<div>
<i>Protein-Disorder Associations</i>
<select name="Protein-Disorder Associations" onchange="applyDataset()" id="pdis-dataset">
<option value="NeDRex">NeDRex</option>
<option value="DisGeNET">CTD</option>
<option value="OMIM">Drug Central</option>
</select>
</div>
<!--<input type="checkbox" onclick=changeConfigStr('{"showSimpleAnalysis":'+this.checked+'}') checked /> Show SimpleAnalysis<br>-->
<br>
<button onclick="setNetwork('netexp1')">Add nodes</button>
<div style="max-width: 80vw">
<drugst-one id="netexp1"
pluginId="2"
config='{"interactionDrugProtein":"NeDRex", "physicsOn":true, "showLeftSidebar": true, "showSimpleAnalysis":true, "nodeGroups":{"patient":{"type":"patient","color":"black","font":{"color":"#ffffff"},"groupName":"Patient","shape":"image","image":"https://static.thenounproject.com/png/22780-200.png"},"condition":{"type":"condition","color":"black","font":{"color":"black"},"groupName":"Condition","shape":"text"},"important":{"type":"gene","color":"#ff881f","font":{"color":"#000000"},"groupName":"Important Gene","shape":"star"},"gene":{"type":"gene","color":"#4da300","font":{"color":"#ffffff"},"groupName":"Gene","shape":"circle"},"foundDrug":{"type":"drug","color":{"border":"#F12590","background":"#F12590"},"font":{"color":"#f0f0f0"},"groupName":"Drug","shape":"diamond"}},"edgeGroups":{"genotype":{"color":"black","groupName":"Relevant Gene"},"has-condition":{"color":"#000000","groupName":"Has Condition","dashes":[2,2]},"default":{"color":"#000000","groupName":"default edge"},"ggi":{"color":"#000000","groupName":"Interaction","dashes":[3,2]}},"identifier":"symbol","title":"Breast cancer example network","nodeShadow":true,"edgeShadow":false,"autofillEdges":true,"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":[]}'>
</drugst-one>
</div>
<!--<div >-->
<!-- <network-expander id="netexp2"-->
<!-- pluginId="2"-->
<!-- config='{}' network='{"nodes":[], "edges":[]}'></network-expander>-->
<!--</div>-->
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<script>
function changeConfig() {
const netexp = document.getElementById('netexp1');
netexp.setAttribute('config', '{"showLeftSidebar": false}');
}
function changeConfigStr(config) {
console.log(config);
const netexp = document.getElementById('netexp1');
netexp.setAttribute('config', config);
}
function initTaskEventListener(){
document.getElementsByTagName("network-expander")[0].addEventListener("taskEvent",(event)=>{console.log(event.detail)})
}
function applyDataset(){
let ppi = document.getElementById('ppi-dataset')
setDataset('interactionProteinProtein',ppi.options[ppi.selectedIndex].value)
let drpi = document.getElementById('drpi-dataset')
setDataset('interactionDrugProtein', drpi.options[drpi.selectedIndex].value)
let drdi = document.getElementById('drdi-dataset')
setDataset('indicationDrugDisorder', drdi.options[drdi.selectedIndex].value)
let pdis = document.getElementById('pdis-dataset')
setDataset('associatedProteinDisorder', pdis.options[pdis.selectedIndex].value)
}
function setDataset(name, dataset){
// console.log(event)
console.log("Dataset "+name+" -> "+dataset)
const netexp = document.getElementById('netexp1');
config = JSON.parse(netexp.getAttribute('config'))
console.log(config)
config[name]=dataset
changeConfigStr(JSON.stringify(config))
}
function setNetwork(nw) {
const netexp = document.getElementById(nw);
netexp.setAttribute('network', JSON.stringify({
nodes: [
{
name: "ENSG00000171862",
id: "ENSG00000171862",
group: "genes"
}
],
edges: [
]
}));
}
function changeColor(hexacode) {
console.log(hexacode)
const elements_background_color = document.getElementsByClassName('is-primary');
for(var i = 0; i < elements_background_color.length; i++){
elements_background_color[i].setAttribute('style', `background-color: ${hexacode} !important; color: white !important; border-color: ${hexacode} !important`);
}
const elements_text = document.getElementsByClassName('text-primary');
for(var i = 0; i < elements_text.length; i++){
elements_text[i].setAttribute('style', `color: ${hexacode} !important`);
}
}
function loadTaskID(token){
console.log("Trying to load "+token)
const netexp = document.getElementById('netexp1');
netexp.setAttribute('task-id', token);
}
</script>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment