Confusing tooltip when hover over a DataArray.hvplot.rgb Image

[jmontoyam]

Hi,

I am new to hvplot. I was following the hvplot example available at https://hvplot.holoviz.org/reference/xarray/rgb.html At the end of the example we can find a DataArray.hvplot.rgb Image. When I hover over it the resulting tooltip is strange, for instance RGBA = 4290429906. What does this number mean?...is it possible to extract the red, green and blue component from such number?...is it possible to customize such tooltip to show a tuple with the r,g,b components?, is it possible to customize the tooltip to also show the x and y coordinates formatted as integers (by default the tooltip is formatted as float)?

Thank you very much for your help!

[kearney-sp]

I have this exact same question! Also wondering if you can rescale the colors for each channel (e.g., I tried clim to no avail)?

[zhanlilz]

Searching for the same question and found an answer. Putting here as a record. @jmontoyam it is single int32 value that packs the RGBA values, see https://github.com/holoviz/holoviews/pull/3727#issuecomment-494569786 You can manually decode this int32 value into separate RGBA values, like here https://stackoverflow.com/a/58207018

[maximlt]

@jlstevens do you know if there's a way in HoloViews to create an RGB element that when hovered would display the RGB values and not the single int32 value?

[jbednar]

I think that's a Bokeh request, not a HoloViews one. I agree the current Bokeh behavior isn't very useful.

[maximlt]

Here is a complete example that shows how to create a custom tooltip for RGBA elements that display the value in each channel:

import hvplot.xarray  # noqa

from hvplot.sample_data import landuse

da = landuse(landuse='airplane', id=90).read()

image_formatter = CustomJSHover(
    code="""
        var rgba_bin = (value).toString(2);
        var A = parseInt(rgba_bin.slice(0,8), 2);
        var B = parseInt(rgba_bin.slice(8,16), 2);
        var G = parseInt(rgba_bin.slice(16,24), 2);
        var R = parseInt(rgba_bin.slice(24,32), 2);
        return "" + [R,G,B,A];
    """
)

hover = HoverTool(
    tooltips=[( 'RGBA','@image{custom}' )],
    formatters={'@image': image_formatter}
)

da.hvplot.rgb(x='x', y='y', bands='channel', data_aspect=1, tools=[hover])

It has been adapted from https://discourse.bokeh.org/t/how-to-use-customjshover-to-format-the-default-32bit-rgba-tooltip-value/4692/5

This is indeed a feature request for Bokeh. I've found this issue https://github.com/bokeh/bokeh/issues/8668 that has been closed but I'm actually not sure the initial request was really fulfilled, I'll add a comment in there and if not open a new issue for Bokeh.

In the meantime hvPlot should document this workaround in its documentation, in the reference gallery.