Skip to content

Commit 8b94690

Browse files
shagemanshageman
authored
Improvments to edge visualization (#53)
* Better arrow heads and enforce their consistency * Hide the parts of the legend that have been excluded with params (This will still show an arrow type if it has not been excluded even if there are actually no arrows of that type in the diagram) * Update cassettes * Bump gem version
1 parent 3e5c03d commit 8b94690

21 files changed

Lines changed: 338 additions & 376 deletions

‎Gemfile.lock‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
PATH
22
remote: .
33
specs:
4-
visualize_packs (0.5.18)
4+
visualize_packs (0.5.19)
55
packs-specification
66
parse_packwerk (>= 0.20.0)
77
sorbet-runtime

‎diagram_examples.png‎

-57.4 KB
Loading

‎lib/graph.dot.erb‎

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -87,19 +87,19 @@ digraph package_diagram {
8787
<%- todo_types = todos_by_package[todos_to_package].group_by(&:type) -%>
8888
<%- todo_types.keys.each do |todo_type| -%>
8989
<%- if show_edge.call(package.name, todos_to_package) -%>
90-
"<%= package.name -%>" -> "<%= todos_to_package -%>"<%= todo_type == 'privacy' ? ':private' : '' -%> [ color=darkred style=dashed
90+
"<%= package.name -%>" -> "<%= todos_to_package -%>"<%= todo_type == 'privacy' ? ':private' : '' -%> [
9191
<%- if !options.use_todos_for_layout -%>
9292
constraint=false
9393
<%- end -%>
9494
# headlabel="<%= todo_type -%>"
9595
<%- if todo_type == 'privacy' -%>
96-
arrowhead=crow
96+
<%= VisualizePacks::ArrowHead::PrivacyTodo.serialize %>
9797
<%- elsif todo_type == 'architecture' -%>
98-
arrowhead=invodot
98+
<%= VisualizePacks::ArrowHead::ArchitectureTodo.serialize %>
9999
<%- elsif todo_type == 'visibility' -%>
100-
arrowhead=obox
100+
<%= VisualizePacks::ArrowHead::VisibilityTodo.serialize %>
101101
<%- elsif todo_type == 'dependency' -%>
102-
arrowhead=odot
102+
<%= VisualizePacks::ArrowHead::DependencyTodo.serialize %>
103103
<%- end -%>
104104
penwidth=<%= todo_edge_width(todo_types[todo_type].count, max_todo_count) -%>
105105
]
@@ -128,30 +128,46 @@ digraph package_diagram {
128128
subgraph cluster_legend {
129129
fontsize=16
130130
label="Edges Styles and Arrow Heads"
131+
<%- if options.show_dependencies -%>
131132
A [ fontsize=12 shape=box label="package"]
132133
B [ fontsize=12 shape=box label="package"]
134+
A -> B [label="accepted dependency" <%= VisualizePacks::ArrowHead::ConfiguredDependency.serialize %>]
135+
<%- end -%>
136+
<%- if options.show_nested_relationships -%>
133137
K [ fontsize=12 shape=box label="package"]
134138
L [ fontsize=12 shape=box label="package"]
139+
K -> L [label="nested package" <%= VisualizePacks::ArrowHead::ConfiguredNested.serialize %>]
140+
<%- end -%>
141+
<%- if options.show_visibility -%>
135142
M [ fontsize=12 shape=box label="package"]
136143
N [ fontsize=12 shape=box label="package"]
137-
144+
M -> N [label="visibile to" <%= VisualizePacks::ArrowHead::ConfiguredVisibileTo.serialize %>]
145+
<%- end -%>
146+
<%- if options.show_todos -%>
147+
<%- if options.only_todo_types.include?(EdgeTodoTypes::Privacy) -%>
138148
C [ fontsize=12 shape=box label="package"]
139149
D [ fontsize=12 shape=box label="package"]
150+
C -> D [label="privacy todo" <%= VisualizePacks::ArrowHead::PrivacyTodo.serialize %>]
151+
<%- end -%>
152+
<%- if options.only_todo_types.include?(EdgeTodoTypes::Architecture) -%>
140153
E [ fontsize=12 shape=box label="package"]
141154
F [ fontsize=12 shape=box label="package"]
155+
E -> F [label="architecture todo" <%= VisualizePacks::ArrowHead::ArchitectureTodo.serialize %>]
156+
<%- end -%>
157+
<%- if options.only_todo_types.include?(EdgeTodoTypes::Visibility) -%>
142158
G [ fontsize=12 shape=box label="package"]
143159
H [ fontsize=12 shape=box label="package"]
160+
G -> H [label="visibility todo" <%= VisualizePacks::ArrowHead::VisibilityTodo.serialize %>]
161+
<%- end -%>
162+
<%- if options.only_todo_types.include?(EdgeTodoTypes::Dependency) -%>
144163
I [ fontsize=12 shape=box label="package"]
145164
J [ fontsize=12 shape=box label="package"]
146-
147-
A -> B [label="accepted dependency" color=darkgreen]
148-
K -> L [label="nested package" color=purple]
149-
M -> N [label="visibile to" color=darkgreen]
150-
151-
C -> D [label="privacy todo" color=darkred style=dashed arrowhead=crow]
152-
E -> F [label="architecture todo" color=darkred style=dashed arrowhead=invodot]
153-
G -> H [label="visibility todo" color=darkred style=dashed arrowhead=obox]
154-
I -> J [label="dependency todo" color=darkred style=dashed arrowhead=odot]
165+
I -> J [label="dependency todo" <%= VisualizePacks::ArrowHead::DependencyTodo.serialize %>]
166+
<%- end -%>
167+
<%- end -%>
168+
LEGEND_NODE_1 [ label="" peripheries=0 height=0 width=0 style=invis ]
169+
LEGEND_NODE_2 [ label="" peripheries=0 height=0 width=0 style=invis ]
170+
LEGEND_NODE_1 -> LEGEND_NODE_2 [ style=invis ]
155171
}
156172
<%- end -%>
157173
<%- if options.show_teams && all_team_names != [] -%>
@@ -172,7 +188,7 @@ digraph package_diagram {
172188
<%- end -%>
173189
}
174190
<%- if options.show_legend -%>
175-
J -> "<%= all_team_names.last %><%= all_team_names.last %>" [style=invis]
191+
LEGEND_NODE_2 -> "<%= all_team_names.last %><%= all_team_names.last %>" [style=invis]
176192
<%- end -%>
177193
<%- end -%>
178194
}

‎lib/visualize_packs.rb‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,18 @@
1111
module VisualizePacks
1212
extend T::Sig
1313

14+
class ArrowHead < T::Enum
15+
enums do
16+
DependencyTodo = new('color=darkred style=dashed arrowhead=odiamond')
17+
PrivacyTodo = new('color=darkred style=dashed arrowhead=crow')
18+
ArchitectureTodo = new('color=darkred style=dashed arrowhead=obox')
19+
VisibilityTodo = new('color=darkred style=dashed arrowhead=tee')
20+
ConfiguredDependency = new('color=darkgreen')
21+
ConfiguredVisibileTo = new('color=blue')
22+
ConfiguredNested = new('color=purple')
23+
end
24+
end
25+
1426
sig { params(options: Options, raw_config: T::Hash[String, T.untyped], packages: T::Array[ParsePackwerk::Package]).returns(String) }
1527
def self.package_graph!(options, raw_config, packages)
1628
all_packages = filtered(packages, options).compact.sort_by {|x| x.name }

‎spec/sample_app1/Gemfile.lock‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
PATH
22
remote: ../..
33
specs:
4-
visualize_packs (0.5.18)
4+
visualize_packs (0.5.19)
55
packs-specification
66
parse_packwerk (>= 0.20.0)
77
sorbet-runtime

‎spec/sample_app1/test_output/focussed_on_packs_ui.dot‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -120,40 +120,40 @@ digraph package_diagram {
120120
"packs/models/packs/model_a" -> "." [ color=darkgreen ]
121121
"packs/ui" -> "packs/models/packs/model_a" [ color=darkgreen ]
122122
"packs/ui" -> "packs/utility" [ color=darkgreen ]
123-
"packs/ui" -> "." [ color=darkred style=dashed
123+
"packs/ui" -> "." [
124124
constraint=false
125125
# headlabel="dependency"
126-
arrowhead=odot
126+
color=darkred style=dashed arrowhead=odiamond
127127
penwidth=1.0 ]
128-
"packs/ui" -> "." [ color=darkred style=dashed
128+
"packs/ui" -> "." [
129129
constraint=false
130130
# headlabel="architecture"
131-
arrowhead=invodot
131+
color=darkred style=dashed arrowhead=obox
132132
penwidth=1.0 ]
133-
"packs/ui" -> "." [ color=darkred style=dashed
133+
"packs/ui" -> "." [
134134
constraint=false
135135
# headlabel="visibility"
136-
arrowhead=obox
136+
color=darkred style=dashed arrowhead=tee
137137
penwidth=1.0 ]
138-
"packs/ui" -> "packs/models/packs/model_a" [ color=darkred style=dashed
138+
"packs/ui" -> "packs/models/packs/model_a" [
139139
constraint=false
140140
# headlabel="dependency"
141-
arrowhead=odot
141+
color=darkred style=dashed arrowhead=odiamond
142142
penwidth=10.0 ]
143-
"packs/ui" -> "packs/models/packs/model_a":private [ color=darkred style=dashed
143+
"packs/ui" -> "packs/models/packs/model_a":private [
144144
constraint=false
145145
# headlabel="privacy"
146-
arrowhead=crow
146+
color=darkred style=dashed arrowhead=crow
147147
penwidth=7.75 ]
148-
"packs/ui" -> "packs/models/packs/model_a" [ color=darkred style=dashed
148+
"packs/ui" -> "packs/models/packs/model_a" [
149149
constraint=false
150150
# headlabel="architecture"
151-
arrowhead=invodot
151+
color=darkred style=dashed arrowhead=obox
152152
penwidth=5.5 ]
153-
"packs/ui" -> "packs/models/packs/model_a" [ color=darkred style=dashed
153+
"packs/ui" -> "packs/models/packs/model_a" [
154154
constraint=false
155155
# headlabel="visibility"
156-
arrowhead=obox
156+
color=darkred style=dashed arrowhead=tee
157157
penwidth=3.25 ]
158158
"packs/models" -> "packs/models/packs/model_a" [ color=purple ]
159159
"packs/models/packs/model_a" -> "packs/models" [ color=blue constraint=false ]
@@ -162,28 +162,28 @@ digraph package_diagram {
162162
label="Edges Styles and Arrow Heads"
163163
A [ fontsize=12 shape=box label="package"]
164164
B [ fontsize=12 shape=box label="package"]
165+
A -> B [label="accepted dependency" color=darkgreen]
165166
K [ fontsize=12 shape=box label="package"]
166167
L [ fontsize=12 shape=box label="package"]
168+
K -> L [label="nested package" color=purple]
167169
M [ fontsize=12 shape=box label="package"]
168170
N [ fontsize=12 shape=box label="package"]
169-
171+
M -> N [label="visibile to" color=blue]
170172
C [ fontsize=12 shape=box label="package"]
171173
D [ fontsize=12 shape=box label="package"]
174+
C -> D [label="privacy todo" color=darkred style=dashed arrowhead=crow]
172175
E [ fontsize=12 shape=box label="package"]
173176
F [ fontsize=12 shape=box label="package"]
177+
E -> F [label="architecture todo" color=darkred style=dashed arrowhead=obox]
174178
G [ fontsize=12 shape=box label="package"]
175179
H [ fontsize=12 shape=box label="package"]
180+
G -> H [label="visibility todo" color=darkred style=dashed arrowhead=tee]
176181
I [ fontsize=12 shape=box label="package"]
177182
J [ fontsize=12 shape=box label="package"]
178-
179-
A -> B [label="accepted dependency" color=darkgreen]
180-
K -> L [label="nested package" color=purple]
181-
M -> N [label="visibile to" color=darkgreen]
182-
183-
C -> D [label="privacy todo" color=darkred style=dashed arrowhead=crow]
184-
E -> F [label="architecture todo" color=darkred style=dashed arrowhead=invodot]
185-
G -> H [label="visibility todo" color=darkred style=dashed arrowhead=obox]
186-
I -> J [label="dependency todo" color=darkred style=dashed arrowhead=odot]
183+
I -> J [label="dependency todo" color=darkred style=dashed arrowhead=odiamond]
184+
LEGEND_NODE_1 [ label="" peripheries=0 height=0 width=0 style=invis ]
185+
LEGEND_NODE_2 [ label="" peripheries=0 height=0 width=0 style=invis ]
186+
LEGEND_NODE_1 -> LEGEND_NODE_2 [ style=invis ]
187187
}
188188
subgraph cluster_teams_legend {
189189
fontsize=16
@@ -214,5 +214,5 @@ digraph package_diagram {
214214
]
215215

216216
}
217-
J -> "Utility TeamUtility Team" [style=invis]
217+
LEGEND_NODE_2 -> "Utility TeamUtility Team" [style=invis]
218218
}

‎spec/sample_app1/test_output/focussed_on_packs_ui_focus_edges.dot‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -116,40 +116,40 @@ digraph package_diagram {
116116
"packs/utility" -> "." [ style=invis ]
117117
"packs/ui" -> "packs/models/packs/model_a" [ color=darkgreen ]
118118
"packs/ui" -> "packs/utility" [ color=darkgreen ]
119-
"packs/ui" -> "." [ color=darkred style=dashed
119+
"packs/ui" -> "." [
120120
constraint=false
121121
# headlabel="dependency"
122-
arrowhead=odot
122+
color=darkred style=dashed arrowhead=odiamond
123123
penwidth=1.0 ]
124-
"packs/ui" -> "." [ color=darkred style=dashed
124+
"packs/ui" -> "." [
125125
constraint=false
126126
# headlabel="architecture"
127-
arrowhead=invodot
127+
color=darkred style=dashed arrowhead=obox
128128
penwidth=1.0 ]
129-
"packs/ui" -> "." [ color=darkred style=dashed
129+
"packs/ui" -> "." [
130130
constraint=false
131131
# headlabel="visibility"
132-
arrowhead=obox
132+
color=darkred style=dashed arrowhead=tee
133133
penwidth=1.0 ]
134-
"packs/ui" -> "packs/models/packs/model_a" [ color=darkred style=dashed
134+
"packs/ui" -> "packs/models/packs/model_a" [
135135
constraint=false
136136
# headlabel="dependency"
137-
arrowhead=odot
137+
color=darkred style=dashed arrowhead=odiamond
138138
penwidth=10.0 ]
139-
"packs/ui" -> "packs/models/packs/model_a":private [ color=darkred style=dashed
139+
"packs/ui" -> "packs/models/packs/model_a":private [
140140
constraint=false
141141
# headlabel="privacy"
142-
arrowhead=crow
142+
color=darkred style=dashed arrowhead=crow
143143
penwidth=7.75 ]
144-
"packs/ui" -> "packs/models/packs/model_a" [ color=darkred style=dashed
144+
"packs/ui" -> "packs/models/packs/model_a" [
145145
constraint=false
146146
# headlabel="architecture"
147-
arrowhead=invodot
147+
color=darkred style=dashed arrowhead=obox
148148
penwidth=5.5 ]
149-
"packs/ui" -> "packs/models/packs/model_a" [ color=darkred style=dashed
149+
"packs/ui" -> "packs/models/packs/model_a" [
150150
constraint=false
151151
# headlabel="visibility"
152-
arrowhead=obox
152+
color=darkred style=dashed arrowhead=tee
153153
penwidth=3.25 ]
154154
"packs/models" -> "packs/models/packs/model_a" [ color=purple ]
155155
"packs/models/packs/model_a" -> "packs/models" [ color=blue constraint=false ]
@@ -158,28 +158,28 @@ digraph package_diagram {
158158
label="Edges Styles and Arrow Heads"
159159
A [ fontsize=12 shape=box label="package"]
160160
B [ fontsize=12 shape=box label="package"]
161+
A -> B [label="accepted dependency" color=darkgreen]
161162
K [ fontsize=12 shape=box label="package"]
162163
L [ fontsize=12 shape=box label="package"]
164+
K -> L [label="nested package" color=purple]
163165
M [ fontsize=12 shape=box label="package"]
164166
N [ fontsize=12 shape=box label="package"]
165-
167+
M -> N [label="visibile to" color=blue]
166168
C [ fontsize=12 shape=box label="package"]
167169
D [ fontsize=12 shape=box label="package"]
170+
C -> D [label="privacy todo" color=darkred style=dashed arrowhead=crow]
168171
E [ fontsize=12 shape=box label="package"]
169172
F [ fontsize=12 shape=box label="package"]
173+
E -> F [label="architecture todo" color=darkred style=dashed arrowhead=obox]
170174
G [ fontsize=12 shape=box label="package"]
171175
H [ fontsize=12 shape=box label="package"]
176+
G -> H [label="visibility todo" color=darkred style=dashed arrowhead=tee]
172177
I [ fontsize=12 shape=box label="package"]
173178
J [ fontsize=12 shape=box label="package"]
174-
175-
A -> B [label="accepted dependency" color=darkgreen]
176-
K -> L [label="nested package" color=purple]
177-
M -> N [label="visibile to" color=darkgreen]
178-
179-
C -> D [label="privacy todo" color=darkred style=dashed arrowhead=crow]
180-
E -> F [label="architecture todo" color=darkred style=dashed arrowhead=invodot]
181-
G -> H [label="visibility todo" color=darkred style=dashed arrowhead=obox]
182-
I -> J [label="dependency todo" color=darkred style=dashed arrowhead=odot]
179+
I -> J [label="dependency todo" color=darkred style=dashed arrowhead=odiamond]
180+
LEGEND_NODE_1 [ label="" peripheries=0 height=0 width=0 style=invis ]
181+
LEGEND_NODE_2 [ label="" peripheries=0 height=0 width=0 style=invis ]
182+
LEGEND_NODE_1 -> LEGEND_NODE_2 [ style=invis ]
183183
}
184184
subgraph cluster_teams_legend {
185185
fontsize=16
@@ -210,5 +210,5 @@ digraph package_diagram {
210210
]
211211

212212
}
213-
J -> "Utility TeamUtility Team" [style=invis]
213+
LEGEND_NODE_2 -> "Utility TeamUtility Team" [style=invis]
214214
}

0 commit comments

Comments
 (0)