               (watch [:response series-name])
               (cb data))))
 
-(defn tsplot-fetch-and-draw [ canvas series-name ]
+(defn tsplot-fetch-and-draw [ canvas series-name width ]
   (let [ ctx (.getContext canvas "2d")]
     (go
-      (tsplot/draw ctx 1024 180 [])
-      (tsplot/draw ctx 1024 180 (<! (<<< fetch-series-data
+      (tsplot/draw ctx width 180 [])
+#_      (tsplot/draw ctx width 180 (<! (<<< fetch-series-data
                                          series-name
                                          @query-window-secs))))))
 
-(defn series-tsplot [ series ]
+(defn dom-width [ node ]
+  (if node
+    (.-clientWidth node)
+    1024))
+
+(defn series-tsplot [ series initial-width ]
+  (watch [:series-tsplot series initial-width ])
   (let [ series-state (atom { :series-name (:name series)} ) ]
     (reagent/create-class
      {:display-name (str "series-tsplot-" (:name series))
       :component-did-update
       (fn [ this ]
-        (watch :component-did-update)
-        (tsplot-fetch-and-draw (reagent/dom-node this) (:name series)))
+        (watch [:update (dom-width (reagent/dom-node this))])
+        (tsplot-fetch-and-draw (reagent/dom-node this) (:name series) initial-width))
       
       :component-did-mount
       (fn [ this ]
-        (watch :component-did-mount)
-        (tsplot-fetch-and-draw (reagent/dom-node this) (:name series)))
+        (watch [:mount (dom-width (reagent/dom-node this))])
+        (tsplot-fetch-and-draw (reagent/dom-node this) (:name series) initial-width))
+
+      :reagent-render
+      (fn [ width ]
+        (watch [:tsplot-render width :args args])
+        @query-window-secs
+        @series-state
+                @window-width
+        [:canvas { :width width :height 180}])})))
+
+(defn series-pane [ series ]
+  (let [ pane-state (atom {})]
+    (reagent/create-class
+
+     {:component-did-mount
+      (fn [ this ]
+        (swap! pane-state assoc :dom-node (reagent/dom-node this)))
 
       :reagent-render
       (fn []
-        @query-window-secs
-        @series-state
-        [:canvas { :width 1024 :height 180}])})))
-
-(defn series-pane [ series ]
-  (watch :render-series-pane)
-  [:div.series-pane
-   [:div.series-pane-header
-    [:span.series-name (:name series)]]
-   [series-tsplot series]])
+        (watch :series-pane-reagent-render (dom-width (:dom-node @pane-state)))
+        @window-width
+        [:div.series-pane
+         [:div.series-pane-header
+          [:span.series-name (:name series)]]
+         [series-tsplot series (dom-width (:dom-node @pane-state))]])})))
 
 (defn series-list [ ]
   [:div

      [:input {:value (:text @state)
               :onChange #(swap! state assoc :text (.. % -target -value))
               :onKeyDown #(do
                             (watch [:on-key-down (.-key %)])
                             (when (= (.-key %) "Enter")
                                 (on-enter (:text @state))))} ])))

(defn header [ ]
  (watch :render-header)
  [:div.header
   [:span.left
    "Metlog"
    [input-field #(end-edit % dashboard-state)]]])

(defn dashboard [ ]
  (watch :render-dashboard)
  [:div
   [header]
   [:div.content
    [series-list]]])

(defn ^:export run []
  (reagent/render [dashboard]
                  (js/document.getElementById "metlog"))
  (go
    (swap! dashboard-state assoc :series
           (vec (map (fn [ series-name ] {:name series-name})


(defn end-edit [ text state ]
  (let [ qws (js/parseInt text) ]
    (reset! query-window-secs qws)))

(defn input-field [ on-enter ]
