fix(event-display): improve object selection from uuid and label input

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

@@ -266,46 +266,46 @@ export class ControlsManager {
    */
   public lookAtObject(uuid: string, objectsGroup: Object3D) {
     const origin = new Vector3(0, 0, 0);
-    objectsGroup.traverse((object: any) => {
-      if (object.uuid === uuid) {
-        let objectPosition = new Vector3();
-        if (object instanceof Group) {
-          // If it is a group of other event data we traverse through it
-          object.traverse((childObject: any) => {
-            // Make sure the child is not a group (e.g Track is a group)
-            if (childObject.children.length === 0) {
-              if (childObject.position.equals(origin)) {
-                // Get the max vector from the bounding box to accumulate with the clusters
-                if (childObject.geometry?.boundingSphere) {
-                  objectPosition.add(
-                    childObject.geometry.boundingSphere.getBoundingBox().max
-                  );
-                }
-              } else {
-                objectPosition.add(childObject.position);
+
+    const object = objectsGroup.getObjectByProperty('uuid', uuid);
+    if (object) {
+      let objectPosition = new Vector3();
+      if (object instanceof Group) {
+        // If it is a group of other event data we traverse through it
+        object.traverse((childObject: any) => {
+          // Make sure the child is not a group (e.g Track is a group)
+          if (childObject.children.length === 0) {
+            if (childObject.position.equals(origin)) {
+              // Get the max vector from the bounding box to accumulate with the clusters
+              if (childObject.geometry?.boundingSphere) {
+                objectPosition.add(
+                  childObject.geometry.boundingSphere.getBoundingBox().max
+                );
               }
+            } else {
+              objectPosition.add(childObject.position);
             }
-          });
-        } else if (object.position.equals(origin)) {
-          // Get the center of bounding sphere of objects with no position
-          objectPosition = object.geometry?.boundingSphere?.center;
-        } else {
-          // Get the object position for all other elements
-          objectPosition = object.position;
-        }
-        // Check if the object is away from the origin
-        if (objectPosition.distanceTo(origin) > 0.001) {
-          for (const camera of this.getAllCameras()) {
-            // Moving the camera to the object's position and then zooming out
-            new TWEEN.Tween(camera.position).to({
-              x: objectPosition.x * 1.1,
-              y: objectPosition.y * 1.1,
-              z: objectPosition.z * 1.1
-            }, 200).start();
           }
+        });
+      } else if (object.position.equals(origin)) {
+        // Get the center of bounding sphere of objects with no position
+        objectPosition = object.geometry?.boundingSphere?.center;
+      } else {
+        // Get the object position for all other elements
+        objectPosition = object.position;
+      }
+      // Check if the object is away from the origin
+      if (objectPosition.distanceTo(origin) > 0.001) {
+        for (const camera of this.getAllCameras()) {
+          // Moving the camera to the object's position and then zooming out
+          new TWEEN.Tween(camera.position).to({
+            x: objectPosition.x * 1.1,
+            y: objectPosition.y * 1.1,
+            z: objectPosition.z * 1.1
+          }, 200).start();
         }
       }
-    });
+    }
   }
 
   /**

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

@@ -421,4 +421,8 @@ export class SceneManager {
       }
     });
   }
+
+  public addLabelToObject(uuid: string) {
+    this.scene.getObjectByProperty('uuid', uuid);
+  }
 }

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

@@ -223,10 +223,9 @@ export class SelectionManager {
    * with the given uuid.
    */
   public highlightObject(uuid: string, objectsGroup: Object3D) {
-    objectsGroup.traverse((object: any) => {
-      if (object.uuid === uuid) {
-        this.outlinePass.selectedObjects = [object];
-      }
-    });
+    const object = objectsGroup.getObjectByProperty('uuid', uuid);
+    if (object) {
+      this.outlinePass.selectedObjects = [object];
+    }
   }
 }

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

@@ -30,7 +30,7 @@
             [ngClass]="{'active-object': activeObject && activeObject.uuid === object.uuid}">
             <td>#{{i}}</td>
             <td>
-              <div *ngIf="object.uuid" class="row justify-content-center object-select-wrapper">
+              <div *ngIf="object.uuid" class="row justify-content-center icon-wrapper">
                 <div class="object-select" matTooltip="Move camera to object" (click)="lookAtObject(object.uuid)">
                   <svg>
                     <use href="assets/icons/views.svg#views"></use>
@@ -45,10 +45,10 @@
             </td>
             <td>
               <div class="row m-0 add-label">
-                <div class="p-0 col-10">
+                <div class="col-10 p-0">
                   <input class="form-control form-control-sm" type="text" [id]="'label' + i" />
                 </div>
-                <div class="p-0 pl-2 text-center col-2">
+                <div class="col-2 p-0 pl-2 text-center icon-wrapper">
                   <div class="object-select" matTooltip="Add label to object" (click)="addLabel(i)">
                     <svg>
                       <use href="assets/icons/add-icon.svg#add-icon"></use>

packages/phoenix-ng/projects/phoenix-ui-components/src/components/ui-menu/collections-info/collections-info-overlay/collections-info-overlay.component.scss

@@ -26,6 +26,9 @@
     input {
       padding: 0.1rem 0.3rem;
       font-size: 0.75rem;
+      color: var(--phoenix-text-color);
+      background-color: var(--phoenix-background-color-tertiary);
+      border: 1px solid var(--phoenix-border);
     }
   }
 }
@@ -54,10 +57,19 @@
     background: var(--phoenix-text-color);
     box-shadow: 0 0 15px var(--phoenix-text-color);
 
-    div.object-select-wrapper {
+    div.icon-wrapper {
       --phoenix-options-icon-path: var(--phoenix-background-color);
       --phoenix-options-icon-bg: var(--phoenix-text-color-hover);
     }
+
+    .add-label {
+
+      input {
+        --phoenix-text-color: var(--phoenix-background-color);
+        --phoenix-background-color-tertiary: var(--phoenix-text-color-secondary);
+        --phoenix-border: var(--phoenix-background-color);
+      }
+    }
   }
 
   td {

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, ElementRef } from '@angular/core';
 import { PrettySymbols } from 'phoenix-event-display';
 import { EventDisplayService } from '../../../../services/event-display.service';
 
@@ -10,13 +10,13 @@ import { EventDisplayService } from '../../../../services/event-display.service'
 export class CollectionsInfoOverlayComponent implements OnInit {
 
   @Input() showObjectsInfo: boolean;
-  // showObjectsInfo = true;
   collections: string[];
+  selectedCollection: string;
   showingCollection: any;
   collectionColumns: string[];
   activeObject: any;
 
-  constructor(private eventDisplay: EventDisplayService) { }
+  constructor(private elementRef: ElementRef, private eventDisplay: EventDisplayService) { }
 
   ngOnInit() {
     this.eventDisplay.listenToDisplayedEventChange((event) => this.collections = this.eventDisplay.getCollections());
@@ -30,6 +30,7 @@ export class CollectionsInfoOverlayComponent implements OnInit {
 
   changeCollection(selected: any) {
     const value = selected.target.value;
+    this.selectedCollection = value;
     this.showingCollection = this.eventDisplay.getCollection(value).map(PrettySymbols.getPrettyParams);
     this.collectionColumns = Object.keys(this.showingCollection[0]).filter((column) => column !== 'uuid');
   }
@@ -49,8 +50,10 @@ export class CollectionsInfoOverlayComponent implements OnInit {
   }
 
   addLabel(index: number) {
-    const value = (document.getElementById(`label${index}`) as HTMLInputElement)?.value;
-    console.log(`Added label ${value}`);
+    const value = this.elementRef.nativeElement.querySelector(`#label${index}`).value;
+    if (value && this.selectedCollection) {
+      console.log(`Added label: ${this.selectedCollection} ${index} ${value}`);
+    }
   }
 
 }