Refactored the TrackDetailComponent to work with the GoldenLayout dir…

…ective.

client/src/app/gene/components/gene.component.ts

@@ -13,6 +13,7 @@ import { LegendComponent } from './legend.component';
 import { MacroComponent } from './macro.component';
 import { MicroComponent } from './micro.component';
 import { PlotComponent } from './plot.component';
+import { TrackDetailComponent } from './track-detail.component';
 
 @Component({
   selector: 'gene',
@@ -33,7 +34,8 @@ export class GeneComponent implements AfterViewInit, OnDestroy {
       {component: LegendComponent, name: 'legend'},
       {component: MacroComponent, name: 'macro'},
       {component: MicroComponent, name: 'micro'},
-      {component: PlotComponent, name: 'plot'}
+      {component: PlotComponent, name: 'plot'},
+      {component: TrackDetailComponent, name: 'track'}
     ];
   layoutConfig = {
       content: [{
@@ -123,6 +125,19 @@ export class GeneComponent implements AfterViewInit, OnDestroy {
     };
   }
 
+  private _trackDetailConfigFactory(track) {
+    const first = track.genes[0];
+    const last = track.genes[track.genes.length-1];
+    const id = `track:${track.name}:${first}:${last}:${track.source}`;
+    return {
+      type: 'component',
+      componentName: 'track',
+      id: id,
+      title: `Track: ${track.name}`,
+      componentState: {inputs: {track}},
+    };
+  }
+
   private _legendConfigFactory(elements, colors) {
     const id = 'microlegend';
     const options = {autoResize: true};
@@ -182,8 +197,9 @@ export class GeneComponent implements AfterViewInit, OnDestroy {
               this._geneDetailConfigFactory(gene, family, source);
             this.goldenLayoutDirective.stackItem(geneConfig, id);
           },
-          nameClick: (track) => {
-            console.log(track);
+          nameClick: ({track}) => {
+            const trackConfig = this._trackDetailConfigFactory(track);
+            this.goldenLayoutDirective.stackItem(trackConfig, id);
           }
         },
       },

client/src/app/gene/components/index.ts

@@ -29,5 +29,6 @@ export * from './legend.component';
 export * from './macro.component';
 export * from './micro.component';
 export * from './plot.component';
+export * from './track-detail.component';
 export * from './shared';
 export * from './viewers';

client/src/app/gene/components/micro.component.ts

@@ -63,7 +63,7 @@ export class MicroComponent implements AfterViewInit, OnDestroy {
   }
 
   emitName(track) {
-    this.nameClick.emit(track);
+    this.nameClick.emit({track});
   }
 
   // private

client/src/app/gene/components/track-detail.component.ts

@@ -1,50 +1,49 @@
 // Angular
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 // App
 import { AppConfig } from '@gcv/app.config';
 import { Server } from '@gcv/core/models';
-import { Gene, Group } from '@gcv/gene/models';
+import { Gene, Track } from '@gcv/gene/models';
 
 @Component({
   selector: 'track-detail',
   styles: [ '' ],
   template: `
-    <h4>{{track.genus[0]}}.{{track.species}} - {{track.chromosome_name}}</h4>
+    <h4>{{ track.genus[0] }}.{{ track.species }} - {{ track.name }}</h4>
     <p><a [routerLink]="['/search', track.source, focus]" queryParamsHandling="merge">Search for similar contexts</a></p>
     <p>Genes:</p>
     <ul>
-      <li *ngFor="let gene of track.genes">
-        {{gene.name}}: {{gene.fmin}} - {{gene.fmax}}
-        <ul *ngIf="familyTreeLink !== undefined && gene.family != ''">
+      <li *ngFor="let gene of track.genes; let i = index">
+        {{ gene }}
+        <ul *ngIf="familyTreeLink !== '' && track.families[i] !== ''">
           <li>
-            Family: <a href="{{familyTreeLink}}{{gene.family}}">{{gene.family}}</a>
+            Family: <a href="{{ familyTreeLink }}{{ track.families[i] }}">{{ track.families[i] }}</a>
           </li>
         </ul>
       </li>
     </ul>
   `,
 })
-export class TrackDetailComponent implements OnChanges {
+export class TrackDetailComponent implements OnInit {
 
-  private _serverIDs = AppConfig.SERVERS.map(s => s.id);
+  @Input() track: Track;
 
-  @Input() track: Group;
+  private _serverIDs = AppConfig.SERVERS.map(s => s.id);
 
   focus: string;
-  familyTreeLink: string;
+  familyTreeLink: string = '';
 
-  ngOnChanges(changes: SimpleChanges): void {
-    if (this.track !== undefined) {
-      const idx = Math.floor(this.track.genes.length / 2);
-      this.focus = this.track.genes[idx].name;
-    }
+  // Angular hooks
+
+  ngOnInit() {
+    const i = Math.floor(this.track.genes.length / 2);
+    this.focus = this.track.genes[i];
 
-    this.familyTreeLink = undefined;
-    const idx = this._serverIDs.indexOf(this.track.genes[0].source);
+    const idx = this._serverIDs.indexOf(this.track.source);
     if (idx != -1) {
-      const s: Server = AppConfig.SERVERS[idx];
-      if (s.hasOwnProperty('familyTreeLink')) {
-        this.familyTreeLink = s.familyTreeLink.url;
+      const server: Server = AppConfig.SERVERS[idx];
+      if (server.hasOwnProperty('familyTreeLink')) {
+        this.familyTreeLink = server.familyTreeLink.url;
       }
     }
   }

client/src/app/gene/gene.module.ts

@@ -27,7 +27,8 @@ import { GeneRoutingModule } from '@gcv/gene/gene-routing.module';
     fromComponents.LegendComponent,
     fromComponents.MacroComponent,
     fromComponents.MicroComponent,
-    fromComponents.PlotComponent
+    fromComponents.PlotComponent,
+    fromComponents.TrackDetailComponent
   ],
   imports: [
     CommonModule,

client/src/assets/js/gcv/visualization/micro.ts

@@ -92,7 +92,7 @@ export class Micro extends Visualizer {
     this.options.boldFirst = this.options.boldFirst || false;
     this.options.highlight = this.options.highlight || [];
     this.options.selectiveColoring = this.options.selectiveColoring;
-    this.options.nameClick = this.options.nameClick || ((c) => { /* noop */ });
+    this.options.nameClick = this.options.nameClick || ((t, i) => { /* noop */ });
     this.options.geneClick = this.options.geneClick || ((t, g, i) => { /* noop */ });
     this.options.plotClick = this.options.plotClick;
     this.options.autoResize = this.options.autoResize || false;