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

Merge branch 'nodestyle'

parents 1fe3fc46 c995bea8
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 418 additions and 361 deletions
src/app/components/analysis-panel/analysis-panel.component.html
+ 126
− 126
View file @ 32ad7c4c
...@@ -89,11 +89,11 @@ ...@@ -89,11 +89,11 @@
<i class="fas fa-wrench" aria-hidden="true"></i> <i class="fas fa-wrench" aria-hidden="true"></i>
</span> </span>
{{ {{
["quick", "super", "connect", "connectSelected"].indexOf( ["quick", "super", "connect", "connectSelected"].indexOf(
task.info.algorithm task.info.algorithm
) === -1 ) === -1
? "Algorithm:" ? "Algorithm:"
: "Method:" : "Method:"
}} }}
{{ algorithmNames[task.info.algorithm] }} {{ algorithmNames[task.info.algorithm] }}
</h4> </h4>
...@@ -103,105 +103,105 @@ ...@@ -103,105 +103,105 @@
<div class="column"> <div class="column">
<table class="table is-narrow"> <table class="table is-narrow">
<tbody> <tbody>
<tr <tr
*ngIf=" *ngIf="
result && result.geneInteractionDataset !== undefined result && result.geneInteractionDataset !== undefined
" "
> >
<td>Protein-Protein Interaction Dataset</td> <td>Protein-Protein Interaction Dataset</td>
<td> <td>
{{ result.geneInteractionDataset.name }} (Version {{ result.geneInteractionDataset.name }} (Version
{{ result.geneInteractionDataset.version }}) {{ result.geneInteractionDataset.version }})
</td> </td>
</tr> </tr>
<tr <tr
*ngIf=" *ngIf="
result && result.drugInteractionDataset !== undefined result && result.drugInteractionDataset !== undefined
" "
> >
<td>Protein-Drug Interaction Dataset</td> <td>Protein-Drug Interaction Dataset</td>
<td> <td>
{{ result.drugInteractionDataset.name }} (Version {{ result.drugInteractionDataset.name }} (Version
{{ result.drugInteractionDataset.version }}) {{ result.drugInteractionDataset.version }})
</td> </td>
</tr> </tr>
<tr *ngIf="task.info.parameters.resultSize !== undefined"> <tr *ngIf="task.info.parameters.resultSize !== undefined">
<td>Result Size</td> <td>Result Size</td>
<td>{{ task.info.parameters.resultSize }}</td> <td>{{ task.info.parameters.resultSize }}</td>
</tr> </tr>
<tr *ngIf="task.info.parameters.k !== undefined"> <tr *ngIf="task.info.parameters.k !== undefined">
<td>K</td> <td>K</td>
<td>{{ task.info.parameters.k }}</td> <td>{{ task.info.parameters.k }}</td>
</tr> </tr>
<tr *ngIf="task.info.parameters.numTrees !== undefined"> <tr *ngIf="task.info.parameters.numTrees !== undefined">
<td>Number of trees</td> <td>Number of trees</td>
<td>{{ task.info.parameters.numTrees }}</td> <td>{{ task.info.parameters.numTrees }}</td>
</tr> </tr>
<tr *ngIf="task.info.parameters.tolerance !== undefined"> <tr *ngIf="task.info.parameters.tolerance !== undefined">
<td>Tolerance</td> <td>Tolerance</td>
<td>{{ task.info.parameters.tolerance }}</td> <td>{{ task.info.parameters.tolerance }}</td>
</tr> </tr>
<tr *ngIf="task.info.parameters.dampingFactor !== undefined"> <tr *ngIf="task.info.parameters.dampingFactor !== undefined">
<td>Damping Factor</td> <td>Damping Factor</td>
<td>{{ task.info.parameters.dampingFactor }}</td> <td>{{ task.info.parameters.dampingFactor }}</td>
</tr> </tr>
<tr *ngIf="task.info.parameters.maxDeg !== undefined"> <tr *ngIf="task.info.parameters.maxDeg !== undefined">
<td>Maximum Degree</td> <td>Maximum Degree</td>
<td>{{ task.info.parameters.maxDeg }}</td> <td>{{ task.info.parameters.maxDeg }}</td>
</tr> </tr>
<tr *ngIf="task.info.parameters.hubPenalty !== undefined"> <tr *ngIf="task.info.parameters.hubPenalty !== undefined">
<td>Hub Penality</td> <td>Hub Penality</td>
<td>{{ task.info.parameters.hubPenalty }}</td> <td>{{ task.info.parameters.hubPenalty }}</td>
</tr> </tr>
<tr <tr
*ngIf=" *ngIf="
task.info.parameters.includeIndirectDrugs !== undefined && task.info.parameters.includeIndirectDrugs !== undefined &&
task.info.target === 'drug' task.info.target === 'drug'
" "
> >
<td>Include indirect drugs</td> <td>Include indirect drugs</td>
<td> <td>
<i <i
*ngIf="task.info.parameters.includeIndirectDrugs" *ngIf="task.info.parameters.includeIndirectDrugs"
class="fa fa-check" class="fa fa-check"
></i> ></i>
<i <i
*ngIf="!task.info.parameters.includeIndirectDrugs" *ngIf="!task.info.parameters.includeIndirectDrugs"
class="fa fa-times color-danger" class="fa fa-times color-danger"
></i> ></i>
</td> </td>
</tr> </tr>
<tr <tr
*ngIf=" *ngIf="
task.info.parameters.includeNonApprovedDrugs !== task.info.parameters.includeNonApprovedDrugs !==
undefined && task.info.target === 'drug' undefined && task.info.target === 'drug'
" "
> >
<td>Include non-approved drugs</td> <td>Include non-approved drugs</td>
<td> <td>
<i <i
*ngIf="task.info.parameters.includeNonApprovedDrugs" *ngIf="task.info.parameters.includeNonApprovedDrugs"
class="fa fa-check" class="fa fa-check"
></i> ></i>
<i <i
*ngIf="!task.info.parameters.includeNonApprovedDrugs" *ngIf="!task.info.parameters.includeNonApprovedDrugs"
class="fa fa-times color-danger" class="fa fa-times color-danger"
></i> ></i>
</td> </td>
</tr> </tr>
<tr *ngIf="task.info.parameters.customEdges !== undefined"> <tr *ngIf="task.info.parameters.customEdges !== undefined">
<td>Include all displayed edges</td> <td>Include all displayed edges</td>
<td> <td>
<i <i
*ngIf="task.info.parameters.customEdges" *ngIf="task.info.parameters.customEdges"
class="fa fa-check" class="fa fa-check"
></i> ></i>
<i <i
*ngIf="!task.info.parameters.customEdges" *ngIf="!task.info.parameters.customEdges"
class="fa fa-times color-danger" class="fa fa-times color-danger"
></i> ></i>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
...@@ -224,18 +224,18 @@ ...@@ -224,18 +224,18 @@
</h4> </h4>
<table class="table is-narrow"> <table class="table is-narrow">
<tbody> <tbody>
<tr> <tr>
<td>Number of Trees</td> <td>Number of Trees</td>
<td>1</td> <td>1</td>
</tr> </tr>
<tr> <tr>
<td>Tolerance</td> <td>Tolerance</td>
<td>0</td> <td>0</td>
</tr> </tr>
<tr> <tr>
<td>Hub Penality</td> <td>Hub Penality</td>
<td>1</td> <td>1</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
...@@ -254,26 +254,26 @@ ...@@ -254,26 +254,26 @@
</h4> </h4>
<table class="table is-narrow"> <table class="table is-narrow">
<tbody> <tbody>
<tr> <tr>
<td>Include indirect drugs</td> <td>Include indirect drugs</td>
<td> <td>
<i class="fa fa-times"></i> <i class="fa fa-times"></i>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Include non-approved drugs</td> <td>Include non-approved drugs</td>
<td> <td>
<i class="fa fa-check"></i> <i class="fa fa-check"></i>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>Hub Penality</td> <td>Hub Penality</td>
<td>1</td> <td>1</td>
</tr> </tr>
<tr> <tr>
<td>Result Size</td> <td>Result Size</td>
<td>10</td> <td>10</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
......
src/app/components/analysis-panel/analysis-panel.component.ts
+ 189
− 165
View file @ 32ad7c4c
...@@ -122,6 +122,8 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit ...@@ -122,6 +122,8 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
public expressionMap: NodeAttributeMap; public expressionMap: NodeAttributeMap;
public loading = false;
constructor(public legendService: LegendService, public networkHandler: NetworkHandlerService, public drugstoneConfig: DrugstoneConfigService, private http: HttpClient, public analysis: AnalysisService, public netex: NetexControllerService) { constructor(public legendService: LegendService, public networkHandler: NetworkHandlerService, public drugstoneConfig: DrugstoneConfigService, private http: HttpClient, public analysis: AnalysisService, public netex: NetexControllerService) {
} }
...@@ -172,160 +174,177 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit ...@@ -172,160 +174,177 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
} }
if (this.task && this.task.info.done) { if (this.task && this.task.info.done) {
this.result = await this.netex.getTaskResult(this.token); this.loading = true;
if (this.result.parameters.target === 'drug') { this.netex.getTaskResult(this.token).then(result => {
this.legendService.add_to_context('drug') this.result = result;
} else { if (this.result.parameters.target === 'drug') {
this.legendService.add_to_context('drugTarget') this.legendService.add_to_context('drug');
} } else {
const nodeAttributes = this.result.nodeAttributes || {}; this.legendService.add_to_context('drugTarget');
this.networkHandler.activeNetwork.seedMap = nodeAttributes.isSeed || {};
// Reset
this.nodeData = {nodes: null, edges: null};
this.networkHandler.activeNetwork.networkEl.nativeElement.innerHTML = '';
this.networkHandler.activeNetwork.networkInternal = null;
// Create
const {nodes, edges} = this.createNetwork(this.result);
this.networkHandler.activeNetwork.inputNetwork = {nodes: nodes, edges: edges};
this.nodeData.nodes = new vis.DataSet(nodes);
this.nodeData.edges = new vis.DataSet(edges);
const container = this.networkHandler.activeNetwork.networkEl.nativeElement;
const isBig = nodes.length > 100 || edges.length > 100;
const options = NetworkSettings.getOptions(isBig ? 'analysis-big' : 'analysis', this.myConfig.physicsOn);
this.drugstoneConfig.config.physicsOn = !isBig;
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);
}
});
this.tableDrugs = nodes.filter(e => e.drugstoneId && e.drugstoneType === 'drug');
this.tableDrugs.forEach((r) => {
r.rawScore = r.score;
});
this.tableProteins = nodes.filter(e => e.drugstoneId && e.drugstoneType === 'protein');
this.tableSelectedProteins = [];
this.tableProteins.forEach((r) => {
r.rawScore = r.score;
r.isSeed = this.networkHandler.activeNetwork.seedMap[r.id];
const wrapper = getWrapperFromNode(r);
if (this.analysis.inSelection(wrapper)) {
this.tableSelectedProteins.push(r);
} }
}); const nodeAttributes = this.result.nodeAttributes || {};
this.networkHandler.activeNetwork.seedMap = nodeAttributes.isSeed || {};
this.tableHasScores = ['trustrank', 'closeness', 'degree', 'betweenness', 'quick', 'super']
.indexOf(this.task.info.algorithm) !== -1; // Reset
if (this.tableHasScores) { this.nodeData = {nodes: null, edges: null};
this.toggleNormalization(true); this.networkHandler.activeNetwork.networkEl.nativeElement.innerHTML = '';
} this.networkHandler.activeNetwork.networkInternal = null;
// Create
this.createNetwork(this.result).then(nw => {
const nodes = nw.nodes;
const edges = nw.edges;
this.networkHandler.activeNetwork.inputNetwork = {nodes: nodes, edges: edges};
this.nodeData.nodes = new vis.DataSet(nodes);
this.nodeData.edges = new vis.DataSet(edges);
const container = this.networkHandler.activeNetwork.networkEl.nativeElement;
const isBig = nodes.length > 100 || edges.length > 100;
const options = NetworkSettings.getOptions(isBig ? 'analysis-big' : 'analysis', this.myConfig);
// @ts-ignore
options.groups = this.drugstoneConfig.config.nodeGroups;
// @ts-ignore
for (const g of Object.values(options.groups)) {
// @ts-ignore
delete g.renderer
}
this.drugstoneConfig.config.physicsOn = !isBig;
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);
}
});
this.tableDrugs = nodes.filter(e => e.drugstoneId && e.drugstoneType === 'drug');
this.tableDrugs.forEach((r) => {
r.rawScore = r.score;
});
this.tableProteins = nodes.filter(e => e.drugstoneId && e.drugstoneType === 'protein');
this.tableSelectedProteins = [];
this.tableProteins.forEach((r) => {
r.rawScore = r.score;
r.isSeed = this.networkHandler.activeNetwork.seedMap[r.id];
const wrapper = getWrapperFromNode(r);
if (this.analysis.inSelection(wrapper)) {
this.tableSelectedProteins.push(r);
}
});
this.networkHandler.activeNetwork.networkInternal.on('deselectNode', (properties) => {
this.showDetailsChange.emit(null);
});
this.networkHandler.activeNetwork.networkInternal.on('doubleClick', (properties) => { this.tableHasScores = ['trustrank', 'closeness', 'degree', 'betweenness', 'quick', 'super']
const nodeIds: Array<string> = properties.nodes; .indexOf(this.task.info.algorithm) !== -1;
if (nodeIds.length > 0) { if (this.tableHasScores) {
const nodeId = nodeIds[0]; this.toggleNormalization(true);
const node = this.nodeData.nodes.get(nodeId);
if (node.nodeType === 'drug' || node.drugstoneId === undefined || node.drugstoneType !== 'protein') {
return;
} }
const wrapper = getWrapperFromNode(node); this.networkHandler.activeNetwork.networkInternal.setData({nodes: undefined, edge: undefined});
if (this.analysis.inSelection(wrapper)) { setTimeout(() => {
this.analysis.removeItems([wrapper]); this.networkHandler.activeNetwork.networkInternal.setData(this.nodeData);
this.analysis.getCount(); }, 1000);
} else {
this.analysis.addItems([wrapper]);
this.analysis.getCount();
}
}
});
this.networkHandler.activeNetwork.networkInternal.on('click', (properties) => {
const selectedNodes = this.nodeData.nodes.get(properties.nodes);
if (selectedNodes.length > 0) {
this.showDetailsChange.emit(getWrapperFromNode(selectedNodes[0]));
} else {
this.showDetailsChange.emit(null);
}
});
this.analysis.subscribeList((items, selected) => { this.networkHandler.activeNetwork.networkInternal.on('deselectNode', (properties) => {
// return if analysis panel is closed or no nodes are loaded this.showDetailsChange.emit(null);
if (!this.token) { });
return;
}
if (selected !== null) { this.networkHandler.activeNetwork.networkInternal.on('doubleClick', (properties) => {
const updatedNodes: Node[] = []; const nodeIds: Array<string> = properties.nodes;
for (const item of items) { if (nodeIds.length > 0) {
const node = this.nodeData.nodes.get(item.id); const nodeId = nodeIds[0];
if (!node) { const node = this.nodeData.nodes.get(nodeId);
continue; if (node.nodeType === 'drug' || node.drugstoneId === undefined || node.drugstoneType !== 'protein') {
return;
}
const wrapper = getWrapperFromNode(node);
if (this.analysis.inSelection(wrapper)) {
this.analysis.removeItems([wrapper]);
this.analysis.getCount();
} else {
this.analysis.addItems([wrapper]);
this.analysis.getCount();
}
} }
const pos = this.networkHandler.activeNetwork.networkInternal.getPositions([item.id]); });
node.x = pos[item.id].x;
node.y = pos[item.id].y; this.networkHandler.activeNetwork.networkInternal.on('click', (properties) => {
const isSeed = this.networkHandler.activeNetwork.highlightSeeds ? this.networkHandler.activeNetwork.seedMap[node.id] : false; const selectedNodes = this.nodeData.nodes.get(properties.nodes);
const nodeStyled = NetworkSettings.getNodeStyle( if (selectedNodes.length > 0) {
node, this.showDetailsChange.emit(getWrapperFromNode(selectedNodes[0]));
this.myConfig, } else {
isSeed, this.showDetailsChange.emit(null);
selected,
this.networkHandler.activeNetwork.getGradient(item.id),
this.networkHandler.activeNetwork.nodeRenderer
)
updatedNodes.push(nodeStyled);
}
this.nodeData.nodes.update(updatedNodes);
const proteinSelection = this.tableSelectedProteins;
for (const item of items) {
// TODO: Refactor!
const found = proteinSelection.findIndex((i) => getProteinNodeId(i) === item.id);
const tableItem = this.tableProteins.find((i) => getProteinNodeId(i) === item.id);
if (selected && found === -1 && tableItem) {
proteinSelection.push(tableItem);
}
if (!selected && found !== -1 && tableItem) {
proteinSelection.splice(found, 1);
} }
}
this.tableSelectedProteins = [...proteinSelection];
} else {
// else: selected is null
const updatedNodes = [];
this.nodeData.nodes.forEach((node) => {
const isSeed = this.networkHandler.activeNetwork.highlightSeeds ? this.networkHandler.activeNetwork.seedMap[node.id] : false;
const nodeStyled = NetworkSettings.getNodeStyle(
node,
this.myConfig,
isSeed,
selected,
this.networkHandler.activeNetwork.getGradient(node.id),
this.networkHandler.activeNetwork.nodeRenderer
)
updatedNodes.push(nodeStyled);
}); });
this.nodeData.nodes.update(updatedNodes);
const proteinSelection = []; this.analysis.subscribeList((items, selected) => {
for (const item of items) { // return if analysis panel is closed or no nodes are loaded
const tableItem = this.tableProteins.find((i) => getProteinNodeId(i) === item.id); if (!this.token) {
if (tableItem) { return;
proteinSelection.push(tableItem);
} }
}
this.tableSelectedProteins = [...proteinSelection]; if (selected !== null) {
} const updatedNodes: Node[] = [];
for (const item of items) {
const node = this.nodeData.nodes.get(item.id);
if (!node) {
continue;
}
const pos = this.networkHandler.activeNetwork.networkInternal.getPositions([item.id]);
node.x = pos[item.id].x;
node.y = pos[item.id].y;
const isSeed = this.networkHandler.activeNetwork.highlightSeeds ? this.networkHandler.activeNetwork.seedMap[node.id] : false;
const nodeStyled = NetworkSettings.getNodeStyle(
node,
this.myConfig,
isSeed,
selected,
this.networkHandler.activeNetwork.getGradient(item.id),
this.networkHandler.activeNetwork.nodeRenderer
)
updatedNodes.push(nodeStyled);
}
this.nodeData.nodes.update(updatedNodes);
const proteinSelection = this.tableSelectedProteins;
for (const item of items) {
// TODO: Refactor!
const found = proteinSelection.findIndex((i) => getProteinNodeId(i) === item.id);
const tableItem = this.tableProteins.find((i) => getProteinNodeId(i) === item.id);
if (selected && found === -1 && tableItem) {
proteinSelection.push(tableItem);
}
if (!selected && found !== -1 && tableItem) {
proteinSelection.splice(found, 1);
}
}
this.tableSelectedProteins = [...proteinSelection];
} else {
// else: selected is null
const updatedNodes = [];
this.nodeData.nodes.forEach((node) => {
const isSeed = this.networkHandler.activeNetwork.highlightSeeds ? this.networkHandler.activeNetwork.seedMap[node.id] : false;
if (!isSeed)
return
const nodeStyled = NetworkSettings.getNodeStyle(
node,
this.myConfig,
isSeed,
selected,
this.networkHandler.activeNetwork.getGradient(node.id),
this.networkHandler.activeNetwork.nodeRenderer
);
updatedNodes.push(nodeStyled);
});
this.nodeData.nodes.update(updatedNodes);
const proteinSelection = [];
for (const item of items) {
const tableItem = this.tableProteins.find((i) => getProteinNodeId(i) === item.id);
if (tableItem) {
proteinSelection.push(tableItem);
}
}
this.tableSelectedProteins = [...proteinSelection];
}
});
});
}); });
} }
} }
...@@ -401,7 +420,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit ...@@ -401,7 +420,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
* @param result * @param result
* @returns * @returns
*/ */
public createNetwork(result: any): { edges: any[], nodes: any[] } { public async createNetwork(result: any): Promise<{ edges: any[]; nodes: any[]; }> {
const config = result.parameters.config; const config = result.parameters.config;
this.myConfig = config; this.myConfig = config;
...@@ -417,6 +436,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit ...@@ -417,6 +436,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
this.proteins = []; this.proteins = [];
this.effects = []; this.effects = [];
const network = result.network; const network = result.network;
network.nodes = [...new Set<string>(network.nodes)]
const details = attributes.details || {}; const details = attributes.details || {};
const nodeIdMap = {} const nodeIdMap = {}
...@@ -427,29 +447,33 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit ...@@ -427,29 +447,33 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
nodeIdMap[id] = e[1][identifier][0] nodeIdMap[id] = e[1][identifier][0]
}) })
}) })
for (const nodeId of Object.keys(details)) { for (const nodeId of network.nodes) {
const nodeDetails = details[nodeId] if (details[nodeId]) {
nodeDetails.id = nodeDetails.id ? nodeDetails.id : (typeof nodeDetails.drugstoneId === 'string' ? nodeDetails.drugstoneId : nodeDetails.drugstoneId[0]); const nodeDetails = details[nodeId]
if (nodeDetails.drugstoneId && nodeDetails.drugstoneType === 'protein') { nodeDetails.id = nodeDetails.id ? nodeDetails.id : (typeof nodeDetails.drugstoneId === 'string' ? nodeDetails.drugstoneId : nodeDetails.drugstoneId[0]);
// node is protein from database, has been mapped on init to backend protein from backend if (nodeDetails.drugstoneId && nodeDetails.drugstoneType === 'protein') {
// or was found during analysis // node is protein from database, has been mapped on init to backend protein from backend
// FIXME connectorNodes are not visualized correctly // or was found during analysis
nodeDetails.group = result.targetNodes && result.targetNodes.indexOf(nodeId) !== -1 ? 'foundNode' : (nodeDetails.group ? nodeDetails.group : 'connectorNode'); // FIXME connectorNodes are not visualized correctly
nodeDetails.label = nodeDetails.label ? nodeDetails.label : nodeDetails[identifier]; nodeDetails.group = result.targetNodes && result.targetNodes.indexOf(nodeId) !== -1 ? 'foundNode' : (nodeDetails.group ? nodeDetails.group : 'connectorNode');
nodeDetails.id = nodeDetails[identifier][0] ? nodeDetails[identifier][0] : nodeDetails.id; nodeDetails.label = nodeDetails.label ? nodeDetails.label : nodeDetails[identifier];
this.proteins.push(nodeDetails); nodeDetails.id = nodeDetails[identifier][0] ? nodeDetails[identifier][0] : nodeDetails.id;
} else if (nodeDetails.drugstoneId && nodeDetails.drugstoneType === 'drug') { this.proteins.push(nodeDetails);
// node is drug, was found during analysis } else if (nodeDetails.drugstoneId && nodeDetails.drugstoneType === 'drug') {
nodeDetails.type = 'Drug'; // node is drug, was found during analysis
nodeDetails.group = 'foundDrug'; nodeDetails.type = 'Drug';
nodeDetails.group = 'foundDrug';
} else {
// node is custom input from user, could not be mapped to backend protein
nodeDetails.group = nodeDetails.group ? nodeDetails.group : 'default';
nodeDetails.label = nodeDetails.label ? nodeDetails.label : nodeDetails[identifier]
}
// further analysis and the button function can be used to highlight seeds
// option to use scores[node] as gradient, but sccores are very small
nodes.push(NetworkSettings.getNodeStyle(nodeDetails as Node, config, false, false, 1, this.networkHandler.activeNetwork.nodeRenderer))
} else { } else {
// node is custom input from user, could not be mapped to backend protein console.log("Missing details for " + nodeId)
nodeDetails.group = nodeDetails.group ? nodeDetails.group : 'default';
nodeDetails.label = nodeDetails.label ? nodeDetails.label : nodeDetails[identifier]
} }
// further analysis and the button function can be used to highlight seeds
// option to use scores[node] as gradient, but sccores are very small
nodes.push(NetworkSettings.getNodeStyle(nodeDetails as Node, config, false, false, 1, this.networkHandler.activeNetwork.nodeRenderer))
} }
......
src/app/components/network/network.component.ts
+ 27
− 20
View file @ 32ad7c4c
...@@ -80,6 +80,8 @@ export class NetworkComponent implements OnInit { ...@@ -80,6 +80,8 @@ export class NetworkComponent implements OnInit {
public nodeRenderer = null; public nodeRenderer = null;
public loading = false
constructor(public configService: DrugstoneConfigService, public legendService: LegendService, public networkHandler: NetworkHandlerService, public analysis: AnalysisService, public drugstoneConfig: DrugstoneConfigService, public netex: NetexControllerService, public omnipath: OmnipathControllerService) { constructor(public configService: DrugstoneConfigService, public legendService: LegendService, public networkHandler: NetworkHandlerService, public analysis: AnalysisService, public drugstoneConfig: DrugstoneConfigService, public netex: NetexControllerService, public omnipath: OmnipathControllerService) {
} }
...@@ -88,6 +90,10 @@ export class NetworkComponent implements OnInit { ...@@ -88,6 +90,10 @@ export class NetworkComponent implements OnInit {
this.networkSidebarOpen = this.configService.config.expandNetworkMenu || false; this.networkSidebarOpen = this.configService.config.expandNetworkMenu || false;
} }
setLoading(bool: boolean): void {
this.loading = bool;
}
async getInteractions(key: InteractionDatabase) { async getInteractions(key: InteractionDatabase) {
let edges = []; let edges = [];
if (key === 'omnipath') { if (key === 'omnipath') {
...@@ -101,9 +107,10 @@ export class NetworkComponent implements OnInit { ...@@ -101,9 +107,10 @@ export class NetworkComponent implements OnInit {
updateQueryItems() { updateQueryItems() {
this.queryItems = []; this.queryItems = [];
this.currentViewNodes.forEach((protein) => { if (this.currentViewNodes)
this.queryItems.push(getWrapperFromNode(protein)); this.currentViewNodes.forEach((protein) => {
}); this.queryItems.push(getWrapperFromNode(protein));
});
} }
public saveAddNodes(nodeList: Node[]) { public saveAddNodes(nodeList: Node[]) {
...@@ -341,25 +348,25 @@ export class NetworkComponent implements OnInit { ...@@ -341,25 +348,25 @@ export class NetworkComponent implements OnInit {
this.nodeRenderer = null; this.nodeRenderer = null;
const updatedNodes = []; const updatedNodes = [];
// for (const item of this.proteins) { // for (const item of this.proteins) {
for (const item of this.currentViewProteins) { for (const node of this.nodeData.nodes.get().filter(n => n.drugstoneType === 'protein')) {
if (item.drugstoneId === undefined) { if (node.drugstoneId === undefined) {
// nodes that are not mapped to backend remain untouched // nodes that are not mapped to backend remain untouched
continue; continue;
} }
const node: Node = this.nodeData.nodes.get(item.id); // const node: Node = this.nodeData.nodes.get(item.id);
if (!node) { if (!node) {
continue; continue;
} }
const pos = this.networkInternal.getPositions([item.id]); const pos = this.networkInternal.getPositions([node.id]);
node.x = pos[item.id].x; node.x = pos[node.id].x;
node.y = pos[item.id].y; node.y = pos[node.id].y;
Object.assign( Object.assign(
node, node,
NetworkSettings.getNodeStyle( NetworkSettings.getNodeStyle(
node, node,
this.drugstoneConfig.config, this.drugstoneConfig.config,
false, node.isSeed && this.networkHandler.activeNetwork.highlightSeeds,
this.analysis.inSelection(getWrapperFromNode(item)), this.analysis.inSelection(getWrapperFromNode(node)),
1.0, 1.0,
this.nodeRenderer this.nodeRenderer
) )
...@@ -422,7 +429,7 @@ export class NetworkComponent implements OnInit { ...@@ -422,7 +429,7 @@ export class NetworkComponent implements OnInit {
NetworkSettings.getNodeStyle( NetworkSettings.getNodeStyle(
node, node,
this.drugstoneConfig.config, this.drugstoneConfig.config,
node.isSeed, node.isSeed && this.networkHandler.activeNetwork.highlightSeeds,
this.analysis.inSelection(wrapper), this.analysis.inSelection(wrapper),
gradient, gradient,
this.nodeRenderer)); this.nodeRenderer));
...@@ -461,18 +468,18 @@ export class NetworkComponent implements OnInit { ...@@ -461,18 +468,18 @@ export class NetworkComponent implements OnInit {
this.legendService.add_to_context('seeds') this.legendService.add_to_context('seeds')
else else
this.legendService.remove_from_context('seeds') this.legendService.remove_from_context('seeds')
for (const item of this.currentViewProteins) { for (const node of this.nodeData.nodes.get().filter(n => n.drugstoneType === 'protein')) {
if (item.drugstoneId === undefined) { if (node.drugstoneId === undefined) {
// nodes that are not mapped to backend remain untouched // nodes that are not mapped to backend remain untouched
continue; continue;
} }
const node: Node = this.nodeData.nodes.get(item.id); // const node: Node = this.nodeData.nodes.get(item.id);
if (!node) { if (!node) {
continue; continue;
} }
const pos = this.networkHandler.activeNetwork.networkInternal.getPositions([item.id]); const pos = this.networkHandler.activeNetwork.networkInternal.getPositions([node.id]);
node.x = pos[item.id].x; node.x = pos[node.id].x;
node.y = pos[item.id].y; node.y = pos[node.id].y;
const isSeed = this.highlightSeeds ? this.seedMap[node.id] : false; const isSeed = this.highlightSeeds ? this.seedMap[node.id] : false;
Object.assign( Object.assign(
node, node,
...@@ -480,8 +487,8 @@ export class NetworkComponent implements OnInit { ...@@ -480,8 +487,8 @@ export class NetworkComponent implements OnInit {
node, node,
this.drugstoneConfig.config, this.drugstoneConfig.config,
isSeed, isSeed,
this.analysis.inSelection(getWrapperFromNode(item)), this.analysis.inSelection(getWrapperFromNode(node)),
this.getGradient(item.id), this.getGradient(node.id),
this.nodeRenderer this.nodeRenderer
) )
) )
......
src/app/dialogs/launch-analysis/launch-analysis.component.ts
+ 0
− 1
View file @ 32ad7c4c
...@@ -116,7 +116,6 @@ export class LaunchAnalysisComponent implements OnInit, OnChanges { ...@@ -116,7 +116,6 @@ export class LaunchAnalysisComponent implements OnInit, OnChanges {
config: this.drugstoneConfig.config, config: this.drugstoneConfig.config,
input_network: this.networkHandler.activeNetwork.inputNetwork input_network: this.networkHandler.activeNetwork.inputNetwork
}; };
console.log(parameters)
parameters.ppi_dataset = this.drugstoneConfig.config.interactionProteinProtein; parameters.ppi_dataset = this.drugstoneConfig.config.interactionProteinProtein;
parameters.pdi_dataset = this.drugstoneConfig.config.interactionDrugProtein; parameters.pdi_dataset = this.drugstoneConfig.config.interactionDrugProtein;
parameters.licenced = this.drugstoneConfig.config.licensedDatasets; parameters.licenced = this.drugstoneConfig.config.licensedDatasets;
......
src/app/interfaces.ts
+ 3
− 2
View file @ 32ad7c4c
...@@ -22,6 +22,7 @@ export interface Node { ...@@ -22,6 +22,7 @@ export interface Node {
borderWidth: number; borderWidth: number;
borderWidthSelected: number; borderWidthSelected: number;
opacity?: number; opacity?: number;
shadow?:any;
font: { font: {
color: string; color: string;
size: number; size: number;
...@@ -43,7 +44,7 @@ export interface NetworkData { ...@@ -43,7 +44,7 @@ export interface NetworkData {
edges: NetworkEdge[] edges: NetworkEdge[]
} }
export type NodeType= 'protein' | 'drug' | 'disorder' | 'other' export type NodeType = 'protein' | 'drug' | 'disorder' | 'other'
export type NetworkType = 'explorer' | 'analysis' export type NetworkType = 'explorer' | 'analysis'
...@@ -191,7 +192,7 @@ export interface Wrapper { ...@@ -191,7 +192,7 @@ export interface Wrapper {
label: string; label: string;
type?: string; type?: string;
symbol?: Array<string>; symbol?: Array<string>;
drugstoneId?: Array<string> |string; drugstoneId?: Array<string> | string;
drugstoneType: NodeType, drugstoneType: NodeType,
ensg?: Array<string>; ensg?: Array<string>;
entrez?: Array<string>; entrez?: Array<string>;
......
src/app/network-settings.ts
+ 59
− 18
View file @ 32ad7c4c
import { getGradientColor } from './utils'; import {getGradientColor} from './utils';
import { import {
Node, Node,
} from './interfaces'; } from './interfaces';
import { IConfig, defaultConfig } from './config'; import {IConfig, defaultConfig} from './config';
import * as merge from 'lodash/fp/merge'; import * as merge from 'lodash/fp/merge';
export class NetworkSettings { export class NetworkSettings {
...@@ -60,24 +60,29 @@ export class NetworkSettings { ...@@ -60,24 +60,29 @@ export class NetworkSettings {
stabilization: true stabilization: true
}; };
static getOptions(network: 'main' | 'analysis' | 'analysis-big', physicsOn) { static getOptions(network: 'main' | 'analysis' | 'analysis-big', config) {
const physicsOn = config.physicsOn;
const groups = config.nodeGroups;
if (network === 'main') { if (network === 'main') {
return { return {
layout: this.mainLayout, layout: this.mainLayout,
edges: this.mainEdges, edges: this.mainEdges,
physics: physicsOn || this.mainPhysics, physics: physicsOn || this.mainPhysics,
groups,
}; };
} else if (network === 'analysis') { } else if (network === 'analysis') {
return { return {
layout: this.analysisLayout, layout: this.analysisLayout,
edges: this.analysisEdges, edges: this.analysisEdges,
physics: physicsOn || this.analysisPhysics, physics: physicsOn || this.analysisPhysics,
groups,
}; };
} else if (network === 'analysis-big') { } else if (network === 'analysis-big') {
return { return {
layout: this.analysisLayout, layout: this.analysisLayout,
edges: this.analysisEdges, edges: this.analysisEdges,
physics: physicsOn || this.analysisBigPhysics, physics: physicsOn || this.analysisBigPhysics,
groups,
}; };
} }
} }
...@@ -92,41 +97,77 @@ export class NetworkSettings { ...@@ -92,41 +97,77 @@ export class NetworkSettings {
// delete possible old styles // delete possible old styles
Object.keys(config.nodeGroups.default).forEach(e => delete node[e]); Object.keys(config.nodeGroups.default).forEach(e => delete node[e]);
// set group styles
if (node.group === 'default') {
node = merge(node, config.nodeGroups.default);
} else {
node = merge(node, config.nodeGroups[node.group]);
}
// note that seed and selected node style are applied after the node style is fetched. // note that seed and selected node style are applied after the node style is fetched.
// this allows to overwrite only attributes of interest, therefore in e.g. seedNode group // this allows to overwrite only attributes of interest, therefore in e.g. seedNode group
// certain attributes like shape can remain undefined // certain attributes like shape can remain undefined
// use lodash merge to not lose deep attributes, e.g. "font.size" // use lodash merge to not lose deep attributes, e.g. "font.size"
// @ts-ignore
if (node._group)
// @ts-ignore
node.group = node._group
// @ts-ignore
if (node._shadow) { // @ts-ignore
node.shadow = node._shadow
}else{
if (config.nodeGroups[node.group].shadow) {
node.shadow = {enabled: config.nodeGroups[node.group].shadow}
node.shadow.color = 'rgba(0,0,0,0.5)'
} else {
node.shadow = {color: 'rgba(0,0,0,0.5)'}
}
}
if (isSeed) { if (isSeed) {
// apply seed node style to node // apply seed node style to node
node = merge(node, config.nodeGroups.seedNode); // @ts-ignore
node._group = node.group
node.group = 'seedNode'
} }
// selection on purpose after seed style, so seed style will be combined with selection style // selection on purpose after seed style, so seed style will be combined with selection style
if (isSelected) { if (isSelected) {
// @ts-ignore
node._group = node.group
// apply selected node style to node // apply selected node style to node
node = merge(node, config.nodeGroups.selectedNode); node.group = 'selectedNode'
if (config.nodeGroups[node.group].shadow) {
node.shadow = {enabled: config.nodeGroups[node.group].shadow}
node.shadow.color = '#000000'
} else {
node.shadow = {color: '#000000'}
}
} }
// show image if image url is given. If seed nodes are highlighted, ignore image property // show image if image url is given. If seed nodes are highlighted, ignore image property
if (node.image && !isSeed) { if (node.image && !isSeed) {
node.shape = 'image'; node.shape = 'image';
} }
// use opactiy as gradient
if (gradient === null) {
node.opacity = 0
} else {
node.opacity = gradient
}
// custom ctx renderer for e.g. pie chart // custom ctx renderer for e.g. pie chart
if (renderer !== null) { if (renderer !== null) {
// @ts-ignore
node.shape = 'custom'; node.shape = 'custom';
node.color = {opacity: gradient}
node.opacity = gradient
if (isSeed) {
// apply seed node style to node
// @ts-ignore
node.color = config.nodeGroups[node.group].color
}else{
delete node.color
}
// @ts-ignore
node._shadow = node.shadow
if (config.nodeGroups[node.group].shadow) {
node.shadow = {enabled: config.nodeGroups[node.group].shadow}
node.shadow.color = 'rgba(0,0,0,0.5)'
} else {
node.shadow = {color: 'rgba(0,0,0,0.5)'}
}
node.ctxRenderer = renderer; node.ctxRenderer = renderer;
} else {
node.opacity = undefined
delete node.ctxRenderer;
} }
return node; return node;
} }
} }
......
src/app/pages/explorer-page/explorer-page.component.ts
+ 10
− 25
View file @ 32ad7c4c
...@@ -24,8 +24,8 @@ import {NetexControllerService} from 'src/app/services/netex-controller/netex-co ...@@ -24,8 +24,8 @@ import {NetexControllerService} from 'src/app/services/netex-controller/netex-co
import {removeDuplicateObjectsFromList} from '../../utils'; import {removeDuplicateObjectsFromList} from '../../utils';
import * as merge from 'lodash/fp/merge'; import * as merge from 'lodash/fp/merge';
import * as JSON5 from 'json5'; import * as JSON5 from 'json5';
import { DrugstoneConfigService } from 'src/app/services/drugstone-config/drugstone-config.service'; import {DrugstoneConfigService} from 'src/app/services/drugstone-config/drugstone-config.service';
import { NetworkHandlerService } from 'src/app/services/network-handler/network-handler.service'; import {NetworkHandlerService} from 'src/app/services/network-handler/network-handler.service';
declare var vis: any; declare var vis: any;
...@@ -164,19 +164,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -164,19 +164,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
updatedNodes.push(nodeStyled); updatedNodes.push(nodeStyled);
} }
this.nodeData.nodes.update(updatedNodes); this.nodeData.nodes.update(updatedNodes);
} else {
const updatedNodes = [];
this.nodeData.nodes.forEach((node) => {
// const nodeSelected = this.analysis.idInSelection(node.id);
// if (node.group == 'default') {
// Object.assign(node, this.drugstoneConfig.config.nodeGroups.default);
// } else {
// Object.assign(node, this.drugstoneConfig.config.nodeGroups[node.group]);
// };
Object.assign(node, this.drugstoneConfig.config.nodeGroups[node.group]);
});
this.nodeData.nodes.update(updatedNodes);
} }
}); });
} }
...@@ -261,8 +248,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -261,8 +248,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
this.networkHandler.activeNetwork.selectedWrapper = null; this.networkHandler.activeNetwork.selectedWrapper = null;
// getNetwork synchronizes the input network with the database // getNetwork synchronizes the input network with the database
await this.getNetwork(); await this.getNetwork();
this.proteinData = new ProteinNetwork(this.networkHandler.activeNetwork.inputNetwork.nodes,this.networkHandler.activeNetwork.inputNetwork.edges); this.proteinData = new ProteinNetwork(this.networkHandler.activeNetwork.inputNetwork.nodes, this.networkHandler.activeNetwork.inputNetwork.edges);
if (this.networkHandler.activeNetwork.networkPositions) { if (this.networkHandler.activeNetwork.networkPositions) {
this.proteinData.updateNodePositions(this.networkHandler.activeNetwork.networkPositions); this.proteinData.updateNodePositions(this.networkHandler.activeNetwork.networkPositions);
} }
...@@ -302,16 +288,16 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -302,16 +288,16 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
return true return true
}) })
// @ts-ignore // @ts-ignore
if (!this.drugstoneConfig.selfReferences) { if (!this.drugstoneConfig.selfReferences) {
edges = edges.filter(el => el.from !== el.to); edges = edges.filter(el => el.from !== el.to);
} }
this.nodeData.nodes = new vis.DataSet(nodes); this.nodeData.nodes = new vis.DataSet(nodes);
this.nodeData.edges = new vis.DataSet(edges); this.nodeData.edges = new vis.DataSet(edges);
const container = this.networkHandler.activeNetwork.networkEl.nativeElement; const container = this.networkHandler.activeNetwork.networkEl.nativeElement;
const options = NetworkSettings.getOptions('main', this.drugstoneConfig.config.physicsOn); const options = NetworkSettings.getOptions('main', this.drugstoneConfig.config);
this.networkHandler.activeNetwork.networkInternal = new vis.Network(container, this.nodeData, options); this.networkHandler.activeNetwork.networkInternal = new vis.Network(container, this.nodeData, options);
...@@ -410,7 +396,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -410,7 +396,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
network.nodes.forEach((node) => { network.nodes.forEach((node) => {
// set node label to original id before node id will be set to netex id // set node label to original id before node id will be set to netex id
node.label = node.label ? node.label : node.id; node.label = node.label ? node.label : node.id;
}); });
// adjust edge labels accordingly and filter // adjust edge labels accordingly and filter
...@@ -574,14 +559,14 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit { ...@@ -574,14 +559,14 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
//TODO change to access through network service //TODO change to access through network service
@ViewChild('analysisPanel') analysisPanel; @ViewChild('analysisPanel') analysisPanel;
getNodes() :any { getNodes(): any {
if (this.selectedAnalysisToken && this.analysisPanel) if (this.selectedAnalysisToken && this.analysisPanel)
return this.analysisPanel.getResultNodes() return this.analysisPanel.getResultNodes()
return this.networkHandler.activeNetwork.inputNetwork.nodes; return this.networkHandler.activeNetwork.inputNetwork.nodes;
} }
getEdges() :any { getEdges(): any {
if(this.selectedAnalysisToken && this.analysisPanel) if (this.selectedAnalysisToken && this.analysisPanel)
return this.analysisPanel.getResultEdges() return this.analysisPanel.getResultEdges()
return this.networkHandler.activeNetwork.inputNetwork.edges return this.networkHandler.activeNetwork.inputNetwork.edges
} }
......
src/app/services/netex-controller/netex-controller.service.ts
+ 1
− 1
View file @ 32ad7c4c
...@@ -20,7 +20,7 @@ export class NetexControllerService { ...@@ -20,7 +20,7 @@ export class NetexControllerService {
return this.http.post<any>(`${environment.backend}tasks/`, {tokens: JSON.stringify(tokens)}).toPromise(); return this.http.post<any>(`${environment.backend}tasks/`, {tokens: JSON.stringify(tokens)}).toPromise();
} }
public async getTaskResult(token): Promise<any> { public getTaskResult(token) {
/** /**
* returns promise of task result of COMPLETED task * returns promise of task result of COMPLETED task
*/ */
......
src/index.html
+ 3
− 3
View file @ 32ad7c4c
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment