Merge pull request #617 from Somya-Bansal159/navigate

Add a functionality to highlight subdetectors

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

@@ -653,18 +653,43 @@ export class EventDisplay {
    * Move the camera to look at the object with the given uuid
    * and highlight it.
    * @param uuid uuid of the object.
-   */
-  public lookAtObject(uuid: string) {
-    this.graphicsLibrary.lookAtObject(uuid);
-    this.graphicsLibrary.highlightObject(uuid);
+   * @param detector whether the function is for detector objects or event data.
+   */
+  public lookAtObject(uuid: string, detector: boolean = false) {
+    if (detector == true) {
+      this.graphicsLibrary.lookAtObject(uuid, true);
+      this.graphicsLibrary.highlightObject(uuid, true);
+    } else {
+      this.graphicsLibrary.lookAtObject(uuid);
+      this.graphicsLibrary.highlightObject(uuid);
+    }
   }
 
   /**
    * Highlight the object with the given uuid by giving it an outline.
    * @param uuid uuid of the object.
+   * @param detector whether the function is for detector objects or event data.
+   */
+  public highlightObject(uuid: string, detector: boolean = false) {
+    if (detector == true) {
+      this.graphicsLibrary.highlightObject(uuid, true);
+    } else {
+      this.graphicsLibrary.highlightObject(uuid, false);
+    }
+  }
+
+  /**
+   * Enable highlighting of the objects.
+   */
+  public enableHighlighting() {
+    this.graphicsLibrary.enableHighlighting();
+  }
+
+  /**
+   * Disable highlighting of the objects.
    */
-  public highlightObject(uuid: string) {
-    this.graphicsLibrary.highlightObject(uuid);
+  public disableHighlighting() {
+    this.graphicsLibrary.disableHighlighting();
   }
 
   /**

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

@@ -295,26 +295,28 @@ export class ControlsManager {
    * @param objectsGroup Group of objects to be traversed for finding the object
    * with the given uuid.
    */
-  public lookAtObject(uuid: string, objectsGroup: Object3D) {
+  public lookAtObject(
+    uuid: string,
+    objectsGroup: Object3D,
+    offset: number = 0,
+  ) {
     const origin = new Vector3(0, 0, 0);
 
     const objectPosition = this.getObjectPosition(uuid, objectsGroup);
     if (objectPosition) {
       // 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(camera.position)
-            .to(
-              {
-                x: objectPosition.x * 1.1,
-                y: objectPosition.y * 1.1,
-                z: objectPosition.z * 1.1,
-              },
-              200,
-            )
-            .start();
-        }
+      for (const camera of this.getAllCameras()) {
+        // Moving the camera to the object's position and then zooming out
+        new Tween(camera.position)
+          .to(
+            {
+              x: objectPosition.x * 1.1 + offset,
+              y: objectPosition.y * 1.1 + offset,
+              z: objectPosition.z * 1.1 + offset,
+            },
+            200,
+          )
+          .start();
       }
     }
   }

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

@@ -1045,12 +1045,22 @@ export class ThreeManager {
   /**
    * Move the camera to look at the object with the given uuid.
    * @param uuid uuid of the object.
+   * @param detector whether the function is for detector objects or event data
    */
-  public lookAtObject(uuid: string) {
-    this.controlsManager.lookAtObject(
-      uuid,
-      this.getSceneManager().getEventData(),
-    );
+  public lookAtObject(uuid: string, detector: boolean = false) {
+    if (detector == true) {
+      this.controlsManager.lookAtObject(
+        uuid,
+        this.getSceneManager().getGeometries(),
+        1000,
+      );
+    } else {
+      this.controlsManager.lookAtObject(
+        uuid,
+        this.getSceneManager().getEventData(),
+        0,
+      );
+    }
   }
 
   /**
@@ -1068,12 +1078,34 @@ export class ThreeManager {
   /**
    * Highlight the object with the given uuid by giving it an outline.
    * @param uuid uuid of the object.
+   * @param detector whether the function is for detector objects or event data.
    */
-  public highlightObject(uuid: string) {
-    this.selectionManager.highlightObject(
-      uuid,
-      this.getSceneManager().getEventData(),
-    );
+  public highlightObject(uuid: string, detector: boolean = false) {
+    if (detector == true) {
+      this.selectionManager.highlightObject(
+        uuid,
+        this.getSceneManager().getGeometries(),
+      );
+    } else {
+      this.selectionManager.highlightObject(
+        uuid,
+        this.getSceneManager().getEventData(),
+      );
+    }
+  }
+
+  /**
+   * Enable the highlighting of the objects.
+   */
+  public enableHighlighting() {
+    this.selectionManager.enableHighlighting();
+  }
+
+  /**
+   * Disable the highlighting of the objects.
+   */
+  public disableHighlighting() {
+    this.selectionManager.disableHighlighting();
   }
 
   /**

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

@@ -232,6 +232,14 @@ export class SelectionManager {
     }
   }
 
+  /**
+   * Enable highlighting of the objects.
+   */
+  public enableHighlighting() {
+    this.preSelectionAntialias = this.effectsManager.antialiasing;
+    this.effectsManager.setAntialiasing(false);
+  }
+
   /**
    * Highlight the object with the given uuid by giving it an outline.
    * @param uuid uuid of the object.
@@ -242,6 +250,15 @@ export class SelectionManager {
     const object = objectsGroup.getObjectByProperty('uuid', uuid);
     if (object) {
       this.outlinePass.selectedObjects = [object];
+      this.activeObject.update(object.uuid);
     }
   }
+
+  /**
+   * Disable highlighting of objects.
+   */
+  public disableHighlighting() {
+    this.outlinePass.selectedObjects = [];
+    this.effectsManager.setAntialiasing(this.preSelectionAntialias);
+  }
 }

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

@@ -92,6 +92,40 @@ describe('SelectionManager', () => {
     expect(selectionManagerPrivate.disableSelecting).toHaveBeenCalled();
   });
 
+  it('should set if highlighting is to be enabled or disabled', () => {
+    selectionManager['isInit'] = true;
+
+    selectionManager['effectsManager'] = new EffectsManager(
+      new PerspectiveCamera(),
+      new Scene(),
+      new THREE.WebGLRenderer(),
+    );
+
+    selectionManager['outlinePass'] = new OutlinePass(
+      new Vector2(100, 100),
+      new Scene(),
+      new PerspectiveCamera(),
+    );
+
+    const VALUE1 = selectionManager['effectsManager'].antialiasing;
+    const spy = jest.spyOn(
+      selectionManager['effectsManager'],
+      'setAntialiasing',
+    );
+
+    selectionManager.enableHighlighting();
+
+    expect(selectionManager['preSelectionAntialias']).toBe(VALUE1);
+    expect(spy).toHaveBeenCalledWith(false);
+
+    const VALUE2 = selectionManager['preSelectionAntialias'];
+
+    selectionManager.disableHighlighting();
+
+    expect(selectionManager['outlinePass'].selectedObjects).toStrictEqual([]);
+    expect(spy).toHaveBeenCalledWith(VALUE2);
+  });
+
   it('should highlight the object with the given uuid by giving it an outline', () => {
     const objectGroup = new Object3D();
     jest.spyOn(objectGroup, 'getObjectByProperty');

packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-ui.module.ts

@@ -26,6 +26,8 @@ import {
   UiMenuComponent,
   CollectionsInfoComponent,
   MenuToggleComponent,
+  GeometryBrowserComponent,
+  GeometryBrowserOverlayComponent,
   CollectionsInfoOverlayComponent,
   IoOptionsComponent,
   IOOptionsDialogComponent,
@@ -75,6 +77,8 @@ const PHOENIX_COMPONENTS: Type<any>[] = [
   UiMenuWrapperComponent,
   UiMenuComponent,
   CollectionsInfoComponent,
+  GeometryBrowserComponent,
+  GeometryBrowserOverlayComponent,
   MenuToggleComponent,
   CollectionsInfoOverlayComponent,
   IoOptionsComponent,

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

@@ -4,7 +4,6 @@ import { Object3D } from 'three';
 import { CollectionsInfoOverlayComponent } from './collections-info-overlay.component';
 import { EventDisplayService } from '../../../../services/event-display.service';
 import { PhoenixUIModule } from '../../../phoenix-ui.module';
-import { ElementRef } from '@angular/core';
 
 describe('CollectionsInfoOverlayComponent', () => {
   let component: CollectionsInfoOverlayComponent;
@@ -20,14 +19,16 @@ describe('CollectionsInfoOverlayComponent', () => {
         callback();
       },
     }),
+    enableHighlighting: jest.fn().mockReturnThis(),
+    disableHighlighting: jest.fn().mockReturnThis(),
     getThreeManager: jest.fn().mockReturnThis(),
     getSceneManager: jest.fn().mockReturnThis(),
     getScene: jest.fn().mockReturnThis(),
-    getObjectByName: jest.fn(),
-    getCollection: jest.fn(),
-    lookAtObject: jest.fn(),
-    highlightObject: jest.fn(),
-    addLabelToObject: jest.fn(),
+    getObjectByName: jest.fn().mockReturnThis(),
+    getCollection: jest.fn().mockReturnThis(),
+    lookAtObject: jest.fn().mockReturnThis(),
+    highlightObject: jest.fn().mockReturnThis(),
+    addLabelToObject: jest.fn().mockReturnThis(),
   };
 
   beforeEach(() => {
@@ -121,6 +122,18 @@ describe('CollectionsInfoOverlayComponent', () => {
     expect(mockEventDisplay.highlightObject).toHaveBeenCalledWith(mockUuid);
   });
 
+  it('should enable highlighting', () => {
+    component.enableHighlighting();
+
+    expect(mockEventDisplay.enableHighlighting).toHaveBeenCalled();
+  });
+
+  it('should disable highlighting', () => {
+    component.disableHighlighting();
+
+    expect(mockEventDisplay.disableHighlighting).toHaveBeenCalled();
+  });
+
   it('should sort collections in ascending order', () => {
     const mockCollections = [
       ['1235', 'testPropValue'],

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

@@ -76,6 +76,14 @@ export class CollectionsInfoOverlayComponent implements OnInit {
     }
   }
 
+  enableHighlighting() {
+    this.eventDisplay.enableHighlighting();
+  }
+
+  disableHighlighting() {
+    this.eventDisplay.disableHighlighting();
+  }
+
   toggleInvisible(checked: boolean) {
     this.hideInvisible = checked;
   }

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

@@ -14,7 +14,9 @@ describe('CollectionsInfoComponent', () => {
     create: jest.fn().mockReturnThis(),
     attach: jest.fn().mockReturnThis(),
     overlayWindow: jest.fn().mockReturnThis(),
-    instance: jest.fn().mockReturnThis(),
+    instance: {
+      enableHighlighting: jest.fn(),
+    },
     destroy: jest.fn(),
   };
 
@@ -63,5 +65,9 @@ describe('CollectionsInfoComponent', () => {
 
     // Expect the overlay window to be visible
     expect(component.overlayWindow.instance.showObjectsInfo).toBe(true);
+
+    expect(
+      component.overlayWindow.instance.enableHighlighting,
+    ).toHaveBeenCalled();
   });
 });

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

@@ -28,5 +28,8 @@ export class CollectionsInfoComponent implements OnInit, OnDestroy {
   toggleOverlay() {
     this.showObjectsInfo = !this.showObjectsInfo;
     this.overlayWindow.instance.showObjectsInfo = this.showObjectsInfo;
+    this.showObjectsInfo
+      ? this.overlayWindow.instance.enableHighlighting()
+      : this.overlayWindow.instance.disableHighlighting();
   }
 }