I’m trying to build my first app with Dash using MySQL+SQLAlchemy to handle the data backend. I use two tables: one contains results of topic modeling, and another count of posts by social media. Here’s the app itself:
from dash import Dash, dcc, html, Input, Output, dash_table
import dash_bootstrap_components as dbc
import datetime
import plotly.express as px
import pandas as pd
from transactions import Transactions
app = Dash(__name__)
tr = Transactions()
app.layout = html.Div([
html.H1('Minerva NLP dashboard'),
dbc.Row([
dbc.Col(html.Div(children=[
dcc.Dropdown(id='category_dropdown', options=[1, 2], value=1, clearable=False)
]
), width=3
),
dbc.Col(html.Div(children=[
dcc.DatePickerRange(id='main_date_picker',
min_date_allowed=datetime.date(2022, 10, 1),
display_format='MMM Do, YY',
start_date_placeholder_text='MMM Do, YY',
persistence=True,
persisted_props=['start_date', 'end_date'],
persistence_type='session',
updatemode='bothdates')
]
), width=3
)
]),
dcc.Tabs([
dcc.Tab(label='Main view', children=[
html.Div([html.Div(id='topic_chart', children=[], className='six columns')],
className='row'),
html.Div([html.Div(id='media_count_chart', children=[], className='six columns')],
className='row')
]),
dcc.Tab(label='Topic table', children=[
html.H2('Topics'),
html.Div([html.Div(id='topic_table', children=[])], className='row')
])
]),
dcc.Store(id='store_topics', data=[], storage_type='memory'),
])
# topics
@app.callback(
Output('store_topics', 'data'),
[Input('category_dropdown', 'value'),
Input('main_date_picker', 'start_date'),
Input('main_date_picker', 'end_date')]
)
def get_topics(category, start_date, end_date):
date_interim = str(start_date) + ' - ' + str(end_date)
newsbreaks = tr.get_topics(date_interim=date_interim,
category=category)
return newsbreaks
@app.callback(
Output('topic_chart', 'children'),
Input('store_topics', 'data')
)
def create_topic_chart(data):
df = pd.DataFrame.from_dict(data)
fig = px.bar(df, x='weight', y='id', orientation='h',
hover_data=['id', 'weight', 'terms'])
return dcc.Graph(figure=fig)
@app.callback(
Output('topic_table', 'children'),
Input('store_topics', 'data')
)
def create_topic_table(data):
df = pd.DataFrame.from_dict(data)
table = dash_table.DataTable(
id='topic_table',
data=df.to_dict('records'),
columns=[{"name": i, "id": i} for i in df],
sort_action="native",
sort_mode="multi",
page_action="native",
page_current=0,
page_size=15,
style_data = {
'height': '20px'
},
style_cell={'textAlign': 'left'})
return table
# media count
@app.callback(
Output('media_count_chart', 'children'),
[Input('category_dropdown', 'value'),
Input('main_date_picker', 'start_date'),
Input('main_date_picker', 'end_date')]
)
def create_media_count_chart(category, start_date, end_date):
df = tr.get_source_counts(category, start_date, end_date)
fig = px.treemap(df, names='name', values='count', path=['name'])
return dcc.Graph(figure=fig)
app.run_server(debug=True)
I keep getting different MySQL errors when trying to run the app. Sometimes it’s NoSuchColumnError, sometimes it’s OperationalError (more details in screenshots below). But loading data from just one of the tables works fine (e.g. when I comment out everything related to media_count_chart, topic_table and topic_chart are displayed correctly, and vice-versa).
Perhaps there’s something wrong with the way I’m trying to load/store the data? Unfortunately, I can’t show what’s inside tr, but basically, it uses SQLAlchemy ORM and session.query() to get the data.
