@kylincloud/flamegraph 0.35.6

package/src/SharedQueryInput.tsx

@@ -0,0 +1,127 @@
+/* eslint-disable no-unused-expressions */
+import React, { useEffect, useMemo, ChangeEvent, useRef } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faLink } from '@fortawesome/free-solid-svg-icons/faLink';
+import Input from './shims/Input';
+import { Tooltip } from './shims/Tooltip';
+import styles from './SharedQueryInput.module.scss';
+import type { ProfileHeaderProps } from './Toolbar';
+import { useFlamegraphI18n } from './i18n';
+
+interface SharedQueryProps {
+  onHighlightChange: ProfileHeaderProps['handleSearchChange'];
+  highlightQuery: ProfileHeaderProps['highlightQuery'];
+  sharedQuery: ProfileHeaderProps['sharedQuery'];
+  width: number;
+}
+
+const usePreviousSyncEnabled = (syncEnabled?: string | boolean) => {
+  const ref = useRef<string | boolean | undefined>();
+
+  useEffect(() => {
+    ref.current = syncEnabled;
+  }, [syncEnabled]);
+
+  return ref.current;
+};
+
+const SharedQueryInput = ({
+  onHighlightChange,
+  highlightQuery,
+  sharedQuery,
+  width,
+}: SharedQueryProps) => {
+  const messages = useFlamegraphI18n();
+  const prevSyncEnabled = usePreviousSyncEnabled(sharedQuery?.syncEnabled);
+
+  const onQueryChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onHighlightChange(e.target.value);
+
+    if (sharedQuery && sharedQuery.syncEnabled) {
+      sharedQuery.onQueryChange(e.target.value);
+    }
+  };
+
+  useEffect(() => {
+    if (typeof sharedQuery?.searchQuery === 'string') {
+      if (sharedQuery.syncEnabled) {
+        onHighlightChange(sharedQuery.searchQuery);
+      }
+
+      if (
+        !sharedQuery.syncEnabled &&
+        prevSyncEnabled &&
+        prevSyncEnabled !== sharedQuery?.id
+      ) {
+        onHighlightChange('');
+      }
+    }
+  }, [sharedQuery?.searchQuery, sharedQuery?.syncEnabled]);
+
+  const onToggleSync = () => {
+    const newValue = sharedQuery?.syncEnabled ? false : sharedQuery?.id;
+    sharedQuery?.toggleSync(newValue as string | false);
+
+    if (newValue) {
+      sharedQuery?.onQueryChange(highlightQuery);
+    } else {
+      onHighlightChange(highlightQuery);
+      sharedQuery?.onQueryChange('');
+    }
+  };
+
+  const inputValue = useMemo(
+    () =>
+      sharedQuery && sharedQuery.syncEnabled
+        ? sharedQuery.searchQuery || ''
+        : highlightQuery,
+    [sharedQuery, highlightQuery]
+  );
+
+  const inputClassName = useMemo(
+    () =>
+      `${sharedQuery ? styles.searchWithSync : styles.search} ${
+        sharedQuery?.syncEnabled ? styles['search-synced'] : ''
+      }`,
+    [sharedQuery]
+  );
+
+  const syncTooltipTitle = sharedQuery?.syncEnabled
+    ? messages.unsyncSearchBars
+    : messages.syncSearchBars;
+
+  return (
+    <div className={styles.wrapper} style={{ width }}>
+      <Input
+        testId="flamegraph-search"
+        className={inputClassName}
+        type="search"
+        name="flamegraph-search"
+        placeholder={messages.searchPlaceholder}
+        minLength={2}
+        debounceTimeout={100}
+        onChange={onQueryChange}
+        value={inputValue}
+      />
+      {sharedQuery ? (
+        <Tooltip placement="top" title={syncTooltipTitle}>
+          <button
+            className={
+              sharedQuery.syncEnabled ? styles.syncSelected : styles.sync
+            }
+            onClick={onToggleSync}
+          >
+            <FontAwesomeIcon
+              className={`${
+                sharedQuery.syncEnabled ? styles.checked : styles.icon
+              }`}
+              icon={faLink}
+            />
+          </button>
+        </Tooltip>
+      ) : null}
+    </div>
+  );
+};
+
+export default SharedQueryInput;

package/src/Toolbar.module.scss

