[8.19] [Security solution][Explore] Integrate new dataView in explore's map (elastic#233674) (elastic#235108)

# Backport

This will backport the following commits from `main` to `8.19`:
- [[Security solution][Explore] Integrate new dataView in explore's map
(elastic#233674)](elastic#233674)

<!--- Backport version: 10.0.2 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Nicholas
Peretti","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-09-15T11:30:41Z","message":"[Security
solution][Explore] Integrate new dataView in explore's map
(elastic#233674)\n\n## Summary\n\nCloses elastic#232379.\n\n### 🛑 Problem\n\nAs
described in elastic#232379, when the `newDataViewPickerEnabled` is
enabled,\nthe maps doesn't show data anymore.\n\n### 💡 Solution\n\nIn
this contribution we integrate the new `useDataView` hook inside
the\n`embeddable_map` component.\n\nWe use the feature flag
from\n`useIsExperimentalFeatureEnabled('newDataViewPickerEnabled')` to
decide\nwhich data to use to create the layers list for the map.\n\nThe
feature flag is also used to cancel effects in case it's enabled
as\nthey wouldn't be needed anymore.\n\n---------\n\nCo-authored-by:
Philippe Oberti
<[email protected]>","sha":"188c7ea5e7120a3d346bb622a2a40e92c686b482","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Threat
Hunting","Team:
SecuritySolution","backport:version","v9.1.0","v8.19.0","v9.2.0","v9.1.4"],"title":"[Security
solution][Explore] Integrate new dataView in explore's
map","number":233674,"url":"https://github.com/elastic/kibana/pull/233674","mergeCommit":{"message":"[Security
solution][Explore] Integrate new dataView in explore's map
(elastic#233674)\n\n## Summary\n\nCloses elastic#232379.\n\n### 🛑 Problem\n\nAs
described in elastic#232379, when the `newDataViewPickerEnabled` is
enabled,\nthe maps doesn't show data anymore.\n\n### 💡 Solution\n\nIn
this contribution we integrate the new `useDataView` hook inside
the\n`embeddable_map` component.\n\nWe use the feature flag
from\n`useIsExperimentalFeatureEnabled('newDataViewPickerEnabled')` to
decide\nwhich data to use to create the layers list for the map.\n\nThe
feature flag is also used to cancel effects in case it's enabled
as\nthey wouldn't be needed anymore.\n\n---------\n\nCo-authored-by:
Philippe Oberti
<[email protected]>","sha":"188c7ea5e7120a3d346bb622a2a40e92c686b482"}},"sourceBranch":"main","suggestedTargetBranches":["8.19"],"targetPullRequestStates":[{"branch":"9.1","label":"v9.1.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/235060","number":235060,"state":"MERGED","mergeCommit":{"sha":"7000b0a67cda718a192e4add98eab257d4d3f12c","message":"[9.1]
[Security solution][Explore] Integrate new dataView in explore's map
(elastic#233674) (elastic#235060)\n\n# Backport\n\nThis will backport the following
commits from `main` to `9.1`:\n- [[Security solution][Explore] Integrate
new dataView in explore's
map\n(elastic#233674)](https://github.com/elastic/kibana/pull/233674)\n\n\n\n###
Questions ?\nPlease refer to the [Backport
tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n\n\nCo-authored-by:
Nicholas Peretti <[email protected]>\nCo-authored-by: Philippe
Oberti
<[email protected]>"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/233674","number":233674,"mergeCommit":{"message":"[Security
solution][Explore] Integrate new dataView in explore's map
(elastic#233674)\n\n## Summary\n\nCloses elastic#232379.\n\n### 🛑 Problem\n\nAs
described in elastic#232379, when the `newDataViewPickerEnabled` is
enabled,\nthe maps doesn't show data anymore.\n\n### 💡 Solution\n\nIn
this contribution we integrate the new `useDataView` hook inside
the\n`embeddable_map` component.\n\nWe use the feature flag
from\n`useIsExperimentalFeatureEnabled('newDataViewPickerEnabled')` to
decide\nwhich data to use to create the layers list for the map.\n\nThe
feature flag is also used to cancel effects in case it's enabled
as\nthey wouldn't be needed anymore.\n\n---------\n\nCo-authored-by:
Philippe Oberti
<[email protected]>","sha":"188c7ea5e7120a3d346bb622a2a40e92c686b482"}}]}]
BACKPORT-->

Author: NicholasPeretti

x-pack/solutions/security/plugins/security_solution/public/explore/network/components/embeddables/embedded_map.tsx

@@ -31,6 +31,8 @@ import { sourcererSelectors } from '../../../../sourcerer/store';
 import type { State } from '../../../../common/store';
 import type { SourcererDataView } from '../../../../sourcerer/store/model';
 import { SourcererScopeName } from '../../../../sourcerer/store/model';
+import { useIsExperimentalFeatureEnabled } from '../../../../common/hooks/use_experimental_features';
+import { useDataView } from '../../../../data_view_manager/hooks/use_data_view';
 
 export const NETWORK_MAP_VISIBLE = 'network_map_visbile';
 
@@ -112,6 +114,8 @@ export const EmbeddedMapComponent = ({
 
   const { addError } = useAppToasts();
 
+  const newDataViewPickerEnabled = useIsExperimentalFeatureEnabled('newDataViewPickerEnabled');
+  const { dataView: experimentalDataView } = useDataView(SourcererScopeName.explore);
   const kibanaDataViews = useSelector(sourcererSelectors.kibanaDataViews);
   const selectedPatterns = useSelector((state: State) => {
     return sourcererSelectors.sourcererScopeSelectedPatterns(state, SourcererScopeName.default);
@@ -122,7 +126,22 @@ export const EmbeddedMapComponent = ({
   const [layerList, setLayerList] = useState<LayerDescriptor[]>([]);
   const [availableDataViews, setAvailableDataViews] = useState<SourcererDataView[]>([]);
 
+  const experimentalDataViewLayerList = useMemo(
+    () =>
+      experimentalDataView.id && experimentalDataView.getIndexPattern()
+        ? getLayerList([
+            {
+              id: experimentalDataView.id,
+              title: experimentalDataView.getIndexPattern(),
+            },
+          ])
+        : [],
+    [experimentalDataView]
+  );
+
   useEffect(() => {
+    if (newDataViewPickerEnabled) return;
+
     let canceled = false;
 
     const fetchData = async () => {
@@ -149,17 +168,19 @@ export const EmbeddedMapComponent = ({
     return () => {
       canceled = true;
     };
-  }, [addError, availableDataViews, isFieldInIndexPattern]);
+  }, [addError, availableDataViews, isFieldInIndexPattern, newDataViewPickerEnabled]);
 
   useEffect(() => {
+    if (newDataViewPickerEnabled) return;
+
     const dataViews = kibanaDataViews.filter((dataView) =>
       selectedPatterns.includes(dataView.title)
     );
     if (selectedPatterns.length > 0 && dataViews.length === 0) {
       setIsIndexError(true);
     }
     setAvailableDataViews((prevViews) => (isEqual(prevViews, dataViews) ? prevViews : dataViews));
-  }, [kibanaDataViews, selectedPatterns]);
+  }, [kibanaDataViews, selectedPatterns, newDataViewPickerEnabled]);
 
   // This portalNode provided by react-reverse-portal allows us re-parent the MapToolTip within our
   // own component tree instead of the embeddables (default). This is necessary to have access to
@@ -195,7 +216,7 @@ export const EmbeddedMapComponent = ({
               getTooltipRenderer={() => (tooltipProps: RenderTooltipContentParams) =>
                 <OutPortal node={portalNode} {...tooltipProps} />}
               mapCenter={{ lon: -1.05469, lat: 15.96133, zoom: 1 }}
-              layerList={layerList}
+              layerList={newDataViewPickerEnabled ? experimentalDataViewLayerList : layerList}
               filters={appliedFilters}
               query={query}
               onApiAvailable={(api: MapApi) => {