镜像概述

本镜像为基于React的Web应用程序，主要用于在dictyBase平台上显示基因组信息，核心功能是通过GraphQL获取并展示单个出版物数据。应用支持多种身份验证提供程序，可配置认证服务器和GraphQL服务器，并提供灵活的导航栏与页脚自定义功能，适用于基因组学相关出版物信息的展示与访问。

核心功能与特性

• GraphQL集成：通过GraphQL服务器获取出版物数据，实现高效的数据查询与展示
• 多身份验证支持：可配置多种OAuth提供程序，通过客户端ID实现第三方登录
• 环境变量配置：支持通过环境变量自定义认证服务器、GraphQL服务器等核心服务地址
• 灵活的导航与页脚：通过环境变量指定JSON数据URL，动态加载导航栏和页脚内容
• 语义化版本控制：集成semantic-release和commitizen，实现自动化版本管理与提交规范

使用场景与适用范围

适用于dictyBase平台及相关基因组学研究项目，用于展示和检索单个出版物的详细信息。开发人员可基于此应用进行基因组数据展示功能的扩展与定制，部署于开发、测试或生产环境。

详细使用方法与配置说明

开发准备

1. 克隆仓库：

   bash
   git clone <仓库地址>
   

2. 按以下说明配置应用

配置

Providers

1. 复制示例配置文件：

   bash
   cp src/utils/clientConfig.sample.js src/utils/clientConfig.js
   

2. 在clientConfig.js中添加提供程序名称及其对应的客户端ID

3. 确保所有提供程序在src/common/utils/oauthConfig.js中有匹配配置，为每个新提供程序填写所有配置参数

4. 每个提供程序名称将在登录路由中显示对应的登录按钮，支持的按钮图标参考Font Awesome品牌图标

Auth server

• 默认地址：[***]
• 通过环境变量REACT_APP_AUTH_SERVER配置认证服务器URL
• 可通过修改.env.development文件中的全局变量自定义该环境变量
• 认证服务器二进制文件可从发布页面下载，建议使用最新版本

GraphQL server

• 默认地址：http://localhost:8080
• 通过修改.env.development文件中的REACT_APP_GRAPHQL_SERVER环境变量配置GraphQL服务器URL

Navbar和Footer

• 应用通过环境变量REACT_APP_NAVBAR_JSON和REACT_APP_FOOTER_JSON配置导航栏和页脚数据
• 默认值为存储在GitHub上的JSON数据URL

语义化版本控制

应用集成了semantic-release和commitizen，使用方法如下：

1. 提交更改：

   bash
   git add .
   npm run cz
   

2. 按照提示对提交进行分类和详细描述，完成后推送到工作分支

3. 部署到生产环境：

   • 将更改合并到master分支
   • 运行npx semantic-release（需配置GH_TOKEN或GITHUB_TOKEN环境变量，包含GitHub个人访问令牌）

   该过程会根据最近的提交自动确定版本号并更新CHANGELOG文档。

运行开发版本

bash
npm install
npm start

应用结构

.
├── public                      # 静态资源（index.html、favicon等）
├── src                         # 应用源代码
│   ├── app                     # 应用级组件
│       ├── actions             # 全局actions（如页脚、导航栏相关）
│       ├── layout              # 主应用模板
│       ├── reducers            # Redux reducers
│       ├── routes              # React Router路由配置
│       ├── store               # Redux store配置
│   ├── common                  # 应用通用功能
│       ├── @types              # TypeScript类型定义
│       ├── assets              # 图片、字体等资源
│       ├── components          # 通用组件
│       ├── constants           # 静态数据（如页脚、导航栏链接）
│       ├── utils               # 应用工具函数
│   ├── features                # 应用主要功能模块
│       ├── Authentication      # 身份验证相关组件
│       ├── MainPage            # 主页组件（/路由），展示示例基因
│       ├── Publication         # 出版物检索/展示相关组件
│   └── index.tsx               # 应用入口渲染文件
└──                             # 配置文件

部署

应用通过构建Docker镜像并部署到Kubernetes集群实现部署。详细部署流程（适用于DSC及所有Dicty软件）可参考部署文档。