railwatch 0.6.1 → 0.7.0

data/app/frontend/components/railwatch/digit-roll.tsx

@@ -0,0 +1,312 @@
+import { useEffect, useRef } from "react"
+
+import { cn } from "@/lib/utils"
+
+// A number whose digits roll when it changes: the digits that actually
+// changed slide up (or down, when the number falls) to their new glyph and
+// the rest of the number stays exactly where it is.
+//
+// This is motion on an operational dashboard, which is a thing to be
+// careful with rather than a thing to sprinkle around -- see the gates on
+// `Stat`'s rolling path, which is what decides whether this component is
+// rendered at all. What this component owns is the part of the contract
+// that no caller can get right by itself:
+//
+//   * the roll is 300ms, so it is over long before the next update can
+//     arrive (see ROLL_MIN_INTERVAL_MS) and the strip is never in motion
+//     for more than ~15% of the time;
+//   * updates are coalesced to one roll every 2s. An update that lands
+//     inside that window is remembered, not painted, and the roll that
+//     follows goes straight to the newest value. A roll is never
+//     interrupted, because an animation that never finishes is worse than
+//     no animation at all;
+//   * the first paint is static. A page that opens, or one that is
+//     navigated back to, shows its numbers rather than animating up to
+//     them.
+//
+// The cells are built by hand rather than rendered, because they are keyed
+// by place value and animated with the Web Animations API, and neither of
+// those survives React re-rendering the digits underneath them. They are
+// decoration -- whoever renders this is expected to hide it from assistive
+// tech and put the number in a text node beside it (`Stat` does).
+
+// The one switch. Flip this to false and every rolling number in the app --
+// the dashboard's stats, and whatever the landing page does with the same
+// component -- becomes a plain static number.
+export const DIGIT_ROLL_ENABLED = true
+
+export const ROLL_DURATION_MS = 300
+export const ROLL_EASING = "cubic-bezier(.22, 1, .36, 1)"
+export const ROLL_MIN_INTERVAL_MS = 2_000
+
+// Fixed em heights on every piece, so a roll cannot change the line box and
+// the strip below the number cannot be pushed around by it.
+const CELL_CLASS =
+  "inline-block h-[1.15em] overflow-hidden leading-[1.15em] align-top"
+const SEPARATOR_CLASS =
+  "inline-block h-[1.15em] overflow-visible leading-[1.15em] align-top text-center"
+const STRIP_CLASS = "block will-change-transform"
+const SLOT_CLASS = "block h-[1.15em] leading-[1.15em]"
+const SUFFIX_CLASS = "inline-block h-[1.15em] leading-[1.15em]"
+
+type Direction = -1 | 0 | 1
+
+// A thousands separator (or a decimal point, or a minus sign) never rolls,
+// so it is a plain glyph rather than a two-slot stack.
+interface SeparatorCell {
+  separator: true
+  el: HTMLSpanElement
+  char: string | null
+}
+
+interface DigitCell {
+  separator: false
+  el: HTMLSpanElement
+  strip: HTMLSpanElement
+  top: HTMLSpanElement
+  bottom: HTMLSpanElement
+  animation: Animation | null
+  char: string | null
+}
+
+type Cell = SeparatorCell | DigitCell
+
+function span(className: string) {
+  const el = document.createElement("span")
+  el.className = className
+  return el
+}
+
+// "412,908ms" -> { digits: "412,908", suffix: "ms" }. The unit is one glyph
+// run at the end of the number that nothing ever moves.
+function split(formatted: string) {
+  let end = formatted.length
+  while (end > 0 && !/[0-9]/.test(formatted[end - 1])) end--
+  return { digits: formatted.slice(0, end), suffix: formatted.slice(end) }
+}
+
+function makeCell(separator: boolean): Cell {
+  const el = span(separator ? SEPARATOR_CLASS : CELL_CLASS)
+  if (separator) return { separator: true, el, char: null }
+  const strip = span(STRIP_CLASS)
+  const top = span(SLOT_CLASS)
+  const bottom = span(SLOT_CLASS)
+  strip.append(top, bottom)
+  el.append(strip)
+  return {
+    separator: false,
+    el,
+    strip,
+    top,
+    bottom,
+    animation: null,
+    char: null,
+  }
+}
+
+// Cells are keyed by distance from the right of the number, so a digit keeps
+// its identity -- its place value -- even when the number gains a digit:
+// 999 -> 1,000 leaves keys 0,1,2 rolling 9 -> 0 and simply inserts key 3
+// (the comma) and key 4 (the 1). No re-keying, no cascade, and the digits
+// that did not change never move.
+function createRoll(
+  host: HTMLElement,
+  { durationMs, easing }: { durationMs: number; easing: string },
+) {
+  const cells = new Map<number, Cell>()
+  let order = ""
+
+  // Collapse a cell back to the single digit that is showing. The glyph it
+  // rolled away from is out of view but still in the DOM, and a selection
+  // (or a copy) would otherwise pick it up.
+  function settle(cell: DigitCell, char: string) {
+    cell.animation?.cancel()
+    cell.animation = null
+    cell.top.textContent = char
+    cell.bottom.textContent = ""
+    cell.char = char
+  }
+
+  function roll(cell: DigitCell, char: string, direction: -1 | 1) {
+    // jsdom has no Web Animations API. Nothing to roll there: show the digit.
+    if (typeof cell.strip.animate !== "function") {
+      settle(cell, char)
+      return
+    }
+    // Cancel, re-fill the slots, and start the new animation in one task, so
+    // the browser never paints the intermediate state: an interrupted roll
+    // restarts from wherever it had got to, towards the new target.
+    cell.animation?.cancel()
+    const from = cell.char ?? char
+    if (direction > 0) {
+      cell.top.textContent = from
+      cell.bottom.textContent = char
+    } else {
+      cell.top.textContent = char
+      cell.bottom.textContent = from
+    }
+    const keyframes =
+      direction > 0
+        ? [{ transform: "translateY(0)" }, { transform: "translateY(-50%)" }]
+        : [{ transform: "translateY(-50%)" }, { transform: "translateY(0)" }]
+    const animation = cell.strip.animate(keyframes, {
+      duration: durationMs,
+      easing,
+      fill: "forwards",
+    })
+    cell.animation = animation
+    cell.char = char
+    animation.onfinish = () => {
+      if (cell.animation === animation) settle(cell, char)
+    }
+  }
+
+  function enter(cell: Cell) {
+    if (typeof cell.el.animate !== "function") return
+    cell.el.animate(
+      [
+        { opacity: 0, transform: "translateY(0.35em)" },
+        { opacity: 1, transform: "none" },
+      ],
+      { duration: durationMs, easing },
+    )
+  }
+
+  return {
+    paint(formatted: string, direction: Direction) {
+      const { digits, suffix } = split(formatted)
+      const chars = digits.split("")
+      const wanted = chars.map((char, index) => ({
+        key: chars.length - 1 - index,
+        char,
+      }))
+      const nextOrder = `${wanted.map((cell) => cell.key).join(",")}|${suffix}`
+      const first = order === ""
+
+      if (nextOrder !== order) {
+        // The key set changed (the number gained or lost a digit): re-lay the
+        // row, reusing every cell whose key survived.
+        const fragment = document.createDocumentFragment()
+        const keep = new Set<number>()
+        for (const { key, char } of wanted) {
+          keep.add(key)
+          const separator = !/[0-9]/.test(char)
+          let cell = cells.get(key)
+          if (cell?.separator !== separator) {
+            cell = makeCell(separator)
+            cells.set(key, cell)
+            if (!first && direction !== 0) enter(cell)
+          }
+          fragment.append(cell.el)
+        }
+        for (const key of [...cells.keys()])
+          if (!keep.has(key)) cells.delete(key)
+        host.replaceChildren(fragment)
+        if (suffix) {
+          const el = span(SUFFIX_CLASS)
+          el.textContent = suffix
+          host.append(el)
+        }
+        order = nextOrder
+      }
+
+      for (const { key, char } of wanted) {
+        const cell = cells.get(key)
+        if (!cell || cell.char === char) continue // this digit did not change
+        if (cell.separator) {
+          cell.el.textContent = char
+          cell.char = char
+        } else if (cell.char === null || direction === 0) {
+          settle(cell, char)
+        } else {
+          roll(cell, char, direction)
+        }
+      }
+    },
+
+    destroy() {
+      for (const cell of cells.values())
+        if (!cell.separator) cell.animation?.cancel()
+    },
+  }
+}
+
+export function DigitRoll({
+  value,
+  format,
+  className,
+  durationMs = ROLL_DURATION_MS,
+  easing = ROLL_EASING,
+  minIntervalMs = ROLL_MIN_INTERVAL_MS,
+}: {
+  value: number
+  format: (value: number) => string
+  className?: string
+  durationMs?: number
+  easing?: string
+  minIntervalMs?: number
+}) {
+  const hostRef = useRef<HTMLSpanElement>(null)
+  const rollRef = useRef<ReturnType<typeof createRoll> | null>(null)
+  // What the cells are showing, which is not `value` while an update is
+  // being held back by the coalescing window.
+  const shownRef = useRef(value)
+  const pendingRef = useRef<number | null>(null)
+  const lastRollAtRef = useRef(0)
+  const timerRef = useRef<number | undefined>(undefined)
+  const optionsRef = useRef({ format, durationMs, easing, minIntervalMs })
+  useEffect(() => {
+    optionsRef.current = { format, durationMs, easing, minIntervalMs }
+  })
+
+  useEffect(() => {
+    const host = hostRef.current
+    if (!host) return
+    const { format, durationMs, easing } = optionsRef.current
+    const roll = createRoll(host, { durationMs, easing })
+    rollRef.current = roll
+    // Never on mount: the first paint is the number, not a roll up to it.
+    roll.paint(format(shownRef.current), 0)
+    return () => {
+      clearTimeout(timerRef.current)
+      timerRef.current = undefined
+      pendingRef.current = null
+      rollRef.current = null
+      roll.destroy()
+    }
+    // Built once; every later value goes through the effect below.
+  }, [])
+
+  useEffect(() => {
+    const roll = rollRef.current
+    if (!roll || value === shownRef.current) return
+
+    const apply = (next: number) => {
+      lastRollAtRef.current = Date.now()
+      roll.paint(
+        optionsRef.current.format(next),
+        next >= shownRef.current ? 1 : -1,
+      )
+      shownRef.current = next
+    }
+
+    const elapsed = Date.now() - lastRollAtRef.current
+    const wait = optionsRef.current.minIntervalMs - elapsed
+    if (wait <= 0) {
+      apply(value)
+      return
+    }
+    // Inside the window: hold this value (replacing any other one being
+    // held) and let the timer already running land the newest of them. The
+    // roll in flight is left alone.
+    pendingRef.current = value
+    timerRef.current ??= window.setTimeout(() => {
+      timerRef.current = undefined
+      const next = pendingRef.current
+      pendingRef.current = null
+      if (next !== null && next !== shownRef.current) apply(next)
+    }, wait)
+  }, [value])
+
+  return <span ref={hostRef} className={cn(className)} />
+}

