Issues with displaying TH1s on JSROOT on webpages

ROOT
1

Hi!

I experienced some problems when I tried to create a ROOT Browser page on my personal CERN home page. I attempted to integrate it with my plot browser that you can see here:

https://guven.web.cern.ch/test_jsroot

This calls viewroot.php script when I click on the ROOT files, which I tried my best to code with ChatGPT, but I couldn’t make it work unfortunately. If you click on the page you will see 3 root files in plots section. ntuple works flawlessly, however the other ones contain TH1s instead of ntuples, and for some reason they don’t work.

I tried multiple times and couldn’t succeed. Now I started believe it has something to do with the histograms. Do you know what the source of this error could be?

A copy of my viewroot.php script is given here: https://guven.web.cern.ch/test_jsroot/viewroot.newphp

My goal was to create a plot browser page like this: https://cms-plt.web.cern.ch/cms-plt/paper/Paper

And also add the functionality to browse individual ROOT files containing histograms.

If you have the time could you help me with that please? I feel I am close, but I cannot finish it myself.

N.B.

  • The site is hosted at CERN, so I might not have full control on all open ports, security etc. If the problem is related to the configuration of the page I cannot do anything unfortunately, but I am not sure of this.
  • My knowledge of php and javascript is quite limited. I would be happy if you try to be explicit in solving the problem.

Thanks in advance!

Cheers.

2

Hi,

May be start from this point.
If you want to show some concrete plot on HTML page - you should not create HierarchyPainter which provides browsing in ROOT files and let you display any object from it. And may be you just need to use draw function of JSROOT like it shown in this demo:

Code is very simple there:

   import { openFile, draw } from 'jsroot';
   const file = await openFile('../../files/hsimple.root');
   const obj = await file.readObject('hpxpy;1');
   draw('drawing', obj, 'colz');

Of course, all kinds of other HTML elements can be add as well.

Regards,
Sergey

3

Dear Sergey,

Thank you for your message.

Of course that is an option, however I am still curious how one can browse ROOT files and see the histograms on the right pane. I think it is an amazing thing to be able to do this on simple webpages.

Do you have any opinions why this page does not show TH1s, but show ntuples?

Best,

Kaan

4

Hi Kaan,

Do you have any opinions why this page does not show TH1s, but show ntuples?

There are several issues with your code.

First of all, expand function is async, so one need to wait for it:

      await h.exapndToLevel(2);

But I do not recommend to use this function. It automatically loads all objects from the file and try to expand them - which can take a while. Also JSROOT changes it behavior when object was tried to expand.

And then iterating over the items was not correct. One can do:

      let first = null;
      h.forEachItem(item => {
         if ((item?._kind === 'ROOT.TH1F') && !first)
            first = h.itemFullName(item);
      });
      if (first)
         await h.display(first);

Regards,
Sergey

5

Also small remark - it is not allowed to use async function inside h.forEachItem.