<!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="http://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
<!-- <link rel="stylesheet" type="text/css" href="./stylesheets/default-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('{"showItemSelector":'+this.checked+'}') checked/> Show ItemSelector<br>
<input type="checkbox" onclick=changeConfigStr('{"showConnectGenes":'+this.checked+'}')/> Show Connect Genes<br>
<input type="checkbox" onclick=changeConfigStr('{"showSimpleAnalysis":'+this.checked+'}') 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>
<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 sidebr 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>
<input type="checkbox" onclick=changeLicenced(this.checked)> Use licenced datasets<br>
<div>
<i>Protein-Protein Interactions</i>
<select name="Protein-Protein Interactions" onchange="applyDataset()" id="ppi-dataset">
<option value="NeDRex">NeDRex</option>
<option value="STRING">STRING</option>
<option value="biogrid">BioGRID</option>
<option value="iid">IID</option>
<option value="IntAct">IntAct</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">DisGeNET</option>
<option value="omim">OMIM</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; width: 1276px; height: 500px">
<!-- <drugst-one id="tatata"-->
<!-- groups='{"edgeGroups":{"default":{"color":"#000000","groupName":"default edge"}}, "nodeGroups" : { "selectedNode": { "borderWidth": 3,"borderWidthSelected": 4,"color": { "border": "#C80BFD","highlight": {"border": "#C80BFD"}},"font": { "color": "#0000000","size": 14 }},"Protein":{"shape":"circle","groupName":"Protein","type":"Protein","color":"#C99AFFFF","font":{"color":"#FFFFFF"}}}}'-->
<!-- config='{"identifier":"symbol","title":"ROBUST output network", "taskDrugName": "Drug Search", "showLegendNodes": true, "showLegendEdges": true, "showSidebar": "left", "showOverview": true, "legendPos": "left", "legendClass": "legend", "showQuery": true, "showItemSelector": true,"showSimpleAnalysis": false,"showAdvAnalysis": true,"showSelection": true,"showTasks": true,"showNetworkMenu": "right","showLegend": true,"showNetworkMenuButtonExpression": true, "showNetworkMenuButtonScreenshot": true,"showNetworkMenuButtonExportGraphml": true,"showNetworkMenuButtonAdjacentDrugs": true,"showNetworkMenuButtonCenter": true,"showConnectGenes": false,"networkMenuButtonAdjacentDrugsLabel": "Drugs","showNetworkMenuButtonAdjacentDisordersProteins": true,"networkMenuButtonAdjacentDisordersProteinsLabel": "Disorders (protein)","showNetworkMenuButtonAdjacentDisordersDrugs": true,"networkMenuButtonAdjacentDisordersDrugsLabel": "Disorders (drug)","showNetworkMenuButtonAnimation": true,"networkMenuButtonAnimationLabel": "Animation", "autofillEdges": true, "physicsOn": false,"useNedrexLicenced": true,"selfReferences": false, "interactionDrugProtein": "NeDRex", "indicationDrugDisorder": "NeDRex","nodeShadow": true,"edgeShadow": false, "algorithms": {"drug": ["trustrank", "closeness", "degree", "proximity"], "drug-target": ["trustrank", "multisteiner", "keypathwayminer", "degree", "closeness", "betweenness"]}, "associatedProteinDisorder": "NeDRex", "expandNetworkMenu": true}'-->
<!-- network='{"nodes": [{"id":"PSEN1","group":"Protein","label":"PSEN1"},{"id":"PSEN2","group":"Protein","label":"PSEN2"},{"id":"APP","group":"Protein","label":"APP"},{"id":"APOE","group":"Protein","label":"APOE"},{"id":"RNF32","group":"Protein","label":"RNF32"},{"id":"STX5","group":"Protein","label":"STX5"},{"id":"TRAF3IP1","group":"Protein","label":"TRAF3IP1"},{"id":"PHB1","group":"Protein","label":"PHB1"},{"id":"MAPT","group":"Protein","label":"MAPT"},{"id":"ESR1","group":"Protein","label":"ESR1"},{"id":"IRF3","group":"Protein","label":"IRF3"},{"id":"DYNC1H1","group":"Protein","label":"DYNC1H1"},{"id":"CUL3","group":"Protein","label":"CUL3"},{"id":"HMGB1","group":"Protein","label":"HMGB1"},{"id":"DNAJC7","group":"Protein","label":"DNAJC7"},{"id":"NEFM","group":"Protein","label":"NEFM"},{"id":"DISC1","group":"Protein","label":"DISC1"},{"id":"PPP5C","group":"Protein","label":"PPP5C"},{"id":"CTNNB1","group":"Protein","label":"CTNNB1"},{"id":"KRAS","group":"Protein","label":"KRAS"}]}'-->
<!-- ></drugst-one>-->
<drugst-one id="netexp1"
pluginId="2"
groups='{"nodeGroups":{}}'
config='{"identifier":"entrez","title":"Breast cancer example network","nodeShadow":true,"edgeShadow":false,"autofillEdges":true,"interactionProteinProtein":"STRING","licensedDatasets":true,"selfReferences":false}'
network='{"nodes":[{"id":"7040","label":"7040"}]}'>
</drugst-one>
<!--ENSEMBL test-->
<!-- <drugst-one id="netexp1"-->
<!-- pluginId="2"-->
<!-- groups='{"nodeGroups":{"node":{"type":"Gene","color":"#0000FF","font":{"color":"#ffffff"},"groupName":"Node","shape":"ellipse"}, "gene":{"type":"Gene","color":"#CD5C5C","font":{"color":"#000000"},"groupName":"Gene","shape":"ellipse"}}}'-->
<!-- config='{"showSimpleAnalysis": true, "selfReferences": false, "licensedDatasets": false,"physicsOn":false,"identifier":"ensg","title":"Breast cancer example network","nodeShadow":true,"edgeShadow":false,"autofillEdges":true,"showLegend":true}'-->
<!-- network='{"nodes":[{"id":"ENSG00000049768", "group": "gene", "label":"ENSG00000049768"},{"id":"ENSG00000185379","group":"gene","label":"ENSG00000185379"},{"id":"ENSG00000108384","group":"gene","label":"ENSG00000108384"},{"id":"ENSG00000138376","group":"gene","label":"ENSG00000138376"},{"id":"ENSG00000284792","group":"gene","label":"ENSG00000284792"},{"id":"ENSG00000171862","group":"gene","label":"ENSG00000171862"},{"id":"ENSG00000141510","group":"gene","label":"ENSG00000141510"}],"edges":[]}'-->
<!-- >-->
<!--</drugst-one>-->
</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() {
let color1 = '#c80bfd'
document.getElementsByTagName("drugst-one")[0].addEventListener("taskEvent", (event) => {
console.log(event.detail)
})
}
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);
}
function changeLicenced(licenced) {
setAttribute('licensedDatasets', licenced)
}
function applyDataset() {
let ppi = document.getElementById('ppi-dataset')
setAttribute('interactionProteinProtein', ppi.options[ppi.selectedIndex].value)
let drpi = document.getElementById('drpi-dataset')
setAttribute('interactionDrugProtein', drpi.options[drpi.selectedIndex].value)
let drdi = document.getElementById('drdi-dataset')
setAttribute('indicationDrugDisorder', drdi.options[drdi.selectedIndex].value)
let pdis = document.getElementById('pdis-dataset')
setAttribute('associatedProteinDisorder', pdis.options[pdis.selectedIndex].value)
}
function setAttribute(name, value) {
// console.log(event)
console.log("Attribute " + name + " -> " + value)
const netexp = document.getElementById('netexp1');
config = JSON.parse(netexp.getAttribute('config'))
console.log(config)
config[name] = value
changeConfigStr(JSON.stringify(config))
}
</script>
</body>
</html>
<style>
:root {
/*--drgstn-panel: #000;*/
/*--drgstn-text-primary: #fff;*/
}
</style>