Vuetify3 and plotly resizable example

[AnthonyTSV]

Hi! I've been trying to make the plotly resizable example work, however, on changing the version of vuetify from vue2 to vue3, the example doesn't work. And I get the following errors:

JS Error => TypeError: Cannot read properties of undefined (reading '_c') JS Error => TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'

Code:

import plotly.graph_objects as go
import plotly.figure_factory as ff
from plotly.subplots import make_subplots
from trame.app import get_server
from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import vuetify3, plotly, trame
import numpy as np
import pandas as pd

server = get_server()
server.client_type = "vue3"
state, ctrl = server.state, server.controller

contour_raw_data = pd.read_json(
    "https://raw.githubusercontent.com/plotly/datasets/master/contour_data.json"
)
scatter_raw_data = pd.read_json(
    "https://raw.githubusercontent.com/plotly/datasets/master/scatter_data.json"
)
polar_data = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/polar_dataset.csv"
)

scatter_data = scatter_raw_data["Data"]

def clean_data(data_in):
    """
    Cleans data in a format which can be conveniently
    used for drawing traces. Takes a dictionary as the
    input, and returns a list in the following format:

    input = {'key': ['a b c']}
    output = [key, [a, b, c]]
    """
    key = list(data_in.keys())[0]
    data_out = [key]
    for i in data_in[key]:
        data_out.append(list(map(float, i.split(" "))))

    return data_out

def create_ternary_fig(width=300, height=300, **kwargs):
    contour_dict = contour_raw_data["Data"]

    # Defining a colormap:
    colors = [
        "#8dd3c7",
        "#ffffb3",
        "#bebada",
        "#fb8072",
        "#80b1d3",
        "#fdb462",
        "#b3de69",
        "#fccde5",
        "#d9d9d9",
        "#bc80bd",
    ]
    colors_iterator = iter(colors)

    fig = go.Figure()

    for raw_data in contour_dict:
        data = clean_data(raw_data)

        a = [inner_data[0] for inner_data in data[1:]]
        a.append(data[1][0])  # Closing the loop

        b = [inner_data[1] for inner_data in data[1:]]
        b.append(data[1][1])  # Closing the loop

        c = [inner_data[2] for inner_data in data[1:]]
        c.append(data[1][2])  # Closing the loop

        fig.add_trace(
            go.Scatterternary(
                text=data[0],
                a=a,
                b=b,
                c=c,
                mode="lines",
                line=dict(color="#444", shape="spline"),
                fill="toself",
                fillcolor=colors_iterator.__next__(),
            )
        )

    fig.update_layout(
        margin=dict(l=50, r=50, t=50, b=50),
        width=width,
        height=height,
    )
    return fig

def create_polar_fig(width=300, height=300, **kwargs):
    fig = go.Figure()
    fig.add_trace(
        go.Scatterpolar(
            r=polar_data["x1"].tolist(),
            theta=polar_data["y"].tolist(),
            mode="lines",
            name="Figure 8",
            line_color="peru",
        )
    )
    fig.add_trace(
        go.Scatterpolar(
            r=polar_data["x2"].tolist(),
            theta=polar_data["y"].tolist(),
            mode="lines",
            name="Cardioid",
            line_color="darkviolet",
        )
    )
    fig.add_trace(
        go.Scatterpolar(
            r=polar_data["x3"].tolist(),
            theta=polar_data["y"].tolist(),
            mode="lines",
            name="Hypercardioid",
            line_color="deepskyblue",
        )
    )

    fig.update_layout(
        # title = 'Mic Patterns',
        margin=dict(l=20, r=20, t=20, b=20),
        showlegend=False,
        width=width,
        height=height,
    )
    return fig

def create_streamline_fig(width=100, height=100, **kwargs):
    x = np.linspace(-3, 3, 100)
    y = np.linspace(-3, 3, 100)
    Y, X = np.meshgrid(x, y)
    u = -1 - X**2 + Y
    v = 1 + X - Y**2

    # Create streamline figure
    fig = ff.create_streamline(
        x.tolist(),
        y.tolist(),
        u.tolist(),
        v.tolist(),
        arrow_scale=0.1,
    )
    fig.update_layout(
        # title = 'Mic Patterns',
        margin=dict(l=20, r=20, t=10, b=10),
        showlegend=False,
        width=width,
        height=height,
    )
    return fig

