first commit

regchiu · Apr 10, 2024 · 79b10d5 · 79b10d5
commit 79b10d5
Show file tree

Hide file tree

Showing 4 changed files with 2,390 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+# JSON Diff Demo
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,12 @@
+.flex-row {
+  display: flex;
+  gap: 20px;
+}
+
+.width-half {
+  width: 50%;
+}
+
+.width-full {
+  width: 100%;
+}
diff --git a/diff.html b/diff.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>JSON Diff Demo</title>
+  <script src="./js/diff_match_patch_uncompressed.js"></script>
+  <link rel="stylesheet" href="./css/style.css">
+</head>
+
+<body>
+  <h1>JSON Diff Demo</h1>
+  <form action="#" onsubmit="event.preventDefault()">
+    <div class="flex-row">
+      <div class="width-half">
+        <h2>Text Version 1:</h2>
+        <textarea id="text1" class="width-full" rows="10">{"Aidan Gillen": {"array": ["Game of Thron\"es","The Wire"],"string": "some string","int": 2,"aboolean": true, "boolean": true,"object": {"foo": "bar","object1": {"new prop1": "new prop value"},"object2": {"new prop1": "new prop value"},"object3": {"new prop1": "new prop value"},"object4": {"new prop1": "new prop value"}}},"Amy Ryan": {"one": "In Treatment","two": "The Wire"},"Annie Fitzgerald": ["Big Love","True Blood"],"Anwan Glover": ["Treme","The Wire"],"Alexander Skarsgard": ["Generation Kill","True Blood"], "Clarke Peters": null}</textarea>
+      </div>
+      <div class="width-half">
+        <h2>Text Version 2:</h2>
+        <textarea id="text2" class="width-full" rows="10">{"Aidan Gillen": {"array": ["Game of Thrones","The Wire"],"string": "some string","int": "2","otherint": 4, "aboolean": "true", "boolean": false,"object": {"foo": "bar"}},"Amy Ryan": ["In Treatment","The Wire"],"Annie Fitzgerald": ["True Blood","Big Love","The Sopranos","Oz"],"Anwan Glover": ["Treme","The Wire"],"Alexander Skarsg?rd": ["Generation Kill","True Blood"],"Alice Farmer": ["The Corner","Oz","The Wire"]}</textarea>
+      </div>
+    </div>
+    <h3>Diff timeout:</h3>
+    <div>
+      <input type="text" size=3 maxlength=5 value="1" id="timeout"> seconds<br>
+      <p>
+        If the mapping phase of the diff computation takes longer than this, then the computation
+        is truncated and the best solution to date is returned. While guaranteed to be correct,
+        it may not be optimal. A timeout of '0' allows for unlimited computation.
+      </p>
+    </div>
+    <H3>Post-diff cleanup:</H3>
+    <dl>
+      <dt>
+        <input type="radio" name="cleanup" id="semantic" checked>
+        <label for="semantic">Semantic Cleanup</label>
+      </dt>
+      <dd>
+        Increase human readability by factoring out commonalities which are likely to be
+        coincidental.
+      </dd>
+      <dt>
+        <input type="radio" name="cleanup" id="efficiency">
+        <label for="efficiency">Efficiency Cleanup</label>,
+        edit cost: <input type="text" size=3 maxlength=5 value="4" id="edit-cost">
+      <dd>
+        Increase computational efficiency by factoring out short commonalities which are
+        not worth the overhead. The larger the edit cost, the more aggressive the cleanup.
+      </dd>
+      <dt>
+        <input type="radio" name="cleanup" id="raw">
+        <label for="raw">No Cleanup</label>
+      </dt>
+      <dd>Raw output.</dd>
+      <div>
+        <button type="submit" onClick="launch()">Compute Diff</button>
+      </div>
+  </form>
+
+  <div class="flex-row">
+    <pre id="result-before" class="width-half"></pre>
+    <pre id="result-after" class="width-half"></pre>
+  </div>
+  <div id="time"></div>
+  <script>
+    const dmp = new diff_match_patch()
+
+    function launch() {
+      const text1 = document.getElementById('text1').value
+      const text2 = document.getElementById('text2').value
+      dmp.Diff_Timeout = parseFloat(document.getElementById('timeout').value)
+      dmp.Diff_EditCost = parseFloat(document.getElementById('edit-cost').value)
+
+      const msStart = (new Date()).getTime()
+      const d = dmp.diff_main(text1, text2)
+      const msEnd = (new Date()).getTime()
+
+      if (document.getElementById('semantic').checked) {
+        dmp.diff_cleanupSemantic(d)
+      }
+      if (document.getElementById('efficiency').checked) {
+        dmp.diff_cleanupEfficiency(d)
+      }
+      const ds = dmp.diff_prettyJSON(d)
+      document.getElementById('result-before').innerHTML = ds['diff_delete'].join('')
+      document.getElementById('result-after').innerHTML = ds['diff_insert'].join('')
+
+      document.getElementById('time').innerHTML = '<br>Time: ' + (msEnd - msStart) / 1000 + 's'
+    }
+  </script>
+</body>
+
+</html>