diff --git a/eu_fact_force/dash-app/app.py b/eu_fact_force/dash-app/app.py index aa0074d..4820d55 100644 --- a/eu_fact_force/dash-app/app.py +++ b/eu_fact_force/dash-app/app.py @@ -10,7 +10,7 @@ import plotly.io as pio from dash import ALL, Dash, Input, Output, State, ctx, dcc, html, no_update from dash.exceptions import PreventUpdate -from pages import graph, ingest, readme +from pages import graph, ingest, readme, pgp from utils.colors import EUPHAColors from utils.graph import BackendGraph, format_node_metadata from utils.parsing import extract_pdf_metadata @@ -40,6 +40,7 @@ "Readme": {"href": "/", "content": readme}, "Ingestion": {"href": "/ingest", "content": ingest}, "Graph": {"href": "/graph", "content": graph}, + "PGP Dashboard": {"href": "/pgp", "content": pgp}, } # Header and navigation diff --git a/eu_fact_force/dash-app/pages/pgp.py b/eu_fact_force/dash-app/pages/pgp.py new file mode 100644 index 0000000..d2cb0df --- /dev/null +++ b/eu_fact_force/dash-app/pages/pgp.py @@ -0,0 +1,125 @@ +from dash import html, dcc + +def make_layout(): + + return html.Div( + + style={ + "backgroundColor": "#F8FAFC", + "fontFamily": "Arial", + "padding": "20px" + }, + + children=[ + + # HEADER + html.Div( + children=[ + html.H1( + "PGP Dashboard", + style={ + "color": "white", + "textAlign": "center", + "margin": "0" + } + ) + ], + style={ + "backgroundColor": "#0B5FA5", + "padding": "18px", + "borderRadius": "10px", + "boxShadow": "0px 2px 6px rgba(0,0,0,0.15)" + } + ), + + html.Br(), + + # FILTERS + html.Div( + + children=[ + + html.H3( + "Filters", + style={"marginBottom": "15px"} + ), + + html.Div( + + style={ + "display": "flex", + "gap": "15px", + "flexWrap": "wrap" + }, + + children=[ + + dcc.Dropdown( + id="metric-filter", + placeholder="Select metric", + options=[ + {"label": "Metric A", "value": "A"}, + {"label": "Metric B", "value": "B"}, + ], + style={"width": "260px"} + ), + + dcc.Dropdown( + id="context-filter", + placeholder="Select category / country", + options=[ + {"label": "France", "value": "FR"}, + {"label": "Germany", "value": "DE"}, + ], + style={"width": "260px"} + ), + + ] + ) + ], + + style={ + "backgroundColor": "white", + "padding": "18px", + "borderRadius": "10px", + "boxShadow": "0px 2px 6px rgba(0,0,0,0.08)" + } + ), + + html.Br(), + + # VISUALIZATIONS + html.Div( + + children=[ + + html.H3("Visualizations"), + + html.Div( + + style={ + "display": "grid", + "gridTemplateColumns": "1fr 1fr", + "gap": "20px" + }, + + children=[ + + dcc.Graph(id="graph-1"), + dcc.Graph(id="graph-2"), + + ] + ) + + ], + + style={ + "backgroundColor": "white", + "padding": "20px", + "borderRadius": "10px", + "boxShadow": "0px 2px 6px rgba(0,0,0,0.08)" + } + ) + + ] + ) \ No newline at end of file