Ff.create_quiver in dash

Hi,

I have a ff.create_quiver plot, but when I put ‘text’ or ‘customdata’ in it, it does not set if for all arrows in the plot.

It seems there is a problem with that.

Hey @hadisotudeh could you please share the code you’re using? Ideally with dummy data so that we can execute it.

This appears to still be broken. Here’s a working example of the problem:

import io

import plotly.figure_factory as ff
import numpy as np

def _make_example_quiver():
    total = 1000

    # make fake data like my real data                                                                                                                                                                                         
    centers_and_angles = []
    rng = np.random.default_rng()
    center = (0., 0.)  # start at origin                                                                                                                                                                                       
    for thing_number in range(10 * total):
        angle = rng.uniform(high=2 * np.pi)
        centers_and_angles.append((center, angle, thing_number))
        # make random step                                                                                                                                                                                                     
        delta = rng.uniform(low=-.2, high=.2), rng.uniform(low=-.2, high=.2)
        center = center[0] + delta[0], center[1] + delta[1]

    # shuffle and cutoff                                                                                                                                                                                                       
    rng.shuffle(centers_and_angles)
    centers_and_angles = centers_and_angles[:total]

    # mostly direct code snippet from real code                                                                                                                                                                                
    x = np.zeros(total, dtype=np.float16)
    y = np.zeros(total, dtype=np.float16)
    u = np.zeros(total, dtype=np.float16)
    v = np.zeros(total, dtype=np.float16)
    thing_numbers = []
    min_x, min_y, max_x, max_y = 0, 0, 0, 0
    for idx, (center, theta, thing_num) in enumerate(centers_and_angles):
        thing_numbers.append(thing_num)
        min_x = min(min_x, center[0])
        min_y = min(min_y, center[1])
        max_x = max(max_x, center[0])
        max_y = max(max_y, center[1])
        x[idx], y[idx] = center
        u[idx] = 10 * np.cos(theta)
        v[idx] = 10 * np.sin(theta)
    scale = 5
    arrow_scale = .3
    fig = ff.create_quiver(
        x, y, u, v,
        # scales size of the arrows(ideally to avoid overlap). Default = .1                                                                                                                                                    
        scale=.1,
        # value multiplied to length of barb to get length of arrowhead. Default = .3                                                                                                                                          
        arrow_scale=.3,
        # ratio of y-axis to x-axis, default 2.5, which makes circles look like ovals                                                                                                                                          
        scaleratio=1.0,
        customdata = thing_numbers,
        # this seems to be broken:                                                                                                                                                                                             
        hovertemplate = '<b>%{x}, %{y}</b><br>cell number: %{customdata} ',
    )
    return fig

fig = _make_example_quiver()
buf = io.StringIO()
fig.write_html(buf, include_mathjax='cdn')
html_bytes = buf.getvalue().encode()

fname = 'quiver-with-failing-hovertemplate.html'
with open(fname, 'wb') as fh:
    fh.write(html_bytes)

print('open ' + fname)

Interestingly, a few of the things do get the thing_number! However, most of the things just show the string %{customnumber}

Here are images:


Screen Shot 2023-01-02 at 9.09.35 AM

@ttst hovertemplate is not broken, but it is a nonsense here, because a quiver
consists in three lines: its direction line, and the two shorter ones, forming the arrow.
As you move the mouse over a single quiver, you can notice that the displayed (x,y)
are changing. Since there is no customdata value for each point on a single quiver,
but a single one for the whole graphic representation of the quiver,
it cannot not be displayed. It would only be displayed if you gave as many custom values as there are points on the 3 lines forming a quiver
There must be a one-to-one correspondence between the point coordinates and the associated customvalues.