feat(sidebar): ui.layout_sidebar() internally uses x.ui.layout_sidebar()

CHANGELOG.md

@@ -18,6 +18,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * Added sidebar methods into `shiny.experimental.ui`. `shiny.experimental.ui.layout_sidebar()` does not require `ui.panel_main()` and `ui.panel_sidebar()`. These two methods have been deprecated. `x.ui.page_navbar()`, `x.ui.navset_bar()`, `x.navset_tab_card()`, and `x.navset.pill_card()` added `sidebar=` support. (#481)
 
+* feat(sidebar): `ui.layout_sidebar()` internally uses `x.ui.layout_sidebar()`, enabling filling layout features. #568
+
 
 ### Bug fixes
 

examples/cpuinfo/app.py

@@ -13,9 +13,7 @@
 import numpy as np
 import pandas as pd
 
-from shiny import App, Inputs, Outputs, Session
-from shiny import experimental as x
-from shiny import reactive, render, ui
+from shiny import App, Inputs, Outputs, Session, reactive, render, ui
 
 # The agg matplotlib backend seems to be a little more efficient than the default when
 # running on macOS, and also gives more consistent results across operating systems
@@ -55,35 +53,8 @@
         % f"{ncpu*4}em"
     ),
     ui.h3("CPU Usage %", class_="mt-2"),
