fix(Data Mapper): Fix unnecessary edge when node/parent is not in the…

… search results (#6454)

libs/data-mapper-v2/src/components/canvas/useReactflowStates.ts

@@ -192,6 +192,14 @@ const useReactFlowStates = (props: ReactFlowStatesProps) => {
         y: 0,
       };
 
+      const commonProps = {
+        draggable: false,
+        selectable: false,
+        deletable: false,
+        dragging: false,
+        selected: false,
+      };
+
       const newTargetNodePosition = {
         x: newWidth - panelWidthWithoutHandles,
         y: 0,
@@ -223,6 +231,7 @@ const useReactFlowStates = (props: ReactFlowStatesProps) => {
             id: NodeIds.source,
             type: 'schemaPanel',
             data: {},
+            ...commonProps,
             position: newSourceNodePosition,
             ...dimensions,
           },
@@ -249,6 +258,7 @@ const useReactFlowStates = (props: ReactFlowStatesProps) => {
           item: {
             id: NodeIds.target,
             type: 'schemaPanel',
+            ...commonProps,
             data: {},
             position: newTargetNodePosition,
             ...dimensions,

libs/data-mapper-v2/src/components/common/reactflow/edges/useEdgePath.ts

@@ -42,13 +42,24 @@ const getCoordinatesForHandle = (
     let y: number | undefined = undefined;
     let scenario: 'direct' | 'collapsed' | 'scroll' | undefined;
     let currentHandle = handleBounds.find((handle) => equals(handleId, handle.id ?? ''));
+    let showEdge = false; // This is true only if the current node is visible (i.e. either in the search result or not collapsed) or one of the parent is visible
 
-    if (treeData.visibleNodes.find((node) => node.key === getTreeNodeId(handleId))) {
-      if (currentHandle) {
-        // If the handle is present in the current view, return the x and y coordinates
-        x = currentHandle.x;
-        y = currentHandle.y;
-        scenario = 'direct';
+    const { visibleNodes, startIndex, endIndex } = treeData;
+    const nodeIndexInVisibleNodes = visibleNodes.findIndex((node) => node.key === getTreeNodeId(handleId));
+
+    if (nodeIndexInVisibleNodes === -1) {
+      // Note: Either current node is not in the search results or is collapsed
+    } else {
+      showEdge = true;
+      if (nodeIndexInVisibleNodes >= startIndex && nodeIndexInVisibleNodes <= endIndex) {
+        // Current node is in the search result and on the canvas
+
+        if (currentHandle) {
+          // If the handle is present in the current view, return the x and y coordinates
+          x = currentHandle.x;
+          y = currentHandle.y;
+          scenario = 'direct';
+        }
       }
     }
 
@@ -57,43 +68,49 @@ const getCoordinatesForHandle = (
       const nodeFromSchema = schema.find((node) => node.key === getTreeNodeId(handleId));
       if (nodeFromSchema?.pathToRoot) {
         for (const path of nodeFromSchema.pathToRoot) {
-          // Node is collapsed and visible in the tree
-          if (
-            path.key !== nodeFromSchema.key &&
-            openKeys[path.key] !== undefined &&
-            openKeys[path.key] === false &&
-            treeData.visibleNodes.find((node) => node.key === path.key)
-          ) {
-            currentHandle = handleBounds.find((handle) => equals(createReactFlowKey(path.key), handle.id ?? ''));
-            // If handle is found => Parent is collapsed and we have the dimensions for the handle
-            // handle.hidden is used to check if the handle is scrolled out of view or not
-            if (currentHandle) {
-              x = currentHandle.x;
-              y = currentHandle.y;
-              scenario = 'collapsed';
-              break;
+          // Node is collapsed but parent is in the tree
+          if (path.key !== nodeFromSchema.key && openKeys[path.key] !== undefined && openKeys[path.key] === false) {
+            const parentNodeInVisibleNodes = visibleNodes.findIndex((node) => node.key === path.key);
+            if (parentNodeInVisibleNodes === -1) {
+              // Note: Either current node is not in the search results or is collapsed
+            } else {
+              showEdge = true;
+              if (parentNodeInVisibleNodes >= startIndex && parentNodeInVisibleNodes <= endIndex) {
+                currentHandle = handleBounds.find((handle) => equals(createReactFlowKey(path.key), handle.id ?? ''));
+                // If handle is found => Parent is collapsed and we have the dimensions for the handle
+                if (currentHandle) {
+                  x = currentHandle.x;
+                  y = currentHandle.y;
+                  scenario = 'collapsed';
+                  break;
+                }
+              }
             }
           }
         }
       }
     }
 
-    if (x === undefined && y === undefined) {
-      const indexForNodeInSchema = schema.findIndex((node) => node.key === getTreeNodeId(handleId));
+    // If the current node and parent are scrolled out but in search result or current node is collapsed and one of the parent is in search result
+    if (showEdge && x === undefined && y === undefined) {
+      const indexForNodeInSchema = schema.findIndex((node) => equals(node.key, getTreeNodeId(handleId)));
       if (indexForNodeInSchema >= 0) {
-        if (indexForNodeInSchema > treeData.endIndex) {
-          const reactflowHandle = handleBounds.find((handle) => handle.id?.startsWith('bottom-'));
-          if (reactflowHandle) {
-            x = reactflowHandle.x;
-            y = reactflowHandle.y;
-            scenario = 'scroll';
-          }
-        } else {
-          const reactflowHandle = handleBounds.find((handle) => handle.id?.startsWith('top-'));
-          if (reactflowHandle) {
-            x = reactflowHandle.x;
-            y = reactflowHandle.y;
-            scenario = 'scroll';
+        const lastNodeOnCanvasIndex = schema.findIndex((node) => equals(node.key, visibleNodes[endIndex].key));
+        if (lastNodeOnCanvasIndex > -1) {
+          if (indexForNodeInSchema > lastNodeOnCanvasIndex) {
+            const reactflowHandle = handleBounds.find((handle) => handle.id?.startsWith('bottom-'));
+            if (reactflowHandle) {
+              x = reactflowHandle.x;
+              y = reactflowHandle.y;
+              scenario = 'scroll';
+            }
+          } else {
+            const reactflowHandle = handleBounds.find((handle) => handle.id?.startsWith('top-'));
+            if (reactflowHandle) {
+              x = reactflowHandle.x;
+              y = reactflowHandle.y;
+              scenario = 'scroll';
+            }
           }
         }
       }

libs/data-mapper-v2/src/components/schema/styles.ts

@@ -37,7 +37,7 @@ export const usePanelStyles = makeStyles({
   },
   targetSchemaBody: {
     position: 'relative',
-    left: '-7px',
+    left: '-16px',
   },
 });
 

libs/data-mapper-v2/src/components/schema/tree/SchemaTree.tsx

@@ -45,13 +45,10 @@ export const SchemaTree = (props: SchemaTreeProps) => {
   const updateVisibleNodes = useCallback(() => {
     const startIndex = treeRef?.current?.visibleStartIndex ?? -1;
     const endIndex = treeRef?.current?.visibleStopIndex ?? -1;
+    const visibleNodes = (treeRef?.current?.visibleNodes ?? []).map((node) => node.data);
     if (startIndex === -1 || endIndex === -1) {
       return;
     }
-    const visibleNodes =
-      treeRef?.current?.visibleNodes
-        .filter((data) => data.rowIndex !== null && data.rowIndex >= startIndex && data.rowIndex <= endIndex)
-        .map((node) => node.data) ?? [];
 
     const isVisibleNodesUpdated = (newNodes: SchemaNodeExtended[], currentNodes: SchemaNodeExtended[]) => {
       const nodeSet = new Set<string>();

libs/data-mapper-v2/src/components/schema/tree/styles.ts

@@ -11,7 +11,8 @@ export const useStyles = makeStyles({
     marginLeft: '14px',
   },
   targetScehmaRoot: {
-    marginRight: '14px',
+    paddingLeft: '14px',
+    paddingRight: '14px',
   },
   root: {
     height: '100%',
@@ -52,7 +53,7 @@ export const useTreeNodeStyles = makeStyles({
     },
   },
   targetSchemaContainer: {
-    paddingLeft: '16px',
+    marginLeft: '16px',
   },
   sourceSchemaContainer: {
     marginRight: '16px',
@@ -123,6 +124,6 @@ export const useHandleStyles = makeStyles({
     right: '16px',
   },
   right: {
-    left: '7.5px',
+    left: '2px',
   },
 });