|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
|
<title>FDA’s CTP | ToxRAI</title> |
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> |
|
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<style> |
|
|
:root{ |
|
|
--bg:#0b1220; |
|
|
--panel:#0f172a; |
|
|
--card:#ffffff; |
|
|
--text:#e5e7eb; |
|
|
--muted:#94a3b8; |
|
|
--ring:#1f2937; |
|
|
--radius:16px; |
|
|
} |
|
|
html,body{height:100%} |
|
|
body{ |
|
|
margin:0; |
|
|
font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif; |
|
|
background:linear-gradient(180deg, #0a0f1e 0%, #0b1220 100%); |
|
|
color:var(--text); |
|
|
} |
|
|
.container{max-width:1200px;margin:0 auto;padding:24px} |
|
|
header{ |
|
|
position:sticky; top:0; z-index:50; |
|
|
background:rgba(11,18,32,0.75); backdrop-filter:saturate(120%) blur(10px); |
|
|
border-bottom:1px solid #1f2937; |
|
|
} |
|
|
.nav{display:flex; align-items:center; gap:18px; padding:14px 0;} |
|
|
.nav .logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text)} |
|
|
.nav .logo img{height:40px; width:auto} |
|
|
.nav .spacer{flex:1} |
|
|
.nav a{ |
|
|
color:var(--muted); |
|
|
text-decoration:none; |
|
|
font-weight:600; |
|
|
padding:8px 12px; |
|
|
border-radius:10px; |
|
|
} |
|
|
.nav a:hover{color:#fff; background:#0e172a; border:1px solid #1e293b} |
|
|
.nav a.active{color:#fff; background:#0e172a; border:1px solid #1e293b} |
|
|
main{padding:32px 0} |
|
|
.hero{display:flex; flex-direction:column; gap:10px; margin-bottom:22px;} |
|
|
.hero h1{margin:0; font-size:28px; letter-spacing:0.2px} |
|
|
.hero p{margin:0; color:var(--muted)} |
|
|
.panel{ |
|
|
background:var(--panel); |
|
|
border:1px solid var(--ring); |
|
|
border-radius:var(--radius); |
|
|
padding:22px; |
|
|
box-shadow:0 8px 30px rgba(0,0,0,.25); |
|
|
} |
|
|
.ctp-card{ |
|
|
background:#fff; |
|
|
color:#111827; |
|
|
border:1px solid #e5e7eb; |
|
|
border-radius:var(--radius); |
|
|
margin-top:14px; |
|
|
} |
|
|
.inner-pad{ padding: 20px; } |
|
|
footer{color:var(--muted); font-size:12px; padding:24px 0; text-align:center} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<header> |
|
|
<div class="container nav"> |
|
|
<a class="logo" href="/"> |
|
|
<img src="/assets/logo.png" alt="Logo" onerror="this.style.display='none'"> |
|
|
<strong>ToxRAI</strong> |
|
|
</a> |
|
|
<div class="spacer"></div> |
|
|
<nav> |
|
|
<a href="/">Home</a> |
|
|
<a href="/blog">Blog</a> |
|
|
<a class="active" href="/fda-ctp">FDA’s CTP</a> |
|
|
</nav> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="container"> |
|
|
<div class="hero"> |
|
|
<h1>FDA’s Center for Tobacco Products</h1> |
|
|
<p>This page hosts your interactive ENDS genotoxicity/carcinogenicity tiering flowchart.</p> |
|
|
</div> |
|
|
|
|
|
<section class="panel"> |
|
|
<h2 style="margin-top:0">Interactive Genotoxicity Tiering Flowchart for ENDS Constituents</h2> |
|
|
|
|
|
<div class="ctp-card" id="ctp-slot"> |
|
|
<div class="inner-pad"> |
|
|
|
|
|
<div class="text-center mb-6"> |
|
|
<p class="mt-2 text-lg text-gray-700"> |
|
|
Based on FDA’s Weight of Evidence (WOE) approach. Click any box to see a simple explanation. |
|
|
</p> |
|
|
</div> |
|
|
<div class="flex justify-center my-4 flex-wrap gap-4 text-gray-800"> |
|
|
<div class="flex items-center"><div class="w-4 h-4 rounded-full mr-2" style="background-color: #fed7aa;"></div><span>Tier 1–3</span></div> |
|
|
<div class="flex items-center"><div class="w-4 h-4 rounded-full mr-2" style="background-color: #fde68a;"></div><span>Tier 4 (Potential Hazard)</span></div> |
|
|
<div class="flex items-center"><div class="w-4 h-4 rounded-full mr-2" style="background-color: #dcfce7;"></div><span>Tier 5 (Unlikely Hazard)</span></div> |
|
|
<div class="flex items-center"><div class="w-4 h-4 rounded-full mr-2" style="background-color: #fecaca;"></div><span>Include in Cancer Risk Calc.</span></div> |
|
|
<div class="flex items-center"><div class="w-4 h-4 rounded-full mr-2" style="background-color: #a7f3d0;"></div><span>Exclude from Cancer Risk Calc.</span></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="zoom-toolbar" class="flex justify-end items-center gap-2 mb-2 text-gray-800"> |
|
|
<button id="zoom-fit" class="px-3 py-1 rounded border border-gray-300 bg-white hover:bg-gray-50">Fit</button> |
|
|
<button id="zoom-out" class="px-3 py-1 rounded border border-gray-300 bg-white hover:bg-gray-50">−</button> |
|
|
<button id="zoom-in" class="px-3 py-1 rounded border border-gray-300 bg-white hover:bg-gray-50">+</button> |
|
|
<button id="zoom-reset" class="px-3 py-1 rounded border border-gray-300 bg-white hover:bg-gray-50">100%</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<style> |
|
|
|
|
|
#ctp-slot .tree-wrapper { |
|
|
width:100%; |
|
|
overflow:auto; |
|
|
padding:12px; |
|
|
max-height: calc(100vh - 320px); |
|
|
border: 1px solid #e5e7eb; |
|
|
border-radius: 10px; |
|
|
background: #ffffff; |
|
|
} |
|
|
#ctp-slot #tree-scale { transform-origin: 0 0; } |
|
|
|
|
|
#ctp-slot .tree { display:inline-block; white-space:nowrap; padding:0 1rem; } |
|
|
#ctp-slot .tree ul { padding-top:20px; position:relative; transition:all .5s; } |
|
|
#ctp-slot .tree li { |
|
|
display:inline-block; text-align:center; list-style:none; |
|
|
position:relative; padding:20px 10px 0; vertical-align:top; |
|
|
} |
|
|
#ctp-slot .tree li::before, #ctp-slot .tree li::after { |
|
|
content:''; position:absolute; top:0; right:50%; |
|
|
border-top:2px solid #9ca3af; width:50%; height:20px; |
|
|
} |
|
|
#ctp-slot .tree li::after { right:auto; left:50%; border-left:2px solid #9ca3af; } |
|
|
#ctp-slot .tree li:only-child::after, #ctp-slot .tree li:only-child::before { display:none; } |
|
|
#ctp-slot .tree li:only-child { padding-top:0; } |
|
|
#ctp-slot .tree li:first-child::before, #ctp-slot .tree li:last-child::after { border:0 none; } |
|
|
#ctp-slot .tree li:last-child::before { border-right:2px solid #9ca3af; border-radius:0 5px 0 0; } |
|
|
#ctp-slot .tree li:first-child::after { border-radius:5px 0 0 0; } |
|
|
#ctp-slot .tree ul ul::before { content:''; position:absolute; top:0; left:50%; border-left:2px solid #9ca3af; width:0; height:20px; } |
|
|
#ctp-slot .tree li .node { display:inline-block; } |
|
|
|
|
|
#ctp-slot .decision-text { |
|
|
position:absolute; top:-5px; font-size:.875rem; font-weight:600; |
|
|
color:#4b5563; background:#fff; padding:0 4px; |
|
|
} |
|
|
#ctp-slot .decision-text.yes { left:25%; } |
|
|
#ctp-slot .decision-text.no { right:25%; } |
|
|
#ctp-slot li > .node + ul > li > .node { margin-top:10px; } |
|
|
|
|
|
#ctp-slot .node { |
|
|
padding:1rem 1.5rem; border-radius:.75rem; text-align:center; |
|
|
box-shadow:0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); |
|
|
cursor:pointer; transition:transform .2s, box-shadow .2s; |
|
|
border:1px solid rgba(0,0,0,.1); min-width:280px; max-width:320px; |
|
|
white-space:normal; word-wrap:break-word; line-height:1.5; color:#111827; background:#fff; |
|
|
} |
|
|
#ctp-slot .node:hover { transform:translateY(-3px); box-shadow:0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -2px rgb(0 0 0 / .1); } |
|
|
#ctp-slot .node-start { background:#e0e7ff; color:#3730a3; border-color:#c7d2fe; } |
|
|
#ctp-slot .node-decision{ background:#fef9c3; color:#854d0e; border-color:#fef08a; } |
|
|
#ctp-slot .node-tier123 { background:#fed7aa; color:#9a3412; border-color:#fdba74; } |
|
|
#ctp-slot .node-tier4 { background:#fde68a; color:#a16207; border-color:#facc15; } |
|
|
#ctp-slot .node-tier5 { background:#dcfce7; color:#166534; border-color:#bbf7d0; } |
|
|
#ctp-slot .node-elcr-in { background:#fecaca; color:#991b1b; border-color:#f87171; font-weight:600; } |
|
|
#ctp-slot .node-elcr-out{ background:#a7f3d0; color:#065f46; border-color:#6ee7b7; font-weight:600; } |
|
|
|
|
|
|
|
|
#ctp-slot .modal-overlay { |
|
|
position:fixed; inset:0; background:rgba(0,0,0,.5); |
|
|
display:flex; justify-content:center; align-items:center; z-index:1000; |
|
|
opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; |
|
|
} |
|
|
#ctp-slot .modal-overlay.active { opacity:1; visibility:visible; } |
|
|
#ctp-slot .modal-content { |
|
|
background:#fff; padding:2rem; border-radius:.75rem; |
|
|
max-width:600px; width:90%; max-height:90vh; overflow-y:auto; |
|
|
transform:scale(.95); transition:transform .3s; |
|
|
} |
|
|
#ctp-slot .modal-overlay.active .modal-content { transform:scale(1); } |
|
|
#ctp-slot .modal-title { font-size:1.5rem; font-weight:700; margin-bottom:1rem; color:#111827; } |
|
|
#ctp-slot .modal-body p { margin-bottom:1rem; color:#374151; } |
|
|
#ctp-slot .modal-body strong { color:#1e3a8a; } |
|
|
|
|
|
|
|
|
@media (max-width: 900px) { |
|
|
#ctp-slot .node { min-width: 240px; max-width: 280px; } |
|
|
} |
|
|
</style> |
|
|
|
|
|
<div class="tree-wrapper"> |
|
|
<div id="tree-scale"> |
|
|
<div class="tree"> |
|
|
<ul> |
|
|
<li> |
|
|
<div id="start" class="node node-start"><strong>Start:</strong> Identify a constituent in an ENDS product</div> |
|
|
<ul> |
|
|
<li> |
|
|
<div id="decision-iarc-epa" class="node node-decision">Has the constituent been evaluated for carcinogenicity by IARC or EPA?</div> |
|
|
<ul> |
|
|
<li> |
|
|
<span class="decision-text yes">YES</span> |
|
|
<div id="tier123" class="node node-tier123"><strong>Tier 1, 2, or 3</strong><br>Based on IARC/EPA classification</div> |
|
|
<ul><li><div id="elcr-in-1" class="node node-elcr-in">Include in ELCR Calculation</div></li></ul> |
|
|
</li> |
|
|
<li> |
|
|
<span class="decision-text no">NO</span> |
|
|
<div id="decision-vivo" class="node node-decision">Is there a positive result from an <em>in vivo</em> (live animal) genotoxicity or carcinogenicity study?</div> |
|
|
<ul> |
|
|
<li> |
|
|
<span class="decision-text yes">YES</span> |
|
|
<div id="tier4a" class="node node-tier4"><strong>Tier 4A:</strong> Positive <em>in vivo</em> evidence</div> |
|
|
<ul><li><div id="elcr-in-2" class="node node-elcr-in">Include in ELCR Calculation</div></li></ul> |
|
|
</li> |
|
|
<li> |
|
|
<span class="decision-text no">NO</span> |
|
|
<div id="decision-ames" class="node node-decision">Positive Ames test (<em>in vitro</em> or <em>in silico</em>) for mutagenicity?</div> |
|
|
<ul> |
|
|
<li> |
|
|
<span class="decision-text yes">YES</span> |
|
|
<div id="tier4b" class="node node-tier4"><strong>Tier 4B:</strong> Mutagenicity concern</div> |
|
|
<ul><li><div id="elcr-potential-1" class="node node-elcr-in">Potentially in ELCR (Follow-up needed)</div></li></ul> |
|
|
</li> |
|
|
<li> |
|
|
<span class="decision-text no">NO</span> |
|
|
<div id="decision-other-vitro" class="node node-decision">Positive result from other <em>in vitro</em> genotoxicity tests?</div> |
|
|
<ul> |
|
|
<li> |
|
|
<span class="decision-text yes">YES</span> |
|
|
<div id="tier4c" class="node node-tier4"><strong>Tier 4C:</strong> Other <em>in vitro</em> genotoxicity</div> |
|
|
<ul><li><div id="elcr-potential-2" class="node node-elcr-in">Potentially in ELCR (Follow-up needed)</div></li></ul> |
|
|
</li> |
|
|
<li> |
|
|
<span class="decision-text no">NO</span> |
|
|
<div id="decision-computational" class="node node-decision">Positive non-Ames computational predictions for toxicity?</div> |
|
|
<ul> |
|
|
<li> |
|
|
<span class="decision-text yes">YES</span> |
|
|
<div id="tier4d" class="node node-tier4"><strong>Tier 4D:</strong> Computational toxicity alert</div> |
|
|
<ul><li><div id="elcr-potential-3" class="node node-elcr-in">Potentially in ELCR (Follow-up needed)</div></li></ul> |
|
|
</li> |
|
|
<li> |
|
|
<span class="decision-text no">NO</span> |
|
|
<div id="decision-tier5" class="node node-decision">Is there sufficient negative evidence for a Tier 5 classification?</div> |
|
|
<ul> |
|
|
<li> |
|
|
<span class="decision-text yes">YES</span> |
|
|
<div id="tier5" class="node node-tier5"><strong>Tier 5:</strong> Unlikely to contribute to carcinogenic risk</div> |
|
|
<ul><li><div id="elcr-out" class="node node-elcr-out">Not in ELCR Calculation</div></li></ul> |
|
|
</li> |
|
|
<li> |
|
|
<span class="decision-text no">NO</span> |
|
|
<div id="tier4e" class="node node-tier4"><strong>Tier 4E:</strong> Insufficient data for Tier 5</div> |
|
|
<ul><li><div id="elcr-potential-4" class="node node-elcr-in">Potentially in ELCR (Follow-up needed)</div></li></ul> |
|
|
</li> |
|
|
</ul> |
|
|
</li> |
|
|
</ul> |
|
|
</li> |
|
|
</ul> |
|
|
</li> |
|
|
</ul> |
|
|
</li> |
|
|
</ul> |
|
|
</li> |
|
|
</ul> |
|
|
</li> |
|
|
</ul> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="modal" class="modal-overlay"> |
|
|
<div class="modal-content"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h2 id="modal-title" class="modal-title"></h2> |
|
|
<button id="modal-close" class="text-gray-500 hover:text-gray-800 text-3xl">×</button> |
|
|
</div> |
|
|
<div id="modal-body" class="modal-body"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<footer> |
|
|
© <span id="y"></span> ToxRAI · FDA’s CTP Page |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
document.getElementById('y').textContent = new Date().getFullYear(); |
|
|
|
|
|
|
|
|
(function(){ |
|
|
const modal = document.getElementById('modal'); |
|
|
const modalTitle = document.getElementById('modal-title'); |
|
|
const modalBody = document.getElementById('modal-body'); |
|
|
const modalClose = document.getElementById('modal-close'); |
|
|
|
|
|
const modalData = { |
|
|
'start': { title:'Step 1: Identify a Constituent', body:`<p>The process begins by identifying every individual chemical constituent in a product. This includes ingredients intentionally added (like flavorings, propylene glycol, and nicotine) and chemicals that may have unintentionally leached into the e-liquid from device components (like metals from the coil or plastics from the pod).</p><p>Instead of testing the whole e-liquid mixture, which can give confusing results, this "component-based" approach evaluates the risk of each chemical one by one.</p>` }, |
|
|
'decision-iarc-epa': { title:'Check Existing Classifications', body:`<p>The first check is to see if major health organizations, like the International Agency for Research on Cancer (IARC) or the U.S. Environmental Protection Agency (EPA), have already classified the chemical's potential to cause cancer in humans.</p><p>These classifications are based on a large body of scientific evidence from human and animal studies.</p>` }, |
|
|
'tier123': { title:'Tiers 1, 2, and 3: Known or Likely Carcinogens', body:`<p>If a chemical has been classified by IARC or the EPA, it falls into one of these tiers:</p><ul><li class="mt-2"><strong>Tier 1: Carcinogenic to Humans.</strong> Strong evidence shows it causes cancer in people.</li><li class="mt-2"><strong>Tier 2: Likely to be Carcinogenic to Humans.</strong> Strong evidence from animal studies and some human data suggests it's likely to cause cancer.</li><li class="mt-2"><strong>Tier 3: Suggestive Evidence of Carcinogenic Potential.</strong> There is some evidence, but it's not strong enough for a higher classification.</li></ul>` }, |
|
|
'elcr-in-1': { title:'Include in ELCR Calculation', body:`<p><strong>ELCR stands for Excess Lifetime Cancer Risk.</strong> It is a calculated estimate of how many additional cancer cases might occur in a population from a lifetime of exposure to the chemical.</p><p>Because constituents in Tiers 1, 2, and 3 have established evidence of cancer risk, they are automatically included in the product's total ELCR calculation to determine its overall risk profile.</p>` }, |
|
|
'decision-vivo': { title:'Check for In Vivo Study Results', body:`<p>If the chemical hasn't been classified by IARC/EPA, the next step is to look for results from <em>in vivo</em> studies. These are experiments conducted in a living organism, typically rodents.</p><p>A positive result means the study found evidence that the chemical caused genetic damage (genotoxicity) or tumors (carcinogenicity) in the animal.</p>` }, |
|
|
'tier4a': { title:'Tier 4A: Positive In Vivo Evidence', body:`<p><strong>What this means:</strong> There is direct evidence from at least one animal study that the chemical can cause genetic damage or cancer. This is a significant concern.</p><p><strong>What's next?</strong> Because this evidence is from a whole animal system, it's considered strong. The constituent is included in the cancer risk (ELCR) calculation unless the study is proven to be invalid or not relevant to humans.</p>` }, |
|
|
'elcr-in-2': { title:'Include in ELCR Calculation', body:`<p>Constituents in Tier 4A are included in the Excess Lifetime Cancer Risk (ELCR) calculation due to the strong evidence from <em>in vivo</em> studies.</p>` }, |
|
|
'decision-ames': { title:'Check for Mutagenicity (Ames Test)', body:`<p>The Ames test is a well-established lab test (<em>in vitro</em>) that uses bacteria to see if a chemical can cause mutations in DNA. Computer models (<em>in silico</em>) can also predict the outcome of this test.</p><p>A chemical that causes mutations is called a "mutagen," and many mutagens are also carcinogens.</p>` }, |
|
|
'tier4b': { title:'Tier 4B: Mutagenicity Concern', body:`<p><strong>What this means:</strong> A positive Ames test (or a positive prediction from a computer model) raises a red flag that the chemical may be able to damage DNA and potentially cause cancer.</p><p><strong>What's next? (Follow-up)</strong> This concern can be investigated further. If a series of more complex follow-up tests (first in other lab-grown cells, and then in live animals) all come back negative, the chemical may be reclassified to Tier 5 (Unlikely Hazard).</p>` }, |
|
|
'decision-other-vitro': { title:'Check Other In Vitro Tests', body:`<p>Beyond the Ames test, there are other types of lab-based (<em>in vitro</em>) tests that look for different kinds of genetic damage, such as chromosomal damage.</p><p>Examples include the Micronucleus (MN) assay or the Mouse Lymphoma Assay (MLA).</p>` }, |
|
|
'tier4c': { title:'Tier 4C: Other In Vitro Genotoxicity', body:`<p><strong>What this means:</strong> A positive result here indicates the chemical might cause genetic damage through mechanisms other than mutation (e.g., breaking or rearranging chromosomes).</p><p><strong>What's next? (Follow-up)</strong> This is a serious concern. To resolve it, the guidance suggests two well-conducted <em>in vivo</em> (live animal) tests showing no genetic damage. If those are negative, the chemical could be reclassified to Tier 5.</p>` }, |
|
|
'decision-computational': { title:'Check Computational Predictions', body:`<p>For chemicals with very little or no lab data, scientists can use computer models (computational toxicology) to predict if a chemical is likely to be toxic based on its structure and properties.</p><p>This step looks for computer-generated alerts for carcinogenicity or genotoxicity (other than the Ames prediction, which was checked earlier).</p>` }, |
|
|
'tier4d': { title:'Tier 4D: Computational Toxicity Alert', body:`<p><strong>What this means:</strong> A computer model has flagged the chemical as a potential hazard based on its similarity to other known toxic chemicals.</p><p><strong>What's next? (Follow-up)</strong> A computational alert needs to be confirmed or refuted with actual lab tests. A negative result from an appropriate <em>in vitro</em> (lab) test can outweigh the computational prediction and may lead to reclassification.</p>` }, |
|
|
'decision-tier5': { title:'Is There Sufficient Negative Evidence?', body:`<p>This is the final check before a chemical can be considered low-risk. To be placed in Tier 5, a chemical generally needs a robust set of data showing no cause for concern. The criteria are:</p><ul><li class="mt-2"><strong>1.</strong> A negative test for mutagenicity (like the Ames test).</li><li class="mt-2"><strong>2.</strong> A negative test for chromosomal damage (like the MN assay).</li><li class="mt-2"><strong>3.</strong> No positive or concerning alerts from computational models.</li></ul>` }, |
|
|
'tier5': { title:'Tier 5: Unlikely to Contribute to Carcinogenic Risk', body:`<p><strong>What this means:</strong> Based on a weight of evidence approach, the available data are robust and show that the chemical is not a genotoxic or carcinogenic hazard under the conditions of use.</p>` }, |
|
|
'elcr-out': { title:'Not in ELCR Calculation', body:`<p>Constituents classified in Tier 5 are considered to pose a negligible cancer risk. Therefore, they are not included in the product's cumulative Excess Lifetime Cancer Risk (ELCR) calculation.</p>` }, |
|
|
'tier4e': { title:'Tier 4E: Insufficient Data', body:`<p><strong>What this means:</strong> The chemical doesn't fit into any of the other categories. There isn't enough negative data to place it in Tier 5, but there isn't any specific positive data to place it in Tiers 4A–4D either. It is a data gap.</p><p><strong>What's next? (Follow-up)</strong> More testing is required to make a decision. The chemical is treated as a potential hazard and may be included in the ELCR calculation until data proving its safety (i.e., meeting the criteria for Tier 5) is provided.</p>` }, |
|
|
'elcr-potential-1': { title:'Potentially in ELCR Calculation', body:`<p>Because it shows potential for mutagenicity, a Tier 4B chemical is included in the cancer risk calculation by default. However, manufacturers can conduct specific follow-up tests. If those tests are clearly negative, the chemical can be re-evaluated and potentially removed from the risk calculation (reclassified to Tier 5).</p>` }, |
|
|
'elcr-potential-2': { title:'Potentially in ELCR Calculation', body:`<p>A Tier 4C chemical is included in the cancer risk calculation due to the evidence of genotoxicity. This decision can be reversed if robust follow-up testing in live animals shows no evidence of harm, which may allow for reclassification to Tier 5.</p>` }, |
|
|
'elcr-potential-3': { title:'Potentially in ELCR Calculation', body:`<p>A Tier 4D chemical, flagged by computer models, is treated as a potential hazard and included in the cancer risk calculation. This can be challenged with real-world lab data. A negative result in a well-conducted lab test can override the computational alert.</p>` }, |
|
|
'elcr-potential-4': { title:'Potentially in ELCR Calculation', body:`<p>Because its safety profile is unknown, a Tier 4E chemical is treated with caution and is typically included in the cancer risk calculation. The only way to remove it is to generate the necessary data to show it meets the safety criteria for a Tier 5 classification.</p>` } |
|
|
}; |
|
|
|
|
|
document.querySelectorAll('#ctp-slot .node').forEach(node => { |
|
|
node.addEventListener('click', () => { |
|
|
const data = modalData[node.id]; |
|
|
if (data) { |
|
|
modalTitle.innerHTML = data.title; |
|
|
modalBody.innerHTML = data.body; |
|
|
modal.classList.add('active'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
const closeModal = () => modal.classList.remove('active'); |
|
|
modalClose.addEventListener('click', closeModal); |
|
|
modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); }); |
|
|
})(); |
|
|
|
|
|
|
|
|
(function () { |
|
|
const wrapper = document.querySelector('#ctp-slot .tree-wrapper'); |
|
|
const scaleBox = document.getElementById('tree-scale'); |
|
|
const innerTree = document.querySelector('#ctp-slot .tree'); |
|
|
|
|
|
const btnFit = document.getElementById('zoom-fit'); |
|
|
const btnIn = document.getElementById('zoom-in'); |
|
|
const btnOut = document.getElementById('zoom-out'); |
|
|
const btnReset = document.getElementById('zoom-reset'); |
|
|
|
|
|
let scale = 1; |
|
|
|
|
|
function applyScale() { |
|
|
scaleBox.style.transform = `scale(${scale})`; |
|
|
} |
|
|
|
|
|
function fitToWidth() { |
|
|
const contentW = innerTree.scrollWidth || innerTree.getBoundingClientRect().width; |
|
|
const availW = wrapper.clientWidth - 24; |
|
|
if (contentW > 0) { |
|
|
scale = Math.max(0.4, Math.min(1.0, availW / contentW)); |
|
|
applyScale(); |
|
|
} |
|
|
|
|
|
wrapper.scrollLeft = 0; |
|
|
wrapper.scrollTop = 0; |
|
|
} |
|
|
|
|
|
btnFit?.addEventListener('click', fitToWidth); |
|
|
btnIn?.addEventListener('click', () => { scale = Math.min(2, +(scale + 0.1).toFixed(2)); applyScale(); }); |
|
|
btnOut?.addEventListener('click', () => { scale = Math.max(0.4, +(scale - 0.1).toFixed(2)); applyScale(); }); |
|
|
btnReset?.addEventListener('click', () => { scale = 1; applyScale(); }); |
|
|
|
|
|
|
|
|
requestAnimationFrame(fitToWidth); |
|
|
|
|
|
|
|
|
let userAdjusted = false; |
|
|
['click'].forEach(ev => { |
|
|
[btnIn, btnOut, btnReset].forEach(b => b?.addEventListener(ev, () => { userAdjusted = true; })); |
|
|
}); |
|
|
window.addEventListener('resize', () => { if (!userAdjusted) fitToWidth(); }); |
|
|
})(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
