feat(graph): refactor to use UIx and react-flow

build.clj

@@ -22,7 +22,8 @@
 (ns build
   (:require
    [clojure.pprint :as pprint]
-   [clojure.tools.build.api :as build-api]))
+   [clojure.tools.build.api :as build-api]
+   [shadow.cljs.devtools.api :as shadow]))
 
 ;; ---------------------------------------------------------
 ;; Project configuration
@@ -66,6 +67,8 @@
     (build-api/copy-dir {:src-dirs   ["src" "resources"]
                          :target-dir class-directory})
 
+    (shadow/release :app)
+
     (build-api/compile-clj {:basis     project-basis
                             :class-dir class-directory
                             :src-dirs  ["src"]})

cljs/tools/ifs/parts/core.cljs

@@ -1,67 +1,32 @@
 (ns tools.ifs.parts.core
   (:require
-   ["d3" :as d3]
-   ["htmx.org" :default htmx]))
+   ["reactflow" :refer [Background Controls ReactFlow ReactFlowProvider]]
+   [uix.core :refer [$ defui]]
+   [uix.dom]))
 
-(def node-data
-  [{:type "exile"}
-   {:type "exile"}
-   {:type "exile"}
-   {:type "manager"}
-   {:type "firefighter"}
-   {:type "firefighter"}])
+(def initial-nodes
+  [{:id "1" :data {:label "1"} :position {:x 250 :y 25}}
+   {:id "2" :data {:label "2"} :position {:x 250 :y 125}}])
 
-(defn drag-start [event _d]
-  (js/console.log "Drag started")
-  (let [subject (d3/select (.-subject event))]
-    (.raise subject)))
+(def initial-edges
+  [{:id "e1-2" :source "1" :target "2"}])
 
-(defn drag [event _d]
-  (js/console.log "Dragging" event _d)
-  (let [x (.-x event)
-        y (.-y event)
-        subject (d3/select (.-subject event))]
-    (-> subject
-        (.attr "x" 10)
-        (.attr "y" 10))))
+(defui flow-diagram []
+  (let [[nodes set-nodes] (uix.core/use-state initial-nodes)
+        [edges set-edges] (uix.core/use-state initial-edges)]
+    ($ ReactFlowProvider
+       ($ :div {:style {:width "100%" :height "600px"}}
+          ($ ReactFlow
+             {:nodes (clj->js nodes)
+              :edges (clj->js edges)
+              :fitView true})
+          ($ Background)
+          ($ Controls)))))
 
-(defn drag-end [_event _d]
-  (js/console.log "Drag ended"))
-
-(defn create-visualization [el]
-  (js/console.log "Creating visualization" el)
-  (-> d3
-      (.select el)
-      (.append "svg")
-      (.attr "width" 600)
-      (.attr "height" 400)))
-
-(defn load-nodes [svg data]
-  (let [width 600
-        height 400
-        drag-behavior (-> d3
-                          (.drag)
-                          (.on "start" drag-start)
-                          (.on "drag" drag)
-                          (.on "end" drag-end))]
-    (doseq [node data]
-      (let [x (rand-int width)
-            y (rand-int height)
-            type (:type node)
-            img-path (str "/images/nodes/" type ".svg")]
-        (-> svg
-            (.append "image")
-            (.attr "xlink:href" img-path)
-            (.attr "x" x)
-            (.attr "y" y)
-            (.attr "width" 50)
-            (.attr "height" 50)
-            (.attr "class" type)
-            (.call drag-behavior))))))
+(defonce root
+  (uix.dom/create-root (js/document.getElementById "root")))
 
 (defn ^:export init []
-  (.on htmx "htmx:load"
-       (fn [_event]
-         (js/console.log "htmx loaded!")
-         (let [svg (create-visualization (.getElementById js/document "chart"))]
-           (load-nodes svg node-data)))))
+  (uix.dom/render-root
+    ($ flow-diagram)
+    root))

deps.edn

@@ -1,6 +1,6 @@
 {;; ---------------------------------------------------------
  :paths
- ["src" "resources" "cljs"]
+ ["src" "resources"]
  ;; ---------------------------------------------------------
 
  ;; ---------------------------------------------------------
@@ -35,11 +35,7 @@
   ;; Hiccup is a library for representing HTML in Clojure. It uses vectors to
   ;; represent elements, and maps to represent an element's attributes.
   ;; https://github.com/weavejester/hiccup
-  hiccup/hiccup {:mvn/version "2.0.0-RC3"}
-  ;;
-  ;; Clojurescript
-  ;; https://github.com/clojure/clojurescript
-  org.clojure/clojurescript {:mvn/version "1.11.132"}}
+  hiccup/hiccup {:mvn/version "2.0.0-RC3"}}
 
  ;; ---------------------------------------------------------
  :aliases
@@ -54,6 +50,23 @@
    :exec-args {:name "Clojure"}}
   ;; ------------
 
+  ;; ------------
+  ;; Frontend
+  :frontend
+  {:extra-paths ["cljs"]
+   :extra-deps
+   {org.clojure/clojurescript {:mvn/version "1.11.132"}
+    com.pitch/uix.core {:mvn/version "1.3.1"}
+    com.pitch/uix.dom {:mvn/version "1.3.1"}}}
+
+  :shadow-cljs
+  {:extra-paths ["dev/cljs"]
+   :extra-deps
+   {thheller/shadow-cljs {:mvn/version "2.28.15"}
+    cider/cider-nrepl {:mvn/version "0.51.1"}
+    refactor-nrepl/refactor-nrepl {:mvn/version "3.10.0"}
+    binaryage/devtools {:mvn/version "1.0.7"}}}
+
   ;; ------------
   ;; Add libraries and paths to support additional test tools
   :test/env

package.json

@@ -2,9 +2,12 @@
   "dependencies": {
     "d3": "^7.9.0",
     "htmx.org": "^2.0.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "reactflow": "^11.11.4",
     "shadow-cljs": "^2.28.15"
   },
   "scripts": {
-    "watch": "shadow-cljs watch app"
+    "watch": "bunx shadow-cljs watch app"
   }
 }