Re-frame improvements fixes #44

xtdb · Dec 6, 2024 · b1e9d5d · b1e9d5d
1 parent aa685d2
commit b1e9d5d
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 64 deletions.
diff --git a/src/clj/xt_play/view.clj b/src/clj/xt_play/view.clj
@@ -10,7 +10,6 @@
     [:meta {:name "description" :content ""}]
     [:link {:rel "stylesheet" :href "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"}]
     [:link {:rel "stylesheet" :type "text/css" :href "/public/css/main.css"}]
-    [:link {:rel "stylesheet" :href "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"}]
     [:script {:src "https://cdn.tailwindcss.com"}]
     [:script {:async true
               :defer true

diff --git a/src/cljs/xt_play/components/editor.cljs b/src/cljs/xt_play/components/editor.cljs
@@ -85,3 +85,9 @@
            :extensions sql-extensions
            :on-change on-change
            :class my-class}])
+
+(defn default-editor [tx-type]
+  (case tx-type
+    :xtql clj-editor
+    :sql sql-editor
+    sql-editor))
diff --git a/src/cljs/xt_play/view.cljs b/src/cljs/xt_play/view.cljs
@@ -1,5 +1,5 @@
 (ns xt-play.view
-  (:require ["@heroicons/react/24/outline" :refer [BookmarkIcon CheckCircleIcon]]
+  (:require ["@heroicons/react/24/outline" :refer [BookmarkIcon CheckCircleIcon QuestionMarkCircleIcon]]
             ["@heroicons/react/24/solid"
              :refer [ArrowUturnLeftIcon PencilIcon PlayIcon XMarkIcon]]
             [clojure.string :as str]
@@ -12,14 +12,13 @@
             [xt-play.model.run :as run]
             [xt-play.model.tx-batch :as tx-batch]))
 
-(defn language-dropdown []
-  (let [tx-type @(rf/subscribe [:get-type])]
-    [dropdown {:items model/items
-               :selected tx-type
-               :on-click #(rf/dispatch [:dropdown-selection (:value %)])
-               :label (get (model/value->label model/items) tx-type)}]))
+(defn language-dropdown [tx-type]
+  [dropdown {:items model/items
+             :selected tx-type
+             :on-click #(rf/dispatch [:dropdown-selection (:value %)])
+             :label (get (model/value->label model/items) tx-type)}])
 
-(defn spinner [] [:div "Loading..."])
+(defn spinner [] [:div "Loading..."]) ;; todo spinners spin
 
 (defn display-error [{:keys [exception message data]}]
   [:div {:class "flex flex-col gap-2"}
@@ -35,7 +34,7 @@
         "Data:"]
        [:p (pr-str data)]])]])
 
