@kylincloud/flamegraph 0.35.6

package/src/models/spyName.ts

@@ -0,0 +1,32 @@
+import { z } from 'zod';
+
+export type SpyNameFirstClassType = typeof SpyNameFirstClass[number];
+
+export const SpyNameFirstClass = [
+  'dotnetspy',
+  'ebpfspy',
+  'gospy',
+  'phpspy',
+  'pyspy',
+  'rbspy',
+  'nodespy',
+  'javaspy',
+  'pyroscope-rs',
+] as const;
+
+export const SpyNameOther = [
+  'scrape', // for compability purposes, it should be golang
+  'tracing',
+  'unknown',
+] as const;
+
+export const AllSpyNames = [...SpyNameFirstClass, ...SpyNameOther] as const;
+
+export const SpyNameSchema = z.preprocess((val) => {
+  if (!val || !AllSpyNames.includes(val as typeof AllSpyNames[number])) {
+    return 'unknown';
+  }
+  return val;
+}, z.enum(AllSpyNames).default('unknown'));
+
+export type SpyName = z.infer<typeof SpyNameSchema>;

package/src/models/trace.ts

@@ -0,0 +1,45 @@
+import { z } from 'zod';
+
+const ReferencesSchema = z.object({
+  refType: z.string(),
+  traceID: z.string(),
+  spanID: z.string(),
+});
+
+const TagsSchema = z.object({
+  key: z.string(),
+  type: z.string(),
+  value: z.union([z.boolean(), z.number(), z.string()]),
+});
+
+const TraceSpanSchema = z.object({
+  traceID: z.string(),
+  spanID: z.string(),
+  flags: z.string(),
+  operationName: z.string(),
+  references: z.array(ReferencesSchema),
+  startTime: z.number(),
+  duration: z.number(),
+  tags: z.array(TagsSchema),
+  logs: z.object({
+    timestamp: z.number(),
+    fields: z.array(TagsSchema),
+  }),
+  processID: z.string(),
+  warnings: z.any(),
+});
+
+const ProcessSchema = z.object({
+  serviceName: z.string(),
+  tags: z.array(TagsSchema),
+});
+
+const TraceSchema = z.object({
+  traceID: z.string(),
+  spans: z.array(TraceSpanSchema),
+  processes: z.record(ProcessSchema),
+  warnings: z.any(),
+});
+
+export type Trace = z.infer<typeof TraceSchema>;
+export type TraceSpan = z.infer<typeof TraceSpanSchema>;

package/src/models/units.spec.ts

@@ -0,0 +1,21 @@
+import { units, UnitsSchema } from './units';
+
+describe('Units', function () {
+  test.each(units.map((a) => [a, a]))(
+    'parse("%s") should return "%s"',
+    (spyName) => {
+      expect(UnitsSchema.parse(spyName)).toBe(spyName);
+    }
+  );
+
+  describe('when empty', () => {
+    it('defaults to unknown', () => {
+      expect(UnitsSchema.parse('')).toBe('unknown');
+    });
+  });
+  describe('when a non-supported value is passed', () => {
+    it('defaults to unknown', () => {
+      expect(UnitsSchema.parse('UNKNOWN_UNIT')).toBe('unknown');
+    });
+  });
+});

package/src/models/units.ts

@@ -0,0 +1,24 @@
+import { z } from 'zod';
+
+export const units = [
+  'samples',
+  'objects',
+  'goroutines',
+  'bytes',
+  'lock_samples',
+  'lock_nanoseconds',
+  'trace_samples',
+  'exceptions',
+];
+
+export const UnitsSchema = z.preprocess((u) => {
+  if (typeof u === 'string') {
+    if (units.includes(u)) {
+      return u;
+    }
+  }
+  return 'unknown';
+}, z.enum(['samples', 'objects', 'goroutines', 'bytes', 'lock_samples', 'lock_nanoseconds', 'trace_samples', 'exceptions', 'unknown']));
+
+export type UnitsType = typeof units[number];
+export type Units = z.infer<typeof UnitsSchema>;

package/src/sass/_common.scss

