show individual hot/cold/load/storage ratios in the combined view

The Combined metric collapses load, data size, cold and hot into a
single weighted-geomean "×N" score, which hides how a system earned it.

In the Combined view, expand the score cell to also list the four
component ratios that feed it: hot, cold, load and storage, each as the
relative "×N" ratio (a component that doesn't apply to the system, e.g.
cold for a lukewarm engine or load for a stateless one, shows "n/a").
Each ratio is padded to a fixed width with non-breaking spaces so the
columns line up in the monospace cell (6 fits "×12.34" for
hot/cold/load, 5 fits "×1.23" for storage), and the overall score is
shown in bold. Other metric views are unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: toschmidt

index.html

@@ -1042,8 +1042,26 @@ <h2>Detailed Comparison</h2>
 
         const text = selectors.metric == 'load' ? (elem.load_time ? `${Math.round(elem.load_time)}s (×${ratio.toFixed(2)})` : 'stateless')
             :  selectors.metric == 'size' ? `${(elem.data_size / 1024 / 1024 / 1024).toFixed(2)} GiB (×${ratio.toFixed(2)})`
+            :  selectors.metric == 'combined' ? (() => {
+                    /// Break the combined score into the components it's built
+                    /// from (hot, cold, load, storage) as the relative "×N"
+                    /// ratios that feed the weighted score. Pad each to a fixed
+                    /// width so the columns line up in the monospace cell.
+                    const fmt = (v, n) => ((v == null || !isFinite(v)) ? 'n/a' : `×${v.toFixed(2)}`).padStart(n, ' ');
+                    const hot = fmt(relativeQueryTime(num_queries, baseline_data, elem, 'hot'), 6);
+                    const cold = fmt(metricExcludes(elem, 'cold') ? null : relativeQueryTime(num_queries, baseline_data, elem, 'cold'), 6);
+                    const load = fmt(metricExcludes(elem, 'load') ? null : elem.load_time / min_load_time, 6);
+                    const size = fmt(metricExcludes(elem, 'size') ? null : elem.data_size / min_data_size, 5);
+                    return `  (hot ${hot}, cold ${cold}, load ${load}, storage ${size})`;
+                })()
             : `×${ratio.toFixed(2)}`;
 
+        // Combined shows a bold overall score followed by the (plain) breakdown.
+        if (selectors.metric == 'combined') {
+            let score = document.createElement('strong');
+            score.appendChild(document.createTextNode(`×${ratio.toFixed(2)}`));
+            td_number.appendChild(score);
+        }
         td_number.appendChild(document.createTextNode(text));
 
         let td_bar = document.createElement('td');