feat: add track kinematics panel with config-driven columns

packages/phoenix-event-display/src/helpers/kinematics-config.ts

@@ -0,0 +1,93 @@
+/**
+ * Configuration for a single column in the kinematics panel.
+ * Experiment-agnostic — each experiment provides its own column definitions.
+ */
+export interface KinematicsColumn {
+  /** Column identifier, used for sorting. */
+  id: string;
+  /** Display label for the column header. */
+  label: string;
+  /** Unit string shown in header as "label (unit)". */
+  unit?: string;
+  /** Tooltip text shown on hover — helps students learn physics quantities. */
+  tooltip?: string;
+  /** Extract the display value from a physics object's userData. */
+  getter: (objectData: any) => number | string;
+  /** Decimal places for numeric values. Defaults to 1. */
+  precision?: number;
+}
+
+/**
+ * Configuration for the kinematics panel.
+ * Experiment-agnostic — each experiment provides its own config.
+ */
+export interface KinematicsConfig {
+  /** Display title for the panel header. */
+  title: string;
+  /** Collection group type to filter (e.g., 'Tracks', 'Jets'). */
+  collectionType?: string;
+  /** Column definitions. */
+  columns: KinematicsColumn[];
+  /** Default sort column ID. */
+  defaultSort?: string;
+  /** Default sort direction. */
+  defaultSortDirection?: 'asc' | 'desc';
+  /** Column ID for the threshold filter. If set, shows a min-value filter input. */
+  filterColumn?: string;
+}
+
+/** Default ATLAS track kinematics config for JiveXML/PHYSLITE data. */
+export const ATLAS_KINEMATICS: KinematicsConfig = {
+  title: 'Track Momenta',
+  collectionType: 'Tracks',
+  defaultSort: 'pT',
+  defaultSortDirection: 'desc',
+  filterColumn: 'pT',
+  columns: [
+    {
+      id: 'pT',
+      label: 'pT',
+      unit: 'GeV',
+      tooltip: 'Transverse momentum',
+      getter: (t) => (t.pT ?? 0) / 1000,
+      precision: 1,
+    },
+    {
+      id: 'eta',
+      label: '\u03B7',
+      tooltip: 'Pseudorapidity',
+      getter: (t) => t.eta ?? 0,
+      precision: 2,
+    },
+    {
+      id: 'phi',
+      label: '\u03C6',
+      tooltip: 'Azimuthal angle',
+      getter: (t) => t.phi ?? 0,
+      precision: 2,
+    },
+    {
+      id: 'charge',
+      label: 'q',
+      tooltip: 'Electric charge',
+      getter: (t) => {
+        if (t.charge != null) return t.charge;
+        const qOverP = t.dparams?.[4];
+        return qOverP ? Math.sign(qOverP) : 0;
+      },
+      precision: 0,
+    },
+    {
+      id: 'p',
+      label: '|p|',
+      unit: 'GeV',
+      tooltip: 'Total momentum',
+      getter: (t) => {
+        const qOverP = t.dparams?.[4];
+        if (!qOverP || !isFinite(1 / qOverP)) return 0;
+        return Math.abs(1 / qOverP) / 1000;
+      },
+      precision: 1,
+    },
+  ],
+};

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/kinematics-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,
+  KinematicsPanelComponent,
+  KinematicsPanelOverlayComponent,
 } from './ui-menu';
 
 import { AttributePipe } from '../services/extras/attribute.pipe';
