github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/packages/pyroscope-flamegraph/src/FlameGraph/FlameGraphComponent/GraphVizPane.tsx (about)

     1  import type { Flamebearer } from '@pyroscope/models/src';
     2  import React, { useMemo } from 'react';
     3  import toGraphviz from '../../convert/toGraphviz';
     4  import styles from './GraphVizPanel.module.scss';
     5  
     6  // this is to make sure that graphviz-react is not used in node.js
     7  let Graphviz = (obj: IGraphvizProps) => {
     8    if (obj) {
     9      return null;
    10    }
    11    return null;
    12  };
    13  interface IGraphvizProps {
    14    dot: string;
    15    options?: object;
    16    className?: string;
    17  }
    18  
    19  if (typeof process === 'undefined') {
    20    /* eslint-disable global-require */
    21    Graphviz = require('graphviz-react').Graphviz;
    22  }
    23  
    24  interface GraphVizPaneProps {
    25    flamebearer: Flamebearer;
    26  }
    27  export function GraphVizPane({ flamebearer }: GraphVizPaneProps) {
    28    // TODO(@petethepig): I don't understand what's going on with types here
    29    //   need to fix at some point
    30    const fb = flamebearer as ShamefulAny;
    31  
    32    // flamebearer
    33    const dot = fb.metadata?.format && fb.flamebearer?.levels;
    34  
    35    // Graphviz doesn't update position and scale value on rerender
    36    // so image sometimes moves out of the screen
    37    // to fix it we remounting graphViz component by updating key
    38    const key = `graphviz-pane-${fb?.appName || String(new Date().valueOf())}`;
    39    const dotValue = useMemo(() => {
    40      return toGraphviz(fb);
    41    }, [JSON.stringify(fb)]);
    42  
    43    return (
    44      <div className={styles.graphVizPane} key={key}>
    45        {dot ? (
    46          <Graphviz
    47            // options https://github.com/magjac/d3-graphviz#supported-options
    48            options={{
    49              zoom: true,
    50              width: '150%',
    51              height: '100%',
    52              scale: 1,
    53              // 'true' by default, but causes warning
    54              // https://github.com/magjac/d3-graphviz/blob/master/README.md#defining-the-hpcc-jswasm-script-tag
    55              useWorker: false,
    56            }}
    57            dot={dotValue}
    58          />
    59        ) : (
    60          <div>NO DATA</div>
    61        )}
    62      </div>
    63    );
    64  }