Compare commits
No commits in common. "801700cd3d421c045bf588ac1e9a26288d2c88e8" and "413eb3e49f0a7ac28325b62e9d46a4b45cb1d92b" have entirely different histories.
801700cd3d
...
413eb3e49f
@ -1,11 +1,11 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Digital Embryo - A spatiotemporal transcriptomic atlas and database of embryonic development" />
|
||||
<title>Digital Embryo | Spatiotemporal transcriptomic atlas</title>
|
||||
<meta name="description" content="Digital Embryo - 数字胚胎发育时空转录组图谱数据库" />
|
||||
<title>Digital Embryo | 数字胚胎发育时空转录组图谱</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@ -189,7 +189,15 @@ const PointCloud: React.FC<PointCloudProps> = ({ data, isCategorical = false, au
|
||||
const intersects = raycaster.intersectObject(points);
|
||||
|
||||
if (intersects.length > 0) {
|
||||
// Click handling can be added here if needed
|
||||
const i = intersects[0].index ?? 0;
|
||||
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)}`);
|
||||
// }
|
||||
}
|
||||
};
|
||||
|
||||
@ -301,7 +309,7 @@ const PointCloud: React.FC<PointCloudProps> = ({ data, isCategorical = false, au
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ fontWeight: '600', marginBottom: '10px', fontSize: '14px' }}>Cell types</div>
|
||||
<div style={{ fontWeight: '600', marginBottom: '10px', fontSize: '14px' }}>细胞类型</div>
|
||||
<div>
|
||||
{cellTypes.map(type => {
|
||||
const cellColor = colorMap.get(type);
|
||||
@ -331,7 +339,7 @@ const PointCloud: React.FC<PointCloudProps> = ({ data, isCategorical = false, au
|
||||
// 数值数据图例
|
||||
return (
|
||||
<div>
|
||||
<div style={{ fontWeight: '600', marginBottom: '10px', fontSize: '14px' }}>Expression intensity</div>
|
||||
<div style={{ fontWeight: '600', marginBottom: '10px', fontSize: '14px' }}>表达强度</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
||||
<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))',
|
||||
@ -340,8 +348,8 @@ const PointCloud: React.FC<PointCloudProps> = ({ data, isCategorical = false, au
|
||||
marginBottom: '5px'
|
||||
}} />
|
||||
<div style={{ fontSize: '11px', color: '#666' }}>
|
||||
<div>High</div>
|
||||
<div>Low</div>
|
||||
<div>高</div>
|
||||
<div>低</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,32 +3,32 @@ import React from "react";
|
||||
const Download: React.FC = () => {
|
||||
const downloadItems = [
|
||||
{
|
||||
title: "CS7 stage dataset",
|
||||
description: "Complete spatial transcriptomic data for mouse embryo stage CS7",
|
||||
title: "CS7 阶段数据",
|
||||
description: "小鼠胚胎 CS7 发育阶段的完整空间转录组数据",
|
||||
files: [
|
||||
{ name: "CS7.h5ad", size: "45.2 MB", format: "AnnData" },
|
||||
{ name: "CS7_metadata.csv", size: "2.1 MB", format: "CSV" },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "CS8 stage dataset",
|
||||
description: "Complete spatial transcriptomic data for mouse embryo stage CS8",
|
||||
title: "CS8 阶段数据",
|
||||
description: "小鼠胚胎 CS8 发育阶段的完整空间转录组数据",
|
||||
files: [
|
||||
{ name: "CS8.h5ad", size: "52.8 MB", format: "AnnData" },
|
||||
{ name: "CS8_metadata.csv", size: "2.3 MB", format: "CSV" },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "CS9 stage dataset",
|
||||
description: "Complete spatial transcriptomic data for mouse embryo stage CS9",
|
||||
title: "CS9 阶段数据",
|
||||
description: "小鼠胚胎 CS9 发育阶段的完整空间转录组数据",
|
||||
files: [
|
||||
{ name: "CS9.h5ad", size: "61.4 MB", format: "AnnData" },
|
||||
{ name: "CS9_metadata.csv", size: "2.7 MB", format: "CSV" },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Mock dataset",
|
||||
description: "Synthetic 3D expression data for testing and development",
|
||||
title: "模拟数据集",
|
||||
description: "用于测试和开发的 3D 表达数据模拟集",
|
||||
files: [
|
||||
{ name: "embryo_mock_3D_expression.h5ad", size: "18.9 MB", format: "AnnData" },
|
||||
]
|
||||
@ -40,26 +40,26 @@ const Download: React.FC = () => {
|
||||
<div className="page-header">
|
||||
<h1>Download</h1>
|
||||
<p className="page-description">
|
||||
Processed data and metadata available for download for the research community
|
||||
我们为研究社区提供处理后的数据和元数据下载
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="page-content">
|
||||
<div className="download-notice">
|
||||
<h2>Usage policy</h2>
|
||||
<h2>使用协议</h2>
|
||||
<p>
|
||||
When downloading and using these data, please follow the policy below:
|
||||
下载和使用这些数据时，请遵守以下协议：
|
||||
</p>
|
||||
<ul>
|
||||
<li>Data are for academic research use only</li>
|
||||
<li>If used in publications, please cite our work</li>
|
||||
<li>Redistribution of raw data is prohibited</li>
|
||||
<li>Commercial use requires separate authorization</li>
|
||||
<li>数据仅限于学术研究用途</li>
|
||||
<li>如果使用这些数据发表论文，请引用我们的工作</li>
|
||||
<li>禁止重新分发原始数据</li>
|
||||
<li>商业用途需要单独授权</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="downloads-section">
|
||||
<h2>Available downloads</h2>
|
||||
<h2>可下载数据</h2>
|
||||
<div className="download-grid">
|
||||
{downloadItems.map((item, index) => (
|
||||
<div key={index} className="download-card">
|
||||
@ -74,7 +74,7 @@ const Download: React.FC = () => {
|
||||
{file.size} | {file.format}
|
||||
</span>
|
||||
</div>
|
||||
<button className="download-btn">Download</button>
|
||||
<button className="download-btn">下载</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@ -84,17 +84,17 @@ const Download: React.FC = () => {
|
||||
</div>
|
||||
|
||||
<div className="bulk-download">
|
||||
<h2>Bulk download</h2>
|
||||
<h2>批量下载</h2>
|
||||
<div className="bulk-options">
|
||||
<div className="bulk-option">
|
||||
<h3>Full dataset</h3>
|
||||
<p>Download all stages' data and metadata (~185 MB)</p>
|
||||
<button className="bulk-download-btn">Download all</button>
|
||||
<h3>完整数据集</h3>
|
||||
<p>下载所有阶段的数据和元数据（约 185 MB）</p>
|
||||
<button className="bulk-download-btn">下载全部</button>
|
||||
</div>
|
||||
<div className="bulk-option">
|
||||
<h3>Metadata package</h3>
|
||||
<p>Download metadata files for all stages only (~7 MB)</p>
|
||||
<button className="bulk-download-btn">Download metadata</button>
|
||||
<h3>元数据包</h3>
|
||||
<p>仅下载所有阶段的元数据文件（约 7 MB）</p>
|
||||
<button className="bulk-download-btn">下载元数据</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -83,7 +83,7 @@ const EmbryoGeneration: React.FC = () => {
|
||||
<div className="page-header">
|
||||
<h1>Embryo Generation</h1>
|
||||
<p className="page-description">
|
||||
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.
|
||||
观察胚胎发育过程中的细胞迁移和融合。CS7、CS8、CS7.5点云在同一3D视图中展示，动画模拟细胞从两侧汇聚到中间。
|
||||
</p>
|
||||
</div>
|
||||
<div className="page-content">
|
||||
@ -110,7 +110,7 @@ const EmbryoGeneration: React.FC = () => {
|
||||
opacity: isAnimating || loading ? 0.6 : 1
|
||||
}}
|
||||
>
|
||||
{isAnimating ? "Animating..." : "Start animation"}
|
||||
{isAnimating ? "动画中..." : "开始动画"}
|
||||
</button>
|
||||
<button
|
||||
onClick={resetAnimation}
|
||||
@ -125,10 +125,10 @@ const EmbryoGeneration: React.FC = () => {
|
||||
opacity: loading ? 0.6 : 1
|
||||
}}
|
||||
>
|
||||
Reset
|
||||
重置
|
||||
</button>
|
||||
<label style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
|
||||
Animation speed:
|
||||
动画速度:
|
||||
<input
|
||||
type="range"
|
||||
min="0.5"
|
||||
@ -141,7 +141,7 @@ const EmbryoGeneration: React.FC = () => {
|
||||
<span>{animationSpeed}x</span>
|
||||
</label>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
|
||||
Progress: {Math.round(animationProgress * 100)}%
|
||||
进度: {Math.round(animationProgress * 100)}%
|
||||
<div style={{
|
||||
width: "100px",
|
||||
height: "8px",
|
||||
@ -166,23 +166,23 @@ const EmbryoGeneration: React.FC = () => {
|
||||
animationProgress={animationProgress}
|
||||
/>
|
||||
<div className="section">
|
||||
<h2>User Guide</h2>
|
||||
<h2>使用说明</h2>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "2rem", marginTop: "1.5rem" }}>
|
||||
<div>
|
||||
<h3>🎬 Animation controls</h3>
|
||||
<p>Click "Start animation" to watch the CS7.5 cell formation process. Adjust speed and use Reset to start over.</p>
|
||||
<h3>🎬 动画控制</h3>
|
||||
<p>点击"开始动画"按钮观看CS7.5阶段的细胞生成过程。可以调节动画速度，使用重置按钮重新开始。</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>🖱️ Interactions</h3>
|
||||
<p>Drag to rotate, scroll to zoom, and click data points in the 3D view to see details.</p>
|
||||
<h3>🖱️ 交互操作</h3>
|
||||
<p>在3D视图中使用鼠标拖拽旋转视角，滚轮缩放，点击数据点查看详细信息。</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>🎨 Color encoding</h3>
|
||||
<p>Identical colors indicate the same cell type, making it easier to observe developmental changes.</p>
|
||||
<h3>🎨 颜色编码</h3>
|
||||
<p>相同颜色代表相同细胞类型，便于观察细胞在发育过程中的变化。</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>📊 Developmental process</h3>
|
||||
<p>Observe the process from CS7 and CS8 to CS7.5 to understand spatial distribution changes and cell-type differentiation.</p>
|
||||
<h3>📊 发育过程</h3>
|
||||
<p>观察从CS7和CS8到CS7.5的胚胎发育过程，了解细胞的空间分布变化和类型分化。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -375,7 +375,8 @@ const UnifiedEmbryoAnimation: React.FC<UnifiedEmbryoAnimationProps> = ({ cs7Data
|
||||
|
||||
// 为CS7.5的点分配起始位置（从CS7和CS8的实际数据中获取）
|
||||
// 基于细胞类型或颜色来分配起始位置，确保相同颜色的点从两侧出现
|
||||
// Left/right source point placeholders removed (unused)
|
||||
const leftSourcePoints = [];
|
||||
const rightSourcePoints = [];
|
||||
|
||||
// 按细胞类型分组CS7和CS8数据
|
||||
const cs7ByType = new Map<string, Point[]>();
|
||||
|
||||
@ -141,8 +141,7 @@ const GeneView: React.FC = () => {
|
||||
<div className="page-header">
|
||||
<h1>Gene Expression</h1>
|
||||
<p className="page-description">
|
||||
View and analyze gene expression patterns and spatial distributions across developmental stages.
|
||||
Explore changes during embryonic development with 3D visualizations.
|
||||
查看和分析不同发育阶段的基因表达模式和空间分布。通过3D可视化探索基因在胚胎发育过程中的表达变化。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -156,7 +155,7 @@ const GeneView: React.FC = () => {
|
||||
marginBottom: "2rem"
|
||||
}}>
|
||||
<label>
|
||||
Developmental stage:
|
||||
发育阶段:
|
||||
<select
|
||||
value={selectedStage}
|
||||
onChange={(e) => {
|
||||
@ -167,33 +166,33 @@ const GeneView: React.FC = () => {
|
||||
setError("");
|
||||
}}
|
||||
>
|
||||
<option value="CS7">CS7 - Early stage</option>
|
||||
<option value="CS8">CS8 - Mid stage</option>
|
||||
<option value="CS9">CS9 - Late stage</option>
|
||||
<option value="CS11">CS11 - Later stage</option>
|
||||
<option value="CS12">CS12 - Later stage</option>
|
||||
<option value="CS13">CS13 - Later stage</option>
|
||||
<option value="CS14">CS14 - Later stage</option>
|
||||
<option value="CS15">CS15 - Later stage</option>
|
||||
<option value="CS16">CS16 - Later stage</option>
|
||||
<option value="CS17">CS17 - Later stage</option>
|
||||
<option value="CS18">CS18 - Later stage</option>
|
||||
<option value="CS19">CS19 - Later stage</option>
|
||||
<option value="CS20">CS20 - Later stage</option>
|
||||
<option value="CS21">CS21 - Later stage</option>
|
||||
<option value="CS22">CS22 - Later stage</option>
|
||||
<option value="CS23">CS23 - Later stage</option>
|
||||
<option value="CS7">CS7 - 早期发育阶段</option>
|
||||
<option value="CS8">CS8 - 中期发育阶段</option>
|
||||
<option value="CS9">CS9 - 后期发育阶段</option>
|
||||
<option value="CS11">CS11 - 后期发育阶段</option>
|
||||
<option value="CS12">CS12 - 后期发育阶段</option>
|
||||
<option value="CS13">CS13 - 后期发育阶段</option>
|
||||
<option value="CS14">CS14 - 后期发育阶段</option>
|
||||
<option value="CS15">CS15 - 后期发育阶段</option>
|
||||
<option value="CS16">CS16 - 后期发育阶段</option>
|
||||
<option value="CS17">CS17 - 后期发育阶段</option>
|
||||
<option value="CS18">CS18 - 后期发育阶段</option>
|
||||
<option value="CS19">CS19 - 后期发育阶段</option>
|
||||
<option value="CS20">CS20 - 后期发育阶段</option>
|
||||
<option value="CS21">CS21 - 后期发育阶段</option>
|
||||
<option value="CS22">CS22 - 后期发育阶段</option>
|
||||
<option value="CS23">CS23 - 后期发育阶段</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label htmlFor="gene-select">Target gene:</label>
|
||||
<label htmlFor="gene-select">目标基因:</label>
|
||||
<select
|
||||
id="gene-select"
|
||||
aria-label="Select gene"
|
||||
aria-label="选择基因"
|
||||
value={gene}
|
||||
onChange={(e) => setGene(e.target.value)}
|
||||
>
|
||||
<option value="">-- Select gene --</option>
|
||||
<option value="">-- 请选择基因 --</option>
|
||||
{availableGenes.map((g) => (
|
||||
<option key={g} value={g}>
|
||||
{g}
|
||||
@ -202,7 +201,7 @@ const GeneView: React.FC = () => {
|
||||
</select>
|
||||
|
||||
<button onClick={handleSearch} disabled={!gene || loading}>
|
||||
{loading ? "Loading..." : "Query expression"}
|
||||
{loading ? "加载中..." : "查询表达"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -211,9 +210,8 @@ const GeneView: React.FC = () => {
|
||||
|
||||
{/* 3D 可视化说明 */}
|
||||
<p className="flat-section-description">
|
||||
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.
|
||||
下方展示了{selectedStage}发育阶段的细胞类型分布（左）、所选基因的表达模式（中）和基因在各细胞类型中的表达分布（右）。
|
||||
点击任意数据点可查看详细信息。
|
||||
</p>
|
||||
|
||||
{/* 三可视化区域 */}
|
||||
@ -230,7 +228,7 @@ const GeneView: React.FC = () => {
|
||||
>
|
||||
{/* 细胞类型可视化 */}
|
||||
<div className="visualization-container" style={{ width: "700px", minWidth: "700px", maxWidth: "700px" }}>
|
||||
<h3 style={{ textAlign: "center" }}>Cell type distribution</h3>
|
||||
<h3 style={{ textAlign: "center" }}>细胞类型分布</h3>
|
||||
{cellError && <div className="error-message">{cellError}</div>}
|
||||
{cellData.length > 0 ? (
|
||||
<div style={{ width: "700px", height: "100%" }}>
|
||||
@ -241,14 +239,14 @@ const GeneView: React.FC = () => {
|
||||
{cellLoading ? (
|
||||
<div>
|
||||
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔄</div>
|
||||
<p>Loading cell type data...</p>
|
||||
<p>正在加载细胞类型数据...</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🧬</div>
|
||||
<p>Cell type distribution</p>
|
||||
<p>细胞类型分布</p>
|
||||
<p style={{ fontSize: "0.9rem", color: "var(--text-secondary)" }}>
|
||||
Stage: {selectedStage}
|
||||
{selectedStage} 阶段
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
@ -258,7 +256,7 @@ const GeneView: React.FC = () => {
|
||||
|
||||
{/* 基因表达可视化 */}
|
||||
<div className="visualization-container" style={{ width: "500px", minWidth: "500px", maxWidth: "500px" }}>
|
||||
<h3 style={{ textAlign: "center" }}>Gene expression pattern</h3>
|
||||
<h3 style={{ textAlign: "center" }}>基因表达模式</h3>
|
||||
{data.length > 0 ? (
|
||||
<div style={{ width: "500px", height: "100%" }}>
|
||||
<PointCloud data={data} autoRotate={true} />
|
||||
@ -268,14 +266,14 @@ const GeneView: React.FC = () => {
|
||||
{loading ? (
|
||||
<div>
|
||||
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔄</div>
|
||||
<p>Loading gene expression data...</p>
|
||||
<p>正在加载基因表达数据...</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>📊</div>
|
||||
<p>Please select a target gene to view expression data</p>
|
||||
<p>请选择目标基因以查看表达数据</p>
|
||||
<p style={{ fontSize: "0.9rem", color: "var(--text-secondary)" }}>
|
||||
Stage: {selectedStage}
|
||||
当前阶段：{selectedStage}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
@ -285,7 +283,7 @@ const GeneView: React.FC = () => {
|
||||
|
||||
{/* 基因分布箱线图 */}
|
||||
<div className="visualization-container">
|
||||
<h3 style={{textAlign: "center" }}>Gene expression distribution</h3>
|
||||
<h3 style={{textAlign: "center" }}>基因表达分布</h3>
|
||||
{distributionData.data && distributionData.data.length > 0 ? (
|
||||
<div style={{ height: "480px" }}>
|
||||
<ResponsiveBoxPlot
|
||||
@ -300,21 +298,21 @@ const GeneView: React.FC = () => {
|
||||
layout="horizontal"
|
||||
axisTop={null}
|
||||
axisRight={null}
|
||||
axisBottom={{
|
||||
axisBottom={{
|
||||
tickSize: 5,
|
||||
tickPadding: 12,
|
||||
tickRotation: 0,
|
||||
legend: "Expression",
|
||||
legend: "表达值",
|
||||
legendPosition: "middle",
|
||||
legendOffset: 60,
|
||||
format: (value: number) => value.toFixed(2),
|
||||
tickValues: 3,
|
||||
}}
|
||||
axisLeft={{
|
||||
axisLeft={{
|
||||
tickSize: 5,
|
||||
tickPadding: 10,
|
||||
tickRotation: 0,
|
||||
legend: "Cell type",
|
||||
legend: "细胞类型",
|
||||
legendPosition: "middle",
|
||||
legendOffset: -120,
|
||||
format: (value: string) => value.length > 12 ? `${value.substring(0, 12)}...` : value,
|
||||
@ -348,14 +346,14 @@ const GeneView: React.FC = () => {
|
||||
{loading ? (
|
||||
<div>
|
||||
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔄</div>
|
||||
<p>Loading distribution data...</p>
|
||||
<p>正在加载分布数据...</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>📈</div>
|
||||
<p>Please select a target gene to view the distribution</p>
|
||||
<p>请选择目标基因以查看表达分布</p>
|
||||
<p style={{ fontSize: "0.9rem", color: "var(--text-secondary)" }}>
|
||||
The box plot shows the expression distribution across cell types
|
||||
箱线图显示各细胞类型中的表达分布
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
@ -365,23 +363,23 @@ const GeneView: React.FC = () => {
|
||||
</div>
|
||||
|
||||
<div className="section">
|
||||
<h2>User Guide</h2>
|
||||
<h2>使用说明</h2>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "2rem", marginTop: "1.5rem" }}>
|
||||
<div>
|
||||
<h3>🎯 Select targets</h3>
|
||||
<p>First choose a developmental stage to load its cell type distribution, then select a gene to view its expression pattern.</p>
|
||||
<h3>🎯 选择目标</h3>
|
||||
<p>首先选择感兴趣的发育阶段，系统将自动显示该阶段的细胞类型分布，然后选择基因查看表达模式。</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>🖱️ Interactions</h3>
|
||||
<p>Drag to rotate, scroll to zoom, and click data points in the 3D views to see details.</p>
|
||||
<h3>🖱️ 交互操作</h3>
|
||||
<p>在3D视图中使用鼠标拖拽旋转视角，滚轮缩放，点击数据点查看详细信息。</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>🎨 Color encoding</h3>
|
||||
<p>Left and right: identical colors indicate the same cell type for consistent comparison. Middle: colors represent expression intensity, red = high, blue = low.</p>
|
||||
<h3>🎨 颜色编码</h3>
|
||||
<p>左侧和右侧：相同颜色代表相同细胞类型，保持一致性便于对比。中间：颜色代表基因表达强度，红色表示高表达，蓝色表示低表达。</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>📈 Box plot interpretation</h3>
|
||||
<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>
|
||||
<h3>📈 箱线图解读</h3>
|
||||
<p>箱线图显示四分位数分布：箱体表示25%-75%范围，中线为中位数，胡须显示数据范围，点表示异常值。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -7,12 +7,10 @@ const HomePage: React.FC = () => {
|
||||
<div className="hero-section">
|
||||
<div className="hero-content">
|
||||
<h1 className="hero-title">Digital Embryo</h1>
|
||||
<h2 className="hero-subtitle">Spatiotemporal transcriptomic atlas of embryonic development</h2>
|
||||
<h2 className="hero-subtitle">数字胚胎发育时空转录组图谱</h2>
|
||||
<p className="hero-description">
|
||||
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.
|
||||
Digital Embryo 数据库包含了小鼠胚胎在 CS7、CS8、CS9 等不同发育阶段的空间转录组数据。
|
||||
我们提供基因表达的空间图谱，基因共表达模块和调控子信息，为深入研究哺乳动物发育的长期问题提供全景图谱。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -24,8 +22,7 @@ const HomePage: React.FC = () => {
|
||||
<div className="feature-icon">🧬</div>
|
||||
<h3 className="feature-title">Spatial clustering</h3>
|
||||
<p className="feature-description">
|
||||
Spatial clustering – search annotations, gene expression, co-expression modules,
|
||||
and regulators within each embryo section.
|
||||
空间聚类 - 搜索每个胚胎切片中的注释、基因表达、基因共表达模块和调控子。
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
@ -35,8 +32,7 @@ const HomePage: React.FC = () => {
|
||||
<div className="feature-icon">📊</div>
|
||||
<h3 className="feature-title">Gene Expression</h3>
|
||||
<p className="feature-description">
|
||||
Gene expression – view and analyze expression patterns and spatial distributions
|
||||
across developmental stages.
|
||||
基因表达 - 查看和分析不同发育阶段的基因表达模式和空间分布。
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
@ -46,7 +42,7 @@ const HomePage: React.FC = () => {
|
||||
<div className="feature-icon">🔬</div>
|
||||
<h3 className="feature-title">Resource</h3>
|
||||
<p className="feature-description">
|
||||
Resources – raw datasets and analysis software for the research community.
|
||||
资源 - 我们为研究社区提供原始数据和分析软件资源。
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
@ -56,7 +52,7 @@ const HomePage: React.FC = () => {
|
||||
<div className="feature-icon">⬇️</div>
|
||||
<h3 className="feature-title">Download</h3>
|
||||
<p className="feature-description">
|
||||
Downloads – processed data and metadata for the research community.
|
||||
下载 - 我们为研究社区提供处理后的数据和元数据。
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
@ -65,39 +61,38 @@ const HomePage: React.FC = () => {
|
||||
|
||||
<div className="info-section">
|
||||
<div className="info-content">
|
||||
<h3>Database details</h3>
|
||||
<h3>数据库详情</h3>
|
||||
<p>
|
||||
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.
|
||||
Digital Embryo 数据库包含了小鼠胚胎在 CS7（~早期发育）、CS8（~中期发育）、CS9（~后期发育）
|
||||
等不同发育阶段的高分辨率空间转录组数据。通过先进的空间转录组学技术，
|
||||
我们能够在细胞分辨率水平上揭示基因表达的空间模式，为理解胚胎发育的分子机制提供重要资源。
|
||||
</p>
|
||||
|
||||
<div className="statistics">
|
||||
<div className="stat-item">
|
||||
<span className="stat-number">3</span>
|
||||
<span className="stat-label">Developmental stages</span>
|
||||
<span className="stat-label">发育阶段</span>
|
||||
</div>
|
||||
<div className="stat-item">
|
||||
<span className="stat-number">1000+</span>
|
||||
<span className="stat-label">Genes</span>
|
||||
<span className="stat-label">基因</span>
|
||||
</div>
|
||||
<div className="stat-item">
|
||||
<span className="stat-number">10000+</span>
|
||||
<span className="stat-label">Cells</span>
|
||||
<span className="stat-label">细胞</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="citation-section">
|
||||
<h3>How to cite</h3>
|
||||
<h3>如何引用</h3>
|
||||
<div className="citation-box">
|
||||
<p>
|
||||
Digital Embryo: A spatiotemporal transcriptomic atlas of mouse embryogenesis
|
||||
using advanced spatial transcriptomics. <em>Development</em>, 2024.
|
||||
</p>
|
||||
<button className="copy-citation-btn">Copy citation</button>
|
||||
<button className="copy-citation-btn">复制引用</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,65 +6,65 @@ const Resource: React.FC = () => {
|
||||
<div className="page-header">
|
||||
<h1>Resource</h1>
|
||||
<p className="page-description">
|
||||
Raw data and analysis software resources for the research community
|
||||
我们为研究社区提供原始数据和分析软件资源
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="page-content">
|
||||
<div className="section">
|
||||
<h2>Data resources</h2>
|
||||
<h2>数据资源</h2>
|
||||
<div className="resource-grid">
|
||||
<div className="resource-card">
|
||||
<h3>Raw data</h3>
|
||||
<p>Complete spatial transcriptomic sequencing data in H5AD and H5 formats.</p>
|
||||
<h3>原始数据</h3>
|
||||
<p>包含完整的空间转录组测序数据，格式为 H5AD 和 H5 文件。</p>
|
||||
<ul>
|
||||
<li>CS7 stage data (CS7.h5ad)</li>
|
||||
<li>CS8 stage data (CS8.h5ad)</li>
|
||||
<li>CS9 stage data (CS9.h5ad)</li>
|
||||
<li>CS7 阶段数据 (CS7.h5ad)</li>
|
||||
<li>CS8 阶段数据 (CS8.h5ad)</li>
|
||||
<li>CS9 阶段数据 (CS9.h5ad)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="resource-card">
|
||||
<h3>Processed data</h3>
|
||||
<p>Quality-controlled, normalized, and dimension-reduced data ready for downstream analyses.</p>
|
||||
<h3>处理后数据</h3>
|
||||
<p>经过质量控制、标准化和降维处理的数据，可直接用于下游分析。</p>
|
||||
<ul>
|
||||
<li>Gene expression matrix</li>
|
||||
<li>Cell type annotations</li>
|
||||
<li>Spatial coordinate information</li>
|
||||
<li>基因表达矩阵</li>
|
||||
<li>细胞类型注释</li>
|
||||
<li>空间坐标信息</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="section">
|
||||
<h2>Software tools</h2>
|
||||
<h2>软件工具</h2>
|
||||
<div className="software-grid">
|
||||
<div className="software-card">
|
||||
<h3>Data processing pipeline</h3>
|
||||
<p>A complete workflow for spatial transcriptomics, including preprocessing, QC, clustering, and visualization.</p>
|
||||
<h3>数据处理流程</h3>
|
||||
<p>完整的空间转录组数据分析流程，包括预处理、质量控制、聚类和可视化。</p>
|
||||
<div className="software-links">
|
||||
<a href="#" className="software-link">GitHub repository</a>
|
||||
<a href="#" className="software-link">Documentation</a>
|
||||
<a href="#" className="software-link">GitHub 仓库</a>
|
||||
<a href="#" className="software-link">使用文档</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="software-card">
|
||||
<h3>Visualization tools</h3>
|
||||
<p>Three.js-based 3D visualization tools for interactive exploration of spatial expression patterns.</p>
|
||||
<h3>可视化工具</h3>
|
||||
<p>基于 Three.js 的 3D 可视化工具，支持交互式探索基因表达的空间模式。</p>
|
||||
<div className="software-links">
|
||||
<a href="#" className="software-link">Online tool</a>
|
||||
<a href="#" className="software-link">API docs</a>
|
||||
<a href="#" className="software-link">在线工具</a>
|
||||
<a href="#" className="software-link">API 文档</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="section">
|
||||
<h2>Support</h2>
|
||||
<h2>技术支持</h2>
|
||||
<div className="support-info">
|
||||
<p>If you encounter issues using the data or software, contact us via:</p>
|
||||
<p>如果您在使用数据或软件过程中遇到问题，请通过以下方式联系我们：</p>
|
||||
<ul>
|
||||
<li>Email: support@digital-embryo.org</li>
|
||||
<li>GitHub Issues: submit technical issues and feature requests</li>
|
||||
<li>Docs Center: see detailed user guides</li>
|
||||
<li>GitHub Issues: 提交技术问题和功能请求</li>
|
||||
<li>文档中心: 查看详细的使用指南</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,39 +6,39 @@ const SpatialClustering: React.FC = () => {
|
||||
<div className="page-header">
|
||||
<h1>Spatial clustering</h1>
|
||||
<p className="page-description">
|
||||
Spatial clustering analysis – search annotations, gene expression, co-expression modules, and regulators in each embryo section
|
||||
空间聚类分析 - 搜索每个胚胎切片中的注释、基因表达、基因共表达模块和调控子
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="page-content">
|
||||
<div className="section">
|
||||
<h2>Clustering features</h2>
|
||||
<h2>空间聚类功能</h2>
|
||||
<div className="clustering-features">
|
||||
<div className="cluster-card">
|
||||
<h3>Cell type annotation</h3>
|
||||
<p>Automatically identify and annotate cell types based on expression profiles and spatial coordinates.</p>
|
||||
<h3>细胞类型注释</h3>
|
||||
<p>基于基因表达谱和空间位置信息，自动识别和注释不同的细胞类型。</p>
|
||||
</div>
|
||||
<div className="cluster-card">
|
||||
<h3>Gene co-expression modules</h3>
|
||||
<p>Identify modules of co-expressed genes within the same spatial regions to reveal functional networks.</p>
|
||||
<h3>基因共表达模块</h3>
|
||||
<p>识别在相同空间区域内共同表达的基因模块，揭示功能相关的基因网络。</p>
|
||||
</div>
|
||||
<div className="cluster-card">
|
||||
<h3>Spatial regulators</h3>
|
||||
<p>Analyze spatially specific transcriptional regulation networks to understand tissue formation mechanisms.</p>
|
||||
<h3>空间调控子</h3>
|
||||
<p>分析空间特异性的转录调控网络，理解组织形成的分子机制。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="section">
|
||||
<h2>Interactive exploration</h2>
|
||||
<h2>交互式探索</h2>
|
||||
<div className="interactive-notice">
|
||||
<p>🚧 The interactive spatial clustering tool is under development...</p>
|
||||
<p>Coming soon:</p>
|
||||
<p>🚧 交互式空间聚类工具正在开发中...</p>
|
||||
<p>即将支持：</p>
|
||||
<ul>
|
||||
<li>Real-time clustering parameter tuning</li>
|
||||
<li>Multiple clustering algorithms</li>
|
||||
<li>Cluster result visualization</li>
|
||||
<li>Differential gene analysis</li>
|
||||
<li>实时聚类参数调整</li>
|
||||
<li>多种聚类算法选择</li>
|
||||
<li>聚类结果可视化</li>
|
||||
<li>差异基因分析</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -312,19 +312,18 @@ const TemporalAnalysis: React.FC = () => {
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header">
|
||||
<h1>Temporal Analysis</h1>
|
||||
<h1>时间序列分析</h1>
|
||||
<p className="page-description">
|
||||
Compare cell type distributions across stages to analyze changes and evolutionary patterns during embryonic development.
|
||||
通过对比不同发育阶段的细胞类型分布，分析胚胎发育过程中细胞类型的变化和演进模式。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="page-content">
|
||||
{/* 第一部分：三个发育阶段的细胞类型分布 */}
|
||||
<div className="section">
|
||||
<h2>Stage comparison</h2>
|
||||
<h2>发育阶段对比</h2>
|
||||
<p className="flat-section-description">
|
||||
The three 3D views below show cell type distributions for CS7, CS8, and CS9.
|
||||
Compare spatial distributions to observe changes over development.
|
||||
下方展示了CS7、CS8、CS9三个发育阶段的细胞类型3D分布图。通过对比可以观察细胞类型在发育过程中的空间分布变化。
|
||||
</p>
|
||||
|
||||
<div
|
||||
@ -340,7 +339,7 @@ const TemporalAnalysis: React.FC = () => {
|
||||
>
|
||||
{/* CS7阶段细胞类型分布 */}
|
||||
<div className="visualization-container">
|
||||
<h3 style={{ marginBottom: "1rem", textAlign: "center" }}>CS7 - Early developmental stage</h3>
|
||||
<h3 style={{ marginBottom: "1rem", textAlign: "center" }}>CS7 - 早期发育阶段</h3>
|
||||
{errorCS7 && <div className="error-message">{errorCS7}</div>}
|
||||
{cellDataCS7.length > 0 ? (
|
||||
<PointCloud data={cellDataCS7} isCategorical={true} />
|
||||
@ -349,14 +348,14 @@ const TemporalAnalysis: React.FC = () => {
|
||||
{loadingCS7 ? (
|
||||
<div>
|
||||
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔄</div>
|
||||
<p>Loading CS7 data...</p>
|
||||
<p>正在加载CS7数据...</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🧬</div>
|
||||
<p>CS7 cell type distribution</p>
|
||||
<p>CS7阶段细胞类型分布</p>
|
||||
<p style={{ fontSize: "0.9rem", color: "var(--text-secondary)" }}>
|
||||
Early developmental stage
|
||||
早期发育阶段
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
@ -366,7 +365,7 @@ const TemporalAnalysis: React.FC = () => {
|
||||
|
||||
{/* CS8阶段细胞类型分布 */}
|
||||
<div className="visualization-container">
|
||||
<h3 style={{ marginBottom: "1rem", textAlign: "center" }}>CS8 - Mid developmental stage</h3>
|
||||
<h3 style={{ marginBottom: "1rem", textAlign: "center" }}>CS8 - 中期发育阶段</h3>
|
||||
{errorCS8 && <div className="error-message">{errorCS8}</div>}
|
||||
{cellDataCS8.length > 0 ? (
|
||||
<PointCloud data={cellDataCS8} isCategorical={true} />
|
||||
@ -375,14 +374,14 @@ const TemporalAnalysis: React.FC = () => {
|
||||
{loadingCS8 ? (
|
||||
<div>
|
||||
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔄</div>
|
||||
<p>Loading CS8 data...</p>
|
||||
<p>正在加载CS8数据...</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🧬</div>
|
||||
<p>CS8 cell type distribution</p>
|
||||
<p>CS8阶段细胞类型分布</p>
|
||||
<p style={{ fontSize: "0.9rem", color: "var(--text-secondary)" }}>
|
||||
Mid developmental stage
|
||||
中期发育阶段
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
@ -392,7 +391,7 @@ const TemporalAnalysis: React.FC = () => {
|
||||
|
||||
{/* CS9阶段细胞类型分布 */}
|
||||
<div className="visualization-container">
|
||||
<h3 style={{ marginBottom: "1rem", textAlign: "center" }}>CS9 - Late developmental stage</h3>
|
||||
<h3 style={{ marginBottom: "1rem", textAlign: "center" }}>CS9 - 后期发育阶段</h3>
|
||||
{errorCS9 && <div className="error-message">{errorCS9}</div>}
|
||||
{cellDataCS9.length > 0 ? (
|
||||
<PointCloud data={cellDataCS9} isCategorical={true} />
|
||||
@ -401,14 +400,14 @@ const TemporalAnalysis: React.FC = () => {
|
||||
{loadingCS9 ? (
|
||||
<div>
|
||||
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔄</div>
|
||||
<p>Loading CS9 data...</p>
|
||||
<p>正在加载CS9数据...</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🧬</div>
|
||||
<p>CS9 cell type distribution</p>
|
||||
<p>CS9阶段细胞类型分布</p>
|
||||
<p style={{ fontSize: "0.9rem", color: "var(--text-secondary)" }}>
|
||||
Late developmental stage
|
||||
后期发育阶段
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
@ -420,10 +419,9 @@ const TemporalAnalysis: React.FC = () => {
|
||||
|
||||
{/* 第二部分和第三部分：并排显示 */}
|
||||
<div className="section">
|
||||
<h2>Flow and gene timeline</h2>
|
||||
<h2>流动分析与基因时序</h2>
|
||||
<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>
|
||||
|
||||
<div
|
||||
@ -436,7 +434,7 @@ const TemporalAnalysis: React.FC = () => {
|
||||
>
|
||||
{/* 桑基图部分 */}
|
||||
<div className="visualization-container">
|
||||
<h3 style={{ marginBottom: "1rem", textAlign: "center" }}>Cell type flow diagram</h3>
|
||||
<h3 style={{ marginBottom: "1rem", textAlign: "center" }}>细胞类型演进流动图</h3>
|
||||
<div style={{ width: "100%", height: "500px", position: "relative" }}>
|
||||
{sankeyData.nodes.length > 0 && sankeyData.links.length > 0 ? (
|
||||
<>
|
||||
@ -468,7 +466,7 @@ const TemporalAnalysis: React.FC = () => {
|
||||
legends={[]}
|
||||
motionConfig="gentle"
|
||||
/>
|
||||
{/* Stage labels */}
|
||||
{/* 发育阶段标签行 */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
@ -484,13 +482,13 @@ const TemporalAnalysis: React.FC = () => {
|
||||
}}
|
||||
>
|
||||
<div style={{ textAlign: "left", flex: 1, paddingLeft: "20px" }}>
|
||||
CS7 - Early
|
||||
CS7 - 早期
|
||||
</div>
|
||||
<div style={{ textAlign: "center", flex: 1 }}>
|
||||
CS8 - Mid
|
||||
CS8 - 中期
|
||||
</div>
|
||||
<div style={{ textAlign: "right", flex: 1, paddingRight: "20px" }}>
|
||||
CS9 - Late
|
||||
CS9 - 后期
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
@ -499,12 +497,12 @@ const TemporalAnalysis: React.FC = () => {
|
||||
{sankeyLoading || loadingCS7 || loadingCS8 || loadingCS9 ? (
|
||||
<div>
|
||||
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔄</div>
|
||||
<p>Building flow diagram...</p>
|
||||
<p>正在构建流动图...</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>📊</div>
|
||||
<p>Waiting for data</p>
|
||||
<p>等待数据加载</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@ -514,7 +512,7 @@ const TemporalAnalysis: React.FC = () => {
|
||||
|
||||
{/* 基因时序分析部分 */}
|
||||
<div className="visualization-container">
|
||||
<h3 style={{ marginBottom: "1rem", textAlign: "center" }}>Gene temporal analysis</h3>
|
||||
<h3 style={{ marginBottom: "1rem", textAlign: "center" }}>基因时序分析</h3>
|
||||
<div style={{ display: "flex", justifyContent: "center", alignItems: "center", marginBottom: "1rem" }}>
|
||||
<select
|
||||
value={selectedGene}
|
||||
@ -524,10 +522,10 @@ const TemporalAnalysis: React.FC = () => {
|
||||
fetchTemporalAnalysis(e.target.value);
|
||||
}
|
||||
}}
|
||||
title="Select a gene for temporal analysis"
|
||||
title="选择基因进行时序分析"
|
||||
style={{ padding: "0.5rem", borderRadius: "0.3rem", border: "1px solid #ccc", fontSize: "0.9rem" }}
|
||||
>
|
||||
<option value="">Please select a gene</option>
|
||||
<option value="">请选择基因</option>
|
||||
{availableGenes.map((gene) => (
|
||||
<option key={gene} value={gene}>
|
||||
{gene}
|
||||
@ -540,7 +538,7 @@ const TemporalAnalysis: React.FC = () => {
|
||||
{temporalLoading ? (
|
||||
<div className="no-data-message">
|
||||
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔄</div>
|
||||
<p>Loading temporal data...</p>
|
||||
<p>正在加载时序数据...</p>
|
||||
</div>
|
||||
) : temporalError ? (
|
||||
<div className="error-message">{temporalError}</div>
|
||||
@ -559,19 +557,19 @@ const TemporalAnalysis: React.FC = () => {
|
||||
yFormat=" >-.2f"
|
||||
axisTop={null}
|
||||
axisRight={null}
|
||||
axisBottom={{
|
||||
axisBottom={{
|
||||
tickSize: 5,
|
||||
tickPadding: 5,
|
||||
tickRotation: 0,
|
||||
legend: 'Developmental stage',
|
||||
legend: '发育阶段',
|
||||
legendPosition: 'middle',
|
||||
legendOffset: 40
|
||||
}}
|
||||
axisLeft={{
|
||||
axisLeft={{
|
||||
tickSize: 5,
|
||||
tickPadding: 5,
|
||||
tickRotation: 0,
|
||||
legend: 'Proportion (%)',
|
||||
legend: '占比 (%)',
|
||||
legendPosition: 'middle',
|
||||
legendOffset: -50
|
||||
}}
|
||||
@ -611,9 +609,9 @@ const TemporalAnalysis: React.FC = () => {
|
||||
]}
|
||||
/>
|
||||
) : (
|
||||
<div className="no-data-message">
|
||||
<div className="no-data-message">
|
||||
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>📊</div>
|
||||
<p>Please select a gene to view temporal changes</p>
|
||||
<p>请选择基因查看时序变化</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@ -622,39 +620,39 @@ const TemporalAnalysis: React.FC = () => {
|
||||
</div>
|
||||
|
||||
<div className="section">
|
||||
<h2>User Guide</h2>
|
||||
<h2>使用说明</h2>
|
||||
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "2rem", marginTop: "1.5rem" }}>
|
||||
<div>
|
||||
<h3>📅 Time-series comparison</h3>
|
||||
<p>The three 3D views for CS7, CS8, and CS9 allow intuitive observation of how cell types change over time.</p>
|
||||
<h3>📅 时间序列对比</h3>
|
||||
<p>三个3D图分别展示CS7、CS8、CS9三个发育阶段的细胞类型分布，可以直观地观察细胞类型随时间的变化。</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>🌊 Interpreting the Sankey diagram</h3>
|
||||
<p>Node size reflects proportions; links show continuity of the same cell type across stages. Colors are consistent to aid tracking.</p>
|
||||
<h3>🌊 桑基图解读</h3>
|
||||
<p>桑基图显示细胞类型的演进流动：节点大小表示占比，连接线显示相同细胞类型在不同阶段间的延续性，颜色保持一致便于追踪。</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>📊 Gene temporal analysis</h3>
|
||||
<p>After selecting a gene, the line chart shows how its proportion changes across cell types, revealing expression dynamics during development.</p>
|
||||
<h3>📊 基因时序分析</h3>
|
||||
<p>选择特定基因后，堆叠面积图显示该基因在各细胞类型中的占比变化，帮助理解基因在发育过程中的表达模式演进。</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>🖱️ Interactions</h3>
|
||||
<p>Rotate with drag, zoom with scroll, click data points for details. Hover over the Sankey and line charts to see exact values.</p>
|
||||
<h3>🖱️ 交互操作</h3>
|
||||
<p>在3D视图中使用鼠标拖拽旋转视角，滚轮缩放，点击数据点查看详细信息。在桑基图和堆叠图中悬停查看具体数值。</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>🎨 Color encoding</h3>
|
||||
<p>Identical colors denote the same cell type across charts to make it easy to track changes and flows.</p>
|
||||
<h3>🎨 颜色编码</h3>
|
||||
<p>相同颜色代表相同的细胞类型，在所有图表中保持一致，便于追踪特定细胞类型的变化和流动模式。</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>🔍 Developmental pattern identification</h3>
|
||||
<p>Compare stages and genes to identify emergence, disappearance, migration, and differentiation of cell types and their expression dynamics.</p>
|
||||
<h3>🔍 发育模式识别</h3>
|
||||
<p>通过对比三个阶段和不同基因，可以识别细胞类型的出现、消失、迁移和分化模式，以及基因表达的动态变化。</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>📈 Percentage analysis</h3>
|
||||
<p>Percentages indicate relative abundance of cell types per stage, helping interpret dynamic composition changes.</p>
|
||||
<h3>📈 百分比分析</h3>
|
||||
<p>桑基图和堆叠图中的百分比表示各细胞类型在对应发育阶段中的相对丰度，帮助理解细胞类型组成的动态平衡。</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3>🧬 Gene selection strategy</h3>
|
||||
<p>Select development-related genes (e.g., SOX2, NANOG) to observe expression changes and cell-type specificity during embryogenesis.</p>
|
||||
<h3>🧬 基因选择策略</h3>
|
||||
<p>选择不同的发育相关基因（如SOX2、NANOG等），观察其在胚胎发育过程中的表达变化模式和细胞类型特异性。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user