diff --git a/embryo-frontend/index.html b/embryo-frontend/index.html index 9130581..2144958 100644 --- a/embryo-frontend/index.html +++ b/embryo-frontend/index.html @@ -1,11 +1,11 @@ - + - - Digital Embryo | 数字胚胎发育时空转录组图谱 + + Digital Embryo | Spatiotemporal transcriptomic atlas
diff --git a/embryo-frontend/src/components/PointCloud.tsx b/embryo-frontend/src/components/PointCloud.tsx index adb7d07..2254f6d 100644 --- a/embryo-frontend/src/components/PointCloud.tsx +++ b/embryo-frontend/src/components/PointCloud.tsx @@ -189,15 +189,7 @@ const PointCloud: React.FC = ({ data, isCategorical = false, au const intersects = raycaster.intersectObject(points); if (intersects.length > 0) { - 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)}`); - // } + // Click handling can be added here if needed } }; @@ -309,7 +301,7 @@ const PointCloud: React.FC = ({ data, isCategorical = false, au return (
-
细胞类型
+
Cell types
{cellTypes.map(type => { const cellColor = colorMap.get(type); @@ -339,7 +331,7 @@ const PointCloud: React.FC = ({ data, isCategorical = false, au // 数值数据图例 return (
-
表达强度
+
Expression intensity
= ({ data, isCategorical = false, au marginBottom: '5px' }} />
-
高
-
低
+
High
+
Low
diff --git a/embryo-frontend/src/pages/Download.tsx b/embryo-frontend/src/pages/Download.tsx index a6c8c56..ab9e997 100644 --- a/embryo-frontend/src/pages/Download.tsx +++ b/embryo-frontend/src/pages/Download.tsx @@ -3,32 +3,32 @@ import React from "react"; const Download: React.FC = () => { const downloadItems = [ { - title: "CS7 阶段数据", - description: "小鼠胚胎 CS7 发育阶段的完整空间转录组数据", + title: "CS7 stage dataset", + description: "Complete spatial transcriptomic data for mouse embryo stage CS7", files: [ { name: "CS7.h5ad", size: "45.2 MB", format: "AnnData" }, { name: "CS7_metadata.csv", size: "2.1 MB", format: "CSV" }, ] }, { - title: "CS8 阶段数据", - description: "小鼠胚胎 CS8 发育阶段的完整空间转录组数据", + title: "CS8 stage dataset", + description: "Complete spatial transcriptomic data for mouse embryo stage CS8", files: [ { name: "CS8.h5ad", size: "52.8 MB", format: "AnnData" }, { name: "CS8_metadata.csv", size: "2.3 MB", format: "CSV" }, ] }, { - title: "CS9 阶段数据", - description: "小鼠胚胎 CS9 发育阶段的完整空间转录组数据", + title: "CS9 stage dataset", + description: "Complete spatial transcriptomic data for mouse embryo stage CS9", files: [ { name: "CS9.h5ad", size: "61.4 MB", format: "AnnData" }, { name: "CS9_metadata.csv", size: "2.7 MB", format: "CSV" }, ] }, { - title: "模拟数据集", - description: "用于测试和开发的 3D 表达数据模拟集", + title: "Mock dataset", + description: "Synthetic 3D expression data for testing and development", files: [ { name: "embryo_mock_3D_expression.h5ad", size: "18.9 MB", format: "AnnData" }, ] @@ -40,26 +40,26 @@ const Download: React.FC = () => {

Download

- 我们为研究社区提供处理后的数据和元数据下载 + Processed data and metadata available for download for the research community

-

使用协议

+

Usage policy

- 下载和使用这些数据时，请遵守以下协议： + When downloading and using these data, please follow the policy below:

    -
  • 数据仅限于学术研究用途
    • -
  • 如果使用这些数据发表论文，请引用我们的工作
    • -
  • 禁止重新分发原始数据
    • -
  • 商业用途需要单独授权
    • +
  • Data are for academic research use only
    • +
  • If used in publications, please cite our work
    • +
  • Redistribution of raw data is prohibited
    • +
  • Commercial use requires separate authorization
-

可下载数据

+

Available downloads

{downloadItems.map((item, index) => (
@@ -74,7 +74,7 @@ const Download: React.FC = () => { {file.size} | {file.format}
- +
))}
@@ -84,17 +84,17 @@ const Download: React.FC = () => {
-

批量下载

+

Bulk download

-

完整数据集

-

下载所有阶段的数据和元数据（约 185 MB）

- +

Full dataset

+

Download all stages' data and metadata (~185 MB)

+
-

元数据包

-

仅下载所有阶段的元数据文件（约 7 MB）

- +

Metadata package

+

Download metadata files for all stages only (~7 MB)

+
diff --git a/embryo-frontend/src/pages/EmbryoGeneration.tsx b/embryo-frontend/src/pages/EmbryoGeneration.tsx index d64bc53..327007a 100644 --- a/embryo-frontend/src/pages/EmbryoGeneration.tsx +++ b/embryo-frontend/src/pages/EmbryoGeneration.tsx @@ -83,7 +83,7 @@ const EmbryoGeneration: React.FC = () => {

Embryo Generation

- 观察胚胎发育过程中的细胞迁移和融合。CS7、CS8、CS7.5点云在同一3D视图中展示，动画模拟细胞从两侧汇聚到中间。 + Observe cell migration and merging during embryonic development. CS7, CS8, and CS7.5 point clouds are shown in one 3D view, with an animation simulating cells converging from both sides.

@@ -110,7 +110,7 @@ const EmbryoGeneration: React.FC = () => { opacity: isAnimating || loading ? 0.6 : 1 }} > - {isAnimating ? "动画中..." : "开始动画"} + {isAnimating ? "Animating..." : "Start animation"}
- 进度: {Math.round(animationProgress * 100)}% + Progress: {Math.round(animationProgress * 100)}%
{ animationProgress={animationProgress} />
-

使用说明

+

User Guide

-

🎬 动画控制

-

点击"开始动画"按钮观看CS7.5阶段的细胞生成过程。可以调节动画速度，使用重置按钮重新开始。

+

🎬 Animation controls

+

Click "Start animation" to watch the CS7.5 cell formation process. Adjust speed and use Reset to start over.

-

🖱️ 交互操作

-

在3D视图中使用鼠标拖拽旋转视角，滚轮缩放，点击数据点查看详细信息。

+

🖱️ Interactions

+

Drag to rotate, scroll to zoom, and click data points in the 3D view to see details.

-

🎨 颜色编码

-

相同颜色代表相同细胞类型，便于观察细胞在发育过程中的变化。

+

🎨 Color encoding

+

Identical colors indicate the same cell type, making it easier to observe developmental changes.

-

📊 发育过程

-

观察从CS7和CS8到CS7.5的胚胎发育过程，了解细胞的空间分布变化和类型分化。

+

📊 Developmental process

+

Observe the process from CS7 and CS8 to CS7.5 to understand spatial distribution changes and cell-type differentiation.

@@ -375,8 +375,7 @@ const UnifiedEmbryoAnimation: React.FC = ({ cs7Data // 为CS7.5的点分配起始位置（从CS7和CS8的实际数据中获取） // 基于细胞类型或颜色来分配起始位置，确保相同颜色的点从两侧出现 - const leftSourcePoints = []; - const rightSourcePoints = []; + // Left/right source point placeholders removed (unused) // 按细胞类型分组CS7和CS8数据 const cs7ByType = new Map(); diff --git a/embryo-frontend/src/pages/GeneView.tsx b/embryo-frontend/src/pages/GeneView.tsx index 4830790..af5150e 100644 --- a/embryo-frontend/src/pages/GeneView.tsx +++ b/embryo-frontend/src/pages/GeneView.tsx @@ -141,7 +141,8 @@ const GeneView: React.FC = () => {

Gene Expression

- 查看和分析不同发育阶段的基因表达模式和空间分布。通过3D可视化探索基因在胚胎发育过程中的表达变化。 + View and analyze gene expression patterns and spatial distributions across developmental stages. + Explore changes during embryonic development with 3D visualizations.

@@ -155,7 +156,7 @@ const GeneView: React.FC = () => { marginBottom: "2rem" }}> - +
@@ -210,8 +211,9 @@ const GeneView: React.FC = () => { {/* 3D 可视化说明 */}

- 下方展示了{selectedStage}发育阶段的细胞类型分布（左）、所选基因的表达模式（中）和基因在各细胞类型中的表达分布（右）。 - 点击任意数据点可查看详细信息。 + Below are the cell type distribution (left), the selected gene's expression pattern (middle), + and the expression distribution across cell types (right) for stage {selectedStage}. + Click any data point to view details.

{/* 三可视化区域 */} @@ -228,7 +230,7 @@ const GeneView: React.FC = () => { > {/* 细胞类型可视化 */}
-

细胞类型分布

+

Cell type distribution

{cellError &&
{cellError}
} {cellData.length > 0 ? (
@@ -239,14 +241,14 @@ const GeneView: React.FC = () => { {cellLoading ? (
🔄
-

正在加载细胞类型数据...

+

Loading cell type data...

) : (
🧬
-

细胞类型分布

+

Cell type distribution

- {selectedStage} 阶段 + Stage: {selectedStage}

)} @@ -256,7 +258,7 @@ const GeneView: React.FC = () => { {/* 基因表达可视化 */}
-

基因表达模式

+

Gene expression pattern

{data.length > 0 ? (
@@ -266,14 +268,14 @@ const GeneView: React.FC = () => { {loading ? (
🔄
-

正在加载基因表达数据...

+

Loading gene expression data...

) : (
📊
-

请选择目标基因以查看表达数据

+

Please select a target gene to view expression data

- 当前阶段：{selectedStage} + Stage: {selectedStage}

)} @@ -283,7 +285,7 @@ const GeneView: React.FC = () => { {/* 基因分布箱线图 */}
-

基因表达分布

+

Gene expression distribution

{distributionData.data && distributionData.data.length > 0 ? (
{ layout="horizontal" axisTop={null} axisRight={null} - axisBottom={{ + axisBottom={{ tickSize: 5, tickPadding: 12, tickRotation: 0, - legend: "表达值", + legend: "Expression", legendPosition: "middle", legendOffset: 60, format: (value: number) => value.toFixed(2), tickValues: 3, }} - axisLeft={{ + axisLeft={{ tickSize: 5, tickPadding: 10, tickRotation: 0, - legend: "细胞类型", + legend: "Cell type", legendPosition: "middle", legendOffset: -120, format: (value: string) => value.length > 12 ? `${value.substring(0, 12)}...` : value, @@ -346,14 +348,14 @@ const GeneView: React.FC = () => { {loading ? (
🔄
-

正在加载分布数据...

+

Loading distribution data...

) : (
📈
-

请选择目标基因以查看表达分布

+

Please select a target gene to view the distribution

- 箱线图显示各细胞类型中的表达分布 + The box plot shows the expression distribution across cell types

)} @@ -363,23 +365,23 @@ const GeneView: React.FC = () => {
-

使用说明

+

User Guide

-

🎯 选择目标

-

首先选择感兴趣的发育阶段，系统将自动显示该阶段的细胞类型分布，然后选择基因查看表达模式。

+

🎯 Select targets

+

First choose a developmental stage to load its cell type distribution, then select a gene to view its expression pattern.

-

🖱️ 交互操作

-

在3D视图中使用鼠标拖拽旋转视角，滚轮缩放，点击数据点查看详细信息。

+

🖱️ Interactions

+

Drag to rotate, scroll to zoom, and click data points in the 3D views to see details.

-

🎨 颜色编码

-

左侧和右侧：相同颜色代表相同细胞类型，保持一致性便于对比。中间：颜色代表基因表达强度，红色表示高表达，蓝色表示低表达。

+

🎨 Color encoding

+

Left and right: identical colors indicate the same cell type for consistent comparison. Middle: colors represent expression intensity, red = high, blue = low.

-

📈 箱线图解读

-

箱线图显示四分位数分布：箱体表示25%-75%范围，中线为中位数，胡须显示数据范围，点表示异常值。

+

📈 Box plot interpretation

+

The box shows the interquartile range (25%–75%), the middle line is the median, whiskers show the data range, and dots indicate outliers.

diff --git a/embryo-frontend/src/pages/HomePage.tsx b/embryo-frontend/src/pages/HomePage.tsx index 8ea6a2e..d49b2c4 100644 --- a/embryo-frontend/src/pages/HomePage.tsx +++ b/embryo-frontend/src/pages/HomePage.tsx @@ -7,10 +7,12 @@ const HomePage: React.FC = () => {

Digital Embryo

-

数字胚胎发育时空转录组图谱

+

Spatiotemporal transcriptomic atlas of embryonic development

- Digital Embryo 数据库包含了小鼠胚胎在 CS7、CS8、CS9 等不同发育阶段的空间转录组数据。 - 我们提供基因表达的空间图谱，基因共表达模块和调控子信息，为深入研究哺乳动物发育的长期问题提供全景图谱。 + The Digital Embryo database contains spatial transcriptomic data of mouse embryos + across multiple developmental stages including CS7, CS8, and CS9. We provide spatial maps of + gene expression, co-expression modules, and regulators to support long-term research on + mammalian development.

@@ -22,7 +24,8 @@ const HomePage: React.FC = () => {
🧬

Spatial clustering

- 空间聚类 - 搜索每个胚胎切片中的注释、基因表达、基因共表达模块和调控子。 + Spatial clustering – search annotations, gene expression, co-expression modules, + and regulators within each embryo section.

@@ -32,7 +35,8 @@ const HomePage: React.FC = () => {
📊

Gene Expression

- 基因表达 - 查看和分析不同发育阶段的基因表达模式和空间分布。 + Gene expression – view and analyze expression patterns and spatial distributions + across developmental stages.

@@ -42,7 +46,7 @@ const HomePage: React.FC = () => {
🔬

Resource

- 资源 - 我们为研究社区提供原始数据和分析软件资源。 + Resources – raw datasets and analysis software for the research community.

@@ -52,7 +56,7 @@ const HomePage: React.FC = () => {
⬇️

Download

- 下载 - 我们为研究社区提供处理后的数据和元数据。 + Downloads – processed data and metadata for the research community.

@@ -61,38 +65,39 @@ const HomePage: React.FC = () => {
-

数据库详情

+

Database details

- Digital Embryo 数据库包含了小鼠胚胎在 CS7（~早期发育）、CS8（~中期发育）、CS9（~后期发育） - 等不同发育阶段的高分辨率空间转录组数据。通过先进的空间转录组学技术， - 我们能够在细胞分辨率水平上揭示基因表达的空间模式，为理解胚胎发育的分子机制提供重要资源。 + The Digital Embryo database contains high-resolution spatial transcriptomic data of mouse + embryos at multiple stages including CS7 (early), CS8 (mid), and CS9 (late). Using advanced + spatial transcriptomics, we reveal cell-resolution spatial patterns of gene expression to + support the study of molecular mechanisms in embryonic development.

3 - 发育阶段 + Developmental stages
1000+ - 基因 + Genes
10000+ - 细胞 + Cells
-

如何引用

+

How to cite

Digital Embryo: A spatiotemporal transcriptomic atlas of mouse embryogenesis using advanced spatial transcriptomics. Development, 2024.

- +
diff --git a/embryo-frontend/src/pages/Resource.tsx b/embryo-frontend/src/pages/Resource.tsx index 4ded00f..9e1f8dc 100644 --- a/embryo-frontend/src/pages/Resource.tsx +++ b/embryo-frontend/src/pages/Resource.tsx @@ -6,65 +6,65 @@ const Resource: React.FC = () => {

Resource

- 我们为研究社区提供原始数据和分析软件资源 + Raw data and analysis software resources for the research community

-

数据资源

+

Data resources

-

原始数据

-

包含完整的空间转录组测序数据，格式为 H5AD 和 H5 文件。

+

Raw data

+

Complete spatial transcriptomic sequencing data in H5AD and H5 formats.

    -
  • CS7 阶段数据 (CS7.h5ad)
    • -
  • CS8 阶段数据 (CS8.h5ad)
    • -
  • CS9 阶段数据 (CS9.h5ad)
    • +
  • CS7 stage data (CS7.h5ad)
    • +
  • CS8 stage data (CS8.h5ad)
    • +
  • CS9 stage data (CS9.h5ad)
-

处理后数据

-

经过质量控制、标准化和降维处理的数据，可直接用于下游分析。

+

Processed data

+

Quality-controlled, normalized, and dimension-reduced data ready for downstream analyses.

    -
  • 基因表达矩阵
    • -
  • 细胞类型注释
    • -
  • 空间坐标信息
    • +
  • Gene expression matrix
    • +
  • Cell type annotations
    • +
  • Spatial coordinate information
-

软件工具

+

Software tools

-

数据处理流程

-

完整的空间转录组数据分析流程，包括预处理、质量控制、聚类和可视化。

+

Data processing pipeline

+

A complete workflow for spatial transcriptomics, including preprocessing, QC, clustering, and visualization.

-

可视化工具

-

基于 Three.js 的 3D 可视化工具，支持交互式探索基因表达的空间模式。

+

Visualization tools

+

Three.js-based 3D visualization tools for interactive exploration of spatial expression patterns.

-

技术支持

+

Support

-

如果您在使用数据或软件过程中遇到问题，请通过以下方式联系我们：

+

If you encounter issues using the data or software, contact us via:

  • Email: support@digital-embryo.org
    • -
  • GitHub Issues: 提交技术问题和功能请求
    • -
  • 文档中心: 查看详细的使用指南
    • +
  • GitHub Issues: submit technical issues and feature requests
    • +
  • Docs Center: see detailed user guides
diff --git a/embryo-frontend/src/pages/SpatialClustering.tsx b/embryo-frontend/src/pages/SpatialClustering.tsx index ca3d08f..2cd6786 100644 --- a/embryo-frontend/src/pages/SpatialClustering.tsx +++ b/embryo-frontend/src/pages/SpatialClustering.tsx @@ -6,39 +6,39 @@ const SpatialClustering: React.FC = () => {

Spatial clustering

- 空间聚类分析 - 搜索每个胚胎切片中的注释、基因表达、基因共表达模块和调控子 + Spatial clustering analysis – search annotations, gene expression, co-expression modules, and regulators in each embryo section

-

空间聚类功能

+

Clustering features

-

细胞类型注释

-

基于基因表达谱和空间位置信息，自动识别和注释不同的细胞类型。

+

Cell type annotation

+

Automatically identify and annotate cell types based on expression profiles and spatial coordinates.

-

基因共表达模块

-

识别在相同空间区域内共同表达的基因模块，揭示功能相关的基因网络。

+

Gene co-expression modules

+

Identify modules of co-expressed genes within the same spatial regions to reveal functional networks.

-

空间调控子

-

分析空间特异性的转录调控网络，理解组织形成的分子机制。

+

Spatial regulators

+

Analyze spatially specific transcriptional regulation networks to understand tissue formation mechanisms.

-

交互式探索

+

Interactive exploration

-

🚧 交互式空间聚类工具正在开发中...

-

即将支持：

+

🚧 The interactive spatial clustering tool is under development...

+

Coming soon:

    -
  • 实时聚类参数调整
    • -
  • 多种聚类算法选择
    • -
  • 聚类结果可视化
    • -
  • 差异基因分析
    • +
  • Real-time clustering parameter tuning
    • +
  • Multiple clustering algorithms
    • +
  • Cluster result visualization
    • +
  • Differential gene analysis
diff --git a/embryo-frontend/src/pages/TemporalAnalysis.tsx b/embryo-frontend/src/pages/TemporalAnalysis.tsx index 775a850..0d47434 100644 --- a/embryo-frontend/src/pages/TemporalAnalysis.tsx +++ b/embryo-frontend/src/pages/TemporalAnalysis.tsx @@ -312,18 +312,19 @@ const TemporalAnalysis: React.FC = () => { return (
-

时间序列分析

+

Temporal Analysis

- 通过对比不同发育阶段的细胞类型分布，分析胚胎发育过程中细胞类型的变化和演进模式。 + Compare cell type distributions across stages to analyze changes and evolutionary patterns during embryonic development.

{/* 第一部分：三个发育阶段的细胞类型分布 */}
-

发育阶段对比

+

Stage comparison

- 下方展示了CS7、CS8、CS9三个发育阶段的细胞类型3D分布图。通过对比可以观察细胞类型在发育过程中的空间分布变化。 + The three 3D views below show cell type distributions for CS7, CS8, and CS9. + Compare spatial distributions to observe changes over development.

{ > {/* CS7阶段细胞类型分布 */}
-

CS7 - 早期发育阶段

+

CS7 - Early developmental stage

{errorCS7 &&
{errorCS7}
} {cellDataCS7.length > 0 ? ( @@ -348,14 +349,14 @@ const TemporalAnalysis: React.FC = () => { {loadingCS7 ? (
🔄
-

正在加载CS7数据...

+

Loading CS7 data...

) : (
🧬
-

CS7阶段细胞类型分布

+

CS7 cell type distribution

- 早期发育阶段 + Early developmental stage

)} @@ -365,7 +366,7 @@ const TemporalAnalysis: React.FC = () => { {/* CS8阶段细胞类型分布 */}
-

CS8 - 中期发育阶段

+

CS8 - Mid developmental stage

{errorCS8 &&
{errorCS8}
} {cellDataCS8.length > 0 ? ( @@ -374,14 +375,14 @@ const TemporalAnalysis: React.FC = () => { {loadingCS8 ? (
🔄
-

正在加载CS8数据...

+

Loading CS8 data...

) : (
🧬
-

CS8阶段细胞类型分布

+

CS8 cell type distribution

- 中期发育阶段 + Mid developmental stage

)} @@ -391,7 +392,7 @@ const TemporalAnalysis: React.FC = () => { {/* CS9阶段细胞类型分布 */}
-

CS9 - 后期发育阶段

+

CS9 - Late developmental stage

{errorCS9 &&
{errorCS9}
} {cellDataCS9.length > 0 ? ( @@ -400,14 +401,14 @@ const TemporalAnalysis: React.FC = () => { {loadingCS9 ? (
🔄
-

正在加载CS9数据...

+

Loading CS9 data...

) : (
🧬
-

CS9阶段细胞类型分布

+

CS9 cell type distribution

- 后期发育阶段 + Late developmental stage

)} @@ -419,9 +420,10 @@ const TemporalAnalysis: React.FC = () => { {/* 第二部分和第三部分：并排显示 */}
-

流动分析与基因时序

+

Flow and gene timeline

- 左侧桑基图展示细胞类型在发育阶段间的流动模式，右侧线图显示选定基因在各细胞类型中的占比变化。 + 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.

{ > {/* 桑基图部分 */}
-

细胞类型演进流动图

+

Cell type flow diagram

{sankeyData.nodes.length > 0 && sankeyData.links.length > 0 ? ( <> @@ -466,7 +468,7 @@ const TemporalAnalysis: React.FC = () => { legends={[]} motionConfig="gentle" /> - {/* 发育阶段标签行 */} + {/* Stage labels */}
{ }} >
- CS7 - 早期 + CS7 - Early
- CS8 - 中期 + CS8 - Mid
- CS9 - 后期 + CS9 - Late
@@ -497,12 +499,12 @@ const TemporalAnalysis: React.FC = () => { {sankeyLoading || loadingCS7 || loadingCS8 || loadingCS9 ? (
🔄
-

正在构建流动图...

+

Building flow diagram...

) : (
📊
-

等待数据加载

+

Waiting for data

)}
@@ -512,7 +514,7 @@ const TemporalAnalysis: React.FC = () => { {/* 基因时序分析部分 */}
-

基因时序分析

+

Gene temporal analysis