[dingus] Render the output

dingus/dingus.html

@@ -27,7 +27,7 @@
       </div>
 
       <div class="results-container">
-        <textarea readonly id="output" name="output" class="main-textarea"></textarea>
+        <div id="output-root" />
       </div>
     </div>
 

dingus/dingus.js

@@ -12,7 +12,8 @@ function chain_document_submit(kind, editor, on_success) {
   let pending = null;
   let next = null;
 
-  function do_submit(document) {
+  function do_submit() {
+    const document = editor.doc.getValue();
     if (window.localStorage) {
       window.localStorage.setItem(kind, document);
     }
@@ -36,7 +37,8 @@ function chain_document_submit(kind, editor, on_success) {
       worker.postMessage({kind, data: document});
       console.log("Posted another document");
     }
-    if (message.kind === "ok" && on_success) {
+
+    if (message.status === "ok" && on_success) {
       on_success(message);
     }
   }
@@ -47,7 +49,7 @@ function chain_document_submit(kind, editor, on_success) {
     clearTimeout(change_timer_id);
     change_timer_id = setTimeout(() => {
       change_timer_id = null;
-      do_submit(editor.doc.getValue());
+      do_submit();
     }, 100);
   });
 
@@ -57,6 +59,8 @@ function chain_document_submit(kind, editor, on_success) {
       editor.doc.setValue(value);
     }
   }
+
+  return do_submit;
 }
 
 const worker = new Worker('worker.js');
@@ -71,28 +75,66 @@ worker.onmessage = (e) => {
   STATUS.innerText = message.message;
 };
 
+let grammar_editor = null;
+let input_editor = null;
+
 function render_parse_results(message) {
-  // What
+  console.log("WHAT?");
+
+  function render_tree_node(parent, node) {
+    const tree_div = document.createElement("div");
+    tree_div.classList.add("parsed-node");
+
+    const node_label = document.createElement("a");
+    node_label.innerText = node.name;
+    node_label.setAttribute("href", "#");
+    node_label.onclick = () => {
+      const doc = input_editor.doc;
+      doc.setSelection(
+        doc.posFromIndex(node.start),
+        doc.posFromIndex(node.end),
+        {scroll: true},
+      );
+    };
+    tree_div.appendChild(node_label);
+
+    if (node.kind === "tree") {
+      tree_div.classList.add("parsed-tree");
+      for (const child of node.children) {
+        render_tree_node(tree_div, child);
+      }
+    } else {
+      tree_div.classList.add("parsed-token");
+    }
+    parent.appendChild(tree_div);
+  }
+
+  const root = document.getElementById("output-root");
+  root.innerHTML = "";
+  render_tree_node(root, message.tree);
 }
 
 function setup_editors() {
-  const grammar_editor = CodeMirror.fromTextArea(
+  grammar_editor = CodeMirror.fromTextArea(
     document.getElementById("grammar"),
     {
       lineNumbers: true,
       mode: "python",
-      value: "from parser import Grammar\n\nclass MyGrammar(Grammar):\n    pass\n",
     },
   );
-  chain_document_submit("grammar", grammar_editor);
 
-  const input_editor = CodeMirror.fromTextArea(
+  input_editor = CodeMirror.fromTextArea(
     document.getElementById("input"),
     {
       lineNumbers: true,
     },
   );
-  chain_document_submit("input", input_editor, render_parse_results);
+
+  const submit_input = chain_document_submit(
+    "input", input_editor, render_parse_results);
+
+  chain_document_submit(
+    "grammar", grammar_editor, submit_input);
 }
 
 setup_editors();

dingus/style.css

@@ -49,6 +49,12 @@ body {
   grid-column: 3;
   grid-row: 2;
   padding: 0.25rem;
+
+  overflow-y: scroll;
+}
+
+.parsed-node {
+  margin-left: 1rem;
 }
 
 .main-textarea {

dingus/worker.js

@@ -118,6 +118,7 @@ def eval_grammar(code):
     LEXER = grammar.compile_lexer()
 
     dingus.post_grammar_loaded(grammar.name)
+
   except Exception as e:
     traceback.print_exc()
     dingus.post_grammar_error(f"{e}")
@@ -125,6 +126,7 @@ def eval_grammar(code):
 def tree_to_js(tree):
   if tree is None:
     return None
+
   elif isinstance(tree, runtime.Tree):
     return {
       "kind": "tree",
@@ -133,9 +135,11 @@ def tree_to_js(tree):
       "end": tree.end,
       "children": [tree_to_js(child) for child in tree.children],
     }
+
   else:
     return {
       "kind": "token",
+      "name": tree.kind,
       "start": tree.start,
       "end": tree.end,
     }