Py.Cafe

import dash
from dash import dcc, html
from dash.dependencies import Input, Output, State
import plotly.express as px
import plotly.graph_objects as go
import pandas as pd
import geopandas as gpd
import dash_bootstrap_components as dbc
from data.preprocess import preprocess_data
from dash import callback_context


# Initialize the Dash app
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
combined_intersections_path = './data/shapefiles/combined_intersections.shp'
combined_intersections = gpd.read_file(combined_intersections_path)

years = [2020, 2021, 2022, 2023]
shapefiles = {
    (indicator, year): gpd.read_file(f'./data/shapefiles/combined_{indicator}_{year}.shp')
    for indicator in ['inter1_2', 'inter1_3', 'inter1_4', 'inter1_8']
    for year in years
}

actor_mapping = {
    'inter1_2': "Rebel Groups (Inter 2)",
    'inter1_3': "Political Militias (Inter 3)",
    'inter1_4': "Identity Militias (Inter 4)",
    'inter1_8': "External/Other Forces (Inter 8)",
    '2and3': "Inter 2 & 3",
    '2and4': "Inter 2 & 4",
    '2and8': "Inter 2 & 8",
    '3and4': "Inter 3 & 4",
    '3and8': "Inter 3 & 8",
    '4and8': "Inter 4 & 8",
    '2and3and4': "Inter 2, 3 & 4",
    '2and3and8': "Inter 2, 3 & 8",
    '2and4and8': "Inter 2, 4 & 8",
    '3and4and8': "Inter 3, 4 & 8",
    '2and3and4and8': "Inter 2, 3, 4 & 8"
}

indicator_mapping = {
    'total_population': "Total Population",
    'pop_percentage': "Population Exposure",
    'popdensity': "Population Density Exposure",
    'area': "Area (km²)",
    'area_percentage': "Area Exposure (%)",
}

