火山引擎 DataLeap 数据调度实例的 DAG 优化方案 （二）：功能设计

针对上面存在的问题以及对需求的分析，我们可以进行如下的功能实现与设计：

首先是渲染方案的替换，将 svg 的渲染方案替换成 canvas 渲染，通过减少页面中 DOM 的数量，提高前端渲染性能。

其次是不同场景的功能设计，通过上面的需求分析，火山引擎 DataLeap 研发人员设计了不同的功能模式以满足不同的需求。

在通用模式中，用户关注的是节点上下游的关系，在复杂链路中快速找到阻塞节点，同时关注阻塞节点的信息。

针对复杂链路，火山引擎 DataLeap 研发人员设计了多种优化形式：

首先，在同一层的节点超过一定的数量（可自定义）后，所有节点将聚合在一起，火山引擎 DataLeap 研发人员称之为聚合节点。这种优化下，可以解决上面提到的由于同一层级节点过多，查找特定状态节点不便的问题。也支持点击聚合详情，通过列表的形式，查看所有被聚合的节点。并支持筛选，快速查找到关注的节点并通过展开，恢复与当前节点的依赖关系。

其次，以用户最关注的实例状态，对被聚合的节点进行分类，同时新增快捷展开操作。以下图为例，当前实例处于等待上游依赖完成状态，在这种情况下，用户关注的，则是上游没有开始执行的节点。在聚合节点中，可以清晰地看到存在一个实例，是在等待执行的，点击数字 1，即可快速展开实例。

在这个例子中，就将不需要关注的上游成功节点隐藏在列表中，突出图所需要关注的重点信息。

同时，为了降低节点展示过多导致图显示杂乱的情况，新增了收起功能及跳转功能。

收起功能是指在通过在聚合节点展开的节点的情况，或是在直接展开上 / 下游的情况下，都支持对某个上游 / 下游节点的整条链路收起，方便用户在浏览完一条链路后，恢复图之前的状态，继续浏览下一条链路，减少对后续分析的干扰。

跳转功能是在查看当前节点的上游的其他下游，或是下游的其他上游，此时，用户关注的节点已经转化为其他的上游 / 下游节点。所以，通过跳转新页面的形式，将需要关注的不同节点的上 / 下游信息区分开，减少在一张图中展示所有信息。

并且由于图中的节点承载信息的能力有限，在通过点击节点时，会在下方出现与选中实例相关信息，包括属性，日志等，协助用户运维任务。

在统计模式中，用户关注的是依赖当前节点的下游节点，下游节点则可以分成直接下游和所有下游。所以火山引擎 DataLeap 研发人员设计了分层模式和合并模式，在这两种模式下，可以按照任务的属性（任务类型 / 实例状态 / 责任人等）作为分组维度。

分层模式：

合并模式：

所谓链路模式即指定上游节点，一键展示指定节点与当前节点的链路信息，从而进行精准链路分析。