@grafana/flamegraph 11.5.0-218248 → 11.5.0-218279

package/dist/index.js

@@ -976,7 +976,7 @@ const FlameGraphMetadata = react.memo(
     );
     if (sandwichedLabel) {
       parts.push(
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: sandwichedLabel, placement: "top", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { size: "sm", name: "angle-right" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.metadataPill, children: [
             /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { size: "sm", name: "gf-show-context" }),
@@ -994,17 +994,18 @@ const FlameGraphMetadata = react.memo(
               }
             )
           ] })
-        ] }, "sandwich")
+        ] }) }, "sandwich")
       );
     }
     if (focusedItem) {
-      const percentValue = Math.round(1e4 * (focusedItem.item.value / totalTicks)) / 100;
+      const percentValue = totalTicks > 0 ? Math.round(1e4 * (focusedItem.item.value / totalTicks)) / 100 : 0;
+      const iconName = percentValue > 0 ? "eye" : "exclamation-circle";
       parts.push(
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: focusedItem.label, placement: "top", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { size: "sm", name: "angle-right" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.metadataPill, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { size: "sm", name: "eye" }),
-            " ",
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { size: "sm", name: iconName }),
+            "\xA0",
             percentValue,
             "% of total",
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -1019,7 +1020,7 @@ const FlameGraphMetadata = react.memo(
               }
             )
           ] })
-        ] }, "focus")
+        ] }) }, "focus")
       );
     }
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.metadata, children: parts });
@@ -1045,8 +1046,10 @@ const getStyles$4 = (theme) => ({
     margin: theme.spacing(0, 0.5)
   }),
   metadata: css.css({
-    margin: "8px 0",
-    textAlign: "center"
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    margin: "8px 0"
   }),
   metadataPillName: css.css({
     label: "metadataPillName",
@@ -1134,40 +1137,45 @@ const FlameGraph = ({
     search,
     selectedView
   };
-  const canvas = levelsCallers ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sandwichCanvasWrapper, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sandwichMarker, children: [
-        "Callers",
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { className: styles.sandwichMarkerIcon, name: "arrow-down" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        FlameGraphCanvas,
-        {
-          ...commonCanvasProps,
-          root: levelsCallers[levelsCallers.length - 1][0],
-          depth: levelsCallers.length,
-          direction: "parents",
-          collapsing: false
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sandwichCanvasWrapper, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.cx(styles.sandwichMarker, styles.sandwichMarkerCalees), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { className: styles.sandwichMarkerIcon, name: "arrow-up" }),
-        "Callees"
+  let canvas = null;
+  if (levelsCallers == null ? void 0 : levelsCallers.length) {
+    canvas = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sandwichCanvasWrapper, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sandwichMarker, children: [
+          "Callers",
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { className: styles.sandwichMarkerIcon, name: "arrow-down" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FlameGraphCanvas,
+          {
+            ...commonCanvasProps,
+            root: levelsCallers[levelsCallers.length - 1][0],
+            depth: levelsCallers.length,
+            direction: "parents",
+            collapsing: false
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        FlameGraphCanvas,
-        {
-          ...commonCanvasProps,
-          root: levels[0][0],
-          depth: levels.length,
-          direction: "children",
-          collapsing: false
-        }
-      )
-    ] })
-  ] }) : /* @__PURE__ */ jsxRuntime.jsx(FlameGraphCanvas, { ...commonCanvasProps, root: levels[0][0], depth: levels.length, direction: "children" });
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.sandwichCanvasWrapper, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.cx(styles.sandwichMarker, styles.sandwichMarkerCalees), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { className: styles.sandwichMarkerIcon, name: "arrow-up" }),
+          "Callees"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FlameGraphCanvas,
+          {
+            ...commonCanvasProps,
+            root: levels[0][0],
+            depth: levels.length,
+            direction: "children",
+            collapsing: false
+          }
+        )
+      ] })
+    ] });
+  } else if (levels == null ? void 0 : levels.length) {
+    canvas = /* @__PURE__ */ jsxRuntime.jsx(FlameGraphCanvas, { ...commonCanvasProps, root: levels[0][0], depth: levels.length, direction: "children" });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.graph, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       FlameGraphMetadata,
@@ -2110,6 +2118,7 @@ const FlameGraphContainer = ({
   vertical,
   showFlameGraphOnly,
   disableCollapsing,
+  keepFocusOnDataChange,
   getExtraContextMenuButtons
 }) => {
   const [focusedItemData, setFocusedItemData] = react.useState();
@@ -2143,13 +2152,40 @@ const FlameGraphContainer = ({
     setRangeMin(0);
     setRangeMax(1);
   }, [setFocusedItemData, setRangeMax, setRangeMin]);
-  function resetSandwich() {
+  const resetSandwich = react.useCallback(() => {
     setSandwichItem(void 0);
-  }
+  }, [setSandwichItem]);
   react.useEffect(() => {
-    resetFocus();
-    resetSandwich();
-  }, [data, resetFocus]);
+    var _a;
+    if (!keepFocusOnDataChange) {
+      resetFocus();
+      resetSandwich();
+      return;
+    }
+    if (dataContainer && focusedItemData) {
+      const item = (_a = dataContainer.getNodesWithLabel(focusedItemData.label)) == null ? void 0 : _a[0];
+      if (item) {
+        setFocusedItemData({ ...focusedItemData, item });
+        const levels = dataContainer.getLevels();
+        const totalViewTicks = levels.length ? levels[0][0].value : 0;
+        setRangeMin(item.start / totalViewTicks);
+        setRangeMax((item.start + item.value) / totalViewTicks);
+      } else {
+        setFocusedItemData({
+          ...focusedItemData,
+          item: {
+            start: 0,
+            value: 0,
+            itemIndexes: [],
+            children: [],
+            level: 0
+          }
+        });
+        setRangeMin(0);
+        setRangeMax(1);
+      }
+    }
+  }, [dataContainer, keepFocusOnDataChange]);
   const onSymbolClick = react.useCallback(
     (symbol) => {
       if (search === symbol) {