1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
<svg aria-label="Compiler graph" width="740" height="766" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 740 766" style="font-family: sans-serif;"><style>
html, body { height:100%; margin:0; font-family:sans-serif; }
.viewer { height:100%; display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.source { padding:8px; border-bottom:1px solid #ccc; }
#program { width:min(600px,80vw); vertical-align:middle; }
#status { margin-top:4px; }
#graph { min-height:0; overflow:hidden; position:relative; background:#fafbfc; }
#elk { width:100%; height:100%; }
#graph svg { display:block; }
.tools { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:8px; font-size:12px; }
.hint { color:#616c78; }
.ctrl { color:#b63838; } .mem { color:#2867b2; } .data { color:#536477; }
.edge { fill:none; stroke-width:1.5; }
.edge.CTRL { stroke-width:2; }
.edge.ASSOC { stroke-dasharray:4 4; }
.edge.PARSER { stroke-dasharray:5 4; }
.parser rect { fill:#f6f0ff; stroke:#7956a5; stroke-width:1.5; stroke-dasharray:5 4; }
.edge.selected { stroke-width:3.5; }
.edge.bundle { stroke-width:4; }
.edge.bundle.selected { stroke-width:6; }
.edge-hit { fill:none; stroke:transparent; stroke-width:12; vector-effect:non-scaling-stroke; pointer-events:stroke; cursor:pointer; }
.edge-jump { fill:transparent; pointer-events:all; cursor:pointer; }
.node { cursor:pointer; }
.box { stroke:#758191; stroke-width:1; }
.node.held .box { stroke-dasharray:5 3; }
.node.near .box { stroke:#c18221; stroke-width:2; }
.node.focus .box { stroke:#9c4900; stroke-width:3; }
.node.selected .box { stroke:#1569b9; stroke-width:3; }
.node.folded .box { stroke-width:4; }
.node.folding .box { fill:#f4ccd7; }
.fold-tag { font-size:9px; font-weight:700; fill:#963751; }
.peep-area { fill:#fff3d9; fill-opacity:.8; stroke:#c18221; stroke-width:2; pointer-events:none; }
.node.peep-edit .box { stroke:#9c4900; stroke-width:3; }
.node.error .box { stroke:#b42318; stroke-width:4; }
#event.error { color:#b42318; font-weight:600; white-space:pre-wrap; overflow-wrap:anywhere; }
.peep-ghosts { pointer-events:none; }
.region-box { stroke:#9da9b8; stroke-width:1.5; }
.fold-btn { cursor:pointer; }
.fold-btn rect { fill:white; stroke:#596674; }
.fold-btn text { font-size:14px; fill:#152330; }
.fold-btn:focus rect { stroke:#1569b9; stroke-width:2; }
.shortcut { cursor:pointer; }
.shortcut path { fill:none; stroke-width:1.5; }
.shortcut rect { fill:#fff8ec; stroke:#b63838; stroke-dasharray:3 2; }
.shortcut text { font-size:11px; fill:#783030; }
.shortcut.selected rect, .shortcut:focus rect { stroke-width:2.5; }
.label { font-size:12px; fill:#152330; font-weight:600; }
.node-id { font-size:10px; fill:#596674; font-weight:400; }
.type { font-size:11px; fill:#455768; }
.port { stroke:#536477; stroke-width:1; }
.row { stroke:#b6afcf; stroke-width:1; }
.bind { font-size:12px; fill:#152330; }
.slot { font-size:10px; fill:#364352; paint-order:stroke; stroke:#fafbfc; stroke-width:3; }
#detail { position:absolute; top:8px; right:8px; margin:0; padding:12px; max-width:320px;
max-height:45%; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere;
background:#fffffff2; border:1px solid #bac5d0; border-radius:4px; font-size:12px; }
.controls { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px; padding:6px; }
.button { color:white; background:black; font-size:20px; min-width:30px; }
.button:disabled { background:grey; }
.count { font-size:20px; min-width:35px; text-align:center; }
#N { width:6ch; }
#scrub { width:clamp(120px,35vw,600px); }
</style><defs><marker id="arrow-CTRL" viewBox="0 -4 8 8" refX="8" refY="0" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,-4L8,0L0,4Z" fill="#b63838"/></marker><marker id="arrow-DATA" viewBox="0 -4 8 8" refX="8" refY="0" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,-4L8,0L0,4Z" fill="#536477"/></marker><marker id="arrow-MEM" viewBox="0 -4 8 8" refX="8" refY="0" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,-4L8,0L0,4Z" fill="#2867b2"/></marker><marker id="arrow-ASSOC" viewBox="0 -4 8 8" refX="8" refY="0" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,-4L8,0L0,4Z" fill="#9396a3"/></marker><marker id="arrow-PARSER" viewBox="0 -4 8 8" refX="8" refY="0" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,-4L8,0L0,4Z" fill="#7956a5"/></marker></defs><rect width="100%" height="100%" fill="rgb(250, 251, 252)"/><g><g class="regions" style="opacity: 1;"/><rect class="peep-area" rx="36" style="opacity: 0;"/><g class="edges"><path class="edge ASSOC" id="e6i0" d="M162,46 C162,70 409,41 409,65" stroke="#9396a3" marker-start="url(#arrow-ASSOC)" style="opacity: 1;"><title>#6[0] → #1 · ASSOC</title></path><path class="edge MEM" id="e7i1" d="M99,118 L99,130 Q99,138 107,138 L167,138 Q175,138 175,146 L175,166" stroke="#2867b2" marker-start="url(#arrow-MEM)" style="opacity: 1;"><title>#7[1] → #3 · MEM</title></path><path class="edge DATA" id="e7i2" d="M257,118 L257,123 Q257,128 252,128 L207,128 Q199,128 199,136 L199,166" stroke="#536477" marker-start="url(#arrow-DATA)" style="opacity: 1;"><title>#7[2] → #5 · DATA</title></path><path class="edge DATA" id="e7i3" d="M409,118 L409,130 Q409,138 401,138 L231,138 Q223,138 223,146 L223,166" stroke="#536477" marker-start="url(#arrow-DATA)" style="opacity: 1;"><title>#7[3] → #6 · DATA</title></path><path class="edge MEM" id="e8i1" d="M187,222 L187,227 Q187,232 182,232 L181,232 Q175,232 175,238 L175,270" stroke="#2867b2" marker-start="url(#arrow-MEM)" style="opacity: 1;"><title>#8[1] → #7 · MEM</title></path><path class="edge DATA" id="e8i2" d="M257,118 L257,224 Q257,232 249,232 L207,232 Q199,232 199,240 L199,270" stroke="#536477" marker-start="url(#arrow-DATA)" style="opacity: 1;"><title>#8[2] → #5 · DATA</title></path><path class="edge DATA" id="e8i3" d="M409,118 L409,234 Q409,242 401,242 L231,242 Q223,242 223,250 L223,270" stroke="#536477" marker-start="url(#arrow-DATA)" style="opacity: 1;"><title>#8[3] → #6 · DATA</title></path><path class="edge ASSOC" id="e12i0" d="M162,46 C162,70 339,249 339,273" stroke="#9396a3" marker-start="url(#arrow-ASSOC)" style="opacity: 1;"><title>#12[0] → #1 · ASSOC</title></path><path class="edge CTRL" id="e13i0" d="M65,326 L65,374" stroke="#b63838" marker-start="url(#arrow-CTRL)" style="opacity: 1;"><title>#13[0] → #10 · CTRL</title></path><path class="edge MEM" id="e13i1" d="M187,326 L187,331 Q187,336 182,336 L97,336 Q89,336 89,344 L89,374" stroke="#2867b2" marker-start="url(#arrow-MEM)" style="opacity: 1;"><title>#13[1] → #8 · MEM</title></path><path class="edge DATA" id="e13i2" d="M257,118 L257,123 Q257,128 252,128 L124,128 Q116,128 116,136 L116,344.5 Q116,346 114.5,346 L114.5,346 Q113,346 113,347.5 L113,374" stroke="#536477" marker-start="url(#arrow-DATA)" style="opacity: 1;"><title>#13[2] → #5 · DATA</title></path><path class="edge DATA" id="e13i3" d="M339,326 L339,338 Q339,346 331,346 L145,346 Q137,346 137,354 L137,374" stroke="#536477" marker-start="url(#arrow-DATA)" style="opacity: 1;"><title>#13[3] → #12 · DATA</title></path><path class="edge ASSOC" id="e14i0" d="M162,46 C162,70 598,249 598,273" stroke="#9396a3" marker-start="url(#arrow-ASSOC)" style="opacity: 1;"><title>#14[0] → #1 · ASSOC</title></path><path class="edge CTRL" id="e15i0" d="M474,326 L474,374" stroke="#b63838" marker-start="url(#arrow-CTRL)" style="opacity: 1;"><title>#15[0] → #11 · CTRL</title></path><path class="edge MEM" id="e15i1" d="M187,326 L187,331 Q187,336 192,336 L490,336 Q498,336 498,344 L498,374" stroke="#2867b2" marker-start="url(#arrow-MEM)" style="opacity: 1;"><title>#15[1] → #8 · MEM</title></path><path class="edge DATA" id="e15i2" d="M257,118 L257,123 Q257,128 262,128 L519,128 Q527,128 527,136 L527,333.5 Q527,336 524.5,336 L524.5,336 Q522,336 522,338.5 L522,374" stroke="#536477" marker-start="url(#arrow-DATA)" style="opacity: 1;"><title>#15[2] → #5 · DATA</title></path><path class="edge DATA" id="e15i3" d="M598,326 L598,331 Q598,336 593,336 L554,336 Q546,336 546,344 L546,374" stroke="#536477" marker-start="url(#arrow-DATA)" style="opacity: 1;"><title>#15[3] → #14 · DATA</title></path><path class="edge MEM" id="e17i1" d="M101,430 L101,442 Q101,450 109,450 L557,450 Q565,450 565,458 L565,478" stroke="#2867b2" marker-start="url(#arrow-MEM)" style="opacity: 1;"><title>#17[1] → #13 · MEM</title></path><path class="edge MEM" id="e17i2" d="M510,430 L510,435 Q510,440 515,440 L597,440 Q605,440 605,448 L605,478" stroke="#2867b2" marker-start="url(#arrow-MEM)" style="opacity: 1;"><title>#17[2] → #15 · MEM</title></path><path class="edge MEM" id="e18i1" d="M585,534 L585,539 Q585,544 590,544 L636,544 Q644,544 644,552 L644,582" stroke="#2867b2" marker-start="url(#arrow-MEM)" style="opacity: 1;"><title>#18[1] → #17 · MEM</title></path><path class="edge DATA" id="e18i2" d="M257,118 L257,123 Q257,128 262,128 L519,128 Q527,128 527,136 L527,224 Q527,232 535,232 L660,232 Q668,232 668,240 L668,582" stroke="#536477" marker-start="url(#arrow-DATA)" style="opacity: 1;"><title>#18[2] → #5 · DATA</title></path><path class="edge MEM" id="e19i1" d="M585,534 L585,686" stroke="#2867b2" marker-start="url(#arrow-MEM)" style="opacity: 1;"><title>#19[1] → #17 · MEM</title></path><path class="edge DATA" id="e19i2" d="M656,638 L656,643 Q656,648 651,648 L623,648 Q615,648 615,656 L615,686" stroke="#536477" marker-start="url(#arrow-DATA)" style="opacity: 1;"><title>#19[2] → #18 · DATA</title></path></g><g class="edge-hits"/><g class="parser" style="opacity: 1;"/><g class="nodes"><g class="node" id="n1" data-id="1" transform="translate(39,24)" style="opacity: 1;"><path class="box" d="M0,0H120V44H0Z" fill="#fff1c4"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>Start</tspan><tspan class="node-id"> #1</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#1 Start
Type not computed
</title></g><g class="node" id="n3" data-id="3" transform="translate(39,68)" style="opacity: 1;"><path class="box" d="M0,0H120V44H0Z" fill="#dcecff"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>$mem</tspan><tspan class="node-id"> #3/1</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#3 $mem
Projection 1 of #1
Type not computed
[0] → #1 MEM</title></g><g class="node" id="n5" data-id="5" transform="translate(197,68)" style="opacity: 1;"><path class="box" d="M14,0H106Q120,0 120,14V30Q120,44 106,44H14Q0,44 0,30V14Q0,0 14,0Z" fill="#edf3f7"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>new Point</tspan><tspan class="node-id"> #5</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#5 new Point
Type not computed
[0] → — CTRL</title><circle class="port" cx="60" cy="-3" r="3" fill="white"/><text class="slot" x="60" y="-10" text-anchor="middle">0</text></g><g class="node" id="n6" data-id="6" transform="translate(349,68)" style="opacity: 1;"><path class="box" d="M14,0H106Q120,0 120,14V30Q120,44 106,44H14Q0,44 0,30V14Q0,0 14,0Z" fill="#edf3f7"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>#0</tspan><tspan class="node-id"> #6</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#6 #0
Type not computed
[0] → #1 ASSOC</title><circle class="port" cx="60" cy="-3" r="3" fill="#536477"/><text class="slot" x="60" y="-10" text-anchor="middle">0</text></g><g class="node" id="n7" data-id="7" transform="translate(127,172)" style="opacity: 1;"><path class="box" d="M10,0H110L120,10V34L110,44H10L0,34V10Z" fill="#dcecff"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>Store p.x</tspan><tspan class="node-id"> #7</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#7 Store p.x
Type not computed
[0] → — CTRL
[1] → #3 MEM
[2] → #5 DATA
[3] → #6 DATA</title><circle class="port" cx="24" cy="-3" r="3" fill="white"/><circle class="port" cx="48" cy="-3" r="3" fill="#536477"/><circle class="port" cx="72" cy="-3" r="3" fill="#536477"/><circle class="port" cx="96" cy="-3" r="3" fill="#536477"/><text class="slot" x="24" y="-10" text-anchor="middle">0</text><text class="slot" x="48" y="-10" text-anchor="middle">1</text><text class="slot" x="72" y="-10" text-anchor="middle">2</text><text class="slot" x="96" y="-10" text-anchor="middle">3</text></g><g class="node" id="n8" data-id="8" transform="translate(127,276)" style="opacity: 1;"><path class="box" d="M10,0H110L120,10V34L110,44H10L0,34V10Z" fill="#dcecff"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>Store p.y</tspan><tspan class="node-id"> #8</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#8 Store p.y
Type not computed
[0] → — CTRL
[1] → #7 MEM
[2] → #5 DATA
[3] → #6 DATA</title><circle class="port" cx="24" cy="-3" r="3" fill="white"/><circle class="port" cx="48" cy="-3" r="3" fill="#536477"/><circle class="port" cx="72" cy="-3" r="3" fill="#536477"/><circle class="port" cx="96" cy="-3" r="3" fill="#536477"/><text class="slot" x="24" y="-10" text-anchor="middle">0</text><text class="slot" x="48" y="-10" text-anchor="middle">1</text><text class="slot" x="72" y="-10" text-anchor="middle">2</text><text class="slot" x="96" y="-10" text-anchor="middle">3</text></g><g class="node" id="n10" data-id="10" transform="translate(24,294)" style="opacity: 1;"><path class="box" d="M0,0H82V26H0Z" fill="#fff1c4"/><text class="label" text-anchor="middle" x="41" y="17"><tspan>True</tspan><tspan class="node-id"> #10/0</tspan></text><text class="type" text-anchor="middle" y="35" x="41"/><title>#10 True
Projection 0 of #0
Type not computed
</title></g><g class="node" id="n11" data-id="11" transform="translate(431,294)" style="opacity: 1;"><path class="box" d="M0,0H86V26H0Z" fill="#fff1c4"/><text class="label" text-anchor="middle" x="43" y="17"><tspan>False</tspan><tspan class="node-id"> #11/1</tspan></text><text class="type" text-anchor="middle" y="35" x="43"/><title>#11 False
Projection 1 of #0
Type not computed
</title></g><g class="node" id="n12" data-id="12" transform="translate(279,276)" style="opacity: 1;"><path class="box" d="M14,0H106Q120,0 120,14V30Q120,44 106,44H14Q0,44 0,30V14Q0,0 14,0Z" fill="#edf3f7"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>#3</tspan><tspan class="node-id"> #12</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#12 #3
Type not computed
[0] → #1 ASSOC</title><circle class="port" cx="60" cy="-3" r="3" fill="#536477"/><text class="slot" x="60" y="-10" text-anchor="middle">0</text></g><g class="node" id="n13" data-id="13" transform="translate(41,380)" style="opacity: 1;"><path class="box" d="M10,0H110L120,10V34L110,44H10L0,34V10Z" fill="#dcecff"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>Store p.x</tspan><tspan class="node-id"> #13</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#13 Store p.x
Type not computed
[0] → #10 CTRL
[1] → #8 MEM
[2] → #5 DATA
[3] → #12 DATA</title><circle class="port" cx="24" cy="-3" r="3" fill="#536477"/><circle class="port" cx="48" cy="-3" r="3" fill="#536477"/><circle class="port" cx="72" cy="-3" r="3" fill="#536477"/><circle class="port" cx="96" cy="-3" r="3" fill="#536477"/><text class="slot" x="24" y="-10" text-anchor="middle">0</text><text class="slot" x="48" y="-10" text-anchor="middle">1</text><text class="slot" x="72" y="-10" text-anchor="middle">2</text><text class="slot" x="96" y="-10" text-anchor="middle">3</text></g><g class="node" id="n14" data-id="14" transform="translate(538,276)" style="opacity: 1;"><path class="box" d="M14,0H106Q120,0 120,14V30Q120,44 106,44H14Q0,44 0,30V14Q0,0 14,0Z" fill="#edf3f7"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>#4</tspan><tspan class="node-id"> #14</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#14 #4
Type not computed
[0] → #1 ASSOC</title><circle class="port" cx="60" cy="-3" r="3" fill="#536477"/><text class="slot" x="60" y="-10" text-anchor="middle">0</text></g><g class="node" id="n15" data-id="15" transform="translate(450,380)" style="opacity: 1;"><path class="box" d="M10,0H110L120,10V34L110,44H10L0,34V10Z" fill="#dcecff"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>Store p.x</tspan><tspan class="node-id"> #15</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#15 Store p.x
Type not computed
[0] → #11 CTRL
[1] → #8 MEM
[2] → #5 DATA
[3] → #14 DATA</title><circle class="port" cx="24" cy="-3" r="3" fill="#536477"/><circle class="port" cx="48" cy="-3" r="3" fill="#536477"/><circle class="port" cx="72" cy="-3" r="3" fill="#536477"/><circle class="port" cx="96" cy="-3" r="3" fill="#536477"/><text class="slot" x="24" y="-10" text-anchor="middle">0</text><text class="slot" x="48" y="-10" text-anchor="middle">1</text><text class="slot" x="72" y="-10" text-anchor="middle">2</text><text class="slot" x="96" y="-10" text-anchor="middle">3</text></g><g class="node" id="n17" data-id="17" transform="translate(525,484)" style="opacity: 1;"><path class="box" d="M12,0H108L120,22L108,44H12L0,22Z" fill="#f5e4fa"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>Phi $mem</tspan><tspan class="node-id"> #17</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#17 Phi $mem
Type not computed
[0] → — ASSOC
[1] → #13 MEM
[2] → #15 MEM</title><circle class="port" cx="0" cy="-3" r="3" fill="white"/><circle class="port" cx="40" cy="-3" r="3" fill="#536477"/><circle class="port" cx="80" cy="-3" r="3" fill="#536477"/><text class="slot" x="0" y="-10" text-anchor="middle">0</text><text class="slot" x="40" y="-10" text-anchor="middle">1</text><text class="slot" x="80" y="-10" text-anchor="middle">2</text></g><g class="node" id="n18" data-id="18" transform="translate(596,588)" style="opacity: 1;"><path class="box" d="M14,0H106Q120,0 120,14V30Q120,44 106,44H14Q0,44 0,30V14Q0,0 14,0Z" fill="#edf3f7"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>Load p.x</tspan><tspan class="node-id"> #18</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#18 Load p.x
Type not computed
[0] → — CTRL
[1] → #17 MEM
[2] → #5 DATA
[3] → — DATA</title><circle class="port" cx="24" cy="-3" r="3" fill="white"/><circle class="port" cx="48" cy="-3" r="3" fill="#536477"/><circle class="port" cx="72" cy="-3" r="3" fill="#536477"/><circle class="port" cx="96" cy="-3" r="3" fill="white"/><text class="slot" x="24" y="-10" text-anchor="middle">0</text><text class="slot" x="48" y="-10" text-anchor="middle">1</text><text class="slot" x="72" y="-10" text-anchor="middle">2</text><text class="slot" x="96" y="-10" text-anchor="middle">3</text></g><g class="node" id="n19" data-id="19" transform="translate(525,692)" style="opacity: 1;"><path class="box" d="M0,0H120V44H0Z" fill="#fff1c4"/><text class="label" text-anchor="middle" x="60" y="18"><tspan>Return</tspan><tspan class="node-id"> #19</tspan></text><text class="type" text-anchor="middle" y="35" x="60"/><title>#19 Return
Type not computed
[0] → — CTRL
[1] → #17 MEM
[2] → #18 DATA</title><circle class="port" cx="30" cy="-3" r="3" fill="white"/><circle class="port" cx="60" cy="-3" r="3" fill="#536477"/><circle class="port" cx="90" cy="-3" r="3" fill="#536477"/><text class="slot" x="30" y="-10" text-anchor="middle">0</text><text class="slot" x="60" y="-10" text-anchor="middle">1</text><text class="slot" x="90" y="-10" text-anchor="middle">2</text></g></g><g class="region-heads" style="opacity: 1;"/><g class="shortcuts" style="opacity: 1;"/><g class="peep-ghosts" pointer-events="none"/></g></svg>
|
