@localstack/appinspector-ui 1.0.7 → 1.0.9

package/dist/index.js

@@ -3460,7 +3460,7 @@ var SpansListPage = () => {
 
 // src/pages/trace-graph-page.tsx
 import { ArrowBack } from "@mui/icons-material";
-import { Box as Box12, Button as Button5, Drawer, Paper as Paper2 } from "@mui/material";
+import { Box as Box13, Button as Button5, Drawer, Paper as Paper2 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactFlowProvider } from "@xyflow/react";
 import { useCallback as useCallback8, useEffect as useEffect6, useState as useState8 } from "react";
@@ -3616,7 +3616,7 @@ var EventDetails = ({ selectedEvent }) => {
 // src/components/trace-graph/trace-graph.tsx
 import "@xyflow/react/dist/base.css";
 import { Alert as Alert3, Button as Button4 } from "@mui/material";
-import { Background, Controls, ReactFlow, useReactFlow, useStoreApi } from "@xyflow/react";
+import { Background, ReactFlow, useReactFlow as useReactFlow2, useStoreApi } from "@xyflow/react";
 import { useCallback as useCallback7, useEffect as useEffect5, useState as useState7 } from "react";
 
 // src/components/trace-graph/service-node.tsx
@@ -3872,8 +3872,127 @@ var calculateCenterX = (focusNodeX, viewPortPixelWidth, minX, maxX) => {
   return Math.min(Math.max(desiredCenter, minX + viewPortPixelWidth / 2), maxX - viewPortPixelWidth / 2 + nodeWidth);
 };
 
+// src/components/trace-graph/xyflow/controls.tsx
+import { Add, FitScreen, Remove } from "@mui/icons-material";
+import { Box as Box12, IconButton as IconButton2 } from "@mui/material";
+import { useReactFlow, useStore } from "@xyflow/react";
+import { memo as memo2 } from "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
+import { jsx as jsx134, jsxs as jsxs127 } from "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 = memo2(() => {
+  const { ariaLabelConfig, maxZoomReached, minZoomReached } = useStore(selector, shallow$1);
+  const { fitView, zoomIn, zoomOut } = useReactFlow();
+  const onZoomInHandler = () => {
+    void zoomIn();
+  };
+  const onZoomOutHandler = () => {
+    void zoomOut();
+  };
+  const onFitViewHandler = () => {
+    void fitView();
+  };
+  return /* @__PURE__ */ jsxs127(
+    Box12,
+    {
+      "aria-label": ariaLabelConfig["controls.ariaLabel"],
+      sx: {
+        bottom: 0,
+        display: "flex",
+        flexDirection: "column",
+        gap: 1,
+        left: 0,
+        m: 2,
+        position: "absolute",
+        zIndex: 5
+      },
+      children: [
+        /* @__PURE__ */ jsx134(
+          IconButton2,
+          {
+            "aria-label": ariaLabelConfig["controls.zoomIn.ariaLabel"],
+            className: "react-flow__controls-zoomin",
+            disabled: maxZoomReached,
+            onClick: onZoomInHandler,
+            size: "small",
+            title: ariaLabelConfig["controls.zoomIn.ariaLabel"],
+            children: /* @__PURE__ */ jsx134(Add, {})
+          }
+        ),
+        /* @__PURE__ */ jsx134(
+          IconButton2,
+          {
+            "aria-label": ariaLabelConfig["controls.zoomOut.ariaLabel"],
+            className: "react-flow__controls-zoomout",
+            disabled: minZoomReached,
+            onClick: onZoomOutHandler,
+            size: "small",
+            title: ariaLabelConfig["controls.zoomOut.ariaLabel"],
+            children: /* @__PURE__ */ jsx134(Remove, {})
+          }
+        ),
+        /* @__PURE__ */ jsx134(
+          IconButton2,
+          {
+            "aria-label": ariaLabelConfig["controls.fitView.ariaLabel"],
+            className: "react-flow__controls-fitview",
+            onClick: onFitViewHandler,
+            size: "small",
+            title: ariaLabelConfig["controls.fitView.ariaLabel"],
+            children: /* @__PURE__ */ jsx134(FitScreen, {})
+          }
+        )
+      ]
+    }
+  );
+});
+
 // src/components/trace-graph/trace-graph.tsx
-import { Fragment as Fragment4, jsx as jsx134, jsxs as jsxs127 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx135, jsxs as jsxs128 } from "react/jsx-runtime";
 var nodeTypes = {
   service: ServiceNode
 };
