| |
| const timelineData = [ |
| { |
| year: 1900, |
| title: "SSA begins tracking mortality data", |
| description: "Social Security Administration's Office of the Chief Actuary begins tracking historical death probabilities.", |
| category: "policy" |
| }, |
| { |
| year: 1984, |
| title: "Social Security disability standards updated", |
| description: "Amendments mandate development of new disability standards for mental disorders.", |
| category: "policy" |
| }, |
| { |
| year: 1991, |
| title: "Corpus callosum findings in ADHD", |
| description: "Hynd et al. identify smaller corpus callosum in children with ADHD.", |
| category: "neuroimaging" |
| }, |
| { |
| year: 2002, |
| title: "Brain volume reductions in ADHD", |
| description: "Castellanos et al. find significant reductions in cerebral and cerebellar volumes in children with ADHD.", |
| category: "neuroimaging" |
| }, |
| { |
| year: 2007, |
| title: "Cortical thickness delay in ADHD", |
| description: "Shaw et al. demonstrate children with ADHD reach peak cortical thickness ~3 years later.", |
| category: "neuroimaging" |
| }, |
| { |
| year: 2017, |
| title: "Brain volume confirmation", |
| description: "Hoogman et al. confirm smaller brain volumes in ADHD through mega-analysis.", |
| category: "neuroimaging" |
| }, |
| { |
| year: 2019, |
| title: "27 genome-wide significant risk loci", |
| description: "Demontis et al. identify genetic associations with ADHD.", |
| category: "genetics" |
| }, |
| { |
| year: 2021, |
| title: "International Consensus Statement", |
| description: "Faraone et al. publish comprehensive review affirming ADHD as valid diagnosis.", |
| category: "treatment" |
| }, |
| { |
| year: 2024, |
| title: "Brain connectivity findings", |
| description: "Norman et al. re-analyze fMRI data revealing altered connections in ADHD.", |
| category: "neuroimaging" |
| } |
| ]; |
|
|
| |
| const researchersData = [ |
| { |
| name: "Castellanos et al.", |
| contribution: "Longitudinal brain volume studies in ADHD", |
| category: "neuroimaging" |
| }, |
| { |
| name: "Shaw et al.", |
| contribution: "Cortical maturation delay in ADHD", |
| category: "neuroimaging" |
| }, |
| { |
| name: "Hoogman et al.", |
| contribution: "Mega-analyses of brain structure in ADHD", |
| category: "neuroimaging" |
| }, |
| { |
| name: "Demontis et al.", |
| contribution: "Genome-wide association studies in ADHD", |
| category: "genetics" |
| }, |
| { |
| name: "Faraone et al.", |
| contribution: "International consensus statements on ADHD", |
| category: "treatment" |
| } |
| ]; |
|
|
| |
| const casesData = [ |
| { |
| name: "Caustin Lee McLaughlin", |
| description: "Case study illustrating genetic profile and disability claims process", |
| category: "policy" |
| }, |
| { |
| name: "Shelley C. v. SSA", |
| description: "Landmark case reversing SSA's denial of ADHD disability benefits", |
| category: "policy" |
| } |
| ]; |
|
|
| |
| document.addEventListener('DOMContentLoaded', function() { |
| renderTimeline(); |
| renderResearchers(); |
| renderCases(); |
| setupFilterButtons(); |
| }); |
|
|
| function renderTimeline() { |
| const container = document.getElementById('timeline-items'); |
| |
| timelineData.sort((a, b) => a.year - b.year).forEach(item => { |
| const itemElement = document.createElement('div'); |
| itemElement.className = `timeline-item ${item.category}`; |
| |
| itemElement.innerHTML = ` |
| <div class="timeline-dot"></div> |
| <div class="bg-white p-6 rounded-lg shadow-md relative card-hover transition-all duration-300"> |
| <div class="absolute -left-2 top-6 w-4 h-4 bg-indigo-600 transform rotate-45"></div> |
| <div class="flex items-center mb-2"> |
| <span class="inline-block px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm font-medium">${item.year}</span> |
| <span class="ml-2 px-2 py-1 bg-gray-100 text-gray-800 rounded-full text-xs font-medium">${item.category}</span> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">${item.title}</h3> |
| <p class="text-gray-600">${item.description}</p> |
| </div> |
| `; |
| |
| container.appendChild(itemElement); |
| }); |
| } |
|
|
| function renderResearchers() { |
| const container = document.getElementById('researchers-list'); |
| |
| researchersData.forEach(researcher => { |
| const itemElement = document.createElement('div'); |
| itemElement.className = `researcher-item ${researcher.category} bg-gray-50 p-4 rounded-lg`; |
| |
| itemElement.innerHTML = ` |
| <h4 class="font-bold text-indigo-700">${researcher.name}</h4> |
| <p class="text-gray-600 text-sm">${researcher.contribution}</p> |
| <span class="inline-block mt-2 px-2 py-1 bg-indigo-100 text-indigo-800 rounded-full text-xs font-medium">${researcher.category}</span> |
| `; |
| |
| container.appendChild(itemElement); |
| }); |
| } |
|
|
| function renderCases() { |
| const container = document.getElementById('cases-list'); |
| |
| casesData.forEach(caseItem => { |
| const itemElement = document.createElement('div'); |
| itemElement.className = `case-item ${caseItem.category} bg-gray-50 p-4 rounded-lg`; |
| |
| itemElement.innerHTML = ` |
| <h4 class="font-bold text-indigo-700">${caseItem.name}</h4> |
| <p class="text-gray-600 text-sm">${caseItem.description}</p> |
| <span class="inline-block mt-2 px-2 py-1 bg-indigo-100 text-indigo-800 rounded-full text-xs font-medium">${caseItem.category}</span> |
| `; |
| |
| container.appendChild(itemElement); |
| }); |
| } |
|
|
| function setupFilterButtons() { |
| const filterButtons = document.querySelectorAll('.filter-btn'); |
| |
| filterButtons.forEach(button => { |
| button.addEventListener('click', function() { |
| |
| filterButtons.forEach(btn => btn.classList.remove('active', 'bg-indigo-600', 'text-white')); |
| filterButtons.forEach(btn => btn.classList.add('bg-gray-200', 'text-gray-700')); |
| this.classList.add('active', 'bg-indigo-600', 'text-white'); |
| this.classList.remove('bg-gray-200', 'text-gray-700'); |
| |
| |
| const category = this.dataset.category; |
| filterItems(category); |
| }); |
| }); |
| } |
|
|
| function filterItems(category) { |
| const timelineItems = document.querySelectorAll('.timeline-item'); |
| const researcherItems = document.querySelectorAll('.researcher-item'); |
| const caseItems = document.querySelectorAll('.case-item'); |
| |
| if (category === 'all') { |
| timelineItems.forEach(item => item.style.display = 'block'); |
| researcherItems.forEach(item => item.style.display = 'block'); |
| caseItems.forEach(item => item.style.display = 'block'); |
| return; |
| } |
| |
| timelineItems.forEach(item => { |
| item.style.display = item.classList.contains(category) ? 'block' : 'none'; |
| }); |
| |
| researcherItems.forEach(item => { |
| item.style.display = item.classList.contains(category) ? 'block' : 'none'; |
| }); |
| |
| caseItems.forEach(item => { |
| item.style.display = item.classList.contains(category) ? 'block' : 'none'; |
| }); |
| } |
