-
Notifications
You must be signed in to change notification settings - Fork 24
/
index.html
92 lines (83 loc) · 3.69 KB
/
index.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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html>
<head>
<title>Spaghetti: dependency analysis for Go packages</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
<link rel="stylesheet" type="text/css" href="/style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script src="/code.js"></script>
</head>
<body onload='onLoad()'>
<h1>Spaghetti: dependency analysis for Go packages</h1>
<p>
This tool displays the complete dependencies of these initial packages:
</p>
<pre id='initial'>...</pre>
<p>
Click on a package in the tree view to display information about it,
including a path by which it is reached from one of the initial packages.
Use the <i>break</i> button to remove an edge from the graph, so
that you can assess what edges need to be broken to eliminate an
unwanted dependency.
</p>
<h2>Packages</h2>
<p>
<form style='display: inline;'>
<span class="tooltip">ⓘ<span class="tooltiptext">
This tree shows all dependencies of the initial packages,
grouped hierarchically by import path and containing
module. <br/><br/>
Each package has a numeric weight, computed using network
flow: this is the size of the graph rooted at the node,
divided by the node's in-degree. <br/><br/>
Click a package to show more information about it.
</span></span>
<label for='search'>Filter:
<input id='search' type='text' name='filter' size='70'/></label>
<button onclick='this.form.search.value=""'>Clear</button>
</form>
</p>
<div style='overflow: auto; width: 65%; height: 20em; border: thin solid grey; display: inline-block'>
<div style='height: 20em;' id='tree'>tree</div>
</div>
<h2>Selected package: <span id='pkgname'>none</span> <span id='doc'></span></h2>
<p>
<span class="tooltip">ⓘ<span class="tooltiptext">This list shows the packages
directly imported by the selected package</span></span>
<label for='imports'>Imports: </label>
<select id='imports' onchange='onSelectImport(this)'></select>
</p>
<p>
<span class="tooltip">ⓘ<span class="tooltiptext">This list shows the packages
that directly import the selected package</span></span>
<label for='importedBy'>Imported by: </label>
<select id='importedBy' onchange='onSelectImport(this)'></select>
</p>
<p>
<span class="tooltip">ⓘ<span class="tooltiptext">
This section displays an arbitrary path from one of the
initial packages to the selected package. Click
the <i>break</i> button so see how your dependencies would
change if you were to remove a single edge.<br/><br/>
Click <i>break all</i> to remove all inbound edges to a
package, removing it from the graph. This may be useful for
removing distracting packages that you don't plan to
eliminate.<br/><br/>
The bold nodes are <i>dominators</i>: nodes that are found on
every path to the selected node. One way to break a dependency
on a package is to break all dependencies on any of its dominators.
</span></span>
<label for='path'>Path from initial package:</label>
<div id='path'></div>
</p>
<h2>Broken edges</h2>
<span class="tooltip">ⓘ<span class="tooltiptext">This section lists
the edges you have broken so far. Click <i>unbreak</i> to
restore an edge and update the graph. Once you are happy with
the dependencies, you can use this as your to-do list for
refactoring.</span></span>
<div id='broken'>...</div>
</body>
</html>