From 8763835db21cbfeace322f96edcd4ce8a287c064 Mon Sep 17 00:00:00 2001
From: bartoval <vabarjs@gmail.com>
Date: Fri, 14 Jun 2024 20:34:42 +0200
Subject: [PATCH] fix(Topology): :lady_beetle: Wrong group selection with show
 only neighbours

---
 mocks/data/PROCESSES.json                     |  2 +-
 .../__tests__/TopologyComponents.spec.tsx     |  6 +--
 .../__tests__/TopologyProcesses.spec.tsx      |  4 +-
 .../Topology/__tests__/TopologySite.spec.tsx  |  8 ++--
 .../__tests__/useTopologyProcessData.spec.ts  |  6 +--
 .../__tests__/useTopologySiteData.spec.ts     |  8 ++--
 .../__tests__/useTopologySiteState.spec.tsx   | 18 ++++----
 .../Topology/components/DisplayResources.tsx  | 41 +++++++++---------
 .../Topology/components/TopologyComponent.tsx | 16 +++----
 .../Topology/components/TopologyProcesses.tsx | 25 ++++++-----
 .../Topology/components/TopologySite.tsx      | 16 +++----
 .../components/useTopologyProcessData.ts      | 43 ++++++++++++++-----
 .../components/useTopologySiteData.ts         | 14 +++---
 .../Topology/components/useTopologyState.ts   | 10 ++---
 .../services/topologyComponentController.ts   |  6 +--
 .../services/topologyProcessController.ts     | 26 ++++++++---
 .../services/topologySiteController.ts        |  8 ++--
 src/pages/Topology/views/Topology.tsx         |  6 +--
 18 files changed, 152 insertions(+), 111 deletions(-)

diff --git a/mocks/data/PROCESSES.json b/mocks/data/PROCESSES.json
index 5ee39005..b1e9ae09 100644
--- a/mocks/data/PROCESSES.json
+++ b/mocks/data/PROCESSES.json
@@ -61,7 +61,7 @@
       "parentName": "site 1",
       "imageName": "process op:v0.3.0",
       "groupName": "op",
-      "groupIdentity": "group-1",
+      "groupIdentity": "group-op",
       "hostName": "10.242.0.8",
       "sourceHost": "172.17.63.130",
       "processBinding": "bound",
