Added trivial graph for illustration

README.org

@@ -30,7 +30,7 @@
 
   #+END_SRC
 
-  #+CAPTION: Graph from dot
+  #+CAPTION: AST graph from dot
   #+NAME:   fig:graph-ast-1
   [[./src/printast.dot/null.svg]]
 
@@ -84,3 +84,51 @@
    | semmle.graphKind | tree  |
 
    dot source: none
+
+* Simple direct use of graph API
+  For illustration, the query [[./queries/graphout.ql]] uses the =@kind graph= output
+  for a trivial graph defined in the =edges()= predicate.
+
+  The ouput: 
+  #+CAPTION: Trivial graph rendered by dot
+  #+ATTR_HTML: :width 10% :height 180px
+  #+NAME:   fig:graph-trivial-1
+  [[./printast.dot/null.svg]]
+
+  #+BEGIN_SRC sh
+    # 
+    export PATH=$HOME/local/vmsync/codeql250:"$PATH"
+
+    # Create the db
+    cd ~/w/codeql-javascript/src/
+    rm -fR callbacks.db
+    codeql database create -j8 -v --language=javascript -s . callbacks.db
+
+    # Run the query to create dot file (and bqrs as side effect)
+    cd ~/w/codeql-javascript/
+    codeql database analyze                                 \
+           ~/w/codeql-javascript/src/callbacks.db/          \
+           ~/w/codeql-javascript/queries/graphout.ql        \
+           -j8 -v --ram=16000                               \
+           --format=dot --rerun                             \
+           --output=printast.dot
+
+    # Create SVG version of graph
+    cd ~/w/codeql-javascript/
+    dot -Tsvg < ./printast.dot/null.dot > ./printast.dot/null.svg
+    open -a safari printast.dot/null.svg
+
+    # List query result meta info
+    BQRS=src/callbacks.db/results/exploratory-queries-javascript/graphout.bqrs
+    codeql bqrs info --format=text -- $BQRS
+
+    # Format results using bqrs decode. 
+    codeql bqrs decode --output=printast.csv --result-set=edges \
+           --format=csv --entities=all -- $BQRS
+    codeql bqrs decode --output=printast.json --format=json --entities=all -- $BQRS
+
+    # Result files
+    ls -1l ./src/callbacks.db/results/exploratory-queries-javascript/graphout.bqrs  \
+       ./printast.dot/null.dot                                                      \
+       printast.csv  printast.json
+  #+END_SRC

printast.csv

@@ -0,0 +1,3 @@
+"a","b"
+1,2
+2,3

printast.dot/null.dot

@@ -0,0 +1,8 @@
+digraph {
+  compound=true;
+  0[label="1"; ];
+  1[label="2"; ];
+  2[label="3"; ];
+  0 -> 1[];
+  1 -> 2[];
+}

printast.dot/null.svg

@@ -0,0 +1,42 @@
+<?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="62pt" height="188pt"
+ viewBox="0.00 0.00 62.00 188.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 184)">
+<polygon fill="white" stroke="transparent" points="-4,4 -4,-184 58,-184 58,4 -4,4"/>
+<!-- 0 -->
+<g id="node1" class="node">
+<title>0</title>
+<ellipse fill="none" stroke="black" cx="27" cy="-162" rx="27" ry="18"/>
+<text text-anchor="middle" x="27" y="-158.3" font-family="Times,serif" font-size="14.00">1</text>
+</g>
+<!-- 1 -->
+<g id="node2" class="node">
+<title>1</title>
+<ellipse fill="none" stroke="black" cx="27" cy="-90" rx="27" ry="18"/>
+<text text-anchor="middle" x="27" y="-86.3" font-family="Times,serif" font-size="14.00">2</text>
+</g>
+<!-- 0&#45;&gt;1 -->
+<g id="edge1" class="edge">
+<title>0&#45;&gt;1</title>
+<path fill="none" stroke="black" d="M27,-143.7C27,-135.98 27,-126.71 27,-118.11"/>
+<polygon fill="black" stroke="black" points="30.5,-118.1 27,-108.1 23.5,-118.1 30.5,-118.1"/>
+</g>
+<!-- 2 -->
+<g id="node3" class="node">
+<title>2</title>
+<ellipse fill="none" stroke="black" cx="27" cy="-18" rx="27" ry="18"/>
+<text text-anchor="middle" x="27" y="-14.3" font-family="Times,serif" font-size="14.00">3</text>
+</g>
+<!-- 1&#45;&gt;2 -->
+<g id="edge2" class="edge">
+<title>1&#45;&gt;2</title>
+<path fill="none" stroke="black" d="M27,-71.7C27,-63.98 27,-54.71 27,-46.11"/>
+<polygon fill="black" stroke="black" points="30.5,-46.1 27,-36.1 23.5,-46.1 30.5,-46.1"/>
+</g>
+</g>
+</svg>

printast.json

@@ -0,0 +1,20 @@
+{"edges":{"columns":[
+   {"name":"a","kind":"Integer"}
+  ,{"name":"b","kind":"Integer"}]
+ ,"tuples":[
+   [1,2]
+  ,[2,3]]
+ },"nodes":{"columns":[
+   {"name":"n","kind":"Integer"}
+  ,{"name":"key","kind":"String"}
+  ,{"name":"val","kind":"String"}]
+ ,"tuples":[
+   [1,"semmle.label","1"]
+  ,[2,"semmle.label","2"]
+  ,[3,"semmle.label","3"]]
+ },"graphProperties":{"columns":[
+   {"name":"key","kind":"String"}
+  ,{"name":"value","kind":"String"}]
+ ,"tuples":[
+   ["semmle.graphKind","tree"]]
+ }}

queries/graphout.ql

@@ -0,0 +1,22 @@
+/**
+ * @name simple graph test
+ * @kind graph
+ */
+
+import javascript
+
+query predicate edges(int a, int b) {
+    a = 1 and b = 2
+    or
+    a = 2 and b = 3
+}
+
+query predicate nodes(int n, string key, string val) {
+    (edges(n, _) or edges(_, n)) and
+    key = "semmle.label" and
+    val = n.toString()
+}
+
+query predicate graphProperties(string key, string value) {
+    key = "semmle.graphKind" and value = "tree"
+}

queries/qlpack.yml

@@ -1,3 +1,3 @@
-name: codeql-custom-queries-javascript
+name: exploratory-queries-javascript
 version: 0.0.0
 libraryPathDependencies: codeql-javascript