@crvouga/atlas 0.0.0-stage → 0.2.0

package/packages/visualizer/src/map/map.module.css

@@ -0,0 +1,546 @@
+.flow {
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle at 1px 1px, #d5e0e7 1px, transparent 0) 0 0 / 22px 22px;
+}
+
+.markers {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+.handle {
+  opacity: 0;
+  pointer-events: none;
+  width: 1px;
+  height: 1px;
+  min-width: 0;
+  min-height: 0;
+  border: 0;
+}
+
+/* Screens */
+
+.screen {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.4rem;
+  padding: 6px;
+  background: var(--card);
+  border: 2px solid var(--line);
+  border-radius: 1rem;
+  color: var(--ink);
+  text-decoration: none;
+  box-shadow: var(--shadow-card);
+  transition:
+    box-shadow 160ms var(--ease),
+    border-color 160ms var(--ease),
+    opacity var(--fade) var(--ease);
+}
+
+.screen:hover {
+  box-shadow: var(--shadow-raised);
+}
+
+.screen[data-status='passed'] {
+  border-color: var(--passed-line);
+}
+.screen[data-status='failed'] {
+  border-color: var(--failed);
+}
+.screen[data-status='flaky'] {
+  border-color: var(--flaky);
+}
+.screen[data-status='not-reached'],
+.screen[data-status='not-yet-run'],
+.screen[data-status='spec-only'] {
+  border-style: dashed;
+  border-color: var(--line-2);
+}
+
+.screen[data-final='true'] {
+  box-shadow:
+    0 0 0 3px var(--card),
+    0 0 0 4.5px var(--line-2),
+    var(--shadow-card);
+}
+
+.screen[data-selected='true'] {
+  box-shadow: 0 0 0 2px var(--place);
+}
+
+.screen[data-dimmed='true'],
+.chartLink[data-dimmed='true'],
+.context[data-dimmed='true'],
+.summary[data-dimmed='true'] {
+  opacity: 0.35;
+}
+
+.screenLabel {
+  font-size: 0.78rem;
+  font-weight: 600;
+  line-height: 1.2;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.35rem;
+  align-items: baseline;
+  padding: 0 0.15rem;
+  overflow: hidden;
+}
+
+.screenLabel > span:last-child {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.assumed {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  font-size: 0.6rem;
+  font-weight: 700;
+  padding: 0.1rem 0.4rem;
+  border-radius: var(--pill);
+  color: var(--ink-3);
+  background: rgba(241, 245, 249, 0.95);
+  border: 1px dashed var(--faint);
+}
+
+/* Groups and regions */
+
+.group {
+  width: 100%;
+  height: 100%;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-xl);
+  background: rgba(255, 255, 255, 0.55);
+}
+
+.group[data-variant='region'] {
+  border-style: dashed;
+  border-color: var(--line-2);
+  background: rgba(248, 250, 252, 0.6);
+}
+
+.group[data-variant='parallel'] {
+  border-style: dashed;
+}
+
+.groupLabel {
+  position: absolute;
+  top: 0.7rem;
+  left: 1rem;
+  right: 1rem;
+  display: flex;
+  gap: 0.45rem;
+  align-items: center;
+  font-size: 0.85rem;
+  font-weight: 400;
+  color: var(--ink-2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.group[data-variant='region'] .groupLabel {
+  color: var(--ink-2);
+}
+
+.groupTag {
+  font-size: 0.65rem;
+  font-weight: 400;
+  color: var(--ink-3);
+  background: var(--bg);
+  border-radius: var(--pill);
+  padding: 0.1rem 0.5rem;
+}
+
+/* Child chart box */
+
+.chartLink {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.45rem;
+  justify-content: center;
+  padding: 1rem 1.1rem;
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+  color: var(--ink);
+  text-decoration: none;
+  box-shadow: var(--shadow-card);
+  transition: opacity var(--fade) var(--ease);
+}
+
+.chartTitle {
+  font-size: 1rem;
+  line-height: 1.2;
+}
+
+.chartDescription {
+  font-size: 0.78rem;
+  color: var(--ink-3);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.chartCta {
+  font-size: 0.8rem;
+  color: var(--place);
+}
+
+/* Screens from other charts */
+
+.context {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.35rem;
+  padding: 0.75rem;
+  background: var(--bg);
+  border: 1.5px dashed var(--line-2);
+  border-radius: var(--radius-lg);
+  color: var(--ink);
+  text-decoration: none;
+  transition: opacity var(--fade) var(--ease);
+}
+
+.context:hover {
+  border-color: var(--place);
+}
+
+.contextChart {
+  font-size: 0.65rem;
+  font-weight: 400;
+  color: var(--muted);
+}
+
+/* A collapsed section: the name and how many places are inside. */
+
+.summary {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.35rem;
+  padding: 0.85rem 1rem;
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+  color: var(--ink);
+  text-decoration: none;
+  box-shadow: var(--shadow-card);
+}
+
+.summary:hover {
+  border-color: var(--place);
+}
+
+.summary[data-status='failed'] {
+  border-color: var(--failed);
+}
+
+.summary[data-status='flaky'] {
+  border-color: var(--flaky);
+}
+
+.summaryName {
+  display: flex;
+  gap: 0.45rem;
+  align-items: center;
+  font-size: 0.95rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.summaryCount {
+  font-size: 0.8rem;
+  color: var(--ink-2);
+}
+
+/* The flow pane owns the drag. These boxes still need their own clicks. */
+.screen,
+.summary,
+.chartLink,
+.context {
+  pointer-events: all;
+}
+
+.contextName {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.35rem;
+  align-items: baseline;
+  font-size: 0.8rem;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
+/* Edges and event chips */
+
+.edge {
+  fill: none;
+  stroke: var(--line-2);
+  stroke-width: 2;
+  transition:
+    stroke var(--fade) var(--ease),
+    opacity var(--fade) var(--ease);
+}
+
+.edge[data-kind='user'][data-status='passed'],
+.edge[data-kind='user'][data-status='flaky'] {
+  stroke: var(--user-line);
+}
+.edge[data-kind='system'][data-status='passed'],
+.edge[data-kind='system'][data-status='flaky'] {
+  stroke: var(--system-line);
+}
+.edge[data-kind='time'][data-status='passed'],
+.edge[data-kind='time'][data-status='flaky'] {
+  stroke: var(--time-line);
+}
+.edge[data-kind='hand-off'][data-status='passed'] {
+  stroke: var(--handoff-line);
+}
+.edge[data-status='failed'] {
+  stroke: var(--failed-line);
+}
+.edge[data-unchecked='true'] {
+  stroke-dasharray: 6 5;
+}
+.edge[data-selected='true'],
+.edge[data-highlight='true'] {
+  stroke: var(--place);
+  stroke-width: 2.5;
+  stroke-dasharray: none;
+}
+.edge[data-dimmed='true'] {
+  opacity: 0.25;
+}
+
+.chip {
+  position: absolute;
+  z-index: 1;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0 0.6rem 0 0.4rem;
+  border-radius: var(--pill);
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  border: 1.5px solid;
+  pointer-events: all;
+  transition:
+    transform 160ms var(--ease),
+    box-shadow 160ms var(--ease),
+    opacity var(--fade) var(--ease);
+}
+
+.chip[data-kind='user'] {
+  background: var(--user-soft);
+  color: var(--user-ink);
+  border-color: var(--user-line);
+}
+.chip[data-kind='system'] {
+  background: var(--system-soft);
+  color: var(--system-ink);
+  border-color: var(--system-line);
+}
+.chip[data-kind='time'] {
+  background: var(--time-soft);
+  color: var(--time-ink);
+  border-color: var(--time-line);
+}
+.chip[data-kind='hand-off'] {
+  background: var(--handoff-soft);
+  color: var(--handoff-ink);
+  border-color: var(--handoff-line);
+}
+.chip[data-unchecked='true'] {
+  background: var(--bg);
+  color: var(--ink-3);
+  border-color: var(--line-2);
+  border-style: dashed;
+}
+.chip[data-status='failed'] {
+  border-color: var(--failed);
+  color: var(--failed-ink);
+}
+.chip[data-status='flaky'] {
+  border-color: var(--flaky-ink);
+  color: var(--flaky-ink);
+}
+.chip[data-selected='true'] {
+  outline: 2px solid var(--place);
+  outline-offset: 1px;
+}
+.chip[data-highlight='true'] {
+  box-shadow: var(--shadow-raised);
+}
+.chip[data-dimmed='true'] {
+  opacity: 0.3;
+}
+.chip:hover {
+  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
+}
+
+.chipIcon {
+  flex: none;
+  display: inline-grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.85);
+}
+
+.chip[data-kind='user'] .chipIcon {
+  color: var(--user);
+}
+.chip[data-kind='system'] .chipIcon {
+  color: var(--system);
+}
+.chip[data-kind='time'] .chipIcon {
+  color: var(--time);
+}
+.chip[data-kind='hand-off'] .chipIcon {
+  color: var(--handoff);
+}
+
+.chipText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.stepNo {
+  flex: none;
+  background: var(--user);
+  color: #fff;
+  border-radius: var(--pill);
+  min-width: 1.3rem;
+  height: 1.3rem;
+  display: inline-grid;
+  place-items: center;
+  font-size: 0.7rem;
+}
+
+/* Controls */
+
+.zoom {
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  z-index: 5;
+}
+
+.zoomButton {
+  width: 2.25rem;
+  height: 2.25rem;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--line);
+  background: var(--card);
+  color: var(--ink);
+  border-radius: var(--pill);
+  cursor: pointer;
+  box-shadow: var(--shadow-card);
+}
+
+.zoomButton:hover {
+  border-color: var(--place);
+  color: var(--place);
+}
+
+.legendSlot {
+  position: absolute;
+  left: 1rem;
+  bottom: 1rem;
+  z-index: 5;
+  max-width: calc(100% - 15rem);
+}
+
+.minimap {
+  width: 180px;
+  height: 120px;
+}
+
+/* Loading and messages */
+
+.skeleton,
+.mapMessage {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.25rem;
+  color: var(--muted);
+  background: radial-gradient(circle at 1px 1px, #e2e8f0 1px, transparent 0) 0 0 / 22px 22px;
+}
+
+.skeletonRow {
+  display: flex;
+  gap: 2.5rem;
+}
+
+.skeletonPhone {
+  width: 120px;
+  height: 260px;
+  border-radius: 1rem;
+  border: 2px dashed var(--line-2);
+  background: linear-gradient(100deg, var(--bg-2) 30%, #e9eef5 50%, var(--bg-2) 70%) 0 0 / 300% 100%;
+  animation: shimmer 1.4s linear infinite;
+}
+
+@keyframes shimmer {
+  to {
+    background-position: -150% 0;
+  }
+}
+
+.skeletonLabel {
+  font-size: 0.9rem;
+}
+
+.retryButton {
+  border: 1px solid var(--line);
+  background: var(--card);
+  color: var(--user);
+  border-radius: var(--pill);
+  padding: 0.4rem 0.9rem;
+  cursor: pointer;
+}
+
+@media (max-width: 900px) {
+  .legendSlot {
+    max-width: calc(100% - 2rem);
+    bottom: auto;
+    top: 1rem;
+    right: 4rem;
+  }
+  .minimap {
+    display: none;
+  }
+}

package/packages/visualizer/src/map/nodes.tsx

@@ -0,0 +1,145 @@
+import { Link } from '@tanstack/react-router';
+import { Handle, Position, type Node, type NodeProps } from '@xyflow/react';
+import { memo } from 'react';
+
+import { STATUS_LABEL, type ChartView, type ItemStatus, type StateView } from '../data/model';
+import { ScreenImage } from '../components/Screen';
+import { StatusDot, SummaryBar } from '../components/Status';
+import styles from './map.module.css';
+
+function Handles() {
+  return (
+    <>
+      <Handle type="target" position={Position.Left} className={styles.handle} isConnectable={false} />
+      <Handle type="source" position={Position.Right} className={styles.handle} isConnectable={false} />
+    </>
+  );
+}
+
+export type ScreenNodeData = { state: StateView; chartId: string; selected: boolean; dimmed: boolean };
+export type ScreenNodeType = Node<ScreenNodeData, 'screen'>;
+
+export const ScreenNode = memo(function ScreenNode({ data }: NodeProps<ScreenNodeType>) {
+  const { state, chartId, selected, dimmed } = data;
+  return (
+    <Link
+      to="/chart/$chartId"
+      params={{ chartId }}
+      search={(prev) => ({ run: prev.run, screen: state.name, journey: prev.journey })}
+      className={`${styles.screen} nopan nodrag`}
+      data-status={state.status}
+      data-selected={selected}
+      data-dimmed={dimmed}
+      data-final={state.kind === 'final'}
+      aria-label={`${state.name}. Screen, ${STATUS_LABEL[state.status]}.`}
+      aria-current={selected ? 'true' : undefined}
+    >
+      <ScreenImage state={state} size="thumb" />
+      <span className={styles.screenLabel}>
+        <StatusDot status={state.status} />
+        <span>{state.name}</span>
+      </span>
+      {state.confidence === 'assumed' && <span className={styles.assumed}>Assumed</span>}
+      <Handles />
+    </Link>
+  );
+});
+
+export type GroupNodeData = { state: StateView; variant: 'group' | 'region' | 'parallel'; dimmed: boolean };
+export type GroupNodeType = Node<GroupNodeData, 'group'>;
+
+export const GroupNode = memo(function GroupNode({ data }: NodeProps<GroupNodeType>) {
+  const { state, variant, dimmed } = data;
+  return (
+    <div className={styles.group} data-variant={variant} data-dimmed={dimmed} role="group" aria-label={`${state.name}${variant === 'parallel' ? ', parts that run side by side' : ''}`}>
+      <span className={styles.groupLabel}>
+        <StatusDot status={state.status} />
+        {state.name}
+        {variant === 'parallel' && <span className={styles.groupTag}>Side by side</span>}
+      </span>
+      <Handles />
+    </div>
+  );
+});
+
+export type ChartLinkNodeData = { state: StateView; chart: ChartView | null; dimmed: boolean };
+export type ChartLinkNodeType = Node<ChartLinkNodeData, 'chartLink'>;
+
+export const ChartLinkNode = memo(function ChartLinkNode({ data }: NodeProps<ChartLinkNodeType>) {
+  const { state, chart, dimmed } = data;
+  const body = (
+    <>
+      <strong className={styles.chartTitle}>{state.name}</strong>
+      {chart?.description && <span className={styles.chartDescription}>{chart.description}</span>}
+      {chart && <SummaryBar noun="screen" nounPlural="screens" counts={chart.screens} verb="working" />}
+      {chart && <span className={styles.chartCta}>Open {chart.name} →</span>}
+      <Handles />
+    </>
+  );
+  if (!chart) {
+    return (
+      <div className={styles.chartLink} data-dimmed={dimmed}>
+        {body}
+      </div>
+    );
+  }
+  return (
+    <Link to="/chart/$chartId" params={{ chartId: chart.id }} search={(prev) => ({ run: prev.run })} className={`${styles.chartLink} nopan nodrag`} data-dimmed={dimmed} aria-label={`${state.name}: open the ${chart.name} chart`}>
+      {body}
+    </Link>
+  );
+});
+
+export type ContextNodeData = { state: StateView; chart: ChartView | null; dimmed: boolean };
+export type ContextNodeType = Node<ContextNodeData, 'context'>;
+
+export const ContextNode = memo(function ContextNode({ data }: NodeProps<ContextNodeType>) {
+  const { state, chart, dimmed } = data;
+  return (
+    <Link
+      to="/chart/$chartId"
+      params={{ chartId: state.chartId }}
+      search={(prev) => ({ run: prev.run, screen: state.name })}
+      className={`${styles.context} nopan nodrag`}
+      data-dimmed={dimmed}
+      aria-label={`${state.name}, in ${chart?.name ?? 'another chart'}. ${STATUS_LABEL[state.status]}.`}
+    >
+      <span className={styles.contextName}>
+        <StatusDot status={state.status} />
+        {state.name}
+      </span>
+      <span className={styles.contextChart}>In {chart?.name ?? 'another chart'}</span>
+      <Handles />
+    </Link>
+  );
+});
+
+export type SummaryNodeData = { state: StateView; places: number; status: ItemStatus; dimmed: boolean };
+export type SummaryNodeType = Node<SummaryNodeData, 'summary'>;
+
+export const SummaryNode = memo(function SummaryNode({ data }: NodeProps<SummaryNodeType>) {
+  const { state, places, status, dimmed } = data;
+  const noun = places === 1 ? 'place' : 'places';
+  return (
+    <Link
+      to="/chart/$chartId"
+      params={{ chartId: state.chartId }}
+      search={(prev) => ({ run: prev.run, group: state.name, screen: undefined, event: undefined, journey: undefined })}
+      className={`${styles.summary} nopan nodrag`}
+      data-status={status}
+      data-dimmed={dimmed}
+      aria-label={`${state.name}. ${places} ${noun}. ${STATUS_LABEL[status]}.`}
+    >
+      <span className={styles.summaryName}>
+        <StatusDot status={status} />
+        {state.name}
+      </span>
+      <span className={styles.summaryCount}>
+        {places} {noun}
+      </span>
+      <Handles />
+    </Link>
+  );
+});
+
+export const nodeTypes = { screen: ScreenNode, group: GroupNode, chartLink: ChartLinkNode, context: ContextNode, summary: SummaryNode };

package/packages/visualizer/src/map/path.ts

@@ -0,0 +1,24 @@
+import type { Point } from '../layout/layout';
+
+/** An orthogonal polyline with rounded corners. */
+export function roundedPath(points: Point[], radius = 10) {
+  if (points.length < 2) return '';
+  const [first, ...rest] = points;
+  let d = `M ${first!.x} ${first!.y}`;
+  for (let i = 0; i < rest.length; i++) {
+    const prev = points[i]!;
+    const curr = rest[i]!;
+    const next = rest[i + 1];
+    if (!next) {
+      d += ` L ${curr.x} ${curr.y}`;
+      break;
+    }
+    const inLen = Math.hypot(curr.x - prev.x, curr.y - prev.y);
+    const outLen = Math.hypot(next.x - curr.x, next.y - curr.y);
+    const r = Math.min(radius, inLen / 2, outLen / 2);
+    const a = { x: curr.x - ((curr.x - prev.x) / (inLen || 1)) * r, y: curr.y - ((curr.y - prev.y) / (inLen || 1)) * r };
+    const b = { x: curr.x + ((next.x - curr.x) / (outLen || 1)) * r, y: curr.y + ((next.y - curr.y) / (outLen || 1)) * r };
+    d += ` L ${a.x} ${a.y} Q ${curr.x} ${curr.y} ${b.x} ${b.y}`;
+  }
+  return d;
+}