树可视化单表（tvBOT）：一个可视化、修改和注释系统发育树的web应用程序

摘要

tvBOT是一个用户友好且高效的web应用程序，用于可视化、修改和注释系统发育树。它在数据准备方面非常高效，不需要多余的样式和语法数据。树注释由数据驱动引擎提供动力，该引擎只需要以统一格式组织并保存为一个表文件的实际数据。开发了一个层管理器来管理注释数据集层，允许通过选择相应注释数据文件的列来添加特定层。此外，tvBOT以实时和多样化的方式进行风格调整。所有风格的调整都可以在高度交互的用户界面上进行，并可用于移动设备。显示引擎允许实时更新和呈现更改。此外，tvBOT支持26种注释数据集类型的组合显示，以实现具有可重用系统发育数据的树注释的多种格式。除了几种发布就绪的图形格式外，还可以导出JSON格式以保存最终图形状态和所有相关数据，这些数据可以与其他用户共享，上传以恢复最终图形状态以进行重新编辑，或用作快速修改新树文件的样式模板。tvBOT免费提供：https://www.chiplot.online/tvbot.html.

图形摘要

web应用程序的简短工作流，一个表的树可视化（tvBOT）。

新标签中打开下载幻灯片

简介

系统发生树与其他注释信息相结合，在各种生物学和其他科学研究中发挥着重要作用。在过去几年中，已经开发了许多软件包、库和网络工具来显示系统发育树，例如ggtree(1)、iTOL(2)，EvolView(三)、PhyloCloud(4)、登革镜(5)、PhyD3(6)和TreeDyn(7). ggtree、iTOL和EvolView还提供了其他树注释功能。然而，大多数方法都无法为注释数据准备和样式调整提供一种用户友好且高效的方法，而注释数据准备与样式调整是树可视化过程中的主要操作。大多数在线工具，如iTOL和EvolView，使用嵌入样式数据和语法数据的模板文件来进行树注释。当添加不同的注释数据集时，这些工具的用户需要学习模板文件的不同格式。嵌入这样的样式或语法数据和批量修改也需要时间，因为大多数数据都是重复的。诚然，编程语言包（如ggtree）具有高度的树注释定制功能。尽管如此，它们对非编程人员并不友好，并且比交互式用户界面花费更多的时间进行风格调整。为了填补这些空白，我们开发了tvBOT，这是一个在线web应用程序，可以方便高效地可视化、修改和注释系统发育树。除了更改树结构和自定义基本树样式的基本功能外，我们还开发了一种组织注释数据的新方法，以提高树注释的效率。tvBOT仅使用实际数据来实现所有支持的注释数据集中注释数据的一致格式要求，允许用户在单个表中组织所有注释数据。结合高度交互式的用户界面，很容易自定义与每个注释数据集关联的样式。与目前可用的网络应用程序相比，tvBOT更全面，具有有价值的新功能(补充表S1).

特征

tvBOT是一种可通过任何标准web浏览器访问的在线web应用程序。基于D3.js(https://d3js.org/)JavaScript库中的树显示引擎实现了在基于web的环境中显示交互式复杂的系统发育树。树文件解析和树注释引擎是在没有外部插件的情况下用JavaScript自主开发的。Vue.js公司(https://v2.vuejs.org版本/)JavaScript框架用于构建高度交互式的用户界面，允许对用户交互做出即时响应，并通过实际的鼠标操作来调整显示参数。

用于树可视化和自定义的高度交互式用户界面

tvBOT中的用户界面由五部分组成（图1)，包括交互式画布、属性控制面板、注释数据文件管理器、数据集层管理器和项目管理器。tvBOT支持多种系统发育树格式作为输入，包括Newick、Nexus(8)和phyloXML(9)，可以显示为谱系图（图2)和枝状图(补充图S1)，每个布局均为矩形、圆形或无根布局，与树枝类型有不同的链接。MCMCTree生成的Nexus格式的发散时间树(10)或BEAST(11)自动检测，默认显示95%置信区间栏。通过应用SVG画布，tvBOT可以支持显示多达6万片树叶的树。

交互式画布支持多种鼠标操作，可以放大和缩小、缩放树或画布、更改树结构以及拖动一些可视化元素。将鼠标悬停在任何分支上都有助于查看节点信息。可以使用下拉菜单修改树结构（图1安培)当用户单击任何分支或叶名称文本时显示。可以选择任何节点作为根节点，以对树拓扑进行重新排序。一个分支的所有子节点都可以折叠并显示为三角形，其两个边长与节点最近和最远叶子的距离成比例。子节点的显示顺序是可逆的。树的分支可以按各种方式排序，升序或降序。

使用属性控制面板（图1磅)，用户可以通过在属性名称上拖动鼠标以更改值或填充特定值，轻松调整树的基本显示样式或每个注释数据集的特定样式参数，例如叶字体大小和分支线宽。可以将几个元素分别移动到合适的位置，包括引导值文本、分歧时间文本、分支饼图、分支文本标签和所有图例。显示引擎在拖动鼠标时实时更新和呈现更改，这有助于用户确定最合适的值。

一种用户友好且高效的树注释方法

