Dash integrated into main app

app/__init__.py

@@ -5,6 +5,7 @@
 from app import pages, transactions, data, predict
 from app.models import db
 from app.database import init_db_command
+from app.data import create_dash_app
 
 load_dotenv()
 
@@ -32,6 +33,8 @@ def create_app():
     app.register_blueprint(predict.bp)
     #app.register_blueprint(train.bp)
 
+    # Initialize the Dash app, passing the Flask app as the server
+    create_dash_app(app)
     # Add CLI command
     app.cli.add_command(init_db_command)
 

app/data.py

@@ -14,7 +14,7 @@
 import mlflow
 from mlflow import pyfunc
 import xgboost as xgb
-
+from dash import Dash, dcc, html, Input, Output
 
 load_dotenv()
 
@@ -107,4 +107,37 @@ def result():
     #prediction = model.predict(df)
     print("Prediction: ", prediction)
 
-    return render_template('data/result.html', prediction=prediction, ID=ID)
+    return render_template('data/result.html', prediction=prediction, ID=ID)
+
+from flask import Blueprint
+from dash import Dash
+import dash_core_components as dcc
+import dash_html_components as html
+
+# Create a Flask Blueprint
+bp = Blueprint("data", __name__)
+
+# Do not link Dash directly to the Blueprint
+# Instead, define Dash within a function where you have access to the main Flask app
+
+def create_dash_app(flask_app):
+    # Create the Dash app and pass the Flask app as the server
+    dash_app = Dash(__name__, server=flask_app, url_base_pathname='/dash/')
+
+    # Define Dash layout
+    dash_app.layout = html.Div(children=[
+        html.H1('Dash App'),
+        dcc.Graph(
+            id='example-graph',
+            figure={
+                'data': [
+                    {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'Sample'}
+                ],
+                'layout': {
+                    'title': 'Sample Data Visualization'
+                }
+            }
+        )
+    ])
+
+    return dash_app

app/static/css/main.css

@@ -820,6 +820,11 @@ video {
   border-color: rgb(229 231 235 / var(--tw-divide-opacity));
 }
 
+.divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-divide-opacity));
+}
+
 .self-center {
   align-self: center;
 }
@@ -883,6 +888,16 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.border-gray-600 {
+  --tw-border-opacity: 1;
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+
+.border-gray-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(55 65 81 / var(--tw-border-opacity));
+}
+
 .bg-blue-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
@@ -1086,6 +1101,11 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-gray-100 {
+  --tw-text-opacity: 1;
+  color: rgb(243 244 246 / var(--tw-text-opacity));
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);

requirements.txt

@@ -23,4 +23,5 @@ click
 flask_sqlalchemy
 Flask-Migrate
 pytest
-dbt
+dbt
+dash