增强的高层次图表(EHLD)项目旨在改进反应式事件层次结构中高层次路径的图形表示，例如，“信号转导”、“细胞凋亡”或“代谢”，其路径图由标有子事件名称的绿色框组成，可选地位于蜂窝状隔间并由箭头连接。这些绿框图具有有限的导航功能:单击一个绿框将用户带到该子事件。在某些情况下，插画家还创造了事件的图形表示。然而，这些插图图没有提供导航功能。

有一项综合协议，绿盒图并非如此吸引力，并推迟用户习惯于尖锐的生物过程的教科书质量插图，直观清晰的图标。同时，虽然我们的插图经常达到教科书标准，但它们是静态图像。该项目包括生成可扩展的矢量图形（SVG）版本的插图，以及软件的开发，这些软件将在绿盒子图表现在的方式中导致这些SVG图像，并且还通过渐进式放大提供用户交互性/out，在悬停在项目上或选择它们并显示所选项目的详细信息面板中的关联内容时，操作。

这个项目也推动了一种一致的图像学的发展，一种用于生物过程的受控视觉词汇，就像我们已经拥有的用于物理实体和反应名称的受控词汇。

本文档包括两个主要部分。第一个部分详细介绍了创建EHLD时应遵循的过程。本文档的第二部分通过创建和包括新图形元素的过程提供指南，进入反应型EHLD图标库。

增强高级图指南

本节旨在指导您通过创建EHLD的过程。以下段落旨在总结插图者应遵循的要求和指导方针，以便生产与反应途径浏览器V3.4兼容的EHLD。

通用的指导原则

在Reactome中，EHLD是一个更高层次路径图的交互式图形表示，通常包含两个或更多的子路径作为活动区域。活动区域是指一组表示单个子路径的形状。特别是，用户可以通过悬停或选择活动区域与它们进行交互，并使用它们导航到它们所代表的子路径。

EHLD代表了Reactome事件层次结构中的止血分支。(a)止血路径层次视图。(b)止血作为EHLD的表征。(c)止血EHLD叠加通路富集分析结果。

通用的指导原则

为了使所有这些可能，在生成EHLD期间有一套初始要求。

• ehld必须是SVG格式。插图画家可以自由使用他们喜欢的设计工具，但在最后，他们的图表必须导出到SVG。
• 强烈反对使用光栅图形，因为它会导致更大的文件大小，并对软件性能有负面影响。此外，通过包含位图图像，我们消除了分辨率无关的缩放，这是SVG的主要优势之一。
• 所有导出的SVG文件都应该包含内部CSS样式表中的样式。请使用此选项时，从Adobe Illustrator导出:导出为-> SVG ->样式:内部CSS．如果您正在使用另一个应用程序来创建ehld，则需要对其进行适当的配置。
• 每个EHLD文件的名称必须是相应路径图的反应标识符，其次是“.svg”。例如，细胞凋亡EHLD应该被命名为R-HSA-109581.SVG．请记住，每个高级路径图只应该创建一个EHLD。
• 活动区域使用group元素的id属性(在SVG文件中)进行注释，可以分为以下两组:
  • 包含可以选择（和悬停）的一组不规则形状（包括文本）的区域以导航到相应的通路图。应该将这些区域的id属性设置为“地区,”+ Reactome标识符他们所代表的子通路，例如地区- r - hsa - 109581”。这种类型的活动区域可能包括指向或来自它们的箭头，它们不是强制性的。
  • 盒子状的区域包含所代表的子路径的标签，不仅可以选择，而且可以与分析结果叠加。应该将这些区域的id属性设置为“覆盖,”+ Reactome标识符他们所代表的子通路，例如覆盖- r - hsa - 109581”。这类区域不能包括指向或从它们指向的箭头，它们是强制性的。
  • 请记住，如果我们需要向给定的转移涂布两种类型的活动区域，则该区域（“Region-R-HSA-109581”）必须包括覆盖部件（“覆盖-R-HSA-109581”）．换句话说，可选形状的组必须包括可以覆盖的形状组。
• 没有被注释为活动区域的任何形状、文本或图形元素组都被视为装饰器，用户不能与它们进行交互。它们具有纯粹的审美价值，不能被选择、悬浮或叠加。
• 如果可能的话，应该到解覆盖整个图像的背景。请注意，可以保留仓库或其他必要的背景，但我们建议避免“不必要的”背景。如果需要背景，但它太大，不能适合插图，建议仅利用清晰且良好的定义边界绘制它的一小部分（参见上述止血的EHLD中的血管）。
• 不应将文本元素转换为形状组。相反，使用普通的 SVG元素。

