Page Graph Styling Gotcha

If you follow links more than one level, be really specific about styling.

--- Prior to Page Graph Deeper Levels, we had this page graph:

DOT strict digraph rankdir=LR node [style=filled fillcolor=lightyellow penwidth=3 color=black fontname="Helvetica"] HERE NODE node [fillcolor=white] LINKS HERE -> NODE node [style=dotted] edge [style=dotted] BACKLINKS NODE -> HERE STATIC strict digraph {rankdir=LR node [style=filled fillcolor=lightyellow penwidth=3 color=black fontname="Helvetica"] "Page Graph Styling Gotcha" node [fillcolor=white] "Page Graph Styling Gotcha" -> "Step-By-Step Page Graph" "Page Graph Styling Gotcha" -> "Page Graph Deeper Levels" node [style=dotted] edge [style=dotted] "Step-By-Step Page Graph" -> "Page Graph Styling Gotcha" "Page Graph Deeper Levels" -> "Page Graph Styling Gotcha" }

... which was written like this:

node [style=filled fillcolor=lightyellow penwidth=3 color=black fontname="Helvetica"] HERE NODE node [fillcolor=white] LINKS HERE -> NODE node [style=dotted] edge [style=dotted] BACKLINKS NODE -> HERE

From Page Graph Deeper Levels, we learned this trick to descend further into a graph:

LINKS HERE -> NODE HERE LINKS HERE -> NODE

It's a simple matter to put them together, which gives us this:

DOT strict digraph rankdir=LR node [style=filled fillcolor=lightyellow penwidth=3 color=black fontname="Helvetica"] HERE NODE node [fillcolor=white] LINKS HERE -> NODE HERE LINKS HERE -> NODE node [style=dotted] edge [style=dotted] BACKLINKS NODE -> HERE

It's a bit odd that `Step-By-Step Page Graph` appears on the right, rather than as the leftmost node; however, we've seen that before: it's because it's got arrows going both in and out of it.

What's more odd is that the second-level pages `Page Graph` and `Example Page 1` are pointed at with dotted arrows and have a dotted outline. The didn't happen in Page Graph Deeper Levels. Why does it happen here? After all, look at the order of the relevant statements:

node [fillcolor=white] LINKS HERE -> NODE HERE LINKS HERE -> NODE node [style=dotted] edge [style=dotted] BACKLINKS NODE -> HERE

The dotted styling happens *after* the `LINKS HERE` section, so why does it apply to the nodes handled *before* then?

The secret is in how the combined DOT-and-Fedwiki markup is translated into plain DOT . You can see the vital clue if you Toggle Editing Mode and edit the Graphviz factory. Skip the beginning text and look at the text after the `STATIC`. You'll find four clumps of link commands, which look like `name_of_node -> name_of_other_node`. Those groups are:

* This very page (`HERE`), preceded with this style: `node [style=filled fillcolor=lightyellow penwidth=3 color=black fontname="Helvetica"]`

* A series of edges from HERE to linked-to pages, preceded with a statement that overrides the default fill color: `node [fillcolor=white]` The edges going out from the linked-to pages are not processed here.

* The `BACKLINKS` nodes, styled to be dotted: `node [style=dotted]` `edge [style=dotted]`

* *Only now*, the edges and nodes from the nested `LINKS` statement. Because the default has just been changed to be dott4ed, these nodes and edges are also dotted.

A quick solution adds styling for the indented lines:

LINKS HERE -> NODE HERE node [style=solid] edge [style=solid] LINKS HERE -> NODE

... which produces this somewhat clearer graph:

DOT strict digraph rankdir=LR node [style=filled fillcolor=lightyellow penwidth=3 color=black fontname="Helvetica"] HERE NODE node [fillcolor=white] LINKS HERE -> NODE HERE node [style=solid] edge [style=solid] LINKS HERE -> NODE node [style=dotted] edge [style=dotted] BACKLINKS NODE -> HERE STATIC strict digraph {rankdir=LR node [style=filled fillcolor=lightyellow penwidth=3 color=black fontname="Helvetica"] "Page Graph Styling Gotcha" node [fillcolor=white] "Page Graph Styling Gotcha" -> "Page Graph Deeper Levels" "Page Graph Styling Gotcha" -> "Page Graph Deeper Levels" "Page Graph Styling Gotcha" -> "Page Graph Deeper Levels" "Page Graph Styling Gotcha" -> "Toggle Editing Mode" node [style=dotted] edge [style=dotted] "Step-By-Step Page Graph" -> "Page Graph Styling Gotcha" "Page Graph Deeper Levels" -> "Page Graph Styling Gotcha" node [style=solid] edge [style=dotted] "Page Graph Deeper Levels" -> "Page Graph" "Page Graph Deeper Levels" -> "Step-By-Step Page Graph" "Page Graph Deeper Levels" -> "Example Page 1" "Page Graph Deeper Levels" -> "Page Graph Styling Gotcha" node [style=solid] edge [style=dotted] "Page Graph Deeper Levels" -> "Page Graph" "Page Graph Deeper Levels" -> "Step-By-Step Page Graph" "Page Graph Deeper Levels" -> "Example Page 1" "Page Graph Deeper Levels" -> "Page Graph Styling Gotcha" node [style=solid] edge [style=dotted] "Page Graph Deeper Levels" -> "Page Graph" "Page Graph Deeper Levels" -> "Step-By-Step Page Graph" "Page Graph Deeper Levels" -> "Example Page 1" "Page Graph Deeper Levels" -> "Page Graph Styling Gotcha" node [style=solid] edge [style=dotted] "Toggle Editing Mode" -> "Paragraph" "Toggle Editing Mode" -> "Factory"}

It's probably safest to be really explicit about styling for every category of nodes rather than to rely on defaults.