SWObjects/SPARQL-explorer.html at sparql11 · ericprud/SWObjects · GitHub

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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SPARQL / Algae 3 Evaluation Explorer</title>
<style>
:root { font-family: system-ui, sans-serif; font-size: 14px;
        --now: #fff8e1; --done: #e8f5e9; --pend: #fafafa; }
* { box-sizing: border-box; margin: 0; }
body { max-width: 1500px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.3em; margin-bottom: 4px; }
h2 { font-size: 1.02em; border-bottom: 1px solid #ddd; padding-bottom: 3px; margin: 14px 0 8px; }
p.desc { font-size: 12px; color: #555; margin: 3px 0 8px; }
code { font-family: monospace; background: #f3f3f3; padding: 1px 3px; border-radius: 2px; }
button { padding: 3px 12px; font-size: 12px; cursor: pointer; border: 1px solid #bbb;
         border-radius: 3px; background: #f4f4f4; }
button:hover { background: #e8e8e8; }
button.primary { background: #1565c0; border-color: #1565c0; color: white; }
button.primary:hover { background: #0d47a1; }
.row { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.row label { font-size: 12px; color: #666; min-width: 72px; }
.row input[type=text] { flex: 1; border: 1px solid #ccc; padding: 3px 7px;
                        font-family: monospace; font-size: 12px; border-radius: 3px; }
textarea { width: 100%; font-family: monospace; font-size: 11px; border: 1px solid #ccc;
           border-radius: 3px; padding: 6px; }
#status { font-style: italic; color: #888; font-size: 12px; }
#status.err { color: #c62828; }

.panes { display: flex; gap: 12px; align-items: flex-start; }
.panes > div { flex: 1; min-width: 0; }

/* pipeline */
#pipeline { font-family: monospace; font-size: 11px; }
.act { display: flex; gap: 7px; padding: 4px 7px; border-left: 3px solid #ccc;
       margin: 2px 0; background: var(--pend); cursor: pointer; border-radius: 0 3px 3px 0; }
.act:hover { filter: brightness(.97); }
.act.done { background: var(--done); border-left-color: #388e3c; }
.act.now  { background: var(--now);  border-left-color: #f9a825; font-weight: bold; }
.act .ord { color: #999; min-width: 18px; text-align: right; }
.act .alg { white-space: pre-wrap; word-break: break-all; }

/* results */
table.sp { border-collapse: collapse; font-family: monospace; font-size: 12px; margin: 6px 0; }
table.sp th, table.sp td { border: 1px solid #ccc; padding: 3px 7px; white-space: nowrap; }
table.sp th { background: #e8e8f0; position: sticky; top: 0; }
table.sp td.nil { color: #bbb; }
#rswrap { max-height: 420px; overflow: auto; border: 1px solid #eee; }
.proofrow td { background: #f6f8fa; color: #555; font-size: 10px; }
.delta { font-size: 12px; color: #666; margin: 4px 0; }
.delta b.grow { color: #2e7d32; } .delta b.shrink { color: #c62828; }

.cmp { display: flex; gap: 12px; }
.cmp > div { flex: 1; overflow: auto; }
details summary { cursor: pointer; font-size: 12px; color: #0366d6; }
</style>
</head>
<body>
<h1>SPARQL / Algae 3 Evaluation Explorer</h1>
<p class="desc">
A generic step-through of query evaluation, driven live by the
<code>bin/algae3 --serve</code> debugger (see the SWObjects checkout).
Load an Algae 3 pipeline — typically a SPARQL query compiled per
<code>doc/sparql-to-algae3.md</code> — and advance action by action, watching
the result set evolve through each triple constraint, join, filter, scope
(subselect), <code>collect … by</code> (GROUP BY / aggregates) and standalone
<code>{…}</code> (HAVING). Paste the source SPARQL alongside for reference.
Start the server with e.g.
<code>bin/algae3 --serve 8765 --serve-dir tests/Algae3</code>.
</p>

<div class="row">
  <label for="server">server</label>
  <input type="text" id="server" value="http://localhost:8765">
  <label for="scriptURL">script URL</label>
  <input type="text" id="scriptURL" placeholder="e.g. tests/Algae3/rule-engine-dnf.a3 (fetched by the browser)">
  <button onclick="loadScriptURL()">Fetch</button>
</div>

<div class="panes">
  <div>
    <h2>Algae 3 pipeline (evaluated)</h2>
    <textarea id="script" rows="14" placeholder="# paste an Algae 3 script (load / ask / collect ...)"></textarea>
  </div>
  <div>
    <h2>Source SPARQL
      <select id="cmode" style="margin-left:8px;font-size:11px">
        <option value="topdown">&sect;3 top-down</option>
        <option value="bottomup">&sect;4 bottom-up (SPARQL-faithful)</option>
      </select>
      <button onclick="compileSparql()">Compile &rarr; a3</button>
      <span id="cstat" style="font-weight:normal;font-size:11px;color:#888"></span></h2>
    <textarea id="sparql" rows="14" placeholder="# paste raw SPARQL (.rq) here and Compile - or reference only"></textarea>
  </div>
</div>

<div class="row" style="margin-top:8px">
  <button class="primary" onclick="doLoad()">Load into debugger</button>
  <label style="min-width:0">mode</label>
  <select id="mode">
    <option value="">script's require</option>
    <option value="topdown">topdown (correlated)</option>
    <option value="bottomup">bottomup (SPARQL algebra)</option>
  </select>
  <button onclick="doStep()">Step ▸</button>
  <button onclick="doRun()">Run ▸▸</button>
  <button onclick="doReset()">Reset ⟲</button>
  <button onclick="compareModes()" title="Run the whole pipeline in both modes and diff the final result sets">Compare modes ⇄</button>
  <span id="status">idle — load a script</span>
</div>

<div class="panes">
  <div style="flex:0 0 46%">
    <h2>Pipeline <span id="modeTag" style="font-weight:normal;font-size:11px;color:#888"></span></h2>
    <p class="desc">Click an action to run from the start up to (and including) it.</p>
    <div id="pipeline"><em style="font-size:12px;color:#999">no script loaded</em></div>
    <h2>Speculative match (<code>try</code>)</h2>
    <p class="desc">Evaluate a pattern against the current result set in the
    current mode <em>without committing</em> — e.g. paste a negation to see
    whether correlated <code>!</code> vs bottom-up Minus would drop rows.</p>
    <textarea id="trybox" rows="3" placeholder="!( ?s <p> ?o )"></textarea>
    <div class="row"><button onclick="doTry()">try ( … )</button>
      <span id="tryout" style="font-size:12px;color:#666"></span></div>
  </div>
  <div>
    <h2>Result set <span id="rowcount" style="font-weight:normal;font-size:11px;color:#888"></span></h2>
    <div class="delta" id="delta"></div>
    <label style="font-size:12px"><input type="checkbox" id="showProofs" onchange="render()"> show proof sets</label>
    <div id="rswrap"></div>
    <div id="extras" style="font-size:12px;color:#555;margin-top:6px"></div>
    <div id="compare"></div>
  </div>
</div>

<script>
"use strict";
let state = null;        // last server state
let prevRowCount = null; // for the delta line

const $ = id => document.getElementById(id);
const esc = s => String(s).replace(/&/g,"&amp;").replace(/</g,"&lt;");
const srv = () => $("server").value.replace(/\/+$/, "");

function setStatus(msg, err) {
  $("status").textContent = msg;
  $("status").className = err ? "err" : "";
}

async function api(path, body) {
  const r = await fetch(srv() + path, { method: "POST", body: body ?? "" });
  if (!r.ok) throw new Error("HTTP " + r.status);
  return r.json();
}

/* ── actions ────────────────────────────────────────────────────────────── */
window.loadScriptURL = async () => {
  const u = $("scriptURL").value.trim();
  if (!u) return;
  try {
    if (/\.rq$/.test(u)) {   // raw SPARQL: fetch + compile client-side
      $("sparql").value = await (await fetch(u)).text();
      await compileSparql();
      setStatus("fetched + compiled " + u + " - Load into debugger to begin");
      return;
    }
    $("script").value = await (await fetch(u)).text();
    // convention: a sibling .rq with the same stem is the SPARQL source
    const rq = u.replace(/(-topdown|-bottomup)?\.a3$/, ".rq");
    if (rq !== u)
      try { const r = await fetch(rq); if (r.ok) $("sparql").value = await r.text(); }
      catch (e) { /* no paired SPARQL; fine */ }
    setStatus("fetched " + u + " — Load into debugger to begin");
  } catch (e) { setStatus("fetch failed: " + e.message, true); }
};

window.doLoad = async () => {
  const script = $("script").value;
  if (!script.trim()) { setStatus("nothing to load", true); return; }
  try {
    prevRowCount = null;
    state = await api("/load?mode=" + $("mode").value, script);
    $("compare").innerHTML = "";
    render();
    setStatus(state.error ? "load error: " + state.error
                          : "loaded " + state.actions.length + " actions", !!state.error);
  } catch (e) { setStatus("server error: " + e.message + " — is bin/algae3 --serve running?", true); }
};

window.doStep  = () => advance("/step");
window.doRun   = () => advance("/run");
window.doReset = () => { prevRowCount = null; return advance("/reset"); };

async function advance(path) {
  if (!state) { setStatus("load a script first", true); return; }
  try {
    prevRowCount = state.rows.length;
    state = await api(path);
    render();
    setStatus(state.error ? "action error: " + state.error
            : state.done ? "pipeline complete"
            : "at action " + state.pos + " of " + state.actions.length, !!state.error);
  } catch (e) { setStatus("server error: " + e.message, true); }
}

/* click an action ordinal: reset then step to it */
window.runTo = async n => {
  if (!state) return;
  try {
    await api("/reset");
    prevRowCount = null;
    for (let i = 0; i <= n; ++i) { prevRowCount = state.rows.length; state = await api("/step"); }
    render();
    setStatus("ran to action " + n + " (" + state.rows.length + " rows)");
  } catch (e) { setStatus("server error: " + e.message, true); }
};

window.doTry = async () => {
  const t = $("trybox").value.trim();
  if (!t || !state) return;
  try {
    const r = await api("/try", t);
    $("tryout").textContent = r.error ? "parse error: " + r.error
      : `over ${r.rowsNow} rows: +${r.extended} extended, −${r.dropped} dropped (discarded)`;
  } catch (e) { $("tryout").textContent = "server error: " + e.message; }
};

/* SPARQL -> a3: sparqljs (CDN, loaded on demand) + ./sparql-to-a3.js
 * (the top-down structural compilation of doc/sparql-to-algae3.md sec. 3) */
window.compileSparql = async () => {
  const q = $("sparql").value;
  if (!q.trim()) { $("cstat").textContent = "nothing to compile"; return; }
  try {
    $("cstat").textContent = "compiling\u2026";
    const [SparqlJs, s2a3] = await Promise.all([
      import("https://esm.sh/sparqljs?bundle").then(m => m.default ?? m),
      import("./sparql-to-a3.js"),
    ]);
    const m = $("cmode").value;
    $("script").value = s2a3.compileText(q, SparqlJs.Parser, null, { mode: m });
    $("cstat").textContent = "compiled (" + (m === "bottomup"
      ? "sec. 4: scoped groups, fresh vars, absorbed OPTIONAL filters"
      : "sec. 3: top-down structural") + ")";
  } catch (e) {
    $("cstat").textContent = "compile error: " + e.message;
  }
};

/* run the whole pipeline under both modes; show final tables side by side */
window.compareModes = async () => {
  const script = $("script").value;
  if (!script.trim()) { setStatus("nothing to compare", true); return; }
  try {
    setStatus("comparing modes…");
    const td = await api("/load?mode=topdown", script).then(() => api("/run"));
    const bu = await api("/load?mode=bottomup", script).then(() => api("/run"));
    const key = s => JSON.stringify([s.vars, [...s.rows].map(r => r.join("")).sort()]);
    const same = key(td) === key(bu);
    $("compare").innerHTML =
      `<h2>Mode comparison — final result sets ${same
         ? '<span style="color:#2e7d32">(identical)</span>'
         : '<span style="color:#c62828">(DIVERGENT)</span>'}</h2>
       <div class="cmp">
         <div><b style="font-size:12px">topdown (correlated)</b>${rsTable(td, false)}</div>
         <div><b style="font-size:12px">bottomup (SPARQL algebra)</b>${rsTable(bu, false)}</div>
       </div>`;
    // restore the selected mode's fresh session
    prevRowCount = null;
    state = await api("/load?mode=" + $("mode").value, script);
    render();
    setStatus(same ? "modes agree on this pipeline"
                   : "modes DIVERGE — inspect with step + try", !same);
  } catch (e) { setStatus("server error: " + e.message, true); }
};

/* ── rendering ──────────────────────────────────────────────────────────── */

/** pretty-print an action-algebra s-expression with indentation */
function prettyAlg(s) {
  let out = "", depth = 0;
  const BREAKERS = new Set(["djoin","join","optjoin","leftjoin","notexists","minus",
                            "orelse","union","munion","diff","scope","pipeline",
                            "ask","collect","ingraph"]);
  const toks = s.match(/\(|\)|[^()\s]+|\s+/g) ?? [];
  let lineStart = true;
  for (let i = 0; i < toks.length; ++i) {
    const t = toks[i];
    if (/^\s+$/.test(t)) { if (!lineStart) out += " "; continue; }
    if (t === "(") {
      const head = toks[i+1] ?? "";
      if (BREAKERS.has(head) && !lineStart) { out += "\n" + "  ".repeat(depth); }
      out += "("; depth++; lineStart = false;
    } else if (t === ")") { depth--; out += ")"; lineStart = false; }
    else { out += t; lineStart = false; }
  }
  return out;
}

function classify(alg) {
  if (alg.startsWith("(load"))     return ["load",    "dataset construction (merge / named graph)"];
  if (alg.startsWith("(ask"))      return ["ask",     "pattern matching over the current result set"];
  if (alg.startsWith("(collect")) {
    if (alg.includes("(groupby"))  return ["collect", "GROUP BY + aggregate projection"];
    return ["collect", "projection / DISTINCT / ORDER / LIMIT"];
  }
  if (alg.startsWith("(filter"))   return ["filter",  "standalone filter (HAVING when after an aggregating collect)"];
  if (alg.startsWith("(bindings")) return ["bindings","inline table join (VALUES)"];
  if (alg.startsWith("(let"))      return ["let",     "computed binding (BIND)"];
  if (alg.startsWith("(test"))     return ["test",    "boolean probe (ASK) — result set unchanged"];
  if (alg.startsWith("(assert"))   return ["assert",  "template instantiation (CONSTRUCT/INSERT)"];
  if (alg.startsWith("(fwrule"))   return ["fwrule",  "forward rule to fixpoint"];
  return ["", ""];
}

function rsTable(s, withProofs) {
  if (!s.vars.length && !s.rows.length) return "<em style='font-size:12px'>(unit result set)</em>";
  if (!s.rows.length) return "<em style='font-size:12px'>(empty result set)</em>";
  const hdr = s.vars.map(v => `<th>${esc(v)}</th>`).join("");
  const body = s.rows.map((r, i) => {
    const tds = r.map(c => `<td class="${c ? "" : "nil"}">${c ? esc(c) : "∅"}</td>`).join("");
    const proofs = withProofs && s.proofs[i] && s.proofs[i].length
      ? `<tr class="proofrow"><td colspan="${s.vars.length}">⊢ ${s.proofs[i].map(esc).join(" · ")}</td></tr>`
      : "";
    return `<tr>${tds}</tr>${proofs}`;
  }).join("");
  return `<table class="sp"><thead><tr>${hdr}</tr></thead><tbody>${body}</tbody></table>`;
}

function render() {
  if (!state) return;
  $("modeTag").textContent = "mode: " + state.mode;

  $("pipeline").innerHTML = state.actions.map((a, i) => {
    const cls = i < state.pos ? "done" : i === state.pos && !state.done ? "now" : "";
    const [kind, gloss] = classify(a);
    return `<div class="act ${cls}" onclick="runTo(${i})" title="${esc(gloss)}">
              <span class="ord">${i}</span>
              <span class="alg">${esc(prettyAlg(a))}</span>
            </div>`;
  }).join("") || "<em style='font-size:12px;color:#999'>no actions</em>";

  $("rowcount").textContent = "(" + state.rows.length + " row" + (state.rows.length === 1 ? "" : "s") + ")";
  if (prevRowCount !== null && prevRowCount !== state.rows.length) {
    const grow = state.rows.length > prevRowCount;
    $("delta").innerHTML = `rows: ${prevRowCount} → <b class="${grow ? "grow" : "shrink"}">${state.rows.length}</b>`;
  } else
    $("delta").innerHTML = "";
  $("rswrap").innerHTML = rsTable(state, $("showProofs").checked);

  const extras = [];
  if (state.asserted.length)
    extras.push(`<details><summary>${state.asserted.length} asserted triple(s)</summary><pre>` +
                state.asserted.map(esc).join("\n") + "</pre></details>");
  if (state.actions.some(a => a.startsWith("(test")))
    extras.push(`test: <b>${state.lastTest ? "yes" : "no"}</b>`);
  $("extras").innerHTML = extras.join(" ");
}
</script>
</body>
</html>