def create_contour_fig(width=100, height=100, **kwargs):
    fig = go.Figure(
        data=go.Contour(
            z=[
                [2, 4, 7, 12, 13, 14, 15, 16],
                [3, 1, 6, 11, 12, 13, 16, 17],
                [4, 2, 7, 7, 11, 14, 17, 18],
                [5, 3, 8, 8, 13, 15, 18, 19],
                [7, 4, 10, 9, 16, 18, 20, 19],
                [9, 10, 5, 27, 23, 21, 21, 21],
                [11, 14, 17, 26, 25, 24, 23, 22],
            ],
            contours={
                "coloring": "heatmap",
                "showlabels": True,
                "labelfont": {
                    "size": 12,
                    "color": "black",
                },
            },
            line_smoothing=1,
        )
    )
    fig.update_layout(
        # title = 'Mic Patterns',
        margin=dict(l=20, r=20, t=10, b=10),
        showlegend=False,
        width=width,
        height=height,
    )
    return fig

@state.change("contour_size")
def update_contour_size(contour_size, **kwargs):
    if contour_size is None:
        return

    ctrl.update_contour(create_contour_fig(**contour_size.get("size")))

@state.change("stream_size")
def update_stream_size(stream_size, **kwargs):
    if stream_size is None:
        return

    ctrl.update_stream(create_streamline_fig(**stream_size.get("size")))

@state.change("polar_size")
def update_polar_size(polar_size, **kwargs):
    if polar_size is None:
        return

    ctrl.update_polar(create_polar_fig(**polar_size.get("size")))

@state.change("ternary_size")
def update_stream_size(ternary_size, **kwargs):
    if ternary_size is None:
        return

    ctrl.update_ternary(create_ternary_fig(**ternary_size.get("size")))

state.trame__title = "Charts"

with SinglePageLayout(server) as layout:
    layout.title.set_text("Many charts")

    with layout.content:
        with vuetify3.VContainer(fluid=True, classes="fill-height"):
            with vuetify3.VRow():
                with vuetify3.VCol():
                    with trame.SizeObserver("polar_size"):
                        ctrl.update_polar = plotly.Figure(
                            display_mode_bar=("false",),
                        ).update
                with vuetify3.VCol():
                    with trame.SizeObserver("ternary_size"):
                        ctrl.update_ternary = plotly.Figure(
                            display_mode_bar=("false",),
                        ).update
            with vuetify3.VRow(style="min-height: 300px;"):
                with vuetify3.VCol():
                    with trame.SizeObserver("contour_size"):
                        ctrl.update_contour = plotly.Figure(
                            display_mode_bar=("false",),
                        ).update
                with vuetify3.VCol():
                    with trame.SizeObserver("stream_size"):
                        ctrl.update_stream = plotly.Figure(
                            display_mode_bar=("false",),
                        ).update

if __name__ == "__main__":
    server.start()

Any help would be greatly appreciated. Good day!

[jourdain]

I think with vue3, I you don't need the SizeObserver anymore for the plotly figure.

Also which browser are you connecting to your trame app?

[AnthonyTSV]

If I understood the question correctly, then I'm using the latest Google Chrome.

[jourdain]

https://github.com/Kitware/trame-plotly/blob/master/examples/vue3/charts-resizable-client.py

[smkacur]

@AnthonyTSV did you ever resolve the cause of the
JS Error => TypeError: Cannot read properties of undefined (reading '_c')?
I am running into the same issue with plotly and vue3.

[jourdain]

Share your full code as the error is not explicit on what is happening on the JS side.

[smkacur]

import paraview.web.venv  # Available in PV 5.10-RC2+
import os
import json
import asyncio
import pandas as pd

import plotly.express as px
import plotly.graph_objects as go
from datetime import datetime

from trame.app import get_server, asynchronous
from trame.widgets import paraview, plotly
from trame.widgets import vuetify3 as vuetify
from trame.ui.vuetify3 import SinglePageLayout

import paraview as pv
from paraview import simple

# -----------------------------------------------------------------------------
# Trame setup
# -----------------------------------------------------------------------------

server = get_server()
server.client_type = "vue3"
state, ctrl = server.state, server.controller

# -----------------------------------------------------------------------------

animation_scene = simple.GetAnimationScene()
time_keeper = animation_scene.TimeKeeper

metadata = None
time_values = []
time_strings = []
weather_df = None
representation = None
color_bar = None


def load_time(**kwargs):
    global time_strings, weather_df

    # CLI
    args, _ = server.cli.parse_known_args()
    full_path = os.path.abspath(args.data)
    base_path = os.path.dirname(full_path)

    # Read in data from json
    with open(full_path, "r") as f:
        metadata = json.load(f)

    time_strings = metadata.get("time_strings", [])

    weather_data = os.path.join(base_path, 'weather.csv')
    weather_df = pd.read_csv(weather_data)


