REF: Move from panel to dash

Procfile

@@ -0,0 +1 @@
+web: gunicorn app:server --workers 2

app.py

@@ -0,0 +1,80 @@
+import dash
+from dash import dcc, html
+from dash.dependencies import Input, Output, State
+
+from dashboard.components import InstallationSelect, Logo, Nav, Subtitle, Title
+from example.callbacks import advance_slider, make_graph, make_text
+from example.components import LearnMore, StepButtons, StepSlider
+
+
+# NOTES FOR MARCUS
+
+app = dash.Dash(
+    __name__,
+    meta_tags=[{"name": "viewport", "content": "width=device-width"}],
+)
+app.title = "Aerosense Dashboard"
+server = app.server
+
+
+app.layout = html.Div(
+    [
+        dcc.Store(id="click-output"),
+        html.Div(
+            [
+                html.Div(
+                    [
+                        Logo(app.get_asset_url("logo.png")),
+                        Title(),
+                        Subtitle(),
+                    ]
+                ),
+                Nav(),
+                InstallationSelect(),
+                LearnMore(),
+                StepSlider(),
+                StepButtons(),
+            ],
+            className="four columns sidebar",
+        ),
+        html.Div(
+            [
+                html.Div([dcc.Markdown(id="text")], className="text-box"),
+                dcc.Graph(id="graph", style={"margin": "0px 20px", "height": "45vh"}),
+            ],
+            id="page",
+            className="eight columns",
+        ),
+    ],
+    className="row flex-display",
+    style={"height": "100vh"},
+)
+
+
+@app.callback(Output("graph", "figure"), [Input("slider", "value")])
+def make_graph_callback(value):
+    return make_graph(value)
+
+
+@app.callback(Output("text", "children"), [Input("slider", "value")])
+def make_text_callback(value):
+    return make_text(value)
+
+
+@app.callback(
+    [Output("slider", "value"), Output("click-output", "data")],
+    [Input("back", "n_clicks"), Input("next", "n_clicks")],
+    [State("slider", "value"), State("click-output", "data")],
+)
+def advance_slider_callback(back, nxt, slider, last_history):
+    return advance_slider(back, nxt, slider, last_history)
+
+
+@app.callback(Output("output", "children"), [Input("radios", "value")])
+def display_value(value):
+    return f"Selected value: {value}"
+
+
+# Run the Dash app
+if __name__ == "__main__":
+    app.run_server(debug=True)

assets/styles.css

@@ -0,0 +1,68 @@
+.sidebar {
+  background-color: #f3f6fa;
+}
+.title {
+  color: #2a3f5f;
+  font-size: 30px;
+}
+.sidebar-content {
+  padding: 0px 35px;
+}
+.subtitle {
+  color: #2a3f5f;
+  font-size: 14px;
+  font-family: "Open Sans", sans-serif;
+}
+a {
+  color: #2a6fd3 !important;
+}
+body {
+  margin: 0;
+}
+h5 {
+  font-weight: 500 !important;
+}
+.plotly-logo {
+  height: 60px;
+  width: auto;
+  padding: 25px;
+}
+.info-button {
+  padding: 20px 35px;
+}
+.learn-more-button {
+  background-color: #2a6fd3;
+  color: white;
+  font-size: 10px;
+  letter-spacing: 1px;
+  font-weight: 300;
+  padding: 0px 15px;
+}
+.timeline-slider {
+  padding: 10px 38px;
+}
+.rc-slider-handle {
+  border: solid 2px #2a6fd3;
+}
+.rc-slider-track {
+  background-color: #2a6fd3;
+}
+.rc-slider-dot-active {
+  border-color: #2a6fd3;
+}
+.flex-display {
+  display: flex;
+}
+.page-buttons {
+  padding: 15px 35px;
+}
+.text-box {
+  margin: 50px;
+}
+#text {
+  padding: 50px;
+  color: #506783;
+  font-family: "Open Sans", sans-serif;
+  font-size: 13px;
+  width: 70%;
+}