We Keep Coding

Unable to run dash_interactive_graphviz

I created a huge Graphviz Network, which I now want to spice up with some interactivity. For this goal I discovered the package dash_interactive_graphviz. From my understanding I can simple provide my existing graph, but I'm already failing to execute the provided sample (see below):
import dash_interactive_graphviz
dot_source = """
digraph {
node[style="filled"]
a ->b->d
a->c->d
}
"""
dash_interactive_graphviz.DashInteractiveGraphviz(
id="graph",
dot_source=dot_source
)
The package itself and all requirements are fulfilled. I run the sample code from above in Visual Studio Code, but nothing happens (no output, no message, no error).
Anybody who can point me in the right direction? Thanks.

You are in the right direction, just need a few steps. I think you can check out this example here to run your file:
https://github.com/BusinessOptics/dash_interactive_graphviz/blob/master/usage.py
import dash_interactive_graphviz
import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc
app = dash.Dash(__name__)
initial_dot_source = """
digraph {
node[style="filled"]
a ->b->d
a->c->d
}
"""
app.layout = html.Div(
[
html.Div(
dash_interactive_graphviz.DashInteractiveGraphviz(id="gv"),
style=dict(flexGrow=1, position="relative"),
),
html.Div(
[
html.H3("Selected element"),
html.Div(id="selected"),
html.H3("Dot Source"),
dcc.Textarea(
id="input",
value=initial_dot_source,
style=dict(flexGrow=1, position="relative"),
),
html.H3("Engine"),
dcc.Dropdown(
id="engine",
value="dot",
options=[
dict(label=engine, value=engine)
for engine in [
"dot",
"fdp",
"neato",
"circo",
"osage",
"patchwork",
"twopi",
]
],
),
],
style=dict(display="flex", flexDirection="column"),
),
],
style=dict(position="absolute", height="100%", width="100%", display="flex"),
)
#app.callback(
[Output("gv", "dot_source"), Output("gv", "engine")],
[Input("input", "value"), Input("engine", "value")],
)
def display_output(value, engine):
return value, engine
#app.callback(Output("selected", "children"), [Input("gv", "selected")])
def show_selected(value):
return html.Div(value)
if __name__ == "__main__":
app.run_server(debug=True)

Faster serializations (pickle, parquet, feather, ...) than json in plotly dash Store?

Context
In a dashboard using plotly Dash I need to perform an expensive download from DB only when a component (DataPicker with the period to consider and so to be downloaded from DB) is updated and then use the resulting DataFrame with other components (e.g. Dropdowns filtering the DataFrame) avoiding the expensive download process.
The docs suggests to use dash_core_components.Store as Output of a callback that return the DataFrame serielized in json and than use the Store as Input of other callbacks that needs to deserialize from json to DataFrame.
Serialization from/to JSON is slow, and each time I update a component it takes 30 seconds to update the plot just for that.
I tried to use faster serializations like pickle, parquet and feather but in the deserialization part I get an error stating that the object is empty (when using JSON no such error appear).
Question
Is it possible to perform serializations in Dash Store with faster methods like pickle, feather or parquet (they takes approx half of time for my dataset) than JSON? How?
Code
import io
import traceback
import pandas as pd
from datetime import datetime, date, timedelta
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
from plotly.subplots import make_subplots
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
today = date.today()
app.layout = html.Div([
dbc.Row(dbc.Col(html.H1('PMC'))),
dbc.Row(dbc.Col(html.H5('analysis'))),
html.Hr(),
html.Br(),
dbc.Container([
dbc.Row([
dbc.Col(
dcc.DatePickerRange(
id='date_ranges',
start_date=today - timedelta(days=20),
end_date=today,
max_date_allowed=today, display_format='MMM Do, YY',
),
width=4
),
]),
dbc.Row(
dbc.Col(
dcc.Dropdown(
id='dd_ycolnames',
options=options,
value=default_options,
multi=True,
),
),
),
]),
dbc.Row([
dbc.Col(
dcc.Graph(
id='graph_subplots',
figure={},
),
width=12
),
]),
dcc.Store(id='store')
])
#app.callback(
Output('store', 'data'),
[
Input(component_id='date_ranges', component_property='start_date'),
Input(component_id='date_ranges', component_property='end_date')
]
)
def load_dataset(date_ranges_start, date_ranges_end):
# some expensive clean data step
logger.info('loading dataset...')
date_ranges1_start = datetime.strptime(date_ranges_start, '%Y-%m-%d')
date_ranges1_end = datetime.strptime(date_ranges_end, '%Y-%m-%d')
df = expensive_load_from_db(date_ranges1_start, date_ranges1_end)
logger.info('dataset to json...')
#return df.to_json(date_format='iso', orient='split')
return df.to_parquet() # <----------------------
#app.callback(
Output(component_id='graph_subplots', component_property='figure'),
[
Input(component_id='store', component_property='data'),
Input(component_id='dd_ycolnames', component_property='value'),
],
)
def update_plot(df_bin, y_colnames):
logger.info('dataset from json')
#df = pd.read_json(df_bin, orient='split')
df = pd.read_parquet(io.BytesIO(df_bin)) # <----------------------
logger.info('building plot...')
traces = []
for y_colname in y_colnames:
if df[y_colname].dtype == 'bool':
df[y_colname] = df[y_colname].astype('int')
traces.append(
{'x': df['date'], 'y': df[y_colname].values, 'name': y_colname},
)
fig = make_subplots(
rows=len(y_colnames), cols=1, shared_xaxes=True, vertical_spacing=0.1
)
fig.layout.height = 1000
for i, trace in enumerate(traces):
fig.append_trace(trace, i+1, 1)
logger.info('plotted')
return fig
if __name__ == '__main__':
app.run_server(host='localhost', debug=True)
Error text
OSError: Could not open parquet input source '<Buffer>': Invalid: Parquet file size is 0 bytes

