Implement trace view

fbbdev · Jul 12, 2023 · 42941b4 · 42941b4
1 parent 9618d21
commit 42941b4
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 11 deletions.
diff --git a/dist/css/app.css b/dist/css/app.css
@@ -104,7 +104,7 @@ body > nav > .uk-tab::before {
     text-align: right;
 }
 
-#table-view th.symbol, #table-view th.state, #table-view td, #tape {
+#table-view th.symbol, #table-view th.state, #table-view td, #trace-view td, #tape {
     font-family: 'Consolas', 'Monaco', 'Courier', 'Courier New', monospace;
     font-size: 1em;
     font-weight: normal;
@@ -124,6 +124,27 @@ body > nav > .uk-tab::before {
     text-decoration: underline;
 }
 
+#trace-view .ctr {
+    text-align: center;
+}
+
+#trace-view tbody tr {
+    counter-increment: trace-step-number;
+}
+
+#trace-view tr.empty td {
+    text-align: center;
+    color: #888;
+}
+
+#trace-view td.number {
+    text-align: right;
+}
+
+#trace-view td.number::after {
+    content: counter(trace-step-number);
+}
+
 #editor {
     position: relative;
 

diff --git a/dist/index.html b/dist/index.html
@@ -31,7 +31,23 @@
             <ul class="uk-switcher">
                 <li id="graph-view"></li>
                 <li id="table-view"></li>
-                <li id="trace-view"></li>
+                <li id="trace-view">
+                    <table class="uk-table uk-table-middle uk-table-divider uk-table-striped uk-table-hover uk-table-small">
+                        <thead>
+                            <tr>
+                                <th class="uk-table-shrink ctr" title="Step number">#</th>
+                                <th class="uk-table-shrink" title="Source state">State</th>
+                                <th class="uk-table-shrink ctr" title="Symbol under head">Head</th>
+                                <th class="uk-table-shrink ctr">Write</th>
+                                <th class="uk-table-shrink ctr">Move</th>
+                                <th title="Next state">Next</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="empty"><td colspan="6">No steps performed</td></tr>
+                        </tbody>
+                    </table>
+                </li>
             </ul>
         </div>
         <div id="editor">
@@ -74,10 +90,10 @@
             <div class="grow" style="text-align: right;">
                 <select id="stepping-delay" title="Step every">
                     <option value="0">None</option>
-                    <option value="10">10 ms</option>
                     <option value="50">50 ms</option>
-                    <option value="250">250 ms</option>
-                    <option value="500" selected>500 ms</option>
+                    <option value="100">100 ms</option>
+                    <option value="250" selected>250 ms</option>
+                    <option value="500">500 ms</option>
                     <option value="1000">1 s</option>
                 </select>&nbsp;&nbsp;
                 <a href="#" data-action="clear" class="uk-icon-link" title="Clear tape"><i class="fa-solid fa-eraser"></i></a>&nbsp;&nbsp;

diff --git a/src/index.mjs b/src/index.mjs
@@ -215,6 +215,17 @@ const TABLE =
 
 Mustache.parse(TABLE);
 
+const TRACE_EMPTY = `<tr class="empty"><td colspan="6">No steps performed</td></tr>`;
+const TRACE_ROW =
+    `<td class="uk-table-shrink number"></td>
+    <td class="uk-table-shrink">{{state}}</td>
+    <td class="uk-table-shrink ctr">{{read}}</td>
+    <td class="uk-table-shrink ctr">{{write}}</td>
+    <td class="uk-table-shrink ctr">{{move}}</td>
+    <td>{{next}}</td>`;
+
+Mustache.parse(TRACE_ROW);
+
 const LOOP = {
     arrowStrikethrough: true,
     smooth: {
@@ -242,7 +253,7 @@ class App {
 
         this.trace = [];
 
-        this.steppingDelay = 500;
+        this.steppingDelay = 250;
         this.steppingInterval = null;
     }
 
@@ -348,7 +359,7 @@ class App {
             return;
         }
 
-        this.trace.push(step);
+        this.pushToTrace(step);
 
         const prevTransition = step;
         const headCellIndex = this.head - this.tapeCellBase;
@@ -364,7 +375,7 @@ class App {
             return;
 
         const prevTransition = this.nextStep;
-        const lastStep = this.trace.pop();
+        const lastStep = this.popFromTrace();
 
         this.move(-lastStep.move);
         const headCellIndex = this.head - this.tapeCellBase;
@@ -410,7 +421,7 @@ class App {
 
         this.spec = spec;
         this.transitionMatrix = tm;
-        this.trace = [];
+        this.clearTrace();
 
         if (prevBlank && prevBlank !== spec.blank) {
             // update tape
@@ -707,6 +718,39 @@ class App {
         this.edges.update(changedEdges);
     }
 
+    pushToTrace(step) {
+        this.trace.push(step);
+
+        if (this.trace.length === 1)
+            this.traceTable.innerHTML = "";
+
+        const row = document.createElement('tr');
+        row.innerHTML = Mustache.render(TRACE_ROW, {
+            __proto__: step,
+            move: MOVE_NAME[step.move]
+        });
+        this.traceTable.appendChild(row);
+
+        if (this.traceView.matches('.uk-active'))
+            row.scrollIntoView(false);
+    }
+
+    popFromTrace() {
+        const step = this.trace.pop();
+
+        if (this.trace.length <= 0)
+            this.traceTable.innerHTML = TRACE_EMPTY;
+        else
+            this.traceTable.removeChild(this.traceTable.lastChild);
+
+        return step;
+    }
+
+    clearTrace() {
+        this.trace = [];
+        this.traceTable.innerHTML = TRACE_EMPTY;
+    }
+
     updateTape(resize = false) {
         const tapeCellCount = Math.max(5, 1 + 2*(Math.floor(((this.tape.clientWidth/2) - 16)/32) + 2));
 
@@ -825,7 +869,7 @@ class App {
 
             case "reset":
             case "stop":
-                this.trace = [];
+                this.clearTrace();
                 this.changeState(this.spec.init);
 
                 if (action === "stop")
@@ -893,8 +937,11 @@ class App {
                 this.resume();
         };
 
+        this.steppingDelaySelector.dispatchEvent('change');
+
         this.graphView = document.getElementById('graph-view');
         this.tableView = document.getElementById('table-view');
+        this.traceView = document.getElementById('trace-view');
 
         this.nodes = new DataSet([]);
         this.edges = new DataSet([]);
@@ -1037,7 +1084,7 @@ class App {
         });
 
         this.graph.on('doubleClick', ev => {
-            this.trace = [];
+            this.clearTrace();
             this.changeState(ev.nodes[0] === 'init' ? this.spec.init : ev.nodes[0]);
         });
 
@@ -1053,6 +1100,8 @@ class App {
             this.changeState(stateCell.dataset.state);
         }
 
+        this.traceTable = this.traceView.querySelector('tbody');
+
         this.editor = document.getElementById('editor');
         this.editorErrorContainer = this.editor.querySelector('.error-container');
         this.editorHighlights = this.editor.querySelector('.highlights');