make run selector the first selector and move most filters into a dropdown

Author: rotmanjanez

index.html

@@ -197,12 +197,10 @@
 
         .th-entry-hilite {
             background: var(--highlight-color);
-            font-weight: bold;
         }
 
         .summary-row:hover, .summary-row-hilite {
             background: var(--highlight-color) !important;
-            font-weight: bold;
         }
 
         #details {
@@ -228,6 +226,15 @@
 
         #nothing-selected {
             display: none;
+            width: 100%;
+            height: 45vh;
+            overflow-y: scroll;
+            scrollbar-gutter: stable;
+            box-sizing: border-box;
+            align-items: center;
+            padding-right: 1rem;
+            margin-top: 1.5rem;
+            margin-bottom: 1rem;
             font-size: 32pt;
             font-weight: bold;
             color: var(--nothing-selected-color);
@@ -398,7 +405,30 @@ <h1>ClickBench — a Benchmark For Analytical DBMS</h1>
     </tbody>
 </table>
 
+<div id="nothing-selected" class="stick-left">Nothing selected</div>
+
 <table class="selectors-container stick-left">
+    <tr>
+        <th>Metric: </th>
+        <td id="selectors_run">
+            <a class="selector" id="selector-metric-combined">Combined</a>
+            <a class="selector" id="selector-metric-cold">Cold Run</a>
+            <a class="selector" id="selector-metric-hot">Hot Run</a>
+            <a class="selector" id="selector-metric-load">Load Time</a>
+            <a class="selector" id="selector-metric-size">Storage Size</a>
+        </td>
+    </tr>
+    <tr>
+        <th>Database: </th>
+        <td id="selectors_database">
+            <a id="select-all-databases" class="selector selector-active">All</a>
+        </td>
+    </tr>
+</table>
+
+<details class="selectors-container stick-left">
+    <summary class="selector">Additional filters</summary>
+    <table>
     <tr>
         <th>System: </th>
         <td id="selectors_system">
@@ -444,19 +474,8 @@ <h1>ClickBench — a Benchmark For Analytical DBMS</h1>
             <a id="selector-tuned-yes" class="selector selector-active">Yes</a>
         </td>
     </tr>
-    <tr>
-        <th>Metric: </th>
-        <td id="selectors_run">
-            <a class="selector" id="selector-metric-combined">Combined</a>
-            <a class="selector" id="selector-metric-cold">Cold Run</a>
-            <a class="selector" id="selector-metric-hot">Hot Run</a>
-            <a class="selector" id="selector-metric-load">Load Time</a>
-            <a class="selector" id="selector-metric-size">Storage Size</a>
-        </td>
-    </tr>
-</table>
-
-<div id="nothing-selected" class="stick-left">Nothing selected</div>
+    </table>
+</details>
 
 <div class="stick-left comparison">
     <h2>Detailed Comparison</h2>
@@ -478,6 +497,7 @@ <h2>Detailed Comparison</h2>
 const missing_result_time = 300;
 
 let selectors = {
+    "database": {},
     "system": {},
     "type": {},
     "machine": {},
@@ -508,12 +528,30 @@ <h2>Detailed Comparison</h2>
 
 /// Generate selectors
 
+let databases = document.getElementById('selectors_database');
 let systems = document.getElementById('selectors_system');
 let types = document.getElementById('selectors_type');
 let machines = document.getElementById('selectors_machine');
 let cluster_sizes = document.getElementById('selectors_cluster_size');
 
-let unique_systems = [... new Set(data.map(elem => elem.system))].sort((a, b) => a.localeCompare(b, undefined, {numeric: true, sensitivity: 'base'}));
+function database(system_name) {
+    // Remove any parenthesized comments from the system name
+    // They only contain variations of the same DB and pollute the selectors
+    const base = system_name.replace(/\s*\([^)]*\)\s*$/, '');
+    const aliases = {
+        'ClickHouse ☁️': 'ClickHouse',
+        'Timescale ☁️': 'TimescaleDB',
+    };
+    return aliases[base] || base;
+}
+
+data.forEach(elem => { elem.database = database(elem.system); });
+additional_data_size_points.forEach(elem => { elem.database = database(elem.system); });
+
+const uniqueSorted = values => [... new Set(values)].sort((a, b) => a.localeCompare(b, undefined, {numeric: true, sensitivity: 'base'}));
+
+let unique_databases = uniqueSorted(data.map(elem => elem.database));
+let all_systems = uniqueSorted(data.map(elem => elem.system));
 
 function toggle(e, elem, selectors_map) {
     selectors_map[elem] = !selectors_map[elem];
@@ -532,15 +570,36 @@ <h2>Detailed Comparison</h2>
     updateHistory();
 }
 
