Merge pull request #41 from PavlidisLab/queryWindow

Query window
PavlidisLab · Aug 2, 2023 · 6b906ca · 6b906ca
2 parents 2628c9c + ad10866
commit 6b906ca
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 12 deletions.
diff --git a/src/components/AppBar.vue b/src/components/AppBar.vue
@@ -11,9 +11,21 @@
         <div v-show=true style="align-self: center; padding-left: 15px;">
             {{ title }}
         </div>
-        <div v-show=true style="align-self: center; padding-left: 15px;">
-            {{ filterSummary }}
-        </div>
+        <v-menu v-if="filterSummary && filterDescription" style="align-self: center; padding-left: 15px;" offset-y>
+          <template v-slot:activator= "{ on, attrs }">
+            <v-btn plain v-bind="attrs" v-on="on"> {{ filterSummary }}
+              <v-icon>mdi-chevron-down</v-icon>
+            </v-btn>
+          </template>
+          <v-card flat max-width="650px" class="scroll"> 
+            <v-card-subtitle>Detailed query and filter selections:</v-card-subtitle>
+              <v-card-text>
+                <div v-for="line, index in filterDescription.split('\n')" :key="index">
+                  {{ line }}
+                </div>
+              </v-card-text>
+          </v-card>
+        </v-menu>
         <v-spacer/>
         <v-switch v-if="initiallyDebug" v-model="debug" label="Debug Mode" hide-details/>
         <v-menu open-on-hover offset-y>
@@ -160,6 +172,7 @@ export default {
       debug: state => state.debug,
       title: state => state.title,
       filterSummary: state => state.filterSummary,
+      filterDescription: state => state.filterDescription,
       myself(state) {
         if (state.api.myself === undefined) {
           return null;

diff --git a/src/store/store.js b/src/store/store.js
@@ -12,7 +12,7 @@ api.namespaced = true;
 
 export default new Vuex.Store({
   state() {
-    return { title: null, filterSummary: null, debug: debug, lastError: null };
+    return { title: null, filterSummary: null, filterDescription: null, debug: debug, lastError: null };
   },
   mutations: {
     setDebug(state, newVal) {
@@ -24,6 +24,9 @@ export default new Vuex.Store({
     setFilterSummary(state, newVal) {
       state.filterSummary = newVal;
     },
+    setFilterDescription(state, newVal) {
+      state.filterDescription = newVal;
+    },
     setLastError(state, newVal) {
       state.lastError = newVal;
     }
@@ -37,6 +40,7 @@ export default new Vuex.Store({
         delete stateFilter.api["error"];
         delete stateFilter["title"];
         delete stateFilter["filterSummary"]
+        delete stateFilter["filterDescription"]
         delete stateFilter["lastError"];
         return stateFilter;
       }

diff --git a/src/views/Browser.vue b/src/views/Browser.vue
@@ -349,24 +349,70 @@ export default {
         filters.push('query');
       }
       if (this.searchSettings.taxon !== null && this.searchSettings.taxon.length > 0) {
-        console.log(this.searchSettings.taxon.length)
-        filters.push('taxon');
+        filters.push('taxa');
       }
       if (this.searchSettings.platforms.length > 0) {
-        filters.push('platform');
+        filters.push('platforms');
       }
       if (this.searchSettings.technologyTypes.length > 0) {
-        filters.push('technology');
+        filters.push('technologies');
       }
       if (this.searchSettings.annotations.length > 0) {
-        filters.push('annotation');
+        filters.push('annotations');
       }
       if (filters.length > 0){
         return "Filters applied: " + filters.join(", ");
       } else {
         return "";
       }
-      console.log(filters);
+    },
+    filterDescription() {
+      const filter = [];
+      if (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);
+        filter.push({ key: "Taxa", value: taxaValues.join(" OR ") });
+      }
+      if (this.searchSettings.platforms.length > 0) {
+        const platformValues = this.searchSettings.platforms.map(platforms => platforms.name);
+        filter.push({ key: "Platforms", value: platformValues});
+      }
+      if (this.searchSettings.technologyTypes.length > 0) {
+        filter.push({ key: "Technologies", value: this.searchSettings.technologyTypes});
+      }
+      if (this.searchSettings.annotations.length > 0) {
+        const annotationGroups = this.searchSettings.annotations.reduce((acc, annotation) => {
+          const { className, termName } = annotation;
+          if (!acc[className]) {
+            acc[className] = [termName];
+          } else {
+            acc[className].push(termName);
+          }
+          return acc;
+        }, {});
+        for (const className in annotationGroups) {
+          filter.push({ key: className, value: annotationGroups[className] });
+        }
+      }
+      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 ")}`;
+          } else {
+            const capitalizedValue = this.capitalizeFirstLetter(value);
+            return `${capitalizedKey}= ${capitalizedValue}`;
+          }
+          }).join("\n AND \n");
+        return description
+      } else {
+        return "";
+      }
     }
   },
   methods: {
@@ -464,6 +510,12 @@ export default {
       } else {
         return item.name;
       }
+    },
+    capitalizeFirstLetter(str) {
+      return str
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
     }
   },
   created() {
@@ -489,8 +541,11 @@ export default {
       }
     },
     filterSummary: function(newVal) {
-    this.$store.commit("setFilterSummary", newVal);
-  },
+      this.$store.commit("setFilterSummary", newVal);
+    },
+    filterDescription: function(newVal) {
+      this.$store.commit("setFilterDescription", newVal);
+    },
     "browsingOptions": function(newVal, oldVal) {
       let promise;
       if (oldVal !== undefined && (oldVal.query !== newVal.query || oldVal.filter !== newVal.filter || oldVal.includeBlacklistedTerms !== newVal.includeBlacklistedTerms)) {