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

package/lib/FlameChart.js

@@ -10,8 +10,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 { createInitialFlameChartOptions } from './flame-chart-model';
-import { FlameChartPanel, FlameChartOptionsEditorSettings } from './components';
+import { FlameChartPanel, FlameChartOptionsEditorSettings } from "./components/index.js";
+import { createInitialFlameChartOptions } from "./flame-chart-model.js";
 /**
  * The core FlameChart panel plugin for Perses.
  */ export const FlameChart = {

package/lib/FlameChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/FlameChart.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 { PanelPlugin } from '@perses-dev/plugin-system';\nimport { createInitialFlameChartOptions, FlameChartOptions } from './flame-chart-model';\nimport { FlameChartPanel, FlameChartPanelProps, FlameChartOptionsEditorSettings } from './components';\n\n/**\n * The core FlameChart panel plugin for Perses.\n */\nexport const FlameChart: PanelPlugin<FlameChartOptions, FlameChartPanelProps> = {\n  PanelComponent: FlameChartPanel,\n  supportedQueryTypes: ['ProfileQuery'],\n  panelOptionsEditorComponents: [\n    {\n      label: 'Settings',\n      content: FlameChartOptionsEditorSettings,\n    },\n  ],\n  createInitialOptions: createInitialFlameChartOptions,\n};\n"],"names":["createInitialFlameChartOptions","FlameChartPanel","FlameChartOptionsEditorSettings","FlameChart","PanelComponent","supportedQueryTypes","panelOptionsEditorComponents","label","content","createInitialOptions"],"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;AAGjC,SAASA,8BAA8B,QAA2B,sBAAsB;AACxF,SAASC,eAAe,EAAwBC,+BAA+B,QAAQ,eAAe;AAEtG;;CAEC,GACD,OAAO,MAAMC,aAAmE;IAC9EC,gBAAgBH;IAChBI,qBAAqB;QAAC;KAAe;IACrCC,8BAA8B;QAC5B;YACEC,OAAO;YACPC,SAASN;QACX;KACD;IACDO,sBAAsBT;AACxB,EAAE"}
+{"version":3,"sources":["../../src/FlameChart.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 { PanelPlugin } from '@perses-dev/plugin-system';\n\nimport type { FlameChartPanelProps } from './components';\nimport { FlameChartPanel, FlameChartOptionsEditorSettings } from './components';\nimport type { FlameChartOptions } from './flame-chart-model';\nimport { createInitialFlameChartOptions } from './flame-chart-model';\n\n/**\n * The core FlameChart panel plugin for Perses.\n */\nexport const FlameChart: PanelPlugin<FlameChartOptions, FlameChartPanelProps> = {\n  PanelComponent: FlameChartPanel,\n  supportedQueryTypes: ['ProfileQuery'],\n  panelOptionsEditorComponents: [\n    {\n      label: 'Settings',\n      content: FlameChartOptionsEditorSettings,\n    },\n  ],\n  createInitialOptions: createInitialFlameChartOptions,\n};\n"],"names":["FlameChartPanel","FlameChartOptionsEditorSettings","createInitialFlameChartOptions","FlameChart","PanelComponent","supportedQueryTypes","panelOptionsEditorComponents","label","content","createInitialOptions"],"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;AAKjC,SAASA,eAAe,EAAEC,+BAA+B,QAAQ,wBAAe;AAEhF,SAASC,8BAA8B,QAAQ,yBAAsB;AAErE;;CAEC,GACD,OAAO,MAAMC,aAAmE;IAC9EC,gBAAgBJ;IAChBK,qBAAqB;QAAC;KAAe;IACrCC,8BAA8B;QAC5B;YACEC,OAAO;YACPC,SAASP;QACX;KACD;IACDQ,sBAAsBP;AACxB,EAAE"}

package/lib/bootstrap.js

@@ -11,8 +11,8 @@ 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 React from 'react';
-import ReactDOM from 'react-dom/client';
+import React from "react";
+import ReactDOM from "react-dom/client";
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(/*#__PURE__*/ _jsx(React.StrictMode, {}));
 

package/lib/components/CustomBreadcrumb.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 export interface CustomBreadcrumbProps {
     totalValue: string;
     totalSample: number;

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

@@ -1 +1 @@
-{"version":3,"file":"CustomBreadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/CustomBreadcrumb.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AASrC,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAmBD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAgC3E"}
+{"version":3,"file":"CustomBreadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/CustomBreadcrumb.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAmBD,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAgC3E"}

package/lib/components/CustomBreadcrumb.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } 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,14 +11,13 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND |  either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Stack, Breadcrumbs } from '@mui/material';
-import ChevronRightIcon from 'mdi-material-ui/ChevronRight';
-import EyeIcon from 'mdi-material-ui/EyeOutline';
-import CloseIcon from 'mdi-material-ui/Close';
-import Chip from '@mui/material/Chip';
-import { emphasize, styled } from '@mui/material/styles';
-import { formatValue } from '@perses-dev/components';
+import { Stack, Breadcrumbs } from "@mui/material";
+import Chip from "@mui/material/Chip";
+import { emphasize, styled } from "@mui/material/styles";
+import { formatValue } from "@perses-dev/components";
+import ChevronRightIcon from "mdi-material-ui/ChevronRight";
+import CloseIcon from "mdi-material-ui/Close";
+import EyeIcon from "mdi-material-ui/EyeOutline";
 const StyledBreadcrumb = styled(Chip)(({ theme })=>{
     const backgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[800];
     return {

package/lib/components/CustomBreadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CustomBreadcrumb.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 { Stack, Breadcrumbs } from '@mui/material';\nimport ChevronRightIcon from 'mdi-material-ui/ChevronRight';\nimport EyeIcon from 'mdi-material-ui/EyeOutline';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport Chip from '@mui/material/Chip';\nimport { emphasize, styled } from '@mui/material/styles';\nimport { formatValue } from '@perses-dev/components';\n\nexport interface CustomBreadcrumbProps {\n  totalValue: string;\n  totalSample: number;\n  otherItemSample: number | undefined;\n  onSelectedIdChange: (newId: number) => void;\n}\n\nconst StyledBreadcrumb = styled(Chip)(({ theme }) => {\n  const backgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[800];\n  return {\n    backgroundColor,\n    height: theme.spacing(3),\n    color: theme.palette.text.primary,\n    fontWeight: theme.typography.fontWeightRegular,\n    '&:hover, &:focus': {\n      backgroundColor: emphasize(backgroundColor, 0.06),\n    },\n    '&:active': {\n      boxShadow: theme.shadows[1],\n      backgroundColor: emphasize(backgroundColor, 0.12),\n    },\n  };\n});\n\nexport function CustomBreadcrumb(props: CustomBreadcrumbProps): ReactElement {\n  const { totalValue, totalSample, otherItemSample, onSelectedIdChange } = props;\n\n  const handleClick = (event: React.MouseEvent<Element, MouseEvent>): void => {\n    event.preventDefault();\n    onSelectedIdChange(0);\n  };\n\n  const splitedValue = totalValue.split('(');\n  const totalValueText = splitedValue[splitedValue.length - 1]?.slice(0, -1);\n\n  const totalLabel = formatValue(totalSample, { unit: 'decimal', decimalPlaces: 2, shortValues: true }) + ' samples';\n\n  return (\n    <Stack direction=\"row\" spacing={1} minHeight={40} alignItems=\"center\">\n      <Breadcrumbs\n        separator={<ChevronRightIcon fontSize=\"small\" />}\n        aria-label=\"breadcrumb\"\n        sx={{ justifyContent: 'center' }}\n      >\n        <StyledBreadcrumb label={totalValueText + '  |  ' + totalLabel} />\n        {otherItemSample !== undefined && (\n          <StyledBreadcrumb\n            label={((otherItemSample / totalSample) * 100).toFixed(2) + '% of total'}\n            icon={<EyeIcon fontSize=\"small\" color=\"secondary\" />}\n            deleteIcon={<CloseIcon fontSize=\"small\" />}\n            onDelete={handleClick}\n          />\n        )}\n      </Breadcrumbs>\n    </Stack>\n  );\n}\n"],"names":["Stack","Breadcrumbs","ChevronRightIcon","EyeIcon","CloseIcon","Chip","emphasize","styled","formatValue","StyledBreadcrumb","theme","backgroundColor","palette","mode","grey","height","spacing","color","text","primary","fontWeight","typography","fontWeightRegular","boxShadow","shadows","CustomBreadcrumb","props","totalValue","totalSample","otherItemSample","onSelectedIdChange","handleClick","event","preventDefault","splitedValue","split","totalValueText","length","slice","totalLabel","unit","decimalPlaces","shortValues","direction","minHeight","alignItems","separator","fontSize","aria-label","sx","justifyContent","label","undefined","toFixed","icon","deleteIcon","onDelete"],"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,KAAK,EAAEC,WAAW,QAAQ,gBAAgB;AACnD,OAAOC,sBAAsB,+BAA+B;AAC5D,OAAOC,aAAa,6BAA6B;AACjD,OAAOC,eAAe,wBAAwB;AAC9C,OAAOC,UAAU,qBAAqB;AACtC,SAASC,SAAS,EAAEC,MAAM,QAAQ,uBAAuB;AACzD,SAASC,WAAW,QAAQ,yBAAyB;AASrD,MAAMC,mBAAmBF,OAAOF,MAAM,CAAC,EAAEK,KAAK,EAAE;IAC9C,MAAMC,kBAAkBD,MAAME,OAAO,CAACC,IAAI,KAAK,UAAUH,MAAME,OAAO,CAACE,IAAI,CAAC,IAAI,GAAGJ,MAAME,OAAO,CAACE,IAAI,CAAC,IAAI;IAC1G,OAAO;QACLH;QACAI,QAAQL,MAAMM,OAAO,CAAC;QACtBC,OAAOP,MAAME,OAAO,CAACM,IAAI,CAACC,OAAO;QACjCC,YAAYV,MAAMW,UAAU,CAACC,iBAAiB;QAC9C,oBAAoB;YAClBX,iBAAiBL,UAAUK,iBAAiB;QAC9C;QACA,YAAY;YACVY,WAAWb,MAAMc,OAAO,CAAC,EAAE;YAC3Bb,iBAAiBL,UAAUK,iBAAiB;QAC9C;IACF;AACF;AAEA,OAAO,SAASc,iBAAiBC,KAA4B;IAC3D,MAAM,EAAEC,UAAU,EAAEC,WAAW,EAAEC,eAAe,EAAEC,kBAAkB,EAAE,GAAGJ;IAEzE,MAAMK,cAAc,CAACC;QACnBA,MAAMC,cAAc;QACpBH,mBAAmB;IACrB;IAEA,MAAMI,eAAeP,WAAWQ,KAAK,CAAC;IACtC,MAAMC,iBAAiBF,YAAY,CAACA,aAAaG,MAAM,GAAG,EAAE,EAAEC,MAAM,GAAG,CAAC;IAExE,MAAMC,aAAa/B,YAAYoB,aAAa;QAAEY,MAAM;QAAWC,eAAe;QAAGC,aAAa;IAAK,KAAK;IAExG,qBACE,KAAC1C;QAAM2C,WAAU;QAAM3B,SAAS;QAAG4B,WAAW;QAAIC,YAAW;kBAC3D,cAAA,MAAC5C;YACC6C,yBAAW,KAAC5C;gBAAiB6C,UAAS;;YACtCC,cAAW;YACXC,IAAI;gBAAEC,gBAAgB;YAAS;;8BAE/B,KAACzC;oBAAiB0C,OAAOf,iBAAiB,UAAUG;;gBACnDV,oBAAoBuB,2BACnB,KAAC3C;oBACC0C,OAAO,AAAC,CAAA,AAACtB,kBAAkBD,cAAe,GAAE,EAAGyB,OAAO,CAAC,KAAK;oBAC5DC,oBAAM,KAACnD;wBAAQ4C,UAAS;wBAAQ9B,OAAM;;oBACtCsC,0BAAY,KAACnD;wBAAU2C,UAAS;;oBAChCS,UAAUzB;;;;;AAMtB"}
+{"version":3,"sources":["../../../src/components/CustomBreadcrumb.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, Breadcrumbs } from '@mui/material';\nimport Chip from '@mui/material/Chip';\nimport { emphasize, styled } from '@mui/material/styles';\nimport { formatValue } from '@perses-dev/components';\nimport ChevronRightIcon from 'mdi-material-ui/ChevronRight';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport EyeIcon from 'mdi-material-ui/EyeOutline';\nimport type { ReactElement } from 'react';\n\nexport interface CustomBreadcrumbProps {\n  totalValue: string;\n  totalSample: number;\n  otherItemSample: number | undefined;\n  onSelectedIdChange: (newId: number) => void;\n}\n\nconst StyledBreadcrumb = styled(Chip)(({ theme }) => {\n  const backgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[800];\n  return {\n    backgroundColor,\n    height: theme.spacing(3),\n    color: theme.palette.text.primary,\n    fontWeight: theme.typography.fontWeightRegular,\n    '&:hover, &:focus': {\n      backgroundColor: emphasize(backgroundColor, 0.06),\n    },\n    '&:active': {\n      boxShadow: theme.shadows[1],\n      backgroundColor: emphasize(backgroundColor, 0.12),\n    },\n  };\n});\n\nexport function CustomBreadcrumb(props: CustomBreadcrumbProps): ReactElement {\n  const { totalValue, totalSample, otherItemSample, onSelectedIdChange } = props;\n\n  const handleClick = (event: React.MouseEvent<Element, MouseEvent>): void => {\n    event.preventDefault();\n    onSelectedIdChange(0);\n  };\n\n  const splitedValue = totalValue.split('(');\n  const totalValueText = splitedValue[splitedValue.length - 1]?.slice(0, -1);\n\n  const totalLabel = formatValue(totalSample, { unit: 'decimal', decimalPlaces: 2, shortValues: true }) + ' samples';\n\n  return (\n    <Stack direction=\"row\" spacing={1} minHeight={40} alignItems=\"center\">\n      <Breadcrumbs\n        separator={<ChevronRightIcon fontSize=\"small\" />}\n        aria-label=\"breadcrumb\"\n        sx={{ justifyContent: 'center' }}\n      >\n        <StyledBreadcrumb label={totalValueText + '  |  ' + totalLabel} />\n        {otherItemSample !== undefined && (\n          <StyledBreadcrumb\n            label={((otherItemSample / totalSample) * 100).toFixed(2) + '% of total'}\n            icon={<EyeIcon fontSize=\"small\" color=\"secondary\" />}\n            deleteIcon={<CloseIcon fontSize=\"small\" />}\n            onDelete={handleClick}\n          />\n        )}\n      </Breadcrumbs>\n    </Stack>\n  );\n}\n"],"names":["Stack","Breadcrumbs","Chip","emphasize","styled","formatValue","ChevronRightIcon","CloseIcon","EyeIcon","StyledBreadcrumb","theme","backgroundColor","palette","mode","grey","height","spacing","color","text","primary","fontWeight","typography","fontWeightRegular","boxShadow","shadows","CustomBreadcrumb","props","totalValue","totalSample","otherItemSample","onSelectedIdChange","handleClick","event","preventDefault","splitedValue","split","totalValueText","length","slice","totalLabel","unit","decimalPlaces","shortValues","direction","minHeight","alignItems","separator","fontSize","aria-label","sx","justifyContent","label","undefined","toFixed","icon","deleteIcon","onDelete"],"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,KAAK,EAAEC,WAAW,QAAQ,gBAAgB;AACnD,OAAOC,UAAU,qBAAqB;AACtC,SAASC,SAAS,EAAEC,MAAM,QAAQ,uBAAuB;AACzD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,OAAOC,sBAAsB,+BAA+B;AAC5D,OAAOC,eAAe,wBAAwB;AAC9C,OAAOC,aAAa,6BAA6B;AAUjD,MAAMC,mBAAmBL,OAAOF,MAAM,CAAC,EAAEQ,KAAK,EAAE;IAC9C,MAAMC,kBAAkBD,MAAME,OAAO,CAACC,IAAI,KAAK,UAAUH,MAAME,OAAO,CAACE,IAAI,CAAC,IAAI,GAAGJ,MAAME,OAAO,CAACE,IAAI,CAAC,IAAI;IAC1G,OAAO;QACLH;QACAI,QAAQL,MAAMM,OAAO,CAAC;QACtBC,OAAOP,MAAME,OAAO,CAACM,IAAI,CAACC,OAAO;QACjCC,YAAYV,MAAMW,UAAU,CAACC,iBAAiB;QAC9C,oBAAoB;YAClBX,iBAAiBR,UAAUQ,iBAAiB;QAC9C;QACA,YAAY;YACVY,WAAWb,MAAMc,OAAO,CAAC,EAAE;YAC3Bb,iBAAiBR,UAAUQ,iBAAiB;QAC9C;IACF;AACF;AAEA,OAAO,SAASc,iBAAiBC,KAA4B;IAC3D,MAAM,EAAEC,UAAU,EAAEC,WAAW,EAAEC,eAAe,EAAEC,kBAAkB,EAAE,GAAGJ;IAEzE,MAAMK,cAAc,CAACC;QACnBA,MAAMC,cAAc;QACpBH,mBAAmB;IACrB;IAEA,MAAMI,eAAeP,WAAWQ,KAAK,CAAC;IACtC,MAAMC,iBAAiBF,YAAY,CAACA,aAAaG,MAAM,GAAG,EAAE,EAAEC,MAAM,GAAG,CAAC;IAExE,MAAMC,aAAalC,YAAYuB,aAAa;QAAEY,MAAM;QAAWC,eAAe;QAAGC,aAAa;IAAK,KAAK;IAExG,qBACE,KAAC1C;QAAM2C,WAAU;QAAM3B,SAAS;QAAG4B,WAAW;QAAIC,YAAW;kBAC3D,cAAA,MAAC5C;YACC6C,yBAAW,KAACxC;gBAAiByC,UAAS;;YACtCC,cAAW;YACXC,IAAI;gBAAEC,gBAAgB;YAAS;;8BAE/B,KAACzC;oBAAiB0C,OAAOf,iBAAiB,UAAUG;;gBACnDV,oBAAoBuB,2BACnB,KAAC3C;oBACC0C,OAAO,AAAC,CAAA,AAACtB,kBAAkBD,cAAe,GAAE,EAAGyB,OAAO,CAAC,KAAK;oBAC5DC,oBAAM,KAAC9C;wBAAQuC,UAAS;wBAAQ9B,OAAM;;oBACtCsC,0BAAY,KAAChD;wBAAUwC,UAAS;;oBAChCS,UAAUzB;;;;;AAMtB"}

package/lib/components/FlameChart.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 FlameChartProps {
     width: number;
     height: number;

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

@@ -1 +1 @@
-{"version":3,"file":"FlameChart.d.ts","sourceRoot":"","sources":["../../../src/components/FlameChart.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,YAAY,EAAiC,MAAM,OAAO,CAAC;AAMpE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAa/C,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAqP/D"}
+{"version":3,"file":"FlameChart.d.ts","sourceRoot":"","sources":["../../../src/components/FlameChart.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAWpD,OAAO,KAAK,EAAE,YAAY,EAAc,MAAM,OAAO,CAAC;AAetD,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAqP/D"}

package/lib/components/FlameChart.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } 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,16 +11,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.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Stack, Box, Menu, MenuItem, Divider, useTheme } from '@mui/material';
-import { useState, useMemo } from 'react';
-import { useChartsTheme, EChart } from '@perses-dev/components';
-import RefreshIcon from 'mdi-material-ui/Refresh';
-import EyeIcon from 'mdi-material-ui/EyeOutline';
-import ContentCopyIcon from 'mdi-material-ui/ContentCopy';
-import { buildSamples, findTotalSampleByName } from '../utils/data-transform';
-import { generateTooltip } from '../utils/tooltip';
-import { CustomBreadcrumb } from './CustomBreadcrumb';
+import { Stack, Box, Menu, MenuItem, Divider, useTheme } from "@mui/material";
+import { useChartsTheme, EChart } from "@perses-dev/components";
+import ContentCopyIcon from "mdi-material-ui/ContentCopy";
+import EyeIcon from "mdi-material-ui/EyeOutline";
+import RefreshIcon from "mdi-material-ui/Refresh";
+import { useState, useMemo } from "react";
+import { buildSamples, findTotalSampleByName } from "../utils/data-transform.js";
+import { generateTooltip } from "../utils/tooltip.js";
+import { CustomBreadcrumb } from "./CustomBreadcrumb.js";
 const ITEM_GAP = 2; // vertical gap between flame chart items
 const Y_MIN_SMALL = 6; // min value of y axis for small containers
 const Y_MIN_LARGE = 20; // min value of y axis for large containers

package/lib/components/FlameChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FlameChart.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 {\n  CustomSeriesRenderItem,\n  CustomSeriesRenderItemAPI,\n  CustomSeriesRenderItemParams,\n  CustomSeriesRenderItemReturn,\n} from 'echarts';\nimport { Stack, Box, Menu, MenuItem, Divider, useTheme } from '@mui/material';\nimport { ReactElement, useState, useMemo, MouseEvent } from 'react';\nimport { useChartsTheme, EChart, MouseEventsParameters } from '@perses-dev/components';\nimport RefreshIcon from 'mdi-material-ui/Refresh';\nimport EyeIcon from 'mdi-material-ui/EyeOutline';\nimport ContentCopyIcon from 'mdi-material-ui/ContentCopy';\nimport { EChartsCoreOption } from 'echarts/core';\nimport { ProfileData } from '@perses-dev/spec';\nimport { buildSamples, findTotalSampleByName } from '../utils/data-transform';\nimport { generateTooltip } from '../utils/tooltip';\nimport { FlameChartSample as Sample } from '../utils/data-model';\nimport { CustomBreadcrumb } from './CustomBreadcrumb';\n\nconst ITEM_GAP = 2; // vertical gap between flame chart items\nconst Y_MIN_SMALL = 6; // min value of y axis for small containers\nconst Y_MIN_LARGE = 20; // min value of y axis for large containers\nconst LARGE_CONTAINER_THRESHOLD = 600;\nconst CONTAINER_PADDING = 10;\nconst BREADCRUMB_SPACE = 50;\n\nexport interface FlameChartProps {\n  width: number;\n  height: number;\n  data: ProfileData;\n  palette: 'package-name' | 'value';\n  selectedId: number;\n  searchValue: string;\n  onSelectedIdChange: (newId: number) => void;\n}\n\nexport function FlameChart(props: FlameChartProps): ReactElement {\n  const { width, height, data, palette, selectedId, searchValue, onSelectedIdChange } = props;\n  const theme = useTheme();\n  const chartsTheme = useChartsTheme();\n  const [menuPosition, setMenuPosition] = useState<{ mouseX: number; mouseY: number } | null>(null);\n  const [selectedItem, setSelectedItem] = useState<{ id: number; name: string }>({ id: 0, name: '' });\n  const [isCopied, setIsCopied] = useState(false);\n\n  const seriesData = useMemo(\n    () => buildSamples(palette, data.metadata, data.profile.stackTrace, searchValue, selectedId),\n    [palette, data.metadata, data.profile.stackTrace, selectedId, searchValue]\n  );\n\n  const handleItemClick = (params: MouseEventsParameters<Sample>): void => {\n    const data: Sample = params.data;\n    const functionName = data.value[6];\n    const functionId = data.name;\n    setSelectedItem({ id: functionId, name: functionName });\n\n    // To ensure that the cursor is positioned inside the menu when it opens,\n    // we adjust the click event coordinates as follows:\n    if ('event' in params) {\n      const mouseEvent = params.event as { event: MouseEvent };\n      setMenuPosition({\n        mouseX: mouseEvent.event.clientX - 2,\n        mouseY: mouseEvent.event.clientY - 4,\n      });\n    }\n  };\n\n  const handleFocusBlock = (): void => {\n    onSelectedIdChange(selectedItem.id);\n    handleClose();\n  };\n\n  const handleCopyFunctionName = (): void => {\n    if ((selectedId || selectedId === 0) && selectedItem.name) {\n      navigator.clipboard.writeText(selectedItem.name);\n    }\n    setIsCopied(true);\n  };\n\n  const handleResetGraph = (): void => {\n    if (selectedId) {\n      onSelectedIdChange(0);\n    }\n    handleClose();\n  };\n\n  const handleClose = (): void => {\n    setMenuPosition(null);\n    if (isCopied) setIsCopied(false);\n  };\n\n  const renderItem: CustomSeriesRenderItem = (params: CustomSeriesRenderItemParams, api: CustomSeriesRenderItemAPI) => {\n    const level = api.value(0);\n    const start = api.coord([api.value(1), level]);\n    const end = api.coord([api.value(2), level]);\n    const height = (((api.size && api.size([0, 1])) || [0, 20]) as number[])[1];\n    const width = (end?.[0] ?? 0) - (start?.[0] ?? 0);\n\n    return {\n      type: 'rect',\n      transition: ['shape'],\n      shape: {\n        x: start?.[0],\n        y: (start?.[1] ?? 0) - (height ?? 0) / 2,\n        width,\n        height: (height ?? ITEM_GAP) - ITEM_GAP,\n        r: 0,\n      },\n      style: {\n        fill: api.visual('color'),\n      },\n      emphasis: {\n        style: {\n          stroke: '#000',\n        },\n      },\n      textConfig: {\n        position: 'insideLeft',\n      },\n      textContent: {\n        style: {\n          text: api.value(3),\n          fill: '#000',\n          width: width - 4,\n          overflow: 'truncate',\n          ellipsis: '..',\n          truncateMinChar: 1,\n        },\n        emphasis: {\n          style: {\n            stroke: '#000',\n            lineWidth: 0.5,\n          },\n        },\n      },\n    } as CustomSeriesRenderItemReturn;\n  };\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.profile.stackTrace === undefined) return chartsTheme.noDataOption;\n\n    const maxDepth = Math.max(...seriesData.map((s) => s.value[0])); // maximum depth of the stack trace\n    const yAxisMax = Math.max(height > LARGE_CONTAINER_THRESHOLD ? Y_MIN_LARGE : Y_MIN_SMALL, maxDepth);\n    const totalStart = seriesData[0]?.value[1]; // start value of the total function\n    const totalEnd = seriesData[0]?.value[2]; // end value of the total function\n    const xAxisMin = totalStart;\n    const xAxisMax = totalEnd;\n\n    // compute flame chart padding top and bottom\n    const padding = (height / (yAxisMax - 1) - ITEM_GAP) / 2 + 1;\n\n    const option = {\n      tooltip: {\n        appendToBody: true,\n        confine: true,\n        formatter: (params: Sample): string => generateTooltip(params, data.metadata?.units),\n        backgroundColor: theme.palette.background.paper,\n        borderColor: theme.palette.background.paper,\n        textStyle: {\n          color: theme.palette.text.primary,\n        },\n      },\n      xAxis: {\n        show: false,\n        min: xAxisMin,\n        max: xAxisMax,\n        axisLabel: {\n          show: false,\n        },\n      },\n      yAxis: {\n        show: false,\n        max: yAxisMax,\n        inverse: true, // Reverse Y axis\n        axisLabel: {\n          show: false,\n        },\n      },\n      axisLabel: {\n        overflow: 'truncate',\n        width: width / 3,\n      },\n      grid: {\n        left: 5,\n        right: 5,\n        top: padding + 5,\n        bottom: padding,\n      },\n      series: [\n        {\n          type: 'custom',\n          renderItem,\n          encode: {\n            x: [0, 1, 2],\n            y: 0,\n          },\n          data: seriesData,\n        },\n      ],\n    };\n\n    return option;\n  }, [data, chartsTheme, theme, width, seriesData, height]);\n\n  // Use useMemo to memoize the flame chart component and prevent unnecessary re-renders.\n  // This ensures the chart does not re-render when the onClick event updates state variables\n  // like menuPosition or selectedId.\n  const flameChart = useMemo(\n    () => (\n      <EChart\n        style={{\n          width: width,\n          height: height - 2 * CONTAINER_PADDING - BREADCRUMB_SPACE,\n        }}\n        option={option} // even data is in this prop\n        theme={chartsTheme.echartsTheme}\n        onEvents={{\n          click: handleItemClick as (params: MouseEventsParameters<unknown>) => void,\n        }}\n      />\n    ),\n    [chartsTheme.echartsTheme, height, option, width]\n  );\n\n  return (\n    <Stack\n      style={{\n        width: width,\n        height: height,\n      }}\n      alignItems=\"center\"\n    >\n      <CustomBreadcrumb\n        totalValue={seriesData[0]?.value[3] || ''} // name of the total function\n        totalSample={seriesData[0]?.value[8] || 0} // total sample of the total function\n        otherItemSample={findTotalSampleByName(seriesData, selectedId)} // total sample of the selected function\n        onSelectedIdChange={onSelectedIdChange}\n      />\n      {flameChart}\n      <Menu\n        sx={{\n          '& .MuiPaper-root': {\n            backgroundColor: theme.palette.background.paper,\n            color: theme.palette.text.primary,\n            padding: '5px',\n            paddingBottom: '0px',\n          },\n          '& .MuiMenuItem-root': {\n            '&:hover': {\n              backgroundColor: theme.palette.action.hover,\n            },\n          },\n        }}\n        open={menuPosition !== null}\n        onClose={handleClose}\n        anchorReference=\"anchorPosition\"\n        anchorPosition={menuPosition !== null ? { top: menuPosition.mouseY, left: menuPosition.mouseX } : undefined}\n      >\n        <Box\n          sx={{\n            paddingLeft: '16px',\n            paddingBottom: '8px',\n          }}\n        >\n          {selectedItem.name}\n        </Box>\n        <Divider sx={{ backgroundColor: theme.palette.divider }} />\n        <MenuItem onClick={handleFocusBlock}>\n          <EyeIcon fontSize=\"small\" color=\"secondary\" sx={{ marginRight: '10px' }} />\n          Focus block\n        </MenuItem>\n        <MenuItem onClick={handleCopyFunctionName} disabled={isCopied}>\n          <ContentCopyIcon fontSize=\"small\" color=\"secondary\" sx={{ marginRight: '10px' }} />\n          {isCopied ? 'Copied' : 'Copy function name'}\n        </MenuItem>\n        <MenuItem onClick={handleResetGraph}>\n          <RefreshIcon fontSize=\"small\" color=\"secondary\" sx={{ marginRight: '10px' }} />\n          Reset graph\n        </MenuItem>\n      </Menu>\n    </Stack>\n  );\n}\n"],"names":["Stack","Box","Menu","MenuItem","Divider","useTheme","useState","useMemo","useChartsTheme","EChart","RefreshIcon","EyeIcon","ContentCopyIcon","buildSamples","findTotalSampleByName","generateTooltip","CustomBreadcrumb","ITEM_GAP","Y_MIN_SMALL","Y_MIN_LARGE","LARGE_CONTAINER_THRESHOLD","CONTAINER_PADDING","BREADCRUMB_SPACE","FlameChart","props","width","height","data","palette","selectedId","searchValue","onSelectedIdChange","theme","chartsTheme","menuPosition","setMenuPosition","selectedItem","setSelectedItem","id","name","isCopied","setIsCopied","seriesData","metadata","profile","stackTrace","handleItemClick","params","functionName","value","functionId","mouseEvent","event","mouseX","clientX","mouseY","clientY","handleFocusBlock","handleClose","handleCopyFunctionName","navigator","clipboard","writeText","handleResetGraph","renderItem","api","level","start","coord","end","size","type","transition","shape","x","y","r","style","fill","visual","emphasis","stroke","textConfig","position","textContent","text","overflow","ellipsis","truncateMinChar","lineWidth","option","undefined","noDataOption","maxDepth","Math","max","map","s","yAxisMax","totalStart","totalEnd","xAxisMin","xAxisMax","padding","tooltip","appendToBody","confine","formatter","units","backgroundColor","background","paper","borderColor","textStyle","color","primary","xAxis","show","min","axisLabel","yAxis","inverse","grid","left","right","top","bottom","series","encode","flameChart","echartsTheme","onEvents","click","alignItems","totalValue","totalSample","otherItemSample","sx","paddingBottom","action","hover","open","onClose","anchorReference","anchorPosition","paddingLeft","divider","onClick","fontSize","marginRight","disabled"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/FlameChart.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, Box, Menu, MenuItem, Divider, useTheme } from '@mui/material';\nimport type { MouseEventsParameters } from '@perses-dev/components';\nimport { useChartsTheme, EChart } from '@perses-dev/components';\nimport type { ProfileData } from '@perses-dev/spec';\nimport type {\n  CustomSeriesRenderItem,\n  CustomSeriesRenderItemAPI,\n  CustomSeriesRenderItemParams,\n  CustomSeriesRenderItemReturn,\n} from 'echarts';\nimport type { EChartsCoreOption } from 'echarts/core';\nimport ContentCopyIcon from 'mdi-material-ui/ContentCopy';\nimport EyeIcon from 'mdi-material-ui/EyeOutline';\nimport RefreshIcon from 'mdi-material-ui/Refresh';\nimport type { ReactElement, MouseEvent } from 'react';\nimport { useState, useMemo } from 'react';\n\nimport type { FlameChartSample as Sample } from '../utils/data-model';\nimport { buildSamples, findTotalSampleByName } from '../utils/data-transform';\nimport { generateTooltip } from '../utils/tooltip';\nimport { CustomBreadcrumb } from './CustomBreadcrumb';\n\nconst ITEM_GAP = 2; // vertical gap between flame chart items\nconst Y_MIN_SMALL = 6; // min value of y axis for small containers\nconst Y_MIN_LARGE = 20; // min value of y axis for large containers\nconst LARGE_CONTAINER_THRESHOLD = 600;\nconst CONTAINER_PADDING = 10;\nconst BREADCRUMB_SPACE = 50;\n\nexport interface FlameChartProps {\n  width: number;\n  height: number;\n  data: ProfileData;\n  palette: 'package-name' | 'value';\n  selectedId: number;\n  searchValue: string;\n  onSelectedIdChange: (newId: number) => void;\n}\n\nexport function FlameChart(props: FlameChartProps): ReactElement {\n  const { width, height, data, palette, selectedId, searchValue, onSelectedIdChange } = props;\n  const theme = useTheme();\n  const chartsTheme = useChartsTheme();\n  const [menuPosition, setMenuPosition] = useState<{ mouseX: number; mouseY: number } | null>(null);\n  const [selectedItem, setSelectedItem] = useState<{ id: number; name: string }>({ id: 0, name: '' });\n  const [isCopied, setIsCopied] = useState(false);\n\n  const seriesData = useMemo(\n    () => buildSamples(palette, data.metadata, data.profile.stackTrace, searchValue, selectedId),\n    [palette, data.metadata, data.profile.stackTrace, selectedId, searchValue],\n  );\n\n  const handleItemClick = (params: MouseEventsParameters<Sample>): void => {\n    const data: Sample = params.data;\n    const functionName = data.value[6];\n    const functionId = data.name;\n    setSelectedItem({ id: functionId, name: functionName });\n\n    // To ensure that the cursor is positioned inside the menu when it opens,\n    // we adjust the click event coordinates as follows:\n    if ('event' in params) {\n      const mouseEvent = params.event as { event: MouseEvent };\n      setMenuPosition({\n        mouseX: mouseEvent.event.clientX - 2,\n        mouseY: mouseEvent.event.clientY - 4,\n      });\n    }\n  };\n\n  const handleFocusBlock = (): void => {\n    onSelectedIdChange(selectedItem.id);\n    handleClose();\n  };\n\n  const handleCopyFunctionName = (): void => {\n    if ((selectedId || selectedId === 0) && selectedItem.name) {\n      navigator.clipboard.writeText(selectedItem.name);\n    }\n    setIsCopied(true);\n  };\n\n  const handleResetGraph = (): void => {\n    if (selectedId) {\n      onSelectedIdChange(0);\n    }\n    handleClose();\n  };\n\n  const handleClose = (): void => {\n    setMenuPosition(null);\n    if (isCopied) setIsCopied(false);\n  };\n\n  const renderItem: CustomSeriesRenderItem = (params: CustomSeriesRenderItemParams, api: CustomSeriesRenderItemAPI) => {\n    const level = api.value(0);\n    const start = api.coord([api.value(1), level]);\n    const end = api.coord([api.value(2), level]);\n    const height = (((api.size && api.size([0, 1])) || [0, 20]) as number[])[1];\n    const width = (end?.[0] ?? 0) - (start?.[0] ?? 0);\n\n    return {\n      type: 'rect',\n      transition: ['shape'],\n      shape: {\n        x: start?.[0],\n        y: (start?.[1] ?? 0) - (height ?? 0) / 2,\n        width,\n        height: (height ?? ITEM_GAP) - ITEM_GAP,\n        r: 0,\n      },\n      style: {\n        fill: api.visual('color'),\n      },\n      emphasis: {\n        style: {\n          stroke: '#000',\n        },\n      },\n      textConfig: {\n        position: 'insideLeft',\n      },\n      textContent: {\n        style: {\n          text: api.value(3),\n          fill: '#000',\n          width: width - 4,\n          overflow: 'truncate',\n          ellipsis: '..',\n          truncateMinChar: 1,\n        },\n        emphasis: {\n          style: {\n            stroke: '#000',\n            lineWidth: 0.5,\n          },\n        },\n      },\n    } as CustomSeriesRenderItemReturn;\n  };\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.profile.stackTrace === undefined) return chartsTheme.noDataOption;\n\n    const maxDepth = Math.max(...seriesData.map((s) => s.value[0])); // maximum depth of the stack trace\n    const yAxisMax = Math.max(height > LARGE_CONTAINER_THRESHOLD ? Y_MIN_LARGE : Y_MIN_SMALL, maxDepth);\n    const totalStart = seriesData[0]?.value[1]; // start value of the total function\n    const totalEnd = seriesData[0]?.value[2]; // end value of the total function\n    const xAxisMin = totalStart;\n    const xAxisMax = totalEnd;\n\n    // compute flame chart padding top and bottom\n    const padding = (height / (yAxisMax - 1) - ITEM_GAP) / 2 + 1;\n\n    const option = {\n      tooltip: {\n        appendToBody: true,\n        confine: true,\n        formatter: (params: Sample): string => generateTooltip(params, data.metadata?.units),\n        backgroundColor: theme.palette.background.paper,\n        borderColor: theme.palette.background.paper,\n        textStyle: {\n          color: theme.palette.text.primary,\n        },\n      },\n      xAxis: {\n        show: false,\n        min: xAxisMin,\n        max: xAxisMax,\n        axisLabel: {\n          show: false,\n        },\n      },\n      yAxis: {\n        show: false,\n        max: yAxisMax,\n        inverse: true, // Reverse Y axis\n        axisLabel: {\n          show: false,\n        },\n      },\n      axisLabel: {\n        overflow: 'truncate',\n        width: width / 3,\n      },\n      grid: {\n        left: 5,\n        right: 5,\n        top: padding + 5,\n        bottom: padding,\n      },\n      series: [\n        {\n          type: 'custom',\n          renderItem,\n          encode: {\n            x: [0, 1, 2],\n            y: 0,\n          },\n          data: seriesData,\n        },\n      ],\n    };\n\n    return option;\n  }, [data, chartsTheme, theme, width, seriesData, height]);\n\n  // Use useMemo to memoize the flame chart component and prevent unnecessary re-renders.\n  // This ensures the chart does not re-render when the onClick event updates state variables\n  // like menuPosition or selectedId.\n  const flameChart = useMemo(\n    () => (\n      <EChart\n        style={{\n          width: width,\n          height: height - 2 * CONTAINER_PADDING - BREADCRUMB_SPACE,\n        }}\n        option={option} // even data is in this prop\n        theme={chartsTheme.echartsTheme}\n        onEvents={{\n          click: handleItemClick as (params: MouseEventsParameters<unknown>) => void,\n        }}\n      />\n    ),\n    [chartsTheme.echartsTheme, height, option, width],\n  );\n\n  return (\n    <Stack\n      style={{\n        width: width,\n        height: height,\n      }}\n      alignItems=\"center\"\n    >\n      <CustomBreadcrumb\n        totalValue={seriesData[0]?.value[3] || ''} // name of the total function\n        totalSample={seriesData[0]?.value[8] || 0} // total sample of the total function\n        otherItemSample={findTotalSampleByName(seriesData, selectedId)} // total sample of the selected function\n        onSelectedIdChange={onSelectedIdChange}\n      />\n      {flameChart}\n      <Menu\n        sx={{\n          '& .MuiPaper-root': {\n            backgroundColor: theme.palette.background.paper,\n            color: theme.palette.text.primary,\n            padding: '5px',\n            paddingBottom: '0px',\n          },\n          '& .MuiMenuItem-root': {\n            '&:hover': {\n              backgroundColor: theme.palette.action.hover,\n            },\n          },\n        }}\n        open={menuPosition !== null}\n        onClose={handleClose}\n        anchorReference=\"anchorPosition\"\n        anchorPosition={menuPosition !== null ? { top: menuPosition.mouseY, left: menuPosition.mouseX } : undefined}\n      >\n        <Box\n          sx={{\n            paddingLeft: '16px',\n            paddingBottom: '8px',\n          }}\n        >\n          {selectedItem.name}\n        </Box>\n        <Divider sx={{ backgroundColor: theme.palette.divider }} />\n        <MenuItem onClick={handleFocusBlock}>\n          <EyeIcon fontSize=\"small\" color=\"secondary\" sx={{ marginRight: '10px' }} />\n          Focus block\n        </MenuItem>\n        <MenuItem onClick={handleCopyFunctionName} disabled={isCopied}>\n          <ContentCopyIcon fontSize=\"small\" color=\"secondary\" sx={{ marginRight: '10px' }} />\n          {isCopied ? 'Copied' : 'Copy function name'}\n        </MenuItem>\n        <MenuItem onClick={handleResetGraph}>\n          <RefreshIcon fontSize=\"small\" color=\"secondary\" sx={{ marginRight: '10px' }} />\n          Reset graph\n        </MenuItem>\n      </Menu>\n    </Stack>\n  );\n}\n"],"names":["Stack","Box","Menu","MenuItem","Divider","useTheme","useChartsTheme","EChart","ContentCopyIcon","EyeIcon","RefreshIcon","useState","useMemo","buildSamples","findTotalSampleByName","generateTooltip","CustomBreadcrumb","ITEM_GAP","Y_MIN_SMALL","Y_MIN_LARGE","LARGE_CONTAINER_THRESHOLD","CONTAINER_PADDING","BREADCRUMB_SPACE","FlameChart","props","width","height","data","palette","selectedId","searchValue","onSelectedIdChange","theme","chartsTheme","menuPosition","setMenuPosition","selectedItem","setSelectedItem","id","name","isCopied","setIsCopied","seriesData","metadata","profile","stackTrace","handleItemClick","params","functionName","value","functionId","mouseEvent","event","mouseX","clientX","mouseY","clientY","handleFocusBlock","handleClose","handleCopyFunctionName","navigator","clipboard","writeText","handleResetGraph","renderItem","api","level","start","coord","end","size","type","transition","shape","x","y","r","style","fill","visual","emphasis","stroke","textConfig","position","textContent","text","overflow","ellipsis","truncateMinChar","lineWidth","option","undefined","noDataOption","maxDepth","Math","max","map","s","yAxisMax","totalStart","totalEnd","xAxisMin","xAxisMax","padding","tooltip","appendToBody","confine","formatter","units","backgroundColor","background","paper","borderColor","textStyle","color","primary","xAxis","show","min","axisLabel","yAxis","inverse","grid","left","right","top","bottom","series","encode","flameChart","echartsTheme","onEvents","click","alignItems","totalValue","totalSample","otherItemSample","sx","paddingBottom","action","hover","open","onClose","anchorReference","anchorPosition","paddingLeft","divider","onClick","fontSize","marginRight","disabled"],"mappings":"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"}

package/lib/components/FlameChartOptionsEditorSettings.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
-import { FlameChartOptionsEditorProps } from '../flame-chart-model';
+import type { ReactElement } from 'react';
+import type { FlameChartOptionsEditorProps } from '../flame-chart-model';
 export declare function FlameChartOptionsEditorSettings(props: FlameChartOptionsEditorProps): ReactElement;
 //# sourceMappingURL=FlameChartOptionsEditorSettings.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FlameChartOptionsEditorSettings.d.ts","sourceRoot":"","sources":["../../../src/components/FlameChartOptionsEditorSettings.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAQrC,OAAO,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AAapE,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,4BAA4B,GAAG,YAAY,CA6CjG"}
+{"version":3,"file":"FlameChartOptionsEditorSettings.d.ts","sourceRoot":"","sources":["../../../src/components/FlameChartOptionsEditorSettings.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AAazE,wBAAgB,+BAA+B,CAAC,KAAK,EAAE,4BAA4B,GAAG,YAAY,CA6CjG"}

package/lib/components/FlameChartOptionsEditorSettings.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } 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,12 +11,11 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { OptionsEditorGroup, OptionsEditorGrid, OptionsEditorColumn, OptionsEditorControl } from '@perses-dev/components';
-import { Button, TextField } from '@mui/material';
-import { usePaletteState, useShowSettingsState, useShowSeriesState, useShowTableState, useShowFlameGraphState, resetSettings, useTraceHeightState } from '../utils/utils';
-import { PaletteSelector } from './PaletteSelector';
-import { SwitchSelector } from './SwitchSelector';
+import { Button, TextField } from "@mui/material";
+import { OptionsEditorGroup, OptionsEditorGrid, OptionsEditorColumn, OptionsEditorControl } from "@perses-dev/components";
+import { usePaletteState, useShowSettingsState, useShowSeriesState, useShowTableState, useShowFlameGraphState, resetSettings, useTraceHeightState } from "../utils/utils.js";
+import { PaletteSelector } from "./PaletteSelector.js";
+import { SwitchSelector } from "./SwitchSelector.js";
 export function FlameChartOptionsEditorSettings(props) {
     const { value } = props;
     const { handlePaletteChange } = usePaletteState(props);

package/lib/components/FlameChartOptionsEditorSettings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FlameChartOptionsEditorSettings.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 {\n  OptionsEditorGroup,\n  OptionsEditorGrid,\n  OptionsEditorColumn,\n  OptionsEditorControl,\n} from '@perses-dev/components';\nimport { Button, TextField } from '@mui/material';\nimport { FlameChartOptionsEditorProps } from '../flame-chart-model';\nimport {\n  usePaletteState,\n  useShowSettingsState,\n  useShowSeriesState,\n  useShowTableState,\n  useShowFlameGraphState,\n  resetSettings,\n  useTraceHeightState,\n} from '../utils/utils';\nimport { PaletteSelector } from './PaletteSelector';\nimport { SwitchSelector } from './SwitchSelector';\n\nexport function FlameChartOptionsEditorSettings(props: FlameChartOptionsEditorProps): ReactElement {\n  const { value } = props;\n\n  const { handlePaletteChange } = usePaletteState(props);\n  const { handleShowSettingsChange } = useShowSettingsState(props);\n  const { handleShowSeriesChange } = useShowSeriesState(props);\n  const { handleShowTableChange } = useShowTableState(props);\n  const { handleShowFlameGraphChange } = useShowFlameGraphState(props);\n  const { handleTraceHeightChange } = useTraceHeightState(props);\n\n  return (\n    <OptionsEditorGrid>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Misc\">\n          <PaletteSelector value={value.palette} onChange={handlePaletteChange} />\n          <OptionsEditorControl\n            label=\"Trace Height\"\n            control={\n              <TextField\n                type=\"number\"\n                value={value.traceHeight ?? ''}\n                slotProps={{ htmlInput: { min: 0, step: 1 } }}\n                onChange={handleTraceHeightChange}\n              />\n            }\n          />\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Panels to display\">\n          <SwitchSelector label=\"Show Options\" value={value.showSettings} onChange={handleShowSettingsChange} />\n          <SwitchSelector label=\"Show Series\" value={value.showSeries} onChange={handleShowSeriesChange} />\n          <SwitchSelector label=\"Show Table\" value={value.showTable} onChange={handleShowTableChange} />\n          <SwitchSelector label=\"Show Flame Graph\" value={value.showFlameGraph} onChange={handleShowFlameGraphChange} />\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Reset Settings\">\n          <Button variant=\"outlined\" color=\"secondary\" onClick={() => resetSettings(props)}>\n            Reset To Defaults\n          </Button>\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n    </OptionsEditorGrid>\n  );\n}\n"],"names":["OptionsEditorGroup","OptionsEditorGrid","OptionsEditorColumn","OptionsEditorControl","Button","TextField","usePaletteState","useShowSettingsState","useShowSeriesState","useShowTableState","useShowFlameGraphState","resetSettings","useTraceHeightState","PaletteSelector","SwitchSelector","FlameChartOptionsEditorSettings","props","value","handlePaletteChange","handleShowSettingsChange","handleShowSeriesChange","handleShowTableChange","handleShowFlameGraphChange","handleTraceHeightChange","title","palette","onChange","label","control","type","traceHeight","slotProps","htmlInput","min","step","showSettings","showSeries","showTable","showFlameGraph","variant","color","onClick"],"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;;AAGjC,SACEA,kBAAkB,EAClBC,iBAAiB,EACjBC,mBAAmB,EACnBC,oBAAoB,QACf,yBAAyB;AAChC,SAASC,MAAM,EAAEC,SAAS,QAAQ,gBAAgB;AAElD,SACEC,eAAe,EACfC,oBAAoB,EACpBC,kBAAkB,EAClBC,iBAAiB,EACjBC,sBAAsB,EACtBC,aAAa,EACbC,mBAAmB,QACd,iBAAiB;AACxB,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,cAAc,QAAQ,mBAAmB;AAElD,OAAO,SAASC,gCAAgCC,KAAmC;IACjF,MAAM,EAAEC,KAAK,EAAE,GAAGD;IAElB,MAAM,EAAEE,mBAAmB,EAAE,GAAGZ,gBAAgBU;IAChD,MAAM,EAAEG,wBAAwB,EAAE,GAAGZ,qBAAqBS;IAC1D,MAAM,EAAEI,sBAAsB,EAAE,GAAGZ,mBAAmBQ;IACtD,MAAM,EAAEK,qBAAqB,EAAE,GAAGZ,kBAAkBO;IACpD,MAAM,EAAEM,0BAA0B,EAAE,GAAGZ,uBAAuBM;IAC9D,MAAM,EAAEO,uBAAuB,EAAE,GAAGX,oBAAoBI;IAExD,qBACE,MAACf;;0BACC,KAACC;0BACC,cAAA,MAACF;oBAAmBwB,OAAM;;sCACxB,KAACX;4BAAgBI,OAAOA,MAAMQ,OAAO;4BAAEC,UAAUR;;sCACjD,KAACf;4BACCwB,OAAM;4BACNC,uBACE,KAACvB;gCACCwB,MAAK;gCACLZ,OAAOA,MAAMa,WAAW,IAAI;gCAC5BC,WAAW;oCAAEC,WAAW;wCAAEC,KAAK;wCAAGC,MAAM;oCAAE;gCAAE;gCAC5CR,UAAUH;;;;;;0BAMpB,KAACrB;0BACC,cAAA,MAACF;oBAAmBwB,OAAM;;sCACxB,KAACV;4BAAea,OAAM;4BAAeV,OAAOA,MAAMkB,YAAY;4BAAET,UAAUP;;sCAC1E,KAACL;4BAAea,OAAM;4BAAcV,OAAOA,MAAMmB,UAAU;4BAAEV,UAAUN;;sCACvE,KAACN;4BAAea,OAAM;4BAAaV,OAAOA,MAAMoB,SAAS;4BAAEX,UAAUL;;sCACrE,KAACP;4BAAea,OAAM;4BAAmBV,OAAOA,MAAMqB,cAAc;4BAAEZ,UAAUJ;;;;;0BAGpF,KAACpB;0BACC,cAAA,KAACF;oBAAmBwB,OAAM;8BACxB,cAAA,KAACpB;wBAAOmC,SAAQ;wBAAWC,OAAM;wBAAYC,SAAS,IAAM9B,cAAcK;kCAAQ;;;;;;AAO5F"}
+{"version":3,"sources":["../../../src/components/FlameChartOptionsEditorSettings.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 { Button, TextField } from '@mui/material';\nimport {\n  OptionsEditorGroup,\n  OptionsEditorGrid,\n  OptionsEditorColumn,\n  OptionsEditorControl,\n} from '@perses-dev/components';\nimport type { ReactElement } from 'react';\n\nimport type { FlameChartOptionsEditorProps } from '../flame-chart-model';\nimport {\n  usePaletteState,\n  useShowSettingsState,\n  useShowSeriesState,\n  useShowTableState,\n  useShowFlameGraphState,\n  resetSettings,\n  useTraceHeightState,\n} from '../utils/utils';\nimport { PaletteSelector } from './PaletteSelector';\nimport { SwitchSelector } from './SwitchSelector';\n\nexport function FlameChartOptionsEditorSettings(props: FlameChartOptionsEditorProps): ReactElement {\n  const { value } = props;\n\n  const { handlePaletteChange } = usePaletteState(props);\n  const { handleShowSettingsChange } = useShowSettingsState(props);\n  const { handleShowSeriesChange } = useShowSeriesState(props);\n  const { handleShowTableChange } = useShowTableState(props);\n  const { handleShowFlameGraphChange } = useShowFlameGraphState(props);\n  const { handleTraceHeightChange } = useTraceHeightState(props);\n\n  return (\n    <OptionsEditorGrid>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Misc\">\n          <PaletteSelector value={value.palette} onChange={handlePaletteChange} />\n          <OptionsEditorControl\n            label=\"Trace Height\"\n            control={\n              <TextField\n                type=\"number\"\n                value={value.traceHeight ?? ''}\n                slotProps={{ htmlInput: { min: 0, step: 1 } }}\n                onChange={handleTraceHeightChange}\n              />\n            }\n          />\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Panels to display\">\n          <SwitchSelector label=\"Show Options\" value={value.showSettings} onChange={handleShowSettingsChange} />\n          <SwitchSelector label=\"Show Series\" value={value.showSeries} onChange={handleShowSeriesChange} />\n          <SwitchSelector label=\"Show Table\" value={value.showTable} onChange={handleShowTableChange} />\n          <SwitchSelector label=\"Show Flame Graph\" value={value.showFlameGraph} onChange={handleShowFlameGraphChange} />\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Reset Settings\">\n          <Button variant=\"outlined\" color=\"secondary\" onClick={() => resetSettings(props)}>\n            Reset To Defaults\n          </Button>\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n    </OptionsEditorGrid>\n  );\n}\n"],"names":["Button","TextField","OptionsEditorGroup","OptionsEditorGrid","OptionsEditorColumn","OptionsEditorControl","usePaletteState","useShowSettingsState","useShowSeriesState","useShowTableState","useShowFlameGraphState","resetSettings","useTraceHeightState","PaletteSelector","SwitchSelector","FlameChartOptionsEditorSettings","props","value","handlePaletteChange","handleShowSettingsChange","handleShowSeriesChange","handleShowTableChange","handleShowFlameGraphChange","handleTraceHeightChange","title","palette","onChange","label","control","type","traceHeight","slotProps","htmlInput","min","step","showSettings","showSeries","showTable","showFlameGraph","variant","color","onClick"],"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,SAASA,MAAM,EAAEC,SAAS,QAAQ,gBAAgB;AAClD,SACEC,kBAAkB,EAClBC,iBAAiB,EACjBC,mBAAmB,EACnBC,oBAAoB,QACf,yBAAyB;AAIhC,SACEC,eAAe,EACfC,oBAAoB,EACpBC,kBAAkB,EAClBC,iBAAiB,EACjBC,sBAAsB,EACtBC,aAAa,EACbC,mBAAmB,QACd,oBAAiB;AACxB,SAASC,eAAe,QAAQ,uBAAoB;AACpD,SAASC,cAAc,QAAQ,sBAAmB;AAElD,OAAO,SAASC,gCAAgCC,KAAmC;IACjF,MAAM,EAAEC,KAAK,EAAE,GAAGD;IAElB,MAAM,EAAEE,mBAAmB,EAAE,GAAGZ,gBAAgBU;IAChD,MAAM,EAAEG,wBAAwB,EAAE,GAAGZ,qBAAqBS;IAC1D,MAAM,EAAEI,sBAAsB,EAAE,GAAGZ,mBAAmBQ;IACtD,MAAM,EAAEK,qBAAqB,EAAE,GAAGZ,kBAAkBO;IACpD,MAAM,EAAEM,0BAA0B,EAAE,GAAGZ,uBAAuBM;IAC9D,MAAM,EAAEO,uBAAuB,EAAE,GAAGX,oBAAoBI;IAExD,qBACE,MAACb;;0BACC,KAACC;0BACC,cAAA,MAACF;oBAAmBsB,OAAM;;sCACxB,KAACX;4BAAgBI,OAAOA,MAAMQ,OAAO;4BAAEC,UAAUR;;sCACjD,KAACb;4BACCsB,OAAM;4BACNC,uBACE,KAAC3B;gCACC4B,MAAK;gCACLZ,OAAOA,MAAMa,WAAW,IAAI;gCAC5BC,WAAW;oCAAEC,WAAW;wCAAEC,KAAK;wCAAGC,MAAM;oCAAE;gCAAE;gCAC5CR,UAAUH;;;;;;0BAMpB,KAACnB;0BACC,cAAA,MAACF;oBAAmBsB,OAAM;;sCACxB,KAACV;4BAAea,OAAM;4BAAeV,OAAOA,MAAMkB,YAAY;4BAAET,UAAUP;;sCAC1E,KAACL;4BAAea,OAAM;4BAAcV,OAAOA,MAAMmB,UAAU;4BAAEV,UAAUN;;sCACvE,KAACN;4BAAea,OAAM;4BAAaV,OAAOA,MAAMoB,SAAS;4BAAEX,UAAUL;;sCACrE,KAACP;4BAAea,OAAM;4BAAmBV,OAAOA,MAAMqB,cAAc;4BAAEZ,UAAUJ;;;;;0BAGpF,KAAClB;0BACC,cAAA,KAACF;oBAAmBsB,OAAM;8BACxB,cAAA,KAACxB;wBAAOuC,SAAQ;wBAAWC,OAAM;wBAAYC,SAAS,IAAM9B,cAAcK;kCAAQ;;;;;;AAO5F"}

package/lib/components/FlameChartPanel.d.ts

@@ -1,7 +1,7 @@
-import { FC } from 'react';
-import { PanelProps } from '@perses-dev/plugin-system';
-import { ProfileData } from '@perses-dev/spec';
-import { FlameChartOptions } from '../flame-chart-model';
+import type { PanelProps } from '@perses-dev/plugin-system';
+import type { ProfileData } from '@perses-dev/spec';
+import type { FC } from 'react';
+import type { FlameChartOptions } from '../flame-chart-model';
 export type FlameChartPanelProps = PanelProps<FlameChartOptions, ProfileData>;
 export declare const FlameChartPanel: FC<FlameChartPanelProps>;
 //# sourceMappingURL=FlameChartPanel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FlameChartPanel.d.ts","sourceRoot":"","sources":["../../../src/components/FlameChartPanel.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,EAAE,EAAgC,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAc,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAUzD,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC;AAE9E,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA+JpD,CAAC"}
+{"version":3,"file":"FlameChartPanel.d.ts","sourceRoot":"","sources":["../../../src/components/FlameChartPanel.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAc,MAAM,kBAAkB,CAAC;AAEhE,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAU9D,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC;AAE9E,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA2JpD,CAAC"}

package/lib/components/FlameChartPanel.js

@@ -11,14 +11,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useChartsTheme } from '@perses-dev/components';
-import { Stack, Typography, useMediaQuery, useTheme } from '@mui/material';
-import { useState, useEffect, useMemo } from 'react';
-import { filterStackTraceById, getMaxDepth } from '../utils/data-transform';
-import { FlameChart } from './FlameChart';
-import { Settings } from './Settings';
-import { TableChart } from './TableChart';
-import { SeriesChart } from './SeriesChart';
+import { Stack, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { useChartsTheme } from "@perses-dev/components";
+import { useState, useEffect, useMemo } from "react";
+import { filterStackTraceById, getMaxDepth } from "../utils/data-transform.js";
+import { FlameChart } from "./FlameChart.js";
+import { SeriesChart } from "./SeriesChart.js";
+import { Settings } from "./Settings.js";
+import { TableChart } from "./TableChart.js";
 const LARGE_PANEL_THRESHOLD = 600;
 const DEFAULT_SERIES_CHART_HEIGHT = 200;
 export const FlameChartPanel = (props)=>{
@@ -81,75 +81,92 @@ export const FlameChartPanel = (props)=>{
         });
     };
     if (!contentDimensions) return null;
-    const PADDING = liveSpec.showSeries && liveSpec.showSettings ? 32 : liveSpec.showSeries || liveSpec.showSettings ? 16 : 0;
+    let padding = 0;
+    if (liveSpec.showSeries && liveSpec.showSettings) {
+        padding = 32;
+    } else if (liveSpec.showSeries || liveSpec.showSettings) {
+        padding = 16;
+    }
     const SETTINGS_HEIGHT = liveSpec.showSettings ? 30 : 0;
-    const SERIES_CHART_HEIGHT = liveSpec.showSeries ? contentDimensions.height < DEFAULT_SERIES_CHART_HEIGHT ? contentDimensions.height : DEFAULT_SERIES_CHART_HEIGHT : 0;
-    const TABLE_FLAME_CHART_HEIGHT = liveSpec.traceHeight ? Math.max(contentDimensions.height - (contentDimensions.height > LARGE_PANEL_THRESHOLD ? SERIES_CHART_HEIGHT + SETTINGS_HEIGHT + PADDING : 0), maxDepth * liveSpec.traceHeight) : contentDimensions.height - (contentDimensions.height > LARGE_PANEL_THRESHOLD ? SERIES_CHART_HEIGHT + SETTINGS_HEIGHT + PADDING : 0);
-    const TABLE_CHART_WIDTH = isMobileSize ? contentDimensions.width : liveSpec.showFlameGraph ? 0.4 * contentDimensions.width : contentDimensions.width;
-    const FLAME_CHART_WIDTH = isMobileSize ? contentDimensions.width : liveSpec.showTable ? 0.6 * contentDimensions.width : contentDimensions.width;
+    const seriesChartHeight = liveSpec.showSeries ? Math.min(contentDimensions.height, DEFAULT_SERIES_CHART_HEIGHT) : 0;
+    const reservedHeight = contentDimensions.height > LARGE_PANEL_THRESHOLD ? seriesChartHeight + SETTINGS_HEIGHT + padding : 0;
+    const availableChartHeight = contentDimensions.height - reservedHeight;
+    const tableFlameChartHeight = liveSpec.traceHeight ? Math.max(availableChartHeight, maxDepth * liveSpec.traceHeight) : availableChartHeight;
+    let tableChartWidth = contentDimensions.width;
+    if (!isMobileSize && liveSpec.showFlameGraph) {
+        tableChartWidth = 0.4 * contentDimensions.width;
+    }
+    let flameChartWidth = contentDimensions.width;
+    if (!isMobileSize && liveSpec.showTable) {
+        flameChartWidth = 0.6 * contentDimensions.width;
+    }
     // TODO (gladorme): allow users to override height (useful for explorer for stack traces with high depth)
-    return /*#__PURE__*/ _jsx(Stack, {
+    return /*#__PURE__*/ _jsxs(Stack, {
         height: contentDimensions.height,
         width: contentDimensions.width,
         justifyContent: "center",
         alignItems: "center",
-        children: queryResults.length > 1 ? // display a message if there is more than one query
-        /*#__PURE__*/ _jsx(Typography, {
-            sx: {
-                ...noDataTextStyle
-            },
-            children: "There is more than one query. Please make sure that you provided only one query."
-        }) : flameChartData ? /*#__PURE__*/ _jsxs(Stack, {
-            gap: 2,
-            sx: {
-                overflowY: 'auto',
-                scrollbarGutter: 'stable both-edges',
-                paddingTop: liveSpec.showSettings || liveSpec.showSeries ? 1 : 0
-            },
-            children: [
-                liveSpec.showSeries && /*#__PURE__*/ _jsx(SeriesChart, {
-                    width: contentDimensions.width,
-                    height: SERIES_CHART_HEIGHT,
-                    data: flameChartData.data
-                }),
-                liveSpec.showSettings && /*#__PURE__*/ _jsx(Settings, {
-                    onSelectedIdChange: setSelectedId,
-                    onChangePalette: onChangePalette,
-                    onDisplayChange: onDisplayChange,
-                    value: liveSpec,
-                    selectedId: selectedId
-                }),
-                /*#__PURE__*/ _jsxs(Stack, {
-                    direction: isMobileSize ? 'column' : 'row',
-                    justifyContent: "center",
-                    alignItems: isMobileSize ? 'center' : 'top',
-                    children: [
-                        liveSpec.showTable && /*#__PURE__*/ _jsx(TableChart, {
-                            width: TABLE_CHART_WIDTH,
-                            height: TABLE_FLAME_CHART_HEIGHT,
-                            data: flameChartData.data,
-                            searchValue: searchValue,
-                            onSearchValueChange: setSearchValue,
-                            onSelectedIdChange: setSelectedId
-                        }),
-                        liveSpec.showFlameGraph && /*#__PURE__*/ _jsx(FlameChart, {
-                            width: FLAME_CHART_WIDTH,
-                            height: TABLE_FLAME_CHART_HEIGHT,
-                            data: flameChartData.data,
-                            palette: liveSpec.palette,
-                            selectedId: selectedId,
-                            searchValue: searchValue,
-                            onSelectedIdChange: setSelectedId
-                        })
-                    ]
-                })
-            ]
-        }) : /*#__PURE__*/ _jsx(Typography, {
-            sx: {
-                ...noDataTextStyle
-            },
-            children: "No data"
-        })
+        children: [
+            queryResults.length > 1 && // display a message if there is more than one query
+            /*#__PURE__*/ _jsx(Typography, {
+                sx: {
+                    ...noDataTextStyle
+                },
+                children: "There is more than one query. Please make sure that you provided only one query."
+            }),
+            queryResults.length <= 1 && flameChartData && /*#__PURE__*/ _jsxs(Stack, {
+                gap: 2,
+                sx: {
+                    overflowY: 'auto',
+                    scrollbarGutter: 'stable both-edges',
+                    paddingTop: liveSpec.showSettings || liveSpec.showSeries ? 1 : 0
+                },
+                children: [
+                    liveSpec.showSeries && /*#__PURE__*/ _jsx(SeriesChart, {
+                        width: contentDimensions.width,
+                        height: seriesChartHeight,
+                        data: flameChartData.data
+                    }),
+                    liveSpec.showSettings && /*#__PURE__*/ _jsx(Settings, {
+                        onSelectedIdChange: setSelectedId,
+                        onChangePalette: onChangePalette,
+                        onDisplayChange: onDisplayChange,
+                        value: liveSpec,
+                        selectedId: selectedId
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: isMobileSize ? 'column' : 'row',
+                        justifyContent: "center",
+                        alignItems: isMobileSize ? 'center' : 'top',
+                        children: [
+                            liveSpec.showTable && /*#__PURE__*/ _jsx(TableChart, {
+                                width: tableChartWidth,
+                                height: tableFlameChartHeight,
+                                data: flameChartData.data,
+                                searchValue: searchValue,
+                                onSearchValueChange: setSearchValue,
+                                onSelectedIdChange: setSelectedId
+                            }),
+                            liveSpec.showFlameGraph && /*#__PURE__*/ _jsx(FlameChart, {
+                                width: flameChartWidth,
+                                height: tableFlameChartHeight,
+                                data: flameChartData.data,
+                                palette: liveSpec.palette,
+                                selectedId: selectedId,
+                                searchValue: searchValue,
+                                onSelectedIdChange: setSelectedId
+                            })
+                        ]
+                    })
+                ]
+            }),
+            queryResults.length <= 1 && !flameChartData && /*#__PURE__*/ _jsx(Typography, {
+                sx: {
+                    ...noDataTextStyle
+                },
+                children: "No data"
+            })
+        ]
     });
 };