> For the complete documentation index, see [llms.txt](https://bio-os.gitbook.io/userguide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bio-os.gitbook.io/userguide/zui-jia-shi-jian/for-biomate-kai-fa-zhe.md).

# For BioMate开发者

本文档介绍如何封装一个BioMate的插件

<figure><img src="https://3090449544-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4vWbjtcmh3Zg2b5VZigY%2Fuploads%2F6EjNXn6ughhIuX8MT5r6%2Fwhiteboard_exported_image%20(2).png?alt=media&amp;token=2f9fece8-8a0d-45d3-b3ff-b03cd7de940d" alt=""><figcaption></figcaption></figure>

## 输入文件类型介绍

BioMate中主要分6种类型文件，此处感谢Hiplot开源项目，以Hiplot的工具类型文件为参照，也方便后续集成Hiplot的开源工具

1. metadata文件：metadata文件主要是用于介绍此工具的基本信息，包括工具名称、
2. UI文件（ui.json）:对于Notebook插件页面的定义，通过定义插件所包含的组件，会通过读取json来渲染到插件页面上
3. 可配置参数文件（input.json）: 对于可视化工具的可配置绘图参数或通用参数进行定义，代码文件中的配置参数需读取此文件的默认配置
4. 代码文件(plot.R)：可以是Python也可以是R文件，通过定义代码文件，可将用户在插件页面上的配置通过代码运行产生输出结果
5. 示例图片：每个插件都会有一个示例图片，方便用户理解此插件
6. 示例数据：方便用户测试插件功能，该插件的示例数据

## 输入文件说明及示例

### metadata文件

metadata文件主要是用于介绍此工具的基本信息。

{% file src="/files/EjVVROfgn0gOAfgK9Z9M" %}

meta.json文件中目前有以下几个字段需要关注

1. name：代表当前工具名称
2. sample\_img ：会读取这个字段的图片参数作为示例图片
3. sample\_data\_file：会读取这个字段的参数作为示例数据
4. output\_img：会读取这个字段的参数作为notebook输出图片
5. main：运行的代码主文件
6. run：执行文件

### UI文件

对于交互式页面的ui定义 , json文件中字段参数对应工具页面参数如下

* data：数据文件&#x20;
* columns：数据参数&#x20;
* General：通用参数&#x20;
* Plotsetting: 绘图参数

<figure><img src="https://bytedance.feishu.cn/space/api/box/stream/download/asynccode/?code=Y2Q5ZDM2ODFhMDEwN2ViMjYyMTAzMzE2Y2U4ZWIwNWVfcll0b0t1UUh0aERkM0VmRDNlWEZ2SWExMmlXd2EzVDlfVG9rZW46VkpIS2JjTmdTb3Z5Q2x4SjhzQWMyZHhabnk4XzE2OTgxMzI3Mjg6MTY5ODEzNjMyOF9WNA" alt=""><figcaption></figcaption></figure>

**示例文件:**

{% file src="/files/7hbfM46WZS9uTqslFabY" %}

### 输入参数文件

用于指定工具可配置的输入参数 ，输入参数中的columns、general、plotsetting对应ui见面参数中的columns、general、plotsetting，示例文件如下：

{% file src="/files/xOj8tFB4kREUfZTpxhMa" %}

### 代码文件

核心的执行文件, BioMate中工具的核心执行文件，该代码中工具所用到的参数需配置在输入参数文件中才能保证工具的参数可调。此处以韦恩图工具代码作为示例。

{% file src="/files/jF9MoVa0qwo8xokKTxOb" %}

### 示例图片

每个工具需要配一个示例图片，主要用于工具界面左侧的示例图。如韦恩图的示例作图为例。

<figure><img src="https://3090449544-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4vWbjtcmh3Zg2b5VZigY%2Fuploads%2FPAxbyu10fxl6Yfl9KYap%2Fimage.png?alt=media&amp;token=4a779eff-bc6c-408d-9b36-a532d2d64516" alt=""><figcaption></figcaption></figure>

### 示例数据

每个工具都需要有示例数据，示例数据有助于帮助用户在Notebook中插入工具时，对工具的参数进行测试并使用示例数据生成图形，不同的工具可能示例数据不同，示例数据可以是txt也可以是csv，您可以通过编辑核心代码中的数据读取逻辑进行自定义。此处示例为韦恩图示例工具中采用的示例数据。

{% file src="/files/oesdeQ9vDrzLBlR0KVIP" %}

## 如何在Notebook中测试代码是否可运行

1. 完成核心代码、输入参数文件编写（可参照前述示例代码）

a. 代码里需要通过指定config文件也就是input.json, 并从中获取字段并作为代码输入参数，如下图中通过获取input.json中title字段传入右侧veen.diagram方法中（config$general$title）

<figure><img src="https://3090449544-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4vWbjtcmh3Zg2b5VZigY%2Fuploads%2F0Plf2dgypB5TGJmmskfO%2Fimage.png?alt=media&amp;token=12234a67-6781-4849-9e09-680d711caace" alt="" width="375"><figcaption><p>input.json</p></figcaption></figure>

<figure><img src="https://3090449544-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4vWbjtcmh3Zg2b5VZigY%2Fuploads%2FJWgCmypFwK9Nckgx8dCv%2Fimage.png?alt=media&amp;token=efe85c4b-cbb1-4fc9-a07f-542e2afcad23" alt=""><figcaption><p>使用venndiagram绘制韦恩图代码</p></figcaption></figure>

在代码中用到的参数

b.   需要读取对应的数据文件

![](https://3090449544-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4vWbjtcmh3Zg2b5VZigY%2Fuploads%2Ffljw1YW3Eqcgr0T37eGX%2Fimage.png?alt=media\&token=04ce5693-badb-4b65-aeef-9b1cf69c9e60)![](https://3090449544-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4vWbjtcmh3Zg2b5VZigY%2Fuploads%2FPHLZuw6LZr61xaypGfs5%2Fimage.png?alt=media\&token=e037559f-bddb-4c1b-889d-470407fad358)\ <br>

2. 准备好测试用数据(测试数据参考前文中额示例数据)
3. 上传文件到Notebook存储目录中如下图所示

<figure><img src="https://3090449544-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4vWbjtcmh3Zg2b5VZigY%2Fuploads%2FuK21ycZGaVMkgOilnw8s%2Fimage.png?alt=media&amp;token=7fdcdf82-aec7-4750-a4e8-15d2264dc74a" alt=""><figcaption></figcaption></figure>

2. 运行代码

```JSON
Rscript volcanoPlot.r plot --config input.json --output 方案1.jpg
```

## 可视化工具与 bioMate 集成测试

{% hint style="info" %}
**前置准备：**

1. 本地安装，可参看jupyterlab官方文档<https://jupyterlab.readthedocs.io/en/stable/getting\\_started/installation.html>

2. 如果你的代码中有R代码，确保本地有R环境

3. 已安装 bio\_mate jupyterlab 扩展，安装方式可在jupyterlab命令行执行 pip install -i <https://test.pypi.org/simple/> bio-mate==0.1.0
   {% endhint %}

4. 将待测试的可视化工具文件夹，整体复制到 bio\_mate/plot-defs 文件夹下，并重命名为 myplot，如下图所示：

<figure><img src="https://3090449544-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4vWbjtcmh3Zg2b5VZigY%2Fuploads%2FcxOO78DXH56PwumksG2P%2Fimage.png?alt=media&amp;token=fc33afa6-8eb3-460d-9fc1-a8cc2a749890" alt=""><figcaption></figcaption></figure>

bio\_mate 文件夹位置，可通过下图方式获取。或通过 `find / -name plot-defs` 命令，直接找到 plot-defs 文件夹。

2. 重启 ipython kernel，刷新浏览器，使得 bio\_mate 初始化 myplot 模块

<figure><img src="https://3090449544-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4vWbjtcmh3Zg2b5VZigY%2Fuploads%2Fg0IXNvnIUI1iTkgyAYSY%2Fimage.png?alt=media&amp;token=6a0da908-ccf5-43ee-a3e6-59789045b148" alt=""><figcaption></figcaption></figure>

3. 在 notebook 中执行下述语句，触发渲染 myplot 模块，检查各参数渲染是否正确。

<figure><img src="https://3090449544-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4vWbjtcmh3Zg2b5VZigY%2Fuploads%2FZvqeBIYgaYx13uCbgpgg%2Fimage.png?alt=media&amp;token=6f0ca45e-74d0-4aed-a3ba-8f067b392b0d" alt=""><figcaption></figcaption></figure>

4. 点击【生成】按钮，进行图形生成，检查图形生成是否正常，可通过点击 【查看执行日志】，做进一步问题排查。尝试修改各参数参数值，再次生成，检查参数调整是否生效。
5. 上述步骤全部调试通过，即完成与 bio-mate 集成工作 🎉。

<br>
