Updates versions & a minor styling change, new screenshots for the re…

…adme too

README.md

@@ -22,13 +22,9 @@ Ensure that this addon & whichever one is providing the RecoilRoot are in the co
 - Install via npm / yarn
 - The decorator provides a `RecoilRoot` with `overrides` set to false so the method in 1 will work without another decorator (but you'll not be able to set up a custom initialiser)
 
-![Screenshot](/images/screenshot.png)
+![Screenshot 1](/images/screenshot_1.png)
 
-## Known Issues
-
-- ~~It's a bit ugly~~ No longer ugly
-- ~~The graph doesn't lay itself out very well~~ Now it does
-- ~~We're not using most of the features of React Flow so we could replace it with something smaller~~ Switched to https://github.com/reaviz/reagraph
+![Screenshot 2](/images/screenshot_2.png)
 
 ## Parameters
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-recoil-flow",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Shows a graph of the current recoil state",
   "main": "dist/preset.js",
   "scripts": {
@@ -37,25 +37,25 @@
   "author": "Neil Morrison",
   "license": "MIT",
   "dependencies": {
-    "@emotion/react": "^11.9.0",
-    "just-compare": "^2.1.0",
+    "@emotion/react": "^11.10.4",
+    "just-compare": "^2.2.2",
     "mix-css-color": "^0.2.0",
-    "reagraph": "^2.1.4"
+    "reagraph": "^4.4.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.8",
-    "@mdx-js/react": "^2.1.1",
-    "@storybook/addon-actions": "^6.5.6",
-    "@storybook/addon-essentials": "^6.5.6",
-    "@storybook/addon-interactions": "^6.5.6",
-    "@storybook/addon-links": "^6.5.6",
-    "@storybook/react": "^6.5.6",
-    "@storybook/testing-library": "^0.0.11",
-    "babel-loader": "^8.2.4",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "recoil": "^0.7.2",
-    "typescript": "^4.7.2"
+    "@babel/core": "^7.19.1",
+    "@mdx-js/react": "^2.1.3",
+    "@storybook/addon-actions": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/addon-interactions": "^6.5.12",
+    "@storybook/addon-links": "^6.5.12",
+    "@storybook/react": "^6.5.12",
+    "@storybook/testing-library": "^0.0.13",
+    "babel-loader": "^8.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "recoil": "^0.7.5",
+    "typescript": "^4.8.3"
   },
   "peerDependencies": {
     "@storybook/addons": "^6.4.0",

src/flow/graph.tsx

@@ -1,12 +1,6 @@
 import { useCallback, useRef, useState } from "react"
 import { useChannel } from "@storybook/api"
-import {
-  GraphCanvas,
-  GraphCanvasRef,
-  GraphNode,
-  lightTheme,
-  useSelection,
-} from "reagraph"
+import { GraphCanvas, GraphCanvasRef, lightTheme } from "reagraph"
 import { RecoilEdge, RecoilNode } from "../types"
 import { FlowInfo } from "./info"
 import { usePanelPosition } from "../hooks/usePanelPosition"
@@ -87,7 +81,7 @@ export const FlowGraph = () => {
               activeFill: RECOIL_BLUE,
               label: {
                 ...lightTheme.node.label,
-                color: RECOIL_BLUE,
+                color: "#333",
                 activeColor: RECOIL_BLUE,
               },
             },