Save supplemental metrics and hidden fields in Share URL

- Encode supplemental metric configs (source, type, display, chartType,
  breakouts, filter, sampleIndex) in the URL hash
- Encode hidden fields in the URL hash
- On URL restore, re-fetch each saved metric with its configuration
- Fix timing: save restoredMetrics in React state instead of reading
  from restoredState ref (which is cleared before CompareView mounts)
- CompareView wrapped with forwardRef, exposes getSupplementalMetrics
  via useImperativeHandle for the Share button
- Fix formatBarLabel and formatValue to handle non-numeric values

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: atheurer

queries/cdmq/web-ui/src/App.jsx

@@ -7,7 +7,7 @@ import DebugConsole from './components/DebugConsole';
 import './index.css';
 
 // Encode workflow state into a URL hash string
-function encodeState(filters, selectedRunIds, view, groupByList) {
+function encodeState(filters, selectedRunIds, view, groupByList, hiddenFields, supplementalMetrics) {
   var state = {};
   if (filters) {
     if (filters.benchmark) state.benchmark = filters.benchmark;
@@ -23,6 +23,17 @@ function encodeState(filters, selectedRunIds, view, groupByList) {
   if (selectedRunIds && selectedRunIds.length > 0) state.selectedRuns = selectedRunIds;
   if (view && view !== 'search') state.view = view;
   if (groupByList && groupByList.length > 0) state.groupBy = groupByList;
+  if (hiddenFields && hiddenFields.length > 0) state.hidden = hiddenFields;
+  if (supplementalMetrics && supplementalMetrics.length > 0) {
+    state.metrics = supplementalMetrics.map(function (m) {
+      var entry = { source: m.source, type: m.type, display: m.display };
+      if (m.chartType && m.chartType !== 'bar') entry.chartType = m.chartType;
+      if (m.breakouts && m.breakouts.length > 0) entry.breakouts = m.breakouts;
+      if (m.filter) entry.filter = m.filter;
+      if (m.sampleIndex != null) entry.sampleIndex = m.sampleIndex;
+      return entry;
+    });
+  }
   return '#' + encodeURIComponent(JSON.stringify(state));
 }
 
@@ -44,6 +55,7 @@ export default function App() {
   }, [theme]);
 
   const searchRef = useRef(null);
+  const compareRef = useRef(null);
   const [iterations, setIterations] = useState([]);
   const [selected, setSelected] = useState(new Map());
   const [loading, setLoading] = useState(false);
@@ -54,6 +66,7 @@ export default function App() {
   const [shareMsg, setShareMsg] = useState('');
   const lastFilters = useRef(null);
   const restoredState = useRef(null);
+  const [restoredMetrics, setRestoredMetrics] = useState(null);
 
   // On mount, check for state in URL hash
   // Don't switch view yet — wait until search completes and selections are applied
@@ -62,6 +75,8 @@ export default function App() {
     if (state) {
       restoredState.current = state;
       if (state.groupBy) setGroupByList(Array.isArray(state.groupBy) ? state.groupBy : [state.groupBy]);
+      if (state.hidden) setHiddenFields(Array.isArray(state.hidden) ? state.hidden : []);
+      if (state.metrics) setRestoredMetrics(state.metrics);
     }
   }, []);
 
@@ -148,7 +163,8 @@ export default function App() {
     var runIdSet = new Set();
     selected.forEach(function (it) { runIdSet.add(it.runId); });
     var selectedRunIds = Array.from(runIdSet);
-    var hash = encodeState(filters, selectedRunIds, view, groupByList);
+    var suppMetrics = compareRef.current ? compareRef.current.getSupplementalMetrics() : null;
+    var hash = encodeState(filters, selectedRunIds, view, groupByList, hiddenFields, suppMetrics);
     var url = window.location.origin + window.location.pathname + hash;
     // Update the URL bar so the user can see and copy it directly
     window.history.replaceState(null, '', hash);
@@ -230,7 +246,7 @@ export default function App() {
       )}
 
       {view === 'compare' && (
-        <CompareView selected={selected} groupByList={groupByList} setGroupByList={setGroupByList} hiddenFields={hiddenFields} setHiddenFields={setHiddenFields} />
+        <CompareView ref={compareRef} selected={selected} groupByList={groupByList} setGroupByList={setGroupByList} hiddenFields={hiddenFields} setHiddenFields={setHiddenFields} restoredMetrics={restoredMetrics} />
       )}
 
       {view === 'deepdive' && (

queries/cdmq/web-ui/src/components/CompareView.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useState, useEffect, useMemo, useCallback, useRef, useImperativeHandle, forwardRef } from 'react';
 import { ComposedChart, Bar, Line, XAxis, YAxis, CartesianGrid, Tooltip, ErrorBar, ResponsiveContainer, Legend, Cell, ReferenceLine, LabelList } from 'recharts';
 import * as api from '../api/cdm';
 import { timeWork } from '../debugLog';
@@ -28,6 +28,8 @@ function formatYTick(value) {
 // Compact value for bar labels — max 4 significant digits
 function formatBarLabel(v) {
   if (v == null) return '';
+  v = Number(v);
+  if (isNaN(v)) return '';
   var abs = Math.abs(v);
   if (abs === 0) return '0';
   if (abs >= 1000000) return (v / 1000000).toPrecision(3) + 'M';
@@ -39,6 +41,8 @@ function formatBarLabel(v) {
 
 function formatValue(v) {
   if (v == null) return '';
+  v = Number(v);
+  if (isNaN(v)) return '';
   if (Math.abs(v) >= 1000) return v.toFixed(0);
   if (Math.abs(v) >= 1) return v.toFixed(2);
   return v.toPrecision(3);
@@ -488,7 +492,7 @@ function buildDimOptions(iterations) {
   return opts;
 }
 
-export default function CompareView({ selected, groupByList, setGroupByList, hiddenFields, setHiddenFields }) {
+const CompareView = forwardRef(function CompareView({ selected, groupByList, setGroupByList, hiddenFields, setHiddenFields, restoredMetrics }, ref) {
   var [metricValues, setMetricValues] = useState({});
   var [loading, setLoading] = useState(false);
   var [supplementalMetrics, setSupplementalMetrics] = useState([]); // [{ source, type, values: {iterId: {mean,...}} }]
@@ -505,6 +509,12 @@ export default function CompareView({ selected, groupByList, setGroupByList, hid
     return Array.from(selected.values());
   }, [selected]);
 
+  useImperativeHandle(ref, function () {
+    return {
+      getSupplementalMetrics: function () { return supplementalMetrics; },
+    };
+  }, [supplementalMetrics]);
+
   // Helper to get run IDs and date range from iterations
   function getRunContext() {
     var runIdSet = new Set();
@@ -574,6 +584,44 @@ export default function CompareView({ selected, groupByList, setGroupByList, hid
     }
   }, [iterations.length > 0 && dimOptions.length > 1]);
 
+  // Restore supplemental metrics from URL state
+  var restoredMetricsApplied = useRef(false);
+  useEffect(function () {
+    if (restoredMetricsApplied.current) return;
+    if (!restoredMetrics || restoredMetrics.length === 0) return;
+    if (iterations.length === 0) return;
+    restoredMetricsApplied.current = true;
+    var ctx = getRunContext();
+    restoredMetrics.forEach(function (rm) {
+      var bestIdx = computeBestSampleIndex();
+      var sIdx = rm.sampleIndex != null ? rm.sampleIndex : bestIdx;
+      timeWork('Restore ' + rm.source + '::' + rm.type, function () {
+        return api.getSupplementalMetric({
+          iterations: ctx.iterations, start: ctx.start, end: ctx.end,
+          source: rm.source, type: rm.type,
+          breakout: rm.breakouts || [],
+          filter: rm.filter || null,
+          sampleIndex: sIdx,
+        });
+      }).then(function (res) {
+        setSupplementalMetrics(function (prev) {
+          return prev.concat([{
+            source: rm.source,
+            type: rm.type,
+            values: res.values || {},
+            display: rm.display || 'panel',
+            chartType: rm.chartType || 'bar',
+            filter: rm.filter || '',
+            sampleIndex: sIdx,
+            breakouts: rm.breakouts || [],
+            remainingBreakouts: res.remainingBreakouts || [],
+            loading: false,
+          }]);
+        });
+      });
+    });
+  }, [iterations.length > 0]);
+
   var handleShowAddMetric = useCallback(function () {
     setShowAddMetric(true);
     setAddMetricSource('');
@@ -1936,4 +1984,6 @@ export default function CompareView({ selected, groupByList, setGroupByList, hid
 
     </div>
   );
-}
+});
+
+export default CompareView;