Add links for term IDs in GO-CAM titles

Refs #2320

src/app/app.module.ts

@@ -323,6 +323,7 @@ export class PomBaseUrlSerializer extends DefaultUrlSerializer {
     ],
     bootstrap: [AppComponent],
     schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    exports: [],
     imports: [
         IntersectionObserverModule.forRoot({
           debounce: 50,

src/app/go-cam-view-page/go-cam-view-page.component.html

@@ -1,7 +1,14 @@
 <div *ngIf="getIFrameURL()">
   <div class="header-section">
   <div class="return-to-gene-page">
-    <div class="title">GO-CAM pathway model <span class="model-title-or-id">{{getTitleOrId()}}</span>
+    <div class="title">GO-CAM pathway model
+      <span class="model-title-or-id">
+       <app-description-display *ngIf="gocamDetails && gocamDetails.title"
+         [description]="gocamDetails!.title"
+         [descriptionParts]="titleParts">
+       </app-description-display>
+       <span *ngIf="(!gocamDetails || !gocamDetails.title) && gocamId">{{gocamId}}</span>
+      </span>
       <span *ngIf="sourcePageType != 'docs'" class="go-cam-view">
         <span class="help-link"><a routerLink="/documentation/go-cam-pathway-models">All curated pathways</a></span>
       </span>

src/app/go-cam-view-page/go-cam-view-page.component.ts

@@ -4,6 +4,7 @@ import { ActivatedRoute, Params } from '@angular/router';
 import { DomSanitizer, Meta, SafeResourceUrl, Title } from '@angular/platform-browser';
 import { AppConfig, getAppConfig } from '../config';
 import { PombaseAPIService, GoCamDetails, GeneSummaryMap, GeneSummary } from '../pombase-api.service';
+import { TextOrTermId, Util } from '../shared/util';
 
 @Component({
     selector: 'app-go-cam-view-page',
@@ -23,6 +24,7 @@ export class GoCamViewPageComponent implements OnInit {
   sourceName?: string;
   modelGenes: Array<GeneSummary> = [];
   geneSummaryMap?: GeneSummaryMap;
+  titleParts: Array<TextOrTermId> = [];
 
   constructor(private titleService: Title,
               private sanitizer: DomSanitizer,
@@ -68,14 +70,21 @@ export class GoCamViewPageComponent implements OnInit {
     this.meta.updateTag({ property: 'description', content: title });
   }
 
+  setTitleParts(): void {
+    if (this.gocamDetails && this.gocamDetails.title) {
+      this.titleParts = Util.splitDescription(this.gocamDetails.title, this.gocamDetails.title_terms ?? []);
+    } else {
+      this.titleParts = [];
+    }
+  }
+
   ngOnInit(): void {
     this.route.params.forEach((params: Params) => {
       if (params['gocam_id'] !== undefined) {
         this.gocamId = params['gocam_id'];
 
         const summPromise = this.pombaseApi.getGeneSummaryMapPromise();
 
-
         const gocamDetailPromise = this.pombaseApi.getGoCamDetailById(this.gocamId!);
         gocamDetailPromise.then((details) => {
             this.gocamDetails = details;
@@ -88,7 +97,8 @@ export class GoCamViewPageComponent implements OnInit {
                  const geneSumm = geneSummMap[geneUniquename];
                  this.modelGenes.push(geneSumm);
               }
-              this.modelGenes.sort((a,b) => a.displayName().localeCompare(b.displayName()))
+              this.modelGenes.sort((a,b) => a.displayName().localeCompare(b.displayName()));
+              this.setTitleParts();
            })
 
         this.sourcePageType = params['source_page_type'];

src/app/pombase-api.service.ts

@@ -808,6 +808,7 @@ export interface GoCamContributor {
 export interface GoCamDetails {
   gocam_id: GoCamId;
   title?: string;
+  title_terms: Array<TermId>;
   genes: Array<GeneUniquename>;
   terms: Array<TermAndName>;
   contributors: Array<GoCamContributor>;

src/app/shared/gene-results/gene-results.component.html

@@ -5,9 +5,9 @@
   <div *ngIf="results">
     <div *ngIf="results.getRowCount() == 0" class="description">
       <span class="description-prefix">No results for:</span>
-      <app-query-description-display *ngIf="description || descriptionParts.length != 0"
+      <app-description-display *ngIf="description || descriptionParts.length != 0"
                                      [description]="description" [descriptionParts]="descriptionParts">
-      </app-query-description-display>
+      </app-description-display>
     </div>
 
     <app-genes-table *ngIf="results.getRowCount() != 0"

src/app/shared/gene-results/gene-results.component.ts

@@ -1,5 +1,6 @@
 import { Component, Input, OnInit, OnChanges } from '@angular/core';
 import { QueryResult, TermAndName } from '../../pombase-query';
+import { Util, TextOrTermId } from '../util';
 
 @Component({
     selector: 'app-gene-results',
@@ -13,7 +14,7 @@ export class GeneResultsComponent implements OnInit, OnChanges {
 
   description: string;
 
-  descriptionParts: Array<({ text?: string; term?: TermAndName; })> = [];
+  descriptionParts: Array<TextOrTermId> = [];
   termsInQuery: Array<TermAndName> = [];
 
   constructor() { }
@@ -30,22 +31,9 @@ export class GeneResultsComponent implements OnInit, OnChanges {
 
       this.termsInQuery = this.results.getQuery().referencedTerms();
       const termids = this.termsInQuery.map(term => term.termid);
-      const termidRe = new RegExp('(' + termids.join('|') + ')');
 
-      const descriptionBits = this.description.split(termidRe);
       this.descriptionParts =
-        descriptionBits.map(bit => {
-          const index = termids.indexOf(bit);
-          if (index === -1) {
-            return {
-              text: bit,
-            };
-          } else {
-            return {
-              term: this.termsInQuery[index],
-            };
-          }
-        });
-      }
+        Util.splitDescription(this.description, termids);
+    }
   }
 }

src/app/shared/genes-table/genes-table.component.html

@@ -8,9 +8,9 @@
     <span class="description-prefix" *ngIf="showingQuilt()">QuiLT visualisation of: </span>
     <span class="description-prefix" *ngIf="showingGeneEx()">Gene expression of: </span>
     <span class="description-prefix" *ngIf="!showingQuilt() && !showingGeneEx()">Query:</span>
-    <app-query-description-display *ngIf="description || descriptionParts.length != 0"
-                                   [description]="description" [descriptionParts]="descriptionParts">
-    </app-query-description-display>
+    <app-description-display *ngIf="description || descriptionParts.length != 0"
+                             [description]="description" [descriptionParts]="descriptionParts">
+    </app-description-display>
 
 
   <div *ngIf="showingQuilt()" class="documentation-link">

src/app/shared/genes-table/genes-table.component.ts

@@ -7,15 +7,15 @@ import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
 import { PombaseAPIService, GeneSummaryMap, GeneShort } from '../../pombase-api.service';
 import { GenesDownloadDialogComponent } from '../../genes-download-dialog/genes-download-dialog.component';
 import { QueryService, HistoryEntry, DisplayResultRow } from '../../query.service';
-import { GeneQuery, GeneListNode, TermAndName, QueryResult } from '../../pombase-query';
+import { GeneQuery, GeneListNode, QueryResult } from '../../pombase-query';
 import { getAppConfig, GeneResultsFieldConfig } from '../../config';
 import { DeployConfigService } from '../../deploy-config.service';
 import { GenesTableConfigComponent } from '../../genes-table-config/genes-table-config.component';
 import { SettingsService } from '../../settings.service';
 import { Subscription } from 'rxjs';
 import { faCog } from '@fortawesome/free-solid-svg-icons';
 import { QueryRouterService } from '../../query-router.service';
-import { Util } from '../util';
+import { TextOrTermId, Util } from '../util';
 
 @Component({
     selector: 'app-genes-table',
@@ -30,7 +30,7 @@ export class GenesTableComponent implements OnInit {
   // a decomposed version of the description as an Array of Objects
   // like: [{text: "abnormal cell ... ("}, {term: <a TermShort>}, {text: ")"}, ...]
   // which allows the the termids in a description to be linked to the term pages
-  @Input() descriptionParts: Array<({ text?: string; term?: TermAndName; })> = [];
+  @Input() descriptionParts: Array<TextOrTermId> = [];
   @Input() genesOrResults: Array<GeneShort>|QueryResult;
 
   @ViewChild('interMineSendForm') interMineSendForm: ElementRef;

src/app/shared/shared.module.ts

@@ -17,7 +17,6 @@ import { ExternalLinkComponent } from './external-link/external-link.component';
 import { GeneResultsComponent } from './gene-results/gene-results.component';
 import { GeneResultsVisComponent } from './gene-results-vis/gene-results-vis.component';
 import { GenesTableComponent } from './genes-table/genes-table.component';
-import { QueryDescriptionDisplayComponent } from './query-description-display/query-description-display.component';
 import { GeneLinkComponent } from './gene-link/gene-link.component';
 import { PageContentsMenuComponent } from './page-contents-menu/page-contents-menu.component';
 import { CvVersionComponent } from './cv-version/cv-version.component';
@@ -33,6 +32,7 @@ import { SocialContactComponent } from './social-contact/social-contact.componen
 import { GeneResultsSlimTableComponent } from './gene-results-slim-table/gene-results-slim-table.component';
 import { FacetedSearchComponent } from './faceted-search/faceted-search.component';
 import { ChromosomeOverviewComponent } from './chromosome-overview/chromosome-overview.component';
+import { DescriptionDisplayComponent } from './description-display/description-display.component';
 
 import { PublicationBadgeComponent } from './publication-badge/publication-badge.component';
 
@@ -74,6 +74,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
     FacetedSearchComponent,
     ChromosomeOverviewComponent,
     PublicationBadgeComponent,
+    DescriptionDisplayComponent,
   ],
   declarations: [
     SlimTableComponent,
@@ -96,7 +97,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
     GoCamTableComponent,
     SocialContactComponent,
     GeneResultsSlimTableComponent,
-    QueryDescriptionDisplayComponent,
+    DescriptionDisplayComponent,
     FacetedSearchComponent,
     ChromosomeOverviewComponent,
     PublicationBadgeComponent,

src/app/shared/util.ts

@@ -1,7 +1,12 @@
 import { SolrAlleleSummary } from '../complete.service';
 import { GenotypeDetails, GenotypeShort, GeneShort,
          AlleleShort, TranscriptDetails} from '../pombase-api.service';
+import { TermId } from '../pombase-query';
 
+export type TextOrTermId = {
+  text?: string;
+  termid?: TermId;
+}
 export class Util {
   static geneCompare(gene1: GeneShort, gene2: GeneShort): number {
     if (gene1.name) {
@@ -237,4 +242,27 @@ export class Util {
 
     return ret;
   }
+
+  static splitDescription(description: string, termids: Array<TermId>): Array<TextOrTermId> {
+    if (termids.length == 0) {
+      return [{ text: description }];
+    }
+
+    const termidRe = new RegExp('(' + termids.join('|') + ')');
+
+    const descriptionBits = description.split(termidRe);
+
+    return descriptionBits.map(bit => {
+      const index = termids.indexOf(bit);
+      if (index === -1) {
+        return {
+          text: bit,
+        };
+      } else {
+        return {
+          termid: bit,
+        };
+      }
+    });
+  }
 }