@perses-dev/prometheus-plugin 0.50.3 → 0.51.0-beta.2

package/lib/components/promql/serialize.js

@@ -0,0 +1,80 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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.
+// Forked from https://github.com/prometheus/prometheus/blob/65f610353919b1c7b42d3776c3a95b68046a6bba/web/ui/mantine-ui/src/promql/serialize.ts
+import { formatDuration, msToPrometheusDuration } from '@perses-dev/core';
+import { matchType, vectorMatchCardinality, nodeType } from './ast';
+import { aggregatorsWithParam, maybeParenthesizeBinopChild, escapeString } from './utils';
+const serializeAtAndOffset = (timestamp, startOrEnd, offset)=>`${timestamp !== null ? ` @ ${(timestamp / 1000).toFixed(3)}` : startOrEnd !== null ? ` @ ${startOrEnd}()` : ''}${offset === 0 ? '' : offset > 0 ? ` offset ${formatDuration(msToPrometheusDuration(offset))}` : ` offset -${formatDuration(msToPrometheusDuration(-offset))}`}`;
+const serializeSelector = (node)=>{
+    const matchers = node.matchers.filter((m)=>!(m.name === '__name__' && m.type === matchType.equal && m.value === node.name)).map((m)=>`${m.name}${m.type}"${escapeString(m.value)}"`);
+    const range = node.type === nodeType.matrixSelector ? `[${formatDuration(msToPrometheusDuration(node.range))}]` : '';
+    const atAndOffset = serializeAtAndOffset(node.timestamp, node.startOrEnd, node.offset);
+    return `${node.name}${matchers.length > 0 ? `{${matchers.join(',')}}` : ''}${range}${atAndOffset}`;
+};
+const serializeNode = (node, indent = 0, pretty = false, initialIndent = true)=>{
+    const childListSeparator = pretty ? '\n' : '';
+    const childSeparator = pretty ? '\n' : ' ';
+    const childIndent = indent + 2;
+    const ind = pretty ? ' '.repeat(indent) : '';
+    // Needed for unary operators.
+    const initialInd = initialIndent ? ind : '';
+    switch(node.type){
+        case nodeType.aggregation:
+            return `${initialInd}${node.op}${node.without ? ` without(${node.grouping.join(', ')}) ` : node.grouping.length > 0 ? ` by(${node.grouping.join(', ')}) ` : ''}(${childListSeparator}${aggregatorsWithParam.includes(node.op) && node.param !== null ? `${serializeNode(node.param, childIndent, pretty)},${childSeparator}` : ''}${serializeNode(node.expr, childIndent, pretty)}${childListSeparator}${ind})`;
+        case nodeType.subquery:
+            return `${initialInd}${serializeNode(node.expr, indent, pretty)}[${formatDuration(msToPrometheusDuration(node.range))}:${node.step !== 0 ? formatDuration(msToPrometheusDuration(node.step)) : ''}]${serializeAtAndOffset(node.timestamp, node.startOrEnd, node.offset)}`;
+        case nodeType.parenExpr:
+            return `${initialInd}(${childListSeparator}${serializeNode(node.expr, childIndent, pretty)}${childListSeparator}${ind})`;
+        case nodeType.call:
+            {
+                const sep = node.args.length > 0 ? childListSeparator : '';
+                return `${initialInd}${node.func.name}(${sep}${node.args.map((arg)=>serializeNode(arg, childIndent, pretty)).join(',' + childSeparator)}${sep}${node.args.length > 0 ? ind : ''})`;
+            }
+        case nodeType.matrixSelector:
+            return `${initialInd}${serializeSelector(node)}`;
+        case nodeType.vectorSelector:
+            return `${initialInd}${serializeSelector(node)}`;
+        case nodeType.numberLiteral:
+            return `${initialInd}${node.val}`;
+        case nodeType.stringLiteral:
+            return `${initialInd}"${escapeString(node.val)}"`;
+        case nodeType.unaryExpr:
+            return `${initialInd}${node.op}${serializeNode(node.expr, indent, pretty, false)}`;
+        case nodeType.binaryExpr:
+            {
+                let matching = '';
+                let grouping = '';
+                const vm = node.matching;
+                if (vm !== null && (vm.labels.length > 0 || vm.on)) {
+                    if (vm.on) {
+                        matching = ` on(${vm.labels.join(', ')})`;
+                    } else {
+                        matching = ` ignoring(${vm.labels.join(', ')})`;
+                    }
+                    if (vm.card === vectorMatchCardinality.manyToOne || vm.card === vectorMatchCardinality.oneToMany) {
+                        grouping = ` group_${vm.card === vectorMatchCardinality.manyToOne ? 'left' : 'right'}(${vm.include.join(',')})`;
+                    }
+                }
+                return `${serializeNode(maybeParenthesizeBinopChild(node.op, node.lhs), childIndent, pretty)}${childSeparator}${ind}${node.op}${node.bool ? ' bool' : ''}${matching}${grouping}${childSeparator}${serializeNode(maybeParenthesizeBinopChild(node.op, node.rhs), childIndent, pretty)}`;
+            }
+        case nodeType.placeholder:
+            // TODO: Should we just throw an error when trying to serialize an AST containing a placeholder node?
+            // (that would currently break editing-as-text of ASTs that contain placeholders)
+            return `${initialInd}…${node.children.length > 0 ? `(${childListSeparator}${node.children.map((child)=>serializeNode(child, childIndent, pretty)).join(',' + childSeparator)}${childListSeparator}${ind})` : ''}`;
+        default:
+            throw new Error('unsupported node type');
+    }
+};
+export default serializeNode;
+
+//# sourceMappingURL=serialize.js.map

