[Dash] Lock Zoom

Zoom Persists on parameter updates when the "Lock Zoom" button is in the on position
Removed "max_y_axis" feature

Author: Andrew DiBiasio

src/chime_dash/app/components/visualizations.py

@@ -10,7 +10,7 @@
 from dash.development.base_component import ComponentMeta
 from dash_html_components import H2, Div, A
 from dash_core_components import Markdown, Graph
-from dash_bootstrap_components import Table, Container
+from dash_bootstrap_components import Table, Container, Button
 
 from chime_dash.app.components.base import Component
 
@@ -50,6 +50,16 @@ def get_html(self) -> List[ComponentMeta]:
                     target="_blank",
                     className="btn btn-sm btn-info",
                 ),
+                Div(
+                    children=Button(
+                        "Lock Zoom", 
+                        id="new_admissions_lock_zoom", 
+                        color="info", 
+                        outline=False,
+                        className="btn btn-sm"
+                        ),
+                    style={"display": "inline-block", "padding": 10}
+                ),
                 Div(
                     className="row justify-content-center",
                     children=Div(
@@ -79,6 +89,16 @@ def get_html(self) -> List[ComponentMeta]:
                     target="_blank",
                     className="btn btn-sm btn-info",
                 ),
+                Div(
+                    children=Button(
+                        "Lock Zoom", 
+                        id="admitted_patients_lock_zoom", 
+                        color="info", 
+                        outline=False, 
+                        className="btn btn-sm"
+                        ),
+                    style={"display": "inline-block", "padding": 10}
+                ),
                 Div(
                     className="row justify-content-center",
                     children=Div(
@@ -108,6 +128,16 @@ def get_html(self) -> List[ComponentMeta]:
                     target="_blank",
                     className="btn btn-sm btn-info my-4",
                 ),
+                Div(
+                    children=Button(
+                        "Lock Zoom", 
+                        id="SIR_lock_zoom", 
+                        color="info", 
+                        outline=False, 
+                        className="btn btn-sm"
+                        ),
+                    style={"display": "inline-block", "padding": 10}
+                ),
                 Div(
                     className="row justify-content-center",
                     children=Div(

src/chime_dash/app/pages/sidebar.py

@@ -88,8 +88,7 @@
         "initial_visible_month": date.today(),
         "date": date.today(),
     },
-    max_y_axis_value={"type": "number", "min": 10, "step": 10, "value": None},
-    show_tables={"type": "switch", "value": False},
+    show_tables={"type": "switch", "value": False}
 ))
 
 

src/chime_dash/app/services/callbacks.py

@@ -30,7 +30,14 @@ def toggle_tables(switch_value):
         return get_n_switch_values(switch_value, 3)
 
     @staticmethod
-    def handle_model_change(i, sidebar_data):
+    def change_btn_color(n_clicks):
+        try:
+            return [False] if n_clicks % 2 == 0 else [True]
+        except:
+            return [False]
+
+    @staticmethod
+    def handle_model_change(i, sidebar_data, lock_zoom_clicks, graphs_relayout_data):
         model = {}
         pars = None
         result = []
@@ -44,7 +51,6 @@ def handle_model_change(i, sidebar_data):
             viz_kwargs = dict(
                 labels=pars.labels,
                 table_mod=7,
-                max_y_axis=pars.max_y_axis,
                 content=vis_content
             )
         result.extend(i.components["intro"].build(model, pars))
@@ -53,11 +59,42 @@ def handle_model_change(i, sidebar_data):
             if model:
                 df = model.__dict__.get(df_key, None)
             result.extend(prepare_visualization_group(df, **viz_kwargs))
+
+        figures = [result[1], result[4], result[7]]
+
+        for n_clicks, relayout_data, figure in zip(lock_zoom_clicks, graphs_relayout_data, figures):
+            if relayout_data:
+                if n_clicks == None or n_clicks % 2 == 0:
+                    # Set plot_data figure coordinates 
+                    if "xaxis.range[0]" in relayout_data:
+                        figure["layout"]["xaxis"]["range"] = [
+                            relayout_data["xaxis.range[0]"],
+                            relayout_data["xaxis.range[1]"]
+                        ]
+                    if "yaxis.range[0]" in relayout_data:
+                        figure["layout"]["yaxis"]["range"] = [
+                            relayout_data["yaxis.range[0]"],
+                            relayout_data["yaxis.range[1]"]
+                        ]
+                            
         return result
 
     def __init__(self, component_instance):
-        def handle_model_change_helper(sidebar_mod, sidebar_data):
-            return IndexCallbacks.handle_model_change(component_instance, sidebar_data)
+        def handle_model_change_helper(
+            sidebar_mod, 
+            new_admissions_lock_zoom, 
+            admitted_patients_lock_zoom,
+            SIR_lock_zoom,
+            sidebar_data, 
+            new_admissions_relayout_data, 
+            admitted_patients_relayout_data,
+            SIR_relayout_data
+            ):
+            # parameter order: Inputs (sidebar_mod and all lock_zooms) followed by States (sidebar_data and all relayout_datas)
+            # Order matters; callback_wrapper passes in Inputs before States
+            lock_zoom_clicks = [new_admissions_lock_zoom, admitted_patients_lock_zoom, SIR_lock_zoom]
+            graphs_relayout_data = [new_admissions_relayout_data, admitted_patients_relayout_data, SIR_relayout_data]
+            return IndexCallbacks.handle_model_change(component_instance, sidebar_data, lock_zoom_clicks, graphs_relayout_data)
 
         super().__init__(
             component_instance=component_instance,
@@ -72,7 +109,12 @@ def handle_model_change_helper(sidebar_mod, sidebar_data):
                     callback_fn=IndexCallbacks.toggle_tables
                 ),
                 ChimeCallback(  # If the parameters or model change, update the text
-                    changed_elements={"sidebar-store": "modified_timestamp"},
+                    changed_elements={
+                        "sidebar-store": "modified_timestamp",
+                        "new_admissions_lock_zoom": "n_clicks",
+                        "admitted_patients_lock_zoom": "n_clicks",
+                        "SIR_lock_zoom": "n_clicks"
+                        },
                     dom_updates={
                         "intro": "children",
                         "new_admissions_graph": "figure",
@@ -85,8 +127,28 @@ def handle_model_change_helper(sidebar_mod, sidebar_data):
                         "SIR_table": "children",
                         "SIR_download": "href",
                     },
-                    callback_fn=handle_model_change_helper,
+                    states={
+                        "new_admissions_graph": "relayoutData",
+                        "admitted_patients_graph": "relayoutData",
+                        "SIR_graph": "relayoutData"
+                        },
                     stores=["sidebar-store"],
+                    callback_fn=handle_model_change_helper
+                ),
+                ChimeCallback( # If user presses the Lock Zoom Button, update outline / solid color
+                    changed_elements={"new_admissions_lock_zoom": "n_clicks"},
+                    dom_updates={"new_admissions_lock_zoom": "outline"},
+                    callback_fn=IndexCallbacks.change_btn_color
+                ),
+                ChimeCallback(
+                    changed_elements={"admitted_patients_lock_zoom": "n_clicks"},
+                    dom_updates={"admitted_patients_lock_zoom": "outline"},
+                    callback_fn=IndexCallbacks.change_btn_color
+                ),
+                ChimeCallback(
+                    changed_elements={"SIR_lock_zoom": "n_clicks"},
+                    dom_updates={"SIR_lock_zoom": "outline"},
+                    callback_fn=IndexCallbacks.change_btn_color
                 )
             ]
         )
