【问题标题】:How can I visually compare refactoring options?如何直观地比较重构选项?
【发布时间】:2015-05-29 13:22:44
【问题描述】:

我有一个现有的系统模型,以 DAG 的形式表示服务调用 API,这些 API 可能由其他服务中的一个或多个实现支持。我一直在用GraphViz dot files' digraph 渲染这个,这是相当合理的,如果有时难以执行分层的话。

在考虑各种可能的服务和 API 重构时,我希望能够绘制出通往最终目标的替代路线。每个重构步骤都会产生一个不同的 DAG——以与前一个 DAG 的差异表示(例如,将服务 A 对 API x 的使用转换为服务 B 到 API y 服务 C) - 并且类似地可渲染。

有什么工具可以创建这样的“重构路径”,然后可视化它们之间的流程,确定依赖关系和并行性?寻求目标的额外奖励积分(例如,除了服务 A 对服务 C 之外的任何服务不依赖;基于权重的最便宜路径)并提供重构的松散排序证明它们(可能)单调递增的系统值。

我正在描绘两个 UI 组件:

  1. 一个 DAG 差异,直观地显示在源图中被替换为第二个节点/向量的节点/向量
  2. 类似于D3 的force layout 的控制显示,可让您导航松散连接的重构 DAG,并选择您希望在 DAG 差异中查看之前/之后图片的重构。

也就是说,我完全取决于其他工具、格式等。只是希望能够制作这些并将它们展示给其他人,以了解为什么我们正在做的事情是有价值的(目标断言)并采取只要是这样(依赖关系和甘特图)。

【问题讨论】:

    标签: d3.js diff visualization force-layout directed-graph


    【解决方案1】:

    您是否可以创建一个单独的工具,给定两个相似的 DAG,输出它们的“合并”?如果这是可能的,那么可视化合并 DAG 可能会告诉您很多关于这两个 DAG 的信息。您可以根据节点是否出现在两个 DAG 中或任何一个中来对节点进行颜色编码。

    这就是我们最初在 VisTrails 中设计工作流图的视觉差异的方式,see here。

    如果您坚持并排显示两个 DAG,创建合并 DAG 可能仍然是正确的想法,因为 dot 可以将合并图放置出来,您可以简单地隐藏适当的每个子图的节点。如此一来,共享结构将通过构造一致地布局。

    【讨论】:

    • 是的,我可以。由于之前和之后的 DAG 只是应用了差异,我知道每个节点中的哪些节点是相同的。现在我只需要弄清楚如何为一组非完全正交的差异构建 DAG 的遍历 DAG。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多