@dynatrace/strato-components 3.13.2 → 3.14.0

package/esm/charts/flame/flame-chart/FlameChart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/flame/flame-chart/FlameChart.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren, useCallback, useMemo, useState } from 'react';\n\nimport { units } from '@dynatrace-sdk/units';\n\nimport { iterateSlots } from './utils/iterate-slots.js';\nimport { ColorRule } from '../../core/slots/ColorRule.js';\nimport type { ChartDatapoint } from '../../core/types/chart-data.js';\nimport { XYChart } from '../../xy-chart/XYChartRoot.js';\nimport {\n  DEPTH_FIELD,\n  DISPLAY_NAME_FLAME_CHART,\n  END_FIELD,\n  FLAME_ORIGINAL_IDX,\n  START_FIELD,\n  VALUE_FIELD,\n  XY_DEFAULTS,\n} from '../shared/constants.js';\nimport { DefaultTooltip } from './components/tooltip/DefaultTooltip.js';\nimport { FlameChartTooltipSlot as Tooltip } from '../shared/slots/Tooltip.js';\nimport type { FlameChartProps } from '../shared/types/flame-chart.js';\nimport { orderSpansHierarchically } from '../shared/utils/order-spans-hierarchically.js';\nimport { resolveFlameTooltipContent } from '../shared/utils/resolve-flame-tooltip-content.js';\n\n/**\n * @internal\n */\nexport const FlameChartRoot = /* @__PURE__ */ <\n  TData extends ChartDatapoint = ChartDatapoint,\n>({\n  data,\n  idAccessor,\n  parentIdAccessor,\n  startAccessor,\n  endAccessor,\n  selfValueAccessor,\n  labelAccessor,\n  colorPalette,\n  orientation = 'bottom-up',\n  truncationMode,\n  valueFormatter,\n  minTime,\n  currentZoom,\n  seriesActions,\n  height,\n  __globalActions,\n  children,\n}: PropsWithChildren<FlameChartProps<TData>>) => {\n  const orderedData = useMemo(() => {\n    const withIndex = data.map((datum, index) => ({\n      ...datum,\n      [FLAME_ORIGINAL_IDX]: index,\n    }));\n    const ordered = orderSpansHierarchically(withIndex, {\n      spanIdAccessor: idAccessor,\n      parentIdAccessor,\n      x0Accessor: startAccessor,\n      x1Accessor: endAccessor,\n    });\n\n    const offset = minTime ?? 0;\n    const output: ChartDatapoint[] = new Array(ordered.length);\n    for (let i = 0; i < ordered.length; i++) {\n      const span = ordered[i];\n      const start = Number(span[startAccessor] ?? 0);\n      const end = Number(span[endAccessor] ?? 0);\n      output[i] = {\n        ...span,\n        [START_FIELD]: start - offset,\n        [END_FIELD]: end - offset,\n        [VALUE_FIELD]: end - start,\n      };\n    }\n    return output;\n  }, [data, idAccessor, parentIdAccessor, startAccessor, endAccessor, minTime]);\n\n  const normalizedZoom = useMemo<[number, number] | undefined>(() => {\n    if (!currentZoom) {\n      return undefined;\n    }\n    const offset = minTime ?? 0;\n    return [currentZoom[0] - offset, currentZoom[1] - offset];\n  }, [currentZoom, minTime]);\n\n  const [internalZoom, setInternalZoom] = useState<\n    [number, number] | undefined\n  >(undefined);\n\n  const effectiveZoom = normalizedZoom ?? internalZoom;\n\n  //TODO: Remove the internal isolate logic in APPDEV-19294\n  const handleIsolate = useCallback((zoom: [number, number]) => {\n    setInternalZoom(zoom);\n  }, []);\n\n  const { customTooltipTemplate, colorRules } = iterateSlots<TData>(children);\n\n  return (\n    <XYChart\n      data={orderedData}\n      truncationMode={truncationMode}\n      height={height}\n    >\n      <XYChart.RectSeries\n        x0Accessor={START_FIELD}\n        x1Accessor={END_FIELD}\n        y0Accessor={DEPTH_FIELD}\n        valueAccessor={VALUE_FIELD}\n        colorPalette={colorPalette}\n        _labelAccessor={labelAccessor}\n        xAxisId={XY_DEFAULTS.xAxisId}\n        yAxisId={XY_DEFAULTS.yAxisId}\n      />\n      <XYChart.XAxis\n        id={XY_DEFAULTS.xAxisId}\n        type=\"numerical\"\n        position={orientation === 'bottom-up' ? 'bottom' : 'top'}\n        formatter={{ input: units.time.millisecond }}\n        currentZoom={effectiveZoom}\n      />\n      <XYChart.YAxis\n        id={XY_DEFAULTS.yAxisId}\n        type=\"categorical\"\n        position=\"left\"\n        hidden\n        reversed={orientation === 'bottom-up'}\n        hideCrosshair\n      />\n      <XYChart.Legend hidden />\n      <XYChart.Toolbar hidden />\n      {colorRules}\n      <XYChart.Tooltip>\n        {(payload) =>\n          resolveFlameTooltipContent(\n            payload,\n            data,\n            customTooltipTemplate,\n            () => (\n              <DefaultTooltip\n                payload={payload}\n                data={data}\n                labelAccessor={labelAccessor}\n                selfValueAccessor={selfValueAccessor}\n                valueFormatter={valueFormatter}\n                seriesActions={seriesActions}\n                onIsolate={__globalActions ? handleIsolate : undefined}\n              />\n            ),\n          )\n        }\n      </XYChart.Tooltip>\n    </XYChart>\n  );\n};\n\n/** @internal */\nexport const FlameChart = Object.assign(FlameChartRoot, {\n  Tooltip,\n  ColorRule,\n});\n\n(FlameChart as typeof FlameChart & { displayName: string }).displayName =\n  DISPLAY_NAME_FLAME_CHART;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { type PropsWithChildren, useMemo } from 'react';\n\nimport { units } from '@dynatrace-sdk/units';\n\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { ColorRule } from '../../core/slots/ColorRule.js';\nimport type { ChartDatapoint } from '../../core/types/chart-data.js';\nimport { XYChart } from '../../xy-chart/XYChartRoot.js';\nimport { FlameIsolationNav } from '../shared/components/isolation-nav/FlameIsolationNav.js';\nimport { IsolateSegmentAction } from '../shared/components/tooltip/IsolateSegmentAction.js';\nimport {\n  DEPTH_FIELD,\n  DISPLAY_NAME_FLAME_CHART,\n  END_FIELD,\n  START_FIELD,\n  VALUE_FIELD,\n  XY_DEFAULTS,\n} from '../shared/constants.js';\nimport { useFlameData } from '../shared/hooks/use-flame-data.js';\nimport { useFlameOnEvent } from '../shared/hooks/use-flame-on-event.js';\nimport { useFlameIsolationState } from '../shared/hooks/use-isolation-state.js';\nimport { DefaultTooltip } from './components/tooltip/DefaultTooltip.js';\nimport { iterateSlots } from './utils/iterate-slots.js';\nimport { FlameChartTooltipSlot as Tooltip } from '../shared/slots/Tooltip.js';\nimport type { FlameChartProps } from '../shared/types/flame-chart.js';\nimport { orderSpansHierarchically } from '../shared/utils/order-spans-hierarchically.js';\nimport { resolveFlameTooltipContent } from '../shared/utils/resolve-flame-tooltip-content.js';\n\n/**\n * @internal\n */\nconst FlameChartRoot = <TData extends ChartDatapoint = ChartDatapoint>({\n  data,\n  idAccessor,\n  parentIdAccessor,\n  startAccessor,\n  endAccessor,\n  selfValueAccessor,\n  labelAccessor,\n  colorPalette,\n  orientation = 'bottom-up',\n  truncationMode,\n  valueFormatter,\n  minTime,\n  currentZoom,\n  seriesActions,\n  height,\n  __globalActions,\n  onClick,\n  children,\n}: PropsWithChildren<FlameChartProps<TData>>) => {\n  const isolationEnabled = __globalActions === true;\n  const { isolatedId, isolate, goBack, goForward, canGoBack, canGoForward } =\n    useFlameIsolationState();\n\n  const { isolatedRoot, effectiveData, visibleRootId, childrenByParentId } =\n    useFlameData({\n      data,\n      idAccessor,\n      parentIdAccessor,\n      isolatedId,\n      isolationEnabled,\n    });\n\n  const orderedData = useMemo(() => {\n    const offset = isolatedRoot\n      ? Number(isolatedRoot[startAccessor] ?? 0)\n      : (minTime ?? 0);\n\n    return orderSpansHierarchically(effectiveData, {\n      spanIdAccessor: idAccessor,\n      parentIdAccessor,\n      x0Accessor: startAccessor,\n      x1Accessor: endAccessor,\n      offset,\n    });\n  }, [\n    effectiveData,\n    isolatedRoot,\n    idAccessor,\n    parentIdAccessor,\n    startAccessor,\n    endAccessor,\n    minTime,\n  ]);\n\n  const normalizedZoom = useMemo<[number, number] | undefined>(() => {\n    if (!currentZoom) {\n      return undefined;\n    }\n    const offset = minTime ?? 0;\n    return [currentZoom[0] - offset, currentZoom[1] - offset];\n  }, [currentZoom, minTime]);\n\n  const globalActions = useMemo(() => {\n    if (!isolationEnabled) {\n      return undefined;\n    }\n    return (datapoint: TData) => {\n      const id = datapoint[idAccessor];\n      return [\n        <IsolateSegmentAction\n          key=\"isolate\"\n          onSelect={() => isolate(id)}\n          disabled={id === visibleRootId}\n        />,\n      ];\n    };\n  }, [isolationEnabled, idAccessor, isolate, visibleRootId]);\n\n  const { customTooltipTemplate, colorRules } = iterateSlots<TData>(children);\n\n  const handleOnEvent = useFlameOnEvent({\n    onClick,\n    data,\n    idAccessor,\n    childrenByParentId,\n  });\n\n  const chart = (\n    <XYChart\n      data={orderedData}\n      truncationMode={truncationMode}\n      height={height}\n      __onEvent={handleOnEvent}\n    >\n      <XYChart.RectSeries\n        x0Accessor={START_FIELD}\n        x1Accessor={END_FIELD}\n        y0Accessor={DEPTH_FIELD}\n        valueAccessor={VALUE_FIELD}\n        colorPalette={colorPalette}\n        _labelAccessor={labelAccessor}\n        xAxisId={XY_DEFAULTS.xAxisId}\n        yAxisId={XY_DEFAULTS.yAxisId}\n      />\n      <XYChart.XAxis\n        id={XY_DEFAULTS.xAxisId}\n        type=\"numerical\"\n        position={orientation === 'bottom-up' ? 'bottom' : 'top'}\n        formatter={{ input: units.time.millisecond }}\n        currentZoom={isolatedRoot !== null ? undefined : normalizedZoom}\n      />\n      <XYChart.YAxis\n        id={XY_DEFAULTS.yAxisId}\n        type=\"categorical\"\n        position=\"left\"\n        hidden\n        reversed={orientation === 'bottom-up'}\n        hideCrosshair\n      />\n      <XYChart.Legend hidden />\n      <XYChart.Toolbar hidden />\n      {colorRules}\n      <XYChart.Tooltip>\n        {(payload) =>\n          resolveFlameTooltipContent(\n            payload,\n            data,\n            customTooltipTemplate,\n            () => (\n              <DefaultTooltip<TData>\n                payload={payload}\n                data={data}\n                labelAccessor={labelAccessor}\n                selfValueAccessor={selfValueAccessor}\n                valueFormatter={valueFormatter}\n                seriesActions={seriesActions}\n                globalActions={globalActions}\n              />\n            ),\n          )\n        }\n      </XYChart.Tooltip>\n    </XYChart>\n  );\n\n  if (!isolationEnabled) {\n    return chart;\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={8}>\n      <FlameIsolationNav\n        canGoBack={canGoBack}\n        canGoForward={canGoForward}\n        onGoBack={goBack}\n        onGoForward={goForward}\n      />\n      {chart}\n    </Flex>\n  );\n};\n\n/**\n * @internal\n */\nexport const FlameChart = Object.assign(FlameChartRoot, {\n  Tooltip,\n  ColorRule,\n});\n\n(FlameChart as typeof FlameChart & { displayName: string }).displayName =\n  DISPLAY_NAME_FLAME_CHART;\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/flame/flame-chart/components/tooltip/DefaultTooltip.js

@@ -2,11 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useIntl } from "react-intl";
 import { FLAME_CHART_TOOLTIP_MESSAGES } from "./messages.js";
 import { FlameTooltip } from "../../../shared/components/tooltip/FlameTooltip.js";
