Calculate and show difference statistics

Author: Lonami

app.js

@@ -1,6 +1,7 @@
 const select_from = document.getElementById('select_from');
 const select_to = document.getElementById('select_to');
 const div_diff = document.getElementById('div_diff');
+const stats = document.getElementById('stats');
 
 const added_types = document.getElementById('added_types');
 const added_functions = document.getElementById('added_functions');
@@ -314,8 +315,29 @@ function set_visible_ty_fn(main, ty, fn, where) {
     }
 }
 
+function set_td_text(tr, index, object) {
+    tr.children[index].replaceChild(
+        document.createTextNode(Object.keys(object).length.toString()),
+        tr.children[index].lastChild
+    )
+}
+
+function fill_stats(diff) {
+    const tbody = stats.children[1];
+    const ty = tbody.children[0];
+    const fn = tbody.children[1];
+
+    set_td_text(ty, 1, diff.added.types);
+    set_td_text(fn, 1, diff.added.functions);
+    set_td_text(ty, 2, diff.removed.types);
+    set_td_text(fn, 2, diff.removed.functions);
+    set_td_text(ty, 3, diff.changed.types);
+    set_td_text(fn, 3, diff.changed.functions);
+}
+
 function load_diff() {
     div_diff.style.display = 'none';
+
     let from_idx = Number(select_from.value);
     let to_idx = Number(select_to.value);
     if (used_diff == collapsed_diff) {
@@ -363,6 +385,7 @@ function load_diff() {
     set_visible_ty_fn(removed_div, removed_types_div, removed_functions_div, diff.removed);
     set_visible_ty_fn(changed_div, changed_types_div, changed_functions_div, diff.changed);
 
+    fill_stats(diff);
     div_diff.style.display = '';
 }
 

index.html

@@ -53,8 +53,36 @@
 .diff li {
   margin: 0.1em 0;
 }
-label {
+.info {
   border-bottom: 1px dashed #000;
+}
+td, th, td {
+  border: 1px solid #ccc;
+  padding: 0.5em;
+  text-align: center;
+}
+th a {
+  color: #fff;
+}
+th[scope="row"] {
+  text-align: right;
+}
+tr:nth-child(even) {
+  background-color: #eee;
+}
+thead {
+    background-color: #777;
+    color: #fff;
+}
+th[scope="row"] {
+  background-color: #ddf;
+}
+table {
+  border-collapse: collapse;
+  border: 1px solid #ccc;
+  letter-spacing: 1px;
+  font-family: sans-serif;
+  font-size: .8rem;
 }
   </style>
 </head>
@@ -78,12 +106,31 @@ <h1>Type Language Differ</h1>
     <p>To begin, select from which layer up to which layer you would like to
       see the changes.</p>
 
-    <select id="select_from" onchange="change_select_to()"></select>
-    <select id="select_to" onchange="change_select_from()"></select>
-    <input type="checkbox" id="merge-layers" name="merge-layers" onchange="change_used_diff(event)" checked>
-    <label
-      title="Telegram sometimes publishes updates to a layer without increasing the layer number. By default (checked), only the most recent version of a layer is shown, but you can uncheck this to show all the known revisions of a layer."
-      for="merge-layers">Show only the most recent version for a layer (?)</label>
+    <p>Calculate diff
+      <label for="select_from">from</label> <select id="select_from" onchange="change_select_to()"></select>
+      <label for="select_to">to</label> <select id="select_to" onchange="change_select_from()"></select>
+      <br>
+      <input type="checkbox" id="merge-layers" name="merge-layers" onchange="change_used_diff(event)" checked>
+      <label
+        class="info"
+        title="Telegram sometimes publishes updates to a layer without increasing the layer number. By default (checked), only the most recent version of a layer is shown, but you can uncheck this to show all the known revisions of a layer."
+        for="merge-layers">Show only the most recent version for a layer (?)</label>
+    </p>
+
+    <h2>Difference Statistics</h2>
+    <table id="stats">
+      <thead>
+        <tr>
+          <th scope="col">Kind</th>
+          <th scope="col"><a href="#added_div">Added</a></th>
+          <th scope="col"><a href="#removed_div">Removed</a></th>
+          <th scope="col"><a href="#changed_div">Changed</a></th></tr>
+      </thead>
+      <tbody>
+        <tr><th scope="row">Types</th><td>0</td><td>0</td><td>0</td></tr>
+        <tr><th scope="row">Functions</th><td>0</td><td>0</td><td>0</td></tr>
+      </tbody>
+    </table>
   </div>
   <div id="div_diff" class="diff">
     <div id="added_div" class="added">