feat: Add Cytoscape.js reaction diagram to detail pages

Extract diagramFromData() from DiagramService for reuse, create
ReactionDiagramComponent that fetches reaction layout JSON and renders
it client-side via Cytoscape. Integrate as a new section in
DescriptionTabComponent for reaction-type entities.

Fixes: handle missing endShape on INPUT connectors, missing centre on
PTM attachment shapes, and bidirectional arm segment traversal for
reaction diagrams from the ReactionExporter.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: adamjohnwright

projects/pathway-browser/src/app/details/common/reaction-diagram/reaction-diagram.component.html

@@ -0,0 +1 @@
+<div class="reaction-diagram-container" #container></div>

projects/pathway-browser/src/app/details/common/reaction-diagram/reaction-diagram.component.scss

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.reaction-diagram-container {
+  position: relative;
+  width: 100%;
+  height: 500px;
+  border: 1px solid var(--outline-variant);
+  border-radius: 8px;
+  overflow: hidden;
+}

projects/pathway-browser/src/app/details/common/reaction-diagram/reaction-diagram.component.ts

@@ -0,0 +1,71 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  inject,
+  input,
+  OnDestroy,
+  viewChild
+} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+import {Style} from 'reactome-cytoscape-style';
+import cytoscape from 'cytoscape';
+import {Diagram} from '../../../model/diagram.model';
+import {Graph} from '../../../model/graph.model';
+import {DiagramService} from '../../../services/diagram.service';
+import {CONTENT_SERVICE} from '../../../../environments/environment';
+
+interface ReactionJson {
+  diagram: Diagram;
+  graph: Graph.Data;
+}
+
+@Component({
+  selector: 'cr-reaction-diagram',
+  templateUrl: './reaction-diagram.component.html',
+  styleUrl: './reaction-diagram.component.scss',
+})
+export class ReactionDiagramComponent implements AfterViewInit, OnDestroy {
+  private http = inject(HttpClient);
+  private diagramService = inject(DiagramService);
+
+  readonly stId = input.required<string>();
+
+  private containerRef = viewChild.required<ElementRef<HTMLDivElement>>('container');
+  private cy?: cytoscape.Core;
+  private reactomeStyle?: Style;
+
+  ngAfterViewInit() {
+    const container = this.containerRef().nativeElement;
+    this.reactomeStyle = new Style(container);
+
+    this.http.get<ReactionJson>(`${CONTENT_SERVICE}/exporter/reaction/${this.stId()}/diagram`)
+      .subscribe(({diagram, graph}) => {
+        // Ensure required arrays exist (reaction diagrams may omit empty arrays)
+        diagram.links = diagram.links || [];
+        diagram.shadows = diagram.shadows || [];
+        diagram.compartments = diagram.compartments || [];
+        graph.subpathways = graph.subpathways || [];
+
+        const elements = this.diagramService.diagramFromData(diagram, graph);
+
+        this.cy = cytoscape({
+          container,
+          elements,
+          style: this.reactomeStyle?.getStyleSheet(),
+          layout: {name: 'preset'},
+          boxSelectionEnabled: false,
+        });
+
+        this.reactomeStyle?.bindToCytoscape(this.cy);
+        this.cy.fit(undefined, 20);
+        this.cy.userZoomingEnabled(true);
+        this.cy.userPanningEnabled(true);
+        this.cy.autoungrabify(true);
+      });
+  }
+
+  ngOnDestroy() {
+    this.cy?.destroy();
+  }
+}

projects/pathway-browser/src/app/details/tabs/description-tab/description-tab.component.html

@@ -287,3 +287,9 @@
   </div>
 </ng-template>
 
+<ng-template #reactionDiagramTemplate>
+  <div class="element-container">
+    <cr-reaction-diagram [stId]="obj().stId" />
+  </div>
+</ng-template>
+

projects/pathway-browser/src/app/details/tabs/description-tab/description-tab.component.ts

@@ -76,6 +76,9 @@ import {InteractorsTableComponent} from "../../common/interactors-table/interact
 import {
   LocationsTreeComponent
 } from "../../../../../../website-angular/src/app/content/detail/locations-tree/locations-tree.component";
+import {
+  ReactionDiagramComponent
+} from "../../common/reaction-diagram/reaction-diagram.component";
 
 
 @Component({
@@ -108,7 +111,8 @@ import {
     IconComponent,
     RheaComponent,
     InteractorsTableComponent,
-    LocationsTreeComponent
+    LocationsTreeComponent,
+    ReactionDiagramComponent
   ]
 })
 export class DescriptionTabComponent implements OnDestroy {
@@ -280,6 +284,9 @@ export class DescriptionTabComponent implements OnDestroy {
   interactorsTemplate$ = viewChild.required<TemplateRef<any>>('interactorsTemplate');
   rheaTemplate$ = viewChild.required<TemplateRef<any>>('rheaTemplate');
   locationsTemplate$ = viewChild<TemplateRef<any>>('locationsTemplate');
+  reactionDiagramTemplate$ = viewChild<TemplateRef<any>>('reactionDiagramTemplate');
+
+  readonly isReaction = computed(() => isRLE(this.obj()));
 
   protected readonly Labels = Labels;
   protected readonly DataKeys = DataKeys;
@@ -314,6 +321,13 @@ export class DescriptionTabComponent implements OnDestroy {
       template: this.locationsTemplate$ as Signal<TemplateRef<any>>,
       isPresent: computed(() => this.showLocations())
     },
+    {
+      key: 'reactionDiagram',
+      label: 'Reaction Diagram',
+      manual: true,
+      template: this.reactionDiagramTemplate$ as Signal<TemplateRef<any>>,
+      isPresent: this.isReaction
+    },
     {key: DataKeys.REFERENCE_ENTITY, label: Labels.EXTERNAL_REFERENCE, manual: true, template: this.referenceTemplate$},
     {key: DataKeys.SUMMARISED_ENTITIES, label: Labels.SUMMARISED_ENTITIES},
     {
@@ -466,6 +480,8 @@ export class DescriptionTabComponent implements OnDestroy {
         return obj;
       case 'locationsInPWB':
         return this.showLocations();
+      case 'reactionDiagram':
+        return this.isReaction();
       case DataKeys.PROTEIN_MARKER:
         return this.proteinMarkers().length + this.rnaMarkers().length > 0;
       case DataKeys.CATALYST_ACTIVITY:

projects/pathway-browser/src/app/model/diagram.model.ts

@@ -80,7 +80,7 @@ export interface NodeConnector {
   type: 'INPUT' | 'OUTPUT' | 'CATALYST' | 'ACTIVATOR' | 'INHIBITOR';
   segments: Segment[]
   stoichiometry: { value: number }
-  endShape: { centre: Position }
+  endShape: { centre: Position, c?: Position }
   isFadeOut?: boolean
 }