Add a custom label

[AntoonVD]

I am relatively new to working with Algolia and am integrating it with my backend. During this process, I encountered an issue: I often have facets with specific values, but I want to display different names for these values on the frontend. Currently, this functionality is not supported by Algolia.

Proposed Solution:

Extend the existing label functionality to allow setting a custom label for any facet value.
Currently, the label is only used for numeric values. This proposal suggests enabling custom labels for all facet values if provided.
I believe this enhancement would be beneficial for many users who need more flexibility in displaying facet names.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[Haroenv]

How do you set this custom label? are you calling normalizeRefinement yourself? Have you tried using transformItems to change the label?

[AntoonVD]

At the moment I do use the transformItems yes. But what I am trying to change happens before this. With facets, if I understand it correctly the response returned to InstantSearch should look like this:

{
  "hits": [
    {
      "objectID": "1",
      "name": "Product 1",
      "brand": "Brand A",
      "categories": ["Category 1", "Category 2"],
      "price": 100
    },
    {
      "objectID": "2",
      "name": "Product 2",
      "brand": "Brand B",
      "categories": ["Category 1"],
      "price": 150
    }
  ],
  "nbHits": 2,
  "page": 0,
  "nbPages": 1,
  "hitsPerPage": 20,
  "processingTimeMS": 1,
  "facets": {
    "brand": {
      "Brand A": 1,
      "Brand B": 1
    },
    "categories": {
      "Category 1": 2,
      "Category 2": 1
    },
    "price": {
      "100": 1,
      "150": 1
    }
  },
}

In here there is only the possibility to pass the value and count, not a different name to be shown on the page. For now i have a workaround for this by returning a response with facets that look like this:

"facets": {
    "brand": {
      "Brand A": { "count": 1, "label": "Brand Atom" },
      "Brand B": { "count": 1, "label": "Brand Beta" },
    }

But InstantSearch then puts the count and label in the count. I can then use the transformItems to extract the count and label from the count, but this feels wrong.
That is why I would like to find a better solution for this.

[Haroenv]

Yes, the right solution would indeed be something where the label is already part of the response, however as Algolia doesn't have this feature, I don't think we'll immediately add support for this pattern. The most reasonable workaround would be a mapping you save somewhere that stores the link between a facet value and its label, so that you can use it in transformItems of currentRefinements and refinementList.