#community-help

Issues with Displaying Paragraphs Using Typesense and React-instantsearch

TLDR Mark is struggling with displaying only relevant paragraphs of indexed body text in a UI with react-instantsearch and Typesense. Jason suggests modifications to the TypesenseInstantSearchAdapter instantiation, highlighting only relevant fields. The issue remains unresolved.

Powered by Struct AI

1

1

Oct 31, 2023 (1 month ago)
Mark
Photo of md5-300069f813c4f0690692ad5e378f159a
Mark
01:34 PM
Hello! I am brand new to Typesense but getting great results so far. I am, however, having an issue with a UI I am building with react-instantsearch. One of the fields I am indexing is a body field what can have dozens of paragraphs. I have them being indexed by paragraph. My issue is that when the results are returned, the entire body of paragraphs is being displayed.

To correct this, I have added the Snippet widget. While this shortens the output for each paragraph, all paragraphs are still included even if they are not highlighted.

Following is my schema and react page. Any help would be greatly appreciated.

collectionSchema: { // Required
        name: "pages_v1",
        enable_nested_fields: true,
        fields: [
          {
            name: "title",
            type: "string",
            optional: true,
          },
          {
            name: "body_text",
            type: "string[]",
            optional: true,
          },
          {
            name: "site_section",
            type: "string[]",
            optional: true,
            facet: true,
          },
          {
            name: "page_path", // Required
            type: "string",
          },
          {
            name: "page_priority_score", // Required
            type: "int32",
          },
        ],
        default_sorting_field: "page_priority_score", // Required
      },```
export default function SearchInterface() {

const Hit = ({ hit }) => (
<>
<details>
<summary><Link to={hit.page_path}><Highlight attribute="title" hit={hit} /></Link></summary>
<Snippet hit={hit} attribute="body_text" separator=" ——— " />
</details>
</>
)
return (

<Search>
<InstantSearch searchClient={searchClient} indexName="pages_v1">
<Textpage>
<div className="title">
<SearchBox placeholder="search" autoFocus="true" />
<p><Stats /></p>
</div>
<main>
<Sectionnav>
<RefinementList attribute="site_section" />
</Sectionnav>
<div className="right">
<Hits hitComponent={Hit} />
</div>
</main>
<div className="title"><Pagination /></div>
</Textpage>
</InstantSearch>
</Search>
)
}```
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
04:58 PM
Could you open your browser's dev console, navigate to the network tab and then perform a search in the UI, and look for a multi_search request, copy as curl and paste it here, minus the API key?
Mark
Photo of md5-300069f813c4f0690692ad5e378f159a
Mark
08:05 PM
Here’s what this comes up with:

curl ‘https://dxkjm74r9falewn2p-1.a1.typesense.net/multi_search?x-typesense-api-key=xxx’ \
-H ‘authority: dxkjm74r9falewn2p-1.a1.typesense.net’ \
-H ‘accept: application/json, text/plain, /’ \
-H ‘accept-language: en-US,en;q=0.9’ \
-H ‘content-type: text/plain’ \
-H ‘dnt: 1’ \
-H ‘origin: https://mecad-production.netlify.app’ \
-H ‘sec-ch-ua: “Not=A?Brand”;v=“99", “Chromium”;v=“118"’ \
-H ‘sec-ch-ua-mobile: ?0’ \
-H ‘sec-ch-ua-platform: “macOS”’ \
-H ‘sec-fetch-dest: empty’ \
-H ‘sec-fetch-mode: cors’ \
-H ‘sec-fetch-site: cross-site’ \
-H ‘sec-gpc: 1’ \
-H ‘user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36’ \
--data-raw ‘{“searches”:[{“query_by”:“title, page_path, body_text, site_section”,“highlight_affix_num_tokens”:50,“highlight_full_fields”:“title, page_path, body_text, site_section”,“collection”:“pages_v1”,“q”:“anders”,“facet_by”:“site_section”,“max_facet_values”:10,“page”:1}]}’ \
--compressed
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
08:13 PM
When instantiating the typesense-instantsearch-adapter, in additionalSearchParameters, you want to do something like this:

const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
  ...
  additionalSearchParameters: {
    query_by: 'title, page_path, body_text, site_section',
    highlight_fields: 'body_text',
    highlight_full_fields: 'title, page_path, site_section',
    highlight_affix_num_tokens: 50,
    ...
  },
});

1

08:14
Jason
08:14 PM
highlight_fields will snippet the body_text and for the other fields, the full field will be highlighted

1

Nov 01, 2023 (1 month ago)
Mark
Photo of md5-300069f813c4f0690692ad5e378f159a
Mark
08:49 PM
Thanks! This kinda works. It highlights and truncates the output to a smaller amount of words. The problem I continue to have (and perhaps there is no way to cure it) is paragraphs that do not have the search term in them are also returned. So on long pages, there are 30-40 snippets lumped together into a single block of text.

Is it possible to exclude snippets that do not have a highlight? or to set a maximum number of characters of body text displayed?

I saw a tutorial that used the truncate method from Tailwind. I’m not using Tailwind so I’m hoping there is another truncate method.
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
08:51 PM
&gt; So on long pages, there are 30-40 snippets lumped together into a single block of text.
Ideally you'd want to break large pieces of text into smaller records... But I'm not sure I fully understand this. Could you share a screenshot of this issue?