Merge branch 'master' of gitlab.rrz.uni-hamburg.de:cosy-bio/drugst.one/frontend

src/app/app.module.ts

@@ -43,6 +43,7 @@ import { ToastComponent } from './components/toast/toast.component';
 import { GroupSelectionComponent } from './pages/explorer-page/group-selection/group-selection.component';
 import { FaSolidIconComponent } from './components/fa-solid-icon/fa-solid-icon.component';
 import { FaIconsComponent } from './pages/explorer-page/fa-icons/fa-icons.component';
+import { LoadingScreenComponent } from './components/loading-screen/loading-screen.component';
 
 
 @NgModule({
@@ -76,6 +77,7 @@ import { FaIconsComponent } from './pages/explorer-page/fa-icons/fa-icons.compon
     GroupSelectionComponent,
     FaSolidIconComponent,
     FaIconsComponent,
+    LoadingScreenComponent,
   ],
   imports: [
     BrowserModule,

src/app/components/analysis-panel/analysis-panel.component.ts

@@ -36,6 +36,7 @@ import {downLoadFile, pieChartContextRenderer, removeDuplicateObjectsFromList} f
 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;
 
@@ -111,7 +112,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
 
   public loading = false;
 
-  constructor(public legendService: LegendService, public networkHandler: NetworkHandlerService, public drugstoneConfig: DrugstoneConfigService, private http: HttpClient, public analysis: AnalysisService, public netex: NetexControllerService) {
+  constructor(public legendService: LegendService, public networkHandler: NetworkHandlerService, public drugstoneConfig: DrugstoneConfigService, private http: HttpClient, public analysis: AnalysisService, public netex: NetexControllerService, public loadingScreen: LoadingScreenService) {
   }
 
   async ngOnInit() {
@@ -127,6 +128,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
 
   private async refresh() {
     if (this.token) {
+      this.loadingScreen.stateUpdate(true);
       this.task = await this.getTask(this.token);
       this.analysis.switchSelection(this.token);
 
@@ -336,6 +338,8 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
             });
             this.emitVisibleItems(true);
           });
+        this.loadingScreen.stateUpdate(false);
+
         });
       }
     }
@@ -466,10 +470,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
         console.log('Missing details for ' + nodeId);
       }
     }
-
-
     const uniqEdges = [];
-
     for (const edge of network.edges) {
       const e = mapCustomEdge(edge, this.drugstoneConfig.currentConfig());
       e.from = e.from[0] === 'p' && nodeIdMap[e.from] ? nodeIdMap[e.from] : e.from;
@@ -527,6 +528,6 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
 
   public toggleFullscreen() {
     this.fullscreen = !this.fullscreen;
-    console.log('this.fullscreen', this.fullscreen)
+    this.loadingScreen.fullscreenUpdate(this.fullscreen)
   }
 }

src/app/components/loading-screen/loading-screen.component.html

+<div class="loading-screen" [class.loading-screen-fullscreen]="fullscreen" *ngIf="active">
+  <div class="loading-screen-inner">
+    <div class="loading-screen-inner-text pulse">
+      Loading...
+    </div>
+  </div>
+</div>

src/app/components/loading-screen/loading-screen.component.scss

+@import "src/stylesheets/variables";
+
+.loading-screen {
+  position: absolute;
+  z-index: $loading-overlay-z;
+  height: 100%;
+  width: 100%;
+  background: rgba(6, 6, 6, 0.3);
+  &-inner {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    &-text {
+      color: white;
+      font-size: 24px;
+    }
+  }
+  &-fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+}
+
+.pulse {
+    animation: pulse 5s infinite;
+    // animation-direction: alternate;
+    -webkit-animation-name: pulse;
+    animation-name: pulse;
+  }
+      
+  @-webkit-keyframes pulse {
+    0% {
+      -webkit-transform: scale(1);
+    }
+    50% { -webkit-transform: scale(1.3); }
+    100% { -webkit-transform: scale(1); }
+  }
+      
+  @keyframes pulse {
+    0% {
+      transform: scale(1);
+    }
+    50% { transform: scale(1.3); }
+    100% { transform: scale(1); }
+  }

