@sentio/ui-dashboard 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1022 @@
+// src/timeseries/AggregateInput.tsx
+import { useMemo } from "react";
+import { capitalize } from "lodash";
+import { produce } from "immer";
+import { NewMultipleSelect } from "@sentio/ui-core";
+
+// src/timeseries/labels.ts
+import { getChainName } from "@sentio/chain";
+var SystemLabels = [
+  {
+    field: "contract_name",
+    name: "contract",
+    getValues(metric) {
+      return (metric.contractName || []).map((name) => ({
+        value: name,
+        display: name
+      }));
+    }
+  },
+  {
+    field: "contract_address",
+    name: "address",
+    getValues(metric) {
+      return (metric.contractAddress || []).map((name) => ({
+        value: name,
+        display: name
+      }));
+    }
+  },
+  {
+    field: "chain",
+    name: "chain",
+    getValues(metric) {
+      return (metric.chainId || []).map((chainId) => {
+        return { value: chainId, display: getChainName(chainId) };
+      });
+    }
+  }
+];
+function sortMetricByName(a, b) {
+  const aIsSystem = a.startsWith("system.");
+  const bIsSystem = b.startsWith("system.");
+  if (aIsSystem && !bIsSystem) {
+    return 1;
+  }
+  if (!aIsSystem && bIsSystem) {
+    return -1;
+  }
+  return a.localeCompare(b);
+}
+
+// src/timeseries/AggregateInput.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var AggregateAggregateOps = [
+  "AVG",
+  "SUM",
+  "MIN",
+  "MAX",
+  "COUNT"
+];
+function AggregateInput({ metric, value, onChange }) {
+  const { labels, selectedLabels } = useMemo(() => {
+    const labels2 = [];
+    for (const sl of SystemLabels) {
+      labels2.push({ label: sl.name, value: sl.field });
+    }
+    Object.keys(metric?.labels || {}).forEach((l) => {
+      labels2.push({ label: l, value: l });
+    });
+    const selectedLabels2 = [];
+    for (const l of value?.aggregate?.grouping || []) {
+      const label = labels2.find((lb) => lb.value === l);
+      if (label) {
+        selectedLabels2.push(label);
+      }
+    }
+    return { labels: labels2, selectedLabels: selectedLabels2 };
+  }, [metric, value]);
+  const onSelectLabel = (labels2) => {
+    onChange(
+      produce(value, (draft) => {
+        draft.aggregate = draft.aggregate || {};
+        draft.aggregate.grouping = labels2.map((l) => l.value);
+      })
+    );
+  };
+  const onSelectFunc = (f) => {
+    onChange(
+      produce(value, (draft) => {
+        if (f == "none") {
+          delete draft.aggregate;
+        } else {
+          const aggr = draft.aggregate || {};
+          aggr.op = f;
+          draft.aggregate = aggr;
+        }
+      })
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "min-h-8 flex grow items-center justify-stretch", children: [
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        value: value.aggregate?.op || "",
+        className: "sm:text-ilabel border-main text-text-foreground inline-flex h-8 items-center rounded-l-md border border-r-0 bg-gray-50 py-1 pl-4 pr-7 focus:border-0 focus:ring-inset",
+        onChange: (e) => onSelectFunc(e.target.value),
+        "aria-label": "aggregate",
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "none", children: "No aggregate" }, ""),
+          AggregateAggregateOps.map((key) => {
+            return /* @__PURE__ */ jsxs("option", { value: key, children: [
+              capitalize(key),
+              " by"
+            ] }, key);
+          })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      NewMultipleSelect,
+      {
+        disabled: !value.aggregate,
+        className: "border-main flex h-8 grow overflow-hidden rounded-r-md border",
+        options: labels || [],
+        value: selectedLabels,
+        onChange: onSelectLabel,
+        displayFn: (l) => l.label,
+        unSelectedText: "(everything)",
+        optionsClassName: "min-w-[200px]"
+      }
+    )
+  ] });
+}
+
+// src/timeseries/ArgumentInput.tsx
+import { DurationInput, classNames } from "@sentio/ui-core";
+
+// src/timeseries/functions.ts
+var ArgumentType = /* @__PURE__ */ ((ArgumentType2) => {
+  ArgumentType2[ArgumentType2["String"] = 0] = "String";
+  ArgumentType2[ArgumentType2["Integer"] = 1] = "Integer";
+  ArgumentType2[ArgumentType2["Double"] = 2] = "Double";
+  ArgumentType2[ArgumentType2["Bool"] = 3] = "Bool";
+  ArgumentType2[ArgumentType2["Duration"] = 4] = "Duration";
+  return ArgumentType2;
+})(ArgumentType || {});
+var abs = {
+  name: "abs",
+  description: "Returns the absolute value.",
+  arguments: []
+};
+var ceil = {
+  name: "ceil",
+  description: "Returns the smallest integer greater than or equal to a number.",
+  arguments: []
+};
+var floor = {
+  name: "floor",
+  description: "Returns the largest integer less than or equal to a number.",
+  arguments: []
+};
+var round = {
+  name: "round",
+  description: "Returns the value of a number rounded to the nearest integer.",
+  arguments: []
+};
+var log2 = {
+  name: "log2",
+  description: "Returns the base 2 logarithm.",
+  arguments: []
+};
+var log10 = {
+  name: "log10",
+  description: "Returns the base 10 logarithm.",
+  arguments: []
+};
+var ln = {
+  name: "ln",
+  description: "Returns the natural logarithm.",
+  arguments: []
+};
+var aggregations = ["avg", "count", "last", "max", "min", "sum", "delta"];
+var aggregationDescriptions = {
+  avg: "Calculates the sum of all values in the specified interval.",
+  count: "Calculates the number of values in the specified interval.",
+  last: "Calculates the last value in the specified interval.",
+  max: "Calculates the maximum of all values in the specified interval.",
+  min: "Calculates the minimum of all values in the specified interval.",
+  sum: "Calculates the sum of all values in the specified interval.",
+  delta: "Calculates the difference between the first and last value in the specified interval."
+};
+var aggregateOverTimeFunctions = aggregations.map(
+  (method) => ({
+    name: `${method}_over_time`,
+    description: aggregationDescriptions[method],
+    arguments: [
+      {
+        name: "interval",
+        type: 4 /* Duration */
+      }
+    ],
+    defaultArguments: [{ durationValue: { value: 1, unit: "m" } }]
+  })
+);
+var rollupDescriptions = {
+  avg: "Roll up the metric by its average value over the specified time period.",
+  count: "Roll up the metric by its count value over the specified time period.",
+  last: "Roll up the metric by its last value over the specified time period.",
+  max: "Roll up the metric by its maximum value over the specified time period.",
+  min: "Roll up the metric by its minimum value over the specified time period.",
+  sum: "Roll up the metric by its sum value over the specified time period.",
+  delta: "Roll up the metric by its delta value over the specified time period."
+};
+var rollupFunctions = aggregations.map(
+  (method) => ({
+    name: `rollup_${method}`,
+    description: rollupDescriptions[method],
+    arguments: [
+      {
+        name: "interval",
+        type: 4 /* Duration */
+      }
+    ],
+    defaultArguments: [{ durationValue: { value: 1, unit: "m" } }]
+  })
+);
+var rate = {
+  name: "rate",
+  description: "Calculates the per-second average rate of increase of the time series.",
+  arguments: [
+    {
+      name: "interval",
+      type: 4 /* Duration */
+    }
+  ],
+  defaultArguments: [{ durationValue: { value: 1, unit: "m" } }]
+};
+var irate = {
+  name: "irate",
+  description: "Calculates the per-second instant rate of increase of the time series.",
+  arguments: [
+    {
+      name: "interval",
+      type: 4 /* Duration */
+    }
+  ],
+  defaultArguments: [{ durationValue: { value: 1, unit: "m" } }]
+};
+var delta = {
+  name: "delta",
+  description: "Calculates the difference between the first and last value of each time series.",
+  arguments: [
+    {
+      name: "interval",
+      type: 4 /* Duration */
+    }
+  ],
+  defaultArguments: [{ durationValue: { value: 1, unit: "m" } }],
+  deprecated: true
+};
+var moving_delta = {
+  name: "moving_delta",
+  description: "Calculates the difference between the first and last value of each time series. (continuously)",
+  arguments: [
+    {
+      name: "interval",
+      type: 4 /* Duration */
+    }
+  ],
+  defaultArguments: [{ durationValue: { value: 1, unit: "m" } }],
+  deprecated: true
+};
+var topk = {
+  name: "topk",
+  description: "Returns the top k elements by sample value.",
+  arguments: [
+    {
+      name: "k",
+      type: 1 /* Integer */
+    }
+  ],
+  defaultArguments: [{ intValue: 1 }]
+};
+var bottomk = {
+  name: "bottomk",
+  description: "Returns the bottom k elements by sample value.",
+  arguments: [
+    {
+      name: "k",
+      type: 1 /* Integer */
+    }
+  ],
+  defaultArguments: [{ intValue: 1 }]
+};
+var timestamp = {
+  name: "timestamp",
+  description: "Returns the timestamp of each of the samples of the given vector as the number of seconds since January 1, 1970 UTC.",
+  arguments: []
+};
+var day_of_week = {
+  name: "day_of_week",
+  description: "Returns the day of the week for each of the given times. (needs timestamp)",
+  arguments: []
+};
+var day_of_month = {
+  name: "day_of_month",
+  description: "Returns the day of the month for each of the given times. (needs timestamp)",
+  arguments: []
+};
+var day_of_year = {
+  name: "day_of_year",
+  description: "Returns the day of the year for each of the given times. (needs timestamp)",
+  arguments: []
+};
+var month = {
+  name: "month",
+  description: "Returns the month of the given time. Returned values are from 1 to 12, where 1 means January etc. (needs timestamp)",
+  arguments: []
+};
+var year = {
+  name: "year",
+  description: "Returns the year of the given time. (needs timestamp)",
+  arguments: []
+};
+var hour = {
+  name: "hour",
+  description: "Returns the hour of the given time. Returned values are from 0 to 23. (needs timestamp)",
+  arguments: []
+};
+var minute = {
+  name: "minute",
+  description: "Returns the minute of the given time. Returned values are from 0 to 59. (needs timestamp)",
+  arguments: []
+};
+var before = {
+  name: "before",
+  displayName: "shift earlier",
+  description: "Shifts the vector back in time by the specified duration.",
+  arguments: [
+    {
+      name: "duration",
+      type: 4 /* Duration */
+    }
+  ],
+  defaultArguments: [{ durationValue: { value: 1, unit: "h" } }]
+};
+var after = {
+  name: "after",
+  displayName: "shift later",
+  description: "Shifts the vector forward in time by the specified duration.",
+  arguments: [
+    {
+      name: "duration",
+      type: 4 /* Duration */
+    }
+  ],
+  defaultArguments: [{ durationValue: { value: 1, unit: "h" } }]
+};
+var FunctionsCategories = {
+  Math: [abs, ceil, floor, round, log2, log10, ln],
+  Rollup: rollupFunctions,
+  "Aggregate Over Time": aggregateOverTimeFunctions,
+  Rate: [rate, irate, delta, moving_delta],
+  Rank: [topk, bottomk],
+  Time: [
+    timestamp,
+    day_of_year,
+    day_of_month,
+    day_of_week,
+    year,
+    month,
+    hour,
+    minute
+  ],
+  TimeShift: [before, after]
+};
+var FunctionMap = Object.values(
+  FunctionsCategories
+).reduce(
+  (acc, funcs) => {
+    funcs.forEach((f) => {
+      acc[f.name] = f;
+    });
+    return acc;
+  },
+  {}
+);
+function isAggrOrRollupFunction(name) {
+  const f = FunctionMap[name];
+  return f && (f.name.startsWith("rollup_") || f.name.endsWith("_over_time"));
+}
+var eventsDelta = {
+  name: "delta",
+  description: "Calculates the difference between the first and last value of each time series.",
+  arguments: [
+    {
+      name: "interval",
+      type: 4 /* Duration */
+    }
+  ],
+  defaultArguments: [{ durationValue: { value: 1, unit: "m" } }]
+};
+var EventsFunctionCategories = {
+  Rank: [topk, bottomk],
+  Delta: [eventsDelta]
+};
+var EventsFunctionMap = Object.values(
+  EventsFunctionCategories
+).reduce(
+  (acc, funcs) => {
+    funcs.forEach((f) => {
+      acc[f.name] = f;
+    });
+    return acc;
+  },
+  {}
+);
+
+// src/timeseries/ArgumentInput.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ArgumentInput({ className, argument, value, onChange }) {
+  switch (argument.type) {
+    case 0 /* String */:
+      return /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "text",
+          className: classNames(
+            className,
+            "hover:border-primary-600 focus:border-primary-600 focus:ring-3 focus:ring-primary-600/30 border border-transparent"
+          ),
+          value: value?.stringValue,
+          onChange: (v) => onChange && onChange({ stringValue: v.target.value })
+        }
+      );
+    case 2 /* Double */:
+      return /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "number",
+          className: classNames(
+            className,
+            "hover:border-primary-600 focus:border-primary-600 focus:ring-3 focus:ring-primary-600/30 border border-transparent"
+          ),
+          value: value?.doubleValue,
+          step: "any",
+          onChange: (v) => onChange && onChange({ doubleValue: parseFloat(v.target.value) })
+        }
+      );
+    case 1 /* Integer */:
+      return /* @__PURE__ */ jsx2(
+        "input",
+        {
+          step: "1",
+          type: "number",
+          className: classNames(
+            className,
+            "hover:border-primary-600 focus:border-primary-600 focus:ring-3 focus:ring-primary-600/30 border border-transparent"
+          ),
+          value: value?.intValue,
+          onChange: (v) => onChange && onChange({ intValue: parseInt(v.target.value) })
+        }
+      );
+    case 3 /* Bool */:
+      return /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "checkbox",
+          className: classNames(
+            className,
+            "hover:border-primary-600 focus:border-primary-600 focus:ring-3 focus:ring-primary-600/30 border border-transparent"
+          ),
+          checked: value?.boolValue,
+          onChange: (e) => onChange && onChange({ boolValue: e.target.value == "true" })
+        }
+      );
+    case 4 /* Duration */:
+      return /* @__PURE__ */ jsx2(
+        DurationInput,
+        {
+          className: "rounded-none! border-transparent! hover:border-primary-600! focus-within:border-primary-600!",
+          inputClassName: classNames(className),
+          value: value?.durationValue,
+          onChange: (e) => onChange && onChange({ durationValue: e }),
+          enableDays: true
+        }
+      );
+  }
+}
+
+// src/timeseries/FunctionInput.tsx
+import { Popover } from "@headlessui/react";
+import { LuX, LuChevronDown } from "react-icons/lu";
+import { useFloating, autoPlacement } from "@floating-ui/react";
+import { produce as produce2 } from "immer";
+import isEqual from "lodash/isEqual";
+import { HelpIcon, PopoverButton, classNames as classNames3 } from "@sentio/ui-core";
+
+// src/timeseries/FunctionsPanel.tsx
+import { Tab } from "@headlessui/react";
+import { Fragment, useEffect, useRef, useState } from "react";
+import { classNames as classNames2 } from "@sentio/ui-core";
+import { BiCaretRight } from "react-icons/bi";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function FunctionsPanel({
+  onClick,
+  functionCategories = FunctionsCategories,
+  defaultFunc
+}) {
+  const ulRef = useRef(null);
+  const [selectedIdx, setSelectedIdx] = useState(0);
+  useEffect(() => {
+    if (!defaultFunc) return;
+    let targetIndex = 0;
+    Object.keys(functionCategories).forEach((category, idx) => {
+      const func = functionCategories[category].find(
+        (f) => f.name === defaultFunc
+      );
+      if (func) {
+        targetIndex = idx;
+      }
+    });
+    setSelectedIdx(targetIndex);
+    setTimeout(() => {
+      const target = ulRef.current?.querySelector(
+        `li[data-name="${defaultFunc}"]`
+      );
+      if (target) {
+        target.scrollIntoView({ block: "center" });
+      }
+    }, 0);
+  }, [defaultFunc]);
+  return /* @__PURE__ */ jsx3("div", { className: "bg-default-bg flex h-full overflow-hidden rounded-md", children: /* @__PURE__ */ jsxs2(Tab.Group, { vertical: true, selectedIndex: selectedIdx, onChange: setSelectedIdx, children: [
+    /* @__PURE__ */ jsx3(
+      Tab.List,
+      {
+        as: "ul",
+        className: "native-scroller border-main flex w-44 shrink-0 flex-col flex-nowrap divide-y divide-gray-200 overflow-auto border-r",
+        children: Object.keys(functionCategories).map((category, idx) => /* @__PURE__ */ jsx3(Tab, { as: Fragment, children: ({ selected }) => /* @__PURE__ */ jsxs2(
+          "li",
+          {
+            onMouseOver: () => setSelectedIdx(idx),
+            className: classNames2(
+              selected ? "bg-primary-500 hover:bg-primary-600" : "bg-default-bg hover:bg-gray-50",
+              selected ? "text-white" : "text-foreground",
+              "flex cursor-pointer items-center justify-between p-2 text-sm font-medium"
+            ),
+            children: [
+              /* @__PURE__ */ jsx3(
+                "p",
+                {
+                  className: classNames2(
+                    "text-ilabel flex-1 truncate font-medium"
+                  ),
+                  children: category
+                }
+              ),
+              /* @__PURE__ */ jsx3(
+                BiCaretRight,
+                {
+                  className: classNames2("h-3 w-3 shrink-0 self-center")
+                }
+              )
+            ]
+          }
+        ) }, category))
+      }
+    ),
+    /* @__PURE__ */ jsx3(Tab.Panels, { className: "flex-1", children: Object.keys(functionCategories).map((category) => /* @__PURE__ */ jsx3(
+      Tab.Panel,
+      {
+        as: "ul",
+        className: "h-full divide-y overflow-y-auto",
+        ref: ulRef,
+        children: functionCategories[category].filter((f) => !f.deprecated).map((func) => /* @__PURE__ */ jsxs2(
+          "li",
+          {
+            className: classNames2(
+              "group cursor-pointer space-y-1 px-2 py-1.5",
+              func.name === defaultFunc ? "bg-primary-600 dark:bg-primary-600 text-white" : "hover:bg-sentio-gray-100 dark:hover:bg-sentio-gray-400 text-text-foreground dark:hover:text-white"
+            ),
+            onClick: () => onClick(func),
+            "data-name": func.name,
+            children: [
+              /* @__PURE__ */ jsx3("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsx3("p", { className: "text-ilabel truncate font-medium", children: func.displayName || func.name }) }),
+              /* @__PURE__ */ jsx3("div", { className: "flex", children: /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  className: classNames2(
+                    "text-icontent flex items-center",
+                    func.name === defaultFunc ? "text-white/80" : "text-text-foreground-secondary"
+                  ),
+                  children: /* @__PURE__ */ jsx3("p", { children: func.description })
+                }
+              ) })
+            ]
+          },
+          func.name
+        ))
+      },
+      category
+    )) })
+  ] }) });
+}
+
+// src/timeseries/FunctionInput.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function FunctionInput({ value, onChange }) {
+  const { x, y, refs, strategy } = useFloating({
+    middleware: [autoPlacement()]
+  });
+  const onSelectFunc = (f) => {
+    onChange(
+      produce2(value, (draft) => {
+        draft.functions = draft.functions || [];
+        draft.functions.push({
+          name: f.name,
+          arguments: f.defaultArguments || []
+        });
+      })
+    );
+  };
+  const remove = (f) => {
+    const idx = (value.functions || []).indexOf(f);
+    if (idx >= 0) {
+      onChange(
+        produce2(value, (draft) => {
+          draft.functions = draft.functions || [];
+          draft.functions.splice(idx, 1);
+        })
+      );
+    }
+  };
+  function changeArgument(fidx, aidx, v) {
+    onChange(
+      produce2(value, (draft) => {
+        draft.functions = draft.functions || [];
+        const f = draft.functions[fidx];
+        if (f) {
+          f.arguments = f.arguments || [];
+          f.arguments[aidx] = v;
+        }
+      })
+    );
+  }
+  function changeFunction(fidx, f) {
+    onChange(
+      produce2(value, (draft) => {
+        draft.functions = draft.functions || [];
+        const preFunc = draft.functions[fidx];
+        let resetArg = true;
+        if (preFunc.arguments?.length === f.defaultArguments?.length) {
+          const firstArg = preFunc.arguments?.[0];
+          const firstDefaultArg = f.defaultArguments?.[0];
+          if (firstArg && firstDefaultArg) {
+            resetArg = isEqual(
+              Object.keys(firstArg),
+              Object.keys(firstDefaultArg)
+            ) ? false : true;
+          }
+        }
+        draft.functions[fidx] = {
+          name: f.name,
+          arguments: resetArg ? f.defaultArguments || [] : preFunc.arguments
+        };
+      })
+    );
+  }
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsx4(
+      Functions,
+      {
+        functions: value.functions || [],
+        onRemove: remove,
+        onChangeArgument: changeArgument,
+        onChangeFunction: changeFunction
+      }
+    ),
+    /* @__PURE__ */ jsxs3("div", { className: "inline-flex items-center", children: [
+      /* @__PURE__ */ jsx4("div", { className: "h-0.5 w-2.5 self-center bg-gray-300" }),
+      /* @__PURE__ */ jsx4(Popover, { className: "relative", children: ({ open }) => /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        /* @__PURE__ */ jsxs3(
+          Popover.Button,
+          {
+            ref: refs.setReference,
+            "aria-label": "Add function",
+            className: classNames3(
+              "text-ilabel focus:border-primary-600 focus:ring-primary-600/30 focus:ring-3 relative -ml-px inline-flex h-8 items-center space-x-2 rounded-md",
+              "border-main hover:border-primary-600 border px-4 font-normal",
+              open ? "text-primary-600 ring-1" : "text-text-foreground-secondary hover:text-text-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsx4("span", { className: "flex text-sm", children: "f(x)" }),
+              /* @__PURE__ */ jsx4(HelpIcon, { text: "Add functions to query." })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          Popover.Panel,
+          {
+            className: "shadow-xs border-main z-10 mt-3 h-56 w-96 rounded-md border px-2 sm:px-0 lg:max-w-3xl",
+            ref: refs.setFloating,
+            style: {
+              position: strategy,
+              top: y ?? 0,
+              left: x ?? 0
+            },
+            children: ({ close }) => /* @__PURE__ */ jsx4(
+              FunctionsPanel,
+              {
+                onClick: (f) => {
+                  onSelectFunc(f);
+                  close();
+                }
+              }
+            )
+          }
+        )
+      ] }) })
+    ] })
+  ] });
+}
+function Functions({
+  functions,
+  onRemove,
+  onChangeArgument,
+  onChangeFunction
+}) {
+  if (functions.length == 0) {
+    return /* @__PURE__ */ jsx4(Fragment2, {});
+  }
+  return /* @__PURE__ */ jsx4(Fragment2, { children: functions.map((f, fi) => {
+    const def = FunctionMap[f.name];
+    return /* @__PURE__ */ jsxs3("div", { className: "inline-flex items-center", children: [
+      /* @__PURE__ */ jsx4("div", { className: "h-0.5 w-2.5 self-center bg-gray-300" }),
+      /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          className: classNames3(
+            "text-ilabel focus:outline-hidden text-text-foreground-secondary relative inline-flex items-center pl-2 font-normal",
+            "border-main rounded-md border",
+            "h-8"
+          ),
+          children: [
+            /* @__PURE__ */ jsx4(
+              PopoverButton,
+              {
+                containerClassName: "h-full border-r border-light pr-2 inline-flex items-center bg-gray-50",
+                content: ({ close }) => /* @__PURE__ */ jsx4("div", { className: "z-10 h-56 w-96 px-2 sm:px-0 lg:max-w-3xl", children: /* @__PURE__ */ jsx4(
+                  FunctionsPanel,
+                  {
+                    onClick: (f2) => {
+                      onChangeFunction?.(fi, f2);
+                      close();
+                    },
+                    defaultFunc: f.name
+                  }
+                ) }),
+                children: /* @__PURE__ */ jsxs3("span", { className: "hover:text-primary-600 text-text-foreground inline-flex cursor-pointer flex-nowrap items-center gap-1", children: [
+                  def.displayName || f.name,
+                  /* @__PURE__ */ jsx4(LuChevronDown, { className: "h-4 w-4" })
+                ] })
+              }
+            ),
+            def.arguments.map((arg, i) => /* @__PURE__ */ jsx4(
+              ArgumentInput,
+              {
+                className: "sm:text-ilabel block w-full pl-4",
+                argument: arg,
+                value: f.arguments && f.arguments[i],
+                onChange: (v) => onChangeArgument(fi, i, v)
+              },
+              "arg_" + i
+            )),
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                className: "text-text-foreground-disabled hover:text-text-foreground hover:bg-hover h-full rounded-r-md px-2",
+                "aria-label": "remove function",
+                onClick: () => onRemove(f),
+                children: /* @__PURE__ */ jsx4(LuX, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+              }
+            )
+          ]
+        }
+      )
+    ] }, f.name);
+  }) });
+}
+
+// src/timeseries/LabelsInput.tsx
+import { useMemo as useMemo2, useState as useState3 } from "react";
+import { produce as produce3 } from "immer";
+import { isEqual as isEqual2, sortBy, sortedUniqBy } from "lodash";
+import { LuCheck } from "react-icons/lu";
+import { VscRegex } from "react-icons/vsc";
+import { NewMultipleSelect as NewMultipleSelect2, classNames as classNames4 } from "@sentio/ui-core";
+
+// src/timeseries/LabelSearchContext.tsx
+import { createContext, useContext, useState as useState2 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var LabelSearchContext = createContext(
+  void 0
+);
+function LabelSearchProvider({ children }) {
+  const [labelSearchQuery, setLabelSearchQuery] = useState2("");
+  return /* @__PURE__ */ jsx5(
+    LabelSearchContext.Provider,
+    {
+      value: { labelSearchQuery, setLabelSearchQuery },
+      children
+    }
+  );
+}
+function useLabelSearchContext() {
+  return useContext(LabelSearchContext);
+}
+function useLabelSearch(defaultQuery) {
+  const context = useLabelSearchContext();
+  const [localQuery, setLocalQuery] = useState2(defaultQuery || "");
+  if (context) {
+    return context;
+  }
+  return {
+    labelSearchQuery: localQuery,
+    setLabelSearchQuery: setLocalQuery
+  };
+}
+
+// src/timeseries/LabelsInput.tsx
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function LabelsInput({
+  value,
+  metric,
+  variables,
+  onChange,
+  small,
+  useRegex
+}) {
+  const [input, setInput] = useState3("");
+  const onSelectLabel = (labels) => {
+    const selector = {};
+    labels.forEach((label) => {
+      selector[label.key] = label.value;
+    });
+    onChange(
+      produce3(value, (draft) => {
+        draft.labelSelector = selector;
+      })
+    );
+  };
+  const { setLabelSearchQuery } = useLabelSearch();
+  const labelSelectors = useMemo2(() => {
+    const result = [];
+    if (metric) {
+      Object.entries(variables || {}).forEach(([name, variable]) => {
+        const varname = `$${name}`;
+        const labelSelector = {
+          display: variable.field == name ? varname : `${variable.field}: ${varname}`,
+          key: variable.field,
+          value: `${varname}`
+        };
+        if (metric.labels && metric.labels[variable.field]) {
+          result.push(labelSelector);
+        } else if (variable?.field && SystemLabels.map((l) => l.name).includes(variable?.field)) {
+          result.push(labelSelector);
+        }
+      });
+      for (const sl of SystemLabels) {
+        sl.getValues(metric).forEach(({ value: value2, display }) => {
+          result.push({
+            display: `${sl.name}: ${display}`,
+            key: sl.field,
+            value: value2
+          });
+        });
+      }
+      let inputLabel = "";
+      let inputValue = "";
+      if (input.includes(":")) {
+        ;
+        [inputLabel, inputValue] = input.split(":");
+        inputLabel = inputLabel.trim();
+        inputValue = inputValue.trim();
+      } else {
+        inputValue = input.trim();
+      }
+      Object.entries(metric?.labels || {}).forEach(([key, values]) => {
+        ;
+        (values.values || []).forEach((value2) => {
+          result.push({
+            display: `${key}:${value2}`,
+            key,
+            value: value2
+          });
+        });
+        if (!useRegex || inputValue && key.includes(inputLabel) === false || !inputValue) {
+          return;
+        }
+        result.push({
+          display: `${key}: <contains> ${inputValue}`,
+          key,
+          value: JSON.stringify({
+            operator: "contains",
+            value: inputValue,
+            ignoreCase: true
+          })
+        });
+      });
+    }
+    return sortedUniqBy(
+      sortBy(result, (r) => r.display),
+      (r) => r.display
+    );
+  }, [metric, variables, input, useRegex]);
+  const selectedLabels = useMemo2(() => {
+    const selector = value?.labelSelector || {};
+    return Object.entries(selector).map(([key, value2]) => {
+      return labelSelectors.find((ls) => ls.key == key && ls.value == value2) || {
+        display: `${key}:${value2}`,
+        key,
+        value: value2
+      };
+    });
+  }, [value?.labelSelector, labelSelectors]);
+  return /* @__PURE__ */ jsx6(
+    NewMultipleSelect2,
+    {
+      input,
+      onInputChange: setInput,
+      className: classNames4(
+        "border-main flex grow overflow-auto rounded-r-md border",
+        small ? "min-h-6" : "min-h-8"
+      ),
+      options: labelSelectors,
+      value: selectedLabels,
+      onChange: onSelectLabel,
+      displayFn: (o) => {
+        const { display, value: value2 } = o;
+        const isRegex = /^\{.*\}$/.test(value2);
+        if (isRegex) {
+          const valueObj = JSON.parse(value2);
+          return `${o.key}:<${valueObj?.opertaor ?? "contains"}> ${valueObj?.value ?? value2}`;
+        }
+        return display;
+      },
+      disabled: !value.query,
+      unSelectedText: "(everywhere)",
+      maxInputSize: 30,
+      displayIcon: (o) => {
+        const isRegex = /^\{.*\}$/.test(o.value);
+        return isRegex ? /* @__PURE__ */ jsx6(VscRegex, { className: "mr-1 inline-block h-3 w-3 align-top" }) : null;
+      },
+      renderOption: (v, _active, selected) => {
+        const text = v.display;
+        const isRegex = /^\{.*\}$/.test(v.value);
+        const title = `${text} ${isRegex ? " (case-sensitive regex matcher)" : ""}`;
+        return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+          /* @__PURE__ */ jsxs4(
+            "span",
+            {
+              title,
+              className: classNames4(
+                "block truncate",
+                selected && "font-medium"
+              ),
+              children: [
+                isRegex && /* @__PURE__ */ jsx6(VscRegex, { className: "mr-1 inline-block h-3 w-3 align-top" }),
+                text
+              ]
+            }
+          ),
+          selected && /* @__PURE__ */ jsx6(
+            "span",
+            {
+              className: classNames4(
+                "absolute inset-y-0 right-0 flex items-center pr-4"
+              ),
+              children: /* @__PURE__ */ jsx6(LuCheck, { className: "h-4 w-4", "aria-hidden": "true" })
+            }
+          )
+        ] });
+      },
+      filterFn: (option, input2) => {
+        const { display, value: value2 } = option;
+        const isRegex = /^\{.*\}$/.test(value2);
+        if (isRegex) {
+          return true;
+        }
+        return display.toLowerCase().includes(input2.toLowerCase());
+      },
+      validateFn: (option) => {
+        const isRegex = /^\{.*\}$/.test(option.value);
+        if (isRegex) {
+          return true;
+        }
+        return labelSelectors.some((o) => isEqual2(o, option));
+      },
+      onFilterTextChange: setLabelSearchQuery
+    }
+  );
+}
+export {
+  AggregateInput,
+  ArgumentInput,
+  ArgumentType,
+  EventsFunctionCategories,
+  EventsFunctionMap,
+  FunctionInput,
+  FunctionMap,
+  FunctionsCategories,
+  FunctionsPanel,
+  LabelSearchProvider,
+  LabelsInput,
+  SystemLabels,
+  isAggrOrRollupFunction,
+  sortMetricByName,
+  useLabelSearch,
+  useLabelSearchContext
+};
+//# sourceMappingURL=index.mjs.map