Solara•2y ago

Hi, is it possible to share a component variable to another component, except using global variables

Hi, is it possible to share a component variable to another component, except using global variables. Can the parent create the variable and let both childs update/react on changes? View: parent with two components. One component is full of filters. Other component is graphs with DataFrame from parent, filtered by sibling component.

15 Replies

MaartenBreddels•2y ago

Good question, this should work:

    with solara.Column(align="center"):
        solara.Markdown(markdown)

    with solara.Column(align="center"):
        solara.Markdown(markdown)

See also https://solara.dev/api/column

MaartenBreddels•2y ago

@hlondogard yes, you can pass variables down child components for instance https://solara.dev/docs/fundamentals/state-management

MaartenBreddels•2y ago

@solara.component
def ReusableComponent():
    color = solara.use_reactive("red")  # another possibility
    solara.Select(label="Color",values=["red", "green", "blue", "orange"],
                  value=color)
    solara.Markdown("### Solara is awesome", style={"color": color.value})

@solara.component
def ReusableComponent():
    color = solara.use_reactive("red")  # another possibility
    solara.Select(label="Color",values=["red", "green", "blue", "orange"],
                  value=color)
    solara.Markdown("### Solara is awesome", style={"color": color.value})

In this case, we pass a reactive variable down to the Select component, so the child component can also mutate it

hlondogardOP•2y ago

Great that it's possible to mutate it downstream and use it sideways. Is there any possibility that a component return variables? That's reactive. That is my filter component can define filters with variables and return them to parent?

MaartenBreddels•2y ago

not return, because components are 'lazy', you don't call its function directly but, the child component can receive a reactive variable, and assign a tuple of filters each time btw, it is lazy, because it tries to not execute your functions if it does not have to

JoshuaSundance•2y ago

Added a few more pieces to the solara components demo. Now that it's more than just a map explorer, I need to update the README, get buy-in from coworkers since it's an org repo, and then make it public 🙂 apps: PII: identify / remove PII from text using Microsoft Presidio map: reads esri mapservers / featureservers and displays the data in leafmap and in dataframes chat: chatgpt clone using user-supplied openai api key disregard Map label in top left. only noticed after posting a screenshot that I didn't change it after copy and pasting a route lol

giswqs•2y ago

Thank you for the example. It works like a charm!

JoshuaSundance•2y ago

I tried using create_task in my app and the reactive values got updated but it never re-rendered. I tried a minimal example in Jupyter and it worked as expected, re-rendering. I think there may be some additional complexity making the map app not rerender. I've tried changing my state management approach, and I will continue messing with it, but for right now I'm still using asyncio.run

JoshuaSundance•2y ago

Update: running the code below causes re-render in Jupyter, but not when started using solara run

import asyncio
from typing import cast

import solara


reactive_var = solara.reactive(cast(str, None))


async def async_function() -> str:
    await asyncio.sleep(1)
    return 'lol'


@solara.component
def Page():
    with solara.Div() as main:
        async def update():
            result = await async_function()
            reactive_var.set(result)

        def on_click():
            asyncio.create_task(update())

        solara.Button("Click to run async function", on_click=on_click)

        if reactive_var.value is not None:
            solara.Markdown(reactive_var.value)

    return main

import asyncio
from typing import cast

import solara


reactive_var = solara.reactive(cast(str, None))


async def async_function() -> str:
    await asyncio.sleep(1)
    return 'lol'


@solara.component
def Page():
    with solara.Div() as main:
        async def update():
            result = await async_function()
            reactive_var.set(result)

        def on_click():
            asyncio.create_task(update())

        solara.Button("Click to run async function", on_click=on_click)

        if reactive_var.value is not None:
            solara.Markdown(reactive_var.value)

    return main

giswqs•2y ago

Hope Solara can be adopated by Hugging Face as a Space tempalte soon. https://huggingface.co/blog/panel-on-hugging-face

Panel on Hugging Face

MaartenBreddels•2y ago

Thank a lot for isolating the issue, I reproduced it, and will now work on fixing it, thanks you! @giswqs yeah, i want to start soon by making a template for solara I was thinking of a template that contains a few apps, it could be with a map from @giswqs and maybe @joshuasundance has a particular example he'd like to see in the huggingface template

JoshuaSundance•2y ago

The PII analysis is neat, useful, and does not require any api keys. We could make it prettier and parameterize things

JoshuaSundance•2y ago

For all you solara users wanting to deploy easily, here's a github actions yaml that builds a dockerfile, does a snyk security scan on it, adds the report to the repo, and deploys to huggingface space and docker hub. It uses repo secrets for things like api keys and passwords. It's meant to get around main branch protection to add the security report, and the fetch-depth was seemingly necessary to successfully push to the space. You should also do the 10MB file size limit pull request check as described here: https://huggingface.co/docs/hub/spaces-github-actions continue-on-error: true lets you push even if it's unsafe code because langchain produces high severity security warnings 😢 You can comment out any sections that are not applicable to your deployment wishes

Managing Spaces with Github Actions

message.yaml

JoshuaSundance•2y ago

oh and here's a Dockerfile

message.txt

giswqs•2y ago

Let me know if I can be of any help.

Gaming

Programming

Hi, is it possible to share a component variable to another component, except using global variables

Did you find this page helpful?