@kylincloud/flamegraph 0.35.6

package/src/Tooltip/FlamegraphTooltip.tsx

@@ -0,0 +1,257 @@
+import React, { useCallback, RefObject, Dispatch, SetStateAction } from 'react';
+import { Maybe } from 'true-myth';
+import type { Unwrapped } from 'true-myth/maybe';
+import { Units } from '../models/units';
+import {
+  getFormatter,
+  numberWithCommas,
+  formatPercent,
+  ratioToPercent,
+  diffPercent,
+} from '../format/format';
+import {
+  FlamegraphPalette,
+  DefaultPalette,
+} from '../FlameGraph/FlameGraphComponent/colorPalette';
+
+import { Tooltip, TooltipData } from './Tooltip';
+
+type xyToDataSingle = (
+  x: number,
+  y: number
+) => Maybe<{ format: 'single'; name: string; total: number }>;
+
+type xyToDataDouble = (
+  x: number,
+  y: number
+) => Maybe<{
+  format: 'double';
+  name: string;
+  totalLeft: number;
+  totalRight: number;
+  barTotal: number;
+}>;
+
+export type FlamegraphTooltipProps = {
+  canvasRef: RefObject<HTMLCanvasElement>;
+
+  units: Units;
+  sampleRate: number;
+  numTicks: number;
+  leftTicks: number;
+  rightTicks: number;
+
+  palette: FlamegraphPalette;
+} & (
+  | { format: 'single'; xyToData: xyToDataSingle }
+  | {
+      format: 'double';
+      leftTicks: number;
+      rightTicks: number;
+      xyToData: xyToDataDouble;
+    }
+);
+
+export default function FlamegraphTooltip(props: FlamegraphTooltipProps) {
+  const {
+    format,
+    canvasRef,
+    xyToData,
+    numTicks,
+    sampleRate,
+    units,
+    leftTicks,
+    rightTicks,
+    palette,
+  } = props;
+
+  const setTooltipContent = useCallback(
+    (
+      setContent: Dispatch<
+        SetStateAction<{
+          title: {
+            text: string;
+            diff: {
+              text: string;
+              color: string;
+            };
+          };
+          tooltipData: TooltipData[];
+        }>
+      >,
+      onMouseOut: () => void,
+      e: MouseEvent
+    ) => {
+      const formatter = getFormatter(numTicks, sampleRate, units);
+      const opt = xyToData(e.offsetX, e.offsetY);
+
+      let data: Unwrapped<typeof opt>;
+
+      // waiting on
+      // https://github.com/true-myth/true-myth/issues/279
+      if (opt.isJust) {
+        data = opt.value;
+      } else {
+        onMouseOut();
+        return;
+      }
+
+      // set the content for tooltip
+      switch (data.format) {
+        case 'single': {
+          const newLeftContent: TooltipData = {
+            percent: formatPercent(data.total / numTicks),
+            samples:
+              units === 'trace_samples' ? '' : numberWithCommas(data.total),
+            units,
+            formattedValue: formatter.format(data.total, sampleRate),
+            tooltipType: 'flamegraph',
+          };
+          setContent({
+            title: {
+              text: data.name,
+              diff: {
+                text: '',
+                color: '',
+              },
+            },
+            tooltipData: [newLeftContent],
+          });
+
+          break;
+        }
+
+        case 'double': {
+          if (format === 'single') {
+            throw new Error(
+              "props format is 'single' but it has been mapped to 'double'"
+            );
+          }
+
+          const d = formatDouble(
+            {
+              formatter,
+              sampleRate,
+              totalLeft: data.totalLeft,
+              leftTicks,
+              totalRight: data.totalRight,
+              rightTicks,
+              title: data.name,
+              units,
+            },
+            palette
+          );
+
+          setContent({
+            title: d.title,
+            tooltipData: d.tooltipData,
+          });
+
+          break;
+        }
+        default:
+          throw new Error(`Unsupported format:'`);
+      }
+    },
+    [numTicks, sampleRate, units, leftTicks, rightTicks, palette]
+  );
+
+  return (
+    <Tooltip
+      dataSourceRef={canvasRef}
+      clickInfoSide="right"
+      setTooltipContent={setTooltipContent}
+    />
+  );
+}
+
+interface Formatter {
+  format(samples: number, sampleRate: number): string;
+}
+
+export function formatDouble(
+  {
+    formatter,
+    sampleRate,
+    totalLeft,
+    leftTicks,
+    totalRight,
+    rightTicks,
+    title,
+    units,
+  }: {
+    formatter: Formatter;
+    sampleRate: number;
+    totalLeft: number;
+    leftTicks: number;
+    totalRight: number;
+    rightTicks: number;
+    title: string;
+    units: Units;
+  },
+  palette: FlamegraphPalette = DefaultPalette
+): {
+  tooltipData: TooltipData[];
+  title: {
+    text: string;
+    diff: {
+      text: string;
+      color: string;
+    };
+  };
+} {
+  const leftRatio = totalLeft / leftTicks;
+  const rightRatio = totalRight / rightTicks;
+
+  const leftPercent = ratioToPercent(leftRatio);
+  const rightPercent = ratioToPercent(rightRatio);
+
+  const newLeft: TooltipData = {
+    percent: `${leftPercent}%`,
+    samples: numberWithCommas(totalLeft),
+    units,
+    formattedValue: formatter.format(totalLeft, sampleRate),
+    tooltipType: 'flamegraph',
+  };
+
+  const newRight: TooltipData = {
+    percent: `${rightPercent}%`,
+    samples: numberWithCommas(totalRight),
+    units,
+    formattedValue: formatter.format(totalRight, sampleRate),
+    tooltipType: 'flamegraph',
+  };
+
+  const totalDiff = diffPercent(leftPercent, rightPercent);
+
+  let tooltipDiffColor = '';
+  if (totalDiff > 0) {
+    tooltipDiffColor = palette.badColor.rgb().string();
+  } else if (totalDiff < 0) {
+    tooltipDiffColor = palette.goodColor.rgb().string();
+  }
+
+  let tooltipDiffText = '';
+  if (!totalLeft) {
+    // this is a new function
+    tooltipDiffText = '(new)';
+  } else if (!totalRight) {
+    // this function has been removed
+    tooltipDiffText = '(removed)';
+  } else if (totalDiff > 0) {
+    tooltipDiffText = `(+${totalDiff.toFixed(2)}%)`;
+  } else if (totalDiff < 0) {
+    tooltipDiffText = `(${totalDiff.toFixed(2)}%)`;
+  }
+
+  return {
+    title: {
+      text: title,
+      diff: {
+        text: tooltipDiffText,
+        color: tooltipDiffColor,
+      },
+    },
+    tooltipData: [newLeft, newRight],
+  };
+}

