Created
December 4, 2023 18:31
-
-
Save csghone/daa7a6ffebf3fb5f8958d4bcdf532e1b to your computer and use it in GitHub Desktop.
Dot Viewer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <meta charset="utf-8"> | |
| <head> | |
| <title>Dot Viewer</title> | |
| <meta property="og:title" content="Dot Viewer"> | |
| </head> | |
| <body> | |
| <!--Based on https://gist.github.com/magjac/e35164b35463f42dc7c273858148bf53--> | |
| <script src="https://d3js.org/d3.v5.js"></script> | |
| <script src="https://unpkg.com/[email protected]/viz.js" type="application/javascript"></script> | |
| <script src="https://unpkg.com/[email protected]/build/d3-graphviz.js"></script> | |
| URL: <input type="text" name="inputurl" id="inputurl"> | |
| <br><br> | |
| File: <input type="file" name="inputfile" id="inputfile"> | |
| <br> | |
| <pre id="output1"></pre> | |
| <pre id="output2"></pre> | |
| <div id="graph" style="text-align: center;"></div> | |
| <script type="text/javascript"> | |
| var graphviz = d3.select("#graph").graphviz(useWorker = false) | |
| .transition(function () { | |
| return d3.transition("main") | |
| .ease(d3.easeLinear); | |
| }) | |
| .logEvents(true); | |
| async function drawdot(url) { | |
| output1.textContent = "Loading..." | |
| req = fetch(url); | |
| resp = await req; | |
| text = await resp.text(); | |
| var parser = new DOMParser(); | |
| var doc = parser.parseFromString(text, 'text/html'); | |
| raw_url = doc.getElementById("raw-url").href; | |
| req = fetch(raw_url); | |
| resp = await req; | |
| text = await resp.text(); | |
| graphviz.renderDot(text); | |
| output1.textContent = url | |
| output2.textContent = raw_url | |
| } | |
| document.getElementById('inputurl') | |
| .addEventListener('change', async function () { | |
| x = document.getElementById("inputurl") | |
| await drawdot(x.value) | |
| }) | |
| document.getElementById('inputfile') | |
| .addEventListener('change', async function () { | |
| output1.textContent = "Loading..." | |
| output2.textContent = "" | |
| let fr = new FileReader(); | |
| fr.onload = function () { | |
| graphviz.renderDot(fr.result); | |
| output1.textContent = "Loading... done" | |
| } | |
| fr.readAsText(this.files[0]); | |
| }) | |
| urlParams = new URLSearchParams(document.URL.split('?')[1]); | |
| if (urlParams.get("dot")) { | |
| drawdot(urlParams.get("dot")); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment