@perses-dev/flame-chart-plugin 0.2.0

package/lib/cjs/components/FlameChartPanel.js

@@ -0,0 +1,147 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FlameChartPanel", {
+    enumerable: true,
+    get: function() {
+        return FlameChartPanel;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _components = require("@perses-dev/components");
+const _material = require("@mui/material");
+const _react = require("react");
+const _FlameChart = require("./FlameChart");
+const _Settings = require("./Settings");
+const _TableChart = require("./TableChart");
+const _SeriesChart = require("./SeriesChart");
+const LARGE_PANEL_TRESHOLD = 600;
+const DEFAULT_SERIES_CHART_HEIGHT = 200;
+const FlameChartPanel = (props)=>{
+    const { contentDimensions, queryResults, spec } = props;
+    const isMobileSize = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.down('sm'));
+    // selectedId equals 0 => Flame Graph is not zoomed in
+    // selectedId different from 0 => Flame Graph is zoomed in
+    const [selectedId, setSelectedId] = (0, _react.useState)(0);
+    const [searchValue, setSearchValue] = (0, _react.useState)('');
+    // This spec is used to manage settings temporarily
+    const [liveSpec, setLiveSpec] = (0, _react.useState)(spec);
+    // keep liveSpec up to date
+    (0, _react.useEffect)(()=>{
+        setLiveSpec(spec);
+        setSelectedId(0);
+        setSearchValue('');
+    }, [
+        spec
+    ]);
+    const chartsTheme = (0, _components.useChartsTheme)();
+    const flameChartData = queryResults[0];
+    if (contentDimensions === undefined) return null;
+    const noDataTextStyle = chartsTheme.noDataOption.title.textStyle;
+    const onChangePalette = (newPalette)=>{
+        setLiveSpec((prev)=>{
+            return {
+                ...prev,
+                palette: newPalette
+            };
+        });
+    };
+    const onDisplayChange = (value)=>{
+        let showTable = true;
+        let showFlameGraph = true;
+        if (value === 'table') {
+            showFlameGraph = false;
+        } else if (value === 'flame-graph') {
+            showTable = false;
+        }
+        setLiveSpec((prev)=>{
+            return {
+                ...prev,
+                showTable: showTable,
+                showFlameGraph: showFlameGraph
+            };
+        });
+    };
+    const PADDING = liveSpec.showSeries && liveSpec.showSettings ? 32 : liveSpec.showSeries || liveSpec.showSettings ? 16 : 0;
+    const SETTINGS_HEIGHT = liveSpec.showSettings ? 30 : 0;
+    const SERIES_CHART_HEIGHT = liveSpec.showSeries ? contentDimensions.height < DEFAULT_SERIES_CHART_HEIGHT ? contentDimensions.height : DEFAULT_SERIES_CHART_HEIGHT : 0;
+    const TABLE_FLAME_CHART_HEIGHT = contentDimensions.height - (contentDimensions.height > LARGE_PANEL_TRESHOLD ? SERIES_CHART_HEIGHT + SETTINGS_HEIGHT + PADDING : 0);
+    const TABLE_CHART_WIDTH = isMobileSize ? contentDimensions.width : liveSpec.showFlameGraph ? 0.4 * contentDimensions.width : contentDimensions.width;
+    const FLAME_CHART_WIDTH = isMobileSize ? contentDimensions.width : liveSpec.showTable ? 0.6 * contentDimensions.width : contentDimensions.width;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+        height: contentDimensions.height,
+        width: contentDimensions.width,
+        justifyContent: "center",
+        alignItems: "center",
+        children: queryResults.length > 1 ? // display a message if there is more than one query
+        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+            sx: {
+                ...noDataTextStyle
+            },
+            children: "There is more than one query. Please make sure that you provided only one query."
+        }) : flameChartData ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+            gap: 2,
+            sx: {
+                overflowY: 'auto',
+                scrollbarGutter: 'stable both-edges',
+                paddingTop: liveSpec.showSeries ? 0 : 1
+            },
+            children: [
+                liveSpec.showSeries && /*#__PURE__*/ (0, _jsxruntime.jsx)(_SeriesChart.SeriesChart, {
+                    width: contentDimensions.width,
+                    height: SERIES_CHART_HEIGHT,
+                    data: flameChartData.data
+                }),
+                liveSpec.showSettings && /*#__PURE__*/ (0, _jsxruntime.jsx)(_Settings.Settings, {
+                    onSelectedIdChange: setSelectedId,
+                    onChangePalette: onChangePalette,
+                    onDisplayChange: onDisplayChange,
+                    value: liveSpec,
+                    selectedId: selectedId
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                    direction: isMobileSize ? 'column' : 'row',
+                    justifyContent: "center",
+                    alignItems: isMobileSize ? 'center' : 'top',
+                    children: [
+                        liveSpec.showTable && /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableChart.TableChart, {
+                            width: TABLE_CHART_WIDTH,
+                            height: TABLE_FLAME_CHART_HEIGHT,
+                            data: flameChartData.data,
+                            searchValue: searchValue,
+                            onSearchValueChange: setSearchValue,
+                            onSelectedIdChange: setSelectedId
+                        }),
+                        liveSpec.showFlameGraph && /*#__PURE__*/ (0, _jsxruntime.jsx)(_FlameChart.FlameChart, {
+                            width: FLAME_CHART_WIDTH,
+                            height: TABLE_FLAME_CHART_HEIGHT,
+                            data: flameChartData.data,
+                            palette: liveSpec.palette,
+                            selectedId: selectedId,
+                            searchValue: searchValue,
+                            onSelectedIdChange: setSelectedId
+                        })
+                    ]
+                })
+            ]
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+            sx: {
+                ...noDataTextStyle
+            },
+            children: "No data"
+        })
+    });
+};

package/lib/cjs/components/PaletteSelector.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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PaletteSelector", {
+    enumerable: true,
+    get: function() {
+        return PaletteSelector;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _components = require("@perses-dev/components");
+const PALETTE_OPTIONS = [
+    {
+        id: 'package-name',
+        label: 'By Package Name'
+    },
+    {
+        id: 'value',
+        label: 'By Value'
+    }
+];
+function PaletteSelector({ onChange, value = 'package-name' }) {
+    const handlePaletteChange = (_, { id })=>{
+        onChange(id);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
+        label: "Palette",
+        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SettingsAutocomplete, {
+            value: PALETTE_OPTIONS.find((o)=>o.id === value),
+            options: PALETTE_OPTIONS,
+            getOptionLabel: (o)=>o.label,
+            onChange: handlePaletteChange,
+            disableClearable: true
+        })
+    });
+}

package/lib/cjs/components/SearchBar.js

@@ -0,0 +1,59 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License |  Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing |  software
+// distributed under the License is distributed on an "AS IS" BASIS |
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND |  either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SearchBar", {
+    enumerable: true,
+    get: function() {
+        return SearchBar;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _Magnify = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Magnify"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function SearchBar(props) {
+    const { searchValue, onSearchValueChange } = props;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+        size: "small",
+        variant: "outlined",
+        placeholder: "Search...",
+        fullWidth: true,
+        value: searchValue,
+        onChange: (event)=>onSearchValueChange(event.target.value),
+        slotProps: {
+            input: {
+                startAdornment: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputAdornment, {
+                    position: "start",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Magnify.default, {
+                        fontSize: "small"
+                    })
+                }),
+                endAdornment: searchValue !== '' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputAdornment, {
+                    position: "end",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Chip, {
+                        label: "Clear",
+                        size: "small",
+                        onClick: ()=>onSearchValueChange('')
+                    })
+                })
+            }
+        }
+    });
+}

package/lib/cjs/components/SeriesChart.js

