feat: save/load web-ui settings to local org-roam-dir

components/Tweaks/Storage/StoragePanel.tsx

@@ -0,0 +1,38 @@
+import {
+  Button,
+  VStack
+} from '@chakra-ui/react'
+import { saveStorage } from '../../../util/webSocketFunctions'
+
+export interface StoragePanelProps {
+  webSocket: any
+}
+
+export const StoragePanel = (props: StoragePanelProps) => {
+  const { webSocket } = props
+  return (
+    <VStack>
+      <Button onClick={() => {
+        saveStorage(JSON.stringify(localStorage), webSocket)
+      }}>Save Settings</Button>
+      <Button onClick={() => {
+        fetch(`http://localhost:35901/settings`)
+          .then((res) => {
+            return res.text()
+          })
+          .then((res) =>{
+            const settings = JSON.parse(res)
+            localStorage.clear()
+            for (const key in settings) {
+              localStorage.setItem(key, settings[key])
+            }
+            location.reload()
+          })
+          .catch((e) => {
+            console.log(e)
+            return 'Could not fetch the settings for some reason, sorry!'
+          })
+      }}>Load Settings</Button>
+    </VStack> 
+  )
+}

components/Tweaks/index.tsx

@@ -33,6 +33,7 @@ import { usePersistantState } from '../../util/persistant-state'
 import { PhysicsPanel } from './Physics/PhysicsPanel'
 import { BehaviorPanel } from './Behavior/BehaviorPanel'
 import { VisualsPanel } from './Visual/VisualsPanel'
+import { StoragePanel } from './Storage/StoragePanel'
 
 export interface TweakProps {
   physics: typeof initialPhysics
@@ -54,6 +55,7 @@ export interface TweakProps {
   setColoring: any
   local: typeof initialLocal
   setLocal: any
+  webSocket: any
 }
 
 export const Tweaks = (props: TweakProps) => {
@@ -77,6 +79,7 @@ export const Tweaks = (props: TweakProps) => {
     setColoring,
     local,
     setLocal,
+    webSocket,
   } = props
 
   const [showTweaks, setShowTweaks] = usePersistantState('showTweaks', false)
@@ -229,6 +232,17 @@ export const Tweaks = (props: TweakProps) => {
               />
             </AccordionPanel>
           </AccordionItem>
+          <AccordionItem>
+            <AccordionButton>
+              <AccordionIcon marginRight={2} />
+              <Heading size="sm">Storage</Heading>
+            </AccordionButton>
+            <AccordionPanel>
+              <StoragePanel 
+                webSocket={webSocket}
+              />
+            </AccordionPanel>
+          </AccordionItem>
         </Accordion>
       </Scrollbars>
     </Box>

org-roam-ui.el

@@ -61,6 +61,13 @@
   35901
   "Port to serve the org-roam-ui interface.")
 
+(defvar org-roam-ui-web-settings-file-name
+  "./.org-roam-ui-web-settings"
+  "Filename for storing the settings from the browser.")
+
+(defvar org-roam-ui-autoload-settings t
+  "Automatically sends the settings to the ui when it is opened for the first time")
+
 (defcustom org-roam-ui-sync-theme t
   "If true, sync your current Emacs theme with `org-roam-ui'.
 Works best with doom-themes.
@@ -208,7 +215,9 @@ This serves the web-build and API over HTTP."
       (add-hook 'after-save-hook #'org-roam-ui--on-save))
     (message "Connection established with org-roam-ui")
     (when org-roam-ui-follow
-      (org-roam-ui-follow-mode 1))))
+      (org-roam-ui-follow-mode 1))
+    (when org-roam-ui-autoload-settings
+      (org-roam-ui--send-settings org-roam-ui-ws-socket))))
 
 (defun org-roam-ui--ws-on-message (_ws frame)
   "Functions to run when the org-roam-ui server receives a message.
@@ -223,6 +232,8 @@ Takes _WS and FRAME as arguments."
            (org-roam-ui--on-msg-delete-node data))
           ((string= command "create")
            (org-roam-ui--on-msg-create-node data))
+          ((string= command "saveSettings")
+           (org-roam-ui--on-msg-save-settings data))
           (t
            (message
             "Something went wrong when receiving a message from org-roam-ui")))))
