Disable clicks on charts

[FilipRy]

Summary

There are use cases when you don't wish to create filter on data, visualized in dashboard/visualizations's charts after you click on a certain part of the chart. Therefore, I added a feature enabling the users to disable clicking on charts.

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

• This was checked for cross-browser compatibility, including a check against IE11
• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Documentation was added for features that require explanation or tutorials
• Unit or functional tests were updated or added to match the most common scenarios
• This was checked for keyboard-only and screenreader accessibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately
• This includes a feature addition or change that requires a release note and was labeled appropriately

[elasticmachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[elasticmachine]

Pinging @elastic/kibana-app

[timroes]

Hi,

thanks a lot for your contribution. Given the actual content I fear we need some discussion around other refactoring currently going on.

@stacey-gammon @ppisljar I am wondering if the Event/Actions refactoring will make this PR redundant? Will that new architecture allow us to disable that kind of events for any chart without needing an individual implementation for every chart?

[stacey-gammon]

Will that new architecture allow us to disable that kind of events for any chart without needing an individual implementation for every chart?

Until right now I was assuming each chart would implement because they render and register the clicks, but now thinking about it more, it'd probably be easier and more generic to implement this at the embeddable level and render an invisible click catching div over everything to prevent clicks from ever making it to the content below.

[timroes]

Looking at the code here, this one neither does "prevent clicks" it will just no longer emit an event for it. Wouldn't that be the same, then just removing all click actions on the chart? The event would still be emitted in that case, but neither have any effect (same as in this PR)?

[stacey-gammon]

Wouldn't that be the same, then just removing all click actions on the chart? The event would still be emitted in that case, but neither have any effect (same as in this PR)?

Ah, yea actually I think that would probably work too, as long as all the click actions were using actions. You are thinking something like this?: (using search embeddable as an example since visualizations bypass the action API)

instead of:

    searchScope.filter = async (field, value, operator) => {
      const index = this.savedSearch.searchSource.getField('index').id;

      let filters = this.filterGen.generate(field, value, operator, index);
      filters = filters.map(filter => ({
        ...filter,
        $state: { store: FilterStateStore.APP_STATE },
      }));

      await executeTriggerActions(APPLY_FILTER_TRIGGER, {
        embeddable: this,
        triggerContext: {
          filters,
        },
      });
    };

    this.searchScope = searchScope;
  }

do something like this:

    searchScope.filter = async (field, value, operator) => {
     ** if (this.input.interactionDisabled) return;**

      const index = this.savedSearch.searchSource.getField('index').id;

      let filters = this.filterGen.generate(field, value, operator, index);
      filters = filters.map(filter => ({
        ...filter,
        $state: { store: FilterStateStore.APP_STATE },
      }));

      await executeTriggerActions(APPLY_FILTER_TRIGGER, {
        embeddable: this,
        triggerContext: {
          filters,
        },
      });
    };

    this.searchScope = searchScope;
  }

[timroes]

@stacey-gammon for phase 1: yes. I was actually already thinking phase 2 again, and thought we simply give the user a toggle on each panel: "Disable all interaction", that will does that for them?

[stacey-gammon]

@timroes - I don't think we need phase 2 for this. disableInteraction is just an input variable that can be set from a panel action, even in phase 1. We might also want to have it at the top level too, like "hide all panel titles" is a container level setting. So,

we simply give the user a toggle on each panel: "Disable all interaction", that will does that for them?

yes that would work.

But first we need to make sure visualizations use the action API and bubble filter events up rather than using the filter service directly. I don't think we have an issue for this yet but it's mentioned here: #32371. Not sure how it works on maps.

[ppisljar]

i agree this should be implemented on embeddable level as we'll want this functionality for maps, lens etc as well.

[timroes]

Hi @FilipRy,

thanks again for your contribution. Unfortunately due to some larger Embeddable/Action refactoring we're currently doing, we don't want to move forward with adding this feature individually to each charts. I am sorry that we'll close that PR for now, but once we're further with that refactoring I hope we can provide that solution in a universal way (so it doesn't need to be implemented by every chart individually).

I am sorry that we don't move forward with that now, and hope that won't block you from further contributions to the ecosystem.

Thank you a lot,
Tim