Update to put the Track Kinematics under the More Info menu

Author: EdwardMoyse

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

@@ -1,7 +0,0 @@
-<app-menu-toggle
-  tooltip="Track kinematics"
-  icon="kinematics"
-  [active]="showKinematics"
-  (click)="toggleOverlay()"
->
-</app-menu-toggle>

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

@@ -17,6 +17,11 @@
     #geometryBrowser
     *ngIf="uiConfig?.showGeometryBrowser"
   ></app-geometry-browser>
+  <app-kinematics-panel
+    #kinematicsPanel
+    *ngIf="uiConfig?.showKinematicsPanel"
+    [config]="kinematicsConfig"
+  ></app-kinematics-panel>
 </div>
 
 <mat-menu #moreInfo>
@@ -90,6 +95,20 @@
       </span>
     </mat-checkbox>
   </button>
+  <button mat-menu-item *ngIf="uiConfig?.showKinematicsPanel">
+    <mat-checkbox
+      [checked]="showKinematicsPanel"
+      (click)="$event.stopPropagation()"
+      (change)="toggleKinematicsPanel()"
+    >
+      <span class="item-content">
+        <svg class="item-icon">
+          <use href="assets/icons/kinematics.svg#kinematics"></use>
+        </svg>
+        Track Kinematics
+      </span>
+    </mat-checkbox>
+  </button>
 </mat-menu>
 
 <app-menu-toggle

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

@@ -5,6 +5,8 @@ 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';
 
 @Component({
   standalone: false,
@@ -14,18 +16,21 @@ import { GeometryBrowserComponent } from '../geometry-browser/geometry-browser.c
 })
 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;
 
   showInfoPanel = false;
   showEventBrowser = false;
   showCollectionsInfo = false;
   showEtaPhiPanel = false;
   showGeometryBrowser = false;
+  showKinematicsPanel = false;
 
   toggleInfoPanel() {
     this.showInfoPanel = !this.showInfoPanel;
@@ -51,4 +56,9 @@ export class MoreInfoComponent {
     this.showGeometryBrowser = !this.showGeometryBrowser;
     this.geometryBrowser?.toggleOverlay();
   }
+
+  toggleKinematicsPanel() {
+    this.showKinematicsPanel = !this.showKinematicsPanel;
+    this.kinematicsPanel?.toggleOverlay();
+  }
 }

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

@@ -38,7 +38,10 @@
   ></app-animate-camera>
 
   <!-- More information panels -->
-  <app-more-info [uiConfig]="uiConfig"></app-more-info>
+  <app-more-info
+    [uiConfig]="uiConfig"
+    [kinematicsConfig]="kinematicsConfig"
+  ></app-more-info>
 
   <!-- Toggle for performance -->
   <app-performance-toggle
@@ -62,9 +65,6 @@
   <!-- Toggle for shareable link constructor modal-->
   <app-share-link *ngIf="uiConfig.showShareLink"></app-share-link>
 
-  <!-- Kinematics panel -->
-  <app-kinematics-panel [config]="kinematicsConfig"></app-kinematics-panel>
-
   <!-- Extra options -->
   <ng-content></ng-content>
 </app-ui-menu-wrapper>

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

@@ -22,6 +22,7 @@ export interface UIMenuConfig {
   showInfoPanel?: boolean;
   showEventBrowser?: boolean;
   showEtaPhiPanel?: boolean;
+  showKinematicsPanel?: boolean;
 }
 
 export const defaultUIMenuConfig: UIMenuConfig = {
@@ -40,6 +41,7 @@ export const defaultUIMenuConfig: UIMenuConfig = {
   showInfoPanel: true,
   showEventBrowser: true,
   showEtaPhiPanel: true,
+  showKinematicsPanel: true,
 };
 
 @Component({