fix: Fix production build errors for esbuild compatibility

adamjohnwright · claude · adamjohnwright · commit 78c218f81c96 · 2026-03-18T13:02:26.000-04:00
- Change type-only namespace imports to `import type` (Relationship,
  Analysis, TissueExperiment) for isolatedModules compatibility
- Change `import X = Namespace.Type` aliases to `type X = ...`
- Remove unused default import from reactome-cytoscape-style, use
  named Types export instead
- Raise anyComponentStyle budget from 8kB to 16kB
- Add reactome-cytoscape-style library build step to deploy workflow

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -40,7 +40,9 @@ jobs:
         run: npm ci
 
       - name: Build
-        run: npx ng build reactome --configuration production --base-href /${{ steps.version.outputs.version }}/website/
+        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
diff --git a/angular.json b/angular.json
@@ -68,8 +68,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
+                  "maximumWarning": "8kB",
+                  "maximumError": "16kB"
                 }
               ],
               "outputHashing": "all"
@@ -167,8 +167,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
+                  "maximumWarning": "8kB",
+                  "maximumError": "16kB"
                 }
               ],
               "outputHashing": "all"
diff --git a/projects/pathway-browser/src/app/details/common/controller-tree/controller-tree.component.ts b/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";
diff --git a/projects/pathway-browser/src/app/details/common/molecular-process/molecular-process.component.ts b/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";
diff --git a/projects/pathway-browser/src/app/details/common/object-tree/object-tree.component.ts b/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";
diff --git a/projects/pathway-browser/src/app/details/tabs/description-tab/description-overview/description-overview.component.ts b/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({
diff --git a/projects/pathway-browser/src/app/details/tabs/description-tab/description-tab.component.ts b/projects/pathway-browser/src/app/details/tabs/description-tab/description-tab.component.ts
@@ -10,7 +10,7 @@ import {
   TemplateRef,
   viewChild
 } from '@angular/core';
-import {Analysis} from "../../../model/analysis.model";
+import type {Analysis} from "../../../model/analysis.model";
 import {IconService} from "../../../services/icon.service";
 import {
   getProperty,
@@ -37,7 +37,7 @@ import {CatalystActivity} from "../../../model/graph/catalyst-activity.model";
 import {CatalystActivityReference} from "../../../model/graph/control-reference/catalyst-activity-reference.model";
 import {Regulation} from "../../../model/graph/Regulation/regulation.model";
 import {RegulationReference} from "../../../model/graph/control-reference/regulation-reference.model";
-import {Relationship} from "../../../model/graph/relationship.model";
+import type {Relationship} from "../../../model/graph/relationship.model";
 import {DatabaseIdentifier} from "../../../model/graph/database-identifier.model";
 import {
   EntityWithAccessionedSequence
@@ -49,7 +49,7 @@ import {CONTENT_DETAIL, environment} from "../../../../environments/environment"
 import {SpeciesService} from "../../../services/species.service";
 import {Summation} from "../../../model/graph/summation.model";
 import {FigureService} from "./figure/figure.service";
-import HasModifiedResidue = Relationship.HasModifiedResidue;
+type HasModifiedResidue = Relationship.HasModifiedResidue;
 import {MatDivider} from "@angular/material/divider";
 import {MatIcon} from "@angular/material/icon";
 import {MatTooltip} from "@angular/material/tooltip";
diff --git a/projects/pathway-browser/src/app/details/tabs/result-tab/found-table/found-table.component.ts b/projects/pathway-browser/src/app/details/tabs/result-tab/found-table/found-table.component.ts
@@ -3,7 +3,7 @@ import {ExpressionTagComponent} from "../expression-tag/expression-tag.component
 import {MatTableDataSource, MatTableModule} from "@angular/material/table";
 import {TypeSafeMatCellDef} from "../../../../utils/type-safe-mat-cell-def.directive";
 import {TypeSafeMatRowDef} from "../../../../utils/type-safe-mat-row-def.directive";
-import {Analysis} from "../../../../model/analysis.model";
+import type {Analysis} from "../../../../model/analysis.model";
 import {AnalysisService} from "../../../../services/analysis.service";
 import {rxResource} from "@angular/core/rxjs-interop";
 import {of} from "rxjs";
diff --git a/projects/pathway-browser/src/app/details/tabs/result-tab/not-found-table/not-found-table.component.ts b/projects/pathway-browser/src/app/details/tabs/result-tab/not-found-table/not-found-table.component.ts
@@ -5,7 +5,7 @@ import {MatPaginatorModule} from "@angular/material/paginator";
 import {MatTooltipModule} from "@angular/material/tooltip";
 import {TypeSafeMatCellDef} from "../../../../utils/type-safe-mat-cell-def.directive";
 import {TypeSafeMatRowDef} from "../../../../utils/type-safe-mat-row-def.directive";
-import {Analysis} from "../../../../model/analysis.model";
+import type {Analysis} from "../../../../model/analysis.model";
 import {AnalysisService} from "../../../../services/analysis.service";
 import {MatProgressSpinner} from "@angular/material/progress-spinner";
 import {UrlStateService} from "../../../../services/url-state.service";
diff --git a/projects/pathway-browser/src/app/details/tabs/result-tab/result-tab.component.ts b/projects/pathway-browser/src/app/details/tabs/result-tab/result-tab.component.ts
@@ -11,7 +11,7 @@ import {
 } from '@angular/core';
 import {AnalysisService} from "../../../services/analysis.service";
 import {MatTableDataSource, MatTableModule} from "@angular/material/table";
-import {Analysis} from "../../../model/analysis.model";
+import type {Analysis} from "../../../model/analysis.model";
 import {MatPaginator, MatPaginatorModule} from "@angular/material/paginator";
 import {MatSort, MatSortModule, Sort} from "@angular/material/sort";
 import {DecimalPipe} from "@angular/common";
diff --git a/projects/pathway-browser/src/app/diagram/diagram.component.ts b/projects/pathway-browser/src/app/diagram/diagram.component.ts
@@ -37,7 +37,7 @@ import {UntilDestroy} from "@ngneat/until-destroy";
 import {AnalysisService} from "../services/analysis.service";
 import {Graph} from "../model/graph.model";
 import {average, isDefined, isPathwayWithDiagram, isReferenceEntityStId} from "../services/utils";
-import {Analysis} from "../model/analysis.model";
+import type {Analysis} from "../model/analysis.model";
 import {ActivatedRoute, Router} from "@angular/router";
 import {InteractorsComponent} from "../interactors/interactors.component";
 import {EventService} from "../services/event.service";
diff --git a/projects/pathway-browser/src/app/model/graph/database-object.model.ts b/projects/pathway-browser/src/app/model/graph/database-object.model.ts
@@ -1,5 +1,5 @@
 import {InstanceEdit} from "./instance-edit.model";
-import {Relationship} from "./relationship.model";
+import type {Relationship} from "./relationship.model";
 
 export interface DatabaseObject {
   [key: string]: any;
diff --git a/projects/pathway-browser/src/app/model/graph/event/event.model.ts b/projects/pathway-browser/src/app/model/graph/event/event.model.ts
@@ -3,8 +3,8 @@ import {Summation} from "../summation.model";
 import {ReviewStatus} from "../review-status.model";
 import {LiteratureReference} from "../publication/literature-reference.model";
 import {InstanceEdit} from "../instance-edit.model";
-import {Relationship} from "../relationship.model";
-import HasCompartment = Relationship.HasCompartment;
+import type {Relationship} from "../relationship.model";
+type HasCompartment = Relationship.HasCompartment;
 import {Species} from "../species.model";
 import {Disease} from "../external-ontology/disease.model";
 import {InDepth} from "../in-depth.model";
diff --git a/projects/pathway-browser/src/app/model/graph/event/pathway.model.ts b/projects/pathway-browser/src/app/model/graph/event/pathway.model.ts
@@ -1,6 +1,6 @@
 import {Event} from "./event.model";
-import {Relationship} from "../relationship.model";
-import HasEvent = Relationship.HasEvent;
+import type {Relationship} from "../relationship.model";
+type HasEvent = Relationship.HasEvent;
 
 export interface Pathway extends Event {
   events: HasEvent[];
diff --git a/projects/pathway-browser/src/app/model/graph/event/reaction-like-event.model.ts b/projects/pathway-browser/src/app/model/graph/event/reaction-like-event.model.ts
@@ -1,6 +1,6 @@
 import {Event} from "./event.model";
 import {PhysicalEntity} from "../physical-entity/physical-entity.model";
-import {Relationship} from "../relationship.model";
+import type {Relationship} from "../relationship.model";
 import {Anatomy} from "../external-ontology/anatomy.model";
 
 export interface ReactionLikeEvent extends Event {
diff --git a/projects/pathway-browser/src/app/model/graph/physical-entity/physical-entity.model.ts b/projects/pathway-browser/src/app/model/graph/physical-entity/physical-entity.model.ts
@@ -2,7 +2,7 @@ import {DatabaseObject} from "../database-object.model";
 import {InstanceEdit} from "../instance-edit.model";
 import {CatalystActivity} from "../catalyst-activity.model";
 import {CellType} from "../external-ontology/cell-type.model";
-import {Relationship} from "../relationship.model";
+import type {Relationship} from "../relationship.model";
 import {DatabaseIdentifier} from "../database-identifier.model";
 import {Disease} from "../external-ontology/disease.model";
 import {MarkerReference} from "../control-reference/marker-reference.model";
diff --git a/projects/pathway-browser/src/app/model/graph/physical-entity/summary-entity.model.ts b/projects/pathway-browser/src/app/model/graph/physical-entity/summary-entity.model.ts
@@ -1,8 +1,8 @@
 import {PhysicalEntity} from "./physical-entity.model";
 import {ReferenceEntity} from "../reference-entity/reference-entity.model";
 import {Taxon} from "../taxon.model";
-import {Relationship} from "../relationship.model";
-import HasModifiedResidue = Relationship.HasModifiedResidue;
+import type {Relationship} from "../relationship.model";
+type HasModifiedResidue = Relationship.HasModifiedResidue;
 import {ReferenceDatabase} from "../reference-database.model";
 import {DatabaseIdentifier} from "../database-identifier.model";
 import {ReferenceGeneProduct} from "../reference-entity/reference-gene-product.model";
diff --git a/projects/pathway-browser/src/app/reacfoam/reacfoam.service.ts b/projects/pathway-browser/src/app/reacfoam/reacfoam.service.ts
@@ -10,7 +10,7 @@ import {rxResource} from "@angular/core/rxjs-interop";
 import chroma from "chroma-js";
 import {AnalysisService} from "../services/analysis.service";
 import {DarkService} from "../services/dark.service";
-import {Analysis} from "../model/analysis.model";
+import type {Analysis} from "../model/analysis.model";
 import {extract, Style} from "reactome-cytoscape-style";
 import {isArray} from "lodash";
 
diff --git a/projects/pathway-browser/src/app/services/analysis.service.ts b/projects/pathway-browser/src/app/services/analysis.service.ts
@@ -2,7 +2,7 @@ import {computed, effect, inject, Injectable, linkedSignal, signal, WritableSign
 import {catchError, EMPTY, Observable, of, switchMap, tap} from "rxjs";
 import {HttpClient} from "@angular/common/http";
 import {environment} from "../../environments/environment";
-import {Analysis} from "../model/analysis.model";
+import type {Analysis} from "../model/analysis.model";
 import {UrlStateService} from "./url-state.service";
 import chroma, {Color, Scale} from "chroma-js";
 import {extract, Style} from "reactome-cytoscape-style";
@@ -15,7 +15,7 @@ import {isDefined, shouldBeScientificFormat} from "./utils";
 import {Report} from "reactome-gsa-form/lib/model/report-status.model";
 import {Species} from "../model/graph/species.model";
 import {SpeciesService} from "./species.service";
-import NotFoundIdentifier = Analysis.NotFoundIdentifier;
+type NotFoundIdentifier = Analysis.NotFoundIdentifier;
 
 export interface Pagination extends Params {
   page: number,
diff --git a/projects/pathway-browser/src/app/services/diagram.service.ts b/projects/pathway-browser/src/app/services/diagram.service.ts
@@ -3,7 +3,7 @@ import {catchError, forkJoin, map, Observable, of, switchMap, tap} from "rxjs";
 import {HttpClient} from "@angular/common/http";
 import {Diagram, Edge, Node, NodeConnector, Position, Prop, Rectangle} from "../model/diagram.model";
 import {Graph} from "../model/graph.model";
-import Reactome, {Style} from "reactome-cytoscape-style";
+import {Style, Types} from "reactome-cytoscape-style";
 import legend from "../../assets/json/legend.json"
 import {array} from "vectorious";
 
@@ -12,9 +12,9 @@ import cytoscapeFcose, {FcoseLayoutOptions} from "cytoscape-fcose";
 import {CONTENT_SERVICE, environment} from "../../environments/environment";
 import {SchemaClasses} from "../constants/constants";
 import {GeneralService} from "./general.service";
-import NodeDefinition = Reactome.Types.NodeDefinition;
-import ReactionDefinition = Reactome.Types.ReactionDefinition;
-import EdgeTypeDefinition = Reactome.Types.EdgeTypeDefinition;
+type NodeDefinition = Types.NodeDefinition;
+type ReactionDefinition = Types.ReactionDefinition;
+type EdgeTypeDefinition = Types.EdgeTypeDefinition;
 
 cytoscape.use(cytoscapeFcose)
 
diff --git a/projects/pathway-browser/src/app/services/ehld.service.ts b/projects/pathway-browser/src/app/services/ehld.service.ts
@@ -1,7 +1,7 @@
 import {computed, ElementRef, Injectable} from '@angular/core';
 import {Observable} from "rxjs";
 import {HttpClient} from "@angular/common/http";
-import {Analysis} from "../model/analysis.model";
+import type {Analysis} from "../model/analysis.model";
 import {isArray} from "lodash";
 import {AnalysisService} from "./analysis.service";
 import {DataStateService} from "./data-state.service";
diff --git a/projects/pathway-browser/src/app/services/event.service.ts b/projects/pathway-browser/src/app/services/event.service.ts
@@ -19,18 +19,18 @@ import {
 import {UrlStateService} from "./url-state.service";
 import {Event} from "../model/graph/event/event.model";
 import {MatTree} from "@angular/material/tree";
-import {Analysis} from "../model/analysis.model";
+import type {Analysis} from "../model/analysis.model";
 import {AnalysisService} from "./analysis.service";
 import {EhldService} from "./ehld.service";
 import {TopLevelPathway} from "../model/graph/event/top-level-pathway.model";
 import {DatabaseObject} from "../model/graph/database-object.model";
 import {isDefined, isPathway, isPhysicalEntity, isRLE} from "./utils";
 import {DatabaseObjectService} from "./database-object.service";
 import {PhysicalEntity} from "../model/graph/physical-entity/physical-entity.model";
-import {Relationship} from "../model/graph/relationship.model";
+import type {Relationship} from "../model/graph/relationship.model";
 import {toObservable} from "@angular/core/rxjs-interop";
 import {Pathway} from "../model/graph/event/pathway.model";
-import HasEvent = Relationship.HasEvent;
+type HasEvent = Relationship.HasEvent;
 import {SummaryEntity} from "../model/graph/physical-entity/summary-entity.model";
 
 
diff --git a/projects/pathway-browser/src/app/services/url-state.service.ts b/projects/pathway-browser/src/app/services/url-state.service.ts
@@ -5,7 +5,7 @@ import {isArray, isNumber} from "lodash";
 import {HttpClient} from "@angular/common/http";
 import {CONTENT_SERVICE} from "../../environments/environment";
 import {PaletteName} from "./analysis.service";
-import {Analysis} from "../model/analysis.model";
+import type {Analysis} from "../model/analysis.model";
 import {UntilDestroy, untilDestroyed} from "@ngneat/until-destroy";
 import {toSignal} from "@angular/core/rxjs-interop";
 
diff --git a/projects/pathway-browser/src/app/services/utils.ts b/projects/pathway-browser/src/app/services/utils.ts
@@ -10,7 +10,7 @@ import {LiteratureReference} from "../model/graph/publication/literature-referen
 import {SchemaClasses} from "../constants/constants";
 import {CatalystActivity} from "../model/graph/catalyst-activity.model";
 import {Regulation} from "../model/graph/Regulation/regulation.model";
-import {Relationship} from "../model/graph/relationship.model";
+import type {Relationship} from "../model/graph/relationship.model";
 import {ReferenceGroup} from "../model/graph/reference-entity/reference-group.model";
 import {ReplacedResidue} from "../model/graph/abstract-modified-residue/replaced-residue.model";
 import {FragmentModification} from "../model/graph/abstract-modified-residue/fragment-modification.model";
@@ -24,7 +24,7 @@ import {SummaryEntity} from "../model/graph/physical-entity/summary-entity.model
 import {ReferenceSequence} from "../model/graph/reference-entity/reference-sequence.model";
 import {ReferenceGeneProduct} from "../model/graph/reference-entity/reference-gene-product.model";
 import {WritableSignal} from "@angular/core";
-import HasModifiedResidue = Relationship.HasModifiedResidue;
+type HasModifiedResidue = Relationship.HasModifiedResidue;
 
 export function isDefined<T>(value: T | undefined | null): value is T {
   return value !== undefined && value !== null
diff --git a/projects/pathway-browser/src/app/viewport/analysis-form/tissue-analysis/tissue-analysis.component.ts b/projects/pathway-browser/src/app/viewport/analysis-form/tissue-analysis/tissue-analysis.component.ts
@@ -3,7 +3,7 @@ import {MatFormField, MatLabel, MatOption, MatSelect} from "@angular/material/se
 import {TissueExperimentService} from "./tissue-experiment/tissue-experiment.service";
 import {MatProgressSpinner} from "@angular/material/progress-spinner";
 import {MatTooltip} from "@angular/material/tooltip";
-import {TissueExperiment} from "./tissue-experiment/tissue-experiment.model";
+import type {TissueExperiment} from "./tissue-experiment/tissue-experiment.model";
 import {AnalysisService} from "../../../services/analysis.service";
 import type {DotLottie} from "@lottiefiles/dotlottie-web";
 import {LottieService} from "../../../services/lottie.service";
@@ -12,7 +12,7 @@ import {MatButton, MatIconButton} from "@angular/material/button";
 import {MatIcon} from "@angular/material/icon";
 import {add} from "vectorious";
 import {animate, group, sequence, style, transition, trigger} from "@angular/animations";
-import Summary = TissueExperiment.Summary;
+type Summary = TissueExperiment.Summary;
 import {MatStep, MatStepper, MatStepperNext, MatStepperPrevious} from "@angular/material/stepper";
 import {FormBuilder, FormControl} from "@angular/forms";
 import {AsyncPipe} from "@angular/common";
diff --git a/projects/pathway-browser/src/app/viewport/analysis-form/tissue-analysis/tissue-experiment/tissue-experiment.service.ts b/projects/pathway-browser/src/app/viewport/analysis-form/tissue-analysis/tissue-experiment/tissue-experiment.service.ts
@@ -1,6 +1,6 @@
 import {Injectable, ResourceRef} from '@angular/core';
 import {HttpClient} from "@angular/common/http";
-import {TissueExperiment} from "./tissue-experiment.model";
+import type {TissueExperiment} from "./tissue-experiment.model";
 import {Observable} from "rxjs";
 import {environment} from "../../../../../environments/environment";
 import {rxResource} from "@angular/core/rxjs-interop";

Original file line number	Diff line number	Diff line change
`@@ -68,8 +68,8 @@`
`68`	`68`	`},`
`69`	`69`	`{`
`70`	`70`	`"type": "anyComponentStyle",`
`71`		`- "maximumWarning": "4kB",`
`72`		`- "maximumError": "8kB"`
	`71`	`+ "maximumWarning": "8kB",`
	`72`	`+ "maximumError": "16kB"`
`73`	`73`	`}`
`74`	`74`	`],`
`75`	`75`	`"outputHashing": "all"`
`@@ -167,8 +167,8 @@`
`167`	`167`	`},`
`168`	`168`	`{`
`169`	`169`	`"type": "anyComponentStyle",`
`170`		`- "maximumWarning": "4kB",`
`171`		`- "maximumError": "8kB"`
	`170`	`+ "maximumWarning": "8kB",`
	`171`	`+ "maximumError": "16kB"`
`172`	`172`	`}`
`173`	`173`	`],`
`174`	`174`	`"outputHashing": "all"`