From 569ff39ade38b5804e14f9a1db419edd4bc06ede Mon Sep 17 00:00:00 2001
From: Marco <51787428+MarcoMruz@users.noreply.github.com>
Date: Fri, 8 Mar 2024 14:24:21 +0100
Subject: [PATCH] Add ptp diff (#1496)

* implement version diff for ptp and synce

* handle null value in version select

* refactor used type in redux reducers
---
 .../src/__generated__/graphql.ts              |  42 ++++-
 .../components/node-icons/ptp-node-icon.tsx   |  18 +-
 .../components/node-icons/synce-node-icon.tsx |  22 ++-
 .../version-select/version-select.tsx         |   5 +-
 .../src/helpers/topology-helpers.ts           | 168 +++++++++++++++++-
 .../src/pages/topology/ptp/ptp-nodes.tsx      |   5 +-
 .../topology/ptp/ptp-topology.container.tsx   |  25 ++-
 .../src/pages/topology/synce/synce-nodes.tsx  |   5 +-
 .../synce/synce-topology.container.tsx        |  27 ++-
 .../src/pages/topology/topology.tsx           |  28 +--
 .../src/state.actions.ts                      | 160 ++++++++++++++++-
 .../src/state.reducer.ts                      |  50 +++++-
 12 files changed, 501 insertions(+), 54 deletions(-)

diff --git a/packages/frinx-device-topology/src/__generated__/graphql.ts b/packages/frinx-device-topology/src/__generated__/graphql.ts
index b6e040831..7ec66a200 100644
--- a/packages/frinx-device-topology/src/__generated__/graphql.ts
+++ b/packages/frinx-device-topology/src/__generated__/graphql.ts
@@ -1978,7 +1978,7 @@ export type WorkflowDefinition = BaseWorkflowDefinition & Node & {
   ownerEmail: Maybe<Scalars['String']['output']>;
   restartable: Scalars['Boolean']['output'];
   tasks: Array<WorkflowDefinitionTask>;
-  tasksJson: Scalars['JSON']['output'];
+  tasksJson: Maybe<Scalars['JSON']['output']>;
   timeoutPolicy: Maybe<TimeoutPolicy>;
   timeoutSeconds: Maybe<Scalars['Int']['output']>;
   updatedAt: Maybe<Scalars['String']['output']>;
@@ -3047,15 +3047,17 @@ export type DeviceInventoryQuery = {
   locations: LocationConnection;
   netTopology: Maybe<NetTopology>;
   node: Maybe<Node>;
+  phyTopologyVersionData: TopologyVersionData;
   ptpDiffSynce: PtpDiffSynce;
   ptpPathToGrandMaster: Maybe<Array<Scalars['String']['output']>>;
   ptpTopology: Maybe<PtpTopology>;
+  ptpTopologyVersionData: TopologyVersionData;
   shortestPath: Array<NetRoutingPathNode>;
   syncePathToGrandMaster: Maybe<Array<Scalars['String']['output']>>;
   synceTopology: Maybe<SynceTopology>;
+  synceTopologyVersionData: TopologyVersionData;
   topology: Maybe<Topology>;
   topologyCommonNodes: Maybe<TopologyCommonNodes>;
-  topologyVersionData: TopologyVersionData;
   topologyVersions: Maybe<Array<Scalars['String']['output']>>;
   transactions: Array<Transaction>;
   uniconfigShellSession: Maybe<Scalars['String']['output']>;
@@ -3123,11 +3125,21 @@ export type DeviceInventoryQueryNodeArgs = {
 };
 
 
+export type DeviceInventoryQueryPhyTopologyVersionDataArgs = {
+  version: Scalars['String']['input'];
+};
+
+
 export type DeviceInventoryQueryPtpPathToGrandMasterArgs = {
   deviceFrom: Scalars['String']['input'];
 };
 
 
+export type DeviceInventoryQueryPtpTopologyVersionDataArgs = {
+  version: Scalars['String']['input'];
+};
+
+
 export type DeviceInventoryQueryShortestPathArgs = {
   from: Scalars['String']['input'];
   to: Scalars['String']['input'];
@@ -3139,6 +3151,11 @@ export type DeviceInventoryQuerySyncePathToGrandMasterArgs = {
 };
 
 
+export type DeviceInventoryQuerySynceTopologyVersionDataArgs = {
+  version: Scalars['String']['input'];
+};
+
+
 export type DeviceInventoryQueryTopologyArgs = {
   filter?: InputMaybe<FilterTopologyInput>;
 };
@@ -3149,11 +3166,6 @@ export type DeviceInventoryQueryTopologyCommonNodesArgs = {
 };
 
 
-export type DeviceInventoryQueryTopologyVersionDataArgs = {
-  version: Scalars['String']['input'];
-};
-
-
 export type DeviceInventoryQueryZonesArgs = {
   after?: InputMaybe<Scalars['String']['input']>;
   before?: InputMaybe<Scalars['String']['input']>;
@@ -3708,7 +3720,21 @@ export type TopologyVersionDataQueryVariables = Exact<{
 }>;
 
 
-export type TopologyVersionDataQuery = { __typename?: 'Query', deviceInventory: { __typename?: 'deviceInventoryQuery', topologyVersionData: { __typename?: 'TopologyVersionData', edges: Array<{ __typename?: 'GraphVersionEdge', id: string, source: { __typename?: 'EdgeSourceTarget', nodeId: string, interface: string }, target: { __typename?: 'EdgeSourceTarget', nodeId: string, interface: string } }>, nodes: Array<{ __typename?: 'GraphVersionNode', id: string, name: string, interfaces: Array<{ __typename?: 'GraphNodeInterface', id: string, status: GraphEdgeStatus, name: string }>, coordinates: { __typename?: 'GraphNodeCoordinates', x: number, y: number } }> } } };
+export type TopologyVersionDataQuery = { __typename?: 'Query', deviceInventory: { __typename?: 'deviceInventoryQuery', phyTopologyVersionData: { __typename?: 'TopologyVersionData', edges: Array<{ __typename?: 'GraphVersionEdge', id: string, source: { __typename?: 'EdgeSourceTarget', nodeId: string, interface: string }, target: { __typename?: 'EdgeSourceTarget', nodeId: string, interface: string } }>, nodes: Array<{ __typename?: 'GraphVersionNode', id: string, name: string, interfaces: Array<{ __typename?: 'GraphNodeInterface', id: string, status: GraphEdgeStatus, name: string }>, coordinates: { __typename?: 'GraphNodeCoordinates', x: number, y: number } }> } } };
+
+export type PtpTopologyVersionDataQueryVariables = Exact<{
+  version: Scalars['String']['input'];
+}>;
+
+
+export type PtpTopologyVersionDataQuery = { __typename?: 'Query', deviceInventory: { __typename?: 'deviceInventoryQuery', ptpTopologyVersionData: { __typename?: 'TopologyVersionData', edges: Array<{ __typename?: 'GraphVersionEdge', id: string, source: { __typename?: 'EdgeSourceTarget', nodeId: string, interface: string }, target: { __typename?: 'EdgeSourceTarget', nodeId: string, interface: string } }>, nodes: Array<{ __typename?: 'GraphVersionNode', id: string, name: string, interfaces: Array<{ __typename?: 'GraphNodeInterface', id: string, status: GraphEdgeStatus, name: string }>, coordinates: { __typename?: 'GraphNodeCoordinates', x: number, y: number } }> } } };
+
+export type SynceTopologyVersionDataQueryVariables = Exact<{
+  version: Scalars['String']['input'];
+}>;
+
+
+export type SynceTopologyVersionDataQuery = { __typename?: 'Query', deviceInventory: { __typename?: 'deviceInventoryQuery', synceTopologyVersionData: { __typename?: 'TopologyVersionData', edges: Array<{ __typename?: 'GraphVersionEdge', id: string, source: { __typename?: 'EdgeSourceTarget', nodeId: string, interface: string }, target: { __typename?: 'EdgeSourceTarget', nodeId: string, interface: string } }>, nodes: Array<{ __typename?: 'GraphVersionNode', id: string, name: string, interfaces: Array<{ __typename?: 'GraphNodeInterface', id: string, status: GraphEdgeStatus, name: string }>, coordinates: { __typename?: 'GraphNodeCoordinates', x: number, y: number } }> } } };
 
 export type PtpTopologyQueryVariables = Exact<{ [key: string]: never; }>;
 
diff --git a/packages/frinx-device-topology/src/components/node-icons/ptp-node-icon.tsx b/packages/frinx-device-topology/src/components/node-icons/ptp-node-icon.tsx
index 7b93af135..06feb42cf 100644
--- a/packages/frinx-device-topology/src/components/node-icons/ptp-node-icon.tsx
+++ b/packages/frinx-device-topology/src/components/node-icons/ptp-node-icon.tsx
@@ -1,10 +1,11 @@
 import { chakra } from '@chakra-ui/react';
 import React, { PointerEvent, VoidFunctionComponent } from 'react';
+import { PtpGraphNodeWithDiff } from '../../helpers/topology-helpers';
 import { GraphPtpNodeInterface, PositionsWithGroupsMap } from '../../pages/topology/graph.helpers';
 import { TopologyMode } from '../../state.actions';
-import { GraphEdge, PtpGraphNode } from '../../__generated__/graphql';
+import { GraphEdge } from '../../__generated__/graphql';
 import NodeIconImage from './node-icon-image';
-import { getDeviceNodeTransformProperties, getNodeInterfaceGroups } from './node-icon.helpers';
+import { getDeviceNodeTransformProperties, getNodeBackgroundColor, getNodeInterfaceGroups } from './node-icon.helpers';
 import NodeInterface from './node-interface';
 
 type Props = {
@@ -12,9 +13,10 @@ type Props = {
   ptpDiffSynceIds: string[];
   positions: PositionsWithGroupsMap<GraphPtpNodeInterface>;
   isFocused: boolean;
+  isSelected: boolean;
   isSelectedForGmPath: boolean;
   isGmPath: boolean;
-  node: PtpGraphNode;
+  node: PtpGraphNodeWithDiff;
   topologyMode: TopologyMode;
   selectedEdge: GraphEdge | null;
   onPointerDown: (event: PointerEvent<SVGRectElement>) => void;
@@ -31,6 +33,7 @@ const PtpNodeIcon: VoidFunctionComponent<Props> = ({
   isPtpDiffSynceShown,
   ptpDiffSynceIds,
   isFocused,
+  isSelected,
   isSelectedForGmPath,
   isGmPath,
   node,
@@ -44,7 +47,10 @@ const PtpNodeIcon: VoidFunctionComponent<Props> = ({
   const interfaceGroups = getNodeInterfaceGroups(node.name, positions.interfaceGroups);
   const { circleDiameter, sizeTransform } = getDeviceNodeTransformProperties('MEDIUM');
 
-  const ptpDiffSynceNodeColor = isPtpDiffSynceShown && ptpDiffSynceIds?.includes(node.nodeId) ? 'red.200' : 'gray.400';
+  const ptpNodeBackgroundColor =
+    isPtpDiffSynceShown && ptpDiffSynceIds?.includes(node.nodeId)
+      ? 'red.200'
+      : getNodeBackgroundColor({ isSelected, change: node.change });
 
   return (
     <G
@@ -65,9 +71,9 @@ const PtpNodeIcon: VoidFunctionComponent<Props> = ({
       <G>
         <Circle
           r={`${circleDiameter / 2}px`}
-          fill={ptpDiffSynceNodeColor}
+          fill={ptpNodeBackgroundColor}
           strokeWidth={1}
-          stroke={ptpDiffSynceNodeColor}
+          stroke={ptpNodeBackgroundColor}
         />
       </G>
       <Text
diff --git a/packages/frinx-device-topology/src/components/node-icons/synce-node-icon.tsx b/packages/frinx-device-topology/src/components/node-icons/synce-node-icon.tsx
index 86aa52ee4..165ca90c0 100644
--- a/packages/frinx-device-topology/src/components/node-icons/synce-node-icon.tsx
+++ b/packages/frinx-device-topology/src/components/node-icons/synce-node-icon.tsx
@@ -1,10 +1,11 @@
 import { chakra } from '@chakra-ui/react';
 import React, { PointerEvent, VoidFunctionComponent } from 'react';
+import { SynceGraphNodeWithDiff } from '../../helpers/topology-helpers';
 import { GraphSynceNodeInterface, PositionsWithGroupsMap } from '../../pages/topology/graph.helpers';
 import { TopologyMode } from '../../state.actions';
-import { GraphEdge, SynceGraphNode } from '../../__generated__/graphql';
+import { GraphEdge } from '../../__generated__/graphql';
 import NodeIconImage from './node-icon-image';
-import { getDeviceNodeTransformProperties, getNodeInterfaceGroups } from './node-icon.helpers';
+import { getDeviceNodeTransformProperties, getNodeInterfaceGroups, getNodeBackgroundColor } from './node-icon.helpers';
 import NodeInterface from './node-interface';
 
 type Props = {
@@ -12,12 +13,13 @@ type Props = {
   isFocused: boolean;
   isSelectedForGmPath: boolean;
   isGmPath: boolean;
-  node: SynceGraphNode;
+  node: SynceGraphNodeWithDiff;
   topologyMode: TopologyMode;
   onPointerDown: (event: PointerEvent<SVGRectElement>) => void;
   onPointerMove: (event: PointerEvent<SVGRectElement>) => void;
   onPointerUp: (event: PointerEvent<SVGRectElement>) => void;
   selectedEdge: GraphEdge | null;
+  isSelected: boolean;
 };
 
 const G = chakra('g');
@@ -35,6 +37,7 @@ const SynceNodeIcon: VoidFunctionComponent<Props> = ({
   onPointerMove,
   onPointerUp,
   selectedEdge,
+  isSelected,
 }) => {
   const { x, y } = positions.nodes[node.name];
   const interfaceGroups = getNodeInterfaceGroups(node.name, positions.interfaceGroups);
@@ -57,7 +60,18 @@ const SynceNodeIcon: VoidFunctionComponent<Props> = ({
         transition="all .2s ease-in-out"
       />
       <G>
-        <Circle r={`${circleDiameter / 2}px`} fill="gray.400" strokeWidth={1} stroke="gray.400" />
+        <Circle
+          r={`${circleDiameter / 2}px`}
+          fill={getNodeBackgroundColor({
+            isSelected,
+            change: node.change,
+          })}
+          strokeWidth={1}
+          stroke={getNodeBackgroundColor({
+            isSelected,
+            change: node.change,
+          })}
+        />
       </G>
       <Text
         height={`${circleDiameter / 2}px`}
diff --git a/packages/frinx-device-topology/src/components/version-select/version-select.tsx b/packages/frinx-device-topology/src/components/version-select/version-select.tsx
index 7ca003b4b..78f99cf7d 100644
--- a/packages/frinx-device-topology/src/components/version-select/version-select.tsx
+++ b/packages/frinx-device-topology/src/components/version-select/version-select.tsx
@@ -3,7 +3,7 @@ import { format } from 'date-fns';
 import React, { ChangeEvent, VoidFunctionComponent } from 'react';
 import { gql, useQuery } from 'urql';
 import { getLocalDateFromUTC } from '@frinx/shared';
-import { setSelectedVersion } from '../../state.actions';
+import { setSelectedVersion, setSynceDiffVisibility } from '../../state.actions';
 import { useStateContext } from '../../state.provider';
 import { VersionsQuery, VersionsQueryVariables } from '../../__generated__/graphql';
 
@@ -26,6 +26,7 @@ const VersionSelect: VoidFunctionComponent = () => {
   const handleSelectVersionChange = (event: ChangeEvent<HTMLSelectElement>) => {
     const { value } = event.currentTarget;
     dispatch(setSelectedVersion(value === 'none' ? null : value));
+    dispatch(setSynceDiffVisibility(false));
   };
 
   if (isFetchingVersions) {
@@ -37,7 +38,7 @@ const VersionSelect: VoidFunctionComponent = () => {
   return (
     <>
       <FormLabel marginBottom={4}>Compare current topology with:</FormLabel>
-      <Select value={selectedVersion || undefined} onChange={handleSelectVersionChange} background="white">
+      <Select value={selectedVersion ?? 'none'} onChange={handleSelectVersionChange} background="white">
         <option value="none">None</option>
         {versions.map((v) => (
           <option key={`version-${v}`} value={v}>
diff --git a/packages/frinx-device-topology/src/helpers/topology-helpers.ts b/packages/frinx-device-topology/src/helpers/topology-helpers.ts
index b3440604f..acde62de2 100644
--- a/packages/frinx-device-topology/src/helpers/topology-helpers.ts
+++ b/packages/frinx-device-topology/src/helpers/topology-helpers.ts
@@ -1,7 +1,7 @@
 import { v4 as uuid } from 'uuid';
 import differenceBy from 'lodash/differenceBy';
 import { BackupGraphNode, GraphEdge, GraphNode } from '../pages/topology/graph.helpers';
-import { PtpGraphNode } from '../__generated__/graphql';
+import { PtpDeviceDetails, PtpGraphNode, SynceDeviceDetails, SynceGraphNode } from '../__generated__/graphql';
 
 export type Change = 'ADDED' | 'DELETED' | 'UPDATED' | 'NONE';
 
@@ -9,6 +9,14 @@ export type GraphNodeWithDiff = GraphNode & {
   change: Change;
 };
 
+export type PtpGraphNodeWithDiff = PtpGraphNode & {
+  change: Change;
+};
+
+export type SynceGraphNodeWithDiff = SynceGraphNode & {
+  change: Change;
+};
+
 export type GraphEdgeWithDiff = GraphEdge & {
   change: Change;
 };
@@ -20,6 +28,7 @@ export function getNodesWithDiff(nodes: GraphNode[], backupGraphNodes: BackupGra
       change: 'NONE' as const,
     }));
   }
+
   const nodesMap = new Map(nodes.map((n) => [n.id, n]));
   const backupNodesMap = new Map(backupGraphNodes.map((n) => [n.id, n]));
   const currentNodesWithDiff = nodes.map((n) => {
@@ -79,6 +88,163 @@ export function getNodesWithDiff(nodes: GraphNode[], backupGraphNodes: BackupGra
   return [...currentNodesWithDiff, ...deletedBackupNodesWithDiff];
 }
 
+export function getPtpNodesWithDiff(
+  nodes: PtpGraphNode[],
+  backupGraphNodes: BackupGraphNode[],
+): PtpGraphNodeWithDiff[] {
+  if (backupGraphNodes.length === 0) {
+    return nodes.map((n) => ({
+      ...n,
+      change: 'NONE' as const,
+    }));
+  }
+
+  const nodesMap = new Map(nodes.map((n) => [n.id, n]));
+  const backupNodesMap = new Map(backupGraphNodes.map((n) => [n.id, n]));
+  const currentNodesWithDiff = nodes.map((n) => {
+    const { id, interfaces } = n;
+    const addedInterfaces = differenceBy(
+      nodesMap.get(id)?.interfaces ?? [],
+      backupNodesMap.get(id)?.interfaces ?? [],
+      'id',
+    ).map((i) => ({ ...i, change: 'ADDED' }));
+    const removedInterfaces = differenceBy(
+      backupNodesMap.get(id)?.interfaces,
+      nodesMap.get(id)?.interfaces ?? [],
+      'id',
+    ).map((i) => ({ ...i, change: 'DELETED' }));
+    const noChangeInterfaces = differenceBy(interfaces, removedInterfaces, addedInterfaces, 'id').map((i) => ({
+      ...i,
+      change: 'NONE',
+    }));
+    if (backupNodesMap.has(n.id)) {
+      return {
+        ...n,
+        interfaces: [...addedInterfaces, ...removedInterfaces, ...noChangeInterfaces].map((i) => ({
+          ...i,
+          details: null,
+        })),
+        change: 'NONE' as const,
+      };
+    }
+    return {
+      ...n,
+      interfaces: [...addedInterfaces, ...removedInterfaces, ...noChangeInterfaces].map((i) => ({
+        ...i,
+        details: null,
+      })),
+      change: 'ADDED' as const,
+    };
+  });
+
+  const deletedBackupNodesWithDiff = backupGraphNodes
+    .map((n) => {
+      const { id, name, interfaces, coordinates } = n;
+      return {
+        id,
+        name,
+        device: {
+          id: uuid(),
+          deviceSize: 'MEDIUM' as const,
+          name,
+          // below are some fake data
+          isInstalled: false,
+          createdAt: '1970-01-01',
+          serviceState: 'PLANNING',
+        },
+        ptpDeviceDetails: {} as PtpDeviceDetails,
+        interfaces: interfaces.map((i) => ({ ...i, details: null })),
+        coordinates,
+        change: 'DELETED' as const,
+        status: 'ok' as const,
+        labels: [],
+        nodeId: '',
+      };
+    })
+    .filter((n) => !nodesMap.has(n.id));
+
+  return [...currentNodesWithDiff, ...deletedBackupNodesWithDiff];
+}
+
+export function getSynceNodesWithDiff(
+  nodes: SynceGraphNode[],
+  backupGraphNodes: BackupGraphNode[],
+): SynceGraphNodeWithDiff[] {
+  if (backupGraphNodes.length === 0) {
+    return nodes.map((n) => ({
+      ...n,
+      change: 'NONE' as const,
+    }));
+  }
+
+  const nodesMap = new Map(nodes.map((n) => [n.id, n]));
+  const backupNodesMap = new Map(backupGraphNodes.map((n) => [n.id, n]));
+
+  const currentNodesWithDiff = nodes.map((n) => {
+    const { id, interfaces } = n;
+    const addedInterfaces = differenceBy(
+      nodesMap.get(id)?.interfaces ?? [],
+      backupNodesMap.get(id)?.interfaces ?? [],
+      'id',
+    ).map((i) => ({ ...i, change: 'ADDED' }));
+    const removedInterfaces = differenceBy(
+      backupNodesMap.get(id)?.interfaces,
+      nodesMap.get(id)?.interfaces ?? [],
+      'id',
+    ).map((i) => ({ ...i, change: 'DELETED' }));
+    const noChangeInterfaces = differenceBy(interfaces, removedInterfaces, addedInterfaces, 'id').map((i) => ({
+      ...i,
+      change: 'NONE',
+    }));
+    if (backupNodesMap.has(n.id)) {
+      return {
+        ...n,
+        interfaces: [...addedInterfaces, ...removedInterfaces, ...noChangeInterfaces].map((i) => ({
+          ...i,
+          details: null,
+        })),
+        change: 'NONE' as const,
+      };
+    }
+    return {
+      ...n,
+      interfaces: [...addedInterfaces, ...removedInterfaces, ...noChangeInterfaces].map((i) => ({
+        ...i,
+        details: null,
+      })),
+      change: 'ADDED' as const,
+    };
+  });
+
+  const deletedBackupNodesWithDiff = backupGraphNodes
+    .map((n) => {
+      const { id, name, interfaces, coordinates } = n;
+      return {
+        id,
+        name,
+        device: {
+          id: uuid(),
+          deviceSize: 'MEDIUM' as const,
+          name,
+          // below are some fake data
+          isInstalled: false,
+          createdAt: '1970-01-01',
+          serviceState: 'PLANNING',
+        },
+        synceDeviceDetails: {} as SynceDeviceDetails,
+        interfaces: interfaces.map((i) => ({ ...i, details: null })),
+        coordinates,
+        change: 'DELETED' as const,
+        status: 'ok' as const,
+        labels: [],
+        nodeId: '',
+      };
+    })
+    .filter((n) => !nodesMap.has(n.id));
+
+  return [...currentNodesWithDiff, ...deletedBackupNodesWithDiff];
+}
+
 export function getEdgesWithDiff(edges: GraphEdge[], backupEdges: GraphEdge[]): GraphEdgeWithDiff[] {
   if (backupEdges.length === 0) {
     return edges.map((e) => ({
diff --git a/packages/frinx-device-topology/src/pages/topology/ptp/ptp-nodes.tsx b/packages/frinx-device-topology/src/pages/topology/ptp/ptp-nodes.tsx
index a9d7638f2..75883078a 100644
--- a/packages/frinx-device-topology/src/pages/topology/ptp/ptp-nodes.tsx
+++ b/packages/frinx-device-topology/src/pages/topology/ptp/ptp-nodes.tsx
@@ -1,6 +1,7 @@
 import unwrap from '@frinx/shared/src/helpers/unwrap';
 import React, { useState, VoidFunctionComponent } from 'react';
 import PtpNodeIcon from '../../../components/node-icons/ptp-node-icon';
+import { PtpGraphNodeWithDiff } from '../../../helpers/topology-helpers';
 import { setSelectedPtpNode, setUnconfimedNodeIdForGmPathSearch } from '../../../state.actions';
 import { useStateContext } from '../../../state.provider';
 import { PtpGraphNode } from '../../../__generated__/graphql';
@@ -13,7 +14,7 @@ type StatePosition = {
 };
 
 type Props = {
-  nodes: PtpGraphNode[];
+  nodes: PtpGraphNodeWithDiff[];
   ptpDiffSynceIds: string[];
   isPtpDiffSynceShown: boolean;
   onNodePositionUpdate: (deviceName: string, position: Position) => void;
@@ -38,6 +39,7 @@ const PtpNodes: VoidFunctionComponent<Props> = ({
     selectedEdge,
     unconfirmedSelectedGmPathNodeId,
     gmPathIds,
+    selectedNode,
   } = state;
   const [position, setPosition] = useState<StatePosition>({
     nodeId: null,
@@ -102,6 +104,7 @@ const PtpNodes: VoidFunctionComponent<Props> = ({
           key={node.id}
           positions={{ nodes: ptpNodePositions, interfaceGroups: ptpInterfaceGroupPositions }}
           isFocused={connectedNodeIds.includes(node.name)}
+          isSelected={selectedNode?.id === node.id}
           isSelectedForGmPath={unconfirmedSelectedGmPathNodeId === node.id}
           isGmPath={gmPathIds.includes(node.nodeId)}
           topologyMode={mode}
diff --git a/packages/frinx-device-topology/src/pages/topology/ptp/ptp-topology.container.tsx b/packages/frinx-device-topology/src/pages/topology/ptp/ptp-topology.container.tsx
index de3f6de53..986afb300 100644
--- a/packages/frinx-device-topology/src/pages/topology/ptp/ptp-topology.container.tsx
+++ b/packages/frinx-device-topology/src/pages/topology/ptp/ptp-topology.container.tsx
@@ -1,6 +1,12 @@
 import React, { useCallback, useEffect, useRef, VoidFunctionComponent } from 'react';
 import { gql, useClient, useMutation, useQuery } from 'urql';
-import { findGmPath, getPtpNodesAndEdges, setGmPathIds, setMode } from '../../../state.actions';
+import {
+  findGmPath,
+  getPtpBackupNodesAndEdges,
+  getPtpNodesAndEdges,
+  setGmPathIds,
+  setMode,
+} from '../../../state.actions';
 import { useStateContext } from '../../../state.provider';
 import {
   GetGrandMasterPathQuery,
@@ -89,15 +95,24 @@ const PtpTopologyContainer: VoidFunctionComponent<Props> = ({ isPtpDiffSynceShow
   }, [dispatch, gmPathData]);
 
   useEffect(() => {
-    intervalRef.current = window.setInterval(() => {
+    if (state.selectedVersion == null) {
+      intervalRef.current = window.setInterval(() => {
+        dispatch(getPtpNodesAndEdges(client));
+      }, 10000);
       dispatch(getPtpNodesAndEdges(client));
-    }, 10000);
-    dispatch(getPtpNodesAndEdges(client));
+    }
 
     return () => {
       window.clearInterval(intervalRef.current);
     };
-  }, [client, dispatch]);
+  }, [client, dispatch, state.selectedVersion, state.topologyLayer]);
+
+  useEffect(() => {
+    if (state.selectedVersion != null) {
+      window.clearInterval(intervalRef.current);
+      dispatch(getPtpBackupNodesAndEdges(client, state.selectedVersion));
+    }
+  }, [client, dispatch, state.selectedVersion]);
 
   const handleNodePositionUpdate = async (positions: { deviceName: string; position: Position }[]) => {
     const coordinates = [
diff --git a/packages/frinx-device-topology/src/pages/topology/synce/synce-nodes.tsx b/packages/frinx-device-topology/src/pages/topology/synce/synce-nodes.tsx
index e992d96a5..e8da94558 100644
--- a/packages/frinx-device-topology/src/pages/topology/synce/synce-nodes.tsx
+++ b/packages/frinx-device-topology/src/pages/topology/synce/synce-nodes.tsx
@@ -1,6 +1,7 @@
 import { unwrap } from '@frinx/shared';
 import React, { useState, VoidFunctionComponent } from 'react';
 import SynceNodeIcon from '../../../components/node-icons/synce-node-icon';
+import { SynceGraphNodeWithDiff } from '../../../helpers/topology-helpers';
 import { setSelectedSynceNode, setUnconfimedNodeIdForGmPathSearch } from '../../../state.actions';
 import { useStateContext } from '../../../state.provider';
 import { SynceGraphNode } from '../../../__generated__/graphql';
@@ -13,7 +14,7 @@ type StatePosition = {
 };
 
 type Props = {
-  nodes: SynceGraphNode[];
+  nodes: SynceGraphNodeWithDiff[];
   onNodePositionUpdate: (deviceName: string, position: Position) => void;
   onNodePositionUpdateFinish: () => void;
 };
@@ -30,6 +31,7 @@ const SynceNodes: VoidFunctionComponent<Props> = ({ nodes, onNodePositionUpdate,
     selectedEdge,
     unconfirmedSelectedGmPathNodeId,
     gmPathIds,
+    selectedNode,
   } = state;
 
   const [position, setPosition] = useState<StatePosition>({
@@ -93,6 +95,7 @@ const SynceNodes: VoidFunctionComponent<Props> = ({ nodes, onNodePositionUpdate,
           key={node.id}
           positions={{ nodes: synceNodePositions, interfaceGroups: synceInterfaceGroupPositions }}
           isFocused={connectedNodeIds.includes(node.name)}
+          isSelected={selectedNode?.id === node.id}
           isSelectedForGmPath={unconfirmedSelectedGmPathNodeId === node.id}
           isGmPath={gmPathIds.includes(node.nodeId)}
           topologyMode={mode}
diff --git a/packages/frinx-device-topology/src/pages/topology/synce/synce-topology.container.tsx b/packages/frinx-device-topology/src/pages/topology/synce/synce-topology.container.tsx
index 96ef6078c..e68608565 100644
--- a/packages/frinx-device-topology/src/pages/topology/synce/synce-topology.container.tsx
+++ b/packages/frinx-device-topology/src/pages/topology/synce/synce-topology.container.tsx
@@ -1,6 +1,12 @@
 import React, { useCallback, useEffect, useRef, VoidFunctionComponent } from 'react';
 import { gql, useClient, useMutation, useQuery } from 'urql';
-import { findGmPath, getSynceNodesAndEdges, setGmPathIds, setMode } from '../../../state.actions';
+import {
+  findGmPath,
+  getSynceBackupNodesAndEdges,
+  getSynceNodesAndEdges,
+  setGmPathIds,
+  setMode,
+} from '../../../state.actions';
 import { useStateContext } from '../../../state.provider';
 import {
   GetSynceGrandMasterPathQuery,
@@ -33,7 +39,7 @@ const SynceTopologyContainer: VoidFunctionComponent = () => {
   const client = useClient();
   const intervalRef = useRef<number>();
   const { dispatch, state } = useStateContext();
-  const { topologyLayer, selectedGmPathNodeId } = state;
+  const { topologyLayer, selectedGmPathNodeId, selectedVersion } = state;
 
   const [, updatePosition] = useMutation<UpdateSyncePositionMutation, UpdateSyncePositionMutationVariables>(
     UPDATE_POSITION_MUTATION,
@@ -60,15 +66,24 @@ const SynceTopologyContainer: VoidFunctionComponent = () => {
   }, [dispatch, gmPathData]);
 
   useEffect(() => {
-    intervalRef.current = window.setInterval(() => {
+    if (selectedVersion == null) {
+      intervalRef.current = window.setInterval(() => {
+        dispatch(getSynceNodesAndEdges(client));
+      }, 10000);
       dispatch(getSynceNodesAndEdges(client));
-    }, 10000);
-    dispatch(getSynceNodesAndEdges(client));
+    }
 
     return () => {
       window.clearInterval(intervalRef.current);
     };
-  }, [client, dispatch, topologyLayer]);
+  }, [client, dispatch, topologyLayer, selectedVersion]);
+
+  useEffect(() => {
+    if (selectedVersion != null) {
+      window.clearInterval(intervalRef.current);
+      dispatch(getSynceBackupNodesAndEdges(client, selectedVersion));
+    }
+  }, [client, dispatch, selectedVersion]);
 
   const handleNodePositionUpdate = async (positions: { deviceName: string; position: Position }[]) => {
     const coordinates = [
diff --git a/packages/frinx-device-topology/src/pages/topology/topology.tsx b/packages/frinx-device-topology/src/pages/topology/topology.tsx
index a2d6d8900..ac28b21e4 100644
--- a/packages/frinx-device-topology/src/pages/topology/topology.tsx
+++ b/packages/frinx-device-topology/src/pages/topology/topology.tsx
@@ -2,7 +2,7 @@ import { Box, Container, Flex, FormControl, FormLabel, Heading, Select, Switch }
 import React, { VoidFunctionComponent } from 'react';
 import LabelsFilter from '../../components/labels-filter/labels-filter';
 import VersionSelect from '../../components/version-select/version-select';
-import { setSynceDiffVisibility, setTopologyLayer } from '../../state.actions';
+import { setSelectedVersion, setSynceDiffVisibility, setTopologyLayer } from '../../state.actions';
 import { useStateContext } from '../../state.provider';
 import { TopologyLayer } from '../../state.reducer';
 import NetTopologyContainer from './net/net-topology.container';
@@ -37,24 +37,30 @@ const Topology: VoidFunctionComponent = () => {
             ))}
           </Select>
         </FormControl>
+        {(topologyLayer === 'LLDP' || topologyLayer === 'PTP' || topologyLayer === 'Synchronous Ethernet') && (
+          <Box flex={1}>
+            <VersionSelect />
+          </Box>
+        )}
         {topologyLayer === 'LLDP' && (
-          <>
-            <Box flex={1}>
-              <VersionSelect />
-            </Box>
-            <Box flex={1}>
-              <LabelsFilter />
-            </Box>
-          </>
+          <Box flex={1}>
+            <LabelsFilter />
+          </Box>
         )}
         {topologyLayer === 'PTP' && (
-          <FormControl display="flex" flexDirection="column" justifyContent="space-between" alignItems="left">
+          <FormControl flex={1}>
             <FormLabel htmlFor="email-alerts" mb="0">
               Show PTP Diff Synce
             </FormLabel>
             <Switch
               isChecked={isSynceDiffVisible}
-              onChange={() => dispatch(setSynceDiffVisibility(!isSynceDiffVisible))}
+              onChange={() => {
+                if (isSynceDiffVisible) {
+                  dispatch(setSelectedVersion(null));
+                }
+
+                dispatch(setSynceDiffVisibility(!isSynceDiffVisible));
+              }}
               size="lg"
               pb="32px"
             />
diff --git a/packages/frinx-device-topology/src/state.actions.ts b/packages/frinx-device-topology/src/state.actions.ts
index e04ac2d4b..4c3bd8aa3 100644
--- a/packages/frinx-device-topology/src/state.actions.ts
+++ b/packages/frinx-device-topology/src/state.actions.ts
@@ -9,9 +9,13 @@ import {
   PtpGraphNode,
   PtpTopologyQuery,
   PtpTopologyQueryVariables,
+  PtpTopologyVersionDataQuery,
+  PtpTopologyVersionDataQueryVariables,
   SynceGraphNode,
   SynceTopologyQuery,
   SynceTopologyQueryVariables,
+  SynceTopologyVersionDataQuery,
+  SynceTopologyVersionDataQueryVariables,
   TopologyQuery,
   TopologyQueryVariables,
   TopologyVersionDataQuery,
@@ -90,6 +94,14 @@ export type StateAction =
       type: 'SET_BACKUP_NODES_AND_EDGES';
       payload: BackupNodesEdgesPayload;
     }
+  | {
+      type: 'SET_PTP_BACKUP_NODES_AND_EDGES';
+      payload: BackupNodesEdgesPayload;
+    }
+  | {
+      type: 'SET_SYNCE_BACKUP_NODES_AND_EDGES';
+      payload: BackupNodesEdgesPayload;
+    }
   | {
       type: 'SET_MODE';
       mode: TopologyMode;
@@ -274,7 +286,73 @@ const NET_TOPOLOGY_QUERY = gql`
 const TOPOLOGY_VERSION_DATA_QUERY = gql`
   query TopologyVersionData($version: String!) {
     deviceInventory {
-      topologyVersionData(version: $version) {
+      phyTopologyVersionData(version: $version) {
+        edges {
+          id
+          source {
+            nodeId
+            interface
+          }
+          target {
+            nodeId
+            interface
+          }
+        }
+        nodes {
+          id
+          name
+          interfaces {
+            id
+            status
+            name
+          }
+          coordinates {
+            x
+            y
+          }
+        }
+      }
+    }
+  }
+`;
+
+const PTP_TOPOLOGY_VERSION_DATA_QUERY = gql`
+  query PtpTopologyVersionData($version: String!) {
+    deviceInventory {
+      ptpTopologyVersionData(version: $version) {
+        edges {
+          id
+          source {
+            nodeId
+            interface
+          }
+          target {
+            nodeId
+            interface
+          }
+        }
+        nodes {
+          id
+          name
+          interfaces {
+            id
+            status
+            name
+          }
+          coordinates {
+            x
+            y
+          }
+        }
+      }
+    }
+  }
+`;
+
+const SYNCE_TOPOLOGY_VERSION_DATA_QUERY = gql`
+  query SynceTopologyVersionData($version: String!) {
+    deviceInventory {
+      synceTopologyVersionData(version: $version) {
         edges {
           id
           source {
@@ -573,6 +651,20 @@ export function setBackupNodesAndEdges(payload: BackupNodesEdgesPayload): StateA
   };
 }
 
+export function setPtpBackupNodesAndEdges(payload: BackupNodesEdgesPayload): StateAction {
+  return {
+    type: 'SET_PTP_BACKUP_NODES_AND_EDGES',
+    payload,
+  };
+}
+
+export function setSynceBackupNodesAndEdges(payload: BackupNodesEdgesPayload): StateAction {
+  return {
+    type: 'SET_SYNCE_BACKUP_NODES_AND_EDGES',
+    payload,
+  };
+}
+
 export function getBackupNodesAndEdges(client: Client, version: string): ReturnType<ThunkAction<StateAction, State>> {
   return (dispatch) => {
     client
@@ -589,9 +681,71 @@ export function getBackupNodesAndEdges(client: Client, version: string): ReturnT
       .then((data) => {
         dispatch(
           setBackupNodesAndEdges({
-            nodes: data.data?.deviceInventory.topologyVersionData.nodes ?? [],
+            nodes: data.data?.deviceInventory.phyTopologyVersionData.nodes ?? [],
+            edges:
+              data.data?.deviceInventory.phyTopologyVersionData.edges.map((e) => ({
+                ...e,
+                weight: null,
+              })) ?? [],
+          }),
+        );
+      });
+  };
+}
+
+export function getPtpBackupNodesAndEdges(
+  client: Client,
+  version: string,
+): ReturnType<ThunkAction<StateAction, State>> {
+  return (dispatch) => {
+    client
+      .query<PtpTopologyVersionDataQuery, PtpTopologyVersionDataQueryVariables>(
+        PTP_TOPOLOGY_VERSION_DATA_QUERY,
+        {
+          version,
+        },
+        {
+          requestPolicy: 'network-only',
+        },
+      )
+      .toPromise()
+      .then((data) => {
+        dispatch(
+          setPtpBackupNodesAndEdges({
+            nodes: data.data?.deviceInventory.ptpTopologyVersionData.nodes ?? [],
+            edges:
+              data.data?.deviceInventory.ptpTopologyVersionData.edges.map((e) => ({
+                ...e,
+                weight: null,
+              })) ?? [],
+          }),
+        );
+      });
+  };
+}
+
+export function getSynceBackupNodesAndEdges(
+  client: Client,
+  version: string,
+): ReturnType<ThunkAction<StateAction, State>> {
+  return (dispatch) => {
+    client
+      .query<SynceTopologyVersionDataQuery, SynceTopologyVersionDataQueryVariables>(
+        SYNCE_TOPOLOGY_VERSION_DATA_QUERY,
+        {
+          version,
+        },
+        {
+          requestPolicy: 'network-only',
+        },
+      )
+      .toPromise()
+      .then((data) => {
+        dispatch(
+          setSynceBackupNodesAndEdges({
+            nodes: data.data?.deviceInventory.synceTopologyVersionData.nodes ?? [],
             edges:
-              data.data?.deviceInventory.topologyVersionData.edges.map((e) => ({
+              data.data?.deviceInventory.synceTopologyVersionData.edges.map((e) => ({
                 ...e,
                 weight: null,
               })) ?? [],
diff --git a/packages/frinx-device-topology/src/state.reducer.ts b/packages/frinx-device-topology/src/state.reducer.ts
index 6fd256c51..9f351a6fb 100644
--- a/packages/frinx-device-topology/src/state.reducer.ts
+++ b/packages/frinx-device-topology/src/state.reducer.ts
@@ -1,6 +1,15 @@
 import { omitNullValue } from '@frinx/shared';
 import { produce } from 'immer';
-import { getEdgesWithDiff, getNodesWithDiff, GraphEdgeWithDiff, GraphNodeWithDiff } from './helpers/topology-helpers';
+import {
+  getEdgesWithDiff,
+  getNodesWithDiff,
+  GraphEdgeWithDiff,
+  GraphNodeWithDiff,
+  getSynceNodesWithDiff,
+  getPtpNodesWithDiff,
+  PtpGraphNodeWithDiff,
+  SynceGraphNodeWithDiff,
+} from './helpers/topology-helpers';
 import {
   getDefaultPositionsMap,
   getInterfacesPositions,
@@ -26,7 +35,7 @@ import {
   getZoomLevel,
 } from './pages/topology/transform.helpers';
 import { LabelItem, StateAction, TopologyMode } from './state.actions';
-import { PtpGraphNode, SynceGraphNode } from './__generated__/graphql';
+import { PtpGraphNode, SynceGraphNode, SynceGraphNodeInterface } from './__generated__/graphql';
 
 export type TopologyLayer = 'LLDP' | 'BGP-LS' | 'PTP' | 'Synchronous Ethernet';
 export type NodeInfo = {
@@ -68,7 +77,7 @@ export type State = {
   netEdges: GraphEdgeWithDiff[];
   netNodePositions: Record<string, Position>;
   netInterfaceGroupPositions: PositionGroupsMap<GrahpNetNodeInterface>;
-  ptpNodes: PtpGraphNode[];
+  ptpNodes: PtpGraphNodeWithDiff[];
   ptpEdges: GraphEdgeWithDiff[];
   ptpNodePositions: Record<string, Position>;
   ptpInterfaceGroupPositions: PositionGroupsMap<GraphPtpNodeInterface>;
@@ -77,7 +86,7 @@ export type State = {
   unconfirmedSelectedGmPathNodeId: string | null;
   selectedGmPathNodeId: string | null;
   gmPathIds: string[];
-  synceNodes: SynceGraphNode[];
+  synceNodes: SynceGraphNodeWithDiff[];
   synceEdges: GraphEdgeWithDiff[];
   synceNodePositions: Record<string, Position>;
   synceInterfaceGroupPositions: PositionGroupsMap<GraphSynceNodeInterface>;
@@ -221,6 +230,34 @@ export function stateReducer(state: State, action: StateAction): State {
         acc.interfaceGroupPositions = positionsMap.interfaceGroups;
         return acc;
       }
+      case 'SET_PTP_BACKUP_NODES_AND_EDGES': {
+        const allNodes = getPtpNodesWithDiff(acc.ptpNodes, action.payload.nodes);
+        const allEdges = getEdgesWithDiff(acc.ptpEdges, action.payload.edges);
+        const positionsMap = getDefaultPositionsMap<GraphNodeInterface, PtpGraphNode>(
+          { nodes: allNodes, edges: allEdges },
+          (n) => n.name,
+          () => 'MEDIUM',
+        );
+        acc.ptpNodes = allNodes;
+        acc.ptpEdges = allEdges;
+        acc.ptpNodePositions = positionsMap.nodes;
+        acc.ptpInterfaceGroupPositions = positionsMap.interfaceGroups;
+        return acc;
+      }
+      case 'SET_SYNCE_BACKUP_NODES_AND_EDGES': {
+        const allNodes = getSynceNodesWithDiff(acc.synceNodes, action.payload.nodes);
+        const allEdges = getEdgesWithDiff(acc.synceEdges, action.payload.edges);
+        const positionsMap = getDefaultPositionsMap<SynceGraphNodeInterface, SynceGraphNode>(
+          { nodes: allNodes, edges: allEdges },
+          (n) => n.name,
+          () => 'MEDIUM',
+        );
+        acc.synceNodes = allNodes;
+        acc.synceEdges = allEdges;
+        acc.synceNodePositions = positionsMap.nodes;
+        acc.synceInterfaceGroupPositions = positionsMap.interfaceGroups;
+        return acc;
+      }
       case 'SET_UNCONFIRMED_NODE_IDS_TO_FIND_COMMON': {
         acc.unconfirmedSelectedNodeIds = [...action.nodeIds];
         return acc;
@@ -310,7 +347,7 @@ export function stateReducer(state: State, action: StateAction): State {
           (n) => n.name,
           () => 'MEDIUM',
         );
-        acc.ptpNodes = nodes;
+        acc.ptpNodes = nodes.map((n) => ({ ...n, change: 'NONE' }));
         acc.ptpEdges = edges.map((e) => ({ ...e, change: 'NONE' }));
         acc.ptpNodePositions = positionMap.nodes;
         acc.ptpInterfaceGroupPositions = positionMap.interfaceGroups;
@@ -323,7 +360,7 @@ export function stateReducer(state: State, action: StateAction): State {
           (n) => n.name,
           () => 'MEDIUM',
         );
-        acc.synceNodes = nodes;
+        acc.synceNodes = nodes.map((n) => ({ ...n, change: 'NONE' }));
         acc.synceEdges = edges.map((e) => ({ ...e, change: 'NONE' }));
         acc.synceNodePositions = positionMap.nodes;
         acc.synceInterfaceGroupPositions = positionMap.interfaceGroups;
@@ -337,6 +374,7 @@ export function stateReducer(state: State, action: StateAction): State {
         acc.gmPathIds = [];
         acc.selectedGmPathNodeId = null;
         acc.unconfirmedSelectedGmPathNodeId = null;
+        acc.selectedVersion = null;
         return acc;
       }
       case 'SET_SELECTED_NET_NODE': {