Best way to loop a download or image module

[michaelsong-vbu]

Hello,

I am learning about modules and found that looping an input component is relatively straightforward using examples. However, looping output components like downloads or images can be tricky. I would like to know the best ways to loop such components.

from shiny import App, module, render, ui
import os

num_extra_rows = 5
extra_ids = [f"row_{i}" for i in range(1, 2 + num_extra_rows)]

@module.ui
def row_ui(row_id):
  return ui.layout_columns(
      ui.input_text("text_in", f'Enter text {row_id}'),
      ui.output_text("text_out"),
      ui.download_button("download_data", "Download CSV")
  )

@module.server
def row_server(input, output, session, row_id):
  input_id = f"text_in_{row_id}"
  
    @output
    @render.text
    def text_out():
        return f'You entered "{input.text_in()}"'

    @output
    @render.download(
        filename=lambda: f"report.csv"
    )
    def download_data():
        path = os.path.join(os.path.dirname(__file__), "../image/report/", f"report{row_id}.csv")
        return path
  
app_ui = ui.page_fluid(
  [row_ui(x, x) for x in extra_ids]
)

def server(input, output, session):
  [row_server(x, x) for x in extra_ids]

app = App(app_ui, server)

For example, I want to generate six rows as defined in extra_ids. The input_text and output_text are auto-binded using {row_id}. However, the download_data function always downloads the report with the last row_id, i.e ., reportrow_6.csv. Here is a screenshot:

Every “Download CSV” button outputs reportrow_6.csv instead of the intended reportrow_1.csv, reportrow_2.csv, etc.

I have also tried this for @render.images and encountered the same issue: the last image in the loop is shown for every entry, even though I specify the dynamic {name} like this:

ImgData = {"src": str(dir / "./image/upload_image" / {name}), "width": "100px"}

I might be doing something wrong, but I have not managed to implement dynamic looping for download and image components successfully. In Shiny R, I can use lapply for this purpose with ease. However, I am deeply invested in using Shiny for Python.

Thank you very much in advance for any assistance with this issue.

[nsiicm0]

You are facing the exact issue that I am describing here: #1724 Coincidentally posted it yesterday as well.

[michaelsong-vbu]

You are facing the exact issue that I am describing here: #1724 Coincidentally posted it yesterday as well.

@nsiicm0 Have you figured out a way to handle multiple downloads without creating a download function for each button? Thanks!

[nsiicm0]

Hi @michaelsong-vbu

you would need to create a module that gives you the button. You can then dynamically call the module.
I just spun up a quick and dirty solution like so:

app.py

import shiny
from shiny import App, reactive, render, ui
from starlette.applications import Starlette
from starlette.routing import Mount

from download import dwnld_ui, dwnld_server

version = shiny.__version__

app_ui = ui.page_navbar(  
    ui.nav_panel("Home", 
        ui.input_slider('count', "Number of buttons:", min=1, max=10, value=5),
        ui.output_ui('btnui')
    ), 
    title=f"Download Loop - Shiny Version {version}",  
    id="page"
)  

def server(input, output, session):
    ns = 'main' if len(session.ns) == 0 else session.ns
    @reactive.effect
    @reactive.event(input.count)
    def generate_servers():
        for i in range(input.count()):
            dwnld_server(f'btn_{i}', parent_ns=ns, btn_id=str(i))
    
    @render.ui
    def btnui():
        uis = []
        for i in range(input.count()):
            uis.append(dwnld_ui(f'btn_{i}'))
        return ui.TagList(uis)
    

    
shiny_app = App(app_ui, server, debug=True)
shiny_app.sanitize_errors = False

routes = [
    Mount('/', app=shiny_app)
]

app = Starlette(routes=routes, debug=True)

download.py

from shiny import module, ui, render
from shiny._namespaces import ResolvedId

@module.ui
def dwnld_ui():
    return ui.output_ui('dwnld')


@module.server
def dwnld_server(input, output, session, parent_ns, btn_id):
    
    @render.ui
    def dwnld():
        return ui.download_button(ResolvedId(f'{parent_ns}-dwnldbtn{btn_id}'), f'Download {btn_id}')

    @session.download(id=ResolvedId(f'{parent_ns}-dwnldbtn{btn_id}'), filename=lambda: f"test_{btn_id}.txt")
    def btn():
        yield f'It works {btn_id}'

Note: The example I am providing is done on Shiny v1.1.0 and not the most recent version. Hence, I have to do the whole ResolvedId shenanigan, which is not necessary on newer versions (thanks to the PR I made in #1732).

[michaelsong-vbu]

Hi @nsiicm0

Thank you very much for the detailed answer! really appreciate your tutorial and yeah, the resolving id thing is just not straightforward at all.

Will also take a look at the newer version. Thanks again!

[gadenbuie]

Thanks for the answer and example @nsiicm0!

@michaelsong-vbu As of v1.2.0, there's no need to do anything with the IDs, thanks to @nsiicm0's PR! Here's an example without that part on shinylive.io

[julibeg]

I just ran into this issue with my express app.

@gadenbuie @nsiicm0 thanks for your solutions. However, they appear to only work for core. Is there any way to do this with express? @render.download doesn't accept an id and session.download() doesn't work in express (at least not in my trials).