[dingus] Status and loading and whatnot

dingus/dingus.html

@@ -18,6 +18,9 @@
       <div class="grammar-container">
         <textarea id="grammar" name="grammar" class="main-textarea"></textarea>
       </div>
+      <div class="status">
+        <span id="status-line">Loading python...</span>
+      </div>
 
       <div class="input-container">
         <textarea id="input" name="input" class="main-textarea"></textarea>
@@ -28,6 +31,6 @@
       </div>
     </div>
 
-    <script src="./dingus.js"></script>
+    <script type="module" src="./dingus.js"></script>
   </body>
 </html>

dingus/dingus.js

@@ -1,6 +1,8 @@
 let pending_grammar = null;
 let next_grammar = null;
 
+const STATUS = document.getElementById("status-line");
+
 function submit_grammar(code) {
   if (pending_grammar) {
     console.log("Grammar still pending, parking it");
@@ -16,6 +18,8 @@ const worker = new Worker('worker.js');
 worker.onmessage = (e) => {
   const message = e.data;
   if (message.kind === "grammar_status") {
+    STATUS.innerText = message.message;
+
     if ((message.status === "ok") || (message.status === "error")) {
       pending_grammar = null;
       if (next_grammar) {

dingus/style.css

@@ -8,7 +8,7 @@ body {
 .page-container {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
-  grid-template-rows: 4rem 1fr;
+  grid-template-rows: 4rem 1fr 2em;
   width: 100%;
   height: 100%;
 }
@@ -17,12 +17,32 @@ body {
   grid-column: 1;
   grid-row: 2;
   padding: 0.25rem;
+
+  /* Establishing minimum sizes here causes the codemirror CSS to work */
+  min-height: 0;
+  min-width: 0;
+}
+
+.status {
+  grid-column: 1 / 3;
+  grid-row: 3;
+  padding: 0.25rem;
 }
 
 .input-container {
   grid-column: 2;
   grid-row: 2;
   padding: 0.25rem;
+
+  /* Establishing minimum sizes here causes the codemirror CSS to work */
+  min-height: 0;
+  min-width: 0;
+}
+
+.input-status {
+  grid-column: 2;
+  grid-row: 3;
+  padding: 0.25rem;
 }
 
 .results-container {

dingus/worker.js

@@ -10,9 +10,10 @@ const dingus_module = {
     postMessage({kind: "grammar_status", status: "loading", message});
   },
 
-  post_grammar_loaded: function () {
-    console.log("Grammar Loaded");
-    postMessage({kind: "grammar_status", status: "ok", message: "Grammar loaded"});
+  post_grammar_loaded: function (name) {
+    const msg = "Grammar '" + name + "' loaded";
+    console.log(msg);
+    postMessage({kind: "grammar_status", status: "ok", message: msg});
   },
 
   post_grammar_error: function(error) {
@@ -22,17 +23,18 @@ const dingus_module = {
 };
 
 async function setup_python() {
-  console.log("Loading pyodide....");
+  dingus_module.post_grammar_status("Loading python....");
   const pyodide = await loadPyodide({
     packages: ["micropip"],
   });
   pyodide.setStdout({ batched: (msg) => console.log(msg) }); // TODO: I know this is an option above.
 
   // TODO: Do I actually want micropip? Probably not?
-  console.log("Installing parser package...");
+  dingus_module.post_grammar_status("Installing parser package...");
   const micropip = pyodide.pyimport("micropip");
   await micropip.install(PARSER_PACKAGE);
 
+  dingus_module.post_grammar_status("Configuring dingus...");
   pyodide.registerJsModule("dingus", dingus_module);
 
   pyodide.runPython(`
@@ -56,7 +58,7 @@ def eval_grammar(code):
 
       if isinstance(value, parser.Grammar):
         if grammar is None:
-          grammar = value()
+          grammar = value
         else:
           raise Exception("More than one Grammar found in the file")
 
@@ -65,12 +67,12 @@ def eval_grammar(code):
 
     # TODO: Build the table.
 
-    dingus.post_grammar_loaded()
+    dingus.post_grammar_loaded(grammar.name)
   except Exception as e:
     dingus.post_grammar_error(f"{e}")
 `);
 
-  console.log("Loaded!");
+  dingus_module.post_grammar_status("Ready.");
   self.pyodide = pyodide;
   return pyodide;
 }
@@ -80,8 +82,7 @@ const pyodide_promise = setup_python();
 async function load_grammar_module(code) {
   const pyodide = self.pyodide;
 
-  console.log("Running...");
-
+  // console.log("Running...");
   const my_fn = pyodide.globals.get("eval_grammar");
   my_fn(code);
   my_fn.destroy();