@kylincloud/flamegraph 0.35.6

package/src/FlameGraph/FlameGraphRenderer.tsx

@@ -0,0 +1,603 @@
+/* eslint-disable react/no-unused-state */
+/* eslint-disable no-bitwise */
+/* eslint-disable react/no-access-state-in-setstate */
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable no-nested-ternary */
+/* eslint-disable global-require */
+
+import React, { Dispatch, SetStateAction, ReactNode, Component } from 'react';
+import clsx from 'clsx';
+import { Maybe } from 'true-myth';
+import { createFF, Flamebearer, Profile } from '../models';
+import NoData from '../shims/NoData';
+
+import Graph from './FlameGraphComponent';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: let's move this to typescript some time in the future
+import ProfilerTable from '../ProfilerTable';
+import Toolbar, { ProfileHeaderProps } from '../Toolbar';
+import {
+  calleesProfile,
+  callersProfile,
+} from '../convert/sandwichViewProfiles';
+import { DefaultPalette } from './FlameGraphComponent/colorPalette';
+import styles from './FlamegraphRenderer.module.scss';
+import PyroscopeLogo from '../logo-v3-small.svg';
+import { FitModes } from '../fitMode/fitMode';
+import { ViewTypes } from './FlameGraphComponent/viewTypes';
+import { GraphVizPane } from './FlameGraphComponent/GraphVizPane';
+import { isSameFlamebearer } from './uniqueness';
+import { normalize } from './normalize';
+
+// Refers to a node in the flamegraph
+interface Node {
+  i: number;
+  j: number;
+}
+
+export interface FlamegraphRendererProps {
+  profile?: Profile;
+
+  /** in case you ONLY want to display a specific visualization mode. It will also disable the dropdown that allows you to change mode. */
+  onlyDisplay?: ViewTypes;
+  showToolbar?: boolean;
+
+  /** whether to display the panes (table and flamegraph) side by side ('horizontal') or one on top of the other ('vertical') */
+  panesOrientation?: 'horizontal' | 'vertical';
+  showPyroscopeLogo?: boolean;
+  showCredit?: boolean;
+  ExportData?: ProfileHeaderProps['ExportData'];
+
+  /** @deprecated  prefer Profile */
+  flamebearer?: Flamebearer;
+  sharedQuery?: {
+    searchQuery?: string;
+    onQueryChange: Dispatch<SetStateAction<string | undefined>>;
+    syncEnabled: string | boolean;
+    toggleSync: Dispatch<SetStateAction<boolean | string>>;
+    id: string;
+  };
+
+  children?: ReactNode;
+}
+
+interface FlamegraphRendererState {
+  /** A dirty flamegraph refers to a flamegraph where its original state can be reset */
+  isFlamegraphDirty: boolean;
+
+  view: NonNullable<FlamegraphRendererProps['onlyDisplay']>;
+  panesOrientation: NonNullable<FlamegraphRendererProps['panesOrientation']>;
+
+  fitMode: 'HEAD' | 'TAIL';
+  flamebearer: NonNullable<FlamegraphRendererProps['flamebearer']>;
+
+  /** Query searched in the input box.
+   * It's used to filter data in the table AND highlight items in the flamegraph */
+  searchQuery: string;
+  /** Triggered when an item is clicked on the table. It overwrites the searchQuery */
+  selectedItem: Maybe<string>;
+
+  flamegraphConfigs: {
+    focusedNode: Maybe<Node>;
+    zoom: Maybe<Node>;
+  };
+
+  palette: typeof DefaultPalette;
+}
+
+class FlameGraphRenderer extends Component<
+  FlamegraphRendererProps,
+  FlamegraphRendererState
+> {
+  resetFlamegraphState = {
+    focusedNode: Maybe.nothing<Node>(),
+    zoom: Maybe.nothing<Node>(),
+  };
+
+  // TODO: At some point the initial state may be set via the user
+  // Eg when sharing a specific node
+  initialFlamegraphState = this.resetFlamegraphState;
+
+  // eslint-disable-next-line react/static-property-placement
+  static defaultProps = {
+    showCredit: true,
+  };
+
+  constructor(props: FlamegraphRendererProps) {
+    super(props);
+
+    this.state = {
+      isFlamegraphDirty: false,
+      view: this.props.onlyDisplay ? this.props.onlyDisplay : 'both',
+      fitMode: 'HEAD',
+      flamebearer: normalize(props),
+
+      // Default to horizontal since it's the most common case
+      panesOrientation: props.panesOrientation
+        ? props.panesOrientation
+        : 'horizontal',
+
+      // query used in the 'search' checkbox
+      searchQuery: '',
+      selectedItem: Maybe.nothing(),
+
+      flamegraphConfigs: this.initialFlamegraphState,
+
+      // TODO make this come from the redux store?
+      palette: DefaultPalette,
+    };
+  }
+
+  componentDidUpdate(
+    prevProps: FlamegraphRendererProps,
+    prevState: FlamegraphRendererState
+  ) {
+    // TODO: this is a slow operation
+    const prevFlame = normalize(prevProps);
+    const currFlame = normalize(this.props);
+
+    if (!this.isSameFlamebearer(prevFlame, currFlame)) {
+      const newConfigs = this.calcNewConfigs(prevFlame, currFlame);
+
+      // Batch these updates to not do unnecessary work
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({
+        flamebearer: currFlame,
+        flamegraphConfigs: {
+          ...this.state.flamegraphConfigs,
+          ...newConfigs,
+        },
+        selectedItem: Maybe.nothing(),
+      });
+      return;
+    }
+
+    // flamegraph configs changed
+    if (prevState.flamegraphConfigs !== this.state.flamegraphConfigs) {
+      this.updateFlamegraphDirtiness();
+    }
+  }
+
+  // Calculate what should be the new configs
+  // It checks if the zoom/selectNode still points to the same node
+  // If not, it resets to the resetFlamegraphState
+  calcNewConfigs = (prevFlame: Flamebearer, currFlame: Flamebearer) => {
+    const newConfigs = this.state.flamegraphConfigs;
+
+    // This is a simple heuristic based on the name
+    // It does not account for eg recursive calls
+    const isSameNode = (f: Flamebearer, f2: Flamebearer, s: Maybe<Node>) => {
+      // TODO: don't use createFF directly
+      const getBarName = (f: Flamebearer, i: number, j: number) => {
+        return f.names[createFF(f.format).getBarName(f.levels[i], j)];
+      };
+
+      // No node is technically the same node
+      if (s.isNothing) {
+        return true;
+      }
+
+      // if the bar doesn't exist, it will throw an error
+      try {
+        const sAny = s as any
+        const barName1 = getBarName(f, sAny.value.i, sAny.value.j)
+        const barName2 = getBarName(f2, sAny.value.i, sAny.value.j)
+        return barName1 === barName2;
+      } catch {
+        return false;
+      }
+    };
+
+    // Reset zoom
+    const currZoom = this.state.flamegraphConfigs.zoom;
+    if (!isSameNode(prevFlame, currFlame, currZoom)) {
+      newConfigs.zoom = this.resetFlamegraphState.zoom;
+    }
+
+    // Reset focused node
+    const currFocusedNode = this.state.flamegraphConfigs.focusedNode;
+    if (!isSameNode(prevFlame, currFlame, currFocusedNode)) {
+      newConfigs.focusedNode = this.resetFlamegraphState.focusedNode;
+    }
+
+    return newConfigs;
+  };
+
+  onSearchChange = (e: string) => {
+    this.setState({ searchQuery: e });
+  };
+
+  isSameFlamebearer = (prevFlame: Flamebearer, currFlame: Flamebearer) => {
+    return isSameFlamebearer(prevFlame, currFlame);
+    // TODO: come up with a less resource intensive operation
+    // keep in mind naive heuristics may provide bad behaviours like (https://github.com/pyroscope-io/pyroscope/issues/1192)
+    //    return JSON.stringify(prevFlame) === JSON.stringify(currFlame);
+  };
+
+  onReset = () => {
+    this.setState({
+      ...this.state,
+      flamegraphConfigs: {
+        ...this.state.flamegraphConfigs,
+        ...this.initialFlamegraphState,
+      },
+      selectedItem: Maybe.nothing(),
+    });
+  };
+
+  onFlamegraphZoom = (bar: Maybe<Node>) => {
+    // zooming on the topmost bar is equivalent to resetting to the original state
+    if (bar.isJust && bar.value.i === 0 && bar.value.j === 0) {
+      this.onReset();
+      return;
+    }
+
+    // otherwise just pass it up to the state
+    // doesn't matter if it's some or none
+    this.setState({
+      ...this.state,
+      flamegraphConfigs: {
+        ...this.state.flamegraphConfigs,
+        zoom: bar,
+      },
+    });
+  };
+
+  onFocusOnNode = (i: number, j: number) => {
+    if (i === 0 && j === 0) {
+      this.onReset();
+      return;
+    }
+
+    let flamegraphConfigs = { ...this.state.flamegraphConfigs };
+
+    // reset zoom if we are focusing below the zoom
+    // or the same one we were zoomed
+    const { zoom } = this.state.flamegraphConfigs;
+    if (zoom.isJust) {
+      if (zoom.value.i <= i) {
+        flamegraphConfigs = {
+          ...flamegraphConfigs,
+          zoom: this.initialFlamegraphState.zoom,
+        };
+      }
+    }
+
+    this.setState({
+      ...this.state,
+      flamegraphConfigs: {
+        ...flamegraphConfigs,
+        focusedNode: Maybe.just({ i, j }),
+      },
+    });
+  };
+
+  setActiveItem = (item: { name: string }) => {
+    const { name } = item;
+
+    // if clicking on the same item, undo the search
+    if (this.state.selectedItem.isJust) {
+      if (name === this.state.selectedItem.value) {
+        this.setState({
+          selectedItem: Maybe.nothing(),
+        });
+        return;
+      }
+    }
+
+    // clicking for the first time
+    this.setState({
+      selectedItem: Maybe.just(name),
+    });
+  };
+
+  getHighlightQuery = () => {
+    // prefer table selected
+    if (this.state.selectedItem.isJust) {
+      return this.state.selectedItem.value;
+    }
+
+    return this.state.searchQuery;
+  };
+
+  updateView = (newView: ViewTypes) => {
+    if (newView === 'sandwich') {
+      this.setState({
+        searchQuery: '',
+        flamegraphConfigs: this.resetFlamegraphState,
+      });
+    }
+
+    this.setState({
+      view: newView,
+    });
+  };
+
+  updateFlamegraphDirtiness = () => {
+    // TODO(eh-am): find a better approach
+    const isDirty = this.isDirty();
+
+    this.setState({
+      isFlamegraphDirty: isDirty,
+    });
+  };
+
+  updateFitMode = (newFitMode: FitModes) => {
+    this.setState({
+      fitMode: newFitMode,
+    });
+  };
+
+  // used as a variable instead of keeping in the state
+  // so that the flamegraph doesn't rerender unnecessarily
+  isDirty = () => {
+    return (
+      this.state.selectedItem.isJust ||
+      JSON.stringify(this.initialFlamegraphState) !==
+        JSON.stringify(this.state.flamegraphConfigs)
+    );
+  };
+
+  shouldShowToolbar() {
+    // default to true
+    return this.props.showToolbar !== undefined ? this.props.showToolbar : true;
+  }
+
+  render = () => {
+    // This is necessary because the order switches depending on single vs comparison view
+    const tablePane = (
+      <div
+        key="table-pane"
+        className={clsx(
+          styles.tablePane,
+          this.state.panesOrientation === 'vertical'
+            ? styles.vertical
+            : styles.horizontal
+        )}
+      >
+        <ProfilerTable
+          data-testid="table-view"
+          flamebearer={this.state.flamebearer}
+          fitMode={this.state.fitMode}
+          highlightQuery={this.state.searchQuery}
+          selectedItem={this.state.selectedItem}
+          handleTableItemClick={this.setActiveItem}
+          palette={this.state.palette}
+        />
+      </div>
+    );
+
+    const toolbarVisible = this.shouldShowToolbar();
+
+    const flameGraphPane = (
+      <Graph
+        key="flamegraph-pane"
+        // data-testid={flamegraphDataTestId}
+        showCredit={this.props.showCredit as boolean}
+        flamebearer={this.state.flamebearer}
+        highlightQuery={this.getHighlightQuery()}
+        setActiveItem={this.setActiveItem}
+        selectedItem={this.state.selectedItem}
+        updateView={this.props.onlyDisplay ? undefined : this.updateView}
+        fitMode={this.state.fitMode}
+        updateFitMode={this.updateFitMode}
+        zoom={this.state.flamegraphConfigs.zoom}
+        focusedNode={this.state.flamegraphConfigs.focusedNode}
+        onZoom={this.onFlamegraphZoom}
+        onFocusOnNode={this.onFocusOnNode}
+        onReset={this.onReset}
+        isDirty={this.isDirty}
+        palette={this.state.palette}
+        toolbarVisible={toolbarVisible}
+        setPalette={(p) =>
+          this.setState({
+            palette: p,
+          })
+        }
+      />
+    );
+
+    const sandwichPane = (() => {
+      if (this.state.selectedItem.isNothing) {
+        return (
+          <div className={styles.sandwichPane} key="sandwich-pane">
+            <div
+              className={clsx(
+                styles.sandwichPaneInfo,
+                this.state.panesOrientation === 'vertical'
+                  ? styles.vertical
+                  : styles.horizontal
+              )}
+            >
+              <div className={styles.arrow} />
+              Select a function to view callers/callees sandwich view
+            </div>
+          </div>
+        );
+      }
+
+      const callersFlamebearer = callersProfile(
+        this.state.flamebearer,
+        (this.state.selectedItem as any).value
+      );
+      const calleesFlamebearer = calleesProfile(
+        this.state.flamebearer,
+        (this.state.selectedItem as any).value
+      );
+      const sandwitchGraph = (myCustomParams: {
+        flamebearer: Flamebearer;
+        headerVisible?: boolean;
+        showSingleLevel?: boolean;
+      }) => (
+        <Graph
+          disableClick
+          showCredit={this.props.showCredit as boolean}
+          highlightQuery=""
+          setActiveItem={this.setActiveItem}
+          selectedItem={this.state.selectedItem}
+          fitMode={this.state.fitMode}
+          updateFitMode={this.updateFitMode}
+          zoom={this.state.flamegraphConfigs.zoom}
+          focusedNode={this.state.flamegraphConfigs.focusedNode}
+          onZoom={this.onFlamegraphZoom}
+          onFocusOnNode={this.onFocusOnNode}
+          onReset={this.onReset}
+          isDirty={this.isDirty}
+          palette={this.state.palette}
+          toolbarVisible={toolbarVisible}
+          setPalette={(p) =>
+            this.setState({
+              palette: p,
+            })
+          }
+          {...myCustomParams}
+        />
+      );
+
+      return (
+        <div className={styles.sandwichPane} key="sandwich-pane">
+          <div className={styles.sandwichTop}>
+            <span className={styles.name}>Callers</span>
+            {/* todo(dogfrogfog): to allow left/right click on the node we should
+            store Graph component we clicking and append action only on to
+            this component
+            will be implemented i nnext PR */}
+            {sandwitchGraph({ flamebearer: callersFlamebearer })}
+          </div>
+          <div className={styles.sandwichBottom}>
+            <span className={styles.name}>Callees</span>
+            {sandwitchGraph({
+              flamebearer: calleesFlamebearer,
+              headerVisible: false,
+              showSingleLevel: true,
+            })}
+          </div>
+        </div>
+      );
+    })();
+
+    // export type Flamebearer = {
+    //   /**
+    //    * List of names
+    //    */
+    //   names: string[];
+    //   /**
+    //    * List of level
+    //    *
+    //    * This is NOT the same as in the flamebearer
+    //    * that we receive from the server.
+    //    * As in there are some transformations required
+    //    * (see deltaDiffWrapper)
+    //    */
+    //   levels: number[][];
+    //   numTicks: number;
+    //   maxSelf: number;
+
+    //   /**
+    //    * Sample Rate, used in text information
+    //    */
+    //   sampleRate: number;
+    //   units: Units;
+
+    //   spyName: SpyName;
+    //   // format: 'double' | 'single';
+    //   //  leftTicks?: number;
+    //   //  rightTicks?: number;
+    // } & addTicks;
+
+    const dataUnavailable =
+      !this.state.flamebearer || this.state.flamebearer.names.length <= 1;
+    const panes = decidePanesOrder(
+      this.state.view,
+      flameGraphPane,
+      tablePane,
+      sandwichPane,
+      <GraphVizPane flamebearer={this.state.flamebearer} />
+    );
+
+    return (
+      <div>
+        <div>
+          {toolbarVisible && (
+            <Toolbar
+              sharedQuery={this.props.sharedQuery}
+              enableChangingDisplay={!this.props.onlyDisplay}
+              flamegraphType={this.state.flamebearer.format}
+              view={this.state.view}
+              handleSearchChange={this.onSearchChange}
+              reset={this.onReset}
+              updateView={this.updateView}
+              updateFitMode={this.updateFitMode}
+              fitMode={this.state.fitMode}
+              isFlamegraphDirty={this.isDirty()}
+              selectedNode={this.state.flamegraphConfigs.zoom}
+              highlightQuery={this.state.searchQuery}
+              onFocusOnSubtree={this.onFocusOnNode}
+              ExportData={this.props.ExportData}
+            />
+          )}
+          {this.props.children}
+          <div
+            className={`${styles.flamegraphContainer} ${clsx(
+              this.state.panesOrientation === 'vertical'
+                ? styles.vertical
+                : styles.horizontal,
+              styles[this.state.panesOrientation],
+              styles.panesWrapper
+            )}`}
+          >
+            {dataUnavailable ? <NoData /> : panes.map((pane) => pane)}
+          </div>
+        </div>
+
+        {this.props.showPyroscopeLogo && (
+          <div className={styles.createdBy}>
+            Created by
+            <a
+              href="https://twitter.com/PyroscopeIO"
+              rel="noreferrer"
+              target="_blank"
+            >
+              <PyroscopeLogo width="30" height="30" />
+              @PyroscopeIO
+            </a>
+          </div>
+        )}
+      </div>
+    );
+  };
+}
+
+function decidePanesOrder(
+  view: FlamegraphRendererState['view'],
+  flamegraphPane: JSX.Element | null,
+  tablePane: JSX.Element,
+  sandwichPane: JSX.Element,
+  graphvizPane: JSX.Element
+) {
+  switch (view) {
+    case 'table': {
+      return [tablePane];
+    }
+    case 'flamegraph': {
+      return [flamegraphPane];
+    }
+    case 'sandwich': {
+      return [tablePane, sandwichPane];
+    }
+
+    case 'both': {
+      return [tablePane, flamegraphPane];
+    }
+
+    case 'graphviz': {
+      return [graphvizPane];
+    }
+    default: {
+      throw new Error(`Invalid view '${view}'`);
+    }
+  }
+}
+
+export default FlameGraphRenderer;

