Context Menu in trame.ListBrowser Element

[juliencastelneau]

Hello,

I would like to create a custom context menu in ListBrowser Element

I tried this :

       trame.ListBrowser(
                classes="pa-8",
                location=("[25, 100]",),
                handle_position="bottom",
                filter=True,
                list=("listing", ),
                path=("path",),
                contextmenu="utils.context.actions.menu($event)"

And I load a js file to be able to remove the default context menu

window.trame.utils.context = {
    actions: {
        menu(e) {
            e.preventDefault();
        }
    }
}

But I do not know how to define a custom one and how to connect actions to items in menu

Thx

[jourdain]

https://v2.vuetifyjs.com/en/components/menus/#absolute-without-activator

[juliencastelneau]

Thx
Just a question
Do I have to develop it in javascript or can I develop it in python?
If so, what is the name of the element and how can I integrate it into the contextmenu component of the ListBrowser element?

[jourdain]

I need a complete example that I can just run.

[jourdain]

Also just guessing but $nextTick needs to be window.vue.nextTick

[juliencastelneau]

At the moment I can't send you my complete example without modifications, because you need an instance of girder on the same domain to be able to start the example (the token is shared between the 2 instances). I will try to send you an example with ListBrowser and contextmenu that works standalone.

[jourdain]

Just need something tiny validating/showcasing the issue. Nothing more.
I don't even think you need a ListBrowser.

[juliencastelneau]

Hello @jourdain

I think this is an example that validates the problem with the position of the context menu

import os
from trame.app import get_server
from trame.widgets import trame, vuetify3

server = get_server()
server.client_type = os.environ.get("VUE_VERSION", "vue3")

if server.client_type == "vue2":
    from trame.ui.vuetify2 import SinglePageLayout
else:
    from trame.ui.vuetify3 import SinglePageLayout

FILE_LISTING = [
    {
        "text": "Hello.txt",
        "value": "hello.txt",
        "type": "File",
        "prependIcon": "mdi-file-document-outline",
    }
]

PATH_HIERARCHY = []

server.state["menu_items"] = ["one", "two", "three"]

def on_click(e):
    print(e)

def load_data(item):
    print(item)

with SinglePageLayout(server) as layout:
    layout.title.set_text("List Browser")
    with layout.content:
        trame.ListBrowser(
            classes="pa-8",
            location=("[100, 100]",),
            handle_position="bottom",
            filter=True,
            list=("listing", FILE_LISTING),
            path=("path", PATH_HIERARCHY),
            click=(on_click, "[$event]"),
           contextmenu=
                """
                    $event.preventDefault();
                    menuX = $event.clientX;
                    menuY = $event.clientY;
                    $event.view.Vue.nextTick (() => {
                        menuShow = true;
                   })
                 """,
        )
        with vuetify3.VMenu(
            v_model=("menuShow", False),
            position_x=("menuX", 0),
            position_y=("menuY", 0),
            absolute=True,
            offset_y=True,
        ):
            with vuetify3.VList():
                with vuetify3.VListItem(
                    v_for="(item, i) in menu_items",
                    key="i",
                    value=["item"],
                ):
                    vuetify3.VBtn(
                        "{{ item }}",
                        click=(load_data, "[item]"),
                    )
        

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

I also don't understand how to retrieve information about the file on which the right-click was performed
For instance, the keys "text" and "values" in FILE_LISTING

Thx.

[jourdain]

Well, you can't use the vuetify2 API on vuetify3 component. But a working example is here

import os
from trame.app import get_server
from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import trame, vuetify3

server = get_server()
server.client_type = os.environ.get("VUE_VERSION", "vue3")

FILE_LISTING = [
    {
        "text": "Hello.txt",
        "value": "hello.txt",
        "type": "File",
        "prependIcon": "mdi-file-document-outline",
    }
]

PATH_HIERARCHY = []

server.state["menu_items"] = ["one", "two", "three"]


def on_click(e):
    print(e)


def load_data(item):
    print(item)


with SinglePageLayout(server) as layout:
    layout.title.set_text("List Browser")
    with layout.content:
        trame.ListBrowser(
            style="position: relative",
            classes="pa-8",
            location=("[100, 100]",),
            handle_position="bottom",
            filter=True,
            list=("listing", FILE_LISTING),
            path=("path", PATH_HIERARCHY),
            click=(on_click, "[$event]"),
            contextmenu="""
                    $event.preventDefault();
                    menuX = $event.clientX;
                    menuY = $event.clientY;
                    menuShow = true;
                 """,
        )
        with vuetify3.VMenu(
            v_model=("menuShow", False),
            style=("{ position: 'absolute', left: `${menuX}px`, top: `${menuY}px`}",),
        ) as menu:
            print(menu)
            with vuetify3.VList():
                with vuetify3.VListItem(
                    v_for="(item, i) in menu_items",
                    key="i",
                    value=["item"],
                ):
                    vuetify3.VBtn(
                        "{{ item }}",
                        click=(load_data, "[item]"),
                    )


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

[jourdain]

https://github.com/Kitware/trame/blob/master/examples/validation/discussion/443.py

[juliencastelneau]

Thx that's perfect !
Now, I just have to find a way to detect which item in the main menu was selected