from dash import html, dcc
import pandas as pd
import numpy as np
from data.functions import *
from figure import build_figure
import plotly.graph_objects as go
# ============================================================
# Small reusable layout helpers
# ============================================================
FULL_WIDTH_STYLE = {"width": "100%"}
FIELD_LABEL_STYLE = {"marginTop": "4px"}
def section_header(text):
"""Standard section heading."""
return html.H3(text, className="section-header")
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),
}
)
placeholder_fig = build_figure(df0)
# Keep the CAS axis layout, but hide the placeholder bar traces.
placeholder_fig.update_traces(
opacity=0,
hoverinfo="skip",
showlegend=False,
)
placeholder_fig.update_yaxes(
range=[-2, 0]
)
placeholder_fig.add_annotation(
text="Click 'Calculate' to run model",
xref="paper",
yref="paper",
x=0.5,
y=0.5,
showarrow=False,
font=dict(
size=22,
color="gray",
),
align="center",
)
return placeholder_fig
# ============================================================
# Polymer section
# ============================================================
def build_polymer_section():
return html.Div(
className="polymer-section",
children=[
section_header("Polymer component"),
html.Div(
className="fields-grid",
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",
},
{
"label": "User-defined chemicals",
"value": "upload",
},
],
value="default",
inline=True,
labelStyle={"marginRight": "15px"},
),
# 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",
},
),
html.Div(
id="solute_upload_status",
style={
"marginTop": "5px",
"fontSize": "13px",
},
),
html.Div(
id="solute_calculate_warning",
style={
"marginTop": "6px",
"fontSize": "13px",
"color": "firebrick",
"fontWeight": "bold",
},
),
],
style={"display": "none"},
),
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}",
className="section-header",
),
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 (representative tissue)",
"value": "in_vivo_tissue",
},
],
value=default_mode,
inline=False,
labelStyle={
"display": "block",
"marginBottom": "2px",
},
),
],
),
field_label("Solvent", first=True),
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,
),
field_label("Volume (cm³)"),
numeric_input(
component_id=f"{prefix}_volume",
value="10.0",
placeholder="10.0",
disabled=True,
),
field_label("Swelling ratio (m/m)"),
numeric_input(
component_id=f"{prefix}_swelling",
value="1.0",
placeholder="1.0",
disabled=True,
),
field_label("Extraction T (°C)"),
numeric_input(
component_id=f"{prefix}_temp",
value="50.0",
placeholder="50.0",
disabled=True,
),
field_label("Extraction time (h)"),
numeric_input(
component_id=f"{prefix}_time",
value="24.0",
placeholder="24.0",
disabled=False,
),
field_label("# of iterations"),
numeric_input(
component_id=f"{prefix}_iterations",
value="1",
placeholder="1",
disabled=True,
),
]
)
def build_conditions_section():
return html.Div(
className="conditions-grid",
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():
return html.Div(
children=[
section_header("Monte Carlo"),
html.Div(
className="fields-grid",
children=[
html.Div(
children=[
html.Div("Samples"),
numeric_input(
component_id="samples",
value="1000",
placeholder="1000",
),
]
),
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"},
),
]
),
],
),
html.Div(
className="calculate-row",
children=[
html.Button(
"Calculate",
id="calculate",
n_clicks=0,
)
],
),
]
)
# ============================================================
# Results / graph panel
# ============================================================
def build_results_panel(placeholder_fig):
return html.Div(
className="results-panel",
style={
"flex": "1",
"minWidth": 0,
"boxSizing": "border-box",
"border": "1px solid #D5DADF",
"borderRadius": "4px",
"backgroundColor": "#FFFFFF",
"padding": "16px",
"paddingTop": "12px",
},
children=[
section_header("Results"),
dcc.Loading(
id="mm0_loading",
type="default",
color="#D60036",
parent_style={
"position": "relative",
"width": "100%",
"minWidth": 0,
},
children=dcc.Graph(
id="mm0_chart",
figure=placeholder_fig,
responsive=True,
config={"displayModeBar": False},
style={
"width": "100%",
"height": "600px",
},
),
),
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={
"margin": "1.25rem 0 0",
"lineHeight": "1.4",
"color": "#555",
},
),
],
)
# ============================================================
# Left-side control panel
# ============================================================
def build_controls_panel():
return html.Section(
className="controls-panel",
**{"aria-label": "Model inputs"},
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(
className="model-page",
children=[
html.H1(
"Extraction condition comparison tool",
className="visually-hidden",
),
html.Div(
className="model-grid",
children=[
build_controls_panel(),
build_results_panel(placeholder_fig),
],
),
],
)