@davidsouther/agathon 0.0.0-stage → 0.0.0

package/src/layout/hierarchic/debug.ts

@@ -0,0 +1,186 @@
+/**
+ * @fileoverview
+ *
+ * A collection of utilities to ease debugging the layout steps.
+ */
+
+import { GRAPH_ROOT } from "../../tsabre/graph.ts";
+// import { stringGraph } from "../../tsabre.ts";
+import { stringGraph } from "../../tsabre.ts";
+import type { Edge, FullGraph, Node, NodeId, SmartGraph } from "../../types.ts";
+import type { EdgeProperties, NodeProperties } from "../types.ts";
+import { getEdgeProps, getNodeProps, initOrder } from "../util.ts";
+
+/**
+ * Print a DOT text for a graph.
+ */
+export function printGraph(g: FullGraph): void {
+  console.info(stringGraph(g, { graph: () => new Map([["printDebug", "true"]]) }));
+}
+
+/**
+ * Utility to get an immediate snapshot of the state of the graph layout
+ * algorithm's execution.
+ */
+export function debugGraph(g: FullGraph, step: string): void {
+  const nodes = Array.from(g.nodes)
+    .map((id) => [id, getNodeProps(g.node(id)!)] as [string, NodeProperties])
+    .map(
+      ([
+        id,
+        {
+          rank,
+          order,
+          geometry: { x, y },
+        },
+      ]) => ({ id, rank, order, x, y }),
+    );
+  const layout = initOrder(g).map((r) =>
+    r.map((id) => {
+      const {
+        geometry: { x, y },
+      } = getNodeProps(g.node(id)!);
+      return `${id} <${x}, ${y}>`;
+    }),
+  );
+
+  // Pull cutValue from edgeProps, returning a table with source, target, name,
+  // weight, and minLength for each edge.
+  const edges = Array.from(g.edges())
+    .map((e) => [e, getEdgeProps(e)] as [Edge, EdgeProperties])
+    .map(([{ source, target, name }, { weight, minLength }]) => ({
+      source,
+      target,
+      name,
+      weight,
+      minLength,
+    }));
+
+  console.group(`SmartGraph state after ${step}`);
+
+  console.group("nodes");
+  console.table(nodes);
+  console.groupEnd();
+
+  console.group("edges");
+  console.table(edges);
+  console.groupEnd();
+
+  console.group("layout");
+  console.table(layout);
+  console.groupEnd();
+
+  console.groupEnd();
+}
+
+const NODE: unique symbol = Symbol("Node");
+interface DebugTree extends Record<NodeId, DebugTree> {
+  [NODE]?: Node;
+}
+
+/**
+ * Prints a spanning tree, including [low, lim] of each node indicating children
+ * and the cutValue for each edge.
+ */
+export function printSpanningTree(g: FullGraph, step = ""): void {
+  const treeDFS = (id: NodeId, obj: DebugTree) => {
+    obj[id] = { [NODE]: g.node(id) };
+    for (const cid of g.children(id)) {
+      treeDFS(cid, obj[id]);
+    }
+    return obj;
+  };
+
+  const nodes = treeDFS(GRAPH_ROOT, {});
+
+  // Pull cutValue from edgeProps, returning a table with source, target, name,
+  // and cutValue for each edge.
+  const edges = Array.from(g.allEdges)
+    .map((e) => [e, getEdgeProps(e)] as [Edge, EdgeProperties])
+    .map(([{ source, target, name }, { cutValue }]) => ({
+      source,
+      target,
+      name,
+      cutValue,
+    }));
+
+  console.group(`Spanning tree ${step}`);
+
+  console.group("nodes");
+  console.info(nodes);
+  console.groupEnd();
+
+  console.group("edges");
+  console.table(edges);
+  console.groupEnd();
+
+  console.groupEnd();
+}
+
+/**
+ * Given a layering matrix, print debug information for it.
+ */
+export function printLayering(layers: NodeId[][], g: FullGraph): void {
+  console.group("Layering");
+  console.table(
+    layers.map((l) =>
+      l.map((id) => {
+        const inCount = [...g.inEdges(id)].length;
+        const outCount = [...g.outEdges(id)].length;
+        return `${inCount}> ${id} >${outCount}`;
+      }),
+    ),
+  );
+  console.groupEnd();
+}
+
+/**
+ * Given a graph and set of FAS buckets, print the FAS state including d(n).
+ */
+export function debugFas(
+  {
+    graph,
+    buckets,
+  }: {
+    graph: SmartGraph<{}, {}>;
+    buckets: Array<Array<{ id: string; in: number; out: number }>>;
+  },
+  results: Edge[] = [],
+): void {
+  console.group("FAS State");
+  const b = buckets.reduce(
+    (a, bs, i) => {
+      if (bs.length > 0) {
+        a = a.concat(
+          bs.map(({ id, in: n, out }) => ({
+            id,
+            in: n,
+            out,
+            d: Math.abs(out - n),
+            i,
+          })),
+        );
+      }
+      return a;
+    },
+    [] as Array<{ id: string; in: number; out: number }>,
+  );
+  console.table(b);
+  console.groupEnd();
+  console.group("FAS results");
+  console.table(
+    results.map(({ source, target, name }) => ({
+      s: source,
+      t: target,
+      n: name,
+    })),
+  );
+  console.groupEnd();
+}
+
+/**
+ * Print an arbitrary value.
+ */
+export function print(k: unknown): void {
+  console.info(k);
+}

