 (ns metlog-client.metlog
   (:require-macros [cljs.core.async.macros :refer [ go ]]
                    [metlog-client.macros :refer [ watch ]])
-  (:require [reagent.core :as reagent :refer [atom]]
-            [ajax.core :refer [GET]]
+  (:require [reagent.core :as reagent]
+            [ajax.core :as ajax]
             [cljs.reader :as reader]
             [cljs.core.async :refer [put! close! chan <!]]
             [metlog-client.tsplot :as tsplot]))
 
-(defonce query-window-secs (atom (* 3600 24)))
+(defonce query-window-secs (reagent/atom (* 3600 24)))
 
-(def dashboard-state (atom {:series [] :text ""}))
+(def dashboard-state (reagent/atom {:series [] :text ""}))
 
-(def window-width (atom 1024))
+(def window-width (reagent/atom nil))
 
 (defn <<< [f & args]
   (let [c (chan)]

      :reagent-render
      (fn [ ]
        @window-width
        [:canvas { :width (dom-width (:dom-node @series-state)) :height 180}])})))

(defn series-pane [ series ]
  [:div.series-pane

    c))

(defn ajax-get [ url callback ]
  (ajax/GET url {:handler callback
                 :error-handler (fn [ resp ]
                                  (.log js/console (str "HTTP error, url: " url " resp: " resp)))}))

(defn fetch-series-names [ cb ]
  (ajax-get "/series-names" cb))

(defn fetch-series-data [ series-name query-window-secs cb ]
  (ajax-get (str "/data/" series-name "?query-window-secs=" query-window-secs) cb))

(def default-tsplot-width 1024)
(def default-tsplot-height 180)

(defn dom-node-width
  ([ node default-width ]
   (if node
     (.-clientWidth node)
     default-width))
  ([ node ]
   (dom-node-width node nil)))

(defn dom-node-height
  ([ node default-height ]
   (if node
     (.-clientHeight node)
     default-height))
  ([ node ]
   (dom-node-height node nil)))

(defn tsplot-draw [ canvas series-data ]
  (let [ ctx (.getContext canvas "2d")]
    (tsplot/draw ctx (dom-node-width canvas) (dom-node-height canvas) series-data)))

(defn series-tsplot [ series ]
  (let [ series-state (reagent/atom { }) ]
    (reagent/create-class
     {:display-name (str "series-tsplot-" series)
      :component-did-update
      (fn [ this ]
        (tsplot-draw (reagent/dom-node this) (:series-data @series-state)))
      
      :component-did-mount
      (fn [ this ]
