S
Solara2mo ago
Alex

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
MaartenBreddels2mo ago
https://solara.dev/apps/multipage shows a multipage app with a shared state (in __init__.py) does that help you?
Alex
Alex5w 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
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?