package/src/layout/hierarchic/layout.ts

@@ -0,0 +1,266 @@
+import { assert } from "../../assert.ts";
+import { edgeId } from "../../tsabre/graph.ts";
+import type { Edge, FullGraph, NodeId } from "../../types.ts";
+import * as childrenRelative from "../hulls/hulls.ts";
+import { assignSegmentPoints } from "../hulls/segments.ts";
+import {
+  getGraphProps,
+  getNodeProps,
+  readVirtualNodeLayoutCache,
+  writeVirtualNodeLayoutCache,
+} from "../util.ts";
+
+import { decycle, recycle } from "./acyclic.ts";
+import * as childrenAbsolute from "./children.ts";
+import * as debug from "./debug.ts";
+import { denormalize, normalize } from "./normalize.ts";
+import { order } from "./order.ts";
+import { position } from "./position.ts";
+import { rank } from "./rank.ts";
+
+/**
+ * Given a graph G, assign (x, y) to each node to result in an efficient and
+ * aesthetically pleasing layout.
+ *
+ * The algorithm itself proceeds in a series of discrete steps, with a pair of
+ * simplifying operations applied to make some algorithmic steps possible. Many
+ * of the sub-problems are themselves NP-complete to achieve the above goals;
+ * therefore, bounded polynomial solutions are used in several places to achieve
+ * "good enough" results. Overall, the combined running time of the entire
+ * process should be O(VE+VlogV), that is, constrained by ranking in time
+ * comensurate to number of nodes & number of edges, and in ordering by time
+ * comensurate to number of nodes times the log number of nodes.
+ *
+ * Layout begins and ends by removing and then restoring cycles in the graph.
+ * Ranking, especially, is non-deterministic with cycles present in a graph. By
+ * reversing cycle-causing edges, the layout still applies their weights,
+ * crossings, etc, but the algorithms are able to assert preconditions that the
+ * graphs they receive are acyclic.
+ *
+ * With an acyclic graph, ranking is the process of assigning a `rank` value
+ * such that for every edge n1 -> n2, n1.rank < n2.rank. Additionally, ranking
+ * uses a minLength value for each edge (default and minimum 1) such that
+ * n1.rank + minLength <= n2.rank. This additional minLength property allows
+ * callers some flexibility in controlling the vertical layout & whitespace of
+ * the graph.
+ *
+ * After ranking has been completed, the graph is normalized to collapse all
+ * multi-edges into single edges with their aggregate weight. This will be
+ * undone after both ordering and positioning, before undoing the acyclic break.
+ *
+ * With a simplified graph, ordering arranges nodes within a rank in a way that
+ * minimizes edge crossings. Additionally, by ordering the virtual nodes, their
+ * positions will later be available to route edges "between" gaps in ranks.
+ *
+ * After ranking and ordering, the final step in positioning assigns a final (x,
+ * y) coordinate with emphasis on vertical alignment provided by a weight on
+ * each edge, as well as a final whitespace factor provided by nodeSep and
+ * rankSep (width and height respectively).
+ *
+ * Nesting layout (positioning children) is the responsibility of the calling
+ * graph; while it can be done at any time, the size of the top-most nodes must
+ * be set for positioning to behave appropriately.
+ *
+ * This implementation draws heavily from
+ * [Dagre](https://github.com/dagrejs/dagre), itself a re-implementation of
+ * GraphViz. Some benefits provided in this custom solution:
+ *
+ * -   Using modern ES6 data structures and the TypeScript type system, the code
+ *     is both more performant and maintainable. ES6 data structures are more
+ *     performant in many cases than their array and object equivalents, because
+ *     browser optimizations are built specifically for the structures
+ *     themselves and not for the just-in-time compiled objects case.
+ *     Additionally, they have stronger runtime and type-system constraints on
+ *     their usage.
+ */
+export function layout(g: FullGraph, triggeredNodeId?: NodeId): void {
+  const children =
+    // tslint:ignore-next-line:ban-module-namespace-object-escape
+    getGraphProps(g).childrenRelative ? childrenRelative : childrenAbsolute;
+  const childrenHandler = children.handler();
+  const { printDebug } = getGraphProps(g);
+  const pipeline = timedPipeline([
+    validate,
+    // E = |edges|, V = |vertices|, R = |ranks|
+    (fg: FullGraph) => {
+      children.layout(fg, triggeredNodeId);
+    },
+    childrenHandler.remove,
+    decycle, // Heuristic FAS, O(E)
+    rank, // Network simplex, O(VE) but heuristically better than the worst
+    // case
+    normalize, // O(ER)
+    order, // O(VlogV+E) from [Forster]
+    writeVirtualNodeLayoutCache,
+    position, // O(VE) from [Brendes]
+    denormalize, // O(ER)
+    recycle, // Very small, the number of edges found in decycle
+    childrenHandler.replace,
+    assignSegmentPoints,
+  ]);
+  if (printDebug) console.group("Layout Debug");
+  pipeline(g);
+  if (printDebug) console.groupEnd();
+}
+
+/**
+ * Expand/collapse events require only a partial layout recalculation, in
+ * particular, positioning and hull layout, which in turn:
+ *
+ * * position() requires reintroduction of virtual nodes (used to build edges
+ * spanning over more than 1 rank) => normalize(), denormalize().
+ * * [1] Reintroduced virtual nodes to be properly ordered together with all
+ * real nodes => ordering.
+ * * Only top-level nodes can participate in ordering, which means all their
+ * descendant nodes and their connections should be stashed => handler.remove(),
+ * handler.replace().
+ * * Segment points need to be updated => assignSegmentPoints().
+ * * [2] Decycle can't be skipped because recycle needs to run, and vice versa.
+ * Decycling is important because ranking a cyclic graph is non-deterministic.
+ * Also, removing decycle() leads to a lot of side-effects for graphs with a lot
+ * of horizontal distance between nodes (i.e. a lot of virtual nodes holding
+ * that space).
+ *
+ * [1] - For ordering on partial layout, order() doesn't actually run. On first
+ * run of layout(), order() gets called, and the resulting orders, together with
+ * ranks, that have been calculated previously, are cached in
+ * graph::@@layout::virtualNodeLayout. Those values are subsequently used as a
+ * substitute for rank() and order() in partialLayout().
+ *
+ * [2] - The first time decycling is ran, the FAS, subset of edges that need to
+ * be reversed in order to remove all the cycles, is calculated by greedyFas()
+ * and cached in graph::@@layout::fas. Next time decycle() gets called on the
+ * same graph in partialLayout, greedyFas() doesn't need to run. Instead, the
+ * cached FAS is used.
+ */
+export function partialLayoutOnNodeEvent(g: FullGraph, triggeredNodeId?: NodeId): void {
+  const children =
+    // tslint:ignore-next-line:ban-module-namespace-object-escape
+    getGraphProps(g).childrenRelative ? childrenRelative : childrenAbsolute;
+  const childrenHandler = children.handler();
+  const { printDebug } = getGraphProps(g);
+  const pipeline = timedPipeline([
+    (fg: FullGraph) => {
+      children.layout(fg, triggeredNodeId);
+    },
+    childrenHandler.remove,
+    // Removing decycle also leads to weird side-effects, like decrease of the
+    // number of virtual nodes
+    decycle,
+    normalize,
+    readVirtualNodeLayoutCache,
+    position,
+    denormalize,
+    recycle,
+    childrenHandler.replace,
+    assignSegmentPoints,
+  ]);
+
+  if (printDebug) console.group("Partial Layout Debug");
+  pipeline(g);
+  if (printDebug) console.groupEnd();
+}
+
+/**
+ * Apply a list of functions to a single graph, capturing timing information for
+ * each (when requested by the GraphConfig).
+ */
+function timedPipeline(fns: Array<(g: FullGraph) => FullGraph | void>) {
+  return (g: FullGraph) => {
+    const { timing, printDebug } = getGraphProps(g);
+    const timingFn = timing && !printDebug ? time : notime;
+    if (printDebug) debug.printGraph(g);
+    for (const fn of fns) {
+      const res = timingFn(fn)(g);
+      if (res !== undefined) {
+        g = res;
+      }
+      if (printDebug) {
+        debug.debugGraph(g, fn.name);
+      }
+    }
+  };
+}
+
+/**
+ * Wrap a function in a pair of calls to console.time/timeEnd, using the
+ * function's name for the timer.
+ */
+export function time<T, U>(fn: (...args: T[]) => U): (...args: T[]) => U {
+  return (...args: T[]) => {
+    const name = fn.name;
+    let result: U;
+    console.time(name);
+    try {
+      result = fn(...args);
+    } finally {
+      console.timeEnd(name);
+    }
+    return result;
+  };
+}
+
+/** Return the function. For symmetry with time, above. */
+export function notime<T, U>(fn: (...args: T[]) => U): (...args: T[]) => U {
+  return fn;
+}
+
+/* Validate that the layout graph has no structural issues that might cause the
+ * algorithm to finish successfully. For instance, all top-level ranks must
+ * point "down" the graph ranks. This is guaranteed by the ranking algorithm,
+ * but must be verified if callers have asked for fixed ranks.
+ */
+function validate(graph: FullGraph): void {
+  const fixed = validateFixedRanks(graph);
+  if (fixed) {
+    validateRanksPointDown(graph);
+  }
+}
+
+/* Validate that if any node is fixedRank, then every node is fixedRank */
+function validateFixedRanks(graph: FullGraph): boolean {
+  let fixed: boolean | undefined;
+  for (const id of graph.children()) {
+    const { fixedRank } = getNodeProps(graph.node(id)!);
+    if (fixed === undefined) {
+      fixed = fixedRank;
+    }
+    assert(
+      fixed === fixedRank,
+      `HierarchicalLayout::validateFixedRanks: Top-level nodes must either all be fixedRank or non be fixedRank; ${id} is a goose.`,
+    );
+  }
+  return fixed || false;
+}
+
+/* Validate that all top-level segments point "down" the graph, that is, source
+ * has a lower rank than target. */
+function validateRanksPointDown(graph: FullGraph): void {
+  const violatingEdges = new Set<Edge>();
+  for (const segment of graph.topSegments) {
+    for (const edge of segment.edges) {
+      const sourceParent = graph.ancestors(edge.source).pop()!;
+      const targetParent = graph.ancestors(edge.target).pop()!;
+      const sourceRank = getNodeProps(graph.node(sourceParent)!).rank;
+      const targetRank = getNodeProps(graph.node(targetParent)!).rank;
+
+      if (sourceRank >= targetRank) {
+        violatingEdges.add(edge);
+      }
+    }
+  }
+
+  if (violatingEdges.size > 0) {
+    const firstFew: Array<Edge> = [];
+    let i = 0;
+    for (const edge of violatingEdges) {
+      firstFew.push(edge);
+      if (++i > 10) break;
+    }
+    throw new Error(
+      `HierarchicalLayout::validateRanksPointDown: ${
+        violatingEdges.size
+      } edge(s) point the wrong direction, first few are [${firstFew.map(edgeId).join(", ")}]`,
+    );
+  }
+}

