Hide uninteresting results

docs/dominoes-live.md

@@ -43,8 +43,9 @@ So, at the top we need this:
 </div>
 
 !!! Note "Live Code Fragment"
-    Above, you'll see two vertically stacked boxes. The top one contains the live code. You can edit that code, if you want. 
-    The one below shows the result of evaluating that code. In this particular case, evaluating a `ns` gives nil which is not that interesting. 
+    Above, you'll see a live code editor. You can change the code, if you want.
+    The colored box at the bottom shows the result of evaluating that code.
+    In this particular case, evaluating a `ns` gives nil which is not that interesting.
 
 ## The Data Schema
 
@@ -90,7 +91,8 @@ To send an event, call `dispatch` with the event vector as the argument.
 ```
 
 For our simple app, we do this ... 
-<div class="cm-doc">(defn dispatch-timer-event        ;; <-- defining a function
+<div class="cm-doc" data-cm-doc-result-format="pass-fail">
+(defn dispatch-timer-event        ;; <-- defining a function
   []                              ;; <-- no args
   (let [now (js/Date.)]           ;; <-- obtain the current time
     (rf/dispatch [:timer now])))  ;; <-- dispatch an event
@@ -193,7 +195,7 @@ the application, which means they return a modified version of `db`.
 
 ### :timer
 
-<div class="cm-doc">
+<div class="cm-doc" data-cm-doc-result-format="pass-fail">
 (rf/reg-event-db                 
   :timer
   (fn [db [_ new-time]]          ;; notice how we destructure the event vector
@@ -222,13 +224,12 @@ This event handler is slightly unusual because it ignores both of its arguments.
 There's nothing in the `event` vector which it needs. Nor is the existing value in 
 `db`. It just wants to plonk a completely new value into `app-db`
 
-<div class="cm-doc">
+<div class="cm-doc" data-cm-doc-result-format="pass-fail">
 (rf/reg-event-db              ;; sets up initial application state
   :initialize
   (fn [ _ _ ]                 ;; arguments not important, so use _
     {:time (js/Date.)         ;; returned value put into app-db 
      :time-color "orange"}))  ;; so the app state will be a map with two keys
-nil
 </div>
 
 
@@ -247,12 +248,11 @@ For comparison, here's how we could have written this if we **did** care about t
 
 When the user enters a new colour value (into the input field) the view will `(dispatch [:time-color-change new-colour])` (more on this below). 
 
-<div class="cm-doc">
+<div class="cm-doc" data-cm-doc-result-format="pass-fail">
 (rf/reg-event-db
   :time-color-change            
   (fn [db [_ new-color-value]]
     (assoc db :time-color new-color-value)))   ;; compute and return the new application state
-nil
 </div>
 
 Notes:

docs/src/re_frame/docs.cljs

@@ -72,24 +72,35 @@
   (str/join "\n" (cons (.-message v)
                        (sci/format-stacktrace (sci/stacktrace v)))))
 
-(defn editor-result [{:keys [return-str status] :as eval-result}]
-  [:div {:style {:white-space "pre-wrap"
-                 :margin-top "0.5rem"
-                 :font-size "0.75em"
-                 :padding "0 2px 0 2px"
-                 :background-color (if (success? eval-result) "#eeffee" "#ffeeee")
-                 :color "#444"
-                 :font-family "monospace"}}
-       return-str])
+(defn success? [eval-result] (#{:success :success-promise} (:status eval-result)))
+
+(def green-check [:span {:style {:color "green"}} "✓"])
+(def red-x [:span {:style {:color "red"}} "✗"])
+
+(defn pass-fail [pass?] (if pass? green-check red-x))
+
+(defn editor-result [{:keys [return-str] :as eval-result}
+                     & [{:keys [format]}]]
+  (let [pass? (success? eval-result)
+        format (or format :full)]
+    [:div {:style {:white-space "pre-wrap"
+                   :margin-top "0.5rem"
+                   :padding "0 0.5rem 0 0.5rem"
+                   :background-color (if pass? "#eeffee" "#ffeeee")
+                   :color "#444"
+                   :font-family "monospace"}}
+     [:span {:style {:pointer-events "none"
+                     :user-select "none"}}
+      [pass-fail pass?] " "]
+     (when (or (not pass?) (#{:full} format))
+       [:span {:style {:font-size "0.75em"}} return-str])]))
 
 (defn validation [validators {:keys [source-str status] :as eval-result}]
   (when (and status (seq validators))
     (into [:div {:style {:margin "1rem"}}] ((apply juxt validators) eval-result))))
 
-(defn success? [eval-result] (#{:success :success-promise} (:status eval-result)))
-
 (defn editor
-  [{:keys [source-str eval-result !view validators evaluable? editable? eval-on-init? on-change hover? focus?]}]
+  [{:keys [source-str eval-result !view validators evaluable? editable? eval-on-init? on-change hover? focus? result-format]}]
   (r/with-let
     [eval! (fn [] (p/let [[status return-val] (eval-str (cm-string @!view))]
                    (binding [*print-length* 20]
@@ -132,7 +143,7 @@
                           :padding 2
                           :opacity (if (or @hover? @focus?) 1 0.5)}}
          "eval"]])]
-     [editor-result @eval-result]
+     [editor-result @eval-result {:format result-format}]
      [validation validators @eval-result]
      (when @eval-result [:hr])]
     (finally (.destroy @!view))))
@@ -143,6 +154,7 @@
             :let [editable? (not (.. el -dataset -cmDocNoEdit))
                   evaluable? (not (.. el -dataset -cmDocNoEval))
                   eval-on-init? (not (.. el -dataset -cmDocNoEvalOnInit))
+                  result-format (keyword (or (.. el -dataset -cmDocResultFormat) "full"))
                   validator-els (.getElementsByClassName el "cm-doc-validator")
                   validators (into [] (comp
                                        (map #(.-innerText %))
@@ -154,6 +166,7 @@
                             :editable? editable?
                             :evaluable? evaluable?
                             :eval-on-init? eval-on-init?
+                            :result-format result-format
                             :hover? (r/atom false)
                             :focus? (r/atom false)
                             :source-str (atom (some->> (array-seq (.-childNodes el))