@parca/profile 0.19.140 → 0.19.143

package/dist/SimpleMatchers/index.js

@@ -1,4 +1,23 @@
-import { Fragment as _Fragment, 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 _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 _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+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 asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+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,6 +30,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } 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 { useCallback, useEffect, useState } from 'react';
 import { Icon } from '@iconify/react';
 import { useQueryClient } from '@tanstack/react-query';
@@ -21,306 +41,588 @@ import { millisToProtoTimestamp, sanitizeLabelValue } from '@parca/utilities';
 import { useUnifiedLabels } from '../contexts/UnifiedLabelsContext';
 import { transformLabelName } from '../contexts/utils';
 import Select from './Select';
-export const transformLabelsForSelect = (labelNames) => {
-    return labelNames.map(labelName => ({
-        key: labelName,
-        element: {
-            active: _jsx(_Fragment, { children: transformLabelName(labelName) }),
-            expanded: _jsx(_Fragment, { children: transformLabelName(labelName) }),
-        },
-    }));
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var transformLabelsForSelect = function transformLabelsForSelect(labelNames) {
+  return labelNames.map(function (labelName) {
+    return {
+      key: labelName,
+      element: {
+        active: /*#__PURE__*/_jsx(_Fragment, {
+          children: transformLabelName(labelName)
+        }),
+        expanded: /*#__PURE__*/_jsx(_Fragment, {
+          children: transformLabelName(labelName)
+        })
+      }
+    };
+  });
 };
-const operatorOptions = [
-    {
-        key: '=',
-        element: {
-            active: _jsx(_Fragment, { children: "Equals" }),
-            expanded: (_jsx(_Fragment, { children: _jsx("span", { children: "Equals" }) })),
-        },
-    },
-    {
-        key: '!=',
-        element: {
-            active: _jsx(_Fragment, { children: "Not Equals" }),
-            expanded: (_jsx(_Fragment, { children: _jsx("span", { children: "Not Equals" }) })),
-        },
-    },
-    {
-        key: '=~',
-        element: {
-            active: _jsx(_Fragment, { children: "Regex" }),
-            expanded: (_jsx(_Fragment, { children: _jsx("span", { children: "Regex" }) })),
-        },
-    },
-    {
-        key: '!~',
-        element: {
-            active: _jsx(_Fragment, { children: "Not Regex" }),
-            expanded: (_jsx(_Fragment, { children: _jsx("span", { children: "Not Regex" }) })),
-        },
-    },
-];
-const SimpleMatchers = ({ queryBrowserRef, searchExecutedTimestamp, draftSelection, setDraftMatchers, draftParsedQuery, }) => {
-    const [queryRows, setQueryRows] = useState([
-        { labelName: '', operator: '=', labelValue: '', labelValues: [], isLoading: false },
-    ]);
-    const reactQueryClient = useQueryClient();
-    const metadata = useGrpcMetadata();
-    const { queryServiceClient: parcaQueryClient } = useParcaContext();
-    const [showAll, setShowAll] = useState(false);
-    const [isActivelyEditing, setIsActivelyEditing] = useState(false);
-    const { labelNameMappingsForSimpleMatchers: labelNameOptions, isLabelNamesLoading: labelNamesLoading, refetchLabelNames, } = useUnifiedLabels();
-    // Reset editing mode when search is executed
-    useEffect(() => {
-        if (searchExecutedTimestamp !== undefined && searchExecutedTimestamp > 0) {
-            setIsActivelyEditing(false);
-            setShowAll(false);
-        }
-    }, [searchExecutedTimestamp]);
-    const visibleRows = showAll || isActivelyEditing ? queryRows : queryRows.slice(0, 3);
-    const hiddenRowsCount = queryRows.length - 3;
-    const maxWidthInPixels = `max-w-[${queryBrowserRef.current?.offsetWidth.toString()}px]`;
-    const currentMatchers = draftParsedQuery?.matchersString();
-    const profileType = draftParsedQuery?.profileType().toString();
-    const start = draftSelection.from;
-    const end = draftSelection.to;
-    const fetchLabelValues = useCallback(async (labelName) => {
-        if (labelName == null || labelName === '') {
-            return [];
+var operatorOptions = [{
+  key: '=',
+  element: {
+    active: /*#__PURE__*/_jsx(_Fragment, {
+      children: "Equals"
+    }),
+    expanded: /*#__PURE__*/_jsx(_Fragment, {
+      children: /*#__PURE__*/_jsx("span", {
+        children: "Equals"
+      })
+    })
+  }
+}, {
+  key: '!=',
+  element: {
+    active: /*#__PURE__*/_jsx(_Fragment, {
+      children: "Not Equals"
+    }),
+    expanded: /*#__PURE__*/_jsx(_Fragment, {
+      children: /*#__PURE__*/_jsx("span", {
+        children: "Not Equals"
+      })
+    })
+  }
+}, {
+  key: '=~',
+  element: {
+    active: /*#__PURE__*/_jsx(_Fragment, {
+      children: "Regex"
+    }),
+    expanded: /*#__PURE__*/_jsx(_Fragment, {
+      children: /*#__PURE__*/_jsx("span", {
+        children: "Regex"
+      })
+    })
+  }
+}, {
+  key: '!~',
+  element: {
+    active: /*#__PURE__*/_jsx(_Fragment, {
+      children: "Not Regex"
+    }),
+    expanded: /*#__PURE__*/_jsx(_Fragment, {
+      children: /*#__PURE__*/_jsx("span", {
+        children: "Not Regex"
+      })
+    })
+  }
+}];
+var SimpleMatchers = function SimpleMatchers(_ref) {
+  var _queryBrowserRef$curr;
+  var queryBrowserRef = _ref.queryBrowserRef,
+    searchExecutedTimestamp = _ref.searchExecutedTimestamp,
+    draftSelection = _ref.draftSelection,
+    setDraftMatchers = _ref.setDraftMatchers,
+    draftParsedQuery = _ref.draftParsedQuery;
+  var _useState = useState([{
+      labelName: '',
+      operator: '=',
+      labelValue: '',
+      labelValues: [],
+      isLoading: false
+    }]),
+    _useState2 = _slicedToArray(_useState, 2),
+    queryRows = _useState2[0],
+    setQueryRows = _useState2[1];
+  var reactQueryClient = useQueryClient();
+  var metadata = useGrpcMetadata();
+  var _useParcaContext = useParcaContext(),
+    parcaQueryClient = _useParcaContext.queryServiceClient;
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showAll = _useState4[0],
+    setShowAll = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isActivelyEditing = _useState6[0],
+    setIsActivelyEditing = _useState6[1];
+  var _useUnifiedLabels = useUnifiedLabels(),
+    labelNameOptions = _useUnifiedLabels.labelNameMappingsForSimpleMatchers,
+    labelNamesLoading = _useUnifiedLabels.isLabelNamesLoading,
+    refetchLabelNames = _useUnifiedLabels.refetchLabelNames;
+
+  // Reset editing mode when search is executed
+  useEffect(function () {
+    if (searchExecutedTimestamp !== undefined && searchExecutedTimestamp > 0) {
+      setIsActivelyEditing(false);
+      setShowAll(false);
+    }
+  }, [searchExecutedTimestamp]);
+  var visibleRows = showAll || isActivelyEditing ? queryRows : queryRows.slice(0, 3);
+  var hiddenRowsCount = queryRows.length - 3;
+  var maxWidthInPixels = "max-w-[".concat((_queryBrowserRef$curr = queryBrowserRef.current) === null || _queryBrowserRef$curr === void 0 ? void 0 : _queryBrowserRef$curr.offsetWidth.toString(), "px]");
+  var currentMatchers = draftParsedQuery === null || draftParsedQuery === void 0 ? void 0 : draftParsedQuery.matchersString();
+  var profileType = draftParsedQuery === null || draftParsedQuery === void 0 ? void 0 : draftParsedQuery.profileType().toString();
+  var start = draftSelection.from;
+  var end = draftSelection.to;
+  var fetchLabelValues = useCallback(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(labelName) {
+      var values, _t;
+      return _regenerator().w(function (_context2) {
+        while (1) switch (_context2.p = _context2.n) {
+          case 0:
+            if (!(labelName == null || labelName === '')) {
+              _context2.n = 1;
+              break;
+            }
+            return _context2.a(2, []);
+          case 1:
+            if (!(profileType == null || profileType === '')) {
+              _context2.n = 2;
+              break;
+            }
+            return _context2.a(2, []);
+          case 2:
+            _context2.p = 2;
+            _context2.n = 3;
+            return reactQueryClient.fetchQuery([labelName, profileType, start, end], /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+              var response, sanitizedValues;
+              return _regenerator().w(function (_context) {
+                while (1) switch (_context.n) {
+                  case 0:
+                    _context.n = 1;
+                    return parcaQueryClient.values(_objectSpread({
+                      labelName: labelName,
+                      match: [],
+                      profileType: profileType
+                    }, start !== undefined && end !== undefined ? {
+                      start: millisToProtoTimestamp(start),
+                      end: millisToProtoTimestamp(end)
+                    } : {}), {
+                      meta: metadata
+                    }).response;
+                  case 1:
+                    response = _context.v;
+                    console.log('Fetched label values:', response.labelValues);
+                    sanitizedValues = sanitizeLabelValue(response.labelValues);
+                    return _context.a(2, sanitizedValues);
+                }
+              }, _callee);
+            })));
+          case 3:
+            values = _context2.v;
+            return _context2.a(2, values);
+          case 4:
+            _context2.p = 4;
+            _t = _context2.v;
+            console.error('Error fetching label values:', _t);
+            return _context2.a(2, []);
         }
-        if (profileType == null || profileType === '') {
-            return [];
+      }, _callee2, null, [[2, 4]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [parcaQueryClient, metadata, profileType, reactQueryClient, start, end]);
+  var updateMatchersString = useCallback(function (rows) {
+    var matcherString = rows.filter(function (row) {
+      return row.labelName.length > 0 && row.labelValue;
+    }).map(function (row_0) {
+      return "".concat(row_0.labelName).concat(row_0.operator, "\"").concat(row_0.labelValue, "\"");
+    }).join(',');
+    setDraftMatchers(matcherString);
+  }, [setDraftMatchers]);
+
+  // Helper to ensure selected label name is in the options (for page load before API returns)
+  var getLabelNameOptionsWithSelected = useCallback(function (selectedLabelName) {
+    if (selectedLabelName === '') return labelNameOptions;
+
+    // Check if the selected label name exists in any group
+    var existsInOptions = labelNameOptions.some(function (group) {
+      return group.values.some(function (item) {
+        return item.key === selectedLabelName;
+      });
+    });
+    if (existsInOptions) return labelNameOptions;
+
+    // Add it temporarily to a group with type '' (matching non-matching labels group)
+    if (labelNameOptions.length === 0) {
+      return [{
+        type: '',
+        values: [{
+          key: selectedLabelName,
+          element: {
+            active: /*#__PURE__*/_jsx(_Fragment, {
+              children: selectedLabelName
+            }),
+            expanded: /*#__PURE__*/_jsx(_Fragment, {
+              children: selectedLabelName
+            })
+          }
+        }]
+      }];
+    }
+
+    // Find the group with type '' (non-matching labels) or create it
+    var emptyTypeGroupIndex = labelNameOptions.findIndex(function (group_0) {
+      return group_0.type === '';
+    });
+    if (emptyTypeGroupIndex !== -1) {
+      // Add to existing '' type group
+      var updatedOptions = _toConsumableArray(labelNameOptions);
+      updatedOptions[emptyTypeGroupIndex] = _objectSpread(_objectSpread({}, updatedOptions[emptyTypeGroupIndex]), {}, {
+        values: [].concat(_toConsumableArray(updatedOptions[emptyTypeGroupIndex].values), [{
+          key: selectedLabelName,
+          element: {
+            active: /*#__PURE__*/_jsx(_Fragment, {
+              children: selectedLabelName
+            }),
+            expanded: /*#__PURE__*/_jsx(_Fragment, {
+              children: selectedLabelName
+            })
+          }
+        }])
+      });
+      return updatedOptions;
+    } else {
+      // Create new '' type group
+      return [].concat(_toConsumableArray(labelNameOptions), [{
+        type: '',
+        values: [{
+          key: selectedLabelName,
+          element: {
+            active: /*#__PURE__*/_jsx(_Fragment, {
+              children: selectedLabelName
+            }),
+            expanded: /*#__PURE__*/_jsx(_Fragment, {
+              children: selectedLabelName
+            })
+          }
+        }]
+      }]);
+    }
+  }, [labelNameOptions]);
+  var fetchLabelValuesUnified = useCallback(/*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(labelName_0) {
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.n) {
+          case 0:
+            _context3.n = 1;
+            return fetchLabelValues(labelName_0);
+          case 1:
+            return _context3.a(2, _context3.v);
         }
-        try {
-            const values = await reactQueryClient.fetchQuery([labelName, profileType, start, end], async () => {
-                const response = await parcaQueryClient.values({
-                    labelName,
-                    match: [],
-                    profileType,
-                    ...(start !== undefined && end !== undefined
-                        ? {
-                            start: millisToProtoTimestamp(start),
-                            end: millisToProtoTimestamp(end),
+      }, _callee3);
+    }));
+    return function (_x2) {
+      return _ref4.apply(this, arguments);
+    };
+  }(), [fetchLabelValues]);
+  useEffect(function () {
+    if (currentMatchers === '' || currentMatchers === undefined) {
+      var defaultRow = {
+        labelName: '',
+        operator: '=',
+        labelValue: '',
+        labelValues: [],
+        isLoading: false
+      };
+      setQueryRows([defaultRow]);
+      return;
+    }
+    var isCancelled = false;
+    var fetchAndSetQueryRows = /*#__PURE__*/function () {
+      var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
+        var newRows, filteredRows;
+        return _regenerator().w(function (_context5) {
+          while (1) switch (_context5.n) {
+            case 0:
+              _context5.n = 1;
+              return Promise.all(currentMatchers.split(',').map(/*#__PURE__*/function () {
+                var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4(matcher) {
+                  var match, _match, labelName_1, operator, labelValue, trimmedLabelName, labelValues, sanitizedLabelValue;
+                  return _regenerator().w(function (_context4) {
+                    while (1) switch (_context4.n) {
+                      case 0:
+                        match = matcher.match(/^([^=!~]+)([=!~]{1,2})(.+)$/);
+                        if (!(match === null)) {
+                          _context4.n = 1;
+                          break;
                         }
-                        : {}),
-                }, { meta: metadata }).response;
-                console.log('Fetched label values:', response.labelValues);
-                const sanitizedValues = sanitizeLabelValue(response.labelValues);
-                return sanitizedValues;
-            });
-            return values;
-        }
-        catch (error) {
-            console.error('Error fetching label values:', error);
-            return [];
-        }
-    }, [parcaQueryClient, metadata, profileType, reactQueryClient, start, end]);
-    const updateMatchersString = useCallback((rows) => {
-        const matcherString = rows
-            .filter(row => row.labelName.length > 0 && row.labelValue)
-            .map(row => `${row.labelName}${row.operator}"${row.labelValue}"`)
-            .join(',');
-        setDraftMatchers(matcherString);
-    }, [setDraftMatchers]);
-    // Helper to ensure selected label name is in the options (for page load before API returns)
-    const getLabelNameOptionsWithSelected = useCallback((selectedLabelName) => {
-        if (selectedLabelName === '')
-            return labelNameOptions;
-        // Check if the selected label name exists in any group
-        const existsInOptions = labelNameOptions.some(group => group.values.some(item => item.key === selectedLabelName));
-        if (existsInOptions)
-            return labelNameOptions;
-        // Add it temporarily to a group with type '' (matching non-matching labels group)
-        if (labelNameOptions.length === 0) {
-            return [
-                {
-                    type: '',
-                    values: [
-                        {
-                            key: selectedLabelName,
-                            element: { active: _jsx(_Fragment, { children: selectedLabelName }), expanded: _jsx(_Fragment, { children: selectedLabelName }) },
-                        },
-                    ],
-                },
-            ];
-        }
-        // Find the group with type '' (non-matching labels) or create it
-        const emptyTypeGroupIndex = labelNameOptions.findIndex(group => group.type === '');
-        if (emptyTypeGroupIndex !== -1) {
-            // Add to existing '' type group
-            const updatedOptions = [...labelNameOptions];
-            updatedOptions[emptyTypeGroupIndex] = {
-                ...updatedOptions[emptyTypeGroupIndex],
-                values: [
-                    ...updatedOptions[emptyTypeGroupIndex].values,
-                    {
-                        key: selectedLabelName,
-                        element: { active: _jsx(_Fragment, { children: selectedLabelName }), expanded: _jsx(_Fragment, { children: selectedLabelName }) },
-                    },
-                ],
-            };
-            return updatedOptions;
-        }
-        else {
-            // Create new '' type group
-            return [
-                ...labelNameOptions,
-                {
-                    type: '',
-                    values: [
-                        {
-                            key: selectedLabelName,
-                            element: { active: _jsx(_Fragment, { children: selectedLabelName }), expanded: _jsx(_Fragment, { children: selectedLabelName }) },
-                        },
-                    ],
-                },
-            ];
-        }
-    }, [labelNameOptions]);
-    const fetchLabelValuesUnified = useCallback(async (labelName) => {
-        return await fetchLabelValues(labelName);
-    }, [fetchLabelValues]);
-    useEffect(() => {
-        if (currentMatchers === '' || currentMatchers === undefined) {
-            const defaultRow = {
-                labelName: '',
-                operator: '=',
-                labelValue: '',
-                labelValues: [],
-                isLoading: false,
-            };
-            setQueryRows([defaultRow]);
-            return;
-        }
-        let isCancelled = false;
-        const fetchAndSetQueryRows = async () => {
-            const newRows = await Promise.all(currentMatchers.split(',').map(async (matcher) => {
-                const match = matcher.match(/^([^=!~]+)([=!~]{1,2})(.+)$/);
-                if (match === null)
-                    return null;
-                const [, labelName, operator, labelValue] = match;
-                const trimmedLabelName = labelName.trim();
-                if (trimmedLabelName === '')
-                    return null;
-                const labelValues = await fetchLabelValuesUnified(trimmedLabelName);
-                const sanitizedLabelValue = labelValue.startsWith('"') && labelValue.endsWith('"')
-                    ? labelValue.slice(1, -1)
-                    : labelValue;
-                return {
-                    labelName: trimmedLabelName,
-                    operator,
-                    labelValue: sanitizedLabelValue,
-                    labelValues,
-                    isLoading: false,
+                        return _context4.a(2, null);
+                      case 1:
+                        _match = _slicedToArray(match, 4), labelName_1 = _match[1], operator = _match[2], labelValue = _match[3];
+                        trimmedLabelName = labelName_1.trim();
+                        if (!(trimmedLabelName === '')) {
+                          _context4.n = 2;
+                          break;
+                        }
+                        return _context4.a(2, null);
+                      case 2:
+                        _context4.n = 3;
+                        return fetchLabelValuesUnified(trimmedLabelName);
+                      case 3:
+                        labelValues = _context4.v;
+                        sanitizedLabelValue = labelValue.startsWith('"') && labelValue.endsWith('"') ? labelValue.slice(1, -1) : labelValue;
+                        return _context4.a(2, {
+                          labelName: trimmedLabelName,
+                          operator: operator,
+                          labelValue: sanitizedLabelValue,
+                          labelValues: labelValues,
+                          isLoading: false
+                        });
+                    }
+                  }, _callee4);
+                }));
+                return function (_x3) {
+                  return _ref6.apply(this, arguments);
                 };
-            }));
-            if (!isCancelled) {
-                const filteredRows = newRows.filter((row) => row !== null);
+              }()));
+            case 1:
+              newRows = _context5.v;
+              if (!isCancelled) {
+                filteredRows = newRows.filter(function (row_1) {
+                  return row_1 !== null;
+                });
                 setQueryRows(filteredRows);
+              }
+            case 2:
+              return _context5.a(2);
+          }
+        }, _callee5);
+      }));
+      return function fetchAndSetQueryRows() {
+        return _ref5.apply(this, arguments);
+      };
+    }();
+    void fetchAndSetQueryRows();
+    return function () {
+      isCancelled = true;
+    };
+  }, [currentMatchers, fetchLabelValuesUnified]);
+  var updateRow = useCallback(/*#__PURE__*/function () {
+    var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(index, field, value) {
+      var updatedRows, prevLabelName, labelValues_0;
+      return _regenerator().w(function (_context6) {
+        while (1) switch (_context6.n) {
+          case 0:
+            updatedRows = _toConsumableArray(queryRows);
+            prevLabelName = updatedRows[index].labelName;
+            updatedRows[index] = _objectSpread(_objectSpread({}, updatedRows[index]), {}, _defineProperty({}, field, value));
+            if (!(field === 'labelName' && value !== prevLabelName)) {
+              _context6.n = 2;
+              break;
             }
-        };
-        void fetchAndSetQueryRows();
-        return () => {
-            isCancelled = true;
-        };
-    }, [currentMatchers, fetchLabelValuesUnified]);
-    const updateRow = useCallback(async (index, field, value) => {
-        const updatedRows = [...queryRows];
-        const prevLabelName = updatedRows[index].labelName;
-        updatedRows[index] = { ...updatedRows[index], [field]: value };
-        if (field === 'labelName' && value !== prevLabelName) {
             updatedRows[index].labelValues = [];
             updatedRows[index].labelValue = '';
             updatedRows[index].isLoading = true;
-            setQueryRows([...updatedRows]);
-            const labelValues = await fetchLabelValuesUnified(value);
-            updatedRows[index].labelValues = labelValues;
+            setQueryRows(_toConsumableArray(updatedRows));
+            _context6.n = 1;
+            return fetchLabelValuesUnified(value);
+          case 1:
+            labelValues_0 = _context6.v;
+            updatedRows[index].labelValues = labelValues_0;
             updatedRows[index].isLoading = false;
+          case 2:
+            setQueryRows(_toConsumableArray(updatedRows));
+            updateMatchersString(updatedRows);
+          case 3:
+            return _context6.a(2);
         }
-        setQueryRows([...updatedRows]);
-        updateMatchersString(updatedRows);
-    }, [queryRows, fetchLabelValuesUnified, updateMatchersString]);
-    const handleUpdateRow = useCallback((index, field, value) => {
-        // Only set actively editing if not already showing all
-        // If showAll is true, user has explicitly expanded, so keep that state
-        if (!showAll) {
-            setIsActivelyEditing(true);
-        }
-        void updateRow(index, field, value);
-    }, [updateRow, showAll]);
-    const addNewRow = useCallback(() => {
-        // Only set actively editing if not already showing all label names and values
-        // If showAll is true, user has explicitly expanded, so keep that state
-        if (!showAll) {
-            setIsActivelyEditing(true);
+      }, _callee6);
+    }));
+    return function (_x4, _x5, _x6) {
+      return _ref7.apply(this, arguments);
+    };
+  }(), [queryRows, fetchLabelValuesUnified, updateMatchersString]);
+  var handleUpdateRow = useCallback(function (index_0, field_0, value_0) {
+    // Only set actively editing if not already showing all
+    // If showAll is true, user has explicitly expanded, so keep that state
+    if (!showAll) {
+      setIsActivelyEditing(true);
+    }
+    void updateRow(index_0, field_0, value_0);
+  }, [updateRow, showAll]);
+  var addNewRow = useCallback(function () {
+    // Only set actively editing if not already showing all label names and values
+    // If showAll is true, user has explicitly expanded, so keep that state
+    if (!showAll) {
+      setIsActivelyEditing(true);
+    }
+    var newRows_0 = [].concat(_toConsumableArray(queryRows), [{
+      labelName: '',
+      operator: '=',
+      labelValue: '',
+      labelValues: [],
+      isLoading: false
+    }]);
+    setQueryRows(newRows_0);
+    updateMatchersString(newRows_0);
+  }, [queryRows, updateMatchersString, showAll]);
+  var removeRow = useCallback(function (index_1) {
+    if (queryRows.length === 1) {
+      // Reset the single row instead of removing it
+      var resetRow = {
+        labelName: '',
+        operator: '=',
+        labelValue: '',
+        labelValues: [],
+        isLoading: false
+      };
+      setQueryRows([resetRow]);
+      updateMatchersString([resetRow]);
+    } else {
+      var updatedRows_0 = queryRows.filter(function (_, i) {
+        return i !== index_1;
+      });
+      setQueryRows(updatedRows_0);
+      updateMatchersString(updatedRows_0);
+    }
+  }, [queryRows, updateMatchersString]);
+  var handleLabelValueClick = useCallback(function (index_2) {
+    return /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
+      var updatedRows_1, labelValues_1, _t2;
+      return _regenerator().w(function (_context7) {
+        while (1) switch (_context7.p = _context7.n) {
+          case 0:
+            updatedRows_1 = _toConsumableArray(queryRows);
+            if (!(updatedRows_1[index_2].labelValues.length === 0 && updatedRows_1[index_2].labelName !== '')) {
+              _context7.n = 6;
+              break;
+            }
+            updatedRows_1[index_2].isLoading = true;
+            setQueryRows(_toConsumableArray(updatedRows_1));
+            _context7.p = 1;
+            _context7.n = 2;
+            return fetchLabelValuesUnified(updatedRows_1[index_2].labelName);
+          case 2:
+            labelValues_1 = _context7.v;
+            updatedRows_1[index_2].labelValues = labelValues_1;
+            _context7.n = 4;
+            break;
+          case 3:
+            _context7.p = 3;
+            _t2 = _context7.v;
+            console.error('Error fetching label values:', _t2);
+          case 4:
+            _context7.p = 4;
+            updatedRows_1[index_2].isLoading = false;
+            setQueryRows(_toConsumableArray(updatedRows_1));
+            return _context7.f(4);
+          case 5:
+            _context7.n = 7;
+            break;
+          case 6:
+            console.log("Label values already present or empty label name");
+          case 7:
+            return _context7.a(2);
         }
-        const newRows = [
-            ...queryRows,
-            { labelName: '', operator: '=', labelValue: '', labelValues: [], isLoading: false },
-        ];
-        setQueryRows(newRows);
-        updateMatchersString(newRows);
-    }, [queryRows, updateMatchersString, showAll]);
-    const removeRow = useCallback((index) => {
-        if (queryRows.length === 1) {
-            // Reset the single row instead of removing it
-            const resetRow = {
-                labelName: '',
-                operator: '=',
-                labelValue: '',
-                labelValues: [],
-                isLoading: false,
-            };
-            setQueryRows([resetRow]);
-            updateMatchersString([resetRow]);
+      }, _callee7, null, [[1, 3, 4, 5]]);
+    }));
+  }, [queryRows, fetchLabelValuesUnified]);
+  var isRowRegex = function isRowRegex(row_2) {
+    return row_2.operator === '=~' || row_2.operator === '!~';
+  };
+  var handleRefetchForLabelValues = useCallback(/*#__PURE__*/function () {
+    var _ref9 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8(labelName_2) {
+      return _regenerator().w(function (_context8) {
+        while (1) switch (_context8.n) {
+          case 0:
+            _context8.n = 1;
+            return fetchLabelValuesUnified(labelName_2);
+          case 1:
+            return _context8.a(2);
         }
-        else {
-            const updatedRows = queryRows.filter((_, i) => i !== index);
-            setQueryRows(updatedRows);
-            updateMatchersString(updatedRows);
+      }, _callee8);
+    }));
+    return function (_x7) {
+      return _ref9.apply(this, arguments);
+    };
+  }(), [fetchLabelValuesUnified]);
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: "flex items-center gap-3 ".concat(maxWidthInPixels, " w-full flex-wrap"),
+    id: "simple-matchers"
+  }, testId(TEST_IDS.SIMPLE_MATCHERS_CONTAINER)), {}, {
+    children: [visibleRows.map(function (row_3, index_3) {
+      return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+        className: "flex items-center"
+      }, testId(TEST_IDS.SIMPLE_MATCHER_ROW)), {}, {
+        children: [/*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({
+          items: getLabelNameOptionsWithSelected(row_3.labelName),
+          onSelection: function onSelection(value_1) {
+            return handleUpdateRow(index_3, 'labelName', value_1);
+          },
+          placeholder: "Select label name",
+          selectedKey: row_3.labelName,
+          className: "rounded-tr-none rounded-br-none ring-0 focus:ring-0 outline-none",
+          loading: labelNamesLoading,
+          searchable: true
+        }, testId(TEST_IDS.LABEL_NAME_SELECT)), {}, {
+          refetchValues: refetchLabelNames
+        })), /*#__PURE__*/_jsx(Select, _objectSpread({
+          items: operatorOptions,
+          onSelection: function onSelection(value_2) {
+            return handleUpdateRow(index_3, 'operator', value_2);
+          },
+          selectedKey: row_3.operator,
+          className: "rounded-none ring-0 focus:ring-0 outline-none"
+        }, testId(TEST_IDS.OPERATOR_SELECT))), /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({
+          items: transformLabelsForSelect(row_3.labelValue !== '' && !row_3.labelValues.includes(row_3.labelValue) ? [].concat(_toConsumableArray(row_3.labelValues), [row_3.labelValue]) : row_3.labelValues),
+          onSelection: function onSelection(value_3) {
+            return handleUpdateRow(index_3, 'labelValue', value_3);
+          },
+          placeholder: "Select label value",
+          selectedKey: row_3.labelValue,
+          className: "rounded-none ring-0 focus:ring-0 outline-none max-w-48",
+          optionsClassname: cx('max-w-[600px]', {
+            'w-[300px]': isRowRegex(row_3)
+          }),
+          searchable: true,
+          disabled: row_3.labelName === '',
+          loading: row_3.isLoading,
+          onButtonClick: function onButtonClick() {
+            return handleLabelValueClick(index_3);
+          },
+          editable: isRowRegex(row_3)
+        }, testId(TEST_IDS.LABEL_VALUE_SELECT)), {}, {
+          refetchValues: /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
+            return _regenerator().w(function (_context9) {
+              while (1) switch (_context9.n) {
+                case 0:
+                  _context9.n = 1;
+                  return handleRefetchForLabelValues(row_3.labelName);
+                case 1:
+                  return _context9.a(2, _context9.v);
+              }
+            }, _callee9);
+          })),
+          showLoadingInButton: true
+        })), /*#__PURE__*/_jsx("button", _objectSpread(_objectSpread({
+          onClick: function onClick() {
+            return removeRow(index_3);
+          },
+          className: cx('p-2 border-gray-200 border rounded rounded-tl-none rounded-bl-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900')
+        }, testId(TEST_IDS.REMOVE_MATCHER_BUTTON)), {}, {
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: "carbon:close",
+            className: "h-5 w-5 text-gray-400",
+            "aria-hidden": "true"
+          })
+        }))]
+      }), index_3);
+    }), queryRows.length > 3 && !isActivelyEditing && /*#__PURE__*/_jsx("button", _objectSpread(_objectSpread({
+      onClick: function onClick() {
+        if (showAll) {
+          // Clicking "Show less" - collapse and stop editing mode
+          setShowAll(false);
+          setIsActivelyEditing(false);
+        } else {
+          // Clicking "Show more" - just expand
+          setShowAll(true);
         }
-    }, [queryRows, updateMatchersString]);
-    const handleLabelValueClick = useCallback((index) => {
-        return async () => {
-            const updatedRows = [...queryRows];
-            if (updatedRows[index].labelValues.length === 0 && updatedRows[index].labelName !== '') {
-                updatedRows[index].isLoading = true;
-                setQueryRows([...updatedRows]);
-                try {
-                    const labelValues = await fetchLabelValuesUnified(updatedRows[index].labelName);
-                    updatedRows[index].labelValues = labelValues;
-                }
-                catch (error) {
-                    console.error('Error fetching label values:', error);
-                }
-                finally {
-                    updatedRows[index].isLoading = false;
-                    setQueryRows([...updatedRows]);
-                }
-            }
-            else {
-                console.log(`Label values already present or empty label name`);
-            }
-        };
-    }, [queryRows, fetchLabelValuesUnified]);
-    const isRowRegex = (row) => row.operator === '=~' || row.operator === '!~';
-    const handleRefetchForLabelValues = useCallback(async (labelName) => {
-        await fetchLabelValuesUnified(labelName);
-    }, [fetchLabelValuesUnified]);
-    return (_jsxs("div", { className: `flex items-center gap-3 ${maxWidthInPixels} w-full flex-wrap`, id: "simple-matchers", ...testId(TEST_IDS.SIMPLE_MATCHERS_CONTAINER), children: [visibleRows.map((row, index) => (_jsxs("div", { className: "flex items-center", ...testId(TEST_IDS.SIMPLE_MATCHER_ROW), children: [_jsx(Select, { items: getLabelNameOptionsWithSelected(row.labelName), onSelection: value => handleUpdateRow(index, 'labelName', value), placeholder: "Select label name", selectedKey: row.labelName, className: "rounded-tr-none rounded-br-none ring-0 focus:ring-0 outline-none", loading: labelNamesLoading, searchable: true, ...testId(TEST_IDS.LABEL_NAME_SELECT), refetchValues: refetchLabelNames }), _jsx(Select, { items: operatorOptions, onSelection: value => handleUpdateRow(index, 'operator', value), selectedKey: row.operator, className: "rounded-none ring-0 focus:ring-0 outline-none", ...testId(TEST_IDS.OPERATOR_SELECT) }), _jsx(Select, { items: transformLabelsForSelect(row.labelValue !== '' && !row.labelValues.includes(row.labelValue)
-                            ? [...row.labelValues, row.labelValue]
-                            : row.labelValues), onSelection: value => handleUpdateRow(index, 'labelValue', value), placeholder: "Select label value", selectedKey: row.labelValue, className: "rounded-none ring-0 focus:ring-0 outline-none max-w-48", optionsClassname: cx('max-w-[600px]', {
-                            'w-[300px]': isRowRegex(row),
-                        }), searchable: true, disabled: row.labelName === '', loading: row.isLoading, onButtonClick: () => handleLabelValueClick(index), editable: isRowRegex(row), ...testId(TEST_IDS.LABEL_VALUE_SELECT), refetchValues: async () => await handleRefetchForLabelValues(row.labelName), showLoadingInButton: true }), _jsx("button", { onClick: () => removeRow(index), className: cx('p-2 border-gray-200 border rounded rounded-tl-none rounded-bl-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-900'), ...testId(TEST_IDS.REMOVE_MATCHER_BUTTON), children: _jsx(Icon, { icon: "carbon:close", className: "h-5 w-5 text-gray-400", "aria-hidden": "true" }) })] }, index))), queryRows.length > 3 && !isActivelyEditing && (_jsx("button", { onClick: () => {
-                    if (showAll) {
-                        // Clicking "Show less" - collapse and stop editing mode
-                        setShowAll(false);
-                        setIsActivelyEditing(false);
-                    }
-                    else {
-                        // Clicking "Show more" - just expand
-                        setShowAll(true);
-                    }
-                }, className: "mr-2 px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-900", ...testId(showAll ? TEST_IDS.SHOW_LESS_BUTTON : TEST_IDS.SHOW_MORE_BUTTON), children: showAll ? 'Show less' : `Show ${hiddenRowsCount} more` })), _jsx("button", { onClick: addNewRow, className: "p-2 border-gray-200 dark:bg-gray-900 dark:border-gray-600 border rounded focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", ...testId(TEST_IDS.ADD_MATCHER_BUTTON), children: _jsx(Icon, { icon: "material-symbols:add", className: "h-5 w-5 text-gray-400", "aria-hidden": "true" }) })] }));
+      },
+      className: "mr-2 px-3 py-1 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-900"
+    }, testId(showAll ? TEST_IDS.SHOW_LESS_BUTTON : TEST_IDS.SHOW_MORE_BUTTON)), {}, {
+      children: showAll ? 'Show less' : "Show ".concat(hiddenRowsCount, " more")
+    })), /*#__PURE__*/_jsx("button", _objectSpread(_objectSpread({
+      onClick: addNewRow,
+      className: "p-2 border-gray-200 dark:bg-gray-900 dark:border-gray-600 border rounded focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+    }, testId(TEST_IDS.ADD_MATCHER_BUTTON)), {}, {
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: "material-symbols:add",
+        className: "h-5 w-5 text-gray-400",
+        "aria-hidden": "true"
+      })
+    }))]
+  }));
 };
-export default SimpleMatchers;
+export default SimpleMatchers;