                              :justifyContent "center"
                              :display "flex"}}
         (if (:showing? @db)
-          (render-search-box (:search @db ""))
+          (@render-search-box (:search @db ""))
           (h "span" #js{}))
         (h "button" #js{:style #js{:cursor "pointer"
                                    :color (if (:frozen-at @db) "orange" "green")}

       (dotimes [i last-to-start]
         (let [lg-ev (aget logs (- last-to-start i 1))]
           (when ^boolean (filter-fn lg-ev)
             (.push aout (render-log-event lg-ev)))))
       aout)))

(def render-search-box
  (let [search-box-id "klang-search"]
    (component #js{:name "KlangSearch"
                   :key-fn (fn [props] (:id props))
                   :did-mount (fn [state]
                                (let [el (js/document.getElementById search-box-id)]
                                  (.select el))
                                state)}
               (fn [default-value]
                 (h "input" #js{:style #js{:background "#000"
                                           :color "white"
                                           :width "350px"}
                                :id search-box-id
                                :tabIndex 1
                                :onChange (fn [e] (!! assoc :search (.. e -target -value)))
                                :autoFocus true
                                :type "text"
                                :defaultValue default-value
                                :placeholder "Search"})))))

(defn- render-overlay
  "Renders the entire log message overlay in a div when :showing? is true."

          (js/document.body.appendChild newdom)
          newdom))))

(def h js/React.createElement)

(defn possibly-set-lifecycle!
  "This is all done for performance... Smaller and more used functions can easier get optimized."
