feat: Add and event to indicate mouse has left tracks area (#2377)

To improve interactivity, we need an indication that mouse is no longer
on top of well tracks.
In this PR a new event is added which is called when the mouse exists
the overlay area of the WellLogView.

typescript/packages/well-log-viewer/src/SyncLogViewer.tsx

@@ -195,6 +195,7 @@ export interface SyncLogViewerProps {
     onTemplateChanged?: (iWellLog: number) => void;
 
     onTrackMouseEvent?: (wellLogView: WellLogView, ev: TrackMouseEvent) => void;
+    onTrackMouseLeaveEvent?: () => void;
 
     onCreateController?: (
         iWellLog: number,
@@ -1012,6 +1013,7 @@ class SyncLogViewer extends Component<SyncLogViewerProps, State> {
                     // eslint-disable-next-line react/prop-types
                     this.props.onTrackMouseEvent || onTrackMouseEventDefault
                 }
+                onTrackMouseLeaveEvent={this.props.onTrackMouseLeaveEvent}
                 onTrackScroll={callbacks.onTrackScrollBind}
                 onTrackSelection={callbacks.onTrackSelectionBind}
                 onContentRescale={callbacks.onContentRescaleBind}

typescript/packages/well-log-viewer/src/WellLogViewer.tsx

@@ -45,6 +45,7 @@ export interface WellLogViewerProps extends WellLogViewWithScrollerProps {
 
     onInfoFilled?: (computedInfo: Info[]) => void;
     onTrackMouseEvent?: (wellLogView: WellLogView, ev: TrackMouseEvent) => void;
+    onTrackMouseLeaveEvent?: () => void;
 
     onCreateController?: (controller: WellLogController) => void;
 }
@@ -305,6 +306,9 @@ export default class WellLogViewer extends Component<
                             this.props.onTrackMouseEvent ||
                             onTrackMouseEventDefault
                         }
+                        onTrackMouseLeaveEvent={
+                            this.props.onTrackMouseLeaveEvent
+                        }
                         onContentRescale={this.onContentRescale}
                         onContentSelection={this.onContentSelection}
                         onTemplateChanged={this.onTemplateChanged}

typescript/packages/well-log-viewer/src/components/WellLogView.tsx

@@ -230,6 +230,7 @@ function addReadoutOverlay(instance: LogViewer, parent: WellLogView) {
         onMouseExit: (event: OverlayMouseExitEvent): void => {
             const elem = event.target;
             if (elem) elem.style.visibility = "hidden";
+            parent.onTrackMouseLeaveEvent();
         },
         onRescale: (event: OverlayRescaleEvent): void => {
             const elem = event.target;
@@ -1144,6 +1145,12 @@ export interface WellLogViewProps {
      * called when mouse click on a track
      */
     onTrackMouseEvent?: (wellLogView: WellLogView, ev: TrackMouseEvent) => void;
+
+    /**
+     * called when mouse cursor leaves track area;
+     */
+    onTrackMouseLeaveEvent?: () => void;
+
     /**
      * called when template is changed
      */
@@ -1629,6 +1636,10 @@ class WellLogView
         this.props.onTrackMouseEvent?.(this, ev);
     }
 
+    onTrackMouseLeaveEvent(): void {
+        this.props.onTrackMouseLeaveEvent?.();
+    }
+
     onTemplateChanged(): void {
         this.updateInfo();