diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b77afd5fd245da60f89c950227f2be3fe30438a1..acf1ccd670c7d2e90bdd37cfbfd3991e373c641e 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -49,6 +49,9 @@ import { ParserWarningComponent } from './components/parser-warning/parser-warni
import { GroupWarningComponent } from './components/group-warning/group-warning.component';
import { NetworkWarningComponent } from './components/network-warning/network-warning.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import { SummaryNodeComponent } from './pages/explorer-page/summary-node/summary-node/summary-node.component';
+import { NetworkOverviewComponent } from './pages/explorer-page/network-overview/network-overview/network-overview.component';
+import { InfoTileEdgeComponent } from './components/info-tile-edge/info-tile-edge/info-tile-edge.component';
@NgModule({
@@ -87,6 +90,9 @@ import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
ParserWarningComponent,
GroupWarningComponent,
NetworkWarningComponent,
+ SummaryNodeComponent,
+ NetworkOverviewComponent,
+ InfoTileEdgeComponent,
],
imports: [
BrowserModule,
diff --git a/src/app/components/analysis-panel/analysis-panel.component.ts b/src/app/components/analysis-panel/analysis-panel.component.ts
index d5cf926a367753bf09887681282e541a21798318..b278a0b21a308536014e40cc2121afb1875933b3 100644
--- a/src/app/components/analysis-panel/analysis-panel.component.ts
+++ b/src/app/components/analysis-panel/analysis-panel.component.ts
@@ -10,9 +10,9 @@ import {
SimpleChanges,
ViewChild,
} from '@angular/core';
-import {HttpClient} from '@angular/common/http';
-import {environment} from '../../../environments/environment';
-import {algorithmNames, AnalysisService} from '../../services/analysis/analysis.service';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../../environments/environment';
+import { algorithmNames, AnalysisService } from '../../services/analysis/analysis.service';
import {
Drug,
EdgeType,
@@ -28,15 +28,15 @@ import {
NodeInteraction,
} from '../../interfaces';
import domtoimage from 'dom-to-image';
-import {NetworkSettings} from '../../network-settings';
-import {NetexControllerService} from 'src/app/services/netex-controller/netex-controller.service';
-import {defaultConfig, IConfig} from 'src/app/config';
-import {mapCustomEdge, mapCustomNode} from 'src/app/main-network';
-import {downLoadFile, pieChartContextRenderer, removeDuplicateObjectsFromList} from 'src/app/utils';
-import {DrugstoneConfigService} from 'src/app/services/drugstone-config/drugstone-config.service';
-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 { NetworkSettings } from '../../network-settings';
+import { NetexControllerService } from 'src/app/services/netex-controller/netex-controller.service';
+import { defaultConfig, IConfig } from 'src/app/config';
+import { mapCustomEdge, mapCustomNode } from 'src/app/main-network';
+import { downLoadFile, pieChartContextRenderer, removeDuplicateObjectsFromList } from 'src/app/utils';
+import { DrugstoneConfigService } from 'src/app/services/drugstone-config/drugstone-config.service';
+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';
declare var vis: any;
@@ -57,7 +57,7 @@ interface Seeded {
})
export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit {
- @ViewChild('networkWithLegend', {static: false}) networkWithLegendEl: ElementRef;
+ @ViewChild('networkWithLegend', { static: false }) networkWithLegendEl: ElementRef;
@Input() token: string | null = null;
@@ -71,7 +71,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
public fullscreen = false;
public network: any;
- public nodeData: { nodes: any, edges: any } = {nodes: null, edges: null};
+ public nodeData: { nodes: any, edges: any } = { nodes: null, edges: null };
// private drugNodes: any[] = [];
// private drugEdges: any[] = [];
public tab: 'meta' | 'network' | 'table' = 'table';
@@ -177,7 +177,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
this.networkHandler.activeNetwork.seedMap = nodeAttributes.isSeed || {};
// Reset
- this.nodeData = {nodes: null, edges: null};
+ this.nodeData = { nodes: null, edges: null };
this.networkHandler.activeNetwork.networkEl.nativeElement.innerHTML = '';
this.networkHandler.activeNetwork.networkInternal = null;
// Create
@@ -188,7 +188,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
const nodes = nw.nodes;
const edges = nw.edges;
- this.networkHandler.activeNetwork.inputNetwork = {nodes: nodes, edges: 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;
@@ -237,7 +237,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
if (this.tableHasScores) {
this.toggleNormalization(true);
}
- this.networkHandler.activeNetwork.networkInternal.setData({nodes: undefined, edge: undefined});
+ this.networkHandler.activeNetwork.networkInternal.setData({ nodes: undefined, edge: undefined });
setTimeout(() => {
this.networkHandler.activeNetwork.networkInternal.setData(this.nodeData);
}, 1000);
@@ -267,11 +267,18 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
});
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]));
+ if (properties.nodes.length === 0 && properties.edges.length === 1) {
+ // clicked on one edge
+ const edgeId = properties.edges[0];
+ this.networkHandler.activeNetwork.openEdgeSummary(edgeId);
} else {
- this.showDetailsChange.emit(null);
+ this.networkHandler.activeNetwork.activeEdge = null;
+ const selectedNodes = this.nodeData.nodes.get(properties.nodes);
+ if (selectedNodes.length > 0) {
+ this.showDetailsChange.emit(getWrapperFromNode(selectedNodes[0]));
+ } else {
+ this.showDetailsChange.emit(null);
+ }
}
});
diff --git a/src/app/components/fa-solid-icon/fa-solid-icon.component.scss b/src/app/components/fa-solid-icon/fa-solid-icon.component.scss
index 7ebfe8232f9ebeb1f455730490d17e2b7b81346a..b0c002e808cafccc94fd1d4fc88d0fe18b86255e 100644
--- a/src/app/components/fa-solid-icon/fa-solid-icon.component.scss
+++ b/src/app/components/fa-solid-icon/fa-solid-icon.component.scss
@@ -14,6 +14,7 @@
margin-right: calc(-0.5em - 1px) !important;
}
&-height-normal {
- height: 1em;
+ vertical-align: middle;
+ height: 1em !important;
}
}
diff --git a/src/app/components/info-tile-edge/info-tile-edge/info-tile-edge.component.html b/src/app/components/info-tile-edge/info-tile-edge/info-tile-edge.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..bfc13974f30a67c0fd36e3e16178fca0a8ce92d9
--- /dev/null
+++ b/src/app/components/info-tile-edge/info-tile-edge/info-tile-edge.component.html
@@ -0,0 +1,30 @@
+<p
+ *ngFor="let attribute of edgeAttributes"
+ [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
+>
+ <b
+ ><span class="is-capitalized">{{ attribute[0] }}:</span></b
+ >
+ <a>
+ <span
+ class="is-capitalized is-link"
+ *ngIf="nodeKeys.includes(attribute[0])"
+ (click)="zoomTo(attribute[1].id)"
+ >
+ {{ attribute[1].label }} ({{
+ drugstoneConfig.currentConfig().nodeGroups[
+ attribute[1][
+ attribute[1].group === "selectedNode" ? "_group" : "group"
+ ]
+ ].groupName
+ }})
+ <app-fa-solid-icon
+ icon="search"
+ classString="icon-height-normal"
+ ></app-fa-solid-icon></span
+ ></a>
+
+ <span class="is-capitalized" *ngIf="!nodeKeys.includes(attribute[0])">
+ {{ attribute[1] }}
+ </span>
+</p>
diff --git a/src/app/components/info-tile-edge/info-tile-edge/info-tile-edge.component.scss b/src/app/components/info-tile-edge/info-tile-edge/info-tile-edge.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/components/info-tile-edge/info-tile-edge/info-tile-edge.component.spec.ts b/src/app/components/info-tile-edge/info-tile-edge/info-tile-edge.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..86e6c57317c49c4c5959e07681acc75ce1742adf
--- /dev/null
+++ b/src/app/components/info-tile-edge/info-tile-edge/info-tile-edge.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InfoTileEdgeComponent } from './info-tile-edge.component';
+
+describe('InfoTileEdgeComponent', () => {
+ let component: InfoTileEdgeComponent;
+ let fixture: ComponentFixture<InfoTileEdgeComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ InfoTileEdgeComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(InfoTileEdgeComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/info-tile-edge/info-tile-edge/info-tile-edge.component.ts b/src/app/components/info-tile-edge/info-tile-edge/info-tile-edge.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8db35b0c2204554ad0e1d204782682c5e43192f9
--- /dev/null
+++ b/src/app/components/info-tile-edge/info-tile-edge/info-tile-edge.component.ts
@@ -0,0 +1,68 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { getWrapperFromNode } from 'src/app/interfaces';
+import { AnalysisService } from 'src/app/services/analysis/analysis.service';
+import { DrugstoneConfigService } from 'src/app/services/drugstone-config/drugstone-config.service';
+import { NetworkHandlerService } from 'src/app/services/network-handler/network-handler.service';
+
+@Component({
+ selector: 'app-info-tile-edge',
+ templateUrl: './info-tile-edge.component.html',
+ styleUrls: ['./info-tile-edge.component.scss']
+})
+export class InfoTileEdgeComponent implements OnInit {
+
+ constructor(
+ public drugstoneConfig: DrugstoneConfigService,
+ private networkHandler: NetworkHandlerService,
+ public analysis: AnalysisService
+ ) { }
+
+ ngOnInit(): void {
+ }
+
+ public edgeAttributes: any;
+ public from: any;
+ // public fromWrapper: any = null;
+ public to: any;
+ // public toWrapper: any = null;
+ public nodeKeys = ['to', 'from'];
+
+ @Input() set edge(_edge) {
+ _edge = JSON.parse(JSON.stringify(_edge));
+ // remove attributes that should not be displayed
+ _edge['group'] = _edge['groupName'];
+ delete _edge['groupName'];
+ delete _edge['dashes'];
+ delete _edge['color'];
+ delete _edge['id'];
+ delete _edge['shadow'];
+
+ // order such that 'from' and 'to' are first
+ let from = _edge['from'];
+ let to = _edge['to'];
+ delete _edge['from'];
+ delete _edge['to'];
+
+ // map ids to names
+ const toNode = this.networkHandler.activeNetwork.nodeData.nodes.get(to);
+ // this.toWrapper = getWrapperFromNode(toNode);
+ const fromNode = this.networkHandler.activeNetwork.nodeData.nodes.get(from);
+ // this.fromWrapper = getWrapperFromNode(fromNode);
+
+ this.edgeAttributes = [['from', fromNode], ['to', toNode], ...Object.entries(_edge)];
+ };
+
+ public zoomTo(nodeId) {
+ this.networkHandler.activeNetwork.zoomToNode(nodeId);
+ }
+
+ // public selectionButtonToggle($event) {
+ // console.log(this.fromWrapper, this.toWrapper)
+ // if ($event) {
+ // this.analysis.addItems([this.toWrapper, this.fromWrapper])
+ // } else {
+ // this.analysis.removeItems([this.toWrapper, this.fromWrapper])
+ // }
+ // }
+
+}
diff --git a/src/app/components/info-tile/info-tile.component.html b/src/app/components/info-tile/info-tile.component.html
index 4daa8ad7b045475bea0fde658dfcd830212ca6a1..6f23eb28e099cbbe27fb16923974c4d5a2ee6ff4 100644
--- a/src/app/components/info-tile/info-tile.component.html
+++ b/src/app/components/info-tile/info-tile.component.html
@@ -1,157 +1,178 @@
-<div *ngIf="wrapper">
- <div>
- <p
- *ngIf="!wrapper.data.drugstoneId && wrapper.data.label"
- [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
- >
- <b><span>Label:</span></b>
- <span class="is-capitalized"> {{ wrapper.data.label }}</span>
- </p>
- <p
- *ngIf="wrapper.data.proteinName"
- [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
- >
- <b><span>Name:</span></b>
- <span class="is-capitalized"> {{ wrapper.data.proteinName }}</span>
- </p>
- <p
- *ngIf="wrapper.data.symbol"
- [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
- >
- <b><span>Symbol:</span></b>
- <a
- class="is-capitalized"
- href="https://www.genecards.org/cgi-bin/carddisp.pl?gene={{
- wrapper.data.symbol
- }}"
- target="_blank"
- >
- {{ wrapper.data.symbol }}</a
- >
- </p>
- <p
- *ngIf="wrapper.data.uniprotAc"
- [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
- >
- <b><span>Uniprot:</span></b>
- <a
- *ngFor="let uniprotAc of wrapper.data.uniprotAc"
- href="https://www.uniprot.org/uniprot/{{ uniprotAc }}"
- target="_blank"
- >
- <span class="is-capitalized"> {{ uniprotAc }}</span>
- </a>
- </p>
- <p
- *ngIf="wrapper.data.ensg"
- [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
- >
- <b><span>Ensembl:</span></b>
- <a
- *ngFor="let ensg of wrapper.data.ensg"
- href="https://www.ensembl.org/Homo_sapiens/Gene/Summary?g={{ ensg }}"
- target="_blank"
- >
- <span class="is-capitalized"> {{ ensg }}</span>
- </a>
- </p>
- <p
- *ngIf="wrapper.data.entrez"
- [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
- >
- <b><span>Entrez:</span></b>
- <a
- *ngFor="let entrez of wrapper.data.entrez"
- href="https://www.ncbi.nlm.nih.gov/gene/{{ entrez }}"
- target="_blank"
- >
- <span class="is-capitalized"> {{ entrez }}</span>
- </a>
- </p>
- <p
- *ngIf="getExpressionScore() != null"
- [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
- >
- <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="Median expression data is provided by the GTEx project. Unit is TPM (transcript per million)."
- [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
- tooltipPosition="left"
- >
- <app-fa-solid-icon icon="info-circle"></app-fa-solid-icon>
- </span>
- </p>
- <p
- *ngIf="wrapper.data.drugId || wrapper.data.disorderId"
- [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
- >
- <b><span>Name:</span></b>
- <span class="is-capitalized"> {{ wrapper.data.label }}</span>
- </p>
- <p
- *ngIf="wrapper.data.icd10"
- [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
- >
- <b><span>ICD10:</span></b>
- <span class="is-capitalized">
- {{
- wrapper.data.icd10.length === 0 ||
- (wrapper.data.icd10.length === 1 &&
- wrapper.data.icd10[0].length === 0)
- ? "-"
- : wrapper.data.icd10
- }}</span
- >
- </p>
- <p
- *ngIf="wrapper.data.drugId"
- [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
- >
- <b><span>DrugBank:</span></b>
- <a
- href="https://go.drugbank.com/drugs/{{ wrapper.data.drugId }}"
- target="_blank"
- >
- <span class="is-capitalized"> {{ wrapper.data.drugId }}</span>
- </a>
- </p>
- <p
- *ngIf="wrapper.data.disorderId"
- [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
- >
- <b><span>Mondo:</span></b>
- <a
- href="https://www.ebi.ac.uk/ols/ontologies/mondo/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMONDO_{{
- writeZeros(7 - ('' + wrapper.data.disorderId).length)
- }}{{ wrapper.data.disorderId }}"
- target="_blank"
- >
- <span class="is-capitalized"> MONDO:{{ wrapper.data.disorderId }}</span>
- </a>
- </p>
- <p
- *ngIf="drugstoneConfig.currentConfig().nodeGroups[networkHandler.activeNetwork.selectedWrapper.data[networkHandler.activeNetwork.selectedWrapper.data.group === 'selectedNode' ? '_group':'group']].groupName"
- [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
- >
- <b><span>Group:</span></b>
- <span class="is-capitalized"> {{drugstoneConfig.currentConfig().nodeGroups[networkHandler.activeNetwork.selectedWrapper.data[networkHandler.activeNetwork.selectedWrapper.data.group === 'selectedNode' ? '_group':'group']].groupName }}</span>
- </p>
- </div>
+<p
+ *ngIf="!wrapper.data.drugstoneId && wrapper.data.label"
+ [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
+>
+ <b><span>Label:</span></b>
+ <span class="is-capitalized"> {{ wrapper.data.label }}</span>
+</p>
+<p
+ *ngIf="wrapper.data.proteinName"
+ [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
+>
+ <b><span>Name:</span></b>
+ <span class="is-capitalized"> {{ wrapper.data.proteinName }}</span>
+</p>
+<p
+ *ngIf="wrapper.data.symbol"
+ [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
+>
+ <b><span>Symbol:</span></b>
+ <a
+ class="is-capitalized"
+ href="https://www.genecards.org/cgi-bin/carddisp.pl?gene={{
+ wrapper.data.symbol
+ }}"
+ target="_blank"
+ >
+ {{ wrapper.data.symbol }} </a
+ >
+</p>
- <app-toggle
- *ngIf="wrapper.data.drugstoneId && wrapper.data.drugstoneType === 'protein'"
- [value]="analysis.inSelection(wrapper)"
- (valueChange)="
- $event ? analysis.addItems([wrapper]) : analysis.removeItems([wrapper])
- "
- textOn="Selected"
- textOff="Off"
- tooltipOn="Add protein to selection."
- tooltipOff="Remove protein from selection."
- ></app-toggle>
-</div>
-<div *ngIf="!wrapper" [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }">
- Please select a node for further information.
-</div>
+
+
+<p
+ *ngIf="wrapper.data.uniprotAc"
+ [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
+>
+ <b><span>Uniprot:</span></b>
+ <a
+ *ngFor="let uniprotAc of wrapper.data.uniprotAc"
+ href="https://www.uniprot.org/uniprot/{{ uniprotAc }}"
+ target="_blank"
+ >
+ <span class="is-capitalized"> {{ uniprotAc }}</span>
+ </a>
+</p>
+<p
+ *ngIf="wrapper.data.ensg"
+ [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
+>
+ <b><span>Ensembl:</span></b>
+ <a
+ *ngFor="let ensg of wrapper.data.ensg"
+ href="https://www.ensembl.org/Homo_sapiens/Gene/Summary?g={{ ensg }}"
+ target="_blank"
+ >
+ <span class="is-capitalized"> {{ ensg }}</span>
+ </a>
+</p>
+<p
+ *ngIf="wrapper.data.entrez"
+ [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
+>
+ <b><span>Entrez:</span></b>
+ <a
+ *ngFor="let entrez of wrapper.data.entrez"
+ href="https://www.ncbi.nlm.nih.gov/gene/{{ entrez }}"
+ target="_blank"
+ >
+ <span class="is-capitalized"> {{ entrez }}</span>
+ </a>
+</p>
+<p
+ *ngIf="getExpressionScore() != null"
+ [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
+>
+ <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="Median expression data is provided by the GTEx project. Unit is TPM (transcript per million)."
+ [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
+ tooltipPosition="left"
+ >
+ <app-fa-solid-icon icon="info-circle"></app-fa-solid-icon>
+ </span>
+</p>
+<p
+ *ngIf="wrapper.data.drugId || wrapper.data.disorderId"
+ [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
+>
+ <b><span>Name:</span></b>
+ <span class="is-capitalized"> {{ wrapper.data.label }}</span>
+</p>
+<p
+ *ngIf="wrapper.data.icd10"
+ [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
+>
+ <b><span>ICD10:</span></b>
+ <span class="is-capitalized">
+ {{
+ wrapper.data.icd10.length === 0 ||
+ (wrapper.data.icd10.length === 1 && wrapper.data.icd10[0].length === 0)
+ ? "-"
+ : wrapper.data.icd10
+ }}</span
+ >
+</p>
+<p
+ *ngIf="wrapper.data.drugId"
+ [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
+>
+ <b><span>DrugBank:</span></b>
+ <a
+ href="https://go.drugbank.com/drugs/{{ wrapper.data.drugId }}"
+ target="_blank"
+ >
+ <span class="is-capitalized"> {{ wrapper.data.drugId }}</span>
+ </a>
+</p>
+<p
+ *ngIf="wrapper.data.disorderId"
+ [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
+>
+ <b><span>Mondo:</span></b>
+ <a
+ href="https://www.ebi.ac.uk/ols/ontologies/mondo/terms?iri=http%3A%2F%2Fpurl.obolibrary.org%2Fobo%2FMONDO_{{
+ writeZeros(7 - ('' + wrapper.data.disorderId).length)
+ }}{{ wrapper.data.disorderId }}"
+ target="_blank"
+ >
+ <span class="is-capitalized"> MONDO:{{ wrapper.data.disorderId }}</span>
+ </a>
+</p>
+<p
+ *ngIf="
+ drugstoneConfig.currentConfig().nodeGroups[
+ networkHandler.activeNetwork.selectedWrapper.data[
+ networkHandler.activeNetwork.selectedWrapper.data.group ===
+ 'selectedNode'
+ ? '_group'
+ : 'group'
+ ]
+ ].groupName
+ "
+ [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
+>
+ <b><span>Group:</span></b>
+ <span class="is-capitalized">
+ {{
+ drugstoneConfig.currentConfig().nodeGroups[
+ networkHandler.activeNetwork.selectedWrapper.data[
+ networkHandler.activeNetwork.selectedWrapper.data.group ===
+ "selectedNode"
+ ? "_group"
+ : "group"
+ ]
+ ].groupName
+ }}</span
+ >
+</p>
+
+<app-toggle
+ *ngIf="wrapper.data.drugstoneId && wrapper.data.drugstoneType === 'protein'"
+ [value]="analysis.inSelection(wrapper)"
+ (valueChange)="
+ $event ? analysis.addItems([wrapper]) : analysis.removeItems([wrapper])
+ "
+ textOn="Selected"
+ textOff="Off"
+ tooltipOn="Add protein to selection."
+ tooltipOff="Remove protein from selection."
+></app-toggle>
diff --git a/src/app/components/network/network.component.ts b/src/app/components/network/network.component.ts
index f337900f963accca059da6e0152dc74d35117362..ba14317dfc546bc92f581e305f878caf2825794f 100644
--- a/src/app/components/network/network.component.ts
+++ b/src/app/components/network/network.component.ts
@@ -1,6 +1,6 @@
import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
import domtoimage from 'dom-to-image';
-import {IConfig, InteractionDatabase} from 'src/app/config';
+import {InteractionDatabase} from 'src/app/config';
import {DrugstoneConfigService} from 'src/app/services/drugstone-config/drugstone-config.service';
import {NetexControllerService} from 'src/app/services/netex-controller/netex-controller.service';
import {OmnipathControllerService} from 'src/app/services/omnipath-controller/omnipath-controller.service';
@@ -42,6 +42,8 @@ export class NetworkComponent implements OnInit {
public selectedWrapper: Wrapper | null = null;
+ public activeEdge: NodeInteraction;
+
public adjacentDrugs = false;
public adjacentDisordersProtein = false;
@@ -422,9 +424,15 @@ export class NetworkComponent implements OnInit {
});
}
+ public openEdgeSummary(edgeId: string) {
+ this.selectedWrapper = undefined;
+ const edgeMap = this.nodeData.edges.get({returnType:'Object'});
+ this.activeEdge = edgeMap[edgeId];
+ }
+
public zoomToNode(id: string) {
// get network object, depending on whether analysis is open or not
- this.nodeData.nodes.getIds();
+ // this.nodeData.nodes.getIds();
const coords = this.networkInternal.getPositions(id)[id];
if (!coords) {
return;
@@ -442,7 +450,7 @@ export class NetworkComponent implements OnInit {
});
}
- toggleNetworkSidebar() {
+ public toggleNetworkSidebar() {
this.networkHandler.networkSidebarOpen = !this.networkHandler.networkSidebarOpen;
}
diff --git a/src/app/interfaces.ts b/src/app/interfaces.ts
index b41fba84db41e17257ce84b7a765237fc342c7e4..e96d259712fb5078c7e9191108127e1f22f316e1 100644
--- a/src/app/interfaces.ts
+++ b/src/app/interfaces.ts
@@ -64,9 +64,12 @@ export interface NodeInteraction {
from: string;
to: string;
group?: string;
+ groupName?: string;
label?: string;
title?: string;
shadow?: boolean;
+ // custom attributes by user
+ // [key: string]: string | number | boolean;
}
export interface NetworkEdge {
diff --git a/src/app/main-network.ts b/src/app/main-network.ts
index 1f684edbb83a6dc7cd15f20c287513352b6c2a74..28763ed1bada33980e39cfa3a13b9c0f8638cfd2 100644
--- a/src/app/main-network.ts
+++ b/src/app/main-network.ts
@@ -143,7 +143,7 @@ export function mapCustomEdge(customEdge: NodeInteraction, config: IConfig, drug
* @param config
* @returns
*/
-export function mapDrugstoneEdge(customEdge: NetexInteraction, config: IConfig, node_map: object): any {
+export function mapNetexEdge(customEdge: NetexInteraction, config: IConfig, node_map: object): any {
const edges = [];
node_map[customEdge['proteinA']].forEach(from => {
node_map[customEdge['proteinB']].forEach(to => {
diff --git a/src/app/pages/explorer-page/explorer-page.component.html b/src/app/pages/explorer-page/explorer-page.component.html
index 98852776482a169090f606e6c75b674d87d66726..b12426e299867a89bb0cbd7fd6fb56bbfc82af58 100644
--- a/src/app/pages/explorer-page/explorer-page.component.html
+++ b/src/app/pages/explorer-page/explorer-page.component.html
@@ -38,121 +38,12 @@
class="drugstone sidebar column"
*ngIf="drugstoneConfig.config.showSidebar"
>
- <div
- *ngIf="drugstoneConfig.config.showItemSelector"
- class="card bar-large mt-0"
- >
- <header
- class="card-header"
- [ngClass]="{ 'b-text-small': drugstoneConfig.smallStyle }"
- >
- <p class="card-header-title">
- <ng-container
- *ngIf="!networkHandler.activeNetwork.selectedWrapper"
- >
- <app-fa-solid-icon icon="info"></app-fa-solid-icon>
- <span> No item selected </span>
- </ng-container>
- <ng-container
- *ngIf="networkHandler.activeNetwork.selectedWrapper"
- >
- <span>
- {{ drugstoneConfig.currentConfig().nodeGroups[networkHandler.activeNetwork.selectedWrapper.data[networkHandler.activeNetwork.selectedWrapper.data.group === 'selectedNode' ? '_group':'group']].groupName}}
- </span>
- </ng-container>
- </p>
- <a
- (click)="collapseDetails = !collapseDetails"
- data-action="collapse"
- class="card-header-icon is-hidden-fullscreen"
- aria-label="more options"
- >
- <app-fa-solid-icon
- *ngIf="collapseDetails"
- icon="angle-down"
- ></app-fa-solid-icon>
- <app-fa-solid-icon
- *ngIf="!collapseDetails"
- icon="angle-left"
- ></app-fa-solid-icon>
- </a>
- </header>
- <div *ngIf="collapseDetails">
- <div class="card-content">
- <app-info-tile
- [expressions]="networkHandler.activeNetwork.expressionMap"
- [wrapper]="networkHandler.activeNetwork.selectedWrapper"
- ></app-info-tile>
- </div>
- </div>
- </div>
- <div
- *ngIf="drugstoneConfig.config.showOverview"
- class="card bar-large"
- [ngClass]="{ 'b-text-small': drugstoneConfig.smallStyle }"
- >
- <header class="card-header">
- <p class="card-header-title">
- <app-fa-solid-icon icon="info"></app-fa-solid-icon>
- Network Overview
- </p>
- <a
- (click)="collapseOverview = !collapseOverview"
- data-action="collapse"
- class="card-header-icon is-hidden-fullscreen"
- aria-label="more options"
- >
- <app-fa-solid-icon
- *ngIf="collapseOverview"
- icon="angle-down"
- ></app-fa-solid-icon>
- <app-fa-solid-icon
- *ngIf="!collapseOverview"
- icon="angle-left"
- ></app-fa-solid-icon>
- </a>
- </header>
- <div *ngIf="collapseOverview">
- <div class="card-content">
- <nav class="level" *ngIf="proteinData">
- <!-- TO DO : CHANGE THIS LATER
- <div class="level-item has-text-centered">
- <div>
- <p class="heading">Viral<br>Proteins</p>
- <p class="title"> {{ proteinData.effects.length }}</p>
- </div>
- </div>
- -->
+ <app-summary-node *ngIf="drugstoneConfig.config.showItemSelector"></app-summary-node>
- <div class="level-item has-text-centered">
- <div>
- <p class="heading">Nodes</p>
- <p class="title">
- {{
- networkHandler.activeNetwork.currentViewNodes != null
- ? networkHandler.activeNetwork.currentViewNodes.length
- : 0
- }}
- </p>
- </div>
- </div>
- <div class="level-item has-text-centered">
- <div>
- <p class="heading">Edges</p>
- <p class="title">
- {{
- networkHandler.activeNetwork.currentViewEdges != null
- ? networkHandler.activeNetwork.currentViewEdges.length
- : 0
- }}
- </p>
- </div>
- </div>
- </nav>
- </div>
- </div>
- </div>
+ <app-network-overview *ngIf="drugstoneConfig.config.showOverview"></app-network-overview>
+
+
<div
*ngIf="drugstoneConfig.config.showQuery"
diff --git a/src/app/pages/explorer-page/explorer-page.component.ts b/src/app/pages/explorer-page/explorer-page.component.ts
index 0f8817df9c1b5365a9b704c210fa4bc7e994017b..5bc5533e21586af105d81bd93bc2da55c5feafc6 100644
--- a/src/app/pages/explorer-page/explorer-page.component.ts
+++ b/src/app/pages/explorer-page/explorer-page.component.ts
@@ -15,17 +15,15 @@ import {
Tissue,
Wrapper
} from '../../interfaces';
-import {ProteinNetwork, mapDrugstoneEdge} from '../../main-network';
-import {AnalysisService} from '../../services/analysis/analysis.service';
-import {OmnipathControllerService} from '../../services/omnipath-controller/omnipath-controller.service';
-import {NetworkSettings} from '../../network-settings';
-import {defaultConfig, EdgeGroup, NodeGroup} from '../../config';
-import {NetexControllerService} from 'src/app/services/netex-controller/netex-controller.service';
-import {removeDuplicateObjectsFromList} from '../../utils';
+import { ProteinNetwork, mapNetexEdge } from '../../main-network';
+import { AnalysisService } from '../../services/analysis/analysis.service';
+import { NetworkSettings } from '../../network-settings';
+import { defaultConfig, EdgeGroup, NodeGroup } from '../../config';
+import { NetexControllerService } from 'src/app/services/netex-controller/netex-controller.service';
import * as merge from 'lodash/fp/merge';
import * as JSON5 from 'json5';
-import {DrugstoneConfigService} from 'src/app/services/drugstone-config/drugstone-config.service';
-import {NetworkHandlerService} from 'src/app/services/network-handler/network-handler.service';
+import { DrugstoneConfigService } from 'src/app/services/drugstone-config/drugstone-config.service';
+import { NetworkHandlerService } from 'src/app/services/network-handler/network-handler.service';
declare var vis: any;
@@ -100,21 +98,20 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
public showDetails = false;
public collapseAnalysis = true;
- public collapseDetails = true;
public collapseTask = true;
public collapseSelection = true;
public collapseBaitFilter = true;
public collapseQuery = true;
public collapseData = true;
- public collapseOverview = true;
public proteinData: ProteinNetwork;
+ public edgeAttributes: Map<string, NodeInteraction>;
// public proteins: Node[];
// public edges: NodeInteraction[];
// this will store the vis Dataset
- public nodeData: { nodes: any, edges: any } = {nodes: null, edges: null};
+ public nodeData: { nodes: any, edges: any } = { nodes: null, edges: null };
public showAnalysisDialog = false;
public showThresholdDialog = false;
@@ -246,9 +243,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
this.networkHandler.networkSidebarOpen = this.drugstoneConfig.config.expandNetworkMenu;
// trigger updates on config e.g. in legend
if (this.drugstoneConfig.analysisConfig) {
- this.drugstoneConfig.analysisConfig = {...this.drugstoneConfig.analysisConfig};
+ this.drugstoneConfig.analysisConfig = { ...this.drugstoneConfig.analysisConfig };
} else {
- this.drugstoneConfig.config = {...this.drugstoneConfig.config};
+ this.drugstoneConfig.config = { ...this.drugstoneConfig.config };
}
if (updateNetworkFlag && typeof this.networkJSON !== 'undefined') {
// update network if network config has changed and networkJSON exists
@@ -301,7 +298,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
if (this.networkHandler.activeNetwork.networkPositions) {
this.proteinData.updateNodePositions(this.networkHandler.activeNetwork.networkPositions);
}
- let {nodes, edges} = this.proteinData.mapDataToNetworkInput(this.drugstoneConfig.currentConfig(), this.drugstoneConfig);
+ let { nodes, edges } = this.proteinData.mapDataToNetworkInput(this.drugstoneConfig.currentConfig(), this.drugstoneConfig);
if (this.drugstoneConfig.config.autofillEdges && nodes.length) {
let node_map = {};
nodes.filter(n => n.drugstoneType === 'protein').forEach(node => {
@@ -321,8 +318,8 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
});
}
});
- const drugstoneEdges = await this.netex.fetchEdges(nodes, this.drugstoneConfig.config.interactionProteinProtein, this.drugstoneConfig.config.licensedDatasets);
- edges.push(...drugstoneEdges.map(drugstoneEdge => mapDrugstoneEdge(drugstoneEdge, this.drugstoneConfig.currentConfig(), node_map)).flatMap(e => e));
+ 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 = {};
@@ -387,17 +384,26 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
}
}
});
+
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);
+ if (properties.nodes.length === 0 && properties.edges.length === 1) {
+ // clicked on one edge
+ const edgeId = properties.edges[0];
+ this.networkHandler.activeNetwork.openEdgeSummary(edgeId);
} else {
- this.closeSummary();
+ // clicked not on one edge
+ 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.openNodeSummary(wrapper, false);
+ } else {
+ this.closeSummary();
+ }
}
});
+
this.networkHandler.activeNetwork.networkInternal.on('deselectNode', (properties) => {
this.closeSummary();
});
@@ -434,7 +440,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
node.id = this.removeEnsemblVersion(node.id);
});
if (network.edges != null)
- // @ts-ignore
+ // @ts-ignore
{
network.edges.forEach(edge => {
edge.from = this.removeEnsemblVersion(edge.from);
@@ -482,7 +488,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
this.drugstoneConfig.smallStyle = this.windowWidth < 1250;
}
- public async openSummary(item: Wrapper, zoom: boolean) {
+ public async openNodeSummary(item: Wrapper, zoom: boolean) {
+ // close edge summary if open
+ this.networkHandler.activeNetwork.activeEdge = null;
this.networkHandler.activeNetwork.selectedWrapper = item;
// add expression information if loaded
if (this.networkHandler.activeNetwork.expressionMap && this.networkHandler.activeNetwork.selectedWrapper.id in this.networkHandler.activeNetwork.expressionMap) {
@@ -496,6 +504,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
public async closeSummary() {
this.networkHandler.activeNetwork.selectedWrapper = null;
+ this.networkHandler.activeNetwork.activeEdge = null;
this.showDetails = false;
}
@@ -505,7 +514,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
public queryAction(item: any) {
if (item) {
- this.openSummary(item, true);
+ this.openNodeSummary(item, true);
}
}
@@ -579,12 +588,12 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
* @param values
*/
public setConfigEdgeGroup(key: string, edgeGroups: {
- [key
- :
- string
- ]:
- EdgeGroup;
- }
+ [key
+ :
+ string
+ ]:
+ EdgeGroup;
+ }
) {
// make sure that default-groups are set
const defaultNodeGroups = JSON.parse(JSON.stringify(defaultConfig.edgeGroups));
@@ -652,7 +661,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
this.openExternal(url);
}
-//TODO change to access through network service
+ //TODO change to access through network service
@ViewChild('analysisPanel')
analysisPanel;
diff --git a/src/app/pages/explorer-page/network-overview/network-overview/network-overview.component.html b/src/app/pages/explorer-page/network-overview/network-overview/network-overview.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..0763e03b710e3779361551f5f14247a257f7867e
--- /dev/null
+++ b/src/app/pages/explorer-page/network-overview/network-overview/network-overview.component.html
@@ -0,0 +1,56 @@
+<div
+ class="card bar-large"
+ [ngClass]="{ 'b-text-small': drugstoneConfig.smallStyle }"
+>
+ <header class="card-header">
+ <p class="card-header-title">
+ <app-fa-solid-icon icon="info"></app-fa-solid-icon>
+ Network Overview
+ </p>
+ <a
+ (click)="collapseOverview = !collapseOverview"
+ data-action="collapse"
+ class="card-header-icon is-hidden-fullscreen"
+ aria-label="more options"
+ >
+ <app-fa-solid-icon
+ *ngIf="collapseOverview"
+ icon="angle-down"
+ ></app-fa-solid-icon>
+ <app-fa-solid-icon
+ *ngIf="!collapseOverview"
+ icon="angle-left"
+ ></app-fa-solid-icon>
+ </a>
+ </header>
+ <div *ngIf="collapseOverview">
+ <div class="card-content">
+ <nav class="level" >
+ <div class="level-item has-text-centered">
+ <div>
+ <p class="heading">Nodes</p>
+ <p class="title">
+ {{
+ networkHandler.activeNetwork.currentViewNodes != null
+ ? networkHandler.activeNetwork.currentViewNodes.length
+ : 0
+ }}
+ </p>
+ </div>
+ </div>
+ <div class="level-item has-text-centered">
+ <div>
+ <p class="heading">Edges</p>
+ <p class="title">
+ {{
+ networkHandler.activeNetwork.currentViewEdges != null
+ ? networkHandler.activeNetwork.currentViewEdges.length
+ : 0
+ }}
+ </p>
+ </div>
+ </div>
+ </nav>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/explorer-page/network-overview/network-overview/network-overview.component.scss b/src/app/pages/explorer-page/network-overview/network-overview/network-overview.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/pages/explorer-page/network-overview/network-overview/network-overview.component.spec.ts b/src/app/pages/explorer-page/network-overview/network-overview/network-overview.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..45ffff18c53725ceaf1299fbba3b36c2d092c2e8
--- /dev/null
+++ b/src/app/pages/explorer-page/network-overview/network-overview/network-overview.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NetworkOverviewComponent } from './network-overview.component';
+
+describe('NetworkOverviewComponent', () => {
+ let component: NetworkOverviewComponent;
+ let fixture: ComponentFixture<NetworkOverviewComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ NetworkOverviewComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(NetworkOverviewComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/pages/explorer-page/network-overview/network-overview/network-overview.component.ts b/src/app/pages/explorer-page/network-overview/network-overview/network-overview.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0cd954ce88d45a707db81db400837ce0607f5fd9
--- /dev/null
+++ b/src/app/pages/explorer-page/network-overview/network-overview/network-overview.component.ts
@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { AnalysisService } from 'src/app/services/analysis/analysis.service';
+import { DrugstoneConfigService } from 'src/app/services/drugstone-config/drugstone-config.service';
+import { NetexControllerService } from 'src/app/services/netex-controller/netex-controller.service';
+import { NetworkHandlerService } from 'src/app/services/network-handler/network-handler.service';
+
+@Component({
+ selector: 'app-network-overview',
+ templateUrl: './network-overview.component.html',
+ styleUrls: ['./network-overview.component.scss']
+})
+export class NetworkOverviewComponent implements OnInit {
+
+ constructor(
+ public analysis: AnalysisService,
+ public drugstoneConfig: DrugstoneConfigService,
+ public netex: NetexControllerService,
+ public networkHandler: NetworkHandlerService
+ ) { }
+
+ ngOnInit(): void {
+ }
+
+ collapseOverview = this.drugstoneConfig.config.showOverview;
+
+}
diff --git a/src/app/pages/explorer-page/summary-node/summary-node/summary-node.component.html b/src/app/pages/explorer-page/summary-node/summary-node/summary-node.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..d4101237a384c948e53b559efe9b4b03c2570ef3
--- /dev/null
+++ b/src/app/pages/explorer-page/summary-node/summary-node/summary-node.component.html
@@ -0,0 +1,80 @@
+<div class="card bar-large mt-0">
+ <header
+ class="card-header"
+ [ngClass]="{ 'b-text-small': drugstoneConfig.smallStyle }"
+ >
+ <p class="card-header-title">
+ <ng-container
+ *ngIf="
+ !networkHandler.activeNetwork.selectedWrapper &&
+ !networkHandler.activeNetwork.activeEdge
+ "
+ >
+ <app-fa-solid-icon icon="info"></app-fa-solid-icon>
+ <span> No item selected </span>
+ </ng-container>
+
+ <span
+ *ngIf="networkHandler.activeNetwork.selectedWrapper"
+ class="is-capitalized"
+ >
+ {{
+ drugstoneConfig.currentConfig().nodeGroups[
+ networkHandler.activeNetwork.selectedWrapper.data[
+ networkHandler.activeNetwork.selectedWrapper.data.group ===
+ "selectedNode"
+ ? "_group"
+ : "group"
+ ]
+ ].groupName
+ }}
+ </span>
+
+ <span
+ *ngIf="networkHandler.activeNetwork.activeEdge"
+ class="is-capitalized"
+ >
+ {{ networkHandler.activeNetwork.activeEdge.groupName }}
+ </span>
+ </p>
+ <a
+ (click)="collapseDetails = !collapseDetails"
+ data-action="collapse"
+ class="card-header-icon is-hidden-fullscreen"
+ aria-label="more options"
+ >
+ <app-fa-solid-icon
+ *ngIf="collapseDetails"
+ icon="angle-down"
+ ></app-fa-solid-icon>
+ <app-fa-solid-icon
+ *ngIf="!collapseDetails"
+ icon="angle-left"
+ ></app-fa-solid-icon>
+ </a>
+ </header>
+ <div *ngIf="collapseDetails">
+ <div class="card-content">
+ <app-info-tile
+ *ngIf="networkHandler.activeNetwork.selectedWrapper"
+ [expressions]="networkHandler.activeNetwork.expressionMap"
+ [wrapper]="networkHandler.activeNetwork.selectedWrapper"
+ ></app-info-tile>
+
+ <app-info-tile-edge
+ *ngIf="networkHandler.activeNetwork.activeEdge"
+ [edge]="networkHandler.activeNetwork.activeEdge"
+ ></app-info-tile-edge>
+
+ <p
+ *ngIf="
+ !networkHandler.activeNetwork.selectedWrapper &&
+ !networkHandler.activeNetwork.activeEdge
+ "
+ [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
+ >
+ Please select a node for further information.
+ </p>
+ </div>
+ </div>
+</div>
diff --git a/src/app/pages/explorer-page/summary-node/summary-node/summary-node.component.scss b/src/app/pages/explorer-page/summary-node/summary-node/summary-node.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/pages/explorer-page/summary-node/summary-node/summary-node.component.spec.ts b/src/app/pages/explorer-page/summary-node/summary-node/summary-node.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c55f480fc10e31229a35307769de41b60c6f176f
--- /dev/null
+++ b/src/app/pages/explorer-page/summary-node/summary-node/summary-node.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SummaryNodeComponent } from './summary-node.component';
+
+describe('SummaryNodeComponent', () => {
+ let component: SummaryNodeComponent;
+ let fixture: ComponentFixture<SummaryNodeComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ SummaryNodeComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SummaryNodeComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/pages/explorer-page/summary-node/summary-node/summary-node.component.ts b/src/app/pages/explorer-page/summary-node/summary-node/summary-node.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8bde839911ad99085496c80427663c40b5d52454
--- /dev/null
+++ b/src/app/pages/explorer-page/summary-node/summary-node/summary-node.component.ts
@@ -0,0 +1,25 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { AnalysisService } from 'src/app/services/analysis/analysis.service';
+import { DrugstoneConfigService } from 'src/app/services/drugstone-config/drugstone-config.service';
+import { NetexControllerService } from 'src/app/services/netex-controller/netex-controller.service';
+import { NetworkHandlerService } from 'src/app/services/network-handler/network-handler.service';
+
+@Component({
+ selector: 'app-summary-node',
+ templateUrl: './summary-node.component.html',
+ styleUrls: ['./summary-node.component.scss']
+})
+export class SummaryNodeComponent implements OnInit {
+
+ constructor(
+ public analysis: AnalysisService,
+ public drugstoneConfig: DrugstoneConfigService,
+ public netex: NetexControllerService,
+ public networkHandler: NetworkHandlerService
+ ) { }
+
+ ngOnInit(): void {
+ }
+
+ collapseDetails = true;
+}
diff --git a/src/index.html b/src/index.html
index dc08e199a74dd9cde978e8917dbbad5f01599de7..29c5785aedd1eb65bb698a97230f32d0b22cc1be 100644
--- a/src/index.html
+++ b/src/index.html
@@ -115,7 +115,7 @@ menu<br>
<drugst-one id="netexp1"
config="{'activateNetworkMenuButtonAdjacentDisorders':false,'activateNetworkMenuButtonAdjacentDrugs':false, 'activateNetworkMenuButtonAdjacentDisordersDrugs': false, 'licensedDatasets':true}"
groups='{"nodeGroups":{"important":{"type":"gene","color":"#ff881f","font":{"color":"#000000"},"groupName":"Important Gene","shape":"star"},"gene":{"type":"gene","color":"#4da300","font":{"color":"#f0f0f0"},"groupName":"Gene","shape":"circle"},"foundDrug":{"type":"drug","color":"#F12590","font":{"color":"#000000"},"groupName":"Drug","shape":"diamond"}},"edgeGroups":{"default":{"color":"#000000","groupName":"default edge"}}}'
- network='{"nodes":[{"id":"CFTR","group":"important","label":"CFTR"},{"id":"TGFB1","group":"gene","label":"TGFB1"},{"id":"TNFRSF1A","group":"gene","label":"TNFRSF1A"},{"id":"FCGR2A","group":"gene","label":"FCGR2A"},{"id":"ENG","group":"gene","label":"ENG"},{"id":"DCTN4","group":"gene","label":"DCTN4"},{"id":"CLCA4","group":"gene","label":"CLCA4"},{"id":"STX1A","group":"gene","label":"STX1A"},{"id":"SCNN1G","group":"gene","label":"SCNN1G"},{"id":"SCNN1A","group":"gene","label":"SCNN1A"},{"id":"SCNN1B","group":"gene","label":"SCNN1B"}],"edges":[{"from":"DCTN4","to":"CFTR"},{"from":"STX1A","to":"SCNN1B","group":"default"},{"from":"SCNN1A","to":"SCNN1G","group":"default"},{"from":"SCNN1B","to":"SCNN1G","group":"default"}]}'>
+ network='{"nodes":[{"id":"CFTr","group":"important","label":"CFTR"},{"id":"TGFB1","group":"gene","label":"TGFB1"},{"id":"TNFRSF1A","group":"gene","label":"TNFRSF1A"},{"id":"FCGR2A","group":"gene","label":"FCGR2A"},{"id":"ENG","group":"gene","label":"ENG"},{"id":"DCTN4","group":"gene","label":"DCTN4"},{"id":"CLCA4","group":"gene","label":"CLCA4"},{"id":"STX1A","group":"gene","label":"STX1A"},{"id":"SCNN1G","group":"gene","label":"SCNN1G"},{"id":"SCNN1A","group":"gene","label":"SCNN1A"},{"id":"SCNN1B","group":"gene","label":"SCNN1B"}],"edges":[{"from":"DCTN4","to":"CFTR", "weight": "5"},{"from":"STX1A","to":"SCNN1B","group":"default"},{"from":"SCNN1A","to":"SCNN1G","group":"default"},{"from":"SCNN1B","to":"SCNN1G","group":"default"}]}'>
></drugst-one>
<!-- <drugst-one id="netexp1"-->