Add help slider

src/cljs/xt_play/components/slider.cljs

@@ -0,0 +1,85 @@
+(ns xt-play.components.slider
+  (:require [re-frame.core :as rf]
+            [clojure.string :as str]))
+
+(rf/reg-event-db
+ ::open
+ (fn [db [_ id]]
+   ;; only one open at a time
+   (assoc db ::open id)))
+
+(rf/reg-sub
+ ::open
+ :-> ::open)
+
+(rf/reg-event-fx
+ ::toggle
+ (fn [{:keys [db]} [_ id]]
+   {:dispatch (if (= id (::open db))
+                [::close]
+                [::open id])}))
+
+(rf/reg-event-db
+ ::close
+ (fn [db]
+   (dissoc db ::open)))
+
+(defn- close [_] (rf/dispatch [::close]))
+
+(def close-btn
+  [:div {:class ["absolute" "right-5" "top-0" "-ml-8" "flex"
+                 "pr-2" "pt-4" "sm:-ml-10" "sm:pr-4"]}
+   [:button {:type "button"
+             :on-click close
+             :class ["relative" "rounded-md" "text-gray-400" "hover:text-gray-500"
+                     "hover:ring-gray-500" "hover:ring-2"
+                     "focus:outline-none" "focus:ring-2" "focus:ring-white"]}
+    [:span {:class "absolute -inset-2.5"}]
+    [:span {:class "sr-only"} "Close panel"]
+    [:svg {:class "size-6"
+           :fill "none"
+           :viewBox "0 0 24 24"
+           :stroke-width "1.5"
+           :stroke "currentColor"
+           :aria-hidden "true"
+           :data-slot "icon"}
+     [:path {:stroke-linecap "round"
+             :stroke-linejoin "round"
+             :d "M6 18 18 6M6 6l12 12"}]]]])
+
+(def backdrop
+  [:div {:class "fixed inset-0 bg-gray-500/75 transition-opacity"
+         :aria-hidden "true"
+         :on-click close}])
+
+(defn heading [title]
+  [:h1 {:class "text-2xl font-semibold text-gray-900 "
+        :id "slide-over-title"}
+   (str/capitalize title)])
+
+(defn content [body]
+  [:div {:class "relative mt-6 flex-1"}
+         body])
+
+(defn slide-over-panel [{:keys [title body backdrop?]}]
+  [:div {:class "relative  z-[100] bg-blue"
+         :aria-labelledby "slide-over-title"
+         :role "dialog"
+         :aria-modal "true"}
+   (when backdrop? backdrop)
+   [:div {:class "absolute overflow-hidden"}
+    [:div {:class "absolute inset-0 overflow-hidden"}
+     [:div {:class "fixed inset-y-0 right-0 flex max-w-full pl-10"}
+      [:div {:class "relative w-screen max-w-xl md:max-w-2xl"}
+       [:div {:class ["px-4 sm:px-6" "flex h-full flex-col overflow-y-scroll bg-white py-6 shadow-xl"]}
+        close-btn
+        [heading title]
+        [content body]]]]]]])
+
+(defn view [content]
+  (when @(rf/subscribe [::open])
+    [slide-over-panel content]))
+
+(comment
+  (rf/dispatch [::open :help])
+  (rf/dispatch [::close]))

src/cljs/xt_play/view.cljs

@@ -13,7 +13,8 @@
             [xt-play.model.client :as model]
             [xt-play.model.interval :as i]
             [xt-play.model.run :as run]
-            [xt-play.model.tx-batch :as tx-batch]))
+            [xt-play.model.tx-batch :as tx-batch]
+            [xt-play.views.help :as help]))
 
 ;; Todo
 ;; - pull out components to own ns
@@ -127,7 +128,8 @@
     [:div {:class "w-full flex flex-row items-center gap-4"}
      logo
      [:span {:class "text-sm text-gray-400"}
-      @(rf/subscribe [:version])]]
+      @(rf/subscribe [:version])]
+     [help/slider]]
     [:div {:class "max-md:hidden flex-grow"}]
     [:div {:class "w-full flex flex-row items-center gap-1 md:justify-end"}
      [language-dropdown tx-type]
@@ -209,8 +211,8 @@
                      ;; stop editor expanding beyond the viewport
                      "md:max-w-[48vw] lg:max-w-[49vw]")}
    [:h2 "Transactions:"]
