From cac8b44e16e19fd6e400128db82824c00a837f07 Mon Sep 17 00:00:00 2001
From: Gosha Tcherednitchenko <git@gosha.net>
Date: Sat, 1 Feb 2025 05:59:07 +0000
Subject: [PATCH] feat(frontend): add UIx, add ReactFlow

---
 deps.edn                         |  7 ++++-
 resources/public/css/flow.css    |  2 --
 src/dev/repl.clj                 |  3 ++
 src/main/parts/frontend/app.cljs | 51 ++++++++++++++++++++++++++++++--
 4 files changed, 58 insertions(+), 5 deletions(-)

diff --git a/deps.edn b/deps.edn
index fd3f0aa..64f0de8 100644
--- a/deps.edn
+++ b/deps.edn
@@ -44,7 +44,12 @@
   ;; https://code.thheller.com/blog/shadow-cljs/2024/10/18/fullstack-cljs-workflow-with-shadow-cljs.html
   thheller/shadow-cljs {:mvn/version "2.28.20"}
   cider/cider-nrepl {:mvn/version "0.51.1"}
-  refactor-nrepl/refactor-nrepl {:mvn/version "3.10.0"}}
+  refactor-nrepl/refactor-nrepl {:mvn/version "3.10.0"}
+  ;;
+  ;; UIx
+  ;; https://github.com/pitch-io/uix
+  com.pitch/uix.core {:mvn/version "1.3.1"}
+  com.pitch/uix.dom {:mvn/version "1.3.1"}}
 
  :aliases
  {:run/app
diff --git a/resources/public/css/flow.css b/resources/public/css/flow.css
index a087c28..3b53bb2 100644
--- a/resources/public/css/flow.css
+++ b/resources/public/css/flow.css
@@ -1,5 +1,3 @@
-/* From: https://unpkg.com/reactflow@11.11.4/dist/style.css */
-
 /* this gets exported as style.css and can be used for the default theming */
 /* these are the necessary styles for React Flow, they get used by base.css and style.css */
 .react-flow {
diff --git a/src/dev/repl.clj b/src/dev/repl.clj
index 1953375..f191a1b 100644
--- a/src/dev/repl.clj
+++ b/src/dev/repl.clj
@@ -24,3 +24,6 @@
 (defn go []
   (stop)
   (start))
+
+(defn cljs-repl []
+  (shadow.cljs.devtools.api/repl :frontend))
diff --git a/src/main/parts/frontend/app.cljs b/src/main/parts/frontend/app.cljs
index 7aba8fc..fb4c963 100644
--- a/src/main/parts/frontend/app.cljs
+++ b/src/main/parts/frontend/app.cljs
@@ -1,9 +1,56 @@
 (ns parts.frontend.app
+  ;; TODO: We probably need to split the nodes UI into a separate component and
+  ;; only load this when the user is signed in. It doesn't make sense to always
+  ;; be loading this.
   (:require
-   ["htmx.org" :default htmx]))
+   ["htmx.org" :default htmx]
+   ["reactflow" :refer [ReactFlow
+                        MiniMap
+                        Controls
+                        Background
+                        useNodesState
+                        useEdgesState
+                        addEdge]]
+   [uix.core :refer [defui $]]
+   [uix.dom]))
+
+;; NOTE: Layouting
+;; https://reactflow.dev/learn/layouting/layouting
+;; https://d3js.org/d3-force
+;; https://marvl.infotech.monash.edu/webcola/
+
+(def initial-nodes
+  [{:id "1" :position {:x 0 :y 0} :data {:label "1"}}
+   {:id "2" :position {:x 0 :y 100} :data {:label "2"}}])
+
+(def initial-edges
+  [{:id "e1-2" :source "1" :target "2"}])
+
+(defui app []
+  (let [[nodes setNodes onNodesChange] (useNodesState (clj->js initial-nodes))
+        [edges setEdges onEdgesChange] (useEdgesState (clj->js initial-edges))
+        on-connect (uix.core/use-callback
+                    (fn [params]
+                      (setEdges (fn [eds] (addEdge params eds))))
+                    [setEdges])]
+    ($ :div {:style {:width "100vw" :height "100vh"}}
+       ($ ReactFlow {:nodes nodes
+                     :edges edges
+                     :onNodesChange onNodesChange
+                     :onEdgesChange onEdgesChange
+                     :onConnect on-connect}
+          ($ MiniMap)
+          ($ Controls)
+          ($ Background {:variant "dots"
+                         :gap 12
+                         :size 1})))))
+
+(defonce root
+  (uix.dom/create-root (js/document.getElementById "root")))
 
 (defn ^:export init []
   (.on htmx "htmx:load"
-       (fn [evt]
+       (fn [_]
+         (uix.dom/render-root ($ app) root)
          (let [version (.-version htmx)]
            (js/console.log "HTMX loaded! Version:" version)))))