@@ -270,6 +281,13 @@ TODO: Be able to delete individual nodes."
      :node (org-roam-node-create :title (alist-get 'title data))
      :props '(:finalize find-file))))
 
+(defun org-roam-ui--on-msg-save-settings (data)
+  "Save settings from web ui to org-roam directory."
+  (with-temp-file
+      (expand-file-name org-roam-ui-web-settings-file-name org-roam-directory)
+    (insert data)))
+
+
 (defun org-roam-ui--ws-on-close (_websocket)
   "What to do when _WEBSOCKET to org-roam-ui is closed."
   (remove-hook 'after-save-hook #'org-roam-ui--on-save)
@@ -309,6 +327,11 @@ TODO: Be able to delete individual nodes."
     (httpd-send-file t (org-link-decode file))
     (httpd-send-header t "text/plain" 200 :Access-Control-Allow-Origin "*")))
 
+(defservlet settings application/json ()
+  "Servlet for accessing the locally stored settings."
+  (insert-file-contents (expand-file-name org-roam-ui-web-settings-file-name org-roam-directory))
+  (httpd-send-header t "application/json" 200 :Access-Control-Allow-Origin "*"))
+
 (defun org-roam-ui--on-save ()
   "Send graphdata on saving an org-roam buffer.
 
@@ -603,6 +626,19 @@ from all other links."
                                      ("roamDir" . ,org-roam-directory)
                                      ("katexMacros" . ,org-roam-ui-latex-macros))))))))
 
+(defun org-roam-ui--send-settings (ws)
+  "Send the web-ui settings to the frontend through the websocket WS."
+  (let ((settings-file (expand-file-name org-roam-ui-web-settings-file-name org-roam-directory)))
+    (if (file-exists-p settings-file)
+        (websocket-send-text org-roam-ui-ws-socket
+                             (json-encode
+                              `((type . "settings")
+                                (data . ,(with-temp-buffer
+                                           (insert-file-contents settings-file)
+                                           (buffer-string)))))))))
+
+
+
 (defun org-roam-ui-sql-to-alist (column-names rows)
   "Convert sql result to alist for json encoding.
 ROWS is the sql result, while COLUMN-NAMES is the columns to use."

pages/index.tsx

@@ -476,6 +476,31 @@ export function GraphPage() {
             default:
               return console.error('unknown message type', message.type)
           }
+        case 'settings': {
+          try {
+            const settings = JSON.parse(message.data)
+            if (settings['3d']) setThreeDim(JSON.parse(settings['3d'])); else setThreeDim(false);
+            if (settings.tagCols) setTagColors(JSON.parse(settings.tagCols)); else setTagColors({});
+            if (settings.physics) setPhysics(JSON.parse(settings.physics)); else setPhysics(initialPhysics);
+            if (settings.filter) setFilter(JSON.parse(settings.filter)); else setFilter(initialFilter);
+            if (settings.visuals) setVisuals(JSON.parse(settings.visuals)); else setVisuals(initialVisuals);
+            if (settings.behavior) setBehavior(JSON.parse(settings.behavior)); else setBehavior(initialBehavior);
+            if (settings.mouse) setMouse(JSON.parse(settings.mouse)); else setMouse(initialMouse);
+            if (settings.coloring) setColoring(JSON.parse(settings.coloring)); else setColoring(initialColoring);
+            if (settings.local) setLocal(JSON.parse(settings.local)); else setLocal(initialLocal);
+          } catch {
+            console.error("Error reading settings data. Reverting to default values.")
+            setThreeDim(false);
+            setTagColors({});
+            setPhysics(initialPhysics);
+            setFilter(initialFilter);
+            setVisuals(initialVisuals);
+            setBehavior(initialBehavior);
+            setMouse(initialMouse);
+            setColoring(initialColoring);
+            setLocal(initialLocal);
+          }
+        }
       }
     })
   }, [])
@@ -570,6 +595,7 @@ export function GraphPage() {
         overflow="clip"
       >
         <Tweaks
+          webSocket={WebSocketRef.current}
           {...{
             physics,
             setPhysics,

util/webSocketFunctions.ts

@@ -5,6 +5,10 @@ export function sendMessageToEmacs(command: string, data: {}, webSocket: Reconne
     webSocket.send(JSON.stringify({ command: command, data: data }))
 }
 
+export function saveStorage(data: {}, webSocket: ReconnectingWebSocket) {
+    sendMessageToEmacs("saveSettings", data, webSocket)
+}
+
 export function getOrgText(node: OrgRoamNode, webSocket: ReconnectingWebSocket) {
     sendMessageToEmacs('getText', { id: node.id }, webSocket)
 }