@perses-dev/pyroscope-plugin 0.2.0 → 0.3.1

package/lib/cjs/explore/PyroscopeExplorer.js

@@ -30,7 +30,8 @@ const initialSpec = {
     showSettings: true,
     showSeries: true,
     showTable: true,
-    showFlameGraph: true
+    showFlameGraph: true,
+    traceHeight: 25
 };
 function FlameGraphPanel({ queries }) {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.Panel, {

package/lib/cjs/plugins/pyroscope-profile-query/PyroscopeProfileQueryEditor.js

@@ -25,13 +25,13 @@ const _pluginsystem = require("@perses-dev/plugin-system");
 const _components = require("@perses-dev/components");
 const _immer = require("immer");
 const _material = require("@mui/material");
-const _pyroscopeselectors = require("../../model/pyroscope-selectors");
+const _model = require("../../model");
 const _components1 = require("../../components");
 const _queryeditormodel = require("./query-editor-model");
 function PyroscopeProfileQueryEditor(props) {
     const { onChange, value } = props;
     const { datasource } = value;
-    const selectedDatasource = datasource ?? _pyroscopeselectors.DEFAULT_PYROSCOPE;
+    const selectedDatasource = datasource ?? _model.DEFAULT_PYROSCOPE;
     const datasourceSelectLabelID = (0, _components.useId)('pyroscope-datasource-label');
     const { maxNodes, handleMaxNodesChange, maxNodesHasError } = (0, _queryeditormodel.useMaxNodesState)(props);
     const { profileType, handleProfileTypeChange } = (0, _queryeditormodel.useProfileTypeState)(props);
@@ -40,11 +40,10 @@ function PyroscopeProfileQueryEditor(props) {
     const handleDatasourceChange = (next)=>{
         // Check if the next value is a DatasourceSelector
         if (typeof next === 'object' && 'kind' in next && 'name' in next) {
-            if ((0, _pyroscopeselectors.isPyroscopeDatasourceSelector)(next)) {
+            if ((0, _model.isPyroscopeDatasourceSelector)(next)) {
                 onChange((0, _immer.produce)(value, (draft)=>{
                     // If they're using the default, just omit the datasource prop (i.e. set to undefined)
-                    const nextDatasource = (0, _pyroscopeselectors.isDefaultPyroscopeSelector)(next) ? undefined : next;
-                    draft.datasource = nextDatasource;
+                    draft.datasource = (0, _model.isDefaultPyroscopeSelector)(next) ? undefined : next;
                 }));
                 return;
             }
@@ -64,7 +63,7 @@ function PyroscopeProfileQueryEditor(props) {
                         children: "Pyroscope Datasource"
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceSelect, {
-                        datasourcePluginKind: _pyroscopeselectors.PYROSCOPE_DATASOURCE_KIND,
+                        datasourcePluginKind: _model.PYROSCOPE_DATASOURCE_KIND,
                         value: selectedDatasource,
                         onChange: handleDatasourceChange,
                         labelId: datasourceSelectLabelID,
@@ -75,11 +74,12 @@ function PyroscopeProfileQueryEditor(props) {
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
                 direction: "row",
-                spacing: 0,
                 sx: {
-                    flexWrap: 'wrap',
-                    rowGap: 1,
-                    gap: 2
+                    [(0, _material.useTheme)().breakpoints.down('sm')]: {
+                        flexWrap: 'wrap'
+                    },
+                    gap: 2,
+                    rowGap: 1
                 },
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.Service, {
@@ -93,13 +93,22 @@ function PyroscopeProfileQueryEditor(props) {
                         onChange: handleProfileTypeChange
                     }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        type: "number",
                         size: "small",
                         label: "Max Nodes",
                         value: maxNodes,
                         error: maxNodesHasError,
                         onChange: (e)=>handleMaxNodesChange(e.target.value),
-                        sx: {
-                            width: '110px'
+                        sx: (theme)=>({
+                                width: 250,
+                                [theme.breakpoints.down('sm')]: {
+                                    width: '100%'
+                                }
+                            }),
+                        slotProps: {
+                            htmlInput: {
+                                step: 1
+                            }
                         }
                     })
                 ]

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

@@ -1 +1 @@
-{"version":3,"file":"DeleteFilterItem.d.ts","sourceRoot":"","sources":["../../../src/components/DeleteFilterItem.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAIrC,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAe3E"}
+{"version":3,"file":"DeleteFilterItem.d.ts","sourceRoot":"","sources":["../../../src/components/DeleteFilterItem.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAIrC,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAoB3E"}

package/lib/components/DeleteFilterItem.js

@@ -16,10 +16,15 @@ import { ToolbarIconButton } from '@perses-dev/components';
 export function DeleteFilterItem(props) {
     const { onClick } = props;
     return /*#__PURE__*/ _jsx(ToolbarIconButton, {
-        sx: {
-            borderTopLeftRadius: '0',
-            borderBottomLeftRadius: '0'
-        },
+        sx: (theme)=>({
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0,
+                width: '100%',
+                height: '100%',
+                [theme.breakpoints.down('sm')]: {
+                    borderTopRightRadius: 0
+                }
+            }),
         "aria-label": "delete filter",
         onClick: onClick,
         children: /*#__PURE__*/ _jsx(CloseIcon, {})

package/lib/components/DeleteFilterItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DeleteFilterItem.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 { ReactElement } from 'react';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { ToolbarIconButton } from '@perses-dev/components';\n\nexport interface DeleteFilterItemProps {\n  onClick: () => void;\n}\n\nexport function DeleteFilterItem(props: DeleteFilterItemProps): ReactElement {\n  const { onClick } = props;\n\n  return (\n    <ToolbarIconButton\n      sx={{\n        borderTopLeftRadius: '0',\n        borderBottomLeftRadius: '0',\n      }}\n      aria-label=\"delete filter\"\n      onClick={onClick}\n    >\n      <CloseIcon />\n    </ToolbarIconButton>\n  );\n}\n"],"names":["CloseIcon","ToolbarIconButton","DeleteFilterItem","props","onClick","sx","borderTopLeftRadius","borderBottomLeftRadius","aria-label"],"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;;AAGjC,OAAOA,eAAe,wBAAwB;AAC9C,SAASC,iBAAiB,QAAQ,yBAAyB;AAM3D,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EAAEC,OAAO,EAAE,GAAGD;IAEpB,qBACE,KAACF;QACCI,IAAI;YACFC,qBAAqB;YACrBC,wBAAwB;QAC1B;QACAC,cAAW;QACXJ,SAASA;kBAET,cAAA,KAACJ;;AAGP"}
+{"version":3,"sources":["../../../src/components/DeleteFilterItem.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 { ReactElement } from 'react';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { ToolbarIconButton } from '@perses-dev/components';\n\nexport interface DeleteFilterItemProps {\n  onClick: () => void;\n}\n\nexport function DeleteFilterItem(props: DeleteFilterItemProps): ReactElement {\n  const { onClick } = props;\n\n  return (\n    <ToolbarIconButton\n      sx={(theme) => ({\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0,\n        width: '100%',\n        height: '100%',\n        [theme.breakpoints.down('sm')]: {\n          borderTopRightRadius: 0,\n        },\n      })}\n      aria-label=\"delete filter\"\n      onClick={onClick}\n    >\n      <CloseIcon />\n    </ToolbarIconButton>\n  );\n}\n"],"names":["CloseIcon","ToolbarIconButton","DeleteFilterItem","props","onClick","sx","theme","borderTopLeftRadius","borderBottomLeftRadius","width","height","breakpoints","down","borderTopRightRadius","aria-label"],"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;;AAGjC,OAAOA,eAAe,wBAAwB;AAC9C,SAASC,iBAAiB,QAAQ,yBAAyB;AAM3D,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EAAEC,OAAO,EAAE,GAAGD;IAEpB,qBACE,KAACF;QACCI,IAAI,CAACC,QAAW,CAAA;gBACdC,qBAAqB;gBACrBC,wBAAwB;gBACxBC,OAAO;gBACPC,QAAQ;gBACR,CAACJ,MAAMK,WAAW,CAACC,IAAI,CAAC,MAAM,EAAE;oBAC9BC,sBAAsB;gBACxB;YACF,CAAA;QACAC,cAAW;QACXV,SAASA;kBAET,cAAA,KAACJ;;AAGP"}

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

@@ -1 +1 @@
-{"version":3,"file":"FilterItem.d.ts","sourceRoot":"","sources":["../../../src/components/FilterItem.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,EAAE,WAAW,EAAgB,MAAM,gBAAgB,CAAC;AAM3D,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,2BAA2B,CAAC;IACxC,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAgC/D"}
+{"version":3,"file":"FilterItem.d.ts","sourceRoot":"","sources":["../../../src/components/FilterItem.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,EAAE,WAAW,EAAgB,MAAM,gBAAgB,CAAC;AAM3D,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,2BAA2B,CAAC;IACxC,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CA8C/D"}

package/lib/components/FilterItem.js

@@ -11,7 +11,7 @@
 // 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 { Stack } from '@mui/material';
+import { Grid2 as Grid, Stack } from '@mui/material';
 import { LabelName } from './LabelName';
 import { Operator } from './Operator';
 import { LabelValue } from './LabelValue';
@@ -42,33 +42,66 @@ export function FilterItem(props) {
     const handleDeleteClick = ()=>{
         deleteItem?.();
     };
-    return /*#__PURE__*/ _jsxs(Stack, {
+    return /*#__PURE__*/ _jsx(Stack, {
         direction: "row",
         spacing: 0,
-        sx: {
-            flexWrap: 'wrap',
-            maxWidth: '100%'
-        },
-        children: [
-            /*#__PURE__*/ _jsx(LabelName, {
-                datasource: datasource,
-                value: value.labelName,
-                onChange: handleLabelNameChange
+        sx: (theme)=>({
+                flexWrap: 'wrap',
+                width: 500,
+                [theme.breakpoints.down('sm')]: {
+                    width: '100%'
+                }
             }),
-            /*#__PURE__*/ _jsx(Operator, {
-                value: value.operator,
-                onChange: handleOperatorChange
-            }),
-            /*#__PURE__*/ _jsx(LabelValue, {
-                datasource: datasource,
-                value: value.labelValue,
-                labelName: value.labelName,
-                onChange: handleLabelValueChange
-            }),
-            /*#__PURE__*/ _jsx(DeleteFilterItem, {
-                onClick: handleDeleteClick
-            })
-        ]
+        children: /*#__PURE__*/ _jsxs(Grid, {
+            container: true,
+            sx: {
+                width: '100%'
+            },
+            children: [
+                /*#__PURE__*/ _jsx(Grid, {
+                    size: {
+                        xs: 9.5,
+                        md: 4.5
+                    },
+                    children: /*#__PURE__*/ _jsx(LabelName, {
+                        datasource: datasource,
+                        value: value.labelName,
+                        onChange: handleLabelNameChange
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Grid, {
+                    size: {
+                        xs: 2.5,
+                        md: 1.5
+                    },
+                    children: /*#__PURE__*/ _jsx(Operator, {
+                        value: value.operator,
+                        onChange: handleOperatorChange
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Grid, {
+                    size: {
+                        xs: 10,
+                        md: 5
+                    },
+                    children: /*#__PURE__*/ _jsx(LabelValue, {
+                        datasource: datasource,
+                        value: value.labelValue,
+                        labelName: value.labelName,
+                        onChange: handleLabelValueChange
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Grid, {
+                    size: {
+                        xs: 2,
+                        md: 1
+                    },
+                    children: /*#__PURE__*/ _jsx(DeleteFilterItem, {
+                        onClick: handleDeleteClick
+                    })
+                })
+            ]
+        })
     });
 }
 

package/lib/components/FilterItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FilterItem.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 { ReactElement } from 'react';\nimport { Stack } from '@mui/material';\nimport { PyroscopeDatasourceSelector } from '../model';\nimport { LabelFilter, OperatorType } from '../utils/types';\nimport { LabelName } from './LabelName';\nimport { Operator } from './Operator';\nimport { LabelValue } from './LabelValue';\nimport { DeleteFilterItem } from './DeleteFilterItem';\n\nexport interface FilterItemProps {\n  datasource: PyroscopeDatasourceSelector;\n  value: LabelFilter;\n  onChange?: (value: LabelFilter) => void;\n  deleteItem?: () => void; // this function is used to delete the current filter\n}\n\nexport function FilterItem(props: FilterItemProps): ReactElement {\n  const { datasource, value, onChange, deleteItem } = props;\n\n  const handleLabelNameChange = (label: string) => {\n    onChange?.({ labelName: label, labelValue: '', operator: value.operator });\n  };\n\n  const handleOperatorChange = (op: OperatorType) => {\n    onChange?.({ labelName: value.labelName, labelValue: value.labelValue, operator: op });\n  };\n\n  const handleLabelValueChange = (val: string) => {\n    onChange?.({ labelName: value.labelName, labelValue: val, operator: value.operator });\n  };\n\n  const handleDeleteClick = () => {\n    deleteItem?.();\n  };\n\n  return (\n    <Stack direction=\"row\" spacing={0} sx={{ flexWrap: 'wrap', maxWidth: '100%' }}>\n      <LabelName datasource={datasource} value={value.labelName} onChange={handleLabelNameChange} />\n      <Operator value={value.operator} onChange={handleOperatorChange} />\n      <LabelValue\n        datasource={datasource}\n        value={value.labelValue}\n        labelName={value.labelName}\n        onChange={handleLabelValueChange}\n      />\n      <DeleteFilterItem onClick={handleDeleteClick} />\n    </Stack>\n  );\n}\n"],"names":["Stack","LabelName","Operator","LabelValue","DeleteFilterItem","FilterItem","props","datasource","value","onChange","deleteItem","handleLabelNameChange","label","labelName","labelValue","operator","handleOperatorChange","op","handleLabelValueChange","val","handleDeleteClick","direction","spacing","sx","flexWrap","maxWidth","onClick"],"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;;AAGjC,SAASA,KAAK,QAAQ,gBAAgB;AAGtC,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,QAAQ,QAAQ,aAAa;AACtC,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,gBAAgB,QAAQ,qBAAqB;AAStD,OAAO,SAASC,WAAWC,KAAsB;IAC/C,MAAM,EAAEC,UAAU,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,UAAU,EAAE,GAAGJ;IAEpD,MAAMK,wBAAwB,CAACC;QAC7BH,WAAW;YAAEI,WAAWD;YAAOE,YAAY;YAAIC,UAAUP,MAAMO,QAAQ;QAAC;IAC1E;IAEA,MAAMC,uBAAuB,CAACC;QAC5BR,WAAW;YAAEI,WAAWL,MAAMK,SAAS;YAAEC,YAAYN,MAAMM,UAAU;YAAEC,UAAUE;QAAG;IACtF;IAEA,MAAMC,yBAAyB,CAACC;QAC9BV,WAAW;YAAEI,WAAWL,MAAMK,SAAS;YAAEC,YAAYK;YAAKJ,UAAUP,MAAMO,QAAQ;QAAC;IACrF;IAEA,MAAMK,oBAAoB;QACxBV;IACF;IAEA,qBACE,MAACV;QAAMqB,WAAU;QAAMC,SAAS;QAAGC,IAAI;YAAEC,UAAU;YAAQC,UAAU;QAAO;;0BAC1E,KAACxB;gBAAUM,YAAYA;gBAAYC,OAAOA,MAAMK,SAAS;gBAAEJ,UAAUE;;0BACrE,KAACT;gBAASM,OAAOA,MAAMO,QAAQ;gBAAEN,UAAUO;;0BAC3C,KAACb;gBACCI,YAAYA;gBACZC,OAAOA,MAAMM,UAAU;gBACvBD,WAAWL,MAAMK,SAAS;gBAC1BJ,UAAUS;;0BAEZ,KAACd;gBAAiBsB,SAASN;;;;AAGjC"}
+{"version":3,"sources":["../../../src/components/FilterItem.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 { ReactElement } from 'react';\nimport { Grid2 as Grid, Stack } from '@mui/material';\nimport { PyroscopeDatasourceSelector } from '../model';\nimport { LabelFilter, OperatorType } from '../utils/types';\nimport { LabelName } from './LabelName';\nimport { Operator } from './Operator';\nimport { LabelValue } from './LabelValue';\nimport { DeleteFilterItem } from './DeleteFilterItem';\n\nexport interface FilterItemProps {\n  datasource: PyroscopeDatasourceSelector;\n  value: LabelFilter;\n  onChange?: (value: LabelFilter) => void;\n  deleteItem?: () => void; // this function is used to delete the current filter\n}\n\nexport function FilterItem(props: FilterItemProps): ReactElement {\n  const { datasource, value, onChange, deleteItem } = props;\n\n  const handleLabelNameChange = (label: string) => {\n    onChange?.({ labelName: label, labelValue: '', operator: value.operator });\n  };\n\n  const handleOperatorChange = (op: OperatorType) => {\n    onChange?.({ labelName: value.labelName, labelValue: value.labelValue, operator: op });\n  };\n\n  const handleLabelValueChange = (val: string) => {\n    onChange?.({ labelName: value.labelName, labelValue: val, operator: value.operator });\n  };\n\n  const handleDeleteClick = () => {\n    deleteItem?.();\n  };\n\n  return (\n    <Stack\n      direction=\"row\"\n      spacing={0}\n      sx={(theme) => ({ flexWrap: 'wrap', width: 500, [theme.breakpoints.down('sm')]: { width: '100%' } })}\n    >\n      <Grid container sx={{ width: '100%' }}>\n        <Grid size={{ xs: 9.5, md: 4.5 }}>\n          <LabelName datasource={datasource} value={value.labelName} onChange={handleLabelNameChange} />\n        </Grid>\n        <Grid size={{ xs: 2.5, md: 1.5 }}>\n          <Operator value={value.operator} onChange={handleOperatorChange} />\n        </Grid>\n        <Grid size={{ xs: 10, md: 5 }}>\n          <LabelValue\n            datasource={datasource}\n            value={value.labelValue}\n            labelName={value.labelName}\n            onChange={handleLabelValueChange}\n          />\n        </Grid>\n        <Grid size={{ xs: 2, md: 1 }}>\n          <DeleteFilterItem onClick={handleDeleteClick} />\n        </Grid>\n      </Grid>\n    </Stack>\n  );\n}\n"],"names":["Grid2","Grid","Stack","LabelName","Operator","LabelValue","DeleteFilterItem","FilterItem","props","datasource","value","onChange","deleteItem","handleLabelNameChange","label","labelName","labelValue","operator","handleOperatorChange","op","handleLabelValueChange","val","handleDeleteClick","direction","spacing","sx","theme","flexWrap","width","breakpoints","down","container","size","xs","md","onClick"],"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;;AAGjC,SAASA,SAASC,IAAI,EAAEC,KAAK,QAAQ,gBAAgB;AAGrD,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,QAAQ,QAAQ,aAAa;AACtC,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,gBAAgB,QAAQ,qBAAqB;AAStD,OAAO,SAASC,WAAWC,KAAsB;IAC/C,MAAM,EAAEC,UAAU,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,UAAU,EAAE,GAAGJ;IAEpD,MAAMK,wBAAwB,CAACC;QAC7BH,WAAW;YAAEI,WAAWD;YAAOE,YAAY;YAAIC,UAAUP,MAAMO,QAAQ;QAAC;IAC1E;IAEA,MAAMC,uBAAuB,CAACC;QAC5BR,WAAW;YAAEI,WAAWL,MAAMK,SAAS;YAAEC,YAAYN,MAAMM,UAAU;YAAEC,UAAUE;QAAG;IACtF;IAEA,MAAMC,yBAAyB,CAACC;QAC9BV,WAAW;YAAEI,WAAWL,MAAMK,SAAS;YAAEC,YAAYK;YAAKJ,UAAUP,MAAMO,QAAQ;QAAC;IACrF;IAEA,MAAMK,oBAAoB;QACxBV;IACF;IAEA,qBACE,KAACV;QACCqB,WAAU;QACVC,SAAS;QACTC,IAAI,CAACC,QAAW,CAAA;gBAAEC,UAAU;gBAAQC,OAAO;gBAAK,CAACF,MAAMG,WAAW,CAACC,IAAI,CAAC,MAAM,EAAE;oBAAEF,OAAO;gBAAO;YAAE,CAAA;kBAElG,cAAA,MAAC3B;YAAK8B,SAAS;YAACN,IAAI;gBAAEG,OAAO;YAAO;;8BAClC,KAAC3B;oBAAK+B,MAAM;wBAAEC,IAAI;wBAAKC,IAAI;oBAAI;8BAC7B,cAAA,KAAC/B;wBAAUM,YAAYA;wBAAYC,OAAOA,MAAMK,SAAS;wBAAEJ,UAAUE;;;8BAEvE,KAACZ;oBAAK+B,MAAM;wBAAEC,IAAI;wBAAKC,IAAI;oBAAI;8BAC7B,cAAA,KAAC9B;wBAASM,OAAOA,MAAMO,QAAQ;wBAAEN,UAAUO;;;8BAE7C,KAACjB;oBAAK+B,MAAM;wBAAEC,IAAI;wBAAIC,IAAI;oBAAE;8BAC1B,cAAA,KAAC7B;wBACCI,YAAYA;wBACZC,OAAOA,MAAMM,UAAU;wBACvBD,WAAWL,MAAMK,SAAS;wBAC1BJ,UAAUS;;;8BAGd,KAACnB;oBAAK+B,MAAM;wBAAEC,IAAI;wBAAGC,IAAI;oBAAE;8BACzB,cAAA,KAAC5B;wBAAiB6B,SAASb;;;;;;AAKrC"}

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

@@ -1 +1 @@
-{"version":3,"file":"LabelName.d.ts","sourceRoot":"","sources":["../../../src/components/LabelName.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAGvD,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,2BAA2B,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CAiC7D"}
+{"version":3,"file":"LabelName.d.ts","sourceRoot":"","sources":["../../../src/components/LabelName.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAGvD,MAAM,WAAW,cAAc;IAC7B,UAAU,EAAE,2BAA2B,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CAoC7D"}

package/lib/components/LabelName.js

@@ -11,40 +11,42 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Select, MenuItem, CircularProgress, Stack } from '@mui/material';
+import { useMemo } from 'react';
+import { TextField, Autocomplete } from '@mui/material';
 import { useLabelNames, filterLabelNamesOptions } from '../utils/use-query';
 export function LabelName(props) {
     const { datasource, value, onChange } = props;
     const { data: labelNamesOptions, isLoading: isLabelNamesOptionsLoading } = useLabelNames(datasource);
-    return /*#__PURE__*/ _jsx(Select, {
-        sx: {
-            borderTopRightRadius: '0',
-            borderBottomRightRadius: '0'
-        },
+    const filteredLabelNamesOptions = useMemo(()=>filterLabelNamesOptions(labelNamesOptions?.names ?? []), [
+        labelNamesOptions
+    ]);
+    return /*#__PURE__*/ _jsx(Autocomplete, {
+        disableClearable: true,
+        options: filteredLabelNamesOptions,
         value: value,
-        size: "small",
-        onChange: (event)=>onChange?.(event.target.value),
-        displayEmpty: true,
-        renderValue: (selected)=>{
-            if (selected === '') {
-                return 'Select label name';
-            }
-            return selected;
+        sx: (theme)=>({
+                width: '100%',
+                '& .MuiOutlinedInput-root': {
+                    borderTopRightRadius: 0,
+                    borderBottomRightRadius: 0,
+                    [theme.breakpoints.down('sm')]: {
+                        borderBottomLeftRadius: 0
+                    }
+                }
+            }),
+        loading: isLabelNamesOptionsLoading,
+        renderInput: (params)=>{
+            return /*#__PURE__*/ _jsx(TextField, {
+                ...params,
+                placeholder: "Select label name",
+                size: "small"
+            });
         },
-        children: isLabelNamesOptionsLoading ? /*#__PURE__*/ _jsx(Stack, {
-            width: "100%",
-            sx: {
-                alignItems: 'center',
-                justifyContent: 'center'
-            },
-            children: /*#__PURE__*/ _jsx(CircularProgress, {
-                color: "inherit",
-                size: 20
-            })
-        }) : labelNamesOptions?.names && filterLabelNamesOptions(labelNamesOptions?.names).map((labelName)=>/*#__PURE__*/ _jsx(MenuItem, {
-                value: labelName,
-                children: labelName
-            }, labelName))
+        onChange: (_event, newValue)=>{
+            if (newValue !== null) {
+                onChange?.(newValue);
+            }
+        }
     });
 }
 

package/lib/components/LabelName.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/LabelName.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 { ReactElement } from 'react';\nimport { Select, MenuItem, CircularProgress, Stack } from '@mui/material';\nimport { PyroscopeDatasourceSelector } from '../model';\nimport { useLabelNames, filterLabelNamesOptions } from '../utils/use-query';\n\nexport interface LabelNameProps {\n  datasource: PyroscopeDatasourceSelector;\n  value: string;\n  onChange?(value: string): void;\n}\n\nexport function LabelName(props: LabelNameProps): ReactElement {\n  const { datasource, value, onChange } = props;\n\n  const { data: labelNamesOptions, isLoading: isLabelNamesOptionsLoading } = useLabelNames(datasource);\n\n  return (\n    <Select\n      sx={{ borderTopRightRadius: '0', borderBottomRightRadius: '0' }}\n      value={value}\n      size=\"small\"\n      onChange={(event) => onChange?.(event.target.value)}\n      displayEmpty\n      renderValue={(selected) => {\n        if (selected === '') {\n          return 'Select label name';\n        }\n        return selected;\n      }}\n    >\n      {isLabelNamesOptionsLoading ? (\n        <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n          <CircularProgress color=\"inherit\" size={20} />\n        </Stack>\n      ) : (\n        labelNamesOptions?.names &&\n        filterLabelNamesOptions(labelNamesOptions?.names).map((labelName) => (\n          <MenuItem key={labelName} value={labelName}>\n            {labelName}\n          </MenuItem>\n        ))\n      )}\n    </Select>\n  );\n}\n"],"names":["Select","MenuItem","CircularProgress","Stack","useLabelNames","filterLabelNamesOptions","LabelName","props","datasource","value","onChange","data","labelNamesOptions","isLoading","isLabelNamesOptionsLoading","sx","borderTopRightRadius","borderBottomRightRadius","size","event","target","displayEmpty","renderValue","selected","width","alignItems","justifyContent","color","names","map","labelName"],"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;;AAGjC,SAASA,MAAM,EAAEC,QAAQ,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,gBAAgB;AAE1E,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,qBAAqB;AAQ5E,OAAO,SAASC,UAAUC,KAAqB;IAC7C,MAAM,EAAEC,UAAU,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGH;IAExC,MAAM,EAAEI,MAAMC,iBAAiB,EAAEC,WAAWC,0BAA0B,EAAE,GAAGV,cAAcI;IAEzF,qBACE,KAACR;QACCe,IAAI;YAAEC,sBAAsB;YAAKC,yBAAyB;QAAI;QAC9DR,OAAOA;QACPS,MAAK;QACLR,UAAU,CAACS,QAAUT,WAAWS,MAAMC,MAAM,CAACX,KAAK;QAClDY,YAAY;QACZC,aAAa,CAACC;YACZ,IAAIA,aAAa,IAAI;gBACnB,OAAO;YACT;YACA,OAAOA;QACT;kBAECT,2CACC,KAACX;YAAMqB,OAAM;YAAOT,IAAI;gBAAEU,YAAY;gBAAUC,gBAAgB;YAAS;sBACvE,cAAA,KAACxB;gBAAiByB,OAAM;gBAAUT,MAAM;;aAG1CN,mBAAmBgB,SACnBvB,wBAAwBO,mBAAmBgB,OAAOC,GAAG,CAAC,CAACC,0BACrD,KAAC7B;gBAAyBQ,OAAOqB;0BAC9BA;eADYA;;AAOzB"}
+{"version":3,"sources":["../../../src/components/LabelName.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 { ReactElement, useMemo } from 'react';\nimport { TextField, Autocomplete } from '@mui/material';\nimport { PyroscopeDatasourceSelector } from '../model';\nimport { useLabelNames, filterLabelNamesOptions } from '../utils/use-query';\n\nexport interface LabelNameProps {\n  datasource: PyroscopeDatasourceSelector;\n  value: string;\n  onChange?(value: string): void;\n}\n\nexport function LabelName(props: LabelNameProps): ReactElement {\n  const { datasource, value, onChange } = props;\n\n  const { data: labelNamesOptions, isLoading: isLabelNamesOptionsLoading } = useLabelNames(datasource);\n\n  const filteredLabelNamesOptions = useMemo(\n    () => filterLabelNamesOptions(labelNamesOptions?.names ?? []),\n    [labelNamesOptions]\n  );\n\n  return (\n    <Autocomplete\n      disableClearable\n      options={filteredLabelNamesOptions}\n      value={value}\n      sx={(theme) => ({\n        width: '100%',\n        '& .MuiOutlinedInput-root': {\n          borderTopRightRadius: 0,\n          borderBottomRightRadius: 0,\n          [theme.breakpoints.down('sm')]: {\n            borderBottomLeftRadius: 0,\n          },\n        },\n      })}\n      loading={isLabelNamesOptionsLoading}\n      renderInput={(params) => {\n        return <TextField {...params} placeholder=\"Select label name\" size=\"small\" />;\n      }}\n      onChange={(_event, newValue) => {\n        if (newValue !== null) {\n          onChange?.(newValue);\n        }\n      }}\n    />\n  );\n}\n"],"names":["useMemo","TextField","Autocomplete","useLabelNames","filterLabelNamesOptions","LabelName","props","datasource","value","onChange","data","labelNamesOptions","isLoading","isLabelNamesOptionsLoading","filteredLabelNamesOptions","names","disableClearable","options","sx","theme","width","borderTopRightRadius","borderBottomRightRadius","breakpoints","down","borderBottomLeftRadius","loading","renderInput","params","placeholder","size","_event","newValue"],"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,SAAuBA,OAAO,QAAQ,QAAQ;AAC9C,SAASC,SAAS,EAAEC,YAAY,QAAQ,gBAAgB;AAExD,SAASC,aAAa,EAAEC,uBAAuB,QAAQ,qBAAqB;AAQ5E,OAAO,SAASC,UAAUC,KAAqB;IAC7C,MAAM,EAAEC,UAAU,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGH;IAExC,MAAM,EAAEI,MAAMC,iBAAiB,EAAEC,WAAWC,0BAA0B,EAAE,GAAGV,cAAcI;IAEzF,MAAMO,4BAA4Bd,QAChC,IAAMI,wBAAwBO,mBAAmBI,SAAS,EAAE,GAC5D;QAACJ;KAAkB;IAGrB,qBACE,KAACT;QACCc,gBAAgB;QAChBC,SAASH;QACTN,OAAOA;QACPU,IAAI,CAACC,QAAW,CAAA;gBACdC,OAAO;gBACP,4BAA4B;oBAC1BC,sBAAsB;oBACtBC,yBAAyB;oBACzB,CAACH,MAAMI,WAAW,CAACC,IAAI,CAAC,MAAM,EAAE;wBAC9BC,wBAAwB;oBAC1B;gBACF;YACF,CAAA;QACAC,SAASb;QACTc,aAAa,CAACC;YACZ,qBAAO,KAAC3B;gBAAW,GAAG2B,MAAM;gBAAEC,aAAY;gBAAoBC,MAAK;;QACrE;QACArB,UAAU,CAACsB,QAAQC;YACjB,IAAIA,aAAa,MAAM;gBACrBvB,WAAWuB;YACb;QACF;;AAGN"}

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

@@ -1 +1 @@
-{"version":3,"file":"LabelValue.d.ts","sourceRoot":"","sources":["../../../src/components/LabelValue.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAGvD,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,2BAA2B,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAkC/D"}
+{"version":3,"file":"LabelValue.d.ts","sourceRoot":"","sources":["../../../src/components/LabelValue.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAGvD,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,2BAA2B,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAgC/D"}

package/lib/components/LabelValue.js

@@ -11,40 +11,39 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Select, MenuItem, CircularProgress, Stack } from '@mui/material';
+import { TextField, Autocomplete } from '@mui/material';
 import { useLabelValues } from '../utils/use-query';
 export function LabelValue(props) {
     const { datasource, value, labelName, onChange } = props;
     const { data: labelValuesOptions, isLoading: isLabelValuesOptionsLoading } = useLabelValues(datasource, labelName);
-    return /*#__PURE__*/ _jsx(Select, {
-        sx: {
-            borderRadius: '0'
-        },
+    return /*#__PURE__*/ _jsx(Autocomplete, {
+        freeSolo: true,
+        disableClearable: true,
+        options: labelValuesOptions?.names ?? [],
         value: value,
-        size: "small",
-        onChange: (event)=>onChange?.(event.target.value),
-        displayEmpty: true,
-        disabled: !labelName || labelName === '',
-        renderValue: (selected)=>{
-            if (selected === '') {
-                return 'Select label value';
-            }
-            return selected;
+        sx: (theme)=>({
+                width: '100%',
+                '& .MuiOutlinedInput-root': {
+                    borderRadius: 0,
+                    width: '100%',
+                    [theme.breakpoints.down('sm')]: {
+                        borderBottomLeftRadius: 4
+                    }
+                }
+            }),
+        loading: isLabelValuesOptionsLoading,
+        renderInput: (params)=>{
+            return /*#__PURE__*/ _jsx(TextField, {
+                ...params,
+                placeholder: "Select label value",
+                size: "small"
+            });
         },
-        children: isLabelValuesOptionsLoading ? /*#__PURE__*/ _jsx(Stack, {
-            width: "100%",
-            sx: {
-                alignItems: 'center',
-                justifyContent: 'center'
-            },
-            children: /*#__PURE__*/ _jsx(CircularProgress, {
-                color: "inherit",
-                size: 20
-            })
-        }) : labelValuesOptions?.names && labelValuesOptions?.names.map((labelValue)=>/*#__PURE__*/ _jsx(MenuItem, {
-                value: labelValue,
-                children: labelValue
-            }, labelValue))
+        onChange: (_event, newInputValue)=>{
+            if (newInputValue !== null) {
+                onChange?.(newInputValue);
+            }
+        }
     });
 }
 

package/lib/components/LabelValue.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/LabelValue.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 { ReactElement } from 'react';\nimport { Select, MenuItem, CircularProgress, Stack } from '@mui/material';\nimport { PyroscopeDatasourceSelector } from '../model';\nimport { useLabelValues } from '../utils/use-query';\n\nexport interface LabelValueProps {\n  datasource: PyroscopeDatasourceSelector;\n  value: string;\n  labelName: string;\n  onChange?(value: string): void;\n}\n\nexport function LabelValue(props: LabelValueProps): ReactElement {\n  const { datasource, value, labelName, onChange } = props;\n\n  const { data: labelValuesOptions, isLoading: isLabelValuesOptionsLoading } = useLabelValues(datasource, labelName);\n\n  return (\n    <Select\n      sx={{ borderRadius: '0' }}\n      value={value}\n      size=\"small\"\n      onChange={(event) => onChange?.(event.target.value)}\n      displayEmpty\n      disabled={!labelName || labelName === ''} // Disabled if labelName is not defined yet\n      renderValue={(selected) => {\n        if (selected === '') {\n          return 'Select label value';\n        }\n        return selected;\n      }}\n    >\n      {isLabelValuesOptionsLoading ? (\n        <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n          <CircularProgress color=\"inherit\" size={20} />\n        </Stack>\n      ) : (\n        labelValuesOptions?.names &&\n        labelValuesOptions?.names.map((labelValue) => (\n          <MenuItem key={labelValue} value={labelValue}>\n            {labelValue}\n          </MenuItem>\n        ))\n      )}\n    </Select>\n  );\n}\n"],"names":["Select","MenuItem","CircularProgress","Stack","useLabelValues","LabelValue","props","datasource","value","labelName","onChange","data","labelValuesOptions","isLoading","isLabelValuesOptionsLoading","sx","borderRadius","size","event","target","displayEmpty","disabled","renderValue","selected","width","alignItems","justifyContent","color","names","map","labelValue"],"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;;AAGjC,SAASA,MAAM,EAAEC,QAAQ,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,gBAAgB;AAE1E,SAASC,cAAc,QAAQ,qBAAqB;AASpD,OAAO,SAASC,WAAWC,KAAsB;IAC/C,MAAM,EAAEC,UAAU,EAAEC,KAAK,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGJ;IAEnD,MAAM,EAAEK,MAAMC,kBAAkB,EAAEC,WAAWC,2BAA2B,EAAE,GAAGV,eAAeG,YAAYE;IAExG,qBACE,KAACT;QACCe,IAAI;YAAEC,cAAc;QAAI;QACxBR,OAAOA;QACPS,MAAK;QACLP,UAAU,CAACQ,QAAUR,WAAWQ,MAAMC,MAAM,CAACX,KAAK;QAClDY,YAAY;QACZC,UAAU,CAACZ,aAAaA,cAAc;QACtCa,aAAa,CAACC;YACZ,IAAIA,aAAa,IAAI;gBACnB,OAAO;YACT;YACA,OAAOA;QACT;kBAECT,4CACC,KAACX;YAAMqB,OAAM;YAAOT,IAAI;gBAAEU,YAAY;gBAAUC,gBAAgB;YAAS;sBACvE,cAAA,KAACxB;gBAAiByB,OAAM;gBAAUV,MAAM;;aAG1CL,oBAAoBgB,SACpBhB,oBAAoBgB,MAAMC,IAAI,CAACC,2BAC7B,KAAC7B;gBAA0BO,OAAOsB;0BAC/BA;eADYA;;AAOzB"}
+{"version":3,"sources":["../../../src/components/LabelValue.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 { ReactElement } from 'react';\nimport { TextField, Autocomplete } from '@mui/material';\nimport { PyroscopeDatasourceSelector } from '../model';\nimport { useLabelValues } from '../utils/use-query';\n\nexport interface LabelValueProps {\n  datasource: PyroscopeDatasourceSelector;\n  value: string;\n  labelName: string;\n  onChange?(value: string): void;\n}\n\nexport function LabelValue(props: LabelValueProps): ReactElement {\n  const { datasource, value, labelName, onChange } = props;\n\n  const { data: labelValuesOptions, isLoading: isLabelValuesOptionsLoading } = useLabelValues(datasource, labelName);\n\n  return (\n    <Autocomplete\n      freeSolo\n      disableClearable\n      options={labelValuesOptions?.names ?? []}\n      value={value}\n      sx={(theme) => ({\n        width: '100%',\n        '& .MuiOutlinedInput-root': {\n          borderRadius: 0,\n          width: '100%',\n          [theme.breakpoints.down('sm')]: {\n            borderBottomLeftRadius: 4,\n          },\n        },\n      })}\n      loading={isLabelValuesOptionsLoading}\n      renderInput={(params) => {\n        return <TextField {...params} placeholder=\"Select label value\" size=\"small\" />;\n      }}\n      onChange={(_event, newInputValue) => {\n        if (newInputValue !== null) {\n          onChange?.(newInputValue);\n        }\n      }}\n    />\n  );\n}\n"],"names":["TextField","Autocomplete","useLabelValues","LabelValue","props","datasource","value","labelName","onChange","data","labelValuesOptions","isLoading","isLabelValuesOptionsLoading","freeSolo","disableClearable","options","names","sx","theme","width","borderRadius","breakpoints","down","borderBottomLeftRadius","loading","renderInput","params","placeholder","size","_event","newInputValue"],"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;;AAGjC,SAASA,SAAS,EAAEC,YAAY,QAAQ,gBAAgB;AAExD,SAASC,cAAc,QAAQ,qBAAqB;AASpD,OAAO,SAASC,WAAWC,KAAsB;IAC/C,MAAM,EAAEC,UAAU,EAAEC,KAAK,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGJ;IAEnD,MAAM,EAAEK,MAAMC,kBAAkB,EAAEC,WAAWC,2BAA2B,EAAE,GAAGV,eAAeG,YAAYE;IAExG,qBACE,KAACN;QACCY,QAAQ;QACRC,gBAAgB;QAChBC,SAASL,oBAAoBM,SAAS,EAAE;QACxCV,OAAOA;QACPW,IAAI,CAACC,QAAW,CAAA;gBACdC,OAAO;gBACP,4BAA4B;oBAC1BC,cAAc;oBACdD,OAAO;oBACP,CAACD,MAAMG,WAAW,CAACC,IAAI,CAAC,MAAM,EAAE;wBAC9BC,wBAAwB;oBAC1B;gBACF;YACF,CAAA;QACAC,SAASZ;QACTa,aAAa,CAACC;YACZ,qBAAO,KAAC1B;gBAAW,GAAG0B,MAAM;gBAAEC,aAAY;gBAAqBC,MAAK;;QACtE;QACApB,UAAU,CAACqB,QAAQC;YACjB,IAAIA,kBAAkB,MAAM;gBAC1BtB,WAAWsB;YACb;QACF;;AAGN"}

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

@@ -1 +1 @@
-{"version":3,"file":"Operator.d.ts","sourceRoot":"","sources":["../../../src/components/Operator.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,CAc3D"}
+{"version":3,"file":"Operator.d.ts","sourceRoot":"","sources":["../../../src/components/Operator.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,CAyB3D"}

package/lib/components/Operator.js

@@ -21,9 +21,13 @@ export function Operator(props) {
         '!~'
     ];
     return /*#__PURE__*/ _jsx(Select, {
-        sx: {
-            borderRadius: '0'
-        },
+        sx: (theme)=>({
+                borderRadius: 0,
+                width: '100%',
+                [theme.breakpoints.down('sm')]: {
+                    borderTopRightRadius: 4
+                }
+            }),
         value: value,
         size: "small",
         onChange: (event)=>onChange?.(event.target.value),

package/lib/components/Operator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Operator.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 { ReactElement } from 'react';\nimport { Select, MenuItem } from '@mui/material';\n\nexport interface OperatorProps {\n  value: string;\n  onChange?(value: string): void;\n}\n\nexport function Operator(props: OperatorProps): ReactElement {\n  const { value, onChange } = props;\n\n  const operators = ['=', '!=', '=~', '!~'];\n\n  return (\n    <Select sx={{ borderRadius: '0' }} value={value} size=\"small\" onChange={(event) => onChange?.(event.target.value)}>\n      {operators.map((op) => (\n        <MenuItem key={op} value={op}>\n          {op}\n        </MenuItem>\n      ))}\n    </Select>\n  );\n}\n"],"names":["Select","MenuItem","Operator","props","value","onChange","operators","sx","borderRadius","size","event","target","map","op"],"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;;AAGjC,SAASA,MAAM,EAAEC,QAAQ,QAAQ,gBAAgB;AAOjD,OAAO,SAASC,SAASC,KAAoB;IAC3C,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGF;IAE5B,MAAMG,YAAY;QAAC;QAAK;QAAM;QAAM;KAAK;IAEzC,qBACE,KAACN;QAAOO,IAAI;YAAEC,cAAc;QAAI;QAAGJ,OAAOA;QAAOK,MAAK;QAAQJ,UAAU,CAACK,QAAUL,WAAWK,MAAMC,MAAM,CAACP,KAAK;kBAC7GE,UAAUM,GAAG,CAAC,CAACC,mBACd,KAACZ;gBAAkBG,OAAOS;0BACvBA;eADYA;;AAMvB"}
+{"version":3,"sources":["../../../src/components/Operator.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 { ReactElement } from 'react';\nimport { Select, MenuItem } from '@mui/material';\n\nexport interface OperatorProps {\n  value: string;\n  onChange?(value: string): void;\n}\n\nexport function Operator(props: OperatorProps): ReactElement {\n  const { value, onChange } = props;\n\n  const operators = ['=', '!=', '=~', '!~'];\n\n  return (\n    <Select\n      sx={(theme) => ({\n        borderRadius: 0,\n        width: '100%',\n        [theme.breakpoints.down('sm')]: {\n          borderTopRightRadius: 4,\n        },\n      })}\n      value={value}\n      size=\"small\"\n      onChange={(event) => onChange?.(event.target.value)}\n    >\n      {operators.map((op) => (\n        <MenuItem key={op} value={op}>\n          {op}\n        </MenuItem>\n      ))}\n    </Select>\n  );\n}\n"],"names":["Select","MenuItem","Operator","props","value","onChange","operators","sx","theme","borderRadius","width","breakpoints","down","borderTopRightRadius","size","event","target","map","op"],"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;;AAGjC,SAASA,MAAM,EAAEC,QAAQ,QAAQ,gBAAgB;AAOjD,OAAO,SAASC,SAASC,KAAoB;IAC3C,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGF;IAE5B,MAAMG,YAAY;QAAC;QAAK;QAAM;QAAM;KAAK;IAEzC,qBACE,KAACN;QACCO,IAAI,CAACC,QAAW,CAAA;gBACdC,cAAc;gBACdC,OAAO;gBACP,CAACF,MAAMG,WAAW,CAACC,IAAI,CAAC,MAAM,EAAE;oBAC9BC,sBAAsB;gBACxB;YACF,CAAA;QACAT,OAAOA;QACPU,MAAK;QACLT,UAAU,CAACU,QAAUV,WAAWU,MAAMC,MAAM,CAACZ,KAAK;kBAEjDE,UAAUW,GAAG,CAAC,CAACC,mBACd,KAACjB;gBAAkBG,OAAOc;0BACvBA;eADYA;;AAMvB"}

package/lib/components/ProfileTypeSelector.js

@@ -19,8 +19,7 @@ export function ProfileTypeSelector(props) {
     return /*#__PURE__*/ _jsx(Stack, {
         position: "relative",
         sx: {
-            flexGrow: 1,
-            maxWidth: '100%'
+            width: '100%'
         },
         children: /*#__PURE__*/ _jsx(TextField, {
             select: true,

package/lib/components/ProfileTypeSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ProfileTypeSelector.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 { ReactElement } from 'react';\nimport { Stack, TextField, MenuItem, CircularProgress } from '@mui/material';\nimport { PyroscopeDatasourceSelector } from '../model';\nimport { useProfileTypes } from '../utils/use-query';\n\nexport interface ProfileTypeSelectorProps {\n  datasource: PyroscopeDatasourceSelector;\n  value: string;\n  onChange?(value: string): void;\n}\n\nexport function ProfileTypeSelector(props: ProfileTypeSelectorProps): ReactElement {\n  const { datasource, value, onChange } = props;\n\n  const { data: profileTypesOptions, isLoading: isProfileTypesOptionsLoading } = useProfileTypes(datasource);\n\n  return (\n    <Stack position=\"relative\" sx={{ flexGrow: 1, maxWidth: '100%' }}>\n      <TextField\n        select\n        label=\"Profile Type\"\n        value={value}\n        size=\"small\"\n        onChange={(event) => onChange?.(event.target.value)}\n      >\n        {isProfileTypesOptionsLoading ? (\n          <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n            <CircularProgress color=\"inherit\" size={20} />\n          </Stack>\n        ) : (\n          profileTypesOptions?.profileTypes &&\n          profileTypesOptions?.profileTypes.map((type) => (\n            <MenuItem key={type.ID} value={type.ID}>\n              {type.name + '/' + type.sampleType}\n            </MenuItem>\n          ))\n        )}\n      </TextField>\n    </Stack>\n  );\n}\n"],"names":["Stack","TextField","MenuItem","CircularProgress","useProfileTypes","ProfileTypeSelector","props","datasource","value","onChange","data","profileTypesOptions","isLoading","isProfileTypesOptionsLoading","position","sx","flexGrow","maxWidth","select","label","size","event","target","width","alignItems","justifyContent","color","profileTypes","map","type","ID","name","sampleType"],"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;;AAGjC,SAASA,KAAK,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,gBAAgB,QAAQ,gBAAgB;AAE7E,SAASC,eAAe,QAAQ,qBAAqB;AAQrD,OAAO,SAASC,oBAAoBC,KAA+B;IACjE,MAAM,EAAEC,UAAU,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGH;IAExC,MAAM,EAAEI,MAAMC,mBAAmB,EAAEC,WAAWC,4BAA4B,EAAE,GAAGT,gBAAgBG;IAE/F,qBACE,KAACP;QAAMc,UAAS;QAAWC,IAAI;YAAEC,UAAU;YAAGC,UAAU;QAAO;kBAC7D,cAAA,KAAChB;YACCiB,MAAM;YACNC,OAAM;YACNX,OAAOA;YACPY,MAAK;YACLX,UAAU,CAACY,QAAUZ,WAAWY,MAAMC,MAAM,CAACd,KAAK;sBAEjDK,6CACC,KAACb;gBAAMuB,OAAM;gBAAOR,IAAI;oBAAES,YAAY;oBAAUC,gBAAgB;gBAAS;0BACvE,cAAA,KAACtB;oBAAiBuB,OAAM;oBAAUN,MAAM;;iBAG1CT,qBAAqBgB,gBACrBhB,qBAAqBgB,aAAaC,IAAI,CAACC,qBACrC,KAAC3B;oBAAuBM,OAAOqB,KAAKC,EAAE;8BACnCD,KAAKE,IAAI,GAAG,MAAMF,KAAKG,UAAU;mBADrBH,KAAKC,EAAE;;;AAQlC"}
+{"version":3,"sources":["../../../src/components/ProfileTypeSelector.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 { ReactElement } from 'react';\nimport { Stack, TextField, MenuItem, CircularProgress } from '@mui/material';\nimport { PyroscopeDatasourceSelector } from '../model';\nimport { useProfileTypes } from '../utils/use-query';\n\nexport interface ProfileTypeSelectorProps {\n  datasource: PyroscopeDatasourceSelector;\n  value: string;\n  onChange?(value: string): void;\n}\n\nexport function ProfileTypeSelector(props: ProfileTypeSelectorProps): ReactElement {\n  const { datasource, value, onChange } = props;\n\n  const { data: profileTypesOptions, isLoading: isProfileTypesOptionsLoading } = useProfileTypes(datasource);\n\n  return (\n    <Stack position=\"relative\" sx={{ width: '100%' }}>\n      <TextField\n        select\n        label=\"Profile Type\"\n        value={value}\n        size=\"small\"\n        onChange={(event) => onChange?.(event.target.value)}\n      >\n        {isProfileTypesOptionsLoading ? (\n          <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n            <CircularProgress color=\"inherit\" size={20} />\n          </Stack>\n        ) : (\n          profileTypesOptions?.profileTypes &&\n          profileTypesOptions?.profileTypes.map((type) => (\n            <MenuItem key={type.ID} value={type.ID}>\n              {type.name + '/' + type.sampleType}\n            </MenuItem>\n          ))\n        )}\n      </TextField>\n    </Stack>\n  );\n}\n"],"names":["Stack","TextField","MenuItem","CircularProgress","useProfileTypes","ProfileTypeSelector","props","datasource","value","onChange","data","profileTypesOptions","isLoading","isProfileTypesOptionsLoading","position","sx","width","select","label","size","event","target","alignItems","justifyContent","color","profileTypes","map","type","ID","name","sampleType"],"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;;AAGjC,SAASA,KAAK,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,gBAAgB,QAAQ,gBAAgB;AAE7E,SAASC,eAAe,QAAQ,qBAAqB;AAQrD,OAAO,SAASC,oBAAoBC,KAA+B;IACjE,MAAM,EAAEC,UAAU,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGH;IAExC,MAAM,EAAEI,MAAMC,mBAAmB,EAAEC,WAAWC,4BAA4B,EAAE,GAAGT,gBAAgBG;IAE/F,qBACE,KAACP;QAAMc,UAAS;QAAWC,IAAI;YAAEC,OAAO;QAAO;kBAC7C,cAAA,KAACf;YACCgB,MAAM;YACNC,OAAM;YACNV,OAAOA;YACPW,MAAK;YACLV,UAAU,CAACW,QAAUX,WAAWW,MAAMC,MAAM,CAACb,KAAK;sBAEjDK,6CACC,KAACb;gBAAMgB,OAAM;gBAAOD,IAAI;oBAAEO,YAAY;oBAAUC,gBAAgB;gBAAS;0BACvE,cAAA,KAACpB;oBAAiBqB,OAAM;oBAAUL,MAAM;;iBAG1CR,qBAAqBc,gBACrBd,qBAAqBc,aAAaC,IAAI,CAACC,qBACrC,KAACzB;oBAAuBM,OAAOmB,KAAKC,EAAE;8BACnCD,KAAKE,IAAI,GAAG,MAAMF,KAAKG,UAAU;mBADrBH,KAAKC,EAAE;;;AAQlC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Service.d.ts","sourceRoot":"","sources":["../../../src/components/Service.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAGvD,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,2BAA2B,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,YAAY,CAgCzD"}
+{"version":3,"file":"Service.d.ts","sourceRoot":"","sources":["../../../src/components/Service.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAkB,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAGvD,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,2BAA2B,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,YAAY,CA8BzD"}

package/lib/components/Service.js

@@ -11,40 +11,36 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Stack, TextField, MenuItem, CircularProgress, useTheme } from '@mui/material';
+import { Stack, TextField, Autocomplete } from '@mui/material';
 import { useServices } from '../utils/use-query';
 export function Service(props) {
     const { datasource, value, onChange } = props;
     const { data: servicesOptions, isLoading: isServicesOptionsLoading } = useServices(datasource);
+    function handleServiceChange(_event, newValue) {
+        if (newValue !== null) {
+            onChange?.(newValue);
+        }
+    }
     return /*#__PURE__*/ _jsx(Stack, {
         position: "relative",
         sx: {
-            flexGrow: 1,
-            maxWidth: '100%',
-            [useTheme().breakpoints.down('sm')]: {
-                width: '100%'
-            }
+            width: '100%'
         },
-        children: /*#__PURE__*/ _jsx(TextField, {
-            select: true,
-            label: "Service",
+        children: /*#__PURE__*/ _jsx(Autocomplete, {
+            options: servicesOptions?.names ?? [],
             value: value,
-            size: "small",
-            onChange: (event)=>onChange?.(event.target.value),
-            children: isServicesOptionsLoading ? /*#__PURE__*/ _jsx(Stack, {
-                width: "100%",
-                sx: {
-                    alignItems: 'center',
-                    justifyContent: 'center'
-                },
-                children: /*#__PURE__*/ _jsx(CircularProgress, {
-                    color: "inherit",
-                    size: 20
-                })
-            }) : servicesOptions?.names && servicesOptions?.names.map((service)=>/*#__PURE__*/ _jsx(MenuItem, {
-                    value: service,
-                    children: service
-                }, service))
+            sx: {
+                minWidth: 200
+            },
+            loading: isServicesOptionsLoading,
+            renderInput: (params)=>{
+                return /*#__PURE__*/ _jsx(TextField, {
+                    ...params,
+                    label: "Service",
+                    size: "small"
+                });
+            },
+            onChange: handleServiceChange
         })
     });
 }