Custom Range Connector Keeps Returning Range of 0

[AbdelrahmanAhmed605]

Use Case

I'd really appreicate any input on this! I am trying to create my own custom range connector that takes in 2 attributes (a minAttribute and a maxAttribute) instead of 1. The way it works is that when a user enters a user_min value, the custom range connector will refine to show objects with a maxAttribute > user_min and when a user enters a user_max, the custom range connector will refine to show objects with a minAttribute < user_max. If the user enters both a user_min and user_max then it just finds the intersection of the previous scenarios.

Issue

My current range connector works for the most part, but the issue arrises for the following scenarios:

• if the user enters only a user_min (undefined user_max) and the user_min is greater than all the maxAttribute values, instead of showing 0 results, it does not even try to refine the search. This is fine I guess since I can put a min and max attribute on the form <input> element, but the "range" parameter returned from my custom useRange hook keeps returning {min: 0, max: 0}

Example

I have 3 objects in my index -> {minPrice: 10, maxPrice: 20}, {minPrice: 30, maxPrice: 40}, {minPrice: 50, maxPrice: 60}

Now if the user inputs a min value of 100 with no max_value, instead of showing 0 results, it still shows 3. Similarly, if the user inputs a max value of 5 with no min_value, instead of showing 0 results, it still shows 3. The weird thing is that if the user inputs a min value of 100 and a max value of 101 (instead of undefined) then it will return 0 results.

I tried using "range" from const { start, range, canRefine, precision, refine } = useCustomRange(props); to set min and max limits on my form <input/> element but like I said, it gives me {min: 0, max: 0}.

Supplementary Information

