@perses-dev/flame-chart-plugin 0.2.0

package/lib/components/PaletteSelector.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+export type PaletteOption = 'package-name' | 'value';
+export interface PaletteSelectorProps {
+    onChange: (palette: PaletteOption) => void;
+    value?: PaletteOption;
+}
+export declare function PaletteSelector({ onChange, value }: PaletteSelectorProps): ReactElement;
+//# sourceMappingURL=PaletteSelector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaletteSelector.d.ts","sourceRoot":"","sources":["../../../src/components/PaletteSelector.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAQrC,MAAM,MAAM,aAAa,GAAG,cAAc,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,oBAAoB;IACnC,QAAQ,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,KAAsB,EAAE,EAAE,oBAAoB,GAAG,YAAY,CAmBxG"}

package/lib/components/PaletteSelector.js

@@ -0,0 +1,41 @@
+// 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 { OptionsEditorControl, SettingsAutocomplete } from '@perses-dev/components';
+const PALETTE_OPTIONS = [
+    {
+        id: 'package-name',
+        label: 'By Package Name'
+    },
+    {
+        id: 'value',
+        label: 'By Value'
+    }
+];
+export function PaletteSelector({ onChange, value = 'package-name' }) {
+    const handlePaletteChange = (_, { id })=>{
+        onChange(id);
+    };
+    return /*#__PURE__*/ _jsx(OptionsEditorControl, {
+        label: "Palette",
+        control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
+            value: PALETTE_OPTIONS.find((o)=>o.id === value),
+            options: PALETTE_OPTIONS,
+            getOptionLabel: (o)=>o.label,
+            onChange: handlePaletteChange,
+            disableClearable: true
+        })
+    });
+}
+
+//# sourceMappingURL=PaletteSelector.js.map

package/lib/components/PaletteSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/PaletteSelector.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 { OptionsEditorControl, SettingsAutocomplete } from '@perses-dev/components';\n\nconst PALETTE_OPTIONS: Array<{ id: PaletteOption; label: string }> = [\n  { id: 'package-name', label: 'By Package Name' },\n  { id: 'value', label: 'By Value' },\n];\n\nexport type PaletteOption = 'package-name' | 'value';\n\nexport interface PaletteSelectorProps {\n  onChange: (palette: PaletteOption) => void;\n  value?: PaletteOption;\n}\n\nexport function PaletteSelector({ onChange, value = 'package-name' }: PaletteSelectorProps): ReactElement {\n  const handlePaletteChange = (_: unknown, { id }: { id: PaletteOption }): void => {\n    onChange(id);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Palette\"\n      control={\n        <SettingsAutocomplete\n          value={PALETTE_OPTIONS.find((o) => o.id === value)}\n          options={PALETTE_OPTIONS}\n          getOptionLabel={(o) => o.label}\n          onChange={handlePaletteChange}\n          disableClearable\n        />\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","PALETTE_OPTIONS","id","label","PaletteSelector","onChange","value","handlePaletteChange","_","control","find","o","options","getOptionLabel","disableClearable"],"mappings":"AAAA,oCAAoC;AACpC,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,oBAAoB,EAAEC,oBAAoB,QAAQ,yBAAyB;AAEpF,MAAMC,kBAA+D;IACnE;QAAEC,IAAI;QAAgBC,OAAO;IAAkB;IAC/C;QAAED,IAAI;QAASC,OAAO;IAAW;CAClC;AASD,OAAO,SAASC,gBAAgB,EAAEC,QAAQ,EAAEC,QAAQ,cAAc,EAAwB;IACxF,MAAMC,sBAAsB,CAACC,GAAY,EAAEN,EAAE,EAAyB;QACpEG,SAASH;IACX;IAEA,qBACE,KAACH;QACCI,OAAM;QACNM,uBACE,KAACT;YACCM,OAAOL,gBAAgBS,IAAI,CAAC,CAACC,IAAMA,EAAET,EAAE,KAAKI;YAC5CM,SAASX;YACTY,gBAAgB,CAACF,IAAMA,EAAER,KAAK;YAC9BE,UAAUE;YACVO,gBAAgB;;;AAK1B"}

package/lib/components/SearchBar.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+export interface SearchBarProps {
+    searchValue: string;
+    onSearchValueChange: (value: string) => void;
+}
+export declare function SearchBar(props: SearchBarProps): ReactElement;
+//# sourceMappingURL=SearchBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../src/components/SearchBar.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAIrC,MAAM,WAAW,cAAc;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,YAAY,CA2B7D"}

