Imporoved playground UI design

2024-12-22 11:55:30 +00:00 · 2022-06-04 15:13:13 -04:00 · 2022-06-04 15:13:13 -04:00 · 05053f62ea
commit 05053f62ea
parent 5e9ca02b3c
5 changed files with 95 additions and 69 deletions
--- a/docs/index.html
+++ b/docs/index.html
@ -8,33 +8,35 @@
 <div id="main">
  <div class="editor-container">
    <ul class="editor-header">
+      <li><span><span id="grammar-validation" class="validation"></span></span></li>
      <li><span>Grammar</span></li>
-      <li class="validation-indicator"><span id="grammar-validation" class="editor-validation">Valid</span></li>
    </ul>
    <pre id="grammar-editor" class="editor-area">{{syntax}}</pre>
    <div id="grammar-info" class="editor-info"></div>
  </div>
  <div class="editor-container">
    <ul class="editor-header">
+      <li><span><span id="code-validation" class="validation"></span></span></li>
      <li><span>Source Code</span></li>
-      <li class="validation-indicator"><span id="code-validation" class="editor-validation">Valid</span></li>
+      <li class="editor-options">
+        <ul class="editor-header-options">
+          <li class="option"><input id="packrat" type="checkbox"><label>Packrat</label></li>
+          <li class="option"><input id="auto-refresh" type="checkbox"><label>Auto Refresh</label></li>
+          <li class="option"><button id="parse" class="parse">Parse</button></li>
+        </ul>
+      </li>
    </ul>
    <pre id="code-editor" class="editor-area">{{source}}</pre>
-    <div id="code-info" class="editor-info"></div>
-  </div>
-  <div class="editor-container">
-    <ul class="editor-header right-align">
-      <li class="option"><span><input id="packrat" type="checkbox"><label>Packrat</label></span></li>
-      <li class="option"><span><input id="auto-refresh" type="checkbox"><label>Auto Refresh</label><button id="parse" class="parse">Parse</button></span></li>
-    </ul>
-    <div class="editor-sub-header">AST</div>
+    <div class="editor-sub-header"><input id="show-ast" class="show-toggle" type="checkbox">AST</div>
    <pre id="code-ast" class="editor-area"></pre>
-    <div class="editor-sub-header">Optimized AST&nbsp;&nbsp;&nbsp;&nbsp;
+    <div class="editor-sub-header"><input id="show-ast-optimized" class="show-toggle" type="checkbox">Optimized AST&nbsp;&nbsp;&nbsp;&nbsp;
      mode:&nbsp;<select id="opt-mode" type="checkbox"><option value="all">All</option><option value="only">Only</option></select>
    </div>
    <pre id="code-ast-optimized" class="editor-area"></pre>
-    <div class="editor-sub-header">Profile</div>
-    <div id="profile" class="editor-area"></div>
+    <div class="editor-sub-header"><input id="show-profile" class="show-toggle" type="checkbox">Profile</div>
+    <div id="code-profile" class="editor-area"></div>
+
+    <div id="code-info" class="editor-info"></div>
  </div>
 </div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.2/ace.js"></script>
--- a/docs/index.js
+++ b/docs/index.js
@ -24,7 +24,7 @@ const code = setupEditorArea("code-editor", "codeText");

 const codeAst = setupInfoArea("code-ast");
 const codeAstOptimized = setupInfoArea("code-ast-optimized");
-const profile = setupInfoArea("profile");
+const codeProfile = setupInfoArea("code-profile");

 $('#opt-mode').val(localStorage.getItem('optimazationMode') || 'all');
 $('#packrat').prop('checked', localStorage.getItem('packrat') === 'true');
