Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Lens] Enable fitering multi values with tooltip actions #150304

Closed
stratoula opened this issue Feb 6, 2023 · 6 comments · Fixed by #162716
Closed

[Lens] Enable fitering multi values with tooltip actions #150304

stratoula opened this issue Feb 6, 2023 · 6 comments · Fixed by #162716
Assignees
Labels
enhancement New value added to drive a business result Feature:Lens impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. Team:Visualizations Visualization editors, elastic-charts and infrastructure

Comments

@stratoula
Copy link
Contributor

stratoula commented Feb 6, 2023

Describe the feature:
On 8.7 we enabled the multivalue filtering on the XY charts. We would like to enable it for the rest of the charts as it is supported everywhere https://elastic.github.io/elastic-charts/?path=/story/components-tooltip--cartesian-charts&globals=theme:light

Specifically we want to enable it for:

  • heatmap
  • partition charts

Here is the PR that enables it for XY. It adds the basic functionality so adding this on the other chart types should be easy.

@stratoula stratoula added enhancement New value added to drive a business result Team:Visualizations Visualization editors, elastic-charts and infrastructure Feature:Lens labels Feb 6, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-visualizations @elastic/kibana-visualizations-external (Team:Visualizations)

@drewdaemon drewdaemon added the impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. label Feb 9, 2023
@stratoula
Copy link
Contributor Author

We discussed about it and decided to change the way that the left click and tooltip actions work in our charts. Specifically:

  • we are going to change the left click to assign immediately the filters (no modal for selection). This will be the quick action for our users
  • we are going to move the advanced filtering on the tooltip action (hover and right click). The options will be:
    • Filter by time (if there is a date histogram)
    • Filter by categories (user can create AND/OR filters depending on the chart). For example for XY ORs make more sense while in pie chart/heatmap ANDs

@stratoula
Copy link
Contributor Author

Also add telemetry for the tooltip actions

@markov00
Copy link
Member

markov00 commented May 3, 2023

It would be great if we can consider adding a way to describe what will happen when clicking on the chart.
A tooltip, a temp text shown somewhere could be useful to teach the user about what the click will do before performing it.
We have an example in the table: when you hover over a cell the + and - buttons appear so a similar behaviour that gives an idea of what will do when clicking could help a lot.

@mbondyra
Copy link
Contributor

mbondyra commented Jun 27, 2023

we are going to move the advanced filtering on the tooltip action (hover and right click). The options will be:
Filter by time (if there is a date histogram)
Filter by categories (user can create AND/OR filters depending on the chart). For example for XY ORs make more sense while in pie chart/heatmap ANDs

  1. Do we have a design for multi-category tooltip? Right now there's just a title and values from the same category so I am not sure how to deal with many categories. Specifically:
  • Filter by two categories
  • Filter by terms + filter by time
  • filter by time only
  1. As we want to replace multi-filter selecting with a tooltip, I wonder if this is a bug?
    In the configuration as you see below, there’s no way to filter by x series from the tooltip (Carrier). Is this something we should fix and add to the tooltip? We can only select weather but not carrier whereas in the old modal we could select both.
Screenshot 2023-06-27 at 15 24 32

Screenshot 2023-06-27 at 15 24 42

@stratoula
Copy link
Contributor Author

@mbondyra the idea is that if we make the left click apply all the filters with AND by default (no modal) then we should enrich the tooltip actions with more options so:

  • keep the filter x series as it is (creates ORs)
  • add another one filter x series with AND (we can think about the final texts here)
  • add another one filter by Carrier/time/...category (depend on the chart configuration)

So right now, it works as expected because in the tooltip actions we only added the ORs. Now we want to extend it with more capabilities. We can sync if you have more questions about it!

stratoula added a commit that referenced this issue Aug 9, 2023
## Summary

