feat: Add detail pages with Locations in the PathwayBrowser tree

Add /content/detail/:id route with a full detail page that includes:
- Description tab (reusing PathwayBrowser's DescriptionTabComponent)
- Locations in the PathwayBrowser section showing hierarchical tree
  of where an entity/event exists in Reactome's pathway hierarchy
- Provider stubs for services required by the description tab
- Animations support and PDBe Molstar for structure visualization

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

Author: adamjohnwright

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

@@ -50,6 +50,12 @@ 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 {SortByDatePipe} from "../../../pipes/sort-by-date.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";
@@ -76,6 +82,14 @@ import {InteractorsTableComponent} from "../../common/interactors-table/interact
   styleUrl: './description-tab.component.scss',
   standalone: true,
   imports: [
+    NgTemplateOutlet,
+    NgClass,
+    KeyValuePipe,
+    RouterLink,
+    SortByTextPipe,
+    SortByDatePipe,
+    IncludeRefPipe,
+    AuthorshipDateFormatPipe,
     MatDivider,
     MatIcon,
     MatTooltip,

projects/website-angular/src/app/app.routes.ts

@@ -36,6 +36,9 @@ export const routes: Routes = [
     { path: 'content/schema', loadComponent: () => import('./content/schema/schema.component').then(m => m.SchemaComponent), pathMatch: 'full' },
     { path: 'content/schema/:className', loadComponent: () => import('./content/schema/schema.component').then(m => m.SchemaComponent), pathMatch: 'full' },
 
+    //Detail Pages
+    { path: 'content/detail/:id', loadComponent: () => import('./content/detail/detail.component').then(m => m.DetailComponent) },
+
     //Search Pages
     { path: 'content/query', loadComponent: () => import('./search/search.component').then(m => m.SearchComponent) },
     { path: 'tools/site-search', loadComponent: () => import('./site-search/site-search.component').then(m => m.SiteSearchComponent) },

projects/website-angular/src/app/content/detail/detail.component.html

@@ -0,0 +1,19 @@
+<app-page-layout [showSidebar]="false" [showBreadcrumb]="false">
+  @if (loading()) {
+    <div class="loading-container">
+      <mat-spinner diameter="48"></mat-spinner>
+    </div>
+  } @else if (error()) {
+    <div class="error-container">
+      <h2>Entity not found</h2>
+      <p>The requested entity could not be found.</p>
+    </div>
+  } @else if (obj()) {
+    <div class="detail-container">
+      @if (entityId()) {
+        <app-locations-tree [id]="entityId()!" />
+      }
+      <cr-description-tab [obj]="obj()!" />
+    </div>
+  }
+</app-page-layout>

projects/website-angular/src/app/content/detail/detail.component.scss

@@ -0,0 +1,62 @@
+:host {
+  display: block;
+}
+
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 300px;
+}
+
+.error-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+  color: var(--on-surface);
+
+  h2 {
+    margin-bottom: 8px;
+  }
+
+  p {
+    color: var(--outline);
+  }
+}
+
+.detail-container {
+  container: bottom-panel / inline-size;
+  width: 100%;
+}
+
+::ng-deep cr-description-tab {
+  // Double the ID selector to beat Angular's encapsulated
+  // #details[_ngcontent-xxx] specificity (0,2,0) with (0,2,1)
+  #details#details {
+    height: auto;
+    overflow-y: visible;
+    overflow-x: visible;
+    padding: 0;
+  }
+
+  #details {
+    .content {
+      min-width: 0;
+      overflow-x: auto;
+    }
+
+    .details-button {
+      display: none;
+    }
+
+    .toc {
+      height: auto;
+      max-height: calc(100vh - 100px);
+      overflow-y: auto;
+      position: sticky;
+      top: 80px;
+    }
+  }
+}

projects/website-angular/src/app/content/detail/detail.component.ts