package/lib/components/SearchBar.js

@@ -0,0 +1,46 @@
+// 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 { TextField, InputAdornment, Chip } from '@mui/material';
+import Magnify from 'mdi-material-ui/Magnify';
+export function SearchBar(props) {
+    const { searchValue, onSearchValueChange } = props;
+    return /*#__PURE__*/ _jsx(TextField, {
+        size: "small",
+        variant: "outlined",
+        placeholder: "Search...",
+        fullWidth: true,
+        value: searchValue,
+        onChange: (event)=>onSearchValueChange(event.target.value),
+        slotProps: {
+            input: {
+                startAdornment: /*#__PURE__*/ _jsx(InputAdornment, {
+                    position: "start",
+                    children: /*#__PURE__*/ _jsx(Magnify, {
+                        fontSize: "small"
+                    })
+                }),
+                endAdornment: searchValue !== '' && /*#__PURE__*/ _jsx(InputAdornment, {
+                    position: "end",
+                    children: /*#__PURE__*/ _jsx(Chip, {
+                        label: "Clear",
+                        size: "small",
+                        onClick: ()=>onSearchValueChange('')
+                    })
+                })
+            }
+        }
+    });
+}
+
+//# sourceMappingURL=SearchBar.js.map

package/lib/components/SearchBar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/SearchBar.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, InputAdornment, Chip } from '@mui/material';\nimport Magnify from 'mdi-material-ui/Magnify';\n\nexport interface SearchBarProps {\n  searchValue: string;\n  onSearchValueChange: (value: string) => void;\n}\n\nexport function SearchBar(props: SearchBarProps): ReactElement {\n  const { searchValue, onSearchValueChange } = props;\n\n  return (\n    <TextField\n      size=\"small\"\n      variant=\"outlined\"\n      placeholder=\"Search...\"\n      fullWidth\n      value={searchValue}\n      onChange={(event) => onSearchValueChange(event.target.value)}\n      slotProps={{\n        input: {\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <Magnify fontSize=\"small\" />\n            </InputAdornment>\n          ),\n          endAdornment: searchValue !== '' && (\n            <InputAdornment position=\"end\">\n              <Chip label=\"Clear\" size=\"small\" onClick={() => onSearchValueChange('')} />\n            </InputAdornment>\n          ),\n        },\n      }}\n    />\n  );\n}\n"],"names":["TextField","InputAdornment","Chip","Magnify","SearchBar","props","searchValue","onSearchValueChange","size","variant","placeholder","fullWidth","value","onChange","event","target","slotProps","input","startAdornment","position","fontSize","endAdornment","label","onClick"],"mappings":"AAAA,oCAAoC;AACpC,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,SAAS,EAAEC,cAAc,EAAEC,IAAI,QAAQ,gBAAgB;AAChE,OAAOC,aAAa,0BAA0B;AAO9C,OAAO,SAASC,UAAUC,KAAqB;IAC7C,MAAM,EAAEC,WAAW,EAAEC,mBAAmB,EAAE,GAAGF;IAE7C,qBACE,KAACL;QACCQ,MAAK;QACLC,SAAQ;QACRC,aAAY;QACZC,SAAS;QACTC,OAAON;QACPO,UAAU,CAACC,QAAUP,oBAAoBO,MAAMC,MAAM,CAACH,KAAK;QAC3DI,WAAW;YACTC,OAAO;gBACLC,8BACE,KAACjB;oBAAekB,UAAS;8BACvB,cAAA,KAAChB;wBAAQiB,UAAS;;;gBAGtBC,cAAcf,gBAAgB,oBAC5B,KAACL;oBAAekB,UAAS;8BACvB,cAAA,KAACjB;wBAAKoB,OAAM;wBAAQd,MAAK;wBAAQe,SAAS,IAAMhB,oBAAoB;;;YAG1E;QACF;;AAGN"}

package/lib/components/SeriesChart.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+import { ProfileData } from '@perses-dev/core';
+export interface SeriesChartProps {
+    width: number;
+    height: number;
+    data: ProfileData;
+}
+export declare function SeriesChart(props: SeriesChartProps): ReactElement;
+//# sourceMappingURL=SeriesChart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SeriesChart.d.ts","sourceRoot":"","sources":["../../../src/components/SeriesChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAmB,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAY,MAAM,kBAAkB,CAAC;AAazD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;CACnB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAgKjE"}

