 
 (defn designer-init []
   (layout
-    [:div.container-fluid.row {:id "designer-container" :style {:min-height "600px"}}
+    [:div.container-fluid.row
+     {:id "designer-container"
+      :style {:min-height "600px"}}
      [:div.row-fluid.full-height
       (init-left-menu)
       (init-center)

                  :padding "15px"
                  :width "100%"
                  :height "calc(100% - 22px)"
                  :display (get-css-display-value @measure-or-dimensions-dragged?)}}
    "Drop Here"]])

(defn init-center-rows-container []
  [:div {:style {:height "50%" :position "relative"}
          }
    [:div {:style {:border-bottom "solid 1px white" :height "22px"}}
     "Rows :"]
    [:div
     (for [m @controller/selected-rows]
       [:div.white-border-top {:style {:padding "2px 4px"}} (format-measure-dimension m)
        [:a {:href "#"
             :on-click
             #(do
                (swap! controller/selected-rows set/difference #{m})
                (.preventDefault %))
             :style {:float "right"
                     :font-weight "bold"}}
            "X"]])
     [:div.white-border-top]]
    [:div  {:id "row-aggregate-holder"
            :style {:position "absolute"
                    :background-color "white"
                    :top "22px"
                    :margin "0"
                    :width "100%"
                    :height "calc(100% - 22px)"
                    :display (get-css-display-value @measure-or-dimensions-dragged?)}}
     (for [aggr @controller/aggregates]
       [:div.white-border
        {:style {:padding "10px"}
         :on-drag-enter
         #(do 
            (.preventDefault %)
            (set! (.-effectAllowed (.-dataTransfer %)) "copy")
            (.add (-> % .-target .-classList) "highlighted"))
         :on-drag-leave
         #(do
            (.preventDefault %)
            (.remove (-> % .-target .-classList) "highlighted"))
         :on-drop
         #(let [dt (.-dataTransfer %)
                t (.getData dt "type")
                val (.getData dt "value")
                dVal (.getData dt "displayValue")
                ]
            (do
              (swap! controller/selected-rows conj {:value val :displayValue dVal :aggregate aggr})
              (.remove (-> % .-target .-classList) "highlighted")))
         :on-drag-over
         #(.preventDefault %)} aggr])]])

(defn init-center-plot-area []
  [:div.col-xs-10.full-height.white-border {:id "designer-center-plot-area"} @controller/graph])

(defn init-center []
  [:div.col-xs-10.full-height.white-border {:id "designer-center"}
   (init-center-columns-container)
   [:div.row.white-border {:style {:height "calc(100% - 40px)"}}
    [:div.col-xs-2.full-height.white-border 
     {:id "designer-center-rows-container" :style {:padding "0"}}
     (init-center-rows-container)
     (init-center-rows-container-series-grouping)]

   [:div {:style {:height "22px"}} "Series Grouping"]
   [:div
    (for [gr @controller/selected-groupings]
      [:div.white-border-top
       {:style {:padding "2px 4px"}}
       (format-measure-dimension gr)
       [:a {:href "#"
            :style {:float "right" :font-weight "bold"}
            :on-click
            #(do (swap! controller/selected-groupings
                        set/difference
                        #{gr})
               (.preventDefault %))}
        "X"]])
    [:div.white-border-top]]
   [:div {:id "series-grouping-drop-place"
          :on-drag-enter
          #(do
             (.preventDefault %)
             (set! (.-effectAllowed (.-dataTransfer %)) "copy")
             (.add (-> % .-target .-classList) "highlighted"))
