@localstack/appinspector-ui 1.0.188 → 1.0.189

package/dist/index.cjs

@@ -2524,6 +2524,7 @@ var FILTER_CONSUMER_TEST_ID = "filter-consumer";
 var HIDDEN_OPS_NOTE_TEST_ID = "hidden-ops-note";
 var TRACE_SIDEBAR_TEST_ID = "trace-sidebar";
 var TRACE_SIDEBAR_RESIZE_HANDLE_TEST_ID = "trace-sidebar-resize-handle";
+var TRACE_SIDEBAR_SPLIT_HANDLE_TEST_ID = "trace-sidebar-split-handle";
 var TRACE_SIDEBAR_WATERFALL_BUTTON_TEST_ID = "trace-sidebar-waterfall-button";
 var TRACE_SIDEBAR_MAP_BUTTON_TEST_ID = "trace-sidebar-map-button";
 var TRACE_SIDEBAR_ROOT_HEADING_TEST_ID = "trace-sidebar-root-heading";
@@ -32600,12 +32601,20 @@ var MIN_WIDTH = 360;
 var MAX_WIDTH_SHARE = 0.8;
 var KEYBOARD_STEP = 24;
 var WIDTH_STORAGE_KEY = "appinspector-trace-sidebar-width";
+var DEFAULT_SPLIT = 0.4;
+var MIN_SPLIT = 0.15;
+var MAX_SPLIT = 0.7;
+var KEYBOARD_SPLIT_STEP = 0.05;
+var SPLIT_STORAGE_KEY = "appinspector-trace-sidebar-split";
+var clampSplit = (split2) => Math.min(MAX_SPLIT, Math.max(MIN_SPLIT, split2));
 var noop = () => void 0;
 var TraceSidebar = ({ onClose, onSelectSpan, selectedSpanId, spanMatches, spans }) => {
   const { requestTerms } = useDevSettings();
   const [storedWidth, setStoredWidth] = useLocalStorage(WIDTH_STORAGE_KEY, DEFAULT_WIDTH);
+  const [storedSplit, setStoredSplit] = useLocalStorage(SPLIT_STORAGE_KEY, DEFAULT_SPLIT);
   const [view, setView] = React125.useState("waterfall");
   const sidebarRef = React125.useRef(null);
+  const traceViewRef = React125.useRef(null);
   const clampWidth = (width) => {
     const parentWidth = sidebarRef.current?.parentElement?.clientWidth;
     const max2 = parentWidth === void 0 || parentWidth === 0 ? Number.POSITIVE_INFINITY : Math.max(MIN_WIDTH, parentWidth * MAX_WIDTH_SHARE);
@@ -32628,6 +32637,19 @@ var TraceSidebar = ({ onClose, onSelectSpan, selectedSpanId, spanMatches, spans
     event.preventDefault();
     setStoredWidth(clampWidth(storedWidth + delta));
   };
+  const handleSplitPointerMove = (event) => {
+    if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
+    const sidebarHeight = sidebarRef.current?.clientHeight;
+    const traceViewTop = traceViewRef.current?.getBoundingClientRect().top;
+    if (!sidebarHeight || traceViewTop === void 0) return;
+    setStoredSplit(clampSplit((event.clientY - traceViewTop) / sidebarHeight));
+  };
+  const handleSplitKeyDown = (event) => {
+    const delta = event.key === "ArrowUp" ? -KEYBOARD_SPLIT_STEP : event.key === "ArrowDown" ? KEYBOARD_SPLIT_STEP : 0;
+    if (delta === 0) return;
+    event.preventDefault();
+    setStoredSplit(clampSplit(storedSplit + delta));
+  };
   const { root: root2, selectedSpan, stats } = React125.useMemo(() => {
     const tree = buildTraceTree(spans);
     const issues = spans.map((span) => getSpanIssues(span));
@@ -32726,7 +32748,7 @@ var TraceSidebar = ({ onClose, onSelectSpan, selectedSpanId, spanMatches, spans
           ),
           /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(import_material25.IconButton, { "aria-label": "Close", "data-testid": EVENT_DETAILS_CLOSE_BUTTON_TEST_ID, onClick: onClose, size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(import_icons_material15.Close, {}) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(import_material25.Box, { sx: { borderBottom: 1, borderColor: "divider", display: "flex", flex: "0 0 40%", flexDirection: "column", minHeight: 0, overflow: "auto", position: "relative" }, children: view === "waterfall" ? /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(Waterfall, { onSelectSpan, selectedSpanId, spanMatches, spans }) : /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(import_material25.Box, { sx: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(import_react61.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(import_material25.Box, { ref: traceViewRef, sx: { borderBottom: 1, borderColor: "divider", display: "flex", flex: `0 0 ${String(storedSplit * 100)}%`, flexDirection: "column", minHeight: 0, overflow: "auto", position: "relative" }, children: view === "waterfall" ? /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(Waterfall, { onSelectSpan, selectedSpanId, spanMatches, spans }) : /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(import_material25.Box, { sx: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(import_react61.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
           TraceGraph,
           {
             hideMiniMap: true,
@@ -32736,6 +32758,35 @@ var TraceSidebar = ({ onClose, onSelectSpan, selectedSpanId, spanMatches, spans
             spans: { data: spans, error: void 0, loading: false }
           }
         ) }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(import_material25.Box, { sx: { flexShrink: 0, position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
+          import_material25.Box,
+          {
+            "aria-label": "Resize the operation details",
+            "aria-orientation": "horizontal",
+            "aria-valuemax": MAX_SPLIT * 100,
+            "aria-valuemin": MIN_SPLIT * 100,
+            "aria-valuenow": Math.round(storedSplit * 100),
+            "data-testid": TRACE_SIDEBAR_SPLIT_HANDLE_TEST_ID,
+            onKeyDown: handleSplitKeyDown,
+            onPointerDown: handlePointerDown,
+            onPointerMove: handleSplitPointerMove,
+            onPointerUp: handlePointerUp,
+            role: "separator",
+            sx: {
+              "&:hover, &:focus-visible, &:active": { backgroundColor: "primary.main", opacity: 0.5 },
+              "cursor": "row-resize",
+              "height": 6,
+              "left": 0,
+              "outline": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": -4,
+              "touchAction": "none",
+              "zIndex": 2
+            },
+            tabIndex: 0
+          }
+        ) }),
         /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(import_material25.Box, { sx: { flex: 1, minHeight: 0 }, children: selectedSpan ? /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(EventDetails, { selectedEvent: selectedSpan }) : /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(import_material25.Typography, { color: "text.secondary", sx: { p: 3, textAlign: "center" }, variant: "body2", children: "The selected operation is not part of this trace." }) })
       ]
     }