algolia / instantsearch

⚡️ Libraries for building performant and instant search and recommend experiences with Algolia. Compatible with JavaScript, TypeScript, React and Vue.
https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/
MIT License
3.72k stars 523 forks source link

Too many hits and rangeSlider doesn't work properly. #2763

Open SchmidtDawid opened 6 years ago

SchmidtDawid commented 6 years ago

Hi! When the number of hits is above 1000 the range slider don't show proper values. I want to use default value for min and max - "automatically computed from the result set". But when there is to many hits max is set to 250. Is there any possibility to fix it? Or set limit of hits?

Haroenv commented 6 years ago

Hey @SchmidtDawid, can you make an example using the template please? It will be a lot simpler to debug like that!

SchmidtDawid commented 6 years ago
search.addWidget(
    instantsearch.widgets.hits({
      container: '#hits',
      templates: {
        item: getTemplate('hit'),
        empty: getTemplate('no-results'),
      },
      transformData: {
        item(item) {
          item.price = priceReplace(item.price);
          item.starsLayout = getStarsHTML(item.rating);
          return item;
        },
      },
    })
  );
search.addWidget(
    instantsearch.widgets.rangeSlider({
      container: '#price',
      attributeName: 'price',
      tooltips: {
        format(rawValue) {
          return `${Math.round(rawValue).toLocaleString()}zł`;
        },
      },
      templates: {
        header: getHeader('Cena'),
      },
      collapsible: {
        collapsed: false,
      },
    })
  );

I realize that isn't about 1000hits. Just sometimes works sometimes not. there are screenshots with this issue. Every query has more than 1000hits (fraza means query). https://imgur.com/gallery/Vlzga

vvo commented 6 years ago

Hi @SchmidtDawid, @Haroenv forgot to give you the actual template url where you can demonstrate us the problem in a more visual and direct way.

Here it is: https://codesandbox.io/s/github/algolia/instantsearch-templates/tree/master/src/InstantSearch.js

Using this template, show us what's the issue. Thanks!

bobylito commented 6 years ago

@SchmidtDawid What does priceReplace do?

SchmidtDawid commented 6 years ago

changeing dot to coma ;)

SchmidtDawid commented 6 years ago

Hi. I can't make working template. But our problem is on production server right now. Check it: http://tiny.pl/gkjdk PriceSlider - Cena show max value as 400. But there are hits with price over 400. Can you help?

bobylito commented 6 years ago

From what I can see here, the rangeSlider values are based on the secondary query facetStats. The primary query does return results that are more in-line... That seems to be a bug in the helper. I will have a look. It's the expected behavior in the helper in order to get the outer bounds (without filters) however the engine seems to return wrong values (I'm asking some for some help from the engine team)

bobylito commented 6 years ago

Ok so it's unfortunately due to a limitation in the engine. The reason is that the stats on which we rely on are computed on the 1000 first hits. In your example, we compute that on the secondary query without filters. The problem is that without filter and the limit of 1000 hits we end up with smaller values.

We could improve this behaviour by taking the overall max and mins of all the queries.