@parca/profile 0.19.140 → 0.19.142

package/dist/ProfileMetricsGraph/index.js

@@ -1,4 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { c as _c } from "react-compiler-runtime";
 // Copyright 2022 The Parca Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -11,283 +23,532 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
+
 import { useEffect, useMemo, useState } from 'react';
 import { Icon } from '@iconify/react';
 import { AnimatePresence, motion } from 'framer-motion';
-import { useQueryState } from 'nuqs';
-import { MetricsGraphSkeleton, TextWithTooltip, useParcaContext, } from '@parca/components';
+import { MetricsGraphSkeleton, NumberParser, NumberSerializer, TextWithTooltip, useParcaContext, useURLStateCustom } from '@parca/components';
 import { Query } from '@parca/parser';
 import { TEST_IDS, testId } from '@parca/test-utils';
 import { capitalizeOnlyFirstLetter, formatDate, timePattern, valueFormatter } from '@parca/utilities';
 import { MergedProfileSelection } from '..';
 import MetricsGraph from '../MetricsGraph';
 import { useMetricsGraphDimensions } from '../MetricsGraph/useMetricsGraphDimensions';
-import { intParam } from '../hooks/urlParsers';
 import { getStepCountFromScreenWidth, useQueryRange } from './hooks/useQueryRange';