Due to the exchange of data between client and server, you are currently limited to JSON serialization. One way to circumvent this limitation is via the ServersideOutput component from dash-extensions, which stores the data on the server. It uses file storage and pickle serialization by default, but you can use other storage (e.g. Redis) and/or serialization protocols (e.g. arrow) as well. Here is a small example,
import time
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from dash_extensions.enrich import Dash, Output, Input, State, ServersideOutput
app = Dash(prevent_initial_callbacks=True)
app.layout = html.Div([
html.Button("Query data", id="btn"), dcc.Dropdown(id="dd"), dcc.Graph(id="graph"),
dcc.Loading(dcc.Store(id='store'), fullscreen=True, type="dot")
])
#app.callback(ServersideOutput("store", "data"), Input("btn", "n_clicks"))
def query_data(n_clicks):
time.sleep(1)
return px.data.gapminder() # no JSON serialization here
#app.callback(Input("store", "data"), Output("dd", "options"))
def update_dd(df):
return [{"label": column, "value": column} for column in df["year"]] # no JSON de-serialization here
#app.callback(Output("graph", "figure"), [Input("dd", "value"), State("store", "data")])
def update_graph(value, df):
df = df.query("year == {}".format(value)) # no JSON de-serialization here
return px.sunburst(df, path=['continent', 'country'], values='pop', color='lifeExp', hover_data=['iso_alpha'])
if __name__ == '__main__':
app.run_server()

Null is not an object (evaluating ‘n.layout’) in Dash Plotly

I am developing dashboard using Dash Plotly and I am getting an error when I click tabs.
The error says null is not an object (evaluating ‘n.layout’)
(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser’s console.)"
Can any one help me to solve this problem?
My code is found below.
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_daq as daq
from dash.dependencies import Input, Output
import plotly.graph_objs as go
import pandas as pd
import numpy as np
from copy import copy
import dash_table
import json
import base64
import plotly.express as px
#Data
errors = pd.read_csv(r’/Users/kapital/Documents/ABCD/PM/errors.csv’)
external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]
app = dash.Dash(name, external_stylesheets=external_stylesheets)
first_graph = dcc.Graph(id=‘graph1’,style={‘borderBottom’: ‘thin lightgrey solid’,‘padding’: ‘10px 5px’})
#, animate = True
content_tab_1 = html.Div(children = [
html.Div(first_graph, style = {‘vertical-align’:‘center’, ‘horizontal-align’:‘center’})
],
style={‘width’: ‘87%’})
app.layout = html.Div([
dcc.Tabs(id='tabs-example', value='tab-1', children=[
dcc.Tab(label='Tab one', value='tab-1',
children =[content_tab_1]),
dcc.Tab(label='Tab two', value='tab-2'),
]),
html.Div(id='tabs-example-content')
])
#app.callback(Output(‘graph1’, ‘figure’),
Input(‘tabs-example’, ‘value’))
def render_content(tab):
if tab == ‘tab-1’:
err_count = pd.DataFrame(errors['errorID'].value_counts().reset_index().values, columns=["Error", "Count"])
err_count = err_count.sort_index(axis = 0, ascending=True)
fig = px.bar(err_count, x = 'Error', y = 'Count')
return fig
# return html.Div([
# html.H3('Tab content 1')
# ])
if name == ‘main’:
app.run_server(debug=True)

