From 0ffbdcf6905df1f43e6290f224cddde13fa26205 Mon Sep 17 00:00:00 2001
From: Guillaume Poirier-Morency <guillaumepoiriermorency@gmail.com>
Date: Wed, 2 Aug 2023 14:24:49 -0700
Subject: [PATCH] Omit sub-clauses related to the category that is being
 retrieved

Make browsingOptions.filter an array so that it can be adjusted as
necessary when retrieving counts for platforms, taxa, etc.

Rename blacklistedTerms to excludedTerms.
---
 src/App.vue                               |   6 +-
 src/components/AnnotationSelector.vue     |  45 ++--
 src/components/AppBar.vue                 |   3 +-
 src/components/DownloadButton.vue         |   6 +-
 src/components/PlatformSelector.vue       | 115 ++++++----
 src/components/SearchSettings.vue         |  32 ++-
 src/components/TaxonSelector.vue          | 156 +++++++------
 src/components/TechnologyTypeSelector.vue |  64 ++++++
 src/config/gemma.js                       |   4 +-
 src/models.js                             |   5 +-
 src/utils.js                              |  15 +-
 src/views/Browser.vue                     | 258 +++++++++++++---------
 12 files changed, 442 insertions(+), 267 deletions(-)
 create mode 100644 src/components/TechnologyTypeSelector.vue

diff --git a/src/App.vue b/src/App.vue
index 798d4d2..bf3edef 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,6 +9,7 @@
 import "vuetify/dist/vuetify.css";
 import "material-icons";
 import AppBar from "@/components/AppBar.vue";
