Closable tabs

[kerim371]

Hi,

I'm trying to create closable tabs. In best case there should be an X symbol at the end (like in the picture below) of the tab that closes it.
For the now I simply use the button for that.
But how to close it?

class MyLayout(SinglePageWithDrawerLayout):
    def __init__(self, _server, template_name="main", show_drawer=True, width=300, **kwargs):
        super().__init__(_server, template_name=template_name, show_drawer=show_drawer, width=width, **kwargs)
        
        with self:
            with self.drawer as drawer:
                vuetify.VBtn("CLOSE_TAB", click=self.close_tab)

            with self.content:
                self.content_container = vuetify.VContainer(fluid=True,)
                with self.content_container:
                    self.tabs = self.tabs = vuetify.VTabs(
                        v_model=("tab_idx", 0),
                        style="z-index: 1;",
                        color="grey",
                        change=(self.on_tab_change, "[$event]"),
                    )
                    self.tab_list = []
                    with self.tabs:
                        for tab_label in ["tab1", "tab2", "tab3"]:
                            self.tab_list.append(vuetify.VTab(tab_label))

    def close_tab(self):
        # What should be there? How to remove/close for example `tab1`?

[jourdain]

You need to drive your tabs with a state variable and leveraging the v_for= directive like in that example.

[jourdain]

Use a list of names for your tabs rather than a number.

[jourdain]

https://www.w3schools.com/vue/vue_v-for.php

[kerim371]

Very interesting Vue courses. Didn't know about it.

If we use the list of names then how to get the name of the tab owner of the close-button that was clicked (here I use the var tab_names wich is a list)?
Also it seems that state.list.append/remove is not sensible to changes. I.e. we can append new item to the list but it won't trigger new tab to be drawn.

from trame.ui.vuetify2 import SinglePageLayout, SinglePageWithDrawerLayout
from trame.widgets import vuetify2 as vuetify
from trame.widgets import html, plotly, trame, client
from trame.app import get_server


class MyLayout(SinglePageWithDrawerLayout):
    def __init__(self, _server, template_name="main", show_drawer=True, width=300, **kwargs):
        super().__init__(_server, template_name=template_name, show_drawer=show_drawer, width=width, **kwargs)

        # set the initial tab names
        self.state.tab_names = ["tab0", "tab1", "tab2"]
        with self:
            with self.drawer as drawer:
                self.add_btn()

            with self.content:
                self.content_container = vuetify.VContainer(fluid=True,)
                with self.content_container:
                    self.tabs = self.tabs = vuetify.VTabs(
                        v_model=("tab_idx", 0),
                        style="z-index: 1;",
                        color="grey",
                        change=(self.on_tab_change, "[$event]"),
                    )

                    with self.tabs:
                        with vuetify.VTab("{{ name }}", v_for="name in tab_names", key="name"):
                            with vuetify.VBtn(icon=True, click=self.on_close_tab_btn_clicked):
                                vuetify.VIcon("mdi-close")

    def add_btn(self):
        with self:
            with self.drawer:
                vuetify.VBtn("ADD_TAB", click=self.on_add_tab_btn_clicked)

    def on_add_tab_btn_clicked(self):
        # This somehow doesn't update the tabs
        self.state.tab_names.append(f"tab{len(self.state.tab_names)}")

    def on_close_tab_btn_clicked(self):
        self.state.tab_names.remove(""" We need here the name (key) of tab owner of the clicked close button """)

    def on_tab_change(self, tab_idx):
        print("on_tab_change:", tab_idx)
        self.state.tab_idx = tab_idx
    

def main(server=None, **kwargs):
    if server is None:
        server = get_server(client_type="vue2")

    MyLayout(server)
    server.start()


if __name__ == "__main__":
    main()

[jourdain]

click=(self.on_close_tab_btn_clicked, "[name]")

[jourdain]

https://kitware.github.io/trame/guide/intro/getting_started.html#forcing-state-exchange

[kerim371]

@jourdain thank you very much!
That very helpful!

The only thing is that:

    def on_add_tab_btn_clicked(self):
        with self.state:
            self.state.tab_names.append(f"tab{len(self.state.tab_names)}")

doesn't update the tabs.
But explicit call to self.state.dirty("tab_names") do that.

The final code looks like follow:

from trame.ui.vuetify2 import SinglePageLayout, SinglePageWithDrawerLayout
from trame.widgets import vuetify2 as vuetify
from trame.widgets import html, plotly, trame, client
from trame.app import get_server


class MyLayout(SinglePageWithDrawerLayout):
    def __init__(self, _server, template_name="main", show_drawer=True, width=300, **kwargs):
        super().__init__(_server, template_name=template_name, show_drawer=show_drawer, width=width, **kwargs)

        # set the initial tab names
        self.state.tab_names = ["tab0", "tab1", "tab2"]
        with self:
            with self.drawer as drawer:
                self.add_btn()

            with self.content:
                self.content_container = vuetify.VContainer(fluid=True,)
                with self.content_container:
                    self.tabs = self.tabs = vuetify.VTabs(
                        v_model=("tab_idx", 0),
                        style="z-index: 1;",
                        color="grey",
                        change=(self.on_tab_change, "[$event]"),
                    )

                    with self.tabs:
                        with vuetify.VTab("{{ name }}", v_for="name in tab_names", key="name"):
                            with vuetify.VBtn(icon=True, click=(self.on_close_tab_btn_clicked, "[name]")):
                                vuetify.VIcon("mdi-close")

    def add_btn(self):
        with self:
            with self.drawer:
                vuetify.VBtn("ADD_TAB", click=self.on_add_tab_btn_clicked)

    def on_add_tab_btn_clicked(self):
        self.state.tab_names.append(f"tab{len(self.state.tab_names)}")
        self.state.dirty("tab_names")

    def on_close_tab_btn_clicked(self, name):
        print("name:", name)
        self.state.tab_names.remove(name)
        self.state.dirty("tab_names")

    def on_tab_change(self, tab_idx):
        print("on_tab_change:", tab_idx)


