added clicking without org-protocol

8 files changed, 91 insertions, 36 deletions

diff --git a/README.md b/README.md
index 29362b7..6ec702b 100644
--- a/README.md
+++ b/README.md
@@ -16,28 +16,32 @@ Org-Roam-UI's main feature is the ability to generate a graph visualization of y
 
 Configure the graph just the way you like it.
 
-#### 3 D
+#### Colors
 
-For a deeper understanding of your thoughts (and it looks cool)
+A ton, or just a splash.
 
 #### Open notes in Emacs
 
 (Double) clicking a node will open the corresponding note in Emacs, very cool.
 
-#### Follow your movement in Emacs
+#### 3 D
+
+Literally deepen your understanding of your thoughts (and it looks cool)
+
+#### Follow your movement in Emacs, and back!
 
 When you open a note in Emacs, org-roam-ui will move to the corresponding node on the graph.
 
-### Theme syncing
+#### Theme syncing
 
 Your gruvbox is only a `M-x org-roam-ui-sync-theme` away.
 
 ## Installation
 
-`org-roam-ui` is not yet on MELPA.
+`org-roam-ui` is not (yet!) on MELPA.
 
 Should your Emacs miss any of the dependencies, please install them manually!
-org-roam-ui requires `org-roam`.
+org-roam-ui requires `org-roam`, `websocket`, `simple-httpd`, `f` and Emacs >27 for fast JSON parsing.
 
 ### Prerequisites
 
@@ -51,6 +55,12 @@ Also make sure the emacs server is started; `M-x server-start RET`
 
 ### Manually
 
+Install `websocket.el`
+
+```emacs-lisp
+M-x package-install websocket
+```
+
 Clone the repo:
 
 ```bash
@@ -61,6 +71,7 @@ git clone [email protected]:org-roam/org-roam-ui.git
 Load in Emacs (add to config):
 
 ```lisp
