Merge pull request #15 from intermine/dev

Lists page, quick search improvements

less/components/lists.less

@@ -0,0 +1,62 @@
+
+
+
+div.list-container {
+
+        .fa-star {
+          color: gold;
+        }
+
+        .fa-globe, .fa-user {
+            color: #009688;
+        }
+
+        .flags i {
+            padding: 0 3px 0 3px;
+
+            &.disabled {
+                color: #a8a8a8;
+            }
+        }
+
+    font-size: 0.9em;
+    padding: 15px;
+
+    .stress {
+        color: #009688;
+    }
+
+    h4 {
+        font-size: 1.2em;
+    }
+
+
+
+    .list-row {
+        background: white;
+        padding: 0px;
+
+
+    }
+
+     .header {
+         background-color: #009688;
+         color: white;
+     }
+
+    .list-row:not(:last-child) {
+        border-bottom: 1px solid #ecebeb;
+        margin-bottom: 3px;
+    }
+
+    div[class^="col-"] {
+        padding: 5px;
+    }
+
+    div[class^="col-"]:not(:last-child), div.col:not(:last-child) {
+        border-right: 1px solid #ecebeb;
+    }
+
+}
+
+

less/components/search.less

@@ -5,6 +5,7 @@
 
 .search-fullscreen {
     font-size: 1.05em;
+    width: 100%;
 
     button,
     input[type=text] {
@@ -64,17 +65,24 @@
     .searchform {
         display: flex;
         flex-wrap: wrap;
+
+        input {
+            min-width: 40vw;
+            margin-right: 1em;
+        }
         justify-content: center;
     }
 
     .response {
         clear: both;
         display: flex;
+        align-items: flex-start;
 
         .facets {
             order: 1;
             @highlight: #ddd;
             margin: 1em;
+            max-width: 30%;
 
             .result-type {
                 line-height: 1.5em;
@@ -130,6 +138,10 @@
             }
 
             tr {
+                &:hover {
+                    cursor: pointer;
+                }
+
                 td:last-child {
                     padding-left: @spacer/4;
                 }
@@ -166,6 +178,10 @@
             .result {
                 border-bottom: solid 1px #e4e4e4;
 
+                &:hover {
+                    cursor: pointer;
+                }
+
                 .searchterm {
                     input[type=radio] {
                         margin: 0 @spacer/2;

less/site.less

@@ -23,6 +23,7 @@
 @import "layouts/sidebar";
 @import "transitions";
 @import "components/regions";
+@import "components/lists";
 @import url(https://fonts.googleapis.com/css?family=Roboto:400,700,300);
 
 body {

project.clj

@@ -102,19 +102,19 @@
                     :source-map-timestamp true
                     :pretty-print         true
                     :parallel-build       true
-                    :preamble             ["preamble.js"]
+                    ;;:preamble             ["preamble.js"]
                     :modules
                                           {
                                            :app
                                            {
                                             :output-to "resources/public/js/modules/app.js"
                                             :entries   #{"redgenes.core"}
-                                            :preamble             ["preamble.js"]
+                                            ;;:preamble             ["preamble.js"]
                                             }
                                            :query-builder
                                            {
                                             :output-to "resources/public/js/modules/qb.js"
-                                            :preamble             ["preamble.js"]
+                                            ;;:preamble             ["preamble.js"]
                                             :entries
                                                        #{
                                                          "redgenes.components.querybuilder.views.main"
@@ -123,7 +123,7 @@
                                            :main
                                            {
                                             :output-to "resources/public/js/modules/main.js"
-                                            :preamble             ["preamble.js"]
+                                            ;;:preamble             ["preamble.js"]
                                             :entries   #{"redgenes.main" "redgenes.modules"}
                                             }}}}
     :min

resources/public/index.html

@@ -22,7 +22,7 @@
   </head>
   <body>
     <div id="wrappy">
-      <div>LOADING ORGANISMS</div>
+      <div>LOADING INTERMINE</div>
       <div id="loader">
         <div class="worm loader-organism"></div>
         <div class="zebra loader-organism"></div>

src/cljc/redgenes/mines.cljc

@@ -22,8 +22,9 @@
    :idresolver-example "CG9151, FBgn0000099, CG3629, TfIIB, Mad, CG1775, CG2262, TWIST_DROME, tinman, runt, E2f, CG8817, FBgn0010433, CG9786, CG1034, ftz, FBgn0024250, FBgn0001251, tll, CG1374, CG33473, ato, so, CG16738, tramtrack,  CG2328, gt"
    :mine
     {:name "FlyMine"
-     :url "beta.flymine.org/beta"
-     :service {:root "beta.flymine.org/beta"}}}
+     ;:url "beta.flymine.org/beta"
+     :url "www.flymine.org/query"
+     :service {:root "www.flymine.org/query"}}}
   ;  :url "www.flymine.org/flymine"
   ;  :service {:root "www.flymine.org/flymine"}}}
  :mouse
@@ -87,6 +88,16 @@
     {:name "YeastMine"
     :url "yeastmine.yeastgenome.org/yeastmine"
     :service {:root "yeastmine.yeastgenome.org/yeastmine"}}}
-;       :url "yeastmine-test.yeastgenome.org/yeastmine-dev"
-;       :service {:root "yeastmine-test.yeastgenome.org/yeastmine-dev"}}}
+
+    :mitominer
+    {:id     :mitominer
+     :output? true
+     :common "MitoMiner"
+     :abbrev "H. sapiens" ;;HAVING A DEFAULT ORGANISM MAY BE A BAD IDEA!!
+     :status {:status :na}
+     :idresolver-example "Atp5a1, Atp5b, Atp5d, Atp5c1"
+     :mine
+      {:name "MitoMiner"
+      :url "mitominer.mrc-mbu.cam.ac.uk/release-4.0"
+      :service {:root "mitominer.mrc-mbu.cam.ac.uk/release-4.0"}}}
  })

