MW ${drug.mw} | LogP ${drug.logp} | ${(drug.proteinBinding*100).toFixed(0)}% bound
Select drugs to assess interaction severity.
`;
renderProps();
}
function runSimulation() {
const interaction = computeInteractions(selectedDrugs);
renderConcChart(interaction);
renderOccupancyChart(interaction);
renderMechanisms(interaction);
renderSeverity(interaction);
renderProps();
renderOrganEffects(interaction);
}
function renderConcChart(interaction) {
const canvas = document.getElementById('concCanvas');
const placeholder = document.getElementById('chartPlaceholder');
const badge = document.getElementById('chartBadge');
placeholder.style.display = 'none';
canvas.style.display = 'block';
badge.style.display = 'inline';
badge.textContent = `${selectedDrugs.length} drugs | 24h`;
const dpr = window.devicePixelRatio || 1;
const rect = canvas.parentElement.getBoundingClientRect();
const w = rect.width - 32;
const h = 360;
canvas.width = w * dpr;
canvas.height = h * dpr;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
const ctx = canvas.getContext('2d');
ctx.scale(dpr, dpr);
ctx.clearRect(0, 0, w, h);
const margin = {top:30, right:30, bottom:50, left:60};
const pw = w - margin.left - margin.right;
const ph = h - margin.top - margin.bottom;
// Background (transparent so warm dark parent shows through)
// ctx.fillStyle previously '#fafbfc', removed for dark-theme consistency
// Grid (warm low-contrast)
ctx.strokeStyle = 'rgba(244, 239, 230, 0.08)';
ctx.lineWidth = 0.5;
for (let i = 0; i <= 6; i++) {
const x = margin.left + (i / 6) * pw;
ctx.beginPath(); ctx.moveTo(x, margin.top); ctx.lineTo(x, margin.top + ph); ctx.stroke();
}
for (let i = 0; i <= 5; i++) {
const y = margin.top + (i / 5) * ph;
ctx.beginPath(); ctx.moveTo(margin.left, y); ctx.lineTo(margin.left + pw, y); ctx.stroke();
}
// Title
ctx.fillStyle = '#d5744f';
ctx.font = '600 12px Inter, system-ui, sans-serif';
ctx.fillText('Plasma Concentration vs Time', margin.left, margin.top - 12);
// Axes labels
ctx.fillStyle = 'rgba(244, 239, 230, 0.55)';
ctx.font = '500 10px Inter, system-ui, sans-serif';
ctx.textAlign = 'center';
for (let i = 0; i <= 6; i++) {
const hr = (i / 6) * 24;
ctx.fillText(hr + 'h', margin.left + (i / 6) * pw, margin.top + ph + 18);
}
ctx.fillText('Time (hours)', margin.left + pw / 2, margin.top + ph + 38);
ctx.textAlign = 'right';
ctx.fillText('Conc', margin.left - 8, margin.top - 2);
// Compute curves
let globalMax = 0;
const curves = [];
for (const pd of interaction.perDrug) {
const pts = computeConcCurve(pd.drug, pd.aucMultiplier, 24, 200);
for (const p of pts) {
globalMax = Math.max(globalMax, p.C_normal, p.C_interacted);
}
curves.push({ pts, drug: pd.drug, pd });
}
if (globalMax === 0) globalMax = 1;
// Draw curves
for (const curve of curves) {
const {pts, drug, pd} = curve;
// Normal curve (dashed, lighter)
ctx.strokeStyle = drug.color + '55';
ctx.lineWidth = 1.5;
ctx.setLineDash([4, 3]);
ctx.beginPath();
for (let i = 0; i < pts.length; i++) {
const x = margin.left + (pts[i].t / 24) * pw;
const y = margin.top + ph - (pts[i].C_normal / globalMax) * ph;
if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
}
ctx.stroke();
ctx.setLineDash([]);
// Interacted curve (solid)
ctx.strokeStyle = drug.color;
ctx.lineWidth = 2.5;
ctx.beginPath();
for (let i = 0; i < pts.length; i++) {
const x = margin.left + (pts[i].t / 24) * pw;
const y = margin.top + ph - (pts[i].C_interacted / globalMax) * ph;
if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
}
ctx.stroke();
}
// Legend
const lx = margin.left + 10;
let ly = margin.top + 16;
for (const curve of curves) {
ctx.fillStyle = curve.drug.color;
ctx.fillRect(lx, ly - 4, 16, 3);
ctx.fillStyle = '#f4efe6';
ctx.font = '600 10px Inter, system-ui, sans-serif';
ctx.textAlign = 'left';
const aucTxt = curve.pd.aucMultiplier > 1.05 ? ` (${curve.pd.aucMultiplier.toFixed(1)}x AUC)` : '';
ctx.fillText(`${curve.drug.name}${aucTxt}`, lx + 22, ly);
ly += 16;
}
// Dashed legend
ctx.strokeStyle = 'rgba(244, 239, 230, 0.45)';
ctx.lineWidth = 1.5;
ctx.setLineDash([4, 3]);
ctx.beginPath(); ctx.moveTo(lx, ly); ctx.lineTo(lx + 16, ly); ctx.stroke();
ctx.setLineDash([]);
ctx.fillStyle = 'rgba(244, 239, 230, 0.55)';
ctx.font = '400 9px Inter, system-ui, sans-serif';
ctx.fillText('Without interaction', lx + 22, ly + 1);
// Y-axis ticks
ctx.textAlign = 'right';
ctx.fillStyle = 'rgba(244, 239, 230, 0.55)';
ctx.font = '400 9px Inter, system-ui, sans-serif';
for (let i = 0; i <= 5; i++) {
const val = (globalMax * (1 - i/5)).toFixed(1);
ctx.fillText(val, margin.left - 6, margin.top + (i/5)*ph + 3);
}
}
function renderOccupancyChart(interaction) {
const section = document.getElementById('receptorSection');
section.style.display = 'block';
const canvas = document.getElementById('occCanvas');
const dpr = window.devicePixelRatio || 1;
const rect = canvas.parentElement.getBoundingClientRect();
const w = rect.width - 32;
const h = 260;
canvas.width = w * dpr;
canvas.height = h * dpr;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
const ctx = canvas.getContext('2d');
ctx.scale(dpr, dpr);
ctx.clearRect(0, 0, w, h);
const margin = {top:30, right:30, bottom:40, left:60};
const pw = w - margin.left - margin.right;
const ph = h - margin.top - margin.bottom;
ctx.strokeStyle = 'rgba(244, 239, 230, 0.08)';
ctx.lineWidth = 0.5;
for (let i = 0; i <= 6; i++) {
const x = margin.left + (i / 6) * pw;
ctx.beginPath(); ctx.moveTo(x, margin.top); ctx.lineTo(x, margin.top + ph); ctx.stroke();
}
for (let i = 0; i <= 5; i++) {
const y = margin.top + (i / 5) * ph;
ctx.beginPath(); ctx.moveTo(margin.left, y); ctx.lineTo(margin.left + pw, y); ctx.stroke();
}
ctx.fillStyle = '#d5744f';
ctx.font = '600 12px Inter, system-ui, sans-serif';
ctx.fillText('Receptor Occupancy (%)', margin.left, margin.top - 12);
ctx.textAlign = 'center';
ctx.fillStyle = 'rgba(244, 239, 230, 0.55)';
ctx.font = '500 10px Inter, system-ui, sans-serif';
for (let i = 0; i <= 6; i++) {
ctx.fillText((i/6*24)+'h', margin.left + (i/6)*pw, margin.top + ph + 18);
}
ctx.textAlign = 'right';
for (let i = 0; i <= 5; i++) {
ctx.fillText((100 - i*20)+'%', margin.left - 6, margin.top + (i/5)*ph + 3);
}
for (const pd of interaction.perDrug) {
const pts = computeOccupancy(pd.drug, pd.aucMultiplier, 24, 200);
// Normal
ctx.strokeStyle = pd.drug.color + '44';
ctx.lineWidth = 1.5;
ctx.setLineDash([4, 3]);
ctx.beginPath();
for (let i = 0; i < pts.length; i++) {
const x = margin.left + (pts[i].t / 24) * pw;
const y = margin.top + ph - (pts[i].occ_normal / 100) * ph;
if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
}
ctx.stroke();
ctx.setLineDash([]);
// Interacted
ctx.strokeStyle = pd.drug.color;
ctx.lineWidth = 2;
ctx.beginPath();
for (let i = 0; i < pts.length; i++) {
const x = margin.left + (pts[i].t / 24) * pw;
const y = margin.top + ph - (pts[i].occ_interacted / 100) * ph;
if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
}
ctx.stroke();
}
// Legend
let ly = margin.top + 16;
const lx = margin.left + pw - 150;
for (const pd of interaction.perDrug) {
ctx.fillStyle = pd.drug.color;
ctx.fillRect(lx, ly - 4, 12, 3);
ctx.fillStyle = '#f4efe6';
ctx.font = '500 9px Inter, system-ui, sans-serif';
ctx.textAlign = 'left';
ctx.fillText(pd.drug.name, lx + 16, ly);
ly += 14;
}
}
function renderMechanisms(interaction) {
const el = document.getElementById('mechanismContent');
if (interaction.pairs.length === 0) {
el.innerHTML = `';
// CYP mechanisms
for (const pair of interaction.pairs) {
const allCYP = [...pair.cypDetailsA, ...pair.cypDetailsB];
for (const cyp of allCYP) {
html += `
⚙
CYP Enzyme Inhibition: ${cyp.enzyme}
${cyp.inhibitor} inhibits ${cyp.enzyme}, which metabolizes ${cyp.inhibited}.
This reduces ${cyp.inhibited} clearance by ${(cyp.fraction*100).toFixed(0)}%, increasing AUC by ${(cyp.aucFactor).toFixed(1)}x.
AUC_new = AUC_base / (1 - ${cyp.fraction.toFixed(2)}) = ${cyp.aucFactor.toFixed(2)}x
`;
}
// P-gp mechanism
const hasPgpa = pair.mechanismsA.includes('P-gp inhibition');
const hasPgpB = pair.mechanismsB.includes('P-gp inhibition');
if (hasPgpa || hasPgpB) {
const inhibitor = hasPgpa ? pair.drugA : pair.drugB;
const substrate = hasPgpa ? pair.drugB : pair.drugA;
html += `
▶
P-glycoprotein Inhibition
${inhibitor.name} inhibits P-gp transport, reducing efflux of ${substrate.name}.
This increases absorption and decreases renal/biliary clearance, raising systemic exposure ~1.6x.
CL_pgpgp_inhibited = CL_pgp * (1 - f_inhibit)
`;
}
// Protein displacement
if (pair.freeFractionIncreaseA > 0.02 || pair.freeFractionIncreaseB > 0.02) {
const displaced = pair.freeFractionIncreaseA > pair.freeFractionIncreaseB ? pair.drugA : pair.drugB;
const displacer = pair.freeFractionIncreaseA > pair.freeFractionIncreaseB ? pair.drugB : pair.drugA;
const increase = Math.max(pair.freeFractionIncreaseA, pair.freeFractionIncreaseB);
html += `
◆
Plasma Protein Binding Displacement
${displacer.name} (LogP ${displacer.logp}, ${(displacer.proteinBinding*100).toFixed(0)}% bound) displaces ${displaced.name} (LogP ${displaced.logp}, ${(displaced.proteinBinding*100).toFixed(0)}% bound) from albumin binding sites.
Free fraction of ${displaced.name} increases by ~${(increase*100).toFixed(0)}%, amplifying its pharmacological effect.
f_free_new = f_free_base + displacement = ${(displaced.proteinBinding < 1 ? ((1-displaced.proteinBinding) + increase)*100 : increase*100).toFixed(1)}%
`;
}
}
// PD additive effects
for (const pd of interaction.pdEffects) {
if (pd.risk === 'low') continue;
html += `
⚡
Additive Pharmacodynamic Effect: ${pd.system}
${pd.drugs.join(' + ')} both affect the ${pd.system}. Combined effect computed via ${pd.model}: E = ${(pd.combinedEffect*100).toFixed(0)}% (illustrative signal: ${pd.risk}).
E_comb = E_A + E_B - E_A * E_B = ${(pd.combinedEffect*100).toFixed(0)}%
`;
}
// If no mechanisms found
if (!html.includes('mech-card')) {
html += `
No mechanism crossed the display threshold in this simplified model. Real interactions may be absent from the model.
`;
}
html += '
Selected drug properties will appear here.
`;
return;
}
let html = '';
for (const drug of selectedDrugs) {
const cypTags = [
...drug.cypSubstrates.map(s => `
${drug.name}
MW${drug.mw} Da
LogP${drug.logp}
Protein Binding${(drug.proteinBinding*100).toFixed(0)}%
Half-life${drug.halfLife} h
T_max${drug.tmax} h
Bioavailability${(drug.bioavailability*100).toFixed(0)}%
Therapeutic Index${drug.therapeuticIndex}
CYP / Transporter Profile
${cypTags}
Organ Effects
${drug.organEffects.join(', ')}
`;
}
el.innerHTML = html;
}
function renderOrganEffects(interaction) {
const el = document.getElementById('organEffects');
if (interaction.pdEffects.length === 0) {
el.innerHTML = 'No additive organ effects detected.
';
return;
}
// Monochrome line glyphs (inherit white/coral text color) instead of color emoji
const icons = {
'Coagulation System':'✚',
'Cardiovascular System':'♥︎',
'Central Nervous System':'❖',
'Gastrointestinal System':'▣',
'Musculoskeletal System':'◆',
'Hepatic System':'◉',
'Renal System':'⬡',
'Thyroid':'✦'
};
el.innerHTML = interaction.pdEffects.map(e => `