<style>
.GO-title {
color: #2e7d32;
text-align: center;
margin-bottom: 40px;
font-size: 2.2em;
}
.GO-gene-families {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 20px;
}
.GO-gene-family {
background-color: #fff;
border-radius: 10px;
padding: 16px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
transition: all 0.25s ease;
cursor: pointer;
}
.GO-gene-family:hover,
.GO-gene-family.active {
transform: translateY(-4px);
background-color: #e8f5e9;
border: 2px solid #4caf50;
box-shadow: 0 6px 16px rgba(76, 175, 80, 0.25);
}
.GO-gene-family h2 {
color: #388e3c;
font-size: 1.1em;
margin: 0 0 6px;
}
.GO-gene-family p {
color: #555;
font-size: 0.95em;
}
.GO-analysis-container {
display: none;
background: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 24px;
margin: 24px 0;
grid-column: 1 / -1;
}
.GO-button-group {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin: 18px 0;
}
.GO-analysis-container button {
flex: 1;
background-color: #4caf50;
color: white;
border: none;
padding: 12px;
font-size: 16px;
border-radius: 6px;
cursor: pointer;
}
.GO-analysis-container button:hover {
background-color: #388e3c;
}
.GO-pdf-viewer {
width: 100%;
height: 700px;
margin-top: 16px;
border: 1px solid #ccc;
border-radius: 8px;
}
.GO-download-container {
text-align: center;
margin-top: 20px;
}
.GO-download-link {
display: inline-block;
background: #43a047;
color: white;
padding: 12px 24px;
border-radius: 6px;
text-decoration: none;
font-size: 16px;
font-weight: 600;
}
.GO-download-link:hover {
background: #2e7d32;
}
.GO-card-download-links {
margin-top: 10px;
margin-bottom: 10px;
font-size: 0.95em;
}
.GO-text-download-link {
color: #2e7d32;
text-decoration: underline;
margin: 5px 8px;
}
.GO-text-download-link:hover {
color: #1b5e20;
}
.GO-kegg-empty-tip {
text-align: center;
padding: 40px 0;
color: #388e3c;
font-size: 18px;
}
</style>
<h1 class="GO-title">Gene Family Analysis platform</h1>
<div class="GO-gene-families" id="geneFamilies"></div>
<script>
const families = [
{ name: "NAC", description: "NAC转录因子家族" },
{ name: "LACS", description: "长链酰基辅酶A合成酶家族" },
{ name: "GRAS", description: "GRAS转录因子家族" },
{ name: "LBD", description: "LBD转录因子家族" },
{ name: "HSP70", description: "热激蛋白70家族" },
{ name: "HSF", description: "热激转录因子家族" },
{ name: "GATA", description: "GATA转录因子家族" },
{ name: "G2-like", description: "G2-like转录因子家族" },
{ name: "Dof", description: "Dof转录因子家族" },
{ name: "DGAT", description: "二酰基甘油酰基转移酶家族" },
{ name: "C3H", description: "C3H型锌指转录因子家族" },
{ name: "bHLH", description: "碱性螺旋-环-螺旋转录因子家族" },
{ name: "B3", description: "B3转录因子家族" },
{ name: "ARR-B", description: "B型拟南芥响应调节因子家族" },
{ name: "AP2", description: "AP2/ERF转录因子家族" },
{ name: "14-3-3", description: "14-3-3蛋白家族" },
{ name: "ZF-HD", description: "锌指同源域转录因子家族" },
{ name: "WOX", description: "WUSCHEL相关同源盒转录因子家族" },
{ name: "U-box", description: "U-box蛋白家族" },
{ name: "Tify", description: "Tify转录因子家族" },
{ name: "TCP", description: "TCP转录因子家族" },
{ name: "MIP", description: "主要内在蛋白家族" },
{ name: "MADS", description: "MADS-box转录因子家族" },
{ name: "XTH", description: "木葡聚糖内转糖基酶/水解酶家族" },
{ name: "WRKY", description: "WRKY转录因子家族" },
{ name: "UGT", description: "UDP-糖基转移酶家族" },
{ name: "TPS", description: "萜烯合酶家族" },
{ name: "SWEET", description: "SWEET糖转运蛋白家族" },
{ name: "PR蛋白", description: "病程相关蛋白家族" },
{ name: "P450", description: "细胞色素P450家族" },
{ name: "MYB转录因子", description: "MYB转录因子家族" },
{ name: "CPY450", description: "细胞色素P450家族" },
{ name: "bZIP", description: "碱性亮氨酸拉链转录因子家族" },
{ name: "ARF", description: "生长素响应因子家族" },
{ name: "ABC转运蛋白", description: "ABC转运蛋白家族" }
];
const basePath = "/sites/default/files/GO_KEGG_analysis_results/";
let currentType = "GO";
let currentFamily = null;
let currentAnalysisContainer = null;
function renderGeneFamilies() {
const container = document.getElementById('geneFamilies');
families.sort((a, b) => a.name.localeCompare(b.name, 'zh-Hans-CN'));
families.forEach(family => {
const div = document.createElement('div');
div.className = 'GO-gene-family';
div.innerHTML = `<h2>${family.name}</h2><p>${family.description}</p>`;
div.onclick = () => showAnalysis(family, div);
container.appendChild(div);
});
}
function showAnalysis(family, familyDiv) {
document.querySelectorAll('.GO-gene-family').forEach(card => card.classList.remove('active'));
familyDiv.classList.add('active');
currentAnalysisContainer?.remove();
const container = document.getElementById('geneFamilies');
const cards = Array.from(container.children);
const cardIndex = cards.indexOf(familyDiv);
const rowIndex = Math.floor(cardIndex / 4);
const insertIndex = (rowIndex + 1) * 4;
const analysisContainer = document.createElement('div');
analysisContainer.className = 'GO-analysis-container';
analysisContainer.innerHTML = `
<h2>Gene Family: ${family.name}</h2>
<div class="GO-card-download-links">
<a class="GO-text-download-link" id="geneIdTextLink" href="#">Download Gene ID List</a>
|
<a class="GO-text-download-link" id="faTextLink" href="#">Download the FA sequence file</a>
</div>
<p>${family.description}</p>
<div class="GO-button-group">
<button onclick="switchType('GO')">GO Analysis</button>
<button onclick="switchType('KEGG')">KEGG Analysis</button>
</div>
<div id="pdfContainer">
<object id="pdfViewer" class="GO-pdf-viewer" type="application/pdf">
<p>Your browser does not support PDF viewing. Please download the PDF file for viewing.</p>
</object>
</div>
<div class="GO-download-container">
<a id="csvDownload" class="GO-download-link" href="#">Download CSV data</a>
</div>
`;
if (insertIndex < cards.length) {
container.insertBefore(analysisContainer, cards[insertIndex]);
} else {
container.appendChild(analysisContainer);
}
analysisContainer.style.display = 'block';
currentType = "GO";
currentFamily = family;
currentAnalysisContainer = analysisContainer;
loadAnalysis(family.name, currentType);
}
// 添加点击空白处收起卡片的功能
document.addEventListener('click', function(event) {
const geneFamilies = document.getElementById('geneFamilies');
const analysisContainer = document.querySelector('.GO-analysis-container');
// 如果点击的不是基因家族卡片或其子元素，且存在展开的分析容器
if (!event.target.closest('.GO-gene-family') && !event.target.closest('.GO-analysis-container') && analysisContainer) {
// 移除所有卡片的active状态
document.querySelectorAll('.GO-gene-family').forEach(card => card.classList.remove('active'));
// 移除分析容器
analysisContainer.remove();
currentAnalysisContainer = null;
currentFamily = null;
}
});
function switchType(type) {
currentType = type;
currentFamily && loadAnalysis(currentFamily.name, type);
}
function loadAnalysis(familyName, type) {
const pdfFile = `${familyName}_${type === "KEGG" ? "KEGGRplot" : "GORplot"}.pdf`;
const csvFile = `${familyName}_${type.toLowerCase()}.csv`;
const geneIdFile = `${familyName}_baid.fa`;
const faFile = `${familyName}.fa`;
const pdfViewer = document.getElementById('pdfViewer');
const pdfContainer = document.getElementById('pdfContainer');
const csvDownload = document.getElementById('csvDownload');
const geneIdLink = document.getElementById('geneIdTextLink');
const faLink = document.getElementById('faTextLink');
// 清除旧的提示
pdfContainer.querySelector('.GO-kegg-empty-tip')?.remove();
geneIdLink.href = `${basePath}${familyName}/${geneIdFile}`;
geneIdLink.download = geneIdFile;
faLink.href = `${basePath}${familyName}/${faFile}`;
faLink.download = faFile;
csvDownload.href = `${basePath}${familyName}/${csvFile}`;
csvDownload.download = csvFile;
fetch(`${basePath}${familyName}/${pdfFile}`, { method: 'HEAD' })
.then(response => {
if (response.ok) {
pdfViewer.data = `${basePath}${familyName}/${pdfFile}`;
pdfViewer.style.display = 'block';
csvDownload.style.display = 'inline-block';
} else {
pdfViewer.removeAttribute('data'); // 关键：移除data属性
pdfViewer.style.display = 'none';
const tip = document.createElement('div');
tip.className = 'GO-kegg-empty-tip';
tip.textContent = `The enrichment analysis of this gene family was not obvious in the ${type}`;
pdfContainer.appendChild(tip);
csvDownload.style.display = 'none';
}
})
.catch(() => {
pdfViewer.removeAttribute('data'); // 关键：移除data属性
pdfViewer.style.display = 'none';
const tip = document.createElement('div');
tip.className = 'GO-kegg-empty-tip';
tip.textContent = `The enrichment analysis of this gene family was not obvious in the ${type}`;
pdfContainer.appendChild(tip);
csvDownload.style.display = 'none';
});
}
renderGeneFamilies();
// 添加说明文档链接
const docContainer = document.createElement('div');
docContainer.style.cssText = 'text-align: center; margin-top: 40px; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); grid-column: 1 / -1;';
docContainer.innerHTML = `
<a href="node/25" target="_blank" style="color: #2e7d32; text-decoration: none; font-size: 16px; padding: 10px 20px; border: 2px solid #2e7d32; border-radius: 6px; transition: all 0.3s ease;">
Check the user manual
</a>
`;
document.getElementById('geneFamilies').appendChild(docContainer);
</script>Forums