<commit_before><!doctype html>
<head>
<meta charset="utf-8">
<title>Incremental Packrat Parsing</title>
<link rel="stylesheet" href="third_party/codemirror-5.23.0/lib/codemirror.css">
</head>
<style>
  body {
    color: #333;
    font-family: Menlo, Monaco, monospace;
    margin: 20px 20px 20px 60px;
  }
  #editorContainer {
    border: 3px solid transparent;
    margin-bottom: 8px;
    transition: border-color .25s ease-in-out;
  }
  #editorContainer.in-progress {
    border: 3px solid #f0f0f0;
  }
  #editorContainer.failed {
    border: 3px solid #D9544F;
  }

  .CodeMirror {
    border: 1px solid #ddd;
    font-family: inherit;
    font-size: 33px;
    height: auto;
  }
  pre.CodeMirror-line {
    padding: 0 1px;
  }
  #memoIndices {
    display: flex;
    font-size: 12px;
    margin: 4px 2px;
  }
  #memoIndices .char {
    background-color: #f0f0f0;
    border: 1px solid #bbb;
    box-sizing: border-box;
    color: #999;
    cursor: default;
    display: inline-block;
    font-size: 9px;
    height: 14px;
    line-height: 14px;
    margin-right: 1px;
    text-align: center;
    width: 19px;
    vertical-align: middle;
  }
  #memoIndices .char:hover {
    background-color: #999;
    border-color: #999;
    color: white;
  }
  #memoEntries {
    padding: 0 3px 6px 3px;
    position: relative;  /* For positioning #stabbedRegion */
  }
  
  .memoContents {
    margin-bottom: 10px;
  }

  .extents {
    display: flex;
    flex-direction: row;
    margin: 1px 0;
    padding: 0 2px;
  }

  .ruleName {
    color: #666;
    /* This must match the font used on `_canvasCtxForMeasuring` below. */
    font: 12px system, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    white-space: nowrap;
  }

  .matched,
  .examined {
    box-sizing: border-box;
    transition: background-color .25s ease-in-out;
  }
  .matched.velocity-animating,
  .examined.velocity-animating {
    transition: none;
  }

  .matched {
    background-color: #aaa;
  }
  .new .matched {
    background-color: hsl(207, 66%, 59%);
  }
  .examined {
    background-color: #ddd;
  }
  .new .examined {
    background-color: hsla(205, 69%, 49%, 0.3);
  }

  .failed {
    color: #DB524B;
  }
  #stabbedRegion {
    bottom: 0;
    background-color: hsla(245, 72%, 75%, 0.35);
    border: 0 solid hsla(245, 72%, 75%, 0.8);
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
    position: absolute;
    top: 0;
  }
</style>

<div id="main"></div>

<script src="third_party/codemirror-5.23.0/lib/codemirror.js"></script>
<script src="third_party/velocity-animate-1.4.2.js"></script>
<script src="third_party/vue-2.1.10.js"></script>
<script src="src/standard.js"></script>
<script src="src/incremental.js"></script>

<script>

  // Helpers
  // -------

  const canvasCtxForMeasuring = document.createElement('canvas').getContext('2d');
  canvasCtxForMeasuring.font =
      '12px system, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif';

  function measureRuleNameText(text) {
    var metrics = canvasCtxForMeasuring.measureText(text);
    return metrics.width + 2;
  }

  function charWidth(count) {
    return (count * 20);
  }

  function assert(cond, optMessage) {
    if (!cond) {<commit_msg>added grammar to memo-viz.html, to avoid confusion, and updated links so that the scripts work in the new location<commit_after><!doctype html>
<head>
<meta charset="utf-8">
<title>Incremental Packrat Parsing</title>
<link rel="stylesheet" href="../third_party/codemirror-5.23.0/lib/codemirror.css">
</head>
<style>
  body {
    color: #333;
    font-family: Menlo, Monaco, monospace;
    margin: 20px 20px 20px 60px;
  }
  #editorContainer {
    border: 3px solid transparent;
    margin-bottom: 8px;
    transition: border-color .25s ease-in-out;
  }
  #editorContainer.in-progress {
    border: 3px solid #f0f0f0;
  }
  #editorContainer.failed {
    border: 3px solid #D9544F;
  }

  .CodeMirror {
    border: 1px solid #ddd;
    font-family: inherit;
    font-size: 33px;
    height: auto;
  }
  pre.CodeMirror-line {
    padding: 0 1px;
  }
  #memoIndices {
    display: flex;
    font-size: 12px;
    margin: 4px 2px;
  }
  #memoIndices .char {
    background-color: #f0f0f0;
    border: 1px solid #bbb;
    box-sizing: border-box;
    color: #999;
    cursor: default;
    display: inline-block;
    font-size: 9px;
    height: 14px;
    line-height: 14px;
    margin-right: 1px;
    text-align: center;
    width: 19px;
    vertical-align: middle;
  }
  #memoIndices .char:hover {
    background-color: #999;
    border-color: #999;
    color: white;
  }
  #memoEntries {
    padding: 0 3px 6px 3px;
    position: relative;  /* For positioning #stabbedRegion */
  }
  
  .memoContents {
    margin-bottom: 10px;
  }

  .extents {
    display: flex;
    flex-direction: row;
    margin: 1px 0;
    padding: 0 2px;
  }

  .ruleName {
    color: #666;
    /* This must match the font used on `_canvasCtxForMeasuring` below. */
    font: 12px system, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    white-space: nowrap;
  }

  .matched,
  .examined {
    box-sizing: border-box;
    transition: background-color .25s ease-in-out;
  }
  .matched.velocity-animating,
  .examined.velocity-animating {
    transition: none;
  }

  .matched {
    background-color: #aaa;
  }
  .new .matched {
    background-color: hsl(207, 66%, 59%);
  }
  .examined {
    background-color: #ddd;
  }
  .new .examined {
    background-color: hsla(205, 69%, 49%, 0.3);
  }

  .failed {
    color: #DB524B;
  }
  #stabbedRegion {
    bottom: 0;
    background-color: hsla(245, 72%, 75%, 0.35);
    border: 0 solid hsla(245, 72%, 75%, 0.8);
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
    box-sizing: border-box;
    position: absolute;
    top: 0;
  }
</style>

<div style="padding-bottom: 20pt;">
  <h3>Grammar:</h3>
  <pre style="margin-left: 20pt;">expr = num ”+” num
     | num ”-” num

num = digit+

digit = ”0”..”9”</pre>
</div>

<div id="main"></div>

<script src="../third_party/codemirror-5.23.0/lib/codemirror.js"></script>
<script src="../third_party/velocity-animate-1.4.2.js"></script>
<script src="../third_party/vue-2.1.10.js"></script>
<script src="standard.js"></script>
<script src="incremental.js"></script>

<script>

  // Helpers
  // -------

  const canvasCtxForMeasuring = document.createElement('canvas').getContext('2d');
  canvasCtxForMeasuring.font =
      '12px system, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif';

  function measureRuleNameText(text) {
    var metrics = canvasCtxForMeasuring.measureText(text);
    return metrics.width + 2;
  }

  function charWidth(count) {
    return (count * 20);
  }

  function assert(cond, optMessage) {
    if (!cond) {
{'fraction_non_alphanumeric': 0.15087926703118074, 'fraction_numerical': 0.04492389537461209, 'mean_word_length': 2.900864553314121, 'pattern_counts': {'":': 0, '<': 53, '<?xml version=': 0, '>': 53, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2177945', 'n_tokens_mistral': 2804, 'n_tokens_neox': 2523, 'n_words': 556}