+import { mapMutations } from "vuex";
 
 function renderError(err) {
   return {
@@ -23,8 +24,9 @@ function renderError(err) {
 
 export default {
   components: { AppBar },
-  errorCaptured(err, vm, info) {
-    this.$store.commit("setLastError", renderError(err));
+  methods: mapMutations(["setLastError"]),
+  errorCaptured(err) {
+    this.setLastError(renderError(err));
   }
 };
 </script>
diff --git a/src/components/AnnotationSelector.vue b/src/components/AnnotationSelector.vue
index 1df1e94..818ace5 100644
--- a/src/components/AnnotationSelector.vue
+++ b/src/components/AnnotationSelector.vue
@@ -1,26 +1,38 @@
 <template>
-    <v-treeview v-model="selectedValues" :items="rankedAnnotations" :disabled="disabled" item-key="id"
-                selectable
-                dense
-                class="hide-root-checkboxes"
-                >
-        <template v-slot:label="{item}">
-            <i v-if="item.isCategory && isUncategorized(item)">Uncategorized</i>
-            <span v-else v-text="getTitle(item)" class="text-capitalize text-truncate"/>
-            <span v-if="isTermLinkable(item)">&nbsp;<a v-if="debug" :href="getExternalUrl(item)" target="_blank"
-                                                       class="mdi mdi-open-in-new"></a></span>
-            <div v-if="debug && getUri(item)">
-                <small>{{ getUri(item) }}</small>
+    <div>
+        <div class="d-flex align-baseline">
+            <div class="text--secondary">
+                Annotations
             </div>
-        </template>
-        <template v-slot:append="{item}">
+            <v-spacer></v-spacer>
+            <v-btn v-if="selectedValues.length > 0" @click="selectedValues = []" small text color="primary">
+                Clear Selection
+            </v-btn>
+        </div>
+        <v-progress-linear :active="loading" indeterminate/>
+        <v-treeview v-model="selectedValues" :items="rankedAnnotations" :disabled="disabled" item-key="id"
+                    selectable
+                    dense
+                    class="hide-root-checkboxes"
+        >
+            <template v-slot:label="{item}">
+                <i v-if="item.isCategory && isUncategorized(item)">Uncategorized</i>
+                <span v-else v-text="getTitle(item)" class="text-capitalize text-truncate"/>
+                <span v-if="isTermLinkable(item)">&nbsp;<a v-if="debug" :href="getExternalUrl(item)" target="_blank"
+                                                           class="mdi mdi-open-in-new"></a></span>
+                <div v-if="debug && getUri(item)">
+                    <small>{{ getUri(item) }}</small>
+                </div>
+            </template>
+            <template v-slot:append="{item}">
             <span v-if="!item.isCategory"
                   :title="debug ? 'Entropy: ' + formatDecimal(entropy(item)) : undefined"
             >
                 {{ formatNumber(item.numberOfExpressionExperiments) }}
             </span>
-        </template>
-    </v-treeview>
+            </template>
+        </v-treeview>
+    </div>
 </template>
 
 <script>
@@ -48,6 +60,7 @@ export default {
      * Annotations to be displayed in this selector.
      */
     annotations: Array,
+    loading: Boolean,
     /**
      * If true, the checkboxes in the tree view are disabled.
      */
diff --git a/src/components/AppBar.vue b/src/components/AppBar.vue
index ff49197..4f13358 100644
--- a/src/components/AppBar.vue
+++ b/src/components/AppBar.vue
@@ -27,7 +27,7 @@
           </v-card>
         </v-menu>
         <v-spacer/>
-        <v-switch v-if="initiallyDebug" v-model="debug" label="Debug Mode" hide-details/>
+        <v-switch v-if="initiallyDebug" v-model="debug" label="Debug Mode" hide-details class="px-4"/>
         <v-menu open-on-hover offset-y>
             <template v-slot:activator="{on, attrs}">
                 <v-btn plain v-bind="attrs" v-on="on">
@@ -169,7 +169,6 @@ export default {
   },
   computed: {
     ...mapState({
-      debug: state => state.debug,
       title: state => state.title,
       filterSummary: state => state.filterSummary,
       filterDescription: state => state.filterDescription,
diff --git a/src/components/DownloadButton.vue b/src/components/DownloadButton.vue
index af29a63..02170eb 100644
--- a/src/components/DownloadButton.vue
+++ b/src/components/DownloadButton.vue
@@ -15,7 +15,7 @@
 import { axiosInst, baseUrl } from "@/config/gemma";
 import { parse } from "json2csv";
 import { chain } from "lodash";
-import { compressArg, downloadAs, formatNumber } from "@/utils";
+import { compressFilter, downloadAs, formatNumber } from "@/utils";
 import axios from "axios";
 
 const termsAndConditionsHeader = [
@@ -59,7 +59,7 @@ export default {
       let taxon = this.searchSettings.taxon?.scientificName;
       let platforms = this.searchSettings.platforms.map(p => p.name);
       let browsingOptionsFilter = this.browsingOptions.filter;
-      if (browsingOptionsFilter) {
+      if (browsingOptionsFilter.length > 0) {
         let browsingOptionsFilterReadable = [];
         if (annotationByCategoryId !== "" && annotationByCategoryId !== undefined) {
           browsingOptionsFilterReadable.push("Annotation: " + annotationByCategoryId + ".");
@@ -89,7 +89,7 @@ export default {
       let total = this.total = this.totalNumberOfExpressionExperiments;
       let readableFilter = this.readableFilter();
       let readableQuery = this.readableQuery();
-      return compressArg(filter).then(compressedFilter => {
+      return compressFilter(filter).then(compressedFilter => {
         let controller = this.controller = new AbortController();
         let progress_ = 0;
         this.$emit("update:progress", progress_);
diff --git a/src/components/PlatformSelector.vue b/src/components/PlatformSelector.vue
index 4e98afc..eb31e58 100644
--- a/src/components/PlatformSelector.vue
+++ b/src/components/PlatformSelector.vue
@@ -4,14 +4,16 @@
               :disabled="disabled"
               :menu-props="menuProps"
               multiple
-              @click:clear="selectedTechnologyType = null"
+              @change="selectedTechnologyType = null"
               ref="platformSelector"
-              >
+              no-data-text="No platforms available">
+        >
         <template v-slot:prepend-item>
-            <v-list-item v-for="technologyType in selectableTechnologyTypes" 
-                         :key="technologyType.id" 
-                         @click="updateTechnologyType(technologyType.id)" 
-                         dense>
+            <v-list-item v-for="technologyType in selectableTechnologyTypes"
+                         :key="technologyType.id"
+                         @click="selectedTechnologyType = selectedTechnologyType === technologyType.id ? null : technologyType.id"
+                         dense
+                         :class="selectedTechnologyType === technologyType.id ? 'v-list-item--active primary--text' : ''">
                 <v-list-item-content>
                     <v-list-item-title>
                         {{ technologyType.label }}
@@ -22,36 +24,37 @@
                     </v-list-item-subtitle>
                 </v-list-item-content>
             </v-list-item>
-            <v-divider v-if="selectablePlatforms.length > 0"/>
+            <v-divider v-if="selectableTechnologyTypes.length > 0 && selectablePlatforms.length > 0"/>
         </template>
-        <template v-slot:item="{item}">
-            <v-list-item-content>
-                <v-list-item-title class="text-truncate">
-                    {{ item.name }}
-                </v-list-item-title>
-                <v-list-item-subtitle>
-                    <div class="capitalize-first-letter">
-                        {{ getTechnologyTypeLabel(item.technologyType) }} platform with
-                        {{ item.numberOfExpressionExperiments }} experiments
-                    </div>
-                </v-list-item-subtitle>
-            </v-list-item-content>
+        <template v-slot:item="{item, on, attrs}">
+            <v-list-item v-on="on" v-bind="attrs" :key="item.id">
+                <v-list-item-content>
+                    <v-list-item-title class="text-truncate">
+                        {{ item.name }}
+                    </v-list-item-title>
+                    <v-list-item-subtitle>
+                        <div class="capitalize-first-letter">
+                            {{ getTechnologyTypeLabel(item.technologyType) }} platform with
+                            {{ item.numberOfExpressionExperiments }} experiments
+                        </div>
+                    </v-list-item-subtitle>
+                </v-list-item-content>
+            </v-list-item>
         </template>
         <template v-slot:selection="{ item, index }">
-          <span v-if="selectedTechnologyType">
-              <span v-if="index === 0">
-              {{  getTechnologyTypeLabel(item.technologyType) }}
-            </span>
-          </span>
-          <span v-else>
-            {{ item.name }}, 
-          </span>
+            <template v-if="selectedTechnologyType">
+                <!-- only render the technology type label for the first selected platform -->
+                <template v-if="index === 0">{{ getTechnologyTypeLabel(item.technologyType) }}</template>
+            </template>
+            <template v-else>
+                {{ item.name + (index < selectedPlatformIds.length - 1 ? "," : "") }}
+            </template>
         </template>
     </v-select>
 </template>
 
 <script>
-import { sumBy, debounce } from "lodash";
+import { sumBy } from "lodash";
 
 export default {
   name: "PlatformSelector",
@@ -75,17 +78,25 @@ export default {
       selectedTechnologyType: null,
       selectedPlatformIds: this.value && this.value.map(p => p.id),
       menuProps: {
-        maxWidth: 430
+        maxWidth: 430,
+        closeOnContentClick: true
       }
     };
   },
   emits: ["input", "update:selectedTechnologyType"],
   computed: {
-    technologyTypeSelected() {
-      return true;
-    },
     selectablePlatforms() {
-      return this.platforms;
+      return [...this.platforms]
+        .sort((a, b) => {
+          if (this.selectedPlatformIds.includes(a.id)) {
+            if (!this.selectedPlatformIds.includes(b.id)) {
+              return -1;
+            }
+          } else if (this.selectedPlatformIds.includes(b.id)) {
+            return 1;
+          }
+          return b.numberOfExpressionExperiments - a.numberOfExpressionExperiments;
+        });
     },
     selectableTechnologyTypes() {
       let mentioned = new Set(this.platforms.map(p => p.technologyType));
@@ -105,11 +116,6 @@ export default {
     }
   },
   methods: {
-    updateTechnologyType(t) {
-      this.selectedTechnologyType = t;
-      this.selectedPlatformIds = this.platforms.filter(p => p.technologyType === t).map(p => p.id);
-      this.$emit("update:selectedTechnologyType", t);
-    },
     getTechnologyTypeNumberOfExpressionExperiments(t) {
       return sumBy(this.platforms.filter(p => p.technologyType === t), p => p.numberOfExpressionExperiments);
     },
@@ -126,19 +132,40 @@ export default {
     }
   },
   mounted() {
-    // the refs do not exist until the component is mounted, so we cannot use
-    this.$watch('isPlatformSelectorMenuActive', function(newVal){
+    // the refs do not exist until the component is mounted, so we cannot use the watch section below
+    this.$watch("isPlatformSelectorMenuActive", function(newVal) {
       if (!newVal) {
-        console.log(this.selectedPlatforms);
         this.$emit("input", this.selectedPlatforms);
       }
     });
-    // update selected platform if menu is not active (i.e. when clearing the selection)
-    this.$watch('selectedPlatforms', function(newVal) {
+  },
+  watch: {
+    /**
+     * Ensure that all the platforms of a given technology type are selected.
+     */
+    platforms(newVal) {
+      if (this.selectedTechnologyType) {
+        let s = this.selectedPlatformIds;
+        this.selectedPlatformIds = newVal
+          .filter(p => p.technologyType === this.selectedTechnologyType || s.includes(p.id))
+          .map(p => p.id);
+      }
+    },
+    /**
+     * Update selected platform if menu is not active (i.e. when clearing the selection)
+     */
+    selectedPlatforms(newVal) {
       if (!this.isPlatformSelectorMenuActive) {
         this.$emit("input", newVal);
       }
-    });
+    },
+    /**
+     * When a technology type is selected, select all the platforms of that type.
+     */
+    selectedTechnologyType(newVal) {
+      this.selectedPlatformIds = this.platforms.filter(p => p.technologyType === newVal).map(p => p.id);
+      this.$emit("update:selectedTechnologyType", newVal);
+    }
   }
 };
 </script>
diff --git a/src/components/SearchSettings.vue b/src/components/SearchSettings.vue
index 59f68af..9eee4c0 100644
--- a/src/components/SearchSettings.vue
+++ b/src/components/SearchSettings.vue
@@ -27,9 +27,13 @@
         <PlatformSelector
                 v-if="searchSettings.resultTypes.indexOf(platformResultType) === -1"
                 v-model="searchSettings.platforms"
+                :selectedTechnologyType.sync="searchSettings.technologyType"
                 :platforms="platforms"
                 :technology-types="technologyTypes"
                 :disabled="platformDisabled"/>
+        <TechnologyTypeSelector
+                :platforms="platforms"
+                :disabled="platformDisabled"/>
         <v-range-slider
                 v-model="searchSettings.quality"
                 min="0" max="3"
@@ -37,32 +41,38 @@
                 :tick-labels="['trash', 'low', 'mid', 'high']"
                 label="Quality" title="Filter based on GEEQ scores or curation status"
                 v-show="false"/>
-        <p class="text--secondary">
-            Annotations
-        </p>
-        <v-progress-linear :active="annotationLoading" indeterminate/>
         <AnnotationSelector
                 v-model="searchSettings.annotations"
                 :annotations="annotations"
+                :loading="annotationLoading"
                 :disabled="annotationDisabled"
                 :total-number-of-expression-experiments="totalNumberOfExpressionExperiments"
-                :selectedCategories.sync="searchSettings.categories" style="margin-bottom: 48px;"/>
-        <v-switch v-if="debug" v-model="searchSettings.includeBlacklistedTerms"
-                    label="Include Blacklisted Terms (dev only)"
-                    style="position: fixed; bottom: 0; background: white; width: 100%;"
-                    hide-details class="py-3"/>
+                :selectedCategories.sync="searchSettings.categories"/>
+        <p v-show="annotations.length === 0">
+            No annotations available
+        </p>
+        <div v-if="debug" style="margin-bottom: 59px;"></div>
+        <div v-if="debug" class="d-flex align-center"
+             style="position: fixed; left: 0; bottom: 0; background: white; height: 59px; width: 100%; border-top: thin solid rgba(0, 0, 0, 0.12); padding: 0 8px;"
+        >
+            <v-switch v-model="searchSettings.ignoreExcludedTerms"
+                      label="Ignore Excluded Terms (dev only)"
+                      hide-details
+                      class="mt-0"/>
+        </div>
     </v-form>
 </template>
 
 <script>
 import TaxonSelector from "@/components/TaxonSelector";
-import PlatformSelector from "@/components/PlatformSelector.vue";
 import { ArrayDesignType, SearchSettings, SUPPORTED_RESULT_TYPES } from "@/models";
 import AnnotationSelector from "@/components/AnnotationSelector.vue";
 import { mapState } from "vuex";
+import TechnologyTypeSelector from "@/components/TechnologyTypeSelector.vue";
+import PlatformSelector from "@/components/PlatformSelector.vue";
 
 export default {
-  components: { AnnotationSelector, TaxonSelector, PlatformSelector },
+  components: { PlatformSelector, TechnologyTypeSelector, AnnotationSelector, TaxonSelector },
   props: {
     value: {
       type: SearchSettings,
diff --git a/src/components/TaxonSelector.vue b/src/components/TaxonSelector.vue
index f7bdaa6..94f71f9 100644
--- a/src/components/TaxonSelector.vue
+++ b/src/components/TaxonSelector.vue
@@ -1,105 +1,101 @@
 <template>
-  <v-treeview
-          :items="treeItems"
-          item-key="id"
-          v-model="selectedTaxaIds"
-          selectable
-          dense
-          :disabled="disabled"
-          class="hide-root-checkboxes"
-  >
-  <template v-slot:label="{ item }">
-      <span v-text="item.label" class="text-truncate"> </span>
-  </template>
-  <template v-slot:append="{ item }">
-    <span v-if="item.type !== 'parent'"> {{ formatNumber(item.number) }} </span>
-    <span v-if="item.type === 'parent' && selectedTaxaIds.length > 0">
+    <v-treeview
+            :items="treeItems"
+            item-key="id"
+            v-model="selectedTaxaIds"
+            selectable
+            dense
+            :disabled="disabled"
+            class="hide-root-checkboxes"
+    >
+        <template v-slot:label="{ item }">
+            <span v-text="item.label" class="text-truncate"> </span>
+        </template>
+        <template v-slot:append="{ item }">
+            <span v-if="item.type !== 'parent'"> {{ formatNumber(item.number) }} </span>
+            <span v-if="item.type === 'parent' && selectedTaxaIds.length > 0">
             <v-btn @click="clearSelections" small text color="primary">
           Clear Selection
               </v-btn>
       </span>
-  </template>
-  </v-treeview>
+        </template>
+    </v-treeview>
 </template>
 
 <script>
 import { formatNumber } from "@/utils";
 
 export default {
-name: "TaxonSelector",
-props: {
-  value: Array,
-  /**
-   * A list of available taxa.
-   */
-  taxon: Array,
-  disabled: Boolean
-},
-emits: ["input"],
-data() {
-  return {
+  name: "TaxonSelector",
+  props: {
     /**
-     * Holds the currently selected taxon.
-     * This holds the initial taxon value, which must be one of the provided taxa.
+     * A list of available taxa.
      */
-     selectedTaxaIds: this.value && this.value.map(t => t.id) || []
-  };
-},
-computed: {
-  rankedTaxa() {
-    let sortedTaxa = [...this.taxon];
-    sortedTaxa.sort(function(a, b) {
-      return b.numberOfExpressionExperiments - a.numberOfExpressionExperiments;
-    });
-    return sortedTaxa;
+    value: Array,
+    taxon: Array,
+    disabled: Boolean
   },
-  treeItems() {
-    const items = [
-      {
-        id: "taxon",
-        label: "Taxa",
-        type: "parent",
-        children: []
-      }
-    ];
+  emits: ["input"],
+  data() {
+    return {
+      selectedTaxaIds: this.value && this.value.map(t => t.id) || []
+    };
+  },
+  computed: {
+    rankedTaxa() {
+      let sortedTaxa = [...this.taxon];
+      sortedTaxa.sort(function(a, b) {
+        return b.numberOfExpressionExperiments - a.numberOfExpressionExperiments;
+      });
+      return sortedTaxa;
+    },
+    treeItems() {
+      const items = [
+        {
+          id: "taxon",
+          label: "Taxa",
+          type: "parent",
+          children: []
+        }
+      ];
 
-    for (const taxon of this.rankedTaxa) {
-      const isSelected = this.selectedTaxa.some((t) => t.id === taxon.id);
+      for (const taxon of this.rankedTaxa) {
+        const isSelected = this.selectedTaxa.some((t) => t.id === taxon.id);
 
-      const taxonItem = {
-        ...taxon,
-        id: taxon.id,
-        label: this.labelWithCommonName(taxon),
-        type: "taxon",
-        number: this.numberOfExperimentsLabel(taxon),
-        selected: isSelected
-      };
+        const taxonItem = {
+          ...taxon,
+          id: taxon.id,
+          label: this.labelWithCommonName(taxon),
+          type: "taxon",
+          number: this.numberOfExperimentsLabel(taxon),
+          selected: isSelected
+        };
 
-      items[0].children.push(taxonItem);
+        items[0].children.push(taxonItem);
+      }
+      return items;
+    },
+    selectedTaxa() {
+      if (!this.selectedTaxaIds) return [];
+      return this.taxon.filter(taxon => this.selectedTaxaIds.includes(taxon.id));
     }
-    return items;
   },
-  selectedTaxa() {
-    if(!this.selectedTaxaIds) return [];
-    return this.taxon.filter(taxon => this.selectedTaxaIds.includes(taxon.id));
-  }
-},
-methods: {
-  formatNumber,
-  labelWithCommonName(item) {
-        return `${item.scientificName} (${item.commonName.charAt(0).toUpperCase() + item.commonName.slice(1)})`;
+  methods: {
+    formatNumber,
+    labelWithCommonName(item) {
+      return `${item.scientificName} (${item.commonName.charAt(0).toUpperCase() + item.commonName.slice(1)})`;
     },
-  numberOfExperimentsLabel(item) {
-        return item.numberOfExpressionExperiments;
-  },
-  clearSelections() {
+    numberOfExperimentsLabel(item) {
+      return item.numberOfExpressionExperiments;
+    },
+    clearSelections() {
       this.selectedTaxaIds = [];
-  }
-},
-watch: {
+    }
+  },
+  watch: {
     selectedTaxa(newVal) {
-        this.$emit("input", newVal);
-      }
+      this.$emit("input", newVal);
+    }
   }
 };
 
diff --git a/src/components/TechnologyTypeSelector.vue b/src/components/TechnologyTypeSelector.vue
new file mode 100644
index 0000000..6d3084b
--- /dev/null
+++ b/src/components/TechnologyTypeSelector.vue
@@ -0,0 +1,64 @@
+<template>
+    <div>
+        <div class="d-flex align-baseline">
+            <div class="text--secondary">Technology Types (preview)</div>
+            <v-spacer></v-spacer>
+            <v-btn v-if="selectedValues.length > 0" @click="selectedValues = []" small text color="primary">
+                Clear Selection
+            </v-btn>
+        </div>
+        <v-treeview v-model="selectedValues"
+                    :items="technologyTypes"
+                    item-key="id"
+                    item-text="name"
+                    selectable dense>
+            <template v-slot:label="{item}">
+                {{ item.name }}
+            </template>
+            <template v-slot:append="{item}">
+                {{ item.numberOfExpressionExperiments }}
+            </template>
+        </v-treeview>
+    </div>
+</template>
+
+<script>
+
+import { sumBy } from "lodash";
+
+const MICROARRAY_TECHNOLOGY_TYPES = ["ONECOLOR", "TWOCOLOR", "DUALMODE"];
+export default {
+  name: "TechnologyTypeSelector",
+  props: {
+    value: Array,
+    platforms: Array
+  },
+  events: ["input"],
+  data() {
+    return {
+      selectedValues: []
+    };
+  },
+  computed: {
+    technologyTypes() {
+      return [
+        {
+          id: "microarray",
+          name: "Microarray",
+          children: this.platforms.filter(p => MICROARRAY_TECHNOLOGY_TYPES.includes(p.technologyType))
+        },
+        {
+          id: "rnaseq",
+          name: "RNA-Seq",
+          numberOfExpressionExperiments: sumBy(this.platforms.filter(p => p.technologyType === "GENELIST"), "numberOfExpressionExperiments")
+        }
+      ];
+    }
+  },
+  watch: {
+    selectedValues: function(newVal) {
+      this.$emit("input", newVal);
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/src/config/gemma.js b/src/config/gemma.js
index 92c6078..8ba8cdc 100644
--- a/src/config/gemma.js
+++ b/src/config/gemma.js
@@ -33,12 +33,12 @@ marked.use({
 export { marked };
 
 /**
- * Blacklisted categories and terms.
+ * Excluded categories and terms.
  *
  * Inference is applied in the backend to include all the subclasses of the following terms. Thus, one must be careful
  * to not put a term that is too general.
  */
-export let blacklistedTerms = [
+export let excludedTerms = [
   "http://gemma.msl.ubc.ca/ont/TGEMO_00001", // homozygous negative
   "http://gemma.msl.ubc.ca/ont/TGEMO_00003", // heterozygous
   "http://gemma.msl.ubc.ca/ont/TGEMO_00004", // overexpression
diff --git a/src/models.js b/src/models.js
index fb8ff4b..d562897 100644
--- a/src/models.js
+++ b/src/models.js
@@ -11,6 +11,7 @@
 export function Taxon(commonName, scientificName) {
   this.commonName = commonName;
   this.scientificName = scientificName;
+  this.numberOfExpressionExperiments = 0;
 }
 
 /**
@@ -71,10 +72,10 @@ export function SearchSettings(query, resultTypes) {
   this.platforms = [];
   this.taxon = null;
   this.quality = [0, 3];
-  this.technologyTypes = [];
+  this.technologyType = null;
   this.annotations = [];
   this.categories = [];
-  this.includeBlacklistedTerms = false;
+  this.ignoreExcludedTerms = false;
 }
 
 export const ExpressionExperimentType = "ubic.gemma.model.expression.experiment.ExpressionExperiment";
diff --git a/src/utils.js b/src/utils.js
index edc1421..70d1220 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -18,8 +18,8 @@ export function downloadAs(data, filename) {
 }
 
 const numberFormat = new Intl.NumberFormat();
-const percentFormatter = Intl.NumberFormat(undefined, { style: "percent" });
-const decimalFormatter = Intl.NumberFormat(undefined, { maximumFractionDigits: 2 });
+const percentFormatter = new Intl.NumberFormat(undefined, { style: "percent" });
+const decimalFormatter = new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 });
 
 export function formatNumber(n) {
   return numberFormat.format(n);
@@ -62,4 +62,13 @@ export function compressArg(f) {
       return f;
     }
   });
-}
\ No newline at end of file
+}
+
+/**
+ *
+ * @param filter
+ * @returns {Promise<String>}
+ */
+export function compressFilter(filter) {
+  return compressArg(filter.map(a => a.join(" or ")).join(" and "));
+}
diff --git a/src/views/Browser.vue b/src/views/Browser.vue
index bf8dd84..55a77bf 100644
--- a/src/views/Browser.vue
+++ b/src/views/Browser.vue
@@ -24,11 +24,10 @@
                     :options.sync="options"
                     :server-items-length="totalNumberOfExpressionExperiments"
                     :footer-props="footerProps"
-                    :disable-sort="query && query.length > 0"
                     show-expand
                     fixed-header
-                    dense class="mb-3"
-                    >
+                    dense class="browser-data-table"
+            >
                 <template v-slot:item.shortName="{item}">
                     <a :href="baseUrl + '/expressionExperiment/showExpressionExperiment.html?id=' + encodeURIComponent(item.id)">
                         {{ item.shortName }}
@@ -86,14 +85,14 @@
 <script>
 import SearchSettings from "@/components/SearchSettings";
 import { ExpressionExperimentType, SearchSettings as SearchSettingsModel } from "@/models";
-import { mapState } from "vuex";
-import { baseUrl, blacklistedTerms, marked } from "@/config/gemma";
+import { baseUrl, excludedTerms, marked } from "@/config/gemma";
 import { chain, debounce, groupBy, isEqual, sumBy } from "lodash";
 import DatasetPreview from "@/components/DatasetPreview.vue";
 import { highlight } from "@/search-utils";
 import DownloadButton from "@/components/DownloadButton.vue";
-import { compressArg, formatDecimal, formatNumber, formatPercent } from "@/utils";
+import { compressArg, compressFilter, formatDecimal, formatNumber, formatPercent } from "@/utils";
 import Error from "@/components/Error.vue";
+import { mapMutations, mapState } from "vuex";
 
 const MAX_URIS_IN_CLAUSE = 200;
 
@@ -121,13 +120,20 @@ export default {
       options: {
         page: 1,
         itemsPerPage: 25,
-        sortBy: ["lastUpdated"],
+        sortBy: ["id"],
         sortDesc: [true]
       },
       downloadProgress: null
     };
   },
   computed: {
+    title() {
+      if (this.totalNumberOfExpressionExperiments > 0) {
+        return `Showing ${formatNumber(this.totalNumberOfExpressionExperiments)} results`;
+      } else {
+        return null;
+      }
+    },
     headers() {
       let h = [];
       h.push(
@@ -159,7 +165,7 @@ export default {
           value: "lastUpdated"
         }
       );
-      if (this.debug && this.searchSettings.query) {
+      if (this.debug && this.appliedBrowsingOptions.query) {
         h.push({
           text: "Score (dev only)",
           value: "searchResult.score",
@@ -171,17 +177,25 @@ export default {
     },
     filter() {
       let filter = [];
-      if (this.searchSettings.platforms.length > 0) {
-        filter.push([
-          "bioAssays.arrayDesignUsed.id in (" + this.searchSettings.platforms.map(p => p.id).join(",") + ")",
-            "bioAssays.originalPlatform.id in (" + this.searchSettings.platforms.map(p => p.id).join(",") + ")"
-        ]);
-      }
       if (this.searchSettings.taxon?.length > 0) {
         filter.push(["taxon.id in (" + this.searchSettings.taxon.map(t => t.id).join(",") + ")"]);
       }
-      if (this.searchSettings.technologyTypes.length > 0) {
-        filter.push(["bioAssays.arrayDesignUsed.technologyType in (" + this.searchSettings.technologyTypes.map(quoteIfNecessary).join(", ") + ")"]);
+      if (this.searchSettings.platforms.length > 0) {
+        let platformIds = this.searchSettings.platforms
+          .filter(p => this.searchSettings.technologyType && p.technologyType !== this.searchSettings.technologyType)
+          .map(p => p.id);
+        if (platformIds.length > 0) {
+          filter.push([
+            "bioAssays.arrayDesignUsed.id in (" + platformIds.join(",") + ")",
+            "bioAssays.originalPlatform.id in (" + platformIds.join(",") + ")"
+          ]);
+        }
+      }
+      if (this.searchSettings.technologyType) {
+        filter.push([
+          "bioAssays.arrayDesignUsed.technologyType = " + quoteIfNecessary(this.searchSettings.technologyType),
+          "bioAssays.originalPlatform.technologyType = " + quoteIfNecessary(this.searchSettings.technologyType)
+        ]);
       }
       if (this.searchSettings.categories.length > 0) {
         // check if all categories are picked
@@ -247,9 +261,9 @@ export default {
       let numberOfClauses = sumBy(filter, f => f.length);
       if (numberOfClauses > 100) {
         console.error("Too many clauses (" + numberOfClauses + ") in filter.");
-        return "";
+        return [];
       }
-      return filter.map(a => a.join(" or ")).join(" and ");
+      return filter;
     },
     browsingOptions() {
       // query can be null if reset
@@ -260,7 +274,7 @@ export default {
           sort: this.options.sortBy[0] && (this.options.sortDesc[0] ? "-" : "+") + this.options.sortBy[0],
           offset: (this.options.page - 1) * this.options.itemsPerPage,
           limit: this.options.itemsPerPage,
-          includeBlacklistedTerms: !!this.searchSettings.includeBlacklistedTerms
+          ignoreExcludedTerms: !!this.searchSettings.ignoreExcludedTerms
         };
       } else {
         return {
@@ -268,19 +282,36 @@ export default {
           sort: this.options.sortBy[0] && (this.options.sortDesc[0] ? "-" : "+") + this.options.sortBy[0],
           offset: (this.options.page - 1) * this.options.itemsPerPage,
           limit: this.options.itemsPerPage,
-          includeBlacklistedTerms: !!this.searchSettings.includeBlacklistedTerms
+          ignoreExcludedTerms: !!this.searchSettings.ignoreExcludedTerms
         };
       }
     },
     ...mapState({
       debug: state => state.debug,
       errors(state) {
-        return Object.values(state.api.error)
-          .filter(e => e !== null)
-          .map(e => e.response?.data?.error || e)
-          .slice(0, 1);
+        if (state.lastError) {
+          return [state.lastError];
+        } else {
+          return Object.values(state.api.error)
+            .filter(e => e !== null)
+            .map(e => e.response?.data?.error || e)
+            .slice(0, 1);
+        }
       },
       datasets: state => state.api.datasets?.data || [],
+      appliedBrowsingOptions(state) {
+        if (state.api.datasets) {
+          return {
+            query: state.api.datasets.query,
+            filter: state.api.datasets.filter,
+            offset: state.api.datasets.offset,
+            limit: state.api.datasets.limit,
+            sort: state.api.datasets.sort ? (state.api.datasets.sort.direction + state.api.datasets.sort.orderBy) : null
+          };
+        } else {
+          return this.browsingOptions;
+        }
+      },
       totalNumberOfExpressionExperiments: state => state.api.datasets?.totalElements || 0,
       footerProps: state => {
         if (state.api.datasets === undefined) {
@@ -346,21 +377,21 @@ export default {
     filterSummary() {
       const filters = [];
       if (this.searchSettings.query) {
-        filters.push('query');
+        filters.push("query");
       }
       if (this.searchSettings.taxon !== null && this.searchSettings.taxon.length > 0) {
-        filters.push('taxa');
+        filters.push("taxa");
       }
       if (this.searchSettings.platforms.length > 0) {
-        filters.push('platforms');
+        filters.push("platforms");
       }
-      if (this.searchSettings.technologyTypes.length > 0) {
-        filters.push('technologies');
+      if (this.searchSettings.technologyType) {
+        filters.push("technology type");
       }
       if (this.searchSettings.annotations.length > 0) {
-        filters.push('annotations');
+        filters.push("annotations");
       }
-      if (filters.length > 0){
+      if (filters.length > 0) {
         return "Filters applied: " + filters.join(", ");
       } else {
         return "";
@@ -369,7 +400,7 @@ export default {
     filterDescription() {
       const filter = [];
       if (this.searchSettings.query) {
-        filter.push({key: "Query", value: ` "${this.searchSettings.query}"` });
+        filter.push({ key: "Query", value: ` "${this.searchSettings.query}"` });
       }
       if (this.searchSettings.taxon !== null && this.searchSettings.taxon.length > 0) {
         const taxaValues = this.searchSettings.taxon.map(taxon => taxon.commonName);
@@ -377,10 +408,10 @@ export default {
       }
       if (this.searchSettings.platforms.length > 0) {
         const platformValues = this.searchSettings.platforms.map(platforms => platforms.name);
-        filter.push({ key: "Platforms", value: platformValues});
+        filter.push({ key: "Platforms", value: platformValues });
       }
-      if (this.searchSettings.technologyTypes.length > 0) {
-        filter.push({ key: "Technologies", value: this.searchSettings.technologyTypes});
+      if (this.searchSettings.technologyType) {
+        filter.push({ key: "Technology Type", value: [this.searchSettings.technologyType] });
       }
       if (this.searchSettings.annotations.length > 0) {
         const annotationGroups = this.searchSettings.annotations.reduce((acc, annotation) => {
@@ -396,11 +427,11 @@ export default {
           filter.push({ key: className, value: annotationGroups[className] });
         }
       }
-      if (filter.length > 0){
+      if (filter.length > 0) {
         const description = filter.map(filter => {
           const { key, value } = filter;
           const capitalizedKey = this.capitalizeFirstLetter(key);
-   
+
           if (Array.isArray(value)) {
             const capitalizedValues = value.map(this.capitalizeFirstLetter);
             return `${capitalizedKey}= ${capitalizedValues.join(" OR ")}`;
@@ -408,8 +439,8 @@ export default {
             const capitalizedValue = this.capitalizeFirstLetter(value);
             return `${capitalizedKey}= ${capitalizedValue}`;
           }
-          }).join("\n AND \n");
-        return description
+        }).join("\n AND \n");
+        return description;
       } else {
         return "";
       }
@@ -438,62 +469,88 @@ export default {
       });
     }, 1000),
     browse(browsingOptions, updateEverything) {
-      return compressArg(browsingOptions.filter).then(compressedFilter => {
-        // update available annotations and number of datasets
-        let updateDatasetsPromise = this.updateDatasets(browsingOptions.query, compressedFilter, browsingOptions.offset, browsingOptions.limit, browsingOptions.sort);
-        if (updateEverything) {
-          // since the query or filters have changed, reset the browsing offset to the beginning
-          browsingOptions.offset = 0;
-          this.options.page = 1;
-          let updateDatasetsAnnotationsPromise;
-          if (browsingOptions.includeBlacklistedTerms) {
-            updateDatasetsAnnotationsPromise = this.updateAvailableAnnotations(browsingOptions.query, compressedFilter);
-          } else {
-            updateDatasetsAnnotationsPromise = compressArg(blacklistedTerms.join(","))
-              .then(excludedTerms => this.updateAvailableAnnotations(browsingOptions.query, compressedFilter, excludedTerms));
-          }
-          let updateDatasetsPlatformsPromise = this.updateAvailablePlatforms(browsingOptions.query, compressedFilter);
-          let updateDatasetsTaxaPromise = this.updateAvailableTaxa(browsingOptions.query, compressedFilter);
-          return Promise.all([updateDatasetsPromise, updateDatasetsAnnotationsPromise, updateDatasetsPlatformsPromise, updateDatasetsTaxaPromise]);
+      // update available annotations and number of datasets
+      let updateDatasetsPromise = this.updateDatasets(browsingOptions.query, browsingOptions.filter, browsingOptions.offset, browsingOptions.limit, browsingOptions.sort);
+      if (updateEverything) {
+        // since the query or filters have changed, reset the browsing offset to the beginning
+        browsingOptions.offset = 0;
+        this.options.page = 1;
+        let updateDatasetsAnnotationsPromise;
+        if (browsingOptions.ignoreExcludedTerms) {
+          updateDatasetsAnnotationsPromise = this.updateAvailableAnnotations(browsingOptions.query, browsingOptions.filter);
         } else {
-          return updateDatasetsPromise;
+          updateDatasetsAnnotationsPromise = compressArg(excludedTerms.join(","))
+            .then(excludedTerms => this.updateAvailableAnnotations(browsingOptions.query, browsingOptions.filter, excludedTerms));
         }
-      });
+        let updateDatasetsPlatformsPromise = this.updateAvailablePlatforms(browsingOptions.query, browsingOptions.filter);
+        let updateDatasetsTaxaPromise = this.updateAvailableTaxa(browsingOptions.query, browsingOptions.filter);
+        return Promise.all([updateDatasetsPromise, updateDatasetsAnnotationsPromise, updateDatasetsPlatformsPromise, updateDatasetsTaxaPromise]);
+      } else {
+        return updateDatasetsPromise;
+      }
     },
     updateDatasets(query, filter, offset, limit, sort) {
-      let payload = { query: query, filter: filter, offset: offset, limit: limit, sort: sort };
-      if (query !== undefined) {
-        payload["query"] = query;
-      }
-      return this.$store.dispatch("api/getDatasets", {
-        params: payload
+      return compressFilter(filter).then((compressedFilter) => {
+        let payload = { query: query, filter: compressedFilter, offset: offset, limit: limit, sort: sort };
+        if (query !== undefined) {
+          payload["query"] = query;
+        }
+        return this.$store.dispatch("api/getDatasets", {
+          params: payload
+        });
       });
     },
     updateAvailableAnnotations(query, filter, excludedTerms) {
-      let payload = {
-        filter: filter,
-        // the cap limit is 5000, so anything below 4 is useless
-        minFrequency: filter.length > 0 ? 1 : excludedTerms ? 4 : 3,
-        exclude: ["parentTerms"]
-      };
-      if (query !== undefined) {
-        payload["query"] = query;
+      // we want to keep category-wide sub-clauses, but not individual terms
+      let disallowedPrefixes = [
+        "allCharacteristics.value",
+        "characteristics.value",
+        "bioAssays.sampleUsed.characteristics.value",
+        "experimentalDesign.experimentalFactors.factorValues.characteristics.value"
+      ];
+      if (filter) {
+        filter = filter.map(clause => clause
+          .filter(subClause => !disallowedPrefixes.some(p => subClause.startsWith(p))))
+          .filter(clause => clause.length > 0);
       }
-      if (excludedTerms !== undefined) {
-        payload["excludedTerms"] = excludedTerms;
-      }
-      return this.$store.dispatch("api/getDatasetsAnnotations", { params: payload });
+      return compressFilter(filter).then(compressedFilter => {
+        let payload = {
+          filter: compressedFilter,
+          // the cap limit is 5000, so anything below 4 is useless
+          minFrequency: filter.length > 0 ? 1 : excludedTerms ? 4 : 3,
+          exclude: ["parentTerms"]
+        };
+        if (query !== undefined) {
+          payload["query"] = query;
+        }
+        if (excludedTerms !== undefined) {
+          payload["excludedTerms"] = excludedTerms;
+        }
+        return this.$store.dispatch("api/getDatasetsAnnotations", { params: payload });
+      });
     },
     updateOpenApiSpecification() {
       return this.$store.dispatch("api/getOpenApiSpecification");
     },
     updateAvailableTaxa(query, filter) {
-      let payload = query !== undefined ? { query: query, filter: filter } : { filter: filter };
-      return this.$store.dispatch("api/getDatasetsTaxa", { params: payload });
+      // remove any clauses involving taxon
+      if (filter) {
+        filter = filter.map(clause => clause.filter(subClause => !subClause.startsWith("taxon."))).filter(clause => clause.length > 0);
+      }
+      return compressFilter(filter).then(compressedFilter => {
+        let payload = query !== undefined ? { query: query, filter: compressedFilter } : { filter: compressedFilter };
+        return this.$store.dispatch("api/getDatasetsTaxa", { params: payload });
+      });
     },
     updateAvailablePlatforms(query, filter) {
-      let payload = query !== undefined ? { query: query, filter: filter } : { filter: filter };
-      return this.$store.dispatch("api/getDatasetsPlatforms", { params: payload });
+      // remove any clauses involving platforms
+      if (filter) {
+        filter = filter.map(clause => clause.filter(subClause => !subClause.startsWith("bioAssays.arrayDesignUsed.") && !subClause.startsWith("bioAssays.originalPlatform."))).filter(clause => clause.length > 0);
+      }
+      return compressFilter(filter).then(compressedFilter => {
+        let payload = query !== undefined ? { query: query, filter: compressedFilter } : { filter: compressedFilter };
+        return this.$store.dispatch("api/getDatasetsPlatforms", { params: payload });
+      });
     },
     hasHighlight(item) {
       return item.searchResult !== undefined && item.searchResult.highlights !== null;
@@ -513,13 +570,14 @@ export default {
     },
     capitalizeFirstLetter(str) {
       return str
-        .split(' ')
+        .split(" ")
         .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-        .join(' ');
-    }
+        .join(" ");
+    },
+    ...mapMutations(["setTitle", "setFilterSummary", "setFilterDescription"])
   },
   created() {
-    compressArg(blacklistedTerms.join(",")).then((excludedTerms) => {
+    compressArg(excludedTerms.join(",")).then((excludedTerms) => {
       return Promise.all([
         this.updateOpenApiSpecification(),
         this.updateAvailableTaxa(undefined, this.filter),
@@ -530,35 +588,31 @@ export default {
     });
   },
   watch: {
+    title(newVal) {
+      this.setTitle(newVal);
+    },
     query: function(newVal) {
       this.searchSettings.query = newVal !== undefined ? newVal : null;
     },
-    totalNumberOfExpressionExperiments: function(newVal) {
-      if (newVal > 0) {
-        this.$store.commit("setTitle", "Showing "+ newVal + " results");
-      } else {
-        this.$store.commit("setTitle", null);
-      }
-    },
     filterSummary: function(newVal) {
-      this.$store.commit("setFilterSummary", newVal);
+      this.setFilterSummary(newVal);
     },
     filterDescription: function(newVal) {
-      this.$store.commit("setFilterDescription", newVal);
+      this.setFilterDescription(newVal);
     },
     "browsingOptions": function(newVal, oldVal) {
       let promise;
-      if (oldVal !== undefined && (oldVal.query !== newVal.query || oldVal.filter !== newVal.filter || oldVal.includeBlacklistedTerms !== newVal.includeBlacklistedTerms)) {
+      if (oldVal !== undefined && (oldVal.query !== newVal.query || !isEqual(oldVal.filter, newVal.filter) || oldVal.ignoreExcludedTerms !== newVal.ignoreExcludedTerms)) {
         // query has changed, debounce
         if (oldVal.query !== newVal.query) {
           promise = this.search(newVal) || Promise.resolve();
-        } else if (oldVal.filter !== newVal.filter) {
+        } else if (!isEqual(oldVal.filter, newVal.filter)) {
           promise = this.browse(newVal, true);
-        } else if (oldVal.includeBlacklistedTerms !== newVal.includeBlacklistedTerms) {
-          if (newVal.includeBlacklistedTerms) {
+        } else if (oldVal.ignoreExcludedTerms !== newVal.ignoreExcludedTerms) {
+          if (newVal.ignoreExcludedTerms) {
             promise = this.updateAvailableAnnotations(newVal.query, newVal.filter);
           } else {
-            promise = compressArg(blacklistedTerms.join(","))
+            promise = compressArg(excludedTerms.join(","))
               .then(excludedTerms => this.updateAvailableAnnotations(newVal.query, newVal.filter, excludedTerms));
           }
         } else {
@@ -583,17 +637,17 @@ export default {
 };
 </script>
 
-<style>
-.v-data-table__wrapper {
+<style scoped>
+.browser-data-table >>> .v-data-table__wrapper {
     margin-bottom: 59px;
     max-height: 100%;
 }
 
-.v-data-table-header th {
+.browser-data-table >>> .v-data-table-header th {
     white-space: nowrap;
 }
 
-.v-data-footer {
+.browser-data-table >>> .v-data-footer {
     background: white;
     position: fixed;
     width: 100%;