Merge pull request #702 from lukecotter/fix-optimised-timeline-search-trigger

fix: optimsed timeline has search triggered  on tab switch

Author: lcottercertinia

CHANGELOG.md

@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- ⚡ **Timeline**: A brand new **experimental** timeline Flame Chart that is up to **7X faster**. ([#446] [#251])
+- ⚡ **Timeline**: A brand new **experimental** timeline Flame Chart that is up to **7X faster**. ([#446] [#251] [#92])
   - Enable it via **Settings -> Apex Log Analyzer -> Timeline -> Experimental -> Timeline**.
   - Generally Improved performance, especially for large logs.
   - Zoom and pan are now **7X faster**.
@@ -414,6 +414,7 @@ Skipped due to adopting odd numbering for pre releases and even number for relea
 
 <!-- Unreleased -->
 
+[#92]: https://github.com/certinia/debug-log-analyzer/issues/92
 [#694]: https://github.com/certinia/debug-log-analyzer/issues/694
 [#446]: https://github.com/certinia/debug-log-analyzer/issues/446
 [#251]: https://github.com/certinia/debug-log-analyzer/issues/251

log-viewer/src/features/timeline/optimised/ApexLogTimeline.ts

@@ -228,12 +228,16 @@ export class ApexLogTimeline {
    */
   private handleFind = (event: Event): void => {
     // Only process if this timeline instance is active
-    if (!this.container || !this.container.isConnected) {
+    if (!this.container || !this.container.isConnected || !this.container.clientHeight) {
       return;
     }
 
     const customEvent = event as CustomEvent<FindEventDetail>;
     const { text, options } = customEvent.detail;
+    if (!text) {
+      this.handleFindClose();
+      return;
+    }
 
     // Convert search text to predicate function (thin facade)
     const caseSensitive = options.matchCase;
@@ -293,6 +297,8 @@ export class ApexLogTimeline {
 
     // Clear search state (FlameChart handles render)
     this.flamechart.clearSearch();
+
+    document.dispatchEvent(new CustomEvent('lv-find-results', { detail: { totalMatches: 0 } }));
   };
 
   /**

log-viewer/src/features/timeline/optimised/FlameChart.ts

@@ -593,6 +593,11 @@ export class FlameChart<E extends EventNode = EventNode> {
         onClick: (x: number, y: number) => {
           this.handleClick(x, y);
         },
+        onMouseLeave: () => {
+          if (this.callbacks.onMouseMove) {
+            this.callbacks.onMouseMove(0, 0, null, null);
+          }
+        },
       },
     );
   }

log-viewer/src/features/timeline/optimised/TimelineInteractionHandler.ts

@@ -43,6 +43,9 @@ export interface InteractionCallbacks {
 
   /** Called when hover state over event changes. Returns true if over an event. */
   onHoverChange?: (isOverEvent: boolean) => void;
+
+  /** Called when mouse leaves the canvas. */
+  onMouseLeave?: () => void;
 }
 
 export class TimelineInteractionHandler {
@@ -124,8 +127,8 @@ export class TimelineInteractionHandler {
       const mouseUpHandler = this.handleMouseUp.bind(this);
 
       this.canvas.addEventListener('mousedown', mouseDownHandler);
-      document.addEventListener('mousemove', mouseMoveHandler);
-      document.addEventListener('mouseup', mouseUpHandler);
+      this.canvas.addEventListener('mousemove', mouseMoveHandler);
+      this.canvas.addEventListener('mouseup', mouseUpHandler);
       this.registerBoundHandler('mousedown', mouseDownHandler);
       this.registerBoundHandler('mousemove', mouseMoveHandler);
       this.registerBoundHandler('mouseup', mouseUpHandler);
@@ -148,6 +151,11 @@ export class TimelineInteractionHandler {
     const clickHandler = this.handleClick.bind(this);
     this.canvas.addEventListener('click', clickHandler);
     this.registerBoundHandler('click', clickHandler);
+
+    // Mouse leave for hiding tooltips
+    const mouseLeaveHandler = this.handleMouseLeave.bind(this);
+    this.canvas.addEventListener('mouseleave', mouseLeaveHandler);
+    this.registerBoundHandler('mouseleave', mouseLeaveHandler);
   }
 
   /**
@@ -170,10 +178,10 @@ export class TimelineInteractionHandler {
         this.canvas.removeEventListener('mousedown', mouseDownHandler);
       }
       if (mouseMoveHandler) {
-        document.removeEventListener('mousemove', mouseMoveHandler);
+        this.canvas.removeEventListener('mousemove', mouseMoveHandler);
       }
       if (mouseUpHandler) {
-        document.removeEventListener('mouseup', mouseUpHandler);
+        this.canvas.removeEventListener('mouseup', mouseUpHandler);
       }
 
       // Remove touch event listeners
@@ -197,6 +205,11 @@ export class TimelineInteractionHandler {
       this.canvas.removeEventListener('click', clickHandler);
     }
 
+    const mouseLeaveHandler = this.boundHandlers.get('mouseleave');
+    if (mouseLeaveHandler) {
+      this.canvas.removeEventListener('mouseleave', mouseLeaveHandler);
+    }
+
     this.boundHandlers.clear();
   }
 
@@ -366,6 +379,15 @@ export class TimelineInteractionHandler {
     }
   }
 
+  /**
+   * Handle mouse leave - notify when cursor exits canvas.
+   */
+  private handleMouseLeave(_event: MouseEvent): void {
+    if (this.callbacks.onMouseLeave) {
+      this.callbacks.onMouseLeave();
+    }
+  }
+
   // ============================================================================
   // TOUCH EVENT HANDLERS
   // ============================================================================