@@ -0,0 +1,189 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License |  Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing |  software
+// distributed under the License is distributed on an "AS IS" BASIS |
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND |  either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SeriesChart", {
+    enumerable: true,
+    get: function() {
+        return SeriesChart;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _format = require("../utils/format");
+const _seriestooltip = require("../utils/series-tooltip");
+const LINE_WIDTH = 1.25;
+const POINT_SIZE_OFFSET = 2;
+function SeriesChart(props) {
+    const { width, height, data } = props;
+    const chartsTheme = (0, _components.useChartsTheme)();
+    const theme = (0, _material.useTheme)();
+    const { setTimeRange } = (0, _pluginsystem.useTimeRange)();
+    const chartRef = (0, _react.useRef)();
+    const handleEvents = (0, _react.useMemo)(()=>{
+        return {
+            datazoom: (params)=>{
+                if (params.batch[0] === undefined) return;
+                const xAxisStartValue = params.batch?.[0]?.startValue;
+                const xAxisEndValue = params.batch?.[0]?.endValue;
+                if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {
+                    const zoomEvent = {
+                        start: xAxisStartValue,
+                        end: xAxisEndValue
+                    };
+                    setTimeRange({
+                        start: new Date(zoomEvent.start),
+                        end: new Date(zoomEvent.end)
+                    });
+                }
+            },
+            finished: ()=>{
+                if (chartRef.current !== undefined) {
+                    (0, _components.enableDataZoom)(chartRef.current);
+                }
+            }
+        };
+    }, [
+        setTimeRange
+    ]);
+    const seriesData = (0, _react.useMemo)(()=>{
+        const timeLine = data.timeline || {};
+        const startTime = timeLine.startTime;
+        const durationDelta = timeLine.durationDelta;
+        return timeLine.samples.map((sample, index)=>({
+                id: index,
+                value: [
+                    (startTime + index * durationDelta) * 1000,
+                    Number(sample)
+                ]
+            }));
+    }, [
+        data.timeline
+    ]);
+    const option = (0, _react.useMemo)(()=>{
+        const seriesMapping = {
+            type: 'line',
+            color: theme.palette.primary.main,
+            sampling: 'lttb',
+            showSymbol: true,
+            showAllSymbol: true,
+            symbolSize: LINE_WIDTH + POINT_SIZE_OFFSET,
+            lineStyle: {
+                width: LINE_WIDTH,
+                opacity: 0.95
+            },
+            areaStyle: {
+                opacity: 0
+            },
+            data: seriesData
+        };
+        const timeLine = data.timeline || {};
+        const option = {
+            series: seriesMapping,
+            xAxis: {
+                type: 'time',
+                min: timeLine.startTime * 1000,
+                max: (timeLine.startTime + timeLine.samples.length * timeLine.durationDelta) * 1000,
+                axisLabel: {
+                    hideOverlap: true
+                },
+                axisPointer: {
+                    snap: false
+                }
+            },
+            yAxis: {
+                type: 'value',
+                axisLabel: {
+                    formatter: (value)=>{
+                        return (0, _format.formatItemValue)(data.metadata?.units, value);
+                    }
+                }
+            },
+            animation: false,
+            tooltip: {
+                show: true,
+                showContent: true,
+                trigger: 'axis',
+                appendToBody: true,
+                confine: true,
+                backgroundColor: theme.palette.background.paper,
+                borderColor: theme.palette.background.paper,
+                textStyle: {
+                    color: theme.palette.text.primary
+                },
+                formatter: (params)=>(0, _seriestooltip.getSeriesTooltip)(params[0]?.data || {}, data.metadata?.units || '', data.metadata?.name || '', theme.palette.primary.main, theme.palette.divider)
+            },
+            axisPointer: {
+                type: 'line',
+                z: 0,
+                triggerEmphasis: true,
+                triggerTooltip: false,
+                snap: false
+            },
+            toolbox: {
+                feature: {
+                    dataZoom: {
+                        icon: null,
+                        yAxisIndex: 'none'
+                    }
+                }
+            },
+            grid: {
+                left: 10,
+                right: 10,
+                top: 10,
+                bottom: 10
+            }
+        };
+        return option;
+    }, [
+        data.timeline,
+        data.metadata,
+        seriesData,
+        theme
+    ]);
+    const seriesChart = (0, _react.useMemo)(()=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_components.EChart, {
+            style: {
+                width: width,
+                height: height
+            },
+            option: option,
+            theme: chartsTheme.echartsTheme,
+            onEvents: handleEvents,
+            _instance: chartRef
+        }), [
+        chartsTheme.echartsTheme,
+        height,
+        option,
+        width,
+        handleEvents
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+        width: width,
+        height: height,
+        alignItems: "center",
+        justifyContent: "center",
+        onMouseEnter: ()=>{
+            // This is necessary to ensure that the data zoom feature is enabled after the theme is changed.
+            if (chartRef.current !== undefined) {
+                (0, _components.enableDataZoom)(chartRef.current);
+            }
+        },
+        children: seriesChart
+    });
+}

package/lib/cjs/components/Settings.js

