add adaptation page

chjch · Feb 29, 2024 · a267e8e · a267e8e
1 parent 3eed3fe
commit a267e8e
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 46 deletions.
diff --git a/app/assets/style.css b/app/assets/style.css
@@ -192,6 +192,13 @@ td {
     background-color: #4E9BEE;
 }
 
+#adaptation-button {
+    background-color: #FF5500;
+}
+#adaptation-button:hover {
+    background-color: #FFAA00;
+}
+
 .homebtn {
     padding: 10px 25px;
     font-size: 14px;

diff --git a/app/navbar.py b/app/navbar.py
@@ -9,16 +9,18 @@
     dbc.Row(
         [
             dbc.Col(html.Img(src=NAVBAR_LOGO, height="45px")),
-            dbc.Col(dbc.NavbarBrand(
-                NAVBAR_BRAND_TITLE,
-                className="ms-2",
-                style={
-                    "font-size": "1.6em",
-                    "font-family": "poppins",
-                    "padding-left": "20px",
-                    "color": "#0E3183",
-                }
-            )),
+            dbc.Col(
+                dbc.NavbarBrand(
+                    NAVBAR_BRAND_TITLE,
+                    className="ms-2",
+                    style={
+                        "font-size": "1.6em",
+                        "font-family": "poppins",
+                        "padding-left": "20px",
+                        "color": "#0E3183",
+                    },
+                )
+            ),
         ],
         align="center",
         className="g-0",
@@ -28,46 +30,46 @@
 )
 
 
-def navbar_link(name: str, href: str):
+def navbar_btn(name: str, href: str):
     return dbc.Col(
         dbc.Button(
             name,
             # color="primary",
             # active=True,
             id=f"{name.replace(' ', '').lower()}-button",
-            href=f'/viewer/{href}',
+            href=f"/viewer/{href}",
             className="ms-2 rounded-pill btn",
             n_clicks=0,
         ),
         width="auto",
     )
 
 
-overview_link = navbar_link('Housing',
-                            'housing')
-transport_link = navbar_link('Transportation',
-                             'transportation')
-housing_link = navbar_link('Critical Infrastructure',
-                           'critical-infrastructure')
-community_link = navbar_link('Community Services',
-                             'community-services')
-resource_link = navbar_link('Natural & Cultural Resources',
-                            'natural-cultural-resources')
-tourist_link = navbar_link('Local Economy',
-                           'local-economy')
-
 navbar_right = dbc.Row(
     dbc.Row(
         children=[
-            overview_link,
-            transport_link,
-            housing_link,
-            community_link,
-            resource_link,
-            tourist_link
+            navbar_btn(
+                "Housing", "housing"
+            ),
+            navbar_btn(
+                "Transportation", "transportation"
+            ),
+            navbar_btn(
+                "Critical Infrastructure", "critical-infrastructure"
+            ),
+            navbar_btn(
+                "Community Services", "community-services"
+            ),
+            navbar_btn(
+                "Natural & Cultural Resources", "natural-cultural-resources"
+            ),
+            navbar_btn(
+                "Local Economy", "local-economy"
+            ),
+            navbar_btn("Adaptation", "adaptation"),
         ],
         className="g-0 flex-nowrap mt-3 mt-md-0",
-        id="navbar-links-group"
+        id="navbar-links-group",
     ),
     className="ms-auto hidden-1500 hidden-mobile",
     # align="center",
@@ -78,30 +80,38 @@ def navbar_link(name: str, href: str):
         dbc.DropdownMenu(
             [
                 dbc.DropdownMenuItem(
-                    "HOUSING", id="dropdown-button", href="/viewer/housing",
+                    "HOUSING",
+                    id="dropdown-button",
+                    href="/viewer/housing",
                 ),
                 dbc.DropdownMenuItem(
-                    "TRANSPORTATION", href="/viewer/transportation",
+                    "TRANSPORTATION",
+                    href="/viewer/transportation",
                 ),
                 dbc.DropdownMenuItem(
-                    "CRITICAL INFRASTRUCTURE", href="/viewer/critical-infrastructure",
+                    "CRITICAL INFRASTRUCTURE",
+                    href="/viewer/critical-infrastructure",
                 ),
                 dbc.DropdownMenuItem(
-                    "COMMUNITY SERVICES", href="/viewer/community-services",
+                    "COMMUNITY SERVICES",
+                    href="/viewer/community-services",
                 ),
                 dbc.DropdownMenuItem(
-                    "NATURAL & CULTURAL", href="/viewer/natural-cultural-resources",
+                    "NATURAL & CULTURAL",
+                    href="/viewer/natural-cultural-resources",
                 ),
                 dbc.DropdownMenuItem(
-                    "LOCAL ECONOMY", href="/viewer/local-economy",
+                    "LOCAL ECONOMY",
+                    href="/viewer/local-economy",
                 ),
                 dbc.DropdownMenuItem(
-                    "ADAPTATION", href="/viewer/adaptation",
+                    "ADAPTATION",
+                    href="/viewer/adaptation",
                 ),
             ],
             label="Category",
             align_end=True,
-            className="show-1500 hidden-mobile"
+            className="show-1500 hidden-mobile",
         ),
     ]
 )
