Update js/utils.js

js/utils.js

@@ -1,5 +1,8 @@
 // Display directory structure
 function displayDirectoryStructure(tree) {
+    console.log("--- displayDirectoryStructure called ---");
+    console.log("Received tree:", JSON.parse(JSON.stringify(tree)));
+
     const container = document.getElementById('directoryStructure');
     container.innerHTML = '';
     const rootUl = document.createElement('ul');
@@ -11,13 +14,18 @@ function displayDirectoryStructure(tree) {
 
     // Sort the tree before processing
     tree.sort(sortContents);
+    console.log("Sorted tree:", JSON.parse(JSON.stringify(tree)));
 
     // Build directory structure
     tree.forEach(item => {
-        if (item.type !== 'blob') return; // Only process files to build the structure
+        // This was the problematic line. HF API only returns files. 
+        // We build the directory structure from file paths.
+        // if (item.type !== 'blob') return; 
         
+        console.log("Processing item:", item);
         item.path = item.path.startsWith('/') ? item.path : '/' + item.path;
         const pathParts = item.path.split('/');
+        console.log("Path parts:", pathParts);
         let currentLevel = directoryStructure;
 
         pathParts.forEach((part, index) => {
@@ -29,17 +37,23 @@ function displayDirectoryStructure(tree) {
         });
     });
 
+    console.log("Built directory structure object:", directoryStructure);
+
+
     function createTreeNode(name, item, parentUl) {
+        console.log(`Creating tree node for: ${name}`, "Item:", item);
         const li = document.createElement('li');
         const checkbox = document.createElement('input');
         checkbox.type = 'checkbox';
         checkbox.className = 'mr-2';
         
-        if (typeof item === 'object' && (!item.type || typeof item.type !== 'string')) {
+        if (typeof item === 'object' && item !== null && (!item.type || typeof item.type !== 'string')) {
             // Directory node
+            console.log(` -> Identified as DIRECTORY`);
             createDirectoryNode(li, checkbox, name, item, parentUl);
         } else {
             // File node
+            console.log(` -> Identified as FILE`);
             createFileNode(li, checkbox, name, item);
         }
 
@@ -63,7 +77,16 @@ function displayDirectoryStructure(tree) {
         ul.className = 'ml-6 mt-2';
         li.appendChild(ul);
         
-        for (const [childName, childItem] of Object.entries(item)) {
+        // Sort children: directories first, then files, then alphabetically
+        const sortedEntries = Object.entries(item).sort(([nameA, itemA], [nameB, itemB]) => {
+            const isDirA = typeof itemA === 'object' && itemA !== null && !itemA.type;
+            const isDirB = typeof itemB === 'object' && itemB !== null && !itemB.type;
+            if (isDirA && !isDirB) return -1;
+            if (!isDirA && isDirB) return 1;
+            return nameA.localeCompare(nameB);
+        });
+
+        for (const [childName, childItem] of sortedEntries) {
             createTreeNode(childName, childItem, ul);
         }