@perses-dev/pyroscope-plugin 0.3.0 → 0.3.2

package/lib/cjs/components/FilterItem.js

@@ -52,32 +52,65 @@ function FilterItem(props) {
     const handleDeleteClick = ()=>{
         deleteItem?.();
     };
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
         direction: "row",
         spacing: 0,
-        sx: {
-            flexWrap: 'wrap',
-            maxWidth: '100%'
-        },
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_LabelName.LabelName, {
-                datasource: datasource,
-                value: value.labelName,
-                onChange: handleLabelNameChange
+        sx: (theme)=>({
+                flexWrap: 'wrap',
+                width: 500,
+                [theme.breakpoints.down('sm')]: {
+                    width: '100%'
+                }
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Operator.Operator, {
-                value: value.operator,
-                onChange: handleOperatorChange
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_LabelValue.LabelValue, {
-                datasource: datasource,
-                value: value.labelValue,
-                labelName: value.labelName,
-                onChange: handleLabelValueChange
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteFilterItem.DeleteFilterItem, {
-                onClick: handleDeleteClick
-            })
-        ]
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid2, {
+            container: true,
+            sx: {
+                width: '100%'
+            },
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                    size: {
+                        xs: 9.5,
+                        md: 4.5
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_LabelName.LabelName, {
+                        datasource: datasource,
+                        value: value.labelName,
+                        onChange: handleLabelNameChange
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                    size: {
+                        xs: 2.5,
+                        md: 1.5
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Operator.Operator, {
+                        value: value.operator,
+                        onChange: handleOperatorChange
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                    size: {
+                        xs: 10,
+                        md: 5
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_LabelValue.LabelValue, {
+                        datasource: datasource,
+                        value: value.labelValue,
+                        labelName: value.labelName,
+                        onChange: handleLabelValueChange
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid2, {
+                    size: {
+                        xs: 2,
+                        md: 1
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DeleteFilterItem.DeleteFilterItem, {
+                        onClick: handleDeleteClick
+                    })
+                })
+            ]
+        })
     });
 }

package/lib/cjs/components/LabelName.js

@@ -21,39 +21,41 @@ Object.defineProperty(exports, "LabelName", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
 const _material = require("@mui/material");
 const _usequery = require("../utils/use-query");
 function LabelName(props) {
     const { datasource, value, onChange } = props;
     const { data: labelNamesOptions, isLoading: isLabelNamesOptionsLoading } = (0, _usequery.useLabelNames)(datasource);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Select, {
-        sx: {
-            borderTopRightRadius: '0',
-            borderBottomRightRadius: '0'
-        },
+    const filteredLabelNamesOptions = (0, _react.useMemo)(()=>(0, _usequery.filterLabelNamesOptions)(labelNamesOptions?.names ?? []), [
+        labelNamesOptions
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.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__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                ...params,
+                placeholder: "Select label name",
+                size: "small"
+            });
         },
-        children: isLabelNamesOptionsLoading ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-            width: "100%",
-            sx: {
-                alignItems: 'center',
-                justifyContent: 'center'
-            },
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {
-                color: "inherit",
-                size: 20
-            })
-        }) : labelNamesOptions?.names && (0, _usequery.filterLabelNamesOptions)(labelNamesOptions?.names).map((labelName)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                value: labelName,
-                children: labelName
-            }, labelName))
+        onChange: (_event, newValue)=>{
+            if (newValue !== null) {
+                onChange?.(newValue);
+            }
+        }
     });
 }

package/lib/cjs/components/LabelValue.js

@@ -26,34 +26,33 @@ const _usequery = require("../utils/use-query");
 function LabelValue(props) {
     const { datasource, value, labelName, onChange } = props;
     const { data: labelValuesOptions, isLoading: isLabelValuesOptionsLoading } = (0, _usequery.useLabelValues)(datasource, labelName);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Select, {
-        sx: {
-            borderRadius: '0'
-        },
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.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__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                ...params,
+                placeholder: "Select label value",
+                size: "small"
+            });
         },
-        children: isLabelValuesOptionsLoading ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-            width: "100%",
-            sx: {
-                alignItems: 'center',
-                justifyContent: 'center'
-            },
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {
-                color: "inherit",
-                size: 20
-            })
-        }) : labelValuesOptions?.names && labelValuesOptions?.names.map((labelValue)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                value: labelValue,
-                children: labelValue
-            }, labelValue))
+        onChange: (_event, newInputValue)=>{
+            if (newInputValue !== null) {
+                onChange?.(newInputValue);
+            }
+        }
     });
 }

package/lib/cjs/components/Operator.js

@@ -31,9 +31,13 @@ function Operator(props) {
         '!~'
     ];
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.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/cjs/components/ProfileTypeSelector.js

@@ -29,8 +29,7 @@ function ProfileTypeSelector(props) {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
         position: "relative",
         sx: {
-            flexGrow: 1,
-            maxWidth: '100%'
+            width: '100%'
         },
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
             select: true,

package/lib/cjs/components/Service.js

@@ -26,35 +26,31 @@ const _usequery = require("../utils/use-query");
 function Service(props) {
     const { datasource, value, onChange } = props;
     const { data: servicesOptions, isLoading: isServicesOptionsLoading } = (0, _usequery.useServices)(datasource);
+    function handleServiceChange(_event, newValue) {
+        if (newValue !== null) {
+            onChange?.(newValue);
+        }
+    }
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
         position: "relative",
         sx: {
-            flexGrow: 1,
-            maxWidth: '100%',
-            [(0, _material.useTheme)().breakpoints.down('sm')]: {
-                width: '100%'
-            }
+            width: '100%'
         },
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
-            select: true,
-            label: "Service",
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
+            options: servicesOptions?.names ?? [],
             value: value,
-            size: "small",
-            onChange: (event)=>onChange?.(event.target.value),
-            children: isServicesOptionsLoading ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-                width: "100%",
-                sx: {
-                    alignItems: 'center',
-                    justifyContent: 'center'
-                },
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {
-                    color: "inherit",
-                    size: 20
-                })
-            }) : servicesOptions?.names && servicesOptions?.names.map((service)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                    value: service,
-                    children: service
-                }, service))
+            sx: {
+                minWidth: 200
+            },
+            loading: isServicesOptionsLoading,
+            renderInput: (params)=>{
+                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                    ...params,
+                    label: "Service",
+                    size: "small"
+                });
+            },
+            onChange: handleServiceChange
         })
     });
 }

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);
+            }
+        }
     });
 }