       {:width wb/viewport-width
        :height 20}
       [:g {:transform (str "translate(" translate-x ", 0)")}
-       (vertical-ticks)]])))
+       (horizontal-rule-ticks zoom)]])))
 
 (def horizontal-rule
   (mx/component

    :name "horizontal-rule"
    :mixins [mx/static rum/reactive]}))


;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Horizontal Rule
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

(defn horizontal-tick-render
  [own value]
  (let [big-ticks-mod (big-ticks-mod 1)
        mid-ticks-mod (mid-ticks-mod 1)
        big-step? (< (mod value big-ticks-mod) step-size)
        mid-step? (< (mod value mid-ticks-mod) step-size)
        pos (+ value
               wb/canvas-start-x
               wb/canvas-scroll-padding)
        pos (* pos zoom)]
  (cond
    big-step?
    (html
     [:g {:key pos}
      [:line {:y1 pos
              :y2 pos
              :x1 5
              :x2 step-padding
              :stroke "#9da2a6"}]
      [:text {:y pos
              :x 5
              :transform (str/format "rotate(90 0 %s)" pos)
              :fill "#9da2a6"
              :style {:font-size "12px"}}
       value]])

    mid-step?
    (html
     [:line {:key pos
             :y1 pos
             :y2 pos
             :x1 10
             :x2 step-padding
             :stroke "#9da2a6"}])

    :else
    (html
     [:line {:key pos
             :y1 pos
             :y2 pos
             :x1 15
             :x2 step-padding
             :stroke "#9da2a6"}]))))

(def ^:const horizontal-tick
  (mx/component
   {:render horizontal-tick-render
    :name "horizontal-tick-render"
    :mixins [mx/static]}))

(defn- horizontal-ticks-render
  [own]
  (html
   [:g
    (for [value +ticks+]
      (-> (horizontal-tick value)
          (rum/with-key value)))]))

(def ^:const horizontal-ticks
  (mx/component
   {:render horizontal-ticks-render
    :name "horizontal-ticks-render"
    :mixins [mx/static]}))

(defn vertical-rule-render
  [own sidebar?]
  (let [scroll (rum/react wb/scroll-a)
        scroll-y (:y scroll)
        translate-y (- (- wb/canvas-scroll-padding) (:y scroll))]

       :height wb/viewport-height}

      [:g {:transform (str  "translate(0, " translate-y ")")}
       (vertical-rule-ticks zoom)]
      [:rect {:x 0
              :y 0
              :height 20
