feat: add eta-phi energy map panel

packages/phoenix-event-display/src/helpers/eta-phi-config.ts

@@ -0,0 +1,25 @@
+/** Configuration for the eta-phi energy map panel. */
+export interface EtaPhiConfig {
+  /** Eta axis range. Defaults to [-5, 5]. */
+  etaRange?: [number, number];
+  /** Phi axis range in radians. Defaults to [-pi, pi]. */
+  phiRange?: [number, number];
+  /** Number of bins along eta. Defaults to 100. */
+  etaBins?: number;
+  /** Number of bins along phi. Defaults to 63. */
+  phiBins?: number;
+  /** Minimum energy (GeV) to display. Defaults to 0 (hide noise). */
+  energyThreshold?: number;
+  /** Use logarithmic color scale. Defaults to true. */
+  logScale?: boolean;
+}
+
+/** Default ATLAS-style eta-phi configuration. */
+export const DEFAULT_ETA_PHI_CONFIG: Required<EtaPhiConfig> = {
+  etaRange: [-5, 5],
+  phiRange: [-Math.PI, Math.PI],
+  etaBins: 100,
+  phiBins: 63,
+  energyThreshold: 0,
+  logScale: true,
+};

packages/phoenix-event-display/src/index.ts

@@ -32,6 +32,7 @@ export * from './helpers/runge-kutta';
 export * from './helpers/pretty-symbols';
 export * from './helpers/active-variable';
 export * from './helpers/zip';
+export * from './helpers/eta-phi-config';
 
 // Loaders
 export * from './loaders/event-data-loader';

packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-ui.module.ts

@@ -65,6 +65,8 @@ import {
   EventDataExplorerComponent,
   EventDataExplorerDialogComponent,
   CycleEventsComponent,
+  EtaPhiPanelComponent,
+  EtaPhiPanelOverlayComponent,
 } from './ui-menu';
 
 import { AttributePipe } from '../services/extras/attribute.pipe';
@@ -127,6 +129,8 @@ const PHOENIX_COMPONENTS: Type<any>[] = [
   FileExplorerComponent,
   RingLoaderComponent,
   CycleEventsComponent,
+  EtaPhiPanelComponent,
+  EtaPhiPanelOverlayComponent,
 ];
 
 @NgModule({

packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/eta-phi-panel/eta-phi-panel-overlay/eta-phi-panel-overlay.component.html

@@ -0,0 +1,36 @@
+<app-overlay
+  overlayTitle="Eta-Phi Energy Map"
+  icon="eta-phi"
+  [active]="showPanel"
+>
+  <div class="eta-phi-container">
+    <div class="eta-phi-controls">
+      <label class="scale-toggle">
+        <input
+          type="checkbox"
+          [checked]="logScale"
+          (change)="toggleLogScale()"
+        />
+        Log scale
+      </label>
+      <label class="overlay-toggle">
+        <input
+          type="checkbox"
+          [checked]="showOverlays"
+          (change)="toggleOverlays()"
+        />
+        Overlays
+      </label>
+    </div>
+    <div class="canvas-wrapper">
+      <canvas #etaPhiCanvas width="600" height="380"></canvas>
+    </div>
+    <div class="color-bar">
+      <canvas #colorBarCanvas width="300" height="14"></canvas>
+      <div class="color-bar-labels">
+        <span>{{ colorBarMin }}</span>
+        <span>{{ colorBarMax }}</span>
+      </div>
+    </div>
+  </div>
+</app-overlay>

packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/eta-phi-panel/eta-phi-panel-overlay/eta-phi-panel-overlay.component.scss

@@ -0,0 +1,55 @@
+.eta-phi-container {
+  padding: 8px;
+  min-width: 620px;
+}
+
+.eta-phi-controls {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 6px;
+  font-size: 12px;
+  color: #ccc;
+
+  label {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  input[type='checkbox'] {
+    cursor: pointer;
+  }
+}
+
+.canvas-wrapper {
+  position: relative;
+  display: inline-block;
+
+  canvas {
+    display: block;
+    border: 1px solid #444;
+    border-radius: 2px;
+    cursor: crosshair;
+  }
+}
+
+.color-bar {
+  margin-top: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  canvas {
+    border-radius: 2px;
+  }
+}
+
+.color-bar-labels {
+  display: flex;
+  justify-content: space-between;
+  width: 300px;
+  font-size: 10px;
+  color: #999;
+}