From 8a89be7688c8c9c290a0adab0ced0f290ba5104b Mon Sep 17 00:00:00 2001
From: Dashrat <dashrat.rajpurohit.cg@gmail.com>
Date: Mon, 12 Oct 2026 17:19:29 +0530
Subject: [PATCH] feat(ui-components): consolidate event and geometry browsers
 into dedicated browsers menu (#903)

---
 .../lib/components/phoenix-ui.module.ts       |  2 +
 .../ui-menu/browsers/browsers.component.html  | 67 +++++++++++++++
 .../ui-menu/browsers/browsers.component.scss  | 20 +++++
 .../browsers/browsers.component.test.ts       | 85 +++++++++++++++++++
 .../ui-menu/browsers/browsers.component.ts    | 38 +++++++++
 .../lib/components/ui-menu/index.ts           |  1 +
 .../more-info/more-info.component.html        | 54 ------------
 .../more-info/more-info.component.test.ts     | 85 +++++++++++++++++++
 .../ui-menu/more-info/more-info.component.ts  | 30 +------
 .../components/ui-menu/ui-menu.component.html | 11 +++
 .../components/ui-menu/ui-menu.component.ts   |  2 +
 11 files changed, 314 insertions(+), 81 deletions(-)
 create mode 100644 packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/browsers/browsers.component.html
 create mode 100644 packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/browsers/browsers.component.scss
 create mode 100644 packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/browsers/browsers.component.test.ts
 create mode 100644 packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/browsers/browsers.component.ts
 create mode 100644 packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/more-info/more-info.component.test.ts

diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-ui.module.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-ui.module.ts
index dd5568949..c335235b5 100644
--- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-ui.module.ts
+++ b/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,
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/browsers/browsers.component.html b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/browsers/browsers.component.html
new file mode 100644
index 000000000..41bb39893
--- /dev/null
+++ b/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>
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/browsers/browsers.component.scss b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/browsers/browsers.component.scss
new file mode 100644
index 000000000..f376b0495
--- /dev/null
+++ b/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;
+}
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/browsers/browsers.component.test.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/browsers/browsers.component.test.ts
new file mode 100644
index 000000000..bce9cee14
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/browsers/browsers.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/browsers/browsers.component.ts
new file mode 100644
index 000000000..b0805ee5a
--- /dev/null
+++ b/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();
+  }
+}
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/index.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/index.ts
index 0fd3e3dd6..db02d95eb 100644
--- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/index.ts
+++ b/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';
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/more-info/more-info.component.html b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/more-info/more-info.component.html
index 42e2f9bc1..5e25c59e0 100644
--- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/more-info/more-info.component.html
+++ b/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"
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/more-info/more-info.component.test.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/more-info/more-info.component.test.ts
new file mode 100644
index 000000000..49f01d767
--- /dev/null
+++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/more-info/more-info.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 { MoreInfoComponent } from './more-info.component';
+
+describe('MoreInfoComponent', () => {
+  let component: MoreInfoComponent;
+  let fixture: ComponentFixture<MoreInfoComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [MoreInfoComponent],
+      imports: [MatMenuModule],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MoreInfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should toggle info panel overlay', () => {
+    const mockInfoPanel = {
+      toggleOverlay: jest.fn(),
+    } as any;
+    component.infoPanel = mockInfoPanel;
+
+    expect(component.showInfoPanel).toBe(false);
+    component.toggleInfoPanel();
+    expect(component.showInfoPanel).toBe(true);
+    expect(mockInfoPanel.toggleOverlay).toHaveBeenCalledTimes(1);
+
+    component.toggleInfoPanel();
+    expect(component.showInfoPanel).toBe(false);
+    expect(mockInfoPanel.toggleOverlay).toHaveBeenCalledTimes(2);
+  });
+
+  it('should toggle eta-phi panel overlay', () => {
+    const mockEtaPhiPanel = {
+      toggleOverlay: jest.fn(),
+    } as any;
+    component.etaPhiPanel = mockEtaPhiPanel;
+
+    expect(component.showEtaPhiPanel).toBe(false);
+    component.toggleEtaPhiPanel();
+    expect(component.showEtaPhiPanel).toBe(true);
+    expect(mockEtaPhiPanel.toggleOverlay).toHaveBeenCalledTimes(1);
+
+    component.toggleEtaPhiPanel();
+    expect(component.showEtaPhiPanel).toBe(false);
+    expect(mockEtaPhiPanel.toggleOverlay).toHaveBeenCalledTimes(2);
+  });
+
+  it('should toggle kinematics panel overlay', () => {
+    const mockKinematicsPanel = {
+      toggleOverlay: jest.fn(),
+    } as any;
+    component.kinematicsPanel = mockKinematicsPanel;
+
+    expect(component.showKinematicsPanel).toBe(false);
+    component.toggleKinematicsPanel();
+    expect(component.showKinematicsPanel).toBe(true);
+    expect(mockKinematicsPanel.toggleOverlay).toHaveBeenCalledTimes(1);
+
+    component.toggleKinematicsPanel();
+    expect(component.showKinematicsPanel).toBe(false);
+    expect(mockKinematicsPanel.toggleOverlay).toHaveBeenCalledTimes(2);
+  });
+
+  it('should not throw if child view reference is undefined on toggle', () => {
+    component.infoPanel = undefined;
+    component.etaPhiPanel = undefined;
+    component.kinematicsPanel = undefined;
+
+    expect(() => component.toggleInfoPanel()).not.toThrow();
+    expect(() => component.toggleEtaPhiPanel()).not.toThrow();
+    expect(() => component.toggleKinematicsPanel()).not.toThrow();
+  });
+});
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/more-info/more-info.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/more-info/more-info.component.ts
index fd9c32468..4097c24f2 100644
--- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/more-info/more-info.component.ts
+++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/more-info/more-info.component.ts
@@ -1,10 +1,7 @@
 import { Component, Input, ViewChild } from '@angular/core';
 import { defaultUIMenuConfig, UIMenuConfig } from '../ui-menu.component';
 import { InfoPanelComponent } from '../info-panel/info-panel.component';
