Bladeren bron

feat: 开发文档

leo 1 jaar geleden
bovenliggende
commit
3b46062a98
2 gewijzigde bestanden met toevoegingen van 87 en 1 verwijderingen
  1. 1 1
      README.md
  2. 86 0
      about_code.md

+ 1 - 1
README.md

@@ -58,4 +58,4 @@ docker run -d \
 
 1. [开发相关的说明](./about_dev.md)
 2. [二次开发代码改动说明](./about_diff.md)
-3. [开发环境以及代码说明](./about_dev.md)
+3. [开发环境以及代码说明](./about_code.md)

+ 86 - 0
about_code.md

@@ -0,0 +1,86 @@
+# 开发说明
+
+## 代码拉取
+
+```bash
+# 使用 recursive 克隆 sparkmagic
+git clone --recursive http://gogsb.soaringnova.com/ylproj/jupyterlab.git
+```
+
+## 开发环境搭建
+
+首先安装 conda 环境,配置 python3.8 版本(一定要 3.8)
+yarn
+node
+
+进行开发前需要安装一下构建相关的依赖:
+
+```bash
+pip install -e .
+jlpm install
+jlpm build
+```
+
+_注: 这里的 jlpm 是 JupyterLab 提供的特定版本的 yarn, 这里也可以使用 yarn install_
+
+如果出现缺失 canvas 的报错
+
+```bash
+# macOS
+brew install pkg-config cairo pango libpng jpeg giflib librsvg
+# mamba or conda
+conda install -c conda-forge pkg-config glib pango pixman
+```
+
+_参考文档 https://jupyterlab.readthedocs.io/en/stable/developer/contributing.html_
+
+运行开发模式的命令如下:
+
+```bash
+jupyter lab --dev-mode --extensions-in-dev-mode
+```
+
+运行后可在浏览器中查看页面. 如果需要在改动前端代码后自动编译, 可以在上述命令后面加上 `--watch` 参数.
+(目前的 JupyterLab 提供的构建工具并不能自动刷新浏览器, 改动代码后需要手动刷新一下浏览器)
+
+## 功能开发
+
+- 数据管理
+- dag 开发
+
+功能开发在 `packages` 内进行
+
+### 数据管理
+
+数据管理代码集中在 `filebrowser` 内
+
+- `api` 文件夹内是接口的配置
+- `directoryswitcher.ts` 实现开发目录以及数据管理切换
+- `datamanage.tsx` 对应左边栏的数据管理功能区(左侧),进行转存数据的管理
+- `dataview.tsx` 对应选项卡工作区(中间区域),进行转存数据表详情的展示
+- `browser.tsx` 将开发的组件挂载到工作区
+
+挂载命令:
+
+```bash
+const app: JupyterFrontEnd = (window as any).jupyterlab;
+app.shell.add(widget, 'main');
+```
+
+_注: main 对应的即主要工作区_
+
+### dag 开发
+
+数据管理代码集中在 `yili-dag` 内
+
+- `index.ts` 注册 dag 编辑插件,插件注册参考官方提供的样例: https://github.com/jupyterlab/extension-examples,注册插件的一些事件,例如 open、save 等
+- `request.ts` 接口的配置
+- `DagEditorWidget.tsx` 定义 dag 的构造函数,用于 index 中实例化挂载
+- `Dag.tsx` Dag 可视化主页面
+- `AlgoNode.tsx` 基于 x6 的 dag 节点样式
+- `ContextMenu` 右键节点组件
+- `ToolBar` 顶部工具栏组件
+- `DatasourceNodeInfo.tsx` 数据源节点信息配置组件
+- `OutputNodeInfo.tsx` 输出源节点信息配置组件
+- `ScriptNodeInfo.tsx` 自定义脚本节点信息配置组件
+- `ScriptEditor.tsx` 脚本编辑组件