From 53484f5e0159a82a4c871ed6c78186eea071d953 Mon Sep 17 00:00:00 2001
From: Guillaume Poirier-Morency <guillaumepoiriermorency@gmail.com>
Date: Wed, 16 Aug 2023 09:24:34 -0700
Subject: [PATCH] Various fixes

Sort annotations by number of datasets instead of entropy. This way
options are never shuffled when the total number of datasets displayed
changed.

Add a strikethrough to quickly identify terms in the exclusion list. It
does not cover inferred terms however.

Use getCategoryId() consistently.

Add some bottom margins to the SearchSettings items.

Add a heading to the taxon selector.
---
 src/components/AnnotationSelector.vue     | 78 +++++++++--------------
 src/components/DownloadButton.vue         |  4 +-
 src/components/SearchSettings.vue         | 11 ++--
 src/components/TaxonSelector.vue          | 58 +++++++++--------
 src/components/TechnologyTypeSelector.vue | 35 +++++++---
 5 files changed, 97 insertions(+), 89 deletions(-)

diff --git a/src/components/AnnotationSelector.vue b/src/components/AnnotationSelector.vue
index 715ec7a..8e1a21f 100644
--- a/src/components/AnnotationSelector.vue
+++ b/src/components/AnnotationSelector.vue
@@ -5,7 +5,8 @@
                 Annotations
             </div>
             <v-spacer></v-spacer>
-            <v-btn v-if="selectedValues.length > 0" @click="selectedValues = []" small text color="primary" :disabled="disabled">
+            <v-btn v-if="selectedValues.length > 0" @click="selectedValues = []" small text color="primary"
+                   :disabled="disabled">
                 Clear Selection
             </v-btn>
         </div>
@@ -13,23 +14,22 @@
         <v-treeview v-model="selectedValues" :items="rankedAnnotations" :disabled="disabled" item-key="id"
                     selectable
                     dense
-                    class="hide-root-checkboxes"
+                    :class="debug ? '' : '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-else v-text="getTitle(item)" class="text-capitalize text-truncate"
+                      :title="getTitle(item).length > 30 && getTitle(item)"/>
                 <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>
