FlowMap.module.css

/*
 * FlowMap — React Flow (@xyflow/react v12) themed to the OtelContext dark token
 * system. FlowMap.tsx imports React Flow's base stylesheet
 * (@xyflow/react/dist/style.css); the rules here (a) theme React Flow's own DOM
 * (background grid, panes, minimap, handles) to our --bg-inset instrument
 * surface and (b) style the custom node/edge classes the component renders.
 *
 * Token-only colours (tokens.css). Token-driven motion is keyed off --dur-*,
 * which the global prefers-reduced-motion block zeros. The ONE exception is
 * React Flow's native edge animation (animated edges), which runs on the
 * library's own keyframes — it gets an explicit prefers-reduced-motion guard at
 * the bottom of this file.
 */

/* ---- the wrapper that holds the whole map ---- */
.container {
  flex: 1;
  position: relative;
  min-height: 0;
  min-width: 0;
  border: 1px solid var(--stroke-1);
  border-radius: var(--radius-2);
  background: var(--bg-inset);
  /* React Flow's <Background> draws the grid — no CSS background-image here. */
  overflow: hidden;
}

/* ---- custom node: the token-themed status chip ---- */
/* Outline-led: the FULL status hue (passed inline as --node-color) carries the
 * border; the fill is the opaque inset surface so edges + the grid pass BEHIND
 * the chip and never bleed through the label. Reads as a status-coloured
 * outline against the field. */
.chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1.5px solid var(--node-color);
  border-radius: var(--radius-2);
  background: var(--bg-inset);
  font-size: var(--text-xs);
  color: var(--text-1);
  cursor: pointer;
  box-sizing: border-box;
  /* GPU transforms + border/shadow only — no SVG filter/blur. */
  transition:
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease);
}

/* Inspected node: accent ring + a small lift. The lift travels on --dur-2, so
 * reduced motion (dur 0) preserves the static accent end-state. */
.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  transform: scale(1.015);
  transform-origin: center;
}

/* Field-wide focus-distortion: non-neighbour fade. */
.dimmed {
  opacity: 0.5;
}

/* Blast-radius root (?impact=): same accent emphasis as the inspected node. */
.impactRoot {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* ---- level-of-detail: a status dot replaces the chip when zoomed out (dense
 * 120-service view), so the 168px boxes stop occluding the routed edges. The
 * dot is centred in the node box (dagre's edge waypoints still meet the box
 * border) and carries the status hue. ---- */
.dotNode {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.dotNode::before {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--node-color);
  box-shadow: 0 0 0 2px var(--bg-inset);
  transition: box-shadow var(--dur-2) var(--ease);
}
/* Inspected / blast-root dot: accent ring, matching the chip's selected ring. */
.dotSelected::before {
  box-shadow:
    0 0 0 2px var(--bg-inset),
    0 0 0 4px var(--accent);
}

/* Connection anchor, kept INVISIBLE. React Flow needs a source/target handle
 * per node, but the floating edge computes the real border attachment point, so
 * the handle dot itself must not show — otherwise edgeless nodes sprout a stray
 * connector. opacity:0 keeps the element measured so edge routing still resolves
 * its position; it never eats clicks. */
.handle {
  width: 6px;
  height: 6px;
  min-width: 0;
  min-height: 0;
  border: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
}

/* Status dot — the same hue as the chip outline. */
.dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--node-color);
}

/* Service name — mono, truncates with an ellipsis when the chip is too narrow. */
.name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  color: var(--text-1);
}

/* Error-rate suffix — mono, tabular so digits line up across chips. */
.err {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

/* ============================================================================
 * React Flow base overrides (file-scope :global — these target React Flow's
 * OWN DOM, which is a sibling of our chips, not nested under any module class).
 * ==========================================================================*/

/* Let our --bg-inset container surface show through React Flow's root. */
:global(.react-flow) {
  background: transparent;
}

/* Our .chip fully owns the node look — neutralise React Flow's node wrapper
 * defaults (padding/border/background/radius) so they can't fight it. */
:global(.react-flow__node) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-1);
  font-family: var(--font-sans);
}

/* Drop React Flow's default node focus box; keep a visible a11y ring on the
 * chip via :focus-visible (nodes are focusable={true} in FlowMap.tsx). */
:global(.react-flow__node):focus,
:global(.react-flow__node):focus-visible {
  outline: none;
  box-shadow: none;
}
:global(.react-flow__node):focus-visible .chip {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- grid: <Background variant="lines"> renders an SVG <pattern> of <path>s
 * inside .react-flow__background. Colour those lines a subtle --stroke-1 (and
 * set the lib's pattern-colour var as a belt-and-braces fallback). ---- */
.grid {
  --xy-background-pattern-color: var(--stroke-1);
}
.grid :global(.react-flow__background-pattern path),
.grid :global(.react-flow__background-pattern) path {
  stroke: var(--stroke-1);
  stroke-width: 1;
}

/* ============================================================================
 * React Flow Controls + MiniMap — themed to the dark token instrument surface
 * so the map reads as a first-class graph tool, not the library's default
 * white chrome. (file-scope :global — these target React Flow's own DOM.)
 * ==========================================================================*/

/* Zoom / fit control cluster: a hairline token-themed stack, not a white box. */
.controls {
  border: 1px solid var(--stroke-1);
  border-radius: var(--radius-2);
  overflow: hidden;
  background: var(--bg-raised);
  box-shadow: none;
}
.controls :global(.react-flow__controls-button) {
  width: 28px;
  height: 28px;
  border: none;
  border-bottom: 1px solid var(--stroke-1);
  background: var(--bg-raised);
  color: var(--text-2);
  fill: var(--text-2);
  transition:
    background var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}
.controls :global(.react-flow__controls-button):last-child {
  border-bottom: none;
}
.controls :global(.react-flow__controls-button):hover {
  background: var(--bg-overlay);
  color: var(--text-1);
  fill: var(--text-1);
}
.controls :global(.react-flow__controls-button svg) {
  fill: currentColor;
}

/* Minimap: dark inset panel, hairline border; the out-of-view area dimmed by a
 * token overlay; dots carry the same status hue as the chips. */
.minimap {
  border: 1px solid var(--stroke-1);
  border-radius: var(--radius-2);
  background: var(--bg-inset);
  overflow: hidden;
}
.minimap :global(.react-flow__minimap-mask) {
  fill: var(--bg-inset);
  opacity: 0.6;
}
/* Status fills override React Flow's base .react-flow__minimap-node fill. */
.miniCrit {
  fill: var(--crit) !important;
}
.miniWarn {
  fill: var(--warn) !important;
}
.miniOk {
  fill: var(--ok) !important;
}
.miniUnknown {
  fill: var(--unknown) !important;
}

/* React Flow's native animated edges run on the library's own keyframes (not a
 * --dur token), so the global reduced-motion rule can't reach them. Stop the
 * marching dashes for users who ask for reduced motion — leaving a static
 * dashed edge and dropping the continuous edge-layer repaint for them. */
@media (prefers-reduced-motion: reduce) {
  :global(.react-flow__edge.animated path) {
    animation: none;
  }
}