Fixing evidence menu errors

- Fixed chart errors when changing tabs to fast on the evidence menu
Sage-Bionetworks · Jun 25, 2019 · fe411e5 · fe411e5
1 parent 4723b89
commit fe411e5
Show file tree

Hide file tree

Showing 14 changed files with 132 additions and 41 deletions.
diff --git a/src/app/charts/box-plot/box-plot-view/box-plot-view.component.ts b/src/app/charts/box-plot/box-plot-view/box-plot-view.component.ts
@@ -255,6 +255,8 @@ export class BoxPlotViewComponent implements OnInit, OnDestroy, AfterViewInit {
 
                         // Adds tooltip below the x axis labels
                         self.addXAxisTooltips(chart);
+
+                        self.chartService.addChartRendered(self.label);
                     }
                 });
 

diff --git a/src/app/charts/force-chart/force-chart-view/force-chart-view.component.ts b/src/app/charts/force-chart/force-chart-view/force-chart-view.component.ts
@@ -25,6 +25,7 @@ import * as d3 from 'd3';
 import * as d3s from 'd3-symbol-extra';
 
 import { Gene, GeneNetwork, GeneLink, GeneNode } from '../../../models';
+import { SimulationNodeDatum } from 'd3';
 
 @Component({
     selector: 'force-chart',
@@ -284,7 +285,8 @@ export class ForceChartViewComponent implements OnInit, AfterViewInit, OnChanges
         });
 
         this.simulation.force('link', d3.forceLink(this.networkData.links)
-            .links(this.networkData.links).id((d: GeneNode) => d.id)
+            .links(this.networkData.links)
+            .id((d: SimulationNodeDatum) => d['id'])
             .strength((d) => {
                 return d.value / 100.0;
             }));

diff --git a/src/app/charts/median-chart/median-chart-view/median-chart-view.component.ts b/src/app/charts/median-chart/median-chart-view/median-chart-view.component.ts
@@ -188,6 +188,8 @@ export class MedianChartViewComponent implements OnInit, OnDestroy, AfterViewIni
 
                     // Adds tooltip below the x axis labels
                     self.addXAxisTooltips(chart);
+
+                    self.chartService.addChartRendered(self.label);
                 }
             });
 

diff --git a/src/app/charts/row-chart/row-chart-view/row-chart-view.component.ts b/src/app/charts/row-chart/row-chart-view/row-chart-view.component.ts
@@ -93,6 +93,7 @@ export class RowChartViewComponent implements OnInit, OnDestroy, AfterViewInit,
         });
         this.location.onPopState(() => {
             this.removeSelf();
+            this.display = false;
         });
 
         this.chartSubscription = this.chartService.chartsReady$.subscribe((state: boolean) => {
@@ -248,6 +249,7 @@ export class RowChartViewComponent implements OnInit, OnDestroy, AfterViewInit,
                             width,
                             height
                         );
+                        self.chartService.addChartRendered(self.label);
                     });
                 })
                 .othersGrouper(null)

diff --git a/src/app/charts/select-menu/select-menu-view/select-menu-view.component.spec.ts b/src/app/charts/select-menu/select-menu-view/select-menu-view.component.spec.ts
@@ -18,7 +18,10 @@ import {
 
 import { SelectMenuViewComponent } from './select-menu-view.component';
 
-import { GeneService, ApiService } from '../../../core/services';
+import {
+    GeneService,
+    ApiService
+} from '../../../core/services';
 import { ChartService } from '../../services';
 
 import { of, empty, Observable } from 'rxjs';

diff --git a/src/app/charts/select-menu/select-menu-view/select-menu-view.component.ts b/src/app/charts/select-menu/select-menu-view/select-menu-view.component.ts
@@ -14,7 +14,7 @@ import { ActivatedRoute, Router, NavigationStart } from '@angular/router';
 import { PlatformLocation } from '@angular/common';
 
 import { ChartService } from '../../services';
-import { GeneService, DataService, ApiService } from '../../../core/services';
+import { GeneService, ApiService } from '../../../core/services';
 
 import { GeneResponse } from '../../../models';
 
@@ -192,6 +192,7 @@ export class SelectMenuViewComponent implements OnInit, OnDestroy {
                     await self.replaceSelect().then(() => {
                         // Registers this chart
                         self.chartService.addChartName(self.label, self.type);
+                        self.chartService.addChartRendered(self.label);
                     });
                 }
             });