-(defn display-table [results type]
+(defn display-table [results tx-type]
   (when results
     [:table {:class "table-auto w-full"}
      [:thead
@@ -50,7 +49,7 @@
          (for [[ii value] (map-indexed vector row)]
            ^{:key (str "row-" i " col-" ii)}
            [:td {:class "text-left p-4"}
-            (case type
+            (case @tx-type
               :xtql
               [hl/code {:language "clojure"}
                (pr-str value)]
@@ -75,19 +74,21 @@
     [:> PlayIcon {:class "h-5 w-5"}]]])
 
 (defn copy-button []
-  (let [copy-tick @(rf/subscribe [:copy-tick])]
-    [:div {:class (str "p-2 flex flex-row gap-1 items-center select-none"
-                       (when-not copy-tick
-                         " hover:bg-gray-300 cursor-pointer"))
-           :disabled copy-tick
-           :on-click #(rf/dispatch-sync [:copy-url])}
-     (if-not copy-tick
-       [:<>
-        "Copy URL"
-        [:> BookmarkIcon {:class "h-5 w-5"}]]
-       [:<>
-        "Copied!"
-        [:> CheckCircleIcon {:class "h-5 w-5"}]])]))
+  (let [copy-tick (rf/subscribe [:copy-tick])]
+    (fn []
+      [:div {:class (str "p-2 flex flex-row gap-1 items-center select-none"
+                         (when-not @copy-tick
+                           " hover:bg-gray-300 cursor-pointer"))
+             :disabled @copy-tick
+             :on-click #(rf/dispatch-sync [:copy-url])}
+
+       (if-not @copy-tick
+         [:<>
+          "Copy URL"
+          [:> BookmarkIcon {:class "h-5 w-5"}]]
+         [:<>
+          "Copied!"
+          [:> CheckCircleIcon {:class "h-5 w-5"}]])])))
 
 (def logo
   [:a {:href "/"}
@@ -96,7 +97,7 @@
            :src "/public/images/xtdb-full-logo.svg"}]
     [title "Play"]]])
 
-(defn header []
+(defn header [tx-type]
   [:header {:class "sticky top-0 z-50 bg-gray-200 py-2 px-4"}
    [:div {:class "container mx-auto flex flex-col md:flex-row items-center gap-1"}
     [:div {:class "w-full flex flex-row items-center gap-4"}
@@ -106,7 +107,7 @@
     [:div {:class "max-md:hidden flex-grow"}]
     [:div {:class "w-full flex flex-row items-center gap-1 md:justify-end"}
      [:div {:class "md:hidden flex-grow"}]
-     [language-dropdown]
+     [language-dropdown tx-type]
      [copy-button]
      [run-button]]]])
 
@@ -122,8 +123,10 @@
               :on-click #(swap! expanded? not)}
         (if-not @expanded?
           ;; todo, this can be nicer.
-          [:p {:class "fa-regular fa-question-circle"}
-           " You are in beta mode. Click here to find out more."]
+
+          [:div {:class "flex items-center gap-1"}
+           "You are in beta mode."
+           [:> QuestionMarkCircleIcon {:class "h-5 w-5"}]]
           [:p beta-copy])]])))
 
 (defn reset-system-time-button [id]
@@ -155,7 +158,7 @@
       [reset-system-time-button id]])
    [editor {:class "border md:flex-grow min-h-36"
             :source txs
-            :on-change #(rf/dispatch [:fx [[:dispatch [::tx-batch/assoc id :txs %]]
+            :on-blur #(rf/dispatch [:fx [[:dispatch [::tx-batch/assoc id :txs %]]
                                            [:dispatch [:update-url]]]])}]])
 
 (defn multiple-transactions [{:keys [editor]} tx-batches]
@@ -177,7 +180,7 @@
                                                     [:dispatch [:update-url]]]])}]]
       [editor {:class "border md:flex-grow min-h-36"
                :source txs
-               :on-change #(rf/dispatch [:fx [[:dispatch [::tx-batch/assoc id :txs %]]
+               :on-blur #(rf/dispatch [:fx [[:dispatch [::tx-batch/assoc id :txs %]]
                                               [:dispatch [:update-url]]]])}]])])
 
 (defn transactions [{:keys [editor]}]
@@ -205,53 +208,53 @@
    [:h2 "Query:"]
    [editor {:class "md:flex-grow h-full min-h-36 border"
             :source @(rf/subscribe [:query])
-            :on-change #(rf/dispatch [:fx [[:dispatch [:set-query %]]
+            :on-blur #(rf/dispatch [:fx [[:dispatch [:set-query %]]
                                            [:dispatch [:update-url]]]])}]])
 
 (def ^:private initial-message [:p {:class "text-gray-400"} "Enter a query to see results"])
 (def ^:private no-results-message "No results returned")
 (defn- empty-rows-message [results] (str (count results) " empty row(s) returned"))
 
 (defn results []
-  [:section {:class "md:h-1/2 mx-4 flex flex-1 flex-col"}
-   [:h2 "Results:"]
-   [:div {:class "grow min-h-0 border p-2 overflow-auto"}
-    (if @(rf/subscribe [::run/loading?])
-      [spinner]
-      (let [{::run/keys [results failure response?]} @(rf/subscribe [::run/results-or-failure])]
-        (if failure
-          [display-error failure]
-          (cond
-            (not response?) initial-message
-            (empty? results) no-results-message
-            (every? empty? results) (empty-rows-message results)
-            :else
-            [display-table results @(rf/subscribe [:get-type])]))))]])
+  (let [tx-type (rf/subscribe [:get-type])
+        loading? (rf/subscribe [::run/loading?])
+        results-or-failure (rf/subscribe [::run/results-or-failure])]
+    (fn []
+      [:section {:class "md:h-1/2 mx-4 flex flex-1 flex-col"}
+       [:h2 "Results:"]
+       [:div {:class "grow min-h-0 border p-2 overflow-auto"}
+        (if @loading?
+          [spinner]
+          (let [{::run/keys [results failure response?]} @results-or-failure]
+            (if failure
+              [display-error failure]
+              (cond
+                (not response?) initial-message
+                (empty? results) no-results-message
+                (every? empty? results) (empty-rows-message results)
+                :else
+                [display-table results tx-type]))))]])))
+
+(def ^:private mobile-gap [:hr {:class "md:hidden"}])
 
 (defn app []
-  (let [tx-type (rf/subscribe [:get-type])]
+  (let [tx-type (rf/subscribe [:get-type])
+        loading? (rf/subscribe [::run/loading?])
+        results? (rf/subscribe [::run/results?])]
     (fn []
       [:div {:class "flex flex-col h-dvh"}
-       [header]
-       ;; overflow-hidden fixes a bug where if an editor would have content that goes off the
-       ;; screen the whole page would scroll.
+       [header @tx-type]
+       ;; overflow-hidden fixes a bug where if an editor would have content that
+       ;; goes off the screen the whole page would scroll.
        [:div {:class "py-2 flex-grow md:overflow-hidden h-full flex flex-col gap-2"}
         [:section {:class "md:h-1/2 flex flex-col md:flex-row flex-1 gap-2"}
-         (let [editor (case @tx-type
-                        :xtql
-                        editor/clj-editor
-                        ;; default
-                        editor/sql-editor)]
+         (let [ctx {:editor (editor/default-editor @tx-type)}]
            [:<>
-            [transactions {:editor editor}]
-            [:hr {:class "md:hidden"}]
-            [query {:editor editor}]
-            [:div {:class "md:hidden flex flex-col items-center"}
-             [run-button]]])]
-        (when (or @(rf/subscribe [::run/loading?])
-                  @(rf/subscribe [::run/results?]))
-          [:<>
-           [:hr {:class "md:hidden"}]
-           [results]])]
+            [transactions ctx]
+            mobile-gap
+            [query ctx]
+            mobile-gap])]
+        (when (or @loading? @results?)
+          [results])]
        (when (= :sql-beta @tx-type)
          [beta-banner])])))