Modified callbacks to support dash_core_components.Store rather than storing state in hidden Div

Moved Body class from `components/__init__.py` to `pages/root.py` and renamed to Root
Moved singleton decorator function from `components/__init__.py` to `utils/__init__.py`
Removed hidden Div that stored Parameters JSON string

Author: Eric Smyth

src/chime_dash/app/components/__init__.py

@@ -1,75 +1,12 @@
-"""Combines all components
+"""app/components
 
-The `sidebar` component combines all the inputs while other components potentially
-have callbacks.
+reusable components that desc a bit of UI - nothing should be defined here only initialized
 
-To add or remove components, adjust the `setup`.
-"""
-from collections import OrderedDict
-
-from dash_bootstrap_components import Container, Row
-from dash_bootstrap_components.themes import BOOTSTRAP
-from dash_html_components import Div
-
-from chime_dash.app.components.base import Component
-from chime_dash.app.components.navbar import Navbar
-from chime_dash.app.pages.index import Index
-from chime_dash.app.pages.sidebar import Sidebar
-
-
-def singleton(class_):
-    instances = {}
-
-    def get_instance(*args, **kwargs):
-        if class_ not in instances:
-            instances[class_] = class_(*args, **kwargs)
-        return instances[class_]
-    return get_instance
+for pages definitions see -> app/pages
+for core logic see --> app/services
+for utility classes and functions see --> utils
 
-
-@singleton
-class Body(Component):
-    """
-    """
-    external_stylesheets = [
-        BOOTSTRAP,
-        'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap',
-    ]
-
-    def __init__(self, language, defaults):
-        """
-        """
-        super().__init__(language, defaults)
-        self.components = OrderedDict(
-            navbar=Navbar(language, defaults),
-            sidebar=Sidebar(language, defaults),
-            # todo subscribe to changes to URL and select page appropriately
-            index=Index(language, defaults),
-        )
-
-    def get_html(self):
-        """Glues individual setup components together
-        """
-        return Div(
-            className="app",
-            children=self.components["navbar"].html + [
-                Div(
-                    className="app-content",
-                    children=self.components["sidebar"].html
-                    + self.components["index"].html
-                )
-            ]
-        )
-
-    def get_html_old(self):
-        """Glues individual setup components together
-        """
-        return Div(children=self.components["navbar"].html
-                   + [Container(
-                       children=Row(self.components["sidebar"].html + [Div(
-                           id="page-wrapper",
-                           children=self.components["index"].html
-                       )]),
-                       fluid=True,
-                       className="mt-5",
-                   )])
+modules         desc.       route
+----            ----        ----
+index           homepage    /
+"""

src/chime_dash/app/pages/root.py

@@ -0,0 +1,56 @@
+"""Combines all components
+
+The `sidebar` component combines all the inputs while other components potentially
+have callbacks.
+
+To add or remove components, adjust the `setup`.
+"""
+from collections import OrderedDict
+
+from dash_bootstrap_components import Container, Row
+from dash_bootstrap_components.themes import BOOTSTRAP
+from dash_html_components import Div
+from dash_core_components import Store
+
+from chime_dash.app.components.base import Page
+from chime_dash.app.components.navbar import Navbar
+from chime_dash.app.pages.index import Index
+from chime_dash.app.pages.sidebar import Sidebar
+from chime_dash.app.utils import singleton
+from chime_dash.app.services.callbacks import RootCallbacks
+
+@singleton
+class Root(Page):
+    """
+    """
+    external_stylesheets = [
+        BOOTSTRAP,
+        'https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap',
+    ]
+    callbacks_cls = RootCallbacks
+
+    def __init__(self, language, defaults):
+        """
+        """
+        super().__init__(language, defaults)
+        self.components = OrderedDict(
+            navbar=Navbar(language, defaults),
+            sidebar=Sidebar(language, defaults),
+            # todo subscribe to changes to URL and select page appropriately
+            index=Index(language, defaults),
+        )
+
+    def get_html(self):
+        """Glues individual setup components together
+        """
+        return Div(
+            className="app",
+            children=self.components["navbar"].html + [
+                Div(
+                    className="app-content",
+                    children=self.components["sidebar"].html
+                             + self.components["index"].html
+                ),
+                Store(id="root-store")
+            ]
+        )

src/chime_dash/app/pages/sidebar.py

@@ -117,9 +117,7 @@ class Sidebar(Page):
     def get_html(self) -> List[ComponentMeta]:
         """Initializes the view
         """
-        elements = [
-            Div(id='pars', style={'display': 'none'})
-        ]
+        elements = []
         for idx, data in _SIDEBAR_ELEMENTS.items():
             if data["type"] == "number":
                 element = create_number_input(idx, data, self.content, self.defaults)

src/chime_dash/app/run.py

