Skip to content

Commit

Permalink
Merge pull request #343 from github/file-viz
Browse files Browse the repository at this point in the history 
Color nodes by file
  • Loading branch information
@hendrikvanantwerpen
hendrikvanantwerpen authored Nov 9, 2023
2 parents 256fb68 + 8ab4184 commit 0cc5a07
Show file tree
Hide file tree
Showing 2 changed files with 221 additions and 57 deletions.
233 changes: 181 additions & 52 deletions stack-graphs/src/visualization/visualization.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,33 @@
/* Paul Tol's Colorblind Friendly Color Scheme (vibrant)
* Source: https://personal.sron.nl/~pault/
*
* In default order:
*
* orange #ee7733
* blue #0077bb
* cyan #33bbee
* teal #009988
* orange #ee7733
* red #cc3311
* magenta #ee3377
* red #cc3311
* teal #009988
* grey #bbbbbb
*/

/* Paul Tol's Colorblind Friendly Color Scheme (light)
* Source: https://personal.sron.nl/~pault/
*
* In default order:
*
* light blue #77aadd
* orange #ee8866
* light yellow #eedd88
* pink #ffaabb
* light cyan #99ddff
* mint #44bb99
* pear #bbcc33
* olive #aaaa00
* pale grey #dddddd
*/

.sg {
width: 100%;
height: 100%;
Expand Down Expand Up @@ -50,52 +68,25 @@
/* --- drop scopes --- */

.sg .node.drop_scopes .background {
fill: #cc3311;
r: 6px;
}

/* --- jump to scope --- */

.sg .node.jump_to_scope .background {
fill: #ee7733;
r: 6px;
stroke: black;
}

/* --- pop symbol --- */

.sg .node.pop_symbol .background,
.sg .node.pop_scoped_symbol .background {
fill: #009988;
}

.sg .node.pop_symbol .arrow,
.sg .node.pop_scoped_symbol .arrow {
fill: #005b51;
}

.sg .node.pop_scoped_symbol .pop_scope {
fill: #ee7733;
r: 6px;
stroke: black;
}

.sg .node.definition .background {
stroke: black;
}

/* --- push symbol --- */

.sg .node.push_symbol .background,
.sg .node.push_scoped_symbol .background {
fill: #33bbee;
}

.sg .node.push_symbol .arrow,
.sg .node.push_scoped_symbol .arrow {
fill: #006e96;
}

.sg .node.push_scoped_symbol .push_scope {
fill: #bbbbbb;
r: 6px;
Expand All @@ -111,16 +102,10 @@
fill: black;
}

.sg .node.reference .background {
stroke: black;
}

/* --- root --- */

.sg .node.root .background {
fill: #0077bb;
r: 6px;
stroke: black;
}

/* --- scope --- */
Expand All @@ -131,14 +116,9 @@
}

.sg .node.scope .background {
fill: #bbbbbb;
r: 6px;
}

.sg .node.scope.exported .background {
stroke: black;
}

.sg .node.scope .focus-point {
r: 3px;
fill: none;
Expand All @@ -156,7 +136,6 @@
}

.sg .node.scope.plain_labeled_node .background {
fill: #bbbbbb;
rx: 6px;
}

Expand All @@ -167,7 +146,6 @@
/* --- path highlight --- */

.sg .node.path-node .border {
stroke: #ee3377;
stroke-width: 4px;
stroke-dasharray: 5, 5;
}
Expand All @@ -185,30 +163,21 @@
}

.sg .edge path {
stroke: black;
stroke-width: 1px;
fill: none;
}

.sg .edge text {
font-size: 11pt;
stroke: black;
stroke-width: 1px;
dominant-baseline: central;
}

.sg .edge.path-edge path
{
stroke: #ee3377;
stroke-width: 3px;
}

.sg .edge.path-edge text
{
stroke: #ee3377;
fill: #ee3377;
}

/* ------------------------------------------------------------------------------------------------
* Jumps
*/
Expand Down Expand Up @@ -442,3 +411,163 @@
margin: 0px 6px;
cursor: pointer;
}

/* ------------------------------------------------------------------------------------------------
* Colors
*/