data/app/frontend/components/railwatch/empty-state.tsx

@@ -0,0 +1,159 @@
+import { type LucideIcon } from "lucide-react"
+import { type ReactNode, useId } from "react"
+
+import { cn } from "@/lib/utils"
+
+// A stretch of track behind the message: two rails and a run of ties. Two
+// masks shape it. A horizontal one fades the ends so the line runs off the
+// edge of the panel rather than stopping at it, and a radial one dissolves
+// the middle so the message sits in a clear pocket while the rails stay
+// legible on either side. The pocket is narrower below md so a phone card
+// still shows a good run of track on each side of the message.
+export function Track({ className }: { className?: string }) {
+  const id = useId()
+  return (
+    <svg
+      aria-hidden
+      className={cn(
+        "text-foreground/35 dark:text-foreground/40 pointer-events-none absolute inset-x-0 top-1/2 h-12 w-full -translate-y-1/2",
+        "[mask-composite:intersect]",
+        "[mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent),radial-gradient(ellipse_200px_160%_at_50%_50%,transparent_20%,black_100%)]",
+        "md:[mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent),radial-gradient(ellipse_300px_160%_at_50%_50%,transparent_35%,black_100%)]",
+        className,
+      )}
+      preserveAspectRatio="none"
+    >
+      <defs>
+        <pattern id={id} width="22" height="48" patternUnits="userSpaceOnUse">
+          <rect x="9" y="9" width="4" height="30" rx="1" fill="currentColor" />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${id})`} />
+      <rect y="16" width="100%" height="2.5" fill="currentColor" />
+      <rect y="29.5" width="100%" height="2.5" fill="currentColor" />
+    </svg>
+  )
+}
+
+export type SignalAspect = "clear" | "caution" | "stop"
+
+const ASPECT_CLASS: Record<SignalAspect, string> = {
+  clear: "text-live",
+  caution: "text-warning",
+  stop: "text-danger",
+}
+
+// Lamps in their real order on a three-aspect head: stop on top, caution in
+// the middle, clear at the bottom.
+const LAMP_Y: Record<SignalAspect, number> = { stop: 8, caution: 17, clear: 26 }
+const LAMP_ORDER: SignalAspect[] = ["stop", "caution", "clear"]
+
+// A lineside signal standing just past the pocket, on the right. The post
+// and hood take the track's ink; the one lit aspect uses the status
+// vocabulary the rest of the UI already speaks (green = clear, amber =
+// caution, rose = stop). An empty table is a clear line, so that is the
+// default; pages whose empty state is a filter miss pass "caution".
+export function Signal({
+  aspect,
+  className,
+}: {
+  aspect: SignalAspect
+  className?: string
+}) {
+  return (
+    <svg
+      aria-hidden
+      viewBox="0 0 20 64"
+      className={cn(
+        "pointer-events-none absolute top-1/2 h-16 w-5 -translate-y-[calc(50%+8px)]",
+        "left-[calc(50%+100px)] md:left-[calc(50%+150px)]",
+        className,
+      )}
+    >
+      <g className="text-foreground/35 dark:text-foreground/40">
+        <rect x="9" y="33" width="2" height="26" rx="1" fill="currentColor" />
+        <rect x="5" y="58" width="10" height="2" rx="1" fill="currentColor" />
+        <rect
+          x="4.75"
+          y="1.75"
+          width="10.5"
+          height="31.5"
+          rx="5.25"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+        />
+      </g>
+      {LAMP_ORDER.map((lamp) =>
+        lamp === aspect ? (
+          <g key={lamp} className={ASPECT_CLASS[lamp]} data-lamp={lamp}>
+            <circle
+              cx="10"
+              cy={LAMP_Y[lamp]}
+              r="6"
+              fill="currentColor"
+              opacity="0.2"
+              className="blur-[2px]"
+            />
+            <circle cx="10" cy={LAMP_Y[lamp]} r="3" fill="currentColor" />
+          </g>
+        ) : (
+          <circle
+            key={lamp}
+            cx="10"
+            cy={LAMP_Y[lamp]}
+            r="3"
+            className="text-foreground/15"
+            fill="currentColor"
+          />
+        ),
+      )}
+    </svg>
+  )
+}
+
+// Empty state for tables and panels: the icon, title, optional description
+// and action, set in the clear pocket of a track that runs behind them,
+// with a signal beside the line showing the aspect.
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  signal = "clear",
+  className,
+}: {
+  icon?: LucideIcon
+  title: ReactNode
+  description?: ReactNode
+  action?: ReactNode
+  signal?: SignalAspect
+  className?: string
+}) {
+  return (
+    <div
+      className={cn(
+        "relative flex min-h-48 items-center justify-center overflow-hidden px-4 py-8 text-center",
+        className,
+      )}
+      aria-live="polite"
+    >
+      <Track />
+      <Signal aspect={signal} />
+      <div className="relative flex max-w-xs flex-col items-center gap-1.5">
+        {Icon && (
+          <span className="bg-muted text-muted-foreground mb-1 flex size-9 items-center justify-center rounded-md">
+            <Icon className="size-4" />
+          </span>
+        )}
+        <span className="text-sm font-medium">{title}</span>
+        {description && (
+          <span className="text-muted-foreground text-xs leading-relaxed">
+            {description}
+          </span>
+        )}
+        {action && <div className="mt-2">{action}</div>}
+      </div>
+    </div>
+  )
+}

data/app/frontend/components/railwatch/env-nav.tsx

@@ -0,0 +1,130 @@
+import { Link, usePage } from "@inertiajs/react"
+import { Bookmark, ChevronRight } from "lucide-react"
+import { useState } from "react"
+
+import { isViewActive, samePage } from "@/components/railwatch/saved-views"
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/components/ui/sidebar"
+import { ENV_PAGE_GROUPS, envPages } from "@/lib/env-pages"
+import { cn } from "@/lib/utils"
+import type { SharedProps } from "@/types"
+
+// Environment navigation in the sidebar: Overview at the top, then one
+// collapsible section per page group (Activity, Monitoring, Settings). The
+// section containing the current page starts open; the others start
+// closed so the list stays short.
+export function EnvNav() {
+  const page = usePage<SharedProps>()
+  const { environment } = page.props
+  const current = page.url.split("?")[0]
+  const [openOverride, setOpenOverride] = useState<
+    Record<string, boolean | undefined>
+  >({})
+  if (!environment) return null
+
+  const items = envPages(
+    environment.application_id,
+    environment.id,
+    page.props.window as string,
+  )
+  const pinnedViews = (page.props.saved_views ?? []).filter((v) => v.pinned)
+  const isCurrent = (href: string) => {
+    const path = href.split("?")[0]
+    return current === path || current.startsWith(path + "/")
+  }
+  const overview = items[0]
+
+  return (
+    <SidebarGroup className="p-0">
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton
+            asChild
+            isActive={current === overview.href.split("?")[0]}
+            tooltip={{ children: overview.title }}
+          >
+            <Link href={overview.href} prefetch>
+              {overview.icon && <overview.icon />}
+              <span>{overview.title}</span>
+            </Link>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+        {ENV_PAGE_GROUPS.map((group) => {
+          const groupItems = items.filter(
+            (i) => i.group === group.key && i !== overview,
+          )
+          const containsCurrent = groupItems.some((i) => isCurrent(i.href))
+          const open = openOverride[group.key] ?? containsCurrent
+          const GroupIcon = groupItems[0]?.icon
+          return (
+            <Collapsible
+              key={group.key}
+              open={open}
+              onOpenChange={(v) =>
+                setOpenOverride((o) => ({ ...o, [group.key]: v }))
+              }
+              className="group/collapsible"
+            >
+              <SidebarMenuItem>
+                <CollapsibleTrigger asChild>
+                  <SidebarMenuButton
+                    tooltip={{ children: group.title }}
+                    className={cn(containsCurrent && "text-sidebar-foreground")}
+                  >
+                    {GroupIcon && <GroupIcon />}
+                    <span>{group.title}</span>
+                    <ChevronRight className="ml-auto size-3.5 opacity-60 transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                  </SidebarMenuButton>
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <SidebarMenuSub className="mr-0 gap-0.5 pr-0">
+                    {groupItems.map((item) => (
+                      <SidebarMenuSubItem key={item.title}>
+                        <SidebarMenuSubButton
+                          asChild
+                          isActive={isCurrent(item.href)}
+                        >
+                          <Link href={item.href} prefetch>
+                            <span>{item.title}</span>
+                          </Link>
+                        </SidebarMenuSubButton>
+                        {pinnedViews
+                          .filter((view) => samePage(view.url, item.href))
+                          .map((view) => (
+                            <SidebarMenuSubButton
+                              key={view.id}
+                              asChild
+                              size="sm"
+                              className="pl-4"
+                              isActive={isViewActive(page.url, view.url)}
+                            >
+                              <Link href={view.url}>
+                                <Bookmark className="opacity-60" />
+                                <span>{view.name}</span>
+                              </Link>
+                            </SidebarMenuSubButton>
+                          ))}
+                      </SidebarMenuSubItem>
+                    ))}
+                  </SidebarMenuSub>
+                </CollapsibleContent>
+              </SidebarMenuItem>
+            </Collapsible>
+          )
+        })}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}