From 46a02c9b379d8072fb66757099452c0a2c96a818 Mon Sep 17 00:00:00 2001
From: Alan Cleary <alan.cleary@msu.montana.edu>
Date: Tue, 15 Oct 2019 17:41:16 -0600
Subject: [PATCH] Refactored the TrackDetailComponent to work with the
 GoldenLayout directive.

---
 .../src/app/gene/components/gene.component.ts | 22 ++++++++--
 client/src/app/gene/components/index.ts       |  1 +
 .../app/gene/components/micro.component.ts    |  2 +-
 .../gene/components/track-detail.component.ts | 41 +++++++++----------
 client/src/app/gene/gene.module.ts            |  3 +-
 .../src/assets/js/gcv/visualization/micro.ts  |  2 +-
 6 files changed, 44 insertions(+), 27 deletions(-)

diff --git a/client/src/app/gene/components/gene.component.ts b/client/src/app/gene/components/gene.component.ts
index d9984d0b..462b762e 100644
--- a/client/src/app/gene/components/gene.component.ts
+++ b/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);
           }
         },
       },
diff --git a/client/src/app/gene/components/index.ts b/client/src/app/gene/components/index.ts
index c16c49e2..c4b06480 100644
--- a/client/src/app/gene/components/index.ts
+++ b/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';
diff --git a/client/src/app/gene/components/micro.component.ts b/client/src/app/gene/components/micro.component.ts
index 6fae286f..80443802 100644
--- a/client/src/app/gene/components/micro.component.ts
+++ b/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
diff --git a/client/src/app/gene/components/track-detail.component.ts b/client/src/app/gene/components/track-detail.component.ts
index 9353269a..a8f8eff8 100644
--- a/client/src/app/gene/components/track-detail.component.ts
+++ b/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;
       }
     }
   }
diff --git a/client/src/app/gene/gene.module.ts b/client/src/app/gene/gene.module.ts
index 242cc565..07cb03e7 100644
--- a/client/src/app/gene/gene.module.ts
+++ b/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,
diff --git a/client/src/assets/js/gcv/visualization/micro.ts b/client/src/assets/js/gcv/visualization/micro.ts
index e58f1f11..b7835fa9 100644
--- a/client/src/assets/js/gcv/visualization/micro.ts
+++ b/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;