Paraview not rendering after upgrade to Vue3 #415

smkacur · 2024-01-16T16:52:20Z

smkacur
Jan 16, 2024

Hi Jourdain,
I recently upgraded a Paraview application from Vue2 to Vue3 and referenced the migration guide. When I run the application I don't get any messages in the terminal where I launch the app but nothing renders in the browser window (using Google Chrome). When I inspect the console, I see Failed to load resource: the server responded with a status of 405 (Method Not Allowed).

Do you have an idea of what might be going wrong?

Here is the app here for reference:

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

from trame.app import get_server, asynchronous
from trame.widgets import paraview
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_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)
    time_strings = metadata.get("time_strings", [])

    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

# -----------------------------------------------------------------------------
# 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, **kwargs):
    if len(time_values) == 0:
        return

    if time >= len(time_values):
        time = 0
        state.time = time
    time_value = time_values[time]
    time_keeper.Time = time_value
    state.time_value = time_strings[time]
    update_view(viewMode)


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

        await asyncio.sleep(0.1)


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


# -----------------------------------------------------------------------------
# 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,
            dense=True,
        )
        vuetify.VTextField(
            v_model=("time_value", 0),
            disabled=True,
            hide_details=True,
            dense=True,
            style="max-width: 200px",
            classes="mx-2",
        )
        vuetify.VSlider(
            v_model=("time", 0),
            min=0,
            max=("times", 1),
            hide_details=True,
            dense=True,
            style="max-width: 200px",
        )
        vuetify.VCheckbox(
            v_model=("play", False),
            false_icon="mdi-play",
            true_icon="mdi-stop",
            hide_details=True,
            dense=True,
            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,
            dense=True,
            classes="mx-2",
        )

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

    with layout.content:
        with vuetify.VContainer(fluid=True):  # class_="fill-height fluid"):
            # class_="justify-center align-center"):
            with vuetify.VRow(dense=True):
                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

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

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

Answered by jourdain

Jan 16, 2024

After fixing the API change in vuetify3 it seems to be working

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

from trame.app import get_server, asynchronous
from trame.widgets import paraview
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

# -----------------------------------------…

View full answer

jourdain · 2024-01-16T17:26:02Z

jourdain
Jan 16, 2024
Maintainer

So vuetify API is slightly different between vue2 and vue3. Also did you pick another port to overcome the browser caching issue?

2 replies

smkacur Jan 16, 2024
Author

Thank you for your response. Yes I have tried switching the port to avoid caching. Am I missing something related to async between the vue2 and vue3 API changes?

jourdain Jan 16, 2024
Maintainer

No async API change. The UI will look different because of renamed properties (dense=True, ...).
Will give it a try soon to see if I spot the issue.

jourdain · 2024-01-16T23:47:18Z

jourdain
Jan 16, 2024
Maintainer

After fixing the API change in vuetify3 it seems to be working

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

from trame.app import get_server, asynchronous
from trame.widgets import paraview
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_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)
    time_strings = [str(v) for v in time_values]

    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

# -----------------------------------------------------------------------------
# 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, **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)


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

        await asyncio.sleep(0.1)


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


# -----------------------------------------------------------------------------
# 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="text",
        )
        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"):
            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

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

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

2 replies

smkacur Jan 26, 2024
Author

Thank you @jourdain that solved it. My bad not catching the additional API changes.
Note that under the VSelect for for the active_array it should be item_title="title,

jourdain Jan 26, 2024
Maintainer

Not if you want the same layout as before [{value, text}, ...]. item_title="title" is the new default with vuetify3. So if your fields follow the new structure, you don't need that property. I used the json from the repo which is using the vuetify2 structure.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Paraview not rendering after upgrade to Vue3 #415

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

Paraview not rendering after upgrade to Vue3 #415

smkacur Jan 16, 2024

Replies: 2 comments · 4 replies

jourdain Jan 16, 2024 Maintainer

smkacur Jan 16, 2024 Author

jourdain Jan 16, 2024 Maintainer

jourdain Jan 16, 2024 Maintainer

smkacur Jan 26, 2024 Author

jourdain Jan 26, 2024 Maintainer

smkacur
Jan 16, 2024

Replies: 2 comments 4 replies

jourdain
Jan 16, 2024
Maintainer

smkacur Jan 16, 2024
Author

jourdain Jan 16, 2024
Maintainer

jourdain
Jan 16, 2024
Maintainer

smkacur Jan 26, 2024
Author

jourdain Jan 26, 2024
Maintainer