src/app/components/loading-screen/loading-screen.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoadingScreenComponent } from './loading-screen.component';
+
+describe('LoadingScreenComponent', () => {
+  let component: LoadingScreenComponent;
+  let fixture: ComponentFixture<LoadingScreenComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LoadingScreenComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoadingScreenComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/loading-screen/loading-screen.component.ts

+import { Component, OnInit } from '@angular/core';
+import { LoadingScreenService } from 'src/app/services/loading-screen/loading-screen.service';
+
+@Component({
+  selector: 'app-loading-screen',
+  templateUrl: './loading-screen.component.html',
+  styleUrls: ['./loading-screen.component.scss']
+})
+export class LoadingScreenComponent implements OnInit {
+
+  constructor(private loadingScreen: LoadingScreenService) { }
+
+  public active = false;
+  public fullscreen = false;
+
+  ngOnInit(): void {
+    this.loadingScreen._getUpdates.forEach(bool => this.active = bool);
+    this.loadingScreen._isFullscreen.forEach(bool => this.fullscreen = bool);
+  }
+
+}

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

 import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
 import domtoimage from 'dom-to-image';
-import {InteractionDatabase} from 'src/app/config';
+import {IConfig, 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';
@@ -21,6 +21,7 @@ import {NetworkSettings} from 'src/app/network-settings';
 import {pieChartContextRenderer} from 'src/app/utils';
 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';
 
 
 @Component({
@@ -82,8 +83,16 @@ export class NetworkComponent implements OnInit {
 
   public loading = false
 
-  constructor(public configService: DrugstoneConfigService, public legendService: LegendService, public networkHandler: NetworkHandlerService, public analysis: AnalysisService, public drugstoneConfig: DrugstoneConfigService, public netex: NetexControllerService, public omnipath: OmnipathControllerService) {
-  }
+  constructor(
+    public configService: DrugstoneConfigService, 
+    public legendService: LegendService, 
+    public networkHandler: NetworkHandlerService, 
+    public analysis: AnalysisService, 
+    public drugstoneConfig: DrugstoneConfigService, 
+    public netex: NetexControllerService, 
+    public omnipath: OmnipathControllerService, 
+    public loadingScreen: LoadingScreenService) 
+    {}
 
   ngOnInit(): void {
     this.networkHandler.networks[this.networkType] = this;
@@ -120,6 +129,7 @@ export class NetworkComponent implements OnInit {
   }
 
   public updateAdjacentProteinDisorders(bool: boolean) {
+    this.loadingScreen.stateUpdate(true);
     this.adjacentDisordersProtein = bool;
     if (this.adjacentDisordersProtein) {
       this.legendService.add_to_context('adjacentDisorders')
@@ -151,6 +161,7 @@ export class NetworkComponent implements OnInit {
         this.saveAddNodes(this.adjacentProteinDisorderList);
         this.nodeData.edges.add(this.adjacentProteinDisorderEdgesList);
         this.updateQueryItems();
+        this.loadingScreen.stateUpdate(false);
       });
     } else {
       if (!this.adjacentDisordersDrug) {
@@ -161,10 +172,12 @@ export class NetworkComponent implements OnInit {
       this.adjacentProteinDisorderList = [];
       this.adjacentProteinDisorderEdgesList = [];
       this.updateQueryItems();
+      this.loadingScreen.stateUpdate(false);
     }
   }
 
   public updateAdjacentDrugDisorders(bool: boolean) {
+    this.loadingScreen.stateUpdate(true);
     this.adjacentDisordersDrug = bool;
     if (this.adjacentDisordersDrug) {
       this.legendService.add_to_context('adjacentDisorders');
@@ -181,6 +194,7 @@ export class NetworkComponent implements OnInit {
         this.saveAddNodes(this.adjacentDrugDisorderList);
         this.nodeData.edges.add(this.adjacentDrugDisorderEdgesList);
         this.updateQueryItems();
+        this.loadingScreen.stateUpdate(false);
       });
     } else {
       if (!this.adjacentDisordersProtein)
@@ -190,6 +204,7 @@ export class NetworkComponent implements OnInit {
       this.adjacentDrugDisorderList = [];
       this.adjacentDrugDisorderEdgesList = [];
       this.updateQueryItems();
+      this.loadingScreen.stateUpdate(false);
     }
   }
 
@@ -218,6 +233,7 @@ export class NetworkComponent implements OnInit {
   }
 
   public updateAdjacentDrugs(bool: boolean) {
+    this.loadingScreen.stateUpdate(true);
     this.adjacentDrugs = bool;
     if (this.adjacentDrugs) {
       this.legendService.add_to_context("adjacentDrugs")
@@ -253,6 +269,7 @@ export class NetworkComponent implements OnInit {
         this.nodeData.nodes.add(this.adjacentDrugList);
         this.nodeData.edges.add(this.adjacentDrugEdgesList);
         this.updateQueryItems();
+        this.loadingScreen.stateUpdate(false);
       })
     } else {
       // remove adjacent drugs, make sure that also drug associated disorders are removed
@@ -268,6 +285,7 @@ export class NetworkComponent implements OnInit {
       this.adjacentDrugEdgesList = [];
 
       this.updateQueryItems();
+      this.loadingScreen.stateUpdate(false);
     }
   }
 
@@ -338,6 +356,7 @@ export class NetworkComponent implements OnInit {
   }
 
   public selectTissue(tissue: Tissue | null) {
+    this.loadingScreen.stateUpdate(true);
     this.expressionExpanded = false;
     if (!tissue) {
       // delete expression values
@@ -385,6 +404,7 @@ export class NetworkComponent implements OnInit {
         updatedNodes.push(node);
       }
       this.nodeData.nodes.update(updatedNodes);
+      this.loadingScreen.stateUpdate(true);
 
     } else {
       this.selectedTissue = tissue;
@@ -450,6 +470,7 @@ export class NetworkComponent implements OnInit {
             updatedNodes.push(node);
           })
           this.nodeData.nodes.update(updatedNodes);
+          this.loadingScreen.stateUpdate(false);
         }
       )
     }
@@ -465,7 +486,7 @@ export class NetworkComponent implements OnInit {
   }
 
   public getGradient(nodeId: string) {
-    return (this.gradientMap !== {}) && (this.gradientMap[nodeId]) ? this.gradientMap[nodeId] : 1.0;
+    return (Object.keys(this.gradientMap).length) && (this.gradientMap[nodeId]) ? this.gradientMap[nodeId] : 1.0;
   }
 
   /**
@@ -473,6 +494,7 @@ export class NetworkComponent implements OnInit {
    * @param bool
    */
   public updateHighlightSeeds(bool: boolean) {
+    this.loadingScreen.stateUpdate(true);
     this.highlightSeeds = bool;
     const updatedNodes = [];
     if (this.highlightSeeds)
@@ -488,6 +510,7 @@ export class NetworkComponent implements OnInit {
       if (!node) {
         continue;
       }
+      console.log(node)
       const pos = this.networkHandler.activeNetwork.networkInternal.getPositions([node.id]);
       node.x = pos[node.id].x;
       node.y = pos[node.id].y;
@@ -506,12 +529,12 @@ export class NetworkComponent implements OnInit {
       updatedNodes.push(node);
     }
     this.nodeData.nodes.update(updatedNodes);
-
-
+    this.loadingScreen.stateUpdate(false);
   }
 
   public toggleFullscreen() {
     this.fullscreen = !this.fullscreen;
+    this.loadingScreen.fullscreenUpdate(this.fullscreen);
   }
 
 }

src/app/pages/explorer-page/explorer-page.component.html

@@ -2,6 +2,7 @@
 
   <div class="is-hidden-mobile fullheight" id="appContainer">
     <app-fa-icons></app-fa-icons>
+    <app-loading-screen></app-loading-screen>
     <app-license-agreement></app-license-agreement>
 
     <app-launch-analysis

src/app/services/loading-screen/loading-screen.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { LoadingScreenService } from './loading-screen.service';
+
+describe('LoadingScreenService', () => {
+  let service: LoadingScreenService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LoadingScreenService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/loading-screen/loading-screen.service.ts

+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoadingScreenService {
+
+  constructor() { }
+
+  private _active = new Subject<boolean>();
+  private _fullscreen = new Subject<boolean>();
+
+  stateUpdate(bool: boolean) {
+    this._active.next(bool);
+  }
+
+  fullscreenUpdate(bool: boolean) {
+    this._fullscreen.next(bool);
+  }
+
+  get _getUpdates () {
+    return this._active.asObservable();
+  }
+
+  get _isFullscreen () {
+    return this._fullscreen.asObservable();
+  }
+}

src/app/services/network-handler/network-handler.service.ts

@@ -7,19 +7,20 @@ import {DrugstoneConfigService} from '../drugstone-config/drugstone-config.servi
 import {NetexControllerService} from '../netex-controller/netex-controller.service';
 import {OmnipathControllerService} from '../omnipath-controller/omnipath-controller.service';
 import {LegendService} from "../legend-service/legend-service.service";
+import { LoadingScreenService } from '../loading-screen/loading-screen.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class NetworkHandlerService {
 
-  constructor(public legendService: LegendService, public networkHandler: NetworkHandlerService, public analysis: AnalysisService, public drugstoneConfig: DrugstoneConfigService, public netex: NetexControllerService, public omnipath: OmnipathControllerService) {
+  constructor(public legendService: LegendService, public networkHandler: NetworkHandlerService, public analysis: AnalysisService, public drugstoneConfig: DrugstoneConfigService, public netex: NetexControllerService, public omnipath: OmnipathControllerService, public loadingScreen: LoadingScreenService) {
   }
 
   private change = new Subject<any>();
 
   public networks: { NetworkType: NetworkComponent } | {} = {};
-  public activeNetwork: NetworkComponent = new NetworkComponent(this.drugstoneConfig, this.legendService, this.networkHandler, this.analysis, this.drugstoneConfig, this.netex, this.omnipath);
+  public activeNetwork: NetworkComponent = new NetworkComponent(this.drugstoneConfig, this.legendService, this.networkHandler, this.analysis, this.drugstoneConfig, this.netex, this.omnipath, this.loadingScreen);
 
   public setActiveNetwork(network: NetworkType) {
     this.triggerChange();

src/stylesheets/theme-styles.scss

 @import "default-theme.css";
 
 // For testing theme override
-
+// :root {
+//   --drgstn-primary:#4285F4;
+//   --drgstn-secondary:#303030;
+//   --drgstn-success:#48C774;
+//   --drgstn-warning:#f5f5f5;
+//   --drgstn-danger:#ff2744;
+//   --drgstn-background:#ffffff;
+//   --drgstn-panel:#ededed;
+//   --drgstn-info:#61c43d;
+//   --drgstn-text-primary:#151515;
+//   --drgstn-text-secondary:#ebecf0;
+//   --drgstn-border:rgba(0, 0, 0, 0.2);
+//   --drgstn-tooltip:rgba(74,74,74,0.9);
+//   --drgstn-panel-secondary:#f5f5f5;
+//   --drgstn-height:600px;
+//   --drgstn-font-family:Helvetica Neue, sans-serif;
+// }
+   
 #appWindow {
   background-color: var(--drgstn-background) !important;
 

src/stylesheets/variables.scss

@@ -67,3 +67,4 @@ $toast-z: 100;
 
 $fullscreen-z: 2147483646;
 $toast-z: 2147483647;
+$loading-overlay-z: 2147483647;