-unique_systems.map(elem => {
+unique_databases.map(elem => {
+    let selector = document.createElement('a');
+    selector.className = 'selector selector-active';
+    selector.appendChild(document.createTextNode(elem));
+    databases.appendChild(selector);
+    selectors.database[elem] = data.some(entry => entry.database == elem && !entry.hide);
+    selector.addEventListener('click', e => toggle(e, elem, selectors.database));
+
+    /// Highlighting summary rows and table columns on hovering over the database selector.
+    selector.addEventListener('mouseover', e => {
+        [...document.querySelectorAll('.summary-row')].map(row => {
+            row.className = row.dataset.database == elem ? 'summary-row summary-row-hilite' : 'summary-row' });
+        [...document.querySelectorAll('.th-entry')].map(th => {
+            th.className = th.dataset.database == elem ? 'th-entry th-entry-hilite' : 'th-entry' });
+    });
+    selector.addEventListener('mouseout', e => {
+        [...document.querySelectorAll('.summary-row')].map(row => { row.className = 'summary-row' });
+        [...document.querySelectorAll('.th-entry')].map(row => { row.className = 'th-entry' });
+    });
+});
+
+all_systems.map(elem => {
     let selector = document.createElement('a');
     selector.className = 'selector selector-active';
     selector.appendChild(document.createTextNode(elem));
     systems.appendChild(selector);
-    selectors.system[elem] = data.some(entry => entry.system == elem && !entry.hide);
+    selectors.system[elem] = true;
     selector.addEventListener('click', e => toggle(e, elem, selectors.system));
 
-    /// Highlighting summary rows and table columns on hovering over the system selector.
+    /// Highlighting summary rows and table columns on hovering over the database selector.
     selector.addEventListener('mouseover', e => {
         [...document.querySelectorAll('.summary-row')].map(row => {
             row.className = row.dataset.system == elem ? 'summary-row summary-row-hilite' : 'summary-row' });
@@ -651,6 +710,7 @@ <h2>Detailed Comparison</h2>
     updateHistory();
 });
 
+document.getElementById('select-all-databases').addEventListener('click', e => toggleAll(e, selectors.database));
 document.getElementById('select-all-systems').addEventListener('click', e => toggleAll(e, selectors.system));
 document.getElementById('select-all-types').addEventListener('click', e => toggleAll(e, selectors.type));
 document.getElementById('select-all-machines').addEventListener('click', e => toggleAll(e, selectors.machine));
@@ -669,7 +729,8 @@ <h2>Detailed Comparison</h2>
 selectors.queries = [...data[0].result.keys()].map(k => true);
 
 function updateSelectors() {
-    [...systems.childNodes].map(elem => { elem.className = selectors.system[elem.innerText] ? 'selector selector-active' : 'selector' });
+    [...databases.childNodes].map(elem => { elem.className = selectors.database[elem.innerText] ? 'selector selector-active' : 'selector' });
+    [...systems.childNodes].map(elem => { elem.className = selectors.system[elem.textContent] ? 'selector selector-active' : 'selector' });
     [...types.childNodes].map(elem => { elem.className = selectors.type[elem.innerText] ? 'selector selector-active' : 'selector' });
     [...machines.childNodes].map(elem => { elem.className = selectors.machine[elem.innerText] ? 'selector selector-active' : 'selector' });
     [...cluster_sizes.childNodes].map(elem => { elem.className = selectors.cluster_size[elem.innerText] ? 'selector selector-active' : 'selector' });
@@ -702,6 +763,7 @@ <h2>Detailed Comparison</h2>
             }
         }
     }
+    process('database', databases);
     process('system', systems);
     process('tags', types);
     process('machine', machines);
@@ -825,6 +887,7 @@ <h2>Detailed Comparison</h2>
         tr.className = 'summary-row';
 
         tr.dataset.system = elem.system;
+        tr.dataset.database = elem.database;
 
         let td_name = document.createElement('td');
         td_name.className = 'summary-name';
@@ -939,6 +1002,7 @@ <h2>Detailed Comparison</h2>
     clearElement(details_body);
 
     let filtered_data = data.filter(elem =>
+        selectors.database[elem.database] &&
         selectors.system[elem.system] &&
         selectors.machine[elem.machine] &&
         selectors.cluster_size[elem.cluster_size] &&
@@ -1001,6 +1065,7 @@ <h2>Detailed Comparison</h2>
         th.appendChild(document.createTextNode(`${elem.system}\n(${Number.isInteger(elem.cluster_size) && elem.cluster_size > 1 ? elem.cluster_size + '×': ''}${elem.machine})`));
         th.className = 'th-entry';
         th.dataset.system = elem.system;
+        th.dataset.database = elem.database;
         details_head.appendChild(th);
     });
 
@@ -1190,14 +1255,17 @@ <h2>Detailed Comparison</h2>
     return decoded;
 }
 
-function updateHistory() {
-    history.pushState(selectors, '',
-        window.location.pathname + (window.location.search || '') + '#' + encodeState(selectors));
-}
-
-window.onpopstate = function(event) {
-    if (!event.state) { return; }
-    selectors = event.state;
+function addMissingSelectors() {
+    if (!selectors.database) {
+        selectors.database = {};
+        if (selectors.system) {
+            const selected_databases = new Set(
+                data.filter(elem => selectors.system[elem.system]).map(elem => elem.database));
+            unique_databases.forEach(k => { selectors.database[k] = selected_databases.has(k) });
+        } else {
+            unique_databases.forEach(k => { selectors.database[k] = true });
+        }
+    }
     if (!selectors.opensource) {
         selectors.opensource = {"yes": true, "no": false};
     }
@@ -1207,22 +1275,25 @@ <h2>Detailed Comparison</h2>
     if (!selectors.tuned) {
         selectors.tuned = {"no": true, "yes": false};
     }
+}
+
+function updateHistory() {
+    history.pushState(selectors, '',
+        window.location.pathname + (window.location.search || '') + '#' + encodeState(selectors));
+}
+
+window.onpopstate = function(event) {
+    if (!event.state) { return; }
+    selectors = event.state;
+    addMissingSelectors();
     updateSelectors();
     render();
 };
 
 if (window.location.hash) {
     try {
         selectors = decodeState(decodeURIComponent(window.location.hash.substring(1)));
-        if (!selectors.opensource) {
-            selectors.opensource = {"yes": true, "no": false};
-        }
-        if (!selectors.hardware) {
-            selectors.hardware = {"cpu": true, "gpu": false};
-        }
-        if (!selectors.tuned) {
-            selectors.tuned = {"no": true, "yes": false};
-        }
+        addMissingSelectors();
     } catch {}
 }