# Main App Layout
app.layout = html.Div(
    className="pretty_container",
    children=[
              html.Div(
            id="header",
            children=[
                html.Div(
                    [html.H1(children="Children Exposure to Non-State High Violence Activity", style={"fontFamily": "'Roboto', sans-serif", "fontWeight": "900", "fontSize": "39px"})],
                    style={"display": "inline-block", "width": "70%", "margin-left": "10px"}              
                ),
                html.Div(
                    [
                        dbc.Button(
                            "Learn more",
                            id="collapse-button",
                            className="mb-3",
                            style={"background-color": "white", "color": "steelblue", "margin-left": "10px", "margin-top": "10px"},
                        ),
                        dbc.Collapse(
    html.Div([
        html.H5("Objective", style={'color': '#00008B'}),
        html.P([
            "The overall objective of this analysis is to quantify and visualize the number of children living in areas with high activity of non-state armed groups, a collaboration project between ",
            html.A("Save the Children", href="https://www.savethechildren.org/", target="_blank"),
            " and ",
            html.A("ACLED", href="https://acleddata.com/", target="_blank"),
            "."
        ]),
        
        html.H5("Data Sources", style={'color': '#00008B'}),
        html.Ul([
            html.Li([
                "ACLED actor-based (monadic) dataset for 2023. Refer to ACLED's ", 
                html.A("Data Export Tool", href="https://acleddata.com/data-export-tool/", target="_blank"),
                " to download the data."
            ]),
            html.Li([
                "WorldPop unconstrained population data for 2020, broken down by age and sex. Refer to the ", 
                html.A("dataset", href="https://developers.google.com/earth-engine/datasets/catalog/WorldPop_GP_100m_pop_age_sex_cons_unadj", target="_blank"), 
                " hosted on Google Earth Engine."
            ]),
        ]),

        html.H5("Scope of Analysis", style={'color': '#00008B'}),
        html.Ul([
            html.P("Save the Children identified the following 10 countries for analysis: Sudan, Mali, Burkina Faso, Niger, Nigeria, Democratic Republic of Congo, Myanmar, Ukraine, Colombia, and Haiti."),
            html.P("However, this dashboard extends to all countries and focuses on four Non-State Actor Types including:"),
            html.Ul([
                html.Li([html.B("Rebel Groups"), " (Inter 2)"]),
                html.Li([html.B("Political Militias"), " (Inter 3)"]),
                html.Li([html.B("Identity Militias"), " (Inter 4)"]),
                html.Li([html.B("External/Other Forces"), " (Inter 8)"]),
            ]),
            html.P([
                "Refer to this ",
                html.A("link", href="https://acleddata.com/knowledge-base/codebook/#actor-names-types-and-inter-codes", target="_blank"),
                " to learn more about the actor types."
            ]),

        ]),

        html.H5("Methodology", style={'color': '#00008B'}),
        html.P("To achieve our objective, we classified the violence activity level of non-state actors into binary 'high' and 'low' activity zones by following these steps:"),
        html.Ul([
            html.Li([html.B("Data Preparation"), ": The ACLED dataset is filtered to include only political violence events within the scope countries and specific non-state actor types."]),
            html.Li([
                html.B("Median Calculation and Classification"), ": Locations are classified as 'high' or 'low' activity areas based on the median number of events for each actor type in each Admin Level 2 zone. This involves:"
            ]),
            html.Ul([
                html.Li("Calculating the median number of events for each actor type in each Admin Level 2 zone."),
                html.Li("Determining the number of events for each actor type in each location from the ACLED data."),
            ]),
        html.Li([
            html.B("Polygon Boundaries"), ": The ", 
            html.A("alphashape", href="https://pypi.org/project/alphashape/", target="_blank"), 
            " Python library is used to create concave hulls around locations with non-state actor activity. This allows adjustable boundaries based on alpha values to suit different country contexts. For this dashboard, an alpha value of 1.25 was used. Refer to this ",
            html.A("dashboard", href="https://huggingface.co/spaces/zakhtar/ChildeninNSAG_public", target="_blank"),
            " to experiment with different alpha values."
        ]),
        ]),

        html.H5("How to use the dashboard?", style={'color': '#00008B'}),
        html.P(
            "To use the dashboard, start by selecting the year, actor type and indicator of interest. Next, choose the desired age and gender category to visualize the data on the choropleth map. "
            "You may also check the 'Show Boundary' box to overlay boundaries indicating high-activity violence zones. "
            "Additionally, you can adjust the legend range to focus on areas with higher exposure percentages."
        ),

html.H5("Indicators Calculation and Interpretation", style={'color': '#00008B'}),
html.Ul([
    html.Li([
        html.B("1. Total Population"),
        html.P([html.B("Definition:"), "This represents the total population within the area of interest, as sourced from WorldPop data."]),
        html.P([
            html.B("Calculation: "),
            "The Total Population is calculated by summing up the population counts from WorldPop data within the selected boundaries."
        ]),
        html.B("Interpretation:"),
        html.Ul([
            html.Li([
                html.B("High Population: "), 
                "A high total population count in high-activity zones suggests a significant number of people are exposed to the risks posed by non-state armed groups, indicating potentially high humanitarian needs and vulnerability."
            ]),
            html.Li([
                html.B("Low Population: "), 
                "A lower total population in these zones indicates fewer individuals are directly exposed, possibly concentrating the impact within smaller communities but lowering the overall exposure level."
            ])
        ])
    ]),
    html.Li([
        html.B("2. Population Exposure (%)"),
        html.P([html.B("Definition:"), "This represents the proportion of a country’s population living within areas impacted by high-activity zones (concave polygons) relative to the country's total population."]),
        html.P([
            html.B("Calculation: "), 
            "Population Exposure is calculated by taking the population exposed within the concave polygon and dividing it by the total national population, then multiplying by 100 to get a percentage."
        ]),
        html.B("Interpretation:"),
        html.Ul([
            html.Li([
                html.B("High Percentage: "), 
                "If a high percentage is shown, a significant portion of the national population is within areas of heightened non-state actor activity, indicating widespread exposure. This can imply a high vulnerability at a national level."
            ]),
            html.Li([
                html.B("Low Percentage: "), 
                "A lower percentage would suggest that only a smaller proportion of the national population lives in high-risk zones, which might mean that exposure is concentrated in specific areas."
            ]),
        ])
    ]),
    html.Li([
        html.B("3. Population Density Exposure (people/km²)"),
        html.P([html.B("Definition:"),  "This measures the density of people in the high-activity zones, calculated by dividing the exposed population within these zones by the area of the zone (people per km²)."]),
        html.P([
            html.B("Calculation: "), 
            "Population Density Exposure is calculated by dividing the number of people exposed within the concave polygon by the area of the polygon (in km²), resulting in a density value (people per km²)."
        ]),
        html.B("Interpretation:"),
        html.Ul([
            html.Li([
                html.B("High Density: "), 
                "High density in a high-activity area suggests that the population within these zones is crowded, which can exacerbate the impact of violence or conflict due to limited space and resources."
            ]),
            html.Li([
                html.B("Low Density: "), 
                "Lower density indicates a more dispersed population within high-activity zones. This might mean that while the area is risky, fewer people are exposed per unit area, potentially lowering the immediate intensity of impact on individuals."
            ]),
        ])
    ]),
    html.Li([
        html.B("4. Area (km²)"),
        html.P([html.B("Definition:"), "This represents the total land area covered by the high-activity zones, measured in square kilometers (km²)."]),
        html.P([
            html.B("Calculation: "), 
            "The Area (km²) is calculated by summing the area of all high-activity polygons (concave hulls) for a given zone or actor type."
        ]),
        html.B("Interpretation:"),
        html.Ul([
            html.Li([
                html.B("Large Area: "), 
                "A larger area in high-activity zones indicates that the risks from non-state armed groups are spread over a wider geographic region, potentially affecting more dispersed communities or resources."
            ]),
            html.Li([
                html.B("Small Area: "), 
                "A smaller area implies that high-risk zones are more localized, possibly focusing risks on specific urban or rural regions."
            ]),
        ])
    ]),
    html.Li([
        html.B("5. Area Exposure (%)"),
        html.P([html.B("Definition:"), "This represents the proportion of a country’s total land area that falls within high-activity zones (concave polygons)."]),
        html.P([
            html.B("Calculation: "), 
            "Area Percentage is calculated by dividing the area of high-activity zones by the country’s total land area, then multiplying by 100 to get a percentage."
        ]),
        html.B("Interpretation:"),
        html.Ul([
            html.Li([
                html.B("High Percentage: "), 
                "A high area percentage suggests that a significant portion of the country’s land is exposed to risks from non-state armed groups, indicating a geographically widespread impact."
            ]),
            html.Li([
                html.B("Low Percentage: "), 
                "A lower percentage suggests that high-risk zones are limited to smaller geographic regions, which may help prioritize targeted interventions."
            ]),
        ])
    ]),
]),

        html.H5("Disclaimer", style={'color': '#00008B'}),
        html.Ul([
            html.Li("The following countries are excluded: United States, Russia, and Canada, as they were too large (complex edges in shapefiles) to retrieve baseline population/area numbers."),
            html.Li("Currently, 2020 WorldPop population numbers by age/sex are used for all years 2020-2023. Ideally, 2020, 2021, 2022, and 2023 population numbers would be used respectively."),
            html.Li("Some exposure percentages may exceed 100% (e.g., Palestine, where events exist in Gaza and the West Bank, and polygons encompass these areas, overlapping with Israel, capturing more population/area than the baseline for Palestine). These records are filtered out and not shown on the map."),
        ]),

        html.H5("Have any questions?", style={'color': '#00008B'}),
        html.P([
             "Feel free to reach out to Zainab Akhtar at ",
             html.A("z.akhtar@acleddata.com", href="mailto:z.akhtar@acleddata.com"),
             " or Nohad Eltayeb at ",
             html.A("n.eltayeb@acleddata.com", href="mailto:n.eltayeb@acleddata.com"),
        ]),
    ]),
    id="collapse",
    style={'padding-left': '15px', 'padding-right': '50px'},
)

                    ],
                    style={"display": "inline-block", "width": "100%", "textAlign": "left"}
                ),
            ],
        ),
      # Filters row
        html.Div(
            children=[
                html.Div(
                    children=[
                        html.Label("Select Year:", style={'font-family': 'Roboto'}),
                        dcc.Dropdown(
                            id='year-dropdown',
                            options=[{'label': str(year), 'value': year} for year in years],
                            placeholder="Select Year",
                            value=None,
                            style={'width': '100%'}
                        ),
                    ],
                    style={'width': '12%', 'display': 'inline-block', 'padding': '0 10px'}
                ),

                html.Div(
                    children=[
                        html.Label("Select Actor Type:", style={'font-family': 'Roboto'}),
                        dcc.Dropdown(
                            id='actor-dropdown',
                            options=[{'label': actor_mapping[key], 'value': key} for key in actor_mapping.keys()],
                            placeholder="Select Actor Type",
                            value=None,
                            style={'width': '100%'}
                        ),
                    ],
                    style={'width': '23%', 'display': 'inline-block', 'padding': '0 10px'}
                ),

                html.Div(
                    children=[
                        html.Label("Select Indicator:", style={'font-family': 'Roboto'}),
                        dcc.Dropdown(
                            id='indicator-dropdown',
                            options=[{'label': indicator_mapping[key], 'value': key} for key in indicator_mapping.keys()],
                            placeholder="Select Indicator",
                            value=None,
                            style={'width': '100%'}
                        ),
                    ],
                    style={'width': '23%', 'display': 'inline-block', 'padding': '0 10px'}
                ),

                html.Div(
                    children=[
                        html.Label("Select Age/Gender Category:", style={'font-family': 'Roboto'}),
                        dcc.Dropdown(
                            id='sex-age-dropdown',
                            options=[],  # Options populated dynamically
                            placeholder="Select an age/gender category",
                            value=None,
                            style={'width': '100%'}
                        ),
                    ],
                    style={'width': '20%', 'display': 'inline-block', 'padding': '0 10px'}
                ),

                html.Div(
                    children=[
                        html.Label("Select Country:", style={'font-family': 'Roboto'}),
                        dcc.Dropdown(
                            id='country-dropdown',
                            options=[],  # Options populated dynamically
                            placeholder="Select a country",
                            value=None,
                            style={'width': '100%'}
                        ),
                    ],
                    style={'width': '20%', 'display': 'inline-block', 'padding': '0 10px'}
                ),

html.Div(
    children=[
        html.Div(
            children=[
                html.Label("Show Boundary:", style={'font-family': 'Roboto'}),
                dcc.Checklist(
                    id='toggle-shapefile',
                    options=[{'label': '', 'value': 'show'}],  # Empty label to only show checkbox
                    value=[],
                    style={'display': 'block', 'margin-top': '5px','padding': '4px',}  # Places checkbox on a new line
                ),
            ],
            style={'display': 'inline-block', 'verticalAlign': 'middle'}
        ),
        dbc.Button(
            "Reset",
            id="reset-button",
            color="secondary",
            className="ml-2",
            style={'display': 'inline-block', 'margin-left': '20px'}
        ),
    ],
    style={'width': '20%', 'display': 'inline-flex', 'align-items': 'center', 'gap': '10px'}
),
                    
            ],
            style={'display': 'flex', 'justify-content': 'center', 'margin-top': '20px'}
        ),

        # Range slider for filtering the choropleth color range
        html.Div(
            children=[
                html.Label("Filter Legend Range:", style={'font-family': 'Roboto'}),
                dcc.RangeSlider(
                    id='legend-range-slider',
                    min=0,
                    max=100,
                    step=1,
                    value=[0, 100],
                    tooltip={"placement": "bottom", "always_visible": True}
                ),
            ],
            style={'width': '100%', 'padding': '20px 0', "margin-left": "15px"}
        ),

        dcc.Graph(id='choropleth-map', style={"width": "100%", "height": "600px", "margin-top": "20px"}),
    ],
)