def main(server=None, **kwargs):
    if server is None:
        server = get_server(client_type="vue2")

    MyLayout(server)
    server.start()


if __name__ == "__main__":
    main()

closing_tabs.mp4

[jourdain]

Another way to write those methods

def on_add_tab_btn_clicked(self):
    self.state.tab_names = [*self.state.tab_names, f"tab{len(self.state.tab_names)}"]

def on_close_tab_btn_clicked(self, name):
   self.state.tab_names = [t for t in self.state.tab_names if t != name]

[kerim371]

@jourdain hi,

After playing around with that example I've found that if I add for example a button to each tab then this will be a like a single button for all the tabs.
I mean if this button has two states (on/off) then when I change its state on one tab the state of button of another tab will also be changed (video below).

So is there a way make these buttons independent on each tab?

from trame.ui.vuetify2 import SinglePageLayout, SinglePageWithDrawerLayout
from trame.widgets import vuetify2 as vuetify
from trame.widgets import html, plotly, trame, client
from trame.app import get_server


class MyLayout(SinglePageWithDrawerLayout):
    def __init__(self, _server, template_name="main", show_drawer=True, width=300, **kwargs):
        super().__init__(_server, template_name=template_name, show_drawer=show_drawer, width=width, **kwargs)

        # set the initial tab names
        self.state.tab_names = ["tab0", "tab1", "tab2"]
        with self:
            with self.drawer as drawer:
                self.add_btn()

            with self.content:
                self.content_container = vuetify.VContainer(fluid=True,)
                with self.content_container:
                    self.tabs = self.tabs = vuetify.VTabs(
                        v_model=("tab_idx", 0),
                        style="z-index: 1;",
                        color="grey",
                        change=(self.on_tab_change, "[$event]"),
                    )

                    with self.tabs:
                        with vuetify.VTab("{{ name }}", v_for="name in tab_names", key="name"):
                            with vuetify.VBtn(icon=True, click=(self.on_close_tab_btn_clicked, "[name]")):
                                vuetify.VIcon("mdi-close")
                        with vuetify.VTabItem(v_for="name in tab_names", key="name"):
                            vuetify.VCheckbox(
                                v_model=("my_var", False),
                                on_icon="mdi-link",
                                off_icon="mdi-link-off",
                                classes="mx-1",
                                hide_details=True,
                                dense=True,
                            )

    def add_btn(self):
        with self:
            with self.drawer:
                vuetify.VBtn("ADD_TAB", click=self.on_add_tab_btn_clicked)

    def on_add_tab_btn_clicked(self):
        self.state.tab_names.append(f"tab{len(self.state.tab_names)}")
        self.state.dirty("tab_names")

    def on_close_tab_btn_clicked(self, name):
        self.state.tab_names.remove(name)
        self.state.dirty("tab_names")

    def on_tab_change(self, tab_idx):
        print("on_tab_change:", tab_idx)


def main(server=None, **kwargs):
    if server is None:
        server = get_server(client_type="vue2")

    MyLayout(server)
    server.start()


if __name__ == "__main__":
    main()

closing_tabs.mp4

[jourdain]

yes just use a state name for those button to involve the tab name like

state.innertab = {}

vuetify.VCheckbox(
   v_model=("innertab[name]",),
   on_icon="mdi-link",
   off_icon="mdi-link-off",
   classes="mx-1",
   hide_details=True,
   dense=True,
   change="flushState('innertab')",
)

You could have the content of a given layout in each of the tab, so you can fully control/create each content dynamically.

[kerim371]

Very interesting!
Thank you for the help a lot!

[kerim371]

I'm wondering, when we close the tab does the momory freed up?
I have some doubts because like in th video attached we can change the state of checkbox in tab2 to on then close it and reopen it we can see that the state of this checkbox is on on tab2.
Basically if the user opens tabs and then closes them many times I think there will be problems with consumed memory growth.

closing_tabs.mp4

[jourdain]

Why would it be freed up? Why would a key/value pair would be removed from a dictionary if you don't do it yourself?
Those are design issue not related to trame at all... It seems that you are missing the point of what that server.state is and how to use it.

Here is a reply from google about what the state is:

Key points about "state" in a store:

• Data storage: The state is where you define all the data that needs to be managed and accessed throughout your application.
• Reactivity: Changes made to the state automatically update any components that are currently using that data, thanks to the reactive nature of the system.
• Centralized access: By storing data in the state, you can access it from any part of your application through the store, promoting code organization and data consistency.

[kerim371]

Oh I see now! I have to remove the checkbox name from state del self.state.innertab[name].

I'm very sorry for such a silly questions, I completly understand you.
It is just a lack of experience of web development. I'm working on it.

Thank you veru much for clarification!