From 05053f62ea103fc11f55895ea6758487af7bfc9b Mon Sep 17 00:00:00 2001 From: yhirose Date: Sat, 4 Jun 2022 15:13:13 -0400 Subject: [PATCH] Imporoved playground UI design --- docs/index.html | 28 ++++++++++--------- docs/index.js | 31 +++++++++++++++------ docs/native.wasm | Bin 414699 -> 414604 bytes docs/style.css | 69 ++++++++++++++++++++++++----------------------- peglib.h | 36 +++++++++++++++---------- 5 files changed, 95 insertions(+), 69 deletions(-) diff --git a/docs/index.html b/docs/index.html index 6703ee9..d39e937 100644 --- a/docs/index.html +++ b/docs/index.html @@ -8,33 +8,35 @@
    +
  • Grammar
    • -
  • Valid
{{syntax}}
    +
  • Source Code
    • -
  • Valid
    • +
  • +
      +
      • +
      • +
      • +
    + 
{{source}}
-
-
-
-
    -
    • -
    • -
-
AST
+
AST

-    
Optimized AST    
+    
Optimized AST    
       mode: 
     

     

-    
Profile

-    

+    
Profile

+    

+
+    

   

 

 
diff --git a/docs/index.js b/docs/index.js
index 9a02dc7..d85b46c 100644
--- 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',
diff --git a/docs/native.wasm b/docs/native.wasm
index dab6b6e82fa8e1154bc006182301dcbe7869fc57..b87a7ec990f974392c310c4c3b87565bab3cff4d 100755
GIT binary patch
delta 3273
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
A761SM

delta 3366
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

diff --git a/docs/style.css b/docs/style.css
index 4232db7..ddf41e1 100644
--- 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;
 }
diff --git a/peglib.h b/peglib.h
index facd906..05aa778 100644
--- 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;
           }
         }
       },