tweak table hovering

elastic · Aug 2, 2023 · 8876f99 · 8876f99
1 parent f2d4120
commit 8876f99
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 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,7 +5,7 @@
  * 2.0.
  */
 
-import React, { FC, useCallback, useMemo, useState } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { orderBy } from 'lodash';
 import type * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
 
@@ -336,6 +336,16 @@ export const LogRateAnalysisResultsTable: FC<LogRateAnalysisResultsTableProps> =
     };
   }, [pageIndex, pageSize, sortField, sortDirection, significantTerms]);
 
+  useEffect(() => {
+    if (
+      selectedSignificantTerm === null &&
+      pinnedSignificantTerm === null &&
+      pageOfItems.length > 0
+    ) {
+      setSelectedSignificantTerm(pageOfItems[0]);
+    }
+  }, [selectedSignificantTerm, setSelectedSignificantTerm, pageOfItems, pinnedSignificantTerm]);
+
   const getRowStyle = (significantTerm: SignificantTerm) => {
     if (
       pinnedSignificantTerm &&
@@ -393,7 +403,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,7 +5,7 @@
  * 2.0.
  */
 
-import React, { FC, useCallback, useMemo, useState } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { orderBy } from 'lodash';
 
 import {
@@ -423,6 +423,12 @@ export const LogRateAnalysisResultsGroupsTable: FC<LogRateAnalysisResultsTablePr
     };
   }, [pageIndex, pageSize, sortField, sortDirection, groupTableItems]);
 
+  useEffect(() => {
+    if (selectedGroup === null && pinnedGroup === null && pageOfItems.length > 0) {
+      setSelectedGroup(pageOfItems[0]);
+    }
+  }, [selectedGroup, setSelectedGroup, pageOfItems, pinnedGroup]);
+
   const getRowStyle = (group: GroupTableItem) => {
     if (pinnedGroup && pinnedGroup.id === group.id) {
       return {
@@ -464,7 +470,9 @@ export const LogRateAnalysisResultsGroupsTable: FC<LogRateAnalysisResultsTablePr
             }
           },
           onMouseEnter: () => {
-            setSelectedGroup(group);
+            if (pinnedGroup === null) {
+              setSelectedGroup(group);
+            }
           },
           onMouseLeave: () => {
             setSelectedGroup(null);