@@ -139,8 +201,7 @@ def update_parameters(i, *input_values) -> List[dict]:
             ventilated=Disposition.create(
                 days=inputs_dict["ventilated_los"],
                 rate=inputs_dict["ventilated_rate"] / 100,
-            ),
-            max_y_axis=inputs_dict.get("max_y_axis_value", None),
+            )
         )
         return [{"inputs_dict": inputs_dict, "parameters": parameters_serializer(pars)}]
 

src/chime_dash/app/services/plotting.py

@@ -7,22 +7,13 @@
 from pandas import DataFrame
 
 
-def plot_dataframe(
-    dataframe: DataFrame,
-    max_y_axis: int = None,
-) -> Dict[str, Any]:
+def plot_dataframe(dataframe: DataFrame) -> Dict[str, Any]:
     """Returns dictionary used for plotly graphs
 
     Arguments:
         dataframe: The dataframe to plot. Plots all columns as y, index is x.
-        max_y_axis: Maximal value on y-axis.
     """
 
-    if max_y_axis is None:
-        yaxis = {}
-    else:
-        yaxis = {"range": (0, max_y_axis), "autorange": False}
-
     return {
         "data": [
             {
@@ -34,7 +25,8 @@ def plot_dataframe(
             for col in dataframe.columns
         ],
         "layout": {
-            "yaxis": yaxis,
+            "xaxis": {},
+            "yaxis": {},
             "legend": {"orientation": "h"},
         },
     }

src/chime_dash/app/templates/en/sidebar.yml

@@ -20,8 +20,6 @@ ventilated_los: Average days on ventilator
 display_parameters: Display Parameters
 n_days: Number of days to project
 current_date: Current date (default is today)
-max_y_axis: Set the Y-axis on graphs to a static
-max_y_axis_value: Maximal y-axis value (leave blank for no max value)
 show_tables: Show tables with data
 show_tool_details: Show more info about this tool
 show_additional_projections: Show additional projections

src/chime_dash/app/utils/__init__.py

@@ -82,7 +82,6 @@ def parameters_deserializer(p_json: str):
         date_first_hospitalized=dates["date_first_hospitalized"],
         doubling_time=values["doubling_time"],
         market_share=values["market_share"],
-        max_y_axis=values["max_y_axis"],
         mitigation_date=dates["mitigation_date"],
         n_days=values["n_days"],
         population=values["population"],
@@ -120,8 +119,6 @@ def prepare_visualization_group(df: DataFrame = None, **kwargs) -> List[Any]:
         df: The Dataframe to plot
         content: Dict[str, str]
             Mapping for translating columns and index.
-        max_y_axis:  int
-            Maximal value on y-axis
         labels: List[str]
             Columns to display
         table_mod: int
@@ -148,11 +145,9 @@ def prepare_visualization_group(df: DataFrame = None, **kwargs) -> List[Any]:
             day_column = content.get(day_column, day_column)
 
         plot_data = plot_dataframe(
-            df.dropna().set_index(date_column).drop(columns=[day_column]),
-            max_y_axis=kwargs.get("max_y_axis", None),
+            df.dropna().set_index(date_column).drop(columns=[day_column])
         )
 
-
         # translate back for backwards compability of build_table
         column_map = {day_column: "day", date_column: "date"}
         table = (

src/chime_dash/app/utils/callbacks.py

@@ -11,6 +11,7 @@ def __init__(self,
                  callback_fn: Callable,
                  dom_updates: Mapping = None,
                  stores: Iterable = None,
+                 states: Mapping = None,
                  memoize: bool = True
                  ):
         self.inputs = [
@@ -19,6 +20,7 @@ def __init__(self,
         ]
         self.outputs = []
         self.stores = []
+        self.states = []
         self.callback_fn = callback_fn
         self.memoize = memoize
         if dom_updates:
@@ -27,20 +29,25 @@ def __init__(self,
                 for component_id, component_property in dom_updates.items()
             )
         if stores:
-            self.stores.extend(
+            self.states.extend(
                 State(component_id=component_id, component_property="data")
                 for component_id in stores
             )
+            if states:
+                self.states.extend(
+                    State(component_id=component_id, component_property=component_property)
+                    for component_id, component_property in states.items()
+                )
 
     def wrap(self, app: Dash):
         if self.memoize:
             @lru_cache(maxsize=32)
-            @app.callback(self.outputs, self.inputs, self.stores)
+            @app.callback(self.outputs, self.inputs, self.states)
             def callback_wrapper(*args, **kwargs):
                 print(str(self.callback_fn))
                 return self.callback_fn(*args, **kwargs)
         else:
-            @app.callback(self.outputs, self.inputs, self.stores)
+            @app.callback(self.outputs, self.inputs, self.states)
             def callback_wrapper(*args, **kwargs):
                 return self.callback_fn(*args, **kwargs)