Plotly Display issue in Dash - Data plotted, but no marks/traces on figure in dcc.graph

Hello everyone,

I have a bit of a puzzler here. I’m using plotlys figure factory to create a base quiver plot to display in a web application - basically we’re plotting velocity vectors as earthquake waves propagate through rocks. I am able to get it to display in Jupyter as expected, however when I copy the code over to my dash setup, the data gets processed and seems to be marked as expected, but you cant actually see the trace of the arrows! The data shows up in the hover plot, but the actual arrows are not there - does anyone have any idea why this would happend? is create_quiver from plotly.figure_facotry not supported?

Here is snippet of code from my runner function that creates the plot in the dash application, the runner function is titled calculate_tensor_symmetries in a python file called vector_functions.py

    Uxyz = np.array([(Ux), (Uy), (Uz)])
    Uxyz = np.transpose(Uxyz)

    ### Min = find(Data(:,2) == MinNum);
    ### I = find(Uxyz(:,3)<1);
    #minList = (tensorDF[tensorDF['Phase']==minNum].index.values)
    df = pd.DataFrame(data=Uxyz)
    z1indicies = (df[df[2]<1].index.values)
    Uxyz = Uxyz[z1indicies,:]
    Vp = Vp[z1indicies]
    Vs1 = Vs1[z1indicies]
    Vs2 = Vs2[z1indicies]

    x, y = np.meshgrid(np.arange(-1,1.0,0.01), np.arange(-1,1,0.01))
    ### 1 - Zzpol will work
    ### (1/(1-ZzPol)) will work as well
    ### numpy.sqrt? -- will work 

    xaxis = np.multiply(XxPol, np.real(np.sqrt((1/(1-ZzPol)))))
    yaxis = np.multiply(YyPol, np.real(np.sqrt((1/(1-ZzPol)))))
    fig = create_quiver(xaxis, yaxis, Vs1PolX, Vs1PolY, scale = 2, scaleratio= 0.5)

    return fig

    #np.reshape(Xx, (Xx.shape[0]*Xx.shape[1]), 1)

here is the html div and dcc.graph function in the actual dash application:

        html.Div(
          id='display_figure',
          children=[
          dcc.Graph(
            id='display_figure_div',
            className='display_figure_class',
            figure=vector_functions.calculate_tensor_symmetries()   
          )
        ], style={'text-align': 'center', 'position':'relative','margin-top':'150px', 'top':'15px'}),

and for comparison, here is the jupyter notebook that i copied directly into the vector_functions python file for the runner function calculate_tensor_symmetries:


Uxyz = np.array([(Ux), (Uy), (Uz)])
Uxyz = np.transpose(Uxyz)



### Min = find(Data(:,2) == MinNum);
### I = find(Uxyz(:,3)<1);
#minList = (tensorDF[tensorDF['Phase']==minNum].index.values)
df = pd.DataFrame(data=Uxyz)
z1indicies = (df[df[2]<1].index.values)
Uxyz = Uxyz[z1indicies,:]
Vp = Vp[z1indicies]
Vs1 = Vs1[z1indicies]
Vs2 = Vs2[z1indicies]

### figure time 


x, y = np.meshgrid(np.arange(-1,1.0,0.01), np.arange(-1,1,0.01))
### 1 - Zzpol will work
### (1/(1-ZzPol)) will work as well
### numpy.sqrt? -- will work 

xaxis = np.multiply(XxPol, np.real(np.sqrt((1/(1-ZzPol)))))
yaxis = np.multiply(YyPol, np.real(np.sqrt((1/(1-ZzPol)))))
fig = create_quiver(xaxis, yaxis, Vs1PolX, Vs1PolY)
fig.show()

and to show you even further, here are pictures from the dash application

and then from jupyter

did I miss anything obvious? Any help would be appreciated, and I can send further code if necessary

thank you!
William

Sorry, I should also say I am using dash 1.17.0 and its dependencies - plotly 4.12.0 and on, there are no console issues (i thought it may have been a webGL issue at first - we’ve had some issues with those before) and nothing pops up in the console output.