The breaking tests have nothing to do with this PR. I ran the [test PR
and it broke too.](https://github.com/elastic/kibana/pull/163229/files)

### Functionality changes

#### XY Chart
Adds tooltip action for x series if it exists. The copy is different for
time and categorical series.



https://github.com/elastic/kibana/assets/4283304/2a043e04-c5b1-480d-be10-ae618145fb65


<img width="246" alt="Screenshot 2023-08-04 at 17 37 39"
src="https://github.com/elastic/kibana/assets/4283304/d3e4b7ae-cace-444e-8c86-c210ca1be2ee">
<img width="222" alt="Screenshot 2023-08-04 at 17 37 57"
src="https://github.com/elastic/kibana/assets/4283304/dd44cc10-d4bd-4b5d-a6bb-856e48a77f34">

When filtering by one time interval we create a time picker filter and
not regular filter now.

#### Partition Chart
Adds tooltip actions filters.
Doesn't add them if we only have metric dimensions.


https://github.com/elastic/kibana/assets/4283304/c4d427c3-fb81-4f9d-b4be-dcb5ba872fdb

#### Heat map Chart
Adds tooltip actions filters


https://github.com/elastic/kibana/assets/4283304/68795a02-8d40-47af-8366-d7c4f88c6ce3

### Code changes

#### Changes to `MultiValueClickContext`

1. I changed the interface to:
```
export interface MultiValueClickContext {
{...}
  data: {
    data: Array<{
      cells: Array<{
        column: number;
        row: number;
      }>;
      table: Pick<Datatable, 'rows' | 'columns' | 'meta'>;
      relation?: BooleanRelation;
    }>;
{...}
  };
}
```
The important changes are accepting the array of data (this way we can
pass multiple tables for different dataviews, for example for different
layers for xy chart and we don't have run separate handlers for separate
layers). Also we don't pass a single column and array of values (that
then we have to convert to multiple rows inside of the functions) but a
`cells` array. This way we can pass values that belong to different rows
and columns. I also added a `relation` param so user can control if they
prefer to use `AND` or `OR` relation for combined filter. If none is
used, the filters are separate.

Fixes #150304

---------

Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
bryce-b pushed a commit to bryce-b/kibana that referenced this issue Aug 9, 2023
## Summary

The breaking tests have nothing to do with this PR. I ran the [test PR
and it broke too.](https://github.com/elastic/kibana/pull/163229/files)

### Functionality changes

#### XY Chart
Adds tooltip action for x series if it exists. The copy is different for
time and categorical series.



https://github.com/elastic/kibana/assets/4283304/2a043e04-c5b1-480d-be10-ae618145fb65


<img width="246" alt="Screenshot 2023-08-04 at 17 37 39"
src="https://github.com/elastic/kibana/assets/4283304/d3e4b7ae-cace-444e-8c86-c210ca1be2ee">
<img width="222" alt="Screenshot 2023-08-04 at 17 37 57"
src="https://github.com/elastic/kibana/assets/4283304/dd44cc10-d4bd-4b5d-a6bb-856e48a77f34">

When filtering by one time interval we create a time picker filter and
not regular filter now.

#### Partition Chart
Adds tooltip actions filters.
Doesn't add them if we only have metric dimensions.


https://github.com/elastic/kibana/assets/4283304/c4d427c3-fb81-4f9d-b4be-dcb5ba872fdb

#### Heat map Chart
Adds tooltip actions filters


https://github.com/elastic/kibana/assets/4283304/68795a02-8d40-47af-8366-d7c4f88c6ce3

### Code changes

#### Changes to `MultiValueClickContext`

1. I changed the interface to:
```
export interface MultiValueClickContext {
{...}
  data: {
    data: Array<{
      cells: Array<{
        column: number;
        row: number;
      }>;
      table: Pick<Datatable, 'rows' | 'columns' | 'meta'>;
      relation?: BooleanRelation;
    }>;
{...}
  };
}
```
The important changes are accepting the array of data (this way we can
pass multiple tables for different dataviews, for example for different
layers for xy chart and we don't have run separate handlers for separate
layers). Also we don't pass a single column and array of values (that
then we have to convert to multiple rows inside of the functions) but a
`cells` array. This way we can pass values that belong to different rows
and columns. I also added a `relation` param so user can control if they
prefer to use `AND` or `OR` relation for combined filter. If none is
used, the filters are separate.

Fixes elastic#150304

---------

Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New value added to drive a business result Feature:Lens impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. Team:Visualizations Visualization editors, elastic-charts and infrastructure
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants