Solara•4mo ago

Common object across pages

I was wondering, what is a good way to share a common object across multiple pages, organized in separate files. I would like to initialize a heavy object once, then use in several pages within the application. If I keep pages (solara components) in a single file, that works fine. However, I would like to keep things tidy and organize each page in a separate file. I can't quite figure out how to access the common object. Here is what I mean:

# application.py ###################
from time import sleep
from typing import Any, Dict, List
import solara

class Heavy:
    def __init__(self, data: Any) -> None:
        print('Initializing takes time...')
        sleep(5)
        self._data = data

    @property
    def data(self):
        return self._data


# Initialize expensive object
heavy = solara.reactive(Heavy({'a': 1, 'b': 2}))

from overview import Overview
from details import Details

routes = [
    solara.Route(path="/", component=Overview),
    solara.Route(path="details", component=Details),
]

# overview.py ###################
@solara.component
def Overview():
    with solara.Column():
        solara.Markdown("This is the Overview page")
        for data_key in heavy.value.data.keys():
            with solara.Link(f"details/{data_key}"):
                solara.Button(f"Key: {data_key}")

# details.py ###################
@solara.component
def Details():
    selected_data_key = 'a'
    with solara.Column():
        solara.Markdown("This is the Details page")
        for value in heavy.value.data[selected_data_key]:
            solara.Markdown(f"Value: {value}")

# application.py ###################
from time import sleep
from typing import Any, Dict, List
import solara

class Heavy:
    def __init__(self, data: Any) -> None:
        print('Initializing takes time...')
        sleep(5)
        self._data = data

    @property
    def data(self):
        return self._data


# Initialize expensive object
heavy = solara.reactive(Heavy({'a': 1, 'b': 2}))

from overview import Overview
from details import Details

routes = [
    solara.Route(path="/", component=Overview),
    solara.Route(path="details", component=Details),
]

# overview.py ###################
@solara.component
def Overview():
    with solara.Column():
        solara.Markdown("This is the Overview page")
        for data_key in heavy.value.data.keys():
            with solara.Link(f"details/{data_key}"):
                solara.Button(f"Key: {data_key}")

# details.py ###################
@solara.component
def Details():
    selected_data_key = 'a'
    with solara.Column():
        solara.Markdown("This is the Details page")
        for value in heavy.value.data[selected_data_key]:
            solara.Markdown(f"Value: {value}")

3 Replies

MaartenBreddels•4mo ago

https://solara.dev/apps/multipage shows a multipage app with a shared state (in __init__.py) does that help you?

Alex•4mo ago

Thanks for the hint. However, I don't think it is quite it. You see, the multipage example declares a reactive object and consumes it within the same file (in a Shared component). What I am after is having a global app-level object and consuming it in different pages. Example: App -> List page -> Details page App initialises the data List shows basic properties Details show 1 record in full detail. I can't figure out how to reference the app-level object without causing a circular reference: App creates instance + imports Page2; Page2 needs to import data object from App

MaartenBreddels•4mo ago

I would just create a module (say store.py) put the reactive variables in that module and import it from the other modules that define the components. Does that make sense to you?

Gaming

Programming

Common object across pages