Changing UI Card in Drawer GUI

[wyattnapier]

Hi Jourdain, thank you for all of your help thus far.

I have split my code into two files, one that builds the pipeline and holds all of the actors, and the other file that creates the GUI and manages the callbacks from the GUI. I also have incorporated a file_upload button. I initially have no data so I have just a SingePageLayout with a file_upload button, but then when I upload a file I switch to a SingePageWithDrawerLayout. I am following the tutorial 04_application.py example for the most part, and I now cannot see my gittree when I open the new layout. In my drawer I can only see the ui_cards and they are all open, despite using a v_show. Do you have any idea how to fix this?

Screenshot:

Code:

    def ui_main(self):
        with SinglePageWithDrawerLayout(self.server) as layout:
            layout.title.set_text("Trame View Window")

            with layout.toolbar:
                # toolbar components
                vuetify.VDivider(vertical=True, classes="mx-2")
                self.file_import()
                vuetify.VSpacer()
                vuetify.VDivider(vertical=True, classes="mx-2")
                self.standard_buttons()

            with layout.drawer as drawer:
                # drawer components
                drawer.width = 325
                self.pipeline_widget()
                vuetify.VDivider(classes="mb-2")
                self.surface_card()
                self.gridlines_card()
                self.slices_card()
                self.outline_card()
                print("this is the drawer", drawer)

            with layout.content:
                # content components
                with vuetify.VContainer(
                    fluid=True,
                    classes="pa-0 fill-height",
                ):
                    view = vtk.VtkRemoteLocalView(self.renderWindow, namespace="view", mode="local", interactive_ratio=1)
                    self.ctrl.view_update = view.update                      # capture view update method
                    self.ctrl.view_reset_camera = view.reset_camera   # capture view rest_camera method

    @change("file_upload")
    def file_uploaded(self, file_upload, **kwargs):

        if self.state.isLoading:
            print("it is loading right now")
            return

        self.renderer.RemoveAllViewProps()                      # only works in remote mode
        self.pipeline.ResetPipeline()
        self.ctrl.view_update()

        if file_upload is None:
            print("file_uploaded is none")
            pass                                               
        else:
            file = ClientFile(file_upload)
            file_name = file_upload.get("name")
            file_binary_content = file_upload.get("content")    # Bytes content
            output_file_path =  "./run-data/" + file_name       # Specify the desired file path (adjust as needed)
            with open(output_file_path, "wb") as output_file:
                output_file.write(file_binary_content)          # Write the file content to disk
            full_file_path = os.path.join(self.CURRENT_DIRECTORY, output_file_path)
            self.pipeline = pipeline(full_file_path, self.renderer, self.visibility_array)
            print(self.pipeline)
            self.pipeline.build_pipeline()                      # don't build pipeline until we have data
            self.ui_main()
            self.ctrl.view_update()
        self.ctrl.view_update()
        self.ctrl.view_reset_camera

    def pipeline_widget(self):
        trame.GitTree( 
            sources=(
                "pipeline",
                [
                    {"id": "1", "parent": "0", "visible": self.visibility_array[0], "name": "Surface"},
                    {"id": "2", "parent": "1", "visible": self.visibility_array[1], "name": "Gridlines"},
                    {"id": "3", "parent": "2", "visible": self.visibility_array[2], "name": "Slices"},
                    {"id": "4", "parent": "3", "visible": self.visibility_array[3], "name": "Outline"},
                ],
            ),
            actives_change=(self.actives_change, "[$event]"),
            visibility_change=(self.visibility_change, "[$event]"),
        )

    def ui_card(self, title, ui_name):
        ui_card_visibility_boolean = (self.state.active_ui is not None and self.state.active_ui == ui_name)
        with vuetify.VCard(v_show=f"'{ui_card_visibility_boolean}'"):
            vuetify.VCardTitle(
                title,
                classes="grey lighten-1 py-1 grey--text text--darken-3",
                style="user-select: none; cursor: pointer",
                hide_details=True,
                dense=True
            )
            content = vuetify.VCardText(classes="py-2")
        return content

Thank you for your continued support :)

[jourdain]

What are those methods doing?

• self.pipeline.ResetPipeline()
• self.pipeline.build_pipeline()

[jourdain]

The height of 0 might be because the pipeline state is empty.

[wyattnapier]

I had done width=325 and it still showed in the DOM that the GitTree element was still 0x0, so I think the pipeline state being empty would make sense. Do you have any suggestions for addressing that?

[jourdain]

fill it with something self.server.state.pipeline = [...]

[wyattnapier]

I tried to set self.server.state.pipeline = [ {"id": "1", "parent": "0", "visible": self.visibility_array[0], "name": "Surface"}, {"id": "2", "parent": "1", "visible": self.visibility_array[1], "name": "Gridlines"}, {"id": "3", "parent": "2", "visible": self.visibility_array[2], "name": "Slices"}, {"id": "4", "parent": "3", "visible": self.visibility_array[3], "name": "Outline"}, ] both before and after the trame.GitTree() within my pipeline_widget() function, and neither changed the size of the GitTree component in the DOM from 0x0, although when I printed self.server.state.pipeline it now has content. I also tried setting self.server.state.pipeline to just one of the elements of the array and renaming it to gittree_pipeline to avoid overloading the pipeline name, and neither worked.

[jourdain]

You are in a great position to develop your debug skills. Right now I can't help you more unless I have access to the entire code and do the debugging instead of you.