(This gitter is closed, please use discuss.elastic.co > Enterprise Search > App Search for search-ui questions)
Hey @PrabhdeepSingh!
I would try building a custom component. Here are the instructions for that: https://github.com/elastic/search-ui/blob/master/ADVANCED.md#build-your-own-component
See if something like this works...
import React from "react";
import { withSearch } from "@elastic/react-search-ui";
function LoadMore({ resultsPerPage, setResultsPerPage }) {
return (
<div>
<button onClick={() => setResultsPerPage(resultsPerPage + 20)}>
Load more
</button>
</div>
);
}
export default withSearch(({ resultsPerPage, setResultsPerPage }) => ({
resultsPerPage, setResultsPerPage
}))(LoadMore);Ohhhhh, true.
Hm, that's a tough one, then.
This would be a great feature to add to search ui. a "load more" action which fetches more results and appends them to the existing list.
In the meantime, just a couple of ideas...
- Maybe you could reset resultPerPage every time the user makes a new search? This might get tricky....
- You could choose not to use the built in resultPerPage state/action and track your "load more" limit outside of search ui. You could then use https://github.com/elastic/search-ui/blob/master/ADVANCED.md#connectors-and-handlers the
onSearchmiddleware option to overwrite search ui's `resultsPerPage with whatever you're tracking.
That is a pretty wild idea and I like it! But I think that would require a lot more effort then we (me + the company I work for) are willing to put into it. We have so many search terms and different facets that it'd get pretty hard to manage the cache and make sure things are expiring properly and new items are being added and what not. Unless we expire the cache like 30s after they click on the "load more" button. We'd have to look into setting up a redis as well so we don't stress out our linux container but we could always scale that up.
One thing I was recently thinking about was using the browser local storage. After search, store the results in local storage, that way, if someone navigates to an item in the search and then they click on the browser back button, they don't have to wait to fetch the results again. It can just populate from local storage.
Also, I did encounter a bug but not sure if it's a search-ui thing or if it's something I did wrong but I'll create a github issue.
Thanks for the bug report, that would be great.
I think it's simpler than that. Try something like this...
Get access to current, results, and setCurrent from WithSearch
const [cachedResults, setCachedResults] = useState(results);
useEffect(() => {
if (current === 1) {
setCachedResults(results);
} else {
setCachedResults([...cachedResults, ...results]);
}
}, [results]);Then write the results to the page from your cached results:
{cachedResults.map(result => {
return (
<Result
result={result}
titleField="title"
urlField="nps_link"
shouldTrackClickThrough={true}
/>
);
})}And add a "Load More" button
<div>
<button onClick={() => setCurrent(current + 1)}>Load more</button>
</div>
2 replies
Hey everyone, I've been fiddling around with search-ui for a few days now, works great! Except that SingleSelectFacet won't revert to it's "Select..." placeholder when clearing/removing filters with clearFilters or removeFilter. All other Facet types work just fine. Though, when you set a second facet for the exact same field with any other Facet type, it somehow does work. Any clues on how to resolve this?
Screen recording: https://www.youtube.com/watch?v=LH8z1KvRXoY (refreshing the browser half-way to ensure a "reset")
5 replies
SearchFacet? I'm trying to incorporate it into a simple search UI for elastic (not App Search) but got stuck here. Many thanks in advance!
So I have everything working with enterprise-search (app-search) and have customized the generated search-ui. I've loaded in a couple million documents and everything works great. However the generated UI is working with the public search- bearer token on the client side (in the react app).
I would like to secure the ability to search with a login to restrict access to known/authorized users in our domain. I have a simple node/express app that authenticates our users and verifies they are within our domain (e.g. google oauth + directory API).
I understand that from app-search's perspective, signed search keys are the right approach here. I can certainly use the app-search-node lib to generate a per-user search key and then inject that into the react app (static) which is served from within the node app post-authorization. However I am wondering about key invalidation. I don't want that signed search key to continue to be valid after the session has expired.
Is there a recommended approach here for this type of case, I couldn't find any documentation about securing app search beyond giving managing all credentials in app search which is cumbersome since we already have oauth/directory based authentication/authorization with google.
We could just use a tunnel to expose search-UI/app-search without auth on our intranet but if we don't want 100% of our employees to have access...then that isn't a really good option either.
I'm also not a react developer and would like to avoid going down the path of adding a bunch more complexity to the React app and would rather handle authentication external to the React app and then serve the react app (static) with an injected valid (but expiring) credential if the user is authorized. Even that seems brittle as the React/app-search credential would need to somehow be kept in sync (valid state) with the cookie-based login session.
I originally thought the way to do this would be to proxy the app-search requests and inject the bearer token if the user is authorized and redirect them to a login screen if not... but it sounds like that is non trivial.
Would love to see a bare-bones writeup on how to secure search-UI for this type of use case as it would make integrating search-UI, including authorization into other larger (and possible non-React) apps much more obvious.
2 replies
Hey Guys,
I've been trying to integrate search-ui into our site but I have a set of complex requirements and can't quite get my head around how to achieve what I want (being relatively new to both React and frontend in general doesn't help).
We have a search box on the top nav. Clicking the search box opens the search page but this has the effect of an overlay. All navigation is disabled and the only way to navigate back to the site is by clicking the search area's close button - which should return the user to the original page the search was opened from.
On the search page itself, in case filter values reach 0 we want to still display them (disabled) instead of filter them out completely. Also, we're using one of the filters as a "category" which tabs over all the filters.
On top of all that, the categories are context-sensitive, so in case the search is opened from a certain page, a certain category should be pre-selected.
Finally, the search should also retain its state in case the search is closed.
I got most of this working now apart from the context-sensitive pre-selected category. I'm trying to set this on the SearchPage as:
const SearchPage = ({
wasSearched,
searchTerm,
results,
addFilter,
clearFilters,
}) => {
const [currentTab, setCurrentTab] = useState();
const location = useLocation();
useEffect(() => {
const tab = setTabForPage(location.state?.currentPage, addFilter, clearFilters);
setCurrentTab(tab);
}, [currentTab]);where:
export function setTabForPage(page, addFilter, clearFilters) {
const selectedTab = getFilterForTab(page);
clearFilters();
addFilter(CATEGORY_FILTER, selectedTab);
return selectedTab;
}but for some reason, this puts my custom filter component depending on filters, facets, addFilter, removeFilter into an infinite re-render loop.
Can anyone help me out with this?
Hey, so, I fixed most of my issues above, there's just one problem remaining: I have a custom dropdown for one of the filters (version number). I have to set a default version on the first render, I use setFilter for this. The funny thing is that in case I set the default value, I can't seem to be able to use the filter at all. Whereas without setting it, the dropdown works just fine. Here's my dropdown code:
<Dropdown
// className="docs-page__dropdown"
ariaLabel={label}
id={`${field}-picker`}
items={itemValues}
label={`Select ${label}`}
selectedItem={currentItem}
onChange={({ selectedItem }) => setFilter(field, selectedItem)}
/>Any pointers on what might be going wrong here?
disjunctiveFacets: ["version"]
- I have a document property that contains a list of tags. I would like these filterable by tag. How would I go about the facet returning all tag values as set, rather than the different combinations as individual strings?
- after the first search, the URL gets replaced by
?size=n_10_n&filters%5B0%5D%5Bfield%5D .... How would I keep the original URL?
initialState in your config would have worked better than setFilter
On top of all that, the categories are context-sensitive, so in case the search is opened from a certain page, a certain category should be pre-selected.
Finally, the search should also retain its state in case the search is closed.
The best way to do that is to send a filter on the url when you link to the search page! The syntax is a bit weird to figure out (something I need to work on), but you can see an example of that on elastic.co. Try going to a page on the site and performing a search from the global search bar, it will pass in a filter on the query string to the search page, which search-ui will read when it loads: https://www.elastic.co/webinars/elastic-app-search-getting-started-with-self-managed
"https://www.elastic.co/search?q=test&size=n_20_n&filters[0][values][0]=videos&filters[0][field]=website_area&filters[0][type]=all"
@rekaburmeister
I have a document property that contains a list of tags. I would like these filterable by tag. How would I go about the facet returning all tag values as set, rather than the different combinations as individual strings?
Did you figure this one out? I'm not sure that I actually understand the question
after the first search, the URL gets replaced by ?size=n_10_n&filters%5B0%5D%5Bfield%5D .... How would I keep the original URL?
You'd have to turn off trackUrlState
Hi guys I cant seem to find an answer to this question, can you please clarify my question.
I have a normal database such as mongo where I store my domain related data, customers, products, prices.
Now I came with the request of having search functionality over AN EXISTING entity (let's say products) Do i need to store product entity in both elastic search and my domain/primary database? Or elastic search will completely replace the need of storing the same entity in my primary db?
2 replies
Hello. I am using search-ui MultiCheckbox and getting different results when switching my backend proxy from using fetch to aws-elasticsearch-js. When developing locally I have my backend proxy making request via fetch API.
Is there an option I need to set or change when using the awsEsClient.search to get muti-select working?