Backport changes in Chapter 5 to previous chapters and update Chapter5 documentation (#34)

* Backport changes from chapter 5 to older chapters (#30)

* Fix wrong indent

* Backport to chapter 4

* Backport to chapter 3

* Backport to chapter 2

* Backport to chapter 1

* Add if statement to comment (#32)

* Update visuals for chapters 1,2 & 3.
Reenable drawing of edges from constants to Start for these chapters.

* Update visuals for chapters 4.
Revise text to explain the labeling of edges in graphs and that we omit edge from Constant to Start nodes from chapter 4.

* Add code snippets for if statement parsing and the duplication and merging of ScopeNodes.
Explain how scopeNodes are duplicated and merged.

* Add constant check to minus node (#31)

* Fix closing root block with } (#33)

* Backport fix closing root block with } to chapter 4 and 3 (#35)

* Show use-def edge from Phi to Region as dotted edge.
Add example of Phi peephole.
Update visuals.
Add more examples.

* Fix visuals in chapter 1 and README in chapter 4.

* Remove subheading

* Adjust spaces

---------

Co-authored-by: XmiliaH <45106915+XmiliaH@users.noreply.github.com>

1 files changed, 56 insertions, 49 deletions

diff --git a/chapter03/docs/03-graph3.svg b/chapter03/docs/03-graph3.svg
index 3b720323..623bd902 100644
--- a/chapter03/docs/03-graph3.svg
+++ b/chapter03/docs/03-graph3.svg
@@ -14,96 +14,103 @@
 <polygon fill="none" stroke="black" points="8,-8 8,-204 386,-204 386,-8 8,-8"/>
 </g>
 <g id="clust2" class="cluster">
-<title>cluster_0</title>
+<title>cluster_Scope1_0</title>
 <polygon fill="none" stroke="black" points="394,-8 394,-60 538,-60 538,-8 394,-8"/>
 </g>
-<!-- Start1 -->
+<!-- Start2 -->
 <g id="node1" class="node">
-<title>Start1</title>
+<title>Start2</title>
 <polygon fill="yellow" stroke="black" points="198,-196 144,-196 144,-160 198,-160 198,-196"/>
 <text text-anchor="middle" x="171" y="-174.3" font-family="Times,serif" font-size="14.00">Start</text>
 </g>
-<!-- Con_2 -->
+<!-- Con_3 -->
 <g id="node2" class="node">
-<title>Con_2</title>
+<title>Con_3</title>
 <ellipse fill="none" stroke="black" cx="207" cy="-106" rx="27" ry="18"/>
 <text text-anchor="middle" x="207" y="-102.3" font-family="Times,serif" font-size="14.00">#1</text>
 </g>
-<!-- Con_2&#45;&gt;Start1 -->
+<!-- Con_3&#45;&gt;Start2 -->
 <g id="edge1" class="edge">
-<title>Con_2&#45;&gt;Start1</title>
+<title>Con_3&#45;&gt;Start2</title>
 <path fill="none" stroke="black" stroke-dasharray="1,5" d="M198.65,-123.24C194.46,-131.39 189.27,-141.47 184.53,-150.69"/>
 <polygon fill="black" stroke="black" points="181.27,-149.38 179.81,-159.88 187.49,-152.58 181.27,-149.38"/>
+<text text-anchor="middle" x="195.65" y="-125.84" font-family="Helvetica,sans-Serif" font-size="8.00">0</text>
 </g>
-<!-- Con_3 -->
+<!-- Con_4 -->
 <g id="node3" class="node">
-<title>Con_3</title>
+<title>Con_4</title>
 <ellipse fill="none" stroke="black" cx="135" cy="-106" rx="27" ry="18"/>
 <text text-anchor="middle" x="135" y="-102.3" font-family="Times,serif" font-size="14.00">#2</text>
 </g>
-<!-- Con_3&#45;&gt;Start1 -->
+<!-- Con_4&#45;&gt;Start2 -->
 <g id="edge2" class="edge">
-<title>Con_3&#45;&gt;Start1</title>
+<title>Con_4&#45;&gt;Start2</title>
 <path fill="none" stroke="black" stroke-dasharray="1,5" d="M143.35,-123.24C147.54,-131.39 152.73,-141.47 157.47,-150.69"/>
 <polygon fill="black" stroke="black" points="154.51,-152.58 162.19,-159.88 160.73,-149.38 154.51,-152.58"/>
+<text text-anchor="middle" x="140.35" y="-125.84" font-family="Helvetica,sans-Serif" font-size="8.00">0</text>
 </g>
-<!-- Con_19 -->
+<!-- Con_20 -->
 <g id="node4" class="node">
-<title>Con_19</title>
-<ellipse fill="none" stroke="black" cx="43" cy="-106" rx="27" ry="18"/>
-<text text-anchor="middle" x="43" y="-102.3" font-family="Times,serif" font-size="14.00">#8</text>
+<title>Con_20</title>
+<ellipse fill="none" stroke="black" cx="63" cy="-106" rx="27" ry="18"/>
+<text text-anchor="middle" x="63" y="-102.3" font-family="Times,serif" font-size="14.00">#8</text>
 </g>
-<!-- Con_19&#45;&gt;Start1 -->
+<!-- Con_20&#45;&gt;Start2 -->
 <g id="edge3" class="edge">
-<title>Con_19&#45;&gt;Start1</title>
-<path fill="none" stroke="black" stroke-dasharray="1,5" d="M63.28,-118.09C82.45,-128.57 111.64,-144.54 134.8,-157.2"/>
-<polygon fill="black" stroke="black" points="133.21,-160.32 143.67,-162.05 136.57,-154.18 133.21,-160.32"/>
+<title>Con_20&#45;&gt;Start2</title>
+<path fill="none" stroke="black" stroke-dasharray="1,5" d="M81.81,-119.19C96.77,-128.89 118.11,-142.72 136.16,-154.42"/>
+<polygon fill="black" stroke="black" points="134.42,-157.46 144.72,-159.97 138.23,-151.59 134.42,-157.46"/>
+<text text-anchor="middle" x="78.81" y="-121.79" font-family="Helvetica,sans-Serif" font-size="8.00">0</text>
 </g>
-<!-- Con_4 -->
+<!-- Con_5 -->
 <g id="node5" class="node">
-<title>Con_4</title>
+<title>Con_5</title>
 <ellipse fill="none" stroke="black" cx="351" cy="-106" rx="27" ry="18"/>
 <text text-anchor="middle" x="351" y="-102.3" font-family="Times,serif" font-size="14.00">#3</text>
 </g>
-<!-- Con_4&#45;&gt;Start1 -->
+<!-- Con_5&#45;&gt;Start2 -->
 <g id="edge4" class="edge">
-<title>Con_4&#45;&gt;Start1</title>
+<title>Con_5&#45;&gt;Start2</title>
 <path fill="none" stroke="black" stroke-dasharray="1,5" d="M329.82,-117.38C324.99,-119.65 319.84,-121.97 315,-124 279.07,-139.06 237.19,-154.21 207.89,-164.43"/>
 <polygon fill="black" stroke="black" points="206.38,-161.25 198.08,-167.84 208.68,-167.87 206.38,-161.25"/>
+<text text-anchor="middle" x="326.82" y="-119.98" font-family="Helvetica,sans-Serif" font-size="8.00">0</text>
 </g>
-<!-- Return20 -->
+<!-- Return21 -->
 <g id="node6" class="node">
-<title>Return20</title>
-<polygon fill="yellow" stroke="black" points="102,-52 36,-52 36,-16 102,-16 102,-52"/>
-<text text-anchor="middle" x="69" y="-30.3" font-family="Times,serif" font-size="14.00">Return</text>
+<title>Return21</title>
+<polygon fill="yellow" stroke="black" points="89,-52 23,-52 23,-16 89,-16 89,-52"/>
+<text text-anchor="middle" x="56" y="-30.3" font-family="Times,serif" font-size="14.00">Return</text>
 </g>
-<!-- Return20&#45;&gt;Start1 -->
+<!-- Return21&#45;&gt;Start2 -->
 <g id="edge5" class="edge">
-<title>Return20&#45;&gt;Start1</title>
-<path fill="none" stroke="red" d="M71.6,-52.16C75.16,-71.21 83.04,-102.14 99,-124 108.52,-137.04 122.19,-148.23 135.06,-156.92"/>
-<polygon fill="red" stroke="red" points="133.48,-160.07 143.79,-162.53 137.27,-154.18 133.48,-160.07"/>
+<title>Return21&#45;&gt;Start2</title>
+<path fill="none" stroke="red" d="M42.04,-52.06C28.34,-71.02 11.57,-101.87 27,-124 50.89,-158.26 99.53,-170.43 133.64,-174.72"/>
+<polygon fill="red" stroke="red" points="133.4,-178.22 143.72,-175.82 134.16,-171.26 133.4,-178.22"/>
+<text text-anchor="middle" x="39.04" y="-54.66" font-family="Helvetica,sans-Serif" font-size="8.00">0</text>
 </g>
-<!-- Return20&#45;&gt;Con_19 -->
+<!-- Return21&#45;&gt;Con_20 -->
 <g id="edge6" class="edge">
-<title>Return20&#45;&gt;Con_19</title>
-<path fill="none" stroke="black" d="M62.57,-52.3C59.6,-60.3 56.01,-69.98 52.71,-78.85"/>
-<polygon fill="black" stroke="black" points="49.37,-77.78 49.17,-88.38 55.94,-80.22 49.37,-77.78"/>
+<title>Return21&#45;&gt;Con_20</title>
+<path fill="none" stroke="black" d="M57.73,-52.3C58.5,-60.02 59.43,-69.29 60.29,-77.89"/>
+<polygon fill="black" stroke="black" points="56.81,-78.29 61.29,-87.9 63.78,-77.6 56.81,-78.29"/>
+<text text-anchor="middle" x="54.73" y="-54.9" font-family="Helvetica,sans-Serif" font-size="8.00">1</text>
 </g>
-<!-- Con_5 -->
+<!-- Con_6 -->
 <g id="node7" class="node">
-<title>Con_5</title>
+<title>Con_6</title>
 <ellipse fill="none" stroke="black" cx="279" cy="-106" rx="27" ry="18"/>
 <text text-anchor="middle" x="279" y="-102.3" font-family="Times,serif" font-size="14.00">#4</text>
 </g>
-<!-- Con_5&#45;&gt;Start1 -->
+<!-- Con_6&#45;&gt;Start2 -->
 <g id="edge7" class="edge">
-<title>Con_5&#45;&gt;Start1</title>
+<title>Con_6&#45;&gt;Start2</title>
 <path fill="none" stroke="black" stroke-dasharray="1,5" d="M260.19,-119.19C245.23,-128.89 223.89,-142.72 205.84,-154.42"/>
 <polygon fill="black" stroke="black" points="203.77,-151.59 197.28,-159.97 207.58,-157.46 203.77,-151.59"/>
+<text text-anchor="middle" x="257.19" y="-121.79" font-family="Helvetica,sans-Serif" font-size="8.00">0</text>
 </g>
-<!-- scope0 -->
+<!-- Scope1_0 -->
 <g id="node8" class="node">
-<title>scope0</title>
+<title>Scope1_0</title>
 <polygon fill="cyan" stroke="transparent" points="410,-23 410,-44 426,-44 426,-23 410,-23"/>
 <polygon fill="none" stroke="black" points="410,-23 410,-44 426,-44 426,-23 410,-23"/>
 <text text-anchor="start" x="413" y="-29.8" font-family="Times,serif" font-size="14.00">0</text>
@@ -116,27 +123,27 @@
 <polygon fill="none" stroke="black" points="498,-23 498,-44 522,-44 522,-23 498,-23"/>
 <text text-anchor="start" x="501" y="-29.8" font-family="Times,serif" font-size="14.00">x1</text>
 </g>
-<!-- scope0&#45;&gt;Con_2 -->
+<!-- Scope1_0&#45;&gt;Con_3 -->
 <g id="edge9" class="edge">
-<title>scope0:scope0_x0&#45;&gt;Con_2</title>
+<title>Scope1_0:Scope1_0_x0&#45;&gt;Con_3</title>
 <path fill="none" stroke="cornflowerblue" stroke-dasharray="5,2" d="M462,-45C462,-94.6 290.16,-72.65 243,-88 241.08,-88.63 239.12,-89.33 237.17,-90.09"/>
 <polygon fill="cornflowerblue" stroke="cornflowerblue" points="235.39,-87.04 227.58,-94.19 238.15,-93.48 235.39,-87.04"/>
 </g>
-<!-- scope0&#45;&gt;Con_3 -->
+<!-- Scope1_0&#45;&gt;Con_4 -->
 <g id="edge8" class="edge">
-<title>scope0:scope0_y0&#45;&gt;Con_3</title>
+<title>Scope1_0:Scope1_0_y0&#45;&gt;Con_4</title>
 <path fill="none" stroke="cornflowerblue" stroke-dasharray="5,2" d="M438,-45C438,-67.35 411.84,-55.23 390,-60 294.13,-80.94 265.19,-60.49 171,-88 169.06,-88.57 167.09,-89.23 165.13,-89.95"/>
 <polygon fill="cornflowerblue" stroke="cornflowerblue" points="163.39,-86.88 155.5,-93.97 166.08,-93.34 163.39,-86.88"/>
 </g>
-<!-- scope0&#45;&gt;Con_4 -->
+<!-- Scope1_0&#45;&gt;Con_5 -->
 <g id="edge11" class="edge">
-<title>scope0:scope0_x1&#45;&gt;Con_4</title>
+<title>Scope1_0:Scope1_0_x1&#45;&gt;Con_5</title>
 <path fill="none" stroke="cornflowerblue" stroke-dasharray="5,2" d="M510,-45C510,-71.13 433.9,-89.82 387,-98.86"/>
 <polygon fill="cornflowerblue" stroke="cornflowerblue" points="386.09,-95.47 376.9,-100.75 387.37,-102.35 386.09,-95.47"/>
 </g>
-<!-- scope0&#45;&gt;Con_5 -->
+<!-- Scope1_0&#45;&gt;Con_6 -->
 <g id="edge10" class="edge">
-<title>scope0:scope0_y1&#45;&gt;Con_5</title>
+<title>Scope1_0:Scope1_0_y1&#45;&gt;Con_6</title>
 <path fill="none" stroke="cornflowerblue" stroke-dasharray="5,2" d="M486,-45C486,-123.37 388.78,-61.59 315,-88 313.15,-88.66 311.26,-89.39 309.37,-90.16"/>
 <polygon fill="cornflowerblue" stroke="cornflowerblue" points="307.8,-87.02 300.03,-94.23 310.6,-93.44 307.8,-87.02"/>
 </g>