@perses-dev/flame-chart-plugin 0.2.0 → 0.3.0

package/lib/utils/data-transform.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/data-transform.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ProfileMetaData, StackTrace } from '@perses-dev/core';\nimport { FlameChartSample as Sample, TableChartSample } from './data-model';\nimport { getSpanColor } from './palette-gen';\nimport { formatItemValue } from './format';\n\n/**\n * Filter the global stacktrace by a function ID to focus on that function and display its corresponding flame chart\n */\nexport function filterJson(json: StackTrace, id?: number): StackTrace {\n  if (id === null) {\n    return json;\n  }\n\n  const recur = (item: StackTrace, id?: number): StackTrace | undefined => {\n    if (item.id === id) {\n      return item;\n    }\n\n    for (const child of item.children || []) {\n      const temp = recur(child, id);\n      if (temp) {\n        item.children = [temp];\n\n        // change the parents' values\n        item.start = temp.start;\n        item.end = temp.end;\n        // item.self = temp.self;\n        // item.total = temp.total;\n\n        return item;\n      }\n    }\n  };\n\n  return recur(json, id) || json;\n}\n\n// build the name of the corresponding flamechart item\nfunction formatName(item: StackTrace, rootVal: number, unit: string | undefined): string {\n  return (item.total / rootVal) * 100 < 1 ? '' : item.name + ` (${formatItemValue(unit, item.total)})`;\n}\n\n/**\n * Search the total value of an item corresponding to a given ID\n */\nfunction getCurrentTotalValue(json: StackTrace, id: number | undefined): number {\n  if (id === undefined) return 0;\n\n  const recur = (item: StackTrace): number => {\n    if (item.id === id) {\n      return item.total;\n    }\n\n    for (const child of item.children || []) {\n      const total = recur(child);\n      if (total !== undefined) {\n        return total;\n      }\n    }\n    return 0; // If not found, return 0\n  };\n\n  return recur(json);\n}\n\n/**\n * Build series data for the flame chart option\n */\nexport function recursionJson(\n  palette: string,\n  metadata: ProfileMetaData | undefined,\n  jsonObj: StackTrace,\n  searchValue: string,\n  id?: number\n): Sample[] {\n  const data: Sample[] = [];\n  const filteredJson = filterJson(structuredClone(jsonObj), id);\n\n  const rootVal = filteredJson.total; // total samples of root node\n  const currentVal = getCurrentTotalValue(filteredJson, id); // total samples of the selected item, used to generate items colors\n\n  const recur = (item: StackTrace): void => {\n    const temp = {\n      name: item.id,\n      value: [\n        item.level,\n        item.start,\n        item.end,\n        formatName(item, currentVal ? currentVal : rootVal, metadata?.units),\n        (item.total / rootVal) * 100,\n        (item.self / rootVal) * 100,\n        item.name,\n        item.self,\n        item.total,\n      ],\n      itemStyle: {\n        color: !isItemNameMatchesSearchFilters(item.name, searchValue)\n          ? '#dee2e6'\n          : getSpanColor(palette, item.name, (item.total / (currentVal ? currentVal : rootVal)) * 100),\n      },\n    };\n    data.push(temp as Sample);\n\n    for (const child of item.children || []) {\n      recur(child);\n    }\n  };\n\n  // check is filteredJson is not empty before call recur\n  if (filteredJson.id) recur(filteredJson);\n  return data;\n}\n\n/**\n * Transform query results to a tabular format for the table chart\n */\nexport function tableRecursionJson(jsonObj: StackTrace, searchValue: string): TableChartSample[] {\n  const data: TableChartSample[] = [];\n  const structuredJson = structuredClone(jsonObj);\n\n  const recur = (item: StackTrace): void => {\n    const temp = {\n      id: item.id,\n      name: item.name,\n      self: item.self,\n      total: item.total,\n    };\n\n    if (isItemNameMatchesSearchFilters(temp.name, searchValue)) data.push(temp as TableChartSample);\n\n    for (const child of item.children || []) {\n      recur(child);\n    }\n  };\n\n  // check is structuredJson is not empty before call recur\n  if (structuredJson.id) recur(structuredJson);\n  return data;\n}\n\n// Checks if an item name matches all parts of a search value.\nfunction isItemNameMatchesSearchFilters(itemName: string, searchValue: string): boolean {\n  if (searchValue === '') return true;\n\n  const filters = searchValue\n    .trim()\n    .toLocaleLowerCase()\n    .split(/[^a-zA-Z0-9']+/)\n    .filter((s) => s !== '');\n\n  if (filters.length === 0) {\n    return false;\n  } else {\n    return filters.every((filter) => itemName.toLowerCase().includes(filter.trim()));\n  }\n}\n\n/**\n * Finds the total sample value of the series data item with the specified name.\n */\nexport function findTotalSampleByName(seriesData: Sample[], name: number | undefined): number | undefined {\n  if (name === undefined || name === 0) return undefined;\n  const item = seriesData.find((item) => item.name === name);\n  const totalSample = item?.value[8];\n  return Number(totalSample);\n}\n"],"names":["getSpanColor","formatItemValue","filterJson","json","id","recur","item","child","children","temp","start","end","formatName","rootVal","unit","total","name","getCurrentTotalValue","undefined","recursionJson","palette","metadata","jsonObj","searchValue","data","filteredJson","structuredClone","currentVal","value","level","units","self","itemStyle","color","isItemNameMatchesSearchFilters","push","tableRecursionJson","structuredJson","itemName","filters","trim","toLocaleLowerCase","split","filter","s","length","every","toLowerCase","includes","findTotalSampleByName","seriesData","find","totalSample","Number"],"mappings":"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"}
+{"version":3,"sources":["../../../src/utils/data-transform.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ProfileMetaData, StackTrace } from '@perses-dev/core';\nimport { FlameChartSample as Sample, TableChartSample } from './data-model';\nimport { getSpanColor } from './palette-gen';\nimport { formatItemValue } from './format';\n\n/**\n * Filter the global stacktrace by a function ID to focus on that function and display its corresponding flame chart\n */\nexport function filterStackTraceById(trace: StackTrace, id: number | undefined): StackTrace {\n  if (id === undefined) {\n    return trace;\n  }\n\n  const recur = (trace: StackTrace, id: number | undefined): StackTrace | undefined => {\n    if (trace.id === id) {\n      return trace;\n    }\n\n    for (const child of trace.children ?? []) {\n      const temp = recur(child, id);\n      if (temp) {\n        trace = { ...trace }; // Create a shallow copy of the trace to avoid mutating the original object\n        // Override parents' values\n        trace.children = [temp];\n        trace.start = temp.start;\n        trace.end = temp.end;\n\n        return trace;\n      }\n    }\n\n    return undefined;\n  };\n\n  return recur(trace, id) ?? trace;\n}\n\n// build the name of the corresponding flamechart item\nfunction formatName(item: StackTrace, rootVal: number, unit: string | undefined): string {\n  return (item.total / rootVal) * 100 < 1 ? '' : item.name + ` (${formatItemValue(unit, item.total)})`;\n}\n\n/**\n * Search the total value of an item corresponding to a given ID\n */\nfunction getCurrentTotalValue(json: StackTrace, id: number | undefined): number {\n  if (id === undefined) return 0;\n\n  const recur = (item: StackTrace): number => {\n    if (item.id === id) {\n      return item.total;\n    }\n\n    for (const child of item.children || []) {\n      const total = recur(child);\n      if (total !== undefined) {\n        return total;\n      }\n    }\n    return 0; // If not found, return 0\n  };\n\n  return recur(json);\n}\n\n/**\n * Build series data for the flame chart option\n */\nexport function buildSamples(\n  palette: string,\n  metadata: ProfileMetaData | undefined,\n  traces: StackTrace,\n  searchValue: string,\n  id?: number\n): Sample[] {\n  const data: Sample[] = [];\n  const filteredJson = filterStackTraceById(traces, id);\n\n  const rootVal = filteredJson.total; // total samples of root node\n  const currentVal = getCurrentTotalValue(filteredJson, id); // total samples of the selected item, used to generate items colors\n\n  const recur = (item: StackTrace): void => {\n    const temp = {\n      name: item.id,\n      value: [\n        item.level,\n        item.start,\n        item.end,\n        formatName(item, currentVal ? currentVal : rootVal, metadata?.units),\n        (item.total / rootVal) * 100,\n        (item.self / rootVal) * 100,\n        item.name,\n        item.self,\n        item.total,\n      ],\n      itemStyle: {\n        color: !isItemNameMatchesSearchFilters(item.name, searchValue)\n          ? '#dee2e6'\n          : getSpanColor(palette, item.name, (item.total / (currentVal ? currentVal : rootVal)) * 100),\n      },\n    };\n    data.push(temp as Sample);\n\n    for (const child of item.children || []) {\n      recur(child);\n    }\n  };\n\n  // check is filteredJson is not empty before call recur\n  if (filteredJson.id) recur(filteredJson);\n  return data;\n}\n\n/**\n * Transform query results to a tabular format for the table chart\n */\nexport function tableRecursionJson(jsonObj: StackTrace, searchValue: string): TableChartSample[] {\n  const data: TableChartSample[] = [];\n  const structuredJson = structuredClone(jsonObj);\n\n  const recur = (item: StackTrace): void => {\n    const temp = {\n      id: item.id,\n      name: item.name,\n      self: item.self,\n      total: item.total,\n    };\n\n    if (isItemNameMatchesSearchFilters(temp.name, searchValue)) data.push(temp as TableChartSample);\n\n    for (const child of item.children || []) {\n      recur(child);\n    }\n  };\n\n  // check is structuredJson is not empty before call recur\n  if (structuredJson.id) recur(structuredJson);\n  return data;\n}\n\n// Checks if an item name matches all parts of a search value.\nfunction isItemNameMatchesSearchFilters(itemName: string, searchValue: string): boolean {\n  if (searchValue === '') return true;\n\n  const filters = searchValue\n    .trim()\n    .toLocaleLowerCase()\n    .split(/[^a-zA-Z0-9']+/)\n    .filter((s) => s !== '');\n\n  if (filters.length === 0) {\n    return false;\n  } else {\n    return filters.every((filter) => itemName.toLowerCase().includes(filter.trim()));\n  }\n}\n\n/**\n * Finds the total sample value of the series data item with the specified name.\n */\nexport function findTotalSampleByName(seriesData: Sample[], name: number | undefined): number | undefined {\n  if (name === undefined || name === 0) return undefined;\n  const item = seriesData.find((item) => item.name === name);\n  const totalSample = item?.value[8];\n  return Number(totalSample);\n}\n\n/*\n * Calculate the maximum depth of the stack trace\n */\nexport function getMaxDepth(trace: StackTrace): number {\n  if (!trace.children?.length) {\n    return 1;\n  }\n  return 1 + Math.max(...trace.children.map(getMaxDepth));\n}\n"],"names":["getSpanColor","formatItemValue","filterStackTraceById","trace","id","undefined","recur","child","children","temp","start","end","formatName","item","rootVal","unit","total","name","getCurrentTotalValue","json","buildSamples","palette","metadata","traces","searchValue","data","filteredJson","currentVal","value","level","units","self","itemStyle","color","isItemNameMatchesSearchFilters","push","tableRecursionJson","jsonObj","structuredJson","structuredClone","itemName","filters","trim","toLocaleLowerCase","split","filter","s","length","every","toLowerCase","includes","findTotalSampleByName","seriesData","find","totalSample","Number","getMaxDepth","Math","max","map"],"mappings":"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"}

package/lib/utils/utils.d.ts

@@ -1,3 +1,4 @@
+import { ChangeEventHandler } from 'react';
 import { FlameChartOptionsEditorProps } from '../flame-chart-model';
 /**
  * Hook to manage `palette` state.
@@ -5,6 +6,12 @@ import { FlameChartOptionsEditorProps } from '../flame-chart-model';
 export declare function usePaletteState(props: FlameChartOptionsEditorProps): {
     handlePaletteChange: (newPalette: 'package-name' | 'value') => void;
 };
+/**
+ * Hook to manage `traceHeight` state.
+ */
+export declare function useTraceHeightState(props: FlameChartOptionsEditorProps): {
+    handleTraceHeightChange: ChangeEventHandler<HTMLInputElement>;
+};
 /**
  * Hook to manage `showSettings` state.
  */

package/lib/utils/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/utils/utils.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AAEpE;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,4BAA4B,GAAG;IACpE,mBAAmB,EAAE,CAAC,UAAU,EAAE,cAAc,GAAG,OAAO,KAAK,IAAI,CAAC;CACrE,CAYA;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,4BAA4B,GAAG;IACzE,wBAAwB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACvD,CAYA;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,4BAA4B,GAAG;IACvE,sBAAsB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACrD,CAYA;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,4BAA4B,GAAG;IACtE,qBAAqB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACpD,CAYA;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,4BAA4B,GAAG;IAC3E,0BAA0B,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACzD,CAYA;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,4BAA4B,GAAG,IAAI,CAYvE"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/utils/utils.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,EAAE,4BAA4B,EAAE,MAAM,sBAAsB,CAAC;AAEpE;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,4BAA4B,GAAG;IACpE,mBAAmB,EAAE,CAAC,UAAU,EAAE,cAAc,GAAG,OAAO,KAAK,IAAI,CAAC;CACrE,CAYA;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,4BAA4B,GAAG;IACxE,uBAAuB,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CAC/D,CAYA;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,4BAA4B,GAAG;IACzE,wBAAwB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACvD,CAYA;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,4BAA4B,GAAG;IACvE,sBAAsB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACrD,CAYA;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,4BAA4B,GAAG;IACtE,qBAAqB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACpD,CAYA;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,4BAA4B,GAAG;IAC3E,0BAA0B,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACzD,CAYA;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,4BAA4B,GAAG,IAAI,CAYvE"}

package/lib/utils/utils.js

@@ -24,6 +24,19 @@ import { produce } from 'immer';
         handlePaletteChange
     };
 }
+/**
+ * Hook to manage `traceHeight` state.
+ */ export function useTraceHeightState(props) {
+    const { onChange, value } = props;
+    const handleTraceHeightChange = (event)=>{
+        onChange(produce(value, (draft)=>{
+            draft.traceHeight = event.target.value ? Number(event.target.value) : undefined;
+        }));
+    };
+    return {
+        handleTraceHeightChange
+    };
+}
 /**
  * Hook to manage `showSettings` state.
  */ export function useShowSettingsState(props) {

package/lib/utils/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/utils/utils.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { produce } from 'immer';\nimport { FlameChartOptionsEditorProps } from '../flame-chart-model';\n\n/**\n * Hook to manage `palette` state.\n */\nexport function usePaletteState(props: FlameChartOptionsEditorProps): {\n  handlePaletteChange: (newPalette: 'package-name' | 'value') => void;\n} {\n  const { onChange, value } = props;\n\n  const handlePaletteChange = (newPalette: 'package-name' | 'value'): void => {\n    onChange(\n      produce(value, (draft) => {\n        draft.palette = newPalette;\n      })\n    );\n  };\n\n  return { handlePaletteChange };\n}\n\n/**\n * Hook to manage `showSettings` state.\n */\nexport function useShowSettingsState(props: FlameChartOptionsEditorProps): {\n  handleShowSettingsChange: (newValue: boolean) => void;\n} {\n  const { onChange, value } = props;\n\n  const handleShowSettingsChange = (newValue: boolean): void => {\n    onChange(\n      produce(value, (draft) => {\n        draft.showSettings = newValue;\n      })\n    );\n  };\n\n  return { handleShowSettingsChange };\n}\n\n/**\n * Hook to manage `showSeries` state.\n */\nexport function useShowSeriesState(props: FlameChartOptionsEditorProps): {\n  handleShowSeriesChange: (newValue: boolean) => void;\n} {\n  const { onChange, value } = props;\n\n  const handleShowSeriesChange = (newValue: boolean): void => {\n    onChange(\n      produce(value, (draft) => {\n        draft.showSeries = newValue;\n      })\n    );\n  };\n\n  return { handleShowSeriesChange };\n}\n\n/**\n * Hook to manage `showTable` state.\n */\nexport function useShowTableState(props: FlameChartOptionsEditorProps): {\n  handleShowTableChange: (newValue: boolean) => void;\n} {\n  const { onChange, value } = props;\n\n  const handleShowTableChange = (newValue: boolean): void => {\n    onChange(\n      produce(value, (draft) => {\n        draft.showTable = newValue;\n      })\n    );\n  };\n\n  return { handleShowTableChange };\n}\n\n/**\n * Hook to manage `showFlameGraph` state.\n */\nexport function useShowFlameGraphState(props: FlameChartOptionsEditorProps): {\n  handleShowFlameGraphChange: (newValue: boolean) => void;\n} {\n  const { onChange, value } = props;\n\n  const handleShowFlameGraphChange = (newValue: boolean): void => {\n    onChange(\n      produce(value, (draft) => {\n        draft.showFlameGraph = newValue;\n      })\n    );\n  };\n\n  return { handleShowFlameGraphChange };\n}\n\n/**\n * Reset all settings to their initial values\n */\nexport function resetSettings(props: FlameChartOptionsEditorProps): void {\n  const { onChange, value } = props;\n\n  onChange(\n    produce(value, (draft) => {\n      draft.palette = 'package-name';\n      draft.showSettings = true;\n      draft.showSeries = false;\n      draft.showTable = true;\n      draft.showFlameGraph = true;\n    })\n  );\n}\n"],"names":["produce","usePaletteState","props","onChange","value","handlePaletteChange","newPalette","draft","palette","useShowSettingsState","handleShowSettingsChange","newValue","showSettings","useShowSeriesState","handleShowSeriesChange","showSeries","useShowTableState","handleShowTableChange","showTable","useShowFlameGraphState","handleShowFlameGraphChange","showFlameGraph","resetSettings"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,OAAO,QAAQ,QAAQ;AAGhC;;CAEC,GACD,OAAO,SAASC,gBAAgBC,KAAmC;IAGjE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAE5B,MAAMG,sBAAsB,CAACC;QAC3BH,SACEH,QAAQI,OAAO,CAACG;YACdA,MAAMC,OAAO,GAAGF;QAClB;IAEJ;IAEA,OAAO;QAAED;IAAoB;AAC/B;AAEA;;CAEC,GACD,OAAO,SAASI,qBAAqBP,KAAmC;IAGtE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAE5B,MAAMQ,2BAA2B,CAACC;QAChCR,SACEH,QAAQI,OAAO,CAACG;YACdA,MAAMK,YAAY,GAAGD;QACvB;IAEJ;IAEA,OAAO;QAAED;IAAyB;AACpC;AAEA;;CAEC,GACD,OAAO,SAASG,mBAAmBX,KAAmC;IAGpE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAE5B,MAAMY,yBAAyB,CAACH;QAC9BR,SACEH,QAAQI,OAAO,CAACG;YACdA,MAAMQ,UAAU,GAAGJ;QACrB;IAEJ;IAEA,OAAO;QAAEG;IAAuB;AAClC;AAEA;;CAEC,GACD,OAAO,SAASE,kBAAkBd,KAAmC;IAGnE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAE5B,MAAMe,wBAAwB,CAACN;QAC7BR,SACEH,QAAQI,OAAO,CAACG;YACdA,MAAMW,SAAS,GAAGP;QACpB;IAEJ;IAEA,OAAO;QAAEM;IAAsB;AACjC;AAEA;;CAEC,GACD,OAAO,SAASE,uBAAuBjB,KAAmC;IAGxE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAE5B,MAAMkB,6BAA6B,CAACT;QAClCR,SACEH,QAAQI,OAAO,CAACG;YACdA,MAAMc,cAAc,GAAGV;QACzB;IAEJ;IAEA,OAAO;QAAES;IAA2B;AACtC;AAEA;;CAEC,GACD,OAAO,SAASE,cAAcpB,KAAmC;IAC/D,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAE5BC,SACEH,QAAQI,OAAO,CAACG;QACdA,MAAMC,OAAO,GAAG;QAChBD,MAAMK,YAAY,GAAG;QACrBL,MAAMQ,UAAU,GAAG;QACnBR,MAAMW,SAAS,GAAG;QAClBX,MAAMc,cAAc,GAAG;IACzB;AAEJ"}
+{"version":3,"sources":["../../../src/utils/utils.ts"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { produce } from 'immer';\nimport { ChangeEventHandler } from 'react';\nimport { FlameChartOptionsEditorProps } from '../flame-chart-model';\n\n/**\n * Hook to manage `palette` state.\n */\nexport function usePaletteState(props: FlameChartOptionsEditorProps): {\n  handlePaletteChange: (newPalette: 'package-name' | 'value') => void;\n} {\n  const { onChange, value } = props;\n\n  const handlePaletteChange = (newPalette: 'package-name' | 'value'): void => {\n    onChange(\n      produce(value, (draft) => {\n        draft.palette = newPalette;\n      })\n    );\n  };\n\n  return { handlePaletteChange };\n}\n\n/**\n * Hook to manage `traceHeight` state.\n */\nexport function useTraceHeightState(props: FlameChartOptionsEditorProps): {\n  handleTraceHeightChange: ChangeEventHandler<HTMLInputElement>;\n} {\n  const { onChange, value } = props;\n\n  const handleTraceHeightChange: ChangeEventHandler<HTMLInputElement> = (event): void => {\n    onChange(\n      produce(value, (draft) => {\n        draft.traceHeight = event.target.value ? Number(event.target.value) : undefined;\n      })\n    );\n  };\n\n  return { handleTraceHeightChange };\n}\n\n/**\n * Hook to manage `showSettings` state.\n */\nexport function useShowSettingsState(props: FlameChartOptionsEditorProps): {\n  handleShowSettingsChange: (newValue: boolean) => void;\n} {\n  const { onChange, value } = props;\n\n  const handleShowSettingsChange = (newValue: boolean): void => {\n    onChange(\n      produce(value, (draft) => {\n        draft.showSettings = newValue;\n      })\n    );\n  };\n\n  return { handleShowSettingsChange };\n}\n\n/**\n * Hook to manage `showSeries` state.\n */\nexport function useShowSeriesState(props: FlameChartOptionsEditorProps): {\n  handleShowSeriesChange: (newValue: boolean) => void;\n} {\n  const { onChange, value } = props;\n\n  const handleShowSeriesChange = (newValue: boolean): void => {\n    onChange(\n      produce(value, (draft) => {\n        draft.showSeries = newValue;\n      })\n    );\n  };\n\n  return { handleShowSeriesChange };\n}\n\n/**\n * Hook to manage `showTable` state.\n */\nexport function useShowTableState(props: FlameChartOptionsEditorProps): {\n  handleShowTableChange: (newValue: boolean) => void;\n} {\n  const { onChange, value } = props;\n\n  const handleShowTableChange = (newValue: boolean): void => {\n    onChange(\n      produce(value, (draft) => {\n        draft.showTable = newValue;\n      })\n    );\n  };\n\n  return { handleShowTableChange };\n}\n\n/**\n * Hook to manage `showFlameGraph` state.\n */\nexport function useShowFlameGraphState(props: FlameChartOptionsEditorProps): {\n  handleShowFlameGraphChange: (newValue: boolean) => void;\n} {\n  const { onChange, value } = props;\n\n  const handleShowFlameGraphChange = (newValue: boolean): void => {\n    onChange(\n      produce(value, (draft) => {\n        draft.showFlameGraph = newValue;\n      })\n    );\n  };\n\n  return { handleShowFlameGraphChange };\n}\n\n/**\n * Reset all settings to their initial values\n */\nexport function resetSettings(props: FlameChartOptionsEditorProps): void {\n  const { onChange, value } = props;\n\n  onChange(\n    produce(value, (draft) => {\n      draft.palette = 'package-name';\n      draft.showSettings = true;\n      draft.showSeries = false;\n      draft.showTable = true;\n      draft.showFlameGraph = true;\n    })\n  );\n}\n"],"names":["produce","usePaletteState","props","onChange","value","handlePaletteChange","newPalette","draft","palette","useTraceHeightState","handleTraceHeightChange","event","traceHeight","target","Number","undefined","useShowSettingsState","handleShowSettingsChange","newValue","showSettings","useShowSeriesState","handleShowSeriesChange","showSeries","useShowTableState","handleShowTableChange","showTable","useShowFlameGraphState","handleShowFlameGraphChange","showFlameGraph","resetSettings"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,OAAO,QAAQ,QAAQ;AAIhC;;CAEC,GACD,OAAO,SAASC,gBAAgBC,KAAmC;IAGjE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAE5B,MAAMG,sBAAsB,CAACC;QAC3BH,SACEH,QAAQI,OAAO,CAACG;YACdA,MAAMC,OAAO,GAAGF;QAClB;IAEJ;IAEA,OAAO;QAAED;IAAoB;AAC/B;AAEA;;CAEC,GACD,OAAO,SAASI,oBAAoBP,KAAmC;IAGrE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAE5B,MAAMQ,0BAAgE,CAACC;QACrER,SACEH,QAAQI,OAAO,CAACG;YACdA,MAAMK,WAAW,GAAGD,MAAME,MAAM,CAACT,KAAK,GAAGU,OAAOH,MAAME,MAAM,CAACT,KAAK,IAAIW;QACxE;IAEJ;IAEA,OAAO;QAAEL;IAAwB;AACnC;AAEA;;CAEC,GACD,OAAO,SAASM,qBAAqBd,KAAmC;IAGtE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAE5B,MAAMe,2BAA2B,CAACC;QAChCf,SACEH,QAAQI,OAAO,CAACG;YACdA,MAAMY,YAAY,GAAGD;QACvB;IAEJ;IAEA,OAAO;QAAED;IAAyB;AACpC;AAEA;;CAEC,GACD,OAAO,SAASG,mBAAmBlB,KAAmC;IAGpE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAE5B,MAAMmB,yBAAyB,CAACH;QAC9Bf,SACEH,QAAQI,OAAO,CAACG;YACdA,MAAMe,UAAU,GAAGJ;QACrB;IAEJ;IAEA,OAAO;QAAEG;IAAuB;AAClC;AAEA;;CAEC,GACD,OAAO,SAASE,kBAAkBrB,KAAmC;IAGnE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAE5B,MAAMsB,wBAAwB,CAACN;QAC7Bf,SACEH,QAAQI,OAAO,CAACG;YACdA,MAAMkB,SAAS,GAAGP;QACpB;IAEJ;IAEA,OAAO;QAAEM;IAAsB;AACjC;AAEA;;CAEC,GACD,OAAO,SAASE,uBAAuBxB,KAAmC;IAGxE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAE5B,MAAMyB,6BAA6B,CAACT;QAClCf,SACEH,QAAQI,OAAO,CAACG;YACdA,MAAMqB,cAAc,GAAGV;QACzB;IAEJ;IAEA,OAAO;QAAES;IAA2B;AACtC;AAEA;;CAEC,GACD,OAAO,SAASE,cAAc3B,KAAmC;IAC/D,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAE5BC,SACEH,QAAQI,OAAO,CAACG;QACdA,MAAMC,OAAO,GAAG;QAChBD,MAAMY,YAAY,GAAG;QACrBZ,MAAMe,UAAU,GAAG;QACnBf,MAAMkB,SAAS,GAAG;QAClBlB,MAAMqB,cAAc,GAAG;IACzB;AAEJ"}

package/mf-manifest.json

@@ -5,11 +5,11 @@
     "name": "FlameChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.2.0",
+      "buildVersion": "0.3.0",
       "buildName": "@perses-dev/flame-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/FlameChart.96aae761.js",
+      "name": "__mf/js/FlameChart.d175bd16.js",
       "path": "",
       "type": "global"
     },
@@ -247,7 +247,7 @@
           "sync": [
             "__mf/js/async/32.a46fc45f.js",
             "__mf/js/async/29.8b55315e.js",
-            "__mf/js/async/__federation_expose_FlameChart.aaa6df30.js"
+            "__mf/js/async/__federation_expose_FlameChart.3dbefd63.js"
           ],
           "async": [
             "__mf/js/async/238.5fdc556e.js",

package/mf-stats.json

@@ -5,11 +5,11 @@
     "name": "FlameChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.2.0",
+      "buildVersion": "0.3.0",
       "buildName": "@perses-dev/flame-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/FlameChart.96aae761.js",
+      "name": "__mf/js/FlameChart.d175bd16.js",
       "path": "",
       "type": "global"
     },
@@ -296,7 +296,7 @@
           "sync": [
             "__mf/js/async/32.a46fc45f.js",
             "__mf/js/async/29.8b55315e.js",
-            "__mf/js/async/__federation_expose_FlameChart.aaa6df30.js"
+            "__mf/js/async/__federation_expose_FlameChart.3dbefd63.js"
           ],
           "async": [
             "__mf/js/async/238.5fdc556e.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/flame-chart-plugin",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "homepage": "https://github.com/perses/plugins/blob/main/README.md",
   "repository": {
     "type": "git",

package/__mf/js/async/__federation_expose_FlameChart.aaa6df30.js

@@ -1,17 +0,0 @@
-"use strict";(self.chunk_FlameChart=self.chunk_FlameChart||[]).push([["635"],{37791:function(e,t,a){a.r(t),a.d(t,{FlameChart:()=>ea});var l=a(24246),o=a(95700),n=a(48565),i=a(75586);let r=[{id:"package-name",label:"By Package Name"},{id:"value",label:"By Value"}];function s(e){let{onChange:t,value:a="package-name"}=e;return(0,l.jsx)(o.OptionsEditorControl,{label:"Palette",control:(0,l.jsx)(o.SettingsAutocomplete,{value:r.find(e=>e.id===a),options:r,getOptionLabel:e=>e.label,onChange:(e,a)=>{let{id:l}=a;t(l)},disableClearable:!0})})}var d=a(87895);function h(e){let{onChange:t,value:a,label:n}=e;return(0,l.jsx)(o.OptionsEditorControl,{label:n,control:(0,l.jsx)(d.Z,{checked:a,onChange:(e,a)=>{t(a)}})})}var u=a(76439),c=a(94776),p=a(25283),m=a(52054),g=a(54538),f=a(5549),x=a(36372),b=a(79119),v=a(10517),w=a(67877),y=a(57689),C=a(50345),j=a(83915);let S=new j.Z({hue:{min:20,max:360}}),k=new j.Z({hue:{min:0,max:20}}),T={},Z="#dee2e6",F=["#fff85b","#ffde4c","#ffc252","#ff8c00","#f08c00","#e67762","#ff8c00","#ff6f00","#ff7070","#ff3300","#ff004c"];var $=a(1148),I=a(29085);function M(e,t){let a="";switch(e){case"count":case"samples":case"objects":a=(0,$.Bw)(t,{unit:"decimal",decimalPlaces:2,shortValues:!0});break;case"bytes":a=(0,$.Bw)(t,{unit:"bytes"});break;case"nanoseconds":a=t<1e3?(0,$.Bw)(t,{unit:"decimal",decimalPlaces:2,shortValues:!0})+"ns":t<1e6?(0,$.Bw)(t/1e3,{unit:"decimal",decimalPlaces:2,shortValues:!0})+"μs":(0,I.LU)((0,I.oK)(t/1e6));break;default:a=`${t} ${e}`}return a}function z(e,t){if(""===t)return!0;let a=t.trim().toLocaleLowerCase().split(/[^a-zA-Z0-9']+/).filter(e=>""!==e);return 0!==a.length&&a.every(t=>e.toLowerCase().includes(t.trim()))}var P=a(76242),O=a(6621),D=a(84974),E=a(10763),G=a(52889),B=a(12709),V=a(16838);let R=(0,B.ZP)(G.Z)(e=>{let{theme:t}=e,a="light"===t.palette.mode?t.palette.grey[100]:t.palette.grey[800];return{backgroundColor:a,height:t.spacing(3),color:t.palette.text.primary,fontWeight:t.typography.fontWeightRegular,"&:hover, &:focus":{backgroundColor:(0,V._4)(a,.06)},"&:active":{boxShadow:t.shadows[1],backgroundColor:(0,V._4)(a,.12)}}});function L(e){var t;let{totalValue:a,totalSample:o,otherItemSample:n,onSelectedIdChange:i}=e,r=a.split("("),s=null==(t=r[r.length-1])?void 0:t.slice(0,-1),d=(0,$.Bw)(o,{unit:"decimal",decimalPlaces:2,shortValues:!0})+" samples";return(0,l.jsx)(p.Z,{direction:"row",spacing:1,minHeight:40,alignItems:"center",children:(0,l.jsxs)(O.Z,{separator:(0,l.jsx)(D.default,{fontSize:"small"}),"aria-label":"breadcrumb",sx:{justifyContent:"center"},children:[(0,l.jsx)(R,{label:s+"  |  "+d}),void 0!==n&&(0,l.jsx)(R,{label:(n/o*100).toFixed(2)+"% of total",icon:(0,l.jsx)(y.default,{fontSize:"small",color:"secondary"}),deleteIcon:(0,l.jsx)(E.default,{fontSize:"small"}),onDelete:e=>{e.preventDefault(),i(0)}})]})})}function A(e){var t,a;let{width:n,height:i,data:r,palette:s,selectedId:d,searchValue:h,onSelectedIdChange:u}=e,m=(0,c.Z)(),j=(0,o.useChartsTheme)(),[$,I]=(0,g.useState)(null),[O,D]=(0,g.useState)({id:0,name:""}),[E,G]=(0,g.useState)(!1),B=(0,g.useMemo)(()=>(function(e,t,a,l,o){let n=[],i=function(e,t){if(null===t)return e;let a=(e,t)=>{if(e.id===t)return e;for(let l of e.children||[]){let o=a(l,t);if(o)return e.children=[o],e.start=o.start,e.end=o.end,e}};return a(e,t)||e}(structuredClone(a),o),r=i.total,s=function(e,t){if(void 0===t)return 0;let a=e=>{if(e.id===t)return e.total;for(let t of e.children||[]){let e=a(t);if(void 0!==e)return e}return 0};return a(e)}(i,o),d=a=>{var o,i,h,u,c;let p={name:a.id,value:[a.level,a.start,a.end,(o=s||r,i=null==t?void 0:t.units,a.total/o*100<1?"":a.name+` (${M(i,a.total)})`),a.total/r*100,a.self/r*100,a.name,a.self,a.total],itemStyle:{color:z(a.name,l)?(h=a.name,u=a.total/(s||r)*100,"package-name"===e?function(e,t){var a;let l=(null==(a=e.split("/").pop())?void 0:a.split(".")[0])||e;return t<1?Z:function(e,t){let a=`${e}_____${t}`,l=T[a];return l||(l=function(e,t){let[a,l,o]=t?k.hsl(e):S.hsl(e),n=`${(100*l).toFixed(0)}%`,i=`${(100*o).toFixed(0)}%`;return`hsla(${a.toFixed(2)},${n},${i},0.9)`}(e,t),T[a]=l),l}(l,!1)}(h,u):(c=u)<1?Z:c>100?"#ffbdbd":F[Math.floor(c/(F.length-1))]||"#393d47"):"#dee2e6"}};for(let e of(n.push(p),a.children||[]))d(e)};return i.id&&d(i),n})(s,r.metadata,r.profile.stackTrace,h,d),[s,r.metadata,r.profile.stackTrace,d,h]),V=e=>{let t=e.data,a=t.value[6];if(D({id:t.name,name:a}),"event"in e){let t=e.event;I({mouseX:t.event.clientX-2,mouseY:t.event.clientY-4})}},R=()=>{I(null),E&&G(!1)},A=(e,t)=>{let a=t.value(0),l=t.coord([t.value(1),a]),o=t.coord([t.value(2),a]),n=(t.size&&t.size([0,1])||[0,20])[1],i=((null==o?void 0:o[0])??0)-((null==l?void 0:l[0])??0);return{type:"rect",transition:["shape"],shape:{x:null==l?void 0:l[0],y:((null==l?void 0:l[1])??0)-(n??0)/2,width:i,height:(n??2)-2,r:0},style:{fill:t.visual("color")},emphasis:{style:{stroke:"#000"}},textConfig:{position:"insideLeft"},textContent:{style:{text:t.value(3),fill:"#000",width:i-4,overflow:"truncate",ellipsis:"..",truncateMinChar:1},emphasis:{style:{stroke:"#000",lineWidth:.5}}}}},_=(0,g.useMemo)(()=>{var e,t;if(void 0===r.profile.stackTrace)return j.noDataOption;let a=Math.max(i>600?20:6,Math.max(...B.map(e=>e.value[0]))),l=null==(e=B[0])?void 0:e.value[1],o=null==(t=B[0])?void 0:t.value[2],s=(i/(a-1)-2)/2+1;return{tooltip:{appendToBody:!0,confine:!0,formatter:e=>{var t;return function(e,t){let a=Number(e.value[4]),l=Number(e.value[5]),o=e.value[6],n=Number(e.value[8]),i=Number(e.value[7]);return`${o}<br/><br/>
-            Total: ${M(t,n)} (${a.toFixed(2)}%)<br/>
-            Self: ${M(t,i)} (${l.toFixed(2)}%)<br/>
-            Samples: ${P.format.addCommas(n)}`}(e,null==(t=r.metadata)?void 0:t.units)},backgroundColor:m.palette.background.paper,borderColor:m.palette.background.paper,textStyle:{color:m.palette.text.primary}},xAxis:{show:!1,min:l,max:o,axisLabel:{show:!1}},yAxis:{show:!1,max:a,inverse:!0,axisLabel:{show:!1}},axisLabel:{overflow:"truncate",width:n/3},grid:{left:5,right:5,top:s+5,bottom:s},series:[{type:"custom",renderItem:A,encode:{x:[0,1,2],y:0},data:B}]}},[r,j,m,n,B,i]),N=(0,g.useMemo)(()=>(0,l.jsx)(o.EChart,{sx:{width:n,height:i-20-50},option:_,theme:j.echartsTheme,onEvents:{click:V}}),[j.echartsTheme,i,_,n]);return(0,l.jsxs)(p.Z,{style:{width:n,height:i},alignItems:"center",children:[(0,l.jsx)(L,{totalValue:(null==(t=B[0])?void 0:t.value[3])||"",totalSample:(null==(a=B[0])?void 0:a.value[8])||0,otherItemSample:function(e,t){if(void 0===t||0===t)return;let a=e.find(e=>e.name===t);return Number(null==a?void 0:a.value[8])}(B,d),onSelectedIdChange:u}),N,(0,l.jsxs)(f.Z,{sx:{"& .MuiPaper-root":{backgroundColor:m.palette.background.paper,color:m.palette.text.primary,padding:"5px",paddingBottom:"0px"},"& .MuiMenuItem-root":{"&:hover":{backgroundColor:m.palette.action.hover}}},open:null!==$,onClose:R,anchorReference:"anchorPosition",anchorPosition:null!==$?{top:$.mouseY,left:$.mouseX}:void 0,children:[(0,l.jsx)(x.Z,{sx:{paddingLeft:"16px",paddingBottom:"8px"},children:O.name}),(0,l.jsx)(b.Z,{sx:{backgroundColor:m.palette.divider}}),(0,l.jsxs)(v.Z,{onClick:()=>{u(O.id),R()},children:[(0,l.jsx)(y.default,{fontSize:"small",color:"secondary",sx:{marginRight:"10px"}}),"Focus block"]}),(0,l.jsxs)(v.Z,{onClick:()=>{(d||0===d)&&O.name&&navigator.clipboard.writeText(O.name),G(!0)},disabled:E,children:[(0,l.jsx)(C.default,{fontSize:"small",color:"secondary",sx:{marginRight:"10px"}}),E?"Copied":"Copy function name"]}),(0,l.jsxs)(v.Z,{onClick:()=>{d&&u(0),R()},children:[(0,l.jsx)(w.default,{fontSize:"small",color:"secondary",sx:{marginRight:"10px"}}),"Reset graph"]})]})]})}var _=a(71686),N=a(69761);let U="Reset graph",W="Change color sheme";function K(e){let{value:t,selectedId:a,onSelectedIdChange:i,onChangePalette:r,onDisplayChange:s}=e,d=(0,c.Z)(),[h,u]=(0,g.useState)(null),m=!!h,x={fontSize:"12px",padding:"2px 6px",minWidth:"auto"},b=()=>{u(null)},y=(0,g.useMemo)(()=>t.showTable||t.showFlameGraph?t.showTable&&t.showFlameGraph?"both":t.showTable?"table":"flame-graph":"none",[t.showTable,t.showFlameGraph]);return(0,l.jsxs)(p.Z,{spacing:"10px",direction:"row",justifyContent:"center",alignItems:"center",children:[0!==a&&(0,l.jsx)(o.InfoTooltip,{description:U,children:(0,l.jsx)(o.ToolbarIconButton,{"aria-label":U,onClick:()=>i(0),color:"primary",children:(0,l.jsx)(w.default,{fontSize:"small"})})}),(0,l.jsxs)(p.Z,{children:[(0,l.jsx)(o.InfoTooltip,{description:W,children:(0,l.jsx)(o.ToolbarIconButton,{id:"change-color-sheme-button","aria-label":W,"aria-controls":m?"change-color-sheme-menu":void 0,"aria-haspopup":"true","aria-expanded":m?"true":void 0,onClick:e=>{u(e.currentTarget)},color:"primary",children:(0,l.jsx)(_.default,{fontSize:"small"})})}),(0,l.jsxs)(f.Z,{id:"change-color-sheme-menu",slotProps:{list:{"aria-labelledby":"change-color-sheme-button"}},anchorEl:h,open:m,onClose:b,slots:{transition:N.Z},anchorOrigin:{vertical:"bottom",horizontal:"center"},transformOrigin:{vertical:"top",horizontal:"center"},sx:{mt:1,"& .MuiPaper-root":{backgroundColor:d.palette.background.paper,padding:"0 5px"},"& .MuiMenuItem-root:hover":{backgroundColor:d.palette.action.hover}},children:[(0,l.jsx)(v.Z,{onClick:()=>{r("package-name"),b()},selected:"package-name"===t.palette,children:"By package name"}),(0,l.jsx)(v.Z,{onClick:()=>{r("value"),b()},selected:"value"===t.palette,children:"By value"})]})]}),(0,l.jsxs)(p.Z,{direction:"row",sx:{border:`1px solid ${d.palette.primary.main}`,borderRadius:`${d.shape.borderRadius}px`,padding:"2px"},children:[(0,l.jsx)(o.InfoTooltip,{description:"Only show table",children:(0,l.jsx)(n.Z,{variant:"table"===y?"contained":"text",color:"primary",size:"small",onClick:()=>s("table"),sx:x,children:"Table"})}),(0,l.jsx)(o.InfoTooltip,{description:"Only show flame graph",children:(0,l.jsx)(n.Z,{variant:"flame-graph"===y?"contained":"text",color:"primary",size:"small",onClick:()=>s("flame-graph"),sx:x,children:"Flame Graph"})}),(0,l.jsx)(o.InfoTooltip,{description:"Show both the table and flame graph",children:(0,l.jsx)(n.Z,{variant:"both"===y?"contained":"text",color:"primary",size:"small",onClick:()=>s("both"),sx:x,children:"Both"})})]})]})}var Y=a(60886),X=a(8695),q=a(76992),H=a(66268);function Q(e){let{searchValue:t,onSearchValueChange:a}=e;return(0,l.jsx)(X.Z,{size:"small",variant:"outlined",placeholder:"Search...",fullWidth:!0,value:t,onChange:e=>a(e.target.value),slotProps:{input:{startAdornment:(0,l.jsx)(q.Z,{position:"start",children:(0,l.jsx)(H.default,{fontSize:"small"})}),endAdornment:""!==t&&(0,l.jsx)(q.Z,{position:"end",children:(0,l.jsx)(G.Z,{label:"Clear",size:"small",onClick:()=>a("")})})}}})}function J(e){var t;let{width:a,height:n,data:i,searchValue:r,onSearchValueChange:s,onSelectedIdChange:d}=e,h=(0,c.Z)(),u=a-10,m=(0,g.useMemo)(()=>(function(e,t){let a=[],l=structuredClone(e),o=e=>{let l={id:e.id,name:e.name,self:e.self,total:e.total};for(let n of(z(l.name,t)&&a.push(l),e.children||[]))o(n)};return l.id&&o(l),a})(i.profile.stackTrace,r),[i,r]),f=(0,g.useMemo)(()=>{var e;let t=(null==(e=i.metadata)?void 0:e.units)||"";return[{accessorKey:"name",header:"Name",headerDescription:"Function name",align:"left",enableSorting:!0,width:.5*u,cell:e=>{let t=e.getValue();return(0,l.jsx)(Y.Z,{href:"#",underline:"hover",onClick:t=>{t.preventDefault();let a=e.row.original;d(a.id),s(a.name)},children:t})},cellDescription:()=>""},{accessorKey:"self",header:"Self",headerDescription:"Function self samples",align:"right",enableSorting:!0,width:.25*u-15,cell:e=>M(t,e.getValue())},{accessorKey:"total",header:"Total",headerDescription:"Function total samples",align:"right",enableSorting:!0,width:.25*u,cell:e=>M(t,e.getValue())}]},[null==(t=i.metadata)?void 0:t.units,u,s,d]),[x,b]=(0,g.useState)([{id:"total",desc:!0}]);return(0,l.jsxs)(p.Z,{width:u,height:n,gap:1,sx:{"& .MuiTable-root":{borderCollapse:"collapse"},"& .MuiTableCell-root":{borderBottom:`1px solid ${h.palette.divider}`,borderRight:`1px solid ${h.palette.divider}`,"&:last-child":{borderRight:"none"}}},children:[(0,l.jsx)(Q,{searchValue:r,onSearchValueChange:s}),(0,l.jsx)(o.Table,{data:m,columns:f,height:n-8-50,width:u,density:n<600?"compact":"standard",defaultColumnWidth:"auto",defaultColumnHeight:"auto",sorting:x,onSortingChange:b})]})}var ee=a(8887);function et(e){let{width:t,height:a,data:n}=e,i=(0,o.useChartsTheme)(),r=(0,c.Z)(),{setTimeRange:s}=(0,ee.useTimeRange)(),d=(0,g.useRef)(),h=(0,g.useMemo)(()=>({datazoom:e=>{var t,a,l,o;if(void 0===e.batch[0])return;let n=null==(a=e.batch)||null==(t=a[0])?void 0:t.startValue,i=null==(o=e.batch)||null==(l=o[0])?void 0:l.endValue;void 0!==n&&void 0!==i&&s({start:new Date(n),end:new Date(i)})},finished:()=>{void 0!==d.current&&(0,o.enableDataZoom)(d.current)}}),[s]),u=(0,g.useMemo)(()=>{let e=n.timeline||{},t=e.startTime,a=e.durationDelta;return e.samples.map((e,l)=>({id:l,value:[(t+l*a)*1e3,Number(e)]}))},[n.timeline]),m=(0,g.useMemo)(()=>{let e={type:"line",color:r.palette.primary.main,sampling:"lttb",showSymbol:!0,showAllSymbol:!0,symbolSize:3.25,lineStyle:{width:1.25,opacity:.95},areaStyle:{opacity:0},data:u},t=n.timeline||{};return{series:e,xAxis:{type:"time",min:1e3*t.startTime,max:(t.startTime+t.samples.length*t.durationDelta)*1e3,axisLabel:{hideOverlap:!0},axisPointer:{snap:!1}},yAxis:{type:"value",axisLabel:{formatter:e=>{var t;return M(null==(t=n.metadata)?void 0:t.units,e)}}},animation:!1,tooltip:{show:!0,showContent:!0,trigger:"axis",appendToBody:!0,confine:!0,backgroundColor:r.palette.background.paper,borderColor:r.palette.background.paper,textStyle:{color:r.palette.text.primary},formatter:e=>{var t,a,l;return function(e,t,a,l,o){let n=new Date(e.value[0]),i=n.toLocaleDateString("en-US",{month:"short",day:"2-digit",year:"numeric"}),r=n.toLocaleString("en-US",{hour:"2-digit",minute:"2-digit",second:"2-digit",hour12:!1});return`
-    <div>
-      <div>
-        ${i} - <b>${r}</b>
-      </div>
-      <hr style="border: none; border-top: 1px solid ${o}" />
-      <div style="display: flex; align-items: center">
-        <div style="margin-right: 8px; display: inline-block; width: 11px; height: 11px; border-radius: 2px; background-color: ${l}"></div>
-        <div style="width: 100%; display: flex; justify-content: space-between" >
-            <span style="margin-right: 8px">${a}</span> <b>${M(t,e.value[1])}</b>
-        </div>
-      </div>
-    </div>
-  `}((null==(t=e[0])?void 0:t.data)||{},(null==(a=n.metadata)?void 0:a.units)||"",(null==(l=n.metadata)?void 0:l.name)||"",r.palette.primary.main,r.palette.divider)}},axisPointer:{type:"line",z:0,triggerEmphasis:!0,triggerTooltip:!1,snap:!1},toolbox:{feature:{dataZoom:{icon:null,yAxisIndex:"none"}}},grid:{left:10,right:10,top:10,bottom:10}}},[n.timeline,n.metadata,u,r]),f=(0,g.useMemo)(()=>(0,l.jsx)(o.EChart,{style:{width:t,height:a},option:m,theme:i.echartsTheme,onEvents:h,_instance:d}),[i.echartsTheme,a,m,t,h]);return(0,l.jsx)(p.Z,{width:t,height:a,alignItems:"center",justifyContent:"center",onMouseEnter:()=>{void 0!==d.current&&(0,o.enableDataZoom)(d.current)},children:f})}let ea={PanelComponent:e=>{let{contentDimensions:t,queryResults:a,spec:n}=e,i=(0,u.Z)((0,c.Z)().breakpoints.down("sm")),[r,s]=(0,g.useState)(0),[d,h]=(0,g.useState)(""),[f,x]=(0,g.useState)(n);(0,g.useEffect)(()=>{x(n),s(0),h("")},[n]);let b=(0,o.useChartsTheme)(),v=a[0];if(void 0===t)return null;let w=b.noDataOption.title.textStyle,y=f.showSeries&&f.showSettings?32:f.showSeries||f.showSettings?16:0,C=30*!!f.showSettings,j=f.showSeries?t.height<200?t.height:200:0,S=t.height-(t.height>600?j+C+y:0),k=i?t.width:f.showFlameGraph?.4*t.width:t.width,T=i?t.width:f.showTable?.6*t.width:t.width;return(0,l.jsx)(p.Z,{height:t.height,width:t.width,justifyContent:"center",alignItems:"center",children:a.length>1?(0,l.jsx)(m.Z,{sx:{...w},children:"There is more than one query. Please make sure that you provided only one query."}):v?(0,l.jsxs)(p.Z,{gap:2,sx:{overflowY:"auto",scrollbarGutter:"stable both-edges",paddingTop:+!f.showSeries},children:[f.showSeries&&(0,l.jsx)(et,{width:t.width,height:j,data:v.data}),f.showSettings&&(0,l.jsx)(K,{onSelectedIdChange:s,onChangePalette:e=>{x(t=>({...t,palette:e}))},onDisplayChange:e=>{let t=!0,a=!0;"table"===e?a=!1:"flame-graph"===e&&(t=!1),x(e=>({...e,showTable:t,showFlameGraph:a}))},value:f,selectedId:r}),(0,l.jsxs)(p.Z,{direction:i?"column":"row",justifyContent:"center",alignItems:i?"center":"top",children:[f.showTable&&(0,l.jsx)(J,{width:k,height:S,data:v.data,searchValue:d,onSearchValueChange:h,onSelectedIdChange:s}),f.showFlameGraph&&(0,l.jsx)(A,{width:T,height:S,data:v.data,palette:f.palette,selectedId:r,searchValue:d,onSelectedIdChange:s})]})]}):(0,l.jsx)(m.Z,{sx:{...w},children:"No data"})})},supportedQueryTypes:["ProfileQuery"],panelOptionsEditorComponents:[{label:"Settings",content:function(e){let{value:t}=e,{handlePaletteChange:a}=function(e){let{onChange:t,value:a}=e;return{handlePaletteChange:e=>{t((0,i.Uy)(a,t=>{t.palette=e}))}}}(e),{handleShowSettingsChange:r}=function(e){let{onChange:t,value:a}=e;return{handleShowSettingsChange:e=>{t((0,i.Uy)(a,t=>{t.showSettings=e}))}}}(e),{handleShowSeriesChange:d}=function(e){let{onChange:t,value:a}=e;return{handleShowSeriesChange:e=>{t((0,i.Uy)(a,t=>{t.showSeries=e}))}}}(e),{handleShowTableChange:u}=function(e){let{onChange:t,value:a}=e;return{handleShowTableChange:e=>{t((0,i.Uy)(a,t=>{t.showTable=e}))}}}(e),{handleShowFlameGraphChange:c}=function(e){let{onChange:t,value:a}=e;return{handleShowFlameGraphChange:e=>{t((0,i.Uy)(a,t=>{t.showFlameGraph=e}))}}}(e);return(0,l.jsxs)(o.OptionsEditorGrid,{children:[(0,l.jsx)(o.OptionsEditorColumn,{children:(0,l.jsx)(o.OptionsEditorGroup,{title:"Misc",children:(0,l.jsx)(s,{value:t.palette,onChange:a})})}),(0,l.jsx)(o.OptionsEditorColumn,{children:(0,l.jsxs)(o.OptionsEditorGroup,{title:"Panels to display",children:[(0,l.jsx)(h,{label:"Show Options",value:t.showSettings,onChange:r}),(0,l.jsx)(h,{label:"Show Series",value:t.showSeries,onChange:d}),(0,l.jsx)(h,{label:"Show Table",value:t.showTable,onChange:u}),(0,l.jsx)(h,{label:"Show Flame Graph",value:t.showFlameGraph,onChange:c})]})}),(0,l.jsx)(o.OptionsEditorColumn,{children:(0,l.jsx)(o.OptionsEditorGroup,{title:"Reset Settings",children:(0,l.jsx)(n.Z,{variant:"outlined",color:"secondary",onClick:()=>(function(e){let{onChange:t,value:a}=e;t((0,i.Uy)(a,e=>{e.palette="package-name",e.showSettings=!0,e.showSeries=!1,e.showTable=!0,e.showFlameGraph=!0}))})(e),children:"Reset To Defaults"})})})]})}}],createInitialOptions:function(){return{palette:"package-name",showSettings:!0,showSeries:!1,showTable:!0,showFlameGraph:!0}}}}}]);