tvBOT目前支持多达26种不同的注释数据集类型，可用于修改树样式，并根据给定的元数据添加不同类型的标签和外部图形。这些注释数据集可以组合起来构建一个复杂的系统发育树(补充图S2). 树注释包括以下步骤（图三). 首先，对于注释数据文件的准备，一致的格式要求允许将实际数据保存在一张Microsoft Excel工作表或其他文件格式（如TSV和CSV）中，而无需冗余的样式和语法数据。这些注释数据还可以分为多个文件，以便更好地管理。这种数据组织方式大大降低了用户的学习成本，并且数据文件可以轻松更新和替换。有关每个注释数据集类型的数据准备的详细信息，请参阅帮助文档页面(https://1996xjm.github.io/tvbot/tree_nnotation/). 随后，可以将这些数据文件添加到注释数据文件管理器面板（图1摄氏度)，支持上传多个注释数据文件以及查看、更新和删除文件等功能。单击视图按钮可以下载注释数据文件和树文件。更新功能便于根据对文件的修改刷新相应注释数据集的显示样式。可以通过选择相应的数据列来添加特定的注释数据集层。最后，根据每个数据集层调整样式参数。数据集层管理器（图一维)用于添加和管理注释数据集层。添加注释数据集层时，用户还必须在数据文件管理器面板中选择选定注释数据文件的相应数据列。可以使用不同的数据列多次添加每个注释数据集层。在每个层的末尾，有三个按钮分别用于重命名、删除和隐藏层。单击层时，与每个数据集层关联的样式参数将显示在属性控制面板中。

有用的注释数据集

在许多情况下，特别是在微生物学中，通常会在物种名称文本中使用斜体字并添加上标。当时，没有发布的树可视化工具能够有效地批量更改特定单词的斜体，并批量添加正确的上标。iTOL中的此功能对于那些没有编码技能的人来说效率很低，因为它需要不同的HTML标记（<i></i>、等）来包装要更改样式的单词，这不如直接在Adobe Illustrator中修改这些字体样式有效。

因此，我们为每个注释数据集开发了一种实用的方法。在tvBOT中，通过添加名为“word italic”的注释数据集层（图4). 此数据集层只需要一列字符串说明符数据，可以使用Fill命令在Microsoft Excel中轻松准备这些数据。说明符的一般形式是用户想要设置的斜体单词的索引（从0开始），由逗号分隔。如果用户将单元格留空，则不会更改相应叶名称的字体样式。类似地，对于上标字符串的一列数据，可以添加一个名为“将上标附加到叶子名称”的注释数据集层，将每个上标字符串附加到相应的叶子名称（图4). 补充文件中显示了一些其他有用注释数据集的示例树，例如地质时间刻度、棒棒糖图、气泡图和热图(补充图S3).

图形和可重用系统发育数据的导出

tvBOT允许用户将画布上显示的图像导出为各种可发布的图形格式，如矢量图形或位图，包括svg、pdf、eps、png和透明png（透明背景）。此外，可以导出JSON格式的文件，以保存画布的最终绘制状态和所有相关数据，包括树文件、注释和样式数据。此JSON文件可以与其他用户共享或通过数据菜单上传（图1磅)恢复最终图形状态以便重新编辑，或用作样式模板以快速润色新的树文件。还开发了一个简单的项目管理器，用于为用户临时备份可视化结果。上传新的树文件后，用户可以通过单击Project Manager面板中的save按钮（图1E级). 所有树可视化项目都可以从“我的树”页面访问，并且可以重新打开以重新编辑。即将使用用户帐户进一步开发视觉结果的持久存储。

帮助资源和树廊

帮助文档(https://1996xjm.github.io/tvbot/)基于gitbook详细解释用法(https://www.gitbook.com/)包括新功能、用户界面操作、注释数据准备和样式参数描述。几个教程视频已上传到我们的YouTube频道：https://www.youtube.com/playlist？list=PLfYQHjd1xleTFMggXlc1mzUPKF8RpAly4方便使用tvBOT并帮助用户快速入门。构建并显示了示例树，以说明和探索各种注释可能性。对于每个注释数据集层，都使用一组预定义的数据文件设计了一个示例树，可以在帮助文档的相应数据集部分中访问该树的链接。已发布的树可视化案例在tvBOT中收集和重建，以构建树库，可在页面上找到(https://www.chiplot.online/treeGallery.html).

结论

本研究正在构建一个交互式、用户友好且高效的工具tvBOT，用于可视化、修改和注释系统发育树。除了能够自定义树的基本样式外，tvBOT还具有一些新功能来改进树注释。它支持多达26种类型的注释数据集，并按层（如Adobe Photoshop）管理数据集。树注释由数据驱动引擎提供支持，该引擎只需要实际数据，而不需要样式数据或语法数据等冗余数据。所有类型数据集层的实际数据都可以组织在单个表文件中。此外，对样式的所有调整都在属性控制面板中执行。可以通过选择适当的列来添加特定的数据集层。tvBOT支持导出各种发布就绪的图形格式和重用系统发育数据。上述功能不仅降低了学习成本，而且提高了数据准备的效率。该工具在2021年10月发布后的14个月内已用于数十项研究(12–30).

数据可用性

tvBOT可通过以下网址免费访问：https://www.chiplot.online/tvbot.html。GitHub存储库中提供了相应的开源代码(https://github.com/1996xjm/TVBOT网站)在Figshare中(https://doi.org/10.6084/m9.figshare.22682701.v1).

补充数据

补充数据可从NAR Online获取。

致谢

我们要感谢所有用户的错误报告和建议，感谢其他开发人员在本项目中使用的精彩开源库。

基金

国家自然科学基金项目[92051118，32070113]；广东省科学技术厅[2022B1515020017]。开放存取费资助：广东省科学技术厅[2022B1515020017]。

利益冲突声明。未声明。

参考文献