@bruno00o/graph 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,9 +1,120 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
<a href="https://npmjs.com/package/@bruno00o/graph" target="_parent">
|
|
3
|
+
<img alt="npm version" src="https://img.shields.io/npm/v/@bruno00o/graph.svg" />
|
|
4
|
+
</a>
|
|
5
|
+
<a href="https://npmjs.com/package/@bruno00o/graph" target="_parent">
|
|
6
|
+
<img alt="npm downloads" src="https://img.shields.io/npm/dm/@bruno00o/graph.svg" />
|
|
7
|
+
</a>
|
|
8
|
+
<a href="https://bundlephobia.com/result?p=@bruno00o/graph" target="_parent">
|
|
9
|
+
<img alt="bundle size" src="https://badgen.net/bundlephobia/minzip/@bruno00o/graph" />
|
|
10
|
+
</a>
|
|
11
|
+
<a href="https://github.com/bruno00o/graph/actions/workflows/ci.yml" target="_parent">
|
|
12
|
+
<img alt="CI" src="https://github.com/bruno00o/graph/actions/workflows/ci.yml/badge.svg" />
|
|
13
|
+
</a>
|
|
14
|
+
<a href="./LICENSE" target="_parent">
|
|
15
|
+
<img alt="MIT license" src="https://img.shields.io/npm/l/@bruno00o/graph.svg" />
|
|
16
|
+
</a>
|
|
17
|
+
</div>
|
|
18
|
+
|
|
1
19
|
# @bruno00o/graph
|
|
2
20
|
|
|
3
21
|
Framework-agnostic, typed graph visualization rendered with WebGL2.
|
|
4
22
|
|
|
5
|
-
|
|
23
|
+
- Smooth with 50,000 nodes and 100,000 edges, picking included
|
|
24
|
+
- Declarative marks: map your fields to color, size, labels, arrows and dashes through shared scales, with types inferred from your data
|
|
25
|
+
- Live sources: pass a TanStack DB collection as is, or anything with `subscribeChanges`, and only what changed is redrawn
|
|
26
|
+
- Named states (selection, hover, focus and your own) resolved on the GPU
|
|
27
|
+
- Parallel edges, self loops, drag, pan and zoom out of the box
|
|
28
|
+
- Themed with CSS variables, light and dark
|
|
29
|
+
- A framework-agnostic core with a thin React adapter, plus TanStack DB and TanStack Query integrations
|
|
30
|
+
|
|
31
|
+
> Early development: the API may still change before 1.0.
|
|
32
|
+
|
|
33
|
+
## Install
|
|
34
|
+
|
|
35
|
+
```sh
|
|
36
|
+
pnpm add @bruno00o/graph
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
| Entry point | Contents | Peer dependency |
|
|
40
|
+
| --------------------------- | ---------------------------------------------------------------- | ---------------------- |
|
|
41
|
+
| `@bruno00o/graph` | `defineGraph`, `nodes`, `edges`, `mountGraph` | |
|
|
42
|
+
| `@bruno00o/graph/react` | `<Graph>`, `useGraph`, `useGraphState`, `useGraphEvent` | `react` 19 |
|
|
43
|
+
| `@bruno00o/graph/db` | `persistPositions` for TanStack DB collections | `@tanstack/db` |
|
|
44
|
+
| `@bruno00o/graph/query` | `createExploration` for neighborhoods loaded with TanStack Query | `@tanstack/query-core` |
|
|
45
|
+
| `@bruno00o/graph/theme.css` | Default light and dark theme | |
|
|
46
|
+
|
|
47
|
+
## Quick start
|
|
48
|
+
|
|
49
|
+
```ts
|
|
50
|
+
import { defineGraph, edges, mountGraph, nodes } from '@bruno00o/graph'
|
|
51
|
+
import '@bruno00o/graph/theme.css'
|
|
52
|
+
|
|
53
|
+
type Item = { id: string; label: string; group: string; weight: number }
|
|
54
|
+
type Link = { id: string; from: string; to: string }
|
|
55
|
+
|
|
56
|
+
const definition = defineGraph({
|
|
57
|
+
marks: [
|
|
58
|
+
edges<Link>(links, { source: 'from', target: 'to', arrow: 'target' }),
|
|
59
|
+
nodes<Item>(items, { color: 'group', size: 'weight', label: 'label' }),
|
|
60
|
+
],
|
|
61
|
+
states: { muted: { opacity: 0.2, label: false } },
|
|
62
|
+
})
|
|
63
|
+
|
|
64
|
+
const graph = mountGraph(container, { definition, ariaLabel: 'Sample graph' })
|
|
65
|
+
|
|
66
|
+
graph.on('click', ({ target }) => {
|
|
67
|
+
if (target?.kind === 'node') graph.view.fit([target.key], { duration: 400 })
|
|
68
|
+
})
|
|
69
|
+
graph.states.set('muted', { nodes: ['n4', 'n7'] })
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
With React:
|
|
73
|
+
|
|
74
|
+
```tsx
|
|
75
|
+
import { defineGraph, edges, nodes } from '@bruno00o/graph'
|
|
76
|
+
import { Graph, useGraphState } from '@bruno00o/graph/react'
|
|
77
|
+
import { useMemo } from 'react'
|
|
78
|
+
|
|
79
|
+
function Hovered() {
|
|
80
|
+
const hovered = useGraphState((state) => state.hovered)
|
|
81
|
+
return <output>{hovered?.kind === 'node' ? String(hovered.key) : ''}</output>
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
export function SampleGraph({ items, links }: { items: Item[]; links: Link[] }) {
|
|
85
|
+
const definition = useMemo(
|
|
86
|
+
() =>
|
|
87
|
+
defineGraph({
|
|
88
|
+
marks: [
|
|
89
|
+
edges(links, { source: 'from', target: 'to' }),
|
|
90
|
+
nodes(items, { color: 'group', label: 'label' }),
|
|
91
|
+
],
|
|
92
|
+
}),
|
|
93
|
+
[items, links],
|
|
94
|
+
)
|
|
95
|
+
return (
|
|
96
|
+
<Graph definition={definition} ariaLabel="Sample graph" style={{ height: 480 }}>
|
|
97
|
+
<Hovered />
|
|
98
|
+
</Graph>
|
|
99
|
+
)
|
|
100
|
+
}
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
A TanStack DB collection is a live source: pass it to a mark and its changes arrive without a new definition.
|
|
104
|
+
|
|
105
|
+
```ts
|
|
106
|
+
nodes(itemsCollection, { color: 'group', label: 'label' })
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
## Examples
|
|
110
|
+
|
|
111
|
+
The [`examples`](./examples) folder holds runnable examples: vanilla and React graphs, parallel edges and loops, collaboration across tabs with TanStack DB, and neighborhood exploration with TanStack Query. Run them with `pnpm install && pnpm dev`.
|
|
112
|
+
|
|
113
|
+
## Get Involved
|
|
114
|
+
|
|
115
|
+
- Issues and pull requests are welcome.
|
|
116
|
+
- `pnpm verify` runs lint, types, tests, the build and package checks.
|
|
6
117
|
|
|
7
118
|
## License
|
|
8
119
|
|
|
9
|
-
MIT
|
|
120
|
+
[MIT](./LICENSE)
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { n as freeStateNames, r as maxFreeStates, t as mountGraph } from "./mount-graph-
|
|
1
|
+
import { n as freeStateNames, r as maxFreeStates, t as mountGraph } from "./mount-graph-DYOgD_ql.js";
|
|
2
2
|
// src/define-graph.ts
|
|
3
3
|
const defaultZoomSpeed = 1;
|
|
4
4
|
const defaultPositionTransition = 120;
|