@perses-dev/flame-chart-plugin 0.2.0

package/lib/utils/data-transform.js

@@ -0,0 +1,138 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { getSpanColor } from './palette-gen';
+import { formatItemValue } from './format';
+/**
+ * Filter the global stacktrace by a function ID to focus on that function and display its corresponding flame chart
+ */ export function filterJson(json, id) {
+    if (id === null) {
+        return json;
+    }
+    const recur = (item, id)=>{
+        if (item.id === id) {
+            return item;
+        }
+        for (const child of item.children || []){
+            const temp = recur(child, id);
+            if (temp) {
+                item.children = [
+                    temp
+                ];
+                // change the parents' values
+                item.start = temp.start;
+                item.end = temp.end;
+                // item.self = temp.self;
+                // item.total = temp.total;
+                return item;
+            }
+        }
+    };
+    return recur(json, id) || json;
+}
+// build the name of the corresponding flamechart item
+function formatName(item, rootVal, unit) {
+    return item.total / rootVal * 100 < 1 ? '' : item.name + ` (${formatItemValue(unit, item.total)})`;
+}
+/**
+ * Search the total value of an item corresponding to a given ID
+ */ function getCurrentTotalValue(json, id) {
+    if (id === undefined) return 0;
+    const recur = (item)=>{
+        if (item.id === id) {
+            return item.total;
+        }
+        for (const child of item.children || []){
+            const total = recur(child);
+            if (total !== undefined) {
+                return total;
+            }
+        }
+        return 0; // If not found, return 0
+    };
+    return recur(json);
+}
+/**
+ * Build series data for the flame chart option
+ */ export function recursionJson(palette, metadata, jsonObj, searchValue, id) {
+    const data = [];
+    const filteredJson = filterJson(structuredClone(jsonObj), id);
+    const rootVal = filteredJson.total; // total samples of root node
+    const currentVal = getCurrentTotalValue(filteredJson, id); // total samples of the selected item, used to generate items colors
+    const recur = (item)=>{
+        const temp = {
+            name: item.id,
+            value: [
+                item.level,
+                item.start,
+                item.end,
+                formatName(item, currentVal ? currentVal : rootVal, metadata?.units),
+                item.total / rootVal * 100,
+                item.self / rootVal * 100,
+                item.name,
+                item.self,
+                item.total
+            ],
+            itemStyle: {
+                color: !isItemNameMatchesSearchFilters(item.name, searchValue) ? '#dee2e6' : getSpanColor(palette, item.name, item.total / (currentVal ? currentVal : rootVal) * 100)
+            }
+        };
+        data.push(temp);
+        for (const child of item.children || []){
+            recur(child);
+        }
+    };
+    // check is filteredJson is not empty before call recur
+    if (filteredJson.id) recur(filteredJson);
+    return data;
+}
+/**
+ * Transform query results to a tabular format for the table chart
+ */ export function tableRecursionJson(jsonObj, searchValue) {
+    const data = [];
+    const structuredJson = structuredClone(jsonObj);
+    const recur = (item)=>{
+        const temp = {
+            id: item.id,
+            name: item.name,
+            self: item.self,
+            total: item.total
+        };
+        if (isItemNameMatchesSearchFilters(temp.name, searchValue)) data.push(temp);
+        for (const child of item.children || []){
+            recur(child);
+        }
+    };
+    // check is structuredJson is not empty before call recur
+    if (structuredJson.id) recur(structuredJson);
+    return data;
+}
+// Checks if an item name matches all parts of a search value.
+function isItemNameMatchesSearchFilters(itemName, searchValue) {
+    if (searchValue === '') return true;
+    const filters = searchValue.trim().toLocaleLowerCase().split(/[^a-zA-Z0-9']+/).filter((s)=>s !== '');
+    if (filters.length === 0) {
+        return false;
+    } else {
+        return filters.every((filter)=>itemName.toLowerCase().includes(filter.trim()));
+    }
+}
+/**
+ * Finds the total sample value of the series data item with the specified name.
+ */ export function findTotalSampleByName(seriesData, name) {
+    if (name === undefined || name === 0) return undefined;
+    const item = seriesData.find((item)=>item.name === name);
+    const totalSample = item?.value[8];
+    return Number(totalSample);
+}
+
+//# sourceMappingURL=data-transform.js.map

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

@@ -0,0 +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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"}

package/lib/utils/format.d.ts

@@ -0,0 +1,3 @@
+export declare function formatNanoDuration(value: number): string;
+export declare function formatItemValue(unit: string | undefined, value: number): string;
+//# sourceMappingURL=format.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../../../src/utils/format.ts"],"names":[],"mappings":"AAeA,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CASxD;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAuB/E"}

package/lib/utils/format.js

@@ -0,0 +1,71 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { msToPrometheusDuration, formatDuration, formatValue } from '@perses-dev/core';
+export function formatNanoDuration(value) {
+    // The value to format is in nanoseconds
+    if (value < 1_000) {
+        return formatValue(value, {
+            unit: 'decimal',
+            decimalPlaces: 2,
+            shortValues: true
+        }) + 'ns';
+    } else if (value < 1_000_000) {
+        return formatValue(value / 1_000, {
+            unit: 'decimal',
+            decimalPlaces: 2,
+            shortValues: true
+        }) + 'μs';
+    } else {
+        return formatDuration(msToPrometheusDuration(value / 1_000_000));
+    }
+}
+export function formatItemValue(unit, value) {
+    let valueWithUnit = '';
+    switch(unit){
+        case 'count':
+            valueWithUnit = formatValue(value, {
+                unit: 'decimal',
+                decimalPlaces: 2,
+                shortValues: true
+            });
+            break;
+        case 'samples':
+            valueWithUnit = formatValue(value, {
+                unit: 'decimal',
+                decimalPlaces: 2,
+                shortValues: true
+            });
+            break;
+        case 'objects':
+            valueWithUnit = formatValue(value, {
+                unit: 'decimal',
+                decimalPlaces: 2,
+                shortValues: true
+            });
+            break;
+        case 'bytes':
+            valueWithUnit = formatValue(value, {
+                unit: 'bytes'
+            });
+            break;
+        case 'nanoseconds':
+            valueWithUnit = formatNanoDuration(value);
+            break;
+        default:
+            valueWithUnit = `${value} ${unit}`;
+            break;
+    }
+    return valueWithUnit;
+}
+
+//# sourceMappingURL=format.js.map

package/lib/utils/format.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/format.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 { msToPrometheusDuration, formatDuration, formatValue } from '@perses-dev/core';\n\nexport function formatNanoDuration(value: number): string {\n  // The value to format is in nanoseconds\n  if (value < 1_000) {\n    return formatValue(value, { unit: 'decimal', decimalPlaces: 2, shortValues: true }) + 'ns';\n  } else if (value < 1_000_000) {\n    return formatValue(value / 1_000, { unit: 'decimal', decimalPlaces: 2, shortValues: true }) + 'μs';\n  } else {\n    return formatDuration(msToPrometheusDuration(value / 1_000_000));\n  }\n}\n\nexport function formatItemValue(unit: string | undefined, value: number): string {\n  let valueWithUnit = '';\n  switch (unit) {\n    case 'count':\n      valueWithUnit = formatValue(value, { unit: 'decimal', decimalPlaces: 2, shortValues: true });\n      break;\n    case 'samples':\n      valueWithUnit = formatValue(value, { unit: 'decimal', decimalPlaces: 2, shortValues: true });\n      break;\n    case 'objects':\n      valueWithUnit = formatValue(value, { unit: 'decimal', decimalPlaces: 2, shortValues: true });\n      break;\n    case 'bytes':\n      valueWithUnit = formatValue(value, { unit: 'bytes' });\n      break;\n    case 'nanoseconds':\n      valueWithUnit = formatNanoDuration(value);\n      break;\n    default:\n      valueWithUnit = `${value} ${unit}`;\n      break;\n  }\n  return valueWithUnit;\n}\n"],"names":["msToPrometheusDuration","formatDuration","formatValue","formatNanoDuration","value","unit","decimalPlaces","shortValues","formatItemValue","valueWithUnit"],"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,sBAAsB,EAAEC,cAAc,EAAEC,WAAW,QAAQ,mBAAmB;AAEvF,OAAO,SAASC,mBAAmBC,KAAa;IAC9C,wCAAwC;IACxC,IAAIA,QAAQ,OAAO;QACjB,OAAOF,YAAYE,OAAO;YAAEC,MAAM;YAAWC,eAAe;YAAGC,aAAa;QAAK,KAAK;IACxF,OAAO,IAAIH,QAAQ,WAAW;QAC5B,OAAOF,YAAYE,QAAQ,OAAO;YAAEC,MAAM;YAAWC,eAAe;YAAGC,aAAa;QAAK,KAAK;IAChG,OAAO;QACL,OAAON,eAAeD,uBAAuBI,QAAQ;IACvD;AACF;AAEA,OAAO,SAASI,gBAAgBH,IAAwB,EAAED,KAAa;IACrE,IAAIK,gBAAgB;IACpB,OAAQJ;QACN,KAAK;YACHI,gBAAgBP,YAAYE,OAAO;gBAAEC,MAAM;gBAAWC,eAAe;gBAAGC,aAAa;YAAK;YAC1F;QACF,KAAK;YACHE,gBAAgBP,YAAYE,OAAO;gBAAEC,MAAM;gBAAWC,eAAe;gBAAGC,aAAa;YAAK;YAC1F;QACF,KAAK;YACHE,gBAAgBP,YAAYE,OAAO;gBAAEC,MAAM;gBAAWC,eAAe;gBAAGC,aAAa;YAAK;YAC1F;QACF,KAAK;YACHE,gBAAgBP,YAAYE,OAAO;gBAAEC,MAAM;YAAQ;YACnD;QACF,KAAK;YACHI,gBAAgBN,mBAAmBC;YACnC;QACF;YACEK,gBAAgB,GAAGL,MAAM,CAAC,EAAEC,MAAM;YAClC;IACJ;IACA,OAAOI;AACT"}

package/lib/utils/palette-gen.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Get span color, account for whether palette is 'package-name' or 'value'
+ */
+export declare function getSpanColor(palette: string, functionName: string, value: number): string;
+/**
+ * Generate a consistent color for displaying flame chart by total value
+ */
+export declare function getColorByValue(value: number): string;
+/**
+ * Generate a consistent span color for displaying flame chart by package-name
+ * (if function name includes 'error', it will have a red hue).
+ */
+export declare function getColorByPackageName(functionName: string, value: number): string;
+//# sourceMappingURL=palette-gen.d.ts.map

package/lib/utils/palette-gen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette-gen.d.ts","sourceRoot":"","sources":["../../../src/utils/palette-gen.ts"],"names":[],"mappings":"AAkCA;;GAEG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAMzF;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAIrD;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAMjF"}

package/lib/utils/palette-gen.js

@@ -0,0 +1,56 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { getConsistentColor } from './palette';
+const LESS_THAN_ONE_COLOR = '#dee2e6'; // use this color when the value is less than 1
+const MORE_THAN_HUNDRED_COLOR = '#ffbdbd'; // use this color when the value is more than 100
+const NOT_FOUND_COLOR = '#393d47';
+// Palette of color to display the flame chart by value
+const valueColorPalette = [
+    '#fff85b',
+    '#ffde4c',
+    '#ffc252',
+    '#ff8c00',
+    '#f08c00',
+    '#e67762',
+    '#ff8c00',
+    '#ff6f00',
+    '#ff7070',
+    '#ff3300',
+    '#ff004c'
+];
+/**
+ * Get span color, account for whether palette is 'package-name' or 'value'
+ */ export function getSpanColor(palette, functionName, value) {
+    if (palette === 'package-name') {
+        return getColorByPackageName(functionName, value);
+    }
+    return getColorByValue(value);
+}
+/**
+ * Generate a consistent color for displaying flame chart by total value
+ */ export function getColorByValue(value) {
+    if (value < 1) return LESS_THAN_ONE_COLOR;
+    if (value > 100) return MORE_THAN_HUNDRED_COLOR;
+    return valueColorPalette[Math.floor(value / (valueColorPalette.length - 1))] || NOT_FOUND_COLOR;
+}
+/**
+ * Generate a consistent span color for displaying flame chart by package-name
+ * (if function name includes 'error', it will have a red hue).
+ */ export function getColorByPackageName(functionName, value) {
+    // get package name from the function name.
+    // It is the substring between the last '/' and the first '.' or the end of the string
+    const packageName = functionName.split('/').pop()?.split('.')[0] || functionName;
+    return value < 1 ? LESS_THAN_ONE_COLOR : getConsistentColor(packageName, false);
+}
+
+//# sourceMappingURL=palette-gen.js.map

package/lib/utils/palette-gen.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/palette-gen.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 { getConsistentColor } from './palette';\n\nconst LESS_THAN_ONE_COLOR = '#dee2e6'; // use this color when the value is less than 1\nconst MORE_THAN_HUNDRED_COLOR = '#ffbdbd'; // use this color when the value is more than 100\nconst NOT_FOUND_COLOR = '#393d47';\n\n// Palette of color to display the flame chart by value\nconst valueColorPalette: string[] = [\n  '#fff85b',\n  '#ffde4c',\n  '#ffc252',\n  '#ff8c00',\n  '#f08c00',\n  '#e67762',\n  '#ff8c00',\n  '#ff6f00',\n  '#ff7070',\n  '#ff3300',\n  '#ff004c',\n];\n\n/**\n * Get span color, account for whether palette is 'package-name' or 'value'\n */\nexport function getSpanColor(palette: string, functionName: string, value: number): string {\n  if (palette === 'package-name') {\n    return getColorByPackageName(functionName, value);\n  }\n\n  return getColorByValue(value);\n}\n\n/**\n * Generate a consistent color for displaying flame chart by total value\n */\nexport function getColorByValue(value: number): string {\n  if (value < 1) return LESS_THAN_ONE_COLOR;\n  if (value > 100) return MORE_THAN_HUNDRED_COLOR;\n  return valueColorPalette[Math.floor(value / (valueColorPalette.length - 1))] || NOT_FOUND_COLOR;\n}\n\n/**\n * Generate a consistent span color for displaying flame chart by package-name\n * (if function name includes 'error', it will have a red hue).\n */\nexport function getColorByPackageName(functionName: string, value: number): string {\n  // get package name from the function name.\n  // It is the substring between the last '/' and the first '.' or the end of the string\n  const packageName = functionName.split('/').pop()?.split('.')[0] || functionName;\n\n  return value < 1 ? LESS_THAN_ONE_COLOR : getConsistentColor(packageName, false);\n}\n"],"names":["getConsistentColor","LESS_THAN_ONE_COLOR","MORE_THAN_HUNDRED_COLOR","NOT_FOUND_COLOR","valueColorPalette","getSpanColor","palette","functionName","value","getColorByPackageName","getColorByValue","Math","floor","length","packageName","split","pop"],"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,kBAAkB,QAAQ,YAAY;AAE/C,MAAMC,sBAAsB,WAAW,+CAA+C;AACtF,MAAMC,0BAA0B,WAAW,iDAAiD;AAC5F,MAAMC,kBAAkB;AAExB,uDAAuD;AACvD,MAAMC,oBAA8B;IAClC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AAED;;CAEC,GACD,OAAO,SAASC,aAAaC,OAAe,EAAEC,YAAoB,EAAEC,KAAa;IAC/E,IAAIF,YAAY,gBAAgB;QAC9B,OAAOG,sBAAsBF,cAAcC;IAC7C;IAEA,OAAOE,gBAAgBF;AACzB;AAEA;;CAEC,GACD,OAAO,SAASE,gBAAgBF,KAAa;IAC3C,IAAIA,QAAQ,GAAG,OAAOP;IACtB,IAAIO,QAAQ,KAAK,OAAON;IACxB,OAAOE,iBAAiB,CAACO,KAAKC,KAAK,CAACJ,QAASJ,CAAAA,kBAAkBS,MAAM,GAAG,CAAA,GAAI,IAAIV;AAClF;AAEA;;;CAGC,GACD,OAAO,SAASM,sBAAsBF,YAAoB,EAAEC,KAAa;IACvE,2CAA2C;IAC3C,sFAAsF;IACtF,MAAMM,cAAcP,aAAaQ,KAAK,CAAC,KAAKC,GAAG,IAAID,MAAM,IAAI,CAAC,EAAE,IAAIR;IAEpE,OAAOC,QAAQ,IAAIP,sBAAsBD,mBAAmBc,aAAa;AAC3E"}

package/lib/utils/palette.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Return a consistent color for (name, error) tuple
+ */
+export declare function getConsistentColor(name: string, error: boolean): string;
+//# sourceMappingURL=palette.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../../src/utils/palette.ts"],"names":[],"mappings":"AAiCA;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,CAQvE"}

package/lib/utils/palette.js

@@ -0,0 +1,51 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import ColorHash from 'color-hash';
+// Valid hue values are 0 to 360 and can be adjusted to control the generated colors.
+// More info: https://github.com/zenozeng/color-hash#custom-hue
+// Picked min of 20 and max of 360 to exclude common threshold colors (red).
+// Items with "error" in them will always be generated as red.
+const ERROR_HUE_CUTOFF = 20;
+const colorGenerator = new ColorHash({
+    hue: {
+        min: ERROR_HUE_CUTOFF,
+        max: 360
+    }
+});
+const redColorGenerator = new ColorHash({
+    hue: {
+        min: 0,
+        max: ERROR_HUE_CUTOFF
+    }
+});
+function computeConsistentColor(name, error) {
+    const [hue, saturation, lightness] = error ? redColorGenerator.hsl(name) : colorGenerator.hsl(name);
+    const saturationPercent = `${(saturation * 100).toFixed(0)}%`;
+    const lightnessPercent = `${(lightness * 100).toFixed(0)}%`;
+    return `hsla(${hue.toFixed(2)},${saturationPercent},${lightnessPercent},0.9)`;
+}
+// To check whether a color has already been generated for a given string.
+const colorLookup = {};
+/**
+ * Return a consistent color for (name, error) tuple
+ */ export function getConsistentColor(name, error) {
+    const key = `${name}_____${error}`;
+    let value = colorLookup[key];
+    if (!value) {
+        value = computeConsistentColor(name, error);
+        colorLookup[key] = value;
+    }
+    return value;
+}
+
+//# sourceMappingURL=palette.js.map

package/lib/utils/palette.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/palette.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 ColorHash from 'color-hash';\n\n// Valid hue values are 0 to 360 and can be adjusted to control the generated colors.\n// More info: https://github.com/zenozeng/color-hash#custom-hue\n// Picked min of 20 and max of 360 to exclude common threshold colors (red).\n// Items with \"error\" in them will always be generated as red.\nconst ERROR_HUE_CUTOFF = 20;\nconst colorGenerator = new ColorHash({ hue: { min: ERROR_HUE_CUTOFF, max: 360 } });\nconst redColorGenerator = new ColorHash({ hue: { min: 0, max: ERROR_HUE_CUTOFF } });\n\nfunction computeConsistentColor(name: string, error: boolean): string {\n  const [hue, saturation, lightness] = error ? redColorGenerator.hsl(name) : colorGenerator.hsl(name);\n  const saturationPercent = `${(saturation * 100).toFixed(0)}%`;\n  const lightnessPercent = `${(lightness * 100).toFixed(0)}%`;\n  return `hsla(${hue.toFixed(2)},${saturationPercent},${lightnessPercent},0.9)`;\n}\n\n// To check whether a color has already been generated for a given string.\nconst colorLookup: Record<string, string> = {};\n\n/**\n * Return a consistent color for (name, error) tuple\n */\nexport function getConsistentColor(name: string, error: boolean): string {\n  const key = `${name}_____${error}`;\n  let value = colorLookup[key];\n  if (!value) {\n    value = computeConsistentColor(name, error);\n    colorLookup[key] = value;\n  }\n  return value;\n}\n"],"names":["ColorHash","ERROR_HUE_CUTOFF","colorGenerator","hue","min","max","redColorGenerator","computeConsistentColor","name","error","saturation","lightness","hsl","saturationPercent","toFixed","lightnessPercent","colorLookup","getConsistentColor","key","value"],"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,OAAOA,eAAe,aAAa;AAEnC,qFAAqF;AACrF,+DAA+D;AAC/D,4EAA4E;AAC5E,8DAA8D;AAC9D,MAAMC,mBAAmB;AACzB,MAAMC,iBAAiB,IAAIF,UAAU;IAAEG,KAAK;QAAEC,KAAKH;QAAkBI,KAAK;IAAI;AAAE;AAChF,MAAMC,oBAAoB,IAAIN,UAAU;IAAEG,KAAK;QAAEC,KAAK;QAAGC,KAAKJ;IAAiB;AAAE;AAEjF,SAASM,uBAAuBC,IAAY,EAAEC,KAAc;IAC1D,MAAM,CAACN,KAAKO,YAAYC,UAAU,GAAGF,QAAQH,kBAAkBM,GAAG,CAACJ,QAAQN,eAAeU,GAAG,CAACJ;IAC9F,MAAMK,oBAAoB,GAAG,AAACH,CAAAA,aAAa,GAAE,EAAGI,OAAO,CAAC,GAAG,CAAC,CAAC;IAC7D,MAAMC,mBAAmB,GAAG,AAACJ,CAAAA,YAAY,GAAE,EAAGG,OAAO,CAAC,GAAG,CAAC,CAAC;IAC3D,OAAO,CAAC,KAAK,EAAEX,IAAIW,OAAO,CAAC,GAAG,CAAC,EAAED,kBAAkB,CAAC,EAAEE,iBAAiB,KAAK,CAAC;AAC/E;AAEA,0EAA0E;AAC1E,MAAMC,cAAsC,CAAC;AAE7C;;CAEC,GACD,OAAO,SAASC,mBAAmBT,IAAY,EAAEC,KAAc;IAC7D,MAAMS,MAAM,GAAGV,KAAK,KAAK,EAAEC,OAAO;IAClC,IAAIU,QAAQH,WAAW,CAACE,IAAI;IAC5B,IAAI,CAACC,OAAO;QACVA,QAAQZ,uBAAuBC,MAAMC;QACrCO,WAAW,CAACE,IAAI,GAAGC;IACrB;IACA,OAAOA;AACT"}

package/lib/utils/series-tooltip.d.ts

@@ -0,0 +1,3 @@
+import { SeriesSample } from './data-model';
+export declare function getSeriesTooltip(data: SeriesSample, unit: string, name: string, color: string, divColor: string): string;
+//# sourceMappingURL=series-tooltip.d.ts.map

package/lib/utils/series-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"series-tooltip.d.ts","sourceRoot":"","sources":["../../../src/utils/series-tooltip.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAG5C,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,YAAY,EAClB,IAAI,EAAE,MAAM,EACZ,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,GACf,MAAM,CAwBR"}

package/lib/utils/series-tooltip.js

@@ -0,0 +1,43 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { formatItemValue } from './format';
+export function getSeriesTooltip(data, unit, name, color, divColor) {
+    const date = new Date(data.value[0]);
+    const formattedDate = date.toLocaleDateString('en-US', {
+        month: 'short',
+        day: '2-digit',
+        year: 'numeric'
+    });
+    const formattedTime = date.toLocaleString('en-US', {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false
+    });
+    return `
+    <div>
+      <div>
+        ${formattedDate} - <b>${formattedTime}</b>
+      </div>
+      <hr style="border: none; border-top: 1px solid ${divColor}" />
+      <div style="display: flex; align-items: center">
+        <div style="margin-right: 8px; display: inline-block; width: 11px; height: 11px; border-radius: 2px; background-color: ${color}"></div>
+        <div style="width: 100%; display: flex; justify-content: space-between" >
+            <span style="margin-right: 8px">${name}</span> <b>${formatItemValue(unit, data.value[1])}</b>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+//# sourceMappingURL=series-tooltip.js.map

package/lib/utils/series-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/series-tooltip.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 { SeriesSample } from './data-model';\nimport { formatItemValue } from './format';\n\nexport function getSeriesTooltip(\n  data: SeriesSample,\n  unit: string,\n  name: string,\n  color: string,\n  divColor: string\n): string {\n  const date = new Date(data.value[0]);\n  const formattedDate = date.toLocaleDateString('en-US', { month: 'short', day: '2-digit', year: 'numeric' });\n  const formattedTime = date.toLocaleString('en-US', {\n    hour: '2-digit',\n    minute: '2-digit',\n    second: '2-digit',\n    hour12: false,\n  });\n\n  return `\n    <div>\n      <div>\n        ${formattedDate} - <b>${formattedTime}</b>\n      </div>\n      <hr style=\"border: none; border-top: 1px solid ${divColor}\" />\n      <div style=\"display: flex; align-items: center\">\n        <div style=\"margin-right: 8px; display: inline-block; width: 11px; height: 11px; border-radius: 2px; background-color: ${color}\"></div>\n        <div style=\"width: 100%; display: flex; justify-content: space-between\" >\n            <span style=\"margin-right: 8px\">${name}</span> <b>${formatItemValue(unit, data.value[1])}</b>\n        </div>\n      </div>\n    </div>\n  `;\n}\n"],"names":["formatItemValue","getSeriesTooltip","data","unit","name","color","divColor","date","Date","value","formattedDate","toLocaleDateString","month","day","year","formattedTime","toLocaleString","hour","minute","second","hour12"],"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;AAGjC,SAASA,eAAe,QAAQ,WAAW;AAE3C,OAAO,SAASC,iBACdC,IAAkB,EAClBC,IAAY,EACZC,IAAY,EACZC,KAAa,EACbC,QAAgB;IAEhB,MAAMC,OAAO,IAAIC,KAAKN,KAAKO,KAAK,CAAC,EAAE;IACnC,MAAMC,gBAAgBH,KAAKI,kBAAkB,CAAC,SAAS;QAAEC,OAAO;QAASC,KAAK;QAAWC,MAAM;IAAU;IACzG,MAAMC,gBAAgBR,KAAKS,cAAc,CAAC,SAAS;QACjDC,MAAM;QACNC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;IACV;IAEA,OAAO,CAAC;;;QAGF,EAAEV,cAAc,MAAM,EAAEK,cAAc;;qDAEO,EAAET,SAAS;;+HAE+D,EAAED,MAAM;;4CAE3F,EAAED,KAAK,WAAW,EAAEJ,gBAAgBG,MAAMD,KAAKO,KAAK,CAAC,EAAE,EAAE;;;;EAInG,CAAC;AACH"}

package/lib/utils/tooltip.d.ts

@@ -0,0 +1,6 @@
+import { FlameChartSample } from './data-model';
+/**
+ * Generates a tooltip for the flame chart items.
+ */
+export declare function generateTooltip(params: FlameChartSample, unit: string | undefined): string;
+//# sourceMappingURL=tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/utils/tooltip.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAGhD;;GAEG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAW1F"}

package/lib/utils/tooltip.js

@@ -0,0 +1,29 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import * as echarts from 'echarts';
+import { formatItemValue } from './format';
+/**
+ * Generates a tooltip for the flame chart items.
+ */ export function generateTooltip(params, unit) {
+    const totalPercentage = Number(params.value[4]);
+    const selfPercentage = Number(params.value[5]);
+    const functionName = params.value[6];
+    const total = Number(params.value[8]);
+    const self = Number(params.value[7]);
+    return `${functionName}<br/><br/>
+            Total: ${formatItemValue(unit, total)} (${totalPercentage.toFixed(2)}%)<br/>
+            Self: ${formatItemValue(unit, self)} (${selfPercentage.toFixed(2)}%)<br/>
+            Samples: ${echarts.format.addCommas(total)}`;
+}
+
+//# sourceMappingURL=tooltip.js.map

package/lib/utils/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/tooltip.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 * as echarts from 'echarts';\nimport { FlameChartSample } from './data-model';\nimport { formatItemValue } from './format';\n\n/**\n * Generates a tooltip for the flame chart items.\n */\nexport function generateTooltip(params: FlameChartSample, unit: string | undefined): string {\n  const totalPercentage = Number(params.value[4]);\n  const selfPercentage = Number(params.value[5]);\n  const functionName = params.value[6];\n  const total = Number(params.value[8]);\n  const self = Number(params.value[7]);\n\n  return `${functionName}<br/><br/>\n            Total: ${formatItemValue(unit, total)} (${totalPercentage.toFixed(2)}%)<br/>\n            Self: ${formatItemValue(unit, self)} (${selfPercentage.toFixed(2)}%)<br/>\n            Samples: ${echarts.format.addCommas(total)}`;\n}\n"],"names":["echarts","formatItemValue","generateTooltip","params","unit","totalPercentage","Number","value","selfPercentage","functionName","total","self","toFixed","format","addCommas"],"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,YAAYA,aAAa,UAAU;AAEnC,SAASC,eAAe,QAAQ,WAAW;AAE3C;;CAEC,GACD,OAAO,SAASC,gBAAgBC,MAAwB,EAAEC,IAAwB;IAChF,MAAMC,kBAAkBC,OAAOH,OAAOI,KAAK,CAAC,EAAE;IAC9C,MAAMC,iBAAiBF,OAAOH,OAAOI,KAAK,CAAC,EAAE;IAC7C,MAAME,eAAeN,OAAOI,KAAK,CAAC,EAAE;IACpC,MAAMG,QAAQJ,OAAOH,OAAOI,KAAK,CAAC,EAAE;IACpC,MAAMI,OAAOL,OAAOH,OAAOI,KAAK,CAAC,EAAE;IAEnC,OAAO,GAAGE,aAAa;mBACN,EAAER,gBAAgBG,MAAMM,OAAO,EAAE,EAAEL,gBAAgBO,OAAO,CAAC,GAAG;kBAC/D,EAAEX,gBAAgBG,MAAMO,MAAM,EAAE,EAAEH,eAAeI,OAAO,CAAC,GAAG;qBACzD,EAAEZ,QAAQa,MAAM,CAACC,SAAS,CAACJ,QAAQ;AACxD"}

package/lib/utils/ui-text.d.ts

@@ -0,0 +1,9 @@
+export declare const TOOLTIP_TEXT: {
+    resetFlameGraph: string;
+    changeColorSheme: string;
+    exportData: string;
+    showTable: string;
+    showFlameGraph: string;
+    showBoth: string;
+};
+//# sourceMappingURL=ui-text.d.ts.map

package/lib/utils/ui-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-text.d.ts","sourceRoot":"","sources":["../../../src/utils/ui-text.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY;;;;;;;CAOxB,CAAC"}

package/lib/utils/ui-text.js

@@ -0,0 +1,22 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export const TOOLTIP_TEXT = {
+    resetFlameGraph: 'Reset graph',
+    changeColorSheme: 'Change color sheme',
+    exportData: 'Export profile data',
+    showTable: 'Only show table',
+    showFlameGraph: 'Only show flame graph',
+    showBoth: 'Show both the table and flame graph'
+};
+
+//# sourceMappingURL=ui-text.js.map

package/lib/utils/ui-text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/ui-text.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\nexport const TOOLTIP_TEXT = {\n  resetFlameGraph: 'Reset graph',\n  changeColorSheme: 'Change color sheme',\n  exportData: 'Export profile data',\n  showTable: 'Only show table',\n  showFlameGraph: 'Only show flame graph',\n  showBoth: 'Show both the table and flame graph',\n};\n"],"names":["TOOLTIP_TEXT","resetFlameGraph","changeColorSheme","exportData","showTable","showFlameGraph","showBoth"],"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,OAAO,MAAMA,eAAe;IAC1BC,iBAAiB;IACjBC,kBAAkB;IAClBC,YAAY;IACZC,WAAW;IACXC,gBAAgB;IAChBC,UAAU;AACZ,EAAE"}

package/lib/utils/utils.d.ts

@@ -0,0 +1,36 @@
+import { FlameChartOptionsEditorProps } from '../flame-chart-model';
+/**
+ * Hook to manage `palette` state.
+ */
+export declare function usePaletteState(props: FlameChartOptionsEditorProps): {
+    handlePaletteChange: (newPalette: 'package-name' | 'value') => void;
+};
+/**
+ * Hook to manage `showSettings` state.
+ */
+export declare function useShowSettingsState(props: FlameChartOptionsEditorProps): {
+    handleShowSettingsChange: (newValue: boolean) => void;
+};
+/**
+ * Hook to manage `showSeries` state.
+ */
+export declare function useShowSeriesState(props: FlameChartOptionsEditorProps): {
+    handleShowSeriesChange: (newValue: boolean) => void;
+};
+/**
+ * Hook to manage `showTable` state.
+ */
+export declare function useShowTableState(props: FlameChartOptionsEditorProps): {
+    handleShowTableChange: (newValue: boolean) => void;
+};
+/**
+ * Hook to manage `showFlameGraph` state.
+ */
+export declare function useShowFlameGraphState(props: FlameChartOptionsEditorProps): {
+    handleShowFlameGraphChange: (newValue: boolean) => void;
+};
+/**
+ * Reset all settings to their initial values
+ */
+export declare function resetSettings(props: FlameChartOptionsEditorProps): void;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +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"}