# phoenix-ui-components
> Reusable Angular components of the Phoenix event display application.
Latest version **4.2.3** (published 2026-09-12) · Apache-2.0 license · 0 weekly downloads
## Install
```sh
npm install phoenix-ui-components
pnpm add phoenix-ui-components
yarn add phoenix-ui-components
bun add phoenix-ui-components
```
## Health
**Score 65/100 (B)** — status: active.
Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.
Warnings: low downloads.
## Facts
| | |
|---|---|
| Version | 4.2.3 |
| Published | 2026-09-12 |
| First published | 2020-11-06 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 12 |
| Unpacked size | 1.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 87 |
| Author | Phoenix contributors |
| Maintainers | 9inpachi, edwardmoyse |
## Links
- npm: https://www.npmjs.com/package/phoenix-ui-components
- Repository: https://github.com/HSF/phoenix
- Homepage: http://github.com/HSF/phoenix/tree/main/packages/phoenix-ng/projects/phoenix-ui-components#readme
- Issues: https://github.com/HSF/phoenix/issues
- npm.io page: https://npm.io/package/phoenix-ui-components
## Dependencies (12)
- [rxjs](https://npm.io/package/rxjs.md) ^7.8.2
- [jszip](https://npm.io/package/jszip.md) ^3.10.1
- [three](https://npm.io/package/three.md) ~0.184.0
- [tslib](https://npm.io/package/tslib.md) ^2.8.1
- [qrcode](https://npm.io/package/qrcode.md) 1.5.4
- [recordrtc](https://npm.io/package/recordrtc.md) ^5.6.2
- [@angular/cdk](https://npm.io/package/@angular/cdk.md) ^20.2.14
- [@angular/forms](https://npm.io/package/@angular/forms.md) ^20.3.28
- [@angular/material](https://npm.io/package/@angular/material.md) ^20.2.14
- [@angular/animations](https://npm.io/package/@angular/animations.md) ^20.3.28
- [css-element-queries](https://npm.io/package/css-element-queries.md) ^1.2.3
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^20.3.28
## Recent versions
- 4.2.3 (latest) — 2026-09-12
- 4.2.1 — 2026-09-10
- 4.2.0 — 2026-09-10
- 4.1.0 — 2026-09-01
- 4.0.1 — 2026-06-06
- 4.0.0 — 2026-06-06
- 3.0.6 — 2026-05-28
- 3.0.4 — 2024-11-29
- 3.0.1 — 2024-11-22
- 3.0.0 — 2024-11-21
- 2.17.0 — 2024-11-21
- 2.16.0 — 2024-03-24
- 2.15.1 — 2024-03-22
- 2.14.1 — 2023-05-14
- 2.14.0 — 2023-03-22
- … 35 more at https://npm.io/package/phoenix-ui-components/versions
## README
# Phoenix UI
[](https://www.npmjs.com/package/phoenix-ui-components)
[](https://www.npmjs.com/package/phoenix-ui-components)
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.14.
To install the package for reusing components.
```sh
npm install phoenix-ui-components
# or
yarn add phoenix-ui-components
```
## Setup
You can see [phoenix-app](https://github.com/HSF/phoenix/tree/main/packages/phoenix-ng/projects/phoenix-app) as a reference app that uses this package.
Since the components use some icons and images, you will need to copy these assets to your application. Download these assets from [./src/assets](https://github.com/HSF/phoenix/tree/main/packages/phoenix-ng/projects/phoenix-ui-components/src/assets) and put them in the `src/assets` directory of your application. All assets should be served through `/assets`.
Once you have the assets set up, import the `PhoenixUIModule` and `BrowserAnimationsModule` in your `NgModule`.
```ts
import { PhoenixUIModule } from 'phoenix-ui-components';
@NgModule({
imports: [
...
BrowserAnimationsModule,
PhoenixUIModule,
...
],
...
})
export class MyModule {}
```
## Styling
Since some Phoenix components use Bootstrap, you will need to add the the Bootstrap stylesheet in the `src/index.html` file of your app.
```html
...
```
For theming of components, you will also need to import some global styles into your app.
It can be done by importing the theming file into your app's global styles (`styles.scss`).
`styles.scss`
```scss
@import 'phoenix-ui-components/theming';
...
```
## Usage
With everything set up, you can use the Phoenix components in your module component(s).
`component.html`
```html
```
`component.ts`
```ts
@Component({
selector: 'app-test',
templateUrl: './component.html',
styleUrls: ['./component.scss'],
})
export class TestComponent {
phoenixMenuRoot = new PhoenixMenuNode('Phoenix Menu', 'phoenix-menu');
}
```
## Services
### NotificationService
`NotificationService` provides user-facing notifications with four severity levels and configurable auto-dismiss durations. It replaces silent console errors with actionable feedback visible directly in the UI.
#### Severity levels and default durations
| Severity | Default duration | Behaviour |
| --------- | ---------------- | ----------------------- |
| `success` | 5000ms | Auto-dismisses |
| `info` | 5000ms | Auto-dismisses |
| `warning` | 8000ms | Auto-dismisses |
| `error` | 0ms | Requires manual dismiss |
#### Usage
Inject `NotificationService` into any Angular component or service:
```ts
import { NotificationService } from 'phoenix-ui-components';
@Component({ ... })
export class MyComponent {
constructor(private notificationService: NotificationService) {}
loadFile() {
try {
// ... load file
this.notificationService.success('File loaded successfully.');
} catch (error) {
this.notificationService.error(
'Could not parse event file. Please ensure it is valid JSON.',
);
}
}
}
```
To display notifications, subscribe to the service and store the unsubscribe function:
```ts
private unsubscribe: () => void;
ngOnInit() {
this.unsubscribe = this.notificationService.subscribeToNotifications(
(notification) => {
// notification.message — the text to display
// notification.severity — 'success' | 'info' | 'warning' | 'error'
// notification.duration — auto-dismiss duration in ms (0 = no auto-dismiss)
},
);
}
ngOnDestroy() {
this.unsubscribe?.();
}
```
A custom duration can be passed as an optional second argument:
```ts
this.notificationService.warning('Large file detected.', 12000);
this.notificationService.error('Connection lost.', 10000);
```
## Components & Overlays
### Event Dataset Browser (`EventBrowserOverlayComponent`)
The **Event Dataset Browser** pre-scans all loaded events in the session and renders a sortable, filterable summary table with physics object counts per collection type, Missing Energy (MET), and run/event metadata.
#### Features
- **Physics-Aware Column Ordering**: Reconstructed physics objects (Jets, Muons, Electrons, Photons, Tracks) are ordered first, followed by detector-level collections (`CaloCells`, `Hits`).
- **Sortable & Filterable**: Support for column filters (`>=`, `<=`, `=`), minimum MET filters, and live search by event number.
- **Direct Event Navigation**: Clicking any event row jumps directly to that event in the 3D display.
- **Keyboard Navigation**: Arrow keys to navigate table rows + `Shift + Left/Right` to switch events globally.
#### Template Usage
```html
```
---
### Event Autoloader & Live Cycling (`CycleEventsComponent`)
`CycleEventsComponent` provides automated event cycling and live event feed reloading for beam monitoring and event slideshows.
#### Operational Modes
1. **Inactive**: Cycling paused.
2. **Active (Looping)**: Automatically advances through the list of loaded events at a fixed interval.
3. **Active + Reloading**: Automatically fetches/reloads new event data upon reaching the end of the event list (ideal for live event feeds).
#### Template Usage
```html
```
---
_Source: https://npm.io/package/phoenix-ui-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._