package/lib/components/promql/serialize.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/promql/serialize.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\n// Forked from https://github.com/prometheus/prometheus/blob/65f610353919b1c7b42d3776c3a95b68046a6bba/web/ui/mantine-ui/src/promql/serialize.ts\n\nimport { formatDuration, msToPrometheusDuration } from '@perses-dev/core';\nimport ASTNode, {\n  VectorSelector,\n  matchType,\n  vectorMatchCardinality,\n  nodeType,\n  StartOrEnd,\n  MatrixSelector,\n} from './ast';\nimport { aggregatorsWithParam, maybeParenthesizeBinopChild, escapeString } from './utils';\n\nconst serializeAtAndOffset = (timestamp: number | null, startOrEnd: StartOrEnd, offset: number): string =>\n  `${timestamp !== null ? ` @ ${(timestamp / 1000).toFixed(3)}` : startOrEnd !== null ? ` @ ${startOrEnd}()` : ''}${\n    offset === 0\n      ? ''\n      : offset > 0\n        ? ` offset ${formatDuration(msToPrometheusDuration(offset))}`\n        : ` offset -${formatDuration(msToPrometheusDuration(-offset))}`\n  }`;\n\nconst serializeSelector = (node: VectorSelector | MatrixSelector): string => {\n  const matchers = node.matchers\n    .filter((m) => !(m.name === '__name__' && m.type === matchType.equal && m.value === node.name))\n    .map((m) => `${m.name}${m.type}\"${escapeString(m.value)}\"`);\n\n  const range = node.type === nodeType.matrixSelector ? `[${formatDuration(msToPrometheusDuration(node.range))}]` : '';\n  const atAndOffset = serializeAtAndOffset(node.timestamp, node.startOrEnd, node.offset);\n\n  return `${node.name}${matchers.length > 0 ? `{${matchers.join(',')}}` : ''}${range}${atAndOffset}`;\n};\n\nconst serializeNode = (node: ASTNode, indent = 0, pretty = false, initialIndent = true): string => {\n  const childListSeparator = pretty ? '\\n' : '';\n  const childSeparator = pretty ? '\\n' : ' ';\n  const childIndent = indent + 2;\n  const ind = pretty ? ' '.repeat(indent) : '';\n  // Needed for unary operators.\n  const initialInd = initialIndent ? ind : '';\n\n  switch (node.type) {\n    case nodeType.aggregation:\n      return `${initialInd}${node.op}${\n        node.without\n          ? ` without(${node.grouping.join(', ')}) `\n          : node.grouping.length > 0\n            ? ` by(${node.grouping.join(', ')}) `\n            : ''\n      }(${childListSeparator}${\n        aggregatorsWithParam.includes(node.op) && node.param !== null\n          ? `${serializeNode(node.param, childIndent, pretty)},${childSeparator}`\n          : ''\n      }${serializeNode(node.expr, childIndent, pretty)}${childListSeparator}${ind})`;\n\n    case nodeType.subquery:\n      return `${initialInd}${serializeNode(node.expr, indent, pretty)}[${formatDuration(msToPrometheusDuration(node.range))}:${\n        node.step !== 0 ? formatDuration(msToPrometheusDuration(node.step)) : ''\n      }]${serializeAtAndOffset(node.timestamp, node.startOrEnd, node.offset)}`;\n\n    case nodeType.parenExpr:\n      return `${initialInd}(${childListSeparator}${serializeNode(\n        node.expr,\n        childIndent,\n        pretty\n      )}${childListSeparator}${ind})`;\n\n    case nodeType.call: {\n      const sep = node.args.length > 0 ? childListSeparator : '';\n\n      return `${initialInd}${node.func.name}(${sep}${node.args\n        .map((arg) => serializeNode(arg, childIndent, pretty))\n        .join(',' + childSeparator)}${sep}${node.args.length > 0 ? ind : ''})`;\n    }\n\n    case nodeType.matrixSelector:\n      return `${initialInd}${serializeSelector(node)}`;\n\n    case nodeType.vectorSelector:\n      return `${initialInd}${serializeSelector(node)}`;\n\n    case nodeType.numberLiteral:\n      return `${initialInd}${node.val}`;\n\n    case nodeType.stringLiteral:\n      return `${initialInd}\"${escapeString(node.val)}\"`;\n\n    case nodeType.unaryExpr:\n      return `${initialInd}${node.op}${serializeNode(node.expr, indent, pretty, false)}`;\n\n    case nodeType.binaryExpr: {\n      let matching = '';\n      let grouping = '';\n      const vm = node.matching;\n      if (vm !== null && (vm.labels.length > 0 || vm.on)) {\n        if (vm.on) {\n          matching = ` on(${vm.labels.join(', ')})`;\n        } else {\n          matching = ` ignoring(${vm.labels.join(', ')})`;\n        }\n\n        if (vm.card === vectorMatchCardinality.manyToOne || vm.card === vectorMatchCardinality.oneToMany) {\n          grouping = ` group_${vm.card === vectorMatchCardinality.manyToOne ? 'left' : 'right'}(${vm.include.join(',')})`;\n        }\n      }\n\n      return `${serializeNode(maybeParenthesizeBinopChild(node.op, node.lhs), childIndent, pretty)}${childSeparator}${ind}${\n        node.op\n      }${node.bool ? ' bool' : ''}${matching}${grouping}${childSeparator}${serializeNode(\n        maybeParenthesizeBinopChild(node.op, node.rhs),\n        childIndent,\n        pretty\n      )}`;\n    }\n\n    case nodeType.placeholder:\n      // TODO: Should we just throw an error when trying to serialize an AST containing a placeholder node?\n      // (that would currently break editing-as-text of ASTs that contain placeholders)\n      return `${initialInd}…${\n        node.children.length > 0\n          ? `(${childListSeparator}${node.children\n              .map((child) => serializeNode(child, childIndent, pretty))\n              .join(',' + childSeparator)}${childListSeparator}${ind})`\n          : ''\n      }`;\n\n    default:\n      throw new Error('unsupported node type');\n  }\n};\n\nexport default serializeNode;\n"],"names":["formatDuration","msToPrometheusDuration","matchType","vectorMatchCardinality","nodeType","aggregatorsWithParam","maybeParenthesizeBinopChild","escapeString","serializeAtAndOffset","timestamp","startOrEnd","offset","toFixed","serializeSelector","node","matchers","filter","m","name","type","equal","value","map","range","matrixSelector","atAndOffset","length","join","serializeNode","indent","pretty","initialIndent","childListSeparator","childSeparator","childIndent","ind","repeat","initialInd","aggregation","op","without","grouping","includes","param","expr","subquery","step","parenExpr","call","sep","args","func","arg","vectorSelector","numberLiteral","val","stringLiteral","unaryExpr","binaryExpr","matching","vm","labels","on","card","manyToOne","oneToMany","include","lhs","bool","rhs","placeholder","children","child","Error"],"mappings":"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"}

