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

Filtering out zero/null values in tooltip and sort the tooltip by field values #9152

Open
sfc-gh-cheliu opened this issue Sep 18, 2023 · 22 comments · May be fixed by vega/vega-tooltip#820 or #9148
Open
Assignees
Labels
RFC / Discussion 💬 For discussing proposed changes

Comments

@sfc-gh-cheliu
Copy link

sfc-gh-cheliu commented Sep 18, 2023

I'd like to add a feature to hide/filter out zero/null values in the tooltip, and potentially sort the tooltip by the value of each field/column. Here's an example:
example
Basically I want to hide type3 and type5 in the tooltip, and sort the remaining by descending order of Value.

Since I'm not familiar with altair/vega libraries, so this might not be the best approach, but my thought is to add a new parameter/condition in altair and passing this to the tooltip object, so that when the frontend receives this signal, it will hide the values I don't want to see in the tooltip and possibly sort the values.

I found 2 places that can be modified:

  1. https://github.com/vega/vega-lite/blob/4ba3b93e575df97ffe56713287b40d6c55b18340/src/compile/mark/encode/tooltip.ts
  2. https://github.com/vega/vega-tooltip/blob/5f805fb8a6e76e3e58d2541e51b6106bcc133f11/src/Handler.ts

Any guidance and suggestions are welcome. Thanks! cc @joelostblom @jakevdp as well as core vega-lite developers @kanitw @domoritz @arvind @jheer

@sfc-gh-cheliu
Copy link
Author

Opened an issue in vega-tooltip: vega/vega-tooltip#819

@kanitw kanitw transferred this issue from vega/vega-lite Sep 28, 2023
@kanitw
Copy link
Member

kanitw commented Sep 28, 2023

moving ticket to vega-tooltip repo since it's vega-tooltip specific feature.

@sfc-gh-cheliu
Copy link
Author

@kanitw Thanks! I've created a PR in another ticket there vega/vega-tooltip#820. Appreciate any suggestions and comments:)

@sfc-gh-cheliu
Copy link
Author

@kanitw To add parameters to control this, we need to modify vega-lite or vega, no?

@domoritz
Copy link
Member

domoritz commented Oct 23, 2023

@kanitw I'm not sure this is tooltip-specific since Vega tooltip is only one specific implementation of a tooltip. I think hiding/sorting can be something useful for Vega-Lite itself.

Note that you can already sort tooltip fields by manually providing the list of fields.

Filter for tooltip at mark level

I think we can add sorting/filtering to {"content": "data"} and {"content": "encoding"}.

I think it makes sense to add

{"content": "data", sort: "..."}

and filter predicates (using https://vega.github.io/vega-lite/docs/predicate.html)

{"content": "data", "filter": "predicate"}

For filtering/sorting with a tooltip encoding

Filtering with expressions as in #9148 looks reasonable.

Sorting a list of fields is a bit trickier since the encoding defs passed to tooltip are already a sorted list. The example in #9148 doesn't look right to me since it adds the sorting to the first element in the array. That feels like it's a level too low.

@domoritz domoritz transferred this issue from vega/vega-tooltip Oct 23, 2023
@domoritz domoritz added the RFC / Discussion 💬 For discussing proposed changes label Oct 23, 2023
@sfc-gh-cheliu
Copy link
Author

sfc-gh-cheliu commented Oct 23, 2023

Sorting a list of fields is a bit trickier since the encoding defs passed to tooltip are already a sorted list. The example in #9148 doesn't look right to me since it adds the sorting to the first element in the array. That feels like it's a level too low.

@domoritz I agree. I've pushed some new commits (making 'sort' to be a new parameter as part of 'encoding', which is a higher level) in #9148 with more details in the description. Appreciate it if you could take a look.

Yeah sorting is trickier. From my understanding, before the encoding defs are passed to vega-tooltip they remain to be some vega expressions, and their values cannot be determined. I really spent some time investigating whether there's a intermediate step to convert these expressions to actual values. But it seems that the values will only be evaluated when the mouse hover event is triggered, that's why I modify the things in vega-tooltip as well because we can only sort the data from there. Correct me if I'm wrong, and if you have a way to handle everything within vega-lite & vega, that'd be great:)

@sfc-gh-cheliu
Copy link
Author

sfc-gh-cheliu commented Oct 23, 2023

Note that you can already sort tooltip fields by manually providing the list of fields.

@domoritz Yes. I observed that the order of the tooltip is aligned with how I provide it in the tooltip array. But this is a manual way and can only set one global order for all the tooltips (with different x-axis values). At the end of the day we want to sort the tooltip always by the descending order of the values instead of a manually specified order of the keys.

@domoritz
Copy link
Member

Note that Vega tooltip is only one example implementation of a tooltip for Vega. Therefore I think we should try to do as much as possible in Vega/Vega-Lite. As you develop your code, test it without Vega tooltip to see what the default tooltips (using HTML title) look like for example.

Can you summarize the proposed API changes here? It'll be easier to discuss it compared to the pull request. I know it's a bit more work but I would appreciate it. Thanks!