@@ -111,19 +121,22 @@ def navbar_link(name: str, href: str):
         [
             navbar_brand,
             dbc.NavbarToggler(id="navbar-toggler", n_clicks=0),
-            navbar_right,
+            dbc.Collapse(
+                navbar_right, id="navbar-collapse", is_open=False, navbar=True
+            ),
             dropdown,
         ],
         fluid=True,
-        class_name='px-4',
+        class_name="px-4",
     ),
     id="navbar",
     color="#ffffff",
     dark=False,
-    class_name='px-4 py-3',
+    class_name="px-4 py-3",
     # style={'box-shadow': '1px 1px 1px black'}
 )
 
+
 @callback(
     Output("item-clicks", "children"), [Input("dropdown-button", "n_clicks")]
 )

diff --git a/app/pages/viewer.py b/app/pages/viewer.py
@@ -431,9 +431,23 @@ def update_map(pathname, x_value, y_value, basemap):
         Output("map", "className"),
         Output("content", "className")
     ],
-    [Input("map-expansion-btn", "n_clicks")],
+    [
+        Input("map-expansion-btn", "n_clicks"),
+        Input("sub-path", "pathname")
+    ],
 )
-def expand_map(n):
+def expand_map(n, pathname):
+    pathname = "/" + pathname.split("/")[-1]
+    if pathname == "/adaptation":
+        return (
+            False,
+            False,
+            False,
+            {"width": "100%"},
+            "pretty_container_expanded",
+            "map_viewport_expanded",
+            "g-0 px-0",
+        )
     if n == 0:
         return no_update
     if n % 2 == 0:
@@ -647,6 +661,26 @@ def toggle_map_expand_btn(is_open):
         return "fas fa-compress"
 
 
+@callback(
+    Output("map-expansion-btn", "className"),
+    [Input("sub-path", "pathname")],
+)
+def hide_map_expand_btn(pathname):
+    pathname = "/" + pathname.split("/")[-1]
+    if pathname == "/adaptation":
+        return "d-none"
+
+
+@callback(
+    Output("legend-button", "className"),
+    [Input("sub-path", "pathname")],
+)
+def hide_legend_button(pathname):
+    pathname = "/" + pathname.split("/")[-1]
+    if pathname == "/adaptation":
+        return "d-none"
+
+
 # add callback for toggling the collapse on small screens
 @callback(
     Output("navbar-collapse", "is_open"),

diff --git a/app/slr_deck.py b/app/slr_deck.py
@@ -1,5 +1,4 @@
 import pandas as pd
-import pandas as pd
 import json
 
 import dash_deck
@@ -214,6 +213,17 @@ def slr_scenario(pathname, scn_code, year, default_mb_style):
         "id": f"slr-tile-{scn_code}-{year}",
         "opacity": 0.8,
     }
+    adapt_plan_layer = {
+        "@@type": "MyTileLayer",
+        "data": (
+            "https://tiles.arcgis.com/tiles/LBbVDC0hKPAnLRpO/arcgis/"
+            "rest/services/PSJ_adaptation_plan/MapServer/WMTS/tile/"
+            "1.0.0/PSJ_adaptation_plan/default/default028mm"
+            "/{z}/{y}/{x}.png"
+        ),
+        "id": "adaptation-plan",
+        "opacity": 1,
+    }
     road_segment_layer = {
         "@@type": "PathLayer",
         "data": json.loads(road_path_layer_data(scn_code, year)),
@@ -252,6 +262,17 @@ def slr_scenario(pathname, scn_code, year, default_mb_style):
             bfp_layer
         ]
         tooltip_html = tooltip_housing_html
+    elif pathname == "/adaptation":  # pathname == "/adaptation":
+        layers = [
+            adapt_plan_layer,
+            bldg_3d_data(
+                2422314,  # all buildings
+                [710, 710, 710, 220],
+                "bldg-3d-transport"
+            ),
+            bfp_layer,
+        ]
+        tooltip_html = tooltip_housing_html
     else:
         layers = [
             slr_tile_layer,