package/{dist → lib}/components/promql/utils.d.ts

@@ -1,5 +1,6 @@
 import ASTNode, { binaryOperatorType } from './ast';
 export declare const maybeParenthesizeBinopChild: (op: binaryOperatorType, child: ASTNode) => ASTNode;
 export declare const getNodeChildren: (node: ASTNode) => ASTNode[];
+export declare const aggregatorsWithParam: string[];
 export declare const escapeString: (str: string) => string;
 //# sourceMappingURL=utils.d.ts.map

package/lib/components/promql/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/promql/utils.ts"],"names":[],"mappings":"AAeA,OAAO,OAAO,EAAE,EAAE,kBAAkB,EAAY,MAAM,OAAO,CAAC;AAqB9D,eAAO,MAAM,2BAA2B,GAAI,IAAI,kBAAkB,EAAE,OAAO,OAAO,KAAG,OAepF,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,MAAM,OAAO,KAAG,OAAO,EAwBtD,CAAC;AAEF,eAAO,MAAM,oBAAoB,UAA2E,CAAC;AAE7G,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,KAAG,MAE1C,CAAC"}

package/{dist → lib}/components/promql/utils.js

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright 2025 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -83,6 +83,14 @@ export const getNodeChildren = (node)=>{
             throw new Error('unsupported node type');
     }
 };