@sfc-gh-cheliu
Copy link
Author

sfc-gh-cheliu commented Oct 26, 2023

@domoritz Thanks for the response!

  1. QQ: if you pass in an array of fields as tooltips in Altair, would vega-lite/vega treat them as vega-tooltips or the default tooltips? I honestly never noticed the usage of default tooltips when using Altair. But I agree that this would not be a concern if we can figure out a way to determine and sort the values in vega, but that's out of the limit of my understanding (searched a little bit of the codebase but not conclusive yet, I think if this layer exists, should be something like an evaluator that converts the vega expressions to actual values). I'd be more than happy if we can discuss if this is feasible.

  2. Sure, I summarize it in the description of feat: add filter and sort support for tooltips #9148. Copying it here for your reference:

Parameter signatures:
Filter - added as a parameter for each tooltip object in the tooltip array:
{"field": "type1", "type": "quantitative", "**filter**": {"operator": ">", "literal": 0}

Sort - added as a parameter for encoding:

"encoding": { "opacity": { "condition": { "empty": false, "param": "param_46", "value": 0.2 }, "value": 0 }, "size": { "value": 4 }, "tooltip": [ { "field": "Date", "type": "nominal" }, { "field": "type1", "type": "quantitative" }, { "field": "type2", "type": "quantitative" }, { "field": "type3", "type": "quantitative" }, { "field": "type4", "type": "quantitative" }, { "field": "type5", "type": "quantitative" }, { "field": "type6", "type": "quantitative" }, { "field": "type7", "type": "quantitative" }, { "field": "type8", "type": "quantitative" } ], "**sort_tooltip**": {"value": "descending"}, "x": { "field": "Date", "title": null, "type": "ordinal" } }, "mark": { "type": "rule" }, "params": [ { "name": "param_46", "select": { "clear": "mouseout", "fields": [ "Date" ], "nearest": true, "on": "mouseover", "type": "point" } } ]

To make the new parameters robust, both filter & sort_tooltip can only be some enum values.
filter.operator: one of '==', '!=', '<', '<=', '>', '>='
filter.literal: one of type string, number or boolean.
"filter": {"operator": "><", "literal": 0}:
image

sort_tooltip.value: 'ascending' or 'descending' only:
"sort_tooltip": {"value": "whatever"}
image

Please see #9148 for more details. Thanks!

@kanitw
Copy link
Member

kanitw commented Oct 28, 2023

image

I think this reads more like the spec is filtering the field in general, rather than in tooltip?

@sfc-gh-cheliu
Copy link
Author

@kanitw Thanks for the reply!
I read through the vega-lite implementation and find that tooltip object just implements some higher level interface/type, so they might have overlap with other fields. However, only the fields specified within the 'tooltip' field can be applied with a filter. For instance, if I add the filter to the 'size' field, it will throw an warning:
"size": { "value": 4, "filter": {"operator": ">", "literal": 0}}
Screenshot 2023-10-28 at 12 00 22 PM

@sfc-gh-cheliu
Copy link
Author

sfc-gh-cheliu commented Oct 29, 2023

@domoritz Made a PR to support default tooltips: vega/vega#3816. Now the default tooltips (you can see I've disabled vega-tooltip in the editor) are filtered & sorted with the exactly same specification as above:

default1 default2

Let me know if there's anything else we should do. Thanks!

@sfc-gh-cheliu
Copy link
Author

@domoritz @kanitw I hope you are doing well! Could we push this forward a little bit? Lemme know anything that you think can be done/improved from my side. Thanks again!

@sfc-gh-cheliu
Copy link
Author

@domoritz @kanitw Any update on this? I want to roll this out in the near future. Please lemme know if there's anything remaining to be handled. Thanks!

@sfc-gh-cheliu
Copy link
Author

@domoritz @kanitw Could we unblock this? Thanks.

@sfc-gh-cheliu
Copy link
Author

@domoritz @kanitw Kindly follow up on this again. Thanks.

@sfc-gh-cheliu
Copy link
Author

@domoritz @kanitw Happy new year folks! I hope you have a wonderful break. Could we move this forward a little bit? I believe this will be a useful feature for the whole community since I've seen such requests even as early as 3 years ago. So, it'd be good if you could review this so that I can make further changes. Thanks!

@sfc-gh-cheliu
Copy link
Author

@domoritz @kanitw Could we proceed with this? This feature will be super helpful for my team and the whole altair community if we could roll it out. Thanks.

@domoritz
Copy link
Member

I'll put it on my queue. Thanks for the ping.

@sfc-gh-cheliu
Copy link
Author

@domoritz Hi Dominik, I hope you are doing well. Kindly check in to see if you get any chance to take a look at this. Thanks!

@domoritz
Copy link
Member

Uhh, yeah, it's in my queue. I'm going on vacation tomorrow for a few weeks but let me bump it up for after I return.

@sfc-gh-cheliu
Copy link
Author

@domoritz Appreciate that, have a wonderful vacation!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
RFC / Discussion 💬 For discussing proposed changes
Projects
None yet
3 participants