Add sort by gene count to slim results table

Refs #2246
pombase · Nov 1, 2024 · f4be71f · f4be71f
1 parent fb87606
commit f4be71f
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 19 deletions.
diff --git a/src/app/shared/gene-results-slim-table/gene-results-slim-table.component.html b/src/app/shared/gene-results-slim-table/gene-results-slim-table.component.html
@@ -10,9 +10,23 @@
       <h4>Terms and genes</h4>
       <table class="subset-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>
         </thead>
         <tbody>
           <tr *ngFor="let row of resultTable">

diff --git a/src/app/shared/gene-results-slim-table/gene-results-slim-table.component.ts b/src/app/shared/gene-results-slim-table/gene-results-slim-table.component.ts
@@ -11,6 +11,8 @@ class ProcessedRow {
   }
 }
 
+type SortableColumnNames = 'name' | 'gene_count';
+
 @Component({
   selector: 'app-gene-results-slim-table',
   templateUrl: './gene-results-slim-table.component.html',
@@ -23,6 +25,7 @@ export class GeneResultsSlimTableComponent implements OnInit {
   @Input() geneListDescription: string;
 
   subsetDetails: TermSubsetDetails;
+  queryResult?: QueryResult = undefined;
   resultTable: Array<ProcessedRow> = [];
   termGeneUniquenames: { [termId: string]: Array<GeneUniquename>} = {};
 
@@ -32,6 +35,8 @@ export class GeneResultsSlimTableComponent implements OnInit {
   appConfig: AppConfig = getAppConfig();
   slimConfig: SlimConfig;
 
+  sortColumnName: SortableColumnNames = 'name';
+
   constructor(private pombaseApiService: PombaseAPIService,
               private queryService: QueryService,
               private router: Router) {
@@ -44,8 +49,9 @@ export class GeneResultsSlimTableComponent implements OnInit {
     const outputOptions =
       new QueryOutputOptions(['gene_uniquename'], ['include_gene_subsets'], [], 'none');
     this.queryService.postQuery(geneListQuery, outputOptions)
-      .then(results => {
-        this.resultTable = this.makeResultTable(results);
+      .then(queryResult => {
+        this.queryResult = queryResult;
+        this.makeResultTable();
       });
   }
 
@@ -71,11 +77,38 @@ export class GeneResultsSlimTableComponent implements OnInit {
     this.countsReady = true;
   }
 
-  makeResultTable(results: QueryResult): Array<ProcessedRow> {
+  sortRows(): void {
+    const sortRows = function (rowA: ProcessedRow, rowB: ProcessedRow) {
+      if (rowA.geneUniquenames.length === 0 && rowB.geneUniquenames.length === 0 ||
+        rowA.geneUniquenames.length !== 0 && rowB.geneUniquenames.length !== 0) {
+        return rowA.termName.localeCompare(rowB.termName);
+      }
+      if (rowA.geneUniquenames.length === 0) {
+        return 1;
+      } else {
+        return -1;
+      }
+    };
+
+    if (this.sortColumnName == 'name') {
+      this.resultTable.sort(sortRows);
+    } else {
+      const sortRowsByCount =
+        (a: ProcessedRow, b: ProcessedRow) => a.geneUniquenames.length - b.geneUniquenames.length;
+      this.resultTable.sort(sortRowsByCount);
+    }
+  }
+
+  setSortColumn(col: SortableColumnNames): void {
+    this.sortColumnName = col;
+    this.makeResultTable();
+  }
+
+  makeResultTable() {
     this.countsReady = false;
 
     this.termGeneUniquenames = {};
-    for (const row of results.getRows()) {
+    for (const row of this.queryResult!.getRows()) {
       if (row.subsets) {
         for (const subsetTermId of row.subsets as Array<TermId>) {
           if (this.termGeneUniquenames[subsetTermId]) {
@@ -101,22 +134,12 @@ export class GeneResultsSlimTableComponent implements OnInit {
       resultTable.push(row);
     }
 
-    const sortRows = function(rowA: ProcessedRow, rowB: ProcessedRow) {
-      if (rowA.geneUniquenames.length === 0 && rowB.geneUniquenames.length === 0 ||
-          rowA.geneUniquenames.length !== 0 && rowB.geneUniquenames.length !== 0) {
-        return rowA.termName.localeCompare(rowB.termName);
-      }
-      if (rowA.geneUniquenames.length === 0) {
-        return 1;
-      } else {
-        return -1;
-      }
-    };
-
     this.pombaseApiService.getGeneSummaryMapPromise()
       .then(geneSummaryMap => this.calcGeneStats(geneSummaryMap, resultTable));
 
-    return resultTable.sort(sortRows);
+    this.resultTable = resultTable;
+
+    this.sortRows();
   }
 
   gotoGenesOfTerm(termName: string, termId: TermId): void {