@localstack/appinspector-ui 1.0.24 → 1.0.26

package/dist/index.js

@@ -2536,14 +2536,15 @@ var PillCell = ({
 // src/components/cells/service-cell.tsx
 import { Fragment as Fragment2, jsx as jsx125, jsxs as jsxs119 } from "react/jsx-runtime";
 var ServiceCell = ({
-  borderColor,
-  borderWidth,
   height = "24px",
   resource,
+  selected,
   service,
   showIcon = true,
   width = "32px"
 }) => {
+  const borderColor = selected ? "text.primary" : "background.dark";
+  const borderWidth = selected ? "2px" : void 0;
   return /* @__PURE__ */ jsx125(Box3, { sx: { width: "100%" }, children: /* @__PURE__ */ jsxs119(PillCell, { borderColor, borderWidth, height, children: [
     showIcon ? /* @__PURE__ */ jsxs119(Fragment2, { children: [
       /* @__PURE__ */ jsx125(
@@ -2552,6 +2553,7 @@ var ServiceCell = ({
           sx: {
             alignItems: "center",
             display: "flex",
+            flexShrink: 0,
             height,
             justifyContent: "center",
             overflow: "hidden",
@@ -3605,7 +3607,7 @@ import { ArrowBack } from "@mui/icons-material";
 import { Box as Box19, 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 useEffect7, useState as useState10 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect7, useState as useState10 } from "react";
 import { useNavigate as useNavigate2, useParams, useSearchParams } from "react-router-dom";
 
 // src/components/event-details/event-details.tsx
@@ -4421,14 +4423,14 @@ function renderKeyValue(key, value) {
 // 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, ReactFlow, useReactFlow as useReactFlow2, useStoreApi } from "@xyflow/react";
-import { useCallback as useCallback7, useEffect as useEffect6, useState as useState9 } from "react";
+import { Background, ReactFlow, useReactFlow as useReactFlow2 } from "@xyflow/react";
+import { useCallback as useCallback6, useEffect as useEffect6, useState as useState9 } from "react";
 
 // src/components/trace-graph/service-node.tsx
 import { Box as Box17, Stack as Stack3, Typography as Typography10 } from "@mui/material";
 import "@xyflow/react/dist/style.css";
 import { Handle, Position } from "@xyflow/react";
-import { memo as memo2, useCallback as useCallback6 } from "react";
+import { memo as memo2 } from "react";
 
 // src/components/trace-graph/problem-indicator.tsx
 import { Error as ErrorIcon2, Info as Info2, Warning as Warning2 } from "@mui/icons-material";
@@ -4488,25 +4490,12 @@ var handleStyle = {
   borderColor: "lightgray",
   opacity: 0
 };
-var ServiceNode = memo2(function ServiceNode2({ data, selected }) {
-  const handleClick = useCallback6(() => {
-    data.onEventSelect(data.event);
-  }, [data]);
-  const handleKeyPress = useCallback6(
-    (event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        handleClick();
-      }
-    },
-    [handleClick]
-  );
+var ServiceNode = memo2(({ data, selected }) => {
   const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
   return /* @__PURE__ */ jsxs130(Box17, { sx: { maxWidth: 200 }, children: [
     /* @__PURE__ */ jsxs130(
       Box17,
       {
-        onClick: handleClick,
-        onKeyDown: handleKeyPress,
         role: "button",
         sx: {
           "&:hover": {
@@ -4530,10 +4519,9 @@ var ServiceNode = memo2(function ServiceNode2({ data, selected }) {
           /* @__PURE__ */ jsx140(
             ServiceCell,
             {
-              borderColor: selected ? "text.primary" : void 0,
-              borderWidth: selected ? "1.5px" : void 0,
               height: "32px",
               resource: data.event.resource_name,
+              selected,
               service: data.event.service_name,
               width: "32px"
             }
@@ -4588,7 +4576,7 @@ var ServiceNode = memo2(function ServiceNode2({ data, selected }) {
 // src/components/trace-graph/utils.ts
 import dagre from "@dagrejs/dagre";
 import { MarkerType, Position as Position2 } from "@xyflow/react";
-var generateNodesAndEdges = (event, onEventSelect, parentId) => {
+var generateNodesAndEdges = (event, parentId) => {
   const nodes = [];
   const edges = [];
   nodes.push({
@@ -4597,7 +4585,6 @@ var generateNodesAndEdges = (event, onEventSelect, parentId) => {
       event,
       height: 28,
       id: event.span_id,
-      onEventSelect,
       position: { x: 0, y: 0 },
       width: 28
     },
@@ -4628,7 +4615,10 @@ var generateNodesAndEdges = (event, onEventSelect, parentId) => {
   }
   if (event.children && event.children.length > 0) {
     for (const child of event.children) {
-      const { edges: childEdges, nodes: childNodes } = generateNodesAndEdges(child, onEventSelect, event.span_id);
+      const { edges: childEdges, nodes: childNodes } = generateNodesAndEdges(
+        child,
+        event.span_id
+      );
       nodes.push(...childNodes);
       edges.push(...childEdges);
     }
@@ -4650,14 +4640,14 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
   dagre.layout(dagreGraph);
   const layoutedNodes = inputNodes.map((node) => {
     const nodeWithPosition = dagreGraph.node(node.id);
-    const newNode = {
+    return {
       ...node,
       position: {
         x: nodeWithPosition.x - nodeWidth / 2,
         y: nodeWithPosition.y - nodeHeight / 2
-      }
+      },
+      selectable: true
     };
-    return newNode;
   });
   return { edges: inputEdges, nodes: layoutedNodes };
 };
@@ -4804,19 +4794,12 @@ var TraceGraph = ({
   const [edges, setEdges] = useState9([]);
   const [initialViewSet, setInitialViewSet] = useState9(false);
   const { fitView, setCenter } = useReactFlow2();
-  const store = useStoreApi();
-  const updateSelectedNode = useCallback7(
-    (nodeId) => {
-      const { addSelectedNodes } = store.getState();
-      if (nodeId) {
-        const targetNode = nodes.find((node) => node.id === nodeId);
-        if (targetNode) {
-          addSelectedNodes([targetNode.id]);
-        }
-      }
-    },
-    [nodes, store]
-  );
+  const updateSelectedNode = useCallback6((nodeId) => {
+    const toSelect = new Set(nodeId ? [nodeId] : []);
+    setNodes((previousNodes) => {
+      return previousNodes.map((node) => ({ ...node, selected: toSelect.has(node.id) }));
+    });
+  }, []);
   useEffect6(() => {
     const spansMap = /* @__PURE__ */ new Map();
     const rootSpans = [];
@@ -4839,16 +4822,19 @@ var TraceGraph = ({
     let allNodes = [];
     let allEdges = [];
     for (const rootSpan of rootSpans) {
-      const { edges: newEdges, nodes: newNodes } = generateNodesAndEdges(rootSpan, (event) => {
-        onEventSelect(event);
-      });
+      const { edges: newEdges, nodes: newNodes } = generateNodesAndEdges(rootSpan);
       allNodes = [...allNodes, ...newNodes];
       allEdges = [...allEdges, ...newEdges];
     }
     const { edges: layoutedEdges, nodes: layoutedNodes } = getLayoutedNodesAndEdges(allNodes, allEdges);
+    for (const node of layoutedNodes) {
+      if (node.id === initialFocusEventId) {
+        node.selected = true;
+      }
+    }
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
-  }, [onEventSelect, spans.data]);
+  }, [spans.data, initialFocusEventId]);
   useEffect6(() => {
     const shouldSetInitialView = !spans.loading && nodes.length > 0 && !initialViewSet;
     if (shouldSetInitialView) {
@@ -4874,7 +4860,7 @@ var TraceGraph = ({
       updateSelectedNode(initialFocusEventId);
     }
   }, [initialFocusEventId, updateSelectedNode]);
-  const onNodeClick = useCallback7((_event, node) => {
+  const onNodeClick = useCallback6((_event, node) => {
     onEventSelect(node.data.event);
     updateSelectedNode(node.id);
   }, [onEventSelect, updateSelectedNode]);
@@ -5043,7 +5029,7 @@ var TraceGraphPage = () => {
   const [spans, setSpans] = useState10();
   const [loading, setLoading] = useState10(false);
   const [fetchError, setFetchError] = useState10();
-  const fetchSpans = useCallback8(async () => {
+  const fetchSpans = useCallback7(async () => {
     setLoading(true);
     try {
       const response = await api.getSpans({
@@ -5065,7 +5051,7 @@ var TraceGraphPage = () => {
   const [selectedEvent, setSelectedEvent] = useState10();
   const [viewPortPixelWidth, setViewPortPixelWidth] = useState10(0);
   const { checkStatus, error: statusError, status } = useStatus();
-  const calculateDrawerWidth = useCallback8(() => {
+  const calculateDrawerWidth = useCallback7(() => {
     const percentageMatch = /(\d+)%/.exec(DRAWER_WIDTH);
     if (percentageMatch && open) {
       const percentage = Number.parseInt(percentageMatch[1], 10);
@@ -5087,16 +5073,16 @@ var TraceGraphPage = () => {
       clearTimeout(timeoutId);
     };
   }, [open, calculateDrawerWidth]);
-  const handleEventSelect = useCallback8((event) => {
+  const handleEventSelect = useCallback7((event) => {
     setSelectedEvent(event);
     setOpen(true);
   }, []);
-  const handleRetry = useCallback8(() => {
+  const handleRetry = useCallback7(() => {
     void checkStatus();
   }, [checkStatus]);
   const navigate = useNavigate2();
   const { resolveLink } = useAppInspector();
-  const navigateToSpansList = useCallback8(() => {
+  const navigateToSpansList = useCallback7(() => {
     const url = resolveLink({ to: "spans-list" });
     navigate(url);
   }, [navigate, resolveLink]);