package/src/Tooltip/LeftClickIcon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export default function LeftClickIcon() {
+  return (
+    <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+      <defs />
+      <path
+        style={{ fill: '#7d7d7f' }}
+        d="M24,19.56c0,5.22-3.54,9.44-7.92,9.44h-3.17c-4.37,0-7.92-4.23-7.92-9.44v-7.56H24v7.56Z"
+      />
+      <path
+        style={{ fill: '#7d7d7f' }}
+        d="M15,1h.82c4.52,0,8.18,3.73,8.18,8.33v1.67H15V1Z"
+      />
+      <path d="M13.18,1h.82V11H5v-1.67c0-4.6,3.66-8.33,8.18-8.33Z" />
+    </svg>
+  );
+}

package/src/Tooltip/RightClickIcon.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export default function RightClickIcon() {
+  return (
+    <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
+      <defs />
+      <path
+        style={{ fill: '#7d7d7f' }}
+        d="M5,19.56c0,5.22,3.54,9.44,7.92,9.44h3.17c4.37,0,7.92-4.23,7.92-9.44v-7.56H5v7.56Z"
+      />
+      <path
+        style={{ fill: '#7d7d7f' }}
+        d="M14,1h-.82c-4.52,0-8.18,3.73-8.18,8.33v1.67H14V1Z"
+      />
+      <path d="M15.82,1h-.82V11h9v-1.67c0-4.6-3.66-8.33-8.18-8.33Z" />
+    </svg>
+  );
+}

