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