/
3d-dependency-graph.html
57 lines (51 loc) · 17.2 KB
/
3d-dependency-graph.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<html>
<head>
<style> body { margin: 0; } </style>
<script type="text/javascript" src="https://unpkg.com/three"></script>
<script type="text/javascript" src="https://unpkg.com/three-spritetext"></script>
<script type="text/javascript" src="https://unpkg.com/3d-force-graph"></script>
</head>
<body>
<div id="3d-graph"></div>
<script>
const gData = {
nodes: [{"id":"bin.js","displayname":"bin.js","dirname":".","label":"./<b>bin.js</b>","group":"unknown"},{"id":"fs/promises","displayname":"promises","dirname":"fs","label":"fs/<b>promises</b>","group":"unknown"},{"id":"path","displayname":"path","dirname":".","label":"./<b>path</b>","group":"unknown"},{"id":"process","displayname":"process","dirname":".","label":"./<b>process</b>","group":"unknown"},{"id":"lib/builder.js","displayname":"builder.js","dirname":"lib","label":"lib/<b>builder.js</b>","group":"unknown"},{"id":"lib/build-css/index.js","displayname":"index.js","dirname":"lib/build-css","label":"lib/build-css/<b>index.js</b>","group":"build-css"},{"id":"lib/build-js/index.js","displayname":"index.js","dirname":"lib/build-js","label":"lib/build-js/<b>index.js</b>","group":"build-js"},{"id":"lib/build-pages/index.js","displayname":"index.js","dirname":"lib/build-pages","label":"lib/build-pages/<b>index.js</b>","group":"build-pages"},{"id":"lib/build-pages/page-builders/index.js","displayname":"index.js","dirname":"lib/build-pages/page-builders","label":"lib/build-pages/page-builders/<b>index.js</b>","group":"build-pages"},{"id":"lib/build-pages/page-builders/create-page-builder.js","displayname":"create-page-builder.js","dirname":"lib/build-pages/page-builders","label":"lib/build-pages/page-builders/<b>create-page-builder.js</b>","group":"build-pages"},{"id":"lib/build-pages/resolve-vars.js","displayname":"resolve-vars.js","dirname":"lib/build-pages","label":"lib/build-pages/<b>resolve-vars.js</b>","group":"build-pages"},{"id":"lib/build-pages/page-builders/fs-path-to-url.js","displayname":"fs-path-to-url.js","dirname":"lib/build-pages/page-builders","label":"lib/build-pages/page-builders/<b>fs-path-to-url.js</b>","group":"build-pages"},{"id":"lib/build-pages/page-builders/html/index.js","displayname":"index.js","dirname":"lib/build-pages/page-builders/html","label":"lib/build-pages/page-builders/html/<b>index.js</b>","group":"build-pages"},{"id":"lib/build-pages/page-builders/js/index.js","displayname":"index.js","dirname":"lib/build-pages/page-builders/js","label":"lib/build-pages/page-builders/js/<b>index.js</b>","group":"build-pages"},{"id":"lib/build-pages/page-builders/md/index.js","displayname":"index.js","dirname":"lib/build-pages/page-builders/md","label":"lib/build-pages/page-builders/md/<b>index.js</b>","group":"build-pages"},{"id":"lib/build-pages/resolve-layout.js","displayname":"resolve-layout.js","dirname":"lib/build-pages","label":"lib/build-pages/<b>resolve-layout.js</b>","group":"build-pages"},{"id":"lib/build-static/index.js","displayname":"index.js","dirname":"lib/build-static","label":"lib/build-static/<b>index.js</b>","group":"build-static"},{"id":"util","displayname":"util","dirname":".","label":"./<b>util</b>","group":"unknown"},{"id":"lib/identify-pages.js","displayname":"identify-pages.js","dirname":"lib","label":"lib/<b>identify-pages.js</b>","group":"unknown"},{"id":"lib/build-pages/page-builders/fs-path-to-url.test.js","displayname":"fs-path-to-url.test.js","dirname":"lib/build-pages/page-builders","label":"lib/build-pages/page-builders/<b>fs-path-to-url.test.js</b>","group":"build-pages"},{"id":"lib/build-pages/resolve-vars.test.js","displayname":"resolve-vars.test.js","dirname":"lib/build-pages","label":"lib/build-pages/<b>resolve-vars.test.js</b>","group":"build-pages"},{"id":"lib/identify-pages.test.js","displayname":"identify-pages.test.js","dirname":"lib","label":"lib/<b>identify-pages.test.js</b>","group":"unknown"},{"id":"test-project/public/a-page/client.js","displayname":"client.js","dirname":"test-project/public/a-page","label":"test-project/public/a-page/<b>client.js</b>","group":"public"},{"id":"test-project/public/chunk-OFR2H3GI.js","displayname":"chunk-OFR2H3GI.js","dirname":"test-project/public","label":"test-project/public/<b>chunk-OFR2H3GI.js</b>","group":"public"},{"id":"test-project/public/chunk-OWLKZ7N7.js","displayname":"chunk-OWLKZ7N7.js","dirname":"test-project/public","label":"test-project/public/<b>chunk-OWLKZ7N7.js</b>","group":"public"},{"id":"test-project/public/a-page/nested-page/client.js","displayname":"client.js","dirname":"test-project/public/a-page/nested-page","label":"test-project/public/a-page/nested-page/<b>client.js</b>","group":"public"},{"id":"test-project/public/client.js","displayname":"client.js","dirname":"test-project/public","label":"test-project/public/<b>client.js</b>","group":"public"},{"id":"test-project/public/html-page/client.js","displayname":"client.js","dirname":"test-project/public/html-page","label":"test-project/public/html-page/<b>client.js</b>","group":"public"},{"id":"test-project/public/md-page/client.js","displayname":"client.js","dirname":"test-project/public/md-page","label":"test-project/public/md-page/<b>client.js</b>","group":"public"},{"id":"test-project/src/a-page/client.js","displayname":"client.js","dirname":"test-project/src/a-page","label":"test-project/src/a-page/<b>client.js</b>","group":"src"},{"id":"test-project/src/a-page/libs/a-lib.js","displayname":"a-lib.js","dirname":"test-project/src/a-page/libs","label":"test-project/src/a-page/libs/<b>a-lib.js</b>","group":"src"},{"id":"test-project/src/a-page/nested-page/client.js","displayname":"client.js","dirname":"test-project/src/a-page/nested-page","label":"test-project/src/a-page/nested-page/<b>client.js</b>","group":"src"},{"id":"test-project/src/a-page/nested-page/page.js","displayname":"page.js","dirname":"test-project/src/a-page/nested-page","label":"test-project/src/a-page/nested-page/<b>page.js</b>","group":"src"},{"id":"test-project/src/nav.js","displayname":"nav.js","dirname":"test-project/src","label":"test-project/src/<b>nav.js</b>","group":"src"},{"id":"test-project/src/a-page/page.js","displayname":"page.js","dirname":"test-project/src/a-page","label":"test-project/src/a-page/<b>page.js</b>","group":"src"},{"id":"test-project/src/client.js","displayname":"client.js","dirname":"test-project/src","label":"test-project/src/<b>client.js</b>","group":"src"},{"id":"test-project/src/conflict-page/page.js","displayname":"page.js","dirname":"test-project/src/conflict-page","label":"test-project/src/conflict-page/<b>page.js</b>","group":"src"},{"id":"test-project/src/global.vars.js","displayname":"global.vars.js","dirname":"test-project/src","label":"test-project/src/<b>global.vars.js</b>","group":"src"},{"id":"test-project/src/html-page/client.js","displayname":"client.js","dirname":"test-project/src/html-page","label":"test-project/src/html-page/<b>client.js</b>","group":"src"},{"id":"test-project/src/html-page/page.vars.js","displayname":"page.vars.js","dirname":"test-project/src/html-page","label":"test-project/src/html-page/<b>page.vars.js</b>","group":"src"},{"id":"test-project/src/md-page/client.js","displayname":"client.js","dirname":"test-project/src/md-page","label":"test-project/src/md-page/<b>client.js</b>","group":"src"},{"id":"test-project/src/page.js","displayname":"page.js","dirname":"test-project/src","label":"test-project/src/<b>page.js</b>","group":"src"},{"id":"test-project/src/root.layout.js","displayname":"root.layout.js","dirname":"test-project/src","label":"test-project/src/<b>root.layout.js</b>","group":"src"}],
links: [{"source":"bin.js","target":"lib/builder.js","label":"./<b>bin.js</b> →</br>lib/<b>builder.js</b>"},{"source":"bin.js","target":"fs/promises","label":"./<b>bin.js</b> →</br>fs/<b>promises</b>"},{"source":"bin.js","target":"path","label":"./<b>bin.js</b> →</br>./<b>path</b>"},{"source":"bin.js","target":"process","label":"./<b>bin.js</b> →</br>./<b>process</b>"},{"source":"lib/builder.js","target":"lib/build-css/index.js","label":"lib/<b>builder.js</b> →</br>lib/build-css/<b>index.js</b>"},{"source":"lib/builder.js","target":"lib/build-js/index.js","label":"lib/<b>builder.js</b> →</br>lib/build-js/<b>index.js</b>"},{"source":"lib/builder.js","target":"lib/build-pages/index.js","label":"lib/<b>builder.js</b> →</br>lib/build-pages/<b>index.js</b>"},{"source":"lib/builder.js","target":"lib/build-static/index.js","label":"lib/<b>builder.js</b> →</br>lib/build-static/<b>index.js</b>"},{"source":"lib/builder.js","target":"lib/identify-pages.js","label":"lib/<b>builder.js</b> →</br>lib/<b>identify-pages.js</b>"},{"source":"lib/builder.js","target":"fs/promises","label":"lib/<b>builder.js</b> →</br>fs/<b>promises</b>"},{"source":"lib/builder.js","target":"path","label":"lib/<b>builder.js</b> →</br>./<b>path</b>"},{"source":"lib/build-css/index.js","target":"fs/promises","label":"lib/build-css/<b>index.js</b> →</br>fs/<b>promises</b>"},{"source":"lib/build-css/index.js","target":"path","label":"lib/build-css/<b>index.js</b> →</br>./<b>path</b>"},{"source":"lib/build-js/index.js","target":"path","label":"lib/build-js/<b>index.js</b> →</br>./<b>path</b>"},{"source":"lib/build-pages/index.js","target":"lib/build-pages/page-builders/index.js","label":"lib/build-pages/<b>index.js</b> →</br>lib/build-pages/page-builders/<b>index.js</b>"},{"source":"lib/build-pages/index.js","target":"lib/build-pages/resolve-layout.js","label":"lib/build-pages/<b>index.js</b> →</br>lib/build-pages/<b>resolve-layout.js</b>"},{"source":"lib/build-pages/index.js","target":"lib/build-pages/resolve-vars.js","label":"lib/build-pages/<b>index.js</b> →</br>lib/build-pages/<b>resolve-vars.js</b>"},{"source":"lib/build-pages/page-builders/index.js","target":"lib/build-pages/page-builders/create-page-builder.js","label":"lib/build-pages/page-builders/<b>index.js</b> →</br>lib/build-pages/page-builders/<b>create-page-builder.js</b>"},{"source":"lib/build-pages/page-builders/index.js","target":"lib/build-pages/page-builders/html/index.js","label":"lib/build-pages/page-builders/<b>index.js</b> →</br>lib/build-pages/page-builders/html/<b>index.js</b>"},{"source":"lib/build-pages/page-builders/index.js","target":"lib/build-pages/page-builders/js/index.js","label":"lib/build-pages/page-builders/<b>index.js</b> →</br>lib/build-pages/page-builders/js/<b>index.js</b>"},{"source":"lib/build-pages/page-builders/index.js","target":"lib/build-pages/page-builders/md/index.js","label":"lib/build-pages/page-builders/<b>index.js</b> →</br>lib/build-pages/page-builders/md/<b>index.js</b>"},{"source":"lib/build-pages/page-builders/create-page-builder.js","target":"lib/build-pages/resolve-vars.js","label":"lib/build-pages/page-builders/<b>create-page-builder.js</b> →</br>lib/build-pages/<b>resolve-vars.js</b>"},{"source":"lib/build-pages/page-builders/create-page-builder.js","target":"lib/build-pages/page-builders/fs-path-to-url.js","label":"lib/build-pages/page-builders/<b>create-page-builder.js</b> →</br>lib/build-pages/page-builders/<b>fs-path-to-url.js</b>"},{"source":"lib/build-pages/page-builders/create-page-builder.js","target":"fs/promises","label":"lib/build-pages/page-builders/<b>create-page-builder.js</b> →</br>fs/<b>promises</b>"},{"source":"lib/build-pages/page-builders/create-page-builder.js","target":"path","label":"lib/build-pages/page-builders/<b>create-page-builder.js</b> →</br>./<b>path</b>"},{"source":"lib/build-pages/page-builders/fs-path-to-url.js","target":"path","label":"lib/build-pages/page-builders/<b>fs-path-to-url.js</b> →</br>./<b>path</b>"},{"source":"lib/build-pages/page-builders/html/index.js","target":"fs/promises","label":"lib/build-pages/page-builders/html/<b>index.js</b> →</br>fs/<b>promises</b>"},{"source":"lib/build-pages/page-builders/md/index.js","target":"fs/promises","label":"lib/build-pages/page-builders/md/<b>index.js</b> →</br>fs/<b>promises</b>"},{"source":"lib/build-static/index.js","target":"util","label":"lib/build-static/<b>index.js</b> →</br>./<b>util</b>"},{"source":"lib/build-pages/page-builders/fs-path-to-url.test.js","target":"lib/build-pages/page-builders/fs-path-to-url.js","label":"lib/build-pages/page-builders/<b>fs-path-to-url.test.js</b> →</br>lib/build-pages/page-builders/<b>fs-path-to-url.js</b>"},{"source":"lib/build-pages/page-builders/fs-path-to-url.test.js","target":"process","label":"lib/build-pages/page-builders/<b>fs-path-to-url.test.js</b> →</br>./<b>process</b>"},{"source":"lib/build-pages/resolve-vars.test.js","target":"lib/build-pages/resolve-vars.js","label":"lib/build-pages/<b>resolve-vars.test.js</b> →</br>lib/build-pages/<b>resolve-vars.js</b>"},{"source":"lib/build-pages/resolve-vars.test.js","target":"path","label":"lib/build-pages/<b>resolve-vars.test.js</b> →</br>./<b>path</b>"},{"source":"lib/identify-pages.test.js","target":"lib/build-pages/index.js","label":"lib/<b>identify-pages.test.js</b> →</br>lib/build-pages/<b>index.js</b>"},{"source":"lib/identify-pages.test.js","target":"lib/identify-pages.js","label":"lib/<b>identify-pages.test.js</b> →</br>lib/<b>identify-pages.js</b>"},{"source":"lib/identify-pages.test.js","target":"path","label":"lib/<b>identify-pages.test.js</b> →</br>./<b>path</b>"},{"source":"test-project/public/a-page/client.js","target":"test-project/public/chunk-OFR2H3GI.js","label":"test-project/public/a-page/<b>client.js</b> →</br>test-project/public/<b>chunk-OFR2H3GI.js</b>"},{"source":"test-project/public/a-page/client.js","target":"test-project/public/chunk-OWLKZ7N7.js","label":"test-project/public/a-page/<b>client.js</b> →</br>test-project/public/<b>chunk-OWLKZ7N7.js</b>"},{"source":"test-project/public/chunk-OWLKZ7N7.js","target":"test-project/public/chunk-OFR2H3GI.js","label":"test-project/public/<b>chunk-OWLKZ7N7.js</b> →</br>test-project/public/<b>chunk-OFR2H3GI.js</b>"},{"source":"test-project/public/a-page/nested-page/client.js","target":"test-project/public/chunk-OFR2H3GI.js","label":"test-project/public/a-page/nested-page/<b>client.js</b> →</br>test-project/public/<b>chunk-OFR2H3GI.js</b>"},{"source":"test-project/public/a-page/nested-page/client.js","target":"test-project/public/chunk-OWLKZ7N7.js","label":"test-project/public/a-page/nested-page/<b>client.js</b> →</br>test-project/public/<b>chunk-OWLKZ7N7.js</b>"},{"source":"test-project/public/client.js","target":"test-project/public/chunk-OFR2H3GI.js","label":"test-project/public/<b>client.js</b> →</br>test-project/public/<b>chunk-OFR2H3GI.js</b>"},{"source":"test-project/public/html-page/client.js","target":"test-project/public/chunk-OFR2H3GI.js","label":"test-project/public/html-page/<b>client.js</b> →</br>test-project/public/<b>chunk-OFR2H3GI.js</b>"},{"source":"test-project/public/md-page/client.js","target":"test-project/public/chunk-OFR2H3GI.js","label":"test-project/public/md-page/<b>client.js</b> →</br>test-project/public/<b>chunk-OFR2H3GI.js</b>"},{"source":"test-project/src/a-page/client.js","target":"test-project/src/a-page/libs/a-lib.js","label":"test-project/src/a-page/<b>client.js</b> →</br>test-project/src/a-page/libs/<b>a-lib.js</b>"},{"source":"test-project/src/a-page/nested-page/client.js","target":"test-project/src/a-page/libs/a-lib.js","label":"test-project/src/a-page/nested-page/<b>client.js</b> →</br>test-project/src/a-page/libs/<b>a-lib.js</b>"},{"source":"test-project/src/a-page/nested-page/page.js","target":"test-project/src/nav.js","label":"test-project/src/a-page/nested-page/<b>page.js</b> →</br>test-project/src/<b>nav.js</b>"},{"source":"test-project/src/a-page/page.js","target":"test-project/src/nav.js","label":"test-project/src/a-page/<b>page.js</b> →</br>test-project/src/<b>nav.js</b>"},{"source":"test-project/src/a-page/page.js","target":"test-project/src/a-page/libs/a-lib.js","label":"test-project/src/a-page/<b>page.js</b> →</br>test-project/src/a-page/libs/<b>a-lib.js</b>"},{"source":"test-project/src/page.js","target":"test-project/src/nav.js","label":"test-project/src/<b>page.js</b> →</br>test-project/src/<b>nav.js</b>"}]
};
const elem = document.getElementById('3d-graph')
const Graph = ForceGraph3D()
(elem)
.graphData(gData)
.nodeAutoColorBy('group')
.nodeLabel(node => node.label)
.onNodeHover(node => elem.style.cursor = node ? 'pointer' : null)
.onNodeClick(node => {
// Aim at node from outside it
const distance = 40;
const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
Graph.cameraPosition(
{ x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }, // new position
node, // lookAt ({ x, y, z })
3000 // ms transition duration
)
})
/* nice idea, but the 3D graph tends to look cluttered. Also GPU/ CPU
intensive when run on a serious code base (e.g. react that has
~4500 nodes and ~10000 links
*/
.nodeThreeObject(node => {
const sprite = new SpriteText(node.displayname);
sprite.material.depthWrite = true; // make sprite background transparent
sprite.color = node.color;
sprite.textHeight = 6;
return sprite;
})
.linkOpacity(0.2)
.linkWidth(2)
.linkDirectionalArrowLength(4)
.linkDirectionalParticles(7) // cool but a bit GPU intensive
.linkLabel(link => link.label)
.onLinkHover(link => elem.style.cursor = link ? 'pointer' : null)
</script>
</body>
</html>