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, 49 insertions, 44 deletions

diff --git a/chapter03/docs/03-graph1.svg b/chapter03/docs/03-graph1.svg
index 364cd42c..ab6f9600 100644
--- a/chapter03/docs/03-graph1.svg
+++ b/chapter03/docs/03-graph1.svg
@@ -14,77 +14,82 @@
 <polygon fill="none" stroke="black" points="8,-88 8,-284 222,-284 222,-88 8,-88"/>
 </g>
 <g id="clust2" class="cluster">
-<title>cluster_0</title>
+<title>cluster_Scope1_0</title>
 <polygon fill="none" stroke="black" points="36,-8 36,-76 210,-76 210,-8 36,-8"/>
 </g>
 <g id="clust3" class="cluster">
-<title>cluster_1</title>
+<title>cluster_Scope1_1</title>
 <polygon fill="none" stroke="black" points="132,-16 132,-68 202,-68 202,-16 132,-16"/>
 </g>
-<!-- Start1 -->
+<!-- Start2 -->
 <g id="node1" class="node">
-<title>Start1</title>
+<title>Start2</title>
 <polygon fill="yellow" stroke="black" points="142,-276 88,-276 88,-240 142,-240 142,-276"/>
 <text text-anchor="middle" x="115" y="-254.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="43" cy="-186" rx="27" ry="18"/>
 <text text-anchor="middle" x="43" y="-182.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="M57.57,-201.17C66.92,-210.25 79.3,-222.29 90.17,-232.86"/>
 <polygon fill="black" stroke="black" points="87.79,-235.43 97.4,-239.89 92.67,-230.41 87.79,-235.43"/>
+<text text-anchor="middle" x="54.57" y="-203.77" 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="115" cy="-186" rx="27" ry="18"/>
 <text text-anchor="middle" x="115" y="-182.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="M115,-204.3C115,-212.02 115,-221.29 115,-229.89"/>
 <polygon fill="black" stroke="black" points="111.5,-229.9 115,-239.9 118.5,-229.9 111.5,-229.9"/>
+<text text-anchor="middle" x="112" y="-206.9" font-family="Helvetica,sans-Serif" font-size="8.00">0</text>
 </g>
-<!-- Con_5 -->
+<!-- Con_6 -->
 <g id="node4" class="node">
-<title>Con_5</title>
+<title>Con_6</title>
 <ellipse fill="none" stroke="black" cx="187" cy="-186" rx="27" ry="18"/>
 <text text-anchor="middle" x="187" y="-182.3" font-family="Times,serif" font-size="14.00">#3</text>
 </g>
-<!-- Con_5&#45;&gt;Start1 -->
+<!-- Con_6&#45;&gt;Start2 -->
 <g id="edge3" 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="M172.43,-201.17C163.08,-210.25 150.7,-222.29 139.83,-232.86"/>
 <polygon fill="black" stroke="black" points="137.33,-230.41 132.6,-239.89 142.21,-235.43 137.33,-230.41"/>
+<text text-anchor="middle" x="169.43" y="-203.77" font-family="Helvetica,sans-Serif" font-size="8.00">0</text>
 </g>
-<!-- Add6 -->
+<!-- Add7 -->
 <g id="node5" class="node">
-<title>Add6</title>
-<ellipse fill="none" stroke="black" cx="138" cy="-114" rx="28.7" ry="18"/>
-<text text-anchor="middle" x="138" y="-110.3" font-family="Times,serif" font-size="14.00">Add</text>
+<title>Add7</title>
+<ellipse fill="none" stroke="black" cx="136" cy="-114" rx="27" ry="18"/>
+<text text-anchor="middle" x="136" y="-110.3" font-family="Times,serif" font-size="14.00">+</text>
 </g>
-<!-- Add6&#45;&gt;Con_2 -->
+<!-- Add7&#45;&gt;Con_3 -->
 <g id="edge4" class="edge">
-<title>Add6&#45;&gt;Con_2</title>
-<path fill="none" stroke="black" d="M120.13,-128.17C105.58,-138.89 84.84,-154.17 68.53,-166.18"/>
-<polygon fill="black" stroke="black" points="66.44,-163.38 60.47,-172.13 70.59,-169.01 66.44,-163.38"/>
+<title>Add7&#45;&gt;Con_3</title>
+<path fill="none" stroke="black" d="M118.51,-128.17C104.48,-138.73 84.58,-153.7 68.74,-165.63"/>
+<polygon fill="black" stroke="black" points="66.3,-163.08 60.41,-171.89 70.51,-168.68 66.3,-163.08"/>
+<text text-anchor="middle" x="115.51" y="-130.77" font-family="Helvetica,sans-Serif" font-size="8.00">1</text>
 </g>
-<!-- Add6&#45;&gt;Con_5 -->
+<!-- Add7&#45;&gt;Con_6 -->
 <g id="edge5" class="edge">
-<title>Add6&#45;&gt;Con_5</title>
-<path fill="none" stroke="black" d="M149.12,-130.88C155.32,-139.74 163.17,-150.96 170.12,-160.88"/>
-<polygon fill="black" stroke="black" points="167.32,-162.99 175.93,-169.18 173.06,-158.98 167.32,-162.99"/>
+<title>Add7&#45;&gt;Con_6</title>
+<path fill="none" stroke="black" d="M147.32,-130.54C153.92,-139.6 162.38,-151.21 169.8,-161.39"/>
+<polygon fill="black" stroke="black" points="167,-163.49 175.71,-169.51 172.65,-159.36 167,-163.49"/>
+<text text-anchor="middle" x="144.32" y="-133.14" font-family="Helvetica,sans-Serif" font-size="8.00">2</text>
 </g>
