add charge range

src/main/frontend/components/page.cljs

@@ -550,24 +550,27 @@
 (defonce *show-journals-in-page-graph? (atom nil))
 (defonce *link-dist (atom 70))
 (defonce *charge-strength (atom -600))
+(defonce *charge-range (atom 600))
 
 (rum/defc ^:large-vars/cleanup-todo graph-filters < rum/reactive
   [graph settings forcesettings n-hops]
   (let [{:keys [journal? orphan-pages? builtin-pages? excluded-pages?]
          :or {orphan-pages? true}} settings
-        {:keys [link-dist charge-strength]} forcesettings
+        {:keys [link-dist charge-strength charge-range]} forcesettings
         journal?' (rum/react *journal?)
         orphan-pages?' (rum/react *orphan-pages?)
         builtin-pages?' (rum/react *builtin-pages?)
         excluded-pages?' (rum/react *excluded-pages?)
         link-dist'  (rum/react *link-dist)
         charge-strength'  (rum/react *charge-strength)
+        charge-range'  (rum/react *charge-range)
         journal? (if (nil? journal?') journal? journal?')
         orphan-pages? (if (nil? orphan-pages?') orphan-pages? orphan-pages?')
         builtin-pages? (if (nil? builtin-pages?') builtin-pages? builtin-pages?')
         excluded-pages? (if (nil? excluded-pages?') excluded-pages? excluded-pages?')
         link-dist (if (nil? link-dist') link-dist link-dist')
         charge-strength (if (nil? charge-strength') charge-strength charge-strength')
+        charge-range (if (nil? charge-range') charge-range charge-range')
         set-setting! (fn [key value]
                        (let [new-settings (assoc settings key value)]
                          (config-handler/set-config! :graph/settings new-settings)))
@@ -690,11 +693,11 @@
              [:p.text-sm.opacity-70.px-4
               (let [c1 (count (:nodes graph))
                     s1 (if (> c1 1) "s" "")
-                    ;; c2 (count (:links graph))
-                    ;; s2 (if (> c2 1) "s" "")
+                    c2 (count (:links graph))
+                    s2 (if (> c2 1) "s" "")
                     ]
                 ;; (util/format "%d page%s, %d link%s" c1 s1 c2 s2)
-                (util/format "%d page%s" c1 s1))]
+                (util/format "%d link%s" c2 s2))]
              [:div.p-6
               [:div.flex.flex-col.mb-2
                 [:p {:title "Link Distance"}
@@ -720,12 +723,23 @@
                                       :on-change #(let [value (int %)]
                                                     (reset! *charge-strength (* value 100))
                                                     (set-forcesetting! :charge-strength (* value 100)))}))]
+              [:div.flex.flex-col.mb-2
+                [:p {:title "Charge Range"}
+                "Charge Range"]
+                (ui/tippy {:html [:div.pr-3 charge-range]}
+                          (ui/slider (/ charge-range 100)
+                                     {:min 5    ;;500
+                                      :max 40   ;;4000
+                                      :on-change #(let [value (int %)]
+                                                    (reset! *charge-range (* value 100))
+                                                    (set-forcesetting! :charge-range (* value 100)))}))]
 
 
               [:a.opacity-70.opacity-100 {:on-click (fn []
                                                       (swap! *graph-forcereset? not)
                                                       (reset! *link-dist 70)
-                                                      (reset! *charge-strength -600))}
+                                                      (reset! *charge-strength -600)
+                                                      (reset! *charge-range 600))}
                "Reset Forces"]]]))
          {})
         (graph-filter-section
@@ -763,6 +777,7 @@
         n-hops (rum/react *n-hops)
         link-dist (rum/react *link-dist)
         charge-strength (rum/react *charge-strength)
+        charge-range (rum/react *charge-range)
         reset? (rum/react *graph-reset?)
         forcereset? (rum/react *graph-forcereset?)
         focus-nodes (when n-hops (rum/react *focus-nodes))
@@ -785,6 +800,7 @@
                       :dark? dark?
                       :link-dist link-dist
                       :charge-strength charge-strength
+                      :charge-range charge-range
                       :register-handlers-fn
                       (fn [graph]
                         (graph-register-handlers graph *focus-nodes *n-hops dark?))

src/main/frontend/extensions/graph.cljs

@@ -51,9 +51,9 @@
   {:did-update pixi/render!
    :should-update (fn [old-state new-state]
                     (not= (select-keys (first (:rum/args old-state))
-                                       [:nodes :links :dark? :link-dist :charge-strength])
+                                       [:nodes :links :dark? :link-dist :charge-strength :charge-range])
                           (select-keys (first (:rum/args new-state))
-                                       [:nodes :links :dark? :link-dist :charge-strength])))
+                                       [:nodes :links :dark? :link-dist :charge-strength :charge-range])))
    :will-unmount (fn [state]
                    (reset! pixi/*graph-instance nil)
                    state)}

src/main/frontend/extensions/graph/pixi.cljs

@@ -55,7 +55,7 @@
 
 (defn layout!
   "Node forces documentation can be read in more detail here https://d3js.org/d3-force"
-  [nodes links link-dist charge-strength]
+  [nodes links link-dist charge-strength charge-range]
   (let [nodes-count (count nodes)
         simulation (forceSimulation nodes)]
     (-> simulation 
@@ -76,7 +76,7 @@
                     (.distanceMin 1)
                     ;; The maximum distance between nodes over which this force is considered.
                     ;; Specifying a finite maximum distance improves performance and produces a more localized layout.
-                    (.distanceMax (if (> nodes-count 500) 4000 600))
+                    (.distanceMax charge-range)
                     ;; For a cluster of nodes that is far away, the charge force can be approximated by treating the cluster as a single, larger node.
                     ;; The theta parameter determines the accuracy of the approximation
                     (.theta 0.5)
@@ -185,7 +185,7 @@
     (when @*graph-instance
       (clear-nodes! (:graph @*graph-instance))
       (destroy-instance!))
-    (let [{:keys [nodes links style hover-style height register-handlers-fn dark? link-dist charge-strength]} (first (:rum/args state))
+    (let [{:keys [nodes links style hover-style height register-handlers-fn dark? link-dist charge-strength charge-range]} (first (:rum/args state))
           style                                                                     (or style (default-style dark?))
           hover-style                                                               (or hover-style (default-hover-style dark?))
           graph                                                                     (Graph.)
@@ -200,7 +200,7 @@
           links                                                                     (remove (fn [{:keys [source target]}] (or (nil? source) (nil? target))) links)
           nodes-js                                                                  (bean/->js nodes)
           links-js                                                                  (bean/->js links)
-          simulation                                                                (layout! nodes-js links-js link-dist charge-strength)]
+          simulation                                                                (layout! nodes-js links-js link-dist charge-strength charge-range)]
       (doseq [node nodes-js]
         (try (.addNode graph (.-id node) node)
           (catch :default e