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

  (concat (range (- (/ wb/viewport-width 1)) 0 step-size)
          (range 0 (/ wb/viewport-width 1) step-size)))

(def ^:const +rule-padding+ 20)

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

(defn vertical-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 +rule-padding+
               wb/canvas-start-x
               wb/canvas-scroll-padding)
        pos (* pos zoom)]
    (cond
      big-step?
      (html
       [:g {:key value}
        [:line {:x1 pos
                :x2 pos
                :y1 5
                :y2 step-padding
                :stroke "#9da2a6"}]
        [:text {:x (+ pos 2)
                :y 13
                :fill "#9da2a6"
                :style {:font-size "12px"}}
         value]])

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

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

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

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

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

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

       :height wb/viewport-height}

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