@localstack/appinspector-ui 1.0.7 → 1.0.9

package/dist/index.cjs

@@ -3496,11 +3496,11 @@ var SpansListPage = () => {
 };
 
 // src/pages/trace-graph-page.tsx
-var import_icons_material6 = require("@mui/icons-material");
-var import_material14 = require("@mui/material");
+var import_icons_material7 = require("@mui/icons-material");
+var import_material15 = require("@mui/material");
 var import_styles = require("@mui/material/styles");
-var import_react16 = require("@xyflow/react");
-var import_react17 = require("react");
+var import_react18 = require("@xyflow/react");
+var import_react19 = require("react");
 var import_react_router_dom2 = require("react-router-dom");
 
 // src/components/event-details/event-details.tsx
@@ -3652,9 +3652,9 @@ var EventDetails = ({ selectedEvent }) => {
 
 // src/components/trace-graph/trace-graph.tsx
 var import_base = require("@xyflow/react/dist/base.css");
-var import_material13 = require("@mui/material");
-var import_react14 = require("@xyflow/react");
-var import_react15 = require("react");
+var import_material14 = require("@mui/material");
+var import_react16 = require("@xyflow/react");
+var import_react17 = require("react");
 
 // src/components/trace-graph/service-node.tsx
 var import_material12 = require("@mui/material");
@@ -3909,8 +3909,127 @@ var calculateCenterX = (focusNodeX, viewPortPixelWidth, minX, maxX) => {
   return Math.min(Math.max(desiredCenter, minX + viewPortPixelWidth / 2), maxX - viewPortPixelWidth / 2 + nodeWidth);
 };
 
-// src/components/trace-graph/trace-graph.tsx
+// src/components/trace-graph/xyflow/controls.tsx
+var import_icons_material6 = require("@mui/icons-material");
+var import_material13 = require("@mui/material");
+var import_react14 = require("@xyflow/react");
+var import_react15 = require("react");
+
+// node_modules/zustand/esm/shallow.mjs
+function shallow$1(objA, objB) {
+  if (Object.is(objA, objB)) {
+    return true;
+  }
+  if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
+    return false;
+  }
+  if (objA instanceof Map && objB instanceof Map) {
+    if (objA.size !== objB.size) return false;
+    for (const [key, value] of objA) {
+      if (!Object.is(value, objB.get(key))) {
+        return false;
+      }
+    }
+    return true;
+  }
+  if (objA instanceof Set && objB instanceof Set) {
+    if (objA.size !== objB.size) return false;
+    for (const value of objA) {
+      if (!objB.has(value)) {
+        return false;
+      }
+    }
+    return true;
+  }
+  const keysA = Object.keys(objA);
+  if (keysA.length !== Object.keys(objB).length) {
+    return false;
+  }
+  for (const keyA of keysA) {
+    if (!Object.prototype.hasOwnProperty.call(objB, keyA) || !Object.is(objA[keyA], objB[keyA])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+// src/components/trace-graph/xyflow/controls.tsx
 var import_jsx_runtime134 = require("react/jsx-runtime");
+var selector = (s) => ({
+  ariaLabelConfig: s.ariaLabelConfig,
+  isInteractive: s.nodesDraggable || s.nodesConnectable || s.elementsSelectable,
+  maxZoomReached: s.transform[2] >= s.maxZoom,
+  minZoomReached: s.transform[2] <= s.minZoom
+});
+var Controls = (0, import_react15.memo)(() => {
+  const { ariaLabelConfig, maxZoomReached, minZoomReached } = (0, import_react14.useStore)(selector, shallow$1);
+  const { fitView, zoomIn, zoomOut } = (0, import_react14.useReactFlow)();
+  const onZoomInHandler = () => {
+    void zoomIn();
+  };
+  const onZoomOutHandler = () => {
+    void zoomOut();
+  };
+  const onFitViewHandler = () => {
+    void fitView();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
+    import_material13.Box,
+    {
+      "aria-label": ariaLabelConfig["controls.ariaLabel"],
+      sx: {
+        bottom: 0,
+        display: "flex",
+        flexDirection: "column",
+        gap: 1,
+        left: 0,
+        m: 2,
+        position: "absolute",
+        zIndex: 5
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+          import_material13.IconButton,
+          {
+            "aria-label": ariaLabelConfig["controls.zoomIn.ariaLabel"],
+            className: "react-flow__controls-zoomin",
+            disabled: maxZoomReached,
+            onClick: onZoomInHandler,
+            size: "small",
+            title: ariaLabelConfig["controls.zoomIn.ariaLabel"],
+            children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_icons_material6.Add, {})
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+          import_material13.IconButton,
+          {
+            "aria-label": ariaLabelConfig["controls.zoomOut.ariaLabel"],
+            className: "react-flow__controls-zoomout",
+            disabled: minZoomReached,
+            onClick: onZoomOutHandler,
+            size: "small",
+            title: ariaLabelConfig["controls.zoomOut.ariaLabel"],
+            children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_icons_material6.Remove, {})
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+          import_material13.IconButton,
+          {
+            "aria-label": ariaLabelConfig["controls.fitView.ariaLabel"],
+            className: "react-flow__controls-fitview",
+            onClick: onFitViewHandler,
+            size: "small",
+            title: ariaLabelConfig["controls.fitView.ariaLabel"],
+            children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_icons_material6.FitScreen, {})
+          }
+        )
+      ]
+    }
+  );
+});
+
+// src/components/trace-graph/trace-graph.tsx
+var import_jsx_runtime135 = require("react/jsx-runtime");
 var nodeTypes = {
   service: ServiceNode
 };
@@ -3921,12 +4040,12 @@ var TraceGraph = ({
   spans,
   viewPortPixelWidth
 }) => {
-  const [nodes, setNodes] = (0, import_react15.useState)([]);
-  const [edges, setEdges] = (0, import_react15.useState)([]);
-  const [initialViewSet, setInitialViewSet] = (0, import_react15.useState)(false);
-  const { fitView, setCenter } = (0, import_react14.useReactFlow)();
-  const store = (0, import_react14.useStoreApi)();
-  const updateSelectedNode = (0, import_react15.useCallback)(
+  const [nodes, setNodes] = (0, import_react17.useState)([]);
+  const [edges, setEdges] = (0, import_react17.useState)([]);
+  const [initialViewSet, setInitialViewSet] = (0, import_react17.useState)(false);
+  const { fitView, setCenter } = (0, import_react16.useReactFlow)();
+  const store = (0, import_react16.useStoreApi)();
+  const updateSelectedNode = (0, import_react17.useCallback)(
     (nodeId) => {
       const { addSelectedNodes } = store.getState();
       if (nodeId) {
@@ -3938,7 +4057,7 @@ var TraceGraph = ({
     },
     [nodes, store]
   );
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const spansMap = /* @__PURE__ */ new Map();
     const rootSpans = [];
     for (const span of spans.data ?? []) {
@@ -3970,7 +4089,7 @@ var TraceGraph = ({
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
   }, [onEventSelect, spans.data]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const shouldSetInitialView = !spans.loading && nodes.length > 0 && !initialViewSet;
     if (shouldSetInitialView) {
       if (initialFocusEventId) {
@@ -3990,20 +4109,20 @@ var TraceGraph = ({
       setInitialViewSet(true);
     }
   }, [spans.loading, nodes, initialFocusEventId, viewPortPixelWidth, setCenter, fitView, onEventSelect, initialViewSet]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (initialFocusEventId) {
       updateSelectedNode(initialFocusEventId);
     }
   }, [initialFocusEventId, updateSelectedNode]);
-  const onNodeClick = (0, import_react15.useCallback)((_event, node) => {
+  const onNodeClick = (0, import_react17.useCallback)((_event, node) => {
     onEventSelect(node.data.event);
     updateSelectedNode(node.id);
   }, [onEventSelect, updateSelectedNode]);
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(import_jsx_runtime134.Fragment, { children: [
-    spans.error && /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
-      import_material13.Alert,
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, { children: [
+    spans.error && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
+      import_material14.Alert,
       {
-        action: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_material13.Button, { onClick: () => {
+        action: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material14.Button, { onClick: () => {
           onRefresh();
         }, children: "Retry" }),
         severity: "error",
@@ -4014,8 +4133,8 @@ var TraceGraph = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
-      import_react14.ReactFlow,
+    /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
+      import_react16.ReactFlow,
       {
         "data-testid": "trace-graph",
         defaultViewport: { x: 0, y: 0, zoom: 1 },
@@ -4028,8 +4147,8 @@ var TraceGraph = ({
         onNodeClick,
         selectNodesOnDrag: false,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_react14.Controls, { showInteractive: false }),
-          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_react14.Background, {})
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Controls, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_react16.Background, {})
         ]
       }
     )
@@ -4037,7 +4156,7 @@ var TraceGraph = ({
 };
 
 // src/pages/trace-graph-page.tsx
-var import_jsx_runtime135 = require("react/jsx-runtime");
+var import_jsx_runtime136 = 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 }) => ({
@@ -4055,7 +4174,7 @@ var Main = (0, import_styles.styled)("main", { shouldForwardProp: (property) =>
     })
   }
 }));
-var StyledDrawer = (0, import_styles.styled)(import_material14.Drawer)(() => ({
+var StyledDrawer = (0, import_styles.styled)(import_material15.Drawer)(() => ({
   "& .MuiDrawer-paper": {
     bottom: 0,
     boxSizing: "border-box",
@@ -4073,10 +4192,10 @@ var TraceGraphPage = () => {
   const [searchParameters] = (0, import_react_router_dom2.useSearchParams)();
   const spanId = searchParameters.get("spanId");
   const api = useAppInspectorApi();
-  const [spans, setSpans] = (0, import_react17.useState)();
-  const [loading, setLoading] = (0, import_react17.useState)(false);
-  const [fetchError, setFetchError] = (0, import_react17.useState)();
-  const fetchSpans = (0, import_react17.useCallback)(async () => {
+  const [spans, setSpans] = (0, import_react19.useState)();
+  const [loading, setLoading] = (0, import_react19.useState)(false);
+  const [fetchError, setFetchError] = (0, import_react19.useState)();
+  const fetchSpans = (0, import_react19.useCallback)(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans({
@@ -4091,14 +4210,14 @@ var TraceGraphPage = () => {
       setLoading(false);
     }
   }, [api, traceId]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     void fetchSpans();
   }, [fetchSpans]);
-  const [open, setOpen] = (0, import_react17.useState)(true);
-  const [selectedEvent, setSelectedEvent] = (0, import_react17.useState)();
-  const [viewPortPixelWidth, setViewPortPixelWidth] = (0, import_react17.useState)(0);
+  const [open, setOpen] = (0, import_react19.useState)(true);
+  const [selectedEvent, setSelectedEvent] = (0, import_react19.useState)();
+  const [viewPortPixelWidth, setViewPortPixelWidth] = (0, import_react19.useState)(0);
   const { checkStatus, error: statusError, status } = useStatus();
-  const calculateDrawerWidth = (0, import_react17.useCallback)(() => {
+  const calculateDrawerWidth = (0, import_react19.useCallback)(() => {
     const percentageMatch = /(\d+)%/.exec(DRAWER_WIDTH);
     if (percentageMatch && open) {
       const percentage = Number.parseInt(percentageMatch[1], 10);
@@ -4106,7 +4225,7 @@ var TraceGraphPage = () => {
     }
     return 0;
   }, [open]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const updateViewportWidth = () => {
       const totalWidth = window.innerWidth;
       const drawerPixelWidth = open ? calculateDrawerWidth() : 0;
@@ -4120,22 +4239,22 @@ var TraceGraphPage = () => {
       clearTimeout(timeoutId);
     };
   }, [open, calculateDrawerWidth]);
-  const handleEventSelect = (0, import_react17.useCallback)((event) => {
+  const handleEventSelect = (0, import_react19.useCallback)((event) => {
     setSelectedEvent(event);
     setOpen(true);
   }, []);
-  const handleRetry = (0, import_react17.useCallback)(() => {
+  const handleRetry = (0, import_react19.useCallback)(() => {
     void checkStatus();
   }, [checkStatus]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
   const navigate = (0, import_react_router_dom2.useNavigate)();
   const { resolveLink } = useAppInspector();
-  const navigateToSpansList = (0, import_react17.useCallback)(() => {
+  const navigateToSpansList = (0, import_react19.useCallback)(() => {
     const url = resolveLink({ to: "spans-list" });
     navigate(url);
   }, [navigate, resolveLink]);
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
-    import_material14.Box,
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
+    import_material15.Box,
     {
       "data-testid": "trace-graph-page",
       sx: {
@@ -4147,14 +4266,14 @@ var TraceGraphPage = () => {
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_material14.Box, { sx: { display: "flex", width: "100%" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material14.Button, { onClick: () => {
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_material15.Box, { sx: { display: "flex", width: "100%" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Button, { onClick: () => {
             navigateToSpansList();
-          }, startIcon: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_icons_material6.ArrowBack, {}), children: "Go back" }),
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_material14.Box, { sx: { flexGrow: 1 } })
+          }, startIcon: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_icons_material7.ArrowBack, {}), children: "Go back" }),
+          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_material15.Box, { sx: { flexGrow: 1 } })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
-          import_material14.Paper,
+        /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+          import_material15.Paper,
           {
             sx: {
               display: "flex",
@@ -4163,22 +4282,22 @@ var TraceGraphPage = () => {
               position: "relative",
               width: "100%"
             },
-            children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+            children: shouldShowStatusMessage ? /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
               StatusMessage,
               {
                 error: statusError,
                 onRetry: handleRetry,
                 status
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_jsx_runtime135.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Main, { open, children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
-                import_material14.Box,
+            ) : /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_jsx_runtime136.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Main, { open, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+                import_material15.Box,
                 {
                   sx: {
                     height: "100%",
                     overflow: "auto"
                   },
-                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_react16.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+                  children: traceId !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_react18.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
                     TraceGraph,
                     {
                       initialFocusEventId: spanId,
@@ -4196,7 +4315,7 @@ var TraceGraphPage = () => {
                   ) })
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(EventDetails, { selectedEvent }) })
+              /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(EventDetails, { selectedEvent }) })
             ] })
           }
         )