diff --git a/WHAT-WE-LEARNED.md b/WHAT-WE-LEARNED.md index 9045739..cbddfaa 100644 --- a/WHAT-WE-LEARNED.md +++ b/WHAT-WE-LEARNED.md @@ -62,3 +62,7 @@ I've had to tweak the CSS a few times: The different flavors of "Shiny" are a bit of nuissance when trying to find examples. The maturity of Shiny for R means that the vast majority of the examples are for R, even with Python in the search. It would be nice if the docs site remembered that I only want to look at docs for Core. + +## Shiny docs could have better formatting + +- https://shiny.posit.co/py/api/core/ui.layout_columns.html: bullet list not rendered correctly. diff --git a/dp_creator_ii/app/components/column_module.py b/dp_creator_ii/app/components/column_module.py index f3f41b8..7bc95d8 100644 --- a/dp_creator_ii/app/components/column_module.py +++ b/dp_creator_ii/app/components/column_module.py @@ -10,28 +10,44 @@ @module.ui def column_ui(): # pragma: no cover - return [ - ui.input_numeric("min", "Min", 0), - ui.input_numeric("max", "Max", 10), - ui.input_numeric("bins", "Bins", 10), - ui.input_select( - "weight", - "Weight", - choices={ - 1: "Less accurate", - 2: "Default", - 4: "More accurate", - }, - selected=2, - ), - output_code_sample("Column Definition", "column_code"), - ui.markdown( - "This simulation assumes a normal distribution " - "between the specified min and max. " - "Your data file has not been read except to determine the columns." - ), - ui.output_plot("column_plot"), - ] + width = "10em" # Just wide enough so the text isn't trucated. + return ui.layout_columns( + [ + ui.input_numeric("min", "Min", 0, width=width), + ui.input_numeric("max", "Max", 10, width=width), + ui.input_numeric("bins", "Bins", 10, width=width), + ui.input_select( + "weight", + "Weight", + choices={ + 1: "Less accurate", + 2: "Default", + 4: "More accurate", + }, + selected=2, + width=width, + ), + ], + [ + # TODO: This doesn't need to be repeated: could just go once at the top. + # https://github.com/opendp/dp-creator-ii/issues/138 + ui.markdown( + "This simulation assumes a normal distribution " + "between the specified min and max. " + "Your data file has not been read except to determine the columns." + ), + ui.output_plot("column_plot", height="300px"), + # Make plot smaller than default: about the same size as the other column. + output_code_sample("Column Definition", "column_code"), + ], + col_widths={ + # Controls stay roughly a constant width; + # Graph expands to fill space. + "sm": (4, 8), + "md": (3, 9), + "lg": (2, 10), + }, + ) @module.server diff --git a/dp_creator_ii/app/css/styles.css b/dp_creator_ii/app/css/styles.css index 4749715..a624854 100644 --- a/dp_creator_ii/app/css/styles.css +++ b/dp_creator_ii/app/css/styles.css @@ -1,5 +1,5 @@ body { - margin: 1em; + margin: 2em; } #top_level_nav {