Two column layout: Graph expands to fit (#137)

* two column layout * narrow controls * smaller plot * Annie prefers wider margin
opendp · Nov 7, 2024 · 26a3115 · 26a3115
1 parent 2f08f37
commit 26a3115
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 23 deletions.
diff --git 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
@@ -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
@@ -1,5 +1,5 @@
 body {
-    margin: 1em;
+    margin: 2em;
 }
 
 #top_level_nav {