+export const aggregatorsWithParam = [
+    'topk',
+    'bottomk',
+    'quantile',
+    'count_values',
+    'limitk',
+    'limit_ratio'
+];
 export const escapeString = (str)=>{
     return str.replace(/([\\"])/g, '\\$1');
 };

package/lib/components/promql/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/promql/utils.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\n// Forked from https://github.com/prometheus/prometheus/blob/65f610353919b1c7b42d3776c3a95b68046a6bba/web/ui/mantine-ui/src/promql/utils.ts\n\nimport ASTNode, { binaryOperatorType, nodeType } from './ast';\n\nconst binOpPrecedence = {\n  [binaryOperatorType.add]: 3,\n  [binaryOperatorType.sub]: 3,\n  [binaryOperatorType.mul]: 2,\n  [binaryOperatorType.div]: 2,\n  [binaryOperatorType.mod]: 2,\n  [binaryOperatorType.pow]: 1,\n  [binaryOperatorType.eql]: 4,\n  [binaryOperatorType.neq]: 4,\n  [binaryOperatorType.gtr]: 4,\n  [binaryOperatorType.lss]: 4,\n  [binaryOperatorType.gte]: 4,\n  [binaryOperatorType.lte]: 4,\n  [binaryOperatorType.and]: 5,\n  [binaryOperatorType.or]: 6,\n  [binaryOperatorType.unless]: 5,\n  [binaryOperatorType.atan2]: 2,\n};\n\nexport const maybeParenthesizeBinopChild = (op: binaryOperatorType, child: ASTNode): ASTNode => {\n  if (child.type !== nodeType.binaryExpr) {\n    return child;\n  }\n\n  if (binOpPrecedence[op] > binOpPrecedence[child.op]) {\n    return child;\n  }\n\n  // TODO: Parens aren't necessary for left-associativity within same precedence,\n  // or right-associativity between two power operators.\n  return {\n    type: nodeType.parenExpr,\n    expr: child,\n  };\n};\n\nexport const getNodeChildren = (node: ASTNode): ASTNode[] => {\n  switch (node.type) {\n    case nodeType.aggregation:\n      return node.param === null ? [node.expr] : [node.param, node.expr];\n    case nodeType.subquery:\n      return [node.expr];\n    case nodeType.parenExpr:\n      return [node.expr];\n    case nodeType.call:\n      return node.args;\n    case nodeType.matrixSelector:\n    case nodeType.vectorSelector:\n    case nodeType.numberLiteral:\n    case nodeType.stringLiteral:\n      return [];\n    case nodeType.placeholder:\n      return node.children;\n    case nodeType.unaryExpr:\n      return [node.expr];\n    case nodeType.binaryExpr:\n      return [node.lhs, node.rhs];\n    default:\n      throw new Error('unsupported node type');\n  }\n};\n\nexport const aggregatorsWithParam = ['topk', 'bottomk', 'quantile', 'count_values', 'limitk', 'limit_ratio'];\n\nexport const escapeString = (str: string): string => {\n  return str.replace(/([\\\\\"])/g, '\\\\$1');\n};\n"],"names":["binaryOperatorType","nodeType","binOpPrecedence","add","sub","mul","div","mod","pow","eql","neq","gtr","lss","gte","lte","and","or","unless","atan2","maybeParenthesizeBinopChild","op","child","type","binaryExpr","parenExpr","expr","getNodeChildren","node","aggregation","param","subquery","call","args","matrixSelector","vectorSelector","numberLiteral","stringLiteral","placeholder","children","unaryExpr","lhs","rhs","Error","aggregatorsWithParam","escapeString","str","replace"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,2IAA2I;AAE3I,SAAkBA,kBAAkB,EAAEC,QAAQ,QAAQ,QAAQ;AAE9D,MAAMC,kBAAkB;IACtB,CAACF,mBAAmBG,GAAG,CAAC,EAAE;IAC1B,CAACH,mBAAmBI,GAAG,CAAC,EAAE;IAC1B,CAACJ,mBAAmBK,GAAG,CAAC,EAAE;IAC1B,CAACL,mBAAmBM,GAAG,CAAC,EAAE;IAC1B,CAACN,mBAAmBO,GAAG,CAAC,EAAE;IAC1B,CAACP,mBAAmBQ,GAAG,CAAC,EAAE;IAC1B,CAACR,mBAAmBS,GAAG,CAAC,EAAE;IAC1B,CAACT,mBAAmBU,GAAG,CAAC,EAAE;IAC1B,CAACV,mBAAmBW,GAAG,CAAC,EAAE;IAC1B,CAACX,mBAAmBY,GAAG,CAAC,EAAE;IAC1B,CAACZ,mBAAmBa,GAAG,CAAC,EAAE;IAC1B,CAACb,mBAAmBc,GAAG,CAAC,EAAE;IAC1B,CAACd,mBAAmBe,GAAG,CAAC,EAAE;IAC1B,CAACf,mBAAmBgB,EAAE,CAAC,EAAE;IACzB,CAAChB,mBAAmBiB,MAAM,CAAC,EAAE;IAC7B,CAACjB,mBAAmBkB,KAAK,CAAC,EAAE;AAC9B;AAEA,OAAO,MAAMC,8BAA8B,CAACC,IAAwBC;IAClE,IAAIA,MAAMC,IAAI,KAAKrB,SAASsB,UAAU,EAAE;QACtC,OAAOF;IACT;IAEA,IAAInB,eAAe,CAACkB,GAAG,GAAGlB,eAAe,CAACmB,MAAMD,EAAE,CAAC,EAAE;QACnD,OAAOC;IACT;IAEA,+EAA+E;IAC/E,sDAAsD;IACtD,OAAO;QACLC,MAAMrB,SAASuB,SAAS;QACxBC,MAAMJ;IACR;AACF,EAAE;AAEF,OAAO,MAAMK,kBAAkB,CAACC;IAC9B,OAAQA,KAAKL,IAAI;QACf,KAAKrB,SAAS2B,WAAW;YACvB,OAAOD,KAAKE,KAAK,KAAK,OAAO;gBAACF,KAAKF,IAAI;aAAC,GAAG;gBAACE,KAAKE,KAAK;gBAAEF,KAAKF,IAAI;aAAC;QACpE,KAAKxB,SAAS6B,QAAQ;YACpB,OAAO;gBAACH,KAAKF,IAAI;aAAC;QACpB,KAAKxB,SAASuB,SAAS;YACrB,OAAO;gBAACG,KAAKF,IAAI;aAAC;QACpB,KAAKxB,SAAS8B,IAAI;YAChB,OAAOJ,KAAKK,IAAI;QAClB,KAAK/B,SAASgC,cAAc;QAC5B,KAAKhC,SAASiC,cAAc;QAC5B,KAAKjC,SAASkC,aAAa;QAC3B,KAAKlC,SAASmC,aAAa;YACzB,OAAO,EAAE;QACX,KAAKnC,SAASoC,WAAW;YACvB,OAAOV,KAAKW,QAAQ;QACtB,KAAKrC,SAASsC,SAAS;YACrB,OAAO;gBAACZ,KAAKF,IAAI;aAAC;QACpB,KAAKxB,SAASsB,UAAU;YACtB,OAAO;gBAACI,KAAKa,GAAG;gBAAEb,KAAKc,GAAG;aAAC;QAC7B;YACE,MAAM,IAAIC,MAAM;IACpB;AACF,EAAE;AAEF,OAAO,MAAMC,uBAAuB;IAAC;IAAQ;IAAW;IAAY;IAAgB;IAAU;CAAc,CAAC;AAE7G,OAAO,MAAMC,eAAe,CAACC;IAC3B,OAAOA,IAAIC,OAAO,CAAC,YAAY;AACjC,EAAE"}

package/lib/components/query.d.ts

@@ -0,0 +1,6 @@
+import { DatasourceSelector, StatusError } from '@perses-dev/core';
+import { UseQueryResult } from '@tanstack/react-query';
+import { MonitoredInstantQueryResponse, ParseQueryResponse } from '../model';
+export declare function useParseQuery(content: string, datasource: DatasourceSelector, enabled?: boolean): UseQueryResult<ParseQueryResponse, StatusError>;
+export declare function useInstantQuery(content: string, datasource: DatasourceSelector, enabled?: boolean): UseQueryResult<MonitoredInstantQueryResponse, StatusError>;
+//# sourceMappingURL=query.d.ts.map

package/lib/components/query.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"query.d.ts","sourceRoot":"","sources":["../../../src/components/query.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACnE,OAAO,EAAY,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAEL,6BAA6B,EAE7B,kBAAkB,EAEnB,MAAM,UAAU,CAAC;AAElB,wBAAgB,aAAa,CAC3B,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,kBAAkB,EAC9B,OAAO,CAAC,EAAE,OAAO,GAChB,cAAc,CAAC,kBAAkB,EAAE,WAAW,CAAC,CAYjD;AAED,wBAAgB,eAAe,CAC7B,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,kBAAkB,EAC9B,OAAO,CAAC,EAAE,OAAO,GAChB,cAAc,CAAC,6BAA6B,EAAE,WAAW,CAAC,CAgB5D"}

package/{dist/components/parse.js → lib/components/query.js}

@@ -1,4 +1,4 @@
-// Copyright 2024 The Perses Authors
+// Copyright 2025 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -30,5 +30,30 @@ export function useParseQuery(content, datasource, enabled) {
         }
     });
 }
