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

Merge Frank's branch 'dev.frontend/opensearch' into feat/opensearch

Browse source
This commit is contained in:
Porras-Bernardez 2024-08-06 16:41:48 +02:00
commit cc62df68da
25 changed files with 1350 additions and 745 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/views/dataset-detail.component/dataset-detail.component.ts
View file

@ -59,6 +59,8 @@ export default class DatasetDetailComponent extends Vue {
}
onSearch(suggestion: Suggestion | string): void {
console.log("onSearch (dataset-detail.component)");
const host = window.location.host;
const parts = host.split(".");
if (parts[0] === "doi") {

4
src/views/home-view/home-view-component.ts
View file

@ -11,6 +11,9 @@ import { Suggestion } from "@/models/dataset";
export default class HomeViewComponent extends Vue {
public display = "";
/* This method is called when a search suggestion is selected. It takes a parameter suggestion which can be either a Suggestion object or a string.
If it's a string, the method extracts the term and navigates to the "Search" route with the term as a parameter. If it's a Suggestion object, it extracts
the value and type from the suggestion and navigates to the "Search" route with both parameters.*/
onSearch(suggestion: Suggestion | string): void {
let term;
if (typeof suggestion === "string") {
@ -22,6 +25,7 @@ export default class HomeViewComponent extends Vue {
}
}
/* This method is called when the user initiates a search. It navigates to the "Search" route with the display property as a parameter. */
search(): void {
this.$router.push({ name: "Search", params: { display: this.display } });
}

7
src/views/home-view/home-view-component.vue
View file

@ -18,13 +18,6 @@
</a>
</div> -->
<!-- <div class="column">
<div class="col text-center py-3">
<h1>Tethys Research Data Repository</h1>
<p class="lead">Data Publisher for Geoscience Austria</p>
<hr class="center-line" />
</div>
</div> -->
<div class="column">
<div class="col text-center py-3">
<h1>Tethys Research Data Repository</h1>

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

@ -3,16 +3,23 @@ import VsInput from "@/components/vs-input/vs-input.vue";
import VsResult from "@/components/vs-result/vs-result.vue";
import FacetCategory from "@/components/face-category/facet-category.vue";
import ActiveFacetCategory from "@/components/active-facet-category/active-facet-category.vue";
import { SolrSettings } from "@/models/solr";
// import { SolrSettings } from "@/models/solr";
import { OpenSettings } from "@/models/solr";
// import { DatasetService } from "@/services/dataset.service";
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 { FacetFields, FacetItem, FacetResults, FacetInstance, OpenSearchResponse, HitHighlight } from "@/models/headers";
import { ActiveFilterCategories } from "@/models/solr";
import { SOLR_HOST, SOLR_CORE } from "@/constants";
// import { SOLR_HOST, SOLR_CORE } from "@/constants";
import { IPagination } from "@/models/pagination";
import PaginationComponent from "@/components/PaginationComponent.vue";
import { OPEN_HOST, OPEN_CORE } from "@/constants";
// Decorate the component and define its name and components
@Component({
name: "SearchViewComponent",
components: {
@ -23,6 +30,8 @@ import PaginationComponent from "@/components/PaginationComponent.vue";
PaginationComponent,
},
})
// Define the SearchViewComponent class
export default class SearchViewComponent extends Vue {
@Prop()
display!: string;
@ -46,16 +55,22 @@ export default class SearchViewComponent extends Vue {
};
loaded = false;
numFound!: number;
private solr: SolrSettings = {
core: SOLR_CORE, //"rdr_data", // SOLR.core;
host: SOLR_HOST, //"tethys.at",
// core: "test_data", // SOLR.core;
// host: "repository.geologie.ac.at",
// private solr: SolrSettings = {
// core: SOLR_CORE, //"rdr_data", // SOLR.core;
// host: SOLR_HOST, //"tethys.at",
// };
private open: OpenSettings = {
core: OPEN_CORE, //"rdr_data", // SOLR.core;
host: OPEN_HOST, //"tethys.at",
};
// private rdrAPI!: DatasetService;
private error = "";
// Computed property to get search term as string
get stringSearchTerm(): string {
// console.log("stringSearchTerm:", this.searchTerm);
if (typeof this.searchTerm === "string") {
return this.searchTerm;
} else if (this.searchTerm instanceof Suggestion) {
@ -65,6 +80,7 @@ export default class SearchViewComponent extends Vue {
}
}
// Method to check if a search term is present
hasSearchTerm(): boolean {
if (typeof this.searchTerm === "string" && this.searchTerm !== "") {
return true;
@ -77,18 +93,25 @@ export default class SearchViewComponent extends Vue {
// getKeyName(value: string) {
// return Object.entries(Suggestion).find(([key, val]) => val === value)?.[0];
// }
// Method to get enum key by enum value
getEnumKeyByEnumValue<T extends { [index: string]: string }>(myEnum: T, enumValue: string): keyof T | null {
const keys = Object.keys(myEnum).filter((x) => myEnum[x] == enumValue);
return keys.length > 0 ? keys[0] : null;
// return keys[0];
}
// Lifecycle hook: executed before the component is mounted
beforeMount(): void {
// console.log("beforeMount!");
// this.rdrAPI = new DatasetService();
// Trigger search based on provided display and type props
if (this.display != "" && this.type != undefined) {
const enumKey: "Title" | "Author" | "Subject" | null = this.getEnumKeyByEnumValue(SearchType, this.type);
if (enumKey) {
const suggestion = new Suggestion(this.display, SearchType[enumKey]);
const suggestion = new Suggestion(this.display, "NO-IDEA", SearchType[enumKey]);
// const suggestion = new Suggestion(this.display, "" , SearchType[enumKey]);
this.onSearch(suggestion);
} else {
this.onSearch(this.display);
@ -100,209 +123,327 @@ export default class SearchViewComponent extends Vue {
}
}
// onSearch(term: string): void {
// Method to trigger a search
onSearch(suggestion: Suggestion | string): void {
// let queryOperator;
// if (typeof suggestion === "string") {
// suggestion = suggestion + "*";
// queryOperator = "or";
// } else if (suggestion instanceof Suggestion) {
// // term = suggestion.value;
// queryOperator = "and";
// }
// if (term) {
// term = term.trim();
// } else {
// term = "*%3A*";
// }
// console.log("ONSEARCH");
// Reset active filter categories and facet results
this.activeFilterCategories = new ActiveFilterCategories();
this.facets = new FacetResults();
// this.facets = {};
this.searchTerm = suggestion;
DatasetService.facetedSearch(suggestion, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe({
next: (res: SolrResponse) => this.dataHandler(res),
// 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),
// 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),
});
}
private dataHandler(res: SolrResponse, filterItem?: FacetItem): void {
// this.results = datasets;
this.results = res.response.docs;
this.numFound = res.response.numFound;
// Handle the search results
private dataHandlerOPEN(res: OpenSearchResponse, filterItem?: FacetItem): void {
this.results = res.hits.hits.map(hit => hit._source);
this.numFound = res.hits.total.value;
// pagination
this.pagination["total"] = res.response.numFound;
this.pagination["perPage"] = res.responseHeader.params.rows as number;
// this.pagination["currentPage"] = 1;
this.pagination["data"] = res.response.docs;
this.pagination.lastPage = Math.ceil(this.pagination.total / this.pagination.perPage);
// facets
// const facet_fields = res.facet_counts.facet_fields;
// for (const prop in facet_fields) {
// const facetCategory: FacetCategory<any> = facet_fields[prop];
// const facetValues = facetCategory.key.values.map((facet_value: any, i: number) => {
// if (i % 2 === 0 && typeof facet_value == "string") {
// //var rObj = { value: facet, count: facet_fields[prop][i + 1] };
// // FiletrItem with value and count
// const rObj = new FilterItem(facet_value, facetCategory.key.values[i + 1]);
// return rObj;
// }
// });
// .filter(function (el: FilterItem) {
// return el != null && el.count > 0;
// });
// //this.facets.push({ filterName: prop, values: facetValues });
// this.facets[prop] = facetValues;
// console.log("dataHandlerOPEN (results, numFound):");
// console.log(this.results);
// console.log(this.numFound);
// console.log(res.hits.hits);
// console.log(res.hits.total.value); console.log(res);
// console.log("results:");
console.log(res);
// for (const key in this.results) {
// if (Object.prototype.hasOwnProperty.call(this.results, key)) {
// const element = this.results[key];
// // console.log(element.abstract[0]);
// // console.log(element.language);
// console.log(element.server_date_published);
// }
// }
const facet_fields: FacetFields = res.facets;
let prop: keyof typeof facet_fields;
for (prop in facet_fields) {
const facetCategory = facet_fields[prop];
if (facetCategory.buckets) {
const facetItems: Array<FacetItem> = facetCategory.buckets;
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);
let facetValues = facetItems.map((facetItem) => {
let rObj: FacetItem;
if (filterItem?.val == facetItem.val) {
rObj = filterItem;
} else if (this.facets[prop]?.some((e) => e.val === facetItem.val)) {
// console.log(facetValue + " is included")
const indexOfFacetValue = this.facets[prop].findIndex((i) => i.val === facetItem.val);
// console.log(indexOfFacetValue);
rObj = this.facets[prop][indexOfFacetValue];
rObj.count = facetItem.count;
// rObj = new FacetItem(val, count);
} else {
rObj = new FacetItem(facetItem.val, facetItem.count);
}
return rObj;
});
// if (res.aggregations) {
// const facet_fields = res.aggregations;
facetValues = facetValues.filter(function (el) {
return el != null && el.count > 0;
});
// this.facets[prop] = facetCategory;
this.facets[prop] = facetValues;
// 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);
// }
// }
// }
if (res.aggregations) {
const facet_fields = res.aggregations;
let prop: keyof typeof facet_fields;
// Iterate through 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));
let facetValues = facetItems.map((facetItem) => {
let rObj: FacetItem;
// Check if current facet item matches filter item
if (filterItem?.val == facetItem.val) {
rObj = filterItem;
} else if (this.facets[prop]?.some((e) => e.val === facetItem.val)) {
const indexOfFacetValue = this.facets[prop].findIndex((i) => i.val === facetItem.val);
rObj = this.facets[prop][indexOfFacetValue];
rObj.count = facetItem.count;
} else {
// Create new facet item
rObj = new FacetItem(facetItem.val, facetItem.count);
}
return rObj;
});
// Filter out null values and values with count <= 0
facetValues = facetValues.filter(el => el.count > 0);
this.facets[prop] = facetValues;
}
}
}
}
// // 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;
// // Update pagination
// this.pagination["total"] = res.response.numFound;
// this.pagination["perPage"] = res.responseHeader.params.rows as number;
// this.pagination["data"] = res.response.docs;
// this.pagination.lastPage = Math.ceil(this.pagination.total / this.pagination.perPage);
// const facet_fields: FacetFields = res.facets;
// /* This code declares a variable prop with a type of keys of the facet_fields object. The keyof typeof facet_fields type represents the keys of the facet_fields object.
// This means that prop can only hold values that are keys of the facet_fields object. */
// let prop: keyof typeof facet_fields;
// // Iterate through facet fields
// for (prop in facet_fields) {
// const facetCategory = facet_fields[prop];
// if (facetCategory.buckets) {
// const facetItems: Array<FacetItem> = facetCategory.buckets;
// let facetValues = facetItems.map((facetItem) => {
// let rObj: FacetItem;
// // Check if current facet item matches filter item
// if (filterItem?.val == facetItem.val) {
// rObj = filterItem;
// } else if (this.facets[prop]?.some((e) => e.val === facetItem.val)) {
// // console.log(facetValue + " is included")
// // Update existing facet item with new count
// const indexOfFacetValue = this.facets[prop].findIndex((i) => i.val === facetItem.val);
// // console.log(indexOfFacetValue);
// rObj = this.facets[prop][indexOfFacetValue];
// rObj.count = facetItem.count;
// // rObj = new FacetItem(val, count);
// } else {
// // Create new facet item
// rObj = new FacetItem(facetItem.val, facetItem.count);
// }
// return rObj;
// });
// // Filter out null values and values with count <= 0
// facetValues = facetValues.filter(function (el) {
// return el != null && el.count > 0;
// });
// // this.facets[prop] = facetCategory;
// // Update facet values
// this.facets[prop] = facetValues;
// }
// }
// }
// Method to handle search errors
private errorHandler(err: string): void {
this.error = err;
// this.loading = false;
}
// Method to handle pagination
onMenuClick(page: number) {
// const test = page;
// console.log(test);
console.log("onMenuClick");
this.pagination.currentPage = page;
const start = page * this.pagination.perPage - this.pagination.perPage;
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
onFilter(facetItem: FacetItem): void {
console.log("onFilter");
// Reset current page
this.pagination.currentPage = 1;
// console.log(facetItem.val);
// console.log(facetItem.category);
// if (!this.activeFilterCategories.hasOwnProperty(facetItem.category)) {
// Check if filter item already exists
if (!Object.prototype.hasOwnProperty.call(this.activeFilterCategories, facetItem.category)) {
this.activeFilterCategories[facetItem.category] = new Array<string>();
// console.log(this.activeFilterCategories);
}
// if (!this.activeFilterCategories[facetItem.category].some((e) => e === facetItem.val)) {
// Check if filter item is not already applied
if (!this.activeFilterCategories[facetItem.category].some((e) => e === facetItem.val)) {
// Add filter item to active filter categories
this.activeFilterCategories[facetItem.category].push(facetItem.val);
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),
);
// alert(this.activeFilterCategories[filter.Category]);
// var res = await rdrApi.search(this.searchTerm, this.activeFilterCategories, this.solrCore, this.solrHost);
// this.results = res.response.docs;
// this.numFound = res.response.numFound;
// // pagination
// this.pagination['total'] = res.response.numFound;
// this.pagination['per_page'] = res.responseHeader.params.rows;
// this.pagination['current_page'] = 1;
// this.pagination['data'] = res.response.docs;
// var facet_fields = res.facet_counts.facet_fields;
// for (var prop in facet_fields) {
// var facetValues = facet_fields[prop].map((facetValue, i) => {
// if (i % 2 === 0) {
// // var rObj = { value: facetValue, count: facet_fields[prop][i + 1] };
// var rObj;
// if (filter.value == facetValue) {
// rObj = filter;
// } else if (this.facets[prop].some(e => e.value === facetValue)) {
// // console.log(facetValue + " is included")
// var indexOfFacetValue = this.facets[prop].findIndex(i => i.value === facetValue);
// // console.log(indexOfFacetValue);
// rObj = this.facets[prop][indexOfFacetValue];
// rObj.count = facet_fields[prop][i + 1];
// } else {
// rObj = new FilterItem(facetValue, facet_fields[prop][i + 1]);
// }
// return rObj;
// }
// }).filter(function (el) {
// return el != null && el.count > 0;
// });
// // this.facets.push({ filterName: prop, values: facetValues });
// this.facets[prop] = facetValues;
// 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),
// );
// console.log(this.activeFilterCategories);
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),
});
}
}
onClearFacetCategory(categoryName: string): void {
// alert(categoryName);
// // // Method to clear facet category filter
// onClearFacetCategory(categoryName: string): void {
// console.log("onClearFacetCategory");
// delete this.activeFilterCategories[categoryName];
// // Trigger new search with updated filter
// DatasetService.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe({
// next: (res: SolrResponse) => {
// this.results = res.response.docs;
// this.numFound = res.response.numFound;
// // pagination
// this.pagination["total"] = res.response.numFound;
// this.pagination["perPage"] = res.responseHeader.params.rows as number;
// this.pagination["currentPage"] = 1;
// this.pagination["data"] = res.response.docs;
// const facet_fields: FacetFields = res.facets;
// let prop: keyof typeof facet_fields;
// for (prop in facet_fields) {
// const facetCategory: FacetInstance = facet_fields[prop];
// if (facetCategory.buckets) {
// const facetItems: Array<FacetItem> = facetCategory.buckets;
// const facetValues = facetItems.map((facetItem) => {
// let rObj: FacetItem;
// if (this.facets[prop]?.some((e) => e.val === facetItem.val)) {
// // console.log(facetValue + " is included")
// // Update existing facet item with new count
// const indexOfFacetValue = this.facets[prop].findIndex((i) => i.val === facetItem.val);
// // console.log(indexOfFacetValue);
// rObj = this.facets[prop][indexOfFacetValue];
// rObj.count = facetItem.count;
// // rObj = new FacetItem(val, count);
// // if facet ccategory 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;
// });
// this.facets[prop] = facetValues;
// }
// }
// },
// error: (error: string) => this.errorHandler(error),
// complete: () => console.log("clear facet category completed"),
// });
// }
// Method to clear facet category filter
onClearFacetCategoryOPEN(categoryName: string): void {
// console.log("onClearFacetCategory");
delete this.activeFilterCategories[categoryName];
DatasetService.facetedSearch(this.searchTerm, this.activeFilterCategories, this.solr.core, this.solr.host, undefined).subscribe({
next: (res: SolrResponse) => {
this.results = res.response.docs;
this.numFound = res.response.numFound;
// pagination
this.pagination["total"] = res.response.numFound;
this.pagination["perPage"] = res.responseHeader.params.rows as number;
this.pagination["currentPage"] = 1;
this.pagination["data"] = res.response.docs;
const facet_fields: FacetFields = res.facets;
let prop: keyof typeof facet_fields;
for (prop in facet_fields) {
const facetCategory: FacetInstance = facet_fields[prop];
if (facetCategory.buckets) {
const facetItems: Array<FacetItem> = facetCategory.buckets;
const facetValues = facetItems.map((facetItem) => {
let rObj: FacetItem;
if (this.facets[prop]?.some((e) => e.val === facetItem.val)) {
// console.log(facetValue + " is included")
const indexOfFacetValue = this.facets[prop].findIndex((i) => i.val === facetItem.val);
// console.log(indexOfFacetValue);
rObj = this.facets[prop][indexOfFacetValue];
rObj.count = facetItem.count;
// rObj = new FacetItem(val, count);
//if facet ccategory is reactivated category, deactivate all filter items
if (prop == categoryName) {
rObj.active = false;
// 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);
}
} else {
rObj = new FacetItem(facetItem.val, facetItem.count);
}
return rObj;
});
this.facets[prop] = facetValues;
return rObj;
}).filter(el => el.count > 0); // Filter out items with count <= 0
this.facets[prop] = facetValues;
}
}
}
},
@ -311,5 +452,4 @@ export default class SearchViewComponent extends Vue {
});
}
// onPaging(page: number): void {}
}

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

@ -1,31 +1,11 @@
<template>
<div id="page_style" class="rows site-content page__style page__description" autocomplete="off">
<div class="container-fluid banner mz-5">
<vs-input v-bind:propDisplay="searchTerm" v-bind:placeholder="'Enter your search term...'" @search-change="onSearch"></vs-input>
</div>
<div class="column is-half is-offset-one-quarter" style="padding-top: 0; margin-top: 0">
<!-- <div class="tabs is-centered">
<ul id="id-results-tabs">
<li class="search_tab is-active">
<a target="_self">Web</a>
</li>
<li class="search_tab">
<a target="_self">Images</a>
</li>
<li class="search_tab">
<a target="_self">Videos</a>
</li>
<li class="search_tab">
<a target="_self">Homepages</a>
</li>
<li class="search_tab">
<a target="_self">Food</a>
</li>
<li class="search_tab">
<a target="_self">Books</a>
</li>
</ul>
</div> -->
<div v-if="results.length > 0" class="result-list-info">
<div v-if="hasSearchTerm()" class="resultheader">
Your search term {{ "'" + stringSearchTerm + "'" }} yielded <strong>{{ numFound }}</strong> results:
@ -54,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>