Add max,min and abs(max) as selectable aggregation to maxmem diff summary and resource diff summary

Author: gartung

comparisons/maxmem_summary_viewer.html

@@ -113,7 +113,7 @@
     .grid {
       display: grid;
       gap: 12px;
-      grid-template-columns: repeat(4, minmax(160px, 1fr));
+      grid-template-columns: repeat(5, minmax(160px, 1fr));
     }
 
     label {
@@ -488,6 +488,14 @@ <h1>Max Memory Summary Viewer</h1>
               <option value="adiff-asc">PR - baseline ascending</option>
             </select>
           </div>
+          <div>
+            <label for="aggregationSelect">Aggregation</label>
+            <select id="aggregationSelect">
+              <option value="max" selected>max</option>
+              <option value="min">min</option>
+              <option value="abs-max">abs(max)</option>
+            </select>
+          </div>
           <label class="checkbox" for="hideZeroRows">
             <input id="hideZeroRows" type="checkbox">
             Hide workflows with only zero values
@@ -553,13 +561,20 @@ <h1>Max Memory Summary Viewer</h1>
       { key: "pdiff", label: "100 * (PR - baseline) / baseline", unit: "%" }
     ];
 
+    const AGGREGATIONS = [
+      { key: "max", label: "max" },
+      { key: "min", label: "min" },
+      { key: "abs-max", label: "abs(max)" }
+    ];
+
     const state = {
       payload: null,
       workflows: [],
       steps: [],
       search: "",
       quantityKey: "max memory",
       sortKey: "workflow-asc",
+      aggregationKey: "max",
       expandedWorkflows: new Set(),
       detailSortKey: "step",
       detailSortDir: "asc"
@@ -569,6 +584,7 @@ <h1>Max Memory Summary Viewer</h1>
       workflowSearch: document.getElementById("workflowSearch"),
       quantitySelect: document.getElementById("quantitySelect"),
       sortSelect: document.getElementById("sortSelect"),
+      aggregationSelect: document.getElementById("aggregationSelect"),
       hideZeroRows: document.getElementById("hideZeroRows"),
       loadedCount: document.getElementById("loadedCount"),
       visibleCount: document.getElementById("visibleCount"),
@@ -613,6 +629,20 @@ <h1>Max Memory Summary Viewer</h1>
       return `${quantityKey} ${legendKey}`;
     }
 