package/src/FlameGraph/FlamegraphRenderer.module.scss

@@ -0,0 +1,93 @@
+.flamegraphContainer {
+  width: 100%;
+}
+
+/* We take a gamble here and assume only 2 items will exist */
+.flamegraphContainer > *:first-child {
+  margin-right: 8px;
+}
+.flamegraphContainer > *:nth-child(2) {
+  margin-left: 8px;
+  /*  width: 50%; */
+}
+
+.createdBy {
+  color: white;
+  text-align: center;
+  margin: 10px 0;
+}
+.createdBy a {
+  color: #199bef !important;
+}
+
+.horizontal {
+  flex-direction: row;
+}
+
+.vertical {
+  /* reverse, since by default the table is on the left in the DOM */
+  flex-direction: column-reverse;
+}
+
+.panesWrapper {
+  display: flex;
+}
+
+.tablePane,
+.sandwichPane {
+  flex: 1;
+}
+
+.sandwichPane {
+  .sandwichPaneInfo {
+    display: inline-block;
+    position: relative;
+    margin: 30px 0 0 10px;
+    padding: 8px;
+    border-radius: 5px;
+    background-color: var(--ps-sandwich-pane-info-bg);
+    color: var(--ps-neutral-1);
+
+    &.vertical {
+      margin: 30px 0;
+
+      .arrow {
+        top: initial;
+        bottom: -15px;
+        left: 20px;
+        transform: rotate(-90deg);
+      }
+    }
+
+    .arrow {
+      position: absolute;
+      top: 14px;
+      left: -20px;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 8px 20px 8px 0;
+      border-color: transparent var(--ps-sandwich-pane-info-bg) transparent
+        transparent;
+    }
+  }
+
+  .sandwichTop {
+    margin-bottom: 10px;
+  }
+
+  .sandwichTop,
+  .sandwichBottom {
+    display: flex;
+
+    .name {
+      writing-mode: vertical-rl;
+      transform: rotate(-180deg);
+      padding: 5px 0;
+    }
+  }
+
+  .sandwichBottom span {
+    text-align: right;
+  }
+}