@localstack/appinspector-ui 1.0.93 → 1.0.94

package/dist/index.js

@@ -12695,12 +12695,13 @@ var ServiceCell = memo7(({
           sx: {
             borderBottomRightRadius: "15px",
             borderTopRightRadius: "15px",
+            color: "text.secondary",
             overflow: "hidden",
             padding: "1px 8px",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap"
           },
-          variant: "body2",
+          variant: "caption",
           children: resource
         }
       )
@@ -26610,12 +26611,12 @@ var EventDetails = ({ onClose, selectedEvent }) => {
 
 // src/components/trace-graph/trace-graph.tsx
 import "@xyflow/react/dist/base.css";
-import { Alert as Alert4, Button as Button5, useTheme as useTheme4 } from "@mui/material";
+import { Alert as Alert4, Button as Button5, useTheme as useTheme5 } from "@mui/material";
 import { Background, MarkerType, Position as Position2, ReactFlow, useEdgesState, useNodesState } from "@xyflow/react";
 import { useEffect as useEffect19 } from "react";
 
 // src/components/trace-graph/service-node.tsx
-import { Box as Box17, Stack as Stack3, Typography as Typography11 } from "@mui/material";
+import { Box as Box17, Divider as Divider4, Stack as Stack3, Typography as Typography11, useTheme as useTheme4 } from "@mui/material";
 import "@xyflow/react/dist/style.css";
 import { Handle, Position } from "@xyflow/react";
 import { memo as memo11 } from "react";
@@ -26679,87 +26680,102 @@ var handleStyle = {
   opacity: 0
 };
 var ServiceNode = memo11(({ data, selected }) => {
+  const theme = useTheme4();
   const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
-  return /* @__PURE__ */ jsxs131(Box17, { "data-testid": SERVICE_NODE_TEST_ID, sx: { maxWidth: 200 }, children: [
-    /* @__PURE__ */ jsxs131(
-      Box17,
-      {
-        role: "button",
-        sx: {
-          "&:hover": {
-            opacity: 1
-          },
-          "alignItems": "flex-start",
-          "borderRadius": 1,
-          "cursor": "pointer",
-          "display": "flex",
-          "flexDirection": "column",
-          "maxWidth": "100%",
-          "opacity": selected ? 1 : 0.7,
-          "position": "relative",
-          "transition": "all 0.3s ease",
-          "width": "min-content"
-        },
-        tabIndex: 0,
-        children: [
-          /* @__PURE__ */ jsx140(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
-          /* @__PURE__ */ jsx140(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
-          /* @__PURE__ */ jsx140(
-            ServiceCell,
-            {
-              height: "32px",
-              resource: data.event.resource_name,
-              selected,
-              service: data.event.service_name,
-              width: "32px"
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs131(
-      Stack3,
-      {
-        alignItems: "center",
-        direction: "row",
-        spacing: 0.5,
-        sx: {
-          ml: 1,
-          mt: 0.5
+  return /* @__PURE__ */ jsxs131(
+    Box17,
+    {
+      "data-testid": SERVICE_NODE_TEST_ID,
+      role: "button",
+      sx: {
+        "&:hover": {
+          boxShadow: theme.palette.mode === "dark" ? "0 4px 12px rgba(0,0,0,0.6)" : "0 4px 12px rgba(0,0,0,0.22)"
         },
-        children: [
-          hasErrors && /* @__PURE__ */ jsx140(
-            Stack3,
-            {
-              direction: "row",
-              spacing: 0.5,
-              sx: {
-                flexWrap: "wrap",
-                gap: "2px"
-              },
-              children: data.event.errors?.map((error) => /* @__PURE__ */ jsx140(ProblemIndicator, { error }, error.span_id))
-            }
-          ),
-          /* @__PURE__ */ jsx140(
-            Typography11,
-            {
-              "data-testid": SERVICE_NODE_OPERATION_NAME_TEST_ID,
-              sx: {
-                fontSize: "0.9rem",
-                maxWidth: "100%",
-                ml: hasErrors ? 2 : 0,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
-              },
-              variant: "caption",
-              children: data.event.operation_name
-            }
-          )
-        ]
-      }
-    )
-  ] });
+        "backgroundColor": theme.palette.background.paper,
+        "borderLeft": `3px solid ${hasErrors ? theme.palette.error.main : "transparent"}`,
+        "borderRadius": 1,
+        "boxShadow": theme.palette.mode === "dark" ? "0 1px 4px rgba(0,0,0,0.5)" : "0 1px 4px rgba(0,0,0,0.13)",
+        "cursor": "pointer",
+        "maxWidth": 220,
+        "minWidth": 140,
+        "outline": selected ? `2px solid ${hasErrors ? theme.palette.error.main : theme.palette.primary.main}` : hasErrors ? `1px solid ${theme.palette.error.main}` : `1px solid ${theme.palette.divider}`,
+        "overflow": "hidden",
+        "position": "relative",
+        "transition": "all 0.3s ease"
+      },
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ jsx140(Handle, { position: Position.Left, style: handleStyle, type: "target" }),
+        /* @__PURE__ */ jsx140(Handle, { position: Position.Right, style: handleStyle, type: "source" }),
+        /* @__PURE__ */ jsxs131(
+          Stack3,
+          {
+            alignItems: "center",
+            direction: "row",
+            sx: { gap: "8px", pb: "2px", pt: "6px", px: "8px" },
+            children: [
+              /* @__PURE__ */ jsx140(Box17, { sx: { borderRadius: "4px", flexShrink: 0, lineHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx140(AwsServiceIcon, { hideTooltip: true, service: data.event.service_name, size: "medium" }) }),
+              /* @__PURE__ */ jsxs131(Stack3, { sx: { minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx140(
+                  Typography11,
+                  {
+                    noWrap: true,
+                    sx: { fontWeight: 700, lineHeight: 1.25 },
+                    variant: "body2",
+                    children: data.event.service_name
+                  }
+                ),
+                data.event.resource_name != "" && /* @__PURE__ */ jsx140(
+                  Typography11,
+                  {
+                    color: "text.secondary",
+                    noWrap: true,
+                    sx: { lineHeight: 1.2 },
+                    variant: "caption",
+                    children: data.event.resource_name
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx140(Divider4, { sx: { ml: "38px", mr: "8px", my: "5px" } }),
+        /* @__PURE__ */ jsxs131(
+          Stack3,
+          {
+            alignItems: "center",
+            direction: "row",
+            sx: { minWidth: 0, pb: "5px", pr: "8px", pt: "1px" },
+            children: [
+              /* @__PURE__ */ jsx140(
+                Box17,
+                {
+                  sx: {
+                    alignItems: "center",
+                    display: "flex",
+                    flexShrink: 0,
+                    justifyContent: "center",
+                    width: "38px"
+                  },
+                  children: hasErrors && data.event.errors?.map((error) => /* @__PURE__ */ jsx140(ProblemIndicator, { error }, error.span_id))
+                }
+              ),
+              /* @__PURE__ */ jsx140(
+                Typography11,
+                {
+                  "data-testid": SERVICE_NODE_OPERATION_NAME_TEST_ID,
+                  noWrap: true,
+                  sx: { flex: 1, fontSize: "0.72rem", minWidth: 0 },
+                  variant: "caption",
+                  children: data.event.operation_name
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
 });
 
 // src/components/trace-graph/utils.ts
@@ -26768,7 +26784,7 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges, order2 = "oldest_first")
   const dagreGraph = new dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
   const direction = "LR";
   const nodeWidth = 200;
-  const nodeHeight = 70;
+  const nodeHeight = 80;
   dagreGraph.setGraph({ rankdir: direction });
   const timestampMap = new Map(
     inputNodes.map((n2) => [n2.id, n2.data.event.start_time_unix_nano])
@@ -26952,7 +26968,7 @@ var TraceGraph = ({
     setNodes(layoutedNodes);
     setEdges(layoutedEdges);
   }, [spans.data, initialFocusEventId, order2, setNodes, setEdges]);
-  const theme = useTheme4();
+  const theme = useTheme5();
   return /* @__PURE__ */ jsxs133(Fragment9, { children: [
     spans.error && /* @__PURE__ */ jsxs133(
       Alert4,