csghone/dot_viewer.html

## dot_viewer.html
<!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/viz.js@1.8.1/viz.js" type="application/javascript"></script>
    <script src="https://unpkg.com/d3-graphviz@2.1.0/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>
	<!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/viz.js@1.8.1/viz.js" type="application/javascript"></script>
	<script src="https://unpkg.com/d3-graphviz@2.1.0/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>