new-post: pdf and ROOT file previews in web UI

[giuseppe-steduto]

No description provided.

[giuseppe-steduto]

• What do you think about using a browser mockup for the screenshots? The blog doesn't seem to be very uniform on this (here mockups are used, but here they are not). I guess it depends a lot on whether we want the reader to focus on the whole page or on a single portion of the interface.
• What do you think about using a GIF to showcase the interactivity of the ROOT file viewer, as is done in this PR? If you like the idea, I can work on uniforming the sizes of the padding of the images and improving the overall quality/resolution of the GIF.

[mdonadoni]

just a small comment: I like this paragraph a lot, it's very well written!

[mdonadoni]

• What do you think about using a browser mockup for the screenshots? The blog doesn't seem to be very uniform on this (here mockups are used, but here they are not). I guess it depends a lot on whether we want the reader to focus on the whole page or on a single portion of the interface.

I think showing the browser window is good for screenshots of the whole web page, while I would not show the window when considering only a part of the page.

• What do you think about using a GIF to showcase the interactivity of the ROOT file viewer, as is done in this PR? If you like the idea, I can work on uniforming the sizes of the padding of the images and improving the overall quality/resolution of the GIF.

I think this is a good idea! Maybe we can also investigate whether to use a video instead of a GIF? As an example, MP4 should be a widely supported video format, so we can test whether we can have better quality and/or smaller size compared to a GIF. Looking a bit into other blogs (e.g. GitHub, GitLab), I see that GIF are widely used, with occasional MP4 videos.

[giuseppe-steduto]

I think showing the browser window is good for screenshots of the whole web page, while I would not show the window when considering only a part of the page.

At first I went for the "mockupped" version of the screenshot because the file preview is almost as big as the browser window, but then I realized that, even with an high-resolution image or video, most of the details of the ROOT file previewer are lost. Right now the blog post only shows the "cropped" version of the images, but you can try to replace them in the markdown file with pdf-files-preview-mockup.png and root-files-preview-mockup.gif (I included them in this commit for now) to see the difference and say your opinion on which version looks best. Once we choose which version to keep in the post, I will remove the other two images from the commit and mark this PR as ready for review.

As an example, MP4 should be a widely supported video format, so we can test whether we can have better quality and/or smaller size compared to a GIF.

Right now the resolution of the GIF is quite good, with a size of a couple of megabytes. MP4 works okay, but it's quite larger in size compared to the GIF. I also tried to experiment with WebM, which is widely supported by browsers, and it worked well, but unless we want a smoother animation, I think that using the GIF is the best option.

[mdonadoni]

Right now the blog post only shows the "cropped" version of the images, but you can try to replace them in the markdown file with pdf-files-preview-mockup.png and root-files-preview-mockup.gif (I included them in this commit for now) to see the difference and say your opinion on which version looks best.

I do not see the "mockup" version of the images, but I guess the ones without the fake browser window are good.

Right now the resolution of the GIF is quite good, with a size of a couple of megabytes. MP4 works okay, but it's quite larger in size compared to the GIF. I also tried to experiment with WebM, which is widely supported by browsers, and it worked well, but unless we want a smoother animation, I think that using the GIF is the best option.

Let's keep the GIF version then, as it is supported basically everywhere.

[mdonadoni]

(very minor) Trailing space:

Suggested change

	Starting from REANA 0.9.1, when you click on a PDF file in your workflow's workspace in the web UI, an embedded
	Starting from REANA 0.9.1, when you click on a PDF file in your workflow's workspace in the web UI, an embedded

[mdonadoni]

(very minor) Trailing space:

Suggested change

	or even download the PDF if necessary.
	or even download the PDF if necessary.

[mdonadoni]

(very minor) Trailing space:

Suggested change

	in your REANA workflow workspace.
	in your REANA workflow workspace.

[tiborsimko]

