demo/file_hierarchy.htm

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Use of JSROOT hierarchy painter</title>
      <link rel="shortcut icon" href="../img/RootIcon.ico"/>
   </head>

   <body>
      <div style="inset: 0px; position: absolute;">
         <div id="myTreeDiv" style="width: 250px; height: 100%; float: left;"></div>
         <div id="myMainDiv" style="width: calc(100% - 250px); height: calc(100%); float:right;"></div>
      </div>
   </body>

   <script type='module'>
      import { HierarchyPainter, setDefaultDrawOpt } from '../modules/main.mjs';

      // change default draw option for supported ROOT class,
      // used when object clicked in the hierarchy
      setDefaultDrawOpt('TH1', 'text');
      setDefaultDrawOpt('TH2', 'col');

      let h = new HierarchyPainter('example', 'myTreeDiv');

      // configure 'simple' in provided <div> element
      // one also can specify "grid2x2" or "flex"
      h.setDisplay('simple', 'myMainDiv');

      // open file and display element
      await h.openRootFile('../../files/hsimple.root');

      await h.display('hpxpy;1', 'colz');

   </script>

</html>