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

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))

package.json

@@ -2,6 +2,9 @@
   "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": {