Support showing only unique layers

Author: Lonami

app.js

@@ -9,6 +9,26 @@ const removed_functions = document.getElementById('removed_functions');
 const changed_types = document.getElementById('changed_types');
 const changed_functions = document.getElementById('changed_functions');
 
+const collapsed_diff = [];
+for (const layer of DIFF) {
+    const cdl = collapsed_diff.length;
+    if (cdl === 0
+            || collapsed_diff[cdl - 1].layer === null
+            || collapsed_diff[cdl - 1].layer !== layer.layer) {
+        collapsed_diff.push(layer); // first or different
+    } else {
+        collapsed_diff[cdl - 1] = layer; // replace same layer (keep latest)
+    }
+}
+
+let used_diff = collapsed_diff;
+
+function change_used_diff(event) {
+    used_diff = event.target.checked ? collapsed_diff : DIFF;
+    fill_select_boxes();
+    load_diff();
+}
+
 function layer_name(layer) {
     const name = layer['layer'] == null ? 'Unknown layer' : `Layer ${layer['layer']}`;
     const date = new Date(layer['date'] * 1000);
@@ -36,6 +56,29 @@ function toggle_expand(event) {
     }
 }
 
+function fill_select_boxes() {
+    empty_node(select_from);
+    empty_node(select_to);
+    for (let i = 0; i < used_diff.length; ++i) {
+        const layer = used_diff[i];
+        if (i !== used_diff.length - 1) {
+            const option = document.createElement('option');
+            option.value = i;
+            option.innerText = layer_name(layer);
+            select_from.appendChild(option);
+        }
+        if (i !== 0) {
+            const option = document.createElement('option');
+            option.value = i;
+            option.innerText = layer_name(layer);
+            select_to.appendChild(option);
+        }
+    }
+
+    select_from.selectedIndex = used_diff.length - 2;
+    select_to.selectedIndex = used_diff.length - 2;
+}
+
 function change_select_from() {
     if (select_from.selectedIndex > select_to.selectedIndex) {
         select_from.selectedIndex = select_to.selectedIndex;
@@ -251,8 +294,25 @@ function update_changed(from, to, kind) {
 
 function load_diff() {
     div_diff.style.display = 'none';
-    const from_idx = Number(select_from.value);
-    const to_idx = Number(select_to.value);
+    let from_idx = Number(select_from.value);
+    let to_idx = Number(select_to.value);
+    if (used_diff == collapsed_diff) {
+        // figure out indices in the original diff with all data
+        let needle = used_diff[from_idx];
+        for (let i = from_idx; i < DIFF.length; ++i) {
+            if (needle == DIFF[i]) {
+                from_idx = i;
+                break;
+            }
+        }
+        needle = used_diff[to_idx];
+        for (let i = to_idx; i < DIFF.length; ++i) {
+            if (needle == DIFF[i]) {
+                to_idx = i;
+                break;
+            }
+        }
+    }
     const diff = {
         added: {types: {}, functions: {}},
         removed: {types: {}, functions: {}},
@@ -283,22 +343,5 @@ div_diff.style.display = 'none';
 select_from.addEventListener('change', load_diff);
 select_to.addEventListener('change', load_diff);
 
-for (let i = 0; i < DIFF.length; ++i) {
-    const layer = DIFF[i];
-    if (i !== DIFF.length - 1) {
-        const option = document.createElement('option');
-        option.value = i;
-        option.innerText = layer_name(layer);
-        select_from.appendChild(option);
-    }
-    if (i !== 0) {
-        const option = document.createElement('option');
-        option.value = i;
-        option.innerText = layer_name(layer);
-        select_to.appendChild(option);
-    }
-}
-
-select_from.selectedIndex = DIFF.length - 2;
-select_to.selectedIndex = DIFF.length - 2;
+fill_select_boxes();
 load_diff();

index.html

@@ -52,6 +52,9 @@
 }
 .diff li {
   margin: 0.1em 0;
+}
+label {
+  border-bottom: 1px dashed #000;
 }
   </style>
 </head>
@@ -77,6 +80,10 @@ <h1>Type Language Differ</h1>
 
     <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>
   </div>
   <div id="div_diff" class="diff">
     <div class="added">