made websocket automatically reconnect

4 files changed, 35 insertions, 21 deletions

diff --git a/org-roam-ui.el b/org-roam-ui.el
index f9eb8dc..fe8881c 100644
--- a/org-roam-ui.el
+++ b/org-roam-ui.el
@@ -86,6 +86,8 @@ E.g. '((bg . '#1E2029')
   :type 'list)
 
 (defvar org-roam-ui--ws-current-node nil)
+(defvar oru-ws nil
+  "The websocket for org-roam-ui.")
 
 ;;;###autoload
 (define-minor-mode
@@ -105,13 +107,18 @@ This serves the web-build and API over HTTP."
         (websocket-server
          35903
          :host 'local
-         :on-open (lambda (ws) (progn (setq oru-ws ws) (org-roam-ui--send-graphdata) (org-roam-ui-sync-theme--advice) (message "Connection established with org-roam-ui")
-    (add-hook 'post-command-hook #'org-roam-ui--update-current-node)
+         :on-open (lambda (ws) (progn (setq oru-ws
+         ws) (org-roam-ui--send-graphdata) (org-roam-ui-sync-theme--advice) (message "Connection
+         established with org-roam-ui")
+    (add-hook 'post-command-hook
+                                 #'org-roam-ui--update-current-node)
                                  ))
-         :on-close (lambda (_websocket) (setq oru-ws nil) (message "Connection with org-roam-ui closed succesfully."))))
+         :on-close (lambda (_websocket) (setq oru-ws
+         nil) (message "Connection with org-roam-ui closed
+         succesfully."))))
     (if (boundp 'counsel-load-theme)
-(advice-add 'counsel-load-theme :after #'org-roam-ui-sync-theme--advice)
-            (advice-add 'load-theme :after #'org-roam-ui-sync-theme-manually))
+(advice-add 'counsel-load-theme :around #'org-roam-ui-sync-theme--advice)
+            (advice-add 'load-theme :around #'org-roam-ui-sync-theme--advice))
     (add-hook 'post-command-hook #'org-roam-ui--update-current-node))
     ;(add-hook 'post-command-hook #'org-roam-ui-update))
    (t
@@ -137,12 +144,12 @@ This serves the web-build and API over HTTP."
     (websocket-send-text oru-ws (json-encode `((type . "graphdata") (data . ,response))))))
 
 (defun org-roam-ui--update-current-node ()
-  (when (websocket-openp oru-ws)
+  (when (and (boundp 'org-roam-ui-websocket) (websocket-openp org-roam-ui-websocket))
   (let* ((node (org-roam-id-at-point)))
     (unless (string-match-p (regexp-quote "Minibuf") (buffer-name (current-buffer)))
     (unless (string= org-roam-ui--ws-current-node node)
     (setq org-roam-ui--ws-current-node node)
-      (websocket-send-text oru-ws (json-encode `((type . "command") (data . ((commandName . "follow") (id . ,node))))))))))
+      (websocket-send-text org-roam-ui-websocket (json-encode `((type . "command") (data . ((commandName . "follow") (id . ,node))))))))))
 )
 
 (defun org-roam-ui-show-node ()
@@ -152,6 +159,7 @@ This serves the web-build and API over HTTP."
 
 (defun org-roam-ui-sync-theme--advice ()
   "Function which is called after load-theme to sync your current theme with org-roam-ui."
+  (message "Syncing theme")
   (websocket-send-text oru-ws (json-encode `((type . "theme") (data . ,(org-roam-ui--update-theme))))))
 
 (defun org-roam-ui-sync-theme-manually ()
diff --git a/package.json b/package.json
index 55b4c5e..7862a9b 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "react-dom": "17.0.2",
     "react-force-graph": "^1.41.7",
     "react-spring": "^9.2.4",
+    "reconnecting-websocket": "^4.4.0",
     "three-spritetext": "^1.6.2",
     "use-constant": "^1.1.0"
   },
diff --git a/pages/index.tsx b/pages/index.tsx
index a99bb0b..56e287a 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -32,6 +32,9 @@ import { Tweaks } from '../components/tweaks'
 
 import { ThemeContext, ThemeContextProps } from './themecontext'
 import SpriteText from 'three-spritetext'
+
+import ReconnectingWebSocket from 'reconnecting-websocket'
+
 // react-force-graph fails on import when server-rendered
 // https://github.com/vasturiano/react-force-graph/issues/155
 const ForceGraph2D = (
@@ -131,7 +134,7 @@ export function GraphPage() {
   }
   const { setEmacsTheme } = useContext(ThemeContext)
   useEffect(() => {
-    const socket = new WebSocket('ws://localhost:35903')
+    const socket = new ReconnectingWebSocket('ws://localhost:35903')
     socket.addEventListener('open', (event) => {
       console.log('Connection with Emacs established')
     })
@@ -271,9 +274,6 @@ export const Graph = function (props: GraphProps) {
 
   const getNeighborNodes = (id: string) => {
     const links = linksByNodeId[id]! ?? []
-    if (!links.length) {
-      return [id]
-    }
     return Object.fromEntries(
       [id as string, ...links.flatMap((link) => [link.source, link.target])].map((nodeId) => [
         nodeId,
@@ -387,23 +387,23 @@ export const Graph = function (props: GraphProps) {
       const fg = threeDim ? graph3dRef.current : graph2dRef.current
       const d3 = await d3promise
       if (physics.gravityOn) {
-        fg.d3Force(0, d3.forceX().strength(physics.gravity))
-        fg.d3Force(0, d3.forceY().strength(physics.gravity))
+        fg.d3Force('x', d3.forceX().strength(physics.gravity))
+        fg.d3Force('y', d3.forceY().strength(physics.gravity))
         if (threeDim) {
           if (physics.galaxy) {
-            fg.d3Force(0, d3.forceX().strength(physics.gravity / 5))
-            fg.d3Force(0, d3.forceZ().strength(physics.gravity / 5))
+            fg.d3Force('x', d3.forceX().strength(physics.gravity / 5))
+            fg.d3Force('z', d3.forceZ().strength(physics.gravity / 5))
           } else {
-            fg.d3Force(0, d3.forceX().strength(physics.gravity))
-            fg.d3Force(0, d3.forceZ().strength(physics.gravity))
+            fg.d3Force('x', d3.forceX().strength(physics.gravity))
+            fg.d3Force('z', d3.forceZ().strength(physics.gravity))
           }
         } else {
-          fg.d3Force(0, null)
+          fg.d3Force('z', null)
         }
       } else {
-        fg.d3Force(0, null)
-        fg.d3Force(0, null)
-        threeDim ? fg.d3Force(0, null) : null
+        fg.d3Force('x', null)
+        fg.d3Force('y', null)
+        threeDim ? fg.d3Force('z', null) : null
       }
       physics.centering
         ? fg.d3Force('center', d3.forceCenter().strength(physics.centeringStrength))
diff --git a/yarn.lock b/yarn.lock
index 1e586f6..85dfee6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4299,6 +4299,11 @@ readdirp@~3.5.0:
   dependencies:
     picomatch "^2.2.1"
 
+reconnecting-websocket@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/reconnecting-websocket/-/reconnecting-websocket-4.4.0.tgz#3b0e5b96ef119e78a03135865b8bb0af1b948783"
+  integrity sha512-D2E33ceRPga0NvTDhJmphEgJ7FUYF0v4lr1ki0csq06OdlxKfugGzN0dSkxM/NfqCxYELK4KcaTOUOjTV6Dcng==
+
 regenerator-runtime@^0.13.4:
   version "0.13.7"
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz"