fix: clear selections before track extension to prevent stale outlines

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

@@ -1117,6 +1117,35 @@ export class ThreeManager {
     return this.sceneManager.addEventDataTypeGroup(typeName);
   }
 
+  /**
+   * Extend or reset track collection geometries to a specified radius.
+   * This method clears all selections before modifying track geometries to prevent
+   * stale outline helpers that reference old geometry data.
+   *
+   * @param collectionName Name of the track collection to extend.
+   * @param radius The radius to extend tracks to.
+   * @param enable Whether to enable extension (true) or reset to original (false).
+   */
+  public extendCollectionTracks(
+    collectionName: string,
+    radius: number,
+    enable: boolean,
+  ) {
+    // Clear all selections before modifying geometries to prevent:
+    // 1. Stale EdgesGeometry in outline helpers (outlines showing old track length)
+    // 2. Visual desynchronization between track and its selection outline
+    // 3. Orphaned outline helpers referencing disposed geometry data
+    if (this.selectionManager) {
+      this.selectionManager.clearAllSelections();
+    }
+    if (this.effectsManager) {
+      this.effectsManager.setHoverOutline(null);
+    }
+
+    // Now safe to modify track geometries
+    this.sceneManager.extendCollectionTracks(collectionName, radius, enable);
+  }
+
   /**
    * Sets the renderer to be used to render the event display on the overlayed canvas.
    * @param overlayCanvas An HTML canvas on which the overlay renderer is to be set.

packages/phoenix-event-display/src/managers/ui-manager/dat-gui-ui.ts

@@ -311,15 +311,15 @@ export class DatGUIMenuUI implements PhoenixUI<GUI> {
       .name('Extend to radius')
       .onChange((value: boolean) => {
         const radius = this.guiParameters[collectionName].extendRadius;
-        this.sceneManager.extendCollectionTracks(collectionName, radius, value);
+        this.three.extendCollectionTracks(collectionName, radius, value);
       });
     collFolder
       .add(this.guiParameters[collectionName], 'extendRadius', 100, 5000)
       .name('Radius')
       .onFinishChange((value: number) => {
         const enabled = this.guiParameters[collectionName].extendTracks;
         if (enabled) {
-          this.sceneManager.extendCollectionTracks(collectionName, value, true);
+          this.three.extendCollectionTracks(collectionName, value, true);
         }
       });
     collFolder

packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-ui.ts

@@ -376,7 +376,7 @@ export class PhoenixMenuUI implements PhoenixUI<PhoenixMenuNode> {
       onChange: (value: boolean) => {
         this.collectionExtendState[collectionName].enabled = value;
         const radius = this.collectionExtendState[collectionName].radius;
-        this.sceneManager.extendCollectionTracks(collectionName, radius, value);
+        this.three.extendCollectionTracks(collectionName, radius, value);
       },
     });
 
@@ -390,7 +390,7 @@ export class PhoenixMenuUI implements PhoenixUI<PhoenixMenuNode> {
       onChange: (value: number) => {
         this.collectionExtendState[collectionName].radius = value;
         if (this.collectionExtendState[collectionName].enabled) {
-          this.sceneManager.extendCollectionTracks(collectionName, value, true);
+          this.three.extendCollectionTracks(collectionName, value, true);
         }
       },
     });