feat(flame): expose search control (#2064)

elastic · Jun 7, 2023 · 011b56b · 011b56b
1 parent fe17a47
commit 011b56b
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 1 deletion.
diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md
@@ -611,6 +611,8 @@ export interface ControlReceiverCallbacks {
     focusOnNode: (control: FlameNodeControl) => void;
     // (undocumented)
     resetFocus: (control: FlameGlobalControl) => void;
+    // (undocumented)
+    search: (control: FlameSearchControl) => void;
 }
 
 // @public (undocumented)
@@ -1078,6 +1080,9 @@ export interface FlameLayerValue {
 // @public
 export type FlameNodeControl = (nodeIndex: number) => void;
 
+// @public
+export type FlameSearchControl = (text: string) => void;
+
 // @public
 export interface FlameSpec<D extends BaseDatum = Datum> extends Spec, LegacyAnimationConfig {
     // (undocumented)

diff --git a/packages/charts/src/chart_types/flame_chart/flame_api.ts b/packages/charts/src/chart_types/flame_chart/flame_api.ts
@@ -25,6 +25,12 @@ export type FlameGlobalControl = () => void; // takes no argument
  */
 export type FlameNodeControl = (nodeIndex: number) => void; // takes no arguments
 
+/**
+ * Control function for setting chart focus on a specific node
+ * @public
+ */
+export type FlameSearchControl = (text: string) => void; // takes no arguments
+
 /**
  * Provides direct controls for the Flame component user.
  * The call site supplied callback function is invoked on the chart component initialization as well as on component update,
@@ -34,6 +40,7 @@ export type FlameNodeControl = (nodeIndex: number) => void; // takes no argument
 export interface ControlReceiverCallbacks {
   resetFocus: (control: FlameGlobalControl) => void; // call site responsibility to store and use the `control` function
   focusOnNode: (control: FlameNodeControl) => void; // same but the control function passed to the call site uses one arg
+  search: (control: FlameSearchControl) => void;
 }
 
 /**

diff --git a/packages/charts/src/chart_types/flame_chart/flame_chart.tsx b/packages/charts/src/chart_types/flame_chart/flame_chart.tsx
@@ -313,6 +313,13 @@ class FlameComponent extends React.Component<FlameProps> {
         this.focusOnNode(nodeIndex);
       });
     }
+    if (controlProviderCallback.search) {
+      controlProviderCallback.search((text: string) => {
+        if (!this.searchInputRef.current) return;
+        this.searchInputRef.current.value = text;
+        this.searchForText(false);
+      });
+    }
   }
 
   private resetFocus() {

diff --git a/storybook/stories/icicle/04_cpu_profile_gl_flame.story.tsx b/storybook/stories/icicle/04_cpu_profile_gl_flame.story.tsx
@@ -7,7 +7,7 @@
  */
 
 import { action } from '@storybook/addon-actions';
-import { boolean, button } from '@storybook/addon-knobs';
+import { boolean, button, text } from '@storybook/addon-knobs';
 import React from 'react';
 
 import {
@@ -18,6 +18,7 @@ import {
   FlameGlobalControl,
   FlameNodeControl,
   ColumnarViewModel,
+  FlameSearchControl,
 } from '@elastic/charts';
 import columnarMock from '@elastic/charts/src/mocks/hierarchical/cpu_profile_tree_mock_columnar.json';
 import { getRandomNumberGenerator } from '@elastic/charts/src/mocks/utils';
@@ -62,6 +63,7 @@ const noop = () => {};
 export const Example = () => {
   let resetFocusControl: FlameGlobalControl = noop; // initial value
   let focusOnNodeControl: FlameNodeControl = noop; // initial value
+  let searchText: FlameSearchControl = noop; // initial value
 
   const onElementListeners = {
     onElementClick: action('onElementClick'),
@@ -74,6 +76,10 @@ export const Example = () => {
   button('Set focus on random node', () => {
     focusOnNodeControl(rng(0, 19));
   });
+  const textSearch = text('Text to search', 'github');
+  button('Search', () => {
+    searchText(textSearch);
+  });
   const debug = boolean('Debug history', false);
   return (
     <Chart>
@@ -87,6 +93,7 @@ export const Example = () => {
         controlProviderCallback={{
           resetFocus: (control) => (resetFocusControl = control),
           focusOnNode: (control) => (focusOnNodeControl = control),
+          search: (control) => (searchText = control),
         }}
       />
     </Chart>