@localstack/appinspector-ui 1.0.25 → 1.0.27

package/dist/index.cjs

@@ -2573,14 +2573,15 @@ var PillCell = ({
 // src/components/cells/service-cell.tsx
 var import_jsx_runtime125 = require("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__ */ (0, import_jsx_runtime125.jsx)(import_material4.Box, { sx: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(PillCell, { borderColor, borderWidth, height, children: [
     showIcon ? /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_jsx_runtime125.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
@@ -4440,7 +4441,7 @@ var EventDetails = ({ onClose, selectedEvent }) => {
         /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Divider, {}),
         /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(ToggleSection, { headline: "Attributes", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Stack, { spacing: 1, children: attributes.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_material16.Box, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { sx: { fontWeight: 600 }, variant: "caption", children: key }),
-          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_material16.Typography, { variant: "body2", children: renderKeyValue(key, value) })
+          renderKeyValue(key, value)
         ] }, key)) }) })
       ] })
     ] }) })
@@ -4526,25 +4527,12 @@ var handleStyle = {
   borderColor: "lightgray",
   opacity: 0
 };
-var ServiceNode = (0, import_react16.memo)(function ServiceNode2({ data, selected }) {
-  const handleClick = (0, import_react16.useCallback)(() => {
-    data.onEventSelect(data.event);
-  }, [data]);
-  const handleKeyPress = (0, import_react16.useCallback)(
-    (event) => {
-      if (event.key === "Enter" || event.key === " ") {
-        handleClick();
-      }
-    },
-    [handleClick]
-  );
+var ServiceNode = (0, import_react16.memo)(({ data, selected }) => {
   const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
   return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { sx: { maxWidth: 200 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
       import_material18.Box,
       {
-        onClick: handleClick,
-        onKeyDown: handleKeyPress,
         role: "button",
         sx: {
           "&:hover": {
@@ -4568,10 +4556,9 @@ var ServiceNode = (0, import_react16.memo)(function ServiceNode2({ data, selecte
           /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
             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"
             }
@@ -4626,7 +4613,7 @@ var ServiceNode = (0, import_react16.memo)(function ServiceNode2({ data, selecte
 // src/components/trace-graph/utils.ts
 var import_dagre = __toESM(require("@dagrejs/dagre"), 1);
 var import_react17 = require("@xyflow/react");
-var generateNodesAndEdges = (event, onEventSelect, parentId) => {
+var generateNodesAndEdges = (event, parentId) => {
   const nodes = [];
   const edges = [];
   nodes.push({
@@ -4635,7 +4622,6 @@ var generateNodesAndEdges = (event, onEventSelect, parentId) => {
       event,
       height: 28,
       id: event.span_id,
-      onEventSelect,
       position: { x: 0, y: 0 },
       width: 28
     },
@@ -4666,7 +4652,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);
     }
@@ -4688,14 +4677,14 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges) => {
   import_dagre.default.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 };
 };
@@ -4842,19 +4831,12 @@ var TraceGraph = ({
   const [edges, setEdges] = (0, import_react21.useState)([]);
   const [initialViewSet, setInitialViewSet] = (0, import_react21.useState)(false);
   const { fitView, setCenter } = (0, import_react20.useReactFlow)();
-  const store = (0, import_react20.useStoreApi)();
-  const updateSelectedNode = (0, import_react21.useCallback)(
-    (nodeId) => {
-      const { addSelectedNodes } = store.getState();
-      if (nodeId) {
-        const targetNode = nodes.find((node) => node.id === nodeId);
-        if (targetNode) {
-          addSelectedNodes([targetNode.id]);
-        }
-      }
-    },
-    [nodes, store]
-  );
+  const updateSelectedNode = (0, import_react21.useCallback)((nodeId) => {
+    const toSelect = new Set(nodeId ? [nodeId] : []);
+    setNodes((previousNodes) => {
+      return previousNodes.map((node) => ({ ...node, selected: toSelect.has(node.id) }));
+    });
+  }, []);
   (0, import_react21.useEffect)(() => {
     const spansMap = /* @__PURE__ */ new Map();
     const rootSpans = [];
@@ -4877,16 +4859,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]);
   (0, import_react21.useEffect)(() => {
     const shouldSetInitialView = !spans.loading && nodes.length > 0 && !initialViewSet;
     if (shouldSetInitialView) {