@@ -0,0 +1,117 @@
+$buttonHeight: 37px;
+
+.navbar {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  margin: 10px 0;
+  justify-content: space-between;
+  height: 47px;
+  background-color: var(--ps-fl-toolbar-bg);
+  border: 1px solid var(--ps-ui-border);
+  padding: 4px;
+  align-items: center;
+}
+
+.viewType {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+.navbar button {
+  color: var(--ps-toolbar-icon-color);
+}
+
+.toggleViewButton {
+  height: $buttonHeight;
+  min-width: auto;
+  width: 40px;
+  margin: 0 2px;
+  padding: 0;
+  border-color: transparent;
+  background-color: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    width: 22px;
+    height: 22px;
+  }
+
+  &.selected {
+    background-color: var(--ps-fl-toolbar-btn-bg);
+
+    &:hover {
+      background-color: var(--ps-fl-toolbar-btn-bg);
+    }
+
+    svg {
+      color: white;
+    }
+  }
+}
+
+.fitModeButton {
+  @extend .toggleViewButton;
+}
+
+.collapseNodeButton {
+  min-width: initial;
+  width: 40px;
+  height: $buttonHeight;
+  margin: 0 2px;
+  padding: 0;
+  background-color: transparent;
+  border-color: transparent;
+}
+
+.resetViewButton {
+  @extend .collapseNodeButton;
+  width: 40px;
+  min-width: initial;
+  margin: 0 2px;
+  padding: 0;
+}
+
+.divider {
+  width: 1px;
+  margin: 0 2px;
+  height: $buttonHeight;
+  background-color: var(--ps-ui-border);
+}
+
+.itemsContainer,
+.item {
+  display: flex;
+}
+
+.moreButton {
+  border-radius: 4px;
+  border: none;
+  padding: 0 5px;
+  height: $buttonHeight;
+
+  &.active,
+  &.active:hover {
+    background-color: var(--ps-fl-toolbar-btn-bg);
+  }
+
+  &:hover {
+    background-color: var(--ps-ui-element-bg-highlight);
+    cursor: pointer;
+  }
+}
+
+.navbarCollapsedItems {
+  display: flex;
+  position: absolute;
+  right: 0;
+  top: 50px;
+  height: 47px;
+  background-color: var(--ps-fl-toolbar-bg);
+  border: 1px solid var(--ps-ui-border);
+  padding: 4px;
+  z-index: 1;
+}

package/src/Toolbar.spec.tsx

