From 1d107b536457f0b0cb60651321c9cd1c508a16c6 Mon Sep 17 00:00:00 2001
From: Sergei Trifonov <sergei@clickhouse.com>
Date: Mon, 26 May 2025 17:36:07 +0100
Subject: [PATCH 1/2] Add selectors to filter based on retains_structure

---
 index.html | 49 ++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index fb72530..dad61a7 100644
--- a/index.html
+++ b/index.html
@@ -414,6 +414,13 @@ <h1>JSONBench — a Benchmark For Data Analytics On JSON</h1>
             <a class="selector" id="selector-metric-quality">Data Quality</a>
         </td>
     </tr>
+    <tr>
+        <th>Retain Structure: </th>
+        <td id="selectors_retain_structure">
+            <a class="selector selector-active" id="selector-retain-structure-yes">Yes</a>
+            <a class="selector" id="selector-retain-structure-no">No</a>
+        </td>
+    </tr>
 </table>
 
 <table class="stick-left comparison">
@@ -457,6 +464,7 @@ <h2>Detailed Comparison</h2>
     "scale": 1000_000_000,
     "metric": "hot",
     "queries": [],
+    "retain_structure": {"yes": true, "no": false}
 };
 
 let theme = 'light';
@@ -564,6 +572,27 @@ <h2>Detailed Comparison</h2>
 document.getElementById('selector-metric-size').addEventListener('click', e => { selectors.metric = 'size'; render(); updateHistory(); });
 document.getElementById('selector-metric-quality').addEventListener('click', e => { selectors.metric = 'quality'; render(); updateHistory(); });
 
+document.getElementById('selector-retain-structure-yes').addEventListener('click', e => {
+    selectors.retain_structure.yes = !selectors.retain_structure.yes;
+    if (selectors.retain_structure.yes) {
+        e.target.classList.add('selector-active');
+    } else {
+        e.target.classList.remove('selector-active');
+    }
+    render();
+    updateHistory();
+});
+document.getElementById('selector-retain-structure-no').addEventListener('click', e => {
+    selectors.retain_structure.no = !selectors.retain_structure.no;
+    if (selectors.retain_structure.no) {
+        e.target.classList.add('selector-active');
+    } else {
+        e.target.classList.remove('selector-active');
+    }
+    render();
+    updateHistory();
+});
+
 selectors.queries = queries.map(() => true);
 
 function updateSelectors() {
@@ -574,6 +603,12 @@ <h2>Detailed Comparison</h2>
     [...document.getElementById('selectors_run').querySelectorAll('a')].map(elem => {
         elem.className = elem.id == 'selector-metric-' + selectors.metric ? 'selector selector-active' : 'selector' });
 
+    // Update retain structure buttons state
+    document.getElementById('selector-retain-structure-yes').className =
+        selectors.retain_structure.yes ? 'selector selector-active' : 'selector';
+    document.getElementById('selector-retain-structure-no').className =
+        selectors.retain_structure.no ? 'selector selector-active' : 'selector';
+
     [...document.querySelectorAll('.query-checkbox')].map((elem, i) => { elem.checked = selectors.queries[i] });
 }
 
@@ -774,7 +809,11 @@ <h2>Detailed Comparison</h2>
 
     let filtered_data = data.filter(elem =>
         (selectors.system[elem.system] || (selectors.metric == 'size' && elem.fake)) &&
-        selectors.scale == elem.dataset_size);
+        selectors.scale == elem.dataset_size &&
+        (
+            (selectors.retain_structure.yes && elem.retains_structure === "yes") ||
+            (selectors.retain_structure.no && elem.retains_structure === "no")
+        ));
 
     let nothing_selected_elem = document.getElementById('nothing-selected');
     if (filtered_data.length == 0) {
@@ -921,6 +960,10 @@ <h2>Detailed Comparison</h2>
 window.onpopstate = function(event) {
     if (!event.state) { return; }
     selectors = event.state;
+    // Ensure retain_structure exists in loaded state
+    if (!selectors.retain_structure) {
+        selectors.retain_structure = {"yes": true, "no": false};
+    }
     render();
     updateSelectors();
 };
@@ -928,6 +971,10 @@ <h2>Detailed Comparison</h2>
 if (window.location.hash) {
     try {
         selectors = JSON.parse(atob(window.location.hash.substring(1)));
+        // Ensure retain_structure exists in loaded state
+        if (!selectors.retain_structure) {
+            selectors.retain_structure = {"yes": true, "no": false};
+        }
     } catch {}
 }
 

From fcd78011431174f4608e24af1a02cc74cc44f08b Mon Sep 17 00:00:00 2001
From: Sergei Trifonov <sergei@clickhouse.com>
Date: Mon, 26 May 2025 17:51:20 +0100
Subject: [PATCH 2/2] use shorter wording

---
 index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index dad61a7..c0dad06 100644
--- a/index.html
+++ b/index.html
@@ -415,10 +415,10 @@ <h1>JSONBench — a Benchmark For Data Analytics On JSON</h1>
         </td>
     </tr>
     <tr>
-        <th>Retain Structure: </th>
+        <th>Flattening: </th>
         <td id="selectors_retain_structure">
-            <a class="selector selector-active" id="selector-retain-structure-yes">Yes</a>
-            <a class="selector" id="selector-retain-structure-no">No</a>
+            <a class="selector selector-active" id="selector-retain-structure-yes">No</a>
+            <a class="selector" id="selector-retain-structure-no">Yes</a>
         </td>
     </tr>
 </table>