Mermaid: Click event and react component

[zumdahl76]

I'm trying to make a react component that uses Mermaid just like this but that will allow the click event to be used.
I tried the solution found here without success.

Here is what i got:

import React, { Component } from "react";
import $ from 'jquery';
import mermaid from "mermaid";

class Mimi extends Component {
  constructor(props) {
    super(props);

    mermaid.mermaidAPI.initialize({
      startOnLoad: true,
        cloneCssStyles: false,
        flowchart: {
            useMaxWidth: true,
            htmlLabels: true
        }
    });

  }

  componentDidMount() {
     function myAction(id) {
        alert("click firedee");
    }
    $(function () {
        var graphDefinition = 'graph TB\nProposal-->Contract\nContract-->Planning\nPlanning-->Design\nDesign-->Build\nBuild-->Verification\nVerification-->Delivery\nDelivery-->Support\nclick Design myAction\n';
        var callback = function (code,bindEvents){
            console.log(bindEvents);
            $("#div-id1").html(code)
            bindEvents();
        }
        mermaid.mermaidAPI.render('some_id', graphDefinition, callback);
    });
  }

  render() {
    return (<div id={"div-id1"}></div>)
  }
}

export default Mimi;

Which is called from a parent react component just like that:

<Mimi />

The FlowChart displays fine but the "Design" node that is clickable will not trigger the myAction function once clicked.

Help would be appreciated.

[zumdahl76]

I am closing this "issue" as i decided to use Dagre-D3 directly instead of Mermaid. This makes it easier to intercept a node click event within my React component.

[digitalillusion]

This is the working react component I come up with just to test the integration with version ^8.0.0-rc.8:

import React, { Component } from "react";
import mermaid from "mermaid";


class TplDiagram extends Component {
    constructor(props) {
        super(props);

        mermaid.initialize({
            mermaid : {
                startOnLoad: true,
            }
        })
    }

    componentDidMount() {
        window.callback = e => console.log(e)
        mermaid.contentLoaded()
    }

    render() {
        return <div className="mermaid">
            graph LR;
                A-->B;
                    click A callback "Tooltip";
                    click B "http://www.github.com" "This is a link"
        </div>
    }
}

export default TplDiagram;

[mrkchang]

The above works in codesandbox but not when I try to incorporate it into my reactjs code for my webapp

[mrkchang]

Had to do the following :

    mermaid.initialize({
        mermaid : {
            startOnLoad: true,
        },
        securityLevel: 'loose',
    })

[IOrlandoni]

@mrkchang Hey! You're commenting in an old closed issue. Feel free to create a new issue if you found a bug, need help, want to request a feature or anything!