sanity-plugin-graph-view 1.0.7 → 3.0.0-v3-studio.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 +76 -40
- package/lib/index.d.ts +6 -0
- package/lib/index.d.ts.map +1 -0
- package/lib/index.js +583 -0
- package/lib/index.js.map +1 -0
- package/lib/index.modern.js +576 -0
- package/lib/index.modern.js.map +1 -0
- package/package.json +64 -30
- package/src/index.tsx +30 -0
- package/src/tool/GraphView.tsx +487 -0
- package/{lib/tool/GraphToolIcon.js → src/tool/GraphViewIcon.tsx} +9 -28
- package/src/tool/GraphViewStyle.tsx +63 -0
- package/src/tool/hooks.ts +34 -0
- package/src/tool/utils.ts +51 -0
- package/.editorconfig +0 -16
- package/.eslintignore +0 -1
- package/.eslintrc.js +0 -18
- package/.prettierrc +0 -6
- package/assets/head-silhouette.jpg +0 -0
- package/assets/sanity-logo.png +0 -0
- package/assets/screengrab.gif +0 -0
- package/babel.config.js +0 -13
- package/config.dist.json +0 -1
- package/lib/tool/GraphTool.css +0 -56
- package/lib/tool/GraphTool.js +0 -980
- package/lib/tool/GraphView.css +0 -56
- package/lib/tool/GraphView.js +0 -724
- package/lib/tool/GraphViewIcon.js +0 -32
- package/lib/tool/hooks.js +0 -33
- package/lib/tool/index.js +0 -21
- package/lib/tool/utils.js +0 -76
- package/sanity.json +0 -12
package/README.md
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
> **NOTE**
|
|
2
|
+
>
|
|
3
|
+
> This is the **Sanity Studio v3 version** of sanity-plugin-graph-view.
|
|
4
|
+
>
|
|
5
|
+
> For the v2 version, please refer to the [v2-branch](https://github.com/sanity-io/sanity-plugin-graph-view).
|
|
6
|
+
|
|
1
7
|
<div align="center">
|
|
2
8
|
<img src="assets/sanity-logo.png" width="177" alt="Sanity" />
|
|
3
9
|
<h1>Graph View Plugin</h1>
|
|
@@ -9,75 +15,105 @@ Wonder how a visualization of your dataset will look? How many authors do you ha
|
|
|
9
15
|
|
|
10
16
|
**Explore your data with this plugin, seek out strange corners and data types, boldly go where you could not before!**
|
|
11
17
|
|
|
12
|
-
## Installation
|
|
18
|
+
## Installation
|
|
13
19
|
|
|
14
|
-
**Important!** Due to an [outstanding issue with Three.js](https://github.com/sanity-io/sanity-plugin-graph-view/issues/4), you currently **have to use Yarn to install packages** and add this to your project's `package.json`:
|
|
15
20
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
+
`npm install --save sanity-plugin-graph-view@studio-v3`
|
|
22
|
+
|
|
23
|
+
or
|
|
24
|
+
|
|
25
|
+
`yarn add sanity-plugin-graph-view@studio-v3`
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
## Usage
|
|
29
|
+
|
|
30
|
+
Add it as a plugin in sanity.config.ts (or .js):
|
|
21
31
|
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
sanity install graph-view
|
|
32
|
+
```js
|
|
33
|
+
import { contentGraphView } from "sanity-plugin-graph-view";
|
|
25
34
|
|
|
26
|
-
|
|
27
|
-
|
|
35
|
+
export default createConfig({
|
|
36
|
+
// ...
|
|
37
|
+
plugins: [
|
|
38
|
+
contentGraphView({}),
|
|
39
|
+
]
|
|
40
|
+
})
|
|
28
41
|
```
|
|
29
42
|
|
|
43
|
+
This will add a /graph-your-content tools to the Sanity Studio, configured with this default query:
|
|
44
|
+
```
|
|
45
|
+
*[
|
|
46
|
+
!(_id in path("_.*")) &&
|
|
47
|
+
!(_type match "system.*") &&
|
|
48
|
+
!(_type match "sanity.*")
|
|
49
|
+
]
|
|
50
|
+
````
|
|
51
|
+
|
|
30
52
|
## Configuration
|
|
31
53
|
|
|
32
|
-
|
|
54
|
+
You can control which documents appear in the graph by providing a query:
|
|
55
|
+
|
|
56
|
+
```js
|
|
57
|
+
import { contentGraphView } from "sanity-plugin-graph-view";
|
|
33
58
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
59
|
+
export default createConfig({
|
|
60
|
+
// ...
|
|
61
|
+
plugins: [
|
|
62
|
+
contentGraphView({
|
|
63
|
+
"query": "*[_type in ['a', 'b']]"
|
|
64
|
+
}),
|
|
65
|
+
]
|
|
66
|
+
})
|
|
38
67
|
```
|
|
39
68
|
|
|
40
|
-
For references to turn into graph edges, the entire document must be fetched,
|
|
69
|
+
For references to turn into graph edges, the entire document must be fetched,
|
|
70
|
+
but you can also selectively filter what references will be included. For example:
|
|
41
71
|
|
|
42
|
-
```
|
|
43
|
-
{
|
|
72
|
+
```js
|
|
73
|
+
contentGraphView({
|
|
44
74
|
"query": "*[_type in ['a', 'b']]{ 'refs': [author, publisher] }"
|
|
45
|
-
}
|
|
75
|
+
})
|
|
46
76
|
```
|
|
47
77
|
|
|
48
78
|
By default, the plugin uses `doc.title || doc.name || doc._id` as the node label.
|
|
49
79
|
|
|
50
80
|
If you want to use another property, compute a `title` property in your query, e.g.:
|
|
51
81
|
|
|
52
|
-
|
|
53
|
-
|
|
82
|
+
|
|
83
|
+
```js
|
|
84
|
+
contentGraphView({
|
|
54
85
|
"query": "*[_type in ['a', 'b']] { ..., \"title\": select(_type == 'a' => 'Title A', _type == 'b' => 'Title B') }"
|
|
55
|
-
}
|
|
86
|
+
})
|
|
56
87
|
```
|
|
57
88
|
|
|
58
|
-
##
|
|
89
|
+
## Get help in the Sanity Community
|
|
59
90
|
|
|
60
|
-
|
|
91
|
+
[](https://slack.sanity.io/)
|
|
61
92
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
93
|
+
Join [Sanity’s developer community](https://slack.sanity.io) or ping us [on twitter](https://twitter.com/sanity_io).
|
|
94
|
+
|
|
95
|
+
## License
|
|
96
|
+
|
|
97
|
+
MIT © [Sanity.io](https://www.sanity.io/)
|
|
98
|
+
|
|
99
|
+
## Develop & test
|
|
67
100
|
|
|
68
|
-
|
|
69
|
-
yarn link sanity-plugin-graph-view
|
|
101
|
+
Make sure to run `npm run build` once, then run
|
|
70
102
|
|
|
71
|
-
|
|
72
|
-
|
|
103
|
+
```bash
|
|
104
|
+
npm run link-watch
|
|
73
105
|
```
|
|
74
106
|
|
|
75
|
-
|
|
107
|
+
In another shell, `cd` to your test studio and run:
|
|
76
108
|
|
|
77
|
-
|
|
109
|
+
```bash
|
|
110
|
+
npx yalc add @sanity/sanity-plugin-graph-view && yarn install
|
|
111
|
+
```
|
|
78
112
|
|
|
79
|
-
|
|
113
|
+
Now, changes in this repo will be automatically built and pushed to the studio,
|
|
114
|
+
triggering hotreload. Yalc avoids issues with react-hooks that are typical when using yarn/npm link.
|
|
80
115
|
|
|
81
|
-
|
|
116
|
+
### About build & watch
|
|
82
117
|
|
|
83
|
-
|
|
118
|
+
This plugin uses [@sanity/plugin-sdk](https://github.com/sanity-io/plugin-sdk)
|
|
119
|
+
with default configuration for build & watch scripts.
|
package/lib/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":"AKMA;IACE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,OAAO,MAAM,0DAmBX,CAAA","sources":["src/src/tool/hooks.ts","src/src/tool/utils.ts","src/src/tool/GraphViewStyle.tsx","src/src/tool/GraphView.tsx","src/src/tool/GraphViewIcon.tsx","src/src/index.tsx","src/index.tsx"],"sourcesContent":[null,null,null,null,null,null,"import {GraphView} from './tool/GraphView'\nimport {GraphViewIcon} from './tool/GraphViewIcon'\nimport {createPlugin} from 'sanity'\nimport {route} from 'sanity/_unstable'\nimport React from 'react'\n\ninterface GraphViewConfig {\n query?: string\n}\n\nexport const contentGraphView = createPlugin<GraphViewConfig>((config: GraphViewConfig = {}) => {\n return {\n name: '@sanity/content-graph-view',\n\n tools: (prev) => {\n return [\n ...prev,\n {\n name: 'graph-your-content',\n title: 'Graph',\n icon: GraphViewIcon,\n component: function component() {\n return <GraphView {...config} />\n },\n router: route.create('/:selectedDocumentId'),\n },\n ]\n },\n }\n})\n"],"names":[],"version":3,"file":"index.d.ts.map","sourceRoot":"../"}
|