@@ -0,0 +1,111 @@
+import {Component, inject, OnInit, signal} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {DomSanitizer} from '@angular/platform-browser';
+import {MatIconRegistry} from '@angular/material/icon';
+import {MatProgressSpinner} from '@angular/material/progress-spinner';
+import {of} from 'rxjs';
+
+import {PageLayoutComponent} from '../../page-layout/page-layout.component';
+import {
+  DescriptionTabComponent
+} from '../../../../../pathway-browser/src/app/details/tabs/description-tab/description-tab.component';
+import {SelectableObject} from '../../../../../pathway-browser/src/app/services/event.service';
+import {UrlStateService} from '../../../../../pathway-browser/src/app/services/url-state.service';
+import {DataStateService} from '../../../../../pathway-browser/src/app/services/data-state.service';
+import {EntityService} from '../../../../../pathway-browser/src/app/services/entity.service';
+import {InteractorService} from '../../../../../pathway-browser/src/app/interactors/services/interactor.service';
+import {FigureService} from '../../../../../pathway-browser/src/app/details/tabs/description-tab/figure/figure.service';
+import {SpeciesService} from '../../../../../pathway-browser/src/app/services/species.service';
+import {DiagramService} from '../../../../../pathway-browser/src/app/services/diagram.service';
+import {ParticipantService} from '../../../../../pathway-browser/src/app/services/participant.service';
+import {IconService} from '../../../../../pathway-browser/src/app/services/icon.service';
+
+import {LocationsTreeComponent} from './locations-tree/locations-tree.component';
+import {DetailDataService} from '../../../services/detail-data.service';
+import {DetailUrlState} from './providers/detail-url-state.provider';
+import {DetailDataState} from './providers/detail-data-state.provider';
+import {DetailEntityService} from './providers/detail-entity.provider';
+import {DetailInteractorService} from './providers/detail-interactor.provider';
+import {DetailFigureService} from './providers/detail-figure.provider';
+import {DetailSpeciesService} from './providers/detail-species.provider';
+
+@Component({
+  selector: 'app-detail',
+  standalone: true,
+  imports: [PageLayoutComponent, DescriptionTabComponent, LocationsTreeComponent, MatProgressSpinner],
+  providers: [
+    {provide: UrlStateService, useClass: DetailUrlState},
+    {provide: DataStateService, useClass: DetailDataState},
+    {provide: EntityService, useClass: DetailEntityService},
+    {provide: InteractorService, useClass: DetailInteractorService},
+    {provide: FigureService, useClass: DetailFigureService},
+    {provide: SpeciesService, useClass: DetailSpeciesService},
+    {provide: DiagramService, useValue: {}},
+    {provide: ParticipantService, useValue: {getReferenceEntities: () => of([])}},
+  ],
+  templateUrl: './detail.component.html',
+  styleUrl: './detail.component.scss',
+})
+export class DetailComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private detailDataService = inject(DetailDataService);
+  private dataState = inject(DataStateService) as unknown as DetailDataState;
+  private matIconRegistry = inject(MatIconRegistry);
+  private domSanitizer = inject(DomSanitizer);
+  private iconService = inject(IconService);
+
+  entityId = signal<string | null>(null);
+  obj = signal<SelectableObject | undefined>(undefined);
+  loading = signal(true);
+  error = signal(false);
+
+  constructor() {
+    this.registerIcons();
+  }
+
+  private registerIcons() {
+    const speciesIcons = this.iconService.getSpeciesIcons();
+    const generalIcons = this.iconService.getGeneralIcons();
+    const reactomeSubjectIcons = this.iconService.getReactomeSubjectIcons();
+
+    this.matIconRegistry.registerFontClassAlias('symbols', 'material-symbols-rounded');
+
+    speciesIcons.forEach(icon => {
+      this.matIconRegistry.addSvgIcon(icon.name, this.domSanitizer.bypassSecurityTrustResourceUrl(`assets/icons/species/${icon.route}.svg`));
+    });
+
+    generalIcons.forEach(icon => {
+      this.matIconRegistry.addSvgIcon(icon.name, this.domSanitizer.bypassSecurityTrustResourceUrl(`assets/icons/general/${icon.route}.svg`));
+    });
+
+    Object.values(reactomeSubjectIcons).forEach((icon) => {
+      this.matIconRegistry.addSvgIcon(icon.name, this.domSanitizer.bypassSecurityTrustResourceUrl(`assets/icons/reactome-subject/${icon.route}.svg`));
+    });
+  }
+
+  ngOnInit() {
+    const id = this.route.snapshot.paramMap.get('id');
+    this.entityId.set(id);
+    if (!id) {
+      this.loading.set(false);
+      this.error.set(true);
+      return;
+    }
+
+    this.detailDataService.fetchEnhancedData<SelectableObject>(id).subscribe({
+      next: (data) => {
+        if (data) {
+          this.obj.set(data);
+          this.dataState.selectedElement.set(data);
+        } else {
+          this.error.set(true);
+        }
+        this.loading.set(false);
+      },
+      error: () => {
+        this.error.set(true);
+        this.loading.set(false);
+      }
+    });
+  }
+}

projects/website-angular/src/app/content/detail/locations-tree/locations-tree.component.html

@@ -0,0 +1,52 @@
+@if (trees().length) {
+  <div class="locations-section">
+    <div class="header">
+      <div class="label">
+        <span class="name">Locations in the PathwayBrowser</span>
+      </div>
+      <button class="expand-all-btn" (click)="toggleAll()">
+        {{ allExpanded() ? 'Collapse all' : 'Expand all' }}
+      </button>
+    </div>
+
+    <div class="tree-list">
+      @for (root of trees(); track nodeKey(root)) {
+        <ng-container
+          *ngTemplateOutlet="treeNode; context: { $implicit: root, level: 0 }"
+        />
+      }
+    </div>
+  </div>
+}
+
+<ng-template #treeNode let-node let-level="level">
+  <div class="tree-node" [style.padding-left.px]="level * 20">
+    <div class="node-row">
+      @if (hasChildren(node)) {
+        <button class="toggle-btn" (click)="toggleNode(nodeKey(node))">
+          <mat-icon class="expand-icon" fontSet="symbols">
+            {{ isExpanded(nodeKey(node)) ? 'expand_more' : 'chevron_right' }}
+          </mat-icon>
+        </button>
+      } @else {
+        <span class="toggle-placeholder"></span>
+      }
+      <mat-icon class="type-icon" [svgIcon]="getIconName(node.type)"></mat-icon>
+      @if (hasChildren(node)) {
+        <span class="node-name">{{ node.name }}</span>
+      } @else {
+        <a class="node-name leaf-link" [href]="node.url">{{ node.name }}</a>
+      }
+      @if (node.species) {
+        <span class="node-species">({{ node.species }})</span>
+      }
+    </div>
+    @if (hasChildren(node) && isExpanded(nodeKey(node))) {
+      @for (child of node.children; track nodeKey(child)) {
+        <ng-container
+          *ngTemplateOutlet="treeNode; context: { $implicit: child, level: level + 1 }"
+        />
+      }
+    }
+  </div>
+</ng-template>