@perses-dev/tempo-plugin 0.52.0 → 0.53.0

package/lib/cjs/explore/TempoExplorer.js

@@ -27,6 +27,7 @@ const _core = require("@perses-dev/core");
 const _dashboards = require("@perses-dev/dashboards");
 const _explore = require("@perses-dev/explore");
 const _pluginsystem = require("@perses-dev/plugin-system");
+const _links = require("./links");
 function SearchResultsPanel({ queries }) {
     const { isFetching, isLoading, queryResults } = (0, _pluginsystem.useDataQueries)('TraceQuery');
     // no query executed, show empty panel
@@ -70,7 +71,9 @@ function SearchResultsPanel({ queries }) {
                             },
                             plugin: {
                                 kind: 'ScatterChart',
-                                spec: {}
+                                spec: {
+                                    link: _links.linkToTrace
+                                }
                             }
                         }
                     }
@@ -92,7 +95,11 @@ function SearchResultsPanel({ queries }) {
                         },
                         plugin: {
                             kind: 'TraceTable',
-                            spec: {}
+                            spec: {
+                                links: {
+                                    trace: _links.linkToTrace
+                                }
+                            }
                         }
                     }
                 }
@@ -100,28 +107,33 @@ function SearchResultsPanel({ queries }) {
         ]
     });
 }
-function TracingGanttChartPanel({ queries }) {
+function TracingGanttChartPanel(props) {
+    const { queries, selectedSpanId } = props;
+    const firstQuery = queries[0]?.spec.plugin.spec?.query;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.Panel, {
-        panelOptions: {
-            hideHeader: true
-        },
         definition: {
             kind: 'Panel',
             spec: {
                 queries,
                 display: {
-                    name: ''
+                    name: `Trace ${firstQuery}`
                 },
                 plugin: {
                     kind: 'TracingGanttChart',
-                    spec: {}
+                    spec: {
+                        links: {
+                            trace: _links.linkToTrace,
+                            span: _links.linkToSpan
+                        },
+                        selectedSpanId
+                    }
                 }
             }
         }
     });
 }
 function TempoExplorer() {
-    const { data: { queries = [] }, setData } = (0, _explore.useExplorerManagerContext)();
+    const { data: { queries = [], spanId: selectedSpanId }, setData } = (0, _explore.useExplorerManagerContext)();
     // map TraceQueryDefinition to Definition<UnknownSpec>
     const definitions = queries.length ? queries.map((query)=>{
         return {
@@ -129,8 +141,8 @@ 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' && (0, _core.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 = (0, _core.isValidTraceId)(firstQuery ?? '');
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         gap: 2,
         sx: {
@@ -156,7 +168,8 @@ function TempoExplorer() {
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                         height: 700,
                         children: isSingleTrace ? /*#__PURE__*/ (0, _jsxruntime.jsx)(TracingGanttChartPanel, {
-                            queries: queries
+                            queries: queries,
+                            selectedSpanId: selectedSpanId
                         }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(SearchResultsPanel, {
                             queries: queries
                         })

package/lib/cjs/explore/links.js

@@ -0,0 +1,77 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    linkToSpan: function() {
+        return linkToSpan;
+    },
+    linkToTrace: function() {
+        return linkToTrace;
+    }
+});
+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'
+    })
+});
+const linkToTrace = `/explore?${linkToTraceParams}`.replace('DATASOURCENAME', '${datasourceName}').replace('TRACEID', '${traceId}');
+const linkToSpan = `/explore?${linkToSpanParams}`.replace('DATASOURCENAME', '${datasourceName}').replace('TRACEID', '${traceId}').replace('SPANID', '${spanId}');

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

@@ -14,9 +14,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "TempoTraceQueryEditor", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    LimitSelect: function() {
+        return LimitSelect;
+    },
+    TempoTraceQueryEditor: function() {
         return TempoTraceQueryEditor;
     }
 });
@@ -28,26 +36,18 @@ const _immer = require("immer");
 const _react = require("react");
 const _components1 = require("../../components");
 const _temposelectors = require("../../model/tempo-selectors");
