fix(atomic): reset dependent numeric / date facet input when parent facet is cleared

packages/atomic/src/components/common/facets/timeframe-facet-common.tsx

@@ -47,7 +47,7 @@ interface TimeframeFacetCommonOptions {
   withDatePicker: boolean;
   setFacetId(id: string): string;
   getSearchStatusState(): SearchStatusState;
-  buildDependenciesManager(): FacetConditionsManager;
+  buildDependenciesManager(facetId: string): FacetConditionsManager;
   deserializeRelativeDate(date: string): RelativeDate;
   buildDateRange(config: DateRangeOptions): DateRangeRequest;
   initializeFacetForDatePicker(): DateFacet;
@@ -72,7 +72,9 @@ export class TimeframeFacetCommon {
   private facetForDateRange?: DateFacet;
   private filter?: DateFilter;
   private manualTimeframes: Timeframe[] = [];
-  private dependenciesManager?: FacetConditionsManager;
+  private facetForDateRangeDependenciesManager?: FacetConditionsManager;
+  private facetForDatePickerDependenciesManager?: FacetConditionsManager;
+  private filterDependenciesManager?: FacetConditionsManager;
 
   constructor(private props: TimeframeFacetCommonOptions) {
     this.facetId = this.determineFacetId;
@@ -93,12 +95,26 @@ export class TimeframeFacetCommon {
 
     if (this.props.withDatePicker) {
       this.facetForDatePicker = this.props.initializeFacetForDatePicker();
+      this.facetForDatePickerDependenciesManager =
+        this.props.buildDependenciesManager(
+          this.facetForDatePicker.state.facetId
+        );
       this.filter = this.props.initializeFilter();
     }
 
-    if (this.facetForDateRange || this.filter) {
-      this.dependenciesManager = this.props.buildDependenciesManager();
+    if (this.facetForDateRange) {
+      this.facetForDateRangeDependenciesManager =
+        this.props.buildDependenciesManager(
+          this.facetForDateRange?.state.facetId
+        );
     }
+
+    if (this.filter) {
+      this.filterDependenciesManager = this.props.buildDependenciesManager(
+        this.filter?.state.facetId
+      );
+    }
+
     this.registerFacetToStore();
   }
 
@@ -189,7 +205,9 @@ export class TimeframeFacetCommon {
     if (this.props.host.isConnected) {
       return;
     }
-    this.dependenciesManager?.stopWatching();
+    this.facetForDateRangeDependenciesManager?.stopWatching();
+    this.facetForDatePickerDependenciesManager?.stopWatching();
+    this.filterDependenciesManager?.stopWatching();
   }
 
   private get isHidden() {

packages/atomic/src/components/insight/atomic-insight-timeframe-facet/atomic-insight-timeframe-facet.tsx

@@ -142,10 +142,9 @@ export class AtomicInsightTimeframeFacet
       dependsOn: this.dependsOn,
       withDatePicker: this.withDatePicker,
       setFacetId: (id: string) => (this.facetId = id),
-      buildDependenciesManager: () =>
+      buildDependenciesManager: (facetId: string) =>
         buildInsightFacetConditionsManager(this.bindings.engine, {
-          facetId:
-            this.facetForDateRange?.state.facetId ?? this.filter!.state.facetId,
+          facetId,
           conditions: parseDependsOn<
             InsightFacetValueRequest | InsightCategoryFacetValueRequest
           >(this.dependsOn),

packages/atomic/src/components/search/facets/atomic-numeric-facet/atomic-numeric-facet.new.stories.tsx

@@ -3,8 +3,17 @@ import {facetDecorator} from '@/storybook-utils/common/facets-decorator';
 import {renderComponent} from '@/storybook-utils/common/render-component';
 import {wrapInSearchInterface} from '@/storybook-utils/search/search-interface-wrapper';
 import type {Meta, StoryObj as Story} from '@storybook/web-components';
+import {html} from 'lit-html';
+import {within} from 'shadow-dom-testing-library';
 
-const {decorator, play} = wrapInSearchInterface();
+const {decorator, play} = wrapInSearchInterface({
+  preprocessRequest: (r) => {
+    const parsed = JSON.parse(r.body as string);
+    parsed.aq = '@filetype==("YouTubeVideo")';
+    r.body = JSON.stringify(parsed);
+    return r;
+  },
+});
 
 const meta: Meta = {
   component: 'atomic-numeric-facet',
@@ -34,3 +43,51 @@ export const Default: Story = {
     'attributes-field': 'ytviewcount',
   },
 };
+
+export const WithDependsOn: Story = {
+  name: 'atomic-numeric-facet-with-depends-on',
+  tags: ['test'],
+  decorators: [
+    (story, context) =>
+      html`<style>
+          ${context.componentId},
+          atomic-facet {
+            max-width: 500px;
+            margin: auto;
+          }
+        </style>
+        <atomic-breadbox data-testid="breadbox"></atomic-breadbox>
+        ${story({})}
+        <atomic-facet
+          data-testid="parent-facet"
+          field="filetype"
+          label="File Type (Parent facet)"
+        ></atomic-facet>`,
+  ],
+  argTypes: {
+    'attributes-depends-on-filetype': {
+      name: 'depends-on-filetype',
+      control: {type: 'text'},
+    },
+  },
+  args: {
+    'attributes-label': 'YouTube View Count (Dependent facet)',
+    'attributes-field': 'ytviewcount',
+    'attributes-with-input': 'integer',
+    'attributes-depends-on-filetype': 'YouTubeVideo',
+  },
+  play: async (context) => {
+    const {canvasElement, step} = context;
+    const canvas = within(canvasElement);
+    await play(context);
+    await step('Select YouTubeVideo in File Type facet', async () => {
+      const button = await canvas.findByShadowLabelText(
+        'Inclusion filter on YouTubeVideo',
+        {
+          exact: false,
+        }
+      );
+      button.ariaChecked === 'false' ? button.click() : null;
+    });
+  },
+};

packages/atomic/src/components/search/facets/atomic-numeric-facet/atomic-numeric-facet.tsx

@@ -94,7 +94,9 @@ export class AtomicNumericFacet implements InitializableComponent {
   @Element() private host!: HTMLElement;
   private manualRanges: (NumericRangeRequest & {label?: string})[] = [];
   private formatter: NumberFormatter = defaultNumberFormatter;
-  private dependenciesManager?: FacetConditionsManager;
+  private facetForRangeDependenciesManager?: FacetConditionsManager;
+  private facetForInputDependenciesManager?: FacetConditionsManager;
+  private filterDependenciesManager?: FacetConditionsManager;
 
   @BindStateToController('facetForRange')
   @State()
@@ -244,17 +246,17 @@ export class AtomicNumericFacet implements InitializableComponent {
     this.initializeFacetForInput();
     this.initializeFacetForRange();
     this.initializeFilter();
-    this.initializeDependenciesManager();
     this.initializeSearchStatus();
-
     this.registerFacetToStore();
   }
 
   public disconnectedCallback() {
     if (this.host.isConnected) {
       return;
     }
-    this.dependenciesManager?.stopWatching();
+    this.facetForRangeDependenciesManager?.stopWatching();
+    this.facetForInputDependenciesManager?.stopWatching();
+    this.filterDependenciesManager?.stopWatching();
   }
 
   private initializeSearchStatus() {
@@ -284,6 +286,10 @@ export class AtomicNumericFacet implements InitializableComponent {
       },
     });
 
+    this.facetForInputDependenciesManager = this.initializeDependenciesManager(
+      this.facetForInput.state.facetId
+    );
+
     return this.facetForInput;
   }
 
@@ -313,6 +319,10 @@ export class AtomicNumericFacet implements InitializableComponent {
       },
     });
 
+    this.facetForRangeDependenciesManager = this.initializeDependenciesManager(
+      this.facetForRange.state.facetId
+    );
+
     return this.facetForRange;
   }
 
@@ -326,21 +336,21 @@ export class AtomicNumericFacet implements InitializableComponent {
         field: this.field,
       },
     });
-  }
 
-  private initializeDependenciesManager() {
-    this.dependenciesManager = buildFacetConditionsManager(
-      this.bindings.engine,
-      {
-        facetId:
-          this.facetForRange?.state.facetId ?? this.filter!.state.facetId,
-        conditions: parseDependsOn<
-          FacetValueRequest | CategoryFacetValueRequest
-        >(this.dependsOn),
-      }
+    this.filterDependenciesManager = this.initializeDependenciesManager(
+      this.filter.state.facetId
     );
   }
 
+  private initializeDependenciesManager(facetId: string) {
+    return buildFacetConditionsManager(this.bindings.engine, {
+      facetId,
+      conditions: parseDependsOn<FacetValueRequest | CategoryFacetValueRequest>(
+        this.dependsOn
+      ),
+    });
+  }
+
   private registerFacetToStore() {
     const facetInfo: FacetInfo = {
       label: () => this.bindings.i18n.t(this.label),

packages/atomic/src/components/search/facets/atomic-numeric-facet/e2e/atomic-numeric-facet.e2e.ts

@@ -0,0 +1,104 @@
+import {test, expect} from './fixture';
+
+test.describe('when a "depends-on" prop is provided', () => {
+  test.beforeEach(async ({facet}) => {
+    await facet.load({story: 'with-depends-on'});
+    await facet.facet.waitFor({state: 'visible'});
+  });
+
+  test('when the specified dependency is selected in the parent facet, dependent facet should be visible', async ({
+    facet,
+  }) => {
+    expect(facet.facet).toBeVisible();
+  });
+
+  test.describe('when the specified dependency is cleared from the parent facet', () => {
+    test('dependent facet should not be visible', async ({facet}) => {
+      const parent = facet.page.getByTestId('parent-facet');
+      await parent.getByLabel('Inclusion filter on YouTubeVideo').click();
+
+      expect(facet.facet).not.toBeVisible();
+    });
+
+    test('should clear previously selected dependent facet range', async ({
+      facet,
+    }) => {
+      await facet.facetValues.first().click();
+
+      const breadbox = facet.page.getByTestId('breadbox');
+      expect(breadbox).toBeVisible();
+
+      const parent = facet.page.getByTestId('parent-facet');
+      await parent.getByLabel('Inclusion filter on YouTubeVideo').click();
+
+      await breadbox.waitFor({state: 'hidden'});
+      expect(breadbox).not.toBeVisible();
+    });
+    test('should clear previously selected dependent facet input range', async ({
+      facet,
+    }) => {
+      await facet.facetInputStart.fill('900000');
+      await facet.facetInputEnd.fill('90000000');
+      await facet.facetApplyButton.click();
+
+      const breadbox = facet.page.getByTestId('breadbox');
+      expect(breadbox).toBeVisible();
+
+      const parent = facet.page.getByTestId('parent-facet');
+      await parent.getByLabel('Inclusion filter on YouTubeVideo').click();
+
+      await breadbox.waitFor({state: 'hidden'});
+      expect(breadbox).not.toBeVisible();
+    });
+  });
+
+  test.describe('when the specified dependency is cleared from the breadbox', () => {
+    test('dependent facet should not be visible', async ({facet}) => {
+      const breadbox = facet.page.getByTestId('breadbox');
+      await breadbox
+        .getByLabel(
+          'Remove inclusion filter on File Type (Parent facet): YouTubeVideo'
+        )
+        .click();
+
+      expect(facet.facet).not.toBeVisible();
+    });
+
+    test('should clear previously selected dependent facet range', async ({
+      facet,
+    }) => {
+      await facet.facetValues.first().click();
+
+      const breadbox = facet.page.getByTestId('breadbox');
+      expect(breadbox).toBeVisible();
+
+      await breadbox
+        .getByLabel(
+          'Remove inclusion filter on File Type (Parent facet): YouTubeVideo'
+        )
+        .click();
+
+      await breadbox.waitFor({state: 'hidden'});
+      expect(breadbox).not.toBeVisible();
+    });
+    test('should clear previously selected dependent facet input range', async ({
+      facet,
+    }) => {
+      await facet.facetInputStart.fill('900000');
+      await facet.facetInputEnd.fill('90000000');
+      await facet.facetApplyButton.click();
+
+      const breadbox = facet.page.getByTestId('breadbox');
+      expect(breadbox).toBeVisible();
+
+      await breadbox
+        .getByLabel(
+          'Remove inclusion filter on File Type (Parent facet): YouTubeVideo'
+        )
+        .click();
+
+      await breadbox.waitFor({state: 'hidden'});
+      expect(breadbox).not.toBeVisible();
+    });
+  });
+});

packages/atomic/src/components/search/facets/atomic-numeric-facet/e2e/fixture.ts

@@ -0,0 +1,19 @@
+import {test as base} from '@playwright/test';
+import {
+  AxeFixture,
+  makeAxeBuilder,
+} from '../../../../../../playwright-utils/base-fixture';
+import {AtomicNumericFacetPageObject as Facet} from './page-object';
+
+type MyFixture = {
+  facet: Facet;
+};
+
+export const test = base.extend<MyFixture & AxeFixture>({
+  makeAxeBuilder,
+  facet: async ({page}, use) => {
+    await use(new Facet(page));
+  },
+});
+
+export {expect} from '@playwright/test';

packages/atomic/src/components/search/facets/atomic-numeric-facet/e2e/page-object.ts

@@ -0,0 +1,32 @@
+import {Page} from '@playwright/test';
+import {BasePageObject} from '../../../../../../playwright-utils/base-page-object';
+
+export class AtomicNumericFacetPageObject extends BasePageObject<'atomic-numeric-facet'> {
+  constructor(page: Page) {
+    super(page, 'atomic-numeric-facet');
+  }
+
+  get facet() {
+    return this.page.locator('atomic-numeric-facet');
+  }
+
+  get facetInputStart() {
+    return this.facet.getByLabel('Enter a minimum numerical value');
+  }
+
+  get facetInputEnd() {
+    return this.facet.getByLabel('Enter a maximum numerical value');
+  }
+
+  get facetApplyButton() {
+    return this.facet.getByLabel('Apply custom numerical values');
+  }
+
+  get facetClearFilterButton() {
+    return this.facet.getByRole('button').filter({hasText: 'Clear filter'});
+  }
+
+  get facetValues() {
+    return this.facet.locator('[part="value-checkbox"]');
+  }
+}