enhance: page graph will auto-refresh when redirecting to a new page

src/main/frontend/components/block.cljs

@@ -484,35 +484,35 @@
     (let [block (and (util/uuid-string? id)
                      (db/pull-block (uuid id)))]
       (if block
-        [:span
+        [:div.block-ref-wrap
-         [:div.block-ref-wrap
+         {:on-mouse-down
-          {:on-click (fn [e]
+          (fn [e]
-                       (util/stop e)
+            (util/stop e)
-                       (if (gobj/get e "shiftKey")
+            (if (gobj/get e "shiftKey")
-                         (state/sidebar-add-block!
+              (state/sidebar-add-block!
-                          (state/get-current-repo)
+               (state/get-current-repo)
-                          (:db/id block)
+               (:db/id block)
-                          :block-ref
+               :block-ref
-                          {:block block})
+               {:block block})
-                         (route-handler/redirect! {:to          :page
+              (route-handler/redirect! {:to          :page
-                                                   :path-params {:name id}})))}
+                                        :path-params {:name id}})))}
 
-          (let [title (let [title (:block/title block)]
+         (let [title (let [title (:block/title block)]
-                        (if (empty? title)
+                       (if (empty? title)
-                          ;; display the content
+                         ;; display the content
-                          [:div.block-ref
+                         [:div.block-ref
-                           (block-content config block nil (:block/uuid block) (:slide? config))]
+                          (block-content config block nil (:block/uuid block) (:slide? config))]
-                          (->elem
+                         (->elem
-                           :span.block-ref
+                          :span.block-ref
-                           (map-inline config title))))]
+                          (map-inline config title))))]
-            (if label
+           (if label
-              (->elem
+             (->elem
-               :span.block-ref {:title (some->
+              :span.block-ref {:title (some->
-                                        (:block/content block)
+                                       (:block/content block)
-                                        (text/remove-level-spaces (:block/format block))
+                                       (text/remove-level-spaces (:block/format block))
-                                        (text/remove-properties!))} ; TODO: replace with a popup
+                                       (text/remove-properties!))} ; TODO: replace with a popup
-               (map-inline config label))
+              (map-inline config label))
-              title))]]
+             title))]
         [:span.warning.mr-1 {:title "Block ref invalid"}
          (util/format "((%s))" id)]))))
 

src/main/frontend/components/right_sidebar.cljs

@@ -39,9 +39,13 @@
               :sidebar?   true
               :repo       repo}))
 
