Phoenix is a TypeScript-based event display framework, using the popular three.js library for 3D. It focuses on being experiment agnostic by design, with common tools (such as custom menus, controls, propagators) and the possibility to add experiment specific extensions.
It consists of two packages: a plain TypeScript core library (phoenix-event-display) and Angular example application (phoenix-ng). A React example is also provided. The core library can be adapted for any experiment with some simple steps.
Phoenix is supported by the HEP Software Foundation and is the official web event display of the ATLAS experiment.
It was selected for Google Summer of Code support in 2019, 2020 and 2021.
You can see the stable version at https://hepsoftwarefoundation.org/phoenix and the development version at http://phoenix-dev.surge.sh.
phoenix-event-display
Phoenix event display frameworkphoenix-ng
Phoenix Angular application
For running both the event display and the Angular app, you will need Node.js and yarn.
Once you have Node.js and npm (npm comes with Node.js), install yarn.
npm install --global yarnThen run the following commands.
# Install all the required dependencies
yarn install
# Run phoenix-ng in development/watch mode
yarn startNow phoenix-ng will start in development/watch mode. Since phoenix-ng is linked to the source code of packages phoenix-event-display and phoenix-ui-components through TypeScript, any changes made to either of the packages will rebuild and hot reload the phoenix-ng app. You can access the app by navigating to http://localhost:4200 on the browser.
Run the following Docker command to start Phoenix locally using Docker.
docker run -dp 80:80 9inpachi/phoenixAccess the app by navigating to http://localhost on the browser.
Phoenix was presented at the HSF/WLCG virtual workshop and the presentation can be watched on YouTube
Best is to either open an issue in GitHub, start a discussion or talk to us on our gitter channel.