+(require 'websocket)
 (add-to-list 'load-path "~/.emacs.d/private/org-roam-ui")
 (load-library "org-roam-ui")
 ```
@@ -70,17 +81,22 @@ Load in Emacs (add to config):
 Add the following to your `package.el`
 
 ```emacs-lisp
+(package! websocket)
 (package! org-roam-ui :recipe (:host github :repo org-roam/org-roam-ui :files "*.el out")
 ```
 
 Then something along the following to your `config.el`
 
 ```emacs-lisp
+(use-package! websocket
+    :after org-roam)
+
 (use-package! org-roam-ui
     :after org-roam ;; or :after org
     :hook (org-roam . org-roam-ui-mode)
     :config
 )
+
 ```
 
 We recommend only loading org-roam-ui after loading org(-roam) as starting the server and making database requests can impact startup times quite a lot.
@@ -88,22 +104,60 @@ We recommend only loading org-roam-ui after loading org(-roam) as starting the s
 ### Quelpa/use-package
 
 TODO
+You probably know how to do this
 
 ## Usage
 
 Use `M-x org-roam-ui RET` to enable the global mode.
-It will start a web server on http://127.0.0.1:35901/.
+It will start a web server on http://127.0.0.1:35901/ and connect to it via a WebSocket for real-time updates.
+
+### Commands
+
+ORUI provides a few commands for interacting with the graph without ever having to leave Emacs.
+NOTE: This is quite janky at the moment and will change in the future. Consider this more of a teaser.
+
+#### Moving around
+
+```emacs-lisp
+(orui-node-zoom)
+```
+
+Zooms to the current node in the global view _ignoring local mode_.
+
+```emacs-lisp
+(orui-node-local)
+```
+
+Opens the current node in local view.
+
+You can optionally give these command three parameters:
+
+1. the node id you want to zoom to (by default the current node)
+2. The speed at which you want to zoom (can be set in the UI) in ms.
+3. The padding of the zoom in px.
+
+These options might not work at the moment, please configure them in the UI for the time being.
 
 ### Configuration
 
 Org-Roam-UI exposes a few variables, but most of the customization is done in the web app.
 
-#### Port
+#### Following
 
-If you are already the using the higly demanded `35901` port, you can set it to a different value.
+ORUI follows you around Emacs by default. To disable this, set
 
 ```emacs-lisp
-(setq org-roam-ui-port 8080)
+(setq org-roam-ui-follow nil)
+```
+
+or disable the minor mode `org-roam-ui-follow-mode`.
+
+#### Updating
+
+We plan to make updates to the graph happen smoothly, at the moment it is only possible to reload the entire graph when an update happens (but local mode is preserved). This is enabled by default, to disable
+
+```emacs-lisp
+(setq org-roam-ui-update-on-save nil)
 ```
 
 #### Theme
@@ -114,6 +168,8 @@ Org-Roam-UI can sync your Emacs theme! This is the default behavior, to disable
 (setq org-roam-ui-sync-theme nil)
 ```
 
+Then call `M-x orui-sync-theme`.
+
 You can also provide your own theme if you do not like syncing nor like the default one. To do so, set `org-roam-ui-custom-theme` to an alist of (rather specific) variables, like so
 
 ```emacs-lisp
@@ -133,7 +189,7 @@ You can also provide your own theme if you do not like syncing nor like the defa
         (magenta . '#bd93f9')))
 ```
 
-At the moment, the main highlighting color is the `magenta` variable, so change that one if you want to change that.
+You can optionally provide `(base1 . '#XXXXXX')` arguments after the last one to also set the background shades, otherwise ORUI will guess based on the provides bg and fg.
 
 ## Disclaimers ‼
 
diff --git a/next.config.js b/next.config.js
index 72440d6..accdef8 100644
--- a/next.config.js
+++ b/next.config.js
@@ -8,4 +8,7 @@ const withTM = require('next-transpile-modules')(d3packages)
 
 module.exports = withPlugins([withTM, withPWA], {
   distDir: 'build',
+  pwa: {
+    dest: 'public',
+  },
 })
diff --git a/org-roam-ui.el b/org-roam-ui.el
index aef871b..f259670 100644
--- a/org-roam-ui.el
+++ b/org-roam-ui.el
@@ -128,6 +128,10 @@ This serves the web-build and API over HTTP."
             (message "Connection established with org-roam-ui")
             (when org-roam-ui-follow
               (org-roam-ui-follow-mode 1))))
+        :on-message (lambda (_websocket frame)
+                    (org-roam-node-visit
+                        (org-roam-populate (org-roam-node-create
+                        :id (websocket-frame-text frame)))))
          :on-close (lambda (_websocket)
             (remove-hook 'after-save-hook #'org-roam-ui--on-save)
             (org-roam-ui-follow-mode -1)
diff --git a/out/404.html b/out/404.html
index 6a25f6e..85ed61c 100644
--- a/out/404.html
+++ b/out/404.html
@@ -18,8 +18,8 @@
     <script src="/_next/static/chunks/main-1b0f1fd287f08bad6012.js" defer=""></script>
     <script src="/_next/static/chunks/pages/_app-fbd69a3b63bd43d7f1b0.js" defer=""></script>
     <script src="/_next/static/chunks/pages/_error-a0e21b9b223f827fe1f2.js" defer=""></script>
-    <script src="/_next/static/lefyj95pVqScAyQ2AE-mb/_buildManifest.js" defer=""></script>
-    <script src="/_next/static/lefyj95pVqScAyQ2AE-mb/_ssgManifest.js" defer=""></script>
+    <script src="/_next/static/Uwb-EHm-AvunyFLIbBaQf/_buildManifest.js" defer=""></script>
+    <script src="/_next/static/Uwb-EHm-AvunyFLIbBaQf/_ssgManifest.js" defer=""></script>
   </head>
   <body>
     <div id="__next">
@@ -753,7 +753,7 @@
         "props": { "pageProps": { "statusCode": 404 } },
         "page": "/_error",
         "query": {},
-        "buildId": "lefyj95pVqScAyQ2AE-mb",
+        "buildId": "Uwb-EHm-AvunyFLIbBaQf",
         "nextExport": true,
         "isFallback": false,
         "gip": true,
diff --git a/out/_next/static/lefyj95pVqScAyQ2AE-mb/_buildManifest.js b/out/_next/static/lefyj95pVqScAyQ2AE-mb/_buildManifest.js
deleted file mode 100644
index a72c418..0000000
--- a/out/_next/static/lefyj95pVqScAyQ2AE-mb/_buildManifest.js
+++ /dev/null
@@ -1,12 +0,0 @@
-;(self.__BUILD_MANIFEST = {
-  __rewrites: { beforeFiles: [], afterFiles: [], fallback: [] },
-  '/': [
-    'static/chunks/fb7d5399-0d6001c72a29ebec41eb.js',
-    'static/chunks/d25bd147-65fcc4c92edba8b370fb.js',
-    'static/chunks/906-f789bd1954ec4d176da1.js',
-    'static/chunks/pages/index-e63523b4f2b01b501b4a.js',
-  ],
-  '/_error': ['static/chunks/pages/_error-a0e21b9b223f827fe1f2.js'],
-  sortedPages: ['/', '/_app', '/_error'],
-}),
-  self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()
diff --git a/out/_next/static/lefyj95pVqScAyQ2AE-mb/_ssgManifest.js b/out/_next/static/lefyj95pVqScAyQ2AE-mb/_ssgManifest.js
deleted file mode 100644
index 82bedd6..0000000
--- a/out/_next/static/lefyj95pVqScAyQ2AE-mb/_ssgManifest.js
+++ /dev/null
@@ -1 +0,0 @@
-;(self.__SSG_MANIFEST = new Set()), self.__SSG_MANIFEST_CB && self.__SSG_MANIFEST_CB()
diff --git a/out/index.html b/out/index.html
index a0b936d..7f2aef0 100644
--- a/out/index.html
+++ b/out/index.html
@@ -20,8 +20,8 @@
     <script src="/_next/static/chunks/d25bd147-65fcc4c92edba8b370fb.js" defer=""></script>
     <script src="/_next/static/chunks/906-f789bd1954ec4d176da1.js" defer=""></script>
     <script src="/_next/static/chunks/pages/index-e63523b4f2b01b501b4a.js" defer=""></script>
-    <script src="/_next/static/lefyj95pVqScAyQ2AE-mb/_buildManifest.js" defer=""></script>
-    <script src="/_next/static/lefyj95pVqScAyQ2AE-mb/_ssgManifest.js" defer=""></script>
+    <script src="/_next/static/Uwb-EHm-AvunyFLIbBaQf/_buildManifest.js" defer=""></script>
+    <script src="/_next/static/Uwb-EHm-AvunyFLIbBaQf/_ssgManifest.js" defer=""></script>
   </head>
   <body>
     <div id="__next">
@@ -697,7 +697,7 @@
         "props": { "pageProps": {} },
         "page": "/",
         "query": {},
-        "buildId": "lefyj95pVqScAyQ2AE-mb",
+        "buildId": "Uwb-EHm-AvunyFLIbBaQf",
         "nextExport": true,
         "autoExport": true,
         "isFallback": false,
diff --git a/pages/index.tsx b/pages/index.tsx
index d72128b..ccdb07d 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -267,6 +267,7 @@ export function GraphPage() {
           ref={graphRef}
           nodeById={nodeByIdRef.current!}
           linksByNodeId={linksByNodeIdRef.current!}
+          webSocket={WebSocketRef.current}
           {...{
             physics,
             graphData,
@@ -298,6 +299,7 @@ export interface GraphProps {
   mouse: typeof initialMouse
   scope: Scope
   setScope: any
+  webSocket: any
 }
 
 export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
@@ -314,6 +316,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
     mouse,
     scope,
     setScope,
+    webSocket,
   } = props
 
   // react-force-graph does not track window size
@@ -323,6 +326,10 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
 
   const [hoverNode, setHoverNode] = useState<NodeObject | null>(null)
 
+  const theme = useTheme()
+
+  const { emacsTheme } = useContext<ThemeContextProps>(ThemeContext)
+
   const handleClick = (click: string, node: NodeObject) => {
     switch (click) {
       //mouse.highlight:
@@ -337,7 +344,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
         break
       }
       case mouse.follow: {
-        window.open('org-protocol://roam-node?node=' + node.id, '_self')
+        webSocket.send(node.id)
         break
       }
       default:
@@ -502,9 +509,6 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
     }
   }, [hoverNode])
 
-  const theme = useTheme()
-  const themeContext = useContext<ThemeContextProps>(ThemeContext)
-
   const getThemeColor = (name: string) => {
     if (!theme) {
       return
@@ -534,6 +538,7 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
     visuals.linkHighlight,
     visuals.nodeHighlight,
     visuals.linkColorScheme,
+    emacsTheme,
   ])
 
   const previouslyHighlightedNodes = useMemo(() => {
@@ -626,11 +631,11 @@ export const Graph = forwardRef(function (props: GraphProps, graphRef: any) {
 
   const labelTextColor = useMemo(
     () => getThemeColor(visuals.labelTextColor),
-    [visuals.labelTextColor],
+    [visuals.labelTextColor, emacsTheme],
   )
   const labelBackgroundColor = useMemo(
     () => getThemeColor(visuals.labelBackgroundColor),
-    [visuals.labelBackgroundColor],
+    [visuals.labelBackgroundColor, emacsTheme],
   )
 
   const graphCommonProps: ComponentPropsWithoutRef<typeof TForceGraph2D> = {