paraview.VtkRemoteView() with routing

[AliE89]

Hi Sebastien,

I am working a bit to make my application multipage using trame-router.

I had a look to this tutorial https://github.com/Kitware/trame-router/blob/master/examples/vue2/basic.py and I manage to make it work. However, if I try to do a page with VtkRemoteView(), I cannot really see any rendering but just the bare page.

Have you ever tried this before?

Here is my snippet:

from trame.widgets import vuetify, paraview

def home_page():
    view = render_view
    view.MakeRenderWindowInteractor(True)
    view_name = f'view_0'
    html_view = paraview.VtkRemoteView(view, ref=view_name, interactive_ratio=0.75)

    # Home route
    with RouterViewLayout(global_vars.server, "/"):
        home_page()

    with RouterViewLayout(global_vars.server, "/foo"):
        foo_page()

    with SinglePageWithDrawerLayout(global_vars.server) as layout:
        layout.title.set_text("Test")

        with layout.drawer as drawer:

            with vuetify.VListItem(to="/"):
                with vuetify.VListItemIcon():
                    vuetify.VIcon("mdi-home")
                with vuetify.VListItemContent():
                    vuetify.VListItemTitle("Home")

            with vuetify.VListItem(to="/foo"):
                with vuetify.VListItemIcon():
                    vuetify.VIcon("mdi-food")
                with vuetify.VListItemContent():
                    vuetify.VListItemTitle("Foo")

            # drawer components
            drawer.width = 600

        with layout.content:
   
            with vuetify.VContainer():
                router.RouterView()

Many thanks for the suggestions!

[jourdain]

Where is the code with the VtkRemoteView? Did you fixed a ref=?

[AliE89]

Let me prepare a minimal working example, It will be easier to discuss on it. Giving you back asap. I still use ref as legacy, I know you removed it recently. Il Mer 24 Gen 2024, 18:10 Sebastien Jourdain (Kitware) < ***@***.***> ha scritto:

…

Where is the code with the VtkRemoteView? Did you fixed a ref=? — Reply to this email directly, view it on GitHub <#421 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AL4ZV6XOPDBHGAPWD4YOYYDYQE6ABAVCNFSM6AAAAABCJDKRFSVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DEMZVGYYDK> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[jourdain]

I just made the ref= optional by generating a unique value automatically. But it is still there... ;-)

[AliE89]

Good morning Sebastien,

please find attached a working example of the issue I am experimenting. To run the test case, just pvbatch test.py.
test_routing.zip

Here I am just creating a spehere and coloring it. If I call home_page() under routing I cannot see anything, while if I just do:

        with layout.content:

            home_page()

            #with vuetify.VContainer():
            #    router.RouterView()

I can see it displayed ok.

Thank you very much!

[jourdain]

It works great if you assign a size to the HTML render window. Your issue doesn't have anything to do with the router part.
The VtkRemoteView will take the size of its container, and in your case, it uses the full width (good) but 0 height (bad). That's why you were not seeing it.

[jourdain]

Side note: your code separation is quite a mess. You may want to use a class to define your applications rather than a set of global modules.

[AliE89]

I see, thank you for the clarification! I knew it was a stupid stuff like that. How do you set the size of the window? Is there a way to set the full height automatically? Yes, that code is a bit of a mess. I wrote tons of lines in a very short amount of time. I have scheduled a refactoring after having tested all the features I'd like there. Wrapping up globals in a class and passing it around sounds like a plan. Cheers & thank you. Cheers

[jourdain]

CSS is your friend to define your layout. Vuetify provide a fill-height class which is just doing the same thing as style="height: 100%;".

[jourdain]

Also use your browser dev tools to edit live the css/style to figure out what you need to define in your trame code.

[jourdain]

with vuetify.VContainer(classes="fill-height"):
    with VCard(classes="fill-height"):
       vtk.VtkRemoteView(...)

Fill height use the size of the parent element. So if the parent does not have any size, the children will be 100% of 0...

[AliE89]

Hi Sebastienne, Sorry I am really dumb but I cannot figure out where to put the class attribute to assing the layout's height -.- Cheers Il Dom 28 Gen 2024, 17:56 Sebastien Jourdain (Kitware) < ***@***.***> ha scritto:

…

Also use your browser dev tools to edit live the css/style to figure out what you need to define in your trame code. — Reply to this email directly, view it on GitHub <#421 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AL4ZV6QJF3KBHHFLGCF32YTYQZ7M7AVCNFSM6AAAAABCJDKRFSVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DENZTGA4TM> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[AliE89]

Yes, you are definitevely right. In your opinion, why that thing is working if I do not use the Router? It must take the size somewhere else... Il Lun 5 Feb 2024, 12:46 Edoardo alinovi ***@***.***> ha scritto:

…

Hi Sebastienne, Sorry I am really dumb but I cannot figure out where to put the class attribute to assing the layout's height -.- Cheers Il Dom 28 Gen 2024, 17:56 Sebastien Jourdain (Kitware) < ***@***.***> ha scritto: > Also use your browser dev tools to edit live the css/style to figure out > what you need to define in your trame code. > > — > Reply to this email directly, view it on GitHub > <#421 (reply in thread)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AL4ZV6QJF3KBHHFLGCF32YTYQZ7M7AVCNFSM6AAAAABCJDKRFSVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DENZTGA4TM> > . > You are receiving this because you authored the thread.Message ID: > ***@***.***> >

[jourdain]

The router does not matter here... Just make sure that each element in the hierarchy properly use the full height. Learn how to use the dev tools of your browser to navigate the DOM and edit or identify where that info got dropped.

with RouterViewLayout(server, "/foo") as layout:
    layout.root.style="height: 100%"
    with vuetify.VCard(classes="fill-height", style="background: red;"): # Make sure the RED takes the full height
        vuetify.VCardTitle("This is foo")
        with vuetify.VCardText():
            vuetify.VBtn("Take me back", click="$router.back()")

[AliE89]

I see, layout.root.style did the trick indeed. I was missing that bit... Many thanks 😀 Il Lun 5 Feb 2024, 16:25 Sebastien Jourdain (Kitware) < ***@***.***> ha scritto:

…

The router does not matter here... Just make sure that each element in the hierarchy properly use the full height. Learn how to use the dev tools of your browser to navigate the DOM and edit or identify where that info got dropped. with RouterViewLayout(server, "/foo") as layout: layout.root.style="height: 100%" with vuetify.VCard(classes="fill-height", style="background: red;"): # Make sure the RED takes the full height vuetify.VCardTitle("This is foo") with vuetify.VCardText(): vuetify.VBtn("Take me back", click="$router.back()") — Reply to this email directly, view it on GitHub <#421 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AL4ZV6UUVOUAURUA7UYNYADYSD2XFAVCNFSM6AAAAABCJDKRFSVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DGNZRG43TK> . You are receiving this because you authored the thread.Message ID: ***@***.***>