422 Added line-breaks to sidebar

* define and add linebreaks to sidebar

* add linebreak templates

* define line break, add styles, change header margins

* add top padding to sidebar to compensate for changed header margin

* exempt linebreak from get ordered input keys method

Co-authored-by: Quinn <[email protected]>
Co-authored-by: Jason <[email protected]>
Co-authored-by: ckoerber <[email protected]>
Co-authored-by: Brian Ross <[email protected]>

Author: 5 people

src/chime_dash/app/pages/sidebar.py

@@ -18,6 +18,7 @@
     create_number_input,
     create_date_input,
     create_header,
+    create_line_break,
 )
 from chime_dash.app.services.callbacks import SidebarCallbacks
 
@@ -37,6 +38,7 @@
     },
     current_hospitalized={"type": "number", "min": 0, "step": 1},
     ###
+    line_break_1={"type": "linebreak"},
     spread_parameters={"type": "header", "size": "h4"},
     date_first_hospitalized={
         "type": "date",
@@ -52,6 +54,7 @@
         "percent": True,
     },
     ###
+    line_break_2={"type": "linebreak"},
     severity_parameters={"type": "header", "size": "h4"},
     hospitalized_rate={
         "type": "number",
@@ -79,6 +82,7 @@
     icu_los={"type": "number", "min": 0, "step": 1},
     ventilated_los={"type": "number", "min": 0, "step": 1},
     ###
+    line_break_3={"type": "linebreak"},
     display_parameters={"type": "header", "size": "h4"},
     n_days={"type": "number", "min": 30, "step": 1},
     current_date={
@@ -107,7 +111,7 @@ class Sidebar(Page):
     input_type_map = ReadOnlyDict(OrderedDict(
         (key, value["type"])
         for key, value in _SIDEBAR_ELEMENTS.items()
-        if value["type"] not in ("header",)
+        if value["type"] not in ("header", "linebreak")
     ))
     input_value_map = ReadOnlyDict(OrderedDict(
         (key, {"number": "value", "date": "date"}.get(value, "value"))
@@ -129,6 +133,8 @@ def get_html(self) -> List[ComponentMeta]:
                 element = create_date_input(idx, data, self.content, self.defaults)
             elif data["type"] == "header":
                 element = create_header(idx, self.content)
+            elif data["type"] == "linebreak":
+                element = create_line_break(idx)
             else:
                 raise ValueError(
                     "Failed to parse input '{idx}' with data '{data}'".format(
@@ -151,6 +157,7 @@ def get_html(self) -> List[ComponentMeta]:
                 "top": "56px",
                 "width": "320px",
                 "zIndex": 1,
+                "padding-top": "1rem",
             },
         )
 

src/chime_dash/app/utils/templates.py

@@ -11,7 +11,7 @@
 from numpy import mod
 from pandas import DataFrame
 
-from dash_html_components import Table, Thead, Tbody, Tr, Td, Th, H4
+from dash_html_components import Table, Thead, Tbody, Tr, Td, Th, H4, Hr
 from dash_core_components import DatePickerSingle
 from dash_bootstrap_components import FormGroup, Label, Input, Checklist
 
@@ -27,7 +27,13 @@
 HEADER_STYLE = {
     "fontSize": "1rem",
     "fontWeight": "bold",
-    "margin": "2rem 0 1rem",
+    "margin-bottom": "1rem",
+}
+
+LINE_STYLE = {
+    "width": "30%",
+    "text-align": "center",
+    "color": "#cccccc"
 }
 
 
@@ -154,6 +160,8 @@ def create_header(idx: str, content: Dict[str, str]):
 
     return H4(id=idx, children=content[idx], style=HEADER_STYLE)
 
+def create_line_break(idx: str):
+    return Hr(id=idx, style=LINE_STYLE)
 
 def create_date_input(
     idx: str, data: Dict[str, Any], content: Dict[str, str], defaults: Parameters