feat: Add Swagger UI pages for ContentService and AnalysisService

Adds /ContentService and /AnalysisService routes that render interactive
Swagger UI API documentation, loaded lazily from vendored swagger-ui-dist
assets. The servers section is hidden since there is only one server.

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

Author: adamjohnwright

package-lock.json

@@ -70,6 +70,7 @@
     "rxjs": "~7.8.0",
     "svg-pan-zoom": "^3.6.1",
     "svgcanvas": "^2.6.0",
+    "swagger-ui-dist": "^5.32.0",
     "tinacms": "^3.4.1",
     "tslib": "^2.3.0",
     "vectorious": "^6.1.12",

package.json

@@ -40,6 +40,10 @@ export const routes: Routes = [
     { 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) },
 
+    //API Documentation (Swagger UI)
+    { path: 'ContentService', loadComponent: () => import('./swagger-page/swagger-page.component').then(m => m.SwaggerPageComponent), data: { serviceName: 'ContentService' } },
+    { path: 'AnalysisService', loadComponent: () => import('./swagger-page/swagger-page.component').then(m => m.SwaggerPageComponent), data: { serviceName: 'AnalysisService' } },
+
     //404 Page
     { path: '404', loadComponent: () => import('./page-not-found/page-not-found.component').then(m => m.PageNotFoundComponent) }, //TODO: Remove?
     /* Non - CMS Pages Above this Line */

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

@@ -0,0 +1 @@
+<div #swaggerContainer class="swagger-container"></div>

projects/website-angular/src/app/swagger-page/swagger-page.component.html

@@ -0,0 +1,9 @@
+.swagger-container {
+  max-width: 1460px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+:host ::ng-deep .scheme-container {
+  display: none;
+}

projects/website-angular/src/app/swagger-page/swagger-page.component.scss

@@ -0,0 +1,69 @@
+import { Component, AfterViewInit, OnDestroy, ElementRef, ViewChild, PLATFORM_ID, Inject } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { isPlatformBrowser } from '@angular/common';
+
+declare const SwaggerUIBundle: any;
+
+@Component({
+  selector: 'app-swagger-page',
+  templateUrl: './swagger-page.component.html',
+  styleUrl: './swagger-page.component.scss',
+})
+export class SwaggerPageComponent implements AfterViewInit, OnDestroy {
+  @ViewChild('swaggerContainer', { static: true }) swaggerContainer!: ElementRef<HTMLDivElement>;
+
+  private serviceName = '';
+  private isBrowser: boolean;
+
+  constructor(
+    private route: ActivatedRoute,
+    @Inject(PLATFORM_ID) platformId: Object,
+  ) {
+    this.isBrowser = isPlatformBrowser(platformId);
+    this.serviceName = this.route.snapshot.data['serviceName'] || 'ContentService';
+  }
+
+  ngAfterViewInit() {
+    if (!this.isBrowser) return;
+    this.loadSwaggerUI();
+  }
+
+  private async loadSwaggerUI() {
+    await this.loadCss('assets/swagger-ui/swagger-ui.css');
+    await this.loadScript('assets/swagger-ui/swagger-ui-bundle.js');
+
+    const url = `https://dev.reactome.org/${this.serviceName}/v3/api-docs`;
+    SwaggerUIBundle({
+      domNode: this.swaggerContainer.nativeElement,
+      url,
+    });
+  }
+
+  private loadScript(src: string): Promise<void> {
+    if (document.querySelector(`script[src="${src}"]`)) return Promise.resolve();
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = src;
+      script.onload = () => resolve();
+      script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
+      document.head.appendChild(script);
+    });
+  }
+
+  private loadCss(href: string): Promise<void> {
+    if (document.querySelector(`link[href="${href}"]`)) return Promise.resolve();
+    return new Promise((resolve) => {
+      const link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = href;
+      link.onload = () => resolve();
+      document.head.appendChild(link);
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.swaggerContainer?.nativeElement) {
+      this.swaggerContainer.nativeElement.innerHTML = '';
+    }
+  }
+}