I am developing a dashboard and decided to create a few builder functions to produce card containers along with objects in them. The metrics need additional context at times so I add a hover image which has a tooltip that says “Click for more details” and when clicked, it brings up a unique modal. I got the pattern matching callback working for the modals but having a dict as a tooltip target doesn’t work and I can’t think of a workaround. It throws the following errors.
TypeError: r.removeEventListener is not a function
at http://127.0.0.1:8888/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v0_9_2m1586518166.min.js:31:204395
at Array.forEach (<anonymous>)
at t.n.removeEventOnTargets (http://127.0.0.1:8888/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v0_9_2m1586518166.min.js:31:204372)
at t.n.removeTargetEvents (http://127.0.0.1:8888/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v0_9_2m1586518166.min.js:31:205063)
at t.n.componentWillUnmount (http://127.0.0.1:8888/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v0_9_2m1586518166.min.js:31:201996)
at callComponentWillUnmountWithTimer (http://127.0.0.1:8888/_dash-component-suites/dash_renderer/react-dom@16.v1_4_1m1592401879.13.0.js:19748:14)
at HTMLUnknownElement.callCallback (http://127.0.0.1:8888/_dash-component-suites/dash_renderer/react-dom@16.v1_4_1m1592401879.13.0.js:182:16)
at Object.invokeGuardedCallbackDev (http://127.0.0.1:8888/_dash-component-suites/dash_renderer/react-dom@16.v1_4_1m1592401879.13.0.js:231:18)
at invokeGuardedCallback (http://127.0.0.1:8888/_dash-component-suites/dash_renderer/react-dom@16.v1_4_1m1592401879.13.0.js:286:33)
at safelyCallComponentWillUnmount (http://127.0.0.1:8888/_dash-component-suites/dash_renderer/react-dom@16.v1_4_1m1592401879.13.0.js:19755:7)
(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.)
TypeError: r.addEventListener is not a function
at http://127.0.0.1:8888/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v0_9_2m1586518166.min.js:31:204291
at Array.forEach (<anonymous>)
at t.n.addEventOnTargets (http://127.0.0.1:8888/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v0_9_2m1586518166.min.js:31:204268)
at t.n.addTargetEvents (http://127.0.0.1:8888/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v0_9_2m1586518166.min.js:31:204720)
at t.n.updateTarget (http://127.0.0.1:8888/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v0_9_2m1586518166.min.js:31:205617)
at t.n.componentDidMount (http://127.0.0.1:8888/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v0_9_2m1586518166.min.js:31:201922)
at commitLifeCycles (http://127.0.0.1:8888/_dash-component-suites/dash_renderer/react-dom@16.v1_4_1m1592401879.13.0.js:19982:24)
at commitLayoutEffects (http://127.0.0.1:8888/_dash-component-suites/dash_renderer/react-dom@16.v1_4_1m1592401879.13.0.js:22969:9)
at HTMLUnknownElement.callCallback (http://127.0.0.1:8888/_dash-component-suites/dash_renderer/react-dom@16.v1_4_1m1592401879.13.0.js:182:16)
at Object.invokeGuardedCallbackDev (http://127.0.0.1:8888/_dash-component-suites/dash_renderer/react-dom@16.v1_4_1m1592401879.13.0.js:231:18)
def info_img_template(id):
return html.Img(
src="/assets/info_icon.png",
height="18px",
className="info_icon",
id={'type': 'dynamic-info_img',
'index': id},
n_clicks=0
)
def tooltip_template(target):
return dbc.Tooltip(
"Click for more details",
target={'type': 'dynamic-info_img',
'index': target},
placement="bottom"
)
def modal_template(index, data):
return dbc.Modal([
dbc.ModalHeader(data['title']),
dbc.ModalBody(data['body']),
dbc.ModalFooter(
dbc.Button(
"Close",
id={
'type': 'dynamic-close',
'index': index
},
className="ml-auto")
)],
id={
'type': 'dynamic-modal',
'index': index
})
def build_cards(card_data):
card_dict = {'card': {}, 'tooltip': {}, 'modal': {}}
for index, data in enumerate(card_data):
if 'graph_id' in data:
salt = data['graph_id']
else:
salt = index
if 'info' in data:
img = info_img_template(salt)
data['info_img'] = img
card_dict['tooltip'][f'tooltip_{salt}'] = tooltip_template(salt)
card_dict['modal'][f'modal_{salt}'] = modal_template(salt, data['info'])
card_dict['card'][f'card_{salt}'] = create_card(
**data # Will pass along the dict of variables
)
return card_dict
# Patten Matching callbacks for modals
@app.callback(
Output({'type': 'dynamic-modal', 'index': MATCH}, 'is_open'),
[Input({'type': 'dynamic-info_img', 'index': MATCH}, 'n_clicks'),
Input({'type': 'dynamic-close', 'index': MATCH}, 'n_clicks')],
[State({'type': 'dynamic-modal', 'index': MATCH}, 'is_open')],
)
def display_output(n1, n2, is_open):
if n1 or n2:
return not is_open
return is_open
dash_table version 4.7.0
Plotly version 4.6.0
dcc version 1.10.0
html version 1.0.3
dbc version 0.10.2
1 post - 1 participant