def load_data(**kwargs):
    global time_values, time_strings, representation
    # CLI
    args, _ = server.cli.parse_known_args()
    full_path = os.path.abspath(args.data)
    base_path = os.path.dirname(full_path)
    files = []
    reader_props = {}

    with open(full_path, "r") as f:
        metadata = json.load(f)
        reader_props = metadata.get("reader_properties", {})
        fields = metadata.get("fields", [])
        for name in metadata.get("files", []):
            files.append(os.path.join(base_path, name))

    reader = simple.OpenDataFile(files)
    for key, value in reader_props.items():
        reader.GetProperty(key).SetData(value)

    reader.UpdatePipeline()
    representation = simple.Show(reader, view)
    representation = set_opacity(representation, 0.4)
    isovolume = isoVolume(reader)
    time_values = list(time_keeper.TimestepValues)

    update_color_by(0, fields, "remote")
    state.time_value = time_values[0]
    state.times = len(time_values) - 1
    state.fields = fields

    simple.ResetCamera()
    view.CenterOfRotation = view.CameraFocalPoint
    update_view("local")


ctrl.on_server_ready.add(load_data)

# -----------------------------------------------------------------------------
# ParaView pipeline
# -----------------------------------------------------------------------------

# Rendering setup
view = simple.GetRenderView()
view.UseColorPaletteForBackground = 1
view.Background = [0.8, 0.8, 0.8]
view.OrientationAxesVisibility = 1
view.AxesGrid.Visibility = 1
view.AxesGrid.AxesToLabel = 34
view.AxesGrid.XAxisPrecision = 0
view.AxesGrid.XAxisUseCustomLabels = 1
view.AxesGrid.XAxisLabels = [436720, 436680, 436600, 436560]
view.AxesGrid.YAxisPrecision = 0
view.AxesGrid.YAxisUseCustomLabels = 1
view.AxesGrid.YAxisLabels = [3681940, 3681970, 3682030, 3682060]
view.AxesGrid.ZAxisPrecision = 0
view.AxesGrid.ZAxisUseCustomLabels = 1
view.AxesGrid.ZAxisLabels = [75, 85]

view = simple.Render()


def set_opacity(representation, value):
    representation.Opacity = value
    return representation


def set_solid_color(representation):
    simple.ColorBy(representation, value=None)
    return representation


def isoVolume(representation):
    isovolume = simple.IsoVolume(
        registrationName='IsoVolume', Input=representation)
    isovolume.InputScalars = ['CELLS', 'real_conductivity']
    isovolume.ThresholdRange = [0.003, 0.2]
    iso_rep = simple.Show(isovolume, view, 'UnstructuredGridRepresentation')
    return iso_rep

# -----------------------------------------------------------------------------
# Matplotlib
# -----------------------------------------------------------------------------


def Precipitation(**kwargs):
    global weather_df

    load_time()
    # TODO: Delay calling plot function until after data has loaded

    fig = px.bar(weather_df, x='Timestamp (EST)', y='F-AREA Precip (in)')

    if state.time_value != 0:
        try:
            date = datetime.strptime(str(state.time_value), '%Y%m%d')
            date = date.strftime('%Y-%m-%d')
            fig.add_trace(
                go.Scatter(
                    x=[date],
                    y=[weather_df['F-AREA Precip (in)'].mean()],
                    mode='markers',
                    marker=dict(color='red', size=10),
                    name='Red Dot'
                )
            )
        except:
            print(f'Could not parse {state.time_value} to datetime')

    fig.update_layout(
        xaxis_title='Date',
        yaxis_title='Daily Precipitation (in)',
        showlegend=False,
        margin=dict(l=10, r=10, t=10, b=10),
        bargap=0.01)

    return fig


def Temperature(**kwargs):
    global weather_df

    load_time()
    # TODO: Delay calling plot function until after the data has loaded

    fig = px.line(weather_df, x='Timestamp (EST)', y='Temp (deg F)')

    if state.time_value != 0:
        try:
            date = datetime.strptime(str(state.time_value), '%Y%m%d')
            date = date.strftime('%Y-%m-%d')
            fig.add_trace(
                go.Scatter(
                    x=[date],
                    y=[weather_df['Temp (deg F)'].mean()],
                    mode='markers',
                    marker=dict(color='red', size=10),
                    name='Red Dot'
                )
            )
        except:
            print(f'Could not parse {state.time_value} to datetime')

    fig.update_layout(
        xaxis_title='Date',
        yaxis_title='Average Daily Temperature (°F)',
        showlegend=False,
        margin=dict(l=10, r=10, t=10, b=10))

    return fig


# -----------------------------------------------------------------------------
# Callbacks
# -----------------------------------------------------------------------------