package/lib/components/SeriesChart.js

@@ -0,0 +1,181 @@
+// 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 { useMemo, useRef } from 'react';
+import { Stack, useTheme } from '@mui/material';
+import { useChartsTheme, EChart, enableDataZoom } from '@perses-dev/components';
+import { useTimeRange } from '@perses-dev/plugin-system';
+import { formatItemValue } from '../utils/format';
+import { getSeriesTooltip } from '../utils/series-tooltip';
+const LINE_WIDTH = 1.25;
+const POINT_SIZE_OFFSET = 2;
+export function SeriesChart(props) {
+    const { width, height, data } = props;
+    const chartsTheme = useChartsTheme();
+    const theme = useTheme();
+    const { setTimeRange } = useTimeRange();
+    const chartRef = useRef();
+    const handleEvents = 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) {
+                    enableDataZoom(chartRef.current);
+                }
+            }
+        };
+    }, [
+        setTimeRange
+    ]);
+    const seriesData = 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 = 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 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)=>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 = useMemo(()=>/*#__PURE__*/ _jsx(EChart, {
+            style: {
+                width: width,
+                height: height
+            },
+            option: option,
+            theme: chartsTheme.echartsTheme,
+            onEvents: handleEvents,
+            _instance: chartRef
+        }), [
+        chartsTheme.echartsTheme,
+        height,
+        option,
+        width,
+        handleEvents
+    ]);
+    return /*#__PURE__*/ _jsx(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) {
+                enableDataZoom(chartRef.current);
+            }
+        },
+        children: seriesChart
+    });
+}
+
+//# sourceMappingURL=SeriesChart.js.map

