Moves some UI elements under a More Information icon

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

@@ -69,6 +69,7 @@ import {
   EventBrowserOverlayComponent,
   EtaPhiPanelComponent,
   EtaPhiPanelOverlayComponent,
+  MoreInfoComponent,
 } from './ui-menu';
 
 import { AttributePipe } from '../services/extras/attribute.pipe';
@@ -86,6 +87,7 @@ const PHOENIX_COMPONENTS: Type<any>[] = [
   NavComponent,
   UiMenuWrapperComponent,
   UiMenuComponent,
+  MoreInfoComponent,
   CollectionsInfoComponent,
   GeometryBrowserComponent,
   GeometryBrowserOverlayComponent,

packages/phoenix-ng/projects/phoenix-ui-components/lib/components/ui-menu/geometry-browser/geometry-browser-overlay/geometry-browser-overlay.component.html

@@ -1,6 +1,6 @@
 <!-- Show objects -->
 <app-overlay
-  overlayTitle="Browse Display"
+  overlayTitle="Browse Geometry"
   icon="info"
   [resizable]="true"
   [active]="browseDetectorParts"

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

@@ -1,6 +1,6 @@
 <app-menu-toggle
   tooltip="Browse geometry"
-  icon="info"
+  icon="top-cube"
   [active]="browseDetectorParts"
   (click)="toggleOverlay()"
 >

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

@@ -40,4 +40,5 @@ 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 './more-info/more-info.component';
 export * from './ui-menu-wrapper/ui-menu-wrapper.component';

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

@@ -1,7 +1,7 @@
 <app-overlay
-  overlayTitle="Info Panel"
+  overlayTitle="Messages Panel"
   icon="info-panel"
-  [resizable]="true"
+  [resizable]="false"
   [active]="showInfoPanel"
 >
   <ul class="list-group list-group-flush">

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

@@ -0,0 +1,101 @@
+<!-- Sub-components kept outside the mat-menu so their overlays persist when the menu closes -->
+<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>
+</div>
+
+<mat-menu #moreInfo>
+  <button mat-menu-item *ngIf="uiConfig?.showInfoPanel">
+    <mat-checkbox
+      [checked]="showInfoPanel"
+      (click)="$event.stopPropagation()"
+      (change)="toggleInfoPanel()"
+    >
+      <span class="item-content">
+        <svg class="item-icon">
+          <use href="assets/icons/info-panel.svg#info-panel"></use>
+        </svg>
+        Info Panel
+      </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"
+      (click)="$event.stopPropagation()"
+      (change)="toggleEtaPhiPanel()"
+    >
+      <span class="item-content">
+        <svg class="item-icon">
+          <use href="assets/icons/eta-phi.svg#eta-phi"></use>
+        </svg>
+        Eta-Phi Panel
+      </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]="moreInfo"
+  tooltip="More information"
+  icon="info"
+  [active]="false"
+>
+</app-menu-toggle>

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

@@ -0,0 +1,15 @@
+.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;
+}

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

@@ -0,0 +1,54 @@
+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';
+
+@Component({
+  standalone: false,
+  selector: 'app-more-info',
+  templateUrl: './more-info.component.html',
+  styleUrls: ['./more-info.component.scss'],
+})
+export class MoreInfoComponent {
+  @Input() uiConfig: UIMenuConfig = defaultUIMenuConfig;
+
+  @ViewChild('infoPanel') infoPanel: InfoPanelComponent;
+  @ViewChild('eventBrowser') eventBrowser: EventBrowserComponent;
+  @ViewChild('collectionsInfo') collectionsInfo: CollectionsInfoComponent;
+  @ViewChild('etaPhiPanel') etaPhiPanel: EtaPhiPanelComponent;
+  @ViewChild('geometryBrowser') geometryBrowser: GeometryBrowserComponent;
+
+  showInfoPanel = false;
+  showEventBrowser = false;
+  showCollectionsInfo = false;
+  showEtaPhiPanel = false;
+  showGeometryBrowser = false;
+
+  toggleInfoPanel() {
+    this.showInfoPanel = !this.showInfoPanel;
+    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();
+  }
+}

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

@@ -28,9 +28,6 @@
     *ngIf="uiConfig.showObjectSelection"
   ></app-object-selection>
 
-  <!-- Info panel -->
-  <app-info-panel *ngIf="uiConfig.showInfoPanel"></app-info-panel>
-
   <!-- Toggle for animating the event data -->
   <app-animate-event *ngIf="uiConfig.showAnimateEvent"></app-animate-event>
 
@@ -40,21 +37,8 @@
     [animationPresets]="animationPresets"
   ></app-animate-camera>
 
-  <!-- Toggle for event browser -->
-  <app-event-browser *ngIf="uiConfig.showEventBrowser"></app-event-browser>
-
-  <!-- Toggle for eta-phi energy map -->
-  <app-eta-phi-panel *ngIf="uiConfig.showEtaPhiPanel"></app-eta-phi-panel>
-
-  <!-- Toggle for collections info -->
-  <app-collections-info
-    *ngIf="uiConfig.showCollectionsInfo"
-  ></app-collections-info>
-
-  <!-- Toggle for geometry browser -->
-  <app-geometry-browser
-    *ngIf="uiConfig.showGeometryBrowser"
-  ></app-geometry-browser>
+  <!-- More information panels -->
+  <app-more-info [uiConfig]="uiConfig"></app-more-info>
 
   <!-- Toggle for performance -->
   <app-performance-toggle