@kylincloud/flamegraph 0.35.6

package/src/format/format.ts

@@ -0,0 +1,303 @@
+/* eslint-disable max-classes-per-file */
+import { Units } from '../models/units';
+
+export function numberWithCommas(x: number): string {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+export function formatPercent(ratio: number) {
+  const percent = ratioToPercent(ratio);
+  return `${percent}%`;
+}
+
+export function ratioToPercent(ratio: number) {
+  return Math.round(10000 * ratio) / 100;
+}
+
+export function diffPercent(leftPercent: number, rightPercent: number): number {
+  // difference between 2 percents
+  // https://en.wikipedia.org/wiki/Relative_change_and_difference
+  return ((rightPercent - leftPercent) / leftPercent) * 100;
+}
+
+export function getFormatter(max: number, sampleRate: number, unit: Units) {
+  switch (unit) {
+    case 'samples':
+      return new DurationFormatter(max / sampleRate);
+    case 'objects':
+      return new ObjectsFormatter(max);
+    case 'goroutines':
+      return new ObjectsFormatter(max);
+    case 'bytes':
+      return new BytesFormatter(max);
+    case 'lock_nanoseconds':
+      return new NanosecondsFormatter(max);
+    case 'lock_samples':
+      return new ObjectsFormatter(max);
+    case 'trace_samples':
+      return new DurationFormatter(max / sampleRate, '', true);
+    case 'exceptions':
+      return new ObjectsFormatter(max);
+    default:
+      console.warn(`Unsupported unit: '${unit}'. Defaulting to ''`);
+      return new DurationFormatter(max / sampleRate, ' ');
+  }
+}
+
+// this is a class and not a function because we can save some time by
+//   precalculating divider and suffix and not doing it on each iteration
+export class DurationFormatter {
+  divider = 1;
+
+  enableSubsecondPrecision = false;
+
+  suffix = 'second';
+
+  durations: [number, string][] = [
+    [60, 'minute'],
+    [60, 'hour'],
+    [24, 'day'],
+    [30, 'month'],
+    [12, 'year'],
+  ];
+
+  units = '';
+
+  constructor(
+    maxDur: number,
+    units?: string,
+    enableSubsecondPrecision?: boolean
+  ) {
+    if (enableSubsecondPrecision) {
+      this.enableSubsecondPrecision = enableSubsecondPrecision;
+      this.durations = [[1000, 'ms'], [1000, 'second'], ...this.durations];
+      this.suffix = `μs`;
+      maxDur *= 1e6; // Converting seconds to μs
+    }
+    this.units = units || '';
+    // eslint-disable-next-line no-plusplus
+    for (let i = 0; i < this.durations.length; i++) {
+      const level = this.durations[i];
+      if (!level) {
+        console.warn('Could not calculate level');
+        break;
+      }
+
+      if (maxDur >= level[0]) {
+        this.divider *= level[0];
+        maxDur /= level[0];
+        // eslint-disable-next-line prefer-destructuring
+        this.suffix = level[1];
+      } else {
+        break;
+      }
+    }
+  }
+
+  format(samples: number, sampleRate: number, withUnits = true): string {
+    if (this.enableSubsecondPrecision) {
+      sampleRate /= 1e6;
+    }
+    const n = samples / sampleRate / this.divider;
+    let nStr = n.toFixed(2);
+
+    if (n === 0) {
+      nStr = '0.00';
+    } else if (n >= 0 && n < 0.01) {
+      nStr = '< 0.01';
+    } else if (n <= 0 && n > -0.01) {
+      nStr = '< 0.01';
+    }
+
+    return withUnits
+      ? `${nStr} ${
+          this.units ||
+          `${this.suffix}${n === 1 || this.suffix.length === 2 ? '' : 's'}`
+        }`
+      : nStr;
+  }
+
+  formatPrecise(samples: number, sampleRate: number) {
+    if (this.enableSubsecondPrecision) {
+      sampleRate /= 1e6;
+    }
+    const n = samples / sampleRate / this.divider;
+
+    return `${parseFloat(n.toFixed(5))} ${
+      this.units ||
+      `${this.suffix}${n === 1 || this.suffix.length === 2 ? '' : 's'}`
+    }`;
+  }
+}
+
+// this is a class and not a function because we can save some time by
+//   precalculating divider and suffix and not doing it on each iteration
+export class NanosecondsFormatter {
+  divider = 1;
+
+  multiplier = 1;
+
+  suffix = 'second';
+
+  durations: [number, string][] = [
+    [60, 'minute'],
+    [60, 'hour'],
+    [24, 'day'],
+    [30, 'month'],
+    [12, 'year'],
+  ];
+
+  constructor(maxDur: number) {
+    maxDur /= 1000000000;
+    // eslint-disable-next-line no-plusplus
+    for (let i = 0; i < this.durations.length; i++) {
+      const level = this.durations[i];
+      if (!level) {
+        console.warn('Could not calculate level');
+        break;
+      }
+
+      if (maxDur >= level[0]) {
+        this.divider *= level[0];
+        maxDur /= level[0];
+        // eslint-disable-next-line prefer-destructuring
+        this.suffix = level[1];
+      } else {
+        break;
+      }
+    }
+  }
+
+  format(samples: number) {
+    const n = samples / 1000000000 / this.divider;
+    let nStr = n.toFixed(2);
+
+    if (n >= 0 && n < 0.01) {
+      nStr = '< 0.01';
+    } else if (n <= 0 && n > -0.01) {
+      nStr = '< 0.01';
+    }
+
+    return `${nStr} ${this.suffix}${n === 1 ? '' : 's'}`;
+  }
+
+  formatPrecise(samples: number) {
+    const n = samples / 1000000000 / this.divider;
+
+    return `${parseFloat(n.toFixed(5))} ${this.suffix}${n === 1 ? '' : 's'}`;
+  }
+}
+
+export class ObjectsFormatter {
+  divider = 1;
+
+  suffix = '';
+
+  objects: [number, string][] = [
+    [1000, 'K'],
+    [1000, 'M'],
+    [1000, 'G'],
+    [1000, 'T'],
+    [1000, 'P'],
+  ];
+
+  constructor(maxObjects: number) {
+    // eslint-disable-next-line no-plusplus
+    for (let i = 0; i < this.objects.length; i++) {
+      const level = this.objects[i];
+      if (!level) {
+        console.warn('Could not calculate level');
+        break;
+      }
+
+      if (maxObjects >= level[0]) {
+        this.divider *= level[0];
+        maxObjects /= level[0];
+        // eslint-disable-next-line prefer-destructuring
+        this.suffix = level[1];
+      } else {
+        break;
+      }
+    }
+  }
+
+  // TODO:
+  // how to indicate that sampleRate doesn't matter?
+  format(samples: number) {
+    const n = samples / this.divider;
+    let nStr = n.toFixed(2);
+
+    if (n >= 0 && n < 0.01) {
+      nStr = '< 0.01';
+    } else if (n <= 0 && n > -0.01) {
+      nStr = '< 0.01';
+    }
+    return `${nStr} ${this.suffix}`;
+  }
+
+  formatPrecise(samples: number) {
+    const n = samples / this.divider;
+
+    return `${parseFloat(n.toFixed(5))} ${this.suffix}`;
+  }
+}
+
+export class BytesFormatter {
+  divider = 1;
+
+  suffix = 'bytes';
+
+  bytes: [number, string][] = [
+    [1024, 'KB'],
+    [1024, 'MB'],
+    [1024, 'GB'],
+    [1024, 'TB'],
+    [1024, 'PB'],
+  ];
+
+  constructor(maxBytes: number) {
+    // eslint-disable-next-line no-plusplus
+    for (let i = 0; i < this.bytes.length; i++) {
+      const level = this.bytes[i];
+      if (!level) {
+        console.warn('Could not calculate level');
+        break;
+      }
+
+      if (maxBytes >= level[0]) {
+        this.divider *= level[0];
+        maxBytes /= level[0];
+
+        // eslint-disable-next-line prefer-destructuring
+        const suffix = level[1];
+        if (!suffix) {
+          console.warn('Could not calculate suffix');
+          this.suffix = '';
+        } else {
+          this.suffix = suffix;
+        }
+      } else {
+        break;
+      }
+    }
+  }
+
+  format(samples: number) {
+    const n = samples / this.divider;
+    let nStr = n.toFixed(2);
+
+    if (n >= 0 && n < 0.01) {
+      nStr = '< 0.01';
+    } else if (n <= 0 && n > -0.01) {
+      nStr = '< 0.01';
+    }
+
+    return `${nStr} ${this.suffix}`;
+  }
+
+  formatPrecise(samples: number) {
+    const n = samples / this.divider;
+
+    return `${parseFloat(n.toFixed(5))} ${this.suffix}`;
+  }
+}

package/src/globals.d.ts

@@ -0,0 +1,13 @@
+// src/globals.d.ts
+declare module '*.module.scss';
+declare module '*.module.css';
+declare module '*.scss';
+declare module '*.css';
+
+declare module '*.svg' {
+  import * as React from 'react';
+  const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement>
+  >;
+  export default ReactComponent;
+}

package/src/i18n.tsx

@@ -0,0 +1,293 @@
+// src/i18n.tsx
+import React, { createContext, useContext } from 'react';
+import type { Units } from './models';
+
+export type TooltipUnitMessages = {
+  percent: string;
+  formattedValue: string;
+  total: string;
+};
+
+export type FlamegraphMessages = {
+  // 表格列
+  location: string;
+  self: string;
+  total: string;
+  baseline: string;
+  comparison: string;
+  diff: string;
+
+  // 表格空状态
+  noItemsFound: string;
+
+  // diff 标签
+  diffNew: string;
+  diffRemoved: string;
+
+  // Tooltip 相关
+  tooltipSamples: string;
+  tooltipUnitTitles: Record<Units, TooltipUnitMessages>;
+
+  // 上下文菜单 / 工具栏
+  resetView: string;
+  collapseNodesAbove: string;
+  copyFunctionName: string;
+  highlightSimilarNodes: string;
+  clearHighlight: string;
+  openInSandwichView: string;
+  showTextTailFirst: string;
+  showTextHeadFirst: string;
+
+  // 工具栏 fit 模式
+  headFirst: string;
+  tailFirst: string;
+
+  // Tooltip 底部说明
+  clickToHighlightNode: string;
+  rightClickForMoreNodeOptions: string;
+
+  // 视图切换按钮
+  viewTable: string;
+  viewTableAndFlamegraph: string;
+  viewFlamegraph: string;
+  viewSandwich: string;
+  viewGraphviz: string;
+  more: string;
+
+  // Diff 图例 & 调色板
+  diffLegendRemovedLabel: string;
+  diffLegendAddedLabel: string;
+  diffLegendSelectPalette: string;
+  paletteDefaultName: string;
+  paletteColorBlindName: string;
+
+  // 搜索框 & 多视图搜索联动
+  searchPlaceholder: string;
+  syncSearchBars: string;
+  unsyncSearchBars: string;
+};
+
+const defaultTooltipUnitTitles: Record<Units, TooltipUnitMessages> = {
+  objects: {
+    percent: '% of objects in RAM',
+    formattedValue: 'Objects in RAM',
+    total: '% of total RAM',
+  },
+  goroutines: {
+    percent: '% of goroutines',
+    formattedValue: 'Goroutines',
+    total: '% of total goroutines',
+  },
+  bytes: {
+    percent: '% of RAM',
+    formattedValue: 'RAM',
+    total: '% of total bytes',
+  },
+  samples: {
+    percent: 'Share of CPU',
+    formattedValue: 'CPU Time',
+    total: '% of total CPU',
+  },
+  lock_nanoseconds: {
+    percent: '% of Time spent',
+    formattedValue: 'Time',
+    total: '% of total seconds',
+  },
+  lock_samples: {
+    percent: '% of contended locks',
+    formattedValue: 'Contended locks',
+    total: '% of total locks',
+  },
+  trace_samples: {
+    percent: '% of time',
+    formattedValue: 'Samples',
+    total: '% of total samples',
+  },
+  exceptions: {
+    percent: '% of thrown exceptions',
+    formattedValue: 'Thrown exceptions',
+    total: '% of total thrown exceptions',
+  },
+  unknown: {
+    percent: 'Percentage',
+    formattedValue: 'Units',
+    total: '% of total units',
+  },
+};
+
+const zhCNTooltipUnitTitles: Record<Units, TooltipUnitMessages> = {
+  objects: {
+    percent: 'RAM 中对象占比',
+    formattedValue: 'RAM 中对象数',
+    total: '占总 RAM 的百分比',
+  },
+  goroutines: {
+    percent: '协程占比',
+    formattedValue: '协程数量',
+    total: '占协程总数的百分比',
+  },
+  bytes: {
+    percent: 'RAM 占比',
+    formattedValue: 'RAM',
+    total: '占总字节数的百分比',
+  },
+  samples: {
+    percent: 'CPU 占比',
+    formattedValue: 'CPU 时间',
+    total: '占总 CPU 的百分比',
+  },
+  lock_nanoseconds: {
+    percent: '耗时占比',
+    formattedValue: '时间',
+    total: '占总秒数的百分比',
+  },
+  lock_samples: {
+    percent: '锁竞争事件占比',
+    formattedValue: '锁竞争事件数',
+    total: '占锁竞争总数的百分比',
+  },
+  trace_samples: {
+    percent: '时间占比',
+    formattedValue: '样本数',
+    total: '占样本总数的百分比',
+  },
+  exceptions: {
+    percent: '异常抛出占比',
+    formattedValue: '异常数',
+    total: '占异常总数的百分比',
+  },
+  unknown: {
+    percent: '百分比',
+    formattedValue: '单位',
+    total: '占单位总量的百分比',
+  },
+};
+
+export const defaultMessages: FlamegraphMessages = {
+  location: 'Location',
+  self: 'Self',
+  total: 'Total',
+  baseline: 'Baseline',
+  comparison: 'Comparison',
+  diff: 'Diff',
+
+  noItemsFound: 'No items found',
+
+  diffNew: '(new)',
+  diffRemoved: '(removed)',
+
+  tooltipSamples: 'Samples:',
+  tooltipUnitTitles: defaultTooltipUnitTitles,
+
+  resetView: 'Reset View',
+  collapseNodesAbove: 'Collapse nodes above',
+  copyFunctionName: 'Copy function name',
+  highlightSimilarNodes: 'Highlight similar nodes',
+  clearHighlight: 'Clear highlight',
+  openInSandwichView: 'Open in sandwich view',
+  showTextTailFirst: 'Show text tail first',
+  showTextHeadFirst: 'Show text head first',
+
+  headFirst: 'Head first',
+  tailFirst: 'Tail first',
+
+  clickToHighlightNode: 'Click to highlight node in flamegraph',
+  rightClickForMoreNodeOptions: 'Right click for more node viewing options',
+
+  viewTable: 'Table',
+  viewTableAndFlamegraph: 'Table and Flamegraph',
+  viewFlamegraph: 'Flamegraph',
+  viewSandwich: 'Sandwich',
+  viewGraphviz: 'GraphViz',
+  more: 'More',
+
+  diffLegendRemovedLabel: '(-) Removed',
+  diffLegendAddedLabel: 'Added (+)',
+  diffLegendSelectPalette: 'Select a palette',
+  paletteDefaultName: 'Default',
+  paletteColorBlindName: 'Color Blind',
+
+  // 搜索框 & 多视图搜索联动
+  searchPlaceholder: 'Search...',
+  syncSearchBars: 'Sync Search Bars',
+  unsyncSearchBars: 'Unsync Search Bars'
+};
+
+export const zhCNMessages: FlamegraphMessages = {
+  ...defaultMessages,
+  location: '位置',
+  self: '自身',
+  total: '总计',
+  baseline: '基线',
+  comparison: '对比',
+  diff: '差异',
+
+  noItemsFound: '没有找到任何条目',
+
+  diffNew: '(新增)',
+  diffRemoved: '(移除)',
+
+  tooltipSamples: '样本数:',
+  tooltipUnitTitles: zhCNTooltipUnitTitles,
+
+  resetView: '重置视图',
+  collapseNodesAbove: '收起上方节点',
+  copyFunctionName: '复制函数名',
+  highlightSimilarNodes: '高亮相似节点',
+  clearHighlight: '清除高亮',
+  openInSandwichView: '在 sandwich 视图中查看',
+  showTextTailFirst: '显示文本尾部优先',
+  showTextHeadFirst: '显示文本头部优先',
+
+  headFirst: '从头部开始显示',
+  tailFirst: '从尾部开始显示',
+
+  clickToHighlightNode: '点击火焰图节点高亮',
+  rightClickForMoreNodeOptions: '右键查看更多节点选项',
+
+  viewTable: '表格',
+  viewTableAndFlamegraph: '表格 + 火焰图',
+  viewFlamegraph: '火焰图',
+  viewSandwich: '三明治视图',
+  viewGraphviz: '调用图 (GraphViz)',
+  more: '更多',
+
+  diffLegendRemovedLabel: '(-) 减少',
+  diffLegendAddedLabel: '增加 (+)',
+  diffLegendSelectPalette: '选择颜色方案',
+  paletteDefaultName: '默认',
+  paletteColorBlindName: '色盲模式',
+
+  // 搜索框 & 多视图搜索联动
+  searchPlaceholder: '搜索...',
+  syncSearchBars: '同步搜索栏',
+  unsyncSearchBars: '取消同步搜索栏'
+};
+
+const I18nContext = createContext<FlamegraphMessages>(defaultMessages);
+
+export type FlamegraphI18nProviderProps = {
+  messages?: Partial<FlamegraphMessages>;
+  children: React.ReactNode;
+};
+
+export const FlamegraphI18nProvider: React.FC<FlamegraphI18nProviderProps> = ({
+  messages,
+  children,
+}) => {
+  const value = React.useMemo(
+    () => ({
+      ...defaultMessages,
+      ...messages,
+      tooltipUnitTitles: {
+        ...defaultMessages.tooltipUnitTitles,
+        ...(messages?.tooltipUnitTitles ?? {}),
+      },
+    }),
+    [messages]
+  );
+
+  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
+};
+
+export const useFlamegraphI18n = () => useContext(I18nContext);

package/src/index.node.ts

@@ -0,0 +1,19 @@
+/* eslint-disable import/prefer-default-export */
+// eslint-disable-next-line import/no-extraneous-dependencies
+import Box from './shims/Box';
+import Flamegraph from './FlameGraph/FlameGraphComponent/Flamegraph';
+import { DefaultPalette } from './FlameGraph/FlameGraphComponent/colorPalette';
+import { FlamegraphRenderer } from './FlamegraphRenderer';
+import { convertJaegerTraceToProfile } from './convert/convertJaegerTraceToProfile';
+import { diffTwoProfiles } from './convert/diffTwoProfiles';
+import { subtract } from './convert/subtract';
+
+export {
+  Flamegraph,
+  DefaultPalette,
+  FlamegraphRenderer,
+  Box,
+  convertJaegerTraceToProfile,
+  diffTwoProfiles,
+  subtract,
+};