@@ -0,0 +1,202 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Settings", {
+    enumerable: true,
+    get: function() {
+        return Settings;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _Refresh = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Refresh"));
+const _Palette = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Palette"));
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _uitext = require("../utils/ui-text");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function Settings(props) {
+    const { value, selectedId, onSelectedIdChange, onChangePalette, onDisplayChange } = props;
+    const theme = (0, _material.useTheme)();
+    const [anchorEl, setAnchorEl] = (0, _react.useState)(null);
+    const open = Boolean(anchorEl);
+    const customButtonStyle = {
+        fontSize: '12px',
+        padding: '2px 6px',
+        minWidth: 'auto'
+    };
+    const handleChangeColorShemeClick = (event)=>{
+        setAnchorEl(event.currentTarget);
+    };
+    const handleByPackageNameClick = ()=>{
+        onChangePalette('package-name');
+        handleClose();
+    };
+    const handleByValueClick = ()=>{
+        onChangePalette('value');
+        handleClose();
+    };
+    const handleClose = ()=>{
+        setAnchorEl(null);
+    };
+    const isTableSelected = ()=>selectedView === 'table';
+    const isFlameGraphSelected = ()=>selectedView === 'flame-graph';
+    const isBothSelected = ()=>selectedView === 'both';
+    // Update selected view based on the value of showTable and showFlameGraph
+    const selectedView = (0, _react.useMemo)(()=>{
+        if (!value.showTable && !value.showFlameGraph) {
+            return 'none';
+        } else if (value.showTable && value.showFlameGraph) {
+            return 'both';
+        } else if (value.showTable) {
+            return 'table';
+        } else {
+            return 'flame-graph';
+        }
+    }, [
+        value.showTable,
+        value.showFlameGraph
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        spacing: "10px",
+        direction: "row",
+        justifyContent: "center",
+        alignItems: "center",
+        children: [
+            selectedId !== 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                description: _uitext.TOOLTIP_TEXT.resetFlameGraph,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ToolbarIconButton, {
+                    "aria-label": _uitext.TOOLTIP_TEXT.resetFlameGraph,
+                    onClick: ()=>onSelectedIdChange(0),
+                    color: "primary",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Refresh.default, {
+                        fontSize: "small"
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                        description: _uitext.TOOLTIP_TEXT.changeColorSheme,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ToolbarIconButton, {
+                            id: "change-color-sheme-button",
+                            "aria-label": _uitext.TOOLTIP_TEXT.changeColorSheme,
+                            "aria-controls": open ? 'change-color-sheme-menu' : undefined,
+                            "aria-haspopup": "true",
+                            "aria-expanded": open ? 'true' : undefined,
+                            onClick: handleChangeColorShemeClick,
+                            color: "primary",
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Palette.default, {
+                                fontSize: "small"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Menu, {
+                        id: "change-color-sheme-menu",
+                        slotProps: {
+                            list: {
+                                'aria-labelledby': 'change-color-sheme-button'
+                            }
+                        },
+                        anchorEl: anchorEl,
+                        open: open,
+                        onClose: handleClose,
+                        slots: {
+                            transition: _material.Fade
+                        },
+                        anchorOrigin: {
+                            vertical: 'bottom',
+                            horizontal: 'center'
+                        },
+                        transformOrigin: {
+                            vertical: 'top',
+                            horizontal: 'center'
+                        },
+                        sx: {
+                            mt: 1,
+                            '& .MuiPaper-root': {
+                                backgroundColor: theme.palette.background.paper,
+                                padding: '0 5px'
+                            },
+                            '& .MuiMenuItem-root:hover': {
+                                backgroundColor: theme.palette.action.hover
+                            }
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                onClick: handleByPackageNameClick,
+                                selected: value.palette === 'package-name',
+                                children: "By package name"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                onClick: handleByValueClick,
+                                selected: value.palette === 'value',
+                                children: "By value"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                direction: "row",
+                sx: {
+                    border: `1px solid ${theme.palette.primary.main}`,
+                    borderRadius: `${theme.shape.borderRadius}px`,
+                    padding: '2px'
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                        description: _uitext.TOOLTIP_TEXT.showTable,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                            variant: isTableSelected() ? 'contained' : 'text',
+                            color: "primary",
+                            size: "small",
+                            onClick: ()=>onDisplayChange('table'),
+                            sx: customButtonStyle,
+                            children: "Table"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                        description: _uitext.TOOLTIP_TEXT.showFlameGraph,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                            variant: isFlameGraphSelected() ? 'contained' : 'text',
+                            color: "primary",
+                            size: "small",
+                            onClick: ()=>onDisplayChange('flame-graph'),
+                            sx: customButtonStyle,
+                            children: "Flame Graph"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                        description: _uitext.TOOLTIP_TEXT.showBoth,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                            variant: isBothSelected() ? 'contained' : 'text',
+                            color: "primary",
+                            size: "small",
+                            onClick: ()=>onDisplayChange('both'),
+                            sx: customButtonStyle,
+                            children: "Both"
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}

package/lib/cjs/components/SwitchSelector.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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SwitchSelector", {
+    enumerable: true,
+    get: function() {
+        return SwitchSelector;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _components = require("@perses-dev/components");
+const _material = require("@mui/material");
+function SwitchSelector({ onChange, value, label }) {
+    const handleValuesChange = (_, checked)=>{
+        onChange(checked);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
+        label: label,
+        control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
+            checked: value,
+            onChange: handleValuesChange
+        })
+    });
+}