Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Render graphviz raw string in html #3696

Closed
terencechain opened this issue Oct 3, 2019 · 5 comments · Fixed by #4748
Closed

Render graphviz raw string in html #3696

terencechain opened this issue Oct 3, 2019 · 5 comments · Fixed by #4748
Assignees
@prestonvanloon
Labels
Help Wanted Extra attention is needed

Comments

@terencechain
Copy link
Member

For #3690, I'm looking for help to use JS to render raw dot data.
For example the HTML can be:

<html>
<head>
  <!-- CDN hosted graphviz library -->
</head>
<body>
  <graphviz>
    {{ dot syntax stuff here }}
  </graphviz>
</body>
</html>

http://viz-js.com/ <- Given such diagraph, the library can be rendered in browser. We'll need to fiure out how to plugin JS to the html template and understand how viz-js works.
@terencechain terencechain added the Help Wanted Extra attention is needed label Oct 3, 2019
@prestonvanloon
Copy link
Member

prestonvanloon commented Oct 3, 2019 •
edited

https://github.com/mdaines/viz.js/wiki/Usage

I took a quick glance at the docs and here's what I think you need to do (mostly copied from the link above):

<html>

<head>
    <script src="viz.js"></script>
    <!--replace this with CDN-->
    <script src="full.render.js"></script>
    <!--replace this with CDN-->
    <script type="application/javascript">
        var graph = "%s"; // Inject your dot string here, fully escaped and everything.
    </script>
    <script>
        var viz = new Viz();

        viz.renderSVGElement(graph) // reading the global graph, or inject here.
            .then(function(element) {
                document.body.appendChild(element); // appends to document. 
            })
            .catch(error => {
                // Create a new Viz instance (@see Caveats page for more info)
                viz = new Viz(); // I dont know what this is about?

                // Possibly display the error
                console.error(error);
            });
    </script>
</head>

<body>

</body>

</html>

CDN hosted files are here: https://cdnjs.com/libraries/viz.js

There are also examples here: https://github.com/mdaines/viz-examples

@terencechain
Copy link
Member Author

Thanks so much for the context, here's an example dot string generated by the chain service handler:

digraph  {
	label="Canonical block = green";labeljust="l";rankdir="RL";
	n5[color="green",label="slot: 5\n root: 06d8",shape="box"];
	n6[color="green",label="slot: 6\n root: 31aa",shape="box"];
	n4[color="green",label="slot: 4\n root: 4e74",shape="box"];
	n2[color="green",label="slot: 2\n root: 73bf",shape="box"];
	n1[color="green",label="slot: 1\n root: 9106",shape="box"];
	n3[color="green",label="slot: 3\n root: faa7",shape="box"];
	n5->n4;
	n6->n5;
	n4->n3;
	n2->n1;
	n3->n2;
}

@rauljordan
Copy link
Contributor

Closed by @terencechain and #4108

@prestonvanloon prestonvanloon reopened this Feb 5, 2020
@prestonvanloon
Copy link
Member

This doesn't print the HTML rendering. I'll pick this up since it's simply plugging in the suggestions from my comment in october

@terencechain
Copy link
Member Author

thanks @prestonvanloon

here's the code: https://github.com/prysmaticlabs/prysm/blob/master/beacon-chain/blockchain/info.go#L78

@prestonvanloon prestonvanloon mentioned this issue Feb 5, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@prestonvanloon prestonvanloon

Labels
Help Wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Render blocktree graph in page prysmaticlabs/prysm
3 participants
@rauljordan @prestonvanloon @terencechain