@localstack/appinspector-ui 1.0.93 → 1.0.94

package/dist/index.cjs

@@ -12682,12 +12682,13 @@ var ServiceCell = (0, import_react40.memo)(({
           sx: {
             borderBottomRightRadius: "15px",
             borderTopRightRadius: "15px",
+            color: "text.secondary",
             overflow: "hidden",
             padding: "1px 8px",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap"
           },
-          variant: "body2",
+          variant: "caption",
           children: resource
         }
       )
@@ -26666,87 +26667,102 @@ var handleStyle = {
   opacity: 0
 };
 var ServiceNode = (0, import_react60.memo)(({ data, selected }) => {
+  const theme = (0, import_material18.useTheme)();
   const hasErrors = (data.event.errors && data.event.errors.length > 0) ?? false;
-  return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Box, { "data-testid": SERVICE_NODE_TEST_ID, sx: { maxWidth: 200 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
-      import_material18.Box,
-      {
-        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__ */ (0, import_jsx_runtime140.jsx)(import_react59.Handle, { position: import_react59.Position.Left, style: handleStyle, type: "target" }),
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_react59.Handle, { position: import_react59.Position.Right, style: handleStyle, type: "source" }),
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
-            ServiceCell,
-            {
-              height: "32px",
-              resource: data.event.resource_name,
-              selected,
-              service: data.event.service_name,
-              width: "32px"
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
-      import_material18.Stack,
-      {
-        alignItems: "center",
-        direction: "row",
-        spacing: 0.5,
-        sx: {
-          ml: 1,
-          mt: 0.5
+  return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
+    import_material18.Box,
+    {
+      "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__ */ (0, import_jsx_runtime140.jsx)(
-            import_material18.Stack,
-            {
-              direction: "row",
-              spacing: 0.5,
-              sx: {
-                flexWrap: "wrap",
-                gap: "2px"
-              },
-              children: data.event.errors?.map((error) => /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(ProblemIndicator, { error }, error.span_id))
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
-            import_material18.Typography,
-            {
-              "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__ */ (0, import_jsx_runtime140.jsx)(import_react59.Handle, { position: import_react59.Position.Left, style: handleStyle, type: "target" }),
+        /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_react59.Handle, { position: import_react59.Position.Right, style: handleStyle, type: "source" }),
+        /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
+          import_material18.Stack,
+          {
+            alignItems: "center",
+            direction: "row",
+            sx: { gap: "8px", pb: "2px", pt: "6px", px: "8px" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Box, { sx: { borderRadius: "4px", flexShrink: 0, lineHeight: 0, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(AwsServiceIcon, { hideTooltip: true, service: data.event.service_name, size: "medium" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(import_material18.Stack, { sx: { minWidth: 0 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+                  import_material18.Typography,
+                  {
+                    noWrap: true,
+                    sx: { fontWeight: 700, lineHeight: 1.25 },
+                    variant: "body2",
+                    children: data.event.service_name
+                  }
+                ),
+                data.event.resource_name != "" && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+                  import_material18.Typography,
+                  {
+                    color: "text.secondary",
+                    noWrap: true,
+                    sx: { lineHeight: 1.2 },
+                    variant: "caption",
+                    children: data.event.resource_name
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(import_material18.Divider, { sx: { ml: "38px", mr: "8px", my: "5px" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
+          import_material18.Stack,
+          {
+            alignItems: "center",
+            direction: "row",
+            sx: { minWidth: 0, pb: "5px", pr: "8px", pt: "1px" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+                import_material18.Box,
+                {
+                  sx: {
+                    alignItems: "center",
+                    display: "flex",
+                    flexShrink: 0,
+                    justifyContent: "center",
+                    width: "38px"
+                  },
+                  children: hasErrors && data.event.errors?.map((error) => /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(ProblemIndicator, { error }, error.span_id))
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+                import_material18.Typography,
+                {
+                  "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
@@ -26755,7 +26771,7 @@ var getLayoutedNodesAndEdges = (inputNodes, inputEdges, order2 = "oldest_first")
   const dagreGraph = new import_dagre.default.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])