Cognition

Components

Graph Canvas Node

A compact card representing a graph entity — a colored domain header over an entity name with attribute and edge metadata. Used in canvas and explorer views to display categorized nodes.

Generic & reusable. The component has no built-in taxonomy — the consuming app passes domainLabel and domainColor directly. The Party / Risk / Evidence colors below are example values from Context Explorer, not canonical Cognition tokens.

Preview

Click the node…

Rendered with live Cognition tokens — the body, border, and active ring remap on theme change, no dark: classes. The header color is caller-supplied.

Domains

Party6 edges

Distyl

12 attributes · 184.2K nodes

Risk18 edges

Sanctions exposure

5 attributes · 1.2M nodes

Evidence3 edges

Filing 10-K (2024)

9 attributes · 412 nodes

One component, three example domains — the header band is driven entirely by domainColor. Node counts show the K/M formatting: 184.2K, 1.2M, 412.

States

Party6 edges

Distyl

12 attributes · 184.2K nodes

<GraphCanvasNode status="static" … />
Party6 edges

Distyl

12 attributes · 184.2K nodes

<GraphCanvasNode status="active" … />
Party6 edges

Distyl

12 attributes · 184.2K nodes

<GraphCanvasNode status="disabled" … />

active adds a primary border and an accent ring (use for the selected node); disabled dims to 45% and blocks pointer events.

API

Prop
Type
Default
Description
domainLabel
string
required
Category label shown in the header band, rendered in sentence case.
domainColor
{ background: string; text: string }
required
Header band background and text colors. Supplied by the consuming app — the component has no taxonomy.
name
string
required
Entity name shown in the body.
attributes
number
required
Attribute count, rendered as an integer.
nodes
number | string
required
Node count. Numbers format with K/M shorthand (184.2K, 1.2M); strings render as-is.
edges
number
required
Edge count, shown in the header with an 'edges' suffix.
status
"static" | "active" | "disabled"
"static"
Visual state. active adds a ring; disabled dims it and blocks interaction.
onClick
() => void
undefined
Click handler. When set, the card renders as a button.

Don't and Do

Don't

Don't bake a domain taxonomy or color map into the component — pass domainColor from the consuming app so each product owns its own categories. And don't use it for non-entity content; it's a graph node, not a generic card.

Do
// The consuming app owns the taxonomy → color mapping
<GraphCanvasNode
  domainLabel="Risk"
  domainColor={domainColors.risk}
  name={entity.name}
  attributes={entity.attributeCount}
  nodes={entity.nodeCount}
  edges={entity.edgeCount}
  status={selectedId === entity.id ? "active" : "static"}
  onClick={() => select(entity.id)}
/>
import { GraphCanvasNode } from "@/components/GraphCanvasNode";

// Each product defines its own domain → color map (example values shown).
const domainColors = {
  party: { background: "var(--color-background-accent)", text: "var(--color-text-primary)" },
  risk: { background: "var(--color-background-danger)", text: "var(--color-text-danger)" },
};

export function EntityNode({ entity, selected, onSelect }) {
  return (
    <GraphCanvasNode
      domainLabel={entity.domain}
      domainColor={domainColors[entity.domain]}
      name={entity.name}
      attributes={entity.attributes}
      nodes={entity.nodes}
      edges={entity.edges}
      status={selected ? "active" : "static"}
      onClick={onSelect}
    />
  );
}
Distyl-specific — a generic graph-entity card with no built-in taxonomy. Domain colors are caller-supplied via domainColor; the example Party / Risk / Evidence values are illustrative, not canonical.