-    x.ui.layout_sidebar(
-        ui.div(
-            {"class": "card mb-3"},
-            ui.div(
-                {"class": "card-body"},
-                ui.h5({"class": "card-title mt-0"}, "Graphs"),
-                ui.output_plot("plot", height=f"{ncpu * 40}px"),
-            ),
-            ui.div(
-                {"class": "card-footer"},
-                ui.input_numeric("sample_count", "Number of samples per graph", 50),
-            ),
-        ),
-        ui.div(
-            {"class": "card"},
-            ui.div(
-                {"class": "card-body"},
-                ui.h5({"class": "card-title m-0"}, "Heatmap"),
-            ),
-            ui.div(
-                {"class": "card-body overflow-auto pt-0"},
-                ui.output_table("table"),
-            ),
-            ui.div(
-                {"class": "card-footer"},
-                ui.input_numeric("table_rows", "Rows to display", 5),
-            ),
-        ),
-        sidebar=x.ui.sidebar(
+    ui.layout_sidebar(
+        ui.panel_sidebar(
             ui.input_select(
                 "cmap",
                 "Colormap",
@@ -98,6 +69,35 @@
             ui.input_switch("hold", "Freeze output", value=False),
             class_="mb-3",
         ),
+        ui.panel_main(
+            ui.div(
+                {"class": "card mb-3"},
+                ui.div(
+                    {"class": "card-body"},
+                    ui.h5({"class": "card-title mt-0"}, "Graphs"),
+                    ui.output_plot("plot", height=f"{ncpu * 40}px"),
+                ),
+                ui.div(
+                    {"class": "card-footer"},
+                    ui.input_numeric("sample_count", "Number of samples per graph", 50),
+                ),
+            ),
+            ui.div(
+                {"class": "card"},
+                ui.div(
+                    {"class": "card-body"},
+                    ui.h5({"class": "card-title m-0"}, "Heatmap"),
+                ),
+                ui.div(
+                    {"class": "card-body overflow-auto pt-0"},
+                    ui.output_table("table"),
+                ),
+                ui.div(
+                    {"class": "card-footer"},
+                    ui.input_numeric("table_rows", "Rows to display", 5),
+                ),
+            ),
+        ),
     ),
 )
 

examples/penguins/app.py

@@ -6,7 +6,8 @@
 
 import pandas as pd
 import seaborn as sns
-import shinyswatch
+
+# import shinyswatch
 from colors import bg_palette, palette
 
 import shiny.experimental as x
@@ -21,31 +22,37 @@
 species: List[str] = df["Species"].unique().tolist()
 species.sort()
 
-app_ui = x.ui.page_sidebar(
-    shinyswatch.theme.pulse(),
-    ui.output_ui("value_boxes"),
-    x.ui.output_plot("scatter", fill=True),
-    sidebar=x.ui.sidebar(
-        # Artwork by @allison_horst
-        ui.tags.img(src="palmerpenguins.png", width="80%", class_="mt-0 mb-2 mx-auto"),
-        ui.input_selectize(
-            "xvar",
-            "X variable",
-            numeric_cols,
-            selected="Bill Length (mm)",
-        ),
-        ui.input_selectize(
-            "yvar",
-            "Y variable",
-            numeric_cols,
-            selected="Bill Depth (mm)",
+app_ui = ui.page_fluid(
+    # shinyswatch.theme.pulse(), # Uncomment when shinyswatch it updated
+    ui.layout_sidebar(
+        ui.panel_sidebar(
+            # Artwork by @allison_horst
+            ui.tags.img(
+                src="palmerpenguins.png", width="80%", class_="mt-0 mb-2 mx-auto"
+            ),
+            ui.input_selectize(
+                "xvar",
+                "X variable",
+                numeric_cols,
+                selected="Bill Length (mm)",
+            ),
+            ui.input_selectize(
+                "yvar",
+                "Y variable",
+                numeric_cols,
+                selected="Bill Depth (mm)",
+            ),
+            ui.input_checkbox_group(
+                "species", "Filter by species", species, selected=species
+            ),
+            ui.hr(),
+            ui.input_switch("by_species", "Show species", value=True),
+            ui.input_switch("show_margins", "Show marginal plots", value=True),
         ),
-        ui.input_checkbox_group(
-            "species", "Filter by species", species, selected=species
+        ui.panel_main(
+            ui.output_ui("value_boxes"),
+            x.ui.output_plot("scatter", fill=True),
         ),
-        ui.hr(),
-        ui.input_switch("by_species", "Show species", value=True),
-        ui.input_switch("show_margins", "Show marginal plots", value=True),
     ),
 )
 
@@ -89,10 +96,11 @@ def penguin_value_box(title: str, count: int, bgcol: str, showcase_img: str):
                 title,
                 count,
                 {"class": "pt-1 pb-0"},
-                showcase=ui.tags.img(
-                    x.ui.as_fill_item(),
-                    {"style": "object-fit:contain;"},
-                    src=showcase_img,
+                showcase=x.ui.as_fill_item(
+                    ui.tags.img(
+                        {"style": "object-fit:contain;"},
+                        src=showcase_img,
+                    )
                 ),
                 theme_color=None,
                 style=f"background-color: {bgcol};",

scripts/htmlDependencies.R

@@ -4,9 +4,8 @@ versions <- list()
 
 # Use local lib path for installing packages so we don't pollute the user's library
 withr::local_temp_libpaths()
-
 pak::pkg_install(c("rstudio/bslib@main", "rstudio/shiny@main", "rstudio/htmltools@main"))
-# pak::pkg_install(c("cran::bslib", "cran::shiny"))
+# pak::pkg_install(c("cran::bslib", "cran::shiny", "cran::htmltools"))
 
 versions["shiny_html_deps"] <- as.character(packageVersion("shiny"))
 versions["bslib"] <- as.character(packageVersion("bslib"))
@@ -40,12 +39,17 @@ library(bslib)
 shiny_path <- fs::path(getwd(), "shiny")
 www <- fs::path(shiny_path, "www")
 www_shared <- fs::path(www, "shared")
+
 x_www <- fs::path(shiny_path, "experimental", "www")
-x_www_components <- fs::path(x_www, "bslib", "components")
+x_www_bslib_components <- fs::path(x_www, "bslib", "components")
+x_www_htmltools_fill <- fs::path(x_www, "htmltools", "fill")
+main_x_www <- fs::path(www_shared, "_x")
 
 # Copy over shiny's www/shared directory
-copy_from_pkg <- function(pkg_name, pkg_dir, local_dir) {
-  if (fs::dir_exists(local_dir)) fs::dir_delete(local_dir)
+copy_from_pkg <- function(pkg_name, pkg_dir, local_dir, version_dir = fs::path_dir(local_dir)) {
+  # `version_dir` is "equal to" or "contains" `local_dir`
+  stopifnot(fs::path_has_parent(local_dir, version_dir))
+  if (fs::dir_exists(version_dir)) fs::dir_delete(version_dir)
   fs::dir_create(local_dir)
 
   stopifnot(local_dir != ".")
@@ -64,7 +68,7 @@ copy_from_pkg <- function(pkg_name, pkg_dir, local_dir) {
   }
   # Save pkg version info
   write_json(
-    fs::path(local_dir, "_versions.json"),
+    fs::path(version_dir, "_version.json"),
     list(
       package = pkg_name,
       version = pkg_source_version(pkg_name)
@@ -74,13 +78,13 @@ copy_from_pkg <- function(pkg_name, pkg_dir, local_dir) {
 
 
 # Copy over bslib's components directory
-copy_from_pkg("bslib", "components", x_www_components)
+copy_from_pkg("bslib", "components", x_www_bslib_components)
 # Remove unused Sass files
 fs::file_delete(
-  fs::dir_ls(x_www_components, type = "file", regexp = "\\.scss$")
+  fs::dir_ls(x_www_bslib_components, type = "file", regexp = "\\.scss$")
 )
 # Remove unused tag require
-fs::file_delete(fs::path(x_www_components, "tag-require.js"))
+fs::file_delete(fs::path(x_www_bslib_components, "tag-require.js"))
 
 # Copy over htmltools's fill directory
 copy_from_pkg("htmltools", "fill", fs::path(x_www, "htmltools", "fill"))
@@ -89,7 +93,7 @@ copy_from_pkg("htmltools", "fill", fs::path(x_www, "htmltools", "fill"))
 
 
 # Copy over shiny's www/shared directory
-copy_from_pkg("shiny", "www/shared", www_shared)
+copy_from_pkg("shiny", "www/shared", www_shared, www_shared)
 
 # Don't need legacy (hopefully)
 fs::dir_delete(fs::path(www_shared, "legacy"))
@@ -159,3 +163,27 @@ cat(
   version_all,
   sep = ""
 )
+
+
+
+# ------------------------------------------------------------------------------
+# Copy x assets to shiny main_x assets
+
+if (fs::dir_exists(main_x_www)) fs::dir_delete(main_x_www)
+
+main_x_bslib_components <- fs::path(main_x_www, "bslib")
+main_x_htmltools_fill <- fs::path(main_x_www, "htmltools")
+fs::dir_create(c(main_x_bslib_components, main_x_htmltools_fill))
+
+# Copy bslib
+fs::dir_copy(x_www_bslib_components, main_x_bslib_components)
+# Copy htmltools
+fs::dir_copy(x_www_htmltools_fill, main_x_htmltools_fill)
+# Remove unused files
+fs::file_delete(
+  fs::dir_ls(
+    fs::path(main_x_bslib_components, "components"),
+    regexp="(_version|sidebar)",
+    invert = TRUE
+  )
+)

shiny/examples/input_file/app.py

@@ -1,14 +1,16 @@
 import pandas as pd
 
 from shiny import *
-from shiny import experimental as x
 from shiny.types import FileInfo
 
-app_ui = x.ui.page_sidebar(
-    ui.output_ui("contents"),
-    sidebar=x.ui.sidebar(
-        ui.input_file("file1", "Choose CSV File", accept=[".csv"], multiple=False),
-        ui.input_checkbox("header", "Header", True),
+app_ui = ui.page_fluid(
+    ui.layout_sidebar(
+        ui.panel_sidebar(
+            ui.input_file("file1", "Choose CSV File", accept=[".csv"], multiple=False),
+            ui.input_checkbox("header", "Header", True),
+            width=5,
+        ),
+        ui.panel_main(ui.output_ui("contents")),
     ),
 )
 

shiny/examples/layout_sidebar/app.py

@@ -2,12 +2,11 @@
 import numpy as np
 
 from shiny import *
-from shiny import experimental as x
 
 app_ui = ui.page_fluid(
-    x.ui.layout_sidebar(
-        ui.output_plot("plot"),
-        sidebar=x.ui.sidebar(ui.input_slider("n", "N", min=0, max=100, value=20)),
+    ui.layout_sidebar(
+        ui.panel_sidebar(ui.input_slider("n", "N", min=0, max=100, value=20)),
+        ui.panel_main(ui.output_plot("plot")),
     ),
 )
 

shiny/examples/navset_hidden/app.py

@@ -1,18 +1,21 @@
 from shiny import *
-from shiny import experimental as x
 
-app_ui = x.ui.page_sidebar(
-    ui.navset_hidden(
-        ui.nav(None, "Panel 1 content", value="panel1"),
-        ui.nav(None, "Panel 2 content", value="panel2"),
-        ui.nav(None, "Panel 3 content", value="panel3"),
-        id="hidden_tabs",
-    ),
-    sidebar=x.ui.sidebar(
-        ui.input_radio_buttons(
-            "controller", "Controller", ["1", "2", "3"], selected="1"
-        )
-    ),
+app_ui = ui.page_fluid(
+    ui.layout_sidebar(
+        ui.panel_sidebar(
+            ui.input_radio_buttons(
+                "controller", "Controller", ["1", "2", "3"], selected="1"
+            )
+        ),
+        ui.panel_main(
+            ui.navset_hidden(
+                ui.nav(None, "Panel 1 content", value="panel1"),
+                ui.nav(None, "Panel 2 content", value="panel2"),
+                ui.nav(None, "Panel 3 content", value="panel3"),
+                id="hidden_tabs",
+            ),
+        ),
+    )
 )
 
 

shiny/examples/page_fixed/app.py

@@ -2,12 +2,11 @@
 import numpy as np
 
 from shiny import *
-from shiny import experimental as x
 
 app_ui = ui.page_fixed(
-    x.ui.layout_sidebar(
-        ui.output_plot("plot"),
-        sidebar=x.ui.sidebar(ui.input_slider("n", "N", min=0, max=100, value=20)),
+    ui.layout_sidebar(
+        ui.panel_sidebar(ui.input_slider("n", "N", min=0, max=100, value=20)),
+        ui.panel_main(ui.output_plot("plot")),
     ),
 )
 

shiny/examples/page_fluid/app.py

@@ -2,12 +2,11 @@
 import numpy as np
 
 from shiny import *
-from shiny import experimental as x
 
 app_ui = ui.page_fluid(
-    x.ui.layout_sidebar(
-        ui.output_plot("plot"),
-        sidebar=x.ui.sidebar(ui.input_slider("n", "N", min=0, max=100, value=20)),
+    ui.layout_sidebar(
+        ui.panel_sidebar(ui.input_slider("n", "N", min=0, max=100, value=20)),
+        ui.panel_main(ui.output_plot("plot")),
     ),
 )