@@ -3887,7 +4006,7 @@ var TraceGraph = ({
   const [nodes, setNodes] = useState7([]);
   const [edges, setEdges] = useState7([]);
   const [initialViewSet, setInitialViewSet] = useState7(false);
-  const { fitView, setCenter } = useReactFlow();
+  const { fitView, setCenter } = useReactFlow2();
   const store = useStoreApi();
   const updateSelectedNode = useCallback7(
     (nodeId) => {
@@ -3962,11 +4081,11 @@ var TraceGraph = ({
     onEventSelect(node.data.event);
     updateSelectedNode(node.id);
   }, [onEventSelect, updateSelectedNode]);
-  return /* @__PURE__ */ jsxs127(Fragment4, { children: [
-    spans.error && /* @__PURE__ */ jsxs127(
+  return /* @__PURE__ */ jsxs128(Fragment4, { children: [
+    spans.error && /* @__PURE__ */ jsxs128(
       Alert3,
       {
-        action: /* @__PURE__ */ jsx134(Button4, { onClick: () => {
+        action: /* @__PURE__ */ jsx135(Button4, { onClick: () => {
           onRefresh();
         }, children: "Retry" }),
         severity: "error",
@@ -3977,7 +4096,7 @@ var TraceGraph = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs127(
+    /* @__PURE__ */ jsxs128(
       ReactFlow,
       {
         "data-testid": "trace-graph",
@@ -3991,8 +4110,8 @@ var TraceGraph = ({
         onNodeClick,
         selectNodesOnDrag: false,
         children: [
-          /* @__PURE__ */ jsx134(Controls, { showInteractive: false }),
-          /* @__PURE__ */ jsx134(Background, {})
+          /* @__PURE__ */ jsx135(Controls, {}),
+          /* @__PURE__ */ jsx135(Background, {})
         ]
       }
     )
@@ -4000,7 +4119,7 @@ var TraceGraph = ({
 };
 
 // src/pages/trace-graph-page.tsx
-import { Fragment as Fragment5, jsx as jsx135, jsxs as jsxs128 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx136, jsxs as jsxs129 } from "react/jsx-runtime";
 var HEADER_HEIGHT = 56;
 var DRAWER_WIDTH = "35%";
 var Main = styled("main", { shouldForwardProp: (property) => property !== "open" })(({ open, theme }) => ({
@@ -4097,8 +4216,8 @@ var TraceGraphPage = () => {
     const url = resolveLink({ to: "spans-list" });
     navigate(url);
   }, [navigate, resolveLink]);
-  return /* @__PURE__ */ jsxs128(
-    Box12,
+  return /* @__PURE__ */ jsxs129(
+    Box13,
     {
       "data-testid": "trace-graph-page",
       sx: {
@@ -4110,13 +4229,13 @@ var TraceGraphPage = () => {
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ jsxs128(Box12, { sx: { display: "flex", width: "100%" }, children: [
-          /* @__PURE__ */ jsx135(Button5, { onClick: () => {
+        /* @__PURE__ */ jsxs129(Box13, { sx: { display: "flex", width: "100%" }, children: [
+          /* @__PURE__ */ jsx136(Button5, { onClick: () => {
             navigateToSpansList();
-          }, startIcon: /* @__PURE__ */ jsx135(ArrowBack, {}), children: "Go back" }),
-          /* @__PURE__ */ jsx135(Box12, { sx: { flexGrow: 1 } })
+          }, startIcon: /* @__PURE__ */ jsx136(ArrowBack, {}), children: "Go back" }),
+          /* @__PURE__ */ jsx136(Box13, { sx: { flexGrow: 1 } })
         ] }),
-        /* @__PURE__ */ jsx135(
+        /* @__PURE__ */ jsx136(
           Paper2,
           {
             sx: {
@@ -4126,22 +4245,22 @@ var TraceGraphPage = () => {
               position: "relative",
               width: "100%"
             },
-            children: shouldShowStatusMessage ? /* @__PURE__ */ jsx135(
+            children: shouldShowStatusMessage ? /* @__PURE__ */ jsx136(
               StatusMessage,
               {
                 error: statusError,
                 onRetry: handleRetry,
                 status
               }
-            ) : /* @__PURE__ */ jsxs128(Fragment5, { children: [
-              /* @__PURE__ */ jsx135(Main, { open, children: /* @__PURE__ */ jsx135(
-                Box12,
+            ) : /* @__PURE__ */ jsxs129(Fragment5, { children: [
+              /* @__PURE__ */ jsx136(Main, { open, children: /* @__PURE__ */ jsx136(
+                Box13,
                 {
                   sx: {
                     height: "100%",
                     overflow: "auto"
                   },
-                  children: traceId !== void 0 && /* @__PURE__ */ jsx135(ReactFlowProvider, { children: /* @__PURE__ */ jsx135(
+                  children: traceId !== void 0 && /* @__PURE__ */ jsx136(ReactFlowProvider, { children: /* @__PURE__ */ jsx136(
                     TraceGraph,
                     {
                       initialFocusEventId: spanId,
@@ -4159,7 +4278,7 @@ var TraceGraphPage = () => {
                   ) })
                 }
               ) }),
-              /* @__PURE__ */ jsx135(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx135(EventDetails, { selectedEvent }) })
+              /* @__PURE__ */ jsx136(StyledDrawer, { anchor: "right", open, variant: "persistent", children: /* @__PURE__ */ jsx136(EventDetails, { selectedEvent }) })
             ] })
           }
         )