Merge pull request #360 from CodeForPhilly/dash_callbacks_refactor

[Dash] Initial rework of how we use Dash callbacks

Author: BrianThomasRoss

src/__init__.py

@@ -1,25 +1,31 @@
-"""Combines all components
-
-The `sidebar` component combines all the inputs while other components potentially
-have callbacks.
-
-To add or remove components, adjust the `setup`.
-If callbacks are present, also adjust `CALLBACK_INPUTS`, `CALLBACK_OUTPUTS` and
-`callback_body`.
+"""Builds the root component
 """
 from collections import OrderedDict
 
-import dash_html_components as dhc
-from chime_dash.app.components.base import Component, HTMLComponentError
+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.components.container import Container
+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
 
 
+@singleton
 class Body(Component):
     """
     """
-
     external_stylesheets = [
         BOOTSTRAP,
     ]
@@ -30,29 +36,21 @@ def __init__(self, language, defaults):
         super().__init__(language, defaults)
         self.components = OrderedDict(
             navbar=Navbar(language, defaults),
-            container=Container(language, defaults),
+            sidebar=Sidebar(language, defaults),
+            # todo subscribe to changes to URL and select page appropriately
+            index=Index(language, defaults),
         )
-        self.callback_outputs = []
-        self.callback_inputs = OrderedDict()
-        for component in self.components.values():
-            self.callback_outputs += component.callback_outputs
-            self.callback_inputs.update(component.callback_inputs)
 
     def get_html(self):
         """Glues individual setup components together
         """
-        return dhc.Div(self.components["navbar"].html + self.components["container"].html)
-
-    def callback(self, *args, **kwargs):
-        """
-        """
-        kwargs = dict(zip(self.callback_inputs, args))
-
-        callback_returns = []
-        for component in self.components.values():
-            try:
-                callback_returns += component.callback(**kwargs)
-            except Exception as error:
-                raise HTMLComponentError(component, error)
-
-        return callback_returns
+        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",
+                   )])

src/chime_dash/app/components/__init__.py

@@ -8,72 +8,43 @@
 
 from abc import ABC
 
-from dash.dependencies import Output, Input
+from dash import Dash
 from dash.development.base_component import ComponentMeta
 from dash_html_components import Div
 
 from penn_chime.parameters import Parameters
 from penn_chime.settings import DEFAULTS
 
-from chime_dash.app.utils.templates import read_localization_yml
-from chime_dash.app.utils.templates import read_localization_markdown
+from chime_dash.app.utils.templates import read_localization_yml, read_localization_markdown
+from chime_dash.app.utils.callbacks import ChimeCallback, register_callbacks
 
 
 class Component(ABC):
-    """Base component for rendering dash html objects and callbacks
+    """Base component for rendering dash html objects and registering callbacks
 
     Attributes:
         localization_file: File name for rendering localized strings
-        callback_outputs: List of callback outputs needed for rendering html.
-            Must be used together with `callback()` which provides callback data.
-        callback_inputs: Ordered dictionary for element id's and input types.
-            Must be used if component contains widgets.
         external_stylesheets: External stylesheets. Just a storage container.
         external_scripts: External scripts. Just a storage container.
     """
 
     localization_file: str = None
-
-    callback_outputs: List[Output] = []  # must be same length as callback return
-    callback_inputs: Dict[str, Input] = {}  # Must be ordered!
-
     external_stylesheets: List[str] = []
     external_scripts: List[str] = []
 
-    def __init__(self, language: str = "en", defaults: Parameters = DEFAULTS):
+    def __init__(
+            self,
+            language: str = "en",
+            defaults: Parameters = DEFAULTS,
+            callbacks: List[ChimeCallback] = None
+    ):
         """Initializes the component
         """
         self.language = language
         self.defaults = defaults
         self._content = None
         self._html = None
-
-    def callback(  # pylint: disable=W0613, R0201
-        self, *args, **kwargs
-    ) -> List[Dict[str, Any]]:
-        """Function which is called whenever a web-input element is triggered.
-
-        Overwrite this function for custom actions.
-        To render arguments, add (or modify)
-        ```
-        @app.callback(component.callback_outputs, component.callback_inputs.values()):
-        def callback_body(*args):
-            return component.callback(*args)
-        ```
-        Args come from the specified forms in order as `callback_outputs`.
-
-        Arguments:
-            args: Form parameters specified in `callback_outputs` order
-            kwargs: Additional arguments supplied by the user when modifying the
-                decorated `callback_body`.
-
-        Result should be the data (usually dictionaries) passed to the Dash element
-        of given id. The number of arguments and order must match the elements in
-        `callback_outputs`.
-
-        See also https://dash.plotly.com/getting-started-part-2
-        """
-        return []
+        register_callbacks(callbacks)
 
     def get_html(self) -> List[ComponentMeta]:  # pylint: disable=R0201
         """Function which is called to render html elements.

src/chime_dash/app/components/base.py

@@ -3,11 +3,10 @@
 """
 from typing import List
 
+from chime_dash.app.components.base import Component
 from dash.development.base_component import ComponentMeta
-from dash_html_components import Div, H1
 from dash_core_components import Markdown
-
-from chime_dash.app.components.base import Component
+from dash_html_components import Div, H1
 
 
 class Header(Component):