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, 40 insertions, 42 deletions

diff --git a/chapter04/docs/04-post-peephole.svg b/chapter04/docs/04-post-peephole.svg
index 5a45722c..550c16ef 100644
--- a/chapter04/docs/04-post-peephole.svg
+++ b/chapter04/docs/04-post-peephole.svg
@@ -14,16 +14,16 @@
 <polygon fill="none" stroke="black" points="8,-8 8,-232 193,-232 193,-8 8,-8"/>
 </g>
 <g id="clust2" class="cluster">
-<title>cluster_0</title>
+<title>cluster_Scope1_0</title>
 <polygon fill="none" stroke="black" points="201,-72 201,-140 401,-140 401,-72 201,-72"/>
 </g>
 <g id="clust3" class="cluster">
-<title>cluster_1</title>
+<title>cluster_Scope1_1</title>
 <polygon fill="none" stroke="black" points="323,-80 323,-132 393,-132 393,-80 323,-80"/>
 </g>
-<!-- Start1 -->
+<!-- Start2 -->
 <g id="node1" class="node">
-<title>Start1</title>
+<title>Start2</title>
 <polygon fill="yellow" stroke="transparent" points="97,-195 97,-220 178,-220 178,-195 97,-195"/>
 <polygon fill="none" stroke="black" points="97,-195 97,-220 178,-220 178,-195 97,-195"/>
 <text text-anchor="start" x="119" y="-203.8" font-family="Times,serif" font-size="14.00">Start</text>
@@ -34,51 +34,55 @@
 <polygon fill="none" stroke="black" points="142,-169 142,-190 173,-190 173,-169 142,-169"/>
 <text text-anchor="start" x="145" y="-175.8" font-family="Times,serif" font-size="14.00">arg</text>
 </g>
-<!-- Con_9 -->
+<!-- Con_10 -->
 <g id="node2" class="node">
-<title>Con_9</title>
+<title>Con_10</title>
 <ellipse fill="none" stroke="black" cx="43" cy="-192" rx="27" ry="18"/>
 <text text-anchor="middle" x="43" y="-188.3" font-family="Times,serif" font-size="14.00">#3</text>
 </g>
-<!-- Add10 -->
+<!-- Add11 -->
 <g id="node3" class="node">
-<title>Add10</title>
-<ellipse fill="none" stroke="black" cx="156" cy="-106" rx="28.7" ry="18"/>
-<text text-anchor="middle" x="156" y="-102.3" font-family="Times,serif" font-size="14.00">Add</text>
+<title>Add11</title>
+<ellipse fill="none" stroke="black" cx="158" cy="-106" rx="27" ry="18"/>
+<text text-anchor="middle" x="158" y="-102.3" font-family="Times,serif" font-size="14.00">+</text>
 </g>
-<!-- Add10&#45;&gt;Start1 -->
+<!-- Add11&#45;&gt;Start2 -->
 <g id="edge1" class="edge">
-<title>Add10&#45;&gt;Start1:p1</title>
-<path fill="none" stroke="black" d="M156.86,-124.09C157.28,-133.54 157.73,-145.77 157.92,-157.68"/>
-<polygon fill="black" stroke="black" points="154.42,-158.03 158,-168 161.42,-157.97 154.42,-158.03"/>
+<title>Add11&#45;&gt;Start2:p1</title>
+<path fill="none" stroke="black" d="M158,-124.09C158,-133.55 158,-145.77 158,-157.69"/>
+<polygon fill="black" stroke="black" points="154.5,-158 158,-168 161.5,-158 154.5,-158"/>
+<text text-anchor="middle" x="155" y="-126.69" font-family="Helvetica,sans-Serif" font-size="8.00">1</text>
 </g>
-<!-- Add10&#45;&gt;Con_9 -->
+<!-- Add11&#45;&gt;Con_10 -->
 <g id="edge2" class="edge">
-<title>Add10&#45;&gt;Con_9</title>
-<path fill="none" stroke="black" d="M136.93,-119.61C121.35,-130.08 98.91,-145.53 80,-160 75.7,-163.29 71.22,-166.89 66.91,-170.44"/>
-<polygon fill="black" stroke="black" points="64.38,-168 58.96,-177.1 68.87,-173.37 64.38,-168"/>
+<title>Add11&#45;&gt;Con_10</title>
+<path fill="none" stroke="black" d="M139.03,-119.12C123,-129.54 99.59,-145.19 80,-160 75.68,-163.26 71.19,-166.85 66.88,-170.4"/>
+<polygon fill="black" stroke="black" points="64.34,-167.96 58.92,-177.06 68.84,-173.32 64.34,-167.96"/>
+<text text-anchor="middle" x="136.03" y="-121.72" font-family="Helvetica,sans-Serif" font-size="8.00">2</text>
 </g>
-<!-- Return11 -->
+<!-- Return12 -->
 <g id="node4" class="node">
