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.
PavlidisLab · Aug 2, 2023 · 0ffbdcf · 0ffbdcf
1 parent 6b906ca
commit 0ffbdcf
Show file tree

Hide file tree

Showing 12 changed files with 442 additions and 267 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -27,42 +27,52 @@
         <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"
                 ticks="always"
                 :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,