Merge pull request #675 from HSF/threer167

Updating Phoenix library settings

.husky/pre-commit

@@ -1,4 +1,3 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
+npm run test:ci
 
 yarn lint-staged

.vscode/launch.json

@@ -5,9 +5,9 @@
     "version": "0.2.0",
     "configurations": [
         {
-            "type": "pwa-chrome",
+            "type": "firefox",
             "request": "launch",
-            "name": "Launch Chrome against localhost",
+            "name": "Launch FF against localhost",
             "url": "http://localhost:4200",
             "webRoot": "${workspaceFolder}"
         }

package.json

@@ -6,7 +6,7 @@
     "packages/phoenix-ng/projects/*"
   ],
   "scripts": {
-    "postinstall": "yarn workspace phoenix-event-display prepare && husky install",
+    "postinstall": "yarn workspace phoenix-event-display prepare && husky",
     "start": "lerna run start",
     "start:ssl": "yarn workspace phoenix-ng start:ssl",
     "test:ci": "lerna run test:ci",

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

@@ -5,6 +5,9 @@ module.exports = {
   rootDir: '../',
   roots: ['<rootDir>/src/tests'],
   preset: 'ts-jest/presets/js-with-ts-legacy',
+  moduleNameMapper: {
+    '^(\\.\\.?\\/.+)\\.js$': '$1',
+  },
   transform: {
     '^.+\\.m?[tj]s$': [
       'ts-jest',
@@ -32,4 +35,5 @@ module.exports = {
   verbose: true,
   collectCoverageFrom: ['<rootDir>/src/**/*.ts'],
   clearMocks: true,
+  extensionsToTreatAsEsm: ['.ts'],
 };

packages/phoenix-event-display/package.json

@@ -45,14 +45,14 @@
     "jsroot": "^7.7.2",
     "jszip": "^3.10.1",
     "stats-js": "^1.0.1",
-    "three": "^0.165.0"
+    "three": "^0.167.0"
   },
   "devDependencies": {
     "@babel/helper-string-parser": "^7.24.7",
     "@babel/plugin-transform-runtime": "^7.24.7",
     "@compodoc/compodoc": "^1.1.25",
     "@types/dat.gui": "^0.7.13",
-    "@types/three": "^0.165.0",
+    "@types/three": "^0.167.1",
     "esbuild-loader": "^4.2.2",
     "jest": "^29.7.0",
     "ts-jest": "~29.2.3",

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

@@ -1,25 +1,25 @@
 import { LoadingManager } from 'three';
-import { EventDisplay } from './event-display';
-import { Cut } from './lib/models/cut.model';
-import { PresetView } from './lib/models/preset-view.model';
-import { PrettySymbols } from './helpers/pretty-symbols';
-import { RKHelper } from './helpers/rk-helper';
-import { RungeKutta } from './helpers/runge-kutta';
-import { InfoLogger } from './helpers/info-logger';
-import { CMSLoader } from './loaders/cms-loader';
-import { JiveXMLLoader } from './loaders/jivexml-loader';
-import { JSRootEventLoader } from './loaders/jsroot-event-loader';
-import { CMSObjects } from './loaders/objects/cms-objects';
-import { PhoenixObjects } from './loaders/objects/phoenix-objects';
-import { PhoenixLoader } from './loaders/phoenix-loader';
-import { Edm4hepJsonLoader } from './loaders/edm4hep-json-loader';
-import { ScriptLoader } from './loaders/script-loader';
-import { TrackmlLoader } from './loaders/trackml-loader';
-import { StateManager } from './managers/state-manager';
-import { URLOptionsManager } from './managers/url-options-manager';
-import { ThreeManager } from './managers/three-manager';
-import { UIManager } from './managers/ui-manager';
-import { PhoenixMenuNode } from './managers/ui-manager/phoenix-menu/phoenix-menu-node';
+import { EventDisplay } from './event-display.js';
+import { Cut } from './lib/models/cut.model.js';
+import { PresetView } from './lib/models/preset-view.model.js';
+import { PrettySymbols } from './helpers/pretty-symbols.js';
+import { RKHelper } from './helpers/rk-helper.js';
+import { RungeKutta } from './helpers/runge-kutta.js';
+import { InfoLogger } from './helpers/info-logger.js';
+import { CMSLoader } from './loaders/cms-loader.js';
+import { JiveXMLLoader } from './loaders/jivexml-loader.js';
+import { JSRootEventLoader } from './loaders/jsroot-event-loader.js';
+import { CMSObjects } from './loaders/objects/cms-objects.js';
+import { PhoenixObjects } from './loaders/objects/phoenix-objects.js';
+import { PhoenixLoader } from './loaders/phoenix-loader.js';
+import { Edm4hepJsonLoader } from './loaders/edm4hep-json-loader.js';
+import { ScriptLoader } from './loaders/script-loader.js';
+import { TrackmlLoader } from './loaders/trackml-loader.js';
+import { StateManager } from './managers/state-manager.js';
+import { URLOptionsManager } from './managers/url-options-manager.js';
+import { ThreeManager } from './managers/three-manager/index.js';
+import { UIManager } from './managers/ui-manager/index.js';
+import { PhoenixMenuNode } from './managers/ui-manager/phoenix-menu/phoenix-menu-node.js';
 
 if (typeof globalThis !== 'undefined') {
   // `globalThis` makes Phoenix modules available in the browser

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

@@ -1,19 +1,18 @@
-import { httpRequest } from 'jsroot';
+import { httpRequest, openFile } from 'jsroot';
 import { settings as jsrootSettings } from 'jsroot';
 import { build } from 'jsroot/geom';
-import { openFile } from 'jsroot/io';
-import { ThreeManager } from './managers/three-manager';
-import { UIManager } from './managers/ui-manager';
-import { InfoLogger } from './helpers/info-logger';
-import { Configuration } from './lib/types/configuration';
-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 { AnimationPreset } from './managers/three-manager/animations-manager';
-import { XRSessionType } from './managers/three-manager/xr/xr-manager';
-import { getLabelTitle } from './helpers/labels';
-import { PhoenixLoader } from './loaders/phoenix-loader';
+import { ThreeManager } from './managers/three-manager/index.js';
+import { UIManager } from './managers/ui-manager/index.js';
+import { InfoLogger } from './helpers/info-logger.js';
+import type { Configuration } from './lib/types/configuration.js';
+import { StateManager } from './managers/state-manager.js';
+import { LoadingManager } from './managers/loading-manager.js';
+import { URLOptionsManager } from './managers/url-options-manager.js';
+import { ActiveVariable } from './helpers/active-variable.js';
+import type { AnimationPreset } from './managers/three-manager/animations-manager.js';
+import { XRSessionType } from './managers/three-manager/xr/xr-manager.js';
+import { getLabelTitle } from './helpers/labels.js';
+import { PhoenixLoader } from './loaders/phoenix-loader.js';
 
 declare global {
   /**
@@ -146,12 +145,14 @@ export class EventDisplay {
     // Clearing existing event data
     this.graphicsLibrary.clearEventData();
     // Build data and add to scene
-    this.configuration.eventDataLoader.buildEventData(
-      eventData,
-      this.graphicsLibrary,
-      this.ui,
-      this.infoLogger,
-    );
+    if (this.configuration.eventDataLoader) {
+      this.configuration.eventDataLoader.buildEventData(
+        eventData,
+        this.graphicsLibrary,
+        this.ui,
+        this.infoLogger,
+      );
+    }
     this.onDisplayedEventChange.forEach((callback) => callback(eventData));
     // Reload the event data state in Phoenix menu
     this.ui.loadEventFolderPhoenixMenuState();
@@ -242,8 +243,8 @@ export class EventDisplay {
     filename: string,
     name: string,
     color: any,
-    menuNodeName?: string,
-    doubleSided?: boolean,
+    menuNodeName: string,
+    doubleSided: boolean,
     initiallyVisible: boolean = true,
     setFlat: boolean = true,
   ): Promise<void> {
@@ -357,9 +358,9 @@ export class EventDisplay {
    */
   public async loadGLTFGeometry(
     url: any,
-    name: string | undefined,
-    menuNodeName?: string,
-    scale?: number,
+    name: string,
+    menuNodeName: string = '',
+    scale: number = 1.0,
     initiallyVisible: boolean = true,
   ): Promise<void> {
     this.loadingManager.addLoadableItem(`gltf_geom_${name}`);
@@ -529,23 +530,29 @@ export class EventDisplay {
    * @returns Object containing all physics objects from the desired collection.
    */
   public getCollection(collectionName: string) {
-    return this.configuration.eventDataLoader.getCollection(collectionName);
+    if (this.configuration.eventDataLoader) {
+      return this.configuration.eventDataLoader.getCollection(collectionName);
+    }
+    return {};
   }
 
   /**
    * Get the different collections for the current stored event.
    * @returns List of strings, each representing a collection of the event displayed.
    */
   public getCollections(): string[] {
-    return this.configuration.eventDataLoader.getCollections();
+    if (this.configuration.eventDataLoader) {
+      return this.configuration.eventDataLoader.getCollections();
+    }
+    return [];
   }
 
   /**
    * 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.
    */
-  public listenToDisplayedEventChange(callback: (event) => any) {
+  public listenToDisplayedEventChange(callback: (event: any) => any) {
     this.onDisplayedEventChange.push(callback);
   }
 
@@ -554,7 +561,7 @@ export class EventDisplay {
    * the callback on changes to the events.
    * @param callback Callback to be added to the onEventsChange array.
    */
-  public listenToLoadedEventsChange(callback: (events) => any) {
+  public listenToLoadedEventsChange(callback: (events: any) => any) {
     this.onEventsChange.push(callback);
   }
 
@@ -563,7 +570,10 @@ export class EventDisplay {
    * @returns Metadata of the displayed event.
    */
   public getEventMetadata(): any[] {
-    return this.configuration.eventDataLoader.getEventMetadata();
+    if (this.configuration.eventDataLoader) {
+      return this.configuration.eventDataLoader.getEventMetadata();
+    }
+    return [];
   }
 
   /**
@@ -761,6 +771,10 @@ export class EventDisplay {
     indexInCollection: number,
     uuid: string,
   ) {
+    if (!this.configuration.eventDataLoader) {
+      return;
+    }
+
     const labelId = this.configuration.eventDataLoader.addLabelToEventObject(
       label,
       collection,
@@ -782,6 +796,9 @@ export class EventDisplay {
    */
   public resetLabels() {
     // labelsObject[EventDataType][Collection][Index]
+    if (!this.configuration.eventDataLoader) {
+      return;
+    }
     const labelsObject = this.configuration.eventDataLoader.getLabelsObject();
     for (const eventDataType in labelsObject) {
       for (const collection in labelsObject[eventDataType]) {

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

@@ -35,10 +35,11 @@ export const loadFile = (
     const configFile = e.target?.files[0];
     const reader = new FileReader();
     reader.onload = (e) => {
-      onFileRead?.(e.target.result.toString());
-
+      if (e.target && e.target.result) {
+        onFileRead?.(e.target.result.toString());
+      }
       inputFile.remove();
-      inputFile = null;
+      inputFile = new HTMLInputElement();
     };
     reader.readAsText(configFile);
   };

packages/phoenix-event-display/src/helpers/rk-helper.ts

@@ -1,6 +1,6 @@
-import { RungeKutta } from './runge-kutta';
+import { RungeKutta } from './runge-kutta.js';
 import { Vector3 } from 'three';
-import { CoordinateHelper } from './coordinate-helper';
+import { CoordinateHelper } from './coordinate-helper.js';
 
 /**
  * Helper methods for RungeKutta functions.

packages/phoenix-event-display/src/helpers/runge-kutta.ts

@@ -18,9 +18,9 @@ export class RungeKutta {
       half_h: number,
       B_middle: Vector3,
       B_last: Vector3,
-      k2: Vector3,
-      k3: Vector3,
-      k4: Vector3;
+      k2: Vector3 = new Vector3(),
+      k3: Vector3 = new Vector3(),
+      k4: Vector3 = new Vector3();
 
     // First Runge-Kutta point (at current position)
     const B_first: Vector3 = Field.get(state.pos);

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

@@ -12,7 +12,8 @@ export const readZipFile = async (file: File | ArrayBuffer) => {
 
   await archive.loadAsync(file);
   for (const filePath in archive.files) {
-    const fileData = await archive.file(filePath).async('string');
+    const fileData =
+      (await archive.file(filePath)?.async('string')) ?? 'Unable to read file';
     filesWithData[filePath] = fileData;
   }
 

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

@@ -1,50 +1,50 @@
 // Event display
-export * from './event-display';
+export * from './event-display.js';
 
 // Three
-export * from './managers/three-manager/index';
-export * from './managers/three-manager/animations-manager';
-export * from './managers/three-manager/controls-manager';
-export * from './managers/three-manager/effects-manager';
-export * from './managers/three-manager/export-manager';
-export * from './managers/three-manager/import-manager';
-export * from './managers/three-manager/renderer-manager';
-export * from './managers/three-manager/scene-manager';
-export * from './managers/three-manager/selection-manager';
-export * from './managers/three-manager/xr/xr-manager';
-export * from './managers/three-manager/xr/vr-manager';
-export * from './managers/three-manager/xr/ar-manager';
+export * from './managers/three-manager/index.js';
+export * from './managers/three-manager/animations-manager.js';
+export * from './managers/three-manager/controls-manager.js';
+export * from './managers/three-manager/effects-manager.js';
+export * from './managers/three-manager/export-manager.js';
+export * from './managers/three-manager/import-manager.js';
+export * from './managers/three-manager/renderer-manager.js';
+export * from './managers/three-manager/scene-manager.js';
+export * from './managers/three-manager/selection-manager.js';
+export * from './managers/three-manager/xr/xr-manager.js';
+export * from './managers/three-manager/xr/vr-manager.js';
+export * from './managers/three-manager/xr/ar-manager.js';
 
 // UI
-export * from './managers/ui-manager/index';
-export * from './managers/ui-manager/phoenix-menu/phoenix-menu-node';
+export * from './managers/ui-manager/index.js';
+export * from './managers/ui-manager/phoenix-menu/phoenix-menu-node.js';
 
 // Extras
-export * from './lib/types/configuration';
-export * from './lib/models/cut.model';
-export * from './lib/models/preset-view.model';
+export * from './lib/types/configuration.js';
+export * from './lib/models/cut.model.js';
+export * from './lib/models/preset-view.model.js';
 
 // Helpers
-export * from './helpers/info-logger';
-export * from './helpers/rk-helper';
-export * from './helpers/runge-kutta';
-export * from './helpers/pretty-symbols';
-export * from './helpers/active-variable';
-export * from './helpers/zip';
+export * from './helpers/info-logger.js';
+export * from './helpers/rk-helper.js';
+export * from './helpers/runge-kutta.js';
+export * from './helpers/pretty-symbols.js';
+export * from './helpers/active-variable.js';
+export * from './helpers/zip.js';
 
 // Loaders
-export * from './loaders/event-data-loader';
-export * from './loaders/cms-loader';
-export * from './loaders/jivexml-loader';
-export * from './loaders/jsroot-event-loader';
-export * from './loaders/phoenix-loader';
-export * from './loaders/edm4hep-json-loader';
-export * from './loaders/script-loader';
-export * from './loaders/trackml-loader';
-export * from './loaders/objects/cms-objects';
-export * from './loaders/objects/phoenix-objects';
+export * from './loaders/event-data-loader.js';
+export * from './loaders/cms-loader.js';
+export * from './loaders/jivexml-loader.js';
+export * from './loaders/jsroot-event-loader.js';
+export * from './loaders/phoenix-loader.js';
+export * from './loaders/edm4hep-json-loader.js';
+export * from './loaders/script-loader.js';
+export * from './loaders/trackml-loader.js';
+export * from './loaders/objects/cms-objects.js';
+export * from './loaders/objects/phoenix-objects.js';
 
 // Managers
-export * from './managers/state-manager';
-export * from './managers/loading-manager';
-export * from './managers/url-options-manager';
+export * from './managers/state-manager.js';
+export * from './managers/loading-manager.js';
+export * from './managers/url-options-manager.js';