-const createProfileContextMenuItems = (addLabelMatcher, data // The original MetricsSeriesPb[] data
-) => {
-    return [
-        {
-            id: 'focus-on-single-series',
-            label: 'Focus only on this series',
-            icon: 'ph:star',
-            onClick: (closestPoint, _series) => {
-                if (closestPoint != null && data.length > 0 && data[closestPoint.seriesIndex] != null) {
-                    const originalSeriesData = data[closestPoint.seriesIndex];
-                    if (originalSeriesData.labelset?.labels != null) {
-                        const labels = originalSeriesData.labelset.labels.filter((label) => label.name !== '__name__');
-                        const labelsToAdd = labels.map((label) => ({
-                            key: label.name,
-                            value: label.value,
-                        }));
-                        addLabelMatcher(labelsToAdd);
-                    }
-                }
-            },
-        },
-        {
-            id: 'add-to-query',
-            label: 'Add to query',
-            icon: 'material-symbols:add',
-            createDynamicItems: (closestPoint, _series) => {
-                const noLabelsAvailable = [
-                    {
-                        id: 'no-labels-available',
-                        label: 'No labels available',
-                        icon: 'ph:warning',
-                        disabled: () => true,
-                        onClick: () => { }, // No-op for disabled item
-                    },
-                ];
-                if (closestPoint == null || data.length === 0 || data[closestPoint.seriesIndex] == null) {
-                    return noLabelsAvailable;
-                }
-                const originalSeriesData = data[closestPoint.seriesIndex];
-                if (originalSeriesData.labelset?.labels == null) {
-                    return noLabelsAvailable;
-                }
-                const labels = originalSeriesData.labelset.labels.filter((label) => label.name !== '__name__');
-                if (labels.length === 0) {
-                    return noLabelsAvailable;
-                }
-                return labels.map((label) => ({
-                    id: `add-label-${label.name}`,
-                    label: (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-300", children: `${label.name}="${label.value}"` })),
-                    onClick: () => {
-                        addLabelMatcher({
-                            key: label.name,
-                            value: label.value,
-                        });
-                    },
-                }));
-            },
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var createProfileContextMenuItems = function createProfileContextMenuItems(addLabelMatcher, data) {
+  return [{
+    id: 'focus-on-single-series',
+    label: 'Focus only on this series',
+    icon: 'ph:star',
+    onClick: function onClick(closestPoint, _series) {
+      if (closestPoint != null && data.length > 0 && data[closestPoint.seriesIndex] != null) {
+        var _originalSeriesData$l;
+        var originalSeriesData = data[closestPoint.seriesIndex];
+        if (((_originalSeriesData$l = originalSeriesData.labelset) === null || _originalSeriesData$l === void 0 ? void 0 : _originalSeriesData$l.labels) != null) {
+          var labels = originalSeriesData.labelset.labels.filter(function (label) {
+            return label.name !== '__name__';
+          });
+          var labelsToAdd = labels.map(function (label) {
+            return {
+              key: label.name,
+              value: label.value
+            };
+          });
+          addLabelMatcher(labelsToAdd);
+        }
+      }
+    }
+  }, {
+    id: 'add-to-query',
+    label: 'Add to query',
+    icon: 'material-symbols:add',
+    createDynamicItems: function createDynamicItems(closestPoint, _series) {
+      var _originalSeriesData$l2;
+      var noLabelsAvailable = [{
+        id: 'no-labels-available',
+        label: 'No labels available',
+        icon: 'ph:warning',
+        disabled: function disabled() {
+          return true;
         },
-    ];
-};
-const transformMetricsData = (data) => {
-    const series = data.reduce((agg, s) => {
-        if (s.labelset !== undefined) {
-            // Generate ID from sorted labelsets
-            const labels = s.labelset.labels ?? [];
-            const sortedLabels = labels
-                .filter(label => label.name !== '__name__') // Exclude __name__ from ID generation
-                .sort((a, b) => a.name.localeCompare(b.name));
-            const id = sortedLabels.map(label => `${label.name}=${label.value}`).join(',');
-            agg.push({
-                id: id !== '' ? id : 'default', // fallback to 'default' if no labels
-                values: s.samples.reduce((agg, d) => {
-                    if (d.timestamp !== undefined && d.valuePerSecond !== undefined) {
-                        const timestampMs = Number(d.timestamp.seconds) * 1000 + d.timestamp.nanos / 1000000;
-                        agg.push([timestampMs, d.valuePerSecond]);
-                    }
-                    return agg;
-                }, []),
+        onClick: function onClick() {} // No-op for disabled item
+      }];
+      if (closestPoint == null || data.length === 0 || data[closestPoint.seriesIndex] == null) {
+        return noLabelsAvailable;
+      }
+      var originalSeriesData = data[closestPoint.seriesIndex];
+      if (((_originalSeriesData$l2 = originalSeriesData.labelset) === null || _originalSeriesData$l2 === void 0 ? void 0 : _originalSeriesData$l2.labels) == null) {
+        return noLabelsAvailable;
+      }
+      var labels = originalSeriesData.labelset.labels.filter(function (label) {
+        return label.name !== '__name__';
+      });
+      if (labels.length === 0) {
+        return noLabelsAvailable;
+      }
+      return labels.map(function (label) {
+        return {
+          id: "add-label-".concat(label.name),
+          label: /*#__PURE__*/_jsx("div", {
+            className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-300",
+            children: "".concat(label.name, "=\"").concat(label.value, "\"")
+          }),
+          onClick: function onClick() {
+            addLabelMatcher({
+              key: label.name,
+              value: label.value
             });
-        }
-        return agg;
-    }, []);
-    return series;
+          }
+        };
+      });
+    }
+  }];
+};
+var transformMetricsData = function transformMetricsData(data) {
+  var series = data.reduce(function (agg, s) {
+    if (s.labelset !== undefined) {
+      var _s$labelset$labels;
+      // Generate ID from sorted labelsets
+      var labels = (_s$labelset$labels = s.labelset.labels) !== null && _s$labelset$labels !== void 0 ? _s$labelset$labels : [];
+      var sortedLabels = labels.filter(function (label) {
+        return label.name !== '__name__';
+      }) // Exclude __name__ from ID generation
+      .sort(function (a, b) {
+        return a.name.localeCompare(b.name);
+      });
+      var id = sortedLabels.map(function (label) {
+        return "".concat(label.name, "=").concat(label.value);
+      }).join(',');
+      agg.push({
+        id: id !== '' ? id : 'default',
+        // fallback to 'default' if no labels
+        values: s.samples.reduce(function (agg, d) {
+          if (d.timestamp !== undefined && d.valuePerSecond !== undefined) {
+            var timestampMs = Number(d.timestamp.seconds) * 1000 + d.timestamp.nanos / 1000000;
+            agg.push([timestampMs, d.valuePerSecond]);
+          }
+          return agg;
+        }, [])
+      });
+    }
+    return agg;
+  }, []);
+  return series;
 };
-const ErrorContent = ({ errorMessage }) => {
-    return (_jsx("div", { className: "relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700", role: "alert", children: _jsx("span", { className: "block sm:inline", children: errorMessage }) }));
+var ErrorContent = function ErrorContent(t0) {
+  var $ = _c(2);
+  var errorMessage = t0.errorMessage;
+  var t1;
+  if ($[0] !== errorMessage) {
+    t1 = /*#__PURE__*/_jsx("div", {
+      className: "relative rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700",
+      role: "alert",
+      children: /*#__PURE__*/_jsx("span", {
+        className: "block sm:inline",
+        children: errorMessage
+      })
+    });
+    $[0] = errorMessage;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
 };
-export const ProfileMetricsEmptyState = ({ message }) => {
-    return (_jsx("div", { className: "flex h-full w-full flex-col items-center justify-center", children: _jsx("p", { children: message }) }));
+export var ProfileMetricsEmptyState = function ProfileMetricsEmptyState(t0) {
+  var $ = _c(2);
+  var message = t0.message;
+  var t1;
+  if ($[0] !== message) {
+    t1 = /*#__PURE__*/_jsx("div", {
+      className: "flex h-full w-full flex-col items-center justify-center",
+      children: /*#__PURE__*/_jsx("p", {
+        children: message
+      })
+    });
+    $[0] = message;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
 };
-const ProfileMetricsGraph = ({ queryClient, queryExpression, profile, from, to, setTimeRange, addLabelMatcher, onPointClick, comparing = false, sumBy, }) => {
-    const [rawStepCount] = useQueryState('step_count', intParam.withDefault(getStepCountFromScreenWidth(10)));
-    // Clamp step count so the step duration is at least 1 second as we don't have this enforced server-side anymore.
-    const stepCount = useMemo(() => {
-        const maxForOneSecond = Math.floor((to - from) / 1000);
-        return Math.min(rawStepCount, maxForOneSecond);
-    }, [rawStepCount, from, to]);
-    const { isLoading: metricsGraphLoading, response, error, } = useQueryRange(queryClient, queryExpression, from, to, sumBy, stepCount, queryExpression === '');
-    const { onError, perf, authenticationErrorMessage, isDarkMode, timezone, profileExplorer } = useParcaContext();
-    const { width, height, margin, heightStyle } = useMetricsGraphDimensions(comparing, profileExplorer?.metricsGraph.height);
-    const [showAllSeriesForResponse, setShowAllSeriesForResponse] = useState(null);
-    useEffect(() => {
-        if (error !== null) {
-            onError?.(error);
+var ProfileMetricsGraph = function ProfileMetricsGraph(_ref) {
+  var queryClient = _ref.queryClient,
+    queryExpression = _ref.queryExpression,
+    profile = _ref.profile,
+    from = _ref.from,
+    to = _ref.to,
+    setTimeRange = _ref.setTimeRange,
+    addLabelMatcher = _ref.addLabelMatcher,
+    onPointClick = _ref.onPointClick,
+    _ref$comparing = _ref.comparing,
+    comparing = _ref$comparing === void 0 ? false : _ref$comparing,
+    sumBy = _ref.sumBy;
+  var _useURLStateCustom = useURLStateCustom('step_count', {
+      defaultValue: String(getStepCountFromScreenWidth(10)),
+      parse: NumberParser,
+      stringify: NumberSerializer
+    }),
+    _useURLStateCustom2 = _slicedToArray(_useURLStateCustom, 1),
+    rawStepCount = _useURLStateCustom2[0];
+  // Clamp step count so the step duration is at least 1 second as we don't have this enforced server-side anymore.
+  var stepCount = useMemo(function () {
+    var maxForOneSecond = Math.floor((to - from) / 1000);
+    return Math.min(rawStepCount, maxForOneSecond);
+  }, [rawStepCount, from, to]);
+  var _useQueryRange = useQueryRange(queryClient, queryExpression, from, to, sumBy, stepCount, queryExpression === ''),
+    metricsGraphLoading = _useQueryRange.isLoading,
+    response = _useQueryRange.response,
+    error = _useQueryRange.error;
+  var _useParcaContext = useParcaContext(),
+    onError = _useParcaContext.onError,
+    perf = _useParcaContext.perf,
+    authenticationErrorMessage = _useParcaContext.authenticationErrorMessage,
+    isDarkMode = _useParcaContext.isDarkMode,
+    timezone = _useParcaContext.timezone,
+    profileExplorer = _useParcaContext.profileExplorer;
+  var _useMetricsGraphDimen = useMetricsGraphDimensions(comparing, profileExplorer === null || profileExplorer === void 0 ? void 0 : profileExplorer.metricsGraph.height),
+    width = _useMetricsGraphDimen.width,
+    height = _useMetricsGraphDimen.height,
+    margin = _useMetricsGraphDimen.margin,
+    heightStyle = _useMetricsGraphDimen.heightStyle;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    showAllSeriesForResponse = _useState2[0],
+    setShowAllSeriesForResponse = _useState2[1];
+  useEffect(function () {
+    if (error !== null) {
+      onError === null || onError === void 0 || onError(error);
+    }
+  }, [error, onError]);
+
+  // Reset showAllSeriesForResponse when response changes to free memory
+  useEffect(function () {
+    setShowAllSeriesForResponse(null);
+  }, [response]);
+  useEffect(function () {
+    if (response === null) {
+      return;
+    }
+    perf === null || perf === void 0 || perf.markInteraction('Metrics graph render', response.series[0].samples.length);
+  }, [perf, response]);
+  var _useMemo = useMemo(function () {
+      if ((response === null || response === void 0 ? void 0 : response.series) != null) {
+        // Check if user wants ALL series for THIS specific response
+        var userWantsAllForThisResponse = showAllSeriesForResponse === response;
+        var maxSeriesLimit = 100;
+
+        // Limit the number of series to maxSeriesLimit to avoid performance issues (unless user opts to show all)
+        if (response.series.length > maxSeriesLimit && !userWantsAllForThisResponse) {
+          // Select top `maxSeriesLimit` series based on their max value (to catch series with large spikes)
+          var seriesWithMaxValue = response.series.map(function (series) {
+            var maxValue = series.samples.reduce(function (max, sample) {
+              var _sample$valuePerSecon;
+              var value = (_sample$valuePerSecon = sample.valuePerSecond) !== null && _sample$valuePerSecon !== void 0 ? _sample$valuePerSecon : 0;
+              return value > max ? value : max;
+            }, 0);
+            return {
+              series: series,
+              maxValue: maxValue
+            };
+          });
+
+          // Sort by max value descending and take top `maxSeriesLimit` series
+          var topSeries = seriesWithMaxValue.sort(function (a, b) {
+            return b.maxValue - a.maxValue;
+          }).slice(0, maxSeriesLimit).map(function (item) {
+            return item.series;
+          });
+          return [topSeries, {
+            isTrimmed: true,
+            beforeTrim: response.series.length,
+            afterTrim: maxSeriesLimit
+          }];
         }
-    }, [error, onError]);
-    // Reset showAllSeriesForResponse when response changes to free memory
-    useEffect(() => {
-        setShowAllSeriesForResponse(null);
-    }, [response]);
-    useEffect(() => {
-        if (response === null) {
-            return;
+        return [response.series, {
+          isTrimmed: false,
+          beforeTrim: 0,
+          afterTrim: 0
+        }];
+      }
+      return [null, {
+        isTrimmed: false,
+        beforeTrim: 0,
+        afterTrim: 0
+      }];
+    }, [response, showAllSeriesForResponse]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    originalSeries = _useMemo2[0],
+    _useMemo2$ = _useMemo2[1],
+    isTrimmed = _useMemo2$.isTrimmed,
+    beforeTrim = _useMemo2$.beforeTrim,
+    afterTrim = _useMemo2$.afterTrim;
+  var selectedPoint = useMemo(function () {
+    if (profile !== null && profile instanceof MergedProfileSelection) {
+      // Iterate over the series and find the series index that matches all
+      // labels of the profile selection. We specifically need the index
+      // because that's what the SeriesPoint interface expects.
+      var seriesIndex = originalSeries === null || originalSeries === void 0 ? void 0 : originalSeries.findIndex(function (s) {
+        var _s$labelset;
+        return (_s$labelset = s.labelset) === null || _s$labelset === void 0 || (_s$labelset = _s$labelset.labels) === null || _s$labelset === void 0 ? void 0 : _s$labelset.every(function (label) {
+          return profile.query.matchers.some(function (matcher) {
+            return matcher.key === label.name && matcher.value === label.value;
+          });
+        });
+      });
+
+      // if we found a series, return the point that matches the from/to timestamp exactly (in millisecond precision)
+      if (seriesIndex !== undefined && seriesIndex !== -1 && originalSeries != null && originalSeries[seriesIndex] != null) {
+        var series_0 = originalSeries[seriesIndex];
+        var pointIndex = series_0.samples.findIndex(function (sample_0) {
+          var _sample_0$timestamp, _sample_0$timestamp2;
+          return ((_sample_0$timestamp = sample_0.timestamp) === null || _sample_0$timestamp === void 0 ? void 0 : _sample_0$timestamp.seconds) === BigInt(profile.mergeFrom / 1000000000n) && ((_sample_0$timestamp2 = sample_0.timestamp) === null || _sample_0$timestamp2 === void 0 ? void 0 : _sample_0$timestamp2.nanos) === Number(profile.mergeFrom % 1000000000n);
+        });
+        if (pointIndex !== -1) {
+          return {
+            seriesIndex: seriesIndex,
+            pointIndex: pointIndex
+          };
         }
-        perf?.markInteraction('Metrics graph render', response.series[0].samples.length);
-    }, [perf, response]);
-    const [originalSeries, { isTrimmed, beforeTrim, afterTrim }] = useMemo(() => {
-        if (response?.series != null) {
-            // Check if user wants ALL series for THIS specific response
-            const userWantsAllForThisResponse = showAllSeriesForResponse === response;
-            const maxSeriesLimit = 100;
-            // Limit the number of series to maxSeriesLimit to avoid performance issues (unless user opts to show all)
-            if (response.series.length > maxSeriesLimit && !userWantsAllForThisResponse) {
-                // Select top `maxSeriesLimit` series based on their max value (to catch series with large spikes)
-                const seriesWithMaxValue = response.series.map(series => {
-                    const maxValue = series.samples.reduce((max, sample) => {
-                        const value = sample.valuePerSecond ?? 0;
-                        return value > max ? value : max;
-                    }, 0);
-                    return { series, maxValue };
-                });
-                // Sort by max value descending and take top `maxSeriesLimit` series
-                const topSeries = seriesWithMaxValue
-                    .sort((a, b) => b.maxValue - a.maxValue)
-                    .slice(0, maxSeriesLimit)
-                    .map(item => item.series);
-                return [
-                    topSeries,
-                    { isTrimmed: true, beforeTrim: response.series.length, afterTrim: maxSeriesLimit },
-                ];
-            }
-            return [response.series, { isTrimmed: false, beforeTrim: 0, afterTrim: 0 }];
-        }
-        return [null, { isTrimmed: false, beforeTrim: 0, afterTrim: 0 }];
-    }, [response, showAllSeriesForResponse]);
-    const selectedPoint = useMemo(() => {
-        if (profile !== null && profile instanceof MergedProfileSelection) {
-            // Iterate over the series and find the series index that matches all
-            // labels of the profile selection. We specifically need the index
-            // because that's what the SeriesPoint interface expects.
-            const seriesIndex = originalSeries?.findIndex(s => {
-                return s.labelset?.labels?.every(label => {
-                    return profile.query.matchers.some(matcher => {
-                        return matcher.key === label.name && matcher.value === label.value;
-                    });
-                });
-            });
-            // if we found a series, return the point that matches the from/to timestamp exactly (in millisecond precision)
-            if (seriesIndex !== undefined &&
-                seriesIndex !== -1 &&
-                originalSeries != null &&
-                originalSeries[seriesIndex] != null) {
-                const series = originalSeries[seriesIndex];
-                const pointIndex = series.samples.findIndex(sample => {
-                    return (sample.timestamp?.seconds === BigInt(profile.mergeFrom / 1000000000n) &&
-                        sample.timestamp?.nanos === Number(profile.mergeFrom % 1000000000n));
-                });
-                if (pointIndex !== -1) {
-                    return {
-                        seriesIndex,
-                        pointIndex,
-                    };
-                }
-            }
-            return null;
+      }
+      return null;
+    }
+    return null;
+  }, [profile, originalSeries]);
+  var transformedSeries = useMemo(function () {
+    return originalSeries != null ? transformMetricsData(originalSeries) : [];
+  }, [originalSeries]);
+  var contextMenuItems = useMemo(function () {
+    return originalSeries != null ? createProfileContextMenuItems(addLabelMatcher, originalSeries) : [];
+  }, [originalSeries, addLabelMatcher]);
+  var dataAvailable = originalSeries !== null && originalSeries !== undefined && (originalSeries === null || originalSeries === void 0 ? void 0 : originalSeries.length) > 0;
+  var _useMemo3 = useMemo(function () {
+      var sampleUnit = '';
+      var sampleType = '';
+      if (dataAvailable) {
+        if (originalSeries !== null && originalSeries !== void 0 && originalSeries.every(function (val, i, arr) {
+          var _val$sampleType, _arr$;
+          return (val === null || val === void 0 || (_val$sampleType = val.sampleType) === null || _val$sampleType === void 0 ? void 0 : _val$sampleType.unit) === ((_arr$ = arr[0]) === null || _arr$ === void 0 || (_arr$ = _arr$.sampleType) === null || _arr$ === void 0 ? void 0 : _arr$.unit);
+        })) {
+          var _originalSeries$0$sam, _originalSeries$, _originalSeries$0$sam2, _originalSeries$2;
+          sampleUnit = (_originalSeries$0$sam = (_originalSeries$ = originalSeries[0]) === null || _originalSeries$ === void 0 || (_originalSeries$ = _originalSeries$.sampleType) === null || _originalSeries$ === void 0 ? void 0 : _originalSeries$.unit) !== null && _originalSeries$0$sam !== void 0 ? _originalSeries$0$sam : '';
+          sampleType = (_originalSeries$0$sam2 = (_originalSeries$2 = originalSeries[0]) === null || _originalSeries$2 === void 0 || (_originalSeries$2 = _originalSeries$2.sampleType) === null || _originalSeries$2 === void 0 ? void 0 : _originalSeries$2.type) !== null && _originalSeries$0$sam2 !== void 0 ? _originalSeries$0$sam2 : '';
         }
-        return null;
-    }, [profile, originalSeries]);
-    const transformedSeries = useMemo(() => {
-        return originalSeries != null ? transformMetricsData(originalSeries) : [];
-    }, [originalSeries]);
-    const contextMenuItems = useMemo(() => {
-        return originalSeries != null
-            ? createProfileContextMenuItems(addLabelMatcher, originalSeries)
-            : [];
-    }, [originalSeries, addLabelMatcher]);
-    const dataAvailable = originalSeries !== null && originalSeries !== undefined && originalSeries?.length > 0;
-    const { sampleUnit, sampleType, yAxisLabel, yAxisUnit } = useMemo(() => {
-        let sampleUnit = '';
-        let sampleType = '';
-        if (dataAvailable) {
-            if (originalSeries?.every((val, i, arr) => val?.sampleType?.unit === arr[0]?.sampleType?.unit)) {
-                sampleUnit = originalSeries[0]?.sampleType?.unit ?? '';
-                sampleType = originalSeries[0]?.sampleType?.type ?? '';
-            }
-            if (sampleUnit === '') {
-                const profileType = Query.parse(queryExpression).profileType();
-                sampleUnit = profileType.sampleUnit;
-                sampleType = profileType.sampleType;
-            }
+        if (sampleUnit === '') {
+          var profileType = Query.parse(queryExpression).profileType();
+          sampleUnit = profileType.sampleUnit;
+          sampleType = profileType.sampleType;
         }
-        // Calculate axis labels based on profile data
-        const isDeltaType = profile !== null ? profile?.query.profType.delta : false;
-        let yAxisLabel = sampleUnit;
-        let yAxisUnit = sampleUnit;
-        if (isDeltaType) {
-            if (sampleUnit === 'nanoseconds') {
-                if (sampleType === 'cpu') {
-                    yAxisLabel = 'CPU Cores';
-                    yAxisUnit = '';
-                }
-                if (sampleType === 'cuda') {
-                    yAxisLabel = 'GPU Time';
-                }
-            }
-            if (sampleUnit === 'bytes') {
-                yAxisLabel = 'Bytes per Second';
-            }
+      }
+
+      // Calculate axis labels based on profile data
+      var isDeltaType = profile !== null ? profile === null || profile === void 0 ? void 0 : profile.query.profType.delta : false;
+      var yAxisLabel = sampleUnit;
+      var yAxisUnit = sampleUnit;
+      if (isDeltaType) {
+        if (sampleUnit === 'nanoseconds') {
+          if (sampleType === 'cpu') {
+            yAxisLabel = 'CPU Cores';
+            yAxisUnit = '';
+          }
+          if (sampleType === 'cuda') {
+            yAxisLabel = 'GPU Time';
+          }
         }
-        return { sampleUnit, sampleType, yAxisLabel, yAxisUnit };
-    }, [dataAvailable, originalSeries, queryExpression, profile]);
-    const loading = metricsGraphLoading;
-    // Handle errors after all hooks have been called
-    if (!metricsGraphLoading && error !== null) {
-        if (authenticationErrorMessage !== undefined && error.code === 'UNAUTHENTICATED') {
-            return _jsx(ErrorContent, { errorMessage: authenticationErrorMessage });
+        if (sampleUnit === 'bytes') {
+          yAxisLabel = 'Bytes per Second';
         }
-        return _jsx(ErrorContent, { errorMessage: capitalizeOnlyFirstLetter(error.message) });
+      }
+      return {
+        sampleUnit: sampleUnit,
+        sampleType: sampleType,
+        yAxisLabel: yAxisLabel,
+        yAxisUnit: yAxisUnit
+      };
+    }, [dataAvailable, originalSeries, queryExpression, profile]),
+    sampleUnit_0 = _useMemo3.sampleUnit,
+    sampleType_0 = _useMemo3.sampleType,
+    yAxisLabel_0 = _useMemo3.yAxisLabel,
+    yAxisUnit_0 = _useMemo3.yAxisUnit;
+  var loading = metricsGraphLoading;
+
+  // Handle errors after all hooks have been called
+  if (!metricsGraphLoading && error !== null) {
+    if (authenticationErrorMessage !== undefined && error.code === 'UNAUTHENTICATED') {
+      return /*#__PURE__*/_jsx(ErrorContent, {
+        errorMessage: authenticationErrorMessage
+      });
     }
-    return (_jsx(AnimatePresence, { children: _jsxs(motion.div, { className: "h-full w-full relative", initial: { display: 'none', opacity: 0 }, animate: { display: 'block', opacity: 1 }, transition: { duration: 0.5 }, children: [isTrimmed ? (_jsxs("div", { className: "flex justify-center items-center gap-2", ...testId(TEST_IDS.METRICS_GRAPH_TRIMMED_BANNER), children: [_jsxs("span", { className: "text-sm text-amber-800 dark:text-amber-200 bg-amber-100 dark:bg-amber-900 text-center px-2 rounded", children: ["Note: Showing only ", afterTrim, " of ", new Intl.NumberFormat().format(beforeTrim), " series for performance reasons. Please narrow your query to view more."] }), _jsxs("button", { onClick: () => setShowAllSeriesForResponse(response), className: "text-sm px-1 bg-amber-600 hover:bg-amber-700 dark:bg-amber-700 dark:hover:bg-amber-600 text-white rounded font-medium transition-colors", ...testId(TEST_IDS.METRICS_GRAPH_SHOW_ALL_BUTTON), children: ["Show all ", new Intl.NumberFormat().format(beforeTrim)] })] })) : null, loading ? (_jsx(MetricsGraphSkeleton, { heightStyle: heightStyle, isDarkMode: isDarkMode })) : dataAvailable ? (_jsx(MetricsGraph, { data: transformedSeries, from: from, to: to, setTimeRange: setTimeRange, selectedPoint: selectedPoint, onSampleClick: (closestPoint) => {
-                        // Use original data for both series and point
-                        if (originalSeries?.[closestPoint.seriesIndex] != null) {
-                            const originalSeriesData = originalSeries[closestPoint.seriesIndex];
-                            const originalPoint = originalSeriesData.samples[closestPoint.pointIndex];
-                            if (originalPoint.timestamp != null && originalPoint.valuePerSecond !== undefined) {
-                                const timestampNanos = originalPoint.timestamp.seconds * 1000000000n +
-                                    BigInt(originalPoint.timestamp.nanos);
-                                onPointClick(timestampNanos, // Convert to number to match interface
-                                originalSeriesData.labelset?.labels ?? [], queryExpression, Number(originalPoint.duration ?? 0) // Convert bigint to number
-                                );
-                            }
-                        }
-                    }, renderTooltipContent: (seriesIndex, pointIndex) => {
-                        if (originalSeries?.[seriesIndex]?.samples?.[pointIndex] != null) {
-                            const originalSeriesData = originalSeries[seriesIndex];
-                            const originalPoint = originalSeriesData.samples[pointIndex];
-                            if (originalPoint.timestamp != null && originalPoint.valuePerSecond !== undefined) {
-                                const timestampMs = Number(originalPoint.timestamp.seconds) * 1000 +
-                                    originalPoint.timestamp.nanos / 1000000;
-                                const labels = originalSeriesData.labelset?.labels ?? [];
-                                const nameLabel = labels.find(e => e.name === '__name__');
-                                const highlightedNameLabel = nameLabel ?? { name: '', value: '' };
-                                const isDeltaType = profile !== null
-                                    ? profile?.query.profType.delta
-                                    : false;
-                                return (_jsx("div", { className: "flex flex-row", children: _jsxs("div", { className: "ml-2 mr-6", children: [_jsx("span", { className: "font-semibold", children: highlightedNameLabel.value }), _jsx("span", { className: "my-2 block text-gray-700 dark:text-gray-300", children: _jsx("table", { className: "table-auto", children: _jsxs("tbody", { children: [isDeltaType ? (_jsxs(_Fragment, { children: [_jsxs("tr", { children: [_jsx("td", { className: "w-1/4 pr-3", children: "Per\u00A0Second" }), _jsx("td", { className: "w-3/4", children: valueFormatter(originalPoint.valuePerSecond, sampleUnit === 'nanoseconds' && sampleType === 'cpu'
-                                                                                    ? 'CPU Cores'
-                                                                                    : sampleUnit, 5) })] }), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Total" }), _jsx("td", { className: "w-3/4", children: valueFormatter(originalPoint.value ?? 0, sampleUnit, 2) })] })] })) : (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Value" }), _jsx("td", { className: "w-3/4", children: valueFormatter(originalPoint.valuePerSecond, sampleUnit, 5) })] })), originalPoint.duration != null &&
-                                                                Number(originalPoint.duration) > 0 && (_jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "Duration" }), _jsx("td", { className: "w-3/4", children: valueFormatter(Number(originalPoint.duration.toString()), 'nanoseconds', 2) })] })), _jsxs("tr", { children: [_jsx("td", { className: "w-1/4", children: "At" }), _jsx("td", { className: "w-3/4", children: formatDate(new Date(timestampMs), timePattern(timezone), timezone) })] })] }) }) }), _jsx("span", { className: "my-2 block text-gray-500", children: labels
-                                                    .filter((label) => label.name !== '__name__')
-                                                    .map((label) => (_jsx("div", { className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400", ...testId(TEST_IDS.TOOLTIP_LABEL), children: _jsx(TextWithTooltip, { text: `${label.name}="${label.value}"`, maxTextLength: 37, id: `tooltip-${label.name}` }) }, label.name))) }), _jsxs("div", { className: "flex w-full items-center gap-1 text-xs text-gray-500", children: [_jsx(Icon, { icon: "iconoir:mouse-button-right" }), _jsx("div", { children: "Right click to add labels to query." })] })] }) }));
-                            }
-                        }
-                        return null;
-                    }, yAxisLabel: yAxisLabel, yAxisUnit: yAxisUnit, height: height, width: width, margin: margin, contextMenuItems: contextMenuItems })) : (_jsx(ProfileMetricsEmptyState, { message: "No data found. Try a different query." }))] }, "metrics-graph-loaded") }));
+    return /*#__PURE__*/_jsx(ErrorContent, {
+      errorMessage: capitalizeOnlyFirstLetter(error.message)
+    });
+  }
+  return /*#__PURE__*/_jsx(AnimatePresence, {
+    children: /*#__PURE__*/_jsxs(motion.div, {
+      className: "h-full w-full relative",
+      initial: {
+        display: 'none',
+        opacity: 0
+      },
+      animate: {
+        display: 'block',
+        opacity: 1
+      },
+      transition: {
+        duration: 0.5
+      },
+      children: [isTrimmed ? /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+        className: "flex justify-center items-center gap-2"
+      }, testId(TEST_IDS.METRICS_GRAPH_TRIMMED_BANNER)), {}, {
+        children: [/*#__PURE__*/_jsxs("span", {
+          className: "text-sm text-amber-800 dark:text-amber-200 bg-amber-100 dark:bg-amber-900 text-center px-2 rounded",
+          children: ["Note: Showing only ", afterTrim, " of ", new Intl.NumberFormat().format(beforeTrim), " series for performance reasons. Please narrow your query to view more."]
+        }), /*#__PURE__*/_jsxs("button", _objectSpread(_objectSpread({
+          onClick: function onClick() {
+            return setShowAllSeriesForResponse(response);
+          },
+          className: "text-sm px-1 bg-amber-600 hover:bg-amber-700 dark:bg-amber-700 dark:hover:bg-amber-600 text-white rounded font-medium transition-colors"
+        }, testId(TEST_IDS.METRICS_GRAPH_SHOW_ALL_BUTTON)), {}, {
+          children: ["Show all ", new Intl.NumberFormat().format(beforeTrim)]
+        }))]
+      })) : null, loading ? /*#__PURE__*/_jsx(MetricsGraphSkeleton, {
+        heightStyle: heightStyle,
+        isDarkMode: isDarkMode
+      }) : dataAvailable ? /*#__PURE__*/_jsx(MetricsGraph, {
+        data: transformedSeries,
+        from: from,
+        to: to,
+        setTimeRange: setTimeRange,
+        selectedPoint: selectedPoint,
+        onSampleClick: function onSampleClick(closestPoint) {
+          // Use original data for both series and point
+          if ((originalSeries === null || originalSeries === void 0 ? void 0 : originalSeries[closestPoint.seriesIndex]) != null) {
+            var originalSeriesData = originalSeries[closestPoint.seriesIndex];
+            var originalPoint = originalSeriesData.samples[closestPoint.pointIndex];
+            if (originalPoint.timestamp != null && originalPoint.valuePerSecond !== undefined) {
+              var _originalSeriesData$l3, _originalSeriesData$l4, _originalPoint$durati;
+              var timestampNanos = originalPoint.timestamp.seconds * 1000000000n + BigInt(originalPoint.timestamp.nanos);
+              onPointClick(timestampNanos, // Convert to number to match interface
+              (_originalSeriesData$l3 = (_originalSeriesData$l4 = originalSeriesData.labelset) === null || _originalSeriesData$l4 === void 0 ? void 0 : _originalSeriesData$l4.labels) !== null && _originalSeriesData$l3 !== void 0 ? _originalSeriesData$l3 : [], queryExpression, Number((_originalPoint$durati = originalPoint.duration) !== null && _originalPoint$durati !== void 0 ? _originalPoint$durati : 0) // Convert bigint to number
+              );
+            }
+          }
+        },
+        renderTooltipContent: function renderTooltipContent(seriesIndex_0, pointIndex_0) {
+          var _originalSeries$serie;
+          if ((originalSeries === null || originalSeries === void 0 || (_originalSeries$serie = originalSeries[seriesIndex_0]) === null || _originalSeries$serie === void 0 || (_originalSeries$serie = _originalSeries$serie.samples) === null || _originalSeries$serie === void 0 ? void 0 : _originalSeries$serie[pointIndex_0]) != null) {
+            var originalSeriesData_0 = originalSeries[seriesIndex_0];
+            var originalPoint_0 = originalSeriesData_0.samples[pointIndex_0];
+            if (originalPoint_0.timestamp != null && originalPoint_0.valuePerSecond !== undefined) {
+              var _originalSeriesData_, _originalSeriesData_2, _originalPoint_0$valu;
+              var timestampMs = Number(originalPoint_0.timestamp.seconds) * 1000 + originalPoint_0.timestamp.nanos / 1000000;
+              var labels = (_originalSeriesData_ = (_originalSeriesData_2 = originalSeriesData_0.labelset) === null || _originalSeriesData_2 === void 0 ? void 0 : _originalSeriesData_2.labels) !== null && _originalSeriesData_ !== void 0 ? _originalSeriesData_ : [];
+              var nameLabel = labels.find(function (e) {
+                return e.name === '__name__';
+              });
+              var highlightedNameLabel = nameLabel !== null && nameLabel !== void 0 ? nameLabel : {
+                name: '',
+                value: ''
+              };
+              var isDeltaType_0 = profile !== null ? profile === null || profile === void 0 ? void 0 : profile.query.profType.delta : false;
+              return /*#__PURE__*/_jsx("div", {
+                className: "flex flex-row",
+                children: /*#__PURE__*/_jsxs("div", {
+                  className: "ml-2 mr-6",
+                  children: [/*#__PURE__*/_jsx("span", {
+                    className: "font-semibold",
+                    children: highlightedNameLabel.value
+                  }), /*#__PURE__*/_jsx("span", {
+                    className: "my-2 block text-gray-700 dark:text-gray-300",
+                    children: /*#__PURE__*/_jsx("table", {
+                      className: "table-auto",
+                      children: /*#__PURE__*/_jsxs("tbody", {
+                        children: [isDeltaType_0 ? /*#__PURE__*/_jsxs(_Fragment, {
+                          children: [/*#__PURE__*/_jsxs("tr", {
+                            children: [/*#__PURE__*/_jsx("td", {
+                              className: "w-1/4 pr-3",
+                              children: "Per\xA0Second"
+                            }), /*#__PURE__*/_jsx("td", {
+                              className: "w-3/4",
+                              children: valueFormatter(originalPoint_0.valuePerSecond, sampleUnit_0 === 'nanoseconds' && sampleType_0 === 'cpu' ? 'CPU Cores' : sampleUnit_0, 5)
+                            })]
+                          }), /*#__PURE__*/_jsxs("tr", {
+                            children: [/*#__PURE__*/_jsx("td", {
+                              className: "w-1/4",
+                              children: "Total"
+                            }), /*#__PURE__*/_jsx("td", {
+                              className: "w-3/4",
+                              children: valueFormatter((_originalPoint_0$valu = originalPoint_0.value) !== null && _originalPoint_0$valu !== void 0 ? _originalPoint_0$valu : 0, sampleUnit_0, 2)
+                            })]
+                          })]
+                        }) : /*#__PURE__*/_jsxs("tr", {
+                          children: [/*#__PURE__*/_jsx("td", {
+                            className: "w-1/4",
+                            children: "Value"
+                          }), /*#__PURE__*/_jsx("td", {
+                            className: "w-3/4",
+                            children: valueFormatter(originalPoint_0.valuePerSecond, sampleUnit_0, 5)
+                          })]
+                        }), originalPoint_0.duration != null && Number(originalPoint_0.duration) > 0 && /*#__PURE__*/_jsxs("tr", {
+                          children: [/*#__PURE__*/_jsx("td", {
+                            className: "w-1/4",
+                            children: "Duration"
+                          }), /*#__PURE__*/_jsx("td", {
+                            className: "w-3/4",
+                            children: valueFormatter(Number(originalPoint_0.duration.toString()), 'nanoseconds', 2)
+                          })]
+                        }), /*#__PURE__*/_jsxs("tr", {
+                          children: [/*#__PURE__*/_jsx("td", {
+                            className: "w-1/4",
+                            children: "At"
+                          }), /*#__PURE__*/_jsx("td", {
+                            className: "w-3/4",
+                            children: formatDate(new Date(timestampMs), timePattern(timezone), timezone)
+                          })]
+                        })]
+                      })
+                    })
+                  }), /*#__PURE__*/_jsx("span", {
+                    className: "my-2 block text-gray-500",
+                    children: labels.filter(function (label_0) {
+                      return label_0.name !== '__name__';
+                    }).map(function (label_1) {
+                      return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+                        className: "mr-3 inline-block rounded-lg bg-gray-200 px-2 py-1 text-xs font-bold text-gray-700 dark:bg-gray-700 dark:text-gray-400"
+                      }, testId(TEST_IDS.TOOLTIP_LABEL)), {}, {
+                        children: /*#__PURE__*/_jsx(TextWithTooltip, {
+                          text: "".concat(label_1.name, "=\"").concat(label_1.value, "\""),
+                          maxTextLength: 37,
+                          id: "tooltip-".concat(label_1.name)
+                        })
+                      }), label_1.name);
+                    })
+                  }), /*#__PURE__*/_jsxs("div", {
+                    className: "flex w-full items-center gap-1 text-xs text-gray-500",
+                    children: [/*#__PURE__*/_jsx(Icon, {
+                      icon: "iconoir:mouse-button-right"
+                    }), /*#__PURE__*/_jsx("div", {
+                      children: "Right click to add labels to query."
+                    })]
+                  })]
+                })
+              });
+            }
+          }
+          return null;
+        },
+        yAxisLabel: yAxisLabel_0,
+        yAxisUnit: yAxisUnit_0,
+        height: height,
+        width: width,
+        margin: margin,
+        contextMenuItems: contextMenuItems
+      }) : /*#__PURE__*/_jsx(ProfileMetricsEmptyState, {
+        message: "No data found. Try a different query."
+      })]
+    }, "metrics-graph-loaded")
+  });
 };
-export default ProfileMetricsGraph;
+export default ProfileMetricsGraph;