InteractiveResult

This is for:

Developer

The InteractiveResult controller provides an interface for triggering desirable side effects, such as logging UA events to the Coveo Platform, when a user selects a query result.

Methods

beginDelayedSelect

Prepares to select the result after a certain delay, sending analytics if it was never selected before.

In a DOM context, it’s recommended to call this method on the touchstart event.

cancelPendingSelect

Cancels the pending selection caused by beginDelayedSelect.

In a DOM context, it’s recommended to call this method on the touchend event.

select

Selects the result, logging a UA event to the Coveo Platform if the result wasn’t selected before.

In a DOM context, it’s recommended to call this method on all of the following events: * contextmenu * click * mouseup * mousedown

Initialize

buildInteractiveResult

Creates an InteractiveResult controller instance.

Parameters

  • engine: SearchEngine

    The headless engine.

  • props: InteractiveResultProps

    The configurable InteractiveResult properties.

Returns InteractiveResult

InteractiveResultProps

The configurable InteractiveResult properties.

Properties

InteractiveResultOptions

The options for the InteractiveResult controller.

Properties

  • result: Result

    The query result.

  • debounceWait?: number

    The number of seconds for which the debounced function should continue catching subsequent calls.

    Default: 1000

  • selectionDelay?: number

    The amount of time to wait before selecting the result after calling beginDelayedSelect.

    Default: 1000

HighlightKeyword

Properties

  • length: number

    The length of the offset.

  • offset: number

    The 0 based offset inside the string where the highlight should start.

Raw

Properties

  • [key: string]: unknown

    Custom keys that depend on the documents in the index.

Result

Properties

  • absentTerms: string[]

    The basic query expression terms which this query result item does not match. Note: This property is populated by terms from the query pipeline-processed q value (not from the original q value).

  • clickUri: string

    The hyperlinkable item URI. Notes: Use the clickUri value when you want to create hyperlinks to the item, rather than the uri or printableUri value.

  • excerpt: string

    The contextual excerpt generated for the item (see the excerptLength query parameter).

  • excerptHighlights: HighlightKeyword[]

    The length and offset of each word to highlight in the item excerpt string.

  • firstSentences: string

    The first sentences retrieved from the item (see the retrieveFirstSentences query parameter).

  • firstSentencesHighlights: HighlightKeyword[]

    The length and offset of each word to highlight in the item firstSentences string.

  • flags: string

    The flags that are set on the item by the index. Distinct values are separated by semicolons.

  • hasHtmlVersion: boolean

    Whether the index contains an HTML version of this item.

  • isRecommendation: boolean

    Whether the item score was boosted as a Coveo ML recommendation.

  • isTopResult: boolean

    Whether the item score was boosted by a featured result rule in the query pipeline.

  • percentScore: number

    The item ranking score expressed as a percentage (see the sortCriteria and rankingFunctions query parameters).

  • printableUri: string

    The human readable item URI. Note: Avoid using the printableUri value to create hyperlinks to the item. Use the clickUri value instead.

  • printableUriHighlights: HighlightKeyword[]

    The length and offset of each word to highlight in the item printableUri string.

  • rankingInfo: string | null

    The raw debug information generated by the index to detail how the item was ranked. This property is null unless the debug query parameter is set to true.

  • raw: Raw

    The values of the fields which were retrieved for this item (see the fieldsToInclude and fieldsToExclude query parameters).

  • score: number

    The total ranking score computed for the item (see the sortCriteria and rankingFunctions query parameters).

  • summary: null

    The item summary (see the summaryLength query parameter).

  • summaryHighlights: HighlightKeyword[]

    The length and offset of each word to highlight in the item summary string.

  • title: string

    Contains the title of the item.

  • titleHighlights: HighlightKeyword[]

    The length and offset of each word to highlight in the item title string.

  • uniqueId: string

    The unique item identifier. You should consider the uniqueId value as an opaque string.

  • uri: string

    The item URI. Notes: Avoid using the uri value to create hyperlinks to the item. Use the clickUri value instead.

  • rankingModifier?: string

    If applicable, represents the type of ranking modification that was applied to this result.

Example Implementation

result-link.tsx

import {buildInteractiveResult, Result} from '@coveo/headless';
import {FunctionComponent, useContext, useEffect} from 'react';
import {AppContext} from '../../context/engine';
import {filterProtocol} from '../../utils/filter-protocol';
 
interface LinkProps {
  result: Result;
}
 
export const ResultLink: FunctionComponent<LinkProps> = (props) => {
  const {engine} = useContext(AppContext);
 
  const interactiveResult = buildInteractiveResult(engine!, {
    options: {result: props.result},
  });
 
  useEffect(() => () => interactiveResult.cancelPendingSelect(), []);
 
  return (
    <a
      href={filterProtocol(props.result.clickUri)}
      onClick={() => interactiveResult.select()}
      onContextMenu={() => interactiveResult.select()}
      onMouseDown={() => interactiveResult.select()}
      onMouseUp={() => interactiveResult.select()}
      onTouchStart={() => interactiveResult.beginDelayedSelect()}
      onTouchEnd={() => interactiveResult.cancelPendingSelect()}
    >
      {props.children}
    </a>
  );
};