container added + demo project added

README.md

@@ -1,2 +1,12 @@
 # dali [![GitHub Actions status |pink-gorilla/dali](https://github.com/pink-gorilla/dali/workflows/CI/badge.svg)](https://github.com/pink-gorilla/dali/actions?workflow=CI)[![Clojars Project](https://img.shields.io/clojars/v/org.pinkgorilla/dali.svg)](https://clojars.org/org.pinkgorilla/dali)
 
+
+
+
+# demo
+
+cd demo
+clj -X:npm-install
+clj -X:demo
+
+port 8080

cljfmt.edn

@@ -0,0 +1,4 @@
+{as->                [[:inner 0]]
+ with-debug-bindings [[:inner 0]]
+ merge-meta          [[:inner 0]]
+ try-if-let          [[:block 1]]}

demo/deps.edn

@@ -0,0 +1,48 @@
+{:paths ["src"
+         "resources"
+         "target/webly"
+         ".data"
+         ]
+
+ :deps {org.clojure/clojure    {:mvn/version "1.11.1"}
+        org.pinkgorilla/clj-service {:mvn/version "0.3.20"}
+        org.pinkgorilla/webly {:mvn/version "0.7.703"} ; build tool
+        org.pinkgorilla/goldly {:mvn/version "0.7.683"}
+        org.pinkgorilla/ui-tailwind {:mvn/version "0.1.8"} ; tailwind css classes
+        org.pinkgorilla/ui-repl {:mvn/version "0.1.110"}
+  ;      org.pinkgorilla/ui-input {:mvn/version "0.2.62"}
+        ;; this project
+        org.pinkgorilla/dali {:local/root "../" :deps/manifest :deps}
+        }
+
+ :aliases {;; WATCH
+           :npm-install
+           {:exec-fn webly.app.app/webly-build
+            :config {}
+            :exec-args {:profile "npm-install"}}
+           :demo
+           {:exec-fn modular.system/start!
+            :exec-args {;:profile "jetty"
+                        :profile "watch"
+                        :config {}
+                        :services "demo-services.edn"}}
+
+           ;; BUILD / SERVE
+
+           :compile {:exec-fn webly.app.app/webly-build
+                     :config {}
+                     :exec-args {:profile "compile"}}
+
+
+           :release-adv {:exec-fn webly.app.app/webly-build
+                         :config {}
+                         :exec-args {:profile "release-adv"}}
+
+           :jetty
+           {:exec-fn modular.system/start!
+            :exec-args {:profile "jetty"
+                        :config {}
+                        :services "demo-services.edn"}}
+           }
+;
+ }

demo/resources/demo-services.edn

