feat: Add detail pages with Locations in the PathwayBrowser tree

angular.json

@@ -152,6 +152,11 @@
                 "glob": "**/*",
                 "input": "projects/website-angular/src/assets",
                 "output": "/assets"
+              },
+              {
+                "glob": "**/*",
+                "input": "projects/pathway-browser/src/assets",
+                "output": "/assets"
               }
             ],
             "styles": ["projects/website-angular/src/styles.scss"],

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

@@ -244,13 +244,13 @@
 
 <ng-template #authorsTemplate>
   <div class="element-container">
-    @for (item of authorship(); track item) {
+    @for (item of authorship(); track item.label) {
       <div class="row">
         <div class="label-container">{{ item.label }}</div>
         <div class="composition-container flex-column">
-          @for (ie of item.data |sortByDate:'dataTime'; track ie.dbId) {
+          @for (ie of item.data; track $index) {
             <div class="authorship-item">
-              @for (author of ie.author; let i = $index; track author.dbId) {
+              @for (author of ie.author; let i = $index; track $index) {
                 <a [href]="`${CONTENT_DETAIL}/${author.dbId}`"
                    [ngClass]="{'margin-right': !author.orcidId}">
                   {{ author.firstname }} {{ author.surname }}
@@ -281,3 +281,15 @@
   </div>
 </ng-template>
 
+<ng-template #locationsTemplate>
+  <div class="element-container">
+    <app-locations-tree [id]="obj().stId" />
+  </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

@@ -50,6 +50,11 @@ import {SpeciesService} from "../../../services/species.service";
 import {Summation} from "../../../model/graph/summation.model";
 import {FigureService} from "./figure/figure.service";
 import HasModifiedResidue = Relationship.HasModifiedResidue;
+import {KeyValuePipe, NgClass, NgTemplateOutlet} from "@angular/common";
+import {RouterLink} from "@angular/router";
+import {SortByTextPipe} from "../../../pipes/sort-by-text.pipe";
+import {IncludeRefPipe} from "../../../pipes/include-ref.pipe";
+import {AuthorshipDateFormatPipe} from "../../../pipes/authorship-date-format.pipe";
 import {MatDivider} from "@angular/material/divider";
 import {MatIcon} from "@angular/material/icon";
 import {MatTooltip} from "@angular/material/tooltip";
@@ -68,6 +73,12 @@ import {CellMarkerComponent} from "../../common/cell-marker/cell-marker.componen
 import {IconComponent} from "./icon/icon.component";
 import {RheaComponent} from "../../common/rhea/rhea.component";
 import {InteractorsTableComponent} from "../../common/interactors-table/interactors-table.component";
+import {
+  LocationsTreeComponent
+} from "../../../../../../website-angular/src/app/content/detail/locations-tree/locations-tree.component";
+import {
+  ReactionDiagramComponent
+} from "../../common/reaction-diagram/reaction-diagram.component";
 
 
 @Component({
@@ -76,6 +87,13 @@ import {InteractorsTableComponent} from "../../common/interactors-table/interact
   styleUrl: './description-tab.component.scss',
   standalone: true,
   imports: [
+    NgTemplateOutlet,
+    NgClass,
+    KeyValuePipe,
+    RouterLink,
+    SortByTextPipe,
+    IncludeRefPipe,
+    AuthorshipDateFormatPipe,
     MatDivider,
     MatIcon,
     MatTooltip,
@@ -92,7 +110,9 @@ import {InteractorsTableComponent} from "../../common/interactors-table/interact
     CellMarkerComponent,
     IconComponent,
     RheaComponent,
-    InteractorsTableComponent
+    InteractorsTableComponent,
+    LocationsTreeComponent,
+    ReactionDiagramComponent
   ]
 })
 export class DescriptionTabComponent implements OnDestroy {
@@ -124,6 +144,7 @@ export class DescriptionTabComponent implements OnDestroy {
 
   readonly obj = input.required<SelectableObject>();
   readonly analysisResult = input<Analysis.Result>();
+  readonly showLocations = input(false);
 
   static referenceTypeToNameSuffix = new Map<string, string>([
       ["ReferenceMolecule", ""],
@@ -171,21 +192,23 @@ export class DescriptionTabComponent implements OnDestroy {
 
   referenceEntity: Signal<ReferenceEntity> = computed(() => getProperty(this.obj(), DataKeys.REFERENCE_ENTITY));
 
-  readonly authorship: Signal<{ label: string, data: InstanceEdit[] }[]> = computed(() => {
+  readonly authorship: Signal<{label: string, data: InstanceEdit[]}[]> = computed(() => {
     const arrayWrap = <E>(a: E[] | E) => Array.isArray(a) ? a : [a];
 
     const obj = this.obj();
     // Ensure it's an array, either returning the existing array or wrapping it in one, it complains without this line.
-    const finalAuthored = arrayWrap(getProperty(obj, DataKeys.AUTHORED) || getProperty(obj, DataKeys.CREATED) || []);
+    const authored = arrayWrap(getProperty(obj, DataKeys.AUTHORED) || []);
     const reviewed = getProperty(obj, DataKeys.REVIEWED) || [];
     const edited = getProperty(obj, DataKeys.EDITED) || [];
     const revised = getProperty(obj, DataKeys.REVISED) || [];
+    const created = arrayWrap(getProperty(obj, DataKeys.CREATED) || []);
 
     return [
-      ...(finalAuthored.length > 0 ? [{label: Labels.AUTHOR, data: finalAuthored}] : []),
+      ...(authored.length > 0 ? [{label: Labels.AUTHOR, data: authored}] : []),
       ...(reviewed.length > 0 ? [{label: Labels.REVIEWER, data: reviewed}] : []),
       ...(edited.length > 0 ? [{label: Labels.EDITOR, data: edited}] : []),
       ...(revised.length > 0 ? [{label: Labels.REVISER, data: revised}] : []),
+      ...(created.length > 0 ? [{label: 'Created', data: created}] : []),
     ];
   });
 
@@ -260,6 +283,10 @@ export class DescriptionTabComponent implements OnDestroy {
   authorsTemplate$ = viewChild.required<TemplateRef<any>>('authorsTemplate');
   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;
@@ -287,6 +314,20 @@ export class DescriptionTabComponent implements OnDestroy {
       template: this.overviewTemplate$,
       isPresent: signal(true)
     },
+    {
+      key: 'locationsInPWB',
+      label: 'Locations in the Pathway Browser',
+      manual: true,
+      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},
     {
@@ -437,6 +478,10 @@ export class DescriptionTabComponent implements OnDestroy {
     switch (key) {
       case DataKeys.OVERVIEW:
         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/details/tabs/result-tab/result-tab.component.ts

@@ -277,7 +277,7 @@ export class ResultTabComponent {
   visitPathway(pathway: Analysis.Pathway) {
     this.data.selectedPathwayStId.set(pathway.stId)
     console.log("Navigating to " + pathway.stId)
-    this.router.navigate([pathway.stId], {queryParamsHandling: 'preserve', preserveFragment: true})
+    this.state.navigateTo(pathway.stId, {queryParamsHandling: 'preserve', preserveFragment: true})
   }
 
 

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

@@ -397,12 +397,12 @@ export class DiagramComponent implements AfterViewInit, OnDestroy {
         this.cy.on('zoom', () => this.controlZoom.set(this.zoomToControlTransform(this.cy.zoom())));
 
         this.reactomeStyle.clearCache();
-        this.cy.on('dblclick', '.SUB.Pathway', (e) => this.router.navigate([e.target.data('graph.stId')], {
+        this.cy.on('dblclick', '.SUB.Pathway', (e) => this.state.navigateTo(e.target.data('graph.stId'), {
           queryParamsHandling: "preserve",
           preserveFragment: true
         }))
 
-        this.cy.on('dblclick', '.Interacting.Pathway', (e) => this.router.navigate([e.target.data('graph.stId')], {
+        this.cy.on('dblclick', '.Interacting.Pathway', (e) => this.state.navigateTo(e.target.data('graph.stId'), {
           queryParams: {select: this.pathwayId()},
           queryParamsHandling: "merge",
           preserveFragment: true

projects/pathway-browser/src/app/event-hierarchy/event-hierarchy.component.ts

@@ -3,7 +3,7 @@ import {Event} from "../model/graph/event/event.model";
 import {EventService, SelectableObject} from "../services/event.service";
 import {SpeciesService} from "../services/species.service";
 import {combineLatest, combineLatestWith, filter, fromEvent, map, Observable, of, switchMap, take, tap} from "rxjs";
-import {MatTree, MatTreeNestedDataSource, MatTreeNodeDef} from "@angular/material/tree";
+import {MatTree, MatTreeNestedDataSource, MatTreeNodeDef, MatTreeNodeOutlet, MatTreeNodeToggle} from "@angular/material/tree";
 import {UrlStateService} from "../services/url-state.service";
 import {SplitComponent} from "angular-split";
 import {UntilDestroy, untilDestroyed} from "@ngneat/until-destroy";
@@ -35,6 +35,8 @@ import {PassiveDirective} from "../utils/passive.directive";
     MatTree,
     MatNestedTreeNode,
     MatTreeNodeDef,
+    MatTreeNodeToggle,
+    MatTreeNodeOutlet,
     MatButton,
     MatIconButton,
     NgClass,
@@ -168,11 +170,15 @@ export class EventHierarchyComponent implements AfterViewInit, OnDestroy {
     }, 100);
 
     this.eventService.treeData$.pipe(untilDestroyed(this)).subscribe(events => {
+      // Save expanded node stIds before resetting the data source
+      const expandedIds = this.collectExpandedIds(this.treeDataSource.data);
       // @ts-ignore
       // Mat tree has a bug causing children to not be rendered in the UI without first setting the data to null
       // This is a workaround to add child data to tree and update the view. see details: https://github.com/angular/components/issues/11381
       this.treeDataSource.data = []; //todo: check performance issue
       this.treeDataSource.data = events as Event[];
+      // Restore expansion state
+      this.restoreExpandedIds(events as Event[], expandedIds);
       this.adjustWidths();
     });
 
@@ -393,20 +399,16 @@ export class EventHierarchyComponent implements AfterViewInit, OnDestroy {
     const selectedEventId = isPathway(treeEvent) && treeEvent.hasDiagram ? null : treeEvent.stId;
     this._ignore = true;
     // this.speciesService.setIgnore(true);
-    this.router.navigate([diagramId], {
+    this.state.navigateTo(diagramId ?? null, {
       queryParamsHandling: "preserve" // Keep existing query params
     }).then(() => {
       this.state.select.set(selectedEventId);
       this.eventService.setCurrentTreeEvent(treeEvent);
-      // Listen for NavigationEnd event to reset _ignore
-      this.router.events.pipe(
-        filter(routerEvent => routerEvent instanceof NavigationEnd),
-        take(1) // Take the first NavigationEnd event and unsubscribe automatically
-      ).subscribe(() => {
-        this._ignore = false;
-        // this.speciesService.setIgnore(false);
-      });
-
+      // Reset _ignore after setting state. The .then() callback fires after
+      // NavigationEnd has already been emitted, so waiting for a future
+      // NavigationEnd would leave _ignore stuck at true if no further
+      // navigation occurs.
+      this._ignore = false;
     }).catch(err => {
       throw new Error('Navigation error:', err);
     });
@@ -530,4 +532,35 @@ export class EventHierarchyComponent implements AfterViewInit, OnDestroy {
     labelSpan.classList.remove('add-overflowX');
     el.classList.remove('no-transition');
   }
+
+  private collectExpandedIds(nodes: Event[]): Set<string> {
+    const expanded = new Set<string>();
+    const traverse = (items: Event[]) => {
+      for (const node of items) {
+        if (this.tree?.isExpanded(node)) {
+          expanded.add(node.stId);
+        }
+        if (isPathway(node) && node.events) {
+          traverse(node.events.map(e => e.element));
+        }
+      }
+    };
+    traverse(nodes);
+    return expanded;
+  }
+
+  private restoreExpandedIds(nodes: Event[], expandedIds: Set<string>): void {
+    if (expandedIds.size === 0) return;
+    const traverse = (items: Event[]) => {
+      for (const node of items) {
+        if (expandedIds.has(node.stId)) {
+          this.tree?.expand(node);
+        }
+        if (isPathway(node) && node.events) {
+          traverse(node.events.map(e => e.element));
+        }
+      }
+    };
+    traverse(nodes);
+  }
 }

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
 }
 

projects/pathway-browser/src/app/reacfoam/reacfoam.component.ts

@@ -108,7 +108,7 @@ export class ReacfoamComponent implements OnDestroy {
 
     onGroupDoubleClick: (event: any) => {
       event.preventDefault();
-      this.router.navigate([event.group.stId], {queryParamsHandling: 'preserve', preserveFragment: true})
+      this.state.navigateTo(event.group.stId, {queryParamsHandling: 'preserve', preserveFragment: true})
     },
 
     onGroupClick: (event: any) => {