Service Map

Installation

Usage

import { ServiceMap } from "@/components/service-map";

<ServiceMap
  caption="Last updated: 10:03 AM"
  nodes={[
    {
      id: "gateway",
      title: "API Gateway",
      metrics: [{ label: "/v1/orders", value: 48, unit: "k Reqs" }],
      x: 50,
      y: 20,
    },
    {
      id: "orders",
      parent: "gateway",
      title: "Orders",
      status: "healthy",
      metrics: [
        { label: "Traffic", value: 64, unit: "%" },
        { label: "Avg", value: 120, unit: "ms" },
      ],
      x: 30,
      y: 60,
    },
  ]}
/>

Each node is a card placed by its center, in percent of the map's width and height. A node with a parent is joined to it by a line, so one list describes the whole tree. Use it for endpoint traffic, payment rails, queues and their workers, or any system where one service hands work to others.

Examples

Static

With animated={false}, the lines are drawn without the moving beams.

Behavior

• A child below its parent hangs off a horizontal line shared with its siblings, and a child straight below its parent gets a straight line. A child beside its parent is joined side to side.
• The lines are measured from the cards after the map renders, and redrawn when the map or any card changes size.
• Beams run from parent to child, one line after another, only while the map is on screen. With reduced motion enabled, the lines stay still.
• The map lays out at minWidth or wider (520px by default). In a narrower container it scrolls sideways, and takes keyboard focus so it can be scrolled from the keyboard.
• Badge text mixes the status color with the text color, so it stays readable in light and dark mode.
• Each child card tells screen readers which node sends it traffic. Icons are hidden from them.

Props

ServiceMap

ServiceMapNode