-import {
-  END_FIELD,
-  START_FIELD,
-  VALUE_FIELD
-} from "../../../shared/constants.js";
+import { VALUE_FIELD } from "../../../shared/constants.js";
 import { buildFlameTooltipBaseData } from "../../../shared/utils/build-tooltip-base-data.js";
 import { formatFlameValue } from "../../../shared/utils/format-flame-value.js";
 function DefaultTooltip({
@@ -16,10 +12,18 @@ function DefaultTooltip({
   selfValueAccessor,
   valueFormatter,
   seriesActions,
-  onIsolate
+  globalActions
 }) {
   const intl = useIntl();
-  const { datapoint, color, label, subheader, actions, selfValue } = buildFlameTooltipBaseData({
+  const {
+    datapoint,
+    originalDatapoint,
+    color,
+    label,
+    subheader,
+    actions,
+    selfValue
+  } = buildFlameTooltipBaseData({
     payload,
     data,
     labelAccessor,
@@ -28,9 +32,7 @@ function DefaultTooltip({
     seriesActions,
     intl
   });
-  const start = Number(datapoint?.[START_FIELD] ?? 0);
-  const end = Number(datapoint?.[END_FIELD] ?? 0);
-  const handleIsolate = onIsolate !== void 0 && datapoint !== void 0 ? () => onIsolate([start, end]) : void 0;
+  const resolvedGlobalActions = globalActions !== void 0 && originalDatapoint !== void 0 ? globalActions(originalDatapoint) : void 0;
   return /* @__PURE__ */ jsx(
     FlameTooltip,
     {
@@ -41,7 +43,7 @@ function DefaultTooltip({
       totalValue: formatFlameValue(datapoint?.[VALUE_FIELD], valueFormatter),
       selfValue,
       actions,
-      onIsolate: handleIsolate
+      globalActions: resolvedGlobalActions
     }
   );
 }

package/esm/charts/flame/flame-chart/components/tooltip/DefaultTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/flame/flame-chart/components/tooltip/DefaultTooltip.tsx"],
-  "sourcesContent": ["import { type ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { FLAME_CHART_TOOLTIP_MESSAGES } from './messages.js';\nimport type { ChartDatapoint } from '../../../../core/types/chart-data.js';\nimport type { Formatter } from '../../../../core/types/formatter.js';\nimport type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';\nimport type { XYChartTooltipPayload } from '../../../../xy-chart/types/xy-chart.js';\nimport { FlameTooltip } from '../../../shared/components/tooltip/FlameTooltip.js';\nimport {\n  END_FIELD,\n  START_FIELD,\n  VALUE_FIELD,\n} from '../../../shared/constants.js';\nimport { buildFlameTooltipBaseData } from '../../../shared/utils/build-tooltip-base-data.js';\nimport { formatFlameValue } from '../../../shared/utils/format-flame-value.js';\n\ninterface DefaultTooltipProps<TData extends ChartDatapoint> {\n  payload: XYChartTooltipPayload;\n  data: readonly TData[];\n  labelAccessor: string;\n  selfValueAccessor?: string;\n  valueFormatter?: Formatter;\n  seriesActions?: (datapoint: TData) => SeriesActionsTemplate;\n  onIsolate?: (zoom: [number, number]) => void;\n}\n\nexport function DefaultTooltip<TData extends ChartDatapoint>({\n  payload,\n  data,\n  labelAccessor,\n  selfValueAccessor,\n  valueFormatter,\n  seriesActions,\n  onIsolate,\n}: Readonly<DefaultTooltipProps<TData>>): ReactNode {\n  const intl = useIntl();\n  const { datapoint, color, label, subheader, actions, selfValue } =\n    buildFlameTooltipBaseData({\n      payload,\n      data,\n      labelAccessor,\n      selfValueAccessor,\n      valueFormatter,\n      seriesActions,\n      intl,\n    });\n\n  const start = Number(datapoint?.[START_FIELD] ?? 0);\n  const end = Number(datapoint?.[END_FIELD] ?? 0);\n  const handleIsolate =\n    onIsolate !== undefined && datapoint !== undefined\n      ? () => onIsolate([start, end])\n      : undefined;\n\n  return (\n    <FlameTooltip\n      label={label}\n      subheader={subheader}\n      color={color}\n      valueLabel={intl.formatMessage(FLAME_CHART_TOOLTIP_MESSAGES.duration)}\n      totalValue={formatFlameValue(datapoint?.[VALUE_FIELD], valueFormatter)}\n      selfValue={selfValue}\n      actions={actions}\n      onIsolate={handleIsolate}\n    />\n  );\n}\n"],
-  "mappings": "AAwDI;AAvDJ,SAAS,eAAe;AAExB,SAAS,oCAAoC;AAK7C,SAAS,oBAAoB;AAC7B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,iCAAiC;AAC1C,SAAS,wBAAwB;AAY1B,SAAS,eAA6C;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoD;AAClD,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,WAAW,OAAO,OAAO,WAAW,SAAS,UAAU,IAC7D,0BAA0B;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAEH,QAAM,QAAQ,OAAO,YAAY,WAAW,KAAK,CAAC;AAClD,QAAM,MAAM,OAAO,YAAY,SAAS,KAAK,CAAC;AAC9C,QAAM,gBACJ,cAAc,UAAa,cAAc,SACrC,MAAM,UAAU,CAAC,OAAO,GAAG,CAAC,IAC5B;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY,KAAK,cAAc,6BAA6B,QAAQ;AAAA,MACpE,YAAY,iBAAiB,YAAY,WAAW,GAAG,cAAc;AAAA,MACrE;AAAA,MACA;AAAA,MACA,WAAW;AAAA;AAAA,EACb;AAEJ;",
+  "sourcesContent": ["import { type ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { FLAME_CHART_TOOLTIP_MESSAGES } from './messages.js';\nimport type { ChartDatapoint } from '../../../../core/types/chart-data.js';\nimport type { Formatter } from '../../../../core/types/formatter.js';\nimport type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';\nimport type { XYChartTooltipPayload } from '../../../../xy-chart/types/xy-chart.js';\nimport { FlameTooltip } from '../../../shared/components/tooltip/FlameTooltip.js';\nimport { VALUE_FIELD } from '../../../shared/constants.js';\nimport { buildFlameTooltipBaseData } from '../../../shared/utils/build-tooltip-base-data.js';\nimport { formatFlameValue } from '../../../shared/utils/format-flame-value.js';\n\ninterface DefaultTooltipProps<TData extends ChartDatapoint> {\n  payload: XYChartTooltipPayload;\n  data: readonly TData[];\n  labelAccessor: string;\n  selfValueAccessor?: string;\n  valueFormatter?: Formatter;\n  seriesActions?: (datapoint: TData) => SeriesActionsTemplate;\n  globalActions?: (datapoint: TData) => ReactNode[];\n}\n\nexport function DefaultTooltip<TData extends ChartDatapoint>({\n  payload,\n  data,\n  labelAccessor,\n  selfValueAccessor,\n  valueFormatter,\n  seriesActions,\n  globalActions,\n}: Readonly<DefaultTooltipProps<TData>>): ReactNode {\n  const intl = useIntl();\n  const {\n    datapoint,\n    originalDatapoint,\n    color,\n    label,\n    subheader,\n    actions,\n    selfValue,\n  } = buildFlameTooltipBaseData({\n    payload,\n    data,\n    labelAccessor,\n    selfValueAccessor,\n    valueFormatter,\n    seriesActions,\n    intl,\n  });\n\n  const resolvedGlobalActions =\n    globalActions !== undefined && originalDatapoint !== undefined\n      ? globalActions(originalDatapoint)\n      : undefined;\n\n  return (\n    <FlameTooltip\n      label={label}\n      subheader={subheader}\n      color={color}\n      valueLabel={intl.formatMessage(FLAME_CHART_TOOLTIP_MESSAGES.duration)}\n      totalValue={formatFlameValue(datapoint?.[VALUE_FIELD], valueFormatter)}\n      selfValue={selfValue}\n      actions={actions}\n      globalActions={resolvedGlobalActions}\n    />\n  );\n}\n"],
+  "mappings": "AAyDI;AAxDJ,SAAS,eAAe;AAExB,SAAS,oCAAoC;AAK7C,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,iCAAiC;AAC1C,SAAS,wBAAwB;AAY1B,SAAS,eAA6C;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoD;AAClD,QAAM,OAAO,QAAQ;AACrB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,0BAA0B;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,wBACJ,kBAAkB,UAAa,sBAAsB,SACjD,cAAc,iBAAiB,IAC/B;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY,KAAK,cAAc,6BAA6B,QAAQ;AAAA,MACpE,YAAY,iBAAiB,YAAY,WAAW,GAAG,cAAc;AAAA,MACrE;AAAA,MACA;AAAA,MACA,eAAe;AAAA;AAAA,EACjB;AAEJ;",
   "names": []
 }

package/esm/charts/flame/flame-graph/FlameGraph.js

@@ -1,15 +1,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from "react";
-import { iterateSlots } from "./utils/iterate-slots.js";
+import { useMemo } from "react";
+import { Flex } from "../../../layouts/flex/Flex.js";
 import { ColorRule } from "../../core/slots/ColorRule.js";
 import { XYChart } from "../../xy-chart/XYChartRoot.js";
+import { FlameIsolationNav } from "../shared/components/isolation-nav/FlameIsolationNav.js";
+import { IsolateSegmentAction } from "../shared/components/tooltip/IsolateSegmentAction.js";
 import {
   DEPTH_FIELD,
   DISPLAY_NAME_FLAME_GRAPH,
-  FLAME_ORIGINAL_IDX,
   XY_DEFAULTS
 } from "../shared/constants.js";
+import { useFlameData } from "../shared/hooks/use-flame-data.js";
+import { useFlameOnEvent } from "../shared/hooks/use-flame-on-event.js";
+import { useFlameIsolationState } from "../shared/hooks/use-isolation-state.js";
 import { DefaultTooltip } from "./components/tooltip/DefaultTooltip.js";
+import { iterateSlots } from "./utils/iterate-slots.js";
 import { FlameGraphTooltipSlot as Tooltip } from "../shared/slots/Tooltip.js";
 import { aggregateSpansToFlameGraph } from "../shared/utils/aggregate-spans-to-flame-graph.js";
 import { resolveFlameTooltipContent } from "../shared/utils/resolve-flame-tooltip-content.js";
@@ -29,25 +34,29 @@ const FlameGraphRoot = ({
   seriesActions,
   height,
   __globalActions,
+  onClick,
   children
 }) => {
+  const isolationEnabled = __globalActions === true;
+  const { isolatedId, isolate, goBack, goForward, canGoBack, canGoForward } = useFlameIsolationState();
+  const { isolatedRoot, effectiveData, visibleRootId, childrenByParentId } = useFlameData({
+    data,
+    idAccessor,
+    parentIdAccessor,
+    isolatedId,
+    isolationEnabled
+  });
   const aggregatedData = useMemo(
-    () => aggregateSpansToFlameGraph(
-      data.map((datum, index) => ({
-        ...datum,
-        [FLAME_ORIGINAL_IDX]: index
-      })),
-      {
-        idAccessor,
-        parentIdAccessor,
-        labelAccessor,
-        valueAccessor,
-        selfValueAccessor,
-        sortAccessor
-      }
-    ),
+    () => aggregateSpansToFlameGraph(effectiveData, {
+      idAccessor,
+      parentIdAccessor,
+      labelAccessor,
+      valueAccessor,
+      selfValueAccessor,
+      sortAccessor
+    }),
     [
-      data,
+      effectiveData,
       idAccessor,
       parentIdAccessor,
       labelAccessor,
@@ -56,12 +65,13 @@ const FlameGraphRoot = ({
       sortAccessor
     ]
   );
+  const handleOnEvent = useFlameOnEvent({
+    onClick,
+    data,
+    idAccessor,
+    childrenByParentId
+  });
   const { customTooltipTemplate, colorRules } = iterateSlots(children);
-  const [internalZoom, setInternalZoom] = useState(void 0);
-  const effectiveZoom = currentZoom ?? internalZoom;
-  const handleIsolate = useCallback((zoom) => {
-    setInternalZoom(zoom);
-  }, []);
   const rootValue = useMemo(
     () => aggregatedData.reduce(
       (max, d) => Math.max(max, Number(d[valueAccessor] ?? 0)),
@@ -69,12 +79,31 @@ const FlameGraphRoot = ({
     ),
     [aggregatedData, valueAccessor]
   );
-  return /* @__PURE__ */ jsxs(
+  const globalActions = useMemo(() => {
+    if (!isolationEnabled) {
+      return void 0;
+    }
+    return (datapoint) => {
+      const id = datapoint[idAccessor];
+      return [
+        /* @__PURE__ */ jsx(
+          IsolateSegmentAction,
+          {
+            onSelect: () => isolate(id),
+            disabled: id === visibleRootId
+          },
+          "isolate"
+        )
+      ];
+    };
+  }, [isolationEnabled, idAccessor, isolate, visibleRootId]);
+  const chart = /* @__PURE__ */ jsxs(
     XYChart,
     {
       data: aggregatedData,
       truncationMode,
       height,
+      __onEvent: handleOnEvent,
       children: [
         /* @__PURE__ */ jsx(
           XYChart.RectSeries,
@@ -96,7 +125,7 @@ const FlameGraphRoot = ({
             type: "numerical",
             position: "top",
             hidden: true,
-            currentZoom: effectiveZoom,
+            currentZoom: isolatedRoot !== null ? void 0 : currentZoom,
             hideCrosshair: true
           }
         ),
@@ -129,13 +158,28 @@ const FlameGraphRoot = ({
               valueFormatter,
               seriesActions,
               rootValue,
-              onIsolate: __globalActions ? handleIsolate : void 0
+              globalActions
             }
           )
         ) })
       ]
     }
   );
+  if (!isolationEnabled) {
+    return chart;
+  }
+  return /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", gap: 8, children: [
+    /* @__PURE__ */ jsx(
+      FlameIsolationNav,
+      {
+        canGoBack,
+        canGoForward,
+        onGoBack: goBack,
+        onGoForward: goForward
+      }
+    ),
+    chart
+  ] });
 };
 const FlameGraph = Object.assign(FlameGraphRoot, {
   Tooltip,
@@ -143,7 +187,6 @@ const FlameGraph = Object.assign(FlameGraphRoot, {
 });
 FlameGraph.displayName = DISPLAY_NAME_FLAME_GRAPH;
 export {
-  FlameGraph,
-  FlameGraphRoot
+  FlameGraph
 };
 //# sourceMappingURL=FlameGraph.js.map

package/esm/charts/flame/flame-graph/FlameGraph.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/flame/flame-graph/FlameGraph.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren, useCallback, useMemo, useState } from 'react';\n\nimport { iterateSlots } from './utils/iterate-slots.js';\nimport { ColorRule } from '../../core/slots/ColorRule.js';\nimport type { ChartDatapoint } from '../../core/types/chart-data.js';\nimport { XYChart } from '../../xy-chart/XYChartRoot.js';\nimport {\n  DEPTH_FIELD,\n  DISPLAY_NAME_FLAME_GRAPH,\n  FLAME_ORIGINAL_IDX,\n  XY_DEFAULTS,\n} from '../shared/constants.js';\nimport { DefaultTooltip } from './components/tooltip/DefaultTooltip.js';\nimport { FlameGraphTooltipSlot as Tooltip } from '../shared/slots/Tooltip.js';\nimport type { FlameGraphProps } from '../shared/types/flame-chart.js';\nimport { aggregateSpansToFlameGraph } from '../shared/utils/aggregate-spans-to-flame-graph.js';\nimport { resolveFlameTooltipContent } from '../shared/utils/resolve-flame-tooltip-content.js';\n\n/**\n * @internal\n */\nexport const FlameGraphRoot = /* @__PURE__ */ <\n  TData extends ChartDatapoint = ChartDatapoint,\n>({\n  data,\n  idAccessor,\n  parentIdAccessor,\n  valueAccessor,\n  selfValueAccessor,\n  labelAccessor,\n  sortAccessor,\n  colorPalette,\n  orientation = 'bottom-up',\n  truncationMode,\n  valueFormatter,\n  currentZoom,\n  seriesActions,\n  height,\n  __globalActions,\n  children,\n}: PropsWithChildren<FlameGraphProps<TData>>) => {\n  const aggregatedData = useMemo(\n    () =>\n      aggregateSpansToFlameGraph(\n        data.map((datum, index) => ({\n          ...datum,\n          [FLAME_ORIGINAL_IDX]: index,\n        })),\n        {\n          idAccessor,\n          parentIdAccessor,\n          labelAccessor,\n          valueAccessor,\n          selfValueAccessor,\n          sortAccessor,\n        },\n      ),\n    [\n      data,\n      idAccessor,\n      parentIdAccessor,\n      labelAccessor,\n      valueAccessor,\n      selfValueAccessor,\n      sortAccessor,\n    ],\n  );\n\n  const { customTooltipTemplate, colorRules } = iterateSlots<TData>(children);\n\n  const [internalZoom, setInternalZoom] = useState<\n    [number, number] | undefined\n  >(undefined);\n\n  const effectiveZoom = currentZoom ?? internalZoom;\n\n  //TODO: Remove the internal isolate logic in APPDEV-19294\n  const handleIsolate = useCallback((zoom: [number, number]) => {\n    setInternalZoom(zoom);\n  }, []);\n\n  const rootValue = useMemo(\n    () =>\n      aggregatedData.reduce(\n        (max, d) => Math.max(max, Number(d[valueAccessor] ?? 0)),\n        0,\n      ),\n    [aggregatedData, valueAccessor],\n  );\n\n  return (\n    <XYChart\n      data={aggregatedData}\n      truncationMode={truncationMode}\n      height={height}\n    >\n      <XYChart.RectSeries\n        x0Accessor={XY_DEFAULTS.x0Accessor}\n        x1Accessor={XY_DEFAULTS.x1Accessor}\n        y0Accessor={DEPTH_FIELD}\n        valueAccessor={valueAccessor}\n        colorPalette={colorPalette}\n        _labelAccessor={labelAccessor}\n        xAxisId={XY_DEFAULTS.xAxisId}\n        yAxisId={XY_DEFAULTS.yAxisId}\n      />\n      <XYChart.XAxis\n        id={XY_DEFAULTS.xAxisId}\n        type=\"numerical\"\n        position=\"top\"\n        hidden\n        currentZoom={effectiveZoom}\n        hideCrosshair\n      />\n      <XYChart.YAxis\n        id={XY_DEFAULTS.yAxisId}\n        type=\"categorical\"\n        position=\"left\"\n        hidden\n        reversed={orientation === 'bottom-up'}\n        hideCrosshair\n      />\n      <XYChart.Legend hidden />\n      <XYChart.Toolbar hidden />\n      {colorRules}\n      <XYChart.Tooltip>\n        {(payload) =>\n          resolveFlameTooltipContent(\n            payload,\n            data,\n            customTooltipTemplate,\n            () => (\n              <DefaultTooltip\n                payload={payload}\n                data={data}\n                labelAccessor={labelAccessor}\n                valueAccessor={valueAccessor}\n                selfValueAccessor={selfValueAccessor}\n                valueFormatter={valueFormatter}\n                seriesActions={seriesActions}\n                rootValue={rootValue}\n                onIsolate={__globalActions ? handleIsolate : undefined}\n              />\n            ),\n          )\n        }\n      </XYChart.Tooltip>\n    </XYChart>\n  );\n};\n\n/** @internal */\nexport const FlameGraph = Object.assign(FlameGraphRoot, {\n  Tooltip,\n  ColorRule,\n});\n\n(FlameGraph as typeof FlameGraph & { displayName: string }).displayName =\n  DISPLAY_NAME_FLAME_GRAPH;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { type PropsWithChildren, useMemo } from 'react';\n\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { ColorRule } from '../../core/slots/ColorRule.js';\nimport type { ChartDatapoint } from '../../core/types/chart-data.js';\nimport { XYChart } from '../../xy-chart/XYChartRoot.js';\nimport { FlameIsolationNav } from '../shared/components/isolation-nav/FlameIsolationNav.js';\nimport { IsolateSegmentAction } from '../shared/components/tooltip/IsolateSegmentAction.js';\nimport {\n  DEPTH_FIELD,\n  DISPLAY_NAME_FLAME_GRAPH,\n  XY_DEFAULTS,\n} from '../shared/constants.js';\nimport { useFlameData } from '../shared/hooks/use-flame-data.js';\nimport { useFlameOnEvent } from '../shared/hooks/use-flame-on-event.js';\nimport { useFlameIsolationState } from '../shared/hooks/use-isolation-state.js';\nimport { DefaultTooltip } from './components/tooltip/DefaultTooltip.js';\nimport { iterateSlots } from './utils/iterate-slots.js';\nimport { FlameGraphTooltipSlot as Tooltip } from '../shared/slots/Tooltip.js';\nimport type { FlameGraphProps } from '../shared/types/flame-chart.js';\nimport { aggregateSpansToFlameGraph } from '../shared/utils/aggregate-spans-to-flame-graph.js';\nimport { resolveFlameTooltipContent } from '../shared/utils/resolve-flame-tooltip-content.js';\n\n/**\n * @internal\n */\nconst FlameGraphRoot = <TData extends ChartDatapoint = ChartDatapoint>({\n  data,\n  idAccessor,\n  parentIdAccessor,\n  valueAccessor,\n  selfValueAccessor,\n  labelAccessor,\n  sortAccessor,\n  colorPalette,\n  orientation = 'bottom-up',\n  truncationMode,\n  valueFormatter,\n  currentZoom,\n  seriesActions,\n  height,\n  __globalActions,\n  onClick,\n  children,\n}: PropsWithChildren<FlameGraphProps<TData>>) => {\n  const isolationEnabled = __globalActions === true;\n  const { isolatedId, isolate, goBack, goForward, canGoBack, canGoForward } =\n    useFlameIsolationState();\n\n  const { isolatedRoot, effectiveData, visibleRootId, childrenByParentId } =\n    useFlameData({\n      data,\n      idAccessor,\n      parentIdAccessor,\n      isolatedId,\n      isolationEnabled,\n    });\n\n  const aggregatedData = useMemo(\n    () =>\n      aggregateSpansToFlameGraph(effectiveData, {\n        idAccessor,\n        parentIdAccessor,\n        labelAccessor,\n        valueAccessor,\n        selfValueAccessor,\n        sortAccessor,\n      }),\n    [\n      effectiveData,\n      idAccessor,\n      parentIdAccessor,\n      labelAccessor,\n      valueAccessor,\n      selfValueAccessor,\n      sortAccessor,\n    ],\n  );\n\n  const handleOnEvent = useFlameOnEvent({\n    onClick,\n    data,\n    idAccessor,\n    childrenByParentId,\n  });\n\n  const { customTooltipTemplate, colorRules } = iterateSlots<TData>(children);\n\n  const rootValue = useMemo(\n    () =>\n      aggregatedData.reduce(\n        (max, d) => Math.max(max, Number(d[valueAccessor] ?? 0)),\n        0,\n      ),\n    [aggregatedData, valueAccessor],\n  );\n\n  const globalActions = useMemo(() => {\n    if (!isolationEnabled) {\n      return undefined;\n    }\n    return (datapoint: TData) => {\n      const id = datapoint[idAccessor];\n      return [\n        <IsolateSegmentAction\n          key=\"isolate\"\n          onSelect={() => isolate(id)}\n          disabled={id === visibleRootId}\n        />,\n      ];\n    };\n  }, [isolationEnabled, idAccessor, isolate, visibleRootId]);\n\n  const chart = (\n    <XYChart\n      data={aggregatedData}\n      truncationMode={truncationMode}\n      height={height}\n      __onEvent={handleOnEvent}\n    >\n      <XYChart.RectSeries\n        x0Accessor={XY_DEFAULTS.x0Accessor}\n        x1Accessor={XY_DEFAULTS.x1Accessor}\n        y0Accessor={DEPTH_FIELD}\n        valueAccessor={valueAccessor}\n        colorPalette={colorPalette}\n        _labelAccessor={labelAccessor}\n        xAxisId={XY_DEFAULTS.xAxisId}\n        yAxisId={XY_DEFAULTS.yAxisId}\n      />\n      <XYChart.XAxis\n        id={XY_DEFAULTS.xAxisId}\n        type=\"numerical\"\n        position=\"top\"\n        hidden\n        currentZoom={isolatedRoot !== null ? undefined : currentZoom}\n        hideCrosshair\n      />\n      <XYChart.YAxis\n        id={XY_DEFAULTS.yAxisId}\n        type=\"categorical\"\n        position=\"left\"\n        hidden\n        reversed={orientation === 'bottom-up'}\n        hideCrosshair\n      />\n      <XYChart.Legend hidden />\n      <XYChart.Toolbar hidden />\n      {colorRules}\n      <XYChart.Tooltip>\n        {(payload) =>\n          resolveFlameTooltipContent(\n            payload,\n            data,\n            customTooltipTemplate,\n            () => (\n              <DefaultTooltip<TData>\n                payload={payload}\n                data={data}\n                labelAccessor={labelAccessor}\n                valueAccessor={valueAccessor}\n                selfValueAccessor={selfValueAccessor}\n                valueFormatter={valueFormatter}\n                seriesActions={seriesActions}\n                rootValue={rootValue}\n                globalActions={globalActions}\n              />\n            ),\n          )\n        }\n      </XYChart.Tooltip>\n    </XYChart>\n  );\n\n  if (!isolationEnabled) {\n    return chart;\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={8}>\n      <FlameIsolationNav\n        canGoBack={canGoBack}\n        canGoForward={canGoForward}\n        onGoBack={goBack}\n        onGoForward={goForward}\n      />\n      {chart}\n    </Flex>\n  );\n};\n\n/**\n * @internal\n */\nexport const FlameGraph = Object.assign(FlameGraphRoot, {\n  Tooltip,\n  ColorRule,\n});\n\n(FlameGraph as typeof FlameGraph & { displayName: string }).displayName =\n  DISPLAY_NAME_FLAME_GRAPH;\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/flame/flame-graph/components/tooltip/DefaultTooltip.js

@@ -2,7 +2,6 @@ import { jsx } from "react/jsx-runtime";
 import { useIntl } from "react-intl";
 import { FLAME_GRAPH_TOOLTIP_MESSAGES } from "./messages.js";
 import { FlameTooltip } from "../../../shared/components/tooltip/FlameTooltip.js";
-import { XY_DEFAULTS } from "../../../shared/constants.js";
 import { buildFlameTooltipBaseData } from "../../../shared/utils/build-tooltip-base-data.js";
 import { formatFlameValue } from "../../../shared/utils/format-flame-value.js";
 function DefaultTooltip({
@@ -14,10 +13,18 @@ function DefaultTooltip({
   valueFormatter,
   seriesActions,
   rootValue,
-  onIsolate
+  globalActions
 }) {
   const intl = useIntl();
-  const { datapoint, color, label, subheader, actions, selfValue } = buildFlameTooltipBaseData({
+  const {
+    datapoint,
+    originalDatapoint,
+    color,
+    label,
+    subheader,
+    actions,
+    selfValue
+  } = buildFlameTooltipBaseData({
     payload,
     data,
     labelAccessor,
@@ -33,9 +40,7 @@ function DefaultTooltip({
     }
     return `${Math.round(value / rootValue * 1e3) / 10}%`;
   };
-  const x0 = Number(datapoint?.[XY_DEFAULTS.x0Accessor] ?? 0);
-  const x1 = Number(datapoint?.[XY_DEFAULTS.x1Accessor] ?? 0);
-  const handleIsolate = onIsolate !== void 0 && datapoint !== void 0 ? () => onIsolate([x0, x1]) : void 0;
+  const resolvedGlobalActions = globalActions !== void 0 && originalDatapoint !== void 0 ? globalActions(originalDatapoint) : void 0;
   return /* @__PURE__ */ jsx(
     FlameTooltip,
     {
@@ -50,7 +55,7 @@ function DefaultTooltip({
       selfValue,
       selfRelativeValue: selfValueAccessor !== void 0 ? toRelativePct(Number(datapoint?.[selfValueAccessor] ?? 0)) : void 0,
       actions,
-      onIsolate: handleIsolate
+      globalActions: resolvedGlobalActions
     }
   );
 }

package/esm/charts/flame/flame-graph/components/tooltip/DefaultTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/flame/flame-graph/components/tooltip/DefaultTooltip.tsx"],
-  "sourcesContent": ["import { type ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { FLAME_GRAPH_TOOLTIP_MESSAGES } from './messages.js';\nimport type { ChartDatapoint } from '../../../../core/types/chart-data.js';\nimport type { Formatter } from '../../../../core/types/formatter.js';\nimport type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';\nimport type { XYChartTooltipPayload } from '../../../../xy-chart/types/xy-chart.js';\nimport { FlameTooltip } from '../../../shared/components/tooltip/FlameTooltip.js';\nimport { XY_DEFAULTS } from '../../../shared/constants.js';\nimport { buildFlameTooltipBaseData } from '../../../shared/utils/build-tooltip-base-data.js';\nimport { formatFlameValue } from '../../../shared/utils/format-flame-value.js';\n\ninterface DefaultTooltipProps<TData extends ChartDatapoint> {\n  payload: XYChartTooltipPayload;\n  data: readonly TData[];\n  labelAccessor: string;\n  valueAccessor: string;\n  selfValueAccessor?: string;\n  valueFormatter?: Formatter;\n  seriesActions?: (datapoint: TData) => SeriesActionsTemplate;\n  rootValue: number;\n  onIsolate?: (zoom: [number, number]) => void;\n}\n\nexport function DefaultTooltip<TData extends ChartDatapoint>({\n  payload,\n  data,\n  labelAccessor,\n  valueAccessor,\n  selfValueAccessor,\n  valueFormatter,\n  seriesActions,\n  rootValue,\n  onIsolate,\n}: Readonly<DefaultTooltipProps<TData>>): ReactNode {\n  const intl = useIntl();\n  const { datapoint, color, label, subheader, actions, selfValue } =\n    buildFlameTooltipBaseData({\n      payload,\n      data,\n      labelAccessor,\n      selfValueAccessor,\n      valueFormatter,\n      seriesActions,\n      intl,\n    });\n\n  const totalValue = Number(datapoint?.[valueAccessor] ?? 0);\n\n  const toRelativePct = (value: number): string | undefined => {\n    if (rootValue <= 0) {\n      return undefined;\n    }\n    return `${Math.round((value / rootValue) * 1000) / 10}%`;\n  };\n\n  const x0 = Number(datapoint?.[XY_DEFAULTS.x0Accessor] ?? 0);\n  const x1 = Number(datapoint?.[XY_DEFAULTS.x1Accessor] ?? 0);\n  const handleIsolate =\n    onIsolate !== undefined && datapoint !== undefined\n      ? () => onIsolate([x0, x1])\n      : undefined;\n\n  return (\n    <FlameTooltip\n      label={label}\n      subheader={subheader}\n      color={color}\n      valueLabel={intl.formatMessage(\n        FLAME_GRAPH_TOOLTIP_MESSAGES.absolutePercentOfTotal,\n      )}\n      totalValue={formatFlameValue(totalValue, valueFormatter)}\n      totalRelativeValue={toRelativePct(totalValue)}\n      selfValue={selfValue}\n      selfRelativeValue={\n        selfValueAccessor !== undefined\n          ? toRelativePct(Number(datapoint?.[selfValueAccessor] ?? 0))\n          : undefined\n      }\n      actions={actions}\n      onIsolate={handleIsolate}\n    />\n  );\n}\n"],
-  "mappings": "AAiEI;AAhEJ,SAAS,eAAe;AAExB,SAAS,oCAAoC;AAK7C,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,iCAAiC;AAC1C,SAAS,wBAAwB;AAc1B,SAAS,eAA6C;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoD;AAClD,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,WAAW,OAAO,OAAO,WAAW,SAAS,UAAU,IAC7D,0BAA0B;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAEH,QAAM,aAAa,OAAO,YAAY,aAAa,KAAK,CAAC;AAEzD,QAAM,gBAAgB,CAAC,UAAsC;AAC3D,QAAI,aAAa,GAAG;AAClB,aAAO;AAAA,IACT;AACA,WAAO,GAAG,KAAK,MAAO,QAAQ,YAAa,GAAI,IAAI,EAAE;AAAA,EACvD;AAEA,QAAM,KAAK,OAAO,YAAY,YAAY,UAAU,KAAK,CAAC;AAC1D,QAAM,KAAK,OAAO,YAAY,YAAY,UAAU,KAAK,CAAC;AAC1D,QAAM,gBACJ,cAAc,UAAa,cAAc,SACrC,MAAM,UAAU,CAAC,IAAI,EAAE,CAAC,IACxB;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY,KAAK;AAAA,QACf,6BAA6B;AAAA,MAC/B;AAAA,MACA,YAAY,iBAAiB,YAAY,cAAc;AAAA,MACvD,oBAAoB,cAAc,UAAU;AAAA,MAC5C;AAAA,MACA,mBACE,sBAAsB,SAClB,cAAc,OAAO,YAAY,iBAAiB,KAAK,CAAC,CAAC,IACzD;AAAA,MAEN;AAAA,MACA,WAAW;AAAA;AAAA,EACb;AAEJ;",
+  "sourcesContent": ["import { type ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { FLAME_GRAPH_TOOLTIP_MESSAGES } from './messages.js';\nimport type { ChartDatapoint } from '../../../../core/types/chart-data.js';\nimport type { Formatter } from '../../../../core/types/formatter.js';\nimport type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';\nimport type { XYChartTooltipPayload } from '../../../../xy-chart/types/xy-chart.js';\nimport { FlameTooltip } from '../../../shared/components/tooltip/FlameTooltip.js';\nimport { buildFlameTooltipBaseData } from '../../../shared/utils/build-tooltip-base-data.js';\nimport { formatFlameValue } from '../../../shared/utils/format-flame-value.js';\n\ninterface DefaultTooltipProps<TData extends ChartDatapoint> {\n  payload: XYChartTooltipPayload;\n  data: readonly TData[];\n  labelAccessor: string;\n  valueAccessor: string;\n  selfValueAccessor?: string;\n  valueFormatter?: Formatter;\n  seriesActions?: (datapoint: TData) => SeriesActionsTemplate;\n  rootValue: number;\n  globalActions?: (datapoint: TData) => ReactNode[];\n}\n\nexport function DefaultTooltip<TData extends ChartDatapoint>({\n  payload,\n  data,\n  labelAccessor,\n  valueAccessor,\n  selfValueAccessor,\n  valueFormatter,\n  seriesActions,\n  rootValue,\n  globalActions,\n}: Readonly<DefaultTooltipProps<TData>>): ReactNode {\n  const intl = useIntl();\n  const {\n    datapoint,\n    originalDatapoint,\n    color,\n    label,\n    subheader,\n    actions,\n    selfValue,\n  } = buildFlameTooltipBaseData({\n    payload,\n    data,\n    labelAccessor,\n    selfValueAccessor,\n    valueFormatter,\n    seriesActions,\n    intl,\n  });\n\n  const totalValue = Number(datapoint?.[valueAccessor] ?? 0);\n\n  const toRelativePct = (value: number): string | undefined => {\n    if (rootValue <= 0) {\n      return undefined;\n    }\n    return `${Math.round((value / rootValue) * 1000) / 10}%`;\n  };\n\n  const resolvedGlobalActions =\n    globalActions !== undefined && originalDatapoint !== undefined\n      ? globalActions(originalDatapoint)\n      : undefined;\n\n  return (\n    <FlameTooltip\n      label={label}\n      subheader={subheader}\n      color={color}\n      valueLabel={intl.formatMessage(\n        FLAME_GRAPH_TOOLTIP_MESSAGES.absolutePercentOfTotal,\n      )}\n      totalValue={formatFlameValue(totalValue, valueFormatter)}\n      totalRelativeValue={toRelativePct(totalValue)}\n      selfValue={selfValue}\n      selfRelativeValue={\n        selfValueAccessor !== undefined\n          ? toRelativePct(Number(datapoint?.[selfValueAccessor] ?? 0))\n          : undefined\n      }\n      actions={actions}\n      globalActions={resolvedGlobalActions}\n    />\n  );\n}\n"],
+  "mappings": "AAqEI;AApEJ,SAAS,eAAe;AAExB,SAAS,oCAAoC;AAK7C,SAAS,oBAAoB;AAC7B,SAAS,iCAAiC;AAC1C,SAAS,wBAAwB;AAc1B,SAAS,eAA6C;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAoD;AAClD,QAAM,OAAO,QAAQ;AACrB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,0BAA0B;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,aAAa,OAAO,YAAY,aAAa,KAAK,CAAC;AAEzD,QAAM,gBAAgB,CAAC,UAAsC;AAC3D,QAAI,aAAa,GAAG;AAClB,aAAO;AAAA,IACT;AACA,WAAO,GAAG,KAAK,MAAO,QAAQ,YAAa,GAAI,IAAI,EAAE;AAAA,EACvD;AAEA,QAAM,wBACJ,kBAAkB,UAAa,sBAAsB,SACjD,cAAc,iBAAiB,IAC/B;AAEN,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY,KAAK;AAAA,QACf,6BAA6B;AAAA,MAC/B;AAAA,MACA,YAAY,iBAAiB,YAAY,cAAc;AAAA,MACvD,oBAAoB,cAAc,UAAU;AAAA,MAC5C;AAAA,MACA,mBACE,sBAAsB,SAClB,cAAc,OAAO,YAAY,iBAAiB,KAAK,CAAC,CAAC,IACzD;AAAA,MAEN;AAAA,MACA,eAAe;AAAA;AAAA,EACjB;AAEJ;",
   "names": []
 }

package/esm/charts/flame/shared/components/isolation-nav/FlameIsolationNav.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIntl } from "react-intl";
+import { ChevronDownIcon, ChevronUpIcon } from "@dynatrace/strato-icons";
+import { FLAME_ISOLATION_NAV_MESSAGES } from "./messages.js";
+import { Button } from "../../../../../buttons/button/Button.js";
+import { Flex } from "../../../../../layouts/flex/Flex.js";
+function FlameIsolationNav({
+  canGoBack,
+  canGoForward,
+  onGoBack,
+  onGoForward
+}) {
+  const intl = useIntl();
+  return /* @__PURE__ */ jsxs(Flex, { gap: 4, alignItems: "center", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "default",
+        size: "condensed",
+        disabled: !canGoBack,
+        onClick: onGoBack,
+        "aria-label": intl.formatMessage(FLAME_ISOLATION_NAV_MESSAGES.goBack),
+        children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(ChevronUpIcon, {}) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "default",
+        size: "condensed",
+        disabled: !canGoForward,
+        onClick: onGoForward,
+        "aria-label": intl.formatMessage(FLAME_ISOLATION_NAV_MESSAGES.goForward),
+        children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+      }
+    )
+  ] });
+}
+export {
+  FlameIsolationNav
+};
+//# sourceMappingURL=FlameIsolationNav.js.map

package/esm/charts/flame/shared/components/isolation-nav/FlameIsolationNav.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/flame/shared/components/isolation-nav/FlameIsolationNav.tsx"],
+  "sourcesContent": ["import { type ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ChevronDownIcon, ChevronUpIcon } from '@dynatrace/strato-icons';\n\nimport { FLAME_ISOLATION_NAV_MESSAGES } from './messages.js';\nimport { Button } from '../../../../../buttons/button/Button.js';\nimport { Flex } from '../../../../../layouts/flex/Flex.js';\n\ninterface FlameIsolationNavProps {\n  canGoBack: boolean;\n  canGoForward: boolean;\n  onGoBack: () => void;\n  onGoForward: () => void;\n}\n\n/**\n * @internal\n */\nexport function FlameIsolationNav({\n  canGoBack,\n  canGoForward,\n  onGoBack,\n  onGoForward,\n}: Readonly<FlameIsolationNavProps>): ReactNode {\n  const intl = useIntl();\n  return (\n    <Flex gap={4} alignItems=\"center\">\n      <Button\n        variant=\"default\"\n        size=\"condensed\"\n        disabled={!canGoBack}\n        onClick={onGoBack}\n        aria-label={intl.formatMessage(FLAME_ISOLATION_NAV_MESSAGES.goBack)}\n      >\n        <Button.Prefix>\n          <ChevronUpIcon />\n        </Button.Prefix>\n      </Button>\n      <Button\n        variant=\"default\"\n        size=\"condensed\"\n        disabled={!canGoForward}\n        onClick={onGoForward}\n        aria-label={intl.formatMessage(FLAME_ISOLATION_NAV_MESSAGES.goForward)}\n      >\n        <Button.Prefix>\n          <ChevronDownIcon />\n        </Button.Prefix>\n      </Button>\n    </Flex>\n  );\n}\n"],
+  "mappings": "AA2BI,SASM,KATN;AA1BJ,SAAS,eAAe;AAExB,SAAS,iBAAiB,qBAAqB;AAE/C,SAAS,oCAAoC;AAC7C,SAAS,cAAc;AACvB,SAAS,YAAY;AAYd,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgD;AAC9C,QAAM,OAAO,QAAQ;AACrB,SACE,qBAAC,QAAK,KAAK,GAAG,YAAW,UACvB;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,UAAU,CAAC;AAAA,QACX,SAAS;AAAA,QACT,cAAY,KAAK,cAAc,6BAA6B,MAAM;AAAA,QAElE,8BAAC,OAAO,QAAP,EACC,8BAAC,iBAAc,GACjB;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,UAAU,CAAC;AAAA,QACX,SAAS;AAAA,QACT,cAAY,KAAK,cAAc,6BAA6B,SAAS;AAAA,QAErE,8BAAC,OAAO,QAAP,EACC,8BAAC,mBAAgB,GACnB;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/esm/charts/flame/shared/components/isolation-nav/messages.js

@@ -0,0 +1,17 @@
+import { defineMessages } from "react-intl";
+const FLAME_ISOLATION_NAV_MESSAGES = defineMessages({
+  goBack: {
+    id: "mdgoWaXS0EbXGIlz",
+    defaultMessage: "Isolation: back",
+    description: "Accessible label for the isolation navigation button that moves one level toward the original root of the flame chart or flame graph."
+  },
+  goForward: {
+    id: "ZddDsKUiSczT7I3C",
+    defaultMessage: "Isolation: forward",
+    description: "Accessible label for the isolation navigation button that re-advances one level along the previously taken isolation path."
+  }
+});
+export {
+  FLAME_ISOLATION_NAV_MESSAGES
+};
+//# sourceMappingURL=messages.js.map

package/esm/charts/flame/shared/components/isolation-nav/messages.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/flame/shared/components/isolation-nav/messages.ts"],
+  "sourcesContent": ["import { defineMessages } from 'react-intl';\n\nexport const FLAME_ISOLATION_NAV_MESSAGES = defineMessages({\n  goBack: {\n    id: 'mdgoWaXS0EbXGIlz',\n    defaultMessage: 'Isolation: back',\n    description:\n      'Accessible label for the isolation navigation button that moves one level toward the original root of the flame chart or flame graph.',\n  },\n  goForward: {\n    id: 'ZddDsKUiSczT7I3C',\n    defaultMessage: 'Isolation: forward',\n    description:\n      'Accessible label for the isolation navigation button that re-advances one level along the previously taken isolation path.',\n  },\n});\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAExB,MAAM,+BAA+B,eAAe;AAAA,EACzD,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aACE;AAAA,EACJ;AAAA,EACA,WAAW;AAAA,IACT,IAAI;AAAA,IACJ,gBAAgB;AAAA,IAChB,aACE;AAAA,EACJ;AACF,CAAC;",
+  "names": []
+}

package/esm/charts/flame/shared/components/tooltip/FlameTooltip.js

@@ -1,7 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useIntl } from "react-intl";
-import { ViewIcon } from "@dynatrace/strato-icons";
 import { FLAME_TOOLTIP_MESSAGES } from "./messages.js";
 import {
   ExternalConfigContext,
@@ -19,7 +18,7 @@ function FlameTooltip({
   selfValue,
   selfRelativeValue,
   actions,
-  onIsolate
+  globalActions
 }) {
   const intl = useIntl();
   const externalConfig = useExternalConfig();
@@ -67,20 +66,10 @@ function FlameTooltip({
         actions
       }
     ),
-    onIsolate !== void 0 && /* @__PURE__ */ jsx(
+    globalActions !== void 0 && globalActions.length > 0 && /* @__PURE__ */ jsx(
       ChartTooltip.Footer,
       {
-        actions: [
-          /* @__PURE__ */ jsx(
-            ChartTooltip.Action,
-            {
-              label: intl.formatMessage(FLAME_TOOLTIP_MESSAGES.isolateSegment),
-              icon: /* @__PURE__ */ jsx(ViewIcon, {}),
-              onSelect: onIsolate
-            },
-            "isolate"
-          )
-        ],
+        actions: globalActions,
         unpinnedPlaceholderText: void 0
       }
     )

package/esm/charts/flame/shared/components/tooltip/FlameTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/flame/shared/components/tooltip/FlameTooltip.tsx"],
-  "sourcesContent": ["import { type ReactNode, useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ViewIcon } from '@dynatrace/strato-icons';\n\nimport { FLAME_TOOLTIP_MESSAGES } from './messages.js';\nimport {\n  ExternalConfigContext,\n  useExternalConfig,\n} from '../../../../core/components/overlay-tooltip/contexts/ExternalConfigContext.js';\nimport { ChartTooltip } from '../../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';\n\nconst FLAME_TOOLTIP_PREFIX = ''; //We don't want X-value labels from XYChart default tooltip\n\ninterface FlameTooltipProps {\n  label: string;\n  subheader?: string;\n  color: string;\n  valueLabel: string;\n  totalValue: string;\n  totalRelativeValue?: string;\n  selfValue?: string;\n  selfRelativeValue?: string;\n  actions?: () => SeriesActionsTemplate;\n  onIsolate?: () => void;\n}\n\nexport function FlameTooltip({\n  label,\n  subheader,\n  color,\n  valueLabel,\n  totalValue,\n  totalRelativeValue,\n  selfValue,\n  selfRelativeValue,\n  actions,\n  onIsolate,\n}: Readonly<FlameTooltipProps>): ReactNode {\n  const intl = useIntl();\n  const externalConfig = useExternalConfig();\n\n  const contextValue = useMemo(\n    () => ({\n      ...externalConfig,\n      symbolPosition: 'left' as const,\n      displayHeaderDivider: true,\n    }),\n    [externalConfig],\n  );\n\n  return (\n    <ExternalConfigContext.Provider value={contextValue}>\n      <ChartTooltip.Header\n        header1={label}\n        label={FLAME_TOOLTIP_PREFIX}\n        subheader={subheader}\n      />\n      <ChartTooltip.SeriesHeader\n        seriesLabel={intl.formatMessage(FLAME_TOOLTIP_MESSAGES.values)}\n        valueLabel={valueLabel}\n      />\n      <ChartTooltip.SeriesItem\n        color={color}\n        name={intl.formatMessage(FLAME_TOOLTIP_MESSAGES.total)}\n        value={totalValue}\n        relativeValue={totalRelativeValue}\n        actions={actions}\n      />\n      {selfValue !== undefined && (\n        <ChartTooltip.SeriesItem\n          color={color}\n          name={intl.formatMessage(FLAME_TOOLTIP_MESSAGES.self)}\n          value={selfValue}\n          relativeValue={selfRelativeValue}\n          actions={actions}\n        />\n      )}\n      {onIsolate !== undefined && (\n        <ChartTooltip.Footer\n          actions={[\n            <ChartTooltip.Action\n              key=\"isolate\"\n              label={intl.formatMessage(FLAME_TOOLTIP_MESSAGES.isolateSegment)}\n              icon={<ViewIcon />}\n              onSelect={onIsolate}\n            />,\n          ]}\n          unpinnedPlaceholderText={undefined}\n        />\n      )}\n    </ExternalConfigContext.Provider>\n  );\n}\n"],
-  "mappings": "AAqDI,SACE,KADF;AArDJ,SAAyB,eAAe;AACxC,SAAS,eAAe;AAExB,SAAS,gBAAgB;AAEzB,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAG7B,MAAM,uBAAuB;AAetB,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2C;AACzC,QAAM,OAAO,QAAQ;AACrB,QAAM,iBAAiB,kBAAkB;AAEzC,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL,GAAG;AAAA,MACH,gBAAgB;AAAA,MAChB,sBAAsB;AAAA,IACxB;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE,qBAAC,sBAAsB,UAAtB,EAA+B,OAAO,cACrC;AAAA;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,SAAS;AAAA,QACT,OAAO;AAAA,QACP;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,aAAa,KAAK,cAAc,uBAAuB,MAAM;AAAA,QAC7D;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC;AAAA,QACA,MAAM,KAAK,cAAc,uBAAuB,KAAK;AAAA,QACrD,OAAO;AAAA,QACP,eAAe;AAAA,QACf;AAAA;AAAA,IACF;AAAA,IACC,cAAc,UACb;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC;AAAA,QACA,MAAM,KAAK,cAAc,uBAAuB,IAAI;AAAA,QACpD,OAAO;AAAA,QACP,eAAe;AAAA,QACf;AAAA;AAAA,IACF;AAAA,IAED,cAAc,UACb;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,SAAS;AAAA,UACP;AAAA,YAAC,aAAa;AAAA,YAAb;AAAA,cAEC,OAAO,KAAK,cAAc,uBAAuB,cAAc;AAAA,cAC/D,MAAM,oBAAC,YAAS;AAAA,cAChB,UAAU;AAAA;AAAA,YAHN;AAAA,UAIN;AAAA,QACF;AAAA,QACA,yBAAyB;AAAA;AAAA,IAC3B;AAAA,KAEJ;AAEJ;",
+  "sourcesContent": ["import { type ReactNode, useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { FLAME_TOOLTIP_MESSAGES } from './messages.js';\nimport {\n  ExternalConfigContext,\n  useExternalConfig,\n} from '../../../../core/components/overlay-tooltip/contexts/ExternalConfigContext.js';\nimport { ChartTooltip } from '../../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';\n\nconst FLAME_TOOLTIP_PREFIX = ''; //We don't want X-value labels from XYChart default tooltip\n\ninterface FlameTooltipProps {\n  label: string;\n  subheader?: string;\n  color: string;\n  valueLabel: string;\n  totalValue: string;\n  totalRelativeValue?: string;\n  selfValue?: string;\n  selfRelativeValue?: string;\n  actions?: () => SeriesActionsTemplate;\n  /**\n   * Chart-scoped actions rendered inside the tooltip footer, independent of\n   * the hovered series row. The tooltip only renders the footer; it does not\n   * know what the actions do. Empty or `undefined` hides the footer.\n   */\n  globalActions?: ReactNode[];\n}\n\nexport function FlameTooltip({\n  label,\n  subheader,\n  color,\n  valueLabel,\n  totalValue,\n  totalRelativeValue,\n  selfValue,\n  selfRelativeValue,\n  actions,\n  globalActions,\n}: Readonly<FlameTooltipProps>): ReactNode {\n  const intl = useIntl();\n  const externalConfig = useExternalConfig();\n\n  const contextValue = useMemo(\n    () => ({\n      ...externalConfig,\n      symbolPosition: 'left' as const,\n      displayHeaderDivider: true,\n    }),\n    [externalConfig],\n  );\n\n  return (\n    <ExternalConfigContext.Provider value={contextValue}>\n      <ChartTooltip.Header\n        header1={label}\n        label={FLAME_TOOLTIP_PREFIX}\n        subheader={subheader}\n      />\n      <ChartTooltip.SeriesHeader\n        seriesLabel={intl.formatMessage(FLAME_TOOLTIP_MESSAGES.values)}\n        valueLabel={valueLabel}\n      />\n      <ChartTooltip.SeriesItem\n        color={color}\n        name={intl.formatMessage(FLAME_TOOLTIP_MESSAGES.total)}\n        value={totalValue}\n        relativeValue={totalRelativeValue}\n        actions={actions}\n      />\n      {selfValue !== undefined && (\n        <ChartTooltip.SeriesItem\n          color={color}\n          name={intl.formatMessage(FLAME_TOOLTIP_MESSAGES.self)}\n          value={selfValue}\n          relativeValue={selfRelativeValue}\n          actions={actions}\n        />\n      )}\n      {globalActions !== undefined && globalActions.length > 0 && (\n        <ChartTooltip.Footer\n          actions={globalActions}\n          unpinnedPlaceholderText={undefined}\n        />\n      )}\n    </ExternalConfigContext.Provider>\n  );\n}\n"],
+  "mappings": "AAwDI,SACE,KADF;AAxDJ,SAAyB,eAAe;AACxC,SAAS,eAAe;AAExB,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAG7B,MAAM,uBAAuB;AAoBtB,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA2C;AACzC,QAAM,OAAO,QAAQ;AACrB,QAAM,iBAAiB,kBAAkB;AAEzC,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL,GAAG;AAAA,MACH,gBAAgB;AAAA,MAChB,sBAAsB;AAAA,IACxB;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE,qBAAC,sBAAsB,UAAtB,EAA+B,OAAO,cACrC;AAAA;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,SAAS;AAAA,QACT,OAAO;AAAA,QACP;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,aAAa,KAAK,cAAc,uBAAuB,MAAM;AAAA,QAC7D;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC;AAAA,QACA,MAAM,KAAK,cAAc,uBAAuB,KAAK;AAAA,QACrD,OAAO;AAAA,QACP,eAAe;AAAA,QACf;AAAA;AAAA,IACF;AAAA,IACC,cAAc,UACb;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC;AAAA,QACA,MAAM,KAAK,cAAc,uBAAuB,IAAI;AAAA,QACpD,OAAO;AAAA,QACP,eAAe;AAAA,QACf;AAAA;AAAA,IACF;AAAA,IAED,kBAAkB,UAAa,cAAc,SAAS,KACrD;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,SAAS;AAAA,QACT,yBAAyB;AAAA;AAAA,IAC3B;AAAA,KAEJ;AAEJ;",
   "names": []
 }

package/esm/charts/flame/shared/components/tooltip/IsolateSegmentAction.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { useIntl } from "react-intl";
+import { ViewIcon } from "@dynatrace/strato-icons";
+import { FLAME_TOOLTIP_MESSAGES } from "./messages.js";
+import { ChartTooltip } from "../../../../core/components/overlay-tooltip/OverlayTooltip.js";
+function IsolateSegmentAction({
+  onSelect,
+  disabled
+}) {
+  const intl = useIntl();
+  return /* @__PURE__ */ jsx(
+    ChartTooltip.Action,
+    {
+      label: intl.formatMessage(FLAME_TOOLTIP_MESSAGES.isolateSegment),
+      icon: /* @__PURE__ */ jsx(ViewIcon, {}),
+      onSelect,
+      disabled
+    }
+  );
+}
+export {
+  IsolateSegmentAction
+};
+//# sourceMappingURL=IsolateSegmentAction.js.map

package/esm/charts/flame/shared/components/tooltip/IsolateSegmentAction.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/flame/shared/components/tooltip/IsolateSegmentAction.tsx"],
+  "sourcesContent": ["import { type ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ViewIcon } from '@dynatrace/strato-icons';\n\nimport { FLAME_TOOLTIP_MESSAGES } from './messages.js';\nimport { ChartTooltip } from '../../../../core/components/overlay-tooltip/OverlayTooltip.js';\n\ninterface IsolateSegmentActionProps {\n  onSelect: () => void;\n  /**\n   * When `true`, the action is shown but visually disabled. Used when the\n   * hovered span is already the current isolation root.\n   */\n  disabled?: boolean;\n}\n\n/**\n * Footer action for the flame tooltip that isolates the hovered span. Extracted\n * so `FlameChart` and `FlameGraph` can plug the same \"isolate\" affordance into\n * their `globalActions` callback without duplicating the icon or intl string.\n * @internal\n */\nexport function IsolateSegmentAction({\n  onSelect,\n  disabled,\n}: Readonly<IsolateSegmentActionProps>): ReactNode {\n  const intl = useIntl();\n  return (\n    <ChartTooltip.Action\n      label={intl.formatMessage(FLAME_TOOLTIP_MESSAGES.isolateSegment)}\n      icon={<ViewIcon />}\n      onSelect={onSelect}\n      disabled={disabled}\n    />\n  );\n}\n"],
+  "mappings": "AA+BY;AA9BZ,SAAS,eAAe;AAExB,SAAS,gBAAgB;AAEzB,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAiBtB,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AACF,GAAmD;AACjD,QAAM,OAAO,QAAQ;AACrB,SACE;AAAA,IAAC,aAAa;AAAA,IAAb;AAAA,MACC,OAAO,KAAK,cAAc,uBAAuB,cAAc;AAAA,MAC/D,MAAM,oBAAC,YAAS;AAAA,MAChB;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}