diff --git a/src/app/charts/services/chart.service.ts b/src/app/charts/services/chart.service.ts
@@ -14,6 +14,12 @@ export class ChartService {
         ['forest-plot', false],
         ['select-model', false]
     ]);
+    chartRendered: Map<string, boolean> = new Map([
+        ['median-chart', false],
+        ['box-plot', false],
+        ['forest-plot', false],
+        ['select-model', false]
+    ]);
     pChartInfos: Map<string, any> = new Map<string, any>();
     pChartNames: Map<string, boolean> = new Map([
         ['pbox-plot', false],
@@ -35,9 +41,11 @@ export class ChartService {
 
     // Observable string sources
     chartsReadySource = new Subject<boolean>();
+    chartsRenderedSource = new Subject<boolean>();
 
     // Observable string streams
     chartsReady$ = this.chartsReadySource.asObservable();
+    chartsRendered$ = this.chartsRenderedSource.asObservable();
 
     constructor() {
         //
@@ -75,6 +83,18 @@ export class ChartService {
         }
     }
 
+    addChartRendered(name: string) {
+        if (this.chartRendered) {
+            if (name && this.chartRendered.has(name)) { this.chartRendered.set(name, true); }
+
+            if (this.allChartsRendered()) {
+                this.chartsRenderedSource.next(true);
+            } else {
+                this.chartsRenderedSource.next(false);
+            }
+        }
+    }
+
     removeChartName(name: string, type: string = 'RNA') {
         let chartNames: Map<string, boolean> = null;
         if (type === 'RNA') {
@@ -94,6 +114,13 @@ export class ChartService {
         }
     }
 
+    removeChartRendered(name: string) {
+        if (name && this.chartRendered.has(name)) {
+            this.chartRendered.set(name, false);
+            this.chartsRenderedSource.next(false);
+        }
+    }
+
     allEmptyCharts(type: string = 'RNA'): boolean {
         let allEmpty = true;
         let chartNames: Map<string, boolean> = null;
@@ -132,6 +159,19 @@ export class ChartService {
         return loaded;
     }
 
+    allChartsRendered(): boolean {
+        let loaded = true;
+
+        for (const value of this.chartRendered.values()) {
+            if (!value) {
+                loaded = false;
+                break;
+            }
+        }
+
+        return loaded;
+    }
+
     getChartInfo(label: string, type: string = 'RNA'): any {
         let chartInfos: Map<string, any> = null;
         if (type === 'RNA') {

diff --git a/src/app/core/services/navigation.service.ts b/src/app/core/services/navigation.service.ts
@@ -30,8 +30,12 @@ export class NavigationService {
     }
 
     goToRouteRelative(path: string, outlets?: any) {
-        (outlets) ? this.router.navigate([path, outlets], { relativeTo: this.route }) :
-            this.router.navigate([path], { relativeTo: this.route });
+        (outlets) ? this.router.navigate(
+            [path, outlets],
+            {
+                relativeTo: this.route
+        }) :
+        this.router.navigate([path], { relativeTo: this.route });
     }
 
     getRouter(): Router {

diff --git a/src/app/genes/gene-overview/evidence-menu/evidence-menu.component.ts b/src/app/genes/gene-overview/evidence-menu/evidence-menu.component.ts
@@ -10,7 +10,8 @@ import { RouterEvent, NavigationEnd, NavigationExtras } from '@angular/router';
 
 import { Gene, GeneInfo } from '../../../models';
 
-import { GeneService, NavigationService, MenuService } from '../../../core/services';
+import { GeneService, NavigationService } from '../../../core/services';
+import { ChartService } from 'app/charts/services';
 
 import { MenuItem } from 'primeng/api';
 import { TabMenu } from 'primeng/tabmenu';
@@ -37,35 +38,38 @@ export class EvidenceMenuComponent implements OnInit, AfterContentChecked {
     activeItem: MenuItem;
     currentGeneData = [];
     routerSub: Subscription;
+    chartSub: Subscription;
     menuSub: Subscription;
     subscription: any;
     items: MenuItem[];
     neverActivated: boolean = true;
     disableMenu: boolean = false;
     firstTimeCheck: boolean = true;
     previousUrl: string;
+    currentMenuTab: number = -1;
 
     constructor(
         private navService: NavigationService,
-        private menuService: MenuService,
-        private geneService: GeneService
+        private geneService: GeneService,
+        private chartService: ChartService
     ) {}
 
     ngOnInit() {
         // Populate the tab menu
         this.items = [
-            { label: 'RNA', disabled: this.disableMenu },
-            { label: 'Protein', disabled: true },
-            // { label: 'Metabolomics', disabled: true },
-            { label: '', disabled: true},
-            { label: '', disabled: true}
+            { label: 'RNA', disabled: false } as MenuItem,
+            { label: 'Protein', disabled: true } as MenuItem,
+            { label: 'Metabolomics', disabled: true } as MenuItem,
+            { label: '', disabled: true} as MenuItem,
+            { label: '', disabled: true} as MenuItem
         ];
 
         this.geneInfo = this.geneService.getCurrentInfo();
 
-        this.menuSub = this.menuService.emReady$.subscribe((state: boolean) => {
+        this.chartSub = this.chartService.chartsRendered$.subscribe((state: boolean) => {
             if (state) {
-                this.items[1].disabled = this.disableMenu;
+                this.items[1].disabled = false;
+                this.items[2].disabled = false;
             }
         });
 
@@ -90,6 +94,7 @@ export class EvidenceMenuComponent implements OnInit, AfterContentChecked {
                         ) ||
                         this.navService.getOvMenuTabIndex() !== evidenceTabIndex
                     ) {
+                        console.log('here');
                         const urlToGo: string = this.navService.getOvMenuTabIndex() === 0 ?
                             'nom-details' : this.navService.getOvMenuTabIndex() === 1 ?
                             'soe' : 'druggability';
@@ -107,16 +112,6 @@ export class EvidenceMenuComponent implements OnInit, AfterContentChecked {
                         if (this.subscription) {
                             this.subscription.unsubscribe();
                         }
-                    } else {
-                        if (this.disableMenu) {
-                            // Improve this part, 0.8 seconds to re-activate the menu items
-                            setTimeout(() => {
-                                this.items.forEach((i) => {
-                                    i.disabled = false;
-                                });
-                                this.disableMenu = false;
-                            }, 800);
-                        }
                     }
                 }
 
@@ -130,13 +125,23 @@ export class EvidenceMenuComponent implements OnInit, AfterContentChecked {
             ? (this.activeItem.label !== this.menu.activeItem.label) : false)
             ) || this.neverActivated) || event) {
             this.neverActivated = false;
-            this.disableMenu = true;
-            this.items.forEach((i) => {
-                i.disabled = true;
-            });
 
             this.activeItem = (this.menu.activeItem) ? this.menu.activeItem :
-                event ? {label: event.target.textContent} : {label: 'RNA'};
+                event ? {label: event.target.textContent, disabled: false} :
+                {label: 'RNA', disabled: false};
+
+            if (this.activeItem.disabled ||
+                (
+                    this.currentMenuTab !== -1 &&
+                    (
+                        this.activeItem.label ===
+                        this.items[this.navService.getEvidenceMenuTabIndex()].label
+                    )
+                )
+            ) {
+                return;
+            }
+
             if (this.activeItem) {
                 switch (this.activeItem.label) {
                     case 'RNA':
@@ -175,6 +180,8 @@ export class EvidenceMenuComponent implements OnInit, AfterContentChecked {
                             }
                         }, this.extras);
                 }
+
+                this.currentMenuTab = this.navService.getEvidenceMenuTabIndex();
             }
         }
     }

diff --git a/src/app/genes/gene-overview/evidence-menu/rna/gene-network/gene-network.component.ts b/src/app/genes/gene-overview/evidence-menu/rna/gene-network/gene-network.component.ts
@@ -77,7 +77,7 @@ export class GeneNetworkComponent implements OnInit {
                 }
             });
             this.location.onPopState(() => {
-                if (!this.previousUrl.includes('gene-similar')) {
+                if (this.previousUrl && !this.previousUrl.includes('gene-similar')) {
                     this.removeForceServiceData();
                 }
             });

diff --git a/...app/genes/gene-overview/evidence-menu/rna/gene-rnaseq-de/gene-rnaseq-de.component.spec.ts b/...app/genes/gene-overview/evidence-menu/rna/gene-rnaseq-de/gene-rnaseq-de.component.spec.ts
@@ -26,8 +26,7 @@ import { MoreInfoComponent } from 'app/dialogs/more-info';
 import {
     ApiService,
     DataService,
-    GeneService,
-    MenuService
+    GeneService
 } from '../../../../../core/services';
 
 import { ChartService } from '../../../../../charts/services';
@@ -64,8 +63,7 @@ describe('Component: GeneRNASeqDE', () => {
                 { provide: DataService, useValue: new DataServiceStub() },
                 { provide: GeneService, useValue: new GeneServiceStub() },
                 { provide: ChartService, useValue: new ChartServiceStub() },
-                { provide: Location, useValue: locationStub },
-                MenuService
+                { provide: Location, useValue: locationStub }
             ]
         })
         .compileComponents();

diff --git a/src/app/genes/gene-overview/evidence-menu/rna/gene-rnaseq-de/gene-rnaseq-de.component.ts b/src/app/genes/gene-overview/evidence-menu/rna/gene-rnaseq-de/gene-rnaseq-de.component.ts
@@ -20,8 +20,7 @@ import { emptyGene } from 'app/testing';
 import { ChartService } from '../../../../../charts/services';
 import {
     ApiService,
-    GeneService,
-    MenuService
+    GeneService
 } from '../../../../../core/services';
 
 import { SelectItem } from 'primeng/api';
@@ -68,7 +67,6 @@ export class GeneRNASeqDEComponent implements OnInit, AfterViewChecked {
         private apiService: ApiService,
         private geneService: GeneService,
         private chartService: ChartService,
-        private menuService: MenuService,
         private location: PlatformLocation
     ) { }
 
@@ -119,7 +117,6 @@ export class GeneRNASeqDEComponent implements OnInit, AfterViewChecked {
             ).subscribe((d) => {
                 this.chartService.filteredData = d;
                 this.dataLoaded = true;
-                this.menuService.evidenceMenuReady();
             });
         });
     }

diff --git a/src/app/genes/gene-overview/gene-druggability/gene-druggability.component.html b/src/app/genes/gene-overview/gene-druggability/gene-druggability.component.html
@@ -1,4 +1,4 @@
-<div class="section-thin" tabindex="0">
+<div *ngIf="geneInfo" class="section-thin" tabindex="0">
     <h2>
         Druggability of {{geneInfo.hgnc_symbol}}
     </h2>
@@ -11,7 +11,7 @@ <h2>
     </more-info>
 </div>
 
-<p-accordion [multiple]="true" [ngClass]="'gd-accordion'" [expandIcon]="'pi pi-fw pi-plus'" [collapseIcon]="'pi pi-fw pi-minus'">
+<p-accordion *ngIf="geneInfo" [multiple]="true" [ngClass]="'gd-accordion'" [expandIcon]="'pi pi-fw pi-plus'" [collapseIcon]="'pi pi-fw pi-minus'">
     <p-accordionTab>
         <p-header>
             <div class="container">