Graph view

Preview

Install

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/graph-view

Brings in: bidi, button, graph-layout, layer, locale, motion, tokens, use-announcer, utils · npm: lucide-react@^1.67.0

Usage

"use client"

import * as React from "react"
import { GraphView, GraphViewSwitch, type GraphViewNode } from "@/components/candor/graph-view"

const step = (title: string, who: string, after?: string) => (
  <span className="flex min-w-0 flex-col">
    <span className="line-clamp-2 text-sm font-medium leading-snug">{title}</span>
    <span className="text-xs text-muted-foreground">{who}</span>
    {/* The arrows are drawn only, so each node says what it comes after. */}
    {after && <span className="sr-only">. After {after}</span>}
  </span>
)

const nodes: GraphViewNode[] = [
  { id: "a", content: step("Add the region column", "Dev agent") },
  { id: "b", after: ["a"], content: step("Show it on the customer page", "Dev agent", "Add the region column") },
  { id: "c", after: ["a"], content: step("Backfill from billing country", "Dev agent", "Add the region column") },
  { id: "d", after: ["b", "c"], content: step("Test on Staging", "QA agent", "Show it on the customer page and Backfill from billing country") },
]

export default function Example() {
  const [view, setView] = React.useState<"list" | "graph">("graph")
  const [active, setActive] = React.useState<string>()
  return (
    <div className="flex max-w-xl flex-col gap-2 rounded-xl border bg-card p-3">
      <GraphViewSwitch view={view} onViewChange={setView} className="self-end" />
      {view === "graph" ? (
        <GraphView nodes={nodes} label="Plan steps as a graph" description="The same steps as the list, in the same order." onSelect={setActive} activeId={active} />
      ) : (
        <ol className="list-decimal ps-6 text-sm">
          {nodes.map((n) => (
            <li key={n.id}>{n.content}</li>
          ))}
        </ol>
      )}
    </div>
  )
}

<GraphView>

<GraphViewSwitch>

Strings

Motion

Set with --cd-motion-graph-view-<moment>-* in your brand file; the families are in the design reference.

Types

GraphViewNode

A node in the graph: what it shows, and the nodes it comes after.

{ id: string; /** What the node shows. Put what the arrows say in words here too (`sr-only`), since the arrows are only drawn. */ content: React.ReactNode; /** The nodes this one comes after: an arrow from each to it. */ after?: string[] | undefined; /** A fixed layer: the row going down, the column going across. Left out, it's laid out from `after`. */ layer?: number | undefined; /** A fixed place across its layer. Left out, it's laid out to cross as few arrows as it can. */ slot?: number | undefined; /** "muted" for a node that's out of the work (skipped, say). */ tone?: "default" | "muted" | undefined; }

GraphViewEdgeLabel

Words drawn on an arrow. Drawn only: say them in the target's or source's `content` as well.

{ from: string; to: string; label: string }

GraphViewPlace

A place a node can be moved to, in the layout's own units, as a node's `layer` and `slot`: a fraction is between two, so layer 1.5 is midway between the second layer and the third. It is drawn where a node there would have its middle.

{ id: string; /** What the place is, in words ("2 of 3 in Then of If Priority: High"): drawn by its line while it is chosen. */ label: string; /** The layer it is in, as a node's; a fraction is between two layers. */ layer: number; /** Where it is across its layer, as a node's slot; a fraction is between two. */ slot: number; }