After importing Mermaid as below, when the page is rendered, the mouse pointer changes to click. But on clicking nothing happens. The client side javascript also does not get called.
Is there any way to make it work?
from dash_extensions import Mermaid
I can render an html.Div tag like below
html.Div(Mermaid(
id=“id-dummy”,
chart=my-trial,
config={“securityLevel”: “loose”, “startOnLoad”: True},
name=“trial”,
),
html.Div(id=“id-capture-mermaid-click”)
my-trial=“”"
flowchart TB
subgraph Credit Card System
A[Credit Card System] -->|1. Processes Payment| B(Payment Processor)
A[Credit Card System] -->|2. Authorizes Transactions| C(Acquirer)
A[Credit Card System] -->|3. Provides Account Information| D(Bank)
end
subgraph Payment Processor
B(Payment Processor) -->|1. Sends Payment Request| E[Payment Gateway]
B(Payment Processor) -->|2. Verifies Payment| F[Payment Fraud Detection]
end
subgraph Acquirer
C(Acquirer) -->|1. Sends Transaction Request| E[Payment Gateway]
C(Acquirer) -->|2. Approves Transaction| G[Transaction Authorization]
end
subgraph Bank
D(Bank) -->|1. Sends Account Information Request| H[Account Information Service]
D(Bank) -->|2. Provides Account Information| H[Account Information Service]
end
click A call callback() “Tooltip”
“”"
app.clientside_callback(
“”"
function(tooltip) {
alert(“function called: " + url + " :” + tooltip);
console.log(“function called”);
return tooltip
}
“”",
Output(‘id-capture-mermaid-click’, ‘value’),
Input(‘id-dummy’, ‘click’),
prevent_initial_call=True,
)