package/lib/components/SeriesChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/SeriesChart.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, useRef } from 'react';\nimport { Stack, useTheme } from '@mui/material';\nimport { ProfileData, Timeline } from '@perses-dev/core';\nimport { useChartsTheme, EChart, ZoomEventData, OnEventsType, enableDataZoom } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport type { EChartsCoreOption, LineSeriesOption } from 'echarts';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { CallbackDataParams } from 'echarts/types/dist/shared';\nimport { formatItemValue } from '../utils/format';\nimport { getSeriesTooltip } from '../utils/series-tooltip';\nimport { SeriesSample } from '../utils/data-model';\n\nconst LINE_WIDTH = 1.25;\nconst POINT_SIZE_OFFSET = 2;\n\nexport interface SeriesChartProps {\n  width: number;\n  height: number;\n  data: ProfileData;\n}\n\nexport function SeriesChart(props: SeriesChartProps): ReactElement {\n  const { width, height, data } = props;\n\n  const chartsTheme = useChartsTheme();\n  const theme = useTheme();\n  const { setTimeRange } = useTimeRange();\n  const chartRef = useRef<EChartsInstance>();\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params): void => {\n        if (params.batch[0] === undefined) return;\n        const xAxisStartValue = params.batch?.[0]?.startValue;\n        const xAxisEndValue = params.batch?.[0]?.endValue;\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n          };\n          setTimeRange({ start: new Date(zoomEvent.start), end: new Date(zoomEvent.end) });\n        }\n      },\n      finished: (): void => {\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      },\n    };\n  }, [setTimeRange]);\n\n  const seriesData: SeriesSample[] = useMemo(() => {\n    const timeLine: Timeline = data.timeline || ({} as Timeline);\n    const startTime = timeLine.startTime;\n    const durationDelta = timeLine.durationDelta;\n    return timeLine.samples.map((sample, index) => ({\n      id: index,\n      value: [(startTime + index * durationDelta) * 1000, Number(sample)],\n    }));\n  }, [data.timeline]);\n\n  const option: EChartsCoreOption = useMemo(() => {\n    const seriesMapping = {\n      type: 'line',\n      color: theme.palette.primary.main,\n      sampling: 'lttb',\n      showSymbol: true,\n      showAllSymbol: true,\n      symbolSize: LINE_WIDTH + POINT_SIZE_OFFSET,\n      lineStyle: {\n        width: LINE_WIDTH,\n        opacity: 0.95,\n      },\n      areaStyle: {\n        opacity: 0,\n      },\n      data: seriesData,\n    };\n\n    const timeLine: Timeline = data.timeline || ({} as Timeline);\n\n    const option: EChartsCoreOption = {\n      series: seriesMapping,\n      xAxis: {\n        type: 'time',\n        min: timeLine.startTime * 1000,\n        max: (timeLine.startTime + timeLine.samples.length * timeLine.durationDelta) * 1000,\n        axisLabel: {\n          hideOverlap: true,\n        },\n        axisPointer: {\n          snap: false, // important so shared crosshair does not lag\n        },\n      },\n      yAxis: {\n        type: 'value',\n        axisLabel: {\n          formatter: (value: number) => {\n            return formatItemValue(data.metadata?.units, value);\n          },\n        },\n      },\n      animation: false,\n      tooltip: {\n        show: true,\n        showContent: true,\n        trigger: 'axis',\n        appendToBody: true,\n        confine: true,\n        backgroundColor: theme.palette.background.paper,\n        borderColor: theme.palette.background.paper,\n        textStyle: {\n          color: theme.palette.text.primary,\n        },\n        formatter: (params: CallbackDataParams[]) =>\n          getSeriesTooltip(\n            (params[0]?.data as SeriesSample) || {},\n            data.metadata?.units || '',\n            data.metadata?.name || '',\n            theme.palette.primary.main,\n            theme.palette.divider\n          ),\n      },\n      axisPointer: {\n        type: 'line',\n        z: 0, // ensure point symbol shows on top of dashed line\n        triggerEmphasis: true,\n        triggerTooltip: false,\n        snap: false,\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null,\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid: {\n        left: 10,\n        right: 10,\n        top: 10,\n        bottom: 10,\n      },\n    };\n\n    return option;\n  }, [data.timeline, data.metadata, seriesData, theme]);\n\n  const seriesChart = useMemo(\n    () => (\n      <EChart\n        style={{\n          width: width,\n          height: height,\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n        onEvents={handleEvents}\n        _instance={chartRef}\n      />\n    ),\n    [chartsTheme.echartsTheme, height, option, width, handleEvents]\n  );\n\n  return (\n    <Stack\n      width={width}\n      height={height}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      onMouseEnter={() => {\n        // This is necessary to ensure that the data zoom feature is enabled after the theme is changed.\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n    >\n      {seriesChart}\n    </Stack>\n  );\n}\n"],"names":["useMemo","useRef","Stack","useTheme","useChartsTheme","EChart","enableDataZoom","useTimeRange","formatItemValue","getSeriesTooltip","LINE_WIDTH","POINT_SIZE_OFFSET","SeriesChart","props","width","height","data","chartsTheme","theme","setTimeRange","chartRef","handleEvents","datazoom","params","batch","undefined","xAxisStartValue","startValue","xAxisEndValue","endValue","zoomEvent","start","end","Date","finished","current","seriesData","timeLine","timeline","startTime","durationDelta","samples","map","sample","index","id","value","Number","option","seriesMapping","type","color","palette","primary","main","sampling","showSymbol","showAllSymbol","symbolSize","lineStyle","opacity","areaStyle","series","xAxis","min","max","length","axisLabel","hideOverlap","axisPointer","snap","yAxis","formatter","metadata","units","animation","tooltip","show","showContent","trigger","appendToBody","confine","backgroundColor","background","paper","borderColor","textStyle","text","name","divider","z","triggerEmphasis","triggerTooltip","toolbox","feature","dataZoom","icon","yAxisIndex","grid","left","right","top","bottom","seriesChart","style","echartsTheme","onEvents","_instance","alignItems","justifyContent","onMouseEnter"],"mappings":"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"}

package/lib/components/Settings.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { FlameChartOptions } from '../flame-chart-model';
+export interface SettingsProps {
+    value: FlameChartOptions;
+    selectedId: number;
+    onChangePalette: (palette: 'package-name' | 'value') => void;
+    onSelectedIdChange: (newId: number) => void;
+    onDisplayChange: (value: 'table' | 'flame-graph' | 'both') => void;
+}
+export declare function Settings(props: SettingsProps): ReactElement;
+//# sourceMappingURL=Settings.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Settings.d.ts","sourceRoot":"","sources":["../../../src/components/Settings.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAMxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,iBAAiB,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,KAAK,IAAI,CAAC;IAC7D,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,eAAe,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,KAAK,IAAI,CAAC;CACpE;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,CA0J3D"}

package/lib/components/Settings.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.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
+import RefreshIcon from 'mdi-material-ui/Refresh';
+import PaletteIcon from 'mdi-material-ui/Palette';
+import { Stack, Button, useTheme, MenuItem, Menu, Fade } from '@mui/material';
+import { ToolbarIconButton, InfoTooltip } from '@perses-dev/components';
+import { TOOLTIP_TEXT } from '../utils/ui-text';
+export function Settings(props) {
+    const { value, selectedId, onSelectedIdChange, onChangePalette, onDisplayChange } = props;
+    const theme = useTheme();
+    const [anchorEl, setAnchorEl] = 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 = 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__*/ _jsxs(Stack, {
+        spacing: "10px",
+        direction: "row",
+        justifyContent: "center",
+        alignItems: "center",
+        children: [
+            selectedId !== 0 && /*#__PURE__*/ _jsx(InfoTooltip, {
+                description: TOOLTIP_TEXT.resetFlameGraph,
+                children: /*#__PURE__*/ _jsx(ToolbarIconButton, {
+                    "aria-label": TOOLTIP_TEXT.resetFlameGraph,
+                    onClick: ()=>onSelectedIdChange(0),
+                    color: "primary",
+                    children: /*#__PURE__*/ _jsx(RefreshIcon, {
+                        fontSize: "small"
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                children: [
+                    /*#__PURE__*/ _jsx(InfoTooltip, {
+                        description: TOOLTIP_TEXT.changeColorSheme,
+                        children: /*#__PURE__*/ _jsx(ToolbarIconButton, {
+                            id: "change-color-sheme-button",
+                            "aria-label": 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__*/ _jsx(PaletteIcon, {
+                                fontSize: "small"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(Menu, {
+                        id: "change-color-sheme-menu",
+                        slotProps: {
+                            list: {
+                                'aria-labelledby': 'change-color-sheme-button'
+                            }
+                        },
+                        anchorEl: anchorEl,
+                        open: open,
+                        onClose: handleClose,
+                        slots: {
+                            transition: 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__*/ _jsx(MenuItem, {
+                                onClick: handleByPackageNameClick,
+                                selected: value.palette === 'package-name',
+                                children: "By package name"
+                            }),
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                onClick: handleByValueClick,
+                                selected: value.palette === 'value',
+                                children: "By value"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                sx: {
+                    border: `1px solid ${theme.palette.primary.main}`,
+                    borderRadius: `${theme.shape.borderRadius}px`,
+                    padding: '2px'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(InfoTooltip, {
+                        description: TOOLTIP_TEXT.showTable,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            variant: isTableSelected() ? 'contained' : 'text',
+                            color: "primary",
+                            size: "small",
+                            onClick: ()=>onDisplayChange('table'),
+                            sx: customButtonStyle,
+                            children: "Table"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(InfoTooltip, {
+                        description: TOOLTIP_TEXT.showFlameGraph,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            variant: isFlameGraphSelected() ? 'contained' : 'text',
+                            color: "primary",
+                            size: "small",
+                            onClick: ()=>onDisplayChange('flame-graph'),
+                            sx: customButtonStyle,
+                            children: "Flame Graph"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(InfoTooltip, {
+                        description: TOOLTIP_TEXT.showBoth,
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            variant: isBothSelected() ? 'contained' : 'text',
+                            color: "primary",
+                            size: "small",
+                            onClick: ()=>onDisplayChange('both'),
+                            sx: customButtonStyle,
+                            children: "Both"
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=Settings.js.map

package/lib/components/Settings.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Settings.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, useState, useMemo } from 'react';\nimport RefreshIcon from 'mdi-material-ui/Refresh';\nimport PaletteIcon from 'mdi-material-ui/Palette';\nimport { Stack, Button, useTheme, MenuItem, Menu, Fade } from '@mui/material';\nimport { ToolbarIconButton, InfoTooltip } from '@perses-dev/components';\nimport { TOOLTIP_TEXT } from '../utils/ui-text';\nimport { FlameChartOptions } from '../flame-chart-model';\n\nexport interface SettingsProps {\n  value: FlameChartOptions;\n  selectedId: number;\n  onChangePalette: (palette: 'package-name' | 'value') => void;\n  onSelectedIdChange: (newId: number) => void;\n  onDisplayChange: (value: 'table' | 'flame-graph' | 'both') => void;\n}\n\nexport function Settings(props: SettingsProps): ReactElement {\n  const { value, selectedId, onSelectedIdChange, onChangePalette, onDisplayChange } = props;\n  const theme = useTheme();\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const open = Boolean(anchorEl);\n\n  const customButtonStyle = {\n    fontSize: '12px',\n    padding: '2px 6px',\n    minWidth: 'auto',\n  };\n\n  const handleChangeColorShemeClick = (event: React.MouseEvent<HTMLElement>) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleByPackageNameClick = () => {\n    onChangePalette('package-name');\n    handleClose();\n  };\n\n  const handleByValueClick = () => {\n    onChangePalette('value');\n    handleClose();\n  };\n\n  const handleClose = () => {\n    setAnchorEl(null);\n  };\n\n  const isTableSelected = () => selectedView === 'table';\n  const isFlameGraphSelected = () => selectedView === 'flame-graph';\n  const isBothSelected = () => selectedView === 'both';\n\n  // Update selected view based on the value of showTable and showFlameGraph\n  const selectedView: 'table' | 'flame-graph' | 'both' | 'none' = useMemo(() => {\n    if (!value.showTable && !value.showFlameGraph) {\n      return 'none';\n    } else if (value.showTable && value.showFlameGraph) {\n      return 'both';\n    } else if (value.showTable) {\n      return 'table';\n    } else {\n      return 'flame-graph';\n    }\n  }, [value.showTable, value.showFlameGraph]);\n\n  return (\n    <Stack spacing=\"10px\" direction=\"row\" justifyContent=\"center\" alignItems=\"center\">\n      {selectedId !== 0 && (\n        <InfoTooltip description={TOOLTIP_TEXT.resetFlameGraph}>\n          <ToolbarIconButton\n            aria-label={TOOLTIP_TEXT.resetFlameGraph}\n            onClick={() => onSelectedIdChange(0)}\n            color=\"primary\"\n          >\n            <RefreshIcon fontSize=\"small\" />\n          </ToolbarIconButton>\n        </InfoTooltip>\n      )}\n      <Stack>\n        <InfoTooltip description={TOOLTIP_TEXT.changeColorSheme}>\n          <ToolbarIconButton\n            id=\"change-color-sheme-button\"\n            aria-label={TOOLTIP_TEXT.changeColorSheme}\n            aria-controls={open ? 'change-color-sheme-menu' : undefined}\n            aria-haspopup=\"true\"\n            aria-expanded={open ? 'true' : undefined}\n            onClick={handleChangeColorShemeClick}\n            color=\"primary\"\n          >\n            <PaletteIcon fontSize=\"small\" />\n          </ToolbarIconButton>\n        </InfoTooltip>\n        <Menu\n          id=\"change-color-sheme-menu\"\n          slotProps={{\n            list: { 'aria-labelledby': 'change-color-sheme-button' },\n          }}\n          anchorEl={anchorEl}\n          open={open}\n          onClose={handleClose}\n          slots={{ transition: Fade }}\n          anchorOrigin={{\n            vertical: 'bottom',\n            horizontal: 'center',\n          }}\n          transformOrigin={{\n            vertical: 'top',\n            horizontal: 'center',\n          }}\n          sx={{\n            mt: 1,\n            '& .MuiPaper-root': {\n              backgroundColor: theme.palette.background.paper,\n              padding: '0 5px',\n            },\n            '& .MuiMenuItem-root:hover': {\n              backgroundColor: theme.palette.action.hover,\n            },\n          }}\n        >\n          <MenuItem onClick={handleByPackageNameClick} selected={value.palette === 'package-name'}>\n            By package name\n          </MenuItem>\n          <MenuItem onClick={handleByValueClick} selected={value.palette === 'value'}>\n            By value\n          </MenuItem>\n        </Menu>\n      </Stack>\n      <Stack\n        direction=\"row\"\n        sx={{\n          border: `1px solid ${theme.palette.primary.main}`,\n          borderRadius: `${theme.shape.borderRadius}px`,\n          padding: '2px',\n        }}\n      >\n        <InfoTooltip description={TOOLTIP_TEXT.showTable}>\n          <Button\n            variant={isTableSelected() ? 'contained' : 'text'}\n            color=\"primary\"\n            size=\"small\"\n            onClick={() => onDisplayChange('table')}\n            sx={customButtonStyle}\n          >\n            Table\n          </Button>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.showFlameGraph}>\n          <Button\n            variant={isFlameGraphSelected() ? 'contained' : 'text'}\n            color=\"primary\"\n            size=\"small\"\n            onClick={() => onDisplayChange('flame-graph')}\n            sx={customButtonStyle}\n          >\n            Flame Graph\n          </Button>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.showBoth}>\n          <Button\n            variant={isBothSelected() ? 'contained' : 'text'}\n            color=\"primary\"\n            size=\"small\"\n            onClick={() => onDisplayChange('both')}\n            sx={customButtonStyle}\n          >\n            Both\n          </Button>\n        </InfoTooltip>\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["useState","useMemo","RefreshIcon","PaletteIcon","Stack","Button","useTheme","MenuItem","Menu","Fade","ToolbarIconButton","InfoTooltip","TOOLTIP_TEXT","Settings","props","value","selectedId","onSelectedIdChange","onChangePalette","onDisplayChange","theme","anchorEl","setAnchorEl","open","Boolean","customButtonStyle","fontSize","padding","minWidth","handleChangeColorShemeClick","event","currentTarget","handleByPackageNameClick","handleClose","handleByValueClick","isTableSelected","selectedView","isFlameGraphSelected","isBothSelected","showTable","showFlameGraph","spacing","direction","justifyContent","alignItems","description","resetFlameGraph","aria-label","onClick","color","changeColorSheme","id","aria-controls","undefined","aria-haspopup","aria-expanded","slotProps","list","onClose","slots","transition","anchorOrigin","vertical","horizontal","transformOrigin","sx","mt","backgroundColor","palette","background","paper","action","hover","selected","border","primary","main","borderRadius","shape","variant","size","showBoth"],"mappings":"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"}

package/lib/components/SwitchSelector.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+export interface SwitchSelectorProps {
+    onChange: (newValue: boolean) => void;
+    value?: boolean;
+    label: string;
+}
+export declare function SwitchSelector({ onChange, value, label }: SwitchSelectorProps): ReactElement;
+//# sourceMappingURL=SwitchSelector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchSelector.d.ts","sourceRoot":"","sources":["../../../src/components/SwitchSelector.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAIrC,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,mBAAmB,GAAG,YAAY,CAM5F"}

package/lib/components/SwitchSelector.js

@@ -0,0 +1,29 @@
+// 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 { OptionsEditorControl } from '@perses-dev/components';
+import { Switch } from '@mui/material';
+export function SwitchSelector({ onChange, value, label }) {
+    const handleValuesChange = (_, checked)=>{
+        onChange(checked);
+    };
+    return /*#__PURE__*/ _jsx(OptionsEditorControl, {
+        label: label,
+        control: /*#__PURE__*/ _jsx(Switch, {
+            checked: value,
+            onChange: handleValuesChange
+        })
+    });
+}
+
+//# sourceMappingURL=SwitchSelector.js.map

package/lib/components/SwitchSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/SwitchSelector.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 { OptionsEditorControl } from '@perses-dev/components';\nimport { Switch } from '@mui/material';\n\nexport interface SwitchSelectorProps {\n  onChange: (newValue: boolean) => void;\n  value?: boolean;\n  label: string;\n}\n\nexport function SwitchSelector({ onChange, value, label }: SwitchSelectorProps): ReactElement {\n  const handleValuesChange = (_: unknown, checked: boolean): void => {\n    onChange(checked);\n  };\n\n  return <OptionsEditorControl label={label} control={<Switch checked={value} onChange={handleValuesChange} />} />;\n}\n"],"names":["OptionsEditorControl","Switch","SwitchSelector","onChange","value","label","handleValuesChange","_","checked","control"],"mappings":"AAAA,oCAAoC;AACpC,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;;AAGjC,SAASA,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,MAAM,QAAQ,gBAAgB;AAQvC,OAAO,SAASC,eAAe,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,KAAK,EAAuB;IAC5E,MAAMC,qBAAqB,CAACC,GAAYC;QACtCL,SAASK;IACX;IAEA,qBAAO,KAACR;QAAqBK,OAAOA;QAAOI,uBAAS,KAACR;YAAOO,SAASJ;YAAOD,UAAUG;;;AACxF"}