[ML] AIOps: Improve table hovering for log rate analysis. (#162941)

Improves the table hovering behavior for log rate analysis: - When no row is hovered, it falls back to set the first row of the current page to a hovered state. The result is that users will always see a comparison view in the main document count chart. - When a row gets pinned, the hovering of the other rows will be disabled, so the comparison view in the main document count chart gets locked on the pinned row.
elastic · Aug 8, 2023 · b8bb4ee · b8bb4ee
1 parent 9b087e0
commit b8bb4ee
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 6 deletions.
diff --git a/...ops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table.tsx b/...ops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table.tsx
@@ -5,8 +5,8 @@
  * 2.0.
  */
 
-import React, { FC, useCallback, useMemo, useState } from 'react';
-import { orderBy } from 'lodash';
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { orderBy, isEqual } from 'lodash';
 import type * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
 
 import {
@@ -336,6 +336,46 @@ export const LogRateAnalysisResultsTable: FC<LogRateAnalysisResultsTableProps> =
     };
   }, [pageIndex, pageSize, sortField, sortDirection, significantTerms]);
 
+  useEffect(() => {
+    // If no row is hovered or pinned or the user switched to a new page,
+    // fall back to set the first row into a hovered state to make the
+    // main document count chart show a comparison view by default.
+    if (
+      (selectedSignificantTerm === null ||
+        !pageOfItems.some((item) => isEqual(item, selectedSignificantTerm))) &&
+      pinnedSignificantTerm === null &&
+      pageOfItems.length > 0
+    ) {
+      setSelectedSignificantTerm(pageOfItems[0]);
+    }
+
+    // If a user switched pages and a pinned row is no longer visible
+    // on the current page, set the status of pinned rows back to `null`.
+    if (
+      pinnedSignificantTerm !== null &&
+      !pageOfItems.some((item) => isEqual(item, pinnedSignificantTerm))
+    ) {
+      setPinnedSignificantTerm(null);
+    }
+  }, [
+    selectedSignificantTerm,
+    setSelectedSignificantTerm,
+    setPinnedSignificantTerm,
+    pageOfItems,
+    pinnedSignificantTerm,
+  ]);
+
+  // When the analysis results table unmounts,
+  // make sure to reset any hovered or pinned rows.
+  useEffect(
+    () => () => {
+      setSelectedSignificantTerm(null);
+      setPinnedSignificantTerm(null);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
   const getRowStyle = (significantTerm: SignificantTerm) => {
     if (
       pinnedSignificantTerm &&
@@ -393,7 +433,9 @@ export const LogRateAnalysisResultsTable: FC<LogRateAnalysisResultsTableProps> =
             }
           },
           onMouseEnter: () => {
-            setSelectedSignificantTerm(significantTerm);
+            if (pinnedSignificantTerm === null) {
+              setSelectedSignificantTerm(significantTerm);
+            }
           },
           onMouseLeave: () => {
             setSelectedSignificantTerm(null);

diff --git a/...lic/components/log_rate_analysis_results_table/log_rate_analysis_results_table_groups.tsx b/...lic/components/log_rate_analysis_results_table/log_rate_analysis_results_table_groups.tsx
@@ -5,8 +5,8 @@
  * 2.0.
  */
 
-import React, { FC, useCallback, useMemo, useState } from 'react';
-import { orderBy } from 'lodash';
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { orderBy, isEqual } from 'lodash';
 
 import {
   useEuiBackgroundColor,
@@ -423,6 +423,36 @@ export const LogRateAnalysisResultsGroupsTable: FC<LogRateAnalysisResultsTablePr
     };
   }, [pageIndex, pageSize, sortField, sortDirection, groupTableItems]);
 
+  useEffect(() => {
+    // If no row is hovered or pinned or the user switched to a new page,
+    // fall back to set the first row into a hovered state to make the
+    // main document count chart show a comparison view by default.
+    if (
+      (selectedGroup === null || !pageOfItems.some((item) => isEqual(item, selectedGroup))) &&
+      pinnedGroup === null &&
+      pageOfItems.length > 0
+    ) {
+      setSelectedGroup(pageOfItems[0]);
+    }
+
+    // If a user switched pages and a pinned row is no longer visible
+    // on the current page, set the status of pinned rows back to `null`.
+    if (pinnedGroup !== null && !pageOfItems.some((item) => isEqual(item, pinnedGroup))) {
+      setPinnedGroup(null);
+    }
+  }, [selectedGroup, setSelectedGroup, setPinnedGroup, pageOfItems, pinnedGroup]);
+
+  // When the analysis results table unmounts,
+  // make sure to reset any hovered or pinned rows.
+  useEffect(
+    () => () => {
+      setSelectedGroup(null);
+      setPinnedGroup(null);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
   const getRowStyle = (group: GroupTableItem) => {
     if (pinnedGroup && pinnedGroup.id === group.id) {
       return {
@@ -464,7 +494,9 @@ export const LogRateAnalysisResultsGroupsTable: FC<LogRateAnalysisResultsTablePr
             }
           },
           onMouseEnter: () => {
-            setSelectedGroup(group);
+            if (pinnedGroup === null) {
+              setSelectedGroup(group);
+            }
           },
           onMouseLeave: () => {
             setSelectedGroup(null);