Skip to content

Commit e409bfe

Browse files
whyboriswhyboris
committed
split graphs into pages
1 parent 4c86832 commit e409bfe

File tree

15 files changed

+118
-85
lines changed

15 files changed

+118
-85
lines changed

‎bin/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@ function showHelpMessage() {
5050
*/
5151
function proceed() {
5252
var functionMap = extract_1.processFiles(withoutNodeModules);
53-
// generateGraphViz(functionMap);
5453
startServer(functionMap);
5554
}
5655
/**
@@ -62,6 +61,8 @@ function startServer(functionMap) {
6261
var app = express();
6362
var path = require('path');
6463
app.use(express.static(path.join(__dirname, '..', 'graphing')));
64+
app.use('/graphviz', express.static(path.join(__dirname, '..', 'graphing/graphviz')));
65+
app.use('/cascade', express.static(path.join(__dirname, '..', 'graphing/cascade')));
6566
app.get('/hi', function (req, res) {
6667
res.json(convert_1.convertForD3(functionMap));
6768
});

graphing/graph.js renamed to graphing/cascade/graph.js

File renamed without changes.

‎graphing/cascade/index.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
3+
<head>
4+
<title>TypeScript Call Graph</title>
5+
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
6+
<style>
7+
.observablehq--inspect {
8+
display: none;
9+
}
10+
11+
.heading {
12+
font-family: sans-serif;
13+
margin: 20px 5px 0;
14+
}
15+
16+
a {
17+
display: block;
18+
margin: 10px;
19+
font-family: sans-serif;
20+
font-size: 12px;
21+
}
22+
</style>
23+
</head>
24+
25+
<body>
26+
27+
<div id="graph" style="text-align: center;"></div>
28+
29+
<script type="module">
30+
import define from "./index.js";
31+
import { Runtime, Library, Inspector } from "./runtime.js";
32+
33+
const runtime = new Runtime();
34+
const main = runtime.module(define, Inspector.into(document.body));
35+
36+
// Save to SVG & PNG
37+
setTimeout(() => {
38+
// Thank you @gustavohenke for the Gist: https://gist.github.com/gustavohenke/9073132
39+
var svg = document.querySelector("svg");
40+
var svgData = new XMLSerializer().serializeToString(svg);
41+
42+
var canvas = document.createElement("canvas");
43+
var ctx = canvas.getContext("2d");
44+
45+
var svgSize = svg.getBoundingClientRect();
46+
canvas.width = svgSize.width;
47+
canvas.height = svgSize.height;
48+
49+
var img = document.createElement("img");
50+
img.setAttribute("src", "data:image/svg+xml;base64," + btoa(svgData));
51+
52+
img.onload = function () {
53+
ctx.drawImage(img, 0, 0);
54+
55+
const pngBase64 = canvas.toDataURL("image/png");
56+
57+
const a = document.createElement("a");
58+
a.download = "callgraph.png";
59+
a.href = pngBase64;
60+
a.innerHTML = "download as PNG";
61+
document.body.appendChild(a);
62+
63+
const svgBase64 = "data:image/svg+xml;base64," + btoa(svgData);
64+
65+
const b = document.createElement("a");
66+
b.download = "callgraph.svg";
67+
b.href = svgBase64;
68+
b.innerHTML = "download as SVG";
69+
document.body.appendChild(b);
70+
71+
};
72+
73+
}, 350);
74+
75+
76+
</script>
77+
</body>

graphing/index.js renamed to graphing/cascade/index.js

File renamed without changes.

graphing/runtime.js renamed to graphing/cascade/runtime.js

File renamed without changes.

graphing/d3-graphviz.js renamed to graphing/graphviz/d3-graphviz.js

File renamed without changes.

graphing/d3-graphviz.js.map renamed to graphing/graphviz/d3-graphviz.js.map

File renamed without changes.

graphing/d3.v5.min.js renamed to graphing/graphviz/d3.v5.min.js

File renamed without changes.

graphing/graphvizlib.wasm renamed to graphing/graphviz/graphvizlib.wasm

File renamed without changes.

‎graphing/graphviz/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
3+
<head>
4+
<title>TypeScript Call Graph</title>
5+
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
6+
<style>
7+
8+
</style>
9+
</head>
10+
11+
<body>
12+
13+
<script src="./d3.v5.min.js"></script>
14+
<script src="./index.min.js"></script>
15+
<script src="./d3-graphviz.js"></script>
16+
17+
<div id="graph" style="text-align: center;"></div>
18+
19+
<script>
20+
const url = '../dot';
21+
22+
fetch(url).then((response) => {
23+
response.text().then((data) => {
24+
d3.select("#graph").graphviz()
25+
.renderDot(JSON.parse(data));
26+
});
27+
});
28+
</script>
29+
</body>

0 commit comments

Comments
 (0)