Hello @TwoPointNo,
Glad you got it to work with streamlit.
Here is my working example:
https://msdocs-python-webapp-quickstart-bsd3v.azurewebsites.net/
Out of curiosity, what version of Python were you trying it on?
Mine is running on 3.10:
testApp.py:
from dash import Dash, dcc, html, Input, Output, no_update, State
import plotly.graph_objects as go
import pandas as pd
# Small molcule drugbank dataset
Source = 'https://raw.githubusercontent.com/plotly/dash-sample-apps/main/apps/dash-drug-discovery/data/small_molecule_drugbank.csv'
df = pd.read_csv(Source, header=0, index_col=0)
fig = go.Figure(data=[
go.Scatter(
x=df["LOGP"],
y=df["PKA"],
mode="markers",
marker=dict(
colorscale='viridis',
color=df["MW"],
size=df["MW"],
colorbar={"title": "Molecular<br>Weight"},
line={"color": "#444"},
reversescale=True,
sizeref=45,
sizemode="diameter",
opacity=0.8,
)
)
])
# turn off native plotly.js hover effects - make sure to use
# hoverinfo="none" rather than "skip" which also halts events.
fig.update_traces(hoverinfo="none", hovertemplate=None)
fig.update_layout(
xaxis=dict(title='Log P'),
yaxis=dict(title='pkA'),
plot_bgcolor='rgba(255,255,255,0.1)'
)
app = Dash(__name__, external_scripts=[{'src': "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"}])
server = app.server
app.layout = html.Div([
dcc.Graph(id="graph-basic-2", figure=fig, clear_on_unhover=True),
dcc.Tooltip(id="graph-tooltip"),
dcc.Store(id='graph-basic-2-data', data=df.to_dict('records'))
])
app.clientside_callback(
"""
function showHover(hv, data) {
if (hv) {
//demo only shows the first point, but other points may also be available
pt = hv["points"][0]
bbox = pt["bbox"]
num = pt["pointNumber"]
df_row = data[num]
img_src = df_row['IMG_URL']
name = df_row['NAME']
form = df_row['FORM']
desc = df_row['DESC']
if (desc.length > 300) {
desc = desc.substring(0,100) + '...'
}
img = jQuery(
"<img>", {
src: img_src,
style: "width:100%"
}
)
ttl = jQuery("<h2>", {text: name})
form = jQuery("<p>", {text: form})
desc = jQuery("<p>", {text: desc})
newDiv = jQuery("<div>", {
style: 'width:200px;white-space:normal'
})
$(newDiv).append(img)
$(newDiv).append(ttl)
$(newDiv).append(form)
$(newDiv).append(desc)
$('#graph-tooltip').empty()
$('#graph-tooltip').append($(newDiv))
return [true, bbox]
}
return [false, dash_clientside.no_update]
}
""",
Output("graph-tooltip", "show"),
Output("graph-tooltip", "bbox"),
Input("graph-basic-2", "hoverData"),
State('graph-basic-2-data', 'data')
)
if __name__ == "__main__":
app.run_server(debug=True)
requirements.txt:
asttokens==2.0.8
backcall==0.2.0
Brotli==1.0.9
cachelib==0.9.0
click==8.1.3
colorama==0.4.5
dash==2.6.2
dash-bootstrap-components==1.2.1
dash-bootstrap-templates==1.0.7
dash-core-components==2.0.0
dash-html-components==2.0.0
dash-iconify==0.1.2
dash-loading-spinners==1.0.0
dash-mantine-components==0.10.2
dash-table==5.0.0
debugpy==1.6.3
decorator==5.1.1
dill==0.3.5.1
diskcache==5.4.0
EditorConfig==0.12.3
entrypoints==0.4
executing==1.1.1
Flask==2.2.2
Flask-Caching==2.0.1
Flask-Compress==1.13
Flask-Login==0.6.2
Flask-SQLAlchemy==3.0.0
greenlet==1.1.3
ipykernel==6.16.1
ipython==8.5.0
ipywidgets==8.0.2
itsdangerous==2.1.2
jedi==0.18.1
Jinja2==3.1.2
jsbeautifier==1.14.6
jupyter-client==7.4.3
jupyter-core==4.11.2
jupyterlab-widgets==3.0.3
MarkupSafe==2.1.1
matplotlib-inline==0.1.6
more-itertools==8.14.0
multiprocess==0.70.13
nest-asyncio==1.5.6
numpy==1.23.3
packaging==21.3
pandas==1.5.0
parso==0.8.3
pickleshare==0.7.5
plotly==5.10.0
prompt-toolkit==3.0.31
psutil==5.9.2
pure-eval==0.2.2
Pygments==2.13.0
pyparsing==3.0.9
python-dateutil==2.8.2
pytz==2022.4
pyzmq==24.0.1
six==1.16.0
SQLAlchemy==1.4.41
stack-data==0.5.1
tenacity==8.1.0
tornado==6.2
traitlets==5.5.0
wcwidth==0.2.5
Werkzeug==2.2.2
widgetsnbextension==4.0.3
config:
