Highlight for hierarchical fields not working

[ThomasJejkal]

The problem

I'm currently evaluating SearchKit and struggle with the highlighting of matches. According to the documentation, it should work intuitively, but if I follow the documentation, my highlight component never contains any value for hierarchical fields. The only chance is to modify the result by storing the highlight result in an attribute without hierarchy separator. For more information, please see the details section. I've already opened an issue at algolia/instantsearch but I they send me here.

Environment

• Searchkit version (or git revision) that exhibits the issue: 4.11.0
• Last Searchkit version that did not exhibit the issue (if applicable): No idea
• Node.js version: 18.18.0
• Typescript version:
• Next.js version:
• ElasticSearch/OpenSearch version: 7.17.18 / 8.5.1 (same result)

Details

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 is rendered but empty. If I change the attribute key as follows:

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

the following works:

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

[joemcelroy]

Hiya could you share the configuration aswell? Maybe there’s a bug here with object fields

[ThomasJejkal]

I'm afraid it's too simple to contain any bugs, but let's have a look:

const sk = new Searchkit({
  connection: {
    host: "http://localhost:9200",
  },
  search_settings: {
    search_attributes: ['metadata.titles.value', 'metadata.publisher'],
    result_attributes: ['metadata.titles.value', 'metadata.publisher'],
    highlight_attributes: ['metadata.publisher']
  }
})

Maybe for completeness, the rest of the code:

const searchClient = Client(sk);

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

function App() {
  return (
      <InstantSearch indexName="test_index" searchClient={searchClient}>
          <Configure attributesToHighlight={['metadata']} /> {/* This can also be done in the Dashboard */}
          <SearchBox />
          <Hits hitComponent={HitComponent}/>
      </InstantSearch>
  );
}

Adding the Configure-Component was a hint I received from the Algolia guys, but it had no effect.

[joemcelroy]

could you try this with another field thats not using object field? IE, make 'metadata.publisher just publisher and try? When I have some time, will create a test case for this if it works to figure out the object issue.

[ThomasJejkal]

I've already checked this yesterday and I just realized that I did not submit my comment. -.-
As expected, with a simple key it is working as intended as the response is similar to my 'hack' where I modified the result via

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

[joemcelroy]

sounds like a bug within Searchkit for highlighting on object fields. This is the code for highlighting and tests. Likely will take me next weekend to look into this but very happy for a PR to resolve the issue if you can.

Joe

[joemcelroy]

found the issue that instantsearch requires object fields to be represented in a object hierarchy, not currently as a 1 depth dot notation keys. Fixed this by transforming ES dot notation keys into an object hierarchy.

Got a PR fixing this and should work. Let me know if you have issues.