Highlight of hierarchical fields not working

[ThomasJejkal]

🐛 Current behavior

According to the documentation, using the highlight component for hierarchical fields should work for the following example hit:

{
   "_index": "test_index",
   "_id": "4b4876e1-5749-4d5f-95b6-2251681c96e1",
   "_score": 1.0,
   "_source": {
      "metadata": {
         "publisher": "Albert Einstein",
         "publicationYear": "2023"
       }
   },
   "highlight": {
      "metadata.publisher": [
         "<em>Albert</em> Einstein"
      ]
    }
 }

as follows:

<Highlight attribute="metadata.publisher" hit={hit}/>

Instead, the highlight component is not rendered at all. Instead, if I change the attribute key as follows:

hit._highlightResult['test'] = hit._highlightResult['metadata.publisher'];

the following works:

<Highlight attribute="test" hit={hit}/>

🔍 Steps to reproduce

Live reproduction

💭 Expected behavior

Well, that's easy. I would expect the highlighting also to work for hierarchical attributes.

Package version

react-instantsearch 7.5.3

Operating system

No response

Browser

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[dhayab]

Hi, you'll need to set the root level of your hierarchical attribute in attributesToHighlight in order to retrieve highlights for sub levels, for example:

<InstantSearch>
  <Configure attributesToHighlight={['metadata']} /> {/* This can also be done in the Dashboard */}
  <Hits hitComponent={HitComponent} />
</InstantSearch>

// ...

function HitComponent({ hit }) {
  return <div>
    <Highlight attribute="metadata.publisher" hit={hit} />
  </div>;
}

[ThomasJejkal]

Thanks a lot for the hint, but I'm a bit confused, mainly because of not understanding the difference between using search_settings and the Configuration-Component and how their setting relate to each other.

While configuring SearchKit I'm providing the highlight_attributes, which looks as follows:

search_settings: {
   search_attributes: ['metadata.publisher'],
   result_attributes: ['metadata.publisher'],
   highlight_attributes: ['metadata.publisher']
}

If I provide there only 'metadata' in 'highlight_attributes', the _highlightResult will be:

{
   "metadata" : {
      "matchLevel":"none",
      "matchedWords":[],
      "value":"[object Object]"
   }
}

However, the Highlight-Component seems not to be able to deal with "[object Object]", so it remains empty not matter of adding Configuration or not.

Instead, when using your code, _highlightResult again looks like

{
   "metadata.publisher" : {
      "fullyHighlighted":false,
      "matchLevel":"full",
      "matchedWords" : ["Albert"],
      "value":"<mark>Albert</mark> E"
   }
}

but the Highlight-Component still receives no value.

[dhayab]

It's possible SearchKit doesn't generate and return the highlighted results the same way Algolia does for nested attributes. You would have to check with them in that instance.