Here is my custom range connector if you feel like you need extra details. I essentially copied the default range connector (https://github.com/algolia/instantsearch/blob/master/packages/instantsearch.js/src/connectors/range/connectRange.ts), but tweaked the lines that had "attribute" to use minAttribute and maxAttribute instead.

import {
  checkRendering,
  createDocumentationMessageGenerator,
  isFiniteNumber,
  find,
  noop,
} from 'instantsearch.js/es/lib/utils';

import type { SendEventForFacet } from 'instantsearch.js/es/lib/utils';
import type {
  Connector,
  InstantSearch,
  WidgetRenderState,
} from 'instantsearch.js/es/types';
import type { AlgoliaSearchHelper, SearchResults } from 'algoliasearch-helper';

const withUsage = createDocumentationMessageGenerator(
  { name: 'range-input', connector: true },
  { name: 'range-slider', connector: true }
);

const $$type = 'ais.range';

export type RangeMin = number | undefined;
export type RangeMax = number | undefined;

// @MAJOR: potentially we should consolidate these types
export type RangeBoundaries = [RangeMin, RangeMax];
export type Range = {
  min: RangeMin;
  max: RangeMax;
};

export type RangeRenderState = {
  /**
   * Sets a range to filter the results on. Both values
   * are optional, and will default to the higher and lower bounds. You can use `undefined` to remove a
   * previously set bound or to set an infinite bound.
   * @param rangeValue tuple of [min, max] bounds
   */
  refine: (rangeValue: RangeBoundaries) => void;

  /**
   * Indicates whether this widget can be refined
   */
  canRefine: boolean;

  /**
   * Send an event to the insights middleware
   */
  sendEvent: SendEventForFacet;

  /**
   * Maximum range possible for this search
   */
  range: Range;

  /**
   * Current refinement of the search
   */
  start: RangeBoundaries;

  /**
   * Transform for the rendering `from` and/or `to` values.
   * Both functions take a `number` as input and should output a `string`.
   */
  format: {
    from: (fromValue: number) => string;
    to: (toValue: number) => string;
  };
};

export type RangeConnectorParams = {
  /**
   * Name of the minimum attribute for faceting.
   */
  minAttribute: string;

  /**
   * Name of the maximum attribute for faceting.
   */
  maxAttribute: string;

  /**
   * Minimal range value, default to automatically computed from the result set.
   */
  min?: number;

  /**
   * Maximal range value, default to automatically computed from the result set.
   */
  max?: number;

  /**
   * Number of digits after decimal point to use.
   */
  precision?: number;
};

export type RangeWidgetDescription = {
  $$type: 'ais.range';
  renderState: RangeRenderState;
  indexRenderState: {
    range: {
      [attribute: string]: WidgetRenderState<
        RangeRenderState,
        RangeConnectorParams
      >;
    };
  };
  indexUiState: {
    range: {
      // @TODO: this could possibly become `${number}:${number}` later
      [attribute: string]: string;
    };
  };
};

export type RangeConnector = Connector<
  RangeWidgetDescription,
  RangeConnectorParams
>;

function toPrecision({
  min,
  max,
  precision,
}: {
  min?: number;
  max?: number;
  precision: number;
}) {
  const pow = Math.pow(10, precision);

  return {
    min: min ? Math.floor(min * pow) / pow : min,
    max: max ? Math.ceil(max * pow) / pow : max,
  };
}

/**
 * **Range** connector provides the logic to create custom widget that will let
 * the user refine results using a numeric range.
 *
 * This connectors provides a `refine()` function that accepts bounds. It will also provide
 * information about the min and max bounds for the current result set.
 */
const connectRange: RangeConnector = function connectRange(
  renderFn,
  unmountFn = noop
) {
  checkRendering(renderFn, withUsage());

  return (widgetParams) => {
    const {
      minAttribute = '',
      maxAttribute = '',
      min: minBound,
      max: maxBound,
      precision = 0,
    } = widgetParams || {};

    if (!minAttribute || !maxAttribute) {
      throw new Error(withUsage('The `attribute` option is required.'));
    }

    if (
      isFiniteNumber(minBound) &&
      isFiniteNumber(maxBound) &&
      minBound > maxBound
    ) {
      throw new Error(withUsage("The `max` option can't be lower than `min`."));
    }

    const formatToNumber = (v: string | number) =>
      Number(Number(v).toFixed(precision));

    const rangeFormatter = {
      from: (v: number) => v.toLocaleString(),
      to: (v: number) => formatToNumber(v).toLocaleString(),
    };

    // eslint-disable-next-line complexity
    const getRefinedState = (
      helper: AlgoliaSearchHelper,
      currentRange: Range,
      nextMin: RangeMin | string,
      nextMax: RangeMax | string
    ) => {
      let resolvedState = helper.state;
      const { min: currentRangeMin, max: currentRangeMax } = currentRange;

      const [min] =
        resolvedState.getNumericRefinement(maxAttribute, '>=') || [];
      const [max] =
        resolvedState.getNumericRefinement(minAttribute, '<=') || [];

      const isResetMin = nextMin === undefined || nextMin === '';
      const isResetMax = nextMax === undefined || nextMax === '';

      const { min: nextMinAsNumber, max: nextMaxAsNumber } = toPrecision({
        min: !isResetMin ? parseFloat(nextMin as string) : undefined,
        max: !isResetMax ? parseFloat(nextMax as string) : undefined,
        precision,
      });

      let newNextMin: RangeMin;
      if (!isFiniteNumber(minBound) && currentRangeMin === nextMinAsNumber) {
        newNextMin = undefined;
      } else if (isFiniteNumber(minBound) && isResetMin) {
        newNextMin = minBound;
      } else {
        newNextMin = nextMinAsNumber;
      }

      let newNextMax: RangeMax;
      if (!isFiniteNumber(maxBound) && currentRangeMax === nextMaxAsNumber) {
        newNextMax = undefined;
      } else if (isFiniteNumber(maxBound) && isResetMax) {
        newNextMax = maxBound;
      } else {
        newNextMax = nextMaxAsNumber;
      }

      const isResetNewNextMin = newNextMin === undefined;
      const isGreaterThanCurrentRange =
        isFiniteNumber(currentRangeMin) && currentRangeMin <= newNextMin!;
      const isMinValid =
        isResetNewNextMin ||
        (isFiniteNumber(newNextMin) &&
          (!isFiniteNumber(currentRangeMin) || isGreaterThanCurrentRange));

      const isResetNewNextMax = newNextMax === undefined;
      const isLowerThanRange =
        isFiniteNumber(newNextMax) && currentRangeMax >= newNextMax;
      const isMaxValid =
        isResetNewNextMax ||
        (isFiniteNumber(newNextMax) &&
          (!isFiniteNumber(currentRangeMax) || isLowerThanRange));

      const hasMinChange = min !== newNextMin;
      const hasMaxChange = max !== newNextMax;

      if ((hasMinChange || hasMaxChange) && isMinValid && isMaxValid) {
        resolvedState = resolvedState.removeNumericRefinement(minAttribute);
        resolvedState = resolvedState.removeNumericRefinement(maxAttribute);

        if (isFiniteNumber(newNextMin)) {
          resolvedState = resolvedState.addNumericRefinement(
            maxAttribute,
            '>=',
            newNextMin
          );
        }

        if (isFiniteNumber(newNextMax)) {
          resolvedState = resolvedState.addNumericRefinement(
            minAttribute,
            '<=',
            newNextMax
          );
        }

        return resolvedState.resetPage();
      }

      return null;
    };

    const createSendEvent =
      (instantSearchInstance: InstantSearch) =>
      (...args: Parameters<SendEventForFacet>) => {
        if (args.length === 1) {
          instantSearchInstance.sendEventToInsights(args[0]);
          return;
        }
      };

    function _getCurrentRange(
      stats: Partial<NonNullable<SearchResults.Facet['stats']>>
    ) {
      let min: number;
      if (isFiniteNumber(minBound)) {
        min = minBound;
      } else if (isFiniteNumber(stats.min)) {
        min = stats.min;
      } else {
        min = 0;
      }

      let max: number;
      if (isFiniteNumber(maxBound)) {
        max = maxBound;
      } else if (isFiniteNumber(stats.max)) {
        max = stats.max;
      } else {
        max = 0;
      }

      return toPrecision({ min, max, precision });
    }

    function _getCurrentRefinement(
      helper: AlgoliaSearchHelper
    ): RangeBoundaries {
      const [minValue] = helper.getNumericRefinement(minAttribute, '>=') || [];

      const [maxValue] = helper.getNumericRefinement(maxAttribute, '<=') || [];

      const min = isFiniteNumber(minValue) ? minValue : -Infinity;
      const max = isFiniteNumber(maxValue) ? maxValue : Infinity;

      return [min, max];
    }

    function _refine(helper: AlgoliaSearchHelper, currentRange: Range) {
      return ([nextMin, nextMax]: RangeBoundaries = [undefined, undefined]) => {
        const refinedState = getRefinedState(
          helper,
          currentRange,
          nextMin,
          nextMax
        );
        if (refinedState) {
          helper.setState(refinedState).search();
        }
      };
    }

    return {
      $$type,

      init(initOptions) {
        renderFn(
          {
            ...this.getWidgetRenderState(initOptions),
            instantSearchInstance: initOptions.instantSearchInstance,
          },
          true
        );
      },

      render(renderOptions) {
        renderFn(
          {
            ...this.getWidgetRenderState(renderOptions),
            instantSearchInstance: renderOptions.instantSearchInstance,
          },
          false
        );
      },

      getRenderState(renderState, renderOptions) {
        return {
          ...renderState,
          range: {
            ...renderState.range,
            [minAttribute]: this.getWidgetRenderState(renderOptions),
            [maxAttribute]: this.getWidgetRenderState(renderOptions),
          },
        };
      },

      getWidgetRenderState({ results, helper, instantSearchInstance }) {
        const facetsFromResults = (results && results.disjunctiveFacets) || [];
        const minFacet = find(
          facetsFromResults,
          (facetResult) => facetResult.name === minAttribute
        );
        const maxFacet = find(
          facetsFromResults,
          (facetResult) => facetResult.name === maxAttribute
        );
        const minStats = (minFacet && minFacet.stats) || {
          min: undefined,
          max: undefined,
        };
        const maxStats = (maxFacet && maxFacet.stats) || {
          min: undefined,
          max: undefined,
        };

        // const currentRange = { min: minStats.min, max: maxStats.max };
        // const currentMinRange = _getCurrentRange(minStats);
        // const currentMaxRange = _getCurrentRange(maxStats);
        const currentRange = _getCurrentRange({
          min: minStats.min,
          max: maxStats.max,
        });
        const start = _getCurrentRefinement(helper);

        let refine: ReturnType<typeof _refine>;

        if (!results) {
          // On first render pass an empty range
          // to be able to bypass the validation
          // related to it
          refine = _refine(helper, {
            min: undefined,
            max: undefined,
          });
        } else {
          refine = _refine(helper, currentRange);
        }

        return {
          refine,
          canRefine: currentRange.min !== currentRange.max,
          format: rangeFormatter,
          range: currentRange,
          sendEvent: createSendEvent(instantSearchInstance),
          widgetParams: {
            ...widgetParams,
            precision,
          },
          start,
        };
      },

      dispose({ state }) {
        unmountFn();

        return state
          .removeDisjunctiveFacet(minAttribute)
          .removeNumericRefinement(minAttribute)
          .removeDisjunctiveFacet(maxAttribute)
          .removeNumericRefinement(maxAttribute);
      },

      getWidgetUiState(uiState, { searchParameters }) {
        const { '>=': min = [] } =
          searchParameters.getNumericRefinements(maxAttribute);

        const { '<=': max = [] } =
          searchParameters.getNumericRefinements(minAttribute);

        if (min.length === 0 && max.length === 0) {
          return uiState;
        }

        return {
          ...uiState,
          range: {
            ...uiState.range,
            [minAttribute]: `${min}`,
            [maxAttribute]: `${max}`,
          },
        };
      },

      getWidgetSearchParameters(searchParameters, { uiState }) {
        let widgetSearchParameters = searchParameters
          .addDisjunctiveFacet(minAttribute)
          .addDisjunctiveFacet(maxAttribute)
          .setQueryParameters({
            numericRefinements: {
              ...searchParameters.numericRefinements,
              [minAttribute]: {},
              [maxAttribute]: {},
            },
          });

        if (isFiniteNumber(minBound)) {
          widgetSearchParameters = widgetSearchParameters.addNumericRefinement(
            minAttribute,
            '>=',
            minBound
          );
        }

        if (isFiniteNumber(maxBound)) {
          widgetSearchParameters = widgetSearchParameters.addNumericRefinement(
            maxAttribute,
            '<=',
            maxBound
          );
        }

        // const value = uiState.range && uiState.range[attribute];
        const lowerBound =
          uiState.range && parseFloat(uiState.range[minAttribute]);
        const upperBound =
          uiState.range && parseFloat(uiState.range[maxAttribute]);

        if (!lowerBound || !upperBound) {
          return widgetSearchParameters;
        }

        // if (!value || value.indexOf(':') === -1) {
        //   return widgetSearchParameters;
        // }

        // const [lowerBound, upperBound] = value.split(':').map(parseFloat);

        if (
          isFiniteNumber(lowerBound) &&
          (!isFiniteNumber(minBound) || minBound < lowerBound)
        ) {
          widgetSearchParameters =
            widgetSearchParameters.removeNumericRefinement(maxAttribute, '>=');
          widgetSearchParameters = widgetSearchParameters.addNumericRefinement(
            maxAttribute,
            '>=',
            lowerBound
          );
        }

        if (
          isFiniteNumber(upperBound) &&
          (!isFiniteNumber(maxBound) || upperBound < maxBound)
        ) {
          widgetSearchParameters =
            widgetSearchParameters.removeNumericRefinement(minAttribute, '<=');
          widgetSearchParameters = widgetSearchParameters.addNumericRefinement(
            minAttribute,
            '<=',
            upperBound
          );
        }

        return widgetSearchParameters;
      },
    };
  };
};

export default connectRange;