fix: DataMapper: Document node is a duplicate of the header

Author: matheusandre1

packages/ui/src/components/View/SourcePanel.tsx

@@ -47,31 +47,34 @@ export const SourcePanel: FunctionComponent<SourcePanelProps> = ({ isReadOnly =
     if (!sourceBodyTree) return [];
     return sourceBodyTree.flatten(documentExpansionState);
   }, [sourceBodyTree, documentExpansionState]);
+  
+  const hasSchema = !sourceBodyNodeData.isPrimitive;
+
+  const visibleNodes = useMemo(() => {
+    return hasSchema ? flattenedNodes.slice(1) : flattenedNodes;
+  }, [flattenedNodes, hasSchema]);
 
   // Recalculate connection ports when flattened nodes change (expand/collapse)
   useEffect(() => {
     syncConnectionPorts();
-  }, [flattenedNodes.length, syncConnectionPorts]);
+  }, [visibleNodes.length, syncConnectionPorts]);
 
   const renderSourceItem = useCallback(
     (index: number) => {
-      const flattenedNode = flattenedNodes[index];
+      const flattenedNode = visibleNodes[index];
       return (
         <SourceDocumentNodeWithContextMenu
           key={flattenedNode.path}
           treeNode={flattenedNode.treeNode}
           documentId={sourceBodyNodeData.id}
           isReadOnly={isReadOnly}
-          rank={flattenedNode.depth + 1}
+          rank={hasSchema ? flattenedNode.depth : flattenedNode.depth + 1}
         />
       );
     },
-    [flattenedNodes, sourceBodyNodeData.id, isReadOnly],
+    [hasSchema, sourceBodyNodeData.id, isReadOnly, visibleNodes],
   );
 
-  // Check if body has schema (similar to parameter logic)
-  const hasSchema = !sourceBodyNodeData.isPrimitive;
-
   // Edge markers for virtual scroll connection ports
   const edgeMarkers = useMemo(
     () => [
@@ -121,7 +124,7 @@ export const SourcePanel: FunctionComponent<SourcePanelProps> = ({ isReadOnly =
           {/* Only render children if body has schema */}
           {hasSchema && sourceBodyTree && (
             <Virtuoso
-              totalCount={flattenedNodes.length}
+              totalCount={visibleNodes.length}
               components={virtuosoComponents}
               itemContent={renderSourceItem}
               overscan={VIRTUOSO_OVERSCAN}

packages/ui/src/components/View/SourceTargetView.test.tsx

@@ -74,6 +74,8 @@ describe('SourceTargetView', () => {
 
       const shipTo = await screen.findByText('ShipTo');
       expect(shipTo).toBeTruthy();
+      expect(screen.queryByTestId('node-source-doc-sourceBody-Body')).toBeFalsy();
+      expect(screen.getAllByTestId('detach-schema-sourceBody-Body-button')).toHaveLength(1);
       const detachButton = screen.getByTestId('detach-schema-sourceBody-Body-button');
       act(() => {
         fireEvent.click(detachButton);
@@ -151,9 +153,11 @@ describe('SourceTargetView', () => {
 
       const shipTo = await screen.findByText('ShipTo');
       expect(shipTo).toBeTruthy();
-      const detachButtons = screen.getAllByTestId('detach-schema-targetBody-Body-button');
+      expect(screen.queryByTestId('node-target-doc-targetBody-Body')).toBeFalsy();
+      expect(screen.getAllByTestId('detach-schema-targetBody-Body-button')).toHaveLength(1);
+      const detachButton = screen.getByTestId('detach-schema-targetBody-Body-button');
       act(() => {
-        fireEvent.click(detachButtons[0]);
+        fireEvent.click(detachButton);
       });
       const detachConfirmButton = screen.getByTestId('detach-schema-modal-confirm-btn');
       act(() => {
@@ -206,8 +210,9 @@ describe('SourceTargetView', () => {
 
       const shipTo = await screen.findByText('map [@key = ShipTo]');
       expect(shipTo).toBeTruthy();
-      const detachButtons = screen.getAllByTestId('detach-schema-targetBody-Body-button');
-      const detachButton = detachButtons[0];
+      expect(screen.queryByTestId('node-target-doc-targetBody-Body')).toBeFalsy();
+      expect(screen.getAllByTestId('detach-schema-targetBody-Body-button')).toHaveLength(1);
+      const detachButton = screen.getByTestId('detach-schema-targetBody-Body-button');
       act(() => {
         fireEvent.click(detachButton);
       });

packages/ui/src/components/View/TargetPanel.tsx

@@ -50,13 +50,17 @@ export const TargetPanel: FunctionComponent = () => {
     return targetBodyTree.flatten(documentExpansionState);
   }, [targetBodyTree, documentExpansionState]);
 
+  const hasSchema = !targetBodyNodeData.isPrimitive;
+
+  const visibleNodes = useMemo(() => {
+    return hasSchema ? flattenedNodes.slice(1) : flattenedNodes;
+  }, [flattenedNodes, hasSchema]);
+
   // Recalculate connection ports when flattened nodes change (expand/collapse)
   // Also sync when mappingTree changes (new mappings added/removed)
   useEffect(() => {
     syncConnectionPorts();
-  }, [flattenedNodes.length, mappingTree, syncConnectionPorts]);
-
-  const hasSchema = !targetBodyNodeData.isPrimitive;
+  }, [visibleNodes.length, mappingTree, syncConnectionPorts]);
 
   const handleUpdate = useCallback(() => {
     refreshMappingTree();
@@ -91,17 +95,17 @@ export const TargetPanel: FunctionComponent = () => {
 
   const renderTargetItem = useCallback(
     (index: number) => {
-      const flattenedNode = flattenedNodes[index];
+      const flattenedNode = visibleNodes[index];
       return (
         <TargetDocumentNodeWithContextMenu
           key={flattenedNode.path}
           treeNode={flattenedNode.treeNode}
           documentId={targetBodyNodeData.id}
-          rank={flattenedNode.depth + 1}
+          rank={hasSchema ? flattenedNode.depth : flattenedNode.depth + 1}
         />
       );
     },
-    [flattenedNodes, targetBodyNodeData.id],
+    [hasSchema, targetBodyNodeData.id, visibleNodes],
   );
 
   // Actions for target body document
@@ -160,7 +164,7 @@ export const TargetPanel: FunctionComponent = () => {
         >
           {hasSchema && targetBodyTree && (
             <Virtuoso
-              totalCount={flattenedNodes.length}
+              totalCount={visibleNodes.length}
               components={virtuosoComponents}
               itemContent={renderTargetItem}
               overscan={VIRTUOSO_OVERSCAN}