QB: Improve usability of model browser button group

Fixes intermine#550. I decided to keep the Summarise button, but add icons, tooltips and better names.
heralden · Oct 2, 2020 · 52e88ce · 52e88ce
1 parent 3c30706
commit 52e88ce
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 15 deletions.
diff --git a/less/components/querybuilder.less b/less/components/querybuilder.less
@@ -654,6 +654,10 @@ div.column-container {
 
     .model-button-group {
         display: flex;
+
+        .icon {
+            fill: @body-foreground-color;
+        }
     }
 }
 

diff --git a/src/cljs/bluegenes/components/icons.cljs b/src/cljs/bluegenes/components/icons.cljs
@@ -297,7 +297,6 @@
 
     [:symbol#icon-summary
      {:viewBox "0 0 16 16"}
-     [:title "summary"]
      [:path.path1
       {:d
        "M13.5 0h-12c-0.825 0-1.5 0.675-1.5 1.5v13c0 0.825 0.675 1.5 1.5 1.5h12c0.825 0 1.5-0.675 1.5-1.5v-13c0-0.825-0.675-1.5-1.5-1.5zM13 14h-11v-12h11v12zM4 7h7v1h-7zM4 9h7v1h-7zM4 11h7v1h-7zM4 5h7v1h-7z"}]]
@@ -539,7 +538,6 @@
 
     [:symbol#icon-bin
      {:viewBox "0 0 16 16"}
-     [:title "bin"]
      [:path
       {:d
        "M2 5v10c0 0.55 0.45 1 1 1h9c0.55 0 1-0.45 1-1v-10h-11zM5 14h-1v-7h1v7zM7 14h-1v-7h1v7zM9 14h-1v-7h1v7zM11 14h-1v-7h1v7z"}]
@@ -804,4 +802,17 @@
       {:d
        "M77.7675 47.9216H94.1618C94.3911 47.9216 94.6182 47.9677 94.83 48.0571C95.0419 48.1465 95.2344 48.2776 95.3965 48.4429C95.5587 48.6082 95.6873 48.8044 95.7751 49.0203C95.8628 49.2363 95.908 49.4677 95.908 49.7014V50.4089C95.908 50.8843 95.7227 51.3404 95.3928 51.6766C95.0629 52.0128 94.6155 52.2017 94.149 52.2017H77.7547C77.2853 52.2017 76.8351 52.0116 76.5032 51.6733C76.1713 51.335 75.9848 50.8761 75.9848 50.3977V49.7387C75.9848 49.2567 76.1726 48.7946 76.5069 48.4538C76.8413 48.1131 77.2947 47.9216 77.7675 47.9216Z"}]
      [:path
-      {:d "M88.3843 52.1886V62.8165H92.5829V52.1886H88.3843Z"}]]]])
+      {:d "M88.3843 52.1886V62.8165H92.5829V52.1886H88.3843Z"}]]
+
+    [:symbol#icon-enlarge2
+     {:viewBox "0 0 32 32"}
+     [:path
+      {:d
+       "M32 0v13l-5-5-6 6-3-3 6-6-5-5zM14 21l-6 6 5 5h-13v-13l5 5 6-6z"}]]
+
+    [:symbol#icon-shrink
+     {:viewBox "0 0 32 32"}
+     [:path {:d "M18 14h13l-5-5 6-6-3-3-6 6-5-5z"}]
+     [:path {:d "M18 18v13l5-5 6 6 3-3-6-6 5-5z"}]
+     [:path {:d "M14 18h-13l5 5-6 6 3 3 6-6 5 5z"}]
+     [:path {:d "M14 14v-13l-5 5-6-6-3 3 6 6-5 5z"}]]]])
diff --git a/src/cljs/bluegenes/pages/querybuilder/events.cljs b/src/cljs/bluegenes/pages/querybuilder/events.cljs
@@ -532,11 +532,11 @@
    (let [enhance-query (get-in db [:qb :enhance-query])
          service (get-in db [:mines (get-in db [:current-mine]) :service])
          im-query (-> {:from (name (get-in db [:qb :root-class]))
-                         :select (get-in db [:qb :order])
-                         :constraintLogic (enhance-constraint-logic (get-in db [:qb :constraint-logic]))
-                         :where (concat (regular-constraints enhance-query) (subclass-constraints enhance-query))
-                         :sortOrder (get-in db [:qb :sort])
-                         :joins (vec (get-in db [:qb :joins]))}
+                       :select (get-in db [:qb :order])
+                       :constraintLogic (enhance-constraint-logic (get-in db [:qb :constraint-logic]))
+                       :where (concat (regular-constraints enhance-query) (subclass-constraints enhance-query))
+                       :sortOrder (get-in db [:qb :sort])
+                       :joins (vec (get-in db [:qb :joins]))}
                       (im-query/sterilize-query))
          query-changed? (not= im-query (get-in db [:qb :im-query]))]
        (cond-> {:db (update-in db [:qb] assoc :im-query im-query)}

diff --git a/src/cljs/bluegenes/pages/querybuilder/views.cljs b/src/cljs/bluegenes/pages/querybuilder/views.cljs
@@ -9,7 +9,8 @@
             [imcljs.query :refer [->xml]]
             [bluegenes.components.loader :refer [mini-loader]]
             [bluegenes.components.ui.results_preview :refer [preview-table]]
-            [inflections.core :refer [ordinalize plural]]))
+            [inflections.core :refer [ordinalize plural]]
+            [bluegenes.components.icons :refer [icon]]))
 
 (defn query=
   "Returns whether `queries` are all =, ignoring empty values like [] and nil."
@@ -181,14 +182,21 @@
        (into [:ul
               [:li [:div.model-button-group
                     [:button.btn.btn-slim
-                     {:on-click #(dispatch [:qb/enhance-query-add-summary-views [root-class]])}
-                     "Summarise"]
+                     {:on-click #(dispatch [:qb/enhance-query-add-summary-views [root-class]])
+                      :title (str "Summarise " root-class " by adding its common attributes")}
+                     [icon "summary"] "Summary"]
                     [:button.btn.btn-slim
-                     {:on-click #(dispatch [:qb/expand-all])}
-                     "Expand Selected"]
+                     {:on-click #(dispatch [:qb/expand-all])
+                      :title "Expand the Model Browser tree to show all selected attributes"}
+                     [icon "enlarge2"] "Expand"]
                     [:button.btn.btn-slim
-                     {:on-click #(dispatch [:qb/collapse-all])}
-                     "Collapse All"]]]]
+                     {:on-click #(dispatch [:qb/collapse-all])
+                      :title "Collapse the Model Browser tree to the top level"}
+                     [icon "shrink"] "Collapse"]
+                    [:button.btn.btn-slim
+                     {:on-click #(dispatch [:qb/enhance-query-clear-query])
+                      :title "Remove all selected attributes"}
+                     [icon "bin"] "Clear"]]]]
              (concat
               (map (fn [class-entry] [attribute model class-entry path]) attributes)
               (map (fn [class-entry] [node model class-entry path]) relationships))))]))