   {:status  status
    :outcome status})
 
+
 ;;; Elements of the visualization
+(defn highlight-selected-container! [step-data]
+  (let [fade-value #(if (= (.-textContent %1) (str (aget %2 "index"))) 1 0.1)]
+    (-> (.select js/d3 ".y-axis")
+        (.selectAll ".tick")
+        (.selectAll "text")
+        (.transition)
+        (.duration 200)
+        (.attr "stroke-opacity" #(this-as element (fade-value element step-data)))
+        (.attr "fill-opacity"   #(this-as element (fade-value element step-data))))))
+
+(defn highlight-selected-step! [step selected]
+  (-> step
+      (.selectAll "rect")
+      (.transition)
+      (.duration 200)
+      (.attr "fill-opacity" #(this-as element (if (= element selected) 1 0.5)))))
+
+(defn reset-selected! [step]
+  ;reset all the steps
+  (-> step
+      (.selectAll "rect")
+      (.transition)
+      (.duration 500)
+      (.attr "fill-opacity" 1))
+
+  ;reset all container labels
+  (-> (.select js/d3 ".y-axis")
+      (.selectAll ".tick")
+      (.selectAll "text")
+      (.transition)
+      (.duration 200)
+      (.attr "stroke-opacity" 1)
+      (.attr "fill-opacity"   1)))
+
 (defn draw-containers! [x-scale step]
   (let [step-length         #(- (scaled-time x-scale % "end_time")
                                 (scaled-time x-scale % "start_time"))
-        step-start-pos      #(x-scale (js/Date. (aget % "start_time")))
-        highlight-selected! (fn [_] (this-as
-                                      selected
-                                      (-> step
-                                          (.selectAll "rect")
-                                          (.transition)
-                                          (.duration 200)
-                                          (.attr "fill-opacity" #(this-as element (if (= element selected) 1 0.5))))))
-        reset-selected!    #(-> step
-                                (.selectAll "rect")
-                                (.transition)
-                                (.duration 500)
-                                (.attr "fill-opacity" 1))]
+        step-start-pos      #(x-scale (js/Date. (aget % "start_time")))]
     (-> step
         (.selectAll "rect")
           (.data #(aget % "actions"))

            (.attr "height"    container-bar-height)
            (.attr "y"         container-position)
            (.attr "x"         step-start-pos)
            (.on   "mouseover" highlight-selected!)
            (.on   "mouseout"  reset-selected!)
          (.append "title")
            (.text #(gstring/format "%s (%s)" (aget % "name") (aget % "index"))))))


(ns frontend.components.build-timings
  (:require [om.core :as om :include-macros true]
            [goog.string :as gstring]
            [frontend.datetime :as datetime]
            [frontend.models.build :as build])
  (:require-macros [frontend.utils :refer [html]]))

