@perses-dev/pyroscope-plugin 0.2.0

package/lib/components/FilterItem.js

@@ -0,0 +1,75 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack } from '@mui/material';
+import { LabelName } from './LabelName';
+import { Operator } from './Operator';
+import { LabelValue } from './LabelValue';
+import { DeleteFilterItem } from './DeleteFilterItem';
+export function FilterItem(props) {
+    const { datasource, value, onChange, deleteItem } = props;
+    const handleLabelNameChange = (label)=>{
+        onChange?.({
+            labelName: label,
+            labelValue: '',
+            operator: value.operator
+        });
+    };
+    const handleOperatorChange = (op)=>{
+        onChange?.({
+            labelName: value.labelName,
+            labelValue: value.labelValue,
+            operator: op
+        });
+    };
+    const handleLabelValueChange = (val)=>{
+        onChange?.({
+            labelName: value.labelName,
+            labelValue: val,
+            operator: value.operator
+        });
+    };
+    const handleDeleteClick = ()=>{
+        deleteItem?.();
+    };
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 0,
+        sx: {
+            flexWrap: 'wrap',
+            maxWidth: '100%'
+        },
+        children: [
+            /*#__PURE__*/ _jsx(LabelName, {
+                datasource: datasource,
+                value: value.labelName,
+                onChange: handleLabelNameChange
+            }),
+            /*#__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
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=FilterItem.js.map

package/lib/components/FilterItem.js.map

@@ -0,0 +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"}

package/lib/components/Filters.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { PyroscopeDatasourceSelector } from '../model';
+import { LabelFilter } from '../utils/types';
+export interface FiltersProps {
+    datasource: PyroscopeDatasourceSelector;
+    value: LabelFilter[];
+    onChange?: (value: LabelFilter[]) => void;
+}
+export declare function Filters(props: FiltersProps): ReactElement;
+//# sourceMappingURL=Filters.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Filters.d.ts","sourceRoot":"","sources":["../../../src/components/Filters.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI7C,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,2BAA2B,CAAC;IACxC,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,YAAY,CAqEzD"}

package/lib/components/Filters.js

@@ -0,0 +1,98 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InputLabel, Stack, useTheme } from '@mui/material';
+import { FilterItem } from './FilterItem';
+import { AddFilterItem } from './AddFilterItem';
+export function Filters(props) {
+    const theme = useTheme();
+    const { datasource, value, onChange } = props;
+    const addFilterItem = ()=>{
+        const newItem = {
+            labelName: '',
+            labelValue: '',
+            operator: '='
+        };
+        const updatedFilters = [
+            ...value,
+            newItem
+        ];
+        onChange?.(updatedFilters);
+    };
+    const updateFilter = (index, newValue)=>{
+        const nextFilters = [
+            ...value
+        ];
+        nextFilters[index] = newValue;
+        onChange?.(nextFilters);
+    };
+    const deleteFilter = (index)=>{
+        const nextFilters = [
+            ...value
+        ];
+        nextFilters.splice(index, 1);
+        if (nextFilters.length === 0) {
+            onChange?.([
+                {
+                    labelName: '',
+                    labelValue: '',
+                    operator: '='
+                }
+            ]); // keep at least one empty filter
+        } else {
+            onChange?.(nextFilters);
+        }
+    };
+    return /*#__PURE__*/ _jsxs(Stack, {
+        position: "relative",
+        direction: "row",
+        spacing: 0,
+        sx: {
+            flexWrap: 'wrap',
+            rowGap: 1,
+            gap: 1,
+            padding: '10px',
+            border: `1px solid ${theme.palette.action.disabled}`,
+            borderRadius: `${theme.shape.borderRadius}px`,
+            '&:hover': {
+                borderColor: theme.palette.text.primary
+            }
+        },
+        children: [
+            /*#__PURE__*/ _jsx(InputLabel, {
+                shrink: true,
+                sx: {
+                    position: 'absolute',
+                    top: '-6px',
+                    left: '10px',
+                    padding: '0 4px',
+                    color: theme.palette.text.primary,
+                    backgroundColor: theme.palette.background.default,
+                    zIndex: 1
+                },
+                children: "Filters"
+            }),
+            value.map((filter, index)=>/*#__PURE__*/ _jsx(FilterItem, {
+                    datasource: datasource,
+                    value: filter,
+                    onChange: (newValue)=>updateFilter(index, newValue),
+                    deleteItem: ()=>deleteFilter(index)
+                }, `${filter.labelName}:${filter.operator}:${filter.labelValue}`)),
+            /*#__PURE__*/ _jsx(AddFilterItem, {
+                onClick: addFilterItem
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=Filters.js.map

package/lib/components/Filters.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Filters.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 { InputLabel, Stack, useTheme } from '@mui/material';\nimport { PyroscopeDatasourceSelector } from '../model';\nimport { LabelFilter } from '../utils/types';\nimport { FilterItem } from './FilterItem';\nimport { AddFilterItem } from './AddFilterItem';\n\nexport interface FiltersProps {\n  datasource: PyroscopeDatasourceSelector;\n  value: LabelFilter[];\n  onChange?: (value: LabelFilter[]) => void;\n}\n\nexport function Filters(props: FiltersProps): ReactElement {\n  const theme = useTheme();\n  const { datasource, value, onChange } = props;\n\n  const addFilterItem = () => {\n    const newItem: LabelFilter = { labelName: '', labelValue: '', operator: '=' };\n    const updatedFilters = [...value, newItem];\n    onChange?.(updatedFilters);\n  };\n\n  const updateFilter = (index: number, newValue: LabelFilter) => {\n    const nextFilters = [...value];\n    nextFilters[index] = newValue;\n    onChange?.(nextFilters);\n  };\n\n  const deleteFilter = (index: number) => {\n    const nextFilters = [...value];\n    nextFilters.splice(index, 1);\n    if (nextFilters.length === 0) {\n      onChange?.([{ labelName: '', labelValue: '', operator: '=' }]); // keep at least one empty filter\n    } else {\n      onChange?.(nextFilters);\n    }\n  };\n\n  return (\n    <Stack\n      position=\"relative\"\n      direction=\"row\"\n      spacing={0}\n      sx={{\n        flexWrap: 'wrap',\n        rowGap: 1,\n        gap: 1,\n        padding: '10px',\n        border: `1px solid ${theme.palette.action.disabled}`,\n        borderRadius: `${theme.shape.borderRadius}px`,\n        '&:hover': {\n          borderColor: theme.palette.text.primary,\n        },\n      }}\n    >\n      <InputLabel\n        shrink\n        sx={{\n          position: 'absolute',\n          top: '-6px',\n          left: '10px',\n          padding: '0 4px',\n          color: theme.palette.text.primary,\n          backgroundColor: theme.palette.background.default,\n          zIndex: 1,\n        }}\n      >\n        Filters\n      </InputLabel>\n      {value.map((filter, index) => (\n        <FilterItem\n          key={`${filter.labelName}:${filter.operator}:${filter.labelValue}`}\n          datasource={datasource}\n          value={filter}\n          onChange={(newValue) => updateFilter(index, newValue)}\n          deleteItem={() => deleteFilter(index)}\n        />\n      ))}\n      <AddFilterItem onClick={addFilterItem} />\n    </Stack>\n  );\n}\n"],"names":["InputLabel","Stack","useTheme","FilterItem","AddFilterItem","Filters","props","theme","datasource","value","onChange","addFilterItem","newItem","labelName","labelValue","operator","updatedFilters","updateFilter","index","newValue","nextFilters","deleteFilter","splice","length","position","direction","spacing","sx","flexWrap","rowGap","gap","padding","border","palette","action","disabled","borderRadius","shape","borderColor","text","primary","shrink","top","left","color","backgroundColor","background","default","zIndex","map","filter","deleteItem","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,UAAU,EAAEC,KAAK,EAAEC,QAAQ,QAAQ,gBAAgB;AAG5D,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,aAAa,QAAQ,kBAAkB;AAQhD,OAAO,SAASC,QAAQC,KAAmB;IACzC,MAAMC,QAAQL;IACd,MAAM,EAAEM,UAAU,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GAAGJ;IAExC,MAAMK,gBAAgB;QACpB,MAAMC,UAAuB;YAAEC,WAAW;YAAIC,YAAY;YAAIC,UAAU;QAAI;QAC5E,MAAMC,iBAAiB;eAAIP;YAAOG;SAAQ;QAC1CF,WAAWM;IACb;IAEA,MAAMC,eAAe,CAACC,OAAeC;QACnC,MAAMC,cAAc;eAAIX;SAAM;QAC9BW,WAAW,CAACF,MAAM,GAAGC;QACrBT,WAAWU;IACb;IAEA,MAAMC,eAAe,CAACH;QACpB,MAAME,cAAc;eAAIX;SAAM;QAC9BW,YAAYE,MAAM,CAACJ,OAAO;QAC1B,IAAIE,YAAYG,MAAM,KAAK,GAAG;YAC5Bb,WAAW;gBAAC;oBAAEG,WAAW;oBAAIC,YAAY;oBAAIC,UAAU;gBAAI;aAAE,GAAG,iCAAiC;QACnG,OAAO;YACLL,WAAWU;QACb;IACF;IAEA,qBACE,MAACnB;QACCuB,UAAS;QACTC,WAAU;QACVC,SAAS;QACTC,IAAI;YACFC,UAAU;YACVC,QAAQ;YACRC,KAAK;YACLC,SAAS;YACTC,QAAQ,CAAC,UAAU,EAAEzB,MAAM0B,OAAO,CAACC,MAAM,CAACC,QAAQ,EAAE;YACpDC,cAAc,GAAG7B,MAAM8B,KAAK,CAACD,YAAY,CAAC,EAAE,CAAC;YAC7C,WAAW;gBACTE,aAAa/B,MAAM0B,OAAO,CAACM,IAAI,CAACC,OAAO;YACzC;QACF;;0BAEA,KAACxC;gBACCyC,MAAM;gBACNd,IAAI;oBACFH,UAAU;oBACVkB,KAAK;oBACLC,MAAM;oBACNZ,SAAS;oBACTa,OAAOrC,MAAM0B,OAAO,CAACM,IAAI,CAACC,OAAO;oBACjCK,iBAAiBtC,MAAM0B,OAAO,CAACa,UAAU,CAACC,OAAO;oBACjDC,QAAQ;gBACV;0BACD;;YAGAvC,MAAMwC,GAAG,CAAC,CAACC,QAAQhC,sBAClB,KAACf;oBAECK,YAAYA;oBACZC,OAAOyC;oBACPxC,UAAU,CAACS,WAAaF,aAAaC,OAAOC;oBAC5CgC,YAAY,IAAM9B,aAAaH;mBAJ1B,GAAGgC,OAAOrC,SAAS,CAAC,CAAC,EAAEqC,OAAOnC,QAAQ,CAAC,CAAC,EAAEmC,OAAOpC,UAAU,EAAE;0BAOtE,KAACV;gBAAcgD,SAASzC;;;;AAG9B"}

package/lib/components/LabelName.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { PyroscopeDatasourceSelector } from '../model';
+export interface LabelNameProps {
+    datasource: PyroscopeDatasourceSelector;
+    value: string;
+    onChange?(value: string): void;
+}
+export declare function LabelName(props: LabelNameProps): ReactElement;
+//# sourceMappingURL=LabelName.d.ts.map

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

@@ -0,0 +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"}

package/lib/components/LabelName.js

@@ -0,0 +1,51 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Select, MenuItem, CircularProgress, Stack } 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'
+        },
+        value: value,
+        size: "small",
+        onChange: (event)=>onChange?.(event.target.value),
+        displayEmpty: true,
+        renderValue: (selected)=>{
+            if (selected === '') {
+                return 'Select label name';
+            }
+            return selected;
+        },
+        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))
+    });
+}
+
+//# sourceMappingURL=LabelName.js.map

package/lib/components/LabelName.js.map

@@ -0,0 +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"}

package/lib/components/LabelValue.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+import { PyroscopeDatasourceSelector } from '../model';
+export interface LabelValueProps {
+    datasource: PyroscopeDatasourceSelector;
+    value: string;
+    labelName: string;
+    onChange?(value: string): void;
+}
+export declare function LabelValue(props: LabelValueProps): ReactElement;
+//# sourceMappingURL=LabelValue.d.ts.map

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

@@ -0,0 +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"}

package/lib/components/LabelValue.js

@@ -0,0 +1,51 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Select, MenuItem, CircularProgress, Stack } 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'
+        },
+        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;
+        },
+        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))
+    });
+}
+
+//# sourceMappingURL=LabelValue.js.map

