@nesso-how/graph 0.1.0-alpha.37 → 0.1.0-alpha.39
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 +12 -24
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -12,29 +12,29 @@ npm install @nesso-how/graph @xyflow/react react react-dom
|
|
|
12
12
|
|
|
13
13
|
## Usage
|
|
14
14
|
|
|
15
|
+
Pass a `NessoGraphDocument` via `graph`, the same JSON you export from the app or build with the MCP server:
|
|
16
|
+
|
|
15
17
|
```tsx
|
|
16
18
|
import { NessoGraph } from '@nesso-how/graph'
|
|
17
19
|
import '@xyflow/react/dist/style.css'
|
|
20
|
+
;<NessoGraph graph={doc} style={{ width: '100%', height: 400 }} />
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
For fully controlled maps where you manage node positions in your own state, pass `nodes`/`edges` with `onNodesChange`/`onEdgesChange` instead:
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
18
26
|
;<NessoGraph
|
|
19
27
|
nodes={nodes}
|
|
20
28
|
edges={edges}
|
|
21
|
-
|
|
29
|
+
onNodesChange={onNodesChange}
|
|
30
|
+
onEdgesChange={onEdgesChange}
|
|
22
31
|
style={{ width: '100%', height: 400 }}
|
|
23
32
|
/>
|
|
24
33
|
```
|
|
25
34
|
|
|
26
|
-
Pass a full `NessoGraphDocument` (from `@nesso-how/vocab-learning`) via `graph` instead of separate `nodes`/`edges`:
|
|
27
|
-
|
|
28
|
-
```tsx
|
|
29
|
-
import { deserialize } from '@nesso-how/vocab-learning'
|
|
30
|
-
|
|
31
|
-
const doc = deserialize(json)
|
|
32
|
-
;<NessoGraph graph={doc} style={{ width: '100%', height: 400 }} />
|
|
33
|
-
```
|
|
34
|
-
|
|
35
35
|
Or build React Flow props yourself with `documentToRenderGraph(doc)` when you need the raw `nodes`/`edges` arrays.
|
|
36
36
|
|
|
37
|
-
`
|
|
37
|
+
`NessoGraph` renders read-only by default — no drag, connect, or selection. Default `nodeTypes`/`edgeTypes` use `ConceptNode` and `NessoEdge` from this package (display settings via `GraphDisplayContext`).
|
|
38
38
|
|
|
39
39
|
Pass `display`/`palette` to control categories, glyphs, and curves. Use `categoryColorMode: 'css'` when `--cat-*` CSS variables are set on the page (the main app); embeds default to `palette` (hex from `PALETTES` in `@nesso-how/vocab-learning`). Optional `getRelationLabel` and `isItemSelected` customize labels and selection. Pass any other [`ReactFlow`](https://reactflow.dev/api-reference/react-flow) prop through `reactFlowProps`.
|
|
40
40
|
|
|
@@ -42,22 +42,10 @@ Full guide: [Embedding graphs](https://nesso.how/docs/guides/embedding-graphs/).
|
|
|
42
42
|
|
|
43
43
|
### Interactivity
|
|
44
44
|
|
|
45
|
-
Turn on `nodesDraggable`/`nodesConnectable`/`elementsSelectable` as needed.
|
|
46
|
-
|
|
47
|
-
- `nodes`/`edges` — _controlled_: you own the state and must also pass `onNodesChange`/`onEdgesChange`/`onConnect` to apply updates (e.g. the main app, where positions live in its own store).
|
|
48
|
-
- `defaultNodes`/`defaultEdges` — _uncontrolled_: React Flow seeds its internal state once and manages drag/connect/selection itself — no wiring needed, the right choice for decorative or one-off embeds.
|
|
45
|
+
Turn on `nodesDraggable`/`nodesConnectable`/`elementsSelectable` as needed.
|
|
49
46
|
|
|
50
47
|
When `zoomOnScroll` is off (typical for decorative embeds in a scrollable page), `NessoGraph` sets `preventScrolling` to false so the page keeps scrolling over the canvas. Override via `reactFlowProps.preventScrolling` if needed.
|
|
51
48
|
|
|
52
|
-
```tsx
|
|
53
|
-
<NessoGraph
|
|
54
|
-
defaultNodes={nodes}
|
|
55
|
-
defaultEdges={edges}
|
|
56
|
-
nodesDraggable
|
|
57
|
-
style={{ width: '100%', height: 400 }}
|
|
58
|
-
/>
|
|
59
|
-
```
|
|
60
|
-
|
|
61
49
|
## License
|
|
62
50
|
|
|
63
51
|
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nesso-how/graph",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.39",
|
|
4
4
|
"description": "Embeddable Nesso knowledge graph React component (read-only by default)",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
}
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@nesso-how/vocab-learning": "0.1.0-alpha.
|
|
25
|
+
"@nesso-how/vocab-learning": "0.1.0-alpha.39"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@xyflow/react": "^12.6.4",
|