Now that 0.9.1 is out, we should leave this paragraph and simply announce the novelty "less enthusiastically", since it has been out for some time, and many people may have noticed.

So I'd start simply with "For a long time, the REANA web interface..."

[tiborsimko]

BTW, on the similar tune: it may be better to enlarge the scope of this blog post to present everything previewable, so to speak. Hence we could show an example of previewing HTML files by means of Snakemake report, say that it was there since quite some time, and only then speak about PDF and ROOT that were added recently. In this way, the blog post could serve as a comprehensive information for the file previewing topic, also for future reference. This will make its value apparent so that people wouldn't think "why another blog post for something that was already announced (albeit in a few lines)". If we go for this, the blog post title should obviously change too, into something more generic, for example "Previewing your workspace files".

[tiborsimko]

very handy -> very convenient

[tiborsimko]

It may be useful to link, since some REANA readers from other scientific disciplines may not be familiar with ROOT. Hence:

ROOT files...

[tiborsimko]

The image needs update and can be taken from the 0.9.1 release blog post.

[tiborsimko]

... or suggestions for supporting previewing other file types, please ...

[tiborsimko]

We need also to link to https://blog.reana.io/posts/2023/reana-0.9.1/#previewing-pdf-and-root-files

I would call the first item "Previewing HTML files" (since REANA 0.8.1), and the second list item "Previewing PDF and ROOT files" (since REANA 0.9.1).

Changes to be implemented after 0.9.1is out

[tiborsimko]

Please also change the date to e.g. Thursday November 16th.

[tiborsimko]

If we take the stand to present a teaching-blog-post rather than news-blog-post, then we coudl better use the present tense, for example:

• The REANA web interface allows to preview several file types that are present in your orkflow workspaces. This may be very convenient to quickly glance through the produced outputs without having to download them first. The supported file types for interactive preview include text files, images, PDF files, and ROOT files.

That could be the introduction before diving further.

[tiborsimko]

Images and text files are quite different, so in the teaching-blog-post style, let's separate the two, and start speaking only about the text files. The table-of-contents would then go like:

• Previewing text files
• Previewing images
• Previewing HTML files
• Previewing PDF files
• Previewing ROOT files

[tiborsimko]

Again, instead of "allowed" etc in the past tense, we can rephrase the whole thing to use present tense, in the spirit of the "teaching mode" style of the blog post.

Also, I would add one more screenshot of the naked Workspace tab, to develop the story fully from scratch.

Going like:

• REANA web interface allows to inspect the content of your workspaces using the Workspace tab (-> picture)
• You can click on any text file there, C code, Python code, etc (-> picture)

[tiborsimko]

Then, as for images, we could preview the produced PNG plot.

[tiborsimko]

Again we can replace "past" by "present" and go like:

• The previewing of HTML files can be valuable especially for Snakemake users. The Snakemake workflow execution creates a detailed report in the HTML format. You can search your workspace for "report.html" and preview it in a new browser tab:

[tiborsimko]

BTW it may be nicer to use the CMS H4l example which produces a richer report:

Well, speaking of this, the Snakemake reports can be much richer, for example see this upstream example:

However we don't have such a rich report defined yet in any of our REANA demo examples.

It may be perhaps worth to take the time and enrich either the RooFit example or the CMS H4l example to produce such a richer Snakemake report including final plots with descriptions etc?

[tiborsimko]

The BSM example would be perhaps better to show here, since we could show both the workflow PDF display and the final postfit plot (which is in PDF as well).

(Not necessary to switch, just musing out loud.)

[tiborsimko]

In the optics of moving from news-announcement style to teaching-blog-post style, you could leave out the phrase "These announcements..." and directly end the blog post with "We are continually improving...". This could go simply like this:

• We hope that the interactive file preview feature is proving to be beneficial in your usage of the REANA web interface. We are striving to continually improve the usability of the system based on your feedback and suggestions. Pease let us know if you would like to support previewing more file types!