src/cljs/redgenes/components/nav.cljs

@@ -76,7 +76,7 @@
          [:li {:class (if (panel-is :templates-panel) "active")} [:a {:on-click #(navigate! "#/templates")} "Templates"]]
          [:li {:class (if (panel-is :regions-panel) "active")} [:a {:on-click #(navigate! "#/regions")} "Regions"]]
          [:li {:class (if (panel-is :querybuilder-panel) "active")} [:a {:on-click #(navigate! "#/querybuilder")} "Query\u00A0Builder"]]
-         [:li {:class (if (panel-is :saved-data-panel) "active")} [:a {:on-click #(navigate! "#/saved-data")} (str "Saved\u00A0Data\u00A0(" (count (keys @saved-data)) ")")]
+         [:li {:class (if (panel-is :saved-data-panel) "active")} [:a {:on-click #(navigate! "#/saved-data")} (str "Lists\u00A0(" (count (keys @saved-data)) ")")]
           ;;example tooltip. Include as last child, probably with some conditional to display and an event handler for saving the name
           (if @ttip [save-data-tooltip @ttip])]]
         [:ul.nav.navbar-nav.navbar-right.buttons

src/cljs/redgenes/components/search/events.cljs

@@ -5,6 +5,9 @@
             [redgenes.db :as db]
             ))
 
+
+(def max-results 99);;todo - this is only used in a cond right now, won't modify number of results returned. IMJS was being tricky;
+
 (reg-event-db
   :search/set-search-term
   (fn [db [_ search-term]]
@@ -42,7 +45,104 @@
       (assoc db :quicksearch-selected-index -1)
 ))
 
+
+(defn sort-by-value [result-map]
+ "Sort map results by their values. Used to order the category maps correctly"
+ (into (sorted-map-by (fn [key1 key2]
+                        (compare [(get result-map key2) key2]
+                                 [(get result-map key1) key1])))
+       result-map))
+
+(reg-event-db
+ :search/save-results
+ (fn [db [_ results]]
+   (if (some? (:active-filter (:search-results db)))
+     ;;if we're returning a filter result, leave the old facets intact.
+     (assoc-in db [:search-results :results] (.-results results))
+     ;;if we're returning a non-filtered result, add new facets to the atom
+     (assoc db :search-results
+       {
+       :results  (.-results results)
+       :highlight-results (:highlight-results (:search-results db))
+       :facets {
+         :organisms (sort-by-value (js->clj (aget results "facets" "organism.shortName")))
+         :category (sort-by-value (js->clj (aget results "facets" "Category")))}}))
+))
+
+(defn search
+ "search for the given term via IMJS promise. Filter is optional"
+ [& filter]
+   (let [searchterm @(re-frame/subscribe [:search-term])
+         mine (js/imjs.Service. (clj->js {:root @(subscribe [:mine-url])}))
+         search {:q searchterm :Category filter}
+         id-promise (-> mine (.search (clj->js search)))]
+     (-> id-promise (.then
+         (fn [results]
+           (dispatch [:search/save-results results]))))))
+
+(reg-event-fx
+  :search/full-search
+  (fn [{db :db}]
+    (let [filter (:active-filter (:search-results db))]
+    (search filter))
+{:db db}))
+
 (reg-event-db :search/reset-quicksearch
   (fn [db]
     (assoc db :suggestion-results nil)
 ))
+
+; (reg-event-db
+;   :search/set-active-filter
+;   (fn [db [_ filter]]
+;     (assoc-in db [:search-results :active-filter] filter)
+; ))
+
+(defn is-active-result? [result active-filter]
+ "returns true is the result should be considered 'active' - e.g. if there is no filter at all, or if the result matches the active filter type."
+   (or
+     (= active-filter (.-type result))
+     (nil? active-filter)))
+
+(defn count-current-results [results filter]
+ "returns number of results currently shown, taking into account result limits nd filters"
+ (count
+   (remove
+     (fn [result]
+       (not (is-active-result? result filter))) results)))
+
+(reg-fx
+ :load-more-results-if-needed
+ ;;output the results we have client side alredy (ie if a non-filtered search returns 100 results due to a limit, but indicates that there are 132 proteins in total, we'll show all the proteins we have when we filter down to just proteins, so the user might not even notice that we're fetching the rest in the background.)
+ ;;while the remote results are loading. Good for slow connections.
+ (fn [search-results]
+   (let [results (:results search-results)
+         filter (:active-filter search-results)
+         filtered-result-count (get (:category (:facets search-results)) filter)
+         more-filtered-results-to-show? (< (count-current-results results filter) filtered-result-count)
+         more-results-than-max? (<= (count-current-results results filter) max-results)]
+     (cond (and  more-filtered-results-to-show? more-results-than-max?)
+       (dispatch [:search/full-search]))
+)))
+
+
+(reg-event-fx
+  :search/set-active-filter
+  (fn [{:keys [db]} [_ filter]]
+    (let [new-db (assoc-in db [:search-results :active-filter] filter)]
+    {:db new-db
+     :load-more-results-if-needed (:search-results new-db)}
+)))
+
+(reg-event-fx
+  :search/remove-active-filter
+  (fn [{:keys [db]}]
+    {:db (assoc db :search-results (dissoc (:search-results db) :active-filter))
+     :dispatch [:search/full-search]
+     }
+))
+
+(reg-event-db :search/highlight-results
+  (fn [db [_ highlight?]]
+    (assoc-in db [:search-results :highlight-results] highlight?)
+))