[Lens] Trigger a filter action on click in embedded visualizations for xychart

[wylieconlon]

Expected behavior: When I click a part of a visualization created with Lens, it will apply a filter in a dashboard.

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[andrew-goldstein]

The SIEM team is planning on embedding instances of Lens next to other visualizations in an embedded dashboard. Implementing this feature will ensure a consistent UX with other embedded visualizations, which filter the dashboard on-click.

[stacey-gammon]

I spent some time over the last couple days digging into Lens code and hacked a POC of this working.

Not sure if this is the "right" way to do it, but if you add a createFilterFn on to the KibanaDataTableColumn type, esAggs can pass this function along for each column, then every expression renderer can optionally use it to emit the APPLY_FILTER_TRIGGER with appropriate context. Some issues with my impl. like we need time field information and it won't work with multiple series until elastic charts supports sending that information along with the click event (they are working on it tho, there is a feature request).

  <Chart>
      <Settings
        onElementClick={clickData => {
          if (xAxisColumn.createFilterFn) {
            const filter = xAxisColumn.createFilterFn(clickData[0].x);
            npStart.plugins.uiActions.executeTriggerActions(APPLY_FILTER_TRIGGER, {
              filters: [filter],
              embeddable: handlers.embeddable,
            });
          }
        }}

🤷‍♀ I am mainly thinking of this in the context of threshold alerts, so am just experimenting and getting familiar with the code, but maybe this will help since last we chatted there was a big open question of how to pass this information along in the context of filters.

cc @wylieconlon @chrisdavies

[wylieconlon]

Thanks for looking into this, your suggestion seems like a simple and effective one in the short term. In the long term I think Lens will need to stop using the KibanaDatatable structure because it's lossy- the conversion from aggregation responses to tables loses all subtotal and hierarchy information, which is something we need to build better suggestions in Lens.

[rayafratkina]

I think the related elastic-charts issue is elastic/elastic-charts#505

[stacey-gammon]

Synced with @ppisljar about this yesterday. We agreed that the ideal solution is:

• A utility function that converts field information to an ES filter. This is something like value, field name, and field type. We need field type because ranges look different than term filters.
• Instead of passing around a createFilterFn which isn't serializable, pass along the information needed from above.
• Inside the renderer functions, use the utility function with the passed along field metadata information (if it exists), and emit the trigger.

We also talked about some more improvements to this:

• If there is no field metadata, because for instance there was a mapColumn function after esaggs and the metadata was not carried along because the column should no longer create an es filter, we still want this information sent along because the user could still do something like just use column name + cell value in an external URL even if we can't use that to build an ES filter.

I'm not sure we actually want to emit two different triggers though, because then users would need to attach their custom actions on two different triggers. We'll think about this experience with drilldowns as we discuss triggers. cc @streamich

[ppisljar]

totals could be provided, but hierarchy information is indeed lost on the KibanaDatatable

[ppisljar]

i started working on PoC here: #55351

[wylieconlon]

First blocker is now closed, click events in the chart will provide the series ID in the next release of elastic-charts

[wylieconlon]

@ppisljar Now that your PR is merged, it seems like we are unblocked!

[ppisljar]

let me know if you need any help, or if something is not working as expected

[streamich]

Wanted to leave a comment on how this is related to Drilldowns. And what can be done to enable Drilldowns for Lens.

This issue was created back in December when we just had a single APPLY_FILTER_TRIGGER. Now visualize_embeddable stopped using it, and instead there are two similar but disctinct triggers:

• VALUE_CLICK_TRIGGER when user clicks on some data in visualization.
• SELECT_RANGE_TRIGGER when user brushes on the chart.

I'm noting that because in the draft PR I've seen only VALUE_CLICK_TRIGGER used until now, but I assume SELECT_RANGE_TRIGGER can also be used in some Lens charts.

To enable Drilldowns feature for Lens, the supportedTriggers() method needs to be implemented:

• Implement .supportedTriggers() in Lens embeddable.