Option to center-justify the figures in the SoS-generated html that were tagged with "report_output"?

[mathieuboudreau]

Is there a way to do this – if not, could this be implemented? I know I could likely go in and customize the html myself for each generate file, but this seems like a feature that a large portion of the users would want and benefit from (left-justified output figures don't look right in the current format when paragraphs surround them).

[BoPeng]

It is easy to implement but I am not sure if I should set this as default. What is the default for nbconvert for regular notebooks?

I actually have been thinking of changing the workflow of the report template. I mean, right now,

1. We by default do not show any code cell, but show all markdown cells.
2. We allow the "output" of code cell and "hide" of markdown cell using different tags.

It would be more natural to

1. By default show all markdown and code cells (to be consistent with other templates)
2. Allow the use of tags to hide and remove selected code cells and markdown cells (to have consistent behavior for code and markdown cells).

Also, notice that JupyterLab supports collapse of output and cells, it would be easier to hide collapsed cells instead of introducing our own tags.

[mathieuboudreau]

It is easy to implement but I am not sure if I should set this as default. What is the default for nbconvert for regular notebooks?

How about creating tags for justifying the output (e.g. justify_left, justify_center, justify_right)?

1. We by default do not show any code cell, but show all markdown cells.
2. We allow the "output" of code cell and "hide" of markdown cell using different tags.

I actually like this workflow, as this way I only need to tag a few cells with report output or scratch. The other way (showing all by default), would require me to tag many more code cells to hide them by default. By default, I like that code cells are hidden, but I'm just a new user =)

[BoPeng]

Just tried a R notebook and the figure is left justified, but look more or less centered because the default size is very large.

[BoPeng]

The tag idea is acceptable but I would like to make it more general, and this is one of the reasons why I wanted consistent behavior for the tags. That is to say,

1. We continue to use scratch as things we do not want to appear in the report.
2. We define a bunch of tags for classes defined in the output, and hidden would be one of them, and justify_left etc can also be defined.

Then in the template we simply need to include all tags as classes.

Finally, we can think of a way to embed or include external css files in the output HTML, which would allow users to define arbitrary css and use tags to apply them to the report cells. (Something like %sossave --css files).

[BoPeng]

@HenryLeongStat Do you want to tackle this? This looks like something that is relatively easy and useful (Jinja2) to you.

Just to add that one row of the table in https://vatlab.github.io/sos-docs/doc/examples/Preview_and_Report_Generation.html is not rendered correctly.

[HenryLeongStat]

Sure!! It sounds interesting! :D

[BoPeng]

Great, please

1. Read (and fix) https://vatlab.github.io/sos-docs/doc/examples/Preview_and_Report_Generation.html to understand how sos uses templates for reports
2. Learn some Jinja2 and understand how templates like this is written
3. Derive a new template from sos-full and add a few css and see if it works
4. We can then meet next week and see how to proceed.

[HenryLeongStat]

Will do!

[BoPeng]

@mathieuboudreau Before the feature is baked in sos, you can add the css to your report as follows:

1. Define a template file (say, myreport.tpl) with content

{% extends 'sos-report.tpl' %}

{% block header %}
{{ super() }}
<style type="text/css">

.output_area img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

</style>

{% endblock header %}

2. Generate your report with command

sos convert myanalysis.ipynb myanalysis.html --template myreport.tpl

[mathieuboudreau]

@BoPeng Thanks!! However, I tried it and it did not center my figures.

For reference, this is the file I just tried: https://github.com/qMRLab/t1_notebooks/blob/master/ir_notebooks/ModellingSignal.ipynb

[mathieuboudreau]

This template ended up working!

{% extends 'sos-report.tpl' %}

{% block header %}
{{ super() }}
<style type="text/css">

.output_subarea {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

</style>

{% endblock header %}

A+

[BoPeng]

Yes, you figures might not have an img tag, but I am glad that you figured it out.