@state.change("active_array")
def update_color_by(active_array, fields, viewMode="remote", **kwargs):
    global color_bar

    if len(fields) == 0:
        return

    array = fields[active_array]
    simple.ColorBy(representation, (array.get("location"), array.get("title")))
    representation.RescaleTransferFunctionToDataRange(True, False)
    name = pv.make_name_valid(array.get("title"))
    lut = simple.GetColorTransferFunction(name)
    pwf = simple.GetOpacityTransferFunction(name)
    _min, _max = array.get("range")
    lut.RescaleTransferFunction(_min, _max)
    pwf.RescaleTransferFunction(_min, _max)
    color_bar = simple.GetScalarBar(lut, view)
    color_bar.Title = array.get("title")
    color_bar.RangeLabelFormat = '%-#3.2f'
    color_bar.ComponentTitle = ""
    color_bar.WindowLocation = 'Lower Center'
    color_bar.Orientation = 'Horizontal'
    simple.UpdateScalarBars(view)
    update_view(viewMode)


@state.change("time")
def update_time(time, viewMode, active_figure, **kwargs):
    if len(time_values) == 0:
        return

    if time >= len(time_values):
        time = 0
        state.time = time

    time = int(time)
    time_value = time_values[time]
    time_keeper.Time = time_value
    state.time_value = time_strings[time]
    update_view(viewMode)
    update_chart(active_figure)


@state.change("play")
@asynchronous.task
async def update_play(**kwargs):
    while state.play:
        with state:
            state.time += 1
            update_time(state.time, state.viewMode, state.active_figure)

        await asyncio.sleep(0.1)


@state.change("viewMode")
def update_view(viewMode, **kwargs):
    ctrl.view_update_image()
    if viewMode == "local":
        ctrl.view_update_geometry()


@state.change("active_figure")
def update_chart(active_figure, **kwargs):
    ctrl.update_figure(globals()[active_figure]())

# -----------------------------------------------------------------------------
# GUI
# -----------------------------------------------------------------------------


state.trame__title = "SSI-Trame"

with SinglePageLayout(server) as layout:
    layout.title.set_text("ERT")
    layout.icon.click = ctrl.view_reset_camera

    with layout.toolbar as toolbar:
        toolbar.dense = True
        vuetify.VSpacer()
        vuetify.VSelect(
            v_model=("active_array", 0),
            items=("fields", []),
            style="max-width: 200px",
            hide_details=True,
            density="compact",
            item_title="title"
        )
        vuetify.VSpacer()
        vuetify.VSelect(
            v_model=("active_figure", "Precipitation"),
            items=("figures",
                   [
                       {"title": "Precipitation", "value": "Precipitation"},
                       {"title": "Temperature", "value": "Temperature"}
                   ],
                   ),
            style="max-width: 200px",
            hide_details=True,
            density="compact"
        )
        vuetify.VTextField(
            v_model=("time_value", 0),
            disabled=True,
            hide_details=True,
            density="compact",
            style="max-width: 200px",
            classes="mx-2",
        )
        vuetify.VSlider(
            v_model_number=("time", 0),
            min=0,
            max=("times", 1),
            step=1,
            hide_details=True,
            density="compact",
            style="max-width: 200px",
        )
        vuetify.VCheckbox(
            v_model=("play", False),
            false_icon="mdi-play",
            true_icon="mdi-stop",
            hide_details=True,
            density="compact",
            classes="mx-2",
        )

        with vuetify.VBtn(icon=True, click=ctrl.view_reset_camera):
            vuetify.VIcon("mdi-crop-free")

        vuetify.VCheckbox(
            v_model=("viewMode", "remote"),
            true_value="remote",
            false_value="local",
            flase_icon="mdi-rotate-3d",
            true_icon="mdi-video-image",
            hide_details=True,
            density="compact",
            classes="mx-2",
        )

        vuetify.VProgressLinear(
            indeterminate=True,
            absolute=True,
            bottom=True,
            active=("trame__busy",),
        )

    with layout.content:
        with vuetify.VContainer(fluid=True, classes="fill-height pa-0 ma-0"):
            with vuetify.VRow(dense=True, classes="fill-height"):
                with vuetify.VCol():
                    html_view = paraview.VtkRemoteLocalView(
                        view, namespace="view")
                    ctrl.view_update = html_view.update
                    ctrl.view_update_geometry = html_view.update_geometry
                    ctrl.view_update_image = html_view.update_image
                    ctrl.view_reset_camera = html_view.reset_camera

                with vuetify.VCol():
                    figure = plotly.Figure(
                        display_logo=False,
                        display_mode_bar="true")
                    ctrl.update_figure = figure.update

# -----------------------------------------------------------------------------
# Main
# -----------------------------------------------------------------------------

if __name__ == "__main__":
    server.cli.add_argument("--data", help="Path to state file", dest="data")
    server.start()

[jourdain]

wow, I was hoping for a smaller example with data so I can run it locally. At first glance, I don't see anything obviously wrong...

[smkacur]

I have been working on a toy problem that I can make a separate discussion with but don't have it ready to go yet. I will update you

[smkacur]

@jourdain it looks like the error was caused by an outdated version of trame-plotly. Updating to version 3.0.2 resolved this issue.