[embeddable rebuild][controls] control group chaining

examples/controls_example/public/app/react_control_example.tsx

@@ -59,7 +59,7 @@ const timesliderControlId = 'timesliderControl1';
 const controlGroupPanels = {
   [searchControlId]: {
     type: SEARCH_CONTROL_TYPE,
-    order: 0,
+    order: 2,
     grow: true,
     width: 'medium',
     explicitInput: {
@@ -74,7 +74,7 @@ const controlGroupPanels = {
   },
   [rangeSliderControlId]: {
     type: RANGE_SLIDER_CONTROL_TYPE,
-    order: 0,
+    order: 1,
     grow: true,
     width: 'medium',
     explicitInput: {

examples/controls_example/public/react_controls/control_group/control_fetch/chaining.test.ts

@@ -0,0 +1,253 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ControlGroupChainingSystem } from '@kbn/controls-plugin/common';
+import { Filter } from '@kbn/es-query';
+import { BehaviorSubject, skip } from 'rxjs';
+import { chaining$ } from './chaining';
+
+const FILTER_ALPHA = {
+  meta: {
+    alias: 'filterAlpha',
+  },
+};
+const FILTER_BRAVO = {
+  meta: {
+    alias: 'filterBravo',
+  },
+};
+const FILTER_CHARLIE = {
+  meta: {
+    alias: 'filterCharlie',
+  },
+};
+const FILTER_DELTA = {
+  meta: {
+    alias: 'filterDelta',
+  },
+};
+
+describe('chaining$', () => {
+  const onFireMock = jest.fn();
+  const chainingSystem$ = new BehaviorSubject<ControlGroupChainingSystem>('HIERARCHICAL');
+  const controlsInOrder$ = new BehaviorSubject<Array<{ id: string; type: string }>>([]);
+  const alphaControlApi = {
+    filters$: new BehaviorSubject<Filter[] | undefined>(undefined),
+  };
+  const bravoControlApi = {
+    filters$: new BehaviorSubject<Filter[] | undefined>(undefined),
+    timeslice$: new BehaviorSubject<[number, number] | undefined>(undefined),
+  };
+  const charlieControlApi = {
+    filters$: new BehaviorSubject<Filter[] | undefined>(undefined),
+  };
+  const deltaControlApi = {
+    filters$: new BehaviorSubject<Filter[] | undefined>([FILTER_DELTA]),
+  };
+  const getControlApi = (uuid: string) => {
+    if (uuid === 'alpha') {
+      return alphaControlApi;
+    }
+    if (uuid === 'bravo') {
+      return bravoControlApi;
+    }
+    if (uuid === 'charlie') {
+      return charlieControlApi;
+    }
+    if (uuid === 'delta') {
+      return deltaControlApi;
+    }
+    return undefined;
+  };
+
+  beforeEach(() => {
+    onFireMock.mockReset();
+    alphaControlApi.filters$.next([FILTER_ALPHA]);
+    bravoControlApi.filters$.next([FILTER_BRAVO]);
+    bravoControlApi.timeslice$.next([
+      Date.parse('2024-06-09T06:00:00.000Z'),
+      Date.parse('2024-06-09T12:00:00.000Z'),
+    ]);
+    charlieControlApi.filters$.next([FILTER_CHARLIE]);
+    deltaControlApi.filters$.next([FILTER_DELTA]);
+    chainingSystem$.next('HIERARCHICAL');
+    controlsInOrder$.next([
+      { id: 'alpha', type: 'whatever' },
+      { id: 'bravo', type: 'whatever' },
+      { id: 'charlie', type: 'whatever' },
+      { id: 'delta', type: 'whatever' },
+    ]);
+  });
+
+  describe('hierarchical chaining', () => {
+    test('should contain values from controls to the left', async () => {
+      const subscription = chaining$(
+        'charlie',
+        chainingSystem$,
+        controlsInOrder$,
+        getControlApi
+      ).subscribe(onFireMock);
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      expect(onFireMock.mock.calls).toHaveLength(1);
+      const chainingContext = onFireMock.mock.calls[0][0];
+      expect(chainingContext).toEqual({
+        chainingFilters: [FILTER_ALPHA, FILTER_BRAVO],
+        timeRange: {
+          from: '2024-06-09T06:00:00.000Z',
+          to: '2024-06-09T12:00:00.000Z',
+          mode: 'absolute',
+        },
+      });
+      subscription.unsubscribe();
+    });
+
+    test('should fire on chaining system change', async () => {
+      const subscription = chaining$('charlie', chainingSystem$, controlsInOrder$, getControlApi)
+        .pipe(skip(1))
+        .subscribe(onFireMock);
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      expect(onFireMock.mock.calls).toHaveLength(0);
+
+      chainingSystem$.next('NONE');
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(onFireMock.mock.calls).toHaveLength(1);
+      const chainingContext = onFireMock.mock.calls[0][0];
+      expect(chainingContext).toEqual({
+        chainingFilters: [],
+        timeRange: undefined,
+      });
+      subscription.unsubscribe();
+    });
+
+    test('should fire when controls are moved', async () => {
+      const subscription = chaining$('charlie', chainingSystem$, controlsInOrder$, getControlApi)
+        .pipe(skip(1))
+        .subscribe(onFireMock);
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      expect(onFireMock.mock.calls).toHaveLength(0);
+
+      // Move control to right of 'delta' control
+      controlsInOrder$.next([
+        { id: 'alpha', type: 'whatever' },
+        { id: 'bravo', type: 'whatever' },
+        { id: 'delta', type: 'whatever' },
+        { id: 'charlie', type: 'whatever' },
+      ]);
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(onFireMock.mock.calls).toHaveLength(1);
+      const chainingContext = onFireMock.mock.calls[0][0];
+      expect(chainingContext).toEqual({
+        chainingFilters: [FILTER_ALPHA, FILTER_BRAVO, FILTER_DELTA],
+        timeRange: {
+          from: '2024-06-09T06:00:00.000Z',
+          to: '2024-06-09T12:00:00.000Z',
+          mode: 'absolute',
+        },
+      });
+      subscription.unsubscribe();
+    });
+
+    test('should fire when controls are removed', async () => {
+      const subscription = chaining$('charlie', chainingSystem$, controlsInOrder$, getControlApi)
+        .pipe(skip(1))
+        .subscribe(onFireMock);
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      expect(onFireMock.mock.calls).toHaveLength(0);
+
+      // remove 'bravo' control
+      controlsInOrder$.next([
+        { id: 'alpha', type: 'whatever' },
+        { id: 'charlie', type: 'whatever' },
+        { id: 'delta', type: 'whatever' },
+      ]);
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(onFireMock.mock.calls).toHaveLength(1);
+      const chainingContext = onFireMock.mock.calls[0][0];
+      expect(chainingContext).toEqual({
+        chainingFilters: [FILTER_ALPHA],
+        timeRange: undefined,
+      });
+      subscription.unsubscribe();
+    });
+
+    test('should fire when chained filter changes', async () => {
+      const subscription = chaining$('charlie', chainingSystem$, controlsInOrder$, getControlApi)
+        .pipe(skip(1))
+        .subscribe(onFireMock);
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      expect(onFireMock.mock.calls).toHaveLength(0);
+
+      alphaControlApi.filters$.next([
+        {
+          meta: {
+            alias: 'filterAlpha_version2',
+          },
+        },
+      ]);
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(onFireMock.mock.calls).toHaveLength(1);
+      const chainingContext = onFireMock.mock.calls[0][0];
+      expect(chainingContext.chainingFilters).toEqual([
+        {
+          meta: {
+            alias: 'filterAlpha_version2',
+          },
+        },
+        FILTER_BRAVO,
+      ]);
+      subscription.unsubscribe();
+    });
+
+    test('should not fire when unchained filter changes', async () => {
+      const subscription = chaining$('charlie', chainingSystem$, controlsInOrder$, getControlApi)
+        .pipe(skip(1))
+        .subscribe(onFireMock);
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      expect(onFireMock.mock.calls).toHaveLength(0);
+
+      deltaControlApi.filters$.next([
+        {
+          meta: {
+            alias: 'filterDelta_version2',
+          },
+        },
+      ]);
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(onFireMock.mock.calls).toHaveLength(0);
+      subscription.unsubscribe();
+    });
+
+    test('should fire when chained timeslice changes', async () => {
+      const subscription = chaining$('charlie', chainingSystem$, controlsInOrder$, getControlApi)
+        .pipe(skip(1))
+        .subscribe(onFireMock);
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      expect(onFireMock.mock.calls).toHaveLength(0);
+
+      bravoControlApi.timeslice$.next([
+        Date.parse('2024-06-09T12:00:00.000Z'),
+        Date.parse('2024-06-09T18:00:00.000Z'),
+      ]);
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(onFireMock.mock.calls).toHaveLength(1);
+      const chainingContext = onFireMock.mock.calls[0][0];
+      expect(chainingContext.timeRange).toEqual({
+        from: '2024-06-09T12:00:00.000Z',
+        to: '2024-06-09T18:00:00.000Z',
+        mode: 'absolute',
+      });
+      subscription.unsubscribe();
+    });
+  });
+});

examples/controls_example/public/react_controls/control_group/control_fetch/chaining.ts

@@ -0,0 +1,88 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ControlGroupChainingSystem } from '@kbn/controls-plugin/common';
+import { Filter, TimeRange } from '@kbn/es-query';
+import {
+  apiPublishesFilters,
+  apiPublishesTimeslice,
+  PublishingSubject,
+} from '@kbn/presentation-publishing';
+import { BehaviorSubject, combineLatest, debounceTime, map, Observable, switchMap } from 'rxjs';
+
+export interface ChainingContext {
+  chainingFilters?: Filter[] | undefined;
+  timeRange?: TimeRange | undefined;
+}
+
+export function chaining$(
+  uuid: string,
+  chainingSystem$: PublishingSubject<ControlGroupChainingSystem>,
+  controlsInOrder$: PublishingSubject<Array<{ id: string; type: string }>>,
+  getControlApi: (uuid: string) => undefined | unknown
+) {
+  return combineLatest([chainingSystem$, controlsInOrder$]).pipe(
+    switchMap(([chainingSystem, controlsInOrder]) => {
+      const observables: Array<Observable<unknown>> = [];
+      if (chainingSystem === 'HIERARCHICAL') {
+        for (let i = 0; i < controlsInOrder.length; i++) {
+          if (controlsInOrder[i].id === uuid) {
+            break;
+          }
+
+          const chainedControlApi = getControlApi(controlsInOrder[i].id);
+
+          const chainedControl$ = combineLatest([
+            apiPublishesFilters(chainedControlApi)
+              ? chainedControlApi.filters$
+              : new BehaviorSubject(undefined),
+            apiPublishesTimeslice(chainedControlApi)
+              ? chainedControlApi.timeslice$
+              : new BehaviorSubject(undefined),
+          ]).pipe(
+            map(([filters, timeslice]) => {
+              return {
+                filters,
+                timeslice,
+              };
+            })
+          );
+          observables.push(chainedControl$);
+        }
+      }
+
+      return observables.length ? combineLatest(observables) : new BehaviorSubject([]);
+    }),
+    debounceTime(0),
+    map((chainedControlValues) => {
+      const chainingFilters: Filter[] = [];
+      let timeRange: undefined | TimeRange;
+      (
+        chainedControlValues as Array<{
+          filters: undefined | Filter[];
+          timeslice: undefined | [number, number];
+        }>
+      ).forEach((chainedControlValue) => {
+        if (chainedControlValue.filters && chainedControlValue.filters.length) {
+          chainingFilters.push(...chainedControlValue.filters);
+        }
+        if (chainedControlValue.timeslice) {
+          timeRange = {
+            from: new Date(chainedControlValue.timeslice[0]).toISOString(),
+            to: new Date(chainedControlValue.timeslice[1]).toISOString(),
+            mode: 'absolute' as 'absolute',
+          };
+        }
+      });
+      return {
+        chainingFilters,
+        timeRange,
+      };
+    })
+  );
+}