Skip to content

Commit

Permalink
Add dataset preview
Browse files Browse the repository at this point in the history
  • Loading branch information
@ibevers
ibevers committed Aug 20, 2024
1 parent 43c24a2 commit 8724f61
Showing 1 changed file with 202 additions and 0 deletions.
202 changes: 202 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GitHub Directory Viewer</title>
<style>
/* Basic styles for the file structure */
.file-structure {
list-style-type: none;
padding-left: 20px;
}

.file-structure li {
margin: 5px 0;
display: flex;
justify-content: space-between;
align-items: center;
}

.folder {
font-weight: bold;
cursor: pointer;
}

.file {
font-style: italic;
}

.description, .file-content {
margin-top: 20px;
padding: 10px;
border: 1px solid #ddd;
display: none; /* Hidden by default */
}

.explanation-button {
margin-left: 10px;
padding: 2px 5px;
font-size: 12px;
cursor: pointer;
}

/* Preserve whitespace and formatting */
.file-content pre {
white-space: pre-wrap; /* Preserve newlines and indents */
word-wrap: break-word; /* Handle long words and prevent overflow */
background-color: #f9f9f9;
padding: 10px;
border-radius: 5px;
overflow-x: auto; /* Add horizontal scroll if needed */
}
</style>
</head>
<body>
<h1>Bridge2AI Dataset Structure Preview</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
const commitHash = '945c5621180fc82dc010ed50f9651139099ece1b';

async function fetchGitHubRepoContents(repo, path = '', ref = commitHash) {
const url = `https://api.github.com/repos/${repo}/contents/${path}?ref=${ref}`;
console.log(`Fetching: ${url}`); // Debugging line
const response = await fetch(url);
if (!response.ok) {
console.error('Failed to fetch repository contents:', response.statusText);
document.getElementById('file-structure').textContent = `Error: ${response.statusText}`;
return [];
}
try {
const files = await response.json();
console.log('Fetched files:', files); // Debugging line
return files;
} catch (error) {
console.error('Failed to parse JSON:', error);
document.getElementById('file-structure').textContent = `Failed to parse JSON: ${error}`;
return [];
}
}

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}`;
}
}

const explanations = {
"CHANGES.md": "This file documents the changes, updates, and revisions made to the project over time.",
"README.md": "This file provides an overview of the project, including its purpose, structure, and usage instructions.",
"dataset_description.json": "This JSON file describes the dataset, including information such as the dataset's purpose, structure, and relevant metadata.",
"participants.json": "This JSON file contains metadata about the participants involved in the study, including demographic information and other relevant details.",
"participants.tsv": "This TSV file lists the participants involved in the study, along with their corresponding IDs and other relevant information.",
"phenotype": "The phenotype directory stores participant-specific data that is not directly related to specific audio tasks but is relevant for understanding participants' characteristics.",
"<measurement_tool_name>.json": "This JSON file provides metadata or additional information about the phenotype data collected using a specific measurement tool.",
"<measurement_tool_name>.tsv": "This TSV file contains phenotype data collected using a specific measurement tool.",
"sub-<participant_id>": "This directory contains data specific to an individual participant, organized by session.",
"ses-<another_participant_id>": "This directory contains session-specific data for another participant, including behavioral and voice data.",
"beh": "This directory contains behavioral data collected during the session.",
"sub-<participant_id>_ses-<session_id>_task-<task_name>_run-<index>_metadata.json": "This JSON file contains metadata about the behavioral task, including information such as task conditions and settings.",
"sub-<participant_id>_ses-<session_id>_task-<task_name>_run-<index>_response.json": "This JSON file contains the participant's responses for a specific task and run.",
"voice": "This directory contains voice data collected during the session.",
"sub-<participant_id>_ses-<session_id>_task-<task_name>_run-<index>_audio.wav": "This is the raw audio recording file for a specific task and run.",
"sub-<participant_id>_ses-<session_id>_task-<task_name>_run-<index>_features.pt": "This file contains extracted features from the audio recording, stored in a format suitable for further analysis.",
"sub-<participant_id>_ses-<session_id>_task-<task_name>_run-<index>_metadata.json": "This JSON file contains metadata about the audio recording, including information such as recording settings and conditions.",
"sub-<participant_id>_ses-<session_id>_task-<task_name>_run-<index>_transcript.txt": "This text file contains the transcript of the audio recording for a specific task and run.",
"sessions.tsv": "This TSV file lists all sessions for the participant, including session IDs and other relevant details."
};

async function toggleExplanation(file) {
const description = document.getElementById('description');
const fileContentBox = document.getElementById('file-content');

// Show the explanation
const customExplanation = explanations[file.name] || `Explanation for ${file.type}: ${file.name}`;
description.textContent = customExplanation;
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.innerHTML = `<pre>${content}</pre>`; // Preserve formatting and whitespace
fileContentBox.style.display = 'block';
} else {
fileContentBox.style.display = 'none';
}
}

document.addEventListener('DOMContentLoaded', async () => {
const repo = 'sensein/b2aiprep'; // The GitHub repository
const path = 'data/b2ai-data-bids-like-template'; // The specific directory path
const files = await fetchGitHubRepoContents(repo, path, commitHash);
if (files.length === 0) {
document.getElementById('file-structure').textContent = 'No files found or failed to load directory contents.';
} else {
const fileStructureContainer = document.getElementById('file-structure');
renderFiles(files, fileStructureContainer);
}
});

function renderFiles(files, container) {
container.innerHTML = '';
files.forEach(file => {
const li = document.createElement('li');
li.className = file.type === 'dir' ? 'folder' : 'file';

const textSpan = document.createElement('span');
textSpan.textContent = file.name;
textSpan.className = li.className;

const explanationButton = document.createElement('button');
explanationButton.textContent = 'Explanation';
explanationButton.className = 'explanation-button';
explanationButton.addEventListener('click', () => toggleExplanation(file));

li.appendChild(textSpan);
li.appendChild(explanationButton);

if (file.type === 'dir') {
textSpan.addEventListener('click', async () => {
const subFiles = await fetchGitHubRepoContents('sensein/b2aiprep', file.path, commitHash);
const ul = document.createElement('ul');
ul.className = 'file-structure';
renderFiles(subFiles, ul);
if (li.nextElementSibling && li.nextElementSibling.tagName === 'UL') {
li.parentNode.removeChild(li.nextElementSibling);
} else {
li.insertAdjacentElement('afterend', ul);
}
});
}

container.appendChild(li);
});
}

document.addEventListener('DOMContentLoaded', async () => {
const repo = 'sensein/b2aiprep'; // The GitHub repository
const path = 'data/b2ai-data-bids-like-template'; // The specific directory path
const files = await fetchGitHubRepoContents(repo, path, commitHash);
if (files.length === 0) {
document.getElementById('file-structure').textContent = 'No files found or failed to load directory contents.';
} else {
const fileStructureContainer = document.getElementById('file-structure');
renderFiles(files, fileStructureContainer);
}
});
</script>
</body>
</html>

0 comments on commit 8724f61

Please sign in to comment.