Merge pull request #29 from OCHA-DAP/layout-updates

Layout updates
OCHA-DAP · Nov 25, 2024 · 34f3106 · 34f3106
2 parents 13cdeea + efa2d84
commit 34f3106
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 36 deletions.
diff --git a/app.py b/app.py
@@ -6,7 +6,7 @@
 from layouts.navbar import module_bar, navbar
 from utils.log_utils import setup_logging
 
-app = Dash(__name__, update_title=None)
+app = Dash(__name__, update_title=None, suppress_callback_exceptions=True)
 server = app.server
 app.title = "Flood Exposure"
 

diff --git a/assets/Stag Regular.woff b/assets/Stag Regular.woff
diff --git a/assets/bootstrap.css b/assets/bootstrap.css
diff --git a/callbacks/callbacks.py b/callbacks/callbacks.py
@@ -4,7 +4,7 @@
 from dash_extensions.javascript import arrow_function, assign
 
 # TODO: Be more careful with engine?
-from constants import ATTRIBUTION, CHD_GREEN, URL, engine
+from constants import ATTRIBUTION, CHD_GREEN, URL, URL_LABELS, engine
 from utils.chart_utils import create_return_period_plot, create_timeseries_plot
 from utils.data_utils import (calculate_return_periods, fetch_flood_data,
                               get_summary, process_flood_data)
@@ -81,6 +81,11 @@ def set_adm_value(adm_level):
             dl.TileLayer(url=URL, attribution=ATTRIBUTION),
             dl.Pane(adm0, style={"zIndex": 1001}, name="adm0"),
             dl.Pane(geojson, style={"zIndex": 1000}, name="sel"),
+            dl.Pane(
+                dl.TileLayer(url=URL_LABELS, attribution=ATTRIBUTION),
+                name="tile",
+                style={"zIndex": 1002},
+            ),
         ]
 
     @app.callback(

diff --git a/constants.py b/constants.py
@@ -38,3 +38,4 @@
 
 ATTRIBUTION = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'
 URL = "https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png"
+URL_LABELS = "https://{s}.basemaps.cartocdn.com/rastertiles/voyager_only_labels/{z}/{x}/{y}{r}.png"
diff --git a/layouts/content.py b/layouts/content.py
@@ -6,7 +6,7 @@
 from constants import ATTRIBUTION, URL
 
 NAVBAR_HEIGHT = 60 + 48
-GUTTER = 15
+GUTTER = 10
 
 
 def content():
@@ -15,36 +15,27 @@ def content():
             [
                 # ---- Side info bar ----
                 dbc.Col(
-                    width=3,
-                    style={
-                        "border": "1px solid #dbdbdb",
-                        "backgroundColor": "white",
-                        "height": f"calc(100vh - {NAVBAR_HEIGHT + (GUTTER * 2)}px)",
-                        "margin": f"{GUTTER}px",
-                        "marginRight": f"{GUTTER / 2}px",
-                        "minHeight": "500px",
-                    },
+                    width=2,
                     className="g-0",
                     children=info_container(),
                 ),
                 # ---- Map / chart column ----
                 dbc.Col(
-                    width=True,
+                    width=10,
                     style={
                         "backgroundColor": "#f5f5f5",
-                        "height": f"calc(100vh - {NAVBAR_HEIGHT + (GUTTER * 2)}px)",
-                        "margin": f"{GUTTER}px",
-                        "marginLeft": f"{GUTTER / 2}px",
+                        "height": f"calc(100vh - {NAVBAR_HEIGHT}px)",
                     },
                     children=[
                         # -- Map --
                         dbc.Row(
                             dbc.Col(map_container()),
                             style={
                                 "backgroundColor": "white",
-                                "height": f"calc(100% - {300 + GUTTER}px)",
+                                "height": f"calc(100% - {400 + GUTTER * 3}px)",
                                 "border": "1px solid #dbdbdb",
                                 "minHeight": "150px",
+                                "marginTop": f"{GUTTER}px",
                             },
                             className="g-0",
                         ),
@@ -54,9 +45,10 @@ def content():
                             style={
                                 "border": "1px solid #dbdbdb",
                                 "backgroundColor": "white",
-                                "height": "300px",
+                                "height": "400px",
                                 "marginTop": f"{GUTTER}px",
-                                "padding": "5px",
+                                "marginBottom": f"{GUTTER}px",
+                                "padding": "10px",
                             },
                             className="g-0",
                         ),
@@ -67,7 +59,7 @@ def content():
         ),
         style={
             "backgroundColor": "red",
-            "height": f"calc(100vh - {NAVBAR_HEIGHT}px)",
+            "height": f"calc(100vh - {NAVBAR_HEIGHT + GUTTER}px)",
         },
         fluid=True,
     )
@@ -79,15 +71,17 @@ def info_container():
             html.Div(
                 id="place-name",
                 style={"fontWeight": "bold", "fontSize": "24px"},
+                className="header",
             ),
             dmc.Space(h=20),
             html.Div(
                 id="num-exposed",
                 style={"fontSize": "18px"},
             ),
+            html.Div(id="test"),
             dmc.Space(h=20),
             dbc.Accordion(
-                style={"fontSize": "12px"},
+                style={"fontSize": "14px"},
                 children=[
                     dbc.AccordionItem(
                         [
@@ -136,7 +130,15 @@ def info_container():
             ),
         ],
         id="info-container",
-        style={"padding": "15px"},
+        style={
+            "padding": "15px",
+            "border": "1px solid #dbdbdb",
+            "backgroundColor": "white",
+            "height": f"calc(100vh - {NAVBAR_HEIGHT + GUTTER * 2}px)",
+            "minHeight": "500px",
+            "marginTop": GUTTER,
+            "marginLeft": GUTTER,
+        },
     )
 
 
@@ -196,5 +198,5 @@ def chart_container():
         [
             dbc.Tab(exposure_tab, label="Time series", tabClassName="ms-auto"),
             dbc.Tab(severity_tab, label="Return Period"),
-        ]
+        ],
     )
