diff --git a/vizro-core/examples/default/app.py b/vizro-core/examples/default/app.py index f2b2f0541..ccbdf1dea 100644 --- a/vizro-core/examples/default/app.py +++ b/vizro-core/examples/default/app.py @@ -19,7 +19,14 @@ components=[ vm.Graph( id="graph-1", - figure=px.line(df_gapminder, x="year", y="lifeExp", color="continent", line_group="country", hover_name="country"), + figure=px.line( + df_gapminder, + x="year", + y="lifeExp", + color="continent", + line_group="country", + hover_name="country", + ), ), vm.Graph( id="graph-2", @@ -36,15 +43,16 @@ id="graph-3", figure=px.scatter( df_gapminder.query("year==2007"), - x="gdpPercap", y="lifeExp", size="pop", color="continent", + x="gdpPercap", + y="lifeExp", + size="pop", + color="continent", ), ), vm.Button( text="Export data", actions=[ - vm.Action( - function=export_data() - ), + vm.Action(function=export_data()), ], ), ], diff --git a/vizro-core/src/scratch.md b/vizro-core/src/scratch.md index b77c0ddc5..ba5cac4e6 100644 --- a/vizro-core/src/scratch.md +++ b/vizro-core/src/scratch.md @@ -1,17 +1,14 @@ # To think about 1. Shall we leverage callbacks or children of Tab? (Method 1 vs. 2) https://dash.plotly.com/dash-core-components/tab - -> probably children of Tabs as otherwise model build will be moved to callback -2. Tab and Page model look very similar in configurations (essentially Tabs are sub-pages within a Page) - should we do configurations differently? -3. Should we have Tabs and Tab as separate models? In Dash they are treated as separate models as well, but it kind of adds another layer of hierarchy -4. Shall we define components within tabs or globally on page and then reference as ID in tabs? -5. How should the filter/parameter flow look like? - 1. If no targets specified -> apply to all tabs or only visible tabs? - 2. If targets specified -> should enable ability to target specific figure in tab as normal - 3. If filters only affect a tab - should it still live on the left-side or be moved to the tab? Where should it go? -6. Still to fix: - - CSS - - Themes do not update on chart currently -> caused by the fact that theme_update in charts live in Page - should optimally be refactored out and live in the components + -> Start off with children of Tab and see when we hit performance issues +2. Shall we use dcc or dbc components? + -> If we go for the "children of tab" method then dcc components are preferred, otherwise there is bug using the dbc components that seems to be solved by using the callback method +3. Tab and Container/Subpage model concepts look very similar in configurations - should we create a Tab model as a stand-alone of abstract to a higher level SubPage model? +4. Still to fix: + - Fix CSS if using dcc.components + - theme_update, on_page_load for charts --> chart do not update yet + - If you apply parameter, some charts disappear? ``` class Page(VizroBaseModel): @@ -23,17 +20,14 @@ class Page(VizroBaseModel): path -class Tab(VizroBaseModel): - components: List[TabComponentType] +class Tab/SubPage(VizroBaseModel): + components: List[ComponentType] label: str = Field(..., description="Tab Lable to be displayed.") title: Optional[str] # do we need this one? - # layout: Optional[Layout] - # controls: List[ControlType] = [] -> should be done implicitly without configuring? -> tendency to remove it - # actions: List[ActionsChain] = [] -> do we even need to make this configurable? -> tendency to remove it + layout: Optional[Layout] class Tabs(VizroBaseModel): type: Literal["tabs"] = "tabs" - title: str tabs: List[Tab] = [] ``` diff --git a/vizro-core/src/vizro/models/_components/_tab.py b/vizro-core/src/vizro/models/_components/_tab.py index 60eeadb89..762d8c621 100644 --- a/vizro-core/src/vizro/models/_components/_tab.py +++ b/vizro-core/src/vizro/models/_components/_tab.py @@ -12,7 +12,7 @@ class Tab(VizroBaseModel): components: List[ComponentType] - label: str = Field(..., description="Tab Lable to be displayed.") + label: str = Field(..., description="Tab label to be displayed.") title: Optional[str] # do we need this one? # layout: Optional[Layout]