restructured layout code so easier to edit

main_layout.py

@@ -1,21 +1,130 @@
 from dash import html, dcc
 import dash_bootstrap_components as dbc
+import pandas as pd
+import numpy as np
+
 from data.functions import *
 from figure import build_figure
 
-def build_main_layout() -> html.Div:
+
+# ============================================================
+# Shared styles
+# ============================================================
+
+PAGE_STYLE = {
+    "fontFamily": "Arial, Helvetica, sans-serif",
+    "padding": "15px",
+}
+
+TITLE_STYLE = {
+    "textAlign": "center",
+    "marginBottom": "10px",
+    "fontSize": "36px",
+}
+
+SECTION_HEADER_STYLE = {
+    "textDecoration": "underline",
+    "fontSize": "18px",
+    "marginBottom": "10px",
+}
+
+MONTE_CARLO_HEADER_STYLE = {
+    **SECTION_HEADER_STYLE,
+    "marginBottom": "15px",
+}
+
+FULL_WIDTH_STYLE = {
+    "width": "100%",
+}
+
+FIELD_LABEL_STYLE = {
+    "marginTop": "10px",
+}
+
+TWO_COLUMN_GRID_STYLE = {
+    "display": "grid",
+    "gridTemplateColumns": "1fr 1fr",
+    "columnGap": "20px",
+}
+
+CONDITIONS_GRID_STYLE = {
+    "display": "grid",
+    "gridTemplateColumns": "1fr 1fr",
+    "columnGap": "30px",
+}
+
+
+# ============================================================
+# Small reusable layout helpers
+# ============================================================
+
+def section_header(text):
+    """Standard underlined section heading."""
+    return html.H3(
+        text,
+        style=SECTION_HEADER_STYLE,
+    )
+
+
+def field_label(text, first=False):
+    """Standard input label."""
+    if first:
+        return html.Div(text)
+
+    return html.Div(
+        text,
+        style=FIELD_LABEL_STYLE,
+    )
+
+
+def numeric_input(
+    component_id,
+    value,
+    placeholder=None,
+    disabled=False,
+):
+    """Standard full-width numeric input."""
+
+    if placeholder is None:
+        placeholder = str(value)
+
+    return dcc.Input(
+        id=component_id,
+        type="number",
+        placeholder=placeholder,
+        value=value,
+        style=FULL_WIDTH_STYLE,
+        disabled=disabled,
+        required=True,
+    )
+
+
+# ============================================================
+# Placeholder figure
+# ============================================================
+
+def build_placeholder_figure():
+
     n = len(soluteData)
-    df0 = pd.DataFrame({
-        "CASRN": soluteData["CASRN"].to_numpy(),
-        "Condition 1": np.zeros(n),
-        "Cond1_err_plus": np.zeros(n),
-        "Cond1_err_minus": np.zeros(n),
-        "Condition 2": np.zeros(n),
-        "Cond2_err_plus": np.zeros(n),
-        "Cond2_err_minus": np.zeros(n),
-    })
+
+    df0 = pd.DataFrame(
+        {
+            "CASRN": soluteData["CASRN"].to_numpy(),
+            "Condition 1": np.zeros(n),
+            "Cond1_err_plus": np.zeros(n),
+            "Cond1_err_minus": np.zeros(n),
+            "Condition 2": np.zeros(n),
+            "Cond2_err_plus": np.zeros(n),
+            "Cond2_err_minus": np.zeros(n),
+        }
+    )
+
     placeholder_fig = build_figure(df0)
-    placeholder_fig.update_yaxes(range=[-2, 0])
+
+    placeholder_fig.update_yaxes(
+        range=[-2, 0]
+    )
+
     placeholder_fig.add_annotation(
         text="Click 'Calculate' to run model",
         xref="paper",
@@ -23,590 +132,606 @@ def build_main_layout() -> html.Div:
         x=0.5,
         y=0.5,
         showarrow=False,
-        font=dict(size=22, color="gray"),
+        font=dict(
+            size=22,
+            color="gray",
+        ),
         align="center",
     )
