@perses-dev/tempo-plugin 0.52.0 → 0.53.0

package/lib/components/filter/traceql_to_filter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/filter/traceql_to_filter.ts"],"sourcesContent":["import { AttributeField, FieldExpression, FieldOp, IntrinsicField, Static, parser } from '@grafana/lezer-traceql';\nimport { DurationField, Filter } from './filter';\n\ninterface Matcher {\n  operator: string;\n  value: string;\n}\n\n/**\n * Construct a Filter from a TraceQL query.\n * 1. Parse the query (using Lezer library) and extract all matchers, e.g. 'some_attribute = \"some_value\"'\n * 2. Create the filter attribute values, a string array with a single value (for 'x = \"y\"') or multiple values (for 'x =~ \"y|z\"')\n * 3. Add the remaining matchers to the set of custom matchers.\n */\nexport function traceQLToFilter(query: string): Filter {\n  const matchers = parseQuery(query);\n  return {\n    serviceName: reverseStringMatcher(matchers['resource.service.name']),\n    spanName: reverseStringMatcher(matchers['name']),\n    namespace: reverseStringMatcher(matchers['resource.k8s.namespace.name']),\n    status: reverseIntrinsicMatcher(matchers['status']),\n    spanDuration: reverseDurationMatcher(matchers['duration']),\n    traceDuration: reverseDurationMatcher(matchers['traceDuration']),\n    customMatchers: reverseCustomMatcher(\n      matchers,\n      new Set(['resource.service.name', 'name', 'resource.k8s.namespace.name', 'status', 'duration', 'traceDuration'])\n    ),\n  };\n}\n\nfunction parseQuery(query: string) {\n  const matchers: Record<string, Matcher[]> = {};\n  let attribute = '';\n  let operator = '';\n  let value = '';\n\n  const syntaxTree = parser.parse(query);\n  syntaxTree.iterate({\n    enter(node) {\n      switch (node.type.id) {\n        case AttributeField:\n          attribute = query.slice(node.from, node.to);\n          return false;\n        case IntrinsicField:\n          attribute = query.slice(node.from, node.to);\n          return false;\n        case FieldOp:\n          operator = query.slice(node.from, node.to);\n          return false;\n        case Static:\n          value = query.slice(node.from, node.to);\n          return false;\n      }\n    },\n    leave(node) {\n      if (node.type.id === FieldExpression && node.node.getChild(FieldOp)) {\n        const newMatchers = matchers[attribute] ?? [];\n        newMatchers.push({ operator, value });\n        matchers[attribute] = newMatchers;\n      }\n    },\n  });\n\n  return matchers;\n}\n\nfunction unescape(q: string) {\n  return q.replaceAll('\\\\\"', '\"').replaceAll('\\\\\\\\', '\\\\');\n}\n\nfunction reverseStringMatcher(matches?: Matcher[]) {\n  const values: string[] = [];\n  for (const { operator, value } of matches ?? []) {\n    const unescaped = unescape(value.slice(1, -1));\n    if (operator == '=') {\n      values.push(unescaped);\n    } else if (operator == '=~') {\n      values.push(...unescaped.split('|'));\n    }\n  }\n  return values;\n}\n\nfunction reverseIntrinsicMatcher(matches?: Matcher[]) {\n  const values: string[] = [];\n  for (const { operator, value } of matches ?? []) {\n    if (operator == '=') {\n      values.push(value);\n    }\n  }\n  return values;\n}\n\nfunction reverseDurationMatcher(matches?: Matcher[]) {\n  const duration: DurationField = {};\n  for (const { operator, value } of matches ?? []) {\n    if (operator == '>=') {\n      duration.min = value;\n    } else if (operator == '<=') {\n      duration.max = value;\n    }\n  }\n  return duration;\n}\n\nfunction reverseCustomMatcher(matchers: Record<string, Matcher[]>, skipAttrs: Set<string>) {\n  const customMatchers: string[] = [];\n  for (const [attribute, matches] of Object.entries(matchers)) {\n    if (skipAttrs.has(attribute)) {\n      continue;\n    }\n\n    for (const { operator, value } of matches) {\n      customMatchers.push(`${attribute}${operator}${value}`);\n    }\n  }\n  return customMatchers;\n}\n"],"names":["AttributeField","FieldExpression","FieldOp","IntrinsicField","Static","parser","traceQLToFilter","query","matchers","parseQuery","serviceName","reverseStringMatcher","spanName","namespace","status","reverseIntrinsicMatcher","spanDuration","reverseDurationMatcher","traceDuration","customMatchers","reverseCustomMatcher","Set","attribute","operator","value","syntaxTree","parse","iterate","enter","node","type","id","slice","from","to","leave","getChild","newMatchers","push","unescape","q","replaceAll","matches","values","unescaped","split","duration","min","max","skipAttrs","Object","entries","has"],"mappings":"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"}

package/lib/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './filter';
 export * from './TraceQLEditor';
 export * from './TraceQLExtension';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC"}

package/lib/components/index.js

@@ -10,6 +10,7 @@
 // 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.
+export * from './filter';
 export * from './TraceQLEditor';
 export * from './TraceQLExtension';
 

package/lib/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/index.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\nexport * from './TraceQLEditor';\nexport * from './TraceQLExtension';\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,cAAc,kBAAkB;AAChC,cAAc,qBAAqB"}
+{"version":3,"sources":["../../../src/components/index.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\nexport * from './filter';\nexport * from './TraceQLEditor';\nexport * from './TraceQLExtension';\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,cAAc,WAAW;AACzB,cAAc,kBAAkB;AAChC,cAAc,qBAAqB"}

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

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

package/lib/explore/TempoExplorer.js

@@ -17,6 +17,7 @@ import { isValidTraceId } from '@perses-dev/core';
 import { Panel } from '@perses-dev/dashboards';
 import { useExplorerManagerContext } from '@perses-dev/explore';
 import { DataQueriesProvider, MultiQueryEditor, useDataQueries } from '@perses-dev/plugin-system';
+import { linkToSpan, linkToTrace } from './links';
 function SearchResultsPanel({ queries }) {
     const { isFetching, isLoading, queryResults } = useDataQueries('TraceQuery');
     // no query executed, show empty panel
@@ -60,7 +61,9 @@ function SearchResultsPanel({ queries }) {
                             },
                             plugin: {
                                 kind: 'ScatterChart',
-                                spec: {}
+                                spec: {
+                                    link: linkToTrace
+                                }
                             }
                         }
                     }
@@ -82,7 +85,11 @@ function SearchResultsPanel({ queries }) {
                         },
                         plugin: {
                             kind: 'TraceTable',
-                            spec: {}
+                            spec: {
+                                links: {
+                                    trace: linkToTrace
+                                }
+                            }
                         }
                     }
                 }
@@ -90,28 +97,33 @@ function SearchResultsPanel({ queries }) {
         ]
     });
 }
