diff --git a/src/app/components/network/network-legend/network-legend.component.html b/src/app/components/network/network-legend/network-legend.component.html index 24dcbe8a0cb4090669b46eac93cce88e1b7a8fbc..23d414745c825e83552781b7460449f6c045427f 100644 --- a/src/app/components/network/network-legend/network-legend.component.html +++ b/src/app/components/network/network-legend/network-legend.component.html @@ -71,7 +71,9 @@ [style.background-color]="nodeGroup.value.color.background" [style.color]="nodeGroup.value.font.color" > + <span style="padding-top: 1px"> ... + </span> </span> </th> <th *ngSwitchCase="'ellipse'"> diff --git a/src/app/components/network/network-legend/network-legend.component.scss b/src/app/components/network/network-legend/network-legend.component.scss index 4c8f20cb6cc9c43831d86115a6bda3933b376013..acd385d9e4ee6ce0d1b29e81807276c42a0101f9 100644 --- a/src/app/components/network/network-legend/network-legend.component.scss +++ b/src/app/components/network/network-legend/network-legend.component.scss @@ -39,7 +39,7 @@ div.legend { // no border line on top of first element border-top: none; } - } + } img { max-width: 20vw; // margin-bottom: 1rem; @@ -97,8 +97,9 @@ div.legend { border-radius: 50%; width: $legend-circle-size; height: $legend-circle-size; - display: inline-block; - text-align: center; + display: flex; + justify-content: center; + align-content: center; line-height: $legend-circle-line-height; } .triangle { diff --git a/src/app/components/network/network.component.ts b/src/app/components/network/network.component.ts index d2cde1f3d4de7e0e49efeb1ebed74a3a353df374..47bad6e2af72e8145863b4b0374c4ef378eb2b36 100644 --- a/src/app/components/network/network.component.ts +++ b/src/app/components/network/network.component.ts @@ -133,6 +133,8 @@ export class NetworkComponent implements OnInit { this.loadingScreen.stateUpdate(true); this.adjacentDisordersProtein = bool; if (this.adjacentDisordersProtein) { + this.adjacentProteinDisorderList = []; + this.adjacentProteinDisorderEdgesList = []; 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(); @@ -172,8 +174,6 @@ export class NetworkComponent implements OnInit { } this.saveRemoveDisorders(this.adjacentProteinDisorderList); this.nodeData.edges.remove(this.adjacentProteinDisorderEdgesList); - this.adjacentProteinDisorderList = []; - this.adjacentProteinDisorderEdgesList = []; this.updateQueryItems(); this.loadingScreen.stateUpdate(false); } @@ -183,6 +183,8 @@ export class NetworkComponent implements OnInit { this.loadingScreen.stateUpdate(true); this.adjacentDisordersDrug = bool; if (this.adjacentDisordersDrug) { + this.adjacentDrugDisorderList = []; + this.adjacentDrugDisorderEdgesList = []; this.legendService.add_to_context('adjacentDisorders'); this.netex.adjacentDisorders(this.nodeData.nodes.get(), 'drugs', this.drugstoneConfig.config.indicationDrugDisorder, this.drugstoneConfig.config.licensedDatasets).subscribe(response => { for (const interaction of response.edges) { @@ -205,8 +207,6 @@ export class NetworkComponent implements OnInit { } this.saveRemoveDisorders(this.adjacentDrugDisorderList); this.nodeData.edges.remove(this.adjacentDrugDisorderEdgesList); - this.adjacentDrugDisorderList = []; - this.adjacentDrugDisorderEdgesList = []; this.updateQueryItems(); this.loadingScreen.stateUpdate(false); } @@ -242,6 +242,8 @@ export class NetworkComponent implements OnInit { this.loadingScreen.stateUpdate(true); this.adjacentDrugs = bool; if (this.adjacentDrugs) { + this.adjacentDrugList = []; + this.adjacentDrugEdgesList = []; this.legendService.add_to_context('adjacentDrugs'); const addedEdge = {}; const proteinMap = this.getProteinMap(); diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts index 9875145521bce3771192d8f456a426e72442e28e..81f61bcd77b2f9166ade7d9128d79497ad1d29d4 100644 --- a/src/app/pages/explorer-page/explorer-page.component.ts +++ b/src/app/pages/explorer-page/explorer-page.component.ts @@ -127,7 +127,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { } constructor( - public omnipath: OmnipathControllerService, + // public omnipath: OmnipathControllerService, public analysis: AnalysisService, public drugstoneConfig: DrugstoneConfigService, public netex: NetexControllerService, @@ -188,8 +188,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { } } - public activateConfig(updateNetworkFlag=false) { - + public activateConfig(updateNetworkFlag = false) { let configObj = typeof this._config === 'string' ? this._config.length === 0 ? {} : JSON5.parse(this._config) : this._config; const groupsObj = typeof this._groups === 'string' ? this._groups.length === 0 ? {} : JSON5.parse(this._groups) : this._groups; configObj = merge(configObj, groupsObj); @@ -198,7 +197,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { } else { this.drugstoneConfig.config = merge(this.drugstoneConfig.config, configObj); } - // update Drugst.One according to the settings // check if config updates affect network for (const key of Object.keys(configObj)) { @@ -224,11 +222,11 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { // a network exists, save node positions this.networkHandler.activeNetwork.networkPositions = this.networkHandler.activeNetwork.networkInternal.getPositions(); } - this.createNetwork().then(() => { + this.createNetwork().then(async () => { if (this.drugstoneConfig.config.physicsOn) { this.networkHandler.activeNetwork.updatePhysicsEnabled(true); } - this.networkHandler.updateAdjacentNodes(); + this.networkHandler.updateAdjacentNodes().catch(console.error); }); } @@ -253,126 +251,129 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { /** * Creates the explorer network. Analysis component has distinct function. */ - public async createNetwork() { - this.analysis.resetSelection(); - this.networkHandler.activeNetwork.selectedWrapper = null; - // getNetwork synchronizes the input network with the database - await this.getNetwork(); - this.proteinData = new ProteinNetwork(this.networkHandler.activeNetwork.inputNetwork.nodes, this.networkHandler.activeNetwork.inputNetwork.edges); - if (this.networkHandler.activeNetwork.networkPositions) { - this.proteinData.updateNodePositions(this.networkHandler.activeNetwork.networkPositions); - } - let {nodes, edges} = this.proteinData.mapDataToNetworkInput(this.drugstoneConfig.currentConfig()); - if (this.drugstoneConfig.config.autofillEdges && nodes.length) { - let node_map = {}; - nodes.filter(n => n.drugstoneType === 'protein').forEach(node => { - if (typeof node.drugstoneId === 'string') { - if (node_map[node.drugstoneId]) { - node_map[node.drugstoneId].push(node.id); + public createNetwork(): Promise<any> { + return new Promise<any>(async (resolve, reject) => { + this.analysis.resetSelection(); + this.networkHandler.activeNetwork.selectedWrapper = null; + // getNetwork synchronizes the input network with the database + await this.getNetwork(); + this.proteinData = new ProteinNetwork(this.networkHandler.activeNetwork.inputNetwork.nodes, this.networkHandler.activeNetwork.inputNetwork.edges); + if (this.networkHandler.activeNetwork.networkPositions) { + this.proteinData.updateNodePositions(this.networkHandler.activeNetwork.networkPositions); + } + let {nodes, edges} = this.proteinData.mapDataToNetworkInput(this.drugstoneConfig.currentConfig()); + if (this.drugstoneConfig.config.autofillEdges && nodes.length) { + let node_map = {}; + nodes.filter(n => n.drugstoneType === 'protein').forEach(node => { + if (typeof node.drugstoneId === 'string') { + if (node_map[node.drugstoneId]) { + node_map[node.drugstoneId].push(node.id); + } else { + node_map[node.drugstoneId] = [node.id]; + } } else { - node_map[node.drugstoneId] = [node.id]; + node.drugstoneId.forEach(n => { + if (node_map[n]) { + node_map[n].push(node.id); + } else { + node_map[n] = [node.id]; + } + }); } + }); + const netexEdges = await this.netex.fetchEdges(nodes, this.drugstoneConfig.config.interactionProteinProtein, this.drugstoneConfig.config.licensedDatasets); + edges.push(...netexEdges.map(netexEdge => mapNetexEdge(netexEdge, this.drugstoneConfig.currentConfig(), node_map)).flatMap(e => e)); + } + + const edge_map = {}; + + edges = edges.filter(edge => { + if (edge_map[edge.to] && edge_map[edge.to].indexOf(edge.from) !== -1) { + return false; + } + if (edge_map[edge.from] && edge_map[edge.from].indexOf(edge.to) !== -1) { + return false; + } + if (!edge_map[edge.from]) { + edge_map[edge.from] = [edge.to]; } else { - node.drugstoneId.forEach(n => { - if (node_map[n]) { - node_map[n].push(node.id); - } else { - node_map[n] = [node.id]; - } - }); + edge_map[edge.from].push(edge.to); } + return true; }); - const netexEdges = await this.netex.fetchEdges(nodes, this.drugstoneConfig.config.interactionProteinProtein, this.drugstoneConfig.config.licensedDatasets); - edges.push(...netexEdges.map(netexEdge => mapNetexEdge(netexEdge, this.drugstoneConfig.currentConfig(), node_map)).flatMap(e => e)); - } - const edge_map = {}; - - edges = edges.filter(edge => { - if (edge_map[edge.to] && edge_map[edge.to].indexOf(edge.from) !== -1) { - return false; - } - if (edge_map[edge.from] && edge_map[edge.from].indexOf(edge.to) !== -1) { - return false; - } - if (!edge_map[edge.from]) { - edge_map[edge.from] = [edge.to]; - } else { - edge_map[edge.from].push(edge.to); + // @ts-ignore + if (!this.drugstoneConfig.selfReferences) { + edges = edges.filter(el => el.from !== el.to); } - return true; - }); - - // @ts-ignore - if (!this.drugstoneConfig.selfReferences) { - edges = edges.filter(el => el.from !== el.to); - } - this.nodeData.nodes = new vis.DataSet(nodes); - this.nodeData.edges = new vis.DataSet(edges); - const container = this.networkHandler.activeNetwork.networkEl.nativeElement; + this.nodeData.nodes = new vis.DataSet(nodes); + this.nodeData.edges = new vis.DataSet(edges); + const container = this.networkHandler.activeNetwork.networkEl.nativeElement; - const options = NetworkSettings.getOptions('main', this.drugstoneConfig.currentConfig()); + const options = NetworkSettings.getOptions('main', this.drugstoneConfig.currentConfig()); - this.networkHandler.activeNetwork.networkInternal = new vis.Network(container, this.nodeData, options); + this.networkHandler.activeNetwork.networkInternal = new vis.Network(container, this.nodeData, options); - this.networkHandler.activeNetwork.networkInternal.on('stabilizationIterationsDone', () => { - if (!this.drugstoneConfig.config.physicsOn) { - this.networkHandler.activeNetwork.updatePhysicsEnabled(false); - } - }); - - if (!this.drugstoneConfig.config.showSidebar) { - // skip network options for selecting nodes when there are no options to use it - return; - } + this.networkHandler.activeNetwork.networkInternal.on('stabilizationIterationsDone', () => { + if (!this.drugstoneConfig.config.physicsOn) { + this.networkHandler.activeNetwork.updatePhysicsEnabled(false); + } + }); - this.networkHandler.activeNetwork.networkInternal.on('doubleClick', (properties) => { - const nodeIds: Array<string> = properties.nodes; - if (nodeIds != null && nodeIds.length > 0) { - const nodeId = nodeIds[0]; - const node = this.nodeData.nodes.get(nodeId); - if (node.drugstoneId === undefined || node.drugstoneType !== 'protein') { - this.analysis.unmappedNodeToast(); - // skip if node is not a protein mapped to backend - return; + // if (!this.drugstoneConfig.config.showSidebar) { + // // skip network options for selecting nodes when there are no options to use it + // return; + // } + + this.networkHandler.activeNetwork.networkInternal.on('doubleClick', (properties) => { + const nodeIds: Array<string> = properties.nodes; + if (nodeIds != null && nodeIds.length > 0) { + const nodeId = nodeIds[0]; + const node = this.nodeData.nodes.get(nodeId); + if (node.drugstoneId === undefined || node.drugstoneType !== 'protein') { + this.analysis.unmappedNodeToast(); + // skip if node is not a protein mapped to backend + return; + } + const wrapper = getWrapperFromNode(node); + if (this.analysis.inSelection(node)) { + this.analysis.removeItems([wrapper]); + } else { + this.analysis.addItems([wrapper]); + } } - const wrapper = getWrapperFromNode(node); - if (this.analysis.inSelection(node)) { - this.analysis.removeItems([wrapper]); + }); + this.networkHandler.activeNetwork.networkInternal.on('click', (properties) => { + const nodeIds: Array<string> = properties.nodes; + if (nodeIds != null && nodeIds.length > 0) { + const nodeId = nodeIds[0]; + const node = this.nodeData.nodes.get(nodeId); + const wrapper = getWrapperFromNode(node); + this.openSummary(wrapper, false); } else { - this.analysis.addItems([wrapper]); + this.closeSummary(); } - } - }); - this.networkHandler.activeNetwork.networkInternal.on('click', (properties) => { - const nodeIds: Array<string> = properties.nodes; - if (nodeIds != null && nodeIds.length > 0) { - const nodeId = nodeIds[0]; - const node = this.nodeData.nodes.get(nodeId); - const wrapper = getWrapperFromNode(node); - this.openSummary(wrapper, false); - } else { + }); + this.networkHandler.activeNetwork.networkInternal.on('deselectNode', (properties) => { this.closeSummary(); - } - }); - this.networkHandler.activeNetwork.networkInternal.on('deselectNode', (properties) => { - this.closeSummary(); - }); + }); - if (this.networkHandler.activeNetwork.selectedWrapper) { - this.zoomToNode(this.networkHandler.activeNetwork.selectedWrapper.id); - } + if (this.networkHandler.activeNetwork.selectedWrapper) { + this.zoomToNode(this.networkHandler.activeNetwork.selectedWrapper.id); + } - this.networkHandler.activeNetwork.currentViewNodes = this.nodeData.nodes; - this.networkHandler.activeNetwork.currentViewEdges = this.nodeData.edges; + this.networkHandler.activeNetwork.currentViewNodes = this.nodeData.nodes; + this.networkHandler.activeNetwork.currentViewEdges = this.nodeData.edges; - this.networkHandler.activeNetwork.queryItems = []; - this.networkHandler.activeNetwork.updateQueryItems(); - this.networkHandler.activeNetwork.currentViewProteins = this.networkHandler.activeNetwork.inputNetwork.nodes; - // this.fillQueryItems(this.currentViewNodes); - if (this.networkHandler.activeNetwork.selectedWrapper) { - this.networkHandler.activeNetwork.networkInternal.selectNodes([this.networkHandler.activeNetwork.selectedWrapper.id]); - } + this.networkHandler.activeNetwork.queryItems = []; + this.networkHandler.activeNetwork.updateQueryItems(); + this.networkHandler.activeNetwork.currentViewProteins = this.networkHandler.activeNetwork.inputNetwork.nodes; + // this.fillQueryItems(this.currentViewNodes); + if (this.networkHandler.activeNetwork.selectedWrapper) { + this.networkHandler.activeNetwork.networkInternal.selectNodes([this.networkHandler.activeNetwork.selectedWrapper.id]); + } + resolve(true); + }); } public zoomToNode(id: string) { diff --git a/src/app/services/network-handler/network-handler.service.ts b/src/app/services/network-handler/network-handler.service.ts index f3348321d0c19f87e3cc7c651ebf94620d4dcc4c..cca5b2ed95ff2c3d6e4b4c17f52315e0299cdffd 100644 --- a/src/app/services/network-handler/network-handler.service.ts +++ b/src/app/services/network-handler/network-handler.service.ts @@ -35,18 +35,21 @@ export class NetworkHandlerService { 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); - } + async updateAdjacentNodes(): Promise<any> { + return new Promise<any>(async (resolve, reject) => { + 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); + } + resolve(true); + }); } } diff --git a/src/index.html b/src/index.html index f694e15ae52afd489495f662ba092283137e3cd8..ccb3cefcbc0da63d827b59e5bb9d7e37194eb11e 100644 --- a/src/index.html +++ b/src/index.html @@ -62,7 +62,7 @@ Export As Graphml Button<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"> + <select name="Protein-Protein Interactions" onchange="applyDataset('ppi-dataset')" id="ppi-dataset"> <option value="NeDRex">NeDRex</option> <option value="STRING">STRING</option> <option value="biogrid">BioGRID</option> @@ -73,7 +73,7 @@ Export As Graphml Button<br> </div> <div> <i>Drug-Protein Targets</i> - <select name="Drug-Protein Targets" onchange="applyDataset()" id="drpi-dataset"> + <select name="Drug-Protein Targets" onchange="applyDataset('drpi-dataset')" id="drpi-dataset"> <option value="NeDRex">NeDRex</option> <option value="DrugBank">DrugBank</option> <option value="Drug Central">Drug Central</option> @@ -84,7 +84,7 @@ Export As Graphml Button<br> <div> <i>Drug-Disorder Indications</i> - <select name="Drug-Disorder Indications" onchange="applyDataset()" id="drdi-dataset"> + <select name="Drug-Disorder Indications" onchange="applyDataset('drdi-dataset')" id="drdi-dataset"> <option value="NeDRex">NeDRex</option> <option value="CTD">CTD</option> <option value="Drug Central">Drug Central</option> @@ -93,7 +93,7 @@ Export As Graphml Button<br> </div> <div> <i>Protein-Disorder Associations</i> - <select name="Protein-Disorder Associations" onchange="applyDataset()" id="pdis-dataset"> + <select name="Protein-Disorder Associations" onchange="applyDataset('pdis-dataset')" id="pdis-dataset"> <option value="NeDRex">NeDRex</option> <option value="DisGeNET">DisGeNET</option> <option value="omim">OMIM</option> @@ -110,18 +110,18 @@ Export As Graphml Button<br> <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> + 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='{"activateNetworkMenuButtonAdjacentDisorders": true, "activateNetworkMenuButtonAdjacentDrugs": 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": true,"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","selfReferences":false}'--> + <!-- network='{"nodes":[{"id":"7040","label":"7040"}]}'>--> + <!-- </drugst-one>--> <!--ENSEMBL test--> @@ -165,7 +165,6 @@ Export As Graphml Button<br> } function changeConfigStr(config) { - console.log(config); const netexp = document.getElementById('netexp1'); netexp.setAttribute('config', config); } @@ -215,15 +214,23 @@ Export As Graphml Button<br> 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 applyDataset(id) { + if (!id || id === 'ppi-dataset') { + let ppi = document.getElementById('ppi-dataset') + setAttribute('interactionProteinProtein', ppi.options[ppi.selectedIndex].value) + } + if (!id || id === 'drpi-dataset') { + let drpi = document.getElementById('drpi-dataset') + setAttribute('interactionDrugProtein', drpi.options[drpi.selectedIndex].value) + } + if (!id || id === 'drdi-dataset') { + let drdi = document.getElementById('drdi-dataset') + setAttribute('indicationDrugDisorder', drdi.options[drdi.selectedIndex].value) + } + if (!id || id === 'pdis-dataset') { + let pdis = document.getElementById('pdis-dataset') + setAttribute('associatedProteinDisorder', pdis.options[pdis.selectedIndex].value) + } } function setAttribute(name, value) { @@ -231,7 +238,6 @@ Export As Graphml Button<br> 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)) }