Show rel type name on mouse-over on dev server

The type name isn't the same as the relation display name.

Refs pombase/curation#3771

src/app/extension-display/extension-display.component.html

@@ -1,6 +1,6 @@
 <span class="extension-display">
   <span class="extension-part" *ngFor="let extPart of displayExtension">
-    <span [class.extension-rel-name]="highlightRelations">{{extPart.relTypeName}}</span>
+    <span [class.extension-rel-name]="highlightRelations" title="{{relTitle(extPart)}}">{{extPart.relTypeName}}</span>
     <span *ngFor="let range of extPart.extRange; let i = index">
 
       <span *ngIf="range.term">

src/app/extension-display/extension-display.component.ts

@@ -4,6 +4,13 @@ import { ExtPart, ExtRange, GeneShort } from '../pombase-api.service';
 import { TermShort } from '../pombase-query';
 import { getAnnotationTableConfig, AnnotationTableConfig, AnnotationType,
          getAppConfig, getXrf } from '../config';
+import { DeployConfigService } from '../deploy-config.service';
+
+interface DisplayExtension {
+  relTypeName: string;
+  rawName: string;
+  extRange: any;
+}
 
 @Component({
   selector: 'app-extension-display',
@@ -16,12 +23,12 @@ export class ExtensionDisplayComponent implements OnInit {
   @Input() highlightRelations = true;
   @Input() geneShort?: GeneShort = undefined;
 
-  displayExtension: { relTypeName: string; rawName: string; extRange: any; }[] = [];
+  displayExtension: Array<DisplayExtension> = [];
 
   config: AnnotationTableConfig = getAnnotationTableConfig();
   typeConfig: AnnotationType;
 
-  constructor() { }
+  constructor(private deployConfigService: DeployConfigService) { }
 
   getLink(idWithPrefix: string): string|undefined {
     const linkConf = getXrf(idWithPrefix);
@@ -66,6 +73,14 @@ export class ExtensionDisplayComponent implements OnInit {
     return residue;
   }
 
+  relTitle(extPart: DisplayExtension): string {
+    if (this.deployConfigService.productionMode()) {
+      return '';
+    } else {
+      return extPart.rawName;
+    }
+  }
+
   ngOnInit() {
     let organismRE: RegExp;
     const loadOrganism = getAppConfig().getConfigOrganism();