Interaction with PlotlyView

Hello, hot off the back of my first problem I’m now facing another challenge with Plotly.

I have followed an example of setting up a callback here.

@PlotlyView("Plotly view", duration_guess=1)
def get_plotly_view(self, params, **kwargs):
    df = data.stocks()

    scatter = go.Scatter(
        x=df.date,
        y=df.GOOG,
        mode='markers',
    )

    fig = go.Figure(
        data=scatter,
        layout=go.Layout(
            yaxis=dict(title="Price in USD"),
            newshape=dict(label=dict(texttemplate="Change: %{dy:.2f}")),
            title="Google Share Price 2018/2019",
        ),
    )

    colors = ['#a3a7e4'] * 100
    scatter.marker.color = colors
    scatter.marker.size = [10] * 1000
    fig.layout.hovermode = 'closest'

    fig.update_layout(modebar={"add": "drawline"})

    # create our callback function
    def update_point(trace, points, selector):
        print(points[0])
        c = list(scatter.marker.color)
        s = list(scatter.marker.size)
        for i in points.point_inds:
            c[i] = "#bae2be"
            s[i] = 20
            with fig.batch_update():
                scatter.marker.color = c
                scatter.marker.size = s

    scatter.on_click(update_point)

    return PlotlyResult(fig.to_json())

The scatter points don’t change on click and the print statement doesn’t show up in the viktor cli output. So I am at a loss how this would be set up in VIKTOR (this time i double checked the docs as well and couldn’t see anything).

Thanks in advance for any tips anyone has.

Hi there,

That’s a really interesting case. I’m afraid this might not be possible in our platform because of the statelessness of the application. Nonetheless I’ll discuss this with our front-end team and see what’s possible or whether we can propose a work-around for you.

Thanks for the great question and I’ll keep you updated in this topic!

I shall wait patiently if you come up with anything :+1: The intention was to use it for interactively determining preconsolidation pressure from oedometer test data which is more clunky if using number fields.

Hi Niko,

We are currently investigating how we can support these kinds of interactivity in the product. Could you explain your use case a bit more? In your snippet the callback appears to add a point on a user click. How are those points to be used in further calculations?

Regards,

Raoul

Hello Raoul,
The code used was an example from the plotly website so didn’t represent an attempt at anything i would use in calculations. But i made such code in QT6 with matplotlib and the app would generate lines which the user could refine by dragging to better calculate (in this instance) preconsolidation pressure.
Below is an image of what i am looking to construct. The user would refine the lines for the tangent line at the point of maximum curvature (using a library called kneed for this) and the extended virgin compression line.

Regards
Ian

Hi Ian,

Thanks a lot for the additional information. So if I understand correctly the updated coordinates would be used to determine the new intersection points, which would lead to an updated preconsolidation pressure?

Hello Raoul,

That’s correct. The user may move the point of the tangent line or inflection point which should be reflected in either output text or updating an annotation live on the plotly chart.

As a little more context, on first loading of the plot, i would construct a “good” approximation of the preconsolidation pressure construction like the above example. I’d calculate a tangent line at maximum curvature using a knee point algorithm, and the inflection point by finding the steepest gradient.
As a user i may which to refine the construction based on knowledge and experience. I could use inputs to adjust the plot but its much slower and less “tactile”.

Kind regards,
Ian

I have changed this from a question to a feature request (and slightly altered the title to make it more generic)

@Tom_Nillesen: i believe you mentioned yesterday that this is also something you would like to have?

@RamiEvans I believe this is one of the points we’ve talked about :slight_smile:

Yes! :smiley: interactivity with plotly traces/figures would be very helpfull in many cases

1 Like

dont forget to upvote to get it higher in the list :wink: