feat(quantic): support of dependant facets added

[mmitiche]

SFINT-5773

Description

This PR introduces a new dependsOn public property to support dependent facets functionality in our facet components. The dependsOn property allows a facet to be conditionally displayed based on the selection state of another "parent" facet. This feature provides greater flexibility in controlling facet visibility, creating a more dynamic and relevant filtering experience for users.

This feature in now supported for all types of facets: QuanticFacet, QuanticCategoryFacet, QuanticNumericFacet, QuanticTimeframeFacet and QuanticDateFacet.

Property Structure

The dependsOn property accepts an object with the following fields:

• parentFacetId (string): The ID of the parent facet this facet depends on.
• expectedValue (string): The value that must be selected in the parent facet for this facet to be displayed.

Example Usage

  // exampleSearch.js
  ExampleDependency = {
    parentFacetId: 'filetype',
    expectedValue: 'txt'
  }

  <!-- exampleSearch.html -->
  <c-quantic-category-facet
    with-search
    field="geographicalhierarchy"
    label="Country"
    depends-on={ExampleDependency}
    engine-id={engineId}
  ></c-quantic-category-facet> 

The category facet will only be displayed when the value txt is selected in the filetype facet.

Screen.Recording.2024-11-08.at.9.12.04.AM.mov

[github-actions]

Pull Request Report

PR Title

❌ Title should follow the conventional commit spec:
<type>(optional scope): <description>

Example: feat(headless): add result-list controller

Live demo links

• Storybook

• Playwright report

Bundle Size

File	Old (kb)	New (kb)	Change (%)
case-assist	236.8	236.8	0
commerce	341.5	341.5	0
search	412.8	412.8	0
insight	402.1	402.1	0
recommendation	249.1	249.1	0
ssr	406.3	406.3	0
ssr-commerce	353.7	353.7	0

SSR Progress

Use case	SSR (#)	CSR (#)	Progress (%)
search	39	44	89
recommendation	0	4	0
case-assist	0	6	0
insight	0	27	0
commerce	0	15	0

Detailed logs

search : buildInteractiveResult
search : buildInteractiveInstantResult
search : buildInteractiveRecentResult
search : buildInteractiveCitation
search : buildGeneratedAnswer
recommendation : missing SSR support
case-assist : missing SSR support
insight : missing SSR support
commerce : missing SSR support

[SimonMilord]

Few comments, but overall looks good, nice work!

[erocheleau]

Github is acting weird, posting my comment so it isn't lost

[erocheleau]

I put my comments on the quanticTimeframeFacet but I guess they apply to all the facets.

Two very important points that we need to document in the code I think:

1. Looks like the facetDependencyManager is only checking if the expected value is part of a "basic facet" or a "category facet" meaning we should document that it isn't supported to depend on a value being selected in a numeric, date, timeframe facet.

2. The way the code runs right now I am pretty sure that means we can pass "no value" or undefined as the expectedValue and it should work, because of this

generateFacetDependencyConditions() ...
           if (!expectedValue) {
              return true;
            }

I think this is the desired behavior, but I would also say we need to document it.

* Example to show a facet when any value is selected:
   * {
   *   parentFacetId: 'filetype',
   * }
or
* Example to only show when a specific value is selected:
   * {
   *   parentFacetId: 'filetype',
   *   expectedValue: 'txt'
   * }

[mmitiche]

I put my comments on the quanticTimeframeFacet but I guess they apply to all the facets.

Two very important points that we need to document in the code I think:

1. Looks like the facetDependencyManager is only checking if the expected value is part of a "basic facet" or a "category facet" meaning we should document that it isn't supported to depend on a value being selected in a numeric, date, timeframe facet.
2. The way the code runs right now I am pretty sure that means we can pass "no value" or undefined as the expectedValue and it should work, because of this

generateFacetDependencyConditions() ...
           if (!expectedValue) {
              return true;
            }

I think this is the desired behavior, but I would also say we need to document it.

* Example to show a facet when any value is selected:
   * {
   *   parentFacetId: 'filetype',
   * }
or
* Example to only show when a specific value is selected:
   * {
   *   parentFacetId: 'filetype',
   *   expectedValue: 'txt'
   * }

Indeed, both these points are true! I will update the doc of the component to reflect them 👍

[erocheleau]

Very nice!