示例说明了两种类型的活动区域。可选区域（用“区域 - ”+ actome标识符）以红色突出显示，而可以覆盖的区域以棕色突出显示。未作为活动区域注释的形状和文本被视为装饰器（以蓝色呈现），用户无法与它们进行交互。

考虑到上述要求，上图的EHLD应具有如下结构:

• REGION-Pathway一#整个路径是可选择的#
  • OVERLAY-Pathway一#只有标签将被覆盖#
• REGION-Pathway B＃整个途径将是可选择的，包括箭头＃
  • OVERLAY-Pathway B#只有标签将被覆盖#
• REGION-Pathway C＃整个途径将是可选择的，包括箭头＃
  • OVERLAY-Pathway C#只有标签将被覆盖#
• OVERLAY-Pathway D#整个路径将是可选择的，并覆盖#
• 装饰者#所有形状都不能被选择，也不能被覆盖#

逐步创建EHLD

我们建议通过创建一个adobeillustrator文档来启动一个新的EHLD1366 px在宽度和768 px在高度和使用RGB颜色模式．

途径标签应该有为中心,白色，较高的，文字使用Arial大胆字体at.12 pt在A内圆角矩形和8 pt半径， 最低限度170px的宽度和高度的30px.单行或43px.双行。圆角矩形的颜色应该是＃0F82BC(R: 15克:130 B: 188)。我们建议在Reactome层次结构中写出它所表示的子路径的名称。如有任何不一致之处，请与本途径相关作者或策展人联系。

除以下情况外，其他任何书写元素请使用相同规格:

• 描述进程的名称应该总是用黑色和小写字母表示。
• 任何写元素属于化合物、蛋白质或细胞(通常在任何彩色形状的内部)的东西应该是白色的，并且(如果可能的话)使用大写字母。
• 任何写元素属于受体和/或描述细胞元素或过程(通常在任何形状之外)应该是黑色和小写字母(如果可能，受体通常用首字母缩写，在这种情况下应该使用大写字母)。
• 在文本元素中必须避免使用希腊语或其他Unicode字符。因此，带有希腊字符的名称应该包含小写字母的整个单词(例如，用alpha而不是α)。
• Reactome标志应该有50％不透明度．

每个途径标签都应该有一个分析信息标签．后者用于显示有关命中元素和错误发现率（FDR）的其他详细信息。所有分析信息标签应在图层层次结构面板中作为“AnalInfo”注释。将“XXX / YYY”作为文本占位符。文本应以居中为中心和较高的Arial大胆9分，白色的。盒子应该是一个圆角矩形8像素半径，最低170px的宽度和20 px高度．它的填充颜色应该是# C6C6C6(R: 198 G: 198 B: 198)。同时，设置组的不透明度为0%，但要确保组内形状和文本的不透明度为100%。每个分析信息标签应放在其途径标签的旁边和该途径内容的对面。例如，如果路径标签高于其内容，则分析信息标签应置于路径标签之上，反之亦然。

为了更好地塑造路径的活动区域(或可点击区域)，我们可以添加一个白色形状0%的不透明度在图层层次结构面板中途径的任何元素下。通过这种方式，我们可以在导航EHLD时，可以在可点击的区域和改善整体用户体验。特别是，我们应该尝试围绕覆盖各个图形元素内的间隙的细胞链的元素，从而避免了鼠标光标在不断地从通常的箭头形状变化的不方便状态。此外，在特定平底膜的元素太薄的EHLD中，用户发现难以选择它们，这种技术可以在它们周围提供更大更方便的可点击区域。但是，我们应该谨慎使用这一点，因为创建太大的可点击区域可以误导用户。

建议将所有箭头和中性文本元素放在层层次结构的顶部。此外，所有我们不想突出显示或可点击的背景装饰器和元素，我们建议将它们放在层层次结构底部的组中。

Reactome在一个空白的可缩放空间中显示ehld。为了更好的用户体验，我们建议完整地描绘所有形状和元素。然而，我们知道有些路径很大，包含太多太大的元素，无法适合在一张图像中。在插画师需要切割一个元素的情况下，很难做出一个清晰的切割表示，我们建议添加一个渐变，这样元素就会消失，保持画布的界限清晰。

要导出EHLD，我们应该使用“导出为”选项，并使用以下选项将文件作为SVG保存为SVG：

• 样式:内部CSS。
• 字体:SVG。
• 图片:保护区。
• 对象id:层名。
• 小数点:3。
• 两者都缩小和响应，都勾选。