@localstack/appinspector-ui 1.0.136 → 1.0.138

package/dist/index.cjs

@@ -15766,7 +15766,7 @@ var SpansDataGrid = ({
           import_material7.Box,
           {
             "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__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { color: "error", variant: "body2", children: errorCount.toLocaleString() }),
               /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { color: "error", variant: "caption", children: errorCount === 1 ? "error" : "errors" })
@@ -15780,7 +15780,7 @@ var SpansDataGrid = ({
           import_material7.Box,
           {
             "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__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { color: "warning.main", variant: "body2", children: warningCount.toLocaleString() }),
               /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_material7.Typography, { color: "warning.main", variant: "caption", children: warningCount === 1 ? "warning" : "warnings" })
@@ -15802,7 +15802,8 @@ var SpansDataGrid = ({
             }
           ),
           disabled: clearingSpans,
-          label: ""
+          label: "",
+          sx: { marginRight: 0 }
         }
       )
     ] }) }),
@@ -18681,11 +18682,12 @@ var AppInspectorContextProvider = (props) => {
   const contextValue = (0, import_react45.useMemo)(
     () => ({
       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__ */ (0, import_jsx_runtime131.jsx)(ApiProvider, { api, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(StatusProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(AppInspectorContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(AppInspectorAnalyticsBoundary, { children: props.children }) }) }) });
 };
@@ -31951,7 +31953,6 @@ var TraceGraph = ({
 
 // src/pages/trace-graph-page.tsx
 var import_jsx_runtime145 = require("react/jsx-runtime");
-var HEADER_HEIGHT = 56;
 var DRAWER_WIDTH = "35%";
 var Main = (0, import_styles.styled)("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
   flexGrow: 1,
@@ -31968,11 +31969,11 @@ var Main = (0, import_styles.styled)("main", { shouldForwardProp: (property) =>
     })
   }
 }));
-var StyledDrawer = (0, import_styles.styled)(import_material23.Drawer)(() => ({
+var StyledDrawer = (0, import_styles.styled)(import_material23.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
@@ -31986,6 +31987,7 @@ var TraceGraphView = ({
   fetchSpans,
   handleClose,
   handleEventSelect,
+  headerHeight,
   loading,
   navigateToSpansList,
   open,
@@ -32047,7 +32049,7 @@ var TraceGraphView = ({
                 ) })
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(EventDetails, { onClose: handleClose, selectedEvent }) })
+            /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(StyledDrawer, { anchor: "right", headerHeight, open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(EventDetails, { onClose: handleClose, selectedEvent }) })
           ]
         }
       )
@@ -32090,6 +32092,7 @@ async function fetchConnectedTraces(api, traceIds, allSpans = /* @__PURE__ */ ne
 }
 var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const api = useAppInspectorApi();
+  const { headerHeight } = useAppInspector();
   const [spans, setSpans] = (0, import_react63.useState)();
   const [loading, setLoading] = (0, import_react63.useState)(false);
   const [fetchError, setFetchError] = (0, import_react63.useState)();
@@ -32135,6 +32138,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
         setOpen(false);
       },
       handleEventSelect,
+      headerHeight,
       loading,
       navigateToSpansList,
       open,