-   ; NOTE: The min-h-0 somehow makes sure the editor doesn't
-   ;       overflow the flex container
+                                        ; NOTE: The min-h-0 somehow makes sure the editor doesn't
+                                        ;       overflow the flex container
    [:div {:class "grow min-h-0 overflow-y-auto flex flex-col gap-2"}
     (let [tx-batches @(rf/subscribe [::tx-batch/id-batch-pairs])]
       (if (= 1 (count tx-batches))

src/cljs/xt_play/views/help.cljs

@@ -0,0 +1,88 @@
+(ns xt-play.views.help
+  (:require ["@heroicons/react/24/outline" :refer [QuestionMarkCircleIcon]]
+            [re-frame.core :as rf]
+            [xt-play.components.slider :as s]))
+
+(defn- mono [t] [:span.font-mono.bg-gray-100.text-sm.p-1.rounded t])
+(defn- link [t [href stay-on-page?]]
+  [:a.hover:underline.text-orange-700.font-medium.cursor-pointer
+   (merge {:href href}
+          (when-not stay-on-page? {:target "_blank"}))
+   t])
+
+(defn- subheading [& t]
+  [:h2 {:class "pt-2 text-xl font-semibold text-gray-900"}
+   t
+   [:hr]])
+
+(defn- paragraph [& t]
+  [:p {:class "py-2"} t])
+
+(def help-body
+  [:div
+   [:p {:class "text-lg text-gray-900 my-1"}
+    "Welcome to xt-fiddle, a playground for "
+    [link "xtdb" ["https://docs.xtdb.com/index.html"]] "."]
+   [subheading "Usage"]
+
+   [paragraph
+    "Below the navbar you'll see two panels: " [mono "transactions"] " and " [mono "query"] "."]
+
+   [paragraph
+    "In the " [mono "transactions"] " panel you can write colon (" [mono ";"] ") separated "
+    [link "transactions" ["https://docs.xtdb.com/reference/main/sql/txs"]]
+    " that will all be executed at the same "
+    [link "system time" ["https://docs.xtdb.com/quickstart/sql-overview.html#system-time-columns-automatic-time-versioning-of-rows-without-audit-tables"]]
+    ". To execute transactions at a different or multiple system times then click the " [mono "+"] " button and adjust the date above each panel. "
+    "Make sure that each system time is greater or equal to the previous one, just like when you execute transactions in real time!"]
+
+   [paragraph
+    "In the " [mono "query"] " panel you can write a single " [link "query" ["https://docs.xtdb.com/reference/main/sql/queries.html"]] [:span.italic " after "] "all the transactions have been run. "]
+
+   [paragraph
+    "You can use the " [mono "run"] " button to execute the transactions then run the query."]
+
+   [paragraph
+    "Share your current state by clicking the " [mono "copy url button"] " then share the generated url."]
+
+   [subheading "Examples"]
+   [paragraph
+    [link "Simple insert" ["/?version=2.0.0-beta3&type=sql&txs=W3sidHhzIjoiSU5TRVJUIElOVE8gcGVvcGxlIChfaWQsIG5hbWUpIFZBTFVFUyAoNiwgJ2ZyZWQnKSIsInN5c3RlbS10aW1lIjoiMjAyNC0wMS0wMVQwMDowMDowMC4wMDBaIn1d&query=U0VMRUNUICogRlJPTSBwZW9wbGU%3D" true]]]
+
+   [paragraph
+    [link "Nested data" ["?version=2.0.0-beta3&type=sql&txs=W3sidHhzIjoiSU5TRVJUIElOVE8gcGVvcGxlIChfaWQsIG5hbWUsIGxpa2VzKVxuVkFMVUVTICg5LCAnYm9iJywgWydmaXNoaW5nJywgMy4xNCwge25lc3RlZDonZGF0YSd9XSkiLCJzeXN0ZW0tdGltZSI6bnVsbH1d&query=U0VMRUNUICogRlJPTSBwZW9wbGU%3D" true]]]
+
+   [paragraph
+    [link "Record syntax" ["/?version=2.0.0-beta3&type=sql&txs=W3sidHhzIjoiSU5TRVJUIElOVE8gcGVvcGxlXG5SRUNPUkRTIHtfaWQ6IDYsXG4gICAgICAgICBuYW1lOiAnZnJlZCcsXG4gICAgICAgICBpbmZvOiB7Y29udGFjdDogW3tsb2M6ICdob21lJyxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgIHRlbDogJzEyMyd9LFxuICAgICAgICAgICAgICAgICAgICAgICAgICB7bG9jOiAnd29yaycsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICB0ZWw6ICc0NTYnLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgcmVnaXN0ZXJlZDogREFURSAnMjAyNC0wMS0wMSd9XX19Iiwic3lzdGVtLXRpbWUiOm51bGx9XQ%3D%3D&query=U0VMRUNUIChwZW9wbGUuaW5mbykuY29udGFjdFsyXS50ZWwKRlJPTSBwZW9wbGUKV0hFUkUgcGVvcGxlLm5hbWUgPSAnZnJlZCc%3D" true]]]
+
+   [paragraph
+    [link "Transaction log" ["/?version=2.0.0-beta3&type=sql&txs=W3sidHhzIjoiSU5TRVJUIElOVE8gcGVvcGxlIChfaWQsIG5hbWUpIFZBTFVFUyAoNiwgJ2ZyZWQnKSIsInN5c3RlbS10aW1lIjoiMjAyNC0wMS0wMVQwMDowMDowMC4wMDBaIn0seyJ0eHMiOiJJTlNFUlQgSU5UTyBwZW9wbGUgKF9pZCwgbmFtZSwgbGlrZXMpXG5WQUxVRVMgKDksICdib2InLCBbJ2Zpc2hpbmcnLCAzLjE0LCB7bmVzdGVkOidkYXRhJ31dKSIsInN5c3RlbS10aW1lIjoiMjAyNC0wMS0wMlQwMDowMDowMC4wMDBaIn0seyJ0eHMiOiJJTlNFUlQgSU5UTyBwZW9wbGVcblJFQ09SRFMge19pZDogNixcbiAgICAgICAgIG5hbWU6ICdmcmVkJyxcbiAgICAgICAgIGluZm86IHtjb250YWN0OiBbe2xvYzogJ2hvbWUnLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgdGVsOiAnMTIzJ30sXG4gICAgICAgICAgICAgICAgICAgICAgICAgIHtsb2M6ICd3b3JrJyxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgIHRlbDogJzQ1NicsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICByZWdpc3RlcmVkOiBEQVRFICcyMDI0LTAxLTAxJ31dfX0iLCJzeXN0ZW0tdGltZSI6IjIwMjQtMDEtMDNUMDA6MDA6MDAuMDAwWiJ9XQ%3D%3D&query=U0VMRUNUICogRlJPTSB4dC50eHMgT1JERVIgQlkgX2lkIERFU0MgTElNSVQgMjAgLS0gInJlY2VudCB0cmFuc2FjdGlvbnMi" true]]]
+
+   [paragraph
+    [link "Time travel" ["/?version=2.0.0-beta3&type=sql&txs=W3sidHhzIjoiSU5TRVJUIElOVE8gcGVvcGxlIChfaWQsIG5hbWUpIFZBTFVFUyAoNiwgJ2ZyZWQnKSIsInN5c3RlbS10aW1lIjoiMjAyNC0wMS0wMVQwMDowMDowMC4wMDBaIn0seyJ0eHMiOiJJTlNFUlQgSU5UTyBwZW9wbGUgKF9pZCwgbmFtZSwgbGlrZXMpXG5WQUxVRVMgKDksICdib2InLCBbJ2Zpc2hpbmcnLCAzLjE0LCB7bmVzdGVkOidkYXRhJ31dKSIsInN5c3RlbS10aW1lIjoiMjAyNC0wMS0wMlQwMDowMDowMC4wMDBaIn0seyJ0eHMiOiJJTlNFUlQgSU5UTyBwZW9wbGVcblJFQ09SRFMge19pZDogNixcbiAgICAgICAgIG5hbWU6ICdmcmVkJyxcbiAgICAgICAgIGluZm86IHtjb250YWN0OiBbe2xvYzogJ2hvbWUnLFxuICAgICAgICAgICAgICAgICAgICAgICAgICAgdGVsOiAnMTIzJ30sXG4gICAgICAgICAgICAgICAgICAgICAgICAgIHtsb2M6ICd3b3JrJyxcbiAgICAgICAgICAgICAgICAgICAgICAgICAgIHRlbDogJzQ1NicsXG4gICAgICAgICAgICAgICAgICAgICAgICAgICByZWdpc3RlcmVkOiBEQVRFICcyMDI0LTAxLTAxJ31dfX0iLCJzeXN0ZW0tdGltZSI6IjIwMjQtMDEtMDNUMDA6MDA6MDAuMDAwWiJ9LHsidHhzIjoiREVMRVRFIEZST00gcGVvcGxlIFdIRVJFIG5hbWUgPSAnZnJlZCciLCJzeXN0ZW0tdGltZSI6IjIwMjQtMDEtMDRUMDA6MDA6MDAuMDAwWiJ9LHsidHhzIjoiSU5TRVJUIElOVE8gcGVvcGxlIChfaWQsIG5hbWUsIGluZm8pXG5TRUxFQ1QgX2lkLCBuYW1lLCBpbmZvXG5GUk9NIHBlb3BsZSBGT1IgQUxMIFNZU1RFTV9USU1FXG5XSEVSRSBfaWQgPSA2XG5PUkRFUiBCWSBfc3lzdGVtX3RvIERFU0NcbkxJTUlUIDEiLCJzeXN0ZW0tdGltZSI6IjIwMjQtMDEtMDVUMDA6MDA6MDAuMDAwWiJ9LHsidHhzIjoiRVJBU0UgRlJPTSBwZW9wbGUgV0hFUkUgX2lkID0gNiIsInN5c3RlbS10aW1lIjoiMjAyNC0wMS0wNlQwMDowMDowMC4wMDBaIn0seyJ0eHMiOiJJTlNFUlQgSU5UTyBwZW9wbGUgKF9pZCwgbmFtZSwgZmF2b3JpdGVfY29sb3IsIF92YWxpZF9mcm9tKVxuVkFMVUVTICgyLCAnY2Fyb2wnLCAnYmx1ZScsIERBVEUgJzIwMjMtMDEtMDEnKSIsInN5c3RlbS10aW1lIjoiMjAyNC0wMS0wN1QwMDowMDowMC4wMDBaIn0seyJ0eHMiOiJJTlNFUlQgSU5UTyBwZW9wbGUgKF9pZCwgbmFtZSwgZmF2b3JpdGVfY29sb3IsIF92YWxpZF9mcm9tKVxuVkFMVUVTICgyLCAnY2Fyb2wnLCAncmVkJywgREFURSAnMjAyMy0wOS0wMScpIiwic3lzdGVtLXRpbWUiOiIyMDI0LTAxLTA4VDAwOjAwOjAwLjAwMFoifV0%3D&query=U0VUVElORyBERUZBVUxUIFZBTElEX1RJTUUgQVMgT0YgREFURSAnMjAyMy0xMC0wMScsCiAgICAgIERFRkFVTFQgU1lTVEVNX1RJTUUgQVMgT0YgREFURSAnMjAyNC0wMS0wOCcKU0VMRUNUIG5hbWUsIGZhdm9yaXRlX2NvbG9yICwgX3ZhbGlkX2Zyb20sIF9zeXN0ZW1fZnJvbSBGUk9NIHBlb3BsZQ%3D%3D" true]]]
+
+   [subheading "Docs"]
+
+   [paragraph
+    "For more information on xtdb and tutorials, here are the " [link "docs" ["https://docs.xtdb.com/index.html"]] "."]
+
+   [paragraph
+    "Something not working as you expect with xtdb-play? Open an issue "
+    ;; todo - could template a more meaningul issue, including the session link
+    [link "here" ["https://github.com/xtdb/xt-fiddle/issues/new?template=Blank+issue"]] "."]
+
+   [paragraph
+    "Found a bug in xtdb? Open an issue "
+    ;; todo - could template a more meaningul issue, including the session link
+    [link "here" ["https://github.com/xtdb/xtdb/issues/new?template=Blank+issue"]] "."]
+
+   ;; todo - get the exact wording before spending time on formatting!
+   ])
+
+(defn slider []
+  [:<>
+   [:div {:class "cursor-pointer"
+          :on-click #(rf/dispatch [::s/toggle :help])}
+    [:> QuestionMarkCircleIcon {:class ["h-5 w-5"
+                                        "hover:text-gray-500"]}]]
+   [s/view {:title "help" :body help-body}]])