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-graph2.svg b/chapter03/docs/03-graph2.svg
index 4ab5a8b6..0a539c6a 100644
--- a/chapter03/docs/03-graph2.svg
+++ b/chapter03/docs/03-graph2.svg
@@ -14,91 +14,98 @@
 <polygon fill="none" stroke="black" points="8,-8 8,-276 242,-276 242,-8 8,-8"/>
 </g>
 <g id="clust2" class="cluster">
-<title>cluster_0</title>
+<title>cluster_Scope1_0</title>
 <polygon fill="none" stroke="black" points="250,-8 250,-60 344,-60 344,-8 250,-8"/>
 </g>
-<!-- Start1 -->
+<!-- Start2 -->
 <g id="node1" class="node">
-<title>Start1</title>
+<title>Start2</title>
 <polygon fill="yellow" stroke="black" points="126,-268 72,-268 72,-232 126,-232 126,-268"/>
 <text text-anchor="middle" x="99" y="-246.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="135" cy="-178" rx="27" ry="18"/>
 <text text-anchor="middle" x="135" y="-174.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="M126.65,-195.24C122.46,-203.39 117.27,-213.47 112.53,-222.69"/>
 <polygon fill="black" stroke="black" points="109.27,-221.38 107.81,-231.88 115.49,-224.58 109.27,-221.38"/>
+<text text-anchor="middle" x="123.65" y="-197.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="207" cy="-178" rx="27" ry="18"/>
 <text text-anchor="middle" x="207" y="-174.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="M188.19,-191.19C173.23,-200.89 151.89,-214.72 133.84,-226.42"/>
 <polygon fill="black" stroke="black" points="131.77,-223.59 125.28,-231.97 135.58,-229.46 131.77,-223.59"/>
+<text text-anchor="middle" x="185.19" y="-193.79" 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="63" cy="-178" rx="27" ry="18"/>
 <text text-anchor="middle" x="63" y="-174.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="M71.35,-195.24C75.54,-203.39 80.73,-213.47 85.47,-222.69"/>
 <polygon fill="black" stroke="black" points="82.51,-224.58 90.19,-231.88 88.73,-221.38 82.51,-224.58"/>
+<text text-anchor="middle" x="68.35" y="-197.84" 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="89" cy="-106" rx="28.7" ry="18"/>
-<text text-anchor="middle" x="89" y="-102.3" font-family="Times,serif" font-size="14.00">Add</text>
+<title>Add7</title>
+<ellipse fill="none" stroke="black" cx="71" cy="-106" rx="27" ry="18"/>
+<text text-anchor="middle" x="71" y="-102.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="M99.44,-122.88C105.2,-131.66 112.48,-142.74 118.96,-152.58"/>
-<polygon fill="black" stroke="black" points="116.19,-154.74 124.6,-161.18 122.04,-150.9 116.19,-154.74"/>
+<title>Add7&#45;&gt;Con_3</title>
+<path fill="none" stroke="black" d="M84.57,-121.85C93.31,-131.4 104.83,-144.01 114.66,-154.75"/>
+<polygon fill="black" stroke="black" points="112.12,-157.16 121.45,-162.18 117.28,-152.43 112.12,-157.16"/>
+<text text-anchor="middle" x="81.57" y="-124.45" 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="M82.84,-123.59C79.84,-131.66 76.16,-141.57 72.79,-150.65"/>
-<polygon fill="black" stroke="black" points="69.5,-149.45 69.3,-160.04 76.06,-151.89 69.5,-149.45"/>
+<title>Add7&#45;&gt;Con_6</title>
+<path fill="none" stroke="black" d="M69.02,-124.3C68.14,-132.02 67.08,-141.29 66.1,-149.89"/>
+<polygon fill="black" stroke="black" points="62.61,-149.56 64.95,-159.9 69.57,-150.36 62.61,-149.56"/>
+<text text-anchor="middle" x="66.02" y="-126.9" font-family="Helvetica,sans-Serif" font-size="8.00">2</text>
 </g>
-<!-- Return7 -->
+<!-- Return8 -->
 <g id="node6" class="node">
-<title>Return7</title>
-<polygon fill="yellow" stroke="black" points="96,-52 30,-52 30,-16 96,-16 96,-52"/>
-<text text-anchor="middle" x="63" y="-30.3" font-family="Times,serif" font-size="14.00">Return</text>
+<title>Return8</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>
-<!-- Return7&#45;&gt;Start1 -->
+<!-- Return8&#45;&gt;Start2 -->
 <g id="edge6" class="edge">
