github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/standalone.tsx (about)

     1  // @typescript-eslint/restrict-template-expressions
     2  import ReactDOM from 'react-dom';
     3  import React from 'react';
     4  import Box from '@webapp/ui/Box';
     5  import { decodeFlamebearer } from '@webapp/models/flamebearer';
     6  import { FlamegraphRenderer } from '@pyroscope/flamegraph/src/FlamegraphRenderer';
     7  import Footer from './components/Footer';
     8  import '@pyroscope/flamegraph/dist/index.css';
     9  
    10  if (!(window as ShamefulAny).flamegraph) {
    11    alert(`'flamegraph' is required`);
    12    throw new Error(`'flamegraph' is required`);
    13  }
    14  
    15  // TODO parse window.flamegraph
    16  const { flamegraph } = window as ShamefulAny;
    17  
    18  function StandaloneApp() {
    19    const flamebearer = decodeFlamebearer(flamegraph);
    20  
    21    return (
    22      <div>
    23        <Box>
    24          <FlamegraphRenderer
    25            flamebearer={flamebearer as ShamefulAny}
    26            ExportData={null}
    27          />
    28        </Box>
    29        <Footer />
    30      </div>
    31    );
    32  }
    33  
    34  function run() {
    35    ReactDOM.render(<StandaloneApp />, document.getElementById('root'));
    36  }
    37  
    38  // Since InlineChunkHtmlPlugin adds scripts to the head
    39  // We must wait for the DOM to be loaded
    40  // Otherwise React will fail to initialize since there's no DOM yet
    41  window.addEventListener('DOMContentLoaded', run, false);