-<!-- scope0 -->
+<!-- Scope1_0 -->
 <g id="node6" class="node">
-<title>scope0</title>
-<polygon fill="aqua" stroke="transparent" points="53,-31 53,-52 69,-52 69,-31 53,-31"/>
+<title>Scope1_0</title>
+<polygon fill="cyan" stroke="transparent" points="53,-31 53,-52 69,-52 69,-31 53,-31"/>
 <polygon fill="none" stroke="black" points="53,-31 53,-52 69,-52 69,-31 53,-31"/>
 <text text-anchor="start" x="56" y="-37.8" font-family="Times,serif" font-size="14.00">0</text>
 <polygon fill="none" stroke="black" points="69,-31 69,-52 84,-52 84,-31 69,-31"/>
@@ -94,36 +99,36 @@
 <polygon fill="none" stroke="black" points="100,-31 100,-52 114,-52 114,-31 100,-31"/>
 <text text-anchor="start" x="103" y="-37.8" font-family="Times,serif" font-size="14.00">c</text>
 </g>
-<!-- scope0&#45;&gt;Con_2 -->
+<!-- Scope1_0&#45;&gt;Con_3 -->
 <g id="edge6" class="edge">
-<title>scope0:scope0_a&#45;&gt;Con_2</title>
+<title>Scope1_0:Scope1_0_a&#45;&gt;Con_3</title>
 <path fill="none" stroke="cornflowerblue" stroke-dasharray="5,2" d="M76,-53C76,-90.54 63.29,-132.33 53.64,-158.64"/>
 <polygon fill="cornflowerblue" stroke="cornflowerblue" points="50.27,-157.66 50,-168.25 56.81,-160.14 50.27,-157.66"/>
 </g>
-<!-- scope0&#45;&gt;Con_3 -->
+<!-- Scope1_0&#45;&gt;Con_4 -->
 <g id="edge7" class="edge">
-<title>scope0:scope0_b&#45;&gt;Con_3</title>
+<title>Scope1_0:Scope1_0_b&#45;&gt;Con_4</title>
 <path fill="none" stroke="cornflowerblue" stroke-dasharray="5,2" d="M92,-53C92,-88.29 93.39,-97.33 100,-132 101.65,-140.68 104.07,-150 106.48,-158.37"/>
 <polygon fill="cornflowerblue" stroke="cornflowerblue" points="103.14,-159.42 109.37,-168 109.85,-157.41 103.14,-159.42"/>
 </g>
-<!-- scope0&#45;&gt;Add6 -->
+<!-- Scope1_0&#45;&gt;Add7 -->
 <g id="edge8" class="edge">
-<title>scope0:scope0_c&#45;&gt;Add6</title>
-<path fill="none" stroke="cornflowerblue" stroke-dasharray="5,2" d="M107,-53C107,-65.88 112.71,-78.75 119.22,-89.25"/>
-<polygon fill="cornflowerblue" stroke="cornflowerblue" points="116.52,-91.5 125.03,-97.81 122.31,-87.57 116.52,-91.5"/>
+<title>Scope1_0:Scope1_0_c&#45;&gt;Add7</title>
+<path fill="none" stroke="cornflowerblue" stroke-dasharray="5,2" d="M107,-53C107,-65.71 112.34,-78.55 118.43,-89.08"/>
+<polygon fill="cornflowerblue" stroke="cornflowerblue" points="115.57,-91.1 123.87,-97.68 121.48,-87.35 115.57,-91.1"/>
 </g>
-<!-- scope1 -->
+<!-- Scope1_1 -->
 <g id="node7" class="node">
-<title>scope1</title>
-<polygon fill="aqua" stroke="transparent" points="151,-31 151,-52 167,-52 167,-31 151,-31"/>
+<title>Scope1_1</title>
+<polygon fill="cyan" stroke="transparent" points="151,-31 151,-52 167,-52 167,-31 151,-31"/>
 <polygon fill="none" stroke="black" points="151,-31 151,-52 167,-52 167,-31 151,-31"/>
 <text text-anchor="start" x="154" y="-37.8" font-family="Times,serif" font-size="14.00">1</text>
 <polygon fill="none" stroke="black" points="167,-31 167,-52 183,-52 183,-31 167,-31"/>
 <text text-anchor="start" x="170" y="-37.8" font-family="Times,serif" font-size="14.00">b</text>
 </g>
-<!-- scope1&#45;&gt;Con_5 -->
+<!-- Scope1_1&#45;&gt;Con_6 -->
 <g id="edge9" class="edge">
-<title>scope1:scope1_b&#45;&gt;Con_5</title>
+<title>Scope1_1:Scope1_1_b&#45;&gt;Con_6</title>
 <path fill="none" stroke="cornflowerblue" stroke-dasharray="5,2" d="M175,-53C175,-89.4 179.58,-131.23 183.08,-157.87"/>
 <polygon fill="cornflowerblue" stroke="cornflowerblue" points="179.64,-158.52 184.46,-167.96 186.58,-157.58 179.64,-158.52"/>
 </g>