From 0c56c4f87f28e49d8973195f8dffc034b70fafc9 Mon Sep 17 00:00:00 2001 From: Libby Natola Date: Wed, 2 Aug 2023 10:01:46 -0700 Subject: [PATCH 1/5] Add menu dropdown and v-card for detailed query and filter options from the filterSummary --- src/components/AppBar.vue | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/AppBar.vue b/src/components/AppBar.vue index 5a45ae7..eeca486 100644 --- a/src/components/AppBar.vue +++ b/src/components/AppBar.vue @@ -11,9 +11,17 @@
{{ title }}
-
- {{ filterSummary }} -
+ + + + Detailed query and filter selections: + TEXT TEXT QUERY QUERY FILTER TEXT + + From 8fee9f1be4680f399562146f51e65abcf76d938d Mon Sep 17 00:00:00 2001 From: Libby Natola Date: Wed, 2 Aug 2023 11:52:35 -0700 Subject: [PATCH 2/5] Link filterDescription menu content to Browser.vue, assign filterDescription data in computed property, still ugly formatting --- src/components/AppBar.vue | 3 ++- src/store/store.js | 6 ++++- src/views/Browser.vue | 55 +++++++++++++++++++++++++++++++++++---- 3 files changed, 57 insertions(+), 7 deletions(-) diff --git a/src/components/AppBar.vue b/src/components/AppBar.vue index eeca486..dd60376 100644 --- a/src/components/AppBar.vue +++ b/src/components/AppBar.vue @@ -19,7 +19,7 @@ Detailed query and filter selections: - TEXT TEXT QUERY QUERY FILTER TEXT + {{ filterDescription }} @@ -168,6 +168,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 index 7d6ef6e..e1c1d94 100644 --- 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 index 4790080..cf30a38 100644 --- a/src/views/Browser.vue +++ b/src/views/Browser.vue @@ -349,8 +349,7 @@ 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'); @@ -366,7 +365,50 @@ export default { } 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 }); + } + 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; + if (Array.isArray(value)) { + return `${key}: ${value.join(" OR ")}`; + } else { + return `${key}: ${value}`; + } + }).join(" AND "); + return description + } else { + return ""; + } } }, methods: { @@ -489,8 +531,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)) { From 8e487305d70b16b789622ac5da7c43781151472f Mon Sep 17 00:00:00 2001 From: Libby Natola Date: Wed, 2 Aug 2023 12:26:23 -0700 Subject: [PATCH 3/5] Improved formatting of filterDescription --- src/components/AppBar.vue | 4 +++- src/views/Browser.vue | 6 +++--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/AppBar.vue b/src/components/AppBar.vue index dd60376..8cdb341 100644 --- a/src/components/AppBar.vue +++ b/src/components/AppBar.vue @@ -19,7 +19,9 @@ Detailed query and filter selections: - {{ filterDescription }} + +
+ diff --git a/src/views/Browser.vue b/src/views/Browser.vue index cf30a38..ac486d1 100644 --- a/src/views/Browser.vue +++ b/src/views/Browser.vue @@ -369,7 +369,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); @@ -400,11 +400,11 @@ export default { const description = filter.map(filter => { const { key, value } = filter; if (Array.isArray(value)) { - return `${key}: ${value.join(" OR ")}`; + return `${key}: (${value.join(") OR (")})`; } else { return `${key}: ${value}`; } - }).join(" AND "); + }).join("
AND
"); return description } else { return ""; From 34e778d15ddc70765b30766f5eddef801d115852 Mon Sep 17 00:00:00 2001 From: Libby Natola Date: Wed, 2 Aug 2023 14:56:40 -0700 Subject: [PATCH 4/5] Formatting filterDescriptions --- src/views/Browser.vue | 28 +++++++++++++++++++--------- 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/src/views/Browser.vue b/src/views/Browser.vue index ac486d1..652a35e 100644 --- a/src/views/Browser.vue +++ b/src/views/Browser.vue @@ -352,13 +352,13 @@ export default { 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(", "); @@ -369,18 +369,18 @@ 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); - filter.push({ key: "taxa", value: taxaValues }); + 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}); + filter.push({ key: "Platforms", value: platformValues}); } if (this.searchSettings.technologyTypes.length > 0) { - filter.push({ key: "technologies", value: this.searchSettings.technologyTypes}); + filter.push({ key: "Technologies", value: this.searchSettings.technologyTypes}); } if (this.searchSettings.annotations.length > 0) { const annotationGroups = this.searchSettings.annotations.reduce((acc, annotation) => { @@ -399,10 +399,14 @@ export default { if (filter.length > 0){ const description = filter.map(filter => { const { key, value } = filter; + const capitalizedKey = this.capitalizeFirstLetter(key); + if (Array.isArray(value)) { - return `${key}: (${value.join(") OR (")})`; + const capitalizedValues = value.map(this.capitalizeFirstLetter); + return `${capitalizedKey}= ${capitalizedValues.join(" OR ")}`; } else { - return `${key}: ${value}`; + const capitalizedValue = this.capitalizeFirstLetter(value); + return `${capitalizedKey}= ${capitalizedValue}`; } }).join("
AND
"); return description @@ -506,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() { From ad1086652c10351e56703a99920dd15ede7c9a26 Mon Sep 17 00:00:00 2001 From: Libby Natola Date: Wed, 2 Aug 2023 16:14:15 -0700 Subject: [PATCH 5/5] Replace v-html tag with template to prevent html queries from affecting browser --- src/components/AppBar.vue | 10 ++++++---- src/views/Browser.vue | 2 +- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/AppBar.vue b/src/components/AppBar.vue index 8cdb341..ff49197 100644 --- a/src/components/AppBar.vue +++ b/src/components/AppBar.vue @@ -11,16 +11,18 @@
{{ title }}
- -