app.py

# app.py

import pandas as pd
import flask
import dash
from dash import Dash, Input, Output, dcc, html
import plotly.express as px


data=pd.read_csv("data.csv")
params=list(data.columns)[0:-1]
params.sort()

external_stylesheets = [
    {
        "href": (
            "https://fonts.googleapis.com/css2?"
            "family=Lato:wght@400;700&display=swap"
        ),
        "rel": "stylesheet",
    },
]
app = Dash(__name__, external_stylesheets=external_stylesheets)

server = app.server


app.title = "Breeders Equation Simulator- Explore Gain Parameters"

app.layout = html.Div(
    children=[
       #header element
        html.Div(
            children=[
                #title
                html.H1(
                    children="Breeder's Equation Simulator", className="header-title"
                ),
                # #logo
                # html.Img(
                # src="assets/BIO-Icon-01.jpg", className="center"
                # ),
                #description
                html.P(
                    children=(
    
                        "Explore how Response to Selection dynamics are affected when you change the values of the variables in the breeders equation (R=iaσ/L)."
                        "Start by picking one variable to explore from the drop down list. You can change its value with the slider bar."
                        " How does R change when you change the value of your variable?"
                    ),
                    className="card-menu",
                ),
                html.P(
                    children=(
    
                        "The breeders equation is R=iaσ/L, where R is Response to Selection, i is selection intensity, a is selection accuracy, σ is genetic variance" 
                    ),
                    className="card-menu",
                ),
            ],
            className="header",
        ),
        
        ### menu of elements for user to select
        html.Div(
            children=[        
            #drop down menu for parameters to vary    
              html.Div(
                    children=[
                        html.Div(children="Parameter", className="menu-title"),
                        dcc.Dropdown(
                            id="paramater-filter",
                            options=[
                                {"label": param, "value": param}
                                for param in params
                            ],
                            value="GeneticVariance",
                            clearable=False,
                            className="menu-title",
                        ),
                    ]
                ) ,
        
            #container for responsive slider element
                html.Div(id='slider-output-container'),
        
                
            ],
            className="menu",
        ),
        ###charts 
        html.Div(
            children=[
                #chart 1
                html.Div(
                    children=dcc.Graph(
                        id="chart-1",
                        config={"displayModeBar": False},
                    ),
                    className="card",
                ),
                #chart 2
                html.Div(
                    children=dcc.Graph(
                        id="chart-2",
                        config={"displayModeBar": False},
                    ),
                    className="card",
                ),
                #chart 3 
                html.Div(
                    children=dcc.Graph(
                        id="chart-3",
                        config={"displayModeBar": False},
                    ),
                    className="card",
                ),
            ],
            className="wrapper",
        ),
    ]
)


#responsive slider element
@app.callback(
    Output('slider-output-container', 'children'),
    Input('paramater-filter', 'value'))
def update_slider_output(value):
    if value == "Length":
         return html.Div(
              children=[
                  html.Div(children="ParamValue", className="menu-title"),
                  dcc.Slider(
                      min=0, max=10, step=1, id="paramater-value",
                      className="menu-title", value=5
                  ),
              ],
          )
    else:
        return html.Div(
              children=[
                  html.Div(children="ParamValue", className="menu-title"),
                  dcc.Slider(
                      min=0, max=1, step=0.1, id="paramater-value",
                      className="menu-title", value=0.5
                  ),
              ],
          )
     
     
@app.callback(
    Output('chart-1', 'figure'),
    Output("chart-2", "figure"),
    Output("chart-3", "figure"),
    Input("paramater-value", "value"),
    Input("paramater-filter", "value"))
def update_charts(ParamValue,param):
    filtered_data = data.query("{0} == @ParamValue".format(param))
    u_params=[k for k in params if param not in k]
    
    
    # if param=="GeneticVariance":
    #     filtered_data=filtered_data.groupby["SelectionIntensity", "SelectionAccuracy"]
    
    chart_1_figure=px.line(filtered_data, x=u_params[0], y="ResponsetoSelection", color=u_params[1], symbol=u_params[2])
    chart_1_figure.update_layout(yaxis_range=[0,1],plot_bgcolor="white",
                                 title=('Effect of '+u_params[0]+ ' on Response to Selection while holding '+str(param)+' constant at '+str(ParamValue)))
    
    
    chart_2_figure=px.line(filtered_data, x=u_params[1], y="ResponsetoSelection", color=u_params[2], symbol=u_params[0])
    chart_2_figure.update_layout(yaxis_range=[0,1],plot_bgcolor="white",
                                 title=('Effect of '+u_params[1]+ ' on Response to Selection while holding '+str(param)+' constant at '+str(ParamValue)))
    
    
    chart_3_figure=px.line(filtered_data, x=u_params[2], y="ResponsetoSelection", color=u_params[1], symbol=u_params[0])
    chart_3_figure.update_layout(yaxis_range=[0,1],plot_bgcolor="white",
                                 title=('Effect of '+u_params[2]+ ' on Response to Selection while holding '+str(param)+' constant at '+str(ParamValue)))

    
    return chart_1_figure, chart_2_figure, chart_3_figure



if __name__ == "__main__":
    app.run_server(debug=True)