diff --git a/src/app/components/network/network.component.ts b/src/app/components/network/network.component.ts
index d13a9c9dee8525aa2bff2624f042a923a20a1983..fbd90923f4e5993b8886765ed63f1cb89c9de9ec 100644
--- a/src/app/components/network/network.component.ts
+++ b/src/app/components/network/network.component.ts
@@ -399,6 +399,7 @@ export class NetworkComponent implements OnInit {
const pos = this.networkInternal.getPositions([node.id]);
node.x = pos[node.id].x;
node.y = pos[node.id].y;
+
Object.assign(
node,
NetworkSettings.getNodeStyle(
@@ -417,7 +418,7 @@ export class NetworkComponent implements OnInit {
} else {
this.selectedTissue = tissue;
- const minExp = 0.3;
+ const minExp = 0;
// filter out non-proteins, e.g. drugs
const proteinNodes = [];
this.nodeData.nodes.forEach(element => {
@@ -500,7 +501,7 @@ export class NetworkComponent implements OnInit {
}
public getGradient(nodeId: string) {
- return (Object.keys(this.gradientMap).length) && (this.gradientMap[nodeId]) ? this.gradientMap[nodeId] : 1.0;
+ return (Object.keys(this.gradientMap).length && this.gradientMap[nodeId] != null) ? this.gradientMap[nodeId] : 1.0;
}
/**
@@ -540,7 +541,7 @@ export class NetworkComponent implements OnInit {
this.getGradient(node.id),
this.nodeRenderer
)
- )
+ ),
updatedNodes.push(node);
}
this.nodeData.nodes.update(updatedNodes);
diff --git a/src/app/interfaces.ts b/src/app/interfaces.ts
index 68bda05b5470ad6df6c77983ced9b0647274464a..b41fba84db41e17257ce84b7a765237fc342c7e4 100644
--- a/src/app/interfaces.ts
+++ b/src/app/interfaces.ts
@@ -19,6 +19,7 @@ export interface Node {
interactions?: Node[];
x?: number;
y?: number;
+ state?: {hover: boolean, selected: boolean};
borderWidth: number;
borderWidthSelected: number;
opacity?: number;
diff --git a/src/app/network-settings.ts b/src/app/network-settings.ts
index a645b6d7adf64017104be5fbc23f37db1aa46059..aa224ae08169fe85631ae8383787f83c08bb6aca 100644
--- a/src/app/network-settings.ts
+++ b/src/app/network-settings.ts
@@ -102,8 +102,7 @@ export class NetworkSettings {
// certain attributes like shape can remain undefined
// use lodash merge to not lose deep attributes, e.g. "font.size"
// @ts-ignore
- if (node._group)
- {
+ if (node._group) {
// @ts-ignore
node.group = node._group;
}
@@ -169,7 +168,6 @@ export class NetworkSettings {
node.opacity = undefined;
delete node.ctxRenderer;
}
-
return node;
}
}
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index 9fb7a0fcb76d82e0849c42d1c053e114b0648a5a..ca3619540f767d919ff42d6a805e861476a33204 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -152,12 +152,13 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
const pos = this.networkHandler.activeNetwork.networkInternal.getPositions([wrapper.id]);
node.x = pos[wrapper.id].x;
node.y = pos[wrapper.id].y;
+
const nodeStyled = NetworkSettings.getNodeStyle(
node,
this.drugstoneConfig.currentConfig(),
false,
selected,
- this.networkHandler.activeNetwork.getGradient(wrapper.id),
+ this.networkHandler.activeNetwork.getGradient(node.id),
this.networkHandler.activeNetwork.nodeRenderer
);
nodeStyled.x = pos[wrapper.id].x;
diff --git a/src/app/utils.ts b/src/app/utils.ts
index c7116154bcf8743150aec24d3d084718d26c9ad4..45f95c90d82c2c754e3668ec141a7296e55ecc2b 100644
--- a/src/app/utils.ts
+++ b/src/app/utils.ts
@@ -1,7 +1,7 @@
// From https://stackoverflow.com/a/27709336/3850564
-import {ɵisListLikeIterable} from "@angular/core";
-import {Node} from "./interfaces";
+import {ɵisListLikeIterable} from '@angular/core';
+import {Node} from './interfaces';
export function getGradientColor(startColor: string, endColor: string, percent: number) {
// strip the leading # if it's there
@@ -52,7 +52,7 @@ export function getGradientColor(startColor: string, endColor: string, percent:
export function removeUnderscoreFromKeys(obj) {
const result = {};
Object.keys(obj).forEach(x => {
- const y = x.replace("_", "");
+ const y = x.replace('_', '');
result[y] = obj[x];
});
return result;
@@ -64,7 +64,7 @@ function trim(str) {
}
export function rgbaToHex(rgba) {
- const inParts = rgba.substring(rgba.indexOf("(")).split(","),
+ const inParts = rgba.substring(rgba.indexOf('(')).split(','),
r = parseInt(trim(inParts[0].substring(1)), 10),
g = parseInt(trim(inParts[1]), 10),
b = parseInt(trim(inParts[2]), 10),
@@ -77,11 +77,11 @@ export function rgbaToHex(rgba) {
];
// Pad single-digit output values
- outParts.forEach(function (part, i) {
+ outParts.forEach(function(part, i) {
if (part.length === 1) {
outParts[i] = '0' + part;
}
- })
+ });
return ('#' + outParts.join(''));
}
@@ -89,20 +89,20 @@ export function rgbaToHex(rgba) {
// https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb
function componentToHex(c) {
const hex = c.toString(16);
- return hex.length == 1 ? "0" + hex : hex;
+ return hex.length == 1 ? '0' + hex : hex;
}
export function rgbToHex(rgb) {
- const inParts = rgb.substring(rgb.indexOf("(")).split(","),
+ const inParts = rgb.substring(rgb.indexOf('(')).split(','),
r = parseInt(trim(inParts[0].substring(1)), 10),
g = parseInt(trim(inParts[1]), 10),
b = parseInt(trim(inParts[2]), 10);
- return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
+ return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
// https://stackoverflow.com/questions/1573053/javascript-function-to-convert-color-names-to-hex-codes/47355187#47355187
export function standardizeColor(str) {
- var ctx = document.createElement("canvas").getContext("2d");
+ var ctx = document.createElement('canvas').getContext('2d');
ctx.fillStyle = str;
return ctx.fillStyle.toString();
}
@@ -127,14 +127,25 @@ export function removeDuplicateObjectsFromList(nodes: Node[], attribute: string)
*/
export function downLoadFile(data: any, type: string, fmt: string) {
let blob = new Blob([data], {type: type});
- var a = document.createElement("a");
+ var a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = `drugstone_network_${new Date().getTime()}.${fmt}`;
a.click();
}
+export function RGBAtoRGBwithoutA(rgbaString) {
+ const rgbaStringSplit = rgbaString.slice(5, -1).split(',');
+ const RGBA = {
+ red: rgbaStringSplit[0],
+ green: rgbaStringSplit[1],
+ blue: rgbaStringSplit[2],
+ alpha: rgbaStringSplit[3]
+ };
+ return `rgb(${RGBA.red},${RGBA.green},${RGBA.blue})`;
+}
+
export function RGBAtoRGB(rgbaString) {
- const rgbaStringSplit = rgbaString.slice(5, -1).split(",");
+ const rgbaStringSplit = rgbaString.slice(5, -1).split(',');
const RGBA = {
red: rgbaStringSplit[0],
green: rgbaStringSplit[1],
@@ -152,19 +163,24 @@ export function RGBAtoRGB(rgbaString) {
}
export function pieChartContextRenderer({ctx, x, y, state: {selected, hover}, style, label}) {
- ctx.drawPieLabel = function (style, x, y, label) {
- ctx.font = "normal 12px sans-serif";
- ctx.textAlign = "center";
- ctx.textBaseline = "middle";
- ctx.fillStyle = "black";
+ ctx.drawPieLabel = function(style, x, y, label) {
+ ctx.font = 'normal 12px sans-serif';
+ ctx.textAlign = 'center';
+ ctx.textBaseline = 'middle';
+ ctx.fillStyle = 'black';
ctx.fillText(label, x, y + style.size + 12);
- }
+ };
- ctx.drawPie = function (style, x, y) {
+ ctx.drawPie = function(style, x, y, state: { selected, hover }) {
+ const selection = RGBAtoRGBwithoutA(style.borderColor) !== RGBAtoRGBwithoutA(style.color);
const total = 1;
// draw shadow
+ const selectedColor = style.borderColor;
+ if (selected) {
+ style.borderColor = style.color;
+ }
if (style.shadow) {
- ctx.save()
+ ctx.save();
ctx.shadowColor = style.shadowColor;
ctx.shadowOffsetX = style.shadowX;
ctx.shadowOffsetY = style.shadowY;
@@ -172,21 +188,21 @@ export function pieChartContextRenderer({ctx, x, y, state: {selected, hover}, st
}
// draw white background circle
ctx.beginPath();
- ctx.fillStyle = "white"
+ ctx.fillStyle = 'white';
// or fill like background of graph panel
// ctx.fillStyle= window.getComputedStyle(document.documentElement).getPropertyValue('--drgstn-panel');
- ctx.arc(x, y, style.size, 0, 2 * Math.PI,false);
+ ctx.arc(x, y, style.size - 1, 0, 2 * Math.PI, false);
ctx.fill();
ctx.stroke();
// prepare pi-chart
ctx.fillStyle = style.color ? style.color : 'rgba(255, 0, 0, 1)';
// set alpha value to 1
- ctx.fillStyle = RGBAtoRGB(ctx.fillStyle)
+ ctx.fillStyle = RGBAtoRGB(ctx.fillStyle);
ctx.beginPath();
ctx.moveTo(x, y);
const len = style.opacity / total * 2 * Math.PI;
- ctx.arc(x, y, style.size, 0, 0 + len, false);
+ ctx.arc(x, y, style.size - 1, 0, len, false);
ctx.lineTo(x, y);
ctx.fill();
if (style.shadow) {
@@ -194,18 +210,39 @@ export function pieChartContextRenderer({ctx, x, y, state: {selected, hover}, st
ctx.restore();
}
ctx.strokeStyle = style.borderColor ? style.borderColor : 'black';
+ if (selection) {
+ ctx.strokeStyle = selectedColor ? selectedColor : 'balck';
+ }
ctx.lineWidth = selected ? 3 : 2;
if (style.opacity !== total) {
// avoid the inner line when circle is complete
ctx.stroke();
}
+ ctx.strokeStyle = RGBAtoRGBwithoutA(ctx.strokeStyle);
// draw the surrounding border circle
ctx.beginPath();
- ctx.arc(x, y, style.size, 0, 2 * Math.PI);
- ctx.strokeStyle = style.borderColor ? style.borderColor : 'black';
+ ctx.arc(x, y, style.size - (selected ? 0 : 1), 0, 2 * Math.PI);
+ // ctx.strokeStyle = style.borderColor ? style.borderColor : 'black';
+ // // set alpha value to 1
+ // ctx.strokeStyle = RGBAtoRGBwithoutA(ctx.strokeStyle);
ctx.stroke();
- }
+ if (selection) {
+ ctx.strokeStyle = selectedColor ? selectedColor : 'black';
+ } else {
+ ctx.strokeStyle = style.color ? style.color : 'black';
+ }
+ if (selected || selection) {
+ ctx.beginPath();
+ ctx.strokeStyle = style.color ? style.color : 'black';
+ ctx.strokeStyle = RGBAtoRGBwithoutA(ctx.strokeStyle);
+ ctx.arc(x, y, style.size - 2, 0, 2 * Math.PI);
+ // ctx.strokeStyle = style.borderColor ? style.borderColor : 'black';
+ // // set alpha value to 1
+ // ctx.strokeStyle = RGBAtoRGBwithoutA(ctx.strokeStyle);
+ ctx.stroke();
+ }
+ };
return {
// bellow arrows
diff --git a/src/index.html b/src/index.html
index d1ac366f27a1efaca38ad9ac29bc9f192347923e..fa27760bfef0e93bec516b19df4d54a04d96c980 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,43 +6,60 @@
<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">-->
+ <!-- <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 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="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>
+<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>
+<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">
@@ -75,7 +92,7 @@
</select>
</div>
<div>
- <i>Protein-Disorder Associations</i>
+ <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>
@@ -86,8 +103,6 @@
<!--<input type="checkbox" onclick=changeConfigStr('{"showSimpleAnalysis":'+this.checked+'}') checked /> Show SimpleAnalysis<br>-->
-
-
<br>
@@ -96,27 +111,27 @@
<div style="max-width: 80vw; width: 1276px; height: 500px">
<drugst-one id="tatata"
- groups= '{ "nodeGroups" : { "selectedNode": { "borderWidth": 3,"borderWidthSelected": 4,"color": { "border": "#ffffff","highlight": {"border": "#ffffff"}},"font": { "color": "#F8981","size": 14 }},"Protein":{"shape":"circle","groupName":"Protein","type":"Protein","color":"#172b4d","font":{"color":"#ffffff"}}}}'
- config='{ "activateNetworkMenuButtonAdjacentDrugs": true,"activateNetworkMenuButtonAdjacentDisorders": true, "activateNetworkMenuButtonAdjacentDisordersDrugs": true, "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": true, "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"}]}'
+ groups='{ "nodeGroups" : { "selectedNode": { "borderWidth": 3,"borderWidthSelected": 4,"color": { "border": "#ff1818","highlight": {"border": "#ff1818"}},"font": { "color": "#F8981","size": 14 }},"Protein":{"shape":"circle","groupName":"Protein","type":"Protein","color":"#172b4d","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": true, "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":{"patient":{"type":"patient","color":"#000000","font":{"color":"#000000"},"groupName":"Patient","shape":"image","image":"https://static.thenounproject.com/png/22780-200.png"},"condition":{"type":"condition","color":"#000000","font":{"color":"#000000"},"groupName":"Condition","shape":"text"},"important":{"type":"gene","color":"#ff881f","font":{"color":"#000000"},"groupName":"Important Gene","shape":"star"},"gene":{"type":"gene","color":"#ff084e","font":{"color":"#000000"},"groupName":"Gene","shape":"diamond"},"foundDrug":{"type":"drug","color":"#F12590","font":{"color":"#000000"},"groupName":"Drug","shape":"diamond"}},"edgeGroups":{"genotype":{"color":"#000000","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]}}}'-->
-<!-- config='{"identifier":"entrez","title":"Breast cancer example network","nodeShadow":true,"edgeShadow":false,"autofillEdges":true,"interactionProteinProtein":"STRING","licensedDatasets":true,"selfReferences":false,"nodeGroups":{"patient":{"type":"patient","color":"#000000","font":{"color":"#000000"},"groupName":"Patient","shape":"image","image":"https://static.thenounproject.com/png/22780-200.png"},"condition":{"type":"condition","color":"#000000","font":{"color":"#000000"},"groupName":"Condition","shape":"text"},"important":{"type":"gene","color":"#ff881f","font":{"color":"#000000"},"groupName":"Important Gene","shape":"star"},"gene":{"type":"gene","color":"#ff084e","font":{"color":"#000000"},"groupName":"Gene","shape":"diamond"},"foundDrug":{"type":"drug","color":"#F12590","font":{"color":"#000000"},"groupName":"Drug","shape":"diamond"}}}'-->
-<!-- network='{"nodes":[{"id":"7040","group":"gene","label":"7040"},{"id":"7132","group":"gene","label":"7132"},{"id":"51164","group":"gene","label":"51164"},{"id":"6338","group":"gene","label":"6338"},{"id":"6337","group":"gene","label":"6337"},{"id":"6340","group":"gene","label":"6340"},{"id":"2212","group":"gene","label":"2212"},{"id":"2022","group":"gene","label":"2022"},{"id":"6804","group":"gene","label":"6804"},{"id":"1080","group":"gene","label":"1080"},{"id":"22802","group":"gene","label":"22802"}],"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"}]}'>-->
-<!--</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>-->
+ <!-- <drugst-one id="netexp1"-->
+ <!-- pluginId="2"-->
+ <!-- groups='{"nodeGroups":{"patient":{"type":"patient","color":"#000000","font":{"color":"#000000"},"groupName":"Patient","shape":"image","image":"https://static.thenounproject.com/png/22780-200.png"},"condition":{"type":"condition","color":"#000000","font":{"color":"#000000"},"groupName":"Condition","shape":"text"},"important":{"type":"gene","color":"#ff881f","font":{"color":"#000000"},"groupName":"Important Gene","shape":"star"},"gene":{"type":"gene","color":"#ff084e","font":{"color":"#000000"},"groupName":"Gene","shape":"diamond"},"foundDrug":{"type":"drug","color":"#F12590","font":{"color":"#000000"},"groupName":"Drug","shape":"diamond"}},"edgeGroups":{"genotype":{"color":"#000000","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]}}}'-->
+ <!-- config='{"identifier":"entrez","title":"Breast cancer example network","nodeShadow":true,"edgeShadow":false,"autofillEdges":true,"interactionProteinProtein":"STRING","licensedDatasets":true,"selfReferences":false,"nodeGroups":{"patient":{"type":"patient","color":"#000000","font":{"color":"#000000"},"groupName":"Patient","shape":"image","image":"https://static.thenounproject.com/png/22780-200.png"},"condition":{"type":"condition","color":"#000000","font":{"color":"#000000"},"groupName":"Condition","shape":"text"},"important":{"type":"gene","color":"#ff881f","font":{"color":"#000000"},"groupName":"Important Gene","shape":"star"},"gene":{"type":"gene","color":"#ff084e","font":{"color":"#000000"},"groupName":"Gene","shape":"diamond"},"foundDrug":{"type":"drug","color":"#F12590","font":{"color":"#000000"},"groupName":"Drug","shape":"diamond"}}}'-->
+ <!-- network='{"nodes":[{"id":"7040","group":"gene","label":"7040"},{"id":"7132","group":"gene","label":"7132"},{"id":"51164","group":"gene","label":"51164"},{"id":"6338","group":"gene","label":"6338"},{"id":"6337","group":"gene","label":"6337"},{"id":"6340","group":"gene","label":"6340"},{"id":"2212","group":"gene","label":"2212"},{"id":"2022","group":"gene","label":"2022"},{"id":"6804","group":"gene","label":"6804"},{"id":"1080","group":"gene","label":"1080"},{"id":"22802","group":"gene","label":"22802"}],"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"}]}'>-->
+ <!--</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>
@@ -155,8 +170,11 @@
netexp.setAttribute('config', config);
}
- function initTaskEventListener(){
- document.getElementsByTagName("drugst-one")[0].addEventListener("taskEvent",(event)=>{console.log(event.detail)})
+ function initTaskEventListener() {
+ let color1 = '#ff1818'
+ document.getElementsByTagName("drugst-one")[0].addEventListener("taskEvent", (event) => {
+ console.log(event.detail)
+ })
}
@@ -171,37 +189,35 @@
group: "genes"
}
],
- edges: [
-
- ]
+ 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++){
+ 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++){
+ 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)
+ 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 changeLicenced(licenced) {
+ setAttribute('licensedDatasets', licenced)
}
- function applyDataset(){
+ function applyDataset() {
let ppi = document.getElementById('ppi-dataset')
- setAttribute('interactionProteinProtein',ppi.options[ppi.selectedIndex].value)
+ 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')
@@ -210,13 +226,13 @@
setAttribute('associatedProteinDisorder', pdis.options[pdis.selectedIndex].value)
}
- function setAttribute(name, value){
+ function setAttribute(name, value) {
// console.log(event)
- console.log("Attribute "+name+" -> "+value)
+ console.log("Attribute " + name + " -> " + value)
const netexp = document.getElementById('netexp1');
config = JSON.parse(netexp.getAttribute('config'))
console.log(config)
- config[name]=value
+ config[name] = value
changeConfigStr(JSON.stringify(config))
}