wjsjwr/digital-embryo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新前端页面内容，将中文翻译为英文，修改了多个页面的标题、描述和按钮文本，以提升国际化支持和用户体验。同时，移除了一些未使用的代码和注释，优化了代码结构。

Browse Source
This commit is contained in:
wjsjwr 2025-08-11 20:40:44 +08:00
parent bc60273eca
commit 19afd6f019
9 changed files with 213 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
embryo-frontend/index.html
View File

@ -1,11 +1,11 @@
<!doctype html> <!doctype html>
<html lang="zh-CN"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Digital Embryo - 数字胚胎发育时空转录组图谱数据库" /> <meta name="description" content="Digital Embryo - A spatiotemporal transcriptomic atlas and database of embryonic development" />
<title>Digital Embryo | 数字胚胎发育时空转录组图谱</title> <title>Digital Embryo | Spatiotemporal transcriptomic atlas</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

18
embryo-frontend/src/components/PointCloud.tsx
View File

@ -189,15 +189,7 @@ const PointCloud: React.FC<PointCloudProps> = ({ data, isCategorical = false, au
const intersects = raycaster.intersectObject(points); const intersects = raycaster.intersectObject(points);
if (intersects.length > 0) { if (intersects.length > 0) {
const i = intersects[0].index ?? 0; // Click handling can be added here if needed
const p = data[i];
// console.log(`Clicked: x=${p.x}, y=${p.y}, z=${p.z}, value=${p.value}`);
// if (isCategorical) {
// alert(`Cell @ (${p.x.toFixed(1)}, ${p.y.toFixed(1)}, ${p.z.toFixed(1)})\nCell Type: ${p.value}`);
// } else {
// alert(`Cell @ (${p.x.toFixed(1)}, ${p.y.toFixed(1)}, ${p.z.toFixed(1)})\nExpression: ${(p.value as number).toFixed(3)}`);
// }
} }
}; };
@ -309,7 +301,7 @@ const PointCloud: React.FC<PointCloudProps> = ({ data, isCategorical = false, au
return ( return (
<div> <div>
<div style={{ fontWeight: '600', marginBottom: '10px', fontSize: '14px' }}>细胞类型</div> <div style={{ fontWeight: '600', marginBottom: '10px', fontSize: '14px' }}>Cell types</div>
<div> <div>
{cellTypes.map(type => { {cellTypes.map(type => {
const cellColor = colorMap.get(type); const cellColor = colorMap.get(type);
@ -339,7 +331,7 @@ const PointCloud: React.FC<PointCloudProps> = ({ data, isCategorical = false, au
// 数值数据图例 // 数值数据图例
return ( return (
<div> <div>
<div style={{ fontWeight: '600', marginBottom: '10px', fontSize: '14px' }}>表达强度</div> <div style={{ fontWeight: '600', marginBottom: '10px', fontSize: '14px' }}>Expression intensity</div>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}> <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<div style={{ <div style={{
background: 'linear-gradient(to top, hsla(180, 100%, 50%, 1.00), hsla(72, 100%, 50%, 1.00), hsla(0, 100%, 50%, 0.99))', background: 'linear-gradient(to top, hsla(180, 100%, 50%, 1.00), hsla(72, 100%, 50%, 1.00), hsla(0, 100%, 50%, 0.99))',
@ -348,8 +340,8 @@ const PointCloud: React.FC<PointCloudProps> = ({ data, isCategorical = false, au
marginBottom: '5px' marginBottom: '5px'
}} /> }} />
<div style={{ fontSize: '11px', color: '#666' }}> <div style={{ fontSize: '11px', color: '#666' }}>
<div>高</div> <div>High</div>
<div>低</div> <div>Low</div>
</div> </div>
</div> </div>
</div> </div>

48
embryo-frontend/src/pages/Download.tsx
View File

@ -3,32 +3,32 @@ import React from "react";
const Download: React.FC = () => { const Download: React.FC = () => {
const downloadItems = [ const downloadItems = [
{ {
title: "CS7 阶段数据", title: "CS7 stage dataset",
description: "小鼠胚胎 CS7 发育阶段的完整空间转录组数据", description: "Complete spatial transcriptomic data for mouse embryo stage CS7",
files: [ files: [
{ name: "CS7.h5ad", size: "45.2 MB", format: "AnnData" }, { name: "CS7.h5ad", size: "45.2 MB", format: "AnnData" },
{ name: "CS7_metadata.csv", size: "2.1 MB", format: "CSV" }, { name: "CS7_metadata.csv", size: "2.1 MB", format: "CSV" },
] ]
}, },
{ {
title: "CS8 阶段数据", title: "CS8 stage dataset",
description: "小鼠胚胎 CS8 发育阶段的完整空间转录组数据", description: "Complete spatial transcriptomic data for mouse embryo stage CS8",
files: [ files: [
{ name: "CS8.h5ad", size: "52.8 MB", format: "AnnData" }, { name: "CS8.h5ad", size: "52.8 MB", format: "AnnData" },
{ name: "CS8_metadata.csv", size: "2.3 MB", format: "CSV" }, { name: "CS8_metadata.csv", size: "2.3 MB", format: "CSV" },
] ]
}, },
{ {
title: "CS9 阶段数据", title: "CS9 stage dataset",
description: "小鼠胚胎 CS9 发育阶段的完整空间转录组数据", description: "Complete spatial transcriptomic data for mouse embryo stage CS9",
files: [ files: [
{ name: "CS9.h5ad", size: "61.4 MB", format: "AnnData" }, { name: "CS9.h5ad", size: "61.4 MB", format: "AnnData" },
{ name: "CS9_metadata.csv", size: "2.7 MB", format: "CSV" }, { name: "CS9_metadata.csv", size: "2.7 MB", format: "CSV" },
] ]
}, },
{ {
title: "模拟数据集", title: "Mock dataset",
description: "用于测试和开发的 3D 表达数据模拟集", description: "Synthetic 3D expression data for testing and development",
files: [ files: [
{ name: "embryo_mock_3D_expression.h5ad", size: "18.9 MB", format: "AnnData" }, { name: "embryo_mock_3D_expression.h5ad", size: "18.9 MB", format: "AnnData" },
] ]
@ -40,26 +40,26 @@ const Download: React.FC = () => {
<div className="page-header"> <div className="page-header">
<h1>Download</h1> <h1>Download</h1>
<p className="page-description"> <p className="page-description">
我们为研究社区提供处理后的数据和元数据下载 Processed data and metadata available for download for the research community
</p> </p>
</div> </div>
<div className="page-content"> <div className="page-content">
<div className="download-notice"> <div className="download-notice">
<h2>使用协议</h2> <h2>Usage policy</h2>
<p> <p>
下载和使用这些数据时，请遵守以下协议： When downloading and using these data, please follow the policy below:
</p> </p>
<ul> <ul>
<li>数据仅限于学术研究用途</li> <li>Data are for academic research use only</li>
<li>如果使用这些数据发表论文，请引用我们的工作</li> <li>If used in publications, please cite our work</li>
<li>禁止重新分发原始数据</li> <li>Redistribution of raw data is prohibited</li>
<li>商业用途需要单独授权</li> <li>Commercial use requires separate authorization</li>
</ul> </ul>
</div> </div>
<div className="downloads-section"> <div className="downloads-section">
<h2>可下载数据</h2> <h2>Available downloads</h2>
<div className="download-grid"> <div className="download-grid">
{downloadItems.map((item, index) => ( {downloadItems.map((item, index) => (
<div key={index} className="download-card"> <div key={index} className="download-card">
@ -74,7 +74,7 @@ const Download: React.FC = () => {
{file.size} | {file.format} {file.size} | {file.format}
</span> </span>
</div> </div>
<button className="download-btn">下载</button> <button className="download-btn">Download</button>
</div> </div>
))} ))}
</div> </div>
@ -84,17 +84,17 @@ const Download: React.FC = () => {
</div> </div>
<div className="bulk-download"> <div className="bulk-download">
<h2>批量下载</h2> <h2>Bulk download</h2>
<div className="bulk-options"> <div className="bulk-options">
<div className="bulk-option"> <div className="bulk-option">
<h3>完整数据集</h3> <h3>Full dataset</h3>
<p>下载所有阶段的数据和元数据（约 185 MB）</p> <p>Download all stages' data and metadata (~185 MB)</p>
<button className="bulk-download-btn">下载全部</button> <button className="bulk-download-btn">Download all</button>
</div> </div>
<div className="bulk-option"> <div className="bulk-option">
<h3>元数据包</h3> <h3>Metadata package</h3>
<p>仅下载所有阶段的元数据文件（约 7 MB）</p> <p>Download metadata files for all stages only (~7 MB)</p>
<button className="bulk-download-btn">下载元数据</button> <button className="bulk-download-btn">Download metadata</button>
</div> </div>
</div> </div>
</div> </div>

31
embryo-frontend/src/pages/EmbryoGeneration.tsx
View File

@ -83,7 +83,7 @@ const EmbryoGeneration: React.FC = () => {
<div className="page-header"> <div className="page-header">
<h1>Embryo Generation</h1> <h1>Embryo Generation</h1>
<p className="page-description"> <p className="page-description">
观察胚胎发育过程中的细胞迁移和融合。CS7、CS8、CS7.5点云在同一3D视图中展示，动画模拟细胞从两侧汇聚到中间。 Observe cell migration and merging during embryonic development. CS7, CS8, and CS7.5 point clouds are shown in one 3D view, with an animation simulating cells converging from both sides.
</p> </p>
</div> </div>
<div className="page-content"> <div className="page-content">
@ -110,7 +110,7 @@ const EmbryoGeneration: React.FC = () => {
opacity: isAnimating || loading ? 0.6 : 1 opacity: isAnimating || loading ? 0.6 : 1
}} }}
> >
{isAnimating ? "动画中..." : "开始动画"} {isAnimating ? "Animating..." : "Start animation"}
</button> </button>
<button <button
onClick={resetAnimation} onClick={resetAnimation}
@ -125,10 +125,10 @@ const EmbryoGeneration: React.FC = () => {
opacity: loading ? 0.6 : 1 opacity: loading ? 0.6 : 1
}} }}
> >
重置 Reset
</button> </button>
<label style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}> <label style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
动画速度: Animation speed:
<input <input
type="range" type="range"
min="0.5" min="0.5"
@ -141,7 +141,7 @@ const EmbryoGeneration: React.FC = () => {
<span>{animationSpeed}x</span> <span>{animationSpeed}x</span>
</label> </label>
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}> <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
进度: {Math.round(animationProgress * 100)}% Progress: {Math.round(animationProgress * 100)}%
<div style={{ <div style={{
width: "100px", width: "100px",
height: "8px", height: "8px",
@ -166,23 +166,23 @@ const EmbryoGeneration: React.FC = () => {
animationProgress={animationProgress} animationProgress={animationProgress}
/> />
<div className="section"> <div className="section">
<h2>使用说明</h2> <h2>User Guide</h2>
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "2rem", marginTop: "1.5rem" }}> <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "2rem", marginTop: "1.5rem" }}>
<div> <div>
<h3>🎬 动画控制</h3> <h3>🎬 Animation controls</h3>
<p>点击"开始动画"按钮观看CS7.5阶段的细胞生成过程。可以调节动画速度，使用重置按钮重新开始。</p> <p>Click "Start animation" to watch the CS7.5 cell formation process. Adjust speed and use Reset to start over.</p>
</div> </div>
<div> <div>
<h3>🖱️ 交互操作</h3> <h3>🖱️ Interactions</h3>
<p>在3D视图中使用鼠标拖拽旋转视角，滚轮缩放，点击数据点查看详细信息。</p> <p>Drag to rotate, scroll to zoom, and click data points in the 3D view to see details.</p>
</div> </div>
<div> <div>
<h3>🎨 颜色编码</h3> <h3>🎨 Color encoding</h3>
<p>相同颜色代表相同细胞类型，便于观察细胞在发育过程中的变化。</p> <p>Identical colors indicate the same cell type, making it easier to observe developmental changes.</p>
</div> </div>
<div> <div>
<h3>📊 发育过程</h3> <h3>📊 Developmental process</h3>
<p>观察从CS7和CS8到CS7.5的胚胎发育过程，了解细胞的空间分布变化和类型分化。</p> <p>Observe the process from CS7 and CS8 to CS7.5 to understand spatial distribution changes and cell-type differentiation.</p>
</div> </div>
</div> </div>
</div> </div>
@ -375,8 +375,7 @@ const UnifiedEmbryoAnimation: React.FC<UnifiedEmbryoAnimationProps> = ({ cs7Data
// 为CS7.5的点分配起始位置（从CS7和CS8的实际数据中获取） // 为CS7.5的点分配起始位置（从CS7和CS8的实际数据中获取）
// 基于细胞类型或颜色来分配起始位置，确保相同颜色的点从两侧出现 // 基于细胞类型或颜色来分配起始位置，确保相同颜色的点从两侧出现
const leftSourcePoints = []; // Left/right source point placeholders removed (unused)
const rightSourcePoints = [];
// 按细胞类型分组CS7和CS8数据 // 按细胞类型分组CS7和CS8数据
const cs7ByType = new Map<string, Point[]>(); const cs7ByType = new Map<string, Point[]>();

100
embryo-frontend/src/pages/GeneView.tsx
View File

@ -141,7 +141,8 @@ const GeneView: React.FC = () => {
<div className="page-header"> <div className="page-header">
<h1>Gene Expression</h1> <h1>Gene Expression</h1>
<p className="page-description"> <p className="page-description">
查看和分析不同发育阶段的基因表达模式和空间分布。通过3D可视化探索基因在胚胎发育过程中的表达变化。 View and analyze gene expression patterns and spatial distributions across developmental stages.
Explore changes during embryonic development with 3D visualizations.
</p> </p>
</div> </div>
@ -155,7 +156,7 @@ const GeneView: React.FC = () => {
marginBottom: "2rem" marginBottom: "2rem"
}}> }}>
<label> <label>
发育阶段:&nbsp; Developmental stage:&nbsp;
<select <select
value={selectedStage} value={selectedStage}
onChange={(e) => { onChange={(e) => {
@ -166,33 +167,33 @@ const GeneView: React.FC = () => {
setError(""); setError("");
}} }}
> >
<option value="CS7">CS7 - 早期发育阶段</option> <option value="CS7">CS7 - Early stage</option>
<option value="CS8">CS8 - 中期发育阶段</option> <option value="CS8">CS8 - Mid stage</option>
<option value="CS9">CS9 - 后期发育阶段</option> <option value="CS9">CS9 - Late stage</option>
<option value="CS11">CS11 - 后期发育阶段</option> <option value="CS11">CS11 - Later stage</option>
<option value="CS12">CS12 - 后期发育阶段</option> <option value="CS12">CS12 - Later stage</option>
<option value="CS13">CS13 - 后期发育阶段</option> <option value="CS13">CS13 - Later stage</option>
<option value="CS14">CS14 - 后期发育阶段</option> <option value="CS14">CS14 - Later stage</option>
<option value="CS15">CS15 - 后期发育阶段</option> <option value="CS15">CS15 - Later stage</option>
<option value="CS16">CS16 - 后期发育阶段</option> <option value="CS16">CS16 - Later stage</option>
<option value="CS17">CS17 - 后期发育阶段</option> <option value="CS17">CS17 - Later stage</option>
<option value="CS18">CS18 - 后期发育阶段</option> <option value="CS18">CS18 - Later stage</option>
<option value="CS19">CS19 - 后期发育阶段</option> <option value="CS19">CS19 - Later stage</option>
<option value="CS20">CS20 - 后期发育阶段</option> <option value="CS20">CS20 - Later stage</option>
<option value="CS21">CS21 - 后期发育阶段</option> <option value="CS21">CS21 - Later stage</option>
<option value="CS22">CS22 - 后期发育阶段</option> <option value="CS22">CS22 - Later stage</option>
<option value="CS23">CS23 - 后期发育阶段</option> <option value="CS23">CS23 - Later stage</option>
</select> </select>
</label> </label>
<label htmlFor="gene-select">目标基因:</label> <label htmlFor="gene-select">Target gene:</label>
<select <select
id="gene-select" id="gene-select"
aria-label="选择基因" aria-label="Select gene"
value={gene} value={gene}
onChange={(e) => setGene(e.target.value)} onChange={(e) => setGene(e.target.value)}
> >
<option value="">-- 请选择基因 --</option> <option value="">-- Select gene --</option>
{availableGenes.map((g) => ( {availableGenes.map((g) => (
<option key={g} value={g}> <option key={g} value={g}>
{g} {g}
@ -201,7 +202,7 @@ const GeneView: React.FC = () => {
</select> </select>
<button onClick={handleSearch} disabled={!gene || loading}> <button onClick={handleSearch} disabled={!gene || loading}>
{loading ? "加载中..." : "查询表达"} {loading ? "Loading..." : "Query expression"}
</button> </button>
</div> </div>
@ -210,8 +211,9 @@ const GeneView: React.FC = () => {
{/* 3D 可视化说明 */} {/* 3D 可视化说明 */}
<p className="flat-section-description"> <p className="flat-section-description">
下方展示了{selectedStage}发育阶段的细胞类型分布（左）、所选基因的表达模式（中）和基因在各细胞类型中的表达分布（右）。 Below are the cell type distribution (left), the selected gene's expression pattern (middle),
点击任意数据点可查看详细信息。 and the expression distribution across cell types (right) for stage {selectedStage}.
Click any data point to view details.
</p> </p>
{/* 三可视化区域 */} {/* 三可视化区域 */}
@ -228,7 +230,7 @@ const GeneView: React.FC = () => {
> >
{/* 细胞类型可视化 */} {/* 细胞类型可视化 */}
<div className="visualization-container" style={{ width: "700px", minWidth: "700px", maxWidth: "700px" }}> <div className="visualization-container" style={{ width: "700px", minWidth: "700px", maxWidth: "700px" }}>
<h3 style={{ textAlign: "center" }}>细胞类型分布</h3> <h3 style={{ textAlign: "center" }}>Cell type distribution</h3>
{cellError && <div className="error-message">{cellError}</div>} {cellError && <div className="error-message">{cellError}</div>}
{cellData.length > 0 ? ( {cellData.length > 0 ? (
<div style={{ width: "700px", height: "100%" }}> <div style={{ width: "700px", height: "100%" }}>
@ -239,14 +241,14 @@ const GeneView: React.FC = () => {
{cellLoading ? ( {cellLoading ? (
<div> <div>
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔄</div> <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔄</div>
<p>正在加载细胞类型数据...</p> <p>Loading cell type data...</p>
</div> </div>
) : ( ) : (
<div> <div>
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🧬</div> <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🧬</div>
<p>细胞类型分布</p> <p>Cell type distribution</p>
<p style={{ fontSize: "0.9rem", color: "var(--text-secondary)" }}> <p style={{ fontSize: "0.9rem", color: "var(--text-secondary)" }}>
{selectedStage} 阶段 Stage: {selectedStage}
</p> </p>
</div> </div>
)} )}
@ -256,7 +258,7 @@ const GeneView: React.FC = () => {
{/* 基因表达可视化 */} {/* 基因表达可视化 */}
<div className="visualization-container" style={{ width: "500px", minWidth: "500px", maxWidth: "500px" }}> <div className="visualization-container" style={{ width: "500px", minWidth: "500px", maxWidth: "500px" }}>
<h3 style={{ textAlign: "center" }}>基因表达模式</h3> <h3 style={{ textAlign: "center" }}>Gene expression pattern</h3>
{data.length > 0 ? ( {data.length > 0 ? (
<div style={{ width: "500px", height: "100%" }}> <div style={{ width: "500px", height: "100%" }}>
<PointCloud data={data} autoRotate={true} /> <PointCloud data={data} autoRotate={true} />
@ -266,14 +268,14 @@ const GeneView: React.FC = () => {
{loading ? ( {loading ? (
<div> <div>
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔄</div> <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔄</div>
<p>正在加载基因表达数据...</p> <p>Loading gene expression data...</p>
</div> </div>
) : ( ) : (
<div> <div>
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>📊</div> <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>📊</div>
<p>请选择目标基因以查看表达数据</p> <p>Please select a target gene to view expression data</p>
<p style={{ fontSize: "0.9rem", color: "var(--text-secondary)" }}> <p style={{ fontSize: "0.9rem", color: "var(--text-secondary)" }}>
当前阶段：{selectedStage} Stage: {selectedStage}
</p> </p>
</div> </div>
)} )}
@ -283,7 +285,7 @@ const GeneView: React.FC = () => {
{/* 基因分布箱线图 */} {/* 基因分布箱线图 */}
<div className="visualization-container"> <div className="visualization-container">
<h3 style={{textAlign: "center" }}>基因表达分布</h3> <h3 style={{textAlign: "center" }}>Gene expression distribution</h3>
{distributionData.data && distributionData.data.length > 0 ? ( {distributionData.data && distributionData.data.length > 0 ? (
<div style={{ height: "480px" }}> <div style={{ height: "480px" }}>
<ResponsiveBoxPlot <ResponsiveBoxPlot
@ -298,21 +300,21 @@ const GeneView: React.FC = () => {
layout="horizontal" layout="horizontal"
axisTop={null} axisTop={null}
axisRight={null} axisRight={null}
axisBottom={{ axisBottom={{
tickSize: 5, tickSize: 5,
tickPadding: 12, tickPadding: 12,
tickRotation: 0, tickRotation: 0,
legend: "表达值", legend: "Expression",
legendPosition: "middle", legendPosition: "middle",
legendOffset: 60, legendOffset: 60,
format: (value: number) => value.toFixed(2), format: (value: number) => value.toFixed(2),
tickValues: 3, tickValues: 3,
}} }}
axisLeft={{ axisLeft={{
tickSize: 5, tickSize: 5,
tickPadding: 10, tickPadding: 10,
tickRotation: 0, tickRotation: 0,
legend: "细胞类型", legend: "Cell type",
legendPosition: "middle", legendPosition: "middle",
legendOffset: -120, legendOffset: -120,
format: (value: string) => value.length > 12 ? `${value.substring(0, 12)}...` : value, format: (value: string) => value.length > 12 ? `${value.substring(0, 12)}...` : value,
@ -346,14 +348,14 @@ const GeneView: React.FC = () => {
{loading ? ( {loading ? (
<div> <div>
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔄</div> <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔄</div>
<p>正在加载分布数据...</p> <p>Loading distribution data...</p>
</div> </div>
) : ( ) : (
<div> <div>
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>📈</div> <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>📈</div>
<p>请选择目标基因以查看表达分布</p> <p>Please select a target gene to view the distribution</p>
<p style={{ fontSize: "0.9rem", color: "var(--text-secondary)" }}> <p style={{ fontSize: "0.9rem", color: "var(--text-secondary)" }}>
箱线图显示各细胞类型中的表达分布 The box plot shows the expression distribution across cell types
</p> </p>
</div> </div>
)} )}
@ -363,23 +365,23 @@ const GeneView: React.FC = () => {
</div> </div>
<div className="section"> <div className="section">
<h2>使用说明</h2> <h2>User Guide</h2>
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "2rem", marginTop: "1.5rem" }}> <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "2rem", marginTop: "1.5rem" }}>
<div> <div>
<h3>🎯 选择目标</h3> <h3>🎯 Select targets</h3>
<p>首先选择感兴趣的发育阶段，系统将自动显示该阶段的细胞类型分布，然后选择基因查看表达模式。</p> <p>First choose a developmental stage to load its cell type distribution, then select a gene to view its expression pattern.</p>
</div> </div>
<div> <div>
<h3>🖱️ 交互操作</h3> <h3>🖱️ Interactions</h3>
<p>在3D视图中使用鼠标拖拽旋转视角，滚轮缩放，点击数据点查看详细信息。</p> <p>Drag to rotate, scroll to zoom, and click data points in the 3D views to see details.</p>
</div> </div>
<div> <div>
<h3>🎨 颜色编码</h3> <h3>🎨 Color encoding</h3>
<p>左侧和右侧：相同颜色代表相同细胞类型，保持一致性便于对比。中间：颜色代表基因表达强度，红色表示高表达，蓝色表示低表达。</p> <p>Left and right: identical colors indicate the same cell type for consistent comparison. Middle: colors represent expression intensity, red = high, blue = low.</p>
</div> </div>
<div> <div>
<h3>📈 箱线图解读</h3> <h3>📈 Box plot interpretation</h3>
<p>箱线图显示四分位数分布：箱体表示25%-75%范围，中线为中位数，胡须显示数据范围，点表示异常值。</p> <p>The box shows the interquartile range (25%–75%), the middle line is the median, whiskers show the data range, and dots indicate outliers.</p>
</div> </div>
</div> </div>
</div> </div>

37
embryo-frontend/src/pages/HomePage.tsx
View File

@ -7,10 +7,12 @@ const HomePage: React.FC = () => {
<div className="hero-section"> <div className="hero-section">
<div className="hero-content"> <div className="hero-content">
<h1 className="hero-title">Digital Embryo</h1> <h1 className="hero-title">Digital Embryo</h1>
<h2 className="hero-subtitle">数字胚胎发育时空转录组图谱</h2> <h2 className="hero-subtitle">Spatiotemporal transcriptomic atlas of embryonic development</h2>
<p className="hero-description"> <p className="hero-description">
Digital Embryo 数据库包含了小鼠胚胎在 CS7、CS8、CS9 等不同发育阶段的空间转录组数据。 The Digital Embryo database contains spatial transcriptomic data of mouse embryos
我们提供基因表达的空间图谱，基因共表达模块和调控子信息，为深入研究哺乳动物发育的长期问题提供全景图谱。 across multiple developmental stages including CS7, CS8, and CS9. We provide spatial maps of
gene expression, co-expression modules, and regulators to support long-term research on
mammalian development.
</p> </p>
</div> </div>
</div> </div>
@ -22,7 +24,8 @@ const HomePage: React.FC = () => {
<div className="feature-icon">🧬</div> <div className="feature-icon">🧬</div>
<h3 className="feature-title">Spatial clustering</h3> <h3 className="feature-title">Spatial clustering</h3>
<p className="feature-description"> <p className="feature-description">
空间聚类 - 搜索每个胚胎切片中的注释、基因表达、基因共表达模块和调控子。 Spatial clustering – search annotations, gene expression, co-expression modules,
and regulators within each embryo section.
</p> </p>
</Link> </Link>
</div> </div>
@ -32,7 +35,8 @@ const HomePage: React.FC = () => {
<div className="feature-icon">📊</div> <div className="feature-icon">📊</div>
<h3 className="feature-title">Gene Expression</h3> <h3 className="feature-title">Gene Expression</h3>
<p className="feature-description"> <p className="feature-description">
基因表达 - 查看和分析不同发育阶段的基因表达模式和空间分布。 Gene expression – view and analyze expression patterns and spatial distributions
across developmental stages.
</p> </p>
</Link> </Link>
</div> </div>
@ -42,7 +46,7 @@ const HomePage: React.FC = () => {
<div className="feature-icon">🔬</div> <div className="feature-icon">🔬</div>
<h3 className="feature-title">Resource</h3> <h3 className="feature-title">Resource</h3>
<p className="feature-description"> <p className="feature-description">
资源 - 我们为研究社区提供原始数据和分析软件资源。 Resources – raw datasets and analysis software for the research community.
</p> </p>
</Link> </Link>
</div> </div>
@ -52,7 +56,7 @@ const HomePage: React.FC = () => {
<div className="feature-icon">⬇️</div> <div className="feature-icon">⬇️</div>
<h3 className="feature-title">Download</h3> <h3 className="feature-title">Download</h3>
<p className="feature-description"> <p className="feature-description">
下载 - 我们为研究社区提供处理后的数据和元数据。 Downloads – processed data and metadata for the research community.
</p> </p>
</Link> </Link>
</div> </div>
@ -61,38 +65,39 @@ const HomePage: React.FC = () => {
<div className="info-section"> <div className="info-section">
<div className="info-content"> <div className="info-content">
<h3>数据库详情</h3> <h3>Database details</h3>
<p> <p>
Digital Embryo 数据库包含了小鼠胚胎在 CS7（~早期发育）、CS8（~中期发育）、CS9（~后期发育） The Digital Embryo database contains high-resolution spatial transcriptomic data of mouse
等不同发育阶段的高分辨率空间转录组数据。通过先进的空间转录组学技术， embryos at multiple stages including CS7 (early), CS8 (mid), and CS9 (late). Using advanced
我们能够在细胞分辨率水平上揭示基因表达的空间模式，为理解胚胎发育的分子机制提供重要资源。 spatial transcriptomics, we reveal cell-resolution spatial patterns of gene expression to
support the study of molecular mechanisms in embryonic development.
</p> </p>
<div className="statistics"> <div className="statistics">
<div className="stat-item"> <div className="stat-item">
<span className="stat-number">3</span> <span className="stat-number">3</span>
<span className="stat-label">发育阶段</span> <span className="stat-label">Developmental stages</span>
</div> </div>
<div className="stat-item"> <div className="stat-item">
<span className="stat-number">1000+</span> <span className="stat-number">1000+</span>
<span className="stat-label">基因</span> <span className="stat-label">Genes</span>
</div> </div>
<div className="stat-item"> <div className="stat-item">
<span className="stat-number">10000+</span> <span className="stat-number">10000+</span>
<span className="stat-label">细胞</span> <span className="stat-label">Cells</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="citation-section"> <div className="citation-section">
<h3>如何引用</h3> <h3>How to cite</h3>
<div className="citation-box"> <div className="citation-box">
<p> <p>
Digital Embryo: A spatiotemporal transcriptomic atlas of mouse embryogenesis Digital Embryo: A spatiotemporal transcriptomic atlas of mouse embryogenesis
using advanced spatial transcriptomics. <em>Development</em>, 2024. using advanced spatial transcriptomics. <em>Development</em>, 2024.
</p> </p>
<button className="copy-citation-btn">复制引用</button> <button className="copy-citation-btn">Copy citation</button>
</div> </div>
</div> </div>
</div> </div>

50
embryo-frontend/src/pages/Resource.tsx
View File

@ -6,65 +6,65 @@ const Resource: React.FC = () => {
<div className="page-header"> <div className="page-header">
<h1>Resource</h1> <h1>Resource</h1>
<p className="page-description"> <p className="page-description">
我们为研究社区提供原始数据和分析软件资源 Raw data and analysis software resources for the research community
</p> </p>
</div> </div>
<div className="page-content"> <div className="page-content">
<div className="section"> <div className="section">
<h2>数据资源</h2> <h2>Data resources</h2>
<div className="resource-grid"> <div className="resource-grid">
<div className="resource-card"> <div className="resource-card">
<h3>原始数据</h3> <h3>Raw data</h3>
<p>包含完整的空间转录组测序数据，格式为 H5AD 和 H5 文件。</p> <p>Complete spatial transcriptomic sequencing data in H5AD and H5 formats.</p>
<ul> <ul>
<li>CS7 阶段数据 (CS7.h5ad)</li> <li>CS7 stage data (CS7.h5ad)</li>
<li>CS8 阶段数据 (CS8.h5ad)</li> <li>CS8 stage data (CS8.h5ad)</li>
<li>CS9 阶段数据 (CS9.h5ad)</li> <li>CS9 stage data (CS9.h5ad)</li>
</ul> </ul>
</div> </div>
<div className="resource-card"> <div className="resource-card">
<h3>处理后数据</h3> <h3>Processed data</h3>
<p>经过质量控制、标准化和降维处理的数据，可直接用于下游分析。</p> <p>Quality-controlled, normalized, and dimension-reduced data ready for downstream analyses.</p>
<ul> <ul>
<li>基因表达矩阵</li> <li>Gene expression matrix</li>
<li>细胞类型注释</li> <li>Cell type annotations</li>
<li>空间坐标信息</li> <li>Spatial coordinate information</li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
<div className="section"> <div className="section">
<h2>软件工具</h2> <h2>Software tools</h2>
<div className="software-grid"> <div className="software-grid">
<div className="software-card"> <div className="software-card">
<h3>数据处理流程</h3> <h3>Data processing pipeline</h3>
<p>完整的空间转录组数据分析流程，包括预处理、质量控制、聚类和可视化。</p> <p>A complete workflow for spatial transcriptomics, including preprocessing, QC, clustering, and visualization.</p>
<div className="software-links"> <div className="software-links">
<a href="#" className="software-link">GitHub 仓库</a> <a href="#" className="software-link">GitHub repository</a>
<a href="#" className="software-link">使用文档</a> <a href="#" className="software-link">Documentation</a>
</div> </div>
</div> </div>
<div className="software-card"> <div className="software-card">
<h3>可视化工具</h3> <h3>Visualization tools</h3>
<p>基于 Three.js 的 3D 可视化工具，支持交互式探索基因表达的空间模式。</p> <p>Three.js-based 3D visualization tools for interactive exploration of spatial expression patterns.</p>
<div className="software-links"> <div className="software-links">
<a href="#" className="software-link">在线工具</a> <a href="#" className="software-link">Online tool</a>
<a href="#" className="software-link">API 文档</a> <a href="#" className="software-link">API docs</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="section"> <div className="section">
<h2>技术支持</h2> <h2>Support</h2>
<div className="support-info"> <div className="support-info">
<p>如果您在使用数据或软件过程中遇到问题，请通过以下方式联系我们：</p> <p>If you encounter issues using the data or software, contact us via:</p>
<ul> <ul>
<li>Email: support@digital-embryo.org</li> <li>Email: support@digital-embryo.org</li>
<li>GitHub Issues: 提交技术问题和功能请求</li> <li>GitHub Issues: submit technical issues and feature requests</li>
<li>文档中心: 查看详细的使用指南</li> <li>Docs Center: see detailed user guides</li>
</ul> </ul>
</div> </div>
</div> </div>

30
embryo-frontend/src/pages/SpatialClustering.tsx
View File

@ -6,39 +6,39 @@ const SpatialClustering: React.FC = () => {
<div className="page-header"> <div className="page-header">
<h1>Spatial clustering</h1> <h1>Spatial clustering</h1>
<p className="page-description"> <p className="page-description">
空间聚类分析 - 搜索每个胚胎切片中的注释、基因表达、基因共表达模块和调控子 Spatial clustering analysis – search annotations, gene expression, co-expression modules, and regulators in each embryo section
</p> </p>
</div> </div>
<div className="page-content"> <div className="page-content">
<div className="section"> <div className="section">
<h2>空间聚类功能</h2> <h2>Clustering features</h2>
<div className="clustering-features"> <div className="clustering-features">
<div className="cluster-card"> <div className="cluster-card">
<h3>细胞类型注释</h3> <h3>Cell type annotation</h3>
<p>基于基因表达谱和空间位置信息，自动识别和注释不同的细胞类型。</p> <p>Automatically identify and annotate cell types based on expression profiles and spatial coordinates.</p>
</div> </div>
<div className="cluster-card"> <div className="cluster-card">
<h3>基因共表达模块</h3> <h3>Gene co-expression modules</h3>
<p>识别在相同空间区域内共同表达的基因模块，揭示功能相关的基因网络。</p> <p>Identify modules of co-expressed genes within the same spatial regions to reveal functional networks.</p>
</div> </div>
<div className="cluster-card"> <div className="cluster-card">
<h3>空间调控子</h3> <h3>Spatial regulators</h3>
<p>分析空间特异性的转录调控网络，理解组织形成的分子机制。</p> <p>Analyze spatially specific transcriptional regulation networks to understand tissue formation mechanisms.</p>
</div> </div>
</div> </div>
</div> </div>
<div className="section"> <div className="section">
<h2>交互式探索</h2> <h2>Interactive exploration</h2>
<div className="interactive-notice"> <div className="interactive-notice">
<p>🚧 交互式空间聚类工具正在开发中...</p> <p>🚧 The interactive spatial clustering tool is under development...</p>
<p>即将支持：</p> <p>Coming soon:</p>
<ul> <ul>
<li>实时聚类参数调整</li> <li>Real-time clustering parameter tuning</li>
<li>多种聚类算法选择</li> <li>Multiple clustering algorithms</li>
<li>聚类结果可视化</li> <li>Cluster result visualization</li>
<li>差异基因分析</li> <li>Differential gene analysis</li>
</ul> </ul>
</div> </div>
</div> </div>

106
embryo-frontend/src/pages/TemporalAnalysis.tsx
View File

@ -312,18 +312,19 @@ const TemporalAnalysis: React.FC = () => {
return ( return (
<div className="page-container"> <div className="page-container">
<div className="page-header"> <div className="page-header">
<h1>时间序列分析</h1> <h1>Temporal Analysis</h1>
<p className="page-description"> <p className="page-description">
通过对比不同发育阶段的细胞类型分布，分析胚胎发育过程中细胞类型的变化和演进模式。 Compare cell type distributions across stages to analyze changes and evolutionary patterns during embryonic development.
</p> </p>
</div> </div>
<div className="page-content"> <div className="page-content">
{/* 第一部分：三个发育阶段的细胞类型分布 */} {/* 第一部分：三个发育阶段的细胞类型分布 */}
<div className="section"> <div className="section">
<h2>发育阶段对比</h2> <h2>Stage comparison</h2>
<p className="flat-section-description"> <p className="flat-section-description">
下方展示了CS7、CS8、CS9三个发育阶段的细胞类型3D分布图。通过对比可以观察细胞类型在发育过程中的空间分布变化。 The three 3D views below show cell type distributions for CS7, CS8, and CS9.
Compare spatial distributions to observe changes over development.
</p> </p>
<div <div
@ -339,7 +340,7 @@ const TemporalAnalysis: React.FC = () => {
> >
{/* CS7阶段细胞类型分布 */} {/* CS7阶段细胞类型分布 */}
<div className="visualization-container"> <div className="visualization-container">
<h3 style={{ marginBottom: "1rem", textAlign: "center" }}>CS7 - 早期发育阶段</h3> <h3 style={{ marginBottom: "1rem", textAlign: "center" }}>CS7 - Early developmental stage</h3>
{errorCS7 && <div className="error-message">{errorCS7}</div>} {errorCS7 && <div className="error-message">{errorCS7}</div>}
{cellDataCS7.length > 0 ? ( {cellDataCS7.length > 0 ? (
<PointCloud data={cellDataCS7} isCategorical={true} /> <PointCloud data={cellDataCS7} isCategorical={true} />
@ -348,14 +349,14 @@ const TemporalAnalysis: React.FC = () => {
{loadingCS7 ? ( {loadingCS7 ? (
<div> <div>
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔄</div> <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔄</div>
<p>正在加载CS7数据...</p> <p>Loading CS7 data...</p>
</div> </div>
) : ( ) : (
<div> <div>
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🧬</div> <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🧬</div>
<p>CS7阶段细胞类型分布</p> <p>CS7 cell type distribution</p>
<p style={{ fontSize: "0.9rem", color: "var(--text-secondary)" }}> <p style={{ fontSize: "0.9rem", color: "var(--text-secondary)" }}>
早期发育阶段 Early developmental stage
</p> </p>
</div> </div>
)} )}
@ -365,7 +366,7 @@ const TemporalAnalysis: React.FC = () => {
{/* CS8阶段细胞类型分布 */} {/* CS8阶段细胞类型分布 */}
<div className="visualization-container"> <div className="visualization-container">
<h3 style={{ marginBottom: "1rem", textAlign: "center" }}>CS8 - 中期发育阶段</h3> <h3 style={{ marginBottom: "1rem", textAlign: "center" }}>CS8 - Mid developmental stage</h3>
{errorCS8 && <div className="error-message">{errorCS8}</div>} {errorCS8 && <div className="error-message">{errorCS8}</div>}
{cellDataCS8.length > 0 ? ( {cellDataCS8.length > 0 ? (
<PointCloud data={cellDataCS8} isCategorical={true} /> <PointCloud data={cellDataCS8} isCategorical={true} />
@ -374,14 +375,14 @@ const TemporalAnalysis: React.FC = () => {
{loadingCS8 ? ( {loadingCS8 ? (
<div> <div>
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔄</div> <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔄</div>
<p>正在加载CS8数据...</p> <p>Loading CS8 data...</p>
</div> </div>
) : ( ) : (
<div> <div>
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🧬</div> <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🧬</div>
<p>CS8阶段细胞类型分布</p> <p>CS8 cell type distribution</p>
<p style={{ fontSize: "0.9rem", color: "var(--text-secondary)" }}> <p style={{ fontSize: "0.9rem", color: "var(--text-secondary)" }}>
中期发育阶段 Mid developmental stage
</p> </p>
</div> </div>
)} )}
@ -391,7 +392,7 @@ const TemporalAnalysis: React.FC = () => {
{/* CS9阶段细胞类型分布 */} {/* CS9阶段细胞类型分布 */}
<div className="visualization-container"> <div className="visualization-container">
<h3 style={{ marginBottom: "1rem", textAlign: "center" }}>CS9 - 后期发育阶段</h3> <h3 style={{ marginBottom: "1rem", textAlign: "center" }}>CS9 - Late developmental stage</h3>
{errorCS9 && <div className="error-message">{errorCS9}</div>} {errorCS9 && <div className="error-message">{errorCS9}</div>}
{cellDataCS9.length > 0 ? ( {cellDataCS9.length > 0 ? (
<PointCloud data={cellDataCS9} isCategorical={true} /> <PointCloud data={cellDataCS9} isCategorical={true} />
@ -400,14 +401,14 @@ const TemporalAnalysis: React.FC = () => {
{loadingCS9 ? ( {loadingCS9 ? (
<div> <div>
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔄</div> <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔄</div>
<p>正在加载CS9数据...</p> <p>Loading CS9 data...</p>
</div> </div>
) : ( ) : (
<div> <div>
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🧬</div> <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🧬</div>
<p>CS9阶段细胞类型分布</p> <p>CS9 cell type distribution</p>
<p style={{ fontSize: "0.9rem", color: "var(--text-secondary)" }}> <p style={{ fontSize: "0.9rem", color: "var(--text-secondary)" }}>
后期发育阶段 Late developmental stage
</p> </p>
</div> </div>
)} )}
@ -419,9 +420,10 @@ const TemporalAnalysis: React.FC = () => {
{/* 第二部分和第三部分：并排显示 */} {/* 第二部分和第三部分：并排显示 */}
<div className="section"> <div className="section">
<h2>流动分析与基因时序</h2> <h2>Flow and gene timeline</h2>
<p className="flat-section-description"> <p className="flat-section-description">
左侧桑基图展示细胞类型在发育阶段间的流动模式，右侧线图显示选定基因在各细胞类型中的占比变化。 The Sankey diagram (left) shows cell type flows across stages; the line chart (right)
shows the proportion changes of the selected gene across cell types.
</p> </p>
<div <div
@ -434,7 +436,7 @@ const TemporalAnalysis: React.FC = () => {
> >
{/* 桑基图部分 */} {/* 桑基图部分 */}
<div className="visualization-container"> <div className="visualization-container">
<h3 style={{ marginBottom: "1rem", textAlign: "center" }}>细胞类型演进流动图</h3> <h3 style={{ marginBottom: "1rem", textAlign: "center" }}>Cell type flow diagram</h3>
<div style={{ width: "100%", height: "500px", position: "relative" }}> <div style={{ width: "100%", height: "500px", position: "relative" }}>
{sankeyData.nodes.length > 0 && sankeyData.links.length > 0 ? ( {sankeyData.nodes.length > 0 && sankeyData.links.length > 0 ? (
<> <>
@ -466,7 +468,7 @@ const TemporalAnalysis: React.FC = () => {
legends={[]} legends={[]}
motionConfig="gentle" motionConfig="gentle"
/> />
{/* 发育阶段标签行 */} {/* Stage labels */}
<div <div
style={{ style={{
position: "absolute", position: "absolute",
@ -482,13 +484,13 @@ const TemporalAnalysis: React.FC = () => {
}} }}
> >
<div style={{ textAlign: "left", flex: 1, paddingLeft: "20px" }}> <div style={{ textAlign: "left", flex: 1, paddingLeft: "20px" }}>
CS7 - 早期 CS7 - Early
</div> </div>
<div style={{ textAlign: "center", flex: 1 }}> <div style={{ textAlign: "center", flex: 1 }}>
CS8 - 中期 CS8 - Mid
</div> </div>
<div style={{ textAlign: "right", flex: 1, paddingRight: "20px" }}> <div style={{ textAlign: "right", flex: 1, paddingRight: "20px" }}>
CS9 - 后期 CS9 - Late
</div> </div>
</div> </div>
</> </>
@ -497,12 +499,12 @@ const TemporalAnalysis: React.FC = () => {
{sankeyLoading || loadingCS7 || loadingCS8 || loadingCS9 ? ( {sankeyLoading || loadingCS7 || loadingCS8 || loadingCS9 ? (
<div> <div>
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔄</div> <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔄</div>
<p>正在构建流动图...</p> <p>Building flow diagram...</p>
</div> </div>
) : ( ) : (
<div> <div>
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>📊</div> <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>📊</div>
<p>等待数据加载</p> <p>Waiting for data</p>
</div> </div>
)} )}
</div> </div>
@ -512,7 +514,7 @@ const TemporalAnalysis: React.FC = () => {
{/* 基因时序分析部分 */} {/* 基因时序分析部分 */}
<div className="visualization-container"> <div className="visualization-container">
<h3 style={{ marginBottom: "1rem", textAlign: "center" }}>基因时序分析</h3> <h3 style={{ marginBottom: "1rem", textAlign: "center" }}>Gene temporal analysis</h3>
<div style={{ display: "flex", justifyContent: "center", alignItems: "center", marginBottom: "1rem" }}> <div style={{ display: "flex", justifyContent: "center", alignItems: "center", marginBottom: "1rem" }}>
<select <select
value={selectedGene} value={selectedGene}
@ -522,10 +524,10 @@ const TemporalAnalysis: React.FC = () => {
fetchTemporalAnalysis(e.target.value); fetchTemporalAnalysis(e.target.value);
} }
}} }}
title="选择基因进行时序分析" title="Select a gene for temporal analysis"
style={{ padding: "0.5rem", borderRadius: "0.3rem", border: "1px solid #ccc", fontSize: "0.9rem" }} style={{ padding: "0.5rem", borderRadius: "0.3rem", border: "1px solid #ccc", fontSize: "0.9rem" }}
> >
<option value="">请选择基因</option> <option value="">Please select a gene</option>
{availableGenes.map((gene) => ( {availableGenes.map((gene) => (
<option key={gene} value={gene}> <option key={gene} value={gene}>
{gene} {gene}
@ -538,7 +540,7 @@ const TemporalAnalysis: React.FC = () => {
{temporalLoading ? ( {temporalLoading ? (
<div className="no-data-message"> <div className="no-data-message">
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔄</div> <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔄</div>
<p>正在加载时序数据...</p> <p>Loading temporal data...</p>
</div> </div>
) : temporalError ? ( ) : temporalError ? (
<div className="error-message">{temporalError}</div> <div className="error-message">{temporalError}</div>
@ -557,19 +559,19 @@ const TemporalAnalysis: React.FC = () => {
yFormat=" >-.2f" yFormat=" >-.2f"
axisTop={null} axisTop={null}
axisRight={null} axisRight={null}
axisBottom={{ axisBottom={{
tickSize: 5, tickSize: 5,
tickPadding: 5, tickPadding: 5,
tickRotation: 0, tickRotation: 0,
legend: '发育阶段', legend: 'Developmental stage',
legendPosition: 'middle', legendPosition: 'middle',
legendOffset: 40 legendOffset: 40
}} }}
axisLeft={{ axisLeft={{
tickSize: 5, tickSize: 5,
tickPadding: 5, tickPadding: 5,
tickRotation: 0, tickRotation: 0,
legend: '占比 (%)', legend: 'Proportion (%)',
legendPosition: 'middle', legendPosition: 'middle',
legendOffset: -50 legendOffset: -50
}} }}
@ -609,9 +611,9 @@ const TemporalAnalysis: React.FC = () => {
]} ]}
/> />
) : ( ) : (
<div className="no-data-message"> <div className="no-data-message">
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>📊</div> <div style={{ fontSize: "2rem", marginBottom: "1rem" }}>📊</div>
<p>请选择基因查看时序变化</p> <p>Please select a gene to view temporal changes</p>
</div> </div>
)} )}
</div> </div>
@ -620,39 +622,39 @@ const TemporalAnalysis: React.FC = () => {
</div> </div>
<div className="section"> <div className="section">
<h2>使用说明</h2> <h2>User Guide</h2>
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "2rem", marginTop: "1.5rem" }}> <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "2rem", marginTop: "1.5rem" }}>
<div> <div>
<h3>📅 时间序列对比</h3> <h3>📅 Time-series comparison</h3>
<p>三个3D图分别展示CS7、CS8、CS9三个发育阶段的细胞类型分布，可以直观地观察细胞类型随时间的变化。</p> <p>The three 3D views for CS7, CS8, and CS9 allow intuitive observation of how cell types change over time.</p>
</div> </div>
<div> <div>
<h3>🌊 桑基图解读</h3> <h3>🌊 Interpreting the Sankey diagram</h3>
<p>桑基图显示细胞类型的演进流动：节点大小表示占比，连接线显示相同细胞类型在不同阶段间的延续性，颜色保持一致便于追踪。</p> <p>Node size reflects proportions; links show continuity of the same cell type across stages. Colors are consistent to aid tracking.</p>
</div> </div>
<div> <div>
<h3>📊 基因时序分析</h3> <h3>📊 Gene temporal analysis</h3>
<p>选择特定基因后，堆叠面积图显示该基因在各细胞类型中的占比变化，帮助理解基因在发育过程中的表达模式演进。</p> <p>After selecting a gene, the line chart shows how its proportion changes across cell types, revealing expression dynamics during development.</p>
</div> </div>
<div> <div>
<h3>🖱️ 交互操作</h3> <h3>🖱️ Interactions</h3>
<p>在3D视图中使用鼠标拖拽旋转视角，滚轮缩放，点击数据点查看详细信息。在桑基图和堆叠图中悬停查看具体数值。</p> <p>Rotate with drag, zoom with scroll, click data points for details. Hover over the Sankey and line charts to see exact values.</p>
</div> </div>
<div> <div>
<h3>🎨 颜色编码</h3> <h3>🎨 Color encoding</h3>
<p>相同颜色代表相同的细胞类型，在所有图表中保持一致，便于追踪特定细胞类型的变化和流动模式。</p> <p>Identical colors denote the same cell type across charts to make it easy to track changes and flows.</p>
</div> </div>
<div> <div>
<h3>🔍 发育模式识别</h3> <h3>🔍 Developmental pattern identification</h3>
<p>通过对比三个阶段和不同基因，可以识别细胞类型的出现、消失、迁移和分化模式，以及基因表达的动态变化。</p> <p>Compare stages and genes to identify emergence, disappearance, migration, and differentiation of cell types and their expression dynamics.</p>
</div> </div>
<div> <div>
<h3>📈 百分比分析</h3> <h3>📈 Percentage analysis</h3>
<p>桑基图和堆叠图中的百分比表示各细胞类型在对应发育阶段中的相对丰度，帮助理解细胞类型组成的动态平衡。</p> <p>Percentages indicate relative abundance of cell types per stage, helping interpret dynamic composition changes.</p>
</div> </div>
<div> <div>
<h3>🧬 基因选择策略</h3> <h3>🧬 Gene selection strategy</h3>
<p>选择不同的发育相关基因（如SOX2、NANOG等），观察其在胚胎发育过程中的表达变化模式和细胞类型特异性。</p> <p>Select development-related genes (e.g., SOX2, NANOG) to observe expression changes and cell-type specificity during embryogenesis.</p>
</div> </div>
</div> </div>
</div> </div>