-(rum/defc page-graph < db-mixins/query
+(rum/defc page-graph < db-mixins/query rum/reactive
-  [page]
+  []
-  (let [theme (:ui/theme @state/state)
+  (let [page (or
+              (and (= :page (state/sub [:route-match :data :name]))
+                   (state/sub [:route-match :path-params :name]))
+              (date/today))
+        theme (:ui/theme @state/state)
         dark? (= theme "dark")
         graph (if (util/uuid-string? page)
                 (graph-handler/build-block-graph (uuid page) theme)
@@ -100,8 +104,8 @@
     [(t :right-side-bar/help) (onboarding/help)]
 
     :page-graph
-    [(str (t :right-side-bar/graph-ref) (db-model/get-page-original-name block-data))
+    [(str (t :right-side-bar/page-graph))
-     (page-graph block-data)]
+     (page-graph)]
 
     :block-ref
     (when-let [block (db/entity repo [:block/uuid (:block/uuid (:block block-data))])]
@@ -183,7 +187,7 @@
                (if collapse?
                  (svg/caret-right)
                  (svg/caret-down))]
-              [:div.ml-1
+              [:div.ml-1.font-medium
                title]]
              (close #(state/sidebar-remove-block! idx))]
             [:div {:class (if collapse? "hidden" "initial")}

src/main/frontend/dicts.cljs

@@ -180,7 +180,7 @@ title: How to take dummy notes?
         :right-side-bar/page "Page graph"
         :right-side-bar/recent "Recent"
         :right-side-bar/contents "Contents"
-        :right-side-bar/graph-ref "Graph of "
+        :right-side-bar/page-graph "Page graph"
         :right-side-bar/block-ref "Block reference"
         :git/set-access-token "Set Github personal access token"
         :git/token-is-encrypted "The token will be encrypted and stored in the browser local storage"
@@ -421,7 +421,6 @@ title: How to take dummy notes?
         :right-side-bar/page "Seiten-Graph"
         :right-side-bar/recent "Neueste"
         :right-side-bar/contents "Inhalt"
-        :right-side-bar/graph-ref "Graph von "
         :right-side-bar/block-ref "Blockreferenz"
         :git/set-access-token "Persönliches Github-Zugangs-Token festlegen"
         :git/token-is-encrypted "Das Token wird verschlüsselt und im lokalen Speicher des Browsers gespeichert"
@@ -650,7 +649,6 @@ title: How to take dummy notes?
         :right-side-bar/page "Graphe de la page"
         :right-side-bar/recent "Récents"
         :right-side-bar/contents "Contenus"
-        :right-side-bar/graph-ref "Graphe de "
         :right-side-bar/block-ref "Référence des blocs"
         :git/set-access-token "Définir un jeton d'accès personnel GitHub"
         :git/token-is-encrypted "Le jeton sera chiffré et gardé dans le stockage local du navigateur (local storage)"
@@ -912,7 +910,7 @@ title: How to take dummy notes?
            :right-side-bar/page "页面图谱"
            :right-side-bar/recent "最近"
            :right-side-bar/contents "目录"
-           :right-side-bar/graph-ref "图谱："
+           :right-side-bar/page-graph "页面图谱："
            :right-side-bar/block-ref "块引用"
            :git/set-access-token "设定 Github 个人访问令牌"
            :git/token-is-encrypted "令牌将被加密并存储在浏览器本地存储"
@@ -1191,7 +1189,6 @@ title: How to take dummy notes?
              :right-side-bar/page "頁面圖譜"
              :right-side-bar/recent "最近"
              :right-side-bar/contents "目錄"
-             :right-side-bar/graph-ref "圖譜："
              :right-side-bar/block-ref "塊引用"
              :git/set-access-token "設定 Github 個人訪問令牌"
              :git/token-is-encrypted "令牌將被加密並存儲在瀏覽器本地存儲"
@@ -1446,7 +1443,6 @@ title: How to take dummy notes?
         :right-side-bar/page "Grafiek bladsy"
         :right-side-bar/recent "Onlangs"
         :right-side-bar/contents "Inhoud"
-        :right-side-bar/graph-ref "Grafiek van "
         :right-side-bar/block-ref "Blok verwysing"
         :git/set-access-token "Set Github personal access token"
         :git/token-is-encrypted "The token will be encrypted and stored in the browser local storage"

src/main/frontend/format/block.cljs

@@ -76,10 +76,19 @@
 
                :else
                nil)]
-    (when (and
+    (cond
-           (string? page)
+      (and
-           (not (string/blank? page)))
+       (string? page)
-      (string/trim page))))
+       (text/block-ref? page))
+      (text/block-ref-un-brackets! page)
+
+      (and
+       (string? page)
+       (not (string/blank? page)))
+      (string/trim page)
+
+      :else
+      nil)))
 
 (defn get-block-reference
   [block]

src/main/frontend/handler/graph.cljs

@@ -4,7 +4,8 @@
             [frontend.util :as util]
             [frontend.date :as date]
             [frontend.state :as state]
-            [clojure.set :as set]))
+            [clojure.set :as set]
+            [medley.core :as medley]))
 
 (defn- build-edges
   [edges]
@@ -28,16 +29,19 @@
      (mapv (fn [p]
              (when p
                (let [current-page? (= p current-page)
-                     color (case [dark? current-page?] ; FIXME: Put it into CSS
+                     block? (and p (util/uuid-string? p))
-                             [false false] "#222222"
+                     color (if block?
-                             [false true]  "#045591"
+                             "#1a6376"
-                             [true false]  "#8abbbb"
+                             (case [dark? current-page?] ; FIXME: Put it into CSS
-                             [true true]   "#ffffff")
+                              [false false] "#222222"
+                              [false true]  "#045591"
+                              [true false]  "#8abbbb"
+                              [true true]   "#ffffff"))
                      color (if (contains? tags (string/lower-case (str p)))
                              (if dark? "orange" "green")
                              color)]
                  {:id p
-                  :name p
+                  :name name
                   :val (get-connections p edges)
                   :autoColorBy "group"
                   :group (js/Math.ceil (* (js/Math.random) 12))