Event Display
This documentation assumes you already possess a basic understanding of Phoenix and how to utilize it.
Customized Event Objects
Within the Belle II event display, four types of objects are presented: Tracks, MCParticles, ECLClusters, and KLMClusters. While Phoenix’s existing design represents Tracks, the others are directly rendered using ThreeJS. This approach ensures seamless visualization alignment with the context of Belle II.
To create customized event objects (e.g., Hits), please refer to the Phoenix event-data-loader documentation. The custom object files within the Belle II display repository are stored in the display/src/loaders/objects/ folder. You can adjust the visualization characteristics (thickness, default color, etc.) of objects using ThreeJS framework syntax.
Once you’ve created a customized object, you need to add it to the Belle2Loader in the display/src/loaders/event-data-loader.ts file to enable its display. For more information, also refer to the Phoenix event-data-loader documentation.
Additionally, Phoenix offers some default objects in its codebase. If they meet your requirements, you can integrate these objects into your display.
UI Modification
The frontend of the Belle II display web application is built on the Angular framework. Therefore, to modify the user interface for this project, Angular knowledge is required.
By default, the components for the web application are stored in the display/src/app/ folder.
Essentially, three main pages exist: the homepage, event display, and detector display, corresponding to the home/, event-display/, and detector/ folders respectively in the display/src/app/ folder. Additionally, the customized-components folder contains all customized Phoenix components.
As this project is built on Phoenix, most UI components used here are obtained from phoenix-ui-components, such as Display Options or the tools in the UI Menu. However, due to the unique characteristics of the Belle II event display, some tools (e.g., event selector, event import/export) need customization. To create customized components, it is essential to study existing Phoenix UI components and their usage. This is necessary because, when developing new components, you will need to seamlessly integrate them into the web framework built on Phoenix. In short, skills in handling both Angular and Phoenix are required.