-import { EventBrowserComponent } from '../event-browser/event-browser.component';
-import { CollectionsInfoComponent } from '../collections-info/collections-info.component';
 import { EtaPhiPanelComponent } from '../eta-phi-panel/eta-phi-panel.component';
-import { GeometryBrowserComponent } from '../geometry-browser/geometry-browser.component';
 import { KinematicsPanelComponent } from '../kinematics-panel/kinematics-panel.component';
 import type { KinematicsConfig } from 'phoenix-event-display';
 
@@ -18,18 +15,12 @@ export class MoreInfoComponent {
   @Input() uiConfig: UIMenuConfig = defaultUIMenuConfig;
   @Input() kinematicsConfig?: KinematicsConfig;
 
-  @ViewChild('infoPanel') infoPanel: InfoPanelComponent;
-  @ViewChild('eventBrowser') eventBrowser: EventBrowserComponent;
-  @ViewChild('collectionsInfo') collectionsInfo: CollectionsInfoComponent;
-  @ViewChild('etaPhiPanel') etaPhiPanel: EtaPhiPanelComponent;
-  @ViewChild('geometryBrowser') geometryBrowser: GeometryBrowserComponent;
-  @ViewChild('kinematicsPanel') kinematicsPanel!: KinematicsPanelComponent;
+  @ViewChild('infoPanel') infoPanel?: InfoPanelComponent;
+  @ViewChild('etaPhiPanel') etaPhiPanel?: EtaPhiPanelComponent;
+  @ViewChild('kinematicsPanel') kinematicsPanel?: KinematicsPanelComponent;
 
   showInfoPanel = false;
-  showEventBrowser = false;
-  showCollectionsInfo = false;
   showEtaPhiPanel = false;
-  showGeometryBrowser = false;
   showKinematicsPanel = false;
 
   toggleInfoPanel() {
@@ -37,26 +28,11 @@ export class MoreInfoComponent {
     this.infoPanel?.toggleOverlay();
   }
 
-  toggleEventBrowser() {
-    this.showEventBrowser = !this.showEventBrowser;
-    this.eventBrowser?.toggleOverlay();
-  }
-
-  toggleCollectionsInfo() {
-    this.showCollectionsInfo = !this.showCollectionsInfo;
-    this.collectionsInfo?.toggleOverlay();
-  }
-
   toggleEtaPhiPanel() {
     this.showEtaPhiPanel = !this.showEtaPhiPanel;
     this.etaPhiPanel?.toggleOverlay();
   }
 
-  toggleGeometryBrowser() {
-    this.showGeometryBrowser = !this.showGeometryBrowser;
-    this.geometryBrowser?.toggleOverlay();
-  }
-
   toggleKinematicsPanel() {
     this.showKinematicsPanel = !this.showKinematicsPanel;
     this.kinematicsPanel?.toggleOverlay();
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/ui-menu.component.html b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/ui-menu.component.html
index 0ef6db706..49c23f0bb 100644
--- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/ui-menu.component.html
+++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/ui-menu.component.html
@@ -37,6 +37,17 @@
     [animationPresets]="animationPresets"
   ></app-animate-camera>
 
+  <!-- Browsers (Event Browser, Collections Info, Geometry Browser) -->
+  <app-browsers
+    *ngIf="
+      uiConfig?.showBrowsers !== false &&
+      (uiConfig?.showEventBrowser ||
+        uiConfig?.showCollectionsInfo ||
+        uiConfig?.showGeometryBrowser)
+    "
+    [uiConfig]="uiConfig"
+  ></app-browsers>
+
   <!-- More information panels -->
   <app-more-info
     [uiConfig]="uiConfig"
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/ui-menu.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/ui-menu.component.ts
index 3fdd44f35..5581e93d4 100644
--- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/ui-menu.component.ts
+++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/ui-menu.component.ts
@@ -29,6 +29,7 @@ export interface UIMenuConfig {
   showKinematicsPanel?: boolean;
   showMasterclassPanel?: boolean;
   showHistogramPanel?: boolean;
+  showBrowsers?: boolean;
 }
 
 export const defaultUIMenuConfig: UIMenuConfig = {
@@ -50,6 +51,7 @@ export const defaultUIMenuConfig: UIMenuConfig = {
   showKinematicsPanel: true,
   showMasterclassPanel: false,
   showHistogramPanel: false,
+  showBrowsers: true,
 };
 
 @Component({