Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Prabhdeep Singh
    @PrabhdeepSingh
    Hey everyone, I'm using search-ui with appsearch and was wondering what would best way/approach to create a "show more" button instead of using the pagination. Idea would be to append x more results (based on page size) once button is clicked at the bottom of the results instead of clearing.
    Jason Stoltzfus
    @JasonStoltz

    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);
    Prabhdeep Singh
    @PrabhdeepSingh
    @JasonStoltz Didn't realize I can do that with withSearch, this is awesome thank you! I do see one issue when using this, since this is updating the resultsPerPage, all next search requests/triggers of facets will use this new resultsPerPage value. So lets say if someone spends an awful long time getting to 500 resultsPerPage and decides to go do a search or click on a facet it's going to keep the 500 resutsPerPage which introduces slows performance. Any suggestions how to overcome that? Thought about using the onSearch and set a default resultsPerPage to 20 but from my testing when setResultsPerPage gets called it makes a call to onSearch so that didn't work.
    Jason Stoltzfus
    @JasonStoltz

    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 onSearch middleware option to overwrite search ui's `resultsPerPage with whatever you're tracking.
    Prabhdeep Singh
    @PrabhdeepSingh
    Haha, I'll be looking forward to the "load more" feature! In the meantime, I'm going to show the pagination.
    Jason Stoltzfus
    @JasonStoltz
    Woah, wild idea. What if you just cached the results yourself? Like load load results... cache them, press "load more" to paginate to the next set of results, and just append them to what you have cached?
    Prabhdeep Singh
    @PrabhdeepSingh

    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.

    Jason Stoltzfus
    @JasonStoltz

    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
    DÉLI Dro Kieu
    @DeliDro
    Could I use this in Search UI ? I need to setup an advanced filter
    Jason Stoltzfus
    @JasonStoltz
    Ehhhh, I'm not sure. I don't think that's really supported currently with Search UI's filter API.
    Do you have an example of a filter you'd like to apply?
    DÉLI Dro Kieu
    @DeliDro
    Supposing i want A=a OR (B!=b AND C=c) AND [d, e, f] in D.
    Could I set this filter :
    "filters": {
        // A=a OR (B!=b AND C=c)
        "any": { 
            "all" : [{A: a}],
    
            "all": {
                "none": [{B: b}],
                "all": [{C: c}]
            },
        },
    
        // AND [d, e, f] in D
        "all": [
            {D: [d, e, f]}
        ]
    }
    9 replies
    Prabhdeep Singh
    @PrabhdeepSingh
    @JasonStoltz that is a lot simpler then I was envisioning, I guess that what I get for thinking with my backend dev mind and coming from a .NET background lol. I'll give that a try!
    Maurice Snip
    @mauricesnip

    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
    Thanh Nguyen
    @harryct229
    Hi guys, Is there any way to get all docs of a search query instead of limit 10000 docs. I know that for ElasticSearch we can do that with search_after or scroll API. Can we apply that to AppSearch? Thanks.
    5 replies
    DÉLI Dro Kieu
    @DeliDro
    Hello, is there a way to reload results without reloading the whole page ? So that data updates will appear in realtime.
    3 replies
    Maurice Snip
    @mauricesnip
    @JasonStoltz Adding global filters for fields that also have a <Facet />, results in double OPTIONS and POST requests. Is that intentional?
    Screenshot
    6 replies
    Maurice Snip
    @mauricesnip
    @JasonStoltz Should SingleSelectFacet take the show prop in account? This defaults to 5, but SingleSelectFacet doesn't have any form of a "show more" feature. It gave me some head scratched at first
    MentalOpus
    @MentalOpus
    @JasonStoltz Hello, can you please give a short rundown on what has changed between 1.5.1 and 1.6.0?
    sophijka
    @sophijka
    Hi @JasonStoltz , a quick newbie question on a slider facet you've published here: https://gist.github.com/JasonStoltz/c2ebd3c204032b9b8832ca606268c8de. Where could I find 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!
    Jason Stoltzfus
    @JasonStoltz
    @mauricesnip It's a dropdown, right? If that's the case, then no, it has no concept of a "show more"
    5 replies
    @MentalOpus Yes, here is the release details: https://github.com/elastic/search-ui/releases/tag/v1.6.0
    @sophijka I think those two components were purely for styling and layout. You could replace those with whatever you'd like, they have no functional purpose.
    Joshua Tyree
    @joshuateveryday
    Hey all. Is there any good examples of Hierarchical Facets implemented with the elastic search-ui components?
    Jason Stoltzfus
    @JasonStoltz

    Hierarchical Facets are something we haven't really tackled with Search UI. You'd be in uncharted territory.

    What backend are you using? App Search or Elasticsearch?

    mp0
    @mp0

    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
    llermaly
    @llermaly
    hello, is there any documentation about embedding search-ui into an existing site? I need a global searchbox that redirects to search-ui after searching. Thanks!
    5 replies
    Reka Burmeister
    @rekaburmeister

    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?

    Reka Burmeister
    @rekaburmeister

    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?

    ignore me, I figured it out: disjunctiveFacets: ["version"]
    Reka Burmeister
    @rekaburmeister
    I have another couple of questions, though:
    • 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?
    Ojas Kale
    @iojas

    Hey guys, I see an option

    cluster.initial_master_nodes

    but I do not know where to set it in ECK yaml file. any inputs ?

    Ghost
    @ghost~611597746da0373984830dd1
    Hello, is this chat about search-ui only? Can I ask questions about "app search"? This is my first time on gitter.
    Jason Stoltzfus
    @JasonStoltz
    @ghost~611597746da0373984830dd1 I'm actually thinking about shutting this gitter down. There's not very much discussion, it's mostly Q&A focused, which I think is better suited to our discuss form https://discuss.elastic.co/c/enterprise-search/app-search/72. The App Search category is a good place to ask your questions.
    @rekaburmeister Sorry for coming in so late here, it sounds like you got most of it working but I do have a few thoughts
    For your default category, 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

    Ex: "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"
    Jason Stoltzfus
    @JasonStoltz

    Also, we're using one of the filters as a "category" which tabs over all the filters.

    We do something similar on elastic.co, check it out!

    Jason Stoltzfus
    @JasonStoltz
    @iojas Ask that question on https://discuss.elastic.co/

    @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

    Ebsan Uddin
    @Ebsan
    I'd like to use app-search-javascript in an angular app. But I'm having a lot of issues and I can't find any examples. Anyone have any experience doing it?
    Ahmed Xubair Sid
    @Xubisid_twitter
    Guys, I want to build the Elastic Search on Reactive with SEO friendly URLs , can someone please help me?
    Carlos Gamboa
    @CharlieUPB

    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
    Jason Stoltzfus
    @JasonStoltz
    Hey folks, I'm closing down this gitter. For search-ui questions, please direct them to Elastic's discuss forum at https://discuss.elastic.co/. Use the Enterprise Search > App Search label. You can also drop questions directly on https://github.com/elastic/search-ui isses.
    Meave Abdelhamid
    @Meaveryway
    Thank you so much @JasonStoltz, you really took great care of helping people over here :)
    Will the content of this gitter be archived somewhere? There are some really relevant questions and really nice support and clues that were provided and discussed in here
    Jason Stoltzfus
    @JasonStoltz
    I haven't figured out how to actually to turn this into like a read-only mode or anything so I'm just de-emphasizing it for now
    Gopakumar A P
    @gopakumardsd:matrix.org
    [m]
    hello can anyone provide a documentation for implementing this plugin on angular ?
    John Santiago Jr.
    @jdsantiagojr

    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?