.sg .node.global .background {
fill: #0077bb; /* blue */
}
.sg .edge.global path,
.sg .edge.global text {
stroke: #0077bb; /* blue */
}

.sg .node.file-0 .background {
fill: #77aadd; /* light blue */
}

.sg .node.file-0 .arrow,
.sg .edge.file-0 text
{
fill: #0e2236; /* light blue (darkened) */
}
.sg .node.file-0.reference .background,
.sg .node.file-0.definition .background,
.sg .node.file-0.scope.exported .background,
.sg .edge.file-0 path,
.sg .edge.file-0 text
{
stroke: #0e2236; /* light blue (darkened) */
}

.sg .node.file-1 .background,
.sg .edge.file-1 text
{
fill: #ee8866; /* orange */
}
.sg .node.file-1 .arrow {
fill: #3d1407; /* orange (darkened) */
}
.sg .node.file-1.reference .background,
.sg .node.file-1.definition .background,
.sg .node.file-1.scope.exported .background,
.sg .edge.file-1 path,
.sg .edge.file-1 text
{
stroke: #3d1407; /* orange (darkened) */
}

.sg .node.file-2 .background,
.sg .edge.file-2 text
{
fill: #eedd88; /* light yellow */
}
.sg .node.file-2 .arrow {
fill: #413809; /* light yellow (darkened) */
}
.sg .node.file-2.reference .background,
.sg .node.file-2.definition .background,
.sg .node.file-2.scope.exported .background,
.sg .edge.file-2 path,
.sg .edge.file-2 text
{
stroke: #413809; /* light yellow (darkened) */
}

.sg .node.file-3 .background,
.sg .edge.file-3 text
{
fill: #ffaabb; /* pink */
}
.sg .node.file-3 .arrow {
fill: #550011; /* pink (darkened) */
}
.sg .node.file-3.reference .background,
.sg .node.file-3.definition .background,
.sg .node.file-3.scope.exported .background,
.sg .edge.file-3 path,
.sg .edge.file-3 text
{
stroke: #550011; /* pink (darkened) */
}

.sg .node.file-4 .background,
.sg .edge.file-4 text
{
fill: #99ddff; /* light cyan */
}
.sg .node.file-4 .arrow {
fill: #003652; /* light cyan (darkened) */
}
.sg .node.file-4.reference .background,
.sg .node.file-4.definition .background,
.sg .node.file-4.scope.exported .background,
.sg .edge.file-4 path,
.sg .edge.file-4 text
{
stroke: #003652; /* light cyan (darkened) */
}

.sg .node.file-5 .background,
.sg .edge.file-5 text
{
fill: #44bb99; /* mint */
}
.sg .node.file-5 .arrow {
fill: #0e251f; /* mint (darkened) */
}
.sg .node.file-5.reference .background,
.sg .node.file-5.definition .background,
.sg .node.file-5.scope.exported .background,
.sg .edge.file-5 path,
.sg .edge.file-5 text
{
stroke: #0e251f; /* mint (darkened) */
}

.sg .node.file-6 .background,
.sg .edge.file-6 text
{
fill: #bbcc33; /* pear */
}
.sg .node.file-6 .arrow {
fill: #25290a; /* pear (darkened) */
}
.sg .node.file-6.reference .background,
.sg .node.file-6.definition .background,
.sg .node.file-6.scope.exported .background,
.sg .edge.file-6 path,
.sg .edge.file-6 text
{
stroke: #25290a; /* pear (darkened) */
}

.sg .node.file-7 .background,
.sg .edge.file-7 text
{
fill: #aaaa00; /* olive */
}
.sg .node.file-7 .arrow {
fill: #222200; /* olive (darkened) */
}
.sg .node.file-7.reference .background,
.sg .node.file-7.definition .background,
.sg .node.file-7.scope.exported .background,
.sg .edge.file-7 path,
.sg .edge.file-7 text
{
stroke: #222200; /* olive (darkened) */
}

.sg .node.path-node .border,
.sg .edge.path-edge path,
.sg .edge.path-edge text
{
stroke: #ee7733;
}

.sg .edge.path-edge text {
fill: #ee7733;
}
Loading

0 comments on commit 0cc5a07

Please sign in to comment.