[ML] Outlier detection results: ensure feature influence color persis…

…ts on column position change (#160470)

## Summary

Fixes #147768
This PR ensures the color for the cells persist on column position
update.

### Checklist

Delete any items that are not applicable to this PR.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

---------

Co-authored-by: Kibana Machine <[email protected]>

x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/outlier_exploration/use_outlier_data.ts

@@ -152,7 +152,7 @@ export const useOutlierData = (
     jobConfig?.dest.results_field ?? DEFAULT_RESULTS_FIELD,
     (columnId, cellValue, fullItem, setCellProps) => {
       const resultsField = jobConfig?.dest.results_field ?? '';
-      let backgroundColor;
+      let backgroundColor: string | undefined;
 
       const featureNames = fullItem[`${resultsField}.${FEATURE_INFLUENCE}`];
 
@@ -166,11 +166,16 @@ export const useOutlierData = (
         }
       }
 
-      if (backgroundColor !== undefined) {
-        setCellProps({
-          style: { backgroundColor: String(backgroundColor) },
-        });
-      }
+      // From EUI docs: Treated as React component allowing hooks, context, and other React concepts to be used.
+      // This is the recommended use of setCellProps: https://github.com/elastic/eui/blob/main/src/components/datagrid/data_grid_types.ts#L521-L525
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useEffect(() => {
+        if (backgroundColor) {
+          setCellProps({
+            style: { backgroundColor: String(backgroundColor) },
+          });
+        }
+      }, [backgroundColor, setCellProps]);
     }
   );