diff --git a/src/pages/Topology/__tests__/TopologyComponents.spec.tsx b/src/pages/Topology/__tests__/TopologyComponents.spec.tsx
index 96ba6578..7ed2d13c 100644
--- a/src/pages/Topology/__tests__/TopologyComponents.spec.tsx
+++ b/src/pages/Topology/__tests__/TopologyComponents.spec.tsx
@@ -53,7 +53,7 @@ describe('Topology Components', () => {
       <Wrapper>
         <Suspense fallback={<LoadingPage />}>
           <TopologyComponent
-            id={TopologyController.transformStringIdsToIds(componentResult[2].name)}
+            ids={TopologyController.transformStringIdsToIds(componentResult[2].name)}
             GraphComponent={MockGraphComponent}
           />
         </Suspense>
@@ -86,7 +86,7 @@ describe('Topology Components', () => {
     const handleSelected = jest.fn();
 
     jest.spyOn(useTopologySiteState, 'default').mockImplementation(() => ({
-      idSelected: TopologyController.transformStringIdsToIds(componentResult[2].identity),
+      idsSelected: TopologyController.transformStringIdsToIds(componentResult[2].identity),
       showOnlyNeighbours: false,
       moveToNodeSelected: false,
       displayOptionsSelected: [],
@@ -121,7 +121,7 @@ describe('Topology Components', () => {
     const handleShowOnlyNeighbours = jest.fn();
 
     jest.spyOn(useTopologySiteState, 'default').mockImplementation(() => ({
-      idSelected: TopologyController.transformStringIdsToIds(componentResult[2].identity),
+      idsSelected: TopologyController.transformStringIdsToIds(componentResult[2].identity),
       showOnlyNeighbours: false,
       moveToNodeSelected: false,
       displayOptionsSelected: [],
diff --git a/src/pages/Topology/__tests__/TopologyProcesses.spec.tsx b/src/pages/Topology/__tests__/TopologyProcesses.spec.tsx
index cf39b1da..08ab4b84 100644
--- a/src/pages/Topology/__tests__/TopologyProcesses.spec.tsx
+++ b/src/pages/Topology/__tests__/TopologyProcesses.spec.tsx
@@ -37,7 +37,7 @@ const mockHandleMoveToNodeSelectedChecked = jest.fn();
 const MockGetDisplaySelectedFromLocalStorage = jest.fn();
 
 const mockUseTopologyStateResults = {
-  idSelected: TopologyController.transformStringIdsToIds(processesResults[0].identity),
+  idsSelected: TopologyController.transformStringIdsToIds(processesResults[0].identity),
   showOnlyNeighbours: false,
   moveToNodeSelected: false,
   displayOptionsSelected: [],
@@ -111,7 +111,7 @@ describe('Topology Process', () => {
       <Wrapper>
         <Suspense fallback={<LoadingPage />}>
           <TopologyProcesses
-            id={TopologyController.transformStringIdsToIds(processesResults[2].name)}
+            ids={TopologyController.transformStringIdsToIds(processesResults[2].name)}
             GraphComponent={MockGraphComponent}
             ModalComponent={MockTopologyModalComponent}
             serviceIds={serviceResults.map(({ identity }) => identity)}
diff --git a/src/pages/Topology/__tests__/TopologySite.spec.tsx b/src/pages/Topology/__tests__/TopologySite.spec.tsx
index 65d1fc38..ad427962 100644
--- a/src/pages/Topology/__tests__/TopologySite.spec.tsx
+++ b/src/pages/Topology/__tests__/TopologySite.spec.tsx
@@ -52,7 +52,7 @@ describe('TopologySite', () => {
       <Wrapper>
         <Suspense fallback={<LoadingPage />}>
           <TopologySite
-            id={TopologyController.transformStringIdsToIds(sitesResults[2].identity)}
+            ids={TopologyController.transformStringIdsToIds(sitesResults[2].identity)}
             GraphComponent={MockGraphComponent}
           />
         </Suspense>
@@ -103,7 +103,7 @@ describe('TopologySite', () => {
     const handleSelected = jest.fn();
 
     jest.spyOn(useTopologySiteState, 'default').mockImplementation(() => ({
-      idSelected: TopologyController.transformStringIdsToIds(sitesResults[2].identity),
+      idsSelected: TopologyController.transformStringIdsToIds(sitesResults[2].identity),
       showOnlyNeighbours: false,
       moveToNodeSelected: false,
       displayOptionsSelected: [],
@@ -128,7 +128,7 @@ describe('TopologySite', () => {
     const handleShowOnlyNeighbours = jest.fn();
 
     jest.spyOn(useTopologySiteState, 'default').mockImplementation(() => ({
-      idSelected: TopologyController.transformStringIdsToIds(sitesResults[2].identity),
+      idsSelected: TopologyController.transformStringIdsToIds(sitesResults[2].identity),
       showOnlyNeighbours: false,
       moveToNodeSelected: false,
       displayOptionsSelected: [],
@@ -155,7 +155,7 @@ describe('TopologySite', () => {
     const handleMoveToNodeSelectedChecked = jest.fn();
 
     jest.spyOn(useTopologySiteState, 'default').mockImplementation(() => ({
-      idSelected: TopologyController.transformStringIdsToIds(sitesResults[2].identity),
+      idsSelected: TopologyController.transformStringIdsToIds(sitesResults[2].identity),
       showOnlyNeighbours: false,
       moveToNodeSelected: false,
       displayOptionsSelected: [],
diff --git a/src/pages/Topology/__tests__/useTopologyProcessData.spec.ts b/src/pages/Topology/__tests__/useTopologyProcessData.spec.ts
index 86cd0627..39e2f11a 100644
--- a/src/pages/Topology/__tests__/useTopologyProcessData.spec.ts
+++ b/src/pages/Topology/__tests__/useTopologyProcessData.spec.ts
@@ -28,7 +28,7 @@ describe('useTopologySiteData', () => {
 
     const { result } = renderHook(() =>
       useTopologyProcessData({
-        idSelected: ['process1'],
+        idsSelected: ['process1'],
         showBytes: true,
         showByteRate: true,
         showLatency: true
@@ -55,7 +55,7 @@ describe('useTopologySiteData', () => {
 
     const { result } = renderHook(() =>
       useTopologyProcessData({
-        idSelected: [],
+        idsSelected: [],
         showBytes: true,
         showByteRate: true,
         showLatency: true
@@ -82,7 +82,7 @@ describe('useTopologySiteData', () => {
 
     const { result } = renderHook(() =>
       useTopologyProcessData({
-        idSelected: ['process3'],
+        idsSelected: ['process3'],
         showBytes: true,
         showByteRate: true,
         showLatency: true
diff --git a/src/pages/Topology/__tests__/useTopologySiteData.spec.ts b/src/pages/Topology/__tests__/useTopologySiteData.spec.ts
index b68cf07f..ee47a4c4 100644
--- a/src/pages/Topology/__tests__/useTopologySiteData.spec.ts
+++ b/src/pages/Topology/__tests__/useTopologySiteData.spec.ts
@@ -26,7 +26,7 @@ describe('useTopologySiteData', () => {
 
     const { result } = renderHook(() =>
       useTopologySiteData({
-        idSelected: ['site1'],
+        idsSelected: ['site1'],
         showDataLink: true,
         showBytes: true,
         showByteRate: true,
@@ -59,7 +59,7 @@ describe('useTopologySiteData', () => {
 
     const { result } = renderHook(() =>
       useTopologySiteData({
-        idSelected: ['site1'],
+        idsSelected: ['site1'],
         showDataLink: true,
         showBytes: true,
         showByteRate: true,
@@ -152,7 +152,7 @@ describe('useTopologySiteData', () => {
 
     const { result } = renderHook(() =>
       useTopologySiteData({
-        idSelected: [],
+        idsSelected: [],
         showDataLink: true,
         showBytes: true,
         showByteRate: true,
@@ -182,7 +182,7 @@ describe('useTopologySiteData', () => {
 
     const { result } = renderHook(() =>
       useTopologySiteData({
-        idSelected: ['site3'],
+        idsSelected: ['site3'],
         showDataLink: true,
         showBytes: true,
         showByteRate: true,
diff --git a/src/pages/Topology/__tests__/useTopologySiteState.spec.tsx b/src/pages/Topology/__tests__/useTopologySiteState.spec.tsx
index ea130a14..e4130d4f 100644
--- a/src/pages/Topology/__tests__/useTopologySiteState.spec.tsx
+++ b/src/pages/Topology/__tests__/useTopologySiteState.spec.tsx
@@ -10,21 +10,21 @@ describe('useTopologySiteState', () => {
   });
 
   it('should initialize with empty display options', () => {
-    const { result } = renderHook(() => useTopologyState({ id: undefined }));
+    const { result } = renderHook(() => useTopologyState({ ids: undefined }));
 
     expect(result.current.displayOptionsSelected).toEqual([]);
   });
 
   it('should initialize with default display options', () => {
     const { result } = renderHook(() =>
-      useTopologyState({ id: undefined, initDisplayOptionsEnabled: [SHOW_ROUTER_LINKS, SHOW_SITE_KEY] })
+      useTopologyState({ ids: undefined, initDisplayOptionsEnabled: [SHOW_ROUTER_LINKS, SHOW_SITE_KEY] })
     );
 
     expect(result.current.displayOptionsSelected).toEqual([SHOW_ROUTER_LINKS, SHOW_SITE_KEY]);
   });
 
   it('should handle display options selection', () => {
-    const { result } = renderHook(() => useTopologyState({ id: undefined, displayOptionsEnabledKey: 'test-key' }));
+    const { result } = renderHook(() => useTopologyState({ ids: undefined, displayOptionsEnabledKey: 'test-key' }));
     const newDisplayOptions = ['new_option'];
 
     act(() => {
@@ -37,23 +37,23 @@ describe('useTopologySiteState', () => {
 
   it('sshould initialize the component with the correct selected id', () => {
     const { result } = renderHook(() =>
-      useTopologyState({ id: TopologyController.transformStringIdsToIds('site_id') })
+      useTopologyState({ ids: TopologyController.transformStringIdsToIds('site_id') })
     );
-    expect(result.current.idSelected).toEqual(['site_id']);
+    expect(result.current.idsSelected).toEqual(['site_id']);
   });
 
   it('should update the selected ID when a site is selected', () => {
-    const { result } = renderHook(() => useTopologyState({ id: undefined }));
+    const { result } = renderHook(() => useTopologyState({ ids: undefined }));
 
     act(() => {
       result.current.handleSelected(TopologyController.transformStringIdsToIds('site_id'));
     });
 
-    expect(result.current.idSelected).toEqual(['site_id']);
+    expect(result.current.idsSelected).toEqual(['site_id']);
   });
 
   it('should handle show only neighbours', () => {
-    const { result } = renderHook(() => useTopologyState({ id: undefined }));
+    const { result } = renderHook(() => useTopologyState({ ids: undefined }));
 
     act(() => {
       result.current.handleShowOnlyNeighbours(true);
@@ -63,7 +63,7 @@ describe('useTopologySiteState', () => {
   });
 
   it('should handle move to node selection', () => {
-    const { result } = renderHook(() => useTopologyState({ id: undefined }));
+    const { result } = renderHook(() => useTopologyState({ ids: undefined }));
 
     act(() => {
       result.current.handleMoveToNodeSelectedChecked(true);
diff --git a/src/pages/Topology/components/DisplayResources.tsx b/src/pages/Topology/components/DisplayResources.tsx
index 0db1c756..85377794 100644
--- a/src/pages/Topology/components/DisplayResources.tsx
+++ b/src/pages/Topology/components/DisplayResources.tsx
@@ -1,4 +1,4 @@
-import { FC, FormEvent, Ref, useCallback, useRef, useState } from 'react';
+import { FC, FormEvent, Ref, useCallback, useEffect, useRef, useState } from 'react';
 
 import {
   Button,
@@ -35,39 +35,29 @@ const DisplayResources: FC<DisplayResourcesProps> = function ({
   onSelect,
   options
 }) {
-  const [inputValue, setInputValue] = useState<string>(findOptionSelected(options, id)?.name || '');
+  const [inputValue, setInputValue] = useState<string>('');
   const [isOpen, setIsOpen] = useState(false);
 
   const filterValueRef = useRef<string>('');
   const textInputRef = useRef<HTMLInputElement>();
 
   function handleToggleMenu() {
-    setIsOpen(!isOpen);
+    setIsOpen((prevIsOpen) => !prevIsOpen);
   }
 
-  function handleClear() {
+  const handleClear = useCallback(() => {
     setInputValue('');
     filterValueRef.current = '';
     textInputRef.current?.focus();
-
-    if (onSelect) {
-      onSelect(undefined);
-    }
-  }
+    onSelect?.(undefined);
+  }, [onSelect]);
 
   const handleSelect = useCallback(
     (idSelected: string) => {
-      const nameSelected = findOptionSelected(options, idSelected)?.name || '';
-
       setIsOpen(false);
-      setInputValue(nameSelected);
-      filterValueRef.current = '';
-
-      if (onSelect) {
-        onSelect(idSelected);
-      }
+      onSelect?.(idSelected);
     },
-    [onSelect, options]
+    [onSelect]
   );
 
   const handleTextInputChange = (_: FormEvent<HTMLInputElement>, selection: string) => {
@@ -80,6 +70,17 @@ const DisplayResources: FC<DisplayResourcesProps> = function ({
       !filterValueRef.current || name.toString().toLowerCase().includes(filterValueRef.current.toLowerCase())
   );
 
+  useEffect(() => {
+    if (id) {
+      setInputValue(findOptionNameSelected(options, id));
+      filterValueRef.current = '';
+    }
+  }, [id, options]);
+
+  useEffect(() => {
+    setIsOpen(!!inputValue && !!filterValueRef.current);
+  }, [inputValue]);
+
   return (
     <Select
       role="resource-select"
@@ -130,6 +131,6 @@ const DisplayResources: FC<DisplayResourcesProps> = function ({
 
 export default DisplayResources;
 
-function findOptionSelected(options: ResourcesOptionsProps[], idSelected?: string) {
-  return options.find(({ identity }) => identity === idSelected);
+function findOptionNameSelected(options: ResourcesOptionsProps[], idSelected?: string) {
+  return options.find(({ identity }) => identity === idSelected)?.name || '';
 }
diff --git a/src/pages/Topology/components/TopologyComponent.tsx b/src/pages/Topology/components/TopologyComponent.tsx
index 83c276dc..16de45c6 100644
--- a/src/pages/Topology/components/TopologyComponent.tsx
+++ b/src/pages/Topology/components/TopologyComponent.tsx
@@ -16,8 +16,8 @@ import { TopologyController } from '../services';
 import { TopologyComponentController } from '../services/topologyComponentController';
 import { TopologyLabels } from '../Topology.enum';
 
-const TopologyComponent: FC<{ id?: string[]; GraphComponent?: ComponentType<GraphReactAdaptorProps> }> = function ({
-  id,
+const TopologyComponent: FC<{ ids?: string[]; GraphComponent?: ComponentType<GraphReactAdaptorProps> }> = function ({
+  ids,
   GraphComponent = GraphReactAdaptor
 }) {
   const navigate = useNavigate();
@@ -25,16 +25,16 @@ const TopologyComponent: FC<{ id?: string[]; GraphComponent?: ComponentType<Grap
   const toastRef = useRef<ToastExposeMethods>(null);
 
   const {
-    idSelected,
+    idsSelected,
     showOnlyNeighbours,
     moveToNodeSelected,
     handleSelected,
     handleShowOnlyNeighbours,
     handleMoveToNodeSelectedChecked
-  } = useTopologyState({ id });
+  } = useTopologyState({ ids });
 
   const { components, componentsPairs } = useTopologyComponentData({
-    idSelected: showOnlyNeighbours ? idSelected : undefined
+    idSelected: showOnlyNeighbours ? idsSelected : undefined
   });
 
   const handleShowDetails = useCallback(
@@ -69,7 +69,7 @@ const TopologyComponent: FC<{ id?: string[]; GraphComponent?: ComponentType<Grap
   }, [graphRef, toastRef]);
 
   const { nodeIdSelected, nodes, edges } = TopologyComponentController.dataTransformer({
-    idSelected,
+    idsSelected,
     components,
     componentsPairs
   });
@@ -99,8 +99,8 @@ const TopologyComponent: FC<{ id?: string[]; GraphComponent?: ComponentType<Grap
             edges={edges}
             itemSelected={nodeIdSelected}
             onClickNode={handleShowDetails}
-            layout={showOnlyNeighbours && idSelected ? LAYOUT_TOPOLOGY_SINGLE_NODE : LAYOUT_TOPOLOGY_DEFAULT}
-            moveToSelectedNode={moveToNodeSelected && !!idSelected && !showOnlyNeighbours}
+            layout={showOnlyNeighbours && idsSelected ? LAYOUT_TOPOLOGY_SINGLE_NODE : LAYOUT_TOPOLOGY_DEFAULT}
+            moveToSelectedNode={moveToNodeSelected && !!idsSelected && !showOnlyNeighbours}
           />
         </StackItem>
       </Stack>
diff --git a/src/pages/Topology/components/TopologyProcesses.tsx b/src/pages/Topology/components/TopologyProcesses.tsx
index 15f21bdd..2ee37f1d 100644
--- a/src/pages/Topology/components/TopologyProcesses.tsx
+++ b/src/pages/Topology/components/TopologyProcesses.tsx
@@ -47,10 +47,10 @@ import { NodeOrEdgeListProps } from '../Topology.interfaces';
 
 const TopologyProcesses: FC<{
   serviceIds?: string[];
-  id?: string[];
+  ids?: string[];
   GraphComponent?: ComponentType<GraphReactAdaptorProps>;
   ModalComponent?: ComponentType<NodeOrEdgeListProps>;
-}> = function ({ serviceIds, id: processId, GraphComponent = GraphReactAdaptor, ModalComponent = NodeOrEdgeList }) {
+}> = function ({ serviceIds, ids: processIds, GraphComponent = GraphReactAdaptor, ModalComponent = NodeOrEdgeList }) {
   const navigate = useNavigate();
   const graphRef = useRef<GraphReactAdaptorExposedMethods>();
   const toastRef = useRef<ToastExposeMethods>(null);
@@ -59,7 +59,7 @@ const TopologyProcesses: FC<{
     useServiceState(serviceIds);
 
   const {
-    idSelected,
+    idsSelected,
     showOnlyNeighbours,
     moveToNodeSelected,
     displayOptionsSelected,
@@ -69,7 +69,7 @@ const TopologyProcesses: FC<{
     handleDisplaySelected,
     getDisplaySelectedFromLocalStorage
   } = useTopologyState({
-    id: processId,
+    ids: processIds,
     initDisplayOptionsEnabled: [SHOW_SITE_KEY],
     displayOptionsEnabledKey: 'display-process-options'
   });
@@ -77,7 +77,7 @@ const TopologyProcesses: FC<{
   const { modalType, handleCloseModal, openProcessModal, openProcessPairModal } = useModalState();
 
   const { processes, processesPairs, metrics } = useTopologyProcessData({
-    idSelected: showOnlyNeighbours ? idSelected : undefined,
+    idsSelected: showOnlyNeighbours ? idsSelected : undefined,
     showBytes: displayOptionsSelected.includes(SHOW_LINK_BYTES),
     showByteRate: displayOptionsSelected.includes(SHOW_LINK_BYTERATE),
     showLatency: displayOptionsSelected.includes(SHOW_LINK_LATENCY)
@@ -93,10 +93,11 @@ const TopologyProcesses: FC<{
 
   const handleProcessSelected = useCallback(
     (id?: string) => {
+      handleShowOnlyNeighbours(false);
       handleSelected(TopologyController.transformStringIdsToIds(id));
       handleCloseModal();
     },
-    [handleCloseModal, handleSelected]
+    [handleCloseModal, handleSelected, handleShowOnlyNeighbours]
   );
 
   const handleShowProcessDetails = useCallback(
@@ -141,11 +142,12 @@ const TopologyProcesses: FC<{
 
   const handleServiceSelectedWrapper = useCallback(
     (ids: string[] | undefined) => {
+      handleShowOnlyNeighbours(false);
       handleSelected();
       handleServiceSelected(ids);
       handleCloseModal();
     },
-    [handleCloseModal, handleSelected, handleServiceSelected]
+    [handleCloseModal, handleSelected, handleServiceSelected, handleShowOnlyNeighbours]
   );
 
   const handleSavePositions = useCallback(() => {
@@ -163,10 +165,11 @@ const TopologyProcesses: FC<{
   }, [getServiceIdsFromLocalStorage, getDisplaySelectedFromLocalStorage]);
 
   const showDeployments =
-    displayOptionsSelected.includes(SHOW_DEPLOYMENTS) || processes.length > MAX_NODE_COUNT_WITHOUT_AGGREGATION;
+    displayOptionsSelected.includes(SHOW_DEPLOYMENTS) ||
+    (!displayOptionsSelected.includes(SHOW_DEPLOYMENTS) && processes.length > MAX_NODE_COUNT_WITHOUT_AGGREGATION);
 
   const { nodes, edges, combos, nodeIdSelected } = TopologyProcessController.dataTransformer({
-    idSelected,
+    idsSelected,
     processes,
     processesPairs,
     serviceIdsSelected,
@@ -231,8 +234,8 @@ const TopologyProcesses: FC<{
                   edges={edges}
                   combos={combos}
                   itemSelected={nodeIdSelected}
-                  layout={showOnlyNeighbours && idSelected ? LAYOUT_TOPOLOGY_SINGLE_NODE : LAYOUT_TOPOLOGY_DEFAULT}
-                  moveToSelectedNode={moveToNodeSelected && !!idSelected && !showOnlyNeighbours}
+                  layout={showOnlyNeighbours && idsSelected ? LAYOUT_TOPOLOGY_SINGLE_NODE : LAYOUT_TOPOLOGY_DEFAULT}
+                  moveToSelectedNode={moveToNodeSelected && !!idsSelected && !showOnlyNeighbours}
                   onClickNode={handleShowProcessDetails}
                   onClickEdge={handleShowProcessPairDetails}
                 />
diff --git a/src/pages/Topology/components/TopologySite.tsx b/src/pages/Topology/components/TopologySite.tsx
index 7dcd5a28..a51d7c67 100644
--- a/src/pages/Topology/components/TopologySite.tsx
+++ b/src/pages/Topology/components/TopologySite.tsx
@@ -26,8 +26,8 @@ import {
 } from '../Topology.constants';
 import { TopologyLabels } from '../Topology.enum';
 
-const TopologySite: FC<{ id?: string[]; GraphComponent?: ComponentType<GraphReactAdaptorProps> }> = function ({
-  id,
+const TopologySite: FC<{ ids?: string[]; GraphComponent?: ComponentType<GraphReactAdaptorProps> }> = function ({
+  ids,
   GraphComponent = GraphReactAdaptor
 }) {
   const navigate = useNavigate();
@@ -35,7 +35,7 @@ const TopologySite: FC<{ id?: string[]; GraphComponent?: ComponentType<GraphReac
   const toastRef = useRef<ToastExposeMethods>(null);
 
   const {
-    idSelected,
+    idsSelected,
     showOnlyNeighbours,
     moveToNodeSelected,
     displayOptionsSelected,
@@ -44,13 +44,13 @@ const TopologySite: FC<{ id?: string[]; GraphComponent?: ComponentType<GraphReac
     handleMoveToNodeSelectedChecked,
     handleDisplaySelected
   } = useTopologyState({
-    id,
+    ids,
     initDisplayOptionsEnabled: [SHOW_ROUTER_LINKS],
     displayOptionsEnabledKey: 'display-site-options'
   });
 
   const { sites, routerLinks, sitesPairs, metrics } = useTopologySiteData({
-    idSelected: showOnlyNeighbours ? idSelected : undefined,
+    idsSelected: showOnlyNeighbours ? idsSelected : undefined,
     showDataLink: displayOptionsSelected.includes(SHOW_DATA_LINKS),
     showBytes: displayOptionsSelected.includes(SHOW_LINK_BYTES),
     showByteRate: displayOptionsSelected.includes(SHOW_LINK_BYTERATE),
@@ -86,7 +86,7 @@ const TopologySite: FC<{ id?: string[]; GraphComponent?: ComponentType<GraphReac
   }, [graphRef, toastRef]);
 
   const { nodes, edges, nodeIdSelected } = TopologySiteController.siteDataTransformer({
-    idSelected,
+    idsSelected,
     sites,
     sitesPairs,
     routerLinks,
@@ -123,8 +123,8 @@ const TopologySite: FC<{ id?: string[]; GraphComponent?: ComponentType<GraphReac
             edges={edges}
             itemSelected={nodeIdSelected}
             onClickNode={handleShowDetails}
-            layout={showOnlyNeighbours && idSelected ? LAYOUT_TOPOLOGY_SINGLE_NODE : LAYOUT_TOPOLOGY_DEFAULT}
-            moveToSelectedNode={moveToNodeSelected && !!idSelected && !showOnlyNeighbours}
+            layout={showOnlyNeighbours && idsSelected ? LAYOUT_TOPOLOGY_SINGLE_NODE : LAYOUT_TOPOLOGY_DEFAULT}
+            moveToSelectedNode={moveToNodeSelected && !!idsSelected && !showOnlyNeighbours}
           />
         </StackItem>
       </Stack>
diff --git a/src/pages/Topology/components/useTopologyProcessData.ts b/src/pages/Topology/components/useTopologyProcessData.ts
index b1f05290..3ff1de58 100644
--- a/src/pages/Topology/components/useTopologyProcessData.ts
+++ b/src/pages/Topology/components/useTopologyProcessData.ts
@@ -1,6 +1,7 @@
 import { useSuspenseQueries } from '@tanstack/react-query';
 
 import { RESTApi } from '@API/REST.api';
+import { ProcessPairsResponse, ProcessResponse } from '@API/REST.interfaces';
 import { UPDATE_INTERVAL } from '@config/config';
 import { QueriesProcesses } from '@pages/Processes/Processes.enum';
 
@@ -8,7 +9,7 @@ import { TopologyController } from '../services';
 import { QueriesTopology } from '../Topology.enum';
 
 interface UseSiteTopologyProcessDataProps {
-  idSelected?: string[];
+  idsSelected?: string[];
   showBytes: boolean;
   showByteRate: boolean;
   showLatency: boolean;
@@ -26,7 +27,7 @@ const metricQueryParams = {
 };
 
 const useTopologyProcessData = ({
-  idSelected,
+  idsSelected,
   showBytes,
   showByteRate,
   showLatency
@@ -61,15 +62,10 @@ const useTopologyProcessData = ({
   let filteredPairs = processesPairs;
   let filteredProcesses = processes;
 
-  if (idSelected?.length) {
-    filteredPairs = filteredPairs.filter((edge) =>
-      idSelected.some((ids) => ids.includes(edge.sourceId) || ids.includes(edge.destinationId))
-    );
-
-    const idsFromEdges = filteredPairs.flatMap(({ sourceId, destinationId }) => [sourceId, destinationId]);
-    const uniqueIds = [...new Set(idSelected.concat(idsFromEdges))];
-
-    filteredProcesses = processes.filter(({ identity }) => uniqueIds.some((ids) => ids.includes(identity)));
+  if (idsSelected) {
+    filteredPairs = filterPairsByIdsSelected(filteredPairs, idsSelected);
+    const uniqueIds = getUniqueIdsFromFilteredPairs(filteredPairs, idsSelected);
+    filteredProcesses = filterProcessesByUniqueIds(filteredProcesses, uniqueIds);
   }
 
   return {
@@ -80,3 +76,28 @@ const useTopologyProcessData = ({
 };
 
 export default useTopologyProcessData;
+
+function filterPairsByIdsSelected(pairs: ProcessPairsResponse[], idsSelected: string[]) {
+  return pairs.filter((edge) =>
+    idsSelected.every((ids) => {
+      const splitIds = ids.split('~');
+
+      return splitIds.includes(edge.sourceId) || splitIds.includes(edge.destinationId);
+    })
+  );
+}
+
+// Function to extract unique IDs from filtered pairs
+function getUniqueIdsFromFilteredPairs(filteredPairs: ProcessPairsResponse[], idsSelected: string[]) {
+  const idsFromEdges = filteredPairs.flatMap(({ sourceId, destinationId }) => [sourceId, destinationId]);
+  const allIds = idsSelected.flatMap((ids) => ids.split('~')).concat(idsFromEdges);
+
+  return [...new Set(allIds)];
+}
+
+// Function to filter processes based on unique IDs using a Set for faster lookups
+function filterProcessesByUniqueIds(processes: ProcessResponse[], uniqueIds: string[]) {
+  const uniqueIdsSet = new Set(uniqueIds);
+
+  return processes.filter(({ identity }) => uniqueIdsSet.has(identity));
+}
diff --git a/src/pages/Topology/components/useTopologySiteData.ts b/src/pages/Topology/components/useTopologySiteData.ts
index 12513b96..fee9ee4b 100644
--- a/src/pages/Topology/components/useTopologySiteData.ts
+++ b/src/pages/Topology/components/useTopologySiteData.ts
@@ -11,7 +11,7 @@ import { QueriesTopology } from '../Topology.enum';
 const linkQueryParams = { direction: FlowDirection.Outgoing };
 
 interface UseTopologySiteDataProps {
-  idSelected?: string[];
+  idsSelected?: string[];
   showDataLink: boolean;
   showBytes: boolean;
   showByteRate: boolean;
@@ -25,7 +25,7 @@ const metricQueryParams = {
 };
 
 const useTopologySiteData = ({
-  idSelected,
+  idsSelected,
   showDataLink,
   showBytes,
   showByteRate,
@@ -68,28 +68,28 @@ const useTopologySiteData = ({
   let filteredPairs = sitesPairs;
   let filteredSites = sites;
 
-  if (idSelected?.length) {
+  if (idsSelected?.length) {
     if (filteredPairs) {
       filteredPairs = filteredPairs.filter(
-        (edge) => idSelected.includes(edge.sourceId) || idSelected.includes(edge.destinationId)
+        (edge) => idsSelected.includes(edge.sourceId) || idsSelected.includes(edge.destinationId)
       );
 
       const idsFromEdges = filteredPairs.flatMap(({ sourceId, destinationId }) => [sourceId, destinationId]);
-      const uniqueIds = [...new Set(idSelected.concat(idsFromEdges))];
+      const uniqueIds = [...new Set(idsSelected.concat(idsFromEdges))];
 
       filteredSites = filteredSites.filter(({ identity }) => uniqueIds.includes(identity));
     }
 
     if (filteredRrouterLinks) {
       filteredRrouterLinks = filteredRrouterLinks.filter(
-        (edge) => idSelected.includes(edge.sourceSiteId) || idSelected.includes(edge.destinationSiteId)
+        (edge) => idsSelected.includes(edge.sourceSiteId) || idsSelected.includes(edge.destinationSiteId)
       );
 
       const idsFromEdges = filteredRrouterLinks.flatMap(({ sourceSiteId, destinationSiteId }) => [
         sourceSiteId,
         destinationSiteId
       ]);
-      const uniqueIds = [...new Set(idSelected.concat(idsFromEdges))];
+      const uniqueIds = [...new Set(idsSelected.concat(idsFromEdges))];
 
       filteredSites = filteredSites.filter(({ identity }) => uniqueIds.includes(identity));
     }
diff --git a/src/pages/Topology/components/useTopologyState.ts b/src/pages/Topology/components/useTopologyState.ts
index 2934fb88..4b486568 100644
--- a/src/pages/Topology/components/useTopologyState.ts
+++ b/src/pages/Topology/components/useTopologyState.ts
@@ -3,11 +3,11 @@ import { useState, useCallback, startTransition } from 'react';
 import { TopologyController } from '../services';
 
 const useTopologyState = ({
-  id,
+  ids,
   initDisplayOptionsEnabled = [],
   displayOptionsEnabledKey = ''
 }: {
-  id?: string[];
+  ids?: string[];
   initDisplayOptionsEnabled?: string[];
   displayOptionsEnabledKey?: string;
 }) => {
@@ -15,12 +15,12 @@ const useTopologyState = ({
     TopologyController.loadDisplayOptionsFromLocalStorage(displayOptionsEnabledKey) || initDisplayOptionsEnabled;
 
   const [displayOptionsSelected, setDisplayOptions] = useState<string[]>(configuration);
-  const [idSelected, setIdSelected] = useState<string[] | undefined>(id);
+  const [idsSelected, setIdsSelected] = useState<string[] | undefined>(ids);
   const [showOnlyNeighbours, setShowOnlyNeighbours] = useState(false);
   const [moveToNodeSelected, setMoveToNodeSelected] = useState(false);
 
   const handleSelected = useCallback((selected?: string[]) => {
-    setIdSelected(selected);
+    setIdsSelected(selected);
   }, []);
 
   const handleShowOnlyNeighbours = useCallback((checked: boolean) => {
@@ -53,7 +53,7 @@ const useTopologyState = ({
   }, [displayOptionsEnabledKey, handleDisplaySelected]);
 
   return {
-    idSelected,
+    idsSelected,
     showOnlyNeighbours,
     moveToNodeSelected,
     displayOptionsSelected,
diff --git a/src/pages/Topology/services/topologyComponentController.ts b/src/pages/Topology/services/topologyComponentController.ts
index 7bac4f55..e4434623 100644
--- a/src/pages/Topology/services/topologyComponentController.ts
+++ b/src/pages/Topology/services/topologyComponentController.ts
@@ -9,7 +9,7 @@ import { shape } from '../Topology.constants';
 import { TopologyController, convertEntityToNode } from '.';
 
 interface TopologyComponentControllerProps {
-  idSelected: string[] | undefined;
+  idsSelected: string[] | undefined;
   components: ComponentResponse[];
   componentsPairs: ComponentPairsResponse[];
 }
@@ -27,8 +27,8 @@ const convertComponentsToNodes = (entities: ComponentResponse[]): GraphNode[] =>
   });
 
 export const TopologyComponentController = {
-  dataTransformer: ({ idSelected, components, componentsPairs }: TopologyComponentControllerProps) => ({
-    nodeIdSelected: TopologyController.transformIdsToStringIds(idSelected),
+  dataTransformer: ({ idsSelected, components, componentsPairs }: TopologyComponentControllerProps) => ({
+    nodeIdSelected: TopologyController.transformIdsToStringIds(idsSelected),
     nodes: convertComponentsToNodes(components),
     edges: TopologyController.convertPairsToEdges(componentsPairs)
   })
diff --git a/src/pages/Topology/services/topologyProcessController.ts b/src/pages/Topology/services/topologyProcessController.ts
index 4a525a41..c090b26f 100644
--- a/src/pages/Topology/services/topologyProcessController.ts
+++ b/src/pages/Topology/services/topologyProcessController.ts
@@ -10,7 +10,7 @@ import { TopologyMetrics } from '../Topology.interfaces';
 import { TopologyController, convertEntityToNode, groupEdges, groupNodes } from '.';
 
 interface TopologyProcessControllerProps {
-  idSelected: string[] | undefined;
+  idsSelected: string[] | undefined;
   processes: ProcessResponse[];
   processesPairs: ProcessPairsResponse[];
   metrics: TopologyMetrics | null;
@@ -69,7 +69,7 @@ const convertProcessesToNodes = (processes: ProcessResponse[]): GraphNode[] =>
 
 export const TopologyProcessController = {
   dataTransformer: ({
-    idSelected,
+    idsSelected,
     processes,
     processesPairs,
     metrics,
@@ -126,12 +126,10 @@ export const TopologyProcessController = {
       processPairEdges = groupEdges(processNodes, processPairEdges);
     }
 
-    const nodeIdSelected = TopologyController.transformIdsToStringIds(idSelected);
-
     return {
       // when the id selected comes from an other view the id is a single node but maybe this page has the option showDeployments == true.
       // In that case we need to find the processNode with ids aggregated where the single node is contained
-      nodeIdSelected: nodeIdSelected ? processNodes.find(({ id }) => id.includes(nodeIdSelected))?.id : undefined,
+      nodeIdSelected: findMatchedNode(processNodes, idsSelected),
       nodes: processNodes.map((node) => ({
         ...node,
         persistPositionKey: serviceIdsSelected?.length ? `${node.id}-${serviceIdsSelected}` : node.id
@@ -144,3 +142,21 @@ export const TopologyProcessController = {
     };
   }
 };
+
+// Function to find the matched node based on the first node in idsSelected
+function findMatchedNode(processNodes: GraphNode[], idsSelected?: string[]) {
+  if (!idsSelected?.length) {
+    return undefined;
+  }
+
+  const nodeIdSelectedArray = idsSelected[0].split('~');
+
+  const processNode = processNodes.find(({ id }) => {
+    const nodeIds = id.split('~');
+    const nodeIdSet = new Set(nodeIds);
+
+    return nodeIdSelectedArray.every((nodeId) => nodeIdSet.has(nodeId));
+  });
+
+  return processNode?.id;
+}
diff --git a/src/pages/Topology/services/topologySiteController.ts b/src/pages/Topology/services/topologySiteController.ts
index 7b46b431..58a38fd3 100644
--- a/src/pages/Topology/services/topologySiteController.ts
+++ b/src/pages/Topology/services/topologySiteController.ts
@@ -13,7 +13,7 @@ import { TopologyMetrics } from '../Topology.interfaces';
 import { TopologyController, convertEntityToNode } from '.';
 
 interface TopologySiteControllerProps {
-  idSelected: string[] | undefined;
+  idsSelected: string[] | undefined;
   sites: SiteResponse[];
   routerLinks: LinkResponse[] | null;
   sitesPairs: SitePairsResponse[] | null;
@@ -77,7 +77,7 @@ const convertRouterLinksToEdges = (sites: SiteResponse[], links: LinkResponse[])
 
 export const TopologySiteController = {
   siteDataTransformer: ({
-    idSelected,
+    idsSelected,
     sites,
     routerLinks,
     sitesPairs,
@@ -93,7 +93,7 @@ export const TopologySiteController = {
     let edges: GraphEdge[] = [];
 
     if (sitesPairs) {
-      TopologyController.transformIdsToStringIds(idSelected),
+      TopologyController.transformIdsToStringIds(idsSelected),
         (edges = TopologyController.convertPairsToEdges(sitesPairs));
       edges = addSiteMetricsToEdges(edges, metrics);
       edges = TopologyController.configureEdges(edges, options);
@@ -102,7 +102,7 @@ export const TopologySiteController = {
     }
 
     return {
-      nodeIdSelected: TopologyController.transformIdsToStringIds(idSelected),
+      nodeIdSelected: TopologyController.transformIdsToStringIds(idsSelected),
       nodes: convertSitesToNodes(sites),
       edges
     };
diff --git a/src/pages/Topology/views/Topology.tsx b/src/pages/Topology/views/Topology.tsx
index 85814074..24f74539 100644
--- a/src/pages/Topology/views/Topology.tsx
+++ b/src/pages/Topology/views/Topology.tsx
@@ -65,9 +65,9 @@ const Topology = function () {
       }
       mainContentChildren={
         <>
-          {tabSelected === TopologyViews.Sites && <TopologySite id={ids} />}
-          {tabSelected === TopologyViews.ProcessGroups && <TopologyComponent id={ids} />}
-          {tabSelected === TopologyViews.Processes && <TopologyProcesses serviceIds={serviceIds} id={ids} />}
+          {tabSelected === TopologyViews.Sites && <TopologySite ids={ids} />}
+          {tabSelected === TopologyViews.ProcessGroups && <TopologyComponent ids={ids} />}
+          {tabSelected === TopologyViews.Processes && <TopologyProcesses serviceIds={serviceIds} ids={ids} />}
         </>
       }
     />