Instantsearch.js: Float values in refinement list don't sort properly.

[noclat]

Describe the bug 🐛
Float values in refinement list don't sort properly.

To Reproduce 🔍
Steps to reproduce the behavior:

1. Pick a test index
2. Add size attribute and put values like 9, 9.5, 10, 10.5, 11…
3. Add size as a facet filter
4. Add refinement list to your page:

search.addWidget(
  instantsearch.widgets.refinementList({
    container: '#brand-list',
    attributeName: 'size',
    sortBy: ['size:asc'],
  })
);

https://codesandbox.io/s/420yp9lyn0

Expected behavior 💭
Should be sorted 9, 9.5, 10. It's 9, 10, 9.5 instead.

Screenshots 🖥

Environment:

• OS: Mac
• Browser: Chrome
• Version 68.0.3440.106

Additional context
Please ping me back when it's solved so I can contact the customer who reported it.

[bobylito]

Thanks @noclat that's indeed an annoying problem and definetely unexpected. We should be able to do better.

Looking at a response from Algolia, we can notice two things:

• the facet values are strings whatever the number they are in the engine
• if the values are numbers, the facet stats will give us some statistics which is a strong signal about the type.

{
  "results": [
    {
      "hits": [...],
      "nbHits": 15297,
      "page": 0,
      "nbPages": 50,
      "hitsPerPage": 20,
      "processingTimeMS": 11,
      "facets": {
        "price": {
          "39.99": 731,
          "49.99": 699,
          "19.99": 680,
          "29.99": 624,
          "99.99": 590,
          "59.99": 454,
          "24.99": 404,
          "34.99": 354,
          "199.99": 342,
          "79.99": 342
        }
      },
      "facets_stats": {
        "price": {
          "min": 1,
          "max": 4999.99,
          "avg": 258.651,
          "sum": 3956580
        }
      },
      "exhaustiveFacetsCount": true,
      "exhaustiveNbHits": true,
      "query": "h",
      "params": "query=h&maxValuesPerFacet=10&page=0&facets=%5B%22price%22%5D&tagFilters=",
      "index": "instant_search"
    }
  ]
}

We should be able to leverage that information to infer the type of the facet and apply a correct sort but it implies a lot of magic behind the scene.

On the other hand, the user knows better and could easily implement a custom sort function:

search.addWidget(
  instantsearch.widgets.refinementList({
    container: '#brand-list',
    attributeName: 'price',
    sortBy: function(a, b) {
      return Number.parseFloat(a.name) - Number.parseFloat(b.name);
    },
  })
);

[francoischalifour]

@bobylito I think this issue should be addressed in the JavaScript helper since we leverage the getFacetValues() method in connectRefinementList (see corresponding line →).

[bobylito]

@bobylito I think this issue should be addressed in the JavaScript helper since we leverage the getFacetValues() method in connectRefinementList (see corresponding line →).

Yes that seems to be the place to fix 👍

Let's keep this issue for keeping track of the implementation at the IS.js level.

[noclat]

Thanks for the effort in handling this folks! I understand, super clear answers 🙌.