Allow sorting of slim table by gene count

Refs #2246
pombase · Nov 1, 2024 · c5bf4a9 · c5bf4a9
1 parent 5741bb0
commit c5bf4a9
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 5 deletions.
diff --git a/src/app/shared/slim-table/slim-table.component.html b/src/app/shared/slim-table/slim-table.component.html
@@ -5,9 +5,23 @@
   <div *ngIf="slimSubset">
   <table class="slim-table">
     <thead>
-      <th>Name</th>
+      <th>
+        <a *ngIf="sortColumnName != 'name'" (click)="setSortColumn('name')" title="Click to sort by name">
+          Name <img title="Click to sort by name" src="assets/sort_both.svg">
+        </a>
+        <span *ngIf="sortColumnName == 'name'" title="Sorted by name">
+          Name <img title="Sorted by name" src="assets/sort_up.svg">
+        </span>
+      </th>
       <th>Term</th>
-      <th>Genes</th>
+      <th>
+        <a *ngIf="sortColumnName != 'gene_count'" (click)="setSortColumn('gene_count')" title="Click to sort by gene count">
+          Genes <img title="Click to sort by gene count" src="assets/sort_both.svg">
+        </a>
+        <span *ngIf="sortColumnName == 'gene_count'" title="Sorted by gene count">
+          Genes <img title="Sorted by gene count" src="assets/sort_up.svg">
+        </span>
+      </th>
       <th *ngIf="slimConfig.external_link_config">{{slimConfig.external_link_config.description}}</th>
     </thead>
     <tbody>

diff --git a/src/app/shared/slim-table/slim-table.component.ts b/src/app/shared/slim-table/slim-table.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 
-import { PombaseAPIService, TermSubsetDetails, GeneSubsetDetails, APIError } from '../../pombase-api.service';
+import { PombaseAPIService, TermSubsetDetails, GeneSubsetDetails, APIError, TermSubsets } from '../../pombase-api.service';
 import { getAppConfig, SlimConfig, getAnnotationTableConfig, AnnotationType } from '../../config';
 
 class SlimSubsetElement {
@@ -10,6 +10,8 @@ class SlimSubsetElement {
               public single_multi_gene_count: number) { }
 }
 
+type SortableColumnNames = 'name' | 'gene_count';
+
 @Component({
   selector: 'app-slim-table',
   templateUrl: './slim-table.component.html',
@@ -30,24 +32,41 @@ export class SlimTableComponent implements OnInit {
   nonSlimWithAnnotationName: string;
   nonSlimWithoutAnnotationName: string;
 
+  sortColumnName: SortableColumnNames = 'name';
+
   cvConfig: AnnotationType;
+  subsets: TermSubsets;
   constructor(private pombaseApiService: PombaseAPIService) { }
 
+  setSortColumn(col: SortableColumnNames): void {
+    this.sortColumnName = col;
+    this.sortRows();
+  }
+
+  sortRows() {
+    if (this.sortColumnName == 'name') {
+      this.slimSubsetElements.sort((a, b) => a.name.localeCompare(b.name));
+    } else {
+      this.slimSubsetElements.sort((a, b) => b.gene_count - a.gene_count);
+    }
+  }
+
   ngOnInit() {
     this.slimConfig = this.appConfig.slims[this.slimName];
     this.cvConfig = getAnnotationTableConfig().getAnnotationType(this.slimConfig.cv_name);
 
     this.pombaseApiService.getTermSubsets()
       .then(subsets => {
-        this.slimSubset = Object.assign({}, subsets[this.slimName]);
+        this.subsets = subsets;
+        this.slimSubset = Object.assign({}, this.subsets[this.slimName]);
         this.slimSubsetElements = [];
         for (const termid of Object.keys(this.slimSubset.elements)) {
           const element = this.slimSubset.elements[termid];
           const slimSubsetElement =
             new SlimSubsetElement(termid, element.name, element.gene_count, element.single_locus_gene_count);
           this.slimSubsetElements.push(slimSubsetElement);
         }
-        this.slimSubsetElements.sort((a, b) => a.name.localeCompare(b.name));
+        this.sortRows();
       })
       .catch(error => {
         this.apiError = error;