Phoenix API Docs

Phoenix event display

Version Downloads Documentation Coverage

A highly modular and API driven experiment independent event display that uses three.js for processing and presenting detector geometry and event data.

To use in your application, install the package.

Example :
npm install phoenix-event-display
# or
yarn add phoenix-event-display

Usage

As a module

To create a simple event display.

Example :
// Import required classes
import { EventDisplay, PhoenixLoader } from 'phoenix-event-display';

// Create the event display
const eventDisplay = new EventDisplay();

// Define the configuration
const configuration = {
  elementId: '<wrapper_element_id>',
  eventDataLoader: new PhoenixLoader(), // or some other event data loader
  // ... other configuration options
};

// Initialize the event display with the configuration
eventDisplay.init(configuration);

// Load and parse event data in Phoenix format and display it
fetch('path/to/event-data.json')
  .then((res) => res.json())
  .then((res) => {
    eventDisplay.parsePhoenixEvents(res);
  });

// Load detector geometry
eventDisplay.loadOBJGeometry(
  'path/to/geometry.obj',
  'Detector OBJ',
  0x8c8c8c /* color */,
);

As a standalone bundle

Phoenix can be bundled and used directly in the HTML as a script along with three.js. You can either use the CDN or build from source.

To build Phoenix as a bundle.

Example :
yarn build:bundle

This will generate a file phoenix.min.js in the ./dist/bundle directory which can be included in your HTML code.

Without building, you can include the bundle directly from CDN.

Example :
<html lang="en">
  <head>
    ...
  </head>

  <body>
    <div id="eventDisplay"></div>

    <script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/phoenix-event-display/dist/bundle/phoenix.min.js"></script>

    <script>
      // Create the event display
      const eventDisplay = new EventDisplay();

      // Define the configuration
      const configuration = {
        elementId: 'eventDisplay',
        eventDataLoader: new PhoenixLoader(), // or some other event data loader
        // ... other configuration options
      };

      // Initialize the event display with the configuration
      eventDisplay.init(configuration);

      // ... other event display functions
    </script>
  </body>
</html>

Examples

Event Data Loaders

Phoenix supports multiple event data formats through specialized loader classes.

PHYSLITELoader

PHYSLITELoader parses ATLAS DAOD_PHYSLITE .root files directly in the browser using JSROOT. It reads calibrated physics objects from the ROOT CollectionTree branch and converts them into Phoenix event format.

Supported Collections

  • Jets: Calibrated jet momentum and energy.
  • Tracks: InDetTrackParticles, MuonSpectrometerTrackParticles, CombinedMuonTrackParticles, GSFTrackParticles.
  • Electrons & Muons: Four-momentum ($p_T, \eta, \phi, m$).
  • Photons: Energy clusters and trajectories.
  • Missing Energy (MET): AnalysisMET transverse energy vector ($E_{Tx}, E_{Ty}$).
  • Primary Vertices & Calorimeter Clusters.

Usage Example

Example :
import { EventDisplay, PHYSLITELoader } from 'phoenix-event-display';

const eventDisplay = new EventDisplay();
const physliteLoader = new PHYSLITELoader();

// Load ROOT file buffer
fetch('path/to/DAOD_PHYSLITE.root')
  .then((res) => res.arrayBuffer())
  .then((buffer) => {
    physliteLoader.loadEvents(buffer, (events) => {
      eventDisplay.parsePhoenixEvents(events);
    });
  });

results matching ""

    No results matching ""