-<title>Return11</title>
-<polygon fill="yellow" stroke="black" points="163,-52 97,-52 97,-16 163,-16 163,-52"/>
-<text text-anchor="middle" x="130" y="-30.3" font-family="Times,serif" font-size="14.00">Return</text>
+<title>Return12</title>
+<polygon fill="yellow" stroke="black" points="165,-52 99,-52 99,-16 165,-16 165,-52"/>
+<text text-anchor="middle" x="132" y="-30.3" font-family="Times,serif" font-size="14.00">Return</text>
 </g>
-<!-- Return11&#45;&gt;Start1 -->
+<!-- Return12&#45;&gt;Start2 -->
 <g id="edge3" class="edge">
-<title>Return11&#45;&gt;Start1:p0</title>
-<path fill="none" stroke="red" d="M123.24,-52.04C121.12,-58.23 119.05,-65.33 118,-72 113.28,-101.85 115.86,-109.85 118,-140 118.58,-148.23 120.12,-152.3 121.11,-157.68"/>
-<polygon fill="red" stroke="red" points="117.66,-158.34 122,-168 124.63,-157.74 117.66,-158.34"/>
+<title>Return12&#45;&gt;Start2:p0</title>
+<path fill="none" stroke="red" d="M126.36,-52.13C124.59,-58.32 122.88,-65.4 122,-72 116.87,-110.66 121.12,-123.21 121.89,-157.66"/>
+<polygon fill="red" stroke="red" points="118.39,-158.04 122,-168 125.39,-157.96 118.39,-158.04"/>
+<text text-anchor="middle" x="123.36" y="-54.73" font-family="Helvetica,sans-Serif" font-size="8.00">0</text>
 </g>
-<!-- Return11&#45;&gt;Add10 -->
+<!-- Return12&#45;&gt;Add11 -->
 <g id="edge4" class="edge">
-<title>Return11&#45;&gt;Add10</title>
-<path fill="none" stroke="black" d="M136.43,-52.3C139.4,-60.3 142.99,-69.98 146.29,-78.85"/>
-<polygon fill="black" stroke="black" points="143.06,-80.22 149.83,-88.38 149.63,-77.78 143.06,-80.22"/>
+<title>Return12&#45;&gt;Add11</title>
+<path fill="none" stroke="black" d="M138.43,-52.3C141.4,-60.3 144.99,-69.98 148.29,-78.85"/>
+<polygon fill="black" stroke="black" points="145.06,-80.22 151.83,-88.38 151.63,-77.78 145.06,-80.22"/>
+<text text-anchor="middle" x="135.43" y="-54.9" font-family="Helvetica,sans-Serif" font-size="8.00">1</text>
 </g>
-<!-- scope0 -->
+<!-- Scope1_0 -->
 <g id="node5" class="node">
-<title>scope0</title>
+<title>Scope1_0</title>
 <polygon fill="cyan" stroke="transparent" points="218,-95 218,-116 234,-116 234,-95 218,-95"/>
 <polygon fill="none" stroke="black" points="218,-95 218,-116 234,-116 234,-95 218,-95"/>
 <text text-anchor="start" x="221" y="-101.8" font-family="Times,serif" font-size="14.00">0</text>
@@ -87,21 +91,15 @@
 <polygon fill="none" stroke="black" points="274,-95 274,-116 305,-116 305,-95 274,-95"/>
 <text text-anchor="start" x="277" y="-101.8" font-family="Times,serif" font-size="14.00">arg</text>
 </g>
-<!-- scope0&#45;&gt;Start1 -->
+<!-- Scope1_0&#45;&gt;Start2 -->
 <g id="edge5" class="edge">
-<title>scope0:scope0_$ctrl&#45;&gt;Start1:p0</title>
-<path fill="none" stroke="cornflowerblue" stroke-dasharray="5,2" d="M254,-117C254,-176.09 137.5,-113.66 123.39,-158.03"/>
-<polygon fill="cornflowerblue" stroke="cornflowerblue" points="119.92,-157.61 122,-168 126.85,-158.58 119.92,-157.61"/>
-</g>
-<!-- scope0&#45;&gt;Start1 -->
-<g id="edge6" class="edge">
-<title>scope0:scope0_arg&#45;&gt;Start1:p1</title>
+<title>Scope1_0:Scope1_0_arg&#45;&gt;Start2:p1</title>
 <path fill="none" stroke="cornflowerblue" stroke-dasharray="5,2" d="M290,-117C290,-172.03 239,-178.4 184.25,-178.95"/>
 <polygon fill="cornflowerblue" stroke="cornflowerblue" points="183.98,-175.45 174,-179 184.02,-182.45 183.98,-175.45"/>
 </g>
-<!-- scope1 -->
+<!-- Scope1_1 -->
 <g id="node6" class="node">
-<title>scope1</title>
+<title>Scope1_1</title>
 <polygon fill="cyan" stroke="transparent" points="350,-95 350,-116 366,-116 366,-95 350,-95"/>
 <polygon fill="none" stroke="black" points="350,-95 350,-116 366,-116 366,-95 350,-95"/>
 <text text-anchor="start" x="353" y="-101.8" font-family="Times,serif" font-size="14.00">1</text>