[ENH] Add user help text and disable all drag + zoom plot interactions

.pre-commit-config.yaml

@@ -40,6 +40,7 @@ repos:
     rev: v2.3.0
     hooks:
     -   id: codespell
+        args: [--ignore-words-list=doubleClick]
 
 -   repo: https://github.com/PyCQA/flake8
     rev: 7.1.1

climate_emotions_map/app.py

@@ -32,6 +32,9 @@
 app = Dash(
     __name__,
     title="US Climate Emotions Map",
+    external_stylesheets=[
+        "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"
+    ],
 )
 
 app.layout = dmc.MantineProvider(construct_layout(), forceColorScheme="light")

climate_emotions_map/layout.py

@@ -18,7 +18,9 @@
 HEADER_HEIGHT = 110
 
 SUPP_TEXT = {
+    "hover_tip": "Hover over bars for full proportions",
     "weighted_descriptives": "*N are unweighted while proportions are weighted according to US census estimates for age, sex, race, and ethnicity",
+    "map_disclaimer": "Map does not support making statistical comparisons between states",
 }
 
 MAP_LAYOUT = {
@@ -32,6 +34,13 @@
     "margin": {"l": 30, "r": 30, "t": 10, "b": 20},
 }
 
+# See https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js for all options
+DCC_GRAPH_CONFIG = {
+    "displayModeBar": False,
+    "scrollZoom": False,
+    "doubleClick": "reset",
+}
+
 
 def create_question_dropdown():
     """
@@ -107,6 +116,16 @@ def create_drawer_sample_size():
     return dmc.Text(id="drawer-sample-size", size="md")
 
 
+def create_sample_descriptives_hover_tip():
+    """Create the tip to hover over bars in the sample characteristics drawer."""
+    return dmc.Text(
+        children=SUPP_TEXT["hover_tip"],
+        fs="italic",
+        size="sm",
+        mt="xs",
+    )
+
+
 def create_sample_descriptive_note():
     """Create the note for the sample characteristics section."""
     return dmc.Text(
@@ -122,7 +141,7 @@ def create_sample_descriptive_plot():
         figure=make_descriptive_plots(
             state=None,
         ),
-        config={"displayModeBar": False},
+        config=DCC_GRAPH_CONFIG,
         # TODO: Revisit
         # We use px instead of viewport height here for now to more easily control scrolling
         # on smaller screens
@@ -143,6 +162,7 @@ def create_sample_description_drawer():
                 children=[
                     create_drawer_state(),
                     create_drawer_sample_size(),
+                    create_sample_descriptives_hover_tip(),
                     create_sample_descriptive_plot(),
                     create_sample_descriptive_note(),
                 ],
@@ -266,11 +286,28 @@ def create_header():
                                 gap=5,
                                 justify="center",
                                 children=[
-                                    dmc.Anchor(
-                                        SECTION_TITLES["app"],
-                                        size="xl",
-                                        href="/",
-                                        underline=False,
+                                    dmc.Grid(
+                                        children=[
+                                            dmc.GridCol(
+                                                dmc.Anchor(
+                                                    SECTION_TITLES["app"],
+                                                    size="xl",
+                                                    href="/",
+                                                    underline=False,
+                                                ),
+                                                span="content",
+                                            ),
+                                            # TODO: Uncomment once the more info page is created
+                                            # dmc.GridCol(
+                                            #     dmc.Anchor(
+                                            #         SECTION_TITLES["more_info"],
+                                            #         href="/"
+                                            #     ),
+                                            #     span="content"
+                                            # )
+                                        ],
+                                        justify="space-between",
+                                        align="flex-end",
                                     ),
                                     create_app_subtitle(),
                                 ],
@@ -309,17 +346,14 @@ def create_map_title():
 
 def create_impact_dropdown():
     """Create the dropdown for selecting the impact to display."""
-    return dmc.Flex(
-        dmc.Select(
-            id="impact-select",
-            label="Distribution of severe weather events (self-reported)",
-            placeholder="Select a severe weather event",
-            data=utils.get_impact_options(),
-            clearable=True,
-            searchable=True,
-            nothingFoundMessage="No matches",
-        ),
-        justify="flex-end",
+    return dmc.Select(
+        id="impact-select",
+        label="Distribution of severe weather events (self-reported)",
+        placeholder="Select a severe weather event",
+        data=utils.get_impact_options(),
+        clearable=True,
+        searchable=True,
+        nothingFoundMessage="No matches",
     )
 
 
@@ -338,7 +372,7 @@ def create_map_plot():
             ),
             # vh = % of viewport height
             # TODO: Revisit once plot margins are adjusted
-            config={"displayModeBar": False, "scrollZoom": False},
+            config=DCC_GRAPH_CONFIG,
             style={"height": "65vh"},
         ),
         # set max width
@@ -349,6 +383,25 @@ def create_map_plot():
     return us_map
 
 
+def create_map_disclaimer():
+    """Create the disclaimer for the map section of the dashboard."""
+    return dmc.Flex(
+        [
+            html.I(
+                className="bi bi-exclamation-circle", style={"fontSize": 15}
+            ),
+            dmc.Text(
+                children=SUPP_TEXT["map_disclaimer"],
+                fs="italic",
+                size="sm",
+                # ta="center",
+            ),
+        ],
+        gap=5,
+        align="center",
+    )
+
+
 def create_domain_heading(domain_text: str) -> dmc.Title:
     """Create a domain heading for the stacked bar plots."""
     return dmc.Title(
@@ -391,7 +444,7 @@ def create_bar_plots_for_question(question_id: str, subquestion_id: str):
                 stratify=False,
                 threshold=DEFAULT_QUESTION["outcome"],
             ),
-            config={"displayModeBar": False},
+            config=DCC_GRAPH_CONFIG,
         ),
         w=1200,
         # size="xl",
@@ -419,7 +472,7 @@ def create_selected_question_bar_plot():
                 threshold=DEFAULT_QUESTION["outcome"],
                 fig_kw=SINGLE_SUBQUESTION_FIG_KW,
             ),
-            config={"displayModeBar": False},
+            config=DCC_GRAPH_CONFIG,
         ),
         w=1200,
     )
@@ -529,7 +582,20 @@ def create_main():
                 fluid=True,
                 children=[
                     create_map_title(),
-                    create_impact_dropdown(),
+                    dmc.Grid(
+                        [
+                            dmc.GridCol(
+                                create_map_disclaimer(),
+                                span="content",
+                            ),
+                            dmc.GridCol(
+                                create_impact_dropdown(),
+                                span="content",
+                            ),
+                        ],
+                        justify="space-between",
+                        align="flex-end",
+                    ),
                     create_map_plot(),
                     create_selected_question_bar_plot(),
                     create_all_questions_section_title(),

climate_emotions_map/make_descriptive_plots.py

@@ -423,6 +423,7 @@ def make_descriptive_plots(
         margin=margins,
         template="plotly_white",
         font={"size": 10},
+        dragmode=False,
     )
     fig.update_annotations(font_size=12)
 

climate_emotions_map/make_map.py

@@ -290,6 +290,7 @@ def make_map(
     fig.update_layout(
         geo_scope="usa",
         margin=margins,
+        dragmode=False,
     )
 
     return fig

climate_emotions_map/make_stacked_bar_plots.py

@@ -320,7 +320,7 @@ def plot_bars(
     fig.update_layout(
         uniformtext_minsize=fig_kw["fontsize"], uniformtext_mode="hide"
     )
-    fig.update_layout(showlegend=False)
+    fig.update_layout(showlegend=False, dragmode=False)
 
     return fig
 

climate_emotions_map/utility.py

@@ -11,6 +11,7 @@
 ALL_STATES_LABEL = "National"
 SECTION_TITLES = {
     "app": "US Climate Emotions Map (16-25 years old)",
+    "more_info": "About & Methodology",
     "map_opinions": "Percent (%) of adolescents and young adults who endorse the following question/statement:",
     "map_impacts": "Map: Percent (%) of adolescents and young adults who reported experiencing the following in the last year",
     "all_questions": "Select a survey domain to view responses for",