footprint-explainable-ui 0.14.1 → 0.14.3

package/dist/index.cjs

@@ -4091,9 +4091,15 @@ function detectKeyedSteps(data) {
   const obj = data;
   for (const val of Object.values(obj)) {
     if (val && typeof val === "object" && !Array.isArray(val)) {
-      const keys = Object.keys(val);
-      if (keys.length > 0 && keys.every((k) => k.includes("#"))) {
-        return val;
+      const entries = Object.entries(val);
+      if (entries.length === 0) continue;
+      const allObjectsWithNumbers = entries.every(([, v2]) => {
+        if (!v2 || typeof v2 !== "object" || Array.isArray(v2)) return false;
+        return Object.values(v2).some((f) => typeof f === "number");
+      });
+      if (allObjectsWithNumbers) {
+        const keyType = entries.some(([k]) => k.includes("#")) ? "runtimeStageId" : "stageName";
+        return { steps: val, keyType };
       }
     }
   }
@@ -4112,21 +4118,27 @@ function KeyedRecorderView({
   selectedIndex
 }) {
   const [showAggregate, setShowAggregate] = (0, import_react19.useState)(false);
-  const steps = (0, import_react19.useMemo)(() => detectKeyedSteps(data), [data]);
-  const visibleIds = (0, import_react19.useMemo)(() => {
-    const ids = /* @__PURE__ */ new Set();
+  const detected = (0, import_react19.useMemo)(() => detectKeyedSteps(data), [data]);
+  const visibleKeys = (0, import_react19.useMemo)(() => {
+    const keys = /* @__PURE__ */ new Set();
     for (let i = 0; i <= selectedIndex && i < snapshots.length; i++) {
-      const id = snapshots[i].runtimeStageId;
-      if (id) ids.add(id);
+      const snap = snapshots[i];
+      if (detected?.keyType === "runtimeStageId") {
+        if (snap.runtimeStageId) keys.add(snap.runtimeStageId);
+      } else {
+        if (snap.stageName) keys.add(snap.stageName);
+        if (snap.stageLabel) keys.add(snap.stageLabel);
+      }
     }
-    return ids;
-  }, [snapshots, selectedIndex]);
+    return keys;
+  }, [snapshots, selectedIndex, detected?.keyType]);
   const isAtEnd = selectedIndex >= snapshots.length - 1;
-  if (!steps) {
+  if (!detected) {
     return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { padding: 12, fontFamily: theme.fontMono, fontSize: 11, whiteSpace: "pre-wrap", overflow: "auto", height: "100%" }, children: typeof data === "string" ? data : JSON.stringify(data, null, 2) });
   }
+  const steps = detected.steps;
   const allKeys = Object.keys(steps);
-  const visibleEntries = allKeys.filter((k) => visibleIds.has(k));
+  const visibleEntries = allKeys.filter((k) => visibleKeys.has(k));
   const numField = allKeys.length > 0 ? findNumericField(steps[allKeys[0]]) : null;
   const numFieldKey = numField?.key ?? "";
   let runningTotal = 0;
@@ -4144,6 +4156,7 @@ function KeyedRecorderView({
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { overflow: "auto", height: "100%", display: "flex", flexDirection: "column" }, children: [
     description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { padding: "6px 12px", fontSize: 11, color: theme.textMuted, fontStyle: "italic", borderBottom: `1px solid ${theme.border}`, flexShrink: 0 }, children: description }),
     /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { padding: 12, flex: 1, overflow: "auto" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 6, fontWeight: 600 }, children: "Translate \u2014 per-step detail" }),
       visibleEntries.map((key) => {
         const entry = steps[key];
         const label = entry.stageName ?? key;
@@ -4155,22 +4168,19 @@ function KeyedRecorderView({
         ] }, key);
       }),
       visibleEntries.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { color: theme.textMuted, fontSize: 11, fontStyle: "italic", padding: "8px 0" }, children: "Scrub the slider to reveal entries..." }),
-      numFieldKey && visibleEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { marginTop: 12, padding: "8px 12px", background: `color-mix(in srgb, ${theme.primary} 8%, transparent)`, borderRadius: 6, fontSize: 12 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { style: { color: theme.textMuted }, children: [
-          "Running total (",
-          numFieldKey,
-          "):"
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { fontWeight: 700, marginLeft: 8, color: theme.primary }, children: runningTotal < 1 ? runningTotal.toFixed(3) : runningTotal.toFixed(1) }),
+      numFieldKey && visibleEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { marginTop: 16, padding: "8px 12px", background: `color-mix(in srgb, ${theme.primary} 8%, transparent)`, borderRadius: 6, fontSize: 12 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 4, fontWeight: 600 }, children: "Accumulate \u2014 running total up to this step" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { fontWeight: 700, fontSize: 16, color: theme.primary }, children: runningTotal < 1 ? runningTotal.toFixed(3) : runningTotal.toFixed(1) }),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { style: { color: theme.textMuted, marginLeft: 8, fontSize: 10 }, children: [
-          "(",
+          numFieldKey,
+          " \xB7 ",
           visibleEntries.length,
           " of ",
           allKeys.length,
-          " steps)"
+          " steps"
         ] })
       ] }),
-      isAtEnd && numFieldKey && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { marginTop: 12 }, children: !showAggregate ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      isAtEnd && numFieldKey && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { marginTop: 16 }, children: !showAggregate ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "button",
         {
           onClick: () => setShowAggregate(true),
@@ -4179,21 +4189,18 @@ function KeyedRecorderView({
             color: "#fff",
             border: "none",
             borderRadius: 6,
-            padding: "8px 16px",
+            padding: "10px 20px",
             fontSize: 12,
             fontWeight: 600,
             cursor: "pointer",
-            fontFamily: "inherit"
+            fontFamily: "inherit",
+            width: "100%"
           },
-          children: [
-            "Aggregate (",
-            numFieldKey,
-            ")"
-          ]
+          children: "Show Aggregate \u2014 Grand Total"
         }
       ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { padding: "10px 14px", background: `color-mix(in srgb, ${theme.success} 12%, transparent)`, borderRadius: 6, border: `1px solid ${theme.success}44` }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 4 }, children: "Aggregate \u2014 Grand Total" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontSize: 20, fontWeight: 700, color: theme.success }, children: grandTotal < 1 ? grandTotal.toFixed(3) : grandTotal.toFixed(1) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 4, fontWeight: 600 }, children: "Aggregate \u2014 grand total across all steps" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { fontSize: 22, fontWeight: 700, color: theme.success }, children: grandTotal < 1 ? grandTotal.toFixed(3) : grandTotal.toFixed(1) }),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { fontSize: 10, color: theme.textMuted, marginTop: 2 }, children: [
           allKeys.length,
           " steps \xB7 ",