[v11.2.x] Logs Panel: Only send DataHoverClearEvent on container mouse leave event (#92534)

Logs Panel: Only send DataHoverClearEvent on container mouse leave event (#92526)

* fix: stop sending clear events between every row, and only when the mouse leaves the container

(cherry picked from commit 867f3f793c)

Co-authored-by: Galen Kistler <109082771+gtk-grafana@users.noreply.github.com>

public/app/features/logs/components/LogRow.tsx

@@ -149,9 +149,6 @@ class UnThemedLogRow extends PureComponent<Props, State> {
 
   onMouseLeave = () => {
     this.setState({ mouseIsOver: false });
-    if (this.props.onLogRowHover) {
-      this.props.onLogRowHover(undefined);
-    }
   };
 
   componentDidMount() {

public/app/plugins/panel/logs/LogsPanel.tsx

@@ -101,9 +101,7 @@ export const LogsPanel = ({
   const { eventBus, onAddAdHocFilter } = usePanelContext();
   const onLogRowHover = useCallback(
     (row?: LogRowModel) => {
-      if (!row) {
-        eventBus.publish(new DataHoverClearEvent());
-      } else {
+      if (row) {
         eventBus.publish(
           new DataHoverEvent({
             point: {
@@ -116,6 +114,10 @@ export const LogsPanel = ({
     [eventBus]
   );
 
+  const onLogContainerMouseLeave = useCallback(() => {
+    eventBus.publish(new DataHoverClearEvent());
+  }, [eventBus]);
+
   const onCloseContext = useCallback(() => {
     setContextRow(null);
     if (closeCallback.current) {
@@ -308,7 +310,7 @@ export const LogsPanel = ({
         scrollTop={scrollTop}
         scrollRefCallback={(scrollElement) => setScrollElement(scrollElement)}
       >
-        <div className={style.container} ref={logsContainerRef}>
+        <div onMouseLeave={onLogContainerMouseLeave} className={style.container} ref={logsContainerRef}>
           {showCommonLabels && !isAscending && renderCommonLabels()}
           <LogRows
             containerRendered={logsContainerRef.current !== null}