UI tweaks for row show/hiding

- Make whole row clickable
- Remove cursor pointer: https://medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b
- Add hover effect for hovering over a row

src/day8/re_frame/trace.cljs

@@ -153,6 +153,9 @@
                         (:show-all? @trace-detail-expansions))
             #_#__ (js/console.log (devtools/header-api-call tags))]
         (list [:tr {:key      id
+                    :on-click (fn [ev]
+                                (swap! trace-detail-expansions update-in [:overrides id]
+                                       #(if show-row? false (not %))))
                     :style    {:color (case op-type
                                         :sub/create "green"
                                         :sub/run "#fd701e"
@@ -160,10 +163,8 @@
                                         :render "purple"
                                         :re-frame.router/fsm-trigger "#fd701e"
                                         nil)}}
-               [:td {:style (merge row-style {:cursor "pointer"})
-                     :on-click #(swap! trace-detail-expansions update-in [:overrides id]
-                                       (fn [bool] (if show-row? false (not bool))))}
-                (if show-row? "▼" "▶")]
+               [:td {:style row-style}
+                [:button (if show-row? "▼" "▶")]]
                [:td {:style row-style} (str op-type)]
                [:td {:style row-style} (if (= PersistentVector (type (js->clj operation)))
                                          (second operation)
@@ -232,8 +233,10 @@
             [:thead>tr
              [:th [:button.text-button
                    {:style {:cursor "pointer"}
-                    :on-click (fn [e]
+                    :on-click (fn [ev]
+                                ;; Always reset expansions
                                 (swap! trace-detail-expansions assoc :overrides {})
+                                ;; Then toggle :show-all?
                                 (swap! trace-detail-expansions update :show-all? not))}
                    (if (:show-all? @trace-detail-expansions) "-" "+")]]
              [:th "operations"]

src/day8/re_frame/trace/styles.cljs

@@ -9,6 +9,11 @@
 #--re-frame-trace-- tbody {
   color: #aaa;
 }
+#--re-frame-trace-- tr:hover {
+  transition: all 0.1s ease-out;
+  background: aliceblue;
+  filter: brightness(90%);
+}
 #--re-frame-trace-- tr:nth-child(even) {
   background: aliceblue;
 }