Better graph experience

web/externs.js

@@ -29,3 +29,4 @@ dummy.beginPath = function() {};
 dummy.arc = function() {};
 dummy.fill = function() {};
 dummy.getData = function() {};
+dummy.zoomToFit = function() {};

web/src/main/frontend/components/page.cljs

@@ -81,9 +81,9 @@
          (let [page-name (string/lower-case (util/url-decode encoded-page-name))
                heading? (util/uuid-string? page-name)]
            (if heading?
-            [repo :heading/page (uuid page-name)]
-            (when-let [page-id (db/entity repo [:page/name page-name])]
-              [repo :page/headings page-id])))))))
+             [repo :heading/page (uuid page-name)]
+             (when-let [page-id (db/entity repo [:page/name page-name])]
+               [repo :page/headings page-id])))))))
   {:did-mount handler/scroll-and-highlight!
    :did-update handler/scroll-and-highlight!}
   [state {:keys [repo] :as option}]
@@ -193,14 +193,21 @@
            [:div {:key "page-references"}
             (reference/references page-name false)])]))))
 
+(defonce layout (atom [js/window.innerWidth js/window.innerHeight]))
+
+(defonce graph-ref (atom nil))
 (rum/defcs global-graph < rum/reactive
   (rum/local false ::show-journal?)
   [state]
   (let [show-journal? (get state ::show-journal?)
         theme (state/sub :ui/theme)
+        [width height] (rum/react layout)
         dark? (= theme "dark")
         graph (db/build-global-graph theme @show-journal?)]
-    (ui/force-graph-2d (graph/build-graph-opts graph dark? {}))))
+    (ui/force-graph-2d (graph/build-graph-opts graph dark? {:width (- width 24)
+                                                            :height (- height 68)
+                                                            :ref (fn [v] (reset! graph-ref v))
+                                                            :ref-atom graph-ref}))))
 
 (rum/defc all-pages < rum/reactive
   []

web/src/main/frontend/components/right_sidebar.cljs

@@ -109,7 +109,9 @@
         page (get-page match)
         graph (db/build-page-graph page theme)]
     [:div.sidebar-item.flex-col.flex-1
-     (ui/force-graph-2d (graph/build-graph-opts graph dark? {:width 600}))]))
+     (ui/force-graph-2d (graph/build-graph-opts graph dark?
+                                                {:width 600
+                                                 :height 600}))]))
 
 (rum/defcs starred-cp <
   (rum/local true ::show?)

web/src/main/frontend/components/sidebar.cljs

@@ -25,7 +25,6 @@
      {:alt "Logseq",
       :src "/static/img/white_logo.png"}]]])
 
-
 (defn nav-item
   [title href svg-d active? close-modal-fn]
   [:a.mb-1.group.flex.items-center.pl-4.py-2.text-base.leading-6.font-medium.text-gray-500.hover:text-gray-200.transition.ease-in-out.duration-150.nav-item
@@ -280,14 +279,16 @@
                   :box-sizing "content-box"}}
          [:div.flex.justify-center
           ;; FIXME: overflow-x-hidden conflicts with heading collapsers
-          [:div.flex-1.m-6#main-content-container
+          [:div.flex-1.#main-content-container
            ;; .overflow-x-hidden
            {:style (if global-graph-pages?
                      {:position "relative"}
                      {:position "relative"
                       :max-width 700
                       :margin-bottom 200})}
-           main-content]]]
+           (if global-graph-pages?
+             main-content
+             [:div.m-6 main-content])]]]
         (right-sidebar/sidebar)]
        [:a.opacity-70.hover:opacity-100.absolute.hidden.md:block
         {:href "/"

web/src/main/frontend/format/block.cljs

@@ -28,8 +28,12 @@
       (or
        (and
         (= typ "Search")
-        (not (contains? #{\# \*} (first (second (:url (second block))))))
-        (second (:url (second block))))
+        (not (contains? #{\# \* \/ \( \[} (first (second (:url (second block))))))
+        (let [page (second (:url (second block)))]
+          (when (and (not (string/starts-with? page "http"))
+                     (not (string/starts-with? page "file"))
+                     (not (string/ends-with? page ".html")))
+            page)))
 
        (and
         (= typ "Complex")

web/src/main/frontend/graph.cljs

@@ -20,6 +20,7 @@
   (merge
    {:graphData (bean/->js graph)
     :nodeLabel "id"
+    :linkColor (fn [] (if dark? "rgba(255,255,255,0.2)" "rgba(0,0,0,0.1)"))
     :onNodeClick (fn [node event]
                    (let [page-name (string/lower-case (gobj/get node "id"))]
                      (if (gobj/get event "shiftKey")
@@ -33,16 +34,21 @@
                          (handler/show-right-sidebar))
                        (handler/redirect! {:to :page
                                            :path-params {:name (util/url-encode page-name)}}))))
+    :cooldownTicks 100
+    :onEngineStop (fn []
+                    (when-let [ref (:ref-atom option)]
+                      (.zoomToFit @ref 400)))
     :nodeCanvasObject
     (fn [node ^CanvasRenderingContext2D ctx global-scale]
       (let [label (gobj/get node "id")
             x (gobj/get node "x")
             y (gobj/get node "y")
             color (gobj/get node "color")
-            font-size (/ 14 global-scale)]
-        (set! (.-fillStyle ctx) color)
+            font-size (/ 14 global-scale)
+            text-width (gobj/get (.measureText ctx label) "width")]
         (set! (.-font ctx) (str font-size "px Inter"))
         (set! (.-filltextAlign ctx) "center")
         (set! (.-textBaseLine ctx) "middle")
-        (.fillText ctx label x y)))}
+        (set! (.-fillStyle ctx) color)
+        (.fillText ctx label (- x (/ text-width 2)) y)))}
    option))

web/src/main/frontend/mixins.cljs

@@ -68,6 +68,12 @@
                 27 (on-hide state e :esc)
                 nil)))))
 
+(defn resize-layout
+  [state ref]
+  (listen state js/window "resize"
+          (fn [e]
+            (reset! ref [js/window.innerWidth js/window.innerHeight]))))
+
 (defn on-enter
   [state & {:keys [on-enter node]}]
   (let [node (or node (rum/dom-node state))]