384 lines
18 KiB
HTML
384 lines
18 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Tripartite Synapse Model</title>
|
||
|
|
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
||
|
|
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
||
|
|
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="root"></div>
|
||
|
|
|
||
|
|
<script type="text/babel">
|
||
|
|
const { useState } = React;
|
||
|
|
|
||
|
|
// Simple icon components
|
||
|
|
const Play = () => (
|
||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
|
|
<polygon points="5 3 19 12 5 21 5 3"></polygon>
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
|
||
|
|
const Pause = () => (
|
||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
|
|
<rect x="6" y="4" width="4" height="16"></rect>
|
||
|
|
<rect x="14" y="4" width="4" height="16"></rect>
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
|
||
|
|
const RotateCcw = () => (
|
||
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
|
|
<polyline points="1 4 1 10 7 10"></polyline>
|
||
|
|
<path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
|
||
|
|
const TripartiteSynapseModel = () => {
|
||
|
|
const [timeScale, setTimeScale] = useState('milliseconds');
|
||
|
|
const [isPlaying, setIsPlaying] = useState(false);
|
||
|
|
const [time, setTime] = useState(0);
|
||
|
|
const [synapseType, setSynapseType] = useState('starter');
|
||
|
|
|
||
|
|
const timeScales = [
|
||
|
|
{ id: 'milliseconds', label: 'Milliseconds', duration: '1-100ms' },
|
||
|
|
{ id: 'seconds', label: 'Seconds to Minutes', duration: '1s-10min' },
|
||
|
|
{ id: 'hours', label: 'Hours to Days', duration: '1hr-24hr' },
|
||
|
|
{ id: 'lifetime', label: 'Lifetime', duration: 'Weeks-Years' }
|
||
|
|
];
|
||
|
|
|
||
|
|
const modelStates = {
|
||
|
|
milliseconds: {
|
||
|
|
starter: {
|
||
|
|
presynapse: {
|
||
|
|
title: "Short-Term Depression",
|
||
|
|
variables: ["Ca²⁺ residual: HIGH → LOW", "RRP: FULL → DEPLETED", "Pr: 0.8 → 0.95 (spike 1) → 0.2 (spike 2)"],
|
||
|
|
mechanism: "Nanodomain coupling + Vesicle depletion",
|
||
|
|
behavior: "Spike 1: Strong release. Spike 2-10: Weak/Silent"
|
||
|
|
},
|
||
|
|
postsynapse: {
|
||
|
|
title: "Receptor Response",
|
||
|
|
variables: ["AMPA activation: STRONG → Weak", "Depolarization: +15mV → +2mV"],
|
||
|
|
mechanism: "Reduced glutamate availability",
|
||
|
|
behavior: "Strong initial response, rapid decay"
|
||
|
|
},
|
||
|
|
astrocyte: {
|
||
|
|
title: "Glutamate Clearance",
|
||
|
|
variables: ["EAAT1/2 activity: RAPID uptake", "Glutamate: 1mM → 1µM in <5ms"],
|
||
|
|
mechanism: "High-speed vacuum (90% clearance)",
|
||
|
|
behavior: "Prevents spillover, maintains temporal precision"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
integrator: {
|
||
|
|
presynapse: {
|
||
|
|
title: "Short-Term Facilitation",
|
||
|
|
variables: ["Ca²⁺ residual: LOW → ACCUMULATING", "RRP: Full, untapped", "Pr: 0.1 → 0.3 → 0.7 (facilitation)"],
|
||
|
|
mechanism: "Ca²⁺ buffer saturation + Microdomain coupling",
|
||
|
|
behavior: "Spike 1: Fail. Spike 5-10: Massive release"
|
||
|
|
},
|
||
|
|
postsynapse: {
|
||
|
|
title: "Integrative Response",
|
||
|
|
variables: ["AMPA activation: Weak → STRONG", "NMDA: Mg²⁺ block removal"],
|
||
|
|
mechanism: "Temporal summation + voltage relief",
|
||
|
|
behavior: "Weak initially, explosive after pattern"
|
||
|
|
},
|
||
|
|
astrocyte: {
|
||
|
|
title: "Pattern Recognition",
|
||
|
|
variables: ["D-serine release: Increasing", "Ca²⁺ wave: Building"],
|
||
|
|
mechanism: "Sensing sustained glutamate",
|
||
|
|
behavior: "Primes NMDARs for integration"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
seconds: {
|
||
|
|
starter: {
|
||
|
|
presynapse: {
|
||
|
|
title: "Augmentation/Recovery",
|
||
|
|
variables: ["Munc13 activity: ↑ (Calmodulin)", "RRP refill rate: ACCELERATED", "Reserve pool → RRP"],
|
||
|
|
mechanism: "Ca²⁺-Calmodulin-Munc13 pathway",
|
||
|
|
behavior: "Faster recovery during bursts, maintains starter identity"
|
||
|
|
},
|
||
|
|
postsynapse: {
|
||
|
|
title: "Receptor Trafficking",
|
||
|
|
variables: ["AMPA lateral diffusion", "Receptor stabilization at PSD"],
|
||
|
|
mechanism: "CaMKII phosphorylation",
|
||
|
|
behavior: "Fine-tuning gain without changing timing logic"
|
||
|
|
},
|
||
|
|
astrocyte: {
|
||
|
|
title: "Lactate Shuttle",
|
||
|
|
variables: ["Glycogen → Lactate", "ATP supply to terminal"],
|
||
|
|
mechanism: "Metabolic support for Ca²⁺ pumps",
|
||
|
|
behavior: "Prevents energy depletion, sustains high Pr"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
integrator: {
|
||
|
|
presynapse: {
|
||
|
|
title: "PTP (Post-Tetanic Potentiation)",
|
||
|
|
variables: ["Reserve pool mobilization: ↑↑", "Pr: Sustained elevation", "VGCC phosphorylation"],
|
||
|
|
mechanism: "PKC activation, enhanced Ca²⁺ sensitivity",
|
||
|
|
behavior: "Remains integrator but with larger amplitude"
|
||
|
|
},
|
||
|
|
postsynapse: {
|
||
|
|
title: "Early LTP Induction",
|
||
|
|
variables: ["CaMKII activation", "AMPA insertion: Beginning", "Spine enlargement: +10-20%"],
|
||
|
|
mechanism: "NMDAR-dependent Ca²⁺ signaling",
|
||
|
|
behavior: "Gain increase, maintains integration logic"
|
||
|
|
},
|
||
|
|
astrocyte: {
|
||
|
|
title: "Gliotransmitter Release",
|
||
|
|
variables: ["D-serine, ATP release", "Ca²⁺ waves propagating"],
|
||
|
|
mechanism: "Metabotropic glutamate sensing",
|
||
|
|
behavior: "Amplifies synaptic strength regionally"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
hours: {
|
||
|
|
starter: {
|
||
|
|
presynapse: {
|
||
|
|
title: "Homeostatic Scaling",
|
||
|
|
variables: ["Pr: Global adjustment", "Active zone proteins: Remodeling", "VGCC density: Fine-tuning"],
|
||
|
|
mechanism: "Presynaptic homeostatic plasticity (PHP)",
|
||
|
|
behavior: "Maintains starter personality despite activity changes"
|
||
|
|
},
|
||
|
|
postsynapse: {
|
||
|
|
title: "Synaptic Downscaling",
|
||
|
|
variables: ["AMPA receptors: ↓ 20-30%", "Spine size: Normalization"],
|
||
|
|
mechanism: "Sleep-dependent homeostasis (SHY)",
|
||
|
|
behavior: "Reduces background noise, resets dynamic range"
|
||
|
|
},
|
||
|
|
astrocyte: {
|
||
|
|
title: "Glymphatic Clearance",
|
||
|
|
variables: ["Adenosine accumulation → clearance", "Metabolite washout", "K⁺ buffering reset"],
|
||
|
|
mechanism: "Sleep-enhanced extracellular space expansion",
|
||
|
|
behavior: "System-wide metabolic reset, prevents fog"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
integrator: {
|
||
|
|
presynapse: {
|
||
|
|
title: "Vesicle Pool Expansion",
|
||
|
|
variables: ["Reserve pool: +50-100%", "Synapsin scaffolding: ↑"],
|
||
|
|
mechanism: "Activity-dependent protein synthesis",
|
||
|
|
behavior: "Enhanced capacity for sustained signaling"
|
||
|
|
},
|
||
|
|
postsynapse: {
|
||
|
|
title: "Late LTP Consolidation",
|
||
|
|
variables: ["AMPA receptors: Stable ↑", "PSD size: +40-60%", "New protein synthesis"],
|
||
|
|
mechanism: "CREB-dependent gene transcription",
|
||
|
|
behavior: "Permanent gain increase, pattern memory solidified"
|
||
|
|
},
|
||
|
|
astrocyte: {
|
||
|
|
title: "Structural Remodeling",
|
||
|
|
variables: ["Process extension/retraction", "Synaptic coverage optimization"],
|
||
|
|
mechanism: "Activity-dependent morphological plasticity",
|
||
|
|
behavior: "Adjusts spatial filtering and metabolic support"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
lifetime: {
|
||
|
|
starter: {
|
||
|
|
presynapse: {
|
||
|
|
title: "Hard-Wired Identity",
|
||
|
|
variables: ["Nanodomain coupling: LOCKED", "RIM/Bassoon scaffold: Stable", "VGCC clustering: Dense"],
|
||
|
|
mechanism: "Developmental scaffolding proteins",
|
||
|
|
behavior: "Permanent starter architecture, resists conversion"
|
||
|
|
},
|
||
|
|
postsynapse: {
|
||
|
|
title: "Circuit Integration",
|
||
|
|
variables: ["Receptor subunit composition: Stable", "Spine morphology: Mature"],
|
||
|
|
mechanism: "Critical period closure",
|
||
|
|
behavior: "Locked into functional role in circuit"
|
||
|
|
},
|
||
|
|
astrocyte: {
|
||
|
|
title: "Territorial Establishment",
|
||
|
|
variables: ["Domain boundaries: Fixed", "Transporter expression: Optimized"],
|
||
|
|
mechanism: "Developmental tiling and competition",
|
||
|
|
behavior: "Stable metabolic support infrastructure"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
integrator: {
|
||
|
|
presynapse: {
|
||
|
|
title: "Microdomain Architecture",
|
||
|
|
variables: ["Loose VGCC-vesicle coupling: STABLE", "Large reserve pool: Maintained", "Ca²⁺ buffer density: High"],
|
||
|
|
mechanism: "Synapsin/scaffolding configuration",
|
||
|
|
behavior: "Permanent integrator identity, structural constraint"
|
||
|
|
},
|
||
|
|
postsynapse: {
|
||
|
|
title: "Memory Substrate",
|
||
|
|
variables: ["Enhanced PSD complexity", "Multi-synapse contacts"],
|
||
|
|
mechanism: "Experience-dependent structural consolidation",
|
||
|
|
behavior: "Encodes pattern memories in physical structure"
|
||
|
|
},
|
||
|
|
astrocyte: {
|
||
|
|
title: "Metabolic Specialization",
|
||
|
|
variables: ["Glycogen stores: Optimized", "Mitochondrial positioning"],
|
||
|
|
mechanism: "Long-term metabolic adaptation",
|
||
|
|
behavior: "Specialized support for high-demand synapses"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const currentState = modelStates[timeScale][synapseType];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="w-full max-w-6xl mx-auto p-6 bg-gradient-to-br from-slate-50 to-blue-50 rounded-lg">
|
||
|
|
<div className="mb-8">
|
||
|
|
<h1 className="text-3xl font-bold text-slate-800 mb-2">Tripartite Synapse Temporal Model</h1>
|
||
|
|
<p className="text-slate-600">Exploring presynapse, postsynapse, and astrocyte behavior across timescales</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-semibold text-slate-700 mb-2">Synapse Type</label>
|
||
|
|
<div className="flex gap-2">
|
||
|
|
<button
|
||
|
|
onClick={() => setSynapseType('starter')}
|
||
|
|
className={`flex-1 px-4 py-2 rounded-lg font-medium transition-all ${
|
||
|
|
synapseType === 'starter'
|
||
|
|
? 'bg-orange-500 text-white shadow-lg'
|
||
|
|
: 'bg-white text-slate-700 hover:bg-orange-50'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
Starter (High Pr)
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={() => setSynapseType('integrator')}
|
||
|
|
className={`flex-1 px-4 py-2 rounded-lg font-medium transition-all ${
|
||
|
|
synapseType === 'integrator'
|
||
|
|
? 'bg-blue-500 text-white shadow-lg'
|
||
|
|
: 'bg-white text-slate-700 hover:bg-blue-50'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
Integrator (Low Pr)
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<label className="block text-sm font-semibold text-slate-700 mb-2">Time Scale</label>
|
||
|
|
<select
|
||
|
|
value={timeScale}
|
||
|
|
onChange={(e) => setTimeScale(e.target.value)}
|
||
|
|
className="w-full px-4 py-2 rounded-lg border-2 border-slate-200 bg-white text-slate-700 font-medium focus:border-blue-400 focus:outline-none"
|
||
|
|
>
|
||
|
|
{timeScales.map(scale => (
|
||
|
|
<option key={scale.id} value={scale.id}>
|
||
|
|
{scale.label} ({scale.duration})
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
|
|
<div className="bg-white rounded-xl shadow-lg p-6 border-t-4 border-orange-400">
|
||
|
|
<div className="flex items-center gap-2 mb-4">
|
||
|
|
<div className="w-3 h-3 bg-orange-400 rounded-full"></div>
|
||
|
|
<h2 className="text-xl font-bold text-slate-800">Presynapse</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3 className="text-lg font-semibold text-orange-600 mb-3">
|
||
|
|
{currentState.presynapse.title}
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<div className="mb-4">
|
||
|
|
<p className="text-xs font-semibold text-slate-500 uppercase mb-2">Key Variables</p>
|
||
|
|
<ul className="space-y-1">
|
||
|
|
{currentState.presynapse.variables.map((v, i) => (
|
||
|
|
<li key={i} className="text-sm text-slate-700">• {v}</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mb-4">
|
||
|
|
<p className="text-xs font-semibold text-slate-500 uppercase mb-2">Mechanism</p>
|
||
|
|
<p className="text-sm text-slate-700">{currentState.presynapse.mechanism}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<p className="text-xs font-semibold text-slate-500 uppercase mb-2">Behavior</p>
|
||
|
|
<p className="text-sm text-slate-700 italic">{currentState.presynapse.behavior}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="bg-white rounded-xl shadow-lg p-6 border-t-4 border-blue-400">
|
||
|
|
<div className="flex items-center gap-2 mb-4">
|
||
|
|
<div className="w-3 h-3 bg-blue-400 rounded-full"></div>
|
||
|
|
<h2 className="text-xl font-bold text-slate-800">Postsynapse</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3 className="text-lg font-semibold text-blue-600 mb-3">
|
||
|
|
{currentState.postsynapse.title}
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<div className="mb-4">
|
||
|
|
<p className="text-xs font-semibold text-slate-500 uppercase mb-2">Key Variables</p>
|
||
|
|
<ul className="space-y-1">
|
||
|
|
{currentState.postsynapse.variables.map((v, i) => (
|
||
|
|
<li key={i} className="text-sm text-slate-700">• {v}</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mb-4">
|
||
|
|
<p className="text-xs font-semibold text-slate-500 uppercase mb-2">Mechanism</p>
|
||
|
|
<p className="text-sm text-slate-700">{currentState.postsynapse.mechanism}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<p className="text-xs font-semibold text-slate-500 uppercase mb-2">Behavior</p>
|
||
|
|
<p className="text-sm text-slate-700 italic">{currentState.postsynapse.behavior}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="bg-white rounded-xl shadow-lg p-6 border-t-4 border-emerald-400">
|
||
|
|
<div className="flex items-center gap-2 mb-4">
|
||
|
|
<div className="w-3 h-3 bg-emerald-400 rounded-full"></div>
|
||
|
|
<h2 className="text-xl font-bold text-slate-800">Astrocyte</h2>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3 className="text-lg font-semibold text-emerald-600 mb-3">
|
||
|
|
{currentState.astrocyte.title}
|
||
|
|
</h3>
|
||
|
|
|
||
|
|
<div className="mb-4">
|
||
|
|
<p className="text-xs font-semibold text-slate-500 uppercase mb-2">Key Variables</p>
|
||
|
|
<ul className="space-y-1">
|
||
|
|
{currentState.astrocyte.variables.map((v, i) => (
|
||
|
|
<li key={i} className="text-sm text-slate-700">• {v}</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mb-4">
|
||
|
|
<p className="text-xs font-semibold text-slate-500 uppercase mb-2">Mechanism</p>
|
||
|
|
<p className="text-sm text-slate-700">{currentState.astrocyte.mechanism}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<p className="text-xs font-semibold text-slate-500 uppercase mb-2">Behavior</p>
|
||
|
|
<p className="text-sm text-slate-700 italic">{currentState.astrocyte.behavior}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mt-8 bg-gradient-to-r from-slate-700 to-slate-800 rounded-xl p-6 text-white">
|
||
|
|
<h3 className="text-lg font-bold mb-3">Timescale Summary: {timeScales.find(s => s.id === timeScale)?.label}</h3>
|
||
|
|
<p className="text-slate-200">
|
||
|
|
{timeScale === 'milliseconds' && 'Fast temporal dynamics: Residual Ca²⁺ and vesicle depletion drive short-term plasticity. Astrocytes ensure temporal precision through rapid glutamate clearance.'}
|
||
|
|
{timeScale === 'seconds' && 'Augmentation phase: Munc13 activation and metabolic support enable sustained activity. Astrocytes provide lactate shuttle and gliotransmitter modulation.'}
|
||
|
|
{timeScale === 'hours' && 'Homeostatic regulation: Synaptic downscaling during sleep resets the system. Astrocytes perform glymphatic clearance to prevent metabolic fog.'}
|
||
|
|
{timeScale === 'lifetime' && 'Structural consolidation: Scaffolding proteins lock synaptic identity. Developmental programs establish permanent nanodomain vs microdomain coupling.'}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
ReactDOM.render(<TripartiteSynapseModel />, document.getElementById('root'));
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|