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 index 8dadc2005..a8f424929 100644 --- 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 index 24ad11014..41a8406c4 100644 --- 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 index baf50da44..3cff3a561 100644 --- 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 index b49947c8f..7e41a0c1f 100644 --- 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 index 769542478..04e83a85d 100644 --- 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 index 8e3c1c4f0..5cceae160 100644 --- 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 index 914deefbc..a106db622 100644 --- 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 = new Map([ + ['median-chart', false], + ['box-plot', false], + ['forest-plot', false], + ['select-model', false] + ]); pChartInfos: Map = new Map(); pChartNames: Map = new Map([ ['pbox-plot', false], @@ -35,9 +41,11 @@ export class ChartService { // Observable string sources chartsReadySource = new Subject(); + chartsRenderedSource = new Subject(); // 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 = 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 = 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 = null; if (type === 'RNA') { diff --git a/src/app/core/services/navigation.service.ts b/src/app/core/services/navigation.service.ts index 40087b3f1..8a8677ef4 100644 --- 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 index de7cb6f70..0ad5f7501 100644 --- 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,6 +38,7 @@ export class EvidenceMenuComponent implements OnInit, AfterContentChecked { activeItem: MenuItem; currentGeneData = []; routerSub: Subscription; + chartSub: Subscription; menuSub: Subscription; subscription: any; items: MenuItem[]; @@ -44,28 +46,30 @@ export class EvidenceMenuComponent implements OnInit, AfterContentChecked { 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 index 97f6833ee..6ec719781 100644 --- 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/src/app/genes/gene-overview/evidence-menu/rna/gene-rnaseq-de/gene-rnaseq-de.component.spec.ts b/src/app/genes/gene-overview/evidence-menu/rna/gene-rnaseq-de/gene-rnaseq-de.component.spec.ts index dc270c7ff..05bf5cd2c 100644 --- a/src/app/genes/gene-overview/evidence-menu/rna/gene-rnaseq-de/gene-rnaseq-de.component.spec.ts +++ b/src/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 index 6531a8678..06d528c68 100644 --- 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 index 91f535f85..93d5ba187 100644 --- 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 @@ -
+

Druggability of {{geneInfo.hgnc_symbol}}

@@ -11,7 +11,7 @@

- +
diff --git a/src/app/testing/chart-service-stub.ts b/src/app/testing/chart-service-stub.ts index 9e4c179a4..d77dbbd9b 100644 --- a/src/app/testing/chart-service-stub.ts +++ b/src/app/testing/chart-service-stub.ts @@ -15,6 +15,12 @@ export class ChartServiceStub { ['forest-plot', false], ['select-model', false] ]); + chartRendered: Map = new Map([ + ['median-chart', false], + ['box-plot', false], + ['forest-plot', false], + ['select-model', false] + ]); pChartInfos: Map = new Map(); pChartNames: Map = new Map([ ['pbox-plot', false], @@ -57,9 +63,11 @@ export class ChartServiceStub { // Observable string sources chartsReadySource = new Subject(); + chartsRenderedSource = new Subject(); // Observable string streams chartsReady$ = this.chartsReadySource.asObservable(); + chartsRendered$ = this.chartsRenderedSource.asObservable(); constructor() { // @@ -91,6 +99,19 @@ export class ChartServiceStub { return loaded; } + allChartsRendered(): boolean { + let loaded = true; + + for (const value of this.chartRendered.values()) { + if (!value) { + loaded = false; + break; + } + } + + return loaded; + } + getChartInfo(label: string): any { return mockInfo1; } @@ -108,6 +129,18 @@ export class ChartServiceStub { } } + 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) { // }