refactor debug UI state

src/main/frontend/db/rtc/debug_ui.cljs

@@ -1,10 +1,7 @@
 (ns frontend.db.rtc.debug-ui
   "Debug UI for rtc module"
-  (:require [cljs.core.async :as async :refer [go]]
-            [fipp.edn :as fipp]
+  (:require [fipp.edn :as fipp]
             [frontend.db :as db]
-            [frontend.worker.rtc.op-mem-layer :as op-mem-layer]
-            [frontend.worker.rtc.ws :as ws]
             [frontend.handler.user :as user]
             [frontend.state :as state]
             [frontend.ui :as ui]
@@ -29,34 +26,29 @@
 
 (rum/defcs ^:large-vars/cleanup-todo rtc-debug-ui <
   rum/reactive
-  (rum/local nil ::graph-uuid)
-  (rum/local nil ::local-tx)
-  (rum/local nil ::unpushed-block-update-count)
-  (rum/local nil ::ws-state)
-  (rum/local nil ::download-graph-to-repo)
-  (rum/local nil ::remote-graphs)
-  (rum/local nil ::graph-uuid-to-download)
-  (rum/local nil ::grant-access-to-user)
-  (rum/local nil ::auto-push-updates?)
+  (rum/local nil :graph-uuid)
+  (rum/local nil :local-tx)
+  (rum/local nil :unpushed-block-update-count)
+  (rum/local nil :ws-state)
+  (rum/local nil :download-graph-to-repo)
+  (rum/local nil :remote-graphs)
+  (rum/local nil :graph-uuid-to-download)
+  (rum/local nil :grant-access-to-user)
+  (rum/local nil :auto-push-updates?)
   [state]
   (let [s (rum/react debug-state)
-        rtc-state (and s (rum/react (:*rtc-state s)))]
+        rtc-state (:rtc-state s)]
     [:div
      [:div.flex
       (ui/button "local-state"
                  :class "mr-2"
                  :icon "refresh"
                  :on-click (fn [_]
-                             (go
-                               (let [repo (state/get-current-repo)
-                                     local-tx (op-mem-layer/get-local-tx repo)
-                                     unpushed-block-update-count (op-mem-layer/get-unpushed-block-update-count repo)
-                                     graph-uuid (op-mem-layer/get-graph-uuid repo)]
-                                 (reset! (::local-tx state) local-tx)
-                                 (reset! (::unpushed-block-update-count state) unpushed-block-update-count)
-                                 (reset! (::graph-uuid state) graph-uuid)
-                                 (reset! (::ws-state state) (and s (ws/get-state @(:*ws s))))
-                                 (reset! (::auto-push-updates? state) (and s @(:*auto-push-client-ops? s)))))))
+                             (let [repo (state/get-current-repo)
+                                   ^object worker @db-browser/*worker]
+                               (p/let [result (.rtc-get-debug-state worker repo)
+                                       debug-state (bean/->clj result)]
+                                 (swap! state (fn [old] (merge old debug-state)))))))
       (ui/button "graph-list"
                  :icon "refresh"
                  :on-click (fn [_]
@@ -64,18 +56,17 @@
                                    ^object worker @db-browser/*worker]
                                (p/let [result (.rtc-get-graphs worker token)
                                        graph-list (bean/->clj result)]
-                                 (reset! (::remote-graphs state) (map :graph-uuid graph-list))
-                                 (reset! debug-state s)))))]
+                                 (swap! state assoc :remote-graphs (map :graph-uuid graph-list))))))]
 
      [:pre.select-text
       (-> {:user-uuid (user/user-uuid)
-           :graph @(::graph-uuid state)
+           :graph (:graph-uuid state)
            :rtc-state rtc-state
-           :ws (and s (ws/get-state @(:*ws s)))
-           :local-tx @(::local-tx state)
-           :pending-block-update-count @(::unpushed-block-update-count state)
-           :remote-graphs @(::remote-graphs state)
-           :auto-push-updates? @(::auto-push-updates? state)
+           :ws (:ws-state state)
+           :local-tx (:local-tx state)
+           :pending-block-update-count (:unpushed-block-update-count state)
+           :remote-graphs (:remote-graphs state)
+           :auto-push-updates? (:auto-push-updates? state)
            :current-page (state/get-current-page)
            :blocks-count (when-let [page (state/get-current-page)]
                            (count (:block/_page (db/entity [:block/name (util/page-name-sanity-lc page)]))))}
@@ -94,14 +85,14 @@
         [:div.mr-2 (ui/button (str "send pending ops")
                               {:on-click (fn [] (push-pending-ops))})]
         [:div.mr-2 (ui/button (str "Toggle auto push updates("
-                                   (if @(:*auto-push-client-ops? s)
+                                   (if (:*auto-push-client-ops? s)
                                      "ON" "OFF")
                                    ")")
                               {:on-click
                                (fn []
                                  (let [^object worker @db-browser/*worker]
                                    (p/let [result (.rtc-toggle-sync worker (state/get-current-repo))]
-                                     (reset! (::auto-push-updates? state) result))))})]
+                                     (swap! state assoc :auto-push-updates? result))))})]
         [:div (ui/button "stop" {:on-click (fn [] (stop))})]])
      (when (some? s)
        [:hr]
@@ -109,16 +100,16 @@
         (ui/button "grant graph access to"
                    {:class "mr-2"
                     :on-click (fn []
-                                (let [user-uuid (some-> @(::grant-access-to-user state) parse-uuid)
-                                      user-email (when-not user-uuid @(::grant-access-to-user state))]
-                                  (when-let [graph-uuid @(::graph-uuid state)]
+                                (let [user-uuid (some-> (:grant-access-to-user state) parse-uuid)
+                                      user-email (when-not user-uuid (:grant-access-to-user state))]
+                                  (when-let [graph-uuid (:graph-uuid state)]
                                     (let [^object worker @db-browser/*worker]
                                       (.rtc-grant-graph-access worker graph-uuid
                                                                (some-> user-uuid vector)
                                                                (some-> user-email vector))))))})
 
         [:input.form-input.my-2
-         {:on-change (fn [e] (reset! (::grant-access-to-user state) (util/evalue e)))
+         {:on-change (fn [e] (swap! state assoc :grant-access-to-user (util/evalue e)))
           :on-focus (fn [e] (let [v (.-value (.-target e))]
                               (when (= v "input email or user-uuid here")
                                 (set! (.-value (.-target e)) ""))))
@@ -128,8 +119,8 @@
       (ui/button (str "download graph to")
                  {:class "mr-2"
                   :on-click (fn []
-                              (when-let [repo @(::download-graph-to-repo state)]
-                                (when-let [graph-uuid @(::graph-uuid-to-download state)]
+                              (when-let [repo (:download-graph-to-repo state)]
+                                (when-let [graph-uuid (:graph-uuid-to-download state)]
                                   (prn :download-graph graph-uuid :to repo)
                                   (let [token (state/get-auth-id-token)
                                         ^object worker @db-browser/*worker]
@@ -138,14 +129,14 @@
        [:select
         {:on-change (fn [e]
                       (let [value (util/evalue e)]
-                        (reset! (::graph-uuid-to-download state) value)))}
-        (if (seq @(::remote-graphs state))
+                        (swap! state assoc :graph-uuid-to-download value)))}
+        (if (seq (:remote-graphs state))
           (cons [:option {:key "select a remote graph" :value nil} "select a remote graph"]
-                (for [graph-uuid @(::remote-graphs state)]
+                (for [graph-uuid (:remote-graphs state)]
                   [:option {:key graph-uuid :value graph-uuid} (str (subs graph-uuid 0 14) "...")]))
           (list [:option {:key "refresh-first" :value nil} "refresh remote-graphs first"]))]
        [:input.form-input.my-2
-        {:on-change (fn [e] (reset! (::download-graph-to-repo state) (util/evalue e)))
+        {:on-change (fn [e] (swap! state assoc :download-graph-to-repo (util/evalue e)))
          :on-focus (fn [e] (let [v (.-value (.-target e))]
                              (when (= v "repo name here")
                                (set! (.-value (.-target e)) ""))))

src/main/frontend/db_worker.cljs

@@ -460,6 +460,10 @@
    [_this block-id]
    (rtc-core/<get-block-content-versions @rtc-core/*state block-id))
 
+  (rtc-get-debug-state
+   [_this repo]
+   (bean/->js (rtc-core/get-debug-state repo)))
+
   (dangerousRemoveAllDbs
    [this repo]
    (p/let [dbs (.listDB this)]

src/main/frontend/handler/events.cljs

@@ -74,7 +74,8 @@
             [promesa.core :as p]
             [rum.core :as rum]
             [frontend.db.listener :as db-listener]
-            [frontend.persist-db.browser :as db-browser]))
+            [frontend.persist-db.browser :as db-browser]
+            [frontend.db.rtc.debug-ui :as rtc-debug-ui]))
 
 ;; TODO: should we move all events here?
 
@@ -941,6 +942,9 @@
   (state/set-state! :error/multiple-tabs-access-opfs? true)
   (state/set-modal! multi-tabs-dialog {:container-overflow-visible? true}))
 
+(defmethod handle :rtc-sync-state [[_ state]]
+  (swap! rtc-debug-ui/debug-state (fn [old] (merge old state))))
+
 (defn run!
   []
   (let [chan (state/get-events-chan)]

src/main/frontend/handler/worker.cljs

@@ -17,6 +17,10 @@
 (defmethod handle :add-repo [_ data]
   (state/add-repo! {:url (:repo (edn/read-string data))}))
 
+(defmethod handle :rtc-sync-state [_ data]
+  (let [state (edn/read-string data)]
+    (state/pub-event! [:rtc/sync-state state])))
+
 (defmethod handle :default [_ data]
   (prn :debug "Worker data not handled: " data))
 

src/main/frontend/worker/rtc/core.cljs

@@ -851,6 +851,23 @@
 
 (defonce *state (atom nil))
 
+(defn get-debug-state
+  ([repo]
+   (get-debug-state repo @*state))
+  ([repo state]
+   (let [graph-uuid (op-mem-layer/get-graph-uuid repo)
+         local-tx (op-mem-layer/get-local-tx repo)
+         unpushed-block-update-count (op-mem-layer/get-unpushed-block-update-count repo)]
+     (cond->
+      {:graph-uuid graph-uuid
+       :local-tx local-tx
+       :unpushed-block-update-count unpushed-block-update-count}
+       state
+       (merge
+        {:rtc-state @(:*rtc-state state)
+         :ws-state (ws/get-state @(:*ws state))
+         :auto-push-updates? (and @*state @(:*auto-push-client-ops? state))})))))
+
 ;; FIXME: token might be expired
 (defn <init-state
   [token]
@@ -860,7 +877,6 @@
           ws (ws/ws-listen token data-from-ws-chan ws-opened-ch)]
       (<! ws-opened-ch)
       (let [state (init-state ws data-from-ws-chan token)]
-        ;; (worker-util/post-message :rtc/sync-state state)
         (reset! *state state)
         state))))
 
@@ -896,3 +912,10 @@
                         (:graphs (<! (get-result-ch))))]
        (p/resolve! (bean/->js graph-list))))
     d))
+
+(add-watch *state :notify-main-thread
+           (fn [_ _ old new]
+             (let [new-state (get-debug-state @(:*repo new) new)
+                   old-state (get-debug-state @(:*repo old) old)]
+               (when (not= new-state old-state)
+                 (worker-util/post-message :rtc-sync-state (bean/->js new-state))))))