@perses-dev/pyroscope-plugin 0.3.0 → 0.3.2

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

package/lib/components/Service.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Service.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, useTheme } from '@mui/material';\nimport { PyroscopeDatasourceSelector } from '../model';\nimport { useServices } from '../utils/use-query';\n\nexport interface ServiceProps {\n  datasource: PyroscopeDatasourceSelector;\n  value: string;\n  onChange?(value: string): void;\n}\n\nexport function Service(props: ServiceProps): ReactElement {\n  const { datasource, value, onChange } = props;\n\n  const { data: servicesOptions, isLoading: isServicesOptionsLoading } = useServices(datasource);\n\n  return (\n    <Stack\n      position=\"relative\"\n      sx={{\n        flexGrow: 1,\n        maxWidth: '100%',\n        [useTheme().breakpoints.down('sm')]: {\n          width: '100%',\n        },\n      }}\n    >\n      <TextField select label=\"Service\" value={value} size=\"small\" onChange={(event) => onChange?.(event.target.value)}>\n        {isServicesOptionsLoading ? (\n          <Stack width=\"100%\" sx={{ alignItems: 'center', justifyContent: 'center' }}>\n            <CircularProgress color=\"inherit\" size={20} />\n          </Stack>\n        ) : (\n          servicesOptions?.names &&\n          servicesOptions?.names.map((service) => (\n            <MenuItem key={service} value={service}>\n              {service}\n            </MenuItem>\n          ))\n        )}\n      </TextField>\n    </Stack>\n  );\n}\n"],"names":["Stack","TextField","MenuItem","CircularProgress","useTheme","useServices","Service","props","datasource","value","onChange","data","servicesOptions","isLoading","isServicesOptionsLoading","position","sx","flexGrow","maxWidth","breakpoints","down","width","select","label","size","event","target","alignItems","justifyContent","color","names","map","service"],"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,EAAEC,QAAQ,QAAQ,gBAAgB;AAEvF,SAASC,WAAW,QAAQ,qBAAqB;AAQjD,OAAO,SAASC,QAAQC,KAAmB;IACzC,MAAM,EAAEC,UAAU,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGH;IAExC,MAAM,EAAEI,MAAMC,eAAe,EAAEC,WAAWC,wBAAwB,EAAE,GAAGT,YAAYG;IAEnF,qBACE,KAACR;QACCe,UAAS;QACTC,IAAI;YACFC,UAAU;YACVC,UAAU;YACV,CAACd,WAAWe,WAAW,CAACC,IAAI,CAAC,MAAM,EAAE;gBACnCC,OAAO;YACT;QACF;kBAEA,cAAA,KAACpB;YAAUqB,MAAM;YAACC,OAAM;YAAUd,OAAOA;YAAOe,MAAK;YAAQd,UAAU,CAACe,QAAUf,WAAWe,MAAMC,MAAM,CAACjB,KAAK;sBAC5GK,yCACC,KAACd;gBAAMqB,OAAM;gBAAOL,IAAI;oBAAEW,YAAY;oBAAUC,gBAAgB;gBAAS;0BACvE,cAAA,KAACzB;oBAAiB0B,OAAM;oBAAUL,MAAM;;iBAG1CZ,iBAAiBkB,SACjBlB,iBAAiBkB,MAAMC,IAAI,CAACC,wBAC1B,KAAC9B;oBAAuBO,OAAOuB;8BAC5BA;mBADYA;;;AAQ3B"}
+{"version":3,"sources":["../../../src/components/Service.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, SyntheticEvent } from 'react';\nimport { Stack, TextField, Autocomplete } from '@mui/material';\nimport { PyroscopeDatasourceSelector } from '../model';\nimport { useServices } from '../utils/use-query';\n\nexport interface ServiceProps {\n  datasource: PyroscopeDatasourceSelector;\n  value: string;\n  onChange?(value: string): void;\n}\n\nexport function Service(props: ServiceProps): ReactElement {\n  const { datasource, value, onChange } = props;\n\n  const { data: servicesOptions, isLoading: isServicesOptionsLoading } = useServices(datasource);\n\n  function handleServiceChange(_event: SyntheticEvent, newValue: string | null): void {\n    if (newValue !== null) {\n      onChange?.(newValue);\n    }\n  }\n\n  return (\n    <Stack\n      position=\"relative\"\n      sx={{\n        width: '100%',\n      }}\n    >\n      <Autocomplete\n        options={servicesOptions?.names ?? []}\n        value={value}\n        sx={{ minWidth: 200 }}\n        loading={isServicesOptionsLoading}\n        renderInput={(params) => {\n          return <TextField {...params} label=\"Service\" size=\"small\" />;\n        }}\n        onChange={handleServiceChange}\n      />\n    </Stack>\n  );\n}\n"],"names":["Stack","TextField","Autocomplete","useServices","Service","props","datasource","value","onChange","data","servicesOptions","isLoading","isServicesOptionsLoading","handleServiceChange","_event","newValue","position","sx","width","options","names","minWidth","loading","renderInput","params","label","size"],"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,YAAY,QAAQ,gBAAgB;AAE/D,SAASC,WAAW,QAAQ,qBAAqB;AAQjD,OAAO,SAASC,QAAQC,KAAmB;IACzC,MAAM,EAAEC,UAAU,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGH;IAExC,MAAM,EAAEI,MAAMC,eAAe,EAAEC,WAAWC,wBAAwB,EAAE,GAAGT,YAAYG;IAEnF,SAASO,oBAAoBC,MAAsB,EAAEC,QAAuB;QAC1E,IAAIA,aAAa,MAAM;YACrBP,WAAWO;QACb;IACF;IAEA,qBACE,KAACf;QACCgB,UAAS;QACTC,IAAI;YACFC,OAAO;QACT;kBAEA,cAAA,KAAChB;YACCiB,SAAST,iBAAiBU,SAAS,EAAE;YACrCb,OAAOA;YACPU,IAAI;gBAAEI,UAAU;YAAI;YACpBC,SAASV;YACTW,aAAa,CAACC;gBACZ,qBAAO,KAACvB;oBAAW,GAAGuB,MAAM;oBAAEC,OAAM;oBAAUC,MAAK;;YACrD;YACAlB,UAAUK;;;AAIlB"}

