feat: offload JiveXML/JSON parsing to Web Worker to prevent UI freeze

Dockerfile

@@ -49,6 +49,7 @@ ENV npm_config_python=/usr/bin/python3
 # CI environment variables
 ENV CI=1
 ENV CYPRESS_INSTALL_BINARY=0
+ENV HUSKY=0
 
 # Install dependencies (verbose so you can see if python errors occur)
 RUN yarn install --silent

packages/phoenix-event-display/configs/jest.conf.js

@@ -14,6 +14,10 @@ module.exports = {
     '^@angular/core$': '<rootDir>/src/tests/helpers/angular-core-mock',
     // Strip .js extensions from relative TypeScript imports
     '^(\\.{1,2}/.+)\\.js$': '$1',
+    // Mock the Web Worker wrapper — import.meta.url is not valid in Jest's
+    // CommonJS/ts-jest environment regardless of tsconfig module setting.
+    '(.*)/workers/event-data-parser$':
+      '<rootDir>/src/tests/helpers/event-data-parser-mock',
   },
   transform: {
     '^.+\\.m?[tj]s$': [

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

@@ -1,21 +1,18 @@
-import { httpRequest, settings as jsrootSettings, openFile } from 'jsroot';
+import { httpRequest, openFile } from 'jsroot';
+import { settings as jsrootSettings } from 'jsroot';
 import { build } from 'jsroot/geom';
-import { ActiveVariable } from './helpers/active-variable';
+import { ThreeManager } from './managers/three-manager/index';
+import { UIManager } from './managers/ui-manager/index';
 import { InfoLogger } from './helpers/info-logger';
-import { getLabelTitle } from './helpers/labels';
 import type { Configuration } from './lib/types/configuration';
-import { PhoenixLoader } from './loaders/phoenix-loader';
-import { LoadingManager } from './managers/loading-manager';
 import { StateManager } from './managers/state-manager';
+import { LoadingManager } from './managers/loading-manager';
+import { URLOptionsManager } from './managers/url-options-manager';
+import { ActiveVariable } from './helpers/active-variable';
 import type { AnimationPreset } from './managers/three-manager/animations-manager';
-import { ThreeManager } from './managers/three-manager/index';
 import { XRSessionType } from './managers/three-manager/xr/xr-manager';
-import { UIManager } from './managers/ui-manager/index';
-import { URLOptionsManager } from './managers/url-options-manager';
-import type {
-  PhoenixEventData,
-  PhoenixEventsData,
-} from './lib/types/event-data';
+import { getLabelTitle } from './helpers/labels';
+import { PhoenixLoader } from './loaders/phoenix-loader';
 
 declare global {
   /**
@@ -34,7 +31,7 @@ export class EventDisplay {
   /** Configuration for preset views and event data loader. */
   public configuration: Configuration;
   /** An object containing event data. */
-  private eventsData: PhoenixEventsData;
+  private eventsData: any;
   /** Array containing callbacks to be called when events change. */
   private onEventsChange: ((events: any) => void)[] = [];
   /** Array containing callbacks to be called when the displayed event changes. */
@@ -51,8 +48,6 @@ export class EventDisplay {
   private stateManager: StateManager;
   /** URL manager for managing options given through URL. */
   private urlOptionsManager: URLOptionsManager;
-  /** Flag to track if EventDisplay has been initialized. */
-  private isInitialized: boolean = false;
 
   /**
    * Create the Phoenix event display and intitialize all the elements.
@@ -73,10 +68,6 @@ export class EventDisplay {
    * @param configuration Configuration used to customize different aspects.
    */
   public init(configuration: Configuration) {
-    if (this.isInitialized) {
-      this.cleanup();
-    }
-    this.isInitialized = true;
     this.configuration = configuration;
 
     // Initialize the three manager with configuration
@@ -104,24 +95,6 @@ export class EventDisplay {
     this.enableKeyboardControls();
   }
 
-  /**
-   * Cleanup event listeners and resources before re-initialization.
-   */
-  public cleanup() {
-    if (this.graphicsLibrary) {
-      this.graphicsLibrary.cleanup();
-    }
-    if (this.ui) {
-      this.ui.cleanup();
-    }
-    // Clear accumulated callbacks
-    this.onEventsChange = [];
-    this.onDisplayedEventChange = [];
-    // Reset singletons for clean view transition
-    this.loadingManager?.reset();
-    this.stateManager?.resetForViewTransition();
-  }
-
   /**
    * Initialize XR.
    * @param xrSessionType Type of the XR session. Either AR or VR.
@@ -145,7 +118,7 @@ export class EventDisplay {
    * @param eventsData Object containing the event data.
    * @returns Array of strings containing the keys of the eventsData object.
    */
-  public parsePhoenixEvents(eventsData: PhoenixEventsData): string[] {
+  public parsePhoenixEvents(eventsData: any): string[] {
     this.eventsData = eventsData;
     if (typeof this.configuration.eventDataLoader === 'undefined') {
       this.configuration.eventDataLoader = new PhoenixLoader();
@@ -163,7 +136,7 @@ export class EventDisplay {
    * of physics objects.
    * @param eventData Object containing the event data.
    */
-  public buildEventDataFromJSON(eventData: PhoenixEventData) {
+  public async buildEventDataFromJSON(eventData: any) {
     // Reset labels
     this.resetLabels();
     // Creating UI folder
@@ -190,7 +163,7 @@ export class EventDisplay {
    * the event associated with that key.
    * @param eventKey String that represents the event in the eventsData object.
    */
-  public loadEvent(eventKey: string) {
+  public async loadEvent(eventKey: any) {
     const event = this.eventsData[eventKey];
 
     if (event) {
@@ -578,35 +551,29 @@ export class EventDisplay {
    * Add a callback to onDisplayedEventChange array to call
    * the callback on changes to the displayed event.
    * @param callback Callback to be added to the onDisplayedEventChange array.
-   * @returns Unsubscribe function to remove the callback.
    */
   public listenToDisplayedEventChange(
     callback: (event: any) => any,
   ): () => void {
     this.onDisplayedEventChange.push(callback);
     return () => {
-      const index = this.onDisplayedEventChange.indexOf(callback);
-      if (index > -1) {
-        this.onDisplayedEventChange.splice(index, 1);
-      }
+      this.onDisplayedEventChange = this.onDisplayedEventChange.filter(
+        (cb) => cb !== callback,
+      );
     };
   }
 
   /**
    * Add a callback to onEventsChange array to call
    * the callback on changes to the events.
    * @param callback Callback to be added to the onEventsChange array.
-   * @returns Unsubscribe function to remove the callback.
    */
   public listenToLoadedEventsChange(
     callback: (events: any) => any,
   ): () => void {
     this.onEventsChange.push(callback);
     return () => {
-      const index = this.onEventsChange.indexOf(callback);
-      if (index > -1) {
-        this.onEventsChange.splice(index, 1);
-      }
+      this.onEventsChange = this.onEventsChange.filter((cb) => cb !== callback);
     };
   }