+    function currentAggregation() {
+      return AGGREGATIONS.find((aggregation) => aggregation.key === state.aggregationKey) || AGGREGATIONS[0];
+    }
+
+    function aggregatedNumericValue(value) {
+      if (typeof value !== "number" || Number.isNaN(value)) {
+        return value;
+      }
+      if (state.aggregationKey === "abs-max") {
+        return Math.abs(value);
+      }
+      return value;
+    }
+
     function formatValue(value, quantity, legend) {
       if (value === undefined || value === null || Number.isNaN(value)) {
         return "-";
@@ -690,7 +720,7 @@ <h1>Max Memory Summary Viewer</h1>
         case "pdiff-asc": {
           const legendKey = state.sortKey.split("-")[0];
           const sortField = fieldName(currentQuantity().key, legendKey);
-          return compareMaybeNumbers(maxStepValue(left, sortField).value, maxStepValue(right, sortField).value)
+          return compareMaybeNumbers(aggregateStepValue(left, sortField).value, aggregateStepValue(right, sortField).value)
             || workflowNumber(left.name) - workflowNumber(right.name)
             || left.name.localeCompare(right.name);
         }
@@ -700,7 +730,7 @@ <h1>Max Memory Summary Viewer</h1>
         case "pdiff-desc": {
           const legendKey = state.sortKey.split("-")[0];
           const sortField = fieldName(currentQuantity().key, legendKey);
-          return compareMaybeNumbers(maxStepValue(right, sortField).value, maxStepValue(left, sortField).value)
+          return compareMaybeNumbers(aggregateStepValue(right, sortField).value, aggregateStepValue(left, sortField).value)
             || workflowNumber(left.name) - workflowNumber(right.name)
             || left.name.localeCompare(right.name);
         }
@@ -731,7 +761,7 @@ <h1>Max Memory Summary Viewer</h1>
       renderTable();
     }
 
-    function maxStepValue(row, selectedField) {
+    function aggregateStepValue(row, selectedField) {
       let bestValue = null;
       let bestStepData = null;
 
@@ -741,7 +771,30 @@ <h1>Max Memory Summary Viewer</h1>
         if (typeof value !== "number" || Number.isNaN(value)) {
           continue;
         }
-        if (bestValue === null || value > bestValue) {
+
+        if (bestValue === null) {
+          bestValue = value;
+          bestStepData = stepData;
+          continue;
+        }
+
+        if (state.aggregationKey === "min") {
+          if (value < bestValue) {
+            bestValue = value;
+            bestStepData = stepData;
+          }
+          continue;
+        }
+
+        if (state.aggregationKey === "abs-max") {
+          if (Math.abs(value) > Math.abs(bestValue)) {
+            bestValue = Math.abs(value);
+            bestStepData = stepData;
+          }
+          continue;
+        }
+
+        if (value > bestValue) {
           bestValue = value;
           bestStepData = stepData;
         }
@@ -821,10 +874,10 @@ <h1>Max Memory Summary Viewer</h1>
           workflow: workflowName,
           step,
           stepOrder: stepNumber(step),
-          baseline: stepData[fieldName(quantity.key, "base")],
-          pullRequest: stepData[fieldName(quantity.key, "pr")],
-          absoluteDiff: stepData[fieldName(quantity.key, "adiff")],
-          percentDiff: stepData[fieldName(quantity.key, "pdiff")]
+          baseline: aggregatedNumericValue(stepData[fieldName(quantity.key, "base")]),
+          pullRequest: aggregatedNumericValue(stepData[fieldName(quantity.key, "pr")]),
+          absoluteDiff: aggregatedNumericValue(stepData[fieldName(quantity.key, "adiff")]),
+          percentDiff: aggregatedNumericValue(stepData[fieldName(quantity.key, "pdiff")])
         };
       });
 
@@ -880,6 +933,7 @@ <h1>Max Memory Summary Viewer</h1>
 
     function buildDetailTable(workflowName, steps) {
       const quantity = currentQuantity();
+      const aggregation = currentAggregation();
       const detailRows = getDetailRows(workflowName, steps);
       const percentLegend = LEGENDS.find((legend) => legend.key === "pdiff");
       const numberLegend = { key: "base", unit: quantity.unit };
@@ -892,10 +946,10 @@ <h1>Max Memory Summary Viewer</h1>
                 <tr>
                   <th class="sortable" data-sort-key="workflow">Workflow${detailSortIndicator("workflow")}</th>
                   <th class="sortable" data-sort-key="step">Step${detailSortIndicator("step")}</th>
-                  <th class="sortable th-num" data-sort-key="baseline">Baseline${detailSortIndicator("baseline")}</th>
-                  <th class="sortable th-num" data-sort-key="pullRequest">Pull Request${detailSortIndicator("pullRequest")}</th>
-                  <th class="sortable th-num" data-sort-key="absoluteDiff">PR - Baseline${detailSortIndicator("absoluteDiff")}</th>
-                  <th class="sortable th-num" data-sort-key="percentDiff">Percent Diff${detailSortIndicator("percentDiff")}</th>
+                  <th class="sortable th-num" data-sort-key="baseline">Baseline (${aggregation.label})${detailSortIndicator("baseline")}</th>
+                  <th class="sortable th-num" data-sort-key="pullRequest">Pull Request (${aggregation.label})${detailSortIndicator("pullRequest")}</th>
+                  <th class="sortable th-num" data-sort-key="absoluteDiff">PR - Baseline (${aggregation.label})${detailSortIndicator("absoluteDiff")}</th>
+                  <th class="sortable th-num" data-sort-key="percentDiff">Percent Diff (${aggregation.label})${detailSortIndicator("percentDiff")}</th>
                 </tr>
               </thead>
               <tbody>
@@ -934,6 +988,7 @@ <h1>Max Memory Summary Viewer</h1>
       const rows = getWorkflowRows();
       const peak = peakSignal(rows, selectedField);
       const adiffLegend = LEGENDS.find((legend) => legend.key === "adiff") || LEGENDS[0];
+      const aggregation = currentAggregation();
 
       el.loadedCount.textContent = state.workflows.length.toLocaleString();
       el.visibleCount.textContent = rows.length.toLocaleString();
@@ -957,7 +1012,7 @@ <h1>Max Memory Summary Viewer</h1>
         const legendHead = document.createElement("th");
         legendHead.className = "sortable th-num";
         legendHead.setAttribute("data-sort-key", legend.key);
-        legendHead.textContent = `${legend.label} (max)${mainSortIndicator(legend.key)}`;
+        legendHead.textContent = `${legend.label} (${aggregation.label})${mainSortIndicator(legend.key)}`;
         el.tableHeadRow.appendChild(legendHead);
       }
 
@@ -985,7 +1040,7 @@ <h1>Max Memory Summary Viewer</h1>
 
         for (const legend of LEGENDS) {
           const legendField = fieldName(quantity.key, legend.key);
-          const maxValue = maxStepValue(row, legendField);
+          const maxValue = aggregateStepValue(row, legendField);
           const maxValueCell = document.createElement("td");
           maxValueCell.className = cellClass(quantity, legend, maxValue.stepData, maxValue.value);
           maxValueCell.textContent = formatValue(maxValue.value, quantity, legend);
@@ -1014,7 +1069,7 @@ <h1>Max Memory Summary Viewer</h1>
       });
       attachDetailSortHandlers();
 