@@ -127,6 +129,8 @@ const PHOENIX_COMPONENTS: Type<any>[] = [
   FileExplorerComponent,
   RingLoaderComponent,
   CycleEventsComponent,
+  KinematicsPanelComponent,
+  KinematicsPanelOverlayComponent,
 ];
 
 @NgModule({

packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/index.ts

@@ -37,3 +37,5 @@ export * from './event-data-explorer/event-data-explorer.component';
 export * from './event-data-explorer/event-data-explorer-dialog/event-data-explorer-dialog.component';
 export * from './cycle-events/cycle-events.component';
 export * from './ui-menu-wrapper/ui-menu-wrapper.component';
+export * from './kinematics-panel/kinematics-panel.component';
+export * from './kinematics-panel/kinematics-panel-overlay/kinematics-panel-overlay.component';

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

@@ -0,0 +1,149 @@
+<app-overlay
+  [overlayTitle]="config.title"
+  icon="kinematics"
+  [resizable]="true"
+  [active]="showKinematics"
+>
+  <div *ngIf="showKinematics" class="kinematics-panel">
+    <!-- Header: collection selector + filter + count + export -->
+    <div class="panel-header" *ngIf="collections?.length > 0">
+      <div class="header-top">
+        <div class="collection-selector" *ngIf="collections.length > 1">
+          <select (change)="selectCollection($event.target.value)">
+            <option
+              *ngFor="let c of collections"
+              [value]="c"
+              [selected]="c === selectedCollection"
+            >
+              {{ c }}
+            </option>
+          </select>
+        </div>
+        <span class="collection-name" *ngIf="collections.length === 1">
+          {{ selectedCollection }}
+        </span>
+        <span class="track-count">
+          {{ rows.length
+          }}<span *ngIf="filterValue > 0"> / {{ allRows.length }}</span> tracks
+        </span>
+        <button
+          class="export-btn"
+          matTooltip="Export as TSV"
+          (click)="exportTSV()"
+          *ngIf="rows.length > 0"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="var(--phoenix-options-icon-path, #fff)"
+          >
+            <path
+              d="M10 3a.75.75 0 0 1 .75.75v7.69l2.22-2.22a.75.75 0 1 1 1.06 1.06l-3.5 3.5a.75.75 0 0 1-1.06 0l-3.5-3.5a.75.75 0 1 1 1.06-1.06l2.22 2.22V3.75A.75.75 0 0 1 10 3Z"
+            />
+            <path
+              d="M3 15.75a.75.75 0 0 1 .75-.75h12.5a.75.75 0 0 1 0 1.5H3.75a.75.75 0 0 1-.75-.75Z"
+            />
+          </svg>
+        </button>
+      </div>
+
+      <!-- Filter row -->
+      <div class="filter-row" *ngIf="filterCol">
+        <label>
+          {{ filterCol.label }} &ge;
+          <input
+            type="number"
+            class="filter-input"
+            [value]="filterValue"
+            (input)="onFilterChange($event.target.value)"
+            step="1"
+            min="0"
+          />
+          <span class="filter-unit" *ngIf="filterCol.unit">{{
+            filterCol.unit
+          }}</span>
+        </label>
+      </div>
+    </div>
+
+    <!-- Table with keyboard navigation -->
+    <div
+      class="table-container"
+      *ngIf="rows.length > 0"
+      tabindex="0"
+      (keydown)="onKeyDown($event)"
+    >
+      <table class="kinematics-table">
+        <thead>
+          <tr>
+            <th class="col-index">#</th>
+            <th class="col-action"></th>
+            <th
+              *ngFor="let col of config.columns"
+              class="col-data sortable"
+              [class.sorted]="sortColumn === col.id"
+              [matTooltip]="col.tooltip"
+              (click)="sort(col.id)"
+            >
+              <span class="col-label">{{ col.label }}</span>
+              <span *ngIf="col.unit" class="col-unit">({{ col.unit }})</span>
+              <span class="sort-arrow" *ngIf="sortColumn === col.id">
+                {{ sortDirection === 'asc' ? '\u25B2' : '\u25BC' }}
+              </span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            *ngFor="let row of rows; index as i"
+            [id]="'kin-' + row.uuid"
+            [class.active-object]="activeRowUuid === row.uuid"
+            [class.is-cut]="row.isCut"
+            (click)="selectTrack(row)"
+          >
+            <td class="col-index" [style.color]="getChargeColor(row)">
+              {{ i + 1 }}
+            </td>
+            <td class="col-action">
+              <button
+                *ngIf="row.uuid"
+                class="icon-btn"
+                matTooltip="Look at track"
+                (click)="lookAtTrack(row.uuid, $event)"
+              >
+                <svg>
+                  <use href="assets/icons/views.svg#views"></use>
+                </svg>
+              </button>
+            </td>
+            <td
+              *ngFor="let col of config.columns"
+              class="col-data"
+              [ngClass]="getChargeClass(col, row.values[col.id])"
+            >
+              {{ formatValue(row.values[col.id], col) }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Empty states -->
+    <p
+      class="empty-state"
+      *ngIf="collections?.length > 0 && rows.length === 0 && allRows.length > 0"
+    >
+      No tracks above {{ filterCol?.label }} &ge; {{ filterValue }}
+      {{ filterCol?.unit }}.
+    </p>
+    <p
+      class="empty-state"
+      *ngIf="collections?.length > 0 && allRows.length === 0"
+    >
+      No objects in this collection.
+    </p>
+    <p class="empty-state" *ngIf="!collections || collections.length === 0">
+      Load event data to view track kinematics.
+    </p>
+  </div>
+</app-overlay>