package/src/Tooltip/TableTooltip.spec.tsx

@@ -0,0 +1,44 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React, { useRef } from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { Units } from 'src/models';
+import { DefaultPalette } from '../FlameGraph/FlameGraphComponent/colorPalette';
+
+import TableTooltip, { TableTooltipProps } from './TableTooltip';
+
+function TestTable(props: Omit<TableTooltipProps, 'tableBodyRef'>) {
+  const tableBodyRef = useRef<HTMLTableSectionElement>(null);
+
+  return (
+    <>
+      <table>
+        <tbody data-testid="table-body" ref={tableBodyRef} />
+      </table>
+      <TableTooltip
+        {...(props as TableTooltipProps)}
+        tableBodyRef={tableBodyRef}
+      />
+    </>
+  );
+}
+
+describe('TableTooltip', () => {
+  const renderTable = (props: Omit<TableTooltipProps, 'tableBodyRef'>) =>
+    render(<TestTable {...props} />);
+
+  it('should render TableTooltip', () => {
+    const props = {
+      numTicks: 100,
+      sampleRate: 100,
+      units: 'samples' as Units,
+      palette: DefaultPalette,
+    };
+
+    renderTable(props);
+
+    userEvent.hover(screen.getByTestId('table-body'));
+
+    expect(screen.getByTestId('tooltip')).toBeInTheDocument();
+  });
+});

package/src/Tooltip/TableTooltip.tsx

