dictybase/dictyaccess

DictyAccess 镜像文档

镜像概述和主要用途

DictyAccess是一个数据可视化仪表盘应用，提供六个不同的仪表盘：Bird's Eye、Genome Stats、Annotations、Phylogeny、Analytics和Dicty Stock Center。该应用基于React框架开发，并使用Material-UI作为CSS框架，主要用于数据可视化与分析展示。

核心功能和特性

• 提供六个专业化仪表盘，覆盖不同数据可视化需求
• 基于React构建，具备良好的组件化架构和可维护性
• 使用Material-UI作为CSS框架，提供一致的视觉体验和响应式设计
• 支持多种身份验证提供商，可配置登录按钮
• 可通过环境变量灵活配置认证服务器和API服务器地址
• 支持导航栏和页脚的动态配置，通过JSON数据驱动

使用场景和适用范围

适用于需要进行数据可视化展示的科研环境，特别是与Dictyostelium（盘基网柄菌）相关的研究数据分析，可用于基因组统计、注释信息、系统发育、分析报告和库存中心等数据的可视化呈现。

详细使用方法和配置说明

开发环境设置

前提条件

1. 克隆代码仓库
2. 按照以下配置说明进行应用配置

配置

提供商（Providers）

• 这是运行应用的关键配置，必须完成
• 复制提供的示例文件src/common/utils/clientConfig.sample.js到同一文件夹下，并命名为clientConfig.js
• 添加提供商名称及其对应的客户端ID
• 所有提供商必须在src/common/utils/oauthConfig.js文件中有对应配置，为每个新提供商填写所有配置参数
• 每个提供商名称将在登录路由中显示对应的登录按钮，支持的按钮图标参考FontAwesome品牌图标

认证服务器（Auth server）

• 默认地址：https://betatoken.dictybase.local
• 通过环境变量REACT_APP_AUTH_SERVER配置认证服务器URL
• 可从https://github.com/dictyBase/authserver/releases%E4%B8%8B%E8%BD%BD%E5%AF%B9%E5%BA%94%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E7%9A%84%E8%AE%A4%E8%AF%81%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%BA%8C%E8%BF%9B%E5%88%B6%E6%96%87%E4%BB%B6%EF%BC%8C%E5%BB%BA%E8%AE%AE%E4%BD%BF%E7%94%A8%E6%9C%80%E6%96%B0%E7%89%88%E6%9C%AC
• 也可通过修改.env.development文件中的全局变量自定义REACT_APP_AUTH_SERVER环境变量

API服务器（API server）

• 默认地址：https://betafunc.dictybase.local
• 通过环境变量REACT_APP_API_SERVER配置API服务器URL
• 当前使用Kubeless https://github.com/dictybase-playground/kubeless-nodefn%E5%92%8Chttps://github.com/dictybase-playground/kubeless-gofn%E5%87%BD%E6%95%B0%EF%BC%8C%E5%B9%B6%E6%98%A0%E5%B0%84%E5%88%B0%E6%AD%A4URL%E3%80%82%E8%BF%90%E8%A1%8C%E5%BA%94%E7%94%A81.0.0%E7%89%88%E6%9C%AC%E9%9C%80%E8%A6%81%E6%89%80%E6%9C%89Node.js%E5%87%BD%E6%95%B0
• 也可通过修改.env.development文件中的全局变量自定义REACT_APP_API_SERVER环境变量

导航栏和页脚（Navbar and Footer）

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

语义化版本控制（Semantic Versioning）

应用已配置使用https://github.com/semantic-release/semantic-release%E5%92%8Chttps://github.com/commitizen/cz-cli%E8%BF%9B%E8%A1%8C%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86%EF%BC%9A

1. 添加新提交后（git add .），使用npm run cz并按照提示对提交进行分类和详细说明
2. 完成后将更改推送到当前工作分支
3. 准备发布到生产环境时，使用semantic-release自动化发布流程：
   • 将更改合并到master分支
   • 运行npx semantic-release

重要：必须设置GH_TOKEN或GITHUB_TOKEN环境变量，包含GitHubhttps://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/。可在运行脚本时手动传递（如GH_TOKEN=XXX npx semantic-release）或本地存储环境变量

该流程会分析自上次git tag以来的最新提交，自动确定适当的版本号，并更新CHANGELOG文档。

运行应用（开发版本）

bash
npm install
npm start

应用结构

应用基于https://github.com/***/create-react-app%E7%9A%84%E7%BB%93%E6%9E%84%E5%92%8C%E7%90%86%E5%BF%B5%E8%BF%9B%E8%A1%8C%E9%85%8D%E7%BD%AE%EF%BC%8C%E8%AF%A6%E7%BB%86%E4%BF%A1%E6%81%AF%E5%8F%AF%E5%8F%82%E8%80%83%E5%85%B6https://github.com/***/create-react-app/blob/master/packages/react-scripts/template/README.md%E3%80%82

src文件夹分为三个主要部分：

• app：包含应用布局、路由和Redux reducers/store
• common：包含整个应用的共享内容，包括图片、可重用组件、常量和自定义样式
• features：按不同仪表盘分为多个文件夹，每个文件夹包含特定组件，并按类型（如图表、表格等）分离

部署

应用通过构建Docker镜像并使用Kubernetes运行进行部署。有关DSC和所有Dicty软件的详细部署流程，可参考https://github.com/dictyBase/Migration/blob/master/deploy.md%E3%80%82