-<title>Return7&#45;&gt;Start1</title>
-<path fill="none" stroke="red" d="M51.87,-52.38C33.84,-82.96 2.57,-147.69 27,-196 34.7,-211.23 49.06,-223.15 62.94,-231.8"/>
+<title>Return8&#45;&gt;Start2</title>
+<path fill="none" stroke="red" d="M46.1,-52.47C30.13,-83.17 2.78,-148.1 27,-196 34.7,-211.23 49.06,-223.15 62.94,-231.8"/>
 <polygon fill="red" stroke="red" points="61.52,-235.02 71.92,-237.01 65.03,-228.96 61.52,-235.02"/>
+<text text-anchor="middle" x="43.1" y="-55.07" font-family="Helvetica,sans-Serif" font-size="8.00">0</text>
 </g>
-<!-- Return7&#45;&gt;Add6 -->
+<!-- Return8&#45;&gt;Add7 -->
 <g id="edge7" class="edge">
-<title>Return7&#45;&gt;Add6</title>
-<path fill="none" stroke="black" d="M69.43,-52.3C72.4,-60.3 75.99,-69.98 79.29,-78.85"/>
-<polygon fill="black" stroke="black" points="76.06,-80.22 82.83,-88.38 82.63,-77.78 76.06,-80.22"/>
+<title>Return8&#45;&gt;Add7</title>
+<path fill="none" stroke="black" d="M59.71,-52.3C61.36,-60.02 63.35,-69.29 65.19,-77.89"/>
+<polygon fill="black" stroke="black" points="61.82,-78.85 67.33,-87.9 68.66,-77.38 61.82,-78.85"/>
+<text text-anchor="middle" x="56.71" y="-54.9" font-family="Helvetica,sans-Serif" font-size="8.00">1</text>
 </g>
-<!-- scope0 -->
+<!-- Scope1_0 -->
 <g id="node7" class="node">
-<title>scope0</title>
-<polygon fill="aqua" stroke="transparent" points="267,-23 267,-44 283,-44 283,-23 267,-23"/>
+<title>Scope1_0</title>
+<polygon fill="cyan" stroke="transparent" points="267,-23 267,-44 283,-44 283,-23 267,-23"/>
 <polygon fill="none" stroke="black" points="267,-23 267,-44 283,-44 283,-23 267,-23"/>
 <text text-anchor="start" x="270" y="-29.8" font-family="Times,serif" font-size="14.00">0</text>
 <polygon fill="none" stroke="black" points="283,-23 283,-44 298,-44 298,-23 283,-23"/>
@@ -108,23 +115,23 @@
 <polygon fill="none" stroke="black" points="314,-23 314,-44 328,-44 328,-23 314,-23"/>
 <text text-anchor="start" x="317" y="-29.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="edge8" 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="M290,-45C290,-77.9 208.02,-132.76 163.3,-160.24"/>
 <polygon fill="cornflowerblue" stroke="cornflowerblue" points="161.36,-157.33 154.63,-165.51 164.99,-163.31 161.36,-157.33"/>
 </g>
-<!-- scope0&#45;&gt;Con_3 -->
+<!-- Scope1_0&#45;&gt;Con_4 -->
 <g id="edge9" 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="M306,-45C306,-93.23 263.17,-135.12 233.85,-158.15"/>
 <polygon fill="cornflowerblue" stroke="cornflowerblue" points="231.47,-155.56 225.62,-164.4 235.7,-161.14 231.47,-155.56"/>
 </g>
-<!-- scope0&#45;&gt;Add6 -->
+<!-- Scope1_0&#45;&gt;Add7 -->
 <g id="edge10" class="edge">
-<title>scope0:scope0_c&#45;&gt;Add6</title>
-<path fill="none" stroke="cornflowerblue" stroke-dasharray="5,2" d="M321,-45C321,-86.77 178.12,-76.36 138,-88 132.99,-89.45 127.75,-91.12 122.62,-92.82"/>
-<polygon fill="cornflowerblue" stroke="cornflowerblue" points="121.34,-89.56 113.02,-96.11 123.61,-96.18 121.34,-89.56"/>
+<title>Scope1_0:Scope1_0_c&#45;&gt;Add7</title>
+<path fill="none" stroke="cornflowerblue" stroke-dasharray="5,2" d="M321,-45C321,-86.77 178.58,-78.08 138,-88 127.51,-90.56 116.11,-93.43 105.75,-96.06"/>
+<polygon fill="cornflowerblue" stroke="cornflowerblue" points="104.62,-92.74 95.79,-98.6 106.35,-99.52 104.62,-92.74"/>
 </g>
 </g>
 </svg>