Dash into the future

Dash into the future

Author: jlubken

Dockerfile.dash

@@ -2,8 +2,11 @@ FROM python:3.7.7-slim-buster
 
 WORKDIR /code 
 
+ARG PORT
+ENV PORT $PORT
+
 COPY requirements.txt requirements.txt
-RUN pip install -q -r requirements.txt
+RUN pip install -r requirements.txt
 
 COPY src src 
 

docker-compose-dash.yml

@@ -0,0 +1,12 @@
+version: '3.1'
+
+services:
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile.dash
+      args:
+        - PORT=${PORT}
+    restart: always
+    ports:
+      - "${PORT}:8000"

script/server-dash

@@ -0,0 +1,29 @@
+#!/usr/bin/env bash
+
+# script/server: Launch the application and any extra required processes
+#                locally.
+
+set -e
+cd "$(dirname "$0")/.."
+
+
+script/bootstrap
+
+if [ ! -f ".env" ]; then
+    echo
+    echo "==> Initializing .env…"
+    cp .env.example .env
+fi
+
+echo
+echo "==> Loading .env…"
+set -o allexport; source .env; set +o allexport
+
+echo
+echo "==> Starting containers with docker-compose…"
+docker-compose -f docker-compose-dash.yml up -d --build
+
+echo
+echo "==> App is now ready to go!"
+echo "    *Open http://localhost:${PORT}"
+echo

setup.py

@@ -30,7 +30,8 @@
         "dash",
         "dash_bootstrap_components",
         "pyyaml",
-        "gunicorn"
+        "gunicorn", 
+        "selenium"
     ],
     classifiers=[
         "Programming Language :: Python :: 3",
@@ -44,3 +45,4 @@
     keywords=[],
     include_package_data=True,
 )
+

src/__init__.py

@@ -2,7 +2,7 @@
 
 This directory provides the interface for the dash app.
 
-![Current interface](docs/assets/interface.png)
+![Current interface](docs/interface.png)
 
 ## Tree
 Structure of the app

src/assets/favicon.ico

@@ -1 +1,50 @@
-x = 1
+"""
+chime_dash/app
+
+dash instance defined here
+"""
+
+from dash import Dash
+from typing import TypeVar
+from chime_dash.app.config import from_object
+from penn_chime.settings import get_defaults
+from chime_dash.app.components import Body
+from chime_dash.app.utils.callbacks import wrap_callbacks
+
+DashAppInstance = TypeVar('DashAppInstance')
+DEFAULTS = get_defaults()
+
+def create_app(context:str='prod')-> DashAppInstance:
+    """
+    create_app initializes the app instance
+    
+    Args:
+        context (str, optional): One of either 'prod', 'dev', 'testing.
+        Defaults to 'prod' where dash.Dash.run_server(debug=False).
+        Change to 'dev' or 'test' to set debug to true.
+    
+    Returns:
+        Env: Config variables based on context argument received
+        DashAppInstance: Dash instance with appropriate configuration settings
+    """
+
+    Env = from_object(context)
+    
+    LANGUAGE = Env.LANG
+    body = Body(LANGUAGE, DEFAULTS)
+    
+    
+    App = Dash(
+        __name__,
+        external_stylesheets=body.external_stylesheets,
+        external_scripts=body.external_scripts,
+    )
+
+    App.title = Env.CHIME_TITLE
+    App.layout = body.html
+    wrap_callbacks(App)
+
+    
+
+    return Env, App
+

src/chime_dash/README.md

@@ -0,0 +1,3 @@
+"""/app
+where the magic happens
+"""

src/chime_dash/__init__.py

@@ -9,101 +9,71 @@
 """
 from collections import OrderedDict
 
-from dash_bootstrap_components import Row, Col
+from dash_bootstrap_components import Container, Row
 from dash_bootstrap_components.themes import BOOTSTRAP
-from dash_html_components import Script, Div
+from dash_html_components import Div
 
-from penn_chime.defaults import Constants
-from penn_chime.models import SimSirModel
+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
 
 
-from chime_dash.app.components.base import Component, HTMLComponentError
-from chime_dash.app.components.sidebar import Sidebar
-from chime_dash.app.components.header import Header
-from chime_dash.app.components.intro import Intro, ToolDetails
-from chime_dash.app.components.additions import Additions
-from chime_dash.app.components.visualizations import Visualizations
-from chime_dash.app.components.definitions import Definitions
-from chime_dash.app.components.footer import Footer
-from chime_dash.app.components.navbar import Navbar
+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 = [
-        "https://www1.pennmedicine.org/styles/shared/penn-medicine-header.css",
         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(
-            sidebar=Sidebar(language, defaults),
-            header=Header(language, defaults),
-            intro=Intro(language, defaults),
-            tool_details=ToolDetails(language, defaults),
-            visualizations=Visualizations(language, defaults),
-            additions=Additions(language, defaults),
-            definitions=Definitions(language, defaults),
-            footer=Footer(language, defaults),
             navbar=Navbar(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()
-        self.callback_keys = []
-        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 Div(
-            children=self.components["navbar"].html
-            + [
-                Row(
-                    children=[
-                        Col(
-                            id="sidebar",
-                            children=self.components["sidebar"].html,
-                            width=3,
-                            className="mt-4",
-                        ),
-                        Col(width=1),
-                        Col(
-                            self.components["header"].html
-                            + self.components["intro"].html
-                            + self.components["tool_details"].html
-                            + self.components["visualizations"].html
-                            + self.components["additions"].html
-                            + self.components["definitions"].html
-                            + self.components["footer"].html,
-                            width=8,
-                            className="mt-4",
-                        ),
-                    ],
-                    className="container",
-                ),
+            className="app",
+            children=self.components["navbar"].html + [
+                Div(
+                    className="app-content",
+                    children=
+                    self.components["sidebar"].html
+                    + self.components["index"].html
+                )
             ]
         )
 
-    def callback(self, *args, **kwargs):
-        """
+    def get_html_old(self):
+        """Glues individual setup components together
         """
-        kwargs = dict(zip(self.callback_inputs, args))
-        pars = self.components["sidebar"].parse_form_parameters(**kwargs)
-        kwargs["model"] = SimSirModel(pars)
-        kwargs["pars"] = pars
-
-        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",
+                   )])