@@ -0,0 +1,206 @@
+// ==========================================================================
+// Common - 通用组件样式
+// ==========================================================================
+
+@use '../sass/mixins' as *;
+
+// --------------------------------------------------------------------------
+// Code & Pre
+// --------------------------------------------------------------------------
+
+pre,
+code,
+tt {
+  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  font-size: 14px;
+}
+
+tt {
+  border-radius: 3px;
+  border: 1px solid var(--ps-gray-light-4);
+  padding: 2px 4px;
+  background-color: var(--ps-ui-foreground-text);
+}
+
+// --------------------------------------------------------------------------
+// Navbar
+// --------------------------------------------------------------------------
+
+.navbar {
+  display: flex;
+  height: 60px;
+  align-items: center;
+
+  .logo {
+    margin: 0;
+    padding: 0;
+    font-weight: 400;
+    background-size: 40px 40px;
+    background-position: 0px 8px;
+    background-repeat: no-repeat;
+
+    &::after {
+      content: 'Pyroscope';
+      font-weight: 400;
+      padding-left: 44px;
+      font-size: 25px;
+      vertical-align: text-top;
+    }
+  }
+}
+
+.navbar,
+.footer {
+  .navbar-link {
+    margin-left: 30px;
+
+    a {
+      color: var(--ps-neutral-2);
+      text-decoration: none;
+      font-weight: 500;
+
+      &:hover {
+        color: var(--ps-neutral-2);
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+// --------------------------------------------------------------------------
+// Flamegraph Table
+// --------------------------------------------------------------------------
+
+.flamegraph-table {
+  width: 100%;
+  font-size: 14px;
+  border: 1px solid var(--ps-ui-border);
+
+  thead th {
+    color: var(--ps-neutral-2);
+  }
+
+  th,
+  td {
+    color: var(--ps-neutral-2);
+    text-align: right;
+    padding: 0px 10px;
+    border-left: 1px solid var(--ps-ui-border);
+    border-bottom: 1px solid var(--ps-ui-border);
+    width: 150px;
+    min-width: 150px;
+    max-width: 150px;
+
+    span {
+      text-shadow: 0 0 1px var(--ps-table-row-text-shadow);
+    }
+
+    &:first-child {
+      border-left: none;
+      text-align: left;
+      width: auto;
+      min-width: auto;
+      max-width: auto;
+      white-space: nowrap;
+    }
+
+    &:first-child .color-reference {
+      position: absolute;
+      left: 10px;
+      bottom: 0;
+      top: 0;
+      margin: auto;
+    }
+  }
+
+  // Double column variant
+  &.flamegraph-table-doubles th,
+  &.flamegraph-table-doubles td {
+    width: 130px;
+    min-width: 130px;
+    max-width: 130px;
+
+    &:first-child {
+      width: auto;
+      min-width: auto;
+      max-width: auto;
+    }
+  }
+
+  .symbol-name {
+    font-size: 14px;
+    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  }
+
+  th {
+    padding: 6px 10px;
+  }
+
+  tr th,
+  tr:nth-child(2n) td {
+    background: var(--ps-neutral-9);
+  }
+
+  td {
+    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+
+    &:first-child {
+      margin-left: 15px;
+      position: relative;
+    }
+
+    // element right next the color reference
+    &:first-child .color-reference + div {
+      margin-left: 15px;
+    }
+
+    .table-item-button {
+      border: none;
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: baseline;
+      width: 100%;
+      cursor: pointer;
+      background-color: transparent;
+    }
+  }
+
+  .unsupported-format {
+    text-align: center;
+    padding: 15px 40px;
+  }
+}
+
+// --------------------------------------------------------------------------
+// Color Reference
+// --------------------------------------------------------------------------
+
+.color-reference {
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  display: inline-block;
+  margin-right: 5px;
+}
+
+// --------------------------------------------------------------------------
+// Button Group
+// --------------------------------------------------------------------------
+
+.btn-group {
+  display: flex;
+
+  .btn {
+    border-radius: 0;
+    border-left: none;
+
+    &:first-child {
+      border-left: 1px solid var(--ps-ui-border);
+      border-radius: 4px 0 0 4px;
+    }
+
+    &:last-child {
+      border-radius: 0 4px 4px 0;
+    }
+  }
+}

package/src/sass/_css-variables.scss

@@ -0,0 +1,201 @@
+// src/sass/_css-variables.scss
+// ==========================================================================
+// Flamegraph 主题变量（Dark / Light / Kylin）
+// 说明：
+// - :root / data-theme="dark" / data-flamegraph-color-mode="dark" => 暗色默认
+// - data-theme="light" / data-theme="kylin"
+//   / data-flamegraph-color-mode="light" / "kylin" => 浅色基线
+// - data-theme="kylin" / data-flamegraph-color-mode="kylin"
+//   => 在浅色基线上做 Kylin 风格微调（接近 AntD）
+// ==========================================================================
+
+// ==========================================================================
+// Dark Theme（默认）
+// ==========================================================================
+:root,
+[data-theme='dark'],
+[data-flamegraph-color-mode='dark'] {
+  // 基础中性色
+  --ps-neutral-1: #000000;
+  --ps-neutral-2: #ffffff;
+  --ps-neutral-9: #ffffff08;
+
+  // UI 层级背景色 (由远到近)
+  --ps-ui-background: #0e0e13;
+  --ps-ui-foreground: #212124;
+  --ps-ui-element-bg-primary: #2c2c30;
+  --ps-ui-element-bg-highlight: #47474e;
+
+  // 边框与禁用状态
+  --ps-ui-border: #3b3b44;
+  --ps-disabled-button-text: #404047;
+  --ps-ui-foreground-text: #d8d8d8;
+  --ps-sidebar-separator: #d8d8d833;
+
+  // 下拉菜单
+  --ps-dropdown-background: #2c2c30;
+  --ps-dropdown-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' fill='white' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
+  --ps-dropdown-shadow: #000000;
+
+  // Tooltip
+  --ps-tooltip-bg: #ffffff;
+  --ps-tooltip-text: #000000;
+  --ps-tooltip-header-bg: #d8d8d8;
+  --ps-right-click-info: #9a9aa0;
+  --ps-sandwich-pane-info-bg: #f2cd50;
+
+  // 按钮开关
+  --ps-button-switch-bg: #2ecc40;
+  --ps-button-switch-bg-highlight: #61ea71;
+  --ps-button-switch-text: #242428;
+
+  // 表格
+  --ps-table-highlight-row-bg: #2ecc40;
+  --ps-table-highlight-row-text: #000000;
+  --ps-table-row-text-shadow: #000000;
+
+  // 选择器
+  --ps-selected-app: #df8b53;
+  --ps-select-modal-title: #888888;
+  --ps-app-selector-filter: #9d9d9f;
+
+  // 主色调 - 蓝色
+  --ps-blue-primary: #3b78e7;
+  --ps-blue-highlight: #578ae9;
+  --ps-blue-disabled: #5374b0;
+
+  // 主色调 - 绿色
+  --ps-green-primary: #2ecc40;
+  --ps-green-highlight: #61ea71;
+  --ps-green-disabled: #85c985;
+
+  // 主色调 - 红色
+  --ps-red-primary: #dc3545;
+  --ps-red-highlight: #e4606d;
+  --ps-red-disabled: #eb8c95;
+
+  // 主色调 - 灰色
+  --ps-grey-primary: #3b3b44;
+  --ps-grey-highlight: #47474e;
+  --ps-grey-disabled: #404047;
+
+  // 不可变色 (固定值，不随主题变化)
+  --ps-immutable-green-button-text: #242428;
+  --ps-immutable-google-button: #e84d3c;
+  --ps-immutable-google-button-hover: #e53825;
+  --ps-immutable-gitlab-button: #3b3b44;
+  --ps-immutable-gitlab-button-hover: #47474e;
+  --ps-immutable-gradient-0: #d1283980;
+  --ps-immutable-gradient-1: #3dc1d3cc;
+  --ps-immutable-off-white: #e6e6e6;
+  --ps-immutable-linked-border: #eb7b18;
+  --ps-immutable-white: #ffffff;
+  --ps-immutable-placeholder-text: #333333;
+
+  // 上传区域
+  --ps-upload-profile-area-border: #4d4d4d;
+  --ps-upload-profile-area-bg: #2c2c30;
+  --ps-upload-profile-btn-bg: #2c2c30;
+  --ps-upload-profile-icon: #575a6d;
+  --ps-upload-profile-btn-color: rgba(255, 255, 255, 0.3);
+
+  // 工具栏
+  --ps-fl-toolbar-bg: #2c2c30;
+  --ps-fl-toolbar-btn-bg: #3c7150;
+  --ps-toolbar-icon-color: #ffffff;
+
+  // MUI Tooltip
+  --ps-mui-tooltip-background: #3b3b44;
+}
+
+// ==========================================================================
+// Light Theme + Kylin 基线主题（共同的浅色基线）
+// 说明：light 和 kylin 先共享一整套浅色变量，避免回退到 dark
+// ==========================================================================
+[data-theme='light'],
+[data-theme='kylin'],                // ✅ 新增：Box 主题为 kylin 时也用浅色基线
+[data-flamegraph-color-mode='light'],
+[data-flamegraph-color-mode='kylin'] {
+  --ps-neutral-1: #ffffff;
+  --ps-neutral-2: #000000;
+  --ps-neutral-9: #00000008;
+
+  --ps-ui-element-bg-primary: #f8f8f8;
+  --ps-ui-element-bg-highlight: #c4c4c4;
+
+  --ps-ui-background: #eaeaea;
+  --ps-ui-border: #cccccc;
+  --ps-disabled-button-text: #cccccc;
+  --ps-ui-foreground: #f8f8f8;
+  --ps-ui-foreground-text: #272727;
+  --ps-dropdown-background: #f8f8f8;
+  --ps-sidebar-separator: #0000004d;
+
+  --ps-tooltip-bg: #ffffff;
+  --ps-tooltip-text: #000000;
+  --ps-tooltip-header-bg: #d8d8d8;
+  --ps-right-click-info: #9a9aa0;
+  --ps-sandwich-pane-info-bg: #3b78e7;
+
+  --ps-dropdown-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' fill='black' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
+  --ps-dropdown-shadow: #00000052;
+
+  --ps-button-switch-bg: #3b78e7;
+  --ps-button-switch-bg-highlight: #578ae9;
+  --ps-button-switch-text: #ffffff;
+
+  --ps-table-highlight-row-bg: #3b78e7;
+  --ps-table-highlight-row-text: #ffffff;
+  --ps-table-row-text-shadow: #ffffff;
+  --ps-selected-app: #3b78e7;
+  --ps-select-modal-title: #888888;
+
+  --ps-green-primary: #0bdb79;
+  --ps-green-highlight: #5bdc9e;
+  --ps-green-disabled: #00a757;
+
+  --ps-upload-profile-area-border: #d8d8d8;
+  --ps-upload-profile-area-bg: #f8f8f8;
+  --ps-upload-profile-btn-bg: #f8f8f8;
+  --ps-upload-profile-icon: #cccccc;
+  --ps-upload-profile-btn-color: rgba(255, 255, 255, 0.3);
+
+  --ps-fl-toolbar-bg: #00000008;
+  --ps-fl-toolbar-btn-bg: #3b78e7;
+  --ps-toolbar-icon-color: #5f6367;
+
+  --ps-mui-tooltip-background: #5f6367;
+  --ps-app-selector-filter: #9d9d9f;
+}
+
+// ==========================================================================
+// Kylin Theme - 在浅色基线上的微调（更贴近 AntD 白色系）
+// ==========================================================================
+[data-theme='kylin'],                 // ✅ 新增：Box 主题为 kylin 时应用这些微调
+[data-flamegraph-color-mode='kylin'] {
+  // 整体背景更接近 AntD
+  --ps-ui-background: #f5f5f5;
+  --ps-ui-foreground: #ffffff;
+  --ps-ui-border: #d9d9d9;
+  --ps-ui-foreground-text: #000000;
+
+  // 工具栏更像 AntD Head / Layout
+  --ps-fl-toolbar-bg: #fafafa;
+  --ps-fl-toolbar-btn-bg: #1677ff;
+  --ps-toolbar-icon-color: #595959;
+
+  // 表格高亮行风格：浅蓝背景 + 黑字
+  --ps-table-highlight-row-bg: #e6f4ff;
+  --ps-table-highlight-row-text: #000000;
+
+  // 开关按钮风格：AntD 主色
+  --ps-button-switch-bg: #1677ff;
+  --ps-button-switch-bg-highlight: #4096ff;
+  --ps-button-switch-text: #ffffff;
+
+  // 下拉 / Tooltip 更白净一点
+  --ps-dropdown-background: #ffffff;
+  --ps-tooltip-bg: #ffffff;
+  --ps-tooltip-text: #000000;
+  --ps-tooltip-header-bg: #f0f0f0;
+}

package/src/sass/_mixins.scss

@@ -0,0 +1,15 @@
+// ==========================================================================
+// Mixins
+// ==========================================================================
+
+@mixin outline {
+  outline: none;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus:active {
+    outline: none;
+  }
+}