@@ -5,12 +5,12 @@
 
 from dash import Dash
 from penn_chime.settings import DEFAULTS
-from chime_dash.app.components import Body
+from chime_dash.app.pages.root import Root
 from chime_dash.app.utils.callbacks import wrap_callbacks
 
 LANGUAGE = "en"
 
-body = Body(LANGUAGE, DEFAULTS)
+body = Root(LANGUAGE, DEFAULTS)
 
 DASH = Dash(
     __name__,

src/chime_dash/app/services/callbacks.py

@@ -53,7 +53,8 @@ def handle_model_change(i, pars_json):
         return result
 
     def __init__(self, component_instance):
-        def handle_model_change_helper(pars_json):
+        def handle_model_change_helper(*args, **kwargs):
+            pars_json = args[1]
             return IndexCallbacks.handle_model_change(component_instance, pars_json)
 
         super().__init__(
@@ -74,7 +75,7 @@ def handle_model_change_helper(pars_json):
                     callback_fn=IndexCallbacks.toggle_tables
                 ),
                 ChimeCallback(  # If the parameters or model change, update the text
-                    changed_elements={"pars": "children"},
+                    changed_elements={"root-store": "modified_timestamp"},
                     dom_updates={
                         "intro": "children",
                         "more_intro": "children",
@@ -88,7 +89,8 @@ def handle_model_change_helper(pars_json):
                         "SIR_table": "children",
                         "SIR_download": "href",
                     },
-                    callback_fn=handle_model_change_helper
+                    callback_fn=handle_model_change_helper,
+                    stores=['root-store'],
                 )
             ]
         )
@@ -146,8 +148,17 @@ def update_parameters_helper(*args, **kwargs):
             callbacks=[
                 ChimeCallback(
                     changed_elements=component_instance.input_value_map,
-                    dom_updates={"pars": "children"},
-                    callback_fn=update_parameters_helper
+                    dom_updates={"root-store": "data"},
+                    callback_fn=update_parameters_helper,
+                    stores=['root-store'],
                 )
             ]
         )
+
+
+class RootCallbacks(ComponentCallbacks):
+    def __init__(self, component_instance):
+        super().__init__(
+            component_instance=component_instance,
+            callbacks=[]
+        )

src/chime_dash/app/utils/__init__.py

@@ -137,3 +137,13 @@ def prepare_visualization_group(df: DataFrame = None, **kwargs) -> List[Any]:
         result = [plot_data, table, csv]
 
     return result
+
+
+def singleton(class_):
+    instances = {}
+
+    def get_instance(*args, **kwargs):
+        if class_ not in instances:
+            instances[class_] = class_(*args, **kwargs)
+        return instances[class_]
+    return get_instance

src/chime_dash/app/utils/callbacks.py

@@ -1,41 +1,45 @@
 from dash import Dash
-from dash.exceptions import DuplicateCallbackOutput
-# todo Change to `from collections.abc import Iterable`. Using OrderedDict prevents multiple outputs to same DOM element
-# todo e.g., update children and toggle hidden
-from collections import OrderedDict
+from dash.dependencies import Input, Output, State
+from collections.abc import Iterable, Mapping
 from typing import Callable, List
 from functools import lru_cache
 
-from dash.dependencies import Input, Output
-
 
 class ChimeCallback:
     def __init__(self,
-                 changed_elements: OrderedDict,
-                 dom_updates: OrderedDict,
+                 changed_elements: Mapping,
                  callback_fn: Callable,
+                 dom_updates: Mapping = None,
+                 stores: Iterable = None,
                  memoize: bool = True
                  ):
-        pass
         self.inputs = [
             Input(component_id=component_id, component_property=component_property)
             for component_id, component_property in changed_elements.items()
         ]
-        self.outputs = [
-            Output(component_id=component_id, component_property=component_property)
-            for component_id, component_property in dom_updates.items()
-        ]
+        self.outputs = []
+        self.stores = []
         self.callback_fn = callback_fn
         self.memoize = memoize
+        if dom_updates:
+            self.outputs.extend(
+                Output(component_id=component_id, component_property=component_property)
+                for component_id, component_property in dom_updates.items()
+            )
+        if stores:
+            self.stores.extend(
+                State(component_id=component_id, component_property="data")
+                for component_id in stores
+            )
 
     def wrap(self, app: Dash):
         if self.memoize:
             @lru_cache(maxsize=32)
-            @app.callback(self.outputs, self.inputs)
+            @app.callback(self.outputs, self.inputs, self.stores)
             def callback_wrapper(*args, **kwargs):
                 return self.callback_fn(*args, **kwargs)
         else:
-            @app.callback(self.outputs, self.inputs)
+            @app.callback(self.outputs, self.inputs, self.stores)
             def callback_wrapper(*args, **kwargs):
                 return self.callback_fn(*args, **kwargs)