Unable to Increase the Number of Facet Attributes Returned in CustomFacetList Beyond Default 10

[Martin Erlic]

Description

I'm currently using Typesense with the react-instantsearch-dom package in my application to display search results, and I'm experiencing an issue with the number of facet values returned. Despite setting the max_facet_values parameter to 20 in my additionalSearchParameters object, I'm only receiving the default 10 facet attributes in my CustomFacetList component. I'm looking to increase the number of facet attributes returned for each of my custom facet lists, but currently, it only shows the top 10.

Steps to reproduce

Initialize TypesenseInstantSearchAdapter with the following additionalSearchParameters:

const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
    server: {
        apiKey: process.env.NEXT_PUBLIC_TYPESENSE_PUBLIC_API_KEY,
        nodes: [
            {
                host: process.env.NEXT_PUBLIC_TYPESENSE_HOST,
                port: '443',
                protocol: 'https',
            },
        ],
    },
    additionalSearchParameters: {
        queryBy: 'recipeText',
        max_facet_values: 20,
    },
});

Create a custom facet list component using connectRefinementList from react-instantsearch-dom.

Render the custom facet list component with an attribute to facet by.

The CustomFacetList component only shows the top 10 facet values for each attribute despite the max_facet_values being set to 20.

const CustomFacetList = connectRefinementList(({ items, refine }) => {
    const handleCheckboxChange = (e, value) => {
        const isChecked = e.target.checked;
        if (isChecked) {
            refine([...value, e.target.value]);
        } else {
            refine(value.filter((item) => item !== e.target.value));
        }
    };

    return (
        <div
            style={{
                display: 'flex',
                flexDirection: 'column',
                maxHeight: '200px',
                overflowY: 'auto',
                overflowX: 'visible',
                marginBottom: '8px',
            }}
        >
            {items.map((item) => (
                <label
                    key={item.label}
                    style={{
                        display: 'flex',
                        alignItems: 'center',
                        marginRight: '16px',
                        padding: '4px 8px',
                        borderRadius: '4px',
                        backgroundColor: item.isRefined ? '#1A202C' : 'white',
                        color: item.isRefined ? 'white' : '#1A202C',
                        border: `1px solid ${item.isRefined ? '#1A202C' : 'gray'}`,
                        cursor: 'pointer',
                        transition: 'background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease',
                    }}
                >
                    <input
                        type="checkbox"
                        value={item.label}
                        onChange={(e) => handleCheckboxChange(e, item.value)}
                        checked={item.isRefined}
                        style={{ display: 'none' }}
                    />
                    <span style={{ fontSize: '14px', fontWeight: 'bold', fontFamily: 'Poppins, sans-serif' }}>{item.label}</span>
                    <span style={{ marginLeft: '4px', color: item.isRefined ? 'white' : 'gray', fontSize: '12px', fontFamily: 'Poppins, sans-serif' }}>
                        ({item.count})
                    </span>
                </label>
            ))}
        </div>
    );
});

<CustomFacetList attribute="cuisineType" />

Expected Behavior

When setting max_facet_values to 20, I expect to see up to 20 facet values returned for each attribute in the CustomFacetList component.

Actual Behavior

Regardless of the value of max_facet_values, only the top 10 facet values are returned for each attribute in the CustomFacetList component.

Typesense Versions:

"typesense": "^1.5.4",
"typesense-instantsearch-adapter": "^2.7.0",
"react-instantsearch-dom": "^6.40.3",

[Jason Bosco]

@SeloSlav The max_facet_values Typesense parameter is controlled by Instantsearch internally.

So you want to use the Configure widget to change this value like this:

<Configure
  maxValuesPerFacet={20}
/>

[Martin Erlic]

@jasonbosco

I gave that a shot but no luck on increasing the number of returned facet attributes. When I decrease it 5, however, it does reduce them. I can confirm that the additional facet attributes exist because when I search for them in the search bar they appear in the list.

return (
        <InstantSearch searchClient={searchClient} indexName="recipes">

            <div style={{ display: 'flex', justifyContent: 'space-between', overflowX: 'auto', marginLeft: '32px', marginRight: '32px', marginTop: '10px', marginBottom: '10px' }}>
                <div style={{ minWidth: '180px', marginRight: '16px' }}>
                    <label className="category-label filter-label">🍲 Cuisine</label>
                    <CustomFacetList attribute="cuisineType" />
                </div>
                <div style={{ minWidth: '180px', marginRight: '16px' }}>
                    <label className="category-label filter-label">🥗 Diet</label>
                    <CustomFacetList attribute="dietaryLabels" />
                </div>
                <div style={{ minWidth: '180px', marginRight: '16px' }}>
                    <label className="category-label filter-label">🍛 Dish</label>
                    <CustomFacetList attribute="category" />
                </div>
                <div style={{ minWidth: '180px' }}>
                    <label className="category-label filter-label">🥘 Cooking Oil</label>
                    <CustomFacetList attribute="preferredCookingOil" />
                </div>
            </div>

            <CustomSearchBox currentRefinement={selectedProduct} refine={handleSearchBoxChange} />
            <Configure hitsPerPage={12} maxValuesPerFacet={20} />
            <CustomStats />
            <CustomHits setSelectedProduct={setSelectedProduct} {...props} />
            <CustomPagination />
        </InstantSearch>
    );

[Jason Bosco]

I see... In the standard RefinementList widget I see this parameter called limit and showMoreLimit.

I wonder if you'd need to implement that in your custom refinement list widget as well...

[Martin Erlic]

This was exactly it. Thanks. I added the following attributes to my component:

<CustomFacetList attribute="cuisineType" limit="30" showMoreLimit="30" />