-function TracingGanttChartPanel({ queries }) {
+function TracingGanttChartPanel(props) {
+    const { queries, selectedSpanId } = props;
+    const firstQuery = queries[0]?.spec.plugin.spec?.query;
     return /*#__PURE__*/ _jsx(Panel, {
-        panelOptions: {
-            hideHeader: true
-        },
         definition: {
             kind: 'Panel',
             spec: {
                 queries,
                 display: {
-                    name: ''
+                    name: `Trace ${firstQuery}`
                 },
                 plugin: {
                     kind: 'TracingGanttChart',
-                    spec: {}
+                    spec: {
+                        links: {
+                            trace: linkToTrace,
+                            span: linkToSpan
+                        },
+                        selectedSpanId
+                    }
                 }
             }
         }
     });
 }
 export function TempoExplorer() {
-    const { data: { queries = [] }, setData } = useExplorerManagerContext();
+    const { data: { queries = [], spanId: selectedSpanId }, setData } = useExplorerManagerContext();
     // map TraceQueryDefinition to Definition<UnknownSpec>
     const definitions = queries.length ? queries.map((query)=>{
         return {
@@ -119,8 +131,8 @@ export function TempoExplorer() {
             spec: query.spec.plugin.spec
         };
     }) : [];
-    // Cannot cast to TempoTraceQuerySpec because 'tempo-plugin' types are not accessible in @perses-dev/explore
-    const isSingleTrace = queries.length === 1 && queries[0]?.kind === 'TraceQuery' && queries[0]?.spec.plugin.kind === 'TempoTraceQuery' && isValidTraceId((queries[0]?.spec.plugin.spec).query ?? ''); // eslint-disable-line @typescript-eslint/no-explicit-any
+    const firstQuery = queries[0]?.spec.plugin.spec?.query;
+    const isSingleTrace = isValidTraceId(firstQuery ?? '');
     return /*#__PURE__*/ _jsxs(Stack, {
         gap: 2,
         sx: {
@@ -146,7 +158,8 @@ export function TempoExplorer() {
                     children: /*#__PURE__*/ _jsx(Box, {
                         height: 700,
                         children: isSingleTrace ? /*#__PURE__*/ _jsx(TracingGanttChartPanel, {
-                            queries: queries
+                            queries: queries,
+                            selectedSpanId: selectedSpanId
                         }) : /*#__PURE__*/ _jsx(SearchResultsPanel, {
                             queries: queries
                         })

package/lib/explore/TempoExplorer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/explore/TempoExplorer.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 { Box, Stack } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary, LoadingOverlay, NoDataOverlay } from '@perses-dev/components';\nimport { QueryDefinition, isValidTraceId } from '@perses-dev/core';\nimport { Panel } from '@perses-dev/dashboards';\nimport { useExplorerManagerContext } from '@perses-dev/explore';\nimport { DataQueriesProvider, MultiQueryEditor, useDataQueries } from '@perses-dev/plugin-system';\nimport { ReactElement } from 'react';\n\ninterface TracesExplorerQueryParams {\n  queries?: QueryDefinition[];\n}\n\ninterface SearchResultsPanelProps {\n  queries: QueryDefinition[];\n}\n\nfunction SearchResultsPanel({ queries }: SearchResultsPanelProps): ReactElement {\n  const { isFetching, isLoading, queryResults } = useDataQueries('TraceQuery');\n\n  // no query executed, show empty panel\n  if (queryResults.length === 0) {\n    return <></>;\n  }\n\n  if (isLoading || isFetching) {\n    return <LoadingOverlay />;\n  }\n\n  const queryError = queryResults.find((d) => d.error);\n  if (queryError) {\n    throw queryError.error;\n  }\n\n  const tracesFound = queryResults.some((traceData) => (traceData.data?.searchResult ?? []).length > 0);\n  if (!tracesFound) {\n    return <NoDataOverlay resource=\"traces\" />;\n  }\n\n  return (\n    <Stack sx={{ height: '100%' }} gap={2}>\n      <Box sx={{ height: '35%', flexShrink: 0 }}>\n        <Panel\n          panelOptions={{\n            hideHeader: true,\n          }}\n          definition={{\n            kind: 'Panel',\n            spec: { queries, display: { name: '' }, plugin: { kind: 'ScatterChart', spec: {} } },\n          }}\n        />\n      </Box>\n      <Panel\n        sx={{ flexGrow: 1 }}\n        panelOptions={{\n          hideHeader: true,\n        }}\n        definition={{\n          kind: 'Panel',\n          spec: { queries, display: { name: '' }, plugin: { kind: 'TraceTable', spec: {} } },\n        }}\n      />\n    </Stack>\n  );\n}\n\nfunction TracingGanttChartPanel({ queries }: { queries: QueryDefinition[] }): ReactElement {\n  return (\n    <Panel\n      panelOptions={{\n        hideHeader: true,\n      }}\n      definition={{\n        kind: 'Panel',\n        spec: { queries, display: { name: '' }, plugin: { kind: 'TracingGanttChart', spec: {} } },\n      }}\n    />\n  );\n}\n\nexport function TempoExplorer(): ReactElement {\n  const {\n    data: { queries = [] },\n    setData,\n  } = useExplorerManagerContext<TracesExplorerQueryParams>();\n\n  // map TraceQueryDefinition to Definition<UnknownSpec>\n  const definitions = queries.length\n    ? queries.map((query: QueryDefinition) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      })\n    : [];\n\n  // Cannot cast to TempoTraceQuerySpec because 'tempo-plugin' types are not accessible in @perses-dev/explore\n  const isSingleTrace =\n    queries.length === 1 &&\n    queries[0]?.kind === 'TraceQuery' &&\n    queries[0]?.spec.plugin.kind === 'TempoTraceQuery' &&\n    isValidTraceId((queries[0]?.spec.plugin.spec as any).query ?? ''); // eslint-disable-line @typescript-eslint/no-explicit-any\n\n  return (\n    <Stack gap={2} sx={{ width: '100%' }}>\n      <MultiQueryEditor\n        queryTypes={['TraceQuery']}\n        onChange={(newQueries) => setData({ queries: newQueries })}\n        queries={queries}\n      />\n\n      <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[queries]}>\n        <DataQueriesProvider definitions={definitions}>\n          <Box height={700}>\n            {isSingleTrace ? <TracingGanttChartPanel queries={queries} /> : <SearchResultsPanel queries={queries} />}\n          </Box>\n        </DataQueriesProvider>\n      </ErrorBoundary>\n    </Stack>\n  );\n}\n"],"names":["Box","Stack","ErrorAlert","ErrorBoundary","LoadingOverlay","NoDataOverlay","isValidTraceId","Panel","useExplorerManagerContext","DataQueriesProvider","MultiQueryEditor","useDataQueries","SearchResultsPanel","queries","isFetching","isLoading","queryResults","length","queryError","find","d","error","tracesFound","some","traceData","data","searchResult","resource","sx","height","gap","flexShrink","panelOptions","hideHeader","definition","kind","spec","display","name","plugin","flexGrow","TracingGanttChartPanel","TempoExplorer","setData","definitions","map","query","isSingleTrace","width","queryTypes","onChange","newQueries","FallbackComponent","resetKeys"],"mappings":"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"}
+{"version":3,"sources":["../../../src/explore/TempoExplorer.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 { Box, Stack } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary, LoadingOverlay, NoDataOverlay } from '@perses-dev/components';\nimport { QueryDefinition, isValidTraceId } from '@perses-dev/core';\nimport { Panel } from '@perses-dev/dashboards';\nimport { useExplorerManagerContext } from '@perses-dev/explore';\nimport { DataQueriesProvider, MultiQueryEditor, useDataQueries } from '@perses-dev/plugin-system';\nimport { ReactElement } from 'react';\nimport { TempoTraceQuerySpec } from '../model';\nimport { linkToSpan, linkToTrace } from './links';\n\ninterface TracesExplorerQueryParams {\n  queries?: QueryDefinition[];\n  spanId?: string;\n}\n\ninterface SearchResultsPanelProps {\n  queries: QueryDefinition[];\n}\n\nfunction SearchResultsPanel({ queries }: SearchResultsPanelProps): ReactElement {\n  const { isFetching, isLoading, queryResults } = useDataQueries('TraceQuery');\n\n  // no query executed, show empty panel\n  if (queryResults.length === 0) {\n    return <></>;\n  }\n\n  if (isLoading || isFetching) {\n    return <LoadingOverlay />;\n  }\n\n  const queryError = queryResults.find((d) => d.error);\n  if (queryError) {\n    throw queryError.error;\n  }\n\n  const tracesFound = queryResults.some((traceData) => (traceData.data?.searchResult ?? []).length > 0);\n  if (!tracesFound) {\n    return <NoDataOverlay resource=\"traces\" />;\n  }\n\n  return (\n    <Stack sx={{ height: '100%' }} gap={2}>\n      <Box sx={{ height: '35%', flexShrink: 0 }}>\n        <Panel\n          panelOptions={{\n            hideHeader: true,\n          }}\n          definition={{\n            kind: 'Panel',\n            spec: {\n              queries,\n              display: { name: '' },\n              plugin: {\n                kind: 'ScatterChart',\n                spec: {\n                  link: linkToTrace,\n                },\n              },\n            },\n          }}\n        />\n      </Box>\n      <Panel\n        sx={{ flexGrow: 1 }}\n        panelOptions={{\n          hideHeader: true,\n        }}\n        definition={{\n          kind: 'Panel',\n          spec: {\n            queries,\n            display: { name: '' },\n            plugin: {\n              kind: 'TraceTable',\n              spec: {\n                links: {\n                  trace: linkToTrace,\n                },\n              },\n            },\n          },\n        }}\n      />\n    </Stack>\n  );\n}\n\ninterface TracingGanttChartPanelProps {\n  queries: QueryDefinition[];\n  selectedSpanId?: string;\n}\n\nfunction TracingGanttChartPanel(props: TracingGanttChartPanelProps): ReactElement {\n  const { queries, selectedSpanId } = props;\n  const firstQuery = (queries[0]?.spec.plugin.spec as TempoTraceQuerySpec | undefined)?.query;\n\n  return (\n    <Panel\n      definition={{\n        kind: 'Panel',\n        spec: {\n          queries,\n          display: { name: `Trace ${firstQuery}` },\n          plugin: {\n            kind: 'TracingGanttChart',\n            spec: {\n              links: {\n                trace: linkToTrace,\n                span: linkToSpan,\n              },\n              selectedSpanId,\n            },\n          },\n        },\n      }}\n    />\n  );\n}\n\nexport function TempoExplorer(): ReactElement {\n  const {\n    data: { queries = [], spanId: selectedSpanId },\n    setData,\n  } = useExplorerManagerContext<TracesExplorerQueryParams>();\n\n  // map TraceQueryDefinition to Definition<UnknownSpec>\n  const definitions = queries.length\n    ? queries.map((query: QueryDefinition) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      })\n    : [];\n\n  const firstQuery = (queries[0]?.spec.plugin.spec as TempoTraceQuerySpec | undefined)?.query;\n  const isSingleTrace = isValidTraceId(firstQuery ?? '');\n\n  return (\n    <Stack gap={2} sx={{ width: '100%' }}>\n      <MultiQueryEditor\n        queryTypes={['TraceQuery']}\n        onChange={(newQueries) => setData({ queries: newQueries })}\n        queries={queries}\n      />\n\n      <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[queries]}>\n        <DataQueriesProvider definitions={definitions}>\n          <Box height={700}>\n            {isSingleTrace ? (\n              <TracingGanttChartPanel queries={queries} selectedSpanId={selectedSpanId} />\n            ) : (\n              <SearchResultsPanel queries={queries} />\n            )}\n          </Box>\n        </DataQueriesProvider>\n      </ErrorBoundary>\n    </Stack>\n  );\n}\n"],"names":["Box","Stack","ErrorAlert","ErrorBoundary","LoadingOverlay","NoDataOverlay","isValidTraceId","Panel","useExplorerManagerContext","DataQueriesProvider","MultiQueryEditor","useDataQueries","linkToSpan","linkToTrace","SearchResultsPanel","queries","isFetching","isLoading","queryResults","length","queryError","find","d","error","tracesFound","some","traceData","data","searchResult","resource","sx","height","gap","flexShrink","panelOptions","hideHeader","definition","kind","spec","display","name","plugin","link","flexGrow","links","trace","TracingGanttChartPanel","props","selectedSpanId","firstQuery","query","span","TempoExplorer","spanId","setData","definitions","map","isSingleTrace","width","queryTypes","onChange","newQueries","FallbackComponent","resetKeys"],"mappings":"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"}

package/lib/explore/links.d.ts

@@ -0,0 +1,3 @@
+export declare const linkToTrace: string;
+export declare const linkToSpan: string;
+//# sourceMappingURL=links.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"links.d.ts","sourceRoot":"","sources":["../../../src/explore/links.ts"],"names":[],"mappings":"AA6DA,eAAO,MAAM,WAAW,QAEW,CAAC;AAGpC,eAAO,MAAM,UAAU,QAGU,CAAC"}

package/lib/explore/links.js

@@ -0,0 +1,63 @@
+// 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.
+const linkToTraceParams = new URLSearchParams({
+    explorer: 'Tempo-TempoExplorer',
+    data: JSON.stringify({
+        queries: [
+            {
+                kind: 'TraceQuery',
+                spec: {
+                    plugin: {
+                        kind: 'TempoTraceQuery',
+                        spec: {
+                            query: 'TRACEID',
+                            datasource: {
+                                kind: 'TempoDatasource',
+                                name: 'DATASOURCENAME'
+                            }
+                        }
+                    }
+                }
+            }
+        ]
+    })
+});
+const linkToSpanParams = new URLSearchParams({
+    explorer: 'Tempo-TempoExplorer',
+    data: JSON.stringify({
+        queries: [
+            {
+                kind: 'TraceQuery',
+                spec: {
+                    plugin: {
+                        kind: 'TempoTraceQuery',
+                        spec: {
+                            query: 'TRACEID',
+                            datasource: {
+                                kind: 'TempoDatasource',
+                                name: 'DATASOURCENAME'
+                            }
+                        }
+                    }
+                }
+            }
+        ],
+        spanId: 'SPANID'
+    })
+});
+// add ${...} syntax after the URL is URL-encoded, because the characters ${} must not be URL-encoded
+export const linkToTrace = `/explore?${linkToTraceParams}`.replace('DATASOURCENAME', '${datasourceName}').replace('TRACEID', '${traceId}');
+// add ${...} syntax after the URL is URL-encoded, because the characters ${} must not be URL-encoded
+export const linkToSpan = `/explore?${linkToSpanParams}`.replace('DATASOURCENAME', '${datasourceName}').replace('TRACEID', '${traceId}').replace('SPANID', '${spanId}');
+
+//# sourceMappingURL=links.js.map

package/lib/explore/links.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/explore/links.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\nconst linkToTraceParams = new URLSearchParams({\n  explorer: 'Tempo-TempoExplorer',\n  data: JSON.stringify({\n    queries: [\n      {\n        kind: 'TraceQuery',\n        spec: {\n          plugin: {\n            kind: 'TempoTraceQuery',\n            spec: {\n              query: 'TRACEID',\n              datasource: {\n                kind: 'TempoDatasource',\n                name: 'DATASOURCENAME',\n              },\n            },\n          },\n        },\n      },\n    ],\n  }),\n});\n\nconst linkToSpanParams = new URLSearchParams({\n  explorer: 'Tempo-TempoExplorer',\n  data: JSON.stringify({\n    queries: [\n      {\n        kind: 'TraceQuery',\n        spec: {\n          plugin: {\n            kind: 'TempoTraceQuery',\n            spec: {\n              query: 'TRACEID',\n              datasource: {\n                kind: 'TempoDatasource',\n                name: 'DATASOURCENAME',\n              },\n            },\n          },\n        },\n      },\n    ],\n    spanId: 'SPANID',\n  }),\n});\n\n// add ${...} syntax after the URL is URL-encoded, because the characters ${} must not be URL-encoded\nexport const linkToTrace = `/explore?${linkToTraceParams}`\n  .replace('DATASOURCENAME', '${datasourceName}')\n  .replace('TRACEID', '${traceId}');\n\n// add ${...} syntax after the URL is URL-encoded, because the characters ${} must not be URL-encoded\nexport const linkToSpan = `/explore?${linkToSpanParams}`\n  .replace('DATASOURCENAME', '${datasourceName}')\n  .replace('TRACEID', '${traceId}')\n  .replace('SPANID', '${spanId}');\n"],"names":["linkToTraceParams","URLSearchParams","explorer","data","JSON","stringify","queries","kind","spec","plugin","query","datasource","name","linkToSpanParams","spanId","linkToTrace","replace","linkToSpan"],"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,MAAMA,oBAAoB,IAAIC,gBAAgB;IAC5CC,UAAU;IACVC,MAAMC,KAAKC,SAAS,CAAC;QACnBC,SAAS;YACP;gBACEC,MAAM;gBACNC,MAAM;oBACJC,QAAQ;wBACNF,MAAM;wBACNC,MAAM;4BACJE,OAAO;4BACPC,YAAY;gCACVJ,MAAM;gCACNK,MAAM;4BACR;wBACF;oBACF;gBACF;YACF;SACD;IACH;AACF;AAEA,MAAMC,mBAAmB,IAAIZ,gBAAgB;IAC3CC,UAAU;IACVC,MAAMC,KAAKC,SAAS,CAAC;QACnBC,SAAS;YACP;gBACEC,MAAM;gBACNC,MAAM;oBACJC,QAAQ;wBACNF,MAAM;wBACNC,MAAM;4BACJE,OAAO;4BACPC,YAAY;gCACVJ,MAAM;gCACNK,MAAM;4BACR;wBACF;oBACF;gBACF;YACF;SACD;QACDE,QAAQ;IACV;AACF;AAEA,qGAAqG;AACrG,OAAO,MAAMC,cAAc,CAAC,SAAS,EAAEf,mBAAmB,CACvDgB,OAAO,CAAC,kBAAkB,qBAC1BA,OAAO,CAAC,WAAW,cAAc;AAEpC,qGAAqG;AACrG,OAAO,MAAMC,aAAa,CAAC,SAAS,EAAEJ,kBAAkB,CACrDG,OAAO,CAAC,kBAAkB,qBAC1BA,OAAO,CAAC,WAAW,cACnBA,OAAO,CAAC,UAAU,aAAa"}

package/lib/plugins/tempo-trace-query/TempoTraceQueryEditor.d.ts

@@ -1,4 +1,10 @@
 import { ReactElement } from 'react';
 import { TraceQueryEditorProps } from './query-editor-model';
 export declare function TempoTraceQueryEditor(props: TraceQueryEditorProps): ReactElement;
+interface LimitSelectProps {
+    value: number;
+    setValue: (x: number) => void;
+}
+export declare function LimitSelect(props: LimitSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=TempoTraceQueryEditor.d.ts.map

package/lib/plugins/tempo-trace-query/TempoTraceQueryEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TempoTraceQueryEditor.d.ts","sourceRoot":"","sources":["../../../../src/plugins/tempo-trace-query/TempoTraceQueryEditor.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAS9C,OAAO,EAAE,qBAAqB,EAAgC,MAAM,sBAAsB,CAAC;AAE3F,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CA8DhF"}
+{"version":3,"file":"TempoTraceQueryEditor.d.ts","sourceRoot":"","sources":["../../../../src/plugins/tempo-trace-query/TempoTraceQueryEditor.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAE,YAAY,EAAyB,MAAM,OAAO,CAAC;AAY5D,OAAO,EAAE,qBAAqB,EAAiB,MAAM,sBAAsB,CAAC;AAE5E,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CA2FhF;AASD,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAyBlD"}

package/lib/plugins/tempo-trace-query/TempoTraceQueryEditor.js

@@ -11,33 +11,25 @@
 // 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 { FormControl, Stack, TextField } from '@mui/material';
+import { Box, Button, FormControl, InputLabel, MenuItem, Select, Stack } from '@mui/material';
 import { useId } from '@perses-dev/components';
-import { DatasourceSelect, useDatasourceClient, useDatasourceSelectValueToSelector, useTimeRange } from '@perses-dev/plugin-system';
+import { DatasourceSelect, useDatasourceClient, useDatasourceSelectValueToSelector } from '@perses-dev/plugin-system';
 import { produce } from 'immer';
-import { useMemo } from 'react';
+import { useCallback, useState } from 'react';
 import { TraceQLEditor } from '../../components';
 import { DEFAULT_TEMPO, isDefaultTempoSelector, isTempoDatasourceSelector, TEMPO_DATASOURCE_KIND } from '../../model/tempo-selectors';
-import { useLimitState, useQueryState } from './query-editor-model';
+import { AttributeFilters } from '../../components/AttributeFilters';
+import { filterToTraceQL } from '../../components/filter/filter_to_traceql';
+import { traceQLToFilter } from '../../components/filter/traceql_to_filter';
+import { useQueryState } from './query-editor-model';
 export function TempoTraceQueryEditor(props) {
-    const { onChange, value } = props;
-    const { datasource } = value;
+    const { onChange, value, value: { datasource, limit }, queryHandlerSettings } = props;
     const datasourceSelectValue = datasource ?? DEFAULT_TEMPO;
     const selectedDatasource = useDatasourceSelectValueToSelector(datasourceSelectValue, TEMPO_DATASOURCE_KIND);
     const datasourceSelectLabelID = useId('tempo-datasource-label'); // for panels with multiple queries, this component is rendered multiple times on the same page
     const { data: client } = useDatasourceClient(selectedDatasource);
-    const { timeRange } = useTimeRange();
-    const completionConfig = useMemo(()=>{
-        return {
-            client,
-            timeRange
-        };
-    }, [
-        client,
-        timeRange
-    ]);
     const { query, handleQueryChange, handleQueryBlur } = useQueryState(props);
-    const { limit, handleLimitChange, handleLimitBlur, limitHasError } = useLimitState(props);
+    const [showAttributeFilters, setShowAttributeFilters] = useState(()=>isSimpleTraceQLQuery(query));
     const handleDatasourceChange = (next)=>{
         if (isTempoDatasourceSelector(next)) {
             onChange(produce(value, (draft)=>{
@@ -49,6 +41,23 @@ export function TempoTraceQueryEditor(props) {
         }
         throw new Error('Got unexpected non-Tempo datasource selector');
     };
+    const runQuery = (newQuery)=>{
+        if (queryHandlerSettings?.watchQueryChanges) {
+            queryHandlerSettings.watchQueryChanges(newQuery);
+        }
+        onChange(produce(value, (draft)=>{
+            draft.query = newQuery;
+        }));
+    };
+    const handleTraceQueryChange = useCallback((e)=>{
+        handleQueryChange(e);
+        if (queryHandlerSettings?.watchQueryChanges) {
+            queryHandlerSettings.watchQueryChanges(e);
+        }
+    }, [
+        handleQueryChange,
+        queryHandlerSettings
+    ]);
     return /*#__PURE__*/ _jsxs(Stack, {
         spacing: 2,
         children: [
@@ -67,28 +76,75 @@ export function TempoTraceQueryEditor(props) {
             /*#__PURE__*/ _jsxs(Stack, {
                 direction: "row",
                 spacing: 2,
+                sx: {
+                    alignItems: 'flex-start'
+                },
                 children: [
-                    /*#__PURE__*/ _jsx(TraceQLEditor, {
-                        completionConfig: completionConfig,
+                    showAttributeFilters ? /*#__PURE__*/ _jsx(AttributeFilters, {
+                        client: client,
+                        query: query,
+                        setQuery: runQuery
+                    }) : /*#__PURE__*/ _jsx(TraceQLEditor, {
+                        client: client,
                         value: query,
-                        onChange: handleQueryChange,
-                        onBlur: handleQueryBlur
+                        onChange: handleTraceQueryChange,
+                        onBlur: queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        onClick: ()=>setShowAttributeFilters(!showAttributeFilters),
+                        children: showAttributeFilters ? 'Show query' : 'Hide query'
                     }),
-                    /*#__PURE__*/ _jsx(TextField, {
-                        size: "small",
-                        label: "Max Traces",
-                        value: limit,
-                        error: limitHasError,
-                        onChange: (e)=>handleLimitChange(e.target.value),
-                        onBlur: handleLimitBlur,
-                        sx: {
-                            width: '110px'
-                        }
+                    /*#__PURE__*/ _jsx(LimitSelect, {
+                        value: limit ?? 20,
+                        setValue: (newLimit)=>onChange(produce(value, (draft)=>{
+                                draft.limit = newLimit;
+                            }))
                     })
                 ]
             })
         ]
     });
 }
+function isSimpleTraceQLQuery(query) {
+    // if a query can be transformed to a filter and back to the original query, we can show the attribute filter toolbar
+    return query == '' || filterToTraceQL(traceQLToFilter(query)) === query;
+}
+const limitOptions = [
+    20,
+    50,
+    100,
+    500,
+    1000,
+    5000
+];
+export function LimitSelect(props) {
+    const { value, setValue } = props;
+    // the outer <Box> is required, because <FormControl> has display: inline-flex, which doesn't work with the parent <Stack> of the query editor
+    return /*#__PURE__*/ _jsx(Box, {
+        children: /*#__PURE__*/ _jsxs(FormControl, {
+            size: "small",
+            children: [
+                /*#__PURE__*/ _jsx(InputLabel, {
+                    id: "max-traces-label",
+                    children: "Max Traces"
+                }),
+                /*#__PURE__*/ _jsx(Select, {
+                    labelId: "max-traces-label",
+                    id: "max-traces-select",
+                    value: value,
+                    label: "Max Traces",
+                    onChange: (e)=>setValue(typeof e.target.value === 'number' ? e.target.value : parseInt(e.target.value)),
+                    sx: {
+                        width: 110
+                    },
+                    children: limitOptions.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
+                            value: option,
+                            children: option
+                        }, option))
+                })
+            ]
+        })
+    });
+}
 
 //# sourceMappingURL=TempoTraceQueryEditor.js.map

package/lib/plugins/tempo-trace-query/TempoTraceQueryEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/plugins/tempo-trace-query/TempoTraceQueryEditor.tsx"],"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 { FormControl, Stack, TextField } from '@mui/material';\nimport { useId } from '@perses-dev/components';\nimport {\n  DatasourceSelect,\n  DatasourceSelectProps,\n  useDatasourceClient,\n  useDatasourceSelectValueToSelector,\n  useTimeRange,\n} from '@perses-dev/plugin-system';\nimport { produce } from 'immer';\nimport { ReactElement, useMemo } from 'react';\nimport { TraceQLEditor } from '../../components';\nimport { TempoClient } from '../../model/tempo-client';\nimport {\n  DEFAULT_TEMPO,\n  isDefaultTempoSelector,\n  isTempoDatasourceSelector,\n  TEMPO_DATASOURCE_KIND,\n} from '../../model/tempo-selectors';\nimport { TraceQueryEditorProps, useLimitState, useQueryState } from './query-editor-model';\n\nexport function TempoTraceQueryEditor(props: TraceQueryEditorProps): ReactElement {\n  const { onChange, value } = props;\n  const { datasource } = value;\n  const datasourceSelectValue = datasource ?? DEFAULT_TEMPO;\n  const selectedDatasource = useDatasourceSelectValueToSelector(datasourceSelectValue, TEMPO_DATASOURCE_KIND);\n  const datasourceSelectLabelID = useId('tempo-datasource-label'); // for panels with multiple queries, this component is rendered multiple times on the same page\n\n  const { data: client } = useDatasourceClient<TempoClient>(selectedDatasource);\n  const { timeRange } = useTimeRange();\n  const completionConfig = useMemo(() => {\n    return { client, timeRange };\n  }, [client, timeRange]);\n\n  const { query, handleQueryChange, handleQueryBlur } = useQueryState(props);\n  const { limit, handleLimitChange, handleLimitBlur, limitHasError } = useLimitState(props);\n\n  const handleDatasourceChange: DatasourceSelectProps['onChange'] = (next) => {\n    if (isTempoDatasourceSelector(next)) {\n      onChange(\n        produce(value, (draft) => {\n          // If they're using the default, just omit the datasource prop (i.e. set to undefined)\n          const nextDatasource = isDefaultTempoSelector(next) ? undefined : next;\n          draft.datasource = nextDatasource;\n        })\n      );\n      return;\n    }\n\n    throw new Error('Got unexpected non-Tempo datasource selector');\n  };\n\n  return (\n    <Stack spacing={2}>\n      <FormControl margin=\"dense\" fullWidth={false}>\n        <DatasourceSelect\n          datasourcePluginKind={TEMPO_DATASOURCE_KIND}\n          value={datasourceSelectValue}\n          onChange={handleDatasourceChange}\n          labelId={datasourceSelectLabelID}\n          label=\"Tempo Datasource\"\n          notched\n        />\n      </FormControl>\n      <Stack direction=\"row\" spacing={2}>\n        <TraceQLEditor\n          completionConfig={completionConfig}\n          value={query}\n          onChange={handleQueryChange}\n          onBlur={handleQueryBlur}\n        />\n        <TextField\n          size=\"small\"\n          label=\"Max Traces\"\n          value={limit}\n          error={limitHasError}\n          onChange={(e) => handleLimitChange(e.target.value)}\n          onBlur={handleLimitBlur}\n          sx={{ width: '110px' }}\n        />\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["FormControl","Stack","TextField","useId","DatasourceSelect","useDatasourceClient","useDatasourceSelectValueToSelector","useTimeRange","produce","useMemo","TraceQLEditor","DEFAULT_TEMPO","isDefaultTempoSelector","isTempoDatasourceSelector","TEMPO_DATASOURCE_KIND","useLimitState","useQueryState","TempoTraceQueryEditor","props","onChange","value","datasource","datasourceSelectValue","selectedDatasource","datasourceSelectLabelID","data","client","timeRange","completionConfig","query","handleQueryChange","handleQueryBlur","limit","handleLimitChange","handleLimitBlur","limitHasError","handleDatasourceChange","next","draft","nextDatasource","undefined","Error","spacing","margin","fullWidth","datasourcePluginKind","labelId","label","notched","direction","onBlur","size","error","e","target","sx","width"],"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,WAAW,EAAEC,KAAK,EAAEC,SAAS,QAAQ,gBAAgB;AAC9D,SAASC,KAAK,QAAQ,yBAAyB;AAC/C,SACEC,gBAAgB,EAEhBC,mBAAmB,EACnBC,kCAAkC,EAClCC,YAAY,QACP,4BAA4B;AACnC,SAASC,OAAO,QAAQ,QAAQ;AAChC,SAAuBC,OAAO,QAAQ,QAAQ;AAC9C,SAASC,aAAa,QAAQ,mBAAmB;AAEjD,SACEC,aAAa,EACbC,sBAAsB,EACtBC,yBAAyB,EACzBC,qBAAqB,QAChB,8BAA8B;AACrC,SAAgCC,aAAa,EAAEC,aAAa,QAAQ,uBAAuB;AAE3F,OAAO,SAASC,sBAAsBC,KAA4B;IAChE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAC5B,MAAM,EAAEG,UAAU,EAAE,GAAGD;IACvB,MAAME,wBAAwBD,cAAcV;IAC5C,MAAMY,qBAAqBjB,mCAAmCgB,uBAAuBR;IACrF,MAAMU,0BAA0BrB,MAAM,2BAA2B,+FAA+F;IAEhK,MAAM,EAAEsB,MAAMC,MAAM,EAAE,GAAGrB,oBAAiCkB;IAC1D,MAAM,EAAEI,SAAS,EAAE,GAAGpB;IACtB,MAAMqB,mBAAmBnB,QAAQ;QAC/B,OAAO;YAAEiB;YAAQC;QAAU;IAC7B,GAAG;QAACD;QAAQC;KAAU;IAEtB,MAAM,EAAEE,KAAK,EAAEC,iBAAiB,EAAEC,eAAe,EAAE,GAAGf,cAAcE;IACpE,MAAM,EAAEc,KAAK,EAAEC,iBAAiB,EAAEC,eAAe,EAAEC,aAAa,EAAE,GAAGpB,cAAcG;IAEnF,MAAMkB,yBAA4D,CAACC;QACjE,IAAIxB,0BAA0BwB,OAAO;YACnClB,SACEX,QAAQY,OAAO,CAACkB;gBACd,sFAAsF;gBACtF,MAAMC,iBAAiB3B,uBAAuByB,QAAQG,YAAYH;gBAClEC,MAAMjB,UAAU,GAAGkB;YACrB;YAEF;QACF;QAEA,MAAM,IAAIE,MAAM;IAClB;IAEA,qBACE,MAACxC;QAAMyC,SAAS;;0BACd,KAAC1C;gBAAY2C,QAAO;gBAAQC,WAAW;0BACrC,cAAA,KAACxC;oBACCyC,sBAAsB/B;oBACtBM,OAAOE;oBACPH,UAAUiB;oBACVU,SAAStB;oBACTuB,OAAM;oBACNC,OAAO;;;0BAGX,MAAC/C;gBAAMgD,WAAU;gBAAMP,SAAS;;kCAC9B,KAAChC;wBACCkB,kBAAkBA;wBAClBR,OAAOS;wBACPV,UAAUW;wBACVoB,QAAQnB;;kCAEV,KAAC7B;wBACCiD,MAAK;wBACLJ,OAAM;wBACN3B,OAAOY;wBACPoB,OAAOjB;wBACPhB,UAAU,CAACkC,IAAMpB,kBAAkBoB,EAAEC,MAAM,CAAClC,KAAK;wBACjD8B,QAAQhB;wBACRqB,IAAI;4BAAEC,OAAO;wBAAQ;;;;;;AAK/B"}
+{"version":3,"sources":["../../../../src/plugins/tempo-trace-query/TempoTraceQueryEditor.tsx"],"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 { Box, Button, FormControl, InputLabel, MenuItem, Select, Stack } from '@mui/material';\nimport { useId } from '@perses-dev/components';\nimport {\n  DatasourceSelect,\n  DatasourceSelectProps,\n  useDatasourceClient,\n  useDatasourceSelectValueToSelector,\n} from '@perses-dev/plugin-system';\nimport { produce } from 'immer';\nimport { ReactElement, useCallback, useState } from 'react';\nimport { TraceQLEditor } from '../../components';\nimport { TempoClient } from '../../model/tempo-client';\nimport {\n  DEFAULT_TEMPO,\n  isDefaultTempoSelector,\n  isTempoDatasourceSelector,\n  TEMPO_DATASOURCE_KIND,\n} from '../../model/tempo-selectors';\nimport { AttributeFilters } from '../../components/AttributeFilters';\nimport { filterToTraceQL } from '../../components/filter/filter_to_traceql';\nimport { traceQLToFilter } from '../../components/filter/traceql_to_filter';\nimport { TraceQueryEditorProps, useQueryState } from './query-editor-model';\n\nexport function TempoTraceQueryEditor(props: TraceQueryEditorProps): ReactElement {\n  const {\n    onChange,\n    value,\n    value: { datasource, limit },\n    queryHandlerSettings,\n  } = props;\n\n  const datasourceSelectValue = datasource ?? DEFAULT_TEMPO;\n  const selectedDatasource = useDatasourceSelectValueToSelector(datasourceSelectValue, TEMPO_DATASOURCE_KIND);\n  const datasourceSelectLabelID = useId('tempo-datasource-label'); // for panels with multiple queries, this component is rendered multiple times on the same page\n\n  const { data: client } = useDatasourceClient<TempoClient>(selectedDatasource);\n  const { query, handleQueryChange, handleQueryBlur } = useQueryState(props);\n  const [showAttributeFilters, setShowAttributeFilters] = useState(() => isSimpleTraceQLQuery(query));\n\n  const handleDatasourceChange: DatasourceSelectProps['onChange'] = (next) => {\n    if (isTempoDatasourceSelector(next)) {\n      onChange(\n        produce(value, (draft) => {\n          // If they're using the default, just omit the datasource prop (i.e. set to undefined)\n          const nextDatasource = isDefaultTempoSelector(next) ? undefined : next;\n          draft.datasource = nextDatasource;\n        })\n      );\n      return;\n    }\n\n    throw new Error('Got unexpected non-Tempo datasource selector');\n  };\n\n  const runQuery = (newQuery: string) => {\n    if (queryHandlerSettings?.watchQueryChanges) {\n      queryHandlerSettings.watchQueryChanges(newQuery);\n    }\n    onChange(\n      produce(value, (draft) => {\n        draft.query = newQuery;\n      })\n    );\n  };\n\n  const handleTraceQueryChange = useCallback(\n    (e: string) => {\n      handleQueryChange(e);\n      if (queryHandlerSettings?.watchQueryChanges) {\n        queryHandlerSettings.watchQueryChanges(e);\n      }\n    },\n    [handleQueryChange, queryHandlerSettings]\n  );\n\n  return (\n    <Stack spacing={2}>\n      <FormControl margin=\"dense\" fullWidth={false}>\n        <DatasourceSelect\n          datasourcePluginKind={TEMPO_DATASOURCE_KIND}\n          value={datasourceSelectValue}\n          onChange={handleDatasourceChange}\n          labelId={datasourceSelectLabelID}\n          label=\"Tempo Datasource\"\n          notched\n        />\n      </FormControl>\n      <Stack direction=\"row\" spacing={2} sx={{ alignItems: 'flex-start' }}>\n        {showAttributeFilters ? (\n          <AttributeFilters client={client} query={query} setQuery={runQuery} />\n        ) : (\n          <TraceQLEditor\n            client={client}\n            value={query}\n            onChange={handleTraceQueryChange}\n            onBlur={queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined}\n          />\n        )}\n        <Button onClick={() => setShowAttributeFilters(!showAttributeFilters)}>\n          {showAttributeFilters ? 'Show query' : 'Hide query'}\n        </Button>\n        <LimitSelect\n          value={limit ?? 20}\n          setValue={(newLimit: number) =>\n            onChange(\n              produce(value, (draft) => {\n                draft.limit = newLimit;\n              })\n            )\n          }\n        />\n      </Stack>\n    </Stack>\n  );\n}\n\nfunction isSimpleTraceQLQuery(query: string) {\n  // if a query can be transformed to a filter and back to the original query, we can show the attribute filter toolbar\n  return query == '' || filterToTraceQL(traceQLToFilter(query)) === query;\n}\n\nconst limitOptions = [20, 50, 100, 500, 1000, 5000];\n\ninterface LimitSelectProps {\n  value: number;\n  setValue: (x: number) => void;\n}\n\nexport function LimitSelect(props: LimitSelectProps) {\n  const { value, setValue } = props;\n\n  // the outer <Box> is required, because <FormControl> has display: inline-flex, which doesn't work with the parent <Stack> of the query editor\n  return (\n    <Box>\n      <FormControl size=\"small\">\n        <InputLabel id=\"max-traces-label\">Max Traces</InputLabel>\n        <Select\n          labelId=\"max-traces-label\"\n          id=\"max-traces-select\"\n          value={value}\n          label=\"Max Traces\"\n          onChange={(e) => setValue(typeof e.target.value === 'number' ? e.target.value : parseInt(e.target.value))}\n          sx={{ width: 110 }}\n        >\n          {limitOptions.map((option) => (\n            <MenuItem key={option} value={option}>\n              {option}\n            </MenuItem>\n          ))}\n        </Select>\n      </FormControl>\n    </Box>\n  );\n}\n"],"names":["Box","Button","FormControl","InputLabel","MenuItem","Select","Stack","useId","DatasourceSelect","useDatasourceClient","useDatasourceSelectValueToSelector","produce","useCallback","useState","TraceQLEditor","DEFAULT_TEMPO","isDefaultTempoSelector","isTempoDatasourceSelector","TEMPO_DATASOURCE_KIND","AttributeFilters","filterToTraceQL","traceQLToFilter","useQueryState","TempoTraceQueryEditor","props","onChange","value","datasource","limit","queryHandlerSettings","datasourceSelectValue","selectedDatasource","datasourceSelectLabelID","data","client","query","handleQueryChange","handleQueryBlur","showAttributeFilters","setShowAttributeFilters","isSimpleTraceQLQuery","handleDatasourceChange","next","draft","nextDatasource","undefined","Error","runQuery","newQuery","watchQueryChanges","handleTraceQueryChange","e","spacing","margin","fullWidth","datasourcePluginKind","labelId","label","notched","direction","sx","alignItems","setQuery","onBlur","runWithOnBlur","onClick","LimitSelect","setValue","newLimit","limitOptions","size","id","target","parseInt","width","map","option"],"mappings":"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"}

package/lib/plugins/tempo-trace-query/get-trace-data.js

@@ -95,6 +95,14 @@ function parseTraceResponse(response) {
                 if (span.parentSpanId && span.parentSpanId.length != 16) {
                     span.parentSpanId = base64ToHex(span.parentSpanId);
                 }
+                for (const link of span.links ?? []){
+                    if (link.traceId.length != 32) {
+                        link.traceId = base64ToHex(link.traceId);
+                    }
+                    if (link.spanId.length != 16) {
+                        link.spanId = base64ToHex(link.spanId);
+                    }
+                }
             }
         }
     }

package/lib/plugins/tempo-trace-query/get-trace-data.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/plugins/tempo-trace-query/get-trace-data.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 { AbsoluteTimeRange, isValidTraceId, otlptracev1, TraceSearchResult } from '@perses-dev/core';\nimport { datasourceSelectValueToSelector, TraceQueryPlugin } from '@perses-dev/plugin-system';\nimport { getUnixTime } from 'date-fns';\nimport { TEMPO_DATASOURCE_KIND, TempoDatasourceSelector, TempoTraceQuerySpec } from '../../model';\nimport { QueryResponse, SearchRequestParameters, SearchResponse } from '../../model/api-types';\nimport { TempoClient } from '../../model/tempo-client';\n\nexport function getUnixTimeRange(timeRange: AbsoluteTimeRange): { start: number; end: number } {\n  const { start, end } = timeRange;\n  return {\n    start: Math.ceil(getUnixTime(start)),\n    end: Math.ceil(getUnixTime(end)),\n  };\n}\n\nexport const getTraceData: TraceQueryPlugin<TempoTraceQuerySpec>['getTraceData'] = async (spec, context) => {\n  if (spec.query === undefined || spec.query === null || spec.query === '') {\n    // Do not make a request to the backend, instead return an empty TraceData\n    console.error('TempoTraceQuery is undefined, null, or an empty string.');\n    return { searchResult: [] };\n  }\n\n  const defaultTempoDatasource: TempoDatasourceSelector = {\n    kind: TEMPO_DATASOURCE_KIND,\n  };\n\n  const listDatasourceSelectItems = await context.datasourceStore.listDatasourceSelectItems(TEMPO_DATASOURCE_KIND);\n  const datasourceSelector =\n    datasourceSelectValueToSelector(spec.datasource, context.variableState, listDatasourceSelectItems) ??\n    defaultTempoDatasource;\n\n  const client = await context.datasourceStore.getDatasourceClient<TempoClient>(datasourceSelector);\n\n  const getQuery = (): SearchRequestParameters => {\n    const params: SearchRequestParameters = {\n      q: spec.query,\n    };\n\n    // handle time range selection from UI drop down (e.g. last 5 minutes, last 1 hour )\n    if (context.absoluteTimeRange) {\n      const { start, end } = getUnixTimeRange(context.absoluteTimeRange);\n      params.start = start;\n      params.end = end;\n    }\n\n    if (spec.limit) {\n      params.limit = spec.limit;\n    }\n\n    return params;\n  };\n\n  /**\n   * determine type of query:\n   * if the query is a valid traceId, fetch the trace by traceId\n   * otherwise, execute a TraceQL query\n   */\n  if (isValidTraceId(spec.query)) {\n    const response = await client.query({ traceId: spec.query });\n    return {\n      trace: parseTraceResponse(response),\n      metadata: {\n        executedQueryString: spec.query,\n      },\n    };\n  } else {\n    const response = await client.searchWithFallback(getQuery());\n    return {\n      searchResult: parseSearchResponse(response),\n      metadata: {\n        executedQueryString: spec.query,\n      },\n    };\n  }\n};\n\nfunction parseTraceResponse(response: QueryResponse): otlptracev1.TracesData {\n  const trace = {\n    resourceSpans: response.batches,\n  };\n\n  // Tempo returns Trace ID and Span ID base64-encoded.\n  // The OTLP spec defines the encoding in the hex format:\n  // Spec: https://opentelemetry.io/docs/specs/otlp/#json-protobuf-encoding\n  // Example: https://github.com/open-telemetry/opentelemetry-proto/blob/v1.7.0/examples/trace.json\n  // Therefore, let's convert it to hex encoding.\n  for (const resourceSpan of trace.resourceSpans) {\n    for (const scopeSpan of resourceSpan.scopeSpans) {\n      for (const span of scopeSpan.spans) {\n        if (span.traceId.length != 32) {\n          span.traceId = base64ToHex(span.traceId);\n        }\n\n        if (span.spanId.length != 16) {\n          span.spanId = base64ToHex(span.spanId);\n        }\n\n        if (span.parentSpanId && span.parentSpanId.length != 16) {\n          span.parentSpanId = base64ToHex(span.parentSpanId);\n        }\n      }\n    }\n  }\n\n  return trace;\n}\n\nfunction base64ToHex(str: string) {\n  try {\n    return atob(str)\n      .split('')\n      .map((char) => char.charCodeAt(0).toString(16).padStart(2, '0').toUpperCase())\n      .join('');\n  } catch {\n    return str;\n  }\n}\n\nfunction parseSearchResponse(response: SearchResponse): TraceSearchResult[] {\n  return response.traces.map((trace) => ({\n    startTimeUnixMs: parseInt(trace.startTimeUnixNano) * 1e-6, // convert to millisecond for eChart time format,\n    durationMs: trace.durationMs ?? 0, // Tempo API doesn't return 0 values\n    traceId: trace.traceID,\n    rootServiceName: trace.rootServiceName,\n    rootTraceName: trace.rootTraceName,\n    serviceStats: trace.serviceStats || {},\n  }));\n}\n"],"names":["isValidTraceId","datasourceSelectValueToSelector","getUnixTime","TEMPO_DATASOURCE_KIND","getUnixTimeRange","timeRange","start","end","Math","ceil","getTraceData","spec","context","query","undefined","console","error","searchResult","defaultTempoDatasource","kind","listDatasourceSelectItems","datasourceStore","datasourceSelector","datasource","variableState","client","getDatasourceClient","getQuery","params","q","absoluteTimeRange","limit","response","traceId","trace","parseTraceResponse","metadata","executedQueryString","searchWithFallback","parseSearchResponse","resourceSpans","batches","resourceSpan","scopeSpan","scopeSpans","span","spans","length","base64ToHex","spanId","parentSpanId","str","atob","split","map","char","charCodeAt","toString","padStart","toUpperCase","join","traces","startTimeUnixMs","parseInt","startTimeUnixNano","durationMs","traceID","rootServiceName","rootTraceName","serviceStats"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/plugins/tempo-trace-query/get-trace-data.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 { AbsoluteTimeRange, isValidTraceId, otlptracev1, TraceSearchResult } from '@perses-dev/core';\nimport { datasourceSelectValueToSelector, TraceQueryPlugin } from '@perses-dev/plugin-system';\nimport { getUnixTime } from 'date-fns';\nimport { TEMPO_DATASOURCE_KIND, TempoDatasourceSelector, TempoTraceQuerySpec } from '../../model';\nimport { QueryResponse, SearchRequestParameters, SearchResponse } from '../../model/api-types';\nimport { TempoClient } from '../../model/tempo-client';\n\nexport function getUnixTimeRange(timeRange: AbsoluteTimeRange): { start: number; end: number } {\n  const { start, end } = timeRange;\n  return {\n    start: Math.ceil(getUnixTime(start)),\n    end: Math.ceil(getUnixTime(end)),\n  };\n}\n\nexport const getTraceData: TraceQueryPlugin<TempoTraceQuerySpec>['getTraceData'] = async (spec, context) => {\n  if (spec.query === undefined || spec.query === null || spec.query === '') {\n    // Do not make a request to the backend, instead return an empty TraceData\n    console.error('TempoTraceQuery is undefined, null, or an empty string.');\n    return { searchResult: [] };\n  }\n\n  const defaultTempoDatasource: TempoDatasourceSelector = {\n    kind: TEMPO_DATASOURCE_KIND,\n  };\n\n  const listDatasourceSelectItems = await context.datasourceStore.listDatasourceSelectItems(TEMPO_DATASOURCE_KIND);\n  const datasourceSelector =\n    datasourceSelectValueToSelector(spec.datasource, context.variableState, listDatasourceSelectItems) ??\n    defaultTempoDatasource;\n\n  const client = await context.datasourceStore.getDatasourceClient<TempoClient>(datasourceSelector);\n\n  const getQuery = (): SearchRequestParameters => {\n    const params: SearchRequestParameters = {\n      q: spec.query,\n    };\n\n    // handle time range selection from UI drop down (e.g. last 5 minutes, last 1 hour )\n    if (context.absoluteTimeRange) {\n      const { start, end } = getUnixTimeRange(context.absoluteTimeRange);\n      params.start = start;\n      params.end = end;\n    }\n\n    if (spec.limit) {\n      params.limit = spec.limit;\n    }\n\n    return params;\n  };\n\n  /**\n   * determine type of query:\n   * if the query is a valid traceId, fetch the trace by traceId\n   * otherwise, execute a TraceQL query\n   */\n  if (isValidTraceId(spec.query)) {\n    const response = await client.query({ traceId: spec.query });\n    return {\n      trace: parseTraceResponse(response),\n      metadata: {\n        executedQueryString: spec.query,\n      },\n    };\n  } else {\n    const response = await client.searchWithFallback(getQuery());\n    return {\n      searchResult: parseSearchResponse(response),\n      metadata: {\n        executedQueryString: spec.query,\n      },\n    };\n  }\n};\n\nfunction parseTraceResponse(response: QueryResponse): otlptracev1.TracesData {\n  const trace = {\n    resourceSpans: response.batches,\n  };\n\n  // Tempo returns Trace ID and Span ID base64-encoded.\n  // The OTLP spec defines the encoding in the hex format:\n  // Spec: https://opentelemetry.io/docs/specs/otlp/#json-protobuf-encoding\n  // Example: https://github.com/open-telemetry/opentelemetry-proto/blob/v1.7.0/examples/trace.json\n  // Therefore, let's convert it to hex encoding.\n  for (const resourceSpan of trace.resourceSpans) {\n    for (const scopeSpan of resourceSpan.scopeSpans) {\n      for (const span of scopeSpan.spans) {\n        if (span.traceId.length != 32) {\n          span.traceId = base64ToHex(span.traceId);\n        }\n        if (span.spanId.length != 16) {\n          span.spanId = base64ToHex(span.spanId);\n        }\n        if (span.parentSpanId && span.parentSpanId.length != 16) {\n          span.parentSpanId = base64ToHex(span.parentSpanId);\n        }\n\n        for (const link of span.links ?? []) {\n          if (link.traceId.length != 32) {\n            link.traceId = base64ToHex(link.traceId);\n          }\n          if (link.spanId.length != 16) {\n            link.spanId = base64ToHex(link.spanId);\n          }\n        }\n      }\n    }\n  }\n\n  return trace;\n}\n\nfunction base64ToHex(str: string) {\n  try {\n    return atob(str)\n      .split('')\n      .map((char) => char.charCodeAt(0).toString(16).padStart(2, '0').toUpperCase())\n      .join('');\n  } catch {\n    return str;\n  }\n}\n\nfunction parseSearchResponse(response: SearchResponse): TraceSearchResult[] {\n  return response.traces.map((trace) => ({\n    startTimeUnixMs: parseInt(trace.startTimeUnixNano) * 1e-6, // convert to millisecond for eChart time format,\n    durationMs: trace.durationMs ?? 0, // Tempo API doesn't return 0 values\n    traceId: trace.traceID,\n    rootServiceName: trace.rootServiceName,\n    rootTraceName: trace.rootTraceName,\n    serviceStats: trace.serviceStats || {},\n  }));\n}\n"],"names":["isValidTraceId","datasourceSelectValueToSelector","getUnixTime","TEMPO_DATASOURCE_KIND","getUnixTimeRange","timeRange","start","end","Math","ceil","getTraceData","spec","context","query","undefined","console","error","searchResult","defaultTempoDatasource","kind","listDatasourceSelectItems","datasourceStore","datasourceSelector","datasource","variableState","client","getDatasourceClient","getQuery","params","q","absoluteTimeRange","limit","response","traceId","trace","parseTraceResponse","metadata","executedQueryString","searchWithFallback","parseSearchResponse","resourceSpans","batches","resourceSpan","scopeSpan","scopeSpans","span","spans","length","base64ToHex","spanId","parentSpanId","link","links","str","atob","split","map","char","charCodeAt","toString","padStart","toUpperCase","join","traces","startTimeUnixMs","parseInt","startTimeUnixNano","durationMs","traceID","rootServiceName","rootTraceName","serviceStats"],"mappings":"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"}

package/lib/plugins/tempo-trace-query/query-editor-model.d.ts

@@ -12,13 +12,4 @@ export declare function useQueryState(props: TraceQueryEditorProps): {
     handleQueryChange: (e: string) => void;
     handleQueryBlur: () => void;
 };
-/**
- * Hook to manage `limit` state to ensure panel preview does not rerender until text input is blurred
- */
-export declare function useLimitState(props: TraceQueryEditorProps): {
-    limit: string;
-    handleLimitChange: (e: string) => void;
-    handleLimitBlur: () => void;
-    limitHasError: boolean;
-};
 //# sourceMappingURL=query-editor-model.d.ts.map

package/lib/plugins/tempo-trace-query/query-editor-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"query-editor-model.d.ts","sourceRoot":"","sources":["../../../../src/plugins/tempo-trace-query/query-editor-model.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAEpE,MAAM,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;AAE5E;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,qBAAqB,GAAG;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CA+BA;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,qBAAqB,GAAG;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,aAAa,EAAE,OAAO,CAAC;CACxB,CAmCA"}
+{"version":3,"file":"query-editor-model.d.ts","sourceRoot":"","sources":["../../../../src/plugins/tempo-trace-query/query-editor-model.ts"],"names":[],"mappings":"AAeA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAEpE,MAAM,MAAM,qBAAqB,GAAG,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;AAE5E;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,qBAAqB,GAAG;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B,CA+BA"}