-      setStatus(`Showing ${rows.length.toLocaleString()} workflows for ${quantity.label}, sorted by ${mainSortColumn() === "workflow" ? "workflow" : mainSortColumn() + " max"}.`, false);
+      setStatus(`Showing ${rows.length.toLocaleString()} workflows for ${quantity.label}, sorted by ${mainSortColumn() === "workflow" ? "workflow" : mainSortColumn() + " " + aggregation.label}.`, false);
     }
 
     function populateSelectors() {
@@ -1023,6 +1078,10 @@ <h1>Max Memory Summary Viewer</h1>
         .join("");
       el.quantitySelect.value = state.quantityKey;
       el.sortSelect.value = state.sortKey;
+      el.aggregationSelect.innerHTML = AGGREGATIONS
+        .map((aggregation) => `<option value="${escapeHtml(aggregation.key)}">${escapeHtml(aggregation.label)}</option>`)
+        .join("");
+      el.aggregationSelect.value = state.aggregationKey;
     }
 
     function attachEvents() {
@@ -1041,6 +1100,11 @@ <h1>Max Memory Summary Viewer</h1>
         renderTable();
       });
 
+      el.aggregationSelect.addEventListener("change", () => {
+        state.aggregationKey = el.aggregationSelect.value;
+        renderTable();
+      });
+
       el.hideZeroRows.addEventListener("change", () => {
         renderTable();
       });

comparisons/resources_diff_viewer.html

@@ -71,7 +71,7 @@
 
     .controls-grid {
       display: grid;
-      grid-template-columns: 1fr 220px;
+      grid-template-columns: 1fr 220px 200px;
       gap: 12px;
     }
 
@@ -257,6 +257,14 @@ <h1>FastTimerService Resources Difference</h1>
               <option value="dealloc">Dealloc Memory</option>
             </select>
           </div>
+          <div>
+            <label for="aggregationSelect">Aggregation</label>
+            <select id="aggregationSelect">
+              <option value="max" selected>max</option>
+              <option value="min">min</option>
+              <option value="abs-max">abs(max)</option>
+            </select>
+          </div>
         </div>
       </div>
 
@@ -362,17 +370,25 @@ <h1>FastTimerService Resources Difference</h1>
       { key: "events", label: "Events", metricKey: "events", valueType: "value", decimals: 0 }
     ];
 
+    const AGGREGATION_OPTIONS = [
+      { key: "max", label: "max" },
+      { key: "min", label: "min" },
+      { key: "abs-max", label: "abs(max)" }
+    ];
+
     const state = {
       payload: null,
       filter: "",
       sortKey: "diff-desc",
       selectedMetricKey: "cpu-frac",
+      selectedAggregationKey: "max",
       expandedModules: new Set()
     };
 
     const el = {
       filterInput: document.getElementById("filterInput"),
       valueSelect: document.getElementById("valueSelect"),
+      aggregationSelect: document.getElementById("aggregationSelect"),
       legendBar: document.getElementById("legendBar"),
       totalsTitle: document.getElementById("totalsTitle"),
       totalBody: document.getElementById("totalBody"),
@@ -393,10 +409,58 @@ <h1>FastTimerService Resources Difference</h1>
       return SELECTABLE_METRICS.find((option) => option.key === key) || SELECTABLE_METRICS[0];
     }
 