@@ -0,0 +1,145 @@
+import React, { useCallback, RefObject, Dispatch, SetStateAction } from 'react';
+import { Units } from '../models/units';
+
+import type { FlamegraphPalette } from '../FlameGraph/FlameGraphComponent/colorPalette';
+import { Tooltip, TooltipData } from './Tooltip';
+import { formatDouble } from './FlamegraphTooltip';
+import { getFormatter } from '../format/format';
+
+export interface TableTooltipProps {
+  tableBodyRef: RefObject<HTMLTableSectionElement>;
+  numTicks: number;
+  sampleRate: number;
+  units: Units;
+  palette: FlamegraphPalette;
+}
+
+export default function TableTooltip({
+  numTicks,
+  sampleRate,
+  units,
+  tableBodyRef,
+  palette,
+}: TableTooltipProps) {
+  const formatter = getFormatter(numTicks, sampleRate, units);
+  const totalFlamebearer = formatter.format(numTicks, sampleRate);
+
+  const setTooltipContent = useCallback(
+    (
+      setContent: Dispatch<
+        SetStateAction<{
+          title: {
+            text: string;
+            diff: {
+              text: string;
+              color: string;
+            };
+          };
+          tooltipData: TooltipData[];
+        }>
+      >,
+      onMouseOut: () => void,
+      e: MouseEvent
+    ) => {
+      const tableRowElementData = (e.target as Element).closest('tr')?.dataset
+        .row;
+
+      if (!tableRowElementData) {
+        onMouseOut();
+        return;
+      }
+      const [format, functionName, ...rowValues] =
+        tableRowElementData.split(';');
+
+      switch (format) {
+        case 'single': {
+          const [self, total] = rowValues;
+          const selfFormatted = formatter.format(
+            parseInt(self, 10),
+            sampleRate
+          );
+          const totalFormated = formatter.format(
+            parseInt(total, 10),
+            sampleRate
+          );
+          // todo: i think it will be good to decrease number of calculations here
+          const totalFlamebearerSplitted = totalFlamebearer.split(' ');
+          const totalFlamebearerNoUnitsValue =
+            totalFlamebearerSplitted[0] === '<'
+              ? totalFlamebearerSplitted[1]
+              : totalFlamebearerSplitted[0];
+
+          const selfSplitted = selfFormatted.split(' ');
+          const selfNoUnitsValue =
+            selfSplitted[0] === '<' ? selfSplitted[1] : selfSplitted[0];
+
+          const totalSplitted = totalFormated.split(' ');
+          const totalNoUnitsValue =
+            totalSplitted[0] === '<' ? totalSplitted[1] : totalSplitted[0];
+
+          const newContent: TooltipData = {
+            units,
+            self: `${selfFormatted}(${(
+              (parseFloat(selfNoUnitsValue) /
+                parseFloat(totalFlamebearerNoUnitsValue)) *
+              100
+            ).toFixed(2)}%)`,
+            total: `${totalFormated}(${(
+              (parseFloat(totalNoUnitsValue) /
+                parseFloat(totalFlamebearerNoUnitsValue)) *
+              100
+            ).toFixed(2)}%)`,
+            tooltipType: 'table',
+          };
+
+          setContent({
+            title: {
+              text: functionName,
+              diff: {
+                text: '',
+                color: '',
+              },
+            },
+            tooltipData: [newContent],
+          });
+          break;
+        }
+        case 'double': {
+          const [totalLeft, leftTicks, totalRight, rightTicks] = rowValues;
+          const d = formatDouble(
+            {
+              formatter,
+              sampleRate,
+              totalLeft: parseInt(totalLeft, 10),
+              leftTicks: parseInt(leftTicks, 10),
+              totalRight: parseInt(totalRight, 10),
+              rightTicks: parseInt(rightTicks, 10),
+              title: functionName,
+              units,
+            },
+            palette
+          );
+
+          setContent({
+            title: d.title,
+            tooltipData: d.tooltipData,
+          });
+
+          break;
+        }
+        default:
+          break;
+      }
+    },
+    [tableBodyRef, numTicks, formatter, sampleRate]
+  );
+
+  return (
+    <Tooltip
+      dataSourceRef={tableBodyRef}
+      shouldShowTitle={false}
+      clickInfoSide="left"
+      setTooltipContent={setTooltipContent}
+    />
+  );
+}

package/src/Tooltip/Tooltip.module.scss

@@ -0,0 +1,71 @@
+.tooltip {
+  width: 420px;
+  position: fixed;
+  background: var(--ps-tooltip-bg);
+  box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  color: var(--ps-tooltip-text);
+  font-size: 12px;
+  visibility: hidden;
+  z-index: 2;
+  pointer-events: none;
+
+  &.flamegraphDiffTooltip {
+    width: 450px;
+  }
+
+  .tooltipName {
+    color: var(--ps-tooltip-text);
+    background-color: var(--ps-tooltip-header-bg);
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    font-weight: bold;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 8px 10px;
+    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+  }
+
+  .functionName {
+    padding: 8px 10px 0;
+    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+
+    white-space: break-spaces;
+    word-break: break-all;
+  }
+
+  .tooltipTable {
+    width: calc(100% - 10px * 2);
+    margin: 10px;
+    display: table; /* although this is the default, users may have an overwrite */
+
+    th,
+    td {
+      background-color: var(--ps-tooltip-bg);
+      border: 1px solid var(--ps-tooltip-header-bg);
+      padding: 5px;
+      font-weight: normal;
+    }
+  }
+
+  .clickInfo {
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: center;
+    color: var(--ps-right-click-info);
+
+    svg {
+      color: initial;
+      display: block;
+      align-self: center;
+      width: 22px;
+      height: 22px;
+      margin-right: 5px;
+    }
+
+    span {
+      font-size: 14px;
+    }
+  }
+}