feat(event-display): handle loading better

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

@@ -5,6 +5,7 @@ import { Configuration } from './extras/configuration';
 import { StateManager } from './managers/state-manager';
 import { JiveXMLLoader } from './loaders/jivexml-loader';
 import { LoadingManager } from './managers/loading-manager';
+import { PhoenixLoader } from './loaders/phoenix-loader';
 
 declare global {
   /**
@@ -132,13 +133,11 @@ export class EventDisplay {
    * @param eventKey String that represents the event in the eventsData object.
    */
   public loadEvent(eventKey: any) {
-    this.loadingManager.addLoadableItem('event');
     const event = this.eventsData[eventKey];
 
     if (event) {
       this.buildEventDataFromJSON(event);
     }
-    this.loadingManager.itemLoaded('event');
   }
 
   /**
@@ -188,8 +187,14 @@ export class EventDisplay {
    * @param initiallyVisible Whether the geometry is initially visible or not.
    * @param setFlat Whether object should be flat-shaded or not.
    */
-  public loadOBJGeometry(filename: string, name: string, color: any,
-    menuNodeName?: string, doubleSided?: boolean, initiallyVisible: boolean = true, setFlat: boolean = true) {
+  public loadOBJGeometry(
+    filename: string,
+    name: string, color: any,
+    menuNodeName?: string, doubleSided?: boolean,
+    initiallyVisible: boolean = true,
+    setFlat: boolean = true
+  ) {
+    this.loadingManager.addLoadableItem(`obj_geom_${name}`);
     this.ui.addGeometry(name, color, menuNodeName, initiallyVisible);
     this.infoLogger.add(name, 'Loaded OBJ geometry');
     return this.graphicsLibrary.loadOBJGeometry(filename, name, color, doubleSided, initiallyVisible, setFlat);
@@ -205,6 +210,7 @@ export class EventDisplay {
    */
   public parseOBJGeometry(content: string, name: string,
     menuNodeName?: string, initiallyVisible: boolean = true) {
+    this.loadingManager.addLoadableItem(`parse_obj_${name}`);
     this.graphicsLibrary.parseOBJGeometry(content, name, initiallyVisible);
     this.ui.addGeometry(name, 0x000fff, menuNodeName, initiallyVisible);
   }
@@ -233,6 +239,8 @@ export class EventDisplay {
       this.graphicsLibrary.clearEventData();
       // Add to scene
       this.loadSceneConfiguration(phoenixScene.sceneConfiguration);
+
+      this.loadingManager.addLoadableItem(`parse_gltf_${name}`);
       return this.graphicsLibrary.parseGLTFGeometry(phoenixScene.scene);
     }
   }
@@ -250,6 +258,7 @@ export class EventDisplay {
    */
   public parseGLTFGeometry(input: any) {
     const scene = JSON.parse(input);
+    this.loadingManager.addLoadableItem(`parse_gltf_${name}`);
     this.graphicsLibrary.parseGLTFGeometry(scene);
   }
 
@@ -263,8 +272,13 @@ export class EventDisplay {
    * @param initiallyVisible Whether the geometry is initially visible or not.
    * @returns Promise for loading the geometry.
    */
-  public loadGLTFGeometry(url: any, name: string, menuNodeName?: string,
-    scale?: number, initiallyVisible: boolean = true): Promise<unknown> {
+  public loadGLTFGeometry(
+    url: any, name: string,
+    menuNodeName?: string,
+    scale?: number,
+    initiallyVisible: boolean = true
+  ): Promise<unknown> {
+    this.loadingManager.addLoadableItem(`gltf_geom_${name}`);
     this.ui.addGeometry(name, undefined, menuNodeName, initiallyVisible);
     this.infoLogger.add(name, 'Loaded GLTF geometry');
     return this.graphicsLibrary.loadGLTFGeometry(url, name, scale, initiallyVisible);
@@ -280,8 +294,13 @@ export class EventDisplay {
    * @param initiallyVisible Whether the geometry is initially visible or not.
    * @returns Promise for loading the geometry.
    */
-  public loadJSONGeometry(json: string | object, name: string, menuNodeName?: string,
-    scale?: number, doubleSided?: boolean, initiallyVisible: boolean = true): Promise<unknown> {
+  public loadJSONGeometry(
+    json: string | object, name: string,
+    menuNodeName?: string,
+    scale?: number, doubleSided?: boolean,
+    initiallyVisible: boolean = true
+  ): Promise<unknown> {
+    this.loadingManager.addLoadableItem(`json_geom_${name}`);
     this.ui.addGeometry(name, undefined, menuNodeName, initiallyVisible);
     this.infoLogger.add(name, 'Loaded JSON geometry');
     return this.graphicsLibrary.loadJSONGeometry(json, name, scale, doubleSided, initiallyVisible);
@@ -297,13 +316,17 @@ export class EventDisplay {
    * @param doubleSided Renders both sides of the material.
    * @param initiallyVisible Whether the geometry is initially visible or not.
    */
-  public loadRootJSONGeometry(JSROOT: any, url: string, name: string, menuNodeName?: string,
-    scale?: number, doubleSided?: boolean, initiallyVisible: boolean = true) {
-    this.loadingManager.addLoadableItem('root_json_g');
+  public loadRootJSONGeometry(
+    JSROOT: any, url: string,
+    name: string, menuNodeName?: string,
+    scale?: number, doubleSided?: boolean,
+    initiallyVisible: boolean = true
+  ) {
+    this.loadingManager.addLoadableItem('root_json_geom');
     JSROOT.NewHttpRequest(url, 'object', (obj: any) => {
       this.loadJSONGeometry(JSROOT.GEO.build(obj, { dflt_colors: true }).toJSON(),
         name, menuNodeName, scale, doubleSided, initiallyVisible);
-      this.loadingManager.itemLoaded('root_json_g');
+      this.loadingManager.itemLoaded('root_json_geom');
     }).send();
   }
 
@@ -574,11 +597,13 @@ export class EventDisplay {
         .then((res: object | string) => {
           if (type === 'jivexml') {
             const loader = new JiveXMLLoader();
+            this.configuration.eventDataLoader = loader;
             // Parse the JSON to extract events and their data
             loader.process(res);
             const eventData = loader.getEventData();
             this.buildEventDataFromJSON(eventData);
           } else {
+            this.configuration.eventDataLoader = new PhoenixLoader();
             this.parsePhoenixEvents(res);
           }
         }).catch((error) => {

packages/phoenix-event-display/src/loaders/cms-loader.ts

@@ -103,8 +103,6 @@ export class CMSLoader extends PhoenixLoader {
   public getEventData(): any {
     const eventInfo = this.data?.['Collections']?.['Event_V2']?.[0];
 
-    this.loadingManager.addLoadableItem('cms_event_data');
-
     let eventData = {
       runNumber: eventInfo?.[0],
       eventNumber: eventInfo?.[1],
@@ -135,8 +133,6 @@ export class CMSLoader extends PhoenixLoader {
       }
     }
 
-    this.loadingManager.itemLoaded('cms_event_data');
-
     return eventData;
   }
 

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

@@ -40,16 +40,12 @@ export class PhoenixLoader implements EventDataLoader {
     this.ui = ui;
     this.eventData = eventData;
 
-    this.loadingManager.addLoadableItem();
-
     // Replacing tracks with tracks through Runge-Kutta
     // TODO - make this configurable? Or possibly automatic if tracks have <2 positions to draw?
     // Object.assign(this.eventData.Tracks, this.getTracksWithRungeKutta(this.eventData['Tracks']));
 
     // initiate load
     this.loadObjectTypes(eventData);
-
-    this.loadingManager.itemLoaded();
 
     const eventNumber = eventData['event number'] ? eventData['event number'] : eventData['eventNumber'];
     const runNumber = eventData['run number'] ? eventData['run number'] : eventData['runNumber'];

packages/phoenix-event-display/src/loaders/script-loader.ts

@@ -14,7 +14,7 @@ export class ScriptLoader {
    */
   public static loadJSRootScripts(onScriptsLoaded: (JSROOT: any) => void) {
     const loadingManager = new LoadingManager();
-    loadingManager.addLoadableItem();
+    loadingManager.addLoadableItem('jsroot_scripts');
     (async () => {
       const allScripts = [
         'JSRootCore.js', 'three.min.js', 'three.extra.min.js',
@@ -24,8 +24,8 @@ export class ScriptLoader {
       for (const script of allScripts) {
         await ScriptLoader.loadScript('assets/jsroot/' + script, 'JSROOT');
       }
-      loadingManager.itemLoaded();
       onScriptsLoaded(JSROOT);
+      loadingManager.itemLoaded('jsroot_scripts');
     })();
   }
 
@@ -40,7 +40,7 @@ export class ScriptLoader {
   public static loadScript(scriptURL: string, scriptFor?: string,
     parentElement: HTMLElement = document.getElementsByTagName('head')[0]): Promise<any> {
     const loadingManager = new LoadingManager();
-    loadingManager.addLoadableItem();
+    loadingManager.addLoadableItem('single_script');
     return new Promise<any>((resolve, reject) => {
       const scriptExists = document
         .querySelectorAll<HTMLScriptElement>('script[src="' + scriptURL + '"]');
@@ -55,23 +55,23 @@ export class ScriptLoader {
         scriptElement.addEventListener('load', () => {
           scriptElement.setAttribute('data-loaded', 'true');
           resolve();
-          loadingManager.itemLoaded();
+          loadingManager.itemLoaded('single_script');
         });
         scriptElement.onerror = (event) => {
           console.error('ERROR LOADING SCRIPT: ', event);
           reject();
-          loadingManager.itemLoaded();
+          loadingManager.itemLoaded('single_script');
         }
         parentElement.appendChild(scriptElement);
       } else {
         // If script has already loaded then resolve else wait for it to load
         if (scriptExists[0].dataset.loaded === 'true') {
           resolve();
-          loadingManager.itemLoaded();
+          loadingManager.itemLoaded('single_script');
         } else {
           scriptExists[0].addEventListener('load', () => {
             resolve();
-            loadingManager.itemLoaded();
+            loadingManager.itemLoaded('single_script');
           });
         }
       }

packages/phoenix-event-display/src/three/import-manager.ts

@@ -1,6 +1,7 @@
 import { DoubleSide, Mesh, LineSegments, LineBasicMaterial, MeshPhongMaterial, Object3D, Plane, Material, ObjectLoader, Color, FrontSide } from 'three';
 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { LoadingManager } from '../managers/loading-manager';
 
 /**
  * Manager for managing event display's import related functionality.
@@ -13,6 +14,8 @@ export class ImportManager {
   private EVENT_DATA_ID: string;
   /** Object group ID containing detector geometries. */
   private GEOMETRIES_ID: string;
+  /** Loading manager for loadable resources */
+  private loadingManager: LoadingManager;
 
   /**
    * Constructor for the import manager.
@@ -24,6 +27,7 @@ export class ImportManager {
     this.clipPlanes = clipPlanes;
     this.EVENT_DATA_ID = EVENT_DATA_ID;
     this.GEOMETRIES_ID = GEOMETRIES_ID;
+    this.loadingManager = new LoadingManager();
   }
 
   /**
@@ -53,7 +57,11 @@ export class ImportManager {
         const processed = this.processOBJ(object, name, color, doubleSided, setFlat, 'OBJ file');
         callback(processed);
         resolve();
-      }, null, reject);
+        this.loadingManager.itemLoaded(`obj_geom_${name}`);
+      }, null, (error) => {
+        reject(error);
+        this.loadingManager.itemLoaded(`obj_geom_${name}`);
+      });
     });
   }
 
@@ -160,7 +168,11 @@ export class ImportManager {
         const geometries = gltf.scene.getObjectByName(this.GEOMETRIES_ID);
         callback(eventData, geometries);
         resolve();
-      }, reject);
+        this.loadingManager.itemLoaded(`parse_gltf_${name}`);
+      }, (error) => {
+        reject(error);
+        this.loadingManager.itemLoaded(`parse_gltf_${name}`);
+      });
     });
   }
 
@@ -181,7 +193,11 @@ export class ImportManager {
         this.processGeometry(geometry, name, scale);
         callback(geometry);
         resolve();
-      }, null, reject);
+        this.loadingManager.addLoadableItem(`gltf_geom_${name}`);
+      }, null, (error) => {
+        reject(error);
+        this.loadingManager.addLoadableItem(`gltf_geom_${name}`);
+      });
     });
   }
 
@@ -204,12 +220,17 @@ export class ImportManager {
           this.processGeometry(geometry, name, scale, doubleSided);
           callback(geometry);
           resolve();
-        }, null, reject);
+          this.loadingManager.itemLoaded(`json_geom_${name}`);
+        }, null, (error) => {
+          reject(error);
+          this.loadingManager.itemLoaded(`json_geom_${name}`);
+        });
       });
     } else if (typeof json === 'object') {
       return new Promise((resolve, reject) => {
         const geometry = loader.parse(json, object => {
           resolve();
+          this.loadingManager.itemLoaded(`json_geom_${name}`);
         });
         this.processGeometry(geometry, name, scale, doubleSided);
         callback(geometry);

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

@@ -265,13 +265,10 @@ export class ThreeManager {
     initiallyVisible: boolean = true,
     setFlat: boolean = true
   ): Promise<unknown> {
-    this.loadingManager.addLoadableItem(`obj_geom_${name}`);
-
     const geometries = this.sceneManager.getGeometries();
     const callback = (object: Object3D) => {
       object.visible = initiallyVisible;
       geometries.add(object);
-      this.loadingManager.itemLoaded(`obj_geom_${name}`);
     };
     return this.importManager.loadOBJGeometry(callback, filename, name, color, doubleSided, setFlat);
   }
@@ -290,8 +287,6 @@ export class ThreeManager {
     scale?: number,
     initiallyVisible: boolean = true
   ): Promise<unknown> {
-    this.loadingManager.addLoadableItem(`gltf_geom_${name}`);
-
     const geometries = this.sceneManager.getGeometries();
     const callback = (geometry: Object3D) => {
       geometry.visible = initiallyVisible;
@@ -308,7 +303,6 @@ export class ThreeManager {
    * @param initiallyVisible Whether the geometry is initially visible or not.
    */
   public parseOBJGeometry(geometry: string, name: string, initiallyVisible: boolean = true) {
-    this.loadingManager.addLoadableItem(`parse_obj_${name}`);
     const geometries = this.sceneManager.getGeometries();
     const object = this.importManager.parseOBJGeometry(geometry, name);
     object.visible = initiallyVisible;
@@ -322,11 +316,9 @@ export class ThreeManager {
    * @returns Promise for loading the geometry.
    */
   public parseGLTFGeometry(geometry: any): Promise<unknown> {
-    this.loadingManager.addLoadableItem(`parse_gltf_${name}`);
     const callback = (geometries: Object3D, eventData: Object3D) => {
       this.sceneManager.getScene().add(geometries);
       this.sceneManager.getScene().add(eventData);
-      this.loadingManager.itemLoaded(`parse_gltf_${name}`);
     };
     return this.importManager.parseGLTFGeometry(geometry, callback);
   }
@@ -342,12 +334,10 @@ export class ThreeManager {
    */
   public loadJSONGeometry(json: string | object, name: string, scale?: number,
     doubleSided?: boolean, initiallyVisible: boolean = true): Promise<unknown> {
-    this.loadingManager.addLoadableItem(`json_geom_${name}`);
     const geometries = this.sceneManager.getGeometries();
     const callback = (geometry: Object3D) => {
       geometry.visible = initiallyVisible;
       geometries.add(geometry);
-      this.loadingManager.itemLoaded(`json_geom_${name}`);
     };
     return this.importManager.loadJSONGeometry(json, name, callback, scale, doubleSided);
   }
@@ -641,6 +631,7 @@ export class ThreeManager {
    * @param parameters The name, dimensions, and radial values for this cylindrical volume.
    */
   public addGeometryFromParameters(parameters: any): void {
+    this.loadingManager.addLoadableItem('geom_from_params');
     let scene = this.getSceneManager().getScene();
     let moduleName = parameters.ModuleName;
     let moduleXdim = parameters.Xdim;
@@ -686,5 +677,7 @@ export class ThreeManager {
       }
       z += zstep
     }
+
+    this.loadingManager.itemLoaded('geom_from_params');
   }
 }