The problem is that your callback function does not have an else to its conditional statement. When the user selects the second tab, that callback has no alternate path, and returns None, which gives you the error you see. I did this to fix it, but you'll probably want something more:
#app.callback(Output('graph1', 'figure'),
Input('tabs-example', 'value'))
def render_content(tab):
if tab == 'tab-1':
err_count = pd.DataFrame.from_dict(dict(
Error=[1, 2, 3, ],
Count=[5, 6, 7])
)
err_count = err_count.sort_index(axis=0, ascending=True)
fig = px.bar(err_count, x='Error', y='Count')
return fig
else:
return {}

Plotly-Dash: How to remove the status icon from Dash WebApp?

I am building Web Dashboard for IPL using the Dash plotly. In there a Status icon that shows the webserver status.
How Could I remove it from the Web Page? I am not able to explain it much so adding the image below marked in Yellow

Simply setting Debug=False here should do the trick:
app.run_server(debug=False)
I'll use a previous post of mine to illustrate it. You'll find a complete code snippet below.
1 - app.run_server(debug=True)
2 - app.run_server(debug=False)
Complete code
import numpy as np
import plotly.express as px
import plotly.graph_objects as go
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from sklearn.preprocessing import PolynomialFeatures
from sklearn.linear_model import LinearRegression
from sklearn.pipeline import make_pipeline
from IPython.core.debugger import set_trace
# Load Data
df = px.data.tips()
# Build App
app = JupyterDash(__name__)
app.layout = html.Div([
html.H1("ScikitLearn: Polynomial features"),
dcc.Graph(id='graph'),
html.Label([
"Set number of features",
dcc.Slider(id='PolyFeat',
min=1,
max=6,
marks={i: '{}'.format(i) for i in range(10)},
value=1,
)
]),
])
# Define callback to update graph
#app.callback(
Output('graph', 'figure'),
[Input("PolyFeat", "value")]
)
def update_figure(nFeatures):
global model
# data
df = px.data.tips()
x=df['total_bill']
y=df['tip']
# model
model = make_pipeline(PolynomialFeatures(nFeatures), LinearRegression())
model.fit(np.array(x).reshape(-1, 1), y)
x_reg = x.values
y_reg = model.predict(x_reg.reshape(-1, 1))
df['model']=y_reg
# figure setup and trace for observations
fig = go.Figure()
fig.add_traces(go.Scatter(x=df['total_bill'], y=df['tip'], mode='markers', name = 'observations'))
# trace for polynomial model
df=df.sort_values(by=['model'])
fig.add_traces(go.Scatter(x=df['total_bill'], y=df['model'], mode='lines', name = 'model'))
# figure layout adjustments
fig.update_layout(yaxis=dict(range=[0,12]))
fig.update_layout(xaxis=dict(range=[0,60]))
#print(df['model'].tail())
fig.update_layout(template = 'plotly_dark')
return(fig)
# Run app and display result inline in the notebook
app.enable_dev_tools(dev_tools_hot_reload =True)
app.run_server(mode='inline', port = 8040, dev_tools_ui=True, debug=False,
dev_tools_hot_reload =True, threaded=True)

Dash(Python) - thicker ring in gauge meter of dash-daq

The ring that dash_daq.Gauge outputs is too thin, as you can see from the picture below.
I would like to have thicker ring. I couldn’t find css element under ‘inspect element’ to increase the thickness of ring. How do i go about doing this?

Just create an assets folder and place there your css file e.g. "styles.css" and it works fine (Dash v1.6.0)
styles.css:
circle {
stroke-width: 20px;
}
app.py:
import dash
import dash_daq as daq
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__, assets_folder = 'assets', include_assets_files = True)
app.layout = html.Div([
daq.Gauge(
id='my-gauge',
label="Default",
value=6,
style={'display': 'block' }
),
dcc.Slider(
id='my-gauge-slider',
min=0,
max=10,
step=1,
value=5
),
])
#app.callback(
dash.dependencies.Output('my-gauge', 'value'),
[dash.dependencies.Input('my-gauge-slider', 'value')]
)
def update_output(value):
return value
if __name__ == '__main__':
app.run_server(debug=True)

gauge meter is made up of svg tag. To get an idea i will show the screen shot
Try changing the stroke-width attr value to change the thinkness. i hope this will help you to get inital idea.