import { Component , OnInit , AfterViewInit , ViewChild , ViewChildren , QueryList , ElementRef } from '@angular/core' ; import { Logger } from 'src/app/shared/services/logger.service' ; import { Configuration } from 'src/app/shared/services/configuration.service' ; import { DashboardGlyphConfigComponent } from './dashboard-tab-glyphs/dashboard-glyph-config.component' ; import { LenseCursor } from 'src/app/lense/cursor.service' ; import { RegionManager } from 'src/app/region/region.manager' ; import { DataproviderService } from 'src/app/shared/services/dataprovider.service' ; import { EventAggregatorService } from 'src/app/shared/events/event-aggregator.service' ; import { RefreshPlotEvent } from 'src/app/shared/events/refresh-plot.event' ; import * as d3 from 'd3' ; @ Component ( { selector : 'app-dashboard' , templateUrl : './dashboard.component.html' , styleUrls : [ './dashboard.component.scss' ] } ) export class DashboardComponent implements OnInit , AfterViewInit { @ ViewChild ( 'canvas' ) private container : ElementRef | undefined ; @ ViewChild ( 'dashboard' ) private dashboard : ElementRef | undefined ; @ ViewChild ( 'icon' ) private icon : ElementRef | undefined ; @ ViewChildren ( DashboardGlyphConfigComponent ) configOptions : QueryList < any > | undefined ; public activeOptions : [ any ] | undefined ; public selectedFeatureName : string = "" ; public infoHidden = false ; public activeTab = 'data' ; constructor ( private logger , public configuration , public cursor , private regionManager , private dataProvider , private eventAggregator ) { } ngOnInit ( ) { this . dataProvider . getDataSet ( ) . subscribe ( message => { if ( message === null || message === undefined || message . schema === undefined ) { return ; } this . infoHidden = this . configuration . configurations [ 0 ] . activeFeatures . length > 0 ; this . configuration . configurations [ this . configuration . dataSetRequest ] . setData ( message ) ; this . configuration . configurations [ this . configuration . dataSetRequest ] . activeDataSet = message ; this . configuration . configurations [ this . configuration . dataSetRequest ] . featureGroups = message . schema . groups ; const unorderedContexts = message . schema [ 'variant-context' ] ; const orderedContexts = [ ] ; for ( const key in unorderedContexts ) { if ( unorderedContexts . hasOwnProperty ( key ) ) { orderedContexts . push ( unorderedContexts [ key ] ) ; } } this . configuration . configurations [ this . configuration . dataSetRequest ] . featureContexts = orderedContexts ; this . configuration . configurations [ this . configuration . dataSetRequest ] . selectedContext = orderedContexts [ 0 ] ; this . configuration . configurations [ this . configuration . dataSetRequest ] . activeFeatures = [ ] ; this . configuration . configurations [ this . configuration . dataSetRequest ] . featureGroups = message . schema . groups ; for ( const key in message . schema . label ) { if ( message . schema . label . hasOwnProperty ( key ) ) { if ( message . meta . features . hasOwnProperty ( key ) ) { const value = message . schema . label [ key ] ; if ( message . schema . glyph . includes ( key ) ) { this . configuration . configurations [ this . configuration . dataSetRequest ] . activeFeatures . push ( { active : true , property : key , label : value } ) ; } else { this . configuration . configurations [ this . configuration . dataSetRequest ] . activeFeatures . push ( { active : false , property : key , label : value } ) ; } } } } const colorFeature = message . schema . color ; this . configuration . configurations [ this . configuration . dataSetRequest ] . selectedFeatureName = message . schema . label [ colorFeature ] ; } ) ; this . configuration . splitScreenActive = this . regionManager . regions [ 1 ] . display === 'block' ; if ( this . regionManager . regions [ 1 ] . display === 'block' ) { this . cursor . boundaries . right = window . innerWidth / 2 ; } else { this . cursor . boundaries . right = window . innerWidth ; } } ngAfterViewInit ( ) { } param { any } e public onTabToggle ( e ) { e . preventDefault ( ) ; this . activeTab = e . target . getAttribute ( 'value' ) ; } private onColorChange ( e ) { this . configuration . configurations [ 0 ] . activeDataSet . schema . color = e . property ; this . selectedFeatureName = this . configuration . configurations [ 0 ] . activeDataSet . schema . label [ e . property ] ; this . onLayoutChange ( ) ; } param { any } event public onToggleDashboard ( event ) { event . preventDefault ( ) ; const dash = d3 . select ( this . dashboard ?. nativeElement ) ; const ic = d3 . select ( this . icon ?. nativeElement ) ; const display = dash . style ( 'display' ) ; if ( display === 'block' ) { dash . transition ( ) . style ( 'width' , '0px' ) . transition ( ) . style ( 'display' , 'none' ) ; ic . transition ( ) . style ( 'display' , 'block' ) ; } else { dash . transition ( ) . style ( 'width' , '395px' ) . style ( 'display' , 'block' ) ; ic . transition ( ) . style ( 'display' , 'none' ) ; } } public onLayoutChange ( ) { this . eventAggregator . getEvent ( RefreshPlotEvent ) . publish ( true ) ; } }