@localstack/appinspector-ui 1.0.34 → 1.0.35

package/dist/index.js

@@ -1,6 +1,6 @@
 // src/pages/spans-list-page.tsx
 import { Box as Box19 } from "@mui/material";
-import { useCallback as useCallback6, useEffect as useEffect7, useMemo as useMemo7, useRef as useRef4, useState as useState10 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMemo7, useRef as useRef4, useState as useState10 } from "react";
 
 // src/api/use-api.tsx
 import { createContext, useContext } from "react";
@@ -3321,7 +3321,7 @@ import { ArrowBack } from "@mui/icons-material";
 import { Box as Box18, Button as Button5, Drawer, Paper as Paper2 } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import { ReactFlowProvider } from "@xyflow/react";
-import { useCallback as useCallback5, useEffect as useEffect6, useState as useState9 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect6, useState as useState9 } from "react";
 
 // src/components/event-details/event-details.tsx
 import { Box as Box14, Chip as Chip3, Divider as Divider2, Stack as Stack2, Typography as Typography9 } from "@mui/material";
@@ -4136,8 +4136,8 @@ function renderKeyValue(key, value) {
 // src/components/trace-graph/trace-graph.tsx
 import "@xyflow/react/dist/base.css";
 import { Alert as Alert3, Button as Button4, useTheme as useTheme2 } from "@mui/material";
-import { Background, ReactFlow, useReactFlow as useReactFlow2 } from "@xyflow/react";
-import { useCallback as useCallback4, useEffect as useEffect5, useState as useState8 } from "react";
+import { Background, ReactFlow, useNodesState, useReactFlow as useReactFlow2 } from "@xyflow/react";
+import { useEffect as useEffect5, useState as useState8 } from "react";
 
 // src/components/trace-graph/service-node.tsx
 import { Box as Box16, Stack as Stack3, Typography as Typography10 } from "@mui/material";
@@ -4503,16 +4503,10 @@ var TraceGraph = ({
   spans,
   viewPortPixelWidth
 }) => {
-  const [nodes, setNodes] = useState8([]);
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges] = useState8([]);
   const [initialViewSet, setInitialViewSet] = useState8(false);
   const { fitView, setCenter } = useReactFlow2();
-  const updateSelectedNode = useCallback4((nodeId) => {
-    const toSelect = new Set(nodeId ? [nodeId] : []);
-    setNodes((previousNodes) => {
-      return previousNodes.map((node) => ({ ...node, selected: toSelect.has(node.id) }));
-    });
-  }, []);
   useEffect5(() => {
     const spansMap = /* @__PURE__ */ new Map();
     const rootSpans = [];
@@ -4547,7 +4541,7 @@ var TraceGraph = ({
     }
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
-  }, [spans.data, initialFocusEventId]);
+  }, [spans.data, initialFocusEventId, setNodes]);
   useEffect5(() => {
     const shouldSetInitialView = !spans.loading && nodes.length > 0 && !initialViewSet;
     if (shouldSetInitialView) {
@@ -4568,15 +4562,6 @@ var TraceGraph = ({
       setInitialViewSet(true);
     }
   }, [spans.loading, nodes, initialFocusEventId, viewPortPixelWidth, setCenter, fitView, onEventSelect, initialViewSet]);
-  useEffect5(() => {
-    if (initialFocusEventId) {
-      updateSelectedNode(initialFocusEventId);
-    }
-  }, [initialFocusEventId, updateSelectedNode]);
-  const onNodeClick = useCallback4((_event, node) => {
-    onEventSelect(node.data.event);
-    updateSelectedNode(node.id);
-  }, [onEventSelect, updateSelectedNode]);
   const theme = useTheme2();
   return /* @__PURE__ */ jsxs132(Fragment7, { children: [
     spans.error && /* @__PURE__ */ jsxs132(
@@ -4604,7 +4589,10 @@ var TraceGraph = ({
         minZoom: 0.1,
         nodes,
         nodeTypes,
-        onNodeClick,
+        onNodeClick: (_event, node) => {
+          onEventSelect(node.data.event);
+        },
+        onNodesChange,
         selectNodesOnDrag: false,
         children: [
           /* @__PURE__ */ jsx140(Controls, {}),
@@ -4746,7 +4734,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const [spans, setSpans] = useState9();
   const [loading, setLoading] = useState9(false);
   const [fetchError, setFetchError] = useState9();
-  const fetchSpans = useCallback5(async () => {
+  const fetchSpans = useCallback4(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans({
@@ -4768,7 +4756,7 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
   const [selectedEvent, setSelectedEvent] = useState9();
   const [viewPortPixelWidth, setViewPortPixelWidth] = useState9(0);
   const { checkStatus, error: statusError, status } = useStatus();
-  const calculateDrawerWidth = useCallback5(() => {
+  const calculateDrawerWidth = useCallback4(() => {
     const percentageMatch = /(\d+)%/.exec(DRAWER_WIDTH);
     if (percentageMatch && open) {
       const percentage = Number.parseInt(percentageMatch[1], 10);
@@ -4790,14 +4778,14 @@ var TraceGraphPage = ({ onClose, spanId, traceId }) => {
       clearTimeout(timeoutId);
     };
   }, [open, calculateDrawerWidth]);
-  const handleEventSelect = useCallback5((event) => {
+  const handleEventSelect = useCallback4((event) => {
     setSelectedEvent(event);
     setOpen(true);
   }, []);
-  const handleRetry = useCallback5(() => {
+  const handleRetry = useCallback4(() => {
     void checkStatus();
   }, [checkStatus]);
-  const navigateToSpansList = useCallback5(() => {
+  const navigateToSpansList = useCallback4(() => {
     onClose?.();
   }, [onClose]);
   return /* @__PURE__ */ jsx141(
@@ -4846,7 +4834,7 @@ var SpansListPage = () => {
   }, [filterWriteOperations, pageSize, page]);
   const [fetchError, setFetchError] = useState10();
   const { checkStatus, error: statusError, status } = useStatus();
-  const fetchSpans = useCallback6(async () => {
+  const fetchSpans = useCallback5(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans(queryOptions);
@@ -4863,7 +4851,7 @@ var SpansListPage = () => {
       setLoading(false);
     }
   }, [api, page, queryOptions]);
-  const fetchSpansSync = useCallback6(() => {
+  const fetchSpansSync = useCallback5(() => {
     void fetchSpans();
   }, [fetchSpans]);
   useEffect7(() => {
@@ -4878,11 +4866,11 @@ var SpansListPage = () => {
   }, [fetchSpans]);
   const [selectedTraceId, setSelectedTraceId] = useState10();
   const [selectedSpanId, setSelectedSpanId] = useState10();
-  const navigateToSpan = useCallback6((span) => {
+  const navigateToSpan = useCallback5((span) => {
     setSelectedTraceId(span.trace_id);
     setSelectedSpanId(span.span_id);
   }, []);
-  const clearSpans = useCallback6(async () => {
+  const clearSpans = useCallback5(async () => {
     setLoading(true);
     try {
       await api.deleteSpans();
@@ -4896,7 +4884,7 @@ var SpansListPage = () => {
       setLoading(false);
     }
   }, [api, fetchSpans]);
-  const handleRetry = useCallback6(() => {
+  const handleRetry = useCallback5(() => {
     void checkStatus();
   }, [checkStatus]);
   const shouldShowStatusMessage = Boolean(statusError) || status?.status === "DISABLED";
@@ -4967,7 +4955,7 @@ var routes = {
 
 // src/context.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
-import { useCallback as useCallback7, useMemo as useMemo8 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo8 } from "react";
 
 // src/constants/error-messages.ts
 var ERROR_MESSAGES = {
@@ -5094,7 +5082,7 @@ var AppInspectorContextProvider = (props) => {
   const api = useMemo8(() => {
     return false ? createApiClientMock() : createApiClient({ localstackEndpoint: props.localstackEndpoint });
   }, [props.localstackEndpoint]);
-  const resolveLink = useCallback7(
+  const resolveLink = useCallback6(
     (options) => {
       if (options.to === "settings") {
         return `${props.routePrefix}/settings`;