Merge branch 'main' into adding-tests

Author: el-rabies

.dockerignore

@@ -0,0 +1,9 @@
+node_modules
+.angular
+.git
+dist
+.vscode
+npm-debug.log
+# Add these for TinaCMS
+.tina/__generated__
+.tina/out

.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/*"

.github/workflows/prettier.yml

@@ -1,7 +1,6 @@
 name: autofix.ci
 on:
   pull_request:
-  push:
 
 permissions:
   contents: write
@@ -30,6 +29,17 @@ jobs:
             echo "No files to format"
           fi
 
-      - uses: autofix-ci/action@v1
-        with:
-          commit-message: "Apply Prettier format"
+      - name: Commit formatted changes
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+
+          if [ -n "$(git status --porcelain)" ]; then
+            # Check out the PR branch to avoid detached HEAD
+            git checkout ${{ github.head_ref }}
+            git add --all
+            git commit -m "chore: Apply Prettier formatting"
+            git push origin ${{ github.head_ref }}
+          else
+            echo "No formatting changes to commit"
+          fi

Dockerfile

@@ -0,0 +1,27 @@
+FROM node:22
+
+WORKDIR /app
+
+# 1. Install Global Tools
+RUN npm install -g @angular/cli@19 tsx
+
+# 2. Copy Package files
+COPY package*.json ./
+
+# 3. Inject the Host/Poll flags directly into the package.json scripts
+# This prevents the "Invalid Option: --host" error
+RUN sed -i 's/ng serve/ng serve --host 0.0.0.0 --poll 2000/g' package.json
+
+# 4. Install Dependencies
+RUN npm install --legacy-peer-deps --ignore-scripts
+
+# 5. Copy the rest of the code
+COPY . .
+
+# Expose the ports
+EXPOSE 4200
+EXPOSE 4001
+
+# We use "npm run dev:serve" but pass the flags through the -- separator
+CMD npx tsx projects/website-angular/src/scripts/generate-index.ts && \
+    npx tinacms dev --rootPath projects/website-angular -c "ng serve --host 0.0.0.0 --poll 2000 --disable-host-check"

README.md

@@ -1,59 +1,31 @@
 # Reactome
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.1.2.
+REACTOME is an open-source, open access, manually curated and peer-reviewed pathway database.
 
-## Development server
-
-To start a local development server, run:
-
-```bash
-ng serve
-```
-
-Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
-
-## Code scaffolding
-
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+## Local Development Server
+To setup a local environment
 
 ```bash
-ng generate component component-name
+npm install --legacy-peer-deps
+npm start
 ```
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
-
-```bash
-ng generate --help
-```
+## Usage
+Reactome has a wide range of features, to explore more of Reactome or get more information visit [the documentation page](https://reactome.org/documentation) or see the ````/documentation```` folder in the root directory.
 
-## Building
+## Configuration
 
-To build the project run:
+The application configuration is centralized in TypeScript files under `projects/website-angular/src/config/`. Key configurations include:
 
-```bash
-ng build
-```
-
-This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
-
-## Running unit tests
-
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
-
-```bash
-ng test
-```
-
-## Running end-to-end tests
-
-For end-to-end (e2e) testing, run:
-
-```bash
-ng e2e
-```
+- `config.ts`: App-level settings like version, base URLs, and feature flags.
+- `environments.ts`: Environment-specific settings (development, production, etc.).
+- `api-routes.ts`: API endpoint URLs derived from the current environment.
+- `features.ts`: Feature flags for toggling functionality.
+- `external-links.ts`: External links, including dynamically constructed release notes.
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+To update configuration values, edit the respective TS files. For environment-specific builds, consider using Angular's file replacements in `angular.json`.
 
 ## Additional Resources
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+## LICENSE
+[Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0)

angular.json

@@ -68,8 +68,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
+                  "maximumWarning": "8kB",
+                  "maximumError": "16kB"
                 }
               ],
               "outputHashing": "all"
@@ -172,8 +172,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "4kB",
-                  "maximumError": "8kB"
+                  "maximumWarning": "8kB",
+                  "maximumError": "16kB"
                 }
               ],
               "outputHashing": "all"
@@ -420,5 +420,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": "50c0c135-7597-4d12-af2a-c2f05c84c5b1"
   }
 }

docker-compose.yml

@@ -0,0 +1,16 @@
+services:
+  app:
+    build: .
+    ports:
+      - "4200:4200"
+      - "4001:4001"
+    volumes:
+      - .:/app
+      - /app/node_modules
+      # This ensures the nested tina folder is visible to the watcher
+      - ./projects/website-angular/tina:/app/projects/website-angular/tina
+    environment:
+      - NG_CLI_ANALYTICS=false
+      - NODE_ENV=development
+    stdin_open: true
+    tty: true

documentation/PathwayBrowser/pathway-browser.md

@@ -0,0 +1,3 @@
+# PathwayBrowser
+[Userguide](http://localhost:4200/documentation/userguide/pathway-browser)
+Dev docs loading...

documentation/WebsiteAngular/adding-components.md

@@ -0,0 +1,10 @@
+# Adding Components to Reactome
+## What is a Component 
+"Components are the main building blocks of Angular applications. Each component represents a part of a larger web page. Organizing an application into components helps provide structure to your project, clearly separating code into specific parts that are easy to maintain and grow over time." - [Angular Docs](https://angular.dev/essentials/components)  
+
+## How to Add one
+To add a component to this project use the following command
+````
+ng generate component <Component name and path here>
+````
+and edit the files it generates to your hearts content. You will then be able to use the component wherever you want in the HTML files.

documentation/WebsiteAngular/adding-pages.md

@@ -0,0 +1,10 @@
+# Adding a Page to Reactome
+The first thing to consider here is whether or not your page needs custom angular functionality. If the pages will be comprised of only text, images and video, a TinaCMS page will suffice and you can follow the TinaCMS tutorial instead.  
+
+To create a new angular page follow these steps
+1. Generate a new component (this will be your page)  
+Follow the tutorial in adding-components
+2. Add the route for your page in ````projects/website-angular/src/app/app.routes.ts````  
+Your "route" is what makes your page show up at the correct address in the browser.
+3. Edit your page to your hearts content.  
+This step will require a bit more creativity and Angular experience. I can't be sure what kind of page you are creating so do your best to get the functionality your need with the power of the internet on your side. I believe in you!