Sample of generation of dot graph from javascript source

2025-12-16 06:23:03 +01:00 · 2021-08-14 20:31:56 -07:00
commit 1aa6e6feb4
8 changed files with 590 additions and 0 deletions
--- a/README.org
+++ b/README.org
@@ -0,0 +1,86 @@
+* AST Sample for Javascript Source
+  Create dot output from query and db, and then get a rendered graph in SVG.
+
+  #+BEGIN_SRC sh
+    # 
+    export PATH=$HOME/local/vmsync/codeql250:"$PATH"
+
+    # 
+    cd ~/w/codeql-javascript/src/
+    codeql database create -j8 -v --language=javascript -s . callbacks.db
+
+    # 
+    cd ~/w/codeql-javascript/queries/
+    codeql database analyze                                 \
+           ~/w/codeql-javascript/src/callbacks.db/          \
+           ~/w/codeql-javascript/queries/printast.ql        \
+           -j8 -v --ram=16000                               \
+           --format=dot                                     \
+           --output=printast.dot
+
+    # Results in 
+    ls ./callbacks.db/results/codeql-custom-queries-javascript/printast.bqrs
+    # and
+    ls ./printast.dot/null.dot
+
+    # 
+    cd ~/w/codeql-javascript/src/
+    dot -Tsvg < ./printast.dot/null.dot > ./printast.dot/null.svg
+    open -a safari printast.dot/null.svg
+
+  #+END_SRC
+
+  #+CAPTION: Graph from dot
+  #+NAME:   fig:graph-ast-1
+  [[./src/printast.dot/null.svg]]
+
+* Correspondence between query and graph
+** Node Query
+  : query predicate nodes(PrintAstNode node, string key, string value)
+
+  query result
+  | node                     | key          | value                    |
+  |--------------------------+--------------+--------------------------|
+  | [DeclStmt] var arr = ... | semmle.label | [DeclStmt] var arr = ... |
+
+  dot source in [[./printast.dot/null.dot]]
+  #+BEGIN_SRC text
+    digraph {
+      28[label="[DeclStmt] var arr = ..."; ];
+    }
+  #+END_SRC
+
+ 
+** Edge Query
+  : query predicate edges(PrintAstNode source, PrintAstNode target, string key, string value)
+
+  query result
+  | source                      | target                                  | key          | value |
+  |-----------------------------+-----------------------------------------+--------------+-------|
+  | [DeclStmt] var result = ... | [VariableDeclarator] result ... > 3; }) | semmle.order |     1 |
+  | [DeclStmt] var result = ... | [VariableDeclarator] result ... > 3; }) | semmle.label |     1 |
+
+  dot source in [[./printast.dot/null.dot]]
+  #+BEGIN_SRC text
+    digraph {
+      29[label="[DeclStmt] var result = ..."; ];
+      9[label="[VariableDeclarator] result ... > 3; })"; ];
+
+      29 -> 9[label="1"; ];
+    }
+  #+END_SRC
+
+ 
+** graph properties
+   #+BEGIN_SRC java
+     query predicate graphProperties(string key, string value) {
+       key = "semmle.graphKind" and value = "tree"
+     }
+   #+END_SRC
+
+   query result
+   | key              | value |
+   |------------------+-------|
+   | semmle.graphKind | tree  |
+
+   dot source: none
--- a/javascript.code-workspace
+++ b/javascript.code-workspace
@@ -0,0 +1,21 @@
+{
+	"folders": [
+		{
+			"path": "queries"
+		},
+		{
+			"path": "src"
+		},
+		{
+			"path": "/Users/hohn/local/vmsync/ql"
+		},
+		{
+			"name": "[callbacks.db source archive]",
+			"uri": "codeql-zip-archive://0-56/Users/hohn/w/codeql-javascript/src/callbacks.db/src.zip"
+		}
+	],
+	"settings": {
+		"omnisharp.autoStart": false,
+		"codeQL.runningQueries.autoSave": true
+	}
+}
--- a/queries/printast.ql
+++ b/queries/printast.ql
@@ -0,0 +1,17 @@
+/**
+ * @name Print AST
+ * @kind graph
+ */
+
+import javascript
+import semmle.javascript.PrintAst
+
+class PrintAstConfigurationOverride extends PrintAstConfiguration {
+    override predicate shouldPrint(Locatable e, Location l) {
+        super.shouldPrint(e, l) and
+        l.getFile().getBaseName() = "callbacks.js"
+    }
+}
+// from File f
+// where f.getBaseName() = "callbacks.js"
+// select f
--- a/queries/qlpack.yml
+++ b/queries/qlpack.yml
@@ -0,0 +1,3 @@
+name: codeql-custom-queries-javascript
+version: 0.0.0
+libraryPathDependencies: codeql-javascript
--- a/queries/queries.xml
+++ b/queries/queries.xml
@@ -0,0 +1 @@
+<queries language="javascript"/>
--- a/src/callbacks.js
+++ b/src/callbacks.js
@@ -0,0 +1,6 @@
+
+var arr = [1, 2, 3]
+
+var result = arr.some(x => { return x > 3; })
+
+console.log("result: ", result)
--- a/src/printast.dot/null.dot
+++ b/src/printast.dot/null.dot
@@ -0,0 +1,62 @@
+digraph {
+  compound=true;
+  0[label="(Parameters)"; ];
+  1[label="(Arguments)"; ];
+  2[label="(Arguments)"; ];
+  3[label="[VariableDeclarator] arr = [1, 2, 3]"; ];
+  4[label="[VarDecl] arr"; ];
+  5[label="[ArrayExpr] [1, 2, 3]"; ];
+  6[label="[Literal] 1"; ];
+  7[label="[Literal] 2"; ];
+  8[label="[Literal] 3"; ];
+  9[label="[VariableDeclarator] result ... > 3; })"; ];
+  10[label="[VarDecl] result"; ];
+  11[label="[MethodCallExpr] arr.som ... > 3; })"; ];
+  12[label="[DotExpr] arr.some"; ];
+  13[label="[VarRef] arr"; ];
+  14[label="[Label] some"; ];
+  15[label="[ArrowFunctionExpr] x => { ... > 3; }"; ];
+  16[label="[SimpleParameter] x"; ];
+  17[label="[BlockStmt] { return x > 3; }"; ];
+  18[label="[ReturnStmt] return x > 3;"; ];
+  19[label="[BinaryExpr] x > 3"; ];
+  20[label="[VarRef] x"; ];
+  21[label="[Literal] 3"; ];
+  22[label="[MethodCallExpr] console ... result)"; ];
+  23[label="[DotExpr] console.log"; ];
+  24[label="[VarRef] console"; ];
+  25[label="[Label] log"; ];
+  26[label="[Literal] \"result: \""; ];
+  27[label="[VarRef] result"; ];
+  28[label="[DeclStmt] var arr = ..."; ];
+  29[label="[DeclStmt] var result = ..."; ];
+  30[label="[ExprStmt] console ... result)"; ];
+  0 -> 16[label="0"; ];
+  1 -> 15[label="0"; ];
+  2 -> 26[label="0"; ];
+  11 -> 12[label="0"; ];
+  22 -> 23[label="0"; ];
+  2 -> 27[label="1"; ];
+  28 -> 3[label="1"; ];
+  3 -> 4[label="1"; ];
+  5 -> 6[label="1"; ];
+  29 -> 9[label="1"; ];
+  9 -> 10[label="1"; ];
+  11 -> 1[label="1"; ];
+  12 -> 13[label="1"; ];
+  15 -> 0[label="1"; ];
+  17 -> 18[label="1"; ];
+  18 -> 19[label="1"; ];
+  19 -> 20[label="1"; ];
+  30 -> 22[label="1"; ];
+  22 -> 2[label="1"; ];
+  23 -> 24[label="1"; ];
+  3 -> 5[label="2"; ];
+  5 -> 7[label="2"; ];
+  9 -> 11[label="2"; ];
+  12 -> 14[label="2"; ];
+  19 -> 21[label="2"; ];
+  23 -> 25[label="2"; ];
+  5 -> 8[label="3"; ];
+  15 -> 17[label="5"; ];
+}
--- a/src/printast.dot/null.svg
+++ b/src/printast.dot/null.svg
@@ -0,0 +1,394 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Generated by graphviz version 2.48.0 (20210717.1556)
+ -->
+<!-- Pages: 1 -->
+<svg width="1486pt" height="740pt"
+ viewBox="0.00 0.00 1485.54 740.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 736)">
+<polygon fill="white" stroke="transparent" points="-4,4 -4,-736 1481.54,-736 1481.54,4 -4,4"/>
+<!-- 0 -->
+<g id="node1" class="node">
+<title>0</title>
+<ellipse fill="none" stroke="black" cx="95.44" cy="-279" rx="57.39" ry="18"/>
+<text text-anchor="middle" x="95.44" y="-275.3" font-family="Times,serif" font-size="14.00">(Parameters)</text>
+</g>
+<!-- 16 -->
+<g id="node17" class="node">
+<title>16</title>
+<ellipse fill="none" stroke="black" cx="86.44" cy="-192" rx="86.38" ry="18"/>
+<text text-anchor="middle" x="86.44" y="-188.3" font-family="Times,serif" font-size="14.00">[SimpleParameter] x</text>
+</g>
+<!-- 0&#45;&gt;16 -->
+<g id="edge1" class="edge">
+<title>0&#45;&gt;16</title>
+<path fill="none" stroke="black" d="M93.62,-260.8C92.39,-249.16 90.74,-233.55 89.33,-220.24"/>
+<polygon fill="black" stroke="black" points="92.79,-219.75 88.26,-210.18 85.83,-220.49 92.79,-219.75"/>
+<text text-anchor="middle" x="95.94" y="-231.8" font-family="Times,serif" font-size="14.00">0</text>
+</g>
+<!-- 1 -->
+<g id="node2" class="node">
+<title>1</title>
+<ellipse fill="none" stroke="black" cx="241.44" cy="-453" rx="57.39" ry="18"/>
+<text text-anchor="middle" x="241.44" y="-449.3" font-family="Times,serif" font-size="14.00">(Arguments)</text>
+</g>
+<!-- 15 -->
+<g id="node16" class="node">
+<title>15</title>
+<ellipse fill="none" stroke="black" cx="191.44" cy="-366" rx="148.67" ry="18"/>
+<text text-anchor="middle" x="191.44" y="-362.3" font-family="Times,serif" font-size="14.00">[ArrowFunctionExpr] x =&gt; { ... &gt; 3; }</text>
+</g>
+<!-- 1&#45;&gt;15 -->
+<g id="edge2" class="edge">
+<title>1&#45;&gt;15</title>
+<path fill="none" stroke="black" d="M231.56,-435.21C224.49,-423.18 214.82,-406.75 206.75,-393.03"/>
+<polygon fill="black" stroke="black" points="209.56,-390.89 201.47,-384.05 203.52,-394.44 209.56,-390.89"/>
+<text text-anchor="middle" x="222.94" y="-405.8" font-family="Times,serif" font-size="14.00">0</text>
+</g>
+<!-- 2 -->
+<g id="node3" class="node">
+<title>2</title>
+<ellipse fill="none" stroke="black" cx="744.44" cy="-540" rx="57.39" ry="18"/>
+<text text-anchor="middle" x="744.44" y="-536.3" font-family="Times,serif" font-size="14.00">(Arguments)</text>
+</g>
+<!-- 26 -->
+<g id="node27" class="node">
+<title>26</title>
+<ellipse fill="none" stroke="black" cx="588.44" cy="-453" rx="76.09" ry="18"/>
+<text text-anchor="middle" x="588.44" y="-449.3" font-family="Times,serif" font-size="14.00">[Literal] &quot;result: &quot;</text>
+</g>
+<!-- 2&#45;&gt;26 -->
+<g id="edge3" class="edge">
+<title>2&#45;&gt;26</title>
+<path fill="none" stroke="black" d="M716.91,-524C691.76,-510.3 654.35,-489.91 626.38,-474.67"/>
+<polygon fill="black" stroke="black" points="627.74,-471.43 617.28,-469.71 624.39,-477.57 627.74,-471.43"/>
+<text text-anchor="middle" x="679.94" y="-492.8" font-family="Times,serif" font-size="14.00">0</text>
+</g>
+<!-- 27 -->
+<g id="node28" class="node">
+<title>27</title>
+<ellipse fill="none" stroke="black" cx="747.44" cy="-453" rx="64.99" ry="18"/>
+<text text-anchor="middle" x="747.44" y="-449.3" font-family="Times,serif" font-size="14.00">[VarRef] result</text>
+</g>
+<!-- 2&#45;&gt;27 -->
+<g id="edge6" class="edge">
+<title>2&#45;&gt;27</title>
+<path fill="none" stroke="black" d="M745.05,-521.8C745.46,-510.16 746.01,-494.55 746.48,-481.24"/>
+<polygon fill="black" stroke="black" points="749.98,-481.29 746.84,-471.18 742.99,-481.05 749.98,-481.29"/>
+<text text-anchor="middle" x="749.94" y="-492.8" font-family="Times,serif" font-size="14.00">1</text>
+</g>
+<!-- 3 -->
+<g id="node4" class="node">
+<title>3</title>
+<ellipse fill="none" stroke="black" cx="1166.44" cy="-627" rx="136.48" ry="18"/>
+<text text-anchor="middle" x="1166.44" y="-623.3" font-family="Times,serif" font-size="14.00">[VariableDeclarator] arr = [1, 2, 3]</text>
+</g>
+<!-- 4 -->
+<g id="node5" class="node">
+<title>4</title>
+<ellipse fill="none" stroke="black" cx="1151.44" cy="-540" rx="59.29" ry="18"/>
+<text text-anchor="middle" x="1151.44" y="-536.3" font-family="Times,serif" font-size="14.00">[VarDecl] arr</text>
+</g>
+<!-- 3&#45;&gt;4 -->
+<g id="edge8" class="edge">
+<title>3&#45;&gt;4</title>
+<path fill="none" stroke="black" d="M1163.41,-608.8C1161.35,-597.16 1158.6,-581.55 1156.25,-568.24"/>
+<polygon fill="black" stroke="black" points="1159.66,-567.41 1154.47,-558.18 1152.76,-568.63 1159.66,-567.41"/>
+<text text-anchor="middle" x="1163.94" y="-579.8" font-family="Times,serif" font-size="14.00">1</text>
+</g>
+<!-- 5 -->
+<g id="node6" class="node">
+<title>5</title>
+<ellipse fill="none" stroke="black" cx="1315.44" cy="-540" rx="87.18" ry="18"/>
+<text text-anchor="middle" x="1315.44" y="-536.3" font-family="Times,serif" font-size="14.00">[ArrayExpr] [1, 2, 3]</text>
+</g>
+<!-- 3&#45;&gt;5 -->
+<g id="edge21" class="edge">
+<title>3&#45;&gt;5</title>
+<path fill="none" stroke="black" d="M1195.52,-609.41C1219.16,-595.93 1252.66,-576.81 1278.25,-562.22"/>
+<polygon fill="black" stroke="black" points="1279.99,-565.26 1286.94,-557.26 1276.52,-559.18 1279.99,-565.26"/>
+<text text-anchor="middle" x="1252.94" y="-579.8" font-family="Times,serif" font-size="14.00">2</text>
+</g>
+<!-- 6 -->
+<g id="node7" class="node">
+<title>6</title>
+<ellipse fill="none" stroke="black" cx="1201.44" cy="-453" rx="48.19" ry="18"/>
+<text text-anchor="middle" x="1201.44" y="-449.3" font-family="Times,serif" font-size="14.00">[Literal] 1</text>
+</g>
+<!-- 5&#45;&gt;6 -->
+<g id="edge9" class="edge">
+<title>5&#45;&gt;6</title>
+<path fill="none" stroke="black" d="M1293.19,-522.41C1275.24,-509.03 1249.86,-490.1 1230.34,-475.55"/>
+<polygon fill="black" stroke="black" points="1232.21,-472.58 1222.1,-469.4 1228.03,-478.19 1232.21,-472.58"/>
+<text text-anchor="middle" x="1267.94" y="-492.8" font-family="Times,serif" font-size="14.00">1</text>
+</g>
+<!-- 7 -->
+<g id="node8" class="node">
+<title>7</title>
+<ellipse fill="none" stroke="black" cx="1315.44" cy="-453" rx="48.19" ry="18"/>
+<text text-anchor="middle" x="1315.44" y="-449.3" font-family="Times,serif" font-size="14.00">[Literal] 2</text>
+</g>
+<!-- 5&#45;&gt;7 -->
+<g id="edge22" class="edge">
+<title>5&#45;&gt;7</title>
+<path fill="none" stroke="black" d="M1315.44,-521.8C1315.44,-510.16 1315.44,-494.55 1315.44,-481.24"/>
+<polygon fill="black" stroke="black" points="1318.94,-481.18 1315.44,-471.18 1311.94,-481.18 1318.94,-481.18"/>
+<text text-anchor="middle" x="1318.94" y="-492.8" font-family="Times,serif" font-size="14.00">2</text>
+</g>
+<!-- 8 -->
+<g id="node9" class="node">
+<title>8</title>
+<ellipse fill="none" stroke="black" cx="1429.44" cy="-453" rx="48.19" ry="18"/>
+<text text-anchor="middle" x="1429.44" y="-449.3" font-family="Times,serif" font-size="14.00">[Literal] 3</text>
+</g>
+<!-- 5&#45;&gt;8 -->
+<g id="edge27" class="edge">
+<title>5&#45;&gt;8</title>
+<path fill="none" stroke="black" d="M1337.69,-522.41C1355.64,-509.03 1381.03,-490.1 1400.55,-475.55"/>
+<polygon fill="black" stroke="black" points="1402.86,-478.19 1408.78,-469.4 1398.67,-472.58 1402.86,-478.19"/>
+<text text-anchor="middle" x="1381.94" y="-492.8" font-family="Times,serif" font-size="14.00">3</text>
+</g>
+<!-- 9 -->
+<g id="node10" class="node">
+<title>9</title>
+<ellipse fill="none" stroke="black" cx="156.44" cy="-627" rx="143.77" ry="18"/>
+<text text-anchor="middle" x="156.44" y="-623.3" font-family="Times,serif" font-size="14.00">[VariableDeclarator] result ... &gt; 3; })</text>
+</g>
+<!-- 10 -->
+<g id="node11" class="node">
+<title>10</title>
+<ellipse fill="none" stroke="black" cx="98.44" cy="-540" rx="68.79" ry="18"/>
+<text text-anchor="middle" x="98.44" y="-536.3" font-family="Times,serif" font-size="14.00">[VarDecl] result</text>
+</g>
+<!-- 9&#45;&gt;10 -->
+<g id="edge11" class="edge">
+<title>9&#45;&gt;10</title>
+<path fill="none" stroke="black" d="M144.71,-608.8C136.4,-596.62 125.11,-580.09 115.77,-566.4"/>
+<polygon fill="black" stroke="black" points="118.49,-564.17 109.96,-557.89 112.71,-568.12 118.49,-564.17"/>
+<text text-anchor="middle" x="134.94" y="-579.8" font-family="Times,serif" font-size="14.00">1</text>
+</g>
+<!-- 11 -->
+<g id="node12" class="node">
+<title>11</title>
+<ellipse fill="none" stroke="black" cx="328.44" cy="-540" rx="142.97" ry="18"/>
+<text text-anchor="middle" x="328.44" y="-536.3" font-family="Times,serif" font-size="14.00">[MethodCallExpr] arr.som ... &gt; 3; })</text>
+</g>
+<!-- 9&#45;&gt;11 -->
+<g id="edge23" class="edge">
+<title>9&#45;&gt;11</title>
+<path fill="none" stroke="black" d="M190.01,-609.41C217.36,-595.89 256.15,-576.73 285.71,-562.12"/>
+<polygon fill="black" stroke="black" points="287.54,-565.12 294.96,-557.55 284.44,-558.84 287.54,-565.12"/>
+<text text-anchor="middle" x="256.94" y="-579.8" font-family="Times,serif" font-size="14.00">2</text>
+</g>
+<!-- 11&#45;&gt;1 -->
+<g id="edge12" class="edge">
+<title>11&#45;&gt;1</title>
+<path fill="none" stroke="black" d="M310.84,-521.8C297.73,-508.99 279.69,-491.37 265.29,-477.3"/>
+<polygon fill="black" stroke="black" points="267.74,-474.8 258.14,-470.31 262.84,-479.8 267.74,-474.8"/>
+<text text-anchor="middle" x="293.94" y="-492.8" font-family="Times,serif" font-size="14.00">1</text>
+</g>
+<!-- 12 -->
+<g id="node13" class="node">
+<title>12</title>
+<ellipse fill="none" stroke="black" cx="413.44" cy="-453" rx="81.49" ry="18"/>
+<text text-anchor="middle" x="413.44" y="-449.3" font-family="Times,serif" font-size="14.00">[DotExpr] arr.some</text>
+</g>
+<!-- 11&#45;&gt;12 -->
+<g id="edge4" class="edge">
+<title>11&#45;&gt;12</title>
+<path fill="none" stroke="black" d="M345.64,-521.8C358.17,-509.27 375.3,-492.14 389.21,-478.23"/>
+<polygon fill="black" stroke="black" points="391.96,-480.43 396.56,-470.89 387.01,-475.48 391.96,-480.43"/>
+<text text-anchor="middle" x="379.94" y="-492.8" font-family="Times,serif" font-size="14.00">0</text>
+</g>
+<!-- 13 -->
+<g id="node14" class="node">
+<title>13</title>
+<ellipse fill="none" stroke="black" cx="413.44" cy="-366" rx="55.49" ry="18"/>
+<text text-anchor="middle" x="413.44" y="-362.3" font-family="Times,serif" font-size="14.00">[VarRef] arr</text>
+</g>
+<!-- 12&#45;&gt;13 -->
+<g id="edge13" class="edge">
+<title>12&#45;&gt;13</title>
+<path fill="none" stroke="black" d="M413.44,-434.8C413.44,-423.16 413.44,-407.55 413.44,-394.24"/>
+<polygon fill="black" stroke="black" points="416.94,-394.18 413.44,-384.18 409.94,-394.18 416.94,-394.18"/>
+<text text-anchor="middle" x="416.94" y="-405.8" font-family="Times,serif" font-size="14.00">1</text>
+</g>
+<!-- 14 -->
+<g id="node15" class="node">
+<title>14</title>
+<ellipse fill="none" stroke="black" cx="545.44" cy="-366" rx="59.29" ry="18"/>
+<text text-anchor="middle" x="545.44" y="-362.3" font-family="Times,serif" font-size="14.00">[Label] some</text>
+</g>
+<!-- 12&#45;&gt;14 -->
+<g id="edge24" class="edge">
+<title>12&#45;&gt;14</title>
+<path fill="none" stroke="black" d="M438.58,-435.81C459.58,-422.29 489.68,-402.91 512.58,-388.16"/>
+<polygon fill="black" stroke="black" points="514.78,-390.91 521.29,-382.55 510.99,-385.03 514.78,-390.91"/>
+<text text-anchor="middle" x="490.94" y="-405.8" font-family="Times,serif" font-size="14.00">2</text>
+</g>
+<!-- 15&#45;&gt;0 -->
+<g id="edge14" class="edge">
+<title>15&#45;&gt;0</title>
+<path fill="none" stroke="black" d="M172.02,-347.8C157.55,-334.99 137.65,-317.37 121.76,-303.3"/>
+<polygon fill="black" stroke="black" points="123.67,-300.32 113.86,-296.31 119.03,-305.56 123.67,-300.32"/>
+<text text-anchor="middle" x="152.94" y="-318.8" font-family="Times,serif" font-size="14.00">1</text>
+</g>
+<!-- 17 -->
+<g id="node18" class="node">
+<title>17</title>
+<ellipse fill="none" stroke="black" cx="292.44" cy="-279" rx="116.18" ry="18"/>
+<text text-anchor="middle" x="292.44" y="-275.3" font-family="Times,serif" font-size="14.00">[BlockStmt] { return x &gt; 3; }</text>
+</g>
+<!-- 15&#45;&gt;17 -->
+<g id="edge28" class="edge">
+<title>15&#45;&gt;17</title>
+<path fill="none" stroke="black" d="M211.88,-347.8C227.04,-335.04 247.88,-317.5 264.56,-303.46"/>
+<polygon fill="black" stroke="black" points="266.98,-306 272.38,-296.89 262.47,-300.65 266.98,-306"/>
+<text text-anchor="middle" x="251.94" y="-318.8" font-family="Times,serif" font-size="14.00">5</text>
+</g>
+<!-- 18 -->
+<g id="node19" class="node">
+<title>18</title>
+<ellipse fill="none" stroke="black" cx="297.44" cy="-192" rx="106.68" ry="18"/>
+<text text-anchor="middle" x="297.44" y="-188.3" font-family="Times,serif" font-size="14.00">[ReturnStmt] return x &gt; 3;</text>
+</g>
+<!-- 17&#45;&gt;18 -->
+<g id="edge15" class="edge">
+<title>17&#45;&gt;18</title>
+<path fill="none" stroke="black" d="M293.45,-260.8C294.14,-249.16 295.06,-233.55 295.84,-220.24"/>
+<polygon fill="black" stroke="black" points="299.34,-220.36 296.43,-210.18 292.35,-219.95 299.34,-220.36"/>
+<text text-anchor="middle" x="298.94" y="-231.8" font-family="Times,serif" font-size="14.00">1</text>
+</g>
+<!-- 19 -->
+<g id="node20" class="node">
+<title>19</title>
+<ellipse fill="none" stroke="black" cx="297.44" cy="-105" rx="80.69" ry="18"/>
+<text text-anchor="middle" x="297.44" y="-101.3" font-family="Times,serif" font-size="14.00">[BinaryExpr] x &gt; 3</text>
+</g>
+<!-- 18&#45;&gt;19 -->
+<g id="edge16" class="edge">
+<title>18&#45;&gt;19</title>
+<path fill="none" stroke="black" d="M297.44,-173.8C297.44,-162.16 297.44,-146.55 297.44,-133.24"/>
+<polygon fill="black" stroke="black" points="300.94,-133.18 297.44,-123.18 293.94,-133.18 300.94,-133.18"/>
+<text text-anchor="middle" x="300.94" y="-144.8" font-family="Times,serif" font-size="14.00">1</text>
+</g>
+<!-- 20 -->
+<g id="node21" class="node">
+<title>20</title>
+<ellipse fill="none" stroke="black" cx="240.44" cy="-18" rx="49.29" ry="18"/>
+<text text-anchor="middle" x="240.44" y="-14.3" font-family="Times,serif" font-size="14.00">[VarRef] x</text>
+</g>
+<!-- 19&#45;&gt;20 -->
+<g id="edge17" class="edge">
+<title>19&#45;&gt;20</title>
+<path fill="none" stroke="black" d="M285.91,-86.8C277.69,-74.54 266.51,-57.87 257.29,-44.13"/>
+<polygon fill="black" stroke="black" points="260.05,-41.95 251.57,-35.6 254.23,-45.85 260.05,-41.95"/>
+<text text-anchor="middle" x="275.94" y="-57.8" font-family="Times,serif" font-size="14.00">1</text>
+</g>
+<!-- 21 -->
+<g id="node22" class="node">
+<title>21</title>
+<ellipse fill="none" stroke="black" cx="355.44" cy="-18" rx="48.19" ry="18"/>
+<text text-anchor="middle" x="355.44" y="-14.3" font-family="Times,serif" font-size="14.00">[Literal] 3</text>
+</g>
+<!-- 19&#45;&gt;21 -->
+<g id="edge25" class="edge">
+<title>19&#45;&gt;21</title>
+<path fill="none" stroke="black" d="M309.18,-86.8C317.54,-74.54 328.92,-57.87 338.3,-44.13"/>
+<polygon fill="black" stroke="black" points="341.37,-45.83 344.12,-35.6 335.59,-41.88 341.37,-45.83"/>
+<text text-anchor="middle" x="333.94" y="-57.8" font-family="Times,serif" font-size="14.00">2</text>
+</g>
+<!-- 22 -->
+<g id="node23" class="node">
+<title>22</title>
+<ellipse fill="none" stroke="black" cx="822.44" cy="-627" rx="142.17" ry="18"/>
+<text text-anchor="middle" x="822.44" y="-623.3" font-family="Times,serif" font-size="14.00">[MethodCallExpr] console ... result)</text>
+</g>
+<!-- 22&#45;&gt;2 -->
+<g id="edge19" class="edge">
+<title>22&#45;&gt;2</title>
+<path fill="none" stroke="black" d="M806.66,-608.8C795.2,-596.31 779.53,-579.24 766.78,-565.35"/>
+<polygon fill="black" stroke="black" points="769.01,-562.6 759.67,-557.6 763.85,-567.33 769.01,-562.6"/>
+<text text-anchor="middle" x="791.94" y="-579.8" font-family="Times,serif" font-size="14.00">1</text>
+</g>
+<!-- 23 -->
+<g id="node24" class="node">
+<title>23</title>
+<ellipse fill="none" stroke="black" cx="911.44" cy="-540" rx="92.08" ry="18"/>
+<text text-anchor="middle" x="911.44" y="-536.3" font-family="Times,serif" font-size="14.00">[DotExpr] console.log</text>
+</g>
+<!-- 22&#45;&gt;23 -->
+<g id="edge5" class="edge">
+<title>22&#45;&gt;23</title>
+<path fill="none" stroke="black" d="M840.45,-608.8C853.69,-596.16 871.84,-578.82 886.47,-564.85"/>
+<polygon fill="black" stroke="black" points="888.95,-567.32 893.76,-557.89 884.11,-562.26 888.95,-567.32"/>
+<text text-anchor="middle" x="875.94" y="-579.8" font-family="Times,serif" font-size="14.00">0</text>
+</g>
+<!-- 24 -->
+<g id="node25" class="node">
+<title>24</title>
+<ellipse fill="none" stroke="black" cx="908.44" cy="-453" rx="72.59" ry="18"/>
+<text text-anchor="middle" x="908.44" y="-449.3" font-family="Times,serif" font-size="14.00">[VarRef] console</text>
+</g>
+<!-- 23&#45;&gt;24 -->
+<g id="edge20" class="edge">
+<title>23&#45;&gt;24</title>
+<path fill="none" stroke="black" d="M910.84,-521.8C910.42,-510.16 909.87,-494.55 909.4,-481.24"/>
+<polygon fill="black" stroke="black" points="912.9,-481.05 909.05,-471.18 905.9,-481.29 912.9,-481.05"/>
+<text text-anchor="middle" x="913.94" y="-492.8" font-family="Times,serif" font-size="14.00">1</text>
+</g>
+<!-- 25 -->
+<g id="node26" class="node">
+<title>25</title>
+<ellipse fill="none" stroke="black" cx="1050.44" cy="-453" rx="51.19" ry="18"/>
+<text text-anchor="middle" x="1050.44" y="-449.3" font-family="Times,serif" font-size="14.00">[Label] log</text>
+</g>
+<!-- 23&#45;&gt;25 -->
+<g id="edge26" class="edge">
+<title>23&#45;&gt;25</title>
+<path fill="none" stroke="black" d="M938.24,-522.61C960.77,-508.84 993.06,-489.09 1017.23,-474.31"/>
+<polygon fill="black" stroke="black" points="1019.35,-477.12 1026.05,-468.92 1015.69,-471.15 1019.35,-477.12"/>
+<text text-anchor="middle" x="992.94" y="-492.8" font-family="Times,serif" font-size="14.00">2</text>
+</g>
+<!-- 28 -->
+<g id="node29" class="node">
+<title>28</title>
+<ellipse fill="none" stroke="black" cx="1166.44" cy="-714" rx="94.48" ry="18"/>
+<text text-anchor="middle" x="1166.44" y="-710.3" font-family="Times,serif" font-size="14.00">[DeclStmt] var arr = ...</text>
+</g>
+<!-- 28&#45;&gt;3 -->
+<g id="edge7" class="edge">
+<title>28&#45;&gt;3</title>
+<path fill="none" stroke="black" d="M1166.44,-695.8C1166.44,-684.16 1166.44,-668.55 1166.44,-655.24"/>
+<polygon fill="black" stroke="black" points="1169.94,-655.18 1166.44,-645.18 1162.94,-655.18 1169.94,-655.18"/>
+<text text-anchor="middle" x="1169.94" y="-666.8" font-family="Times,serif" font-size="14.00">1</text>
+</g>
+<!-- 29 -->
+<g id="node30" class="node">
+<title>29</title>
+<ellipse fill="none" stroke="black" cx="156.44" cy="-714" rx="103.98" ry="18"/>
+<text text-anchor="middle" x="156.44" y="-710.3" font-family="Times,serif" font-size="14.00">[DeclStmt] var result = ...</text>
+</g>
+<!-- 29&#45;&gt;9 -->
+<g id="edge10" class="edge">
+<title>29&#45;&gt;9</title>
+<path fill="none" stroke="black" d="M156.44,-695.8C156.44,-684.16 156.44,-668.55 156.44,-655.24"/>
+<polygon fill="black" stroke="black" points="159.94,-655.18 156.44,-645.18 152.94,-655.18 159.94,-655.18"/>
+<text text-anchor="middle" x="159.94" y="-666.8" font-family="Times,serif" font-size="14.00">1</text>
+</g>
+<!-- 30 -->
+<g id="node31" class="node">
+<title>30</title>
+<ellipse fill="none" stroke="black" cx="822.44" cy="-714" rx="116.18" ry="18"/>
+<text text-anchor="middle" x="822.44" y="-710.3" font-family="Times,serif" font-size="14.00">[ExprStmt] console ... result)</text>
+</g>
+<!-- 30&#45;&gt;22 -->
+<g id="edge18" class="edge">
+<title>30&#45;&gt;22</title>
+<path fill="none" stroke="black" d="M822.44,-695.8C822.44,-684.16 822.44,-668.55 822.44,-655.24"/>
+<polygon fill="black" stroke="black" points="825.94,-655.18 822.44,-645.18 818.94,-655.18 825.94,-655.18"/>
+<text text-anchor="middle" x="825.94" y="-666.8" font-family="Times,serif" font-size="14.00">1</text>
+</g>
+</g>
+</svg>