@perses-dev/flame-chart-plugin 0.6.0 → 0.7.0-beta.1

package/lib/components/FlameChartPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FlameChartPanel.tsx"],"sourcesContent":["// Copyright 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 { TitleComponentOption } from 'echarts';\nimport { useChartsTheme } from '@perses-dev/components';\nimport { Stack, Typography, SxProps, useMediaQuery, useTheme } from '@mui/material';\nimport { FC, useState, useEffect, useMemo } from 'react';\nimport { PanelProps } from '@perses-dev/plugin-system';\nimport { ProfileData, StackTrace } from '@perses-dev/spec';\nimport { FlameChartOptions } from '../flame-chart-model';\nimport { filterStackTraceById, getMaxDepth } from '../utils/data-transform';\nimport { FlameChart } from './FlameChart';\nimport { Settings } from './Settings';\nimport { TableChart } from './TableChart';\nimport { SeriesChart } from './SeriesChart';\n\nconst LARGE_PANEL_THRESHOLD = 600;\nconst DEFAULT_SERIES_CHART_HEIGHT = 200;\n\nexport type FlameChartPanelProps = PanelProps<FlameChartOptions, ProfileData>;\n\nexport const FlameChartPanel: FC<FlameChartPanelProps> = (props) => {\n  const { contentDimensions, queryResults, spec } = props;\n\n  const isMobileSize = useMediaQuery(useTheme().breakpoints.down('sm'));\n\n  // selectedId equals 0 => Flame Graph is not zoomed in\n  // selectedId different from 0 => Flame Graph is zoomed in\n  const [selectedId, setSelectedId] = useState(0);\n  const [searchValue, setSearchValue] = useState('');\n\n  // This spec is used to manage settings temporarily\n  const [liveSpec, setLiveSpec] = useState<FlameChartOptions>(spec);\n\n  // keep liveSpec up to date\n  useEffect(() => {\n    setLiveSpec(spec);\n    setSelectedId(0);\n    setSearchValue('');\n  }, [spec]);\n\n  const chartsTheme = useChartsTheme();\n  const flameChartData = useMemo(() => {\n    return queryResults[0];\n  }, [queryResults]);\n\n  const selectedStackTrace: StackTrace | undefined = useMemo(() => {\n    if (!flameChartData) return undefined;\n    if (!selectedId) return flameChartData.data.profile.stackTrace;\n\n    return filterStackTraceById(flameChartData.data.profile.stackTrace, selectedId);\n  }, [flameChartData, selectedId]);\n\n  const maxDepth: number = useMemo(\n    () => (selectedStackTrace ? getMaxDepth(selectedStackTrace) : 0),\n    [selectedStackTrace]\n  );\n\n  const noDataTextStyle = (chartsTheme.noDataOption.title as TitleComponentOption).textStyle as SxProps;\n\n  const onChangePalette = (newPalette: 'package-name' | 'value'): void => {\n    setLiveSpec((prev) => {\n      return { ...prev, palette: newPalette };\n    });\n  };\n\n  const onDisplayChange = (value: 'table' | 'flame-graph' | 'both' | 'none'): void => {\n    let showTable = true;\n    let showFlameGraph = true;\n    if (value === 'table') {\n      showFlameGraph = false;\n    } else if (value === 'flame-graph') {\n      showTable = false;\n    }\n    setLiveSpec((prev) => {\n      return { ...prev, showTable: showTable, showFlameGraph: showFlameGraph };\n    });\n  };\n\n  if (!contentDimensions) return null;\n\n  const PADDING =\n    liveSpec.showSeries && liveSpec.showSettings ? 32 : liveSpec.showSeries || liveSpec.showSettings ? 16 : 0;\n\n  const SETTINGS_HEIGHT = liveSpec.showSettings ? 30 : 0;\n\n  const SERIES_CHART_HEIGHT = liveSpec.showSeries\n    ? contentDimensions.height < DEFAULT_SERIES_CHART_HEIGHT\n      ? contentDimensions.height\n      : DEFAULT_SERIES_CHART_HEIGHT\n    : 0;\n\n  const TABLE_FLAME_CHART_HEIGHT = liveSpec.traceHeight\n    ? Math.max(\n        contentDimensions.height -\n          (contentDimensions.height > LARGE_PANEL_THRESHOLD ? SERIES_CHART_HEIGHT + SETTINGS_HEIGHT + PADDING : 0),\n        maxDepth * liveSpec.traceHeight\n      )\n    : contentDimensions.height -\n      (contentDimensions.height > LARGE_PANEL_THRESHOLD ? SERIES_CHART_HEIGHT + SETTINGS_HEIGHT + PADDING : 0);\n\n  const TABLE_CHART_WIDTH = isMobileSize\n    ? contentDimensions.width\n    : liveSpec.showFlameGraph\n      ? 0.4 * contentDimensions.width\n      : contentDimensions.width;\n\n  const FLAME_CHART_WIDTH = isMobileSize\n    ? contentDimensions.width\n    : liveSpec.showTable\n      ? 0.6 * contentDimensions.width\n      : contentDimensions.width;\n\n  // TODO (gladorme): allow users to override height (useful for explorer for stack traces with high depth)\n  return (\n    <Stack\n      height={contentDimensions.height}\n      width={contentDimensions.width}\n      justifyContent=\"center\"\n      alignItems=\"center\"\n    >\n      {queryResults.length > 1 ? (\n        // display a message if there is more than one query\n        <Typography sx={{ ...noDataTextStyle }}>\n          There is more than one query. Please make sure that you provided only one query.\n        </Typography>\n      ) : flameChartData ? (\n        <Stack\n          gap={2}\n          sx={{\n            overflowY: 'auto',\n            scrollbarGutter: 'stable both-edges',\n            paddingTop: liveSpec.showSettings || liveSpec.showSeries ? 1 : 0,\n          }}\n        >\n          {liveSpec.showSeries && (\n            <SeriesChart width={contentDimensions.width} height={SERIES_CHART_HEIGHT} data={flameChartData.data} />\n          )}\n          {liveSpec.showSettings && (\n            <Settings\n              onSelectedIdChange={setSelectedId}\n              onChangePalette={onChangePalette}\n              onDisplayChange={onDisplayChange}\n              value={liveSpec}\n              selectedId={selectedId}\n            />\n          )}\n          <Stack\n            direction={isMobileSize ? 'column' : 'row'}\n            justifyContent=\"center\"\n            alignItems={isMobileSize ? 'center' : 'top'}\n          >\n            {liveSpec.showTable && (\n              <TableChart\n                width={TABLE_CHART_WIDTH}\n                height={TABLE_FLAME_CHART_HEIGHT}\n                data={flameChartData.data}\n                searchValue={searchValue}\n                onSearchValueChange={setSearchValue}\n                onSelectedIdChange={setSelectedId}\n              />\n            )}\n            {liveSpec.showFlameGraph && (\n              <FlameChart\n                width={FLAME_CHART_WIDTH}\n                height={TABLE_FLAME_CHART_HEIGHT}\n                data={flameChartData.data}\n                palette={liveSpec.palette}\n                selectedId={selectedId}\n                searchValue={searchValue}\n                onSelectedIdChange={setSelectedId}\n              />\n            )}\n          </Stack>\n        </Stack>\n      ) : (\n        <Typography sx={{ ...noDataTextStyle }}>No data</Typography>\n      )}\n    </Stack>\n  );\n};\n"],"names":["useChartsTheme","Stack","Typography","useMediaQuery","useTheme","useState","useEffect","useMemo","filterStackTraceById","getMaxDepth","FlameChart","Settings","TableChart","SeriesChart","LARGE_PANEL_THRESHOLD","DEFAULT_SERIES_CHART_HEIGHT","FlameChartPanel","props","contentDimensions","queryResults","spec","isMobileSize","breakpoints","down","selectedId","setSelectedId","searchValue","setSearchValue","liveSpec","setLiveSpec","chartsTheme","flameChartData","selectedStackTrace","undefined","data","profile","stackTrace","maxDepth","noDataTextStyle","noDataOption","title","textStyle","onChangePalette","newPalette","prev","palette","onDisplayChange","value","showTable","showFlameGraph","PADDING","showSeries","showSettings","SETTINGS_HEIGHT","SERIES_CHART_HEIGHT","height","TABLE_FLAME_CHART_HEIGHT","traceHeight","Math","max","TABLE_CHART_WIDTH","width","FLAME_CHART_WIDTH","justifyContent","alignItems","length","sx","gap","overflowY","scrollbarGutter","paddingTop","onSelectedIdChange","direction","onSearchValueChange"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/FlameChartPanel.tsx"],"sourcesContent":["// Copyright 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 type { SxProps } from '@mui/material';\nimport { Stack, Typography, useMediaQuery, useTheme } from '@mui/material';\nimport { useChartsTheme } from '@perses-dev/components';\nimport type { PanelProps } from '@perses-dev/plugin-system';\nimport type { ProfileData, StackTrace } from '@perses-dev/spec';\nimport type { TitleComponentOption } from 'echarts';\nimport type { FC } from 'react';\nimport { useState, useEffect, useMemo } from 'react';\n\nimport type { FlameChartOptions } from '../flame-chart-model';\nimport { filterStackTraceById, getMaxDepth } from '../utils/data-transform';\nimport { FlameChart } from './FlameChart';\nimport { SeriesChart } from './SeriesChart';\nimport { Settings } from './Settings';\nimport { TableChart } from './TableChart';\n\nconst LARGE_PANEL_THRESHOLD = 600;\nconst DEFAULT_SERIES_CHART_HEIGHT = 200;\n\nexport type FlameChartPanelProps = PanelProps<FlameChartOptions, ProfileData>;\n\nexport const FlameChartPanel: FC<FlameChartPanelProps> = (props) => {\n  const { contentDimensions, queryResults, spec } = props;\n\n  const isMobileSize = useMediaQuery(useTheme().breakpoints.down('sm'));\n\n  // selectedId equals 0 => Flame Graph is not zoomed in\n  // selectedId different from 0 => Flame Graph is zoomed in\n  const [selectedId, setSelectedId] = useState(0);\n  const [searchValue, setSearchValue] = useState('');\n\n  // This spec is used to manage settings temporarily\n  const [liveSpec, setLiveSpec] = useState<FlameChartOptions>(spec);\n\n  // keep liveSpec up to date\n  useEffect(() => {\n    setLiveSpec(spec);\n    setSelectedId(0);\n    setSearchValue('');\n  }, [spec]);\n\n  const chartsTheme = useChartsTheme();\n  const flameChartData = useMemo(() => {\n    return queryResults[0];\n  }, [queryResults]);\n\n  const selectedStackTrace: StackTrace | undefined = useMemo(() => {\n    if (!flameChartData) return undefined;\n    if (!selectedId) return flameChartData.data.profile.stackTrace;\n\n    return filterStackTraceById(flameChartData.data.profile.stackTrace, selectedId);\n  }, [flameChartData, selectedId]);\n\n  const maxDepth: number = useMemo(\n    () => (selectedStackTrace ? getMaxDepth(selectedStackTrace) : 0),\n    [selectedStackTrace],\n  );\n\n  const noDataTextStyle = (chartsTheme.noDataOption.title as TitleComponentOption).textStyle as SxProps;\n\n  const onChangePalette = (newPalette: 'package-name' | 'value'): void => {\n    setLiveSpec((prev) => {\n      return { ...prev, palette: newPalette };\n    });\n  };\n\n  const onDisplayChange = (value: 'table' | 'flame-graph' | 'both' | 'none'): void => {\n    let showTable = true;\n    let showFlameGraph = true;\n    if (value === 'table') {\n      showFlameGraph = false;\n    } else if (value === 'flame-graph') {\n      showTable = false;\n    }\n    setLiveSpec((prev) => {\n      return { ...prev, showTable: showTable, showFlameGraph: showFlameGraph };\n    });\n  };\n\n  if (!contentDimensions) return null;\n\n  let padding = 0;\n  if (liveSpec.showSeries && liveSpec.showSettings) {\n    padding = 32;\n  } else if (liveSpec.showSeries || liveSpec.showSettings) {\n    padding = 16;\n  }\n\n  const SETTINGS_HEIGHT = liveSpec.showSettings ? 30 : 0;\n\n  const seriesChartHeight = liveSpec.showSeries ? Math.min(contentDimensions.height, DEFAULT_SERIES_CHART_HEIGHT) : 0;\n\n  const reservedHeight =\n    contentDimensions.height > LARGE_PANEL_THRESHOLD ? seriesChartHeight + SETTINGS_HEIGHT + padding : 0;\n  const availableChartHeight = contentDimensions.height - reservedHeight;\n  const tableFlameChartHeight = liveSpec.traceHeight\n    ? Math.max(availableChartHeight, maxDepth * liveSpec.traceHeight)\n    : availableChartHeight;\n\n  let tableChartWidth = contentDimensions.width;\n  if (!isMobileSize && liveSpec.showFlameGraph) {\n    tableChartWidth = 0.4 * contentDimensions.width;\n  }\n\n  let flameChartWidth = contentDimensions.width;\n  if (!isMobileSize && liveSpec.showTable) {\n    flameChartWidth = 0.6 * contentDimensions.width;\n  }\n\n  // TODO (gladorme): allow users to override height (useful for explorer for stack traces with high depth)\n  return (\n    <Stack\n      height={contentDimensions.height}\n      width={contentDimensions.width}\n      justifyContent=\"center\"\n      alignItems=\"center\"\n    >\n      {queryResults.length > 1 && (\n        // display a message if there is more than one query\n        <Typography sx={{ ...noDataTextStyle }}>\n          There is more than one query. Please make sure that you provided only one query.\n        </Typography>\n      )}\n      {queryResults.length <= 1 && flameChartData && (\n        <Stack\n          gap={2}\n          sx={{\n            overflowY: 'auto',\n            scrollbarGutter: 'stable both-edges',\n            paddingTop: liveSpec.showSettings || liveSpec.showSeries ? 1 : 0,\n          }}\n        >\n          {liveSpec.showSeries && (\n            <SeriesChart width={contentDimensions.width} height={seriesChartHeight} data={flameChartData.data} />\n          )}\n          {liveSpec.showSettings && (\n            <Settings\n              onSelectedIdChange={setSelectedId}\n              onChangePalette={onChangePalette}\n              onDisplayChange={onDisplayChange}\n              value={liveSpec}\n              selectedId={selectedId}\n            />\n          )}\n          <Stack\n            direction={isMobileSize ? 'column' : 'row'}\n            justifyContent=\"center\"\n            alignItems={isMobileSize ? 'center' : 'top'}\n          >\n            {liveSpec.showTable && (\n              <TableChart\n                width={tableChartWidth}\n                height={tableFlameChartHeight}\n                data={flameChartData.data}\n                searchValue={searchValue}\n                onSearchValueChange={setSearchValue}\n                onSelectedIdChange={setSelectedId}\n              />\n            )}\n            {liveSpec.showFlameGraph && (\n              <FlameChart\n                width={flameChartWidth}\n                height={tableFlameChartHeight}\n                data={flameChartData.data}\n                palette={liveSpec.palette}\n                selectedId={selectedId}\n                searchValue={searchValue}\n                onSelectedIdChange={setSelectedId}\n              />\n            )}\n          </Stack>\n        </Stack>\n      )}\n      {queryResults.length <= 1 && !flameChartData && <Typography sx={{ ...noDataTextStyle }}>No data</Typography>}\n    </Stack>\n  );\n};\n"],"names":["Stack","Typography","useMediaQuery","useTheme","useChartsTheme","useState","useEffect","useMemo","filterStackTraceById","getMaxDepth","FlameChart","SeriesChart","Settings","TableChart","LARGE_PANEL_THRESHOLD","DEFAULT_SERIES_CHART_HEIGHT","FlameChartPanel","props","contentDimensions","queryResults","spec","isMobileSize","breakpoints","down","selectedId","setSelectedId","searchValue","setSearchValue","liveSpec","setLiveSpec","chartsTheme","flameChartData","selectedStackTrace","undefined","data","profile","stackTrace","maxDepth","noDataTextStyle","noDataOption","title","textStyle","onChangePalette","newPalette","prev","palette","onDisplayChange","value","showTable","showFlameGraph","padding","showSeries","showSettings","SETTINGS_HEIGHT","seriesChartHeight","Math","min","height","reservedHeight","availableChartHeight","tableFlameChartHeight","traceHeight","max","tableChartWidth","width","flameChartWidth","justifyContent","alignItems","length","sx","gap","overflowY","scrollbarGutter","paddingTop","onSelectedIdChange","direction","onSearchValueChange"],"mappings":"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"}

