@kylincloud/flamegraph 0.35.6

package/src/Toolbar.tsx

@@ -0,0 +1,471 @@
+// src/Toolbar.tsx
+import React, {
+  ReactNode,
+  RefObject,
+  useState,
+  useRef,
+  useLayoutEffect,
+  isValidElement,
+  memo,
+} from 'react';
+import classNames from 'classnames/bind';
+import { faUndo } from '@fortawesome/free-solid-svg-icons/faUndo';
+import { faCompressAlt } from '@fortawesome/free-solid-svg-icons/faCompressAlt';
+import { faProjectDiagram } from '@fortawesome/free-solid-svg-icons/faProjectDiagram';
+import { faEllipsisV } from '@fortawesome/free-solid-svg-icons/faEllipsisV';
+import { Maybe } from 'true-myth';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import useResizeObserver from '@react-hook/resize-observer';
+// until ui is moved to its own package this should do it
+// eslint-disable-next-line import/no-extraneous-dependencies
+import Button from './shims/Button';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Tooltip } from './shims/Tooltip';
+import { FitModes } from './fitMode/fitMode';
+import SharedQueryInput from './SharedQueryInput';
+import type { ViewTypes } from './FlameGraph/FlameGraphComponent/viewTypes';
+import type { FlamegraphRendererProps } from './FlameGraph/FlameGraphRenderer';
+import {
+  TableIcon,
+  TablePlusFlamegraphIcon,
+  FlamegraphIcon,
+  SandwichIcon,
+  HeadFirstIcon,
+  TailFirstIcon,
+} from './Icons';
+
+import styles from './Toolbar.module.scss';
+import {
+  useFlamegraphI18n,
+  type FlamegraphMessages,
+} from './i18n';
+
+const cx = classNames.bind(styles);
+
+const DIVIDER_WIDTH = 5;
+const QUERY_INPUT_WIDTH = 175;
+const LEFT_MARGIN = 2;
+const RIGHT_MARGIN = 2;
+const TOOLBAR_SQUARE_WIDTH = 40 + LEFT_MARGIN + RIGHT_MARGIN;
+const MORE_BUTTON_WIDTH = 16;
+
+const calculateCollapsedItems = (
+  clientWidth: number,
+  collapsedItemsNumber: number,
+  itemsW: number[]
+) => {
+  const availableToolbarItemsWidth =
+    collapsedItemsNumber === 0
+      ? clientWidth - QUERY_INPUT_WIDTH - 5
+      : clientWidth - QUERY_INPUT_WIDTH - MORE_BUTTON_WIDTH - 5;
+
+  let collapsedItems = 0;
+  let visibleItemsWidth = 0;
+  itemsW.reverse().forEach((v) => {
+    visibleItemsWidth += v;
+    if (availableToolbarItemsWidth <= visibleItemsWidth) {
+      collapsedItems += 1;
+    }
+  });
+
+  return collapsedItems;
+};
+
+const useMoreButton = (
+  target: RefObject<HTMLDivElement>,
+  toolbarItemsWidth: number[]
+) => {
+  const [isCollapsed, setCollapsedStatus] = useState(true);
+  const [collapsedItemsNumber, setCollapsedItemsNumber] = useState(0);
+
+  useLayoutEffect(() => {
+    if (target.current) {
+      const { width } = target.current.getBoundingClientRect();
+      const collapsedItems = calculateCollapsedItems(
+        width,
+        collapsedItemsNumber,
+        toolbarItemsWidth
+      );
+      setCollapsedItemsNumber(collapsedItems);
+    }
+  }, [target.current, toolbarItemsWidth]);
+
+  const handleMoreClick = () => {
+    setCollapsedStatus((v) => !v);
+  };
+
+  useResizeObserver(target, (entry: ResizeObserverEntry) => {
+    const { width } = entry.target.getBoundingClientRect();
+    const collapsedItems = calculateCollapsedItems(
+      width,
+      collapsedItemsNumber,
+      toolbarItemsWidth
+    );
+
+    setCollapsedItemsNumber(collapsedItems);
+    setCollapsedStatus(true);
+  });
+
+  return {
+    isCollapsed,
+    handleMoreClick,
+    collapsedItemsNumber,
+  };
+};
+
+export interface ProfileHeaderProps {
+  view: ViewTypes;
+  enableChangingDisplay?: boolean;
+  flamegraphType: 'single' | 'double';
+  handleSearchChange: (s: string) => void;
+  highlightQuery: string;
+  ExportData?: ReactNode;
+
+  /** Whether the flamegraph is different from its original state */
+  isFlamegraphDirty: boolean;
+  reset: () => void;
+
+  updateFitMode: (f: FitModes) => void;
+  fitMode: FitModes;
+  updateView: (s: ViewTypes) => void;
+
+  /**
+   * Refers to the node that has been selected in the flamegraph
+   */
+  selectedNode: Maybe<{ i: number; j: number }>;
+  onFocusOnSubtree: (i: number, j: number) => void;
+  sharedQuery?: FlamegraphRendererProps['sharedQuery'];
+}
+
+const Divider = () => <div className={styles.divider} />;
+
+type ToolbarItemType = {
+  width: number;
+  el: ReactNode;
+};
+
+const Toolbar = memo(
+  ({
+    view,
+    handleSearchChange,
+    highlightQuery,
+    isFlamegraphDirty,
+    reset,
+    updateFitMode,
+    fitMode,
+    updateView,
+    selectedNode,
+    onFocusOnSubtree,
+    flamegraphType,
+    enableChangingDisplay = true,
+    sharedQuery,
+    ExportData,
+  }: ProfileHeaderProps) => {
+    const toolbarRef = useRef<HTMLDivElement>(null);
+    const i18n = useFlamegraphI18n();
+
+    const fitModeItem = {
+      el: (
+        <>
+          <FitMode fitMode={fitMode} updateFitMode={updateFitMode} />
+          <Divider />
+        </>
+      ),
+      width: TOOLBAR_SQUARE_WIDTH * 2 + DIVIDER_WIDTH,
+    };
+    const resetItem = {
+      el: <ResetView isFlamegraphDirty={isFlamegraphDirty} reset={reset} />,
+      width: TOOLBAR_SQUARE_WIDTH,
+    };
+    const focusOnSubtree = {
+      el: (
+        <>
+          <FocusOnSubtree
+            selectedNode={selectedNode}
+            onFocusOnSubtree={onFocusOnSubtree}
+          />
+          <Divider />
+        </>
+      ),
+      width: TOOLBAR_SQUARE_WIDTH + DIVIDER_WIDTH,
+    };
+
+    const viewSectionItem = enableChangingDisplay
+      ? {
+          el: (
+            <ViewSection
+              flamegraphType={flamegraphType}
+              view={view}
+              updateView={updateView}
+            />
+          ),
+          width: TOOLBAR_SQUARE_WIDTH * (flamegraphType === 'single' ? 5 : 3),
+        }
+      : null;
+    const exportDataItem = isValidElement(ExportData)
+      ? {
+          el: (
+            <>
+              <Divider />
+              {ExportData}
+            </>
+          ),
+          width: TOOLBAR_SQUARE_WIDTH + DIVIDER_WIDTH,
+        }
+      : null;
+
+    const filteredToolbarItems = [
+      fitModeItem,
+      resetItem,
+      focusOnSubtree,
+      viewSectionItem,
+      exportDataItem,
+    ].filter((v) => v !== null) as ToolbarItemType[];
+    const toolbarItemsWidth = filteredToolbarItems.reduce(
+      (acc, v) => [...acc, v.width],
+      [] as number[]
+    );
+
+    const { isCollapsed, collapsedItemsNumber, handleMoreClick } =
+      useMoreButton(toolbarRef, toolbarItemsWidth);
+
+    const toolbarFilteredItems = filteredToolbarItems.reduce(
+      (acc, v, i) => {
+        const isHiddenItem = i < collapsedItemsNumber;
+
+        if (isHiddenItem) {
+          acc.hidden.push(v);
+        } else {
+          acc.visible.push(v);
+        }
+
+        return acc;
+      },
+      { visible: [] as ToolbarItemType[], hidden: [] as ToolbarItemType[] }
+    );
+
+    return (
+      <div role="toolbar" ref={toolbarRef}>
+        <div className={styles.navbar}>
+          <div>
+            <SharedQueryInput
+              width={QUERY_INPUT_WIDTH}
+              onHighlightChange={handleSearchChange}
+              highlightQuery={highlightQuery}
+              sharedQuery={sharedQuery}
+            />
+          </div>
+          <div>
+            <div className={styles.itemsContainer}>
+              {toolbarFilteredItems.visible.map((v, i) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <div key={i} className={styles.item} style={{ width: v.width }}>
+                  {v.el}
+                </div>
+              ))}
+              {collapsedItemsNumber !== 0 && (
+                <Tooltip placement="top" title={i18n.more}>
+                  <button
+                    onClick={handleMoreClick}
+                    className={cx({
+                      [styles.moreButton]: true,
+                      [styles.active]: !isCollapsed,
+                    })}
+                  >
+                    <FontAwesomeIcon icon={faEllipsisV} />
+                  </button>
+                </Tooltip>
+              )}
+            </div>
+          </div>
+          {!isCollapsed && (
+            <div className={styles.navbarCollapsedItems}>
+              {toolbarFilteredItems.hidden.map((v, i) => (
+                <div
+                  // eslint-disable-next-line react/no-array-index-key
+                  key={i}
+                  className={styles.item}
+                  style={{ width: v.width }}
+                >
+                  {v.el}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+
+function FocusOnSubtree({
+  onFocusOnSubtree,
+  selectedNode,
+}: {
+  selectedNode: ProfileHeaderProps['selectedNode'];
+  onFocusOnSubtree: ProfileHeaderProps['onFocusOnSubtree'];
+}) {
+  const i18n = useFlamegraphI18n();
+
+  const onClick = selectedNode.mapOr(
+    () => {},
+    (f) => {
+      return () => onFocusOnSubtree(f.i, f.j);
+    }
+  );
+
+  return (
+    <Tooltip placement="top" title={i18n.collapseNodesAbove}>
+      <div>
+        <Button
+          disabled={!selectedNode.isJust}
+          onClick={onClick}
+          className={styles.collapseNodeButton}
+          aria-label={i18n.collapseNodesAbove}
+        >
+          <FontAwesomeIcon icon={faCompressAlt} />
+        </Button>
+      </div>
+    </Tooltip>
+  );
+}
+
+function ResetView({
+  isFlamegraphDirty,
+  reset,
+}: {
+  isFlamegraphDirty: ProfileHeaderProps['isFlamegraphDirty'];
+  reset: ProfileHeaderProps['reset'];
+}) {
+  const i18n = useFlamegraphI18n();
+
+  return (
+    <Tooltip placement="top" title={i18n.resetView}>
+      <span>
+        <Button
+          id="reset"
+          disabled={!isFlamegraphDirty}
+          onClick={reset}
+          className={styles.resetViewButton}
+          aria-label={i18n.resetView}
+        >
+          <FontAwesomeIcon icon={faUndo} />
+        </Button>
+      </span>
+    </Tooltip>
+  );
+}
+
+function FitMode({
+  fitMode,
+  updateFitMode,
+}: {
+  fitMode: ProfileHeaderProps['fitMode'];
+  updateFitMode: ProfileHeaderProps['updateFitMode'];
+}) {
+  const i18n = useFlamegraphI18n();
+  const isSelected = (a: FitModes) => fitMode === a;
+
+  return (
+    <>
+      <Tooltip placement="top" title={i18n.headFirst}>
+        <Button
+          onClick={() => updateFitMode('HEAD')}
+          className={cx({
+            [styles.fitModeButton]: true,
+            [styles.selected]: isSelected('HEAD'),
+          })}
+        >
+          <HeadFirstIcon />
+        </Button>
+      </Tooltip>
+      <Tooltip placement="top" title={i18n.tailFirst}>
+        <Button
+          onClick={() => updateFitMode('TAIL')}
+          className={cx({
+            [styles.fitModeButton]: true,
+            [styles.selected]: isSelected('TAIL'),
+          })}
+        >
+          <TailFirstIcon />
+        </Button>
+      </Tooltip>
+    </>
+  );
+}
+
+const getViewOptions = (
+  flamegraphType: ProfileHeaderProps['flamegraphType'],
+  messages: FlamegraphMessages
+): Array<{
+  label: string;
+  value: ViewTypes;
+  Icon: (props: { fill?: string | undefined }) => JSX.Element;
+}> =>
+  flamegraphType === 'single'
+    ? [
+        { label: messages.viewTable, value: 'table', Icon: TableIcon },
+        {
+          label: messages.viewTableAndFlamegraph,
+          value: 'both',
+          Icon: TablePlusFlamegraphIcon,
+        },
+        {
+          label: messages.viewFlamegraph,
+          value: 'flamegraph',
+          Icon: FlamegraphIcon,
+        },
+        { label: messages.viewSandwich, value: 'sandwich', Icon: SandwichIcon },
+        {
+          label: messages.viewGraphviz,
+          value: 'graphviz',
+          Icon: () => <FontAwesomeIcon icon={faProjectDiagram} />,
+        },
+      ]
+    : [
+        { label: messages.viewTable, value: 'table', Icon: TableIcon },
+        {
+          label: messages.viewTableAndFlamegraph,
+          value: 'both',
+          Icon: TablePlusFlamegraphIcon,
+        },
+        {
+          label: messages.viewFlamegraph,
+          value: 'flamegraph',
+          Icon: FlamegraphIcon,
+        },
+      ];
+
+function ViewSection({
+  view,
+  updateView,
+  flamegraphType,
+}: {
+  updateView: ProfileHeaderProps['updateView'];
+  view: ProfileHeaderProps['view'];
+  flamegraphType: ProfileHeaderProps['flamegraphType'];
+}) {
+  const i18n = useFlamegraphI18n();
+  const options = getViewOptions(flamegraphType, i18n);
+
+  return (
+    <div className={styles.viewType}>
+      {options.map(({ label, value, Icon }) => (
+        <Tooltip key={value} placement="top" title={label}>
+          <Button
+            data-testid={value}
+            onClick={() => updateView(value)}
+            className={cx({
+              [styles.toggleViewButton]: true,
+              selected: view === value,
+            })}
+          >
+            <Icon />
+          </Button>
+        </Tooltip>
+      ))}
+    </div>
+  );
+}
+
+export default Toolbar;

package/src/Tooltip/FlamegraphTooltip.spec.tsx

@@ -0,0 +1,81 @@
+/* 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 { Maybe } from 'true-myth';
+import type { Units } from './models';
+
+import FlamegraphTooltip, { FlamegraphTooltipProps } from './FlamegraphTooltip';
+import { DefaultPalette } from '../';
+
+function TestCanvas(props: Omit<FlamegraphTooltipProps, 'canvasRef'>) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  return (
+    <>
+      <canvas data-testid="canvas" ref={canvasRef} />
+      <FlamegraphTooltip
+        {...(props as FlamegraphTooltipProps)}
+        canvasRef={canvasRef}
+      />
+    </>
+  );
+}
+
+describe('FlamegraphTooltip', () => {
+  const renderCanvas = (
+    props: Omit<FlamegraphTooltipProps, 'canvasRef' | 'palette'>
+  ) => render(<TestCanvas {...props} palette={DefaultPalette} />);
+
+  it('should render FlamegraphTooltip with single format', () => {
+    const xyToData = (x: number, y: number) =>
+      Maybe.of({
+        format: 'single' as const,
+        name: 'function_title',
+        total: 10,
+      });
+
+    const props = {
+      numTicks: 100,
+      sampleRate: 100,
+      xyToData,
+      leftTicks: 100,
+      rightTicks: 100,
+      format: 'single' as const,
+      units: 'samples' as Units,
+    };
+
+    renderCanvas(props);
+
+    userEvent.hover(screen.getByTestId('canvas'));
+
+    expect(screen.getByTestId('tooltip')).toBeInTheDocument();
+  });
+
+  it('should render FlamegraphTooltip with double format', () => {
+    const xyToData = (x: number, y: number) =>
+      Maybe.of({
+        format: 'double' as const,
+        name: 'my_function',
+        totalLeft: 100,
+        totalRight: 0,
+        barTotal: 100,
+      });
+
+    const props = {
+      numTicks: 100,
+      sampleRate: 100,
+      xyToData,
+      leftTicks: 1000,
+      rightTicks: 1000,
+      format: 'double' as const,
+      units: 'samples' as Units,
+    };
+
+    renderCanvas(props);
+
+    userEvent.hover(screen.getByTestId('canvas'));
+
+    expect(screen.getByTestId('tooltip')).toBeInTheDocument();
+  });
+});