FeatureRequest: The ability to have multiple sorts per sortOption

[davidklebanoff]

Issue Type: Enhancement

Description: My apologies if this already exists in some way; if it does I could not find it.

I'm looking for a way to have more advanced sort options. Specifically, the ability for a sortOption to support multiple sorts, executed in the order declared.

For example, suppose we wanted two search options, Best Match which sorts by the relevance score, and Rating which sorts by the rating field and secondarily sorts by the relevance score.

Here's a crude mockup:

<ResultCard
    react={{
        "and": ["PriceFilter", "SearchFilter"]
    }}
    onData={this.onData}
    sortOptions={[
        {
            label: "Best Match",
            dataField: "_score",
            sortBy: "desc"
        },
        {
            label: "Rating",
            and: {[
                {
                    dataField: "rating",
                    sortBy: "desc"
                },
                {
                    dataField: "_score",
                    sortBy: "desc"
                }
            ]}
    }]
/>

This feature request applies to all the result components: ResultList, ResultCard, and ReactiveList.

ElasticSearch sort docs

[metagrover]

This is pretty interesting. Thoughts @siddharthlatest?

[davidklebanoff]

Bump. @siddharthlatest. :)

[metagrover]

How about a consistent structure like this:

sortOptions={[
        {
            label: "Best Match",
            sort: { order: "desc", dataField: "_score" },
        },
        {
            label: "Rating",
            sort: [
                { order: "desc", dataField: "_score" },
                { order: "desc", dataField: "rating" },
            ],
        },
]}

[davidklebanoff]

@metagrover That looks great to me!

[siddharthlatest]

@davidklebanoff Imo, doing something like this breaks the current apps that use sortOptions prop. Also, this still misses out certain things: mode, geo_distance sorting, etc. options that ES's sort DSL offers.

One solution (that already works) here is to use the defaultQuery and pass the appropriate sort key to it when the dropdown UI selection changes. This offers a no compromise sorting DSL with some trade-off in having to write a dropdown UI.

[axeff]

@siddharthlatest When I try to put my geo_distance sorting into the setQuery (I'm using ReactiveComponent), the sort part is magically cut out. Query looks like this in my code but if I query = { from: 0, size: 10, query: { bool: { filter: { geo_distance: { distance: '300km', location: [ lon, lat, ], }, }, }, }, sort: { _geo_distance: { location: { lat, lon, }, }, }, };

But if I look into the _msearch headers it is missing: { "query": { "bool": { "must": [ { "bool": { "must": [ { "bool": { "filter": { "geo_distance": { "distance": "300km", "location": [ 8.8311195373535, 47.936405749046 ] } } } } ] } } ] } }, "size": 10 }

I really need _geo_distance to work. Is there any other way to get this done?

[axeff]

I ended up writing my query using axios and not use ReactiveSearch. But my use case will become more complex soon and I would really like to get back to Reactivesearch on Native.

[metagrover]

You can always use ReactiveComponent for your custom needs until we figure out an implementation for this as a part of the library.

Find relevant docs here.

[axeff]

Tried this as well. See the comment above. When using ReactiveComponent with setQuery() the part where I insert sort will not be in my Request Payload.

[metagrover]

Oh then it seems like a bug, I will check on this. Thanks for bringing this up.

[axeff]

@metagrover I updated a codesandbox I once created. As far as I can see there are two POST's in network panel of which the first does have my query including sort, then there is a second one with query:all which will be rendered in ResultCard.

[metagrover]

@axeff The sort query is being applied to myRating component, which is an expected behavior. Sort, size, from and aggs queries don't leak out to other components which are watching the source component. If you wish to apply sort on the result component, you can use defaultQuery prop on the ResultCard. That should work just fine.

Hope that helps!

[axeff]

Ok, got that. And works in example. Thank you. But can I have multiple filters of which one is the geo_distance filter with sort and combine this with other filters?

[metagrover]

Not sure if I understand that but if you can update the ResultCard's defaultQuery dynamically, then the component will fire the updated queries as you change the defaultQuery prop.

[bigscratcher]

Can you add example here, how to sort by _geo_distance. I am struggling with it some time. I can't add it in customQuery in DataSearch or anywhere else, it needs to come after query: {} part as separate section and to get the following in _msearch header: { "from": 0, "size": 10, "query": { "match_all": {} }, "sort": { "_geo_distance": { "pin": "48.1362, 11.5729", "order": "asc", "unit": "km" } } }

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[davidkong0987]

Would love to revive this!

[danielnolde]

This would be a very worthwhile addition, i agree, and the issue is still current.

[arpithparikh]

I agree This would be a very worthwhile addition, i agree, and the issue is still current.

I like this propose structure 👍

sortOptions={[ { label: "Best Match", sort: { order: "desc", dataField: "_score" }, }, { label: "Rating", sort: [ { order: "desc", dataField: "_score" }, { order: "desc", dataField: "rating" }, ], }, ]}