package/src/layout/hierarchic/manager.ts

@@ -0,0 +1,65 @@
+import type { NodeId } from "../../types.ts";
+import { ChildManager } from "../manager/child_manager.ts";
+import { AbstractLayoutManager } from "../manager/manager.ts";
+import type { LayoutGraph } from "../types.ts";
+
+import { layout, partialLayoutOnNodeEvent } from "./layout.ts";
+
+/**
+ * HierarchicalLayoutManager assumes drag functionality from
+ * AbstractLayoutManager, and does layout using the Hierarchical layout engine.
+ */
+
+export class HierarchicalLayoutManager extends AbstractLayoutManager {
+  override buildChildManager(): ChildManager {
+    return new HierarchicalChildManager(this);
+  }
+
+  /**
+   * Rerun the layout.
+   * @param triggeredNodeId - See manager/manager.ts::run(). ID of the
+   * expanded/collapsed node. Each such event triggers a partial layout
+   * recalculation. If no event fired and/or we need the complete layout
+   * recalculation, no triggeredNodeId is passed.
+   */
+  doLayout(triggeredNodeId?: NodeId): void {
+    // TODO: Make layout work on ReadonlyLayoutGraph, so that all this
+    // can be Readonly
+    layout(this.graph, triggeredNodeId);
+  }
+
+  /**
+   * Rerun the layout through a simplified pipeline on node expand/collapse.
+   */
+  runPartial(graph: LayoutGraph, triggeredNodeId: NodeId, panToCenter = true): void {
+    this.graph = graph;
+
+    this.nodePositions.clear();
+    this.segmentPositions.clear();
+    this.entityTouched.clear();
+
+    this.doPartialLayout(triggeredNodeId);
+    this.updateAt(undefined, panToCenter);
+  }
+
+  /**
+   * Partial recalculation of layout on expand/collapse. See
+   * hierarchic/layout.ts::partialLayout for full explanation.
+   */
+  private doPartialLayout(triggeredNodeId?: NodeId) {
+    partialLayoutOnNodeEvent(this.graph, triggeredNodeId);
+    if (triggeredNodeId) this.updateNodes(triggeredNodeId);
+  }
+}
+
+class HierarchicalChildManager extends ChildManager {
+  private readonly hierarchicManager: HierarchicalLayoutManager;
+  constructor(hierarchicManager: HierarchicalLayoutManager) {
+    super(hierarchicManager);
+    this.hierarchicManager = hierarchicManager;
+  }
+
+  protected override doNodeResize(id: NodeId) {
+    this.hierarchicManager.runPartial(this.manager.graph, id);
+  }
+}

