@localstack/appinspector-ui 1.0.136 → 1.0.138

package/dist/index.d.cts

@@ -21,6 +21,10 @@ interface AppInspectorContextProviderProps {
      * when omitted. VS Code consumers pass `{ source: 'vscode', ideVersion, extensionVersion }`.
      */
     deploymentContainer?: DeploymentContainer;
+    /**
+     * Height of the host application's header in pixels. Defaults to 0.
+     */
+    headerHeight?: number;
     /**
      * A component that renders a link.
      */

package/dist/index.d.ts

@@ -21,6 +21,10 @@ interface AppInspectorContextProviderProps {
      * when omitted. VS Code consumers pass `{ source: 'vscode', ideVersion, extensionVersion }`.
      */
     deploymentContainer?: DeploymentContainer;
+    /**
+     * Height of the host application's header in pixels. Defaults to 0.
+     */
+    headerHeight?: number;
     /**
      * A component that renders a link.
      */

package/dist/index.js

@@ -15779,7 +15779,7 @@ var SpansDataGrid = ({
           Box5,
           {
             "data-testid": ERROR_COUNT_TEST_ID,
-            sx: { alignItems: "center", borderBottom: "1px dotted", borderColor: "error.main", cursor: "default", display: "flex", gap: 0.5, mb: "-1px" },
+            sx: { alignItems: "center", borderBottom: "1px dotted", borderColor: "error.main", cursor: "help", display: "flex", gap: 0.5, mb: "-1px" },
             children: [
               /* @__PURE__ */ jsx127(Typography4, { color: "error", variant: "body2", children: errorCount.toLocaleString() }),
               /* @__PURE__ */ jsx127(Typography4, { color: "error", variant: "caption", children: errorCount === 1 ? "error" : "errors" })
@@ -15793,7 +15793,7 @@ var SpansDataGrid = ({
           Box5,
           {
             "data-testid": WARNING_COUNT_TEST_ID,
-            sx: { alignItems: "center", borderBottom: "1px dotted", borderColor: "warning.main", cursor: "default", display: "flex", gap: 0.5, mb: "-1px" },
+            sx: { alignItems: "center", borderBottom: "1px dotted", borderColor: "warning.main", cursor: "help", display: "flex", gap: 0.5, mb: "-1px" },
             children: [
               /* @__PURE__ */ jsx127(Typography4, { color: "warning.main", variant: "body2", children: warningCount.toLocaleString() }),
               /* @__PURE__ */ jsx127(Typography4, { color: "warning.main", variant: "caption", children: warningCount === 1 ? "warning" : "warnings" })
@@ -15815,7 +15815,8 @@ var SpansDataGrid = ({
             }
           ),
           disabled: clearingSpans,
-          label: ""
+          label: "",
+          sx: { marginRight: 0 }
         }
       )
     ] }) }),
@@ -18694,11 +18695,12 @@ var AppInspectorContextProvider = (props) => {
   const contextValue = useMemo5(
     () => ({
       deploymentContainer,
+      headerHeight: props.headerHeight ?? 0,
       linkComponent: props.linkComponent,
       localstackEndpoint: props.localstackEndpoint,
       resolveLink
     }),
-    [deploymentContainer, props.linkComponent, props.localstackEndpoint, resolveLink]
+    [deploymentContainer, props.headerHeight, props.linkComponent, props.localstackEndpoint, resolveLink]
   );
   return /* @__PURE__ */ jsx131(ApiProvider, { api, children: /* @__PURE__ */ jsx131(StatusProvider, { children: /* @__PURE__ */ jsx131(AppInspectorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx131(AppInspectorAnalyticsBoundary, { children: props.children }) }) }) });
 };
@@ -31964,7 +31966,6 @@ var TraceGraph = ({
 
 // src/pages/trace-graph-page.tsx
 import { jsx as jsx145, jsxs as jsxs134 } from "react/jsx-runtime";
-var HEADER_HEIGHT = 56;
 var DRAWER_WIDTH = "35%";
 var Main = styled("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
   flexGrow: 1,
@@ -31981,11 +31982,11 @@ var Main = styled("main", { shouldForwardProp: (property) => property !== "open"
     })
   }
 }));
-var StyledDrawer = styled(Drawer)(() => ({
+var StyledDrawer = styled(Drawer)(({ headerHeight }) => ({
   "& .MuiDrawer-paper": {
     bottom: 0,
     boxSizing: "border-box",
-    height: `calc(100% - ${HEADER_HEIGHT.toString()}px)`,
+    height: `calc(100% - ${headerHeight.toString()}px)`,
     overflowY: "auto",
     top: "auto",
     width: DRAWER_WIDTH
@@ -31999,6 +32000,7 @@ var TraceGraphView = ({
   fetchSpans,
   handleClose,
   handleEventSelect,
+  headerHeight,
   loading,
   navigateToSpansList,
   open,
@@ -32060,7 +32062,7 @@ var TraceGraphView = ({
                 ) })
               }
             ) }),
-            /* @__PURE__ */ jsx145(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx145(EventDetails, { onClose: handleClose, selectedEvent }) })
+            /* @__PURE__ */ jsx145(StyledDrawer, { anchor: "right", headerHeight, open, variant: "persistent", children: /* @__PURE__ */ jsx145(EventDetails, { onClose: handleClose, selectedEvent }) })
           ]
         }
       )
@@ -32103,6 +32105,7 @@ async function fetchConnectedTraces(api, traceIds, allSpans = /* @__PURE__ */ ne
 }
 var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
+  const { headerHeight } = useAppInspector();
   const [spans, setSpans] = useState17();
   const [loading, setLoading] = useState17(false);
   const [fetchError, setFetchError] = useState17();
@@ -32148,6 +32151,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
         setOpen(false);
       },
       handleEventSelect,
+      headerHeight,
       loading,
       navigateToSpansList,
       open,