Swap gene-allele table columns and add wrapping

The descriptions now wrap on commas to prevent the page being too
width.

Refs #2550

Author: kimrutherford

src/app/gene-allele-list/gene-allele-list.component.css

@@ -28,9 +28,14 @@ tr {
 
 td {
   height: inherit;
+  padding-top: 0.2em;
 }
 
 .genotype {
   padding-left: 0.5em;
   border-left: 2px solid black;
 }
+
+.show-genotype-button {
+  white-space: nowrap;
+}

src/app/gene-allele-list/gene-allele-list.component.html

@@ -27,14 +27,6 @@
             Name <img title="Sorted by name" src="assets/sort_up.svg">
           </span>
         </th>
-        <th>
-          <a *ngIf="sortByColumnName != 'description'" (click)="sortBy('description')"title="Click to sort by description">
-            Description <img title="Click to sort by description" src="assets/sort_both.svg">
-          </a>
-          <span *ngIf="sortByColumnName == 'description'" title="Sorted by description">
-            Description <img title="Sorted by description" src="assets/sort_up.svg">
-          </span>
-        </th>
 
         <th>
           <a *ngIf="sortByColumnName != 'type'" (click)="sortBy('type')" title="Click to sort by type">
@@ -44,6 +36,16 @@
             Type <img title="Sorted by type" src="assets/sort_up.svg">
           </span>
         </th>
+
+        <th>
+          <a *ngIf="sortByColumnName != 'description'" (click)="sortBy('description')"title="Click to sort by description">
+            Description <img title="Click to sort by description" src="assets/sort_both.svg">
+          </a>
+          <span *ngIf="sortByColumnName == 'description'" title="Sorted by description">
+            Description <img title="Sorted by description" src="assets/sort_up.svg">
+          </span>
+        </th>
+
         <th *ngIf="anyVisibleGenotypes()">Expression</th>
         <th *ngIf="anyVisibleGenotypes()">Genotype</th>
       </tr>
@@ -57,16 +59,17 @@
               <span *ngIf="deployConfigService.productionMode()">{{allele.alleleName}}</span>
             </td>
             <td *ngIf="expressedAlleleIndex == 0 && genotypeIndex == 0" [attr.rowspan]="alleleRowspan(allele)">
-              {{allele.alleleDescription}}
+              {{allele.alleleType}}
             </td>
             <td *ngIf="expressedAlleleIndex == 0 && genotypeIndex == 0" [attr.rowspan]="alleleRowspan(allele)">
-              {{allele.alleleType}}
+              <span [innerHTML]="allele.alleleDescription"></span>
             </td>
             <td *ngIf="!genotypesVisible(allele) && anyVisibleGenotypes()">
 
             </td>
             <td *ngIf="!genotypesVisible(allele)">
-              <a (click)="showGenotypes(allele)">Show genotypes..</a>
+              <a class="show-genotype-button" (click)="showGenotypes(allele)"
+                 title="Show genotypes of {{allele.alleleName}}">Show genotypes..</a>
             </td>
           </ng-container>
 

src/app/gene-allele-list/gene-allele-list.component.ts

@@ -216,7 +216,8 @@ export class GeneAlleleListComponent implements OnInit {
       const alleleShort = alleleMap[alleleUniquename];
 
       const alleleName = alleleShort.name;
-      const alleleDescription = alleleShort.description;
+      const alleleDescription = alleleShort.description.replace(/,/g, ',​');
+
       const alleleType = alleleShort.allele_type;
 
       const alleleSection =