+
+    return placeholder_fig
+
+
+# ============================================================
+# Polymer section
+# ============================================================
+
+def build_polymer_section():
+
     return html.Div(
-    style={
-        "fontFamily": "Arial, Helvetica, sans-serif",
-        "padding": "15px",
-    },
-    children=[
-        html.H1("Extraction condition comparison tool",
-            style={
-            "textAlign": "center",
-            "marginBottom": "10px",
-            "fontSize": "36px",
-            },
-        ),
-        html.Div(
-            style={
-                "display": "flex",
-                "gap": "40px",
-            },
-            children=[
-                # LEFT: Form / Controls
-                html.Div(
-                    style={
-                        "flex": "0 0 40%",
-                        "maxWidth": "500px",
+        children=[
+            section_header("Polymer component"),
+
+            html.Div(
+                style={
+                    **TWO_COLUMN_GRID_STYLE,
+                    "rowGap": "10px",
+                    "marginBottom": "10px",
+                },
+                children=[
+
+                    # ------------------------------------------------
+                    # Left column
+                    # ------------------------------------------------
+                    html.Div(
+                        children=[
+                            field_label("Matrix", first=True),
+
+                            dcc.Dropdown(
+                                id="matrix",
+                                options=[
+                                    {"label": x, "value": x}
+                                    for x in polymers
+                                ],
+                                value=polymers[25],
+                                clearable=False,
+                                style=FULL_WIDTH_STYLE,
+                            ),
+
+                            field_label("Tg (°C)"),
+
+                            numeric_input(
+                                component_id="tg",
+                                value="0.0",
+                                placeholder="0.0",
+                            ),
+
+                            field_label("Crystallinity (%)"),
+
+                            numeric_input(
+                                component_id="crystal",
+                                value="0.0",
+                                placeholder="0.0",
+                            ),
+                        ]
+                    ),
+
+                    # ------------------------------------------------
+                    # Right column
+                    # ------------------------------------------------
+                    html.Div(
+                        children=[
+                            field_label(
+                                "Density (g/cm³)",
+                                first=True,
+                            ),
+
+                            numeric_input(
+                                component_id="density",
+                                value="1.0",
+                                placeholder="1.0",
+                            ),
+
+                            field_label("Volume (cm³)"),
+
+                            numeric_input(
+                                component_id="polymer_volume",
+                                value="1.0",
+                                placeholder="1.0",
+                            ),
+
+                            field_label("Surface area (cm²)"),
+
+                            numeric_input(
+                                component_id="surface_area",
+                                value="30.0",
+                                placeholder="30.0",
+                            ),
+                        ]
+                    ),
+                ],
+            ),
+        ]
+    )
+
+
+# ============================================================
+# Solute section
+# ============================================================
+
+def build_solute_section():
+
+    return html.Div(
+        children=[
+            section_header("Solutes"),
+
+            dcc.RadioItems(
+                id="solute_source",
+                options=[
+                    {
+                        "label": "Default boundary chemicals",
+                        "value": "default",
                     },
-                    children=[
-                        # Polymer component section
-                        html.H3(
-                            "Polymer component",
-                            style={
-                                "textDecoration": "underline",
-                                "fontSize": "18px",
-                                "marginBottom": "10px",
-                            },
-                        ),
-                        html.Div(
-                            style={
-                                "display": "grid",
-                                "gridTemplateColumns": "1fr 1fr",
-                                "columnGap": "20px",
-                                "rowGap": "10px",
-                                "marginBottom": "10px",
-                            },
-                            children=[
-                                # Left column
-                                html.Div(
-                                    children=[
-                                        html.Div("Matrix"),
-                                        dcc.Dropdown(
-                                            id="matrix",
-                                            options=[{"label": x, "value": x} for x in polymers],
-                                            value=polymers[25],  # default selection (optional)
-                                            clearable=False,
-                                            style={"width": "100%"}
-                                        ),
-                                        html.Div("Tg (°C)", style={"marginTop": "10px"}),
-                                        dcc.Input(
-                                            id="tg",
-                                            type="number",
-                                            placeholder="0.0",
-                                            value="0.0",
-                                            style={"width": "100%"},
-                                            required=True,
-                                        ),
-                                        html.Div(
-                                            "Crystallinity (%)",
-                                            style={"marginTop": "10px"},
-                                        ),
-                                        dcc.Input(
-                                            id="crystal",
-                                            type="number",
-                                            placeholder="0.0",
-                                            value="0.0",
-                                            style={"width": "100%"},
-                                            required=True,
-                                        ),
-                                    ]
-                                ),
-                                # Right column
-                                html.Div(
-                                    children=[
-                                        html.Div("Density (g/cm³)"),
-                                        dcc.Input(
-                                            id="density",
-                                            type="number",
-                                            placeholder="1.0",
-                                            value="1.0",
-                                            style={"width": "100%"},
-                                            required=True,
-                                        ),
-                                        html.Div(
-                                            "Volume (cm³)",
-                                            style={"marginTop": "10px"},
-                                        ),
-                                        dcc.Input(
-                                            id="polymer_volume",
-                                            type="number",
-                                            placeholder="1.0",
-                                            value="1.0",
-                                            style={"width": "100%"},
-                                            required=True,
-                                        ),
-                                        html.Div(
-                                            "Surface area (cm²)",
-                                            style={"marginTop": "10px"},
-                                        ),
-                                        dcc.Input(
-                                            id="surface_area",
-                                            type="number",
-                                            placeholder="30.0",
-                                            value="30.0",
-                                            style={"width": "100%"},
-                                            required=True,
-                                        ),
-                                    ]
+                    {
+                        "label": "User-defined chemicals",
+                        "value": "upload",
+                    },
+                ],
+                value="default",
+                inline=True,
+                labelStyle={
+                    "marginRight": "15px",
+                },
+            ),
+
+            # ----------------------------------------------------
+            # Upload controls
+            # Hidden unless "User-defined chemicals" is selected
+            # ----------------------------------------------------
+            html.Div(
+                id="solute_upload_container",
+                children=[
+                    dcc.Upload(
+                        id="solute_upload",
+                        children=html.Div(
+                            [
+                                "Drag and drop or ",
+                                html.A(
+                                    "select an Excel file"
                                 ),
-                            ],
+                            ]
                         ),
+                        accept=".xlsx,.xls",
+                        multiple=False,
+                        style={
+                            "width": "100%",
+                            "height": "55px",
+                            "lineHeight": "55px",
+                            "borderWidth": "1px",
+                            "borderStyle": "dashed",
+                            "borderRadius": "4px",
+                            "textAlign": "center",
+                            "marginTop": "10px",
+                        },
+                    ),
 
-                        # Solutes row
-                        html.H3(
-                            "Solutes",
-                            style={
-                                "textDecoration": "underline",
-                                "fontSize": "18px",
-                                "marginBottom": "10px",
+                    # File-read / validation message
+                    html.Div(
+                        id="solute_upload_status",
+                        style={
+                            "marginTop": "5px",
+                            "fontSize": "13px",
+                        },
+                    ),
+
+                    # Calculate-button warning
+                    html.Div(
+                        id="solute_calculate_warning",
+                        style={
+                            "marginTop": "6px",
+                            "fontSize": "13px",
+                            "color": "firebrick",
+                            "fontWeight": "bold",
+                        },
+                    ),
+                ],
+                style={
+                    "display": "none",
+                },
+            ),
+
+            # Stores validated uploaded solute records
+            dcc.Store(
+                id="uploaded_solute_data"
+            ),
+        ],
+    )
+
+
+# ============================================================
+# Condition controls
+# ============================================================
+
+def build_condition_column(
+    number,
+    default_mode,
+    default_solvent,
+):
+    """
+    Build either Condition #1 or Condition #2.
+
+    IDs are generated automatically:
+        c1_solvent, c1_volume, ...
+        c2_solvent, c2_volume, ...
+    """
+
+    prefix = f"c{number}"
+
+    return html.Div(
+        children=[
+            html.H3(
+                f"Condition #{number}",
+                style=SECTION_HEADER_STYLE,
+            ),
+
+            # ----------------------------------------------------
+            # Condition mode
+            # ----------------------------------------------------
+            html.Div(
+                style={
+                    "marginBottom": "10px",
+                },
+                children=[
+                    dcc.RadioItems(
+                        id=f"condition{number}_mode",
+                        options=[
+                            {
+                                "label": "In vitro",
+                                "value": "in_vitro",
                             },
-                        ),
+                            {
+                                "label": "In vivo (conservative)",
+                                "value": "in_vivo_conservative",
+                            },
+                            {
+                                "label": "In vivo (tissue)",
+                                "value": "in_vivo_tissue",
+                            },
+                        ],
+                        value=default_mode,
+                        labelStyle={
+                            "display": "inline-block",
+                        },
+                    ),
+                ],
+            ),
 
-                        dcc.RadioItems(
-                            id="solute_source",
-                            options=[
-                                {"label": "Default boundary chemicals", "value": "default"},
-                                {"label": "User-defined chemicals", "value": "upload"},
-                            ],
-                            value="default",
-                            inline=True,
-                            labelStyle={"marginRight": "15px"},
-                        ),
+            # ----------------------------------------------------
+            # Solvent
+            # ----------------------------------------------------
+            field_label(
+                "Solvent",
+                first=True,
+            ),
 
-                        html.Div(
-                            id="solute_upload_container",
-                            children=[
-                                dcc.Upload(
-                                    id="solute_upload",
-                                    children=html.Div([
-                                        "Drag and drop or ",
-                                        html.A("select an Excel file"),
-                                    ]),
-                                    accept=".xlsx,.xls",
-                                    multiple=False,
-                                    style={
-                                        "width": "100%",
-                                        "height": "55px",
-                                        "lineHeight": "55px",
-                                        "borderWidth": "1px",
-                                        "borderStyle": "dashed",
-                                        "borderRadius": "4px",
-                                        "textAlign": "center",
-                                        "marginTop": "10px",
-                                    },
-                                ),
+            dcc.Dropdown(
+                id=f"{prefix}_solvent",
+                options=[
+                    {"label": x, "value": x}
+                    for x in solvents
+                ],
+                value=default_solvent,
+                clearable=False,
+                placeholder="",
+                disabled=True,
+                style=FULL_WIDTH_STYLE,
+            ),
+
+            # ----------------------------------------------------
+            # Volume
+            # ----------------------------------------------------
+            field_label("Volume (cm³)"),
+
+            numeric_input(
+                component_id=f"{prefix}_volume",
+                value="10.0",
+                placeholder="10.0",
+                disabled=True,
+            ),
+
+            # ----------------------------------------------------
+            # Swelling ratio
+            # ----------------------------------------------------
+            field_label("Swelling ratio (m/m)"),
+
+            numeric_input(
+                component_id=f"{prefix}_swelling",
+                value="1.0",
+                placeholder="1.0",
+                disabled=True,
+            ),
+
+            # ----------------------------------------------------
+            # Extraction temperature
+            # ----------------------------------------------------
+            field_label("Extraction T (°C)"),
+
+            numeric_input(
+                component_id=f"{prefix}_temp",
+                value="50.0",
+                placeholder="50.0",
+                disabled=True,
+            ),
+
+            # ----------------------------------------------------
+            # Extraction time
+            # ----------------------------------------------------
+            field_label("Extraction time (h)"),
+
+            numeric_input(
+                component_id=f"{prefix}_time",
+                value="24.0",
+                placeholder="24.0",
+                disabled=False,
+            ),
+
+            # ----------------------------------------------------
+            # Number of iterations
+            # ----------------------------------------------------
+            field_label("# of iterations"),
+
+            numeric_input(
+                component_id=f"{prefix}_iterations",
+                value="1",
+                placeholder="1",
+                disabled=True,
+            ),
+        ]
+    )
+
+
+def build_conditions_section():
+
+    return html.Div(
+        style=CONDITIONS_GRID_STYLE,
+        children=[
+            build_condition_column(
+                number=1,
+                default_mode="in_vitro",
+                default_solvent=solvents[9],
+            ),
+
+            build_condition_column(
+                number=2,
+                default_mode="in_vivo_conservative",
+                default_solvent=solvents[2],
+            ),
+        ],
+    )
+
+
+# ============================================================
+# Monte Carlo section
+# ============================================================
+
+def build_monte_carlo_section():
 
-                                html.Div(
-                                    id="solute_upload_status",
-                                    style={
-                                        "marginTop": "5px",
-                                        "fontSize": "13px",
+    return html.Div(
+        style={
+            "marginTop": "10px",
+        },
+        children=[
+            html.H3(
+                "Monte Carlo",
+                style=MONTE_CARLO_HEADER_STYLE,
+            ),
+
+            # ----------------------------------------------------
+            # Samples + comparison mode
+            # ----------------------------------------------------
+            html.Div(
+                style={
+                    **TWO_COLUMN_GRID_STYLE,
+                    "alignItems": "end",
+                },
+                children=[
+
+                    # Samples
+                    html.Div(
+                        children=[
+                            html.Div("Samples"),
+
+                            numeric_input(
+                                component_id="samples",
+                                value="1000",
+                                placeholder="1000",
+                            ),
+                        ]
+                    ),
+
+                    # Comparison quantity
+                    html.Div(
+                        children=[
+                            html.Div(
+                                "Comparison quantity"
+                            ),
+
+                            dcc.RadioItems(
+                                id="mc_option",
+                                options=[
+                                    {
+                                        "label": "absolute",
+                                        "value": "absolute",
                                     },
-                                ),
-                                html.Div(
-                                    id="solute_calculate_warning",
-                                    style={
-                                        "marginTop": "6px",
-                                        "fontSize": "13px",
-                                        "color": "firebrick",
-                                        "fontWeight": "bold",
+                                    {
+                                        "label": "ratio",
+                                        "value": "ratio",
                                     },
-                                ),
-                            ],
-                            style={"display": "none"},
-                        ),
+                                ],
+                                value="absolute",
+                                inline=True,
+                                labelStyle={
+                                    "marginRight": "15px",
+                                },
+                            ),
+                        ]
+                    ),
+                ],
+            ),
 
-                        dcc.Store(id="uploaded_solute_data"),
+            # ----------------------------------------------------
+            # Calculate button
+            # ----------------------------------------------------
+            html.Div(
+                style={
+                    "textAlign": "center",
+                    "marginTop": "20px",
+                },
+                children=[
+                    html.Button(
+                        "Calculate",
+                        id="calculate",
+                        n_clicks=0,
+                        style={
+                            "padding": "8px 25px",
+                            "border": "1px solid #333",
+                            "borderRadius": "3px",
+                            "backgroundColor": "white",
+                            "cursor": "pointer",
+                        },
+                    )
+                ],
+            ),
+        ],
+    )
 
-                        # Conditions row
-                        html.Div(
-                            style={
-                                "display": "grid",
-                                "gridTemplateColumns": "1fr 1fr",
-                                "columnGap": "30px",
-                            },
-                            children=[
-                                # Condition 1
-                                html.Div(
-                                    children=[
-                                        html.H3(
-                                            "Condition #1",
-                                            style={
-                                                "textDecoration": "underline",
-                                                "fontSize": "18px",
-                                                "marginBottom": "10px",
-                                            },
-                                        ),
-                                        html.Div(
-                                            [
-                                                html.Div(
-                                                    dcc.RadioItems(
-                                                        id="condition1_mode",
-                                                        options=[
-                                                            {
-                                                                "label": "In vitro",
-                                                                "value": "in_vitro",
-                                                            },
-                                                            {
-                                                                "label": "In vivo (conservative)",
-                                                                "value": "in_vivo_conservative",
-                                                            },
-                                                            {
-                                                                "label": "In vivo (tissue)",
-                                                                "value": "in_vivo_tissue",
-                                                            },
-                                                        ],
-                                                        value="in_vitro",
-                                                        labelStyle={
-                                                            "display": "inline-block"
-                                                        },
-                                                    ),
-                                                    style={"marginBottom": "10px"},
-                                                ),
-                                            ],
-                                        ),
-                                        html.Div("Solvent"),
-                                        dcc.Dropdown(
-                                            id="c1_solvent",
-                                            options=[{"label": x, "value": x} for x in solvents],
-                                            value=solvents[9],  # default selection (optional)
-                                            clearable=False,
-                                            placeholder="",
-                                            disabled=True,
-                                            style={"width": "100%"}
-                                        ),
-                                        html.Div(
-                                            "Volume (cm³)",
-                                            style={"marginTop": "10px"},
-                                        ),
-                                        dcc.Input(
-                                            id="c1_volume",
-                                            type="number",
-                                            placeholder="10.0",
-                                            value="10.0",
-                                            style={"width": "100%"},
-                                            disabled=True,
-                                            required=True,
-                                        ),
-                                        html.Div(
-                                            "Swelling ratio (m/m)",
-                                            style={"marginTop": "10px"},
-                                        ),
-                                        dcc.Input(
-                                            id="c1_swelling",
-                                            type="number",
-                                            placeholder="1.0",
-                                            value="1.0",
-                                            style={"width": "100%"},
-                                            disabled=True,
-                                            required=True,
-                                        ),
-                                        html.Div(
-                                            "Extraction T (°C)",
-                                            style={"marginTop": "10px"},
-                                        ),
-                                        dcc.Input(
-                                            id="c1_temp",
-                                            type="number",
-                                            placeholder="50.0",
-                                            value="50.0",
-                                            style={"width": "100%"},
-                                            disabled=True,
-                                            required=True,
-                                        ),
-                                        html.Div(
-                                            "Extraction time (h)",
-                                            style={"marginTop": "10px"},
-                                        ),
-                                        dcc.Input(
-                                            id="c1_time",
-                                            type="number",
-                                            placeholder="24.0",
-                                            value="24.0",
-                                            style={"width": "100%"},
-                                            #disabled=True,
-                                            required=True,
-                                        ),
-                                        html.Div(
-                                            "# of iterations",
-                                            style={"marginTop": "10px"},
-                                        ),
-                                        dcc.Input(
-                                            id="c1_iterations",
-                                            type="number",
-                                            placeholder="1",
-                                            value="1",
-                                            style={"width": "100%"},
-                                            disabled=True,
-                                            required=True,
-                                        ),
-                                    ]
-                                ),
-                                # Condition 2
-                                html.Div(
-                                    children=[
-                                        html.H3(
-                                            "Condition #2",
-                                            style={
-                                                "textDecoration": "underline",
-                                                "fontSize": "18px",
-                                                "marginBottom": "10px",
-                                            },
-                                        ),
-                                        html.Div(
-                                            [
-                                                html.Div(
-                                                    dcc.RadioItems(
-                                                        id="condition2_mode",
-                                                        options=[
-                                                            {
-                                                                "label": "In vitro",
-                                                                "value": "in_vitro",
-                                                            },
-                                                            {
-                                                                "label": "In vivo (conservative)",
-                                                                "value": "in_vivo_conservative",
-                                                            },
-                                                            {
-                                                                "label": "In vivo (tissue)",
-                                                                "value": "in_vivo_tissue",
-                                                            },
-                                                        ],
-                                                        value="in_vivo_conservative",
-                                                        labelStyle={
-                                                            "display": "inline-block"
-                                                        },
-                                                    ),
-                                                    style={"marginBottom": "10px"},
-                                                ),
-                                            ],
-                                        ),
-                                        html.Div("Solvent"),
-                                        dcc.Dropdown(
-                                            id="c2_solvent",
-                                            options=[{"label": x, "value": x} for x in solvents],
-                                            value=solvents[2],  # default selection (optional)
-                                            clearable=False,
-                                            placeholder="",
-                                            disabled=True,
-                                            style={"width": "100%"}
-                                        ),
-                                        html.Div(
-                                            "Volume (cm³)",
-                                            style={"marginTop": "10px"},
-                                        ),
-                                        dcc.Input(
-                                            id="c2_volume",
-                                            type="number",
-                                            placeholder="10.0",
-                                            value="10.0",
-                                            style={"width": "100%"},
-                                            disabled=True,
-                                            required=True,
-                                        ),
-                                        html.Div(
-                                            "Swelling ratio (m/m)",
-                                            style={"marginTop": "10px"},
-                                        ),
-                                        dcc.Input(
-                                            id="c2_swelling",
-                                            type="number",
-                                            placeholder="1.0",
-                                            value="1.0",
-                                            style={"width": "100%"},
-                                            disabled=True,
-                                            required=True,
-                                        ),
-                                        html.Div(
-                                            "Extraction T (°C)",
-                                            style={"marginTop": "10px"},
-                                        ),
-                                        dcc.Input(
-                                            id="c2_temp",
-                                            type="number",
-                                            placeholder="50.0",
-                                            value="50.0",
-                                            style={"width": "100%"},
-                                            disabled=True,
-                                            required=True,
-                                        ),
-                                        html.Div(
-                                            "Extraction time (h)",
-                                            style={"marginTop": "10px"},
-                                        ),
-                                        dcc.Input(
-                                            id="c2_time",
-                                            type="number",
-                                            placeholder="24.0",
-                                            value="24.0",
-                                            style={"width": "100%"},
-                                            #disabled=True,
-                                            required=True,
-                                        ),
-                                        html.Div(
-                                            "# of iterations",
-                                            style={"marginTop": "10px"},
-                                        ),
-                                        dcc.Input(
-                                            id="c2_iterations",
-                                            type="number",
-                                            placeholder="1",
-                                            value="1",
-                                            style={"width": "100%"},
-                                            disabled=True,
-                                            required=True,
-                                        ),
-                                    ]
-                                ),
-                            ],
-                        ),
 
-                        # Calculate button
-                        # Monte Carlo
-                        html.Div(
-                            style={
-                                "marginTop": "10px",
-                            },
-                            children=[
-                                html.H3(
-                                    "Monte Carlo",
-                                    style={
-                                        "textDecoration": "underline",
-                                        "fontSize": "18px",
-                                        "marginBottom": "15px",
-                                    },
-                                ),
+# ============================================================
+# Results / graph panel
+# ============================================================
 
-                                # ---- Samples + radio buttons on same row ----
-                                html.Div(
-                                    style={
-                                        "display": "grid",
-                                        "gridTemplateColumns": "1fr 1fr",
-                                        "columnGap": "20px",
-                                        "alignItems": "end",
-                                    },
-                                    children=[
-                                        # Samples
-                                        html.Div(
-                                            children=[
-                                                html.Div("Samples"),
-                                                dcc.Input(
-                                                    id="samples",
-                                                    type="number",
-                                                    placeholder="1000",
-                                                    value="1000",
-                                                    required=True,
-                                                    style={"width": "100%"},
-                                                ),
-                                            ],
-                                        ),
-
-                                        # Radio buttons
-                                        html.Div(
-                                            children=[
-                                                html.Div("Comparison quantity"),
-                                                dcc.RadioItems(
-                                                    id="mc_option",
-                                                    options=[
-                                                        {"label": "absolute", "value": "absolute"},
-                                                        {"label": "ratio", "value": "ratio"},
-                                                    ],
-                                                    value="absolute",
-                                                    inline=True,
-                                                    labelStyle={
-                                                        "marginRight": "15px",
-                                                    },
-                                                ),
-                                            ],
-                                        ),
-                                    ],
-                                ),
+def build_results_panel(placeholder_fig):
 
-                                # ---- Calculate centered below ----
-                                html.Div(
-                                    style={
-                                        "textAlign": "center",
-                                        "marginTop": "20px",
-                                    },
-                                    children=[
-                                        html.Button(
-                                            "Calculate",
-                                            id="calculate",
-                                            n_clicks=0,
-                                            style={
-                                                "padding": "8px 25px",
-                                                "border": "1px solid #333",
-                                                "borderRadius": "3px",
-                                                "backgroundColor": "white",
-                                                "cursor": "pointer",
-                                            },
-                                        )
-                                    ],
-                                ),
-                            ],
-                        )
+    return html.Div(
+        style={
+            "flex": "1",
+            "display": "flex",
+            "flexDirection": "column",
+            "justifyContent": "center",
+        },
+        children=[
+
+            # ----------------------------------------------------
+            # Plot + processing overlay
+            # ----------------------------------------------------
+            dcc.Loading(
+                id="mm0_loading",
+                type="default",
+
+                parent_style={
+                    "position": "relative",
+                    "width": "800px",
+                    "height": "600px",
+                },
+
+                overlay_style={
+                    "backgroundColor": "rgba(255, 255, 255, 0.5)",
+                    "display": "flex",
+                    "justifyContent": "center",
+                    "alignItems": "center",
+                },
+
+                custom_spinner=html.Div(
+                    [
+                        html.H2("Processing"),
+                        dbc.Spinner(
+                            color="danger"
+                        ),
                     ],
+                    style={
+                        "textAlign": "center",
+                    },
                 ),
 
-                # RIGHT: Bar Chart
-                html.Div(
+                children=dcc.Graph(
+                    id="mm0_chart",
+                    figure=placeholder_fig,
+                    config={
+                        "displayModeBar": False,
+                    },
                     style={
-                        "flex": "1",
-                        "display": "flex",
-                        "flexDirection": "column",  # <-- key change
-                        "justifyContent": "center",
+                        "width": "800px",
+                        "height": "600px",
                     },
-                    children=[
-                        dcc.Loading(
-                            id="mm0_loading",
-                            type="default",  # still works with custom_spinner
-                            # This box defines the exact area of the graph and overlay
-                            parent_style={
-                                "position": "relative",
-                                "width": "800px",  # match figure layout.width
-                                "height": "600px",  # match figure layout.height
-                            },
-                            # This is the semi-transparent veil over that 600x800 box
-                            overlay_style={
-                                "backgroundColor": "rgba(255, 255, 255, 0.5)",
-                                "display": "flex",
-                                "justifyContent": "center",
-                                "alignItems": "center",
-                            },
-                            custom_spinner=html.Div(
-                                [
-                                    html.H2("Processing"),
-                                    dbc.Spinner(color="danger"),
-                                ],
-                                style={"textAlign": "center"},
-                            ),
-                            children=dcc.Graph(
-                                id="mm0_chart",
-                                figure=placeholder_fig,
-                                config={"displayModeBar": False},
-                                # Graph fills the 600x800 parent
-                                style={
-                                    "width": "800px",
-                                    "height": "600px",
-                                },
-                            ),
-                        ),
-                        html.Div(
-                        html.P(
-                            [
-                                "This tool provides an interface to physics-based models that can assist in selecting extraction conditions. ",
-                                "It enables comparison of predicted fractional release across in vitro and in vivo scenarios. ",
-                                "For additional information, please refer to the ",
-                                dcc.Link("quick start guide", href="/instructions"),
-                                # ", and for reference and disclaimer information, please see the ",
-                                # dcc.Link("RST information page", href="/rst"),
-                                ".",
-                            ],
-                            style={
-                                "maxWidth": "800px",
-                                "margin": "1.25rem auto 2rem auto",
-                                "lineHeight": "1.4",
-                                "color": "#555",
-                            }
-                        ),
-                        style={"width": "800px"},
+                ),
+            ),
+
+            # ----------------------------------------------------
+            # Footer / quick-start link
+            # ----------------------------------------------------
+            html.Div(
+                html.P(
+                    [
+                        "This tool provides an interface to "
+                        "physics-based models that can assist "
+                        "in selecting extraction conditions. ",
+
+                        "It enables comparison of predicted "
+                        "fractional release across in vitro "
+                        "and in vivo scenarios. ",
+
+                        "For additional information, please "
+                        "refer to the ",
+
+                        dcc.Link(
+                            "quick start guide",
+                            href="/instructions",
                         ),
+
+                        ".",
                     ],
+                    style={
+                        "maxWidth": "800px",
+                        "margin": "1.25rem auto 2rem auto",
+                        "lineHeight": "1.4",
+                        "color": "#555",
+                    },
                 ),
-            ],
-        ),
-    ],
-)
+                style={
+                    "width": "800px",
+                },
+            ),
+        ],
+    )
+
+
+# ============================================================
+# Left-side control panel
+# ============================================================
+
+def build_controls_panel():
+
+    return html.Div(
+        style={
+            "flex": "0 0 40%",
+            "maxWidth": "500px",
+        },
+        children=[
+            build_polymer_section(),
+            build_solute_section(),
+            build_conditions_section(),
+            build_monte_carlo_section(),
+        ],
+    )
+
+
+# ============================================================
+# Main layout
+# ============================================================
+
+def build_main_layout() -> html.Div:
+
+    placeholder_fig = build_placeholder_figure()
+
+    return html.Div(
+        style=PAGE_STYLE,
+        children=[
+            html.H1(
+                "Extraction condition comparison tool",
+                style=TITLE_STYLE,
+            ),
+
+            html.Div(
+                style={
+                    "display": "flex",
+                    "gap": "40px",
+                },
+                children=[
+                    build_controls_panel(),
+                    build_results_panel(
+                        placeholder_fig
+                    ),
+                ],
+            ),
+        ],
+    )