feat(ui-components): consolidate event and geometry browsers into dedicated browsers menu (#903)

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

@@ -74,6 +74,7 @@ import {
   EventBrowserOverlayComponent,
   EtaPhiPanelComponent,
   EtaPhiPanelOverlayComponent,
+  BrowsersComponent,
   MoreInfoComponent,
   KinematicsPanelComponent,
   KinematicsPanelOverlayComponent,
@@ -102,6 +103,7 @@ const PHOENIX_COMPONENTS: Type<any>[] = [
   NavComponent,
   UiMenuWrapperComponent,
   UiMenuComponent,
+  BrowsersComponent,
   MoreInfoComponent,
   CollectionsInfoComponent,
   GeometryBrowserComponent,

packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/browsers/browsers.component.html

@@ -0,0 +1,67 @@
+<div class="hidden-panels">
+  <app-event-browser
+    #eventBrowser
+    *ngIf="uiConfig?.showEventBrowser"
+  ></app-event-browser>
+  <app-collections-info
+    #collectionsInfo
+    *ngIf="uiConfig?.showCollectionsInfo"
+  ></app-collections-info>
+  <app-geometry-browser
+    #geometryBrowser
+    *ngIf="uiConfig?.showGeometryBrowser"
+  ></app-geometry-browser>
+</div>
+
+<mat-menu #browsers>
+  <button mat-menu-item *ngIf="uiConfig?.showEventBrowser">
+    <mat-checkbox
+      [checked]="showEventBrowser"
+      (click)="$event.stopPropagation()"
+      (change)="toggleEventBrowser()"
+    >
+      <span class="item-content">
+        <svg class="item-icon">
+          <use href="assets/icons/event-browser.svg#event-browser"></use>
+        </svg>
+        Event Browser
+      </span>
+    </mat-checkbox>
+  </button>
+  <button mat-menu-item *ngIf="uiConfig?.showCollectionsInfo">
+    <mat-checkbox
+      [checked]="showCollectionsInfo"
+      (click)="$event.stopPropagation()"
+      (change)="toggleCollectionsInfo()"
+    >
+      <span class="item-content">
+        <svg class="item-icon">
+          <use href="assets/icons/eventData.svg#eventData"></use>
+        </svg>
+        Collections Info
+      </span>
+    </mat-checkbox>
+  </button>
+  <button mat-menu-item *ngIf="uiConfig?.showGeometryBrowser">
+    <mat-checkbox
+      [checked]="showGeometryBrowser"
+      (click)="$event.stopPropagation()"
+      (change)="toggleGeometryBrowser()"
+    >
+      <span class="item-content">
+        <svg class="item-icon">
+          <use href="assets/icons/top-cube.svg#top-cube"></use>
+        </svg>
+        Geometry Browser
+      </span>
+    </mat-checkbox>
+  </button>
+</mat-menu>
+
+<app-menu-toggle
+  [matMenuTriggerFor]="browsers"
+  tooltip="Browsers"
+  icon="folder"
+  [active]="false"
+>
+</app-menu-toggle>

packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/browsers/browsers.component.scss

@@ -0,0 +1,20 @@
+.hidden-panels {
+  display: none;
+}
+
+.item-content {
+  display: inline-flex;
+  align-items: center;
+}
+
+.item-icon {
+  inline-size: 1.2rem;
+  block-size: 1.2rem;
+  margin-inline-end: 0.5rem;
+  fill: currentColor;
+}
+
+::ng-deep .cdk-overlay-pane:has(.mat-mdc-menu-panel),
+::ng-deep .cdk-overlay-pane:has(.mat-menu-panel) {
+  z-index: 99999 !important;
+}

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

@@ -0,0 +1,85 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { MatMenuModule } from '@angular/material/menu';
+import { BrowsersComponent } from './browsers.component';
+
+describe('BrowsersComponent', () => {
+  let component: BrowsersComponent;
+  let fixture: ComponentFixture<BrowsersComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [BrowsersComponent],
+      imports: [MatMenuModule],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BrowsersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should toggle event browser overlay', () => {
+    const mockEventBrowser = {
+      toggleOverlay: jest.fn(),
+    } as any;
+    component.eventBrowser = mockEventBrowser;
+
+    expect(component.showEventBrowser).toBe(false);
+    component.toggleEventBrowser();
+    expect(component.showEventBrowser).toBe(true);
+    expect(mockEventBrowser.toggleOverlay).toHaveBeenCalledTimes(1);
+
+    component.toggleEventBrowser();
+    expect(component.showEventBrowser).toBe(false);
+    expect(mockEventBrowser.toggleOverlay).toHaveBeenCalledTimes(2);
+  });
+
+  it('should toggle collections info overlay', () => {
+    const mockCollectionsInfo = {
+      toggleOverlay: jest.fn(),
+    } as any;
+    component.collectionsInfo = mockCollectionsInfo;
+
+    expect(component.showCollectionsInfo).toBe(false);
+    component.toggleCollectionsInfo();
+    expect(component.showCollectionsInfo).toBe(true);
+    expect(mockCollectionsInfo.toggleOverlay).toHaveBeenCalledTimes(1);
+
+    component.toggleCollectionsInfo();
+    expect(component.showCollectionsInfo).toBe(false);
+    expect(mockCollectionsInfo.toggleOverlay).toHaveBeenCalledTimes(2);
+  });
+
+  it('should toggle geometry browser overlay', () => {
+    const mockGeometryBrowser = {
+      toggleOverlay: jest.fn(),
+    } as any;
+    component.geometryBrowser = mockGeometryBrowser;
+
+    expect(component.showGeometryBrowser).toBe(false);
+    component.toggleGeometryBrowser();
+    expect(component.showGeometryBrowser).toBe(true);
+    expect(mockGeometryBrowser.toggleOverlay).toHaveBeenCalledTimes(1);
+
+    component.toggleGeometryBrowser();
+    expect(component.showGeometryBrowser).toBe(false);
+    expect(mockGeometryBrowser.toggleOverlay).toHaveBeenCalledTimes(2);
+  });
+
+  it('should not throw if child view reference is undefined on toggle', () => {
+    component.eventBrowser = undefined;
+    component.collectionsInfo = undefined;
+    component.geometryBrowser = undefined;
+
+    expect(() => component.toggleEventBrowser()).not.toThrow();
+    expect(() => component.toggleCollectionsInfo()).not.toThrow();
+    expect(() => component.toggleGeometryBrowser()).not.toThrow();
+  });
+});

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

@@ -0,0 +1,38 @@
+import { Component, Input, ViewChild } from '@angular/core';
+import { defaultUIMenuConfig, UIMenuConfig } from '../ui-menu.component';
+import { EventBrowserComponent } from '../event-browser/event-browser.component';
+import { CollectionsInfoComponent } from '../collections-info/collections-info.component';
+import { GeometryBrowserComponent } from '../geometry-browser/geometry-browser.component';
+
+@Component({
+  standalone: false,
+  selector: 'app-browsers',
+  templateUrl: './browsers.component.html',
+  styleUrls: ['./browsers.component.scss'],
+})
+export class BrowsersComponent {
+  @Input() uiConfig: UIMenuConfig = defaultUIMenuConfig;
+
+  @ViewChild('eventBrowser') eventBrowser?: EventBrowserComponent;
+  @ViewChild('collectionsInfo') collectionsInfo?: CollectionsInfoComponent;
+  @ViewChild('geometryBrowser') geometryBrowser?: GeometryBrowserComponent;
+
+  showEventBrowser = false;
+  showCollectionsInfo = false;
+  showGeometryBrowser = false;
+
+  toggleEventBrowser() {
+    this.showEventBrowser = !this.showEventBrowser;
+    this.eventBrowser?.toggleOverlay();
+  }
+
+  toggleCollectionsInfo() {
+    this.showCollectionsInfo = !this.showCollectionsInfo;
+    this.collectionsInfo?.toggleOverlay();
+  }
+
+  toggleGeometryBrowser() {
+    this.showGeometryBrowser = !this.showGeometryBrowser;
+    this.geometryBrowser?.toggleOverlay();
+  }
+}

packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/index.ts

@@ -42,6 +42,7 @@ export * from './event-browser/event-browser.component';
 export * from './event-browser/event-browser-overlay/event-browser-overlay.component';
 export * from './eta-phi-panel/eta-phi-panel.component';
 export * from './eta-phi-panel/eta-phi-panel-overlay/eta-phi-panel-overlay.component';
+export * from './browsers/browsers.component';
 export * from './more-info/more-info.component';
 export * from './ui-menu-wrapper/ui-menu-wrapper.component';
 export * from './histogram-panel/histogram-panel.component';

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

@@ -1,21 +1,9 @@
 <div class="hidden-panels">
   <app-info-panel #infoPanel *ngIf="uiConfig?.showInfoPanel"></app-info-panel>
-  <app-event-browser
-    #eventBrowser
-    *ngIf="uiConfig?.showEventBrowser"
-  ></app-event-browser>
-  <app-collections-info
-    #collectionsInfo
-    *ngIf="uiConfig?.showCollectionsInfo"
-  ></app-collections-info>
   <app-eta-phi-panel
     #etaPhiPanel
     *ngIf="uiConfig?.showEtaPhiPanel"
   ></app-eta-phi-panel>
-  <app-geometry-browser
-    #geometryBrowser
-    *ngIf="uiConfig?.showGeometryBrowser"
-  ></app-geometry-browser>
   <app-kinematics-panel
     #kinematicsPanel
     *ngIf="uiConfig?.showKinematicsPanel"
@@ -38,34 +26,6 @@
       </span>
     </mat-checkbox>
   </button>
-  <button mat-menu-item *ngIf="uiConfig?.showEventBrowser">
-    <mat-checkbox
-      [checked]="showEventBrowser"
-      (click)="$event.stopPropagation()"
-      (change)="toggleEventBrowser()"
-    >
-      <span class="item-content">
-        <svg class="item-icon">
-          <use href="assets/icons/event-browser.svg#event-browser"></use>
-        </svg>
-        Event Browser
-      </span>
-    </mat-checkbox>
-  </button>
-  <button mat-menu-item *ngIf="uiConfig?.showCollectionsInfo">
-    <mat-checkbox
-      [checked]="showCollectionsInfo"
-      (click)="$event.stopPropagation()"
-      (change)="toggleCollectionsInfo()"
-    >
-      <span class="item-content">
-        <svg class="item-icon">
-          <use href="assets/icons/eventData.svg#eventData"></use>
-        </svg>
-        Collections Info
-      </span>
-    </mat-checkbox>
-  </button>
   <button mat-menu-item *ngIf="uiConfig?.showEtaPhiPanel">
     <mat-checkbox
       [checked]="showEtaPhiPanel"
@@ -80,20 +40,6 @@
       </span>
     </mat-checkbox>
   </button>
-  <button mat-menu-item *ngIf="uiConfig?.showGeometryBrowser">
-    <mat-checkbox
-      [checked]="showGeometryBrowser"
-      (click)="$event.stopPropagation()"
-      (change)="toggleGeometryBrowser()"
-    >
-      <span class="item-content">
-        <svg class="item-icon">
-          <use href="assets/icons/top-cube.svg#top-cube"></use>
-        </svg>
-        Geometry Browser
-      </span>
-    </mat-checkbox>
-  </button>
   <button mat-menu-item *ngIf="uiConfig?.showKinematicsPanel">
     <mat-checkbox
       [checked]="showKinematicsPanel"