package/lib/components/LabelValue.js.map

@@ -0,0 +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"}

package/lib/components/Operator.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+export interface OperatorProps {
+    value: string;
+    onChange?(value: string): void;
+}
+export declare function Operator(props: OperatorProps): ReactElement;
+//# sourceMappingURL=Operator.d.ts.map

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

@@ -0,0 +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"}

package/lib/components/Operator.js

@@ -0,0 +1,37 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Select, MenuItem } from '@mui/material';
+export function Operator(props) {
+    const { value, onChange } = props;
+    const operators = [
+        '=',
+        '!=',
+        '=~',
+        '!~'
+    ];
+    return /*#__PURE__*/ _jsx(Select, {
+        sx: {
+            borderRadius: '0'
+        },
+        value: value,
+        size: "small",
+        onChange: (event)=>onChange?.(event.target.value),
+        children: operators.map((op)=>/*#__PURE__*/ _jsx(MenuItem, {
+                value: op,
+                children: op
+            }, op))
+    });
+}
+
+//# sourceMappingURL=Operator.js.map

package/lib/components/Operator.js.map

@@ -0,0 +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"}

package/lib/components/ProfileTypeSelector.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { PyroscopeDatasourceSelector } from '../model';
+export interface ProfileTypeSelectorProps {
+    datasource: PyroscopeDatasourceSelector;
+    value: string;
+    onChange?(value: string): void;
+}
+export declare function ProfileTypeSelector(props: ProfileTypeSelectorProps): ReactElement;
+//# sourceMappingURL=ProfileTypeSelector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileTypeSelector.d.ts","sourceRoot":"","sources":["../../../src/components/ProfileTypeSelector.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,OAAO,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAGvD,MAAM,WAAW,wBAAwB;IACvC,UAAU,EAAE,2BAA2B,CAAC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,YAAY,CA6BjF"}