@@ -0,0 +1,29 @@
+{:modular (modular.system/modular-env)  ; {:profile "jetty"  :config ["demo.edn" "secrets.edn"]}
+ ;:secrets #include "secrets.edn" ;; externalised and usually "mounted" as a docker/kubernetes secret
+ :components
+ {:config {:start (modular.config/load-config! (:config #ref [:modular]))}
+
+  :exts {:start (extension/discover)}
+
+  :timbre {:start (modular.log/timbre-config!
+                   (:timbre/clj (deref (clip/ref :config))))}
+
+  ; empty map means no users are configured, so always permissioned.
+  :permission {:start (modular.permission.core/start-permissions {})}
+
+  :clj-service {:start (clj-service.core/start-clj-services
+                        (clip/ref :permission)
+                        (clip/ref :exts))}
+
+
+  :webly {:start (webly.app.app/start-webly
+                  (clip/ref :exts)
+                  (deref (clip/ref :config))
+                  (:profile #ref [:modular]))
+          :stop (webly.app.app/stop-webly this)}
+
+  :nrepl {:start (nrepl.server/start-server :bind "0.0.0.0" :port 9100)
+          :stop (.close this)}
+
+;  
+  }}

demo/resources/ext/demo.edn

@@ -0,0 +1,15 @@
+{:name "demo"
+ ;:lazy true ; must be true, since it depends on techml-dataset-cljs
+ ;:depends-on #{:dali}
+ :cljs-routes  {"" demo.page.saying/page
+
+                }
+
+  :clj-services {:name "demo"
+                 :permission nil
+                 :symbols [demo.service.saying/saying
+                           ]}
+
+
+
+ }

demo/src/demo/page/saying.cljs

@@ -0,0 +1,21 @@
+(ns demo.page.saying
+  (:require
+   [reagent.core :as r]
+   [dali.viewer :refer [viewer2]]
+   [dali.cljviewer :refer [clj-viewer]]
+   [dali.container :refer [container-dimension]]))
+
+(defonce window-a (r/atom nil))
+
+(defn page [_]
+  [:div.h-screen.w-screen.bg-blue-100
+   [clj-viewer {:fun 'demo.service.saying/saying
+                :args [{:id 5}]}]
+
+   [container-dimension
+    {:window-a window-a}]
+
+   (when @window-a
+     [clj-viewer {:fun 'demo.service.saying/saying
+                  :args [(assoc {:id 3} :window @window-a)]}])])
+

demo/src/demo/service/saying.clj

@@ -0,0 +1,25 @@
+(ns demo.service.saying
+  (:require
+   [dali.plot.hiccup :refer [hiccup]]))
+
+(defn saying [{:keys [id] :as opts}]
+  (println "serving saying id: " id " opts: " opts)
+  (let [s (case id
+            0 "Peace to the world"
+            1 "The hottentotten are here"
+            2 "The sky is always blue"
+            3 "Biene Maya and Willy"
+            4 "Quot erum demunstrandum"
+            5 "The early bird catches the worm"
+            6 "Six Six Six"
+            7 "Seven Angles are here"
+            8 "8 means infinity "
+            9 "what is the secret of nine?"
+            nil)]
+    (hiccup [:div.bg-blue-300.w-100.h-100
+             [:h1 "Sayings Response"]
+             [:p "You entered: " id]
+             [:hr]
+             (if s
+               [:p.bg-green-500.p-5 s]
+               [:p.bg-red-500.p-5 "This saying does not exist: " id])])))

deps.edn

@@ -14,5 +14,31 @@
  :build {:deps {io.github.clojure/tools.build {:mvn/version "0.9.6"}
                 slipset/deps-deploy {:mvn/version "0.2.1"}}
          :ns-default build}
+
+   :cljfmt
+  {:extra-deps {cljfmt/cljfmt {:mvn/version "0.8.0"}}
+   :main-opts ["-m" "cljfmt.main"
+               "--indents" "cljfmt.edn"
+               "check"
+               "./src"
+               "./demo/src"]}
+
+  :cljfmt-fix
+  {:extra-deps {cljfmt/cljfmt {:mvn/version "0.8.0"}}
+   :main-opts ["-m" "cljfmt.main"
+               "--indents" "cljfmt.edn"
+               "fix"
+               "./src"
+               "./demo/src"]}
+
+  ; https://github.com/clj-kondo/clj-kondo/blob/master/doc/jvm.md
+  :lint
+  {:extra-deps {clj-kondo/clj-kondo {:mvn/version "2024.03.13"}}
+   :main-opts ["-m" "clj-kondo.main"
+               "--config" "cljkondo.edn"
+               "--fail-level" "error"
+               "--lint"
+               "./src"
+               "./demo/src"]}
 
  }}

resources/ext/dali.edn

@@ -4,6 +4,7 @@
  :depends-on #{}
  :cljs-namespace [dali.viewer
                   dali.cljviewer
+                  dali.container
                   dali.util.color
                   ; viewers
                   dali.viewer.hiccup
@@ -12,6 +13,8 @@
  :cljs-ns-bindings {'dali.viewer {'viewer dali.viewer/viewer
                                   'viewer2 dali.viewer/viewer2}
                     'dali.cljviewer {'clj-viewer dali.cljviewer/clj-viewer}
+                    'dali.container {'container-dimension dali.container/container-dimension}
+
                     'dali.util.color {'set-color dali.util.color/set-color}
                     ; viewers
                     'dali.viewer.hiccup {'hiccup dali.viewer.hiccup/hiccup}

src/dali/cljviewer.cljs

@@ -29,17 +29,16 @@
       :reagent-render (fn [{:keys [fun args]
                             :or {args []}}] ;; remember to repeat parameters
                         (let [{:keys [data error]} @a]
-                          (cond 
+                          (cond
                             data [viewer2 data]
                             error [:div "clj-exec error"]
                             :else [:div "executing clj"])))
       :component-did-mount (fn [this] ; oldprops oldstate snapshot
                              (let [argv (rest (r/argv this))
                                    [arg1] argv]
-                             (info "component-mount: " arg1)
-                             (reset! last-fetch-a [fun args])  
-                             (load-to-atom-once a fun args)
-                             ))
+                               (info "component-mount: " arg1)
+                               (reset! last-fetch-a [fun args])
+                               (load-to-atom-once a fun args)))
       :component-did-update (fn [this old-argv]
                               (let [new-argv (rest (r/argv this))
                                     [arg1] new-argv
@@ -50,8 +49,8 @@
                                 ; since receiving result is triggering a re-renter
                                 ; we need to avoid an endless fetch loop.
                                 (when-not (= @last-fetch-a new-fetch)
-                                   (reset! last-fetch-a new-fetch)
-                                   (load-to-atom-once a fun args))))})))
+                                  (reset! last-fetch-a new-fetch)
+                                  (load-to-atom-once a fun args))))})))
 
 
 

