# phoenix-event-display

> API for web-based experiment independent event display.

Latest version **4.2.3** (published 2026-09-12) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install phoenix-event-display
pnpm add phoenix-event-display
yarn add phoenix-event-display
bun add phoenix-event-display
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 4.2.3 |
| Published | 2026-09-12 |
| First published | 2020-09-24 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 6.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Phoenix contributors |
| Maintainers | 9inpachi, edwardmoyse |

## Links

- npm: https://www.npmjs.com/package/phoenix-event-display
- Repository: https://github.com/HSF/phoenix
- Homepage: http://github.com/HSF/phoenix/tree/main/packages/phoenix-event-display#readme
- Issues: https://github.com/HSF/phoenix/issues
- npm.io page: https://npm.io/package/phoenix-event-display

## Dependencies (6)

- [jszip](https://npm.io/package/jszip.md) ^3.10.1
- [three](https://npm.io/package/three.md) ~0.184.0
- [jsroot](https://npm.io/package/jsroot.md) ^7.11.0
- [dat.gui](https://npm.io/package/dat.gui.md) ^0.7.9
- [html2canvas](https://npm.io/package/html2canvas.md) ^1.4.1
- [@tweenjs/tween.js](https://npm.io/package/@tweenjs/tween.js.md) ^25.0.0

## Recent versions

- 4.2.3 (latest) — 2026-09-12
- 4.2.2 — 2026-09-10
- 4.2.1 — 2026-09-10
- 4.2.0 — 2026-09-10
- 4.1.0 — 2026-09-01
- 4.0.0 — 2026-06-06
- 3.0.6 — 2026-05-28
- 3.0.5 — 2024-11-30
- 3.0.4 — 2024-11-29
- 3.0.3 — 2024-11-22
- 3.0.2 — 2024-11-22
- 3.0.1 — 2024-11-22
- 3.0.0 — 2024-11-21
- 2.17.0 — 2024-11-21
- 2.16.0 — 2024-03-24
- … 41 more at https://npm.io/package/phoenix-event-display/versions

## README

# Phoenix event display

[![Version](https://img.shields.io/npm/v/phoenix-event-display.svg)](https://www.npmjs.com/package/phoenix-event-display)
[![Downloads](https://img.shields.io/npm/dt/phoenix-event-display.svg)](https://www.npmjs.com/package/phoenix-event-display)
[![Documentation Coverage](https://raw.github.com/HSF/phoenix/main/docs/api-docs/images/coverage-badge-documentation.svg)](https://hepsoftwarefoundation.org/phoenix/api-docs/coverage.html)

A highly modular and API driven experiment independent event display that uses [three.js](https://threejs.org) for processing and presenting detector geometry and event data.

To use in your application, install the package.

```sh
npm install phoenix-event-display
# or
yarn add phoenix-event-display
```

## Usage

### As a module

To create a simple event display.

```js
// 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](https://threejs.org). You can either use the [CDN](https://cdn.jsdelivr.net/npm/phoenix-event-display/dist/bundle/phoenix.min.js) or build from source.

To build Phoenix as a bundle.

```sh
yarn build:bundle
```

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

Without building, you can include the bundle directly from [CDN](https://cdn.jsdelivr.net/npm/phoenix-event-display/dist/bundle/phoenix.min.js).

```html
<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

- [Usage in Angular (as a service)](https://github.com/HSF/phoenix/blob/main/packages/phoenix-ng/projects/phoenix-app/src/app/sections/lhcb/lhcb.component.ts)
- [Usage in React](https://github.com/9inpachi/phoenix-react/blob/main/src/App.js#L6-L31)

## 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](https://root.cern/js/). 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

```js
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);
    });
  });
```

---
_Source: https://npm.io/package/phoenix-event-display · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._