diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index c6df78bde8fb03947251684c1f297928d757298a..ca8e0debe4a65f2189194533b40a02e644c155c4 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -23,7 +23,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
import { AnalysisService } from './services/analysis/analysis.service';
import { AddExpressedProteinsComponent } from './dialogs/add-expressed-proteins/add-expressed-proteins.component';
import { createCustomElement } from '@angular/elements';
-import { NetworkLegendComponent } from './components/network-legend/network-legend.component';
+import { NetworkLegendComponent } from './components/network/network-legend/network-legend.component';
import { ProtTableComponent } from './components/analysis-panel/prot-table/prot-table.component';
import { DrugTableComponent } from './components/analysis-panel/drug-table/drug-table.component';
@@ -34,7 +34,7 @@ import {
faRulerVertical, faDna, faMicroscope, faBook, faPause, faTrash, faSpinner, faExclamationTriangle, faPlus,
faExpand, faInfo, faRocket, faAngleDown, faSearch, faFastForward, faExternalLinkAlt, faTasks, faFilter,
faMinus, faUpload, faAngleDoubleDown, faSync, faBroom, faAngleDoubleUp, faChild, faHeadSideMask, faBiohazard,
- faBullseye, faSeedling
+ faBullseye, faSeedling, faSyncAlt
} from '@fortawesome/free-solid-svg-icons';
import { TooltipModule } from 'primeng/tooltip';
import { NetworkMenuComponent } from './components/network/network-menu/network-menu.component';
@@ -43,6 +43,10 @@ import { ToggleInplaceComponent } from './components/network/network-menu/toggle
import { NetworkMenuLeftComponent } from './components/network/network-menu-left/network-menu-left.component';
import { ToggleInplaceReversedComponent } from './components/network/network-menu-left/toggle-inplace-reversed/toggle-inplace-reversed.component';
import { DownloadButtonInverseComponent } from './components/network/network-menu-left/download-button-inverse/download-button-inverse.component';
+import { NetworkControlComponent } from './components/network-control/network-control.component';
+import { CenterViewComponent } from './components/network/network-menu/center-view/center-view.component';
+import { CenterViewInverseComponent } from './components/network/network-menu-left/center-view-inverse/center-view-inverse.component';
+
@NgModule({
declarations: [
@@ -66,6 +70,9 @@ import { DownloadButtonInverseComponent } from './components/network/network-men
NetworkMenuLeftComponent,
ToggleInplaceReversedComponent,
DownloadButtonInverseComponent,
+ NetworkControlComponent,
+ CenterViewComponent,
+ CenterViewInverseComponent,
],
imports: [
BrowserModule,
@@ -90,7 +97,7 @@ export class AppModule {
faCheck, faCamera, faDownload, faRulerVertical, faDna, faMicroscope, faBook, faPause, faTrash,
faSpinner, faExclamationTriangle, faPlus, faExpand, faInfo, faRocket, faAngleDown, faSearch,
faFastForward, faExternalLinkAlt, faTasks, faFilter, faMinus, faUpload, faAngleDoubleDown,
- faSync, faBroom, faAngleDoubleUp, faChild, faHeadSideMask, faBiohazard, faBullseye, faSeedling);
+ faSync, faBroom, faAngleDoubleUp, faChild, faHeadSideMask, faBiohazard, faBullseye, faSeedling, faSyncAlt);
const NetworkExpander = createCustomElement(ExplorerPageComponent, { injector });
// Register the custom element with the browser.
customElements.define('drugst-one', NetworkExpander);
diff --git a/src/app/components/network-control/network-control.component.html b/src/app/components/network-control/network-control.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..a5986389cee18722c667c8ff97de6f35fb65945e
--- /dev/null
+++ b/src/app/components/network-control/network-control.component.html
@@ -0,0 +1,3 @@
+<div>
+ <button (click)="fitNetwork()">fit network</button>
+</div>
diff --git a/src/app/components/network-control/network-control.component.scss b/src/app/components/network-control/network-control.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/components/network-control/network-control.component.spec.ts b/src/app/components/network-control/network-control.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..278188373ad9f8bb959543d471a321b68326505d
--- /dev/null
+++ b/src/app/components/network-control/network-control.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NetworkControlComponent } from './network-control.component';
+
+describe('NetworkControlComponent', () => {
+ let component: NetworkControlComponent;
+ let fixture: ComponentFixture<NetworkControlComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ NetworkControlComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(NetworkControlComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/network-control/network-control.component.ts b/src/app/components/network-control/network-control.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..95aa6edec62db3c63d191748535f2236f479382a
--- /dev/null
+++ b/src/app/components/network-control/network-control.component.ts
@@ -0,0 +1,20 @@
+import { Component, OnInit } from '@angular/core';
+import { NetworkHandlerService } from 'src/app/services/network-handler/network-handler.service';
+
+@Component({
+ selector: 'app-network-control',
+ templateUrl: './network-control.component.html',
+ styleUrls: ['./network-control.component.scss']
+})
+export class NetworkControlComponent implements OnInit {
+
+ constructor(public networkHandler: NetworkHandlerService) { }
+
+ ngOnInit(): void {
+ }
+
+ public fitNetwork() {
+ this.networkHandler.activeNetwork.networkInternal.fit();
+ }
+
+}
diff --git a/src/app/components/network-legend/network-legend.component.html b/src/app/components/network-legend/network-legend.component.html
deleted file mode 100644
index adde137d9a403e4cb676405d66cec9b0ae732820..0000000000000000000000000000000000000000
--- a/src/app/components/network-legend/network-legend.component.html
+++ /dev/null
@@ -1,84 +0,0 @@
-
-
-<div class="legend" [class.right]="this.config.legendPos === 'right'" [ngClass]="{ 'legend-small': drugstoneConfig.smallStyle }">
- <div class="legend-background"></div>
- <!-- default legend in html -->
- <table *ngIf="!this.config.legendUrl.length" class="legend-table">
- <ng-container *ngIf="this.config.showLegendNodes">
- <tr *ngFor="let nodeGroup of this.config.nodeGroups | keyvalue" class="list-item">
-
- <ng-container *ngIf="nodeGroup.key && checkNodeGroupContext(nodeGroup.key)">
- <ng-container *ngIf="nodeGroup.value.image">
- <!-- group icon given, use icon in legend -->
- <th>
- <img [src]="nodeGroup.value.image" class="legend-icon"/>
- </th>
- <td class="group-name"> {{ nodeGroup.value.groupName }}</td>
- </ng-container>
-
- <ng-container *ngIf="!nodeGroup.value.image" [ngSwitch]="nodeGroup.value.shape">
- <!-- no image given, create icon programmatically -->
- <th *ngSwitchCase="'text'">
- <span class="node text">
- text
- </span>
- </th>
- <th *ngSwitchCase="'hexagon'">
- <span class="node hexagon" [style.color]=nodeGroup.value.color.background>
- ⬣
- </span>
- </th>
- <th *ngSwitchCase="'triangle'">
- <span class="node triangle" [style.border-bottom-color]=nodeGroup.value.color.background>
- </span>
- </th>
- <th *ngSwitchCase="'triangleDown'">
- <span class="node triangleDown" [style.border-top-color]=nodeGroup.value.color.background>
- </span>
- </th>
- <th *ngSwitchCase="'diamond'">
- <span class="node diamond"
- [style.background-color]=nodeGroup.value.color.background
- >
- </span>
- </th>
- <th *ngSwitchCase="'star'">
- <span class="node star"
- [style.border-bottom-color]=nodeGroup.value.color.background
- [style.color]=nodeGroup.value.color.background
- >
- </span>
- </th>
- <th *ngSwitchCase="'circle'">
- <span class="node circle" [style.background-color]=nodeGroup.value.color.background>
- ...
- </span>
- </th>
- <th *ngSwitchDefault>
- <span class="node {{ nodeGroup.value.shape }}" [style.background-color]=nodeGroup.value.color.background>
- </span>
- </th>
- <td class="group-name"> {{ nodeGroup.value.groupName }}</td>
- </ng-container>
- </ng-container>
- </tr>
- </ng-container>
-
- <ng-container *ngIf="this.config.showLegendEdges">
- <tr *ngFor="let edgeGroup of this.config.edgeGroups | keyvalue" class="list-item">
- <ng-container *ngIf="edgeGroup.key && checkEdgeGroupContext(edgeGroup.key)">
- <th>
- <hr *ngIf="!edgeGroup.value.dashes" class="edge" [style.background-color]=edgeGroup.value.color>
- <hr *ngIf="edgeGroup.value.dashes" class="edge dashes" [style.color]=edgeGroup.value.color>
- </th>
- <td class="group-name"> {{ edgeGroup.value.groupName }}</td>
- </ng-container>
- </tr>
- </ng-container>
- </table>
-
-
- <!-- custom legend image if url given by user -->
- <img *ngIf="this.config.legendUrl.length" [src]="this.config.legendUrl" [ngClass]="this.config.legendClass"/>
-
-</div>
diff --git a/src/app/components/network/network-legend/network-legend.component.html b/src/app/components/network/network-legend/network-legend.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..f2e488ed086b8dca0649f0e4ac1454b15ae9bd94
--- /dev/null
+++ b/src/app/components/network/network-legend/network-legend.component.html
@@ -0,0 +1,123 @@
+<div
+ class="legend"
+ [class.right]="this.config.legendPos === 'right'"
+ [ngClass]="{ 'legend-small': drugstoneConfig.smallStyle }"
+>
+ <div class="legend-background"></div>
+ <!-- default legend in html -->
+ <table *ngIf="!this.config.legendUrl.length" class="legend-table">
+ <ng-container *ngIf="this.config.showLegendNodes">
+ <tr
+ *ngFor="let nodeGroup of this.config.nodeGroups | keyvalue"
+ class="list-item"
+ >
+ <ng-container
+ *ngIf="nodeGroup.key && checkNodeGroupContext(nodeGroup.key)"
+ >
+ <ng-container *ngIf="nodeGroup.value.image">
+ <!-- group icon given, use icon in legend -->
+ <th>
+ <img [src]="nodeGroup.value.image" class="legend-icon" />
+ </th>
+ <td class="group-name"> {{ nodeGroup.value.groupName }}</td>
+ </ng-container>
+
+ <ng-container
+ *ngIf="!nodeGroup.value.image"
+ [ngSwitch]="nodeGroup.value.shape"
+ >
+ <!-- no image given, create icon programmatically -->
+ <th *ngSwitchCase="'text'">
+ <span class="node text"> text </span>
+ </th>
+ <th *ngSwitchCase="'hexagon'">
+ <span
+ class="node hexagon"
+ [style.color]="nodeGroup.value.color.background"
+ >
+ ⬣
+ </span>
+ </th>
+ <th *ngSwitchCase="'triangle'">
+ <span
+ class="node triangle"
+ [style.border-bottom-color]="nodeGroup.value.color.background"
+ >
+ </span>
+ </th>
+ <th *ngSwitchCase="'triangleDown'">
+ <span
+ class="node triangleDown"
+ [style.border-top-color]="nodeGroup.value.color.background"
+ >
+ </span>
+ </th>
+ <th *ngSwitchCase="'diamond'">
+ <span
+ class="node diamond"
+ [style.background-color]="nodeGroup.value.color.background"
+ >
+ </span>
+ </th>
+ <th *ngSwitchCase="'star'">
+ <span
+ class="node star"
+ [style.border-bottom-color]="nodeGroup.value.color.background"
+ [style.color]="nodeGroup.value.color.background"
+ >
+ </span>
+ </th>
+ <th *ngSwitchCase="'circle'">
+ <span
+ class="node circle"
+ [style.background-color]="nodeGroup.value.color.background"
+ >
+ ...
+ </span>
+ </th>
+ <th *ngSwitchDefault>
+ <span
+ class="node {{ nodeGroup.value.shape }}"
+ [style.background-color]="nodeGroup.value.color.background"
+ >
+ </span>
+ </th>
+ <td class="group-name"> {{ nodeGroup.value.groupName }}</td>
+ </ng-container>
+ </ng-container>
+ </tr>
+ </ng-container>
+
+ <ng-container *ngIf="this.config.showLegendEdges">
+ <tr
+ *ngFor="let edgeGroup of this.config.edgeGroups | keyvalue"
+ class="list-item"
+ >
+ <ng-container
+ *ngIf="edgeGroup.key && checkEdgeGroupContext(edgeGroup.key)"
+ >
+ <th>
+ <hr
+ *ngIf="!edgeGroup.value.dashes"
+ class="edge"
+ [style.background-color]="edgeGroup.value.color"
+ />
+ <hr
+ *ngIf="edgeGroup.value.dashes"
+ class="edge dashes"
+ [style.color]="edgeGroup.value.color"
+ />
+ </th>
+ <td class="group-name"> {{ edgeGroup.value.groupName }}</td>
+ </ng-container>
+ </tr>
+ </ng-container>
+ </table>
+
+ <!-- custom legend image if url given by user -->
+ <img
+ *ngIf="this.config.legendUrl.length"
+ [src]="this.config.legendUrl"
+ [ngClass]="this.config.legendClass"
+ />
+</div>
diff --git a/src/app/components/network-legend/network-legend.component.scss b/src/app/components/network/network-legend/network-legend.component.scss
similarity index 100%
rename from src/app/components/network-legend/network-legend.component.scss
rename to src/app/components/network/network-legend/network-legend.component.scss
diff --git a/src/app/components/network-legend/network-legend.component.spec.ts b/src/app/components/network/network-legend/network-legend.component.spec.ts
similarity index 100%
rename from src/app/components/network-legend/network-legend.component.spec.ts
rename to src/app/components/network/network-legend/network-legend.component.spec.ts
diff --git a/src/app/components/network-legend/network-legend.component.ts b/src/app/components/network/network-legend/network-legend.component.ts
similarity index 97%
rename from src/app/components/network-legend/network-legend.component.ts
rename to src/app/components/network/network-legend/network-legend.component.ts
index cc42a71e400290e079953efd3272bf34216a3f04..8c8c89b514bc870ecca3bc9ecce9066b3dc91e15 100644
--- a/src/app/components/network-legend/network-legend.component.ts
+++ b/src/app/components/network/network-legend/network-legend.component.ts
@@ -1,7 +1,7 @@
import {Component, Input, OnInit} from '@angular/core';
import { LegendContext } from 'src/app/interfaces';
import { DrugstoneConfigService } from 'src/app/services/drugstone-config/drugstone-config.service';
-import {IConfig} from '../../config';
+import {IConfig} from '../../../config';
@Component({
selector: 'app-network-legend',
diff --git a/src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.html b/src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..a678b223ac754e8d47205d9388b54727954828b2
--- /dev/null
+++ b/src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.html
@@ -0,0 +1,21 @@
+<button
+ (click)="fitNetwork()"
+ class="button is-primary is-rounded has-tooltip"
+ pTooltip="Reset the network zoom and position."
+ [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
+ tooltipPosition="right"
+ [ngClass]="{
+ 'is-small': drugstoneConfig.smallStyle
+ }"
+>
+ <span
+ [ngClass]="{
+ 'text-normal': drugstoneConfig.smallStyle
+ }"
+ >
+ Reset View
+ </span>
+ <span class="icon">
+ <i class="fas fa-sync-alt" aria-hidden="true"></i>
+ </span>
+</button>
diff --git a/src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.scss b/src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.spec.ts b/src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f56ebb6961519e0eee7360d553c650b33b301e94
--- /dev/null
+++ b/src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CenterViewInverseComponent } from './center-view-inverse.component';
+
+describe('CenterViewInverseComponent', () => {
+ let component: CenterViewInverseComponent;
+ let fixture: ComponentFixture<CenterViewInverseComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ CenterViewInverseComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CenterViewInverseComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.ts b/src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..37464a4ec6d3e39a8fa2729b6f699c1dabff93f7
--- /dev/null
+++ b/src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+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-center-view-inverse',
+ templateUrl: './center-view-inverse.component.html',
+ styleUrls: ['./center-view-inverse.component.scss']
+})
+export class CenterViewInverseComponent implements OnInit {
+
+ constructor(public networkHandler: NetworkHandlerService, public drugstoneConfig: DrugstoneConfigService) { }
+
+ ngOnInit(): void {
+ }
+
+ public fitNetwork() {
+ this.networkHandler.activeNetwork.networkInternal.fit();
+ }
+
+}
diff --git a/src/app/components/network/network-menu-left/network-menu-left.component.html b/src/app/components/network/network-menu-left/network-menu-left.component.html
index 8dcfff7f443ceaed4ad69d12f6518b882fbc9532..c251083c4e2e7f682a275259049c664f3ecbee94 100644
--- a/src/app/components/network/network-menu-left/network-menu-left.component.html
+++ b/src/app/components/network/network-menu-left/network-menu-left.component.html
@@ -30,6 +30,14 @@
icon="fas fa-seedling"
></app-toggle-inplace-reversed>
</div>
+ <div
+ class="row is-full m-1 is-pulled-right"
+ *ngIf="drugstoneConfig.config.showNetworkMenuButtonScreenshot"
+ >
+ <div class="network-footer-toolbar-element">
+ <app-center-view-inverse></app-center-view-inverse>
+ </div>
+ </div>
<div
class="row is-full m-1 is-pulled-right"
*ngIf="drugstoneConfig.config.showNetworkMenuButtonScreenshot"
diff --git a/src/app/components/network/network-menu/center-view/center-view.component.html b/src/app/components/network/network-menu/center-view/center-view.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..989e2372860bf86c2820811d99628ac7120e4254
--- /dev/null
+++ b/src/app/components/network/network-menu/center-view/center-view.component.html
@@ -0,0 +1,20 @@
+<button
+ (click)="fitNetwork()"
+ class="button is-primary is-rounded has-tooltip"
+ pTooltip="Reset the network zoom and position."
+ [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
+ tooltipPosition="left"
+ [ngClass]="{
+ 'is-small': drugstoneConfig.smallStyle
+ }"
+>
+ <span class="icon">
+ <i class="fas fa-sync-alt" aria-hidden="true"></i>
+ </span>
+ <span
+ [ngClass]="{
+ 'text-normal': drugstoneConfig.smallStyle
+ }"
+ >Reset View</span
+ >
+</button>
diff --git a/src/app/components/network/network-menu/center-view/center-view.component.scss b/src/app/components/network/network-menu/center-view/center-view.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/app/components/network/network-menu/center-view/center-view.component.spec.ts b/src/app/components/network/network-menu/center-view/center-view.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..cf2340038b640fef58c42fde0332ed0163e99fac
--- /dev/null
+++ b/src/app/components/network/network-menu/center-view/center-view.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CenterViewComponent } from './center-view.component';
+
+describe('CenterViewComponent', () => {
+ let component: CenterViewComponent;
+ let fixture: ComponentFixture<CenterViewComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ CenterViewComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CenterViewComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/components/network/network-menu/center-view/center-view.component.ts b/src/app/components/network/network-menu/center-view/center-view.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..734fcf925d13e2bb7bb2d547549c563e94234b88
--- /dev/null
+++ b/src/app/components/network/network-menu/center-view/center-view.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+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-center-view',
+ templateUrl: './center-view.component.html',
+ styleUrls: ['./center-view.component.scss']
+})
+export class CenterViewComponent implements OnInit {
+
+ constructor(public networkHandler: NetworkHandlerService, public drugstoneConfig: DrugstoneConfigService) { }
+
+ ngOnInit(): void {
+ }
+
+ public fitNetwork() {
+ this.networkHandler.activeNetwork.networkInternal.fit();
+ }
+
+}
diff --git a/src/app/components/network/network-menu/network-menu.component.html b/src/app/components/network/network-menu/network-menu.component.html
index 5a9b5a1ffce2cce437d7c5037d11b4a7b6c262dd..5fe50c46f26a47fe6853b1c19cdb4eeaf961d99f 100644
--- a/src/app/components/network/network-menu/network-menu.component.html
+++ b/src/app/components/network/network-menu/network-menu.component.html
@@ -32,201 +32,200 @@
</div>
<div
class="row is-full m-1"
- *ngIf="drugstoneConfig.config.showNetworkMenuButtonScreenshot"
+ *ngIf="drugstoneConfig.config.showNetworkMenuButtonCenter"
>
<div class="network-footer-toolbar-element">
+ <app-center-view></app-center-view>
+ </div>
+ </div>
+ </div>
+ <div
+ class="row is-full m-1"
+ *ngIf="drugstoneConfig.config.showNetworkMenuButtonScreenshot"
+ >
+ <div class="network-footer-toolbar-element">
+ <button
+ (click)="networkHandler.activeNetwork.toImage()"
+ class="button is-primary is-rounded has-tooltip"
+ pTooltip="Take a screenshot of the current network."
+ [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
+ tooltipPosition="left"
+ [ngClass]="{
+ 'is-small': drugstoneConfig.smallStyle
+ }"
+ >
+ <span class="icon">
+ <i class="fas fa-camera" aria-hidden="true"></i>
+ </span>
+ <span
+ [ngClass]="{
+ 'text-normal': drugstoneConfig.smallStyle
+ }"
+ >Screenshot</span
+ >
+ </button>
+ </div>
+ </div>
+ <div
+ class="row is-full m-1"
+ *ngIf="drugstoneConfig.config.showNetworkMenuButtonExportGraphml"
+ >
+ <div class="network-footer-toolbar-element">
+ <app-download-button
+ [nodeData]="networkHandler.activeNetwork.nodeData"
+ [buttonId]="'explorer-download'"
+ ></app-download-button>
+ </div>
+ </div>
+ <div
+ class="row is-full m-1"
+ *ngIf="drugstoneConfig.config.showNetworkMenuButtonExpression"
+ >
+ <div
+ class="dropdown network-footer-toolbar-element"
+ [class.is-active]="networkHandler.activeNetwork.expressionExpanded"
+ >
+ <div class="dropdown-trigger">
<button
- (click)="networkHandler.activeNetwork.toImage()"
- class="button is-primary is-rounded has-tooltip"
- pTooltip="Take a screenshot of the current network."
+ (click)="
+ networkHandler.activeNetwork.expressionExpanded =
+ !networkHandler.activeNetwork.expressionExpanded
+ "
+ class="button is-rounded is-primary"
+ [class.is-outlined]="!networkHandler.activeNetwork.selectedTissue"
+ aria-haspopup="true"
+ aria-controls="dropdown-menu"
+ pTooltip="Tissue expression data is provided by the GTEx project."
[tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
tooltipPosition="left"
[ngClass]="{
'is-small': drugstoneConfig.smallStyle
}"
>
- <span class="icon">
- <i class="fas fa-camera" aria-hidden="true"></i>
+ <span class="icon is-small">
+ <i class="fas fa-child"></i>
</span>
<span
+ *ngIf="!networkHandler.activeNetwork.selectedTissue"
[ngClass]="{
- 'text-normal': drugstoneConfig.smallStyle
+ 'text-small': drugstoneConfig.smallStyle
}"
- >Screenshot</span
+ >Tissue</span
>
- </button>
- </div>
- </div>
- <div
- class="row is-full m-1"
- *ngIf="drugstoneConfig.config.showNetworkMenuButtonExportGraphml"
- >
- <div class="network-footer-toolbar-element">
- <app-download-button
- [nodeData]="networkHandler.activeNetwork.nodeData"
- [buttonId]="'explorer-download'"
- ></app-download-button>
- </div>
- </div>
- <div
- class="row is-full m-1"
- *ngIf="drugstoneConfig.config.showNetworkMenuButtonExpression"
- >
- <div
- class="dropdown network-footer-toolbar-element"
- [class.is-active]="networkHandler.activeNetwork.expressionExpanded"
- >
- <div class="dropdown-trigger">
- <button
- (click)="
- networkHandler.activeNetwork.expressionExpanded =
- !networkHandler.activeNetwork.expressionExpanded
- "
- class="button is-rounded is-primary"
- [class.is-outlined]="!networkHandler.activeNetwork.selectedTissue"
- aria-haspopup="true"
- aria-controls="dropdown-menu"
- pTooltip="Tissue expression data is provided by the GTEx project."
- [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
- tooltipPosition="left"
+ <span
+ *ngIf="networkHandler.activeNetwork.selectedTissue"
[ngClass]="{
- 'is-small': drugstoneConfig.smallStyle
+ 'text-small': drugstoneConfig.smallStyle
}"
+ >{{ networkHandler.activeNetwork.selectedTissue.name }}</span
>
- <span class="icon is-small">
- <i class="fas fa-child"></i>
- </span>
- <span
- *ngIf="!networkHandler.activeNetwork.selectedTissue"
- [ngClass]="{
- 'text-small': drugstoneConfig.smallStyle
- }"
- >Tissue</span
- >
- <span
- *ngIf="networkHandler.activeNetwork.selectedTissue"
- [ngClass]="{
- 'text-small': drugstoneConfig.smallStyle
- }"
- >{{ networkHandler.activeNetwork.selectedTissue.name }}</span
- >
- <span
- *ngIf="networkHandler.activeNetwork.expressionExpanded"
- class="icon is-small"
+ <span
+ *ngIf="networkHandler.activeNetwork.expressionExpanded"
+ class="icon is-small"
+ >
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
+ </span>
+ <span
+ *ngIf="!networkHandler.activeNetwork.expressionExpanded"
+ class="icon is-small"
+ >
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
+ </span>
+ </button>
+ </div>
+ <div class="dropdown-menu" id="dropdown-menu" role="menu">
+ <div class="dropdown-content tissue-dropdown">
+ <div class="scroll-area">
+ <a
+ (click)="networkHandler.activeNetwork.selectTissue(null)"
+ [class.is-active]="!networkHandler.activeNetwork.selectedTissue"
+ class="dropdown-item"
>
- <i class="fas fa-angle-down" aria-hidden="true"></i>
- </span>
- <span
- *ngIf="!networkHandler.activeNetwork.expressionExpanded"
- class="icon is-small"
+ None
+ </a>
+ <a
+ *ngFor="
+ let tissue of networkHandler.activeNetwork.analysis.getTissues()
+ "
+ (click)="networkHandler.activeNetwork.selectTissue(tissue)"
+ [class.is-active]="
+ networkHandler.activeNetwork.selectedTissue &&
+ tissue.netexId ===
+ networkHandler.activeNetwork.selectedTissue.netexId
+ "
+ class="dropdown-item"
>
- <i class="fas fa-angle-left" aria-hidden="true"></i>
- </span>
- </button>
- </div>
- <div class="dropdown-menu" id="dropdown-menu" role="menu">
- <div class="dropdown-content tissue-dropdown">
- <div class="scroll-area">
- <a
- (click)="networkHandler.activeNetwork.selectTissue(null)"
- [class.is-active]="
- !networkHandler.activeNetwork.selectedTissue
- "
- class="dropdown-item"
- >
- None
- </a>
- <a
- *ngFor="
- let tissue of networkHandler.activeNetwork.analysis.getTissues()
- "
- (click)="networkHandler.activeNetwork.selectTissue(tissue)"
- [class.is-active]="
- networkHandler.activeNetwork.selectedTissue &&
- tissue.netexId ===
- networkHandler.activeNetwork.selectedTissue.netexId
- "
- class="dropdown-item"
- >
- {{ tissue.name }}
- </a>
- </div>
+ {{ tissue.name }}
+ </a>
</div>
</div>
</div>
</div>
- <div
- class="row is-full m-1"
- *ngIf="drugstoneConfig.config.showNetworkMenuButtonAdjacentDrugs"
- >
- <app-toggle-inplace
- class="network-footer-toolbar-element"
- text="{{
- drugstoneConfig.config.networkMenuButtonAdjacentDrugsLabel
- }}"
- icon="fas fa-capsules"
- tooltip="Display adjacent drugs."
- [value]="networkHandler.activeNetwork.adjacentDrugs"
- (valueChange)="
- networkHandler.activeNetwork.updateAdjacentDrugs($event)
- "
- ></app-toggle-inplace>
- </div>
- <div
- class="row is-full m-1"
- *ngIf="
- drugstoneConfig.config.showNetworkMenuButtonAdjacentDisordersProteins
+ </div>
+ <div
+ class="row is-full m-1"
+ *ngIf="drugstoneConfig.config.showNetworkMenuButtonAdjacentDrugs"
+ >
+ <app-toggle-inplace
+ class="network-footer-toolbar-element"
+ text="{{ drugstoneConfig.config.networkMenuButtonAdjacentDrugsLabel }}"
+ icon="fas fa-capsules"
+ tooltip="Display adjacent drugs."
+ [value]="networkHandler.activeNetwork.adjacentDrugs"
+ (valueChange)="networkHandler.activeNetwork.updateAdjacentDrugs($event)"
+ ></app-toggle-inplace>
+ </div>
+ <div
+ class="row is-full m-1"
+ *ngIf="
+ drugstoneConfig.config.showNetworkMenuButtonAdjacentDisordersProteins
+ "
+ >
+ <app-toggle-inplace
+ class="network-footer-toolbar-element"
+ text="{{
+ drugstoneConfig.config.networkMenuButtonAdjacentDisordersProteinsLabel
+ }}"
+ tooltip="Show disorders adjacent to all currently displayed proteins/genes."
+ [value]="networkHandler.activeNetwork.adjacentDisordersProtein"
+ (valueChange)="
+ networkHandler.activeNetwork.updateAdjacentProteinDisorders($event)
"
- >
- <app-toggle-inplace
- class="network-footer-toolbar-element"
- text="{{
- drugstoneConfig.config
- .networkMenuButtonAdjacentDisordersProteinsLabel
- }}"
- tooltip="Show disorders adjacent to all currently displayed proteins/genes."
- [value]="networkHandler.activeNetwork.adjacentDisordersProtein"
- (valueChange)="
- networkHandler.activeNetwork.updateAdjacentProteinDisorders($event)
- "
- icon="fas fa-head-side-mask"
- ></app-toggle-inplace>
- </div>
- <div
- class="row is-full m-1"
- *ngIf="
- drugstoneConfig.config.showNetworkMenuButtonAdjacentDisordersDrugs
+ icon="fas fa-head-side-mask"
+ ></app-toggle-inplace>
+ </div>
+ <div
+ class="row is-full m-1"
+ *ngIf="drugstoneConfig.config.showNetworkMenuButtonAdjacentDisordersDrugs"
+ >
+ <app-toggle-inplace
+ class="network-footer-toolbar-element"
+ text="{{
+ drugstoneConfig.config.networkMenuButtonAdjacentDisordersDrugsLabel
+ }}"
+ tooltip="Show disorders adjacent to all currently displayed drugs."
+ [value]="networkHandler.activeNetwork.adjacentDisordersDrug"
+ [disabled]="!networkHandler.activeNetwork.hasDrugsLoaded()"
+ (valueChange)="
+ networkHandler.activeNetwork.updateAdjacentDrugDisorders($event)
"
- >
- <app-toggle-inplace
- class="network-footer-toolbar-element"
- text="{{
- drugstoneConfig.config.networkMenuButtonAdjacentDisordersDrugsLabel
- }}"
- tooltip="Show disorders adjacent to all currently displayed drugs."
- [value]="networkHandler.activeNetwork.adjacentDisordersDrug"
- [disabled]="!networkHandler.activeNetwork.hasDrugsLoaded()"
- (valueChange)="
- networkHandler.activeNetwork.updateAdjacentDrugDisorders($event)
- "
- icon="fas fa-biohazard"
- ></app-toggle-inplace>
- </div>
- <div
- class="row is-full m-1"
- *ngIf="drugstoneConfig.config.showNetworkMenuButtonAnimation"
- >
- <app-toggle-inplace
- class="network-footer-toolbar-element"
- text="{{ drugstoneConfig.config.networkMenuButtonAnimationLabel }}"
- tooltip="Toggle the network animation."
- [value]="drugstoneConfig.config.physicsOn"
- (valueChange)="
- networkHandler.activeNetwork.updatePhysicsEnabled($event)
- "
- icon="fas fa-bullseye"
- ></app-toggle-inplace>
- </div>
+ icon="fas fa-biohazard"
+ ></app-toggle-inplace>
+ </div>
+ <div
+ class="row is-full m-1"
+ *ngIf="drugstoneConfig.config.showNetworkMenuButtonAnimation"
+ >
+ <app-toggle-inplace
+ class="network-footer-toolbar-element"
+ text="{{ drugstoneConfig.config.networkMenuButtonAnimationLabel }}"
+ tooltip="Toggle the network animation."
+ [value]="drugstoneConfig.config.physicsOn"
+ (valueChange)="
+ networkHandler.activeNetwork.updatePhysicsEnabled($event)
+ "
+ icon="fas fa-bullseye"
+ ></app-toggle-inplace>
</div>
</div>
</div>
diff --git a/src/app/config.ts b/src/app/config.ts
index cbf90bf60a03617f0ad803f7b649aa588a7938b1..0045a293e3dca091db260df7f985c1d5992736a7 100644
--- a/src/app/config.ts
+++ b/src/app/config.ts
@@ -50,6 +50,7 @@ export interface IConfig {
showNetworkMenuButtonScreenshot: boolean;
showNetworkMenuButtonExportGraphml: boolean;
showNetworkMenuButtonAdjacentDrugs: boolean;
+ showNetworkMenuButtonCenter: boolean;
networkMenuButtonAdjacentDrugsLabel: string;
showNetworkMenuButtonAdjacentDisordersProteins: boolean;
networkMenuButtonAdjacentDisordersProteinsLabel: string;
@@ -98,6 +99,7 @@ export const defaultConfig: IConfig = {
showNetworkMenuButtonScreenshot: true,
showNetworkMenuButtonExportGraphml: true,
showNetworkMenuButtonAdjacentDrugs: true,
+ showNetworkMenuButtonCenter: true,
networkMenuButtonAdjacentDrugsLabel: 'Drugs',
showNetworkMenuButtonAdjacentDisordersProteins: true,
networkMenuButtonAdjacentDisordersProteinsLabel: 'Disorders (protein)',
diff --git a/src/app/network-settings.ts b/src/app/network-settings.ts
index e68a102a62f49822a20557851e0f7a27cd5caf77..ddd420a38ebaafb998b54eb535f86f2eadae1ecb 100644
--- a/src/app/network-settings.ts
+++ b/src/app/network-settings.ts
@@ -1,8 +1,8 @@
-import {getGradientColor} from './utils';
+import { getGradientColor } from './utils';
import {
Node,
} from './interfaces';
-import { IConfig, defaultConfig} from './config';
+import { IConfig, defaultConfig } from './config';
import * as merge from 'lodash/fp/merge';
export class NetworkSettings {
@@ -53,10 +53,10 @@ export class NetworkSettings {
};
private static mainEdges = {
smooth: false,
- length: 250,
+ length: 250
};
private static mainPhysics = {
- enabled: false,
+ enabled: false
};
// Node size
@@ -73,13 +73,13 @@ export class NetworkSettings {
return {
layout: this.mainLayout,
edges: this.mainEdges,
- physics: physicsOn || this.mainPhysics ,
+ physics: physicsOn || this.mainPhysics,
};
} else if (network === 'analysis') {
return {
layout: this.analysisLayout,
edges: this.analysisEdges,
- physics: physicsOn || this.analysisPhysics,
+ physics: physicsOn || this.analysisPhysics,
};
} else if (network === 'analysis-big') {
return {
@@ -95,8 +95,7 @@ export class NetworkSettings {
'edgeHostDrug' | 'edgeHostDrugHighlight' | 'edgeGeneGene' | 'edgeGeneGeneHighlight')
/**
* Collection of all colors per use-case
- */
- {
+ */ {
if (color === 'protein') {
return this.hostColor;
} else if (color === 'approvedDrug') {
@@ -126,40 +125,40 @@ export class NetworkSettings {
isSeed: boolean,
isSelected: boolean,
gradient: number = 1): Node {
- // delete possible old styles
- 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.
- // this allows to overwrite only attributes of interest, therefor in e.g. seedNode group
- // certain attributes like shape can remain undefined
- // use lodash merge to not lose deep attributes, e.g. "font.size"
- if (isSeed) {
- // apply seed node style to node
- node = merge(node, config.nodeGroups.seedNode);
- }
- // selection on purpose after seed style, so seed style will be combined with selection style
- if (isSelected) {
- // apply selected node style to node
- node = merge(node, config.nodeGroups.selectedNode);
- }
+ // delete possible old styles
+ 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.
+ // this allows to overwrite only attributes of interest, therefor in e.g. seedNode group
+ // certain attributes like shape can remain undefined
+ // use lodash merge to not lose deep attributes, e.g. "font.size"
+ if (isSeed) {
+ // apply seed node style to node
+ node = merge(node, config.nodeGroups.seedNode);
+ }
+ // selection on purpose after seed style, so seed style will be combined with selection style
+ if (isSelected) {
+ // apply selected node style to node
+ node = merge(node, config.nodeGroups.selectedNode);
+ }
- // show image if image url is given. If seed nodes are highlighted, ignore image property
- if (node.image && !isSeed) {
- node.shape = 'image';
- }
+ // show image if image url is given. If seed nodes are highlighted, ignore image property
+ if (node.image && !isSeed) {
+ node.shape = 'image';
+ }
- // use opactiy as gradient
- if (gradient === null) {
- node.opacity = 0
- } else {
- node.opacity = gradient
- }
- return node;
+ // use opactiy as gradient
+ if (gradient === null) {
+ node.opacity = 0
+ } else {
+ node.opacity = gradient
}
+ return node;
+ }
}