+    function getAggregationOption(key) {
+      return AGGREGATION_OPTIONS.find((option) => option.key === key) || AGGREGATION_OPTIONS[0];
+    }
+
+    function valueFromCandidates(candidates) {
+      const values = candidates
+        .map((candidate) => Number(candidate))
+        .filter((value) => Number.isFinite(value));
+      if (!values.length) return NaN;
+
+      switch (state.selectedAggregationKey) {
+        case "min":
+          return Math.min(...values);
+        case "abs-max": {
+          const absMax = Math.max(...values.map((value) => Math.abs(value)));
+          return Number.isFinite(absMax) ? absMax : NaN;
+        }
+        case "max":
+        default:
+          return Math.max(...values);
+      }
+    }
+
+    function metricFieldCandidates(metric, baseKey) {
+      if (!metric || typeof metric !== "object") return [];
+
+      const candidates = [];
+      const direct = metric[baseKey];
+      if (Array.isArray(direct)) {
+        candidates.push(...direct);
+      } else if (direct && typeof direct === "object") {
+        candidates.push(direct.max, direct.min, direct.abs_max, direct.absMax);
+      } else {
+        candidates.push(direct);
+      }
+
+      candidates.push(
+        metric[`${baseKey}_max`],
+        metric[`${baseKey}_min`],
+        metric[`${baseKey}_abs_max`],
+        metric[`${baseKey}_absMax`]
+      );
+
+      return candidates;
+    }
+
     function metricValue(metric, option, variant) {
       if (!metric) return NaN;
-      if (option.valueType === "percent") return metric[`frac_${variant}`];
-      return metric[variant];
+      const baseKey = option.valueType === "percent" ? `frac_${variant}` : variant;
+      const aggregated = valueFromCandidates(metricFieldCandidates(metric, baseKey));
+      if (!Number.isNaN(aggregated)) return aggregated;
+      return Number(metric[baseKey]);
     }
 
     function formatMetricValue(metric, option, variant) {
@@ -447,6 +511,13 @@ <h1>FastTimerService Resources Difference</h1>
       renderModulesTable();
     }
 
+    function setSelectedAggregation(aggregationKey) {
+      state.selectedAggregationKey = aggregationKey;
+      el.aggregationSelect.value = aggregationKey;
+      renderTotals();
+      renderModulesTable();
+    }
+
     function selectedMetricValue(module, variant, option) {
       const selectedOption = option || getMetricOption(state.selectedMetricKey);
       return asNumber(metricValue(module[selectedOption.metricKey], selectedOption, variant));
@@ -528,9 +599,10 @@ <h1>FastTimerService Resources Difference</h1>
       const total = state.payload.total;
       const expanded = state.expandedModules.has("__total__");
       const selectedOption = getMetricOption(state.selectedMetricKey);
+      const aggregationOption = getAggregationOption(state.selectedAggregationKey);
       const selectedMetric = total[selectedOption.metricKey];
       el.totalBody.innerHTML = "";
-      el.totalsTitle.textContent = `Totals (${selectedOption.label})`;
+      el.totalsTitle.textContent = `Totals (${selectedOption.label}, ${aggregationOption.label})`;
       const row = document.createElement("tr");
       row.innerHTML = `
         <td><button class="expand-btn" data-key="__total__">${expanded ? "▼" : "▶"}</button></td>
@@ -649,6 +721,9 @@ <h1>FastTimerService Resources Difference</h1>
       el.valueSelect.addEventListener("change", () => {
         setSelectedMetric(el.valueSelect.value);
       });
+      el.aggregationSelect.addEventListener("change", () => {
+        setSelectedAggregation(el.aggregationSelect.value);
+      });
     }
 
     function loadFromObject(data, sourceLabel) {