diff --git a/layouts/modal.py b/layouts/modal.py
@@ -5,7 +5,9 @@
 def disclaimer_modal():
     return dbc.Modal(
         [
-            dbc.ModalHeader(dbc.ModalTitle("Disclaimer"), close_button=True),
+            dbc.ModalHeader(
+                dbc.ModalTitle("Disclaimer", className="header"), close_button=True
+            ),
             dbc.ModalBody(
                 [
                     dcc.Markdown(

diff --git a/layouts/navbar.py b/layouts/navbar.py
@@ -14,11 +14,12 @@ def navbar():
                             dbc.Col(
                                 html.Img(
                                     src="assets/centre_banner_greenbg.png", height=40
-                                )
+                                ),
                             ),
                             dbc.Col(
                                 dbc.NavbarBrand(
-                                    "Risk Monitoring Dashboard", className="ms-2"
+                                    "Risk Monitoring Dashboard".upper(),
+                                    className=["ms-2", "header"],
                                 )
                             ),
                         ],
@@ -29,7 +30,8 @@ def navbar():
                     style={"textDecoration": "none"},
                 ),
                 dbc.NavbarToggler(id="navbar-toggler", n_clicks=0),
-            ]
+            ],
+            fluid=True,
         ),
         style={"height": f"{NAVBAR_HEIGHT}px", "margin": "0px", "padding": "10px"},
         color="primary",
@@ -45,6 +47,7 @@ def module_bar():
             "color": "white",
             "padding": "6px",
             "paddingLeft": "75px",
-            "fontSize": "24px",
+            "fontSize": "20px",
         },
+        className="header",
     )
diff --git a/utils/chart_utils.py b/utils/chart_utils.py
@@ -36,7 +36,7 @@ def create_timeseries_plot(df_seasonal, df_processed, peak_years, CHD_GREEN):
         template="simple_white",
         xaxis=dict(tickformat="%b %d", dtick="M1"),
         legend_title="Year<br><sup>(click to toggle)</sup>",
-        height=250,
+        height=340,
         margin={"t": 10, "l": 0, "r": 0, "b": 0},
         font=dict(family="Arial, sans-serif"),
     )
@@ -104,7 +104,7 @@ def create_return_period_plot(df_peaks, CHD_GREEN, rp=3):
     fig.update_layout(
         template="simple_white",
         xaxis=dict(dtick=1),
-        height=250,
+        height=340,
         showlegend=False,
         margin={"t": 10, "l": 0, "r": 0, "b": 0},
         font=dict(family="Arial, sans-serif"),
Original file line number	Diff line number	Diff line change
Expand Up		@@ -38,3 +38,4 @@

		ATTRIBUTION = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>'
		URL = "https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png"
		URL_LABELS = "https://{s}.basemaps.cartocdn.com/rastertiles/voyager_only_labels/{z}/{x}/{y}{r}.png"