diff --git a/package-lock.json b/package-lock.json
index 40f2ca6efcc0f1bc2033518580ad63ef583cab50..57da5f5563030802e4626909346324d2fcd704b4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "netex",
- "version": "1.0.9-rc7",
+ "version": "1.0.9-rc10",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "netex",
- "version": "1.0.9-rc7",
+ "version": "1.0.9-rc10",
"dependencies": {
"@angular/animations": "^12.2.16",
"@angular/cdk": "^12.2.13",
diff --git a/package.json b/package.json
index 150caaad7362bcb0db5a4c5039a94fb6a2986a8c..78e6210d95828c57c36c26c34b3a62946e9ba856 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "netex",
- "version": "1.0.9-rc7",
+ "version": "1.0.9-rc10",
"scripts": {
"ng": "ng",
"start:dev": "ng serve --configuration=dev",
diff --git a/releases/latest b/releases/latest
index 53bd3ae762987ea7cbf7862712be96726eee1b94..ba6d00304f490da932f469ab92d0def095ef7083 100644
--- a/releases/latest
+++ b/releases/latest
@@ -1 +1 @@
-1.0.9-rc7
+1.0.9-rc10
diff --git a/src/app/components/analysis-panel/analysis-panel.component.ts b/src/app/components/analysis-panel/analysis-panel.component.ts
index 16c484db5423f95696bb2f3cd7bccbcedaa120ea..be1a6a759bc1070a05241028a6b3e19d5cc1f877 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.ts
+++ b/src/app/components/analysis-panel/analysis-panel.component.ts
@@ -204,6 +204,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
if (!this.drugstoneConfig.config.physicsOn) {
this.networkHandler.activeNetwork.updatePhysicsEnabled(false);
}
+ this.networkHandler.updateAdjacentNodes();
});
this.tableDrugs = nodes.filter(e => e.drugstoneId && e.drugstoneType === 'drug');
this.tableDrugs.forEach((r) => {
diff --git a/src/app/components/info-tile/info-tile.component.html b/src/app/components/info-tile/info-tile.component.html
index 9b1cf0a4a7245f1b80c62bc01cceaca10bea57be..4daa8ad7b045475bea0fde658dfcd830212ca6a1 100644
--- a/src/app/components/info-tile/info-tile.component.html
+++ b/src/app/components/info-tile/info-tile.component.html
@@ -72,11 +72,11 @@
*ngIf="getExpressionScore() != null"
[ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
>
- <b><span>Expression:</span></b>
+ <b><span>Median expression in {{"'"+networkHandler.activeNetwork.selectedTissue.name+"'"}} (TPM):</span></b>
<span class="is-capitalized"> {{ getExpressionScore() | number }}</span>
<span
class="icon has-text-info"
- pTooltip="Tissue expression data is provided by the GTEx project. Unit is transcript per million."
+ pTooltip="Median expression data is provided by the GTEx project. Unit is TPM (transcript per million)."
[tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
tooltipPosition="left"
>
diff --git a/src/app/components/network/network.component.ts b/src/app/components/network/network.component.ts
index 7366ff22224d58d0aea88a69ac50767970675520..5487e3792dee68f51e054bb0c001d50e0fcbbc28 100644
--- a/src/app/components/network/network.component.ts
+++ b/src/app/components/network/network.component.ts
@@ -21,7 +21,7 @@ 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 {LegendService} from 'src/app/services/legend-service/legend-service.service';
-import { LoadingScreenService } from 'src/app/services/loading-screen/loading-screen.service';
+import {LoadingScreenService} from 'src/app/services/loading-screen/loading-screen.service';
@Component({
@@ -81,7 +81,7 @@ export class NetworkComponent implements OnInit {
public nodeRenderer = null;
- public loading = false
+ public loading = false;
constructor(
public configService: DrugstoneConfigService,
@@ -91,8 +91,8 @@ export class NetworkComponent implements OnInit {
public drugstoneConfig: DrugstoneConfigService,
public netex: NetexControllerService,
public omnipath: OmnipathControllerService,
- public loadingScreen: LoadingScreenService)
- {}
+ public loadingScreen: LoadingScreenService) {
+ }
ngOnInit(): void {
this.networkHandler.networks[this.networkType] = this;
@@ -116,15 +116,16 @@ export class NetworkComponent implements OnInit {
updateQueryItems() {
this.queryItems = [];
- if (this.currentViewNodes)
+ if (this.currentViewNodes) {
this.currentViewNodes.forEach((protein) => {
this.queryItems.push(getWrapperFromNode(protein));
});
+ }
}
public saveAddNodes(nodeList: Node[]) {
const existing = this.nodeData.nodes.get().map(n => n.id);
- const toAdd = nodeList.filter(n => existing.indexOf(n.id) === -1)
+ const toAdd = nodeList.filter(n => existing.indexOf(n.id) === -1);
this.nodeData.nodes.add(toAdd);
}
@@ -132,31 +133,33 @@ export class NetworkComponent implements OnInit {
this.loadingScreen.stateUpdate(true);
this.adjacentDisordersProtein = bool;
if (this.adjacentDisordersProtein) {
- this.legendService.add_to_context('adjacentDisorders')
+ this.legendService.add_to_context('adjacentDisorders');
this.netex.adjacentDisorders(this.nodeData.nodes.get(), 'proteins', this.drugstoneConfig.config.associatedProteinDisorder, this.drugstoneConfig.config.licensedDatasets).subscribe(response => {
- const proteinMap = this.getProteinMap()
- const addedEdge = {}
+ const proteinMap = this.getProteinMap();
+ const addedEdge = {};
for (const interaction of response.edges) {
- const edge = mapCustomEdge({from: interaction.protein, to: interaction.disorder}, this.drugstoneConfig.config)
+ const edge = mapCustomEdge({from: interaction.protein, to: interaction.disorder}, this.drugstoneConfig.config);
if (proteinMap[edge.from]) {
proteinMap[edge.from].forEach(from => {
- if (addedEdge[from] && addedEdge[from].indexOf(edge.to) !== -1)
- return
- const e = JSON.parse(JSON.stringify(edge))
- e.from = from
- e.to = edge.to
+ if (addedEdge[from] && addedEdge[from].indexOf(edge.to) !== -1) {
+ return;
+ }
+ const e = JSON.parse(JSON.stringify(edge));
+ e.from = from;
+ e.to = edge.to;
this.adjacentProteinDisorderEdgesList.push(e);
- if (!addedEdge[from])
- addedEdge[from] = [edge.to]
- else
- addedEdge[from].push(edge.to)
- })
+ if (!addedEdge[from]) {
+ addedEdge[from] = [edge.to];
+ } else {
+ addedEdge[from].push(edge.to);
+ }
+ });
}
}
for (const disorder of response.disorders) {
disorder.group = 'defaultDisorder';
disorder.id = disorder.drugstoneId;
- this.adjacentProteinDisorderList.push(mapCustomNode(disorder, this.drugstoneConfig.currentConfig()))
+ this.adjacentProteinDisorderList.push(mapCustomNode(disorder, this.drugstoneConfig.currentConfig()));
}
this.saveAddNodes(this.adjacentProteinDisorderList);
this.nodeData.edges.add(this.adjacentProteinDisorderEdgesList);
@@ -197,8 +200,9 @@ export class NetworkComponent implements OnInit {
this.loadingScreen.stateUpdate(false);
});
} else {
- if (!this.adjacentDisordersProtein)
+ if (!this.adjacentDisordersProtein) {
this.legendService.remove_from_context('adjacentDisorders');
+ }
this.saveRemoveDisorders(this.adjacentDrugDisorderList);
this.nodeData.edges.remove(this.adjacentDrugDisorderEdgesList);
this.adjacentDrugDisorderList = [];
@@ -209,68 +213,73 @@ export class NetworkComponent implements OnInit {
}
public getProteinMap() {
- const proteinMap = {}
+ const proteinMap = {};
this.nodeData.nodes.get().forEach(n => {
if (n.drugstoneType === 'protein') {
n.drugstoneId.forEach(id => {
if (typeof id === 'string') {
- if (proteinMap[id])
- proteinMap[id].push(n.id)
- else
+ if (proteinMap[id]) {
+ proteinMap[id].push(n.id);
+ } else {
proteinMap[id] = [n.id];
+ }
} else {
n.id.forEach(single_id => {
- if (proteinMap[single_id])
- proteinMap[single_id].push(n.id)
- else
+ if (proteinMap[single_id]) {
+ proteinMap[single_id].push(n.id);
+ } else {
proteinMap[single_id] = [n.id];
- })
+ }
+ });
}
});
}
});
- return proteinMap
+ return proteinMap;
}
public updateAdjacentDrugs(bool: boolean) {
this.loadingScreen.stateUpdate(true);
this.adjacentDrugs = bool;
if (this.adjacentDrugs) {
- this.legendService.add_to_context("adjacentDrugs")
- const addedEdge = {}
- const proteinMap = this.getProteinMap()
+ this.legendService.add_to_context('adjacentDrugs');
+ const addedEdge = {};
+ const proteinMap = this.getProteinMap();
this.netex.adjacentDrugs(this.drugstoneConfig.config.interactionDrugProtein, this.drugstoneConfig.config.licensedDatasets, this.nodeData.nodes.get()).subscribe(response => {
const existingDrugIDs = this.nodeData.nodes.get().filter(n => n.drugstoneId && n.drugstoneType === 'drug').map(n => n.drugstoneId);
for (const interaction of response.pdis) {
- const edge = mapCustomEdge({from: interaction.protein, to: interaction.drug}, this.drugstoneConfig.currentConfig())
+ const edge = mapCustomEdge({from: interaction.protein, to: interaction.drug}, this.drugstoneConfig.currentConfig());
if (proteinMap[edge.from]) {
proteinMap[edge.from].forEach(from => {
- if (addedEdge[from] && addedEdge[from].indexOf(edge.to) !== -1)
- return
- const e = JSON.parse(JSON.stringify(edge))
- e.from = from
- e.to = edge.to
+ if (addedEdge[from] && addedEdge[from].indexOf(edge.to) !== -1) {
+ return;
+ }
+ const e = JSON.parse(JSON.stringify(edge));
+ e.from = from;
+ e.to = edge.to;
this.adjacentDrugEdgesList.push(e);
- if (!addedEdge[from])
- addedEdge[from] = [edge.to]
- else
- addedEdge[from].push(edge.to)
- })
+ if (!addedEdge[from]) {
+ addedEdge[from] = [edge.to];
+ } else {
+ addedEdge[from].push(edge.to);
+ }
+ });
}
}
for (const drug of response.drugs) {
drug.group = 'foundDrug';
drug.id = getDrugNodeId(drug);
- if (existingDrugIDs.indexOf(drug.drugstoneId) === -1) {
- this.adjacentDrugList.push(mapCustomNode(drug, this.drugstoneConfig.currentConfig()))
+ if (!existingDrugIDs.includes(drug.drugstoneId)) {
+ existingDrugIDs.push(drug.drugstoneId);
+ this.adjacentDrugList.push(mapCustomNode(drug, this.drugstoneConfig.currentConfig()));
}
}
this.nodeData.nodes.add(this.adjacentDrugList);
this.nodeData.edges.add(this.adjacentDrugEdgesList);
this.updateQueryItems();
this.loadingScreen.stateUpdate(false);
- })
+ });
} else {
// remove adjacent drugs, make sure that also drug associated disorders are removed
if (this.adjacentDisordersDrug) {
@@ -290,13 +299,13 @@ export class NetworkComponent implements OnInit {
}
public saveRemoveDisorders(nodeList: Node[]) {
- const other = this.adjacentDrugDisorderList === nodeList ? this.adjacentProteinDisorderList : this.adjacentDrugDisorderList
- if (other == null)
+ const other = this.adjacentDrugDisorderList === nodeList ? this.adjacentProteinDisorderList : this.adjacentDrugDisorderList;
+ if (other == null) {
this.nodeData.nodes.remove(nodeList);
- else {
+ } else {
const otherIds = other.map(d => d.id);
- const rest = nodeList.filter(d => otherIds.indexOf(d.id) === -1)
- this.nodeData.nodes.remove(rest)
+ const rest = nodeList.filter(d => otherIds.indexOf(d.id) === -1);
+ this.nodeData.nodes.remove(rest);
}
}
@@ -367,7 +376,7 @@ export class NetworkComponent implements OnInit {
this.nodeRenderer = null;
const updatedNodes = [];
// for (const item of this.proteins) {
- const proteins = this.nodeData.nodes.get().filter(n => n.drugstoneId && n.drugstoneType === 'protein')
+ const proteins = this.nodeData.nodes.get().filter(n => n.drugstoneId && n.drugstoneType === 'protein');
for (const node of proteins) {
const pos = this.networkInternal.getPositions([node.id]);
node.x = pos[node.id].x;
@@ -390,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(
@@ -408,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 => {
@@ -416,36 +426,44 @@ export class NetworkComponent implements OnInit {
proteinNodes.push(element);
}
});
- this.netex.tissueExpressionGenes(this.selectedTissue, proteinNodes).subscribe((response) => {
+ this.netex.tissueExpressionGenes(this.selectedTissue, proteinNodes).subscribe(async (response) => {
this.expressionMap = response;
const updatedNodes = [];
this.nodeRenderer = pieChartContextRenderer;
// mapping from netex IDs to network IDs, TODO check if this step is necessary
- const networkIdMapping = {}
+ const networkIdMapping = {};
this.nodeData.nodes.get().forEach(element => {
if (element.drugstoneType === 'protein') {
element.drugstoneId.forEach(id => {
- if (networkIdMapping[id])
+ if (networkIdMapping[id]) {
networkIdMapping[id].push(element.id);
- else
- networkIdMapping[id] = [element.id]
+ } else {
+ networkIdMapping[id] = [element.id];
+ }
});
}
});
- const maxExpr = Math.max(...Object.values(this.expressionMap));
- const exprMap = {}
+ let maxExpr = 1_000_000;
+ await this.netex.maxTissueExpression(this.selectedTissue).then(response => {
+ maxExpr = response.max;
+ }).catch(err => {
+ console.error(err);
+ maxExpr = Math.max(...Object.values(this.expressionMap));
+ });
+ const exprMap = {};
for (const [drugstoneId, expressionlvl] of Object.entries(this.expressionMap)) {
networkIdMapping[drugstoneId].forEach(networkId => {
- if (!exprMap[networkId])
- exprMap[networkId] = [expressionlvl]
- else
- exprMap[networkId].push(expressionlvl)
- })
+ if (!exprMap[networkId]) {
+ exprMap[networkId] = [expressionlvl];
+ } else {
+ exprMap[networkId].push(expressionlvl);
+ }
+ });
}
- this.expressionMap = {}
+ this.expressionMap = {};
Object.keys(exprMap).forEach(networkId => {
const expressionlvl = exprMap[networkId] ? exprMap[networkId].reduce((a, b) => a + b) / exprMap[networkId].length : null;
- this.expressionMap[networkId] = expressionlvl
+ this.expressionMap[networkId] = expressionlvl;
const node = this.nodeData.nodes.get(networkId);
if (node === null) {
return;
@@ -468,25 +486,28 @@ export class NetworkComponent implements OnInit {
node.shape = 'custom';
node.ctxRenderer = pieChartContextRenderer;
updatedNodes.push(node);
- })
+ });
this.nodeData.nodes.update(updatedNodes);
this.loadingScreen.stateUpdate(false);
}
- )
+ );
}
this.currentViewSelectedTissue = this.selectedTissue;
}
public hasDrugsLoaded(): boolean {
- if (this.nodeData && this.nodeData.nodes)
- for (const node of this.nodeData.nodes.get())
- if (node.drugstoneType && node.drugstoneId === 'drug')
+ if (this.nodeData && this.nodeData.nodes) {
+ for (const node of this.nodeData.nodes.get()) {
+ if (node.drugstoneType && node.drugstoneId === 'drug') {
return true;
+ }
+ }
+ }
return false;
}
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;
}
/**
@@ -497,10 +518,11 @@ export class NetworkComponent implements OnInit {
this.loadingScreen.stateUpdate(true);
this.highlightSeeds = bool;
const updatedNodes = [];
- if (this.highlightSeeds)
- this.legendService.add_to_context('seeds')
- else
- this.legendService.remove_from_context('seeds')
+ if (this.highlightSeeds) {
+ this.legendService.add_to_context('seeds');
+ } else {
+ this.legendService.remove_from_context('seeds');
+ }
for (const node of this.nodeData.nodes.get().filter(n => n.drugstoneType === 'protein')) {
if (node.drugstoneId === undefined) {
// nodes that are not mapped to backend remain untouched
@@ -510,7 +532,7 @@ export class NetworkComponent implements OnInit {
if (!node) {
continue;
}
- console.log(node)
+ console.log(node);
const pos = this.networkHandler.activeNetwork.networkInternal.getPositions([node.id]);
node.x = pos[node.id].x;
node.y = pos[node.id].y;
@@ -525,8 +547,8 @@ export class NetworkComponent implements OnInit {
this.getGradient(node.id),
this.nodeRenderer
)
- )
- updatedNodes.push(node);
+ ),
+ updatedNodes.push(node);
}
this.nodeData.nodes.update(updatedNodes);
this.loadingScreen.stateUpdate(false);
diff --git a/src/app/config.ts b/src/app/config.ts
index 31da31f923b7f9303dcd825526b1d85a6b04ab78..9fd9175a97f3cb5b36a212e131cf157f6d6026a1 100644
--- a/src/app/config.ts
+++ b/src/app/config.ts
@@ -60,11 +60,14 @@ export interface IConfig {
showNetworkMenuButtonScreenshot: boolean;
showNetworkMenuButtonExportGraphml: boolean;
showNetworkMenuButtonAdjacentDrugs: boolean;
+ activateNetworkMenuButtonAdjacentDrugs: boolean;
showNetworkMenuButtonCenter: boolean;
showConnectGenes: boolean;
networkMenuButtonAdjacentDrugsLabel: string;
showNetworkMenuButtonAdjacentDisordersProteins: boolean;
+ activateNetworkMenuButtonAdjacentDisorders: boolean;
networkMenuButtonAdjacentDisordersProteinsLabel: string;
+ activateNetworkMenuButtonAdjacentDisordersDrugs: boolean;
showNetworkMenuButtonAdjacentDisordersDrugs: boolean;
networkMenuButtonAdjacentDisordersDrugsLabel: string;
showNetworkMenuButtonAnimation: boolean;
@@ -155,10 +158,12 @@ export const defaultConfig: IConfig = {
showNetworkMenuButtonScreenshot: true,
showNetworkMenuButtonExportGraphml: true,
showNetworkMenuButtonAdjacentDrugs: true,
+ activateNetworkMenuButtonAdjacentDrugs: false,
showNetworkMenuButtonCenter: true,
showNetworkMenuButtonAnimation: true,
-
+ activateNetworkMenuButtonAdjacentDisorders: false,
showNetworkMenuButtonAdjacentDisordersProteins: true,
+ activateNetworkMenuButtonAdjacentDisordersDrugs: false,
showNetworkMenuButtonAdjacentDisordersDrugs: true,
showConnectGenes: true,
networkMenuButtonAdjacentDrugsLabel: 'Drugs',
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 ab2348c07ee45787c8d7630cc7a8ccd3068fbfb3..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;
@@ -228,6 +229,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
if (this.drugstoneConfig.config.physicsOn) {
this.networkHandler.activeNetwork.updatePhysicsEnabled(true);
}
+ this.networkHandler.updateAdjacentNodes();
});
}
}
diff --git a/src/app/services/netex-controller/netex-controller.service.ts b/src/app/services/netex-controller/netex-controller.service.ts
index ec8aa9329b428b4c4a7814459a4fe3455374157d..2701e463a98a780214442fa780efa7186d2c917e 100644
--- a/src/app/services/netex-controller/netex-controller.service.ts
+++ b/src/app/services/netex-controller/netex-controller.service.ts
@@ -47,6 +47,13 @@ export class NetexControllerService {
return this.http.post('https://api.digest-validation.net/set', payload).toPromise();
}
+ public maxTissueExpression(tissue: Tissue): Promise<any> {
+ const params = new HttpParams()
+ .set('tissue', tissue.drugstoneId);
+ return this.http.get(environment.backend + 'tissue_max_expression/', {params}).toPromise();
+ }
+
+
public tissueExpressionGenes(tissue: Tissue, nodes: Node[]): Observable<any> {
/**
* Returns the expression in the given tissue for given nodes and cancerNodes
diff --git a/src/app/services/network-handler/network-handler.service.ts b/src/app/services/network-handler/network-handler.service.ts
index d251fbaa636b777e8b3ea04c05619cf75a9f58a4..f3348321d0c19f87e3cc7c651ebf94620d4dcc4c 100644
--- a/src/app/services/network-handler/network-handler.service.ts
+++ b/src/app/services/network-handler/network-handler.service.ts
@@ -6,8 +6,8 @@ import {AnalysisService} from '../analysis/analysis.service';
import {DrugstoneConfigService} from '../drugstone-config/drugstone-config.service';
import {NetexControllerService} from '../netex-controller/netex-controller.service';
import {OmnipathControllerService} from '../omnipath-controller/omnipath-controller.service';
-import {LegendService} from "../legend-service/legend-service.service";
-import { LoadingScreenService } from '../loading-screen/loading-screen.service';
+import {LegendService} from '../legend-service/legend-service.service';
+import {LoadingScreenService} from '../loading-screen/loading-screen.service';
@Injectable({
providedIn: 'root'
@@ -34,4 +34,19 @@ export class NetworkHandlerService {
get getChange$() {
return this.change.asObservable();
}
+
+ async updateAdjacentNodes() {
+ if (this.drugstoneConfig.config.activateNetworkMenuButtonAdjacentDrugs) {
+ this.activeNetwork.adjacentDrugs = true;
+ await this.activeNetwork.updateAdjacentDrugs(true);
+ }
+ if (this.drugstoneConfig.config.activateNetworkMenuButtonAdjacentDisorders) {
+ this.activeNetwork.adjacentDisordersProtein = true;
+ await this.activeNetwork.updateAdjacentProteinDisorders(true);
+ }
+ if (this.drugstoneConfig.config.activateNetworkMenuButtonAdjacentDisordersDrugs) {
+ this.activeNetwork.adjacentDisordersDrug = true;
+ await this.activeNetwork.updateAdjacentDrugDisorders(true);
+ }
+ }
}
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 4e5a70b55e56b535861c7a59313829a83d30ac16..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='{ "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))
}