HSF · deveshbervar · Jan 6, 2025 · Feb 9, 2026 · Feb 9, 2026 · Feb 9, 2026
diff --git a/.github/workflows/smoke_test.yml b/.github/workflows/smoke_test.yml
@@ -13,26 +13,26 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - name: Checkout code
-      uses: actions/checkout@v4
+      - name: Checkout code
+        uses: actions/checkout@v4
 
-    - name: Set up Docker Buildx
-      uses: docker/setup-buildx-action@v3
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
 
-    - name: Build Docker image
-      run: docker build -t phoenix-app .
+      - name: Build Docker image
+        run: docker build -t phoenix-app .
 
-    - name: Run Docker container
-      run: |
-        docker run -d --name phoenix-container -p 3000:80 phoenix-app
-        sleep 10  # Give some time for the container to start
+      - name: Run Docker container
+        run: |
+          docker run -d --name phoenix-container -p 3000:80 phoenix-app
+          sleep 10  # Give some time for the container to start
 
-    - name: Smoke test
-      run: |
-        # Example smoke test using curl
-        curl --fail http://localhost:3000/ || (docker logs phoenix-container && exit 1)
+      - name: Smoke test
+        run: |
+          # Example smoke test using curl
+          curl --fail http://localhost:3000/ || (docker logs phoenix-container && exit 1)
 
-    - name: Cleanup
-      run: |
-        docker stop phoenix-container
-        docker rm phoenix-container
+      - name: Cleanup
+        run: |
+          docker stop phoenix-container
+          docker rm phoenix-container
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -2,14 +2,14 @@ nodeLinker: node-modules
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
+    spec: '@yarnpkg/plugin-interactive-tools'
 
 yarnPath: .yarn/releases/yarn-3.3.1.cjs
 
 checksumBehavior: update
 
 packageExtensions:
-  "jsroot@*":
+  'jsroot@*':
     dependencies:
-      jspdf: "*"
-      svg2pdf.js: "*"
+      jspdf: '*'
+      svg2pdf.js: '*'
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,88 +1,92 @@
-# Contributing
-
-## 1. Issue tracking
-
-The best way to start contributing is to explore the GitHub issue tracker for the repository.
-
-If you have already tried the application feel free to open an issue if you notice any bug or feature that could be improved.
-
-Include a brief description and context of the issue, and optionally choose labels to mark the issue as `bug`, `enhancement`, `question`...
-to give extra information to other developers.
-
-## 2. Coding
-
-Once you are decided to start contributing on the repository, take a look at the [Developer guide](./guides/developers#readme) to get a more detailed understanding.
-
-### Code formatting
-
-We use [ESLint](http://github.com/eslint/eslint) for linting of TypeScript code and [Prettier](http://github.com/prettier/prettier) for linting of all other files. You can set up ESLint with your editor following [these instructions](https://eslint.org/docs/user-guide/integrations). We also have scripts to check and update code.
-
-To check:
-
-```sh
-yarn lint
-```
-
-To update:
-
-```sh
-yarn lint:fix
-```
-
-If you're using Visual Studio Code, you can also add the [prettier plugin](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) and then choose 'Format Document' with this linting tool.
-
-### Running linters against staged git files
-We use [lint-staged](https://github.com/okonet/lint-staged) to make sure we are not committing the usually unwanted linting error on the CI and it helps us to focus on the actual problem if we see a failed CI output. It runs our linters everytime we do a `git commit` and automatically fixes any linting errors it sees inside the project. 
-
-### CI tests
-We make use of continuous integration (CI) tests for each code change. You can (and should!) run this locally on PRs:
-```sh
-yarn test:ci
-```
-Please see the [relevant part](./guides/developers/test-setup.md) of the [Developer guide](./guides/developers#readme) for more information e.g. how to fix common problems.
-
-## 3. Commit messages
-
-For commit messages, we follow a tweaked version of [angular commit convention](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit).
-
-Namely, every message should consist of:
-
-```
-<header>
-<body>
-```
-
-The `header` is mandatory and must conform to the `Commit Message Header` format (see below).
-
-The `body` is encouraged, and should describe in more detail what is being changed.
-
-### Commit message header
-
-```
-<type>(<scope>): <short summary>
-  │       │             │
-  │       │             └─⫸ Summary in present tense. Not capitalized. No period at the end.
-  │       │
-  │       └─⫸ Commit Scope: app | event-display
-  │
-  └─⫸ Commit Type: feat | fix | docs | style | build | misc | test
-```
-
-Here is an example of a documentation improvement for the `phoenix-app` package:
-
-```
-docs(app): Added some text about commit rules
-Lets add some rules for our commit messages,
-based on the angular commit conventions.
-```
-
-## 4. Pull Requests
-
-When creating a `Pull Request` please include a short description explaining what has changed and why. If applicable, screenshots or GIF capture about the fix or improvement will really help.
-This will help others reviewing your code so you may also reference any issues that you were working on fixing.
-
-Finally choose a meaningful title so your pull request can be easily identified
-
-## Thanks!
-
-Your contribution is very appreciated, thank you!
+# Contributing
+
+## 1. Issue tracking
+
+The best way to start contributing is to explore the GitHub issue tracker for the repository.
+
+If you have already tried the application feel free to open an issue if you notice any bug or feature that could be improved.
+
+Include a brief description and context of the issue, and optionally choose labels to mark the issue as `bug`, `enhancement`, `question`...
+to give extra information to other developers.
+
+## 2. Coding
+
+Once you are decided to start contributing on the repository, take a look at the [Developer guide](./guides/developers#readme) to get a more detailed understanding.
+
+### Code formatting
+
+We use [ESLint](http://github.com/eslint/eslint) for linting of TypeScript code and [Prettier](http://github.com/prettier/prettier) for linting of all other files. You can set up ESLint with your editor following [these instructions](https://eslint.org/docs/user-guide/integrations). We also have scripts to check and update code.
+
+To check:
+
+```sh
+yarn lint
+```
+
+To update:
+
+```sh
+yarn lint:fix
+```
+
+If you're using Visual Studio Code, you can also add the [prettier plugin](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) and then choose 'Format Document' with this linting tool.
+
+### Running linters against staged git files
+
+We use [lint-staged](https://github.com/okonet/lint-staged) to make sure we are not committing the usually unwanted linting error on the CI and it helps us to focus on the actual problem if we see a failed CI output. It runs our linters everytime we do a `git commit` and automatically fixes any linting errors it sees inside the project.
+
+### CI tests
+
+We make use of continuous integration (CI) tests for each code change. You can (and should!) run this locally on PRs:
+
+```sh
+yarn test:ci
+```
+
+Please see the [relevant part](./guides/developers/test-setup.md) of the [Developer guide](./guides/developers#readme) for more information e.g. how to fix common problems.
+
+## 3. Commit messages
+
+For commit messages, we follow a tweaked version of [angular commit convention](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit).
+
+Namely, every message should consist of:
+
+```
+<header>
+<body>
+```
+
+The `header` is mandatory and must conform to the `Commit Message Header` format (see below).
+
+The `body` is encouraged, and should describe in more detail what is being changed.
+
+### Commit message header
+
+```
+<type>(<scope>): <short summary>
+  │       │             │
+  │       │             └─⫸ Summary in present tense. Not capitalized. No period at the end.
+  │       │
+  │       └─⫸ Commit Scope: app | event-display
+  │
+  └─⫸ Commit Type: feat | fix | docs | style | build | misc | test
+```
+
+Here is an example of a documentation improvement for the `phoenix-app` package:
+
+```
+docs(app): Added some text about commit rules
+Lets add some rules for our commit messages,
+based on the angular commit conventions.
+```
+
+## 4. Pull Requests
+
+When creating a `Pull Request` please include a short description explaining what has changed and why. If applicable, screenshots or GIF capture about the fix or improvement will really help.
+This will help others reviewing your code so you may also reference any issues that you were working on fixing.
+
+Finally choose a meaningful title so your pull request can be easily identified
+
+## Thanks!
+
+Your contribution is very appreciated, thank you!
diff --git a/README.md b/README.md
@@ -30,16 +30,16 @@ You can see the stable version at [https://hepsoftwarefoundation.org/phoenix](ht
 
 ## Packages
 
-* [`phoenix-event-display`](./packages/phoenix-event-display/)  
+- [`phoenix-event-display`](./packages/phoenix-event-display/)  
   Phoenix event display framework
-* [`phoenix-ng`](./packages/phoenix-ng/)  
+- [`phoenix-ng`](./packages/phoenix-ng/)  
   Phoenix Angular application
 
 ## Development
 
 For running both the event display and the Angular app, you will need [Node.js](https://nodejs.org/en/download/) and Yarn.
 
-* **N.B.** There seems to be a problem with node v21 and ARM devices. See [here](https://github.com/HSF/phoenix/issues/627) for more details.
+- **N.B.** There seems to be a problem with node v21 and ARM devices. See [here](https://github.com/HSF/phoenix/issues/627) for more details.
 
 Once you have Node.js and npm (npm comes with the Node.js), install `corepack`
 (see [Yarn installation instructions](https://yarnpkg.com/getting-started/install))
@@ -84,32 +84,36 @@ Access the app by navigating to [`http://localhost`](http://localhost) on the br
 
 ## Documentation
 
-* [User manual](./guides/users.md)
-* [Developer guide](./guides/developers#readme)
-* [How to contribute](./CONTRIBUTING.md)
-* [API docs](https://hepsoftwarefoundation.org/phoenix/api-docs/)
+- [User manual](./guides/users.md)
+- [Developer guide](./guides/developers#readme)
+- [How to contribute](./CONTRIBUTING.md)
+- [API docs](https://hepsoftwarefoundation.org/phoenix/api-docs/)
 
 ## Phoenix presentations and publications
 
-* Phoenix was presented at the 2020 [HSF/WLCG virtual workshop](https://indico.cern.ch/event/941278/contributions/4084836/) and the presentation can be watched on [YouTube](https://www.youtube.com/watch?v=aFvlf9TpyEc&t=347s)
-* Phoenix was shown at CHEP 2021 ([abstract](https://www.epj-conferences.org/articles/epjconf/pdf/2021/05/epjconf_chep2021_01007.pdf)).
+- Phoenix was presented at the 2020 [HSF/WLCG virtual workshop](https://indico.cern.ch/event/941278/contributions/4084836/) and the presentation can be watched on [YouTube](https://www.youtube.com/watch?v=aFvlf9TpyEc&t=347s)
+- Phoenix was shown at CHEP 2021 ([abstract](https://www.epj-conferences.org/articles/epjconf/pdf/2021/05/epjconf_chep2021_01007.pdf)).
 
 ## Examples of Phoenix in use
 
 ### ATLAS
+
 [PhoenixATLAS](https://github.com/ATLAS-experiment/PhoenixATLAS) is the official web event display of the [ATLAS experiment](https://atlas.cern). It can be used to visualise different versions of ATLAS Geometry, and uploaded events.
 
 ATLAS has also used it for embedded events in Physics briefings, e.g. [Heavyweight champions: a search for new heavy W' bosons with the ATLAS detector](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwi5vtnp8Yr8AhWw9LsIHeSPBRoQFnoECCAQAQ&url=https%3A%2F%2Fatlas.cern%2Fupdates%2Fbriefing%2Fsearch-heavy-W-bosons&usg=AOvVaw3RpPlPkM5i4gdk2S27cX-C)
 
 ### FCC
+
 Phoenix is also used by [Future Circular Collider](https://fcc.web.cern.ch), see [here](https://fccsw.web.cern.ch/fccsw/phoenix/).
 
 ### LHCb
+
 Phoenix is also used by [LHCb](http://lhcb.web.cern.ch), see [here](https://lhcb-eventdisplay.web.cern.ch/)
 
 ### Belle II
-Phoenix is also used by [Belle II](https://www.belle2.org), see [here](https://display.belle2.org/)
 
+Phoenix is also used by [Belle II](https://www.belle2.org), see [here](https://display.belle2.org/)
 
 ## Contact
+
 The best way to contact us is to either open an issue in GitHub, start a [discussion](https://github.com/HSF/phoenix/discussions) or talk to us on our [gitter channel](https://gitter.im/phoenix-developers/community) (though this is not used as much these days).
diff --git a/TODO.md b/TODO.md
@@ -0,0 +1,78 @@
+# Angular 20 Test Migration Plan
+
+## Overview
+
+Migrate failing UI component tests from using heavy `PhoenixUIModule` to lightweight `TestModule` to resolve Angular 20 compatibility issues.
+
+## Created Files
+
+- [x] `packages/phoenix-ng/projects/phoenix-ui-components/lib/components/testing/test.module.ts` - Lightweight test module
+
+## Updated Files
+
+- [x] `packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/ui-menu.component.test.ts`
+
+## Remaining Files to Update (68 total)
+
+Update each test file to:
+
+1. Replace `import { PhoenixUIModule } from '../phoenix-ui.module';` with `import { TestModule } from '../testing/test.module';`
+2. Add `import { NO_ERRORS_SCHEMA } from '@angular/core';` if not present
+3. Replace `imports: [PhoenixUIModule],` with `imports: [TestModule],`
+4. Add `schemas: [NO_ERRORS_SCHEMA],` to TestBed configuration
+5. Remove any redundant imports
+
+### UI Menu Components (packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/)
+
+- [ ] performance-toggle/performance-toggle.component.test.ts
+- [ ] zoom-controls/zoom-controls.component.test.ts
+- [ ] vr-toggle/vr-toggle.component.test.ts
+- [ ] view-options/view-options.component.test.ts
+- [ ] view-options/cartesian-grid-config/cartesian-grid-config.component.test.ts
+- [ ] tree-menu/tree-menu-item/tree-menu-item.component.test.ts
+- [ ] info-panel/info-panel.component.test.ts
+- [ ] share-link/share-link-dialog/share-link-dialog.component.test.ts
+- [ ] overlay-view/overlay-view.component.test.ts
+- [ ] overlay/overlay.component.test.ts
+- [ ] overlay-view/overlay-view-window/overlay-view-window.component.test.ts
+- [ ] info-panel/info-panel-overlay/info-panel-overlay.component.test.ts
+- [ ] object-selection/object-selection.component.test.ts
+- [ ] object-selection/object-selection-overlay/object-selection-overlay.component.test.ts
+- [ ] object-clipping/object-clipping.component.test.ts
+- [ ] main-view-toggle/main-view-toggle.component.test.ts
+- [ ] io-options/io-options.component.test.ts
+- [ ] make-picture/make-picture.component.test.ts
+- [ ] io-options/io-options-dialog/io-options-dialog.component.test.ts
+- [ ] cycle-events/cycle-events.component.test.ts
+- [ ] experiment-info/experiment-info.component.test.ts
+- [ ] geometry-browser/geometry-browser-overlay/geometry-browser-overlay.component.test.ts
+- [ ] event-selector/event-selector.component.test.ts
+- [ ] geometry-browser/geometry-browser.component.test.ts
+
+### Embed Menu Components (packages/phoenix-ng/projects/phoenix-ui-components/lib/components/embed-menu/)
+
+- [ ] experiment-link/experiment-link.component.test.ts
+
+### Phoenix Menu Components (packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-menu/)
+
+- [ ] phoenix-menu.component.test.ts
+
+### App Components (packages/phoenix-ng/projects/phoenix-app/src/app/)
+
+- [ ] home/home.component.test.ts
+- [ ] sections/playground/playground.component.test.ts
+- [ ] sections/trackml/trackml.component.test.ts
+
+## Testing
+
+After updates, run tests to verify:
+
+- No more `TypeError: Cannot read properties of undefined (reading 'ngModule')`
+- No more `NullInjectorError: No provider for _CdkPrivateStyleLoader!`
+- All tests pass successfully
+
+## Notes
+
+- Use `NO_ERRORS_SCHEMA` to avoid template compilation issues for complex components
+- The `TestModule` includes all necessary Angular Material and CDK modules
+- Keep mocks for services like `EventDisplayService` as needed