Function RailsSVG

minecommit-gui/src/components/commit-graph.tsx:184–349

({
  row,
  prevRow,
  railWidth,
  maxRails,
}: {
  row: GraphRow
  prevRow: GraphRow | null
  railWidth: number
  maxRails: number
})

const ROW_HEIGHT = 40

function RailsSVG({
  row,
  prevRow,
  railWidth,
  maxRails,
}: {
  row: GraphRow
  prevRow: GraphRow | null
  railWidth: number
  maxRails: number
}) {
  const w = maxRails * railWidth
  const h = ROW_HEIGHT
  const cy = h / 2

  function rx(rail: number) {
    return rail * railWidth + railWidth / 2
  }

  const commitX = rx(row.rail)

  // Collect which rails are active above this row (from previous row's post-state)
  const activeAbove = new Set<number>()
  if (prevRow) {
    for (let r = 0; r < prevRow.rails.length; r++) {
      if (prevRow.rails[r] !== null) activeAbove.add(r)
    }
  }

  // Collect which rails are active below this row
  const activeBelow = new Set<number>()
  for (let r = 0; r < row.rails.length; r++) {
    if (row.rails[r] !== null) activeBelow.add(r)
  }

  return (
    <svg
      width={w}
      height={h}
      viewBox={`0 0 ${w} ${h}`}
      className="shrink-0"
      aria-hidden="true"
    >
      {/* Pass-through rails: any rail active both above and below that isn't the commit rail */}
      {Array.from(activeAbove).map((r) => {
        if (r === row.rail) return null
        if (!activeBelow.has(r)) return null
        const x = rx(r)
        return (
          <line
            key={`pt-${r}`}
            x1={x}
            y1={0}
            x2={x}
            y2={h}
            stroke={color(r)}
            strokeWidth={2}
            strokeOpacity={0.6}