package/lib/components/ProfileTypeSelector.js

@@ -0,0 +1,49 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stack, TextField, MenuItem, CircularProgress } from '@mui/material';
+import { useProfileTypes } from '../utils/use-query';
+export function ProfileTypeSelector(props) {
+    const { datasource, value, onChange } = props;
+    const { data: profileTypesOptions, isLoading: isProfileTypesOptionsLoading } = useProfileTypes(datasource);
+    return /*#__PURE__*/ _jsx(Stack, {
+        position: "relative",
+        sx: {
+            flexGrow: 1,
+            maxWidth: '100%'
+        },
+        children: /*#__PURE__*/ _jsx(TextField, {
+            select: true,
+            label: "Profile Type",
+            value: value,
+            size: "small",
+            onChange: (event)=>onChange?.(event.target.value),
+            children: isProfileTypesOptionsLoading ? /*#__PURE__*/ _jsx(Stack, {
+                width: "100%",
+                sx: {
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                },
+                children: /*#__PURE__*/ _jsx(CircularProgress, {
+                    color: "inherit",
+                    size: 20
+                })
+            }) : profileTypesOptions?.profileTypes && profileTypesOptions?.profileTypes.map((type)=>/*#__PURE__*/ _jsx(MenuItem, {
+                    value: type.ID,
+                    children: type.name + '/' + type.sampleType
+                }, type.ID))
+        })
+    });
+}
+
+//# sourceMappingURL=ProfileTypeSelector.js.map

