Add box for rendering file contents

sensein · Aug 20, 2024 · 919c07e · 919c07e
1 parent 3723190
commit 919c07e
Showing 1 changed file with 33 additions and 11 deletions.
diff --git a/data/b2ai-data-preview/index.html b/data/b2ai-data-preview/index.html
@@ -27,7 +27,7 @@
             font-style: italic;
         }
 
-        .description {
+        .description, .file-content {
             margin-top: 20px;
             padding: 10px;
             border: 1px solid #ddd;
@@ -43,10 +43,11 @@
     </style>
 </head>
 <body>
-    <h1>Bridge2AI Dataset Preview</h1>
+    <h1>GitHub Directory Viewer</h1>
     <ul id="file-structure" class="file-structure"></ul>
 
     <div id="description" class="description"></div>
+    <div id="file-content" class="file-content"></div>
 
     <script>
         // Commit hash to be used in API requests
@@ -72,10 +73,36 @@ <h1>Bridge2AI Dataset Preview</h1>
             }
         }
 
-        function toggleExplanation(name, type) {
+        async function fetchFileContent(url) {
+            try {
+                const response = await fetch(url);
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch file content: ${response.statusText}`);
+                }
+                const content = await response.text();
+                return content;
+            } catch (error) {
+                console.error('Error fetching file content:', error);
+                return `Error fetching file content: ${error}`;
+            }
+        }
+
+        async function toggleExplanation(file) {
             const description = document.getElementById('description');
-            description.textContent = `Explanation for ${type}: ${name}`;
-            description.style.display = description.style.display === 'block' ? 'none' : 'block';
+            const fileContentBox = document.getElementById('file-content');
+
+            // Show the explanation
+            description.textContent = `Explanation for ${file.type}: ${file.name}`;
+            description.style.display = 'block';
+
+            // Show the file content if it's a file
+            if (file.type === 'file') {
+                const content = await fetchFileContent(file.download_url);
+                fileContentBox.textContent = `Contents of ${file.name}:\n\n${content}`;
+                fileContentBox.style.display = 'block';
+            } else {
+                fileContentBox.style.display = 'none';
+            }
         }
 
         function renderFiles(files, container) {
@@ -91,7 +118,7 @@ <h1>Bridge2AI Dataset Preview</h1>
                 const explanationButton = document.createElement('button');
                 explanationButton.textContent = 'Explanation';
                 explanationButton.className = 'explanation-button';
-                explanationButton.addEventListener('click', () => toggleExplanation(file.name, file.type));
+                explanationButton.addEventListener('click', () => toggleExplanation(file));
 
                 li.appendChild(textSpan);
                 li.appendChild(explanationButton);
@@ -108,11 +135,6 @@ <h1>Bridge2AI Dataset Preview</h1>
                             li.insertAdjacentElement('afterend', ul);
                         }
                     });
-                } else {
-                    textSpan.addEventListener('click', () => {
-                        document.getElementById('description').textContent = `File: ${file.name}\nType: ${file.type}\nURL: ${file.html_url}`;
-                        document.getElementById('description').style.display = 'block';
-                    });
                 }
 
                 container.appendChild(li);