package/lib/components/PaletteSelector.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 export type PaletteOption = 'package-name' | 'value';
 export interface PaletteSelectorProps {
     onChange: (palette: PaletteOption) => void;

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

@@ -1 +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"}
+{"version":3,"file":"PaletteSelector.d.ts","sourceRoot":"","sources":["../../../src/components/PaletteSelector.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAO1C,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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 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.
@@ -10,8 +11,7 @@
 // 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';
+import { OptionsEditorControl, SettingsAutocomplete } from "@perses-dev/components";
 const PALETTE_OPTIONS = [
     {
         id: 'package-name',

package/lib/components/PaletteSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PaletteSelector.tsx"],"sourcesContent":["// Copyright 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,+BAA+B;AAC/B,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"}
+{"version":3,"sources":["../../../src/components/PaletteSelector.tsx"],"sourcesContent":["// Copyright 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 { OptionsEditorControl, SettingsAutocomplete } from '@perses-dev/components';\nimport type { ReactElement } from 'react';\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,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,oBAAoB,EAAEC,oBAAoB,QAAQ,yBAAyB;AAGpF,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

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 export interface SearchBarProps {
     searchValue: string;
     onSearchValueChange: (value: string) => void;

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

@@ -1 +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"}
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../src/components/SearchBar.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 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.
@@ -10,9 +11,8 @@
 // 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';
+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, {

package/lib/components/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SearchBar.tsx"],"sourcesContent":["// Copyright 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,+BAA+B;AAC/B,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"}
+{"version":3,"sources":["../../../src/components/SearchBar.tsx"],"sourcesContent":["// Copyright 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 { TextField, InputAdornment, Chip } from '@mui/material';\nimport Magnify from 'mdi-material-ui/Magnify';\nimport type { ReactElement } from 'react';\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,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,SAAS,EAAEC,cAAc,EAAEC,IAAI,QAAQ,gBAAgB;AAChE,OAAOC,aAAa,0BAA0B;AAQ9C,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

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { ProfileData } from '@perses-dev/spec';
+import type { ProfileData } from '@perses-dev/spec';
+import type { ReactElement } from 'react';
 export interface SeriesChartProps {
     width: number;
     height: number;

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

@@ -1 +1 @@
-{"version":3,"file":"SeriesChart.d.ts","sourceRoot":"","sources":["../../../src/components/SeriesChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAmB,MAAM,OAAO,CAAC;AAOtD,OAAO,EAAE,WAAW,EAAY,MAAM,kBAAkB,CAAC;AAQzD,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"}
+{"version":3,"file":"SeriesChart.d.ts","sourceRoot":"","sources":["../../../src/components/SeriesChart.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,WAAW,EAAY,MAAM,kBAAkB,CAAC;AAO9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAU1C,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

@@ -11,12 +11,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // 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 { 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';
+import { Stack, useTheme } from "@mui/material";
+import { useChartsTheme, EChart, enableDataZoom } from "@perses-dev/components";
+import { useTimeRange } from "@perses-dev/plugin-system";
+import { useMemo, useRef } from "react";
+import { formatItemValue } from "../utils/format.js";
+import { getSeriesTooltip } from "../utils/series-tooltip.js";
 const LINE_WIDTH = 1.25;
 const POINT_SIZE_OFFSET = 2;
 export function SeriesChart(props) {

package/lib/components/SeriesChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SeriesChart.tsx"],"sourcesContent":["// Copyright 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 { 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 { ProfileData, Timeline } from '@perses-dev/spec';\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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"}
+{"version":3,"sources":["../../../src/components/SeriesChart.tsx"],"sourcesContent":["// Copyright 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 { Stack, useTheme } from '@mui/material';\nimport type { ZoomEventData, OnEventsType } from '@perses-dev/components';\nimport { useChartsTheme, EChart, enableDataZoom } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport type { ProfileData, Timeline } from '@perses-dev/spec';\nimport type {\n  DefaultLabelFormatterCallbackParams as CallbackDataParams,\n  EChartsCoreOption,\n  LineSeriesOption,\n} from 'echarts';\nimport type { ECharts as EChartsInstance } from 'echarts/core';\nimport type { ReactElement } from 'react';\nimport { useMemo, useRef } from 'react';\n\nimport type { SeriesSample } from '../utils/data-model';\nimport { formatItemValue } from '../utils/format';\nimport { getSeriesTooltip } from '../utils/series-tooltip';\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":["Stack","useTheme","useChartsTheme","EChart","enableDataZoom","useTimeRange","useMemo","useRef","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

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { FlameChartOptions } from '../flame-chart-model';
+import type { ReactElement } from 'react';
+import type { FlameChartOptions } from '../flame-chart-model';
 export interface SettingsProps {
     value: FlameChartOptions;
     selectedId: number;

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

@@ -1 +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"}
+{"version":3,"file":"Settings.d.ts","sourceRoot":"","sources":["../../../src/components/Settings.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAG9D,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

@@ -11,12 +11,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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 { 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';
+import { Stack, Button, useTheme, MenuItem, Menu, Fade } from "@mui/material";
+import { ToolbarIconButton, InfoTooltip } from "@perses-dev/components";
+import PaletteIcon from "mdi-material-ui/Palette";
+import RefreshIcon from "mdi-material-ui/Refresh";
+import { useState, useMemo } from "react";
+import { TOOLTIP_TEXT } from "../utils/ui-text.js";
 export function Settings(props) {
     const { value, selectedId, onSelectedIdChange, onChangePalette, onDisplayChange } = props;
     const theme = useTheme();

package/lib/components/Settings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Settings.tsx"],"sourcesContent":["// Copyright 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>): void => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleByPackageNameClick = (): void => {\n    onChangePalette('package-name');\n    handleClose();\n  };\n\n  const handleByValueClick = (): void => {\n    onChangePalette('value');\n    handleClose();\n  };\n\n  const handleClose = (): void => {\n    setAnchorEl(null);\n  };\n\n  const isTableSelected = (): boolean => selectedView === 'table';\n  const isFlameGraphSelected = (): boolean => selectedView === 'flame-graph';\n  const isBothSelected = (): boolean => 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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"}
+{"version":3,"sources":["../../../src/components/Settings.tsx"],"sourcesContent":["// Copyright 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 { Stack, Button, useTheme, MenuItem, Menu, Fade } from '@mui/material';\nimport { ToolbarIconButton, InfoTooltip } from '@perses-dev/components';\nimport PaletteIcon from 'mdi-material-ui/Palette';\nimport RefreshIcon from 'mdi-material-ui/Refresh';\nimport type { ReactElement } from 'react';\nimport { useState, useMemo } from 'react';\n\nimport type { FlameChartOptions } from '../flame-chart-model';\nimport { TOOLTIP_TEXT } from '../utils/ui-text';\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>): void => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handleByPackageNameClick = (): void => {\n    onChangePalette('package-name');\n    handleClose();\n  };\n\n  const handleByValueClick = (): void => {\n    onChangePalette('value');\n    handleClose();\n  };\n\n  const handleClose = (): void => {\n    setAnchorEl(null);\n  };\n\n  const isTableSelected = (): boolean => selectedView === 'table';\n  const isFlameGraphSelected = (): boolean => selectedView === 'flame-graph';\n  const isBothSelected = (): boolean => 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":["Stack","Button","useTheme","MenuItem","Menu","Fade","ToolbarIconButton","InfoTooltip","PaletteIcon","RefreshIcon","useState","useMemo","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

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 export interface SwitchSelectorProps {
     onChange: (newValue: boolean) => void;
     value?: boolean;

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

@@ -1 +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"}
+{"version":3,"file":"SwitchSelector.d.ts","sourceRoot":"","sources":["../../../src/components/SwitchSelector.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 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.
@@ -10,9 +11,8 @@
 // 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';
+import { Switch } from "@mui/material";
+import { OptionsEditorControl } from "@perses-dev/components";
 export function SwitchSelector({ onChange, value, label }) {
     const handleValuesChange = (_, checked)=>{
         onChange(checked);

package/lib/components/SwitchSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SwitchSelector.tsx"],"sourcesContent":["// Copyright 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,+BAA+B;AAC/B,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"}
+{"version":3,"sources":["../../../src/components/SwitchSelector.tsx"],"sourcesContent":["// Copyright 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 { Switch } from '@mui/material';\nimport { OptionsEditorControl } from '@perses-dev/components';\nimport type { ReactElement } from 'react';\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":["Switch","OptionsEditorControl","SwitchSelector","onChange","value","label","handleValuesChange","_","checked","control"],"mappings":";AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,MAAM,QAAQ,gBAAgB;AACvC,SAASC,oBAAoB,QAAQ,yBAAyB;AAS9D,OAAO,SAASC,eAAe,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,KAAK,EAAuB;IAC5E,MAAMC,qBAAqB,CAACC,GAAYC;QACtCL,SAASK;IACX;IAEA,qBAAO,KAACP;QAAqBI,OAAOA;QAAOI,uBAAS,KAACT;YAAOQ,SAASJ;YAAOD,UAAUG;;;AACxF"}

package/lib/components/TableChart.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { ProfileData } from '@perses-dev/spec';
+import type { ProfileData } from '@perses-dev/spec';
+import type { ReactElement } from 'react';
 export interface TableChartProps {
     width: number;
     height: number;

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

@@ -1 +1 @@
-{"version":3,"file":"TableChart.d.ts","sourceRoot":"","sources":["../../../src/components/TableChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAKxD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAW/C,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAyG/D"}
+{"version":3,"file":"TableChart.d.ts","sourceRoot":"","sources":["../../../src/components/TableChart.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEpD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAa1C,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAyG/D"}

package/lib/components/TableChart.js

@@ -11,12 +11,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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 { useMemo, useState } from 'react';
-import { Stack, useTheme, Link } from '@mui/material';
-import { Table } from '@perses-dev/components';
-import { tableRecursionJson } from '../utils/data-transform';
-import { formatItemValue } from '../utils/format';
-import { SearchBar } from './SearchBar';
+import { Stack, useTheme, Link } from "@mui/material";
+import { Table } from "@perses-dev/components";
+import { useMemo, useState } from "react";
+import { tableRecursionJson } from "../utils/data-transform.js";
+import { formatItemValue } from "../utils/format.js";
+import { SearchBar } from "./SearchBar.js";
 const LARGE_PANEL_TRESHOLD = 600; // heigth treshold to switch to large panel mode
 const PADDING_TOP = 8;
 const SCROLL_BAR_WIDTH = 15;

package/lib/components/TableChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TableChart.tsx"],"sourcesContent":["// Copyright 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, useState } from 'react';\nimport { Stack, useTheme, Link } from '@mui/material';\n\nimport { Table, TableColumnConfig } from '@perses-dev/components';\nimport { SortingState } from '@tanstack/react-table';\nimport { ProfileData } from '@perses-dev/spec';\nimport { tableRecursionJson } from '../utils/data-transform';\nimport { TableChartSample } from '../utils/data-model';\nimport { formatItemValue } from '../utils/format';\nimport { SearchBar } from './SearchBar';\n\nconst LARGE_PANEL_TRESHOLD = 600; // heigth treshold to switch to large panel mode\nconst PADDING_TOP = 8;\nconst SCROLL_BAR_WIDTH = 15;\nconst SEARCH_BAR_HEIGHT = 50;\n\nexport interface TableChartProps {\n  width: number;\n  height: number;\n  data: ProfileData;\n  searchValue: string;\n  onSearchValueChange: (value: string) => void;\n  onSelectedIdChange: (id: number) => void;\n}\n\nexport function TableChart(props: TableChartProps): ReactElement {\n  const { width, height, data, searchValue, onSearchValueChange, onSelectedIdChange } = props;\n\n  const theme = useTheme();\n\n  const availableHeight = height;\n  const availableWidth = width - 10;\n\n  const tableData: TableChartSample[] = useMemo(() => {\n    return tableRecursionJson(data.profile.stackTrace, searchValue);\n  }, [data, searchValue]);\n\n  const columns: Array<TableColumnConfig<unknown>> = useMemo(() => {\n    const unit = data.metadata?.units || '';\n\n    const columnSettings: Array<TableColumnConfig<unknown>> = [\n      {\n        accessorKey: 'name',\n        header: 'Name',\n        headerDescription: 'Function name',\n        align: 'left',\n        enableSorting: true,\n        width: 0.5 * availableWidth,\n        cell: (ctx): ReactElement => {\n          const cellValue = ctx.getValue();\n          return (\n            <Link\n              href=\"#\"\n              underline=\"hover\"\n              onClick={(e) => {\n                e.preventDefault();\n                const currentSample = ctx.row.original as TableChartSample;\n                onSelectedIdChange(currentSample.id); // focus on this item in the flame graph\n                onSearchValueChange(currentSample.name);\n              }}\n            >\n              {cellValue}\n            </Link>\n          );\n        },\n        cellDescription: () => '',\n      },\n      {\n        accessorKey: 'self',\n        header: 'Self',\n        headerDescription: 'Function self samples',\n        align: 'right',\n        enableSorting: true,\n        width: 0.25 * availableWidth - SCROLL_BAR_WIDTH,\n        cell: (ctx): string => {\n          const cellValue = ctx.getValue();\n          return formatItemValue(unit, cellValue);\n        },\n      },\n      {\n        accessorKey: 'total',\n        header: 'Total',\n        headerDescription: 'Function total samples',\n        align: 'right',\n        enableSorting: true,\n        width: 0.25 * availableWidth,\n        cell: (ctx): string => {\n          const cellValue = ctx.getValue();\n          return formatItemValue(unit, cellValue);\n        },\n      },\n    ];\n\n    return columnSettings;\n  }, [data.metadata?.units, availableWidth, onSearchValueChange, onSelectedIdChange]);\n\n  const [sorting, setSorting] = useState<SortingState>([{ id: 'total', desc: true }]);\n\n  return (\n    <Stack\n      width={availableWidth}\n      height={availableHeight}\n      gap={1}\n      sx={{\n        '& .MuiTable-root': {\n          borderCollapse: 'collapse',\n        },\n        '& .MuiTableCell-root': {\n          borderBottom: `1px solid ${theme.palette.divider}`,\n          borderRight: `1px solid ${theme.palette.divider}`,\n          '&:last-child': {\n            borderRight: 'none',\n          },\n        },\n      }}\n    >\n      <SearchBar searchValue={searchValue} onSearchValueChange={onSearchValueChange} />\n      <Table\n        data={tableData}\n        columns={columns}\n        height={availableHeight - PADDING_TOP - SEARCH_BAR_HEIGHT}\n        width={availableWidth}\n        density={availableHeight < LARGE_PANEL_TRESHOLD ? 'compact' : 'standard'}\n        defaultColumnWidth=\"auto\"\n        defaultColumnHeight=\"auto\"\n        sorting={sorting}\n        onSortingChange={setSorting}\n      />\n    </Stack>\n  );\n}\n"],"names":["useMemo","useState","Stack","useTheme","Link","Table","tableRecursionJson","formatItemValue","SearchBar","LARGE_PANEL_TRESHOLD","PADDING_TOP","SCROLL_BAR_WIDTH","SEARCH_BAR_HEIGHT","TableChart","props","width","height","data","searchValue","onSearchValueChange","onSelectedIdChange","theme","availableHeight","availableWidth","tableData","profile","stackTrace","columns","unit","metadata","units","columnSettings","accessorKey","header","headerDescription","align","enableSorting","cell","ctx","cellValue","getValue","href","underline","onClick","e","preventDefault","currentSample","row","original","id","name","cellDescription","sorting","setSorting","desc","gap","sx","borderCollapse","borderBottom","palette","divider","borderRight","density","defaultColumnWidth","defaultColumnHeight","onSortingChange"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/TableChart.tsx"],"sourcesContent":["// Copyright 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 { Stack, useTheme, Link } from '@mui/material';\nimport type { TableColumnConfig } from '@perses-dev/components';\nimport { Table } from '@perses-dev/components';\nimport type { ProfileData } from '@perses-dev/spec';\nimport type { SortingState } from '@tanstack/react-table';\nimport type { ReactElement } from 'react';\nimport { useMemo, useState } from 'react';\n\nimport type { TableChartSample } from '../utils/data-model';\nimport { tableRecursionJson } from '../utils/data-transform';\nimport { formatItemValue } from '../utils/format';\nimport { SearchBar } from './SearchBar';\n\nconst LARGE_PANEL_TRESHOLD = 600; // heigth treshold to switch to large panel mode\nconst PADDING_TOP = 8;\nconst SCROLL_BAR_WIDTH = 15;\nconst SEARCH_BAR_HEIGHT = 50;\n\nexport interface TableChartProps {\n  width: number;\n  height: number;\n  data: ProfileData;\n  searchValue: string;\n  onSearchValueChange: (value: string) => void;\n  onSelectedIdChange: (id: number) => void;\n}\n\nexport function TableChart(props: TableChartProps): ReactElement {\n  const { width, height, data, searchValue, onSearchValueChange, onSelectedIdChange } = props;\n\n  const theme = useTheme();\n\n  const availableHeight = height;\n  const availableWidth = width - 10;\n\n  const tableData: TableChartSample[] = useMemo(() => {\n    return tableRecursionJson(data.profile.stackTrace, searchValue);\n  }, [data, searchValue]);\n\n  const columns: Array<TableColumnConfig<unknown>> = useMemo(() => {\n    const unit = data.metadata?.units || '';\n\n    const columnSettings: Array<TableColumnConfig<unknown>> = [\n      {\n        accessorKey: 'name',\n        header: 'Name',\n        headerDescription: 'Function name',\n        align: 'left',\n        enableSorting: true,\n        width: 0.5 * availableWidth,\n        cell: (ctx): ReactElement => {\n          const cellValue = ctx.getValue();\n          return (\n            <Link\n              href=\"#\"\n              underline=\"hover\"\n              onClick={(e) => {\n                e.preventDefault();\n                const currentSample = ctx.row.original as TableChartSample;\n                onSelectedIdChange(currentSample.id); // focus on this item in the flame graph\n                onSearchValueChange(currentSample.name);\n              }}\n            >\n              {cellValue}\n            </Link>\n          );\n        },\n        cellDescription: () => '',\n      },\n      {\n        accessorKey: 'self',\n        header: 'Self',\n        headerDescription: 'Function self samples',\n        align: 'right',\n        enableSorting: true,\n        width: 0.25 * availableWidth - SCROLL_BAR_WIDTH,\n        cell: (ctx): string => {\n          const cellValue = ctx.getValue();\n          return formatItemValue(unit, cellValue);\n        },\n      },\n      {\n        accessorKey: 'total',\n        header: 'Total',\n        headerDescription: 'Function total samples',\n        align: 'right',\n        enableSorting: true,\n        width: 0.25 * availableWidth,\n        cell: (ctx): string => {\n          const cellValue = ctx.getValue();\n          return formatItemValue(unit, cellValue);\n        },\n      },\n    ];\n\n    return columnSettings;\n  }, [data.metadata?.units, availableWidth, onSearchValueChange, onSelectedIdChange]);\n\n  const [sorting, setSorting] = useState<SortingState>([{ id: 'total', desc: true }]);\n\n  return (\n    <Stack\n      width={availableWidth}\n      height={availableHeight}\n      gap={1}\n      sx={{\n        '& .MuiTable-root': {\n          borderCollapse: 'collapse',\n        },\n        '& .MuiTableCell-root': {\n          borderBottom: `1px solid ${theme.palette.divider}`,\n          borderRight: `1px solid ${theme.palette.divider}`,\n          '&:last-child': {\n            borderRight: 'none',\n          },\n        },\n      }}\n    >\n      <SearchBar searchValue={searchValue} onSearchValueChange={onSearchValueChange} />\n      <Table\n        data={tableData}\n        columns={columns}\n        height={availableHeight - PADDING_TOP - SEARCH_BAR_HEIGHT}\n        width={availableWidth}\n        density={availableHeight < LARGE_PANEL_TRESHOLD ? 'compact' : 'standard'}\n        defaultColumnWidth=\"auto\"\n        defaultColumnHeight=\"auto\"\n        sorting={sorting}\n        onSortingChange={setSorting}\n      />\n    </Stack>\n  );\n}\n"],"names":["Stack","useTheme","Link","Table","useMemo","useState","tableRecursionJson","formatItemValue","SearchBar","LARGE_PANEL_TRESHOLD","PADDING_TOP","SCROLL_BAR_WIDTH","SEARCH_BAR_HEIGHT","TableChart","props","width","height","data","searchValue","onSearchValueChange","onSelectedIdChange","theme","availableHeight","availableWidth","tableData","profile","stackTrace","columns","unit","metadata","units","columnSettings","accessorKey","header","headerDescription","align","enableSorting","cell","ctx","cellValue","getValue","href","underline","onClick","e","preventDefault","currentSample","row","original","id","name","cellDescription","sorting","setSorting","desc","gap","sx","borderCollapse","borderBottom","palette","divider","borderRight","density","defaultColumnWidth","defaultColumnHeight","onSortingChange"],"mappings":"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"}

package/lib/components/index.js

@@ -10,15 +10,15 @@
 // 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 './CustomBreadcrumb';
-export * from './FlameChart';
-export * from './FlameChartOptionsEditorSettings';
-export * from './FlameChartPanel';
-export * from './PaletteSelector';
-export * from './SearchBar';
-export * from './SeriesChart';
-export * from './Settings';
-export * from './SwitchSelector';
-export * from './TableChart';
+export * from "./CustomBreadcrumb.js";
+export * from "./FlameChart.js";
+export * from "./FlameChartOptionsEditorSettings.js";
+export * from "./FlameChartPanel.js";
+export * from "./PaletteSelector.js";
+export * from "./SearchBar.js";
+export * from "./SeriesChart.js";
+export * from "./Settings.js";
+export * from "./SwitchSelector.js";
+export * from "./TableChart.js";
 
 //# sourceMappingURL=index.js.map

package/lib/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["// Copyright 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 './CustomBreadcrumb';\nexport * from './FlameChart';\nexport * from './FlameChartOptionsEditorSettings';\nexport * from './FlameChartPanel';\nexport * from './PaletteSelector';\nexport * from './SearchBar';\nexport * from './SeriesChart';\nexport * from './Settings';\nexport * from './SwitchSelector';\nexport * from './TableChart';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,qBAAqB;AACnC,cAAc,eAAe;AAC7B,cAAc,oCAAoC;AAClD,cAAc,oBAAoB;AAClC,cAAc,oBAAoB;AAClC,cAAc,cAAc;AAC5B,cAAc,gBAAgB;AAC9B,cAAc,aAAa;AAC3B,cAAc,mBAAmB;AACjC,cAAc,eAAe"}
+{"version":3,"sources":["../../../src/components/index.ts"],"sourcesContent":["// Copyright 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 './CustomBreadcrumb';\nexport * from './FlameChart';\nexport * from './FlameChartOptionsEditorSettings';\nexport * from './FlameChartPanel';\nexport * from './PaletteSelector';\nexport * from './SearchBar';\nexport * from './SeriesChart';\nexport * from './Settings';\nexport * from './SwitchSelector';\nexport * from './TableChart';\n"],"names":[],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,wBAAqB;AACnC,cAAc,kBAAe;AAC7B,cAAc,uCAAoC;AAClD,cAAc,uBAAoB;AAClC,cAAc,uBAAoB;AAClC,cAAc,iBAAc;AAC5B,cAAc,mBAAgB;AAC9B,cAAc,gBAAa;AAC3B,cAAc,sBAAmB;AACjC,cAAc,kBAAe"}

package/lib/flame-chart-model.d.ts

@@ -1,5 +1,5 @@
-import { OptionsEditorProps } from '@perses-dev/plugin-system';
-import { Definition } from '@perses-dev/spec';
+import type { OptionsEditorProps } from '@perses-dev/plugin-system';
+import type { Definition } from '@perses-dev/spec';
 /**
  * The schema for a FlameChart panel.
  */

package/lib/flame-chart-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flame-chart-model.d.ts","sourceRoot":"","sources":["../../src/flame-chart-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,UAAU,CAAC,iBAAiB,CAAC;IACzE,IAAI,EAAE,YAAY,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC;IAClC,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,4BAA4B,GAAG,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;AAEjF,wBAAgB,8BAA8B,IAAI,iBAAiB,CAQlE"}
+{"version":3,"file":"flame-chart-model.d.ts","sourceRoot":"","sources":["../../src/flame-chart-model.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,UAAU,CAAC,iBAAiB,CAAC;IACzE,IAAI,EAAE,YAAY,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC;IAClC,YAAY,EAAE,OAAO,CAAC;IACtB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,MAAM,4BAA4B,GAAG,kBAAkB,CAAC,iBAAiB,CAAC,CAAC;AAEjF,wBAAgB,8BAA8B,IAAI,iBAAiB,CAQlE"}

package/lib/flame-chart-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/flame-chart-model.ts"],"sourcesContent":["// Copyright 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 { OptionsEditorProps } from '@perses-dev/plugin-system';\nimport { Definition } from '@perses-dev/spec';\n\n/**\n * The schema for a FlameChart panel.\n */\nexport interface FlameChartDefinition extends Definition<FlameChartOptions> {\n  kind: 'FlameChart';\n}\n\nexport interface FlameChartOptions {\n  palette: 'package-name' | 'value';\n  showSettings: boolean;\n  showSeries: boolean;\n  showTable: boolean;\n  showFlameGraph: boolean;\n  traceHeight?: number;\n}\n\nexport type FlameChartOptionsEditorProps = OptionsEditorProps<FlameChartOptions>;\n\nexport function createInitialFlameChartOptions(): FlameChartOptions {\n  return {\n    palette: 'package-name',\n    showSettings: true,\n    showSeries: false,\n    showTable: true,\n    showFlameGraph: true,\n  };\n}\n"],"names":["createInitialFlameChartOptions","palette","showSettings","showSeries","showTable","showFlameGraph"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAuBjC,OAAO,SAASA;IACd,OAAO;QACLC,SAAS;QACTC,cAAc;QACdC,YAAY;QACZC,WAAW;QACXC,gBAAgB;IAClB;AACF"}
+{"version":3,"sources":["../../src/flame-chart-model.ts"],"sourcesContent":["// Copyright 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 type { OptionsEditorProps } from '@perses-dev/plugin-system';\nimport type { Definition } from '@perses-dev/spec';\n\n/**\n * The schema for a FlameChart panel.\n */\nexport interface FlameChartDefinition extends Definition<FlameChartOptions> {\n  kind: 'FlameChart';\n}\n\nexport interface FlameChartOptions {\n  palette: 'package-name' | 'value';\n  showSettings: boolean;\n  showSeries: boolean;\n  showTable: boolean;\n  showFlameGraph: boolean;\n  traceHeight?: number;\n}\n\nexport type FlameChartOptionsEditorProps = OptionsEditorProps<FlameChartOptions>;\n\nexport function createInitialFlameChartOptions(): FlameChartOptions {\n  return {\n    palette: 'package-name',\n    showSettings: true,\n    showSeries: false,\n    showTable: true,\n    showFlameGraph: true,\n  };\n}\n"],"names":["createInitialFlameChartOptions","palette","showSettings","showSeries","showTable","showFlameGraph"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAuBjC,OAAO,SAASA;IACd,OAAO;QACLC,SAAS;QACTC,cAAc;QACdC,YAAY;QACZC,WAAW;QACXC,gBAAgB;IAClB;AACF"}

package/lib/getPluginModule.d.ts

@@ -1,4 +1,4 @@
-import { PluginModuleResource } from '@perses-dev/plugin-system';
+import type { PluginModuleResource } from '@perses-dev/plugin-system';
 /**
  * Returns the plugin module information from package.json
  */

package/lib/getPluginModule.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getPluginModule.d.ts","sourceRoot":"","sources":["../../src/getPluginModule.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,oBAAoB,EAAoB,MAAM,2BAA2B,CAAC;AAGnF;;GAEG;AACH,wBAAgB,eAAe,IAAI,oBAAoB,CAUtD"}
+{"version":3,"file":"getPluginModule.d.ts","sourceRoot":"","sources":["../../src/getPluginModule.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,oBAAoB,EAAoB,MAAM,2BAA2B,CAAC;AAIxF;;GAEG;AACH,wBAAgB,eAAe,IAAI,oBAAoB,CAUtD"}

package/lib/getPluginModule.js

@@ -10,7 +10,9 @@
 // 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 packageJson from '../package.json';
+import packageJson from "../package.json" with {
+    type: 'json'
+};
 /**
  * Returns the plugin module information from package.json
  */ export function getPluginModule() {