package/src/layout/hierarchic/normalize.ts

@@ -0,0 +1,177 @@
+import { assertExists } from "../../assert.ts";
+import { RNGon } from "../../geometry.ts";
+import { EDGE_KEY_DELIM, edgeId } from "../../tsabre/graph.ts";
+import type { Edge, FullGraph, NodeId, Point } from "../../types.ts";
+import type { NodeProperties } from "../types.ts";
+import {
+  addVirtualNode,
+  getEdgeProps,
+  getGraphProps,
+  getNodeProps,
+  getSegmentProps,
+  makeEdge,
+  position,
+  Virtual,
+} from "../util.ts";
+
+/**
+ * Given a graph with long edges (spanning more than 1 rank), break it into a
+ * chain of virtual nodes. This greatly simplifies order processing &
+ * positioning. During layout, this will be performed after ranking, and undone
+ * after positioning. During ordering, having a virtual node for each path at
+ * every rank is critical for sweeping, so that long edges get pulled out of
+ * conflict when possible. During positioning, any virtual nodes that have moved
+ * will get positioned using 0 size, and their position can be used as a point
+ * on the edge spline.
+ */
+export function normalize(g: FullGraph): void {
+  const edges = [...g.edges()];
+  for (const edge of edges) {
+    normalizeEdge(g, edge);
+  }
+}
+
+/**
+ * For each edge, break it into a series of virtual nodes and edges each
+ * crossing a single rank. Store the original edge in the edgeLayout for the
+ * first virtual node, and store each starting node in the vertical chain in
+ * the virtualChains set of the graph.
+ */
+function normalizeEdge(g: FullGraph, e: Edge) {
+  const gLayout = getGraphProps(g);
+  const virtualChains = (gLayout.virtualChains = gLayout.virtualChains || new Set<NodeId>());
+  const { source, target, name } = e;
+  let sId = source;
+  const tId = target;
+  let sourceRank = getNodeProps(g.node(sId)!).rank + 1;
+  const targetRank = getNodeProps(g.node(tId)!).rank;
+  const edgeLayout = getEdgeProps(g.edge(e)!);
+  const { weight } = edgeLayout;
+  const edge = g.edge(e);
+
+  if (targetRank === sourceRank) return;
+
+  g.removeEdge(e);
+
+  // Using i as an internal index, iterate from source to target rank,
+  // generating a new node at each step.
+  for (let i = 0; sourceRank < targetRank; ++i, ++sourceRank) {
+    // It is crucially important for virtual nodes, created on normalization, to
+    // have unique, but reproducible ids. I.e. the id of the virtual node
+    // created in the same edge on the same rank should always be the same and
+    // not change between different runs of layout() and partialLayout(). This
+    // is because new virtual nodes should be associated with their old
+    // counterparts, ids of which were recorded in virtualNodeLayout. Here, a
+    // virtual node's name depends on the edge it belongs to (which in turn has
+    // its own unique name) and on its rank.
+    const vIdRank = EDGE_KEY_DELIM + sourceRank.toString();
+    const vId = `(϶${EDGE_KEY_DELIM}${edgeId(edge!)}${vIdRank})`;
+    const layout: Partial<NodeProperties> = {
+      geometry: RNGon.point(),
+      rank: sourceRank,
+      virtualEdge: edge,
+      virtualEdgeLayout: edgeLayout,
+    };
+
+    addVirtualNode(g, Virtual.EDGE, layout, vId);
+    const sv = makeEdge(sId, vId, { weight }, name);
+    g.setEdge(sv, sv);
+    if (i === 0) {
+      virtualChains.add(vId);
+    }
+    sId = vId;
+  }
+
+  const vt = makeEdge(sId, tId, { weight }, name);
+  g.setEdge(vt, vt);
+}
+
+/**
+ * Given a graph with additional virtual nodes added by `normalize`, remove them
+ * and restore the original long edges. Use the positions of the virtual nodes
+ * as the points the edge should pass through.
+ */
+export function denormalize(g: FullGraph): void {
+  removeVirtualChains(g);
+}
+
+function removeVirtualChains(g: FullGraph) {
+  const chains = getGraphProps(g).virtualChains || new Set();
+  for (let vId of chains) {
+    let node = g.node(vId)!;
+
+    // Reset the original edge
+    const { virtualEdge, virtualEdgeLayout } = getNodeProps(node);
+
+    // Clear old points
+    virtualEdgeLayout!.points = [];
+    const vEdge = makeEdge(
+      virtualEdge!.source,
+      virtualEdge!.target,
+      virtualEdgeLayout!,
+      virtualEdge!.name,
+    );
+    g.setEdge(vEdge, virtualEdge!);
+
+    // Remove all the nodes, and gather their positions for the edge.
+    let next: NodeId;
+    while (getNodeProps(node).virtual) {
+      next = Array.from(g.successors(vId))[0];
+      const { x, y } = getNodeProps(g.node(vId)!).geometry;
+      g.removeNode(vId);
+      virtualEdgeLayout!.points.push({ x, y });
+      vId = next;
+      node = g.node(vId)!;
+    }
+  }
+
+  chains.clear();
+
+  // Now that all chains have been devirtualized, reverse points as necessary
+  // and then normalize the segments underlying the edges.
+  for (const e of g.edges()) {
+    const edge = getEdgeProps(g.edge(e)!);
+    if (edge.reversed) {
+      edge.points.reverse();
+    }
+    // At this point, `g` is still the reduced graph with edges mapping 1:1 to
+    // top level segments.
+    if (!g.hasNode(g.parent(e.source)) && !g.hasNode(g.parent(e.target))) {
+      normalizeSegment(g, e);
+    }
+  }
+}
+
+function normalizeSegment(graph: FullGraph, edge: Edge) {
+  // Find the matching top level segment, and attach the points there as well.
+  // There is exactly one matching top segment for each edge before
+  // denormalization.
+  const segment = assertExists(
+    graph.topSegment(edge.source, edge.target),
+    `hierarchic/normalize.ts::normalizeSegment: No top level segment for ${edge.source} -> ${edge.target}`,
+  );
+  const layout = getEdgeProps(graph.edge(edge)!);
+
+  // This is still normalizing a reduced graph, so the passed edge aligns with
+  // the top level segment.
+  const edgeAlignedWithSegment = segment.source === edge.source;
+
+  // Push (possibly back to front) into an array. spread and reverse are costly.
+  const points: Point[] = (getSegmentProps(segment).points = []);
+  points.push(position(graph.node(segment.source)!));
+
+  // If edge is aligned with the segment and the layout is not reversed, push
+  // points in order. If the edge is not aligned with the layout but the edge
+  // is reversed, push the points in order. And vice verse. This is actually a
+  // place to use a logical XOR.
+  if (edgeAlignedWithSegment !== layout.reversed) {
+    for (const point of layout.points) {
+      points.push(point);
+    }
+  } else {
+    for (let i = layout.points.length - 1; i >= 0; i--) {
+      points.push(layout.points[i]);
+    }
+  }
+  points.push(position(graph.node(segment.target)!));
+}