sanity-plugin-graph-view 1.0.3 → 3.0.0-studio-v3.0

package/README.md

@@ -1,3 +1,9 @@
+> **NOTE**
+>
+> This is the **Sanity Studio v3 version** of sanity-plugin-graph-view.
+>
+> For the v2 version, please refer to the [v2-branch](https://github.com/sanity-io/sanity-plugin-graph-view).
+
 <div align="center">
   <img src="assets/sanity-logo.png" width="177" alt="Sanity" />
   <h1>Graph View Plugin</h1>
@@ -9,47 +15,75 @@ Wonder how a visualization of your dataset will look? How many authors do you ha
 
 **Explore your data with this plugin, seek out strange corners and data types, boldly go where you could not before!**
 
-```sh
-# In your Sanity Studio repository:
-sanity install graph-view
+## Installation 
+
+
+`npm install --save sanity-plugin-graph-view@studio-v3`
+
+or
+
+`yarn add sanity-plugin-graph-view@studio-v3`
+
 
-# Start the Studio
-sanity start
+## Usage
+
+Add it as a plugin in sanity.config.ts (or .js):
+
+```js
+import { contentGraphView } from "sanity-plugin-graph-view";
+
+export default createConfig({
+  // ...
+  plugins: [
+    contentGraphView({}),
+  ] 
+})
 ```
 
+This will add a /graph-your-content tools to the Sanity Studio, configured with this default query:
+```
+  *[
+    !(_id in path("_.*")) &&
+    !(_type match "system.*") &&
+    !(_type match "sanity.*")
+  ]
+````
+
 ## Configuration
 
-Edit `./config/graph-view.json`:
+You can control which documents appear in the graph by providing a query:
+
+```js
+import { contentGraphView } from "sanity-plugin-graph-view";
 
-```json
-{
-  "query": "*[_type == 'a' || _type == 'b']"
-}
+export default createConfig({
+  // ...
+  plugins: [
+    contentGraphView({
+      "query": "*[_type in ['a', 'b']]"
+    }),
+  ] 
+})
 ```
 
-For references to turn into graph edges, the entire document must be fetched, but you can also selectively filter what references will be included. For example:
+For references to turn into graph edges, the entire document must be fetched, 
+but you can also selectively filter what references will be included. For example:
 
-```json
-{
-  "query": "*[_type == 'a' || _type == 'b']{ 'refs': [author._ref, publisher._ref] }"
-}
+```js
+contentGraphView({
+  "query": "*[_type in ['a', 'b']]{ 'refs': [author, publisher] }"
+})
 ```
 
-## Contributing
+By default, the plugin uses `doc.title || doc.name || doc._id` as the node label.
 
-If you want to take part in developing this plugin, then look for planned features in the [list of issues](https://github.com/sanity-io/sanity-plugin-graph-view/issues) and reach out to us in the [Sanity Community](https://slack.sanity.io/).
+If you want to use another property, compute a `title` property in your query, e.g.:
 
-```sh
-git clone git@github.com:sanity-io/sanity-plugin-graph-view.git
-cd sanity-plugin-graph-view
-yarn
-yarn link
 
-# In a development Studio directory:
-yarn link sanity-plugin-graph-view
-
-# Lint your code before committing
-yarn lint
+```js
+contentGraphView({
+  "query": "*[_type in ['a', 'b']] { ..., \"title\": select(_type == 'a' => 'Title A', _type == 'b' => 'Title B') }"
+})
 ```
 
 ## Get help in the Sanity Community
@@ -61,3 +95,25 @@ Join [Sanity’s developer community](https://slack.sanity.io) or ping us [on tw
 ## License
 
 MIT © [Sanity.io](https://www.sanity.io/)
+
+## Develop & test
+
+Make sure to run `npm run build` once, then run
+
+```bash
+npm run link-watch
+```
+
+In another shell, `cd` to your test studio and run:
+
+```bash
+npx yalc add @sanity/sanity-plugin-graph-view && yarn install
+```
+
+Now, changes in this repo will be automatically built and pushed to the studio,
+triggering hotreload. Yalc avoids issues with react-hooks that are typical when using yarn/npm link.
+
+### About build & watch
+
+This plugin uses [@sanity/plugin-sdk](https://github.com/sanity-io/plugin-sdk)
+with default configuration for build & watch scripts.

package/lib/index.d.ts

@@ -0,0 +1,6 @@
+interface GraphViewConfig {
+    query?: string;
+}
+export const contentGraphView: import("sanity").Plugin<GraphViewConfig>;
+
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +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"}