From 5bad2c0e4f97353e251d3398c40f7fcefab983fe Mon Sep 17 00:00:00 2001 From: Atreya <44151328+atreya2011@users.noreply.github.com> Date: Thu, 6 May 2021 16:23:55 +0900 Subject: [PATCH] add cosmetic improvements --- code.js | 14 ++-- index.html | 198 +++++++++++++++++++++++++++++++++-------------------- style.css | 6 +- 3 files changed, 134 insertions(+), 84 deletions(-) diff --git a/code.js b/code.js index 0a6efb9..9f3981c 100644 --- a/code.js +++ b/code.js @@ -21,9 +21,9 @@ function onData(data) { var html = "" for (var i in broken) { edge = broken[i] - html += " " - + "" + packages[edge[0]].PkgPath + " ⟶ " - + "" + packages[edge[1]].PkgPath + "
" + html += " " + + "" + packages[edge[0]].PkgPath + " ⟶ " + + "" + packages[edge[1]].PkgPath + "
" } $('#broken').html(html) @@ -102,11 +102,11 @@ function selectPkg(json) { for (var i in path) { var p = packages[path[i]] if (i > 0) { - html += " " - + " " - + "⟶ " + html += " " + + "" + html += "⟶" } - html += "" + p.PkgPath + "
" + html += "" + p.PkgPath + "
" } $('#path').html(html) } diff --git a/index.html b/index.html index 599090a..413fee1 100644 --- a/index.html +++ b/index.html @@ -1,92 +1,144 @@ + + + Spaghetti: dependency analysis for Go packages - + + - -

Spaghetti: dependency analysis for Go packages

-

- This tool displays the complete dependencies of these initial packages: -

- 
...
-

- 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 break button to remove an edge from the graph, so - that you can assess what edges need to be broken to eliminate an - unwanted dependency. -

+ +
+
+

+ Spaghetti: dependency analysis for Go packages +

+
-

Packages

-

-

- ⓘ - This tree shows all dependencies of the initial packages, - grouped hierarchically by import path and containing - module.

+
+

This tool displays the complete dependencies of these initial packages:

+

...

+
+

+ 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 break button to remove an edge from the graph, so + that you can assess what edges need to be broken to eliminate an + unwanted dependency. +

+
+

Packages

- 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.

+ +
+
+ ⓘ + + This tree shows all dependencies of the initial packages, + grouped hierarchically by import path and containing + module.

+ + 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.

+ + Click a package to show more information about it. + + +

Filter:

+
+
+ +
+
+ +
+
+ + +
+
tree
+
- Click a package to show more information about it. - - - - -

-
-
tree
-
+

+ Selected package: + + none +     + +

+ + +
+
+ ⓘ + This list shows the packages + directly imported by the selected package + + +

Imports:

+
+
+
+ +
+
+
-

Selected package: none   

-

- ⓘThis list shows the packages - directly imported by the selected package - - -

-

- ⓘThis list shows the packages - that directly import the selected package - - -

-

- ⓘ - This section displays an arbitrary path from one of the - initial packages to the selected package. Click - the break button so see how your dependencies would - change if you were to remove a single edge.

+

+
+ ⓘ + This list shows the packages + that directly import the selected package + + +

Imported by:

+
+
+
+ +
+
+
- Click break all 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.

- - The bold nodes are dominators: 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. - - -
-

- -

Broken edges

- ⓘThis section lists - the edges you have broken so far. Click unbreak 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. -
...
+

+ ⓘ + This section displays an arbitrary path from one of the + initial packages to the selected package. Click + the break button so see how your dependencies would + change if you were to remove a single edge.

+ Click break all 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.

+ + The bold nodes are dominators: 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. + + +

+

+ +

Broken edges

+ ⓘThis section lists + the edges you have broken so far. Click unbreak 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. +
...
+
+
+ diff --git a/style.css b/style.css index 7f26294..0fba29b 100644 --- a/style.css +++ b/style.css @@ -1,7 +1,5 @@ body { margin: 1em; font-family: "Minion Pro", serif; max-width: 1024px; } h1, h2, h3, h4, .jstree-default { font-family: Lato; } -code, pre { font-family: Consolas, monospace; } -code.dom { font-weight: bold; } button { font-size: 90%; } pre#initial { margin-left: 1em; } @@ -14,7 +12,7 @@ pre#initial { margin-left: 1em; } .tooltip .tooltiptext { visibility: hidden; - width: 300px; + width: 320px; background-color: #eff; color: #333; border-radius: 6px; @@ -23,7 +21,7 @@ pre#initial { margin-left: 1em; } /* Position the tooltip */ position: absolute; - z-index: 1; + z-index: 10; } .tooltip:hover .tooltiptext {