fixed collection info dropdown order

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

@@ -1,18 +1,17 @@
-import { httpRequest, openFile } from 'jsroot';
-import { settings as jsrootSettings } from 'jsroot';
+import { httpRequest, settings as jsrootSettings, openFile } from 'jsroot';
 import { build } from 'jsroot/geom';
-import { ThreeManager } from './managers/three-manager/index';
-import { UIManager } from './managers/ui-manager/index';
+import { ActiveVariable } from './helpers/active-variable';
 import { InfoLogger } from './helpers/info-logger';
+import { getLabelTitle } from './helpers/labels';
 import type { Configuration } from './lib/types/configuration';
-import { StateManager } from './managers/state-manager';
+import { PhoenixLoader } from './loaders/phoenix-loader';
 import { LoadingManager } from './managers/loading-manager';
-import { URLOptionsManager } from './managers/url-options-manager';
-import { ActiveVariable } from './helpers/active-variable';
+import { StateManager } from './managers/state-manager';
 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 { getLabelTitle } from './helpers/labels';
-import { PhoenixLoader } from './loaders/phoenix-loader';
+import { UIManager } from './managers/ui-manager/index';
+import { URLOptionsManager } from './managers/url-options-manager';
 
 declare global {
   /**
@@ -540,11 +539,11 @@ export class EventDisplay {
    * Get the different collections for the current stored event.
    * @returns List of strings, each representing a collection of the event displayed.
    */
-  public getCollections(): string[] {
+  public getCollections(): { [key: string]: string[] } {
     if (this.configuration.eventDataLoader) {
       return this.configuration.eventDataLoader.getCollections();
     }
-    return [];
+    return {};
   }
 
   /**

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

@@ -1,6 +1,6 @@
+import { InfoLogger } from '../helpers/info-logger';
 import { ThreeManager } from '../managers/three-manager/index';
 import { UIManager } from '../managers/ui-manager/index';
-import { InfoLogger } from '../helpers/info-logger';
 
 /**
  * Event data loader for implementing different event data loaders.
@@ -32,7 +32,7 @@ export interface EventDataLoader {
    * Get the different collections for the current stored event.
    * @returns List of strings, each representing a collection of the event displayed.
    */
-  getCollections(): string[];
+  getCollections(): { [key: string]: string[] };
 
   /**
    * Get all the objects inside a collection.

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

@@ -1,19 +1,19 @@
-import { Group, Object3D, Vector3 } from 'three';
 import { GUI } from 'dat.gui';
-import type { EventDataLoader } from './event-data-loader';
-import { UIManager } from '../managers/ui-manager/index';
-import { ThreeManager } from '../managers/three-manager/index';
-import { Cut } from '../lib/models/cut.model';
-import { PhoenixObjects } from './objects/phoenix-objects';
+import * as _ from 'lodash';
+import { Group, Object3D, Vector3 } from 'three';
+import { CoordinateHelper } from '../helpers/coordinate-helper';
 import { InfoLogger } from '../helpers/info-logger';
-import { PhoenixMenuNode } from '../managers/ui-manager/phoenix-menu/phoenix-menu-node';
+import { getLabelTitle } from '../helpers/labels';
+import { Cut } from '../lib/models/cut.model';
 import { LoadingManager } from '../managers/loading-manager';
 import { StateManager } from '../managers/state-manager';
-import { CoordinateHelper } from '../helpers/coordinate-helper';
-import { getLabelTitle } from '../helpers/labels';
+import { ThreeManager } from '../managers/three-manager/index';
 import { DatGUIMenuUI } from '../managers/ui-manager/dat-gui-ui';
+import { UIManager } from '../managers/ui-manager/index';
+import { PhoenixMenuNode } from '../managers/ui-manager/phoenix-menu/phoenix-menu-node';
 import { PhoenixMenuUI } from '../managers/ui-manager/phoenix-menu/phoenix-menu-ui';
-import * as _ from 'lodash';
+import type { EventDataLoader } from './event-data-loader';
+import { PhoenixObjects } from './objects/phoenix-objects';
 
 /**
  * Loader for processing and loading an event.
@@ -100,23 +100,24 @@ export class PhoenixLoader implements EventDataLoader {
    * Get list of collections in the event data.
    * @returns List of all collection names.
    */
-  public getCollections(): string[] {
+  public getCollections(): { [key: string]: string[] } {
     if (!this.eventData) {
-      return [];
+      return {};
     }
 
-    const collections = [];
+    const collectionsByType: { [key: string]: string[] } = {};
+
     for (const objectType in this.eventData) {
       if (
         this.eventData[objectType] &&
-        typeof this.eventData[objectType] === 'object'
+        typeof this.eventData[objectType] == 'object'
       ) {
-        for (const collection in this.eventData[objectType]) {
-          collections.push(collection);
-        }
+        collectionsByType[objectType] = Object.keys(
+          this.eventData[objectType],
+        ).sort();
       }
     }
-    return collections;
+    return collectionsByType;
   }
 
   /**

packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.html

@@ -21,9 +21,14 @@
             (change)="changeCollection($event.target.value)"
           >
             <option value="" selected disabled hidden>Choose Collection</option>
-            <option *ngFor="let collection of collections" [value]="collection">
-              {{ collection }}
-            </option>
+            <optgroup *ngFor="let group of collections" [label]="group.type">
+              <option
+                *ngFor="let collection of group.collections"
+                [value]="collection"
+              >
+                {{ collection }}
+              </option>
+            </optgroup>
           </select>
         </div>
         <mat-checkbox

packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.ts

@@ -1,7 +1,7 @@
-import { Component, type OnInit, Input, ElementRef } from '@angular/core';
+import { Component, ElementRef, Input, type OnInit } from '@angular/core';
 import {
-  PrettySymbols,
   ActiveVariable,
+  PrettySymbols,
   SceneManager,
 } from 'phoenix-event-display';
 import { EventDisplayService } from '../../../../services/event-display.service';
@@ -14,7 +14,7 @@ import { EventDisplayService } from '../../../../services/event-display.service'
 export class CollectionsInfoOverlayComponent implements OnInit {
   @Input() showObjectsInfo: boolean;
   hideInvisible: boolean;
-  collections: string[];
+  collections: { type: string; collections: string[] }[];
   selectedCollection: string;
   showingCollection: any;
   collectionColumns: string[];
@@ -27,9 +27,17 @@ export class CollectionsInfoOverlayComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.eventDisplay.listenToDisplayedEventChange(
-      (_event) => (this.collections = this.eventDisplay.getCollections()),
-    );
+    this.eventDisplay.listenToDisplayedEventChange(() => {
+      const collectionsGrouped: { [key: string]: string[] } =
+        this.eventDisplay.getCollections();
+      this.collections = Object.entries(collectionsGrouped).map(
+        ([type, collections]: [string, string[]]) => ({
+          type,
+          collections,
+        }),
+      );
+    });
+
     this.activeObject = this.eventDisplay.getActiveObjectId();
     this.activeObject.onUpdate((value: string) => {
       if (document.getElementById(value)) {