more WIP

ncbi-api-test/index.js

@@ -20,6 +20,7 @@ function testSearchPubmed(query) {
     });
 }
 
+
 function testSearchGene(query) {
     fetch(`${url}/esearch.fcgi?db=gene&term=${query}`)
     .then((res) => {
@@ -31,6 +32,7 @@ function testSearchGene(query) {
     });
 }
 
+
 function testLookupGeneById(ids) {
     fetch(`${url}/esummary.fcgi?db=gene&id=${String(ids)}`)
     .then(res => {

reagent-test/public/css/site.css

@@ -1,5 +1,7 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
 body {
-  font-family: 'Helvetica Neue', Verdana, Helvetica, Arial, sans-serif;
+  font-family: 'Inter', sans-serif;
   max-width: 600px;
   margin: 0 auto;
   padding-top: 72px;
@@ -42,6 +44,40 @@ a:hover {
   position: absolute;
 }
 
-.menu-item {
+.menu-dropdown-item {
   width: 5rem;
 }
+
+.menu-button {
+  font-size: 12pt;
+  background-color: #efefef;
+  border-color: black;
+  border-width: 1px;
+}
+
+.menu-button:hover {
+  background-color: #dedede;
+}
+
+.searchbar {
+  font-size: 14pt;
+  padding: 2px 8px;
+}
+
+.searchbar:focus {
+  outline: #000;
+  outline-width: 4px;
+}
+
+.button-primary {
+  border-radius: 6px;
+  border: none;
+  padding: 6px 10px;
+  background-color: black;
+  color: white;
+  font-weight: 600;
+}
+.button-primary:hover {
+  background-color: #353535;
+  cursor: pointer;
+}

reagent-test/src/reagent_test/core.cljs

@@ -4,37 +4,64 @@
             [reagent.dom :as d]))
 
 ;; -------------------------
-;; Component data (custom)
+;; Global state
+
+;; use this later
+(def state {:search-query ""
+            :searching false})
+
+(def search-query "")
+
+;; -------------------------
+;; Component data 
 
 (def action-btns [{:text "tools" :action #(js/console.log "hi")}
-                  {:text "search" :action #((go (let [res (<! (ncbi-search "pubmed" "science[journal]+AND+breast+cancer+AND+2008[pdat]"))]
-                                                  (js/console.log res))))}
                   {:text "help" :action #(js/console.log "test4")}])
 
 ;; -------------------------
-;; Menus
+;; Components
 
 (defn dropdown-or-action
   "Render dropdown menu for an action button/menu"
   [btn-item is-dropdown]
-  [:button {:class (if is-dropdown "menu-button" "")}
+  [:button {:class (if is-dropdown
+                     "menu-button menu-dropdown-item"
+                     "menu-button")}
    :text (:text btn-item)
    :on-click (let [action (:action btn-item)]
                (if (nil? action)
                  #(dropdown-or-action btn-item true)
                  action))])
 
+(defn search-form
+  "For searching for NCBI data"
+  [placeholder]
+  [:div {:style {:display "flex" :flex-direction "row" :align-items "center"}}
+   [:input {:on-change (fn [val] (set! search-query val))
+            :class "searchbar"
+            :style {:margin-right 8 :width 300}
+            :placeholder placeholder}]
+   [:select {:id "search_type" :class "searchbar" :style {:margin-right 8}}
+    [:option {:value "gene"} "Gene"]
+    [:option {:value "protein"} "Protein"]]
+   [:button {:class "searchbar button-primary" :on-click #(js/console.log "hi")} "Search!"]])
+
 ;; -------------------------
 ;; Views
 
 (defn home-page []
   [:div
-   [:h2 "Reagent Playground"]
+   [:h2 "NCBI Database Search"]
    [:p "A groundbreaking, revolutionary app that does stuff."]
    [:div {:class "button-container"}
     (map (fn [btn] [:button
-                    {:on-click #(dropdown-or-action btn false)}
+                    {:on-click #(dropdown-or-action btn false)
-                    (:text btn)]) action-btns)]])
+                     :class "menu-button"
+                     :style {:margin-right -1}}
+                    (:text btn)]) action-btns)]
+
+   [:br]
+   (search-form "Enter query...")])
 
 ;; -------------------------
 ;; Initialize app

reagent-test/src/reagent_test/ncbi.cljs

@@ -7,19 +7,17 @@
 
 (def base-url "https://eutils.ncbi.nlm.nih.gov/entrez/eutils")
 
-(defn ncbi-db-search
+(defn ncbi-search
   "Send search query to NCBI database, and get back a list of ID strings.
    [More info](https://www.ncbi.nlm.nih.gov/books/NBK25500/#_chapter1_Searching_a_Database_)
 
    Example Query: `science[journal]+AND+breast+cancer+AND+2008[pdat]`"
   [db-id query]
-  (go (let [res (<! (http/get (gstring/format
+  (go (let [res (<! (http/get (gstring/format "%s/esearch.fcgi?db=%s&id=%s")))
-                               "%s/esearch.fcgi?db=%s&term=%s"
-                               base-url db-id query)))
             xml-doc (loadXml res)]
         (. xml-doc getElementByTagName "Id"))))
 
-(defn ncbi-db-get-summary
+(defn ncbi-get-summary
   "Get summary by ID.
    [More info](https://www.ncbi.nlm.nih.gov/books/NBK25500/#_chapter1_Downloading_Document_Summaries_)"
   [db-id id]
@@ -29,5 +27,13 @@
             xml-doc (loadXml res)]
         (js/console.log "hi"))))
 
-(defn ncbi-search-gene [query] (ncbi-db-search "gene" query))
+(defn ncbi-search-gene [query] (ncbi-search "gene" query))
-(defn ncbi-id-gene [query] (ncbi-db-search "gene" query))
+
+;; currently not needed
+;; (defn ncbi-query 
+;;   "Query ncbi endpoint specifying databse & params (`http/get`)"
+;;   [endpoint dbid opts]
+;;   (let [opts-str (doseq [k (keys opts) 
+;;                          v (vals opts)] 
+;;                         (gstring/format "&%s=%s" (str k) (str v)))]
+;;     (http/get (gstring/format "%s/%s.fcgi?db=%s%s" endpoint dbid opts-str))))