Updated Dataset Builder UI for nesting of Datapoints.

components/LCPDatasetBuilder.js

@@ -63,8 +63,21 @@ const DatasetItem = ({ item, datasetKey, moveItem, updateItem, items }) => {
     // Get child items
     const childItems = items.filter(i => i.parent === item.id);
 
+    // Calculate the nesting level
+    const getItemDepth = (itemId) => {
+        let depth = 0;
+        let currentItem = items.find(i => i.id === itemId);
+        while (currentItem && currentItem.parent) {
+            depth++;
+            currentItem = items.find(i => i.id === currentItem.parent);
+        }
+        return depth;
+    };
+
+    const depth = getItemDepth(item.id);
+
     const style = {
-        marginLeft: item.parent ? '20px' : '0',
+        marginLeft: `${depth * 20}px`, // 20px indentation per level
         opacity: isDragging ? 0.5 : 1,
         cursor: 'move',
         background: isOver ? '#f0f0f0' : 'white',