@ -80,27 +80,26 @@ function parse() {
  $codeValidation.hide();
  codeAst.setValue('');
  codeAstOptimized.setValue('');
-  profile.setValue('');
+  codeProfile.setValue('');

  if (grammarText.length === 0) {
   return;
  }

  const mode = optimazationMode == 'all';
-  console.log({packrat});
  const data = JSON.parse(Module.lint(grammarText, codeText, mode, packrat));

  if (data.grammar_valid) {
-    $grammarValidation.removeClass('editor-validation-invalid').text('Valid').show();
+    $grammarValidation.removeClass('validation-invalid').show();

    codeAst.insert(data.ast);
    codeAstOptimized.insert(data.astOptimized);
-    profile.insert(data.profile);
+    codeProfile.insert(data.profile);

    if (data.source_valid) {
-      $codeValidation.removeClass('editor-validation-invalid').text('Valid').show();
+      $codeValidation.removeClass('validation-invalid').show();
    } else {
-      $codeValidation.addClass('editor-validation-invalid').text('Invalid').show();
+      $codeValidation.addClass('validation-invalid').show();
    }

    if (data.code.length > 0) {
@ -108,7 +107,7 @@ function parse() {
      $codeInfo.html(html);
    }
  } else {
-    $grammarValidation.addClass('editor-validation-invalid').text('Invalid').show();
+    $grammarValidation.addClass('validation-invalid').show();
  }

  if (data.grammar.length > 0) {
@ -153,6 +152,22 @@ $('#auto-refresh').on('change', () => {
 });
 $('#parse').on('click', parse);

+// Show windows
+function setupToolWindow(lsKeyName, buttonSel, codeSel) {
+  let show = localStorage.getItem(lsKeyName) === 'true';
+  $(buttonSel).prop('checked', show);
+  $(codeSel).css({ 'display': show ? 'block' : 'none' });
+
+  $(buttonSel).on('change', () => {
+    show = !show;
+    localStorage.setItem(lsKeyName, show);
+    $(codeSel).css({ 'display': show ? 'block' : 'none' });
+  });
+}
+setupToolWindow('show-ast', '#show-ast', '#code-ast');
+setupToolWindow('show-ast-optimized', '#show-ast-optimized', '#code-ast-optimized');
+setupToolWindow('show-profile', '#show-profile', '#code-profile');
+
 // Show page
 $('#main').css({
  'display': 'flex',
--- a/docs/native.wasm
+++ b/docs/native.wasm
--- a/docs/style.css
+++ b/docs/style.css
@ -19,42 +19,54 @@ body {
  width: 100%;
  display: flex;
  flex-direction: column;
-  margin: 8px;
+  margin: 6px;
 }
 .editor-container:first-child {
  margin-right: 0;
 }
 .editor-header {
  display: flex;
-  height: 48px;
-  padding: 4px 8px;
+  margin: 0 2px;
+}
+.editor-header > li {
+  height: 32px;
+  line-height: 24px;
 }
 .editor-header > li > span {
-  height: 38px;
-  line-height: 38px;
+  margin-right: 6px;
 }
-.editor-header > li > a {
-  height: 38px;
-  line-height: 38px;
-  padding: .3em .5em;
-  border: 1px solid red;
-}
-.editor-header > li.validation-indicator {
+.editor-options {
  margin-left: auto;
 }
-.editor-header.right-align {
-  margin-left: auto;
+.editor-header-options {
+  display: flex;
 }
-.editor-validation {
-  padding: 9px 11px;
-  color: green;
+.validation {
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  margin: 2px 0;
+  border-radius: 50%;
  background-color: lightgreen;
-  border-radius: 5px;
 }
-.editor-validation-invalid {
-  color: red;
+.validation-invalid {
  background-color: pink;
 }
+.option {
+  margin-right: 8px;
+}
+.option:last-child {
+  margin-right: 0;
+}
+.option input[type=checkbox] {
+  margin-right: 4px;
+}
+.option .parse {
+  padding-left: 8px;
+  padding-right: 8px;
+  height: 24px;
+  cursor: pointer;
+}
 .editor-area {
  flex: 1;
  border: 1px solid lightgray;
@ -73,19 +85,8 @@ body {
  background-color: lightyellow;
 }
 .editor-sub-header {
-  padding: 4px 8px;
+  padding: 4px;
 }
-.option {
-  margin-right: 12px;
-}
-.option:last-child {
-  margin-right: 0;
-}
-.option > span > * {
-  margin-right: 8px;
-}
-.option .parse {
-  cursor: pointer;
-  padding: 9px 11px;
-  margin-right: 0;
+.show-toggle {
+  margin-right: 6px;
 }
--- a/peglib.h
+++ b/peglib.h
@ -4548,32 +4548,40 @@ inline void enable_profiling(parser &parser, std::ostream &os) {
          } else {
            stat.fail++;
          }
+
          if (index == 0) {
-            size_t id = 0;
+            char buff[BUFSIZ];
+
+            size_t total_success = 0;
+            size_t total_fail = 0;
+            for (auto &[name, success, fail] : stats.items) {
+              total_success += success;
+              total_fail += fail;
+            }
+
            os << "  id       total      %     success        fail  "
                  "definition"
               << std::endl;
-            size_t total_total, total_success = 0, total_fail = 0;
-            char buff[BUFSIZ];
+
+            auto grand_total = total_success + total_fail;
+            sprintf(buff, "%4s  %10lu  %5s  %10lu  %10lu  %s", "", grand_total,
+                    "", total_success, total_fail, "Total counters");
+            os << buff << std::endl;
+
+            sprintf(buff, "%4s  %10s  %5s  %10.2f  %10.2f  %s", "", "", "",
+                    total_success * 100.0 / grand_total,
+                    total_fail * 100.0 / grand_total, "% success/fail");
+            os << buff << std::endl;
+
+            size_t id = 0;
            for (auto &[name, success, fail] : stats.items) {
              auto total = success + fail;
-              total_success += success;
-              total_fail += fail;
              auto ratio = total * 100.0 / stats.total;
              sprintf(buff, "%4zu  %10lu  %5.2f  %10lu  %10lu  %s", id, total,
                      ratio, success, fail, name.c_str());
              os << buff << std::endl;
              id++;
            }
-            os << std::endl;
-            total_total = total_success + total_fail;
-            sprintf(buff, "%4s  %10lu  %5s  %10lu  %10lu  %s", "", total_total,
-                    "", total_success, total_fail, "Total counters");
-            os << buff << std::endl;
-            sprintf(buff, "%4s  %10s  %5s  %10.2f  %10.2f  %s", "", "", "",
-                    total_success * 100.0 / total_total,
-                    total_fail * 100.0 / total_total, "% success/fail");
-            os << buff << std::endl;
          }
        }
      },