@@ -0,0 +1,217 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Maybe } from 'true-myth';
+import Toolbar from './Toolbar';
+import { HeadMode, TailMode } from './fitMode/fitMode';
+
+// since 'react-debounce-input' uses lodash.debounce under the hood
+jest.mock('lodash.debounce', () =>
+  jest.fn((fn) => {
+    fn.flush = () => {};
+    return fn;
+  })
+);
+
+describe('ProfileHeader', () => {
+  beforeAll(() => {
+    window.HTMLElement.prototype.getBoundingClientRect = function () {
+      return {
+        x: 0,
+        y: 0,
+        bottom: 0,
+        right: 0,
+        toJSON: () => {},
+        height: 0,
+        top: 0,
+        left: 0,
+        width: 900,
+      };
+    };
+  });
+
+  it('should render toolbar correctly', () => {
+    const { asFragment } = render(
+      <Toolbar
+        view="both"
+        flamegraphType="single"
+        handleSearchChange={() => {}}
+        reset={() => {}}
+        updateFitMode={() => {}}
+        fitMode={HeadMode}
+        updateView={() => {}}
+        isFlamegraphDirty={false}
+        selectedNode={Maybe.nothing()}
+        onFocusOnSubtree={() => {}}
+        highlightQuery=""
+      />
+    );
+
+    expect(screen.getByRole('toolbar')).toBeInTheDocument();
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  describe('Reset button', () => {
+    const onReset = jest.fn();
+
+    beforeEach(() => {});
+
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('renders as disabled when flamegraph is not dirty', () => {
+      const component = (
+        <Toolbar
+          view="both"
+          flamegraphType="single"
+          isFlamegraphDirty={false}
+          handleSearchChange={() => {}}
+          reset={onReset}
+          updateFitMode={() => {}}
+          fitMode={HeadMode}
+          updateView={() => {}}
+          selectedNode={Maybe.nothing()}
+          onFocusOnSubtree={() => {}}
+          highlightQuery=""
+        />
+      );
+      render(component);
+      expect(screen.getByRole('button', { name: /Reset/ })).toBeDisabled();
+    });
+
+    it('calls onReset when clicked (and enabled)', () => {
+      const component = (
+        <Toolbar
+          view="both"
+          flamegraphType="single"
+          isFlamegraphDirty
+          handleSearchChange={() => {}}
+          reset={onReset}
+          updateFitMode={() => {}}
+          fitMode={HeadMode}
+          updateView={() => {}}
+          selectedNode={Maybe.nothing()}
+          onFocusOnSubtree={() => {}}
+          highlightQuery=""
+        />
+      );
+      render(component);
+      expect(screen.getByRole('button', { name: /Reset/ })).not.toBeDisabled();
+      screen.getByRole('button', { name: /Reset/ }).click();
+
+      expect(onReset).toHaveBeenCalled();
+    });
+  });
+
+  describe('HighlightSearch', () => {
+    it('calls callback when typed', () => {
+      const onChange = jest.fn();
+
+      const component = (
+        <Toolbar
+          view="both"
+          flamegraphType="single"
+          isFlamegraphDirty
+          handleSearchChange={onChange}
+          reset={() => {}}
+          updateFitMode={() => {}}
+          fitMode={HeadMode}
+          updateView={() => {}}
+          selectedNode={Maybe.nothing()}
+          onFocusOnSubtree={() => {}}
+          highlightQuery=""
+        />
+      );
+
+      render(component);
+      userEvent.type(screen.getByRole('searchbox'), 'foobar');
+      expect(onChange).toHaveBeenCalledWith('foobar');
+    });
+  });
+
+  describe('FitMode', () => {
+    const updateFitMode = jest.fn();
+    const component = (
+      <Toolbar
+        view="both"
+        flamegraphType="single"
+        handleSearchChange={() => {}}
+        reset={() => {}}
+        updateFitMode={updateFitMode}
+        fitMode={HeadMode}
+        updateView={() => {}}
+        isFlamegraphDirty={false}
+        selectedNode={Maybe.nothing()}
+        onFocusOnSubtree={() => {}}
+        highlightQuery=""
+      />
+    );
+
+    beforeEach(() => {
+      render(component);
+    });
+
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('updates to HEAD first', () => {
+      screen.getByRole('button', { name: 'Head first' }).click();
+
+      expect(updateFitMode).toHaveBeenCalledWith(HeadMode);
+    });
+
+    it('updates to TAIL first', () => {
+      screen.getByRole('button', { name: 'Tail first' }).click();
+
+      expect(updateFitMode).toHaveBeenCalledWith(TailMode);
+    });
+  });
+
+  describe('Focus on subtree', () => {
+    it('renders as disabled when theres no selected node', () => {
+      const component = (
+        <Toolbar
+          view="both"
+          flamegraphType="single"
+          isFlamegraphDirty={false}
+          handleSearchChange={() => {}}
+          reset={() => {}}
+          updateFitMode={() => {}}
+          fitMode={HeadMode}
+          updateView={() => {}}
+          selectedNode={Maybe.nothing()}
+          onFocusOnSubtree={() => {}}
+          highlightQuery=""
+        />
+      );
+      render(component);
+      expect(screen.getByRole('button', { name: /Collapse/ })).toBeDisabled();
+    });
+
+    it('calls callback when clicked', () => {
+      const onFocusOnSubtree = jest.fn();
+      const component = (
+        <Toolbar
+          view="both"
+          flamegraphType="single"
+          isFlamegraphDirty={false}
+          handleSearchChange={() => {}}
+          reset={() => {}}
+          updateFitMode={() => {}}
+          fitMode={HeadMode}
+          updateView={() => {}}
+          selectedNode={Maybe.just({ i: 999, j: 999 })}
+          onFocusOnSubtree={onFocusOnSubtree}
+          highlightQuery=""
+        />
+      );
+
+      render(component);
+      screen.getByRole('button', { name: /Collapse/ }).click();
+
+      expect(onFocusOnSubtree).toHaveBeenCalledWith(999, 999);
+    });
+  });
+});