package/lib/components/ProfileTypeSelector.js.map

@@ -0,0 +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"}

package/lib/components/Service.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { PyroscopeDatasourceSelector } from '../model';
+export interface ServiceProps {
+    datasource: PyroscopeDatasourceSelector;
+    value: string;
+    onChange?(value: string): void;
+}
+export declare function Service(props: ServiceProps): ReactElement;
+//# sourceMappingURL=Service.d.ts.map

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

@@ -0,0 +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"}

package/lib/components/Service.js

@@ -0,0 +1,52 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stack, TextField, MenuItem, CircularProgress, useTheme } 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);
+    return /*#__PURE__*/ _jsx(Stack, {
+        position: "relative",
+        sx: {
+            flexGrow: 1,
+            maxWidth: '100%',
+            [useTheme().breakpoints.down('sm')]: {
+                width: '100%'
+            }
+        },
+        children: /*#__PURE__*/ _jsx(TextField, {
+            select: true,
+            label: "Service",
+            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))
+        })
+    });
+}
+
+//# sourceMappingURL=Service.js.map

package/lib/components/Service.js.map

@@ -0,0 +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"}

package/lib/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ProfileTypeSelector';
+export * from './Service';
+export * from './Filters';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC"}

package/lib/components/index.js

@@ -0,0 +1,17 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from './ProfileTypeSelector';
+export * from './Service';
+export * from './Filters';
+
+//# sourceMappingURL=index.js.map

package/lib/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './ProfileTypeSelector';\nexport * from './Service';\nexport * from './Filters';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,wBAAwB;AACtC,cAAc,YAAY;AAC1B,cAAc,YAAY"}