@app.callback(
    [Output('sex-age-dropdown', 'options'),
     Output('sex-age-dropdown', 'value'),
     Output('country-dropdown', 'options'),
     Output('country-dropdown', 'value'),
     Output('choropleth-map', 'figure'),
     Output('legend-range-slider', 'min'),
     Output('legend-range-slider', 'max'),
     Output('legend-range-slider', 'marks'),
     Output('legend-range-slider', 'value'),
     Output('year-dropdown', 'value'),
     Output('actor-dropdown', 'value'),
     Output('indicator-dropdown', 'value'),
     Output('toggle-shapefile', 'value')],
    [Input('year-dropdown', 'value'),
     Input('actor-dropdown', 'value'),
     Input('indicator-dropdown', 'value'),
     Input('sex-age-dropdown', 'value'),
     Input('country-dropdown', 'value'),
     Input('toggle-shapefile', 'value'),
     Input('legend-range-slider', 'value'),
     Input('reset-button', 'n_clicks')]
)
def update_data(selected_year, selected_actor, selected_indicator, selected_sex_age, selected_country, show_shapefile, legend_range, reset_n_clicks):
    trigger_id = callback_context.triggered[0]['prop_id'].split('.')[0]

    # Define default values
    default_fig = go.Figure()
    default_fig.add_annotation(
        text="Select a year, actor type, and indicator",
        xref="paper", yref="paper", showarrow=False,
        font=dict(size=16)
    )
    default_fig.update_layout(
        xaxis=dict(visible=False),
        yaxis=dict(visible=False),
        template="plotly_white"
    )
    default_legend_marks = {i: f'{i}%' for i in range(0, 101, 10)}
    default_legend_range = [0, 100]

    # Reset all values if reset button is clicked
    if trigger_id == 'reset-button':
        return [], None, [], None, default_fig, 0, 100, default_legend_marks, default_legend_range, None, None, None, []

    # Return a placeholder figure if required inputs are missing
    if not selected_year or not selected_actor or not selected_indicator:
        return [], None, [], None, default_fig, 0, 100, default_legend_marks, default_legend_range, selected_year, selected_actor, selected_indicator, show_shapefile

    if selected_indicator == 'total_population':
        indicator_column = f"{selected_actor}_exposed_pop"
    elif selected_indicator == 'area':
        indicator_column = f"{selected_actor}_area"
    elif selected_indicator == 'area_percentage':
        indicator_column = f"{selected_actor}_area_percentage"
    else:
        indicator_column = f"{selected_actor}_{selected_indicator}"
    
    file_path = f'./data/combined_data_with_baseline_{selected_year}.csv'
    try:
        data = pd.read_csv(file_path)
        filtered_data = preprocess_data(data, selected_year)

        # Set default value for sex_age_value
        sex_age_value = selected_sex_age if selected_sex_age else 'Total_Children'

        # Populate dropdown options for age/gender
        sex_age_options = [{'label': sex, 'value': sex} for sex in filtered_data['sex_age'].dropna().unique()]
        if 'Total_Children' not in [item['value'] for item in sex_age_options]:
            sex_age_options.append({'label': 'Total_Children', 'value': 'Total_Children'})

        # Apply filter for age/gender and selected country, if any
        filtered_data = filtered_data[filtered_data['sex_age'] == sex_age_value]
        if selected_country:
            filtered_data = filtered_data[filtered_data['country'] == selected_country]

        # Check if filtered data is empty and reset selections if so
        if filtered_data.empty:
            # Return default figure and reset country selection
            fig = go.Figure()
            fig.add_annotation(
                text="No data available for the selected filters. Please adjust your selection.",
                xref="paper", yref="paper", showarrow=False,
                font=dict(size=16)
            )
            fig.update_layout(
                xaxis=dict(visible=False),
                yaxis=dict(visible=False),
                template="plotly_white"
            )
            return sex_age_options, None, [], None, fig, 0, 100, {i: f'{i}%' for i in range(0, 101, 10)}, [0, 100]

    except (FileNotFoundError, ValueError) as e:
        return [], None, [], None, go.Figure().add_annotation(
            text=str(e),
            xref="paper", yref="paper", showarrow=False, font=dict(size=16)
        ).update_layout(xaxis=dict(visible=False), yaxis=dict(visible=False), template="plotly_white"), 0, 100, {i: f'{i}%' for i in range(0, 101, 10)}, [0, 100]

    # Set legend parameters based on the indicator type
    is_density_indicator = selected_indicator in ['popdensity', 'area_percentage']
    legend_title = indicator_mapping[selected_indicator]
    hover_template = f"<b>%{{hovertext}}</b><br>{legend_title}: %{{z:.1f}}<extra></extra>"

    # Calculate legend range, handling NaN cases
    min_val = filtered_data[indicator_column].min(skipna=True)
    max_val = filtered_data[indicator_column].max(skipna=True)
    if pd.isna(min_val) or pd.isna(max_val):
        min_val, max_val = 0, 100  # Default values if no data
    marks = {int(i): str(int(i)) for i in range(int(min_val), int(max_val) + 1, max(1, int((max_val - min_val) / 10)))}

    # Reset the legend range slider to the full range if a filter (not the slider itself) changed
    if trigger_id in ['year-dropdown', 'actor-dropdown', 'indicator-dropdown', 'sex-age-dropdown', 'country-dropdown']:
        legend_range = [min_val, max_val]

    # Apply the legend range filter
    filtered_data = filtered_data[
        (filtered_data[indicator_column] >= legend_range[0]) & (filtered_data[indicator_column] <= legend_range[1])
    ]

    # Get countries visible on the choropleth map for the "Select Country" dropdown
    visible_countries = filtered_data['country'].unique()
    country_options = [{'label': country, 'value': country} for country in visible_countries]

    # Create the choropleth map
    fig = px.choropleth(
        filtered_data,
        locations="country",
        locationmode="country names",
        color=indicator_column,
        hover_name="country",
        hover_data={indicator_column: ':.1f'},
        color_continuous_scale=px.colors.sequential.YlOrRd,
        range_color=[legend_range[0], legend_range[1]],
        labels={indicator_column: legend_title},
    )

    fig.update_traces(hovertemplate=hover_template)
    fig.update_layout(
        geo=dict(showframe=False, showcoastlines=False),
        margin={"r": 0, "t": 50, "l": 0, "b": 0},
    )

    # Overlay shapefile boundaries if "Show Boundary" is checked
    if 'show' in show_shapefile:
        # Check if selected_actor and selected_year exist in shapefiles
        if (selected_actor, selected_year) in shapefiles:
            # Use individual actor shapefile
            shapefile = shapefiles.get((selected_actor, selected_year))
        else:
            # Use combined intersections shapefile for combinations
            shapefile = combined_intersections[combined_intersections['year'] == str(selected_year)]
            # Filter by 'inter' matching 'selected_actor'
            shapefile = shapefile[shapefile['inter'] == selected_actor]

        # Filter shapefile to only include visible countries
        shapefile = shapefile[shapefile['country'].isin(visible_countries)]

        # Proceed to plot shapefile boundaries if shapefile is not empty
        if not shapefile.empty:
            for _, row in shapefile.iterrows():
                if row['geometry'].geom_type == 'Polygon':
                    x, y = row['geometry'].exterior.xy
                    fig.add_trace(go.Scattergeo(
                        lon=list(x),
                        lat=list(y),
                        mode='lines',
                        line=dict(width=1, color='blue'),
                        fill='toself',
                        fillcolor='rgba(0, 0, 255, 0.2)',
                        hoverinfo="text",
                        hovertext=row['country'],
                        showlegend=False
                    ))
                elif row['geometry'].geom_type == 'MultiPolygon':
                    for polygon in row['geometry'].geoms:
                        x, y = polygon.exterior.xy
                        fig.add_trace(go.Scattergeo(
                            lon=list(x),
                            lat=list(y),
                            mode='lines',
                            line=dict(width=1, color='blue'),
                            fill='toself',
                            fillcolor='rgba(0, 0, 255, 0.2)',
                            hoverinfo="text",
                            hovertext=row['country'],
                            showlegend=False
                        ))

    return sex_age_options, sex_age_value, country_options, selected_country, fig, min_val, max_val, marks, legend_range, selected_year, selected_actor, selected_indicator, show_shapefile


# Toggle "Learn More" visibility
@app.callback(
    Output("collapse", "is_open"),
    [Input("collapse-button", "n_clicks")],
    [State("collapse", "is_open")],
)
def toggle_collapse(n, is_open): 
    if n:
        return not is_open
    return is_open

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