+export function useInstantQuery(content, datasource, enabled) {
+    const { data: client } = useDatasourceClient(datasource);
+    return useQuery({
+        enabled: !!client && enabled,
+        // TODO: for some reason the caching is not working: identical nodes still fire their requests after each change made to the promQL
+        queryKey: [
+            'instantQuery',
+            content,
+            'datasource',
+            datasource.kind
+        ],
+        queryFn: async ()=>{
+            const params = {
+                query: content
+            };
+            const startTime = performance.now();
+            const response = await client.instantQuery(params);
+            const responseTime = performance.now() - startTime;
+            return {
+                ...response,
+                responseTime
+            };
+        }
+    });
+}
 
-//# sourceMappingURL=parse.js.map
+//# sourceMappingURL=query.js.map

package/lib/components/query.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/query.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useDatasourceClient } from '@perses-dev/plugin-system';\nimport { DatasourceSelector, StatusError } from '@perses-dev/core';\nimport { useQuery, UseQueryResult } from '@tanstack/react-query';\nimport {\n  InstantQueryRequestParameters,\n  MonitoredInstantQueryResponse,\n  ParseQueryRequestParameters,\n  ParseQueryResponse,\n  PrometheusClient,\n} from '../model';\n\nexport function useParseQuery(\n  content: string,\n  datasource: DatasourceSelector,\n  enabled?: boolean\n): UseQueryResult<ParseQueryResponse, StatusError> {\n  const { data: client } = useDatasourceClient<PrometheusClient>(datasource);\n\n  return useQuery<ParseQueryResponse, StatusError>({\n    enabled: !!client && enabled,\n    queryKey: ['parseQuery', content, 'datasource', datasource],\n    queryFn: async () => {\n      const params: ParseQueryRequestParameters = { query: content };\n\n      return await client!.parseQuery(params);\n    },\n  });\n}\n\nexport function useInstantQuery(\n  content: string,\n  datasource: DatasourceSelector,\n  enabled?: boolean\n): UseQueryResult<MonitoredInstantQueryResponse, StatusError> {\n  const { data: client } = useDatasourceClient<PrometheusClient>(datasource);\n\n  return useQuery<MonitoredInstantQueryResponse, StatusError>({\n    enabled: !!client && enabled,\n    // TODO: for some reason the caching is not working: identical nodes still fire their requests after each change made to the promQL\n    queryKey: ['instantQuery', content, 'datasource', datasource.kind],\n    queryFn: async () => {\n      const params: InstantQueryRequestParameters = { query: content };\n      const startTime = performance.now();\n      const response = await client!.instantQuery(params);\n      const responseTime = performance.now() - startTime;\n\n      return { ...response, responseTime };\n    },\n  });\n}\n"],"names":["useDatasourceClient","useQuery","useParseQuery","content","datasource","enabled","data","client","queryKey","queryFn","params","query","parseQuery","useInstantQuery","kind","startTime","performance","now","response","instantQuery","responseTime"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,mBAAmB,QAAQ,4BAA4B;AAEhE,SAASC,QAAQ,QAAwB,wBAAwB;AASjE,OAAO,SAASC,cACdC,OAAe,EACfC,UAA8B,EAC9BC,OAAiB;IAEjB,MAAM,EAAEC,MAAMC,MAAM,EAAE,GAAGP,oBAAsCI;IAE/D,OAAOH,SAA0C;QAC/CI,SAAS,CAAC,CAACE,UAAUF;QACrBG,UAAU;YAAC;YAAcL;YAAS;YAAcC;SAAW;QAC3DK,SAAS;YACP,MAAMC,SAAsC;gBAAEC,OAAOR;YAAQ;YAE7D,OAAO,MAAMI,OAAQK,UAAU,CAACF;QAClC;IACF;AACF;AAEA,OAAO,SAASG,gBACdV,OAAe,EACfC,UAA8B,EAC9BC,OAAiB;IAEjB,MAAM,EAAEC,MAAMC,MAAM,EAAE,GAAGP,oBAAsCI;IAE/D,OAAOH,SAAqD;QAC1DI,SAAS,CAAC,CAACE,UAAUF;QACrB,mIAAmI;QACnIG,UAAU;YAAC;YAAgBL;YAAS;YAAcC,WAAWU,IAAI;SAAC;QAClEL,SAAS;YACP,MAAMC,SAAwC;gBAAEC,OAAOR;YAAQ;YAC/D,MAAMY,YAAYC,YAAYC,GAAG;YACjC,MAAMC,WAAW,MAAMX,OAAQY,YAAY,CAACT;YAC5C,MAAMU,eAAeJ,YAAYC,GAAG,KAAKF;YAEzC,OAAO;gBAAE,GAAGG,QAAQ;gBAAEE;YAAa;QACrC;IACF;AACF"}

package/lib/env.d.js

@@ -0,0 +1,15 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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.
+/// <reference types="@rsbuild/core/types" />
+
+//# sourceMappingURL=env.d.js.map

package/lib/env.d.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/env.d.ts"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\n/// <reference types=\"@rsbuild/core/types\" />\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,6CAA6C"}

package/lib/explore/PrometheusExplorer.d.ts

@@ -0,0 +1,3 @@
+import { ReactElement } from 'react';
+export declare function PrometheusExplorer(): ReactElement;
+//# sourceMappingURL=PrometheusExplorer.d.ts.map

package/lib/explore/PrometheusExplorer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrometheusExplorer.d.ts","sourceRoot":"","sources":["../../../src/explore/PrometheusExplorer.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAyErC,wBAAgB,kBAAkB,IAAI,YAAY,CAkDjD"}

package/lib/explore/PrometheusExplorer.js

@@ -0,0 +1,190 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Stack, Tab, Tabs } from '@mui/material';
+import { DataQueriesProvider, MultiQueryEditor, useSuggestedStepMs } from '@perses-dev/plugin-system';
+import { useExplorerManagerContext } from '@perses-dev/explore';
+import useResizeObserver from 'use-resize-observer';
+import { Panel } from '@perses-dev/dashboards';
+import { DEFAULT_PROM } from '../model/prometheus-selectors';
+import { PrometheusMetricsFinder } from './PrometheusMetricsFinder';
+const PANEL_PREVIEW_HEIGHT = 700;
+function TimeSeriesPanel({ queries }) {
+    const { width, ref: boxRef } = useResizeObserver();
+    const height = PANEL_PREVIEW_HEIGHT;
+    const suggestedStepMs = useSuggestedStepMs(width);
+    // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
+    const definitions = queries.length ? queries.map((query)=>{
+        return {
+            kind: query.spec.plugin.kind,
+            spec: query.spec.plugin.spec
+        };
+    }) : [];
+    return /*#__PURE__*/ _jsx(Box, {
+        ref: boxRef,
+        height: height,
+        children: /*#__PURE__*/ _jsx(DataQueriesProvider, {
+            definitions: definitions,
+            options: {
+                suggestedStepMs,
+                mode: 'range'
+            },
+            children: /*#__PURE__*/ _jsx(Panel, {
+                panelOptions: {
+                    hideHeader: true
+                },
+                definition: {
+                    kind: 'Panel',
+                    spec: {
+                        queries: queries,
+                        display: {
+                            name: ''
+                        },
+                        plugin: {
+                            kind: 'TimeSeriesChart',
+                            spec: {}
+                        }
+                    }
+                }
+            })
+        })
+    });
+}
+function MetricDataTable({ queries }) {
+    const height = PANEL_PREVIEW_HEIGHT;
+    // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
+    const definitions = queries.map((query)=>{
+        return {
+            kind: query.spec.plugin.kind,
+            spec: query.spec.plugin.spec
+        };
+    });
+    return /*#__PURE__*/ _jsx(Box, {
+        height: height,
+        children: /*#__PURE__*/ _jsx(DataQueriesProvider, {
+            definitions: definitions,
+            options: {
+                mode: 'instant'
+            },
+            children: /*#__PURE__*/ _jsx(Panel, {
+                panelOptions: {
+                    hideHeader: true
+                },
+                definition: {
+                    kind: 'Panel',
+                    spec: {
+                        queries: queries,
+                        display: {
+                            name: ''
+                        },
+                        plugin: {
+                            kind: 'TimeSeriesTable',
+                            spec: {}
+                        }
+                    }
+                }
+            })
+        })
+    });
+}
+export function PrometheusExplorer() {
+    const { data: { tab = 'table', queries = [], datasource = DEFAULT_PROM, filters = [], exploredMetric = undefined }, setData } = useExplorerManagerContext();
+    return /*#__PURE__*/ _jsxs(Stack, {
+        gap: 2,
+        sx: {
+            width: '100%'
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Tabs, {
+                value: tab,
+                onChange: (_, state)=>setData({
+                        tab: state,
+                        queries
+                    }),
+                variant: "scrollable",
+                sx: {
+                    borderBottom: 1,
+                    borderColor: 'divider'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Tab, {
+                        value: "table",
+                        label: "Table"
+                    }),
+                    /*#__PURE__*/ _jsx(Tab, {
+                        value: "graph",
+                        label: "Graph"
+                    }),
+                    /*#__PURE__*/ _jsx(Tab, {
+                        value: "finder",
+                        label: "Finder"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                gap: 1,
+                children: [
+                    tab === 'table' && /*#__PURE__*/ _jsxs(Stack, {
+                        children: [
+                            /*#__PURE__*/ _jsx(MultiQueryEditor, {
+                                queryTypes: [
+                                    'TimeSeriesQuery'
+                                ],
+                                onChange: (state)=>setData({
+                                        tab,
+                                        queries: state
+                                    }),
+                                queries: queries
+                            }),
+                            /*#__PURE__*/ _jsx(MetricDataTable, {
+                                queries: queries
+                            })
+                        ]
+                    }),
+                    tab === 'graph' && /*#__PURE__*/ _jsxs(Stack, {
+                        children: [
+                            /*#__PURE__*/ _jsx(MultiQueryEditor, {
+                                queryTypes: [
+                                    'TimeSeriesQuery'
+                                ],
+                                onChange: (state)=>setData({
+                                        tab,
+                                        queries: state
+                                    }),
+                                queries: queries
+                            }),
+                            /*#__PURE__*/ _jsx(TimeSeriesPanel, {
+                                queries: queries
+                            })
+                        ]
+                    }),
+                    tab === 'finder' && /*#__PURE__*/ _jsx(Stack, {
+                        children: /*#__PURE__*/ _jsx(PrometheusMetricsFinder, {
+                            onChange: (state)=>setData({
+                                    tab,
+                                    ...state
+                                }),
+                            value: {
+                                datasource,
+                                filters,
+                                exploredMetric
+                            }
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=PrometheusExplorer.js.map

package/lib/explore/PrometheusExplorer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/explore/PrometheusExplorer.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { QueryDefinition } from '@perses-dev/core';\nimport { Box, Stack, Tab, Tabs } from '@mui/material';\nimport { DataQueriesProvider, MultiQueryEditor, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { useExplorerManagerContext } from '@perses-dev/explore';\nimport useResizeObserver from 'use-resize-observer';\nimport { Panel } from '@perses-dev/dashboards';\nimport { ReactElement } from 'react';\nimport { DEFAULT_PROM } from '../model/prometheus-selectors';\nimport { FinderQueryParams } from './PrometheusMetricsFinder/types';\nimport { PrometheusMetricsFinder } from './PrometheusMetricsFinder';\n\ninterface MetricsExplorerQueryParams extends FinderQueryParams {\n  tab?: string;\n  queries?: QueryDefinition[];\n}\n\nconst PANEL_PREVIEW_HEIGHT = 700;\n\nfunction TimeSeriesPanel({ queries }: { queries: QueryDefinition[] }): ReactElement {\n  const { width, ref: boxRef } = useResizeObserver();\n  const height = PANEL_PREVIEW_HEIGHT;\n\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const definitions = queries.length\n    ? queries.map((query) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      })\n    : [];\n\n  return (\n    <Box ref={boxRef} height={height}>\n      <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs, mode: 'range' }}>\n        <Panel\n          panelOptions={{\n            hideHeader: true,\n          }}\n          definition={{\n            kind: 'Panel',\n            spec: { queries: queries, display: { name: '' }, plugin: { kind: 'TimeSeriesChart', spec: {} } },\n          }}\n        />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n\nfunction MetricDataTable({ queries }: { queries: QueryDefinition[] }): ReactElement {\n  const height = PANEL_PREVIEW_HEIGHT;\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const definitions = queries.map((query) => {\n    return {\n      kind: query.spec.plugin.kind,\n      spec: query.spec.plugin.spec,\n    };\n  });\n\n  return (\n    <Box height={height}>\n      <DataQueriesProvider definitions={definitions} options={{ mode: 'instant' }}>\n        <Panel\n          panelOptions={{\n            hideHeader: true,\n          }}\n          definition={{\n            kind: 'Panel',\n            spec: { queries: queries, display: { name: '' }, plugin: { kind: 'TimeSeriesTable', spec: {} } },\n          }}\n        />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n\nexport function PrometheusExplorer(): ReactElement {\n  const {\n    data: { tab = 'table', queries = [], datasource = DEFAULT_PROM, filters = [], exploredMetric = undefined },\n    setData,\n  } = useExplorerManagerContext<MetricsExplorerQueryParams>();\n\n  return (\n    <Stack gap={2} sx={{ width: '100%' }}>\n      <Tabs\n        value={tab}\n        onChange={(_, state) => setData({ tab: state, queries })}\n        variant=\"scrollable\"\n        sx={{ borderBottom: 1, borderColor: 'divider' }}\n      >\n        <Tab value=\"table\" label=\"Table\" />\n        <Tab value=\"graph\" label=\"Graph\" />\n        <Tab value=\"finder\" label=\"Finder\" />\n      </Tabs>\n      <Stack gap={1}>\n        {tab === 'table' && (\n          <Stack>\n            <MultiQueryEditor\n              queryTypes={['TimeSeriesQuery']}\n              onChange={(state) => setData({ tab, queries: state })}\n              queries={queries}\n            />\n            <MetricDataTable queries={queries} />\n          </Stack>\n        )}\n        {tab === 'graph' && (\n          <Stack>\n            <MultiQueryEditor\n              queryTypes={['TimeSeriesQuery']}\n              onChange={(state) => setData({ tab, queries: state })}\n              queries={queries}\n            />\n            <TimeSeriesPanel queries={queries} />\n          </Stack>\n        )}\n        {tab === 'finder' && (\n          <Stack>\n            <PrometheusMetricsFinder\n              onChange={(state) => setData({ tab, ...state })}\n              value={{ datasource, filters, exploredMetric }}\n            />\n          </Stack>\n        )}\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["Box","Stack","Tab","Tabs","DataQueriesProvider","MultiQueryEditor","useSuggestedStepMs","useExplorerManagerContext","useResizeObserver","Panel","DEFAULT_PROM","PrometheusMetricsFinder","PANEL_PREVIEW_HEIGHT","TimeSeriesPanel","queries","width","ref","boxRef","height","suggestedStepMs","definitions","length","map","query","kind","spec","plugin","options","mode","panelOptions","hideHeader","definition","display","name","MetricDataTable","PrometheusExplorer","data","tab","datasource","filters","exploredMetric","undefined","setData","gap","sx","value","onChange","_","state","variant","borderBottom","borderColor","label","queryTypes"],"mappings":"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"}

package/lib/explore/PrometheusMetricsFinder/PrometheusMetricsFinder.d.ts

@@ -0,0 +1,31 @@
+import { StackProps } from '@mui/material';
+import { DatasourceSelector } from '@perses-dev/core';
+import { ReactElement } from 'react';
+import { LabelFilter, Settings } from './types';
+export interface SettingsMenuProps {
+    value: Settings;
+    onChange: (value: Settings) => void;
+}
+export declare function SettingsMenu({ value, onChange }: SettingsMenuProps): ReactElement;
+export interface MetricNameExplorerProps extends StackProps {
+    datasource: DatasourceSelector;
+    filters: LabelFilter[];
+    isMetadataEnabled?: boolean;
+    onExplore?: (metricName: string) => void;
+}
+export declare function MetricNameExplorer({ datasource, filters, isMetadataEnabled, onExplore, ...props }: MetricNameExplorerProps): ReactElement;
+export interface PrometheusMetricsFinderProps extends Omit<StackProps, 'onChange'> {
+    value: {
+        datasource: DatasourceSelector;
+        filters: LabelFilter[];
+        exploredMetric?: string;
+    };
+    onChange: ({ datasource, filters, exploredMetric, }: {
+        datasource: DatasourceSelector;
+        filters: LabelFilter[];
+        exploredMetric?: string;
+    }) => void;
+    onExplore?: (metricName: string) => void;
+}
+export declare function PrometheusMetricsFinder({ value: { datasource, filters, exploredMetric }, onChange, onExplore, ...props }: PrometheusMetricsFinderProps): ReactElement;
+//# sourceMappingURL=PrometheusMetricsFinder.d.ts.map

package/lib/explore/PrometheusMetricsFinder/PrometheusMetricsFinder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrometheusMetricsFinder.d.ts","sourceRoot":"","sources":["../../../../src/explore/PrometheusMetricsFinder/PrometheusMetricsFinder.tsx"],"names":[],"mappings":"AAaA,OAAO,EAUL,UAAU,EAIX,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAKtD,OAAO,EAAc,YAAY,EAAqB,MAAM,OAAO,CAAC;AAMpE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKhD,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,QAAQ,CAAC;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;CACrC;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,iBAAiB,GAAG,YAAY,CAmCjF;AAED,MAAM,WAAW,uBAAwB,SAAQ,UAAU;IACzD,UAAU,EAAE,kBAAkB,CAAC;IAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,kBAAkB,CAAC,EACjC,UAAU,EACV,OAAO,EACP,iBAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,uBAAuB,GAAG,YAAY,CAgDxC;AAED,MAAM,WAAW,4BAA6B,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IAChF,KAAK,EAAE;QACL,UAAU,EAAE,kBAAkB,CAAC;QAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;QACvB,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,CAAC;IACF,QAAQ,EAAE,CAAC,EACT,UAAU,EACV,OAAO,EACP,cAAc,GACf,EAAE;QACD,UAAU,EAAE,kBAAkB,CAAC;QAC/B,OAAO,EAAE,WAAW,EAAE,CAAC;QACvB,cAAc,CAAC,EAAE,MAAM,CAAC;KACzB,KAAK,IAAI,CAAC;IACX,SAAS,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,EAAE,EAAE,UAAyB,EAAE,OAAY,EAAE,cAAc,EAAE,EAClE,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,4BAA4B,GAAG,YAAY,CAkF7C"}