src/dali/container.cljs

@@ -0,0 +1,25 @@
+(ns dali.container
+  (:require
+   [reagent.core :as r]
+   [reagent.dom]))
+
+; https://www.geeksforgeeks.org/how-to-get-the-elements-actual-width-and-height-in-javascript/
+; https://react.dev/reference/react-dom/findDOMNode#alternatives
+
+(defn container-dimension
+  [{:keys [window-a]}]
+  (r/create-class
+   {:display-name "container-dimension"
+    :reagent-render (fn [] ;; remember to repeat parameters
+                      [:div.container-dimension
+                       {:style {:display "none"}}])
+    :component-did-mount (fn [this] ; oldprops oldstate snapshot
+                           (let [node (reagent.dom/dom-node this)
+                                 parent (.-parentElement node)
+                                 width (.-offsetWidth parent)
+                                 height (.-offsetHeight parent)
+                                 window {:width width :height height}]
+                             (when-not (= window @window-a)
+                               (println "window: " window)
+                               (reset! window-a window))))}))
+

src/dali/plot/anomaly.clj

@@ -1,8 +1,7 @@
 (ns dali.plot.anomaly
   (:require
    [de.otto.nom.core :as nom]
-   [dali.spec :refer [create-dali-spec]]
-   ))
+   [dali.spec :refer [create-dali-spec]]))
 
 (defn remove-ex [[type category data-map]]
   ; [::nom/anomaly ::my-category {:some data}]

src/dali/plot/exception.clj

@@ -33,8 +33,8 @@
    {:viewer-fn 'dali.viewer.exception/exception
     :data  ;(err (.getCause ex))
     (str text "\r\n"
-        (with-out-str
-          (stack/print-stack-trace ex)))}))
+         (with-out-str
+           (stack/print-stack-trace ex)))}))
 
 (comment
   (def ex (ex-info "asdf" {:y 3}))

src/dali/plot/hiccup.clj

@@ -2,7 +2,6 @@
   (:require
    [dali.spec :refer [create-dali-spec]]))
 
-
 (defn hiccup
   [h]
   (create-dali-spec

src/dali/spec.clj

@@ -6,10 +6,10 @@
        (symbol? viewer-fn)))
 
 (defn create-dali-spec [{:keys [viewer-fn transform-fn data] :as dali-spec}]
-  (assert viewer-fn "viewer-fn is a required parameter" )
+  (assert viewer-fn "viewer-fn is a required parameter")
   (assert (symbol? viewer-fn) "viewer-fn needs to be a symbol")
-  (when transform-fn 
-     (assert (symbol? transform-fn) "transform-fn (if specified) needs to be a symbol"))
-  (with-meta 
+  (when transform-fn
+    (assert (symbol? transform-fn) "transform-fn (if specified) needs to be a symbol"))
+  (with-meta
     dali-spec
     {:dali true}))

src/dali/util/resolve.cljs

@@ -8,12 +8,10 @@
 ; replace symbols with functions
 ; functions are resolved via requiring-resolve which returns a promesa promise
 
-
 (defn resolve-symbol [s]
   (let [resolve-fn (get-resolver)]
     (resolve-fn s)))
 
-
 (defn resolve-symbols
   "input: seq of symbol
    output: a promise, when resolved: map keys:symbol values:fn"