Fix production build and navigation for S3/CloudFront deployment

.github/workflows/deploy.yml

@@ -0,0 +1,63 @@
+name: Deploy to S3
+
+on:
+  push:
+    branches:
+      - main
+      - prod
+
+permissions:
+  id-token: write
+  contents: read
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Determine version
+        id: version
+        run: |
+          PROD_VERSION=$(curl -sf https://reactome.org/ContentService/data/database/version)
+          echo "prod_version=$PROD_VERSION" >> "$GITHUB_OUTPUT"
+
+          if [ "${{ github.ref_name }}" = "prod" ]; then
+            VERSION=$PROD_VERSION
+          else
+            VERSION=$((PROD_VERSION + 1))
+          fi
+          echo "version=$VERSION" >> "$GITHUB_OUTPUT"
+          echo "Deploying to version $VERSION"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: |
+          npx ng build reactome-cytoscape-style
+          npx ng build reactome --configuration production --base-href /${{ steps.version.outputs.version }}/website/
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: ${{ vars.AWS_ROLE }}
+          aws-region: us-east-1
+
+      - name: Deploy to S3
+        run: |
+          aws s3 sync dist/reactome/browser/ \
+            s3://${{ vars.S3_BUCKET }}/${{ steps.version.outputs.version }}/website/ \
+            --delete
+
+      - name: Invalidate CloudFront cache
+        run: |
+          aws cloudfront create-invalidation \
+            --distribution-id E2WMIF8KN88WPK \
+            --paths "/${{ steps.version.outputs.version }}/website/*"

angular.json

@@ -68,8 +68,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
+                  "maximumWarning": "8kB",
+                  "maximumError": "16kB"
                 }
               ],
               "outputHashing": "all"
@@ -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"],
@@ -167,8 +172,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
+                  "maximumWarning": "8kB",
+                  "maximumError": "16kB"
                 }
               ],
               "outputHashing": "all"

projects/pathway-browser/src/app/details/common/controller-tree/controller-tree.component.ts

@@ -3,7 +3,7 @@ import {DatabaseObject} from "../../../model/graph/database-object.model";
 import {PageEvent} from "@angular/material/paginator";
 import {isArray, max} from "lodash";
 import {InDepth} from "../../../model/graph/in-depth.model";
-import {Relationship} from "../../../model/graph/relationship.model";
+import type {Relationship} from "../../../model/graph/relationship.model";
 import {MatPaginator} from "@angular/material/paginator";
 import {ObjectTreeComponent} from "../object-tree/object-tree.component";
 import {MatSlider, MatSliderThumb} from "@angular/material/slider";

projects/pathway-browser/src/app/details/common/molecular-process/molecular-process.component.ts

@@ -1,7 +1,7 @@
 import {Component, computed, input} from '@angular/core';
 import {CatalystActivityReference} from "../../../model/graph/control-reference/catalyst-activity-reference.model";
 import {CatalystActivity} from "../../../model/graph/catalyst-activity.model";
-import {Relationship} from "../../../model/graph/relationship.model";
+import type {Relationship} from "../../../model/graph/relationship.model";
 import {Regulation} from "../../../model/graph/Regulation/regulation.model";
 import {IconService} from "../../../services/icon.service";
 import {RegulationReference} from "../../../model/graph/control-reference/regulation-reference.model";
@@ -18,7 +18,7 @@ import {
   isReplacedResidue
 } from "../../../services/utils";
 import {MolecularProcess} from "../../../model/graph/molecular-process.model";
-import HasModifiedResidue = Relationship.HasModifiedResidue;
+type HasModifiedResidue = Relationship.HasModifiedResidue;
 import {ObjectTreeComponent} from "../object-tree/object-tree.component";
 import {MatIcon} from "@angular/material/icon";
 import {MatTooltip} from "@angular/material/tooltip";

projects/pathway-browser/src/app/details/common/object-tree/object-tree.component.ts

@@ -35,7 +35,7 @@ import {SchemaClasses} from "../../../constants/constants";
 import {IconService} from "../../../services/icon.service";
 import {EntityService} from "../../../services/entity.service";
 import {DataStateService} from "../../../services/data-state.service";
-import {Relationship} from "../../../model/graph/relationship.model";
+import type {Relationship} from "../../../model/graph/relationship.model";
 import {cloneDeep, isArray} from "lodash";
 import {UrlStateService} from "../../../services/url-state.service";
 import {NgClass} from "@angular/common";

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-overview/description-overview.component.ts

@@ -4,13 +4,13 @@ import {getProperty} from "../../../../services/utils";
 import {Anatomy} from "../../../../model/graph/external-ontology/anatomy.model";
 import {ReviewStatus} from "../../../../model/graph/review-status.model";
 import {DataKeys} from "../../../../constants/constants";
-import {Relationship} from "../../../../model/graph/relationship.model";
+import type {Relationship} from "../../../../model/graph/relationship.model";
 import {Disease} from "../../../../model/graph/external-ontology/disease.model";
 import {CellType} from "../../../../model/graph/external-ontology/cell-type.model";
 import {TitleCasePipe} from "@angular/common";
 import {OntologyTermComponent} from "../../../common/ontology-term/ontology-term.component";
 import {MatProgressSpinner} from "@angular/material/progress-spinner";
-import HasCompartment = Relationship.HasCompartment;
+type HasCompartment = Relationship.HasCompartment;
 
 
 @Component({

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>
+