@parca/profile 0.19.140 → 0.19.142

package/dist/ProfileFlameChart/SamplesStrips/labelSetUtils.js

@@ -1,3 +1,10 @@
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+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; }
 // 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.
@@ -10,70 +17,122 @@
 // 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.
+
 // Determine which label keys have all-numeric values across every label set.
-const getNumericKeys = (labelSets) => {
-    const numericKeys = new Set();
-    if (labelSets.length === 0)
-        return numericKeys;
-    const keyCandidates = new Set(labelSets[0].labels.map(l => l.name));
-    for (const key of keyCandidates) {
-        const allNumeric = labelSets.every(ls => {
-            const label = ls.labels.find(l => l.name === key);
-            return label != null && label.value !== '' && !isNaN(Number(label.value));
+var getNumericKeys = function getNumericKeys(labelSets) {
+  var numericKeys = new Set();
+  if (labelSets.length === 0) return numericKeys;
+  var keyCandidates = new Set(labelSets[0].labels.map(function (l) {
+    return l.name;
+  }));
+  var _iterator = _createForOfIteratorHelper(keyCandidates),
+    _step;
+  try {
+    var _loop = function _loop() {
+      var key = _step.value;
+      var allNumeric = labelSets.every(function (ls) {
+        var label = ls.labels.find(function (l) {
+          return l.name === key;
         });
-        if (allNumeric)
-            numericKeys.add(key);
+        return label != null && label.value !== '' && !isNaN(Number(label.value));
+      });
+      if (allNumeric) numericKeys.add(key);
+    };
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      _loop();
     }
-    return numericKeys;
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return numericKeys;
 };
+
 // Get key order: text keys first (sorted), then numeric keys (sorted).
-const getSortedKeys = (labelSets, numericKeys) => {
-    const allKeys = new Set();
-    for (const ls of labelSets) {
-        for (const l of ls.labels)
-            allKeys.add(l.name);
+var getSortedKeys = function getSortedKeys(labelSets, numericKeys) {
+  var allKeys = new Set();
+  var _iterator2 = _createForOfIteratorHelper(labelSets),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var ls = _step2.value;
+      var _iterator3 = _createForOfIteratorHelper(ls.labels),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var l = _step3.value;
+          allKeys.add(l.name);
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
     }
-    return [...allKeys]
-        .filter(k => !numericKeys.has(k))
-        .sort()
-        .concat([...numericKeys].sort());
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return _toConsumableArray(allKeys).filter(function (k) {
+    return !numericKeys.has(k);
+  }).sort().concat(_toConsumableArray(numericKeys).sort());
 };
+
 // Format a LabelSet as a string with keys ordered: text first, then numeric.
-export const labelSetToString = (labelSet, keyOrder) => {
-    if (labelSet === undefined)
-        return '{}';
-    const labels = keyOrder != null
-        ? keyOrder
-            .map(key => labelSet.labels.find(l => l.name === key))
-            .filter((l) => l != null)
-        : labelSet.labels;
-    if (labels.length === 0)
-        return '{}';
-    return '{' + labels.map(l => `${l.name}: ${l.value}`).join(', ') + '}';
+export var labelSetToString = function labelSetToString(labelSet, keyOrder) {
+  if (labelSet === undefined) return '{}';
+  var labels = keyOrder != null ? keyOrder.map(function (key) {
+    return labelSet.labels.find(function (l) {
+      return l.name === key;
+    });
+  }).filter(function (l) {
+    return l != null;
+  }) : labelSet.labels;
+  if (labels.length === 0) return '{}';
+  return '{' + labels.map(function (l) {
+    return "".concat(l.name, ": ").concat(l.value);
+  }).join(', ') + '}';
 };
+
 // Build a comparator for LabelSets: text keys first (for grouping), then numeric keys.
 // Also returns the key order so labelSetToString can use the same ordering.
-export const createLabelSetComparator = (labelSets) => {
-    const numericKeys = getNumericKeys(labelSets);
-    const keyOrder = getSortedKeys(labelSets, numericKeys);
-    const compare = (a, b) => {
-        const aMap = new Map(a.labels.map(l => [l.name, l.value]));
-        const bMap = new Map(b.labels.map(l => [l.name, l.value]));
-        for (const key of keyOrder) {
-            const aVal = aMap.get(key) ?? '';
-            const bVal = bMap.get(key) ?? '';
-            if (numericKeys.has(key)) {
-                const diff = Number(aVal) - Number(bVal);
-                if (diff !== 0)
-                    return diff;
-            }
-            else {
-                const cmp = aVal.localeCompare(bVal);
-                if (cmp !== 0)
-                    return cmp;
-            }
+export var createLabelSetComparator = function createLabelSetComparator(labelSets) {
+  var numericKeys = getNumericKeys(labelSets);
+  var keyOrder = getSortedKeys(labelSets, numericKeys);
+  var compare = function compare(a, b) {
+    var aMap = new Map(a.labels.map(function (l) {
+      return [l.name, l.value];
+    }));
+    var bMap = new Map(b.labels.map(function (l) {
+      return [l.name, l.value];
+    }));
+    var _iterator4 = _createForOfIteratorHelper(keyOrder),
+      _step4;
+    try {
+      for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+        var _aMap$get, _bMap$get;
+        var key = _step4.value;
+        var aVal = (_aMap$get = aMap.get(key)) !== null && _aMap$get !== void 0 ? _aMap$get : '';
+        var bVal = (_bMap$get = bMap.get(key)) !== null && _bMap$get !== void 0 ? _bMap$get : '';
+        if (numericKeys.has(key)) {
+          var diff = Number(aVal) - Number(bVal);
+          if (diff !== 0) return diff;
+        } else {
+          var cmp = aVal.localeCompare(bVal);
+          if (cmp !== 0) return cmp;
         }
-        return 0;
-    };
-    return { compare, keyOrder };
-};
+      }
+    } catch (err) {
+      _iterator4.e(err);
+    } finally {
+      _iterator4.f();
+    }
+    return 0;
+  };
+  return {
+    compare: compare,
+    keyOrder: keyOrder
+  };
+};

package/dist/ProfileFlameChart/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileFlameChart/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAoC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAEpF,OAAO,EAAwB,WAAW,EAAQ,MAAM,eAAe,CAAC;AAKxE,OAAO,EAAsB,aAAa,EAAa,MAAM,kBAAkB,CAAC;AAEhF,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,oCAAoC,CAAC;AAuCpE,UAAU,sBAAsB;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;CACvC;AA+BD,eAAO,MAAM,iBAAiB,GAAI,kKAY/B,sBAAsB,KAAG,GAAG,CAAC,OAuM/B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ProfileFlameChart/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAoC,kBAAkB,EAAC,MAAM,eAAe,CAAC;AAQpF,OAAO,EAAwB,WAAW,EAAQ,MAAM,eAAe,CAAC;AAKxE,OAAO,EAAsB,aAAa,EAAa,MAAM,kBAAkB,CAAC;AAEhF,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,oCAAoC,CAAC;AA4CpE,UAAU,sBAAsB;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,WAAW,EAAE,kBAAkB,CAAC;IAChC,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,YAAY,EAAE,OAAO,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;CACvC;AA+BD,eAAO,MAAM,iBAAiB,GAAI,kKAY/B,sBAAsB,KAAG,GAAG,CAAC,OAqM/B,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/ProfileFlameChart/index.js

@@ -1,4 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } 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 _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _toArray(r) { return _arrayWithHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableRest(); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+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; }
 // 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,149 +27,271 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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, useRef } from 'react';
-import { createParser, useQueryState } from 'nuqs';
 import { QueryRequest_ReportType } from '@parca/client';
-import { Button, useParcaContext } from '@parca/components';
+import { Button, useParcaContext, useURLState, useURLStateCustom } from '@parca/components';
 import { Matcher, MatcherTypes, Query } from '@parca/parser';
 import { TimeUnits, formatDate, formatDuration } from '@parca/utilities';
 import ProfileFlameGraph, { validateFlameChartQuery } from '../ProfileFlameGraph';
 import { boundsFromProfileSource } from '../ProfileFlameGraph/FlameGraphArrow/utils';
 import { MergedProfileSource, timeFormat } from '../ProfileSource';
 import { useProfileFilters } from '../ProfileView/components/ProfileFilters/useProfileFilters';
-import { flamechartDimensionParser } from '../hooks/urlParsers';
 import { useQuery } from '../useQuery';
 import { SamplesStrip } from './SamplesStrips';
-const timeframeParser = createParser({
-    parse: (value) => {
-        try {
-            const [labelPart, boundsPart] = value.split('|');
-            if (labelPart != null && boundsPart != null) {
-                const labels = labelPart.split(',').map(labelStr => {
-                    const [name, ...rest] = labelStr.split(':');
-                    return { name, value: rest.join(':') };
-                });
-                const [startMs, endMs] = boundsPart.split(',').map(Number);
-                if (labels.length > 0 && !isNaN(startMs) && !isNaN(endMs)) {
-                    return {
-                        labels: { labels },
-                        bounds: [startMs, endMs],
-                    };
-                }
-            }
-        }
-        catch {
-            // Ignore parsing errors
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var TimeframeStateSerializer = {
+  parse: function parse(value) {
+    if (value == null || value === '' || value === 'undefined' || Array.isArray(value)) {
+      return undefined;
+    }
+    try {
+      var _value$split = value.split('|'),
+        _value$split2 = _slicedToArray(_value$split, 2),
+        labelPart = _value$split2[0],
+        boundsPart = _value$split2[1];
+      if (labelPart != null && boundsPart != null) {
+        var labels = labelPart.split(',').map(function (labelStr) {
+          var _labelStr$split = labelStr.split(':'),
+            _labelStr$split2 = _toArray(_labelStr$split),
+            name = _labelStr$split2[0],
+            rest = _arrayLikeToArray(_labelStr$split2).slice(1);
+          return {
+            name: name,
+            value: rest.join(':')
+          };
+        });
+        var _boundsPart$split$map = boundsPart.split(',').map(Number),
+          _boundsPart$split$map2 = _slicedToArray(_boundsPart$split$map, 2),
+          startMs = _boundsPart$split$map2[0],
+          endMs = _boundsPart$split$map2[1];
+        if (labels.length > 0 && !isNaN(startMs) && !isNaN(endMs)) {
+          return {
+            labels: {
+              labels: labels
+            },
+            bounds: [startMs, endMs]
+          };
         }
-        return null;
-    },
-    serialize: (value) => {
-        const labelsStr = value.labels.labels.map(l => `${l.name}:${l.value}`).join(',');
-        return `${labelsStr}|${value.bounds[0]},${value.bounds[1]}`;
-    },
-}).withOptions({ history: 'replace' });
+      }
+    } catch (_unused) {
+      // Ignore parsing errors
+    }
+    return undefined;
+  },
+  stringify: function stringify(value) {
+    if (value == null) {
+      return '';
+    }
+    var labelsStr = value.labels.labels.map(function (l) {
+      return "".concat(l.name, ":").concat(l.value);
+    }).join(',');
+    return "".concat(labelsStr, "|").concat(value.bounds[0], ",").concat(value.bounds[1]);
+  }
+};
 // Helper to create a filtered profile source with narrowed time bounds
 // and dimension label matchers from the selected strip.
-const createFilteredProfileSource = (profileSource, selectedTimeframe) => {
-    if (!(profileSource instanceof MergedProfileSource)) {
-        return null;
-    }
-    // The bounds are in milliseconds, convert to nanoseconds for the profile source
-    // Round to integers since BigInt requires integer values
-    const mergeFrom = BigInt(Math.round(selectedTimeframe.bounds[0])) * 1000000n;
-    const mergeTo = BigInt(Math.round(selectedTimeframe.bounds[1])) * 1000000n;
-    // Add dimension labels as additional matchers to the query
-    const dimensionMatchers = selectedTimeframe.labels.labels.map(l => new Matcher(l.name, MatcherTypes.MatchEqual, l.value));
-    const query = new Query(profileSource.query.profType, [...profileSource.query.matchers, ...dimensionMatchers], '');
-    return new MergedProfileSource(mergeFrom, mergeTo, query);
+var createFilteredProfileSource = function createFilteredProfileSource(profileSource, selectedTimeframe) {
+  if (!(profileSource instanceof MergedProfileSource)) {
+    return null;
+  }
+
+  // The bounds are in milliseconds, convert to nanoseconds for the profile source
+  // Round to integers since BigInt requires integer values
+  var mergeFrom = BigInt(Math.round(selectedTimeframe.bounds[0])) * 1000000n;
+  var mergeTo = BigInt(Math.round(selectedTimeframe.bounds[1])) * 1000000n;
+
+  // Add dimension labels as additional matchers to the query
+  var dimensionMatchers = selectedTimeframe.labels.labels.map(function (l) {
+    return new Matcher(l.name, MatcherTypes.MatchEqual, l.value);
+  });
+  var query = new Query(profileSource.query.profType, [].concat(_toConsumableArray(profileSource.query.matchers), _toConsumableArray(dimensionMatchers)), '');
+  return new MergedProfileSource(mergeFrom, mergeTo, query);
 };
-export const ProfileFlameChart = ({ samplesData, queryClient, profileSource, width, total, filtered, profileType, isHalfScreen, metadataMappingFiles, metadataLoading, onSwitchToFifteenMinutes, }) => {
-    const { enableFlamechartFiltering } = useParcaContext();
-    const { protoFilters } = useProfileFilters();
-    const zoomControlsRef = useRef(null);
-    const [selectedTimeframe, setSelectedTimeframe] = useQueryState('flamechart_timeframe', timeframeParser);
-    // Read flamechart dimension from URL state to detect changes
-    const [flamechartDimension] = useQueryState('flamechart_dimension', flamechartDimensionParser.withDefault([]));
-    // Reset selection when the parent time range (profileSource) changes
-    const timeBoundsKey = boundsFromProfileSource(profileSource).join(',');
-    const prevTimeBoundsKey = useRef(timeBoundsKey);
-    useEffect(() => {
-        if (prevTimeBoundsKey.current !== timeBoundsKey) {
-            prevTimeBoundsKey.current = timeBoundsKey;
-            void setSelectedTimeframe(null);
-        }
-    }, [timeBoundsKey, setSelectedTimeframe]);
-    // Reset selection when the dimension changes
-    const dimensionKey = (flamechartDimension ?? []).join(',');
-    const prevDimensionKey = useRef(dimensionKey);
-    useEffect(() => {
-        if (prevDimensionKey.current !== dimensionKey) {
-            prevDimensionKey.current = dimensionKey;
-            void setSelectedTimeframe(null);
-        }
-    }, [dimensionKey, setSelectedTimeframe]);
-    // Handle timeframe selection from strips
-    const handleSelectedTimeframe = (labels, bounds) => {
-        if (bounds === undefined) {
-            void setSelectedTimeframe(null);
-        }
-        else {
-            void setSelectedTimeframe({ labels, bounds });
-        }
+export var ProfileFlameChart = function ProfileFlameChart(_ref) {
+  var samplesData = _ref.samplesData,
+    queryClient = _ref.queryClient,
+    profileSource = _ref.profileSource,
+    width = _ref.width,
+    total = _ref.total,
+    filtered = _ref.filtered,
+    profileType = _ref.profileType,
+    isHalfScreen = _ref.isHalfScreen,
+    metadataMappingFiles = _ref.metadataMappingFiles,
+    metadataLoading = _ref.metadataLoading,
+    onSwitchToFifteenMinutes = _ref.onSwitchToFifteenMinutes;
+  var _useParcaContext = useParcaContext(),
+    enableFlamechartFiltering = _useParcaContext.enableFlamechartFiltering;
+  var _useProfileFilters = useProfileFilters(),
+    protoFilters = _useProfileFilters.protoFilters;
+  var zoomControlsRef = useRef(null);
+  var _useURLStateCustom = useURLStateCustom('flamechart_timeframe', TimeframeStateSerializer),
+    _useURLStateCustom2 = _slicedToArray(_useURLStateCustom, 2),
+    selectedTimeframe = _useURLStateCustom2[0],
+    setSelectedTimeframe = _useURLStateCustom2[1];
+
+  // Read flamechart dimension from URL state to detect changes
+  var _useURLState = useURLState('flamechart_dimension', {
+      alwaysReturnArray: true
+    }),
+    _useURLState2 = _slicedToArray(_useURLState, 1),
+    flamechartDimension = _useURLState2[0];
+
+  // Reset selection when the parent time range (profileSource) changes
+  var timeBoundsKey = boundsFromProfileSource(profileSource).join(',');
+  var prevTimeBoundsKey = useRef(timeBoundsKey);
+  useEffect(function () {
+    if (prevTimeBoundsKey.current !== timeBoundsKey) {
+      prevTimeBoundsKey.current = timeBoundsKey;
+      setSelectedTimeframe(undefined);
+    }
+  }, [timeBoundsKey, setSelectedTimeframe]);
+
+  // Reset selection when the dimension changes
+  var dimensionKey = (flamechartDimension !== null && flamechartDimension !== void 0 ? flamechartDimension : []).join(',');
+  var prevDimensionKey = useRef(dimensionKey);
+  useEffect(function () {
+    if (prevDimensionKey.current !== dimensionKey) {
+      prevDimensionKey.current = dimensionKey;
+      setSelectedTimeframe(undefined);
+    }
+  }, [dimensionKey, setSelectedTimeframe]);
+
+  // Handle timeframe selection from strips
+  var handleSelectedTimeframe = function handleSelectedTimeframe(labels, bounds) {
+    if (bounds === undefined) {
+      setSelectedTimeframe(undefined);
+    } else {
+      setSelectedTimeframe({
+        labels: labels,
+        bounds: bounds
+      });
+    }
+  };
+
+  // Create filtered profile source when selection exists
+  var filteredProfileSource = useMemo(function () {
+    if (selectedTimeframe == null) return null;
+    return createFilteredProfileSource(profileSource, selectedTimeframe);
+  }, [profileSource, selectedTimeframe]);
+
+  // Query flamechart data only when a strip selection exists
+  var _useQuery = useQuery(queryClient, filteredProfileSource !== null && filteredProfileSource !== void 0 ? filteredProfileSource : profileSource, QueryRequest_ReportType.FLAMECHART, _objectSpread({
+      skip: selectedTimeframe == null || filteredProfileSource == null
+    }, enableFlamechartFiltering === true ? {
+      protoFilters: protoFilters
+    } : {})),
+    flamechartLoading = _useQuery.isLoading,
+    flamechartResponse = _useQuery.response,
+    flamechartError = _useQuery.error;
+  var flamechartArrow = (flamechartResponse === null || flamechartResponse === void 0 ? void 0 : flamechartResponse.report.oneofKind) === 'flamegraphArrow' ? flamechartResponse.report.flamegraphArrow : undefined;
+  var flamechartTotal = flamechartResponse != null ? BigInt(flamechartResponse.total) : total;
+  var flamechartFiltered = flamechartResponse != null ? BigInt(flamechartResponse.filtered) : filtered;
+
+  // Get time bounds from profile source for the strips
+  var timeBounds = boundsFromProfileSource(profileSource);
+
+  // Transform samples data for SamplesStrip component
+  var stripsData = useMemo(function () {
+    var _samplesData$stepMs;
+    if ((samplesData === null || samplesData === void 0 ? void 0 : samplesData.series) == null) return {
+      cpus: [],
+      data: [],
+      stepMs: 0
     };
-    // Create filtered profile source when selection exists
-    const filteredProfileSource = useMemo(() => {
-        if (selectedTimeframe == null)
-            return null;
-        return createFilteredProfileSource(profileSource, selectedTimeframe);
-    }, [profileSource, selectedTimeframe]);
-    // Query flamechart data only when a strip selection exists
-    const { isLoading: flamechartLoading, response: flamechartResponse, error: flamechartError, } = useQuery(queryClient, filteredProfileSource ?? profileSource, QueryRequest_ReportType.FLAMECHART, {
-        skip: selectedTimeframe == null || filteredProfileSource == null,
-        ...(enableFlamechartFiltering === true ? { protoFilters } : {}),
+    var cpus = samplesData.series.map(function (s) {
+      return s.labelset;
     });
-    const flamechartArrow = flamechartResponse?.report.oneofKind === 'flamegraphArrow'
-        ? flamechartResponse.report.flamegraphArrow
-        : undefined;
-    const flamechartTotal = flamechartResponse != null ? BigInt(flamechartResponse.total) : total;
-    const flamechartFiltered = flamechartResponse != null ? BigInt(flamechartResponse.filtered) : filtered;
-    // Get time bounds from profile source for the strips
-    const timeBounds = boundsFromProfileSource(profileSource);
-    // Transform samples data for SamplesStrip component
-    const stripsData = useMemo(() => {
-        if (samplesData?.series == null)
-            return { cpus: [], data: [], stepMs: 0 };
-        const cpus = samplesData.series.map(s => s.labelset);
-        const data = samplesData.series.map(s => s.data);
-        const stepMs = samplesData.stepMs ?? 0;
-        return { cpus, data, stepMs };
-    }, [samplesData?.series, samplesData?.stepMs]);
-    const { isValid, isNonDelta, isDurationTooLong } = validateFlameChartQuery(profileSource);
-    if (!isValid) {
-        if (isDurationTooLong) {
-            return (_jsxs("div", { className: "flex flex-col justify-center items-center p-10 text-center gap-4 text-sm", children: [_jsx("span", { children: "Flame chart is unavailable for queries longer than 15 minutes. Try reducing the time range to 15 minutes or selecting a point in the metrics graph." }), onSwitchToFifteenMinutes != null && (_jsx(Button, { variant: "primary", onClick: onSwitchToFifteenMinutes, children: "Switch to last 15 minutes" }))] }));
-        }
-        const message = isNonDelta
-            ? 'To use the Flame chart, please switch to a Delta profile.'
-            : 'Flame chart is unavailable for this query.';
-        return (_jsx("div", { className: "flex flex-col justify-center p-10 text-center gap-6 text-sm", children: message }));
-    }
-    const hasDimension = (flamechartDimension ?? []).length > 0;
-    const isStripsLoading = metadataLoading === true || !hasDimension || samplesData?.loading === true;
-    if (!hasDimension && metadataLoading !== true) {
-        return (_jsx("div", { className: "flex justify-center items-center py-10 text-gray-500 dark:text-gray-400 text-sm", children: "Select a label in the \"Samples group by\" dropdown above to view the samples strips." }));
+    var data = samplesData.series.map(function (s_0) {
+      return s_0.data;
+    });
+    var stepMs = (_samplesData$stepMs = samplesData.stepMs) !== null && _samplesData$stepMs !== void 0 ? _samplesData$stepMs : 0;
+    return {
+      cpus: cpus,
+      data: data,
+      stepMs: stepMs
+    };
+  }, [samplesData === null || samplesData === void 0 ? void 0 : samplesData.series, samplesData === null || samplesData === void 0 ? void 0 : samplesData.stepMs]);
+  var _validateFlameChartQu = validateFlameChartQuery(profileSource),
+    isValid = _validateFlameChartQu.isValid,
+    isNonDelta = _validateFlameChartQu.isNonDelta,
+    isDurationTooLong = _validateFlameChartQu.isDurationTooLong;
+  if (!isValid) {
+    if (isDurationTooLong) {
+      return /*#__PURE__*/_jsxs("div", {
+        className: "flex flex-col justify-center items-center p-10 text-center gap-4 text-sm",
+        children: [/*#__PURE__*/_jsx("span", {
+          children: "Flame chart is unavailable for queries longer than 15 minutes. Try reducing the time range to 15 minutes or selecting a point in the metrics graph."
+        }), onSwitchToFifteenMinutes != null && /*#__PURE__*/_jsx(Button, {
+          variant: "primary",
+          onClick: onSwitchToFifteenMinutes,
+          children: "Switch to last 15 minutes"
+        })]
+      });
     }
-    return (_jsxs("div", { children: [(isStripsLoading || (stripsData.cpus.length > 0 && stripsData.data.length > 0)) && (_jsx("div", { className: "mb-2", children: _jsx(SamplesStrip, { loading: isStripsLoading, cpus: stripsData.cpus, data: stripsData.data, selectedTimeframe: selectedTimeframe, onSelectedTimeframe: handleSelectedTimeframe, width: width, bounds: [Number(timeBounds[0] / 1000000n), Number(timeBounds[1] / 1000000n)], stepMs: stripsData.stepMs }) })), selectedTimeframe != null &&
-                (() => {
-                    const labels = selectedTimeframe.labels.labels
-                        .map(l => `${l.name} = ${l.value}`)
-                        .join(', ');
-                    const durationMs = selectedTimeframe.bounds[1] - selectedTimeframe.bounds[0];
-                    const duration = durationMs < 5000
-                        ? `${(durationMs / 1000).toFixed(1)}s`
-                        : formatDuration({ [TimeUnits.Milliseconds]: durationMs });
-                    const fmt = durationMs < 5000 ? "yyyy-MM-dd HH:mm:ss.SSS '(UTC)'" : timeFormat();
-                    return (_jsxs("div", { className: "flex items-center justify-between px-2 py-1", children: [_jsxs("div", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: ["Samples matching ", labels, " over ", duration, " from", ' ', formatDate(new Date(selectedTimeframe.bounds[0]), fmt), " to", ' ', formatDate(new Date(selectedTimeframe.bounds[1]), fmt)] }), _jsx("div", { ref: zoomControlsRef })] }));
-                })(), selectedTimeframe != null && filteredProfileSource != null ? (_jsx(ProfileFlameGraph, { arrow: flamechartArrow, loading: flamechartLoading, error: flamechartError, profileSource: filteredProfileSource, width: width, total: flamechartTotal, filtered: flamechartFiltered, profileType: profileType, isHalfScreen: isHalfScreen, metadataMappingFiles: metadataMappingFiles, metadataLoading: metadataLoading, isFlameChart: true, curPathArrow: [], setNewCurPathArrow: () => { }, zoomControlsRef: zoomControlsRef })) : (_jsx("div", { className: "flex justify-center items-center py-10 text-gray-500 dark:text-gray-400 text-sm", children: "Select a time range in the samples strips above to view the flamechart." }))] }));
+    var message = isNonDelta ? 'To use the Flame chart, please switch to a Delta profile.' : 'Flame chart is unavailable for this query.';
+    return /*#__PURE__*/_jsx("div", {
+      className: "flex flex-col justify-center p-10 text-center gap-6 text-sm",
+      children: message
+    });
+  }
+  var hasDimension = (flamechartDimension !== null && flamechartDimension !== void 0 ? flamechartDimension : []).length > 0;
+  var isStripsLoading = metadataLoading === true || !hasDimension || (samplesData === null || samplesData === void 0 ? void 0 : samplesData.loading) === true;
+  if (!hasDimension && metadataLoading !== true) {
+    return /*#__PURE__*/_jsx("div", {
+      className: "flex justify-center items-center py-10 text-gray-500 dark:text-gray-400 text-sm",
+      children: "Select a label in the \"Samples group by\" dropdown above to view the samples strips."
+    });
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    children: [(isStripsLoading || stripsData.cpus.length > 0 && stripsData.data.length > 0) && /*#__PURE__*/_jsx("div", {
+      className: "mb-2",
+      children: /*#__PURE__*/_jsx(SamplesStrip, {
+        loading: isStripsLoading,
+        cpus: stripsData.cpus,
+        data: stripsData.data,
+        selectedTimeframe: selectedTimeframe,
+        onSelectedTimeframe: handleSelectedTimeframe,
+        width: width,
+        bounds: [Number(timeBounds[0] / 1000000n), Number(timeBounds[1] / 1000000n)],
+        stepMs: stripsData.stepMs
+      })
+    }), selectedTimeframe != null && function () {
+      var labels_0 = selectedTimeframe.labels.labels.map(function (l) {
+        return "".concat(l.name, " = ").concat(l.value);
+      }).join(', ');
+      var durationMs = selectedTimeframe.bounds[1] - selectedTimeframe.bounds[0];
+      var duration = durationMs < 5000 ? "".concat((durationMs / 1000).toFixed(1), "s") : formatDuration(_defineProperty({}, TimeUnits.Milliseconds, durationMs));
+      var fmt = durationMs < 5000 ? "yyyy-MM-dd HH:mm:ss.SSS '(UTC)'" : timeFormat();
+      return /*#__PURE__*/_jsxs("div", {
+        className: "flex items-center justify-between px-2 py-1",
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "text-xs font-medium text-gray-500 dark:text-gray-400",
+          children: ["Samples matching ", labels_0, " over ", duration, " from", ' ', formatDate(new Date(selectedTimeframe.bounds[0]), fmt), " to", ' ', formatDate(new Date(selectedTimeframe.bounds[1]), fmt)]
+        }), /*#__PURE__*/_jsx("div", {
+          ref: zoomControlsRef
+        })]
+      });
+    }(), selectedTimeframe != null && filteredProfileSource != null ? /*#__PURE__*/_jsx(ProfileFlameGraph, {
+      arrow: flamechartArrow,
+      loading: flamechartLoading,
+      error: flamechartError,
+      profileSource: filteredProfileSource,
+      width: width,
+      total: flamechartTotal,
+      filtered: flamechartFiltered,
+      profileType: profileType,
+      isHalfScreen: isHalfScreen,
+      metadataMappingFiles: metadataMappingFiles,
+      metadataLoading: metadataLoading,
+      isFlameChart: true,
+      curPathArrow: [],
+      setNewCurPathArrow: function setNewCurPathArrow() {},
+      zoomControlsRef: zoomControlsRef
+    }) : /*#__PURE__*/_jsx("div", {
+      className: "flex justify-center items-center py-10 text-gray-500 dark:text-gray-400 text-sm",
+      children: "Select a time range in the samples strips above to view the flamechart."
+    })]
+  });
 };
-export default ProfileFlameChart;
+export default ProfileFlameChart;