center network view button in sidebar

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);

src/app/components/network-control/network-control.component.html

+<div>
+    <button (click)="fitNetwork()">fit network</button>
+</div>

src/app/components/network-control/network-control.component.spec.ts

+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();
+  });
+});

src/app/components/network-control/network-control.component.ts

+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();
+  }
+
+}

src/app/components/network-legend/network-legend.component.html → src/app/components/network/network-legend/network-legend.component.html

-
-
-<div class="legend" [class.right]="this.config.legendPos === 'right'" [ngClass]="{ 'legend-small': drugstoneConfig.smallStyle }">
+<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)">
+      <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"/>
+              <img [src]="nodeGroup.value.image" class="legend-icon" />
             </th>
             <td class="group-name">&nbsp;{{ nodeGroup.value.groupName }}</td>
           </ng-container>
 
-          <ng-container *ngIf="!nodeGroup.value.image" [ngSwitch]="nodeGroup.value.shape">
+          <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>
+              <span class="node text"> text </span>
             </th>
             <th *ngSwitchCase="'hexagon'">
-              <span class="node hexagon" [style.color]=nodeGroup.value.color.background>
+              <span
+                class="node hexagon"
+                [style.color]="nodeGroup.value.color.background"
+              >
                 &#x2B23;
               </span>
             </th>
             <th *ngSwitchCase="'triangle'">
-              <span class="node triangle" [style.border-bottom-color]=nodeGroup.value.color.background>
+              <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
+                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
+                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
+                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
+                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
+                class="node {{ nodeGroup.value.shape }}"
+                [style.background-color]="nodeGroup.value.color.background"
+              >
               </span>
             </th>
             <td class="group-name">&nbsp;{{ nodeGroup.value.groupName }}</td>
@@ -65,11 +89,24 @@
     </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)">
+      <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>
+            <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">&nbsp;{{ edgeGroup.value.groupName }}</td>
         </ng-container>
@@ -77,8 +114,10 @@
     </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"/>
-
+  <img
+    *ngIf="this.config.legendUrl.length"
+    [src]="this.config.legendUrl"
+    [ngClass]="this.config.legendClass"
+  />
 </div>

src/app/components/network-legend/network-legend.component.ts → src/app/components/network/network-legend/network-legend.component.ts

 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',

src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.html

+<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>

src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.spec.ts

+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();
+  });
+});

src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.ts

+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();
+  }
+
+}

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"

src/app/components/network/network-menu/center-view/center-view.component.html

+<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>

src/app/components/network/network-menu/center-view/center-view.component.spec.ts

+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();
+  });
+});

src/app/components/network/network-menu/center-view/center-view.component.ts

+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();
+  }
+
+}

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>

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)',