barmar/tethys.frontend
1
0
Fork 0
forked from geolba/tethys.frontend
Code Pull requests Activity

Facetsearch progressed. Pending fixing onClearFacetCategoryOPEN behaviour. Facets menu doesn't work properly.

Browse source
This commit is contained in:
Porras-Bernardez 2024-06-12 16:51:26 +02:00
parent a70e454cbc
commit da430d6142
6 changed files with 264 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

143
src/views/search-view/search-view-component.ts
View file

@ -10,7 +10,7 @@ import { OpenSettings } from "@/models/solr";
import DatasetService from "../../services/dataset.service";
import { Suggestion, Dataset, SearchType } from "@/models/dataset";
// import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "@/models/headers";
import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance } from "@/models/headers";
import { SolrResponse, FacetFields, FacetItem, FacetResults, FacetInstance, OpenSearchResponse, HitHighlight } from "@/models/headers";
import { ActiveFilterCategories } from "@/models/solr";
import { SOLR_HOST, SOLR_CORE } from "@/constants";
import { IPagination } from "@/models/pagination";
@ -100,7 +100,7 @@ export default class SearchViewComponent extends Vue {
// Lifecycle hook: executed before the component is mounted
beforeMount(): void {
console.log("beforeMount!");
// console.log("beforeMount!");
// this.rdrAPI = new DatasetService();
// Trigger search based on provided display and type props
@ -122,25 +122,66 @@ export default class SearchViewComponent extends Vue {
// Method to trigger a search
onSearch(suggestion: Suggestion | string): void {
console.log("ONSEARCH");
// console.log("ONSEARCH");
// Reset active filter categories and facet results
this.activeFilterCategories = new ActiveFilterCategories();
this.facets = new FacetResults();
this.searchTerm = suggestion;
console.log("This.searchterm: ", this.searchTerm);
console.log("ONSEARCH > suggestion: ", suggestion);
/* Perform faceted search. The method returns an Observable, and the code subscribes to this Observable to handle the response. If the response is successful, it calls the dataHandler method
with the Solr response as a parameter. If there is an error, it calls the errorHandler method with the error message as a parameter */
DatasetService.facetedSearch(suggestion, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe({
next: (res: SolrResponse) => this.dataHandler(res),
// /* Perform faceted search. The method returns an Observable, and the code subscribes to this Observable to handle the response. If the response is successful, it calls the dataHandler method
// with the Solr response as a parameter. If there is an error, it calls the errorHandler method with the error message as a parameter */
// DatasetService.facetedSearch(suggestion, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe({
// next: (res: SolrResponse) => this.dataHandler(res),
// error: (error: string) => this.errorHandler(error),
// });
DatasetService.facetedSearchOPEN(suggestion, this.activeFilterCategories, this.open.core, this.open.host, undefined).subscribe({
// next: (res: { datasets: Dataset[], highlights: HitHighlight[] }) => this.dataHandlerOpen(res.datasets, res.highlights),
next: (res: OpenSearchResponse) => this.dataHandlerOPEN(res),
error: (error: string) => this.errorHandler(error),
});
}
// Handle the search results
private dataHandlerOPEN(res: OpenSearchResponse, filterItem?: FacetItem): void {
// console.log("dataHandlerOPEN (datasets, highlights):");
// console.log(datasets);
// console.log(highlights);
this.results = res.hits.hits.map(hit => hit._source);
this.numFound = res.hits.total.value;
this.pagination.total = res.hits.total.value;
this.pagination.perPage = 10;
this.pagination.data = this.results;
this.pagination.lastPage = Math.ceil(this.pagination.total / this.pagination.perPage);
if (res.aggregations) {
const facet_fields = res.aggregations;
let prop: keyof typeof facet_fields;
for (prop in facet_fields) {
const facetCategory = facet_fields[prop];
if (facetCategory.buckets) {
const facetItems = facetCategory.buckets.map(bucket => new FacetItem(bucket.key, bucket.doc_count));
this.facets[prop] = facetItems.filter(el => el.count > 0);
}
}
}
}
// Method to handle search response
private dataHandler(res: SolrResponse, filterItem?: FacetItem): void {
console.log("dataHandlerSOLR (docs, numFound):");
console.log(res.response.docs);
console.log(res.response.numFound);
// Update results
this.results = res.response.docs;
this.numFound = res.response.numFound;
@ -204,11 +245,16 @@ export default class SearchViewComponent extends Vue {
this.pagination.currentPage = page;
const start = page * this.pagination.perPage - this.pagination.perPage;
// Trigger new search with updated pagination parameters
DatasetService.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, start.toString()).subscribe(
(res: SolrResponse) => this.dataHandler(res),
(error: string) => this.errorHandler(error),
);
// // Trigger new search with updated pagination parameters
// DatasetService.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, start.toString()).subscribe(
// (res: SolrResponse) => this.dataHandler(res),
// (error: string) => this.errorHandler(error),
// );
DatasetService.facetedSearchOPEN(this.searchTerm, this.activeFilterCategories, this.open.core, this.open.host, start.toString()).subscribe({
next: (res: OpenSearchResponse) => this.dataHandlerOPEN(res),
error: (error: string) => this.errorHandler(error),
});
}
// Method to handle facet filtering
@ -229,14 +275,18 @@ export default class SearchViewComponent extends Vue {
// Add filter item to active filter categories
this.activeFilterCategories[facetItem.category].push(facetItem.val);
// Trigger new search with updated filter
DatasetService.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
(res: SolrResponse) => this.dataHandler(res, facetItem),
(error: string) => this.errorHandler(error),
);
// DatasetService.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe(
// (res: SolrResponse) => this.dataHandler(res, facetItem),
// (error: string) => this.errorHandler(error),
// );
DatasetService.facetedSearchOPEN(this.searchTerm, this.activeFilterCategories, this.open.core, this.open.host, undefined).subscribe({
next: (res: OpenSearchResponse) => this.dataHandlerOPEN(res, facetItem),
error: (error: string) => this.errorHandler(error),
});
}
}
// Method to clear facet category filter
// // Method to clear facet category filter
onClearFacetCategory(categoryName: string): void {
delete this.activeFilterCategories[categoryName];
@ -288,4 +338,59 @@ export default class SearchViewComponent extends Vue {
});
}
// Method to clear facet category filter
onClearFacetCategoryOPEN(categoryName: string): void {
delete this.activeFilterCategories[categoryName];
// Trigger new search with updated filter
DatasetService.facetedSearchOPEN(this.searchTerm, this.activeFilterCategories, this.open.core, this.open.host, undefined).subscribe({
next: (res: OpenSearchResponse) => {
this.results = res.hits.hits.map(hit => hit._source);
this.numFound = res.hits.total.value;
// Update pagination
this.pagination.total = res.hits.total.value;
this.pagination.perPage = 10;
this.pagination.currentPage = 1;
this.pagination.data = this.results;
this.pagination.lastPage = Math.ceil(this.pagination.total / this.pagination.perPage);
if (res.aggregations) {
const facet_fields = res.aggregations;
let prop: keyof typeof facet_fields;
for (prop in facet_fields) {
const facetCategory = facet_fields[prop];
if (facetCategory.buckets) {
const facetItems = facetCategory.buckets.map(bucket => new FacetItem(bucket.key, bucket.doc_count));
const facetValues = facetItems.map((facetItem) => {
let rObj: FacetItem;
if (this.facets[prop]?.some((e) => e.val === facetItem.val)) {
// Update existing facet item with new count
const indexOfFacetValue = this.facets[prop].findIndex((i) => i.val === facetItem.val);
rObj = this.facets[prop][indexOfFacetValue];
rObj.count = facetItem.count;
// if facet category is reactivated category, deactivate all filter items
if (prop === categoryName) {
rObj.active = false;
}
} else {
// Create new facet item
rObj = new FacetItem(facetItem.val, facetItem.count);
}
return rObj;
}).filter(el => el.count > 0); // Filter out items with count <= 0
this.facets[prop] = facetValues;
}
}
}
},
error: (error: string) => this.errorHandler(error),
complete: () => console.log("clear facet category completed"),
});
}
}

2
src/views/search-view/search-view-component.vue
View file

@ -34,7 +34,7 @@
<active-facet-category
v-bind:filterItems="values"
v-bind:categoryName="key"
@clear-facet-category="onClearFacetCategory"
@clear-facet-category="onClearFacetCategoryOPEN"
></active-facet-category>
</span>
</div>