Conditionally Rendering a View Based on FileS Upload

[staceywhitmore-inl]

I am trying to conditionally render a view based on what the the files selected by the client from the <VFileInput/> Element. So that it renders with just a basic SinglePageLayout and the FileInput Element initially until the user selects the files they would like to render.

I have verified that on the back end the temp files are, in fact, being created from the files selected from the browser, copied to the temp directory and passed to the appropriate methods.

You'll notice in my comment that if one line is commented out while the other is uncommented, the app works just fine. I have printed each variable in my code snippet to the console and verified that their values are essentially the same in both the working an non-working conditions. (By "non-working" I mean the VInputFile icon is still there etc., it's just that the center of the page remains white and nothing is rendered.) I even verified the the print(debug) statement at the end prints out the same Vuetify elements in both working and non-working conditions.

 <VMain>
     <VFileInput v-model="file_exchange" multiple />
           <VContainer class="fill-height pa-0" fluid>
             <vtk-remote-view :ref="(el) => trame.refs['trame__remote_view_2'] = el" :viewId="trame__remote_view_2Id" interactiveRatio="1" />
  </VContainer>
</VMain>

And when I inspect the center element(s) in the Chrome dev tools, I see a <vtk-remote-view viewid="378" interactiveratio="1"></vtk-remote-view> element under the elements tab even though there is clearly nothing there when I look at the page in the browser.

Does anyone know why this might not be displaying anything or perhaps a better way to go about what I am trying to do here?
I've pasted some code below. [Note: I realize this code isn't the most clean solution; however, while I'm grasping-at-straws mode I test/try different solutions until I find something that works and then I clean it up later. (E.g., rather than chaining I will break things apart so they can be printed to console.) This code snippet is a result of said process.]

import os
from pathlib import Path
import paraview.web.venv
from trame.app import get_server
from trame.ui.vuetify2 import SinglePageLayout
from trame.widgets import vuetify2 as v3, paraview as pv_widgets
from trame.decorators import TrameApp, change
from trame.app.file_upload import ClientFile
from paraview import simple, servermanager
from paraview.vtk.numpy_interface import dataset_adapter as dsa
import tempfile
import PIL.Image as Image
from io import BytesIO

@TrameApp()
class App:
    def __init__(self, server=None):
        self.server = get_server(server, client_type="vue2")
        self._layout = False
        self._init_app(None)
        # self._init_app("D:\Working\File\Path") # Uncomment this line and comment out the one above and it will work just fine.
        self._build_ui()

    def _init_app(self, file_path):
        # Create an array of all *.tiff filenames in directory
        fileNamesArr = []
        if file_path is None:
            self.view = None
            self._layout = False
            return
        else:
            self._layout = True
            self.state.PATH = file_path

        for dirname, dirnames, filenames in os.walk(f"{self.state.PATH}"):
            # path to all subdirectories first.
            for subdirname in dirnames:
                fileNamesArr.append(os.path.join(dirname, subdirname) )
            # print path to all filenames
            for filename in filenames:
                fileNamesArr.append(os.path.join(dirname, filename) )

        self.source = simple.TIFFSeriesReader(FileNames=fileNamesArr,)
        self.source.UpdatePipeline()
        ds = servermanager.Fetch(self.source)
        self.extent = ds.GetExtent()
        self.extract = simple.ExtractSubset(
            Input=self.source,
            VOI=list(self.extent)
        )
        self.representation = simple.Show(self.extract)
        self.representation.SetRepresentationType("Volume")
        simple.SetActiveSource(self.source)
        self.view = simple.Render()

    @property
    def state(self):
        return self.server.state

    @property
    def ctrl(self):
        return self.server.controller

    @change("file_exchange")
    def file_uploaded(self, file_exchange, **kwargs):
        if file_exchange is None:
            return

        new_path = ""
        secure_temp_dir = tempfile.mkdtemp(prefix="__MY_", suffix="_APP__")
        for file_dict in file_exchange:
            file = ClientFile(file_dict)
            im = Image.open(BytesIO(file.content))
            new_path = f'{secure_temp_dir}'
            new_file_path =  f'{secure_temp_dir}\\{file.name}'
            im.save(new_file_path)
        self._init_app(new_path)
        self._build_ui()

    def _build_ui(self):
            with SinglePageLayout(self.server, full_height=True) as layout:
                with layout.content as debug:
                    v3.VFileInput( v_model=("file_exchange", None), multiple=True)
                    if self._layout is True: # better way?
                        with v3.VContainer(fluid=True,classes="fill-height pa-0", ):
                            with pv_widgets.VtkRemoteView(self.view,interactive_ratio=1,) as view:
                                self.ctrl.view_update = view.update
                                self.ctrl.view_reset_camera = view.reset_camera

            print(debug)

def main():
    app = App()
    app.server.start()

if __name__ == "__main__":
    main()

[jourdain]

I'm pretty sure the container has a 0px height just because you've added the fileinput before it. Instead you could put the file loader in a dialog as an overlay.

[staceywhitmore-inl]

That makes sense. I'll check the height in the dev tools and look into putting that into a dialog. Thanks!

[jourdain]

Calling pv_widgets.initialize(self.server) in constructor was needed since the widget was not used at startup.

[staceywhitmore-inl]

Yes, that fixed it. Thanks, @jourdain