How to link local vega-tooltip repo to altair

[sfc-gh-cheliu]

Hi altair folks,
Related to this vega/vega-tooltip#820. I can test it in vega editor. But I'd like to know how can I test the changes in vega-tooltip using altair? That said, how can I configure such that altair is calling the local vega-tooltip or vega-lite repo to generate the tooltip? I've tried yarn link vega-tooltip and vega-lite repos to altair but seems not work. Or, is this related to which vega-tooltip/vega-lite version/repo the renderer refers to? Appreciate if you can help. Thanks!

[ChristopherDavisUCI]

Thanks for the question! Would it be satisfying to just make your Altair chart chart, get the corresponding json chart.save('chart.json'), and then bring that over to Vega-Lite?

I really am not sure what the right approach is beyond that, hopefully someone else can chime in. I think these lines seem somewhat promising, but I must admit I don't fully understand this section of the Altair code: https://github.com/altair-viz/altair/blob/0ca83784e2455f2b84d0f6d789af2abbe8814348/altair/utils/html.py#L163-L164

[sfc-gh-cheliu]

@ChristopherDavisUCI Thanks Christopher! This definitely worths a look. To be honest, currently I simply hard-code the vega-tooltip to filter zeros and sort the values: vega/vega-tooltip#820. And I can reflect the changes in vega-editor. From my understanding, altair only generates chart specifications and isn't involved in rendering at all. That said, if I want to reflect this hard-coded change in software like Streamlit, I need to point its renderer to use my modified repo? Also, I'm not an expert in vega or vega-lite schemas. Do you have any comments on how to add new parameters in altair (and they will become part of the new schema) to control whether to filter or whether to sort? Thanks!

[ChristopherDavisUCI]

Thanks for the reply @sfc-gh-cheliu!

Regarding your last question:

Do you have any comments on how to add new parameters in altair (and they will become part of the new schema) to control whether to filter or whether to sort?

My understanding is that most of the new parameters should be added on the Vega-Lite side, and then Altair should be directed to the relevant Vega-Lite schema. Currently I believe you can use code like the following in Altair: alt.Tooltip(formatType="number") (I admit I didn't check this, but it's based on my reading of https://vega.github.io/vega-lite/docs/encoding.html#text-field-def ) If you were to add for example a "filter" or "sort" key on the Vega-Lite side, then I believe you should automatically be able to use alt.Tooltip(formatType="number", sort=True) on the Altair side.

I'm not saying it is easy to make these changes, but my impression is that most of them are automated on the Altair side, and dependent on the Vega-Lite schema like what is stored here.

See also the notes here:
https://github.com/altair-viz/altair/blob/main/NOTES_FOR_MAINTAINERS.md

I hope others with more recent experience can correct me!

[sfc-gh-cheliu]

@ChristopherDavisUCI Hi Christopher, I hope you are doing well!

Thanks for the info. Now I understand that we should add new parameters in Vega-Lite, and Altair actually just works following this schema. On the other hand, I'm trying to understand after adding this parameter, how Vega-Lite controls the Vega-Tooltip (the renderer). Since after adding a parameter, we need to tell it how to use this param. Are you familiar with this part? I searched a little bit and found this:
With the JSON schema in hand, it can then be passed to a library such as [Vega-Embed](https://github.com/vega/vega-embed) that knows how to read the specification and render the chart that it describes in https://altair-viz.github.io/user_guide/internals.html.
Does this mean we need to modify vega-embed? I'm not 100% sure.. Appreciate it if you could comment on this. Thanks!

[ChristopherDavisUCI]

Hi @sfc-gh-cheliu, Hmm, I'm not totally sure. Based on the screenshots you provided here, it looks like your changes are working in the Vega-Editor, so I don't think there's anything else you need to do on the Vega-Lite side. I could definitely be wrong (not very familiar with the Vega side...).

[sfc-gh-cheliu]

@ChristopherDavisUCI Haha that's because I hard-coded to achieve what I want - the tooltip will always filter out 0 and sort the values. However, I guess to merge this PR I need to make this generic, something like a parameter/condition to control what to filter, and a parameter to control whether to sort/how to sort.

[ChristopherDavisUCI]

@sfc-gh-cheliu Unfortunately I think we've reached the limits of my understanding! I tried to look a little more closely just now, and actually hadn't noticed before that your code lives in the Vega Tooltip repository... I had thought it was happening in the Vega-Lite repository. I don't know that repository at all!

[sfc-gh-cheliu]

@ChristopherDavisUCI Yah one of the maintainer said it's a vega-tooltip issue:
vega/vega-lite#9152

Though I agree we can hard-code vega-tooltip to achieve this, at the end of the day we need to modify vega-lite to add new parameters to make this feature more generic.

This is printed from the output of baseEncodeEntry in base.ts in vega-lite:
{"fill":{"scale":"color","field":"Type"},"ariaRoleDescription":{"value":"bar"},"description":{"signal":"\"Date: \" + (isValid(datum[\"Date\"]) ? datum[\"Date\"] : \"\"+datum[\"Date\"]) + \"; Value: \" + (format(datum[\"Value\"], \"\")) + \"; Type: \" + (isValid(datum[\"Type\"]) ? datum[\"Type\"] : \"\"+datum[\"Type\"])"}}{"stroke":{"value":"black"},"opacity":[{"test":"length(data(\"param_46_store\")) && vlSelectionTest(\"param_46_store\", datum)","value":0.2},{"value":0}],"tooltip":{"signal":"{\"Date\": isValid(datum[\"Date\"]) ? datum[\"Date\"] : \"\"+datum[\"Date\"], \"type1\": format(datum[\"type1\"], \"\"), \"type2\": format(datum[\"type2\"], \"\"), \"type3\": format(datum[\"type3\"], \"\"), \"type4\": format(datum[\"type4\"], \"\"), \"type5\": format(datum[\"type5\"], \"\"), \"type6\": format(datum[\"type6\"], \"\"), \"type7\": format(datum[\"type7\"], \"\"), \"type8\": format(datum[\"type8\"], \"\")}"},"description":{"signal":"\"Date: \" + (isValid(datum[\"Date\"]) ? datum[\"Date\"] : \"\"+datum[\"Date\"]) + \"; type1: \" + (format(datum[\"type1\"], \"\")) + \"; type2: \" + (format(datum[\"type2\"], \"\")) + \"; type3: \" + (format(datum[\"type3\"], \"\")) + \"; type4: \" + (format(datum[\"type4\"], \"\")) + \"; type5: \" + (format(datum[\"type5\"], \"\")) + \"; type6: \" + (format(datum[\"type6\"], \"\")) + \"; type7: \" + (format(datum[\"type7\"], \"\")) + \"; type8: \" + (format(datum[\"type8\"], \"\"))"}}

And this is the output of value in vega-tooltip:
{"Date":"2021-06-22","type1":"8283","type2":"9856","type3":"0","type4":"8283","type5":"0","type6":"8917","type7":"5735","type8":"7486"}

I think there must be a step to convert the complex specification in vega-lite to the actual values in vega-tooltip (rendering?). I did some investigation but got trouble in locating this step.. I think if I can accurately find this step, I can add the filter and sort just in the vega-lite specification and pass that to the renderer, so that the renderer could filter and sort the data when it does the conversion.

cc: @domoritz