Added track by to tab component. Resolves #1224. (#1226)

Author: MillenniumFalconMechanic

spa/src/app/shared/hca-tab/hca-tab.component.html

@@ -1,7 +1,9 @@
 <div class="wrapper">
     <ng-container *ngIf="tabs">
         <div class="hca-tabs">
-            <div [ngClass]="getTabClass(activeTab.key, tab.key)" *ngFor="let tab of tabs" (click)="onClickTab(tab)">
+            <div *ngFor="let tab of tabs;trackBy: trackByFn"
+                 [ngClass]="getTabClass(activeTab.key, tab.key)"
+                 (click)="onClickTab(tab)">
                 {{tab.displayName}}
             </div>
         </div>

spa/src/app/shared/hca-tab/hca-tab.component.ts

@@ -14,8 +14,6 @@ import {
 // App dependencies
 import EntitySpec from "../../files/shared/entity-spec";
 
-// App dependencies
-
 @Component({
     selector: "hca-tab",
     templateUrl: "./hca-tab.component.html",
@@ -32,10 +30,6 @@ export class HCATabComponent {
     // Outputs
     @Output() tabSelected = new EventEmitter<EntitySpec[]>();
 
-    /**
-     * Public API
-     */
-
     /**
      * Return the set of CSS class names that are applicable to the tab.
      *
@@ -61,4 +55,16 @@ export class HCATabComponent {
         this.tabSelected.emit(tab);
     }
 
+    /**
+     * Track by function used when displaying the set of tabs.
+     *
+     * @param {number} index
+     * @param {EntitySpec} tab
+     * @returns {string}
+     */
+    public trackByFn(index: number, tab: EntitySpec): string {
+
+        return tab.key;
+    }
+
 }