|
|
@@ -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` 脚本编辑组件
|
leo