Dynamically updating components of a layout

[robertsoakes]

Dear Kitware,

I recently came across Trame and the capabilities are really astounding. It is a very nicely done framework for creating rich applications for 3D visualization, analysis, and interaction.

I'm currently working on a proof-of-concept application that has a couple of steps joined together in a workflow. In step 1, the user selects some data. In step 2, they manipulate some parameters via a set of controls. Then in step 3, they visualize their results.

Is there a way to dynamically modify the components of a layout? For example, can I render one set of controls in step 1; clear those for step 2 and load a new set of components; then clear those for step 3 and load the resulting outcome?

Is Trame designed for implementing these types of workflows?

Best Regards,
Rob Oakes

[patrickoleary]

Dear Rob, Yes, trame can do this. You could use multiple tabs, which is a static workflow, but the web is pretty dynamic and holds a number of possibilities for your use case. Try using "v_show=expression" as a parameter to the containers or layout holding the component. If the expression evaluates to true, then the component takes space and is displayed; otherwise, it does not take up any space and is not displayed. Best regards, Patrick

…

On Wed, Dec 27, 2023 at 8:59 PM Rob Oakes ***@***.***> wrote: Dear Kitware, I recently came across Trame and the capabilities are really astounding. It is a very nicely done framework for creating rich applications for 3D visualization, analysis, and interaction. I'm currently working on a proof-of-concept application that has a couple of steps joined together in a workflow. In step 1, the user selects some data. In step 2, they manipulate some parameters via a set of controls. Then in step 3, they visualize their results. Is there a way to dynamically modify the components of a layout? For example, can I render one set of controls in step 1; clear those for step 2 and load a new set of components; then clear those for step 3 and load the resulting outcome? Is Trame designed for implementing these types of workflows? Best Regards, Rob Oakes — Reply to this email directly, view it on GitHub <#399>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAYGDMOL3N2YS3YDTSQMKGDYLTVCJAVCNFSM6AAAAABBFBBHV2VHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZWGAYDKOBTG4> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[robertsoakes]

Hi Patrick,

Thank you for getting back to me. I'll start playing with the v_show parameters and see if I can get the system to behave the way that I want it. I spent some time yesterday trying to figure out how to "re-render" a container (basically: an event triggers on the server side, you define additional widgets and then try to re-generate the client side elements), but I wasn't able to figure that out. (It also turns out that trying to dynamically re-define the contents of a drawer or toolbar messes up the server state of the application 😅 .)

I'm playing with some strategies now (and if you don't mind keeping this discussion open), I'll post some code/screenshots and love to get some feedback. One need I haven't figured out how to do is similar to the use-case described above. The application will be used for planning surgeries, and for that reason, needs to load medical imaging volumes and 3D meshes. For the meshes, I would like to create a set of controls to allow the user to modify the opacity, color, and other properties (one set of controls for each mesh); but I haven't been able to figure out how that should work since the imaging data is not loaded at the time that the widgets are declared.

Any feedback is appreciated.

Cheers,
Rob

[jourdain]

While the path @patrickoleary suggests is recommended for performance and general architecture, you can also redefine the main layout in functions, as in the example below. Moreover, you can use trame-router to better manage multi-pages and sub-sections of the UI update.

from trame.app import get_server
from trame.decorators import TrameApp, change
from trame.ui.html import DivLayout
from trame.widgets import html

CLIENT_TYPE="vue2" # or "vue3"

@TrameApp()
class Example:
    def __init__(self, server=None):
        self.server = get_server(server, client_type=CLIENT_TYPE)
        self.server.state.active_page = "page_1"

    @change("active_page")
    def go_to_page(self, active_page, **kwargs):
        getattr(self, active_page)()


    def page_1(self):
        with DivLayout(self.server) as layout:
            html.Div("Page 1")
            with html.Select(v_model="active_page"):
                html.Option("Page 1", value="page_1")
                html.Option("Page 2", value="page_2")
                html.Option("Page 3", value="page_3")


    def page_2(self):
        with DivLayout(self.server) as layout:
            html.Div("Page 2")
            with html.Select(v_model="active_page"):
                html.Option("Page 1", value="page_1")
                html.Option("Page 2", value="page_2")
                html.Option("Page 3", value="page_3")


    def page_3(self):
        with DivLayout(self.server) as layout:
            html.Div("Page 3")
            with html.Select(v_model="active_page"):
                html.Option("Page 1", value="page_1")
                html.Option("Page 2", value="page_2")
                html.Option("Page 3", value="page_3")



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

Feel free to contact Kitware so we can help you make the best of trame and VTK.

[robertsoakes]

@jourdain and @patrickoleary: Thank you for so much for the examples. I've been playing with them over the past couple of days and I've been able to make some really wonderful progress. (Aside: I really like the way the system has been designed, it feels really cohesive and provides an awesome way to build mixed server/client state apps.) I've run aground on an issue with 3D controls, though and feel like I'm missing something fundamental.

I've implemented an app structure the way that @jourdain recommended and set up a view switch in state that allows me to render different single page drawer containers. That is working great with "content" widgets (div elements, switches, dropdowns, etc.), things render and update when the view changes. Unfortunately, I'm running into issues with the VTK widgets and cannot get any content to display

When attempting to add a PyVista plotter for example, I can get the widget to initialize but I'm not able to load mesh instances, volumes, etc. The logic to load the data execute correctly and appear on the server, but the client just has an empty canvas element that is blank. When I try to call methods added to the servers controller (for example the VTK view.update method), I get a "JS Error => : TypeError: R is null".

Here's a rough outline of what I'm doing (the logic below is mixed amongst some other state management and component rendering, or I would send the whole thing):

import pyvista as pv
from pyvista.trame.ui import plotter_ui

# Retrieve data and setup some state
app.plotter = pv.Plotter(off_screen = False)
for g in meshes:
  app.plotter.add_mesh(g)

with SinglePageWithDrawerLayout(app.server) as layout:
  with layout.content:
    with vuetify.VContainer(fluid=True,classes="pa-0 fill-height"):
      with vuetify.VCol(classes="fill-height"):
        view = plotter_ui(self.plotter, mode='client')
          app.ctrl.view_update = view.update
          app.ctrl.view_update_camera = view.reset_camera

Is there some client or server method I need to call in order to synchronize the 3D viewport state?

[robertsoakes]

Some screenshots of the current app for context.

3D viewer page:

Search page (still mostly empty):

[jourdain]

It is hard to tell exactly what could be happening in your setup, but normally calling update on the view is all you need.
For now, you may want to use the remote rendering path and then migrate to local view when you know that things are working.

[robertsoakes]

After looking at more examples and adopting v_show, I've been able to get most of the 3D features I need to work (and the program is coming together nicely). One major struggle I had was the best way to mix the low-level render window API and high-level PyVista Plotter APIs. The high-level API is extremely convenient, but did not work as expected a lot of the time. Once I got it working via the low-level API, I was able to migrate back to the high-level API and keep things functioning.

Once I've got something workable, I'll create a high-level example which shows how to mix volumes, meshes, and image slices within a single application and post it here.