# Growth Impact Map block

> Growth impact map linking initiatives to a north star metric, with correlation scored metric links

Ties work to results: initiative cards with progress and status, metric cards with a goal and per period value and change, an inspector to relink edges. React Flow, ReUI Frame, IconTile, Badge, shadcn Tabs, ToggleGroup. For KPI driver tree, OKR map.

- Type: Pro block
- Category: [Flow](https://web.dev.reui.io/blocks/application/flow.md)
- Page: https://web.dev.reui.io/blocks/application/flow/flow-4
- MCP: `get_block("flow-4")`
- Built with: Alert Dialog, Avatar, Badge, Breadcrumb, Button, Button Group, Card, Context Menu, Dropdown Menu, Field, Frame, Icon Tile, Input, Kbd, Popover, Progress, Select, Separator, Sheet, Tabs, Toggle Group, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A 4 column map from initiatives through input metrics to a north star and KPIs, with 7 day, 6 week and 12 month values

## Agent notes

- Replace `INITIAL_NODES`, `INITIAL_EDGES` and `MAP` in data.tsx; every metric `values` cell and link `correlation` is typed in, never computed
- Metric to metric links made by `onConnect`, `onReconnect` or `relink` carry no `correlation`, so their pill reads Not measured until you compute one
- The Open in item that `NodeMenuItems` gives an initiative is an anchor whose `href` is a hash; point it at the `source` tracker

## When not to use

- Headline numbers as standalone tiles, with no driver links between them: use [Deal Invoice Tiles](https://web.dev.reui.io/blocks/application/card/card-35.md) (`get_block("card-35")`)
- Tasks that run in dependency order, with run states and an approval to release: use [Pipeline Run Monitor](https://web.dev.reui.io/blocks/application/flow/flow-3.md) (`get_block("flow-3")`)

## Third-party libraries

- React Flow v12: [API reference](https://reactflow.dev/api-reference), [docs](https://reactflow.dev/learn), [llms.txt](https://reactflow.dev/llms.txt)
- Dagre v3: [API reference](https://github.com/dagrejs/dagre/wiki#configuring-the-layout), [docs](https://github.com/dagrejs/dagre/wiki)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/flow-4
```

## About Flow blocks

### When to use

- An editable node canvas for automation workflows or AI agent steps, with a side inspector per step
- A run view for a scheduled data pipeline: task states, retries and a human approval gate
- A driver map that ties initiatives to the input metrics and north star they are meant to move

### When not to use

- An overview page of KPI tiles, charts and work lists with no editable node graph: use the [Dashboard blocks](https://web.dev.reui.io/blocks/application/dashboard.md)
- A first run setup sequence that walks a new user through screens one at a time: use the [Onboarding blocks](https://web.dev.reui.io/blocks/application/onboarding.md)
- Operating live AI agent runs: tool permissions, approvals and evaluation reports: use the [Agents blocks](https://web.dev.reui.io/blocks/solutions/agents.md)

### Agent notes

- Graph edits stay in local `useNodesState` and `useEdgesState`; no block persists `nodes` or `edges`, so wire your own load and save
- Each block fills `h-svh` under its own header bar; swap it for a parent owned height when you mount it inside an app shell
- Requires `@xyflow/react`; flow-canvas.tsx imports its stylesheet and `FLOW_THEME` maps its colors onto your theme tokens

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.