package/lib/plugins/pyroscope-profile-query/PyroscopeProfileQueryEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PyroscopeProfileQueryEditor.d.ts","sourceRoot":"","sources":["../../../../src/plugins/pyroscope-profile-query/PyroscopeProfileQueryEditor.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAQrC,OAAO,EACL,uBAAuB,EAKxB,MAAM,sBAAsB,CAAC;AAE9B,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,CAmExF"}
+{"version":3,"file":"PyroscopeProfileQueryEditor.d.ts","sourceRoot":"","sources":["../../../../src/plugins/pyroscope-profile-query/PyroscopeProfileQueryEditor.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAQrC,OAAO,EACL,uBAAuB,EAKxB,MAAM,sBAAsB,CAAC;AAE9B,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,CAqExF"}

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

@@ -14,8 +14,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DatasourceSelect } from '@perses-dev/plugin-system';
 import { useId } from '@perses-dev/components';
 import { produce } from 'immer';
-import { FormControl, InputLabel, Stack, TextField } from '@mui/material';
-import { DEFAULT_PYROSCOPE, isDefaultPyroscopeSelector, isPyroscopeDatasourceSelector, PYROSCOPE_DATASOURCE_KIND } from '../../model/pyroscope-selectors';
+import { FormControl, InputLabel, Stack, TextField, useTheme } from '@mui/material';
+import { DEFAULT_PYROSCOPE, isDefaultPyroscopeSelector, isPyroscopeDatasourceSelector, PYROSCOPE_DATASOURCE_KIND } from '../../model';
 import { ProfileTypeSelector, Service, Filters } from '../../components';
 import { useMaxNodesState, useProfileTypeState, useServiceState, useFiltersState } from './query-editor-model';
 export function PyroscopeProfileQueryEditor(props) {
@@ -33,8 +33,7 @@ export function PyroscopeProfileQueryEditor(props) {
             if (isPyroscopeDatasourceSelector(next)) {
                 onChange(produce(value, (draft)=>{
                     // If they're using the default, just omit the datasource prop (i.e. set to undefined)
-                    const nextDatasource = isDefaultPyroscopeSelector(next) ? undefined : next;
-                    draft.datasource = nextDatasource;
+                    draft.datasource = isDefaultPyroscopeSelector(next) ? undefined : next;
                 }));
                 return;
             }
@@ -65,11 +64,12 @@ export function PyroscopeProfileQueryEditor(props) {
             }),
             /*#__PURE__*/ _jsxs(Stack, {
                 direction: "row",
-                spacing: 0,
                 sx: {
-                    flexWrap: 'wrap',
-                    rowGap: 1,
-                    gap: 2
+                    [useTheme().breakpoints.down('sm')]: {
+                        flexWrap: 'wrap'
+                    },
+                    gap: 2,
+                    rowGap: 1
                 },
                 children: [
                     /*#__PURE__*/ _jsx(Service, {
@@ -83,13 +83,22 @@ export function PyroscopeProfileQueryEditor(props) {
                         onChange: handleProfileTypeChange
                     }),
                     /*#__PURE__*/ _jsx(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/plugins/pyroscope-profile-query/PyroscopeProfileQueryEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/plugins/pyroscope-profile-query/PyroscopeProfileQueryEditor.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 { DatasourceSelect, DatasourceSelectProps } from '@perses-dev/plugin-system';\nimport { useId } from '@perses-dev/components';\nimport { produce } from 'immer';\nimport { FormControl, InputLabel, Stack, TextField } from '@mui/material';\nimport { ReactElement } from 'react';\nimport {\n  DEFAULT_PYROSCOPE,\n  isDefaultPyroscopeSelector,\n  isPyroscopeDatasourceSelector,\n  PYROSCOPE_DATASOURCE_KIND,\n} from '../../model/pyroscope-selectors';\nimport { ProfileTypeSelector, Service, Filters } from '../../components';\nimport {\n  ProfileQueryEditorProps,\n  useMaxNodesState,\n  useProfileTypeState,\n  useServiceState,\n  useFiltersState,\n} from './query-editor-model';\n\nexport function PyroscopeProfileQueryEditor(props: ProfileQueryEditorProps): ReactElement {\n  const { onChange, value } = props;\n  const { datasource } = value;\n  const selectedDatasource = datasource ?? DEFAULT_PYROSCOPE;\n  const datasourceSelectLabelID = useId('pyroscope-datasource-label');\n\n  const { maxNodes, handleMaxNodesChange, maxNodesHasError } = useMaxNodesState(props);\n  const { profileType, handleProfileTypeChange } = useProfileTypeState(props);\n  const { service, handleServiceChange } = useServiceState(props);\n  const { filters, handleFiltersChange } = useFiltersState(props);\n\n  const handleDatasourceChange: DatasourceSelectProps['onChange'] = (next) => {\n    // Check if the next value is a DatasourceSelector\n    if (typeof next === 'object' && 'kind' in next && 'name' in next) {\n      if (isPyroscopeDatasourceSelector(next)) {\n        onChange(\n          produce(value, (draft) => {\n            // If they're using the default, just omit the datasource prop (i.e. set to undefined)\n            const nextDatasource = isDefaultPyroscopeSelector(next) ? undefined : next;\n            draft.datasource = nextDatasource;\n          })\n        );\n        return;\n      }\n    }\n\n    throw new Error('Got unexpected non-Pyroscope datasource selector');\n  };\n\n  return (\n    <Stack spacing={2}>\n      <FormControl margin=\"dense\" fullWidth={false}>\n        <InputLabel id={datasourceSelectLabelID} shrink>\n          Pyroscope Datasource\n        </InputLabel>\n        <DatasourceSelect\n          datasourcePluginKind={PYROSCOPE_DATASOURCE_KIND}\n          value={selectedDatasource}\n          onChange={handleDatasourceChange}\n          labelId={datasourceSelectLabelID}\n          label=\"Pyroscope Datasource\"\n          notched\n        />\n      </FormControl>\n      <Stack\n        direction=\"row\"\n        spacing={0}\n        sx={{\n          flexWrap: 'wrap',\n          rowGap: 1,\n          gap: 2,\n        }}\n      >\n        <Service datasource={selectedDatasource} value={service} onChange={handleServiceChange} />\n        <ProfileTypeSelector datasource={selectedDatasource} value={profileType} onChange={handleProfileTypeChange} />\n        <TextField\n          size=\"small\"\n          label=\"Max Nodes\"\n          value={maxNodes}\n          error={maxNodesHasError}\n          onChange={(e) => handleMaxNodesChange(e.target.value)}\n          sx={{ width: '110px' }}\n        />\n      </Stack>\n      <Filters datasource={selectedDatasource} value={filters} onChange={handleFiltersChange} />\n    </Stack>\n  );\n}\n"],"names":["DatasourceSelect","useId","produce","FormControl","InputLabel","Stack","TextField","DEFAULT_PYROSCOPE","isDefaultPyroscopeSelector","isPyroscopeDatasourceSelector","PYROSCOPE_DATASOURCE_KIND","ProfileTypeSelector","Service","Filters","useMaxNodesState","useProfileTypeState","useServiceState","useFiltersState","PyroscopeProfileQueryEditor","props","onChange","value","datasource","selectedDatasource","datasourceSelectLabelID","maxNodes","handleMaxNodesChange","maxNodesHasError","profileType","handleProfileTypeChange","service","handleServiceChange","filters","handleFiltersChange","handleDatasourceChange","next","draft","nextDatasource","undefined","Error","spacing","margin","fullWidth","id","shrink","datasourcePluginKind","labelId","label","notched","direction","sx","flexWrap","rowGap","gap","size","error","e","target","width"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,gBAAgB,QAA+B,4BAA4B;AACpF,SAASC,KAAK,QAAQ,yBAAyB;AAC/C,SAASC,OAAO,QAAQ,QAAQ;AAChC,SAASC,WAAW,EAAEC,UAAU,EAAEC,KAAK,EAAEC,SAAS,QAAQ,gBAAgB;AAE1E,SACEC,iBAAiB,EACjBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,yBAAyB,QACpB,kCAAkC;AACzC,SAASC,mBAAmB,EAAEC,OAAO,EAAEC,OAAO,QAAQ,mBAAmB;AACzE,SAEEC,gBAAgB,EAChBC,mBAAmB,EACnBC,eAAe,EACfC,eAAe,QACV,uBAAuB;AAE9B,OAAO,SAASC,4BAA4BC,KAA8B;IACxE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAC5B,MAAM,EAAEG,UAAU,EAAE,GAAGD;IACvB,MAAME,qBAAqBD,cAAcf;IACzC,MAAMiB,0BAA0BvB,MAAM;IAEtC,MAAM,EAAEwB,QAAQ,EAAEC,oBAAoB,EAAEC,gBAAgB,EAAE,GAAGb,iBAAiBK;IAC9E,MAAM,EAAES,WAAW,EAAEC,uBAAuB,EAAE,GAAGd,oBAAoBI;IACrE,MAAM,EAAEW,OAAO,EAAEC,mBAAmB,EAAE,GAAGf,gBAAgBG;IACzD,MAAM,EAAEa,OAAO,EAAEC,mBAAmB,EAAE,GAAGhB,gBAAgBE;IAEzD,MAAMe,yBAA4D,CAACC;QACjE,kDAAkD;QAClD,IAAI,OAAOA,SAAS,YAAY,UAAUA,QAAQ,UAAUA,MAAM;YAChE,IAAI1B,8BAA8B0B,OAAO;gBACvCf,SACElB,QAAQmB,OAAO,CAACe;oBACd,sFAAsF;oBACtF,MAAMC,iBAAiB7B,2BAA2B2B,QAAQG,YAAYH;oBACtEC,MAAMd,UAAU,GAAGe;gBACrB;gBAEF;YACF;QACF;QAEA,MAAM,IAAIE,MAAM;IAClB;IAEA,qBACE,MAAClC;QAAMmC,SAAS;;0BACd,MAACrC;gBAAYsC,QAAO;gBAAQC,WAAW;;kCACrC,KAACtC;wBAAWuC,IAAInB;wBAAyBoB,MAAM;kCAAC;;kCAGhD,KAAC5C;wBACC6C,sBAAsBnC;wBACtBW,OAAOE;wBACPH,UAAUc;wBACVY,SAAStB;wBACTuB,OAAM;wBACNC,OAAO;;;;0BAGX,MAAC3C;gBACC4C,WAAU;gBACVT,SAAS;gBACTU,IAAI;oBACFC,UAAU;oBACVC,QAAQ;oBACRC,KAAK;gBACP;;kCAEA,KAACzC;wBAAQU,YAAYC;wBAAoBF,OAAOS;wBAASV,UAAUW;;kCACnE,KAACpB;wBAAoBW,YAAYC;wBAAoBF,OAAOO;wBAAaR,UAAUS;;kCACnF,KAACvB;wBACCgD,MAAK;wBACLP,OAAM;wBACN1B,OAAOI;wBACP8B,OAAO5B;wBACPP,UAAU,CAACoC,IAAM9B,qBAAqB8B,EAAEC,MAAM,CAACpC,KAAK;wBACpD6B,IAAI;4BAAEQ,OAAO;wBAAQ;;;;0BAGzB,KAAC7C;gBAAQS,YAAYC;gBAAoBF,OAAOW;gBAASZ,UAAUa;;;;AAGzE"}
+{"version":3,"sources":["../../../../src/plugins/pyroscope-profile-query/PyroscopeProfileQueryEditor.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 { DatasourceSelect, DatasourceSelectProps } from '@perses-dev/plugin-system';\nimport { useId } from '@perses-dev/components';\nimport { produce } from 'immer';\nimport { FormControl, InputLabel, Stack, TextField, useTheme } from '@mui/material';\nimport { ReactElement } from 'react';\nimport {\n  DEFAULT_PYROSCOPE,\n  isDefaultPyroscopeSelector,\n  isPyroscopeDatasourceSelector,\n  PYROSCOPE_DATASOURCE_KIND,\n} from '../../model';\nimport { ProfileTypeSelector, Service, Filters } from '../../components';\nimport {\n  ProfileQueryEditorProps,\n  useMaxNodesState,\n  useProfileTypeState,\n  useServiceState,\n  useFiltersState,\n} from './query-editor-model';\n\nexport function PyroscopeProfileQueryEditor(props: ProfileQueryEditorProps): ReactElement {\n  const { onChange, value } = props;\n  const { datasource } = value;\n  const selectedDatasource = datasource ?? DEFAULT_PYROSCOPE;\n  const datasourceSelectLabelID = useId('pyroscope-datasource-label');\n\n  const { maxNodes, handleMaxNodesChange, maxNodesHasError } = useMaxNodesState(props);\n  const { profileType, handleProfileTypeChange } = useProfileTypeState(props);\n  const { service, handleServiceChange } = useServiceState(props);\n  const { filters, handleFiltersChange } = useFiltersState(props);\n\n  const handleDatasourceChange: DatasourceSelectProps['onChange'] = (next) => {\n    // Check if the next value is a DatasourceSelector\n    if (typeof next === 'object' && 'kind' in next && 'name' in next) {\n      if (isPyroscopeDatasourceSelector(next)) {\n        onChange(\n          produce(value, (draft) => {\n            // If they're using the default, just omit the datasource prop (i.e. set to undefined)\n            draft.datasource = isDefaultPyroscopeSelector(next) ? undefined : next;\n          })\n        );\n        return;\n      }\n    }\n\n    throw new Error('Got unexpected non-Pyroscope datasource selector');\n  };\n\n  return (\n    <Stack spacing={2}>\n      <FormControl margin=\"dense\" fullWidth={false}>\n        <InputLabel id={datasourceSelectLabelID} shrink>\n          Pyroscope Datasource\n        </InputLabel>\n        <DatasourceSelect\n          datasourcePluginKind={PYROSCOPE_DATASOURCE_KIND}\n          value={selectedDatasource}\n          onChange={handleDatasourceChange}\n          labelId={datasourceSelectLabelID}\n          label=\"Pyroscope Datasource\"\n          notched\n        />\n      </FormControl>\n      <Stack\n        direction=\"row\"\n        sx={{\n          [useTheme().breakpoints.down('sm')]: {\n            flexWrap: 'wrap',\n          },\n          gap: 2,\n          rowGap: 1,\n        }}\n      >\n        <Service datasource={selectedDatasource} value={service} onChange={handleServiceChange} />\n        <ProfileTypeSelector datasource={selectedDatasource} value={profileType} onChange={handleProfileTypeChange} />\n        <TextField\n          type=\"number\"\n          size=\"small\"\n          label=\"Max Nodes\"\n          value={maxNodes}\n          error={maxNodesHasError}\n          onChange={(e) => handleMaxNodesChange(e.target.value)}\n          sx={(theme) => ({ width: 250, [theme.breakpoints.down('sm')]: { width: '100%' } })}\n          slotProps={{ htmlInput: { step: 1 } }}\n        />\n      </Stack>\n      <Filters datasource={selectedDatasource} value={filters} onChange={handleFiltersChange} />\n    </Stack>\n  );\n}\n"],"names":["DatasourceSelect","useId","produce","FormControl","InputLabel","Stack","TextField","useTheme","DEFAULT_PYROSCOPE","isDefaultPyroscopeSelector","isPyroscopeDatasourceSelector","PYROSCOPE_DATASOURCE_KIND","ProfileTypeSelector","Service","Filters","useMaxNodesState","useProfileTypeState","useServiceState","useFiltersState","PyroscopeProfileQueryEditor","props","onChange","value","datasource","selectedDatasource","datasourceSelectLabelID","maxNodes","handleMaxNodesChange","maxNodesHasError","profileType","handleProfileTypeChange","service","handleServiceChange","filters","handleFiltersChange","handleDatasourceChange","next","draft","undefined","Error","spacing","margin","fullWidth","id","shrink","datasourcePluginKind","labelId","label","notched","direction","sx","breakpoints","down","flexWrap","gap","rowGap","type","size","error","e","target","theme","width","slotProps","htmlInput","step"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,gBAAgB,QAA+B,4BAA4B;AACpF,SAASC,KAAK,QAAQ,yBAAyB;AAC/C,SAASC,OAAO,QAAQ,QAAQ;AAChC,SAASC,WAAW,EAAEC,UAAU,EAAEC,KAAK,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,gBAAgB;AAEpF,SACEC,iBAAiB,EACjBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,yBAAyB,QACpB,cAAc;AACrB,SAASC,mBAAmB,EAAEC,OAAO,EAAEC,OAAO,QAAQ,mBAAmB;AACzE,SAEEC,gBAAgB,EAChBC,mBAAmB,EACnBC,eAAe,EACfC,eAAe,QACV,uBAAuB;AAE9B,OAAO,SAASC,4BAA4BC,KAA8B;IACxE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAC5B,MAAM,EAAEG,UAAU,EAAE,GAAGD;IACvB,MAAME,qBAAqBD,cAAcf;IACzC,MAAMiB,0BAA0BxB,MAAM;IAEtC,MAAM,EAAEyB,QAAQ,EAAEC,oBAAoB,EAAEC,gBAAgB,EAAE,GAAGb,iBAAiBK;IAC9E,MAAM,EAAES,WAAW,EAAEC,uBAAuB,EAAE,GAAGd,oBAAoBI;IACrE,MAAM,EAAEW,OAAO,EAAEC,mBAAmB,EAAE,GAAGf,gBAAgBG;IACzD,MAAM,EAAEa,OAAO,EAAEC,mBAAmB,EAAE,GAAGhB,gBAAgBE;IAEzD,MAAMe,yBAA4D,CAACC;QACjE,kDAAkD;QAClD,IAAI,OAAOA,SAAS,YAAY,UAAUA,QAAQ,UAAUA,MAAM;YAChE,IAAI1B,8BAA8B0B,OAAO;gBACvCf,SACEnB,QAAQoB,OAAO,CAACe;oBACd,sFAAsF;oBACtFA,MAAMd,UAAU,GAAGd,2BAA2B2B,QAAQE,YAAYF;gBACpE;gBAEF;YACF;QACF;QAEA,MAAM,IAAIG,MAAM;IAClB;IAEA,qBACE,MAAClC;QAAMmC,SAAS;;0BACd,MAACrC;gBAAYsC,QAAO;gBAAQC,WAAW;;kCACrC,KAACtC;wBAAWuC,IAAIlB;wBAAyBmB,MAAM;kCAAC;;kCAGhD,KAAC5C;wBACC6C,sBAAsBlC;wBACtBW,OAAOE;wBACPH,UAAUc;wBACVW,SAASrB;wBACTsB,OAAM;wBACNC,OAAO;;;;0BAGX,MAAC3C;gBACC4C,WAAU;gBACVC,IAAI;oBACF,CAAC3C,WAAW4C,WAAW,CAACC,IAAI,CAAC,MAAM,EAAE;wBACnCC,UAAU;oBACZ;oBACAC,KAAK;oBACLC,QAAQ;gBACV;;kCAEA,KAAC1C;wBAAQU,YAAYC;wBAAoBF,OAAOS;wBAASV,UAAUW;;kCACnE,KAACpB;wBAAoBW,YAAYC;wBAAoBF,OAAOO;wBAAaR,UAAUS;;kCACnF,KAACxB;wBACCkD,MAAK;wBACLC,MAAK;wBACLV,OAAM;wBACNzB,OAAOI;wBACPgC,OAAO9B;wBACPP,UAAU,CAACsC,IAAMhC,qBAAqBgC,EAAEC,MAAM,CAACtC,KAAK;wBACpD4B,IAAI,CAACW,QAAW,CAAA;gCAAEC,OAAO;gCAAK,CAACD,MAAMV,WAAW,CAACC,IAAI,CAAC,MAAM,EAAE;oCAAEU,OAAO;gCAAO;4BAAE,CAAA;wBAChFC,WAAW;4BAAEC,WAAW;gCAAEC,MAAM;4BAAE;wBAAE;;;;0BAGxC,KAACnD;gBAAQS,YAAYC;gBAAoBF,OAAOW;gBAASZ,UAAUa;;;;AAGzE"}