+                    <small :style="isExcluded(item) ? 'text-decoration: line-through;' : ''">{{ 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>
+                <div v-if="!item.isCategory || debug" class="text-right">
+                    {{ formatNumber(item.numberOfExpressionExperiments) }}<br>
+                </div>
             </template>
         </v-treeview>
         <p v-show="annotations.length === 0">
@@ -39,9 +39,9 @@
 </template>
 
 <script>
-import { chain, isEqual, max, sum } from "lodash";
-import { formatDecimal, formatNumber } from "@/utils";
-import { annotationSelectorOrderArray, ontologySources } from "@/config/gemma";
+import { chain, isEqual, max, sumBy } from "lodash";
+import { formatDecimal, formatNumber, getCategoryId, getTermId } from "@/utils";
+import { annotationSelectorOrderArray, excludedTerms, ontologySources } from "@/config/gemma";
 import { mapState } from "vuex";
 
 /**
@@ -67,12 +67,7 @@ export default {
     /**
      * If true, the checkboxes in the tree view are disabled.
      */
-    disabled: Boolean,
-    /**
-     * In order to rank annotations, we need to know how many datasets total are
-     * matched.
-     */
-    totalNumberOfExpressionExperiments: Number
+    disabled: Boolean
   },
   data() {
     return {
@@ -101,12 +96,8 @@ export default {
      */
     rankedAnnotations() {
       let selectedValues = new Set(this.selectedValues);
-      let byEntropy = (a, b) => {
-        // prioritize selected annotations
-        if (selectedValues.has(a.id) !== selectedValues.has(b.id)) {
-          return selectedValues.has(a.id) ? -1 : 1;
-        }
-        return this.entropy(b) - this.entropy(a);
+      let byNumberOfExpressionExperiments = (a, b) => {
+        return this.getNumberOfExpressionExperiments(b) - this.getNumberOfExpressionExperiments(a);
       };
       return this.annotations
         .map(a => {
@@ -123,12 +114,12 @@ export default {
                 isCategory: false,
                 children: c.children && getChildren(c)
               };
-            }).sort(byEntropy);
+            }).sort(byNumberOfExpressionExperiments);
           }
 
           return {
             ...a,
-            id: this.getCategoryId(a),
+            id: getCategoryId(a),
             isCategory: true,
             children: getChildren(a)
           };
@@ -137,14 +128,14 @@ export default {
           if (a.classUri && b.classUri) {
             let aI = annotationSelectorOrderArray.indexOf(a.classUri);
             let bI = annotationSelectorOrderArray.indexOf(b.classUri);
-            if(aI !== -1 && bI !== -1) {
+            if (aI !== -1 && bI !== -1) {
               return aI - bI;
             } else if (aI !== -1) {
               return -1;
             } else if (bI !== -1) {
               return 1;
             } else {
-               return 0;
+              return 0;
             }
           } else if (a.classUri) {
             return -1;
@@ -160,31 +151,22 @@ export default {
     })
   },
   methods: {
+    sumBy,
     formatNumber,
     formatDecimal,
-    /**
-     * @returns {*|string|null} an ID for the category or null if the term is uncategorized
-     */
-    getCategoryId(term) {
-      return term.classUri || term.className?.toLowerCase() || null;
-    },
     getId(term) {
-      return this.getCategoryId(term) + SEPARATOR + (term.termUri || term.termName?.toLowerCase());
+      return getCategoryId(term) + SEPARATOR + getTermId(term);
     },
-    entropy(item) {
-      if (this.isUncategorized(item)) {
-        return 0;
-      }
+    getNumberOfExpressionExperiments(item) {
       if (item.isCategory) {
-        // FIXME: because terms are not independent, we cannot sum their entropy
-        return max(item.children.map(c => this.entropy(c)));
+        // FIXME: because terms are not independent, we cannot sum their number of expression experiments
+        return max(item.children.map(c => this.getNumberOfExpressionExperiments(c))) || 0;
+      } else {
+        return item.numberOfExpressionExperiments;
       }
-      const p = item.numberOfExpressionExperiments / this.totalNumberOfExpressionExperiments;
-      if (p === 0 || p === 1) {
-        return 0;
-      }
-      let distribution = [p, 1 - p];
-      return -sum(distribution.map(p => p * Math.log(p)));
+    },
+    isExcluded(item) {
+      return excludedTerms.includes(item.classUri) || excludedTerms.includes(item.termUri);
     },
     isUncategorized(item) {
       return !item.className && !item.classUri;
@@ -218,7 +200,7 @@ export default {
      * Selected annotations, grouped by category and excluding selected categories.
      */
     computeSelectedAnnotations(newVal, selectedCategories) {
-      let sc = new Set(selectedCategories.map(sc => this.getCategoryId(sc)));
+      let sc = new Set(selectedCategories.map(sc => getCategoryId(sc)));
       return newVal
         // exclude annotations from selected categories
         .filter(a => !sc.has(a.split(SEPARATOR, 2)[0]))
diff --git a/src/components/DownloadButton.vue b/src/components/DownloadButton.vue
index 02170eb..241d6cb 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 { compressFilter, downloadAs, formatNumber } from "@/utils";
+import { compressFilter, downloadAs, formatNumber, getCategoryId } from "@/utils";
 import axios from "axios";
 
 const termsAndConditionsHeader = [
@@ -50,7 +50,7 @@ export default {
     },
     readableFilter() {
       let annotationByCategoryId = chain(this.searchSettings.annotations)
-        .groupBy(t => t.classUri || t.className?.toLowerCase() || null)
+        .groupBy(getCategoryId)
         .values()
         .map(annotations => annotations.map(a => a.termName).join(", "))
         .join("; ")
diff --git a/src/components/SearchSettings.vue b/src/components/SearchSettings.vue
index 54c9857..56f6464 100644
--- a/src/components/SearchSettings.vue
+++ b/src/components/SearchSettings.vue
@@ -19,32 +19,35 @@
                 outlined
                 clearable
                 hide-details
+                class="mb-3"
         ></v-text-field>
         <TaxonSelector
                 v-model="searchSettings.taxon"
                 :taxon="taxon"
                 :disabled="taxonDisabled"
-                :loading="taxaLoading"/>
+                :loading="taxaLoading"
+                class="mb-1"/>
         <TechnologyTypeSelector
                 v-if="searchSettings.resultTypes.indexOf(platformResultType) === -1"
                 v-model="searchSettings.platforms"
                 :platforms="platforms"
                 :selected-technology-types.sync="searchSettings.technologyTypes"
                 :disabled="platformDisabled"
-                :loading="platformLoading"/>
+                :loading="platformLoading"
+                class="mb-1"/>
         <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"/>
+                v-show="false"
+                class="mb-1"/>
         <AnnotationSelector
                 v-model="searchSettings.annotations"
                 :annotations="annotations"
                 :loading="annotationLoading"
                 :disabled="annotationDisabled"
-                :total-number-of-expression-experiments="totalNumberOfExpressionExperiments"
                 :selectedCategories.sync="searchSettings.categories"/>
         <div :class="debug ? '' : 'd-lg-none'">
             <div style="margin-bottom: 59px;"></div>
diff --git a/src/components/TaxonSelector.vue b/src/components/TaxonSelector.vue
index 128fe17..6cc35b2 100644
--- a/src/components/TaxonSelector.vue
+++ b/src/components/TaxonSelector.vue
@@ -1,28 +1,36 @@
 <template>
-  <div>
-    <v-progress-linear :active="loading" indeterminate/>
-    <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" :disabled="disabled">
-          Clear Selection
-              </v-btn>
-      </span>
-        </template>
-    </v-treeview>
-  </div>
+    <div>
+        <div class="d-flex align-baseline">
+            <div class="text--secondary">
+                Taxa
+            </div>
+            <v-progress-linear :active="loading" indeterminate/>
+            <v-spacer/>
+            <v-btn v-if="selectedTaxaIds.length > 0" @click="clearSelections" small text color="primary"
+                   :disabled="disabled">
+                Clear Selection
+            </v-btn>
+        </div>
+        <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 }">
+                <div class="text-right">{{ formatNumber(item.number) }}</div>
+            </template>
+        </v-treeview>
+        <p v-show="treeItems.length === 0">
+            No taxa available
+        </p>
+    </div>
 </template>
 
 <script>
@@ -77,7 +85,7 @@ export default {
 
         items[0].children.push(taxonItem);
       }
-      return items;
+      return items[0].children;
     },
     selectedTaxa() {
       if (!this.selectedTaxaIds) return [];
diff --git a/src/components/TechnologyTypeSelector.vue b/src/components/TechnologyTypeSelector.vue
index 0bc422c..a5107ff 100644
--- a/src/components/TechnologyTypeSelector.vue
+++ b/src/components/TechnologyTypeSelector.vue
@@ -1,32 +1,40 @@
 <template>
     <div>
-      <v-progress-linear :active="loading" indeterminate/>
         <div class="d-flex align-baseline">
             <div class="text--secondary">Platforms</div>
             <v-spacer></v-spacer>
-            <v-btn v-if="selectedValues.length > 0" @click="selectedValues = []" small text color="primary" :disabled="disabled">
+            <v-btn v-if="selectedValues.length > 0" @click="selectedValues = []" small text color="primary"
+                   :disabled="disabled">
                 Clear Selection
             </v-btn>
         </div>
+        <v-progress-linear :active="loading" indeterminate/>
         <v-treeview v-model="selectedValues"
                     :items="technologyTypes"
                     :disabled="disabled"
                     item-key="id"
                     item-text="name"
-                    selectable dense>
+                    selectable dense class="hide-root-checkboxes">
             <template v-slot:label="{item}">
-                {{ item.name }}
+                <span :title="item.name.length > 30 && item.name">{{ item.name }}</span>
             </template>
             <template v-slot:append="{item}">
-                {{ item.numberOfExpressionExperiments }}
+                <div v-if="item.numberOfExpressionExperiments" class="text-right">
+                    {{ formatNumber(item.numberOfExpressionExperiments) }}
+                </div>
             </template>
         </v-treeview>
+        <p v-show="technologyTypes.length === 0">
+            No technology types available
+        </p>
     </div>
 </template>
 
 <script>
 
-import { isEqual, sumBy } from "lodash";
+import { chain, isEqual } from "lodash";
+import { formatNumber } from "@/utils";
+import { mapState } from "vuex";
 
 const MICROARRAY_TECHNOLOGY_TYPES = ["ONECOLOR", "TWOCOLOR", "DUALMODE"];
 const OTHER_TECHNOLOGY_TYPES = ["SEQUENCING", "GENELIST", "OTHER"];
@@ -57,18 +65,25 @@ export default {
         {
           id: "RNASEQ",
           name: "RNA-Seq",
-          numberOfExpressionExperiments: sumBy(rnaseqPlatforms, "numberOfExpressionExperiments")
+          numberOfExpressionExperiments: rnaseqPlatforms[0]?.numberOfExpressionExperimentsForTechnologyType || 0
         },
         {
           id: "MICROARRAY",
           name: "Microarray",
           children: microarrayPlatforms,
-          numberOfExpressionExperiments: sumBy(microarrayPlatforms, "numberOfExpressionExperiments")
+          numberOfExpressionExperiments: chain(microarrayPlatforms)
+            .groupBy("technologyType")
+            .mapValues(v => v[0].numberOfExpressionExperimentsForTechnologyType)
+            .values()
+            .sum()
+            .value()
         }
-      ];
-    }
+      ].filter(tt => tt.numberOfExpressionExperiments > 0);
+    },
+    ...mapState(["debug"])
   },
   methods: {
+    formatNumber,
     computeSelectedPlatforms(ids, st) {
       return this.platforms
         .filter(p => ids.has(p.id))