footprint-explainable-ui 0.3.2 → 0.4.0

package/dist/index.js

@@ -644,7 +644,7 @@ function NarrativeTrace({
 }
 
 // src/components/GanttTimeline/GanttTimeline.tsx
-import { useMemo as useMemo4 } from "react";
+import { useState as useState2, useMemo as useMemo4, useRef as useRef2, useEffect as useEffect2 } from "react";
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function GanttTimeline({
   snapshots,
@@ -653,8 +653,12 @@ function GanttTimeline({
   size = "default",
   unstyled = false,
   className,
-  style
+  style,
+  maxVisibleRows = 5
 }) {
+  const [expanded, setExpanded] = useState2(false);
+  const activeRowRef = useRef2(null);
+  const scrollContainerRef = useRef2(null);
   const totalWallTime = useMemo4(
     () => Math.max(...snapshots.map((s) => s.startMs + s.durationMs), 1),
     [snapshots]
@@ -663,6 +667,17 @@ function GanttTimeline({
   const pad = padding[size];
   const labelWidth = size === "compact" ? 50 : size === "detailed" ? 100 : 80;
   const msWidth = size === "compact" ? 28 : 36;
+  const rowHeight = size === "compact" ? 18 : 22;
+  const collapsible = maxVisibleRows > 0 && snapshots.length > maxVisibleRows;
+  const showAll = expanded || !collapsible;
+  useEffect2(() => {
+    if (!showAll && activeRowRef.current && scrollContainerRef.current) {
+      activeRowRef.current.scrollIntoView({
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  }, [selectedIndex, showAll]);
   if (unstyled) {
     return /* @__PURE__ */ jsx5("div", { className, style, "data-fp": "gantt-timeline", children: snapshots.map((snap, idx) => /* @__PURE__ */ jsxs4(
       "div",
@@ -689,27 +704,62 @@ function GanttTimeline({
       style: { padding: pad, fontFamily: theme.fontSans, ...style },
       "data-fp": "gantt-timeline",
       children: [
-        /* @__PURE__ */ jsx5(
-          "span",
+        /* @__PURE__ */ jsxs4(
+          "div",
           {
             style: {
-              fontSize: fs.label,
-              fontWeight: 600,
-              color: theme.textMuted,
-              textTransform: "uppercase",
-              letterSpacing: "0.08em"
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between"
             },
-            children: size === "compact" ? "Timeline" : "Execution Timeline"
+            children: [
+              /* @__PURE__ */ jsx5(
+                "span",
+                {
+                  style: {
+                    fontSize: fs.label,
+                    fontWeight: 600,
+                    color: theme.textMuted,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.08em"
+                  },
+                  children: size === "compact" ? "Timeline" : "Execution Timeline"
+                }
+              ),
+              collapsible && /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  onClick: () => setExpanded((e) => !e),
+                  style: {
+                    background: "none",
+                    border: `1px solid ${theme.border}`,
+                    borderRadius: 4,
+                    color: theme.textSecondary,
+                    fontSize: fs.small,
+                    padding: "2px 8px",
+                    cursor: "pointer",
+                    fontFamily: theme.fontSans
+                  },
+                  children: expanded ? "Collapse" : `${snapshots.length - maxVisibleRows} more...`
+                }
+              )
+            ]
           }
         ),
         /* @__PURE__ */ jsx5(
           "div",
           {
+            ref: scrollContainerRef,
             style: {
               marginTop: 8,
               display: "flex",
               flexDirection: "column",
-              gap: 4
+              gap: 4,
+              ...showAll ? {} : {
+                maxHeight: maxVisibleRows * (rowHeight + 4),
+                overflowY: "auto",
+                scrollbarWidth: "thin"
+              }
             },
             children: snapshots.map((snap, idx) => {
               const leftPct = snap.startMs / totalWallTime * 100;
@@ -719,6 +769,7 @@ function GanttTimeline({
               return /* @__PURE__ */ jsxs4(
                 "div",
                 {
+                  ref: isSelected ? activeRowRef : void 0,
                   onClick: () => onSelect?.(idx),
                   style: {
                     display: "flex",
@@ -726,7 +777,9 @@ function GanttTimeline({
                     gap: size === "compact" ? 4 : 8,
                     cursor: onSelect ? "pointer" : "default",
                     opacity: isVisible ? 1 : 0.3,
-                    transition: "opacity 0.3s ease"
+                    transition: "opacity 0.3s ease",
+                    height: rowHeight,
+                    flexShrink: 0
                   },
                   children: [
                     /* @__PURE__ */ jsx5(
@@ -828,7 +881,7 @@ function GanttTimeline({
 }
 
 // src/components/SnapshotPanel/SnapshotPanel.tsx
-import { useState as useState2 } from "react";
+import { useState as useState3 } from "react";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function SnapshotPanel({
   snapshots,
@@ -840,7 +893,7 @@ function SnapshotPanel({
   className,
   style
 }) {
-  const [selectedIndex, setSelectedIndex] = useState2(0);
+  const [selectedIndex, setSelectedIndex] = useState3(0);
   const fs = fontSize[size];
   const pad = padding[size];
   if (snapshots.length === 0) {
@@ -1331,7 +1384,7 @@ function ResultPanel({
 }
 
 // src/components/TimeTravelControls/TimeTravelControls.tsx
-import { useState as useState3, useEffect as useEffect2, useRef as useRef2, useCallback as useCallback2 } from "react";
+import { useState as useState4, useEffect as useEffect3, useRef as useRef3, useCallback as useCallback2 } from "react";
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function TimeTravelControls({
   snapshots,
@@ -1343,12 +1396,12 @@ function TimeTravelControls({
   className,
   style
 }) {
-  const [playing, setPlaying] = useState3(false);
-  const playRef = useRef2(null);
+  const [playing, setPlaying] = useState4(false);
+  const playRef = useRef3(null);
   const total = snapshots.length;
   const canPrev = selectedIndex > 0;
   const canNext = selectedIndex < total - 1;
-  useEffect2(() => {
+  useEffect3(() => {
     if (!playing || !autoPlayable) return;
     if (selectedIndex >= total - 1) {
       setPlaying(false);
@@ -1535,7 +1588,7 @@ function TimeTravelControls({
 }
 
 // src/components/ExplainableShell/ExplainableShell.tsx
-import { useState as useState4, useCallback as useCallback3, useMemo as useMemo6 } from "react";
+import { useState as useState5, useCallback as useCallback3, useMemo as useMemo6 } from "react";
 import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function ExplainableShell({
   snapshots,
@@ -1551,8 +1604,8 @@ function ExplainableShell({
   className,
   style
 }) {
-  const [activeTab, setActiveTab] = useState4(defaultTab ?? tabs[0]);
-  const [snapshotIdx, setSnapshotIdx] = useState4(0);
+  const [activeTab, setActiveTab] = useState5(defaultTab ?? tabs[0]);
+  const [snapshotIdx, setSnapshotIdx] = useState5(0);
   const fs = fontSize[size];
   const pad = padding[size];
   const handleSnapshotChange = useCallback3((idx) => {