+const _AttributeFilters = require("../../components/AttributeFilters");
+const _filter_to_traceql = require("../../components/filter/filter_to_traceql");
+const _traceql_to_filter = require("../../components/filter/traceql_to_filter");
 const _queryeditormodel = require("./query-editor-model");
 function TempoTraceQueryEditor(props) {
-    const { onChange, value } = props;
-    const { datasource } = value;
+    const { onChange, value, value: { datasource, limit }, queryHandlerSettings } = props;
     const datasourceSelectValue = datasource ?? _temposelectors.DEFAULT_TEMPO;
     const selectedDatasource = (0, _pluginsystem.useDatasourceSelectValueToSelector)(datasourceSelectValue, _temposelectors.TEMPO_DATASOURCE_KIND);
     const datasourceSelectLabelID = (0, _components.useId)('tempo-datasource-label'); // for panels with multiple queries, this component is rendered multiple times on the same page
     const { data: client } = (0, _pluginsystem.useDatasourceClient)(selectedDatasource);
-    const { timeRange } = (0, _pluginsystem.useTimeRange)();
-    const completionConfig = (0, _react.useMemo)(()=>{
-        return {
-            client,
-            timeRange
-        };
-    }, [
-        client,
-        timeRange
-    ]);
     const { query, handleQueryChange, handleQueryBlur } = (0, _queryeditormodel.useQueryState)(props);
-    const { limit, handleLimitChange, handleLimitBlur, limitHasError } = (0, _queryeditormodel.useLimitState)(props);
+    const [showAttributeFilters, setShowAttributeFilters] = (0, _react.useState)(()=>isSimpleTraceQLQuery(query));
     const handleDatasourceChange = (next)=>{
         if ((0, _temposelectors.isTempoDatasourceSelector)(next)) {
             onChange((0, _immer.produce)(value, (draft)=>{
@@ -59,6 +59,23 @@ function TempoTraceQueryEditor(props) {
         }
         throw new Error('Got unexpected non-Tempo datasource selector');
     };
+    const runQuery = (newQuery)=>{
+        if (queryHandlerSettings?.watchQueryChanges) {
+            queryHandlerSettings.watchQueryChanges(newQuery);
+        }
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.query = newQuery;
+        }));
+    };
+    const handleTraceQueryChange = (0, _react.useCallback)((e)=>{
+        handleQueryChange(e);
+        if (queryHandlerSettings?.watchQueryChanges) {
+            queryHandlerSettings.watchQueryChanges(e);
+        }
+    }, [
+        handleQueryChange,
+        queryHandlerSettings
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         spacing: 2,
         children: [
@@ -77,26 +94,73 @@ function TempoTraceQueryEditor(props) {
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                 direction: "row",
                 spacing: 2,
+                sx: {
+                    alignItems: 'flex-start'
+                },
                 children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.TraceQLEditor, {
-                        completionConfig: completionConfig,
+                    showAttributeFilters ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_AttributeFilters.AttributeFilters, {
+                        client: client,
+                        query: query,
+                        setQuery: runQuery
+                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.TraceQLEditor, {
+                        client: client,
                         value: query,
-                        onChange: handleQueryChange,
-                        onBlur: handleQueryBlur
+                        onChange: handleTraceQueryChange,
+                        onBlur: queryHandlerSettings?.runWithOnBlur ? handleQueryBlur : undefined
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-                        size: "small",
-                        label: "Max Traces",
-                        value: limit,
-                        error: limitHasError,
-                        onChange: (e)=>handleLimitChange(e.target.value),
-                        onBlur: handleLimitBlur,
-                        sx: {
-                            width: '110px'
-                        }
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                        onClick: ()=>setShowAttributeFilters(!showAttributeFilters),
+                        children: showAttributeFilters ? 'Show query' : 'Hide query'
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(LimitSelect, {
+                        value: limit ?? 20,
+                        setValue: (newLimit)=>onChange((0, _immer.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 == '' || (0, _filter_to_traceql.filterToTraceQL)((0, _traceql_to_filter.traceQLToFilter)(query)) === query;
+}
+const limitOptions = [
+    20,
+    50,
+    100,
+    500,
+    1000,
+    5000
+];
+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__*/ (0, _jsxruntime.jsx)(_material.Box, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
+            size: "small",
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
+                    id: "max-traces-label",
+                    children: "Max Traces"
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.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__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                            value: option,
+                            children: option
+                        }, option))
+                })
+            ]
+        })
+    });
+}

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

@@ -113,6 +113,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/cjs/plugins/tempo-trace-query/query-editor-model.js

@@ -14,17 +14,9 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useLimitState: function() {
-        return useLimitState;
-    },
-    useQueryState: function() {
+Object.defineProperty(exports, "useQueryState", {
+    enumerable: true,
+    get: function() {
         return useQueryState;
     }
 });
@@ -59,36 +51,3 @@ function useQueryState(props) {
         handleQueryBlur
     };
 }
-function useLimitState(props) {
-    const { onChange, value } = props;
-    // TODO: reusable hook or helper util instead of duplicating from useQueryState
-    const [limit, setLimit] = (0, _react.useState)(value.limit ? value.limit.toString() : '');
-    const [lastSyncedLimit, setLastSyncedLimit] = (0, _react.useState)(value.limit);
-    if (value.limit !== lastSyncedLimit) {
-        setLimit(value.limit ? value.limit.toString() : '');
-        setLastSyncedLimit(value.limit);
-    }
-    // limit must be empty or an integer > 0
-    const limitHasError = !(limit === '' || /^[0-9]+$/.test(limit) && parseInt(limit) > 0);
-    // Update our local state as the user types
-    const handleLimitChange = (e)=>{
-        setLimit(e);
-    };
-    // Propagate changes to the panel preview component when limit TextField is blurred
-    const handleLimitBlur = ()=>{
-        if (limitHasError) {
-            return;
-        }
-        const limitVal = limit === '' ? undefined : parseInt(limit);
-        setLastSyncedLimit(limitVal);
-        onChange((0, _immer.produce)(value, (draft)=>{
-            draft.limit = limitVal;
-        }));
-    };
-    return {
-        limit,
-        handleLimitChange,
-        handleLimitBlur,
-        limitHasError
-    };
-}

package/lib/components/AttributeFilters.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { TempoClient } from '../model';
+export interface AttributeFiltersProps {
+    client?: TempoClient;
+    query: string;
+    setQuery: (x: string) => void;
+}
+export declare function AttributeFilters(props: AttributeFiltersProps): ReactElement;
+//# sourceMappingURL=AttributeFilters.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AttributeFilters.d.ts","sourceRoot":"","sources":["../../../src/components/AttributeFilters.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAoD,MAAM,OAAO,CAAC;AAOvF,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAOvC,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CA6D3E"}

package/lib/components/AttributeFilters.js

@@ -0,0 +1,261 @@
+// 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.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { Autocomplete, Checkbox, Stack, TextField } from '@mui/material';
+import { isAbsoluteTimeRange, toAbsoluteTimeRange } from '@perses-dev/core';
+import { useTimeRange } from '@perses-dev/plugin-system';
+import { useQuery } from '@tanstack/react-query';
+import CheckboxOutline from 'mdi-material-ui/CheckboxOutline';
+import CheckboxBlankOutline from 'mdi-material-ui/CheckboxBlankOutline';
+import { filterToTraceQL } from './filter/filter_to_traceql';
+import { traceQLToFilter } from './filter/traceql_to_filter';
+import { splitByUnquotedWhitespace } from './filter/filter';
+const statusOptions = [
+    'unset',
+    'ok',
+    'error'
+];
+export function AttributeFilters(props) {
+    const { client, query, setQuery } = props;
+    const filter = traceQLToFilter(query);
+    const setFilter = (filter)=>{
+        setQuery(filterToTraceQL(filter));
+    };
+    const { timeRange } = useTimeRange();
+    const absTimeRange = !isAbsoluteTimeRange(timeRange) ? toAbsoluteTimeRange(timeRange) : timeRange;
+    const startTime = Math.round(absTimeRange.start.getTime() / 1000);
+    const endTime = Math.round(absTimeRange.end.getTime() / 1000);
+    const { data: serviceNameOptions } = useTagValues(client, 'resource.service.name', filterToTraceQL({
+        ...filter,
+        serviceName: []
+    }), startTime, endTime);
+    const { data: spanNameOptions } = useTagValues(client, 'name', filterToTraceQL({
+        ...filter,
+        spanName: []
+    }), startTime, endTime);
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(StringAttributeFilter, {
+                label: "Service Name",
+                options: serviceNameOptions ?? [],
+                value: filter.serviceName,
+                setValue: (x)=>setFilter({
+                        ...filter,
+                        serviceName: x
+                    })
+            }),
+            /*#__PURE__*/ _jsx(StringAttributeFilter, {
+                label: "Span Name",
+                options: spanNameOptions ?? [],
+                value: filter.spanName,
+                setValue: (x)=>setFilter({
+                        ...filter,
+                        spanName: x
+                    })
+            }),
+            /*#__PURE__*/ _jsx(StringAttributeFilter, {
+                label: "Status",
+                width: 210,
+                options: statusOptions ?? [],
+                value: filter.status,
+                setValue: (x)=>setFilter({
+                        ...filter,
+                        status: x
+                    })
+            }),
+            /*#__PURE__*/ _jsx(DurationAttributeFilter, {
+                label: "Trace Duration",
+                value: filter.traceDuration,
+                setValue: (value)=>setFilter({
+                        ...filter,
+                        traceDuration: value
+                    })
+            }),
+            /*#__PURE__*/ _jsx(CustomAttributesFilter, {
+                label: "Custom Attributes",
+                value: filter.customMatchers,
+                setValue: (value)=>setFilter({
+                        ...filter,
+                        customMatchers: value
+                    })
+            })
+        ]
+    });
+}
+const checkboxBlankIcon = /*#__PURE__*/ _jsx(CheckboxBlankOutline, {
+    fontSize: "small"
+});
+const checkedMarkedIcon = /*#__PURE__*/ _jsx(CheckboxOutline, {
+    fontSize: "small"
+});
+function StringAttributeFilter(props) {
+    const { label, width, options, value, setValue } = props;
+    return /*#__PURE__*/ _jsx(Autocomplete, {
+        multiple: true,
+        size: "small",
+        limitTags: 1,
+        disableCloseOnSelect: true,
+        value: value,
+        onChange: (_event, newValue)=>setValue(newValue),
+        options: options,
+        renderOption: (props, option, { selected })=>{
+            const { key, ...optionProps } = props;
+            return /*#__PURE__*/ _jsxs("li", {
+                ...optionProps,
+                children: [
+                    /*#__PURE__*/ _jsx(Checkbox, {
+                        icon: checkboxBlankIcon,
+                        checkedIcon: checkedMarkedIcon,
+                        style: {
+                            marginRight: 8
+                        },
+                        checked: selected
+                    }),
+                    option
+                ]
+            }, key);
+        },
+        renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, {
+                ...params,
+                label: label
+            }),
+        // Reduce the size of the chips to make space for the <input> element, the +X text and the X button to avoid a line break.
+        // See https://github.com/mui/material-ui/issues/38835 for more details.
+        slotProps: {
+            chip: {
+                sx: {
+                    maxWidth: 'calc(100% - 45px) !important'
+                }
+            }
+        },
+        // Reduce the size of the <input> field
+        sx: {
+            width: width ?? 250,
+            '& input': {
+                minWidth: '5px !important'
+            }
+        }
+    });
+}
+function DurationAttributeFilter(props) {
+    const { label, value, setValue } = props;
+    const { min, max } = value;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        gap: 0.5,
+        children: [
+            /*#__PURE__*/ _jsx(DurationTextInput, {
+                label: `Min ${label}`,
+                value: min ?? '',
+                setValue: (min)=>setValue({
+                        min,
+                        max
+                    })
+            }),
+            /*#__PURE__*/ _jsx(DurationTextInput, {
+                label: `Max ${label}`,
+                value: max ?? '',
+                setValue: (max)=>setValue({
+                        min,
+                        max
+                    })
+            })
+        ]
+    });
+}
+const durationFormatRegex = /^([0-9]+\.)?[0-9]+(ns|ms|s|m|h)$/;
+function DurationTextInput(props) {
+    const { label, value, setValue } = props;
+    return /*#__PURE__*/ _jsx(LazyTextInput, {
+        label: label,
+        size: "small",
+        value: value,
+        setValue: setValue,
+        validationRegex: durationFormatRegex,
+        validationFailedMessage: "Invalid format. Accepted format e.g. 100ms, accepted units: ns, ms, s, m, h",
+        sx: {
+            width: 150
+        }
+    });
+}
+function CustomAttributesFilter(props) {
+    const { label, value, setValue } = props;
+    return /*#__PURE__*/ _jsx(LazyTextInput, {
+        label: label,
+        size: "small",
+        placeholder: 'span.http.status_code=200 span.http.method="GET"',
+        value: value.join(' '),
+        setValue: (x)=>setValue(splitByUnquotedWhitespace(x)),
+        sx: {
+            flexGrow: 1
+        }
+    });
+}
+/** A <TextField> which calls props.setValue when the input field is blurred and the validation passes. */ function LazyTextInput(props) {
+    const { validationRegex, validationFailedMessage, value, setValue, ...otherProps } = props;
+    const [draftValue, setDraftValue] = useState(value);
+    const isValidInput = draftValue == '' || validationRegex == undefined || validationRegex.test(draftValue);
+    useEffect(()=>{
+        setDraftValue(value);
+    }, [
+        value,
+        setDraftValue
+    ]);
+    const handleChange = useCallback((event)=>{
+        setDraftValue(event.target.value);
+    }, []);
+    const handleBlur = useCallback(()=>{
+        if (isValidInput) {
+            setValue(draftValue);
+        }
+    }, [
+        isValidInput,
+        setValue,
+        draftValue
+    ]);
+    return /*#__PURE__*/ _jsx(TextField, {
+        ...otherProps,
+        error: !isValidInput,
+        helperText: isValidInput ? undefined : validationFailedMessage,
+        value: draftValue,
+        onChange: handleChange,
+        onBlur: handleBlur
+    });
+}
+function useTagValues(client, tag, query, start, end) {
+    return useQuery({
+        queryKey: [
+            'useTagValues',
+            client,
+            tag,
+            query,
+            start,
+            end
+        ],
+        enabled: !!client,
+        queryFn: async function() {
+            if (!client) return;
+            const values = await client.searchTagValues({
+                tag,
+                q: query,
+                start,
+                end
+            });
+            return values.tagValues.map((tagValue)=>tagValue.value ?? '').sort();
+        },
+        staleTime: 60 * 1000
+    });
+}
+
+//# sourceMappingURL=AttributeFilters.js.map